Upgrade Storybook to 9.x

.changeset/neat-things-lie.md

@@ -0,0 +1,5 @@
+---
+"flowbite-react": patch
+---
+
+up packages

apps/storybook/.storybook/main.ts

@@ -11,18 +11,16 @@ function getAbsolutePath(value: string): any {
 }
 const config: StorybookConfig = {
   stories: ["../src/**/*.stories.{ts,tsx}"],
+
   addons: [
     getAbsolutePath("@storybook/addon-links"),
-    getAbsolutePath("@storybook/addon-essentials"),
-    getAbsolutePath("@storybook/addon-interactions"),
     getAbsolutePath("@storybook/addon-themes"),
+    getAbsolutePath("@storybook/addon-docs")
   ],
+
   framework: {
     name: getAbsolutePath("@storybook/react-vite"),
     options: {},
-  },
-  docs: {
-    autodocs: "tag",
-  },
+  }
 };
 export default config;

apps/storybook/.storybook/preview.tsx

@@ -1,5 +1,5 @@
 import { withThemeByClassName } from "@storybook/addon-themes";
-import type { Decorator, Preview } from "@storybook/react";
+import type { Decorator, Preview } from "@storybook/react-vite";
 import React from "react";
 import { ThemeInit } from "../.flowbite-react/init";
 

apps/storybook/package.json

@@ -19,15 +19,10 @@
     "react-icons": "5.2.1"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "8.1.10",
-    "@storybook/addon-essentials": "8.1.10",
-    "@storybook/addon-interactions": "8.1.10",
-    "@storybook/addon-links": "8.1.10",
-    "@storybook/addon-themes": "8.1.10",
-    "@storybook/blocks": "8.1.10",
-    "@storybook/react": "8.1.10",
-    "@storybook/react-vite": "8.1.10",
-    "@storybook/test": "8.1.10",
+    "@storybook/addon-docs": "9.1.15",
+    "@storybook/addon-links": "9.1.15",
+    "@storybook/addon-themes": "9.1.15",
+    "@storybook/react-vite": "9.1.15",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@typescript-eslint/eslint-plugin": "8.19.1",
@@ -36,10 +31,10 @@
     "autoprefixer": "10.4.20",
     "eslint-plugin-react": "7.37.3",
     "eslint-plugin-react-refresh": "0.4.16",
-    "eslint-plugin-storybook": "0.11.1",
+    "eslint-plugin-storybook": "9.1.15",
     "eslint-plugin-vitest": "0.5.4",
     "postcss": "8.4.49",
-    "storybook": "8.1.10",
+    "storybook": "9.1.15",
     "tailwindcss": "3.4.17",
     "typescript": "5.6.3",
     "vite": "6.0.7"

apps/storybook/src/Accordion.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import { Accordion, AccordionContent, AccordionPanel, AccordionTitle, type AccordionProps } from "flowbite-react";
 import { HiChevronDown, HiOutlineArrowCircleDown } from "react-icons/hi";
 

apps/storybook/src/Alert.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { AlertProps } from "flowbite-react";
 import { Alert, alertTheme } from "flowbite-react";
 import { HiEye, HiInformationCircle } from "react-icons/hi";

apps/storybook/src/Avatar.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { AvatarProps } from "flowbite-react";
 import { Avatar } from "flowbite-react";
 

apps/storybook/src/AvatarGroup.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { AvatarGroupProps } from "flowbite-react";
 import { Avatar, AvatarGroup, AvatarGroupCounter } from "flowbite-react";
 

apps/storybook/src/Badge.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { BadgeProps } from "flowbite-react";
 import { Badge, badgeTheme } from "flowbite-react";
 import { HiCheck } from "react-icons/hi";

apps/storybook/src/Banner.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { BannerProps } from "flowbite-react";
 import { Banner, BannerCollapseButton } from "flowbite-react";
 import { HiX } from "react-icons/hi";

apps/storybook/src/Blockquote.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { BlockquoteProps } from "flowbite-react";
 import { Blockquote } from "flowbite-react";
 

apps/storybook/src/Breadcrumb.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { BreadcrumbProps } from "flowbite-react";
 import { Breadcrumb, BreadcrumbItem } from "flowbite-react";
 import { HiHome } from "react-icons/hi";

apps/storybook/src/Button.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { ButtonProps } from "flowbite-react";
 import { Button, buttonTheme } from "flowbite-react";
 

apps/storybook/src/ButtonGroup.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { ButtonGroupProps } from "flowbite-react";
 import { Button, ButtonGroup } from "flowbite-react";
 

apps/storybook/src/Card.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { CardProps } from "flowbite-react";
 import { Card } from "flowbite-react";
 

apps/storybook/src/Carousel.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { CarouselProps } from "flowbite-react";
 import { Carousel } from "flowbite-react";
 

apps/storybook/src/Checkbox.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { CheckboxProps } from "flowbite-react";
 import { Checkbox } from "flowbite-react";
 

apps/storybook/src/Clipboard.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { ClipboardProps, ClipboardWithIconProps, ClipboardWithIconTextProps } from "flowbite-react";
 import { Clipboard, ClipboardWithIcon, ClipboardWithIconText } from "flowbite-react";
 

