fix: fix cell border radius on soft focus (#649)

* refactor: add RootDecorator

* docs: add EditableCellText stories

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

front/.storybook/preview.ts

@@ -1,8 +1,9 @@
 import { initialize, mswDecorator } from 'msw-storybook-addon';
 import { Preview } from '@storybook/react';
 import { ThemeProvider } from '@emotion/react';
-import { withThemeFromJSXProvider } from "@storybook/addon-styling";
+import { withThemeFromJSXProvider } from '@storybook/addon-styling';
 import { lightTheme, darkTheme } from '../src/modules/ui/themes/themes';
+import { RootDecorator } from '../src/testing/decorators';
 
 initialize();
 
@@ -10,13 +11,14 @@ const preview: Preview = {
   decorators: [
     mswDecorator,
     withThemeFromJSXProvider({
-        themes: {
+      themes: {
-          light: lightTheme,
+        light: lightTheme,
-          dark: darkTheme,
+        dark: darkTheme,
-        },
+      },
-        defaultTheme: "light",
+      defaultTheme: 'light',
-        Provider: ThemeProvider,
+      Provider: ThemeProvider,
-      })
+    }),
+    RootDecorator,
   ],
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
@@ -29,4 +31,4 @@ const preview: Preview = {
   },
 };
 
-export default preview;
+export default preview;

front/src/__stories__/shared.tsx

@@ -1,7 +1,6 @@
 import { MemoryRouter } from 'react-router-dom';
-import { ApolloProvider } from '@apollo/client';
 import { ThemeProvider } from '@emotion/react';
-import { RecoilRoot, useRecoilState } from 'recoil';
+import { useRecoilState } from 'recoil';
 
 import { currentUserState } from '@/auth/states/currentUserState';
 import { isAuthenticatingState } from '@/auth/states/isAuthenticatingState';
@@ -9,7 +8,6 @@ import { darkTheme } from '@/ui/themes/themes';
 import { App } from '~/App';
 import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
 import { mockedUsersData } from '~/testing/mock-data/users';
-import { mockedClient } from '~/testing/mockedClient';
 
 export const render = () => renderWithDarkMode(false);
 
@@ -33,16 +31,12 @@ export const renderWithDarkMode = (forceDarkMode?: boolean) => {
   );
 
   return (
-    <RecoilRoot>
+    <MemoryRouter>
-      <ApolloProvider client={mockedClient}>
+      {forceDarkMode ? (
-        <MemoryRouter>
+        <ThemeProvider theme={darkTheme}>{AppInStoryBook}</ThemeProvider>
-          {forceDarkMode ? (
+      ) : (
-            <ThemeProvider theme={darkTheme}>{AppInStoryBook}</ThemeProvider>
+        AppInStoryBook
-          ) : (
+      )}
-            AppInStoryBook
+    </MemoryRouter>
-          )}
-        </MemoryRouter>
-      </ApolloProvider>
-    </RecoilRoot>
   );
 };

front/src/modules/ui/components/editable-cell/__stories__/EditableCellText.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import {
+  CellPositionDecorator,
+  ComponentDecorator,
+} from '~/testing/decorators';
+
+import { EditableCellText } from '../types/EditableCellText';
+
+const meta: Meta<typeof EditableCellText> = {
+  title: 'UI/EditableCell/EditableCellText',
+  component: EditableCellText,
+  decorators: [ComponentDecorator, CellPositionDecorator],
+  args: {
+    value: 'Content',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EditableCellText>;
+
+export const DisplayMode: Story = {
+  render: EditableCellText,
+};
+
+export const SoftFocusMode: Story = {
+  ...DisplayMode,
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step('Click once', () =>
+      userEvent.click(canvas.getByText('Content')),
+    );
+  },
+};
+
+export const EditMode: Story = {
+  ...DisplayMode,
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const click = async () => userEvent.click(canvas.getByText('Content'));
+
+    await step('Click once', click);
+    await step('Click twice', click);
+  },
+};

front/src/modules/ui/components/table/table-header/__stories__/TableHeader.stories.tsx

@@ -2,9 +2,9 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
 import { IconList } from '@/ui/icons/index';
+import { availableSorts } from '~/pages/companies/companies-sorts';
 import { getRenderWrapperForEntityTableComponent } from '~/testing/renderWrappers';
 
