bonkers-ui 1.0.1 → 1.0.2

package/.eslintrc.js

@@ -66,5 +66,6 @@ module.exports = {
 				"maxEOF": 0
 			}
 		],
+		semi: ["error", "always"]
 	}
-}
+};

package/.husky/pre-commit

@@ -2,4 +2,5 @@
 . "$(dirname -- "$0")/_/husky.sh"
 
 yarn lint-staged
+yarn typecheck
 yarn test

package/.storybook/preview.js

@@ -1,4 +1,20 @@
-import '../src/main.css'
+import {app} from '@storybook/vue3';
+/* import the fontawesome core */
+import { library } from '@fortawesome/fontawesome-svg-core';
+
+/* import font awesome icon component */
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+/* import specific icons */
+import { faUserSecret } from '@fortawesome/free-solid-svg-icons';
+import { faFaceSmile } from '@fortawesome/free-regular-svg-icons';
+
+/* add icons to the library */
+library.add(faUserSecret, faFaceSmile);
+
+import '../src/main.css';
+
+app.component('font-awesome-icon', FontAwesomeIcon)
 
 export const parameters = {
 	darkMode: false,

package/.stylelintrc

@@ -1,23 +1,25 @@
 {
-  "extends": [
-    "stylelint-config-recommended",
-    "stylelint-config-standard",
-    "stylelint-config-recommended-vue"
-  ],
-  "rules": {
-    "at-rule-no-unknown": [
-      true,
-      {
-        "ignoreAtRules": [
-          "extends",
-          "tailwind"
-        ]
-      }
-    ],
-    "indentation": [
-      "tab", {
-        "baseIndentLevel": 1
-      }
-    ]
-  }
-}
+	"extends": [
+		"stylelint-config-recommended",
+		"stylelint-config-standard",
+		"stylelint-config-recommended-vue"
+	],
+	"rules": {
+		"at-rule-no-unknown": [
+			true,
+			{
+				"ignoreAtRules": [
+					"extends",
+					"tailwind"
+				]
+			}
+		],
+		"indentation": [
+			"tab",
+			{
+				"baseIndentLevel": 1
+			}
+		],
+		"selector-class-pattern": null
+	}
+}

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "bonkers-ui",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "scripts": {
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "lint:script": "eslint --ext .ts,vue,js --ignore-path .gitignore .",
-    "lint:style": "stylelint ./src/**/*.{css,scss,vue}",
+    "lint:script": "eslint --fix './src/**/*.{ts,tsx,vue}'",
+    "lint:style": "stylelint --fix './src/**/*.{css,scss,vue}'",
     "lint:markup": "vue-tsc --noEmit",
     "test": "jest",
     "deploy": "gh-pages -d storybook-static",
@@ -13,6 +13,11 @@
     "i": "yarn install --frozen-lockfile"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-brands-svg-icons": "^6.1.1",
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/vue-fontawesome": "^3.0.1",
     "vue": "^3.2.37"
   },
   "devDependencies": {
@@ -23,6 +28,7 @@
     "@storybook/builder-vite": "^0.1.36",
     "@storybook/vue3": "^6.5.9",
     "@types/jest": "^28.1.3",
+    "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.29.0",
     "@typescript-eslint/parser": "^5.29.0",
     "@vitejs/plugin-vue": "^2.3.3",
@@ -70,8 +76,10 @@
     }
   },
   "lint-staged": {
-    "*.{ts,vue}": "eslint --fix && typecheck && test",
-    "*.{css,scss,vue,ts}": "stylelint --fix"
+    "*.{ts,tsx,vue}": [
+      "eslint --fix"
+    ],
+    "*.{css,vue,tsx}": "stylelint --fix"
   },
   "license": "MIT"
 }

package/postcss.config.js

@@ -2,4 +2,4 @@ module.exports = {
 	plugins: {
 		tailwindcss: {},
 	}
-}
+};

package/src/_colors.json

