mirror of
https://github.com/yangshun/tech-interview-handbook.git
synced 2025-07-29 13:13:54 +08:00
storybook: add Button and Spinner examples
This commit is contained in:
Yangshun Tay
@ -1,4 +1,4 @@
|
||||
import { Button, CounterButton } from '@tih/ui';
|
||||
import { Button, Spinner } from '@tih/ui';
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
@ -8,8 +8,8 @@ export default function HomePage() {
|
||||
<h1 className="text-center text-4xl font-bold text-red-600">
|
||||
Homepage
|
||||
</h1>
|
||||
<CounterButton />
|
||||
<Button label="Button text" size="md" variant="primary" />
|
||||
<Spinner size="md" />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -2,7 +2,18 @@ const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.tsx'],
|
||||
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
|
||||
addons: [
|
||||
{
|
||||
name: '@storybook/addon-postcss',
|
||||
options: {
|
||||
postcssLoaderOptions: {
|
||||
implementation: require('postcss'),
|
||||
},
|
||||
},
|
||||
},
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-essentials',
|
||||
],
|
||||
framework: '@storybook/react',
|
||||
core: {
|
||||
builder: '@storybook/builder-vite',
|
||||
|
||||
@ -1 +1,6 @@
|
||||
import 'tailwindcss/tailwind.css';
|
||||
import '@tih/ui/dist/styles.css';
|
||||
|
||||
export const parameters = {
|
||||
controls: { expanded: true },
|
||||
};
|
||||
|
||||
@ -14,17 +14,21 @@
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@heroicons/react": "^2.0.11",
|
||||
"@storybook/addon-actions": "^6.4.18",
|
||||
"@storybook/addon-docs": "^6.4.22",
|
||||
"@storybook/addon-essentials": "^6.4.18",
|
||||
"@storybook/addon-links": "^6.4.18",
|
||||
"@storybook/addon-postcss": "^2.0.0",
|
||||
"@storybook/builder-vite": "^0.1.33",
|
||||
"@storybook/react": "^6.4.18",
|
||||
"@tih/tailwind-config": "*",
|
||||
"@tih/tsconfig": "*",
|
||||
"@vitejs/plugin-react": "^1.3.2",
|
||||
"autoprefixer": "^10.4.12",
|
||||
"eslint-config-tih": "*",
|
||||
"serve": "^13.0.2",
|
||||
"tailwindcss": "^3.1.8",
|
||||
"typescript": "^4.8.3",
|
||||
"vite": "^2.9.9"
|
||||
}
|
||||
|
||||
@ -1,13 +1,6 @@
|
||||
// If you want to use other PostCSS plugins, see the following:
|
||||
// https://tailwindcss.com/docs/using-with-preprocessors
|
||||
|
||||
const config = require('@tih/tailwind-config/tailwind.config.js');
|
||||
|
||||
module.exports = {
|
||||
plugins: {
|
||||
// Specifying the config is not necessary in most cases, but it is included
|
||||
// here to share the same config across the entire monorepo
|
||||
tailwindcss: { config },
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,33 +1,243 @@
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import { ComponentMeta } from '@storybook/react';
|
||||
|
||||
import { Button } from '@tih/ui';
|
||||
import {
|
||||
Button,
|
||||
ButtonAddOnPosition,
|
||||
ButtonDisplay,
|
||||
ButtonSize,
|
||||
ButtonType,
|
||||
ButtonVariant,
|
||||
} from '@tih/ui';
|
||||
import React from 'react';
|
||||
import { EnvelopeIcon } from '@heroicons/react/24/solid';
|
||||
|
||||
const buttonTypes: ReadonlyArray<ButtonType> = ['button', 'reset', 'submit'];
|
||||
const buttonSizes: ReadonlyArray<ButtonSize> = ['sm', 'md', 'lg'];
|
||||
const buttonAddOnPositions: ReadonlyArray<ButtonAddOnPosition> = [
|
||||
'start',
|
||||
'end',
|
||||
];
|
||||
const buttonDisplays: ReadonlyArray<ButtonDisplay> = ['block', 'inline'];
|
||||
const buttonVariants: ReadonlyArray<ButtonVariant> = [
|
||||
'primary',
|
||||
'secondary',
|
||||
'tertiary',
|
||||
'special',
|
||||
'success',
|
||||
];
|
||||
|
||||
//👇 This default export determines where your story goes in the story list
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
argTypes: {
|
||||
addonPosition: {
|
||||
options: buttonAddOnPositions,
|
||||
control: { type: 'select' },
|
||||
},
|
||||
display: {
|
||||
options: buttonDisplays,
|
||||
control: { type: 'select' },
|
||||
},
|
||||
isDisabled: {
|
||||
control: 'boolean',
|
||||
},
|
||||
isLoading: {
|
||||
control: 'boolean',
|
||||
},
|
||||
label: {
|
||||
control: 'string',
|
||||
},
|
||||
size: {
|
||||
options: buttonSizes,
|
||||
control: { type: 'select' },
|
||||
},
|
||||
type: {
|
||||
options: buttonTypes,
|
||||
control: { type: 'select' },
|
||||
},
|
||||
variant: {
|
||||
options: buttonVariants,
|
||||
control: { type: 'select' },
|
||||
},
|
||||
},
|
||||
} as ComponentMeta<typeof Button>;
|
||||
|
||||
//👇 We create a “template” of how args map to rendering
|
||||
const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
|
||||
|
||||
export const PrimaryButton = Template.bind({});
|
||||
|
||||
PrimaryButton.args = {
|
||||
label: 'Button text',
|
||||
size: 'md',
|
||||
variant: 'primary',
|
||||
export const Basic = {
|
||||
args: {
|
||||
label: 'Click Me',
|
||||
size: 'md',
|
||||
variant: 'primary',
|
||||
},
|
||||
};
|
||||
|
||||
export const SecondaryButton = Template.bind({});
|
||||
export function Variant() {
|
||||
return (
|
||||
<div className="space-x-4">
|
||||
{buttonVariants.map((variant) => (
|
||||
<Button key={variant} label="Click Me" size="md" variant={variant} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
SecondaryButton.args = {
|
||||
label: 'Button text',
|
||||
size: 'md',
|
||||
variant: 'secondary',
|
||||
};
|
||||
export function Size() {
|
||||
return (
|
||||
<div className="space-x-4">
|
||||
{buttonSizes.map((size) => (
|
||||
<Button key={size} label="Click Me" size={size} variant="primary" />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Display() {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{buttonSizes.map((size) => (
|
||||
<Button
|
||||
key={size}
|
||||
display="block"
|
||||
label="Click Me"
|
||||
size={size}
|
||||
variant="primary"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Disabled() {
|
||||
return (
|
||||
<div className="space-x-4">
|
||||
{buttonVariants.map((variant) => (
|
||||
<Button
|
||||
isDisabled={true}
|
||||
key={variant}
|
||||
label="Click Me"
|
||||
size="md"
|
||||
variant={variant}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Loading() {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
{buttonVariants.map((variant) => (
|
||||
<Button
|
||||
isLoading={true}
|
||||
key={variant}
|
||||
label="Click Me"
|
||||
size="md"
|
||||
variant={variant}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="space-x-4">
|
||||
{buttonVariants.map((variant) => (
|
||||
<Button
|
||||
isDisabled={true}
|
||||
isLoading={true}
|
||||
key={variant}
|
||||
label="Click Me"
|
||||
size="md"
|
||||
variant={variant}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Icons() {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
{buttonSizes.map((size) => (
|
||||
<Button
|
||||
key={size}
|
||||
icon={EnvelopeIcon}
|
||||
label="Click Me"
|
||||
size={size}
|
||||
variant="primary"
|
||||
/>
|
||||
))}
|
||||
<Button
|
||||
icon={EnvelopeIcon}
|
||||
isDisabled={true}
|
||||
label="Click Me"
|
||||
size="lg"
|
||||
variant="primary"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-x-4">
|
||||
{buttonSizes.map((size) => (
|
||||
<Button
|
||||
key={size}
|
||||
addonPosition="start"
|
||||
icon={EnvelopeIcon}
|
||||
label="Click Me"
|
||||
size={size}
|
||||
variant="primary"
|
||||
/>
|
||||
))}
|
||||
<Button
|
||||
addonPosition="start"
|
||||
icon={EnvelopeIcon}
|
||||
isDisabled={true}
|
||||
label="Click Me"
|
||||
size="lg"
|
||||
variant="primary"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{buttonSizes.map((size) => (
|
||||
<Button
|
||||
key={size}
|
||||
display="block"
|
||||
icon={EnvelopeIcon}
|
||||
label="Click Me"
|
||||
size={size}
|
||||
variant="primary"
|
||||
/>
|
||||
))}
|
||||
<Button
|
||||
display="block"
|
||||
icon={EnvelopeIcon}
|
||||
isDisabled={true}
|
||||
label="Click Me"
|
||||
size="lg"
|
||||
variant="primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function HiddenLabel() {
|
||||
return (
|
||||
<div className="space-x-4">
|
||||
{buttonSizes.map((size) => (
|
||||
<Button
|
||||
key={size}
|
||||
icon={EnvelopeIcon}
|
||||
isLabelHidden={true}
|
||||
label="Click Me"
|
||||
size={size}
|
||||
variant="primary"
|
||||
/>
|
||||
))}
|
||||
<Button
|
||||
icon={EnvelopeIcon}
|
||||
isDisabled={true}
|
||||
isLabelHidden={true}
|
||||
label="Click Me"
|
||||
size="lg"
|
||||
variant="primary"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
import { CounterButton } from '@tih/ui';
|
||||
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
||||
|
||||
<Meta title="Components/Button" component={CounterButton} />
|
||||
|
||||
# Button
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget consectetur tempor, nisl nunc egestas nisi, euismod aliquam nisl nunc euismod.
|
||||
|
||||
## Props
|
||||
|
||||
<ArgsTable of={CounterButton} />
|
||||
|
||||
## Examples
|
||||
|
||||
<Canvas>
|
||||
<Story name="Default">
|
||||
<CounterButton>Hello</CounterButton>
|
||||
</Story>
|
||||
</Canvas>
|
||||
57
apps/storybook/stories/spinner.stories.tsx
Normal file
57
apps/storybook/stories/spinner.stories.tsx
Normal file
@ -0,0 +1,57 @@
|
||||
import { ComponentMeta } from '@storybook/react';
|
||||
|
||||
import { Spinner, SpinnerColor, SpinnerSize, SpinnerDisplay } from '@tih/ui';
|
||||
import React from 'react';
|
||||
|
||||
const spinnerColors: ReadonlyArray<SpinnerColor> = ['default', 'inherit'];
|
||||
const spinnerDisplays: ReadonlyArray<SpinnerDisplay> = ['block', 'inline'];
|
||||
const spinnerSizes: ReadonlyArray<SpinnerSize> = ['xs', 'sm', 'md', 'lg'];
|
||||
|
||||
export default {
|
||||
title: 'Spinner',
|
||||
component: Spinner,
|
||||
argTypes: {
|
||||
color: {
|
||||
options: spinnerColors,
|
||||
control: { type: 'select' },
|
||||
},
|
||||
display: {
|
||||
options: spinnerDisplays,
|
||||
control: { type: 'select' },
|
||||
},
|
||||
label: {
|
||||
control: 'string',
|
||||
},
|
||||
size: {
|
||||
options: spinnerSizes,
|
||||
control: { type: 'select' },
|
||||
},
|
||||
},
|
||||
} as ComponentMeta<typeof Spinner>;
|
||||
|
||||
export const Basic = {
|
||||
args: {
|
||||
label: 'Loading data',
|
||||
size: 'md',
|
||||
},
|
||||
};
|
||||
|
||||
export function Size() {
|
||||
return (
|
||||
<div className="space-x-4">
|
||||
{spinnerSizes.map((size) => (
|
||||
<Spinner key={size} label="Loading..." size={size} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Display() {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{spinnerSizes.map((size) => (
|
||||
<Spinner key={size} display="block" label="Loading..." size={size} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
7
apps/storybook/tailwind.config.js
Normal file
7
apps/storybook/tailwind.config.js
Normal file
@ -0,0 +1,7 @@
|
||||
const config = require('@tih/tailwind-config/tailwind.config.js');
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
...config,
|
||||
content: [...config.content, './stories/**/*.{js,jsx,ts,tsx,md,mdx}'],
|
||||
};
|
||||
@ -30,6 +30,7 @@
|
||||
"@tih/tsconfig": "*",
|
||||
"@types/react": "^18.0.21",
|
||||
"@types/react-dom": "^18.0.6",
|
||||
"autoprefixer": "^10.4.12",
|
||||
"concurrently": "^7.4.0",
|
||||
"eslint": "^8.24.0",
|
||||
"eslint-config-tih": "*",
|
||||
|
||||
@ -4,8 +4,10 @@ import type { UrlObject } from 'url';
|
||||
|
||||
import Spinner from '../Spinner';
|
||||
|
||||
export type ButtonAddOnPosition = 'end' | 'start';
|
||||
export type ButtonDisplay = 'block' | 'inline';
|
||||
export type ButtonSize = 'lg' | 'md' | 'sm';
|
||||
export type ButtonType = 'button' | 'reset' | 'submit';
|
||||
export type ButtonVariant =
|
||||
| 'primary'
|
||||
| 'secondary'
|
||||
@ -14,7 +16,7 @@ export type ButtonVariant =
|
||||
| 'tertiary';
|
||||
|
||||
type Props = Readonly<{
|
||||
addonPosition?: 'end' | 'start';
|
||||
addonPosition?: ButtonAddOnPosition;
|
||||
'aria-controls'?: string;
|
||||
className?: string;
|
||||
display?: ButtonDisplay;
|
||||
@ -26,7 +28,7 @@ type Props = Readonly<{
|
||||
label: string;
|
||||
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
|
||||
size?: ButtonSize;
|
||||
type?: 'button' | 'submit';
|
||||
type?: ButtonType;
|
||||
variant: ButtonVariant;
|
||||
}>;
|
||||
|
||||
|
||||
@ -1,42 +0,0 @@
|
||||
import * as React from 'react';
|
||||
|
||||
export function CounterButton() {
|
||||
const [count, setCount] = React.useState(0);
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
background: `rgba(0,0,0,0.05)`,
|
||||
borderRadius: `8px`,
|
||||
fontWeight: 500,
|
||||
padding: '1.5rem',
|
||||
}}>
|
||||
<p className="text-green-500" style={{ margin: '0 0 1.5rem 0' }}>
|
||||
This component is from{' '}
|
||||
<code
|
||||
style={{
|
||||
background: `rgba(0,0,0,0.1)`,
|
||||
borderRadius: '0.25rem',
|
||||
padding: '0.2rem 0.3rem',
|
||||
}}>
|
||||
@tih/ui
|
||||
</code>
|
||||
</p>
|
||||
<div>
|
||||
<button
|
||||
style={{
|
||||
background: 'black',
|
||||
border: 'none',
|
||||
borderRadius: '0.25rem',
|
||||
color: 'white',
|
||||
cursor: 'pointer',
|
||||
display: 'inline-block',
|
||||
padding: '0.5rem 1rem',
|
||||
}}
|
||||
type="button"
|
||||
onClick={() => setCount((c) => c + 1)}>
|
||||
Count: {count}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
import * as React from 'react';
|
||||
export function NewTabLink({
|
||||
children,
|
||||
href,
|
||||
...other
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
href: string;
|
||||
}) {
|
||||
return (
|
||||
<a href={href} rel="noreferrer" target="_blank" {...other}>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
export { default as Button } from './Button';
|
||||
export * from './Button';
|
||||
export { CounterButton } from './CounterButton';
|
||||
export { NewTabLink } from './NewTabLink';
|
||||
export { default as Spinner } from './Spinner';
|
||||
export * from './Spinner';
|
||||
|
||||
15
yarn.lock
15
yarn.lock
@ -2372,6 +2372,17 @@
|
||||
regenerator-runtime "^0.13.7"
|
||||
ts-dedent "^2.0.0"
|
||||
|
||||
"@storybook/addon-postcss@^2.0.0":
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-postcss/-/addon-postcss-2.0.0.tgz#ec61cb9bb2662f408072b35c466c7df801c28498"
|
||||
integrity sha512-Nt82A7e9zJH4+A+VzLKKswUfru+T6FJTakj4dccP0i8DSn7a0CkzRPrLuZBq8tg4voV6gD74bcDf3gViCVBGtA==
|
||||
dependencies:
|
||||
"@storybook/node-logger" "^6.1.14"
|
||||
css-loader "^3.6.0"
|
||||
postcss "^7.0.35"
|
||||
postcss-loader "^4.2.0"
|
||||
style-loader "^1.3.0"
|
||||
|
||||
"@storybook/addon-toolbars@6.5.12":
|
||||
version "6.5.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-6.5.12.tgz#ea81c63ae56eae8bc1d3b5a358cff66ae5a2d66e"
|
||||
@ -2858,7 +2869,7 @@
|
||||
prettier ">=2.2.1 <=2.3.0"
|
||||
ts-dedent "^2.0.0"
|
||||
|
||||
"@storybook/node-logger@6.5.12":
|
||||
"@storybook/node-logger@6.5.12", "@storybook/node-logger@^6.1.14":
|
||||
version "6.5.12"
|
||||
resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.5.12.tgz#0f9efcd1a37c7aae493b22fe33cacca87c135b9b"
|
||||
integrity sha512-jdLtT3mX5GQKa+0LuX0q0sprKxtCGf6HdXlKZGD5FEuz4MgJUGaaiN0Hgi+U7Z4tVNOtSoIbYBYXHqfUgJrVZw==
|
||||
@ -11442,7 +11453,7 @@ postcss@8.4.14:
|
||||
picocolors "^1.0.0"
|
||||
source-map-js "^1.0.2"
|
||||
|
||||
postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6:
|
||||
postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.35, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6:
|
||||
version "7.0.39"
|
||||
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
|
||||
integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
|
||||
|
||||
Reference in New Issue
Block a user