mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
Fix/1609 (#1736)
* feat: storybook upgraded * fix(skeleton): loading state * chore(skeleton): changeset
This commit is contained in:
Junior Garcia
GitHub
parent
9d4c7ed9cf
commit
c0706acbca
6
.changeset/warm-panthers-fail.md
Normal file
6
.changeset/warm-panthers-fail.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
"@nextui-org/skeleton": patch
|
||||
"@nextui-org/theme": patch
|
||||
---
|
||||
|
||||
Fix #1609 skeleton background on loaded stet
|
||||
@ -9,7 +9,7 @@ export default function App() {
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<Card className="w-[200px] space-y-5 p-4" radius="2xl">
|
||||
<Card className="w-[200px] space-y-5 p-4" radius="lg">
|
||||
<Skeleton isLoaded={isLoaded} className="rounded-lg">
|
||||
<div className="h-24 rounded-lg bg-secondary"></div>
|
||||
</Skeleton>
|
||||
|
||||
@ -2,7 +2,7 @@ const App = `import {Card, Skeleton} from "@nextui-org/react";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Card className="w-[200px] space-y-5 p-4" radius="2xl">
|
||||
<Card className="w-[200px] space-y-5 p-4" radius="lg">
|
||||
<Skeleton className="rounded-lg">
|
||||
<div className="h-24 rounded-lg bg-default-300"></div>
|
||||
</Skeleton>
|
||||
|
||||
@ -84,7 +84,7 @@
|
||||
"@types/testing-library__jest-dom": "5.14.5",
|
||||
"@typescript-eslint/eslint-plugin": "^5.42.0",
|
||||
"@typescript-eslint/parser": "^5.42.0",
|
||||
"@storybook/react": "^7.1.1",
|
||||
"@storybook/react": "^7.4.6",
|
||||
"chalk": "^4.1.2",
|
||||
"concurrently": "^7.6.0",
|
||||
"commitlint-plugin-function-rules": "^1.7.1",
|
||||
|
||||
@ -44,6 +44,8 @@
|
||||
"@nextui-org/react-utils": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nextui-org/card": "workspace:*",
|
||||
"@nextui-org/button": "workspace:*",
|
||||
"clean-package": "2.2.0",
|
||||
"react": "^18.0.0"
|
||||
},
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
import React from "react";
|
||||
import {Meta} from "@storybook/react";
|
||||
import {skeleton} from "@nextui-org/theme";
|
||||
import {Card} from "@nextui-org/card";
|
||||
import {Button} from "@nextui-org/button";
|
||||
|
||||
import {Skeleton} from "../src";
|
||||
import {Skeleton, SkeletonProps} from "../src";
|
||||
|
||||
export default {
|
||||
title: "Components/Skeleton",
|
||||
@ -30,9 +32,95 @@ const defaultProps = {
|
||||
children: <div className="w-[200px] h-[100px]">NextUI</div>,
|
||||
};
|
||||
|
||||
const DefaultTemplate = (args: SkeletonProps) => (
|
||||
<Card className="w-[200px] space-y-5 p-4" radius="lg">
|
||||
<Skeleton className="rounded-lg" {...args}>
|
||||
<div className="h-24 rounded-lg bg-default-300" />
|
||||
</Skeleton>
|
||||
<div className="space-y-3">
|
||||
<Skeleton className="w-3/5 rounded-lg" {...args}>
|
||||
<div className="h-3 w-3/5 rounded-lg bg-default-200" />
|
||||
</Skeleton>
|
||||
<Skeleton className="w-4/5 rounded-lg" {...args}>
|
||||
<div className="h-3 w-4/5 rounded-lg bg-default-200" />
|
||||
</Skeleton>
|
||||
<Skeleton className="w-2/5 rounded-lg" {...args}>
|
||||
<div className="h-3 w-2/5 rounded-lg bg-default-300" />
|
||||
</Skeleton>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
|
||||
const StandaloneTemplate = (args: SkeletonProps) => (
|
||||
<div className="max-w-[300px] w-full flex items-center gap-3">
|
||||
<div>
|
||||
<Skeleton className="flex rounded-full w-12 h-12" />
|
||||
</div>
|
||||
<div className="w-full flex flex-col gap-2">
|
||||
<Skeleton className="h-3 w-3/5 rounded-lg" {...args} />
|
||||
<Skeleton className="h-3 w-4/5 rounded-lg" {...args} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const LoadedStateTemplate = (args: SkeletonProps) => {
|
||||
const [isLoaded, setIsLoaded] = React.useState(false);
|
||||
|
||||
const toggleLoad = () => {
|
||||
setIsLoaded(!isLoaded);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<Card className="w-[200px] space-y-5 p-4" radius="lg">
|
||||
<Skeleton className="rounded-lg" {...args} isLoaded={isLoaded}>
|
||||
<div className="h-24 rounded-lg bg-secondary" />
|
||||
</Skeleton>
|
||||
<div className="space-y-3">
|
||||
<Skeleton className="w-3/5 rounded-lg" {...args} isLoaded={isLoaded}>
|
||||
<div className="h-3 w-full rounded-lg bg-secondary" />
|
||||
</Skeleton>
|
||||
<Skeleton className="w-4/5 rounded-lg" {...args} isLoaded={isLoaded}>
|
||||
<div className="h-3 w-full rounded-lg bg-secondary-300" />
|
||||
</Skeleton>
|
||||
<Skeleton className="w-2/5 rounded-lg" {...args} isLoaded={isLoaded}>
|
||||
<div className="h-3 w-full rounded-lg bg-secondary-200" />
|
||||
</Skeleton>
|
||||
</div>
|
||||
</Card>
|
||||
<Button
|
||||
className="max-w-[200px]"
|
||||
color="secondary"
|
||||
size="sm"
|
||||
variant="flat"
|
||||
onPress={toggleLoad}
|
||||
>
|
||||
{isLoaded ? "Show" : "Hide"} Skeleton
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
render: DefaultTemplate,
|
||||
|
||||
args: {
|
||||
...defaultProps,
|
||||
},
|
||||
};
|
||||
|
||||
export const Standalone = {
|
||||
render: StandaloneTemplate,
|
||||
|
||||
args: {
|
||||
...defaultProps,
|
||||
},
|
||||
};
|
||||
|
||||
export const LoadedState = {
|
||||
render: LoadedStateTemplate,
|
||||
|
||||
args: {
|
||||
...defaultProps,
|
||||
className: "rounded-xl",
|
||||
},
|
||||
};
|
||||
|
||||
@ -40,7 +40,7 @@ const skeleton = tv({
|
||||
"after:bg-content3",
|
||||
"dark:after:bg-content2",
|
||||
// state
|
||||
"data-[loaded=true]:bg-transparent",
|
||||
"data-[loaded=true]:!bg-transparent",
|
||||
"data-[loaded=true]:before:opacity-0 data-[loaded=true]:before:animate-none",
|
||||
"data-[loaded=true]:after:opacity-0",
|
||||
],
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { dirname, join } from "path";
|
||||
module.exports = {
|
||||
stories: [
|
||||
"./welcome.stories.mdx",
|
||||
@ -6,17 +7,24 @@ module.exports = {
|
||||
],
|
||||
staticDirs: ["../public"],
|
||||
addons: [
|
||||
"@storybook/addon-a11y",
|
||||
"@storybook/addon-essentials",
|
||||
"@storybook/addon-links",
|
||||
"storybook-dark-mode",
|
||||
getAbsolutePath("@storybook/addon-a11y"),
|
||||
getAbsolutePath("@storybook/addon-essentials"),
|
||||
getAbsolutePath("@storybook/addon-links"),
|
||||
getAbsolutePath("storybook-dark-mode"),
|
||||
getAbsolutePath("@storybook/addon-mdx-gfm")
|
||||
],
|
||||
framework: "@storybook/react-vite",
|
||||
framework: {
|
||||
name: getAbsolutePath("@storybook/react-vite"),
|
||||
options: {}
|
||||
},
|
||||
core: {
|
||||
builder: "@storybook/builder-vite",
|
||||
disableTelemetry: true,
|
||||
disableTelemetry: true
|
||||
},
|
||||
typescript: {
|
||||
reactDocgen: false,
|
||||
},
|
||||
};
|
||||
|
||||
function getAbsolutePath(value) {
|
||||
return dirname(require.resolve(join(value, "package.json")));
|
||||
}
|
||||
|
||||
@ -25,32 +25,33 @@
|
||||
"url": "https://github.com/nextui-org/nextui/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "pnpm sb dev -p 6006",
|
||||
"build": "pnpm sb build",
|
||||
"dev": "pnpm storybook dev -p 6006",
|
||||
"build": "pnpm storybook build",
|
||||
"start": "pnpm dlx http-server storybook-static"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/system": "workspace:*",
|
||||
"@nextui-org/react": "workspace:*",
|
||||
"@nextui-org/system": "workspace:*",
|
||||
"@nextui-org/theme": "workspace:*",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "^7.1.1",
|
||||
"@storybook/addon-actions": "^7.1.1",
|
||||
"@storybook/addon-docs": "^7.1.1",
|
||||
"@storybook/addon-essentials": "^7.1.1",
|
||||
"@storybook/addon-links": "^7.1.1",
|
||||
"@storybook/builder-vite": "^7.1.1",
|
||||
"vite": "^4.4.7",
|
||||
"@storybook/cli": "^7.1.1",
|
||||
"@storybook/react-vite": "^7.1.1",
|
||||
"@storybook/react": "^7.1.1",
|
||||
"@storybook/theming": "^7.1.1",
|
||||
"@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/react": "^7.4.6",
|
||||
"@storybook/react-vite": "^7.4.6",
|
||||
"@storybook/theming": "^7.4.6",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"storybook-dark-mode": "^3.0.0",
|
||||
"tailwindcss": "^3.2.7"
|
||||
"storybook": "^7.4.6",
|
||||
"storybook-dark-mode": "^3.0.1",
|
||||
"tailwindcss": "^3.2.7",
|
||||
"vite": "^4.4.7"
|
||||
},
|
||||
"tsup": {
|
||||
"clean": true,
|
||||
|
||||
740
pnpm-lock.yaml
generated
740
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user