Prefix support

.changeset/config.json

@@ -7,5 +7,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["storybook", "web"]
+  "ignore": ["@/storybook", "@/web"]
 }

.github/actions/setup/action.yml

@@ -5,9 +5,9 @@ runs:
   using: composite
   steps:
     - name: Setup Bun
-      uses: oven-sh/setup-bun@v1
+      uses: oven-sh/setup-bun@v2
       with:
-        bun-version: 1.1.21
+        bun-version: 1.1.43
 
     - name: Setup Node
       uses: actions/setup-node@v4

.vscode/extensions.json

@@ -1,11 +1,11 @@
 {
   "recommendations": [
-    "oven.bun-vscode",
-    "esbenp.prettier-vscode",
-    "dbaeumer.vscode-eslint",
-    "yoavbls.pretty-ts-errors",
     "bradlc.vscode-tailwindcss",
+    "DavidAnson.vscode-markdownlint",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "oven.bun-vscode",
     "unifiedjs.vscode-mdx",
-    "DavidAnson.vscode-markdownlint"
+    "yoavbls.pretty-ts-errors"
   ]
 }

.vscode/settings.json

@@ -4,15 +4,23 @@
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
-  "eslint.workingDirectories": ["apps/web", "packages/ui"],
+  "editor.quickSuggestions": {
+    "strings": "on"
+  },
+  "eslint.workingDirectories": [{ "mode": "auto" }],
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
   "tailwindCSS.classAttributes": ["class", "className", "theme"],
   "tailwindCSS.experimental.classRegex": [
     ["twMerge\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
-    ["createTheme\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+    ["createTheme(?:<\\w+>)?\\s*\\(([^)]*)\\)", "{?\\s?[\\w].*:\\s*?[\"'`]([^\"'`]*).*?,?\\s?}?"]
   ],
   "tailwindCSS.experimental.configFile": {
+    "apps/storybook/tailwind.config.cjs": "apps/storybook/**",
     "apps/web/tailwind.config.cjs": "apps/web/**",
     "packages/ui/tailwind.config.cjs": "packages/ui/**"
   },
+  "typescript.preferences.preferTypeOnlyAutoImports": true,
   "typescript.tsdk": "node_modules/typescript/lib"
 }

apps/storybook/.eslintrc.cjs

@@ -0,0 +1,44 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    commonjs: true,
+    es2021: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:tailwindcss/recommended",
+    "prettier",
+  ],
+  overrides: [
+    {
+      files: ["**/*.{ts,tsx}"],
+      plugins: ["@typescript-eslint"],
+      parser: "@typescript-eslint/parser",
+      extends: ["plugin:@typescript-eslint/recommended"],
+    },
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+  },
+  plugins: ["react-refresh"],
+  settings: {
+    react: {
+      version: "detect",
+    },
+    tailwindcss: {
+      callees: ["twMerge", "createTheme"],
+      classRegex: "^(class(Name)|theme)?$",
+    },
+  },
+  ignorePatterns: ["storybook-static"],
+  rules: {
+    "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+    "react/no-unescaped-entities": "off",
+    "react/prop-types": "off",
+  },
+};

apps/storybook/.storybook/main.ts

