From 2a82f1363a6245a6106ab07ff1d8b762cc138d57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Go=CC=88khan=20O=CC=88ztu=CC=88rk?=
 <gokhaanozturk@gmail.com>
Date: Wed, 28 Sep 2022 15:03:51 +0300
Subject: [PATCH] feat: docs improvements

---
 src/components/Badge/Badge.stories.mdx        | 69 +++++++++++++---
 src/components/Button/Button.stories.mdx      | 46 ++++++-----
 src/components/Checkbox/Checkbox.stories.mdx  | 27 ++++++-
 src/components/Chips/Chip.stories.mdx         | 51 +++++++++++-
 src/components/Dropdown/Dropdown.stories.mdx  | 18 ++++-
 src/components/Icon/Icon.stories.mdx          | 22 ++++-
 src/components/Switch/Switch.stories.mdx      | 81 +++++++------------
 src/components/TabItem/TabItem.stories.mdx    | 30 +++++--
 src/components/Tabs/Tabs.stories.mdx          | 30 +++++--
 .../Textfield/Textfield.stories.mdx           | 33 +++++---
 src/components/Tooltip/Tooltip.stories.mdx    | 38 ++++++++-
 11 files changed, 323 insertions(+), 122 deletions(-)

diff --git a/src/components/Badge/Badge.stories.mdx b/src/components/Badge/Badge.stories.mdx
index 2a7b39f..59b1a13 100644
--- a/src/components/Badge/Badge.stories.mdx
+++ b/src/components/Badge/Badge.stories.mdx
@@ -115,45 +115,88 @@ export const ButtonTemplate = (args) => ({
 
 # Badges
 
+## Overview
+
 <Canvas>
   <Story
-    name="Right"
+    name="Overview"
     argTypes={{ ...Default.argTypes }}
     args={{ placement: 'right' }}
   >
     {Default.bind({})}
   </Story>
+</Canvas>
+
+### Playground
+
+<ArgsTable story="Overview" />
+
+## Stories
+
+### Right
+
+<Canvas>
   <Story
-    name="Left"
+    name="Right"
     argTypes={{ ...Default.argTypes }}
-    args={{ placement: 'left' }}
+    args={{ placement: 'right' }}
   >
     {Default.bind({})}
   </Story>
+</Canvas>
+
+### With Content
+
+<Canvas>
   <Story
-    name="Bottom"
+    name="With Content"
+    argTypes={{ ...ButtonTemplate.argTypes }}
+    args={{ content: '1' }}
+  >
+    {ButtonTemplate.bind({})}
+  </Story>
+</Canvas>
+
+### With Icon
+
+<Canvas>
+  <Story
+    name="With Icon"
     argTypes={{ ...Default.argTypes }}
-    args={{ placement: 'bottom' }}
+    args={{ icon: 'cancel' }}
   >
     {Default.bind({})}
   </Story>
+</Canvas>
+
+### Hover
+
+<Canvas>
   <Story name="Hover" argTypes={{ ...Default.argTypes }} args={{ hover: true }}>
     {Default.bind({})}
   </Story>
+</Canvas>
+
+### Bottom
+
+<Canvas>
   <Story
-    name="With Icon"
+    name="Bottom"
     argTypes={{ ...Default.argTypes }}
-    args={{ icon: 'cancel' }}
+    args={{ placement: 'bottom' }}
   >
     {Default.bind({})}
   </Story>
+</Canvas>
+
+### Left
+
+<Canvas>
   <Story
-    name="With Content"
-    argTypes={{ ...ButtonTemplate.argTypes }}
-    args={{ content: '1' }}
+    name="Left"
+    argTypes={{ ...Default.argTypes }}
+    args={{ placement: 'left' }}
   >
-    {ButtonTemplate.bind({})}
+    {Default.bind({})}
   </Story>
 </Canvas>
-
-<ArgsTable story="Right" />
diff --git a/src/components/Button/Button.stories.mdx b/src/components/Button/Button.stories.mdx
index 9c0c5da..29a5485 100644
--- a/src/components/Button/Button.stories.mdx
+++ b/src/components/Button/Button.stories.mdx
@@ -100,7 +100,29 @@ export const Default = ({ slot1, slot2, ...rest }) => {
   };
 };
 
-# Primary
+# Button
+
+<Canvas>
+  <Story
+    name="Overview"
+    argTypes={{ ...Default.argTypes }}
+    args={{
+      variant: 'primary',
+      icon: 'add_circle',
+      slot1: '<span>Primary</span>',
+    }}
+  >
+    {Default.bind({})}
+  </Story>
+</Canvas>
+
+### Playground
+
+<ArgsTable story="Overview" />
+
+## Stories
+
+### Primary
 
 <Canvas>
   <Story
@@ -116,7 +138,7 @@ export const Default = ({ slot1, slot2, ...rest }) => {
   </Story>
 </Canvas>
 
-# Secondary
+### Secondary
 
 <Canvas>
   <Story
@@ -131,7 +153,7 @@ export const Default = ({ slot1, slot2, ...rest }) => {
   </Story>
 </Canvas>
 
-# Icon
+### Icon
 
 <Canvas>
   <Story
@@ -146,7 +168,7 @@ export const Default = ({ slot1, slot2, ...rest }) => {
   </Story>
 </Canvas>
 
-# Text
+### Text
 
 <Canvas>
   <Story
@@ -161,7 +183,7 @@ export const Default = ({ slot1, slot2, ...rest }) => {
   </Story>
 </Canvas>
 
-# Outline
+### Outline
 
 <Canvas>
   <Story
@@ -175,17 +197,3 @@ export const Default = ({ slot1, slot2, ...rest }) => {
     {Default.bind({})}
   </Story>
 </Canvas>
-
-# Reference
-
-<ArgsTable />
-
-# Usage
-
-```html
-Default template
-```
-
-```js
-Default template
-```
diff --git a/src/components/Checkbox/Checkbox.stories.mdx b/src/components/Checkbox/Checkbox.stories.mdx
index c3ee1ac..23bfea8 100644
--- a/src/components/Checkbox/Checkbox.stories.mdx
+++ b/src/components/Checkbox/Checkbox.stories.mdx
@@ -69,11 +69,11 @@ export const Default = (args) => {
   };
 };
 
-# Default
+# Checkbox
 
 <Canvas>
   <Story
-    name="Default"
+    name="Overview"
     argTypes={{ ...Default.argTypes }}
     args={{
       id: 'checkbox-1',
@@ -86,6 +86,25 @@ export const Default = (args) => {
   </Story>
 </Canvas>
 
-# Reference
+### Playground
+
+<ArgsTable story="Overview" />
+
+## Stories
 
-<ArgsTable />
+### Default
+
+<Canvas>
+  <Story
+    name="Default"
+    argTypes={{ ...Default.argTypes }}
+    args={{
+      id: 'checkbox-1',
+      label: 'Deneme',
+      right: false,
+      indeterminate: true,
+    }}
+  >
+    {Default.bind({})}
+  </Story>
+</Canvas>
diff --git a/src/components/Chips/Chip.stories.mdx b/src/components/Chips/Chip.stories.mdx
index d534b7a..89733d7 100644
--- a/src/components/Chips/Chip.stories.mdx
+++ b/src/components/Chips/Chip.stories.mdx
@@ -78,10 +78,29 @@ export const Default = (args) => ({
 
 # Chips
 
+<Canvas>
+  <Story name="Overview" argTypes={{ ...Default.argTypes }} args={{}}>
+    {Default.bind({})}
+  </Story>
+</Canvas>
+
+### Playground
+
+<ArgsTable story="Overview" />
+
+## Stories
+
+### Primary
+
 <Canvas>
   <Story name="Primary" argTypes={{ ...Default.argTypes }} args={{}}>
     {Default.bind({})}
   </Story>
+</Canvas>
+
+### Secondary
+
+<Canvas>
   <Story
     name="Secondary"
     argTypes={{ ...Default.argTypes }}
@@ -89,6 +108,11 @@ export const Default = (args) => ({
   >
     {Default.bind({})}
   </Story>
+</Canvas>
+
+### Success
+
+<Canvas>
   <Story
     name="Success"
     argTypes={{ ...Default.argTypes }}
@@ -96,6 +120,11 @@ export const Default = (args) => ({
   >
     {Default.bind({})}
   </Story>
+</Canvas>
+
+### Danger
+
+<Canvas>
   <Story
     name="Danger"
     argTypes={{ ...Default.argTypes }}
@@ -103,6 +132,11 @@ export const Default = (args) => ({
   >
     {Default.bind({})}
   </Story>
+</Canvas>
+
+### Warning
+
+<Canvas>
   <Story
     name="Warning"
     argTypes={{ ...Default.argTypes }}
@@ -110,6 +144,11 @@ export const Default = (args) => ({
   >
     {Default.bind({})}
   </Story>
+</Canvas>
+
+### Info
+
+<Canvas>
   <Story
     name="Info"
     argTypes={{ ...Default.argTypes }}
@@ -117,6 +156,11 @@ export const Default = (args) => ({
   >
     {Default.bind({})}
   </Story>
+</Canvas>
+
+### Light
+
+<Canvas>
   <Story
     name="Light"
     argTypes={{ ...Default.argTypes }}
@@ -124,6 +168,11 @@ export const Default = (args) => ({
   >
     {Default.bind({})}
   </Story>
+</Canvas>
+
+### Dark
+
+<Canvas>
   <Story
     name="Dark"
     argTypes={{ ...Default.argTypes }}
@@ -132,5 +181,3 @@ export const Default = (args) => ({
     {Default.bind({})}
   </Story>
 </Canvas>
-
-<ArgsTable story="Primary" />
diff --git a/src/components/Dropdown/Dropdown.stories.mdx b/src/components/Dropdown/Dropdown.stories.mdx
index 19653a6..9214c31 100644
--- a/src/components/Dropdown/Dropdown.stories.mdx
+++ b/src/components/Dropdown/Dropdown.stories.mdx
@@ -241,11 +241,25 @@ export const WithIcon = (args) => {
   };
 };
 
+# Dropdown
+
+<Canvas>
+  <Story name="Overview" argTypes={{ ...Default.argTypes }} args={{}} />
+</Canvas>
+
+### Playground
+
+<ArgsTable story="Overview" />
+
+## Stories
+
+### Default
+
 <Canvas>
   <Story name="Default" argTypes={{ ...Default.argTypes }} args={{}} />
 </Canvas>
 
-<ArgsTable story="Default" />
+### With Icon
 
 <Canvas>
   <Story
@@ -254,5 +268,3 @@ export const WithIcon = (args) => {
     args={{ content: '', autoSize: false }}
   />
 </Canvas>
-
-<ArgsTable story="With Icon" />
diff --git a/src/components/Icon/Icon.stories.mdx b/src/components/Icon/Icon.stories.mdx
index 2666994..4a98f18 100644
--- a/src/components/Icon/Icon.stories.mdx
+++ b/src/components/Icon/Icon.stories.mdx
@@ -53,7 +53,7 @@ export const Default = (args) => {
 
 <Canvas>
   <Story
-    name="Default"
+    name="Overview"
     argTypes={{ ...Default.argTypes }}
     args={{
       name: 'face',
@@ -63,8 +63,26 @@ export const Default = (args) => {
   </Story>
 </Canvas>
 
+### Playground
+
+<ArgsTable story="Overview" />
+
 # Reference
 
 ##### You can use any icon from Material Design Icons: [Material Icons](https://fonts.google.com/icons?icon.set=Material+Icons)
 
-<ArgsTable story="Default" />
+## Stories
+
+### Default
+
+<Canvas>
+  <Story
+    name="Default"
+    argTypes={{ ...Default.argTypes }}
+    args={{
+      name: 'face',
+    }}
+  >
+    {Default.bind({})}
+  </Story>
+</Canvas>
diff --git a/src/components/Switch/Switch.stories.mdx b/src/components/Switch/Switch.stories.mdx
index 842faa2..2417432 100644
--- a/src/components/Switch/Switch.stories.mdx
+++ b/src/components/Switch/Switch.stories.mdx
@@ -54,9 +54,28 @@ export const Default = (args) => {
   };
 };
 
-# All the sizes
+# Switch
 
-<hr />
+<Canvas>
+  <Story
+    name="Overview"
+    argTypes={{ ...Default.argTypes }}
+    args={{
+      value: false,
+      size: 'small',
+    }}
+  >
+    {Default.bind({})}
+  </Story>
+</Canvas>
+
+### Playground
+
+<ArgsTable story="Overview" />
+
+## Stories
+
+### Small
 
 <Canvas>
   <Story
@@ -69,6 +88,11 @@ export const Default = (args) => {
   >
     {Default.bind({})}
   </Story>
+</Canvas>
+
+### Medium
+
+<Canvas>
   <Story
     name="Medium"
     argTypes={{ ...Default.argTypes }}
@@ -79,6 +103,11 @@ export const Default = (args) => {
   >
     {Default.bind({})}
   </Story>
+</Canvas>
+
+### Large
+
+<Canvas>
   <Story
     name="Large"
     argTypes={{ ...Default.argTypes }}
@@ -90,51 +119,3 @@ export const Default = (args) => {
     {Default.bind({})}
   </Story>
 </Canvas>
-
-# Reference
-
-<hr />
-
-<ArgsTable props={Default.argTypes} />
-
-# Notes
-
-<hr />
-<p>
-  This component is a wrapper around the <code>input</code> element.
-</p>
-<p>
-  The <code>value</code> prop is passed to the <code>input</code> element.
-</p>
-<p>
-  The <code>disabled</code> prop is passed to the <code>input</code> element.
-</p>
-<p>
-  The <code>size</code> prop is passed to the <code>input</code> element.
-</p>
-
-# Installation
-
-<hr />
-
-<p>Install the component with:</p>
-
-```js
-import { Switch } from '@/components/Switch';
-```
-
-# Examples
-
-<hr />
-
-<h6>Basic using</h6>
-
-```html
-<Switch :value="false" />
-```
-
-<h6>Advance using</h6>
-
-```html
-<Switch :value="false" size="large" :disabled="false" />
-```
diff --git a/src/components/TabItem/TabItem.stories.mdx b/src/components/TabItem/TabItem.stories.mdx
index ca899b2..d5eb818 100644
--- a/src/components/TabItem/TabItem.stories.mdx
+++ b/src/components/TabItem/TabItem.stories.mdx
@@ -105,7 +105,25 @@ export const Default = (args) => ({
   `,
 });
 
-# Default
+# TabItem
+
+<Canvas>
+  <Story
+    name="Overview"
+    argTypes={{ ...Default.argTypes }}
+    args={{ variant: 'default' }}
+  >
+    {Default.bind({})}
+  </Story>
+</Canvas>
+
+### Playground
+
+<ArgsTable story="Overview" />
+
+## Stories
+
+### Default
 
 <Canvas>
   <Story
@@ -117,7 +135,7 @@ export const Default = (args) => ({
   </Story>
 </Canvas>
 
-# Icon Only
+### Icon Only
 
 <Canvas>
   <Story
@@ -137,7 +155,7 @@ export const Default = (args) => ({
   </Story>
 </Canvas>
 
-# Pill
+### Pill
 
 <Canvas>
   <Story
@@ -157,7 +175,7 @@ export const Default = (args) => ({
   </Story>
 </Canvas>
 
-# Icon Pill
+### Icon Pill
 
 <Canvas>
   <Story
@@ -177,7 +195,7 @@ export const Default = (args) => ({
   </Story>
 </Canvas>
 
-# Text Only
+### Text Only
 
 <Canvas>
   <Story
@@ -196,5 +214,3 @@ export const Default = (args) => ({
     {Default.bind({})}
   </Story>
 </Canvas>
-
-<ArgsTable story="Default" />
diff --git a/src/components/Tabs/Tabs.stories.mdx b/src/components/Tabs/Tabs.stories.mdx
index 2db8d37..c8fcb3d 100644
--- a/src/components/Tabs/Tabs.stories.mdx
+++ b/src/components/Tabs/Tabs.stories.mdx
@@ -96,7 +96,25 @@ export const Default = (args) => ({
   `,
 });
 
-# Default
+# Tabs
+
+<Canvas>
+  <Story
+    name="Overview"
+    argTypes={{ ...Default.argTypes }}
+    args={{ variant: 'default' }}
+  >
+    {Default.bind({})}
+  </Story>
+</Canvas>
+
+### Playground
+
+<ArgsTable story="Overview" />
+
+## Stories
+
+### Default
 
 <Canvas>
   <Story
@@ -108,7 +126,7 @@ export const Default = (args) => ({
   </Story>
 </Canvas>
 
-# Icon Only
+### Icon Only
 
 <Canvas>
   <Story
@@ -134,7 +152,7 @@ export const Default = (args) => ({
   </Story>
 </Canvas>
 
-# Pill
+### Pill
 
 <Canvas>
   <Story
@@ -160,7 +178,7 @@ export const Default = (args) => ({
   </Story>
 </Canvas>
 
-# Icon Pill
+### Icon Pill
 
 <Canvas>
   <Story
@@ -186,7 +204,7 @@ export const Default = (args) => ({
   </Story>
 </Canvas>
 
-# Text Only
+### Text Only
 
 <Canvas>
   <Story
@@ -211,5 +229,3 @@ export const Default = (args) => ({
     {Default.bind({})}
   </Story>
 </Canvas>
-
-<ArgsTable story="Default" />
diff --git a/src/components/Textfield/Textfield.stories.mdx b/src/components/Textfield/Textfield.stories.mdx
index ef83968..22fc83a 100644
--- a/src/components/Textfield/Textfield.stories.mdx
+++ b/src/components/Textfield/Textfield.stories.mdx
@@ -132,11 +132,11 @@ export const Default = (args) => {
   };
 };
 
-# Default
+# Textfield
 
 <Canvas>
   <Story
-    name="Default"
+    name="Overview"
     argTypes={{ ...Default.argTypes }}
     args={{
       id: 'textfield-id',
@@ -151,16 +151,27 @@ export const Default = (args) => {
   </Story>
 </Canvas>
 
-# Reference
+### Playground
 
-<ArgsTable story="Default" />
+<ArgsTable story="Overview" />
 
-# Usage
+## Stories
 
-```html
-Default template
-```
+### Default
 
-```js
-Default template
-```
+<Canvas>
+  <Story
+    name="Default"
+    argTypes={{ ...Default.argTypes }}
+    args={{
+      id: 'textfield-id',
+      label: 'Textfield label',
+      placeholder: 'Textfield placeholder',
+      iconLeft: false,
+      value: '',
+      errorMsg: '',
+    }}
+  >
+    {Default.bind({})}
+  </Story>
+</Canvas>
diff --git a/src/components/Tooltip/Tooltip.stories.mdx b/src/components/Tooltip/Tooltip.stories.mdx
index f79328d..561a514 100644
--- a/src/components/Tooltip/Tooltip.stories.mdx
+++ b/src/components/Tooltip/Tooltip.stories.mdx
@@ -167,6 +167,30 @@ export const Default = ({ slot, ...args }) => {
   };
 };
 
+# Tooltip
+
+<Canvas>
+  <Story
+    name="Overview"
+    argTypes={{ ...Default.argTypes }}
+    args={{
+      slot: '<Icon name="info" size="24" />',
+      content: 'Icon tooltip content prop mdx',
+      placement: 'bottom',
+    }}
+  >
+    {Default.bind({})}
+  </Story>
+</Canvas>
+
+### Playground
+
+<ArgsTable story="Overview" />
+
+## Stories
+
+### Icon
+
 <Canvas>
   <Story
     name="Icon"
@@ -179,6 +203,11 @@ export const Default = ({ slot, ...args }) => {
   >
     {Default.bind({})}
   </Story>
+</Canvas>
+
+### Text
+
+<Canvas>
   <Story
     name="Text"
     argTypes={{ ...Default.argTypes }}
@@ -190,6 +219,11 @@ export const Default = ({ slot, ...args }) => {
   >
     {Default.bind({})}
   </Story>
+</Canvas>
+
+### Button
+
+<Canvas>
   <Story
     name="Button"
     argTypes={{ ...Default.argTypes }}
@@ -202,7 +236,3 @@ export const Default = ({ slot, ...args }) => {
     {Default.bind({})}
   </Story>
 </Canvas>
-
-# Reference
-
-<ArgsTable />