@vueless/storybook 0.0.49 → 0.0.50

package/.storybook/decorators/storyDarkModeDecorator.js

@@ -1,11 +1,32 @@
-import { withThemeByDataAttribute } from "@storybook/addon-themes";
-
-export const storyDarkModeDecorator = (darkClass, lightClass) =>
-  withThemeByDataAttribute({
-    attributeName: "class",
-    defaultTheme: "light",
-    themes: {
-      light: lightClass,
-      dark: darkClass,
-    },
-  });
+import { DecoratorHelpers } from "@storybook/addon-themes";
+import { setTheme } from "vueless";
+import { COLOR_MODE_KEY } from "vueless/constants.js";
+
+const { initializeThemeState, pluckThemeFromContext } = DecoratorHelpers;
+
+export const storyDarkModeDecorator = () => {
+  const prefersColorSchemeDark = window.matchMedia("(prefers-color-scheme: dark)");
+  const preferScheme = prefersColorSchemeDark.matches ? "dark" : "light";
+  const cachedColorMode = localStorage.getItem(COLOR_MODE_KEY) || preferScheme;
+
+  initializeThemeState(["light", "dark"], cachedColorMode);
+
+  return (story, context) => {
+    const theme = pluckThemeFromContext(context);
+
+    setTheme({
+      // TODO: Remove this condition when all component will have dark classes
+      colorMode: process.env.NODE_ENV === "development" ? theme : "light",
+    });
+
+    return {
+      components: { story },
+      setup() {
+        return {
+          theme,
+        };
+      },
+      template: `<story />`,
+    };
+  };
+};

package/.storybook/index.css

@@ -374,7 +374,7 @@ body {
 /* -------------------- Storybook story preview -------------------- */
 
 .vl-dark {
-  @apply min-h-full bg-gray-950;
+  @apply min-h-full bg-gray-900;
 }
 
 .vl-light {

package/.storybook/main.js

@@ -1,7 +1,7 @@
 /** @type { import('@storybook/vue3-vite').StorybookConfig } */
 export default {
   stories: [
-    "../node_modules/vueless/**/*stories.@(js|jsx|ts|tsx)",
+    "../node_modules/vueless/**/*stories@(js|jsx|ts|tsx)",
     "../node_modules/vueless/**/*.@(mdx)",
     "../src/**/*stories.@(js|jsx|ts|tsx)",
     "../src/**/*.@(mdx)",

package/.storybook/preview.js

@@ -1,6 +1,6 @@
 import { setup } from "@storybook/vue3";
-import { getRandomId } from "vueless/utils/utilUI.js";
-import { DARK_MODE_SELECTOR, LIGHT_MODE_SELECTOR } from "vueless/constants.js";
+
+import { getRandomId } from "vueless";
 
 import themeLight from "./themes/themeLight.js";
 import themeDark from "./themes/themeDark.js";
@@ -15,11 +15,11 @@ import "./index.css";
 import { createVueless } from "vueless";
 import { createRouter, createWebHistory } from "vue-router";
 
+const vueless = createVueless();
+const router = createRouter({ history: createWebHistory(), routes: [] });
+
 /* Setup storybook */
 setup((app) => {
-  const vueless = createVueless();
-  const router = createRouter({ history: createWebHistory(), routes: [] });
-
   app.config.idPrefix = getRandomId();
 
   if (!app._context.config.globalProperties.$route) {
@@ -29,10 +29,7 @@ setup((app) => {
 });
 
 /* Set storybook decorators */
-export const decorators = [
-  vue3SourceDecorator,
-  storyDarkModeDecorator(DARK_MODE_SELECTOR, LIGHT_MODE_SELECTOR),
-];
+export const decorators = [vue3SourceDecorator, storyDarkModeDecorator()];
 
 /* Set storybook parameters */
 export const parameters = {

package/.storybook/tailwind.config.js

@@ -1,5 +1,5 @@
 /** @type {import('tailwindcss').Config} */
-import { vuelessContent, vuelessContentVue, vuelessPreset } from "vueless/preset.tailwind.js";
+import { vuelessContent, vuelessContentVue, vuelessPreset } from "vueless/preset-tailwind";
 
 export default {
   content: [...vuelessContent, ...vuelessContentVue, "./.storybook/**/*.{js,ts,jsx,tsx,html}"],

package/.storybook/vite.config.js

@@ -1,8 +1,10 @@
 import { defineConfig } from "vite";
+import tailwindcss from "tailwindcss";
+import autoprefixer from "autoprefixer";
 
 // Plugins
 import Vue from "@vitejs/plugin-vue";
-import { Vueless } from "@vueless/plugin-vite";
+import { Vueless } from "vueless/plugin-vite";
 
 export default defineConfig({
   plugins: [Vue(), Vueless({ mode: "storybook", env: "vueless", debug: false })],
@@ -10,6 +12,7 @@ export default defineConfig({
     include: [
       "cva",
       "tailwind-merge",
+      "@tailwindcss/forms",
       "prettier2",
       "prettier2/parser-html",
       "@storybook/blocks",
@@ -17,4 +20,9 @@ export default defineConfig({
       "@storybook/addon-themes",
     ],
   },
+  css: {
+    postcss: {
+      plugins: [tailwindcss, autoprefixer],
+    },
+  },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueless/storybook",
-  "version": "0.0.49",
+  "version": "0.0.50",
   "description": "Simplifies Storybook configuration for Vueless UI library.",
   "homepage": "https://vueless.com",
   "author": "Johnny Grid",
@@ -49,7 +49,7 @@
     "prettier-eslint": "^16.3.0",
     "release-it": "^17.2.1",
     "vue-router": "^4.3.2",
-    "vueless": "^0.0.439"
+    "vueless": "^0.0.589"
   },
   "resolutions": {
     "jackspeak": "2.3.6"

package/.storybook/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};