Docs/storybook improvements (#877)

* docs: use PageDecorator

* docs: use decorators in TableHeader stories

* docs: use theming parameter in App stories

* docs: enable auto-generated docs for stories

Closes #702

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

@@ -2,37 +2,45 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
 import { IconList } from '@/ui/icon/index';
+import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { companiesFilters } from '~/pages/companies/companies-filters';
 import { availableSorts } from '~/pages/companies/companies-sorts';
-import { getRenderWrapperForEntityTableComponent } from '~/testing/renderWrappers';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
+import { HooksEntityTable } from '../../../components/HooksEntityTable';
+import { TableContext } from '../../../states/TableContext';
 import { TableHeader } from '../TableHeader';
 
 const meta: Meta<typeof TableHeader> = {
   title: 'UI/Table/TableHeader',
   component: TableHeader,
+  decorators: [
+    (Story) => (
+      <RecoilScope SpecificContext={TableContext}>
+        {/* TODO: add company mocked loader <CompanyEntityTableData */}
+        <HooksEntityTable
+          availableFilters={companiesFilters}
+          numberOfColumns={5}
+        />
+        <Story />
+      </RecoilScope>
+    ),
+    ComponentDecorator,
+  ],
+  argTypes: { viewIcon: { control: false } },
+  args: {
+    viewName: 'ViewName',
+    viewIcon: <IconList />,
+    availableSorts,
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof TableHeader>;
 
-export const Empty: Story = {
-  render: getRenderWrapperForEntityTableComponent(
-    <TableHeader
-      viewName="ViewName"
-      viewIcon={<IconList />}
-      availableSorts={availableSorts}
-    />,
-  ),
-};
+export const Empty: Story = {};
 
 export const WithSortsAndFilters: Story = {
-  render: getRenderWrapperForEntityTableComponent(
-    <TableHeader
-      viewName="ViewName"
-      viewIcon={<IconList />}
-      availableSorts={availableSorts}
-    />,
-  ),
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const outsideClick = await canvas.findByText('ViewName');