removed icons and added fonts

Author: Oba-One

.storybook/main.ts

@@ -4,6 +4,7 @@ const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     "@storybook/addon-onboarding",
+    "@storybook/addon-designs", // 👈 Addon is registered here
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
@@ -12,5 +13,7 @@ const config: StorybookConfig = {
     name: "@storybook/react-vite",
     options: {},
   },
+  staticDirs: ["../public"],
 };
+
 export default config;

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from "@storybook/manager-api";
+import { themes } from "@storybook/theming";
+
+addons.setConfig({
+  theme: themes.dark,
+});

.storybook/preview-head.html

@@ -0,0 +1,8 @@
+<link rel="preload" href="/fonts/my-font.woff2" />
+
+<!-- <script src="https://use.typekit.net/xxxyyy.js"></script>
+<script>
+  try {
+    Typekit.load();
+  } catch (e) {}
+</script> -->

.storybook/preview.ts

@@ -8,7 +8,12 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    docs: {
+      toc: true, // 👈 Enables the table of contents
+    },
   },
+  //👇 Enables auto-generated documentation for all stories
+  tags: ["autodocs"],
 };
 
 export default preview;

.storybook/theme.ts

@@ -0,0 +1,40 @@
+import { create } from "@storybook/theming/create";
+
+export default create({
+  base: "light",
+  // Typography
+  fontBase: '"Open Sans", sans-serif',
+  fontCode: "monospace",
+
+  brandTitle: "My custom Storybook",
+  brandUrl: "https://example.com",
+  brandImage: "https://storybook.js.org/images/placeholders/350x150.png",
+  brandTarget: "_self",
+
+  //
+  colorPrimary: "#3A10E5",
+  colorSecondary: "#585C6D",
+
+  // UI
+  appBg: "#ffffff",
+  appContentBg: "#ffffff",
+  appPreviewBg: "#ffffff",
+  appBorderColor: "#585C6D",
+  appBorderRadius: 4,
+
+  // Text colors
+  textColor: "#10162F",
+  textInverseColor: "#ffffff",
+
+  // Toolbar default and active colors
+  barTextColor: "#9E9E9E",
+  barSelectedColor: "#585C6D",
+  barHoverColor: "#585C6D",
+  barBg: "#ffffff",
+
+  // Form colors
+  inputBg: "#ffffff",
+  inputBorder: "#10162F",
+  inputTextColor: "#10162F",
+  inputBorderRadius: 2,
+});

chromatic.config.json

@@ -0,0 +1,5 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:673a99398759c048f14263a5",
+  "zip": true
+}

package.json

@@ -34,13 +34,16 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",
     "@eslint/js": "^9.9.0",
+    "@storybook/addon-designs": "^8.0.4",
     "@storybook/addon-essentials": "^8.4.4",
     "@storybook/addon-interactions": "^8.4.4",
     "@storybook/addon-onboarding": "^8.4.4",
     "@storybook/blocks": "^8.4.4",
+    "@storybook/manager-api": "^8.4.4",
     "@storybook/react": "^8.4.4",
     "@storybook/react-vite": "^8.4.4",
     "@storybook/test": "^8.4.4",
+    "@storybook/theming": "^8.4.4",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "0.5.15",
     "@types/react": "^18.3.3",