Skip to content

Commit

Permalink
feat: upgrade storybook8
Browse files Browse the repository at this point in the history
  • Loading branch information
winchesHe committed Nov 20, 2024
1 parent ce1546c commit 72db05e
Show file tree
Hide file tree
Showing 7 changed files with 511 additions and 3,261 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
"@react-bootstrap/babel-preset": "^2.1.0",
"@react-types/link": "^3.4.4",
"@react-types/shared": "3.24.1",
"@storybook/react": "^7.4.6",
"@storybook/react": "^8.4.4",
"@swc/core": "^1.3.35",
"@swc/jest": "^0.2.24",
"@testing-library/dom": "^10.4.0",
Expand Down
28 changes: 14 additions & 14 deletions packages/storybook/.storybook/addons/react-strict-mode/index.tsx
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
import type { PropsWithChildren } from "react"
import type {PropsWithChildren} from "react";

import { addons, makeDecorator } from "@storybook/preview-api"
import { getQueryParams } from "@storybook/preview-api"
import React, { StrictMode, useEffect, useState } from "react"
import {addons, makeDecorator} from "@storybook/preview-api";
import React, {StrictMode, useEffect, useState} from "react";

function StrictModeDecorator({ children }: PropsWithChildren<any>) {
const [isStrict, setStrict] = useState(() => getQueryParams()?.strict === "true")
function StrictModeDecorator({children}: PropsWithChildren<any>) {
const strictQuery = new URLSearchParams(window.location.search).get("strict");
const [isStrict, setStrict] = useState(strictQuery === "true");

useEffect(() => {
const channel = addons.getChannel()
const channel = addons.getChannel();

channel.on("strict/updated", setStrict)
channel.on("strict/updated", setStrict);

return () => {
channel.removeListener("strict/updated", setStrict)
}
}, [])
channel.removeListener("strict/updated", setStrict);
};
}, []);

return isStrict ? <StrictMode>{children}</StrictMode> : children
return isStrict ? <StrictMode>{children}</StrictMode> : children;
}

export const withStrictModeSwitcher = makeDecorator({
name: "withStrictModeSwitcher",
parameterName: "strictModeSwitcher",
wrapper: (getStory, context) => {
return <StrictModeDecorator>{getStory(context)}</StrictModeDecorator>
return <StrictModeDecorator>{getStory(context)}</StrictModeDecorator>;
},
})
});
Original file line number Diff line number Diff line change
@@ -1,30 +1,54 @@
import { dirname, join } from "path";
module.exports = {
import remarkGfm from "remark-gfm";
import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
stories: [
"./welcome.stories.mdx",
"./welcome.mdx",
"../../components/**/stories/**/*.stories.@(js|jsx|ts|tsx)",
"../../core/theme/stories/*.stories.@(js|jsx|ts|tsx)",
"../../core/theme/stories/*.stories.@(js|jsx|ts|tsx)"
],

staticDirs: ["../public"],

addons: [
getAbsolutePath("@storybook/addon-a11y"),
getAbsolutePath("@storybook/addon-essentials"),
getAbsolutePath("@storybook/addon-links"),
getAbsolutePath("storybook-dark-mode"),
getAbsolutePath("@storybook/addon-mdx-gfm"),
{
name: '@storybook/addon-docs',
options: {
mdxPluginOptions: {
mdxCompileOptions: {
remarkPlugins: [remarkGfm],
},
},
},
},
"./addons/react-strict-mode/register",
],

framework: {
name: getAbsolutePath("@storybook/react-vite"),
options: {},
},

core: {
disableTelemetry: true,
},

typescript: {
reactDocgen: false,
},

docs: {
autodocs: true
}
};

function getAbsolutePath(value) {
return dirname(require.resolve(join(value, "package.json")));
}

export default config;
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,9 @@ import {link, button} from "@nextui-org/theme";

<br />

<p className="!text-base !text-foreground max-w-xl [&>p]:text-foreground [&>p]:text-base">
Here you can find the guidelines, components APIs and examples to help you build your next project
with NextUI.
</p>
<div className="!text-base !text-foreground max-w-xl [&>p]:text-foreground [&>p]:text-base">
Here you can find the guidelines, components APIs and examples to help you build your next project with NextUI.
</div>

<div className="flex flex-col gap-8">
<div className="flex flex-row justify-start items-center mt-8 gap-4">
Expand Down Expand Up @@ -127,6 +126,6 @@ import {link, button} from "@nextui-org/theme";
<br />


<div class="block text-xs [&>p]:text-default-400">
Last updated on <time datetime="2023-03-07">Jul 31, 2023</time>
<div className="block text-xs [&>p]:text-default-400">
Last updated on <time dateTime="2023-03-07">Jul 31, 2023</time>
</div>
28 changes: 14 additions & 14 deletions packages/storybook/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -37,21 +37,21 @@
"react-dom": "^18.0.0"
},
"devDependencies": {
"@storybook/addon-a11y": "^7.4.6",
"@storybook/addon-actions": "^7.4.6",
"@storybook/addon-docs": "^7.4.6",
"@storybook/addon-essentials": "^7.4.6",
"@storybook/addon-links": "^7.4.6",
"@storybook/addon-mdx-gfm": "^7.4.6",
"@storybook/cli": "^7.4.6",
"@storybook/manager-api": "^7.6.17",
"@storybook/preview-api": "^7.6.17",
"@storybook/react": "^7.4.6",
"@storybook/react-vite": "^7.4.6",
"@storybook/theming": "^7.4.6",
"@storybook/addon-a11y": "^8.4.4",
"@storybook/addon-actions": "^8.4.4",
"@storybook/addon-docs": "^8.4.4",
"@storybook/addon-essentials": "^8.4.4",
"@storybook/addon-links": "^8.4.4",
"@storybook/cli": "^8.4.4",
"@storybook/manager-api": "^8.4.4",
"@storybook/preview-api": "^8.4.4",
"@storybook/react": "^8.4.4",
"@storybook/react-vite": "^8.4.4",
"@storybook/theming": "^8.4.4",
"autoprefixer": "^10.4.13",
"storybook": "^7.4.6",
"storybook-dark-mode": "^3.0.1",
"storybook": "^8.4.4",
"storybook-dark-mode": "^4.0.2",
"remark-gfm": "^4.0.0",
"tailwindcss": "^3.3.5",
"vite": "^4.4.7"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/storybook/tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ const {nextui} = require("@nextui-org/theme/plugin");
// /** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./.storybook/welcome.stories.mdx",
"./.storybook/welcome.mdx",
"../components/*/src/**/*.{js,jsx,ts,tsx}",
"../components/*/stories/**/*.{js,jsx,ts,tsx}",
"../core/theme/src/components/**/*.{js,jsx,ts,tsx}",
Expand Down
Loading

0 comments on commit 72db05e

Please sign in to comment.