feat: add the palette & theme generation (#140)

* feat: add the palette & theme generation

* update eslint

* add storybook and theme

* add theme to published package

* publish the color palette

* figure out how to publish types

* fix build and tsify constants

* refactor: make storybook typescript and update github action a little

* better github actions

* tsify Utils

* tsify state

* tsify yamlutils

* tsify YamlUtils

* tsify some components

* tsify misc components

* finish typescript migration

* some last minute changes

.github/workflows/main.yml

@@ -16,22 +16,20 @@ jobs:
       - uses: actions/checkout@v4
 
       - uses: actions/setup-node@v4
-        with:
-          node-version: '18.x'
-          registry-url: 'https://registry.npmjs.org'
 
       - name: Change version
         id: vars
         run: |
           VERSION=${GITHUB_REF#refs/*/}
-          sed -i  's/"version": "0.0.0",/"version": "'$VERSION'",/' package.json
+          npm version '$VERSION' --no-git-tag-version
 
       - name: Install dependencies
         run: npm install
 
       - name: Publish to npm
         run: |
           npm run build
+          npm run build:types
           npm publish --access public
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+*storybook.log

.nvmrc

@@ -0,0 +1 @@
+22

.storybook/main.ts

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/vue3-vite').StorybookConfig } */
+const config = {
+  stories: ["../{src,theme}/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-essentials",
+    "@storybook/addon-themes",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/vue3-vite",
+    options: {},
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,29 @@
+import {withThemeByClassName} from "@storybook/addon-themes";
+
+// @ts-expect-error no types needed here
+import "../src/scss/theme-light.scss";
+// @ts-expect-error no types needed here
+import "../src/scss/theme-dark.scss";
+
+/** @type { import('@storybook/vue3').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    withThemeByClassName({
+        themes: {
+            light: "light",
+            dark: "dark",
+        },
+        defaultTheme: "light",
+    }),
+  ]
+};
+
+export default preview;

eslint.config.js

@@ -0,0 +1,82 @@
+import globals from "globals";
+import storybook from "eslint-plugin-storybook"
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginVue from "eslint-plugin-vue";
+import {includeIgnoreFile} from "@eslint/compat";
+import path from "node:path";
+import {fileURLToPath} from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const gitignorePath = path.resolve(__dirname, ".gitignore");
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+    includeIgnoreFile(gitignorePath),
+    ...storybook.configs["flat/recommended"],
+    {
+        files: ["**/*.{js,mjs,cjs,ts,vue}"],
+        ignores: ["node_modules", "node"],
+    },
+    {languageOptions: {globals: globals.browser}},
+    pluginJs.configs.recommended,
+    ...tseslint.configs.recommended,
+     {
+        files: ["**/*.spec.js", "**/*.spec.ts", "vite.config.js", "vitest.config.js"],
+        languageOptions: {globals: globals.node},
+    },
+    ...pluginVue.configs["flat/strongly-recommended"],
+    {
+        files: ["**/*.vue", "**/*.tsx", "**/*.jsx"],
+        languageOptions: {parserOptions: {parser: tseslint.parser}},
+        rules: {
+            "vue/this-in-template": ["error"],
+            "vue/html-indent": [
+                "error",
+                4,
+                {
+                    baseIndent: 1,
+                },
+            ],
+            "vue/script-indent": [
+                "error",
+                4,
+                {
+                    baseIndent: 1,
+                },
+            ],
+            "vue/max-attributes-per-line": [
+                "error",
+                {
+                    singleline: 7,
+                },
+            ],
+            "vue/multi-word-component-names": ["off"],
+            "vue/no-deprecated-router-link-tag-prop": "off",
+            "vue/object-curly-spacing": ["error", "never"],
+            "vue/block-order": [
+                "error",
+                {
+                    order: ["template", "script", "style"],
+                },
+            ],
+        },
+    },
+    {
+        rules: {
+            quotes: ["error", "double"],
+            "object-curly-spacing": ["error", "never"],
+            "no-unused-vars": "off",
+            "@typescript-eslint/no-unused-vars": [
+                "error",
+                {
+                    // args prefixed with '_' are ignored
+                    argsIgnorePattern: "^_",
+                },
+            ],
+            "@typescript-eslint/no-this-alias": "off",
+            "@typescript-eslint/no-explicit-any": "off"
+        }
+    }
+];