feat: display all icons in App.vue page (run 'yarn dev' to see it)

README.md

-# UI_storybook
+# UI_Storybook
 
-UI library of components of Vue.
+> UI-библиотека компонентов на Vue, созданная с целью получить опыт
+> и использовать в других проектах ввиду её предполагаемой в будущем
+> лёгкости и простоте.
 
-Components list:
--
+## Список компонентов:
+- TreeList;
+- Drawer;
+- Button;
+- Divider;
 
-## Project Setup
+### Настройка окружения
 
 ```sh
 yarn
 ```
 
-### Compile and Hot-Reload for Development
+### Просмотр существующих иконок в виде списка и тестирование компонентов
 
 ```sh
 yarn dev
 ```
 
-### Type-Check, Compile and Minify for Production
+### Проверка типов, компиляция и минимизация для production
 
 ```sh
 yarn build
 ```
-
-### Run Unit Tests with [Vitest](https://vitest.dev/)
-
-```sh
-yarn test:unit
-```
-
-### Lint with [ESLint](https://eslint.org/)
-
-```sh
-yarn lint
-```

package.json

@@ -29,7 +29,7 @@
     "@storybook/vue3-vite": "8.4.5",
     "@tsconfig/node22": "^22.0.0",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^22.9.0",
+    "@types/node": "^22.10.1",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vitest/eslint-plugin": "1.1.7",
     "@vue/eslint-config-prettier": "^10.1.0",

src/App.vue

 <script setup lang="ts">
