From 7caf6c69c3fcf1b60516ce7cf3621ec85c83b9d1 Mon Sep 17 00:00:00 2001
From: Carol Soliman <cso@3yourmind.com>
Date: Fri, 17 Feb 2023 13:36:18 +0100
Subject: [PATCH] refact(KtToaster): to ts

---
 .../pages/usage/components/toaster.vue        |  53 ++--
 packages/kotti-ui/source/index.ts             |  14 +-
 .../source/kotti-toaster/KtToaster.vue        | 228 +++++++++++-------
 .../source/kotti-toaster/constants.ts         |   1 +
 .../kotti-ui/source/kotti-toaster/index.ts    |   6 +-
 .../kotti-ui/source/kotti-toaster/types.ts    |  34 +++
 .../{utilities.js => utilities.ts}            |  17 +-
 packages/kotti-ui/source/types/kotti.ts       |   3 +-
 8 files changed, 238 insertions(+), 118 deletions(-)
 create mode 100644 packages/kotti-ui/source/kotti-toaster/constants.ts
 create mode 100644 packages/kotti-ui/source/kotti-toaster/types.ts
 rename packages/kotti-ui/source/kotti-toaster/{utilities.js => utilities.ts} (59%)

diff --git a/packages/documentation/pages/usage/components/toaster.vue b/packages/documentation/pages/usage/components/toaster.vue
index 66e627f128..ee01e86505 100644
--- a/packages/documentation/pages/usage/components/toaster.vue
+++ b/packages/documentation/pages/usage/components/toaster.vue
@@ -9,11 +9,12 @@ Toasters can deliver messages that the user needs to pay attention to without in
 
 ![Toaster Structure](~/assets/img/toaster_structure.png)
 
-1. Type Color: Depends on the type of toaster. There are three colors:
+1. Type Color: Depends on the type of toaster. It uses the Kotti Color Tokens for success, error, warning:
 
-   - `Green-500`: for success information
-   - `Orange-500`: for warning message
-   - `Red-500`: for fail/alert message
+   - `var(--support-error)`: for type `error`
+   - `var(--support-info)`: for type `info`
+   - `var(--support-success)`: for type `success`
+   - `var(--support-warning)`: for type `warning`
 
 2. Message: Keep the message short and easy to understand, since the toaster disappears automatically after a few seconds.
 