@@ -1,11 +1,72 @@
 {
 	"white": "var(--color-white)",
 	"black": "var(--color-black)",
-	"primary": "var(--color-primary)",
-	"secondary": "var(--color-secondary)",
-	"warning": "var(--color-warning)",
-	"error": "var(--color-error)",
 	"transparent": "var(--color-transparent)",
-	"current": "var(--color-current)"
+	"current": "var(--color-current)",
+
+	"primary": {
+		"DEFAULT": "var(--color-primary)",
+		"300": "var(--color-primary-300)",
+		"400": "var(--color-primary-400)",
+		"500": "var(--color-primary-500)",
+		"600": "var(--color-primary-600)",
+		"700": "var(--color-primary-700)"
+	},
+
+	"primary-alt": {
+		"DEFAULT": "var(--color-primary-alt)",
+		"300": "var(--color-primary-alt-300)",
+		"400": "var(--color-primary-alt-400)",
+		"500": "var(--color-primary-alt-500)",
+		"600": "var(--color-primary-alt-600)",
+		"700": "var(--color-primary-alt-700)"
+	},
+
+	"secondary": {
+		"DEFAULT": "var(--color-secondary)",
+		"300": "var(--color-secondary-300)",
+		"400": "var(--color-secondary-400)",
+		"500": "var(--color-secondary-500)",
+		"600": "var(--color-secondary-600)",
+		"700": "var(--color-secondary-700)"
+	},
+
+	"warning": {
+		"DEFAULT": "var(--color-warning)",
+		"300": "var(--color-warning-300)",
+		"400": "var(--color-warning-400)",
+		"500": "var(--color-warning-500)",
+		"600": "var(--color-warning-600)",
+		"700": "var(--color-warning-700)"
+	},
+
+	"error": {
+		"DEFAULT": "var(--color-error)",
+		"300": "var(--color-error-300)",
+		"400": "var(--color-error-400)",
+		"500": "var(--color-error-500)",
+		"600": "var(--color-error-600)",
+		"700": "var(--color-error-700)"
+	},
+	"accent": {
+		"DEFAULT": "var(--color-accent)",
+		"300": "var(--color-accent-300)",
+		"500": "var(--color-accent-500)",
+		"600": "var(--color-accent-600)",
+		"700": "var(--color-accent-700)"
+	},
+	"accent-alt": {
+		"DEFAULT": "var(--color-accent)",
+		"500": "var(--color-accent-500)"
+	},
+	"secondary-alt": {
+		"DEFAULT": "var(--color-secondary-alt)",
+		"200": "var(--color-secondary-alt-200)",
+		"300": "var(--color-secondary-alt-300)",
+		"400": "var(--color-secondary-alt-400)",
+		"500": "var(--color-secondary-alt-500)",
+		"600": "var(--color-secondary-alt-600)",
+		"700": "var(--color-secondary-alt-700)"
+	}
 }
 

package/src/_font-sizes.json

@@ -1,3 +1,12 @@
 {
-	"base": "var(--base-font-size)"
+	"xxs": "var(--font-size-xxs)",
+	"xs": "var(--font-size-xs)",
+	"sm": "var(--font-size-sm)",
+	"m": "var(--font-size-m)",
+	"lg": "var(--font-size-lg)",
+	"xl": "var(--font-size-xl)",
+	"2xl": "var(--font-size-2xl)",
+	"3xl": "var(--font-size-3xl)",
+	"4xl": "var(--font-size-4xl)",
+	"5xl": "var(--font-size-5xl)"
 }

package/src/_samples/check-icon.vue

@@ -0,0 +1,22 @@
+<template>
+	<svg
+		:width="size"
+		:height="size"
+		:class="classes"
+		viewBox="0 0 16 11"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<path
+			stroke="currentColor"
+			d="M15 2.03125L6.5 10.5312C6.375 10.6875 6.1875 10.75 6 10.75C5.78125 10.75 5.59375 10.6875 5.46875 10.5312L0.96875 6.03125C0.65625 5.75 0.65625 5.28125 0.96875 5C1.25 4.6875 1.71875 4.6875 2 5L6 8.96875L13.9688 1C14.25 0.6875 14.7188 0.6875 15 1C15.3125 1.28125 15.3125 1.75 15 2.03125Z"
+		/>
+	</svg>
+</template>
+
+<script lang="ts" setup>
+	defineProps<{
+		size?: number;
+		classes?: string;
+	}>();
+</script>

package/src/_samples/icon.vue