apps/storybook/src/DarkThemeToggle.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import { DarkThemeToggle, ThemeProvider } from "flowbite-react";
 
 export default {

apps/storybook/src/Datepicker.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { DatepickerProps } from "flowbite-react";
 import { Datepicker, getFirstDateInRange, Views, WeekStart } from "flowbite-react";
 import { useEffect, useState } from "react";

apps/storybook/src/Drawer.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import { Drawer, DrawerHeader, DrawerItems, type DrawerProps } from "flowbite-react";
 
 export default {

apps/storybook/src/Dropdown.stories.tsx

@@ -1,5 +1,5 @@
-import { action } from "@storybook/addon-actions";
-import type { Meta, StoryFn } from "@storybook/react";
+import { action } from "storybook/actions";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { DropdownProps } from "flowbite-react";
 import { Dropdown, DropdownDivider, DropdownHeader, DropdownItem } from "flowbite-react";
 

apps/storybook/src/FileInput.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { FileInputProps } from "flowbite-react";
 import { FileInput } from "flowbite-react";
 

apps/storybook/src/FloatingLabel.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import { FloatingLabel, type FloatingLabelProps } from "flowbite-react";
 
 export default {

apps/storybook/src/Footer.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import {
   Footer,
   FooterBrand,

apps/storybook/src/HR.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { HRIconProps, HRProps, HRSquareProps, HRTextProps, HRTrimmedProps } from "flowbite-react";
 import { HR, HRIcon, HRSquare, HRText, HRTrimmed } from "flowbite-react";
 

apps/storybook/src/Kbd.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { KbdProps } from "flowbite-react";
 import { Kbd } from "flowbite-react";
 import { MdKeyboardArrowDown, MdKeyboardCommandKey } from "react-icons/md";

apps/storybook/src/Label.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { LabelProps } from "flowbite-react";
 import { Label } from "flowbite-react";
 

apps/storybook/src/List.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import { Avatar, List, ListItem } from "flowbite-react";
 import type { ListProps } from "flowbite-react";
 import { HiCheckCircle } from "react-icons/hi";

apps/storybook/src/ListGroup.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { ListGroupProps } from "flowbite-react";
 import { ListGroup, ListGroupItem } from "flowbite-react";
 import { HiCloudDownload, HiInbox, HiOutlineAdjustments, HiUserCircle } from "react-icons/hi";

apps/storybook/src/MegaMenu.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import {
   Button,
   MegaMenu,

apps/storybook/src/Modal.stories.tsx

@@ -1,5 +1,5 @@
-import { action } from "@storybook/addon-actions";
-import type { Meta, StoryFn } from "@storybook/react";
+import { action } from "storybook/actions";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import { Button, Checkbox, Label, Modal, ModalBody, ModalFooter, ModalHeader, TextInput } from "flowbite-react";
 import type { ModalProps } from "flowbite-react";
 import { HiOutlineExclamationCircle } from "react-icons/hi";

apps/storybook/src/Navbar.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import {
   Avatar,
   Button,

apps/storybook/src/Pagination.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { PaginationProps } from "flowbite-react";
 import { DefaultPaginationProps, Pagination, TablePaginationProps } from "flowbite-react";
 import { useEffect, useState } from "react";

apps/storybook/src/Popover.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import { Button, Popover, type PopoverProps } from "flowbite-react";
 import { useState } from "react";
 

apps/storybook/src/Progress.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { ProgressProps } from "flowbite-react";
 import { Progress } from "flowbite-react";
 

apps/storybook/src/Radio.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { RadioProps } from "flowbite-react";
 import { Radio } from "flowbite-react";
 

apps/storybook/src/RangeSlider.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { RangeSliderProps } from "flowbite-react";
 import { RangeSlider, rangeSliderTheme } from "flowbite-react";
 

apps/storybook/src/Rating.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { RatingProps } from "flowbite-react";
 import { Rating, RatingAdvanced, RatingStar } from "flowbite-react";
 

apps/storybook/src/Select.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { SelectProps } from "flowbite-react";
 import { Select } from "flowbite-react";
 import { BsFlagFill } from "react-icons/bs";

apps/storybook/src/Sidebar.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import {
   Badge,
   Button,

apps/storybook/src/Spinner.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import { Button, Spinner } from "flowbite-react";
 
 export default {

apps/storybook/src/Table.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { TableProps } from "flowbite-react";
 import { Table, TableBody, TableCell, TableHead, TableHeadCell, TableRow } from "flowbite-react";
 

apps/storybook/src/Tabs.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta } from "@storybook/react";
+import type { Meta } from "@storybook/react-vite";
 import type { TabsProps } from "flowbite-react";
 import { TabItem, Tabs } from "flowbite-react";
 import { HiAdjustments, HiClipboardList, HiUserCircle } from "react-icons/hi";

apps/storybook/src/TextInput.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { TextInputProps } from "flowbite-react";
 import { TextInput } from "flowbite-react";
 

apps/storybook/src/Textarea.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { TextareaProps } from "flowbite-react";
 import { Textarea } from "flowbite-react";
 

apps/storybook/src/Timeline.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { TimelineProps } from "flowbite-react";
 import {
   Timeline,

apps/storybook/src/Toast.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { ToastProps } from "flowbite-react";
 import { Toast, ToastToggle } from "flowbite-react";
 import { HiFire } from "react-icons/hi";

apps/storybook/src/ToggleSwitch.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import type { ToggleSwitchProps } from "flowbite-react";
 import { ToggleSwitch, toggleSwitchTheme } from "flowbite-react";
 import { useState } from "react";

apps/storybook/src/Tooltip.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta, StoryFn } from "@storybook/react-vite";
 import { Button, Tooltip } from "flowbite-react";
 import type { TooltipProps } from "flowbite-react";