{"id":26285417,"url":"https://github.com/admiralds/react-ui","last_synced_at":"2025-04-05T18:05:54.337Z","repository":{"id":37268771,"uuid":"480864351","full_name":"AdmiralDS/react-ui","owner":"AdmiralDS","description":"Сторибук компонентов React на основе дизайн системы Адмирал 2.1","archived":false,"fork":false,"pushed_at":"2024-10-29T10:16:46.000Z","size":42439,"stargazers_count":41,"open_issues_count":47,"forks_count":13,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-10-29T12:18:17.464Z","etag":null,"topics":["react","styled-components","typescript"],"latest_commit_sha":null,"homepage":"https://AdmiralDS.github.io/react-ui/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AdmiralDS.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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":"2022-04-12T15:18:05.000Z","updated_at":"2024-10-28T13:49:00.000Z","dependencies_parsed_at":"2023-09-29T11:21:26.519Z","dependency_job_id":"46bc0ccc-cdc3-4105-b51d-67dde4d56946","html_url":"https://github.com/AdmiralDS/react-ui","commit_stats":{"total_commits":1442,"total_committers":9,"mean_commits":"160.22222222222223","dds":"0.36685159500693476","last_synced_commit":"5cba93ee9b1bd0c828c9e0cc791781db3997e0b3"},"previous_names":[],"tags_count":167,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdmiralDS%2Freact-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdmiralDS%2Freact-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdmiralDS%2Freact-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdmiralDS%2Freact-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AdmiralDS","download_url":"https://codeload.github.com/AdmiralDS/react-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247378140,"owners_count":20929296,"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":["react","styled-components","typescript"],"created_at":"2025-03-14T19:24:47.468Z","updated_at":"2025-04-05T18:05:54.315Z","avatar_url":"https://github.com/AdmiralDS.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @admiral-ds/react-ui\n\nБиблиотека компонентов React, основанная на дизайн системе Admiral 2.1\n\n## Содержимое\n\n- [Соглашения и внесение изменений](CONTRIBUTING.md)\n- [Установка](#Установка)\n- [Подключение](#Подключение)\n\n## Установка\n\n@admiral-ds/react-ui требует зависимостей :\n\n1. `styled-components \u003e 5.1.0`\n2. `react \u003e 16.0.0`\n3. `react-dom \u003e 16.0.0`\n\n   Можно воспользоваться готовым темплейтом с настроенной библиотекой [https://github.com/AdmiralDS/web-app-vite-admiral](https://github.com/AdmiralDS/web-app-vite-admiral)\n   или создать проект снуля и установить библиотеку:\n\n```shell\n$ npm create vite@latest my-web-app -- --template react-ts\n$ cd my-web-app\n$ npm install\n$ npm i @admiral-ds/react-ui\n$ npm run dev\n```\n\n## Подключение\n\nДля правильной работы @admiral-ds/react-ui требуется использовать `\u003cThemeProvider\u003e`, `\u003cFontsVTBGroup /\u003e` и `\u003cDropdownProvider\u003e`, их **рекомендуется** подключать в корне проекта:\n\nmain.tsx\n\n```tsx\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport { ThemeProvider } from 'styled-components';\nimport { LIGHT_THEME, FontsVTBGroup, DropdownProvider } from '@admiral-ds/react-ui';\nimport App from './App';\nimport './index.css';\n\nReactDOM.createRoot(document.getElementById('root')!).render(\n  \u003cReact.StrictMode\u003e\n    \u003cThemeProvider theme={LIGHT_THEME}\u003e\n      \u003cDropdownProvider\u003e\n        \u003cFontsVTBGroup /\u003e\n        \u003cApp /\u003e\n      \u003c/DropdownProvider\u003e\n    \u003c/ThemeProvider\u003e\n  \u003c/React.StrictMode\u003e,\n);\n```\n\nApp.tsx\n\n```tsx\nimport { useState } from 'react';\nimport styled from 'styled-components';\nimport './App.css';\n\n// Импорт иконки как URL ресурс\nimport reactLogo from './assets/react.svg';\nimport { T, Link } from '@admiral-ds/react-ui';\n\nconst Divider = styled.div`\n  width: 10px;\n  height: 12px;\n`;\n\nfunction App() {\n  const [count, setCount] = useState(0);\n\n  return (\n    \u003c\u003e\n      \u003cdiv\u003e\n        \u003ca href=\"https://vitejs.dev\" target=\"_blank\"\u003e\n          {/* импорт иконки через директорию assets. Доступ к этой директории есть и у index.html */}\n          \u003cimg src=\"/vite.svg\" className=\"logo\" alt=\"Vite logo\" /\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://react.dev\" target=\"_blank\"\u003e\n          \u003cimg src={reactLogo} className=\"logo react\" alt=\"React logo\" /\u003e\n        \u003c/a\u003e\n      \u003c/div\u003e\n      \u003ch1\u003eVite + React\u003c/h1\u003e\n      \u003cdiv className=\"card\"\u003e\n        \u003cbutton className=\"button\" onClick={() =\u003e setCount((count) =\u003e count + 1)}\u003e\n          count is {count}\n        \u003c/button\u003e\n        \u003cT font=\"Subtitle/Subtitle 1\" as=\"p\"\u003e\n          Edit \u003ccode\u003esrc/App.tsx\u003c/code\u003e and save to test HMR\n        \u003c/T\u003e\n      \u003c/div\u003e\n      \u003cp className=\"read-the-docs\"\u003eClick on the Vite and React logos to learn more\u003c/p\u003e\n      \u003cLink appearance=\"primary\" href=\"https://admiralds.github.io/react-ui\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n        Admiral Storybook\n        \u003cDivider /\u003e\n      \u003c/Link\u003e\n    \u003c/\u003e\n  );\n}\n\nexport default App;\n```\n\nЕсли ваш проект НЕ использует _create-react-app_ , то для правильной работы _webpack_ вам потребуется настройка file-loader,\nи [SVGR](https://github.com/gregberge/svgr/tree/main/packages/webpack).\n\n```shell\n$ npm i -D @svgr/webpack\n```\n\nwebpack.config.js\n\n```js\nconst path = require('path');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst { CleanWebpackPlugin } = require('clean-webpack-plugin');\nconst AppConfig = require('./src/app.config');\n\nmodule.exports = {\n  entry: './src/index.tsx',\n  output: {\n    path: path.resolve(__dirname, 'public'),\n    filename: 'main.bundle.js',\n    publicPath: AppConfig.webPackPublicPath,\n  },\n  plugins: [\n    new HtmlWebpackPlugin({\n      favicon: 'src/favicon.ico',\n      template: 'src/index.html',\n    }),\n  ],\n  module: {\n    rules: [\n      {\n        test: /\\.svg$/i,\n        issuer: /\\.[jt]sx?$/,\n        use: ['@svgr/webpack'],\n      },\n      {\n        test: /\\.(gif|svg|jpg|png|otf|ttf)$/,\n        use: 'file-loader',\n      },\n      {\n        test: /\\.(js|ts|tsx)$/,\n        use: 'ts-loader',\n        exclude: /node_modules/,\n      },\n      {\n        test: /\\.css$/,\n        use: ['style-loader', 'css-loader'],\n      },\n    ],\n  },\n  resolve: {\n    extensions: ['.tsx', '.ts', '.js'],\n  },\n  devServer: {\n    hot: true,\n  },\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadmiralds%2Freact-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadmiralds%2Freact-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadmiralds%2Freact-ui/lists"}