Skip to content

Commit 3e13da7

Browse files
BatuevIOBatuevIO
committed
init
1 parent 3b3b405 commit 3e13da7

22 files changed

+2254
-219
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,6 @@ dist-ssr
2626
#
2727
.stylelintcache
2828
.vite
29+
30+
*storybook.log
31+
storybook-static

‎.storybook/StoryWrapper.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<template>
2+
<v-app>
3+
<v-main>
4+
<slot name="story"></slot>
5+
</v-main>
6+
</v-app>
7+
</template>

‎.storybook/main.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import type { StorybookConfig } from '@storybook/vue3-vite';
2+
3+
const config: StorybookConfig = {
4+
stories: ['@/components/**/*.stories.ts'],
5+
addons: [
6+
'@chromatic-com/storybook',
7+
'@storybook/addon-docs',
8+
'@storybook/addon-onboarding',
9+
'@storybook/addon-a11y',
10+
'@storybook/addon-vitest',
11+
],
12+
framework: {
13+
name: '@storybook/vue3-vite',
14+
options: {},
15+
},
16+
};
17+
export default config;

‎.storybook/preview.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { vuetify } from '@/vuetify';
2+
import { type Preview, setup } from '@storybook/vue3-vite';
3+
import { withVuetifyTheme } from './withVuetifyTheme.decorator';
4+
5+
setup(app => app.use(vuetify));
6+
7+
const preview: Preview = {
8+
parameters: {
9+
controls: {
10+
matchers: {
11+
color: /(background|color)$/i,
12+
date: /Date$/i,
13+
},
14+
},
15+
16+
a11y: {
17+
// 'todo' - show a11y violations in the test UI only
18+
// 'error' - fail CI on a11y violations
19+
// 'off' - skip a11y checks entirely
20+
test: 'todo',
21+
},
22+
},
23+
};
24+
25+
export const globalTypes = {
26+
theme: {
27+
name: 'Theme',
28+
description: 'Global theme for components',
29+
toolbar: {
30+
icon: 'paintbrush',
31+
// Array of plain string values or MenuItem shape
32+
items: [
33+
{ value: 'light', title: 'Light', left: '🌞' },
34+
{ value: 'dark', title: 'Dark', left: '🌛' },
35+
],
36+
// Change title based on selected value
37+
dynamicTitle: true,
38+
},
39+
},
40+
};
41+
42+
export const decorators = [withVuetifyTheme];
43+
44+
export default preview;

‎.storybook/vitest.setup.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
2+
import { setProjectAnnotations } from '@storybook/vue3-vite';
3+
import * as projectAnnotations from './preview';
4+
5+
// This is an important step to apply the right configuration when testing your stories.
6+
// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
7+
setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

‎.storybook/withVuetifyTheme.decorator.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { h } from 'vue';
2+
import StoryWrapper from './StoryWrapper.vue';
3+
4+
export const withVuetifyTheme = (storyFn, context) => {
5+
const story = storyFn();
6+
7+
return () => {
8+
return h(
9+
StoryWrapper,
10+
{}, // Props for StoryWrapper
11+
{
12+
// Puts your story into StoryWrapper's "story" slot with your story args
13+
story: () => h(story, { ...context.args }),
14+
}
15+
);
16+
};
17+
};

‎README.md‎

Lines changed: 5 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
- NPM – консольный менеджер пакетов для установки библиотек (идет в поставке с Node.js)
1111
- Vue.js – фраемворк для разработки фронтенда
1212
- Vite – консольный менеджер для удобства работы с Vue.js
13+
- Storybook - фреймворк для разраобтки и документации компонентов и экранов.
1314

1415
## Frontend разработка на Vue.js
1516

