Merge pull request #23 from tuzkituan/dev/select

Dev/select

.eslintrc.cjs

@@ -8,6 +8,7 @@ module.exports = {
     "plugin:react/recommended",
     "plugin:react/jsx-runtime",
     "plugin:react-hooks/recommended",
+    "plugin:storybook/recommended"
   ],
   ignorePatterns: ["dist", ".eslintrc.cjs"],
   parser: "@typescript-eslint/parser",

.storybook/YourTheme.ts

@@ -1,11 +1,9 @@
-// .storybook/YourTheme.js
-
 import { create } from "@storybook/theming/create";
 
 export default create({
-  base: "light",
-  brandTitle: "ZENI-UI BY LEWIS",
+  base: "dark",
+  brandTitle: "ZENI-UI",
   brandTarget: "_self",
-  appBg: "#F6F4EB",
+  // appBg: "#F6F4EB",
   appBorderRadius: 8,
 });

.storybook/main.ts

@@ -8,6 +8,7 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@storybook/addon-onboarding",
     "@storybook/addon-interactions",
+    "storybook-dark-mode",
   ],
   framework: {
     name: "@storybook/react-vite",
@@ -16,9 +17,7 @@ const config: StorybookConfig = {
   docs: {
     autodocs: "tag",
   },
-  core: {
-    builder: "@storybook/builder-vite", // 👈 The builder enabled here.
-  },
+  core: {},
   async viteFinal(config, { configType }) {
     // if (configType === 'DEVELOPMENT') {
     //   // Your development configuration goes here

.storybook/preview.tsx

@@ -2,6 +2,7 @@ import type { Preview } from "@storybook/react";
 import "../lib/customization/global.css";
 import { ZeniProvider } from "../lib/main";
 import React from "react";
+import { themes } from "@storybook/theming";
 
 const preview: Preview = {
   decorators: [
@@ -19,6 +20,13 @@ const preview: Preview = {
         date: /Date$/,
       },
     },
+    darkMode: {
+      current: "dark",
+      dark: themes.dark,
+      light: themes.light,
+      stylePreview: true,
+
+    },
   },
 };
 

lib/components/number-input/number-input.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { NumberInput } from "./number-input";
 
 const meta = {
-  title: "INPUTS/NumberInput",
+  title: "FORMS/NumberInput",
   component: NumberInput,
   tags: ["autodocs"],
   argTypes: {

lib/components/select/select.stories.tsx

@@ -6,7 +6,12 @@ const meta = {
   title: "FORMS/Select",
   component: Select,
   tags: ["autodocs"],
-  argTypes: {},
+  argTypes: {
+    placement: {
+      options: ["top", "bottom"],
+      control: "radio",
+    },
+  },
 } satisfies Meta<typeof Select>;
 
 export default meta;
@@ -19,6 +24,9 @@ export const Primary: Story = {
     isClearable: true,
     isSearchable: false,
     // leftElement: <MapPinLine />,
+    placeholder: "This is the placeholder",
+    placement: "bottom",
+    isMultiple: false,
     options: [
       {
         label: "This is a really long option label, you see?",
@@ -31,11 +39,40 @@ export const Primary: Story = {
       {
         label: "Option 3",
         value: 3,
+        isDisabled: true,
       },
       {
         label: "Option 4",
         value: 4,
       },
+      {
+        label: "Option 5",
+        value: 5,
+      },
+      {
+        label: "Option 6",
+        value: 6,
+      },
+      {
+        label: "Option 7",
+        value: 7,
+      },
+      {
+        label: "Option 8",
+        value: 8,
+      },
+      {
+        label: "Option 9",
+        value: 9,
+      },
+      {
+        label: "Option 10",
+        value: 10,
+      },
+      {
+        label: "Option 11",
+        value: 11,
+      },
     ],
   },
 };