improve docs

linspw · Mar 21, 2024 · d6f48d4 · d6f48d4
1 parent ed9ad94
commit d6f48d4
Show file tree

Hide file tree

Showing 28 changed files with 2,157 additions and 802 deletions.
diff --git a/configs/storybook/preview.js b/configs/storybook/preview.js
@@ -1,11 +1,11 @@
 import { app } from '@storybook/vue3';
-import { CoreUIPlugin } from '@plugins/core-ui-plugin';
+import { ExperimentUIPlugin } from '@plugins/core-ui-plugin';
 import { MaskPlugin } from '@plugins/mask-plugin';
 import { transformSource, tokenFiles } from './helper';
 import '@styles/index.scss';
 
 app.use(MaskPlugin);
-app.use(CoreUIPlugin);
+app.use(ExperimentUIPlugin);
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },

diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
@@ -1,5 +1,6 @@
-import { defineConfig } from 'vitepress'
+import { defineConfig } from "vitepress";
 import { alias } from "../../configs/project/alias-config";
+import { postcssIsolateStyles } from "vitepress";
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -8,38 +9,61 @@ export default defineConfig({
   base: "/experiment-ui/",
   head: [
     [
-      'script',
+      "script",
       {
-        src: 'https://kit.fontawesome.com/1e91b4a459.js'
-      }
+        src: "https://kit.fontawesome.com/1e91b4a459.js",
+      },
     ],
   ],
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     nav: [
-      { text: 'Home', link: '/' },
-      { text: 'Components', link: '/components/index.md' }
+      { text: "Home", link: "/" },
+      { text: "Components", link: "/components/index.md" },
     ],
 
     sidebar: [
       {
-        text: 'Components',
-        link: '/components/index.md',
+        text: "Get Started",
+        link: "/get-started",
+      },
+      {
+        text: "Components",
+        link: "/components/index.md",
         items: [
-          { text: 'Atoms', items: [{ text: 'Button', link: '/components/atoms/button.md' }] },
-          { text: 'Molecules' },
-          { text: 'Organism' },
-        ]
+          {
+            text: "Atoms",
+            items: [
+              { text: "Button", link: "/components/atoms/button.md" },
+              { text: "Card", link: "/components/atoms/card.md" },
+              { text: "Grid", link: "/components/atoms/grid.md" },
+              { text: "Icon", link: "/components/atoms/icon.md" },
+              { text: "Input", link: "/components/atoms/input.md" },
+              { text: "Text", link: "/components/atoms/text.md" },
+            ],
+          },
+          { text: "Molecules" },
+          { text: "Organism" },
+        ],
       },
     ],
 
     socialLinks: [
-      { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
-    ]
+      { icon: "github", link: "https://github.com/vuejs/vitepress" },
+    ],
   },
   vite: {
     resolve: {
       alias,
     },
-  }
-})
+    css: {
+      postcss: {
+        plugins: [
+          postcssIsolateStyles({
+            includeFiles: [/vp-doc\.css/],
+          }),
+        ]
+      },
+    },
+  },
+});
diff --git a/docs/components/atoms/button.md b/docs/components/atoms/button.md
@@ -2,13 +2,13 @@
 import { HButton } from '@components/atoms'
 </script>
 
-## Button
+# Button
 
 ### Default use:
 
 <br>
 
