refactor(stories): create mdx files for table components

Author: MartinWeb

.storybook/main.js

@@ -44,7 +44,6 @@ module.exports = {
     '../packages/popover/src/*.stories.@(ts|tsx|js)',
     '../packages/restitution/src/*.stories.@(ts|tsx|js)',
     '../packages/status/src/*.stories.@(ts|tsx|js)',
-    '../packages/table/src/**/*.stories.@(ts|tsx|js)',
   ],
   addons: [
     '@storybook/addon-essentials',

packages/table/src/Items/Items.stories.mdx

@@ -0,0 +1,57 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import Items from './Items';
+
+<Meta
+  title="Components/Table/Paging/Items"
+  component={Items}
+  argTypes={{
+    onChange: { action: 'changed' },
+    items: {
+      control: {
+        type: 'array',
+        options: [5, 10, 25, 50, 100],
+      },
+    },
+    numberItems: {
+      control: {
+        type: 'select',
+        options: [5, 10, 25, 50, 100],
+      },
+    },
+  }}
+/>
+
+# Table paging items
+
+export const Template = (args) => <Items {...args} />;
+
+The Items component allows you to change how many items a table component will show.  
+The `numberItems` property carry that number, as the `items` property allows you to change the list of elements to display in the table.
+
+You will have to install the `select` component in order to have the correct style for this component.
+
+```shell
+npm i @axa-fr/react-toolkit-form-input-select
+npm i @axa-fr/react-toolkit-form-core
+```
+
+The associed stylesheet are the ones from the `select` component of the toolkit.
+
+```javascript
+import '@axa-fr/react-toolkit-form-input-select/dist/af-select.css';
+import '@axa-fr/react-toolkit-form-core/dist/af-form.css';
+```
+
+<Canvas>
+  <Story
+    name="Items"
+    args={{
+      items: [5, 10, 25, 50, 100],
+      numberItems: 5,
+    }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Items" />

packages/table/src/Items/Items.stories.tsx

@@ -0,0 +1,47 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import Pager from './Pager';
+import Modes from './Modes';
+
+<Meta
+  title="Components/Table/Paging/Pager"
+  component={Pager}
+  argTypes={{
+    onChange: { action: 'changed' },
+    mode: {
+      control: {
+        type: 'select',
+        options: [Modes.default, Modes.light],
+      },
+    },
+  }}
+/>
+
+# Table pager
+
+export const Template = (args) => <Pager {...args} />;
+
+The Pager component allows you to change the page of the table currently seen.  
+The `mode` property allows you to change between the `default` and `light` mode.
+
+The `previousLabel` and `nextLabel` are only visible with the `default` mode of the page. On the contrary, the `ofLabel` is only visible with the `light` mode of the pager.
+
+Don't forget to import the component css file, so that your pager have the correct style.
+
+```javascript
+import '@axa-fr/react-toolkit-table/dist/Pager/af-pager.css';
+```
+
+<Canvas>
+  <Story
+    name="Pager"
+    args={{
+      mode: Modes.default,
+      currentPage: 5,
+      numberPages: 23,
+    }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Pager" />

packages/table/src/Pager/Pager.stories.mdx

@@ -0,0 +1,53 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import Paging from './Paging';
+import Modes from '../Pager/Modes';
+
+<Meta
+  title="Components/Table/Paging/Paging"
+  component={Paging}
+  argTypes={{
+    onChange: { action: 'changed' },
+    mode: {
+      control: {
+        type: 'select',
+        options: [Modes.default, Modes.light],
+      },
+    },
+    numberItems: {
+      control: {
+        type: 'select',
+        options: [5, 10, 25, 50, 100],
+      },
+    },
+  }}
+/>
+
+# Table full paging
+
+export const Template = (args) => <Paging {...args} />;
+
+The Paging component uses the Items and Pager components to create a full paging experience for the user.  
+Most of the properties are linked to the Items or Pager components, if you want more details on them, go to the specific documentation of the [Item component](?path=/docs/components-table-paging-items--items) or [Pager component](?path=/docs/components-table-paging-pager--pager).
+
+
+Don't forget to import the component css files, so that your full paging have the correct style.
+
+```javascript
+import '@axa-fr/react-toolkit-table/dist/Paging/af-paging.css';
+import '@axa-fr/react-toolkit-table/dist/Pager/af-pager.css';
+import '@axa-fr/react-toolkit-form-input-select/dist/af-select.css';
+import '@axa-fr/react-toolkit-form-core/dist/af-form.css';
+```
+
+<Canvas>
+  <Story
+    name="Paging"
+    args={{
+      mode: Modes.default,
+      currentPage: 5,
+      numberPages: 23,
+    }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>