+import Drawer from '@stories/components/Drawer/Drawer.vue';
+import { ref } from 'vue';
+import Age18Icon from '@stories/icons/Mono/Age18Icon.vue';
+import AlarmIcon from '@stories/icons/Mono/AlarmIcon.vue';
+import AirplaneIcon from '@stories/icons/Mono/AirplaneIcon.vue';
+import ArrowLeftIcon from '@stories/icons/Mono/ArrowLeftIcon.vue';
+import ArrowForwardIcon from '@stories/icons/Mono/ArrowForwardIcon.vue';
+import ArchiveIcon from '@stories/icons/Mono/ArchiveIcon.vue';
+import AnchorLinkIcon from '@stories/icons/Mono/AnchorLinkIcon.vue';
+import AnchorIcon from '@stories/icons/Mono/AnchorIcon.vue';
+import AlignRightIcon from '@stories/icons/Mono/AlignRightIcon.vue';
+import AlignLeftIcon from '@stories/icons/Mono/AlignLeftIcon.vue';
+import AlignCenterIcon from '@stories/icons/Mono/AlignCenterIcon.vue';
+import ArrowRightIcon from '@stories/icons/Mono/ArrowRightIcon.vue';
+import AtIcon from '@stories/icons/Mono/AtIcon.vue';
+import AwardIcon from '@stories/icons/Mono/AwardIcon.vue';
+import BackspaceIcon from '@stories/icons/Mono/BackspaceIcon.vue';
+import BadgeIcon from '@stories/icons/Mono/BadgeIcon.vue';
+import BallFootballIcon from '@stories/icons/Mono/BallFootballIcon.vue';
+import BallIcon from '@stories/icons/Mono/BallIcon.vue';
+import BanknoteIcon from '@stories/icons/Mono/BanknoteIcon.vue';
+import BellIcon from '@stories/icons/Mono/BellIcon.vue';
+import BellOffIcon from '@stories/icons/Mono/BellOffIcon.vue';
+import BoxIcon from '@stories/icons/Mono/BoxIcon.vue';
+import BrightnessIcon from '@stories/icons/Mono/BrightnessIcon.vue';
+import BulbIcon from '@stories/icons/Mono/BulbIcon.vue';
+import CalculatorIcon from '@stories/icons/Mono/CalculatorIcon.vue';
+import CalendarIcon from '@stories/icons/Mono/CalendarIcon.vue';
+import CalendarAddIcon from '@stories/icons/Mono/CalendarAddIcon.vue';
+import CalendarRemoveIcon from '@stories/icons/Mono/CalendarRemoveIcon.vue';
+import CardsIcon from '@stories/icons/Mono/CardsIcon.vue';
+import ChartLineIcon from '@stories/icons/Mono/ChartLineIcon.vue';
+import ChartPieIcon from '@stories/icons/Mono/ChartPieIcon.vue';
+import ChatIcon from '@stories/icons/Mono/ChatIcon.vue';
+import ChatWritingIcon from '@stories/icons/Mono/ChatWritingIcon.vue';
+import CheckmarkIcon from '@stories/icons/Mono/CheckmarkIcon.vue';
+import ChemistryFlaskIcon from '@stories/icons/Mono/ChemistryFlaskIcon.vue';
+import CodeIcon from '@stories/icons/Mono/CodeIcon.vue';
+import CoinsIcon from '@stories/icons/Mono/CoinsIcon.vue';
+import ColorPaletteIcon from '@stories/icons/Mono/ColorPaletteIcon.vue';
+import CompassIcon from '@stories/icons/Mono/CompassIcon.vue';
+import ConstructionWorkerIcon from '@stories/icons/Mono/ConstructionWorkerIcon.vue';
+import ContactsIcon from '@stories/icons/Mono/ContactsIcon.vue';
+import CropIcon from '@stories/icons/Mono/CropIcon.vue';
+import CrossCircleIcon from '@stories/icons/Mono/CrossCircleIcon.vue';
+import CrossIcon from '@stories/icons/Mono/CrossIcon.vue';
+import CubeIcon from '@stories/icons/Mono/CubeIcon.vue';
+import CupIcon from '@stories/icons/Mono/CupIcon.vue';
+import CursorIcon from '@stories/icons/Mono/CursorIcon.vue';
+import LineDashedIcon from '@stories/icons/Mono/LineDashedIcon.vue';
+import LineDiagonalIcon from '@stories/icons/Mono/LineDiagonalIcon.vue';
+import DiamondIcon from '@stories/icons/Mono/DiamondIcon.vue';
+import DiaryIcon from '@stories/icons/Mono/DiaryIcon.vue';
+import DiceIcon from '@stories/icons/Mono/DiceIcon.vue';
+import DigIcon from '@stories/icons/Mono/DigIcon.vue';
+import DislikeIcon from '@stories/icons/Mono/DislikeIcon.vue';
+import DisplayIcon from '@stories/icons/Mono/DisplayIcon.vue';
+import DocumentIcon from '@stories/icons/Mono/DocumentIcon.vue';
+import DollarIcon from '@stories/icons/Mono/DollarIcon.vue';
+import DotsHorizontalIcon from '@stories/icons/Mono/DotsHorizontalIcon.vue';
+import DotsVerticalIcon from '@stories/icons/Mono/DotsVerticalIcon.vue';
+import LineDottedIcon from '@stories/icons/Mono/LineDottedIcon.vue';
+import DownloadIcon from '@stories/icons/Mono/DownloadIcon.vue';
+import DropIcon from '@stories/icons/Mono/DropIcon.vue';
+import DumbbelIcon from '@stories/icons/Mono/DumbbelIcon.vue';
+import EarthIcon from '@stories/icons/Mono/EarthIcon.vue';
+import EditIcon from '@stories/icons/Mono/EditIcon.vue';
+import EyeIcon from '@stories/icons/Mono/EyeIcon.vue';
+import EncyclopediaIcon from '@stories/icons/Mono/EncyclopediaIcon.vue';
+import ExitIcon from '@stories/icons/Mono/ExitIcon.vue';
+import FeedbackIcon from '@stories/icons/Mono/FeedbackIcon.vue';
+import FilterIcon from '@stories/icons/Mono/FilterIcon.vue';
+import FingerprintIcon from '@stories/icons/Mono/FingerprintIcon.vue';
+import FireIcon from '@stories/icons/Mono/FireIcon.vue';
+import FlagIcon from '@stories/icons/Mono/FlagIcon.vue';
+import FlashIcon from '@stories/icons/Mono/FlashIcon.vue';
+import FlashlightIcon from '@stories/icons/Mono/FlashlightIcon.vue';
+import FolderLockIcon from '@stories/icons/Mono/FolderLockIcon.vue';
+import FrameIcon from '@stories/icons/Mono/FrameIcon.vue';
+import FullScreenIcon from '@stories/icons/Mono/FullScreenIcon.vue';
+import GameControllerIcon from '@stories/icons/Mono/GameControllerIcon.vue';
+import GiftIcon from '@stories/icons/Mono/GiftIcon.vue';
+import GlassesIcon from '@stories/icons/Mono/GlassesIcon.vue';
+import HamburgerIcon from '@stories/icons/Mono/HamburgerIcon.vue';
+import HandIcon from '@stories/icons/Mono/HandIcon.vue';
+import HomeIcon from '@stories/icons/Mono/HomeIcon.vue';
+import ImageEditIcon from '@stories/icons/Mono/ImageEditIcon.vue';
+import ImageIcon from '@stories/icons/Mono/ImageIcon.vue';
+import MoveIcon from '@stories/icons/Mono/MoveIcon.vue';
+import DocumentAddIcon from '@stories/icons/Mono/DocumentAddIcon.vue';
+import DocumentDeleteIcon from '@stories/icons/Mono/DocumentDeleteIcon.vue';
+import DocumentEditIcon from '@stories/icons/Mono/DocumentEditIcon.vue';
+import ParagraphIcon from '@stories/icons/Mono/ParagraphIcon.vue';
+import PhoneHandsetIcon from '@stories/icons/Mono/PhoneHandsetIcon.vue';
+import PlusCircleIcon from '@stories/icons/Mono/PlusCircleIcon.vue';
+import PlusIcon from '@stories/icons/Mono/PlusIcon.vue';
+import PointerIcon from '@stories/icons/Mono/PointerIcon.vue';
+import SaveIcon from '@stories/icons/Mono/SaveIcon.vue';
+import SettingsIcon from '@stories/icons/Mono/SettingsIcon.vue';
+import LineIcon from '@stories/icons/Mono/LineIcon.vue';
+import TableIcon from '@stories/icons/Mono/TableIcon.vue';
+import TrashIcon from '@stories/icons/Mono/TrashIcon.vue';
+import UserIcon from '@stories/icons/Mono/UserIcon.vue';
+import ArrowsVerticalIcon from '@stories/icons/Mono/ArrowsVerticalIcon.vue';
+
+const gentleIcons = [
+  Age18Icon,
+  AirplaneIcon,
+  AlarmIcon,
+  AlignRightIcon,
+  AlignLeftIcon,
+  AlignCenterIcon,
+  AnchorIcon,
+  AnchorLinkIcon,
+  ArchiveIcon,
+  ArrowForwardIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  ArrowsVerticalIcon,
+  AtIcon,
+  AwardIcon,
+  BackspaceIcon,
+  BadgeIcon,
+  BallFootballIcon,
+  BallIcon,
+  BanknoteIcon,
+  BellIcon,
+  BellOffIcon,
+  BoxIcon,
+  BrightnessIcon,
+  BulbIcon,
+  CalculatorIcon,
+  CalendarIcon,
+  CalendarAddIcon,
+  CalendarRemoveIcon,
+  CardsIcon,
+  ChartLineIcon,
+  ChartPieIcon,
+  ChatIcon,
+  ChatWritingIcon,
+  CheckmarkIcon,
+  ChemistryFlaskIcon,
+  CodeIcon,
+  CoinsIcon,
+  ColorPaletteIcon,
+  CompassIcon,
+  ConstructionWorkerIcon,
+  ContactsIcon,
+  CropIcon,
+  CrossIcon,
+  CrossCircleIcon,
+  CubeIcon,
+  CupIcon,
+  CursorIcon,
+  DiamondIcon,
+  DiaryIcon,
+  DiceIcon,
+  DigIcon,
+  DislikeIcon,
+  DisplayIcon,
+  DocumentIcon,
+  DocumentAddIcon,
+  DocumentDeleteIcon,
+  DocumentEditIcon,
+  DollarIcon,
+  DotsHorizontalIcon,
+  DotsVerticalIcon,
+  DownloadIcon,
+  DropIcon,
+  DumbbelIcon,
+  EarthIcon,
+  EditIcon,
+  EncyclopediaIcon,
+  ExitIcon,
+  EyeIcon,
+  FeedbackIcon,
+  FilterIcon,
+  FingerprintIcon,
+  FireIcon,
+  FlagIcon,
+  FlashIcon,
+  FlashlightIcon,
+  FolderLockIcon,
+  FrameIcon,
+  FullScreenIcon,
+  GameControllerIcon,
+  GiftIcon,
+  GlassesIcon,
+  HamburgerIcon,
+  HandIcon,
+  HomeIcon,
+  ImageIcon,
+  ImageEditIcon,
+  LineIcon,
+  LineDashedIcon,
+  LineDottedIcon,
+  LineDiagonalIcon,
+  MoveIcon,
+  ParagraphIcon,
+  PhoneHandsetIcon,
+  PlusCircleIcon,
+  PlusIcon,
+  PointerIcon,
+  SaveIcon,
+  SettingsIcon,
+  TableIcon,
+  TrashIcon,
+  UserIcon,
+];
+const visibleDrawer = ref(false);
 </script>
 
 <template>
