-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #195 from alifakbar111/feat/100-storybook-react-card
Feat/100 storybook react card
- Loading branch information
Showing
11 changed files
with
880 additions
and
745 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { Canvas, Meta, Primary, Stories } from '@storybook/blocks' | ||
| import * as CardStories from './card.stories' | ||
|
|
||
| <Meta of={CardStories} /> | ||
|
|
||
| # Button | ||
|
|
||
| Card component | ||
|
|
||
| ## Example | ||
|
|
||
| ```tsx | ||
| import { | ||
| Card, | ||
| CardContent, | ||
| CardDescription, | ||
| CardFooter, | ||
| CardHeader, | ||
| CardTitle, | ||
| } from '@repo/ui-react/card' | ||
|
|
||
| <Card> | ||
| <CardHeader> | ||
| <CardTitle>Hello World</CardTitle> | ||
| <CardDescription>We start new project</CardDescription> | ||
| </CardHeader> | ||
| <CardContent> | ||
| This is the card content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec | ||
| odio vel dui euismod fermentum. Curabitur nec odio vel dui euismod fermentum. | ||
| </CardContent> | ||
| <CardFooter> | ||
| <Button>View</Button> | ||
| <Button>Accept</Button> | ||
| </CardFooter> | ||
| </Card> | ||
| ``` | ||
|
|
||
| ## Preview | ||
|
|
||
| <Primary /> | ||
|
|
||
| <Stories /> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| import { Button } from '@repo/ui-react/button' | ||
| import { | ||
| Card, | ||
| CardContent, | ||
| CardDescription, | ||
| CardFooter, | ||
| CardHeader, | ||
| CardTitle, | ||
| } from '@repo/ui-react/card' | ||
| import { Input } from '@repo/ui-react/input' | ||
| import { Label } from '@repo/ui-react/label' | ||
| import type { Meta, StoryObj } from '@storybook/react' | ||
| import * as React from 'react' | ||
|
|
||
| const meta: Meta<typeof Card> = { | ||
| title: 'Basic Components/Card', | ||
| component: Card, | ||
| } | ||
|
|
||
| export default meta | ||
|
|
||
| type Story = StoryObj<typeof meta> | ||
|
|
||
| export const Default: Story = { | ||
| render: () => ( | ||
| <Card> | ||
| <CardHeader> | ||
| <CardTitle>Hello World</CardTitle> | ||
| <CardDescription>We start new project</CardDescription> | ||
| </CardHeader> | ||
| <CardContent> | ||
| This is the card content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur | ||
| nec odio vel dui euismod fermentum. Curabitur nec odio vel dui euismod fermentum. | ||
| </CardContent> | ||
| <CardFooter> | ||
| <Button>View</Button> | ||
| <Button>Accept</Button> | ||
| </CardFooter> | ||
| </Card> | ||
| ), | ||
| } | ||
|
|
||
| export const AddImageShowcase: Story = { | ||
| render: () => ( | ||
| <Card> | ||
| <CardHeader> | ||
| <CardTitle>Hello World</CardTitle> | ||
| <CardDescription>We start new project</CardDescription> | ||
| </CardHeader> | ||
| <CardContent> | ||
| <img | ||
| src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?q=80&w=500&auto=format&fit=crop" | ||
| alt="macbook pro on top of brown table" | ||
| /> | ||
| <p> | ||
| This is the card content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. | ||
| Curabitur nec odio vel dui euismod fermentum. Curabitur nec odio vel dui euismod | ||
| fermentum. | ||
| </p> | ||
| </CardContent> | ||
| <CardFooter> | ||
| <Button>View</Button> | ||
| <Button>Join</Button> | ||
| </CardFooter> | ||
| </Card> | ||
| ), | ||
| } | ||
|
|
||
| export const FormShowcase: Story = { | ||
| render: () => ( | ||
| <Card> | ||
| <CardHeader> | ||
| <CardTitle>Account</CardTitle> | ||
| <CardDescription>We start new project</CardDescription> | ||
| </CardHeader> | ||
| <CardContent> | ||
| <div className="grid gap-1.5"> | ||
| <Label htmlFor="email">Email address</Label> | ||
| <Input type="email" id="email" /> | ||
| </div> | ||
| <div className="grid gap-1.5"> | ||
| <Label htmlFor="password">Password</Label> | ||
| <Input type="password" id="password" /> | ||
| </div> | ||
| </CardContent> | ||
| <CardFooter> | ||
| <Button>Signin</Button> | ||
| <Button>Signup</Button> | ||
| </CardFooter> | ||
| </Card> | ||
| ), | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -27,7 +27,7 @@ | |
| "devDependencies": { | ||
| "@biomejs/biome": "catalog:", | ||
| "npm-check-updates": "^17.1.14", | ||
| "turbo": "^2.3.3" | ||
| "turbo": "^2.3.4" | ||
| }, | ||
| "packageManager": "[email protected]" | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.