chore: upgrade project

.storybook/main.ts

@@ -3,10 +3,11 @@ import type { StorybookConfig } from "@storybook/react-vite";
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    '@storybook/addon-styling',
+    '@storybook/addon-a11y',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-links',
+    'storybook-dark-mode',
   ],
   typescript: {
     reactDocgen: 'react-docgen-typescript',
@@ -29,7 +30,7 @@ const config: StorybookConfig = {
   refs: {
     'design-system': {
       title: 'NextUI',
-      url: 'https://storiesv2.nextui.org',
+      url: 'https://storybook.nextui.org/',
     },
   },
 };

.storybook/preview.tsx

@@ -1,26 +1,124 @@
-import 'tailwindcss/tailwind.css';
 import React from 'react';
+import { themes } from '@storybook/theming';
 import { NextUIProvider } from '@nextui-org/react';
-import { Preview } from '@storybook/react';
-
-export const decorators = [
-  (Story) => (
-    <NextUIProvider>
-      <Story />
-    </NextUIProvider>
-  ),
+import type { Preview } from '@storybook/react';
+
+import './style.css';
+
+const decorators: Preview['decorators'] = [
+  (Story, {globals: {locale}}) => {
+    const direction =
+      // @ts-ignore
+      locale && new Intl.Locale(locale)?.textInfo?.direction === 'rtl' ? 'rtl' : undefined;
+
+    return (
+      <NextUIProvider locale={locale}>
+        <div className='bg-dark' lang={locale} dir={direction}>
+          <Story />
+        </div>
+      </NextUIProvider>
+    );
+  },
+];
+
+const commonTheme = {
+  brandTitle: 'Fragment UI',
+  brandUrl: 'https://fragment.build',
+  brandTarget: '_self',
+};
+
+const parameters: Preview['parameters'] = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  options: {
+    storySort: {
+      method: 'alphabetical',
+      order: ['Foundations', 'Components'],
+    },
+  },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  darkMode: {
+    current: 'dark',
+    stylePreview: true,
+    darkClass: 'dark',
+    lightClass: 'light',
+    classTarget: 'html',
+    dark: {
+      ...themes.dark,
+      ...commonTheme,
+      appBg: '#161616',
+      barBg: 'black',
+      background: 'black',
+      appContentBg: 'black',
+      appBorderRadius: 14,
+      brandImage: '/dark-logo.svg',
+    },
+    light: {
+      ...themes.light,
+      ...commonTheme,
+      appBorderRadius: 14,
+      brandImage: '/light-logo.svg',
+    },
+  },
+};
+
+const locales = [
+  'ar-AE',
+  'bg-BG',
+  'cs-CZ',
+  'da-DK',
+  'de-DE',
+  'el-GR',
+  'en-US',
+  'es-ES',
+  'et-EE',
+  'fi-FI',
+  'fr-FR',
+  'he-IL',
+  'hr-HR',
+  'hu-HU',
+  'it-IT',
+  'ja-JP',
+  'ko-KR',
+  'lt-LT',
+  'lv-LV',
+  'nb-NO',
+  'nl-NL',
+  'pl-PL',
+  'pt-BR',
+  'pt-PT',
+  'ro-RO',
+  'ru-RU',
+  'sk-SK',
+  'sl-SI',
+  'sr-SP',
+  'sv-SE',
+  'tr-TR',
+  'uk-UA',
+  'zh-CN',
+  'zh-TW',
 ];
 
-const preview: Preview = {
-  parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/,
-      },
+const globalTypes: Preview['globalTypes'] = {
+  locale: {
+    toolbar: {
+      icon: 'globe',
+      items: locales.map((locale) => ({
+        value: locale,
+        title: new Intl.DisplayNames(undefined, {type: 'language'}).of(locale),
+        // @ts-ignore
+        right: new Intl.Locale(locale)?.textInfo?.direction === 'rtl' ? 'Right to Left' : undefined,
+      })),
     },
   },
 };
 
-export default preview;
+export default {
+  decorators,
+  parameters,
+  globalTypes
+} satisfies Preview;

.storybook/style.css

@@ -0,0 +1,73 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+h1 {
+  @apply text-4xl font-bold !text-foreground;
+}
+
+h2 {
+  @apply text-2xl font-bold !text-foreground !border-none;
+}
+
+h3 {
+  @apply text-xl font-bold !text-neutral-600;
+}
+
+.dark .sbdocs-wrapper,
+.dark .sbdocs-preview {
+  background-color: #000000;
+  color: #fff;
+}
+
+.dark .sbdocs-preview {
+  border: 1px solid #292929;
+}
+
+.dark .docblock-code-toggle {
+  background: transparent;
+  color: #d4d4d4;
+}
+
+.dark div:has(.docblock-code-toggle) {
+  background: transparent;
+}
+
+.dark .os-theme-dark {
+  background: #161616;
+  color: #fff;
+}
+
+.dark .sbdocs-title {
+  color: #fff;
+}
+
+.dark .docblock-argstable-head {
+  background: #161616;
+}
+
+.dark .docblock-argstable-head th {
+  color: #bcbcbc;
+  border-bottom: 1px solid #292929 !important;
+}
+
+.dark .docblock-argstable-head th span {
+  color: #bcbcbc;
+}
+
+.dark #docs-root tbody td {
+  background: #161616 !important;
+  color: #bcbcbc !important;
+}
+
+.dark #docs-root tbody tr:first-child td:first-child {
+  border-top-left-radius: 0 !important;
+}
+
+.dark #docs-root tbody tr:first-child td:last-child {
+  border-top-right-radius: 0 !important;
+}
+
+.dark #docs-root tbody tr:not(:first-child) {
+  border-top: 1px solid #292929 !important;
+}

