Yangshun Tay
2 years ago
parent
de33d38e1b
commit
842837fb4e
@ -1 +1,6 @@
|
||||
import 'tailwindcss/tailwind.css';
|
||||
import '@tih/ui/dist/styles.css';
|
||||
|
||||
export const parameters = {
|
||||
controls: { expanded: true },
|
||||
};
|
||||
|
||||
@ -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',
|
||||
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>
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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}'],
|
||||
};
|
||||
@ -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';
|
||||
|
||||
Loading…
Reference in new issue