@vueless/storybook 0.0.39 → 0.0.41

package/.storybook/decorators/storyDarkModeDecorator.js

@@ -0,0 +1,11 @@
+import { withThemeByDataAttribute } from "@storybook/addon-themes";
+
+export const storyDarkModeDecorator = (darkClass, lightClass) =>
+  withThemeByDataAttribute({
+    attributeName: "class",
+    defaultTheme: "light",
+    themes: {
+      light: lightClass,
+      dark: darkClass,
+    },
+  });

package/.storybook/decorators/vue3SourceDecorator.js

@@ -54,7 +54,7 @@ export const vue3SourceDecorator = makeDecorator({
           }
         }
 
-        return () => h("div", { style: `padding: 2rem 1.5rem 3rem 1.5rem;` }, [h(story)]);
+        return () => h("div", { class: "px-6 pt-8 pb-12" }, [h(story)]);
       },
     };
   },

package/.storybook/index.css

@@ -0,0 +1,205 @@
+@config "./tailwind.config.js";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* -------------------- Storybook Preview UI -------------------- */
+/* -------------------- General -------------------- */
+
+body {
+  font-family: Roboto, sans-serif;
+}
+
+.dark h1, .dark h2, .dark h3  {
+  @apply text-gray-200;
+}
+
+/* -------------------- All docs block -------------------- */
+
+.dark .sbdocs {
+  @apply bg-gray-950;
+}
+
+/* -------------------- Main story -------------------- */
+
+.sb-bar,
+.docs-story {
+  @apply bg-white;
+}
+
+.vl-dark .sb-bar,
+.vl-dark .docs-story {
+  @apply !bg-gray-900;
+}
+
+.sb-bar {
+  @apply border-0;
+}
+
+.dark .sb-bar,
+.dark .docs-story {
+  @apply bg-gray-100;
+}
+
+.dark .sb-bar {
+  @apply border-b border-gray-300;
+  box-shadow: none !important;
+}
+
+.vl-dark .sb-bar  {
+  @apply border-b border-gray-800;
+  box-shadow: none !important;
+}
+
+.sbdocs.sbdocs-preview .prismjs {
+  @apply border-t border-t-gray-700 bg-gray-800;
+}
+
+.vl-dark .docblock-code-toggle {
+  @apply bg-gray-800 border-gray-800 text-gray-400 rounded-tl-none;
+}
+
+.sbdocs-preview {
+  box-shadow: none !important;
+}
+
+.dark .sbdocs.sbdocs-preview,
+.vl-dark .sbdocs.sbdocs-preview {
+  @apply border-gray-800;
+}
+
+/* -------------------- Args table -------------------- */
+
+.dark .docblock-argstable,
+.dark .docblock-argstable-head th {
+  @apply !text-gray-200;
+}
+
+.docblock-argstable-body {
+  @apply rounded-lg !filter-none;
+}
+
+.docblock-argstable-body tr td {
+  @apply !rounded-none;
+}
+
+.docblock-argstable-body tr:not([title]) > td {
+  @apply !bg-white;
+}
+
+.dark .docblock-argstable-body tr > td {
+  @apply border-b border-solid !bg-gray-900 border-s-0 border-e-0 !border-t-gray-800;
+  border-block-end: none !important;
+}
+
+.dark .docblock-argstable-body tr > td:first-child,
+.dark .docblock-argstable-body tr > td:last-child {
+  @apply !border-s-gray-800 !border-e-gray-800;
+}
+
+.dark .docblock-argstable-body {
+  @apply border border-b-gray-800;
+}
+
+.dark .docblock-argstable-body tr[title] > td {
+  @apply !bg-gray-800 !text-gray-400;
+}
+
+.dark .docblock-argstable-body tr[title] > td svg {
+  @apply !text-gray-400;
+}
+
+.dark .docblock-argstable-body tr > td > div + div > span,
+.dark .docblock-argstable-body tr > td > div + div > div > span,
+.dark .docblock-argstable-body tr > td:nth-child(3) > div > span[class],
+.dark .docblock-argstable-body tr > td:nth-child(3) > span[class] {
+  @apply bg-gray-800 border-gray-700/50 text-gray-400;
+}
+
+.dark .docblock-argstable-body tr > td textarea,
+.dark .docblock-argstable-body tr > td select,
+.dark .docblock-argstable-body tr > td:nth-child(4) button {
+  @apply text-gray-200 bg-gray-800 border border-solid border-gray-700/50 hover:border-gray-600 focus:border-gray-500;
+  box-shadow: none !important;
+}
+
+.light .docblock-argstable-body tr > td textarea,
+.light .docblock-argstable-body tr > td select,
+.light .docblock-argstable-body tr > td:nth-child(4) button {
+  @apply border border-solid border-gray-300 hover:border-gray-400 focus:border-gray-500;
+  box-shadow: none !important;
+}
+
+.dark .docblock-argstable-body [type='checkbox'],
+.dark .docblock-argstable-body [type='radio'] {
+  @apply !border !border-solid !border-gray-300;
+  box-shadow: none !important;
+}
+
+.dark .docblock-argstable-body [type='checkbox']:checked,
+.dark .docblock-argstable-body [type='radio']:checked {
+  @apply bg-gray-700;
+}
+
+.docblock-argstable-body [type='checkbox']:checked,
+.docblock-argstable-body [type='radio']:checked {
+  @apply !bg-gray-900;
+}
+
+.docblock-argstable [type='checkbox']:focus,
+.docblock-argstable [type='radio']:focus {
+  @apply !ring-gray-300;
+}
+
+/* -------------------- Code block and user markdown -------------------- */
+
+#storybook-docs h2 {
+  @apply mt-8 mb-6 pb-2 font-bold;
+}
+
+.dark h2 {
+  @apply border-b-gray-800;
+}
+
+.sbdocs-title + p code {
+  @apply bg-white;
+}
+
+.docblock-source {
+  @apply !bg-gray-800 border-gray-800 !rounded-lg;
+  box-shadow: none !important;
+}
+
+.dark .docblock-source {
+  @apply !bg-gray-900 !border-gray-800;
+}
+
+.dark .docblock-source button {
+  @apply bg-gray-800 border-gray-800 text-gray-400 rounded-tl-none;
+}
+
+.markdown  code {
+  background-color: #f3f4f6 !important;
+  border-color: #d1d5db !important;
+}
+
+.markdown .sbdocs-a {
+  border-bottom: dashed 1px #4b5563;
+  color: #4b5563;
+}
+
+.markdown .sbdocs-a:hover {
+  border-bottom: none;
+  color: #4b5563;
+}
+
+/* -------------------- Storybook story preview -------------------- */
+
+.vl-dark {
+  @apply min-h-full bg-gray-950;
+}
+
+.vl-light {
+  @apply min-h-full bg-white;
+}

