diff --git a/.prettierrc.json b/.prettierrc.json index 17a23d07d9fe2da12777651d9c9c16d1656a6048..06c8d433b8f896061558cd509c5641143f1b9bfb 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1,7 +1,7 @@ { "$schema": "https://json.schemastore.org/prettierrc", - "semi": false, + "semi": true, "singleQuote": true, "printWidth": 100 } diff --git a/.storybook/main.ts b/.storybook/main.ts index 7a164c5b0c71a41260fe646aba82b94aac5cffa8..48eccba1f170c927d95ca18d7278a4362b713094 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,7 +1,7 @@ import type { StorybookConfig } from '@storybook/vue3-vite' const config: StorybookConfig = { - stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], addons: [ '@storybook/addon-onboarding', '@storybook/addon-essentials', diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html new file mode 100644 index 0000000000000000000000000000000000000000..657a1b80ee9ff6812a340b117a507dd94429fb66 --- /dev/null +++ b/.storybook/manager-head.html @@ -0,0 +1,11 @@ + + + + + + Storybook + + + + + \ No newline at end of file diff --git a/.storybook/preview.ts b/.storybook/preview.ts index fe415c7f14dd001ec2e72ad6bd5707eca19c96b5..137c52e30e1b5c14c3066bd819bb4e011f22bf1f 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -1,4 +1,5 @@ import type { Preview } from '@storybook/vue3' +import '../src/assets/main.css'; const preview: Preview = { parameters: { diff --git a/README.md b/README.md index e1ed42575e1c0e5427e1d8280e952a0adbd01e70..1976a8ed277d950da9acdc8eb9c84dac9ece3bf4 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,40 @@ -# UI_storybook +# UI_Storybook -UI library of components of Vue. +> UI-библиотека компонентов на Vue, созданная с целью получить опыт +> и использовать в других проектах ввиду её предполагаемой в будущем +> лёгкости и простоте. -Components list: -- +## Список компонентов: +- TreeList; +- MenuDial; +- Slider; +- Drawer; +- Modal; +- SelectButton; +- Button; +- ToggleSwitch; +- 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 -``` +После создания иконки: +1. Добавить иконку в iconsSet (src/common/constants/icons); +2. Добавить иконку в соответствующий массив в App.vue. \ No newline at end of file diff --git a/eslint.config.js b/eslint.config.js index 40b84cd9df08124cf7676efbc8e276ecfd71a7bd..977eb79b3f9c499fd658b8c134d06f1a2e2451ea 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -1,7 +1,7 @@ -import pluginVue from 'eslint-plugin-vue' -import vueTsEslintConfig from '@vue/eslint-config-typescript' -import pluginVitest from '@vitest/eslint-plugin' -import skipFormatting from '@vue/eslint-config-prettier/skip-formatting' +import pluginVue from 'eslint-plugin-vue'; +import vueTsEslintConfig from '@vue/eslint-config-typescript'; +import pluginVitest from '@vitest/eslint-plugin'; +import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'; export default [ { @@ -16,10 +16,15 @@ export default [ ...pluginVue.configs['flat/essential'], ...vueTsEslintConfig(), - + { ...pluginVitest.configs.recommended, files: ['src/**/__tests__/*'], }, skipFormatting, -] + { + rules: { + 'vue/multi-word-component-names': 'off', + }, + }, +]; diff --git a/index.html b/index.html index 7f488bd8d39590f5289c2b73e59df931af6f8e39..0ab5bb43e96dbdfb7b413c47a657a2f1c7ba23be 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + UI Storybook diff --git a/package.json b/package.json index aed89f0ddb010d02327261b2bbf75c65cc4a5c47..5c66f1f72dc9a7db96f506a4591bf6ccb0fcf384 100644 --- a/package.json +++ b/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", diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index df36fcfb72584e00488330b560ebcf34a41c64c2..0000000000000000000000000000000000000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/public/storybook.ico b/public/storybook.ico new file mode 100644 index 0000000000000000000000000000000000000000..690ee543d1b7a8d727252f9d278e2538ad02a61f Binary files /dev/null and b/public/storybook.ico differ diff --git a/src/App.vue b/src/App.vue index e16c9d3119fd35f7f257f97dd49f35010dadd608..5838a25512df06c7ee27db0df1a554e7fdd2ef17 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,19 +1,429 @@ diff --git a/src/assets/components.css b/src/assets/components.css new file mode 100644 index 0000000000000000000000000000000000000000..6ad19a0c418960dc3616edb589a34d071fcea464 --- /dev/null +++ b/src/assets/components.css @@ -0,0 +1,17 @@ +.bold { + font-weight: bold; +} +.italic { + font-style: italic; +} +.flex-column { + flex-direction: column; +} +::-webkit-scrollbar { + width: 8px; + height: 8px; +} +::-webkit-scrollbar-thumb { + border-radius: 5px; + background-color: #888; +} diff --git a/src/assets/main.css b/src/assets/main.css index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..7b91d0d87864745b54750912cdbdcbabe74610e1 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -0,0 +1,282 @@ +@import './components.css'; + +:root { + --gray-100: #f3f4f6; + --gray-200: #e5e7eb; + --gray-300: #d1d5db; + --gray-400: #9ca3af; + --gray-500: #6b7280; + --gray-600: #4b5563; + --gray-700: #374151; + --gray-800: #1f2937; + --gray-900: #111827; + --slate-100: #f1f5f9; + --slate-200: #e2e8f0; + --slate-300: #cbd5e1; + --slate-400: #94a3b8; + --slate-500: #64748b; + --slate-600: #475569; + --slate-700: #334155; + --slate-800: #1e293b; + --slate-900: #0f172a; + --red-100: #fee2e2; + --red-200: #fecaca; + --red-300: #fca5a5; + --red-400: #f87171; + --red-500: #ef4444; + --red-600: #dc2626; + --red-700: #b91c1c; + --red-800: #991b1b; + --red-900: #7f1d1d; + --orange-100: #ffedd5; + --orange-200: #fed7aa; + --orange-300: #fdba74; + --orange-400: #fb923c; + --orange-500: #f97316; + --orange-600: #ea580c; + --orange-700: #c2410c; + --orange-800: #9a3412; + --orange-900: #7c2d12; + --amber-100: #fef3c7; + --amber-200: #fde68a; + --amber-300: #fcd34d; + --amber-400: #fbbf24; + --amber-500: #f59e0b; + --amber-600: #d97706; + --amber-700: #b45309; + --amber-800: #92400e; + --amber-900: #78350f; + --yellow-100: #fef9c3; + --yellow-200: #fef08a; + --yellow-300: #fde047; + --yellow-400: #facc15; + --yellow-500: #eab308; + --yellow-600: #ca8a04; + --yellow-700: #a16207; + --yellow-800: #854d0e; + --yellow-900: #713f12; + --lime-100: #ecfccb; + --lime-200: #d9f99d; + --lime-300: #bef264; + --lime-400: #a3e635; + --lime-500: #84cc16; + --lime-600: #65a30d; + --lime-700: #4d7c0f; + --lime-800: #3f6212; + --lime-900: #365314; + --green-100: #dcfce7; + --green-200: #bbf7d0; + --green-300: #86efac; + --green-400: #4ade80; + --green-500: #22c55e; + --green-600: #16a34a; + --green-700: #15803d; + --green-800: #166534; + --green-900: #14532d; + --teal-100: #ccfbf1; + --teal-200: #99f6e4; + --teal-300: #5eead4; + --teal-400: #2dd4bf; + --teal-500: #14b8a6; + --teal-600: #0d9488; + --teal-700: #0f766e; + --teal-800: #115e59; + --teal-900: #134e4a; + --sky-100: #e0f2fe; + --sky-200: #bae6fd; + --sky-300: #7dd3fc; + --sky-400: #38bdf8; + --sky-500: #0ea5e9; + --sky-600: #0284c7; + --sky-700: #0369a1; + --sky-800: #075985; + --sky-900: #0c4a6e; + --blue-100: #dbeafe; + --blue-200: #bfdbfe; + --blue-300: #93c5fd; + --blue-400: #60a5fa; + --blue-500: #3b82f6; + --blue-600: #2563eb; + --blue-700: #1d4ed8; + --blue-800: #1e40af; + --blue-900: #1e3a8a; + --indigo-100: #e0e7ff; + --indigo-200: #c7d2fe; + --indigo-300: #a5b4fc; + --indigo-400: #818cf8; + --indigo-500: #6366f1; + --indigo-600: #4f46e5; + --indigo-700: #4338ca; + --indigo-800: #3730a3; + --indigo-900: #312e81; + --purple-100: #f3e8ff; + --purple-200: #e9d5ff; + --purple-300: #d8b4fe; + --purple-400: #c084fc; + --purple-500: #a855f7; + --purple-600: #9333ea; + --purple-700: #7e22ce; + --purple-800: #6b21a8; + --purple-900: #581c87; + --fuchsia-100: #fae8ff; + --fuchsia-200: #f5d0fe; + --fuchsia-300: #f0abfc; + --fuchsia-400: #e879f9; + --fuchsia-500: #d946ef; + --fuchsia-600: #c026d3; + --fuchsia-700: #a21caf; + --fuchsia-800: #86198f; + --fuchsia-900: #701a75; + --pink-100: #fce7f3; + --pink-200: #fbcfe8; + --pink-300: #f9a8d4; + --pink-400: #f472b6; + --pink-500: #ec4899; + --pink-600: #db2777; + --pink-700: #be185d; + --pink-800: #9d174d; + --pink-900: #831843; + --rose-100: #ffe4e6; + --rose-200: #fecdd3; + --rose-300: #fda4af; + --rose-400: #fb7185; + --rose-500: #f43f5e; + --rose-600: #e11d48; + --rose-700: #be123c; + --rose-800: #9f1239; + --rose-900: #881337; +} +body { + min-height: 100vh; + overflow-x: hidden; +} +* { + font-family: Arial, serif; +} +#app { + min-height: 100vh; + display: flex; + flex-flow: column; +} +#sheetContainer { + padding-top: 80px; +} +#app > main { + flex: 1 1 auto; +} +/* Reset and base styles */ +* { + padding: 0; + margin: 0; + border: none; + box-sizing: border-box; +} + +*, +*::before, +*::after { + box-sizing: border-box; + font-weight: 500; +} + +/* Links */ + +a, +a:link, +a:visited { + text-decoration: none; +} + +a:hover { + text-decoration: none; +} + +/* Common */ + +aside, +nav, +footer, +header, +section, +main { + display: block; +} + +h1, +h2, +h3, +h4, +h5, +h6, +p { + font-size: inherit; + font-weight: inherit; +} + +ul, +ul li { + list-style: none; +} + +img { + vertical-align: top; +} + +img, +svg { + max-width: 100%; + height: auto; +} + +address { + font-style: normal; +} + +/* Form */ + +input, +textarea, +button, +select { + font-family: inherit; + font-size: inherit; + color: inherit; + background-color: transparent; +} + +input::-ms-clear { + display: none; +} + +button, +input[type='submit'] { + display: inline-block; + box-shadow: none; + background-color: transparent; + background: none; + cursor: pointer; +} + +input:focus, +input:active, +button:focus, +button:active { + outline: none; +} + +button::-moz-focus-inner { + padding: 0; + border: 0; +} + +label { + cursor: pointer; +} + +legend { + display: block; +} +input[type=file], /* FF, IE7+, chrome (except button) */ +input[type=file]::-webkit-file-upload-button { + cursor: pointer; +} diff --git a/src/common/constants/icons.ts b/src/common/constants/icons.ts new file mode 100644 index 0000000000000000000000000000000000000000..892a811cdd65c74e7434ef955c25de7458a168ff --- /dev/null +++ b/src/common/constants/icons.ts @@ -0,0 +1,211 @@ +import type { Component } from 'vue'; + +import Age18Icon from '@stories/icons/Mono/Age18Icon.vue'; +import AirplaneIcon from '@stories/icons/Mono/AirplaneIcon.vue'; +import AlarmIcon from '@stories/icons/Mono/AlarmIcon.vue'; +import AlignCenterIcon from '@stories/icons/Mono/AlignCenterIcon.vue'; +import AlignLeftIcon from '@stories/icons/Mono/AlignLeftIcon.vue'; +import AlignRightIcon from '@stories/icons/Mono/AlignRightIcon.vue'; +import AnchorIcon from '@stories/icons/Mono/AnchorIcon.vue'; +import AnchorLinkIcon from '@stories/icons/Mono/AnchorLinkIcon.vue'; +import ArchiveIcon from '@stories/icons/Mono/ArchiveIcon.vue'; +import ArrowForwardIcon from '@stories/icons/Mono/ArrowForwardIcon.vue'; +import ArrowLeftIcon from '@stories/icons/Mono/ArrowLeftIcon.vue'; +import ArrowRightIcon from '@stories/icons/Mono/ArrowRightIcon.vue'; +import ArrowsVerticalIcon from '@stories/icons/Mono/ArrowsVerticalIcon.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 CalendarAddIcon from '@stories/icons/Mono/CalendarAddIcon.vue'; +import CalendarIcon from '@stories/icons/Mono/CalendarIcon.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 CrossCircleIcon from '@stories/icons/Mono/CrossCircleIcon.vue'; +import CropIcon from '@stories/icons/Mono/CropIcon.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 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 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 DocumentAddIcon from '@stories/icons/Mono/DocumentAddIcon.vue'; +import DocumentDeleteIcon from '@stories/icons/Mono/DocumentDeleteIcon.vue'; +import DocumentEditIcon from '@stories/icons/Mono/DocumentEditIcon.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 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 EncyclopediaIcon from '@stories/icons/Mono/EncyclopediaIcon.vue'; +import ExitIcon from '@stories/icons/Mono/ExitIcon.vue'; +import EyeIcon from '@stories/icons/Mono/EyeIcon.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 ImageIcon from '@stories/icons/Mono/ImageIcon.vue'; +import ImageEditIcon from '@stories/icons/Mono/ImageEditIcon.vue'; +import LineIcon from '@stories/icons/Mono/LineIcon.vue'; +import LineDashedIcon from '@stories/icons/Mono/LineDashedIcon.vue'; +import LineDottedIcon from '@stories/icons/Mono/LineDottedIcon.vue'; +import LineDiagonalIcon from '@stories/icons/Mono/LineDiagonalIcon.vue'; +import MoveIcon from '@stories/icons/Mono/MoveIcon.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 TableIcon from '@stories/icons/Mono/TableIcon.vue'; +import TrashIcon from '@stories/icons/Mono/TrashIcon.vue'; +import UserIcon from '@stories/icons/Mono/UserIcon.vue'; +import TriangleIcon from '@stories/icons/Mono/TriangleIcon.vue'; + +export const iconsSet: Record = { + Age18Icon: Age18Icon, + AirplaneIcon: AirplaneIcon, + AlarmIcon: AlarmIcon, + AlignCenterIcon: AlignCenterIcon, + AlignLeftIcon: AlignLeftIcon, + AlignRightIcon: AlignRightIcon, + AnchorIcon: AnchorIcon, + AnchorLinkIcon: AnchorLinkIcon, + ArchiveIcon: ArchiveIcon, + ArrowForwardIcon: ArrowForwardIcon, + ArrowLeftIcon: ArrowLeftIcon, + ArrowRightIcon: ArrowRightIcon, + ArrowsVerticalIcon: ArrowsVerticalIcon, + AtIcon: AtIcon, + AwardIcon: AwardIcon, + BackspaceIcon: BackspaceIcon, + BadgeIcon: BadgeIcon, + BallFootballIcon: BallFootballIcon, + BallIcon: BallIcon, + BanknoteIcon: BanknoteIcon, + BellIcon: BellIcon, + BellOffIcon: BellOffIcon, + BoxIcon: BoxIcon, + BrightnessIcon: BrightnessIcon, + BulbIcon: BulbIcon, + CalculatorIcon: CalculatorIcon, + CalendarAddIcon: CalendarAddIcon, + CalendarIcon: CalendarIcon, + CalendarRemoveIcon: CalendarRemoveIcon, + CardsIcon: CardsIcon, + ChartLineIcon: ChartLineIcon, + ChartPieIcon: ChartPieIcon, + ChatIcon: ChatIcon, + ChatWritingIcon: ChatWritingIcon, + CheckmarkIcon: CheckmarkIcon, + ChemistryFlaskIcon: ChemistryFlaskIcon, + CodeIcon: CodeIcon, + CoinsIcon: CoinsIcon, + ColorPaletteIcon: ColorPaletteIcon, + CompassIcon: CompassIcon, + ConstructionWorkerIcon: ConstructionWorkerIcon, + ContactsIcon: ContactsIcon, + CropIcon: CropIcon, + CrossIcon: CrossIcon, + CrossCircleIcon: CrossCircleIcon, + CubeIcon: CubeIcon, + CupIcon: CupIcon, + CursorIcon: CursorIcon, + DiamondIcon: DiamondIcon, + DiaryIcon: DiaryIcon, + DiceIcon: DiceIcon, + DigIcon: DigIcon, + DislikeIcon: DislikeIcon, + DisplayIcon: DisplayIcon, + DocumentIcon: DocumentIcon, + DocumentAddIcon: DocumentAddIcon, + DocumentDeleteIcon: DocumentDeleteIcon, + DocumentEditIcon: DocumentEditIcon, + DollarIcon: DollarIcon, + DotsHorizontalIcon: DotsHorizontalIcon, + DotsVerticalIcon: DotsVerticalIcon, + DownloadIcon: DownloadIcon, + DropIcon: DropIcon, + DumbbelIcon: DumbbelIcon, + EarthIcon: EarthIcon, + EditIcon: EditIcon, + EncyclopediaIcon: EncyclopediaIcon, + ExitIcon: ExitIcon, + EyeIcon: EyeIcon, + FeedbackIcon: FeedbackIcon, + FilterIcon: FilterIcon, + FingerprintIcon: FingerprintIcon, + FireIcon: FireIcon, + FlagIcon: FlagIcon, + FlashIcon: FlashIcon, + FlashlightIcon: FlashlightIcon, + FolderLockIcon: FolderLockIcon, + FrameIcon: FrameIcon, + FullScreenIcon: FullScreenIcon, + GameControllerIcon: GameControllerIcon, + GiftIcon: GiftIcon, + GlassesIcon: GlassesIcon, + HamburgerIcon: HamburgerIcon, + HandIcon: HandIcon, + HomeIcon: HomeIcon, + ImageIcon: ImageIcon, + ImageEditIcon: ImageEditIcon, + LineIcon: LineIcon, + LineDashedIcon: LineDashedIcon, + LineDottedIcon: LineDottedIcon, + LineDiagonalIcon: LineDiagonalIcon, + MoveIcon: MoveIcon, + ParagraphIcon: ParagraphIcon, + PhoneHandsetIcon: PhoneHandsetIcon, + PlusCircleIcon: PlusCircleIcon, + PlusIcon: PlusIcon, + PointerIcon: PointerIcon, + SaveIcon: SaveIcon, + SettingsIcon: SettingsIcon, + TableIcon: TableIcon, + TrashIcon: TrashIcon, + TriangleIcon: TriangleIcon, + UserIcon: UserIcon, +}; diff --git a/src/common/helpers/colors.ts b/src/common/helpers/colors.ts new file mode 100644 index 0000000000000000000000000000000000000000..5ec5279ec225be5b688403176bbad63de75f1cbf --- /dev/null +++ b/src/common/helpers/colors.ts @@ -0,0 +1,117 @@ +export const convert300ThemeToColor = (theme: string | undefined) => { + switch (theme) { + case 'white': + return '#cbd5e1'; + case 'slate': + return '#cbd5e1'; + case 'blue': + return '#93c5fd'; + case 'sky': + return '#7dd3fc'; + case 'teal': + return '#5eead4'; + case 'lime': + return '#bef264'; + case 'green': + return '#86efac'; + case 'yellow': + return '#fde047'; + case 'amber': + return '#fcd34d'; + case 'orange': + return '#fdba74'; + case 'pink': + return '#ec4899'; + case 'fuchsia': + return '#f0abfc'; + case 'purple': + return '#d8b4fe'; + case 'indigo': + return '#a5b4fc'; + case 'rose': + return '#fda4af'; + case 'red': + return '#fca5a5'; + case 'black': + return '#334155'; + } +}; + +export const convert500ThemeToColor = (theme: string | undefined) => { + switch (theme) { + case 'white': + return '#ffffff'; + case 'slate': + return '#64748b'; + case 'blue': + return '#3b82f6'; + case 'sky': + return '#0ea5e9'; + case 'teal': + return '#14b8a6'; + case 'lime': + return '#84cc16'; + case 'green': + return '#22c55e'; + case 'yellow': + return '#eab308'; + case 'amber': + return '#f59e0b'; + case 'orange': + return '#f97316'; + case 'pink': + return '#ec4899'; + case 'fuchsia': + return '#d946ef'; + case 'purple': + return '#a855f7'; + case 'indigo': + return '#6366f1'; + case 'rose': + return '#f43f5e'; + case 'red': + return '#ef4444'; + case 'black': + return '#000000'; + } + return '#000000'; +}; + +export const convert800ThemeToColor = (theme: string | undefined) => { + switch (theme) { + case 'white': + return '#ffffff'; + case 'slate': + return '#1e293b'; + case 'blue': + return '#1e40af'; + case 'sky': + return '#075985'; + case 'teal': + return '#115e59'; + case 'lime': + return '#3f6212'; + case 'green': + return '#166534'; + case 'yellow': + return '#854d0e'; + case 'amber': + return '#92400e'; + case 'orange': + return '#9a3412'; + case 'pink': + return '#9d174d'; + case 'fuchsia': + return '#86198f'; + case 'purple': + return '#6b21a8'; + case 'indigo': + return '#3730a3'; + case 'rose': + return '#9f1239'; + case 'red': + return '#991b1b'; + case 'black': + return '#000000'; + } +}; diff --git a/src/common/interfaces/common.ts b/src/common/interfaces/common.ts new file mode 100644 index 0000000000000000000000000000000000000000..7ff7e70be1d1b1a5f75dae47b36135593e55b09c --- /dev/null +++ b/src/common/interfaces/common.ts @@ -0,0 +1,34 @@ +import type { iconsSet } from '@/common/constants/icons'; + +export type TThemeColor = + | 'white' + | 'slate' + | 'blue' + | 'sky' + | 'teal' + | 'green' + | 'yellow' + | 'orange' + | 'pink' + | 'fuchsia' + | 'purple' + | 'indigo' + | 'rose' + | 'red' + | 'black'; + +export type TThemeColorNoWhite = Exclude; + +export type TSize = 'small' | 'medium' | 'large' | 'huge'; + +export type TTextStyle = 'bold' | 'italic'; + +export type TDirection = 'up' | 'right' | 'down' | 'left'; + +export type TPosition = 'top' | 'right' | 'bottom' | 'left'; + +export type TExpandedPosition = TPosition | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'; + +export type TBorder = 'solid' | 'dashed' | 'dotted'; + +export type TIcons = keyof typeof iconsSet; diff --git a/src/common/interfaces/componentsProp.ts b/src/common/interfaces/componentsProp.ts new file mode 100644 index 0000000000000000000000000000000000000000..1f0e3c306f006ef5c98664440d53df2ecb17db4a --- /dev/null +++ b/src/common/interfaces/componentsProp.ts @@ -0,0 +1,32 @@ +import type { TIcons, TPosition, TTextStyle, TThemeColor } from '@interfaces/common'; + +export interface ITreeItem { + label: string; + link?: string; + linkBlank?: boolean; + color?: TThemeColor; + textStyle?: TTextStyle; + isTriangleToColor?: boolean; + iconBefore?: TIcons; + iconAfter?: TIcons; + iconColor?: TThemeColor; + children?: ITreeItem[]; + isLinkClicked?: boolean; +} + +export interface ISBOption { + label: string; + value?: never; + color?: TThemeColor; + activeColor?: TThemeColor; + backgroundColor?: TThemeColor; + isLabelHidden?: boolean; + iconPosition?: TPosition; + textStyle?: TTextStyle; +} + +export interface ISliderOptions { + label: string | number; + value?: string | number; + color?: string; +} diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts new file mode 100644 index 0000000000000000000000000000000000000000..8d663ab5a251804b593200f44f06cc24c09cd124 --- /dev/null +++ b/src/common/interfaces/componentsProps.ts @@ -0,0 +1,113 @@ +import type { + TBorder, + TDirection, + TExpandedPosition, + TIcons, + TPosition, + TSize, + TTextStyle, + TThemeColor, + TThemeColorNoWhite, +} from '@interfaces/common'; +import type { ISBOption, ISliderOptions, ITreeItem } from '@interfaces/componentsProp'; + +export interface ITLProps { + items: ITreeItem[]; + maxWidth?: number; + expand?: boolean; + theme?: TThemeColor; +} + +export interface ITIProps { + state: { + isOpen: boolean; + label: string; + }[]; + items: ITreeItem[]; + textColor: TThemeColor; + themeColor: string; +} + +export interface IMDProps { + items: { + label: string; + theme?: string; + textStyle?: TTextStyle; + link?: string; + linkBlank?: boolean; + onClick?: () => void; + }[]; + size?: TSize; + theme?: string; + direction?: TDirection; + // direction?: TDirection | 'circle'; +} + +export interface ISliderProps { + width?: string | number; + min?: string | number; + max?: string | number; + step?: string | number; + size?: TSize; + theme?: TThemeColor; + backgroundColor?: TThemeColor; + orientation?: 'horizontal' | 'vertical'; + isSmooth?: boolean; + options?: ISliderOptions[]; +} + +export interface IDrawerProps { + position?: TPosition; + width?: string | number; + theme?: TThemeColor; + modal?: boolean; + dismissible?: boolean; + closeIcon?: TIcons; + headerDivider?: boolean; + footerDivider?: boolean; +} + +export interface IModalProps { + theme?: TThemeColor; + width?: string; + height?: string; + position?: TExpandedPosition; + dismissible?: boolean; + closeIcon?: TIcons; + headerDivider?: boolean; +} + +export interface ISBProps { + options: ISBOption[]; + size?: TSize; + rounded?: boolean; + activeBackgroundColor?: TThemeColor; + border?: TThemeColor; + disabled?: boolean; +} + +export interface IButtonProps { + label?: string; + size?: TSize; + textStyle?: TTextStyle; + iconPos?: TPosition; + width?: string | number; + theme?: TThemeColor; + textColor?: TThemeColor; + border?: TThemeColor; + iconOnly?: boolean; +} + +export interface ITSProps { + size?: TSize; + theme?: TThemeColorNoWhite; + negativeTheme?: TThemeColor; + darkNegative?: boolean; + disabled?: boolean; +} + +export interface IDividerProps { + height?: number; + type?: TBorder; + color?: TThemeColor; +} diff --git a/src/main.ts b/src/main.ts index 0ac3a5ff0ceea45d1a9066b2df477773977a338b..b05b45f90ef9150f51d190fb429151a2808aeef8 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,6 +1,6 @@ -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'); diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts deleted file mode 100644 index fb8a318614c626cafecd6a1e6e374c1d68069c1a..0000000000000000000000000000000000000000 --- a/src/stories/Button.stories.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { fn } from '@storybook/test' -import type { Meta, StoryObj } from '@storybook/vue3' - -import Button from './Button.vue' - -// More on how to set up stories at: https://storybook.js.org/docs/writing-stories -const meta = { - title: 'Example/Button', - component: Button, - // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs - tags: ['autodocs'], - argTypes: { - size: { control: 'select', options: ['small', 'medium', 'large'] }, - backgroundColor: { control: 'color' }, - }, - args: { - primary: false, - // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args - onClick: fn(), - }, -} satisfies Meta - -export default meta -type Story = StoryObj -/* - *👇 Render functions are a framework specific feature to allow you control on how the component renders. - * See https://storybook.js.org/docs/api/csf - * to learn how to use render functions. - */ -export const Primary: Story = { - args: { - primary: true, - label: 'Button', - }, -} - -export const Secondary: Story = { - args: { - primary: false, - label: 'Button', - }, -} - -export const Large: Story = { - args: { - label: 'Button', - size: 'large', - }, -} - -export const Small: Story = { - args: { - label: 'Button', - size: 'small', - }, -} - -export const DefaultButton: Story = { - args: { - primary: false, - label: 'Button', - }, -} diff --git a/src/stories/Button.vue b/src/stories/Button.vue deleted file mode 100644 index 2e1ee0ee22f3c6d8a825e13b6405a5761117f43c..0000000000000000000000000000000000000000 --- a/src/stories/Button.vue +++ /dev/null @@ -1,48 +0,0 @@ - - - \ No newline at end of file diff --git a/src/stories/Configure.mdx b/src/stories/Configure.mdx deleted file mode 100644 index 347315a5036537c97581652fbd19a72c549e096d..0000000000000000000000000000000000000000 --- a/src/stories/Configure.mdx +++ /dev/null @@ -1,364 +0,0 @@ -import { Meta } from "@storybook/blocks"; - -import Github from "./assets/github.svg"; -import Discord from "./assets/discord.svg"; -import Youtube from "./assets/youtube.svg"; -import Tutorials from "./assets/tutorials.svg"; -import Styling from "./assets/styling.png"; -import Context from "./assets/context.png"; -import Assets from "./assets/assets.png"; -import Docs from "./assets/docs.png"; -import Share from "./assets/share.png"; -import FigmaPlugin from "./assets/figma-plugin.png"; -import Testing from "./assets/testing.png"; -import Accessibility from "./assets/accessibility.png"; -import Theming from "./assets/theming.png"; -import AddonLibrary from "./assets/addon-library.png"; - -export const RightArrow = () => - - - - - -
-
- # Configure your project - - Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community. -
-
-
- A wall of logos representing different styling technologies -

Add styling and CSS

-

Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.

- Learn more -
-
- An abstraction representing the composition of data for a component -

Provide context and mocking

-

Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.

- Learn more -
-
- A representation of typography and image assets -
-

Load assets and resources

-

To link static files (like fonts) to your projects and stories, use the - `staticDirs` configuration option to specify folders to load when - starting Storybook.

- Learn more -
-
-
-
-
-
- # Do more with Storybook - - Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs. -
- -
-
-
- A screenshot showing the autodocs tag being set, pointing a docs page being generated -

Autodocs

-

Auto-generate living, - interactive reference documentation from your components and stories.

- Learn more -
-
- A browser window showing a Storybook being published to a chromatic.com URL -

Publish to Chromatic

-

Publish your Storybook to review and collaborate with your entire team.

- Learn more -
-
- Windows showing the Storybook plugin in Figma -

Figma Plugin

-

Embed your stories into Figma to cross-reference the design and live - implementation in one place.

- Learn more -
-
- Screenshot of tests passing and failing -

Testing

-

Use stories to test a component in all its variations, no matter how - complex.

- Learn more -
-
- Screenshot of accessibility tests passing and failing -

Accessibility

-

Automatically test your components for a11y issues as you develop.

- Learn more -
-
- Screenshot of Storybook in light and dark mode -

Theming

-

Theme Storybook's UI to personalize it to your project.

- Learn more -
-
-
-
-
-
-

Addons

-

Integrate your tools with Storybook to connect workflows.

- Discover all addons -
-
- Integrate your tools with Storybook to connect workflows. -
-
- -
-
- Github logo - Join our contributors building the future of UI development. - - Star on GitHub -
-
- Discord logo -
- Get support and chat with frontend developers. - - Join Discord server -
-
-
- Youtube logo -
- Watch tutorials, feature previews and interviews. - - Watch on YouTube -
-
-
- A book -

Follow guided walkthroughs on for key workflows.

- - Discover tutorials -
-
- - diff --git a/src/stories/Header.stories.ts b/src/stories/Header.stories.ts deleted file mode 100644 index f0cf6d03459022ec46f20e6433af04a6a84a735c..0000000000000000000000000000000000000000 --- a/src/stories/Header.stories.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { fn } from '@storybook/test'; -import type { Meta, StoryObj } from '@storybook/vue3'; - -import MyHeader from './Header.vue'; - -const meta = { - /* 👇 The title prop is optional. - * See https://storybook.js.org/docs/configure/#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'Example/Header', - component: MyHeader, - render: (args: any) => ({ - components: { MyHeader }, - setup() { - return { args }; - }, - template: '', - }), - parameters: { - // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout - layout: 'fullscreen', - }, - args: { - onLogin: fn(), - onLogout: fn(), - onCreateAccount: fn(), - }, - // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs - tags: ['autodocs'], -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const LoggedIn: Story = { - args: { - user: { - name: 'Jane Doe', - }, - }, -}; - -export const LoggedOut: Story = { - args: { - user: null, - }, -}; diff --git a/src/stories/Header.vue b/src/stories/Header.vue deleted file mode 100644 index b716db02b3f5102cc7a67fb3216a5a20974c254e..0000000000000000000000000000000000000000 --- a/src/stories/Header.vue +++ /dev/null @@ -1,37 +0,0 @@ - - - - diff --git a/src/stories/Page.stories.ts b/src/stories/Page.stories.ts deleted file mode 100644 index 525870f15307bfb0ee0c43f3aa43c4301cedad6c..0000000000000000000000000000000000000000 --- a/src/stories/Page.stories.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { expect, userEvent, within } from '@storybook/test'; -import type { Meta, StoryObj } from '@storybook/vue3'; - -import MyPage from './Page.vue'; - -const meta = { - title: 'Example/Page', - component: MyPage, - render: () => ({ - components: { MyPage }, - template: '', - }), - parameters: { - // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout - layout: 'fullscreen', - }, - // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs - tags: ['autodocs'], -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing -export const LoggedIn: Story = { - play: async ({ canvasElement }: any) => { - const canvas = within(canvasElement); - const loginButton = canvas.getByRole('button', { name: /Log in/i }); - await expect(loginButton).toBeInTheDocument(); - await userEvent.click(loginButton); - await expect(loginButton).not.toBeInTheDocument(); - - const logoutButton = canvas.getByRole('button', { name: /Log out/i }); - await expect(logoutButton).toBeInTheDocument(); - }, -}; - -export const LoggedOut: Story = {}; diff --git a/src/stories/Page.vue b/src/stories/Page.vue deleted file mode 100644 index 6a6e5eb1a4afd1b9768d61c6641e0b03ba82c97d..0000000000000000000000000000000000000000 --- a/src/stories/Page.vue +++ /dev/null @@ -1,73 +0,0 @@ - - - diff --git a/src/stories/assets/accessibility.png b/src/stories/assets/accessibility.png deleted file mode 100644 index 6ffe6feabdc17f715771b69fd7f33ec2c57e7c30..0000000000000000000000000000000000000000 Binary files a/src/stories/assets/accessibility.png and /dev/null differ diff --git a/src/stories/assets/accessibility.svg b/src/stories/assets/accessibility.svg deleted file mode 100644 index 107e93f838409ec8f8cd2f41eb89bf981c107009..0000000000000000000000000000000000000000 --- a/src/stories/assets/accessibility.svg +++ /dev/null @@ -1 +0,0 @@ -Accessibility \ No newline at end of file diff --git a/src/stories/assets/addon-library.png b/src/stories/assets/addon-library.png deleted file mode 100644 index 95deb38a88de416671e20ebc28dcd397d6910331..0000000000000000000000000000000000000000 Binary files a/src/stories/assets/addon-library.png and /dev/null differ diff --git a/src/stories/assets/assets.png b/src/stories/assets/assets.png deleted file mode 100644 index cfba6817aeb60fe5eac1f632b703b18da0ec8759..0000000000000000000000000000000000000000 Binary files a/src/stories/assets/assets.png and /dev/null differ diff --git a/src/stories/assets/avif-test-image.avif b/src/stories/assets/avif-test-image.avif deleted file mode 100644 index 530709bc1217efa55381695b81007deaababe82d..0000000000000000000000000000000000000000 Binary files a/src/stories/assets/avif-test-image.avif and /dev/null differ diff --git a/src/stories/assets/context.png b/src/stories/assets/context.png deleted file mode 100644 index e5cd249a2d3adb58bd4c557405c9c1c0a4c340ee..0000000000000000000000000000000000000000 Binary files a/src/stories/assets/context.png and /dev/null differ diff --git a/src/stories/assets/discord.svg b/src/stories/assets/discord.svg deleted file mode 100644 index d638958b66deab5c09daf517f4a6b5ed1d3b6ba6..0000000000000000000000000000000000000000 --- a/src/stories/assets/discord.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/stories/assets/docs.png b/src/stories/assets/docs.png deleted file mode 100644 index a749629df9ef3b4e20b86ab1a2482040df3ce8dd..0000000000000000000000000000000000000000 Binary files a/src/stories/assets/docs.png and /dev/null differ diff --git a/src/stories/assets/figma-plugin.png b/src/stories/assets/figma-plugin.png deleted file mode 100644 index 8f79b08cdf28f568a9bfc9d2fee39bd85d4831e3..0000000000000000000000000000000000000000 Binary files a/src/stories/assets/figma-plugin.png and /dev/null differ diff --git a/src/stories/assets/github.svg b/src/stories/assets/github.svg deleted file mode 100644 index dc513528ca899d698d55418bd3a39c036d01e21e..0000000000000000000000000000000000000000 --- a/src/stories/assets/github.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/stories/assets/share.png b/src/stories/assets/share.png deleted file mode 100644 index 8097a370777a782bbe52082a338584d04e62e796..0000000000000000000000000000000000000000 Binary files a/src/stories/assets/share.png and /dev/null differ diff --git a/src/stories/assets/styling.png b/src/stories/assets/styling.png deleted file mode 100644 index d341e8263e403615dadaa6ffc5fb7604837357f8..0000000000000000000000000000000000000000 Binary files a/src/stories/assets/styling.png and /dev/null differ diff --git a/src/stories/assets/testing.png b/src/stories/assets/testing.png deleted file mode 100644 index d4ac39a0ced924068b7625735c9bccac7b17f45d..0000000000000000000000000000000000000000 Binary files a/src/stories/assets/testing.png and /dev/null differ diff --git a/src/stories/assets/theming.png b/src/stories/assets/theming.png deleted file mode 100644 index 1535eb9b8192efc0992daf0a0adc1d424660890d..0000000000000000000000000000000000000000 Binary files a/src/stories/assets/theming.png and /dev/null differ diff --git a/src/stories/assets/tutorials.svg b/src/stories/assets/tutorials.svg deleted file mode 100644 index b492a9c66f7f9e077006618889d18d3d1a7473dd..0000000000000000000000000000000000000000 --- a/src/stories/assets/tutorials.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/stories/assets/youtube.svg b/src/stories/assets/youtube.svg deleted file mode 100644 index a7515d7e9b37fb70bc23d5b87e55ad11f2f77213..0000000000000000000000000000000000000000 --- a/src/stories/assets/youtube.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/stories/button.css b/src/stories/button.css deleted file mode 100644 index 94d674b7614d9ccd5d005df17fdb2a7c2bc287f4..0000000000000000000000000000000000000000 --- a/src/stories/button.css +++ /dev/null @@ -1,30 +0,0 @@ -.storybook-button { - display: inline-block; - cursor: pointer; - border: 0; - border-radius: 3em; - font-weight: 700; - line-height: 1; - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; -} -.storybook-button--primary { - background-color: #1ea7fd; - color: white; -} -.storybook-button--secondary { - box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; - background-color: transparent; - color: #333; -} -.storybook-button--small { - padding: 10px 16px; - font-size: 12px; -} -.storybook-button--medium { - padding: 11px 20px; - font-size: 14px; -} -.storybook-button--large { - padding: 12px 24px; - font-size: 16px; -} diff --git a/src/stories/components/Button/Button.stories.ts b/src/stories/components/Button/Button.stories.ts new file mode 100644 index 0000000000000000000000000000000000000000..bdbacf43e8e2de1c35b2a953afda4b6278444e16 --- /dev/null +++ b/src/stories/components/Button/Button.stories.ts @@ -0,0 +1,105 @@ +import type { Meta, StoryObj } from '@storybook/vue3'; + +import Button from './Button.vue'; + +const meta: Meta = { + title: 'Components/Button', + component: Button, + tags: ['autodocs'], + parameters: { + docs: { + description: { + component: 'A component that is used as a button. Can be used with icon.', + }, + }, + }, + argTypes: { + label: { control: 'text' }, + size: { control: 'select', options: ['small', 'medium', 'large', 'huge'] }, + textStyle: { control: 'select', options: ['bold', 'italic'] }, + iconPos: { control: 'select', options: ['left', 'top', 'right', 'bottom'] }, + width: { control: 'text' }, + theme: { + control: 'select', + options: [ + 'white', + 'slate', + 'blue', + 'sky', + 'teal', + 'green', + 'yellow', + 'orange', + 'pink', + 'fuchsia', + 'purple', + 'indigo', + 'rose', + 'red', + 'black', + ], + }, + textColor: { + control: 'select', + options: [ + 'white', + 'slate', + 'blue', + 'sky', + 'teal', + 'green', + 'yellow', + 'orange', + 'pink', + 'fuchsia', + 'purple', + 'indigo', + 'rose', + 'red', + 'black', + ], + }, + border: { + control: 'select', + options: [ + 'white', + 'slate', + 'blue', + 'sky', + 'teal', + 'green', + 'yellow', + 'orange', + 'pink', + 'fuchsia', + 'purple', + 'indigo', + 'rose', + 'red', + 'black', + ], + }, + }, + args: {}, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: {}, +}; + +export const LargeFull: Story = { + args: { + label: 'Press me!', + size: 'large', + textStyle: 'bold', + iconPos: 'left', + width: '200', + theme: 'sky', + textColor: 'white', + border: 'black', + }, +}; diff --git a/src/stories/components/Button/Button.vue b/src/stories/components/Button/Button.vue new file mode 100644 index 0000000000000000000000000000000000000000..cef4d5580cf028204bf2d801c0f90ad95706f798 --- /dev/null +++ b/src/stories/components/Button/Button.vue @@ -0,0 +1,122 @@ + + + + + diff --git a/src/stories/components/Divider/Divider.stories.ts b/src/stories/components/Divider/Divider.stories.ts new file mode 100644 index 0000000000000000000000000000000000000000..b7a635072f60e90f550c45dec65c27d0e215c77e --- /dev/null +++ b/src/stories/components/Divider/Divider.stories.ts @@ -0,0 +1,61 @@ +import type { Meta, StoryObj } from '@storybook/vue3'; + +import Divider from './Divider.vue'; + +const meta: Meta = { + title: 'Components/Divider', + component: Divider, + tags: ['autodocs'], + parameters: { + docs: { + description: { + component: 'A component that is used to separate content.', + }, + }, + }, + argTypes: { + height: { control: 'number' }, + type: { control: 'select', options: ['solid', 'dashed', 'dotted'] }, + color: { + control: 'select', + options: [ + 'white', + 'slate', + 'blue', + 'sky', + 'teal', + 'green', + 'yellow', + 'orange', + 'pink', + 'fuchsia', + 'purple', + 'indigo', + 'rose', + 'red', + 'black', + ], + }, + }, + args: {}, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; +/* + *👇 Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/api/csf + * to learn how to use render functions. + */ +export const Primary: Story = { + args: {}, +}; + +export const RedDashed: Story = { + args: { + height: 2, + color: 'red', + type: 'dashed', + }, +}; diff --git a/src/stories/components/Divider/Divider.vue b/src/stories/components/Divider/Divider.vue new file mode 100644 index 0000000000000000000000000000000000000000..54164cd1f5d957799855c0581e2c182949ce2cea --- /dev/null +++ b/src/stories/components/Divider/Divider.vue @@ -0,0 +1,18 @@ + + + + + diff --git a/src/stories/components/Drawer/Drawer.stories.ts b/src/stories/components/Drawer/Drawer.stories.ts new file mode 100644 index 0000000000000000000000000000000000000000..cd0c0de42a74321505e837c0b8647ea3ddfb567c --- /dev/null +++ b/src/stories/components/Drawer/Drawer.stories.ts @@ -0,0 +1,81 @@ +import type { Meta, StoryObj } from '@storybook/vue3'; + +import Drawer from './Drawer.vue'; +import { iconsSet } from '@/common/constants/icons'; + +const meta: Meta = { + title: 'Components/Drawer', + component: Drawer, + tags: ['autodocs'], + parameters: { + docs: { + description: { + component: 'A component that displayed as an overlay. Can be used as a sidebar or tooltip.', + }, + }, + }, + argTypes: { + visible: { control: 'boolean' }, + position: { control: 'select', options: ['left', 'right', 'top', 'bottom'] }, + width: { control: 'number' }, + header: { control: 'text' }, + default: { control: 'text' }, + footer: { control: 'text' }, + modal: { control: 'boolean' }, + dismissible: { control: 'boolean' }, + closeIcon: { control: 'select', options: Object.keys(iconsSet) }, + headerDivider: { control: 'boolean' }, + footerDivider: { control: 'boolean' }, + theme: { + control: 'select', + options: [ + 'white', + 'slate', + 'blue', + 'sky', + 'teal', + 'green', + 'yellow', + 'orange', + 'pink', + 'fuchsia', + 'purple', + 'indigo', + 'rose', + 'red', + 'black', + ], + }, + }, + args: {}, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: { + visible: true, + default: 'Какой-то текст.', + }, +}; + +export const BlackFull: Story = { + args: { + visible: true, + width: 200, + theme: 'black', + closeIcon: 'CrossIcon', + header: 'Drawer', + footer: 'The end.', + headerDivider: true, + footerDivider: true, + + default: + ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto dicta dolorum eaque explicabo illo. Beatae et eveniet itaque libero sint. Atque blanditiis consequuntur dolorum explicabo, facilis iste nulla numquam provident.', + + modal: false, + dismissible: false, + }, +}; diff --git a/src/stories/components/Drawer/Drawer.vue b/src/stories/components/Drawer/Drawer.vue new file mode 100644 index 0000000000000000000000000000000000000000..913796fe566dac8f8657b5fd6dfebc04f98ec446 --- /dev/null +++ b/src/stories/components/Drawer/Drawer.vue @@ -0,0 +1,181 @@ + + + + diff --git a/src/stories/components/MenuDial/MenuDial.stories.ts b/src/stories/components/MenuDial/MenuDial.stories.ts new file mode 100644 index 0000000000000000000000000000000000000000..a91196a0ff882e4feb5fa05f244d7dd8cdd7f20a --- /dev/null +++ b/src/stories/components/MenuDial/MenuDial.stories.ts @@ -0,0 +1,81 @@ +import type { Meta, StoryObj } from '@storybook/vue3'; + +import MenuDial from './MenuDial.vue'; + +const meta: Meta = { + title: 'Components/MenuDial', + component: MenuDial, + tags: ['autodocs'], + parameters: { + docs: { + description: { + component: 'A component that represents a button with a drop-down list.', + }, + }, + }, + argTypes: { + items: { control: 'object' }, + size: { control: 'select', options: ['small', 'medium', 'large', 'huge'] }, + direction: { control: 'select', options: ['top', 'bottom', 'left', 'right'] }, + theme: { + control: 'select', + options: [ + 'white', + 'slate', + 'blue', + 'sky', + 'teal', + 'green', + 'yellow', + 'orange', + 'pink', + 'fuchsia', + 'purple', + 'indigo', + 'rose', + 'red', + 'black', + ], + }, + }, + args: {}, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: { + items: [ + { + label: 'First', + }, + { + label: 'Second', + }, + ], + + theme: 'white', + }, +}; + +export const Full: Story = { + args: { + items: [ + { + label: 'font-family link', + theme: 'green', + link: 'https://developer.mozilla.org/en-US/docs/Web/CSS/font-family', + linkBlank: true, + }, + { + label: 'Second', + theme: 'green', + textStyle: 'italic', + }, + ], + + theme: 'sky', + }, +}; diff --git a/src/stories/components/MenuDial/MenuDial.vue b/src/stories/components/MenuDial/MenuDial.vue new file mode 100644 index 0000000000000000000000000000000000000000..5b541296d9ac86f579c62cbecc79291ca8788bc7 --- /dev/null +++ b/src/stories/components/MenuDial/MenuDial.vue @@ -0,0 +1,162 @@ + + + + + diff --git a/src/stories/components/Modal/Modal.stories.ts b/src/stories/components/Modal/Modal.stories.ts new file mode 100644 index 0000000000000000000000000000000000000000..b23779a6d548c112db0372571eb43b2e7a0ba5c3 --- /dev/null +++ b/src/stories/components/Modal/Modal.stories.ts @@ -0,0 +1,91 @@ +import type { Meta, StoryObj } from '@storybook/vue3'; + +import Modal from './Modal.vue'; +import { iconsSet } from '@/common/constants/icons'; + +const meta: Meta = { + title: 'Components/Modal', + component: Modal, + tags: ['autodocs'], + parameters: { + docs: { + description: { + component: 'A container to display content in an overlay window.', + }, + }, + }, + argTypes: { + visible: { control: 'boolean' }, + width: { control: 'text' }, + height: { control: 'text' }, + header: { control: 'text' }, + default: { control: 'text' }, + headerDivider: { control: 'boolean' }, + dismissible: { control: 'boolean' }, + closeIcon: { control: 'select', options: Object.keys(iconsSet) }, + position: { + control: 'select', + options: [ + 'top', + 'right', + 'bottom', + 'left', + 'topLeft', + 'topRight', + 'bottomLeft', + 'bottomRight', + ], + }, + theme: { + control: 'select', + options: [ + 'white', + 'slate', + 'blue', + 'sky', + 'teal', + 'green', + 'yellow', + 'orange', + 'pink', + 'fuchsia', + 'purple', + 'indigo', + 'rose', + 'red', + 'black', + ], + }, + }, + args: {}, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: { + visible: true, + header: 'Modal', + default: 'This is a modal.', + }, +}; + +export const Full: Story = { + args: { + visible: true, + header: 'Modal with veeeeeery long content', + + default: + 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis consectetur consequuntur, culpa doloremque eaque est et hic in laudantium magni, maxime modi necessitatibus odit officia praesentium recusandae reiciendis velit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis consectetur consequuntur, culpa doloremque eaque est et hic in laudantium magni, maxime modi necessitatibus odit officia praesentium recusandae reiciendis velit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis consectetur consequuntur, culpa doloremque eaque est et hic in laudantium magni, maxime modi necessitatibus odit officia praesentium recusandae reiciendis velit.\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis consectetur consequuntur, culpa doloremque eaque est et hic in laudantium magni, maxime modi necessitatibus odit officia praesentium recusandae reiciendis velit.\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis consectetur consequuntur, culpa doloremque eaque est et hic in laudantium magni, maxime modi necessitatibus odit officia praesentium recusandae reiciendis velit.\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis consectetur consequuntur, culpa doloremque eaque est et hic in laudantium magni, maxime modi necessitatibus odit officia praesentium recusandae reiciendis velit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis consectetur consequuntur, culpa doloremque eaque est et hic in laudantium magni, maxime modi necessitatibus odit officia praesentium recusandae reiciendis velit.\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis consectetur consequuntur, culpa doloremque eaque est et hic in laudantium magni, maxime modi necessitatibus odit officia praesentium recusandae reiciendis velit.\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis consectetur consequuntur, culpa doloremque eaque est et hic in laudantium magni, maxime modi necessitatibus odit officia praesentium recusandae reiciendis velit.\nLorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis consectetur consequuntur, culpa doloremque eaque est et hic in laudantium magni, maxime modi necessitatibus odit officia praesentium recusandae reiciendis velit.\n\n\n', + + width: '40%', + height: '50%', + theme: 'black', + position: 'topRight', + dismissible: true, + closeIcon: 'CodeIcon', + headerDivider: true, + }, +}; diff --git a/src/stories/components/Modal/Modal.vue b/src/stories/components/Modal/Modal.vue new file mode 100644 index 0000000000000000000000000000000000000000..1ebe15a779132e088c5cd524a2edfab02dd9d1ed --- /dev/null +++ b/src/stories/components/Modal/Modal.vue @@ -0,0 +1,190 @@ + + + + + diff --git a/src/stories/components/SelectButton/SelectButton.stories.ts b/src/stories/components/SelectButton/SelectButton.stories.ts new file mode 100644 index 0000000000000000000000000000000000000000..0e7f8c88b58e34fb32461fe14996c6aa1e4046c4 --- /dev/null +++ b/src/stories/components/SelectButton/SelectButton.stories.ts @@ -0,0 +1,113 @@ +import type { Meta, StoryObj } from '@storybook/vue3'; + +import SelectButton from './SelectButton.vue'; + +const meta: Meta = { + title: 'Components/SelectButton', + component: SelectButton, + tags: ['autodocs'], + parameters: { + docs: { + description: { + component: 'A component that is used to select a value from a list using a button.', + }, + }, + }, + argTypes: { + options: { + control: 'object', + }, + size: { control: 'select', options: ['small', 'medium', 'large', 'huge'] }, + rounded: { control: 'boolean' }, + activeBackgroundColor: { + control: 'select', + options: [ + 'white', + 'slate', + 'blue', + 'sky', + 'teal', + 'green', + 'yellow', + 'orange', + 'pink', + 'fuchsia', + 'purple', + 'indigo', + 'rose', + 'red', + 'black', + ], + }, + border: { + control: 'select', + options: [ + 'white', + 'slate', + 'blue', + 'sky', + 'teal', + 'green', + 'yellow', + 'orange', + 'pink', + 'fuchsia', + 'purple', + 'indigo', + 'rose', + 'red', + 'black', + ], + }, + disabled: { control: 'boolean' }, + }, + args: {}, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: { + options: [ + { + label: 'First', + }, + { + label: 'Second', + }, + ], + + rounded: false, + disabled: false, + }, +}; + +export const LargeFull: Story = { + args: { + options: [ + { + label: 'First', + color: 'white', + backgroundColor: 'black', + }, + { + label: 'Second', + activeColor: 'blue', + backgroundColor: 'yellow', + }, + { + label: 'Third', + activeColor: 'green', + backgroundColor: 'purple', + }, + ], + + border: 'sky', + activeBackgroundColor: 'red', + rounded: true, + disabled: false, + size: 'large', + }, +}; diff --git a/src/stories/components/SelectButton/SelectButton.vue b/src/stories/components/SelectButton/SelectButton.vue new file mode 100644 index 0000000000000000000000000000000000000000..2f3761b9bd5185f7e58378dde2e5d3083b450b4b --- /dev/null +++ b/src/stories/components/SelectButton/SelectButton.vue @@ -0,0 +1,181 @@ + + + + + diff --git a/src/stories/components/Slider/Slider.stories.ts b/src/stories/components/Slider/Slider.stories.ts new file mode 100644 index 0000000000000000000000000000000000000000..d465efa91f311e07eb90f277f984c23d426e6824 --- /dev/null +++ b/src/stories/components/Slider/Slider.stories.ts @@ -0,0 +1,158 @@ +import type { Meta, StoryObj } from '@storybook/vue3'; + +import Slider from './Slider.vue'; + +const meta: Meta = { + title: 'Components/Slider', + component: Slider, + tags: ['autodocs'], + parameters: { + docs: { + description: { + component: 'A component to provide input with a drag handle.', + }, + }, + }, + argTypes: { + options: { control: 'object' }, + width: { control: 'text' }, + min: { control: 'text' }, + max: { control: 'text' }, + step: { control: 'text' }, + size: { control: 'select', options: ['small', 'medium', 'large', 'huge'] }, + orientation: { control: 'select', options: ['horizontal', 'vertical'] }, + isSmooth: { control: 'boolean' }, + theme: { + control: 'select', + options: [ + 'white', + 'slate', + 'blue', + 'sky', + 'teal', + 'green', + 'yellow', + 'orange', + 'pink', + 'fuchsia', + 'purple', + 'indigo', + 'rose', + 'red', + 'black', + ], + }, + backgroundColor: { + control: 'select', + options: [ + 'white', + 'slate', + 'blue', + 'sky', + 'teal', + 'green', + 'yellow', + 'orange', + 'pink', + 'fuchsia', + 'purple', + 'indigo', + 'rose', + 'red', + 'black', + ], + }, + }, + args: {}, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: {}, +}; + +export const Full: Story = { + args: { + min: '0', + max: '20', + step: '2', + size: 'large', + backgroundColor: 'black', + theme: 'blue', + isSmooth: true, + + options: [ + { + label: 0, + value: 0, + color: 'red', + }, + { + label: 2, + value: 2, + color: 'orange', + }, + { + label: 4, + value: 4, + color: 'yellow', + }, + { + label: 6, + value: 6, + color: 'green', + }, + { + label: 8, + value: 8, + color: 'sky', + }, + { + label: 10, + value: 10, + color: 'purple', + }, + { + label: 12, + value: 12, + color: 'purple', + }, + { + label: 14, + value: 14, + color: 'purple', + }, + { + label: 16, + value: 16, + color: 'purple', + }, + { + label: 18, + value: 18, + color: 'purple', + }, + { + label: 20, + value: 20, + color: 'purple', + }, + ], + + width: '300', + }, +}; + +export const Smooth: Story = { + args: { + max: '1000', + isSmooth: true, + width: '300', + size: 'medium', + backgroundColor: 'blue', + theme: 'black', + }, +}; diff --git a/src/stories/components/Slider/Slider.vue b/src/stories/components/Slider/Slider.vue new file mode 100644 index 0000000000000000000000000000000000000000..47b6fcb0f58697288f2c9fe7b1c9735831101f41 --- /dev/null +++ b/src/stories/components/Slider/Slider.vue @@ -0,0 +1,169 @@ + + + + + diff --git a/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts b/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts new file mode 100644 index 0000000000000000000000000000000000000000..c003e865f3bf2d5596f363b3e9cc938ca8fe645c --- /dev/null +++ b/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts @@ -0,0 +1,101 @@ +import type { Meta, StoryObj } from '@storybook/vue3'; + +import ToggleSwitch from './ToggleSwitch.vue'; + +const meta: Meta = { + title: 'Components/ToggleSwitch', + component: ToggleSwitch, + tags: ['autodocs'], + parameters: { + docs: { + description: { + component: 'A component that is used to select a boolean value.', + }, + }, + }, + argTypes: { + active: { control: 'boolean' }, + size: { control: 'select', options: ['small', 'medium', 'large', 'huge'] }, + negativeTheme: { + control: 'select', + options: [ + 'white', + 'slate', + 'blue', + 'sky', + 'teal', + 'green', + 'yellow', + 'orange', + 'pink', + 'fuchsia', + 'purple', + 'indigo', + 'rose', + 'red', + 'black', + ], + }, + theme: { + control: 'select', + options: [ + 'white', + 'slate', + 'blue', + 'sky', + 'teal', + 'green', + 'yellow', + 'orange', + 'pink', + 'fuchsia', + 'purple', + 'indigo', + 'rose', + 'red', + 'black', + ], + }, + darkNegative: { control: 'boolean' }, + disabled: { control: 'boolean' }, + }, + args: {}, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: { + darkNegative: true, + active: false, + }, +}; + +export const SmallLight: Story = { + args: { + darkNegative: false, + negativeTheme: 'yellow', + theme: 'red', + size: 'small', + }, +}; + +export const Large: Story = { + args: { + darkNegative: true, + negativeTheme: 'purple', + theme: 'green', + size: 'large', + }, +}; + +export const Huge: Story = { + args: { + darkNegative: true, + negativeTheme: 'blue', + theme: 'orange', + size: 'huge', + }, +}; diff --git a/src/stories/components/ToggleSwitch/ToggleSwitch.vue b/src/stories/components/ToggleSwitch/ToggleSwitch.vue new file mode 100644 index 0000000000000000000000000000000000000000..503feb5e515694159db475cda77619426bfc28df --- /dev/null +++ b/src/stories/components/ToggleSwitch/ToggleSwitch.vue @@ -0,0 +1,118 @@ + + + + + diff --git a/src/stories/components/TreeList/TreeItems.vue b/src/stories/components/TreeList/TreeItems.vue new file mode 100644 index 0000000000000000000000000000000000000000..2dd704c4cfb2560631e267385cfc108865434864 --- /dev/null +++ b/src/stories/components/TreeList/TreeItems.vue @@ -0,0 +1,152 @@ + + + + + diff --git a/src/stories/components/TreeList/TreeList.stories.ts b/src/stories/components/TreeList/TreeList.stories.ts new file mode 100644 index 0000000000000000000000000000000000000000..9be416a753c45db4cd877b3094f1b0cce4ea8165 --- /dev/null +++ b/src/stories/components/TreeList/TreeList.stories.ts @@ -0,0 +1,164 @@ +import type { Meta, StoryObj } from '@storybook/vue3'; + +import TreeList from './TreeList.vue'; + +const meta: Meta = { + title: 'Components/TreeList', + component: TreeList, + tags: ['autodocs'], + parameters: { + docs: { + description: { + component: + 'A component that is used to display hierarchical data. Can contain links to a new page or the same.', + }, + }, + }, + argTypes: { + items: { control: 'object' }, + maxWidth: { control: 'number' }, + expand: { control: 'boolean' }, + theme: { + control: 'select', + options: [ + 'white', + 'slate', + 'blue', + 'sky', + 'teal', + 'green', + 'yellow', + 'orange', + 'pink', + 'fuchsia', + 'purple', + 'indigo', + 'rose', + 'red', + 'black', + ], + }, + }, + args: {}, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: { + items: [ + { + label: 'First', + children: [ + { + label: '1-1', + children: [ + { + label: '1-1-1', + children: [ + { + label: '1-1-1-1', + children: [ + { + label: '1-1-1-1-1', + children: [ + { label: '1-1-1-1-1-1' }, + { label: '1-1-1-1-1-2' }, + { label: '1-1-1-1-1-3' }, + { label: '1-1-1-1-1-4' }, + ], + }, + ], + }, + { label: '1-1-1-2' }, + { label: '1-1-1-3' }, + ], + }, + { + label: '1-1-2', + }, + ], + }, + { + label: '1-2', + }, + ], + }, + { + label: 'Second', + children: [ + { + label: '2-1', + }, + ], + }, + ], + }, +}; + +export const Full: Story = { + args: { + items: [ + { + label: 'Font-family (mdn web docs)', + color: 'green', + iconBefore: 'EncyclopediaIcon', + iconColor: 'green', + link: 'https://developer.mozilla.org/en-US/docs/Web/CSS/font-family', + linkBlank: true, + textStyle: 'bold', + children: [ + { + label: 'Font-family (mdn web docs) but same page (error?)', + link: 'https://developer.mozilla.org/en-US/docs/Web/CSS/font-family', + color: 'sky', + iconBefore: 'EyeIcon', + iconColor: 'white', + textStyle: 'italic', + isTriangleToColor: true, + children: [ + { + label: '1-1-1', + color: 'red', + iconAfter: 'DiceIcon', + iconColor: 'red', + children: [ + { + label: '1-1-1-1', + children: [ + { label: '1-1-1-1-1' }, + { label: '1-1-1-1-2' }, + { label: '1-1-1-1-3' }, + { label: '1-1-1-1-4' }, + ], + }, + { label: '1-1-1-2' }, + { label: '1-1-1-3' }, + ], + }, + { + label: '1-1-2', + }, + ], + }, + { + label: '1-2', + }, + ], + }, + { + label: 'Second', + children: [ + { + label: '2-1', + }, + ], + }, + ], + + expand: true, + theme: 'black', + }, +}; diff --git a/src/stories/components/TreeList/TreeList.vue b/src/stories/components/TreeList/TreeList.vue new file mode 100644 index 0000000000000000000000000000000000000000..061fe645ac17c74418f517f072fb0937093991bc --- /dev/null +++ b/src/stories/components/TreeList/TreeList.vue @@ -0,0 +1,78 @@ + + + + + diff --git a/src/stories/header.css b/src/stories/header.css deleted file mode 100644 index 5efd46c26a03cca7ba29f1b9bfab680eb1e08238..0000000000000000000000000000000000000000 --- a/src/stories/header.css +++ /dev/null @@ -1,32 +0,0 @@ -.storybook-header { - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - padding: 15px 20px; - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; -} - -.storybook-header svg { - display: inline-block; - vertical-align: top; -} - -.storybook-header h1 { - display: inline-block; - vertical-align: top; - margin: 6px 0 6px 10px; - font-weight: 700; - font-size: 20px; - line-height: 1; -} - -.storybook-header button + button { - margin-left: 10px; -} - -.storybook-header .welcome { - margin-right: 10px; - color: #333; - font-size: 14px; -} diff --git a/src/stories/icons/Mono/Age18Icon.vue b/src/stories/icons/Mono/Age18Icon.vue new file mode 100644 index 0000000000000000000000000000000000000000..be3b17c7c597cda69bd925d3c009616cd42ba012 --- /dev/null +++ b/src/stories/icons/Mono/Age18Icon.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/src/stories/icons/Mono/AirplaneIcon.vue b/src/stories/icons/Mono/AirplaneIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..885289a1e007d6b8bf26382553e4ea3c7363cb10 --- /dev/null +++ b/src/stories/icons/Mono/AirplaneIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/AlarmIcon.vue b/src/stories/icons/Mono/AlarmIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..b395d215ef251dfa8059a0f470510af8d014f5ac --- /dev/null +++ b/src/stories/icons/Mono/AlarmIcon.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/src/stories/icons/Mono/AlignCenterIcon.vue b/src/stories/icons/Mono/AlignCenterIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..a79b39b7d03c3ec1e0db97b89bbc316afbe92534 --- /dev/null +++ b/src/stories/icons/Mono/AlignCenterIcon.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/src/stories/icons/Mono/AlignLeftIcon.vue b/src/stories/icons/Mono/AlignLeftIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..878160ac6d8d5df258d526e1b82c92370a923456 --- /dev/null +++ b/src/stories/icons/Mono/AlignLeftIcon.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/src/stories/icons/Mono/AlignRightIcon.vue b/src/stories/icons/Mono/AlignRightIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..3e2440af6ca77a6b6fa775370fcde2376a398803 --- /dev/null +++ b/src/stories/icons/Mono/AlignRightIcon.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/src/stories/icons/Mono/AnchorIcon.vue b/src/stories/icons/Mono/AnchorIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..d13c80cc8e80eaead8350b963904f64b04713982 --- /dev/null +++ b/src/stories/icons/Mono/AnchorIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/AnchorLinkIcon.vue b/src/stories/icons/Mono/AnchorLinkIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..7a7ef42ccc8dca5548a8569a20174d9c643d9f88 --- /dev/null +++ b/src/stories/icons/Mono/AnchorLinkIcon.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/src/stories/icons/Mono/ArchiveIcon.vue b/src/stories/icons/Mono/ArchiveIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..c6a8e7b7ded47a385786f24d5193862f5a63a125 --- /dev/null +++ b/src/stories/icons/Mono/ArchiveIcon.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/src/stories/icons/Mono/ArrowForwardIcon.vue b/src/stories/icons/Mono/ArrowForwardIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..9ae4ade43331aa362cae436e82c896dbbb9b9121 --- /dev/null +++ b/src/stories/icons/Mono/ArrowForwardIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/ArrowLeftIcon.vue b/src/stories/icons/Mono/ArrowLeftIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..7b6ff8be4806b1ee229e4834ce34f23ca65ed8d2 --- /dev/null +++ b/src/stories/icons/Mono/ArrowLeftIcon.vue @@ -0,0 +1,39 @@ + + + + + diff --git a/src/stories/icons/Mono/ArrowRightIcon.vue b/src/stories/icons/Mono/ArrowRightIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..aa302e5a4d2b59175efc7fd8cc824e8575b869c0 --- /dev/null +++ b/src/stories/icons/Mono/ArrowRightIcon.vue @@ -0,0 +1,39 @@ + + + + + diff --git a/src/stories/icons/Mono/ArrowsVerticalIcon.vue b/src/stories/icons/Mono/ArrowsVerticalIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..05715194e0daf1321301752f987693dd8779e6df --- /dev/null +++ b/src/stories/icons/Mono/ArrowsVerticalIcon.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/src/stories/icons/Mono/AtIcon.vue b/src/stories/icons/Mono/AtIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..784ee469f943e52aa0b602b7816da0b651ce1af1 --- /dev/null +++ b/src/stories/icons/Mono/AtIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/AwardIcon.vue b/src/stories/icons/Mono/AwardIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..350d6969ef783c36ebff837f1d6c0d00cc859ea1 --- /dev/null +++ b/src/stories/icons/Mono/AwardIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/BackspaceIcon.vue b/src/stories/icons/Mono/BackspaceIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..b9a692bda3c1b8b794d8955ba3b94fd84ddcd729 --- /dev/null +++ b/src/stories/icons/Mono/BackspaceIcon.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/src/stories/icons/Mono/BadgeIcon.vue b/src/stories/icons/Mono/BadgeIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..108092cd7821e32fb42bc9cf617de54eff634e17 --- /dev/null +++ b/src/stories/icons/Mono/BadgeIcon.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/src/stories/icons/Mono/BallFootballIcon.vue b/src/stories/icons/Mono/BallFootballIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..4e055d6715c5d5d176e15d174cdd475bbd5d6a23 --- /dev/null +++ b/src/stories/icons/Mono/BallFootballIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/BallIcon.vue b/src/stories/icons/Mono/BallIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..51a7902e41e03864eab94a8ef50bc0fcbe440c73 --- /dev/null +++ b/src/stories/icons/Mono/BallIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/BanknoteIcon.vue b/src/stories/icons/Mono/BanknoteIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..d1dc02c2469cb38ddb03ffbd0de19c176472b238 --- /dev/null +++ b/src/stories/icons/Mono/BanknoteIcon.vue @@ -0,0 +1,40 @@ + + + + + diff --git a/src/stories/icons/Mono/BellIcon.vue b/src/stories/icons/Mono/BellIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..ea10cb265988fcfe8e6dd3e36008affa16502cb0 --- /dev/null +++ b/src/stories/icons/Mono/BellIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/BellOffIcon.vue b/src/stories/icons/Mono/BellOffIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..daae8ca9ee1aa55fd7af13260846b91c4328c8a2 --- /dev/null +++ b/src/stories/icons/Mono/BellOffIcon.vue @@ -0,0 +1,34 @@ + + + + + diff --git a/src/stories/icons/Mono/BoxIcon.vue b/src/stories/icons/Mono/BoxIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..2d12ed84bd54bd9ae736bf57f3409d61e861fdc3 --- /dev/null +++ b/src/stories/icons/Mono/BoxIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/BrightnessIcon.vue b/src/stories/icons/Mono/BrightnessIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..570a8695a6327a23d80a3491d1b734f91862e641 --- /dev/null +++ b/src/stories/icons/Mono/BrightnessIcon.vue @@ -0,0 +1,58 @@ + + + + + diff --git a/src/stories/icons/Mono/BulbIcon.vue b/src/stories/icons/Mono/BulbIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..376111bd2ba54317a645c2b05039f6f47a834a16 --- /dev/null +++ b/src/stories/icons/Mono/BulbIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/CalculatorIcon.vue b/src/stories/icons/Mono/CalculatorIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..8531fdab0c515617b4001f6c67ef5e279bcf2681 --- /dev/null +++ b/src/stories/icons/Mono/CalculatorIcon.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/src/stories/icons/Mono/CalendarAddIcon.vue b/src/stories/icons/Mono/CalendarAddIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..f3cad6d52b70882b7bc4aef9bb47d1a2ed7d9ed5 --- /dev/null +++ b/src/stories/icons/Mono/CalendarAddIcon.vue @@ -0,0 +1,36 @@ + + + + + diff --git a/src/stories/icons/Mono/CalendarIcon.vue b/src/stories/icons/Mono/CalendarIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..0f0d9a933963e8a20f1beaea31eef767e72d61f2 --- /dev/null +++ b/src/stories/icons/Mono/CalendarIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/CalendarRemoveIcon.vue b/src/stories/icons/Mono/CalendarRemoveIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..2a0541bd422820661b9dd11abe506945f1458321 --- /dev/null +++ b/src/stories/icons/Mono/CalendarRemoveIcon.vue @@ -0,0 +1,36 @@ + + + + + diff --git a/src/stories/icons/Mono/CardsIcon.vue b/src/stories/icons/Mono/CardsIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..fafda21bde70718e80d37c70a21f284e1c770d85 --- /dev/null +++ b/src/stories/icons/Mono/CardsIcon.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/src/stories/icons/Mono/ChartLineIcon.vue b/src/stories/icons/Mono/ChartLineIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..c09464e6d93a26011f83ec5f55e3936ea4d31d7f --- /dev/null +++ b/src/stories/icons/Mono/ChartLineIcon.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/src/stories/icons/Mono/ChartPieIcon.vue b/src/stories/icons/Mono/ChartPieIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..c456f242234f386c1bc4dab7d34454bb452bb440 --- /dev/null +++ b/src/stories/icons/Mono/ChartPieIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/ChatIcon.vue b/src/stories/icons/Mono/ChatIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..9ea3573d63481df06526e3e1122240239641d1aa --- /dev/null +++ b/src/stories/icons/Mono/ChatIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/ChatWritingIcon.vue b/src/stories/icons/Mono/ChatWritingIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..6c11f9c1f67accf1426b5dbc2cbe13e0488aa05f --- /dev/null +++ b/src/stories/icons/Mono/ChatWritingIcon.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/src/stories/icons/Mono/CheckmarkIcon.vue b/src/stories/icons/Mono/CheckmarkIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..05ab9bd0e2251521a3accab1cf8bc2257026a566 --- /dev/null +++ b/src/stories/icons/Mono/CheckmarkIcon.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/src/stories/icons/Mono/ChemistryFlaskIcon.vue b/src/stories/icons/Mono/ChemistryFlaskIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..f49358a6f446460d45693224b4664119cc61e288 --- /dev/null +++ b/src/stories/icons/Mono/ChemistryFlaskIcon.vue @@ -0,0 +1,34 @@ + + + + + diff --git a/src/stories/icons/Mono/CodeIcon.vue b/src/stories/icons/Mono/CodeIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..f6eba9b7dbb464087f5dd26179047fc2432a4e49 --- /dev/null +++ b/src/stories/icons/Mono/CodeIcon.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/src/stories/icons/Mono/CoinsIcon.vue b/src/stories/icons/Mono/CoinsIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..4ab24d7290d89443e64eb0dacf5ac70e28cefa85 --- /dev/null +++ b/src/stories/icons/Mono/CoinsIcon.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/src/stories/icons/Mono/ColorPaletteIcon.vue b/src/stories/icons/Mono/ColorPaletteIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..56a85805dcc52f05ba18674d85901bf8a27ed6ed --- /dev/null +++ b/src/stories/icons/Mono/ColorPaletteIcon.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/src/stories/icons/Mono/CompassIcon.vue b/src/stories/icons/Mono/CompassIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..20dee87a3833db4338333d027a3bff9e48709786 --- /dev/null +++ b/src/stories/icons/Mono/CompassIcon.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/src/stories/icons/Mono/ConstructionWorkerIcon.vue b/src/stories/icons/Mono/ConstructionWorkerIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..b22431194eb2491ecdb9b79448bdf1c729783cf5 --- /dev/null +++ b/src/stories/icons/Mono/ConstructionWorkerIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/ContactsIcon.vue b/src/stories/icons/Mono/ContactsIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..cdad55fa75d52d2215c9a6c9f8b26ffa083cd2b1 --- /dev/null +++ b/src/stories/icons/Mono/ContactsIcon.vue @@ -0,0 +1,36 @@ + + + + + diff --git a/src/stories/icons/Mono/CropIcon.vue b/src/stories/icons/Mono/CropIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..6446f2ea82997acd5491459acdaa9cabc9009842 --- /dev/null +++ b/src/stories/icons/Mono/CropIcon.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/src/stories/icons/Mono/CrossCircleIcon.vue b/src/stories/icons/Mono/CrossCircleIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..e28872399a232d3bf0f10a542b95045e47abeec3 --- /dev/null +++ b/src/stories/icons/Mono/CrossCircleIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/CrossIcon.vue b/src/stories/icons/Mono/CrossIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..294696a8c1dc4256bd98f9492a5af1973da925ce --- /dev/null +++ b/src/stories/icons/Mono/CrossIcon.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/src/stories/icons/Mono/CubeIcon.vue b/src/stories/icons/Mono/CubeIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..3cceaa827416e78d3e4dad342f1653e60664e934 --- /dev/null +++ b/src/stories/icons/Mono/CubeIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/CupIcon.vue b/src/stories/icons/Mono/CupIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..3f39410aefa670159b7d2cd6989b6ef3afa90789 --- /dev/null +++ b/src/stories/icons/Mono/CupIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/CursorIcon.vue b/src/stories/icons/Mono/CursorIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..47e49b27174acf08567fcfe11c584a2332f01093 --- /dev/null +++ b/src/stories/icons/Mono/CursorIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/DiamondIcon.vue b/src/stories/icons/Mono/DiamondIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..19a08adc05a5304b75a5f2038d62782f07321f02 --- /dev/null +++ b/src/stories/icons/Mono/DiamondIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/DiaryIcon.vue b/src/stories/icons/Mono/DiaryIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..6caf5a1edf4e746c20d439068e0685ae01c0d2ae --- /dev/null +++ b/src/stories/icons/Mono/DiaryIcon.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/src/stories/icons/Mono/DiceIcon.vue b/src/stories/icons/Mono/DiceIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..bd78aedd306cb04aac066e91963c93eb138bb029 --- /dev/null +++ b/src/stories/icons/Mono/DiceIcon.vue @@ -0,0 +1,56 @@ + + + + + diff --git a/src/stories/icons/Mono/DigIcon.vue b/src/stories/icons/Mono/DigIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..ae8c3dc64b875380bcc5d33548bd38eb21999d9c --- /dev/null +++ b/src/stories/icons/Mono/DigIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/DislikeIcon.vue b/src/stories/icons/Mono/DislikeIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..52ad47896a1ad1e9f8535167ffc772a2feb01341 --- /dev/null +++ b/src/stories/icons/Mono/DislikeIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/DisplayIcon.vue b/src/stories/icons/Mono/DisplayIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..91719d88212195ec79e5d63509787616a34d953d --- /dev/null +++ b/src/stories/icons/Mono/DisplayIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/DocumentAddIcon.vue b/src/stories/icons/Mono/DocumentAddIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..9c7884cff69ebb2455e7c44bf4f02aebc8f186ec --- /dev/null +++ b/src/stories/icons/Mono/DocumentAddIcon.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/src/stories/icons/Mono/DocumentDeleteIcon.vue b/src/stories/icons/Mono/DocumentDeleteIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..355553fa95843060704f00da67c6446d2a68046d --- /dev/null +++ b/src/stories/icons/Mono/DocumentDeleteIcon.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/src/stories/icons/Mono/DocumentEditIcon.vue b/src/stories/icons/Mono/DocumentEditIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..d462a7960806c028b6f60d91c53704e365340b0e --- /dev/null +++ b/src/stories/icons/Mono/DocumentEditIcon.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/src/stories/icons/Mono/DocumentIcon.vue b/src/stories/icons/Mono/DocumentIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..124df228dea3554e0f5fcd89330ceb8a6ed346c6 --- /dev/null +++ b/src/stories/icons/Mono/DocumentIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/DollarIcon.vue b/src/stories/icons/Mono/DollarIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..10866c472ba1e3e13c9cf2f5363329d30a4e45a2 --- /dev/null +++ b/src/stories/icons/Mono/DollarIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/DotsHorizontalIcon.vue b/src/stories/icons/Mono/DotsHorizontalIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..4acef683109ece4d0f91140bad4d3fb40f426d75 --- /dev/null +++ b/src/stories/icons/Mono/DotsHorizontalIcon.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/src/stories/icons/Mono/DotsVerticalIcon.vue b/src/stories/icons/Mono/DotsVerticalIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..1ad56aff03d4c443bb0197d10d04169161a9defb --- /dev/null +++ b/src/stories/icons/Mono/DotsVerticalIcon.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/src/stories/icons/Mono/DownloadIcon.vue b/src/stories/icons/Mono/DownloadIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..85cb21b873728358e5609abd8567e41420980e22 --- /dev/null +++ b/src/stories/icons/Mono/DownloadIcon.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/src/stories/icons/Mono/DropIcon.vue b/src/stories/icons/Mono/DropIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..25781f2025d4a95314b29fe1248e89abe68ec998 --- /dev/null +++ b/src/stories/icons/Mono/DropIcon.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/src/stories/icons/Mono/DumbbelIcon.vue b/src/stories/icons/Mono/DumbbelIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..c77acd702199743750da501ca51f0688a404bc97 --- /dev/null +++ b/src/stories/icons/Mono/DumbbelIcon.vue @@ -0,0 +1,40 @@ + + + + + diff --git a/src/stories/icons/Mono/EarthIcon.vue b/src/stories/icons/Mono/EarthIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..6592b504dfa426589a7c4c66eb151ba746718772 --- /dev/null +++ b/src/stories/icons/Mono/EarthIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/EditIcon.vue b/src/stories/icons/Mono/EditIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..506a59afeb17ef74b1c9aca236f81510b3c32dcb --- /dev/null +++ b/src/stories/icons/Mono/EditIcon.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/src/stories/icons/Mono/EncyclopediaIcon.vue b/src/stories/icons/Mono/EncyclopediaIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..f6585958fc495e69b33cf8c5930ea8ba9cd7d2f5 --- /dev/null +++ b/src/stories/icons/Mono/EncyclopediaIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/ExitIcon.vue b/src/stories/icons/Mono/ExitIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..092dd702256f3ce0f1b3fadd0c92dda4fb220426 --- /dev/null +++ b/src/stories/icons/Mono/ExitIcon.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/src/stories/icons/Mono/EyeIcon.vue b/src/stories/icons/Mono/EyeIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..cf92eec82328b39f519b85b9f66f6f3ec170af57 --- /dev/null +++ b/src/stories/icons/Mono/EyeIcon.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/src/stories/icons/Mono/FeedbackIcon.vue b/src/stories/icons/Mono/FeedbackIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..089ff8c5e42f3116e7acb3bf99de018336bb0e6a --- /dev/null +++ b/src/stories/icons/Mono/FeedbackIcon.vue @@ -0,0 +1,42 @@ + + + + + diff --git a/src/stories/icons/Mono/FilterIcon.vue b/src/stories/icons/Mono/FilterIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..0f94447137de48b9f960ba9c4f9e36495fdbd86d --- /dev/null +++ b/src/stories/icons/Mono/FilterIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/FingerprintIcon.vue b/src/stories/icons/Mono/FingerprintIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..4e3ef0ded3be79f12572693467ae4149c2c64113 --- /dev/null +++ b/src/stories/icons/Mono/FingerprintIcon.vue @@ -0,0 +1,52 @@ + + + + + diff --git a/src/stories/icons/Mono/FireIcon.vue b/src/stories/icons/Mono/FireIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..e40c6cd8f8adf60f036af06ce1261037e4c8ded4 --- /dev/null +++ b/src/stories/icons/Mono/FireIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/FlagIcon.vue b/src/stories/icons/Mono/FlagIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..149ce0ea35fa41bdfc8fd5b796f555a5d83929e8 --- /dev/null +++ b/src/stories/icons/Mono/FlagIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/FlashIcon.vue b/src/stories/icons/Mono/FlashIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..a2608f6ee0d4a54238425b94b939eba74b73eb07 --- /dev/null +++ b/src/stories/icons/Mono/FlashIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/FlashlightIcon.vue b/src/stories/icons/Mono/FlashlightIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..5b56efc182a9923be54c3be5b4df2c08bb717bca --- /dev/null +++ b/src/stories/icons/Mono/FlashlightIcon.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/src/stories/icons/Mono/FolderLockIcon.vue b/src/stories/icons/Mono/FolderLockIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..83cc1a221c055472710df2b60f1a7fa72146ac91 --- /dev/null +++ b/src/stories/icons/Mono/FolderLockIcon.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/src/stories/icons/Mono/FrameIcon.vue b/src/stories/icons/Mono/FrameIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..a4a721bfc1dd5f90d01d01e164d7ec4110640cd1 --- /dev/null +++ b/src/stories/icons/Mono/FrameIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/FullScreenIcon.vue b/src/stories/icons/Mono/FullScreenIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..592854ca34a2afa57e8e72c980cb0070aca75bba --- /dev/null +++ b/src/stories/icons/Mono/FullScreenIcon.vue @@ -0,0 +1,36 @@ + + + + + diff --git a/src/stories/icons/Mono/GameControllerIcon.vue b/src/stories/icons/Mono/GameControllerIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..0e1f7e6c080954ee4d29f2f1dd5fc7d825573c0b --- /dev/null +++ b/src/stories/icons/Mono/GameControllerIcon.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/src/stories/icons/Mono/GiftIcon.vue b/src/stories/icons/Mono/GiftIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..eccf30de6eab465ad98dc74a44a7352c013ed051 --- /dev/null +++ b/src/stories/icons/Mono/GiftIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/GlassesIcon.vue b/src/stories/icons/Mono/GlassesIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..36e6e4c2f291342f7c2dbf60085a1f69ce623f3f --- /dev/null +++ b/src/stories/icons/Mono/GlassesIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/HamburgerIcon.vue b/src/stories/icons/Mono/HamburgerIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..8563c80035ad0ab13ba405a311364d05fbc77987 --- /dev/null +++ b/src/stories/icons/Mono/HamburgerIcon.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/src/stories/icons/Mono/HandIcon.vue b/src/stories/icons/Mono/HandIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..045ddd669081780a552e9b7a3400ba131cb03c95 --- /dev/null +++ b/src/stories/icons/Mono/HandIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/HomeIcon.vue b/src/stories/icons/Mono/HomeIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..50dabe08072897065fbb22dcbfe786fb10862f56 --- /dev/null +++ b/src/stories/icons/Mono/HomeIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/ImageEditIcon.vue b/src/stories/icons/Mono/ImageEditIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..21137ce8d7706a21e62fe64a74291aa70bd53c6c --- /dev/null +++ b/src/stories/icons/Mono/ImageEditIcon.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/src/stories/icons/Mono/ImageIcon.vue b/src/stories/icons/Mono/ImageIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..e7aad96ee52b4b751c929d38b3bbfba2aed40519 --- /dev/null +++ b/src/stories/icons/Mono/ImageIcon.vue @@ -0,0 +1,34 @@ + + + + + diff --git a/src/stories/icons/Mono/LineDashedIcon.vue b/src/stories/icons/Mono/LineDashedIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..bc23bead92e4a86d1ab1c37ca92ea2984b463080 --- /dev/null +++ b/src/stories/icons/Mono/LineDashedIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/LineDiagonalIcon.vue b/src/stories/icons/Mono/LineDiagonalIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..59773e5c5a30487824ceae43312bb3897ee5e68a --- /dev/null +++ b/src/stories/icons/Mono/LineDiagonalIcon.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/src/stories/icons/Mono/LineDottedIcon.vue b/src/stories/icons/Mono/LineDottedIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..a2df5fd2fa50a559cc547c6208c345ab744eeae8 --- /dev/null +++ b/src/stories/icons/Mono/LineDottedIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/LineIcon.vue b/src/stories/icons/Mono/LineIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..5ff4ff12f2066b6d0e385b94da8445a5eff4017a --- /dev/null +++ b/src/stories/icons/Mono/LineIcon.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/src/stories/icons/Mono/MoveIcon.vue b/src/stories/icons/Mono/MoveIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..ddb211cc8745cadabbea2bed8d9750c332f39510 --- /dev/null +++ b/src/stories/icons/Mono/MoveIcon.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/src/stories/icons/Mono/ParagraphIcon.vue b/src/stories/icons/Mono/ParagraphIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..8061cbe1ae4f0c99c2bc34bba650dd94aa4b37b4 --- /dev/null +++ b/src/stories/icons/Mono/ParagraphIcon.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/src/stories/icons/Mono/PhoneHandsetIcon.vue b/src/stories/icons/Mono/PhoneHandsetIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..a4a1dd73e2b9c5ceef4c86f921a0807263b851b6 --- /dev/null +++ b/src/stories/icons/Mono/PhoneHandsetIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/PlusCircleIcon.vue b/src/stories/icons/Mono/PlusCircleIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..fa854cd9e51a4041d295e92a2d62f12aa58fcc89 --- /dev/null +++ b/src/stories/icons/Mono/PlusCircleIcon.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/src/stories/icons/Mono/PlusIcon.vue b/src/stories/icons/Mono/PlusIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..9afde0ac92569afeb69fc904d12e2addda34e45b --- /dev/null +++ b/src/stories/icons/Mono/PlusIcon.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/src/stories/icons/Mono/PointerIcon.vue b/src/stories/icons/Mono/PointerIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..72ad734813d9656d8dcfcd8254da4e1b29b147ca --- /dev/null +++ b/src/stories/icons/Mono/PointerIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/SaveIcon.vue b/src/stories/icons/Mono/SaveIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..3070e24fd9efd72e5d88e49fd22a2b05f0ff1c58 --- /dev/null +++ b/src/stories/icons/Mono/SaveIcon.vue @@ -0,0 +1,33 @@ + + + + + diff --git a/src/stories/icons/Mono/SettingsIcon.vue b/src/stories/icons/Mono/SettingsIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..604a19a277d018cee3dc6ac01cb9e17e3073eaee --- /dev/null +++ b/src/stories/icons/Mono/SettingsIcon.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/src/stories/icons/Mono/TableIcon.vue b/src/stories/icons/Mono/TableIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..d010f47bd2fd9f1a8e6dd51365a56cbc546659d8 --- /dev/null +++ b/src/stories/icons/Mono/TableIcon.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/src/stories/icons/Mono/TrashIcon.vue b/src/stories/icons/Mono/TrashIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..2a18eee55aa46c96e746a85de0979cf841238c92 --- /dev/null +++ b/src/stories/icons/Mono/TrashIcon.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/src/stories/icons/Mono/TriangleIcon.vue b/src/stories/icons/Mono/TriangleIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..3f89a51134fe7fb6e79dfce0853c505d20dbc58c --- /dev/null +++ b/src/stories/icons/Mono/TriangleIcon.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/stories/icons/Mono/UserIcon.vue b/src/stories/icons/Mono/UserIcon.vue new file mode 100644 index 0000000000000000000000000000000000000000..a15fbab178bf6c673f3138a53972ee0ad74be80c --- /dev/null +++ b/src/stories/icons/Mono/UserIcon.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/src/stories/page.css b/src/stories/page.css deleted file mode 100644 index 87f7ecb17c4e62bb9ef3b65a668a476c93dd13c7..0000000000000000000000000000000000000000 --- a/src/stories/page.css +++ /dev/null @@ -1,69 +0,0 @@ -.storybook-page { - margin: 0 auto; - padding: 48px 20px; - max-width: 600px; - color: #333; - font-size: 14px; - line-height: 24px; - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; -} - -.storybook-page h2 { - display: inline-block; - vertical-align: top; - margin: 0 0 4px; - font-weight: 700; - font-size: 32px; - line-height: 1; -} - -.storybook-page p { - margin: 1em 0; -} - -.storybook-page a { - color: #1ea7fd; - text-decoration: none; -} - -.storybook-page ul { - margin: 1em 0; - padding-left: 30px; -} - -.storybook-page li { - margin-bottom: 8px; -} - -.storybook-page .tip { - display: inline-block; - vertical-align: top; - margin-right: 10px; - border-radius: 1em; - background: #e7fdd8; - padding: 4px 12px; - color: #66bf3c; - font-weight: 700; - font-size: 11px; - line-height: 12px; -} - -.storybook-page .tip-wrapper { - margin-top: 40px; - margin-bottom: 40px; - font-size: 13px; - line-height: 20px; -} - -.storybook-page .tip-wrapper svg { - display: inline-block; - vertical-align: top; - margin-top: 3px; - margin-right: 4px; - width: 12px; - height: 12px; -} - -.storybook-page .tip-wrapper svg path { - fill: #1ea7fd; -} diff --git a/tsconfig.app.json b/tsconfig.app.json index e14c754d3ae5775d2ab13001e251c1371be912de..b5c26be5a9d5fdd76a0e64793a4653e0b7c7d3a5 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -1,14 +1,19 @@ { "extends": "@vue/tsconfig/tsconfig.dom.json", - "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "App.vue"], "exclude": ["src/**/__tests__/*"], "compilerOptions": { "composite": true, "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", - "baseUrl": ".", + "baseUrl": "./", "paths": { - "@/*": ["./src/*"] + "@/*": ["src/*"], + "@assets/*": ["./src/assets/*"], + "@icons/*": ["./src/icons/*"], + "@helpers/*": ["src/common/helpers/*"], + "@interfaces/*": ["src/common/interfaces/*"], + "@stories/*": ["./src/stories/*"] } } } diff --git a/vite.config.ts b/vite.config.ts index 4217010a3178372181948ce34c4d5045dfa18325..b38c6eb4e53b77a8f4df992e0094629525e8fec2 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,18 +1,18 @@ -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)) + '@': fileURLToPath(new URL('./src', import.meta.url)), + '@icons': fileURLToPath(new URL('./src/icons', import.meta.url)), + '@helpers': fileURLToPath(new URL('./src/common/helpers', import.meta.url)), + '@interfaces': fileURLToPath(new URL('./src/common/interfaces', import.meta.url)), + '@stories': fileURLToPath(new URL('./src/stories', import.meta.url)), }, }, -}) +}); diff --git a/yarn.lock b/yarn.lock index 86963f861d1e519bb3da6372a9853baf98804b06..c78b8cbda9cf4445c22b6dbc75d7c5252f46dedb 100644 --- a/yarn.lock +++ b/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"