README.md

@@ -58,7 +58,7 @@ Fragment UI is a design system and React component library which provides alread
 yarn add @fragment-build/ui
 
 # npm
-npm install @fragment-build/ui
+npm install -S @fragment-build/ui
 ```
 
 As a next step you must configure the library the way you want to. See [**Configuration**](#🔧-configuration) section.
@@ -83,14 +83,15 @@ To increase the amount of PRs being merged asap, we have some guidelines:
 ## 👨‍💻 Development
 - Clone repository
 
-    ```
+    ```bash
     git clone [email protected]:fragment-build/fragment-ui.git
     cd fragment-ui
+    yarn install
     ```
 
 - Run storybook
 
-    ```ts
+    ```bash
     yarn storybook
     ```
 

package.json

@@ -6,40 +6,44 @@
   "author": "Paul Tiedtke <[email protected]>",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@storybook/addon-essentials": "7.0.23",
-    "@storybook/addon-interactions": "7.0.23",
-    "@storybook/addon-links": "7.0.23",
-    "@storybook/addon-styling": "1.3.0",
-    "@storybook/blocks": "7.0.23",
-    "@storybook/builder-vite": "7.0.23",
-    "@storybook/react": "7.0.23",
-    "@storybook/react-vite": "7.0.23",
-    "@storybook/testing-library": "0.2.0",
-    "@types/react": "18.2.14",
-    "@types/react-dom": "18.2.6",
-    "@typescript-eslint/eslint-plugin": "5.60.0",
-    "@typescript-eslint/parser": "5.60.0",
-    "@vitejs/plugin-react-swc": "3.3.2",
-    "autoprefixer": "10.4.14",
-    "eslint": "8.43.0",
+    "@storybook/addon-a11y": "7.6.17",
+    "@storybook/addon-essentials": "7.6.17",
+    "@storybook/addon-interactions": "7.6.17",
+    "@storybook/addon-links": "7.6.17",
+    "@storybook/addon-styling": "1.3.7",
+    "@storybook/blocks": "7.6.17",
+    "@storybook/builder-vite": "7.6.17",
+    "@storybook/react": "7.6.17",
+    "@storybook/react-vite": "7.6.17",
+    "@storybook/testing-library": "0.2.2",
+    "@types/react": "18.2.65",
+    "@types/react-dom": "18.2.21",
+    "@typescript-eslint/eslint-plugin": "7.2.0",
+    "@typescript-eslint/parser": "7.2.0",
+    "@vitejs/plugin-react-swc": "3.6.0",
+    "autoprefixer": "10.4.18",
+    "eslint": "8.57.0",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-react-refresh": "0.4.1",
-    "eslint-plugin-storybook": "0.6.12",
-    "postcss": "8.4.24",
+    "eslint-plugin-react-refresh": "0.4.5",
+    "eslint-plugin-storybook": "0.8.0",
+    "postcss": "8.4.35",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "storybook": "7.0.23",
-    "typescript": "5.1.3",
-    "vite": "4.3.9"
+    "storybook": "7.6.17",
+    "storybook-dark-mode": "3.0.3",
+    "typescript": "5.4.2",
+    "vite": "5.1.6"
   },
   "scripts": {
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "update": "yarn upgrade-interactive --latest",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@nextui-org/react": "0.0.0-dev-v2-20230624033637",
-    "framer-motion": "10.12.17"
+    "@nextui-org/react": "2.2.10",
+    "@react-hooks-library/core": "0.6.2",
+    "@tabler/icons-react": "3.0.1",
+    "framer-motion": "10.18.0",
+    "tailwindcss": "3.4.1"
   }
 }