feat: wip import csv [part 1] (#1033)

* feat: wip import csv * feat: start implementing twenty UI * feat: new radio button component * feat: use new radio button component and fix scroll issue * fix: max height modal * feat: wip try to customize react-data-grid to match design * feat: wip match columns * feat: wip match column selection * feat: match column * feat: clean heading component & try to fix scroll in last step * feat: validation step * fix: small cleaning and remove unused component * feat: clean folder architecture * feat: remove translations * feat: remove chackra theme * feat: remove unused libraries * feat: use option button to open spreadsheet & fix stories * Fix lint and fix imports --------- Co-authored-by: Charles Bochet <charles@twenty.com>
2023-08-16 00:12:47 +02:00
parent 1ca41021cf
commit 56cada6335
95 changed files with 7042 additions and 99 deletions
--- a/front/src/modules/spreadsheet-import/tests/mockRsiValues.ts
+++ b/front/src/modules/spreadsheet-import/tests/mockRsiValues.ts
@ -0,0 +1,170 @@
+import { defaultRSIProps } from '@/spreadsheet-import/components/SpreadsheetImport';
+import type { RsiProps } from '@/spreadsheet-import/types';
+
+const fields = [
+  {
+    icon: null,
+    label: 'Name',
+    key: 'name',
+    alternateMatches: ['first name', 'first'],
+    fieldType: {
+      type: 'input',
+    },
+    example: 'Stephanie',
+    validations: [
+      {
+        rule: 'required',
+        errorMessage: 'Name is required',
+      },
+    ],
+  },
+  {
+    icon: null,
+    label: 'Surname',
+    key: 'surname',
+    alternateMatches: ['second name', 'last name', 'last'],
+    fieldType: {
+      type: 'input',
+    },
+    example: 'McDonald',
+    validations: [
+      {
+        rule: 'unique',
+        errorMessage: 'Last name must be unique',
+        level: 'info',
+      },
+    ],
+    description: 'Family / Last name',
+  },
+  {
+    icon: null,
+    label: 'Age',
+    key: 'age',
+    alternateMatches: ['years'],
+    fieldType: {
+      type: 'input',
+    },
+    example: '23',
+    validations: [
+      {
+        rule: 'regex',
+        value: '^\\d+$',
+        errorMessage: 'Age must be a number',
+        level: 'warning',
+      },
+    ],
+  },
+  {
+    icon: null,
+    label: 'Team',
+    key: 'team',
+    alternateMatches: ['department'],
+    fieldType: {
+      type: 'select',
+      options: [
+        { label: 'Team One', value: 'one' },
+        { label: 'Team Two', value: 'two' },
+      ],
+    },
+    example: 'Team one',
+    validations: [
+      {
+        rule: 'required',
+        errorMessage: 'Team is required',
+      },
+    ],
+  },
+  {
+    icon: null,
+    label: 'Is manager',
+    key: 'is_manager',
+    alternateMatches: ['manages'],
+    fieldType: {
+      type: 'checkbox',
+      booleanMatches: {},
+    },
+    example: 'true',
+  },
+] as const;
+
+const mockComponentBehaviourForTypes = <T extends string>(props: RsiProps<T>) =>
+  props;
+
+export const mockRsiValues = mockComponentBehaviourForTypes({
+  ...defaultRSIProps,
+  fields: fields,
+  onSubmit: (data) => {
+    console.log(data.all.map((value) => value));
+  },
+  isOpen: true,
+  onClose: () => {
+    console.log('onClose');
+  },
+  uploadStepHook: async (data) => {
+    await new Promise((resolve) => {
+      setTimeout(() => resolve(data), 4000);
+    });
+    return data;
+  },
+  selectHeaderStepHook: async (hData, data) => {
+    await new Promise((resolve) => {
+      setTimeout(
+        () =>
+          resolve({
+            headerValues: hData,
+            data,
+          }),
+        4000,
+      );
+    });
+    return {
+      headerValues: hData,
+      data,
+    };
+  },
+  // Runs after column matching and on entry change, more performant
+  matchColumnsStepHook: async (data) => {
+    await new Promise((resolve) => {
+      setTimeout(() => resolve(data), 4000);
+    });
+    return data;
+  },
+});
+
+export const editableTableInitialData = [
+  {
+    name: 'Hello',
+    surname: 'Hello',
+    age: '123123',
+    team: 'one',
+    is_manager: true,
+  },
+  {
+    name: 'Hello',
+    surname: 'Hello',
+    age: '12312zsas3',
+    team: 'two',
+    is_manager: true,
+  },
+  {
+    name: 'Whooaasdasdawdawdawdiouasdiuasdisdhasd',
+    surname: 'Hello',
+    age: '123123',
+    team: undefined,
+    is_manager: false,
+  },
+  {
+    name: 'Goodbye',
+    surname: 'Goodbye',
+    age: '111',
+    team: 'two',
+    is_manager: true,
+  },
+];
+
+export const headerSelectionTableFields = [
+  ['text', 'num', 'select', 'bool'],
+  ['Hello', '123', 'one', 'true'],
+  ['Hello', '123', 'one', 'true'],
+  ['Hello', '123', 'one', 'true'],
+];