Skip to content

Commit

Permalink
Merge pull request #17 from Atnic/feature/skeleton
Browse files Browse the repository at this point in the history 
fix: skeleton
  • Loading branch information
@muhamien
muhamien authored Feb 21, 2024
2 parents f1a95f1 + 0bca71b commit e750893
Showing 1 changed file with 118 additions and 114 deletions.
232 changes: 118 additions & 114 deletions packages/components/skeleton/stories/skeleton.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import {Meta} from "@storybook/react";
import {Button} from "@jala-banyu/button";
import {skeleton} from "@jala-banyu/theme";
import {Card} from "@jala-banyu/card";
import React from "react";

import {Skeleton} from "../src";
import {Skeleton, SkeletonProps} from "../src";

export default {
title: "Components/Skeleton",
Expand All @@ -22,116 +26,116 @@ export default {
},
} as Meta<typeof Skeleton>;

// const defaultProps = {
// ...skeleton.defaultVariants,
// isLoaded: false,
// children: <div className="w-[200px] h-[100px]">Banyu</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-neutral-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-neutral-200" />
// </Skeleton>
// <Skeleton className="w-4/5 rounded-lg" {...args}>
// <div className="h-3 w-4/5 rounded-lg bg-neutral-200" />
// </Skeleton>
// <Skeleton className="w-2/5 rounded-lg" {...args}>
// <div className="h-3 w-2/5 rounded-lg bg-neutral-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-brand" />
// </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-brand" />
// </Skeleton>
// <Skeleton className="w-4/5 rounded-lg" {...args} isLoaded={isLoaded}>
// <div className="h-3 w-full rounded-lg bg-brand-300" />
// </Skeleton>
// <Skeleton className="w-2/5 rounded-lg" {...args} isLoaded={isLoaded}>
// <div className="h-3 w-full rounded-lg bg-brand-200" />
// </Skeleton>
// </div>
// </Card>
// <Button
// className="max-w-[200px]"
// color="primary"
// size="sm"
// variant="ghost"
// onPress={toggleLoad}
// >
// {isLoaded ? "Show" : "Hide"} Skeleton
// </Button>
// </div>
// );
// };
//
// export const Default = {
// render: DefaultTemplate,
// parameters: {
// design: {
// type: "figma",
// url: "https://www.figma.com/file/T0TUGURgVGElV6MtU2EPYU/%5BJDS%5D-Design-System---Banyu-1.0?node-id=286%3A67175&mode=dev",
// },
// },
// args: {
// ...defaultProps,
// },
// };
//
// export const Standalone = {
// render: StandaloneTemplate,
// parameters: {
// design: {
// type: "figma",
// url: "https://www.figma.com/file/T0TUGURgVGElV6MtU2EPYU/%5BJDS%5D-Design-System---Banyu-1.0?node-id=286%3A67175&mode=dev",
// },
// },
// args: {
// ...defaultProps,
// },
// };
//
// export const LoadedState = {
// render: LoadedStateTemplate,
// parameters: {
// design: {
// type: "figma",
// url: "https://www.figma.com/file/T0TUGURgVGElV6MtU2EPYU/%5BJDS%5D-Design-System---Banyu-1.0?node-id=286%3A67175&mode=dev",
// },
// },
// args: {
// ...defaultProps,
// },
// };
const defaultProps = {
...skeleton.defaultVariants,
isLoaded: false,
children: <div className="w-[200px] h-[100px]">Banyu</div>,
};

const DefaultTemplate = (args: SkeletonProps) => (
<Card className="w-[200px] space-y-5 p-4" radius="lg">
<Skeleton className="rounded-md" {...args}>
<div className="h-24 rounded-md bg-neutral-300" />
</Skeleton>
<div className="space-y-3">
<Skeleton className="w-3/5 rounded-md" {...args}>
<div className="h-3 w-3/5 rounded-md bg-neutral-200" />
</Skeleton>
<Skeleton className="w-4/5 rounded-md" {...args}>
<div className="h-3 w-4/5 rounded-md bg-neutral-200" />
</Skeleton>
<Skeleton className="w-2/5 rounded-md" {...args}>
<div className="h-3 w-2/5 rounded-md bg-neutral-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-md" {...args} />
<Skeleton className="h-3 w-4/5 rounded-md" {...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-md" {...args} isLoaded={isLoaded}>
<div className="h-24 rounded-md bg-brand" />
</Skeleton>
<div className="space-y-3">
<Skeleton className="w-3/5 rounded-md" {...args} isLoaded={isLoaded}>
<div className="h-3 w-full rounded-md bg-brand" />
</Skeleton>
<Skeleton className="w-4/5 rounded-md" {...args} isLoaded={isLoaded}>
<div className="h-3 w-full rounded-md bg-brand-300" />
</Skeleton>
<Skeleton className="w-2/5 rounded-md" {...args} isLoaded={isLoaded}>
<div className="h-3 w-full rounded-md bg-brand-200" />
</Skeleton>
</div>
</Card>
<Button
className="max-w-[200px]"
color="primary"
size="sm"
variant="ghost"
onPress={toggleLoad}
>
{isLoaded ? "Show" : "Hide"} Skeleton
</Button>
</div>
);
};

export const Default = {
render: DefaultTemplate,
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/T0TUGURgVGElV6MtU2EPYU/%5BJDS%5D-Design-System---Banyu-1.0?node-id=286%3A67175&mode=dev",
},
},
args: {
...defaultProps,
},
};

export const Standalone = {
render: StandaloneTemplate,
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/T0TUGURgVGElV6MtU2EPYU/%5BJDS%5D-Design-System---Banyu-1.0?node-id=286%3A67175&mode=dev",
},
},
args: {
...defaultProps,
},
};

export const LoadedState = {
render: LoadedStateTemplate,
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/T0TUGURgVGElV6MtU2EPYU/%5BJDS%5D-Design-System---Banyu-1.0?node-id=286%3A67175&mode=dev",
},
},
args: {
...defaultProps,
},
};

0 comments on commit e750893

Please sign in to comment.