bonkers-ui 1.0.43 → 1.0.45

package/.eslintrc.js

@@ -5,67 +5,47 @@ module.exports = {
 		"es2021": true,
 		"node": true
 	},
-	"extends": [
-		"plugin:vue/vue3-recommended",
-		"eslint:recommended",
-		"@vue/typescript/recommended",
-	],
+	"extends": ["plugin:vue/vue3-recommended", "eslint:recommended", "@vue/typescript/recommended", "plugin:storybook/recommended"],
 	"parserOptions": {
 		"ecmaVersion": 2021
 	},
 	"parser": "vue-eslint-parser",
 	"plugins": [],
-	"overrides": [
-		{
-			"files": ["*.vue"],
-			"rules": {
-				"indent": "off"
-			}
+	"overrides": [{
+		"files": ["*.vue"],
+		"rules": {
+			"indent": "off"
 		}
-	],
+	}],
 	"rules": {
-		"indent": ["error", "tab", { "VariableDeclarator": "first", "MemberExpression": 1, "ObjectExpression": 1 }],
-		"vue/html-indent": [
-			"error",
-			"tab",
-			{
-				"attribute": 1,
-				"baseIndent": 1,
-				"closeBracket": 0,
-				"alignAttributesVertically": true
-			}
-		],
-		"vue/script-indent": [
-			"error",
-			"tab",
-			{
-				"baseIndent": 1,
-				"switchCase": 1,
-			}
-		],
-		"eol-last": [
-			"error",
-			"always"
-		],
+		"indent": ["error", "tab", {
+			"VariableDeclarator": "first",
+			"MemberExpression": 1,
+			"ObjectExpression": 1
+		}],
+		"vue/html-indent": ["error", "tab", {
+			"attribute": 1,
+			"baseIndent": 1,
+			"closeBracket": 0,
+			"alignAttributesVertically": true
+		}],
+		"vue/script-indent": ["error", "tab", {
+			"baseIndent": 1,
+			"switchCase": 1
+		}],
+		"eol-last": ["error", "always"],
 		"no-console": "warn",
 		"no-debugger": "warn",
 		"vue/multi-word-component-names": 0,
 		"object-curly-spacing": ["error", "always"],
-		"quotes": [
-			"error",
-			"double",
-			{
-				"avoidEscape": true,
-				"allowTemplateLiterals": true
-			}
-		],
-		"no-multiple-empty-lines": [
-			"error",
-			{
-				"max": 1,
-				"maxEOF": 0
-			}
-		],
+		"quotes": ["error", "double", {
+			"avoidEscape": true,
+			"allowTemplateLiterals": true
+		}],
+		"no-multiple-empty-lines": ["error", {
+			"max": 1,
+			"maxEOF": 0
+		}],
 		semi: ["error", "always"]
 	}
 };

package/.storybook/main.js

