feat: documentation

.storybook/preview.tsx

@@ -144,6 +144,7 @@ const preview: SBPreview = {
     chromatic: { delay: 2000 },
     viewMode: 'docs',
     docs: {
+      source: { type: 'code' },
       story: {
         inline: true,
       },

src/components/Table/Table.mdx

@@ -1,7 +1,11 @@
 import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
 import Table from './Table';
 import * as TableStories from './Table.stories';
-import { DisplayColumnStory, ColumnsConfigStory } from './utils/TableStoryComponents';
+import {
+  DisplayColumnStory,
+  ColumnsConfigStory,
+  RowsConfigStory,
+} from './utils/TableStoryComponents';
 
 <Meta of={TableStories} />
 
@@ -33,6 +37,12 @@ This type includes all the configuration for the columns
 
 <ArgTypes of={ColumnsConfigStory} />
 
+## RowsConfig Type
+
+This type includes all the configuration for the rows
+
+<ArgTypes of={RowsConfigStory} />
+
 <SubsectionHeader title="Variants" />
 
 ### Column and Row Sizing
@@ -62,3 +72,14 @@ This type includes all the configuration for the columns
 </Tip>
 
 <Canvas of={TableStories.StickyHeader} />
+
+### Row Selection
+
+In order to enable row Selection, do the following steps:
+
+- Use prop `type` = `interactive`.
+- Use the `rowsConfig` object prop and more specificaly `rowSelection` and `setRowSelection` keys. The `rowSelection` is an object where the key is the row index (from 0 to rows.length - 1) and value is a boolean indicating if the row is selected. Check the implementation below for more clientInformation.
+
+You can also pass a `defaultAction` and/or `bulkActions` inside the `rowsConfig`, which are visible once at least 1 row is selected.
+
+<Canvas of={TableStories.RowSelection} />

src/components/Table/Table.stories.tsx

@@ -4,6 +4,8 @@ import { SimpleData, moreData, simpleColumns, simpleData } from './constants';
 import Typography from 'components/Typography';
 import { SortingState } from '@tanstack/react-table';
 import { concat } from 'lodash';
+import Button from 'components/Button';
+import DropdownButton from 'components/DropdownButton';
 
 export default {
   title: 'Updated Components/Table/Table',
@@ -211,3 +213,58 @@ export const StickyHeader = {
     },
   },
 };
+
+export const RowSelection = {
+  render: (args) => {
+    const { rowSize } = args;
+
+    const [rowSelection, setRowSelection] = useState<Record<number, boolean>>({
+      1: true,
+      5: true,
+      7: true,
+    });
+
+    return (
+      <Table<SimpleData>
+        data={concat(simpleData, moreData)}
+        columns={simpleColumns}
+        rowSize={rowSize}
+        type="interactive"
+        rowsConfig={{
+          rowSelection,
+          setRowSelection,
+          defaultAction: <Button size="compact">Default Action</Button>,
+          bulkActions: (
+            <div
+              css={{
+                display: 'flex',
+                alignContent: 'center',
+                justifyContent: 'center',
+                gap: '8px',
+              }}
+            >
+              <Button size="compact">Bulk 1</Button>
+              <Button size="compact">Bulk 2</Button>
+              <DropdownButton
+                size="compact"
+                items={['Bulk 4', 'Bulk 5', 'Bulk 6']}
+                onButtonClick={() => console.log('click')}
+                onOptionSelect={() => console.log('option')}
+              >
+                Bulk 3
+              </DropdownButton>
+            </div>
+          ),
+        }}
+      />
+    );
+  },
+
+  name: 'Row Selection',
+
+  parameters: {
+    controls: {
+      include: ['Row Size'],
+    },
+  },
+};

src/components/Table/utils/TableStoryComponents.tsx

@@ -1,6 +1,6 @@
 import type React from 'react';
 
-import type { ColumnsConfig, DisplayColumn, GroupColumn, TableData } from '../types';
+import type { ColumnsConfig, DisplayColumn, GroupColumn, TableData, RowsConfig } from '../types';
 
 /** This is just a dummy component to be used in Storybook for showing the Row type on props */
 export const ColumnsConfigStory: React.FC<ColumnsConfig> = () => null;
@@ -11,5 +11,8 @@ export const GroupColumnStory: React.FC<GroupColumn> = () => null;
 /** This is just a dummy component to be used in Storybook for showing the Row type on props */
 export const DisplayColumnStory: React.FC<DisplayColumn> = () => null;
 
+/** This is just a dummy component to be used in Storybook for showing the Row type on props */
+export const RowsConfigStory: React.FC<RowsConfig> = () => null;
+
 /** This is just a dummy component to be used in Storybook for showing the Cell type on props */
 export const TableDataStory: React.FC<TableData<any>> = () => null;