From eaba1a65b592b2893f70bc22b8884ba9a0a86275 Mon Sep 17 00:00:00 2001 From: vapersmile Date: Fri, 29 Sep 2023 17:12:22 +0200 Subject: [PATCH 1/9] feat(redmine 1255465) add component + title + Background image --- .../FileSheet/FileSheet.stories.tsx | 19 ++++ .../Components/FileSheet/FileSheet.test.tsx | 10 ++ .../Components/FileSheet/FileSheet.tsx | 106 ++++++++++++++++++ .../3-custom/Components/FileSheet/Motif.tsx | 39 +++++++ .../__snapshots__/FileSheet.test.tsx.snap | 17 +++ packages/react-front-kit/src/index.tsx | 1 + 6 files changed, 192 insertions(+) create mode 100644 packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.stories.tsx create mode 100644 packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.test.tsx create mode 100644 packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx create mode 100644 packages/react-front-kit/src/3-custom/Components/FileSheet/Motif.tsx create mode 100644 packages/react-front-kit/src/3-custom/Components/FileSheet/__snapshots__/FileSheet.test.tsx.snap diff --git a/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.stories.tsx b/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.stories.tsx new file mode 100644 index 00000000..e626246c --- /dev/null +++ b/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.stories.tsx @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { FileSheet as Cmp } from './FileSheet'; + +const meta = { + component: Cmp, + tags: ['autodocs'], + title: '3-custom/Components/FileSheet', +} satisfies Meta; + +export default meta; +type IStory = StoryObj; + +export const FileSheet: IStory = { + args: { + title:

Jean-Michel DUPONT

, + dropZone: false, + }, +}; diff --git a/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.test.tsx b/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.test.tsx new file mode 100644 index 00000000..7736ee26 --- /dev/null +++ b/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.test.tsx @@ -0,0 +1,10 @@ +import { renderWithProviders } from '../../../utils/tests'; + +import { FileSheet } from './FileSheet'; + +describe('FileSheet', () => { + it('matches snapshot', () => { + const { container } = renderWithProviders(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx b/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx new file mode 100644 index 00000000..440949a4 --- /dev/null +++ b/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx @@ -0,0 +1,106 @@ +'use client'; + +import { Box, BoxProps, MantineProvider } from '@mantine/core'; +import { createStyles } from '@mantine/styles'; +import type { ReactElement, ReactNode } from 'react'; +import Motif from './Motif'; + +interface IFileSheetProps extends BoxProps { + children?: ReactNode; + title?: ReactElement; + cards?: {title?: 'string', image?: ReactElement, action?: () => {}}[], + content?: ReactElement, + dropZone: boolean, + dropZoneContent?: ReactElement, + motif?: ReactElement, +} + + +const useStyles = createStyles((theme) => ({ + fileSheet: { + backgroundColor: theme.black, + padding: '32px 42px', + borderRadius: '16px', + width: '100%', + minHeight: '219px', + position: 'relative', + overflow: 'hidden', + }, + title: { + 'h1, h2, h3, h4 h5, p': { + fontSize: '26px', + color: theme.white, + fontWeight: 700, + marginBottom: '24px', + } + }, + leftContainer: { + maxWidth: '342px', + }, + rightContainer: { + + }, + cards: { + + }, + card: { + + }, + content: { + + }, + motif: { + position: 'absolute', + top: 0, + left: 0, + } +})); + + +export function FileSheet(props: IFileSheetProps): ReactElement { + const { children, title, cards, + content, + dropZone, + dropZoneContent, motif, ...BoxProps } = props; + const { classes } = useStyles(); + return ( + + + {!motif == null && +
+ {motif ? motif : } +
+ } +
+ { title && +
+ {title} +
+ } +
+ { cards && cards.map(item => +
+ { + item.image ? item.image : "" + } + + {item.title && item.title} + +
+ )} +
+ {content && +
+ {content} +
+ } +
+ {dropZone && +
+ +
+ } + + + ); +} diff --git a/packages/react-front-kit/src/3-custom/Components/FileSheet/Motif.tsx b/packages/react-front-kit/src/3-custom/Components/FileSheet/Motif.tsx new file mode 100644 index 00000000..76246563 --- /dev/null +++ b/packages/react-front-kit/src/3-custom/Components/FileSheet/Motif.tsx @@ -0,0 +1,39 @@ +interface IProps { + color?: string; + opacity?: string; +} + +function Motif(props: IProps) { + const {opacity = '0.1', color ='#868E96'} = props; + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default Motif \ No newline at end of file diff --git a/packages/react-front-kit/src/3-custom/Components/FileSheet/__snapshots__/FileSheet.test.tsx.snap b/packages/react-front-kit/src/3-custom/Components/FileSheet/__snapshots__/FileSheet.test.tsx.snap new file mode 100644 index 00000000..cabe24d4 --- /dev/null +++ b/packages/react-front-kit/src/3-custom/Components/FileSheet/__snapshots__/FileSheet.test.tsx.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`FileSheet matches snapshot 1`] = ` +
+
+
+
+
+
+
+`; diff --git a/packages/react-front-kit/src/index.tsx b/packages/react-front-kit/src/index.tsx index 826e2a46..f09a2fa6 100644 --- a/packages/react-front-kit/src/index.tsx +++ b/packages/react-front-kit/src/index.tsx @@ -1,5 +1,6 @@ /* eslint-disable react-refresh/only-export-components */ // component exports +export * from './3-custom/Components/FileSheet/FileSheet'; export * from './1-styleGuide/Icons'; export * from './3-custom/Components/Breadcrumbs/Breadcrumbs'; export * from './3-custom/Components/CollapseButton/CollapseButtonControlled'; From c300263169a2725f17b4d1b3a4ad23b05cda03d4 Mon Sep 17 00:00:00 2001 From: vapersmile Date: Mon, 2 Oct 2023 10:24:43 +0200 Subject: [PATCH 2/9] feat(redmine 1255465): fix lint warnings --- .../FileSheet/FileSheet.stories.tsx | 3 +- .../Components/FileSheet/FileSheet.tsx | 131 ++++++++---------- .../3-custom/Components/FileSheet/Motif.tsx | 122 ++++++++++++---- .../__snapshots__/FileSheet.test.tsx.snap | 101 +++++++++++++- 4 files changed, 253 insertions(+), 104 deletions(-) diff --git a/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.stories.tsx b/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.stories.tsx index e626246c..81b79872 100644 --- a/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.stories.tsx +++ b/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.stories.tsx @@ -13,7 +13,8 @@ type IStory = StoryObj; export const FileSheet: IStory = { args: { - title:

Jean-Michel DUPONT

, dropZone: false, + motifVisible: true, + title:

Jean-Michel DUPONT

, }, }; diff --git a/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx b/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx index 440949a4..0f466364 100644 --- a/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx +++ b/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx @@ -1,106 +1,91 @@ 'use client'; -import { Box, BoxProps, MantineProvider } from '@mantine/core'; -import { createStyles } from '@mantine/styles'; +import type { BoxProps } from '@mantine/core'; import type { ReactElement, ReactNode } from 'react'; + +import { Box, MantineProvider } from '@mantine/core'; +import { createStyles } from '@mantine/styles'; + import Motif from './Motif'; interface IFileSheetProps extends BoxProps { + cards?: { action?: () => void; image?: ReactElement; title?: 'string' }[]; children?: ReactNode; + content?: ReactElement; + dropZone: boolean; + dropZoneContent?: ReactElement; + motif?: ReactElement; + motifVisible?: boolean; title?: ReactElement; - cards?: {title?: 'string', image?: ReactElement, action?: () => {}}[], - content?: ReactElement, - dropZone: boolean, - dropZoneContent?: ReactElement, - motif?: ReactElement, } - const useStyles = createStyles((theme) => ({ + card: {}, + cards: {}, + content: {}, fileSheet: { backgroundColor: theme.black, - padding: '32px 42px', borderRadius: '16px', - width: '100%', minHeight: '219px', - position: 'relative', overflow: 'hidden', - }, - title: { - 'h1, h2, h3, h4 h5, p': { - fontSize: '26px', - color: theme.white, - fontWeight: 700, - marginBottom: '24px', - } + padding: '32px 42px', + position: 'relative', + width: '100%', }, leftContainer: { maxWidth: '342px', - }, - rightContainer: { - - }, - cards: { - - }, - card: { - - }, - content: { - }, motif: { + left: 0, position: 'absolute', top: 0, - left: 0, - } + }, + rightContainer: {}, + title: { + 'h1, h2, h3, h4 h5, p': { + color: theme.white, + fontSize: '26px', + fontWeight: 700, + marginBottom: '24px', + }, + }, })); - export function FileSheet(props: IFileSheetProps): ReactElement { - const { children, title, cards, - content, - dropZone, - dropZoneContent, motif, ...BoxProps } = props; + const { + children, + title, + cards, + content, + dropZone, + dropZoneContent, + motif, + motifVisible = true, + ...BoxProps + } = props; const { classes } = useStyles(); return ( - - - {!motif == null && -
- {motif ? motif : } -
- } -
- { title && -
- {title} -
- } -
- { cards && cards.map(item => -
- { - item.image ? item.image : "" - } - - {item.title && item.title} - -
- )} -
- {content && -
- {content} + + + {motifVisible ? ( +
{motif ? motif : }
+ ) : null} +
+ {title ?
{title}
: null} +
+ {cards + ? cards.map((item, key) => ( +
+ {item.image ? item.image : ''} + {item.title ? item.title : null} +
+ )) + : null}
- } -
- {dropZone && -
- + {content ?
{content}
: null}
- } - + {dropZone ?
: null} + ); } diff --git a/packages/react-front-kit/src/3-custom/Components/FileSheet/Motif.tsx b/packages/react-front-kit/src/3-custom/Components/FileSheet/Motif.tsx index 76246563..9a6a8801 100644 --- a/packages/react-front-kit/src/3-custom/Components/FileSheet/Motif.tsx +++ b/packages/react-front-kit/src/3-custom/Components/FileSheet/Motif.tsx @@ -1,39 +1,103 @@ +import type { ReactElement } from 'react'; + interface IProps { color?: string; opacity?: string; } -function Motif(props: IProps) { - const {opacity = '0.1', color ='#868E96'} = props; +function Motif(props: IProps): ReactElement { + const { opacity = '0.1', color = '#868E96' } = props; return ( - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + ); } -export default Motif \ No newline at end of file +export default Motif; diff --git a/packages/react-front-kit/src/3-custom/Components/FileSheet/__snapshots__/FileSheet.test.tsx.snap b/packages/react-front-kit/src/3-custom/Components/FileSheet/__snapshots__/FileSheet.test.tsx.snap index cabe24d4..06f56f81 100644 --- a/packages/react-front-kit/src/3-custom/Components/FileSheet/__snapshots__/FileSheet.test.tsx.snap +++ b/packages/react-front-kit/src/3-custom/Components/FileSheet/__snapshots__/FileSheet.test.tsx.snap @@ -3,8 +3,107 @@ exports[`FileSheet matches snapshot 1`] = `
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
From 1bf3cbdbcec49f09862c00e26f558f6779ce3798 Mon Sep 17 00:00:00 2001 From: vapersmile Date: Mon, 2 Oct 2023 16:05:20 +0200 Subject: [PATCH 3/9] feat(redmine 1246933): add cards --- package-lock.json | 105 +++++++++++++ .../ConfirmModal/ConfirmModal.stories.tsx | 1 - .../FileSheet/FileSheet.stories.tsx | 20 +++ .../Components/FileSheet/FileSheet.tsx | 142 ++++++++++++------ .../__snapshots__/FileSheet.test.tsx.snap | 12 +- 5 files changed, 229 insertions(+), 51 deletions(-) diff --git a/package-lock.json b/package-lock.json index 69b69b72..167139b4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29853,6 +29853,111 @@ "packages/tsconfig": { "version": "0.0.0", "license": "MIT" + }, + "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-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" + } } } } 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/FileSheet/FileSheet.stories.tsx b/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.stories.tsx index 81b79872..e155cfbd 100644 --- a/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.stories.tsx +++ b/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.stories.tsx @@ -1,5 +1,8 @@ import type { Meta, StoryObj } from '@storybook/react'; +import { Suitcase, User } from '@phosphor-icons/react'; +import { action } from '@storybook/addon-actions'; + import { FileSheet as Cmp } from './FileSheet'; const meta = { @@ -13,6 +16,23 @@ type IStory = StoryObj; export const FileSheet: IStory = { args: { + cards: [ + { + image: , + onAction: (): void => { + action('Click on first card'); + }, + title: 'Individual contract', + }, + { + image: , + onAction: (): void => { + action('Click on second card'); + }, + title: '2 Lines text for example', + }, + ], + cardsColor: '', dropZone: false, motifVisible: true, title:

Jean-Michel DUPONT

, diff --git a/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx b/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx index 0f466364..2e8c8d83 100644 --- a/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx +++ b/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx @@ -8,8 +8,15 @@ import { createStyles } from '@mantine/styles'; import Motif from './Motif'; +interface ICard { + image?: ReactElement; + onAction?: (item: ICard) => void; + title?: string; +} + interface IFileSheetProps extends BoxProps { - cards?: { action?: () => void; image?: ReactElement; title?: 'string' }[]; + cards?: ICard[]; + cardsColor?: string; children?: ReactNode; content?: ReactElement; dropZone: boolean; @@ -19,43 +26,12 @@ interface IFileSheetProps extends BoxProps { title?: ReactElement; } -const useStyles = createStyles((theme) => ({ - card: {}, - cards: {}, - content: {}, - fileSheet: { - backgroundColor: theme.black, - borderRadius: '16px', - minHeight: '219px', - overflow: 'hidden', - padding: '32px 42px', - position: 'relative', - width: '100%', - }, - leftContainer: { - maxWidth: '342px', - }, - motif: { - left: 0, - position: 'absolute', - top: 0, - }, - rightContainer: {}, - title: { - 'h1, h2, h3, h4 h5, p': { - color: theme.white, - fontSize: '26px', - fontWeight: 700, - marginBottom: '24px', - }, - }, -})); - export function FileSheet(props: IFileSheetProps): ReactElement { const { children, title, cards, + cardsColor, content, dropZone, dropZoneContent, @@ -63,6 +39,67 @@ export function FileSheet(props: IFileSheetProps): ReactElement { motifVisible = true, ...BoxProps } = props; + + const useStyles = createStyles((theme) => ({ + card: { + alignItems: 'center', + background: cardsColor ? cardsColor : theme.colors.cyan[0], + borderRadius: '4px', + cursor: 'pointer', + display: 'flex', + height: '40px', + justifyContent: 'center', + marginRight: '16px', + minWidth: '40px', + width: '40px', + }, + cardGroupe: { + alignItems: 'center', + color: 'white', + display: 'flex', + justifyContent: 'left', + marginBottom: '20px', + paddingRight: '20px', + width: '200px', + }, + cards: { + display: 'flex', + flexWrap: 'wrap', + justifyContent: 'left', + }, + container: { + position: 'relative', + zIndex: 1, + }, + content: {}, + fileSheet: { + backgroundColor: theme.black, + 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, + }, + rightContainer: {}, + title: { + 'h1, h2, h3, h4 h5, p': { + color: theme.white, + fontSize: '26px', + fontWeight: 700, + marginBottom: '24px', + }, + }, + })); const { classes } = useStyles(); return ( @@ -70,21 +107,34 @@ export function FileSheet(props: IFileSheetProps): ReactElement { {motifVisible ? (
{motif ? motif : }
) : null} -
- {title ?
{title}
: null} -
- {cards - ? cards.map((item, key) => ( -
- {item.image ? item.image : ''} - {item.title ? item.title : null} -
- )) - : null} +
+
+ {title ?
{title}
: null} +
+ {cards + ? cards.map((item, key) => ( +
+ {item.image ? ( + + ) : null} + {item.title ? item.title : null} +
+ )) + : null} +
+ {content ?
{content}
: null}
- {content ?
{content}
: null} + {dropZone ?
: null}
- {dropZone ?
: null} ); diff --git a/packages/react-front-kit/src/3-custom/Components/FileSheet/__snapshots__/FileSheet.test.tsx.snap b/packages/react-front-kit/src/3-custom/Components/FileSheet/__snapshots__/FileSheet.test.tsx.snap index 06f56f81..b4e1f43c 100644 --- a/packages/react-front-kit/src/3-custom/Components/FileSheet/__snapshots__/FileSheet.test.tsx.snap +++ b/packages/react-front-kit/src/3-custom/Components/FileSheet/__snapshots__/FileSheet.test.tsx.snap @@ -6,7 +6,7 @@ exports[`FileSheet matches snapshot 1`] = ` class="mantine-c5013w" >
+ class="mantine-16uzd3i" + > +
+
From 86811f01dd211e3e605380f942378ee87c99dc75 Mon Sep 17 00:00:00 2001 From: vapersmile Date: Mon, 2 Oct 2023 16:59:56 +0200 Subject: [PATCH 4/9] feat(1246933): fix pr returns --- .../Components/FileSheet/FileSheet.tsx | 59 +++++++------- .../3-custom/Components/FileSheet/Motif.tsx | 80 ++++++------------- .../__snapshots__/FileSheet.test.tsx.snap | 28 +------ 3 files changed, 55 insertions(+), 112 deletions(-) diff --git a/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx b/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx index 2e8c8d83..15f6f978 100644 --- a/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx +++ b/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx @@ -3,7 +3,7 @@ import type { BoxProps } from '@mantine/core'; import type { ReactElement, ReactNode } from 'react'; -import { Box, MantineProvider } from '@mantine/core'; +import { Box } from '@mantine/core'; import { createStyles } from '@mantine/styles'; import Motif from './Motif'; @@ -30,7 +30,7 @@ export function FileSheet(props: IFileSheetProps): ReactElement { const { children, title, - cards, + cards = [], cardsColor, content, dropZone, @@ -93,7 +93,7 @@ export function FileSheet(props: IFileSheetProps): ReactElement { rightContainer: {}, title: { 'h1, h2, h3, h4 h5, p': { - color: theme.white, + color: 'white', fontSize: '26px', fontWeight: 700, marginBottom: '24px', @@ -102,40 +102,35 @@ export function FileSheet(props: IFileSheetProps): ReactElement { })); const { classes } = useStyles(); return ( - - - {motifVisible ? ( -
{motif ? motif : }
- ) : null} -
-
- {title ?
{title}
: null} + + {Boolean(motifVisible) && ( +
{motif ? motif : }
+ )} +
+
+ {Boolean(title) &&
{title}
} + {Boolean(cards.length > 0) && (
- {cards - ? cards.map((item, key) => ( + {cards.map((item, key) => ( +
+ {Boolean(item.image) && ( - )) - : null} + )} + {Boolean(item.title) && item.title} +
+ ))}
- {content ?
{content}
: null} -
- {dropZone ?
: null} + )} + {Boolean(content) &&
{content}
}
- - + {Boolean(dropZone) &&
} +
+ ); } diff --git a/packages/react-front-kit/src/3-custom/Components/FileSheet/Motif.tsx b/packages/react-front-kit/src/3-custom/Components/FileSheet/Motif.tsx index 9a6a8801..271f6b12 100644 --- a/packages/react-front-kit/src/3-custom/Components/FileSheet/Motif.tsx +++ b/packages/react-front-kit/src/3-custom/Components/FileSheet/Motif.tsx @@ -1,99 +1,69 @@ import type { ReactElement } from 'react'; +import { createStyles } from '@mantine/styles'; + interface IProps { color?: string; opacity?: string; } function Motif(props: IProps): ReactElement { - const { opacity = '0.1', color = '#868E96' } = props; + const { opacity = 0.1, color } = props; + + const useStyles = createStyles((theme) => ({ + motif: { + fill: color ? color : theme.colors.gray[0], + opacity, + }, + })); + const { classes } = useStyles(); return ( - + - - + + - - + + - + - - + + - - - - + + + + - + diff --git a/packages/react-front-kit/src/3-custom/Components/FileSheet/__snapshots__/FileSheet.test.tsx.snap b/packages/react-front-kit/src/3-custom/Components/FileSheet/__snapshots__/FileSheet.test.tsx.snap index b4e1f43c..9ef2ebe2 100644 --- a/packages/react-front-kit/src/3-custom/Components/FileSheet/__snapshots__/FileSheet.test.tsx.snap +++ b/packages/react-front-kit/src/3-custom/Components/FileSheet/__snapshots__/FileSheet.test.tsx.snap @@ -9,85 +9,68 @@ exports[`FileSheet matches snapshot 1`] = ` class="mantine-15wxh6f" > - + @@ -98,7 +81,6 @@ exports[`FileSheet matches snapshot 1`] = ` > @@ -109,11 +91,7 @@ exports[`FileSheet matches snapshot 1`] = ` >
-
-
+ />
From 02218c2f9784d9acafcca303b204ec908b97fd7f Mon Sep 17 00:00:00 2001 From: vapersmile Date: Tue, 3 Oct 2023 12:04:27 +0200 Subject: [PATCH 5/9] feat(redmine 1246933): taking pr feedback into account --- .../Components/FileSheet/FileSheet.stories.tsx | 7 +++++++ .../3-custom/Components/FileSheet/FileSheet.tsx | 15 +++++++++++---- .../src/3-custom/Components/FileSheet/Motif.tsx | 4 ++-- 3 files changed, 20 insertions(+), 6 deletions(-) diff --git a/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.stories.tsx b/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.stories.tsx index e155cfbd..8916134e 100644 --- a/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.stories.tsx +++ b/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.stories.tsx @@ -6,6 +6,11 @@ import { action } from '@storybook/addon-actions'; import { FileSheet as Cmp } from './FileSheet'; const meta = { + argTypes: { + defaultMotifOpacity: { + control: { max: 1, min: 0, step: 0.1, type: 'number' }, + }, + }, component: Cmp, tags: ['autodocs'], title: '3-custom/Components/FileSheet', @@ -33,6 +38,8 @@ export const FileSheet: IStory = { }, ], cardsColor: '', + defaultMotifColor: '', + defaultMotifOpacity: '', dropZone: false, motifVisible: true, title:

Jean-Michel DUPONT

, diff --git a/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx b/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx index 15f6f978..0ee2a7a5 100644 --- a/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx +++ b/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx @@ -19,6 +19,8 @@ interface IFileSheetProps extends BoxProps { cardsColor?: string; children?: ReactNode; content?: ReactElement; + defaultMotifColor?: string; + defaultMotifOpacity?: string; dropZone: boolean; dropZoneContent?: ReactElement; motif?: ReactElement; @@ -33,6 +35,8 @@ export function FileSheet(props: IFileSheetProps): ReactElement { cards = [], cardsColor, content, + defaultMotifColor, + defaultMotifOpacity, dropZone, dropZoneContent, motif, @@ -55,7 +59,6 @@ export function FileSheet(props: IFileSheetProps): ReactElement { }, cardGroupe: { alignItems: 'center', - color: 'white', display: 'flex', justifyContent: 'left', marginBottom: '20px', @@ -73,7 +76,6 @@ export function FileSheet(props: IFileSheetProps): ReactElement { }, content: {}, fileSheet: { - backgroundColor: theme.black, borderRadius: '16px', minHeight: '219px', overflow: 'hidden', @@ -93,7 +95,6 @@ export function FileSheet(props: IFileSheetProps): ReactElement { rightContainer: {}, title: { 'h1, h2, h3, h4 h5, p': { - color: 'white', fontSize: '26px', fontWeight: 700, marginBottom: '24px', @@ -104,7 +105,13 @@ export function FileSheet(props: IFileSheetProps): ReactElement { return ( {Boolean(motifVisible) && ( -
{motif ? motif : }
+
+ {motif ? ( + motif + ) : ( + + )} +
)}
diff --git a/packages/react-front-kit/src/3-custom/Components/FileSheet/Motif.tsx b/packages/react-front-kit/src/3-custom/Components/FileSheet/Motif.tsx index 271f6b12..3163c406 100644 --- a/packages/react-front-kit/src/3-custom/Components/FileSheet/Motif.tsx +++ b/packages/react-front-kit/src/3-custom/Components/FileSheet/Motif.tsx @@ -8,12 +8,12 @@ interface IProps { } function Motif(props: IProps): ReactElement { - const { opacity = 0.1, color } = props; + const { opacity, color } = props; const useStyles = createStyles((theme) => ({ motif: { fill: color ? color : theme.colors.gray[0], - opacity, + opacity: opacity ? opacity : 0.1, }, })); const { classes } = useStyles(); From a72d8a068ebcec2430af9043783b33bb22a25534 Mon Sep 17 00:00:00 2001 From: vapersmile Date: Tue, 3 Oct 2023 15:02:50 +0200 Subject: [PATCH 6/9] feat(redmine 1255989): add free zone for content --- .../Components/FileSheet/FileSheet.stories.tsx | 16 +++++++++++++++- .../3-custom/Components/FileSheet/FileSheet.tsx | 2 +- .../__snapshots__/FileSheet.test.tsx.snap | 3 ++- 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.stories.tsx b/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.stories.tsx index 8916134e..d202f456 100644 --- a/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.stories.tsx +++ b/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { Suitcase, User } from '@phosphor-icons/react'; +import { Eye, Suitcase, User } from '@phosphor-icons/react'; import { action } from '@storybook/addon-actions'; import { FileSheet as Cmp } from './FileSheet'; @@ -38,6 +38,20 @@ export const FileSheet: IStory = { }, ], cardsColor: '', + content: ( +

+ + View the folder properties +

+ ), defaultMotifColor: '', defaultMotifOpacity: '', dropZone: false, diff --git a/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx b/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx index 0ee2a7a5..30f1d4fb 100644 --- a/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx +++ b/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx @@ -103,7 +103,7 @@ export function FileSheet(props: IFileSheetProps): ReactElement { })); const { classes } = useStyles(); return ( - + {Boolean(motifVisible) && (
{motif ? ( diff --git a/packages/react-front-kit/src/3-custom/Components/FileSheet/__snapshots__/FileSheet.test.tsx.snap b/packages/react-front-kit/src/3-custom/Components/FileSheet/__snapshots__/FileSheet.test.tsx.snap index 9ef2ebe2..ab0134cb 100644 --- a/packages/react-front-kit/src/3-custom/Components/FileSheet/__snapshots__/FileSheet.test.tsx.snap +++ b/packages/react-front-kit/src/3-custom/Components/FileSheet/__snapshots__/FileSheet.test.tsx.snap @@ -3,7 +3,8 @@ exports[`FileSheet matches snapshot 1`] = `
Date: Wed, 4 Oct 2023 10:25:23 +0200 Subject: [PATCH 7/9] feat(redmine 1255989): taking into account dally feedback --- package-lock.json | 210 +++++++++--------- .../DropzoneCard.stories.tsx} | 8 +- .../DropzoneCard/DropzoneCard.test.tsx | 12 + .../DropzoneCard.tsx} | 17 +- .../{FileSheet => DropzoneCard}/Motif.tsx | 0 .../__snapshots__/DropzoneCard.test.tsx.snap} | 2 +- .../Components/FileSheet/FileSheet.test.tsx | 10 - packages/react-front-kit/src/index.tsx | 2 +- 8 files changed, 130 insertions(+), 131 deletions(-) rename packages/react-front-kit/src/3-custom/Components/{FileSheet/FileSheet.stories.tsx => DropzoneCard/DropzoneCard.stories.tsx} (89%) create mode 100644 packages/react-front-kit/src/3-custom/Components/DropzoneCard/DropzoneCard.test.tsx rename packages/react-front-kit/src/3-custom/Components/{FileSheet/FileSheet.tsx => DropzoneCard/DropzoneCard.tsx} (88%) rename packages/react-front-kit/src/3-custom/Components/{FileSheet => DropzoneCard}/Motif.tsx (100%) rename packages/react-front-kit/src/3-custom/Components/{FileSheet/__snapshots__/FileSheet.test.tsx.snap => DropzoneCard/__snapshots__/DropzoneCard.test.tsx.snap} (99%) delete mode 100644 packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.test.tsx diff --git a/package-lock.json b/package-lock.json index 167139b4..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", @@ -29853,111 +29958,6 @@ "packages/tsconfig": { "version": "0.0.0", "license": "MIT" - }, - "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-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" - } } } } diff --git a/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.stories.tsx b/packages/react-front-kit/src/3-custom/Components/DropzoneCard/DropzoneCard.stories.tsx similarity index 89% rename from packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.stories.tsx rename to packages/react-front-kit/src/3-custom/Components/DropzoneCard/DropzoneCard.stories.tsx index d202f456..a36973f1 100644 --- a/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.stories.tsx +++ b/packages/react-front-kit/src/3-custom/Components/DropzoneCard/DropzoneCard.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Eye, Suitcase, User } from '@phosphor-icons/react'; import { action } from '@storybook/addon-actions'; -import { FileSheet as Cmp } from './FileSheet'; +import { DropzoneCard as Cmp } from './DropzoneCard'; const meta = { argTypes: { @@ -13,13 +13,13 @@ const meta = { }, component: Cmp, tags: ['autodocs'], - title: '3-custom/Components/FileSheet', + title: '3-custom/Components/DropzoneCard', } satisfies Meta; export default meta; type IStory = StoryObj; -export const FileSheet: IStory = { +export const DropzoneCard: IStory = { args: { cards: [ { @@ -38,7 +38,7 @@ export const FileSheet: IStory = { }, ], cardsColor: '', - content: ( + children: (

{ + it('matches snapshot', () => { + const { container } = renderWithProviders( + , + ); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx b/packages/react-front-kit/src/3-custom/Components/DropzoneCard/DropzoneCard.tsx similarity index 88% rename from packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx rename to packages/react-front-kit/src/3-custom/Components/DropzoneCard/DropzoneCard.tsx index 30f1d4fb..f237e388 100644 --- a/packages/react-front-kit/src/3-custom/Components/FileSheet/FileSheet.tsx +++ b/packages/react-front-kit/src/3-custom/Components/DropzoneCard/DropzoneCard.tsx @@ -1,7 +1,7 @@ 'use client'; import type { BoxProps } from '@mantine/core'; -import type { ReactElement, ReactNode } from 'react'; +import type { ReactElement } from 'react'; import { Box } from '@mantine/core'; import { createStyles } from '@mantine/styles'; @@ -14,11 +14,10 @@ interface ICard { title?: string; } -interface IFileSheetProps extends BoxProps { +interface IDropzoneCardProps extends BoxProps { cards?: ICard[]; cardsColor?: string; - children?: ReactNode; - content?: ReactElement; + children?: ReactElement; defaultMotifColor?: string; defaultMotifOpacity?: string; dropZone: boolean; @@ -28,13 +27,12 @@ interface IFileSheetProps extends BoxProps { title?: ReactElement; } -export function FileSheet(props: IFileSheetProps): ReactElement { +export function DropzoneCard(props: IDropzoneCardProps): ReactElement { const { children, title, cards = [], cardsColor, - content, defaultMotifColor, defaultMotifOpacity, dropZone, @@ -74,8 +72,7 @@ export function FileSheet(props: IFileSheetProps): ReactElement { position: 'relative', zIndex: 1, }, - content: {}, - fileSheet: { + dropzoneCard: { borderRadius: '16px', minHeight: '219px', overflow: 'hidden', @@ -103,7 +100,7 @@ export function FileSheet(props: IFileSheetProps): ReactElement { })); const { classes } = useStyles(); return ( - + {Boolean(motifVisible) && (

{motif ? ( @@ -134,7 +131,7 @@ export function FileSheet(props: IFileSheetProps): ReactElement { ))}
)} - {Boolean(content) &&
{content}
} + {Boolean(children) &&
{children}
}
{Boolean(dropZone) &&
}
diff --git a/packages/react-front-kit/src/3-custom/Components/FileSheet/Motif.tsx b/packages/react-front-kit/src/3-custom/Components/DropzoneCard/Motif.tsx similarity index 100% rename from packages/react-front-kit/src/3-custom/Components/FileSheet/Motif.tsx rename to packages/react-front-kit/src/3-custom/Components/DropzoneCard/Motif.tsx diff --git a/packages/react-front-kit/src/3-custom/Components/FileSheet/__snapshots__/FileSheet.test.tsx.snap b/packages/react-front-kit/src/3-custom/Components/DropzoneCard/__snapshots__/DropzoneCard.test.tsx.snap similarity index 99% rename from packages/react-front-kit/src/3-custom/Components/FileSheet/__snapshots__/FileSheet.test.tsx.snap rename to packages/react-front-kit/src/3-custom/Components/DropzoneCard/__snapshots__/DropzoneCard.test.tsx.snap index ab0134cb..aee4b980 100644 --- a/packages/react-front-kit/src/3-custom/Components/FileSheet/__snapshots__/FileSheet.test.tsx.snap +++ b/packages/react-front-kit/src/3-custom/Components/DropzoneCard/__snapshots__/DropzoneCard.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`FileSheet matches snapshot 1`] = ` +exports[`DropzoneCard matches snapshot 1`] = `
{ - it('matches snapshot', () => { - const { container } = renderWithProviders(); - expect(container).toMatchSnapshot(); - }); -}); diff --git a/packages/react-front-kit/src/index.tsx b/packages/react-front-kit/src/index.tsx index f09a2fa6..ffb6a730 100644 --- a/packages/react-front-kit/src/index.tsx +++ b/packages/react-front-kit/src/index.tsx @@ -1,11 +1,11 @@ /* eslint-disable react-refresh/only-export-components */ // component exports -export * from './3-custom/Components/FileSheet/FileSheet'; export * from './1-styleGuide/Icons'; 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'; From 50af311bf047d96ef69dfd33e66d387ff4b12f81 Mon Sep 17 00:00:00 2001 From: vapersmile Date: Wed, 4 Oct 2023 15:35:42 +0200 Subject: [PATCH 8/9] feat(redmine 1244990): taking into account Tony's feedback --- .../DropzoneCard/DropzoneCard.stories.tsx | 43 ++-- .../DropzoneCard/DropzoneCard.test.tsx | 4 +- .../Components/DropzoneCard/DropzoneCard.tsx | 187 ++++++++---------- .../Components/DropzoneCard/Motif.tsx | 27 +-- .../__snapshots__/DropzoneCard.test.tsx.snap | 3 +- 5 files changed, 115 insertions(+), 149 deletions(-) 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 index a36973f1..3f0a1f5d 100644 --- 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 @@ -6,11 +6,6 @@ import { action } from '@storybook/addon-actions'; import { DropzoneCard as Cmp } from './DropzoneCard'; const meta = { - argTypes: { - defaultMotifOpacity: { - control: { max: 1, min: 0, step: 0.1, type: 'number' }, - }, - }, component: Cmp, tags: ['autodocs'], title: '3-custom/Components/DropzoneCard', @@ -21,23 +16,6 @@ type IStory = StoryObj; export const DropzoneCard: IStory = { args: { - cards: [ - { - image: , - onAction: (): void => { - action('Click on first card'); - }, - title: 'Individual contract', - }, - { - image: , - onAction: (): void => { - action('Click on second card'); - }, - title: '2 Lines text for example', - }, - ], - cardsColor: '', children: (

), - defaultMotifColor: '', - defaultMotifOpacity: '', - dropZone: false, - motifVisible: true, + 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 index 075784d4..aa155063 100644 --- 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 @@ -4,9 +4,7 @@ import { DropzoneCard } from './DropzoneCard'; describe('DropzoneCard', () => { it('matches snapshot', () => { - const { container } = renderWithProviders( - , - ); + 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 index f237e388..8169d610 100644 --- a/packages/react-front-kit/src/3-custom/Components/DropzoneCard/DropzoneCard.tsx +++ b/packages/react-front-kit/src/3-custom/Components/DropzoneCard/DropzoneCard.tsx @@ -1,139 +1,124 @@ 'use client'; -import type { BoxProps } from '@mantine/core'; +import type { ActionIconProps, BoxProps } from '@mantine/core'; import type { ReactElement } from 'react'; -import { Box } from '@mantine/core'; +import { ActionIcon, Box } from '@mantine/core'; import { createStyles } from '@mantine/styles'; import Motif from './Motif'; -interface ICard { - image?: ReactElement; - onAction?: (item: ICard) => void; - title?: string; +interface IContentItem { + icon?: ReactElement; + iconProps?: Partial; + label?: string; + onAction?: (item: IContentItem) => void; } interface IDropzoneCardProps extends BoxProps { - cards?: ICard[]; - cardsColor?: string; children?: ReactElement; - defaultMotifColor?: string; - defaultMotifOpacity?: string; - dropZone: boolean; - dropZoneContent?: ReactElement; + contentItems?: IContentItem[]; + dropzone?: ReactElement; motif?: ReactElement; - motifVisible?: boolean; 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, - cards = [], - cardsColor, - defaultMotifColor, - defaultMotifOpacity, - dropZone, - dropZoneContent, - motif, - motifVisible = true, + contentItems = [], + dropzone, + motif = , ...BoxProps } = props; - - const useStyles = createStyles((theme) => ({ - card: { - alignItems: 'center', - background: cardsColor ? cardsColor : theme.colors.cyan[0], - borderRadius: '4px', - cursor: 'pointer', - display: 'flex', - height: '40px', - justifyContent: 'center', - marginRight: '16px', - minWidth: '40px', - width: '40px', - }, - cardGroupe: { - alignItems: 'center', - display: 'flex', - justifyContent: 'left', - marginBottom: '20px', - paddingRight: '20px', - width: '200px', - }, - cards: { - display: 'flex', - flexWrap: 'wrap', - justifyContent: 'left', - }, - container: { - position: 'relative', - zIndex: 1, - }, - dropzoneCard: { - 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, - }, - rightContainer: {}, - title: { - 'h1, h2, h3, h4 h5, p': { - fontSize: '26px', - fontWeight: 700, - marginBottom: '24px', - }, - }, - })); const { classes } = useStyles(); return ( - - {Boolean(motifVisible) && ( -
- {motif ? ( - motif - ) : ( - - )} -
- )} + +
{motif}
{Boolean(title) &&
{title}
} - {Boolean(cards.length > 0) && ( -
- {cards.map((item, key) => ( -
- {Boolean(item.image) && ( - )} {Boolean(children) &&
{children}
}
- {Boolean(dropZone) &&
} + {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 index 3163c406..fae69b1d 100644 --- a/packages/react-front-kit/src/3-custom/Components/DropzoneCard/Motif.tsx +++ b/packages/react-front-kit/src/3-custom/Components/DropzoneCard/Motif.tsx @@ -1,30 +1,23 @@ -import type { ReactElement } from 'react'; +import type { + CSSProperties, + ComponentPropsWithoutRef, + ReactElement, +} from 'react'; -import { createStyles } from '@mantine/styles'; - -interface IProps { - color?: string; - opacity?: string; +interface IProps extends ComponentPropsWithoutRef<'svg'> { + style?: CSSProperties; } function Motif(props: IProps): ReactElement { - const { opacity, color } = props; - - const useStyles = createStyles((theme) => ({ - motif: { - fill: color ? color : theme.colors.gray[0], - opacity: opacity ? opacity : 0.1, - }, - })); - const { classes } = useStyles(); + const { style = { fill: 'white', opacity: 0.1 }, ...svgProps } = props; return ( 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 index aee4b980..df4e42d5 100644 --- 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 @@ -10,9 +10,8 @@ exports[`DropzoneCard matches snapshot 1`] = ` class="mantine-15wxh6f" > Date: Wed, 4 Oct 2023 15:50:41 +0200 Subject: [PATCH 9/9] feat(redmine 1255989): change dropzone test snapshot --- .../DropzoneCard/__snapshots__/DropzoneCard.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index df4e42d5..039bd8fc 100644 --- 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 @@ -11,7 +11,7 @@ exports[`DropzoneCard matches snapshot 1`] = ` >