bonkers-ui 1.0.0

package/.editorconfig

@@ -0,0 +1,14 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = tab
+indent_size = tab
+tab_width = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/.eslintrc.js

@@ -0,0 +1,70 @@
+module.exports = {
+	"root": true,
+	"env": {
+		"browser": true,
+		"es2021": true,
+		"node": true
+	},
+	"extends": [
+		"plugin:vue/vue3-recommended",
+		"eslint:recommended",
+		"@vue/typescript/recommended",
+	],
+	"parserOptions": {
+		"ecmaVersion": 2021
+	},
+	"parser": "vue-eslint-parser",
+	"plugins": [],
+	"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"
+		],
+		"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
+			}
+		],
+	}
+}

package/.github/workflows/deploy-beta.yaml

@@ -0,0 +1,31 @@
+name: Deploy beta
+# site:
+#   use_directory_urls: false
+#   siteUrl: https://bonkers-ie.github.io/bonkers-ui/
+#   site_url: https://bonkers-ie.github.io/bonkers-ui/
+on:
+  push:
+    branches:
+      - develop
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x]
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: yarn install --frozen-lockfile
+      - run: yarn lint:script
+      - run: yarn lint:style
+      - run: yarn test
+      - run: yarn build-storybook
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./storybook-static
+          cname: https://bonkers-ie.github.io/bonkers-ui/

package/.github/workflows/deploy.yaml

@@ -0,0 +1,28 @@
+name: Deploy
+# site:
+#   use_directory_urls: false
+#   siteUrl: https://bonkers-ie.github.io/bonkers-ui/
+#   site_url: https://bonkers-ie.github.io/bonkers-ui/
+on:
+  push:
+    branches:
+      - master
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x]
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: yarn install --frozen-lockfile
+      - run: yarn lint:script
+      - run: yarn lint:style
+      - run: yarn test
+      - uses: mikeal/merge-release@master
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

package/.github/workflows/linting.yaml

@@ -0,0 +1,28 @@
+name: Linting
+# site:
+#   use_directory_urls: false
+#   siteUrl: https://bonkers-ie.github.io/bonkers-ui/
+#   site_url: https://bonkers-ie.github.io/bonkers-ui/
+on:
+  pull_request:
+    branches:
+      - develop
+      - master
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x]
+    env:
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: yarn install --frozen-lockfile
+      - run: yarn lint:script
+      - run: yarn lint:style
+      - run: yarn test

package/.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn lint-staged
+yarn test

package/.storybook/main.js

@@ -0,0 +1,31 @@
+const {mergeConfig} = require('vite');
+
+module.exports = {
+	"stories": [
+		"../src/**/*.stories.mdx",
+		"../src/**/*.stories.@(js|jsx|ts|tsx)"
+	],
+	"addons": [
+		"@storybook/addon-links",
+		"@storybook/addon-essentials",
+		{
+			name: "@storybook/addon-postcss",
+			options: {
+				postcssLoaderOptions: {
+					implementation: require("postcss")
+				}
+			}
+		},
+		'storybook-tailwind-dark-mode',
+	],
+	"framework": "@storybook/vue3",
+	"core": {
+		"builder": "@storybook/builder-vite"
+	},
+	async viteFinal(config, {configType}) {
+		// return the customized config
+		return mergeConfig(config, {
+			base: "https://bonkers-ie.github.io/bonkers-ui/",
+		});
+	},
+}

package/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+	window.global = window;
+</script>

package/.storybook/preview.js

@@ -0,0 +1,13 @@
+import '../src/main.css'
+
+export const parameters = {
+	darkMode: false,
+	stylePreview: true,
+	actions: {argTypesRegex: "^on[A-Z].*"},
+	controls: {
+		matchers: {
+			color: /(background|color)$/i,
+			date: /Date$/,
+		},
+	},
+}

package/.stylelintrc

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

