adnbn-ui 0.0.1 → 0.1.0

package/.prettierignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+build/

package/.prettierrc

@@ -0,0 +1,28 @@
+{
+    "semi": true,
+    "trailingComma": "es5",
+    "singleQuote": false,
+    "printWidth": 120,
+    "tabWidth": 4,
+    "useTabs": false,
+    "bracketSpacing": false,
+    "arrowParens": "avoid",
+    "endOfLine": "lf",
+    "overrides": [
+        {
+            "files": "*.json",
+            "options": {
+                "tabWidth": 2,
+                "bracketSpacing": true,
+                "bracketSameLine": false,
+                "printWidth": 40
+            }
+        },
+        {
+            "files": "*.scss",
+            "options": {
+                "tabWidth": 2
+            }
+        }
+    ]
+}

package/.storybook/main.ts

@@ -0,0 +1,22 @@
+import path from "path";
+import {mergeConfig} from "vite";
+import type {StorybookConfig} from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    addons: ["@storybook/addon-essentials"],
+    framework: {
+        name: "@storybook/react-vite",
+        options: {},
+    },
+    viteFinal: config => {
+        return mergeConfig(config, {
+            resolve: {
+                alias: {
+                    "adnbn-ui-config": path.resolve("src", "config", "default.ts"),
+                },
+            },
+        });
+    },
+};
+export default config;

package/.storybook/preview.tsx

@@ -0,0 +1,100 @@
+import React, {useEffect} from "react";
+import type {Preview, StoryContext, StoryFn} from "@storybook/react";
+import {ThemeProvider} from "../src/providers";
+import "./styles/preview.css";
+
+const ThemeDecorator = (Story: StoryFn, context: StoryContext) => {
+    const dir = context.globals.dir || "ltr";
+    const theme = context.globals.theme || "light";
+    const cssVariables = context.globals.cssVariables || "default";
+
+    useEffect(() => {
+        document.documentElement.setAttribute("dir", dir);
+        return () => {
+            document.documentElement.removeAttribute("dir");
+        };
+    }, [dir]);
+
+    useEffect(() => {
+        document.documentElement.setAttribute("theme", theme);
+        return () => {
+            document.documentElement.removeAttribute("theme");
+        };
+    }, [theme]);
+
+    useEffect(() => {
+        if (cssVariables === "default") return;
+
+        const linkElement = document.createElement("link");
+        linkElement.rel = "stylesheet";
+        linkElement.href = "../.storybook/styles/custom.scss";
+        document.head.appendChild(linkElement);
+
+        return () => {
+            document.head.removeChild(linkElement);
+        };
+    }, [cssVariables]);
+
+    return (
+        <ThemeProvider>
+            <div className="story-wrapper">{Story(context.args, context)}</div>
+        </ThemeProvider>
+    );
+};
+
+const globalTypes = {
+    dir: {
+        name: "Direction",
+        description: "Choose direction",
+        defaultValue: "ltr",
+        toolbar: {
+            icon: "transfer",
+            items: [
+                {value: "ltr", title: "Left to right"},
+                {value: "rtl", title: "Right to left"},
+            ],
+            showName: true,
+        },
+    },
+    theme: {
+        name: "Theme",
+        description: "Global theme for components",
+        defaultValue: "light",
+        toolbar: {
+            icon: "star",
+            items: [
+                {value: "light", title: "Light theme"},
+                {value: "dark", title: "Dark theme"},
+            ],
+            showName: true,
+        },
+    },
+    cssVariables: {
+        name: "CSS Variables",
+        description: "Choose CSS variables set",
+        defaultValue: "default",
+        toolbar: {
+            icon: "paintbrush",
+            items: [
+                {value: "default", title: "Default Variables"},
+                {value: "custom", title: "Custom Variables"},
+            ],
+            showName: true,
+        },
+    },
+};
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+    decorators: [ThemeDecorator],
+    globalTypes,
+};
+
+export default preview;

package/.storybook/styles/custom.scss

@@ -0,0 +1,59 @@
+@use "../../src/styles/mixins" as theme;
+
+@include theme.light {
+  --button-height-sm: 20px;
+  --button-height: 25px;
+  --button-height-md: 30px;
+  --button-height-lg: 40px;
+
+  --switch-border-radius: 5px;
+  --switch-width: 40px;
+  --switch-height: 20px;
+  --switch-thumb-width: 20px;
+  --switch-thumb-height: 16px;
+
+  --tooltip-border-radius: 10px;
+  --tooltip-padding: 5px 10px;
+
+  --toast-viewport-padding: 5px;
+
+  /* Common colors */
+  --primary-color: #29a383;
+  --secondary-color: #20573e;
+  --accent-color: #f76b15;
+
+  --bg-primary-color: #f5f6f7;
+
+  --text-primary-color: #111111;
+
+  /* Components colors */
+  --avatar-fallback-bg-color: #ffe7b3;
+  --avatar-fallback-color: #2e2f3b;
+
+  --icon-button-color: #004074;
+  --icon-button-bg-color: #70b8ff;
+  --icon-button-border-color: #c2e6ff;
+  --icon-button-color-hover: #104d87;
+  --icon-button-bg-color-hover: #70b8ff;
+
+  --tooltip-bg-color: #a39073;
+}
+
+@include theme.dark {
+  /* Common colors */
+  --bg-primary-color: #191919;
+
+  --text-primary-color: #b4b4b4;
+
+  /* Components colors */
+  --avatar-fallback-bg-color: #3f2700;
+  --avatar-fallback-color: #f5f6f7;
+
+  --icon-button-color: #0bd8b6;
+  --icon-button-bg-color: #023b37;
+  --icon-button-border-color: #084843;
+  --icon-button-color-hover: #adf0dd;
+  --icon-button-bg-color-hover: #0b3b2c;
+
+  --tooltip-bg-color: #d4b3a5;
+}

package/.storybook/styles/preview.css

@@ -0,0 +1,58 @@
+body {
+    height: 100%;
+    width: 100%;
+    padding: 0 !important;
+}
+
+body.sb-main-padded {
+    height: 100vh;
+}
+
+.docs-story > div {
+    padding: 0;
+    overflow: hidden;
+}
+
+.docs-story .innerZoomElementWrapper > div {
+    width: 100%;
+    border: none !important;
+}
+
+#storybook-root {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/*Custom classes*/
+.story-wrapper {
+    font-family: "Arial", sans-serif;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    padding: 50px 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: var(--bg-primary-color);
+}
+
+.grid-wrapper {
+    display: grid;
+    gap: 25px;
+    justify-content: center;
+    align-items: center;
+}
+
+.item-card {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    justify-content: center;
+    align-items: center;
+}
+
+.item-card__title {
+    color: var(--text-primary-color);
+}

package/.storybook/vitest.setup.ts

@@ -0,0 +1,9 @@
+import {beforeAll} from "vitest";
+import {setProjectAnnotations} from "@storybook/react";
+import * as projectAnnotations from "./preview";
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);