From 8f14cb443a8de1c9a7239d070f0dc02e35ba3534 Mon Sep 17 00:00:00 2001 From: ericlin11354 Date: Fri, 21 Jan 2022 19:34:26 -0500 Subject: [PATCH 01/74] Created 'SpecialText'; a component to replace 'HighlightedText'. --- .../SpecialText/SpecialText.stories.tsx | 28 +++++++++ src/Containers/SpecialText/SpecialText.tsx | 61 +++++++++++++++++++ 2 files changed, 89 insertions(+) create mode 100644 src/Containers/SpecialText/SpecialText.stories.tsx create mode 100644 src/Containers/SpecialText/SpecialText.tsx diff --git a/src/Containers/SpecialText/SpecialText.stories.tsx b/src/Containers/SpecialText/SpecialText.stories.tsx new file mode 100644 index 00000000..fdc8aabf --- /dev/null +++ b/src/Containers/SpecialText/SpecialText.stories.tsx @@ -0,0 +1,28 @@ +import { action } from '@storybook/addon-actions'; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import { SpecialText, SpecialTextProps } from '../index'; +import { SmallText } from 'index'; +import styled from 'styled-components'; + +const StyledSmallText = styled(SmallText)` + &: hover { + font-weight: bold; + } +`; + +export default { + title: 'Components/SpecialText', + component: SpecialText, + args: { + text: 'Special Text', + children: [ + , + + ], + }, +} as Meta; + +export const Basic: Story = (args) => ( + Here we introduce +); \ No newline at end of file diff --git a/src/Containers/SpecialText/SpecialText.tsx b/src/Containers/SpecialText/SpecialText.tsx new file mode 100644 index 00000000..7fa2ca99 --- /dev/null +++ b/src/Containers/SpecialText/SpecialText.tsx @@ -0,0 +1,61 @@ +import Dropdown from '../Dropdown/Dropdown'; +import DropdownItem from '../Dropdown/DropdownItem'; +import React, { Children, isValidElement } from 'react'; +import { SmallText } from 'index'; +import styled from 'styled-components'; + +export interface SpecialTextProps { + text: string; + children: React.ReactNode[]; + onChange?: Function; +} + +const formatList = ( + children: React.ReactNode[] + ): React.ReactNode[] => + children.map((child): React.ReactElement | null => { + if (child && isValidElement(child)) { + const val = child.props.value; + return ( + + ); + } + else return null; + }); + +export const SpecialText: React.FC = ({ + text, + children, + onChange = (): void => undefined, + ...props +}): React.ReactElement => { + const options = Children.toArray(children) + + return ( + + {text} + }> + {formatList(options)} + + + ); +}; + +const StyledDiv = styled.div``; + +const StyledDropDownText = styled(SmallText)` + &:hover { + font-weight: bold; + } + + ${({ theme }): string => ` + color: ${theme.colors.statusColors.orange}; + `} +`; + +export default SpecialText; From 7a443f8121bf7559f68ac5c748740f4c69fb0cb4 Mon Sep 17 00:00:00 2001 From: ericlin11354 Date: Fri, 21 Jan 2022 19:35:38 -0500 Subject: [PATCH 02/74] Added SpecialText to index.ts --- src/Containers/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Containers/index.ts b/src/Containers/index.ts index b4c4709d..6a2367d4 100644 --- a/src/Containers/index.ts +++ b/src/Containers/index.ts @@ -98,3 +98,4 @@ export * from './InfoHeader/InfoHeader'; export * from './StoreSelector/StoreSelector'; export * from './ScreenFlashEffect/ScreenFlashEffect'; export * from './PanelCard/PanelCard'; +export * from './SpecialText/SpecialText'; \ No newline at end of file From c59b8d3902973187166ed71ac56e962258e79b6b Mon Sep 17 00:00:00 2001 From: ericlin11354 Date: Fri, 21 Jan 2022 20:00:54 -0500 Subject: [PATCH 03/74] Removed onChange function --- src/Containers/SpecialText/SpecialText.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/Containers/SpecialText/SpecialText.tsx b/src/Containers/SpecialText/SpecialText.tsx index 7fa2ca99..0493afff 100644 --- a/src/Containers/SpecialText/SpecialText.tsx +++ b/src/Containers/SpecialText/SpecialText.tsx @@ -1,13 +1,12 @@ import Dropdown from '../Dropdown/Dropdown'; import DropdownItem from '../Dropdown/DropdownItem'; -import React, { Children, isValidElement } from 'react'; +import React, { Children, isValidElement, useCallback, useState } from 'react'; import { SmallText } from 'index'; import styled from 'styled-components'; export interface SpecialTextProps { text: string; children: React.ReactNode[]; - onChange?: Function; } const formatList = ( @@ -30,7 +29,6 @@ const formatList = ( export const SpecialText: React.FC = ({ text, children, - onChange = (): void => undefined, ...props }): React.ReactElement => { const options = Children.toArray(children) From e7901753234a5d8ef309628b20c281f100c34ded Mon Sep 17 00:00:00 2001 From: ericlin11354 Date: Sat, 22 Jan 2022 01:27:56 -0500 Subject: [PATCH 04/74] Added JSDocs. Exposed Dropdown Props. Renamed 'options' to 'dropDownOptions' --- src/Containers/SpecialText/SpecialText.tsx | 41 ++++++++++++---------- 1 file changed, 23 insertions(+), 18 deletions(-) diff --git a/src/Containers/SpecialText/SpecialText.tsx b/src/Containers/SpecialText/SpecialText.tsx index 0493afff..76d0a187 100644 --- a/src/Containers/SpecialText/SpecialText.tsx +++ b/src/Containers/SpecialText/SpecialText.tsx @@ -1,44 +1,49 @@ -import Dropdown from '../Dropdown/Dropdown'; +import Dropdown, { IDropdownProps } from '../Dropdown/Dropdown'; import DropdownItem from '../Dropdown/DropdownItem'; import React, { Children, isValidElement, useCallback, useState } from 'react'; import { SmallText } from 'index'; import styled from 'styled-components'; +/** + * Properties for SpecialText + * @param {string} text - Highlighted text + * @param {React.ReactNode[]} children - List of elements in DropDown + * @param {IDropdownProps} dropDownProps + */ export interface SpecialTextProps { text: string; children: React.ReactNode[]; + dropDownProps: IDropdownProps[]; } -const formatList = ( - children: React.ReactNode[] - ): React.ReactNode[] => +/** + * Maps SpecialText children to DropdownItems in DropDown + * @param {React.ReactNode[0]} children - Elements in the DropDown + * @returns {React.ReactNode[]} - Array of valid DropdownItems + */ +const formatList = (children: React.ReactNode[]): React.ReactNode[] => children.map((child): React.ReactElement | null => { if (child && isValidElement(child)) { const val = child.props.value; - return ( - - ); - } - else return null; + return ; + } else return null; }); export const SpecialText: React.FC = ({ text, children, + dropDownProps, ...props }): React.ReactElement => { - const options = Children.toArray(children) + const dropDownOptions = Children.toArray(children); return ( - {text} - }> - {formatList(options)} + {text}} + {...dropDownProps} + > + {formatList(dropDownOptions)} ); From e6492020f16e0572750ecae152eb0ce6fbe023c8 Mon Sep 17 00:00:00 2001 From: ericlin11354 Date: Sat, 22 Jan 2022 01:33:45 -0500 Subject: [PATCH 05/74] Made dropDownProps optional --- src/Containers/SpecialText/SpecialText.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Containers/SpecialText/SpecialText.tsx b/src/Containers/SpecialText/SpecialText.tsx index 76d0a187..c36ca41b 100644 --- a/src/Containers/SpecialText/SpecialText.tsx +++ b/src/Containers/SpecialText/SpecialText.tsx @@ -13,7 +13,7 @@ import styled from 'styled-components'; export interface SpecialTextProps { text: string; children: React.ReactNode[]; - dropDownProps: IDropdownProps[]; + dropDownProps?: IDropdownProps[]; } /** From e1e3707586067bd6f2d69a9755802789e149d0b2 Mon Sep 17 00:00:00 2001 From: ericlin11354 Date: Sat, 22 Jan 2022 11:47:17 -0500 Subject: [PATCH 06/74] Renamed 'child' to dropDownItems. Removed unecessary variable 'val'. Moved formatList into SpecialText. --- src/Containers/SpecialText/SpecialText.tsx | 28 ++++++++++------------ 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/src/Containers/SpecialText/SpecialText.tsx b/src/Containers/SpecialText/SpecialText.tsx index c36ca41b..0b856b11 100644 --- a/src/Containers/SpecialText/SpecialText.tsx +++ b/src/Containers/SpecialText/SpecialText.tsx @@ -1,6 +1,6 @@ import Dropdown, { IDropdownProps } from '../Dropdown/Dropdown'; import DropdownItem from '../Dropdown/DropdownItem'; -import React, { Children, isValidElement, useCallback, useState } from 'react'; +import React, { isValidElement } from 'react'; import { SmallText } from 'index'; import styled from 'styled-components'; @@ -16,26 +16,22 @@ export interface SpecialTextProps { dropDownProps?: IDropdownProps[]; } -/** - * Maps SpecialText children to DropdownItems in DropDown - * @param {React.ReactNode[0]} children - Elements in the DropDown - * @returns {React.ReactNode[]} - Array of valid DropdownItems - */ -const formatList = (children: React.ReactNode[]): React.ReactNode[] => - children.map((child): React.ReactElement | null => { - if (child && isValidElement(child)) { - const val = child.props.value; - return ; - } else return null; - }); - export const SpecialText: React.FC = ({ text, children, dropDownProps, ...props }): React.ReactElement => { - const dropDownOptions = Children.toArray(children); + /** + * Maps SpecialText children to DropdownItems in DropDown + * @returns {React.ReactNode[]} - Array of valid DropdownItems + */ + const formatList = (): React.ReactNode[] => + children.map((dropDownItems): React.ReactElement | null => { + if (dropDownItems && isValidElement(dropDownItems)) { + return ; + } else return null; + }); return ( @@ -43,7 +39,7 @@ export const SpecialText: React.FC = ({ dropdownButton={{text}} {...dropDownProps} > - {formatList(dropDownOptions)} + {formatList()} ); From 00bb45cf1615df1ff51207ec7f0190fec6c82840 Mon Sep 17 00:00:00 2001 From: ericlin11354 Date: Thu, 27 Jan 2022 17:09:17 -0500 Subject: [PATCH 07/74] Fixed SpecialText to be an Atom component. SpecialTextProps extends TextLayoutProps. SpecialText takes onClick event. --- .../SpecialText/SpecialText.stories.tsx | 18 ++----- src/Containers/SpecialText/SpecialText.tsx | 53 +++++-------------- 2 files changed, 16 insertions(+), 55 deletions(-) diff --git a/src/Containers/SpecialText/SpecialText.stories.tsx b/src/Containers/SpecialText/SpecialText.stories.tsx index fdc8aabf..1392852a 100644 --- a/src/Containers/SpecialText/SpecialText.stories.tsx +++ b/src/Containers/SpecialText/SpecialText.stories.tsx @@ -1,28 +1,16 @@ -import { action } from '@storybook/addon-actions'; import React from 'react'; import { Meta, Story } from '@storybook/react'; import { SpecialText, SpecialTextProps } from '../index'; -import { SmallText } from 'index'; -import styled from 'styled-components'; - -const StyledSmallText = styled(SmallText)` - &: hover { - font-weight: bold; - } -`; export default { title: 'Components/SpecialText', component: SpecialText, + argTypes: { onClick: { action: 'SpecialText Click Occurred' } }, args: { - text: 'Special Text', - children: [ - , - - ], + children: 'Special Text', }, } as Meta; export const Basic: Story = (args) => ( - Here we introduce + This is ); \ No newline at end of file diff --git a/src/Containers/SpecialText/SpecialText.tsx b/src/Containers/SpecialText/SpecialText.tsx index 0b856b11..426fae9c 100644 --- a/src/Containers/SpecialText/SpecialText.tsx +++ b/src/Containers/SpecialText/SpecialText.tsx @@ -1,60 +1,33 @@ import Dropdown, { IDropdownProps } from '../Dropdown/Dropdown'; import DropdownItem from '../Dropdown/DropdownItem'; import React, { isValidElement } from 'react'; -import { SmallText } from 'index'; +import { SmallText, TextLayoutProps } from 'index'; import styled from 'styled-components'; -/** - * Properties for SpecialText - * @param {string} text - Highlighted text - * @param {React.ReactNode[]} children - List of elements in DropDown - * @param {IDropdownProps} dropDownProps - */ -export interface SpecialTextProps { - text: string; - children: React.ReactNode[]; - dropDownProps?: IDropdownProps[]; +export interface SpecialTextProps extends TextLayoutProps{ + children: string; + onClick?: React.MouseEventHandler; } export const SpecialText: React.FC = ({ - text, children, - dropDownProps, + type = 'span', + size = 'small', + color = 'orange', ...props }): React.ReactElement => { - /** - * Maps SpecialText children to DropdownItems in DropDown - * @returns {React.ReactNode[]} - Array of valid DropdownItems - */ - const formatList = (): React.ReactNode[] => - children.map((dropDownItems): React.ReactElement | null => { - if (dropDownItems && isValidElement(dropDownItems)) { - return ; - } else return null; - }); - return ( - - {text}} - {...dropDownProps} - > - {formatList()} - - + + {children} + ); }; -const StyledDiv = styled.div``; - -const StyledDropDownText = styled(SmallText)` - &:hover { +const StyledSmallText = styled(SmallText)` + &: hover { font-weight: bold; + cursor: pointer; } - - ${({ theme }): string => ` - color: ${theme.colors.statusColors.orange}; - `} `; export default SpecialText; From cdc4a063d213e3448e5d2d35c34b26ecf44cc2b5 Mon Sep 17 00:00:00 2001 From: roggc Date: Mon, 17 Jan 2022 19:00:23 +0100 Subject: [PATCH 08/74] added DropArea to index.ts --- src/Containers/DropArea/DropArea.stories.tsx | 12 +++++ src/Containers/DropArea/DropArea.tsx | 48 ++++++++++++++++++++ src/Containers/index.ts | 3 +- 3 files changed, 62 insertions(+), 1 deletion(-) create mode 100644 src/Containers/DropArea/DropArea.stories.tsx create mode 100644 src/Containers/DropArea/DropArea.tsx diff --git a/src/Containers/DropArea/DropArea.stories.tsx b/src/Containers/DropArea/DropArea.stories.tsx new file mode 100644 index 00000000..9ce455a8 --- /dev/null +++ b/src/Containers/DropArea/DropArea.stories.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import { DropArea, IDropAreaProps } from './DropArea'; + +export default { + title: 'Components/DropArea', + component: DropArea, + args: {}, + argTypes: { onClick: { action: 'clickeddd!!!' } }, +} as Meta; + +export const Basic: Story = (args) => ; diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx new file mode 100644 index 00000000..47ccfddb --- /dev/null +++ b/src/Containers/DropArea/DropArea.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import styled from 'styled-components'; +import { MainInterface, Main } from '@Utils/BaseStyles'; + +export interface IDropAreaProps + extends MainInterface, + React.HTMLAttributes { + message?: string; + isDragEnter?: boolean; + onClick?: () => void; +} + +export const DropArea: React.FC = ({ + message = 'Drag and drop your files or click here to select', + isDragEnter = false, + padding = '10px', + onClick = () => null, + ...props +}): React.ReactElement => ( + + {message} + +); + +const DropAreaBox = styled.div< + Pick +>` + width: fit-content; + cursor: pointer; + ${({ theme, isDragEnter, ...props }): string => ` +border-radius:${theme.dimensions.radius}; +${ + isDragEnter + ? ` +` + : ` +border:2px dashed grey; +` +} + +${Main({ ...props })} +`} +`; diff --git a/src/Containers/index.ts b/src/Containers/index.ts index 6a2367d4..c263e999 100644 --- a/src/Containers/index.ts +++ b/src/Containers/index.ts @@ -98,4 +98,5 @@ export * from './InfoHeader/InfoHeader'; export * from './StoreSelector/StoreSelector'; export * from './ScreenFlashEffect/ScreenFlashEffect'; export * from './PanelCard/PanelCard'; -export * from './SpecialText/SpecialText'; \ No newline at end of file +export * from './SpecialText/SpecialText'; +export * from './DropArea/DropArea'; \ No newline at end of file From 18a543bb2176a8a69bb0727315dd911bfed6ef76 Mon Sep 17 00:00:00 2001 From: roggc Date: Mon, 17 Jan 2022 19:06:02 +0100 Subject: [PATCH 09/74] add story isDragEnter --- src/Containers/DropArea/DropArea.stories.tsx | 6 ++++++ src/Containers/DropArea/DropArea.tsx | 14 ++++++++++++++ 2 files changed, 20 insertions(+) diff --git a/src/Containers/DropArea/DropArea.stories.tsx b/src/Containers/DropArea/DropArea.stories.tsx index 9ce455a8..e0c92b0e 100644 --- a/src/Containers/DropArea/DropArea.stories.tsx +++ b/src/Containers/DropArea/DropArea.stories.tsx @@ -10,3 +10,9 @@ export default { } as Meta; export const Basic: Story = (args) => ; + +export const IsDragEnter = Basic.bind({}); +IsDragEnter.args = { + ...Basic.args, + isDragEnter: true, +}; diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx index 47ccfddb..ed850047 100644 --- a/src/Containers/DropArea/DropArea.tsx +++ b/src/Containers/DropArea/DropArea.tsx @@ -37,6 +37,20 @@ border-radius:${theme.dimensions.radius}; ${ isDragEnter ? ` + background-color:#cce6ff; + @keyframes border-dance { + 0% { + background-position: left top, right bottom, left bottom, right top; + } + 100% { + background-position: left 15px top, right 15px bottom , left bottom 15px , right top 15px; + } + } + background-image: linear-gradient(90deg, #3399ff 50%, transparent 50%), linear-gradient(90deg, #3399ff 50%, transparent 50%), linear-gradient(0deg, #3399ff 50%, transparent 50%), linear-gradient(0deg, #3399ff 50%, transparent 50%); + background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; + background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px; + background-position: left top, right bottom, left bottom, right top; + animation: border-dance .3s infinite linear; ` : ` border:2px dashed grey; From 7b8ad262184199ec43d54ec96e8f0f4c7a16eade Mon Sep 17 00:00:00 2001 From: roggc Date: Mon, 17 Jan 2022 19:43:06 +0100 Subject: [PATCH 10/74] set default padding to theme value --- src/Containers/DropArea/DropArea.tsx | 35 +++++++++++++++++----------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx index ed850047..d4448a2e 100644 --- a/src/Containers/DropArea/DropArea.tsx +++ b/src/Containers/DropArea/DropArea.tsx @@ -1,5 +1,5 @@ -import React from 'react'; -import styled from 'styled-components'; +import React, { useMemo } from 'react'; +import styled, { useTheme } from 'styled-components'; import { MainInterface, Main } from '@Utils/BaseStyles'; export interface IDropAreaProps @@ -13,19 +13,28 @@ export interface IDropAreaProps export const DropArea: React.FC = ({ message = 'Drag and drop your files or click here to select', isDragEnter = false, - padding = '10px', onClick = () => null, + padding, ...props -}): React.ReactElement => ( - - {message} - -); +}): React.ReactElement => { + const theme = useTheme(); + const defaultPadding = useMemo((): string | number => { + if (padding === undefined) { + return theme.dimensions.padding.container; + } + return padding; + }, [padding, theme]); + return ( + + {message} + + ); +}; const DropAreaBox = styled.div< Pick From 5410bf216a6ea48f52f9b6b4279dfbfdef1fbcfe Mon Sep 17 00:00:00 2001 From: roggc Date: Mon, 17 Jan 2022 20:40:51 +0100 Subject: [PATCH 11/74] add dropzone component --- src/Containers/DropArea/DropArea.stories.tsx | 30 ++++++++---- src/Containers/DropArea/DropArea.tsx | 50 +++++++++++++++----- 2 files changed, 59 insertions(+), 21 deletions(-) diff --git a/src/Containers/DropArea/DropArea.stories.tsx b/src/Containers/DropArea/DropArea.stories.tsx index e0c92b0e..e677ccfd 100644 --- a/src/Containers/DropArea/DropArea.stories.tsx +++ b/src/Containers/DropArea/DropArea.stories.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { Meta, Story } from '@storybook/react'; import { DropArea, IDropAreaProps } from './DropArea'; @@ -6,13 +6,27 @@ export default { title: 'Components/DropArea', component: DropArea, args: {}, - argTypes: { onClick: { action: 'clickeddd!!!' } }, } as Meta; -export const Basic: Story = (args) => ; - -export const IsDragEnter = Basic.bind({}); -IsDragEnter.args = { - ...Basic.args, - isDragEnter: true, +export const Basic: Story = (args) => { + const [isDragEnter, setIsDragEnter] = useState(false); + const onDragEnter = () => { + setIsDragEnter(true); + }; + const onDragLeave = () => { + setIsDragEnter(false); + }; + const onDrop = (acceptedFiles: File[]): void => { + console.log(acceptedFiles); + setIsDragEnter(false); + }; + return ( + + ); }; diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx index d4448a2e..ab69ad01 100644 --- a/src/Containers/DropArea/DropArea.tsx +++ b/src/Containers/DropArea/DropArea.tsx @@ -1,19 +1,34 @@ import React, { useMemo } from 'react'; import styled, { useTheme } from 'styled-components'; import { MainInterface, Main } from '@Utils/BaseStyles'; +import Dropzone, { + useDropzone, + DropEvent, + FileRejection, +} from 'react-dropzone'; export interface IDropAreaProps extends MainInterface, React.HTMLAttributes { message?: string; + onDragEnter?: React.DragEventHandler | undefined; + onDragLeave?: React.DragEventHandler | undefined; + onDropHandler?: + | (( + acceptedFiles: T[], + fileRejections: FileRejection[], + event: DropEvent, + ) => void) + | undefined; isDragEnter?: boolean; - onClick?: () => void; } export const DropArea: React.FC = ({ message = 'Drag and drop your files or click here to select', + onDragEnter, + onDragLeave, + onDropHandler, isDragEnter = false, - onClick = () => null, padding, ...props }): React.ReactElement => { @@ -24,21 +39,30 @@ export const DropArea: React.FC = ({ } return padding; }, [padding, theme]); + const { getInputProps, getRootProps } = useDropzone({ + onDragEnter, + onDragLeave, + onDrop: onDropHandler, + }); return ( - - {message} - + + {() => ( +
+ + {message} + + +
+ )} + ); }; -const DropAreaBox = styled.div< - Pick ->` +const DropAreaBox = styled.div` width: fit-content; cursor: pointer; ${({ theme, isDragEnter, ...props }): string => ` From 2e69295e0a3cb44806c7f8f18709ba1611527e1e Mon Sep 17 00:00:00 2001 From: roggc Date: Mon, 17 Jan 2022 21:09:20 +0100 Subject: [PATCH 12/74] remove function definitions in story and add argTypes --- src/Containers/DropArea/DropArea.stories.tsx | 33 +++++++------------- src/Containers/DropArea/DropArea.tsx | 6 ++-- 2 files changed, 14 insertions(+), 25 deletions(-) diff --git a/src/Containers/DropArea/DropArea.stories.tsx b/src/Containers/DropArea/DropArea.stories.tsx index e677ccfd..c9aa45ab 100644 --- a/src/Containers/DropArea/DropArea.stories.tsx +++ b/src/Containers/DropArea/DropArea.stories.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import { Meta, Story } from '@storybook/react'; import { DropArea, IDropAreaProps } from './DropArea'; @@ -6,27 +6,16 @@ export default { title: 'Components/DropArea', component: DropArea, args: {}, + argTypes: { + onDragLeave: { action: 'leaving drop are' }, + onDragEnter: { action: 'entering drop area' }, + onDropHandler: { action: 'files dropped' }, + }, } as Meta; -export const Basic: Story = (args) => { - const [isDragEnter, setIsDragEnter] = useState(false); - const onDragEnter = () => { - setIsDragEnter(true); - }; - const onDragLeave = () => { - setIsDragEnter(false); - }; - const onDrop = (acceptedFiles: File[]): void => { - console.log(acceptedFiles); - setIsDragEnter(false); - }; - return ( - - ); +export const Basic: Story = (args) => ; +export const IsDragEnterTrue = Basic.bind({}); +IsDragEnterTrue.args = { + ...Basic.args, + isDragEnter: true, }; diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx index ab69ad01..6d963c11 100644 --- a/src/Containers/DropArea/DropArea.tsx +++ b/src/Containers/DropArea/DropArea.tsx @@ -25,9 +25,9 @@ export interface IDropAreaProps export const DropArea: React.FC = ({ message = 'Drag and drop your files or click here to select', - onDragEnter, - onDragLeave, - onDropHandler, + onDragEnter=()=>null, + onDragLeave=()=>null, + onDropHandler=()=>null, isDragEnter = false, padding, ...props From 2996e7b634192eb238544b949d81bd922d2d42ce Mon Sep 17 00:00:00 2001 From: roggc Date: Mon, 17 Jan 2022 21:20:01 +0100 Subject: [PATCH 13/74] use theme colors --- src/Containers/DropArea/DropArea.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx index 6d963c11..d31f70fd 100644 --- a/src/Containers/DropArea/DropArea.tsx +++ b/src/Containers/DropArea/DropArea.tsx @@ -70,7 +70,7 @@ border-radius:${theme.dimensions.radius}; ${ isDragEnter ? ` - background-color:#cce6ff; + background-color:${theme.colors.input.success}; @keyframes border-dance { 0% { background-position: left top, right bottom, left bottom, right top; @@ -86,7 +86,7 @@ ${ animation: border-dance .3s infinite linear; ` : ` -border:2px dashed grey; +border:2px dashed ${theme.colors.border}; ` } From 492c684f63923175935eb4f3921cff54a30ea516 Mon Sep 17 00:00:00 2001 From: roggc Date: Mon, 17 Jan 2022 21:28:37 +0100 Subject: [PATCH 14/74] set default value for padding in styled-component --- src/Containers/DropArea/DropArea.tsx | 32 +++++++++++----------------- 1 file changed, 12 insertions(+), 20 deletions(-) diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx index d31f70fd..9953410f 100644 --- a/src/Containers/DropArea/DropArea.tsx +++ b/src/Containers/DropArea/DropArea.tsx @@ -1,5 +1,5 @@ -import React, { useMemo } from 'react'; -import styled, { useTheme } from 'styled-components'; +import React from 'react'; +import styled from 'styled-components'; import { MainInterface, Main } from '@Utils/BaseStyles'; import Dropzone, { useDropzone, @@ -25,20 +25,12 @@ export interface IDropAreaProps export const DropArea: React.FC = ({ message = 'Drag and drop your files or click here to select', - onDragEnter=()=>null, - onDragLeave=()=>null, - onDropHandler=()=>null, + onDragEnter = () => null, + onDragLeave = () => null, + onDropHandler = () => null, isDragEnter = false, - padding, ...props }): React.ReactElement => { - const theme = useTheme(); - const defaultPadding = useMemo((): string | number => { - if (padding === undefined) { - return theme.dimensions.padding.container; - } - return padding; - }, [padding, theme]); const { getInputProps, getRootProps } = useDropzone({ onDragEnter, onDragLeave, @@ -48,11 +40,7 @@ export const DropArea: React.FC = ({ {() => (
- + {message} @@ -65,7 +53,7 @@ export const DropArea: React.FC = ({ const DropAreaBox = styled.div` width: fit-content; cursor: pointer; - ${({ theme, isDragEnter, ...props }): string => ` + ${({ theme, isDragEnter, padding, ...props }): string => ` border-radius:${theme.dimensions.radius}; ${ isDragEnter @@ -90,6 +78,10 @@ border:2px dashed ${theme.colors.border}; ` } -${Main({ ...props })} +${ + padding === undefined + ? Main({ padding: theme.dimensions.padding.container, ...props }) + : Main({ padding, ...props }) +} `} `; From 57c06ef9e779f40f7e5c8205da5d46f7b8578cae Mon Sep 17 00:00:00 2001 From: roggc Date: Mon, 17 Jan 2022 23:11:57 +0100 Subject: [PATCH 15/74] restrict click area to a button --- src/Containers/DropArea/DropArea.stories.tsx | 1 + src/Containers/DropArea/DropArea.tsx | 63 ++++++++++++++++++-- 2 files changed, 59 insertions(+), 5 deletions(-) diff --git a/src/Containers/DropArea/DropArea.stories.tsx b/src/Containers/DropArea/DropArea.stories.tsx index c9aa45ab..4d1fa159 100644 --- a/src/Containers/DropArea/DropArea.stories.tsx +++ b/src/Containers/DropArea/DropArea.stories.tsx @@ -10,6 +10,7 @@ export default { onDragLeave: { action: 'leaving drop are' }, onDragEnter: { action: 'entering drop area' }, onDropHandler: { action: 'files dropped' }, + onClick: { action: 'you clicked!' }, }, } as Meta; diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx index 9953410f..93d6e5f4 100644 --- a/src/Containers/DropArea/DropArea.tsx +++ b/src/Containers/DropArea/DropArea.tsx @@ -1,6 +1,7 @@ import React from 'react'; import styled from 'styled-components'; import { MainInterface, Main } from '@Utils/BaseStyles'; +import { flex } from '@Utils/Mixins'; import Dropzone, { useDropzone, DropEvent, @@ -11,6 +12,7 @@ export interface IDropAreaProps extends MainInterface, React.HTMLAttributes { message?: string; + onClick?: React.MouseEventHandler|undefined; onDragEnter?: React.DragEventHandler | undefined; onDragLeave?: React.DragEventHandler | undefined; onDropHandler?: @@ -24,7 +26,8 @@ export interface IDropAreaProps } export const DropArea: React.FC = ({ - message = 'Drag and drop your files or click here to select', + message = 'Drag & Drop your files here', + onClick=()=>null, onDragEnter = () => null, onDragLeave = () => null, onDropHandler = () => null, @@ -39,11 +42,38 @@ export const DropArea: React.FC = ({ return ( {() => ( -
+
{ + e.stopPropagation(); + }, + })} + > - {message} + {message} + OR + + browse files + + -
)} @@ -52,7 +82,7 @@ export const DropArea: React.FC = ({ const DropAreaBox = styled.div` width: fit-content; - cursor: pointer; + ${flex('column', 'center', 'center')} ${({ theme, isDragEnter, padding, ...props }): string => ` border-radius:${theme.dimensions.radius}; ${ @@ -85,3 +115,26 @@ ${ } `} `; + +const BrowseFiles = styled.div` + ${({ theme }): string => ` + border-radius:${theme.dimensions.radius}; + background-color:${theme.colors.occupancyStatusColors.Occupied}; + padding:${theme.dimensions.padding.default}; + color:${theme.colors.background}; + `} + overflow: hidden; + position: relative; + user-select: none; + width: fit-content; + font-weight: 700; +`; + +const OrBox = styled.div` + margin: 10px; + font-weight: 700; +`; + +const MessageBox = styled.div` + font-weight: 700; +`; From 39c7bb1a4101cbff344fce744fe06af36fa7f490 Mon Sep 17 00:00:00 2001 From: roggc Date: Mon, 17 Jan 2022 23:23:39 +0100 Subject: [PATCH 16/74] add story OnClickPreventDefault --- src/Containers/DropArea/DropArea.stories.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/Containers/DropArea/DropArea.stories.tsx b/src/Containers/DropArea/DropArea.stories.tsx index 4d1fa159..ae9f0e67 100644 --- a/src/Containers/DropArea/DropArea.stories.tsx +++ b/src/Containers/DropArea/DropArea.stories.tsx @@ -20,3 +20,10 @@ IsDragEnterTrue.args = { ...Basic.args, isDragEnter: true, }; +export const OnClickPreventDefault = Basic.bind({}); +OnClickPreventDefault.args = { + ...Basic.args, + onClick: (e: React.MouseEvent) => { + e.preventDefault(); + }, +}; From d59349b501e8ac8b541f3ed84abdd9b8751959cb Mon Sep 17 00:00:00 2001 From: roggc Date: Mon, 17 Jan 2022 23:37:20 +0100 Subject: [PATCH 17/74] add icon --- src/Containers/DropArea/DropArea.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx index 93d6e5f4..89e8e7d6 100644 --- a/src/Containers/DropArea/DropArea.tsx +++ b/src/Containers/DropArea/DropArea.tsx @@ -1,5 +1,6 @@ import React from 'react'; import styled from 'styled-components'; +import { CloudUploadAlt } from '@styled-icons/fa-solid/CloudUploadAlt'; import { MainInterface, Main } from '@Utils/BaseStyles'; import { flex } from '@Utils/Mixins'; import Dropzone, { @@ -12,7 +13,7 @@ export interface IDropAreaProps extends MainInterface, React.HTMLAttributes { message?: string; - onClick?: React.MouseEventHandler|undefined; + onClick?: React.MouseEventHandler | undefined; onDragEnter?: React.DragEventHandler | undefined; onDragLeave?: React.DragEventHandler | undefined; onDropHandler?: @@ -27,7 +28,7 @@ export interface IDropAreaProps export const DropArea: React.FC = ({ message = 'Drag & Drop your files here', - onClick=()=>null, + onClick = () => null, onDragEnter = () => null, onDragLeave = () => null, onDropHandler = () => null, @@ -50,10 +51,11 @@ export const DropArea: React.FC = ({ })} > + {message} OR - browse files + Browse Files ` +color:${theme.colors.occupancyStatusColors.Occupied}; +`} +`; From 943ec1392795f2ea2bd3fd315958515062ae3719 Mon Sep 17 00:00:00 2001 From: roggc Date: Mon, 17 Jan 2022 23:51:58 +0100 Subject: [PATCH 18/74] add minWidth property --- src/Containers/DropArea/DropArea.stories.tsx | 5 +++++ src/Containers/DropArea/DropArea.tsx | 17 +++++++++++++---- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/src/Containers/DropArea/DropArea.stories.tsx b/src/Containers/DropArea/DropArea.stories.tsx index ae9f0e67..73116726 100644 --- a/src/Containers/DropArea/DropArea.stories.tsx +++ b/src/Containers/DropArea/DropArea.stories.tsx @@ -27,3 +27,8 @@ OnClickPreventDefault.args = { e.preventDefault(); }, }; +export const BigMinWidth = Basic.bind({}); +BigMinWidth.args = { + ...Basic.args, + minWidth: 500, +}; diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx index 89e8e7d6..14741b36 100644 --- a/src/Containers/DropArea/DropArea.tsx +++ b/src/Containers/DropArea/DropArea.tsx @@ -24,6 +24,7 @@ export interface IDropAreaProps ) => void) | undefined; isDragEnter?: boolean; + minWidth?: number; } export const DropArea: React.FC = ({ @@ -82,10 +83,13 @@ export const DropArea: React.FC = ({ ); }; -const DropAreaBox = styled.div` +const DropAreaBox = styled.div< + MainInterface & { isDragEnter: boolean; minWidth?: number } +>` width: fit-content; ${flex('column', 'center', 'center')} - ${({ theme, isDragEnter, padding, ...props }): string => ` + ${({ theme, isDragEnter, minWidth, padding, ...props }): string => ` + ${minWidth ? `min-width:${minWidth}px;` : ''} border-radius:${theme.dimensions.radius}; ${ isDragEnter @@ -106,7 +110,7 @@ ${ animation: border-dance .3s infinite linear; ` : ` -border:2px dashed ${theme.colors.border}; +border:2px dashed ${theme.colors.occupancyStatusColors.Occupied}; ` } @@ -135,16 +139,21 @@ const BrowseFiles = styled.div` const OrBox = styled.div` margin: 10px; font-weight: 700; + opacity:0.7; + ${({theme}):string=>` + color:${theme.colors.occupancyStatusColors.Occupied}; + `} `; const MessageBox = styled.div` font-weight: 700; + opacity:0.7; `; const Icon = styled.svg` width: 60px; height: 60px; - opacity:0.6; + opacity: 0.6; ${({ theme }): string => ` color:${theme.colors.occupancyStatusColors.Occupied}; `} From 537fd31fce1e12d82debac86d45a9e8c74f95a15 Mon Sep 17 00:00:00 2001 From: roggc Date: Tue, 18 Jan 2022 00:05:25 +0100 Subject: [PATCH 19/74] add isDisabled property --- src/Containers/DropArea/DropArea.stories.tsx | 5 +++++ src/Containers/DropArea/DropArea.tsx | 10 +++++++--- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/Containers/DropArea/DropArea.stories.tsx b/src/Containers/DropArea/DropArea.stories.tsx index 73116726..b02241e1 100644 --- a/src/Containers/DropArea/DropArea.stories.tsx +++ b/src/Containers/DropArea/DropArea.stories.tsx @@ -32,3 +32,8 @@ BigMinWidth.args = { ...Basic.args, minWidth: 500, }; +export const IsDisabledTrue = Basic.bind({}); +IsDisabledTrue.args = { + ...Basic.args, + isDisabled: true, +}; diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx index 14741b36..ae36ecdb 100644 --- a/src/Containers/DropArea/DropArea.tsx +++ b/src/Containers/DropArea/DropArea.tsx @@ -25,6 +25,7 @@ export interface IDropAreaProps | undefined; isDragEnter?: boolean; minWidth?: number; + isDisabled?: boolean; } export const DropArea: React.FC = ({ @@ -34,12 +35,14 @@ export const DropArea: React.FC = ({ onDragLeave = () => null, onDropHandler = () => null, isDragEnter = false, + isDisabled = false, ...props }): React.ReactElement => { const { getInputProps, getRootProps } = useDropzone({ onDragEnter, onDragLeave, onDrop: onDropHandler, + disabled: isDisabled, }); return ( @@ -73,6 +76,7 @@ export const DropArea: React.FC = ({ left: -1000, position: 'absolute', }, + disabled: isDisabled, })} /> @@ -139,15 +143,15 @@ const BrowseFiles = styled.div` const OrBox = styled.div` margin: 10px; font-weight: 700; - opacity:0.7; - ${({theme}):string=>` + opacity: 0.7; + ${({ theme }): string => ` color:${theme.colors.occupancyStatusColors.Occupied}; `} `; const MessageBox = styled.div` font-weight: 700; - opacity:0.7; + opacity: 0.7; `; const Icon = styled.svg` From d536bfbadc621f3a72da8194be454a96450dc039 Mon Sep 17 00:00:00 2001 From: roggc Date: Tue, 18 Jan 2022 00:09:02 +0100 Subject: [PATCH 20/74] add buttonText prop --- src/Containers/DropArea/DropArea.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx index ae36ecdb..1f480a06 100644 --- a/src/Containers/DropArea/DropArea.tsx +++ b/src/Containers/DropArea/DropArea.tsx @@ -13,6 +13,7 @@ export interface IDropAreaProps extends MainInterface, React.HTMLAttributes { message?: string; + buttonText?: string; onClick?: React.MouseEventHandler | undefined; onDragEnter?: React.DragEventHandler | undefined; onDragLeave?: React.DragEventHandler | undefined; @@ -24,12 +25,13 @@ export interface IDropAreaProps ) => void) | undefined; isDragEnter?: boolean; - minWidth?: number; isDisabled?: boolean; + minWidth?: number; } export const DropArea: React.FC = ({ message = 'Drag & Drop your files here', + buttonText = 'Browse Files', onClick = () => null, onDragEnter = () => null, onDragLeave = () => null, @@ -59,7 +61,7 @@ export const DropArea: React.FC = ({ {message} OR - Browse Files + {buttonText} Date: Tue, 18 Jan 2022 00:29:04 +0100 Subject: [PATCH 21/74] remove isDragEnter prop --- src/Containers/DropArea/DropArea.stories.tsx | 5 ----- src/Containers/DropArea/DropArea.tsx | 14 ++++++++------ 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/src/Containers/DropArea/DropArea.stories.tsx b/src/Containers/DropArea/DropArea.stories.tsx index b02241e1..3bb0a7a5 100644 --- a/src/Containers/DropArea/DropArea.stories.tsx +++ b/src/Containers/DropArea/DropArea.stories.tsx @@ -15,11 +15,6 @@ export default { } as Meta; export const Basic: Story = (args) => ; -export const IsDragEnterTrue = Basic.bind({}); -IsDragEnterTrue.args = { - ...Basic.args, - isDragEnter: true, -}; export const OnClickPreventDefault = Basic.bind({}); OnClickPreventDefault.args = { ...Basic.args, diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx index 1f480a06..5fe9a14e 100644 --- a/src/Containers/DropArea/DropArea.tsx +++ b/src/Containers/DropArea/DropArea.tsx @@ -24,7 +24,6 @@ export interface IDropAreaProps event: DropEvent, ) => void) | undefined; - isDragEnter?: boolean; isDisabled?: boolean; minWidth?: number; } @@ -36,11 +35,10 @@ export const DropArea: React.FC = ({ onDragEnter = () => null, onDragLeave = () => null, onDropHandler = () => null, - isDragEnter = false, isDisabled = false, ...props }): React.ReactElement => { - const { getInputProps, getRootProps } = useDropzone({ + const { getInputProps, getRootProps, isDragActive } = useDropzone({ onDragEnter, onDragLeave, onDrop: onDropHandler, @@ -49,14 +47,14 @@ export const DropArea: React.FC = ({ return ( {() => ( -
{ e.stopPropagation(); }, })} > - + {message} OR @@ -83,12 +81,16 @@ export const DropArea: React.FC = ({ /> -
+ )} ); }; +const RootDiv = styled.div` + width: fit-content; +`; + const DropAreaBox = styled.div< MainInterface & { isDragEnter: boolean; minWidth?: number } >` From 96de21ffed5c91287dcd9714731393fabc802137 Mon Sep 17 00:00:00 2001 From: roggc Date: Tue, 18 Jan 2022 00:40:01 +0100 Subject: [PATCH 22/74] add css pointer-events property to restrict click to the button --- src/Containers/DropArea/DropArea.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx index 5fe9a14e..b2277fb8 100644 --- a/src/Containers/DropArea/DropArea.tsx +++ b/src/Containers/DropArea/DropArea.tsx @@ -47,13 +47,7 @@ export const DropArea: React.FC = ({ return ( {() => ( - { - e.stopPropagation(); - }, - })} - > + {message} @@ -89,6 +83,7 @@ export const DropArea: React.FC = ({ const RootDiv = styled.div` width: fit-content; + pointer-events: none; `; const DropAreaBox = styled.div< @@ -142,6 +137,7 @@ const BrowseFiles = styled.div` user-select: none; width: fit-content; font-weight: 700; + pointer-events: initial; `; const OrBox = styled.div` From 354d4e9315a83b64646bf06c37b9624ac91b60ca Mon Sep 17 00:00:00 2001 From: roggc Date: Tue, 18 Jan 2022 01:13:24 +0100 Subject: [PATCH 23/74] put style properties in styled component --- src/Containers/DropArea/DropArea.tsx | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx index b2277fb8..6ee3c4bb 100644 --- a/src/Containers/DropArea/DropArea.tsx +++ b/src/Containers/DropArea/DropArea.tsx @@ -54,22 +54,9 @@ export const DropArea: React.FC = ({ OR {buttonText} - @@ -86,6 +73,19 @@ const RootDiv = styled.div` pointer-events: none; `; +const Input = styled.input` + opacity: 0; + display: initial !important; + visibility: initial; + width: 2000px; + height: 2000px; + z-index: 99999999; + cursor: pointer; + top: -1000px; + left: -1000px; + position: absolute; +`; + const DropAreaBox = styled.div< MainInterface & { isDragEnter: boolean; minWidth?: number } >` From 19465707996c965902399b261be2037882dac4ea Mon Sep 17 00:00:00 2001 From: roggc Date: Tue, 18 Jan 2022 01:58:14 +0100 Subject: [PATCH 24/74] remove Input styled component --- src/Containers/DropArea/DropArea.tsx | 16 ++-------------- 1 file changed, 2 insertions(+), 14 deletions(-) diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx index 6ee3c4bb..cc71fd58 100644 --- a/src/Containers/DropArea/DropArea.tsx +++ b/src/Containers/DropArea/DropArea.tsx @@ -54,7 +54,7 @@ export const DropArea: React.FC = ({ OR {buttonText} - ` @@ -138,6 +125,7 @@ const BrowseFiles = styled.div` width: fit-content; font-weight: 700; pointer-events: initial; + cursor:pointer; `; const OrBox = styled.div` From 6c470fbd178701de5724c8acee5645200c5e1b99 Mon Sep 17 00:00:00 2001 From: roggc Date: Tue, 18 Jan 2022 02:46:06 +0100 Subject: [PATCH 25/74] change minWidth property name --- src/Containers/DropArea/DropArea.stories.tsx | 6 ++-- src/Containers/DropArea/DropArea.tsx | 35 +++++++++----------- 2 files changed, 18 insertions(+), 23 deletions(-) diff --git a/src/Containers/DropArea/DropArea.stories.tsx b/src/Containers/DropArea/DropArea.stories.tsx index 3bb0a7a5..21d02da8 100644 --- a/src/Containers/DropArea/DropArea.stories.tsx +++ b/src/Containers/DropArea/DropArea.stories.tsx @@ -22,10 +22,10 @@ OnClickPreventDefault.args = { e.preventDefault(); }, }; -export const BigMinWidth = Basic.bind({}); -BigMinWidth.args = { +export const BigWidth = Basic.bind({}); +BigWidth.args = { ...Basic.args, - minWidth: 500, + width: 500, }; export const IsDisabledTrue = Basic.bind({}); IsDisabledTrue.args = { diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx index cc71fd58..9c5cf599 100644 --- a/src/Containers/DropArea/DropArea.tsx +++ b/src/Containers/DropArea/DropArea.tsx @@ -25,7 +25,7 @@ export interface IDropAreaProps ) => void) | undefined; isDisabled?: boolean; - minWidth?: number; + width?: number; } export const DropArea: React.FC = ({ @@ -74,17 +74,17 @@ const RootDiv = styled.div` `; const DropAreaBox = styled.div< - MainInterface & { isDragEnter: boolean; minWidth?: number } + MainInterface & { isDragEnter: boolean; width?: number } >` width: fit-content; ${flex('column', 'center', 'center')} - ${({ theme, isDragEnter, minWidth, padding, ...props }): string => ` - ${minWidth ? `min-width:${minWidth}px;` : ''} -border-radius:${theme.dimensions.radius}; -${ + ${({ theme, isDragEnter, width, padding, ...props }): string => ` + ${width ? `min-width:${width}px;` : ''} + border-radius:${theme.dimensions.radius}; + ${ isDragEnter ? ` - background-color:${theme.colors.input.success}; + background-color: ${theme.colors.input.success}; @keyframes border-dance { 0% { background-position: left top, right bottom, left bottom, right top; @@ -100,10 +100,9 @@ ${ animation: border-dance .3s infinite linear; ` : ` -border:2px dashed ${theme.colors.occupancyStatusColors.Occupied}; + border: 2px dashed ${theme.colors.occupancyStatusColors.Occupied}; ` } - ${ padding === undefined ? Main({ padding: theme.dimensions.padding.container, ...props }) @@ -114,10 +113,10 @@ ${ const BrowseFiles = styled.div` ${({ theme }): string => ` - border-radius:${theme.dimensions.radius}; - background-color:${theme.colors.occupancyStatusColors.Occupied}; - padding:${theme.dimensions.padding.default}; - color:${theme.colors.background}; + border-radius: ${theme.dimensions.radius}; + background-color: ${theme.colors.occupancyStatusColors.Occupied}; + padding: ${theme.dimensions.padding.default}; + color: ${theme.colors.background}; `} overflow: hidden; position: relative; @@ -125,16 +124,14 @@ const BrowseFiles = styled.div` width: fit-content; font-weight: 700; pointer-events: initial; - cursor:pointer; + cursor: pointer; `; const OrBox = styled.div` margin: 10px; font-weight: 700; opacity: 0.7; - ${({ theme }): string => ` - color:${theme.colors.occupancyStatusColors.Occupied}; - `} + color: ${({ theme }) => theme.colors.occupancyStatusColors.Occupied}; `; const MessageBox = styled.div` @@ -146,7 +143,5 @@ const Icon = styled.svg` width: 60px; height: 60px; opacity: 0.6; - ${({ theme }): string => ` -color:${theme.colors.occupancyStatusColors.Occupied}; -`} + color: ${({ theme }) => theme.colors.occupancyStatusColors.Occupied}; `; From 65f8e13c174b9cd8120cb915832fda4fb1c6950c Mon Sep 17 00:00:00 2001 From: roggc Date: Tue, 18 Jan 2022 12:20:04 +0100 Subject: [PATCH 26/74] add lottie animation and remove pointers-events css --- src/Containers/DropArea/DropArea.tsx | 52 +- src/Containers/DropArea/animationData.ts | 806 +++++++++++++++++++++++ 2 files changed, 848 insertions(+), 10 deletions(-) create mode 100644 src/Containers/DropArea/animationData.ts diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx index 9c5cf599..40524843 100644 --- a/src/Containers/DropArea/DropArea.tsx +++ b/src/Containers/DropArea/DropArea.tsx @@ -8,6 +8,17 @@ import Dropzone, { DropEvent, FileRejection, } from 'react-dropzone'; +import Lottie from 'react-lottie'; +import { animationData } from './animationData'; + +const lottieOptions = { + loop: true, + autoplay: true, + animationData, + rendererSettings: { + preserveAspectRatio: 'xMidYMid slice', + }, +}; export interface IDropAreaProps extends MainInterface, @@ -44,17 +55,28 @@ export const DropArea: React.FC = ({ onDrop: onDropHandler, disabled: isDisabled, }); + + const getLottieAnimationOrIcon = (isDragEnter: boolean): JSX.Element => { + if (isDragEnter) + return ; + return ; + }; + + const stopPropagation = (e: React.MouseEvent): void => { + e.stopPropagation(); + }; + return ( {() => ( - + - + {getLottieAnimationOrIcon(isDragActive)} {message} OR {buttonText} - = ({ const RootDiv = styled.div` width: fit-content; - pointer-events: none; +`; + +const Input = styled.input` + opacity: 0; + display: initial !important; + visibility: initial; + position: absolute; + z-index: 99999999; + cursor: pointer; + width: 2000px; + height: 2000px; + top: -1000px; + left: -1000px; `; const DropAreaBox = styled.div< @@ -82,8 +116,8 @@ const DropAreaBox = styled.div< ${width ? `min-width:${width}px;` : ''} border-radius:${theme.dimensions.radius}; ${ - isDragEnter - ? ` + isDragEnter + ? ` background-color: ${theme.colors.input.success}; @keyframes border-dance { 0% { @@ -99,10 +133,10 @@ const DropAreaBox = styled.div< background-position: left top, right bottom, left bottom, right top; animation: border-dance .3s infinite linear; ` - : ` + : ` border: 2px dashed ${theme.colors.occupancyStatusColors.Occupied}; ` -} + } ${ padding === undefined ? Main({ padding: theme.dimensions.padding.container, ...props }) @@ -123,8 +157,6 @@ const BrowseFiles = styled.div` user-select: none; width: fit-content; font-weight: 700; - pointer-events: initial; - cursor: pointer; `; const OrBox = styled.div` diff --git a/src/Containers/DropArea/animationData.ts b/src/Containers/DropArea/animationData.ts new file mode 100644 index 00000000..1db887f8 --- /dev/null +++ b/src/Containers/DropArea/animationData.ts @@ -0,0 +1,806 @@ +export const animationData = { + v: '5.5.5', + fr: 30.0169982910156, + ip: 0, + op: 54.9999968686364, + w: 500, + h: 500, + nm: 'Comp 1', + ddd: 0, + assets: [], + layers: [ + { + ddd: 0, + ind: 1, + ty: 4, + nm: 'Shape Layer 1', + sr: 1, + ks: { + o: { a: 0, k: 100, ix: 11 }, + r: { a: 0, k: 0, ix: 10 }, + p: { + a: 1, + k: [ + { + i: { x: 0.52, y: 0.96 }, + o: { x: 0.48, y: 0.033 }, + t: 13, + s: [249.5, 272.75, 0], + to: [0, 0.333, 0], + ti: [0, 0, 0], + }, + { + i: { x: 0.52, y: 0.96 }, + o: { x: 0.48, y: 0.053 }, + t: 18, + s: [249.5, 274.75, 0], + to: [0, 0, 0], + ti: [0, 0, 0], + }, + { + i: { x: 0.52, y: 0.96 }, + o: { x: 0.48, y: 0.033 }, + t: 22, + s: [249.5, 272.75, 0], + to: [0, 0, 0], + ti: [0, 0, 0], + }, + { + i: { x: 0.52, y: 0.96 }, + o: { x: 0.48, y: 0.033 }, + t: 27, + s: [249.5, 274.75, 0], + to: [0, 0, 0], + ti: [0, 0, 0], + }, + { + i: { x: 0.52, y: 0.96 }, + o: { x: 0.48, y: 0.067 }, + t: 32, + s: [249.5, 272.75, 0], + to: [0, 0, 0], + ti: [0, 0, 0], + }, + { + i: { x: 0.52, y: 0.96 }, + o: { x: 0.48, y: 0.067 }, + t: 37, + s: [249.5, 274.75, 0], + to: [0, 0, 0], + ti: [0, 0.333, 0], + }, + { t: 41.9999976087769, s: [249.5, 272.75, 0] }, + ], + ix: 2, + }, + a: { a: 0, k: [-58.5, -39.25, 0], ix: 1 }, + s: { a: 0, k: [100, 100, 100], ix: 6 }, + }, + ao: 0, + shapes: [ + { + ty: 'gr', + it: [ + { + ind: 0, + ty: 'sh', + ix: 1, + ks: { + a: 0, + k: { + i: [ + [0, 0], + [0, 0], + [0, 0], + [0, 0], + [0, 0], + [0, 0], + ], + o: [ + [0, 0], + [0, 0], + [0, 0], + [0, 0], + [0, 0], + [0, 0], + ], + v: [ + [-50.5, -90], + [-129, -88.5], + [-129, 11.5], + [12, 11.5], + [12, -69], + [-29.5, -69], + ], + c: true, + }, + ix: 2, + }, + nm: 'Path 1', + mn: 'ADBE Vector Shape - Group', + hd: false, + }, + { + ty: 'st', + c: { a: 0, k: [0, 0.423528992896, 1, 1], ix: 3 }, + o: { a: 0, k: 0, ix: 4 }, + w: { a: 0, k: 7, ix: 5 }, + lc: 1, + lj: 1, + ml: 4, + bm: 0, + nm: 'Stroke 1', + mn: 'ADBE Vector Graphic - Stroke', + hd: false, + }, + { + ty: 'gf', + o: { a: 0, k: 100, ix: 10 }, + r: 1, + bm: 0, + g: { + p: 3, + k: { + a: 0, + k: [ + 0, 0.11, 0.466, 1, 0.5, 0.19, 0.394, 1, + 1, 0.271, 0.322, 1, + ], + ix: 9, + }, + }, + s: { a: 0, k: [8, 9.5], ix: 5 }, + e: { a: 0, k: [-127.5, -88.5], ix: 6 }, + t: 1, + nm: 'Gradient Fill 1', + mn: 'ADBE Vector Graphic - G-Fill', + hd: false, + }, + { + ty: 'tr', + p: { a: 0, k: [0, 0], ix: 2 }, + a: { a: 0, k: [0, 0], ix: 1 }, + s: { a: 0, k: [100, 100], ix: 3 }, + r: { a: 0, k: 0, ix: 6 }, + o: { a: 0, k: 100, ix: 7 }, + sk: { a: 0, k: 0, ix: 4 }, + sa: { a: 0, k: 0, ix: 5 }, + nm: 'Transform', + }, + ], + nm: 'Shape 1', + np: 3, + cix: 2, + bm: 0, + ix: 1, + mn: 'ADBE Vector Group', + hd: false, + }, + { + ty: 'rd', + nm: 'Round Corners 1', + r: { a: 0, k: 10, ix: 1 }, + ix: 2, + mn: 'ADBE Vector Filter - RC', + hd: false, + }, + ], + ip: 0, + op: 386.999977966587, + st: 0, + bm: 0, + }, + { + ddd: 0, + ind: 2, + ty: 4, + nm: 'Shape Layer 3', + parent: 1, + sr: 1, + ks: { + o: { + a: 1, + k: [ + { + i: { x: [0.52], y: [0.96] }, + o: { x: [0.48], y: [0.04] }, + t: 0, + s: [0], + }, + { + i: { x: [0.833], y: [1] }, + o: { x: [0.48], y: [0] }, + t: 11, + s: [100], + }, + { + i: { x: [0.52], y: [1] }, + o: { x: [0.167], y: [0] }, + t: 25, + s: [100], + }, + { t: 34.9999980073141, s: [0] }, + ], + ix: 11, + }, + r: { a: 0, k: 0, ix: 10 }, + p: { a: 0, k: [-32, -48.922, 0], ix: 2 }, + a: { a: 0, k: [0, 0, 0], ix: 1 }, + s: { a: 0, k: [100, 100, 100], ix: 6 }, + }, + ao: 0, + shapes: [ + { + ty: 'gr', + it: [ + { + ind: 0, + ty: 'sh', + ix: 1, + ks: { + a: 0, + k: { + i: [ + [0, 0], + [0, 0], + [0, 0], + [0, 0], + [0, 0], + ], + o: [ + [0, 0], + [0, 0], + [0, 0], + [0, 0], + [0, 0], + ], + v: [ + [47.25, -61.5], + [47.25, 61.5], + [-47.25, 61.5], + [-47.25, -36], + [-26.5, -61.5], + ], + c: true, + }, + ix: 2, + }, + nm: 'Path 1', + mn: 'ADBE Vector Shape - Group', + hd: false, + }, + { + ty: 'st', + c: { a: 0, k: [0, 0.423528992896, 1, 1], ix: 3 }, + o: { a: 0, k: 0, ix: 4 }, + w: { a: 0, k: 7, ix: 5 }, + lc: 1, + lj: 1, + ml: 4, + bm: 0, + nm: 'Stroke 1', + mn: 'ADBE Vector Graphic - Stroke', + hd: false, + }, + { + ty: 'gf', + o: { a: 0, k: 100, ix: 10 }, + r: 1, + bm: 0, + g: { + p: 3, + k: { + a: 0, + k: [ + 0, 0.761, 0.856, 1, 0.5, 0.776, 0.832, + 1, 1, 0.792, 0.807, 1, + ], + ix: 9, + }, + }, + s: { a: 0, k: [1, -62], ix: 5 }, + e: { a: 0, k: [0, 62], ix: 6 }, + t: 1, + nm: 'Gradient Fill 1', + mn: 'ADBE Vector Graphic - G-Fill', + hd: false, + }, + { + ty: 'tr', + p: { + a: 1, + k: [ + { + i: { x: 0, y: 1 }, + o: { x: 0.48, y: 0.049 }, + t: 0, + s: [-8, -118.5], + to: [0.167, 17.167], + ti: [-0.167, -17.167], + }, + { t: 26.9999984627852, s: [-7, -15.5] }, + ], + ix: 2, + }, + a: { a: 0, k: [0, 0], ix: 1 }, + s: { a: 0, k: [100, 100], ix: 3 }, + r: { a: 0, k: 0, ix: 6 }, + o: { a: 0, k: 100, ix: 7 }, + sk: { a: 0, k: 0, ix: 4 }, + sa: { a: 0, k: 0, ix: 5 }, + nm: 'Transform', + }, + ], + nm: 'Rectangle 1', + np: 3, + cix: 2, + bm: 0, + ix: 1, + mn: 'ADBE Vector Group', + hd: false, + }, + { + ty: 'rd', + nm: 'Round Corners 1', + r: { a: 0, k: 10, ix: 1 }, + ix: 2, + mn: 'ADBE Vector Filter - RC', + hd: false, + }, + ], + ip: 0, + op: 386.999977966587, + st: 0, + bm: 0, + }, + { + ddd: 0, + ind: 3, + ty: 4, + nm: 'Shape Layer 4', + parent: 1, + sr: 1, + ks: { + o: { + a: 1, + k: [ + { + i: { x: [0.52], y: [0.96] }, + o: { x: [0.48], y: [0.04] }, + t: 6, + s: [0], + }, + { + i: { x: [0.833], y: [1] }, + o: { x: [0.48], y: [0] }, + t: 17, + s: [100], + }, + { + i: { x: [0.52], y: [1] }, + o: { x: [0.167], y: [0] }, + t: 29, + s: [100], + }, + { t: 38.9999977795785, s: [0] }, + ], + ix: 11, + }, + r: { a: 0, k: 0, ix: 10 }, + p: { a: 0, k: [-44.5, -39.922, 0], ix: 2 }, + a: { a: 0, k: [0, 0, 0], ix: 1 }, + s: { a: 0, k: [100, 100, 100], ix: 6 }, + }, + ao: 0, + shapes: [ + { + ty: 'gr', + it: [ + { + ind: 0, + ty: 'sh', + ix: 1, + ks: { + a: 0, + k: { + i: [ + [0, 0], + [0, 0], + [0, 0], + [0, 0], + [0, 0], + ], + o: [ + [0, 0], + [0, 0], + [0, 0], + [0, 0], + [0, 0], + ], + v: [ + [47.25, -61.5], + [47.25, 61.5], + [-47.25, 61.5], + [-47.25, -36], + [-26.5, -61.5], + ], + c: true, + }, + ix: 2, + }, + nm: 'Path 1', + mn: 'ADBE Vector Shape - Group', + hd: false, + }, + { + ty: 'st', + c: { a: 0, k: [0, 0.423528992896, 1, 1], ix: 3 }, + o: { a: 0, k: 0, ix: 4 }, + w: { a: 0, k: 7, ix: 5 }, + lc: 1, + lj: 1, + ml: 4, + bm: 0, + nm: 'Stroke 1', + mn: 'ADBE Vector Graphic - Stroke', + hd: false, + }, + { + ty: 'gf', + o: { a: 0, k: 100, ix: 10 }, + r: 1, + bm: 0, + g: { + p: 3, + k: { + a: 0, + k: [ + 0, 0.69, 0.814, 1, 0.5, 0.648, 0.72, + 0.941, 1, 0.606, 0.625, 0.882, + ], + ix: 9, + }, + }, + s: { a: 0, k: [1, -62], ix: 5 }, + e: { a: 0, k: [0, 62], ix: 6 }, + t: 1, + nm: 'Gradient Fill 1', + mn: 'ADBE Vector Graphic - G-Fill', + hd: false, + }, + { + ty: 'tr', + p: { + a: 1, + k: [ + { + i: { x: 0, y: 1 }, + o: { x: 0.48, y: 0.05 }, + t: 6, + s: [-8, -118.5], + to: [0.167, 16.75], + ti: [-0.167, -16.75], + }, + { t: 32.9999981211819, s: [-7, -18] }, + ], + ix: 2, + }, + a: { a: 0, k: [0, 0], ix: 1 }, + s: { a: 0, k: [100, 100], ix: 3 }, + r: { a: 0, k: 0, ix: 6 }, + o: { a: 0, k: 100, ix: 7 }, + sk: { a: 0, k: 0, ix: 4 }, + sa: { a: 0, k: 0, ix: 5 }, + nm: 'Transform', + }, + ], + nm: 'Rectangle 1', + np: 3, + cix: 2, + bm: 0, + ix: 1, + mn: 'ADBE Vector Group', + hd: false, + }, + { + ty: 'rd', + nm: 'Round Corners 1', + r: { a: 0, k: 10, ix: 1 }, + ix: 2, + mn: 'ADBE Vector Filter - RC', + hd: false, + }, + ], + ip: 5.9999996583967, + op: 392.999977624984, + st: 5.9999996583967, + bm: 0, + }, + { + ddd: 0, + ind: 4, + ty: 4, + nm: 'Shape Layer 5', + parent: 1, + sr: 1, + ks: { + o: { + a: 1, + k: [ + { + i: { x: [0.52], y: [0.96] }, + o: { x: [0.48], y: [0.04] }, + t: 11, + s: [0], + }, + { + i: { x: [0.833], y: [1] }, + o: { x: [0.48], y: [0] }, + t: 22, + s: [100], + }, + { + i: { x: [0.52], y: [1] }, + o: { x: [0.167], y: [0] }, + t: 34, + s: [100], + }, + { t: 43.9999974949091, s: [0] }, + ], + ix: 11, + }, + r: { a: 0, k: 0, ix: 10 }, + p: { a: 0, k: [-59.5, -35.422, 0], ix: 2 }, + a: { a: 0, k: [0, 0, 0], ix: 1 }, + s: { a: 0, k: [100, 100, 100], ix: 6 }, + }, + ao: 0, + shapes: [ + { + ty: 'gr', + it: [ + { + ind: 0, + ty: 'sh', + ix: 1, + ks: { + a: 0, + k: { + i: [ + [0, 0], + [0, 0], + [0, 0], + [0, 0], + [0, 0], + ], + o: [ + [0, 0], + [0, 0], + [0, 0], + [0, 0], + [0, 0], + ], + v: [ + [47.25, -61.5], + [47.25, 61.5], + [-47.25, 61.5], + [-47.25, -36], + [-26.5, -61.5], + ], + c: true, + }, + ix: 2, + }, + nm: 'Path 1', + mn: 'ADBE Vector Shape - Group', + hd: false, + }, + { + ty: 'st', + c: { a: 0, k: [0, 0.423528992896, 1, 1], ix: 3 }, + o: { a: 0, k: 0, ix: 4 }, + w: { a: 0, k: 7, ix: 5 }, + lc: 1, + lj: 1, + ml: 4, + bm: 0, + nm: 'Stroke 1', + mn: 'ADBE Vector Graphic - Stroke', + hd: false, + }, + { + ty: 'gf', + o: { a: 0, k: 100, ix: 10 }, + r: 1, + bm: 0, + g: { + p: 3, + k: { + a: 0, + k: [ + 0, 0.529, 0.718, 1, 0.5, 0.474, 0.585, + 0.941, 1, 0.419, 0.451, 0.882, + ], + ix: 9, + }, + }, + s: { a: 0, k: [1, -62], ix: 5 }, + e: { a: 0, k: [0, 62], ix: 6 }, + t: 1, + nm: 'Gradient Fill 1', + mn: 'ADBE Vector Graphic - G-Fill', + hd: false, + }, + { + ty: 'tr', + p: { + a: 1, + k: [ + { + i: { x: 0, y: 1 }, + o: { x: 0.48, y: 0.049 }, + t: 11, + s: [-8, -118.5], + to: [0.167, 17.167], + ti: [-0.167, -17.167], + }, + { t: 37.9999978365124, s: [-7, -15.5] }, + ], + ix: 2, + }, + a: { a: 0, k: [0, 0], ix: 1 }, + s: { a: 0, k: [100, 100], ix: 3 }, + r: { a: 0, k: 0, ix: 6 }, + o: { a: 0, k: 100, ix: 7 }, + sk: { a: 0, k: 0, ix: 4 }, + sa: { a: 0, k: 0, ix: 5 }, + nm: 'Transform', + }, + ], + nm: 'Rectangle 1', + np: 3, + cix: 2, + bm: 0, + ix: 1, + mn: 'ADBE Vector Group', + hd: false, + }, + { + ty: 'rd', + nm: 'Round Corners 1', + r: { a: 0, k: 10, ix: 1 }, + ix: 2, + mn: 'ADBE Vector Filter - RC', + hd: false, + }, + ], + ip: 10.9999993737273, + op: 397.999977340315, + st: 10.9999993737273, + bm: 0, + }, + { + ddd: 0, + ind: 5, + ty: 4, + nm: 'Shape Layer 2', + parent: 1, + sr: 1, + ks: { + o: { a: 0, k: 100, ix: 11 }, + r: { a: 0, k: 0, ix: 10 }, + p: { a: 0, k: [-58, -20, 0], ix: 2 }, + a: { a: 0, k: [0, 0, 0], ix: 1 }, + s: { a: 0, k: [100, 100, 100], ix: 6 }, + }, + ao: 0, + shapes: [ + { + ty: 'gr', + it: [ + { + ind: 0, + ty: 'sh', + ix: 1, + ks: { + a: 0, + k: { + i: [ + [0, 0], + [0, 0], + [0, 0], + [0, 0], + ], + o: [ + [0, 0], + [0, 0], + [0, 0], + [0, 0], + ], + v: [ + [12.5, -86], + [-78.625, -86], + [-70.75, 22.875], + [61.5, -39.5], + ], + c: true, + }, + ix: 2, + }, + nm: 'Path 1', + mn: 'ADBE Vector Shape - Group', + hd: false, + }, + { + ty: 'rd', + nm: 'Round Corners 1', + r: { a: 0, k: 10, ix: 1 }, + ix: 2, + mn: 'ADBE Vector Filter - RC', + hd: false, + }, + { + ty: 'st', + c: { a: 0, k: [0, 0.423528992896, 1, 1], ix: 3 }, + o: { a: 0, k: 0, ix: 4 }, + w: { a: 0, k: 7, ix: 5 }, + lc: 1, + lj: 1, + ml: 4, + bm: 0, + nm: 'Stroke 1', + mn: 'ADBE Vector Graphic - Stroke', + hd: false, + }, + { + ty: 'gf', + o: { a: 0, k: 100, ix: 10 }, + r: 1, + bm: 0, + g: { + p: 3, + k: { + a: 0, + k: [ + 0, 0.02, 0.309, 0.741, 0.5, 0.085, + 0.244, 0.659, 1, 0.149, 0.179, 0.576, + ], + ix: 9, + }, + }, + s: { a: 0, k: [-76, -81], ix: 5 }, + e: { a: 0, k: [-0.5, -14], ix: 6 }, + t: 1, + nm: 'Gradient Fill 1', + mn: 'ADBE Vector Graphic - G-Fill', + hd: false, + }, + { + ty: 'tr', + p: { a: 0, k: [0, 0], ix: 2 }, + a: { a: 0, k: [0, 0], ix: 1 }, + s: { a: 0, k: [100, 100], ix: 3 }, + r: { a: 0, k: 0, ix: 6 }, + o: { a: 0, k: 100, ix: 7 }, + sk: { a: 0, k: 0, ix: 4 }, + sa: { a: 0, k: 0, ix: 5 }, + nm: 'Transform', + }, + ], + nm: 'Shape 1', + np: 4, + cix: 2, + bm: 0, + ix: 1, + mn: 'ADBE Vector Group', + hd: false, + }, + ], + ip: 0, + op: 386.999977966587, + st: 0, + bm: 0, + }, + ], + markers: [], +}; From 52054ccf42ac06181e8d4d5aab5bd53e6802204d Mon Sep 17 00:00:00 2001 From: roggc Date: Tue, 18 Jan 2022 12:25:15 +0100 Subject: [PATCH 27/74] change color of the border in the animation --- src/Containers/DropArea/DropArea.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx index 40524843..237aad5d 100644 --- a/src/Containers/DropArea/DropArea.tsx +++ b/src/Containers/DropArea/DropArea.tsx @@ -127,7 +127,7 @@ const DropAreaBox = styled.div< background-position: left 15px top, right 15px bottom , left bottom 15px , right top 15px; } } - background-image: linear-gradient(90deg, #3399ff 50%, transparent 50%), linear-gradient(90deg, #3399ff 50%, transparent 50%), linear-gradient(0deg, #3399ff 50%, transparent 50%), linear-gradient(0deg, #3399ff 50%, transparent 50%); + background-image: linear-gradient(90deg, ${theme.colors.occupancyStatusColors.Occupied} 50%, transparent 50%), linear-gradient(90deg, ${theme.colors.occupancyStatusColors.Occupied} 50%, transparent 50%), linear-gradient(0deg, ${theme.colors.occupancyStatusColors.Occupied} 50%, transparent 50%), linear-gradient(0deg, ${theme.colors.occupancyStatusColors.Occupied} 50%, transparent 50%); background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px; background-position: left top, right bottom, left bottom, right top; From f24220daab9bacf6b473dbb3c5ba025148a66545 Mon Sep 17 00:00:00 2001 From: roggc Date: Tue, 18 Jan 2022 12:34:28 +0100 Subject: [PATCH 28/74] make height of the lottie equal to height of the icon --- src/Containers/DropArea/DropArea.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx index 237aad5d..e05f026f 100644 --- a/src/Containers/DropArea/DropArea.tsx +++ b/src/Containers/DropArea/DropArea.tsx @@ -58,7 +58,7 @@ export const DropArea: React.FC = ({ const getLottieAnimationOrIcon = (isDragEnter: boolean): JSX.Element => { if (isDragEnter) - return ; + return ; return ; }; From fdfb68a715ab02bf22b92b87ff6e5b0344d1a6f0 Mon Sep 17 00:00:00 2001 From: roggc Date: Tue, 18 Jan 2022 15:11:44 +0100 Subject: [PATCH 29/74] remove story and set opacity for isDisabled state --- src/Containers/DropArea/DropArea.stories.tsx | 7 ---- src/Containers/DropArea/DropArea.tsx | 36 +++++++++++++++----- 2 files changed, 27 insertions(+), 16 deletions(-) diff --git a/src/Containers/DropArea/DropArea.stories.tsx b/src/Containers/DropArea/DropArea.stories.tsx index 21d02da8..aebcb60c 100644 --- a/src/Containers/DropArea/DropArea.stories.tsx +++ b/src/Containers/DropArea/DropArea.stories.tsx @@ -15,13 +15,6 @@ export default { } as Meta; export const Basic: Story = (args) => ; -export const OnClickPreventDefault = Basic.bind({}); -OnClickPreventDefault.args = { - ...Basic.args, - onClick: (e: React.MouseEvent) => { - e.preventDefault(); - }, -}; export const BigWidth = Basic.bind({}); BigWidth.args = { ...Basic.args, diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx index e05f026f..6a6659f0 100644 --- a/src/Containers/DropArea/DropArea.tsx +++ b/src/Containers/DropArea/DropArea.tsx @@ -11,6 +11,15 @@ import Dropzone, { import Lottie from 'react-lottie'; import { animationData } from './animationData'; +const ICON_OPACITY=0.7; +const OPACITY_WHEN_DISABLED=0.4; +const ICON_HEIGHT=60; +const DIFFERENCE_BETWEEN_ICON_HEIGHT_AND_LOTTIE_HEIGHT=2; + +/** + * options for the lottie animation that occurs instead of + * the icon when dragging over the dropArea component + */ const lottieOptions = { loop: true, autoplay: true, @@ -58,7 +67,7 @@ export const DropArea: React.FC = ({ const getLottieAnimationOrIcon = (isDragEnter: boolean): JSX.Element => { if (isDragEnter) - return ; + return ; return ; }; @@ -69,7 +78,11 @@ export const DropArea: React.FC = ({ return ( {() => ( - + {getLottieAnimationOrIcon(isDragActive)} {message} @@ -90,8 +103,11 @@ export const DropArea: React.FC = ({ ); }; -const RootDiv = styled.div` +const RootDiv = styled.div<{ isDisabled: boolean }>` width: fit-content; + ${({ isDisabled }): string => ` + ${isDisabled ? `opacity:${OPACITY_WHEN_DISABLED};` : ''} + `} `; const Input = styled.input` @@ -100,7 +116,7 @@ const Input = styled.input` visibility: initial; position: absolute; z-index: 99999999; - cursor: pointer; + cursor: ${({disabled})=>disabled?'initial':'pointer'}; width: 2000px; height: 2000px; top: -1000px; @@ -162,18 +178,20 @@ const BrowseFiles = styled.div` const OrBox = styled.div` margin: 10px; font-weight: 700; - opacity: 0.7; + opacity: ${ICON_OPACITY}; color: ${({ theme }) => theme.colors.occupancyStatusColors.Occupied}; + user-select:none; `; const MessageBox = styled.div` font-weight: 700; - opacity: 0.7; + opacity: ${ICON_OPACITY}; + user-select:none; `; const Icon = styled.svg` - width: 60px; - height: 60px; - opacity: 0.6; + width: ${ICON_HEIGHT}px; + height: ${ICON_HEIGHT}px; + opacity: ${ICON_OPACITY}; color: ${({ theme }) => theme.colors.occupancyStatusColors.Occupied}; `; From 017fec279d11455bd747ae623092a881a6c404e1 Mon Sep 17 00:00:00 2001 From: roggc Date: Tue, 18 Jan 2022 20:20:04 +0100 Subject: [PATCH 30/74] do it without hacky css but without prevent default --- src/Containers/DropArea/DropArea.stories.tsx | 9 ++- src/Containers/DropArea/DropArea.tsx | 58 +++++++++++--------- 2 files changed, 41 insertions(+), 26 deletions(-) diff --git a/src/Containers/DropArea/DropArea.stories.tsx b/src/Containers/DropArea/DropArea.stories.tsx index aebcb60c..c0547c59 100644 --- a/src/Containers/DropArea/DropArea.stories.tsx +++ b/src/Containers/DropArea/DropArea.stories.tsx @@ -10,7 +10,7 @@ export default { onDragLeave: { action: 'leaving drop are' }, onDragEnter: { action: 'entering drop area' }, onDropHandler: { action: 'files dropped' }, - onClick: { action: 'you clicked!' }, + onClickHandler: { action: 'you clicked!' }, }, } as Meta; @@ -25,3 +25,10 @@ IsDisabledTrue.args = { ...Basic.args, isDisabled: true, }; +export const TestPreventDefault = Basic.bind({}); +TestPreventDefault.args = { + ...Basic.args, + onClick: (e:React.MouseEvent) => { + e.preventDefault(); + }, +}; diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx index 6a6659f0..d0970fe7 100644 --- a/src/Containers/DropArea/DropArea.tsx +++ b/src/Containers/DropArea/DropArea.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React,{useEffect} from 'react'; import styled from 'styled-components'; import { CloudUploadAlt } from '@styled-icons/fa-solid/CloudUploadAlt'; import { MainInterface, Main } from '@Utils/BaseStyles'; @@ -34,7 +34,7 @@ export interface IDropAreaProps React.HTMLAttributes { message?: string; buttonText?: string; - onClick?: React.MouseEventHandler | undefined; + onClickHandler?: (this: GlobalEventHandlers, ev: MouseEvent) => any;// React.MouseEventHandler | undefined; onDragEnter?: React.DragEventHandler | undefined; onDragLeave?: React.DragEventHandler | undefined; onDropHandler?: @@ -51,14 +51,14 @@ export interface IDropAreaProps export const DropArea: React.FC = ({ message = 'Drag & Drop your files here', buttonText = 'Browse Files', - onClick = () => null, + onClickHandler = () => null, onDragEnter = () => null, onDragLeave = () => null, onDropHandler = () => null, isDisabled = false, ...props }): React.ReactElement => { - const { getInputProps, getRootProps, isDragActive } = useDropzone({ + const { getInputProps, getRootProps, isDragActive, inputRef } = useDropzone({ onDragEnter, onDragLeave, onDrop: onDropHandler, @@ -71,27 +71,34 @@ export const DropArea: React.FC = ({ return ; }; - const stopPropagation = (e: React.MouseEvent): void => { - e.stopPropagation(); - }; + const fireEventOnInput=()=>{ + if(inputRef.current){ + inputRef.current.dispatchEvent(new MouseEvent('click',{bubbles:false})); + } + } + + useEffect(()=>{ + if(inputRef.current){ + inputRef.current.onclick=onClickHandler; + } + },[onClickHandler]) return ( {() => ( null} isDisabled={isDisabled} > {getLottieAnimationOrIcon(isDragActive)} {message} OR - + {buttonText} - @@ -110,18 +117,18 @@ const RootDiv = styled.div<{ isDisabled: boolean }>` `} `; -const Input = styled.input` - opacity: 0; - display: initial !important; - visibility: initial; - position: absolute; - z-index: 99999999; - cursor: ${({disabled})=>disabled?'initial':'pointer'}; - width: 2000px; - height: 2000px; - top: -1000px; - left: -1000px; -`; +// const Input = styled.input` +// opacity: 0; +// display: initial !important; +// visibility: initial; +// position: absolute; +// z-index: 99999999; +// cursor: ${({disabled})=>disabled?'initial':'pointer'}; +// width: 2000px; +// height: 2000px; +// top: -1000px; +// left: -1000px; +// `; const DropAreaBox = styled.div< MainInterface & { isDragEnter: boolean; width?: number } @@ -168,11 +175,12 @@ const BrowseFiles = styled.div` padding: ${theme.dimensions.padding.default}; color: ${theme.colors.background}; `} - overflow: hidden; - position: relative; + --position: relative; + --overflow: hidden; user-select: none; width: fit-content; font-weight: 700; + cursor: pointer; `; const OrBox = styled.div` From 64bca636665ac9f01d768d4221d7b2abd725ebc3 Mon Sep 17 00:00:00 2001 From: roggc Date: Tue, 18 Jan 2022 21:09:48 +0100 Subject: [PATCH 31/74] solve height popping effect --- src/Containers/DropArea/DropArea.tsx | 60 ++++++++++++++++------------ 1 file changed, 35 insertions(+), 25 deletions(-) diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx index d0970fe7..538357f5 100644 --- a/src/Containers/DropArea/DropArea.tsx +++ b/src/Containers/DropArea/DropArea.tsx @@ -1,4 +1,4 @@ -import React,{useEffect} from 'react'; +import React, { useEffect } from 'react'; import styled from 'styled-components'; import { CloudUploadAlt } from '@styled-icons/fa-solid/CloudUploadAlt'; import { MainInterface, Main } from '@Utils/BaseStyles'; @@ -11,13 +11,12 @@ import Dropzone, { import Lottie from 'react-lottie'; import { animationData } from './animationData'; -const ICON_OPACITY=0.7; -const OPACITY_WHEN_DISABLED=0.4; -const ICON_HEIGHT=60; -const DIFFERENCE_BETWEEN_ICON_HEIGHT_AND_LOTTIE_HEIGHT=2; +const ICON_OPACITY = 0.7; +const OPACITY_WHEN_DISABLED = 0.4; +const ICON_HEIGHT = 60; /** - * options for the lottie animation that occurs instead of + * options for the lottie animation that occurs instead of * the icon when dragging over the dropArea component */ const lottieOptions = { @@ -34,7 +33,7 @@ export interface IDropAreaProps React.HTMLAttributes { message?: string; buttonText?: string; - onClickHandler?: (this: GlobalEventHandlers, ev: MouseEvent) => any;// React.MouseEventHandler | undefined; + onClickHandler?: (this: GlobalEventHandlers, ev: MouseEvent) => any; // React.MouseEventHandler | undefined; onDragEnter?: React.DragEventHandler | undefined; onDragLeave?: React.DragEventHandler | undefined; onDropHandler?: @@ -58,37 +57,47 @@ export const DropArea: React.FC = ({ isDisabled = false, ...props }): React.ReactElement => { - const { getInputProps, getRootProps, isDragActive, inputRef } = useDropzone({ - onDragEnter, - onDragLeave, - onDrop: onDropHandler, - disabled: isDisabled, - }); + const { getInputProps, getRootProps, isDragActive, inputRef } = useDropzone( + { + onDragEnter, + onDragLeave, + onDrop: onDropHandler, + disabled: isDisabled, + }, + ); const getLottieAnimationOrIcon = (isDragEnter: boolean): JSX.Element => { if (isDragEnter) - return ; + return ( + + ); return ; }; - const fireEventOnInput=()=>{ - if(inputRef.current){ - inputRef.current.dispatchEvent(new MouseEvent('click',{bubbles:false})); + const fireEventOnInput = () => { + if (inputRef.current) { + inputRef.current.dispatchEvent( + new MouseEvent('click', { bubbles: false }), + ); } - } + }; - useEffect(()=>{ - if(inputRef.current){ - inputRef.current.onclick=onClickHandler; + useEffect(() => { + if (inputRef.current) { + inputRef.current.onclick = onClickHandler; } - },[onClickHandler]) + }, [onClickHandler]); return ( {() => ( null} + onClick={() => null} isDisabled={isDisabled} > @@ -155,6 +164,7 @@ const DropAreaBox = styled.div< background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px; background-position: left top, right bottom, left bottom, right top; animation: border-dance .3s infinite linear; + border: 2px dashed ${theme.colors.background}; ` : ` border: 2px dashed ${theme.colors.occupancyStatusColors.Occupied}; @@ -188,13 +198,13 @@ const OrBox = styled.div` font-weight: 700; opacity: ${ICON_OPACITY}; color: ${({ theme }) => theme.colors.occupancyStatusColors.Occupied}; - user-select:none; + user-select: none; `; const MessageBox = styled.div` font-weight: 700; opacity: ${ICON_OPACITY}; - user-select:none; + user-select: none; `; const Icon = styled.svg` From 1fec99ef1e8bc545831040900dbf1af5ecbb2563 Mon Sep 17 00:00:00 2001 From: roggc Date: Tue, 18 Jan 2022 22:02:38 +0100 Subject: [PATCH 32/74] useCallback --- src/Containers/DropArea/DropArea.tsx | 27 +++++++++++++++------------ 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx index 538357f5..d4bab631 100644 --- a/src/Containers/DropArea/DropArea.tsx +++ b/src/Containers/DropArea/DropArea.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useCallback } from 'react'; import styled from 'styled-components'; import { CloudUploadAlt } from '@styled-icons/fa-solid/CloudUploadAlt'; import { MainInterface, Main } from '@Utils/BaseStyles'; @@ -66,17 +66,20 @@ export const DropArea: React.FC = ({ }, ); - const getLottieAnimationOrIcon = (isDragEnter: boolean): JSX.Element => { - if (isDragEnter) - return ( - - ); - return ; - }; + const getLottieAnimationOrIcon = useCallback( + (isDragEnter: boolean): JSX.Element => { + if (isDragEnter) + return ( + + ); + return ; + }, + [], + ); const fireEventOnInput = () => { if (inputRef.current) { From f6e9ea05ff0c012ac5ee091b8967003ad44ae321 Mon Sep 17 00:00:00 2001 From: roggc Date: Wed, 19 Jan 2022 10:09:13 +0100 Subject: [PATCH 33/74] putting ...props to the outer component --- src/Containers/DropArea/DropArea.stories.tsx | 7 ++++++- src/Containers/DropArea/DropArea.tsx | 16 +++++++++++----- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/src/Containers/DropArea/DropArea.stories.tsx b/src/Containers/DropArea/DropArea.stories.tsx index c0547c59..37db72c6 100644 --- a/src/Containers/DropArea/DropArea.stories.tsx +++ b/src/Containers/DropArea/DropArea.stories.tsx @@ -28,7 +28,12 @@ IsDisabledTrue.args = { export const TestPreventDefault = Basic.bind({}); TestPreventDefault.args = { ...Basic.args, - onClick: (e:React.MouseEvent) => { + onClickHandler: (e: MouseEvent) => { e.preventDefault(); }, }; +export const BigPadding = Basic.bind({}); +BigPadding.args = { + ...Basic.args, + dropAreaProps: { padding: '20px' }, +}; diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx index d4bab631..da78a3a3 100644 --- a/src/Containers/DropArea/DropArea.tsx +++ b/src/Containers/DropArea/DropArea.tsx @@ -6,7 +6,7 @@ import { flex } from '@Utils/Mixins'; import Dropzone, { useDropzone, DropEvent, - FileRejection, + FileRejection,DropzoneProps,DropzoneRef } from 'react-dropzone'; import Lottie from 'react-lottie'; import { animationData } from './animationData'; @@ -28,9 +28,10 @@ const lottieOptions = { }, }; +type DropzoneType=DropzoneProps & React.RefAttributes + export interface IDropAreaProps - extends MainInterface, - React.HTMLAttributes { + extends DropzoneType { message?: string; buttonText?: string; onClickHandler?: (this: GlobalEventHandlers, ev: MouseEvent) => any; // React.MouseEventHandler | undefined; @@ -44,7 +45,10 @@ export interface IDropAreaProps ) => void) | undefined; isDisabled?: boolean; + /** minimum width for the drop area */ width?: number; + /** props for the drop area container */ + dropAreaProps?:MainInterface&React.HTMLAttributes; } export const DropArea: React.FC = ({ @@ -55,6 +59,8 @@ export const DropArea: React.FC = ({ onDragLeave = () => null, onDropHandler = () => null, isDisabled = false, + dropAreaProps={}, + width, ...props }): React.ReactElement => { const { getInputProps, getRootProps, isDragActive, inputRef } = useDropzone( @@ -96,14 +102,14 @@ export const DropArea: React.FC = ({ }, [onClickHandler]); return ( - + {() => ( null} isDisabled={isDisabled} > - + {getLottieAnimationOrIcon(isDragActive)} {message} OR From 9ee1625f6e7f2b57a9ed8fb06d54eec4fdc24e27 Mon Sep 17 00:00:00 2001 From: roggc Date: Wed, 19 Jan 2022 22:30:17 +0100 Subject: [PATCH 34/74] solve the problem --- src/Containers/DropArea/DropArea.stories.tsx | 15 ++-- src/Containers/DropArea/DropArea.tsx | 89 ++++++++------------ 2 files changed, 41 insertions(+), 63 deletions(-) diff --git a/src/Containers/DropArea/DropArea.stories.tsx b/src/Containers/DropArea/DropArea.stories.tsx index 37db72c6..b9ded237 100644 --- a/src/Containers/DropArea/DropArea.stories.tsx +++ b/src/Containers/DropArea/DropArea.stories.tsx @@ -25,15 +25,16 @@ IsDisabledTrue.args = { ...Basic.args, isDisabled: true, }; -export const TestPreventDefault = Basic.bind({}); -TestPreventDefault.args = { - ...Basic.args, - onClickHandler: (e: MouseEvent) => { - e.preventDefault(); - }, -}; export const BigPadding = Basic.bind({}); BigPadding.args = { ...Basic.args, dropAreaProps: { padding: '20px' }, }; +export const DoNotOpenFileDialogButDoThis = Basic.bind({}); +DoNotOpenFileDialogButDoThis.args = { + ...Basic.args, + onClickHandler: (e: React.MouseEvent) => { + e.preventDefault(); + console.log('hey'); + }, +}; diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx index da78a3a3..4a300cb3 100644 --- a/src/Containers/DropArea/DropArea.tsx +++ b/src/Containers/DropArea/DropArea.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useCallback } from 'react'; +import React, { useCallback } from 'react'; import styled from 'styled-components'; import { CloudUploadAlt } from '@styled-icons/fa-solid/CloudUploadAlt'; import { MainInterface, Main } from '@Utils/BaseStyles'; @@ -6,7 +6,10 @@ import { flex } from '@Utils/Mixins'; import Dropzone, { useDropzone, DropEvent, - FileRejection,DropzoneProps,DropzoneRef + FileRejection, + DropzoneProps, + DropzoneOptions, + DropzoneRef, } from 'react-dropzone'; import Lottie from 'react-lottie'; import { animationData } from './animationData'; @@ -28,13 +31,12 @@ const lottieOptions = { }, }; -type DropzoneType=DropzoneProps & React.RefAttributes +type DropzoneType = DropzoneProps & React.RefAttributes; -export interface IDropAreaProps - extends DropzoneType { +export interface IDropAreaProps extends DropzoneType { message?: string; buttonText?: string; - onClickHandler?: (this: GlobalEventHandlers, ev: MouseEvent) => any; // React.MouseEventHandler | undefined; + onClickHandler?: React.MouseEventHandler | undefined; onDragEnter?: React.DragEventHandler | undefined; onDragLeave?: React.DragEventHandler | undefined; onDropHandler?: @@ -48,7 +50,8 @@ export interface IDropAreaProps /** minimum width for the drop area */ width?: number; /** props for the drop area container */ - dropAreaProps?:MainInterface&React.HTMLAttributes; + dropAreaProps?: MainInterface & React.HTMLAttributes; + dropzoneProps?: DropzoneOptions; } export const DropArea: React.FC = ({ @@ -59,18 +62,20 @@ export const DropArea: React.FC = ({ onDragLeave = () => null, onDropHandler = () => null, isDisabled = false, - dropAreaProps={}, + dropAreaProps = {}, width, + dropzoneProps = {}, ...props }): React.ReactElement => { - const { getInputProps, getRootProps, isDragActive, inputRef } = useDropzone( - { - onDragEnter, - onDragLeave, - onDrop: onDropHandler, - disabled: isDisabled, - }, - ); + const { getInputProps, getRootProps, isDragActive, open } = useDropzone({ + onDragEnter, + onDragLeave, + onDrop: onDropHandler, + disabled: isDisabled, + noClick: true, + noKeyboard: true, + ...dropzoneProps, + }); const getLottieAnimationOrIcon = useCallback( (isDragEnter: boolean): JSX.Element => { @@ -87,37 +92,24 @@ export const DropArea: React.FC = ({ [], ); - const fireEventOnInput = () => { - if (inputRef.current) { - inputRef.current.dispatchEvent( - new MouseEvent('click', { bubbles: false }), - ); - } - }; - - useEffect(() => { - if (inputRef.current) { - inputRef.current.onclick = onClickHandler; - } - }, [onClickHandler]); - return ( {() => ( - null} - isDisabled={isDisabled} - > - + + {getLottieAnimationOrIcon(isDragActive)} {message} OR - + {buttonText} @@ -135,19 +127,6 @@ const RootDiv = styled.div<{ isDisabled: boolean }>` `} `; -// const Input = styled.input` -// opacity: 0; -// display: initial !important; -// visibility: initial; -// position: absolute; -// z-index: 99999999; -// cursor: ${({disabled})=>disabled?'initial':'pointer'}; -// width: 2000px; -// height: 2000px; -// top: -1000px; -// left: -1000px; -// `; - const DropAreaBox = styled.div< MainInterface & { isDragEnter: boolean; width?: number } >` @@ -157,8 +136,8 @@ const DropAreaBox = styled.div< ${width ? `min-width:${width}px;` : ''} border-radius:${theme.dimensions.radius}; ${ - isDragEnter - ? ` + isDragEnter + ? ` background-color: ${theme.colors.input.success}; @keyframes border-dance { 0% { @@ -175,10 +154,10 @@ const DropAreaBox = styled.div< animation: border-dance .3s infinite linear; border: 2px dashed ${theme.colors.background}; ` - : ` + : ` border: 2px dashed ${theme.colors.occupancyStatusColors.Occupied}; ` - } +} ${ padding === undefined ? Main({ padding: theme.dimensions.padding.container, ...props }) @@ -194,8 +173,6 @@ const BrowseFiles = styled.div` padding: ${theme.dimensions.padding.default}; color: ${theme.colors.background}; `} - --position: relative; - --overflow: hidden; user-select: none; width: fit-content; font-weight: 700; From c51205b3b11bb103aa79be8664293c14973da06b Mon Sep 17 00:00:00 2001 From: roggc Date: Thu, 20 Jan 2022 20:09:07 +0100 Subject: [PATCH 35/74] kjsfks --- src/Containers/Loading/Loading.tsx | 30 ++++++++++++++++++++------ src/Containers/PanelCard/PanelCard.tsx | 21 +++++++++++------- 2 files changed, 37 insertions(+), 14 deletions(-) diff --git a/src/Containers/Loading/Loading.tsx b/src/Containers/Loading/Loading.tsx index 625999ad..0237041f 100644 --- a/src/Containers/Loading/Loading.tsx +++ b/src/Containers/Loading/Loading.tsx @@ -15,12 +15,15 @@ export interface LoadingProps MainInterface { loading?: boolean; message?: string; + /** if true, the component is not positioned absolute */ + isNotPositionedAbsolute?: boolean; } export const Loading: React.FC = ({ children, loading = false, message = 'Loading...', + isNotPositionedAbsolute = false, ...props }): React.ReactElement => { const theme = useTheme(); @@ -31,8 +34,10 @@ export const Loading: React.FC = ({ {mount ? ( <> - - {message} + + + {message} + ) : ( children @@ -58,8 +63,14 @@ const Container = styled.div< ${Main} `; -const Bar = styled.div` - ${position('absolute', '0 auto auto')} +const Bar = styled.div<{ isNotPositionedAbsolute: boolean }>` + ${({ isNotPositionedAbsolute }): string => ` + ${ + isNotPositionedAbsolute + ? position('initial', '0 auto auto') + : position('absolute', '0 auto auto') +} + `} ${flex('center')} overflow: hidden; width: 100%; @@ -93,8 +104,15 @@ const Bar = styled.div` } `; -const Text = styled.span` - ${position('absolute', '8px 8px auto auto', 0, 0, 0, 'auto')} +const Text = styled.span<{ isNotPositionedAbsolute: boolean }>` + ${({ isNotPositionedAbsolute }): string => ` +${ + isNotPositionedAbsolute + ? position('initial', '8px 8px auto auto', 0, 0, 0, 'auto') + : position('absolute', '8px 8px auto auto', 0, 0, 0, 'auto') +} +${isNotPositionedAbsolute ? flex('flex-end') : ''} +`} animation: fader 1.2s ease-in-out infinite; font-weight: bold; font-size: 0.8rem; diff --git a/src/Containers/PanelCard/PanelCard.tsx b/src/Containers/PanelCard/PanelCard.tsx index 17d0e542..97a86c69 100644 --- a/src/Containers/PanelCard/PanelCard.tsx +++ b/src/Containers/PanelCard/PanelCard.tsx @@ -18,11 +18,16 @@ export const PanelCard: React.FC = ({ isSuccessMessage = '', cancelLoadingText = 'Cancel', ...props -}): React.ReactElement => ( - -
{isFailureMessage || isLoadingMessage || isSuccessMessage}
- {isLoadingMessage && ( - - )} - -); +}): React.ReactElement => { + const renderContent=useCallback(()=>{ + + },[isFailureMessage,isLoadingMessage,isSuccessMessage]) + return ( + +
{isFailureMessage || isLoadingMessage || isSuccessMessage}
+ {isLoadingMessage && ( + + )} + + ); +} From 105dcdbe5baa012489d40921c29b33f1363543f5 Mon Sep 17 00:00:00 2001 From: roggc Date: Thu, 20 Jan 2022 20:26:15 +0100 Subject: [PATCH 36/74] working... --- src/Containers/PanelCard/PanelCard.tsx | 34 +++++++++++++++++++++++--- 1 file changed, 31 insertions(+), 3 deletions(-) diff --git a/src/Containers/PanelCard/PanelCard.tsx b/src/Containers/PanelCard/PanelCard.tsx index 97a86c69..bdae9ce6 100644 --- a/src/Containers/PanelCard/PanelCard.tsx +++ b/src/Containers/PanelCard/PanelCard.tsx @@ -1,14 +1,29 @@ import React from 'react'; +import styled from 'styled-components'; +import { StyledIcon } from 'styled-icons/types'; import { Button } from '@Inputs/Button/Button'; import { CardProps, Card } from '../Card/Card'; +enum OperationState{ + isFailure, + isSuccess, + isLoading, + isUnknown, +} + export interface IPanelCardProps extends CardProps { /** callback for cancel loading file */ onCancelLoading?: () => void; + name?:string; isFailureMessage?: string; isSuccessMessage?: string; isLoadingMessage?: string; - cancelLoadingText?: string; + cancelLoadingButtonText?: string; + operationState?:OperationState; + isSuccessIcon?:StyledIcon; + isFailureIcon?:StyledIcon; + /** icons width and height */ + iconDimensions?:number; } export const PanelCard: React.FC = ({ @@ -16,12 +31,20 @@ export const PanelCard: React.FC = ({ isFailureMessage = '', isLoadingMessage = '', isSuccessMessage = '', - cancelLoadingText = 'Cancel', + cancelLoadingButtonText = 'Cancel', + name='', + operationState=OperationState.isUnknown, + isSuccessIcon=, + isFailureIcon=, ...props }): React.ReactElement => { const renderContent=useCallback(()=>{ + switch(operationState){ + case OperationState.isFailure: + return + } - },[isFailureMessage,isLoadingMessage,isSuccessMessage]) + },[isFailureMessage,isLoadingMessage,isSuccessMessage,operationState]) return (
{isFailureMessage || isLoadingMessage || isSuccessMessage}
@@ -31,3 +54,8 @@ export const PanelCard: React.FC = ({ ); } + +const Icon=styled.svg` +width:60px; +height:60px; +` \ No newline at end of file From 2994f4fc206577b45f71e0877ef7e929384ca628 Mon Sep 17 00:00:00 2001 From: roggc Date: Thu, 20 Jan 2022 22:24:56 +0100 Subject: [PATCH 37/74] first version --- .../PanelCard/PanelCard.stories.tsx | 11 +- src/Containers/PanelCard/PanelCard.tsx | 110 +++++++++++++----- 2 files changed, 86 insertions(+), 35 deletions(-) diff --git a/src/Containers/PanelCard/PanelCard.stories.tsx b/src/Containers/PanelCard/PanelCard.stories.tsx index f492c84b..d05e5e58 100644 --- a/src/Containers/PanelCard/PanelCard.stories.tsx +++ b/src/Containers/PanelCard/PanelCard.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Meta, Story } from '@storybook/react'; -import { PanelCard, IPanelCardProps } from './PanelCard'; +import { PanelCard, IPanelCardProps,OperationState } from './PanelCard'; export default { title: 'Components/PanelCard', @@ -14,17 +14,20 @@ export const Basic: Story = (args) => ; export const PanelIsLoading = Basic.bind({}); PanelIsLoading.args = { ...Basic.args, - isLoadingMessage: 'loading file A ...', + operationState: OperationState.isLoading, + name: 'Abcd' }; export const PanelIsFailure = Basic.bind({}); PanelIsFailure.args = { ...Basic.args, - isFailureMessage: 'Something went wrong', + operationState: OperationState.isFailure, + name: 'Abcd' }; export const PanelIsSuccess = Basic.bind({}); PanelIsSuccess.args = { ...Basic.args, - isSuccessMessage: 'Completed', + operationState: OperationState.isSuccess, + name: 'Abcd' }; diff --git a/src/Containers/PanelCard/PanelCard.tsx b/src/Containers/PanelCard/PanelCard.tsx index bdae9ce6..a85a0c93 100644 --- a/src/Containers/PanelCard/PanelCard.tsx +++ b/src/Containers/PanelCard/PanelCard.tsx @@ -1,10 +1,14 @@ -import React from 'react'; +import React, { useCallback } from 'react'; import styled from 'styled-components'; import { StyledIcon } from 'styled-icons/types'; +import { CheckCircle } from '@styled-icons/fa-solid/CheckCircle'; +import { TimesCircle } from '@styled-icons/fa-solid/TimesCircle'; import { Button } from '@Inputs/Button/Button'; +import { MainTheme } from '@Themes'; import { CardProps, Card } from '../Card/Card'; +import { Loading } from '../Loading/Loading'; -enum OperationState{ +export enum OperationState { isFailure, isSuccess, isLoading, @@ -14,48 +18,92 @@ enum OperationState{ export interface IPanelCardProps extends CardProps { /** callback for cancel loading file */ onCancelLoading?: () => void; - name?:string; + /** name of the file */ + name?: string; isFailureMessage?: string; isSuccessMessage?: string; isLoadingMessage?: string; cancelLoadingButtonText?: string; - operationState?:OperationState; - isSuccessIcon?:StyledIcon; - isFailureIcon?:StyledIcon; + operationState?: OperationState; + isSuccessIcon?: StyledIcon; + isFailureIcon?: StyledIcon; + isSuccessIconColor?:string; + isFailureIconColor?:string; /** icons width and height */ - iconDimensions?:number; + iconHeight?: number; } export const PanelCard: React.FC = ({ onCancelLoading = () => null, - isFailureMessage = '', - isLoadingMessage = '', - isSuccessMessage = '', + isFailureMessage = 'Something went wrong', + isSuccessMessage = 'Completed', cancelLoadingButtonText = 'Cancel', - name='', - operationState=OperationState.isUnknown, - isSuccessIcon=, - isFailureIcon=, + name = '', + isLoadingMessage = `Loading file ${name}...`, + operationState = OperationState.isUnknown, + isSuccessIcon = CheckCircle, + isFailureIcon = TimesCircle, + iconHeight = 35, + isSuccessIconColor=MainTheme.colors.statusColors.green, + isFailureIconColor=MainTheme.colors.statusColors.red, ...props }): React.ReactElement => { - const renderContent=useCallback(()=>{ - switch(operationState){ - case OperationState.isFailure: - return + const renderContent = useCallback((): React.ReactNode => { + switch (operationState) { + case OperationState.isFailure: + return ( +
+ + {isFailureMessage} +
+ ); + case OperationState.isSuccess: + return ( +
+ + {isSuccessMessage} +
+ ); + case OperationState.isLoading: + return ( +
+ + +
+ ); + default: + return null; } + }, [ + isFailureMessage, + isLoadingMessage, + isSuccessMessage, + operationState, + onCancelLoading, + cancelLoadingButtonText, + isSuccessIcon, + isFailureIcon, + iconHeight, + isSuccessIconColor, + isFailureIconColor, + ]); + return {renderContent()}; +}; - },[isFailureMessage,isLoadingMessage,isSuccessMessage,operationState]) - return ( - -
{isFailureMessage || isLoadingMessage || isSuccessMessage}
- {isLoadingMessage && ( - - )} - - ); -} +const Icon = styled.svg<{ height: number;color?:string; }>` + height: ${({ height }) => height}px; + ${({color})=>` + ${color?`color:${color};`:''} + `} +`; -const Icon=styled.svg` -width:60px; -height:60px; +const MessageContainer=styled.span` +margin:5px; +font-weight:700; ` \ No newline at end of file From 1e86268c48f26c67a5a62138b86f40b67a4924a2 Mon Sep 17 00:00:00 2001 From: roggc Date: Fri, 21 Jan 2022 01:33:57 +0100 Subject: [PATCH 38/74] add custom buttons --- src/Containers/Loading/Loading.tsx | 8 +-- .../PanelCard/PanelCard.stories.tsx | 30 +++++++--- src/Containers/PanelCard/PanelCard.tsx | 60 ++++++++++++------- 3 files changed, 64 insertions(+), 34 deletions(-) diff --git a/src/Containers/Loading/Loading.tsx b/src/Containers/Loading/Loading.tsx index 0237041f..394fcf90 100644 --- a/src/Containers/Loading/Loading.tsx +++ b/src/Containers/Loading/Loading.tsx @@ -16,14 +16,14 @@ export interface LoadingProps loading?: boolean; message?: string; /** if true, the component is not positioned absolute */ - isNotPositionedAbsolute?: boolean; + isPartOfTheLayout?: boolean; } export const Loading: React.FC = ({ children, loading = false, message = 'Loading...', - isNotPositionedAbsolute = false, + isPartOfTheLayout = false, ...props }): React.ReactElement => { const theme = useTheme(); @@ -34,8 +34,8 @@ export const Loading: React.FC = ({ {mount ? ( <> - - + + {message} diff --git a/src/Containers/PanelCard/PanelCard.stories.tsx b/src/Containers/PanelCard/PanelCard.stories.tsx index d05e5e58..7f8b5542 100644 --- a/src/Containers/PanelCard/PanelCard.stories.tsx +++ b/src/Containers/PanelCard/PanelCard.stories.tsx @@ -1,33 +1,49 @@ import React from 'react'; import { Meta, Story } from '@storybook/react'; +import {Button} from '@Inputs/Button/Button'; import { PanelCard, IPanelCardProps,OperationState } from './PanelCard'; export default { title: 'Components/PanelCard', component: PanelCard, args: {}, - argTypes: { onCancelLoading: { action: 'clickeddd!!!' } }, } as Meta; export const Basic: Story = (args) => ; -export const PanelIsLoading = Basic.bind({}); -PanelIsLoading.args = { +export const IsLoadingPanel = Basic.bind({}); +IsLoadingPanel.args = { ...Basic.args, operationState: OperationState.isLoading, name: 'Abcd' }; -export const PanelIsFailure = Basic.bind({}); -PanelIsFailure.args = { +export const IsFailurePanel = Basic.bind({}); +IsFailurePanel.args = { ...Basic.args, operationState: OperationState.isFailure, name: 'Abcd' }; -export const PanelIsSuccess = Basic.bind({}); -PanelIsSuccess.args = { +export const IsSuccessPanel = Basic.bind({}); +IsSuccessPanel.args = { ...Basic.args, operationState: OperationState.isSuccess, name: 'Abcd' }; + +export const IsLoadingPanelWithButton= IsLoadingPanel.bind({}); +IsLoadingPanelWithButton.args={ + ...IsLoadingPanel.args, + cancelButtonOnLoading: +} +export const IsFailurePanelWithButton= IsFailurePanel.bind({}); +IsFailurePanelWithButton.args={ + ...IsFailurePanel.args, + retryButtonOnFailure: +} +export const IsSuccessPanelWithButton= IsSuccessPanel.bind({}); +IsSuccessPanelWithButton.args={ + ...IsSuccessPanel.args, + dismissButtonOnSuccess: +} \ No newline at end of file diff --git a/src/Containers/PanelCard/PanelCard.tsx b/src/Containers/PanelCard/PanelCard.tsx index a85a0c93..36ae528e 100644 --- a/src/Containers/PanelCard/PanelCard.tsx +++ b/src/Containers/PanelCard/PanelCard.tsx @@ -3,10 +3,10 @@ import styled from 'styled-components'; import { StyledIcon } from 'styled-icons/types'; import { CheckCircle } from '@styled-icons/fa-solid/CheckCircle'; import { TimesCircle } from '@styled-icons/fa-solid/TimesCircle'; -import { Button } from '@Inputs/Button/Button'; import { MainTheme } from '@Themes'; +import { flex } from '@Utils/Mixins'; import { CardProps, Card } from '../Card/Card'; -import { Loading } from '../Loading/Loading'; +import { Loading as L } from '../Loading/Loading'; export enum OperationState { isFailure, @@ -16,14 +16,11 @@ export enum OperationState { } export interface IPanelCardProps extends CardProps { - /** callback for cancel loading file */ - onCancelLoading?: () => void; /** name of the file */ name?: string; isFailureMessage?: string; isSuccessMessage?: string; isLoadingMessage?: string; - cancelLoadingButtonText?: string; operationState?: OperationState; isSuccessIcon?: StyledIcon; isFailureIcon?: StyledIcon; @@ -31,13 +28,14 @@ export interface IPanelCardProps extends CardProps { isFailureIconColor?:string; /** icons width and height */ iconHeight?: number; + dismissButtonOnSuccess?:React.ReactElement; + retryButtonOnFailure?:React.ReactElement; + cancelButtonOnLoading?:React.ReactElement; } export const PanelCard: React.FC = ({ - onCancelLoading = () => null, isFailureMessage = 'Something went wrong', isSuccessMessage = 'Completed', - cancelLoadingButtonText = 'Cancel', name = '', isLoadingMessage = `Loading file ${name}...`, operationState = OperationState.isUnknown, @@ -46,36 +44,43 @@ export const PanelCard: React.FC = ({ iconHeight = 35, isSuccessIconColor=MainTheme.colors.statusColors.green, isFailureIconColor=MainTheme.colors.statusColors.red, + retryButtonOnFailure, + cancelButtonOnLoading, + dismissButtonOnSuccess, ...props }): React.ReactElement => { const renderContent = useCallback((): React.ReactNode => { switch (operationState) { case OperationState.isFailure: return ( -
- - {isFailureMessage} -
+ +
+ + {isFailureMessage} +
+ {retryButtonOnFailure} + ); case OperationState.isSuccess: return ( -
- - {isSuccessMessage} -
+ +
+ + {isSuccessMessage} +
+ {dismissButtonOnSuccess} + ); case OperationState.isLoading: return ( -
+ - -
+ {cancelButtonOnLoading} + ); default: return null; @@ -85,13 +90,14 @@ export const PanelCard: React.FC = ({ isLoadingMessage, isSuccessMessage, operationState, - onCancelLoading, - cancelLoadingButtonText, isSuccessIcon, isFailureIcon, iconHeight, isSuccessIconColor, isFailureIconColor, + cancelButtonOnLoading, + retryButtonOnFailure, + dismissButtonOnSuccess, ]); return {renderContent()}; }; @@ -106,4 +112,12 @@ const Icon = styled.svg<{ height: number;color?:string; }>` const MessageContainer=styled.span` margin:5px; font-weight:700; +` + +const ContentContainer=styled.div` +${flex('space-between')} +` + +const Loading=styled(L)` +flex:1; ` \ No newline at end of file From aa38b3985cba09b64efeb375a0c725f6662cf55c Mon Sep 17 00:00:00 2001 From: roggc Date: Fri, 21 Jan 2022 09:12:45 +0100 Subject: [PATCH 39/74] remove duplicate code --- src/Containers/PanelCard/PanelCard.tsx | 80 ++++++++++++++------------ 1 file changed, 42 insertions(+), 38 deletions(-) diff --git a/src/Containers/PanelCard/PanelCard.tsx b/src/Containers/PanelCard/PanelCard.tsx index 36ae528e..684bb259 100644 --- a/src/Containers/PanelCard/PanelCard.tsx +++ b/src/Containers/PanelCard/PanelCard.tsx @@ -24,13 +24,13 @@ export interface IPanelCardProps extends CardProps { operationState?: OperationState; isSuccessIcon?: StyledIcon; isFailureIcon?: StyledIcon; - isSuccessIconColor?:string; - isFailureIconColor?:string; + isSuccessIconColor?: string; + isFailureIconColor?: string; /** icons width and height */ iconHeight?: number; - dismissButtonOnSuccess?:React.ReactElement; - retryButtonOnFailure?:React.ReactElement; - cancelButtonOnLoading?:React.ReactElement; + dismissButtonOnSuccess?: React.ReactElement; + retryButtonOnFailure?: React.ReactElement; + cancelButtonOnLoading?: React.ReactElement; } export const PanelCard: React.FC = ({ @@ -42,35 +42,38 @@ export const PanelCard: React.FC = ({ isSuccessIcon = CheckCircle, isFailureIcon = TimesCircle, iconHeight = 35, - isSuccessIconColor=MainTheme.colors.statusColors.green, - isFailureIconColor=MainTheme.colors.statusColors.red, + isSuccessIconColor = MainTheme.colors.statusColors.green, + isFailureIconColor = MainTheme.colors.statusColors.red, retryButtonOnFailure, cancelButtonOnLoading, dismissButtonOnSuccess, ...props }): React.ReactElement => { + const renderContentForIsSuccessAndIsFailure = useCallback( + ( + icon: StyledIcon, + height: number, + color: string, + message: string, + button: React.ReactElement|undefined, + ) => ( + +
+ + {message} +
+ {button} + + ), + [], + ); + const renderContent = useCallback((): React.ReactNode => { switch (operationState) { case OperationState.isFailure: - return ( - -
- - {isFailureMessage} -
- {retryButtonOnFailure} - - ); + return renderContentForIsSuccessAndIsFailure(isFailureIcon,iconHeight,isFailureIconColor,isFailureMessage,retryButtonOnFailure); case OperationState.isSuccess: - return ( - -
- - {isSuccessMessage} -
- {dismissButtonOnSuccess} - - ); + return renderContentForIsSuccessAndIsFailure(isSuccessIcon,iconHeight,isSuccessIconColor,isSuccessMessage,dismissButtonOnSuccess); case OperationState.isLoading: return ( @@ -98,26 +101,27 @@ export const PanelCard: React.FC = ({ cancelButtonOnLoading, retryButtonOnFailure, dismissButtonOnSuccess, + renderContentForIsSuccessAndIsFailure, ]); return {renderContent()}; }; -const Icon = styled.svg<{ height: number;color?:string; }>` +const Icon = styled.svg<{ height: number; color?: string }>` height: ${({ height }) => height}px; - ${({color})=>` - ${color?`color:${color};`:''} + ${({ color }) => ` + ${color ? `color:${color};` : ''} `} `; -const MessageContainer=styled.span` -margin:5px; -font-weight:700; -` +const MessageContainer = styled.span` + margin: 5px; + font-weight: 700; +`; -const ContentContainer=styled.div` -${flex('space-between')} -` +const ContentContainer = styled.div` + ${flex('space-between')} +`; -const Loading=styled(L)` -flex:1; -` \ No newline at end of file +const Loading = styled(L)` + flex: 1; +`; From c6fb6430643eba59bc8a8624d395ef1448d6b040 Mon Sep 17 00:00:00 2001 From: roggc Date: Fri, 21 Jan 2022 09:53:52 +0100 Subject: [PATCH 40/74] change variable name --- src/Containers/Loading/Loading.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Containers/Loading/Loading.tsx b/src/Containers/Loading/Loading.tsx index 394fcf90..b03c88d8 100644 --- a/src/Containers/Loading/Loading.tsx +++ b/src/Containers/Loading/Loading.tsx @@ -16,14 +16,14 @@ export interface LoadingProps loading?: boolean; message?: string; /** if true, the component is not positioned absolute */ - isPartOfTheLayout?: boolean; + isNavigationPageLoader?: boolean; } export const Loading: React.FC = ({ children, loading = false, message = 'Loading...', - isPartOfTheLayout = false, + isNavigationPageLoader = false, ...props }): React.ReactElement => { const theme = useTheme(); @@ -34,8 +34,8 @@ export const Loading: React.FC = ({ {mount ? ( <> - - + + {message} From dc6355c3429d98133caa0c320ae856de56ac62eb Mon Sep 17 00:00:00 2001 From: roggc Date: Fri, 21 Jan 2022 17:23:28 +0100 Subject: [PATCH 41/74] align icons vertically --- src/Containers/PanelCard/PanelCard.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/Containers/PanelCard/PanelCard.tsx b/src/Containers/PanelCard/PanelCard.tsx index 684bb259..5af1f385 100644 --- a/src/Containers/PanelCard/PanelCard.tsx +++ b/src/Containers/PanelCard/PanelCard.tsx @@ -58,10 +58,10 @@ export const PanelCard: React.FC = ({ button: React.ReactElement|undefined, ) => ( -
+ {message} -
+ {button} ), @@ -79,7 +79,7 @@ export const PanelCard: React.FC = ({ {cancelButtonOnLoading} @@ -125,3 +125,7 @@ const ContentContainer = styled.div` const Loading = styled(L)` flex: 1; `; + +const IconContainer=styled.div` +${flex('center')} +` From 0bc74ec72db35c410d0b903d9b0d37cdb6a5d138 Mon Sep 17 00:00:00 2001 From: roggc Date: Fri, 21 Jan 2022 19:12:56 +0100 Subject: [PATCH 42/74] add icon file type mapping --- package-lock.json | 69 ++++++++++++++++++- package.json | 2 + .../PanelCard/PanelCard.stories.tsx | 10 ++- src/Containers/PanelCard/PanelCard.tsx | 24 ++++++- 4 files changed, 99 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8f78e38c..2488e4ef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@cheapreats/react-ui", - "version": "2.4.53", + "version": "2.4.54", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@cheapreats/react-ui", - "version": "2.4.53", + "version": "2.4.54", "hasInstallScript": true, "license": "MIT", "dependencies": { @@ -17,6 +17,7 @@ "@types/emoji-mart": "^3.0.4", "@types/heremaps": "^3.1.3", "@types/react-beautiful-dnd": "^13.0.0", + "@types/react-file-icon": "^1.0.1", "@types/react-input-mask": "^3.0.0", "@types/react-lottie": "^1.2.6", "@types/recharts": "^1.8.20", @@ -34,6 +35,7 @@ "react-draggable": "^4.4.4", "react-dropzone": "^11.4.2", "react-easy-flip": "^4.0.1", + "react-file-icon": "^1.1.0", "react-image-crop": "^9.0.4", "react-input-mask": "^3.0.0-alpha.2", "react-lottie": "^1.2.3", @@ -10843,6 +10845,14 @@ "@types/react": "*" } }, + "node_modules/@types/react-file-icon": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@types/react-file-icon/-/react-file-icon-1.0.1.tgz", + "integrity": "sha512-QTdYCkYXzh/PfKEIwcPxRdaPQkii5R4Ke7fcO+KB++IDPbYAG1jj+ulEcTA7pRf0gZ5jAvjWcTXBJJRtfYHjlw==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/react-input-mask": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@types/react-input-mask/-/react-input-mask-3.0.0.tgz", @@ -24159,6 +24169,11 @@ "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=", "dev": true }, + "node_modules/lodash.uniqueid": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/lodash.uniqueid/-/lodash.uniqueid-4.0.1.tgz", + "integrity": "sha1-MmjyanyI5PSxdY1nknGBTjH6WyY=" + }, "node_modules/log-symbols": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz", @@ -27674,6 +27689,20 @@ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" }, + "node_modules/react-file-icon": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/react-file-icon/-/react-file-icon-1.1.0.tgz", + "integrity": "sha512-jYf+wrrdngnXal8UbgQMEsjJ2lshzAC2/gIBbPh1ui68rLe4P215cshqkur4IK+FTPNWUGbm0yuYwpYSSJUksg==", + "dependencies": { + "lodash.uniqueid": "^4.0.1", + "prop-types": "^15.7.2", + "tinycolor2": "^1.4.2" + }, + "peerDependencies": { + "react": "^17.0.0 || ^16.2.0", + "react-dom": "^17.0.0 || ^16.2.0" + } + }, "node_modules/react-helmet-async": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-1.2.2.tgz", @@ -31085,6 +31114,14 @@ "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" }, + "node_modules/tinycolor2": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", + "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==", + "engines": { + "node": "*" + } + }, "node_modules/tmpl": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz", @@ -41394,6 +41431,14 @@ "@types/react": "*" } }, + "@types/react-file-icon": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@types/react-file-icon/-/react-file-icon-1.0.1.tgz", + "integrity": "sha512-QTdYCkYXzh/PfKEIwcPxRdaPQkii5R4Ke7fcO+KB++IDPbYAG1jj+ulEcTA7pRf0gZ5jAvjWcTXBJJRtfYHjlw==", + "requires": { + "@types/react": "*" + } + }, "@types/react-input-mask": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@types/react-input-mask/-/react-input-mask-3.0.0.tgz", @@ -52052,6 +52097,11 @@ "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=", "dev": true }, + "lodash.uniqueid": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/lodash.uniqueid/-/lodash.uniqueid-4.0.1.tgz", + "integrity": "sha1-MmjyanyI5PSxdY1nknGBTjH6WyY=" + }, "log-symbols": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz", @@ -54802,6 +54852,16 @@ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" }, + "react-file-icon": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/react-file-icon/-/react-file-icon-1.1.0.tgz", + "integrity": "sha512-jYf+wrrdngnXal8UbgQMEsjJ2lshzAC2/gIBbPh1ui68rLe4P215cshqkur4IK+FTPNWUGbm0yuYwpYSSJUksg==", + "requires": { + "lodash.uniqueid": "^4.0.1", + "prop-types": "^15.7.2", + "tinycolor2": "^1.4.2" + } + }, "react-helmet-async": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-1.2.2.tgz", @@ -57601,6 +57661,11 @@ "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" }, + "tinycolor2": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz", + "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==" + }, "tmpl": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz", diff --git a/package.json b/package.json index 908e659f..64c74029 100644 --- a/package.json +++ b/package.json @@ -134,6 +134,7 @@ "@types/emoji-mart": "^3.0.4", "@types/heremaps": "^3.1.3", "@types/react-beautiful-dnd": "^13.0.0", + "@types/react-file-icon": "^1.0.1", "@types/react-input-mask": "^3.0.0", "@types/react-lottie": "^1.2.6", "@types/recharts": "^1.8.20", @@ -151,6 +152,7 @@ "react-draggable": "^4.4.4", "react-dropzone": "^11.4.2", "react-easy-flip": "^4.0.1", + "react-file-icon": "^1.1.0", "react-image-crop": "^9.0.4", "react-input-mask": "^3.0.0-alpha.2", "react-lottie": "^1.2.3", diff --git a/src/Containers/PanelCard/PanelCard.stories.tsx b/src/Containers/PanelCard/PanelCard.stories.tsx index 7f8b5542..f1dfa5b8 100644 --- a/src/Containers/PanelCard/PanelCard.stories.tsx +++ b/src/Containers/PanelCard/PanelCard.stories.tsx @@ -15,7 +15,13 @@ export const IsLoadingPanel = Basic.bind({}); IsLoadingPanel.args = { ...Basic.args, operationState: OperationState.isLoading, - name: 'Abcd' + name: 'Abcd.sdf sdf. sdf .sdf .pdf' +}; + +export const IsLoadingPanelBis = Basic.bind({}); +IsLoadingPanelBis.args = { + ...IsLoadingPanel.args, + name: 'Abcd.sdf sdf. sdf .sdf .docx' }; export const IsFailurePanel = Basic.bind({}); @@ -35,7 +41,7 @@ IsSuccessPanel.args = { export const IsLoadingPanelWithButton= IsLoadingPanel.bind({}); IsLoadingPanelWithButton.args={ ...IsLoadingPanel.args, - cancelButtonOnLoading: + cancelButtonOnLoading: } export const IsFailurePanelWithButton= IsFailurePanel.bind({}); IsFailurePanelWithButton.args={ diff --git a/src/Containers/PanelCard/PanelCard.tsx b/src/Containers/PanelCard/PanelCard.tsx index 5af1f385..eaae0d1a 100644 --- a/src/Containers/PanelCard/PanelCard.tsx +++ b/src/Containers/PanelCard/PanelCard.tsx @@ -1,13 +1,18 @@ -import React, { useCallback } from 'react'; +import React, { useCallback,useMemo } from 'react'; import styled from 'styled-components'; import { StyledIcon } from 'styled-icons/types'; import { CheckCircle } from '@styled-icons/fa-solid/CheckCircle'; import { TimesCircle } from '@styled-icons/fa-solid/TimesCircle'; +import {FileIcon, defaultStyles} from 'react-file-icon'; import { MainTheme } from '@Themes'; import { flex } from '@Utils/Mixins'; import { CardProps, Card } from '../Card/Card'; import { Loading as L } from '../Loading/Loading'; +const LAST_ARRAY_ELEMENT=-1; +const FILE_EXTENSION_SEPARATOR='.'; +const FIRST_ARRAY_ELEMENT=0; + export enum OperationState { isFailure, isSuccess, @@ -31,6 +36,8 @@ export interface IPanelCardProps extends CardProps { dismissButtonOnSuccess?: React.ReactElement; retryButtonOnFailure?: React.ReactElement; cancelButtonOnLoading?: React.ReactElement; + /** horizontal margin for is loading bar */ + isLoadingSpace?:number; } export const PanelCard: React.FC = ({ @@ -47,8 +54,11 @@ export const PanelCard: React.FC = ({ retryButtonOnFailure, cancelButtonOnLoading, dismissButtonOnSuccess, + isLoadingSpace=20, ...props }): React.ReactElement => { + const extension=useMemo(():string=>name.split(FILE_EXTENSION_SEPARATOR).slice(LAST_ARRAY_ELEMENT)[FIRST_ARRAY_ELEMENT],[name]) + const renderContentForIsSuccessAndIsFailure = useCallback( ( icon: StyledIcon, @@ -77,10 +87,14 @@ export const PanelCard: React.FC = ({ case OperationState.isLoading: return ( + + + {cancelButtonOnLoading} @@ -102,6 +116,7 @@ export const PanelCard: React.FC = ({ retryButtonOnFailure, dismissButtonOnSuccess, renderContentForIsSuccessAndIsFailure, + isLoadingSpace, ]); return {renderContent()}; }; @@ -122,10 +137,15 @@ const ContentContainer = styled.div` ${flex('space-between')} `; -const Loading = styled(L)` +const Loading = styled(L)<{horizontalMargin:number}>` flex: 1; + margin:0 ${({horizontalMargin})=>horizontalMargin}px; `; const IconContainer=styled.div` ${flex('center')} ` + +const FileIconContainer=styled.div<{width:number}>` +width:${({width})=>width}px; +` From efdcd8bf61dc0943c821295f62ec73ad8a97c078 Mon Sep 17 00:00:00 2001 From: roggc Date: Sat, 22 Jan 2022 04:08:34 +0100 Subject: [PATCH 43/74] create panelListWrapper component --- .../PanelListWrapper.stories.tsx | 53 +++++++++++++++++++ .../PanelListWrapper/PanelListWrapper.tsx | 16 ++++++ src/Containers/index.ts | 3 +- 3 files changed, 71 insertions(+), 1 deletion(-) create mode 100644 src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx create mode 100644 src/Containers/PanelListWrapper/PanelListWrapper.tsx diff --git a/src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx b/src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx new file mode 100644 index 00000000..8f5e8cd9 --- /dev/null +++ b/src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import { MainTheme } from '@Themes/MainTheme'; +import { PanelListWrapper, IPanelListWrapperProps } from './PanelListWrapper'; +import {OperationState} from '../PanelCard/PanelCard'; + +export default { + title: 'Components/PanelListWrapper', + component: PanelListWrapper, + args: { + }, +} as Meta; + +export const Basic: Story = (args) => ( + +); + +export const WithSomePanels= Basic.bind({}); +WithSomePanels.args={ + ...Basic.args, + panels:[ + { + name:'fileA.doc', + operationState:OperationState.isLoading, + }, + { + name:'fileA.pdf', + operationState:OperationState.isLoading, + }, + { + name:'fileB.pdf', + operationState:OperationState.isSuccess, + } + ] +} + +export const WithVerticalSpacingBetweenPanels= WithSomePanels.bind({}); +WithVerticalSpacingBetweenPanels.args= { + ...WithSomePanels.args, + verticalSpacing:10, +} + +export const WithStyle= WithVerticalSpacingBetweenPanels.bind({}); +WithStyle.args= { + ...WithVerticalSpacingBetweenPanels.args, + style:{ + width:'250px', + border:`2px solid ${MainTheme.colors.statusColors.red}`, + borderRadius:MainTheme.dimensions.radius, + padding:MainTheme.dimensions.padding.container, + backgroundColor:MainTheme.colors.background, + } +} \ No newline at end of file diff --git a/src/Containers/PanelListWrapper/PanelListWrapper.tsx b/src/Containers/PanelListWrapper/PanelListWrapper.tsx new file mode 100644 index 00000000..dbaef708 --- /dev/null +++ b/src/Containers/PanelListWrapper/PanelListWrapper.tsx @@ -0,0 +1,16 @@ +import { MainInterface } from '@Utils/BaseStyles'; +import React from 'react'; +import styled from 'styled-components'; +import {PanelCard,IPanelCardProps} from '../PanelCard/PanelCard'; + +export interface IPanelListWrapperProps extends MainInterface,React.HTMLAttributes{ + panels?:IPanelCardProps[]; + /** vertical space between panels in px */ + verticalSpacing?:number; +} + +export const PanelListWrapper:React.FC=({panels,verticalSpacing,...props})=> + {panels?.map((panel)=>)} + + +const PanelListWrapperBox=styled.div`` diff --git a/src/Containers/index.ts b/src/Containers/index.ts index c263e999..d30cb4d5 100644 --- a/src/Containers/index.ts +++ b/src/Containers/index.ts @@ -99,4 +99,5 @@ export * from './StoreSelector/StoreSelector'; export * from './ScreenFlashEffect/ScreenFlashEffect'; export * from './PanelCard/PanelCard'; export * from './SpecialText/SpecialText'; -export * from './DropArea/DropArea'; \ No newline at end of file +export * from './DropArea/DropArea'; +export * from './PanelListWrapper/PanelListWrapper'; From 5dcec5d4edcab1b73567eebee590dec1e3ec8312 Mon Sep 17 00:00:00 2001 From: roggc Date: Sat, 22 Jan 2022 04:17:49 +0100 Subject: [PATCH 44/74] add Main to styled component --- .../PanelListWrapper/PanelListWrapper.stories.tsx | 4 ++-- src/Containers/PanelListWrapper/PanelListWrapper.tsx | 6 ++++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx b/src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx index 8f5e8cd9..420fd1d3 100644 --- a/src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx +++ b/src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx @@ -47,7 +47,7 @@ WithStyle.args= { width:'250px', border:`2px solid ${MainTheme.colors.statusColors.red}`, borderRadius:MainTheme.dimensions.radius, - padding:MainTheme.dimensions.padding.container, backgroundColor:MainTheme.colors.background, - } + }, + padding:MainTheme.dimensions.padding.container, } \ No newline at end of file diff --git a/src/Containers/PanelListWrapper/PanelListWrapper.tsx b/src/Containers/PanelListWrapper/PanelListWrapper.tsx index dbaef708..bbadac22 100644 --- a/src/Containers/PanelListWrapper/PanelListWrapper.tsx +++ b/src/Containers/PanelListWrapper/PanelListWrapper.tsx @@ -1,4 +1,4 @@ -import { MainInterface } from '@Utils/BaseStyles'; +import { MainInterface,Main } from '@Utils/BaseStyles'; import React from 'react'; import styled from 'styled-components'; import {PanelCard,IPanelCardProps} from '../PanelCard/PanelCard'; @@ -13,4 +13,6 @@ export const PanelListWrapper:React.FC=({panels,vertical {panels?.map((panel)=>)} -const PanelListWrapperBox=styled.div`` +const PanelListWrapperBox=styled.div` +${(props)=>Main({...props})} +` From 39cc38379d06c6558ba10380ba124aeb226d5668 Mon Sep 17 00:00:00 2001 From: roggc Date: Sat, 22 Jan 2022 16:49:54 +0100 Subject: [PATCH 45/74] add sequentially panels capability --- .../PanelListWrapper.stories.tsx | 74 ++++++++++++++-- .../PanelListWrapper/PanelListWrapper.tsx | 86 ++++++++++++++++--- 2 files changed, 143 insertions(+), 17 deletions(-) diff --git a/src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx b/src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx index 420fd1d3..94849b82 100644 --- a/src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx +++ b/src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx @@ -1,13 +1,17 @@ -import React from 'react'; +import React,{useState,useEffect} from 'react'; +import styled from 'styled-components'; import { Meta, Story } from '@storybook/react'; import { MainTheme } from '@Themes/MainTheme'; +import {Button} from '@Inputs/Button/Button'; +import {flex} from '@Utils/Mixins' import { PanelListWrapper, IPanelListWrapperProps } from './PanelListWrapper'; -import {OperationState} from '../PanelCard/PanelCard'; +import {OperationState,IPanelCardProps} from '../PanelCard/PanelCard'; export default { title: 'Components/PanelListWrapper', component: PanelListWrapper, args: { + panels:[], }, } as Meta; @@ -30,6 +34,17 @@ WithSomePanels.args={ { name:'fileB.pdf', operationState:OperationState.isSuccess, + }, { + name:'fileB.doc', + operationState:OperationState.isLoading, + }, + { + name:'fileC.pdf', + operationState:OperationState.isLoading, + }, + { + name:'fileC.docx', + operationState:OperationState.isSuccess, } ] } @@ -40,8 +55,8 @@ WithVerticalSpacingBetweenPanels.args= { verticalSpacing:10, } -export const WithStyle= WithVerticalSpacingBetweenPanels.bind({}); -WithStyle.args= { +export const WithStyleAndAnimated= WithVerticalSpacingBetweenPanels.bind({}); +WithStyleAndAnimated.args= { ...WithVerticalSpacingBetweenPanels.args, style:{ width:'250px', @@ -50,4 +65,53 @@ WithStyle.args= { backgroundColor:MainTheme.colors.background, }, padding:MainTheme.dimensions.padding.container, -} \ No newline at end of file + isAnimatedPanels:true, +} + +export const AddPanelsProgressivelyAndWithAnimation: Story = (args) =>{ + const [panels,setPanels]=useState([]); + const [counter,setCounter]=useState(0); + + const incrementCounter=()=>{ + setCounter(prev=>prev+1); + } + + const incrementCounterBy=(times:number)=>{ + setCounter(prev=>prev+times); + } + + const getPanel=(num:number):IPanelCardProps=>({name:`file${num}.pdf`,operationState:OperationState.isLoading}) + + const addPanel=()=>{ + setPanels(prev=>[...prev,getPanel(counter)]) + incrementCounter(); + } + + const addPanels=()=>{ + setPanels(prev=>[...prev,getPanel(counter),getPanel(counter+1),getPanel(counter+2)]) + incrementCounterBy(3); + } + + const clearPanels=()=>{ + setPanels([]); + setCounter(0); + } + + // this is for development, to check + useEffect(()=>{ + console.log(panels); + },[panels]) + + return
+ + + + + + +
+} + +const ButtonsContainer=styled.div` +${flex()} +` \ No newline at end of file diff --git a/src/Containers/PanelListWrapper/PanelListWrapper.tsx b/src/Containers/PanelListWrapper/PanelListWrapper.tsx index bbadac22..59e0874b 100644 --- a/src/Containers/PanelListWrapper/PanelListWrapper.tsx +++ b/src/Containers/PanelListWrapper/PanelListWrapper.tsx @@ -1,18 +1,80 @@ -import { MainInterface,Main } from '@Utils/BaseStyles'; -import React from 'react'; +import { MainInterface, Main } from '@Utils/BaseStyles'; +import React, { useEffect, useState, useMemo, useRef } from 'react'; import styled from 'styled-components'; -import {PanelCard,IPanelCardProps} from '../PanelCard/PanelCard'; +import { PanelCard, IPanelCardProps } from '../PanelCard/PanelCard'; -export interface IPanelListWrapperProps extends MainInterface,React.HTMLAttributes{ - panels?:IPanelCardProps[]; +const DELAY_IN_MOUNTING_IN_MS = 100; + +export interface IPanelListWrapperProps + extends MainInterface, + React.HTMLAttributes { + panels: IPanelCardProps[]; /** vertical space between panels in px */ - verticalSpacing?:number; + verticalSpacing?: number; + /** if true panels are added sequentially to the list */ + isAnimatedPanels?: boolean; } -export const PanelListWrapper:React.FC=({panels,verticalSpacing,...props})=> - {panels?.map((panel)=>)} - +export const PanelListWrapper: React.FC = ({ + panels, + verticalSpacing, + isAnimatedPanels = false, + ...props +}) => { + const internalPanels = useAnimatedPanels(panels); + const panelsToMap = useMemo( + (): IPanelCardProps[] => (isAnimatedPanels ? internalPanels : panels), + [isAnimatedPanels, internalPanels, panels], + ); + + return ( + + {panelsToMap.map((panel) => ( + + ))} + + ); +}; + +const PanelListWrapperBox = styled.div` + ${(props) => Main({ ...props })} +`; + +const useAnimatedPanels = (panels:IPanelCardProps[]) => { + const [internalPanels, setInternalPanels] = useState([]); + const [panelIndex, setPanelIndex] = useState(0); + const panelsLength = useMemo(() => panels.length, [panels]); + const previousPanelsLength = useRef(); + + const incrementPanelIndex = () => { + setPanelIndex((prev) => prev + 1); + }; + + useEffect(() => { + if (!previousPanelsLength.current||previousPanelsLength.current < panelsLength) { + setTimeout(() => { + const panelToAdd = panels[panelIndex]; + if (panelToAdd) { + setInternalPanels((prev) => [...prev, panelToAdd]); + incrementPanelIndex(); + } else { + previousPanelsLength.current = panelsLength; + } + }, DELAY_IN_MOUNTING_IN_MS); + } else { + setInternalPanels((prev) => + prev.filter((internalPanel) => + panels.some((panel) => panel.name === internalPanel.name), + ), + ); + setPanelIndex(0); + previousPanelsLength.current = 0; + } + }, [panelsLength, panels, panelIndex]); -const PanelListWrapperBox=styled.div` -${(props)=>Main({...props})} -` + return internalPanels; +}; From 5fd713e07d543fa14370c5cd71dee501bb394494 Mon Sep 17 00:00:00 2001 From: roggc Date: Sat, 22 Jan 2022 18:48:09 +0100 Subject: [PATCH 46/74] a little bit of refactor --- .../PanelListWrapper.stories.tsx | 31 +++++-------- .../PanelListWrapper/PanelListWrapper.tsx | 46 ++++++++++--------- 2 files changed, 36 insertions(+), 41 deletions(-) diff --git a/src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx b/src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx index 94849b82..4c85cf5a 100644 --- a/src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx +++ b/src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx @@ -55,8 +55,8 @@ WithVerticalSpacingBetweenPanels.args= { verticalSpacing:10, } -export const WithStyleAndAnimated= WithVerticalSpacingBetweenPanels.bind({}); -WithStyleAndAnimated.args= { +export const WithStyleAndAddPanelsSequentially= WithVerticalSpacingBetweenPanels.bind({}); +WithStyleAndAddPanelsSequentially.args= { ...WithVerticalSpacingBetweenPanels.args, style:{ width:'250px', @@ -65,36 +65,28 @@ WithStyleAndAnimated.args= { backgroundColor:MainTheme.colors.background, }, padding:MainTheme.dimensions.padding.container, - isAnimatedPanels:true, + isAddPanelsSequentially:true, } -export const AddPanelsProgressivelyAndWithAnimation: Story = (args) =>{ +export const CustomControlsToAddAndRemovePanelsSequentially: Story = (args) =>{ const [panels,setPanels]=useState([]); - const [counter,setCounter]=useState(0); - - const incrementCounter=()=>{ - setCounter(prev=>prev+1); - } - - const incrementCounterBy=(times:number)=>{ - setCounter(prev=>prev+times); - } const getPanel=(num:number):IPanelCardProps=>({name:`file${num}.pdf`,operationState:OperationState.isLoading}) const addPanel=()=>{ - setPanels(prev=>[...prev,getPanel(counter)]) - incrementCounter(); + setPanels(prev=>[...prev,getPanel(panels.length)]) } const addPanels=()=>{ - setPanels(prev=>[...prev,getPanel(counter),getPanel(counter+1),getPanel(counter+2)]) - incrementCounterBy(3); + setPanels(prev=>[...prev,getPanel(panels.length),getPanel(panels.length+1),getPanel(panels.length+2)]) } const clearPanels=()=>{ setPanels([]); - setCounter(0); + } + + const removeOnePanel=()=>{ + setPanels(prev=>prev.slice(0,prev.length-1)) } // this is for development, to check @@ -107,8 +99,9 @@ export const AddPanelsProgressivelyAndWithAnimation: Storyadd one panel + - +
} diff --git a/src/Containers/PanelListWrapper/PanelListWrapper.tsx b/src/Containers/PanelListWrapper/PanelListWrapper.tsx index 59e0874b..5cfef332 100644 --- a/src/Containers/PanelListWrapper/PanelListWrapper.tsx +++ b/src/Containers/PanelListWrapper/PanelListWrapper.tsx @@ -3,8 +3,6 @@ import React, { useEffect, useState, useMemo, useRef } from 'react'; import styled from 'styled-components'; import { PanelCard, IPanelCardProps } from '../PanelCard/PanelCard'; -const DELAY_IN_MOUNTING_IN_MS = 100; - export interface IPanelListWrapperProps extends MainInterface, React.HTMLAttributes { @@ -12,19 +10,22 @@ export interface IPanelListWrapperProps /** vertical space between panels in px */ verticalSpacing?: number; /** if true panels are added sequentially to the list */ - isAnimatedPanels?: boolean; + isAddPanelsSequentially?: boolean; + /** dealy in ms for each panel added to the list */ + delaySequentially?:number; } export const PanelListWrapper: React.FC = ({ panels, verticalSpacing, - isAnimatedPanels = false, + isAddPanelsSequentially = false, + delaySequentially=100, ...props }) => { - const internalPanels = useAnimatedPanels(panels); + const internalPanels = useSequentiallyAddedPanels(panels,delaySequentially); const panelsToMap = useMemo( - (): IPanelCardProps[] => (isAnimatedPanels ? internalPanels : panels), - [isAnimatedPanels, internalPanels, panels], + (): IPanelCardProps[] => (isAddPanelsSequentially ? internalPanels : panels), + [isAddPanelsSequentially, internalPanels, panels], ); return ( @@ -44,37 +45,38 @@ const PanelListWrapperBox = styled.div` ${(props) => Main({ ...props })} `; -const useAnimatedPanels = (panels:IPanelCardProps[]) => { +/** + * add panels sequentially + * @param panels {IPanelCardProps[]} array of panel properties + * @param delay {number} delay in ms to add each panel to the list + * @returns {IPanelCardProps[]} array of panels to be added sequentially + */ +const useSequentiallyAddedPanels = (panels:IPanelCardProps[],delay:number) => { const [internalPanels, setInternalPanels] = useState([]); - const [panelIndex, setPanelIndex] = useState(0); - const panelsLength = useMemo(() => panels.length, [panels]); + const [panelIndexCounter, setPanelIndexCounter] = useState(0); const previousPanelsLength = useRef(); - const incrementPanelIndex = () => { - setPanelIndex((prev) => prev + 1); - }; - useEffect(() => { - if (!previousPanelsLength.current||previousPanelsLength.current < panelsLength) { + if (!previousPanelsLength.current||previousPanelsLength.current < panels.length) { setTimeout(() => { - const panelToAdd = panels[panelIndex]; + const panelToAdd = panels[panelIndexCounter]; if (panelToAdd) { setInternalPanels((prev) => [...prev, panelToAdd]); - incrementPanelIndex(); + setPanelIndexCounter((prev) => prev + 1); } else { - previousPanelsLength.current = panelsLength; + previousPanelsLength.current = panels.length; } - }, DELAY_IN_MOUNTING_IN_MS); + }, delay); } else { setInternalPanels((prev) => prev.filter((internalPanel) => panels.some((panel) => panel.name === internalPanel.name), ), ); - setPanelIndex(0); - previousPanelsLength.current = 0; + setPanelIndexCounter(panels.length); + previousPanelsLength.current = panels.length; } - }, [panelsLength, panels, panelIndex]); + }, [panels, panelIndexCounter,delay]); return internalPanels; }; From 236ea8c2b6bd540287c406733a0a544ef47f8034 Mon Sep 17 00:00:00 2001 From: roggc Date: Sat, 22 Jan 2022 20:00:12 +0100 Subject: [PATCH 47/74] extract hook into another file --- .../PanelListWrapper/PanelListWrapper.tsx | 51 ++++--------------- .../useSequentiallyAddedPanels.ts | 38 ++++++++++++++ 2 files changed, 48 insertions(+), 41 deletions(-) create mode 100644 src/Containers/PanelListWrapper/useSequentiallyAddedPanels.ts diff --git a/src/Containers/PanelListWrapper/PanelListWrapper.tsx b/src/Containers/PanelListWrapper/PanelListWrapper.tsx index 5cfef332..bc4b5648 100644 --- a/src/Containers/PanelListWrapper/PanelListWrapper.tsx +++ b/src/Containers/PanelListWrapper/PanelListWrapper.tsx @@ -1,7 +1,8 @@ import { MainInterface, Main } from '@Utils/BaseStyles'; -import React, { useEffect, useState, useMemo, useRef } from 'react'; +import React, { useMemo } from 'react'; import styled from 'styled-components'; import { PanelCard, IPanelCardProps } from '../PanelCard/PanelCard'; +import { useSequentiallyAddedPanels } from './useSequentiallyAddedPanels'; export interface IPanelListWrapperProps extends MainInterface, @@ -12,19 +13,23 @@ export interface IPanelListWrapperProps /** if true panels are added sequentially to the list */ isAddPanelsSequentially?: boolean; /** dealy in ms for each panel added to the list */ - delaySequentially?:number; + delaySequentially?: number; } export const PanelListWrapper: React.FC = ({ panels, verticalSpacing, isAddPanelsSequentially = false, - delaySequentially=100, + delaySequentially = 100, ...props }) => { - const internalPanels = useSequentiallyAddedPanels(panels,delaySequentially); + const internalPanels = useSequentiallyAddedPanels( + panels, + delaySequentially, + ); const panelsToMap = useMemo( - (): IPanelCardProps[] => (isAddPanelsSequentially ? internalPanels : panels), + (): IPanelCardProps[] => + isAddPanelsSequentially ? internalPanels : panels, [isAddPanelsSequentially, internalPanels, panels], ); @@ -44,39 +49,3 @@ export const PanelListWrapper: React.FC = ({ const PanelListWrapperBox = styled.div` ${(props) => Main({ ...props })} `; - -/** - * add panels sequentially - * @param panels {IPanelCardProps[]} array of panel properties - * @param delay {number} delay in ms to add each panel to the list - * @returns {IPanelCardProps[]} array of panels to be added sequentially - */ -const useSequentiallyAddedPanels = (panels:IPanelCardProps[],delay:number) => { - const [internalPanels, setInternalPanels] = useState([]); - const [panelIndexCounter, setPanelIndexCounter] = useState(0); - const previousPanelsLength = useRef(); - - useEffect(() => { - if (!previousPanelsLength.current||previousPanelsLength.current < panels.length) { - setTimeout(() => { - const panelToAdd = panels[panelIndexCounter]; - if (panelToAdd) { - setInternalPanels((prev) => [...prev, panelToAdd]); - setPanelIndexCounter((prev) => prev + 1); - } else { - previousPanelsLength.current = panels.length; - } - }, delay); - } else { - setInternalPanels((prev) => - prev.filter((internalPanel) => - panels.some((panel) => panel.name === internalPanel.name), - ), - ); - setPanelIndexCounter(panels.length); - previousPanelsLength.current = panels.length; - } - }, [panels, panelIndexCounter,delay]); - - return internalPanels; -}; diff --git a/src/Containers/PanelListWrapper/useSequentiallyAddedPanels.ts b/src/Containers/PanelListWrapper/useSequentiallyAddedPanels.ts new file mode 100644 index 00000000..47e022fc --- /dev/null +++ b/src/Containers/PanelListWrapper/useSequentiallyAddedPanels.ts @@ -0,0 +1,38 @@ +import { useEffect,useRef,useState } from "react"; +import { IPanelCardProps } from "../PanelCard/PanelCard"; + +/** + * add panels sequentially + * @param panels {IPanelCardProps[]} array of panel properties + * @param delay {number} delay in ms to add each panel to the list + * @returns {IPanelCardProps[]} array of panels to be added sequentially + */ +export const useSequentiallyAddedPanels = (panels:IPanelCardProps[],delay:number):IPanelCardProps[] => { + const [internalPanels, setInternalPanels] = useState([]); + const [panelIndexCounter, setPanelIndexCounter] = useState(0); + const previousPanelsLength = useRef(); + + useEffect(() => { + if (!previousPanelsLength.current||previousPanelsLength.current < panels.length) { + setTimeout(() => { + const panelToAdd = panels[panelIndexCounter]; + if (panelToAdd) { + setInternalPanels((prev) => [...prev, panelToAdd]); + setPanelIndexCounter((prev) => prev + 1); + } else { + previousPanelsLength.current = panels.length; + } + }, delay); + } else { + setInternalPanels((prev) => + prev.filter((internalPanel) => + panels.some((panel) => panel.name === internalPanel.name), + ), + ); + setPanelIndexCounter(panels.length); + previousPanelsLength.current = panels.length; + } + }, [panels, panelIndexCounter,delay]); + + return internalPanels; +}; From fca3f60a8e57e4930472d3a71e26644c7132f793 Mon Sep 17 00:00:00 2001 From: roggc Date: Sat, 22 Jan 2022 20:02:45 +0100 Subject: [PATCH 48/74] change name to a variable --- src/Containers/PanelListWrapper/PanelListWrapper.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Containers/PanelListWrapper/PanelListWrapper.tsx b/src/Containers/PanelListWrapper/PanelListWrapper.tsx index bc4b5648..ef2f6a26 100644 --- a/src/Containers/PanelListWrapper/PanelListWrapper.tsx +++ b/src/Containers/PanelListWrapper/PanelListWrapper.tsx @@ -23,14 +23,14 @@ export const PanelListWrapper: React.FC = ({ delaySequentially = 100, ...props }) => { - const internalPanels = useSequentiallyAddedPanels( + const sequentiallyPanels = useSequentiallyAddedPanels( panels, delaySequentially, ); const panelsToMap = useMemo( (): IPanelCardProps[] => - isAddPanelsSequentially ? internalPanels : panels, - [isAddPanelsSequentially, internalPanels, panels], + isAddPanelsSequentially ? sequentiallyPanels : panels, + [isAddPanelsSequentially, sequentiallyPanels, panels], ); return ( From 223bd9c107e682d20a88b0475ddd25ed8614fc07 Mon Sep 17 00:00:00 2001 From: roggc Date: Sat, 22 Jan 2022 20:11:21 +0100 Subject: [PATCH 49/74] with fade in effect --- .../PanelListWrapper/PanelListWrapper.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/Containers/PanelListWrapper/PanelListWrapper.tsx b/src/Containers/PanelListWrapper/PanelListWrapper.tsx index ef2f6a26..f81d671f 100644 --- a/src/Containers/PanelListWrapper/PanelListWrapper.tsx +++ b/src/Containers/PanelListWrapper/PanelListWrapper.tsx @@ -14,6 +14,8 @@ export interface IPanelListWrapperProps isAddPanelsSequentially?: boolean; /** dealy in ms for each panel added to the list */ delaySequentially?: number; + /** fade in in ms */ + fadeIn?:number; } export const PanelListWrapper: React.FC = ({ @@ -21,6 +23,7 @@ export const PanelListWrapper: React.FC = ({ verticalSpacing, isAddPanelsSequentially = false, delaySequentially = 100, + fadeIn=1000, ...props }) => { const sequentiallyPanels = useSequentiallyAddedPanels( @@ -36,10 +39,11 @@ export const PanelListWrapper: React.FC = ({ return ( {panelsToMap.map((panel) => ( - ))} @@ -49,3 +53,11 @@ export const PanelListWrapper: React.FC = ({ const PanelListWrapperBox = styled.div` ${(props) => Main({ ...props })} `; + +const PanelCardFadeIn=styled(PanelCard)<{fadeIn:number}>` +@keyframes fadein{ + from{opacity:0;} + to{opacity:1;} +} +animation:fadein ${({fadeIn})=>fadeIn}ms; +` From 536eccbf7e510801787a434ea185fd9c93134f61 Mon Sep 17 00:00:00 2001 From: roggc Date: Sun, 23 Jan 2022 00:48:37 +0100 Subject: [PATCH 50/74] add fadeout effect --- .../PanelListWrapper/PanelListWrapper.tsx | 50 ++++++++++++---- src/Containers/PanelListWrapper/useFadeOut.ts | 59 +++++++++++++++++++ .../useSequentiallyAddedPanels.ts | 22 ++++--- 3 files changed, 112 insertions(+), 19 deletions(-) create mode 100644 src/Containers/PanelListWrapper/useFadeOut.ts diff --git a/src/Containers/PanelListWrapper/PanelListWrapper.tsx b/src/Containers/PanelListWrapper/PanelListWrapper.tsx index f81d671f..f8186cec 100644 --- a/src/Containers/PanelListWrapper/PanelListWrapper.tsx +++ b/src/Containers/PanelListWrapper/PanelListWrapper.tsx @@ -3,6 +3,7 @@ import React, { useMemo } from 'react'; import styled from 'styled-components'; import { PanelCard, IPanelCardProps } from '../PanelCard/PanelCard'; import { useSequentiallyAddedPanels } from './useSequentiallyAddedPanels'; +import { useFadeOut } from './useFadeOut'; export interface IPanelListWrapperProps extends MainInterface, @@ -15,7 +16,7 @@ export interface IPanelListWrapperProps /** dealy in ms for each panel added to the list */ delaySequentially?: number; /** fade in in ms */ - fadeIn?:number; + fadeIn?: number; } export const PanelListWrapper: React.FC = ({ @@ -23,7 +24,7 @@ export const PanelListWrapper: React.FC = ({ verticalSpacing, isAddPanelsSequentially = false, delaySequentially = 100, - fadeIn=1000, + fadeIn = 1000, ...props }) => { const sequentiallyPanels = useSequentiallyAddedPanels( @@ -35,15 +36,24 @@ export const PanelListWrapper: React.FC = ({ isAddPanelsSequentially ? sequentiallyPanels : panels, [isAddPanelsSequentially, sequentiallyPanels, panels], ); + const [fadeOutPanels, setFadeOutPanels] = useFadeOut(panelsToMap); + + const removePanelsIsShownIsFalse = () => { + setFadeOutPanels((prev) => + prev.filter((fadeOutPanel) => fadeOutPanel.isShown), + ); + }; return ( - {panelsToMap.map((panel) => ( - ( + ))} @@ -54,10 +64,28 @@ const PanelListWrapperBox = styled.div` ${(props) => Main({ ...props })} `; -const PanelCardFadeIn=styled(PanelCard)<{fadeIn:number}>` -@keyframes fadein{ - from{opacity:0;} - to{opacity:1;} -} -animation:fadein ${({fadeIn})=>fadeIn}ms; -` +const PanelCardFadeIn = styled(PanelCard)<{ fadeIn: number }>` + @keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + animation: fadein ${({ fadeIn }) => fadeIn}ms; +`; + +const PanelCardFadeOut = styled(PanelCardFadeIn)<{ isShown: boolean }>` + @keyframes fadeout { + from { + opacity: 1; + } + to { + opacity: 0; + } + } + ${({ isShown }) => ` +${isShown ? '' : 'animation:fadeout 1000ms;'} +`} +`; diff --git a/src/Containers/PanelListWrapper/useFadeOut.ts b/src/Containers/PanelListWrapper/useFadeOut.ts new file mode 100644 index 00000000..d9c4fedc --- /dev/null +++ b/src/Containers/PanelListWrapper/useFadeOut.ts @@ -0,0 +1,59 @@ +import { useEffect, useState, useRef, Dispatch, SetStateAction } from 'react'; +import { IPanelCardProps } from '../PanelCard/PanelCard'; + +export const useFadeOut = ( + panels: IPanelCardProps[], +): readonly [ + { + panel: IPanelCardProps; + isShown: boolean; + }[], + Dispatch< + SetStateAction< + { + panel: IPanelCardProps; + isShown: boolean; + }[] + > + >, +] => { + const previousPanelsAmmount = useRef(); + const [internalPanels, setInternalPanels] = useState( + panels.map((panel) => ({ panel, isShown: true })), + ); + + useEffect(() => { + if ( + previousPanelsAmmount.current === undefined || + previousPanelsAmmount.current > panels.length + ) { + setInternalPanels((prev) => + prev.map((internalPanel) => { + if ( + !panels.some( + (panel) => panel.name === internalPanel.panel.name, + ) + ) { + return { ...internalPanel, isShown: false }; + } + return internalPanel; + }), + ); + } else { + const panelsToAdd = panels.filter( + (panel) => + !internalPanels.some( + (internalPanel) => + internalPanel.panel.name === panel.name, + ), + ); + setInternalPanels((prev) => [ + ...prev, + ...panelsToAdd.map((panel) => ({ panel, isShown: true })), + ]); + } + previousPanelsAmmount.current = panels.length; + }, [panels]); + + return [internalPanels, setInternalPanels] as const; +}; diff --git a/src/Containers/PanelListWrapper/useSequentiallyAddedPanels.ts b/src/Containers/PanelListWrapper/useSequentiallyAddedPanels.ts index 47e022fc..255cabfa 100644 --- a/src/Containers/PanelListWrapper/useSequentiallyAddedPanels.ts +++ b/src/Containers/PanelListWrapper/useSequentiallyAddedPanels.ts @@ -1,19 +1,25 @@ -import { useEffect,useRef,useState } from "react"; -import { IPanelCardProps } from "../PanelCard/PanelCard"; +import { useEffect, useRef, useState } from 'react'; +import { IPanelCardProps } from '../PanelCard/PanelCard'; /** * add panels sequentially - * @param panels {IPanelCardProps[]} array of panel properties - * @param delay {number} delay in ms to add each panel to the list + * @param panels {IPanelCardProps[]} array of panel properties + * @param delay {number} delay in ms to add each panel to the list * @returns {IPanelCardProps[]} array of panels to be added sequentially */ -export const useSequentiallyAddedPanels = (panels:IPanelCardProps[],delay:number):IPanelCardProps[] => { +export const useSequentiallyAddedPanels = ( + panels: IPanelCardProps[], + delay: number, +): IPanelCardProps[] => { const [internalPanels, setInternalPanels] = useState([]); const [panelIndexCounter, setPanelIndexCounter] = useState(0); - const previousPanelsLength = useRef(); + const previousPanelsLength = useRef(); useEffect(() => { - if (!previousPanelsLength.current||previousPanelsLength.current < panels.length) { + if ( + !previousPanelsLength.current || + previousPanelsLength.current < panels.length + ) { setTimeout(() => { const panelToAdd = panels[panelIndexCounter]; if (panelToAdd) { @@ -32,7 +38,7 @@ export const useSequentiallyAddedPanels = (panels:IPanelCardProps[],delay:number setPanelIndexCounter(panels.length); previousPanelsLength.current = panels.length; } - }, [panels, panelIndexCounter,delay]); + }, [panels, panelIndexCounter, delay]); return internalPanels; }; From 750c2c9311d870dcd1d0b87aef2025cacccd330b Mon Sep 17 00:00:00 2001 From: roggc Date: Sun, 23 Jan 2022 00:55:19 +0100 Subject: [PATCH 51/74] add fadeOut time property --- .../PanelListWrapper/PanelListWrapper.tsx | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/Containers/PanelListWrapper/PanelListWrapper.tsx b/src/Containers/PanelListWrapper/PanelListWrapper.tsx index f8186cec..c80f55ad 100644 --- a/src/Containers/PanelListWrapper/PanelListWrapper.tsx +++ b/src/Containers/PanelListWrapper/PanelListWrapper.tsx @@ -14,23 +14,23 @@ export interface IPanelListWrapperProps /** if true panels are added sequentially to the list */ isAddPanelsSequentially?: boolean; /** dealy in ms for each panel added to the list */ - delaySequentially?: number; + delay?: number; /** fade in in ms */ fadeIn?: number; + /** fade out in ms */ + fadeOut?: number; } export const PanelListWrapper: React.FC = ({ panels, verticalSpacing, isAddPanelsSequentially = false, - delaySequentially = 100, + delay = 100, fadeIn = 1000, + fadeOut = 1000, ...props }) => { - const sequentiallyPanels = useSequentiallyAddedPanels( - panels, - delaySequentially, - ); + const sequentiallyPanels = useSequentiallyAddedPanels(panels, delay); const panelsToMap = useMemo( (): IPanelCardProps[] => isAddPanelsSequentially ? sequentiallyPanels : panels, @@ -52,6 +52,7 @@ export const PanelListWrapper: React.FC = ({ {...panel} margin={`${verticalSpacing}px 0`} fadeIn={fadeIn} + fadeOut={fadeOut} isShown={isShown} onAnimationEnd={removePanelsIsShownIsFalse} /> @@ -76,7 +77,10 @@ const PanelCardFadeIn = styled(PanelCard)<{ fadeIn: number }>` animation: fadein ${({ fadeIn }) => fadeIn}ms; `; -const PanelCardFadeOut = styled(PanelCardFadeIn)<{ isShown: boolean }>` +const PanelCardFadeOut = styled(PanelCardFadeIn)<{ + isShown: boolean; + fadeOut: number; +}>` @keyframes fadeout { from { opacity: 1; @@ -85,7 +89,7 @@ const PanelCardFadeOut = styled(PanelCardFadeIn)<{ isShown: boolean }>` opacity: 0; } } - ${({ isShown }) => ` -${isShown ? '' : 'animation:fadeout 1000ms;'} + ${({ isShown, fadeOut }) => ` +${isShown ? '' : `animation:fadeout ${fadeOut}ms;`} `} `; From b20ccbbe203fcf49c60f55387c473ce7438ab0f1 Mon Sep 17 00:00:00 2001 From: roggc Date: Sun, 23 Jan 2022 01:16:13 +0100 Subject: [PATCH 52/74] use comparison with undefined --- src/Containers/PanelListWrapper/useSequentiallyAddedPanels.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Containers/PanelListWrapper/useSequentiallyAddedPanels.ts b/src/Containers/PanelListWrapper/useSequentiallyAddedPanels.ts index 255cabfa..8197f209 100644 --- a/src/Containers/PanelListWrapper/useSequentiallyAddedPanels.ts +++ b/src/Containers/PanelListWrapper/useSequentiallyAddedPanels.ts @@ -17,7 +17,7 @@ export const useSequentiallyAddedPanels = ( useEffect(() => { if ( - !previousPanelsLength.current || + previousPanelsLength.current===undefined || previousPanelsLength.current < panels.length ) { setTimeout(() => { From bf874baabb7f606f958decda1efa081611c14498 Mon Sep 17 00:00:00 2001 From: roggc Date: Sun, 23 Jan 2022 01:24:16 +0100 Subject: [PATCH 53/74] refactor useFadeOut hook a little bit --- .../PanelListWrapper/PanelListWrapper.tsx | 10 ++-------- src/Containers/PanelListWrapper/useFadeOut.ts | 19 +++++++++---------- 2 files changed, 11 insertions(+), 18 deletions(-) diff --git a/src/Containers/PanelListWrapper/PanelListWrapper.tsx b/src/Containers/PanelListWrapper/PanelListWrapper.tsx index c80f55ad..6a4d95c0 100644 --- a/src/Containers/PanelListWrapper/PanelListWrapper.tsx +++ b/src/Containers/PanelListWrapper/PanelListWrapper.tsx @@ -36,13 +36,7 @@ export const PanelListWrapper: React.FC = ({ isAddPanelsSequentially ? sequentiallyPanels : panels, [isAddPanelsSequentially, sequentiallyPanels, panels], ); - const [fadeOutPanels, setFadeOutPanels] = useFadeOut(panelsToMap); - - const removePanelsIsShownIsFalse = () => { - setFadeOutPanels((prev) => - prev.filter((fadeOutPanel) => fadeOutPanel.isShown), - ); - }; + const [fadeOutPanels, onAnimationEnd] = useFadeOut(panelsToMap); return ( @@ -54,7 +48,7 @@ export const PanelListWrapper: React.FC = ({ fadeIn={fadeIn} fadeOut={fadeOut} isShown={isShown} - onAnimationEnd={removePanelsIsShownIsFalse} + onAnimationEnd={onAnimationEnd} /> ))} diff --git a/src/Containers/PanelListWrapper/useFadeOut.ts b/src/Containers/PanelListWrapper/useFadeOut.ts index d9c4fedc..b0c9089d 100644 --- a/src/Containers/PanelListWrapper/useFadeOut.ts +++ b/src/Containers/PanelListWrapper/useFadeOut.ts @@ -1,4 +1,4 @@ -import { useEffect, useState, useRef, Dispatch, SetStateAction } from 'react'; +import { useEffect, useState, useRef } from 'react'; import { IPanelCardProps } from '../PanelCard/PanelCard'; export const useFadeOut = ( @@ -8,14 +8,7 @@ export const useFadeOut = ( panel: IPanelCardProps; isShown: boolean; }[], - Dispatch< - SetStateAction< - { - panel: IPanelCardProps; - isShown: boolean; - }[] - > - >, + () => void, ] => { const previousPanelsAmmount = useRef(); const [internalPanels, setInternalPanels] = useState( @@ -55,5 +48,11 @@ export const useFadeOut = ( previousPanelsAmmount.current = panels.length; }, [panels]); - return [internalPanels, setInternalPanels] as const; + const removePanelsIsShownIsFalse = () => { + setInternalPanels((prev) => + prev.filter((fadeOutPanel) => fadeOutPanel.isShown), + ); + }; + + return [internalPanels, removePanelsIsShownIsFalse] as const; }; From 78ce65c3078e3027be0d44ab203cb95051c82c1c Mon Sep 17 00:00:00 2001 From: roggc Date: Sun, 23 Jan 2022 01:34:22 +0100 Subject: [PATCH 54/74] jsdoc --- src/Containers/PanelListWrapper/PanelListWrapper.tsx | 4 ++++ src/Containers/PanelListWrapper/useFadeOut.ts | 5 +++++ 2 files changed, 9 insertions(+) diff --git a/src/Containers/PanelListWrapper/PanelListWrapper.tsx b/src/Containers/PanelListWrapper/PanelListWrapper.tsx index 6a4d95c0..9f78567a 100644 --- a/src/Containers/PanelListWrapper/PanelListWrapper.tsx +++ b/src/Containers/PanelListWrapper/PanelListWrapper.tsx @@ -21,6 +21,10 @@ export interface IPanelListWrapperProps fadeOut?: number; } +/** + * panel list wrapper with fade in and fade out effect of panels + * in the list and sequentially added panels option + */ export const PanelListWrapper: React.FC = ({ panels, verticalSpacing, diff --git a/src/Containers/PanelListWrapper/useFadeOut.ts b/src/Containers/PanelListWrapper/useFadeOut.ts index b0c9089d..ea4a9e34 100644 --- a/src/Containers/PanelListWrapper/useFadeOut.ts +++ b/src/Containers/PanelListWrapper/useFadeOut.ts @@ -1,6 +1,11 @@ import { useEffect, useState, useRef } from 'react'; import { IPanelCardProps } from '../PanelCard/PanelCard'; +/** + * adds fading out capabilities to panels + * @param panels {IPanelCardProps[]} - panels to be prepared for fade out capability + * @returns {{panel:IPanelCardProps;isShown:boolean;}[]} tuple with panels fade out prepared and onEndAnimation function + */ export const useFadeOut = ( panels: IPanelCardProps[], ): readonly [ From a0ce00c4c28575a3596c15b2c401e924b5d5d1f0 Mon Sep 17 00:00:00 2001 From: roggc Date: Sun, 23 Jan 2022 01:52:54 +0100 Subject: [PATCH 55/74] change name to styled component --- src/Containers/PanelListWrapper/PanelListWrapper.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Containers/PanelListWrapper/PanelListWrapper.tsx b/src/Containers/PanelListWrapper/PanelListWrapper.tsx index 9f78567a..c1bd1c4a 100644 --- a/src/Containers/PanelListWrapper/PanelListWrapper.tsx +++ b/src/Containers/PanelListWrapper/PanelListWrapper.tsx @@ -45,7 +45,7 @@ export const PanelListWrapper: React.FC = ({ return ( {fadeOutPanels.map(({ panel, isShown }) => ( - ` animation: fadein ${({ fadeIn }) => fadeIn}ms; `; -const PanelCardFadeOut = styled(PanelCardFadeIn)<{ +const PanelCardFadeInFadeOut = styled(PanelCardFadeIn)<{ isShown: boolean; fadeOut: number; }>` From eecb24b8b56841923606054c317b10b28f5652ea Mon Sep 17 00:00:00 2001 From: roggc Date: Sun, 23 Jan 2022 17:55:33 +0100 Subject: [PATCH 56/74] change name to a prop --- .../PanelListWrapper/PanelListWrapper.stories.tsx | 4 ++-- src/Containers/PanelListWrapper/PanelListWrapper.tsx | 8 ++++---- src/Containers/PanelListWrapper/useFadeOut.ts | 2 ++ 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx b/src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx index 4c85cf5a..9aabd5c9 100644 --- a/src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx +++ b/src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx @@ -65,7 +65,7 @@ WithStyleAndAddPanelsSequentially.args= { backgroundColor:MainTheme.colors.background, }, padding:MainTheme.dimensions.padding.container, - isAddPanelsSequentially:true, + isSequentially:true, } export const CustomControlsToAddAndRemovePanelsSequentially: Story = (args) =>{ @@ -101,7 +101,7 @@ export const CustomControlsToAddAndRemovePanelsSequentially: Storyclear panels - +
} diff --git a/src/Containers/PanelListWrapper/PanelListWrapper.tsx b/src/Containers/PanelListWrapper/PanelListWrapper.tsx index c1bd1c4a..22051dd5 100644 --- a/src/Containers/PanelListWrapper/PanelListWrapper.tsx +++ b/src/Containers/PanelListWrapper/PanelListWrapper.tsx @@ -12,7 +12,7 @@ export interface IPanelListWrapperProps /** vertical space between panels in px */ verticalSpacing?: number; /** if true panels are added sequentially to the list */ - isAddPanelsSequentially?: boolean; + isSequentially?: boolean; /** dealy in ms for each panel added to the list */ delay?: number; /** fade in in ms */ @@ -28,7 +28,7 @@ export interface IPanelListWrapperProps export const PanelListWrapper: React.FC = ({ panels, verticalSpacing, - isAddPanelsSequentially = false, + isSequentially = false, delay = 100, fadeIn = 1000, fadeOut = 1000, @@ -37,8 +37,8 @@ export const PanelListWrapper: React.FC = ({ const sequentiallyPanels = useSequentiallyAddedPanels(panels, delay); const panelsToMap = useMemo( (): IPanelCardProps[] => - isAddPanelsSequentially ? sequentiallyPanels : panels, - [isAddPanelsSequentially, sequentiallyPanels, panels], + isSequentially ? sequentiallyPanels : panels, + [isSequentially, sequentiallyPanels, panels], ); const [fadeOutPanels, onAnimationEnd] = useFadeOut(panelsToMap); diff --git a/src/Containers/PanelListWrapper/useFadeOut.ts b/src/Containers/PanelListWrapper/useFadeOut.ts index ea4a9e34..41c19869 100644 --- a/src/Containers/PanelListWrapper/useFadeOut.ts +++ b/src/Containers/PanelListWrapper/useFadeOut.ts @@ -25,6 +25,7 @@ export const useFadeOut = ( previousPanelsAmmount.current === undefined || previousPanelsAmmount.current > panels.length ) { + // remove panels marking them as isShown false setInternalPanels((prev) => prev.map((internalPanel) => { if ( @@ -38,6 +39,7 @@ export const useFadeOut = ( }), ); } else { + // add internal panels const panelsToAdd = panels.filter( (panel) => !internalPanels.some( From 4ed46ab72c757a9752074cdc1a09dc449a9bc338 Mon Sep 17 00:00:00 2001 From: ralph-dev Date: Tue, 25 Jan 2022 23:38:43 -0500 Subject: [PATCH 57/74] Organized all the components --- src/Containers/Accordion/Accordion.stories.tsx | 2 +- src/Containers/Analytics/Analytics.stories.tsx | 2 +- src/Containers/BoxComposition/BoxComposition.stories.tsx | 2 +- src/Containers/BoxComposition2/BoxComposition2.stories.tsx | 2 +- src/Containers/CRMRow/CRMRow.stories.tsx | 2 +- src/Containers/CRMTable/CRMTable.stories.tsx | 2 +- src/Containers/CapacityDisplay/CapacityDisplay.stories.tsx | 2 +- src/Containers/Card/Card.stories.tsx | 2 +- .../CarouselTestimonial/CarouselTestimonial.stories.tsx | 2 +- src/Containers/Chair/Chair.stories.tsx | 2 +- src/Containers/Chart/Chart.stories.tsx | 2 +- src/Containers/CircleTable/CircleTable.stories.tsx | 2 +- src/Containers/ClientShowCase/ClientShowCase.stories.tsx | 2 +- .../CollapsibleAccordion/CollapsibleAccordion.stories.tsx | 2 +- .../CollapsibleHeading/CollapsibleHeading.stories.tsx | 2 +- src/Containers/Coupon/Coupon.stories.tsx | 2 +- src/Containers/CreatedDate/CreatedDate.stories.tsx | 2 +- src/Containers/CustomerProfile/CustomerProfile.stories.tsx | 2 +- src/Containers/DeliveryRadius/DeliveryRadius.stories.tsx | 2 +- src/Containers/DiningReservation/DiningReservation.stories.tsx | 2 +- src/Containers/DisplayItem/DisplayItem.stories.tsx | 2 +- .../DraggableDemoFront/DraggableDemoFront.stories.tsx | 2 +- src/Containers/DropArea/DropArea.stories.tsx | 2 +- src/Containers/Dropdown/Dropdown.stories.tsx | 2 +- src/Containers/EditControlPanel/EditControlPanel.stories.tsx | 2 +- src/Containers/EditDraggableCanvas/DraggableTable.stories.tsx | 2 +- .../EditDraggableCanvas/EditDraggableCanvas.stories.tsx | 2 +- src/Containers/FeatureDisplay/FeatureDisplay.stories.tsx | 2 +- src/Containers/FeaturesCard/FeaturesCard.stories.tsx | 2 +- .../FeaturesProfileCard/FeaturedProfilesCard.stories.tsx | 2 +- src/Containers/FileUpload/FileUpload.stories.tsx | 2 +- src/Containers/FilterBox/FilterBox.stories.tsx | 2 +- src/Containers/Footnote/Footnote.stories.tsx | 2 +- src/Containers/Header/Header.stories.tsx | 2 +- src/Containers/HeaderRow/HeaderRow.stories.tsx | 2 +- src/Containers/HighlightedText/HighlightedText.stories.tsx | 2 +- .../HorizontalBarChart/HorizontalBarChart.stories.tsx | 2 +- .../HorizontalScrollList/HorizontalScrollList.stories.tsx | 2 +- .../HorizontalStoreCard/HorizontalStoreCard.stories.tsx | 2 +- src/Containers/ImageCarousel/ImageCarousel.stories.tsx | 2 +- src/Containers/InfoHeader/InfoHeader.stories.tsx | 2 +- src/Containers/InviteComponent/Invite.stories.tsx | 2 +- .../ItemsRedemptionPoints/ItemsRedemptionPoints.stories.tsx | 2 +- src/Containers/KitchenCard/KitchenCard.stories.tsx | 2 +- src/Containers/Landing/Landing.stories.tsx | 2 +- src/Containers/LeftSideBar/LeftSideBar.stories.tsx | 2 +- src/Containers/LimitedTimeBanner/LimitedTimeBanner.stories.tsx | 2 +- src/Containers/List/List.stories.tsx | 2 +- src/Containers/Loading/Loading.stories.tsx | 2 +- src/Containers/LogoListing/Logo.stories.tsx | 2 +- src/Containers/MainContainer/MainContainer.stories.tsx | 2 +- src/Containers/MenuItem/MenuItem.stories.tsx | 2 +- src/Containers/MiddleCanvas/DualSelectRadio.stories.tsx | 2 +- src/Containers/MiddleCanvas/MiddleCanvas.stories.tsx | 2 +- src/Containers/Modal/Modal.stories.tsx | 2 +- src/Containers/Navigation/Navigation.stories.tsx | 2 +- .../NotificationBubble/NotificationBubble.stories.tsx | 2 +- src/Containers/NutritionFact/NutritionFact.stories.tsx | 2 +- src/Containers/OrderItemsList/OrderItemList.stories.tsx | 2 +- src/Containers/OrderStatus/OrderStatus.stories.tsx | 2 +- src/Containers/OrderTemplate/OrderTemplate.stories.tsx | 2 +- src/Containers/OrderTotalCard/OrderTotalCard.stories.tsx | 2 +- src/Containers/OrderTracker/OrderTracker.stories.tsx | 2 +- src/Containers/OvalTable/OvalTable.stories.tsx | 2 +- src/Containers/PanelCard/PanelCard.stories.tsx | 2 +- src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx | 2 +- src/Containers/PartyInfoInput/PartyInfoInput.stories.tsx | 2 +- src/Containers/PictureCard/PictureCard.stories.tsx | 2 +- src/Containers/Popup/Popup.stories.tsx | 2 +- src/Containers/ProfileCard/ProfileCard.stories.tsx | 2 +- src/Containers/ProfileModal/ProfileModal.stories.tsx | 2 +- src/Containers/QRScan/QRScan.stories.tsx | 2 +- src/Containers/QuestionMarkHover/QuestionMarkHover.stories.tsx | 2 +- src/Containers/RankingTable/RankingTable.stories.tsx | 2 +- src/Containers/ReachIndicator/ReachIndicator.stories.tsx | 2 +- src/Containers/ReportIssue/ReportIssue.stories.tsx | 2 +- .../ReservationSideBar/ReservationSideBar.stories.tsx | 2 +- src/Containers/SaleTag/SaleTag.stories.tsx | 2 +- src/Containers/SankeyChart/SankeyChart.stories.tsx | 2 +- src/Containers/ScreenFlashEffect/ScreenFlashEffect.stories.tsx | 2 +- .../ScrollableListContent/ScrollableListContent.stories.tsx | 2 +- src/Containers/SeatingInfoInput/SeatingInfoInput.stories.tsx | 2 +- src/Containers/SelectBox/SelectBox.stories.tsx | 2 +- src/Containers/Settings/Settings.stories.tsx | 2 +- src/Containers/SettingsCard/SettingsCard.stories.tsx | 2 +- src/Containers/SignUpPopup/SignUpPopup.stories.tsx | 2 +- src/Containers/SlidingOutPanels/SlidingOutPanels.stories.tsx | 2 +- .../SoldOutCardNotification/SoldOutCardNotification.stories.tsx | 2 +- src/Containers/SquareTable/SquareTable.stories.tsx | 2 +- src/Containers/Status/Status.stories.tsx | 2 +- src/Containers/Stock/Stock.stories.tsx | 2 +- src/Containers/StoreFeatureCard/StoreFeatureCard.stories.tsx | 2 +- src/Containers/StoreHoursList/StoreHoursList.stories.tsx | 2 +- src/Containers/StoreSelector/StoreSelector.stories.tsx | 2 +- src/Containers/StretchableButton/StretchableButton.stories.tsx | 2 +- src/Containers/TabFeature/TabFeature.stories.tsx | 2 +- src/Containers/TableFeature/TableFeature.stories.tsx | 2 +- src/Containers/TableHeaderCell/TableHeaderCell.stories.tsx | 2 +- src/Containers/Tag/Tag.stories.tsx | 2 +- src/Containers/TagGroup/TagGroup.stories.tsx | 2 +- src/Containers/Timeline/Timeline.stories.tsx | 2 +- src/Containers/TransactionList/TransactionList.stories.tsx | 2 +- src/Containers/TreeAccordion/TreeAccordion.stories.tsx | 2 +- src/Containers/VendorsList/VendorsHeader.stories.tsx | 2 +- src/Containers/VendorsList/VendorsList.stories.tsx | 2 +- src/Containers/VendorsList/VendorsNavigationBar.stories.tsx | 2 +- src/Containers/VerticalTimeline/VerticalTimeline.stories.tsx | 2 +- src/Containers/VisitNotification/VisitNotification.stories.tsx | 2 +- src/Containers/WaitTimeDisplay/WaitTimeDisplay.stories.tsx | 2 +- src/Containers/WarningCard/WarningCard.stories.tsx | 2 +- src/Inputs/Button/Button.stories.tsx | 2 +- src/Inputs/CheckBox/Checkbox.stories.tsx | 2 +- src/Inputs/ColorPicker/ColorPicker.stories.tsx | 2 +- src/Inputs/ComboBox/ComboBox.stories.tsx | 2 +- src/Inputs/CustomSearch/CustomSearch.stories.tsx | 2 +- src/Inputs/Datepicker/Datepicker.stories.tsx | 2 +- src/Inputs/EmojiPicker/EmojiPicker.stories.tsx | 2 +- src/Inputs/ExcelOptions/ExcelOptions.stories.tsx | 2 +- src/Inputs/Image/Image.stories.tsx | 2 +- src/Inputs/Input/Input.stories.tsx | 2 +- src/Inputs/MaskedInput/MaskedInput.stories.tsx | 2 +- src/Inputs/MutiSelect/Multiselect.stories.tsx | 2 +- src/Inputs/PartySizeSelector/PartySizeSelector.stories.tsx | 2 +- src/Inputs/PeopleButton/PeopleButton.stories.tsx | 2 +- src/Inputs/Radio/Radio.stories.tsx | 2 +- src/Inputs/SearchBar/SearchBar.stories.tsx | 2 +- src/Inputs/SearchBarExpandable/SearchBarExpandable.stories.tsx | 2 +- src/Inputs/SegmentedButton/SegmentedButton.stories.tsx | 2 +- src/Inputs/Select/Select.stories.tsx | 2 +- src/Inputs/SettingsSwitch/SettingsSwitch.stories.tsx | 2 +- src/Inputs/Slider/Slider.stories.tsx | 2 +- src/Inputs/Switch/Switch.stories.tsx | 2 +- src/Inputs/Textarea/Textarea.stories.tsx | 2 +- src/Inputs/Timepicker/Timepicker.stories.tsx | 2 +- src/Inputs/VoiceButton/VoiceButton.stories.tsx | 2 +- src/Text/ClickableSmallText/ClickableSmallText.stories.tsx | 2 +- src/Text/Heading/Heading.stories.tsx | 2 +- src/Text/LeftRightText/LeftRightText.stories.tsx | 2 +- src/Text/OrderID/OrderID.stories.tsx | 2 +- src/Text/OrderPaymentMethod/PaymentMethod.stories.tsx | 2 +- src/Text/OrderType/OrderType.stories.tsx | 2 +- src/Text/Paragraph/Paragraph.stories.tsx | 2 +- src/Text/SmallText/SmallText.stories.tsx | 2 +- 143 files changed, 143 insertions(+), 143 deletions(-) diff --git a/src/Containers/Accordion/Accordion.stories.tsx b/src/Containers/Accordion/Accordion.stories.tsx index 7eac763b..7dd2f52b 100644 --- a/src/Containers/Accordion/Accordion.stories.tsx +++ b/src/Containers/Accordion/Accordion.stories.tsx @@ -10,7 +10,7 @@ const defaultActiveStyle = () => ` `; export default { - title: 'Components/Accordion', + title: 'Components/Accordion/Accordion', component: Accordion, } as Meta; diff --git a/src/Containers/Analytics/Analytics.stories.tsx b/src/Containers/Analytics/Analytics.stories.tsx index f742ac89..c56b97b7 100644 --- a/src/Containers/Analytics/Analytics.stories.tsx +++ b/src/Containers/Analytics/Analytics.stories.tsx @@ -3,7 +3,7 @@ import { Meta, Story } from '@storybook/react'; import { Analytics, IAnalyticsProps } from '../../index'; export default { - title: 'Components/Analytics', + title: 'Components/Analytics/Analytics', component: Analytics, args: { title: 'Delivered', diff --git a/src/Containers/BoxComposition/BoxComposition.stories.tsx b/src/Containers/BoxComposition/BoxComposition.stories.tsx index 428c7fa7..b850ad93 100644 --- a/src/Containers/BoxComposition/BoxComposition.stories.tsx +++ b/src/Containers/BoxComposition/BoxComposition.stories.tsx @@ -4,7 +4,7 @@ import { BoxComposition, IBoxCompositionProps } from '@Containers'; export default { - title: 'Components/BoxComposition', + title: 'Marketing Website/BoxComposition', component: BoxComposition, args: { data: [ diff --git a/src/Containers/BoxComposition2/BoxComposition2.stories.tsx b/src/Containers/BoxComposition2/BoxComposition2.stories.tsx index 81472ec4..6bcada41 100644 --- a/src/Containers/BoxComposition2/BoxComposition2.stories.tsx +++ b/src/Containers/BoxComposition2/BoxComposition2.stories.tsx @@ -4,7 +4,7 @@ import { BoxComposition2, IBoxComposition2Props } from '@Containers'; export default { - title: 'Components/BoxComposition2', + title: 'Marketing Website/BoxComposition2', component: BoxComposition2, args: { desktopBox: { diff --git a/src/Containers/CRMRow/CRMRow.stories.tsx b/src/Containers/CRMRow/CRMRow.stories.tsx index 18df88c8..4877c5eb 100644 --- a/src/Containers/CRMRow/CRMRow.stories.tsx +++ b/src/Containers/CRMRow/CRMRow.stories.tsx @@ -4,7 +4,7 @@ import { CRMRow, CRMRowProps } from '../../index'; export default { - title: 'Components/CRMRow', + title: 'Dashboard/CRM/CRMRow', component: CRMRow, args: { dateCreated: {dateCreated: "June 29, 2007"}, diff --git a/src/Containers/CRMTable/CRMTable.stories.tsx b/src/Containers/CRMTable/CRMTable.stories.tsx index 9e16f2d7..8c65f8b7 100644 --- a/src/Containers/CRMTable/CRMTable.stories.tsx +++ b/src/Containers/CRMTable/CRMTable.stories.tsx @@ -28,7 +28,7 @@ const TextFilter: React.FC> = ({ ); export default { - title: 'Components/CRM Table', + title: 'Dashboard/CRM/CRM Table', component: CRMTable, argTypes: { onRowClick: { action: 'Row was clicked' }, onMenuClick: { action: 'Menu was clicked' }, diff --git a/src/Containers/CapacityDisplay/CapacityDisplay.stories.tsx b/src/Containers/CapacityDisplay/CapacityDisplay.stories.tsx index 6f68ecf2..07530575 100644 --- a/src/Containers/CapacityDisplay/CapacityDisplay.stories.tsx +++ b/src/Containers/CapacityDisplay/CapacityDisplay.stories.tsx @@ -11,7 +11,7 @@ import { CapacityDisplay, ICapacityDisplay } from './CapacityDisplay'; export default { - title: 'Components/CapacityDisplay', + title: 'Components/TableManagement/CapacityDisplay', component: CapacityDisplay, } as Meta; diff --git a/src/Containers/Card/Card.stories.tsx b/src/Containers/Card/Card.stories.tsx index 11993473..7c92a734 100644 --- a/src/Containers/Card/Card.stories.tsx +++ b/src/Containers/Card/Card.stories.tsx @@ -4,7 +4,7 @@ import { Card, CardProps, Paragraph, SmallText } from '../../index'; import { getCaptionForLocale } from '../../Constants'; export default { - title: 'Components/Card', + title: 'Components/Other/Card', component: Card, args: { flat: false, diff --git a/src/Containers/CarouselTestimonial/CarouselTestimonial.stories.tsx b/src/Containers/CarouselTestimonial/CarouselTestimonial.stories.tsx index 21b0bcfe..6017719c 100644 --- a/src/Containers/CarouselTestimonial/CarouselTestimonial.stories.tsx +++ b/src/Containers/CarouselTestimonial/CarouselTestimonial.stories.tsx @@ -7,7 +7,7 @@ import { export default { - title: 'Components/Carousel Testimonial', + title: 'Marketing Website/Carousel Testimonial', component: CarouselTestimonial, } as Meta; diff --git a/src/Containers/Chair/Chair.stories.tsx b/src/Containers/Chair/Chair.stories.tsx index fccfa866..cb0cf4f0 100644 --- a/src/Containers/Chair/Chair.stories.tsx +++ b/src/Containers/Chair/Chair.stories.tsx @@ -5,7 +5,7 @@ import { Chair, IChair } from './Chair'; export default { - title: 'Components/Chair', + title: 'Components/TableManagement/Chair', component: Chair, } as Meta; diff --git a/src/Containers/Chart/Chart.stories.tsx b/src/Containers/Chart/Chart.stories.tsx index c6b9d476..f40fce2d 100644 --- a/src/Containers/Chart/Chart.stories.tsx +++ b/src/Containers/Chart/Chart.stories.tsx @@ -5,7 +5,7 @@ import { Chart, ChartProps } from '../../index'; export default { - title: 'Components/Chart', + title: 'Components/Analytics/Chart', component: Chart, args: { color: MainTheme.colors.primary, diff --git a/src/Containers/CircleTable/CircleTable.stories.tsx b/src/Containers/CircleTable/CircleTable.stories.tsx index 0ac5eacc..5694cdd5 100644 --- a/src/Containers/CircleTable/CircleTable.stories.tsx +++ b/src/Containers/CircleTable/CircleTable.stories.tsx @@ -4,7 +4,7 @@ import { CircleTable, ICircleTable } from '@Containers'; export default { - title: 'Components/CircleTable', + title: 'Components/TableManagement/CircleTable', component: CircleTable, } as Meta; diff --git a/src/Containers/ClientShowCase/ClientShowCase.stories.tsx b/src/Containers/ClientShowCase/ClientShowCase.stories.tsx index 972592de..340f6f5f 100644 --- a/src/Containers/ClientShowCase/ClientShowCase.stories.tsx +++ b/src/Containers/ClientShowCase/ClientShowCase.stories.tsx @@ -26,7 +26,7 @@ enum ImageSizes { } export default { - title: 'Components/ClientShowCase', + title: 'Marketing Website/ClientShowCase', component: ClientShowCase, argTypes: { imgHeightEnum: { diff --git a/src/Containers/CollapsibleAccordion/CollapsibleAccordion.stories.tsx b/src/Containers/CollapsibleAccordion/CollapsibleAccordion.stories.tsx index 442002cb..a7eddb8c 100644 --- a/src/Containers/CollapsibleAccordion/CollapsibleAccordion.stories.tsx +++ b/src/Containers/CollapsibleAccordion/CollapsibleAccordion.stories.tsx @@ -5,7 +5,7 @@ import { CollapsibleAccordion, Paragraph } from '../../index'; export default { - title: 'Components/CollapsibleAccordion', + title: 'Components/Accordion/CollapsibleAccordion', component: CollapsibleAccordion, } as Meta; diff --git a/src/Containers/CollapsibleHeading/CollapsibleHeading.stories.tsx b/src/Containers/CollapsibleHeading/CollapsibleHeading.stories.tsx index 25681067..944dcd3c 100644 --- a/src/Containers/CollapsibleHeading/CollapsibleHeading.stories.tsx +++ b/src/Containers/CollapsibleHeading/CollapsibleHeading.stories.tsx @@ -6,7 +6,7 @@ import { FilterSelect } from './FilterSelect'; import { Button } from '../../Inputs/Button/Button'; export default { - title: 'Components/CollapsibleHeading', + title: 'Dashboard/CRM/CollapsibleHeading', component: CollapsibleHeading, } as Meta; diff --git a/src/Containers/Coupon/Coupon.stories.tsx b/src/Containers/Coupon/Coupon.stories.tsx index 8af41bb4..5dd25859 100644 --- a/src/Containers/Coupon/Coupon.stories.tsx +++ b/src/Containers/Coupon/Coupon.stories.tsx @@ -4,7 +4,7 @@ import { Coupon, CouponProps } from '../../index'; export default { - title: 'Components/Coupon', + title: 'Components/Other/Coupon', component: Coupon, } as Meta; diff --git a/src/Containers/CreatedDate/CreatedDate.stories.tsx b/src/Containers/CreatedDate/CreatedDate.stories.tsx index e9b35802..72103d99 100644 --- a/src/Containers/CreatedDate/CreatedDate.stories.tsx +++ b/src/Containers/CreatedDate/CreatedDate.stories.tsx @@ -4,7 +4,7 @@ import { CreatedDate, CreatedDateProps } from '../../index'; export default { - title: 'Components/CreatedDate', + title: 'Dashboard/CRM/CreatedDate', component: CreatedDate, args: { dateCreated: "June 29, 2007" diff --git a/src/Containers/CustomerProfile/CustomerProfile.stories.tsx b/src/Containers/CustomerProfile/CustomerProfile.stories.tsx index 66d98676..1fac20c4 100644 --- a/src/Containers/CustomerProfile/CustomerProfile.stories.tsx +++ b/src/Containers/CustomerProfile/CustomerProfile.stories.tsx @@ -4,7 +4,7 @@ import { CustomerProfile, CustomerProfileProps } from '../../index'; export default { - title: 'Components/CustomerProfile', + title: 'Dashboard/CRM/CustomerProfile', component: CustomerProfile, args: { profileName: "Ashley Tisdale", diff --git a/src/Containers/DeliveryRadius/DeliveryRadius.stories.tsx b/src/Containers/DeliveryRadius/DeliveryRadius.stories.tsx index 15a920eb..aae6f163 100644 --- a/src/Containers/DeliveryRadius/DeliveryRadius.stories.tsx +++ b/src/Containers/DeliveryRadius/DeliveryRadius.stories.tsx @@ -9,7 +9,7 @@ import { export default { - title: 'Components/Delivery Radius', + title: 'Dashboard/Delivery Radius', component: DeliveryRadius, args: { title: 'Delivery Radius', diff --git a/src/Containers/DiningReservation/DiningReservation.stories.tsx b/src/Containers/DiningReservation/DiningReservation.stories.tsx index 3a8e21e8..71c58247 100644 --- a/src/Containers/DiningReservation/DiningReservation.stories.tsx +++ b/src/Containers/DiningReservation/DiningReservation.stories.tsx @@ -4,7 +4,7 @@ import { DiningReservation, DiningReservationProps } from './DiningReservation'; export default { - title: 'Components/Dining Reservation', + title: 'Components/TableManagement/Dining Reservation', component: DiningReservation, } as Meta; diff --git a/src/Containers/DisplayItem/DisplayItem.stories.tsx b/src/Containers/DisplayItem/DisplayItem.stories.tsx index bcfde4bd..3f884f18 100644 --- a/src/Containers/DisplayItem/DisplayItem.stories.tsx +++ b/src/Containers/DisplayItem/DisplayItem.stories.tsx @@ -4,7 +4,7 @@ import { DisplayItem, DisplayItemProps } from '../../index'; export default { - title: 'Components/Display Item', + title: 'Components/Other/Display Item', component: DisplayItem, args: { label: 'DisplayItemLabel', diff --git a/src/Containers/DraggableDemoFront/DraggableDemoFront.stories.tsx b/src/Containers/DraggableDemoFront/DraggableDemoFront.stories.tsx index fded7fc8..01b9bcd4 100644 --- a/src/Containers/DraggableDemoFront/DraggableDemoFront.stories.tsx +++ b/src/Containers/DraggableDemoFront/DraggableDemoFront.stories.tsx @@ -4,7 +4,7 @@ import { DraggableCanvas } from './DraggableDemoFront'; export default { - title: 'Components/DraggableCanvas', + title: 'Components/TableManagement/DraggableCanvas', component: DraggableCanvas, } as Meta; diff --git a/src/Containers/DropArea/DropArea.stories.tsx b/src/Containers/DropArea/DropArea.stories.tsx index b9ded237..3be2a779 100644 --- a/src/Containers/DropArea/DropArea.stories.tsx +++ b/src/Containers/DropArea/DropArea.stories.tsx @@ -3,7 +3,7 @@ import { Meta, Story } from '@storybook/react'; import { DropArea, IDropAreaProps } from './DropArea'; export default { - title: 'Components/DropArea', + title: 'Components/File Upload/DropArea', component: DropArea, args: {}, argTypes: { diff --git a/src/Containers/Dropdown/Dropdown.stories.tsx b/src/Containers/Dropdown/Dropdown.stories.tsx index 7ffe933c..f9a23d0a 100644 --- a/src/Containers/Dropdown/Dropdown.stories.tsx +++ b/src/Containers/Dropdown/Dropdown.stories.tsx @@ -6,7 +6,7 @@ import { IDropdownProps } from './Dropdown'; import Dropdown from './index'; export default { - title: 'Components/Dropdown', + title: 'Components/Atoms/Dropdown', component: Dropdown, args: { dropdownWidth: 300, diff --git a/src/Containers/EditControlPanel/EditControlPanel.stories.tsx b/src/Containers/EditControlPanel/EditControlPanel.stories.tsx index c927ad3f..0b756da5 100644 --- a/src/Containers/EditControlPanel/EditControlPanel.stories.tsx +++ b/src/Containers/EditControlPanel/EditControlPanel.stories.tsx @@ -4,7 +4,7 @@ import { EditControlPanel, IEditControlPanel } from '@Containers'; export default { - title: 'Components/EditControlPanel', + title: 'Components/TableManagement/EditControlPanel', component: EditControlPanel, } as Meta; diff --git a/src/Containers/EditDraggableCanvas/DraggableTable.stories.tsx b/src/Containers/EditDraggableCanvas/DraggableTable.stories.tsx index be065aba..6aadc6cc 100644 --- a/src/Containers/EditDraggableCanvas/DraggableTable.stories.tsx +++ b/src/Containers/EditDraggableCanvas/DraggableTable.stories.tsx @@ -7,7 +7,7 @@ import { export default { - title: 'Components/DraggableTable', + title: 'Components/TableManagement/DraggableTable', component: DraggableTable, } as Meta; diff --git a/src/Containers/EditDraggableCanvas/EditDraggableCanvas.stories.tsx b/src/Containers/EditDraggableCanvas/EditDraggableCanvas.stories.tsx index a41fc4f7..ef5d672a 100644 --- a/src/Containers/EditDraggableCanvas/EditDraggableCanvas.stories.tsx +++ b/src/Containers/EditDraggableCanvas/EditDraggableCanvas.stories.tsx @@ -4,7 +4,7 @@ import { EditDraggableCanvas, IEditDraggableCanvas } from '@Containers'; export default { - title: 'Components/EditDraggableCanvas', + title: 'Components/TableManagement/EditDraggableCanvas', component: EditDraggableCanvas, } as Meta; diff --git a/src/Containers/FeatureDisplay/FeatureDisplay.stories.tsx b/src/Containers/FeatureDisplay/FeatureDisplay.stories.tsx index c7ca681f..c62a2514 100644 --- a/src/Containers/FeatureDisplay/FeatureDisplay.stories.tsx +++ b/src/Containers/FeatureDisplay/FeatureDisplay.stories.tsx @@ -4,7 +4,7 @@ import { Story, Meta } from '@storybook/react'; import { FeatureDisplay, IFeatureDisplayProps } from './FeatureDisplay'; export default { - title: 'Components/Feature Display', + title: 'Marketing Website/Feature Display', component: FeatureDisplay, } as Meta; diff --git a/src/Containers/FeaturesCard/FeaturesCard.stories.tsx b/src/Containers/FeaturesCard/FeaturesCard.stories.tsx index eadfe6e6..6bef61f8 100644 --- a/src/Containers/FeaturesCard/FeaturesCard.stories.tsx +++ b/src/Containers/FeaturesCard/FeaturesCard.stories.tsx @@ -35,7 +35,7 @@ const footer = ( ); export default { - title: 'Components/Features Card', + title: 'Marketing Website/Features Card', component: FeaturesCard, args: { children, diff --git a/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.stories.tsx b/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.stories.tsx index e49fd048..7cff6a52 100644 --- a/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.stories.tsx +++ b/src/Containers/FeaturesProfileCard/FeaturedProfilesCard.stories.tsx @@ -72,7 +72,7 @@ const profiles = [ ]; export default { - title: 'Components/Featured Profiles Card', + title: 'Components/Other/Featured Profiles Card', component: FeaturedProfilesCard, args: { profileData: profiles, diff --git a/src/Containers/FileUpload/FileUpload.stories.tsx b/src/Containers/FileUpload/FileUpload.stories.tsx index 0c7a37ef..20744833 100644 --- a/src/Containers/FileUpload/FileUpload.stories.tsx +++ b/src/Containers/FileUpload/FileUpload.stories.tsx @@ -4,7 +4,7 @@ import { FileUpload, IFileUploadProps } from '../../index'; export default { - title: 'Components/FileUpload', + title: 'Components/File Upload/FileUpload', component: FileUpload, args: { subTitle: 'Supports: JPG, JPEG2000, PNG', diff --git a/src/Containers/FilterBox/FilterBox.stories.tsx b/src/Containers/FilterBox/FilterBox.stories.tsx index 21a7f5bd..d57cb36d 100644 --- a/src/Containers/FilterBox/FilterBox.stories.tsx +++ b/src/Containers/FilterBox/FilterBox.stories.tsx @@ -4,7 +4,7 @@ import { FilterBox, FilterBoxProps } from '../../index'; export default { - title: 'Components/FilterBox', + title: 'Dashboard/CRM/FilterBox', component: FilterBox, args: { title: 'Starts with: ', diff --git a/src/Containers/Footnote/Footnote.stories.tsx b/src/Containers/Footnote/Footnote.stories.tsx index 3a683502..c284f749 100644 --- a/src/Containers/Footnote/Footnote.stories.tsx +++ b/src/Containers/Footnote/Footnote.stories.tsx @@ -4,7 +4,7 @@ import { Footnote, SmallText, FootnoteProps } from '../../index'; import { getCaptionForLocale } from '../../Constants'; export default { - title: 'Components/Footnote', + title: 'Components/Other/Footnote', component: Footnote, args: { show: true, diff --git a/src/Containers/Header/Header.stories.tsx b/src/Containers/Header/Header.stories.tsx index a9a8a698..99b274c2 100644 --- a/src/Containers/Header/Header.stories.tsx +++ b/src/Containers/Header/Header.stories.tsx @@ -14,7 +14,7 @@ import Header from './Header'; export default { - title: 'Components/Order Header', + title: 'Terminal/Orders/Header', component: Header, args: { topLeft: , diff --git a/src/Containers/HeaderRow/HeaderRow.stories.tsx b/src/Containers/HeaderRow/HeaderRow.stories.tsx index d4d6be23..468387c9 100644 --- a/src/Containers/HeaderRow/HeaderRow.stories.tsx +++ b/src/Containers/HeaderRow/HeaderRow.stories.tsx @@ -4,7 +4,7 @@ import { HeaderRow, HeaderRowProps } from '../../index'; export default { - title: 'Components/Header Row', + title: 'Components/Other/Header Row', component: HeaderRow, args: { label: 'Header label', diff --git a/src/Containers/HighlightedText/HighlightedText.stories.tsx b/src/Containers/HighlightedText/HighlightedText.stories.tsx index 71099989..c95a0145 100644 --- a/src/Containers/HighlightedText/HighlightedText.stories.tsx +++ b/src/Containers/HighlightedText/HighlightedText.stories.tsx @@ -34,7 +34,7 @@ const labels: Array = [ ] export default { - title: 'Components/Highlighted Text', + title: 'Components/Other/Highlighted Text', component: HighlightedText, args: { labels, diff --git a/src/Containers/HorizontalBarChart/HorizontalBarChart.stories.tsx b/src/Containers/HorizontalBarChart/HorizontalBarChart.stories.tsx index 10f7bc65..16c37e4b 100644 --- a/src/Containers/HorizontalBarChart/HorizontalBarChart.stories.tsx +++ b/src/Containers/HorizontalBarChart/HorizontalBarChart.stories.tsx @@ -7,7 +7,7 @@ import { export default { - title: 'Components/Horizontal Bar Chart', + title: 'Components/Analytics/Horizontal Bar Chart', component: HorizontalBarChart, args: { chartProperties: { diff --git a/src/Containers/HorizontalScrollList/HorizontalScrollList.stories.tsx b/src/Containers/HorizontalScrollList/HorizontalScrollList.stories.tsx index cd5cdcb3..2f5cc596 100644 --- a/src/Containers/HorizontalScrollList/HorizontalScrollList.stories.tsx +++ b/src/Containers/HorizontalScrollList/HorizontalScrollList.stories.tsx @@ -25,7 +25,7 @@ const exampleLabelArray = [ ]; export default { - title: 'Components/Horizontal Scroll List', + title: 'Components/Other/Horizontal Scroll List', component: HorizontalScrollList, args: { labelArray: exampleLabelArray, diff --git a/src/Containers/HorizontalStoreCard/HorizontalStoreCard.stories.tsx b/src/Containers/HorizontalStoreCard/HorizontalStoreCard.stories.tsx index e01d6d87..3ba6381c 100644 --- a/src/Containers/HorizontalStoreCard/HorizontalStoreCard.stories.tsx +++ b/src/Containers/HorizontalStoreCard/HorizontalStoreCard.stories.tsx @@ -5,7 +5,7 @@ import { HorizontalStoreCard, HorizontalStoreCardProps } from '../../index'; export default { - title: 'Components/Horizontal Store Card', + title: 'Components/Other/Horizontal Store Card', component: HorizontalStoreCard, args: { image: 'https://media.giphy.com/media/mCRJDo24UvJMA/giphy.gif', diff --git a/src/Containers/ImageCarousel/ImageCarousel.stories.tsx b/src/Containers/ImageCarousel/ImageCarousel.stories.tsx index ed6bd5f4..d9969fc3 100644 --- a/src/Containers/ImageCarousel/ImageCarousel.stories.tsx +++ b/src/Containers/ImageCarousel/ImageCarousel.stories.tsx @@ -10,7 +10,7 @@ const images = [ ]; export default { - title: 'Components/Image Carousel', + title: 'Components/Menu Item/Image Carousel', component: ImageCarousel, argTypes: { onClick: { action: 'Clicked!' } }, args: { diff --git a/src/Containers/InfoHeader/InfoHeader.stories.tsx b/src/Containers/InfoHeader/InfoHeader.stories.tsx index 8d77f174..dfce6ae9 100644 --- a/src/Containers/InfoHeader/InfoHeader.stories.tsx +++ b/src/Containers/InfoHeader/InfoHeader.stories.tsx @@ -4,7 +4,7 @@ import { InfoHeader,InfoHeaderProps} from '../../index'; export default { - title: 'Components/InfoHeader', + title: 'Components/Other/InfoHeader', component: InfoHeader, argTypes: { onMouseEnter: { action: 'Hover' }, diff --git a/src/Containers/InviteComponent/Invite.stories.tsx b/src/Containers/InviteComponent/Invite.stories.tsx index 020de047..03c49aae 100644 --- a/src/Containers/InviteComponent/Invite.stories.tsx +++ b/src/Containers/InviteComponent/Invite.stories.tsx @@ -4,7 +4,7 @@ import { Meta, Story } from '@storybook/react'; import { Invite, InviteProps } from './Invite'; export default { - title: 'Components/Invite Component', + title: 'Marketing Website/Invite Component', component: Invite, } as Meta; diff --git a/src/Containers/ItemsRedemptionPoints/ItemsRedemptionPoints.stories.tsx b/src/Containers/ItemsRedemptionPoints/ItemsRedemptionPoints.stories.tsx index 3193b2e2..014e49c9 100644 --- a/src/Containers/ItemsRedemptionPoints/ItemsRedemptionPoints.stories.tsx +++ b/src/Containers/ItemsRedemptionPoints/ItemsRedemptionPoints.stories.tsx @@ -9,7 +9,7 @@ import { export default { - title: 'Components/Items Redemption Points', + title: 'Dashboard/Loyalty/Items Redemption Points', component: ItemsRedemptionPoints, args: { titleText: 'Food', diff --git a/src/Containers/KitchenCard/KitchenCard.stories.tsx b/src/Containers/KitchenCard/KitchenCard.stories.tsx index 5aee9efb..1d318a38 100644 --- a/src/Containers/KitchenCard/KitchenCard.stories.tsx +++ b/src/Containers/KitchenCard/KitchenCard.stories.tsx @@ -211,7 +211,7 @@ const StatusModifierComponent = ( ); export default { - title: 'Components/KitchenCard', + title: 'Terminal/Kitchen/KitchenCard', component: KitchenCard, argTypes: { status: { diff --git a/src/Containers/Landing/Landing.stories.tsx b/src/Containers/Landing/Landing.stories.tsx index 82f577bc..f41efbec 100644 --- a/src/Containers/Landing/Landing.stories.tsx +++ b/src/Containers/Landing/Landing.stories.tsx @@ -7,7 +7,7 @@ import { Meta, Story } from '@storybook/react'; export default { - title: 'Components/Landing', + title: 'Components/Other/Landing', component: Landing, argTypes: { label: { diff --git a/src/Containers/LeftSideBar/LeftSideBar.stories.tsx b/src/Containers/LeftSideBar/LeftSideBar.stories.tsx index 93ad70c6..404dfd3a 100644 --- a/src/Containers/LeftSideBar/LeftSideBar.stories.tsx +++ b/src/Containers/LeftSideBar/LeftSideBar.stories.tsx @@ -11,7 +11,7 @@ import { Settings } from '@styled-icons/ionicons-sharp/Settings'; import { LeftSideBar, LeftSideBarProps } from '../../index'; export default { - title: 'Components/Left Sidebar', + title: 'Dashboard/Receipt Builder/Left Sidebar', component: LeftSideBar, argTypes: { onDrag: { action: 'I have been dragged!' } }, args: { diff --git a/src/Containers/LimitedTimeBanner/LimitedTimeBanner.stories.tsx b/src/Containers/LimitedTimeBanner/LimitedTimeBanner.stories.tsx index 48b3a888..6eff1e2f 100644 --- a/src/Containers/LimitedTimeBanner/LimitedTimeBanner.stories.tsx +++ b/src/Containers/LimitedTimeBanner/LimitedTimeBanner.stories.tsx @@ -4,7 +4,7 @@ import { LimitedTimeBanner,LimitedTimeBannerProps} from '../../index'; export default { - title: 'Components/LimitedTimeBanner', + title: 'Components/Menu Item/LimitedTimeBanner', component: LimitedTimeBanner, args: { minsRemaining: 120, diff --git a/src/Containers/List/List.stories.tsx b/src/Containers/List/List.stories.tsx index 0b650bcb..9997d183 100644 --- a/src/Containers/List/List.stories.tsx +++ b/src/Containers/List/List.stories.tsx @@ -30,7 +30,7 @@ const items = [ ]; export default { - title: 'Components/List', + title: 'Components/Other/List', component: List, argTypes: { isOpen: { diff --git a/src/Containers/Loading/Loading.stories.tsx b/src/Containers/Loading/Loading.stories.tsx index f5cdcda5..4847e725 100644 --- a/src/Containers/Loading/Loading.stories.tsx +++ b/src/Containers/Loading/Loading.stories.tsx @@ -4,7 +4,7 @@ import { Loading, LoadingProps } from '../../index'; import { getCaptionForLocale } from '../../Constants'; export default { - title: 'Components/Loading', + title: 'Components/Atoms/Loading', component: Loading, args: { loading: true, diff --git a/src/Containers/LogoListing/Logo.stories.tsx b/src/Containers/LogoListing/Logo.stories.tsx index 9e924dc1..bdfc098d 100644 --- a/src/Containers/LogoListing/Logo.stories.tsx +++ b/src/Containers/LogoListing/Logo.stories.tsx @@ -4,7 +4,7 @@ import { Meta, Story } from '@storybook/react'; import { ShowLogos, ILogoProps } from './Logo'; export default { - title: 'Components/Logo Listing', + title: 'Marketing Website/Logo Listing', component: ShowLogos, } as Meta; diff --git a/src/Containers/MainContainer/MainContainer.stories.tsx b/src/Containers/MainContainer/MainContainer.stories.tsx index 5279087b..ddd83278 100644 --- a/src/Containers/MainContainer/MainContainer.stories.tsx +++ b/src/Containers/MainContainer/MainContainer.stories.tsx @@ -4,7 +4,7 @@ import { MainContainer, IMainContainer } from './MainContainer'; export default { - title: 'Components/MainContainer', + title: 'Components/TableManagement/MainContainer', component: MainContainer, } as Meta; diff --git a/src/Containers/MenuItem/MenuItem.stories.tsx b/src/Containers/MenuItem/MenuItem.stories.tsx index 75163f7a..3cd43526 100644 --- a/src/Containers/MenuItem/MenuItem.stories.tsx +++ b/src/Containers/MenuItem/MenuItem.stories.tsx @@ -4,7 +4,7 @@ import { MenuItem, IMenuItemProps } from './MenuItem'; export default { - title: 'Components/Menu Item', + title: 'Components/Menu Item/Menu Item', component: MenuItem, args: { name: 'Hamburger', diff --git a/src/Containers/MiddleCanvas/DualSelectRadio.stories.tsx b/src/Containers/MiddleCanvas/DualSelectRadio.stories.tsx index 47b3ece1..d885ce51 100644 --- a/src/Containers/MiddleCanvas/DualSelectRadio.stories.tsx +++ b/src/Containers/MiddleCanvas/DualSelectRadio.stories.tsx @@ -4,7 +4,7 @@ import { DualSelectRadio, DualSelectRadioProps } from '../../index'; export default { - title: 'Components/Dual Select Radio', + title: 'Dashboard/Receipt Builder/Dual Select Radio', component: DualSelectRadio, args: { caption: 'Dual Select', diff --git a/src/Containers/MiddleCanvas/MiddleCanvas.stories.tsx b/src/Containers/MiddleCanvas/MiddleCanvas.stories.tsx index ce802579..b212fd64 100644 --- a/src/Containers/MiddleCanvas/MiddleCanvas.stories.tsx +++ b/src/Containers/MiddleCanvas/MiddleCanvas.stories.tsx @@ -4,7 +4,7 @@ import { MiddleCanvas, MiddleCanvasProps } from '../../index'; export default { - title: 'Components/Middle Canvas', + title: 'Dashboard/Receipt Builder/Middle Canvas', component: MiddleCanvas, args: { firstCaption: 'Before Receipt Prints', diff --git a/src/Containers/Modal/Modal.stories.tsx b/src/Containers/Modal/Modal.stories.tsx index c9a5ff63..49dfeb7f 100644 --- a/src/Containers/Modal/Modal.stories.tsx +++ b/src/Containers/Modal/Modal.stories.tsx @@ -4,7 +4,7 @@ import { Button, Modal, ModalProps } from '../../index'; export default { - title: 'Components/Modal', + title: 'Components/atoms/Modal', component: Modal, } as Meta; diff --git a/src/Containers/Navigation/Navigation.stories.tsx b/src/Containers/Navigation/Navigation.stories.tsx index 61efdcb7..71069ca7 100644 --- a/src/Containers/Navigation/Navigation.stories.tsx +++ b/src/Containers/Navigation/Navigation.stories.tsx @@ -17,7 +17,7 @@ import { import { logoWhite } from '../../assets'; export default { - title: 'Components/Navigation', + title: 'Components/Navigation/Navigation', component: Navigation, } as Meta; diff --git a/src/Containers/NotificationBubble/NotificationBubble.stories.tsx b/src/Containers/NotificationBubble/NotificationBubble.stories.tsx index 5a3a8da7..0f583d67 100644 --- a/src/Containers/NotificationBubble/NotificationBubble.stories.tsx +++ b/src/Containers/NotificationBubble/NotificationBubble.stories.tsx @@ -4,7 +4,7 @@ import { NotificationBubble, NotificationBubbleProps } from '../../index'; export default { - title: 'Components/NotificationBubble', + title: 'Components/Other/NotificationBubble', component: NotificationBubble, args: { notificationCounter: 3, diff --git a/src/Containers/NutritionFact/NutritionFact.stories.tsx b/src/Containers/NutritionFact/NutritionFact.stories.tsx index 05ec29b4..c4d80059 100644 --- a/src/Containers/NutritionFact/NutritionFact.stories.tsx +++ b/src/Containers/NutritionFact/NutritionFact.stories.tsx @@ -5,7 +5,7 @@ import { NutritionFact, INutritionFactProps, EntryType } from './NutritionFact'; import Theme from '../../Themes/ThemeTemplate'; export default { - title: 'Components/NutritionFact', + title: 'Components/Menu Item/NutritionFact', component: NutritionFact, args: { entries: [ diff --git a/src/Containers/OrderItemsList/OrderItemList.stories.tsx b/src/Containers/OrderItemsList/OrderItemList.stories.tsx index 51bf4f3b..c3a42467 100644 --- a/src/Containers/OrderItemsList/OrderItemList.stories.tsx +++ b/src/Containers/OrderItemsList/OrderItemList.stories.tsx @@ -4,7 +4,7 @@ import { IOrderItems, OrderItemList } from './OrderItemList'; export default { - title: 'Components/Order List', + title: 'Terminal/Orders/Order List', component: OrderItemList, args: { items: [ diff --git a/src/Containers/OrderStatus/OrderStatus.stories.tsx b/src/Containers/OrderStatus/OrderStatus.stories.tsx index 632e0ac2..a583c8c9 100644 --- a/src/Containers/OrderStatus/OrderStatus.stories.tsx +++ b/src/Containers/OrderStatus/OrderStatus.stories.tsx @@ -8,7 +8,7 @@ import { export default { - title: 'Components/Order Status', + title: 'Terminal/Orders/Order Status', component: OrderStatus, argTypes: { orderStatus: { diff --git a/src/Containers/OrderTemplate/OrderTemplate.stories.tsx b/src/Containers/OrderTemplate/OrderTemplate.stories.tsx index dbe618c8..780fc1e2 100644 --- a/src/Containers/OrderTemplate/OrderTemplate.stories.tsx +++ b/src/Containers/OrderTemplate/OrderTemplate.stories.tsx @@ -7,7 +7,7 @@ import { OrderTypeIdentifier } from '@Text/OrderType/OrderType'; import { OrderTemplate, IOrderTemplateProps } from './OrderTemplate'; export default { - title: 'Components/Order Template', + title: 'Terminal/Orders/Order Template', component: OrderTemplate, argTypes: { paymentMethod: { diff --git a/src/Containers/OrderTotalCard/OrderTotalCard.stories.tsx b/src/Containers/OrderTotalCard/OrderTotalCard.stories.tsx index 60913c05..624b3d09 100644 --- a/src/Containers/OrderTotalCard/OrderTotalCard.stories.tsx +++ b/src/Containers/OrderTotalCard/OrderTotalCard.stories.tsx @@ -4,7 +4,7 @@ import { OrderTotalCard, IOrderTotalCardProps } from './OrderTotalCard'; export default { - title: 'Components/Order Payment Card', + title: 'Terminal/Orders/Order Payment Card', component: OrderTotalCard, args: { orderCardContents: [ diff --git a/src/Containers/OrderTracker/OrderTracker.stories.tsx b/src/Containers/OrderTracker/OrderTracker.stories.tsx index 413c05e2..6fa1249a 100644 --- a/src/Containers/OrderTracker/OrderTracker.stories.tsx +++ b/src/Containers/OrderTracker/OrderTracker.stories.tsx @@ -9,7 +9,7 @@ import { OrderTracker, OrderTrackerProps } from '../../index'; export default { - title: 'Components/OrderTracker', + title: 'Components/Other/OrderTracker', component: OrderTracker, args: { statuses: [ diff --git a/src/Containers/OvalTable/OvalTable.stories.tsx b/src/Containers/OvalTable/OvalTable.stories.tsx index 244fae77..ba8c8c9b 100644 --- a/src/Containers/OvalTable/OvalTable.stories.tsx +++ b/src/Containers/OvalTable/OvalTable.stories.tsx @@ -4,7 +4,7 @@ import React from "react"; import {action} from "@storybook/addon-actions"; export default { - title: 'Components/OvalTable', + title: 'Components/TableManagement/OvalTable', component: OvalTable, } as Meta; diff --git a/src/Containers/PanelCard/PanelCard.stories.tsx b/src/Containers/PanelCard/PanelCard.stories.tsx index f1dfa5b8..a89d7ce4 100644 --- a/src/Containers/PanelCard/PanelCard.stories.tsx +++ b/src/Containers/PanelCard/PanelCard.stories.tsx @@ -4,7 +4,7 @@ import {Button} from '@Inputs/Button/Button'; import { PanelCard, IPanelCardProps,OperationState } from './PanelCard'; export default { - title: 'Components/PanelCard', + title: 'Components/File Upload/PanelCard', component: PanelCard, args: {}, } as Meta; diff --git a/src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx b/src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx index 9aabd5c9..6b6bd3f3 100644 --- a/src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx +++ b/src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx @@ -8,7 +8,7 @@ import { PanelListWrapper, IPanelListWrapperProps } from './PanelListWrapper'; import {OperationState,IPanelCardProps} from '../PanelCard/PanelCard'; export default { - title: 'Components/PanelListWrapper', + title: 'Components/File Upload/PanelListWrapper', component: PanelListWrapper, args: { panels:[], diff --git a/src/Containers/PartyInfoInput/PartyInfoInput.stories.tsx b/src/Containers/PartyInfoInput/PartyInfoInput.stories.tsx index 2937077e..c3467358 100644 --- a/src/Containers/PartyInfoInput/PartyInfoInput.stories.tsx +++ b/src/Containers/PartyInfoInput/PartyInfoInput.stories.tsx @@ -7,7 +7,7 @@ import { export default { - title: 'Components/PartyInfoInput', + title: 'Components/TableManagement/PartyInfoInput', component: PartyInfoInput, } as Meta; diff --git a/src/Containers/PictureCard/PictureCard.stories.tsx b/src/Containers/PictureCard/PictureCard.stories.tsx index 9859fe6b..145c1c11 100644 --- a/src/Containers/PictureCard/PictureCard.stories.tsx +++ b/src/Containers/PictureCard/PictureCard.stories.tsx @@ -6,7 +6,7 @@ import { PictureCard, PictureCardProps } from '../../index'; export default { - title: 'Components/Picture Card', + title: 'Components/Other/Picture Card', component: PictureCard, args: { image: 'https://media.giphy.com/media/mCRJDo24UvJMA/giphy.gif', diff --git a/src/Containers/Popup/Popup.stories.tsx b/src/Containers/Popup/Popup.stories.tsx index 86efc879..f8185913 100644 --- a/src/Containers/Popup/Popup.stories.tsx +++ b/src/Containers/Popup/Popup.stories.tsx @@ -4,7 +4,7 @@ import { Popup, PopupProps } from '../../index'; export default { - title: 'Components/Popup', + title: 'Components/Other/Popup', component: Popup, args: { left: 10, diff --git a/src/Containers/ProfileCard/ProfileCard.stories.tsx b/src/Containers/ProfileCard/ProfileCard.stories.tsx index 1e74223e..b92da367 100644 --- a/src/Containers/ProfileCard/ProfileCard.stories.tsx +++ b/src/Containers/ProfileCard/ProfileCard.stories.tsx @@ -4,7 +4,7 @@ import { ProfileCard, ProfileCardProps } from '../../index'; export default { - title: 'Components/ProfileCard', + title: 'Terminal/Orders/ProfileCard', component: ProfileCard, argTypes: { onCallClick: { action: 'OnCallClick Pressed' }, diff --git a/src/Containers/ProfileModal/ProfileModal.stories.tsx b/src/Containers/ProfileModal/ProfileModal.stories.tsx index 1a28e264..2d8ded01 100644 --- a/src/Containers/ProfileModal/ProfileModal.stories.tsx +++ b/src/Containers/ProfileModal/ProfileModal.stories.tsx @@ -4,7 +4,7 @@ import { ProfileModal, ProfileModalProps } from '../../index'; export default { - title: 'Components/ProfileModal', + title: 'Dashboard/CRM/ProfileModal', component: ProfileModal, args: { image: 'https://i0.wp.com/www.repol.copl.ulaval.ca/wp-content/uploads/2019/01/default-user-icon.jpg', diff --git a/src/Containers/QRScan/QRScan.stories.tsx b/src/Containers/QRScan/QRScan.stories.tsx index 02c0ae73..f7120fd4 100644 --- a/src/Containers/QRScan/QRScan.stories.tsx +++ b/src/Containers/QRScan/QRScan.stories.tsx @@ -47,7 +47,7 @@ const footerItems = [ ]; export default { - title: 'Components/QRScan', + title: 'Components/Other/QRScan', component: QRScan, args: { title: 'COVID Contact Tracing', diff --git a/src/Containers/QuestionMarkHover/QuestionMarkHover.stories.tsx b/src/Containers/QuestionMarkHover/QuestionMarkHover.stories.tsx index 82da6b6b..dc3d7017 100644 --- a/src/Containers/QuestionMarkHover/QuestionMarkHover.stories.tsx +++ b/src/Containers/QuestionMarkHover/QuestionMarkHover.stories.tsx @@ -4,7 +4,7 @@ import { Story, Meta } from '@storybook/react'; import { QuestionMarkHover, QuestionMarkProps } from './QuestionMarkHover'; export default { - title: 'Components/QuestionMarkHover', + title: 'Components/Other/QuestionMarkHover', component: QuestionMarkHover, args: { title: 'test', diff --git a/src/Containers/RankingTable/RankingTable.stories.tsx b/src/Containers/RankingTable/RankingTable.stories.tsx index 1d1bfc96..bad08752 100644 --- a/src/Containers/RankingTable/RankingTable.stories.tsx +++ b/src/Containers/RankingTable/RankingTable.stories.tsx @@ -70,7 +70,7 @@ const data = [ ]; export default { - title: 'Components/Ranking Table', + title: 'Components/Analytics/Ranking Table', component: RankingTable, args: { title: 'Top 3 Products', diff --git a/src/Containers/ReachIndicator/ReachIndicator.stories.tsx b/src/Containers/ReachIndicator/ReachIndicator.stories.tsx index 36f194c2..78e5c3f8 100644 --- a/src/Containers/ReachIndicator/ReachIndicator.stories.tsx +++ b/src/Containers/ReachIndicator/ReachIndicator.stories.tsx @@ -4,7 +4,7 @@ import { ReachIndicator, ReachIndicatorProps } from '../../index' export default { - title: 'Components/Reach Indicator', + title: 'Components/Analytics/Reach Indicator', component: ReachIndicator, } as Meta; const Template: Story = (args) => diff --git a/src/Containers/ReportIssue/ReportIssue.stories.tsx b/src/Containers/ReportIssue/ReportIssue.stories.tsx index 9f8b8f79..e88e496e 100644 --- a/src/Containers/ReportIssue/ReportIssue.stories.tsx +++ b/src/Containers/ReportIssue/ReportIssue.stories.tsx @@ -10,7 +10,7 @@ const handleSubmit = (event: any, option: any) => { }; export default { - title: 'Components/Report Issue', + title: 'Components/Other/Report Issue', component: ReportIssue, argTypes: { handleSubmit: { action: 'Changed' } }, args: { diff --git a/src/Containers/ReservationSideBar/ReservationSideBar.stories.tsx b/src/Containers/ReservationSideBar/ReservationSideBar.stories.tsx index 667db4db..4c1f02bf 100644 --- a/src/Containers/ReservationSideBar/ReservationSideBar.stories.tsx +++ b/src/Containers/ReservationSideBar/ReservationSideBar.stories.tsx @@ -4,7 +4,7 @@ import { ReservationSideBar, IReservationSideBar } from './ReservationSideBar'; export default { - title: 'Components/ReservationSideBar', + title: 'Components/TableManagement/ReservationSideBar', component: ReservationSideBar, } as Meta; diff --git a/src/Containers/SaleTag/SaleTag.stories.tsx b/src/Containers/SaleTag/SaleTag.stories.tsx index a5bcd908..e558135d 100644 --- a/src/Containers/SaleTag/SaleTag.stories.tsx +++ b/src/Containers/SaleTag/SaleTag.stories.tsx @@ -4,7 +4,7 @@ import { SaleTag, SaleTagProps } from '../../index'; export default { - title: 'Components/SaleTag', + title: 'Components/Menu Item/SaleTag', component: SaleTag, args: { saleAmount: 2, diff --git a/src/Containers/SankeyChart/SankeyChart.stories.tsx b/src/Containers/SankeyChart/SankeyChart.stories.tsx index 01c1934a..c003e078 100644 --- a/src/Containers/SankeyChart/SankeyChart.stories.tsx +++ b/src/Containers/SankeyChart/SankeyChart.stories.tsx @@ -4,7 +4,7 @@ import { SankeyChart, ISankeyChartProps } from './SankeyChart'; export default { - title: 'Components/SankeyChart', + title: 'Components/Analytics/SankeyChart', component: SankeyChart, args: { width: 600, diff --git a/src/Containers/ScreenFlashEffect/ScreenFlashEffect.stories.tsx b/src/Containers/ScreenFlashEffect/ScreenFlashEffect.stories.tsx index 59e0be0f..8348640e 100644 --- a/src/Containers/ScreenFlashEffect/ScreenFlashEffect.stories.tsx +++ b/src/Containers/ScreenFlashEffect/ScreenFlashEffect.stories.tsx @@ -3,7 +3,7 @@ import { Meta, Story } from '@storybook/react'; import { ScreenFlashEffect, IScreenFlashEffectProps } from '../../index'; export default { - title: 'Components/ScreenFlashEffect', + title: 'Terminal/ScreenFlashEffect', component: ScreenFlashEffect, args: {}, } as Meta; diff --git a/src/Containers/ScrollableListContent/ScrollableListContent.stories.tsx b/src/Containers/ScrollableListContent/ScrollableListContent.stories.tsx index 0994a57d..a2dff91c 100644 --- a/src/Containers/ScrollableListContent/ScrollableListContent.stories.tsx +++ b/src/Containers/ScrollableListContent/ScrollableListContent.stories.tsx @@ -8,7 +8,7 @@ import { export default { - title: 'Components/Scrollable List Content', + title: 'Components/Other/Scrollable List Content', component: ScrollableListContent, args: { withList: false, diff --git a/src/Containers/SeatingInfoInput/SeatingInfoInput.stories.tsx b/src/Containers/SeatingInfoInput/SeatingInfoInput.stories.tsx index 08c596d3..e2df0008 100644 --- a/src/Containers/SeatingInfoInput/SeatingInfoInput.stories.tsx +++ b/src/Containers/SeatingInfoInput/SeatingInfoInput.stories.tsx @@ -8,7 +8,7 @@ import { export default { - title: 'Components/SeatingInfoInput', + title: 'Components/TableManagement/SeatingInfoInput', component: SeatingInfoInput, } as Meta; diff --git a/src/Containers/SelectBox/SelectBox.stories.tsx b/src/Containers/SelectBox/SelectBox.stories.tsx index d86a2104..c2d53f53 100644 --- a/src/Containers/SelectBox/SelectBox.stories.tsx +++ b/src/Containers/SelectBox/SelectBox.stories.tsx @@ -4,7 +4,7 @@ import { SelectBox, SelectBoxProps } from '../../index'; import { getCaptionForLocale } from '../../Constants'; export default { - title: 'Components/Select Box', + title: 'Components/Other/Select Box', component: SelectBox, argTypes: { onSelect: { action: 'onSelect clicked!' } }, args: { diff --git a/src/Containers/Settings/Settings.stories.tsx b/src/Containers/Settings/Settings.stories.tsx index c3b848a1..7f7293c0 100644 --- a/src/Containers/Settings/Settings.stories.tsx +++ b/src/Containers/Settings/Settings.stories.tsx @@ -4,7 +4,7 @@ import { Settings, SettingsProps } from '../../index'; export default { - title: 'Components/Settings', + title: 'Components/Other/Settings', component: Settings, args: {}, } as Meta; diff --git a/src/Containers/SettingsCard/SettingsCard.stories.tsx b/src/Containers/SettingsCard/SettingsCard.stories.tsx index 7f492d86..75c8be39 100644 --- a/src/Containers/SettingsCard/SettingsCard.stories.tsx +++ b/src/Containers/SettingsCard/SettingsCard.stories.tsx @@ -5,7 +5,7 @@ import { SettingsCard, SettingsCardProps } from '../../index'; export default { - title: 'Components/Settings Card', + title: 'Components/Other/Settings Card', component: SettingsCard, args: { heading: 'SettingsCard', diff --git a/src/Containers/SignUpPopup/SignUpPopup.stories.tsx b/src/Containers/SignUpPopup/SignUpPopup.stories.tsx index be099478..5ae0c997 100644 --- a/src/Containers/SignUpPopup/SignUpPopup.stories.tsx +++ b/src/Containers/SignUpPopup/SignUpPopup.stories.tsx @@ -9,7 +9,7 @@ const handleSubmit = (event: any, data: any) => { }; export default { - title: 'Components/Sign up Pop up', + title: 'Marketing Website/Sign up Pop up', component: SignUpPopup, args: { heading: 'Special Offer - Get 1 month free', diff --git a/src/Containers/SlidingOutPanels/SlidingOutPanels.stories.tsx b/src/Containers/SlidingOutPanels/SlidingOutPanels.stories.tsx index 0226caf3..5454ee5f 100644 --- a/src/Containers/SlidingOutPanels/SlidingOutPanels.stories.tsx +++ b/src/Containers/SlidingOutPanels/SlidingOutPanels.stories.tsx @@ -31,7 +31,7 @@ const images = [ ]; export default { - title: 'Components/Sliding Out Panels', + title: 'Marketing Website/Sliding Out Panels', component: SlidingOutPanels, argTypes: { onClick: { action: 'Clicked' } }, args: { diff --git a/src/Containers/SoldOutCardNotification/SoldOutCardNotification.stories.tsx b/src/Containers/SoldOutCardNotification/SoldOutCardNotification.stories.tsx index 05158a60..dfdef7d5 100644 --- a/src/Containers/SoldOutCardNotification/SoldOutCardNotification.stories.tsx +++ b/src/Containers/SoldOutCardNotification/SoldOutCardNotification.stories.tsx @@ -8,7 +8,7 @@ import { export default { - title: 'Components/SoldOutCardNotification', + title: 'Marketing Website/SoldOutCardNotification', component: SoldOutCardNotification, args: { imgSrc: 'https://vuejobs.com/storage/avatars/GWnaVkQSwifU9Zn36Qzif4GQ38lMSWxLs9NgPaM4.png', diff --git a/src/Containers/SquareTable/SquareTable.stories.tsx b/src/Containers/SquareTable/SquareTable.stories.tsx index 34b9aa3f..eddd1335 100644 --- a/src/Containers/SquareTable/SquareTable.stories.tsx +++ b/src/Containers/SquareTable/SquareTable.stories.tsx @@ -4,7 +4,7 @@ import { ISquareTable, SquareTable } from '@Containers'; export default { - title: 'Components/SquareTable', + title: 'Components/TableManagement/SquareTable', component: SquareTable, } as Meta; diff --git a/src/Containers/Status/Status.stories.tsx b/src/Containers/Status/Status.stories.tsx index 21f32195..b63014f5 100644 --- a/src/Containers/Status/Status.stories.tsx +++ b/src/Containers/Status/Status.stories.tsx @@ -4,7 +4,7 @@ import { Status, StatusProps, StatusColors } from '../../index'; export default { - title: 'Components/Status', + title: 'Terminal/Orders/Status', component: Status, argTypes: { statusColor: { diff --git a/src/Containers/Stock/Stock.stories.tsx b/src/Containers/Stock/Stock.stories.tsx index 655730fb..7d17ca8a 100644 --- a/src/Containers/Stock/Stock.stories.tsx +++ b/src/Containers/Stock/Stock.stories.tsx @@ -4,7 +4,7 @@ import { Stock, StockProps } from '../../index'; export default { - title: 'Components/Stock', + title: 'Components/Analytics/Stock', component: Stock, } as Meta; diff --git a/src/Containers/StoreFeatureCard/StoreFeatureCard.stories.tsx b/src/Containers/StoreFeatureCard/StoreFeatureCard.stories.tsx index a20eb19d..98c085fc 100644 --- a/src/Containers/StoreFeatureCard/StoreFeatureCard.stories.tsx +++ b/src/Containers/StoreFeatureCard/StoreFeatureCard.stories.tsx @@ -6,7 +6,7 @@ import { Cat } from '@styled-icons/fa-solid/Cat'; import { StoreFeatureCard, StoreFeatureCardProps } from '../../index'; export default { - title: 'Components/Store Feature Card', + title: 'Components/Other/Store Feature Card', component: StoreFeatureCard, args: { linktitle: 'VISIT STORE', diff --git a/src/Containers/StoreHoursList/StoreHoursList.stories.tsx b/src/Containers/StoreHoursList/StoreHoursList.stories.tsx index 1acb4638..342f8118 100644 --- a/src/Containers/StoreHoursList/StoreHoursList.stories.tsx +++ b/src/Containers/StoreHoursList/StoreHoursList.stories.tsx @@ -128,7 +128,7 @@ const textHeaders = { const onSave = (categories: any) => console.log(categories); export default { - title: 'Components/StoreHoursList', + title: 'Dashboard/StoreHoursList', component: StoreHoursList, args: { allCategories: defaultCategories, diff --git a/src/Containers/StoreSelector/StoreSelector.stories.tsx b/src/Containers/StoreSelector/StoreSelector.stories.tsx index e35ee99c..18ef2275 100644 --- a/src/Containers/StoreSelector/StoreSelector.stories.tsx +++ b/src/Containers/StoreSelector/StoreSelector.stories.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { StoreSelector, StoreSelectorProps } from '../../index'; export default { - title: 'Components/Store Selector', + title: 'Components/Other/Store Selector', component: StoreSelector, argTypes: { onClickArrows: { action: 'An arrow was clicked' }, diff --git a/src/Containers/StretchableButton/StretchableButton.stories.tsx b/src/Containers/StretchableButton/StretchableButton.stories.tsx index 8fe757c0..72f562b0 100644 --- a/src/Containers/StretchableButton/StretchableButton.stories.tsx +++ b/src/Containers/StretchableButton/StretchableButton.stories.tsx @@ -7,7 +7,7 @@ import { } from './StretchableButton'; export default { - title: 'Components/Stretchable Button', + title: 'Components/ShiftScheduling/Stretchable Button', component: StretchableButton, // argTypes:{ // defaultHeight: {table:{disable:true}}, diff --git a/src/Containers/TabFeature/TabFeature.stories.tsx b/src/Containers/TabFeature/TabFeature.stories.tsx index ba70329b..2cc5aed9 100644 --- a/src/Containers/TabFeature/TabFeature.stories.tsx +++ b/src/Containers/TabFeature/TabFeature.stories.tsx @@ -79,7 +79,7 @@ const DataItems = [ ]; export default { - title: 'Components/TabFeature', + title: 'Marketing Website/TabFeature', component: TabFeature, args: { heading, diff --git a/src/Containers/TableFeature/TableFeature.stories.tsx b/src/Containers/TableFeature/TableFeature.stories.tsx index fdbea8b9..3d8dd7e7 100644 --- a/src/Containers/TableFeature/TableFeature.stories.tsx +++ b/src/Containers/TableFeature/TableFeature.stories.tsx @@ -37,7 +37,7 @@ const data = [ ]; export default { - title: 'Components/TableFeature', + title: 'Marketing Website/TableFeature', component: TableFeature, args: { heading: 'Simplified payout process', diff --git a/src/Containers/TableHeaderCell/TableHeaderCell.stories.tsx b/src/Containers/TableHeaderCell/TableHeaderCell.stories.tsx index 6a300c1d..ce148bd3 100644 --- a/src/Containers/TableHeaderCell/TableHeaderCell.stories.tsx +++ b/src/Containers/TableHeaderCell/TableHeaderCell.stories.tsx @@ -4,7 +4,7 @@ import { TableHeaderCell, TableHeaderCellProps } from '../../index'; export default { - title: 'Components/TableHeaderCell', + title: 'Dashboard/CRM/TableHeaderCell', component: TableHeaderCell, args: { title: 'Name', diff --git a/src/Containers/Tag/Tag.stories.tsx b/src/Containers/Tag/Tag.stories.tsx index b35d5b0c..056da822 100644 --- a/src/Containers/Tag/Tag.stories.tsx +++ b/src/Containers/Tag/Tag.stories.tsx @@ -4,7 +4,7 @@ import { Tag, TagProps } from '../../index'; export default { - title: 'Components/Tag', + title: 'Components/Atoms/Tag', component: Tag, args: { children: 'Hello', diff --git a/src/Containers/TagGroup/TagGroup.stories.tsx b/src/Containers/TagGroup/TagGroup.stories.tsx index a71b1a2c..038299c4 100644 --- a/src/Containers/TagGroup/TagGroup.stories.tsx +++ b/src/Containers/TagGroup/TagGroup.stories.tsx @@ -4,7 +4,7 @@ import { TagGroup, TagGroupProps } from '../../index'; export default { - title: 'Components/TagGroup', + title: 'Components/Molecules/TagGroup', component: TagGroup, args: { tags: [ diff --git a/src/Containers/Timeline/Timeline.stories.tsx b/src/Containers/Timeline/Timeline.stories.tsx index 0d107d25..dd82b67a 100644 --- a/src/Containers/Timeline/Timeline.stories.tsx +++ b/src/Containers/Timeline/Timeline.stories.tsx @@ -9,7 +9,7 @@ import { MainTheme } from '@Themes'; import { Timeline, TimelineProps } from '../../index'; export default { - title: 'Components/Timeline', + title: 'Components/Analytics/Timeline', component: Timeline, } as Meta; diff --git a/src/Containers/TransactionList/TransactionList.stories.tsx b/src/Containers/TransactionList/TransactionList.stories.tsx index 551c3003..3f9751a6 100644 --- a/src/Containers/TransactionList/TransactionList.stories.tsx +++ b/src/Containers/TransactionList/TransactionList.stories.tsx @@ -41,7 +41,7 @@ const sampleData = [ ]; export default { - title: 'Components/TransactionList', + title: 'Marketing Website/TransactionList', component: TransactionList, argTypes: { action: { onClick: 'Clicked!' }, diff --git a/src/Containers/TreeAccordion/TreeAccordion.stories.tsx b/src/Containers/TreeAccordion/TreeAccordion.stories.tsx index ab565f3a..c2d958ba 100644 --- a/src/Containers/TreeAccordion/TreeAccordion.stories.tsx +++ b/src/Containers/TreeAccordion/TreeAccordion.stories.tsx @@ -5,7 +5,7 @@ import { TreeAccordion, ITreeAccordionProps, Paragraph } from '../../index'; export default { - title: 'Components/Tree Accordion', + title: 'Components/Other/Tree Accordion', component: TreeAccordion, args: { header: "Accordion Header", diff --git a/src/Containers/VendorsList/VendorsHeader.stories.tsx b/src/Containers/VendorsList/VendorsHeader.stories.tsx index 14eb88dd..e2d92e8c 100644 --- a/src/Containers/VendorsList/VendorsHeader.stories.tsx +++ b/src/Containers/VendorsList/VendorsHeader.stories.tsx @@ -6,7 +6,7 @@ import { VendorsHeader, IVendorsHeaderProps } from '../../index'; export default { - title: 'Components/Vendors Header', + title: 'Dashboard/CRM/Vendors Header', component: VendorsHeader, } as Meta; diff --git a/src/Containers/VendorsList/VendorsList.stories.tsx b/src/Containers/VendorsList/VendorsList.stories.tsx index 93841c8f..6ecfe1a9 100644 --- a/src/Containers/VendorsList/VendorsList.stories.tsx +++ b/src/Containers/VendorsList/VendorsList.stories.tsx @@ -17,7 +17,7 @@ import { VendorsList, IVendorsListProps } from './VendorsList'; export default { - title: 'Components/Vendors List', + title: 'Dashboard/CRM/Vendors List', component: VendorsList, } as Meta; diff --git a/src/Containers/VendorsList/VendorsNavigationBar.stories.tsx b/src/Containers/VendorsList/VendorsNavigationBar.stories.tsx index 6669a5c6..17db7cbf 100644 --- a/src/Containers/VendorsList/VendorsNavigationBar.stories.tsx +++ b/src/Containers/VendorsList/VendorsNavigationBar.stories.tsx @@ -7,7 +7,7 @@ import { NavigationBar, INavigationBarProps } from './NavigationBar'; export default { - title: 'Components/Vendors Navigation Bar', + title: 'Dashboard/CRM/Vendors Navigation Bar', component: NavigationBar, } as Meta; diff --git a/src/Containers/VerticalTimeline/VerticalTimeline.stories.tsx b/src/Containers/VerticalTimeline/VerticalTimeline.stories.tsx index 0b550b05..16b58712 100644 --- a/src/Containers/VerticalTimeline/VerticalTimeline.stories.tsx +++ b/src/Containers/VerticalTimeline/VerticalTimeline.stories.tsx @@ -5,7 +5,7 @@ import { hoursMinutesToMilliseconds } from '@Utils'; export default { - title: 'Components/VerticalTimeline', + title: 'Components/Other/VerticalTimeline', component: VerticalTimeline, args: { verticalSpacing: 15, diff --git a/src/Containers/VisitNotification/VisitNotification.stories.tsx b/src/Containers/VisitNotification/VisitNotification.stories.tsx index e1e33ded..12fa4187 100644 --- a/src/Containers/VisitNotification/VisitNotification.stories.tsx +++ b/src/Containers/VisitNotification/VisitNotification.stories.tsx @@ -5,7 +5,7 @@ import { IVisitNotificationProps, VisitNotification } from '../../index'; export default { - title: 'Components/VisitNotification', + title: 'Marketing Website/VisitNotification', component: VisitNotification, args: { imgSrc: 'https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI', diff --git a/src/Containers/WaitTimeDisplay/WaitTimeDisplay.stories.tsx b/src/Containers/WaitTimeDisplay/WaitTimeDisplay.stories.tsx index 36cb41e8..10f1844b 100644 --- a/src/Containers/WaitTimeDisplay/WaitTimeDisplay.stories.tsx +++ b/src/Containers/WaitTimeDisplay/WaitTimeDisplay.stories.tsx @@ -4,7 +4,7 @@ import { WaitTimeDisplay, IWaitTimeDisplay } from '../../index'; export default { - title: 'Components/WaitTimeDisplay', + title: 'Components/TableManagement/WaitTimeDisplay', component: WaitTimeDisplay, } as Meta; diff --git a/src/Containers/WarningCard/WarningCard.stories.tsx b/src/Containers/WarningCard/WarningCard.stories.tsx index 64d0d5d8..1f99f98a 100644 --- a/src/Containers/WarningCard/WarningCard.stories.tsx +++ b/src/Containers/WarningCard/WarningCard.stories.tsx @@ -4,7 +4,7 @@ import { WarningCard, IWarningCardProps, SmallText } from '../../index'; export default { - title: 'Components/Warning Card', + title: 'Components/Other/Warning Card', component: WarningCard, argTypes: { action: { action: 'Clicked!' }, diff --git a/src/Inputs/Button/Button.stories.tsx b/src/Inputs/Button/Button.stories.tsx index 6d75cdc0..5b0c601e 100644 --- a/src/Inputs/Button/Button.stories.tsx +++ b/src/Inputs/Button/Button.stories.tsx @@ -5,7 +5,7 @@ import { Button, ButtonProps } from '../../index'; import { getCaptionForLocale } from '../../Constants'; export default { - title: 'Components/Button', + title: 'Components/Atoms/Button', component: Button, argTypes: { onClick: { action: 'Button Click Occurred' } }, args: { diff --git a/src/Inputs/CheckBox/Checkbox.stories.tsx b/src/Inputs/CheckBox/Checkbox.stories.tsx index 66278d68..b7029c31 100644 --- a/src/Inputs/CheckBox/Checkbox.stories.tsx +++ b/src/Inputs/CheckBox/Checkbox.stories.tsx @@ -4,7 +4,7 @@ import { Checkbox, CheckboxProps } from '../../index'; export default { - title: 'Components/CheckBox', + title: 'Components/Atoms/CheckBox', component: Checkbox, argTypes: { onChange: { action: 'Checkbox Click Occurred' } }, args: { diff --git a/src/Inputs/ColorPicker/ColorPicker.stories.tsx b/src/Inputs/ColorPicker/ColorPicker.stories.tsx index 13723395..f75c49d0 100644 --- a/src/Inputs/ColorPicker/ColorPicker.stories.tsx +++ b/src/Inputs/ColorPicker/ColorPicker.stories.tsx @@ -4,7 +4,7 @@ import { ColorPicker, ColorPickerProps } from '../../index'; export default { - title: 'Components/Color picker', + title: 'Dashboard/Loyalty/Color picker', component: ColorPicker, argTypes: { onChange: { action: 'Color changed' } }, args: { diff --git a/src/Inputs/ComboBox/ComboBox.stories.tsx b/src/Inputs/ComboBox/ComboBox.stories.tsx index 174a10e7..ee93f6ea 100644 --- a/src/Inputs/ComboBox/ComboBox.stories.tsx +++ b/src/Inputs/ComboBox/ComboBox.stories.tsx @@ -4,7 +4,7 @@ import { ComboBox, ComboBoxSelectorProps } from '../../index'; export default { - title: 'Components/Combo box', + title: 'Components/Atoms/Combo box', component: ComboBox, argTypes: { onChange: { action: 'Changed' } }, args: { diff --git a/src/Inputs/CustomSearch/CustomSearch.stories.tsx b/src/Inputs/CustomSearch/CustomSearch.stories.tsx index f9d7ee17..da84439e 100644 --- a/src/Inputs/CustomSearch/CustomSearch.stories.tsx +++ b/src/Inputs/CustomSearch/CustomSearch.stories.tsx @@ -4,7 +4,7 @@ import { CustomSearch, CustomSearchProps } from '../../index'; export default { - title: 'Components/Custom Search', + title: 'Components/Other/Custom Search', component: CustomSearch, argTypes: { onPriceChange: { diff --git a/src/Inputs/Datepicker/Datepicker.stories.tsx b/src/Inputs/Datepicker/Datepicker.stories.tsx index c5ba6d51..490c598d 100644 --- a/src/Inputs/Datepicker/Datepicker.stories.tsx +++ b/src/Inputs/Datepicker/Datepicker.stories.tsx @@ -4,7 +4,7 @@ import { Datepicker, DatepickerProps } from '../../index'; export default { - title: 'Components/Datepicker', + title: 'Components/Atoms/Datepicker', component: Datepicker, argTypes: { onChange: { action: `you picked: ` } }, args: { diff --git a/src/Inputs/EmojiPicker/EmojiPicker.stories.tsx b/src/Inputs/EmojiPicker/EmojiPicker.stories.tsx index 8d36e76f..606cb78a 100644 --- a/src/Inputs/EmojiPicker/EmojiPicker.stories.tsx +++ b/src/Inputs/EmojiPicker/EmojiPicker.stories.tsx @@ -4,7 +4,7 @@ import { EmojiPicker, EmojiPickerProps } from '../../index'; export default { - title: 'Components/Emoji picker', + title: 'Dashboard/Loyalty/Emoji picker', component: EmojiPicker, argTypes: { onChange: { action: 'Emoji picked' } }, args: { diff --git a/src/Inputs/ExcelOptions/ExcelOptions.stories.tsx b/src/Inputs/ExcelOptions/ExcelOptions.stories.tsx index 34115394..55c25270 100644 --- a/src/Inputs/ExcelOptions/ExcelOptions.stories.tsx +++ b/src/Inputs/ExcelOptions/ExcelOptions.stories.tsx @@ -4,7 +4,7 @@ import { ExcelOptions, ExcelOptionsProps } from '../../index'; export default { - title: 'Components/Excel options', + title: 'Dashboard/Excel options', component: ExcelOptions, argTypes: { onResult: { action: 'data' } }, args: { diff --git a/src/Inputs/Image/Image.stories.tsx b/src/Inputs/Image/Image.stories.tsx index 8877911a..deb540ef 100644 --- a/src/Inputs/Image/Image.stories.tsx +++ b/src/Inputs/Image/Image.stories.tsx @@ -4,7 +4,7 @@ import { Meta, Story } from '@storybook/react'; import { Image, ImageProps } from '../../index'; export default { - title: 'Components/Image', + title: 'Components/File Upload/Image', component: Image, argTypes: { onImageReturn: { action: 'Image Uploaded' } }, args: { diff --git a/src/Inputs/Input/Input.stories.tsx b/src/Inputs/Input/Input.stories.tsx index df3ea2a0..d505213c 100644 --- a/src/Inputs/Input/Input.stories.tsx +++ b/src/Inputs/Input/Input.stories.tsx @@ -4,7 +4,7 @@ import { Input, InputProps } from '../../index'; export default { - title: 'Components/Input', + title: 'Components/Atoms/Input', component: Input, args: { placeholder: 'Placeholder', diff --git a/src/Inputs/MaskedInput/MaskedInput.stories.tsx b/src/Inputs/MaskedInput/MaskedInput.stories.tsx index a676ccf5..68bbf8d7 100644 --- a/src/Inputs/MaskedInput/MaskedInput.stories.tsx +++ b/src/Inputs/MaskedInput/MaskedInput.stories.tsx @@ -5,7 +5,7 @@ import { useArgs } from '@storybook/client-api'; export default { - title: 'Components/MaskedInput', + title: 'Components/Other/MaskedInput', component: MaskedInput, argTypes: { realValue: { diff --git a/src/Inputs/MutiSelect/Multiselect.stories.tsx b/src/Inputs/MutiSelect/Multiselect.stories.tsx index 67ac0a12..3f5377ec 100644 --- a/src/Inputs/MutiSelect/Multiselect.stories.tsx +++ b/src/Inputs/MutiSelect/Multiselect.stories.tsx @@ -4,7 +4,7 @@ import { MultiSelect, MultiSelectItem, MultiSelectProps } from '../../index'; export default { - title: 'Components/Multi Select', + title: 'Components/Molecules/Multi Select', component: MultiSelect, args: { name: 'Demo', diff --git a/src/Inputs/PartySizeSelector/PartySizeSelector.stories.tsx b/src/Inputs/PartySizeSelector/PartySizeSelector.stories.tsx index 3a7c1a8d..1cbfba7e 100644 --- a/src/Inputs/PartySizeSelector/PartySizeSelector.stories.tsx +++ b/src/Inputs/PartySizeSelector/PartySizeSelector.stories.tsx @@ -4,7 +4,7 @@ import {IPartySizeSelector, PartySizeSelector} from "@Inputs/PartySizeSelector/P import {action} from "@storybook/addon-actions"; export default { - title: 'Components/PartySizeSelector', + title: 'Components/TableManagement/PartySizeSelector', component: PartySizeSelector, } as Meta; diff --git a/src/Inputs/PeopleButton/PeopleButton.stories.tsx b/src/Inputs/PeopleButton/PeopleButton.stories.tsx index 82a20b03..d3652540 100644 --- a/src/Inputs/PeopleButton/PeopleButton.stories.tsx +++ b/src/Inputs/PeopleButton/PeopleButton.stories.tsx @@ -7,7 +7,7 @@ import { getCaptionForLocale } from '../../Constants'; export default { - title: 'Components/PeopleButton', + title: 'Components/TableManagement/PeopleButton', component: PeopleButton, argTypes: { onClick: { action: "People Button Clicked" } }, args: { diff --git a/src/Inputs/Radio/Radio.stories.tsx b/src/Inputs/Radio/Radio.stories.tsx index 17c83079..808e644d 100644 --- a/src/Inputs/Radio/Radio.stories.tsx +++ b/src/Inputs/Radio/Radio.stories.tsx @@ -4,7 +4,7 @@ import { Radio, RadioProps } from '../../index'; export default { - title: 'Components/Radio', + title: 'Components/Atoms/Radio', component: Radio, args: { disabled: false, diff --git a/src/Inputs/SearchBar/SearchBar.stories.tsx b/src/Inputs/SearchBar/SearchBar.stories.tsx index c1d7a1af..9d8780fa 100644 --- a/src/Inputs/SearchBar/SearchBar.stories.tsx +++ b/src/Inputs/SearchBar/SearchBar.stories.tsx @@ -4,7 +4,7 @@ import { SearchBar, SearchBarProps } from '../../index'; export default { - title: 'Components/Search Bar', + title: 'Components/Other/Search Bar', component: SearchBar, argTypes: { onChange: { diff --git a/src/Inputs/SearchBarExpandable/SearchBarExpandable.stories.tsx b/src/Inputs/SearchBarExpandable/SearchBarExpandable.stories.tsx index cd52ff58..254c81fd 100644 --- a/src/Inputs/SearchBarExpandable/SearchBarExpandable.stories.tsx +++ b/src/Inputs/SearchBarExpandable/SearchBarExpandable.stories.tsx @@ -3,7 +3,7 @@ import { Meta, Story } from '@storybook/react'; import { SearchBarExpandable, SearchBarExpandableProps } from '../../index'; export default { - title: 'Components/Search Bar Expandable', + title: 'Components/Atoms/Search Bar Expandable', component: SearchBarExpandable, argTypes: { onChange: { diff --git a/src/Inputs/SegmentedButton/SegmentedButton.stories.tsx b/src/Inputs/SegmentedButton/SegmentedButton.stories.tsx index cd3e7c47..7f063f64 100644 --- a/src/Inputs/SegmentedButton/SegmentedButton.stories.tsx +++ b/src/Inputs/SegmentedButton/SegmentedButton.stories.tsx @@ -5,7 +5,7 @@ import { ISegmentedButtonProps, SegmentedButton } from '../../index'; export default { - title: 'Components/SegmentedButton', + title: 'Components/Other/SegmentedButton', component: SegmentedButton, args: { width: '400px', diff --git a/src/Inputs/Select/Select.stories.tsx b/src/Inputs/Select/Select.stories.tsx index 1a503492..5ecb0efd 100644 --- a/src/Inputs/Select/Select.stories.tsx +++ b/src/Inputs/Select/Select.stories.tsx @@ -6,7 +6,7 @@ import { Select, SelectProps } from '../../index'; // TODO: ADD STATE to component export default { - title: 'Components/Select', + title: 'Components/Atoms/Select', component: Select, argTypes: { onChange: { action: `you selected` } }, args: { diff --git a/src/Inputs/SettingsSwitch/SettingsSwitch.stories.tsx b/src/Inputs/SettingsSwitch/SettingsSwitch.stories.tsx index 79054e64..d9213dc0 100644 --- a/src/Inputs/SettingsSwitch/SettingsSwitch.stories.tsx +++ b/src/Inputs/SettingsSwitch/SettingsSwitch.stories.tsx @@ -4,7 +4,7 @@ import { SettingsSwitch, SettingsSwitchProps } from '../../index'; export default { - title: 'Components/Settings Switch', + title: 'Components/Molecules/Settings Switch', component: SettingsSwitch, argTypes: { onSwitch: { action: 'Switch has been used' } }, args: { diff --git a/src/Inputs/Slider/Slider.stories.tsx b/src/Inputs/Slider/Slider.stories.tsx index 54a00029..15686bc7 100644 --- a/src/Inputs/Slider/Slider.stories.tsx +++ b/src/Inputs/Slider/Slider.stories.tsx @@ -4,7 +4,7 @@ import { Slider, SliderProps } from '../../index'; export default { - title: 'Components/Slider', + title: 'Components/Atoms/Slider', component: Slider, argTypes: { onChange: { diff --git a/src/Inputs/Switch/Switch.stories.tsx b/src/Inputs/Switch/Switch.stories.tsx index 00dd92fd..249e2db3 100644 --- a/src/Inputs/Switch/Switch.stories.tsx +++ b/src/Inputs/Switch/Switch.stories.tsx @@ -4,7 +4,7 @@ import { Switch, SwitchProps } from '../../index'; export default { - title: 'Components/Switch', + title: 'Components/Atoms/Switch', component: Switch, args: { label: 'label', diff --git a/src/Inputs/Textarea/Textarea.stories.tsx b/src/Inputs/Textarea/Textarea.stories.tsx index 5e02d5cd..6afcb8e0 100644 --- a/src/Inputs/Textarea/Textarea.stories.tsx +++ b/src/Inputs/Textarea/Textarea.stories.tsx @@ -4,7 +4,7 @@ import { Textarea, TextareaProps } from '../../index'; export default { - title: 'Components/Text area', + title: 'Components/Atoms/Text area', component: Textarea, args: { placeholder: 'placeholder', diff --git a/src/Inputs/Timepicker/Timepicker.stories.tsx b/src/Inputs/Timepicker/Timepicker.stories.tsx index dc6e7460..61eece0b 100644 --- a/src/Inputs/Timepicker/Timepicker.stories.tsx +++ b/src/Inputs/Timepicker/Timepicker.stories.tsx @@ -5,7 +5,7 @@ import { Timepicker, TimepickerProps } from '../../index'; export default { - title: 'Components/Timepicker', + title: 'Components/Atoms/Timepicker', component: Timepicker, argTypes: { timePickerValue: { diff --git a/src/Inputs/VoiceButton/VoiceButton.stories.tsx b/src/Inputs/VoiceButton/VoiceButton.stories.tsx index 6b476ee6..dcb19c49 100644 --- a/src/Inputs/VoiceButton/VoiceButton.stories.tsx +++ b/src/Inputs/VoiceButton/VoiceButton.stories.tsx @@ -6,7 +6,7 @@ import { VoiceButton } from '../../index'; import { VoiceButtonProps } from '..'; export default { - title: 'Components/VoiceButton', + title: 'Voice User Interface/VoiceButton', component: VoiceButton, argTypes: { onClick: { action: 'Button Click Occurred' } }, args: { diff --git a/src/Text/ClickableSmallText/ClickableSmallText.stories.tsx b/src/Text/ClickableSmallText/ClickableSmallText.stories.tsx index aba4b5c5..d4a6fedd 100644 --- a/src/Text/ClickableSmallText/ClickableSmallText.stories.tsx +++ b/src/Text/ClickableSmallText/ClickableSmallText.stories.tsx @@ -4,7 +4,7 @@ import { ClickableSmallText, SmallTextProps } from '../../index'; export default { - title: 'Components/Clickable Text', + title: 'Components/Other/Clickable Text', component: ClickableSmallText, args: { children: 'Hello World', diff --git a/src/Text/Heading/Heading.stories.tsx b/src/Text/Heading/Heading.stories.tsx index 76dd90a1..e532a988 100644 --- a/src/Text/Heading/Heading.stories.tsx +++ b/src/Text/Heading/Heading.stories.tsx @@ -4,7 +4,7 @@ import { Heading, HeadingProps } from '../../index'; export default { - title: 'Components/Headings', + title: 'Components/Atoms/Headings', component: Heading, args: { children: 'Hello World', diff --git a/src/Text/LeftRightText/LeftRightText.stories.tsx b/src/Text/LeftRightText/LeftRightText.stories.tsx index 872f2033..f266a631 100644 --- a/src/Text/LeftRightText/LeftRightText.stories.tsx +++ b/src/Text/LeftRightText/LeftRightText.stories.tsx @@ -4,7 +4,7 @@ import {LeftRightText} from './LeftRightText'; export default { - title: 'Components/Order Item', + title: 'Terminal/Orders/Item', component: LeftRightText, args: { leftText: 'Test', diff --git a/src/Text/OrderID/OrderID.stories.tsx b/src/Text/OrderID/OrderID.stories.tsx index 1f595e23..10ad8134 100644 --- a/src/Text/OrderID/OrderID.stories.tsx +++ b/src/Text/OrderID/OrderID.stories.tsx @@ -4,7 +4,7 @@ import { OrderID, IOrderIDProps } from './OrderID'; export default { - title: 'Components/Order ID', + title: 'Terminal/Orders/ID', component: OrderID, args: { orderId: 'e2c3', diff --git a/src/Text/OrderPaymentMethod/PaymentMethod.stories.tsx b/src/Text/OrderPaymentMethod/PaymentMethod.stories.tsx index 1223fc57..2351ca6d 100644 --- a/src/Text/OrderPaymentMethod/PaymentMethod.stories.tsx +++ b/src/Text/OrderPaymentMethod/PaymentMethod.stories.tsx @@ -8,7 +8,7 @@ import { export default { - title: 'Components/Order Payment Method', + title: 'Terminal/Orders/Payment Method', component: OrderPaymentMethod, argTypes: { paymentMethod: { diff --git a/src/Text/OrderType/OrderType.stories.tsx b/src/Text/OrderType/OrderType.stories.tsx index b43bf608..3dd79a80 100644 --- a/src/Text/OrderType/OrderType.stories.tsx +++ b/src/Text/OrderType/OrderType.stories.tsx @@ -4,7 +4,7 @@ import { OrderType, OrderTypeIdentifier, IOrderTypeProps } from './OrderType'; export default { - title: 'Components/Order Type', + title: 'Terminal/Orders/Type', component: OrderType, argTypes: { orderType: { diff --git a/src/Text/Paragraph/Paragraph.stories.tsx b/src/Text/Paragraph/Paragraph.stories.tsx index db9de0bc..afff5bd4 100644 --- a/src/Text/Paragraph/Paragraph.stories.tsx +++ b/src/Text/Paragraph/Paragraph.stories.tsx @@ -4,7 +4,7 @@ import { Paragraph, ParagraphProps } from '../../index'; export default { - title: 'Components/Paragraph', + title: 'Components/Atoms/Paragraph', component: Paragraph, args: { children: 'Hello World', diff --git a/src/Text/SmallText/SmallText.stories.tsx b/src/Text/SmallText/SmallText.stories.tsx index 6d6e04af..cab70af6 100644 --- a/src/Text/SmallText/SmallText.stories.tsx +++ b/src/Text/SmallText/SmallText.stories.tsx @@ -4,7 +4,7 @@ import { SmallText, SmallTextProps } from '../../index'; export default { - title: 'Components/Text', + title: 'Components/Atoms/Text', component: SmallText, args: { children: 'Hello World', From ea5dcc240a28cf16812fe1da2bf6750fcb99e513 Mon Sep 17 00:00:00 2001 From: roggc Date: Sun, 23 Jan 2022 19:39:10 +0100 Subject: [PATCH 58/74] create the files --- src/Containers/FileUploadV2/FileUploadV2.stories.tsx | 0 src/Containers/FileUploadV2/FileUploadV2.tsx | 0 src/Containers/FileUploadV2/useInformativePanels.ts | 0 src/Containers/FileUploadV2/worker.ts | 0 src/Utils/Hooks/useGetWidth.ts | 0 5 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/Containers/FileUploadV2/FileUploadV2.stories.tsx create mode 100644 src/Containers/FileUploadV2/FileUploadV2.tsx create mode 100644 src/Containers/FileUploadV2/useInformativePanels.ts create mode 100644 src/Containers/FileUploadV2/worker.ts create mode 100644 src/Utils/Hooks/useGetWidth.ts diff --git a/src/Containers/FileUploadV2/FileUploadV2.stories.tsx b/src/Containers/FileUploadV2/FileUploadV2.stories.tsx new file mode 100644 index 00000000..e69de29b diff --git a/src/Containers/FileUploadV2/FileUploadV2.tsx b/src/Containers/FileUploadV2/FileUploadV2.tsx new file mode 100644 index 00000000..e69de29b diff --git a/src/Containers/FileUploadV2/useInformativePanels.ts b/src/Containers/FileUploadV2/useInformativePanels.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/Containers/FileUploadV2/worker.ts b/src/Containers/FileUploadV2/worker.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/Utils/Hooks/useGetWidth.ts b/src/Utils/Hooks/useGetWidth.ts new file mode 100644 index 00000000..e69de29b From f598a8925979ff6c70ec11385e3921bd5937e9f6 Mon Sep 17 00:00:00 2001 From: roggc Date: Sun, 23 Jan 2022 19:40:51 +0100 Subject: [PATCH 59/74] fill useGetWidth.ts --- src/Utils/Hooks/index.ts | 1 + src/Utils/Hooks/useGetWidth.ts | 20 ++++++++++++++++++++ 2 files changed, 21 insertions(+) diff --git a/src/Utils/Hooks/index.ts b/src/Utils/Hooks/index.ts index 06a07077..d7ce36c0 100644 --- a/src/Utils/Hooks/index.ts +++ b/src/Utils/Hooks/index.ts @@ -3,3 +3,4 @@ export * from './useHandler'; export * from './useTransition'; export * from './useMounted'; export * from './useMap'; +export * from './useGetWidth'; diff --git a/src/Utils/Hooks/useGetWidth.ts b/src/Utils/Hooks/useGetWidth.ts index e69de29b..fe1824ff 100644 --- a/src/Utils/Hooks/useGetWidth.ts +++ b/src/Utils/Hooks/useGetWidth.ts @@ -0,0 +1,20 @@ +import { useState, useRef, useEffect } from 'react'; + +/** + * gets the width of a component which extends HTMLDivElement props + */ +export const useGetWidth = (): readonly [ + number | undefined, + React.RefObject, +] => { + const [width, setWidth] = useState(); + const ref = useRef(null); + + useEffect(() => { + if (ref.current) { + setWidth(ref.current.getBoundingClientRect().width); + } + }, []); + + return [width, ref] as const; +}; From fdec54f70cc6b34dd036a6b4ab88fa9adb602685 Mon Sep 17 00:00:00 2001 From: roggc Date: Sun, 23 Jan 2022 19:41:57 +0100 Subject: [PATCH 60/74] fill useInformativePanels.ts --- .../FileUploadV2/useInformativePanels.ts | 204 ++++++++++++++++++ 1 file changed, 204 insertions(+) diff --git a/src/Containers/FileUploadV2/useInformativePanels.ts b/src/Containers/FileUploadV2/useInformativePanels.ts index e69de29b..9a2af4e1 100644 --- a/src/Containers/FileUploadV2/useInformativePanels.ts +++ b/src/Containers/FileUploadV2/useInformativePanels.ts @@ -0,0 +1,204 @@ +import {useState,useCallback,useEffect} from 'react' +import { useMounted } from '@Utils/Hooks'; +import {OperationState} from '../PanelCard/PanelCard'; +// @ts-ignore +import worker from 'workerize-loader!./worker'; // eslint-disable-line + +const NO_BASE64STRINGFILE = 'NO_BASE64STRINGFILE'; + +interface IPanel { + /** whether it's loading file, is completed, is failure */ + operationState: OperationState; + /** name of file associated with the informative panel */ + name: string; + /** worker; will do the job of reading the file */ + worker: Worker | null; + /** the file associated with the informative panel */ + file: File | null; +} + +interface IInformativePanels { + /** array of panels */ + panels: IPanel[]; + /** names of files already uploaded, or failed, or cancelled */ + makeItDisappear: string[]; + /** names of files for which we want to start workers */ + startWorkers: string[]; +} + +export const useInformativePanels = ( + isTestIsFailure: boolean, + onFile: (base64StringFile: string) => void, + messageDuration: number, +): readonly [ + IPanel[], + (acceptedFiles: File[]) => void, + (name: string) => () => void, +] => { + const isMounted = useMounted(); + const [informativePanels, setInformativePanels] = + useState({ + panels: [], + makeItDisappear: [], + startWorkers: [], + }); + + /** + * set end state + */ + const prepareForEndInformativePanel = useCallback( + (operationState: OperationState, informativePanel: IPanel): void => { + setInformativePanels((prev) => ({ + ...prev, + panels: prev.panels.map((panel) => { + if (panel.name === informativePanel.name) + return { + ...panel, + operationState, + }; + return panel; + }), + makeItDisappear: [ + ...prev.makeItDisappear, + informativePanel.name, + ], + })); + }, + [], + ); + + /** + * terminate worker and set state of informative panel to success or failure and + * send order to remove informative panel in the future. also do whatever user + * wants to do with the file read in case of success + */ + const onWorkerMessage = useCallback( + (e: any) => { + const { base64StringFile, name } = e.data; + if (base64StringFile === undefined) { + return; + } + const informativePanel = informativePanels.panels.find( + (panel) => panel.name === name, + ); + if (informativePanel) { + if ( + base64StringFile === NO_BASE64STRINGFILE || + isTestIsFailure + ) { + prepareForEndInformativePanel( + OperationState.isFailure, + informativePanel, + ); + } else { + onFile(base64StringFile); + prepareForEndInformativePanel( + OperationState.isSuccess, + informativePanel, + ); + } + } + }, + [ + informativePanels.panels, + isTestIsFailure, + onFile, + prepareForEndInformativePanel, + ], + ); + + // start workers after files have been droped and array of informative panels + // are loaded + useEffect(() => { + if (informativePanels.startWorkers.length) { + informativePanels.startWorkers.forEach((name) => { + const informativePanel = informativePanels.panels.find( + (panel) => panel.name === name, + ); + if (informativePanel && informativePanel.worker) { + informativePanel.worker.onmessage = onWorkerMessage; + informativePanel.worker?.postMessage({ + file: informativePanel.file, + }); + } + }); + setInformativePanels((prev) => ({ + ...prev, + startWorkers: [], + })); + } + }, [informativePanels.startWorkers.length]); + + // make disappear informative panels in the future + useEffect(() => { + if (informativePanels.makeItDisappear.length) { + informativePanels.makeItDisappear.forEach((name) => { + setTimeout(() => { + if (isMounted.current) { + setInformativePanels((prev) => ({ + ...prev, + panels: prev.panels.filter((panel) => { + if (panel.name === name) { + panel.worker?.terminate(); + return false; + } + return true; + }), + makeItDisappear: prev.makeItDisappear.filter( + (name_) => name_ !== name, + ), + })); + } + }, messageDuration); + }); + } + }, [informativePanels.makeItDisappear.length]); + + // terminate workers on clean up function + useEffect( + () => () => { + if (!isMounted.current) { + informativePanels.panels.forEach((panel) => + panel.worker?.terminate(), + ); + } + }, + [informativePanels.panels], + ); + + /** + * load array of informative panels and send order to start workers + */ + const onDrop = useCallback((acceptedFiles: File[]) => { + const newInformativePanels = acceptedFiles.map((file) => { + const workerInstance = worker(); + return { + operationState: OperationState.isLoading, + name: file.name, + worker: workerInstance, + file, + }; + }); + const fileNames = acceptedFiles.map((file) => file.name); + setInformativePanels((prev) => ({ + ...prev, + panels: [...prev.panels, ...newInformativePanels], + startWorkers: [...fileNames], + })); + }, []); + + const onCancelUploading = (name: string) => () => { + setInformativePanels((prev) => ({ + ...prev, + panels: prev.panels.filter((panel) => { + if (panel.name === name) { + panel.worker?.terminate(); + return false; + } + return true; + }), + })); + }; + + return [informativePanels.panels, onDrop, onCancelUploading] as const; +}; From 2fdc6c04aa45917a1f6a84fa6cec1388dc1e0f0b Mon Sep 17 00:00:00 2001 From: roggc Date: Sun, 23 Jan 2022 19:42:35 +0100 Subject: [PATCH 61/74] fill worker.ts --- src/Containers/FileUploadV2/worker.ts | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/Containers/FileUploadV2/worker.ts b/src/Containers/FileUploadV2/worker.ts index e69de29b..17a094d9 100644 --- a/src/Containers/FileUploadV2/worker.ts +++ b/src/Containers/FileUploadV2/worker.ts @@ -0,0 +1,24 @@ +onmessage = (e) => { + const { file } = e.data; + const reader = new FileReader(); + reader.onload = () => { + let base64StringFile = 'NO_BASE64STRINGFILE'; + if (reader.result) { + if (typeof reader.result === 'string') { + base64StringFile = btoa(reader.result); + } else { + const bytes = Array.from(new Uint8Array(reader.result)); + base64StringFile = btoa( + bytes.map((item) => String.fromCharCode(item)).join(''), + ); + } + } + postMessage({ base64StringFile,name:file.name }); + }; + try{ + reader.readAsArrayBuffer(file); + }catch(error){ + console.log(error); + postMessage({}); + } +}; \ No newline at end of file From 13fbde6db740ef8d814f7981a742edb8df367ace Mon Sep 17 00:00:00 2001 From: roggc Date: Sun, 23 Jan 2022 19:44:41 +0100 Subject: [PATCH 62/74] fill fileuploadv2.tsx --- src/Containers/FileUploadV2/FileUploadV2.tsx | 72 ++++++++++++++++++++ 1 file changed, 72 insertions(+) diff --git a/src/Containers/FileUploadV2/FileUploadV2.tsx b/src/Containers/FileUploadV2/FileUploadV2.tsx index e69de29b..e7a44912 100644 --- a/src/Containers/FileUploadV2/FileUploadV2.tsx +++ b/src/Containers/FileUploadV2/FileUploadV2.tsx @@ -0,0 +1,72 @@ +import React from 'react'; +import styled from 'styled-components'; +import { MainInterface, Main } from '@Utils/BaseStyles'; +import { Button } from '@Inputs/Button/Button'; +import { useGetWidth } from '@Utils/Hooks'; +import { PanelCard } from '../PanelCard/PanelCard'; +import { DropArea, IDropAreaProps } from '../DropArea/DropArea'; +import { useInformativePanels } from './useInformativePanels'; + +export interface IFileUploadV2Props + extends MainInterface, + React.HTMLAttributes { + /** if true, failure message will appear even after success operation; its purpose is to test the appearance of the failure message during development */ + isTestIsFailure?: boolean; + /** + * function to process the file read and transformed to a base64 string; default: does nothing + * @param {string} base64String the file read and transformed to a base64 string + */ + onFile?: (base64String: string) => void; + /** time in ms of the presence of the bottom panel informing the result of the operation (sucess or failure); default value: 1500 */ + messageDuration?: number; + dropAreaProps?: IDropAreaProps; +} +/** + * multiple file upload, in parallel, version 2 + */ +export const FileUploadV2: React.FC = ({ + isTestIsFailure = false, + onFile = (base64String: string) => null, + messageDuration = 1500, + dropAreaProps = {}, + ...props +}): React.ReactElement => { + const [panels, onDrop, onCancelUploading] = useInformativePanels( + isTestIsFailure, + onFile, + messageDuration, + ); + const [dropAreaWidth, dropAreaRef] = useGetWidth(); + + return ( + + + {panels.map((panel) => ( + + Cancel + + } + name={panel.name} + operationState={panel.operationState} + margin="10px 0" + style={{ width: dropAreaWidth, boxSizing: 'border-box' }} + /> + ))} + + ); +}; + +const FileUploadV2Container = styled.div` + background-color: ${({ theme }) => theme.colors.background}; + border-radius: ${({ theme }) => theme.dimensions.radius}; + width: fit-content; + ${({ theme, ...props }): string => + Main({ padding: theme.dimensions.padding.container, ...props })} +`; From 2f0baec014bcc8d686fc646a0e805d60271b61a1 Mon Sep 17 00:00:00 2001 From: roggc Date: Sun, 23 Jan 2022 19:45:27 +0100 Subject: [PATCH 63/74] fill fileuploadv2.stories.tsx --- .../FileUploadV2/FileUploadV2.stories.tsx | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/Containers/FileUploadV2/FileUploadV2.stories.tsx b/src/Containers/FileUploadV2/FileUploadV2.stories.tsx index e69de29b..9e801aa7 100644 --- a/src/Containers/FileUploadV2/FileUploadV2.stories.tsx +++ b/src/Containers/FileUploadV2/FileUploadV2.stories.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import { FileUploadV2, IFileUploadV2Props } from './FileUploadV2'; + +export default { + title: 'Components/FileUploadV2', + component: FileUploadV2, + args: { + onFile:(base64StringFile:string)=>{console.log(base64StringFile)}, + dropAreaProps:{ + width:400 + } + }, +} as Meta; + +export const Basic: Story = (args) => ( + +); + +export const TestIsFailure = Basic.bind({}); +TestIsFailure.args = { + ...Basic.args, + isTestIsFailure:true +}; From d7f598da7eaae9f29369d667f318f058ce98cc32 Mon Sep 17 00:00:00 2001 From: roggc Date: Sun, 23 Jan 2022 19:47:31 +0100 Subject: [PATCH 64/74] add forwardref to dropArea component --- src/Containers/DropArea/DropArea.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Containers/DropArea/DropArea.tsx b/src/Containers/DropArea/DropArea.tsx index 4a300cb3..78c22dcb 100644 --- a/src/Containers/DropArea/DropArea.tsx +++ b/src/Containers/DropArea/DropArea.tsx @@ -54,7 +54,7 @@ export interface IDropAreaProps extends DropzoneType { dropzoneProps?: DropzoneOptions; } -export const DropArea: React.FC = ({ +export const DropArea = React.forwardRef(({ message = 'Drag & Drop your files here', buttonText = 'Browse Files', onClickHandler = () => null, @@ -66,7 +66,7 @@ export const DropArea: React.FC = ({ width, dropzoneProps = {}, ...props -}): React.ReactElement => { +},dropAreaRef): React.ReactElement => { const { getInputProps, getRootProps, isDragActive, open } = useDropzone({ onDragEnter, onDragLeave, @@ -95,7 +95,7 @@ export const DropArea: React.FC = ({ return ( {() => ( - + = ({ )} ); -}; +}); const RootDiv = styled.div<{ isDisabled: boolean }>` width: fit-content; From a6fa01112ad9501950b56008f53f00f4a3eaf29f Mon Sep 17 00:00:00 2001 From: roggc Date: Mon, 24 Jan 2022 16:23:28 +0100 Subject: [PATCH 65/74] make it work --- .../FileUploadV2/FileUploadV2.stories.tsx | 23 +++++--- src/Containers/FileUploadV2/FileUploadV2.tsx | 51 ++++++++++++------ src/Containers/PanelListWrapper/useFadeOut.ts | 53 +++++++------------ .../useSequentiallyAddedPanels.ts | 34 +++++++++--- 4 files changed, 98 insertions(+), 63 deletions(-) diff --git a/src/Containers/FileUploadV2/FileUploadV2.stories.tsx b/src/Containers/FileUploadV2/FileUploadV2.stories.tsx index 9e801aa7..929016f2 100644 --- a/src/Containers/FileUploadV2/FileUploadV2.stories.tsx +++ b/src/Containers/FileUploadV2/FileUploadV2.stories.tsx @@ -1,15 +1,14 @@ import React from 'react'; import { Meta, Story } from '@storybook/react'; import { FileUploadV2, IFileUploadV2Props } from './FileUploadV2'; - + export default { title: 'Components/FileUploadV2', component: FileUploadV2, args: { - onFile:(base64StringFile:string)=>{console.log(base64StringFile)}, - dropAreaProps:{ - width:400 - } + dropAreaProps: { + width: 400, + }, }, } as Meta; @@ -17,8 +16,20 @@ export const Basic: Story = (args) => ( ); +export const PanelsAreNotSequentiallyAdded = Basic.bind({}); +PanelsAreNotSequentiallyAdded.args = { + ...Basic.args, + isSequentially: false, +}; + +export const LongDelay = Basic.bind({}); +LongDelay.args = { + ...Basic.args, + delay: 100, +}; + export const TestIsFailure = Basic.bind({}); TestIsFailure.args = { ...Basic.args, - isTestIsFailure:true + isTestIsFailure: true, }; diff --git a/src/Containers/FileUploadV2/FileUploadV2.tsx b/src/Containers/FileUploadV2/FileUploadV2.tsx index e7a44912..19cbf9cc 100644 --- a/src/Containers/FileUploadV2/FileUploadV2.tsx +++ b/src/Containers/FileUploadV2/FileUploadV2.tsx @@ -1,10 +1,11 @@ -import React from 'react'; +import React,{useCallback} from 'react'; import styled from 'styled-components'; import { MainInterface, Main } from '@Utils/BaseStyles'; import { Button } from '@Inputs/Button/Button'; import { useGetWidth } from '@Utils/Hooks'; -import { PanelCard } from '../PanelCard/PanelCard'; import { DropArea, IDropAreaProps } from '../DropArea/DropArea'; +import { PanelListWrapper as PLW } from '../PanelListWrapper/PanelListWrapper'; +import { IPanelCardProps } from '../PanelCard/PanelCard'; import { useInformativePanels } from './useInformativePanels'; export interface IFileUploadV2Props @@ -20,6 +21,8 @@ export interface IFileUploadV2Props /** time in ms of the presence of the bottom panel informing the result of the operation (sucess or failure); default value: 1500 */ messageDuration?: number; dropAreaProps?: IDropAreaProps; + isSequentially?:boolean; + delay?:number; } /** * multiple file upload, in parallel, version 2 @@ -29,6 +32,8 @@ export const FileUploadV2: React.FC = ({ onFile = (base64String: string) => null, messageDuration = 1500, dropAreaProps = {}, + isSequentially=true, + delay=15, ...props }): React.ReactElement => { const [panels, onDrop, onCancelUploading] = useInformativePanels( @@ -38,6 +43,20 @@ export const FileUploadV2: React.FC = ({ ); const [dropAreaWidth, dropAreaRef] = useGetWidth(); + const panelPropertiesMapper=useCallback(():IPanelCardProps[]=>panels.map((panel) => { + const mappedPanel= ({ + name: panel.name, + operationState: panel.operationState, + cancelButtonOnLoading: ( + + ) + }) + + return mappedPanel; + }),[panels]) + return ( = ({ {...dropAreaProps} ref={dropAreaRef} /> - {panels.map((panel) => ( - - Cancel - - } - name={panel.name} - operationState={panel.operationState} - margin="10px 0" - style={{ width: dropAreaWidth, boxSizing: 'border-box' }} - /> - ))} + ); }; @@ -70,3 +82,10 @@ const FileUploadV2Container = styled.div` ${({ theme, ...props }): string => Main({ padding: theme.dimensions.padding.container, ...props })} `; + +const PanelListWrapper = styled(PLW)<{ width?: number }>` + box-sizing: border-box; + ${({ width }) => ` +${width ? `width:${width}px;` : ''} +`} +`; diff --git a/src/Containers/PanelListWrapper/useFadeOut.ts b/src/Containers/PanelListWrapper/useFadeOut.ts index 41c19869..ca6b0b96 100644 --- a/src/Containers/PanelListWrapper/useFadeOut.ts +++ b/src/Containers/PanelListWrapper/useFadeOut.ts @@ -1,4 +1,4 @@ -import { useEffect, useState, useRef } from 'react'; +import { useEffect, useState } from 'react'; import { IPanelCardProps } from '../PanelCard/PanelCard'; /** @@ -15,44 +15,29 @@ export const useFadeOut = ( }[], () => void, ] => { - const previousPanelsAmmount = useRef(); const [internalPanels, setInternalPanels] = useState( panels.map((panel) => ({ panel, isShown: true })), ); useEffect(() => { - if ( - previousPanelsAmmount.current === undefined || - previousPanelsAmmount.current > panels.length - ) { - // remove panels marking them as isShown false - setInternalPanels((prev) => - prev.map((internalPanel) => { - if ( - !panels.some( - (panel) => panel.name === internalPanel.panel.name, - ) - ) { - return { ...internalPanel, isShown: false }; - } - return internalPanel; - }), - ); - } else { - // add internal panels - const panelsToAdd = panels.filter( - (panel) => - !internalPanels.some( - (internalPanel) => - internalPanel.panel.name === panel.name, - ), - ); - setInternalPanels((prev) => [ - ...prev, - ...panelsToAdd.map((panel) => ({ panel, isShown: true })), - ]); - } - previousPanelsAmmount.current = panels.length; + setInternalPanels((prev) => [ + ...prev.map((prevPanel) => { + const foundPanel = panels.find( + (panel) => panel.name === prevPanel.panel.name, + ); + if (foundPanel) + return { panel: foundPanel, isShown: prevPanel.isShown }; + return { ...prevPanel, isShown: false }; + }), + ...panels + .filter( + (panel) => + !prev.some( + (prevPanel) => prevPanel.panel.name === panel.name, + ), + ) + .map((panel) => ({ panel, isShown: true })), + ]); }, [panels]); const removePanelsIsShownIsFalse = () => { diff --git a/src/Containers/PanelListWrapper/useSequentiallyAddedPanels.ts b/src/Containers/PanelListWrapper/useSequentiallyAddedPanels.ts index 8197f209..4493ac85 100644 --- a/src/Containers/PanelListWrapper/useSequentiallyAddedPanels.ts +++ b/src/Containers/PanelListWrapper/useSequentiallyAddedPanels.ts @@ -17,24 +17,44 @@ export const useSequentiallyAddedPanels = ( useEffect(() => { if ( - previousPanelsLength.current===undefined || + previousPanelsLength.current === undefined || previousPanelsLength.current < panels.length ) { setTimeout(() => { const panelToAdd = panels[panelIndexCounter]; if (panelToAdd) { - setInternalPanels((prev) => [...prev, panelToAdd]); + setInternalPanels((prev) => [ + ...prev + .filter((_, index) => index !== panelIndexCounter) + .map((prevPanel) => { + const foundPanel = panels.find( + (panel) => prevPanel.name === panel.name, + ); + if (foundPanel) return foundPanel; + return prevPanel; + }), + panelToAdd, + ]); setPanelIndexCounter((prev) => prev + 1); } else { previousPanelsLength.current = panels.length; } }, delay); } else { - setInternalPanels((prev) => - prev.filter((internalPanel) => - panels.some((panel) => panel.name === internalPanel.name), - ), - ); + setInternalPanels((prev) => [ + ...prev + .filter((prevPanel) => + panels.some((panel) => panel.name === prevPanel.name), + ) + .map((prevPanel) => { + const foundPanel = panels.find( + (panel) => panel.name === prevPanel.name, + ); + if (foundPanel) return foundPanel; + console.log('noooooooooooo!!!!!!!!!!!'); + return prevPanel; + }), + ]); setPanelIndexCounter(panels.length); previousPanelsLength.current = panels.length; } From 75b5ded7078f6f573b7b74fb920c575ec15cca86 Mon Sep 17 00:00:00 2001 From: roggc Date: Mon, 24 Jan 2022 20:07:58 +0100 Subject: [PATCH 66/74] little modification to the code and add some comments --- .../PanelListWrapper/useSequentiallyAddedPanels.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/Containers/PanelListWrapper/useSequentiallyAddedPanels.ts b/src/Containers/PanelListWrapper/useSequentiallyAddedPanels.ts index 4493ac85..4378410a 100644 --- a/src/Containers/PanelListWrapper/useSequentiallyAddedPanels.ts +++ b/src/Containers/PanelListWrapper/useSequentiallyAddedPanels.ts @@ -20,12 +20,16 @@ export const useSequentiallyAddedPanels = ( previousPanelsLength.current === undefined || previousPanelsLength.current < panels.length ) { + // add panels setTimeout(() => { const panelToAdd = panels[panelIndexCounter]; if (panelToAdd) { setInternalPanels((prev) => [ ...prev - .filter((_, index) => index !== panelIndexCounter) + .filter( + (prevPanel) => + prevPanel.name !== panelToAdd.name, + ) .map((prevPanel) => { const foundPanel = panels.find( (panel) => prevPanel.name === panel.name, @@ -41,6 +45,7 @@ export const useSequentiallyAddedPanels = ( } }, delay); } else { + // remove panels setInternalPanels((prev) => [ ...prev .filter((prevPanel) => @@ -51,7 +56,6 @@ export const useSequentiallyAddedPanels = ( (panel) => panel.name === prevPanel.name, ); if (foundPanel) return foundPanel; - console.log('noooooooooooo!!!!!!!!!!!'); return prevPanel; }), ]); From 533cb8404cad7e9345bddf91e3b5f9d751049ac6 Mon Sep 17 00:00:00 2001 From: roggc Date: Tue, 25 Jan 2022 15:58:50 +0100 Subject: [PATCH 67/74] use object destructuration --- src/Containers/FileUploadV2/FileUploadV2.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/Containers/FileUploadV2/FileUploadV2.tsx b/src/Containers/FileUploadV2/FileUploadV2.tsx index 19cbf9cc..15ab6d06 100644 --- a/src/Containers/FileUploadV2/FileUploadV2.tsx +++ b/src/Containers/FileUploadV2/FileUploadV2.tsx @@ -44,9 +44,10 @@ export const FileUploadV2: React.FC = ({ const [dropAreaWidth, dropAreaRef] = useGetWidth(); const panelPropertiesMapper=useCallback(():IPanelCardProps[]=>panels.map((panel) => { + const {name,operationState}=panel; const mappedPanel= ({ - name: panel.name, - operationState: panel.operationState, + name, + operationState, cancelButtonOnLoading: ( ) diff --git a/src/Containers/FileUploadV2/useInformativePanels.ts b/src/Containers/FileUploadV2/useInformativePanels.ts index 7ecbcd4f..b522a7ab 100644 --- a/src/Containers/FileUploadV2/useInformativePanels.ts +++ b/src/Containers/FileUploadV2/useInformativePanels.ts @@ -1,6 +1,6 @@ -import {useState,useCallback,useEffect} from 'react' +import { useState, useCallback, useEffect } from 'react'; import { useMounted } from '@Utils/Hooks'; -import {OperationState} from '../PanelCard/PanelCard'; +import { OperationState } from '../PanelCard/PanelCard'; // @ts-ignore import worker from 'workerize-loader!./worker'; // eslint-disable-line @@ -51,7 +51,7 @@ export const useInformativePanels = ( setInformativePanels((prev) => ({ ...prev, panels: prev.panels.map((panel) => { - const {name}=panel; + const { name } = panel; if (name === informativePanel.name) return { ...panel, @@ -83,17 +83,17 @@ export const useInformativePanels = ( (panel) => panel.name === name, ); if (informativePanel) { - let operationState:OperationState=OperationState.isUnknown; + let operationState: OperationState = OperationState.isUnknown; if ( base64StringFile === NO_BASE64STRINGFILE || isTestIsFailure ) { - operationState=OperationState.isFailure; + operationState = OperationState.isFailure; } else { onFile(base64StringFile); - operationState=OperationState.isSuccess; + operationState = OperationState.isSuccess; } - prepareForEndInformativePanel(operationState,informativePanel); + prepareForEndInformativePanel(operationState, informativePanel); } }, [ @@ -107,17 +107,22 @@ export const useInformativePanels = ( // start workers after files have been droped and array of informative panels // are loaded useEffect(() => { - if (informativePanels.startWorkers.length) { - informativePanels.startWorkers.forEach((name) => { - const informativePanel = informativePanels.panels.find( + const { startWorkers } = informativePanels; + if (startWorkers.length) { + startWorkers.forEach((name) => { + const { panels } = informativePanels; + const informativePanel = panels.find( (panel) => panel.name === name, ); - if (informativePanel && informativePanel.worker) { - const {worker:informativePanelWorker}=informativePanel; - informativePanelWorker.onmessage = onWorkerMessage; - informativePanelWorker.postMessage({ - file: informativePanel.file, - }); + if (informativePanel) { + const { file, worker: informativePanelWorker } = + informativePanel; + if (informativePanelWorker) { + informativePanelWorker.onmessage = onWorkerMessage; + informativePanelWorker.postMessage({ + file, + }); + } } }); setInformativePanels((prev) => ({ @@ -136,9 +141,9 @@ export const useInformativePanels = ( setInformativePanels((prev) => ({ ...prev, panels: prev.panels.filter((panel) => { - const {name:fileName}=panel; + const { name: fileName } = panel; if (fileName === name) { - const {worker:panelWorker}=panel; + const { worker: panelWorker } = panel; panelWorker?.terminate(); return false; } @@ -191,9 +196,9 @@ export const useInformativePanels = ( setInformativePanels((prev) => ({ ...prev, panels: prev.panels.filter((panel) => { - const {name:fileName}=panel; + const { name: fileName } = panel; if (fileName === name) { - const {worker:panelWorker}=panel; + const { worker: panelWorker } = panel; panelWorker?.terminate(); return false; } From 06057d70e8dbb5ef38a943ff2a36755c785a6a86 Mon Sep 17 00:00:00 2001 From: roggc Date: Thu, 27 Jan 2022 12:06:57 +0100 Subject: [PATCH 71/74] add image preview capability --- .../FileUploadV2/FileUploadV2.stories.tsx | 2 +- src/Containers/FileUploadV2/FileUploadV2.tsx | 9 +- src/Containers/PanelCard/PanelCard.tsx | 89 ++++++++++++++----- 3 files changed, 75 insertions(+), 25 deletions(-) diff --git a/src/Containers/FileUploadV2/FileUploadV2.stories.tsx b/src/Containers/FileUploadV2/FileUploadV2.stories.tsx index 6766ba2e..7f6c7645 100644 --- a/src/Containers/FileUploadV2/FileUploadV2.stories.tsx +++ b/src/Containers/FileUploadV2/FileUploadV2.stories.tsx @@ -6,7 +6,7 @@ export default { title: 'Components/FileUploadV2', component: FileUploadV2, args: { - onFile:(base64StringFile:string)=>{console.log(base64StringFile)}, + // onFile:(base64StringFile:string)=>{console.log(base64StringFile)}, dropAreaProps: { width: 400, }, diff --git a/src/Containers/FileUploadV2/FileUploadV2.tsx b/src/Containers/FileUploadV2/FileUploadV2.tsx index 86566842..c30e34c7 100644 --- a/src/Containers/FileUploadV2/FileUploadV2.tsx +++ b/src/Containers/FileUploadV2/FileUploadV2.tsx @@ -44,10 +44,15 @@ export const FileUploadV2: React.FC = ({ const [dropAreaWidth, dropAreaRef] = useGetWidth(); const panelPropertiesMapper=useCallback(():IPanelCardProps[]=>panels.map((panel) => { - const {name,operationState}=panel; - const mappedPanel= ({ + const {name,operationState,file}=panel; + let imagePreviewURL=''; + if(file){ + imagePreviewURL=URL.createObjectURL(file); + } + const mappedPanel:IPanelCardProps= ({ name, operationState, + imagePreviewURL, cancelButtonOnLoading: (