-import { availableSorts } from '../../../../../../pages/companies/companies-sorts';
 import { TableHeader } from '../TableHeader';
 
 const meta: Meta<typeof TableHeader> = {

front/src/testing/decorators.tsx

@@ -0,0 +1,32 @@
+import { ApolloProvider } from '@apollo/client';
+import { Decorator } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
+
+import { RecoilScope } from '../modules/recoil-scope/components/RecoilScope';
+import { CellContext } from '../modules/ui/tables/states/CellContext';
+import { RowContext } from '../modules/ui/tables/states/RowContext';
+
+import { ComponentStorybookLayout } from './ComponentStorybookLayout';
+import { mockedClient } from './mockedClient';
+
+export const RootDecorator: Decorator = (Story) => (
+  <RecoilRoot>
+    <ApolloProvider client={mockedClient}>
+      <Story />
+    </ApolloProvider>
+  </RecoilRoot>
+);
+
+export const ComponentDecorator: Decorator = (Story) => (
+  <ComponentStorybookLayout>
+    <Story />
+  </ComponentStorybookLayout>
+);
+
+export const CellPositionDecorator: Decorator = (Story) => (
+  <RecoilScope SpecificContext={RowContext}>
+    <RecoilScope SpecificContext={CellContext}>
+      <Story />
+    </RecoilScope>
+  </RecoilScope>
+);

front/src/testing/renderWrappers.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { HotkeysProvider } from 'react-hotkeys-hook';
 import { MemoryRouter } from 'react-router-dom';
-import { ApolloProvider } from '@apollo/client';
-import { RecoilRoot } from 'recoil';
 
 import { INITIAL_HOTKEYS_SCOPES } from '@/hotkeys/constants';
 import { RecoilScope } from '@/recoil-scope/components/RecoilScope';
@@ -15,7 +13,6 @@ import { UserProvider } from '~/providers/user/UserProvider';
 
 import { ComponentStorybookLayout } from './ComponentStorybookLayout';
 import { FullHeightStorybookLayout } from './FullHeightStorybookLayout';
-import { mockedClient } from './mockedClient';
 
 export function getRenderWrapperForPage(
   children: React.ReactElement,
@@ -23,34 +20,24 @@ export function getRenderWrapperForPage(
 ) {
   return function render() {
     return (
-      <RecoilRoot>
+      <UserProvider>
-        <ApolloProvider client={mockedClient}>
+        <ClientConfigProvider>
-          <UserProvider>
+          <HotkeysProvider initiallyActiveScopes={INITIAL_HOTKEYS_SCOPES}>
-            <ClientConfigProvider>
+            <MemoryRouter initialEntries={[currentPath]}>
-              <HotkeysProvider initiallyActiveScopes={INITIAL_HOTKEYS_SCOPES}>
+              <FullHeightStorybookLayout>
-                <MemoryRouter initialEntries={[currentPath]}>
+                <DefaultLayout>{children}</DefaultLayout>
-                  <FullHeightStorybookLayout>
+              </FullHeightStorybookLayout>
-                    <DefaultLayout>{children}</DefaultLayout>
+            </MemoryRouter>
-                  </FullHeightStorybookLayout>
+          </HotkeysProvider>
-                </MemoryRouter>
+        </ClientConfigProvider>
-              </HotkeysProvider>
+      </UserProvider>
-            </ClientConfigProvider>
-          </UserProvider>
-        </ApolloProvider>
-      </RecoilRoot>
     );
   };
 }
 
 export function getRenderWrapperForComponent(children: React.ReactElement) {
   return function render() {
-    return (
+    return <ComponentStorybookLayout>{children}</ComponentStorybookLayout>;
-      <RecoilRoot>
-        <ApolloProvider client={mockedClient}>
-          <ComponentStorybookLayout>{children}</ComponentStorybookLayout>
-        </ApolloProvider>
-      </RecoilRoot>
-    );
   };
 }
 
@@ -59,17 +46,16 @@ export function getRenderWrapperForEntityTableComponent(
 ) {
   return function Render() {
     return (
-      <RecoilRoot>
+      <RecoilScope SpecificContext={TableContext}>
-        <ApolloProvider client={mockedClient}>
+        {/*
-          <RecoilScope SpecificContext={TableContext}>
+        TODO: add company mocked loader
-            <HooksEntityTable
+        <CompanyEntityTableData */}
-              availableFilters={companiesFilters}
+        <HooksEntityTable
-              numberOfColumns={5}
+          availableFilters={companiesFilters}
-            />
+          numberOfColumns={5}
-            <ComponentStorybookLayout>{children}</ComponentStorybookLayout>
+        />
-          </RecoilScope>
+        <ComponentStorybookLayout>{children}</ComponentStorybookLayout>
-        </ApolloProvider>
+      </RecoilScope>
-      </RecoilRoot>
     );
   };
 }