diff --git a/package-lock.json b/package-lock.json index 8f78e38cf..2488e4ef3 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 908e659ff..64c740291 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/Accordion/Accordion.stories.tsx b/src/Containers/Accordion/Accordion.stories.tsx index 7eac763b4..7dd2f52bc 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 f742ac89f..c56b97b76 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 428c7fa7a..b850ad933 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 81472ec4c..6bcada419 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 18df88c86..4877c5eb9 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 9e16f2d7e..8c65f8b7a 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 6f68ecf25..075305756 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 119934732..7c92a7344 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 21b0bcfe4..6017719cd 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 fccfa866a..cb0cf4f08 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 c6b9d4763..f40fce2d9 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 0ac5eacc3..5694cdd5f 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 972592dee..340f6f5f7 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 442002cb7..a7eddb8cb 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 256810677..944dcd3c6 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 8af41bb43..5dd25859f 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 e9b358023..72103d991 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 66d98676f..1fac20c4e 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 15a920ebe..aae6f1633 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 3a8e21e84..71c582479 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 bcfde4bdd..3f884f184 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 fded7fc88..01b9bcd45 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 new file mode 100644 index 000000000..3be2a779d --- /dev/null +++ b/src/Containers/DropArea/DropArea.stories.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import { DropArea, IDropAreaProps } from './DropArea'; + +export default { + title: 'Components/File Upload/DropArea', + component: DropArea, + args: {}, + argTypes: { + onDragLeave: { action: 'leaving drop are' }, + onDragEnter: { action: 'entering drop area' }, + onDropHandler: { action: 'files dropped' }, + onClickHandler: { action: 'you clicked!' }, + }, +} as Meta; + +export const Basic: Story = (args) => ; +export const BigWidth = Basic.bind({}); +BigWidth.args = { + ...Basic.args, + width: 500, +}; +export const IsDisabledTrue = Basic.bind({}); +IsDisabledTrue.args = { + ...Basic.args, + isDisabled: true, +}; +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 new file mode 100644 index 000000000..18c1f0838 --- /dev/null +++ b/src/Containers/DropArea/DropArea.tsx @@ -0,0 +1,198 @@ +import React, { useCallback } 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, { + useDropzone, + DropEvent, + FileRejection, + DropzoneProps, + DropzoneOptions, +} from 'react-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; + +/** + * options for the lottie animation that occurs instead of + * the icon when dragging over the dropArea component + */ +const lottieOptions = { + loop: true, + autoplay: true, + animationData, + rendererSettings: { + preserveAspectRatio: 'xMidYMid slice', + }, +}; + +export interface IDropAreaProps extends DropzoneProps { + message?: string; + buttonText?: string; + onClickHandler?: React.MouseEventHandler | undefined; + onDragEnter?: React.DragEventHandler | undefined; + onDragLeave?: React.DragEventHandler | undefined; + onDropHandler?: + | (( + acceptedFiles: T[], + fileRejections: FileRejection[], + event: DropEvent, + ) => void) + | undefined; + isDisabled?: boolean; + /** minimum width for the drop area */ + width?: number; + /** props for the drop area container */ + dropAreaProps?: MainInterface & React.HTMLAttributes; + dropzoneProps?: DropzoneOptions; +} + +export const DropArea = React.forwardRef(({ + message = 'Drag & Drop your files here', + buttonText = 'Browse Files', + onClickHandler = () => null, + onDragEnter = () => null, + onDragLeave = () => null, + onDropHandler = () => null, + isDisabled = false, + dropAreaProps = {}, + width, + dropzoneProps = {}, + ...props +},dropAreaRef): React.ReactElement => { + const { getInputProps, getRootProps, isDragActive, open } = useDropzone({ + onDragEnter, + onDragLeave, + onDrop: onDropHandler, + disabled: isDisabled, + noClick: true, + noKeyboard: true, + ...dropzoneProps, + }); + + const getLottieAnimationOrIcon = useCallback( + (isDragEnter: boolean): JSX.Element => { + if (isDragEnter) + return ( + + ); + return ; + }, + [], + ); + + return ( + + {() => ( + + + {getLottieAnimationOrIcon(isDragActive)} + {message} + OR + + {buttonText} + + + + + )} + + ); +}); + +const RootDiv = styled.div<{ isDisabled: boolean }>` + width: fit-content; + ${({ isDisabled }): string => ` + ${isDisabled ? `opacity:${OPACITY_WHEN_DISABLED};` : ''} + `} +`; + +const DropAreaBox = styled.div< + MainInterface & { isDragEnter: boolean; width?: number } +>` + width: fit-content; + ${flex('column', 'center', 'center')} + ${({ theme, isDragEnter, width, padding, ...props }): string => ` + ${width ? `min-width:${width}px;` : ''} + border-radius:${theme.dimensions.radius}; + ${ + isDragEnter + ? ` + background-color: ${theme.colors.input.success}; + @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, ${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; + 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 }) + : Main({ padding, ...props }) +} +`} +`; + +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}; + `} + user-select: none; + width: fit-content; + font-weight: 700; + cursor: pointer; +`; + +const OrBox = styled.div` + margin: 10px; + font-weight: 700; + opacity: ${ICON_OPACITY}; + color: ${({ theme }) => theme.colors.occupancyStatusColors.Occupied}; + user-select: none; +`; + +const MessageBox = styled.div` + font-weight: 700; + opacity: ${ICON_OPACITY}; + user-select: none; +`; + +const Icon = styled.svg` + width: ${ICON_HEIGHT}px; + height: ${ICON_HEIGHT}px; + opacity: ${ICON_OPACITY}; + color: ${({ theme }) => theme.colors.occupancyStatusColors.Occupied}; +`; diff --git a/src/Containers/DropArea/animationData.ts b/src/Containers/DropArea/animationData.ts new file mode 100644 index 000000000..1db887f86 --- /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: [], +}; diff --git a/src/Containers/Dropdown/Dropdown.stories.tsx b/src/Containers/Dropdown/Dropdown.stories.tsx index 7ffe933c7..f9a23d0a7 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 c927ad3fd..0b756da56 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 be065abab..6aadc6cc5 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 a41fc4f7e..ef5d672a9 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 c7ca681f2..c62a25148 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 eadfe6e60..6bef61f8e 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 e49fd048b..7cff6a52d 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 0c7a37ef8..20744833b 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/FileUploadV2/FileUploadV2.stories.tsx b/src/Containers/FileUploadV2/FileUploadV2.stories.tsx new file mode 100644 index 000000000..7f6c7645b --- /dev/null +++ b/src/Containers/FileUploadV2/FileUploadV2.stories.tsx @@ -0,0 +1,36 @@ +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 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, +}; diff --git a/src/Containers/FileUploadV2/FileUploadV2.tsx b/src/Containers/FileUploadV2/FileUploadV2.tsx new file mode 100644 index 000000000..c30e34c7d --- /dev/null +++ b/src/Containers/FileUploadV2/FileUploadV2.tsx @@ -0,0 +1,97 @@ +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 { DropArea, IDropAreaProps } from '../DropArea/DropArea'; +import { PanelListWrapper as PLW } from '../PanelListWrapper/PanelListWrapper'; +import { IPanelCardProps } from '../PanelCard/PanelCard'; +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; + isSequentially?:boolean; + delay?:number; +} +/** + * multiple file upload, in parallel, version 2 + */ +export const FileUploadV2: React.FC = ({ + isTestIsFailure = false, + onFile = (base64String: string) => null, + messageDuration = 1500, + dropAreaProps = {}, + isSequentially=true, + delay=15, + ...props +}): React.ReactElement => { + const [panels, onDrop, onCancelUploading] = useInformativePanels( + isTestIsFailure, + onFile, + messageDuration, + ); + const [dropAreaWidth, dropAreaRef] = useGetWidth(); + + const panelPropertiesMapper=useCallback(():IPanelCardProps[]=>panels.map((panel) => { + const {name,operationState,file}=panel; + let imagePreviewURL=''; + if(file){ + imagePreviewURL=URL.createObjectURL(file); + } + const mappedPanel:IPanelCardProps= ({ + name, + operationState, + imagePreviewURL, + cancelButtonOnLoading: ( + + ) + }) + + return mappedPanel; + }),[panels]) + + return ( + + + + + ); +}; + +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 })} +`; + +const PanelListWrapper = styled(PLW)<{ width?: number }>` + box-sizing: border-box; + ${({ width }) => ` +${width ? `width:${width}px;` : ''} +`} +`; diff --git a/src/Containers/FileUploadV2/useInformativePanels.ts b/src/Containers/FileUploadV2/useInformativePanels.ts new file mode 100644 index 000000000..b522a7ab0 --- /dev/null +++ b/src/Containers/FileUploadV2/useInformativePanels.ts @@ -0,0 +1,211 @@ +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) => { + const { name } = panel; + if (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) { + let operationState: OperationState = OperationState.isUnknown; + if ( + base64StringFile === NO_BASE64STRINGFILE || + isTestIsFailure + ) { + operationState = OperationState.isFailure; + } else { + onFile(base64StringFile); + operationState = OperationState.isSuccess; + } + prepareForEndInformativePanel(operationState, informativePanel); + } + }, + [ + informativePanels.panels, + isTestIsFailure, + onFile, + prepareForEndInformativePanel, + ], + ); + + // start workers after files have been droped and array of informative panels + // are loaded + useEffect(() => { + const { startWorkers } = informativePanels; + if (startWorkers.length) { + startWorkers.forEach((name) => { + const { panels } = informativePanels; + const informativePanel = panels.find( + (panel) => panel.name === name, + ); + if (informativePanel) { + const { file, worker: informativePanelWorker } = + informativePanel; + if (informativePanelWorker) { + informativePanelWorker.onmessage = onWorkerMessage; + informativePanelWorker.postMessage({ + 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) => { + const { name: fileName } = panel; + if (fileName === name) { + const { worker: panelWorker } = panel; + panelWorker?.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) => { + const { name: fileName } = panel; + if (fileName === name) { + const { worker: panelWorker } = panel; + panelWorker?.terminate(); + return false; + } + return true; + }), + })); + }; + + return [informativePanels.panels, onDrop, onCancelUploading] as const; +}; diff --git a/src/Containers/FileUploadV2/worker.ts b/src/Containers/FileUploadV2/worker.ts new file mode 100644 index 000000000..17a094d92 --- /dev/null +++ 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 diff --git a/src/Containers/FilterBox/FilterBox.stories.tsx b/src/Containers/FilterBox/FilterBox.stories.tsx index 21a7f5bd0..d57cb36d6 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 3a6835029..c284f749f 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 a9a8a6987..99b274c23 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 d4d6be232..468387c95 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 710999895..c95a01456 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 10f7bc65a..16c37e4bc 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 cd5cdcb32..2f5cc596a 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 e01d6d87f..3ba6381c4 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 ed6bd5f40..d9969fc3b 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 8d77f1744..dfce6ae94 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 020de0478..03c49aae1 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 3193b2e29..014e49c9c 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 5aee9efb3..1d318a38e 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 82f577bc2..f41efbec3 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 93ad70c60..404dfd3a6 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 48b3a8881..6eff1e2fd 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 0b650bcb9..9997d183e 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 f5cdcda52..4847e7251 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/Loading/Loading.tsx b/src/Containers/Loading/Loading.tsx index 625999ad9..b03c88d82 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 */ + isNavigationPageLoader?: boolean; } export const Loading: React.FC = ({ children, loading = false, message = 'Loading...', + isNavigationPageLoader = 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/LogoListing/Logo.stories.tsx b/src/Containers/LogoListing/Logo.stories.tsx index 9e924dc1c..bdfc098d7 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 5279087b7..ddd832784 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 75163f7ad..3cd435265 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 47b3ece14..d885ce51b 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 ce802579f..b212fd64f 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 c9a5ff630..49dfeb7fc 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 61efdcb78..71069ca76 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 5a3a8da7e..0f583d674 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 05ec29b42..c4d80059b 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 51bf4f3b8..c3a42467e 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 632e0ac26..a583c8c92 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 dbe618c8a..780fc1e29 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 60913c055..624b3d09f 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 413c05e21..6fa1249ad 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 244fae773..ba8c8c9b5 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 f492c84b7..a89d7ce44 100644 --- a/src/Containers/PanelCard/PanelCard.stories.tsx +++ b/src/Containers/PanelCard/PanelCard.stories.tsx @@ -1,30 +1,55 @@ import React from 'react'; import { Meta, Story } from '@storybook/react'; -import { PanelCard, IPanelCardProps } from './PanelCard'; +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: {}, - 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, - isLoadingMessage: 'loading file A ...', + operationState: OperationState.isLoading, + name: 'Abcd.sdf sdf. sdf .sdf .pdf' }; -export const PanelIsFailure = Basic.bind({}); -PanelIsFailure.args = { +export const IsLoadingPanelBis = Basic.bind({}); +IsLoadingPanelBis.args = { + ...IsLoadingPanel.args, + name: 'Abcd.sdf sdf. sdf .sdf .docx' +}; + +export const IsFailurePanel = Basic.bind({}); +IsFailurePanel.args = { ...Basic.args, - isFailureMessage: 'Something went wrong', + operationState: OperationState.isFailure, + name: 'Abcd' }; -export const PanelIsSuccess = Basic.bind({}); -PanelIsSuccess.args = { +export const IsSuccessPanel = Basic.bind({}); +IsSuccessPanel.args = { ...Basic.args, - isSuccessMessage: 'Completed', + 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 17d0e5421..9c8267985 100644 --- a/src/Containers/PanelCard/PanelCard.tsx +++ b/src/Containers/PanelCard/PanelCard.tsx @@ -1,28 +1,196 @@ -import React from 'react'; -import { Button } from '@Inputs/Button/Button'; +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; +const ALLOWED_EXTENSIONS_FOR_IMAGE_PREVIEW = ['gif', 'jpeg', 'jpg', 'png']; + +export enum OperationState { + isFailure, + isSuccess, + isLoading, + isUnknown, +} export interface IPanelCardProps extends CardProps { - /** callback for cancel loading file */ - onCancelLoading?: () => void; + /** name of the file */ + name?: string; + imagePreviewURL?: string; isFailureMessage?: string; isSuccessMessage?: string; isLoadingMessage?: string; - cancelLoadingText?: string; + operationState?: OperationState; + isSuccessIcon?: StyledIcon; + isFailureIcon?: StyledIcon; + isSuccessIconColor?: string; + isFailureIconColor?: string; + /** icons width and height */ + iconHeight?: number; + dismissButtonOnSuccess?: React.ReactElement; + retryButtonOnFailure?: React.ReactElement; + cancelButtonOnLoading?: React.ReactElement; + /** horizontal margin for is loading bar */ + isLoadingSpace?: number; } export const PanelCard: React.FC = ({ - onCancelLoading = () => null, - isFailureMessage = '', - isLoadingMessage = '', - isSuccessMessage = '', - cancelLoadingText = 'Cancel', + isFailureMessage = 'Something went wrong', + isSuccessMessage = 'Completed', + name = '', + imagePreviewURL = '', + isLoadingMessage = `Loading file ${name}...`, + operationState = OperationState.isUnknown, + isSuccessIcon = CheckCircle, + isFailureIcon = TimesCircle, + iconHeight = 35, + isSuccessIconColor = MainTheme.colors.statusColors.green, + isFailureIconColor = MainTheme.colors.statusColors.red, + retryButtonOnFailure, + cancelButtonOnLoading, + dismissButtonOnSuccess, + isLoadingSpace = 20, ...props -}): React.ReactElement => ( - -
{isFailureMessage || isLoadingMessage || isSuccessMessage}
- {isLoadingMessage && ( - - )} - -); +}): React.ReactElement => { + const extension = useMemo( + (): string => + name.split(FILE_EXTENSION_SEPARATOR).slice(LAST_ARRAY_ELEMENT)[ + FIRST_ARRAY_ELEMENT + ], + [name], + ); + + const renderContentForIsSuccessAndIsFailure = useCallback( + ( + icon: StyledIcon, + height: number, + color: string, + message: string, + button: React.ReactElement | undefined, + ) => ( + + + + {message} + + {button} + + ), + [], + ); + + const getFileIconOrImagePreview = useCallback((): JSX.Element => { + if ( + imagePreviewURL && + ALLOWED_EXTENSIONS_FOR_IMAGE_PREVIEW.some( + (allowedExtension) => allowedExtension === extension, + ) + ) + return ( + {imagePreviewURL} + ); + return ( + + + + ); + }, [imagePreviewURL, extension, iconHeight]); + + const renderContent = useCallback((): React.ReactNode => { + switch (operationState) { + case OperationState.isFailure: + return renderContentForIsSuccessAndIsFailure( + isFailureIcon, + iconHeight, + isFailureIconColor, + isFailureMessage, + retryButtonOnFailure, + ); + case OperationState.isSuccess: + return renderContentForIsSuccessAndIsFailure( + isSuccessIcon, + iconHeight, + isSuccessIconColor, + isSuccessMessage, + dismissButtonOnSuccess, + ); + case OperationState.isLoading: + return ( + + {getFileIconOrImagePreview()} + + {cancelButtonOnLoading} + + ); + default: + return null; + } + }, [ + isFailureMessage, + isLoadingMessage, + isSuccessMessage, + operationState, + isSuccessIcon, + isFailureIcon, + iconHeight, + isSuccessIconColor, + isFailureIconColor, + cancelButtonOnLoading, + retryButtonOnFailure, + dismissButtonOnSuccess, + renderContentForIsSuccessAndIsFailure, + isLoadingSpace, + getFileIconOrImagePreview, + ]); + return {renderContent()}; +}; + +const Icon = styled.svg<{ height: number; color?: string }>` + height: ${({ height }) => height}px; + ${({ color }) => ` + ${color ? `color:${color};` : ''} + `} +`; + +const MessageContainer = styled.span` + margin: 5px; + font-weight: 700; +`; + +const ContentContainer = styled.div` + ${flex('space-between')} +`; + +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; +`; + +const Image = styled.img<{ height: number }>` +height=${({ height }) => height}px; +`; diff --git a/src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx b/src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx new file mode 100644 index 000000000..6b6bd3f3f --- /dev/null +++ b/src/Containers/PanelListWrapper/PanelListWrapper.stories.tsx @@ -0,0 +1,110 @@ +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,IPanelCardProps} from '../PanelCard/PanelCard'; + +export default { + title: 'Components/File Upload/PanelListWrapper', + component: PanelListWrapper, + args: { + panels:[], + }, +} 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, + }, { + name:'fileB.doc', + operationState:OperationState.isLoading, + }, + { + name:'fileC.pdf', + operationState:OperationState.isLoading, + }, + { + name:'fileC.docx', + operationState:OperationState.isSuccess, + } + ] +} + +export const WithVerticalSpacingBetweenPanels= WithSomePanels.bind({}); +WithVerticalSpacingBetweenPanels.args= { + ...WithSomePanels.args, + verticalSpacing:10, +} + +export const WithStyleAndAddPanelsSequentially= WithVerticalSpacingBetweenPanels.bind({}); +WithStyleAndAddPanelsSequentially.args= { + ...WithVerticalSpacingBetweenPanels.args, + style:{ + width:'250px', + border:`2px solid ${MainTheme.colors.statusColors.red}`, + borderRadius:MainTheme.dimensions.radius, + backgroundColor:MainTheme.colors.background, + }, + padding:MainTheme.dimensions.padding.container, + isSequentially:true, +} + +export const CustomControlsToAddAndRemovePanelsSequentially: Story = (args) =>{ + const [panels,setPanels]=useState([]); + + const getPanel=(num:number):IPanelCardProps=>({name:`file${num}.pdf`,operationState:OperationState.isLoading}) + + const addPanel=()=>{ + setPanels(prev=>[...prev,getPanel(panels.length)]) + } + + const addPanels=()=>{ + setPanels(prev=>[...prev,getPanel(panels.length),getPanel(panels.length+1),getPanel(panels.length+2)]) + } + + const clearPanels=()=>{ + setPanels([]); + } + + const removeOnePanel=()=>{ + setPanels(prev=>prev.slice(0,prev.length-1)) + } + + // 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 new file mode 100644 index 000000000..22051dd50 --- /dev/null +++ b/src/Containers/PanelListWrapper/PanelListWrapper.tsx @@ -0,0 +1,93 @@ +import { MainInterface, Main } from '@Utils/BaseStyles'; +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, + React.HTMLAttributes { + panels: IPanelCardProps[]; + /** vertical space between panels in px */ + verticalSpacing?: number; + /** if true panels are added sequentially to the list */ + isSequentially?: boolean; + /** dealy in ms for each panel added to the list */ + delay?: number; + /** fade in in ms */ + fadeIn?: number; + /** fade out in ms */ + 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, + isSequentially = false, + delay = 100, + fadeIn = 1000, + fadeOut = 1000, + ...props +}) => { + const sequentiallyPanels = useSequentiallyAddedPanels(panels, delay); + const panelsToMap = useMemo( + (): IPanelCardProps[] => + isSequentially ? sequentiallyPanels : panels, + [isSequentially, sequentiallyPanels, panels], + ); + const [fadeOutPanels, onAnimationEnd] = useFadeOut(panelsToMap); + + return ( + + {fadeOutPanels.map(({ panel, isShown }) => ( + + ))} + + ); +}; + +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 PanelCardFadeInFadeOut = styled(PanelCardFadeIn)<{ + isShown: boolean; + fadeOut: number; +}>` + @keyframes fadeout { + from { + opacity: 1; + } + to { + opacity: 0; + } + } + ${({ isShown, fadeOut }) => ` +${isShown ? '' : `animation:fadeout ${fadeOut}ms;`} +`} +`; diff --git a/src/Containers/PanelListWrapper/useFadeOut.ts b/src/Containers/PanelListWrapper/useFadeOut.ts new file mode 100644 index 000000000..ca6b0b966 --- /dev/null +++ b/src/Containers/PanelListWrapper/useFadeOut.ts @@ -0,0 +1,50 @@ +import { useEffect, useState } 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 [ + { + panel: IPanelCardProps; + isShown: boolean; + }[], + () => void, +] => { + const [internalPanels, setInternalPanels] = useState( + panels.map((panel) => ({ panel, isShown: true })), + ); + + useEffect(() => { + 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 = () => { + setInternalPanels((prev) => + prev.filter((fadeOutPanel) => fadeOutPanel.isShown), + ); + }; + + return [internalPanels, removePanelsIsShownIsFalse] as const; +}; diff --git a/src/Containers/PanelListWrapper/useSequentiallyAddedPanels.ts b/src/Containers/PanelListWrapper/useSequentiallyAddedPanels.ts new file mode 100644 index 000000000..4378410a7 --- /dev/null +++ b/src/Containers/PanelListWrapper/useSequentiallyAddedPanels.ts @@ -0,0 +1,68 @@ +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 === undefined || + previousPanelsLength.current < panels.length + ) { + // add panels + setTimeout(() => { + const panelToAdd = panels[panelIndexCounter]; + if (panelToAdd) { + setInternalPanels((prev) => [ + ...prev + .filter( + (prevPanel) => + prevPanel.name !== panelToAdd.name, + ) + .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 { + // remove panels + 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; + return prevPanel; + }), + ]); + setPanelIndexCounter(panels.length); + previousPanelsLength.current = panels.length; + } + }, [panels, panelIndexCounter, delay]); + + return internalPanels; +}; diff --git a/src/Containers/PartyInfoInput/PartyInfoInput.stories.tsx b/src/Containers/PartyInfoInput/PartyInfoInput.stories.tsx index 2937077ee..c3467358b 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 9859fe6b1..145c1c112 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 86efc879e..f8185913b 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 1e74223ec..b92da367d 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 1a28e264b..2d8ded01a 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 02c0ae73c..f7120fd42 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 82da6b6b4..dc3d7017d 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 1d1bfc966..bad087525 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 36f194c2d..78e5c3f8b 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 9f8b8f792..e88e496e2 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 667db4db3..4c1f02bff 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 a5bcd908b..e558135d8 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 01c1934a6..c003e0781 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 59e0be0fa..8348640e7 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 0994a57dd..a2dff91cb 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 08c596d3e..e2df00083 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 d86a21041..c2d53f530 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 c3b848a16..7f7293c0f 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 7f492d86f..75c8be396 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 be0994782..5ae0c9970 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 0226caf32..5454ee5f6 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 05158a60b..dfdef7d5c 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/SpecialText/SpecialText.stories.tsx b/src/Containers/SpecialText/SpecialText.stories.tsx new file mode 100644 index 000000000..5a68c0638 --- /dev/null +++ b/src/Containers/SpecialText/SpecialText.stories.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import { SpecialText, SpecialTextProps } from '../index'; +import { SmallText } from 'index'; + +export default { + title: 'Components/SpecialText', + component: SpecialText, + argTypes: { onClick: { action: 'SpecialText Click Occurred' } }, + args: { + children: 'Special Text', + }, +} as Meta; + +export const Basic: Story = (args) => ( +
+ This is + +
+); \ 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 000000000..bc97ea0e9 --- /dev/null +++ b/src/Containers/SpecialText/SpecialText.tsx @@ -0,0 +1,33 @@ +import Dropdown, { IDropdownProps } from '../Dropdown/Dropdown'; +import DropdownItem from '../Dropdown/DropdownItem'; +import React, { isValidElement } from 'react'; +import { SmallText, TextLayoutProps } from 'index'; +import styled from 'styled-components'; + +export interface SpecialTextProps extends TextLayoutProps{ + children: string; + onClick?: () => void; +} + +export const SpecialText: React.FC = ({ + children, + type = 'span', + size = 'small', + color = 'orange', + ...props +}): React.ReactElement => { + return ( + + {children} + + ); +}; + +const StyledSmallText = styled(SmallText)` + &: hover { + font-weight: bold; + cursor: pointer; + } +`; + +export default SpecialText; diff --git a/src/Containers/SquareTable/SquareTable.stories.tsx b/src/Containers/SquareTable/SquareTable.stories.tsx index 34b9aa3f8..eddd1335f 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 21f32195b..b63014f59 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 655730fb7..7d17ca8ad 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 a20eb19d8..98c085fcc 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 1acb46380..342f81187 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 e35ee99c1..18ef2275c 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 8fe757c06..72f562b04 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 ba70329ba..2cc5aed9c 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 fdbea8b9c..3d8dd7e72 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 6a300c1df..ce148bd36 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 b35d5b0ca..056da822b 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 a71b1a2ce..038299c4d 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 0d107d25a..dd82b67af 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 551c30039..3f9751a68 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 ab565f3ac..c2d958bab 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 14eb88ddd..e2d92e8cc 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 93841c8fe..6ecfe1a9b 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 6669a5c60..17db7cbfb 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 0b550b051..16b587128 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 e1e33dedb..12fa41878 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 36cb41e85..10f1844b2 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 64d0d5d85..1f99f98a2 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/Containers/index.ts b/src/Containers/index.ts index b4c4709d0..71f3b931d 100644 --- a/src/Containers/index.ts +++ b/src/Containers/index.ts @@ -98,3 +98,7 @@ export * from './InfoHeader/InfoHeader'; export * from './StoreSelector/StoreSelector'; export * from './ScreenFlashEffect/ScreenFlashEffect'; export * from './PanelCard/PanelCard'; +export * from './SpecialText/SpecialText'; +export * from './DropArea/DropArea'; +export * from './PanelListWrapper/PanelListWrapper'; +export * from './SpecialText/SpecialText'; diff --git a/src/Inputs/Button/Button.stories.tsx b/src/Inputs/Button/Button.stories.tsx index 6d75cdc0e..5b0c601e8 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 66278d68d..b7029c312 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 13723395b..f75c49d01 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 174a10e7a..ee93f6ea5 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 f9d7ee17b..da84439ee 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 c5ba6d51c..490c598d8 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 8d36e76f0..606cb78a2 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 341153946..55c252708 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 8877911ac..deb540ef9 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 df3ea2a0f..d505213ce 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 a676ccf5c..68bbf8d74 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 67ac0a129..3f5377ece 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 3a7c1a8d1..1cbfba7ea 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 82a20b03b..d36525408 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 17c830793..808e644df 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 c1d7a1af8..9d8780fab 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 cd52ff58d..254c81fd4 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 cd3e7c479..7f063f644 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 1a503492c..5ecb0efdd 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 79054e647..d9213dc0a 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 54a00029c..15686bc79 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 00dd92fd6..249e2db37 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 5e02d5cdb..6afcb8e02 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 dc6e74603..61eece0b6 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 6b476ee69..dcb19c49e 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 aba4b5c5c..d4a6fedd9 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 76dd90a1b..e532a9887 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 872f20338..f266a6313 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 1f595e234..10ad81347 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 1223fc57b..2351ca6db 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 b43bf6082..3dd79a80e 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 db9de0bc8..afff5bd4a 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 6d6e04af8..cab70af68 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', diff --git a/src/Utils/Hooks/index.ts b/src/Utils/Hooks/index.ts index 06a070774..d7ce36c0c 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 new file mode 100644 index 000000000..fe1824ff1 --- /dev/null +++ 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; +};