diff --git a/.storybook/preview.js b/.storybook/preview.js index f16824e..da71392 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,5 +1,5 @@ import * as React from 'react' -import { ThemeProvider, defaultTheme } from '@retail-ui/theme' +import { ThemeProvider } from '@retail-ui/theme' import '../styles/tailwind.css' export const parameters = { @@ -8,7 +8,7 @@ export const parameters = { const ThemeWrapper = (Story) => { return ( - + ) diff --git a/README.md b/README.md index c214d1c..cde6a04 100644 --- a/README.md +++ b/README.md @@ -1,29 +1,58 @@ -# Retail UI +# Retail UI 🛒 (Power by Tailwindcss) -The collection of react component power by tailwindcss +A collection of accessible and reusable components for React to rapid development of gorgeous interfaces with Tailwind CSS - utility-first CSS framework. -## Check list [WIP] +> I'm learning setup my own the modern project of development with `monorepo` `yarn workspace`, `convention commit` `continuous integration`, `multiple braches`, `testing library` publish to `npmjs.org` and many more ... -[TODO](TODO.md) +--- + +## Why another UI library + +The awesome feelings when developing a `React` application with `Tailwindcss` can be leveraged to another level if we have a more primitive component used in web development. + +I'm lazy people, I'm wanna keep writting my Tailwindcss and React together without having to integrate other UI component, so I'm created this UI for people like me because it hard to use another UI library if we do'nt take out the fully documentation. + +## Feature + +With ability to easily build complex and customizable UI of tailwindcss. Retail UI built upon the following principles: + +- Dark theme compatible. +- Highly customizable via `tailwindcss`. +- Provide accessible out-of-the-box (Designed to listen to the real screen reader) +- Easier to learn and access. Check our Storybook +- `Typescript` by default for safety world + +--- ## Installing -`yarn add tailwindcss @retail-ui/core` +Yarn + +```sh +yarn add tailwindcss @retail-ui/core +``` + +Npm + +```sh +npm i tailwindcss @retail-ui/core +``` -`npm i tailwindcss @retail-ui/core` +--- ## Usage -### Simple tailwindcss setup +**Simple tailwindcss setup** `tailwind.config.js` ```javascript const defaultTheme = require("tailwindcss/defaultTheme") +// Our default theme const { resolveConfig } = require("@retail-ui/core") module.exports = resolveConfig({ - purge: ["{app,pages}/**/*.{js,jsx,ts,tsx}"], # your purge files + purge: ["src/**/*.{js,jsx,ts,tsx}"], # your purge files // experimental: "all", # experimental tailwindcss theme: { extend: { @@ -58,7 +87,7 @@ module.exports = { @tailwind utilities; ``` -Wrapping our `Provider` +**Wrapping our `Provider`** Here is a sample of `Next.js` setup @@ -68,12 +97,11 @@ Your `_app.tsx` root file import { ThemeProvider, defaultTheme } from '@retail-ui/core' import { OtherProvider } from 'other-packages' -const AppProvider: React.FC = ({ children }) => { +const AppProvider: React.FC = (props) => { + const { children } = props return ( - - {children} - + {children} ) } @@ -86,3 +114,23 @@ export default function App({ Component, pageProps }: AppProps) { ) } ``` + +**Ready to use** + +```tsx +import { Button } from '@retail-ui/core' + +const AwesomeComponent: React.FC = (props) => { + return ( +
+ +
+ ) +} + +--- + +## Check list [WIP] + +[TODO](TODO.md) +``` diff --git a/TODO.md b/TODO.md index c357268..d00da77 100644 --- a/TODO.md +++ b/TODO.md @@ -6,20 +6,6 @@ Project Description ### **Todo** -- [ ] 🔎 core -- [ ] Docs -- [ ] Checkbox -- [ ] Collapse -- [ ] Dialog -- [ ] Drawer -- [ ] Dropdown -- [ ] Image -- [ ] Pagination -- [ ] Status -- [ ] Switch -- [ ] Table -- [ ] Transition - ### In Progress ### Done ✓ @@ -40,3 +26,16 @@ Project Description - [x] heroicons - [x] hooks - [x] useCreateCtx +- [x] 🔎 core +- [x] Docs +- [x] Checkbox +- [x] Collapse +- [x] Dialog +- [x] Drawer +- [x] Dropdown +- [x] Image +- [x] Pagination +- [x] Status +- [x] Switch +- [x] Table +- [x] Transition diff --git a/_templates/component/with-prompt/index.ejs.t b/_templates/component/with-prompt/index.ejs.t index 9373e4e..2962e39 100644 --- a/_templates/component/with-prompt/index.ejs.t +++ b/_templates/component/with-prompt/index.ejs.t @@ -2,3 +2,4 @@ to: packages/<%= name %>/src/index.tsx --- export * from './<%= h.changeCase.pascal(name) %>' +export * from './styles' diff --git a/_templates/component/with-prompt/name.ejs.t b/_templates/component/with-prompt/name.ejs.t index b71e6c7..3af0f6a 100644 --- a/_templates/component/with-prompt/name.ejs.t +++ b/_templates/component/with-prompt/name.ejs.t @@ -1,18 +1,22 @@ --- to: packages/<%= name %>/src/<%= h.changeCase.pascal(name) %>.tsx --- +import clsx from 'clsx' import * as React from 'react' -export type <%= h.changeCase.pascal(name) %>Props = React.PropsWithChildren<{ - -}> +type ReactDivProps = React.HTMLAttributes type Ref = HTMLDivElement -export const <%= h.changeCase.pascal(name) %> = React.forwardRefProps>((props, ref) => { - const { children } = props - return
{children}
+export type <%= h.changeCase.pascal(name) %>Props = { + +} + +export const <%= h.changeCase.pascal(name) %> = React.forwardRefProps>((props, ref) => { + const { children, className, ...rest } = props + + const cls = clsx(className) + + return
{children}
}) <%= h.changeCase.pascal(name) %>.displayName = '<%= h.changeCase.pascal(name) %>' - -export default <%= h.changeCase.pascal(name) %> diff --git a/_templates/component/with-prompt/name.stories.ejs.t b/_templates/component/with-prompt/name.stories.ejs.t index 73417a8..c3e9227 100644 --- a/_templates/component/with-prompt/name.stories.ejs.t +++ b/_templates/component/with-prompt/name.stories.ejs.t @@ -1,22 +1,23 @@ --- to: packages/<%= name %>/stories/<%= h.changeCase.pascal(name) %>.stories.tsx --- -import * as React from 'react'; -import { <%= h.changeCase.pascal(name) %>, <%= h.changeCase.pascal(name) %>Props } from '../src'; +import { Meta, Story } from '@storybook/react/types-6-0' +import * as React from 'react' -const meta = { +import { <%= h.changeCase.pascal(name) %>, <%= h.changeCase.pascal(name) %>Props } from '../src' + +const meta: Meta<<%= h.changeCase.pascal(name) %>Props> = { title: 'Retail-UI/<%= h.changeCase.pascal(name) %>', component: <%= h.changeCase.pascal(name) %>, -}; + args: {}, +} -export default meta; +export default meta -const Template = (args: <%= h.changeCase.pascal(name) %>Props) => ( +const Template: Story<<%= h.changeCase.pascal(name) %>Props> = (args) => ( <<%= h.changeCase.pascal(name) %> {...args} data-testid={meta.title} /> -); +) + +export const Simple = Template.bind({}) +Simple.args = {} -export const Simple = Template.bind({}); -// @ts-ignore -Simple.args = { - children: '<%= h.changeCase.pascal(name) %>', -}; diff --git a/_templates/component/with-prompt/name.test.ejs.t b/_templates/component/with-prompt/name.test.ejs.t index d367a72..788fc57 100644 --- a/_templates/component/with-prompt/name.test.ejs.t +++ b/_templates/component/with-prompt/name.test.ejs.t @@ -1,14 +1,14 @@ --- to: packages/<%= name %>/test/<%= h.changeCase.pascal(name) %>.test.tsx --- -import * as React from 'react'; -import { render } from '@retail-ui/test-utils'; +import { render } from '@retail-ui/test-utils' +import * as React from 'react' -import * as <%= h.changeCase.pascal(name) %> from '../stories/<%= h.changeCase.pascal(name) %>.stories'; +import * as <%= h.changeCase.pascal(name) %> from '../stories/<%= h.changeCase.pascal(name) %>.stories' describe('<%= h.changeCase.pascal(name) %>', () => { it('renders correctly', () => { - const { asFragment } = render(<<%= h.changeCase.pascal(name) %>.Simple />) + const { asFragment } = render(<<%= h.changeCase.pascal(name) %>.Simple content="Test title" />) expect(asFragment()).toMatchSnapshot() - }); -}); + }) +}) diff --git a/_templates/component/with-prompt/package.ejs.t b/_templates/component/with-prompt/package.ejs.t index 2f08be1..2eb8928 100644 --- a/_templates/component/with-prompt/package.ejs.t +++ b/_templates/component/with-prompt/package.ejs.t @@ -45,5 +45,5 @@ to: packages/<%= name %>/package.json "peerDependencies": { "react": ">=16" }, - "devDependencies": {} + "dependencies": {} } diff --git a/package.json b/package.json index e1a309e..14a8f85 100644 --- a/package.json +++ b/package.json @@ -19,9 +19,9 @@ }, "scripts": { "bootstrap": "yarn install --frozen-lockfile && yarn build:packages", + "clean:packages": "rm -rf packages/**/node_modules packages/**/dist", "build:packages": "lerna run build", "build:storybook": "yarn build:tailwind && build-storybook", - "start": "lerna run start --stream --parallel", "format": "yarn prettier --write \"**/*\"", "lint": "yarn eslint \"**/*.{js,jsx,ts,tsx,mdx}\"", "prepublishOnly": "yarn bootstrap", @@ -29,8 +29,7 @@ "test": "tsdx test", "test:changes": "tsdx test --changedSince master", "test:ci": "yarn test --ci --coverage --maxWorkers=2", - "test:watch": "tsdx test --watch", - "build:tailwind": "postcss styles/base.css -o styles/tailwind.css" + "test:watch": "tsdx test --watch" }, "devDependencies": { "@babel/core": "^7.11.1", @@ -47,12 +46,12 @@ "@testing-library/jest-dom": "^5.11.3", "@testing-library/react": "^10.4.8", "@types/jest": "^26.0.10", + "@types/lodash": "^4.14.161", "@types/moment": "^2.13.0", "@types/node": "^14.0.27", "@types/react": "^16.9.46", "@types/react-dom": "^16.9.8", "@types/react-test-renderer": "^16.9.3", - "@types/styled-components": "^5.1.2", "@types/tinycolor2": "^1.4.2", "autoprefixer": "^9.8.6", "babel-jest": "^26.3.0", @@ -67,13 +66,13 @@ "lerna": "^3.22.1", "lerna-changelog": "^1.0.1", "lint-staged": "^10.2.11", + "lodash": "^4.17.20", "postcss-cli": "^7.1.1", "postcss-preset-env": "^6.7.0", "react": "^16.13.1", "react-dom": "^16.13.1", "react-is": "^16.13.1", "react-test-renderer": "^16.13.1", - "styled-components": "^5.1.1", "tailwindcss": "^1.7.6", "tailwindcss-multi-theme": "^1.0.3", "tinycolor2": "^1.4.1", @@ -103,6 +102,5 @@ "eslint-plugin-testing-library": "^3.6.0", "eslint-plugin-unicorn": "^21.0.0", "prettier": "^2.0.5" - }, - "dependencies": {} + } } diff --git a/packages/action-buttons/CHANGELOG.md b/packages/action-buttons/CHANGELOG.md index 2ba290a..1e784cf 100644 --- a/packages/action-buttons/CHANGELOG.md +++ b/packages/action-buttons/CHANGELOG.md @@ -3,6 +3,40 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.6.0](https://github.com/sondh0127/retail-ui/compare/@retail-ui/action-buttons@0.5.0...@retail-ui/action-buttons@0.6.0) (2020-09-10) + +### Features + +- **all:** bump devdeps to deps ([429a82f](https://github.com/sondh0127/retail-ui/commit/429a82f613c307ff079f78fe15ab9e271620ecdf)) + +# [0.5.0](https://github.com/sondh0127/retail-ui/compare/@retail-ui/action-buttons@0.4.1...@retail-ui/action-buttons@0.5.0) (2020-09-07) + +### Features + +- **all:** refactor all styles, theme ([ed31c21](https://github.com/sondh0127/retail-ui/commit/ed31c219cd925c3f8340066f504f2527a9e911bf)) + +## [0.4.1](https://github.com/sondh0127/retail-ui/compare/@retail-ui/action-buttons@0.4.0...@retail-ui/action-buttons@0.4.1) (2020-09-06) + +**Note:** Version bump only for package @retail-ui/action-buttons + +# [0.4.0](https://github.com/sondh0127/retail-ui/compare/@retail-ui/action-buttons@0.3.2...@retail-ui/action-buttons@0.4.0) (2020-09-04) + +### Bug Fixes + +- **all:** fix all component props ([b84c029](https://github.com/sondh0127/retail-ui/commit/b84c0296dbb362d1467cb49544bc30493ea6f2c0)), closes [#10](https://github.com/sondh0127/retail-ui/issues/10) + +### Features + +- **all:** add and migrate all the other component from draft packages ([2401dcf](https://github.com/sondh0127/retail-ui/commit/2401dcffeed92aa322be2944d4cfa9b8002e6e53)) + +### BREAKING CHANGES + +- **all:** use React.ReactNode for icon + +## [0.3.2](https://github.com/sondh0127/retail-ui/compare/@retail-ui/action-buttons@0.3.1...@retail-ui/action-buttons@0.3.2) (2020-09-03) + +**Note:** Version bump only for package @retail-ui/action-buttons + ## [0.3.1](https://github.com/sondh0127/retail-ui/compare/@retail-ui/action-buttons@0.3.0...@retail-ui/action-buttons@0.3.1) (2020-09-02) **Note:** Version bump only for package @retail-ui/action-buttons diff --git a/packages/action-buttons/package.json b/packages/action-buttons/package.json index 0e9316a..0ead428 100644 --- a/packages/action-buttons/package.json +++ b/packages/action-buttons/package.json @@ -1,6 +1,6 @@ { "name": "@retail-ui/action-buttons", - "version": "0.3.1", + "version": "0.6.0", "description": "The ActionButtons component of @retail-ui", "keywords": [ "react", @@ -42,8 +42,8 @@ "peerDependencies": { "react": ">=16" }, - "devDependencies": { - "@retail-ui/button": "^0.2.4", - "@retail-ui/theme": "^0.3.0" + "dependencies": { + "@retail-ui/button": "^0.5.0", + "clsx": "^1.1.1" } } diff --git a/packages/action-buttons/src/ActionButtons.tsx b/packages/action-buttons/src/ActionButtons.tsx index ad8a769..41774c6 100644 --- a/packages/action-buttons/src/ActionButtons.tsx +++ b/packages/action-buttons/src/ActionButtons.tsx @@ -1,15 +1,21 @@ import { Button, ButtonProps } from '@retail-ui/button' -import { useThemeCtx } from '@retail-ui/theme' import clsx from 'clsx' import * as React from 'react' -export interface ActionButtonsProps extends ButtonProps { +import { ActionButtonsStyles } from './styles' + +type ReactButtonProps = Omit< + React.ButtonHTMLAttributes, + 'disabled' +> + +export type ActionButtonsProps = ButtonProps & { cancelText?: string submitText?: string onClickCancel?: () => void onClickSubmit?: () => void - submitProps?: ButtonProps - cancelProps?: ButtonProps + submitProps?: ReactButtonProps & ButtonProps + cancelProps?: ReactButtonProps & ButtonProps } export const ActionButtons: React.FC = (props) => { @@ -26,11 +32,8 @@ export const ActionButtons: React.FC = (props) => { size = 'sm', ...rest } = props - const { theme } = useThemeCtx() - - const actionButtonStyle = theme.ActionButtonsStyles - const cls = clsx(actionButtonStyle.base, isBlock && 'w-full') + const cls = clsx(ActionButtonsStyles.base, isBlock && 'w-full') return (
diff --git a/packages/action-buttons/src/index.tsx b/packages/action-buttons/src/index.tsx index 1e4610f..9e2d71b 100644 --- a/packages/action-buttons/src/index.tsx +++ b/packages/action-buttons/src/index.tsx @@ -1 +1,2 @@ export * from './ActionButtons' +export * from './styles' diff --git a/packages/theme/src/styles/ActionButtonsStyles.ts b/packages/action-buttons/src/styles.ts similarity index 100% rename from packages/theme/src/styles/ActionButtonsStyles.ts rename to packages/action-buttons/src/styles.ts diff --git a/packages/alert/CHANGELOG.md b/packages/alert/CHANGELOG.md index 70eb10d..91085be 100644 --- a/packages/alert/CHANGELOG.md +++ b/packages/alert/CHANGELOG.md @@ -3,6 +3,40 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.6.0](https://github.com/sondh0127/retail-ui/compare/@retail-ui/alert@0.5.0...@retail-ui/alert@0.6.0) (2020-09-10) + +### Features + +- **all:** bump devdeps to deps ([429a82f](https://github.com/sondh0127/retail-ui/commit/429a82f613c307ff079f78fe15ab9e271620ecdf)) + +# [0.5.0](https://github.com/sondh0127/retail-ui/compare/@retail-ui/alert@0.4.1...@retail-ui/alert@0.5.0) (2020-09-07) + +### Bug Fixes + +- **alert:** fix close alert ([eb9de03](https://github.com/sondh0127/retail-ui/commit/eb9de03ab187321f0861d94a31a089caf40515f9)) + +### Features + +- **all:** refactor all styles, theme ([ed31c21](https://github.com/sondh0127/retail-ui/commit/ed31c219cd925c3f8340066f504f2527a9e911bf)) + +## [0.4.1](https://github.com/sondh0127/retail-ui/compare/@retail-ui/alert@0.4.0...@retail-ui/alert@0.4.1) (2020-09-06) + +**Note:** Version bump only for package @retail-ui/alert + +# [0.4.0](https://github.com/sondh0127/retail-ui/compare/@retail-ui/alert@0.3.2...@retail-ui/alert@0.4.0) (2020-09-04) + +### Bug Fixes + +- **all:** fix all component props ([b84c029](https://github.com/sondh0127/retail-ui/commit/b84c0296dbb362d1467cb49544bc30493ea6f2c0)), closes [#10](https://github.com/sondh0127/retail-ui/issues/10) + +### BREAKING CHANGES + +- **all:** use React.ReactNode for icon + +## [0.3.2](https://github.com/sondh0127/retail-ui/compare/@retail-ui/alert@0.3.1...@retail-ui/alert@0.3.2) (2020-09-03) + +**Note:** Version bump only for package @retail-ui/alert + ## [0.3.1](https://github.com/sondh0127/retail-ui/compare/@retail-ui/alert@0.3.0...@retail-ui/alert@0.3.1) (2020-09-02) **Note:** Version bump only for package @retail-ui/alert diff --git a/packages/alert/package.json b/packages/alert/package.json index a122612..70c00e5 100644 --- a/packages/alert/package.json +++ b/packages/alert/package.json @@ -1,6 +1,6 @@ { "name": "@retail-ui/alert", - "version": "0.3.1", + "version": "0.6.0", "description": "The Alert component of @retail-ui", "keywords": [ "react", @@ -42,9 +42,9 @@ "peerDependencies": { "react": ">=16" }, - "devDependencies": { - "@retail-ui/button-icon": "^0.3.0", - "@retail-ui/heroicons": "^0.2.3", - "@retail-ui/theme": "^0.3.0" + "dependencies": { + "@retail-ui/button-icon": "^0.6.0", + "@retail-ui/heroicons": "^0.3.0", + "clsx": "^1.1.1" } } diff --git a/packages/alert/src/Alert.tsx b/packages/alert/src/Alert.tsx index 6776dc1..a354e47 100644 --- a/packages/alert/src/Alert.tsx +++ b/packages/alert/src/Alert.tsx @@ -1,4 +1,4 @@ -import { ButtonIcon, ButtonIconVariant } from '@retail-ui/button-icon' +import { ButtonIcon, ButtonIconProps } from '@retail-ui/button-icon' import { BanOutline, CheckOutline, @@ -6,10 +6,14 @@ import { ExclamationOutline, XSolid, } from '@retail-ui/heroicons' -import { Theme, useThemeCtx } from '@retail-ui/theme' import clsx from 'clsx' import * as React from 'react' +import { AlertStyles } from './styles' + +type ReactDivProps = Omit, ''> +type Ref = HTMLDivElement + const ALERT_STATUS_ICON = { primary: ExclamationCircleOutline, success: CheckOutline, @@ -17,14 +21,14 @@ const ALERT_STATUS_ICON = { warning: ExclamationOutline, } -type AlertVariant = keyof Theme['AlertStyles']['variant'] -type AlertColor = keyof Theme['AlertStyles']['variant']['default'] -type AlertSize = keyof Theme['AlertStyles']['size'] -type AlertBordered = keyof Theme['AlertStyles']['bordered'] +type AlertVariant = keyof typeof AlertStyles['variant'] +type AlertColor = keyof typeof AlertStyles['variant']['default'] +type AlertSize = keyof typeof AlertStyles['size'] +type AlertBordered = keyof typeof AlertStyles['bordered'] type AlertStatusIcon = keyof typeof ALERT_STATUS_ICON -export type AlertProps = React.PropsWithChildren<{ - title: string | React.ReactNode +export type AlertProps = { + content: React.ReactNode variant?: AlertVariant color?: AlertColor statusIcon?: AlertStatusIcon @@ -32,86 +36,86 @@ export type AlertProps = React.PropsWithChildren<{ bordered?: AlertBordered hasClose?: boolean onClose?: () => void -}> - -type Ref = HTMLDivElement +} -export const Alert = React.forwardRef((props, ref) => { - const { - title, - children, - variant = 'default', - color = 'primary', - size = 'base', - bordered, - hasClose = false, - statusIcon, - onClose, - } = props +export const Alert = React.forwardRef( + (props, ref) => { + const { + content, + children, + variant = 'default', + color = 'primary', + size = 'base', + bordered, + hasClose = false, + statusIcon, + onClose, + className, + ...rest + } = props - const { - theme: { AlertStyles }, - } = useThemeCtx() - const variantCls = AlertStyles.variant + const variantCls = AlertStyles.variant - const colorCls = variantCls[variant] - const sizeCls = AlertStyles.size - const borderedCls = AlertStyles.bordered + const colorCls = variantCls[variant] + const sizeCls = AlertStyles.size + const borderedCls = AlertStyles.bordered - const cls = clsx( - AlertStyles.base, - colorCls[color], - sizeCls[size], - bordered && borderedCls[bordered], - hasClose && AlertStyles.hasClose, - ) + const cls = clsx( + className, + AlertStyles.base, + colorCls[color], + sizeCls[size], + bordered && borderedCls[bordered], + hasClose && AlertStyles.hasClose, + ) - const btnCls = clsx(AlertStyles.btnClose) - const btnVariant: Record = { - default: 'light', - outline: 'outline', - solid: 'default', - } + const btnCls = clsx(AlertStyles.btnClose) + const btnVariant: Record = { + default: 'light', + outline: 'outline', + solid: 'default', + } - const StatusIcon = statusIcon ? ALERT_STATUS_ICON[statusIcon] : null - const statusIconCls = clsx(AlertStyles.statusIcon) + const StatusIcon = statusIcon ? ALERT_STATUS_ICON[statusIcon] : null + const statusIconCls = clsx(AlertStyles.statusIcon) - const descriptionCls = clsx(AlertStyles.description) + const descriptionCls = clsx(AlertStyles.description) - return ( -
- {StatusIcon && ( - - )} - {!children && title} - {children && ( -
- {title} -

{children}

-
- )} - {hasClose && ( -
- + {StatusIcon && ( + -
- )} -
- ) -}) + )} + {!children && content} + {children && ( +
+ {content} +

{children}

+
+ )} + {hasClose && ( +
+ } + variant={btnVariant[variant]} + onClick={onClose} + /> +
+ )} +
+ ) + }, +) Alert.displayName = 'Alert' diff --git a/packages/alert/src/index.tsx b/packages/alert/src/index.tsx index 1d5a733..e29d97e 100644 --- a/packages/alert/src/index.tsx +++ b/packages/alert/src/index.tsx @@ -1 +1,2 @@ export * from './Alert' +export * from './styles' diff --git a/packages/theme/src/styles/AlertStyles.ts b/packages/alert/src/styles.ts similarity index 100% rename from packages/theme/src/styles/AlertStyles.ts rename to packages/alert/src/styles.ts diff --git a/packages/alert/stories/Alert.stories.tsx b/packages/alert/stories/Alert.stories.tsx index 93dac3b..3b00bf2 100644 --- a/packages/alert/stories/Alert.stories.tsx +++ b/packages/alert/stories/Alert.stories.tsx @@ -1,22 +1,29 @@ +import { Meta, Story } from '@storybook/react/types-6-0' import * as React from 'react' import { Alert, AlertProps } from '../src' -const meta = { +const meta: Meta = { title: 'Retail-UI/Alert', component: Alert, + args: { + content: `A alert that informs you of stuff`, + }, } export default meta -const Template = (args: AlertProps) => ( - +const Template: Story = (args) => ( + ) export const Simple = Template.bind({}) -// @ts-ignore Simple.args = {} + +export const HasClose = Template.bind({}) +HasClose.args = { + hasClose: true, + onClose: () => { + alert('onClose') + }, +} diff --git a/packages/alert/test/Alert.test.tsx b/packages/alert/test/Alert.test.tsx index e1745cd..8a7e742 100644 --- a/packages/alert/test/Alert.test.tsx +++ b/packages/alert/test/Alert.test.tsx @@ -5,7 +5,7 @@ import * as Alert from '../stories/Alert.stories' describe('Alert', () => { it('renders correctly', () => { - const { asFragment } = render() + const { asFragment } = render() expect(asFragment()).toMatchSnapshot() }) }) diff --git a/packages/alert/test/__snapshots__/Alert.test.tsx.snap b/packages/alert/test/__snapshots__/Alert.test.tsx.snap index 90700a1..78af294 100644 --- a/packages/alert/test/__snapshots__/Alert.test.tsx.snap +++ b/packages/alert/test/__snapshots__/Alert.test.tsx.snap @@ -4,6 +4,7 @@ exports[`Alert renders correctly 1`] = `