@@ -0,0 +1,19 @@
+<template>
+	<svg
+		:width="size"
+		:height="size"
+		viewBox="0 0 100 100"
+		xmlns="http://www.w3.org/2000/svg"
+		fill="currentColor"
+	>
+		<path
+			d="M50 0L60.9065 23.6694L85.3553 14.6447L76.3306 39.0935L100 50L76.3306 60.9065L85.3553 85.3553L60.9065 76.3306L50 100L39.0935 76.3306L14.6447 85.3553L23.6694 60.9065L0 50L23.6694 39.0935L14.6447 14.6447L39.0935 23.6694L50 0Z"
+		/>
+	</svg>
+</template>
+
+<script lang="ts" setup>
+	defineProps<{
+		size: number
+	}>();
+</script>

package/src/_shadow.json

@@ -0,0 +1,4 @@
+{
+	"m": "var(--shadow-size-m)",
+	"border-primary": "var(--shadow-border-primary)"
+}

package/src/_spacing.json

@@ -0,0 +1,9 @@
+{
+	"xxs": "var(--xxs)",
+	"xs": "var(--xs)",
+	"sm": "var(--sm)",
+	"md": "var(--md)",
+	"lg": "var(--lg)",
+	"xl": "var(--xl)",
+	"xxl": "var(--xxl)"
+}

package/src/_styles/colors.css

@@ -0,0 +1,70 @@
+@layer base {
+	:root {
+		/* colors */
+		--color-white: white;
+		--color-black: black;
+		--color-current: currentcolor;
+		--color-transparent: transparent;
+
+		/* colors/primary */
+		--color-primary-300: #9adc9e;
+		--color-primary-400: #78d17d;
+		--color-primary-500: #56c55d;
+		--color-primary-600: #459e4a;
+		--color-primary-700: #347638;
+		--color-primary: var(--color-primary-500);
+
+		/* colors/primary-alt */
+		--color-primary-alt-300: #83e4ad;
+		--color-primary-alt-400: #5adb92;
+		--color-primary-alt-500: #31d277;
+		--color-primary-alt-600: #27a85f;
+		--color-primary-alt-700: #1d7e47;
+		--color-primary-alt: var(--color-primary-500);
+
+		/* colors/secondary */
+		--color-secondary-300: #848793;
+		--color-secondary-400: #5b5f6f;
+		--color-secondary-500: #32374b;
+		--color-secondary-600: #282c3c;
+		--color-secondary-700: #1e212d;
+		--color-secondary: var(--color-secondary-500);
+
+		/* colors/error */
+		--color-error-300: #f7989d;
+		--color-error-400: #f5767c;
+		--color-error-500: #f2545b;
+		--color-error-600: #c24349;
+		--color-error-700: #913237;
+		--color-error: var(--color-error-500);
+
+		/* colors/warning */
+		--color-warning-300: #ffbc9b;
+		--color-warning-400: #ffa57a;
+		--color-warning-500: #ff8f59;
+		--color-warning-600: #cc7247;
+		--color-warning-700: #995635;
+		--color-warning: var(--color-warning-500);
+
+		/* colors/accent */
+		--color-accent-300: #8e8efa;
+		--color-accent-400: #6868f9;
+		--color-accent-500: #4242f7;
+		--color-accent-600: #3535c6;
+		--color-accent-700: #282894;
+		--color-accent: var(--color-accent-500);
+
+		/* colors/accent-alt */
+		--color-accent-alt-500: #6236ff;
+		--color-accent-alt: var(--color-accent-alt-500);
+
+		/* colors/secondary-alt */
+		--color-secondary-alt-200: #f4f5f8;
+		--color-secondary-alt-300: #dfe1e9;
+		--color-secondary-alt-400: #b4b8cd;
+		--color-secondary-alt-500: #949ab7;
+		--color-secondary-alt-600: #767b92;
+		--color-secondary-alt-700: #595c6e;
+		--color-secondary-alt: var(--color-secondary-alt-500);
+	}
+}

package/src/_styles/font-sizes.css

