feat: complete rework

	- Updated to storybook 3 and new format. Conversion to using $props still pending.
	- Made esm only (technically breaking change but it wasn't really working before as a hybrid package either and this is still a WIP).
	- Rewrote most components.
		- Converted to tailwind.
		- Changed to use variables from new theming library.
		- Completely reworked css state management.
		- Separated out components into smaller easy to re-use building blocks.
	- Created single global resize observer.
	- Added a color picker.
	- Added a popup wrapper component.
	- Added a template for stories.
	- Improved accessibility.
	- Removed babel.
		- Not sure why even just transforms without polyfills causes issues when using the package, but it shouldn't be a problem to leave the polyfilling to the end app.

Author: AlansCodeLog

.eslintrc.cjs

@@ -1,13 +1,16 @@
-const path = require("path")
-
-
 module.exports = {
 	root: true,
 	extends: [
 		// https://github.com/AlansCodeLog/eslint-config
 		"@alanscodelog/eslint-config/vue",
-    "plugin:storybook/recommended"
+		"plugin:storybook/recommended",
+		"plugin:tailwindcss/recommended"
 	],
+	settings: {
+		tailwindcss: {
+			// classRegex: "^(data|type|outlined)(.*)?$",
+		}
+	},
 	// for vscode, so it doesn't try to lint files in here when we open them
 	ignorePatterns: [
 		"coverage",
@@ -19,19 +22,19 @@ module.exports = {
 	parser: "vue-eslint-parser",
 	parserOptions: {
 		parser: "@typescript-eslint/parser",
-		project: "tsconfig.json",
+		project: "tsconfig.eslint.json",
 		extraFileExtensions: ['.vue'], //fixes eslint not linting vue files
 		// debugLevel: true,
 	},
 	rules: {
+		"@typescript-eslint/unified-signatures": "off",
+		"jsdoc/newline-after-description": "off",
+		"tailwindcss/no-custom-classname": "off",
+		"@typescript-eslint/explicit-function-return-type": "off",
+		"import/no-namespace": "off",
+		"no-restricted-imports":"off"
 	},
 	overrides: [
-		{
-			files: ["./*.{js,cjs,ts,vue}"],
-			rules: {
-				"@typescript-eslint/explicit-function-return-type": "off",
-			}
-		}
 		// Eslint: https://eslint.org/docs/rules/
 		// Typescript: https://typescript-eslint.io/rules/
 		// Vue: https://eslint.vuejs.org/rules/

.github/workflows/build-only.yml

@@ -16,7 +16,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: ["lts/-2", "latest"]
+        node-version: ["lts/-1", "latest"]
 
     steps:
 

.github/workflows/build.yml

@@ -21,7 +21,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: ["lts/-2", "latest"]
+        node-version: ["lts/-1", "latest"]
 
     steps:
 

.github/workflows/release.yml

@@ -16,7 +16,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: ["lts/-2"]
+        node-version: ["lts/-1"]
 
     steps:
 
@@ -70,7 +70,8 @@ jobs:
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-      run: npx semantic-release
+      # https://github.com/semantic-release/semantic-release/blob/master/docs/support/node-version.md
+      run: npx -p node@v18-lts -c semantic-release
 
     - run: echo "env.ENABLE_RELEASE is ${{ env.ENABLE_RELEASE }}, no release can be published" && exit 1
       if: "env.ENABLE_RELEASE != 'true'"

.gitignore

@@ -6,3 +6,7 @@ worktree*/**/*
 docs
 coverage
 dist
+
+src/assets/variables.scss
+**/*.wip.*
+test.css

.storybook/main.ts

@@ -1,26 +1,29 @@
 
+import {mergeConfig} from "vite"
 export default {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials"
-  // "@storybook/addon-a11y"
-  ],
-
-  "framework": "@storybook/vue3-vite",
-  core: {
-    builder: "@storybook/builder-vite"
-  },
-  docsPage: {
-    docs: "automatic"
-  },
-  async viteFinal(config, { configType }) {
-    // remove babel plugin used in build
-    const index = config.plugins.findIndex(plugin => plugin.name=== "babel")
-    config.plugins.splice(index, 1)
-    return config;
-  },
+	"stories": [
+		// "../src/**/*.stories.mdx",
+		"../src/**/*.stories.@(js|jsx|ts|tsx)"
+	],
+	"addons": [
+		"@storybook/addon-links",
+		"@storybook/addon-essentials",
+		"@storybook/addon-a11y",
+		"@storybook/addon-storysource",
+		"storybook-tailwind-dark-mode"
+	],
+	"framework": {
+		name: "@storybook/vue3-vite",
+		options: {}
+	},
+	docsPage: {
+		docs: "automatic"
+	},
+	async viteFinal(config) {
+		return mergeConfig(config, {
+		});
+	},
+	docs: {
+		autodocs: true
+	}
 };

.storybook/preview.ts

@@ -1,23 +1,56 @@
-export const parameters = {
+import { Preview,Parameters } from '@storybook/vue3';
+import TestWrapper from "../src/TestWrapper.vue"
+import {extractRootEl} from "../src/directives/extractRootEl.js"
+import "../src/assets/style.css"
+
+import { library } from "@fortawesome/fontawesome-svg-core"
+import { far } from "@fortawesome/free-regular-svg-icons"
+import { fas } from "@fortawesome/free-solid-svg-icons"
+library.add(fas, far)
+
+export const parameters:Parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
+    controls: { expanded: true },
   },
   layout: "fullscreen",
   backgrounds: {
-    default: 'light theme',
+    default: 'default',
     values: [
       {
-        name: 'light theme',
-        value: '#fdfdfd',
+        name: 'light',
+        value: 'var(--cGray0)',
+      },
+      {
+        name: 'dark',
+        value: 'var(--cGray10)',
       },
       {
-        name: 'dark theme',
-        value: '#00000',
+        name: "default",
+        value: 'var(--cBg)',
       },
     ],
   },
 }
+
+
+
+const preview: Preview = {
+  globalTypes: {
+    darkMode: {
+      // defaultValue: true, // Enable dark mode by default on all stories
+    },
+  },
+  decorators: [(story, { args }) => ({
+    directives: {extractRootEl},
+		components: { TestWrapper, story },
+		setup: () => ({ args }),
+		template: `
+			<test-wrapper :outline="args.outline"><story/></test-wrapper>
+    `,
+  })],
+  args: {
+    outline:false,
+  }
+};
+export default preview;

README.md

@@ -16,21 +16,6 @@ Custom vue component library.
 
 ## Usage with Vite
 
-```ts
-	css: {
-		preprocessorOptions: {
-			scss: {
-				// import scss mixins into every scss file
-				// note: requires exact (illegal) path to work
-				// without it there are errors and i think we run into https://github.com/nuxt/vite/issues/71
-				additionalData: `
-					@import "node_modules/@alanscodelog/vue-components/src/assets/mixins.scss";
-				`,
-			},
-		},
-	},
-```
-
 In `main.ts` or where vue is mounted:
 
 ```ts
@@ -56,6 +41,37 @@ createApp(App)
 
 ```
 
+
+<!-- TODO test -->
+You should also be able to use tailwind directly instead of importing the styles.
+
+The package provides a plugin `@alanscodelog/vue-components/tailwind/plugin.js` that can be used with tailwind. It should then be configured similar to the library's config.
+
+```ts
+import { createTailwindPlugin } from "metamorphosis/tailwind"
+import {libraryPlugin} from "@alanscodelog/vue-components/tailwind/plugin.js"
+import {themePluginOpts} from "@alanscodelog/vue-components/tailwind/themePluginOpts.js"
+const config = {
+	darkMode: "class",
+	plugins: [
+		// integration with my theme library
+		// alternatively provide the colors warning/ok/danger/accent (neutral is also used, but that is already provided by tailwind)
+		createTailwindPlugin(theme, themePluginOpts),
+		libraryPlugin,
+	],
+} satisfies Config
+
+export default config
+
+```
+
+You will need to import `@alanscodelog/vue-components/utilities.css` and optionally `@alanscodelog/vue-components/base.css` in your css file.
+
+Utilities contains required utilities.
+
+Base just contains some basic styles for vue's animations.
+
+
 ## Getting Globally Registered Component Types
 
 To get global typings, in a global declaration file (e.g. global.d.ts) do:
@@ -77,20 +93,5 @@ Everything can just be done from the config. Nuxt will automatically import the
 	modules: [
 		["@alanscodelog/vue-components/nuxt"],
 	]
-	vite: {
-		//.. same options as above
-		css: {
-			preprocessorOptions: {
-				scss: {
-					// import scss mixins into every scss file
-					// note: requires exact (illegal) path to work
-					// without it there are errors and i think we run into https://github.com/nuxt/vite/issues/71
-					additionalData: `
-						@import "node_modules/@alanscodelog/vue-components/src/assets/mixins.scss";
-					`,
-				},
-			},
-		},
-	}
 
 ```