docs: create doc files for components and add an image example (#441)

.storybook/main.ts

@@ -11,6 +11,7 @@ const config: StorybookConfig & StorybookVitePlugins = {
     name: '@storybook/react-vite',
     options: {},
   },
+  staticDirs: [{ from: './public/images', to: 'images' }],
 
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(ts|tsx)', '../docs/**/*.stories.@(ts|tsx)', '../docs/**/*.mdx'],
 

docs/Design Templates/Table/Table.mdx

@@ -23,3 +23,7 @@ Table cells that support different formats and  are designed to display various
 | Type    | Resource |
 | -------- | ------- |
 | Eames  | [Figma Templates](https://www.figma.com/design/yCPszaTtkCFxRHaSkkJFR9/Eames-Templates-%5BInternal%5D?node-id=2114-9632&node-type=frame&t=Aa9XxcKyme3ud4cb-0)    |
+
+#### Example basic table image (To be changed)
+
+<img src="images/basic-table.png" />

docs/components/Data Display/Tag/Documentation.mdx

@@ -0,0 +1,15 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as TagStories from '../../../../src/components/data-display/Tag/Tag.stories';
+
+<Meta of={TagStories} />
+
+{/* Documentation goes here */}
+
+# Tag
+
+This is the documentation for the tags component
+
+{/* Documentation goes here */}
+
+<Canvas meta={TagStories.default} />

docs/components/Data Display/Tooltip/Documentation.mdx

@@ -0,0 +1,15 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as TooltipStories from '../../../../src/components/data-display/Tooltip/Tooltip.stories';
+
+<Meta of={TooltipStories} />
+
+{/* Documentation goes here */}
+
+# Tooltip
+
+This is the documentation for the tooltip component
+
+{/* Documentation goes here */}
+
+<Canvas meta={TooltipStories.default} />

docs/components/Data Entry/Checkbox/Documentation.mdx

@@ -0,0 +1,15 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as CheckboxStories from '../../../../src/components/data-entry/Checkbox/Checkbox.stories';
+
+<Meta of={CheckboxStories} />
+
+{/* Documentation goes here */}
+
+# Checkbox
+
+This is the documentation for the checkbox component
+
+{/* Documentation goes here */}
+
+<Canvas meta={CheckboxStories.default} />

docs/components/Data Entry/Date Picker/Documentation.mdx

@@ -0,0 +1,15 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as DatePickerStories from '../../../../src/components/data-entry/DatePicker/DatePicker.stories';
+
+<Meta of={DatePickerStories} />
+
+{/* Documentation goes here */}
+
+# Date Picker
+
+This is the documentation for the date picker component
+
+{/* Documentation goes here */}
+
+<Canvas meta={DatePickerStories.default} />

docs/components/Data Entry/Select/Documentation.mdx

@@ -0,0 +1,15 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as SelectStories from '../../../../src/components/data-entry/Select/Select.stories';
+
+<Meta of={SelectStories} />
+
+{/* Documentation goes here */}
+
+# Select
+
+This is the documentation for the select component
+
+{/* Documentation goes here */}
+
+<Canvas meta={SelectStories.default} />

docs/components/Feedback/Modal/Documentation.mdx

@@ -0,0 +1,15 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as ModalStories from '../../../../src/components/feedback/Modal/Modal.stories';
+
+<Meta of={ModalStories} />
+
+{/* Documentation goes here */}
+
+# Modal
+
+This is the documentation for the modal component
+
+{/* Documentation goes here */}
+
+<Canvas meta={ModalStories.default} />