Introduce UI Components documentation (#1926)

* new contributor guide folder architecture

* update content pass 1

* Prepare UI component folder to receive componentns

* Add component doc example for button

* Fix broken links

* Fix broken links

* Fix images

front/.storybook/main.js

@@ -2,14 +2,19 @@ const path = require('path');
 
 computeStoriesGlob = () => {
   if (process.env.STORYBOOK_STORIES_FOLDER === 'pages') {
-    return ['../src/pages/**/*.stories.@(js|jsx|ts|tsx)', '../src/__stories__/*.stories.@(js|jsx|ts|tsx)']
+    return [
+      '../src/pages/**/*.stories.@(js|jsx|ts|tsx)',
+      '../src/__stories__/*.stories.@(js|jsx|ts|tsx)',
+      '../src/pages/**/*.docs.mdx',
+      '../src/__stories__/*.docs.mdx'
+    ]
   }
 
   if (process.env.STORYBOOK_STORIES_FOLDER === 'modules') {
-    return ['../src/modules/**/*.stories.@(js|jsx|ts|tsx)']
+    return ['../src/modules/**/*.stories.@(js|jsx|ts|tsx)', '../src/modules/**/*.docs.mdx']
   }
 
-  return ['../src/**/*.stories.@(js|jsx|ts|tsx)']
+  return ['../src/**/*.stories.@(js|jsx|ts|tsx)', '../src/**/*.docs.mdx']
 };
 
 module.exports = {
@@ -77,7 +82,7 @@ module.exports = {
     'storybook-addon-pseudo-states',
     'storybook-addon-cookie',
   ],
-  docs: { autodocs: true },
+  docs: { autodocs: false },
   framework: {
     name: '@storybook/react-webpack5',
     options: {},

front/.storybook/preview-head.html

@@ -2,6 +2,7 @@
 href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
 rel="stylesheet"
 />
+<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.7/iframeResizer.contentWindow.min.js"></script>
 <style type="text/css">
 body {
   margin: 0;
@@ -12,4 +13,7 @@ body {
 html {
   font-size: 13px;
 }
+.sbdocs-wrapper {
+  padding: 0 !important;
+}
 </style>

front/src/modules/ui/button/components/__stories__/Button.docs.mdx

@@ -0,0 +1,28 @@
+{/* Button.mdx */}
+
+import { Meta, Controls, Story } from '@storybook/blocks';
+import * as ButtonStories from './Button.stories';
+
+<Meta of={ButtonStories} />
+
+Button is a clickable interactive element that triggers a response.
+
+You can place text and icons inside of a button.
+
+Buttons are often used for form submissions and to toggle elements into view.
+
+<Story of={ButtonStories.Default} />
+<br />
+
+## Properties
+
+<Controls />
+
+## Usage
+
+```js
+
+import { Button } from '@/ui/button/components/Button';
+
+<Button title='Click me' />
+```

front/src/modules/ui/button/components/__stories__/Button.stories.tsx

@@ -22,6 +22,9 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 
 export const Default: Story = {
+  argTypes: {
+    Icon: { control: false },
+  },
   args: {
     title: 'Button',
     size: 'small',