{"_id":"@custis/file-adapter-front","name":"@custis/file-adapter-front","dist-tags":{"latest":"1.1.1"},"versions":{"1.1.1":{"name":"@custis/file-adapter-front","version":"1.1.1","main":"build/index.js","typings":"build/index.d.ts","module":"build/index.esm.js","scripts":{"start:watch":"rollup -c -w","build":"npm run test:once && rollup -c","build:pure":"rollup -c","pretest":"npm run check && npx jest --updateSnapshot","test":"jest --watch","pretest:once":"npx jest --updateSnapshot --passWithNoTests","test:once":"jest --passWithNoTests","check:types":"tsc --noEmit","check:format":"prettier --check \"**/*.{css,less,sass,scss,ts,tsx,js,jsx}\"","check:linting":"eslint --quiet --cache --cache-location node_modules/.cache/.eslintcache \"*.{ts,js}?(x)\" \"{src,test,types,webpack,scripts,configs}/**/*.{ts,js}?(x)\"","check-extra:linting-with-warn":"eslint --max-warnings 10 --cache --cache-location node_modules/.cache/.eslintcache \"*.{ts,js}?(x)\" \"{src,test,types,webpack}/**/*.{ts,js}?(x)\"","check":"npm-run-all check:*","update-snapshots":"jest --updateSnapshot","fix":"npm run fix:eslint && npm run fix:format","fix:format":"prettier --write \"**/*.{css,less,sass,scss,ts,tsx,js,jsx}\"","fix:eslint":"npm run check:linting -- --fix","apply:format":"prettier --write \"**/*.{css,less,sass,scss,html,md,graphql,gql,json,ts,tsx,js,jsx,yml,yaml}\"","package-locks-checks":"npx package-locks-checks -pm npm","nswag":"node scripts/nswag.js"},"repository":{"type":"git","url":"https://git.custis.ru/pub/netcore/custis-grid.git"},"author":{"name":"CUSTIS","email":"opensource@custis365.ru","url":"https://custis.ru/"},"license":"Apache-2.0","keywords":["React","Component","Library","Rollup","Typescript","Sass"],"husky":{"hooks":{"pre-commit":"lint-staged && npm run test:once","pre-push":"npm run fix && npm run check && npm run package-locks-checks"}},"lint-staged":{"*.{css,less,sass,scss,html,md,graphql,gql,json,ts,tsx,js,jsx,yml,yaml}":["prettier --write"]},"peerDependencies":{"@ant-design/icons":"4.6.2","@custis/common":"2.9.1","@custis/grid":"5.19.1","@types/lodash":"4.14.170","@types/react":"18.0.15","@types/react-dom":"18.0.6","antd":"4.21.7","lodash":"4.17.21","mobx":"5.15.7","mobx-react":"6.3.1","mobx-utils":"5.6.2","moment":"2.29.1","react":"18.2.0","react-dom":"18.2.0","react-router-dom":"5.3.3","tsyringe":"4.5.0"},"devDependencies":{"@ant-design/icons":"4.6.2","@babel/core":"7.9.0","@commitlint/cli":"8.3.5","@commitlint/config-conventional":"8.3.4","@custis/common":"2.9.1","@custis/grid":"5.19.1","@rollup/plugin-typescript":"8.3.3","@rollup/plugin-url":"4.0.2","@testing-library/react-hooks":"5.1.0","@types/classnames":"2.3.1","@types/enzyme":"3.10.5","@types/enzyme-adapter-react-16":"1.0.6","@types/jest":"24.0.24","@types/lodash":"4.14.170","@types/react":"18.0.15","@types/react-dom":"18.0.6","@types/react-helmet":"6.1.5","@types/react-table":"7.7.19","@typescript-eslint/eslint-plugin":"4.26.1","@typescript-eslint/experimental-utils":"4.26.1","@typescript-eslint/parser":"4.26.1","@typescript-eslint/typescript-estree":"4.26.1","@web/dev-server":"0.1.25","antd":"4.21.7","babel-loader":"8.1.0","babel-preset-react-app":"9.1.2","classnames":"2.3.1","cli-color":"2.0.1","enzyme":"3.11.0","enzyme-adapter-react-16":"1.15.2","enzyme-to-json":"3.4.4","es5-ext":"0.10.53","eslint":"7.32.0","eslint-config-react-app":"5.2.1","eslint-loader":"3.0.3","eslint-plugin-flowtype":"4.6.0","eslint-plugin-import":"2.22.1","eslint-plugin-jsx-a11y":"6.2.3","eslint-plugin-react":"7.19.0","eslint-plugin-react-hooks":"4.2.0","file-loader":"6.0.0","husky":"4.2.3","identity-obj-proxy":"3.0.0","jest":"26.6.3","jest-fetch-mock":"3.0.3","jest-localstorage-mock":"2.4.14","less":"4.1.1","lint-staged":"10.0.9","lodash":"4.17.21","mobx":"5.15.7","mobx-react":"6.3.1","mobx-utils":"5.6.2","moment":"2.29.4","npm-run-all":"4.1.5","oidc-client":"1.11.5","postcss-assets":"5.0.0","postcss-import":"12.0.1","postcss-inline-base64":"4.1.0","postcss-url":"8.0.0","prettier":"2.0.2","react":"18.2.0","react-dom":"18.2.0","react-drag-listview":"0.1.8","react-helmet":"6.1.0","react-table":"7.8.0","react-test-renderer":"17.0.2","reflect-metadata":"0.1.13","rollup":"1.27.4","rollup-plugin-commonjs":"10.1.0","rollup-plugin-copy":"3.3.0","rollup-plugin-node-resolve":"5.2.0","rollup-plugin-peer-deps-external":"2.2.2","rollup-plugin-postcss":"2.5.0","rollup-plugin-typescript2":"0.26.0","sass":"1.26.11","sass-loader":"8.0.2","ts-jest":"26.5.4","ts-loader":"8.4.0","tslib":"2.4.0","tsyringe":"4.5.0","typescript":"4.7.4"},"resolutions":{"es5-ext":"0.10.53","cli-color":"2.0.1"},"dependencies":{"@custis/front-scripts":"1.0.1-beta.1"},"_resolved":"","_integrity":"","_from":"file:/builds/pub/custis.netcore.fileadapter/file-adapter-front/pack/custis-file-adapter-front-1.1.1.tgz","description":"Данный репозиторий содержит Web UI для сервиса массовой загрузки файлов (СМОФ). Более подробное описание СМОФ см. в репозитории `file-adapter-back`.","_id":"@custis/file-adapter-front@1.1.1","_nodeVersion":"12.22.11","_npmVersion":"6.14.16","dist":{"integrity":"sha512-/x50MLlX+LAo1Z5EhFEZwYmPb4E7c9BnsBxnehLNYocyFzKm8eP9w3DLOBoQmO0yIdhnYUv+8NSmiFb1hU/kZg==","shasum":"d5ae88fdac8465369d64e07342eedc96553f27ad","tarball":"https://registry.npmjs.org/@custis/file-adapter-front/-/file-adapter-front-1.1.1.tgz","fileCount":27,"unpackedSize":592069,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqST71SUjvHrXdvkj+BdL4Fsoc68WXhoqyHF8EUr27RQIgAUR3dgLTwzNGA402ZEzIWXhiYK8xA3t92v68PPr2NU4="}]},"_npmUser":{"name":"custis-oss","email":"opensource@custis365.ru"},"directories":{},"maintainers":[{"name":"custis-oss","email":"opensource@custis365.ru"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/file-adapter-front_1.1.1_1707480360832_0.6153036104082592"},"_hasShrinkwrap":false}},"time":{"created":"2024-02-09T12:06:00.743Z","1.1.1":"2024-02-09T12:06:00.973Z","modified":"2024-02-09T12:06:01.326Z"},"maintainers":[{"name":"custis-oss","email":"opensource@custis365.ru"}],"description":"Данный репозиторий содержит Web UI для сервиса массовой загрузки файлов (СМОФ). Более подробное описание СМОФ см. в репозитории `file-adapter-back`.","keywords":["React","Component","Library","Rollup","Typescript","Sass"],"repository":{"type":"git","url":"https://git.custis.ru/pub/netcore/custis-grid.git"},"author":{"name":"CUSTIS","email":"opensource@custis365.ru","url":"https://custis.ru/"},"license":"Apache-2.0","readme":"# Сервис массовой обработки файлов. Web UI\n\nДанный репозиторий содержит Web UI для сервиса массовой загрузки файлов (СМОФ). Более подробное описание СМОФ см. в репозитории `file-adapter-back`.\n\nГрид для отображения данных. Используется в основных модулях. Поддерживает много функций (фильтрация, сортировка, пагинация, изменение отображения столбцов, выделение строк, и т.п.). Построен на основе библиотеки react-table.\n\n[![Latest version](https://img.shields.io/npm/v/@custis/file-adapter-front)](https://www.npmjs.com/package/@custis/file-adapter-front)\n\nОсновные компоненты библиотеки:\n\n- компонент FileDescriptors (FileDescriptors)\n- стор с данными для этого компонента FileDescriptorsStore\n- фабрика для создания стора FileDescriptorsStoreFactory\n- модели данных для запроса и результата\n\nЧтобы встроить СМОФ в проект, нужно добавить на нужную страницу компонент FileDescriptors, в пропсы передать созданный черех `FileDescriptorsStoreFactory` стор.\n\n```tsx\nimport React, { useMemo } from 'react';\nimport { observer } from 'mobx-react';\nimport { useInjection } from '@custis/common';\nimport { FileDescriptors, FileDescriptorsStoreFactory } from '@custis/file-adapter-front';\n\nexport const FileAdapter = observer(() => {\n const storeFactory = useInjection(FileDescriptorsStoreFactory);\n const store = useMemo(() => storeFactory.create('/file-adapter'), []);\n\n return ;\n});\n```\n\n## Выпуск версии\n\n- В package.json нужно изменить \"version\": \"1.0.1\" далее создаеться тег и публикует [сюда](https://nexus.custis.ru/#browse/browse:custis-npm-releases:%40custis%2Ffile-adapter-grid)\n- Если версия в package.json не повышалась, то пакет не перезаписывется\n\n## Быстрый старт\n\n1. Установите зависимости `npm install`\n2. Соберите проект `npm run build`\n\nЧтобы добавить изменения:\n\n1. Сделайте изменения, напишите тесты\n2. Проверьте сборку `npm run build`\n3. Запушьте в отдельную ветку\n4. После CR вмёржите ветку в мастер\n5. Поднимите версию приложения `npm version x.y.z`. Нумерация в соответствии с [semver](https://semver.org/lang/ru/)\n6. Запушьте с тегами\n\n## Общее\n\n### Используемые технологии, библиотеки и кодстайл\n\n#### [React](https://ru.reactjs.org/)\n\nОсновная библиотека для UI. Стараемся обновлять до актуальной версии.\n\nИспользуем функциональные компоненты. При написании кода выносим всю ui-логику в хуки (даже если логика не\nпереиспользуется). Компоненты делаем максимально простыми. Бизнес логику выносим в mobx-store.\n\nВ библиотеках тип пропсов экспортируем, в приложениях можно не экспортировать.\n\n```tsx\ninterface MyComponentProps {\n foo: string;\n}\n\nexport const MyComponent: FC = (props) => {\n const { foo } = props;\n const { someHandler, someField, store } = useMyComponent(foo);\n return (\n
\n \n

{someField}

\n \n
\n );\n};\n```\n\n#### [Tsyringe](https://github.com/microsoft/tsyringe)\n\nБиблиотека для DI. На её основе выстраиваем DI-систему в приложениях и библиотеках. Классы с логикой помечаем\nдекоратором `injectable`. Стараемся использовать в качестве токенов типы, а не строки. К сожалению, в тайпскрипте нет\nвозможности использовать интерфейсы как токен, так что если есть острая необходимость использовать интерфейсы, то\nиспользуем строку как токен и внедряем такую зависимость через аннотацию `inject` в конструктор. Внедрять классы в\nклассы просто - достаточно указать зависимость в конструкторе. Чтобы внедрить сервис используйте хук `useInjection` из\nбиблиотеки `@custis/common`:\n\n```tsx\n@injectable\nexport class BackendService {\n async getItems(): Promise {\n // ...\n }\n}\n\n@injectable\nexport class SomeStore {\n // Внедрение в класс\n constructor(private backendService: BackendService) {}\n}\n\nexport const MyComp: FC = () => {\n // Внедрение в компонент\n const store = useInjection(SomeStore);\n return <>;\n};\n```\n\n#### [MobX](https://mobx.js.org/README.html)\n\nБиблиотека для хранения состояния. Бизнес логику, связанную с состоянием реализуем в классах-сторах. В этих классах\nотслеживаемые поля помечаем как `observable`, вычисляемые поля (геттеры) помечаем как `computed`, методы, изменяющие\nсостояние помечаем как `action`. Сами сторы делаем `injectable`, чтобы они были доступны для DI.\n\n```typescript\n@injectable\nexport class SomeStore {\n @observable items: Item[] = [];\n @observable loading: boolean = false;\n\n constructor(private backendService: BackendService) {}\n\n @action\n async loadItems(): Promise {\n this.loading = true;\n\n const result = await this.backendService.getItems();\n\n this.items = result.items;\n this.loading = false;\n }\n}\n```\n\n### Линтеры и форматтеры\n\nВ проектах за качеством кода следят линтеры. Перед началом работы убедитесь, что ваш редактор или IDE настроены на\nработу с ними.\n\n#### Линтер кода - Eslint\n\nВ качестве линтера используется [eslint](https://eslint.org/). Он настроен на проверку правил typescript (проверяет\nправила типизации), и реакт (следит за именованием компонентов и хуками). Выставлены достаточно строгие правила проверки\nкода.\n\nПроверьте, что ваш редактор использует eslint. Для этого, например, в любом ts-файле можете добавить такой код. В\nкомментариях показаны места, где линтер должен оповестить об ошибках.\n\n```typescript\nfunction a(arg1: any) {\n // ^-- @typescript-eslint/no-explicit-any\n let var1 = 1;\n // ^-- prefer-const\n console.log(var1);\n return arg;\n // ^-- @typescript-eslint/no-unsafe-return\n}\n```\n\nЕсли в редакторе появятся ошибки, то линтер настроен.\n\nДля запуска линтера по всему проекту есть npm-скрипты:\n\n- `npm run check:linting` для отлова ошибок. Если в проекте есть хоть одна ошибка, запуск команды завершится с ненулевым\n кодом.\n- `npm run check-extra:linting-with-warn` для отлова ошибок и предупреждений. Если в проекте больше чем 10\n предупреждений, запуск команды завершится ошибкой.\n\nДля исправлений замечаний eslint запустите команду `npm run fix:lint`\n\n#### Форматтер кода - Prettier\n\nВ проекте для контроля форматирования кода используется prettier. В принципе, eslint может следить и исправлять\nотклонения от стиля кода, но prettier делает это лучше. В редакторе желательно настроить форматирование кода через\nprettier при сохранении. Для проверки всего проекта на соответствие формату кода используйте\nкоманду `npm run check:format`. Если какие-то файлы не соответствуют формату, то команда завершится с ненулевым кодом.\nДля исправления форматирования по всему проекту есть команда `npm run fix:format`\n\n#### Хуки гита\n\nПри запуске команды `npm install` запускается настройка [husky](https://github.com/typicode/husky) - средства для\nуправления хуками в гит. При коммите запускаются 2 npm-скрипта\n\n- `npm run fix` - исправление кода, сам скрипт запускает следующие скрипты\n - `npm run fix:lint` - исправления линтера\n - `npm run fix:format` - исправления форматтера\n- `npm run check` - проверка кода, сам скрипт запускает все скрипты, начинающиеся на `check:`:\n - `npm run check:types` - проверка корректности типов, позволяет без сборки проверить код на корректность\n используемых типов\n - `npm run check:format` - форматирование\n - `npm run check:lint` - кодстайл\n\nЕсли секция `npm run check` завершится с ненулевым кодом, то коммит не произойдёт. Если всё-же нужно закоммитить код,\nкоторый не проходить проверки, то нужно при коммите добавить опцию `--no-verify`.\n\n### Сборка проекта\n\nСборка любых проектов выполняется командой `npm run build`. При этом, до запуска самой сборки запускается секция\nпроверки кода и тесты (пока только в библиотеках).\n\n#### Сборка приложений\n\nДля сборки приложений используется webpack. За основу взят конфиг из `create-react-app`, у которого выполнен eject. Из\nизменений:\n\n- сборщик для typescript заменён на `awesome-typescript-loader`\n- добавлена возможность использовать [css-модули](https://github.com/css-modules/css-modules) для less-файлов\n\n#### Сборка библиотек\n\nДля сборки библиотек используется rollup с плагинами. Есть особенность сборки библиотек и указания зависимостей. Если вы\nуказываете какую-то библиотеку в зависимостях, то иногда плагин commonjs не может разрешить некоторые зависимости и\nсборка падает с не очень внятной ошибкой. Есть 2 решения это проблемы:\n\n1. Явно указать экспортируемые символы в `rollup.config.js`, например:\n ```typescript\n commonjs({\n namedExports: {\n 'node_modules/react/react.js': ['Children', 'Component', 'PropTypes', 'createElement'],\n },\n });\n ```\n2. Убрать библиотеку из зависимостей (dependencies в package.json), но добавить её в devDependencies и в\n peerDependencies. Добавление в devDependencies даст возможность сборки на стенде, указание в peerDependencies\n проинформирует о необходимости установки этих зависимостей в приложение, использующее библиотеку\n","readmeFilename":"README.md"}