-  <main class="container">
-    Hello, storybook!
+  <Drawer v-model:visible="visibleDrawer"
+    ><p>pizdwertyukilokl,kmjhgfwewesrdtyukilo,kmjngeartyukikdhgfgjhklj.,kga</p>
+    <template #footer
+      ><div style="height: 1px; background-color: black"></div>
+      pizdwertyukilokl,kmjhgfwewesrdtyukilo,kmjngeartyukikdhgfgjhklj.,kga</template
+    ></Drawer
+  >
+  <main class="main">
+    <h2 class="title"><span class="mono">Mono</span> icons</h2>
+    <ul class="iconsList">
+      <li class="iconsItem" v-for="icon of gentleIcons" :key="icon.__name">
+        <component :is="icon" class="icon" />
+        <span class="iconName">{{ icon.__name!.slice(0, -4) }}</span>
+      </li>
+    </ul>
+    <button class="testButton" @click="visibleDrawer = !visibleDrawer">Нажми меня</button>
   </main>
 </template>
 
 <style scoped>
-.container {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 64px;
+.main {
+  margin: 20px;
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+.title {
+  font-size: 48px;
+  width: max-content;
+  margin: 0 auto 40px auto;
+}
+.iconsList {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+  gap: 10px;
+}
+.iconsItem {
+  font-size: 14px;
+}
+.icon {
+  display: block;
+  width: max-content;
+  margin: 0 auto 5px auto;
+}
+.iconName {
+  font-weight: bold;
+  display: block;
+  width: max-content;
+  margin: 0 auto;
+}
+.mono {
+  color: green;
   font-style: italic;
 }
+.testButton {
+  position: absolute;
+  right: 50px;
+  bottom: 50px;
+  background-color: red;
+  color: white;
+  padding: 10px;
+  border-radius: 5px;
+}
 </style>

src/main.ts

-import './assets/main.css'
+import './assets/main.css';
 
-import { createApp } from 'vue'
-import App from './App.vue'
+import { createApp } from 'vue';
+import App from './App.vue';
 
-createApp(App).mount('#app')
+createApp(App).mount('#app');

vite.config.ts

-import { fileURLToPath, URL } from 'node:url'
+import { fileURLToPath, URL } from 'node:url';
 
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueDevTools from 'vite-plugin-vue-devtools'
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vueDevTools from 'vite-plugin-vue-devtools';
 
-// https://vite.dev/config/
 export default defineConfig({
-  plugins: [
-    vue(),
-    vueDevTools(),
-  ],
+  plugins: [vue(), vueDevTools()],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
@@ -19,4 +15,4 @@ export default defineConfig({
       '@stories': fileURLToPath(new URL('./src/stories', import.meta.url)),
     },
   },
-})
+});