@@ -35,28 +36,10 @@ pnpm install
3536
pnpm dev
3637
```
3738

38-
39-
### Важные замечания по коду
40-
- Приложение предполагает, что вы запускаете его из Твой ФФ. Чтобы имитировать запуск из Твой ФФ:
41-
42-
1. Зарегистрируйтесь в тестовой среде «Твой ФФ!» по адресу https://app.test.profcomff.com/auth. Подтвердите аккаунт и войдите в пользователя (при необходимости).
43-
44-
2. Перейдите в панель администрирования https://app.test.profcomff.com/admin.
45-
46-
3. Нажмите кнопку «скопировать параметры приложения».
47-
48-
4. Подставьте полученную строку после адреса вашего приложения в браузере
49-
50-
Код, который обрабатывает данные пользователя из URL находится здесь: https://github.com/profcomff/app-template/blob/1070d4370d37529702d7499baeaf145ba4cd9e62/frontend/src/store/profileStore.ts#L15-L28
51-
52-
53-
- `./src/api/user/AuthApi.ts` и `./src/api/user/UserdataApi.ts`
54-
55-
в этих файлах хранится код взаимодействия с [Auth API](https://api.profcomff.com/?urls.primaryName=auth)
56-
и [Userdata API](https://api.profcomff.com/?urls.primaryName=userdata), позволяющие получить
57-
информацию о текущем пользователе.
58-
59-
- По умолчанию используется тестовая среда для общения с API Твой ФФ! Данное поведение меняется в файле `.env`: https://github.com/profcomff/app-template/blob/main/frontend/.env
39+
Для локального запуска Storybook необходимо выполнить команду
40+
```
41+
pnpm storybook
42+
```
6043

6144

6245
## Инструкции

‎eslint.config.mjs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
2+
import storybook from "eslint-plugin-storybook";
3+
14
import path from 'node:path';
25
import { fileURLToPath } from 'node:url';
36
// import js from '@eslint/js';

‎package.json‎

Lines changed: 72 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,74 @@
11
{
2-
"name": "my-app-frontend",
3-
"version": "0.0.0",
4-
"type": "module",
5-
"scripts": {
6-
"dev": "vite",
7-
"build": "vue-tsc && vite build",
8-
"docker-build": "vue-tsc && vite build --base=/ui",
9-
"preview": "vite preview",
10-
"lint": "eslint src/ && pnpm lint:deadcode && pnpm lint:circular",
11-
"lint:deadcode": "knip --exclude binaries,dependencies,unlisted",
12-
"lint:circular": "dpdm --exit-code circular:1 --no-tree --no-warning --progress false --transform ./src/main.ts",
13-
"format": "prettier src/ --write",
14-
"stylelint": "stylelint 'src/**/*.{vue,css}' --fix",
15-
"check": "vue-tsc && pnpm format && pnpm lint && pnpm stylelint",
16-
"test": "echo ok"
17-
},
18-
"dependencies": {
19-
"pinia": "^3.0.1",
20-
"query-string": "^9.1.1",
21-
"vue": "^3.5.13",
22-
"vue-router": "^4.5.0"
23-
},
24-
"devDependencies": {
25-
"@eslint/eslintrc": "^3.3.0",
26-
"@eslint/js": "^9.21.0",
27-
"@mapbox/stylelint-processor-arbitrary-tags": "^0.4.0",
28-
"@mdi/font": "^7.4.47",
29-
"@profcomff/api-uilib": "^2025.3.1",
30-
"@types/node": "^22.13.8",
31-
"@typescript-eslint/eslint-plugin": "^8.25.0",
32-
"@typescript-eslint/parser": "^8.25.0",
33-
"@vitejs/plugin-vue": "^5.2.1",
34-
"@vue/eslint-config-typescript": "^14.4.0",
35-
"dpdm": "^3.14.0",
36-
"eslint": "^9.21.0",
37-
"eslint-config-prettier": "^10.0.2",
38-
"eslint-plugin-prettier": "^5.2.3",
39-
"eslint-plugin-vue": "^9.32.0",
40-
"knip": "^5.45.0",
41-
"openapi-typescript": "^7.6.1",
42-
"postcss-preset-env": "^10.1.5",
43-
"prettier": "^3.5.2",
44-
"stylelint": "^16.15.0",
45-
"stylelint-config-recommended": "^15.0.0",
46-
"stylelint-config-recommended-vue": "^1.6.0",
47-
"stylelint-config-standard": "^37.0.0",
48-
"stylelint-use-nesting": "^6.0.0",
49-
"typescript": "^5.8.2",
50-
"typescript-eslint": "^8.25.0",
51-
"vite": "^6.2.0",
52-
"vite-plugin-stylelint": "^6.0.0",
53-
"vite-plugin-vuetify": "^2.1.0",
54-
"vite-svg-loader": "^5.1.0",
55-
"vue-tsc": "^2.2.6",
56-
"vuetify": "^3.7.14"
57-
}
2+
"name": "my-app-frontend",
3+
"version": "0.0.0",
4+
"type": "module",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vue-tsc && vite build",
8+
"docker-build": "vue-tsc && vite build --base=/ui",
9+
"preview": "vite preview",
10+
"lint": "eslint src/ && pnpm lint:deadcode && pnpm lint:circular",
11+
"lint:deadcode": "knip --exclude binaries,dependencies,unlisted",
12+
"lint:circular": "dpdm --exit-code circular:1 --no-tree --no-warning --progress false --transform ./src/main.ts",
13+
"format": "prettier src/ --write",
14+
"stylelint": "stylelint 'src/**/*.{vue,css}' --fix",
15+
"check": "vue-tsc && pnpm format && pnpm lint && pnpm stylelint",
16+
"test": "echo ok",
17+
"storybook": "storybook dev -p 6006",
18+
"build-storybook": "storybook build"
19+
},
20+
"dependencies": {
21+
"pinia": "^3.0.1",
22+
"query-string": "^9.1.1",
23+
"storybook": "^9.1.13",
24+
"vue": "^3.5.13",
25+
"vue-router": "^4.5.0"
26+
},
27+
"devDependencies": {
28+
"@chromatic-com/storybook": "4.1.1",
29+
"@eslint/eslintrc": "^3.3.0",
30+
"@eslint/js": "^9.21.0",
31+
"@mapbox/stylelint-processor-arbitrary-tags": "^0.4.0",
32+
"@mdi/font": "^7.4.47",
33+
"@profcomff/api-uilib": "^2025.3.1",
34+
"@storybook/addon-a11y": "9.1.13",
35+
"@storybook/addon-docs": "9.1.13",
36+
"@storybook/addon-onboarding": "9.1.13",
37+
"@storybook/addon-vitest": "9.1.13",
38+
"@storybook/vue3-vite": "9.1.13",
39+
"@types/node": "^22.13.8",
40+
"@typescript-eslint/eslint-plugin": "^8.25.0",
41+
"@typescript-eslint/parser": "^8.25.0",
42+
"@vitejs/plugin-vue": "^5.2.1",
43+
"@vitest/browser": "^4.0.2",
44+
"@vitest/coverage-v8": "^4.0.2",
45+
"@vue/eslint-config-typescript": "^14.4.0",
46+
"dpdm": "^3.14.0",
47+
"eslint": "^9.21.0",
48+
"eslint-config-prettier": "^10.0.2",
49+
"eslint-plugin-prettier": "^5.2.3",
50+
"eslint-plugin-storybook": "9.1.13",
51+
"eslint-plugin-vue": "^9.32.0",
52+
"knip": "^5.45.0",
53+
"openapi-typescript": "^7.6.1",
54+
"playwright": "^1.56.1",
55+
"postcss-preset-env": "^10.1.5",
56+
"prettier": "^3.5.2",
57+
"sass": "^1.93.2",
58+
"sass-loader": "^16.0.6",
59+
"stylelint": "^16.15.0",
60+
"stylelint-config-recommended": "^15.0.0",
61+
"stylelint-config-recommended-vue": "^1.6.0",
62+
"stylelint-config-standard": "^37.0.0",
63+
"stylelint-use-nesting": "^6.0.0",
64+
"typescript": "^5.8.2",
65+
"typescript-eslint": "^8.25.0",
66+
"vite": "^6.2.0",
67+
"vite-plugin-stylelint": "^6.0.0",
68+
"vite-plugin-vuetify": "^2.1.0",
69+
"vite-svg-loader": "^5.1.0",
70+
"vitest": "^4.0.2",
71+
"vue-tsc": "^2.2.6",
72+
"vuetify": "^3.7.14"
73+
}
5874
}

0 commit comments

Comments
 (0)