chore: move dropzone in its own package

packages/react-front-kit-dropzone/README.md

@@ -0,0 +1,19 @@
+# React Front Kit dropzone
+
+Dropzone component.
+
+## Prerequisite
+
+You must have React 18 or later installed on your project.
+
+## Installation
+
+Install `@smile/react-front-kit-dropzone` and peer dependencies with:
+
+```bash
+npm i @smile/react-front-kit-dropzone @emotion/react @mantine/core @mantine/hooks @mantine/styles @mantine/dropzone @phosphor-icons/react
+```
+
+## License
+
+MIT

packages/react-front-kit-dropzone/babel.config.js

@@ -0,0 +1,3 @@
+const { babelConfig } = require('test');
+
+module.exports = babelConfig;

packages/react-front-kit-dropzone/jest.config.ts

@@ -0,0 +1 @@
+export { jestConfig as default } from 'test';

packages/react-front-kit-dropzone/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@smile/react-front-kit-dropzone",
+  "version": "0.2.0",
+  "description": "Dropzone React component library based on mantine",
+  "license": "MIT",
+  "homepage": "https://github.com/Smile-SA/react-front-kit",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Smile-SA/react-front-kit.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Smile-SA/react-front-kit/issues"
+  },
+  "keywords": [
+    "react",
+    "react-component",
+    "next",
+    "nextjs",
+    "ui",
+    "components",
+    "ui-kit",
+    "library",
+    "frontend",
+    "design",
+    "emotion",
+    "dropzone"
+  ],
+  "author": {
+    "name": "Tony Cabaye",
+    "email": "tonai59+github@gmail.com",
+    "url": "https://github.com/tonai"
+  },
+  "main": "./dist/index.js",
+  "module": "./src/index.tsx",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsc --project tsconfig.build.json",
+    "test": "jest",
+    "prepublishOnly": "npm run build && node ./scripts/prepublish.mjs"
+  },
+  "dependencies": {
+    "@smile/react-front-kit": "*",
+    "@smile/react-front-kit-shared": "*"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.0",
+    "@storybook/addon-actions": "^7.4.1",
+    "@storybook/jest": "^0.2.2",
+    "@storybook/preview-api": "^7.4.1",
+    "@storybook/testing-library": "^0.2.0",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "test": "*",
+    "tsconfig": "*",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "@emotion/react": ">=11",
+    "@mantine/core": "6",
+    "@mantine/dropzone": "6",
+    "@mantine/hooks": "6",
+    "@mantine/styles": "6",
+    "@phosphor-icons/react": ">=2",
+    "react": ">=18.0",
+    "react-dom": ">=18.0"
+  }
+}

packages/react-front-kit/src/Components/Dropzone/Dropzone.tsx → packages/react-front-kit-dropzone/src/Components/Dropzone/Dropzone.tsx

@@ -10,9 +10,7 @@ import { ActionIcon, Tooltip } from '@mantine/core';
 import { Dropzone as MantineDropzone } from '@mantine/dropzone';
 import { createStyles } from '@mantine/styles';
 import { Eye, Plus, X } from '@phosphor-icons/react';
-
-import { BitConverter } from '../BitConverter/BitConverter';
-import { TruncateString } from '../TruncateString/TruncateString';
+import { BitConverter, TruncateString } from '@smile/react-front-kit';
 
 export interface IFile extends Partial<FileWithPath> {
   name: string;

packages/react-front-kit-dropzone/src/index.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable react-refresh/only-export-components */
+export * from './Components/Dropzone/Dropzone';

packages/react-front-kit-dropzone/tsconfig.build.json

@@ -0,0 +1,13 @@
+{
+  "extends": "tsconfig/react-library.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "exclude": [
+    "__snapshots__",
+    "src/**/*.test.tsx",
+    "src/**/*.stories.tsx",
+    "src/**/*.mock.tsx"
+  ],
+  "include": ["src"]
+}

packages/react-front-kit-dropzone/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "tsconfig/react-library.json"
+}

packages/react-front-kit-table/src/index.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable react-refresh/only-export-components */
+export * from './Components/Table/Table';

packages/react-front-kit/src/Components/DropzoneCard/DropzoneCard.stories.tsx → packages/react-front-kit/src/Components/InfoCard/InfoCard.stories.tsx

@@ -3,22 +3,20 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Eye, Suitcase, User } from '@phosphor-icons/react';
 import { action } from '@storybook/addon-actions';
 
-import { Dropzone } from '../Dropzone/Dropzone';
-
-import { DropzoneCard as Cmp } from './DropzoneCard';
+import { InfoCard as Cmp } from './InfoCard';
 
 const meta = {
   component: Cmp,
   tags: ['autodocs'],
-  title: '3-custom/Components/DropzoneCard',
+  title: '3-custom/Components/InfoCard',
 } satisfies Meta<typeof Cmp>;
 
 export default meta;
 type IStory = StoryObj<typeof meta>;
 
