update base

Author: BatuevIO

.storybook/main.ts

@@ -1,7 +1,7 @@
 import type { StorybookConfig } from '@storybook/vue3-vite';
 
 const config: StorybookConfig = {
-	stories: ['@/components/**/*.stories.ts'],
+	stories: ['../src/components/**/*.stories.ts'],
 	addons: [
 		'@chromatic-com/storybook',
 		'@storybook/addon-docs',

.storybook/vitest.setup.ts

@@ -2,91 +2,112 @@
 
 В этом репозитории представлен пример простейшего фронтенд-сервиса с Vue.js.
 
+_Большая часть команд и инструкций написаны для операционных систем Linux и MacOS._
 
-*Большая часть команд и инструкций написаны для операционных систем Linux и MacOS.*
+## Использование
 
-## Зависимости
-- Node.js v18 – среда исполнения на языке JavaScript/TypeScript
-- NPM – консольный менеджер пакетов для установки библиотек (идет в поставке с Node.js)
-- Vue.js – фраемворк для разработки фронтенда
-- Vite – консольный менеджер для удобства работы с Vue.js
-- Storybook - фреймворк для разраобтки и документации компонентов и экранов.
-
-## Frontend разработка на Vue.js
+TODO: Библиотека можно будет установить из npm под скоупом @profcomff. Она будет устанавливаться как плагин, и внедрять в глобальный скоуп приложения все компоненты -- по аналогии с vuetify. Все наши компоненты будут иметь приставку `Vu` (Viribus Unitis): `VuButton`, `VuTag` и т.д.
 
-Фронтенд (англ. front end, frontend) — презентационная часть web приложения, её пользовательский
-интерфейс и связанные с ним компоненты.
+TODO: Для референса нужно будет захостить собранный сторибук.
 
-В данном примере используется популярный фраемворк [Vue.js](https://vuejs.org/). Разработка ведется
-на языке TypeScript.
+## Зависимости
 
+- Node.js >= v18 – среда исполнения на языке JavaScript/TypeScript
+- NPM – консольный менеджер пакетов для установки библиотек (идет в поставке с Node.js)
+- Vue.js – фреймворк для разработки фронтенда
+- Vite – консольный менеджер и инструмент сборки для удобства работы с Vue.js
+- Storybook – фреймворк для разраобтки и документации компонентов и экранов.
 
 ## Разработка
 
 Для удобства разработки в VS Code создан [workspace](../frontend.code-workspace) с преднастроенными
 командами и рекомендованными расширениями для работы.
 
+### Начало работы
+
 Перед началом работы нужно установить зависимости командой
+
 ```
 pnpm install
 ```
 
-Для локального запуска необходимо выполнить команду
+Если используешь VS Code, то следует настроить автоформатирование:
+
+1. Открыть файл с расширением `.vue`.
+2. Открыть палитру команд (Help > Show All Commands или `Ctrl+Shift+P`)
+3. Ввести и выбрать `Format document with`.
+4. Выбрать `Configure Default Formatter`.
+5. Выбрать `Prettier`.
+
+Теперь можно форматировать файлы с помощью `Shift+Alt+F`. Еще можно настроить автоформатирование при сохранении файла (File > Preferences > Settings, Format on save).
+
+### Работа со Storybook
+
+Для локального запуска Storybook необходимо выполнить команду
+
 ```
-pnpm dev
+pnpm sb
 ```
 
-Для локального запуска Storybook необходимо выполнить команду 
+На localhost порте 6006 откроется storybook. Он поддерживает перезагрузку при изменении кода (hot module replacement), но иногда может что-то кешировать -- тогда лучше перезапустить.
+
+В левой вкладке будут перечислены все истории -- это могут быть компоненты, наборы компонентов или целые экраны. При нажатии на них можно посмотреть на то, как компонент выглядит, попробовать поменять какие-то его параметры и посмотреть, как он реагирует на события (например, нажатие).
+
+Создание компонента:
+
+1. В папке `/src/components/` создай папку с названием компонента (например, `button`).
+2. Создай в этой папке файл `Vu{НазваниеКомпонента}.vue` и в нем описываем шаблон компонента.
+3. Стилизуй компонент с помощью классов vuetify.
+4. Опиши модели и пропы, которые может принимать компонент. С помощью /\*\* \*/ опиши пропы и модели (так автоматически генерируется документация).
+5. В этой же папке создай `Vu{НазваниеКомпонента}.stories.ts`.
+6. В этом файле опиши meta, а потом истории -- различные состояния и опции компонента. Подробнее смотри в туториале Storybook или в уже написанных компонентах.
+
+### Пулл-реквест
+
+- Перед отправкой проверь стили: `pnpm check`
+- _Опционально_: более строгая проверка `pnpm check:hard`.
+- Заполни шаблон пулл-реквеста: что, как и зачем сделал
+- Запроси ревью
+
+### Запуск приложения (опционально)
+
+Для локального запуска приложения (чтобы проверять компоненты вне сторибука) необходимо выполнить команду
+
 ```
-pnpm storybook
+pnpm dev
 ```
 
-
 ## Инструкции
+
 ### Получение кода на свой компьютер
-Для работы с данным примером необходимо забрать его к себе на ПК. Для этого нужно:
-1. *(Опционально)* Если вы хотите далее опубликовать код на GitHub полезно сначала скопировать
-   репозиторий к себе кнопкой Fork на GitHub. Кнопка доступна в правом верхнем углу
-   [страницы репозитория](https://github.com/profcomff/app-template).
-2. Создайте папку в удобном вам расположении.
-    - *Удобно создать папку на рабочем столе с названием вашего приложения.*
-3. Откройте приложение "Командная строка" или "Терминал", в зависимости от операционной системы.
-4. Прейдите в папку проекта командой `cd /путь/к/папке`.
-    - Если вы пользователь windows и создали на рабочем столе папку `my_app`, то команда будет
-      выглядеть так: `cd %userprofile%/Desktop/my_app`
-    - Если вы пользователь linux или MacOS и создали на рабочем столе папку `my_app`, то команда
-      будет выглядеть сделующим образом: `cd ~/Desktop/my_app`
-5. Склонируйте код репозитория к себе на ПК командой
-  `git clone https://github.com/profcomff/app-template.git .` (точка в конце означает скачивание
-  кода в текущую папку). Если вы выполнили пункт 1 используйте в команде ссылку из зеленой кнопки
-  "Code" в правом верхнем углу вашего репозитория.
-6. Откройте код в удобной среде разработки. Рекомендуем использовать VSCode, который можно открыть
-   из терминала командой `code .`
 
-### Сборка и запуск приложения для публикации
-Сборка исходного кода в один пакет производится с помощью Docker. В этом случае создается
-независимый от операционной системы пакет, который можно без проблем разместить на любом сервере.
+1. Открой приложение "Командная строка" или "Терминал", в зависимости от операционной системы.
+2. Прейди в папку, где хочешь создать папку проекта, командой `cd /путь/к/папке`.
+    - Если ты пользователь windows и хотите создать папку на рабочем столе, то команда будет
+      выглядеть так: `cd %userprofile%/Desktop`
+    - Если ты пользователь linux или MacOS и хочещб создать папку на рабочем столе, то команда
+      будет выглядеть сделующим образом: `cd ~/Desktop/`
+3. Склонируй код репозитория к себе на ПК командой
+   `git clone https://github.com/profcomff/ui-kit.git myapp` (вместо `myapp` подставь название папки, которая будет создана).
+4. Открой код в удобной среде разработки. Рекомендуем использовать VSCode, который можно открыть
+   из терминала командой `code .`
 
-Выполните команду `make` для сборки приложения. После окончания выполнения этой команды будет создан
-новый Docker образ с названием `my_app`, который можно запустить командой `make run`
+### Сборка библиотеки
 
+TODO: Здесь будет описание сборки и публикации библиотеки на npm.
 
 ### Автосборка
+
+TODO: Настроить на релиз.
+
 Коммит в main запускает автоматическую сборку проекта средствами GitHub Actions. Настройки автосборки находятся в
 файле [.github/workflows/build_and_publish.yml](.github/workflows/build_and_publish.yml).
 
 ### Тесты на Pull Request
+
 При создании запроса на слияние, автоматически создаются проверки кода юниттестами и на стили.
 Следующие тесты будут запущены:
+
 - Проверки стилей `eslint`, `prettier`, `stylelint` на код в папке `frontend`
 
 Настройки автотестов находятся в файле[.github/workflows/checks.yml](.github/workflows/checks.yml).
-
-### Публикация готового приложения
-На данном этапе вам необходимо разместить приложение на каком-либо хостинге, поддерживающем протокол https.
-
-Для этого подойдет любой VPS сервер, который вы можете найти в интернете. Мы рекомендуем использовать VPS сервера на операционной системе linux, для удобства размещения приложений и компонентов использовать Docker.
-
-Чтобы получить SSL сертификаы для поддержки https можно использовать letsencrypt.com, предоставляющий SSL сертификаты бесплатно. Для удобства работы можно использовать веб сервер с встроенной поддержкой этих сертификатов, например Traefik или Caddy.
-
-Шаблон приложения имеет уже готовые [Dockerfile](cicd/Dockerfile) для сборки вашего приложения, файл [docker-compose.production.yml](cicd/docker-compose.production.yml) с настройками развертывания приложения с Caddy Server и включенным https, а также базой данных PostgreSQL.

README.md

@@ -7,14 +7,15 @@
     "build": "vue-tsc && vite build",
     "docker-build": "vue-tsc && vite build --base=/ui",
     "preview": "vite preview",
-    "lint": "eslint src/ && pnpm lint:deadcode && pnpm lint:circular",
+    "lint": "eslint src/",
     "lint:deadcode": "knip --exclude binaries,dependencies,unlisted",
     "lint:circular": "dpdm --exit-code circular:1 --no-tree --no-warning --progress false --transform ./src/main.ts",
     "format": "prettier src/ --write",
     "stylelint": "stylelint 'src/**/*.{vue,css}' --fix",
     "check": "vue-tsc && pnpm format && pnpm lint && pnpm stylelint",
+    "check:hard": "vue-tsc && pnpm lint && pnpm lint:deadcode && pnpm lint:circular && pnpm format && pnpm stylelint",
     "test": "echo ok",
-    "storybook": "storybook dev -p 6006",
+    "sb": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "dependencies": {
@@ -71,4 +72,4 @@
     "vue-tsc": "^2.2.6",
     "vuetify": "^3.7.14"
   }
-}
+}

package.json

@@ -1,42 +1,33 @@
-<script setup lang="ts">
-import { useProfileStore } from './store';
-import { onMounted } from 'vue';
-
-const profileStore = useProfileStore();
-
-onMounted(() => {
-	profileStore.fromUrl();
-});
-</script>
+<script setup lang="ts"></script>
 
 <template>
-	<main class="container">
-		<RouterView />
+	<main class="container mt-8">
+		<h1>Это репозиторий UI-kit Viribus Unitis</h1>
+		<p class="mt-4">
+			Здесь мы разрабатываем компоненты, общие для интерфейсов
+			<a href="https://app.profcomff.com" target="_blank">Твой ФФ</a> и всех
+			<a href="https://app.profcomff.com/apps" target="_blank">миниприложений</a>. База компонентов и стилей
+			берется из <a href="https://vuetifyjs.com/en/components/all/" target="_blank">Vuetify</a>, а дизайн-система
+			описана в нашей
+			<a
+				href="https://www.figma.com/design/gfvuDN9x7I7sFCJQ7b1bIz/%D0%A2%D0%B2%D0%BE%D0%B9-%D0%A4%D0%A4--%7C-Viribus?node-id=5399-18531&t=gqJoSlE0UHgEkayo-0"
+				target="_blank"
+				>Фигме</a
+			>.
+		</p>
+		<p class="mt-2">
+			В данном репозитории все немного отличается. Само приложение здесь может служить для отладки кода -- можешь
+			добавить в App.vue свой компонент и посмотреть, как он работает. Сами компоненты и их документацию мы пишем
+			в <a href="https://storybook.js.org/" target="_blank">Storybook</a> -- для локального запуска введи
+			<code class="ml-1">pnpm sb</code>.
+		</p>
 	</main>
-	<footer>
-		Made by
-		<a href="https://app.profcomff.com"><img src="https://app.profcomff.com/favicon.png" class="logo" /></a>
-		in association with
-		<a href="https://dyakov.space"><img src="https://dyakov.space/files/Icon.svg" class="logo" /></a>
-	</footer>
 </template>
 
 <style scoped>
 .container {
-	width: 100%;
+	width: min(100%, 900px);
+	margin: auto;
 	height: 100%;
 }
-
-footer {
-	position: sticky;
-	bottom: 0;
-	width: 100%;
-	color: gray;
-	text-align: center;
-
-	& .logo {
-		height: 30px;
-		vertical-align: middle;
-	}
-}
 </style>

src/App.vue

@@ -1,11 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { fn } from 'storybook/test';
 import VuButton from './VuButton.vue';
 
 const meta = {
 	title: 'Viribus Unitis/Button',
 	component: VuButton,
 	tags: ['autodocs'],
-	args: {},
+	args: {
+		onClick: fn(),
+	},
 } satisfies Meta<typeof VuButton>;
 
 export default meta;

src/components/button/VuButton.stories.ts

@@ -1,7 +1,16 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+defineEmits<{
+	click: [];
+}>();
+</script>
 
 <template>
-	<v-btn class="text-body-1 font-weight-bold" color="brand-orange-4-notif" text="Привет"></v-btn>
+	<v-btn
+		class="text-body-1 font-weight-bold"
+		color="brand-orange-4-notif"
+		text="Привет"
+		@click="$emit('click')"
+	></v-btn>
 </template>
 
 <style lang="css" scoped></style>

src/components/button/VuButton.vue

@@ -6,9 +6,6 @@ import svgLoader from 'vite-svg-loader';
 import vue from '@vitejs/plugin-vue';
 import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
 import { fileURLToPath } from 'url';
-import path from 'node:path';
-import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
-const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
 
 // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
 export default defineConfig({
@@ -53,32 +50,4 @@ export default defineConfig({
 			},
 		],
 	},
-	test: {
-		projects: [
-			{
-				extends: true,
-				plugins: [
-					// The plugin will run tests for the stories defined in your Storybook config
-					// See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-					storybookTest({
-						configDir: path.join(dirname, '.storybook'),
-					}),
-				],
-				test: {
-					name: 'storybook',
-					browser: {
-						enabled: true,
-						headless: true,
-						provider: 'playwright',
-						instances: [
-							{
-								browser: 'chromium',
-							},
-						],
-					},
-					setupFiles: ['.storybook/vitest.setup.ts'],
-				},
-			},
-		],
-	},
 });