bonkers-ui 1.0.0 → 1.0.3

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/README.md

@@ -26,7 +26,7 @@ This template should help get you started developing with Vue 3 and TypeScript i
 - After you ready to push just `merge`(not `rebase`) develop to current branch 
 - Fix merge conflicts if you have
 - Next create pull request to develop (you can do squash when merging)
-- After pull request is merged to develop you can see it in staging [-----]()
+- After pull request is merged to develop you can see it in staging [https://bonkers-ie.github.io/bonkers-ui](https://bonkers-ie.github.io/bonkers-ui/?path=/story/example-introduction--page)
 - Only after test staging you can create merge request from `develop` to `master`
 - After merge to master patch version will up x.x.^x and you can use this version in package
 

package/package.json

@@ -1,77 +1,85 @@
 {
-	"name": "bonkers-ui",
-	"version": "1.0.0",
-	"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:markup": "vue-tsc --noEmit",
-		"test": "jest",
-		"deploy": "gh-pages -d storybook-static",
-		"typecheck": "tsc --noEmit",
-		"i": "yarn install --frozen-lockfile"
-	},
-	"dependencies": {
-		"vue": "^3.2.37"
-	},
-	"devDependencies": {
-		"@storybook/addon-actions": "^6.5.9",
-		"@storybook/addon-essentials": "^6.5.9",
-		"@storybook/addon-links": "^6.5.9",
-		"@storybook/addon-postcss": "^2.0.0",
-		"@storybook/builder-vite": "^0.1.36",
-		"@storybook/vue3": "^6.5.9",
-		"@types/jest": "^28.1.3",
-		"@typescript-eslint/eslint-plugin": "^5.29.0",
-		"@typescript-eslint/parser": "^5.29.0",
-		"@vitejs/plugin-vue": "^2.3.3",
-		"@vue/eslint-config-typescript": "^11.0.0",
-		"@vue/test-utils": "^2.0.0",
-		"@vue/vue3-jest": "^27.0.0",
-		"babel-jest": "27",
-		"eslint": "^8.18.0",
-		"eslint-plugin-vue": "^9.1.1",
-		"gh-pages": "^4.0.0",
-		"husky": "^8.0.1",
-		"jest": "27.3.1",
-		"lint-staged": "^13.0.2",
-		"postcss": "^8.4.14",
-		"postcss-html": "^1.4.1",
-		"storybook-tailwind-dark-mode": "^1.0.12",
-		"stylelint": "^14.9.1",
-		"stylelint-config-recommended": "^8.0.0",
-		"stylelint-config-recommended-vue": "^1.4.0",
-		"stylelint-config-standard": "^26.0.0",
-		"tailwindcss": "^3.1.4",
-		"ts-jest": "^27.0.7",
-		"typescript": "^4.7.4",
-		"vite": "^2.9.12",
-		"vue-eslint-parser": "^9.0.3",
-		"vue-loader": "^17.0.0",
-		"vue-tsc": "^0.38.1"
-	},
-	"jest": {
-		"preset": "ts-jest",
-		"moduleFileExtensions": [
-			"vue",
-			"js",
-			"jsx",
-			"ts"
-		],
-		"testEnvironment": "jsdom",
-		"moduleNameMapper": {
-			"^@/(.*)$": "<rootDir>/src/$1"
-		},
-		"transform": {
-			".*\\.(js)$": "babel-jest",
-			"^.+\\.tsx?$": "ts-jest",
-			".*\\.(vue)$": "@vue/vue3-jest"
-		}
-	},
-	"lint-staged": {
-		"*.{ts,vue}": "eslint --fix && typecheck && test",
-		"*.{css,scss,vue,ts}": "stylelint --fix"
-	},
-	"license": "MIT"
+  "name": "bonkers-ui",
+  "version": "1.0.3",
+  "scripts": {
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "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",
+    "typecheck": "tsc --noEmit",
+    "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": {
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/builder-vite": "^0.1.36",
+    "@storybook/vue3": "^6.5.9",
+    "@types/jest": "^28.1.3",
+    "@typescript-eslint/eslint-plugin": "^5.29.0",
+    "@typescript-eslint/parser": "^5.29.0",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "@vue/eslint-config-typescript": "^11.0.0",
+    "@vue/test-utils": "^2.0.0",
+    "@vue/vue3-jest": "^27.0.0",
+    "babel-jest": "27",
+    "eslint": "^8.18.0",
+    "eslint-plugin-vue": "^9.1.1",
+    "gh-pages": "^4.0.0",
+    "husky": "^8.0.1",
+    "jest": "27.3.1",
+    "lint-staged": "^13.0.2",
+    "postcss": "^8.4.14",
+    "postcss-html": "^1.4.1",
+    "storybook-tailwind-dark-mode": "^1.0.12",
+    "stylelint": "^14.9.1",
+    "stylelint-config-recommended": "^8.0.0",
+    "stylelint-config-recommended-vue": "^1.4.0",
+    "stylelint-config-standard": "^26.0.0",
+    "tailwindcss": "^3.1.4",
+    "ts-jest": "^27.0.7",
+    "typescript": "^4.7.4",
+    "vite": "^2.9.12",
+    "vue-eslint-parser": "^9.0.3",
+    "vue-loader": "^17.0.0",
+    "vue-tsc": "^0.38.1"
+  },
+  "jest": {
+    "preset": "ts-jest",
+    "moduleFileExtensions": [
+      "vue",
+      "js",
+      "jsx",
+      "ts"
+    ],
+    "testEnvironment": "jsdom",
+    "moduleNameMapper": {
+      "^@/(.*)$": "<rootDir>/src/$1"
+    },
+    "transform": {
+      ".*\\.(js)$": "babel-jest",
+      "^.+\\.tsx?$": "ts-jest",
+      ".*\\.(vue)$": "@vue/vue3-jest"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,tsx,vue}": [
+      "eslint --fix",
+      "bash -c 'yarn typecheck'"
+    ],
+    "*.{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,2 @@
-import VButton from "./ui-button.vue";
-
-export default VButton;
+export { default } from "./ui-button.vue";
+export { EButtonSizes, EButtonTypes } from "./_typings";