package/.storybook/main.js

@@ -7,15 +7,19 @@ export default {
     "../src/**/*.@(mdx)",
   ],
   addons: [
-    "storybook-dark-mode",
     "@storybook/addon-links",
-    "@storybook/addon-themes",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
+    "storybook-dark-mode",
+    // "@storybook/addon-themes", // TODO: uncomment when dark mode will be implemented to the components.
   ],
   framework: {
     name: "@storybook/vue3-vite",
-    options: {},
+    options: {
+      builder: {
+        viteConfigPath: ".storybook/vite.config.js",
+      },
+    },
   },
   docs: {
     autodocs: true,

package/.storybook/manager-head.html

@@ -7,7 +7,60 @@ Overrides content of storybook layout HTML page <head> tag,
 
 <!-- Styles overriding -->
 <style>
- div[data-testid="tooltip"] a[id]:hover {
-   background-color: rgb(17 24 39 / 5%) !important;
- }
+  /* -------------------- Storybook config tooltip -------------------- */
+
+  div[data-testid="tooltip"] {
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  div[data-testid="tooltip"] a[id]:hover,
+  div[data-testid="tooltip"] button[id]:hover {
+    background-color: rgb(17 24 39 / 5%) !important;
+  }
+
+  .dark div[data-testid="tooltip"] a[id]:hover,
+  .dark div[data-testid="tooltip"] button[id]:hover {
+    background-color: rgb(255 255 255 / 5%) !important;
+  }
+
+  /* -------------------- Storybook sidebar -------------------- */
+
+  .sidebar-header img {
+   width: 150px;
+  }
+
+  .sidebar-header a:focus {
+    border: 1px solid transparent;
+  }
+
+  /* -------------------- Storybook args -------------------- */
+
+  .dark,
+  .dark #panel-tab-content div,
+  .dark .docblock-argstable-body > tr > td {
+    background: #030712 !important;
+  }
+
+  .light,
+  .light #panel-tab-content div,
+  .light .docblock-argstable-body > tr > td {
+    background: #f9fafb !important;
+  }
+
+  .dark .docblock-argstable-head > tr {
+    background: #1e293b !important;
+  }
+
+  .dark .docblock-argstable-body tr > td textarea,
+  .dark .docblock-argstable-body tr > td select,
+  .dark .docblock-argstable-body tr > td:last-child button:not([tabindex="-1"]) {
+    background: #111827;
+    border: solid 1px #1f2937;
+    box-shadow: none;
+  }
+
+  .light .docblock-argstable-body tr > td:last-child button:not([tabindex="-1"]) {
+    background: white;
+  }
 </style>

package/.storybook/manager.js

@@ -1,6 +1,7 @@
 import { addons } from "@storybook/manager-api";
-import vuelessTheme from "./themes/vueless.theme.js";
+import themeLight from "./themes/themeLight.js";
 
 addons.setConfig({
-  theme: vuelessTheme,
+  theme: themeLight,
+  panelPosition: "right",
 });

package/.storybook/postcss.config.js

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

package/.storybook/preview-head.html

@@ -8,69 +8,3 @@ affecting rendered component(s) below Canvas and Docs tabs.
 <link rel="preconnect" crossorigin="anonymous" href="https://fonts.googleapis.com">
 <link rel="preconnect" crossorigin="anonymous" href="https://fonts.gstatic.com">
 <link rel="stylesheet" crossorigin="anonymous" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap">
-
-<!-- Styles overriding -->
-<style>
-  body {
-    font-family: Roboto, sans-serif;
-  }
-
-  #storybook-docs h2 {
-    margin-top: 32px !important;
-    margin-bottom: 24px !important;
-    padding-bottom: 8px !important;
-    font-weight: bold !important;
-  }
-
-  .docblock-argstable-body {
-    filter: none !important;
-    border-radius: 0.5rem !important;
-  }
-
-  .docblock-argstable-body tr:not([title]) > td {
-    background-color: white !important;
-  }
-
-  .docblock-argstable-body tr td {
-    border-radius: 0 !important;
-  }
-
-  .sbdocs-preview {
-    box-shadow: none !important;
-  }
-
-  .docblock-argstable [type='checkbox']:checked,
-  .docblock-argstable [type='radio']:checked {
-    background-color: rgb(17 24 39) !important;
-  }
-
-  .docblock-argstable [type='checkbox']:focus,
-  .docblock-argstable [type='radio']:focus {
-    @apply !ring-gray-300;
-  }
-
-  .sbdocs-title + p code {
-    background: #fff;
-  }
-
-  .markdown {
-    .docblock-source {
-      margin: 0px 0 24px !important;
-    }
-
-    code {
-      background-color: #f3f4f6 !important;
-      border-color: #d1d5db !important;
-    }
-
-    .sbdocs-a {
-      border-bottom: dashed 1px #4b5563;
-      color: #4b5563;
-    }
-
-    .sbdocs-a:hover {
-      border-bottom: none;
-      color: #4b5563;
-    }
-  }
-</style>

package/.storybook/preview.js

@@ -1,19 +1,21 @@
 import { setup } from "@storybook/vue3";
-import { DARK_MODE_SELECTOR } from "vueless/constants.js";
-import { withThemeByClassName } from '@storybook/addon-themes';
 
-import { backgrounds, docs, layout } from "./configs/main.config.js";
+import themeLight from "./themes/themeLight.js";
+import themeDark from "./themes/themeDark.js";
+import themeLightDocs from "./themes/themeLightDocs.js";
+import { storyDarkModeDecorator } from "./decorators/storyDarkModeDecorator.js";
 import { vue3SourceDecorator } from "./decorators/vue3SourceDecorator.js";
+import { DARK_MODE_SELECTOR, LIGHT_MODE_SELECTOR } from "vueless/constants.js";
 
-// Vue plugins
+/* Tailwind styles */
+import "./index.css";
+
+/* Vue plugins */
 import { createVueless } from "vueless";
 import { createRouter, createWebHistory } from "vue-router";
 
-// Tailwind styles
-import "./index.pcss";
-
-// Create storybook app instance
-const storybookApp = (app) => {
+/* Setup storybook */
+setup((app) => {
   const vueless = createVueless();
   const router = createRouter({ history: createWebHistory(), routes: [] });
 
@@ -21,31 +23,35 @@ const storybookApp = (app) => {
     app.use(router);
     app.use(vueless);
   }
-};
+});
+
+/* Set storybook decorators */
+export const decorators = [
+  vue3SourceDecorator,
+  storyDarkModeDecorator(DARK_MODE_SELECTOR, LIGHT_MODE_SELECTOR),
+];
+
+/* Set storybook parameters */
+export const parameters = {
+  layout: "fullscreen",
+  backgrounds: { disable: true },
+  docs: {
+    theme: themeLightDocs,
+    source: { language: "html" },
+  },
+  darkMode: {
+    current: "light",
+    light: themeLight,
+    dark: themeDark,
+    classTarget: "body",
+    stylePreview: true,
+  },
+  options: {
+    storySort: (a, b) => {
+      const idA = a.id.split("--")[0];
+      const idB = b.id.split("--")[0];
 
-// Setup storybook
-setup(storybookApp);
-
-// Set storybook config
-export default {
-  decorators: [
-    vue3SourceDecorator,
-    withThemeByClassName({
-      themes: { light: "", dark: DARK_MODE_SELECTOR },
-      defaultTheme: "dark",
-    }),
-  ],
-  parameters: {
-    layout,
-    docs,
-    backgrounds,
-    options: {
-      storySort: (a, b) => {
-        const idA = a.id.split("--")[0];
-        const idB = b.id.split("--")[0];
-
-        return idA.localeCompare(idB, undefined, { numeric: true });
-      },
+      return idA.localeCompare(idB, undefined, { numeric: true });
     },
   },
 };

package/.storybook/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+import { vuelessContent, vuelessContentVue, vuelessPreset } from "vueless/preset.tailwind.js";
+
+export default {
+  content: [...vuelessContent, ...vuelessContentVue, "./.storybook/**/*.{js,ts,jsx,tsx,html}"],
+  presets: [vuelessPreset],
+  theme: {
+    fontFamily: {
+      roboto: ["Roboto", "sans-serif"],
+    },
+  },
+};

package/.storybook/themes/themeDark.js

@@ -0,0 +1,46 @@
+import { create } from "@storybook/theming/create";
+import colors from "tailwindcss/colors.js";
+
+export default create({
+  base: "dark",
+  // Typography
+  fontBase: '"Roboto", sans-serif',
+  fontCode: "monospace",
+
+  brandTitle: "Vueless UI",
+  brandUrl: "https://vueless.com",
+  brandImage:
+    "https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/images/vueless-logo-dark.svg",
+  brandTarget: "_blank",
+
+  // Main colors
+  colorPrimary: colors.gray["200"],
+  colorSecondary: colors.gray["700"],
+
+  // UI
+  appBg: colors.gray["900"],
+  appPreviewBg: colors.gray["900"],
+  appBorderColor: colors.gray["900"],
+  appBorderRadius: 0,
+
+  // Text colors
+  textColor: colors.gray["300"],
+  textInverseColor: colors.gray["800"],
+
+  // Toolbar default and active colors
+  barTextColor: colors.gray["500"],
+  barHoverColor: colors.gray["400"],
+  barSelectedColor: colors.gray["300"],
+  barBg: colors.gray["950"],
+
+  // Form colors
+  inputBg: colors.gray["950"],
+  inputBorder: colors.gray["600"],
+  inputTextColor: colors.gray["100"],
+  inputBorderRadius: 4,
+
+  buttonBg: colors.gray["800"],
+  buttonBorder: colors.gray["800"],
+  booleanBg: colors.gray["900"],
+  booleanSelectedBg: colors.gray["800"],
+});

package/.storybook/themes/{vueless.theme.js → themeLight.js}

@@ -10,7 +10,7 @@ export default create({
   brandTitle: "Vueless UI",
   brandUrl: "https://vueless.com",
   brandImage:
-    "https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/images/logo.png",
+    "https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/images/vueless-logo-light.svg",
   brandTarget: "_blank",
 
   // Main colors
@@ -25,7 +25,7 @@ export default create({
 
   // Text colors
   textColor: colors.gray["900"],
-  textInverseColor: colors.gray["50"],
+  textInverseColor: colors.gray["900"],
 
   // Toolbar default and active colors
   barTextColor: colors.gray["500"],
@@ -40,7 +40,7 @@ export default create({
   inputBorderRadius: 4,
 
   buttonBg: colors.gray["100"],
-  buttonBorder: colors.gray["100"],
-  booleanBg: colors.white,
-  booleanSelectedBg: colors.gray["100"],
+  buttonBorder: colors.gray["200"],
+  booleanBg: colors.gray["50"],
+  booleanSelectedBg: colors.gray["200"],
 });

package/.storybook/vite.config.js

@@ -0,0 +1,19 @@
+import { defineConfig } from "vite";
+
+// Plugins
+import Vue from "@vitejs/plugin-vue";
+import { Vueless } from "@vueless/plugin-vite";
+
+export default defineConfig({
+  plugins: [Vue(), Vueless({ mode: "storybook", env: "vueless", debug: false })],
+  optimizeDeps: {
+    include: [
+      "cva",
+      "tailwind-merge",
+      "prettier2",
+      "prettier2/parser-html",
+      "@storybook/blocks",
+      "@storybook/theming/create",
+    ],
+  },
+});

package/package.json

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

package/.storybook/configs/main.config.js

@@ -1,20 +0,0 @@
-import vuelessDocsTheme from "../themes/vueless.docs.theme.js";
-import colors from "tailwindcss/colors.js";
-
-export const docs = {
-  theme: vuelessDocsTheme,
-  source: {
-    language: "html",
-  },
-};
-
-export const backgrounds = {
-  default: "white",
-  values: [
-    { name: "white", value: colors.white },
-    { name: "light", value: colors.gray[50] },
-    { name: "dark", value: colors.gray[900] },
-  ],
-};
-
-export const layout = "fullscreen";

package/.storybook/index.pcss

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;