@@ -10,7 +10,7 @@ function getAbsolutePath(value: string): any {
   return dirname(require.resolve(join(value, "package.json")));
 }
 const config: StorybookConfig = {
-  stories: ["../../../packages/ui/**/*.stories.@(ts|tsx)"],
+  stories: ["../src/**/*.stories.{ts,tsx}"],
   addons: [
     getAbsolutePath("@storybook/addon-links"),
     getAbsolutePath("@storybook/addon-essentials"),

apps/storybook/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "storybook",
+  "name": "@/storybook",
   "version": "0.0.0",
   "private": true,
   "scripts": {
@@ -8,11 +8,15 @@
     "dev": "storybook dev -p 6006",
     "format": "prettier . --write",
     "format:check": "prettier . --check",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "flowbite-react": "workspace:*",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "react-icons": "5.2.1"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "8.1.10",
@@ -25,12 +29,18 @@
     "@storybook/test": "8.1.10",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
-    "@vitejs/plugin-react": "4.3.1",
+    "@typescript-eslint/eslint-plugin": "8.19.1",
+    "@typescript-eslint/parser": "8.19.1",
+    "@vitejs/plugin-react": "4.3.4",
     "autoprefixer": "10.4.20",
-    "postcss": "8.4.41",
+    "eslint-plugin-react": "7.37.3",
+    "eslint-plugin-react-refresh": "0.4.16",
+    "eslint-plugin-storybook": "0.11.1",
+    "eslint-plugin-vitest": "0.5.4",
+    "postcss": "8.4.49",
     "storybook": "8.1.10",
-    "tailwindcss": "3.4.7",
-    "typescript": "5.5.4",
-    "vite": "5.3.5"
+    "tailwindcss": "3.4.17",
+    "typescript": "5.6.3",
+    "vite": "6.0.7"
   }
 }

apps/storybook/postcss.config.cjs

@@ -1,3 +1,4 @@
+/** @type {import('postcss-load-config').Config} */
 module.exports = {
   plugins: {
     tailwindcss: {},

apps/storybook/prettier.config.cjs

@@ -0,0 +1,10 @@
+const rootPrettier = require("../../prettier.config.cjs");
+
+/** @type {import('prettier').Config} */
+module.exports = {
+  ...rootPrettier,
+  plugins: [...rootPrettier.plugins, "prettier-plugin-tailwindcss"],
+  // tailwindcss
+  tailwindAttributes: ["theme"],
+  tailwindFunctions: ["twMerge", "createTheme"],
+};

packages/ui/src/components/Accordion/Accordion.stories.tsx → apps/storybook/src/Accordion.stories.tsx

@@ -1,8 +1,6 @@
 import type { Meta, StoryFn } from "@storybook/react";
-import type { ComponentProps, FC } from "react";
+import { Accordion, AccordionContent, AccordionPanel, AccordionTitle, type AccordionProps } from "flowbite-react";
 import { HiChevronDown, HiOutlineArrowCircleDown } from "react-icons/hi";
-import type { AccordionProps } from "./Accordion";
-import { Accordion } from "./Accordion";
 
 export default {
   title: "Components/Accordion",
@@ -13,13 +11,11 @@ export default {
   },
 } as Meta;
 
-const icon: FC<ComponentProps<"svg">> = HiChevronDown;
-
 const Template: StoryFn<AccordionProps> = (args) => (
-  <Accordion arrowIcon={icon} {...args}>
-    <Accordion.Panel>
-      <Accordion.Title>What is Flowbite?</Accordion.Title>
-      <Accordion.Content>
+  <Accordion arrowIcon={HiChevronDown} {...args}>
+    <AccordionPanel>
+      <AccordionTitle>What is Flowbite?</AccordionTitle>
+      <AccordionContent>
         <p className="mb-2 text-gray-500 dark:text-gray-400">
           Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons,
           dropdowns, modals, navbars, and more.
@@ -34,11 +30,11 @@ const Template: StoryFn<AccordionProps> = (args) => (
           </a>
           &nbsp;and start developing websites even faster with components on top of Tailwind CSS.
         </p>
-      </Accordion.Content>
-    </Accordion.Panel>
-    <Accordion.Panel>
-      <Accordion.Title>Is there a Figma file available?</Accordion.Title>
-      <Accordion.Content>
+      </AccordionContent>
+    </AccordionPanel>
+    <AccordionPanel>
+      <AccordionTitle>Is there a Figma file available?</AccordionTitle>
+      <AccordionContent>
         <p className="mb-2 text-gray-500 dark:text-gray-400">
           Flowbite is first conceptualized and designed using the Figma software so everything you see in the library
           has a design equivalent in our Figma file.
@@ -50,11 +46,11 @@ const Template: StoryFn<AccordionProps> = (args) => (
           </a>
           &nbsp;based on the utility classes from Tailwind CSS and components from Flowbite.
         </p>
-      </Accordion.Content>
-    </Accordion.Panel>
-    <Accordion.Panel>
-      <Accordion.Title>What are the differences between Flowbite and Tailwind UI?</Accordion.Title>
-      <Accordion.Content>
+      </AccordionContent>
+    </AccordionPanel>
+    <AccordionPanel>
+      <AccordionTitle>What are the differences between Flowbite and Tailwind UI?</AccordionTitle>
+      <AccordionContent>
         <p className="mb-2 text-gray-500 dark:text-gray-400">
           The main difference is that the core components from Flowbite are open source under the MIT license, whereas
           Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone
@@ -81,8 +77,8 @@ const Template: StoryFn<AccordionProps> = (args) => (
             </a>
           </li>
         </ul>
-      </Accordion.Content>
-    </Accordion.Panel>
+      </AccordionContent>
+    </AccordionPanel>
   </Accordion>
 );
 

packages/ui/src/components/Alert/Alert.stories.tsx → apps/storybook/src/Alert.stories.tsx

@@ -1,15 +1,14 @@
 import type { Meta, StoryFn } from "@storybook/react";
+import type { AlertProps } from "flowbite-react";
+import { Alert, alertTheme } from "flowbite-react";
 import { HiEye, HiInformationCircle } from "react-icons/hi";
-import { theme } from "../../theme";
-import type { AlertProps } from "./Alert";
-import { Alert } from "./Alert";
 
 export default {
   title: "Components/Alert",
   component: Alert,
   argTypes: {
     color: {
-      options: Object.keys(theme.alert.color),
+      options: Object.keys(alertTheme.color),
       control: { type: "inline-radio" },
     },
   },

packages/ui/src/components/Avatar/Avatar.stories.tsx → apps/storybook/src/Avatar.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryFn } from "@storybook/react";
-import type { AvatarProps } from "./Avatar";
-import { Avatar } from "./Avatar";
+import type { AvatarProps } from "flowbite-react";
+import { Avatar } from "flowbite-react";
 
 export default {
   title: "Components/Avatar",

packages/ui/src/components/Avatar/AvatarGroup.stories.tsx → apps/storybook/src/AvatarGroup.stories.tsx

@@ -1,20 +1,20 @@
 import type { Meta, StoryFn } from "@storybook/react";
-import { Avatar } from "./Avatar";
-import type { AvatarGroupProps } from "./AvatarGroup";
+import type { AvatarGroupProps } from "flowbite-react";
+import { Avatar, AvatarGroup, AvatarGroupCounter } from "flowbite-react";
 
 export default {
   title: "Components/Avatar",
-  component: Avatar.Group,
+  component: AvatarGroup,
 } as Meta;
 
 const Template: StoryFn<AvatarGroupProps> = (args) => (
-  <Avatar.Group {...args}>
+  <AvatarGroup {...args}>
     <Avatar img="https://flowbite.com/docs/images/people/profile-picture-1.jpg" rounded stacked />
     <Avatar img="https://flowbite.com/docs/images/people/profile-picture-2.jpg" rounded stacked />
     <Avatar img="https://flowbite.com/docs/images/people/profile-picture-3.jpg" rounded stacked />
     <Avatar img="https://flowbite.com/docs/images/people/profile-picture-4.jpg" rounded stacked />
-    <Avatar.Counter total={99} href="#" />
-  </Avatar.Group>
+    <AvatarGroupCounter total={99} href="#" />
+  </AvatarGroup>
 );
 
 export const DefaultAvatarGroup = Template.bind({});

packages/ui/src/components/Badge/Badge.stories.tsx → apps/storybook/src/Badge.stories.tsx

@@ -1,19 +1,18 @@
 import type { Meta, StoryFn } from "@storybook/react";
+import type { BadgeProps } from "flowbite-react";
+import { Badge, badgeTheme } from "flowbite-react";
 import { HiCheck } from "react-icons/hi";
-import { theme } from "../../theme";
-import type { BadgeProps } from "./Badge";
-import { Badge } from "./Badge";
 
 export default {
   title: "Components/Badge",
   component: Badge,
   argTypes: {
     color: {
-      options: Object.keys(theme.badge.root.color),
+      options: Object.keys(badgeTheme.root.color),
       control: { type: "inline-radio" },
     },
     size: {
-      options: Object.keys(theme.badge.root.size),
+      options: Object.keys(badgeTheme.root.size),
       control: { type: "inline-radio" },
     },
   },
@@ -45,10 +44,3 @@ BadgeOnlyIcon.args = {
   color: "green",
   icon: HiCheck,
 };
-
-export const BadgeAsLink = Template.bind({});
-BadgeAsLink.storyName = "As link";
-BadgeAsLink.args = {
-  href: "/badges",
-  children: "Read more →",
-};

packages/ui/src/components/Banner/Banner.stories.tsx → apps/storybook/src/Banner.stories.tsx

@@ -1,15 +1,15 @@
 import type { Meta, StoryFn } from "@storybook/react";
+import type { BannerProps } from "flowbite-react";
+import { Banner, BannerCollapseButton } from "flowbite-react";
 import { HiX } from "react-icons/hi";
 import { MdAnnouncement } from "react-icons/md";
-import type { BannerComponentProps } from "./Banner";
-import { Banner } from "./Banner";
 
 export default {
   title: "Components/Banner",
   component: Banner,
 } as Meta;
 
-const Template: StoryFn<BannerComponentProps> = (args) => <Banner {...args} />;
+const Template: StoryFn<BannerProps> = (args) => <Banner {...args} />;
 
 export const DefaultBanner = Template.bind({});
 DefaultBanner.storyName = "Default";
@@ -30,9 +30,9 @@ DefaultBanner.args = {
           </span>
         </p>
       </div>
-      <Banner.CollapseButton color="gray" className="border-0 bg-transparent px-0">
+      <BannerCollapseButton color="gray" className="border-0 bg-transparent px-0">
         <HiX className="size-4" />
-      </Banner.CollapseButton>
+      </BannerCollapseButton>
     </div>
   ),
 };

packages/ui/src/components/Blockquote/Blockquote.stories.tsx → apps/storybook/src/Blockquote.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryFn } from "@storybook/react";
-import type { BlockquoteProps } from "./Blockquote";
-import { Blockquote } from "./Blockquote";
+import type { BlockquoteProps } from "flowbite-react";
+import { Blockquote } from "flowbite-react";
 
 export default {
   title: "Components/Blockquote",