Merge pull request #1012 from 3YOURMIND/new-kt-toaster

feature(KtToaster): Re-implement KtToaster and KtBanner with Support for TypeScript, and A New Design, and API

.editorconfig

@@ -5,7 +5,6 @@ charset = utf-8
 end_of_line = lf
 indent_style = tab
 insert_final_newline = true
-max_line_length = 80
 trim_trailing_whitespace = true
 
 [*.md]

eslint.config.mjs

@@ -15,6 +15,7 @@ const trustedDependencies = new Set([
 	'@metatypes/typography',
 	'@metatypes/units',
 	'filesize',
+	'nanoid',
 	'zod',
 ])
 

internals/fake-root/package.json

@@ -3,7 +3,7 @@
 	"private": true,
 	"scripts": {
 		"check:eslint": "yarn --cwd ../.. run eslint --max-warnings=0 --ignore-pattern=internals --ignore-pattern=packages .",
-		"check:knip": "yarn --cwd ../.. run knip",
+		"check:knip": "yarn --cwd ../.. run knip --tags=-knipignore",
 		"check:prettier": "yarn --cwd ../.. run prettier --check --ignore-path=.fake-prettierignore --ignore-path=.prettierignore .",
 		"fix:eslint": "yarn run check:eslint --fix",
 		"fix:prettier": "yarn run check:prettier --write"

packages/documentation/components/CodePreviewNew.vue

@@ -0,0 +1,167 @@
+<template>
+	<div :class="[$style.wrapper, $style[`wrapper--is-type-${type}`]]">
+		<section v-if="$slots.default" :class="$style.example">
+			<slot />
+		</section>
+		<div v-else style="margin-bottom: -1px" />
+		<div v-if="code" :class="$style.actions">
+			<div v-if="fileName" :class="$style.fileName" v-text="fileName" />
+			<div :class="$style.language" v-text="language" />
+			<div
+				v-if="type !== 'default'"
+				:class="$style.language"
+				v-text="`(${type.toUpperCase()})`"
+			/>
+			<div :class="$style.copyButton" role="button" @click="onCopy">
+				<i class="yoco">copy</i>
+			</div>
+		</div>
+		<div v-if="code" :class="$style.code">
+			<pre v-text="dedentedCode" />
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import copy from 'copy-to-clipboard'
+import dedent from 'ts-dedent'
+import { computed, defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
+import { error, success } from '~/utilities/toaster'
+
+/**
+ * Port of an equivalent component from 'vue3/upgrade'. Used to document the new kt-toaster
+ * TODO: remove in vue3
+ */
+export default defineComponent({
+	name: 'CodePreviewNew',
+	props: {
+		code: { default: null, type: String as PropType<string | null> },
+		fileName: { default: null, type: String },
+		language: { required: true, type: String },
+		type: {
+			default: 'default',
+			type: String as PropType<'default' | 'preview'>,
+		},
+	},
+	setup(props) {
+		const dedentedCode = computed(() =>
+			dedent(props.code ?? '')
+				.split('\n')
+				.map((line) => line.replace('//--', ''))
+				.join('\n'),
+		)
+		return {
+			dedentedCode,
+			onCopy: () => {
+				const wasSuccessful = copy(dedentedCode.value)
+
+				if (wasSuccessful)
+					// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+					// @ts-ignore nuxt typescript does not like this for some reason
+					success({
+						// eslint-disable-next-line no-magic-numbers
+						text: `copied “${dedentedCode.value.slice(0, 40)}...” to clipboard`,
+					})
+				else
+					error({
+						text: 'There was a failure when copying to clipboard',
+					})
+			},
+		}
+	},
+})
+</script>
+
+<style module>
+.wrapper {
+	margin-block: var(--unit-8);
+	overflow: hidden;
+	border: 1px solid transparent;
+	border-radius: var(--border-radius);
+}
+
+.wrapper--is-type-default {
+	border-color: var(--gray-20);
+
+	.actions {
+		background-color: var(--gray-10);
+		border-top-color: var(--gray-20);
+		border-bottom-color: var(--gray-20);
+	}
+
+	.code > * {
+		background-color: var(--gray-10) !important;
+	}
+}
+
+.wrapper--is-type-preview {
+	border-color: var(--orange-20);
+	border-style: dashed;
+	opacity: 0.667;
+
+	.actions {
+		background-color: var(--yellow-20);
+		border-style: dashed;
+		border-top-color: var(--yellow-50);
+		border-bottom-color: var(--orange-20);
+	}
+
+	.code > * {
+		background-color: var(--yellow-20) !important;
+	}
+}
+
+.actions,
+.code > * {
+	padding: var(--unit-3) var(--unit-6);
+}
+
+.actions {
+	display: flex;
+	gap: var(--unit-6);
+	align-items: center;
+	border: 1px solid transparent;
+}
+
+.code {
+	pre {
+		tab-size: 3;
+	}
+
+	> * {
+		margin: 0;
+		overflow-x: auto;
+	}
+}
+
+/* stylelint-disable selector-class-pattern */
+.copyButton {
+	display: flex;
+	padding: var(--unit-2);
+	margin: calc(-1 * var(--unit-2));
+	margin-left: auto; /* push to end of flexbox */
+	font-size: 1.2rem;
+	user-select: none;
+
+	&:hover {
+		color: var(--interactive-01);
+	}
+}
+
+.example {
+	padding: var(--unit-6);
+}
+
+.fileName,
+.language {
+	font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+		'Courier New', monospace;
+}
+
+.fileName {
+	font-weight: bold;
+}
+/* stylelint-enable selector-class-pattern */
+</style>

packages/documentation/components/ColorPalette.vue

@@ -11,17 +11,15 @@
 			<div class="color-palette__name" v-text="color.name" />
 			<div class="color-palette__code" v-text="color.code" />
 		</div>
-		<transition name="slide-fade">
-			<div v-if="copySuccess" class="success-message">Copy successful</div>
-		</transition>
 	</div>
 </template>
 
 <script lang="ts">
-import { TimeConversion } from '@metatypes/units'
 import copy from 'copy-to-clipboard'
 import type { PropType } from 'vue'
-import { defineComponent, ref } from 'vue'
+import { defineComponent } from 'vue'
+
+import { error, success } from '~/utilities/toaster'
 
 export default defineComponent({
 	name: 'ColorPalette',
@@ -33,22 +31,19 @@ export default defineComponent({
 		},
 	},
 	setup() {
-		const copySuccess = ref(false)
-
 		return {
 			copyColor: (codeString: string) => {
 				const wasSuccessful = copy(codeString)
 				if (wasSuccessful) {
-					copySuccess.value = true
-					window.setTimeout(() => {
-						copySuccess.value = false
-					}, TimeConversion.MILLISECONDS_PER_SECOND)
+					success({
+						text: `Copied color "${codeString}"`,
+					})
 				} else {
-					// eslint-disable-next-line no-alert
-					window.alert('failed')
+					error({
+						text: 'There was a failure when copying to clipboard',
+					})
 				}
 			},
-			copySuccess,
 			textColor: (colorName: string) => {
 				if (
 					colorName === 'Lightgray-300' ||

packages/documentation/components/ComponentInfo.vue

@@ -62,7 +62,6 @@
 				</div>
 			</section>
 		</article>
-		<ComponentInfoSlots :slots="component.meta.slots" />
 		<KtHeading
 			v-if="component.props"
 			text="Properties"
@@ -141,6 +140,8 @@
 				</template>
 			</div>
 		</KtHeading>
+
+		<ComponentInfoSlots :slots="component.meta.slots" />
 	</div>
 </template>
 

packages/documentation/components/MyToaster.vue

@@ -0,0 +1,37 @@
+<template>
+	<KtToaster :toaster="toaster">
+		<template #error>
+			<KtToast type="error" />
+		</template>
+		<template #info>
+			<KtToast type="info" />
+		</template>
+		<template #success>
+			<KtToast type="success" />
+		</template>
+		<template #warning>
+			<KtToast type="warning" />
+		</template>
+	</KtToaster>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import { KtToast, KtToaster } from '@3yourmind/kotti-ui'
+
+import { toaster } from '~/utilities/toaster'
+
+export default defineComponent({
+	name: 'MyToaster',
+	components: {
+		KtToast,
+		KtToaster,
+	},
+	setup() {
+		return {
+			toaster,
+		}
+	},
+})
+</script>

packages/documentation/components/YocoPreview.vue

@@ -18,48 +18,41 @@
 		<div class="copy copy-hover">
 			<div>Click to Copy</div>
 		</div>
-		<div
-			v-if="copySuccess"
-			class="success-message"
-			v-text="copyIconSuccessMessage"
-		/>
 	</div>
 </template>
 
 <script lang="ts">
-import { TimeConversion } from '@metatypes/units'
 import copy from 'copy-to-clipboard'
 import type { PropType } from 'vue'
-import { computed, defineComponent, ref } from 'vue'
+import { computed, defineComponent } from 'vue'
 
 import type { Yoco } from '@3yourmind/yoco'
 
+import { error, success } from '~/utilities/toaster'
+
 export default defineComponent({
 	name: 'YocoPreview',
 	props: {
 		enum: { required: true, type: String },
 		icon: { required: true, type: String as PropType<Yoco.Icon> },
 	},
 	setup(props) {
-		const copySuccess = ref(false)
-
 		return {
 			copyIconSuccessMessage: computed(() => `Copied icon "${props.icon}"`),
 			copyLiga: (yocoName: string) => {
 				const codeString = `<i class="yoco">${yocoName}</i>`
 				const wasSuccessful = copy(codeString)
 
 				if (wasSuccessful) {
-					copySuccess.value = true
-					window.setTimeout(() => {
-						copySuccess.value = false
-					}, 2 * TimeConversion.MILLISECONDS_PER_SECOND)
+					success({
+						text: `Copied icon "${props.icon}"`,
+					})
 				} else {
-					// eslint-disable-next-line no-alert
-					window.alert('failed')
+					error({
+						text: 'There was a failure when copying to clipboard',
+					})
 				}
 			},
-			copySuccess,
 			enumRepresentation: computed(() => `Yoco.Icon.${props.enum}`),
 		}
 	},

packages/documentation/layouts/default.vue

@@ -13,6 +13,7 @@
 				</div>
 			</template>
 		</LayoutContainer>
+		<MyToaster />
 	</KtI18nContext>
 </template>
 
@@ -21,6 +22,7 @@ import { KtI18nContext } from '@3yourmind/kotti-ui'
 
 import ActionBar from '~/components/ActionBar.vue'
 import LayoutContainer from '~/components/LayoutContainer.vue'
+import MyToaster from '~/components/MyToaster.vue'
 import NavBar from '~/components/NavBar.vue'
 
 /* eslint-disable perfectionist/sort-objects */
@@ -29,6 +31,7 @@ export default {
 	components: {
 		ActionBar,
 		KtI18nContext,
+		MyToaster,
 		NavBar,
 		LayoutContainer,
 	},

packages/documentation/layouts/empty.vue

@@ -1,13 +1,19 @@
 <template>
 	<KtI18nContext locale="en-US">
 		<nuxt />
+		<MyToaster />
 	</KtI18nContext>
 </template>
 
 <script>
 import { defineComponent } from 'vue'
 
+import MyToaster from '~/components/MyToaster.vue'
+
 export default defineComponent({
 	name: 'EmptyLayout',
+	components: {
+		MyToaster,
+	},
 })
 </script>