{"id":19400172,"url":"https://github.com/kinstl/ulbi-frontend","last_synced_at":"2025-02-24T23:26:56.408Z","repository":{"id":247124996,"uuid":"823283221","full_name":"kinstl/Ulbi-Frontend","owner":"kinstl","description":"React-based frontend project with state management via Redux Toolkit. Features include dynamic routing with React Router, API integration, user authentication, and responsive UI components. Feature-Sliced Design ensures a structured and maintainable codebase.","archived":false,"fork":false,"pushed_at":"2024-11-14T19:42:10.000Z","size":4657,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-14T20:20:02.399Z","etag":null,"topics":["feature-sliced-design","jest","react-router","reactjs","redux-toolkit","rtk-query","storybook"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kinstl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-02T18:26:27.000Z","updated_at":"2024-11-14T19:42:14.000Z","dependencies_parsed_at":"2024-08-11T19:05:29.832Z","dependency_job_id":"0b491f02-6759-43ad-963d-2594927177d1","html_url":"https://github.com/kinstl/Ulbi-Frontend","commit_stats":null,"previous_names":["kinstl/ulbi-frontend"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kinstl%2FUlbi-Frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kinstl%2FUlbi-Frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kinstl%2FUlbi-Frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kinstl%2FUlbi-Frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kinstl","download_url":"https://codeload.github.com/kinstl/Ulbi-Frontend/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232873859,"owners_count":18590006,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["feature-sliced-design","jest","react-router","reactjs","redux-toolkit","rtk-query","storybook"],"created_at":"2024-11-10T11:13:16.384Z","updated_at":"2025-01-07T11:43:41.093Z","avatar_url":"https://github.com/kinstl.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Запуск проекта\n\n```\nnpm install - устанавливаем зависимости\nnpm run start:dev или npm run start:dev:vite - запуск сервера + frontend проекта в dev режиме\n```\n\n----\n\n## Скрипты\n\n- `npm run start` - Запуск frontend проекта на webpack dev server\n- `npm run start:vite` - Запуск frontend проекта на vite\n- `npm run start:dev` - Запуск frontend проекта на webpack dev server + backend\n- `npm run start:dev:vite` - Запуск frontend проекта на vite + backend\n- `npm run start:dev:server` - Запуск backend сервера\n- `npm run build:prod` - Сборка в prod режиме\n- `npm run build:dev` - Сборка в dev режиме (не минимизирован)\n- `npm run lint:ts` - Проверка ts файлов линтером\n- `npm run lint:ts:fix` - Исправление ts файлов линтером\n- `npm run lint:scss` - Проверка scss файлов style линтером\n- `npm run lint:scss:fix` - Исправление scss файлов style линтером\n- `npm run test:unit` - Хапуск unit тестов с jest\n- `npm run test:ui` - Хапуск скриншотных тестов с loki\n- `npm run test:ui:ok` - Подтверждение новых скриншотов\n- `npm run test:ui:ci` - Запуск скриншотных тестов в CI\n- `npm run test:ui:report` - Генерация полного отчета для скриншотных тестов\n- `npm run test:ui:json` - Генерация json отчета для скриншотных тестов\n- `npm run test:ui:html` - Генерация HTML отчета для скриншотных тестов\n- `npm run storybook` - запуск Storybook\n- `npm run storybook:build` - Сборка storybook билда\n- `npm run prepare` - прекоммит хуки\n- `npm run generate:slice` - Скрипт для генерации FSD слайсов\n\n----\n\n## Архитектура проекта\n\nПроект написан в соответствии с методологией Feature sliced design\n\nСсылка на документацию - [feature sliced design](https://feature-sliced.design/docs/get-started/tutorial)\n\n----\n\n## Работа с переводами\n\nВ проекте используется библиотека i18next для работы с переводами.\nФайлы с переводами хранятся в public/locales.\n\nДля комфортной работы рекомендуем установить плагин для webstorm/vscode\n\nДокументация i18next - [https://react.i18next.com/](https://react.i18next.com/)\n\n----\n\n## Тесты\n\nВ проекте используются 4 вида тестов:\n1) Обычные unit тесты на jest - `npm run test:unit`\n2) Тесты на компоненты с React testing library -`npm run test:unit`\n3) Скриншотное тестирование с loki `npm run test:ui`\n4) e2e тестирование с Cypress `npm run test:e2e`\n\nПодробнее о тестах - [документация тестирование](/docs/tests.md)\n\n----\n\n## Линтинг\n\nВ проекте используется eslint для проверки typescript кода и stylelint для проверки файлов со стилями.\n\nТакже для строгого контроля главных архитектурных принципов\nиспользуется собственный eslint plugin *eslint-plugin-ulbi-tv-plugin*,\nкоторый содержит 3 правила\n1) path-checker - запрещает использовать абсолютные импорты в рамках одного модуля\n2) layer-imports - проверяет корректность использования слоев с точки зрения FSD\n   (например widgets нельзя использовать в features и entitites)\n3) public-api-imports - разрешает импорт из других модулей только из public api. Имеет auto fix\n\n##### Запуск линтеров\n- `npm run lint:ts` - Проверка ts файлов линтером\n- `npm run lint:ts:fix` - Исправление ts файлов линтером\n- `npm run lint:scss` - Проверка scss файлов style линтером\n- `npm run lint:scss:fix` - Исправление scss файлов style линтером\n\n----\n## Storybook\n\nВ проекте для каждого компонента описываются стори-кейсы.\nЗапросы на сервер мокаются с помощью storybook-addon-mock.\n\nФайл со сторикейсами создает рядом с компонентом с расширением .stories.tsx\n\nЗапустить сторибук можно командой:\n- `npm run storybook`\n\nПодробнее о [Storybook](/docs/storybook.md)\n\nПример:\n\n```typescript jsx\nimport React from 'react';\nimport { ComponentStory, ComponentMeta } from '@storybook/react';\n\nimport { ThemeDecorator } from '@/shared/config/storybook/ThemeDecorator/ThemeDecorator';\nimport { Button, ButtonSize, ButtonTheme } from './Button';\nimport { Theme } from '@/shared/const/theme';\n\nexport default {\n    title: 'shared/Button',\n    component: Button,\n    argTypes: {\n        backgroundColor: { control: 'color' },\n    },\n} as ComponentMeta\u003ctypeof Button\u003e;\n\nconst Template: ComponentStory\u003ctypeof Button\u003e = (args) =\u003e \u003cButton {...args} /\u003e;\n\nexport const Primary = Template.bind({});\nPrimary.args = {\n    children: 'Text',\n};\n\nexport const Clear = Template.bind({});\nClear.args = {\n    children: 'Text',\n    theme: ButtonTheme.CLEAR,\n};\n```\n\n\n----\n\n## Конфигурация проекта\n\nДля разработки проект содержит 2 конфига:\n1. Webpack - ./config/build\n2. vite - vite.config.ts\n\nОба сборщика адаптированы под основные фичи приложения.\n\nВся конфигурация хранится в /config\n- /config/babel - babel\n- /config/build - конфигурация webpack\n- /config/jest - конфигурация тестовой среды\n- /config/storybook - конфигурация сторибука\n\nВ папке `scripts` находятся различные скрипты для рефакторинга\\упрощения написания кода\\генерации отчетов и тд.\n\n----\n\n## CI pipeline и pre commit хуки\n\nКонфигурация github actions находится в /.github/workflows.\nВ ci прогоняются все виды тестов, сборка проекта и сторибука, линтинг.\n\nВ прекоммит хуках проверяем проект линтерами, конфиг в /.husky\n\n----\n\n### Работа с данными\n\nВзаимодействие с данными осуществляется с помощью redux toolkit.\nПо возможности переиспользуемые сущности необходимо нормализовать с помощью EntityAdapter\n\nЗапросы на сервер отправляются с помощью [RTK query](/src/shared/api/rtkApi.ts)\n\nДля асинхронного подключения редюсеров (чтобы не тянуть их в общий бандл) используется\n[DynamicModuleLoader](/src/shared/lib/components/DynamicModuleLoader/DynamicModuleLoader.tsx)\n\n----\n\n### Работа с feature-flag\n\nРазрешено использование feature flags только с помощью хелпера toggleFeatures\n\nв него передается объект с опциями \n\n{\n   name: название фича-флага, \n   on: функция, которая отработает после Включения фичи \n   of: функция, которая отработает после ВЫключения фичи\n}\n\nДля автоматического удаления фичи использовать скрипт remove-feature.ts,\nкоторый принимает 2 аргумента\n1. Название удаляемого фича-флага\n2. Состояние (on\\off)\n\n----\n\n## Сущности (entities)\n\n- [Article](/src/entities/Article)\n- [Comment](/src/entities/Comment)\n- [Counter](/src/entities/Counter)\n- [Country](/src/entities/Country)\n- [Currency](/src/entities/Currency)\n- [Notification](/src/entities/Notification)\n- [Profile](/src/entities/Profile)\n- [Rating](/src/entities/Rating)\n- [User](/src/entities/User)\n\n## Фичи (features)\n\n- [addCommentForm](/src/features/addCommentForm)\n- [articleEditForm](/src/features/articleEditForm)\n- [articleRating](/src/features/articleRating)\n- [articleRecommendationsList](/src/features/articleRecommendationsList)\n- [AuthByUsername](/src/features/AuthByUsername)\n- [avatarDropdown](/src/features/avatarDropdown)\n- [editableProfileCard](/src/features/editableProfileCard)\n- [LangSwitcher](/src/features/LangSwitcher)\n- [notificationButton](/src/features/notificationButton)\n- [profileRating](/src/features/profileRating)\n- [ThemeSwitcher](/src/features/ThemeSwitcher)\n- [UI](/src/features/UI)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkinstl%2Fulbi-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkinstl%2Fulbi-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkinstl%2Fulbi-frontend/lists"}