@@ -1,4 +1,4 @@
-const {mergeConfig} = require('vite');
+const { mergeConfig } = require('vite');
 
 module.exports = {
 	"stories": [
@@ -8,24 +8,22 @@ module.exports = {
 	"addons": [
 		"@storybook/addon-links",
 		"@storybook/addon-essentials",
-		{
-			name: "@storybook/addon-postcss",
-			options: {
-				postcssLoaderOptions: {
-					implementation: require("postcss")
-				}
-			}
-		},
-		'storybook-tailwind-dark-mode',
+		"@storybook/addon-mdx-gfm",
 	],
-	"framework": "@storybook/vue3",
-	"core": {
-		"builder": "@storybook/builder-vite"
+	framework: {
+		name: "@storybook/vue3-vite",
+		options: {}
 	},
-	async viteFinal(config, {configType}) {
-		// return the customized config
+	core: {
+		builder: '@storybook/builder-vite', // or '@storybook/builder-webpack5'
+		disableTelemetry: true,
+	},
+	async viteFinal(config, {}) {
 		return mergeConfig(config, {
 			base: "https://bonkers-ie.github.io/bonkers-ui/",
 		});
 	},
-}
+	docs: {
+		autodocs: true
+	}
+};

package/.storybook/preview.js

@@ -1,4 +1,5 @@
-import {app} from '@storybook/vue3';
+import { setup } from '@storybook/vue3'
+import { createRouter, createWebHashHistory } from 'vue-router'
 /* import the fontawesome core */
 import { library } from '@fortawesome/fontawesome-svg-core';
 
@@ -13,12 +14,21 @@ library.add(faFaceSmile, faCircleCheck);
 
 import '../src/main.css';
 
-app.component('font-awesome-icon', FontAwesomeIcon)
+const router = createRouter({
+	history: createWebHashHistory(),
+	routes: [],
+})
+
+setup((app) => {
+	app.use(router)
+	app.component('font-awesome-icon', FontAwesomeIcon)
+})
+
 
 export const parameters = {
 	darkMode: false,
 	stylePreview: true,
-	actions: {argTypesRegex: "^on[A-Z].*"},
+	actions: { argTypesRegex: "^on[A-Z].*" },
 	backgrounds: {
 		default: "Bonkers",
 		values: [

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "bonkers-ui",
-  "version": "1.0.43",
+  "version": "1.0.45",
   "private": false,
   "scripts": {
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "lint:script": "eslint --fix './src/**/*.{ts,tsx,vue}'",
     "lint:style": "stylelint --fix './src/**/*.{css,scss,vue}'",
     "lint:markup": "vue-tsc --noEmit",
@@ -14,48 +14,51 @@
     "i": "yarn install --frozen-lockfile"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.2.1",
-    "@fortawesome/free-brands-svg-icons": "^6.2.1",
-    "@fortawesome/free-regular-svg-icons": "^6.2.1",
-    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-brands-svg-icons": "^6.4.0",
+    "@fortawesome/free-regular-svg-icons": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
-    "@vueuse/components": "^9.12.0",
-    "@vueuse/core": "^9.12.0",
-    "vue": "^3.2.47"
+    "storybook-addon-designs": "^6.3.1",
+    "vue": "^3.2.47",
+    "vue-router": "^4.1.6"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-vite": "^0.2.7",
-    "@storybook/vue3": "^6.5.16",
-    "@typescript-eslint/eslint-plugin": "^5.50.0",
-    "@typescript-eslint/parser": "^5.50.0",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@storybook/addon-essentials": "^7.0.4",
+    "@storybook/addon-links": "^7.0.4",
+    "@storybook/addon-mdx-gfm": "^7.0.4",
+    "@storybook/vue3": "^7.0.4",
+    "@storybook/vue3-vite": "^7.0.4",
+    "@typescript-eslint/eslint-plugin": "^5.58.0",
+    "@typescript-eslint/parser": "^5.58.0",
+    "@vitejs/plugin-vue": "^4.1.0",
     "@vue/eslint-config-typescript": "^11.0.2",
-    "@vue/test-utils": "^2.2.9",
-    "eslint": "8.33.0",
-    "eslint-plugin-vue": "^9.9.0",
+    "@vue/test-utils": "^2.3.2",
+    "eslint": "8.38.0",
+    "eslint-plugin-storybook": "^0.6.11",
+    "eslint-plugin-vue": "^9.10.0",
     "gh-pages": "^5.0.0",
     "husky": "4.3.8",
-    "jsdom": "^21.1.0",
-    "lint-staged": "^13.1.0",
+    "jsdom": "^21.1.1",
+    "lint-staged": "^13.2.1",
     "postcss": "^8.4.21",
     "postcss-html": "^1.4.1",
-    "storybook-tailwind-dark-mode": "^1.0.15",
-    "stylelint": "^14.16.1",
-    "stylelint-config-recommended": "^9.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.0.4",
+    "storybook-tailwind-dark-mode": "^1.0.16",
+    "stylelint": "^15.4.0",
+    "stylelint-config-recommended": "^11.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
-    "stylelint-config-standard": "^29.0.0",
-    "tailwindcss": "^3.2.4",
+    "stylelint-config-standard": "^32.0.0",
+    "tailwindcss": "^3.3.1",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.1",
-    "vitest": "^0.28.3",
-    "vue-eslint-parser": "^9.1.0",
+    "typescript": "^5.0.4",
+    "vite": "^4.2.1",
+    "vitest": "^0.30.1",
+    "vue-eslint-parser": "^9.1.1",
     "vue-loader": "^17.0.1",
-    "vue-tsc": "^1.0.24"
+    "vue-tsc": "^1.2.0"
   },
   "lint-staged": {
     "*.{ts,tsx,vue}": [

package/src/CONSTANTS.ts

@@ -0,0 +1 @@
+export const ICON_DEFAULT = ["far", "face-smile"];

package/src/components/ui-alert/ui-alert.stories.ts

@@ -1,38 +1,28 @@
-import UiAlert from "./ui-alert.vue";
-import type { Story } from "@storybook/vue3";
+import type { Meta } from "@storybook/vue3";
+import { ICON_DEFAULT } from "./../../CONSTANTS";
 import { EAlertTypes } from "./_types";
+import UiAlert from "../ui-alert";
 
 export default {
 	title: "Components/ui-alert",
 	component: UiAlert,
+	tags: ["autodocs"],
+
 	argTypes: {
 		kind: {
 			control: { type: "select" },
 			options: Object.values(EAlertTypes),
 			description: "The button kinds",
 		},
+		default: {
+			control: { type: "text" },
+		}
 	},
-	args: {
-		slot: "some description text: lorem",
-		kind: EAlertTypes.WARNING
-	}
-};
-
-type TComponentProps = InstanceType<typeof UiAlert>["$props"];
+} satisfies Meta<typeof UiAlert>;
 
-const Template: Story<TComponentProps> = (args) => ({
-	components: { UiAlert },
-	setup() {
-		return { args };
+export const Default = {
+	args: {
+		icon: ICON_DEFAULT,
+		default: "This is a default slot"
 	},
-	template: `
-		<ui-alert
-			:kind="args.kind"
-			:icon="['far', 'face-smile']"
-		>
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-		</ui-alert>
-	`
-});
-
-export const Default = Template.bind({});
+};

package/src/components/ui-alert/ui-alert.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="ui-alert flex gap-sm p-sm border rounded-lg"
+		class="ui-alert flex gap-sm p-sm border rounded-lg bg-white"
 		:class="[
 			(!kind || kind === EAlertTypes.PRIMARY) && 'border-primary',
 			kind === EAlertTypes.WARNING && 'border-warning',

package/src/components/ui-button/ui-button.test.ts

@@ -1,19 +1,9 @@
 import { mount } from "@vue/test-utils";
 import UiButton from "./ui-button.vue";
-import { test, expect } from "vitest";
 
-test("VButton.test.ts", async () => {
+test("VButton.test.ts", () => {
 	expect(UiButton).toBeTruthy();
 
-	it("renders props.msg when passed", () => {
-		const className = "message";
-		const wrapper = mount(UiButton, {
-			propsData: {
-				class: className
-			}
-		});
-
-		expect(wrapper.classes()).toContain(className);
-	});
-
+	const container = mount(UiButton as any);
+	expect(container).toBeTruthy();
 });

package/src/components/ui-card-result/ui-card-result.vue

@@ -56,9 +56,6 @@
 <script lang="ts" setup>
 	import UiTypography, { ETypographySizes, ETextWeight, ETextAlign } from "../ui-typography";
 	import { EColors } from "../../_types/colors";
-	import { useSlots } from "vue";
-
-	const slots = useSlots();
 
 	defineProps<{
 		header?: string;

package/src/components/ui-input-range/ui-input-range.vue

@@ -4,7 +4,7 @@
 	>
 		<input
 			ref="track"
-			v-model="rangeModel"
+			v-model.number="rangeModel"
 			class="appearance-none absolute top-0 left-0 cursor-pointer bg-transparent w-full h-full"
 			type="range"
 			:min="min"
@@ -33,14 +33,14 @@
 	import { computed, ref } from "vue";
 
 	const props = defineProps<{
-		modelValue: string | number;
+		modelValue: number;
 		min: string | number;
 		max: string | number;
 		step: string | number;
 	}>();
 
 	const emit = defineEmits<{
-		(e: "update:modelValue", state: string | number): void
+		(e: "update:modelValue", state: number): void
 	}>();
 
 	const rangeModel = computed({

package/src/components/ui-modal/ui-backdrop/ui-backdrop.vue

@@ -0,0 +1,22 @@
+<template>
+	<div>
+		<div
+			class="
+				backdrop-color
+				fixed
+				backdrop-blur-sm
+				transition-all
+				inset-0
+				z-0
+				"
+		/>
+
+		<slot />
+	</div>
+</template>
+
+<style lang="css" scoped>
+	.backdrop-color {
+		background-color: rgb(0 0 0 / 50%);
+	}
+</style>

package/src/components/ui-modal/ui-modal.stories.ts

@@ -1,8 +1,7 @@
-import { ref } from "vue";
 import type { Story } from "@storybook/vue3";
 import UiModal from "./ui-modal.vue";
 import UiButton from "../ui-button";
-import UiBackdrop from "../ui-backdrop";
+import UiBackdrop from "./ui-backdrop";
 import UiIcon from "../ui-icon";
 import UiTypography from "../ui-typography";
 import { ESize } from "../../_types/sizing";
@@ -39,64 +38,31 @@ type TComponentProps = InstanceType<typeof UiModal>["$props"];
 const Template: Story<TComponentProps> = (args) => ({
 	components: { UiModal, UiBackdrop, UiButton, UiIcon, UiTypography },
 	setup() {
-		const isVisible = ref(false);
-
-		const showModal = () => {
-			isVisible.value = true;
-		};
-
-		const closeModal = () => {
-			isVisible.value = false;
-		};
-
-		return { args, showModal, closeModal, isVisible, ESize };
+		return { args, ESize };
 	},
 	template:/*html*/`
-			<transition
-				name="ui-modal"
-				mode="out-in"
-				appear
-				enter-active-class="transition delay-100"
-				enter-from-class="opacity-0 translate-y-1/4"
-				enter-to-class="opacity-100 translate-y-0"
-				leave-active-class="transition"
-				leave-to-class="opacity-0 translate-y-1/4"
-				leave-from-class="opacity-100 translate-y-0"
-			>
-				<ui-modal
-					v-if="isVisible"
+			<ui-modal
 					:title="args.title"
 					:modalSize="args.modalSize"
-					:closeModal="closeModal"
 				>
 					<template #icon>
 						<ui-icon class="text-primary"  :icon-name="['far', 'circle-check']" :size=ESize.XL  />
 					</template>
-					<template #title>
-						<ui-typography class="text-2xl font-bold">{{ args.title }}</ui-typography>
-					</template>
 
-					<template #default >
+					<template #default>
 						{{args.body}}
 					</template>
+
 					<template #footer>
 						<ui-button
 							fullWidth
-							@click="closeModal"
 						>
 							Ok
 						</ui-button>
-						</template>
-				</ui-modal>
-			</transition>
-
-			<ui-backdrop v-if="isVisible" />
+					</template>
+			</ui-modal>
 
-			<div class="absolute" style="top: calc(50vh - 2rem); left: calc(50vw - 4rem)">
-				<ui-button @click="showModal">
-					Toggle Modal
-				</ui-button>
-			</div>
+			<ui-backdrop />
 			`
 });
 

package/src/components/ui-modal/ui-modal.vue

@@ -1,6 +1,5 @@
 <template>
 	<div
-		v-on-click-outside="closeModal"
 		class="
 				ui-modal
 				absolute
@@ -8,7 +7,6 @@
 				flex flex-col
 				items-center
 				z-10
-				opacity-0
 				inset-0
 				rounded-2xl
 				shadow-md
@@ -28,15 +26,19 @@
 		>
 			<slot name="icon" />
 		</div>
-		<ui-typography
-			v-if="title"
-			class="my-md"
-			:weight="ETextWeight.BOLD"
-			:align="ETextAlign.CENTER"
-			:size="ETypographySizes.LG"
-		>
-			{{ title }}
-		</ui-typography>
+
+		<slot name="title">
+			<ui-typography
+				v-if="title"
+				class="my-md"
+				:weight="ETextWeight.BOLD"
+				:align="ETextAlign.CENTER"
+				:size="ETypographySizes.LG"
+			>
+				{{ title }}
+			</ui-typography>
+		</slot>
+
 		<ui-typography
 			:weight="ETextWeight.REGULAR"
 			:align="ETextAlign.CENTER"
@@ -51,19 +53,19 @@
 		</div>
 	</div>
 </template>
+
 <script lang="ts" setup>
-	import { vOnClickOutside } from "@vueuse/components";
 	import { ETypographySizes } from "../ui-typography/";
 	import UiTypography, { ETextWeight, ETextAlign } from "../ui-typography";
 	import { EModalSizes } from "./_typings";
 
 	withDefaults(
 		defineProps<{
-			title: string;
+			title?: string;
 			modalSize?: EModalSizes;
-			closeModal: () => void;
 		}>(),
 		{
+			title: undefined,
 			modalSize: EModalSizes.SM,
 		}
 	);

package/src/components/ui-snackbar/_types.ts

@@ -0,0 +1,7 @@
+export enum ESnackbarTypes {
+	DEFAULT = "default",
+	PRIMARY = "primary",
+	WARNING = "warning",
+	ERROR = "error",
+	SECONDARY = "secondary",
+}

package/src/components/ui-snackbar/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./ui-snackbar.vue";
+export { ESnackbarTypes }from "./_types";

package/src/components/ui-snackbar/ui-snackbar.stories.ts

@@ -0,0 +1,26 @@
+import { ESnackbarTypes } from "./_types";
+import type { Meta } from "@storybook/vue3";
+import UiSnackbar from "../ui-snackbar";
+
+export default {
+	title: "Components/ui-snackbar",
+	component: UiSnackbar,
+
+	argTypes: {
+		kind: {
+			control: { type: "select" },
+			options: Object.values(ESnackbarTypes),
+			description: "The button kinds",
+		},
+		title: {
+			controls: { type: "text" },
+		},
+	}
+} satisfies Meta<typeof UiSnackbar>;
+
+export const Default = {
+	args: {
+		title: "This is a title",
+		articleSlot: "This is an article",
+	},
+};

package/src/components/ui-snackbar/ui-snackbar.vue

@@ -0,0 +1,42 @@
+<template>
+	<div
+		class="ui-snackbar flex shadow-md rounded-lg w-full p-sm justify-between"
+		:class="[
+			kind === ESnackbarTypes.DEFAULT && 'bg-white',
+			kind === ESnackbarTypes.PRIMARY && 'bg-primary text-white',
+			kind === ESnackbarTypes.WARNING && 'bg-warning text-white',
+			kind === ESnackbarTypes.ERROR && 'bg-error text-white',
+			kind === ESnackbarTypes.SECONDARY && 'bg-secondary text-white',
+		]"
+	>
+		<slot>
+			<ui-typography
+				:size="ETypographySizes.SM"
+				class=""
+			>
+				<slot name="titleSlot">
+					{{ title }}
+				</slot>
+			</ui-typography>
+
+			<ui-typography
+				:size="ETypographySizes.XS"
+				class=""
+			>
+				<slot name="articleSlot" />
+			</ui-typography>
+		</slot>
+	</div>
+</template>
+
+<script lang="ts" setup>
+	import UiTypography, { ETypographySizes } from "../ui-typography";
+	import { ESnackbarTypes } from "./_types";
+
+	withDefaults(defineProps<{
+		title: string
+		kind?: ESnackbarTypes
+	}>(), {
+		kind: ESnackbarTypes.DEFAULT
+	});
+</script>

package/src/stories/Introduction.stories.mdx

@@ -3,7 +3,8 @@ import Code from './assets/code-brackets.svg';
 
 <Meta title="Example/Introduction" />
 
-<style>{`
+<style>
+  {`
   .subheading {
     --mediumdark: '#999999';
     font-weight: 900;
@@ -66,7 +67,7 @@ import Code from './assets/code-brackets.svg';
     display: block;
     margin-bottom: 2px;
   }
-  
+
   .link-item img {
     height: 40px;
     width: 40px;
@@ -104,8 +105,9 @@ import Code from './assets/code-brackets.svg';
     display: inline-block;
   }
 
-  
-`}</style>
+
+  `}
+</style>
 
 # Welcome to Bonkers.ie UI Storybook
 

package/tsconfig.json

@@ -12,8 +12,6 @@
 		"jsx": "preserve",
 		"noImplicitThis": true,
 		"isolatedModules": true,
-		"preserveValueImports": true,
-		"importsNotUsedAsValues": "error",
 		"importHelpers": true,
 		"moduleResolution": "node",
 		"skipLibCheck": true,

package/vitest.config.ts

@@ -2,14 +2,14 @@
 import { defineConfig, UserConfig } from "vite";
 import type { InlineConfig } from "vitest";
 
-import Vue from "@vitejs/plugin-vue";
+import vue from "@vitejs/plugin-vue";
 
 interface VitestConfigExport extends UserConfig {
 	test: InlineConfig;
 }
 
 export default defineConfig({
-	plugins: [Vue()],
+	plugins: [vue()],
 	test: {
 		globals: true,
 		environment: "jsdom",

package/src/components/ui-backdrop/ui-backdrop.vue

@@ -1,42 +0,0 @@
-<template>
-	<transition-group
-		name="fade"
-		enter-active-class="transition-opacity duration-300"
-		leave-active-class="transition-opacity duration-300 opacity-0"
-		enter-from-class="opacity-0"
-		leave-to-class="opacity-0"
-	>
-		<div
-			v-if="visible"
-			class="
-				backdrop-color
-				fixed
-				backdrop-blur-sm
-				transition-all
-				inset-0
-				z-0
-				"
-		/>
-
-		<slot />
-	</transition-group>
-</template>
-
-<script lang="ts" setup>
-
-	withDefaults(
-		defineProps<{
-			visible?: boolean;
-		}>(),
-		{
-			visible: true,
-		}
-	);
-
-</script>
-
-<style lang="css" scoped>
-	.backdrop-color {
-		background-color: rgb(0 0 0 / 50%);
-	}
-</style>