@@ -26,15 +27,19 @@ Since `Kotti-UI 1.0.0`, [vue-yodify](https://github.com/3YOURMIND/vue-yodify) is
 <div class="element-example">
 	<KtToaster/>
 	<KtButton
-		@click="$yodify({ text: 'Wow very looooooooooooong text, and it breaks the line!', type: 'success' })"
+		@click="notify('Info message', Type.INFO)"
+		v-text="'Info Message'"
+	/>
+	<KtButton
+		@click="notify('Wow very looooooooooooong text, and it breaks the line!', Type.SUCCESS)"
 		v-text="'Success Long Message'"
 	/>
 	<KtButton
-		@click="$yodify({ text: 'Error message', type: 'error' })"
+		@click="notify('Error message', Type.ERROR)"
 		v-text="'Error Message'"
 	/>
 	<KtButton
-		@click="$yodify({ text: 'Warning message', type: 'warning' })"
+		@click="notify('Warning message', Type.WARNING)"
 		v-text="'Warning Message'"
 	/>
 </div>
@@ -59,17 +64,28 @@ this.$yodify({
 })
 ```
 
+Or within Vue's setup hook
+
+```js
+const root = getCurrentInstance()
+root.$yodify({
+	text: 'This was successful :)',
+	type: 'success', // optional, default
+	duration: 3000,
+})
+```
+
 ### Attributes
 
-| Attribute  | Description                                 | Type     | Accepted values               | Default   |
-| :--------- | :------------------------------------------ | :------- | :---------------------------- | :-------- |
-| `duration` | duration after which the toaster disappears | `Number` | —                             | `3000`    |
-| `text`     | text message in the toaster                 | `String` | —                             | —         |
-| `type`     | define the type of the toaster              | `String` | `success`, `error`, `warning` | `success` |
+| Attribute  | Description                                 | Type     | Accepted values                       | Default   |
+| :--------- | :------------------------------------------ | :------- | :------------------------------------ | :-------- |
+| `duration` | duration after which the toaster disappears | `Number` | —                                     | `3000`    |
+| `text`     | text message in the toaster                 | `String` | —                                     | —         |
+| `type`     | define the type of the toaster              | `String` | `error`, `info`, `success`, `warning` | `success` |
 </template>
 
 <script lang="ts">
-import { KtToaster } from '@3yourmind/kotti-ui'
+import { Kotti, KtToaster } from '@3yourmind/kotti-ui'
 import { defineComponent } from '@vue/composition-api'
 
 import ComponentInfo from '~/components/ComponentInfo.vue'
@@ -79,9 +95,18 @@ export default defineComponent({
 	components: {
 		ComponentInfo,
 	},
-	setup() {
+	setup(_, setupContext) {
+		const root = setupContext.root
+
 		return {
+			Type: Kotti.Toaster.Type,
 			component: KtToaster,
+			notify: (
+				text: Kotti.Toaster.Notification['text'],
+				type: Kotti.Toaster.Type,
+			) => {
+				root?.$yodify({ text, type })
+			},
 		}
 	},
 })
diff --git a/packages/kotti-ui/source/index.ts b/packages/kotti-ui/source/index.ts
index d77eb4561e..bc11bcaa71 100644
--- a/packages/kotti-ui/source/index.ts
+++ b/packages/kotti-ui/source/index.ts
@@ -97,6 +97,7 @@ import { KtTag } from './kotti-tag'
 export * from './kotti-tag'
 import { KtToaster } from './kotti-toaster'
 export * from './kotti-toaster'
+import { KottiToaster } from './kotti-toaster/types'
 import { KtUserMenu } from './kotti-user-menu'
 export * from './kotti-user-menu'
 export * from './types'
@@ -166,14 +167,15 @@ export default {
 		Vue.prototype.$yodify = function ({
 			duration = DEFAULT_YODIFY_DURATION,
 			text,
-			type = 'success',
-		}: {
-			duration: number
-			text: string
-			type: 'success' | 'error'
-		}) {
+			type = KottiToaster.Type.SUCCESS,
+		}: KottiToaster.Notification) {
 			const notification = { duration, text, type }
 
+			console.log('inside yodify function assignment')
+			console.log('root', this.$root)
+			console.log('root.$yodifyBuffer', this.$root.$yodifyBuffer)
+			console.log('root.$yodify', this.$root.$yodify)
+
 			// buffer notifications if vue isn't ready
 			if (!this.$root) Vue.prototype.$yodifyBuffer.push(notification)
 			else this.$root.$emit('vue-yodify', notification)
diff --git a/packages/kotti-ui/source/kotti-toaster/KtToaster.vue b/packages/kotti-ui/source/kotti-toaster/KtToaster.vue
index 089b3b93a9..33dd78b709 100644
--- a/packages/kotti-ui/source/kotti-toaster/KtToaster.vue
+++ b/packages/kotti-ui/source/kotti-toaster/KtToaster.vue
@@ -11,7 +11,7 @@
 			<div class="vue-yodify__content" v-text="notification.text" />
 			<div
 				class="vue-yodify__close"
-				@click="deleteNotification(notification.id)"
+				@click="deleteNotificationById(notification.id)"
 			>
 				<i class="yoco" v-text="'close'" />
 			</div>
@@ -19,124 +19,172 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts">
+import { Yoco } from '@3yourmind/yoco'
 import { TimeConversion } from '@metatypes/units'
+import {
+	getCurrentInstance,
+	defineComponent,
+	onUnmounted,
+	ref,
+	onMounted,
+	onBeforeMount,
+} from '@vue/composition-api'
 
 import { isBrowser } from '../utilities'
 
+import { DEFAULT_YODIFY_NOTIFICATION_DURATION_IN_SECONDS } from './constants'
+import { KottiToaster } from './types'
 import { generateId, notId } from './utilities.js'
 
-const DEFAULT_DURATION_IN_SECONDS = 3
-
-export default {
+export default defineComponent({
 	name: 'KtToaster',
-	data() {
-		return { queue: [] }
-	},
-	created() {
-		let notification
-		while ((notification = this.$yodifyBuffer.pop()))
-			this.addNotification(notification)
+	setup() {
+		const root = getCurrentInstance()
 
-		this.$root.$on('vue-yodify', this.addNotification)
-	},
-	beforeDestroy() {
-		this.$root.$off('vue-yodify', this.addNotification)
-	},
-	methods: {
-		addNotification({
+		const yodifyBuffer =
+			// @ts-expect-error see usage of `Vue.prototype.$yodifyBuffer = []` on root index file
+			(root?.$yodifyBuffer as Array<KottiToaster.NotificationInternal>) ?? []
+
+		const queue = ref<Array<KottiToaster.NotificationInternal>>([])
+
+		const addNotification = ({
 			id = generateId(),
 			text,
 			type,
-			duration = DEFAULT_DURATION_IN_SECONDS *
+			duration = DEFAULT_YODIFY_NOTIFICATION_DURATION_IN_SECONDS *
 				TimeConversion.MILLISECONDS_PER_SECOND,
-		}) {
-			this.queue.push({ id, text, type })
+		}: KottiToaster.NotificationInternal) => {
+			debugger
+			queue.value.push({ id, text, type })
 
 			if (isBrowser)
-				window.setTimeout(() => this.deleteNotification(id), duration)
-		},
-		deleteNotification(id) {
-			this.queue = this.queue.filter(notId({ id }))
-		},
-		iconClass(notificationStatus) {
-			return `vue-yodify__icon vue-yodify__icon--${notificationStatus}`
-		},
-		iconText(type) {
-			if (type === 'error') return 'circle_cross'
-			if (type === 'warning') return 'circle_attention'
-			return 'circle_check'
-		},
+				window.setTimeout(() => deleteNotificationById(id), duration)
+		}
+
+		const deleteNotificationById = (
+			id: NonNullable<KottiToaster.NotificationInternal['id']>,
+		) => {
+			queue.value = queue.value.filter((notification) =>
+				notId(id)(notification?.id),
+			)
+		}
+
+		onBeforeMount(() => {
+			if (!root) throw new Error('Root is undefined')
+
+			root.$on('vue-yodify', addNotification)
+		})
+
+		onMounted(() => {
+			let notification
+			while ((notification = yodifyBuffer.pop())) {
+				addNotification(notification)
+			}
+		})
+
+		onUnmounted(() => {
+			if (root) root.$off('vue-yodify', addNotification)
+		})
+
+		return {
+			addNotification,
+			deleteNotificationById,
+			iconClass: (type: KottiToaster.Type) =>
+				`vue-yodify__icon vue-yodify__icon--${type}`,
+			iconText: (type: KottiToaster.Type) => {
+				switch (type) {
+					case KottiToaster.Type.ERROR:
+						return Yoco.Icon.CIRCLE_CROSS
+					case KottiToaster.Type.WARNING:
+						return Yoco.Icon.CIRCLE_ATTENTION
+					case KottiToaster.Type.SUCCESS:
+					default:
+						return Yoco.Icon.CIRCLE_CHECK
+				}
+			},
+			queue,
+			yodifyBuffer,
+		}
 	},
-}
+})
 </script>
 
 <style lang="scss" scoped>
+// reset some commonly overwritten styles
+.vue-yodify,
+.vue-yodify * {
+	box-sizing: initial;
+	line-height: initial;
+}
+
 .vue-yodify {
 	position: fixed;
 	top: 0;
 	right: 0.8rem;
 	z-index: 9999;
-}
 
-.vue-yodify__notification {
-	display: flex;
-	justify-content: space-between;
-	width: 448px;
-	margin: 1.2rem 0;
-	overflow: hidden;
-	background-color: white;
-	border-radius: 0.2rem;
-	box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.24);
-}
-
-.vue-yodify__icon,
-.vue-yodify__close {
-	display: flex;
-	flex: 0 0 2rem;
-	align-items: center;
-	justify-content: center;
-	min-height: 2rem;
-}
-.vue-yodify__icon {
-	&--success {
-		background: #64ad13;
-	}
-	&--error {
-		background: #d91919;
-	}
-	&--warning {
-		background: #ff7800;
+	&__notification {
+		display: flex;
+		justify-content: space-between;
+		width: 448px;
+		margin: 1.2rem 0;
+		overflow: hidden;
+		background-color: var(--white);
+		border-radius: 0.2rem;
+		box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.24);
 	}
-	.yoco {
-		font-size: 1rem;
-		color: #ffffff;
+
+	&__icon,
+	&__close {
+		display: flex;
+		flex: 0 0 2rem;
+		align-items: center;
+		justify-content: center;
+		min-height: 2rem;
 	}
-}
-.vue-yodify__content {
-	display: flex;
-	flex: 1;
-	align-items: center;
-	height: 100%;
-	min-height: 1.2rem;
-	padding: 0.4rem;
-}
-.vue-yodify__close {
-	.yoco {
-		font-size: 1rem;
-		color: #8a8a8a;
+
+	&__icon {
+		.yoco {
+			font-size: 1rem;
+			color: var(--white);
+		}
+
+		&--info {
+			background: var(--support-info);
+		}
+
+		&--error {
+			background: var(--support-error);
+		}
+		&--success {
+			background: var(--support-success);
+		}
+
+		&--warning {
+			background: var(--support-warning);
+		}
 	}
-	&:hover {
-		cursor: pointer;
-		background-color: rgba(0, 0, 0, 0.1);
+
+	&__content {
+		display: flex;
+		flex: 1;
+		align-items: center;
+		height: 100%;
+		min-height: 1.2rem;
+		padding: 0.4rem;
 	}
-}
 
-// reset some commonly overwritten styles
-.vue-yodify,
-.vue-yodify * {
-	box-sizing: initial;
-	line-height: initial;
+	&__close {
+		.yoco {
+			font-size: 1rem;
+			color: #8a8a8a;
+		}
+		&:hover {
+			cursor: pointer;
+			background-color: rgba(0, 0, 0, 0.1);
+		}
+	}
 }
 
 // support for mobile device
diff --git a/packages/kotti-ui/source/kotti-toaster/constants.ts b/packages/kotti-ui/source/kotti-toaster/constants.ts
new file mode 100644
index 0000000000..5db814ccfc
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-toaster/constants.ts
@@ -0,0 +1 @@
+export const DEFAULT_YODIFY_NOTIFICATION_DURATION_IN_SECONDS = 3
diff --git a/packages/kotti-ui/source/kotti-toaster/index.ts b/packages/kotti-ui/source/kotti-toaster/index.ts
index 55c8ddd7ab..6afb6f3594 100644
--- a/packages/kotti-ui/source/kotti-toaster/index.ts
+++ b/packages/kotti-ui/source/kotti-toaster/index.ts
@@ -2,6 +2,7 @@ import { MetaDesignType } from '../types/kotti'
 import { attachMeta, makeInstallable } from '../utilities'
 
 import KtToasterVue from './KtToaster.vue'
+import { KottiToaster } from './types'
 
 export const KtToaster = attachMeta(makeInstallable(KtToasterVue), {
 	addedVersion: '1.0.0',
@@ -11,5 +12,8 @@ export const KtToaster = attachMeta(makeInstallable(KtToasterVue), {
 		url: 'https://www.figma.com/file/0yFVivSWXgFf2ddEF92zkf/Kotti-Design-System?node-id=128%3A2082',
 	},
 	slots: {},
-	typeScript: null,
+	typeScript: {
+		namespace: 'Kotti.Toaster',
+		schema: KottiToaster.notificationSchema,
+	},
 })
diff --git a/packages/kotti-ui/source/kotti-toaster/types.ts b/packages/kotti-ui/source/kotti-toaster/types.ts
new file mode 100644
index 0000000000..fcc64ab875
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-toaster/types.ts
@@ -0,0 +1,34 @@
+import { TimeConversion } from '@metatypes/units'
+import { z } from 'zod'
+
+import { DEFAULT_YODIFY_NOTIFICATION_DURATION_IN_SECONDS } from './constants'
+
+export namespace KottiToaster {
+	export enum Type {
+		ERROR = 'error',
+		INFO = 'info',
+		SUCCESS = 'success',
+		WARNING = 'warning',
+	}
+	const types = [Type.ERROR, Type.INFO, Type.SUCCESS, Type.WARNING] as const
+
+	export const notificationSchema = z.object({
+		duration: z
+			.number()
+			.optional()
+			.default(
+				DEFAULT_YODIFY_NOTIFICATION_DURATION_IN_SECONDS *
+					TimeConversion.MILLISECONDS_PER_SECOND,
+			),
+		text: z.string(),
+		type: z.enum(types),
+	})
+	export type Notification = z.input<typeof notificationSchema>
+
+	export const notificationInternalSchema =
+		KottiToaster.notificationSchema.extend({
+			// internally generated
+			id: z.string().optional(),
+		})
+	export type NotificationInternal = z.input<typeof notificationInternalSchema>
+}
diff --git a/packages/kotti-ui/source/kotti-toaster/utilities.js b/packages/kotti-ui/source/kotti-toaster/utilities.ts
similarity index 59%
rename from packages/kotti-ui/source/kotti-toaster/utilities.js
rename to packages/kotti-ui/source/kotti-toaster/utilities.ts
index 3dec4101e5..19b7e1fa99 100644
--- a/packages/kotti-ui/source/kotti-toaster/utilities.js
+++ b/packages/kotti-ui/source/kotti-toaster/utilities.ts
@@ -1,10 +1,13 @@
 /* eslint-disable no-magic-numbers */
+
+import { KottiToaster } from './types'
+
 /**
  * @description generates a random id
- * @param {Number} ID_BITS id entropy in bits, defaults to 64 (4 words)
- * @returns {String} random id
+ * @param ID_BITS id entropy in bits, defaults to 64 (4 words)
+ * @returns random id
  */
-export const generateId = (ID_BITS = 64) => {
+export const generateId = (ID_BITS = 64): string => {
 	const randomWord = () =>
 		Math.floor((1 + Math.random()) * 0x10000)
 			.toString(16)
@@ -22,7 +25,9 @@ export const generateId = (ID_BITS = 64) => {
  * @param {String} $0.id first id
  * @returns {Function} compares id1 to passed id
  */
-export const notId =
-	({ id: id1 }) =>
-	({ id: id2 }) =>
+
+export const notId: (
+	id1: KottiToaster.NotificationInternal['id'],
+) => (id2: KottiToaster.NotificationInternal['id']) => boolean =
+	(id1) => (id2) =>
 		id1 !== id2
diff --git a/packages/kotti-ui/source/types/kotti.ts b/packages/kotti-ui/source/types/kotti.ts
index 6cfb5f5109..84cce0eaf9 100644
--- a/packages/kotti-ui/source/types/kotti.ts
+++ b/packages/kotti-ui/source/types/kotti.ts
@@ -49,8 +49,9 @@ export { KottiModal as Modal } from '../kotti-modal/types'
 export { KottiNavbar as Navbar } from '../kotti-navbar/types'
 export { KottiPopover as Popover } from '../kotti-popover/types'
 export { KottiRow as Row } from '../kotti-row/types'
-export { KottiTag as Tag } from '../kotti-tag/types'
 export { KottiTable as Table } from '../kotti-table/types'
+export { KottiTag as Tag } from '../kotti-tag/types'
+export { KottiToaster as Toaster } from '../kotti-toaster/types'
 export { KottiUserMenu as UserMenu } from '../kotti-user-menu/types'
 
 export enum MetaDesignType {