package/LICENCE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 bonkers.ie
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,34 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+- [webstorm](https://www.jetbrains.com/webstorm/)
+- [VS Code](https://code.visualstudio.com/)
+  - [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
+  - [editorconfig](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
+
+## Setup project
+- `yarn i` to install all dependencies
+- `yarn storybook` just run
+- open [http://localhost:6006/](http://localhost:6006/)
+
+## Flow to develop
+- We use only develop to create branch from
+- First pull all changes and create branch
+- Preferred naming of branches
+  - `feature/[feature-name]`
+  - `hotfix/[fix-name]`
+- Preferred commit message
+  - `update([file[s]-name]): [message]` for example - `update(main.css, header.vue): change header to .header`
+  - `fix([file[s]-name]): [message]`
+  - `add([file[s]-name]): [message]`
+- 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 [-----]()
+- 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
+
+## Flow to deploy github
+- To deploy github-pages use `yarn build-storybook` + `yarn deploy`

package/package.json

@@ -0,0 +1,77 @@
+{
+	"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"
+}

package/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+	plugins: {
+		tailwindcss: {},
+	}
+}

package/src/_colors.json

@@ -0,0 +1,11 @@
+{
+	"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)"
+}
+

package/src/_font-sizes.json

@@ -0,0 +1,3 @@
+{
+	"base": "var(--base-font-size)"
+}

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

@@ -0,0 +1,11 @@
+export enum EButtonTypes {
+	PRIMARY = "primary",
+	SECONDARY = "secondary",
+	ERROR = "error",
+	WARNING = "warning",
+}
+export enum EButtonSizes {
+	SMALL = "sm",
+	MEDIUM = "md",
+	LARGE = "lg"
+}

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

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

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

@@ -0,0 +1,56 @@
+import UiButton from "./ui-button.vue";
+import { EButtonSizes, EButtonTypes } from "./_typings";
+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: {
+			control: { type: "select" },
+			options: ["small", "medium", "large"],
+			description: "The button size",
+		},
+		kind: {
+			control: { type: "select" },
+			options: Object.values(EButtonTypes),
+			description: "The button kinds",
+		},
+		size: {
+			control: { type: "select" },
+			options: Object.values(EButtonSizes),
+			description: "The button sizes",
+		},
+		slot: {
+			control: { type: "text" },
+			description: "The slot text or component",
+		}
+	},
+	args:{
+		slot: "default text",
+	},
+};
+
+type MyComponentProps = InstanceType<typeof UiButton>["$props"];
+
+const Template: Story<MyComponentProps> = (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
+	setup() {
+		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>`,
+});
+
+export const Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+
+Primary.args = {
+	...Primary,
+	classes: "medium",
+	kind: EButtonTypes.PRIMARY,
+	size: EButtonSizes.MEDIUM
+}

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

@@ -0,0 +1,13 @@
+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 wrapper = mount(UiButton, {
+			props: { classes }
+		});
+
+		expect(wrapper.classes()).toContain(classes);
+	})
+});

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

@@ -0,0 +1,28 @@
+<template>
+	<button
+		class="text-base text-white rounded-md"
+		:class="[
+			(!kind || kind === EButtonTypes.PRIMARY) && 'bg-primary',
+			kind === EButtonTypes.SECONDARY && 'bg-secondary',
+			kind === EButtonTypes.WARNING && 'bg-warning',
+			kind === EButtonTypes.ERROR && 'bg-error',
+			(!size || size === EButtonSizes.MEDIUM) && 'py-2.5 px-5',
+			size === EButtonSizes.LARGE && 'py-2.5 px-6',
+			classes
+		]"
+	>
+		{{ kind }}
+		<slot />
+	</button>
+</template>
+
+<script lang="ts" setup>
+	import { EButtonSizes, EButtonTypes } from "./_typings";
+
+	type TProps = {
+		classes?: string;
+		kind?: EButtonTypes;
+		size?: EButtonSizes
+	}
+	defineProps<TProps>();
+</script>

package/src/main.css

@@ -0,0 +1,24 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	:root {
+		--color-white: white;
+		--color-black: black;
+		--color-current: currentcolor;
+		--color-transparent: transparent;
+		--color-error: #e05f5f;
+		--color-primary: #75c46a;
+		--color-secondary: #313449;
+		--color-warning: #f09664;
+
+		/* text */
+		--base-font-size: 1rem;
+		--base-line-height: 1.6;
+	}
+}
+
+body * {
+	line-height: var(--base-line-height);
+}

package/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module "*.vue" {
+	import { defineComponent } from "vue";
+	const component: ReturnType<typeof defineComponent>;
+	export default component;
+}

package/src/stories/Introduction.stories.mdx

@@ -0,0 +1,129 @@
+import { Meta } from '@storybook/addon-docs';
+import Code from './assets/code-brackets.svg';
+
+<Meta title="Example/Introduction" />
+
+<style>{`
+  .subheading {
+    --mediumdark: '#999999';
+    font-weight: 900;
+    font-size: 13px;
+    color: #999;
+    letter-spacing: 6px;
+    line-height: 24px;
+    text-transform: uppercase;
+    margin-bottom: 12px;
+    margin-top: 40px;
+  }
+
+  .link-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+    row-gap: 10px;
+  }
+
+  @media (min-width: 620px) {
+    .link-list {
+      row-gap: 20px;
+      column-gap: 20px;
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  @media all and (-ms-high-contrast:none) {
+  .link-list {
+      display: -ms-grid;
+      -ms-grid-columns: 1fr 1fr;
+      -ms-grid-rows: 1fr 1fr;
+    }
+  }
+
+  .link-item {
+    display: block;
+    padding: 20px 30px 20px 15px;
+    border: 1px solid #00000010;
+    border-radius: 5px;
+    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+    color: #333333;
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .link-item:hover {
+    border-color: #1EA7FD50;
+    transform: translate3d(0, -3px, 0);
+    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+  }
+
+  .link-item:active {
+    border-color: #1EA7FD;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .link-item strong {
+    font-weight: 700;
+    display: block;
+    margin-bottom: 2px;
+  }
+  
+  .link-item img {
+    height: 40px;
+    width: 40px;
+    margin-right: 15px;
+    flex: none;
+  }
+
+  .link-item span {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .tip {
+    display: inline-block;
+    border-radius: 1em;
+    font-size: 11px;
+    line-height: 12px;
+    font-weight: 700;
+    background: #E7FDD8;
+    color: #66BF3C;
+    padding: 4px 12px;
+    margin-right: 10px;
+    vertical-align: top;
+  }
+
+  .tip-wrapper {
+    font-size: 13px;
+    line-height: 20px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+
+  .tip-wrapper code {
+    font-size: 12px;
+    display: inline-block;
+  }
+
+  
+`}</style>
+
+# Welcome to Bonkers.ie UI Storybook
+
+Storybook helps you build UI components in isolation from your app's business logic, data, and context.
+That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+
+Browse example stories now by navigating to them in the sidebar.
+View their code in the `src/components` directory to learn how they work.
+We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components.
+
+<div className="subheading">Configure</div>
+
+<div className="tip-wrapper">
+  <span className="tip">Tip</span>
+  <a href='https://storybook.js.org/docs/vue/essentials/controls#annotation'>#Controls argument types here!</a>
+</div>
+
+<div className="tip-wrapper">
+  <span className="tip">Tip</span>Edit the Markdown in{' '}
+  <code>src/stories/Introduction.stories.mdx</code>
+</div>

package/src/stories/assets/code-brackets.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/code-brackets</title><g id="illustration/code-brackets" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#87E6E5" d="M11.4139325,12 C11.7605938,12 12,12.5059743 12,13.3779712 L12,17.4951758 L6.43502246,23.3839989 C5.85499251,23.9978337 5.85499251,25.0021663 6.43502246,25.6160011 L12,31.5048242 L12,35.6220288 C12,36.4939606 11.7605228,37 11.4139325,37 C11.2725831,37 11.1134406,36.9158987 10.9453839,36.7379973 L0.435022463,25.6160011 C-0.145007488,25.0021663 -0.145007488,23.9978337 0.435022463,23.3839989 L10.9453839,12.2620027 C11.1134051,12.0841663 11.2725831,12 11.4139325,12 Z M36.5860675,12 C36.7274169,12 36.8865594,12.0841013 37.0546161,12.2620027 L47.5649775,23.3839989 C48.1450075,23.9978337 48.1450075,25.0021663 47.5649775,25.6160011 L37.0546161,36.7379973 C36.8865949,36.9158337 36.7274169,37 36.5860675,37 C36.2394062,37 36,36.4940257 36,35.6220288 L36,31.5048242 L41.5649775,25.6160011 C42.1450075,25.0021663 42.1450075,23.9978337 41.5649775,23.3839989 L36,17.4951758 L36,13.3779712 C36,12.5060394 36.2394772,12 36.5860675,12 Z"/><rect id="Rectangle-7-Copy-5" width="35.57" height="4" x="5.009" y="22.662" fill="#A0DB77" rx="2" transform="translate(22.793959, 24.662305) rotate(-75.000000) translate(-22.793959, -24.662305)"/></g></svg>

package/src/stories/colors/colors.stories.ts

@@ -0,0 +1,13 @@
+import UiColors from "./ui-colors.vue";
+
+export default {
+	title: "Example/Colors",
+	component: UiColors,
+}
+
+const Template = () => ({
+	components: { UiColors },
+	template: `<ui-colors/>`,
+});
+
+export const colors = Template();

package/src/stories/colors/ui-colors.vue

@@ -0,0 +1,42 @@
+<template>
+	<ul class="colors grid gap-4">
+		<li
+			v-for="(value, key, index) in colors"
+			:key="key"
+			class="grid"
+		>
+			<span
+				ref="colorRefs"
+				:class="`h-24 rounded-md`"
+				:style="{
+					backgroundColor: value
+				}"
+			/>
+			{{ key }}
+			<br>
+			{{ getBackgroundColor(index) }}
+			<br>
+			{{ value }}
+		</li>
+	</ul>
+</template>
+
+<script lang="ts" setup>
+	import { ref } from "vue";
+	import colors from "../../_colors.json";
+
+	const colorRefs = ref<Array<Element | null>>([]);
+
+	const getBackgroundColor = (index: number) => {
+		const element = colorRefs.value[index];
+		if (element) {
+			return window.getComputedStyle(element, null).getPropertyValue("background-color");
+		}
+	}
+</script>
+
+<style scoped>
+	.colors {
+		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+	}
+</style>

package/tailwind.config.js

@@ -0,0 +1,13 @@
+const colors = require("./src/_colors.json");
+const fontSize = require("./src/_font-sizes.json");
+
+module.exports = {
+	darkMode: "class",
+	content: ["**/*.{vue, css, js, ts}"],
+	theme: {
+		colors,
+		fontSize,
+		extend: {},
+	},
+	plugins: [],
+}

package/tsconfig.json

@@ -0,0 +1,46 @@
+{
+	"compilerOptions": {
+		"types": [
+			"vite/client",
+			"jest"
+		],
+		"target": "esnext",
+		"module": "esnext",
+		"strict": true,
+		"resolveJsonModule": true,
+		"useDefineForClassFields": true,
+		"jsx": "preserve",
+		"isolatedModules": true,
+		"importHelpers": true,
+		"moduleResolution": "node",
+		"skipLibCheck": true,
+		"esModuleInterop": true,
+		"allowSyntheticDefaultImports": true,
+		"sourceMap": true,
+		"baseUrl": ".",
+		"paths": {
+			"@/*": [
+				"src/*"
+			]
+		},
+		"lib": [
+			"esnext",
+			"dom",
+			"dom.iterable",
+			"scripthost"
+		]
+	},
+	"include": [
+		"src/**/*.ts",
+		"src/**/*.tsx",
+		"src/**/*.vue"
+	],
+	"exclude": [
+		"node_modules"
+	],
+	"references": [
+		{
+			"path": "./tsconfig.node.json"
+		}
+	]
+}

package/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+	"compilerOptions": {
+		"composite": true,
+		"module": "esnext",
+		"moduleResolution": "node"
+	},
+	"include": [
+		"vite.config.ts"
+	]
+}

package/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "vite"
+import vue from "@vitejs/plugin-vue"
+import { resolve } from "path"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	resolve: {
+		alias: {
+			"@": resolve(__dirname, "src")
+		}
+	},
+	plugins: [vue({
+		reactivityTransform: true
+	})]
+})