From e38a8070060edb11a5899a7bef9b2e8ef27123c8 Mon Sep 17 00:00:00 2001 From: Alex Gabites Date: Sat, 20 Feb 2021 13:26:31 +1300 Subject: [PATCH 01/27] bump dependencies --- package-lock.json | 77 +++++++++++++++++++++++------------------------ package.json | 8 ++--- 2 files changed, 42 insertions(+), 43 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5e3469f..e914caa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2926,9 +2926,9 @@ } }, "@popperjs/core": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.6.0.tgz", - "integrity": "sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw==" + "version": "2.7.2", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.7.2.tgz", + "integrity": "sha512-3LC1/M2ZFcmDrSkD1byT/hZzoPehZkDucbDShLnZ+/Gwkr6CAxiQ2kWy1UtJeLGADe58hTWkx22YEHqjPGUKzw==" }, "@reach/router": { "version": "1.3.4", @@ -3014,7 +3014,8 @@ "@scarf/scarf": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@scarf/scarf/-/scarf-1.1.0.tgz", - "integrity": "sha512-b2iE8kjjzzUo2WZ0xuE2N77kfnTds7ClrDxcz3Atz7h2XrNVoAPUoT75i7CY0st5x++70V91Y+c6RpBX9MX7Jg==" + "integrity": "sha512-b2iE8kjjzzUo2WZ0xuE2N77kfnTds7ClrDxcz3Atz7h2XrNVoAPUoT75i7CY0st5x++70V91Y+c6RpBX9MX7Jg==", + "dev": true }, "@sinonjs/commons": { "version": "1.8.2", @@ -4392,15 +4393,15 @@ } }, "@typescript-eslint/experimental-utils": { - "version": "4.14.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.14.2.tgz", - "integrity": "sha512-mV9pmET4C2y2WlyHmD+Iun8SAEqkLahHGBkGqDVslHkmoj3VnxnGP4ANlwuxxfq1BsKdl/MPieDbohCEQgKrwA==", + "version": "4.15.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.15.1.tgz", + "integrity": "sha512-9LQRmOzBRI1iOdJorr4jEnQhadxK4c9R2aEAsm7WE/7dq8wkKD1suaV0S/JucTL8QlYUPU1y2yjqg+aGC0IQBQ==", "dev": true, "requires": { "@types/json-schema": "^7.0.3", - "@typescript-eslint/scope-manager": "4.14.2", - "@typescript-eslint/types": "4.14.2", - "@typescript-eslint/typescript-estree": "4.14.2", + "@typescript-eslint/scope-manager": "4.15.1", + "@typescript-eslint/types": "4.15.1", + "@typescript-eslint/typescript-estree": "4.15.1", "eslint-scope": "^5.0.0", "eslint-utils": "^2.0.0" }, @@ -4546,33 +4547,32 @@ } }, "@typescript-eslint/scope-manager": { - "version": "4.14.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.14.2.tgz", - "integrity": "sha512-cuV9wMrzKm6yIuV48aTPfIeqErt5xceTheAgk70N1V4/2Ecj+fhl34iro/vIssJlb7XtzcaD07hWk7Jk0nKghg==", + "version": "4.15.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.15.1.tgz", + "integrity": "sha512-ibQrTFcAm7yG4C1iwpIYK7vDnFg+fKaZVfvyOm3sNsGAerKfwPVFtYft5EbjzByDJ4dj1WD8/34REJfw/9wdVA==", "dev": true, "requires": { - "@typescript-eslint/types": "4.14.2", - "@typescript-eslint/visitor-keys": "4.14.2" + "@typescript-eslint/types": "4.15.1", + "@typescript-eslint/visitor-keys": "4.15.1" } }, "@typescript-eslint/types": { - "version": "4.14.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.14.2.tgz", - "integrity": "sha512-LltxawRW6wXy4Gck6ZKlBD05tCHQUj4KLn4iR69IyRiDHX3d3NCAhO+ix5OR2Q+q9bjCrHE/HKt+riZkd1At8Q==", + "version": "4.15.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.15.1.tgz", + "integrity": "sha512-iGsaUyWFyLz0mHfXhX4zO6P7O3sExQpBJ2dgXB0G5g/8PRVfBBsmQIc3r83ranEQTALLR3Vko/fnCIVqmH+mPw==", "dev": true }, "@typescript-eslint/typescript-estree": { - "version": "4.14.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.14.2.tgz", - "integrity": "sha512-ESiFl8afXxt1dNj8ENEZT12p+jl9PqRur+Y19m0Z/SPikGL6rqq4e7Me60SU9a2M28uz48/8yct97VQYaGl0Vg==", + "version": "4.15.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.15.1.tgz", + "integrity": "sha512-z8MN3CicTEumrWAEB2e2CcoZa3KP9+SMYLIA2aM49XW3cWIaiVSOAGq30ffR5XHxRirqE90fgLw3e6WmNx5uNw==", "dev": true, "requires": { - "@typescript-eslint/types": "4.14.2", - "@typescript-eslint/visitor-keys": "4.14.2", + "@typescript-eslint/types": "4.15.1", + "@typescript-eslint/visitor-keys": "4.15.1", "debug": "^4.1.1", "globby": "^11.0.1", "is-glob": "^4.0.1", - "lodash": "^4.17.15", "semver": "^7.3.2", "tsutils": "^3.17.1" }, @@ -4653,12 +4653,12 @@ } }, "@typescript-eslint/visitor-keys": { - "version": "4.14.2", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.14.2.tgz", - "integrity": "sha512-KBB+xLBxnBdTENs/rUgeUKO0UkPBRs2vD09oMRRIkj5BEN8PX1ToXV532desXfpQnZsYTyLLviS7JrPhdL154w==", + "version": "4.15.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.15.1.tgz", + "integrity": "sha512-tYzaTP9plooRJY8eNlpAewTOqtWW/4ff/5wBjNVaJ0S0wC4Gpq/zDVRTJa5bq2v1pCNQ08xxMCndcvR+h7lMww==", "dev": true, "requires": { - "@typescript-eslint/types": "4.14.2", + "@typescript-eslint/types": "4.15.1", "eslint-visitor-keys": "^2.0.0" } }, @@ -8890,9 +8890,9 @@ } }, "eslint-plugin-jest": { - "version": "24.1.3", - "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-24.1.3.tgz", - "integrity": "sha512-dNGGjzuEzCE3d5EPZQ/QGtmlMotqnYWD/QpCZ1UuZlrMAdhG5rldh0N0haCvhGnUkSeuORS5VNROwF9Hrgn3Lg==", + "version": "24.1.5", + "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-24.1.5.tgz", + "integrity": "sha512-FIP3lwC8EzEG+rOs1y96cOJmMVpdFNreoDJv29B5vIupVssRi8zrSY3QadogT0K3h1Y8TMxJ6ZSAzYUmFCp2hg==", "dev": true, "requires": { "@typescript-eslint/experimental-utils": "^4.0.1" @@ -10092,9 +10092,9 @@ } }, "framer-motion": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-3.3.0.tgz", - "integrity": "sha512-bjUrwXfMJZ6D+HSMDiXbMGKmlWGnUux8HotWgORTZkdPTgKAndlRXjeC2ikCgNVo2ifmRvEla5ckP9JaZc7JKA==", + "version": "3.6.1", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-3.6.1.tgz", + "integrity": "sha512-sq3p8pKRyX3yi97X+ihALE1D1En2FjgEdBGk1Ng8J8MdycYesNdBK06LN875amFZ38umcRFdqFG1GQ0BEJ8eFQ==", "requires": { "@emotion/is-prop-valid": "^0.8.2", "framesync": "^5.0.0", @@ -16048,12 +16048,11 @@ } }, "polished": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/polished/-/polished-4.1.0.tgz", - "integrity": "sha512-y8IInTGHuwku7+O+wsJ7OOvNpJF7EPP/IDzF1uj9UJfEEKpMAfeq5gZ5UrtOksM7Jk4+hBAk6Ce8rFOOF4msZg==", + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/polished/-/polished-4.1.1.tgz", + "integrity": "sha512-4MZTrfPMPRLD7ac8b+2JZxei58zw6N1hFkdBDERif5Tlj19y3vPoPusrLG+mJIlPTGnUlKw3+yWz0BazvMx1vg==", "requires": { - "@babel/runtime": "^7.12.5", - "@scarf/scarf": "^1.1.0" + "@babel/runtime": "^7.12.5" } }, "popmotion": { diff --git a/package.json b/package.json index 7a23678..ee43ce4 100644 --- a/package.json +++ b/package.json @@ -43,13 +43,13 @@ "test": "tsdx test --passWithNoTests" }, "dependencies": { - "@popperjs/core": "^2.6.0", + "@popperjs/core": "^2.7.2", "@spicy-ui/styled-system": "0.0.1-alpha.3", "@types/styled-components": "^5.1.7", "deepmerge": "^4.2.2", "downshift": "^6.1.0", - "framer-motion": "^3.3.0", - "polished": "^4.1.0", + "framer-motion": "^3.6.1", + "polished": "^4.1.1", "react-fast-compare": "^3.2.0", "react-focus-lock": "^2.5.0", "react-icons": "^4.2.0", @@ -65,7 +65,7 @@ "@typescript-eslint/parser": "^4.15.1", "eslint": "^7.20.0", "eslint-config-airbnb-typescript": "^12.3.1", - "eslint-plugin-jest": "^24.1.3", + "eslint-plugin-jest": "^24.1.5", "eslint-plugin-react-hooks": "^4.2.0", "prettier": "^2.2.1", "react": "^17.0.1", From d28cb81c16898868ef966099aa0f1b3d84fec8a9 Mon Sep 17 00:00:00 2001 From: Alex Gabites Date: Sat, 20 Feb 2021 13:29:32 +1300 Subject: [PATCH 02/27] wrap menu in portal #39 --- src/components/Menu/Menu.stories.tsx | 7 +++---- src/components/Menu/Menu.tsx | 30 ++++++++++++++++++---------- 2 files changed, 22 insertions(+), 15 deletions(-) diff --git a/src/components/Menu/Menu.stories.tsx b/src/components/Menu/Menu.stories.tsx index 08c8251..5e7bf7a 100644 --- a/src/components/Menu/Menu.stories.tsx +++ b/src/components/Menu/Menu.stories.tsx @@ -3,7 +3,7 @@ import { Meta, Story } from '@storybook/react'; import * as React from 'react'; import { HiChevronDown } from 'react-icons/hi'; import { uid } from 'react-uid'; -import { Avatar, Box, Button, Flex, Menu, MenuDivider, MenuHeader, MenuItem, MenuProps, Text } from '..'; +import { Avatar, Box, Button, Flex, Menu, MenuDivider, MenuHeader, MenuItem, MenuProps, Stack, Text } from '..'; export default { title: 'Menu', @@ -59,7 +59,7 @@ export const InternalState: Story = (props) => ( ); export const CustomItems: Story = (props) => ( - <> + }> @@ -90,7 +90,6 @@ export const CustomItems: Story = (props) => ( 🏃‍♂️ - }>Menu}> {[ { text: 'Cut', kdb: 'Ctrl + X' }, @@ -107,5 +106,5 @@ export const CustomItems: Story = (props) => ( ))} - + ); diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index 13d5886..5c25222 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -4,6 +4,7 @@ import styled from 'styled-components'; import { sxMixin, SxProps, useComponentStyles } from '../../system'; import { runIfFn } from '../../util'; import { PopperProps, usePopper } from '../Popper'; +import { Portal } from '../Portal'; const Motion = styled(motion.div)(sxMixin); @@ -57,17 +58,24 @@ export const Menu: React.FC = (props) => { return ( <> - {React.cloneElement(runIfFn(trigger, { isOpen }), { ...triggerProps, onClick: onToggle })} - - {runIfFn(children, { isOpen })} - + {React.cloneElement(runIfFn(trigger, { isOpen }), { + ...triggerProps, + onClick: onToggle, + onKeyDown: ({ key }: React.KeyboardEvent) => (key === 'Enter' ? onToggle : undefined), + })} + + + {runIfFn(children, { isOpen })} + + ); }; From 7ad4cfd78b36aadea96c1eee83de4b9c727d88eb Mon Sep 17 00:00:00 2001 From: Alex Gabites Date: Sat, 20 Feb 2021 13:30:59 +1300 Subject: [PATCH 03/27] fix tag label prop --- src/components/Tag/Tag.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx index f3f24d1..00a8ace 100644 --- a/src/components/Tag/Tag.tsx +++ b/src/components/Tag/Tag.tsx @@ -26,13 +26,13 @@ export interface TagProps extends SxProps { } export const Tag = React.forwardRef((props, ref) => { - const { children, sx, as, isRound, color, size, variant, ...rest } = props; + const { children, sx, as, label, isRound, color, size, variant, ...rest } = props; const styles = useComponentStyles('Tag', props); return ( - {children} + {label || children} ); }); From 10198252df190a5e8204da27fa11024102821d5b Mon Sep 17 00:00:00 2001 From: Alex Gabites Date: Sat, 20 Feb 2021 13:34:25 +1300 Subject: [PATCH 04/27] remove outline style from open menu --- src/theme/components/Menu.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/theme/components/Menu.ts b/src/theme/components/Menu.ts index b14c1f4..2d21098 100644 --- a/src/theme/components/Menu.ts +++ b/src/theme/components/Menu.ts @@ -10,9 +10,10 @@ export const Menu: ComponentThemeConfig = { display: 'flex', flexDirection: 'column', bg: 'white', - borderWidth: '1px', borderRadius: 'sm', + borderWidth: '1px', boxShadow: 'sm', + outline: 0, overflow: 'hidden', userSelect: 'none', }), From 940ca0b33cc27b036cecbf0d719fc140763d4762 Mon Sep 17 00:00:00 2001 From: Alex Gabites Date: Sat, 20 Feb 2021 22:21:57 +1300 Subject: [PATCH 05/27] rename first story of each component to `usage` --- src/components/Alert/Alert.stories.tsx | 4 ++-- src/components/Avatar/Avatar.stories.tsx | 2 +- src/components/Avatar/AvatarGroup.stories.tsx | 6 +++-- src/components/Badge/Badge.stories.tsx | 2 +- src/components/Box/Box.stories.tsx | 2 +- src/components/Button/Button.stories.tsx | 2 +- src/components/Button/IconButton.stories.tsx | 2 +- src/components/Checkbox/Checkbox.stories.tsx | 4 ++-- .../CloseButton/CloseButton.stories.tsx | 2 +- src/components/Code/Code.stories.tsx | 2 +- .../Container/Container.stories.tsx | 2 +- src/components/Divider/Divider.stories.tsx | 2 +- src/components/Drawer/Drawer.stories.tsx | 2 +- src/components/Flex/Flex.stories.tsx | 2 +- src/components/Grid/Grid.stories.tsx | 4 ++-- src/components/Heading/Heading.stories.tsx | 2 +- src/components/Image/Image.stories.tsx | 4 ++-- src/components/Input/Input.stories.tsx | 2 +- src/components/Kbd/Kbd.stories.tsx | 4 ++-- src/components/Link/Link.stories.tsx | 2 +- src/components/Menu/Menu.stories.tsx | 8 ++----- src/components/Modal/Modal.stories.tsx | 6 +++-- src/components/Overlay/Overlay.stories.tsx | 2 +- src/components/Portal/Portal.stories.tsx | 2 +- src/components/Progress/Progress.stories.tsx | 8 +++++-- src/components/Radio/Radio.stories.tsx | 4 ++-- src/components/Select/Select.stories.tsx | 2 +- src/components/Skeleton/Skeleton.stories.tsx | 2 +- src/components/Spinner/Spinner.stories.tsx | 2 +- src/components/Stack/Stack.stories.tsx | 6 +++-- src/components/Switch/Switch.stories.tsx | 2 +- src/components/Tag/Tag.stories.tsx | 2 +- src/components/Text/Text.stories.tsx | 22 ++++++++++++++----- src/components/TextArea/TextArea.stories.tsx | 2 +- .../Toast/ToastProvider.stories.tsx | 2 +- src/components/Tooltip/Tooltip.stories.tsx | 10 ++++++--- 36 files changed, 79 insertions(+), 57 deletions(-) diff --git a/src/components/Alert/Alert.stories.tsx b/src/components/Alert/Alert.stories.tsx index 06a748b..ff103fc 100644 --- a/src/components/Alert/Alert.stories.tsx +++ b/src/components/Alert/Alert.stories.tsx @@ -8,9 +8,9 @@ export default { component: Alert, } as Meta; -export const Simple: Story = (props) => ( +export const Usage: Story = (props) => ( - This is a alert + Hey you! Are you using Spicy UI yet? ); diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx index 1d089ba..c577b02 100644 --- a/src/components/Avatar/Avatar.stories.tsx +++ b/src/components/Avatar/Avatar.stories.tsx @@ -8,7 +8,7 @@ export default { component: Avatar, } as Meta; -export const Simple: Story = (props) => ; +export const Usage: Story = (props) => ; export const Sizes: Story = () => ( diff --git a/src/components/Avatar/AvatarGroup.stories.tsx b/src/components/Avatar/AvatarGroup.stories.tsx index dd2a793..737db8d 100644 --- a/src/components/Avatar/AvatarGroup.stories.tsx +++ b/src/components/Avatar/AvatarGroup.stories.tsx @@ -7,7 +7,7 @@ export default { component: AvatarGroup, } as Meta; -export const Simple: Story = (props) => ( +export const Usage: Story = (props) => ( @@ -17,4 +17,6 @@ export const Simple: Story = (props) => ( ); -Simple.args = { max: 3 }; +Usage.args = { + max: 3, +}; diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx index a9bd739..5630f96 100644 --- a/src/components/Badge/Badge.stories.tsx +++ b/src/components/Badge/Badge.stories.tsx @@ -38,7 +38,7 @@ export default { component: Badge, } as Meta; -export const Simple: Story = (props) => Success; +export const Usage: Story = (props) => Success; export const Colors: Story = (props) => ( diff --git a/src/components/Box/Box.stories.tsx b/src/components/Box/Box.stories.tsx index 5ca0117..2540a8a 100644 --- a/src/components/Box/Box.stories.tsx +++ b/src/components/Box/Box.stories.tsx @@ -7,4 +7,4 @@ export default { component: Box, } as Meta; -export const Simple: Story = (props) => A Box 📦; +export const Usage: Story = (props) => A Box 📦; diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx index b8c6a10..c750c49 100644 --- a/src/components/Button/Button.stories.tsx +++ b/src/components/Button/Button.stories.tsx @@ -39,7 +39,7 @@ export default { component: Button, } as Meta; -export const Simple: Story = (props) => ; +export const Usage: Story = (props) => ; export const Colors: Story = (props) => (
diff --git a/src/components/Button/IconButton.stories.tsx b/src/components/Button/IconButton.stories.tsx index 59b13bb..6e70b4f 100644 --- a/src/components/Button/IconButton.stories.tsx +++ b/src/components/Button/IconButton.stories.tsx @@ -8,7 +8,7 @@ export default { component: IconButton, } as Meta; -export const Simple: Story = (props) => } />; +export const Usage: Story = (props) => } />; export const Colors: Story = () => } />; diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx index f7d05d0..8eac217 100644 --- a/src/components/Checkbox/Checkbox.stories.tsx +++ b/src/components/Checkbox/Checkbox.stories.tsx @@ -35,12 +35,12 @@ export default { component: Checkbox, } as Meta; -export const Simple: Story = (props) => { +export const Usage: Story = (props) => { const [isChecked, setIsChecked] = React.useState(false); return setIsChecked(Boolean(target.checked))} />; }; -Simple.args = { +Usage.args = { label: 'Checkbox', }; diff --git a/src/components/CloseButton/CloseButton.stories.tsx b/src/components/CloseButton/CloseButton.stories.tsx index 25df2c5..e349428 100644 --- a/src/components/CloseButton/CloseButton.stories.tsx +++ b/src/components/CloseButton/CloseButton.stories.tsx @@ -7,4 +7,4 @@ export default { component: CloseButton, } as Meta; -export const Simple: Story = (props) => ; +export const Usage: Story = (props) => ; diff --git a/src/components/Code/Code.stories.tsx b/src/components/Code/Code.stories.tsx index f5bc47a..635a3ec 100644 --- a/src/components/Code/Code.stories.tsx +++ b/src/components/Code/Code.stories.tsx @@ -38,7 +38,7 @@ export default { component: Code, } as Meta; -export const Simple: Story = (props) => console.log('hello world!'); +export const Usage: Story = (props) => console.log('hello world!'); export const Colors: Story = (props) => (
diff --git a/src/components/Container/Container.stories.tsx b/src/components/Container/Container.stories.tsx index 16ad5fe..3e638dd 100644 --- a/src/components/Container/Container.stories.tsx +++ b/src/components/Container/Container.stories.tsx @@ -7,7 +7,7 @@ export default { component: Container, } as Meta; -export const Simple: Story = (props) => ( +export const Usage: Story = (props) => ( Container inner diff --git a/src/components/Divider/Divider.stories.tsx b/src/components/Divider/Divider.stories.tsx index b5c8e4e..336af2f 100644 --- a/src/components/Divider/Divider.stories.tsx +++ b/src/components/Divider/Divider.stories.tsx @@ -7,7 +7,7 @@ export default { component: Divider, } as Meta; -export const Simple: Story = (props) => ; +export const Usage: Story = (props) => ; export const Vertical: Story = () => ( diff --git a/src/components/Drawer/Drawer.stories.tsx b/src/components/Drawer/Drawer.stories.tsx index 2240aa3..0d5c141 100644 --- a/src/components/Drawer/Drawer.stories.tsx +++ b/src/components/Drawer/Drawer.stories.tsx @@ -7,7 +7,7 @@ export default { component: Drawer, } as Meta; -export const Simple: Story = (props) => { +export const Usage: Story = (props) => { const [isOpen, setIsOpen] = React.useState(false); return ( diff --git a/src/components/Flex/Flex.stories.tsx b/src/components/Flex/Flex.stories.tsx index 1d3e58b..3d08386 100644 --- a/src/components/Flex/Flex.stories.tsx +++ b/src/components/Flex/Flex.stories.tsx @@ -7,7 +7,7 @@ export default { component: Flex, } as Meta; -export const Simple: Story = (props) => ( +export const Usage: Story = (props) => ( Box 1 diff --git a/src/components/Grid/Grid.stories.tsx b/src/components/Grid/Grid.stories.tsx index 532c4fc..30b29f3 100644 --- a/src/components/Grid/Grid.stories.tsx +++ b/src/components/Grid/Grid.stories.tsx @@ -7,7 +7,7 @@ export default { component: Grid, } as Meta; -export const Simple: Story = (props) => ( +export const Usage: Story = (props) => ( Box 1 @@ -29,7 +29,7 @@ export const Simple: Story = (props) => ( ); -Simple.args = { +Usage.args = { gap: 4, templateColumns: 'repeat(6, 1fr)', }; diff --git a/src/components/Heading/Heading.stories.tsx b/src/components/Heading/Heading.stories.tsx index 7baf059..f7a1647 100644 --- a/src/components/Heading/Heading.stories.tsx +++ b/src/components/Heading/Heading.stories.tsx @@ -10,7 +10,7 @@ export default { component: Heading, } as Meta; -export const Simple: Story = (props) => ( +export const Usage: Story = (props) => ( The quick brown fox jumped over the lazy dog. ); diff --git a/src/components/Image/Image.stories.tsx b/src/components/Image/Image.stories.tsx index ac6ae58..9f29dbf 100644 --- a/src/components/Image/Image.stories.tsx +++ b/src/components/Image/Image.stories.tsx @@ -7,8 +7,8 @@ export default { component: Image, } as Meta; -export const Simple: Story = (props) => ; -Simple.args = { +export const Usage: Story = (props) => ; +Usage.args = { src: 'https://source.unsplash.com/random/256x256?mountain', alt: 'Random unsplash image', }; diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx index f18cfc0..a014120 100644 --- a/src/components/Input/Input.stories.tsx +++ b/src/components/Input/Input.stories.tsx @@ -8,7 +8,7 @@ export default { component: Input, } as Meta; -export const Simple: Story = (props) => ( +export const Usage: Story = (props) => ( action('onChange')(target.value)} /> ); diff --git a/src/components/Kbd/Kbd.stories.tsx b/src/components/Kbd/Kbd.stories.tsx index d5116f7..6e418a3 100644 --- a/src/components/Kbd/Kbd.stories.tsx +++ b/src/components/Kbd/Kbd.stories.tsx @@ -1,13 +1,13 @@ import { Meta, Story } from '@storybook/react'; import * as React from 'react'; -import { Text, Kbd, KbdProps } from '..'; +import { Kbd, KbdProps, Text } from '..'; export default { title: 'Kbd', component: Kbd, } as Meta; -export const Simple: Story = (props) => ( +export const Usage: Story = (props) => ( ctrl + shift + v diff --git a/src/components/Link/Link.stories.tsx b/src/components/Link/Link.stories.tsx index 76d483f..8a0633f 100644 --- a/src/components/Link/Link.stories.tsx +++ b/src/components/Link/Link.stories.tsx @@ -7,4 +7,4 @@ export default { component: Link, } as Meta; -export const Simple: Story = (props) => 🌶️ Spicy UI; +export const Usage: Story = (props) => 🌶️ Spicy UI; diff --git a/src/components/Menu/Menu.stories.tsx b/src/components/Menu/Menu.stories.tsx index 5e7bf7a..de2e1c3 100644 --- a/src/components/Menu/Menu.stories.tsx +++ b/src/components/Menu/Menu.stories.tsx @@ -8,14 +8,10 @@ import { Avatar, Box, Button, Flex, Menu, MenuDivider, MenuHeader, MenuItem, Men export default { title: 'Menu', component: Menu, - subcomponents: { - MenuHeader, - MenuDivider, - MenuItem, - }, + subcomponents: { MenuHeader, MenuDivider, MenuItem }, } as Meta; -export const Simple: Story = (props) => ( +export const Usage: Story = (props) => ( }>Open}> View diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx index 21e6a3a..eae0889 100644 --- a/src/components/Modal/Modal.stories.tsx +++ b/src/components/Modal/Modal.stories.tsx @@ -12,7 +12,7 @@ export default { subcomponents: { ModalHeader, ModalBody, ModalFooter, ModalCloseButton }, } as Meta; -export const Simple: Story = (props) => { +export const Usage: Story = (props) => { const [isOpen, setIsOpen] = React.useState(false); return ( @@ -35,7 +35,9 @@ export const Simple: Story = (props) => { ); }; -Simple.args = { closeOnOverlayClick: true }; +Usage.args = { + closeOnOverlayClick: true, +}; export const AsAlertDialog: Story = (props) => { const [isOpen, setIsOpen] = React.useState(false); diff --git a/src/components/Overlay/Overlay.stories.tsx b/src/components/Overlay/Overlay.stories.tsx index a62d3cc..dbb2a4d 100644 --- a/src/components/Overlay/Overlay.stories.tsx +++ b/src/components/Overlay/Overlay.stories.tsx @@ -7,7 +7,7 @@ export default { component: Overlay, } as Meta; -export const Simple: Story = () => { +export const Usage: Story = () => { const [isOpen, setIsOpen] = React.useState(false); return ( diff --git a/src/components/Portal/Portal.stories.tsx b/src/components/Portal/Portal.stories.tsx index 9eef04b..71e34a3 100644 --- a/src/components/Portal/Portal.stories.tsx +++ b/src/components/Portal/Portal.stories.tsx @@ -8,7 +8,7 @@ export default { component: Portal, } as Meta; -export const Simple: Story = () => ( +export const Usage: Story = () => ( I'm a box inside a portal! diff --git a/src/components/Progress/Progress.stories.tsx b/src/components/Progress/Progress.stories.tsx index 677d060..9b1faaf 100644 --- a/src/components/Progress/Progress.stories.tsx +++ b/src/components/Progress/Progress.stories.tsx @@ -8,7 +8,9 @@ export default { } as Meta; export const Horizontal: Story = (props) => ; -Horizontal.args = { value: 43 }; +Horizontal.args = { + value: 43, +}; export const WithHorizontalInner: Story = (props) => { const { value = 0, min = 0, max = 100 } = props; @@ -22,7 +24,9 @@ export const WithHorizontalInner: Story = (props) => { ); }; -WithHorizontalInner.args = { value: 43 }; +WithHorizontalInner.args = { + value: 43, +}; export const Circular: Story = (props) => ; Circular.args = { diff --git a/src/components/Radio/Radio.stories.tsx b/src/components/Radio/Radio.stories.tsx index 8508a27..9b80824 100644 --- a/src/components/Radio/Radio.stories.tsx +++ b/src/components/Radio/Radio.stories.tsx @@ -35,12 +35,12 @@ export default { component: Radio, } as Meta; -export const Simple: Story = (props) => { +export const Usage: Story = (props) => { const [isChecked, setIsChecked] = React.useState(false); return setIsChecked(Boolean(target.checked))} />; }; -Simple.args = { +Usage.args = { label: 'Radio', }; diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx index 2b1f06e..0d6d05e 100644 --- a/src/components/Select/Select.stories.tsx +++ b/src/components/Select/Select.stories.tsx @@ -25,7 +25,7 @@ export default { component: Select, } as Meta; -export const Simple: Story = (props) => { +export const Usage: Story = (props) => { const [value, setValue] = React.useState | null>(null); return