From a4b59c03818c9279347efcad2f791f16298e5bc7 Mon Sep 17 00:00:00 2001 From: Nicolae Tataru Date: Thu, 12 Aug 2021 16:37:54 +0300 Subject: [PATCH 1/6] Fixed icons on --- src/components/molecules/Notify/Notify.scss | 8 +++++--- src/components/molecules/Notify/Notify.tsx | 2 +- src/components/molecules/Notify/NotifyItem.tsx | 2 +- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/molecules/Notify/Notify.scss b/src/components/molecules/Notify/Notify.scss index 91389188..ec177d31 100644 --- a/src/components/molecules/Notify/Notify.scss +++ b/src/components/molecules/Notify/Notify.scss @@ -108,9 +108,7 @@ background-color: $danger-color; .ebs-icon { - path:last-child { - fill: $danger-color; - } + color: $white; } } @@ -121,5 +119,9 @@ &--warning { background-color: $warning-color; } + + .ebs-icon:not(.ebs-icon--close) { + font-size: rem($gutter-size * 1.5); + } } } diff --git a/src/components/molecules/Notify/Notify.tsx b/src/components/molecules/Notify/Notify.tsx index 6ef0c54d..b11653af 100644 --- a/src/components/molecules/Notify/Notify.tsx +++ b/src/components/molecules/Notify/Notify.tsx @@ -31,7 +31,7 @@ const NotifyContainer: React.FC = ({ vertical = 'top', horizontal = 'right', size = 'medium', - timeout = 3000, + timeout = 30000, }) => { const createPortal = usePortal('notify-portal'); const { list, remove } = React.useContext(NotifyContext); diff --git a/src/components/molecules/Notify/NotifyItem.tsx b/src/components/molecules/Notify/NotifyItem.tsx index 82a4fec6..c4081d79 100644 --- a/src/components/molecules/Notify/NotifyItem.tsx +++ b/src/components/molecules/Notify/NotifyItem.tsx @@ -31,7 +31,7 @@ export const NotifyItem: React.FC = ({ icon = 'check'; break; case 'danger': - icon = 'alert'; + icon = 'error'; break; case 'info': icon = 'info'; From 151ded185a08d7365b6af197f255e4e629f043eb Mon Sep 17 00:00:00 2001 From: Nicolae Tataru Date: Thu, 12 Aug 2021 16:38:19 +0300 Subject: [PATCH 2/6] Fixed box mode on - - -
-
Active
- null} /> -
- -
-
Clearable
- null} - /> -
- -
-
Error
- -
- -
-
Disabled
- -
- -
Number Input
- -
-
Number
- { - setInputValues((s) => ({ ...s, numMin: value as number })); - }} - /> -
- -
-
Number
- setInputValues((s) => ({ ...s, numMax: value as number }))} - /> -
- - -
-
Text Input + Label
- -
-
Inactive
- -
- -
-
Active
- -
- -
-
Error
- -
- -
-
Disabled
- -
-
- -
-
Text Input + Extra
- -
-
Inactive
- -
- -
-
Active
- -
- -
-
Error
- -
- -
-
Disabled
- -
-
- -
-
Text Input + Label + Extra
- -
-
Inactive
- -
- -
-
Active
- -
- -
-
Error
- -
- -
-
Disabled
- -
-
- - )} - + ); }; -export const IconRight = (): React.ReactElement => ( - - {(size) => ( -
-
-
Text Input
- -
-
Inactive
- } placeholder="Text field" /> -
- -
-
Active
- } - placeholder="Text field" - value="Text field" - onChange={(): null => null} - /> -
- -
-
Error
- } hasError placeholder="Text field" /> -
- -
-
Disabled
- } disabled placeholder="Text field" /> -
-
- -
-
Text Input + Label
- -
-
Inactive
- } label="Label" placeholder="Text field" /> -
- -
-
Active
- } - label="Label" - placeholder="Text field" - value="Text field" - /> -
- -
-
Error
- } - label="Label" - hasError - placeholder="Text field" - /> -
-
-
Disabled
- } - label="Label" - disabled - placeholder="Text field" - /> -
-
- -
-
Text Input + Extra
- -
-
Inactive
- } extra="Extra" placeholder="Text field" /> -
- -
-
Active
- } - extra="Extra" - placeholder="Text field" - value="Text field" - /> -
- -
-
Error
- } - extra="Extra" - hasError - placeholder="Text field" - /> -
- -
-
Disabled
- } - extra="Extra" - disabled - placeholder="Text field" - /> -
-
- -
-
Text Input + Label + Extra
- -
-
Inactive
- } - label="Label" - extra="Extra" - placeholder="Text field" - /> -
- -
-
Active
- } - label="Label" - extra="Extra" - placeholder="Text field" - value="Text field" - /> -
- -
-
Error
- } - label="Label" - extra="Extra" - hasError - placeholder="Text field" - /> -
- -
-
Disabled
- } - label="Label" - extra="Extra" - disabled - placeholder="Text field" - /> -
-
-
- )} - -); - -export const IconLeft = (): React.ReactElement => ( - - {(size) => ( -
-
-
Text Input
- -
-
Inactive
- } placeholder="Text field" /> -
- -
-
Active
- } - placeholder="Text field" - value="Text field" - onChange={(): null => null} - /> -
- -
-
Error
- } hasError placeholder="Text field" /> -
- -
-
Disabled
- } disabled placeholder="Text field" /> -
-
- -
-
Text Input + Label
- -
-
Inactive
- } label="Label" placeholder="Text field" /> -
- -
-
Active
- } - label="Label" - placeholder="Text field" - value="Text field" - /> -
- -
-
Error
- } - label="Label" - hasError - placeholder="Text field" - /> -
- -
-
Disabled
- } - label="Label" - disabled - placeholder="Text field" - /> -
-
- -
-
Text Input + Extra
- -
-
Inactive
- } extra="Extra" placeholder="Text field" /> -
- -
-
Active
- } - extra="Extra" - placeholder="Text field" - value="Text field" - /> -
- -
-
Error
- } - extra="Extra" - hasError - placeholder="Text field" - /> -
- -
-
Disabled
- } - extra="Extra" - disabled - placeholder="Text field" - /> -
-
- -
-
Text Input + Label + Extra
- -
-
Inactive
- } - label="Label" - extra="Extra" - placeholder="Text field" - /> -
- -
-
Active
- } - label="Label" - extra="Extra" - placeholder="Text field" - value="Text field" - /> -
- -
-
Error
- } - label="Label" - extra="Extra" - hasError - placeholder="Text field" - /> -
- -
-
Disabled
- } - label="Label" - extra="Extra" - disabled - placeholder="Text field" - /> -
-
-
- )} - -); +Regular.args = { + size: 'medium', + placeholder: 'Example', +}; diff --git a/src/components/atoms/Label/Label.stories.tsx b/src/components/atoms/Label/Label.stories.tsx index a9d3e5db..cc1bc56c 100644 --- a/src/components/atoms/Label/Label.stories.tsx +++ b/src/components/atoms/Label/Label.stories.tsx @@ -1,281 +1,25 @@ import * as React from 'react'; +import { Template } from 'components/storybook'; -import { Label } from './Label'; +import { Label, LabelProps } from './Label'; import { exportStory } from '../../../libs'; export default { title: exportStory('Label', 'atoms'), component: Label, + argTypes: { + text: { control: 'text' }, + prefix: { control: 'text' }, + suffix: { control: 'text' }, + }, }; -export const Regular = (): React.ReactElement => ( -
-
-
Label & Text Status
- -
-
Regular
-
- -
-
Disabled
-
-
- -
-
Label & Success Status
- -
-
Regular
-
- -
-
Disabled
-
-
- -
-
Label & Warning Status
- -
-
Regular
-
- -
-
Disabled
-
-
- -
-
Label & Danger Status
- -
-
Regular
-
- -
-
Disabled
-
-
- -
-
Label & Info Status
- -
-
Regular
-
- -
-
Disabled
-
-
-
-); - -export const Ghost = (): React.ReactElement => ( -
-
-
Label & Text Status
- -
-
Regular
-
- -
-
Regular circle
-
- -
-
Disabled
-
-
- -
-
Label & Success Status
- -
-
Regular
-
- -
-
Regular circle
-
- -
-
Disabled
-
-
- -
-
Label & Warning Status
- -
-
Regular
-
- -
-
Regular circle
-
- -
-
Disabled
-
-
- -
-
Label & Danger Status
- -
-
Regular
-
- -
-
Regular circle
-
- -
-
Disabled
-
-
- -
-
Label & Info Status
- -
-
Regular
-
- -
-
Regular circle
-
- -
-
Disabled
-
-
-
+export const Regular: React.FC & { args: LabelProps } = ({ children, ...props }) => ( + ); -export const Filled = (): React.ReactElement => ( -
-
-
Label & Text Status
- -
-
Filled
-
- -
-
Filled circle
-
- -
-
Disabled
-
-
- -
-
Label & Success Status
- -
-
Filled
-
- -
-
Filled circle
-
- -
-
Disabled
-
-
- -
-
Label & Warning Status
- -
-
Filled
-
- -
-
Filled circle
-
- -
-
Disabled
-
-
- -
-
Label & Danger Status
- -
-
Filled
-
- -
-
Filled circle
-
- -
-
Disabled
-
-
- -
-
Label & Info Status
- -
-
Filled
-
- -
-
Filled circle
-
- -
-
Disabled
-
-
-
-); +Regular.args = { + text: 'Example', +}; diff --git a/src/components/atoms/Label/Label.tsx b/src/components/atoms/Label/Label.tsx index 4778b7de..67913d91 100644 --- a/src/components/atoms/Label/Label.tsx +++ b/src/components/atoms/Label/Label.tsx @@ -5,12 +5,11 @@ export type LabelType = 'regular' | 'fill' | 'ghost' | 'primary'; export type LabelStatus = 'success' | 'warning' | 'danger' | 'info'; -export interface Props { +export interface LabelProps extends Omit, 'prefix'> { className?: string; type?: LabelType; circle?: boolean; status?: LabelStatus; - style?: React.CSSProperties; prefix?: React.ReactNode; suffix?: React.ReactNode; disabled?: boolean; @@ -21,20 +20,20 @@ export interface Props { onClickSuffix?: () => void; } -export const Label: React.FC = ({ +export const Label: React.FC = ({ className, type = 'regular', status, circle, icon, text, - style, prefix, suffix, onClick, onClickPrefix, onClickSuffix, disabled, + ...props }) => { if (!text && !icon) { return null; @@ -51,8 +50,8 @@ export const Label: React.FC = ({ 'has-suffix': suffix, disabled: disabled, })} - style={style} onClick={onClick} + {...props} > {prefix && (
diff --git a/src/components/atoms/ListGroup/ListGroup.stories.tsx b/src/components/atoms/ListGroup/ListGroup.stories.tsx index e33002bb..3d2fb69d 100644 --- a/src/components/atoms/ListGroup/ListGroup.stories.tsx +++ b/src/components/atoms/ListGroup/ListGroup.stories.tsx @@ -1,6 +1,8 @@ import * as React from 'react'; +import { Container, Row, Col } from 'components/atoms'; -import { ListGroup } from './ListGroup'; +import { ListGroup, ListGroupProps } from './ListGroup'; +import { ListGroupItemProps } from './ListGroupItem'; import { exportStory } from 'libs'; const { Item: ListGroupItem } = ListGroup; @@ -11,14 +13,34 @@ export default { subcomponents: { ListGroupItem }, }; -export const Group = (): React.ReactElement => ( - - Example 1 - Example 2 - Example 3 - Example 4 - Example 5 - +export const Group: React.FC & { args: ListGroupProps } = ({ children, ...props }) => ( + + + + + Example 1 + Example 2 + Example 3 + Example 4 + Example 5 + + + + ); -export const Item = (): React.ReactElement => Example; +Group.args = { + className: '', +}; + +export const Item: React.FC & { args: ListGroupItemProps } = ({ children, ...props }) => ( + + + + Example + + + +); + +Item.args = Group.args; diff --git a/src/components/atoms/ListGroup/ListGroup.tsx b/src/components/atoms/ListGroup/ListGroup.tsx index 08f5bd7a..3dbbfdf0 100644 --- a/src/components/atoms/ListGroup/ListGroup.tsx +++ b/src/components/atoms/ListGroup/ListGroup.tsx @@ -6,12 +6,14 @@ export interface ListGroupComposition { Item: React.FC; } -export interface ListGroupProps { +export interface ListGroupProps extends React.HTMLAttributes { className?: string; } -const ListGroup: React.FC & ListGroupComposition = ({ className, children }) => ( -
{children}
+const ListGroup: React.FC & ListGroupComposition = ({ className, children, ...props }) => ( +
+ {children} +
); ListGroup.displayName = 'ListGroup'; diff --git a/src/components/atoms/ListGroup/ListGroupItem.tsx b/src/components/atoms/ListGroup/ListGroupItem.tsx index 5c52b8ac..99b5aca1 100644 --- a/src/components/atoms/ListGroup/ListGroupItem.tsx +++ b/src/components/atoms/ListGroup/ListGroupItem.tsx @@ -1,10 +1,12 @@ import * as React from 'react'; import cn from 'classnames'; -export interface ListGroupItemProps { +export interface ListGroupItemProps extends React.HTMLAttributes { className?: string; } -export const ListGroupItem: React.FC = ({ className, children }) => ( -
{children}
+export const ListGroupItem: React.FC = ({ className, children, ...props }) => ( +
+ {children} +
); diff --git a/src/components/atoms/Mask/Mask.tsx b/src/components/atoms/Mask/Mask.tsx index 3ec6451d..adeca53a 100644 --- a/src/components/atoms/Mask/Mask.tsx +++ b/src/components/atoms/Mask/Mask.tsx @@ -1,10 +1,9 @@ import * as React from 'react'; -export interface Props { +export interface MaskProps extends React.HTMLAttributes { onClick?: () => void; - style?: React.CSSProperties; } -export const Mask: React.FC = ({ onClick, style }) => ( -
+export const Mask: React.FC = ({ onClick, ...props }) => ( +
); diff --git a/src/components/atoms/Radio/Radio.stories.tsx b/src/components/atoms/Radio/Radio.stories.tsx index 863cee63..c8270637 100644 --- a/src/components/atoms/Radio/Radio.stories.tsx +++ b/src/components/atoms/Radio/Radio.stories.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; +import { Template } from 'components/storybook'; -import { Radio } from './Radio'; +import { Radio, RadioProps } from './Radio'; import { exportStory } from '../../../libs'; export default { @@ -10,68 +11,22 @@ export default { const options = [{ text: 'Simple Radio', value: 1 }]; -export const Regular = (): React.ReactElement => { - const [checked, setChecked] = React.useState(''); +export const Regular: React.FC & { args: RadioProps } = ({ children, ...props }) => { + const [checked, setChecked] = React.useState(); return ( -
-
-
Radio
- -
-
Switcher
- -
- -
-
Inactive
- -
- -
-
Active
- -
- -
-
Disabled & Inactive
- -
- -
-
Disabled & Active
- -
-
- -
-
Radio & Align right
- -
-
Switcher
- -
- -
-
Inactive
- -
- -
-
Active
- -
- -
-
Disabled & Inactive
- -
- -
-
Disabled & Active
- -
-
-
+ ); }; + +Regular.args = { + className: '', + radioAlign: 'left', + textClass: '', + textStyle: {}, + value: undefined, + options, + onChange: (value?: string | number) => console.log(value), +}; diff --git a/src/components/atoms/Radio/Radio.tsx b/src/components/atoms/Radio/Radio.tsx index 63b88b47..1b0276fa 100644 --- a/src/components/atoms/Radio/Radio.tsx +++ b/src/components/atoms/Radio/Radio.tsx @@ -12,18 +12,18 @@ export interface Option { disabled?: boolean; } -export interface Props { +export interface RadioProps extends Omit, 'value'>, 'onChange'> { + name?: string; className?: string; - radioAlign?: RadioAlign; textClass?: string; - textStyle?: React.CSSProperties; - onChange?: (e?: any) => void; + radioAlign?: RadioAlign; value?: RadioValue; options?: Option[]; - name?: string; + textStyle?: React.CSSProperties; + onChange?: (value?: string | number) => void; } -export const Radio = React.forwardRef( +export const Radio = React.forwardRef( ({ className, radioAlign = 'left', textClass = '', textStyle, options, value, onChange, ...props }, ref) => { const name = props.name || React.useMemo(() => makeid(), []); @@ -58,10 +58,10 @@ export const Radio = React.forwardRef( name={name} value={option.value} onChange={onChangeHandler} - {...(value !== undefined && option.value !== undefined - ? { checked: `${value}` === `${option.value}` } - : {})} disabled={option.disabled} + {...(value !== undefined && option.value !== undefined + ? { ...props, checked: `${value}` === `${option.value}` } + : props)} />
diff --git a/src/components/atoms/Space/Space.stories.tsx b/src/components/atoms/Space/Space.stories.tsx index 97bb0bc7..d29ad0a2 100644 --- a/src/components/atoms/Space/Space.stories.tsx +++ b/src/components/atoms/Space/Space.stories.tsx @@ -1,16 +1,22 @@ import * as React from 'react'; import { Button } from 'components/atoms'; -import { Space } from './Space'; +import { Space, SpaceProps } from './Space'; import { exportStory } from '../../../libs'; export default { title: exportStory('Space', 'atoms'), component: Space, + argTypes: { + size: { + options: ['small', 'medium', 'large'], + control: { type: 'select' }, + }, + }, }; -export const Regular = (): React.ReactElement => ( - +export const Regular: React.FC & { args: SpaceProps } = ({ children, ...props }) => ( +

green

@@ -19,3 +25,11 @@ export const Regular = (): React.ReactElement => ( ); + +Regular.args = { + size: 'medium', + direction: 'horizontal', + wrap: false, + align: 'center', + justify: 'start', +}; diff --git a/src/components/atoms/Space/Space.tsx b/src/components/atoms/Space/Space.tsx index 81a148f8..630c441e 100644 --- a/src/components/atoms/Space/Space.tsx +++ b/src/components/atoms/Space/Space.tsx @@ -6,9 +6,8 @@ import { SizeType } from 'types'; export type SpaceSize = SizeType | number; export type SpaceDirection = 'horizontal' | 'vertical'; -export interface SpaceProps { +export interface SpaceProps extends React.HTMLAttributes { className?: string; - style?: React.CSSProperties; size?: SpaceSize | [SpaceSize, SpaceSize]; direction?: SpaceDirection; align?: 'start' | 'end' | 'center' | 'baseline'; diff --git a/src/components/atoms/Switch/Switch.stories.tsx b/src/components/atoms/Switch/Switch.stories.tsx index 093f4a51..24893d23 100644 --- a/src/components/atoms/Switch/Switch.stories.tsx +++ b/src/components/atoms/Switch/Switch.stories.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; +import { Template } from 'components/storybook'; -import { Switch } from './Switch'; +import { Switch, SwitchProps } from './Switch'; import { exportStory } from '../../../libs'; export default { @@ -8,39 +9,14 @@ export default { component: Switch, }; -export const Regular = (): React.ReactElement => { - const [checked, setChecked] = React.useState(false); +export const Regular: React.FC & { args: SwitchProps } = ({ children, ...props }) => ( + +); - return ( -
-
-
Switch
- -
-
Switcher
- -
- -
-
Inactive
- -
- -
-
Active
- -
- -
-
Disabled & Inactive
- -
- -
-
Disabled & Active
- -
-
-
- ); +Regular.args = { + checked: false, + children: 'Example', }; diff --git a/src/components/atoms/Switch/Switch.tsx b/src/components/atoms/Switch/Switch.tsx index 51058a2b..4db4d99e 100644 --- a/src/components/atoms/Switch/Switch.tsx +++ b/src/components/atoms/Switch/Switch.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; import cn from 'classnames'; -interface Props { +export interface SwitchProps extends Omit, 'onChange'> { className?: string; disabled?: boolean; checked?: boolean; onChange?: (value: boolean) => void; } -export const Switch: React.FC = ({ className, disabled, checked, onChange }) => { +export const Switch: React.FC = ({ className, disabled, checked, onChange, ...props }) => { const onClickHandler = (): void => (!disabled && onChange !== undefined ? onChange(!checked) : undefined); return ( @@ -17,6 +17,7 @@ export const Switch: React.FC = ({ className, disabled, checked, onChange disabled: disabled, })} onClick={onClickHandler} + {...props} > {checked &&
} diff --git a/src/components/atoms/Tabs/Panel.tsx b/src/components/atoms/Tabs/Panel.tsx index 4c405fab..8e80c125 100644 --- a/src/components/atoms/Tabs/Panel.tsx +++ b/src/components/atoms/Tabs/Panel.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import cn from 'classnames'; import { useTabs } from './Tabs'; -export interface PanelProps { +export interface PanelProps extends React.HTMLAttributes { tabKey: string; className?: string; } @@ -10,8 +10,12 @@ export interface PanelProps { /** * Individual panel component. */ -export const Panel: React.FC = ({ tabKey, className, children }) => { +export const Panel: React.FC = ({ tabKey, className, children, ...props }) => { const { activeTab } = useTabs(); - return activeTab === tabKey ?
{children}
: null; + return activeTab === tabKey ? ( +
+ {children} +
+ ) : null; }; diff --git a/src/components/atoms/Tabs/Tab.tsx b/src/components/atoms/Tabs/Tab.tsx index 99180e7e..835567f0 100644 --- a/src/components/atoms/Tabs/Tab.tsx +++ b/src/components/atoms/Tabs/Tab.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import cn from 'classnames'; import { useTabs } from './Tabs'; -export interface TabProps { +export interface TabProps extends Omit, 'onClick'> { tabKey: string; label: React.ReactNode; disabled?: boolean; @@ -13,7 +13,7 @@ export interface TabProps { /** * This component allows changing of the active Tab. */ -export const Tab: React.FC = ({ tabKey, disabled, label, className, onClick }) => { +export const Tab: React.FC = ({ tabKey, disabled, label, className, onClick, ...props }) => { const { activeTab, setActiveTab } = useTabs(); const handleClick = (): void => { @@ -30,6 +30,7 @@ export const Tab: React.FC = ({ tabKey, disabled, label, className, on
{label}
diff --git a/src/components/atoms/Tabs/Tabs.stories.tsx b/src/components/atoms/Tabs/Tabs.stories.tsx index 2ee618f4..6712542a 100644 --- a/src/components/atoms/Tabs/Tabs.stories.tsx +++ b/src/components/atoms/Tabs/Tabs.stories.tsx @@ -1,16 +1,19 @@ import * as React from 'react'; -import { Tabs } from './Tabs'; +import { Tabs, TabsProps } from './Tabs'; import { exportStory } from 'libs'; export default { title: exportStory('Tabs', 'atoms'), component: Tabs, + argTypes: { + activeTab: { + options: ['first', 'third'], + control: { type: 'select' }, + }, + }, }; -export const regular = (): React.ReactElement => { - // eslint-disable-next-line react-hooks/rules-of-hooks - const [active, setActive] = React.useState('first'); - +export const Regular: React.FC & { args: TabsProps } = ({ children, ...props }) => { const data = [ { label: First tab, @@ -38,18 +41,22 @@ export const regular = (): React.ReactElement => { ]; return ( -
- - {data.map((item) => ( - - ))} -

Custom elements for all tabs

- {data.map((item) => ( - - {item.content} - - ))} - -
+ + {data.map((item) => ( + + ))} +

Custom elements for all tabs

+ {data.map((item) => ( + + {item.content} + + ))} + ); }; + +Regular.args = { + className: '', + activeTab: 'first', + setActiveTab: (key: string) => console.log(key), +}; diff --git a/src/components/atoms/Tabs/Tabs.tsx b/src/components/atoms/Tabs/Tabs.tsx index 0361f772..03e6fe87 100644 --- a/src/components/atoms/Tabs/Tabs.tsx +++ b/src/components/atoms/Tabs/Tabs.tsx @@ -3,15 +3,15 @@ import cn from 'classnames'; import { Panel, PanelProps } from './Panel'; import { Tab, TabProps } from './Tab'; -export interface TabsProps { +export interface TabsComposition { Tab: React.FC; Panel: React.FC; } -export interface TabsMainProps { +export interface TabsProps { + className?: string; activeTab?: string; setActiveTab?: (key: string) => void; - className?: string; } export interface TabsContext { @@ -21,7 +21,7 @@ export interface TabsContext { const TabsContext = React.createContext(undefined); -const Tabs: React.FC & TabsProps = ({ activeTab, setActiveTab, className, children }) => { +const Tabs: React.FC & TabsComposition = ({ activeTab, setActiveTab, className, children }) => { const memoizedContextValue = React.useMemo( () => ({ activeTab, diff --git a/src/components/atoms/Tooltip/Tooltip.scss b/src/components/atoms/Tooltip/Tooltip.scss index 5ad5a7b4..5fb7d5b3 100644 --- a/src/components/atoms/Tooltip/Tooltip.scss +++ b/src/components/atoms/Tooltip/Tooltip.scss @@ -19,7 +19,7 @@ @include elevation-2; background-color: $white; border-radius: rem($border-radius); - z-index: 9999; + z-index: 9997; color: $text-color; background-color: $white; } diff --git a/src/components/atoms/Tooltip/Tooltip.stories.tsx b/src/components/atoms/Tooltip/Tooltip.stories.tsx index e61c0dfe..7a254ae4 100644 --- a/src/components/atoms/Tooltip/Tooltip.stories.tsx +++ b/src/components/atoms/Tooltip/Tooltip.stories.tsx @@ -12,188 +12,28 @@ export default { }, }; -export const Regular = (): React.ReactElement => ( -
-
-
Tooltip Standart
- -
-
Top alignment
- -
- - - - - - - - - - - -
-
- -
-
Right alignment
- -
- - - - - - - - - - - -
-
- -
-
Bottom alignment
- -
- - - - - - - - - - - -
-
- -
-
Left alignment
- -
- - - - - - - - - - - -
-
-
-
-); - -export const Titled = (): React.ReactElement => ( -
-
-
Tooltip Standart & Title
- -
-
Top alignment
- -
- - - - - - - - - - - -
-
- -
-
Right alignment
- -
- - - - - - - - - - - -
-
- -
-
Bottom alignment
- -
- - - - - - - - - - - -
-
- -
-
Left alignment
- -
- - - - - - - - - - - -
-
-
-
-); - -export const Playground: React.FC & { args: TooltipProps } = ({ +export const Regular: React.FC & { args: TooltipProps } = ({ children, ...props }): React.ReactElement => { return (
- +
- +
- +
); }; -Playground.args = { +Regular.args = { tooltip: 'Tooltip content', inline: true, trigger: 'hover', diff --git a/src/components/index.ts b/src/components/index.ts new file mode 100644 index 00000000..bb722a8e --- /dev/null +++ b/src/components/index.ts @@ -0,0 +1,68 @@ +// Atoms +export { + Alert, + Avatar, + AvatarCard, + AvatarInline, + Animated, + Badge, + Button, + ButtonGroup, + Label, + ListGroup, + Extra, + Input, + Icon, + Switch, + Chips, + Radio, + Card, + Container, + Mask, + Row, + Col, + Collapse, + Tooltip, + Tabs, + Space, +} from './atoms'; + +// Molecules +export { + Loader, + Stepper, + DatePicker, + InputPhone, + InputSearch, + Checkbox, + CheckboxGroup, + Textarea, + Upload, + NotifyContainer, + NotifyContext, + NotifyProvider, + Select, +} from './molecules'; + +// Organisms +export { + Actions, + Form, + Field, + List, + useForm, + FormProvider, + Layout, + Modal, + Sidebar, + SortBy, + Table, + Column, + ColumnGroup, + Summary, +} from './organisms'; + +// Export types +export type { DatePickerProps, RangePickerProps, DatePickerComposition } from './molecules/DatePicker/types'; +export type { ColumnType, TableProps } from './organisms/Table/Table'; +export type { FormInstance, FormProps } from './organisms/Form'; diff --git a/src/components/molecules/Checkbox/Checkbox.stories.tsx b/src/components/molecules/Checkbox/Checkbox.stories.tsx index 01d42570..801087fe 100644 --- a/src/components/molecules/Checkbox/Checkbox.stories.tsx +++ b/src/components/molecules/Checkbox/Checkbox.stories.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; +import { Template } from 'components/storybook'; -import { Checkbox } from './Checkbox'; +import { Checkbox, CheckboxProps } from './Checkbox'; import { CheckboxGroup } from './CheckboxGroup'; import { exportStory } from '../../../libs'; @@ -10,166 +11,13 @@ export default { subcomponents: { CheckboxGroup }, }; -export const Regular = (): React.ReactElement => { - const [checked, setChecked] = React.useState(false); +export const Regular: React.FC & { args: CheckboxProps } = ({ children, ...props }) => ( + +); - return ( -
-
-
Checkbox
- -
-
Switcher
- -
- -
-
Active
- -
- -
-
Disabled & Inactive
- -
- -
-
Disabled & Active
- -
-
- -
-
Checkbox & Align right
- -
-
Switcher
- -
- -
-
Active
- -
- -
-
Disabled & Inactive
- -
- -
-
Disabled & Active
- -
-
-
- ); -}; - -export const Indeterminate = (): React.ReactElement => { - const [checked, setChecked] = React.useState(1); - - return ( -
-
-
Checkbox Indeterminate
- -
-
Switcher
- setChecked((s) => (s < 3 ? s + 1 : 1))} - text="Simple checkbox" - /> -
- -
-
Active
- -
- -
-
Disabled
- -
-
- -
-
Checkbox & Align right
- -
-
Switcher
- setChecked((s) => (s < 3 ? s + 1 : 1))} - text="Simple checkbox" - /> -
- -
-
Active
- -
- -
-
Disabled
- -
-
-
- ); -}; - -const options = [ - { value: 1, text: 'Simple checkbox 1' }, - { value: 2, text: 'Simple checkbox 2' }, -]; - -export const Group = (): React.ReactElement => { - const [values, setValues] = React.useState<(string | number)[]>([]); - - return ( -
-
-
Checkbox Group
- -
-
Switcher
- -
- -
-
Active
- -
- -
-
Disabled
- -
-
- -
-
Checkbox Group & Align right
- -
-
Switcher
- -
- -
-
Active
- -
- -
-
Disabled
- -
-
-
- ); +Regular.args = { + text: 'Example', + checkAlign: 'left', }; diff --git a/src/components/molecules/Checkbox/Checkbox.tsx b/src/components/molecules/Checkbox/Checkbox.tsx index 32158603..c9741de5 100644 --- a/src/components/molecules/Checkbox/Checkbox.tsx +++ b/src/components/molecules/Checkbox/Checkbox.tsx @@ -12,20 +12,23 @@ export interface Option { disabled?: boolean; } -export interface Props { +export interface CheckboxProps extends Omit, 'onChange'> { className?: string; checkAlign?: CheckAlign; name?: string; value?: CheckboxValue; + text?: React.ReactNode; indeterminate?: boolean; checked?: boolean; - onChange?: (value: boolean) => void; - text?: React.ReactNode; disabled?: boolean; + onChange?: (value: boolean) => void; } -export const Checkbox = React.forwardRef( - ({ className, checkAlign = 'left', name, value, indeterminate, checked, onChange, text, disabled }, ref) => { +export const Checkbox = React.forwardRef( + ( + { className, checkAlign = 'left', name, value, indeterminate, checked, onChange, text, disabled, ...props }, + ref, + ) => { const onChangeHandler = ({ target }: React.ChangeEvent): void => { if (onChange !== undefined) { onChange(target.checked); @@ -39,6 +42,7 @@ export const Checkbox = React.forwardRef( indeterminate: indeterminate, disabled: disabled, })} + {...props} > , 'onChange'> { className?: string; checkboxClass?: string; checkAlign?: CheckAlign; options?: Option[]; values: CheckboxGroupValue; - onChange?: (value: CheckboxGroupValue) => void; disabled?: boolean; + onChange?: (value: CheckboxGroupValue) => void; } export const CheckboxGroup: React.FC = ({ @@ -29,6 +29,7 @@ export const CheckboxGroup: React.FC = ({ values, onChange, disabled, + ...props }) => { const name = React.useMemo(() => makeid(), []); @@ -43,7 +44,7 @@ export const CheckboxGroup: React.FC = ({ } return ( -
+
{options.map((option) => ( { - const [date, setDate] = React.useState(''); - const [time, setTime] = React.useState(''); - const [range, setRange] = React.useState(); +export const Regular: React.FC & { args: DatePickerProps } = ({ children, ...props }) => { + const [value, setValue] = React.useState(''); return ( - - {(size) => ( -
-
-
DatePicker
- -
-
Date
- setDate(v as string)} - isClearable - dateFormat="dd-MM-yyyy" - /> -
- -
-
Time
- setTime(v as string)} - /> -
- -
-
Range
- setRange(v as any)} - /> -
- -
-
Range Input
- setRange(v as any)} - /> -
-
-
- )} - + ); }; -export const WithForm = (): React.ReactElement => { - const [form] = useForm(); - - const handleChange = (values): void => { - console.log('values :>> ', values); - }; - - return ( - - {(size) => ( -
-
-
-
DatePicker
- -
-
Date
- - - -
- -
-
Time
- - - -
- -
-
Range
- - - -
- - -
-
-
- )} - - ); +Regular.args = { + size: 'medium', + adjustDateOnChange: undefined, + allowSameDay: undefined, + ariaLabelClose: '', + ariaLabelledBy: '', + autoComplete: undefined, + autoFocus: true, + calendarClassName: '', + chooseDayAriaLabelPrefix: '', + className: '', + clearButtonTitle: undefined, + closeOnScroll: undefined, + customInput: undefined, + customInputRef: undefined, + customTimeInput: undefined, + dateFormat: undefined, + dateFormatCalendar: undefined, + disabledDayAriaLabelPrefix: undefined, + disabled: undefined, + disabledKeyboardNavigation: undefined, + dropdownMode: 'scroll', + endDate: null, + excludeDates: [], + excludeTimes: [], + fixedHeight: undefined, + forceShowMonthNavigation: true, + highlightDates: [], + id: undefined, + includeDates: [], + includeTimes: [], + injectTimes: [], + inline: false, + isClearable: true, + focusSelectedMonth: undefined, + locale: 'en', + maxDate: undefined, + maxTime: undefined, + minDate: undefined, + minTime: undefined, + monthsShown: undefined, + name: undefined, + nextMonthButtonLabel: undefined, + nextYearButtonLabel: undefined, + open: undefined, + openToDate: undefined, + peekNextMonth: undefined, + placeholderText: 'Date field', + popperClassName: '', + popperModifiers: undefined, + popperPlacement: undefined, + popperProps: {}, + preventOpenOnFocus: undefined, + previousMonthButtonLabel: undefined, + previousYearButtonLabel: undefined, + readOnly: undefined, + required: undefined, + scrollableMonthYearDropdown: undefined, + scrollableYearDropdown: undefined, + selected: null, + selectsEnd: undefined, + selectsStart: undefined, + selectsRange: undefined, + shouldCloseOnSelect: undefined, + showDisabledMonthNavigation: undefined, + showFullMonthYearPicker: undefined, + showMonthDropdown: undefined, + showMonthYearDropdown: undefined, + showMonthYearPicker: undefined, + showPopperArrow: undefined, + showPreviousMonths: undefined, + showQuarterYearPicker: undefined, + showTimeInput: undefined, + showTimeSelect: undefined, + showTimeSelectOnly: undefined, + showTwoColumnMonthYearPicker: undefined, + showWeekNumbers: undefined, + showYearDropdown: true, + showYearPicker: undefined, + startDate: null, + startOpen: undefined, + strictParsing: undefined, + tabIndex: undefined, + timeCaption: undefined, + timeFormat: undefined, + timeInputLabel: undefined, + timeIntervals: undefined, + title: undefined, + todayButton: undefined, + useShortMonthInDropdown: undefined, + useWeekdaysShort: undefined, + weekAriaLabelPrefix: undefined, + value: undefined, + weekLabel: undefined, + withPortal: undefined, + portalId: undefined, + wrapperClassName: '', + yearDropdownItemNumber: undefined, + excludeScrollbar: undefined, + enableTabLoop: undefined, + yearItemNumber: undefined, }; -export const Range = (): React.ReactElement => { - const [value, setValue] = React.useState(); +export const RangeInput: React.FC & { args: DatePickerProps } = ({ children, ...props }) => ( + +); - const handleChange = (date): void => { - setValue(date); - }; +RangeInput.args = Regular.args; - return ( - - {(size) => ( -
-
-
Calendar
- -
-
Range
- -
+export const Range: React.FC & { args: RangePickerProps } = ({ children, ...props }) => ( + +); -
-
Range Input
- -
-
-
- )} - - ); -}; +Range.args = Regular.args; diff --git a/src/components/molecules/DatePicker/DatePicker.tsx b/src/components/molecules/DatePicker/DatePicker.tsx index 09d07acb..47f3ebba 100644 --- a/src/components/molecules/DatePicker/DatePicker.tsx +++ b/src/components/molecules/DatePicker/DatePicker.tsx @@ -1,18 +1,18 @@ import * as React from 'react'; import ReactDatePicker, { registerLocale } from 'react-datepicker'; import cn from 'classnames'; -import { DatePickerProps, DatePickerComposition } from './types'; +import { DatePickerProps, DatePickerComposition, DateType } from './types'; import { getDefaultDateFormat, parseDate, getOutputDate } from './utils'; import RangePicker from './RangePicker'; import RangeInputPicker from './RangeInputPicker'; const InternalDatePicker = React.forwardRef( ({ size = 'medium', value, ...props }, ref) => { - const [val, setVal] = React.useState(''); + const [val, setVal] = React.useState(''); React.useEffect(() => { if (value !== val) { - setVal(value); + setVal(value || null); } }, [value]); @@ -39,12 +39,13 @@ const InternalDatePicker = React.forwardRef( showYearDropdown {...props} ref={ref} - value={val} + value={val as any} onChange={handleChange} selected={parseDate(val, dateFormat)} className={cn(`ebs-datepicker ebs-datepicker--${size}`, props.className)} wrapperClassName={cn('ebs-datepicker__wrapper', props.wrapperClassName)} popperClassName={cn('ebs-datepicker__popper', props.popperClassName)} + calendarClassName={cn('ebs-datepicker__calendar', props.calendarClassName)} > {props.children} @@ -57,4 +58,4 @@ const DatePicker = InternalDatePicker as DatePickerComposition; DatePicker.Range = RangePicker; DatePicker.RangeInput = RangeInputPicker; -export { DatePicker, registerLocale }; +export { InternalDatePicker, DatePicker, registerLocale }; diff --git a/src/components/molecules/DatePicker/RangePicker.tsx b/src/components/molecules/DatePicker/RangePicker.tsx index 77feb6f7..8abdce07 100644 --- a/src/components/molecules/DatePicker/RangePicker.tsx +++ b/src/components/molecules/DatePicker/RangePicker.tsx @@ -51,6 +51,7 @@ const RangePicker = React.forwardRef( style={props.style} > ( /> = Omit & R; -export type DateType = Date | [Date, Date] | string | /* for selectsRange */ null; +export type DateType = Date | [Date, Date] | string | null; export type DateValueType = Date | null | undefined; export type DatePickerProps = Modify< ReactDatePickerProps, { size?: SizeType; - value?: any; // Value is used by form field and value can be other than string + value?: DateType; onChange?: (date: DateType, event?: React.SyntheticEvent) => void; } >; diff --git a/src/components/molecules/InputPhone/InputPhone.stories.tsx b/src/components/molecules/InputPhone/InputPhone.stories.tsx index fb933095..d3733574 100644 --- a/src/components/molecules/InputPhone/InputPhone.stories.tsx +++ b/src/components/molecules/InputPhone/InputPhone.stories.tsx @@ -1,120 +1,68 @@ import * as React from 'react'; -import SizeSwitcher from 'components/SizeSwitcher'; +import { Template } from 'components/storybook'; -import { InputPhone } from './InputPhone'; +import { InputPhone, InputPhoneProps } from './InputPhone'; import { exportStory } from '../../../libs'; -import { SizeType } from 'types'; export default { title: exportStory('InputPhone', 'molecules'), component: InputPhone, + argTypes: { + label: { control: 'text' }, + extra: { control: 'text' }, + }, }; -export const Regular: React.FC = () => ( - - {(size) => ( -
-
-
Input Phone
+export const Regular: React.FC & { args: InputPhoneProps } = ({ children, ...props }) => { + const [value, setValue] = React.useState(''); -
-
Inactive
- -
- -
-
Active
- -
- -
-
Clearable
- -
- -
-
Error
- -
- -
-
Disabled
- -
-
- -
-
Input Phone + Label
- -
-
Inactive
- -
- -
-
Active
- -
- -
-
Error
- -
- -
-
Disabled
- -
-
- -
-
Input Phone + Extra
- -
-
Inactive
- -
- -
-
Active
- -
- -
-
Error
- -
- -
-
Disabled
- -
-
- -
-
Input Phone + Label & Extra
- -
-
Inactive
- -
- -
-
Active
- -
- -
-
Error
- -
+ return ( + + ); +}; -
-
Disabled
- -
-
-
- )} - -); +Regular.args = { + size: 'medium', + country: 'md', + isClearable: true, + value: '', + onlyCountries: [], + preferredCountries: [], + excludeCountries: [], + placeholder: 'Phone field', + searchPlaceholder: '', + searchNotFound: 'Not found', + disabled: undefined, + autoFormat: undefined, + enableAreaCodes: undefined, + enableTerritories: undefined, + disableCountryCode: undefined, + disableDropdown: undefined, + enableLongNumbers: undefined, + countryCodeEditable: undefined, + enableSearch: undefined, + disableSearchIcon: undefined, + regions: undefined, + inputProps: {}, + localization: {}, + masks: {}, + areaCodes: {}, + preserveOrder: [], + defaultMask: undefined, + alwaysDefaultMask: undefined, + prefix: undefined, + copyNumbersOnly: undefined, + renderStringAsFlag: undefined, + autocompleteSearch: undefined, + jumpCursorToEnd: undefined, + priority: undefined, + enableAreaCodeStretch: undefined, + enableClickOutside: undefined, + showDropdown: undefined, + defaultErrorMessage: undefined, + specialLabel: undefined, + disableInitialCountryGuess: undefined, + disableCountryGuess: undefined, +}; diff --git a/src/components/molecules/InputPhone/InputPhone.tsx b/src/components/molecules/InputPhone/InputPhone.tsx index 620f1bbf..448f1b0f 100644 --- a/src/components/molecules/InputPhone/InputPhone.tsx +++ b/src/components/molecules/InputPhone/InputPhone.tsx @@ -4,7 +4,7 @@ import PhoneInput, { PhoneInputProps } from 'react-phone-input-2'; import { Extra, Label } from 'components/atoms'; import { SizeType } from 'types'; -export interface Props extends PhoneInputProps { +export interface InputPhoneProps extends PhoneInputProps { className?: string; size?: SizeType; dropdownClass?: string; @@ -14,7 +14,7 @@ export interface Props extends PhoneInputProps { isClearable?: boolean; } -export const InputPhone: React.FC = ({ +export const InputPhone: React.FC = ({ className, dropdownClass, size = 'medium', diff --git a/src/components/molecules/InputSearch/InputSearch.stories.tsx b/src/components/molecules/InputSearch/InputSearch.stories.tsx index 84056ac6..1fd68445 100644 --- a/src/components/molecules/InputSearch/InputSearch.stories.tsx +++ b/src/components/molecules/InputSearch/InputSearch.stories.tsx @@ -1,113 +1,35 @@ import * as React from 'react'; -import { InputSize } from 'components/atoms/Input/Input'; -import SizeSwitcher from 'components/SizeSwitcher'; +import { Template } from 'components/storybook'; -import { InputSearch } from './InputSearch'; +import { InputSearch, InputSearchProps } from './InputSearch'; import { exportStory } from '../../../libs'; export default { title: exportStory('InputSearch', 'molecules'), component: InputSearch, + argTypes: { + label: { control: 'text' }, + prefix: { control: 'text' }, + suffix: { control: 'text' }, + extra: { control: 'text' }, + }, }; -export const Regular = (): React.ReactElement => ( - - {(size) => ( -
-
-
Input Search & Stroke
+export const Regular: React.FC & { args: InputSearchProps } = ({ children, ...props }) => { + const [value, setValue] = React.useState(''); -
-
Inactive
- -
- -
-
Active
- -
- -
-
Clearable
- -
- -
-
Disabled
- -
-
- -
-
Input Search & Fill
- -
-
Inactive
- -
- -
-
Active
- -
- -
-
Clearable
- -
- -
-
Disabled
- -
-
-
- )} - -); - -export const IconAlignment = (): React.ReactElement => ( - - {(size) => ( -
-
-
Input Search & Left Alignment & Stroke
- -
-
Inactive
- -
- -
-
Active
- -
- -
-
Disabled
- -
-
- -
-
Input Search & Left Alignment & Fill
- -
-
Inactive
- -
- -
-
Active
- -
+ return ( + + ); +}; -
-
Disabled
- -
-
-
- )} - -); +Regular.args = { + size: 'medium', + placeholder: 'Text field', + iconAlign: 'suffix', + styleType: 'stroke', + autoFocus: true, + isClearable: true, +}; diff --git a/src/components/molecules/Loader/Loader.stories.tsx b/src/components/molecules/Loader/Loader.stories.tsx index bf2833de..08e0aed8 100644 --- a/src/components/molecules/Loader/Loader.stories.tsx +++ b/src/components/molecules/Loader/Loader.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import SizeSwitcher from 'components/SizeSwitcher'; +import { SizeSwitcher, Template } from 'components/storybook'; -import { Loader, SpinnerSize } from './Loader'; +import { Loader, LoaderProps, SpinnerSize } from './Loader'; import { exportStory } from '../../../libs'; const { Inline, Spinner } = Loader; @@ -10,26 +10,26 @@ export default { title: exportStory('Loader', 'molecules'), component: Loader, subcomponents: { Inline, Spinner }, + argTypes: { + size: { + options: ['small', 'middle', 'regular'], + control: { type: 'select' }, + }, + }, }; -export const Regular: React.FC = () => { - const [loading, setLoading] = React.useState(true); - - const onToggleHandler = (): void => setLoading((s) => !s); - - return ( - - {(size) => ( - <> -

Toggle

+export const Regular: React.FC & { args: LoaderProps } = ({ children, ...props }) => ( + +); - -

Test

- - - )} - - ); +Regular.args = { + size: 'regular', + loading: true, + fade: true, + fixed: true, + height: '100%', }; export const _Inline = (): React.ReactElement => ; diff --git a/src/components/molecules/Notify/Notify.stories.tsx b/src/components/molecules/Notify/Notify.stories.tsx index f53c94ca..16a8efa0 100644 --- a/src/components/molecules/Notify/Notify.stories.tsx +++ b/src/components/molecules/Notify/Notify.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { Space, Button, Label } from 'components/atoms'; -import SizeSwitcher from 'components/SizeSwitcher'; +import { SizeSwitcher } from 'components/storybook'; import { SpaceSize } from 'components/atoms/Space/Space'; import { useNotify } from 'hooks'; diff --git a/src/components/molecules/Select/Select.stories.tsx b/src/components/molecules/Select/Select.stories.tsx index 2e8a8b3f..69c7dc6e 100644 --- a/src/components/molecules/Select/Select.stories.tsx +++ b/src/components/molecules/Select/Select.stories.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; import { AvatarInline, Space, Icon } from 'components/atoms'; import { Form, useForm } from 'components/organisms'; -import SizeSwitcher from 'components/SizeSwitcher'; +import { SizeSwitcher } from 'components/storybook'; import { capitalize, makeid } from 'libs/string'; import { SizeType } from 'types'; import { Select } from './Select'; +import { ComponentProps } from './components/Component'; import { Option } from './interfaces'; import { exportStory } from '../../../libs'; @@ -420,7 +421,7 @@ export const TagsMode = (): React.ReactNode => { ); }; -export const InlineValueMode = (): React.ReactNode => { +export const InlineValueMode: React.FC & { args: ComponentProps } = ({ children, ...props }) => { const [form] = useForm(); const [, setSearch] = React.useState(''); const [list, setList] = React.useState([]); @@ -475,6 +476,7 @@ export const InlineValueMode = (): React.ReactNode => { isClearable onSearch={(val) => setSearch(val)} onAddNew={(value) => setList([{ value, text: value }, ...list])} + {...props} > {list.map((item, i) => ( @@ -493,3 +495,14 @@ export const InlineValueMode = (): React.ReactNode => { ); }; + +InlineValueMode.args = { + loading: false, + mode: 'tags', + valueMode: 'inline', + size: 'medium', + newPlaceholder: 'Add new...', + emptyLabel: 'No found', + isClearable: true, + disabled: false, +}; diff --git a/src/components/organisms/Modal/Modal.stories.tsx b/src/components/organisms/Modal/Modal.stories.tsx index 4a42e276..e697a71f 100644 --- a/src/components/organisms/Modal/Modal.stories.tsx +++ b/src/components/organisms/Modal/Modal.stories.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { Icon, Switch, Button, Space } from 'components/atoms'; -import SizeSwitcher from 'components/SizeSwitcher'; +import { SizeSwitcher } from 'components/storybook'; import { Modal, ModalSize } from './Modal'; import { exportStory } from '../../../libs'; diff --git a/src/components/organisms/Modal/Modal.tsx b/src/components/organisms/Modal/Modal.tsx index e81eaef9..8b9a3061 100644 --- a/src/components/organisms/Modal/Modal.tsx +++ b/src/components/organisms/Modal/Modal.tsx @@ -2,17 +2,17 @@ import * as React from 'react'; import cn from 'classnames'; import { usePortal, useScrollToggler } from 'hooks'; import { Mask, Button } from 'components/atoms'; -import { ModalContent, ModalContentProps } from './ModalContent'; -import { ModalFooter, ModalFooterProps } from './ModalFooter'; +import { ModalContent } from './ModalContent'; +import { ModalFooter } from './ModalFooter'; export type ModalSize = 'small' | 'regular' | 'large'; export interface ModalComposition { - Content: React.FC; - Footer: React.FC; + Content: React.FC>; + Footer: React.FC>; } -export interface ModalProps { +export interface ModalProps extends React.HTMLAttributes { open?: boolean; defaultOpen?: boolean; mask?: boolean; @@ -78,7 +78,7 @@ const Modal: React.FC & ModalComposition = ({
{showHeader ? ( diff --git a/src/components/organisms/Modal/ModalContent.tsx b/src/components/organisms/Modal/ModalContent.tsx index 05e97a61..2d45dccf 100644 --- a/src/components/organisms/Modal/ModalContent.tsx +++ b/src/components/organisms/Modal/ModalContent.tsx @@ -1,12 +1,7 @@ import * as React from 'react'; import cn from 'classnames'; -export interface ModalContentProps { - className?: string; - style?: React.CSSProperties; -} - -export const ModalContent: React.FC = ({ className, style, children }) => ( +export const ModalContent: React.FC> = ({ className, style, children }) => (
{children}
diff --git a/src/components/organisms/Modal/ModalFooter.tsx b/src/components/organisms/Modal/ModalFooter.tsx index 570b3696..f5cab0ca 100644 --- a/src/components/organisms/Modal/ModalFooter.tsx +++ b/src/components/organisms/Modal/ModalFooter.tsx @@ -1,12 +1,7 @@ import * as React from 'react'; import cn from 'classnames'; -export interface ModalFooterProps { - className?: string; - style?: React.CSSProperties; -} - -export const ModalFooter: React.FC = ({ className, style, children }) => ( +export const ModalFooter: React.FC> = ({ className, style, children }) => (
{children}
diff --git a/src/components/SizeSwitcher.tsx b/src/components/storybook/SizeSwitcher.tsx similarity index 92% rename from src/components/SizeSwitcher.tsx rename to src/components/storybook/SizeSwitcher.tsx index bc05e783..dc7e2338 100644 --- a/src/components/SizeSwitcher.tsx +++ b/src/components/storybook/SizeSwitcher.tsx @@ -1,8 +1,7 @@ import * as React from 'react'; +import { Button, ButtonGroup } from 'components/atoms'; import { capitalize } from 'libs'; -import { Button, ButtonGroup } from './atoms/Button/Button'; - interface Props { sizes?: string[]; defaultSize?: string; diff --git a/src/components/storybook/Template.tsx b/src/components/storybook/Template.tsx new file mode 100644 index 00000000..b7c2fe20 --- /dev/null +++ b/src/components/storybook/Template.tsx @@ -0,0 +1,14 @@ +import * as React from 'react'; +import { Container, Row, Col, Space } from 'components/atoms'; + +const Template: React.FC = ({ children }) => ( + + + + {children} + + + +); + +export default Template; diff --git a/src/components/storybook/index.ts b/src/components/storybook/index.ts new file mode 100644 index 00000000..0d4e3af6 --- /dev/null +++ b/src/components/storybook/index.ts @@ -0,0 +1,2 @@ +export { default as SizeSwitcher } from './SizeSwitcher'; +export { default as Template } from './Template'; diff --git a/src/index.ts b/src/index.ts index 3c23ea4e..c7f93a12 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,76 +1,10 @@ import './styles/index.scss'; -// Atoms -export { - Alert, - Avatar, - AvatarCard, - AvatarInline, - Animated, - Badge, - Button, - ButtonGroup, - Label, - ListGroup, - Extra, - Input, - Icon, - Switch, - Chips, - Radio, - Card, - Container, - Mask, - Row, - Col, - Collapse, - Tooltip, - Tabs, - Space, -} from './components/atoms'; - -// Molecules -export { - Loader, - Stepper, - DatePicker, - InputPhone, - InputSearch, - Checkbox, - CheckboxGroup, - Textarea, - Upload, - NotifyContainer, - NotifyContext, - NotifyProvider, - Select, -} from './components/molecules'; - -// Organisms -export { - Actions, - Form, - Field, - List, - useForm, - FormProvider, - Layout, - Modal, - Sidebar, - SortBy, - Table, - Column, - ColumnGroup, - Summary, -} from './components/organisms'; - -// Export types -export type { DatePickerProps, RangePickerProps, DatePickerComposition } from 'components/molecules/DatePicker/types'; -export type { ColumnType, TableProps } from 'components/organisms/Table/Table'; -export type { FormInstance, FormProps } from 'components/organisms/Form'; +// Components +export * from './components'; // Libs -export { firstLetters } from './libs'; +export * from './libs'; // Hooks -export { useNotify } from './hooks'; +export * from './hooks'; diff --git a/src/styles/mixins/flexbox.scss b/src/styles/mixins/flexbox.scss index 9eec457e..f8e1fde5 100644 --- a/src/styles/mixins/flexbox.scss +++ b/src/styles/mixins/flexbox.scss @@ -62,6 +62,14 @@ align-items: flex-start; } +.flex { + @include flex; +} + +.flex-column { + @include flex-column; +} + .flex--row { flex-direction: row !important; } diff --git a/yarn.lock b/yarn.lock index f423e1f0..ecb67177 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1839,17 +1839,17 @@ resolved "https://registry.yarnpkg.com/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz#5405ee8e444ed212db44e79351f0c70a582aae25" integrity sha512-DetpxZw1fzPD5xUBrIAoplLChO2VB8DlL5Gg+I1IR9b2wPqYIca2WSUxL5g1vLeR4MsQq1NeWriXAVffV+U1Fw== -"@storybook/addon-actions@6.3.6", "@storybook/addon-actions@^6.3.6": - version "6.3.6" - resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-6.3.6.tgz#691d61d6aca9c4b3edba50c531cbe4d4139ed451" - integrity sha512-1MBqCbFiupGEDyIXqFkzF4iR8AduuB7qSNduqtsFauvIkrG5bnlbg5JC7WjnixkCaaWlufgbpasEHioXO9EXGw== - dependencies: - "@storybook/addons" "6.3.6" - "@storybook/api" "6.3.6" - "@storybook/client-api" "6.3.6" - "@storybook/components" "6.3.6" - "@storybook/core-events" "6.3.6" - "@storybook/theming" "6.3.6" +"@storybook/addon-actions@6.3.7", "@storybook/addon-actions@^6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-6.3.7.tgz#b25434972bef351aceb3f7ec6fd66e210f256aac" + integrity sha512-CEAmztbVt47Gw1o6Iw0VP20tuvISCEKk9CS/rCjHtb4ubby6+j/bkp3pkEUQIbyLdHiLWFMz0ZJdyA/U6T6jCw== + dependencies: + "@storybook/addons" "6.3.7" + "@storybook/api" "6.3.7" + "@storybook/client-api" "6.3.7" + "@storybook/components" "6.3.7" + "@storybook/core-events" "6.3.7" + "@storybook/theming" "6.3.7" core-js "^3.8.2" fast-deep-equal "^3.1.3" global "^4.4.0" @@ -1862,17 +1862,17 @@ util-deprecate "^1.0.2" uuid-browser "^3.1.0" -"@storybook/addon-backgrounds@6.3.6": - version "6.3.6" - resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-6.3.6.tgz#93128e6ebfcb953a83cc2165056dd5815d32cef2" - integrity sha512-1lBVAem2M+ggb1UNVgB7/56LaQAor9lI8q0xtQdAzAkt9K4RbbOsLGRhyUm3QH5OiB3qHHG5WQBujWUD6Qfy4g== - dependencies: - "@storybook/addons" "6.3.6" - "@storybook/api" "6.3.6" - "@storybook/client-logger" "6.3.6" - "@storybook/components" "6.3.6" - "@storybook/core-events" "6.3.6" - "@storybook/theming" "6.3.6" +"@storybook/addon-backgrounds@6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-6.3.7.tgz#b8ed464cf1000f77678570912640972c74129a2e" + integrity sha512-NH95pDNILgCXeegbckG+P3zxT5SPmgkAq29P+e3gX7YBOTc6885YCFMJLFpuDMwW4lA0ovXosp4PaUHLsBnLDg== + dependencies: + "@storybook/addons" "6.3.7" + "@storybook/api" "6.3.7" + "@storybook/client-logger" "6.3.7" + "@storybook/components" "6.3.7" + "@storybook/core-events" "6.3.7" + "@storybook/theming" "6.3.7" core-js "^3.8.2" global "^4.4.0" memoizerific "^1.11.3" @@ -1880,24 +1880,24 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/addon-controls@6.3.6", "@storybook/addon-controls@^6.3.6": - version "6.3.6" - resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-6.3.6.tgz#2f8071e5b521375aace60af96e33a19f016581c9" - integrity sha512-wTWmnZl2qEAUqgLh8a7TL5f6w37Q51lAoJNlwxFFBSKtGS7xFUnou4qTUArNy5iKu1cWoVvofJ9RnP1maGByYA== - dependencies: - "@storybook/addons" "6.3.6" - "@storybook/api" "6.3.6" - "@storybook/client-api" "6.3.6" - "@storybook/components" "6.3.6" - "@storybook/node-logger" "6.3.6" - "@storybook/theming" "6.3.6" +"@storybook/addon-controls@6.3.7", "@storybook/addon-controls@^6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-6.3.7.tgz#ac8fa5ec055f09fd5187998358b5188fed54a528" + integrity sha512-VHOv5XZ0MQ45k6X7AUrMIxGkm7sgIiPwsvajnoeMe7UwS3ngbTb0Q0raLqI/L5jLM/jyQwfpUO9isA6cztGTEQ== + dependencies: + "@storybook/addons" "6.3.7" + "@storybook/api" "6.3.7" + "@storybook/client-api" "6.3.7" + "@storybook/components" "6.3.7" + "@storybook/node-logger" "6.3.7" + "@storybook/theming" "6.3.7" core-js "^3.8.2" ts-dedent "^2.0.0" -"@storybook/addon-docs@6.3.6", "@storybook/addon-docs@^6.3.6": - version "6.3.6" - resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-6.3.6.tgz#85b8a72b91f9c43edfaf21c416a9b01ad0e06ea4" - integrity sha512-/ZPB9u3lfc6ZUrgt9HENU1BxAHNfTbh9r2LictQ8o9gYE/BqvZutl2zqilTpVuutQtTgQ6JycVhxtpk9+TDcuA== +"@storybook/addon-docs@6.3.7", "@storybook/addon-docs@^6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-6.3.7.tgz#a7b8ff2c0baf85fc9cc1b3d71f481ec40499f3cc" + integrity sha512-cyuyoLuB5ELhbrXgnZneDCHqNq1wSdWZ4dzdHy1E5WwLPEhLlD6INfEsm8gnDIb4IncYuzMhK3XYBDd7d3ijOg== dependencies: "@babel/core" "^7.12.10" "@babel/generator" "^7.12.11" @@ -1908,20 +1908,20 @@ "@mdx-js/loader" "^1.6.22" "@mdx-js/mdx" "^1.6.22" "@mdx-js/react" "^1.6.22" - "@storybook/addons" "6.3.6" - "@storybook/api" "6.3.6" - "@storybook/builder-webpack4" "6.3.6" - "@storybook/client-api" "6.3.6" - "@storybook/client-logger" "6.3.6" - "@storybook/components" "6.3.6" - "@storybook/core" "6.3.6" - "@storybook/core-events" "6.3.6" + "@storybook/addons" "6.3.7" + "@storybook/api" "6.3.7" + "@storybook/builder-webpack4" "6.3.7" + "@storybook/client-api" "6.3.7" + "@storybook/client-logger" "6.3.7" + "@storybook/components" "6.3.7" + "@storybook/core" "6.3.7" + "@storybook/core-events" "6.3.7" "@storybook/csf" "0.0.1" - "@storybook/csf-tools" "6.3.6" - "@storybook/node-logger" "6.3.6" - "@storybook/postinstall" "6.3.6" - "@storybook/source-loader" "6.3.6" - "@storybook/theming" "6.3.6" + "@storybook/csf-tools" "6.3.7" + "@storybook/node-logger" "6.3.7" + "@storybook/postinstall" "6.3.7" + "@storybook/source-loader" "6.3.7" + "@storybook/theming" "6.3.7" acorn "^7.4.1" acorn-jsx "^5.3.1" acorn-walk "^7.2.0" @@ -1944,36 +1944,36 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/addon-essentials@^6.3.6": - version "6.3.6" - resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-6.3.6.tgz#29f5249daee086fe2d14c899ae61712b8c8fbcbd" - integrity sha512-FUrpCeINaN4L9L81FswtQFEq2xLwj3W7EyhmqsZcYSr64nscpQyjlPVjs5zhrEanOGIf+4E+mBmWafxbYufXwQ== +"@storybook/addon-essentials@^6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-6.3.7.tgz#5af605ab705e938c5b25a7e19daa26e5924fd4e4" + integrity sha512-ZWAW3qMFrrpfSekmCZibp/ivnohFLJdJweiIA0CLnuCNuuK9kQdpFahWdvyBy5NlCj3UJwB7epTZYZyHqYW7UQ== dependencies: - "@storybook/addon-actions" "6.3.6" - "@storybook/addon-backgrounds" "6.3.6" - "@storybook/addon-controls" "6.3.6" - "@storybook/addon-docs" "6.3.6" + "@storybook/addon-actions" "6.3.7" + "@storybook/addon-backgrounds" "6.3.7" + "@storybook/addon-controls" "6.3.7" + "@storybook/addon-docs" "6.3.7" "@storybook/addon-measure" "^2.0.0" - "@storybook/addon-toolbars" "6.3.6" - "@storybook/addon-viewport" "6.3.6" - "@storybook/addons" "6.3.6" - "@storybook/api" "6.3.6" - "@storybook/node-logger" "6.3.6" + "@storybook/addon-toolbars" "6.3.7" + "@storybook/addon-viewport" "6.3.7" + "@storybook/addons" "6.3.7" + "@storybook/api" "6.3.7" + "@storybook/node-logger" "6.3.7" core-js "^3.8.2" regenerator-runtime "^0.13.7" storybook-addon-outline "^1.4.1" ts-dedent "^2.0.0" -"@storybook/addon-links@^6.3.6": - version "6.3.6" - resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-6.3.6.tgz#dc410d5b4a0d222b6b8d0ef03da7a4c16919c092" - integrity sha512-PaeAJTjwtPlhrLZlaSQ1YIFA8V0C1yI0dc351lPbTiE7fJ7DwTE03K6xIF/jEdTo+xzhi2PM1Fgvi/SsSecI8w== +"@storybook/addon-links@^6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-6.3.7.tgz#f273abba6d056794a4aa920b2fa9639136e6747f" + integrity sha512-/8Gq18o1DejP3Om0ZOJRkMzW5FoHqoAmR0pFx4DipmNu5lYy7V3krLw4jW4qja1MuQkZ53MGh08FJOoAc2RZvQ== dependencies: - "@storybook/addons" "6.3.6" - "@storybook/client-logger" "6.3.6" - "@storybook/core-events" "6.3.6" + "@storybook/addons" "6.3.7" + "@storybook/client-logger" "6.3.7" + "@storybook/core-events" "6.3.7" "@storybook/csf" "0.0.1" - "@storybook/router" "6.3.6" + "@storybook/router" "6.3.7" "@types/qs" "^6.9.5" core-js "^3.8.2" global "^4.4.0" @@ -1987,37 +1987,52 @@ resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-2.0.0.tgz#c40bbe91bacd3f795963dc1ee6ff86be87deeda9" integrity sha512-ZhdT++cX+L9LwjhGYggvYUUVQH/MGn2rwbrAwCMzA/f2QTFvkjxzX8nDgMxIhaLCDC+gHIxfJG2wrWN0jkBr3g== -"@storybook/addon-toolbars@6.3.6": - version "6.3.6" - resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-6.3.6.tgz#41f5f29988260d2aad9431b7a91f57e848c3e0bf" - integrity sha512-VpwkMtvT/4KNjqdO2SCkFw4koMgYN2k8hckbTGRzuUYYTHBvl9yK4q0A7RELEnkm/tsmDI1TjenV/MBifp2Aiw== +"@storybook/addon-toolbars@6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-6.3.7.tgz#acd0c9eea7fad056d995a821e34abddd5b065b9b" + integrity sha512-UTIurbl2WXj/jSOj7ndqQ/WtG7kSpGp62T7gwEZTZ+h/3sJn+bixofBD/7+sXa4hWW07YgTXV547DMhzp5bygg== dependencies: - "@storybook/addons" "6.3.6" - "@storybook/api" "6.3.6" - "@storybook/client-api" "6.3.6" - "@storybook/components" "6.3.6" - "@storybook/theming" "6.3.6" + "@storybook/addons" "6.3.7" + "@storybook/api" "6.3.7" + "@storybook/client-api" "6.3.7" + "@storybook/components" "6.3.7" + "@storybook/theming" "6.3.7" core-js "^3.8.2" regenerator-runtime "^0.13.7" -"@storybook/addon-viewport@6.3.6": - version "6.3.6" - resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-6.3.6.tgz#9117316e918559d389a19571166579858b25b09b" - integrity sha512-Z5eztFFGd6vd+38sDurfTkIr9lY6EYWtMJzr5efedRZGg2IZLXZxQCoyjKEB29VB/IIjHEYHhHSh4SFsHT/m6g== - dependencies: - "@storybook/addons" "6.3.6" - "@storybook/api" "6.3.6" - "@storybook/client-logger" "6.3.6" - "@storybook/components" "6.3.6" - "@storybook/core-events" "6.3.6" - "@storybook/theming" "6.3.6" +"@storybook/addon-viewport@6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-6.3.7.tgz#4dc5007e6c8e4d095814c34234429fe889e4014d" + integrity sha512-Hdv2QoVVfe/YuMVQKVVnfCCuEoTqTa8Ck7AOKz31VSAliBFhXewP51oKhw9F6mTyvCozMHX6EBtBzN06KyrPyw== + dependencies: + "@storybook/addons" "6.3.7" + "@storybook/api" "6.3.7" + "@storybook/client-logger" "6.3.7" + "@storybook/components" "6.3.7" + "@storybook/core-events" "6.3.7" + "@storybook/theming" "6.3.7" core-js "^3.8.2" global "^4.4.0" memoizerific "^1.11.3" prop-types "^15.7.2" regenerator-runtime "^0.13.7" -"@storybook/addons@6.3.6", "@storybook/addons@^6.3.0", "@storybook/addons@^6.3.6": +"@storybook/addons@6.3.7", "@storybook/addons@^6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.3.7.tgz#7c6b8d11b65f67b1884f6140437fe996dc39537a" + integrity sha512-9stVjTcc52bqqh7YQex/LpSjJ4e2Czm4/ZYDjIiNy0p4OZEx+yLhL5mZzMWh2NQd6vv+pHASBSxf2IeaR5511A== + dependencies: + "@storybook/api" "6.3.7" + "@storybook/channels" "6.3.7" + "@storybook/client-logger" "6.3.7" + "@storybook/core-events" "6.3.7" + "@storybook/router" "6.3.7" + "@storybook/theming" "6.3.7" + core-js "^3.8.2" + global "^4.4.0" + regenerator-runtime "^0.13.7" + +"@storybook/addons@^6.3.0": version "6.3.6" resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.3.6.tgz#330fd722bdae8abefeb029583e89e51e62c20b60" integrity sha512-tVV0vqaEEN9Md4bgScwfrnZYkN8iKZarpkIOFheLev+PHjSp8lgWMK5SNWDlbBYqfQfzrz9xbs+F07bMjfx9jQ== @@ -2058,6 +2073,32 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" +"@storybook/api@6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.3.7.tgz#88b8a51422cd0739c91bde0b1d65fb6d8a8485d0" + integrity sha512-57al8mxmE9agXZGo8syRQ8UhvGnDC9zkuwkBPXchESYYVkm3Mc54RTvdAOYDiy85VS4JxiGOywHayCaRwgUddQ== + dependencies: + "@reach/router" "^1.3.4" + "@storybook/channels" "6.3.7" + "@storybook/client-logger" "6.3.7" + "@storybook/core-events" "6.3.7" + "@storybook/csf" "0.0.1" + "@storybook/router" "6.3.7" + "@storybook/semver" "^7.3.2" + "@storybook/theming" "6.3.7" + "@types/reach__router" "^1.3.7" + core-js "^3.8.2" + fast-deep-equal "^3.1.3" + global "^4.4.0" + lodash "^4.17.20" + memoizerific "^1.11.3" + qs "^6.10.0" + regenerator-runtime "^0.13.7" + store2 "^2.12.0" + telejson "^5.3.2" + ts-dedent "^2.0.0" + util-deprecate "^1.0.2" + "@storybook/api@^6.3.0": version "6.3.1" resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.3.1.tgz#17b0a50208212666992fac5da74cc56de66078d2" @@ -2084,10 +2125,10 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/builder-webpack4@6.3.6": - version "6.3.6" - resolved "https://registry.yarnpkg.com/@storybook/builder-webpack4/-/builder-webpack4-6.3.6.tgz#fe444abfc178e005ea077e2bcfd6ae7509522908" - integrity sha512-LhTPQQowS2t6BRnyfusWZLbhjjf54/HiQyovJTTDnqrCiO6QoCMbVnp79LeO1aSkpQCKoeqOZ7TzH87fCytnZA== +"@storybook/builder-webpack4@6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/builder-webpack4/-/builder-webpack4-6.3.7.tgz#1cc1a1184043be3f6ef840d0b43ba91a803105e2" + integrity sha512-M5envblMzAUrNqP1+ouKiL8iSIW/90+kBRU2QeWlZoZl1ib+fiFoKk06cgbaC70Bx1lU8nOnI/VBvB5pLhXLaw== dependencies: "@babel/core" "^7.12.10" "@babel/plugin-proposal-class-properties" "^7.12.1" @@ -2110,20 +2151,20 @@ "@babel/preset-env" "^7.12.11" "@babel/preset-react" "^7.12.10" "@babel/preset-typescript" "^7.12.7" - "@storybook/addons" "6.3.6" - "@storybook/api" "6.3.6" - "@storybook/channel-postmessage" "6.3.6" - "@storybook/channels" "6.3.6" - "@storybook/client-api" "6.3.6" - "@storybook/client-logger" "6.3.6" - "@storybook/components" "6.3.6" - "@storybook/core-common" "6.3.6" - "@storybook/core-events" "6.3.6" - "@storybook/node-logger" "6.3.6" - "@storybook/router" "6.3.6" + "@storybook/addons" "6.3.7" + "@storybook/api" "6.3.7" + "@storybook/channel-postmessage" "6.3.7" + "@storybook/channels" "6.3.7" + "@storybook/client-api" "6.3.7" + "@storybook/client-logger" "6.3.7" + "@storybook/components" "6.3.7" + "@storybook/core-common" "6.3.7" + "@storybook/core-events" "6.3.7" + "@storybook/node-logger" "6.3.7" + "@storybook/router" "6.3.7" "@storybook/semver" "^7.3.2" - "@storybook/theming" "6.3.6" - "@storybook/ui" "6.3.6" + "@storybook/theming" "6.3.7" + "@storybook/ui" "6.3.7" "@types/node" "^14.0.10" "@types/webpack" "^4.41.26" autoprefixer "^9.8.6" @@ -2160,14 +2201,14 @@ webpack-hot-middleware "^2.25.0" webpack-virtual-modules "^0.2.2" -"@storybook/channel-postmessage@6.3.6": - version "6.3.6" - resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.3.6.tgz#f29c3678161462428e78c9cfed2da11ffca4acb0" - integrity sha512-GK7hXnaa+1pxEeMpREDzAZ3+2+k1KN1lbrZf+V7Kc1JZv1/Ji/vxk8AgxwiuzPAMx5J0yh/FduPscIPZ87Pibw== +"@storybook/channel-postmessage@6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.3.7.tgz#bd4edf84a29aa2cd4a22d26115c60194d289a840" + integrity sha512-Cmw8HRkeSF1yUFLfEIUIkUICyCXX8x5Ol/5QPbiW9HPE2hbZtYROCcg4bmWqdq59N0Tp9FQNSn+9ZygPgqQtNw== dependencies: - "@storybook/channels" "6.3.6" - "@storybook/client-logger" "6.3.6" - "@storybook/core-events" "6.3.6" + "@storybook/channels" "6.3.7" + "@storybook/client-logger" "6.3.7" + "@storybook/core-events" "6.3.7" core-js "^3.8.2" global "^4.4.0" qs "^6.10.0" @@ -2191,16 +2232,25 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/client-api@6.3.6": - version "6.3.6" - resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.3.6.tgz#4826ce366ae109f608da6ade24b29efeb9b7f7dd" - integrity sha512-Q/bWuH691L6k7xkiKtBmZo8C+ijgmQ+vc2Fz8pzIRZuMV8ROL74qhrS4BMKV4LhiYm4f8todtWfaQPBjawZMIA== +"@storybook/channels@6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.3.7.tgz#85ed5925522b802d959810f78d37aacde7fea66e" + integrity sha512-aErXO+SRO8MPp2wOkT2n9d0fby+8yM35tq1tI633B4eQsM74EykbXPv7EamrYPqp1AI4BdiloyEpr0hmr2zlvg== dependencies: - "@storybook/addons" "6.3.6" - "@storybook/channel-postmessage" "6.3.6" - "@storybook/channels" "6.3.6" - "@storybook/client-logger" "6.3.6" - "@storybook/core-events" "6.3.6" + core-js "^3.8.2" + ts-dedent "^2.0.0" + util-deprecate "^1.0.2" + +"@storybook/client-api@6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.3.7.tgz#cb1dca05467d777bd09aadbbdd1dd22ca537ce14" + integrity sha512-8wOH19cMIwIIYhZy5O5Wl8JT1QOL5kNuamp9GPmg5ff4DtnG+/uUslskRvsnKyjPvl+WbIlZtBVWBiawVdd/yQ== + dependencies: + "@storybook/addons" "6.3.7" + "@storybook/channel-postmessage" "6.3.7" + "@storybook/channels" "6.3.7" + "@storybook/client-logger" "6.3.7" + "@storybook/core-events" "6.3.7" "@storybook/csf" "0.0.1" "@types/qs" "^6.9.5" "@types/webpack-env" "^1.16.0" @@ -2231,7 +2281,45 @@ core-js "^3.8.2" global "^4.4.0" -"@storybook/components@6.3.6", "@storybook/components@^6.3.0": +"@storybook/client-logger@6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.3.7.tgz#ff17b7494e7e9e23089b0d5c5364c371c726bdd1" + integrity sha512-BQRErHE3nIEuUJN/3S3dO1LzxAknOgrFeZLd4UVcH/fvjtS1F4EkhcbH+jNyUWvcWGv66PZYN0oFPEn/g3Savg== + dependencies: + core-js "^3.8.2" + global "^4.4.0" + +"@storybook/components@6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.3.7.tgz#42b1ca6d24e388e02eab82aa9ed3365db2266ecc" + integrity sha512-O7LIg9Z18G0AJqXX7Shcj0uHqwXlSA5UkHgaz9A7mqqqJNl6m6FwwTWcxR1acUfYVNkO+czgpqZHNrOF6rky1A== + dependencies: + "@popperjs/core" "^2.6.0" + "@storybook/client-logger" "6.3.7" + "@storybook/csf" "0.0.1" + "@storybook/theming" "6.3.7" + "@types/color-convert" "^2.0.0" + "@types/overlayscrollbars" "^1.12.0" + "@types/react-syntax-highlighter" "11.0.5" + color-convert "^2.0.1" + core-js "^3.8.2" + fast-deep-equal "^3.1.3" + global "^4.4.0" + lodash "^4.17.20" + markdown-to-jsx "^7.1.3" + memoizerific "^1.11.3" + overlayscrollbars "^1.13.1" + polished "^4.0.5" + prop-types "^15.7.2" + react-colorful "^5.1.2" + react-popper-tooltip "^3.1.1" + react-syntax-highlighter "^13.5.3" + react-textarea-autosize "^8.3.0" + regenerator-runtime "^0.13.7" + ts-dedent "^2.0.0" + util-deprecate "^1.0.2" + +"@storybook/components@^6.3.0": version "6.3.6" resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.3.6.tgz#bc2fa1dbe59f42b5b2aeb9f84424072835d4ce8b" integrity sha512-aZkmtAY8b+LFXG6dVp6cTS6zGJuxkHRHcesRSWRQPxtgitaz1G58clRHxbKPRokfjPHNgYA3snogyeqxSA7YNQ== @@ -2261,18 +2349,18 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/core-client@6.3.6": - version "6.3.6" - resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-6.3.6.tgz#7def721aa15d4faaff574780d30b92055db7261c" - integrity sha512-Bq86flEdXdMNbdHrGMNQ6OT1tcBQU8ym56d+nG46Ctjf5GN+Dl+rPtRWuu7cIZs10KgqJH+86DXp+tvpQIDidg== +"@storybook/core-client@6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-6.3.7.tgz#cfb75952e0e1d32f2aca92bca2786334ab589c40" + integrity sha512-M/4A65yV+Y4lsCQXX4BtQO/i3BcMPrU5FkDG8qJd3dkcx2fUlFvGWqQPkcTZE+MPVvMEGl/AsEZSADzah9+dAg== dependencies: - "@storybook/addons" "6.3.6" - "@storybook/channel-postmessage" "6.3.6" - "@storybook/client-api" "6.3.6" - "@storybook/client-logger" "6.3.6" - "@storybook/core-events" "6.3.6" + "@storybook/addons" "6.3.7" + "@storybook/channel-postmessage" "6.3.7" + "@storybook/client-api" "6.3.7" + "@storybook/client-logger" "6.3.7" + "@storybook/core-events" "6.3.7" "@storybook/csf" "0.0.1" - "@storybook/ui" "6.3.6" + "@storybook/ui" "6.3.7" airbnb-js-shims "^2.2.1" ansi-to-html "^0.6.11" core-js "^3.8.2" @@ -2284,10 +2372,10 @@ unfetch "^4.2.0" util-deprecate "^1.0.2" -"@storybook/core-common@6.3.6": - version "6.3.6" - resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-6.3.6.tgz#da8eed703b609968e15177446f0f1609d1d6d0d0" - integrity sha512-nHolFOmTPymI50j180bCtcf1UJZ2eOnYaECRtHvVrCUod5KFF7wh2EHrgWoKqrKrsn84UOY/LkX2C2WkbYtWRg== +"@storybook/core-common@6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-6.3.7.tgz#9eedf3ff16aff870950e3372ab71ef846fa3ac52" + integrity sha512-exLoqRPPsAefwyjbsQBLNFrlPCcv69Q/pclqmIm7FqAPR7f3CKP1rqsHY0PnemizTL/+cLX5S7mY90gI6wpNug== dependencies: "@babel/core" "^7.12.10" "@babel/plugin-proposal-class-properties" "^7.12.1" @@ -2310,7 +2398,7 @@ "@babel/preset-react" "^7.12.10" "@babel/preset-typescript" "^7.12.7" "@babel/register" "^7.12.1" - "@storybook/node-logger" "6.3.6" + "@storybook/node-logger" "6.3.7" "@storybook/semver" "^7.3.2" "@types/glob-base" "^0.3.0" "@types/micromatch" "^4.0.1" @@ -2352,17 +2440,24 @@ dependencies: core-js "^3.8.2" -"@storybook/core-server@6.3.6": - version "6.3.6" - resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-6.3.6.tgz#43c1415573c3b72ec6b9ae48d68e1bb446722f7c" - integrity sha512-47ZcfxYn7t891oAMG98iH1BQIgQT9Yk/2BBNVCWY43Ong+ME1xJ6j4C/jkRUOseP7URlfLUQsUYKAYJNVijDvg== - dependencies: - "@storybook/builder-webpack4" "6.3.6" - "@storybook/core-client" "6.3.6" - "@storybook/core-common" "6.3.6" - "@storybook/csf-tools" "6.3.6" - "@storybook/manager-webpack4" "6.3.6" - "@storybook/node-logger" "6.3.6" +"@storybook/core-events@6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.3.7.tgz#c5bc7cae7dc295de73b6b9f671ecbe582582e9bd" + integrity sha512-l5Hlhe+C/dqxjobemZ6DWBhTOhQoFF3F1Y4kjFGE7pGZl/mas4M72I5I/FUcYCmbk2fbLfZX8hzKkUqS1hdyLA== + dependencies: + core-js "^3.8.2" + +"@storybook/core-server@6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-6.3.7.tgz#6f29ad720aafe4a97247b5e306eac4174d0931f2" + integrity sha512-m5OPD/rmZA7KFewkXzXD46/i1ngUoFO4LWOiAY/wR6RQGjYXGMhSa5UYFF6MNwSbiGS5YieHkR5crB1HP47AhQ== + dependencies: + "@storybook/builder-webpack4" "6.3.7" + "@storybook/core-client" "6.3.7" + "@storybook/core-common" "6.3.7" + "@storybook/csf-tools" "6.3.7" + "@storybook/manager-webpack4" "6.3.7" + "@storybook/node-logger" "6.3.7" "@storybook/semver" "^7.3.2" "@types/node" "^14.0.10" "@types/node-fetch" "^2.5.7" @@ -2391,18 +2486,18 @@ util-deprecate "^1.0.2" webpack "4" -"@storybook/core@6.3.6": - version "6.3.6" - resolved "https://registry.yarnpkg.com/@storybook/core/-/core-6.3.6.tgz#604419d346433103675901b3736bfa1ed9bc534f" - integrity sha512-y71VvVEbqCpG28fDBnfNg3RnUPnicwFYq9yuoFVRF0LYcJCy5cYhkIfW3JG8mN2m0P+LzH80mt2Rj6xlSXrkdQ== +"@storybook/core@6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/core/-/core-6.3.7.tgz#482228a270abc3e23fed10c7bc4df674da22ca19" + integrity sha512-YTVLPXqgyBg7TALNxQ+cd+GtCm/NFjxr/qQ1mss1T9GCMR0IjE0d0trgOVHHLAO8jCVlK8DeuqZCCgZFTXulRw== dependencies: - "@storybook/core-client" "6.3.6" - "@storybook/core-server" "6.3.6" + "@storybook/core-client" "6.3.7" + "@storybook/core-server" "6.3.7" -"@storybook/csf-tools@6.3.6": - version "6.3.6" - resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-6.3.6.tgz#603d9e832f946998b75ff8368fe862375d6cb52c" - integrity sha512-MQevelkEUVNCSjKMXLNc/G8q/BB5babPnSeI0IcJq4k+kLUSHtviimLNpPowMgGJBPx/y9VihH8N7vdJUWVj9w== +"@storybook/csf-tools@6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-6.3.7.tgz#505514d211f8698c47ddb15662442098b4b00156" + integrity sha512-A7yGsrYwh+vwVpmG8dHpEimX021RbZd9VzoREcILH56u8atssdh/rseljyWlRes3Sr4QgtLvDB7ggoJ+XDZH7w== dependencies: "@babel/generator" "^7.12.11" "@babel/parser" "^7.12.11" @@ -2426,20 +2521,20 @@ dependencies: lodash "^4.17.15" -"@storybook/manager-webpack4@6.3.6": - version "6.3.6" - resolved "https://registry.yarnpkg.com/@storybook/manager-webpack4/-/manager-webpack4-6.3.6.tgz#a5334aa7ae1e048bca8f4daf868925d7054fb715" - integrity sha512-qh/jV4b6mFRpRFfhk1JSyO2gKRz8PLPvDt2AD52/bTAtNRzypKoiWqyZNR2CJ9hgNQtDrk2CO3eKPrcdKYGizQ== +"@storybook/manager-webpack4@6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/manager-webpack4/-/manager-webpack4-6.3.7.tgz#9ca604dea38d3c47eb38bf485ca6107861280aa8" + integrity sha512-cwUdO3oklEtx6y+ZOl2zHvflICK85emiXBQGgRcCsnwWQRBZOMh+tCgOSZj4jmISVpT52RtT9woG4jKe15KBig== dependencies: "@babel/core" "^7.12.10" "@babel/plugin-transform-template-literals" "^7.12.1" "@babel/preset-react" "^7.12.10" - "@storybook/addons" "6.3.6" - "@storybook/core-client" "6.3.6" - "@storybook/core-common" "6.3.6" - "@storybook/node-logger" "6.3.6" - "@storybook/theming" "6.3.6" - "@storybook/ui" "6.3.6" + "@storybook/addons" "6.3.7" + "@storybook/core-client" "6.3.7" + "@storybook/core-common" "6.3.7" + "@storybook/node-logger" "6.3.7" + "@storybook/theming" "6.3.7" + "@storybook/ui" "6.3.7" "@types/node" "^14.0.10" "@types/webpack" "^4.41.26" babel-loader "^8.2.2" @@ -2469,10 +2564,10 @@ webpack-dev-middleware "^3.7.3" webpack-virtual-modules "^0.2.2" -"@storybook/node-logger@6.3.6": - version "6.3.6" - resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.3.6.tgz#10356608593440a8e3acf2aababef40333a3401b" - integrity sha512-XMDkMN7nVRojjiezrURlkI57+nz3OoH4UBV6qJZICKclxtdKAy0wwOlUSYEUq+axcJ4nvdfzPPoDfGoj37SW7A== +"@storybook/node-logger@6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.3.7.tgz#492469ea4749de8d984af144976961589a1ac382" + integrity sha512-YXHCblruRe6HcNefDOpuXJoaybHnnSryIVP9Z+gDv6OgLAMkyxccTIaQL9dbc/eI4ywgzAz4kD8t1RfVwXNVXw== dependencies: "@types/npmlog" "^4.1.2" chalk "^4.1.0" @@ -2492,10 +2587,10 @@ pretty-hrtime "^1.0.3" regenerator-runtime "^0.13.3" -"@storybook/postinstall@6.3.6": - version "6.3.6" - resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-6.3.6.tgz#fd79a6c109b38ced4b9b40db2d27b88ee184d449" - integrity sha512-90Izr8/GwLiXvdF2A3v1PCpWoxUBgqA0TrWGuiWXfJnfFRVlVrX9A/ClGUPSh80L3oE01E6raaOG4wW4JTRKfw== +"@storybook/postinstall@6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-6.3.7.tgz#7d90c06131382a3cf1550a1f2c70df13b220d9d3" + integrity sha512-HgTj7WdWo2cXrGfEhi5XYZA+G4vIzECtJHK22GEL9QxJth60Ah/dE94VqpTlyhSpzP74ZFUgr92+pP9o+j3CCw== dependencies: core-js "^3.8.2" @@ -2536,18 +2631,18 @@ react-docgen-typescript "^2.0.0" tslib "^2.0.0" -"@storybook/react@^6.3.6": - version "6.3.6" - resolved "https://registry.yarnpkg.com/@storybook/react/-/react-6.3.6.tgz#593bc0743ad22ed5e6e072e6157c20c704864fc3" - integrity sha512-2c30XTe7WzKnvgHBGOp1dzBVlhcbc3oEX0SIeVE9ZYkLvRPF+J1jG948a26iqOCOgRAW13Bele37mG1gbl4tiw== +"@storybook/react@^6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/react/-/react-6.3.7.tgz#b15259aeb4cdeef99cc7f09d21db42e3ecd7a01a" + integrity sha512-4S0iCQIzgi6PdAtV2sYw4uL57yIwbMInNFSux9CxPnVdlxOxCJ+U8IgTxD4tjkTvR4boYSEvEle46ns/bwg5iQ== dependencies: "@babel/preset-flow" "^7.12.1" "@babel/preset-react" "^7.12.10" "@pmmmwh/react-refresh-webpack-plugin" "^0.4.3" - "@storybook/addons" "6.3.6" - "@storybook/core" "6.3.6" - "@storybook/core-common" "6.3.6" - "@storybook/node-logger" "6.3.6" + "@storybook/addons" "6.3.7" + "@storybook/core" "6.3.7" + "@storybook/core-common" "6.3.7" + "@storybook/node-logger" "6.3.7" "@storybook/react-docgen-typescript-plugin" "1.0.2-canary.253f8c1.0" "@storybook/semver" "^7.3.2" "@types/webpack-env" "^1.16.0" @@ -2597,6 +2692,22 @@ qs "^6.10.0" ts-dedent "^2.0.0" +"@storybook/router@6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.3.7.tgz#1714a99a58a7b9f08b6fcfe2b678dad6ca896736" + integrity sha512-6tthN8op7H0NoYoE1SkQFJKC42pC4tGaoPn7kEql8XGeUJnxPtVFjrnywlTrRnKuxZKIvbilQBAwDml97XH23Q== + dependencies: + "@reach/router" "^1.3.4" + "@storybook/client-logger" "6.3.7" + "@types/reach__router" "^1.3.7" + core-js "^3.8.2" + fast-deep-equal "^3.1.3" + global "^4.4.0" + lodash "^4.17.20" + memoizerific "^1.11.3" + qs "^6.10.0" + ts-dedent "^2.0.0" + "@storybook/semver@^7.3.2": version "7.3.2" resolved "https://registry.yarnpkg.com/@storybook/semver/-/semver-7.3.2.tgz#f3b9c44a1c9a0b933c04e66d0048fcf2fa10dac0" @@ -2605,13 +2716,13 @@ core-js "^3.6.5" find-up "^4.1.0" -"@storybook/source-loader@6.3.6": - version "6.3.6" - resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-6.3.6.tgz#2d3d01919baad7a40f67d1150c74e41dea5f1d4c" - integrity sha512-om3iS3a+D287FzBrbXB/IXB6Z5Ql2yc4dFKTy6FPe5v4N3U0p5puWOKUYWWbTX1JbcpRj0IXXo7952G68tcC1g== +"@storybook/source-loader@6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-6.3.7.tgz#cc348305df3c2d8d716c0bab7830c9f537b859ff" + integrity sha512-0xQTq90jwx7W7MJn/idEBCGPOyxi/3No5j+5YdfJsSGJRuMFH3jt6pGgdeZ4XA01cmmIX6bZ+fB9al6yAzs91w== dependencies: - "@storybook/addons" "6.3.6" - "@storybook/client-logger" "6.3.6" + "@storybook/addons" "6.3.7" + "@storybook/client-logger" "6.3.7" "@storybook/csf" "0.0.1" core-js "^3.8.2" estraverse "^5.2.0" @@ -2639,7 +2750,7 @@ resolve-from "^5.0.0" ts-dedent "^2.0.0" -"@storybook/theming@6.3.6", "@storybook/theming@^6.3.6": +"@storybook/theming@6.3.6": version "6.3.6" resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.3.6.tgz#75624f6d4e01530b87afca3eab9996a16c0370ab" integrity sha512-mPrQrMUREajNEWxzgR8t0YIZsI9avPv25VNA08fANnwVsc887p4OL5eCTL2dFIlD34YDzAwiyRKYoLj2vDW4nw== @@ -2657,21 +2768,39 @@ resolve-from "^5.0.0" ts-dedent "^2.0.0" -"@storybook/ui@6.3.6": - version "6.3.6" - resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-6.3.6.tgz#a9ed8265e34bb8ef9f0dd08f40170b3dcf8a8931" - integrity sha512-S9FjISUiAmbBR7d6ubUEcELQdffDfRxerloxkXs5Ou7n8fEPqpgQB01Hw5MLRUwTEpxPzHn+xtIGYritAGxt/Q== +"@storybook/theming@6.3.7", "@storybook/theming@^6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.3.7.tgz#6daf9a21b26ed607f3c28a82acd90c0248e76d8b" + integrity sha512-GXBdw18JJd5jLLcRonAZWvGGdwEXByxF1IFNDSOYCcpHWsMgTk4XoLjceu9MpXET04pVX51LbVPLCvMdggoohg== dependencies: "@emotion/core" "^10.1.1" - "@storybook/addons" "6.3.6" - "@storybook/api" "6.3.6" - "@storybook/channels" "6.3.6" - "@storybook/client-logger" "6.3.6" - "@storybook/components" "6.3.6" - "@storybook/core-events" "6.3.6" - "@storybook/router" "6.3.6" + "@emotion/is-prop-valid" "^0.8.6" + "@emotion/styled" "^10.0.27" + "@storybook/client-logger" "6.3.7" + core-js "^3.8.2" + deep-object-diff "^1.1.0" + emotion-theming "^10.0.27" + global "^4.4.0" + memoizerific "^1.11.3" + polished "^4.0.5" + resolve-from "^5.0.0" + ts-dedent "^2.0.0" + +"@storybook/ui@6.3.7": + version "6.3.7" + resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-6.3.7.tgz#d0caea50640670da3189bbbb67c43da30c90455a" + integrity sha512-PBeRO8qtwAbtHvxUgNtz/ChUR6qnN+R37dMaIs3Y96jbks1fS2K9Mt7W5s1HnUbWbg2KsZMv9D4VYPBasY+Isw== + dependencies: + "@emotion/core" "^10.1.1" + "@storybook/addons" "6.3.7" + "@storybook/api" "6.3.7" + "@storybook/channels" "6.3.7" + "@storybook/client-logger" "6.3.7" + "@storybook/components" "6.3.7" + "@storybook/core-events" "6.3.7" + "@storybook/router" "6.3.7" "@storybook/semver" "^7.3.2" - "@storybook/theming" "6.3.6" + "@storybook/theming" "6.3.7" "@types/markdown-to-jsx" "^6.11.3" copy-to-clipboard "^3.3.1" core-js "^3.8.2" From ce6af329ac15505c1e24664370e9ac4e00b96035 Mon Sep 17 00:00:00 2001 From: Nicolae Tataru Date: Thu, 19 Aug 2021 15:28:08 +0300 Subject: [PATCH 5/6] Updated molecules & organisms stories, Minor fixes --- .storybook/storybook.scss | 15 +- src/components/atoms/Animated.tsx | 14 +- src/components/atoms/Avatar/Avatar.tsx | 1 - src/components/atoms/Avatar/AvatarCard.tsx | 1 - src/components/atoms/Badge/Badge.tsx | 1 - src/components/atoms/Button/Button.tsx | 6 +- src/components/atoms/Card/Card.tsx | 1 - src/components/atoms/Card/CardBody.tsx | 6 +- src/components/atoms/Card/CardFooter.tsx | 1 - src/components/atoms/Card/CardHeader.tsx | 1 - src/components/atoms/Chips/Chips.tsx | 1 - src/components/atoms/Collapse/Collapse.tsx | 1 - .../atoms/Collapse/CollapseBody.tsx | 4 +- .../atoms/Collapse/CollapseGroup.tsx | 4 +- .../atoms/Collapse/CollapseHeader.tsx | 1 - src/components/atoms/Extra/Extra.tsx | 11 +- src/components/atoms/Grid/interface.ts | 1 - src/components/atoms/Icon/Icon.tsx | 5 +- src/components/atoms/Label/Label.tsx | 1 - src/components/atoms/ListGroup/ListGroup.tsx | 4 +- .../atoms/ListGroup/ListGroupItem.tsx | 4 +- src/components/atoms/Radio/Radio.tsx | 1 - src/components/atoms/Space/Space.tsx | 1 - src/components/atoms/Switch/Switch.tsx | 1 - src/components/atoms/Tabs/Panel.tsx | 1 - src/components/atoms/Tabs/Tab.tsx | 1 - src/components/atoms/Tabs/Tabs.tsx | 7 +- src/components/index.ts | 61 +-- .../molecules/Checkbox/Checkbox.tsx | 1 - .../molecules/Checkbox/CheckboxGroup.tsx | 1 - .../molecules/Loader/Loader.stories.tsx | 23 +- src/components/molecules/Loader/Loader.tsx | 6 +- .../molecules/Loader/LoaderInline.tsx | 7 +- .../molecules/Loader/LoaderSpinner.tsx | 7 +- .../molecules/Notify/Notify.stories.tsx | 83 ++- src/components/molecules/Notify/Notify.tsx | 2 +- .../molecules/Select/Select.stories.tsx | 479 +++--------------- src/components/molecules/Select/Select.tsx | 20 +- .../molecules/Select/components/Component.tsx | 12 +- .../Select/components/Options/Item/Item.tsx | 5 +- .../Select/components/Options/Options.tsx | 19 +- .../Select/components/Options/index.ts | 2 +- .../Select/components/Pagination.tsx | 7 +- .../molecules/Select/components/index.ts | 4 +- .../molecules/Stepper/Stepper.stories.tsx | 205 +------- src/components/molecules/Stepper/Stepper.tsx | 6 +- .../molecules/Textarea/Textarea.stories.tsx | 113 +---- .../molecules/Textarea/Textarea.tsx | 6 +- src/components/molecules/index.ts | 2 +- .../organisms/Actions/Actions.stories.tsx | 18 +- src/components/organisms/Actions/Actions.tsx | 12 +- src/components/organisms/Form/FieldError.tsx | 4 +- src/components/organisms/Form/FieldExtra.tsx | 6 +- .../organisms/Form/Form.stories.tsx | 129 +++-- src/components/organisms/Form/Form.tsx | 15 +- src/components/organisms/Form/FormGroup.tsx | 6 +- src/components/organisms/Form/index.ts | 2 +- src/components/organisms/Form/interface.ts | 6 +- src/components/organisms/Layout/Layout.tsx | 2 +- .../organisms/Layout/Parts/Container.tsx | 3 +- .../organisms/Layout/Parts/Content.tsx | 11 +- .../organisms/Layout/Parts/Footer.tsx | 17 +- .../organisms/Layout/Topbar/Parts/Title.tsx | 8 +- .../organisms/Layout/Topbar/Parts/Toggler.tsx | 4 +- .../Layout/Topbar/Sides/LeftSide.tsx | 8 +- .../Layout/Topbar/Sides/RightSide.tsx | 8 +- .../organisms/Layout/Topbar/Topbar.tsx | 12 +- .../organisms/Modal/Modal.stories.tsx | 181 ++----- src/components/organisms/Modal/Modal.tsx | 13 +- .../organisms/Sidebar/Item/Item.tsx | 19 +- .../organisms/Sidebar/Options/Item/Item.tsx | 8 +- .../organisms/Sidebar/Options/Options.tsx | 8 +- .../Sidebar/Options/Sides/BottomSide.tsx | 8 +- .../Sidebar/Options/Sides/TopSide.tsx | 8 +- src/components/organisms/Sidebar/Sidebar.tsx | 3 +- .../organisms/SortBy/SortBy.stories.tsx | 22 +- src/components/organisms/SortBy/SortBy.tsx | 5 +- .../organisms/Table/Table.stories.tsx | 26 +- src/components/organisms/index.ts | 2 +- 79 files changed, 499 insertions(+), 1242 deletions(-) diff --git a/.storybook/storybook.scss b/.storybook/storybook.scss index 66a093d0..7aea5c1d 100644 --- a/.storybook/storybook.scss +++ b/.storybook/storybook.scss @@ -132,6 +132,16 @@ #story--react-ebs-ui-organisms-layout-sidebar--regular { min-height: 50vh; } + + #story--react-ebs-ui-molecules-loader--regular .ebs-loader { + height: 200px; + } + + .ebs-loader { + > .ebs-loader__spinner.fixed { + position: absolute; + } + } } .ebs-select__wrapper { @@ -140,7 +150,8 @@ } @media (max-width: 500px) { - .ebs-select__wrapper, .ebs-space__item { + .ebs-select__wrapper, + .ebs-space__item { width: 100%; } -} \ No newline at end of file +} diff --git a/src/components/atoms/Animated.tsx b/src/components/atoms/Animated.tsx index 06804969..cd83fb20 100644 --- a/src/components/atoms/Animated.tsx +++ b/src/components/atoms/Animated.tsx @@ -2,11 +2,11 @@ import * as React from 'react'; import cn from 'classnames'; import AnimateHeight from 'react-animate-height'; -interface Props { +export interface AnimatedProps + extends Omit, 'aria-hidden'>, 'onAnimationStart'>, 'onAnimationEnd'> { startFrom?: string | number; debounce?: number; duration?: number; - className?: string; loading?: boolean; disabled?: boolean; @@ -14,7 +14,13 @@ interface Props { children: any; } -export const Animated: React.FC = ({ startFrom = '0%', debounce = 1, duration = 500, className, ...props }) => { +export const Animated: React.FC = ({ + startFrom = '0%', + debounce = 1, + duration = 500, + className, + ...props +}) => { const [loading, setLoading] = React.useState(true); const timer = React.useRef(); @@ -41,7 +47,7 @@ export const Animated: React.FC = ({ startFrom = '0%', debounce = 1, dura } return ( - + {props.children} ); diff --git a/src/components/atoms/Avatar/Avatar.tsx b/src/components/atoms/Avatar/Avatar.tsx index 86628d28..26c6c22a 100644 --- a/src/components/atoms/Avatar/Avatar.tsx +++ b/src/components/atoms/Avatar/Avatar.tsx @@ -7,7 +7,6 @@ export type AvatarType = 'regular' | 'primary' | 'light' | 'dynamic'; export interface AvatarProps extends React.HTMLAttributes { type?: AvatarType; size?: 'small' | 'big'; - className?: string; circle?: boolean; shortAlt?: React.ReactNode; shortLetters?: number; diff --git a/src/components/atoms/Avatar/AvatarCard.tsx b/src/components/atoms/Avatar/AvatarCard.tsx index dc4d0670..bd4005d3 100644 --- a/src/components/atoms/Avatar/AvatarCard.tsx +++ b/src/components/atoms/Avatar/AvatarCard.tsx @@ -7,7 +7,6 @@ export type AvatarSize = 'small' | 'big'; export interface CardProps extends React.HTMLAttributes { type?: AvatarType; size?: AvatarSize; - className?: string; shortAlt?: React.ReactNode; alt?: string; icon?: React.ReactNode; diff --git a/src/components/atoms/Badge/Badge.tsx b/src/components/atoms/Badge/Badge.tsx index f437df5d..b9589e39 100644 --- a/src/components/atoms/Badge/Badge.tsx +++ b/src/components/atoms/Badge/Badge.tsx @@ -7,7 +7,6 @@ export interface BadgeProps extends React.HTMLAttributes { count?: number; text?: string; type?: BadgeType; - className?: string; } export const Badge: React.FC = ({ count, text, type = 'regular', className, children, ...props }) => { diff --git a/src/components/atoms/Button/Button.tsx b/src/components/atoms/Button/Button.tsx index ac170450..4a2d2224 100644 --- a/src/components/atoms/Button/Button.tsx +++ b/src/components/atoms/Button/Button.tsx @@ -69,6 +69,8 @@ export const Button: React.FC = ({ ); }; -export const ButtonGroup: React.FC<{ className?: string }> = ({ children, className }) => ( -
{children}
+export const ButtonGroup: React.FC> = ({ children, className, ...props }) => ( +
+ {children} +
); diff --git a/src/components/atoms/Card/Card.tsx b/src/components/atoms/Card/Card.tsx index cb3ab573..005f3eab 100644 --- a/src/components/atoms/Card/Card.tsx +++ b/src/components/atoms/Card/Card.tsx @@ -6,7 +6,6 @@ import { CardBody, CardBodyProps } from './CardBody'; import { CardFooter, CardFooterProps } from './CardFooter'; export interface CardProps extends React.HTMLAttributes { - className?: string; size?: SizeType; collapsible?: boolean; collapsed?: boolean; diff --git a/src/components/atoms/Card/CardBody.tsx b/src/components/atoms/Card/CardBody.tsx index 628f63da..fcaf14bd 100644 --- a/src/components/atoms/Card/CardBody.tsx +++ b/src/components/atoms/Card/CardBody.tsx @@ -3,11 +3,9 @@ import cn from 'classnames'; import AnimateHeight from 'react-animate-height'; import { CardContext } from './Card'; -export interface CardBodyProps extends React.HTMLAttributes { - className?: string; -} +export type CardBodyProps = React.HTMLAttributes; -export const CardBody: React.FC = ({ className, children, ...props }) => { +export const CardBody: React.FC> = ({ className, children, ...props }) => { const { height, collapsible } = React.useContext(CardContext); // Return animated card body for collapse diff --git a/src/components/atoms/Card/CardFooter.tsx b/src/components/atoms/Card/CardFooter.tsx index 17afed7e..c0aa1703 100644 --- a/src/components/atoms/Card/CardFooter.tsx +++ b/src/components/atoms/Card/CardFooter.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import cn from 'classnames'; export interface CardFooterProps extends React.HTMLAttributes { - className?: string; bordered?: boolean; } diff --git a/src/components/atoms/Card/CardHeader.tsx b/src/components/atoms/Card/CardHeader.tsx index ec23ecb6..ef494342 100644 --- a/src/components/atoms/Card/CardHeader.tsx +++ b/src/components/atoms/Card/CardHeader.tsx @@ -4,7 +4,6 @@ import { Icon } from 'components/atoms'; import { CardContext } from './Card'; export interface CardHeaderProps extends React.HTMLAttributes { - className?: string; bordered?: boolean; onClick?: () => void; } diff --git a/src/components/atoms/Chips/Chips.tsx b/src/components/atoms/Chips/Chips.tsx index 3ab46c0a..254bd256 100644 --- a/src/components/atoms/Chips/Chips.tsx +++ b/src/components/atoms/Chips/Chips.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import cn from 'classnames'; export interface ChipsProps extends Omit, 'prefix'>, 'onChange'> { - className?: string; prefix?: React.ReactNode; suffix?: React.ReactNode; text?: React.ReactNode; diff --git a/src/components/atoms/Collapse/Collapse.tsx b/src/components/atoms/Collapse/Collapse.tsx index 596d91c1..0d48f1d9 100644 --- a/src/components/atoms/Collapse/Collapse.tsx +++ b/src/components/atoms/Collapse/Collapse.tsx @@ -7,7 +7,6 @@ import { CollapseBody, CollapseBodyProps } from './CollapseBody'; export interface CollapseProps extends React.HTMLAttributes { collapsed?: boolean; - className?: string; size?: SizeType; bordered?: boolean; } diff --git a/src/components/atoms/Collapse/CollapseBody.tsx b/src/components/atoms/Collapse/CollapseBody.tsx index 8a0198b1..99c2483d 100644 --- a/src/components/atoms/Collapse/CollapseBody.tsx +++ b/src/components/atoms/Collapse/CollapseBody.tsx @@ -3,9 +3,7 @@ import cn from 'classnames'; import AnimateHeight from 'react-animate-height'; import { CollapseContext } from './Collapse'; -export interface CollapseBodyProps extends React.HTMLAttributes { - className?: string; -} +export type CollapseBodyProps = React.HTMLAttributes; export const CollapseBody: React.FC = ({ className, style, children, ...props }) => { const { height } = React.useContext(CollapseContext); diff --git a/src/components/atoms/Collapse/CollapseGroup.tsx b/src/components/atoms/Collapse/CollapseGroup.tsx index a4731ff8..5fb2bc81 100644 --- a/src/components/atoms/Collapse/CollapseGroup.tsx +++ b/src/components/atoms/Collapse/CollapseGroup.tsx @@ -1,9 +1,7 @@ import * as React from 'react'; import cn from 'classnames'; -export interface CollapseGroupProps extends React.HTMLAttributes { - className?: string; -} +export type CollapseGroupProps = React.HTMLAttributes; export const CollapseGroup: React.FC = ({ className, style, children, ...props }) => (
diff --git a/src/components/atoms/Collapse/CollapseHeader.tsx b/src/components/atoms/Collapse/CollapseHeader.tsx index e787f423..1b43be0a 100644 --- a/src/components/atoms/Collapse/CollapseHeader.tsx +++ b/src/components/atoms/Collapse/CollapseHeader.tsx @@ -4,7 +4,6 @@ import { Icon } from 'components/atoms'; import { CollapseContext } from './Collapse'; export interface CollapseHeaderProps extends React.HTMLAttributes { - className?: string; onClick?: () => void; } diff --git a/src/components/atoms/Extra/Extra.tsx b/src/components/atoms/Extra/Extra.tsx index cf8316c7..5ce1c0fc 100644 --- a/src/components/atoms/Extra/Extra.tsx +++ b/src/components/atoms/Extra/Extra.tsx @@ -3,17 +3,20 @@ import cn from 'classnames'; export type ExtraStatus = 'success' | 'warning' | 'danger' | 'info' | 'text'; -export interface Props { - className?: string; +export interface ExtraProps extends React.HTMLAttributes { disabled?: boolean; status?: ExtraStatus; text?: React.ReactNode; } -export const Extra: React.FC = ({ className, status = 'text', disabled, text }) => { +export const Extra: React.FC = ({ className, status = 'text', disabled, text, ...props }) => { if (!text) { return null; } - return
{text}
; + return ( +
+ {text} +
+ ); }; diff --git a/src/components/atoms/Grid/interface.ts b/src/components/atoms/Grid/interface.ts index 8106c1ea..7b6e8d47 100644 --- a/src/components/atoms/Grid/interface.ts +++ b/src/components/atoms/Grid/interface.ts @@ -8,7 +8,6 @@ export type Gutter = 0 | 1 | 2 | 3 | 4 | 5; export type ColSizeType = { [key: string]: ColType }; export interface Grid extends React.HTMLAttributes { - className?: string; offset?: Offset | ColSizeType; g?: Gutter | ColSizeType; gx?: Gutter | ColSizeType; diff --git a/src/components/atoms/Icon/Icon.tsx b/src/components/atoms/Icon/Icon.tsx index d15e7397..b108bf85 100644 --- a/src/components/atoms/Icon/Icon.tsx +++ b/src/components/atoms/Icon/Icon.tsx @@ -3,15 +3,14 @@ import { icons } from './iconsList'; import cn from 'classnames'; export type modelType = 'regular' | 'bold'; -export interface Props { +export interface IconProps extends React.HTMLAttributes { onClick?: () => void; type?: string; - className?: string; component?: any; model?: modelType; } -export const Icon: React.FC = ({ +export const Icon: React.FC = ({ onClick, type = 'none', model = 'regular', diff --git a/src/components/atoms/Label/Label.tsx b/src/components/atoms/Label/Label.tsx index 67913d91..7b744143 100644 --- a/src/components/atoms/Label/Label.tsx +++ b/src/components/atoms/Label/Label.tsx @@ -6,7 +6,6 @@ export type LabelType = 'regular' | 'fill' | 'ghost' | 'primary'; export type LabelStatus = 'success' | 'warning' | 'danger' | 'info'; export interface LabelProps extends Omit, 'prefix'> { - className?: string; type?: LabelType; circle?: boolean; status?: LabelStatus; diff --git a/src/components/atoms/ListGroup/ListGroup.tsx b/src/components/atoms/ListGroup/ListGroup.tsx index 3dbbfdf0..a36a91f4 100644 --- a/src/components/atoms/ListGroup/ListGroup.tsx +++ b/src/components/atoms/ListGroup/ListGroup.tsx @@ -6,9 +6,7 @@ export interface ListGroupComposition { Item: React.FC; } -export interface ListGroupProps extends React.HTMLAttributes { - className?: string; -} +export type ListGroupProps = React.HTMLAttributes; const ListGroup: React.FC & ListGroupComposition = ({ className, children, ...props }) => (
diff --git a/src/components/atoms/ListGroup/ListGroupItem.tsx b/src/components/atoms/ListGroup/ListGroupItem.tsx index 99b5aca1..f9624a2a 100644 --- a/src/components/atoms/ListGroup/ListGroupItem.tsx +++ b/src/components/atoms/ListGroup/ListGroupItem.tsx @@ -1,9 +1,7 @@ import * as React from 'react'; import cn from 'classnames'; -export interface ListGroupItemProps extends React.HTMLAttributes { - className?: string; -} +export type ListGroupItemProps = React.HTMLAttributes; export const ListGroupItem: React.FC = ({ className, children, ...props }) => (
diff --git a/src/components/atoms/Radio/Radio.tsx b/src/components/atoms/Radio/Radio.tsx index 1b0276fa..a7264640 100644 --- a/src/components/atoms/Radio/Radio.tsx +++ b/src/components/atoms/Radio/Radio.tsx @@ -14,7 +14,6 @@ export interface Option { export interface RadioProps extends Omit, 'value'>, 'onChange'> { name?: string; - className?: string; textClass?: string; radioAlign?: RadioAlign; value?: RadioValue; diff --git a/src/components/atoms/Space/Space.tsx b/src/components/atoms/Space/Space.tsx index 630c441e..88b3ca97 100644 --- a/src/components/atoms/Space/Space.tsx +++ b/src/components/atoms/Space/Space.tsx @@ -7,7 +7,6 @@ export type SpaceSize = SizeType | number; export type SpaceDirection = 'horizontal' | 'vertical'; export interface SpaceProps extends React.HTMLAttributes { - className?: string; size?: SpaceSize | [SpaceSize, SpaceSize]; direction?: SpaceDirection; align?: 'start' | 'end' | 'center' | 'baseline'; diff --git a/src/components/atoms/Switch/Switch.tsx b/src/components/atoms/Switch/Switch.tsx index 4db4d99e..d518d3bf 100644 --- a/src/components/atoms/Switch/Switch.tsx +++ b/src/components/atoms/Switch/Switch.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import cn from 'classnames'; export interface SwitchProps extends Omit, 'onChange'> { - className?: string; disabled?: boolean; checked?: boolean; onChange?: (value: boolean) => void; diff --git a/src/components/atoms/Tabs/Panel.tsx b/src/components/atoms/Tabs/Panel.tsx index 8e80c125..b13158e7 100644 --- a/src/components/atoms/Tabs/Panel.tsx +++ b/src/components/atoms/Tabs/Panel.tsx @@ -4,7 +4,6 @@ import { useTabs } from './Tabs'; export interface PanelProps extends React.HTMLAttributes { tabKey: string; - className?: string; } /** diff --git a/src/components/atoms/Tabs/Tab.tsx b/src/components/atoms/Tabs/Tab.tsx index 835567f0..873de47f 100644 --- a/src/components/atoms/Tabs/Tab.tsx +++ b/src/components/atoms/Tabs/Tab.tsx @@ -6,7 +6,6 @@ export interface TabProps extends Omit, 'on tabKey: string; label: React.ReactNode; disabled?: boolean; - className?: string; onClick?: (tabKey: string) => void; } diff --git a/src/components/atoms/Tabs/Tabs.tsx b/src/components/atoms/Tabs/Tabs.tsx index 03e6fe87..d86ae8f3 100644 --- a/src/components/atoms/Tabs/Tabs.tsx +++ b/src/components/atoms/Tabs/Tabs.tsx @@ -8,8 +8,7 @@ export interface TabsComposition { Panel: React.FC; } -export interface TabsProps { - className?: string; +export interface TabsProps extends React.HTMLAttributes { activeTab?: string; setActiveTab?: (key: string) => void; } @@ -21,7 +20,7 @@ export interface TabsContext { const TabsContext = React.createContext(undefined); -const Tabs: React.FC & TabsComposition = ({ activeTab, setActiveTab, className, children }) => { +const Tabs: React.FC & TabsComposition = ({ activeTab, setActiveTab, className, children, ...props }) => { const memoizedContextValue = React.useMemo( () => ({ activeTab, @@ -31,7 +30,7 @@ const Tabs: React.FC & TabsComposition = ({ activeTab, setActiveTab, ); return ( - +
{children && React.Children.map(children, (child) => { diff --git a/src/components/index.ts b/src/components/index.ts index bb722a8e..9c01c785 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,66 +1,11 @@ // Atoms -export { - Alert, - Avatar, - AvatarCard, - AvatarInline, - Animated, - Badge, - Button, - ButtonGroup, - Label, - ListGroup, - Extra, - Input, - Icon, - Switch, - Chips, - Radio, - Card, - Container, - Mask, - Row, - Col, - Collapse, - Tooltip, - Tabs, - Space, -} from './atoms'; +export * from './atoms'; // Molecules -export { - Loader, - Stepper, - DatePicker, - InputPhone, - InputSearch, - Checkbox, - CheckboxGroup, - Textarea, - Upload, - NotifyContainer, - NotifyContext, - NotifyProvider, - Select, -} from './molecules'; +export * from './molecules'; // Organisms -export { - Actions, - Form, - Field, - List, - useForm, - FormProvider, - Layout, - Modal, - Sidebar, - SortBy, - Table, - Column, - ColumnGroup, - Summary, -} from './organisms'; +export * from './organisms'; // Export types export type { DatePickerProps, RangePickerProps, DatePickerComposition } from './molecules/DatePicker/types'; diff --git a/src/components/molecules/Checkbox/Checkbox.tsx b/src/components/molecules/Checkbox/Checkbox.tsx index c9741de5..53ab438c 100644 --- a/src/components/molecules/Checkbox/Checkbox.tsx +++ b/src/components/molecules/Checkbox/Checkbox.tsx @@ -13,7 +13,6 @@ export interface Option { } export interface CheckboxProps extends Omit, 'onChange'> { - className?: string; checkAlign?: CheckAlign; name?: string; value?: CheckboxValue; diff --git a/src/components/molecules/Checkbox/CheckboxGroup.tsx b/src/components/molecules/Checkbox/CheckboxGroup.tsx index b6d8e477..27de434f 100644 --- a/src/components/molecules/Checkbox/CheckboxGroup.tsx +++ b/src/components/molecules/Checkbox/CheckboxGroup.tsx @@ -12,7 +12,6 @@ export interface Option { } export interface Props extends Omit, 'onChange'> { - className?: string; checkboxClass?: string; checkAlign?: CheckAlign; options?: Option[]; diff --git a/src/components/molecules/Loader/Loader.stories.tsx b/src/components/molecules/Loader/Loader.stories.tsx index 08e0aed8..3571b594 100644 --- a/src/components/molecules/Loader/Loader.stories.tsx +++ b/src/components/molecules/Loader/Loader.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import { SizeSwitcher, Template } from 'components/storybook'; +import { Template } from 'components/storybook'; -import { Loader, LoaderProps, SpinnerSize } from './Loader'; +import { Loader, LoaderProps } from './Loader'; import { exportStory } from '../../../libs'; const { Inline, Spinner } = Loader; @@ -32,9 +32,18 @@ Regular.args = { height: '100%', }; -export const _Inline = (): React.ReactElement => ; -export const _Spinner = (): React.ReactElement => ( - - {(size) => } - +export const _Inline: React.FC & { args: LoaderProps } = ({ children, ...props }) => ( + +); + +_Inline.args = Regular.args; + +export const _Spinner: React.FC & { args: LoaderProps } = ({ children, ...props }) => ( + ); + +_Spinner.args = Regular.args; diff --git a/src/components/molecules/Loader/Loader.tsx b/src/components/molecules/Loader/Loader.tsx index 18f93559..8969e71c 100644 --- a/src/components/molecules/Loader/Loader.tsx +++ b/src/components/molecules/Loader/Loader.tsx @@ -9,13 +9,12 @@ export interface LoaderComposition { Spinner: React.FC; } -export interface LoaderProps { +export interface LoaderProps extends React.HTMLAttributes { fade?: boolean; size?: SpinnerSize; loading: boolean; fixed?: boolean; height?: number | string; - children?: React.ReactNode; } const Loader: React.FC & LoaderComposition = ({ @@ -25,9 +24,10 @@ const Loader: React.FC & LoaderComposition = ({ loading, height = 350, children, + ...props }) => { return ( -
+
{fade ? ( diff --git a/src/components/molecules/Loader/LoaderInline.tsx b/src/components/molecules/Loader/LoaderInline.tsx index 59f85aa2..3bb2b399 100644 --- a/src/components/molecules/Loader/LoaderInline.tsx +++ b/src/components/molecules/Loader/LoaderInline.tsx @@ -1,9 +1,12 @@ import * as React from 'react'; import { LoaderSpinner } from './LoaderSpinner'; -export const LoaderInline: React.FC = ({ children = 'Loading ...' }) => { +export const LoaderInline: React.FC> = ({ + children = 'Loading ...', + ...props +}) => { return ( - + {children} diff --git a/src/components/molecules/Loader/LoaderSpinner.tsx b/src/components/molecules/Loader/LoaderSpinner.tsx index 94101c01..a04d3016 100644 --- a/src/components/molecules/Loader/LoaderSpinner.tsx +++ b/src/components/molecules/Loader/LoaderSpinner.tsx @@ -2,12 +2,11 @@ import * as React from 'react'; import cn from 'classnames'; import { SpinnerSize } from './Loader'; -export interface LoaderSpinnerProps { +export interface LoaderSpinnerProps extends React.HTMLAttributes { size?: SpinnerSize; - className?: string; fixed?: boolean; } -export const LoaderSpinner: React.FC = ({ fixed, size = 'regular', className }) => ( -
+export const LoaderSpinner: React.FC = ({ fixed, size = 'regular', className, ...props }) => ( +
); diff --git a/src/components/molecules/Notify/Notify.stories.tsx b/src/components/molecules/Notify/Notify.stories.tsx index 16a8efa0..75900415 100644 --- a/src/components/molecules/Notify/Notify.stories.tsx +++ b/src/components/molecules/Notify/Notify.stories.tsx @@ -1,70 +1,57 @@ import * as React from 'react'; -import { Space, Button, Label } from 'components/atoms'; -import { SizeSwitcher } from 'components/storybook'; -import { SpaceSize } from 'components/atoms/Space/Space'; +import { Button, Label } from 'components/atoms'; +import { Template } from 'components/storybook'; import { useNotify } from 'hooks'; import { NotifyContainer, NotifyProvider } from './Notify'; -import { NotifyItem } from './NotifyItem'; +import { NotifyItem, NotifyItemProps } from './NotifyItem'; import { exportStory } from '../../../libs'; export default { title: exportStory('Notify', 'molecules'), - component: NotifyContainer, + component: NotifyItem, subcomponents: { NotifyItem }, }; -const description = 'This is an example component'; - -export const Regular = (): React.ReactNode => { - const Notify: React.FC = () => { +export const Regular: React.FC & { args: NotifyItemProps } = ({ children, ...props }) => { + const Notify: React.FC = ({ ...params }) => { const notify = useNotify(); return ( - <> - {(size) => } - - - - - - - - - + ); }; return ( - + + ); }; + +Regular.args = { + title: 'Example', + description: 'This is an example component', + size: 'medium', + direction: 'vertical', +}; diff --git a/src/components/molecules/Notify/Notify.tsx b/src/components/molecules/Notify/Notify.tsx index b11653af..6ef0c54d 100644 --- a/src/components/molecules/Notify/Notify.tsx +++ b/src/components/molecules/Notify/Notify.tsx @@ -31,7 +31,7 @@ const NotifyContainer: React.FC = ({ vertical = 'top', horizontal = 'right', size = 'medium', - timeout = 30000, + timeout = 3000, }) => { const createPortal = usePortal('notify-portal'); const { list, remove } = React.useContext(NotifyContext); diff --git a/src/components/molecules/Select/Select.stories.tsx b/src/components/molecules/Select/Select.stories.tsx index 69c7dc6e..0eb44096 100644 --- a/src/components/molecules/Select/Select.stories.tsx +++ b/src/components/molecules/Select/Select.stories.tsx @@ -1,115 +1,27 @@ import * as React from 'react'; -import { AvatarInline, Space, Icon } from 'components/atoms'; -import { Form, useForm } from 'components/organisms'; -import { SizeSwitcher } from 'components/storybook'; +import { AvatarInline, Icon } from 'components/atoms'; +import { Template } from 'components/storybook'; import { capitalize, makeid } from 'libs/string'; -import { SizeType } from 'types'; -import { Select } from './Select'; -import { ComponentProps } from './components/Component'; +import { SelectComponent as Select } from './Select'; +import { Select as _Select, SelectProps, Options } from './components'; import { Option } from './interfaces'; import { exportStory } from '../../../libs'; +const { Pagination, Search } = Select; + export default { title: exportStory('Select', 'molecules'), - component: Select, + component: _Select, + subcomponents: { Options, Pagination, Search }, + argTypes: { + label: { control: 'text' }, + }, }; const limit = 20; -export const Regular = (): React.ReactNode => { - const [form] = useForm(); - const [search, setSearch] = React.useState(''); - const [list, setList] = React.useState([]); - const [page, setPage] = React.useState(1); - const [total, setTotal] = React.useState(0); - const [loading, setLoaded] = React.useState(true); - - React.useEffect(() => { - setLoaded(true); - - fetch(`https://randomuser.me/api/1.2/?page=${page}&results=${limit}&seed=abc&inc=id,name,picture`) - .then((response) => response.json()) - .then(({ results }) => { - const newList: Option[] = []; - results.forEach((item) => { - newList.push({ - value: makeid(), - text: ( - - ), - }); - }); - - setTotal(1000); - setList(newList); - setLoaded(false); - }); - }, [page]); - - const handleChange = (values): void => { - console.log('values :>> ', values); - }; - - return ( - - {(size) => ( - -
- - - -
- - )} - - ); -}; - -export const OptionsBox = (): React.ReactNode => { - const [form] = useForm(); +export const Regular: React.FC & { args: SelectProps } = ({ children, ...props }) => { const [search, setSearch] = React.useState(''); const [list, setList] = React.useState([]); const [page, setPage] = React.useState(1); @@ -142,141 +54,41 @@ export const OptionsBox = (): React.ReactNode => { }); }, [page]); - const handleChange = (values): void => { - console.log('values :>> ', values); - }; - return ( - - {(size) => ( - -
- - - -
- - )} - + ); }; -export const OptionsMultiple = (): React.ReactNode => { - const [form] = useForm(); - const [search, setSearch] = React.useState(''); - const [loading, setLoaded] = React.useState(true); - const [list, setList] = React.useState([]); - const [page, setPage] = React.useState(1); - const [total, setTotal] = React.useState(0); - - React.useEffect(() => { - setLoaded(true); - - fetch(`https://randomuser.me/api/1.2/?page=${page}&results=${limit}&seed=abc&inc=id,name,picture`) - .then((response) => response.json()) - .then(({ results }) => { - const newList: Option[] = []; - results.forEach((item) => { - newList.push({ - value: makeid(), - text: ( - - ), - }); - }); - - setTotal(1000); - setList(newList); - setLoaded(false); - }); - }, [page]); - - const handleChange = (values): void => { - console.log('values :>> ', values); - }; - - return ( - - {(size) => ( - -
- - - -
- - )} - - ); +Regular.args = { + mode: 'single', + optionsMode: 'dropdown', + valueMode: 'regular', + size: 'medium', + placeholder: 'Select', + newPlaceholder: 'Add new...', + emptyLabel: 'No found', + loading: false, + disabled: false, + isClearable: true, + prefix: , + suffix: undefined, }; -export const InfiniteScrollPagination = (): React.ReactNode => { - const [form] = useForm(); +export const InfiniteScrollPagination: React.FC & { args: SelectProps } = ({ children, ...props }) => { const [search, setSearch] = React.useState(''); const [list, setList] = React.useState([]); const [page, setPage] = React.useState(1); @@ -309,200 +121,23 @@ export const InfiniteScrollPagination = (): React.ReactNode => { }); }, [page]); - const handleChange = (values): void => { - console.log('values :>> ', values); - }; - - return ( - - {(size) => ( - -
- - - -
- - )} - - ); -}; - -export const TagsMode = (): React.ReactNode => { - const [form] = useForm(); - const [, setSearch] = React.useState(''); - const [list, setList] = React.useState([]); - const [page, setPage] = React.useState(1); - const [total, setTotal] = React.useState(0); - const [loading, setLoaded] = React.useState(true); - - React.useEffect(() => { - setLoaded(true); - - fetch(`https://randomuser.me/api/1.2/?page=${page}&results=${limit}&seed=abc&inc=id,name,picture`) - .then((response) => response.json()) - .then(({ results }) => { - const newList: Option[] = []; - results.forEach((item) => { - newList.push({ - value: makeid(), - text: `${capitalize(item.name.first)} ${capitalize(item.name.last)}`, - }); - }); - - setTotal(1000); - setList(newList); - setLoaded(false); - }); - }, [page]); - - const handleChange = (values): void => { - console.log('values :>> ', values); - }; - return ( - - {(size) => ( - -
- - - -
- - )} - + ); }; -export const InlineValueMode: React.FC & { args: ComponentProps } = ({ children, ...props }) => { - const [form] = useForm(); - const [, setSearch] = React.useState(''); - const [list, setList] = React.useState([]); - const [page, setPage] = React.useState(1); - const [total, setTotal] = React.useState(0); - const [loading, setLoaded] = React.useState(true); - - React.useEffect(() => { - setLoaded(true); - - fetch(`https://randomuser.me/api/1.2/?page=${page}&results=${limit}&seed=abc&inc=id,name,picture`) - .then((response) => response.json()) - .then(({ results }) => { - const newList: Option[] = []; - results.forEach((item) => { - newList.push({ - value: makeid(), - text: `${capitalize(item.name.first)} ${capitalize(item.name.last)}`, - }); - }); - - setTotal(1000); - setList(newList); - setLoaded(false); - }); - }, [page]); - - const handleChange = (values): void => { - console.log('values :>> ', values); - }; - - return ( - - {(size) => ( - -
- - - -
- - )} - - ); -}; - -InlineValueMode.args = { - loading: false, - mode: 'tags', - valueMode: 'inline', - size: 'medium', - newPlaceholder: 'Add new...', - emptyLabel: 'No found', - isClearable: true, - disabled: false, -}; +InfiniteScrollPagination.args = Regular.args; diff --git a/src/components/molecules/Select/Select.tsx b/src/components/molecules/Select/Select.tsx index e269d86e..981cbeb5 100644 --- a/src/components/molecules/Select/Select.tsx +++ b/src/components/molecules/Select/Select.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; import { - Component, - ComponentProps, + Select, + SelectProps, Search, SearchProps, - Options, + OptionsComponent, OptionsProps, OptionsComposition, Pagination, @@ -19,18 +19,18 @@ export interface Composition { Pagination: React.FC; } -const Select: React.FC & Composition = (props) => { +const SelectComponent: React.FC & Composition = (props) => { return ( - +