@vueless/storybook 0.0.4 → 0.0.6

package/.eslintignore

@@ -0,0 +1,5 @@
+/node_modules
+/dist
+
+# allow to format hidden folders
+!/.storybook

package/.eslintrc.cjs

@@ -0,0 +1,34 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    browser: true,
+    es2020: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:prettier/recommended",
+  ],
+  rules: {
+    "no-console": "warn",
+    "no-debugger": "warn",
+    "arrow-parens": ["error", "always"],
+    curly: ["error", "multi-line"],
+    "padding-line-between-statements": [
+      "error",
+      { blankLine: "always", prev: ["const", "let", "var"], next: "*" },
+      { blankLine: "any", prev: ["const", "let", "var"], next: ["const", "let", "var"] },
+      { blankLine: "always", prev: "directive", next: "*" },
+      { blankLine: "any", prev: "directive", next: "directive" },
+      { blankLine: "always", prev: "block-like", next: "*" },
+      { blankLine: "always", prev: "*", next: "block-like" },
+      { blankLine: "always", prev: "*", next: "return" },
+    ],
+    "prettier/prettier": ["warn", { printWidth: 100, tabWidth: 2 }],
+  },
+  parserOptions: {
+    module: "esnext",
+    sourceType: "module",
+    ecmaVersion: "latest",
+  },
+};

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

@@ -1,5 +1,5 @@
 import vuelessDocsTheme from "../themes/vueless.docs.theme";
-import colors from "tailwindcss/colors";
+import colors from "tailwindcss/colors.js";
 
 export const docs = {
   theme: vuelessDocsTheme,

package/.storybook/index.pcss

@@ -1,5 +1,3 @@
-/* Common global styles */
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

package/.storybook/main.js

@@ -1,11 +1,6 @@
 /** @type { import('@storybook/vue3-vite').StorybookConfig } */
 export default {
-  stories: [
-    "../node_modules/vueless/**/*.stories.@(js|jsx|ts|tsx)",
-    "../node_modules/vueless/**/*.@(mdx)",
-    // TODO: Remove it later
-    "../.vueless/**/*.stories.@(js|jsx|ts|tsx)",
-    "../.vueless/**/*.@(mdx)"],
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)", "../src/**/*.@(mdx)"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",

package/.storybook/preview.js

@@ -3,14 +3,13 @@ import { backgrounds, docs, layout } from "./configs/main.config";
 import { vue3SourceDecorator } from "./decorators/vue3SourceDecorator";
 
 // Vue plugins
-import { createStore } from "vuex"; // TODO: remove it later
-import { createRouter, createWebHistory } from "vue-router";
-import NotifyServiceDefault from "vueless/ui.notify/services"; // TODO: move to UI components
+import { createStore } from "vuex";
+import NotifyServiceDefault from "vueless/ui.notify/services";
 
 // Tailwind styles
 import "./index.pcss";
 
-// Common stores TODO: move to UI components
+// Common stores
 import loader from "vueless/ui.loader-rendering/store";
 import loaderTop from "vueless/ui.loader-top/store";
 import breakpoint from "vueless/ui.viewport/store";
@@ -20,16 +19,9 @@ const store = createStore({
   modules: { loader, loaderTop, breakpoint },
 });
 
-// Create router instance
-const router = createRouter({
-  history: createWebHistory("/"),
-  routes: [{ path: "/:pathMatch(.*)*", component: () => import("vueless/ui.container-page") }],
-});
-
 // Create storybook app instance
 const storybookApp = (app) => {
   app.use(store);
-  app.use(router);
   app.use(new NotifyServiceDefault().notifyInstance);
 };
 
@@ -44,7 +36,10 @@ export default {
     docs,
     backgrounds,
     options: {
-      storySort: (a, b) => (a.id === b.id ? 0 : a.name === "Docs" && a.id.localeCompare(b.id, undefined, { numeric: true })),
+      storySort: (a, b) =>
+        a.id === b.id
+          ? 0
+          : a.name === "Docs" && a.id.localeCompare(b.id, undefined, { numeric: true }),
     },
   },
 };

package/.storybook/themes/vueless.docs.theme.js

@@ -1,5 +1,5 @@
 import { create } from "@storybook/theming/create";
-import colors from "tailwindcss/colors";
+import colors from "tailwindcss/colors.js";
 
 export default create({
   base: "light",

package/.storybook/themes/vueless.theme.js

@@ -1,5 +1,5 @@
 import { create } from "@storybook/theming/create";
-import colors from "tailwindcss/colors";
+import colors from "tailwindcss/colors.js";
 
 export default create({
   base: "light",
@@ -9,7 +9,7 @@ export default create({
 
   brandTitle: "Vueless UI",
   brandUrl: "https://vueless.com",
-  brandImage: "/static/storybook/vueless-logo.png",
+  brandImage: "/images/logo.png",
   brandTarget: "_blank",
 
   // Main colors

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueless/storybook",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "The package simplifies Storybook configuration for Vueless UI library.",
   "homepage": "https://vueless.com",
   "author": "Johnny Grid",
@@ -35,8 +35,12 @@
     "prettier2": "npm:prettier@2.8.8",
     "storybook": "^8.0.0"
   },
-  "peerDependencies": {
-    "tailwindcss": "^3.3.4",
-    "vueless": "^0.0.3"
+  "devDependencies": {
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "prettier": "^3.2.5",
+    "prettier-eslint": "^16.3.0"
   }
 }