diff --git a/package-lock.json b/package-lock.json index 69b69b72..cd857772 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5284,6 +5284,66 @@ "node": "*" } }, + "node_modules/@next/swc-darwin-arm64": { + "version": "13.4.19", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.19.tgz", + "integrity": "sha512-vv1qrjXeGbuF2mOkhkdxMDtv9np7W4mcBtaDnHU+yJG+bBwa6rYsYSCI/9Xm5+TuF5SbZbrWO6G1NfTh1TMjvQ==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-darwin-x64": { + "version": "13.4.19", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.19.tgz", + "integrity": "sha512-jyzO6wwYhx6F+7gD8ddZfuqO4TtpJdw3wyOduR4fxTUCm3aLw7YmHGYNjS0xRSYGAkLpBkH1E0RcelyId6lNsw==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-gnu": { + "version": "13.4.19", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.19.tgz", + "integrity": "sha512-vdlnIlaAEh6H+G6HrKZB9c2zJKnpPVKnA6LBwjwT2BTjxI7e0Hx30+FoWCgi50e+YO49p6oPOtesP9mXDRiiUg==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-linux-arm64-musl": { + "version": "13.4.19", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.19.tgz", + "integrity": "sha512-aU0HkH2XPgxqrbNRBFb3si9Ahu/CpaR5RPmN2s9GiM9qJCiBBlZtRTiEca+DC+xRPyCThTtWYgxjWHgU7ZkyvA==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, "node_modules/@next/swc-linux-x64-gnu": { "version": "13.4.19", "cpu": [ @@ -5312,6 +5372,51 @@ "node": ">= 10" } }, + "node_modules/@next/swc-win32-arm64-msvc": { + "version": "13.4.19", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.19.tgz", + "integrity": "sha512-bUfDevQK4NsIAHXs3/JNgnvEY+LRyneDN788W2NYiRIIzmILjba7LaQTfihuFawZDhRtkYCv3JDC3B4TwnmRJw==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-ia32-msvc": { + "version": "13.4.19", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.19.tgz", + "integrity": "sha512-Y5kikILFAr81LYIFaw6j/NrOtmiM4Sf3GtOc0pn50ez2GCkr+oejYuKGcwAwq3jiTKuzF6OF4iT2INPoxRycEA==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@next/swc-win32-x64-msvc": { + "version": "13.4.19", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.19.tgz", + "integrity": "sha512-YzA78jBDXMYiINdPdJJwGgPNT3YqBNNGhsthsDoWHL9p24tEJn9ViQf/ZqTbwSpX/RrkPupLfuuTH2sf73JBAw==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "license": "MIT", diff --git a/packages/react-front-kit/src/3-custom/Components/ConfirmModal/ConfirmModal.stories.tsx b/packages/react-front-kit/src/3-custom/Components/ConfirmModal/ConfirmModal.stories.tsx index b2e50f7d..7e900388 100644 --- a/packages/react-front-kit/src/3-custom/Components/ConfirmModal/ConfirmModal.stories.tsx +++ b/packages/react-front-kit/src/3-custom/Components/ConfirmModal/ConfirmModal.stories.tsx @@ -16,7 +16,6 @@ const meta = { control: 'select', options: colorOptions, }, - onClick: { action: 'clicked' }, opened: { control: 'boolean' }, }, component: Cmp, diff --git a/packages/react-front-kit/src/3-custom/Components/DropzoneCard/DropzoneCard.stories.tsx b/packages/react-front-kit/src/3-custom/Components/DropzoneCard/DropzoneCard.stories.tsx new file mode 100644 index 00000000..3f0a1f5d --- /dev/null +++ b/packages/react-front-kit/src/3-custom/Components/DropzoneCard/DropzoneCard.stories.tsx @@ -0,0 +1,52 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { Eye, Suitcase, User } from '@phosphor-icons/react'; +import { action } from '@storybook/addon-actions'; + +import { DropzoneCard as Cmp } from './DropzoneCard'; + +const meta = { + component: Cmp, + tags: ['autodocs'], + title: '3-custom/Components/DropzoneCard', +} satisfies Meta; + +export default meta; +type IStory = StoryObj; + +export const DropzoneCard: IStory = { + args: { + children: ( +

+ + View the folder properties +

+ ), + contentItems: [ + { + icon: , + label: 'Individual contract', + onAction: (): void => { + action('Click on first card'); + }, + }, + { + icon: , + label: '2 Lines text for example', + onAction: (): void => { + action('Click on second card'); + }, + }, + ], + motif: undefined, + title:

Jean-Michel DUPONT

, + }, +}; diff --git a/packages/react-front-kit/src/3-custom/Components/DropzoneCard/DropzoneCard.test.tsx b/packages/react-front-kit/src/3-custom/Components/DropzoneCard/DropzoneCard.test.tsx new file mode 100644 index 00000000..aa155063 --- /dev/null +++ b/packages/react-front-kit/src/3-custom/Components/DropzoneCard/DropzoneCard.test.tsx @@ -0,0 +1,10 @@ +import { renderWithProviders } from '../../../utils/tests'; + +import { DropzoneCard } from './DropzoneCard'; + +describe('DropzoneCard', () => { + it('matches snapshot', () => { + const { container } = renderWithProviders(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/react-front-kit/src/3-custom/Components/DropzoneCard/DropzoneCard.tsx b/packages/react-front-kit/src/3-custom/Components/DropzoneCard/DropzoneCard.tsx new file mode 100644 index 00000000..8169d610 --- /dev/null +++ b/packages/react-front-kit/src/3-custom/Components/DropzoneCard/DropzoneCard.tsx @@ -0,0 +1,125 @@ +'use client'; + +import type { ActionIconProps, BoxProps } from '@mantine/core'; +import type { ReactElement } from 'react'; + +import { ActionIcon, Box } from '@mantine/core'; +import { createStyles } from '@mantine/styles'; + +import Motif from './Motif'; + +interface IContentItem { + icon?: ReactElement; + iconProps?: Partial; + label?: string; + onAction?: (item: IContentItem) => void; +} + +interface IDropzoneCardProps extends BoxProps { + children?: ReactElement; + contentItems?: IContentItem[]; + dropzone?: ReactElement; + motif?: ReactElement; + title?: ReactElement; +} + +const useStyles = createStyles((theme) => ({ + container: { + position: 'relative', + zIndex: 1, + }, + contentItem: { + alignItems: 'center', + color: theme.colors.cyan[7], + cursor: 'pointer', + display: 'flex', + justifyContent: 'center', + marginRight: '16px', + }, + contentItemGroup: { + alignItems: 'center', + display: 'flex', + justifyContent: 'left', + marginBottom: '20px', + paddingRight: '20px', + width: '200px', + }, + contentItems: { + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'left', + }, + dropzoneContentItem: { + borderRadius: '16px', + minHeight: '219px', + overflow: 'hidden', + padding: '32px 42px', + position: 'relative', + width: '100%', + }, + leftContainer: { + maxWidth: '410px', + }, + motif: { + left: 0, + position: 'absolute', + top: 0, + zIndex: 0, + }, + title: { + 'h1, h2, h3, h4 h5, p': { + fontSize: '26px', + fontWeight: 700, + marginBottom: '24px', + }, + }, +})); + +export function DropzoneCard(props: IDropzoneCardProps): ReactElement { + const { + children, + title, + contentItems = [], + dropzone, + motif = , + ...BoxProps + } = props; + const { classes } = useStyles(); + return ( + +
{motif}
+
+
+ {Boolean(title) &&
{title}
} + {Boolean(contentItems.length > 0) && ( +
+ {contentItems.map((item, key) => ( +
+ {Boolean(item.icon) && ( + item.onAction?.(item)} + radius="sm" + size="xl" + variant="filled" + {...item.iconProps} + > + {item.icon} + + )} + {Boolean(item.label) && {item.label}} +
+ ))} +
+ )} + {Boolean(children) &&
{children}
} +
+ {Boolean(dropzone) &&
} +
+ + ); +} diff --git a/packages/react-front-kit/src/3-custom/Components/DropzoneCard/Motif.tsx b/packages/react-front-kit/src/3-custom/Components/DropzoneCard/Motif.tsx new file mode 100644 index 00000000..fae69b1d --- /dev/null +++ b/packages/react-front-kit/src/3-custom/Components/DropzoneCard/Motif.tsx @@ -0,0 +1,66 @@ +import type { + CSSProperties, + ComponentPropsWithoutRef, + ReactElement, +} from 'react'; + +interface IProps extends ComponentPropsWithoutRef<'svg'> { + style?: CSSProperties; +} + +function Motif(props: IProps): ReactElement { + const { style = { fill: 'white', opacity: 0.1 }, ...svgProps } = props; + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default Motif; diff --git a/packages/react-front-kit/src/3-custom/Components/DropzoneCard/__snapshots__/DropzoneCard.test.tsx.snap b/packages/react-front-kit/src/3-custom/Components/DropzoneCard/__snapshots__/DropzoneCard.test.tsx.snap new file mode 100644 index 00000000..039bd8fc --- /dev/null +++ b/packages/react-front-kit/src/3-custom/Components/DropzoneCard/__snapshots__/DropzoneCard.test.tsx.snap @@ -0,0 +1,98 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DropzoneCard matches snapshot 1`] = ` +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+`; diff --git a/packages/react-front-kit/src/index.tsx b/packages/react-front-kit/src/index.tsx index 826e2a46..ffb6a730 100644 --- a/packages/react-front-kit/src/index.tsx +++ b/packages/react-front-kit/src/index.tsx @@ -5,6 +5,7 @@ export * from './3-custom/Components/Breadcrumbs/Breadcrumbs'; export * from './3-custom/Components/CollapseButton/CollapseButtonControlled'; export * from './3-custom/Components/CollapseButton/CollapseButton'; export * from './3-custom/Components/DropdownButton/DropdownButton'; +export * from './3-custom/Components/DropzoneCard/DropzoneCard'; export * from './3-custom/Components/Header/Header'; export * from './3-custom/Components/HeaderSearch/HeaderSearch'; export * from './3-custom/Components/Pagination/Pagination';