-export const DropzoneCard: IStory = {
+export const InfoCard: IStory = {
   args: {
-    children: <Dropzone onDrop={action('onDrop')} />,
+    children: <p>Customizable content</p>,
     content: (
       <p
         style={{

packages/react-front-kit/src/Components/DropzoneCard/DropzoneCard.test.tsx → packages/react-front-kit/src/Components/InfoCard/InfoCard.test.tsx

@@ -1,10 +1,10 @@
 import { renderWithProviders } from '@smile/react-front-kit-shared/src/test-utils';
 
-import { DropzoneCard } from './DropzoneCard';
+import { InfoCard } from './InfoCard';
 
-describe('DropzoneCard', () => {
+describe('InfoCard', () => {
   it('matches snapshot', () => {
-    const { container } = renderWithProviders(<DropzoneCard />);
+    const { container } = renderWithProviders(<InfoCard />);
     expect(container).toMatchSnapshot();
   });
 });

packages/react-front-kit/src/Components/DropzoneCard/DropzoneCard.tsx → packages/react-front-kit/src/Components/InfoCard/InfoCard.tsx

@@ -15,7 +15,7 @@ interface IContentItem {
   onAction?: (item: IContentItem) => void;
 }
 
-interface IDropzoneCardProps extends BoxProps {
+interface IInfoCardProps extends BoxProps {
   children?: ReactElement;
   content?: ReactElement;
   contentItems?: IContentItem[];
@@ -60,15 +60,25 @@ const useStyles = createStyles(() => ({
     justifyContent: 'left',
     minWidth: '440px',
   },
-  dropzoneContainer: {
+  leftContainer: {
+    marginRight: '20px',
+    maxWidth: '440px',
+  },
+  motif: {
+    left: -40,
+    position: 'absolute',
+    top: -60,
+    zIndex: 0,
+  },
+  rightContainer: {
     '@media (max-width: 834px)': {
       marginTop: '24px',
       maxWidth: '100%',
     },
     marginTop: '18px',
     width: '100%',
   },
-  dropzoneContentItem: {
+  root: {
     '@media (max-width: 640px)': {
       padding: '20px 20px',
     },
@@ -79,16 +89,6 @@ const useStyles = createStyles(() => ({
     position: 'relative',
     width: '100%',
   },
-  leftContainer: {
-    marginRight: '20px',
-    maxWidth: '440px',
-  },
-  motif: {
-    left: -40,
-    position: 'absolute',
-    top: -60,
-    zIndex: 0,
-  },
   title: {
     'h1, h2, h3, h4 h5, p': {
       fontSize: '26px',
@@ -98,7 +98,7 @@ const useStyles = createStyles(() => ({
   },
 }));
 
-export function DropzoneCard(props: IDropzoneCardProps): ReactElement {
+export function InfoCard(props: IInfoCardProps): ReactElement {
   const {
     content,
     title,
@@ -109,7 +109,7 @@ export function DropzoneCard(props: IDropzoneCardProps): ReactElement {
   } = props;
   const { classes } = useStyles();
   return (
-    <Box className={classes.dropzoneContentItem} color="primary" {...BoxProps}>
+    <Box className={classes.root} color="primary" {...BoxProps}>
       <div className={classes.motif}>{motif}</div>
       <div className={classes.container}>
         <div className={classes.leftContainer}>
@@ -141,7 +141,7 @@ export function DropzoneCard(props: IDropzoneCardProps): ReactElement {
           )}
           {Boolean(content) && <div>{content}</div>}
         </div>
-        <div className={classes.dropzoneContainer}>{children}</div>
+        <div className={classes.rightContainer}>{children}</div>
       </div>
     </Box>
   );

packages/react-front-kit/src/Components/DropzoneCard/__snapshots__/DropzoneCard.test.tsx.snap → packages/react-front-kit/src/Components/InfoCard/__snapshots__/InfoCard.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DropzoneCard matches snapshot 1`] = `
+exports[`InfoCard matches snapshot 1`] = `
 <div>
   <div
     class="mantine-b8z88k"

packages/react-front-kit/src/index.tsx

@@ -3,13 +3,12 @@ export * from '@smile/react-front-kit-shared';
 // component exports
 export * from './Components/TruncateString/TruncateString';
 export * from './Components/BitConverter/BitConverter';
-export * from './Components/Dropzone/Dropzone';
 export * from './Components/Breadcrumbs/Breadcrumbs';
 export * from './Components/CollapseButton/CollapseButtonControlled';
 export * from './Components/CollapseButton/CollapseButton';
 export * from './Components/ConfirmModal/ConfirmModal';
 export * from './Components/DropdownButton/DropdownButton';
-export * from './Components/DropzoneCard/DropzoneCard';
+export * from './Components/InfoCard/InfoCard';
 export * from './Components/Header/Header';
 export * from './Components/HeaderSearch/HeaderSearch';
 export * from './Components/Pagination/Pagination';