@@ -0,0 +1,15 @@
+@layer base {
+	:root {
+		/* font sizes */
+		--font-size-xxs: 10px;
+		--font-size-xs: 12px;
+		--font-size-sm: 14px;
+		--font-size-m: 16px;
+		--font-size-lg: 18px;
+		--font-size-xl: 20px;
+		--font-size-2xl: 24px;
+		--font-size-3xl: 28px;
+		--font-size-4xl: 32px;
+		--font-size-5xl: 40px;
+	}
+}

package/src/_styles/shadow.css

@@ -0,0 +1,7 @@
+@layer base {
+	:root {
+		/* shadow sizes */
+		--shadow-size-m: 0 2px 4px 0 rgb(180 184 205 / 50%);
+		--shadow-border-primary: 0 0 0 4px var(--color-primary-300);
+	}
+}

package/src/_styles/spacing.css

@@ -0,0 +1,12 @@
+@layer base {
+	:root {
+		/* spacing */
+		--xxs: 4px;
+		--xs: 8px;
+		--sm: 16px;
+		--md: 24px;
+		--lg: 40px;
+		--xl: 80px;
+		--xxl: 120px;
+	}
+}

package/src/_types/align.ts

@@ -0,0 +1,8 @@
+export enum EJustify {
+	START = "start",
+	END = "end",
+	CENTER = "center",
+	BETWEEN = "between",
+	AROUND = "around",
+	EVENLY = "evenly",
+}

package/src/_types/colors.ts

@@ -0,0 +1,58 @@
+export enum EColors {
+	WHITE = "white",
+	BLACK = "black",
+	TRANSPARENT = "transparent",
+	CURRENT = "current",
+
+	PRIMARY = "primary",
+	PRIMARY_300 = "primary-300",
+	PRIMARY_400 = "primary-400",
+	PRIMARY_500 = "primary-500",
+	PRIMARY_600 = "primary-600",
+	PRIMARY_700 = "primary-700",
+
+	PRIMARY_ALT = "primary-alt",
+	PRIMARY_ALT_300 = "primary-alt-300",
+	PRIMARY_ALT_400 = "primary-alt-400",
+	PRIMARY_ALT_500 = "primary-alt-500",
+	PRIMARY_ALT_600 = "primary-alt-600",
+	PRIMARY_ALT_700 = "primary-alt-700",
+
+	SECONDARY = "secondary",
+	SECONDARY_300 = "secondary-300",
+	SECONDARY_400 = "secondary-400",
+	SECONDARY_500 = "secondary-500",
+	SECONDARY_600 = "secondary-600",
+	SECONDARY_700 = "secondary-700",
+
+	WARNING = "warning",
+	WARNING_300 = "warning-300",
+	WARNING_400 = "warning-400",
+	WARNING_500 = "warning-500",
+	WARNING_600 = "warning-600",
+	WARNING_700 = "warning-700",
+
+	ERROR = "error",
+	ERROR_300 = "error-300",
+	ERROR_400 = "error-400",
+	ERROR_500 = "error-500",
+	ERROR_600 = "error-600",
+	ERROR_700 = "error-700",
+
+	ACCENT = "accent",
+	ACCENT_300 = "accent-300",
+	ACCENT_500 = "accent-500",
+	ACCENT_600 = "accent-600",
+	ACCENT_700 = "accent-700",
+
+	ACCENT_ALT = "accent-alt",
+	ACCENT_ALT_500 = "accent-alt-500",
+
+	SECONDARY_ALT = "secondary-alt",
+	SECONDARY_ALT_200 = "secondary-alt-200",
+	SECONDARY_ALT_300 = "secondary-alt-300",
+	SECONDARY_ALT_400 = "secondary-alt-400",
+	SECONDARY_ALT_500 = "secondary-alt-500",
+	SECONDARY_ALT_600 = "secondary-alt-600",
+	SECONDARY_ALT_700 = "secondary-alt-700",
+}

package/src/_types/sizing.ts

@@ -0,0 +1,9 @@
+export enum ESize {
+	XXS = "xxs",
+	XS = "xs",
+	SM = "sm",
+	MD = "md",
+	LG = "lg",
+	XL = "xl",
+	XXL = "xxl",
+}

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

