Yangshun Tay
2 years ago
parent
de33d38e1b
commit
842837fb4e
@ -1 +1,6 @@
|
|||||||
|
import 'tailwindcss/tailwind.css';
|
||||||
import '@tih/ui/dist/styles.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 = {
|
module.exports = {
|
||||||
plugins: {
|
plugins: {
|
||||||
// Specifying the config is not necessary in most cases, but it is included
|
tailwindcss: {},
|
||||||
// here to share the same config across the entire monorepo
|
|
||||||
tailwindcss: { config },
|
|
||||||
autoprefixer: {},
|
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 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 {
|
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',
|
title: 'Button',
|
||||||
component: 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>;
|
} as ComponentMeta<typeof Button>;
|
||||||
|
|
||||||
//👇 We create a “template” of how args map to rendering
|
export const Basic = {
|
||||||
const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
|
args: {
|
||||||
|
label: 'Click Me',
|
||||||
export const PrimaryButton = Template.bind({});
|
|
||||||
|
|
||||||
PrimaryButton.args = {
|
|
||||||
label: 'Button text',
|
|
||||||
size: 'md',
|
size: 'md',
|
||||||
variant: 'primary',
|
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 = {
|
export function Size() {
|
||||||
label: 'Button text',
|
return (
|
||||||
size: 'md',
|
<div className="space-x-4">
|
||||||
variant: 'secondary',
|
{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 { default as Button } from './Button';
|
||||||
export * from './Button';
|
export * from './Button';
|
||||||
export { CounterButton } from './CounterButton';
|
export { default as Spinner } from './Spinner';
|
||||||
export { NewTabLink } from './NewTabLink';
|
export * from './Spinner';
|
||||||
|
|||||||
Loading…
Reference in new issue