add tag component

src/components/button/Button.stories.ts

@@ -8,7 +8,7 @@ export default {
       control: { type: 'select', options: ['high', 'medium', 'ghost'] },
     },
     size: {
-      control: { type: 'select', options: ['small', 'medium', 'large'] },
+      control: { type: 'select', options: ['s', 'm', 'l'] },
     },
   },
 };

src/components/button/Button.vue

@@ -5,18 +5,18 @@ const props = defineProps({
   emphasis: {
     type: String,
     default: 'medium',
-    validator: (value: string) => ['high', 'medium', 'ghost'].includes(value),
+    validator: (value: string) => ['high', 'medium', 'low'].includes(value),
   },
   size: {
     type: String,
-    default: 'sm',
-    validator: (value: string) => ['sm', 'md', 'lg'].includes(value),
+    default: 's',
+    validator: (value: string) => ['s', 'm', 'l'].includes(value),
   },
 })
 </script>
 
 <template>
-  <button :class="`${props.emphasis} ${props.size}`">
+  <button :class="[`button--${emphasis}`, `button--${size}`]">
     <slot></slot>
   </button>
 </template>
@@ -33,55 +33,53 @@ button {
   user-select: none;
 }
 
-.high {
+.button--high {
   background-color: var(--colorPrimary7);
   color: var(--semanticText);
   border-style: solid;
   border-color: var(--colorPrimary7)
 }
 
-.high:hover {
+.button--high:hover {
   background-color: var(--colorPrimary9);
   color: var(--semanticText);
   border-color: var(--colorPrimary9);
 }
 
-.medium {
+.button--medium {
   background-color: transparent;
   border-style: solid;
   border-color: var(--colorPrimary7);
 }
 
-.medium:hover {
+.button--medium:hover {
   background-color: var(--colorPrimary9);
   color: var(--semanticText);
   border-color: var(--colorPrimary9);
 }
 
-.ghost {
+.button--low {
   background-color: transparent;
   color: var(--colorPrimary7);
   border: none;
 }
 
-.ghost:hover {
+.button--low:hover {
   color: var(--colorPrimary9);
 }
 
-.sm {
+.button--s {
   border-width: 1px;
   padding: 0.2rem 0.4rem;
   border-radius: 4px;
 
 }
-.md {
+.button--m {
   border-width: 1.5px;
   padding: 0.4rem 0.6rem;
   border-radius: 6px;
-
-
 }
-.lg {
+.button--l {
   border-width: 2px;
   padding: 0.6rem 0.8rem;
   border-radius: 8px;

src/components/button/Documentation.mdx

@@ -3,16 +3,16 @@ import {Meta, Story} from "@storybook/blocks";
 
 <Meta title="Button" component={Button} />;
 # Button
-<Button emphasis={"high"} size={"sm"}>High</Button>
-<Button emphasis={"medium"} size={"sm"}>Medium</Button>
-<Button emphasis={"ghost"} size={"sm"}>Low</Button>
+<Button emphasis={"high"} size={"s"}>High</Button>
+<Button emphasis={"medium"} size={"s"}>Medium</Button>
+<Button emphasis={"low"} size={"s"}>Low</Button>
 
 
-<Button emphasis={"high"} size={"md"}>High</Button>
-<Button emphasis={"medium"} size={"md"}>Medium</Button>
-<Button emphasis={"ghost"} size={"md"}>Low</Button>
+<Button emphasis={"high"} size={"m"}>High</Button>
+<Button emphasis={"medium"} size={"m"}>Medium</Button>
+<Button emphasis={"low"} size={"m"}>Low</Button>
 
 
-<Button emphasis={"high"} size={"lg"}>High</Button>
-<Button emphasis={"medium"} size={"lg"}>Medium</Button>
-<Button emphasis={"ghost"} size={"lg"}>Low</Button>
+<Button emphasis={"high"} size={"l"}>High</Button>
+<Button emphasis={"medium"} size={"l"}>Medium</Button>
+<Button emphasis={"low"} size={"l"}>Low</Button>

src/components/header/Documentation.mdx

@@ -4,4 +4,15 @@ import Header from "./Header.vue";
 
 <Meta title="Header" component={Header} />;
 # Header
-<Header style={{maxWidth: "400px"}} />;
+<div style={{display: "flex", gap: "10px"}}>
+    <Header style={{maxWidth: "400px"}} size={"s"} >SMALL</Header>
+</div>
+
+
+<div style={{display: "flex", gap: "100px"}}>
+    <Header style={{maxWidth: "400px"}} size={"m"} >MEDIUM</Header>
+</div>
+
+<div style={{display: "flex", gap: "100px", marginTop: "40px"}}>
+    <Header style={{maxWidth: "400px"}} size={"l"} >LARGE</Header>
+</div>

src/components/header/Header.vue

@@ -2,12 +2,16 @@
 import { defineProps } from 'vue'
 
 const props = defineProps({
-
+  size: {
+    type: String,
+    default: 'm',
+    validator: (value: string) => ['s', 'm', 'l'].includes(value),
+  },
 })
 </script>
 
 <template>
-  <div class="header">
+  <div class="header" aria-label="header" :class="[`header--${size}`]">
     <slot></slot>
   </div>
 </template>
@@ -27,4 +31,16 @@ const props = defineProps({
   z-index: 1000;
 }
 
+.header--s {
+  height: 3rem;
+}
+.header--m{
+  height: 4rem;
+}
+.header--l {
+  height: 5rem;
+}
+
+
+
 </style>

src/components/icons/IconAlgorithmSettings.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+
+const props = defineProps({})
+</script>
+
+<template>
+<svg width="128" height="128" viewBox="0 0 128 128" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 110C21.7909 110 20 108.209 20 106L20 22C20 19.7909 21.7909 18 24 18V18C26.2091 18 28 19.7909 28 22L28 106C28 108.209 26.2091 110 24 110V110Z" />
+<path d="M64 110C61.7909 110 60 108.209 60 106L60 22C60 19.7909 61.7909 18 64 18V18C66.2091 18 68 19.7909 68 22V106C68 108.209 66.2091 110 64 110V110Z" />
+<path d="M104 110C101.791 110 100 108.209 100 106V22C100 19.7909 101.791 18 104 18V18C106.209 18 108 19.7909 108 22V106C108 108.209 106.209 110 104 110V110Z" />
+<path d="M88 89C88 80.1634 95.1634 73 104 73V73C112.837 73 120 80.1634 120 89V89C120 97.8366 112.837 105 104 105V105C95.1634 105 88 97.8366 88 89V89Z" />
+<path d="M48 48C48 39.1634 55.1634 32 64 32V32C72.8366 32 80 39.1634 80 48V48C80 56.8366 72.8366 64 64 64V64C55.1634 64 48 56.8366 48 48V48Z" />
+<path d="M8 80C8 71.1634 15.1634 64 24 64V64C32.8366 64 40 71.1634 40 80V80C40 88.8366 32.8366 96 24 96V96C15.1634 96 8 88.8366 8 80V80Z" />
+</svg>
+
+</template>
+
+<style scoped>
+
+</style>

src/components/icons/IconGraphEdit.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+
+const props = defineProps({})
+</script>
+
+<template>
+<svg width="128" height="128" viewBox="0 0 128 128" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 34C8 25.1634 15.1634 18 24 18V18C32.8366 18 40 25.1634 40 34V34C40 42.8366 32.8366 50 24 50V50C15.1634 50 8 42.8366 8 34V34Z"/>
+<path d="M88 34C88 25.1634 95.1634 18 104 18V18C112.837 18 120 25.1634 120 34V34C120 42.8366 112.837 50 104 50V50C95.1634 50 88 42.8366 88 34V34Z" />
+<path d="M48 94C48 85.1634 55.1634 78 64 78V78C72.8366 78 80 85.1634 80 94V94C80 102.837 72.8366 110 64 110V110C55.1634 110 48 102.837 48 94V94Z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M90 36L38 36L38 28L90 28L90 36Z" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36.1481 58.8075C35.2433 59.441 33.9962 59.2211 33.3627 58.3163L30.8443 54.7197C30.2107 53.8149 30.4306 52.5678 31.3354 51.9342L34.612 49.6399C35.5169 49.0064 36.7639 49.2263 37.3975 50.1311L39.9159 53.7277C40.5494 54.6325 40.3295 55.8796 39.4247 56.5131L36.1481 58.8075ZM43.3671 69.1173C42.4623 69.7508 41.2152 69.5309 40.5817 68.6261L38.0633 65.0295C37.4297 64.1247 37.6496 62.8776 38.5544 62.2441L41.8311 59.9498C42.7359 59.3162 43.983 59.5361 44.6165 60.4409L47.1349 64.0375C47.7684 64.9423 47.5485 66.1894 46.6437 66.823L43.3671 69.1173ZM50.5861 79.4271C49.6813 80.0606 48.4342 79.8407 47.8007 78.9359L45.2823 75.3393C44.6487 74.4345 44.8686 73.1874 45.7735 72.5539L49.0501 70.2596C49.9549 69.626 51.202 69.8459 51.8355 70.7507L54.3539 74.3473C54.9874 75.2521 54.7675 76.4992 53.8627 77.1328L50.5861 79.4271Z" />
+</svg>
+</template>
+
+<style scoped>
+
+</style>

src/components/icons/IconSteps.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { defineProps } from 'vue'
+
+const props = defineProps({
+})
+</script>
+
+<template>
+  <svg width="128" height="128" viewBox="0 0 128 128" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <rect x="8" y="54" width="56" height="20" rx="10" />
+    <rect x="8" y="18" width="93" height="20" rx="10"/>
+    <rect x="8" y="90" width="112" height="20" rx="10"/>
+  </svg>
+</template>
+
+<style scoped>
+</style>

src/components/spinner/Documentation.mdx

@@ -2,5 +2,5 @@ import {Meta, Story} from "@storybook/blocks";
 import Spinner from "./Spinner.vue";
 
 <Meta title="Spinner" component={Spinner} />;
-# Header
+# Spinner
 <Spinner>Loading</Spinner>

src/components/tag/Documentation.mdx

@@ -0,0 +1,67 @@
+import Tag from "./Tag.vue";
+import {Meta, Story} from "@storybook/blocks";
+
+# Tag
+<div style={{gap: "10px", display: "flex"}}>
+    <Tag emphasis={"high"}>High</Tag>
+    <Tag emphasis={"medium"}>Medium</Tag>
+    <Tag emphasis={"low"}>Low</Tag>
+</div>
+<div style={{gap: "10px", display: "flex", marginTop: "20px"}}>
+    <Tag appearance={"primary"}>Primary</Tag>
+    <Tag appearance={"success"}>Success</Tag>
+    <Tag appearance={"danger"}>Danger</Tag>
+    <Tag appearance={"warning"}>Warning</Tag>
+    <Tag appearance={"info"}>Info</Tag>
+    <Tag appearance={"neutralLight"}>Neutral Light</Tag>
+    <Tag appearance={"neutralDark"}>Neutral Dark</Tag>
+</div>
+<div style={{gap: "10px", display: "flex", marginTop: "20px", alignItems: "center"}}>
+    <Tag size={"s"}>Small</Tag>
+    <Tag size={"m"}>Medium</Tag>
+    <Tag size={"l"}>Large</Tag>
+</div>
+
+The `Tag` component is used to display abitrary content in a tag-like format. It can be used to display metadata, labels, or other types of information.
+
+
+## Props
+- `appearance`: This prop controls the appearance of the tag. It accepts the following values:
+  - 'primary'
+  - 'success'
+  - 'danger'
+  - 'warning'
+  - 'info'
+  - 'neutralLight'
+  - 'neutralDark'
+- `emphasis`: This prop controls the emphasis level of the tag. It accepts the following values:
+  - 'low'
+  - 'medium'
+  - 'high'
+- `size`: This prop controls the size of the tag. It accepts the following values:
+  - 's'
+  - 'm'
+  - 'l'
+
+
+## Slots
+
+The `Tag` component has three slots:
+
+- `start`: This slot can be used to add content at the start of the tag.
+- `default`: This slot can be used to add the main content of the tag.
+- `end`: This slot can be used to add content at the end of the tag.
+
+## Usage
+
+Here's an example of how to use the `Tag` component with the `appearance` prop and the `start` and `end` slots:
+
+```vue
+<Tag appearance="primary">
+  <template #start>
+    <Icon name="check" />
+  </template>
+  Primary Tag
+  <template #end>
+    <Icon name="close" />
+  </templ