diff --git a/.storybook/main.ts b/.storybook/main.ts index 3dc77d5..198d44b 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -8,6 +8,7 @@ const config: StorybookConfig = { '@storybook/addon-onboarding', '@storybook/addon-a11y', '@storybook/addon-vitest', + 'storybook-addon-pseudo-states', ], framework: { name: '@storybook/vue3-vite', diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 6425694..a56a9f6 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -1,3 +1,4 @@ +import 'vuetify/styles'; import { vuetify } from '@/vuetify'; import { type Preview, setup } from '@storybook/vue3-vite'; import { withVuetifyTheme } from './withVuetifyTheme.decorator'; diff --git a/README.md b/README.md index 322674b..15e3db2 100644 --- a/README.md +++ b/README.md @@ -64,8 +64,17 @@ pnpm sb 2. Создай в этой папке файл `Vu{НазваниеКомпонента}.vue` и в нем описываем шаблон компонента. 3. Стилизуй компонент с помощью классов vuetify. 4. Опиши модели и пропы, которые может принимать компонент. С помощью /\*\* \*/ опиши пропы и модели (так автоматически генерируется документация). -5. В этой же папке создай `Vu{НазваниеКомпонента}.stories.ts`. -6. В этом файле опиши meta, а потом истории -- различные состояния и опции компонента. Подробнее смотри в туториале Storybook или в уже написанных компонентах. +5. Чтобы отразить псевдо-состяния (hover, active и т.д.), напиши в истории: + ```ts + parameters: { + pseudo: { + hover: true, + } + } + ``` + или посмотри [доку](https://storybook.js.org/addons/storybook-addon-pseudo-states) аддона. +6. В этой же папке создай `Vu{НазваниеКомпонента}.stories.ts`. +7. В этом файле опиши meta, а потом истории -- различные состояния и опции компонента. Подробнее смотри в туториале Storybook или в уже написанных компонентах. ### Пулл-реквест diff --git a/package.json b/package.json index 0d83544..17c8acb 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,7 @@ "prettier": "^3.5.2", "sass": "^1.93.2", "sass-loader": "^16.0.6", + "storybook-addon-pseudo-states": "^10.0.3", "stylelint": "^16.15.0", "stylelint-config-recommended": "^15.0.0", "stylelint-config-recommended-vue": "^1.6.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0a3b256..34f6e15 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -126,6 +126,9 @@ importers: sass-loader: specifier: ^16.0.6 version: 16.0.6(sass@1.93.2) + storybook-addon-pseudo-states: + specifier: ^10.0.3 + version: 10.0.3(storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.5.2)(vite@6.2.0(@types/node@22.13.8)(jiti@2.4.2)(sass@1.93.2))) stylelint: specifier: ^16.15.0 version: 16.15.0(typescript@5.8.2) @@ -3138,6 +3141,11 @@ packages: std-env@3.10.0: resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==} + storybook-addon-pseudo-states@10.0.3: + resolution: {integrity: sha512-3EA0m4irO/z/0Vu/Jg9CmSZ1+8Km81zy8aeRWU0Y4NbkQo9P/IPC/scVgKHZTUpZ78txRAvJQBKlhYhv1QgCWA==} + peerDependencies: + storybook: ^10.0.3 + storybook@9.1.13: resolution: {integrity: sha512-G3KZ36EVzXyHds72B/qtWiJnhUpM0xOUeYlDcO9DSHL1bDTv15cW4+upBl+mcBZrDvU838cn7Bv4GpF+O5MCfw==} hasBin: true diff --git a/src/components/Search/VuSearch.stories.ts b/src/components/Search/VuSearch.stories.ts new file mode 100644 index 0000000..55366ab --- /dev/null +++ b/src/components/Search/VuSearch.stories.ts @@ -0,0 +1,57 @@ +import type { Meta, StoryObj } from '@storybook/vue3-vite'; +import { fn } from 'storybook/test'; +import VuSearch from './VuSearch.vue'; + +const meta = { + title: 'Viribus Unitis/Search', + component: VuSearch, + tags: ['autodocs'], + args: { + 'onClick:filter': fn(), + 'onUpdate:modelValue': fn(), + placeholder: 'Поиск преподавателя', + }, + argTypes: { + modelValue: { + control: 'text', + description: 'Значение v-model', + }, + placeholder: { + control: 'text', + description: 'Текст плейсхолдера', + }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + modelValue: '', + }, +}; + +export const WithValue: Story = { + args: { + modelValue: 'Поисковый запрос', + }, +}; + +export const Hovered: Story = { + parameters: { + pseudo: { + hover: true, + }, + }, +}; + +export const Active: Story = { + args: { + modelValue: 'Печатаем...', + }, + play: ({ canvasElement }) => { + const field = canvasElement.querySelector('.v-field'); + field?.classList.add('v-field--focused'); + }, +}; diff --git a/src/components/Search/VuSearch.vue b/src/components/Search/VuSearch.vue new file mode 100644 index 0000000..cdd5d38 --- /dev/null +++ b/src/components/Search/VuSearch.vue @@ -0,0 +1,26 @@ + + + diff --git a/src/components/button/VuButton.stories.ts b/src/components/button/VuButton.stories.ts index a891011..72a5f84 100644 --- a/src/components/button/VuButton.stories.ts +++ b/src/components/button/VuButton.stories.ts @@ -16,4 +16,10 @@ export default meta; type Story = StoryObj; -export const Default: Story = {}; +export const Default: Story = { + parameters: { + pseudo: { + active: true, + }, + }, +}; diff --git a/src/components/checkBox/VuCheckbox.stories.ts b/src/components/checkBox/VuCheckbox.stories.ts index c778f14..6405429 100644 --- a/src/components/checkBox/VuCheckbox.stories.ts +++ b/src/components/checkBox/VuCheckbox.stories.ts @@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/vue3-vite'; import VuCheckbox from './VuCheckbox.vue'; const meta = { - title: 'checkBox/VuCheckbox', + title: 'Viribus Unitis/VuCheckbox', component: VuCheckbox, } satisfies Meta; @@ -14,20 +14,20 @@ export const Default: Story = { args: { disabled: false, modelValue: false, - label: "Оценок нет" + label: 'Оценок нет', }, }; export const Active: Story = { args: { disabled: false, modelValue: true, - label: "Оценок нет" + label: 'Оценок нет', }, }; export const Disabled: Story = { args: { disabled: true, modelValue: true, - label: "Оценок нет" + label: 'Оценок нет', }, }; diff --git a/src/components/checkBox/VuCheckbox.vue b/src/components/checkBox/VuCheckbox.vue index bb34f17..5f436c6 100644 --- a/src/components/checkBox/VuCheckbox.vue +++ b/src/components/checkBox/VuCheckbox.vue @@ -1,25 +1,23 @@ diff --git a/src/main.ts b/src/main.ts index 1584ccd..193103c 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,5 +2,5 @@ import { createApp } from 'vue'; import App from '@/App.vue'; import { pinia } from '@/pinia'; import { vuetify } from './vuetify'; -import '../style.css' +import '../style.css'; createApp(App).use(pinia).use(vuetify).mount('#app'); diff --git a/vite.config.ts b/vite.config.ts index 2d75205..02adcdc 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -15,7 +15,6 @@ export default defineConfig({ transformAssetUrls, }, }), - tailwindcss(), vuetify({ autoImport: true, styles: {