yarn.lock

@@ -1107,13 +1107,20 @@
   resolved "https://registry.yarnpkg.com/@types/mdx/-/mdx-2.0.13.tgz#68f6877043d377092890ff5b298152b0a21671bd"
   integrity sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==
 
-"@types/node@*", "@types/node@^22.9.0":
+"@types/node@*":
   version "22.9.3"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-22.9.3.tgz#08f3d64b3bc6d74b162d36f60213e8a6704ef2b4"
   integrity sha512-F3u1fs/fce3FFk+DAxbxc78DF8x0cY09RRL8GnXLmkJ1jvx3TtPdWoTT5/NiYfI5ASqXBmfqJi9dZ3gxMx4lzw==
   dependencies:
     undici-types "~6.19.8"
 
+"@types/node@^22.10.1":
+  version "22.10.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.10.1.tgz#41ffeee127b8975a05f8c4f83fb89bcb2987d766"
+  integrity sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==
+  dependencies:
+    undici-types "~6.20.0"
+
 "@types/tough-cookie@*":
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.5.tgz#cb6e2a691b70cb177c6e3ae9c1d2e8b2ea8cd304"
@@ -3920,6 +3927,11 @@ undici-types@~6.19.8:
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
   integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==
 
+undici-types@~6.20.0:
+  version "6.20.0"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.20.0.tgz#8171bf22c1f588d1554d55bf204bc624af388433"
+  integrity sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==
+
 universalify@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"