@@ -3,6 +3,11 @@ export enum EButtonTypes {
 	SECONDARY = "secondary",
 	ERROR = "error",
 	WARNING = "warning",
+	PRIMARY_OVERLAY = "primary-overlay",
+	SECONDARY_OVERLAY = "secondary-overlay",
+	ERROR_OVERLAY = "error-overlay",
+	WARNING_OVERLAY = "warning-overlay",
+	LINK = "link",
 }
 export enum EButtonSizes {
 	SMALL = "sm",

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

@@ -1,3 +1 @@
-import VButton from "./ui-button.vue";
-
-export default VButton;
+export { default } from "./ui-button.vue";

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

@@ -1,13 +1,13 @@
-import UiButton from "./ui-button.vue";
+import UiButton from "../ui-button";
 import { EButtonSizes, EButtonTypes } from "./_typings";
-import { Story } from "@storybook/vue3"
+import { Story } from "@storybook/vue3";
 
 export default {
 	title: "Components/ui-button",
 	component: UiButton,
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {
-		classes: {
+		className: {
 			control: { type: "select" },
 			options: ["small", "medium", "large"],
 			description: "The button size",
@@ -22,19 +22,27 @@ export default {
 			options: Object.values(EButtonSizes),
 			description: "The button sizes",
 		},
+		fullWidth: {
+			control: { type: "boolean" },
+			description: "The full width size",
+		},
+		disabled: {
+			control: { type: "boolean" },
+			description: "Disabled state",
+		},
 		slot: {
 			control: { type: "text" },
 			description: "The slot text or component",
 		}
 	},
-	args:{
+	args: {
 		slot: "default text",
 	},
 };
 
-type MyComponentProps = InstanceType<typeof UiButton>["$props"];
+type TComponentProps = InstanceType<typeof UiButton>["$props"];
 
-const Template: Story<MyComponentProps> = (args) => ({
+const Template: Story<TComponentProps> = (args) => ({
 	// Components used in your story `template` are defined in the `components` object
 	components: { UiButton },
 	// The story's `args` need to be mapped into the template through the `setup()` method
@@ -42,7 +50,43 @@ const Template: Story<MyComponentProps> = (args) => ({
 		return { args };
 	},
 	// And then the `args` are bound to your component with `v-bind="args"`
-	template: `<ui-button v-bind="args">${args.slot}</ui-button>`,
+	template: `
+		<ui-button :className="args.className"
+				   :kind="args.kind"
+				   :size="args.size"
+				   :fullWidth="args.fullWidth"
+				   :disabled="args.disabled"
+		>
+		${args.slot}
+		</ui-button>`,
+});
+const TemplateAll: Story<TComponentProps> = () => ({
+	components: { UiButton },
+
+	setup() {
+		return { EButtonSizes, EButtonTypes };
+	},
+
+	template: `
+		<div :style="{
+			display: 'flex',
+			flexWrap: 'wrap'
+		}"
+		>
+		<div
+			:style="{margin: '10px'}"
+			v-for="kind in EButtonTypes"
+			:key="kind"
+		>
+			<ui-button
+				:kind="kind"
+				:size="EButtonSizes.MEDIUM"
+			>
+				{{ kind }}
+			</ui-button>
+		</div>
+		</div>
+	`,
 });
 
 export const Primary = Template.bind({});
@@ -50,7 +94,11 @@ export const Primary = Template.bind({});
 
 Primary.args = {
 	...Primary,
-	classes: "medium",
+	className: "medium",
 	kind: EButtonTypes.PRIMARY,
-	size: EButtonSizes.MEDIUM
-}
+	size: EButtonSizes.MEDIUM,
+	fullWidth: false,
+	disabled: false,
+};
+export const Buttons = TemplateAll.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args

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

@@ -1,13 +1,13 @@
-import { mount } from "@vue/test-utils"
+import { mount, } from "@vue/test-utils";
 import UiButton from "./ui-button.vue";
 
 describe("VButton.test.ts", () => {
 	it("renders props.msg when passed", () => {
-		const classes = "message";
+		const className = "message";
 		const wrapper = mount(UiButton, {
-			props: { classes }
+			props: { className },
 		});
 
-		expect(wrapper.classes()).toContain(classes);
-	})
-});
+		expect(wrapper.classes()).toContain(className);
+	},);
+},);