Adding storybook tests on meta-types/display/components (#1862)

* working on a story for MoneyFieldDisplay

* Write test on MoneyDisplayField

front/src/modules/ui/field/contexts/FieldContext.ts

@@ -3,7 +3,7 @@ import { createContext } from 'react';
 import { FieldDefinition } from '../types/FieldDefinition';
 import { FieldMetadata } from '../types/FieldMetadata';
 
-type GenericFieldContextType = {
+export type GenericFieldContextType = {
   fieldDefinition: FieldDefinition<FieldMetadata>;
   // TODO: add better typing for mutation hook
   useUpdateEntityMutation: () => [(params: any) => void, any];

front/src/modules/ui/field/meta-types/display/components/__stories__/FieldDisplayContextProvider.tsx

@@ -0,0 +1,35 @@
+import {
+  FieldContext,
+  GenericFieldContextType,
+} from '@/ui/field/contexts/FieldContext';
+
+type FieldDisplayContextProviderProps = {
+  children: React.ReactNode;
+  fieldDefinition: GenericFieldContextType['fieldDefinition'];
+  entityId?: string;
+};
+
+export const FieldDisplayContextProvider = ({
+  children,
+  fieldDefinition,
+  entityId,
+}: FieldDisplayContextProviderProps) => {
+  return (
+    <FieldContext.Provider
+      value={{
+        entityId: entityId ?? '1',
+        recoilScopeId: '1',
+        hotkeyScope: 'hotkey-scope',
+        fieldDefinition,
+        useUpdateEntityMutation: () => [
+          () => {
+            return;
+          },
+          {},
+        ],
+      }}
+    >
+      {children}
+    </FieldContext.Provider>
+  );
+};

front/src/modules/ui/field/meta-types/display/components/__stories__/MoneyFieldDisplay.stories.tsx

@@ -0,0 +1,112 @@
+import { useEffect } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { v4 } from 'uuid';
+
+import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { CatalogStory } from '~/testing/types';
+
+import { useMoneyField } from '../../../hooks/useMoneyField';
+import { MoneyFieldDisplay } from '../MoneyFieldDisplay';
+
+import { FieldDisplayContextProvider } from './FieldDisplayContextProvider';
+
+const MoneyFieldValueSetterEffect = ({ value }: { value: number }) => {
+  const { setFieldValue } = useMoneyField();
+
+  useEffect(() => {
+    setFieldValue(value);
+  }, [setFieldValue, value]);
+
+  return <></>;
+};
+
+type MoneyFieldDisplayWithContextProps = {
+  value: number;
+  entityId?: string;
+};
+
+const MoneyFieldDisplayWithContext = ({
+  value,
+  entityId,
+}: MoneyFieldDisplayWithContextProps) => {
+  return (
+    <FieldDisplayContextProvider
+      fieldDefinition={{
+        key: 'money',
+        name: 'Money',
+        type: 'moneyAmount',
+        metadata: {
+          fieldName: 'Amount',
+          placeHolder: 'Amount',
+          isPositive: true,
+        },
+      }}
+      entityId={entityId}
+    >
+      <MoneyFieldValueSetterEffect value={value} />
+      <MoneyFieldDisplay />
+    </FieldDisplayContextProvider>
+  );
+};
+
+const meta: Meta = {
+  title: 'UI/Field/MoneyFieldDisplay',
+  component: MoneyFieldDisplayWithContext,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MoneyFieldDisplayWithContext>;
+
+export const Default: Story = {
+  args: {
+    value: 100,
+  },
+};
+
+export const Elipsis: Story = {
+  args: {
+    value: 1e100,
+  },
+  argTypes: {
+    value: { control: false },
+  },
+  parameters: {
+    container: {
+      width: 100,
+    },
+  },
+  decorators: [ComponentDecorator],
+};
+
+export const Catalog: CatalogStory<Story, typeof MoneyFieldDisplayWithContext> =
+  {
+    argTypes: {
+      value: { control: false },
+    },
+    parameters: {
+      catalog: {
+        dimensions: [
+          {
+            name: 'currency',
+            values: ['$'] satisfies string[],
+            props: (_value: string) => ({}),
+          },
+          {
+            name: 'value',
+            values: [
+              100, 1000, -1000, 1e10, 1.357802, -1.283, 0,
+            ] satisfies number[],
+            props: (value: number) => ({ value, entityId: v4() }),
+          },
+        ],
+        options: {
+          elementContainer: {
+            width: 100,
+          },
+        },
+      },
+    },
+    decorators: [CatalogDecorator],
+  };