feat: docs

Orfium · Apr 11, 2024 · 353fe35 · 353fe35
1 parent 6c54002
commit 353fe35
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 7 deletions.
diff --git a/src/components/Table/Table.mdx b/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 } from './utils/TableStoryComponents';
+import {
+  GroupColumnStory,
+  DisplayColumnStory,
+  ColumnsConfigType,
+} from './utils/TableStoryComponents';
 
 <Meta of={TableStories} />
 
@@ -23,12 +27,30 @@ A universal Table component that applies Orfium basic usages.
 
 <ArgTypes of={Table} />
 
+## GroupColumn Type
+
+<ArgTypes of={GroupColumnStory} />
+
 ## DisplayColumn Type
 
 <ArgTypes of={DisplayColumnStory} />
 
+## ColumnsConfig Type
+
+This type includes all the configuration for the columns
+
+<ArgTypes of={ColumnsConfigType} />
+
 <SubsectionHeader title="Variants" />
 
 ### Table Sizes
 
 <Canvas of={TableStories.TableSizes} />
+
+### Column Groups
+
+<Canvas of={TableStories.ColumnGroups} />
+
+### Column Chooser
+
+<Canvas of={TableStories.ColumnChooser} />
diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
@@ -1,5 +1,6 @@
+import { useState } from 'react';
 import Table from './Table';
-import { SimpleData, simpleColumns, simpleData } from './constants';
+import { SimpleData, groupedColumns, simpleColumns, simpleData } from './constants';
 
 export default {
   title: 'Updated Components/Table/Table',
@@ -8,6 +9,10 @@ export default {
   args: {
     rowSize: 'sm',
   },
+
+  argTypes: {
+    isAlwaysVisible: { control: 'multi-select', options: simpleColumns.map((col) => col.id) },
+  },
 };
 
 export const TableSizes = {
@@ -25,3 +30,70 @@ export const TableSizes = {
     },
   },
 };
+
+export const ColumnGroups = {
+  render: (args) => {
+    const { rowSize } = args;
+
+    return <Table<SimpleData> data={simpleData} columns={groupedColumns} rowSize={rowSize} />;
+  },
+
+  name: 'Column Groups',
+
+  parameters: {
+    controls: {
+      disable: true,
+    },
+  },
+};
+
+export const ColumnChooser = {
+  render: (args) => {
+    const { rowSize, isAlwaysVisible = [] } = args;
+
+    const columns = [
+      {
+        id: 'personalDetails',
+        header: 'Personal Details',
+        columns: [
+          {
+            id: 'firstName',
+            header: 'First Name',
+            isAlwaysVisible: isAlwaysVisible.includes('firstName'),
+          },
+          {
+            id: 'lastName',
+            header: 'Last Name',
+            isAlwaysVisible: isAlwaysVisible.includes('lastName'),
+          },
+        ],
+      },
+      { id: 'age', header: 'Age', isAlwaysVisible: isAlwaysVisible.includes('age') },
+      { id: 'job', header: 'Job', isAlwaysVisible: isAlwaysVisible.includes('job') },
+    ];
+
+    const [columnVisibility, setColumnVisibility] = useState<Record<string, boolean>>({
+      firstName: true,
+      lastName: true,
+      age: true,
+      job: true,
+    });
+
+    return (
+      <Table<SimpleData>
+        data={simpleData}
+        columns={columns}
+        rowSize={rowSize}
+        columnsConfig={{ columnVisibility, setColumnVisibility }}
+      />
+    );
+  },
+
+  name: 'Column Chooser',
+
+  parameters: {
+    controls: {
+      include: ['rowSize', 'isAlwaysVisible'],
+    },
+  },
+};
diff --git a/src/components/Table/constants.tsx b/src/components/Table/constants.tsx
@@ -12,11 +12,52 @@ export const simpleColumns = [
   { id: 'job', header: 'Job' },
 ];
 
+export const groupedColumns = [
+  {
+    id: 'personalDetails',
+    header: 'Personal Details',
+    columns: [
+      { id: 'firstName', header: 'First Name' },
+      { id: 'lastName', header: 'Last Name' },
+    ],
+  },
+  { id: 'age', header: 'Age' },
+  { id: 'job', header: 'Job' },
+];
+
 export const simpleData = [
-  { cells: { firstName: 'Rachel', lastName: 'Berry', age: '30', job: 'Fashion Executive' } },
-  { cells: { firstName: 'Ross', lastName: 'Geller', age: '32', job: 'Paleontologist' } },
+  {
+    cells: {
+      firstName: 'Rachel',
+      lastName: 'Berry',
+      age: '30',
+      job: 'Fashion Executive',
+    },
+  },
+  {
+    cells: {
+      firstName: 'Ross',
+      lastName: 'Geller',
+      age: '32',
+      job: 'Paleontologist',
+    },
+  },
   { cells: { firstName: 'Monica', lastName: 'Geller', age: '31', job: 'Chef' } },
   { cells: { firstName: 'Chandler', lastName: 'Bing', age: '32', job: '?' } },
-  { cells: { firstName: 'Joey', lastName: 'Tribbiani', age: '30', job: 'Actor' } },
-  { cells: { firstName: 'Phoebe', lastName: 'Buffay', age: '31', job: 'Massage Therapist' } },
+  {
+    cells: {
+      firstName: 'Joey',
+      lastName: 'Tribbiani',
+      age: '30',
+      job: 'Actor',
+    },
+  },
+  {
+    cells: {
+      firstName: 'Phoebe',
+      lastName: 'Buffay',
+      age: '31',
+      job: 'Massage Therapist',
+    },
+  },
 ];
diff --git a/src/components/Table/utils/TableStoryComponents.tsx b/src/components/Table/utils/TableStoryComponents.tsx
@@ -1,6 +1,12 @@
 import type React from 'react';
 
-import type { DisplayColumn, TableData } from '../types';
+import type { ColumnsConfig, DisplayColumn, GroupColumn, TableData } from '../types';
+
+/** This is just a dummy component to be used in Storybook for showing the Row type on props */
+export const ColumnsConfigType: React.FC<ColumnsConfig> = () => null;
+
+/** This is just a dummy component to be used in Storybook for showing the Row type on props */
+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;