-<HButton>Ola</HButton>
+<h-button>Ola</h-button>
 
 Example:
 ```vue

diff --git a/docs/components/atoms/card.md b/docs/components/atoms/card.md
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { HCard } from '@components/atoms';
+</script>
+
+# Card
+
+### Default use:
+
+<br>
+
+<h-card>Hello Card</h-card>
+
+```vue
+<h-card>Hello Card</h-card>
+```
+
+
+### Variants:
+
+<br>
+
+<h-card variant="default">default</h-card>
+<br>
+<h-card variant="outlined">outlined</h-card>
+
+```vue
+<h-card variant="default">default</h-card>
+
+<h-card variant="outlined">outlined</h-card>
+```
+
+### Colors:
+
+<br>
+
+<h-card color="default">default</h-card>
+<br>
+<h-card color="success">success</h-card>
+<br>
+<h-card color="info">info</h-card>
+<br>
+<h-card color="danger">danger</h-card>
+<br>
+<h-card color="warn">warn</h-card>
+<br>
+<h-card color="primary">primary</h-card>
+<br>
+<h-card color="secondary">secondary</h-card>
+
+<br>
+
+```vue
+<h-card color="default">default</h-card>
+
+<h-card color="success">success</h-card>
+
+<h-card color="info">info</h-card>
+
+<h-card color="danger">danger</h-card>
+
+<h-card color="warn">warn</h-card>
+
+<h-card color="primary">primary</h-card>
+
+<h-card color="secondary">secondary</h-card>
+```
+
+### Shadows:
+
+<br>
+
+<h-card elevation="low">low</h-card>
+<br>
+<h-card elevation="medium">medium</h-card>
+<br>
+<h-card elevation="high">high</h-card>
+
+```vue
+<h-card elevation="low">low</h-card>
+
+<h-card elevation="medium">medium</h-card>
+
+<h-card elevation="high">high</h-card>
+```
+
+### Tags:
+
+<br>
+
+<h-card tag="div">div</h-card>
+<br>
+<h-card tag="button">button</h-card>
+<br>
+<br>
+<h-card tag="article">article</h-card>
+
+```vue
+<h-card tag="div">div</h-card>
+
+<h-card tag="button">button</h-card>
+
+<h-card tag="article">article</h-card>
+```
diff --git a/docs/components/atoms/grid.md b/docs/components/atoms/grid.md
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { HGridContainer, HGridItem } from '@components/atoms';
+</script>
+
+# Grid
+
+The layout is divided in two components, HGridContainer and HGridItem.
+HGridContainer is responsible for wrapper the items which you want to organize in grid layout.
+HGridItem is where you control the item wrapper in layout.
+
+### Default use:
+
+<br>
+
+<h-grid-container style="background-color:blue;">
+  <h-grid-item style="background-color:yellow;" column="4">yellow</h-grid-item>
+  <h-grid-item style="background-color:red;" column="6">red</h-grid-item>
+  <h-grid-item style="background-color:orange;" column="2">orange</h-grid-item>
+  <h-grid-item style="background-color:green;" row="4">green</h-grid-item>
+</h-grid-container>
+
+```vue
+<h-grid-container style="background-color:blue;">
+  <h-grid-item style="background-color:yellow;" column="4">
+    yellow
+  </h-grid-item>
+  
+  <h-grid-item style="background-color:red;" column="6">
+    red
+  </h-grid-item>
+  
+  <h-grid-item style="background-color:orange;" column="2">
+    orange
+  </h-grid-item>
+  
+  <h-grid-item style="background-color:green;" row="4">
+    green
+  </h-grid-item>
+</h-grid-container>
+```
+
+
+### Responsive use:
+
+<br>
+
+<h-grid-container style="background-color:blue;" responsive>
+  <h-grid-item style="background-color:yellow;" column="4">yellow</h-grid-item>
+  <h-grid-item style="background-color:red;" column="6">red</h-grid-item>
+  <h-grid-item style="background-color:orange;" column="4" :responsive="false">orange</h-grid-item>
+  <h-grid-item style="background-color:green;" column="6" :responsive="false">green</h-grid-item>
+</h-grid-container>
+
+```vue
+<h-grid-container style="background-color:blue;" responsive>
+  <h-grid-item style="background-color:yellow;" column="4">yellow</h-grid-item>
+  <h-grid-item style="background-color:red;" column="6">red</h-grid-item>
+  <h-grid-item style="background-color:orange;" column="4" :responsive="false">orange</h-grid-item>
+  <h-grid-item style="background-color:green;" column="6" :responsive="false">green</h-grid-item>
+</h-grid-container>
+```
+
+
+### With Padding:
+
+<br>
+
+<h-grid-container style="background-color:blue;" padding>
+  <h-grid-item style="background-color:yellow;" column="4">yellow</h-grid-item>
+</h-grid-container>
+
+
+```vue
+<h-grid-container style="background-color:blue;" padding>
+  <h-grid-item style="background-color:yellow;" column="4">yellow</h-grid-item>
+</h-grid-container>
+```
+
+
+### Dense use:
+
+<br>
+
+<h-grid-container style="background-color:blue;" dense>
+  <h-grid-item style="background-color:yellow;" column="4">yellow</h-grid-item>
+  <h-grid-item style="background-color:red;" column="6">red</h-grid-item>
+  <h-grid-item style="background-color:red;" column="6">red</h-grid-item>
+  <h-grid-item style="background-color:green;" column="2">green</h-grid-item>
+</h-grid-container>
+
+```vue
+<h-grid-container style="background-color:blue;" dense>
+  <h-grid-item style="background-color:yellow;" column="4">yellow</h-grid-item>
+  <h-grid-item style="background-color:red;" column="6">red</h-grid-item>
+  <h-grid-item style="background-color:red;" column="6">red</h-grid-item>
+  <h-grid-item style="background-color:green;" column="2">green</h-grid-item>
+</h-grid-container>
+```