From a27558c8e350f0e71fc65e0a5b75aff4709e72df Mon Sep 17 00:00:00 2001 From: Update packages readme action <> Date: Thu, 16 Jul 2026 06:17:15 +0000 Subject: [PATCH 1/5] docs: update packages readme --- src/content/local-docs/libs/charts/README.md | 4 + .../local-docs/libs/navigation/README.md | 4 + src/content/local-docs/libs/table/README.md | 26 +-- src/content/local-docs/libs/uikit/README.md | 159 +++++++++++------- 4 files changed, 118 insertions(+), 75 deletions(-) diff --git a/src/content/local-docs/libs/charts/README.md b/src/content/local-docs/libs/charts/README.md index c4b2d5fc1381..18132b8cc4d3 100644 --- a/src/content/local-docs/libs/charts/README.md +++ b/src/content/local-docs/libs/charts/README.md @@ -96,3 +96,7 @@ A declarative React charting library for Gravity UI apps — render line, area, - [Value Formatting](./docs/diplodoc/pages/guides/value-formatting.md) - [Data Labels](./docs/diplodoc/pages/guides/data-labels.md) - [Axis Types](./docs/diplodoc/pages/guides/axis-types.md) + +## Documentation for AI agents + +Agent-readable documentation for the installed version is located in `node_modules/@gravity-ui/charts/dist/docs/INDEX.md`. diff --git a/src/content/local-docs/libs/navigation/README.md b/src/content/local-docs/libs/navigation/README.md index 5976eb21a9a1..ebf1f6764062 100644 --- a/src/content/local-docs/libs/navigation/README.md +++ b/src/content/local-docs/libs/navigation/README.md @@ -114,3 +114,7 @@ Application-shell navigation components for Gravity UI apps — the collapsible - **Peer dependencies are required.** `@gravity-ui/uikit`, `@gravity-ui/icons`, and `@bem-react/classname` must be installed alongside `react`/`react-dom`. - **Needs uikit setup.** Render inside `ThemeProvider` and import `@gravity-ui/uikit/styles/styles.css`, or the shell renders unstyled. - **Page content goes through `renderContent`.** Render your routed content via the `renderContent` prop / `PageLayout`, not as `children`. + +## Documentation for AI agents + +Agent-readable documentation for the installed version is located in `node_modules/@gravity-ui/navigation/build/docs/INDEX.md`. diff --git a/src/content/local-docs/libs/table/README.md b/src/content/local-docs/libs/table/README.md index 48e72edd1aeb..8bd6962ee4cd 100644 --- a/src/content/local-docs/libs/table/README.md +++ b/src/content/local-docs/libs/table/README.md @@ -39,14 +39,14 @@ const BasicExample = () => { }; ``` -## Components +### Components There are two Table components that you can use: - `BaseTable` - a component with basic styles only; - `Table` - a component with Gravity UI based styles. -### Row selection +#### Row selection ```tsx import {selectionColumn} from '@gravity-ui/table'; @@ -81,7 +81,7 @@ const RowSelectionExample = () => { To use grouping with selection, use `useRowSelectionFixedHandler` hook. Without it parent row checkbox state will be wrong. https://github.com/TanStack/table/issues/4878 -### Custom Ranged Selection Column +#### Custom Ranged Selection Column The `useToggleRangeSelectionHandler` hook returns a change handler that listens for Shift+click events and performs ranged row selection. It needs to be passed a `CellContext` instance in order to have access to the table's and row's internal states. @@ -212,7 +212,7 @@ const columns: ColumnDef[] = [ **Note**: If the table contains nested rows, range selection will not work. At the moment, this is considered undefined behavior. -### Sorting +#### Sorting Learn about the column properties in the react-table [docs](https://tanstack.com/table/v8/docs/guide/sorting) @@ -256,7 +256,7 @@ const table = useTable({ }); ``` -### Grouping +#### Grouping ```tsx import type {ExpandedState, Row} from '@gravity-ui/table/tanstack'; @@ -345,7 +345,7 @@ const columns: ColumnDef[] = [ ]; ``` -### Reordering +#### Reordering ```tsx import type {ReorderingProviderProps} from '@gravity-ui/table'; @@ -392,7 +392,7 @@ const ReorderingExample = () => { }; ``` -### Column reordering +#### Column reordering Wrap the table with `ColumnReorderingProvider` to enable drag-and-drop reordering of columns by their headers. @@ -488,7 +488,7 @@ While dragging: ``` -### Virtualization +#### Virtualization Use if you want to use grid container as the scroll element (if you want to use window see window virtualization section). Be sure to set a fixed height on the container; otherwise, virtualization will not work. @@ -551,7 +551,7 @@ return ( ); ``` -### Window virtualization +#### Window virtualization Use if you want to use window as the scroll element @@ -586,7 +586,7 @@ const WindowVirtualizationExample = () => { }; ``` -### Resizing +#### Resizing ```tsx const columns: ColumnDef[] = [ @@ -609,7 +609,7 @@ const ResizingDemo = () => { }; ``` -### Column settings +#### Column settings ```tsx const columns: ColumnDef[] = [ @@ -739,3 +739,7 @@ A headless, TanStack-Table-powered data grid for Gravity UI apps — reach for i - **Sorting needs an accessor.** A column must have `accessorKey`/`accessorFn` for sorting to work; set `enableSorting` and provide `getRowId`. - **React 19 + React Compiler can skip re-renders.** This is an upstream TanStack Table issue — add the `'use no memo'` directive to the component or memoize `data`. - **Range selection breaks with nested rows.** Ranged selection is undefined behavior when the table has grouped/nested rows; use `useRowSelectionFixedHandler` for correct parent-checkbox state with grouping. + +## Documentation for AI agents + +Agent-readable documentation for the installed version is located in `node_modules/@gravity-ui/table/build/docs/INDEX.md`. diff --git a/src/content/local-docs/libs/uikit/README.md b/src/content/local-docs/libs/uikit/README.md index d6f5ce4c45cc..d07250bac5f5 100644 --- a/src/content/local-docs/libs/uikit/README.md +++ b/src/content/local-docs/libs/uikit/README.md @@ -1,113 +1,126 @@ -# UIKit · [![npm package](https://img.shields.io/npm/v/@gravity-ui/uikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/uikit) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/ci.yml?query=branch:main) [![storybook tests](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/test-storybook.yml?label=Storybook%20Tests&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/test-storybook.yml) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685?logo=storybook)](https://preview.gravity-ui.com/uikit/) +# UIKit · [![npm package](https://img.shields.io/npm/v/@gravity-ui/uikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/uikit) [![npm downloads](https://img.shields.io/npm/dm/@gravity-ui/uikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/uikit) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/ci.yml?query=branch:main) [![storybook tests](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/test-storybook.yml?label=Storybook%20Tests&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/test-storybook.yml) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685?logo=storybook)](https://preview.gravity-ui.com/uikit/) -A set of flexible, highly practical, and efficient React components for creating rich web applications. +[English](README.md) | [Русский](README-ru.md) + +A set of flexible, highly practical, and efficient React components for creating rich web applications. Part of the [Gravity UI](https://gravity-ui.com) design system. ![Cover image](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/uikit_cover.png) -## Resources +### ![Globe Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_light.svg#gh-light-mode-only) ![Globe Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_dark.svg#gh-dark-mode-only) [Website](https://gravity-ui.com)    ![Documentation Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_light.svg#gh-light-mode-only) ![Documentation Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_dark.svg#gh-dark-mode-only) [Documentation](https://gravity-ui.com/components/uikit/alert)    ![Figma Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_light.svg#gh-light-mode-only) ![Figma Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_dark.svg#gh-dark-mode-only) [Figma]()    ![Themer Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_light.svg#gh-light-mode-only) ![Themer Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_dark.svg#gh-dark-mode-only) [Themer](https://gravity-ui.com/themer)    ![Storybook Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_light.svg#gh-light-mode-only) ![Storybook Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_dark.svg#gh-dark-mode-only) [Storybook](https://preview.gravity-ui.com/uikit/)    ![Community Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_light.svg#gh-light-mode-only) ![Community Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_dark.svg#gh-dark-mode-only) [Community](https://t.me/gravity_ui) -### ![Globe Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_light.svg#gh-light-mode-only) ![Globe Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_dark.svg#gh-dark-mode-only) [Website](https://gravity-ui.com) + -### ![Documentation Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_light.svg#gh-light-mode-only) ![Documentation Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_dark.svg#gh-dark-mode-only) [Documentation](https://gravity-ui.com/components/uikit/alert) +## About -### ![Figma Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_light.svg#gh-light-mode-only) ![Figma Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_dark.svg#gh-dark-mode-only) [Figma]() +UIKit is the foundational package of the [Gravity UI](https://gravity-ui.com) design system — a battle-tested set of 70+ React components built for production web applications. It handles the hard parts: theming, accessibility, RTL layout, server-side rendering, and internationalization, so you can focus on building your product. -### ![Themer Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_light.svg#gh-light-mode-only) ![Themer Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_dark.svg#gh-dark-mode-only) [Themer](https://gravity-ui.com/themer) +Key features: -### ![Storybook Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_light.svg#gh-light-mode-only) ![Storybook Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_dark.svg#gh-dark-mode-only) [Storybook](https://preview.gravity-ui.com/uikit/) +- **70+ components** — inputs, overlays, data display, layout primitives, feedback, and more +- **Built-in theming** — light, dark, and high-contrast variants with a live [Themer](https://gravity-ui.com/themer) tool to customize tokens +- **RTL support** — full right-to-left layout direction -### ![Community Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_light.svg#gh-light-mode-only) ![Community Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_dark.svg#gh-dark-mode-only) [Community](https://t.me/gravity_ui) +Browse the full component catalog in [Storybook](https://preview.gravity-ui.com/uikit/) or the [documentation](https://gravity-ui.com/components/uikit/alert). - +## Getting Started + +### Prerequisites + +React 16.14, 17, 18, or 19 must be installed in your project. -## Install +### Installation ```shell -npm install --save-dev @gravity-ui/uikit +npm install @gravity-ui/uikit ``` ## Usage +Import components directly from the package: + ```jsx import {Button} from '@gravity-ui/uikit'; -const SubmitButton = +); ``` ### Styles -UIKit comes with base styling and theme. In order to everything look nice include this at the top of your entry file: +Include the base styles and fonts once at the top of your app entry point: ```js // index.js - import '@gravity-ui/uikit/styles/fonts.css'; import '@gravity-ui/uikit/styles/styles.css'; - -// ... ``` -UIKit supports different themes: light, dark and their contrast variants. Your app must be rendered inside `ThemeProvider`: +A SCSS [mixins](styles/mixins.scss) file with useful helpers is also available for use in your own stylesheets. -```js -import {createRoot} from 'react-dom/client'; -import {ThemeProvider} from '@gravity-ui/uikit'; - -const root = createRoot(document.getElementById('root')); -root.render( - - - , -); -``` +### Guides -It is possible to generate initial root CSS-classes during SSR to avoid theme flashing: +Read more: -```js -import {getRootClassName} from '@gravity-ui/uikit/server'; - -const theme = 'dark'; -const rootClassName = getRootClassName({theme}); - -const html = ` - - -
- - -`; -``` - -Also, there is a SCSS [mixins](styles/mixins.scss) file with useful helpers to use in your app. - -### I18N - -Some components contain text tokens (words and phrases). They come in two languages: `en` (default) and `ru`. -To set the language use `configure` function: - -```js -// index.js - -import {configure} from '@gravity-ui/uikit'; - -configure({ - lang: 'ru', -}); -``` +- [Theming](docs/theming.md) — enable light, dark, and high-contrast themes +- [Server-side rendering](docs/server-side-rendering.md) — generate the root CSS class on the server +- [Internationalization](docs/i18n.md) — set the built-in component language ## Development -To start the development server with storybook run the following: - ```shell git clone git@github.com:gravity-ui/uikit.git cd uikit npm ci -npm run start +npm run start # launches Storybook at http://localhost:7007 ``` +Other useful commands: + +```shell +npm test # run unit tests +npm run lint # lint JS, SCSS, and Markdown +npm run typecheck # TypeScript type-check +npm run playwright # run visual regression tests +``` + +## Maintainers + + + + + + + +
+ + amje
+ @amje + + 		+ + ValeraS
+ @ValeraS + + 		+ + korvin89
+ @korvin89 + +
+ +## Contributing + +Contributions are welcome! Please read [CONTRIBUTING.md](CONTRIBUTING.md) before submitting a pull request. For detailed PR guidelines see [contribute/pull-request.md](contribute/pull-request.md). + +We have [![contributors](https://img.shields.io/github/contributors/gravity-ui/uikit?label=contributors)](https://github.com/gravity-ui/uikit/graphs/contributors) contributors and counting — join us! + +Join the community on [Telegram](https://t.me/gravity_ui) for questions and discussion. + ## License Distributed under the MIT License. See [LICENSE](LICENSE) for details. @@ -142,3 +155,21 @@ The base React component and design-token library for Gravity UI apps — contro - [Layout components and spacings](./docs/layout.md) - [Theming, Colors & Branding](./docs/theming.md) - [Typography](./docs/typography.md) + +## Documentation for AI agents + +Agent-readable documentation for the installed version is located in `node_modules/@gravity-ui/uikit/build/docs/INDEX.md`. + +## Star History + +
+ + + + Star History Chart + +
+ +--- + +If you find UIKit useful, please consider giving it a ⭐ on [GitHub](https://github.com/gravity-ui/uikit) — it helps others discover the project. From 0e66912d506c276e1d4b53dec8010c1f2f0ce6a8 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 16 Jul 2026 06:17:45 +0000 Subject: [PATCH 2/5] translations: for package charts --- .../local-docs/libs/charts/README-de.md | 14 +++++--- .../local-docs/libs/charts/README-es.md | 26 ++++++++------- .../local-docs/libs/charts/README-fr.md | 26 ++++++++------- .../local-docs/libs/charts/README-ja.md | 32 +++++++++++-------- .../local-docs/libs/charts/README-ko.md | 30 +++++++++-------- .../local-docs/libs/charts/README-pt.md | 12 ++++--- .../local-docs/libs/charts/README-zh.md | 30 +++++++++-------- 7 files changed, 99 insertions(+), 71 deletions(-) diff --git a/src/content/local-docs/libs/charts/README-de.md b/src/content/local-docs/libs/charts/README-de.md index 930c7a611591..1ce0bf7e1d7a 100644 --- a/src/content/local-docs/libs/charts/README-de.md +++ b/src/content/local-docs/libs/charts/README-de.md @@ -1,6 +1,6 @@ # Gravity UI Charts · [![npm package](https://img.shields.io/npm/v/@gravity-ui/charts)](https://www.npmjs.com/package/@gravity-ui/charts) [![License](https://img.shields.io/github/license/gravity-ui/charts)](LICENSE) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/charts/.github/workflows/ci.yml?label=CI&logo=github)](https://github.com/gravity-ui/charts/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/charts/) -React-Charting-Bibliothek mit über 10 Diagrammtypen: Fläche, Balken, Linie, Kreis, Streu, Treemap und mehr. +React-Charting-Bibliothek mit über 10 Diagrammtypen: Fläche, Balken, Linie, Kreis, Streu, Baumkarte und mehr. ## Installation @@ -65,17 +65,17 @@ Verteilt unter der MIT-Lizenz. Details finden Sie in [LICENSE](LICENSE). ## Für KI-Agenten -Eine deklarative React-Charting-Bibliothek für Gravity UI-Apps – rendert Linien-, Flächen-, Balken-, Kreis-, Streu-, Treemap- und andere Diagramme aus einer einzigen `data`-Konfiguration, die passend zum Rest der App thematisiert ist. +Eine deklarative React-Charting-Bibliothek für Gravity UI-Apps – rendert Linien-, Flächen-, Balken-, Kreis-, Streu-, Baumkarten- und andere Diagramme aus einer einzigen `data`-Konfiguration, die thematisch auf den Rest der App abgestimmt ist. ### Wann verwenden - Standard-Geschäftsdiagramme: `line`, `area`, `bar-x`/`bar-y`, `pie`, `scatter`, `treemap`, `waterfall`, `sankey`, `radar`, `heatmap`, `funnel`, `x-range`. - Visualisierungen, die dem Gravity UI-Theming (hell/dunkel) folgen und Tokens mit einer `@gravity-ui/uikit`-App teilen müssen. -- Rendern eines Diagramms aus deklarativen Daten anstatt imperativer Zeichnung. +- Rendern eines Diagramms aus deklarativen Daten anstatt imperativer Zeichenoperationen. ### Wann nicht verwenden -- Projekte, die noch `@gravity-ui/chartkit` verwenden – das ist der ältere, Adapter-basierte Wrapper (YAGR/Highcharts/D3); dieses Paket ist der moderne, eigenständige Renderer und kein direkter Ersatz. +- Projekte, die noch `@gravity-ui/chartkit` verwenden – dies ist der ältere Adapter-basierte Wrapper (YAGR/Highcharts/D3); dieses Paket ist der moderne eigenständige Renderer und kein direkter Ersatz. - Reine Tabellendaten – verwenden Sie [`@gravity-ui/table`](https://github.com/gravity-ui/table). - Nicht-React- oder reine Server-Rendering – `Chart` rendert React SVG und benötigt das DOM. @@ -95,4 +95,8 @@ Eine deklarative React-Charting-Bibliothek für Gravity UI-Apps – rendert Lini - [HTML-Inhalt](./docs/diplodoc/pages/guides/html.md) - [Wertformatierung](./docs/diplodoc/pages/guides/value-formatting.md) - [Datenbeschriftungen](./docs/diplodoc/pages/guides/data-labels.md) -- [Achsentypen](./docs/diplodoc/pages/guides/axis-types.md) \ No newline at end of file +- [Achsentypen](./docs/diplodoc/pages/guides/axis-types.md) + +## Dokumentation für KI-Agenten + +Agentenlesbare Dokumentation für die installierte Version befindet sich in `node_modules/@gravity-ui/charts/dist/docs/INDEX.md`. \ No newline at end of file diff --git a/src/content/local-docs/libs/charts/README-es.md b/src/content/local-docs/libs/charts/README-es.md index b98135864dd0..dccc6ee930e1 100644 --- a/src/content/local-docs/libs/charts/README-es.md +++ b/src/content/local-docs/libs/charts/README-es.md @@ -8,7 +8,7 @@ Librería de gráficos React con más de 10 tipos de gráficos: área, barras, l npm install @gravity-ui/uikit @gravity-ui/charts ``` -`@gravity-ui/uikit` es una dependencia peer requerida — proporciona la tematización y los estilos de los que dependen los gráficos. +`@gravity-ui/uikit` es una dependencia peer requerida; proporciona la tematización y los estilos de los que dependen los gráficos. ## Uso @@ -61,28 +61,28 @@ export default function App() { ## Licencia -Distribuido bajo la Licencia MIT. Ver [LICENSE](LICENSE) para más detalles. +Distribuido bajo la Licencia MIT. Consulta [LICENSE](LICENSE) para más detalles. ## Para agentes de IA -Una librería declarativa de gráficos React para aplicaciones Gravity UI — renderiza gráficos de línea, área, barras, pastel, dispersión, treemap y otros a partir de una única configuración `data`, tematizada para que coincida con el resto de la aplicación. +Una librería declarativa de gráficos React para aplicaciones Gravity UI; renderiza gráficos de línea, área, barras, pastel, dispersión, treemap y otros a partir de una única configuración `data`, tematizada para que coincida con el resto de la aplicación. -### Cuándo usar +### Cuándo usarla - Gráficos empresariales estándar: `line`, `area`, `bar-x`/`bar-y`, `pie`, `scatter`, `treemap`, `waterfall`, `sankey`, `radar`, `heatmap`, `funnel`, `x-range`. - Visualizaciones que deben seguir la tematización de Gravity UI (clara/oscura) y compartir tokens con una aplicación `@gravity-ui/uikit`. - Renderizar un gráfico a partir de datos declarativos en lugar de dibujarlo imperativamente. -### Cuándo no usar +### Cuándo no usarla -- Proyectos que aún usan `@gravity-ui/chartkit` — ese es el antiguo wrapper basado en adaptadores (YAGR/Highcharts/D3); este paquete es el renderizador independiente moderno y no es un reemplazo directo. -- Datos tabulares simples — usa [`@gravity-ui/table`](https://github.com/gravity-ui/table). -- Renderizado no-React o solo del lado del servidor — `Chart` renderiza SVG de React y necesita el DOM. +- Proyectos que aún usan `@gravity-ui/chartkit`; ese es el antiguo wrapper basado en adaptadores (YAGR/Highcharts/D3); este paquete es el renderizador independiente moderno y no es un reemplazo directo. +- Datos tabulares simples; usa [`@gravity-ui/table`](https://github.com/gravity-ui/table). +- Renderizado no-React o solo del lado del servidor; `Chart` renderiza SVG en React y necesita el DOM. ### Errores comunes -- **El componente es `Chart`, no `ChartKit`.** Importa `{Chart}` desde `@gravity-ui/charts`; `ChartKit` pertenece al paquete legado separado `@gravity-ui/chartkit`. -- **La prop `data` es `data`, con la forma `{series: {data: [...]}}`.** Cada entrada en `series.data` es una serie con su propio `type` y array `data` — no hay un array de series de nivel superior. +- **El componente es `Chart`, no `ChartKit`.** Importa `{Chart}` desde `@gravity-ui/charts`; `ChartKit` pertenece al paquete independiente heredado `@gravity-ui/chartkit`. +- **La prop `data` es `data`, con la forma `{series: {data: [...]}}`.** Cada entrada en `series.data` es una serie con su propio `type` y array `data`; no hay un array de series de nivel superior. - **Nada se renderiza sin un contenedor con tamaño.** `Chart` llena su contenedor padre, así que dale al envoltorio una altura explícita. - **Requiere configuración de uikit.** Envuelve en `ThemeProvider` e importa `@gravity-ui/uikit/styles/styles.css`; `@gravity-ui/uikit` es una dependencia peer requerida. @@ -95,4 +95,8 @@ Una librería declarativa de gráficos React para aplicaciones Gravity UI — re - [Contenido HTML](./docs/diplodoc/pages/guides/html.md) - [Formato de valores](./docs/diplodoc/pages/guides/value-formatting.md) - [Etiquetas de datos](./docs/diplodoc/pages/guides/data-labels.md) -- [Tipos de ejes](./docs/diplodoc/pages/guides/axis-types.md) \ No newline at end of file +- [Tipos de ejes](./docs/diplodoc/pages/guides/axis-types.md) + +## Documentación para agentes de IA + +La documentación legible por agentes para la versión instalada se encuentra en `node_modules/@gravity-ui/charts/dist/docs/INDEX.md`. \ No newline at end of file diff --git a/src/content/local-docs/libs/charts/README-fr.md b/src/content/local-docs/libs/charts/README-fr.md index 02e92bf71aee..b4cb67572881 100644 --- a/src/content/local-docs/libs/charts/README-fr.md +++ b/src/content/local-docs/libs/charts/README-fr.md @@ -1,6 +1,6 @@ # Gravity UI Charts · [![npm package](https://img.shields.io/npm/v/@gravity-ui/charts)](https://www.npmjs.com/package/@gravity-ui/charts) [![License](https://img.shields.io/github/license/gravity-ui/charts)](LICENSE) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/charts/.github/workflows/ci.yml?label=CI&logo=github)](https://github.com/gravity-ui/charts/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/charts/) -Bibliothèque de graphiques React avec plus de 10 types de graphiques : aire, barre, ligne, camembert, dispersion, treemap, et plus encore. +Bibliothèque de graphiques React avec plus de 10 types de graphiques : aire, barres, lignes, secteurs, nuage de points, arbre, et plus encore. ## Installation @@ -49,7 +49,7 @@ export default function App() { } ``` -`Chart` s'adapte à la taille de son parent, l'élément enveloppant doit donc avoir une hauteur. +`Chart` s'adapte à la taille de son parent, donc l'élément enveloppant doit avoir une hauteur. ## Documentation @@ -65,26 +65,26 @@ Distribué sous la licence MIT. Voir [LICENSE](LICENSE) pour les détails. ## Pour les agents IA -Une bibliothèque de graphiques React déclarative pour les applications Gravity UI — affichez des graphiques linéaires, d'aire, à barres, circulaires, de dispersion, en arbre, et d'autres à partir d'une seule configuration `data`, thémée pour correspondre au reste de l'application. +Une bibliothèque de graphiques déclarative pour React, destinée aux applications Gravity UI — affiche des graphiques linéaires, en aire, à barres, circulaires, en nuage de points, en arbre, et d'autres, à partir d'une seule configuration `data`, avec un thème assorti au reste de l'application. ### Quand l'utiliser -- Graphiques d'entreprise standard : `line`, `area`, `bar-x`/`bar-y`, `pie`, `scatter`, `treemap`, `waterfall`, `sankey`, `radar`, `heatmap`, `funnel`, `x-range`. +- Graphiques d'entreprise standards : `line`, `area`, `bar-x`/`bar-y`, `pie`, `scatter`, `treemap`, `waterfall`, `sankey`, `radar`, `heatmap`, `funnel`, `x-range`. - Visualisations qui doivent suivre le thème Gravity UI (clair/sombre) et partager des jetons avec une application `@gravity-ui/uikit`. - Affichage d'un graphique à partir de données déclaratives plutôt que d'un dessin impératif. ### Quand ne pas l'utiliser -- Projets toujours sur `@gravity-ui/chartkit` — il s'agit de l'ancien wrapper basé sur des adaptateurs (YAGR/Highcharts/D3) ; ce package est le moteur de rendu autonome moderne et n'est pas un remplacement direct. +- Projets encore sur `@gravity-ui/chartkit` — il s'agit de l'ancien wrapper basé sur des adaptateurs (YAGR/Highcharts/D3) ; ce package est le moteur de rendu autonome moderne et n'est pas un remplacement direct. - Données tabulaires brutes — utilisez [`@gravity-ui/table`](https://github.com/gravity-ui/table). -- Rendu non-React ou uniquement côté serveur — `Chart` rend des SVG React et a besoin du DOM. +- Rendu non-React ou uniquement côté serveur — `Chart` rend des SVG React et nécessite le DOM. ### Pièges courants -- **Le composant est `Chart`, pas `ChartKit`.** Importez `{Chart}` depuis `@gravity-ui/charts` ; `ChartKit` appartient au package distinct hérité `@gravity-ui/chartkit`. -- **La prop `data` est `data`, structurée `{series: {data: [...]}}`.** Chaque entrée dans `series.data` représente une série avec son propre `type` et tableau `data` — il n'y a pas de tableau de séries de niveau supérieur. -- **Rien ne s'affiche sans un conteneur dimensionné.** `Chart` remplit son parent, donnez donc à l'élément enveloppant une hauteur explicite. -- **Nécessite une configuration uikit.** Enveloppez dans `ThemeProvider` et importez `@gravity-ui/uikit/styles/styles.css` ; `@gravity-ui/uikit` est une dépendance pair requise. +- **Le composant est `Chart`, pas `ChartKit`.** Importez `{Chart}` depuis `@gravity-ui/charts` ; `ChartKit` appartient au package distinct et hérité `@gravity-ui/chartkit`. +- **La prop `data` est `data`, structurée `{series: {data: [...]}}`.** Chaque entrée dans `series.data` représente une série avec son propre `type` et son tableau `data` — il n'y a pas de tableau de séries de niveau supérieur. +- **Rien ne s'affiche sans un conteneur dimensionné.** `Chart` remplit son parent, donc donnez une hauteur explicite au wrapper. +- **Configuration uikit requise.** Enveloppez dans `ThemeProvider` et importez `@gravity-ui/uikit/styles/styles.css` ; `@gravity-ui/uikit` est une dépendance pair requise. ### Documentation utile @@ -95,4 +95,8 @@ Une bibliothèque de graphiques React déclarative pour les applications Gravity - [Contenu HTML](./docs/diplodoc/pages/guides/html.md) - [Formatage des valeurs](./docs/diplodoc/pages/guides/value-formatting.md) - [Étiquettes de données](./docs/diplodoc/pages/guides/data-labels.md) -- [Types d'axes](./docs/diplodoc/pages/guides/axis-types.md) \ No newline at end of file +- [Types d'axes](./docs/diplodoc/pages/guides/axis-types.md) + +## Documentation pour les agents IA + +La documentation lisible par agent pour la version installée se trouve dans `node_modules/@gravity-ui/charts/dist/docs/INDEX.md`. \ No newline at end of file diff --git a/src/content/local-docs/libs/charts/README-ja.md b/src/content/local-docs/libs/charts/README-ja.md index 62eb9b178985..d32d7eecee33 100644 --- a/src/content/local-docs/libs/charts/README-ja.md +++ b/src/content/local-docs/libs/charts/README-ja.md @@ -1,6 +1,6 @@ # Gravity UI Charts · [![npm package](https://img.shields.io/npm/v/@gravity-ui/charts)](https://www.npmjs.com/package/@gravity-ui/charts) [![License](https://img.shields.io/github/license/gravity-ui/charts)](LICENSE) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/charts/.github/workflows/ci.yml?label=CI&logo=github)](https://github.com/gravity-ui/charts/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/charts/) -Reactのチャートライブラリ。エリア、バー、ライン、パイ、散布図、ツリーマップなど10種類以上のチャートタイプを提供します。 +10種類以上のグラフ（エリア、棒、線、円、散布図、ツリーマップなど）を備えたReactのグラフ描画ライブラリです。 ## インストール @@ -8,7 +8,7 @@ Reactのチャートライブラリ。エリア、バー、ライン、パイ、 npm install @gravity-ui/uikit @gravity-ui/charts ``` -`@gravity-ui/uikit` は必須のピア依存関係です。チャートが依存するテーマ設定とスタイルを提供します。 +`@gravity-ui/uikit` は必須のピア依存関係です。グラフが依存するテーマ設定とスタイルを提供します。 ## 使用方法 @@ -65,26 +65,26 @@ MIT License に基づいて配布されています。詳細は [LICENSE](LICENS ## AIエージェント向け -Gravity UIアプリ向けの宣言的なReactチャートライブラリ。単一の`data`設定から、ライン、エリア、バー、パイ、散布図、ツリーマップなどのチャートを、アプリ全体と一致するテーマでレンダリングします。 +Gravity UI アプリケーション向けの宣言的な React グラフ描画ライブラリです。単一の `data` 設定から、線グラフ、エリアグラフ、棒グラフ、円グラフ、散布図、ツリーマップなどのグラフを、アプリの他の部分と調和するテーマでレンダリングします。 ### 使用すべき場合 -- 標準的なビジネスチャート: `line`, `area`, `bar-x`/`bar-y`, `pie`, `scatter`, `treemap`, `waterfall`, `sankey`, `radar`, `heatmap`, `funnel`, `x-range`。 -- Gravity UIのテーマ設定（ライト/ダーク）に従い、`@gravity-ui/uikit`アプリとトークンを共有する必要があるビジュアライゼーション。 -- 命令的に描画するのではなく、宣言的なデータからチャートをレンダリングする場合。 +- 標準的なビジネスグラフ: `line`、`area`、`bar-x`/`bar-y`、`pie`、`scatter`、`treemap`、`waterfall`、`sankey`、`radar`、`heatmap`、`funnel`、`x-range`。 +- Gravity UI のテーマ設定（ライト/ダーク）に従い、`@gravity-ui/uikit` アプリとトークンを共有する必要があるビジュアライゼーション。 +- 命令的に描画するのではなく、宣言的なデータからグラフをレンダリングする場合。 ### 使用すべきでない場合 -- まだ`@gravity-ui/chartkit`を使用しているプロジェクト。これは古いアダプターベースのラッパー（YAGR/Highcharts/D3）であり、このパッケージは最新のスタンドアロンレンダラーであり、ドロップイン置換ではありません。 -- 単純な表形式データ。[`@gravity-ui/table`](https://github.com/gravity-ui/table)を使用してください。 -- React以外またはサーバー専用のレンダリング。`Chart`はReact SVGをレンダリングし、DOMが必要です。 +- まだ `@gravity-ui/chartkit` を使用しているプロジェクト。これは古いアダプターベースのラッパー（YAGR/Highcharts/D3）であり、このパッケージは最新のスタンドアロンレンダラーであり、ドロップインの代替ではありません。 +- 単純な表形式データ。[`@gravity-ui/table`](https://github.com/gravity-ui/table) を使用してください。 +- React を使用しない、またはサーバーサイドのみのレンダリング。`Chart` は React SVG をレンダリングし、DOM を必要とします。 -### よくある落とし穴 +### よくある間違い - **コンポーネント名は `Chart` であり、`ChartKit` ではありません。** `@gravity-ui/charts` から `{Chart}` をインポートしてください。`ChartKit` は、別のレガシーパッケージである `@gravity-ui/chartkit` に属します。 -- **`data` プロップは `data` で、形状は `{series: {data: [...]}}` です。** `series.data` の各エントリは、独自の `type` と `data` 配列を持つ1つのシリーズです。シリーズのトップレベル配列はありません。 +- **`data` プロップは `data` で、形状は `{series: {data: [...]}}` です。** `series.data` の各エントリは、独自の `type` と `data` 配列を持つ 1 つのシリーズです。シリーズのトップレベル配列はありません。 - **サイズ指定のないコンテナでは何もレンダリングされません。** `Chart` は親要素を埋めるため、ラッパーに明示的な高さを指定してください。 -- **uikitの設定が必要です。** `ThemeProvider` でラップし、`@gravity-ui/uikit/styles/styles.css` をインポートしてください。`@gravity-ui/uikit` は必須のピア依存関係です。 +- **uikit のセットアップが必要です。** `ThemeProvider` でラップし、`@gravity-ui/uikit/styles/styles.css` をインポートしてください。`@gravity-ui/uikit` は必須のピア依存関係です。 ### 役立つドキュメント @@ -92,7 +92,11 @@ Gravity UIアプリ向けの宣言的なReactチャートライブラリ。単 - [テーマ設定](./docs/diplodoc/pages/guides/theming.md) - [ツールチップ](./docs/diplodoc/pages/guides/tooltip.md) - [凡例](./docs/diplodoc/pages/guides/legend.md) -- [HTMLコンテンツ](./docs/diplodoc/pages/guides/html.md) +- [HTML コンテンツ](./docs/diplodoc/pages/guides/html.md) - [値のフォーマット](./docs/diplodoc/pages/guides/value-formatting.md) - [データラベル](./docs/diplodoc/pages/guides/data-labels.md) -- [軸タイプ](./docs/diplodoc/pages/guides/axis-types.md) \ No newline at end of file +- [軸の種類](./docs/diplodoc/pages/guides/axis-types.md) + +## AIエージェント向けドキュメント + +インストールされているバージョンのエージェント可読ドキュメントは、`node_modules/@gravity-ui/charts/dist/docs/INDEX.md` にあります。 \ No newline at end of file diff --git a/src/content/local-docs/libs/charts/README-ko.md b/src/content/local-docs/libs/charts/README-ko.md index f39540d485c1..8a43c89349e8 100644 --- a/src/content/local-docs/libs/charts/README-ko.md +++ b/src/content/local-docs/libs/charts/README-ko.md @@ -8,11 +8,11 @@ npm install @gravity-ui/uikit @gravity-ui/charts ``` -`@gravity-ui/uikit`은 필수 피어 종속성입니다. 차트가 의존하는 테마 및 스타일을 제공합니다. +`@gravity-ui/uikit`은 필수 peer dependency입니다. 이 라이브러리는 차트가 의존하는 테마 및 스타일을 제공합니다. ## 사용법 -진입점에서 `@gravity-ui/uikit` 스타일을 한 번 임포트하고, 앱을 `ThemeProvider`로 감싼 다음, 명시적인 높이를 가진 컨테이너 안에 `Chart`를 렌더링하세요. +애플리케이션의 진입점에서 `@gravity-ui/uikit` 스타일을 한 번 임포트하고, 앱을 `ThemeProvider`로 감싼 후, 명시적인 높이를 가진 컨테이너 안에 `Chart`를 렌더링하세요. ```tsx import {ThemeProvider} from '@gravity-ui/uikit'; @@ -49,7 +49,7 @@ export default function App() { } ``` -`Chart`는 부모 요소의 크기에 맞춰 조정되므로, 감싸는 요소에는 높이가 지정되어야 합니다. +`Chart`는 부모 요소의 크기에 맞춰 조정되므로, 감싸는 요소에는 반드시 높이를 지정해야 합니다. ## 문서 @@ -65,26 +65,26 @@ MIT 라이선스에 따라 배포됩니다. 자세한 내용은 [LICENSE](LICENS ## AI 에이전트용 -Gravity UI 앱을 위한 선언형 React 차트 라이브러리 — 단일 `data` 구성으로 선, 영역, 막대, 파이, 산점도, 트리맵 및 기타 차트를 렌더링하며, 앱의 나머지 부분과 일치하도록 테마가 적용됩니다. +Gravity UI 앱을 위한 선언형 React 차트 라이브러리입니다. 단일 `data` 구성으로 선, 영역, 막대, 파이, 산점도, 트리맵 등 다양한 차트를 렌더링하며, 앱의 다른 부분과 일치하도록 테마가 적용됩니다. ### 언제 사용해야 할까요? - 표준 비즈니스 차트: `line`, `area`, `bar-x`/`bar-y`, `pie`, `scatter`, `treemap`, `waterfall`, `sankey`, `radar`, `heatmap`, `funnel`, `x-range`. - Gravity UI 테마(라이트/다크)를 따르고 `@gravity-ui/uikit` 앱과 토큰을 공유해야 하는 시각화. -- 명령형으로 그리는 대신 선언형 데이터에서 차트를 렌더링하는 경우. +- 명령형으로 그리는 대신 선언형 데이터로부터 차트를 렌더링할 때. ### 언제 사용하지 않아야 할까요? -- 아직 `@gravity-ui/chartkit`을 사용하는 프로젝트 — 이는 이전 어댑터 기반 래퍼(YAGR/Highcharts/D3)이며, 이 패키지는 최신 독립형 렌더러이며 드롭인 대체재가 아닙니다. -- 일반적인 테이블 형식 데이터 — [`@gravity-ui/table`](https://github.com/gravity-ui/table)을 사용하세요. -- React가 아니거나 서버 전용 렌더링 — `Chart`는 React SVG를 렌더링하며 DOM이 필요합니다. +- 아직 `@gravity-ui/chartkit`을 사용하는 프로젝트: 이는 이전 어댑터 기반 래퍼(YAGR/Highcharts/D3)이며, 이 패키지는 최신 독립형 렌더러이므로 직접적인 대체품이 아닙니다. +- 일반적인 테이블 형식 데이터: [`@gravity-ui/table`](https://github.com/gravity-ui/table)을 사용하세요. +- React가 아니거나 서버 전용 렌더링: `Chart`는 React SVG를 렌더링하며 DOM이 필요합니다. -### 일반적인 함정 +### 일반적인 주의사항 - **컴포넌트 이름은 `Chart`이며 `ChartKit`이 아닙니다.** `@gravity-ui/charts`에서 `{Chart}`를 임포트하세요. `ChartKit`은 별도의 레거시 `@gravity-ui/chartkit` 패키지에 속합니다. -- **`data` prop은 `{series: {data: [...]}}` 형식의 `data`입니다.** `series.data`의 각 항목은 자체 `type`과 `data` 배열을 가진 하나의 시리즈입니다. 최상위 배열은 없습니다. -- **크기가 지정되지 않은 컨테이너 없이는 아무것도 렌더링되지 않습니다.** `Chart`는 부모를 채우므로 래퍼에 명시적인 높이를 지정하세요. -- **uikit 설정이 필요합니다.** `ThemeProvider`로 감싸고 `@gravity-ui/uikit/styles/styles.css`를 임포트하세요. `@gravity-ui/uikit`은 필수 피어 종속성입니다. +- **`data` prop은 `{series: {data: [...]}}` 형식입니다.** `series.data`의 각 항목은 자체 `type`과 `data` 배열을 가진 하나의 시리즈입니다. 최상위 배열은 없습니다. +- **크기가 지정된 컨테이너 없이는 아무것도 렌더링되지 않습니다.** `Chart`는 부모 요소를 채우므로, 래퍼에 명시적인 높이를 지정해야 합니다. +- **uikit 설정이 필요합니다.** `ThemeProvider`로 감싸고 `@gravity-ui/uikit/styles/styles.css`를 임포트하세요. `@gravity-ui/uikit`은 필수 peer dependency입니다. ### 유용한 문서 @@ -95,4 +95,8 @@ Gravity UI 앱을 위한 선언형 React 차트 라이브러리 — 단일 `data - [HTML 콘텐츠](./docs/diplodoc/pages/guides/html.md) - [값 형식 지정](./docs/diplodoc/pages/guides/value-formatting.md) - [데이터 레이블](./docs/diplodoc/pages/guides/data-labels.md) -- [축 유형](./docs/diplodoc/pages/guides/axis-types.md) \ No newline at end of file +- [축 유형](./docs/diplodoc/pages/guides/axis-types.md) + +## AI 에이전트용 문서 + +설치된 버전에 대한 에이전트가 읽을 수 있는 문서는 `node_modules/@gravity-ui/charts/dist/docs/INDEX.md`에 있습니다. \ No newline at end of file diff --git a/src/content/local-docs/libs/charts/README-pt.md b/src/content/local-docs/libs/charts/README-pt.md index c209296db921..4922cb686366 100644 --- a/src/content/local-docs/libs/charts/README-pt.md +++ b/src/content/local-docs/libs/charts/README-pt.md @@ -8,7 +8,7 @@ Biblioteca de gráficos React com mais de 10 tipos de gráficos: área, barra, l npm install @gravity-ui/uikit @gravity-ui/charts ``` -`@gravity-ui/uikit` é uma dependência peer obrigatória — ela fornece os temas e estilos dos quais os gráficos dependem. +`@gravity-ui/uikit` é uma dependência peer obrigatória — ela fornece a temática e os estilos dos quais os gráficos dependem. ## Uso @@ -65,7 +65,7 @@ Distribuído sob a Licença MIT. Veja [LICENSE](LICENSE) para detalhes. ## Para agentes de IA -Uma biblioteca declarativa de gráficos React para aplicativos Gravity UI — renderize gráficos de linha, área, barra, pizza, dispersão, treemap e outros a partir de uma única configuração `data`, com tema para combinar com o restante do aplicativo. +Uma biblioteca declarativa de gráficos React para aplicativos Gravity UI — renderiza gráficos de linha, área, barra, pizza, dispersão, treemap e outros a partir de uma única configuração `data`, com tema para combinar com o restante do aplicativo. ### Quando usar @@ -89,10 +89,14 @@ Uma biblioteca declarativa de gráficos React para aplicativos Gravity UI — re ### Documentos úteis - [Começando](./docs/diplodoc/pages/get-started.md) -- [Tematização](./docs/diplodoc/pages/guides/theming.md) +- [Temática](./docs/diplodoc/pages/guides/theming.md) - [Tooltip](./docs/diplodoc/pages/guides/tooltip.md) - [Legenda](./docs/diplodoc/pages/guides/legend.md) - [Conteúdo HTML](./docs/diplodoc/pages/guides/html.md) - [Formatação de Valor](./docs/diplodoc/pages/guides/value-formatting.md) - [Rótulos de Dados](./docs/diplodoc/pages/guides/data-labels.md) -- [Tipos de Eixo](./docs/diplodoc/pages/guides/axis-types.md) \ No newline at end of file +- [Tipos de Eixo](./docs/diplodoc/pages/guides/axis-types.md) + +## Documentação para agentes de IA + +A documentação legível por agente para a versão instalada está localizada em `node_modules/@gravity-ui/charts/dist/docs/INDEX.md`. \ No newline at end of file diff --git a/src/content/local-docs/libs/charts/README-zh.md b/src/content/local-docs/libs/charts/README-zh.md index 004168a24a4d..3ed81f037e88 100644 --- a/src/content/local-docs/libs/charts/README-zh.md +++ b/src/content/local-docs/libs/charts/README-zh.md @@ -8,11 +8,11 @@ npm install @gravity-ui/uikit @gravity-ui/charts ``` -`@gravity-ui/uikit` 是一个必需的对等依赖项——它提供了图表依赖的主题和样式。 +`@gravity-ui/uikit` 是一个必需的对等依赖项 — 它提供了图表所依赖的主题和样式。 ## 用法 -在你的入口文件中导入一次 `@gravity-ui/uikit` 样式，用 `ThemeProvider` 包裹你的应用，并在一个具有明确高度的容器内渲染 `Chart`： +在你的入口文件中导入一次 `@gravity-ui/uikit` 样式，用 `ThemeProvider` 包裹你的应用，并在一个具有明确高度的容器内渲染 `Chart` 组件： ```tsx import {ThemeProvider} from '@gravity-ui/uikit'; @@ -49,7 +49,7 @@ export default function App() { } ``` -`Chart` 会自适应其父容器的大小，因此包裹元素必须有一个高度。 +`Chart` 组件会自适应其父容器的大小，因此包裹元素必须有一个高度。 ## 文档 @@ -65,34 +65,38 @@ export default function App() { ## 致 AI 代理 -一个声明式的 React 图表库，适用于 Gravity UI 应用——通过单一的 `data` 配置渲染折线图、面积图、柱状图、饼图、散点图、树状图和其他图表，并根据应用的主题进行样式设置。 +一个声明式的 React 图表库，适用于 Gravity UI 应用 — 从单一的 `data` 配置渲染折线图、面积图、柱状图、饼图、散点图、树状图和其他图表，并根据应用主题进行样式设置。 ### 何时使用 - 标准业务图表：`line`、`area`、`bar-x`/`bar-y`、`pie`、`scatter`、`treemap`、`waterfall`、`sankey`、`radar`、`heatmap`、`funnel`、`x-range`。 -- 必须遵循 Gravity UI 主题（浅色/深色）并与 `@gravity-ui/uikit` 应用共享 token 的可视化。 +- 需要遵循 Gravity UI 主题（浅色/深色）并与 `@gravity-ui/uikit` 应用共享 token 的可视化。 - 从声明式数据渲染图表，而不是命令式绘制。 -### 何时避免使用 +### 何时**不**使用 -- 仍在使用 `@gravity-ui/chartkit` 的项目——那是旧的基于适配器的包装器（YAGR/Highcharts/D3）；此包是现代的独立渲染器，并非直接替换。 -- 纯表格数据——请使用 [`@gravity-ui/table`](https://github.com/gravity-ui/table)。 -- 非 React 或仅服务器端渲染——`Chart` 渲染 React SVG 并需要 DOM。 +- 仍在使用 `@gravity-ui/chartkit` 的项目 — 那是旧的基于适配器的包装器（YAGR/Highcharts/D3）；此包是现代的独立渲染器，并非直接替换。 +- 纯表格数据 — 请使用 [`@gravity-ui/table`](https://github.com/gravity-ui/table)。 +- 非 React 或仅服务器端渲染 — `Chart` 渲染 React SVG 并需要 DOM。 ### 常见陷阱 - **组件是 `Chart`，而不是 `ChartKit`。** 从 `@gravity-ui/charts` 导入 `{Chart}`；`ChartKit` 属于独立的旧版 `@gravity-ui/chartkit` 包。 -- **`data` prop 是 `data`，结构为 `{series: {data: [...]}}`。** `series.data` 中的每个条目代表一个系列，它有自己的 `type` 和 `data` 数组——没有顶层的系列数组。 -- **没有尺寸容器则什么都不会渲染。** `Chart` 会填充其父容器，所以请给包裹元素一个明确的高度。 +- **`data` prop 的结构是 `{series: {data: [...]}}`。** `series.data` 中的每个条目代表一个系列，拥有自己的 `type` 和 `data` 数组 — 没有顶层的系列数组。 +- **没有尺寸容器则不会渲染任何内容。** `Chart` 会填充其父容器，因此请为包裹元素指定明确的高度。 - **需要 uikit 设置。** 用 `ThemeProvider` 包裹并导入 `@gravity-ui/uikit/styles/styles.css`；`@gravity-ui/uikit` 是必需的对等依赖项。 ### 有用的文档 - [入门](./docs/diplodoc/pages/get-started.md) -- [主题](./docs/diplodoc/pages/guides/theming.md) +- [主题化](./docs/diplodoc/pages/guides/theming.md) - [工具提示](./docs/diplodoc/pages/guides/tooltip.md) - [图例](./docs/diplodoc/pages/guides/legend.md) - [HTML 内容](./docs/diplodoc/pages/guides/html.md) - [数值格式化](./docs/diplodoc/pages/guides/value-formatting.md) - [数据标签](./docs/diplodoc/pages/guides/data-labels.md) -- [轴类型](./docs/diplodoc/pages/guides/axis-types.md) \ No newline at end of file +- [轴类型](./docs/diplodoc/pages/guides/axis-types.md) + +## AI 代理文档 + +已安装版本的代理可读文档位于 `node_modules/@gravity-ui/charts/dist/docs/INDEX.md`。 \ No newline at end of file From 56b5b0cc8b9e93ce7f05b2c62842f64f2944f17d Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 16 Jul 2026 06:18:02 +0000 Subject: [PATCH 3/5] translations: for package navigation --- .../local-docs/libs/navigation/README-de.md | 12 ++++-- .../local-docs/libs/navigation/README-es.md | 14 ++++--- .../local-docs/libs/navigation/README-fr.md | 26 +++++++------ .../local-docs/libs/navigation/README-ja.md | 32 +++++++++------- .../local-docs/libs/navigation/README-ko.md | 24 +++++++----- .../local-docs/libs/navigation/README-pt.md | 38 ++++++++++--------- .../local-docs/libs/navigation/README-zh.md | 38 ++++++++++--------- 7 files changed, 106 insertions(+), 78 deletions(-) diff --git a/src/content/local-docs/libs/navigation/README-de.md b/src/content/local-docs/libs/navigation/README-de.md index 19ad42ba3bc2..1acd27859062 100644 --- a/src/content/local-docs/libs/navigation/README-de.md +++ b/src/content/local-docs/libs/navigation/README-de.md @@ -59,7 +59,7 @@ https://codesandbox.io/p/devbox/recursing-dawn-6kc9vh ## Roadmap 2025 1. Unterstützung für SSR -2. Mehr Dokumentation und Beispiele für [Gravity UI](https://gravity-ui.com/ru/components/navigation/aside-header) hinzufügen +2. Weitere Dokumentation und Beispiele für [Gravity UI](https://gravity-ui.com/ru/components/navigation/aside-header) hinzufügen 3. Unterstützung für Navigation im UIKit-Themer 4. API für subheaderItem, menuItem, footerItem vereinheitlichen @@ -93,7 +93,7 @@ Verteilt unter der MIT-Lizenz. Details finden Sie in [LICENSE](LICENSE). ## Für KI-Agenten -Application-Shell-Navigationskomponenten für Gravity UI-Apps – die einklappbare `AsideHeader`-Seitenleiste sowie Fußzeilen, Schubladen, Logos, Hotkeys und Einstellungsfenster, die eine ganze Seite umrahmen. +Anwendungs-Shell-Navigationskomponenten für Gravity UI-Apps – die einklappbare `AsideHeader`-Seitenleiste sowie Fußzeilen, Schubladen, Logos, Hotkeys und Einstellungsfenster, die eine ganze Seite umrahmen. ### Wann zu verwenden @@ -109,8 +109,12 @@ Application-Shell-Navigationskomponenten für Gravity UI-Apps – die einklappba ### Häufige Fallstricke -- **`AsideHeader` ist gesteuert.** Sie müssen den zusammengeklappten Zustand mit `compact` verwalten und ihn in `onChangeCompact` aktualisieren; das Übergeben von `compact` ohne den Handler friert die Seitenleiste ein. +- **`AsideHeader` ist gesteuert.** Sie müssen den zusammengeklappten Zustand mit `compact` verwalten und ihn in `onChangeCompact` aktualisieren; das Übergeben von `compact` ohne Handler friert die Seitenleiste ein. - **Menüelemente sind `menuItems`, indiziert nach `id`.** Jedes Element ist `{id, title, icon, current, onItemClick}`; `icon` erwartet eine Icon-Komponente (z. B. von `@gravity-ui/icons`), keine Zeichenkette. - **Peer-Abhängigkeiten sind erforderlich.** `@gravity-ui/uikit`, `@gravity-ui/icons` und `@bem-react/classname` müssen zusammen mit `react`/`react-dom` installiert werden. - **Benötigt uikit-Setup.** Rendern Sie innerhalb von `ThemeProvider` und importieren Sie `@gravity-ui/uikit/styles/styles.css`, oder die Shell wird ungestylt gerendert. -- **Seiteninhalt wird über `renderContent` bereitgestellt.** Rendern Sie Ihren gerouteten Inhalt über die `renderContent`-Prop / `PageLayout`, nicht als `children`. \ No newline at end of file +- **Seiteninhalt wird über `renderContent` bereitgestellt.** Rendern Sie Ihren gerouteten Inhalt über die `renderContent`-Prop / `PageLayout`, nicht als `children`. + +## Dokumentation für KI-Agenten + +Agentenlesbare Dokumentation für die installierte Version befindet sich in `node_modules/@gravity-ui/navigation/build/docs/INDEX.md`. \ No newline at end of file diff --git a/src/content/local-docs/libs/navigation/README-es.md b/src/content/local-docs/libs/navigation/README-es.md index b86a6bbb62cf..d188a7cea8b2 100644 --- a/src/content/local-docs/libs/navigation/README-es.md +++ b/src/content/local-docs/libs/navigation/README-es.md @@ -60,7 +60,7 @@ https://codesandbox.io/p/devbox/recursing-dawn-6kc9vh 1. Soporte para SSR 2. Añadir más documentación y ejemplos a [Gravity UI](https://gravity-ui.com/ru/components/navigation/aside-header) -3. Soporte para la temática de Navigation en UIKit +3. Soporte para la navegación en el tema de UIKit 4. Unificar la API de `subheaderItem`, `menuItem`, `footerItem` ## Componentes @@ -85,7 +85,7 @@ https://codesandbox.io/p/devbox/recursing-dawn-6kc9vh ## API CSS -Se utiliza para la tematización de los componentes de Navigation +Se utiliza para la tematización de los componentes de Navegación ## Licencia @@ -103,8 +103,8 @@ Componentes de navegación de shell de aplicación para aplicaciones Gravity UI: ### Cuándo no usar -- Controles genéricos dentro de la página (botones, pestañas, menús, breadcrumbs): usa [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit); este paquete es el cromo exterior de la aplicación, no componentes generales. -- Renderizar el cuerpo de la página en sí a partir de una configuración: usa [`@gravity-ui/page-constructor`](https://github.com/gravity-ui/page-constructor). +- Controles genéricos dentro de la página (botones, pestañas, menús, breadcrumbs): usa [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit); este paquete es el borde exterior de la aplicación, no componentes generales. +- Renderizar el cuerpo de la página en sí mismo a partir de la configuración: usa [`@gravity-ui/page-constructor`](https://github.com/gravity-ui/page-constructor). - Enrutamiento del lado del cliente: esto solo proporciona la UI de navegación; conecta los clics a tu propio enrutador. ### Errores comunes @@ -113,4 +113,8 @@ Componentes de navegación de shell de aplicación para aplicaciones Gravity UI: - **Los elementos del menú son `menuItems`, indexados por `id`.** Cada elemento es `{id, title, icon, current, onItemClick}`; `icon` acepta un componente de icono (por ejemplo, de `@gravity-ui/icons`), no un nombre de cadena. - **Se requieren dependencias peer.** `@gravity-ui/uikit`, `@gravity-ui/icons` y `@bem-react/classname` deben instalarse junto con `react`/`react-dom`. - **Necesita configuración de uikit.** Renderiza dentro de `ThemeProvider` e importa `@gravity-ui/uikit/styles/styles.css`, o el shell se renderizará sin estilo. -- **El contenido de la página se pasa a través de `renderContent`.** Renderiza tu contenido enrutado a través de la prop `renderContent` / `PageLayout`, no como `children`. \ No newline at end of file +- **El contenido de la página se pasa a través de `renderContent`.** Renderiza tu contenido enrutado a través de la prop `renderContent` / `PageLayout`, no como `children`. + +## Documentación para agentes de IA + +La documentación legible por agentes para la versión instalada se encuentra en `node_modules/@gravity-ui/navigation/build/docs/INDEX.md`. \ No newline at end of file diff --git a/src/content/local-docs/libs/navigation/README-fr.md b/src/content/local-docs/libs/navigation/README-fr.md index 27db3c2da47a..2314efeb6ed4 100644 --- a/src/content/local-docs/libs/navigation/README-fr.md +++ b/src/content/local-docs/libs/navigation/README-fr.md @@ -1,6 +1,6 @@ # @gravity-ui/navigation · [![npm package](https://img.shields.io/npm/v/@gravity-ui/navigation)](https://www.npmjs.com/package/@gravity-ui/navigation) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/navigation/.github/workflows/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/navigation/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/navigation/) -### Navigation de l'en-tête latéral · [Aperçu →](https://preview.yandexcloud.dev/navigation/) +### Navigation dans l'en-tête latéral · [Aperçu →](https://preview.yandexcloud.dev/navigation/) ![](docs/images/showcase.png) @@ -18,7 +18,7 @@ npm install --dev @gravity-ui/uikit@^7.2.0 @gravity-ui/icons@^2.2.0 @bem-react/c ## Utilisation -Rendez `AsideHeader` comme la structure de l'application. C'est un composant contrôlé — vous gérez l'état réduit via `compact`/`onChangeCompact` — et le contenu de votre page passe par `renderContent`. Configurez d'abord les styles de `@gravity-ui/uikit` et `ThemeProvider` (voir le [guide des styles uikit](https://github.com/gravity-ui/uikit?tab=readme-ov-file#styles)). +Rendez `AsideHeader` comme la structure de l'application. C'est un composant contrôlé — vous gérez l'état replié via `compact`/`onChangeCompact` — et le contenu de votre page passe par `renderContent`. Configurez d'abord les styles de `@gravity-ui/uikit` et `ThemeProvider` (voir le [guide des styles uikit](https://github.com/gravity-ui/uikit?tab=readme-ov-file#styles)). ```tsx import React from 'react'; @@ -59,9 +59,9 @@ https://codesandbox.io/p/devbox/recursing-dawn-6kc9vh ## Feuille de route 2025 1. Prise en charge du SSR -2. Ajouter plus de documentation et d'exemples à [Gravity UI](https://gravity-ui.com/ru/components/navigation/aside-header) -3. Prise en charge de la navigation dans le thèmer UIKit -4. Unifier les API de `subheaderItem`, `menuItem`, `footerItem` +2. Ajout de plus de documentation et d'exemples sur [Gravity UI](https://gravity-ui.com/ru/components/navigation/aside-header) +3. Prise en charge de la navigation dans le thème UIKit +4. Unification des API `subheaderItem`, `menuItem`, `footerItem` ## Composants @@ -93,24 +93,28 @@ Distribué sous la licence MIT. Voir [LICENSE](LICENSE) pour les détails. ## Pour les agents IA -Composants de navigation pour la structure d'application des applications Gravity UI — la barre latérale `AsideHeader` rétractable, ainsi que les pieds de page, les tiroirs, le logo, les panneaux de raccourcis clavier et les paramètres qui encadrent une page entière. +Composants de navigation de la structure d'application pour les applications Gravity UI — la barre latérale `AsideHeader` rétractable, ainsi que les pieds de page, les tiroirs, le logo, les panneaux de raccourcis clavier et les paramètres qui encadrent une page entière. ### Quand l'utiliser -- La structure de navigation principale de l'application : `AsideHeader` (navigation latérale rétractable) avec `menuItems`, sections de sous-en-tête et de pied de page. +- La structure de navigation principale de l'application : `AsideHeader` (navigation latérale rétractable) avec `menuItems`, sous-en-tête et sections de pied de page. - Interface utilisateur de support : `Drawer`/`DrawerItem`, `Footer`/`MobileFooter`, `MobileHeader`, `HotkeysPanel`, `Settings`, `ActionBar`, `Logo`. -- Mise en page du contenu de la page dans la structure de navigation via `renderContent` / `PageLayout`. +- Mise en page du contenu de la page à l'intérieur de la structure de navigation via `renderContent` / `PageLayout`. ### Quand ne pas l'utiliser - Contrôles génériques dans la page (boutons, onglets, menus, fil d'Ariane) — utilisez [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit) ; ce package est le chrome externe de l'application, pas des composants généraux. - Rendu du corps de la page lui-même à partir de la configuration — utilisez [`@gravity-ui/page-constructor`](https://github.com/gravity-ui/page-constructor). -- Routage côté client — ceci fournit uniquement l'interface de navigation ; connectez les clics à votre propre routeur. +- Routage côté client — ceci fournit uniquement l'interface utilisateur de navigation ; connectez les clics à votre propre routeur. ### Pièges courants -- **`AsideHeader` est contrôlé.** Vous devez gérer l'état réduit avec `compact` et le mettre à jour dans `onChangeCompact` ; passer `compact` sans le gestionnaire fige la barre latérale. +- **`AsideHeader` est contrôlé.** Vous devez gérer l'état replié avec `compact` et le mettre à jour dans `onChangeCompact` ; passer `compact` sans le gestionnaire fige la barre latérale. - **Les éléments de menu sont `menuItems`, indexés par `id`.** Chaque élément est `{id, title, icon, current, onItemClick}`; `icon` accepte un composant d'icône (par exemple, de `@gravity-ui/icons`), pas un nom de chaîne. - **Les dépendances pair sont requises.** `@gravity-ui/uikit`, `@gravity-ui/icons`, et `@bem-react/classname` doivent être installés aux côtés de `react`/`react-dom`. - **Nécessite une configuration uikit.** Rendez à l'intérieur de `ThemeProvider` et importez `@gravity-ui/uikit/styles/styles.css`, sinon la structure s'affichera sans style. -- **Le contenu de la page passe par `renderContent`.** Rendez votre contenu routé via la prop `renderContent` / `PageLayout`, pas comme `children`. \ No newline at end of file +- **Le contenu de la page passe par `renderContent`.** Rendez votre contenu routé via la prop `renderContent` / `PageLayout`, pas comme `children`. + +## Documentation pour les agents IA + +La documentation lisible par l'agent pour la version installée se trouve dans `node_modules/@gravity-ui/navigation/build/docs/INDEX.md`. \ No newline at end of file diff --git a/src/content/local-docs/libs/navigation/README-ja.md b/src/content/local-docs/libs/navigation/README-ja.md index 8a890319d060..94d72eae4601 100644 --- a/src/content/local-docs/libs/navigation/README-ja.md +++ b/src/content/local-docs/libs/navigation/README-ja.md @@ -18,7 +18,7 @@ npm install --dev @gravity-ui/uikit@^7.2.0 @gravity-ui/icons@^2.2.0 @bem-react/c ## 使用方法 -`AsideHeader` をアプリのシェルとしてレンダリングします。これは制御コンポーネントであり、`compact`/`onChangeCompact` を介して折りたたみ状態を管理します。ページコンテンツは `renderContent` を介して渡します。まず `@gravity-ui/uikit` のスタイルと `ThemeProvider` を設定してください（[uikit スタイルガイド](https://github.com/gravity-ui/uikit?tab=readme-ov-file#styles)を参照）。 +`AsideHeader` をアプリのシェルとしてレンダリングします。これは制御コンポーネントであり、`compact`/`onChangeCompact` を介して折りたたみ状態を管理します。ページコンテンツは `renderContent` を介して渡します。最初に `@gravity-ui/uikit` のスタイルと `ThemeProvider` を設定してください（[uikit スタイルガイド](https://github.com/gravity-ui/uikit?tab=readme-ov-file#styles)を参照）。 ```tsx import React from 'react'; @@ -61,7 +61,7 @@ https://codesandbox.io/p/devbox/recursing-dawn-6kc9vh 1. SSR のサポート 2. [Gravity UI](https://gravity-ui.com/ru/components/navigation/aside-header) にドキュメントと例を追加 3. UIKit テーマでのナビゲーションのサポート -4. subheaderItem、menuItem、footerItem API の統一 +4. subheaderItem、menuItem、footerItem API の統合 ## コンポーネント @@ -89,28 +89,32 @@ Navigation のコンポーネントのテーマ設定に使用されます。 ## ライセンス -MIT License に基づいて配布されます。詳細については [LICENSE](LICENSE) を参照してください。 +MIT License に基づいて配布されています。詳細については [LICENSE](LICENSE) を参照してください。 ## AI エージェント向け -Gravity UI アプリケーション用のアプリケーションシェルナビゲーションコンポーネント。折りたたみ可能な `AsideHeader` サイドバーに加え、ページ全体を囲むフッター、ドロワー、ロゴ、ホットキー、設定パネルが含まれます。 +Gravity UI アプリケーション向けのアプリケーションシェルナビゲーションコンポーネント。折りたたみ可能な `AsideHeader` サイドバー、フッター、ドロワー、ロゴ、ホットキー、およびページ全体を囲む設定パネルが含まれます。 -### 使用する場面 +### 使用する場合 -- アプリケーションのプライマリナビゲーションフレーム: `AsideHeader`（折りたたみ可能なサイドナビゲーション）に `menuItems`、サブヘッダー、フッターセクションを組み合わせたもの。 +- アプリケーションのプライマリナビゲーションフレーム: `AsideHeader`（折りたたみ可能なサイドナビゲーション）に `menuItems`、サブヘッダー、フッターセクションが含まれます。 - サポートするシェル UI: `Drawer`/`DrawerItem`、`Footer`/`MobileFooter`、`MobileHeader`、`HotkeysPanel`、`Settings`、`ActionBar`、`Logo`。 -- `renderContent` / `PageLayout` を介したナビゲーションフレーム内でのページコンテンツのレイアウト。 +- `renderContent` / `PageLayout` を介したナビゲーションフレーム内のページコンテンツのレイアウト。 -### 使用しない場面 +### 使用しない場合 -- 一般的なページ内コントロール（ボタン、タブ、メニュー、パンくずリスト） — [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit) を使用してください。このパッケージは外側のアプリのクロームであり、汎用コンポーネントではありません。 +- 一般的なページ内コントロール（ボタン、タブ、メニュー、パンくずリスト） — [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit) を使用してください。このパッケージは外側のアプリのクロームであり、一般的なコンポーネントではありません。 - 設定からページ本文自体をレンダリングする場合 — [`@gravity-ui/page-constructor`](https://github.com/gravity-ui/page-constructor) を使用してください。 -- クライアントサイドルーティング — これはナビゲーション UI のみを提供します。クリックイベントを独自のルーターに接続してください。 +- クライアントサイドルーティング — これはナビゲーション UI のみを提供します。クリックを独自のルーターに接続してください。 -### よくある間違い +### よくある落とし穴 - **`AsideHeader` は制御されています。** `compact` で折りたたみ状態を管理し、`onChangeCompact` で更新する必要があります。ハンドラーなしで `compact` を渡すと、サイドバーがフリーズします。 - **メニュー項目は `menuItems` で、`id` でキー付けされます。** 各項目は `{id, title, icon, current, onItemClick}` です。`icon` には文字列名ではなく、アイコンコンポーネント（例: `@gravity-ui/icons` から）を指定します。 -- **ピア依存関係が必要です。** `@gravity-ui/uikit`、`@gravity-ui/icons`、`@bem-react/classname` は、`react`/`react-dom` と共にインストールする必要があります。 -- **uikit の設定が必要です。** `ThemeProvider` 内でレンダリングし、`@gravity-ui/uikit/styles/styles.css` をインポートしないと、シェルはスタイルなしでレンダリングされます。 -- **ページコンテンツは `renderContent` を介して渡されます。** ルーティングされたコンテンツは、`children` ではなく `renderContent` プロップ / `PageLayout` を介してレンダリングしてください。 \ No newline at end of file +- **ピア依存関係が必要です。** `@gravity-ui/uikit`、`@gravity-ui/icons`、`@bem-react/classname` は、`react`/`react-dom` と一緒にインストールする必要があります。 +- **uikit のセットアップが必要です。** `ThemeProvider` 内でレンダリングし、`@gravity-ui/uikit/styles/styles.css` をインポートしないと、シェルはスタイルなしでレンダリングされます。 +- **ページコンテンツは `renderContent` を介して渡されます。** ルーティングされたコンテンツは、`children` ではなく `renderContent` プロップ / `PageLayout` を介してレンダリングします。 + +## AI エージェント向けドキュメント + +インストールされているバージョンに関するエージェント可読ドキュメントは、`node_modules/@gravity-ui/navigation/build/docs/INDEX.md` にあります。 \ No newline at end of file diff --git a/src/content/local-docs/libs/navigation/README-ko.md b/src/content/local-docs/libs/navigation/README-ko.md index 8a1f757b05a5..b7a3bc029e66 100644 --- a/src/content/local-docs/libs/navigation/README-ko.md +++ b/src/content/local-docs/libs/navigation/README-ko.md @@ -10,7 +10,7 @@ npm install @gravity-ui/navigation ``` -프로젝트에 피어 의존성이 설치되어 있는지 확인하세요. +프로젝트에 peer dependencies가 설치되어 있는지 확인하세요. ```bash npm install --dev @gravity-ui/uikit@^7.2.0 @gravity-ui/icons@^2.2.0 @bem-react/classname@^1.6.0 react@^19.0.0 react-dom@^19.0.0 @@ -18,7 +18,7 @@ npm install --dev @gravity-ui/uikit@^7.2.0 @gravity-ui/icons@^2.2.0 @bem-react/c ## 사용법 -`AsideHeader`를 앱 셸로 렌더링하세요. 이 컴포넌트는 `compact`/`onChangeCompact`를 통해 접힌 상태를 제어하며, 페이지 콘텐츠는 `renderContent`를 통해 전달됩니다. 먼저 `@gravity-ui/uikit` 스타일과 `ThemeProvider`를 설정하세요 ( [uikit 스타일 가이드](https://github.com/gravity-ui/uikit?tab=readme-ov-file#styles) 참조). +`AsideHeader`를 앱 쉘로 렌더링하세요. 이 컴포넌트는 `compact`/`onChangeCompact`를 통해 접힌 상태를 제어하며, 페이지 콘텐츠는 `renderContent`를 통해 전달됩니다. 먼저 `@gravity-ui/uikit` 스타일과 `ThemeProvider`를 설정해야 합니다 ( [uikit 스타일 가이드](https://github.com/gravity-ui/uikit?tab=readme-ov-file#styles) 참조). ```tsx import React from 'react'; @@ -85,7 +85,7 @@ https://codesandbox.io/p/devbox/recursing-dawn-6kc9vh ## CSS API -네비게이션 컴포넌트의 테마 지정을 위해 사용됩니다. +네비게이션 컴포넌트의 테마화를 위해 사용됩니다. ## 라이선스 @@ -93,12 +93,12 @@ MIT 라이선스에 따라 배포됩니다. 자세한 내용은 [LICENSE](LICENS ## AI 에이전트용 -Gravity UI 앱을 위한 애플리케이션 셸 네비게이션 컴포넌트 — 접을 수 있는 `AsideHeader` 사이드바와 전체 페이지를 둘러싸는 푸터, 드로어, 로고, 핫키 및 설정 패널입니다. +Gravity UI 앱을 위한 애플리케이션 쉘 네비게이션 컴포넌트 — 접을 수 있는 `AsideHeader` 사이드바와 전체 페이지를 둘러싸는 푸터, 드로어, 로고, 핫키 및 설정 패널입니다. ### 언제 사용해야 할까요? - 앱의 기본 네비게이션 프레임: `AsideHeader` (접을 수 있는 사이드 네비게이션)와 `menuItems`, 서브헤더, 푸터 섹션. -- 지원 셸 UI: `Drawer`/`DrawerItem`, `Footer`/`MobileFooter`, `MobileHeader`, `HotkeysPanel`, `Settings`, `ActionBar`, `Logo`. +- 지원 쉘 UI: `Drawer`/`DrawerItem`, `Footer`/`MobileFooter`, `MobileHeader`, `HotkeysPanel`, `Settings`, `ActionBar`, `Logo`. - `renderContent` / `PageLayout`을 통한 네비게이션 프레임 내 페이지 콘텐츠 레이아웃. ### 언제 사용하지 않아야 할까요? @@ -109,8 +109,12 @@ Gravity UI 앱을 위한 애플리케이션 셸 네비게이션 컴포넌트 — ### 일반적인 주의사항 -- **`AsideHeader`는 제어됩니다.** `compact`로 접힌 상태를 직접 관리하고 `onChangeCompact`에서 업데이트해야 합니다. 핸들러 없이 `compact`만 전달하면 사이드바가 고정됩니다. -- **메뉴 항목은 `menuItems`이며 `id`로 키가 지정됩니다.** 각 항목은 `{id, title, icon, current, onItemClick}` 형식입니다. `icon`에는 문자열 이름이 아닌 아이콘 컴포넌트 (예: `@gravity-ui/icons`에서 가져온 것)를 사용해야 합니다. -- **피어 의존성이 필수입니다.** `@gravity-ui/uikit`, `@gravity-ui/icons`, `@bem-react/classname`은 `react`/`react-dom`과 함께 설치되어야 합니다. -- **uikit 설정이 필요합니다.** `ThemeProvider` 내에서 렌더링하고 `@gravity-ui/uikit/styles/styles.css`를 임포트해야 합니다. 그렇지 않으면 셸이 스타일 없이 렌더링됩니다. -- **페이지 콘텐츠는 `renderContent`를 통해 전달됩니다.** `children`이 아닌 `renderContent` prop / `PageLayout`을 통해 라우팅된 콘텐츠를 렌더링하세요. \ No newline at end of file +- **`AsideHeader`는 제어됩니다.** `compact` 상태를 직접 관리하고 `onChangeCompact`에서 업데이트해야 합니다. 핸들러 없이 `compact`만 전달하면 사이드바가 고정됩니다. +- **메뉴 항목은 `menuItems`이며 `id`로 키가 지정됩니다.** 각 항목은 `{id, title, icon, current, onItemClick}` 형식입니다. `icon`에는 문자열 이름이 아닌 아이콘 컴포넌트 (예: `@gravity-ui/icons`에서 가져온 것)를 사용합니다. +- **Peer dependencies가 필요합니다.** `@gravity-ui/uikit`, `@gravity-ui/icons`, `@bem-react/classname`은 `react`/`react-dom`과 함께 설치되어야 합니다. +- **uikit 설정이 필요합니다.** `ThemeProvider` 내에서 렌더링하고 `@gravity-ui/uikit/styles/styles.css`를 import해야 합니다. 그렇지 않으면 쉘이 스타일 없이 렌더링됩니다. +- **페이지 콘텐츠는 `renderContent`를 통해 전달됩니다.** `children`이 아닌 `renderContent` prop / `PageLayout`을 통해 라우팅된 콘텐츠를 렌더링하세요. + +## AI 에이전트용 문서 + +설치된 버전에 대한 에이전트 읽기 가능 문서는 `node_modules/@gravity-ui/navigation/build/docs/INDEX.md`에 있습니다. \ No newline at end of file diff --git a/src/content/local-docs/libs/navigation/README-pt.md b/src/content/local-docs/libs/navigation/README-pt.md index 506d426660d5..b44145e7c02d 100644 --- a/src/content/local-docs/libs/navigation/README-pt.md +++ b/src/content/local-docs/libs/navigation/README-pt.md @@ -1,6 +1,6 @@ # @gravity-ui/navigation · [![npm package](https://img.shields.io/npm/v/@gravity-ui/navigation)](https://www.npmjs.com/package/@gravity-ui/navigation) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/navigation/.github/workflows/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/navigation/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/navigation/) -### Navegação do Cabeçalho Lateral · [Preview →](https://preview.yandexcloud.dev/navigation/) +### Navegação no Cabeçalho Lateral · [Preview →](https://preview.yandexcloud.dev/navigation/) ![](docs/images/showcase.png) @@ -10,7 +10,7 @@ npm install @gravity-ui/navigation ``` -Certifique-se de que as dependências "peer" estejam instaladas em seu projeto +Certifique-se de que as dependências de pares estejam instaladas em seu projeto ```bash npm install --dev @gravity-ui/uikit@^7.2.0 @gravity-ui/icons@^2.2.0 @bem-react/classname@^1.6.0 react@^19.0.0 react-dom@^19.0.0 @@ -18,7 +18,7 @@ npm install --dev @gravity-ui/uikit@^7.2.0 @gravity-ui/icons@^2.2.0 @bem-react/c ## Uso -Renderize `AsideHeader` como o "app shell". É um componente controlado — você gerencia o estado recolhido através de `compact`/`onChangeCompact` — e o conteúdo da sua página é passado por `renderContent`. Configure os estilos do `@gravity-ui/uikit` e o `ThemeProvider` primeiro (veja o [guia de estilos do uikit](https://github.com/gravity-ui/uikit?tab=readme-ov-file#styles)). +Renderize `AsideHeader` como o shell do aplicativo. É um componente controlado — você gerencia o estado recolhido através de `compact`/`onChangeCompact` — e o conteúdo da sua página é passado por `renderContent`. Configure os estilos do `@gravity-ui/uikit` e o `ThemeProvider` primeiro (consulte o [guia de estilos do uikit](https://github.com/gravity-ui/uikit?tab=readme-ov-file#styles)). ```tsx import React from 'react'; @@ -56,12 +56,12 @@ https://codesandbox.io/p/devbox/navigation-demo-simple-x9k5sd Avançado https://codesandbox.io/p/devbox/recursing-dawn-6kc9vh -## Roadmap 2025 +## Roteiro 2025 1. Suporte a SSR 2. Adicionar mais documentação e exemplos ao [Gravity UI](https://gravity-ui.com/ru/components/navigation/aside-header) -3. Suporte à navegação no tema do UIKit -4. Unificar a API de `subheaderItem`, `menuItem`, `footerItem` +3. Suporte à navegação no tema UIKit +4. Unificar a API de `subheaderItem`, `menuItem` e `footerItem` ## Componentes @@ -93,24 +93,28 @@ Distribuído sob a Licença MIT. Veja [LICENSE](LICENSE) para detalhes. ## Para agentes de IA -Componentes de navegação de "application-shell" para aplicativos Gravity UI — a barra lateral `AsideHeader` recolhível, mais rodapés, drawers, logo, painéis de atalhos e configurações que compõem uma página inteira. +Componentes de navegação de shell de aplicação para aplicativos Gravity UI — a barra lateral `AsideHeader` recolhível, mais rodapés, drawers, logo, painéis de atalhos e configurações que emolduram uma página inteira. ### Quando usar -- O frame de navegação principal do aplicativo: `AsideHeader` (navegação lateral recolhível) com `menuItems`, seções de subcabeçalho e rodapé. -- UI de suporte do shell: `Drawer`/`DrawerItem`, `Footer`/`MobileFooter`, `MobileHeader`, `HotkeysPanel`, `Settings`, `ActionBar`, `Logo`. -- Organização do conteúdo da página dentro do frame de navegação via `renderContent` / `PageLayout`. +- O frame de navegação principal do aplicativo: `AsideHeader` (navegação lateral recolhível) com `menuItems`, subcabeçalho e seções de rodapé. +- UI de shell de suporte: `Drawer`/`DrawerItem`, `Footer`/`MobileFooter`, `MobileHeader`, `HotkeysPanel`, `Settings`, `ActionBar`, `Logo`. +- Layout do conteúdo da página dentro do frame de navegação via `renderContent` / `PageLayout`. ### Quando não usar -- Controles genéricos dentro da página (botões, abas, menus, breadcrumbs) — use [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit); este pacote é o "chrome" externo do aplicativo, não componentes gerais. -- Renderização do corpo da página a partir de configuração — use [`@gravity-ui/page-constructor`](https://github.com/gravity-ui/page-constructor). -- Roteamento do lado do cliente — isso fornece apenas a UI de navegação; conecte os cliques ao seu próprio roteador. +- Controles genéricos dentro da página (botões, abas, menus, breadcrumbs) — use [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit); este pacote é o chrome externo do aplicativo, não componentes gerais. +- Renderizar o corpo da página a partir de uma configuração — use [`@gravity-ui/page-constructor`](https://github.com/gravity-ui/page-constructor). +- Roteamento do lado do cliente — isso fornece apenas a UI de navegação; conecte cliques ao seu próprio roteador. ### Armadilhas comuns - **`AsideHeader` é controlado.** Você deve gerenciar o estado recolhido com `compact` e atualizá-lo em `onChangeCompact`; passar `compact` sem o manipulador congela a barra lateral. -- **Os itens do menu são `menuItems`, identificados por `id`.** Cada item é `{id, title, icon, current, onItemClick}`; `icon` aceita um componente de ícone (por exemplo, de `@gravity-ui/icons`), não um nome de string. -- **Dependências "peer" são necessárias.** `@gravity-ui/uikit`, `@gravity-ui/icons` e `@bem-react/classname` devem ser instalados juntamente com `react`/`react-dom`. -- **Requer configuração do uikit.** Renderize dentro de `ThemeProvider` e importe `@gravity-ui/uikit/styles/styles.css`, ou o shell será renderizado sem estilo. -- **O conteúdo da página passa por `renderContent`.** Renderize seu conteúdo roteado através da prop `renderContent` / `PageLayout`, não como `children`. \ No newline at end of file +- **Os itens do menu são `menuItems`, com chave por `id`.** Cada item é `{id, title, icon, current, onItemClick}`; `icon` aceita um componente de ícone (por exemplo, de `@gravity-ui/icons`), não um nome de string. +- **Dependências de pares são necessárias.** `@gravity-ui/uikit`, `@gravity-ui/icons` e `@bem-react/classname` devem ser instalados juntamente com `react`/`react-dom`. +- **Precisa de configuração do uikit.** Renderize dentro de `ThemeProvider` e importe `@gravity-ui/uikit/styles/styles.css`, ou o shell será renderizado sem estilo. +- **O conteúdo da página passa por `renderContent`.** Renderize seu conteúdo roteado através da prop `renderContent` / `PageLayout`, não como `children`. + +## Documentação para agentes de IA + +A documentação legível por agente para a versão instalada está localizada em `node_modules/@gravity-ui/navigation/build/docs/INDEX.md`. \ No newline at end of file diff --git a/src/content/local-docs/libs/navigation/README-zh.md b/src/content/local-docs/libs/navigation/README-zh.md index 53a9bd6db288..b136a7cdf2a1 100644 --- a/src/content/local-docs/libs/navigation/README-zh.md +++ b/src/content/local-docs/libs/navigation/README-zh.md @@ -18,7 +18,7 @@ npm install --dev @gravity-ui/uikit@^7.2.0 @gravity-ui/icons@^2.2.0 @bem-react/c ## 用法 -将 `AsideHeader` 作为应用的骨架渲染。它是一个受控组件 — 您通过 `compact`/`onChangeCompact` 来控制折叠状态 — 并且您的页面内容通过 `renderContent` 传入。请先设置 `@gravity-ui/uikit` 的样式和 `ThemeProvider`（请参阅 [uikit 样式指南](https://github.com/gravity-ui/uikit?tab=readme-ov-file#styles)）。 +将 `AsideHeader` 作为应用的骨架渲染。它是一个受控组件——您通过 `compact`/`onChangeCompact` 属性来控制折叠状态，并将您的页面内容通过 `renderContent` 属性传入。请先设置 `@gravity-ui/uikit` 的样式和 `ThemeProvider`（请参阅 [uikit 样式指南](https://github.com/gravity-ui/uikit?tab=readme-ov-file#styles)）。 ```tsx import React from 'react'; @@ -34,14 +34,14 @@ export function App() { return (
Page content
} + renderContent={() =>
页面内容
} /> ); @@ -50,16 +50,16 @@ export function App() { ## Sandboxes -基础版 +基础示例 https://codesandbox.io/p/devbox/navigation-demo-simple-x9k5sd -高级版 +高级示例 https://codesandbox.io/p/devbox/recursing-dawn-6kc9vh ## 2025 年路线图 1. 支持 SSR -2. 为 [Gravity UI](https://gravity-ui.com/ru/components/navigation/aside-header) 添加更多文档和示例 +2. 向 [Gravity UI](https://gravity-ui.com/ru/components/navigation/aside-header) 添加更多文档和示例 3. 支持 UIKit 主题中的导航 4. 统一 subheaderItem、menuItem、footerItem 的 API @@ -89,11 +89,11 @@ https://codesandbox.io/p/devbox/recursing-dawn-6kc9vh ## 许可证 -根据 MIT 许可证分发。详情请参阅 [LICENSE](LICENSE)。 +在 MIT 许可证下分发。详情请参阅 [LICENSE](LICENSE)。 ## 致 AI 代理 -Gravity UI 应用的应用程序外壳导航组件 — 可折叠的 `AsideHeader` 侧边栏，以及用于构成整个页面的页脚、抽屉、Logo、快捷键和设置面板。 +Gravity UI 应用的应用程序外壳导航组件——可折叠的 `AsideHeader` 侧边栏，以及用于构成整个页面的页脚、抽屉、Logo、快捷键和设置面板。 ### 何时使用 @@ -103,14 +103,18 @@ Gravity UI 应用的应用程序外壳导航组件 — 可折叠的 `AsideHeader ### 何时避免使用 -- 通用的页面内控件（按钮、标签页、菜单、面包屑）— 请使用 [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit)；此包是外部应用的外壳，而非通用组件。 -- 从配置中渲染页面主体本身 — 请使用 [`@gravity-ui/page-constructor`](https://github.com/gravity-ui/page-constructor)。 -- 客户端路由 — 此包仅提供导航 UI；请将点击事件连接到您自己的路由。 +- 通用的页面内控件（按钮、标签页、菜单、面包屑）——请使用 [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit)；此包是外部应用外壳，而非通用组件。 +- 从配置中渲染页面主体本身——请使用 [`@gravity-ui/page-constructor`](https://github.com/gravity-ui/page-constructor)。 +- 客户端路由——此包仅提供导航 UI；请将点击事件连接到您自己的路由。 ### 常见陷阱 -- **`AsideHeader` 是受控的。** 您必须通过 `compact` 来管理折叠状态，并在 `onChangeCompact` 中更新它；仅传递 `compact` 而不提供处理函数会使侧边栏冻结。 -- **菜单项是 `menuItems`，通过 `id` 键控。** 每个项的格式为 `{id, title, icon, current, onItemClick}`；`icon` 接受一个图标组件（例如来自 `@gravity-ui/icons`），而不是字符串名称。 +- **`AsideHeader` 是受控的。** 您必须通过 `compact` 属性来管理折叠状态，并在 `onChangeCompact` 中更新它；如果只传递 `compact` 而不提供处理函数，侧边栏将无法响应。 +- **菜单项是 `menuItems`，通过 `id` 键控。** 每个菜单项的格式为 `{id, title, icon, current, onItemClick}`；`icon` 属性接受一个图标组件（例如来自 `@gravity-ui/icons`），而不是字符串名称。 - **需要对等依赖项。** `@gravity-ui/uikit`、`@gravity-ui/icons` 和 `@bem-react/classname` 必须与 `react`/`react-dom` 一起安装。 -- **需要 uikit 设置。** 在 `ThemeProvider` 中渲染并导入 `@gravity-ui/uikit/styles/styles.css`，否则外壳将不显示样式。 -- **页面内容通过 `renderContent` 传入。** 通过 `renderContent` 属性 / `PageLayout` 渲染您的路由内容，而不是作为 `children`。 \ No newline at end of file +- **需要 uikit 设置。** 请在 `ThemeProvider` 中渲染，并导入 `@gravity-ui/uikit/styles/styles.css`，否则外壳将无法正确显示样式。 +- **页面内容通过 `renderContent` 传入。** 请通过 `renderContent` 属性 / `PageLayout` 来渲染您的路由内容，而不是作为 `children`。 + +## AI 代理文档 + +已安装版本的代理可读文档位于 `node_modules/@gravity-ui/navigation/build/docs/INDEX.md`。 \ No newline at end of file From fa3bd868678b970b4fb85514cb94f2a699d290f9 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 16 Jul 2026 06:18:32 +0000 Subject: [PATCH 4/5] translations: for package table --- .../local-docs/libs/table/README-de.md | 76 ++++++++-------- .../local-docs/libs/table/README-es.md | 86 ++++++++++--------- .../local-docs/libs/table/README-fr.md | 77 +++++++++-------- .../local-docs/libs/table/README-ja.md | 77 ++++++++++------- .../local-docs/libs/table/README-ko.md | 80 +++++++++-------- .../local-docs/libs/table/README-pt.md | 76 ++++++++-------- .../local-docs/libs/table/README-zh.md | 71 ++++++++------- 7 files changed, 292 insertions(+), 251 deletions(-) diff --git a/src/content/local-docs/libs/table/README-de.md b/src/content/local-docs/libs/table/README-de.md index 20e50e98adbe..fdad5fc6035d 100644 --- a/src/content/local-docs/libs/table/README-de.md +++ b/src/content/local-docs/libs/table/README-de.md @@ -39,14 +39,14 @@ const BasicExample = () => { }; ``` -## Komponenten +### Komponenten Es gibt zwei Tabellenkomponenten, die Sie verwenden können: -- `BaseTable` - eine Komponente mit nur grundlegenden Stilen; +- `BaseTable` - eine Komponente nur mit grundlegenden Stilen; - `Table` - eine Komponente mit Stilen basierend auf Gravity UI. -### Zeilenauswahl +#### Zeilenauswahl ```tsx import {selectionColumn} from '@gravity-ui/table'; @@ -79,11 +79,11 @@ const RowSelectionExample = () => { }; ``` -Um Gruppierung mit Auswahl zu verwenden, nutzen Sie den Hook `useRowSelectionFixedHandler`. Ohne diesen ist der Status der übergeordneten Zeilen-Checkboxes falsch. https://github.com/TanStack/table/issues/4878 +Um Gruppierung mit Auswahl zu verwenden, nutzen Sie den Hook `useRowSelectionFixedHandler`. Ohne diesen Hook ist der Status der übergeordneten Zeilen-Kontrollkästchen falsch. https://github.com/TanStack/table/issues/4878 -### Benutzerdefinierte Bereichsauswahl-Spalte +#### Benutzerdefinierte Bereichsauswahlspalte -Der Hook `useToggleRangeSelectionHandler` gibt einen Änderungs-Handler zurück, der auf Shift+Klick-Ereignisse hört und eine Bereichsauswahl von Zeilen durchführt. Er benötigt eine `CellContext`-Instanz, um Zugriff auf die internen Zustände der Tabelle und der Zeile zu haben. +Der Hook `useToggleRangeSelectionHandler` gibt einen Änderungs-Handler zurück, der auf Shift+Klick-Ereignisse reagiert und eine Bereichsauswahl von Zeilen durchführt. Er benötigt eine `CellContext`-Instanz, um Zugriff auf die internen Zustände der Tabelle und der Zeile zu haben. ```tsx import React, {type ChangeEvent, useCallback, useState} from 'react'; @@ -198,7 +198,7 @@ export const selectionColumn: ColumnDef = { }; ``` -Standardmäßig enthält die mit `selectionColumn` generierte Auswahlspalte die Funktionalität für die Bereichsauswahl. +Standardmäßig enthält die mit `selectionColumn` generierte Auswahlspalte die Funktionalität der Bereichsauswahl. ```tsx import {selectionColumn} from '@gravity-ui/table'; @@ -212,9 +212,9 @@ const columns: ColumnDef[] = [ **Hinweis**: Wenn die Tabelle verschachtelte Zeilen enthält, funktioniert die Bereichsauswahl nicht. Dies wird derzeit als undefiniertes Verhalten betrachtet. -### Sortierung +#### Sortierung -Erfahren Sie mehr über die Spalteneigenschaften in der [Dokumentation](https://tanstack.com/table/v8/docs/guide/sorting) von react-table. +Erfahren Sie mehr über die Spalteneigenschaften in der [Dokumentation](https://tanstack.com/table/v8/docs/guide/sorting) von react-table ```tsx import type {SortingState} from '@gravity-ui/table/tanstack'; @@ -256,7 +256,7 @@ const table = useTable({ }); ``` -### Gruppierung +#### Gruppierung ```tsx import type {ExpandedState, Row} from '@gravity-ui/table/tanstack'; @@ -319,13 +319,13 @@ const GroupingExample = () => { }; ``` -Um die Gruppierung mit Auswahl zu verwenden, nutzen Sie den Hook `useRowSelectionFixedHandler`. Ohne diesen ist der Status der Kontrollkästchen der übergeordneten Zeilen falsch. https://github.com/TanStack/table/issues/4878 +Um die Gruppierung mit Auswahl zu verwenden, nutzen Sie den Hook `useRowSelectionFixedHandler`. Ohne ihn ist der Status der Checkbox der übergeordneten Zeile falsch. https://github.com/TanStack/table/issues/4878 Um Verschachtelungsstile zu aktivieren, übergeben Sie `withNestingStyles = true` in der Spaltenkonfiguration. -Verschachtelungsindikatoren können deaktiviert werden, indem `showTreeDepthIndicators = false` übergeben wird. +Verschachtelungsindikatoren können durch Übergabe von `showTreeDepthIndicators = false` deaktiviert werden. -Um eine Steuerung zum Erweitern/Zusammenklappen von Zeilen hinzuzufügen, umschließen Sie den Zellinhalt mit der Komponente `TreeExpandableCell` oder einer ähnlichen benutzerdefinierten Komponente: +Um eine Steuerung zum Erweitern/Einklappen von Zeilen hinzuzufügen, umschließen Sie den Zelleninhalt mit der Komponente `TreeExpandableCell` oder einer ähnlichen benutzerdefinierten Komponente: ```tsx import {TreeExpandableCell} from '@gravity-ui/table'; @@ -345,7 +345,7 @@ const columns: ColumnDef[] = [ ]; ``` -### Neuordnung +#### Neuordnung ```tsx import type {ReorderingProviderProps} from '@gravity-ui/table'; @@ -392,7 +392,7 @@ const ReorderingExample = () => { }; ``` -### Spaltenneuordnung +#### Spaltenneuordnung Umschließen Sie die Tabelle mit `ColumnReorderingProvider`, um die Drag-and-Drop-Neuordnung von Spalten anhand ihrer Header zu aktivieren. @@ -448,9 +448,9 @@ CSS API: | `--gt-table-reordering-insertion-line-color` | `#4d8bff` | Farbe der Einfügungslinie | | `--gt-table-reordering-insertion-line-width` | `2px` | Breite der Einfügungslinie | | `--gt-table-reordering-dragged-opacity` | `0.4` | Deckkraft der gezogenen Spalte | -| `--gt-table-drag-overlay-background` | `#fff` | Hintergrund der Drag-Vorschau | -| `--gt-table-drag-overlay-shadow` | `0 3px 12px rgba(0,0,0,0.15)` | Box-Shadow der Drag-Vorschau | -| `--gt-table-drag-overlay-border-radius` | `6px` | Radius der Drag-Vorschau | +| `--gt-table-drag-overlay-background` | `#fff` | Hintergrund der Vorschau beim Ziehen | +| `--gt-table-drag-overlay-shadow` | `0 3px 12px rgba(0,0,0,0.15)` | Box-Shadow der Vorschau beim Ziehen | +| `--gt-table-drag-overlay-border-radius` | `6px` | Radius der Vorschau beim Ziehen | Um das Neuanordnen einer bestimmten Spalte zu verbieten, setzen Sie `enableColumnReordering: false` in ihrer Spaltendefinition. Platzhalter-Spalten (gruppiert) sind nicht ziehbar. Verwenden Sie `activationDistance` (Standardwert `8`), um einzustellen, wie weit sich der Zeiger bewegen muss, bevor ein Ziehvorgang beginnt. Dies stellt sicher, dass Header-Klicks (wie Sortierung) weiterhin funktionieren. @@ -473,7 +473,7 @@ Angepinnte Spalten können ebenfalls neu angeordnet werden, aber nur untereinand Während des Ziehens: -- eine schwebende Vorschau der Spalte (ihr Header plus die ersten Zeilen) folgt dem Zeiger in einer Drag-Vorschau; +- eine schwebende Vorschau der Spalte (ihr Header plus die ersten Zeilen) folgt dem Zeiger in einer Zieh-Überlagerung; - die gezogene Spalte wird halbtransparent; - eine blaue Einfügungslinie wird dort gezeichnet, wo die Spalte abgelegt wird; @@ -488,9 +488,9 @@ Während des Ziehens: ``` -### Virtualisierung +#### Virtualisierung -Verwenden Sie dies, wenn Sie den Grid-Container als Scroll-Element verwenden möchten (wenn Sie das Fenster verwenden möchten, siehe Abschnitt Fenster-Virtualisierung). Stellen Sie sicher, dass Sie dem Container eine feste Höhe zuweisen, andernfalls funktioniert die Virtualisierung nicht. +Verwenden Sie dies, wenn Sie den Grid-Container als Scroll-Element verwenden möchten (wenn Sie das Fenster verwenden möchten, siehe Abschnitt Fenster-Virtualisierung). Stellen Sie sicher, dass Sie dem Container eine feste Höhe zuweisen, da die Virtualisierung sonst nicht funktioniert. ```tsx import {useRowVirtualizer} from '@gravity-ui/table'; @@ -551,7 +551,7 @@ return ( ); ``` -### Fenster-Virtualisierung +#### Fenster-Virtualisierung Verwenden Sie dies, wenn Sie das Fenster als Scroll-Element verwenden möchten @@ -586,7 +586,7 @@ const WindowVirtualizationExample = () => { }; ``` -### Größenänderung +#### Größenänderung ```tsx const columns: ColumnDef[] = [ @@ -609,7 +609,7 @@ const ResizingDemo = () => { }; ``` -### Spalteneinstellungen +#### Spalteneinstellungen ```tsx const columns: ColumnDef[] = [ @@ -637,7 +637,7 @@ const TableSettingsDemo = () => { /* leaf columns ids */ ]); // für externe Steuerung und Anfangszustand - // Alternative Variante, um Zustand, Rückrufe und Einstellungen beim Anwenden von Rückrufen zu erhalten - Verwendung des Hooks useTableSettings: + // Alternative Variante, um Zustand, Callbacks und Einstellungen beim Anwenden von Callbacks zu erhalten - Verwendung des useTableSettings Hooks: // const {state, callbacks} = useTableSettings({initialVisibility: {}, initialOrder: []}) ``` @@ -663,11 +663,11 @@ Erfahren Sie mehr über die Eigenschaften für Tabellen und Spaltenanpassung in ### Kompatibilität mit React 19 + React Compiler -**⚠️ Bekanntes Problem:** Es gibt ein bekanntes Kompatibilitätsproblem mit React 19 und React Compiler bei der Verwendung von `@gravity-ui/table` (das auf TanStack Table basiert). Die Tabelle wird möglicherweise nicht neu gerendert, wenn sich Daten ändern. Weitere Details finden Sie in [TanStack Table Issue #5567](https://github.com/TanStack/table/issues/5567). +**⚠️ Bekanntes Problem:** Es gibt ein bekanntes Kompatibilitätsproblem mit React 19 und React Compiler bei der Verwendung von `@gravity-ui/table` (das auf TanStack Table aufbaut). Die Tabelle wird möglicherweise nicht neu gerendert, wenn sich Daten ändern. Weitere Details finden Sie in [TanStack Table Issue #5567](https://github.com/TanStack/table/issues/5567). **Workaround:** -Wenn Sie React 19 mit React Compiler verwenden und Probleme mit dem erneuten Rendern der Tabelle haben, können Sie die Direktive `'use no memo'` in Ihrem Komponentencode verwenden: +Wenn Sie React 19 mit React Compiler verwenden und Probleme mit dem Neurendern von Tabellen haben, können Sie die Direktive `'use no memo'` in Ihrem Komponentencode verwenden: ```tsx import React from 'react'; @@ -675,7 +675,7 @@ import {Table, useTable} from '@gravity-ui/table'; import type {ColumnDef} from '@gravity-ui/table/tanstack'; function MyTable() { - 'use no memo'; // Deaktiviert die Memoization von React Compiler für diese Komponente + 'use no memo'; // Deaktiviert die Memoization des React Compilers für diese Komponente const [data, setData] = React.useState([]); @@ -690,7 +690,7 @@ function MyTable() { **Alternative Lösung:** -Sie können die Tabelleninstanz oder die Daten auch explizit memoizen, um ordnungsgemäße Neurenderings sicherzustellen: +Sie können die Tabelleninstanz oder die Daten auch explizit memoizen, um ordnungsgemäße Neurenderungen sicherzustellen: ```tsx import React from 'react'; @@ -700,7 +700,7 @@ import type {ColumnDef} from '@gravity-ui/table/tanstack'; function MyTable() { const [data, setData] = React.useState([]); - // Memoisiert die Daten explizit, um Neurenderings sicherzustellen + // Memoisiert die Daten explizit, um Neurenderungen sicherzustellen const memoizedData = React.useMemo(() => data, [data]); const table = useTable({ @@ -720,24 +720,28 @@ Verteilt unter der MIT-Lizenz. Details finden Sie in [LICENSE](LICENSE). ## Für KI-Agenten -Ein Headless-Daten-Grid, das auf TanStack Table basiert, für Gravity UI-Apps – verwenden Sie es für sortierbare, auswählbare, gruppierbare, neu anordnungsfähige und virtualisierte Tabellen, anstatt rohen Markup über die grundlegende `Table` von uikit zu komponieren. +Ein Headless-Datengrid, das auf TanStack Table basiert, für Gravity UI-Anwendungen – verwenden Sie es für sortierbare, auswählbare, gruppierbare, neu anordnungsfähige und virtualisierte Tabellen, anstatt rohen Markup über die grundlegende `Table` von uikit zu komponieren. ### Wann verwenden - Große Datensätze, die Zeilen- oder Fenster-Virtualisierung benötigen (`useRowVirtualizer`, `useWindowRowVirtualizer`). -- Spaltensortierung, -anpassung, -neuanordnung (`ColumnReorderingProvider`), -fixierung und benutzerspezifische Spalteneinstellungen (`TableSettings`). +- Spaltensortierung, -größenänderung, -neuanordnung (`ColumnReorderingProvider`), -fixierung und benutzerspezifische Spalteneinstellungen (`TableSettings`). - Zeilenauswahl (einzeln/mehrfach, Bereich) und Baum-/Gruppierungszeilen mit erweiterbaren Zellen. ### Wann nicht verwenden -- Eine einfache, statische Tabelle mit einer Handvoll Zeilen und ohne erweiterte Funktionen – die eingebaute `Table` von uikit aus [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit) ist leichter. +- Eine einfache, statische Tabelle mit wenigen Zeilen und ohne erweiterte Funktionen – die integrierte `Table` von uikit aus [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit) ist leichter. - Eine nicht-tabellarische Liste – verwenden Sie `List` aus [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit). -- Tabellenkalkulationsähnliche Inline-Zellbearbeitung – dieses Grid ist auf Lese-/Anzeigefokus ausgelegt, keine bearbeitbare Tabellenkalkulation. +- Inline-Zellbearbeitung im Tabellenkalkulationsstil – dieses Grid ist auf Lesen/Anzeigen fokussiert, keine bearbeitbare Tabellenkalkulation. ### Häufige Fallstricke - **Sie erstellen die Tabelle mit `useTable` und rendern dann ``.** Die Haupt-Prop ist `table` (die Instanz), nicht `data`/`columns` direkt auf `
`; übergeben Sie `data` und `columns` an `useTable`. - **Typen stammen aus dem Unterpfad `@gravity-ui/table/tanstack`.** Importieren Sie `ColumnDef`, `RowSelectionState`, `SortingState` usw. aus `@gravity-ui/table/tanstack`, nicht aus dem Stammverzeichnis des Pakets. - **Sortierung benötigt einen Accessor.** Eine Spalte muss `accessorKey`/`accessorFn` haben, damit die Sortierung funktioniert; setzen Sie `enableSorting` und stellen Sie `getRowId` bereit. -- **React 19 + React Compiler kann Neurenderings überspringen.** Dies ist ein Problem der übergeordneten TanStack Table-Bibliothek – fügen Sie die Direktive `'use no memo'` zur Komponente hinzu oder memoizen Sie `data`. -- **Bereichsauswahl funktioniert bei verschachtelten Zeilen nicht.** Die Bereichsauswahl ist ein undefiniertes Verhalten, wenn die Tabelle gruppierte/verschachtelte Zeilen hat; verwenden Sie `useRowSelectionFixedHandler` für den korrekten Status der Eltern-Checkbox bei Gruppierung. \ No newline at end of file +- **React 19 + React Compiler kann Neurenderungen überspringen.** Dies ist ein Problem der übergeordneten TanStack Table-Bibliothek – fügen Sie die Direktive `'use no memo'` zur Komponente hinzu oder memoizen Sie `data`. +- **Bereichsauswahl funktioniert bei verschachtelten Zeilen nicht.** Die Bereichsauswahl ist ein undefiniertes Verhalten, wenn die Tabelle gruppierte/verschachtelte Zeilen hat; verwenden Sie `useRowSelectionFixedHandler` für den korrekten Eltern-Checkbox-Status bei Gruppierung. + +## Dokumentation für KI-Agenten + +Agentenlesbare Dokumentation für die installierte Version befindet sich in `node_modules/@gravity-ui/table/build/docs/INDEX.md`. \ No newline at end of file diff --git a/src/content/local-docs/libs/table/README-es.md b/src/content/local-docs/libs/table/README-es.md index 1cae3dcdcb83..0d509c039ac5 100644 --- a/src/content/local-docs/libs/table/README-es.md +++ b/src/content/local-docs/libs/table/README-es.md @@ -39,14 +39,14 @@ const BasicExample = () => { }; ``` -## Componentes +### Componentes Hay dos componentes `Table` que puedes usar: -- `BaseTable` - un componente con estilos básicos solamente; +- `BaseTable` - un componente con estilos básicos únicamente; - `Table` - un componente con estilos basados en Gravity UI. -### Selección de filas +#### Selección de filas ```tsx import {selectionColumn} from '@gravity-ui/table'; @@ -79,9 +79,9 @@ const RowSelectionExample = () => { }; ``` -Para usar agrupamiento con selección, usa el hook `useRowSelectionFixedHandler`. Sin él, el estado de la casilla de verificación de la fila principal será incorrecto. https://github.com/TanStack/table/issues/4878 +Para usar agrupamiento con selección, utiliza el hook `useRowSelectionFixedHandler`. Sin él, el estado de la casilla de verificación de la fila principal será incorrecto. https://github.com/TanStack/table/issues/4878 -### Columna de selección de rango personalizada +#### Columna de selección de rango personalizada El hook `useToggleRangeSelectionHandler` devuelve un manejador de cambios que escucha los eventos Shift+click y realiza la selección de filas por rango. Necesita que se le pase una instancia de `CellContext` para tener acceso a los estados internos de la tabla y de la fila. @@ -212,9 +212,9 @@ const columns: ColumnDef[] = [ **Nota**: Si la tabla contiene filas anidadas, la selección por rango no funcionará. En este momento, se considera un comportamiento indefinido. -### Ordenación +#### Ordenación -Obtén información sobre las propiedades de las columnas en la documentación de react-table [aquí](https://tanstack.com/table/v8/docs/guide/sorting). +Aprende sobre las propiedades de las columnas en la documentación de react-table [aquí](https://tanstack.com/table/v8/docs/guide/sorting). ```tsx import type {SortingState} from '@gravity-ui/table/tanstack'; @@ -247,7 +247,7 @@ const SortingExample = () => { }; ``` -Si deseas ordenar los elementos manualmente, pasa la propiedad `manualSorting`: +Si quieres ordenar los elementos manualmente, pasa la propiedad `manualSorting`: ```tsx const table = useTable({ @@ -256,7 +256,7 @@ const table = useTable({ }); ``` -### Agrupación +#### Agrupación ```tsx import type {ExpandedState, Row} from '@gravity-ui/table/tanstack'; @@ -325,7 +325,7 @@ Para habilitar los estilos de anidamiento, pasa `withNestingStyles = true` en la Los indicadores de anidamiento se pueden deshabilitar pasando `showTreeDepthIndicators = false`. -Para agregar un control para expandir/colapsar filas, envuelve el contenido de la celda con el componente `TreeExpandableCell` o con tu propio componente personalizado similar: +Para añadir un control para expandir/colapsar filas, envuelve el contenido de la celda con el componente `TreeExpandableCell` o con tu propio componente similar: ```tsx import {TreeExpandableCell} from '@gravity-ui/table'; @@ -345,7 +345,7 @@ const columns: ColumnDef[] = [ ]; ``` -### Reordenación +#### Reordenación ```tsx import type {ReorderingProviderProps} from '@gravity-ui/table'; @@ -392,7 +392,7 @@ const ReorderingExample = () => { }; ``` -### Reordenación de columnas +#### Reordenación de columnas Envuelve la tabla con `ColumnReorderingProvider` para habilitar la reordenación de columnas mediante arrastrar y soltar en sus encabezados. @@ -443,18 +443,18 @@ return ( API CSS: -| Variable CSS | Valor por defecto | Descripción | -| -------------------------------------------- | --------------------------------- | -------------------------------- | -| `--gt-table-reordering-insertion-line-color` | `#4d8bff` | Color de la línea de inserción de arrastre | -| `--gt-table-reordering-insertion-line-width` | `2px` | Ancho de la línea de inserción de arrastre | -| `--gt-table-reordering-dragged-opacity` | `0.4` | Opacidad de la columna arrastrada | -| `--gt-table-drag-overlay-background` | `#fff` | Fondo de la vista previa de arrastre | -| `--gt-table-drag-overlay-shadow` | `0 3px 12px rgba(0,0,0,0.15)` | Sombra de la vista previa de arrastre | -| `--gt-table-drag-overlay-border-radius` | `6px` | Radio del borde de la vista previa de arrastre | +| Variable CSS | Predeterminado | Descripción | +| -------------------------------------------- | ------------------------------- | -------------------------------- | +| `--gt-table-reordering-insertion-line-color` | `#4d8bff` | Color de la línea de inserción de arrastre | +| `--gt-table-reordering-insertion-line-width` | `2px` | Ancho de la línea de inserción de arrastre | +| `--gt-table-reordering-dragged-opacity` | `0.4` | Opacidad de la columna arrastrada | +| `--gt-table-drag-overlay-background` | `#fff` | Fondo de la vista previa de arrastre | +| `--gt-table-drag-overlay-shadow` | `0 3px 12px rgba(0,0,0,0.15)` | Sombra del cuadro de vista previa de arrastre | +| `--gt-table-drag-overlay-border-radius` | `6px` | Radio del borde de la vista previa de arrastre | -Para prohibir la reordenación de una columna específica, establece `enableColumnReordering: false` en su definición de columna. Las columnas de marcador de posición (agrupadas) no se pueden arrastrar. Usa `activationDistance` (por defecto `8`) para ajustar cuánto debe moverse el puntero antes de que comience un arrastre, lo que permite que los clics en la cabecera (como la ordenación) sigan funcionando. +Para prohibir la reordenación de una columna específica, establece `enableColumnReordering: false` en su definición de columna. Las columnas de marcador de posición (agrupadas) no se pueden arrastrar. Usa `activationDistance` (predeterminado `8`) para ajustar cuánto debe moverse el puntero antes de que comience un arrastre, lo que mantiene funcionando los clics en la cabecera (como la ordenación). -Las columnas fijadas también se pueden reordenar, pero solo entre ellas: una columna se puede mover dentro del grupo de columnas fijadas a la izquierda, el grupo de columnas fijadas a la derecha o el grupo central (sin fijar); nunca cruza un límite de fijación al arrastrar. +Las columnas fijadas también se pueden reordenar, pero solo entre ellas: una columna se puede mover dentro del grupo de la izquierda, el grupo de la derecha o el grupo central (sin fijar); nunca cruza un límite de fijación al arrastrar. ```tsx ``` -### Virtualización +#### Virtualización -Úsalo si quieres usar el contenedor de la cuadrícula como elemento de desplazamiento (si quieres usar la ventana, consulta la sección de virtualización de ventana). Asegúrate de establecer una altura fija en el contenedor; de lo contrario, la virtualización no funcionará. +Úsala si quieres usar el contenedor de la cuadrícula como elemento de desplazamiento (si quieres usar la ventana, consulta la sección de virtualización de ventana). Asegúrate de establecer una altura fija en el contenedor; de lo contrario, la virtualización no funcionará. ```tsx import {useRowVirtualizer} from '@gravity-ui/table'; @@ -551,9 +551,9 @@ return ( ); ``` -### Virtualización de ventana +#### Virtualización de ventana -Úsalo si quieres usar la ventana como elemento de desplazamiento +Úsala si quieres usar la ventana como elemento de desplazamiento ```tsx import {useWindowRowVirtualizer} from '@gravity-ui/table'; @@ -586,7 +586,7 @@ const WindowVirtualizationExample = () => { }; ``` -### Redimensionamiento +#### Redimensionamiento ```tsx const columns: ColumnDef[] = [ @@ -609,7 +609,7 @@ const ResizingDemo = () => { }; ``` -### Configuración de columnas +#### Configuración de columnas ```tsx const columns: ColumnDef[] = [ @@ -637,11 +637,11 @@ const TableSettingsDemo = () => { /* ids de columnas hoja */ ]); // para control externo y estado inicial - // Variante alternativa para obtener el estado, callbacks y establecer callbacks de aplicación de configuración - usando el hook useTableSettings: + // Variante alternativa para obtener el estado, callbacks y establecer callbacks al aplicar la configuración - usando el hook useTableSettings: // const {state, callbacks} = useTableSettings({initialVisibility: {}, initialOrder: []}) ``` -```tsx +```typescript const table = useTable({ columns, data, @@ -663,9 +663,9 @@ Obtén más información sobre las propiedades de redimensionamiento de tablas y ### Compatibilidad con React 19 + React Compiler -**⚠️ Problema conocido:** Existe un problema de compatibilidad conocido con React 19 y React Compiler al usar `@gravity-ui/table` (que se basa en TanStack Table). La tabla puede no volver a renderizarse cuando los datos cambian. Consulta el [problema #5567 de TanStack Table](https://github.com/TanStack/table/issues/5567) para obtener más detalles. +**⚠️ Problema conocido:** Existe un problema de compatibilidad conocido con React 19 y React Compiler al usar `@gravity-ui/table` (que se basa en TanStack Table). La tabla podría no volver a renderizarse cuando cambian los datos. Consulta el [problema #5567 de TanStack Table](https://github.com/TanStack/table/issues/5567) para obtener más detalles. -**Solución:** +**Solución alternativa:** Si estás utilizando React 19 con React Compiler y experimentas problemas con la reactualización de la tabla, puedes usar la directiva `'use no memo'` en el código de tu componente: @@ -675,7 +675,7 @@ import {Table, useTable} from '@gravity-ui/table'; import type {ColumnDef} from '@gravity-ui/table/tanstack'; function MyTable() { - 'use no memo'; // Deshabilita la memoización de React Compiler para este componente + 'use no memo'; // Deshabilita la memorización de React Compiler para este componente const [data, setData] = React.useState([]); @@ -690,7 +690,7 @@ function MyTable() { **Solución alternativa:** -También puedes memoizar explícitamente la instancia de la tabla o los datos para garantizar la correcta reactualización: +También puedes memorizar explícitamente la instancia de la tabla o los datos para garantizar la correcta reactualización: ```tsx import React from 'react'; @@ -700,7 +700,7 @@ import type {ColumnDef} from '@gravity-ui/table/tanstack'; function MyTable() { const [data, setData] = React.useState([]); - // Memoiza explícitamente los datos para garantizar la reactualización + // Memoriza explícitamente los datos para garantizar la reactualización const memoizedData = React.useMemo(() => data, [data]); const table = useTable({ @@ -712,7 +712,7 @@ function MyTable() { } ``` -**Nota:** Este problema está en la biblioteca subyacente TanStack Table y deberá solucionarse allí. Las soluciones anteriores deberían ayudar hasta que haya una corrección disponible. +**Nota:** Este problema está en la biblioteca subyacente TanStack Table y deberá solucionarse allí. Las soluciones alternativas anteriores deberían ayudar hasta que haya una corrección disponible. ## Licencia @@ -720,17 +720,17 @@ Distribuido bajo la Licencia MIT. Consulta [LICENSE](LICENSE) para obtener más ## Para agentes de IA -Una cuadrícula de datos sin encabezado, impulsada por TanStack-Table, para aplicaciones Gravity UI: utilízala para tablas ordenables, seleccionables, agrupables, reordenables y virtualizadas en lugar de componer marcado sin procesar sobre la tabla básica de uikit. +Una cuadrícula de datos sin encabezado, impulsada por TanStack-Table, para aplicaciones Gravity UI: utilízala para tablas ordenables, seleccionables, agrupables, reorganizables y virtualizadas en lugar de componer marcado sin procesar sobre la tabla básica de uikit. ### Cuándo usar - Grandes conjuntos de datos que necesitan virtualización de filas o ventanas (`useRowVirtualizer`, `useWindowRowVirtualizer`). -- Ordenación, redimensionamiento, reordenación de columnas (`ColumnReorderingProvider`), fijación y configuración de columnas por usuario (`TableSettings`). +- Ordenación, redimensionamiento, reorganización de columnas (`ColumnReorderingProvider`), fijación y configuración de columnas por usuario (`TableSettings`). - Selección de filas (individual/múltiple, por rango) y filas de árbol/agrupadas con celdas expandibles. ### Cuándo no usar -- Una tabla simple y estática con unas pocas filas y sin funciones avanzadas: la tabla integrada de uikit de [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit) es más ligera. +- Una tabla simple y estática con un puñado de filas y sin funciones avanzadas: la tabla integrada de uikit de [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit) es más ligera. - Una lista no tabular: usa `List` de [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit). - Edición de celdas en línea estilo hoja de cálculo: esta cuadrícula está enfocada en la lectura/visualización, no en una hoja de cálculo editable. @@ -739,5 +739,9 @@ Una cuadrícula de datos sin encabezado, impulsada por TanStack-Table, para apli - **Creas la tabla con `useTable`, luego renderizas `
`.** La prop principal es `table` (la instancia), no `data`/`columns` directamente en `
`; pasa `data` y `columns` a `useTable`. - **Los tipos provienen de la subruta `@gravity-ui/table/tanstack`.** Importa `ColumnDef`, `RowSelectionState`, `SortingState`, etc. desde `@gravity-ui/table/tanstack`, no desde la raíz del paquete. - **La ordenación necesita un accesor.** Una columna debe tener `accessorKey`/`accessorFn` para que la ordenación funcione; establece `enableSorting` y proporciona `getRowId`. -- **React 19 + React Compiler puede omitir reactualizaciones.** Este es un problema de TanStack Table de nivel superior: agrega la directiva `'use no memo'` al componente o memoiza `data`. -- **La selección por rango falla con filas anidadas.** El comportamiento de la selección por rango no está definido cuando la tabla tiene filas agrupadas/anidadas; usa `useRowSelectionFixedHandler` para el estado correcto de la casilla de verificación principal con la agrupación. \ No newline at end of file +- **React 19 + React Compiler puede omitir reactualizaciones.** Este es un problema de la biblioteca subyacente TanStack Table: agrega la directiva `'use no memo'` al componente o memoriza `data`. +- **La selección por rango falla con filas anidadas.** El comportamiento de la selección por rango no está definido cuando la tabla tiene filas agrupadas/anidadas; usa `useRowSelectionFixedHandler` para el estado correcto de la casilla de verificación principal con la agrupación. + +## Documentación para agentes de IA + +La documentación legible por agentes para la versión instalada se encuentra en `node_modules/@gravity-ui/table/build/docs/INDEX.md`. \ No newline at end of file diff --git a/src/content/local-docs/libs/table/README-fr.md b/src/content/local-docs/libs/table/README-fr.md index d3d8aa1e96e4..d59f87a8d599 100644 --- a/src/content/local-docs/libs/table/README-fr.md +++ b/src/content/local-docs/libs/table/README-fr.md @@ -39,14 +39,14 @@ const BasicExample = () => { }; ``` -## Composants +### Composants -Deux composants `Table` sont disponibles : +Vous pouvez utiliser deux composants `Table` : -- `BaseTable` : un composant avec uniquement les styles de base ; -- `Table` : un composant avec les styles basés sur Gravity UI. +- `BaseTable` - un composant avec des styles de base uniquement ; +- `Table` - un composant avec des styles basés sur Gravity UI. -### Sélection de lignes +#### Sélection de lignes ```tsx import {selectionColumn} from '@gravity-ui/table'; @@ -81,9 +81,9 @@ const RowSelectionExample = () => { Pour utiliser le regroupement avec la sélection, utilisez le hook `useRowSelectionFixedHandler`. Sans lui, l'état de la case à cocher de la ligne parente sera incorrect. https://github.com/TanStack/table/issues/4878 -### Colonne de sélection personnalisée par plage +#### Colonne de sélection par plage personnalisée -Le hook `useToggleRangeSelectionHandler` renvoie un gestionnaire de changement qui écoute les événements Shift+clic et effectue une sélection de lignes par plage. Il doit recevoir une instance de `CellContext` pour avoir accès aux états internes de la table et de la ligne. +Le hook `useToggleRangeSelectionHandler` renvoie un gestionnaire de changement qui écoute les événements Shift+clic et effectue la sélection de lignes par plage. Il doit recevoir une instance de `CellContext` pour avoir accès aux états internes de la table et de la ligne. ```tsx import React, {type ChangeEvent, useCallback, useState} from 'react'; @@ -210,11 +210,11 @@ const columns: ColumnDef[] = [ ]; ``` -**Remarque** : Si la table contient des lignes imbriquées, la sélection par plage ne fonctionnera pas. À l'heure actuelle, cela est considéré comme un comportement indéfini. +**Remarque** : Si la table contient des lignes imbriquées, la sélection par plage ne fonctionnera pas. Pour le moment, cela est considéré comme un comportement indéfini. -### Tri +#### Tri -Apprenez-en davantage sur les propriétés des colonnes dans la documentation de react-table [ici](https://tanstack.com/table/v8/docs/guide/sorting). +Apprenez-en plus sur les propriétés des colonnes dans la documentation de react-table [ici](https://tanstack.com/table/v8/docs/guide/sorting). ```tsx import type {SortingState} from '@gravity-ui/table/tanstack'; @@ -256,7 +256,7 @@ const table = useTable({ }); ``` -### Groupement +#### Groupement ```tsx import type {ExpandedState, Row} from '@gravity-ui/table/tanstack'; @@ -319,13 +319,13 @@ const GroupingExample = () => { }; ``` -Pour utiliser le groupement avec la sélection, utilisez le hook `useRowSelectionFixedHandler`. Sans cela, l'état de la case à cocher de la ligne parente sera incorrect. https://github.com/TanStack/table/issues/4878 +Pour utiliser le groupement avec la sélection, utilisez le hook `useRowSelectionFixedHandler`. Sans lui, l'état de la case à cocher de la ligne parente sera incorrect. https://github.com/TanStack/table/issues/4878 Pour activer les styles d'imbrication, passez `withNestingStyles = true` dans la configuration de la colonne. Les indicateurs d'imbrication peuvent être désactivés en passant `showTreeDepthIndicators = false`. -Pour ajouter un contrôle permettant d'étendre/réduire les lignes, enveloppez le contenu de la cellule avec le composant `TreeExpandableCell` ou avec votre composant personnalisé similaire : +Pour ajouter un contrôle pour développer/réduire les lignes, enveloppez le contenu de la cellule avec le composant `TreeExpandableCell` ou votre composant personnalisé similaire : ```tsx import {TreeExpandableCell} from '@gravity-ui/table'; @@ -345,7 +345,7 @@ const columns: ColumnDef[] = [ ]; ``` -### Réorganisation +#### Réorganisation ```tsx import type {ReorderingProviderProps} from '@gravity-ui/table'; @@ -392,7 +392,7 @@ const ReorderingExample = () => { }; ``` -### Réorganisation des colonnes +#### Réorganisation des colonnes Enveloppez le tableau avec `ColumnReorderingProvider` pour activer la réorganisation des colonnes par glisser-déposer de leurs en-têtes. @@ -419,7 +419,7 @@ const ColumnReorderingExample = () => { }; ``` -Si vous contrôlez vous-même `columnOrder` (par exemple, pour le rendre persistant), passez `onReorder` et appliquez l'ordre résultant : +Si vous contrôlez vous-même `columnOrder` (par exemple, pour le conserver), passez `onReorder` et appliquez l'ordre résultant : ```tsx const [columnOrder, setColumnOrder] = React.useState([]); @@ -443,18 +443,18 @@ return ( API CSS : -| Variable CSS | Défaut | Description | +| Variable CSS | Défaut | Description | | -------------------------------------------- | ----------------------------- | -------------------------------- | | `--gt-table-reordering-insertion-line-color` | `#4d8bff` | Couleur de la ligne d'insertion | | `--gt-table-reordering-insertion-line-width` | `2px` | Largeur de la ligne d'insertion | | `--gt-table-reordering-dragged-opacity` | `0.4` | Opacité de la colonne déplacée | -| `--gt-table-drag-overlay-background` | `#fff` | Arrière-plan de l'aperçu de glisser | -| `--gt-table-drag-overlay-shadow` | `0 3px 12px rgba(0,0,0,0.15)` | Ombre de l'aperçu de glisser | -| `--gt-table-drag-overlay-border-radius` | `6px` | Rayon des coins de l'aperçu de glisser | +| `--gt-table-drag-overlay-background` | `#fff` | Arrière-plan de l'aperçu de déplacement | +| `--gt-table-drag-overlay-shadow` | `0 3px 12px rgba(0,0,0,0.15)` | Ombre portée de l'aperçu de déplacement | +| `--gt-table-drag-overlay-border-radius` | `6px` | Rayon des coins de l'aperçu de déplacement | -Pour interdire le réordonnancement d'une colonne spécifique, définissez `enableColumnReordering: false` dans sa définition de colonne. Les colonnes de type "placeholder" (regroupées) ne sont pas déplaçables. Utilisez `activationDistance` (par défaut `8`) pour ajuster la distance que le pointeur doit parcourir avant qu'un glisser-déposer ne commence, ce qui permet aux clics sur les en-têtes (comme le tri) de fonctionner. +Pour interdire le réordonnancement d'une colonne spécifique, définissez `enableColumnReordering: false` dans sa définition de colonne. Les colonnes d'espace réservé (groupées) ne sont pas déplaçables. Utilisez `activationDistance` (par défaut `8`) pour ajuster la distance que le pointeur doit parcourir avant qu'un déplacement ne commence, ce qui permet aux clics d'en-tête (comme le tri) de fonctionner. -Les colonnes épinglées peuvent également être réordonnées, mais uniquement entre elles : une colonne peut être déplacée au sein du groupe épinglé à gauche, du groupe épinglé à droite, ou du groupe central (non épinglé) — elle ne franchit jamais une limite d'épinglage lors du glisser-déposer. +Les colonnes épinglées peuvent également être réordonnées, mais uniquement entre elles : une colonne peut être déplacée au sein du groupe épinglé à gauche, du groupe épinglé à droite, ou du groupe central (non épinglé) — elle ne franchit jamais une limite d'épinglage par glisser-déposer. ```tsx ``` -Pendant le glisser-déposer : +Pendant le déplacement : -- un aperçu flottant de la colonne (son en-tête plus les premières lignes) suit le pointeur dans une superposition de glisser-déposer ; +- un aperçu flottant de la colonne (son en-tête plus les premières lignes) suit le pointeur dans une superposition de déplacement ; - la colonne déplacée devient semi-transparente ; - une ligne d'insertion bleue est dessinée à l'endroit où la colonne sera déposée ; @@ -488,9 +488,9 @@ Pendant le glisser-déposer : ``` -### Virtualisation +#### Virtualisation -Utilisez cette option si vous souhaitez utiliser le conteneur de la grille comme élément de défilement (si vous souhaitez utiliser la fenêtre, consultez la section de virtualisation de fenêtre). Assurez-vous de définir une hauteur fixe sur le conteneur, sinon la virtualisation ne fonctionnera pas. +Utilisez si vous souhaitez utiliser le conteneur de grille comme élément de défilement (si vous souhaitez utiliser la fenêtre, consultez la section de virtualisation de fenêtre). Assurez-vous de définir une hauteur fixe sur le conteneur ; sinon, la virtualisation ne fonctionnera pas. ```tsx import {useRowVirtualizer} from '@gravity-ui/table'; @@ -551,9 +551,9 @@ return ( ); ``` -### Virtualisation de fenêtre +#### Virtualisation de fenêtre -Utilisez cette option si vous souhaitez utiliser la fenêtre comme élément de défilement +Utilisez si vous souhaitez utiliser la fenêtre comme élément de défilement ```tsx import {useWindowRowVirtualizer} from '@gravity-ui/table'; @@ -586,7 +586,7 @@ const WindowVirtualizationExample = () => { }; ``` -### Redimensionnement +#### Redimensionnement ```tsx const columns: ColumnDef[] = [ @@ -609,7 +609,7 @@ const ResizingDemo = () => { }; ``` -### Paramètres des colonnes +#### Paramètres des colonnes ```tsx const columns: ColumnDef[] = [ @@ -619,7 +619,7 @@ const columns: ColumnDef[] = [ header: ({table}) => , meta: { hideInSettings: false, // Optionnel. Permet de masquer cette colonne dans le popover des paramètres - titleInSettings: 'ReactNode', // Optionnel. Remplace le champ header pour le popover des paramètres (si vous avez besoin d'un contenu différent pour l'en-tête et le popover des paramètres) + titleInSettings: 'ReactNode', // Optionnel. Remplace le champ d'en-tête pour le popover des paramètres (si vous avez besoin d'un contenu différent pour l'en-tête et le popover des paramètres) }, }, // ou vous pouvez utiliser la fonction getSettingsColumn ]; @@ -639,7 +639,6 @@ const TableSettingsDemo = () => { // Variante alternative pour obtenir l'état, les callbacks et définir les callbacks d'application des paramètres - en utilisant le hook useTableSettings : // const {state, callbacks} = useTableSettings({initialVisibility: {}, initialOrder: []}) -``` ```tsx const table = useTable({ @@ -661,7 +660,7 @@ Apprenez-en davantage sur les propriétés de redimensionnement des colonnes et ## Problèmes connus et compatibilité -### Compatibilité React 19 + React Compiler +### Compatibilité avec React 19 + React Compiler **⚠️ Problème connu :** Il existe un problème de compatibilité connu avec React 19 et React Compiler lors de l'utilisation de `@gravity-ui/table` (qui est basé sur TanStack Table). Le tableau peut ne pas se réafficher lorsque les données changent. Voir le [problème #5567 de TanStack Table](https://github.com/TanStack/table/issues/5567) pour plus de détails. @@ -720,13 +719,13 @@ Distribué sous la licence MIT. Voir [LICENSE](LICENSE) pour les détails. ## Pour les agents IA -Une grille de données sans tête, alimentée par TanStack-Table, pour les applications Gravity UI — utilisez-la pour des tableaux triables, sélectionnables, groupables, réorganisables et virtualisés au lieu de composer du balisage brut par-dessus le `Table` de base d'uikit. +Une grille de données sans tête, alimentée par TanStack-Table, pour les applications Gravity UI — utilisez-la pour des tableaux triables, sélectionnables, groupables, réordonnables et virtualisés au lieu de composer du balisage brut par-dessus le `Table` de base d'uikit. ### Quand l'utiliser -- Grands ensembles de données nécessitant une virtualisation de ligne ou de fenêtre (`useRowVirtualizer`, `useWindowRowVirtualizer`). +- Grands ensembles de données nécessitant une virtualisation des lignes ou des fenêtres (`useRowVirtualizer`, `useWindowRowVirtualizer`). - Tri, redimensionnement, réorganisation des colonnes (`ColumnReorderingProvider`), épinglage et paramètres de colonnes par utilisateur (`TableSettings`). -- Sélection de lignes (simple/multiple, étendue) et lignes arborescentes/groupées avec des cellules extensibles. +- Sélection de lignes (simple/multiple, par plage) et lignes d'arbre/groupées avec des cellules extensibles. ### Quand ne pas l'utiliser @@ -740,4 +739,8 @@ Une grille de données sans tête, alimentée par TanStack-Table, pour les appli - **Les types proviennent du sous-chemin `@gravity-ui/table/tanstack`.** Importez `ColumnDef`, `RowSelectionState`, `SortingState`, etc. depuis `@gravity-ui/table/tanstack`, pas depuis la racine du package. - **Le tri nécessite un accesseur.** Une colonne doit avoir `accessorKey`/`accessorFn` pour que le tri fonctionne ; définissez `enableSorting` et fournissez `getRowId`. - **React 19 + React Compiler peut ignorer les réaffichages.** Il s'agit d'un problème en amont de TanStack Table — ajoutez la directive `'use no memo'` au composant ou mémoïsez `data`. -- **La sélection d'étendue échoue avec les lignes imbriquées.** Le comportement de la sélection d'étendue est indéfini lorsque le tableau a des lignes groupées/imbriquées ; utilisez `useRowSelectionFixedHandler` pour un état de case à cocher parent correct avec le regroupement. \ No newline at end of file +- **La sélection par plage échoue avec les lignes imbriquées.** Le comportement de la sélection par plage est indéfini lorsque le tableau a des lignes groupées/imbriquées ; utilisez `useRowSelectionFixedHandler` pour un état de case à cocher parent correct avec le regroupement. + +## Documentation pour les agents IA + +La documentation lisible par agent pour la version installée se trouve dans `node_modules/@gravity-ui/table/build/docs/INDEX.md`. \ No newline at end of file diff --git a/src/content/local-docs/libs/table/README-ja.md b/src/content/local-docs/libs/table/README-ja.md index 8d6e3abbfd9d..535691be49a9 100644 --- a/src/content/local-docs/libs/table/README-ja.md +++ b/src/content/local-docs/libs/table/README-ja.md @@ -39,14 +39,14 @@ const BasicExample = () => { }; ``` -## コンポーネント +### コンポーネント -使用できる Table コンポーネントは2つあります。 +使用できる `Table` コンポーネントは2つあります。 - `BaseTable` - 基本的なスタイルのみを持つコンポーネントです。 - `Table` - Gravity UI ベースのスタイルを持つコンポーネントです。 -### 行選択 +#### 行選択 ```tsx import {selectionColumn} from '@gravity-ui/table'; @@ -79,9 +79,9 @@ const RowSelectionExample = () => { }; ``` -選択機能とグループ化を併用する場合は、`useRowSelectionFixedHandler` フックを使用してください。これがないと、親行のチェックボックスの状態が正しく表示されません。https://github.com/TanStack/table/issues/4878 +選択機能とグループ化を併用する場合、`useRowSelectionFixedHandler` フックを使用してください。これがないと、親行のチェックボックスの状態が正しく表示されません。https://github.com/TanStack/table/issues/4878 -### カスタム範囲選択カラム +#### カスタム範囲選択カラム `useToggleRangeSelectionHandler` フックは、Shift+クリックイベントをリッスンして範囲選択を実行する変更ハンドラーを返します。テーブルと行の内部状態にアクセスするには、`CellContext` インスタンスを渡す必要があります。 @@ -212,7 +212,7 @@ const columns: ColumnDef[] = [ **注意**: テーブルにネストされた行が含まれている場合、範囲選択は機能しません。現時点では、これは未定義の動作と見なされます。 -### ソート +#### ソート react-table の列プロパティについては、[ドキュメント](https://tanstack.com/table/v8/docs/guide/sorting) を参照してください。 @@ -247,7 +247,7 @@ const SortingExample = () => { }; ``` -要素をマニュアルでソートしたい場合は、`manualSorting` プロパティを渡してください。 +要素を手動でソートしたい場合は、`manualSorting` プロパティを渡してください。 ```tsx const table = useTable({ @@ -256,7 +256,7 @@ const table = useTable({ }); ``` -### グルーピング +#### グルーピング ```tsx import type {ExpandedState, Row} from '@gravity-ui/table/tanstack'; @@ -325,7 +325,7 @@ const GroupingExample = () => { ネストインジケーターは、`showTreeDepthIndicators = false` を渡すことで無効にできます。 -行の展開/折りたたみを制御するコントロールを追加するには、セルコンテンツを `TreeExpandableCell` コンポーネントまたは同様のカスタムコンポーネントでラップしてください。 +行の展開/折りたたみのためのコントロールを追加するには、セルのコンテンツを `TreeExpandableCell` コンポーネントまたは同様のカスタムコンポーネントでラップしてください。 ```tsx import {TreeExpandableCell} from '@gravity-ui/table'; @@ -345,7 +345,7 @@ const columns: ColumnDef[] = [ ]; ``` -### 並べ替え +#### 並べ替え ```tsx import type {ReorderingProviderProps} from '@gravity-ui/table'; @@ -392,9 +392,9 @@ const ReorderingExample = () => { }; ``` -### 列の並べ替え +#### 列の並べ替え -テーブルを `ColumnReorderingProvider` でラップすると、ヘッダーによる列のドラッグアンドドロップ並べ替えが有効になります。 +テーブルを `ColumnReorderingProvider` でラップすると、ヘッダーからのドラッグアンドドロップによる列の並べ替えが可能になります。 ```tsx import {ColumnReorderingProvider} from '@gravity-ui/table'; @@ -452,7 +452,7 @@ CSS API: | `--gt-table-drag-overlay-shadow` | `0 3px 12px rgba(0,0,0,0.15)` | ドラッグプレビューのボックスシャドウ | | `--gt-table-drag-overlay-border-radius` | `6px` | ドラッグプレビューの角丸 | -特定の列の並べ替えを禁止するには、その列定義で `enableColumnReordering: false` を設定します。プレースホルダー（グループ化された）列はドラッグできません。`activationDistance`（デフォルトは `8`）を使用して、ドラッグが開始されるまでにポインターが移動する必要がある距離を調整します。これにより、ヘッダーのクリック（ソートなど）が引き続き機能します。 +特定の列の並べ替えを禁止するには、その列定義で `enableColumnReordering: false` を設定します。プレースホルダー（グループ化された）列はドラッグできません。`activationDistance`（デフォルトは `8`）を使用して、ドラッグが開始されるまでにポインターが移動する必要がある距離を調整します。これにより、ヘッダーのクリック（ソートなど）が機能し続けます。 固定された列も並べ替え可能ですが、それらの間でのみ可能です。列は左固定グループ、右固定グループ、または中央（固定なし）グループ内で移動できます。ドラッグによってピンの境界を越えることはありません。 @@ -473,7 +473,7 @@ CSS API: ドラッグ中： -- 列の浮いたプレビュー（ヘッダーと最初の数行）が、ドラッグオーバーレイ内でポインターを追従します。 +- 列の浮動プレビュー（ヘッダーと最初の数行）がドラッグオーバーレイ内でポインターを追従します。 - ドラッグ中の列は半透明になります。 - 列がドロップされる場所に青い挿入ラインが表示されます。 @@ -488,9 +488,9 @@ CSS API: ``` -### 仮想化 +#### 仮想化 -グリッドコンテナをスクロール要素として使用したい場合に使用します（ウィンドウをスクロール要素として使用したい場合は、ウィンドウ仮想化セクションを参照してください）。コンテナに固定の高さを設定してください。そうしないと、仮想化は機能しません。 +グリッドコンテナをスクロール要素として使用したい場合に使用します（ウィンドウを使用したい場合はウィンドウ仮想化セクションを参照）。コンテナに固定の高さを設定してください。そうしないと、仮想化は機能しません。 ```tsx import {useRowVirtualizer} from '@gravity-ui/table'; @@ -551,7 +551,7 @@ return ( ); ``` -### ウィンドウ仮想化 +#### ウィンドウ仮想化 ウィンドウをスクロール要素として使用したい場合に使用します。 @@ -586,7 +586,7 @@ const WindowVirtualizationExample = () => { }; ``` -### リサイズ +#### リサイズ ```tsx const columns: ColumnDef[] = [ @@ -609,7 +609,7 @@ const ResizingDemo = () => { }; ``` -### 列設定 +#### 列設定 ```tsx const columns: ColumnDef[] = [ @@ -619,7 +619,7 @@ const columns: ColumnDef[] = [ header: ({table}) => , meta: { hideInSettings: false, // オプション。設定ポップオーバーからこの列を非表示にできます - titleInSettings: 'ReactNode', // オプション。設定ポップオーバーのヘッダーフィールドを上書きします（ヘッダーと設定ポップオーバーで異なるコンテンツが必要な場合） + titleInSettings: 'ReactNode', // オプション。設定ポップオーバーのヘッダーフィールドをオーバーライドします（ヘッダーと設定ポップオーバーで異なるコンテンツが必要な場合） }, }, // または getSettingsColumn 関数を使用することもできます ]; @@ -631,17 +631,24 @@ const data: Person[] = [ const TableSettingsDemo = () => { const [columnVisibility, onColumnVisibilityChange] = React.useState({ // 外部制御と初期状態用 - column_id: false, // デフォルトで非表示にするため + column_id: false, // デフォルトで非表示にする場合 }); const [columnOrder, onColumnOrderChange] = React.useState([ /* リーフ列のID */ ]); // 外部制御と初期状態用 - // 設定適用コールバックで状態、コールバックを取得し、設定する代替方法 - useTableSettings フックを使用: + // useTableSettings フックを使用して、状態、コールバック、および設定適用時のコールバックを取得する代替バリアント： // const {state, callbacks} = useTableSettings({initialVisibility: {}, initialOrder: []}) ``` ```tsx +import React from 'react'; +import {Table, useTable} from '@gravity-ui/table'; +import type {ColumnDef} from '@gravity-ui/table/tanstack'; + +function MyTable() { + const [data, setData] = React.useState([]); + const table = useTable({ columns, data, @@ -657,13 +664,13 @@ const TableSettingsDemo = () => { }; ``` -react-table のテーブルと列のリサイズプロパティについて詳しくは、[ドキュメント](https://tanstack.com/table/v8/docs/api/features/column-sizing)をご覧ください。 +テーブルと列のリサイズプロパティの詳細については、react-table の [ドキュメント](https://tanstack.com/table/v8/docs/api/features/column-sizing) を参照してください。 ## 既知の問題と互換性 ### React 19 + React Compiler の互換性 -**⚠️ 既知の問題:** `@gravity-ui/table` (TanStack Table を基盤としています) を使用している場合、React 19 および React Compiler との間に既知の互換性の問題があります。データの変更時にテーブルが再レンダリングされない場合があります。詳細は [TanStack Table issue #5567](https://github.com/TanStack/table/issues/5567) を参照してください。 +**⚠️ 既知の問題:** `@gravity-ui/table` (TanStack Table を基盤としています) を使用している場合、React 19 および React Compiler との間に既知の互換性の問題があります。データが変更されてもテーブルが再レンダリングされない場合があります。詳細については、[TanStack Table issue #5567](https://github.com/TanStack/table/issues/5567) を参照してください。 **回避策:** @@ -716,28 +723,32 @@ function MyTable() { ## ライセンス -MIT ライセンスの下で配布されています。詳細は [LICENSE](LICENSE) を参照してください。 +MIT ライセンスの下で配布されています。詳細については [LICENSE](LICENSE) を参照してください。 ## AI エージェント向け -Gravity UI アプリケーション向けのヘッドレスで TanStack Table を搭載したデータグリッドです。uikit の基本的な `Table` の上に生のマークアップを構成する代わりに、ソート可能、選択可能、グループ化可能、並べ替え可能、仮想化されたテーブルが必要な場合は、こちらを使用してください。 +Gravity UI アプリケーション向けのヘッドレスな TanStack Table 搭載データグリッドです。uikit の基本的な `Table` の上に生のマークアップをそのまま構築する代わりに、ソート可能、選択可能、グループ化可能、並べ替え可能、仮想化されたテーブルが必要な場合はこちらを使用してください。 -### 使用する場面 +### 使用する場合 - 行またはウィンドウの仮想化が必要な大規模データセット (`useRowVirtualizer`, `useWindowRowVirtualizer`)。 - 列のソート、リサイズ、並べ替え (`ColumnReorderingProvider`)、固定、およびユーザーごとの列設定 (`TableSettings`)。 - 行の選択 (単一/複数、範囲) および展開可能なセルを持つツリー/グループ化された行。 -### 使用しない場面 +### 使用しない場合 -- 数行の単純な静的テーブルで高度な機能がない場合 — `@gravity-ui/uikit` の組み込み `Table` の方が軽量です。 -- 表形式ではないリスト — `@gravity-ui/uikit` の `List` を使用してください。 +- 数行の単純な静的テーブルで高度な機能がない場合 — [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit) の uikit の組み込み `Table` の方が軽量です。 +- 非表形式のリスト — [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit) の `List` を使用してください。 - スプレッドシートスタイルのインラインセル編集 — このグリッドは読み取り/表示に焦点を当てており、編集可能なスプレッドシートではありません。 ### よくある落とし穴 - **`useTable` でテーブルを構築し、`
` をレンダリングする。** メインのプロパティは `
` の `data`/`columns` ではなく `table` (インスタンス) です。`data` と `columns` は `useTable` に渡してください。 -- **型は `@gravity-ui/table/tanstack` のサブパスから取得します。** `ColumnDef`、`RowSelectionState`、`SortingState` などをパッケージのルートからではなく、`@gravity-ui/table/tanstack` からインポートしてください。 +- **型は `@gravity-ui/table/tanstack` サブパスから取得します。** `ColumnDef`、`RowSelectionState`、`SortingState` などは、パッケージのルートからではなく、`@gravity-ui/table/tanstack` からインポートしてください。 - **ソートにはアクセサーが必要です。** ソートを機能させるには、列に `accessorKey`/`accessorFn` が必要です。`enableSorting` を設定し、`getRowId` を提供してください。 -- **React 19 + React Compiler は再レンダリングをスキップする可能性があります。** これは TanStack Table の上位の問題です。コンポーネントに `'use no memo'` ディレクティブを追加するか、`data` をメモ化してください。 -- **範囲選択はネストされた行で壊れます。** テーブルにグループ化された/ネストされた行がある場合、範囲選択は未定義の動作です。グループ化された親チェックボックスの状態を正しくするために、`useRowSelectionFixedHandler` を使用してください。 \ No newline at end of file +- **React 19 + React Compiler は再レンダリングをスキップする可能性があります。** これは上流の TanStack Table の問題です。コンポーネントに `'use no memo'` ディレクティブを追加するか、`data` をメモ化してください。 +- **範囲選択はネストされた行で壊れます。** テーブルにグループ化された/ネストされた行がある場合、範囲選択は未定義の動作です。グループ化された親チェックボックスの状態を正しく保つには、`useRowSelectionFixedHandler` を使用してください。 + +## AI エージェント向けドキュメント + +インストールされているバージョン向けの、エージェントが読み取り可能なドキュメントは `node_modules/@gravity-ui/table/build/docs/INDEX.md` にあります。 \ No newline at end of file diff --git a/src/content/local-docs/libs/table/README-ko.md b/src/content/local-docs/libs/table/README-ko.md index 0222bdc5a5d2..187f13d4a91f 100644 --- a/src/content/local-docs/libs/table/README-ko.md +++ b/src/content/local-docs/libs/table/README-ko.md @@ -39,14 +39,14 @@ const BasicExample = () => { }; ``` -## 컴포넌트 +### 컴포넌트 -두 가지 Table 컴포넌트를 사용할 수 있습니다: +두 가지 Table 컴포넌트를 사용할 수 있습니다. - `BaseTable` - 기본적인 스타일만 적용된 컴포넌트입니다. - `Table` - Gravity UI 기반 스타일이 적용된 컴포넌트입니다. -### 행 선택 +#### 행 선택 ```tsx import {selectionColumn} from '@gravity-ui/table'; @@ -79,11 +79,11 @@ const RowSelectionExample = () => { }; ``` -선택 기능과 함께 그룹화를 사용하려면 `useRowSelectionFixedHandler` 훅을 사용하세요. 이 훅 없이는 부모 행 체크박스의 상태가 올바르게 표시되지 않습니다. https://github.com/TanStack/table/issues/4878 +선택 기능과 함께 그룹화를 사용하려면 `useRowSelectionFixedHandler` 훅을 사용하세요. 이 훅 없이는 부모 행의 체크박스 상태가 올바르게 표시되지 않습니다. https://github.com/TanStack/table/issues/4878 -### 사용자 정의 범위 선택 컬럼 +#### 사용자 정의 범위 선택 컬럼 -`useToggleRangeSelectionHandler` 훅은 Shift+클릭 이벤트를 감지하고 범위 선택을 수행하는 변경 핸들러를 반환합니다. 테이블 및 행의 내부 상태에 액세스하려면 `CellContext` 인스턴스를 전달해야 합니다. +`useToggleRangeSelectionHandler` 훅은 Shift+클릭 이벤트를 감지하고 범위 행 선택을 수행하는 변경 핸들러를 반환합니다. 테이블 및 행의 내부 상태에 접근하려면 `CellContext` 인스턴스를 전달해야 합니다. ```tsx import React, {type ChangeEvent, useCallback, useState} from 'react'; @@ -166,7 +166,7 @@ const RowRangedSelectionExample = () => { }; ``` -`RangedSelectionCheckbox` 컴포넌트도 제공됩니다. 이 컴포넌트는 내부적으로 훅을 사용하며 `CellContext` 인스턴스를 prop으로 받습니다. 이 컴포넌트는 사용자 정의 선택 컬럼에 범위 선택 기능을 추가하는 데 편리한 방법을 제공합니다. +내부적으로 훅을 사용하고 `CellContext` 인스턴스를 prop으로 받는 `RangedSelectionCheckbox` 컴포넌트도 있습니다. 이 컴포넌트는 사용자 정의 선택 컬럼에 범위 선택 기능을 추가하는 바로 가기를 제공합니다. ```tsx import type {ColumnDef} from '@gravity-ui/table/tanstack'; @@ -198,7 +198,7 @@ export const selectionColumn: ColumnDef = { }; ``` -기본적으로 `selectionColumn`으로 생성된 선택 컬럼은 범위 선택 기능을 포함합니다. +기본적으로 `selectionColumn`으로 생성된 선택 컬럼에는 범위 선택 기능이 포함됩니다. ```tsx import {selectionColumn} from '@gravity-ui/table'; @@ -212,7 +212,7 @@ const columns: ColumnDef[] = [ **참고**: 테이블에 중첩된 행이 포함된 경우 범위 선택이 작동하지 않습니다. 현재 이 동작은 정의되지 않은 것으로 간주됩니다. -### 정렬 +#### 정렬 react-table의 컬럼 속성에 대해 알아보세요. [문서](https://tanstack.com/table/v8/docs/guide/sorting) @@ -256,7 +256,7 @@ const table = useTable({ }); ``` -### 그룹화 +#### 그룹화 ```tsx import type {ExpandedState, Row} from '@gravity-ui/table/tanstack'; @@ -319,11 +319,11 @@ const GroupingExample = () => { }; ``` -선택 기능과 함께 그룹화를 사용하려면 `useRowSelectionFixedHandler` 훅을 사용하세요. 이 훅 없이는 부모 행 체크박스의 상태가 올바르지 않게 됩니다. https://github.com/TanStack/table/issues/4878 +선택 기능과 함께 그룹화를 사용하려면 `useRowSelectionFixedHandler` 훅을 사용하세요. 이 훅 없이는 상위 행 체크박스의 상태가 올바르지 않게 됩니다. https://github.com/TanStack/table/issues/4878 -중첩 스타일을 활성화하려면 컬럼 설정에서 `withNestingStyles = true`를 전달하세요. +중첩 스타일을 활성화하려면 컬럼 구성에서 `withNestingStyles = true`를 전달하세요. -중첩 표시기는 `showTreeDepthIndicators = false`를 전달하여 비활성화할 수 있습니다. +트리 깊이 표시기는 `showTreeDepthIndicators = false`를 전달하여 비활성화할 수 있습니다. 행을 확장/축소하는 컨트롤을 추가하려면 셀 내용을 `TreeExpandableCell` 컴포넌트 또는 유사한 사용자 정의 컴포넌트로 감싸세요. @@ -341,11 +341,11 @@ const columns: ColumnDef[] = [ {info.getValue()} ), }, - // ...다른 컬럼들 + // ...다른 컬럼 ]; ``` -### 재정렬 +#### 재정렬 ```tsx import type {ReorderingProviderProps} from '@gravity-ui/table'; @@ -353,7 +353,7 @@ import {dragHandleColumn, ReorderingProvider} from '@gravity-ui/table'; const columns: ColumnDef[] = [ dragHandleColumn, - // ...다른 컬럼들 + // ...다른 컬럼 ]; const data: Person[] = [ @@ -392,9 +392,9 @@ const ReorderingExample = () => { }; ``` -### 컬럼 재정렬 +#### 컬럼 재정렬 -`ColumnReorderingProvider`로 테이블을 감싸면 헤더를 드래그 앤 드롭하여 컬럼 순서를 재정렬할 수 있습니다. +테이블을 `ColumnReorderingProvider`로 감싸면 헤더를 드래그 앤 드롭하여 컬럼 순서를 재정렬할 수 있습니다. ```tsx import {ColumnReorderingProvider} from '@gravity-ui/table'; @@ -419,7 +419,7 @@ const ColumnReorderingExample = () => { }; ``` -`columnOrder`를 직접 제어하는 경우(예: 영구 저장), `onReorder`를 전달하고 결과 순서를 적용하세요. +`columnOrder`를 직접 제어하는 경우(예: 영구 저장) `onReorder`를 전달하고 결과 순서를 적용하세요. ```tsx const [columnOrder, setColumnOrder] = React.useState([]); @@ -443,7 +443,7 @@ return ( CSS API: -| CSS 변수 | 기본값 | 설명 | +| CSS 변수 | 기본값 | 설명 | | -------------------------------------------- | ----------------------------- | -------------------------------- | | `--gt-table-reordering-insertion-line-color` | `#4d8bff` | 드롭 삽입선의 색상 | | `--gt-table-reordering-insertion-line-width` | `2px` | 드롭 삽입선의 너비 | @@ -454,7 +454,7 @@ CSS API: 특정 열의 재정렬을 금지하려면 해당 열 정의에서 `enableColumnReordering: false`를 설정하세요. 플레이스홀더(그룹화된) 열은 드래그할 수 없습니다. `activationDistance`(기본값 `8`)를 사용하여 포인터가 드래그가 시작되기 전에 이동해야 하는 거리를 조정하면 헤더 클릭(정렬 등)이 계속 작동합니다. -고정된 열도 재정렬할 수 있지만, 서로 간에만 가능합니다. 열은 왼쪽 고정 그룹, 오른쪽 고정 그룹 또는 중앙(고정되지 않은) 그룹 내에서 이동할 수 있으며, 드래그 시 고정 경계를 넘지 않습니다. +고정된 열도 재정렬할 수 있지만, 자신들끼리만 가능합니다. 열은 왼쪽 고정 그룹, 오른쪽 고정 그룹 또는 중앙(고정되지 않은) 그룹 내에서 이동할 수 있으며, 드래그 시 고정 경계를 넘지 않습니다. ```tsx ``` -### 가상화 +#### 가상화 -그리드 컨테이너를 스크롤 요소로 사용하려는 경우 사용하세요(창을 사용하려면 창 가상화 섹션을 참조하세요). 컨테이너에 고정된 높이를 설정해야 합니다. 그렇지 않으면 가상화가 작동하지 않습니다. +그리드 컨테이너를 스크롤 요소로 사용하고 싶을 때 사용합니다(창을 사용하려면 창 가상화 섹션을 참조하세요). 컨테이너에 고정된 높이를 설정해야 합니다. 그렇지 않으면 가상화가 작동하지 않습니다. ```tsx import {useRowVirtualizer} from '@gravity-ui/table'; @@ -551,9 +551,9 @@ return ( ); ``` -### 창 가상화 +#### 창 가상화 -창을 스크롤 요소로 사용하려는 경우 사용하세요. +창을 스크롤 요소로 사용하고 싶을 때 사용합니다. ```tsx import {useWindowRowVirtualizer} from '@gravity-ui/table'; @@ -586,7 +586,7 @@ const WindowVirtualizationExample = () => { }; ``` -### 크기 조정 +#### 크기 조정 ```tsx const columns: ColumnDef[] = [ @@ -609,7 +609,7 @@ const ResizingDemo = () => { }; ``` -### 열 설정 +#### 열 설정 ```tsx const columns: ColumnDef[] = [ @@ -619,7 +619,7 @@ const columns: ColumnDef[] = [ header: ({table}) => , meta: { hideInSettings: false, // 선택 사항. 설정 팝오버에서 이 열을 숨길 수 있습니다. - titleInSettings: 'ReactNode', // 선택 사항. 설정 팝오버의 헤더 필드를 재정의합니다(헤더와 설정 팝오버에 다른 콘텐츠가 필요한 경우). + titleInSettings: 'ReactNode', // 선택 사항. 설정 팝오버의 헤더 필드를 재정의합니다 (헤더와 설정 팝오버에 다른 콘텐츠가 필요한 경우). }, }, // 또는 getSettingsColumn 함수를 사용할 수 있습니다. ]; @@ -637,7 +637,7 @@ const TableSettingsDemo = () => { /* 리프 열 ID */ ]); // 외부 제어 및 초기 상태용 - // useTableSettings 훅을 사용하여 상태, 콜백을 가져오고 설정 적용 콜백을 설정하는 대안: + // useTableSettings 훅을 사용하여 상태, 콜백 및 설정 적용 콜백을 가져오는 대안 변형: // const {state, callbacks} = useTableSettings({initialVisibility: {}, initialOrder: []}) ``` @@ -657,13 +657,13 @@ const TableSettingsDemo = () => { }; ``` -[react-table](https://tanstack.com/table/v8/docs/api/features/column-sizing) [문서](https://tanstack.com/table/v8/docs/api/features/column-sizing)에서 테이블 및 열 크기 조정 속성에 대해 자세히 알아보세요. +react-table의 테이블 및 컬럼 크기 조절 속성에 대해 자세히 알아보세요. [문서](https://tanstack.com/table/v8/docs/api/features/column-sizing) -## 알려진 문제 및 호환성 +## 알려진 문제점 및 호환성 ### React 19 + React Compiler 호환성 -**⚠️ 알려진 문제:** `@gravity-ui/table`(TanStack Table 기반)을 사용할 때 React 19 및 React Compiler와 호환성 문제가 있습니다. 데이터가 변경되어도 테이블이 다시 렌더링되지 않을 수 있습니다. 자세한 내용은 [TanStack Table 이슈 #5567](https://github.com/TanStack/table/issues/5567)을 참조하세요. +**⚠️ 알려진 문제점:** `@gravity-ui/table`(TanStack Table 기반)을 사용할 때 React 19 및 React Compiler와 호환성 문제가 있습니다. 데이터가 변경되어도 테이블이 다시 렌더링되지 않을 수 있습니다. 자세한 내용은 [TanStack Table 이슈 #5567](https://github.com/TanStack/table/issues/5567)을 참조하세요. **해결 방법:** @@ -720,12 +720,12 @@ MIT 라이선스에 따라 배포됩니다. 자세한 내용은 [LICENSE](LICENS ## AI 에이전트용 -Gravity UI 앱을 위한 헤드리스 TanStack-Table 기반 데이터 그리드입니다. uikit의 기본 `Table` 위에 원시 마크업을 구성하는 대신 정렬 가능, 선택 가능, 그룹화 가능, 재정렬 가능 및 가상화된 테이블이 필요한 경우 사용하세요. +Gravity UI 앱을 위한 헤드리스 TanStack-Table 기반 데이터 그리드입니다. uikit의 기본 `Table` 위에 원시 마크업을 구성하는 대신 정렬 가능하고, 선택 가능하며, 그룹화 가능하고, 재정렬 가능하며, 가상화된 테이블이 필요한 경우 이 기능을 사용하세요. ### 언제 사용해야 할까요? -- 행 또는 창 가상화가 필요한 대규모 데이터 세트 (`useRowVirtualizer`, `useWindowRowVirtualizer`). -- 열 정렬, 크기 조정, 재정렬 (`ColumnReorderingProvider`), 고정 및 사용자별 열 설정 (`TableSettings`). +- 행 또는 창 가상화가 필요한 대규모 데이터셋 (`useRowVirtualizer`, `useWindowRowVirtualizer`). +- 컬럼 정렬, 크기 조절, 재정렬 (`ColumnReorderingProvider`), 고정 및 사용자별 컬럼 설정 (`TableSettings`). - 행 선택(단일/다중, 범위) 및 확장 가능한 셀이 있는 트리/그룹화된 행. ### 언제 사용하지 않아야 할까요? @@ -736,8 +736,12 @@ Gravity UI 앱을 위한 헤드리스 TanStack-Table 기반 데이터 그리드 ### 일반적인 함정 -- **`useTable`로 테이블을 빌드한 다음 `
`를 렌더링합니다.** 기본 속성은 `
`의 `data`/`columns`가 아니라 `table`(인스턴스)입니다. `data`와 `columns`를 `useTable`에 전달하세요. +- **`useTable`로 테이블을 빌드한 다음 `
`를 렌더링합니다.** 주요 prop은 `
`의 `data`/`columns`가 아니라 `table`(인스턴스)입니다. `data`와 `columns`는 `useTable`에 전달하세요. - **타입은 `@gravity-ui/table/tanstack` 하위 경로에서 가져옵니다.** `ColumnDef`, `RowSelectionState`, `SortingState` 등은 패키지 루트가 아닌 `@gravity-ui/table/tanstack`에서 가져옵니다. -- **정렬에는 accessor가 필요합니다.** 정렬이 작동하려면 열에 `accessorKey`/`accessorFn`이 있어야 합니다. `enableSorting`을 설정하고 `getRowId`를 제공하세요. +- **정렬에는 accessor가 필요합니다.** 정렬이 작동하려면 컬럼에 `accessorKey`/`accessorFn`이 있어야 합니다. `enableSorting`을 설정하고 `getRowId`를 제공하세요. - **React 19 + React Compiler는 다시 렌더링을 건너뛸 수 있습니다.** 이는 상위 TanStack Table 문제이므로 컴포넌트에 `'use no memo'` 지시문을 추가하거나 `data`를 메모이제이션하세요. -- **범위 선택이 중첩된 행에서 깨집니다.** 테이블에 그룹화된/중첩된 행이 있을 때 범위 선택은 정의되지 않은 동작입니다. 그룹화 시 올바른 부모 체크박스 상태를 위해 `useRowSelectionFixedHandler`를 사용하세요. \ No newline at end of file +- **범위 선택이 중첩된 행에서 깨집니다.** 테이블에 그룹화/중첩된 행이 있을 때 범위 선택은 정의되지 않은 동작입니다. 그룹화된 경우 올바른 부모 체크박스 상태를 위해 `useRowSelectionFixedHandler`를 사용하세요. + +## AI 에이전트용 문서 + +설치된 버전에 대한 에이전트 읽기 가능 문서는 `node_modules/@gravity-ui/table/build/docs/INDEX.md`에 있습니다. \ No newline at end of file diff --git a/src/content/local-docs/libs/table/README-pt.md b/src/content/local-docs/libs/table/README-pt.md index dfb0da2365fc..8b80a6731bf5 100644 --- a/src/content/local-docs/libs/table/README-pt.md +++ b/src/content/local-docs/libs/table/README-pt.md @@ -39,14 +39,14 @@ const BasicExample = () => { }; ``` -## Componentes +### Componentes Existem dois componentes `Table` que você pode usar: - `BaseTable` - um componente com estilos básicos apenas; - `Table` - um componente com estilos baseados no Gravity UI. -### Seleção de Linha +#### Seleção de Linhas ```tsx import {selectionColumn} from '@gravity-ui/table'; @@ -81,9 +81,9 @@ const RowSelectionExample = () => { Para usar agrupamento com seleção, utilize o hook `useRowSelectionFixedHandler`. Sem ele, o estado da caixa de seleção da linha pai ficará incorreto. https://github.com/TanStack/table/issues/4878 -### Coluna de Seleção em Intervalo Personalizada +#### Coluna de Seleção de Intervalo Personalizada -O hook `useToggleRangeSelectionHandler` retorna um manipulador de eventos que escuta cliques com a tecla Shift e realiza a seleção de linhas em intervalo. Ele precisa receber uma instância de `CellContext` para ter acesso aos estados internos da tabela e da linha. +O hook `useToggleRangeSelectionHandler` retorna um manipulador de eventos que escuta cliques com a tecla Shift pressionada e realiza a seleção de linhas em intervalo. Ele precisa receber uma instância de `CellContext` para ter acesso aos estados internos da tabela e da linha. ```tsx import React, {type ChangeEvent, useCallback, useState} from 'react'; @@ -166,7 +166,7 @@ const RowRangedSelectionExample = () => { }; ``` -Existe também o componente `RangedSelectionCheckbox`, que utiliza o hook internamente e aceita uma instância de `CellContext` como prop. Este componente oferece um atalho para adicionar a funcionalidade de seleção em intervalo a colunas de seleção personalizadas. +Existe também o componente `RangedSelectionCheckbox`, que utiliza o hook internamente e aceita uma instância de `CellContext` como prop. Este componente oferece um atalho para adicionar a funcionalidade de seleção de intervalo a colunas de seleção personalizadas. ```tsx import type {ColumnDef} from '@gravity-ui/table/tanstack'; @@ -198,7 +198,7 @@ export const selectionColumn: ColumnDef = { }; ``` -Por padrão, a coluna de seleção gerada com `selectionColumn` inclui a funcionalidade de seleção em intervalo. +Por padrão, a coluna de seleção gerada com `selectionColumn` inclui a funcionalidade de seleção de intervalo. ```tsx import {selectionColumn} from '@gravity-ui/table'; @@ -210,9 +210,9 @@ const columns: ColumnDef[] = [ ]; ``` -**Observação**: Se a tabela contiver linhas aninhadas, a seleção em intervalo não funcionará. No momento, isso é considerado um comportamento indefinido. +**Observação**: Se a tabela contiver linhas aninhadas, a seleção de intervalo não funcionará. No momento, isso é considerado um comportamento indefinido. -### Ordenação +#### Ordenação Saiba mais sobre as propriedades de coluna na documentação do [react-table](https://tanstack.com/table/v8/docs/guide/sorting). @@ -230,7 +230,7 @@ const data: Person[] = [ const SortingExample = () => { const [sorting, setSorting] = React.useState([]); - // Sua coluna DEVE ter accessorFn para que a ordenação seja habilitada + // Sua coluna DEVE ter accessorFn para que a ordenação seja ativada const table = useTable({ columns, @@ -256,7 +256,7 @@ const table = useTable({ }); ``` -### Agrupamento +#### Agrupamento ```tsx import type {ExpandedState, Row} from '@gravity-ui/table/tanstack'; @@ -319,9 +319,9 @@ const GroupingExample = () => { }; ``` -Para usar agrupamento com seleção, utilize o hook `useRowSelectionFixedHandler`. Sem ele, o estado da caixa de seleção da linha pai ficará incorreto. https://github.com/TanStack/table/issues/4878 +Para usar agrupamento com seleção, utilize o hook `useRowSelectionFixedHandler`. Sem ele, o estado da caixa de seleção pai ficará incorreto. https://github.com/TanStack/table/issues/4878 -Para habilitar estilos de aninhamento, passe `withNestingStyles = true` na configuração da coluna. +Para ativar estilos de aninhamento, passe `withNestingStyles = true` na configuração da coluna. Indicadores de aninhamento podem ser desativados passando `showTreeDepthIndicators = false`. @@ -345,7 +345,7 @@ const columns: ColumnDef[] = [ ]; ``` -### Reordenação +#### Reordenação ```tsx import type {ReorderingProviderProps} from '@gravity-ui/table'; @@ -392,9 +392,9 @@ const ReorderingExample = () => { }; ``` -### Reordenação de Colunas +#### Reordenação de Colunas -Envolva a tabela com `ColumnReorderingProvider` para habilitar a reordenação de colunas por meio de arrastar e soltar em seus cabeçalhos. +Envolva a tabela com `ColumnReorderingProvider` para ativar a reordenação de colunas por meio de arrastar e soltar em seus cabeçalhos. ```tsx import {ColumnReorderingProvider} from '@gravity-ui/table'; @@ -443,18 +443,18 @@ return ( API CSS: -| Variável CSS | Padrão | Descrição | -| -------------------------------------------- | ----------------------------- | -------------------------------- | -| `--gt-table-reordering-insertion-line-color` | `#4d8bff` | Cor da linha de inserção de arrastar | -| `--gt-table-reordering-insertion-line-width` | `2px` | Largura da linha de inserção de arrastar | -| `--gt-table-reordering-dragged-opacity` | `0.4` | Opacidade da coluna arrastada | -| `--gt-table-drag-overlay-background` | `#fff` | Fundo da prévia de arrastar | +| Variável CSS | Padrão | Descrição | +| -------------------------------------------- | ------------------------------- | ------------------------------ | +| `--gt-table-reordering-insertion-line-color` | `#4d8bff` | Cor da linha de inserção de soltar | +| `--gt-table-reordering-insertion-line-width` | `2px` | Largura da linha de inserção de soltar | +| `--gt-table-reordering-dragged-opacity` | `0.4` | Opacidade da coluna arrastada | +| `--gt-table-drag-overlay-background` | `#fff` | Fundo da prévia de arrastar | | `--gt-table-drag-overlay-shadow` | `0 3px 12px rgba(0,0,0,0.15)` | Sombra da caixa da prévia de arrastar | -| `--gt-table-drag-overlay-border-radius` | `6px` | Raio da borda da prévia de arrastar | +| `--gt-table-drag-overlay-border-radius` | `6px` | Raio da borda da prévia de arrastar | Para proibir a reordenação de uma coluna específica, defina `enableColumnReordering: false` na sua definição de coluna. Colunas de placeholder (agrupadas) não são arrastáveis. Use `activationDistance` (padrão `8`) para ajustar a distância que o ponteiro deve se mover antes que um arrasto comece, o que mantém os cliques no cabeçalho (como ordenação) funcionando. -Colunas fixadas também podem ser reordenadas, mas apenas entre si: uma coluna pode ser movida dentro do grupo fixado à esquerda, do grupo fixado à direita ou do grupo central (não fixado) — ela nunca cruza um limite de fixação ao ser arrastada. +Colunas fixadas também podem ser reordenadas, mas apenas entre si: uma coluna pode ser movida dentro do grupo fixado à esquerda, do grupo fixado à direita ou do grupo central (não fixado) — ela nunca cruza um limite de fixação ao arrastar. ```tsx ``` -Durante o arrasto: +Enquanto arrasta: -- uma prévia flutuante da coluna (seu cabeçalho mais as primeiras linhas) segue o ponteiro em uma sobreposição de arrasto; +- uma prévia flutuante da coluna (seu cabeçalho mais as primeiras linhas) segue o ponteiro em uma sobreposição de arrastar; - a coluna arrastada fica semitransparente; - uma linha de inserção azul é desenhada onde a coluna será solta; @@ -488,7 +488,7 @@ Durante o arrasto: ``` -### Virtualização +#### Virtualização Use se você quiser usar o contêiner da grade como elemento de rolagem (se quiser usar a janela, veja a seção de virtualização de janela). Certifique-se de definir uma altura fixa no contêiner; caso contrário, a virtualização não funcionará. @@ -551,7 +551,7 @@ return ( ); ``` -### Virtualização de Janela +#### Virtualização de Janela Use se você quiser usar a janela como elemento de rolagem @@ -586,7 +586,7 @@ const WindowVirtualizationExample = () => { }; ``` -### Redimensionamento +#### Redimensionamento ```tsx const columns: ColumnDef[] = [ @@ -609,7 +609,7 @@ const ResizingDemo = () => { }; ``` -### Configurações de Coluna +#### Configurações de Coluna ```tsx const columns: ColumnDef[] = [ @@ -641,7 +641,7 @@ const TableSettingsDemo = () => { // const {state, callbacks} = useTableSettings({initialVisibility: {}, initialOrder: []}) ``` -```tsx +```typescript const table = useTable({ columns, data, @@ -720,19 +720,19 @@ Distribuído sob a Licença MIT. Veja [LICENSE](LICENSE) para detalhes. ## Para agentes de IA -Uma grade de dados headless, alimentada por TanStack-Table, para aplicativos Gravity UI — utilize-a para tabelas com ordenação, seleção, agrupamento, reordenação e virtualização em vez de compor marcação bruta sobre a `Table` básica do uikit. +Uma grade de dados headless, alimentada por TanStack-Table, para aplicativos Gravity UI — utilize-a para tabelas ordenáveis, selecionáveis, agrupáveis, reorganizáveis e virtualizadas em vez de compor marcação bruta sobre o `Table` básico do uikit. ### Quando usar - Grandes conjuntos de dados que precisam de virtualização de linha ou janela (`useRowVirtualizer`, `useWindowRowVirtualizer`). -- Ordenação de colunas, redimensionamento, reordenação (`ColumnReorderingProvider`), fixação e configurações de coluna por usuário (`TableSettings`). -- Seleção de linha (única/múltipla, intervalo) e linhas de árvore/agrupadas com células expansíveis. +- Ordenação de colunas, redimensionamento, reorganização (`ColumnReorderingProvider`), fixação e configurações de coluna por usuário (`TableSettings`). +- Seleção de linha (única/múltipla, em intervalo) e linhas de árvore/agrupadas com células expansíveis. ### Quando não usar -- Uma tabela simples e estática com algumas linhas e sem recursos avançados — a `Table` integrada do uikit de [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit) é mais leve. +- Uma tabela simples e estática com algumas linhas e sem recursos avançados — o `Table` integrado do uikit de [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit) é mais leve. - Uma lista não tabular — use `List` de [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit). -- Edição de células inline no estilo de planilha — esta grade é focada em leitura/exibição, não em uma planilha editável. +- Edição de células inline no estilo planilha — esta grade é focada em leitura/exibição, não em uma planilha editável. ### Armadilhas comuns @@ -740,4 +740,8 @@ Uma grade de dados headless, alimentada por TanStack-Table, para aplicativos Gra - **Tipos vêm do subcaminho `@gravity-ui/table/tanstack`.** Importe `ColumnDef`, `RowSelectionState`, `SortingState`, etc. de `@gravity-ui/table/tanstack`, não da raiz do pacote. - **A ordenação precisa de um acessador.** Uma coluna deve ter `accessorKey`/`accessorFn` para que a ordenação funcione; defina `enableSorting` e forneça `getRowId`. - **React 19 + React Compiler pode pular renderizações.** Este é um problema upstream do TanStack Table — adicione a diretiva `'use no memo'` ao componente ou memoize `data`. -- **A seleção de intervalo falha com linhas aninhadas.** O comportamento da seleção de intervalo é indefinido quando a tabela tem linhas agrupadas/aninhadas; use `useRowSelectionFixedHandler` para o estado correto da caixa de seleção pai com agrupamento. \ No newline at end of file +- **A seleção em intervalo quebra com linhas aninhadas.** A seleção em intervalo tem comportamento indefinido quando a tabela tem linhas agrupadas/aninhadas; use `useRowSelectionFixedHandler` para o estado correto da caixa de seleção pai com agrupamento. + +## Documentação para agentes de IA + +A documentação legível por agente para a versão instalada está localizada em `node_modules/@gravity-ui/table/build/docs/INDEX.md`. \ No newline at end of file diff --git a/src/content/local-docs/libs/table/README-zh.md b/src/content/local-docs/libs/table/README-zh.md index abe578a52c1a..bb7963aa49b9 100644 --- a/src/content/local-docs/libs/table/README-zh.md +++ b/src/content/local-docs/libs/table/README-zh.md @@ -39,14 +39,14 @@ const BasicExample = () => { }; ``` -## 组件 +### 组件 您可以使用两个 Table 组件： - `BaseTable` - 仅包含基本样式的组件； -- `Table` - 包含 Gravity UI 样式的组件。 +- `Table` - 包含基于 Gravity UI 样式的组件。 -### 行选择 +#### 行选择 ```tsx import {selectionColumn} from '@gravity-ui/table'; @@ -79,9 +79,9 @@ const RowSelectionExample = () => { }; ``` -要使用带选择功能的组，请使用 `useRowSelectionFixedHandler` hook。没有它，父行复选框的状态将不正确。https://github.com/TanStack/table/issues/4878 +要使用带有选择功能的组，请使用 `useRowSelectionFixedHandler` hook。没有它，父行复选框的状态将不正确。https://github.com/TanStack/table/issues/4878 -### 自定义范围选择列 +#### 自定义范围选择列 `useToggleRangeSelectionHandler` hook 返回一个更改处理程序，该处理程序监听 Shift+click 事件并执行范围行选择。它需要一个 `CellContext` 实例才能访问表格和行的内部状态。 @@ -212,7 +212,7 @@ const columns: ColumnDef[] = [ **注意**: 如果表格包含嵌套行，范围选择将不起作用。目前，这被认为是未定义行为。 -### 排序 +#### 排序 了解 `react-table` 的列属性，请参阅 [文档](https://tanstack.com/table/v8/docs/guide/sorting)。 @@ -256,7 +256,7 @@ const table = useTable({ }); ``` -### 分组 +#### 分组 ```tsx import type {ExpandedState, Row} from '@gravity-ui/table/tanstack'; @@ -345,7 +345,7 @@ const columns: ColumnDef[] = [ ]; ``` -### 行重排 +#### 重新排序 ```tsx import type {ReorderingProviderProps} from '@gravity-ui/table'; @@ -392,9 +392,9 @@ const ReorderingExample = () => { }; ``` -### 列重排 +#### 列重新排序 -将表格包装在 `ColumnReorderingProvider` 中，以启用通过表头进行列的拖放重排。 +用 `ColumnReorderingProvider` 包裹表格，以启用通过表头拖放重新排序列。 ```tsx import {ColumnReorderingProvider} from '@gravity-ui/table'; @@ -488,9 +488,9 @@ CSS API： ``` -### 虚拟化 +#### 虚拟化 -如果您想将网格容器用作滚动元素（如果您想使用窗口，请参阅窗口虚拟化部分）。请确保为容器设置固定的高度；否则，虚拟化将无法工作。 +如果您想将网格容器用作滚动元素（如果您想使用窗口，请参阅窗口虚拟化部分）。请确保为容器设置固定的高度；否则，虚拟化将不起作用。 ```tsx import {useRowVirtualizer} from '@gravity-ui/table'; @@ -527,7 +527,7 @@ const VirtualizationExample = () => { }; ``` -如果您将虚拟化与重新排序功能一起使用，还需要传递 `rangeExtractor` 选项： +如果您将虚拟化与重新排序功能一起使用，您还需要传递 `rangeExtractor` 选项： ```tsx import {getVirtualRowRangeExtractor} from '@gravity-ui/table'; @@ -551,7 +551,7 @@ return ( ); ``` -### 窗口虚拟化 +#### 窗口虚拟化 如果您想使用窗口作为滚动元素 @@ -586,7 +586,7 @@ const WindowVirtualizationExample = () => { }; ``` -### 列宽度调整 +#### 列宽度调整 ```tsx const columns: ColumnDef[] = [ @@ -609,7 +609,7 @@ const ResizingDemo = () => { }; ``` -### 列设置 +#### 列设置 ```tsx const columns: ColumnDef[] = [ @@ -641,6 +641,13 @@ const TableSettingsDemo = () => { // const {state, callbacks} = useTableSettings({initialVisibility: {}, initialOrder: []}) ```tsx +import React from 'react'; +import {Table, useTable} from '@gravity-ui/table'; +import type {ColumnDef} from '@gravity-ui/table/tanstack'; + +function MyTable() { + const [data, setData] = React.useState([]); + const table = useTable({ columns, data, @@ -662,7 +669,7 @@ const TableSettingsDemo = () => { ### React 19 + React Compiler 兼容性 -**⚠️ 已知问题：** 在使用 `@gravity-ui/table`（基于 TanStack Table 构建）时，存在一个与 React 19 和 React Compiler 的已知兼容性问题。当数据更改时，表格可能不会重新渲染。详情请参阅 [TanStack Table issue #5567](https://github.com/TanStack/table/issues/5567)。 +**⚠️ 已知问题：** 在使用 `@gravity-ui/table`（基于 TanStack Table 构建）时，React 19 和 React Compiler 存在一个已知的兼容性问题。表格在数据更改时可能不会重新渲染。详情请参阅 [TanStack Table issue #5567](https://github.com/TanStack/table/issues/5567)。 **解决方法：** @@ -674,7 +681,7 @@ import {Table, useTable} from '@gravity-ui/table'; import type {ColumnDef} from '@gravity-ui/table/tanstack'; function MyTable() { - 'use no memo'; // 为此组件禁用 React Compiler 的 memoization + 'use no memo'; // 禁用此组件的 React Compiler 记忆化 const [data, setData] = React.useState([]); @@ -689,7 +696,7 @@ function MyTable() { **替代方案：** -您也可以显式地 memoize 表格实例或数据，以确保正确重新渲染： +您也可以显式地记忆化表格实例或数据，以确保正确重新渲染： ```tsx import React from 'react'; @@ -699,7 +706,7 @@ import type {ColumnDef} from '@gravity-ui/table/tanstack'; function MyTable() { const [data, setData] = React.useState([]); - // 显式 memoize 数据以确保重新渲染 + // 显式记忆化数据以确保重新渲染 const memoizedData = React.useMemo(() => data, [data]); const table = useTable({ @@ -711,32 +718,36 @@ function MyTable() { } ``` -**注意：** 此问题存在于底层的 TanStack Table 库中，需要在此处修复。在修复可用之前，上述解决方法应该有所帮助。 +**注意：** 此问题存在于底层的 TanStack Table 库中，需要在此库中修复。上述解决方法将在修复可用之前提供帮助。 ## 许可证 -MIT 许可证。详情请参阅 [LICENSE](LICENSE)。 +根据 MIT 许可证分发。详情请参阅 [LICENSE](LICENSE)。 ## 致 AI 代理 -为 Gravity UI 应用打造的无头、基于 TanStack Table 的数据网格 — 当您需要在 uikit 的基础 `Table` 上组合原始标记时，请使用它来实现可排序、可选择、可分组、可重排和虚拟化的表格。 +为 Gravity UI 应用设计的无头、基于 TanStack Table 的数据网格 — 当您需要可排序、可选择、可分组、可重排和虚拟化的表格时，请使用它，而不是在 uikit 的基础 `Table` 上组合原始标记。 ### 何时使用 - 需要行或窗口虚拟化的大型数据集（`useRowVirtualizer`、`useWindowRowVirtualizer`）。 -- 列排序、调整大小、重排（`ColumnReorderingProvider`）、固定以及用户自定义列设置（`TableSettings`）。 +- 列排序、调整大小、重排（`ColumnReorderingProvider`）、固定以及每个用户的列设置（`TableSettings`）。 - 行选择（单选/多选、范围选择）以及带有可展开单元格的树形/分组行。 -### 何时避免使用 +### 何时不要使用 -- 具有少量行且没有高级功能的简单静态表格 — 来自 [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit) 的 uikit 内置 `Table` 更轻量。 +- 只有少量行且没有高级功能的简单静态表格 — uikit 中来自 [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit) 的内置 `Table` 更轻量。 - 非表格列表 — 使用来自 [`@gravity-ui/uikit`](https://github.com/gravity-ui/uikit) 的 `List`。 -- 电子表格风格的内联单元格编辑 — 此网格侧重于读取/显示，而非可编辑的电子表格。 +- 电子表格风格的内联单元格编辑 — 此网格侧重于读取/显示，而不是可编辑的电子表格。 ### 常见陷阱 - **您使用 `useTable` 构建表格，然后渲染 `
`。** 主要 prop 是 `table`（实例），而不是直接在 `
` 上的 `data`/`columns`；将 `data` 和 `columns` 传递给 `useTable`。 - **类型来自 `@gravity-ui/table/tanstack` 子路径。** 从 `@gravity-ui/table/tanstack` 导入 `ColumnDef`、`RowSelectionState`、`SortingState` 等，而不是从包的根目录导入。 -- **排序需要一个访问器。** 列必须具有 `accessorKey`/`accessorFn` 才能使排序生效；设置 `enableSorting` 并提供 `getRowId`。 -- **React 19 + React Compiler 可能会跳过重新渲染。** 这是上游 TanStack Table 的问题 — 在组件中添加 `'use no memo'` 指令或 memoize `data`。 -- **范围选择在嵌套行中会中断。** 当表格具有分组/嵌套行时，范围选择是未定义行为；使用 `useRowSelectionFixedHandler` 来正确处理分组情况下的父复选框状态。 \ No newline at end of file +- **排序需要访问器。** 列必须具有 `accessorKey`/`accessorFn` 才能使排序生效；设置 `enableSorting` 并提供 `getRowId`。 +- **React 19 + React Compiler 可能会跳过重新渲染。** 这是上游 TanStack Table 的问题 — 在组件中添加 `'use no memo'` 指令或记忆化 `data`。 +- **范围选择在嵌套行中会中断。** 当表格具有分组/嵌套行时，范围选择是未定义行为；使用 `useRowSelectionFixedHandler` 来正确处理分组时的父复选框状态。 + +## 致 AI 代理的文档 + +已安装版本的代理可读文档位于 `node_modules/@gravity-ui/table/build/docs/INDEX.md`。 \ No newline at end of file From 8c1211a4c6146e409635da703911f861e073b9f8 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 16 Jul 2026 06:18:57 +0000 Subject: [PATCH 5/5] translations: for package uikit --- .../local-docs/libs/uikit/README-de.md | 191 +++++++++------- .../local-docs/libs/uikit/README-es.md | 173 +++++++++------ .../local-docs/libs/uikit/README-fr.md | 177 +++++++++------ .../local-docs/libs/uikit/README-ja.md | 203 ++++++++++-------- .../local-docs/libs/uikit/README-ko.md | 185 +++++++++------- .../local-docs/libs/uikit/README-pt.md | 172 ++++++++++----- .../local-docs/libs/uikit/README-zh.md | 191 +++++++++------- 7 files changed, 779 insertions(+), 513 deletions(-) diff --git a/src/content/local-docs/libs/uikit/README-de.md b/src/content/local-docs/libs/uikit/README-de.md index bdd1a006775c..0163922729c7 100644 --- a/src/content/local-docs/libs/uikit/README-de.md +++ b/src/content/local-docs/libs/uikit/README-de.md @@ -1,144 +1,175 @@ -# UIKit · [![npm package](https://img.shields.io/npm/v/@gravity-ui/uikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/uikit) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/ci.yml?query=branch:main) [![storybook tests](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/test-storybook.yml?label=Storybook%20Tests&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/test-storybook.yml) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685?logo=storybook)](https://preview.gravity-ui.com/uikit/) +# UIKit · [![npm package](https://img.shields.io/npm/v/@gravity-ui/uikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/uikit) [![npm downloads](https://img.shields.io/npm/dm/@gravity-ui/uikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/uikit) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/ci.yml?query=branch:main) [![storybook tests](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/test-storybook.yml?label=Storybook%20Tests&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/test-storybook.yml) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685?logo=storybook)](https://preview.gravity-ui.com/uikit/) -Eine Sammlung flexibler, äußerst praktischer und effizienter React-Komponenten zur Erstellung reichhaltiger Webanwendungen. +[English](README.md) | [Русский](README-ru.md) + +Ein Set flexibler, hochgradig praktischer und effizienter React-Komponenten zur Erstellung reichhaltiger Webanwendungen. Teil des [Gravity UI](https://gravity-ui.com) Designsystems. ![Cover image](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/uikit_cover.png) -## Ressourcen +### ![Globe Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_light.svg#gh-light-mode-only) ![Globe Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_dark.svg#gh-dark-mode-only) [Website](https://gravity-ui.com)    ![Documentation Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_light.svg#gh-light-mode-only) ![Documentation Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_dark.svg#gh-dark-mode-only) [Dokumentation](https://gravity-ui.com/components/uikit/alert)    ![Figma Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_light.svg#gh-light-mode-only) ![Figma Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_dark.svg#gh-dark-mode-only) [Figma]()    ![Themer Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_light.svg#gh-light-mode-only) ![Themer Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_dark.svg#gh-dark-mode-only) [Themer](https://gravity-ui.com/themer)    ![Storybook Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_light.svg#gh-light-mode-only) ![Storybook Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_dark.svg#gh-dark-mode-only) [Storybook](https://preview.gravity-ui.com/uikit/)    ![Community Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_light.svg#gh-light-mode-only) ![Community Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_dark.svg#gh-dark-mode-only) [Community](https://t.me/gravity_ui) -### ![Globe Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_light.svg#gh-light-mode-only) ![Globe Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_dark.svg#gh-dark-mode-only) [Website](https://gravity-ui.com) + -### ![Documentation Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_light.svg#gh-light-mode-only) ![Documentation Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_dark.svg#gh-dark-mode-only) [Dokumentation](https://gravity-ui.com/components/uikit/alert) +## Über -### ![Figma Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_light.svg#gh-light-mode-only) ![Figma Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_dark.svg#gh-dark-mode-only) [Figma]() +UIKit ist das Basispaket des [Gravity UI](https://gravity-ui.com) Designsystems – ein praxiserprobter Satz von über 70 React-Komponenten, die für produktive Webanwendungen entwickelt wurden. Es kümmert sich um die schwierigen Aspekte: Theming, Barrierefreiheit, RTL-Layout, serverseitiges Rendering und Internationalisierung, damit Sie sich auf die Entwicklung Ihres Produkts konzentrieren können. -### ![Themer Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_light.svg#gh-light-mode-only) ![Themer Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_dark.svg#gh-dark-mode-only) [Themer](https://gravity-ui.com/themer) +Hauptmerkmale: -### ![Storybook Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_light.svg#gh-light-mode-only) ![Storybook Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_dark.svg#gh-dark-mode-only) [Storybook](https://preview.gravity-ui.com/uikit/) +- **Über 70 Komponenten** – Eingabefelder, Overlays, Datenanzeige, Layout-Primitive, Feedback und mehr +- **Integriertes Theming** – Varianten für helle, dunkle und kontrastreiche Modi mit einem Live-Tool [Themer](https://gravity-ui.com/themer) zur Anpassung von Tokens +- **RTL-Unterstützung** – Vollständige Rechts-nach-links-Layoutrichtung -### ![Community Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_light.svg#gh-light-mode-only) ![Community Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_dark.svg#gh-dark-mode-only) [Community](https://t.me/gravity_ui) +Durchsuchen Sie den vollständigen Komponenten-Katalog in [Storybook](https://preview.gravity-ui.com/uikit/) oder der [Dokumentation](https://gravity-ui.com/components/uikit/alert). - +## Erste Schritte + +### Voraussetzungen + +React 16.14, 17, 18 oder 19 muss in Ihrem Projekt installiert sein. -## Installation +### Installation ```shell -npm install --save-dev @gravity-ui/uikit +npm install @gravity-ui/uikit ``` ## Verwendung +Importieren Sie Komponenten direkt aus dem Paket: + ```jsx import {Button} from '@gravity-ui/uikit'; -const SubmitButton = +); ``` -### Styles +### Stile -UIKit wird mit Basis-Styling und einem Theme geliefert. Damit alles gut aussieht, fügen Sie dies am Anfang Ihrer Einstiegsdatei hinzu: +Fügen Sie die Basisstile und Schriftarten einmal am Anfang Ihres App-Einstiegspunkts ein: ```js // index.js - import '@gravity-ui/uikit/styles/fonts.css'; import '@gravity-ui/uikit/styles/styles.css'; - -// ... ``` -UIKit unterstützt verschiedene Themes: hell, dunkel und deren kontrastreiche Varianten. Ihre App muss innerhalb von `ThemeProvider` gerendert werden: +Eine SCSS-Datei mit nützlichen [Mixins](styles/mixins.scss) ist ebenfalls für die Verwendung in Ihren eigenen Stylesheets verfügbar. -```js -import {createRoot} from 'react-dom/client'; -import {ThemeProvider} from '@gravity-ui/uikit'; - -const root = createRoot(document.getElementById('root')); -root.render( - - - , -); -``` +### Anleitungen -Es ist möglich, beim SSR anfängliche Root-CSS-Klassen zu generieren, um Theme-Flackern zu vermeiden: +Lesen Sie mehr: -```js -import {getRootClassName} from '@gravity-ui/uikit/server'; - -const theme = 'dark'; -const rootClassName = getRootClassName({theme}); - -const html = ` - - -
- - -`; -``` - -Außerdem gibt es eine SCSS-Datei mit [Mixins](styles/mixins.scss) mit nützlichen Helfern für Ihre App. - -### I18N - -Einige Komponenten enthalten Text-Tokens (Wörter und Phrasen). Diese sind in zwei Sprachen verfügbar: `en` (Standard) und `ru`. -Um die Sprache festzulegen, verwenden Sie die Funktion `configure`: - -```js -// index.js - -import {configure} from '@gravity-ui/uikit'; - -configure({ - lang: 'ru', -}); -``` +- [Theming](docs/theming.md) – Aktivieren Sie helle, dunkle und kontrastreiche Themes +- [Serverseitiges Rendering](docs/server-side-rendering.md) – Generieren Sie die Root-CSS-Klasse auf dem Server +- [Internationalisierung](docs/i18n.md) – Legen Sie die Sprache der integrierten Komponenten fest ## Entwicklung -Um den Entwicklungsserver mit Storybook zu starten, führen Sie Folgendes aus: - ```shell git clone git@github.com:gravity-ui/uikit.git cd uikit npm ci -npm run start +npm run start # startet Storybook unter http://localhost:7007 ``` +Weitere nützliche Befehle: + +```shell +npm test # Führt Unit-Tests aus +npm run lint # Lintet JS, SCSS und Markdown +npm run typecheck # TypeScript-Typenprüfung +npm run playwright # Führt visuelle Regressionstests aus +``` + +## Maintainer + +
+ + + + + +
+ + amje
+ @amje + + 		+ + ValeraS
+ @ValeraS + + 		+ + korvin89
+ @korvin89 + +
+ +## Mitwirkung + +Beiträge sind willkommen! Bitte lies [CONTRIBUTING.md](CONTRIBUTING.md), bevor du einen Pull-Request einreichst. Detaillierte PR-Richtlinien findest du unter [contribute/pull-request.md](contribute/pull-request.md). + +Wir haben [![contributors](https://img.shields.io/github/contributors/gravity-ui/uikit?label=contributors)](https://github.com/gravity-ui/uikit/graphs/contributors) Mitwirkende und es werden immer mehr – mach mit! + +Tritt der Community auf [Telegram](https://t.me/gravity_ui) für Fragen und Diskussionen bei. + ## Lizenz -Verteilt unter der MIT-Lizenz. Details finden Sie in [LICENSE](LICENSE). +Verteilt unter der MIT-Lizenz. Details findest du in [LICENSE](LICENSE). ## Für KI-Agenten -Die Basis-React-Komponenten und die Design-Token-Bibliothek für Gravity UI-Apps – Steuerelemente, Eingaben, Overlays, Layout und Theming, auf denen jedes andere @gravity-ui-Paket aufbaut. +Die Basis-React-Komponente und die Design-Token-Bibliothek für Gravity UI-Anwendungen – Steuerelemente, Eingaben, Overlays, Layout und Theming, auf denen jedes andere @gravity-ui-Paket aufbaut. -### Wann zu verwenden +### Wann verwenden -- Standard-UI für Anwendungen: Schaltflächen, Formularsteuerelemente, Modale und Popups, Menüs, Tabs, Labels, Typografie und Layout-Primitive. -- Die Theming-Grundlage einer Gravity UI-App: `ThemeProvider`, Design-Tokens und CSS-Variablen, die der Rest des `@gravity-ui/*`-Ökosystems erwartet. +- Standardmäßige Anwendungs-UI: Buttons, Formularsteuerelemente, Modals und Popups, Menüs, Tabs, Labels, Typografie und Layout-Primitive. +- Die Theming-Grundlage einer Gravity UI-Anwendung: `ThemeProvider`, Design-Tokens und CSS-Variablen, die der Rest des `@gravity-ui/*`-Ökosystems erwartet. - Einfache tabellarische Daten über die integrierte `Table`-Komponente (Auswahl, Sortierung, Zeilenaktionen). -### Wann nicht zu verwenden +### Wann nicht verwenden -- Umfangreiche Daten-Tabellen (Virtualisierung, Spaltenanpassung, Gruppierung, Neuanordnung) – verwenden Sie [`@gravity-ui/table`](https://github.com/gravity-ui/table), ein separates Headless-Paket. Es ist **nicht** dasselbe wie die `Table`-Komponente von uikit. -- Diagramme und Datenvisualisierung – verwenden Sie [`@gravity-ui/charts`](https://github.com/gravity-ui/charts) (`@gravity-ui/chartkit` ist der Legacy-Wrapper). -- Anwendungsnavigations-Shells (Seitenleiste, Header, Footer, Logo) – verwenden Sie [`@gravity-ui/navigation`](https://github.com/gravity-ui/navigation). -- Datumsauswahl, Kalender und Bereichssteuerelemente – verwenden Sie [`@gravity-ui/date-components`](https://github.com/gravity-ui/date-components). -- Der SVG-Icon-Satz selbst – verwenden Sie [`@gravity-ui/icons`](https://github.com/gravity-ui/icons); uikit liefert nur den `Icon`-Renderer. +- Funktionsreiche Datenraster (Virtualisierung, Spaltenanpassung, Gruppierung, Neuanordnung) – verwende [`@gravity-ui/table`](https://github.com/gravity-ui/table), ein separates Headless-Paket. Es ist **nicht** dasselbe wie die `Table`-Komponente von uikit. +- Diagramme und Datenvisualisierung – verwende [`@gravity-ui/charts`](https://github.com/gravity-ui/charts) (`@gravity-ui/chartkit` ist der Legacy-Wrapper). +- Anwendungsnavigationsschalen (Seitenleiste, Kopfzeile, Fußzeile, Logo) – verwende [`@gravity-ui/navigation`](https://github.com/gravity-ui/navigation). +- Datumsauswahlen, Kalender und Bereichssteuerelemente – verwende [`@gravity-ui/date-components`](https://github.com/gravity-ui/date-components). +- Der SVG-Icon-Satz selbst – verwende [`@gravity-ui/icons`](https://github.com/gravity-ui/icons); uikit liefert nur den `Icon`-Renderer. ### Häufige Fallstricke -- Der Styling-Prop für `Button` ist `view`, nicht `variant` oder `color`. -- **Komponenten werden ohne Einrichtung ungestylt gerendert.** Umschließen Sie die App mit `ThemeProvider` **und** importieren Sie `@gravity-ui/uikit/styles/styles.css` (plus `fonts.css`) einmal am Einstiegspunkt – beides ist erforderlich. -- **`Icon` hat keinen `name`-Prop.** Übergeben Sie eine importierte Icon-Komponente über `data`: `import {Gear} from '@gravity-ui/icons'; `. +- Der `Button`-Styling-Prop ist `view`, nicht `variant` oder `color`. +- **Komponenten werden ohne Einrichtung ungestylt gerendert.** Wickle die App in `ThemeProvider` **und** importiere `@gravity-ui/uikit/styles/styles.css` (plus `fonts.css`) einmal am Einstiegspunkt – beides ist erforderlich. +- **`Icon` hat keinen `name`-Prop.** Übergib eine importierte Icon-Komponente über `data`: `import {Gear} from '@gravity-ui/icons'; `. - **`theme`-Werte sind `light | dark | light-hc | dark-hc`.** Es gibt kein `theme="default"`. ### Nützliche Dokumentation - [Layout-Komponenten und Abstände](./docs/layout.md) - [Theming, Farben & Branding](./docs/theming.md) -- [Typografie](./docs/typography.md) \ No newline at end of file +- [Typografie](./docs/typography.md) + +## Dokumentation für KI-Agenten + +Agentenlesbare Dokumentation für die installierte Version befindet sich in `node_modules/@gravity-ui/uikit/build/docs/INDEX.md`. + +## Star-Historie + +
+ + + + Star History Chart + +
+ +--- + +Wenn du UIKit nützlich findest, gib ihm bitte einen ⭐ auf [GitHub](https://github.com/gravity-ui/uikit) – das hilft anderen, das Projekt zu entdecken. \ No newline at end of file diff --git a/src/content/local-docs/libs/uikit/README-es.md b/src/content/local-docs/libs/uikit/README-es.md index 5387da69e037..aae335bc439a 100644 --- a/src/content/local-docs/libs/uikit/README-es.md +++ b/src/content/local-docs/libs/uikit/README-es.md @@ -1,130 +1,143 @@ -# UIKit · [![npm package](https://img.shields.io/npm/v/@gravity-ui/uikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/uikit) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/ci.yml?query=branch:main) [![storybook tests](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/test-storybook.yml?label=Storybook%20Tests&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/test-storybook.yml) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685?logo=storybook)](https://preview.gravity-ui.com/uikit/) +# UIKit · [![npm package](https://img.shields.io/npm/v/@gravity-ui/uikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/uikit) [![npm downloads](https://img.shields.io/npm/dm/@gravity-ui/uikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/uikit) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/ci.yml?query=branch:main) [![storybook tests](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/test-storybook.yml?label=Storybook%20Tests&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/test-storybook.yml) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685?logo=storybook)](https://preview.gravity-ui.com/uikit/) -Un conjunto de componentes React flexibles, muy prácticos y eficientes para crear aplicaciones web enriquecidas. +[English](README.md) | [Русский](README-ru.md) + +Un conjunto de componentes React flexibles, muy prácticos y eficientes para crear aplicaciones web enriquecidas. Parte del sistema de diseño [Gravity UI](https://gravity-ui.com). ![Imagen de portada](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/uikit_cover.png) -## Recursos +### ![Logo Globo Claro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_light.svg#gh-light-mode-only) ![Logo Globo Oscuro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_dark.svg#gh-dark-mode-only) [Sitio web](https://gravity-ui.com)    ![Logo Documentación Claro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_light.svg#gh-light-mode-only) ![Logo Documentación Oscuro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_dark.svg#gh-dark-mode-only) [Documentación](https://gravity-ui.com/components/uikit/alert)    ![Logo Figma Claro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_light.svg#gh-light-mode-only) ![Logo Figma Oscuro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_dark.svg#gh-dark-mode-only) [Figma]()    ![Logo Themer Claro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_light.svg#gh-light-mode-only) ![Logo Themer Oscuro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_dark.svg#gh-dark-mode-only) [Themer](https://gravity-ui.com/themer)    ![Logo Storybook Claro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_light.svg#gh-light-mode-only) ![Logo Storybook Oscuro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_dark.svg#gh-dark-mode-only) [Storybook](https://preview.gravity-ui.com/uikit/)    ![Logo Comunidad Claro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_light.svg#gh-light-mode-only) ![Logo Comunidad Oscuro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_dark.svg#gh-dark-mode-only) [Comunidad](https://t.me/gravity_ui) -### ![Logo del Globo Claro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_light.svg#gh-light-mode-only) ![Logo del Globo Oscuro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_dark.svg#gh-dark-mode-only) [Sitio web](https://gravity-ui.com) + -### ![Logo de Documentación Claro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_light.svg#gh-light-mode-only) ![Logo de Documentación Oscuro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_dark.svg#gh-dark-mode-only) [Documentación](https://gravity-ui.com/components/uikit/alert) +## Acerca de -### ![Logo de Figma Claro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_light.svg#gh-light-mode-only) ![Logo de Figma Oscuro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_dark.svg#gh-dark-mode-only) [Figma]() +UIKit es el paquete fundamental del sistema de diseño [Gravity UI](https://gravity-ui.com), un conjunto probado en batalla de más de 70 componentes React creados para aplicaciones web de producción. Se encarga de las partes difíciles: temas, accesibilidad, diseño RTL, renderizado del lado del servidor e internacionalización, para que puedas concentrarte en construir tu producto. -### ![Logo del Themer Claro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_light.svg#gh-light-mode-only) ![Logo del Themer Oscuro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_dark.svg#gh-dark-mode-only) [Themer](https://gravity-ui.com/themer) +Características clave: -### ![Logo de Storybook Claro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_light.svg#gh-light-mode-only) ![Logo de Storybook Oscuro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_dark.svg#gh-dark-mode-only) [Storybook](https://preview.gravity-ui.com/uikit/) +- **Más de 70 componentes** — entradas, superposiciones, visualización de datos, primitivas de diseño, retroalimentación y más +- **Tematización integrada** — variantes claras, oscuras y de alto contraste con una herramienta [Themer](https://gravity-ui.com/themer) en vivo para personalizar tokens +- **Soporte RTL** — dirección de diseño completa de derecha a izquierda -### ![Logo de Comunidad Claro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_light.svg#gh-light-mode-only) ![Logo de Comunidad Oscuro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_dark.svg#gh-dark-mode-only) [Comunidad](https://t.me/gravity_ui) +Explora el catálogo completo de componentes en [Storybook](https://preview.gravity-ui.com/uikit/) o en la [documentación](https://gravity-ui.com/components/uikit/alert). - +## Primeros pasos + +### Requisitos previos + +React 16.14, 17, 18 o 19 debe estar instalado en tu proyecto. -## Instalación +### Instalación ```shell -npm install --save-dev @gravity-ui/uikit +npm install @gravity-ui/uikit ``` ## Uso +Importa componentes directamente desde el paquete: + ```jsx import {Button} from '@gravity-ui/uikit'; -const SubmitButton = +); ``` ### Estilos -UIKit viene con estilos base y un tema. Para que todo se vea bien, incluye esto al principio de tu archivo de entrada: +Incluye los estilos base y las fuentes una vez en la parte superior del punto de entrada de tu aplicación: ```js // index.js - import '@gravity-ui/uikit/styles/fonts.css'; import '@gravity-ui/uikit/styles/styles.css'; - -// ... ``` -UIKit soporta diferentes temas: claro, oscuro y sus variantes de contraste. Tu aplicación debe renderizarse dentro de `ThemeProvider`: +También hay disponible un archivo SCSS con [mixins](styles/mixins.scss) con utilidades útiles para usar en tus propias hojas de estilo. -```js -import {createRoot} from 'react-dom/client'; -import {ThemeProvider} from '@gravity-ui/uikit'; - -const root = createRoot(document.getElementById('root')); -root.render( - - - , -); -``` +### Guías -Es posible generar las clases CSS raíz iniciales durante el SSR para evitar el parpadeo del tema: +Lee más: -```js -import {getRootClassName} from '@gravity-ui/uikit/server'; - -const theme = 'dark'; -const rootClassName = getRootClassName({theme}); - -const html = ` - - -
- - -`; -``` - -Además, hay un archivo SCSS con [mixins](styles/mixins.scss) con utilidades útiles para usar en tu aplicación. - -### Internacionalización (I18N) - -Algunos componentes contienen tokens de texto (palabras y frases). Vienen en dos idiomas: `en` (por defecto) y `ru`. -Para establecer el idioma, usa la función `configure`: - -```js -// index.js - -import {configure} from '@gravity-ui/uikit'; - -configure({ - lang: 'ru', -}); -``` +- [Tematización](docs/theming.md) — habilita temas claros, oscuros y de alto contraste +- [Renderizado del lado del servidor](docs/server-side-rendering.md) — genera la clase CSS raíz en el servidor +- [Internacionalización](docs/i18n.md) — establece el idioma de los componentes integrados ## Desarrollo -Para iniciar el servidor de desarrollo con storybook, ejecuta lo siguiente: - ```shell git clone git@github.com:gravity-ui/uikit.git cd uikit npm ci -npm run start +npm run start # inicia Storybook en http://localhost:7007 ``` +Otros comandos útiles: + +```shell +npm test # ejecuta pruebas unitarias +npm run lint # lint JS, SCSS y Markdown +npm run typecheck # verificación de tipos de TypeScript +npm run playwright # ejecuta pruebas de regresión visual +``` + +## Mantenedores + + + + + + + +
+ + amje
+ @amje + + 		+ + ValeraS
+ @ValeraS + + 		+ + korvin89
+ @korvin89 + +
+ +## Contribuciones + +¡Tus contribuciones son bienvenidas! Por favor, lee [CONTRIBUTING.md](CONTRIBUTING.md) antes de enviar una pull request. Para ver las directrices detalladas de las PR, consulta [contribute/pull-request.md](contribute/pull-request.md). + +Tenemos [![contributors](https://img.shields.io/github/contributors/gravity-ui/uikit?label=contributors)](https://github.com/gravity-ui/uikit/graphs/contributors) colaboradores y seguimos sumando. ¡Únete a nosotros! + +Únete a la comunidad en [Telegram](https://t.me/gravity_ui) para preguntas y discusiones. + ## Licencia Distribuido bajo la Licencia MIT. Consulta [LICENSE](LICENSE) para más detalles. ## Para agentes de IA -La biblioteca base de componentes React y tokens de diseño para aplicaciones Gravity UI — controles, entradas, superposiciones, diseño y temas en los que se basa cada otro paquete de @gravity-ui. +La biblioteca base de componentes React y tokens de diseño para aplicaciones Gravity UI — controles, entradas, superposiciones, diseño y temas en los que se basa cada otro paquete de `@gravity-ui/*`. ### Cuándo usar -- UI estándar de aplicaciones: botones, controles de formulario, modales y ventanas emergentes, menús, pestañas, etiquetas, tipografía y primitivas de diseño. +- Interfaz de usuario estándar de aplicaciones: botones, controles de formulario, modales y popups, menús, pestañas, etiquetas, tipografía y primitivas de diseño. - La base de temas de una aplicación Gravity UI: `ThemeProvider`, tokens de diseño y variables CSS que el resto del ecosistema `@gravity-ui/*` espera que estén presentes. - Datos tabulares sencillos a través del componente `Table` integrado (selección, ordenación, acciones de fila). ### Cuándo no usar -- Rejillas de datos con muchas funciones (virtualización, redimensionamiento de columnas, agrupación, reordenación): utiliza [`@gravity-ui/table`](https://github.com/gravity-ui/table), un paquete headless independiente. **No** es lo mismo que el componente `Table` de uikit. +- Cuadrículas de datos con muchas funcionalidades (virtualización, redimensionamiento de columnas, agrupación, reordenación): utiliza [`@gravity-ui/table`](https://github.com/gravity-ui/table), un paquete separado sin cabeza. **No** es lo mismo que el componente `Table` de uikit. - Gráficos y visualización de datos: utiliza [`@gravity-ui/charts`](https://github.com/gravity-ui/charts) (`@gravity-ui/chartkit` es el wrapper heredado). - Estructuras de navegación de aplicaciones (barra lateral, encabezado, pie de página, logo): utiliza [`@gravity-ui/navigation`](https://github.com/gravity-ui/navigation). - Selectores de fecha, calendarios y controles de rango: utiliza [`@gravity-ui/date-components`](https://github.com/gravity-ui/date-components). @@ -132,13 +145,31 @@ La biblioteca base de componentes React y tokens de diseño para aplicaciones Gr ### Errores comunes -- La prop de estilo de `Button` es `view`, no `variant` ni `color`. +- La prop de estilo de `Button` es `view`, no `variant` o `color`. - **Los componentes se renderizan sin estilo sin configuración.** Envuelve la aplicación en `ThemeProvider` **e** importa `@gravity-ui/uikit/styles/styles.css` (además de `fonts.css`) una vez en el punto de entrada; ambos son necesarios. -- **`Icon` no tiene la prop `name`.** Pasa un componente de icono importado a través de `data`: `import {Gear} from '@gravity-ui/icons'; `. +- **`Icon` no tiene prop `name`.** Pasa un componente de icono importado a través de `data`: `import {Gear} from '@gravity-ui/icons'; `. - Los valores de `theme` son `light | dark | light-hc | dark-hc`. No existe `theme="default"`. ### Documentación útil - [Componentes de diseño y espaciado](./docs/layout.md) -- [Temas, Colores y Marca](./docs/theming.md) -- [Tipografía](./docs/typography.md) \ No newline at end of file +- [Temas, Colores y Branding](./docs/theming.md) +- [Tipografía](./docs/typography.md) + +## Documentación para agentes de IA + +La documentación legible por agentes para la versión instalada se encuentra en `node_modules/@gravity-ui/uikit/build/docs/INDEX.md`. + +## Historial de Estrellas + +
+ + + + Gráfico de Historial de Estrellas + +
+ +--- + +Si encuentras útil UIKit, considera darle una ⭐ en [GitHub](https://github.com/gravity-ui/uikit) — ayuda a otros a descubrir el proyecto. \ No newline at end of file diff --git a/src/content/local-docs/libs/uikit/README-fr.md b/src/content/local-docs/libs/uikit/README-fr.md index 5b669f74c795..92a99686882e 100644 --- a/src/content/local-docs/libs/uikit/README-fr.md +++ b/src/content/local-docs/libs/uikit/README-fr.md @@ -1,130 +1,143 @@ -# UIKit · [![npm package](https://img.shields.io/npm/v/@gravity-ui/uikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/uikit) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/ci.yml?query=branch:main) [![storybook tests](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/test-storybook.yml?label=Storybook%20Tests&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/test-storybook.yml) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685?logo=storybook)](https://preview.gravity-ui.com/uikit/) +# UIKit · [![npm package](https://img.shields.io/npm/v/@gravity-ui/uikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/uikit) [![npm downloads](https://img.shields.io/npm/dm/@gravity-ui/uikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/uikit) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/ci.yml?query=branch:main) [![storybook tests](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/test-storybook.yml?label=Storybook%20Tests&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/test-storybook.yml) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685?logo=storybook)](https://preview.gravity-ui.com/uikit/) -Un ensemble de composants React flexibles, très pratiques et efficaces pour créer des applications web riches. +[English](README.md) | [Русский](README-ru.md) + +Un ensemble de composants React flexibles, très pratiques et performants pour créer des applications web riches. Fait partie du système de design [Gravity UI](https://gravity-ui.com). -![Image de couverture](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/uikit_cover.png) +![Cover image](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/uikit_cover.png) -## Ressources +### ![Globe Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_light.svg#gh-light-mode-only) ![Globe Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_dark.svg#gh-dark-mode-only) [Site web](https://gravity-ui.com)    ![Documentation Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_light.svg#gh-light-mode-only) ![Documentation Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_dark.svg#gh-dark-mode-only) [Documentation](https://gravity-ui.com/components/uikit/alert)    ![Figma Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_light.svg#gh-light-mode-only) ![Figma Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_dark.svg#gh-dark-mode-only) [Figma]()    ![Themer Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_light.svg#gh-light-mode-only) ![Themer Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_dark.svg#gh-dark-mode-only) [Themer](https://gravity-ui.com/themer)    ![Storybook Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_light.svg#gh-light-mode-only) ![Storybook Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_dark.svg#gh-dark-mode-only) [Storybook](https://preview.gravity-ui.com/uikit/)    ![Community Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_light.svg#gh-light-mode-only) ![Community Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_dark.svg#gh-dark-mode-only) [Communauté](https://t.me/gravity_ui) -### ![Logo Globe Clair](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_light.svg#gh-light-mode-only) ![Logo Globe Sombre](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_dark.svg#gh-dark-mode-only) [Site Web](https://gravity-ui.com) + -### ![Logo Documentation Clair](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_light.svg#gh-light-mode-only) ![Logo Documentation Sombre](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_dark.svg#gh-dark-mode-only) [Documentation](https://gravity-ui.com/components/uikit/alert) +## À propos -### ![Logo Figma Clair](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_light.svg#gh-light-mode-only) ![Logo Figma Sombre](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_dark.svg#gh-dark-mode-only) [Figma]() +UIKit est le package fondamental du système de design [Gravity UI](https://gravity-ui.com) — un ensemble éprouvé de plus de 70 composants React conçus pour les applications web en production. Il gère les aspects complexes : thèmes, accessibilité, disposition RTL, rendu côté serveur et internationalisation, vous permettant ainsi de vous concentrer sur la création de votre produit. -### ![Logo Themer Clair](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_light.svg#gh-light-mode-only) ![Logo Themer Sombre](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_dark.svg#gh-dark-mode-only) [Themer](https://gravity-ui.com/themer) +Caractéristiques principales : -### ![Logo Storybook Clair](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_light.svg#gh-light-mode-only) ![Logo Storybook Sombre](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_dark.svg#gh-dark-mode-only) [Storybook](https://preview.gravity-ui.com/uikit/) +- **Plus de 70 composants** — champs de saisie, fenêtres modales, affichage de données, primitives de mise en page, retours d'information, et plus encore. +- **Thèmes intégrés** — variantes claires, sombres et à fort contraste avec un outil [Themer](https://gravity-ui.com/themer) interactif pour personnaliser les jetons. +- **Support RTL** — direction de mise en page complète de droite à gauche. -### ![Logo Communauté Clair](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_light.svg#gh-light-mode-only) ![Logo Communauté Sombre](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_dark.svg#gh-dark-mode-only) [Communauté](https://t.me/gravity_ui) +Parcourez le catalogue complet des composants dans [Storybook](https://preview.gravity-ui.com/uikit/) ou la [documentation](https://gravity-ui.com/components/uikit/alert). - +## Premiers pas + +### Prérequis + +React 16.14, 17, 18 ou 19 doit être installé dans votre projet. -## Installation +### Installation ```shell -npm install --save-dev @gravity-ui/uikit +npm install @gravity-ui/uikit ``` ## Utilisation +Importez les composants directement depuis le package : + ```jsx import {Button} from '@gravity-ui/uikit'; -const SubmitButton = +); ``` ### Styles -UIKit est livré avec des styles de base et un thème. Pour que tout soit joli, incluez ceci en haut de votre fichier d'entrée : +Incluez les styles de base et les polices une seule fois en haut du point d'entrée de votre application : ```js // index.js - import '@gravity-ui/uikit/styles/fonts.css'; import '@gravity-ui/uikit/styles/styles.css'; - -// ... -``` - -UIKit prend en charge différents thèmes : clair, sombre et leurs variantes contrastées. Votre application doit être rendue à l'intérieur de `ThemeProvider` : - -```js -import {createRoot} from 'react-dom/client'; -import {ThemeProvider} from '@gravity-ui/uikit'; - -const root = createRoot(document.getElementById('root')); -root.render( - - - , -); -``` - -Il est possible de générer des classes CSS racine initiales lors du SSR pour éviter le scintillement du thème : - -```js -import {getRootClassName} from '@gravity-ui/uikit/server'; - -const theme = 'dark'; -const rootClassName = getRootClassName({theme}); - -const html = ` - - -
- - -`; ``` -Il existe également un fichier SCSS de [mixins](styles/mixins.scss) avec des helpers utiles à utiliser dans votre application. +Un fichier SCSS avec des [mixins](styles/mixins.scss) utiles est également disponible pour être utilisé dans vos propres feuilles de style. -### I18N +### Guides -Certains composants contiennent des jetons textuels (mots et phrases). Ils sont disponibles en deux langues : `en` (par défaut) et `ru`. -Pour définir la langue, utilisez la fonction `configure` : +Pour en savoir plus : -```js -// index.js - -import {configure} from '@gravity-ui/uikit'; - -configure({ - lang: 'ru', -}); -``` +- [Thèmes](docs/theming.md) — activez les thèmes clair, sombre et à fort contraste. +- [Rendu côté serveur](docs/server-side-rendering.md) — générez la classe CSS racine côté serveur. +- [Internationalisation](docs/i18n.md) — définissez la langue des composants intégrés. ## Développement -Pour démarrer le serveur de développement avec storybook, exécutez la commande suivante : - ```shell git clone git@github.com:gravity-ui/uikit.git cd uikit npm ci -npm run start +npm run start # lance Storybook à l'adresse http://localhost:7007 +``` + +Autres commandes utiles : + +```shell +npm test # exécute les tests unitaires +npm run lint # vérifie la qualité du code JS, SCSS et Markdown +npm run typecheck # vérifie les types TypeScript +npm run playwright # exécute les tests de régression visuelle ``` +## Mainteneurs + + + + + + + +
+ + amje
+ @amje + + 		+ + ValeraS
+ @ValeraS + + 		+ + korvin89
+ @korvin89 + +
+ +## Contribution + +Les contributions sont les bienvenues ! Veuillez lire [CONTRIBUTING.md](CONTRIBUTING.md) avant de soumettre une pull request. Pour des directives détaillées sur les PR, consultez [contribute/pull-request.md](contribute/pull-request.md). + +Nous avons [![contributors](https://img.shields.io/github/contributors/gravity-ui/uikit?label=contributors)](https://github.com/gravity-ui/uikit/graphs/contributors) contributeurs et ce nombre ne cesse de croître — rejoignez-nous ! + +Rejoignez la communauté sur [Telegram](https://t.me/gravity_ui) pour vos questions et discussions. + ## Licence Distribué sous la licence MIT. Voir [LICENSE](LICENSE) pour les détails. ## Pour les agents IA -La bibliothèque de composants React de base et de jetons de conception pour les applications Gravity UI — contrôles, entrées, superpositions, mise en page et thèmes sur lesquels tous les autres packages @gravity-ui s'appuient. +La bibliothèque de base de composants React et de tokens de design pour les applications Gravity UI — contrôles, entrées, superpositions, mise en page et thèmes sur lesquels tous les autres packages `@gravity-ui/*` s'appuient. ### Quand l'utiliser -- Interface utilisateur d'application standard : boutons, contrôles de formulaire, modales et popups, menus, onglets, étiquettes, typographie et primitives de mise en page. -- La base thématique d'une application Gravity UI : `ThemeProvider`, jetons de conception et variables CSS que le reste de l'écosystème `@gravity-ui/*` s'attend à trouver. +- Interface utilisateur standard des applications : boutons, contrôles de formulaire, modales et popups, menus, onglets, étiquettes, typographie et primitives de mise en page. +- La base thématique d'une application Gravity UI : `ThemeProvider`, tokens de design et variables CSS que le reste de l'écosystème `@gravity-ui/*` s'attend à trouver. - Données tabulaires simples via le composant `Table` intégré (sélection, tri, actions sur les lignes). ### Quand ne pas l'utiliser -- Grilles de données riches en fonctionnalités (virtualisation, redimensionnement de colonnes, regroupement, réorganisation) — utilisez [`@gravity-ui/table`](https://github.com/gravity-ui/table), un package headless séparé. Ce n'est **pas** le même que le composant `Table` de uikit. +- Grilles de données riches en fonctionnalités (virtualisation, redimensionnement des colonnes, regroupement, réorganisation) — utilisez [`@gravity-ui/table`](https://github.com/gravity-ui/table), un package headless séparé. Ce n'est **pas** la même chose que le composant `Table` de uikit. - Graphiques et visualisation de données — utilisez [`@gravity-ui/charts`](https://github.com/gravity-ui/charts) (`@gravity-ui/chartkit` est l'ancien wrapper). - Coques de navigation d'application (en-tête latéral, pied de page, logo) — utilisez [`@gravity-ui/navigation`](https://github.com/gravity-ui/navigation). - Sélecteurs de date, calendriers et contrôles de plage — utilisez [`@gravity-ui/date-components`](https://github.com/gravity-ui/date-components). @@ -133,8 +146,30 @@ La bibliothèque de composants React de base et de jetons de conception pour les ### Pièges courants - La prop de style de `Button` est `view`, pas `variant` ou `color`. -- **Les composants s'affichent sans style sans configuration.** Encapsulez l'application dans `ThemeProvider` **et** importez `@gravity-ui/uikit/styles/styles.css` (plus `fonts.css`) une seule fois au point d'entrée — les deux sont requis. +- **Les composants s'affichent sans style sans configuration.** Encapsulez l'application dans `ThemeProvider` **et** importez `@gravity-ui/uikit/styles/styles.css` (ainsi que `fonts.css`) une seule fois au point d'entrée — les deux sont requis. - **`Icon` n'a pas de prop `name`.** Passez un composant d'icône importé via `data` : `import {Gear} from '@gravity-ui/icons'; `. - Les valeurs de `theme` sont `light | dark | light-hc | dark-hc`. Il n'y a pas de `theme="default"`. -### Documentation utile \ No newline at end of file +### Documentation utile + +- [Composants de mise en page et espacements](./docs/layout.md) +- [Thèmes, couleurs et image de marque](./docs/theming.md) +- [Typographie](./docs/typography.md) + +## Documentation pour les agents IA + +La documentation lisible par agent pour la version installée se trouve dans `node_modules/@gravity-ui/uikit/build/docs/INDEX.md`. + +## Historique des étoiles + +
+ + + + Graphique d'historique des étoiles + +
+ +--- + +Si vous trouvez UIKit utile, veuillez envisager de lui donner un ⭐ sur [GitHub](https://github.com/gravity-ui/uikit) — cela aide les autres à découvrir le projet. \ No newline at end of file diff --git a/src/content/local-docs/libs/uikit/README-ja.md b/src/content/local-docs/libs/uikit/README-ja.md index d8fdfce617f5..dba673960636 100644 --- a/src/content/local-docs/libs/uikit/README-ja.md +++ b/src/content/local-docs/libs/uikit/README-ja.md @@ -1,144 +1,175 @@ -# UIKit · [![npm package](https://img.shields.io/npm/v/@gravity-ui/uikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/uikit) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/ci.yml?query=branch:main) [![storybook tests](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/test-storybook.yml?label=Storybook%20Tests&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/test-storybook.yml) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685?logo=storybook)](https://preview.gravity-ui.com/uikit/) +# UIKit · [![npm package](https://img.shields.io/npm/v/@gravity-ui/uikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/uikit) [![npm downloads](https://img.shields.io/npm/dm/@gravity-ui/uikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/uikit) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/ci.yml?query=branch:main) [![storybook tests](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/test-storybook.yml?label=Storybook%20Tests&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/test-storybook.yml) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685?logo=storybook)](https://preview.gravity-ui.com/uikit/) -リッチなWebアプリケーションを作成するための、柔軟で実用的、かつ効率的なReactコンポーネントセットです。 +[English](README.md) | [Русский](README-ru.md) + +リッチなWebアプリケーションを構築するための、柔軟で実用的、かつ効率的なReactコンポーネントセットです。[Gravity UI](https://gravity-ui.com)デザインシステムの一部です。 ![Cover image](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/uikit_cover.png) -## リソース +### ![Globe Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_light.svg#gh-light-mode-only) ![Globe Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_dark.svg#gh-dark-mode-only) [Website](https://gravity-ui.com)    ![Documentation Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_light.svg#gh-light-mode-only) ![Documentation Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_dark.svg#gh-dark-mode-only) [Documentation](https://gravity-ui.com/components/uikit/alert)    ![Figma Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_light.svg#gh-light-mode-only) ![Figma Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_dark.svg#gh-dark-mode-only) [Figma]()    ![Themer Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_light.svg#gh-light-mode-only) ![Themer Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_dark.svg#gh-dark-mode-only) [Themer](https://gravity-ui.com/themer)    ![Storybook Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_light.svg#gh-light-mode-only) ![Storybook Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_dark.svg#gh-dark-mode-only) [Storybook](https://preview.gravity-ui.com/uikit/)    ![Community Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_light.svg#gh-light-mode-only) ![Community Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_dark.svg#gh-dark-mode-only) [Community](https://t.me/gravity_ui) -### ![Globe Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_light.svg#gh-light-mode-only) ![Globe Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_dark.svg#gh-dark-mode-only) [ウェブサイト](https://gravity-ui.com) + -### ![Documentation Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_light.svg#gh-light-mode-only) ![Documentation Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_dark.svg#gh-dark-mode-only) [ドキュメント](https://gravity-ui.com/components/uikit/alert) +## About -### ![Figma Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_light.svg#gh-light-mode-only) ![Figma Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_dark.svg#gh-dark-mode-only) [Figma]() +UIKitは、[Gravity UI](https://gravity-ui.com)デザインシステムの基盤となるパッケージです。本番環境のWebアプリケーション向けに構築された、実証済みの70以上のReactコンポーネントセットです。テーマ設定、アクセシビリティ、RTLレイアウト、サーバーサイドレンダリング、国際化といった難しい部分を処理するため、あなたはプロダクト構築に集中できます。 -### ![Themer Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_light.svg#gh-light-mode-only) ![Themer Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_dark.svg#gh-dark-mode-only) [Themer](https://gravity-ui.com/themer) +主な特徴： -### ![Storybook Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_light.svg#gh-light-mode-only) ![Storybook Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_dark.svg#gh-dark-mode-only) [Storybook](https://preview.gravity-ui.com/uikit/) +- **70以上のコンポーネント** — 入力、オーバーレイ、データ表示、レイアウトプリミティブ、フィードバックなど +- **組み込みテーマ設定** — ライト、ダーク、ハイコントラストのバリアントがあり、トークンをカスタマイズするためのライブ[Themer](https://gravity-ui.com/themer)ツールも利用可能 +- **RTLサポート** — 完全な右から左へのレイアウト方向 -### ![Community Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_light.svg#gh-light-mode-only) ![Community Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_dark.svg#gh-dark-mode-only) [コミュニティ](https://t.me/gravity_ui) +コンポーネントカタログの全容は、[Storybook](https://preview.gravity-ui.com/uikit/)または[ドキュメント](https://gravity-ui.com/components/uikit/alert)でご覧ください。 - +## Getting Started + +### Prerequisites + +プロジェクトにReact 16.14、17、18、または19がインストールされている必要があります。 -## インストール +### Installation ```shell -npm install --save-dev @gravity-ui/uikit +npm install @gravity-ui/uikit ``` -## 使用方法 +## Usage + +パッケージから直接コンポーネントをインポートします： ```jsx import {Button} from '@gravity-ui/uikit'; -const SubmitButton = +); ``` -### スタイル +### Styles -UIKitにはベースのスタイリングとテーマが含まれています。すべてがうまく表示されるように、エントリファイルの先頭に以下を含めてください。 +ベーススタイルとフォントは、アプリのエントリーポイントの先頭に一度だけ含めてください： ```js // index.js - import '@gravity-ui/uikit/styles/fonts.css'; import '@gravity-ui/uikit/styles/styles.css'; - -// ... ``` -UIKitはさまざまなテーマ（ライト、ダーク、およびそれらのコントラストバリアント）をサポートしています。アプリは`ThemeProvider`内でレンダリングする必要があります。 +SCSSの[mixins](styles/mixins.scss)ファイルも、独自のスタイルシートで使用できる便利なヘルパーとして提供されています。 -```js -import {createRoot} from 'react-dom/client'; -import {ThemeProvider} from '@gravity-ui/uikit'; - -const root = createRoot(document.getElementById('root')); -root.render( - - - , -); -``` +### Guides -SSR中に初期のルートCSSクラスを生成して、テーマのフラッシュを回避することが可能です。 +さらに読む： -```js -import {getRootClassName} from '@gravity-ui/uikit/server'; - -const theme = 'dark'; -const rootClassName = getRootClassName({theme}); - -const html = ` - - -
- - -`; -``` +- [Theming](docs/theming.md) — ライト、ダーク、ハイコントラストテーマを有効にする +- [Server-side rendering](docs/server-side-rendering.md) — サーバーでルートCSSクラスを生成する +- [Internationalization](docs/i18n.md) — 組み込みコンポーネントの言語を設定する -また、アプリで使用できる便利なヘルパーを備えたSCSS [mixins](styles/mixins.scss) ファイルもあります。 - -### I18N - -一部のコンポーネントにはテキストトークン（単語やフレーズ）が含まれています。これらは`en`（デフォルト）と`ru`の2つの言語で提供されます。 -言語を設定するには、`configure`関数を使用します。 - -```js -// index.js - -import {configure} from '@gravity-ui/uikit'; - -configure({ - lang: 'ru', -}); -``` - -## 開発 - -Storybookで開発サーバーを起動するには、以下を実行してください。 +## Development ```shell git clone git@github.com:gravity-ui/uikit.git cd uikit npm ci -npm run start +npm run start # Storybookを http://localhost:7007 で起動します ``` +その他の便利なコマンド： + +```shell +npm test # 単体テストを実行します +npm run lint # JS、SCSS、Markdownをリントします +npm run typecheck # TypeScriptの型チェックを行います +npm run playwright # ビジュアルリグレッションテストを実行します +``` + +## Maintainers + + + + + + + +
+ + amje
+ @amje + + 		+ + ValeraS
+ @ValeraS + + 		+ + korvin89
+ @korvin89 + +
+ +## 貢献について + +貢献を歓迎します！プルリクエストを送信する前に、[CONTRIBUTING.md](CONTRIBUTING.md) をお読みください。詳細な PR ガイドラインについては、[contribute/pull-request.md](contribute/pull-request.md) を参照してください。 + +現在 [![contributors](https://img.shields.io/github/contributors/gravity-ui/uikit?label=contributors)](https://github.com/gravity-ui/uikit/graphs/contributors) 人のコントリビューターがいます — あなたも参加しませんか！ + +質問やディスカッションは、[Telegram](https://t.me/gravity_ui) コミュニティでどうぞ。 + ## ライセンス -MIT Licenseの下で配布されています。詳細については[LICENSE](LICENSE)を参照してください。 +MIT License に基づいて配布されています。詳細については [LICENSE](LICENSE) を参照してください。 -## AIエージェント向け +## AI エージェント向け -Gravity UIアプリのベースとなるReactコンポーネントおよびデザイントークンライブラリ — 他のすべての`@gravity-ui`パッケージが構築される、コントロール、入力、オーバーレイ、レイアウト、およびテーマ設定。 +Gravity UI アプリケーションのベースとなる React コンポーネントおよびデザイン トークン ライブラリ — 他のすべての @gravity-ui パッケージが構築される基盤となるコントロール、入力、オーバーレイ、レイアウト、およびテーマ設定を提供します。 -### 使用する場合 +### 使用するケース -- 標準的なアプリケーションUI：ボタン、フォームコントロール、モーダルとポップアップ、メニュー、タブ、ラベル、タイポグラフィ、およびレイアウトプリミティブ。 -- Gravity UIアプリのテーマ設定の基盤：`ThemeProvider`、デザイントークン、および他の`@gravity-ui/*`エコシステムが期待するCSS変数。 -- 内蔵の`Table`コンポーネント（選択、ソート、行アクション）によるシンプルな表形式データ。 +- 標準的なアプリケーション UI: ボタン、フォーム コントロール、モーダルとポップアップ、メニュー、タブ、ラベル、タイポグラフィ、レイアウトのプリミティブ。 +- Gravity UI アプリのテーマ設定の基盤: `ThemeProvider`、デザイン トークン、および `@gravity-ui/*` エコシステムの他の部分が期待する CSS 変数。 +- 組み込みの `Table` コンポーネントを使用したシンプルな表形式データ（選択、ソート、行アクション）。 -### 使用しない場合 +### 使用しないケース -- 機能豊富なデータグリッド（仮想化、列リサイズ、グループ化、並べ替え） — [`@gravity-ui/table`](https://github.com/gravity-ui/table) を使用してください。これは独立したヘッドレスパッケージです。uikit の `Table` コンポーネントとは**異なります**。 -- チャートとデータ可視化 — [`@gravity-ui/charts`](https://github.com/gravity-ui/charts) を使用してください（`@gravity-ui/chartkit` はレガシーラッパーです）。 -- アプリケーションナビゲーションシェル（サイドヘッダー、フッター、ロゴ） — [`@gravity-ui/navigation`](https://github.com/gravity-ui/navigation) を使用してください。 +- 機能豊富なデータ グリッド（仮想化、列リサイズ、グループ化、再配置） — ヘッドレスの独立したパッケージである [`@gravity-ui/table`](https://github.com/gravity-ui/table) を使用してください。これは uikit の `Table` コンポーネントとは**異なります**。 +- チャートとデータ可視化 — [`@gravity-ui/charts`](https://github.com/gravity-ui/charts) を使用してください（`@gravity-ui/chartkit` はレガシー ラッパーです）。 +- アプリケーション ナビゲーション シェル（ヘッダー、フッター、ロゴの横） — [`@gravity-ui/navigation`](https://github.com/gravity-ui/navigation) を使用してください。 - 日付ピッカー、カレンダー、範囲コントロール — [`@gravity-ui/date-components`](https://github.com/gravity-ui/date-components) を使用してください。 -- SVG アイコンセット自体 — [`@gravity-ui/icons`](https://github.com/gravity-ui/icons) を使用してください。uikit は `Icon` レンダラーのみを提供します。 +- SVG アイコン セット自体 — [`@gravity-ui/icons`](https://github.com/gravity-ui/icons) を使用してください。uikit は `Icon` レンダラーのみを提供します。 -### よくある間違い +### よくある落とし穴 -- `Button` のスタイリングプロパティは `view` であり、`variant` や `color` ではありません。 -- **コンポーネントはセットアップなしではスタイルなしでレンダリングされます。** アプリを `ThemeProvider` でラップし、エントリーポイントで `@gravity-ui/uikit/styles/styles.css`（および `fonts.css`）を一度インポートしてください。両方とも必要です。 -- **`Icon` には `name` プロパティがありません。** インポートしたアイコンコンポーネントを `data` を介して渡してください: `import {Gear} from '@gravity-ui/icons'; `。 +- `Button` のスタイリング プロパティは `view` であり、`variant` や `color` ではありません。 +- **コンポーネントはセットアップなしではスタイルが適用されずにレンダリングされます。** アプリを `ThemeProvider` でラップし、エントリ ポイントで `@gravity-ui/uikit/styles/styles.css`（および `fonts.css`）を一度インポートしてください — 両方が必要です。 +- **`Icon` には `name` プロップがありません。** インポートしたアイコン コンポーネントを `data` を介して渡してください: `import {Gear} from '@gravity-ui/icons'; `。 - **`theme` の値は `light | dark | light-hc | dark-hc` です。** `theme="default"` はありません。 ### 役立つドキュメント -- [レイアウトコンポーネントとスペーシング](./docs/layout.md) -- [テーマ設定、色とブランディング](./docs/theming.md) -- [タイポグラフィ](./docs/typography.md) \ No newline at end of file +- [レイアウト コンポーネントとスペーシング](./docs/layout.md) +- [テーマ設定、色 & ブランド](./docs/theming.md) +- [タイポグラフィ](./docs/typography.md) + +## AI エージェント向けドキュメント + +インストールされているバージョンのエージェント読み取り可能なドキュメントは、`node_modules/@gravity-ui/uikit/build/docs/INDEX.md` にあります。 + +## スター履歴 + +
+ + + + Star History Chart + +
+ +--- + +UIKit が役立つと感じた場合は、[GitHub](https://github.com/gravity-ui/uikit) で ⭐ を付けていただけると幸いです — プロジェクトの発見に役立ちます。 \ No newline at end of file diff --git a/src/content/local-docs/libs/uikit/README-ko.md b/src/content/local-docs/libs/uikit/README-ko.md index 39791275742f..46d8836f0ef8 100644 --- a/src/content/local-docs/libs/uikit/README-ko.md +++ b/src/content/local-docs/libs/uikit/README-ko.md @@ -1,144 +1,175 @@ -# UIKit · [![npm package](https://img.shields.io/npm/v/@gravity-ui/uikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/uikit) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/ci.yml?query=branch:main) [![storybook tests](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/test-storybook.yml?label=Storybook%20Tests&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/test-storybook.yml) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685?logo=storybook)](https://preview.gravity-ui.com/uikit/) +# UIKit · [![npm package](https://img.shields.io/npm/v/@gravity-ui/uikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/uikit) [![npm downloads](https://img.shields.io/npm/dm/@gravity-ui/uikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/uikit) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/ci.yml?query=branch:main) [![storybook tests](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/test-storybook.yml?label=Storybook%20Tests&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/test-storybook.yml) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685?logo=storybook)](https://preview.gravity-ui.com/uikit/) -풍부한 웹 애플리케이션을 만들기 위한 유연하고 실용적이며 효율적인 React 컴포넌트 모음입니다. +[English](README.md) | [Русский](README-ru.md) + +풍부한 웹 애플리케이션을 만들기 위한 유연하고 실용적이며 효율적인 React 컴포넌트 모음입니다. [Gravity UI](https://gravity-ui.com) 디자인 시스템의 일부입니다. ![Cover image](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/uikit_cover.png) -## 리소스 +### ![Globe Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_light.svg#gh-light-mode-only) ![Globe Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_dark.svg#gh-dark-mode-only) [웹사이트](https://gravity-ui.com)    ![Documentation Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_light.svg#gh-light-mode-only) ![Documentation Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_dark.svg#gh-dark-mode-only) [문서](https://gravity-ui.com/components/uikit/alert)    ![Figma Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_light.svg#gh-light-mode-only) ![Figma Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_dark.svg#gh-dark-mode-only) [Figma]()    ![Themer Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_light.svg#gh-light-mode-only) ![Themer Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_dark.svg#gh-dark-mode-only) [Themer](https://gravity-ui.com/themer)    ![Storybook Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_light.svg#gh-light-mode-only) ![Storybook Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_dark.svg#gh-dark-mode-only) [Storybook](https://preview.gravity-ui.com/uikit/)    ![Community Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_light.svg#gh-light-mode-only) ![Community Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_dark.svg#gh-dark-mode-only) [커뮤니티](https://t.me/gravity_ui) -### ![Globe Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_light.svg#gh-light-mode-only) ![Globe Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_dark.svg#gh-dark-mode-only) [웹사이트](https://gravity-ui.com) + -### ![Documentation Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_light.svg#gh-light-mode-only) ![Documentation Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_dark.svg#gh-dark-mode-only) [문서](https://gravity-ui.com/components/uikit/alert) +## 소개 -### ![Figma Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_light.svg#gh-light-mode-only) ![Figma Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_dark.svg#gh-dark-mode-only) [Figma]() +UIKit은 [Gravity UI](https://gravity-ui.com) 디자인 시스템의 기반이 되는 패키지입니다. 70개 이상의 React 컴포넌트로 구성되어 있으며, 실제 프로덕션 웹 애플리케이션에 적용 가능하도록 검증되었습니다. 테마, 접근성, RTL 레이아웃, 서버 사이드 렌더링, 국제화와 같이 복잡한 부분들을 처리해주므로, 여러분은 제품 개발에만 집중할 수 있습니다. -### ![Themer Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_light.svg#gh-light-mode-only) ![Themer Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_dark.svg#gh-dark-mode-only) [Themer](https://gravity-ui.com/themer) +주요 기능: -### ![Storybook Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_light.svg#gh-light-mode-only) ![Storybook Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_dark.svg#gh-dark-mode-only) [Storybook](https://preview.gravity-ui.com/uikit/) +- **70개 이상의 컴포넌트**: 입력, 오버레이, 데이터 표시, 레이아웃 기본 요소, 피드백 등 다양한 컴포넌트를 제공합니다. +- **내장 테마 기능**: 라이트, 다크, 고대비(high-contrast) 테마를 지원하며, [Themer](https://gravity-ui.com/themer) 도구를 통해 토큰을 실시간으로 사용자 정의할 수 있습니다. +- **RTL 지원**: 완벽한 오른쪽에서 왼쪽으로의 레이아웃 방향을 지원합니다. -### ![Community Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_light.svg#gh-light-mode-only) ![Community Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_dark.svg#gh-dark-mode-only) [커뮤니티](https://t.me/gravity_ui) +[Storybook](https://preview.gravity-ui.com/uikit/) 또는 [문서](https://gravity-ui.com/components/uikit/alert)에서 전체 컴포넌트 카탈로그를 살펴보세요. - +## 시작하기 + +### 사전 요구 사항 + +프로젝트에 React 16.14, 17, 18 또는 19가 설치되어 있어야 합니다. -## 설치 +### 설치 ```shell -npm install --save-dev @gravity-ui/uikit +npm install @gravity-ui/uikit ``` ## 사용법 +패키지에서 컴포넌트를 직접 가져와 사용하세요: + ```jsx import {Button} from '@gravity-ui/uikit'; -const SubmitButton = +); ``` ### 스타일 -UIKit은 기본 스타일과 테마를 제공합니다. 모든 것이 보기 좋게 보이도록 하려면 진입 파일 상단에 다음을 포함하세요. +앱 진입점 상단에 기본 스타일과 폰트를 한 번만 포함하세요: ```js // index.js - import '@gravity-ui/uikit/styles/fonts.css'; import '@gravity-ui/uikit/styles/styles.css'; - -// ... ``` -UIKit은 라이트, 다크 및 해당 대비 변형과 같은 다양한 테마를 지원합니다. 앱은 `ThemeProvider` 내에서 렌더링되어야 합니다. +유용한 헬퍼가 포함된 SCSS [믹스인](styles/mixins.scss) 파일도 자체 스타일시트에서 사용할 수 있습니다. -```js -import {createRoot} from 'react-dom/client'; -import {ThemeProvider} from '@gravity-ui/uikit'; - -const root = createRoot(document.getElementById('root')); -root.render( - - - , -); -``` +### 가이드 -SSR 중에 초기 루트 CSS 클래스를 생성하여 테마 깜박임을 방지할 수 있습니다. +더 읽어보기: -```js -import {getRootClassName} from '@gravity-ui/uikit/server'; - -const theme = 'dark'; -const rootClassName = getRootClassName({theme}); - -const html = ` - - -
- - -`; -``` - -또한 앱에서 유용한 도우미를 사용하는 SCSS [믹스인](styles/mixins.scss) 파일이 있습니다. - -### I18N - -일부 컴포넌트에는 텍스트 토큰(단어 및 구문)이 포함되어 있습니다. 이들은 `en`(기본값) 및 `ru` 두 가지 언어로 제공됩니다. -언어를 설정하려면 `configure` 함수를 사용하세요. - -```js -// index.js - -import {configure} from '@gravity-ui/uikit'; - -configure({ - lang: 'ru', -}); -``` +- [테마](docs/theming.md) — 라이트, 다크, 고대비 테마 활성화 +- [서버 사이드 렌더링](docs/server-side-rendering.md) — 서버에서 루트 CSS 클래스 생성 +- [국제화](docs/i18n.md) — 내장 컴포넌트 언어 설정 ## 개발 -스토리북으로 개발 서버를 시작하려면 다음을 실행하세요. - ```shell git clone git@github.com:gravity-ui/uikit.git cd uikit npm ci -npm run start +npm run start # Storybook을 http://localhost:7007에서 실행합니다. ``` +기타 유용한 명령어: + +```shell +npm test # 단위 테스트 실행 +npm run lint # JS, SCSS, Markdown 린트 +npm run typecheck # TypeScript 타입 검사 +npm run playwright # 시각적 회귀 테스트 실행 +``` + +## 유지보수자 + + + + + + + +
+ + amje
+ @amje + + 		+ + ValeraS
+ @ValeraS + + 		+ + korvin89
+ @korvin89 + +
+ +## 기여하기 + +기여는 언제나 환영입니다! 풀 리퀘스트를 제출하기 전에 [CONTRIBUTING.md](CONTRIBUTING.md)를 읽어주세요. 자세한 PR 가이드라인은 [contribute/pull-request.md](contribute/pull-request.md)를 참고하세요. + +저희는 [![contributors](https://img.shields.io/github/contributors/gravity-ui/uikit?label=contributors)](https://github.com/gravity-ui/uikit/graphs/contributors) 명의 기여자와 함께하고 있으며, 계속 늘어나고 있습니다 — 함께해요! + +질문이나 토론은 [Telegram](https://t.me/gravity_ui) 커뮤니티에서 참여해주세요. + ## 라이선스 -MIT 라이선스에 따라 배포됩니다. 자세한 내용은 [LICENSE](LICENSE)를 참조하세요. +MIT 라이선스 하에 배포됩니다. 자세한 내용은 [LICENSE](LICENSE)를 참고하세요. ## AI 에이전트용 -Gravity UI 앱을 위한 기본 React 컴포넌트 및 디자인 토큰 라이브러리 — 다른 모든 @gravity-ui 패키지가 기반으로 하는 컨트롤, 입력, 오버레이, 레이아웃 및 테마입니다. +Gravity UI 앱을 위한 기본 React 컴포넌트 및 디자인 토큰 라이브러리 — 다른 모든 `@gravity-ui/*` 패키지가 기반으로 하는 컨트롤, 입력, 오버레이, 레이아웃 및 테마 기능을 제공합니다. ### 언제 사용해야 할까요? -- 표준 애플리케이션 UI: 버튼, 폼 컨트롤, 모달 및 팝업, 메뉴, 탭, 레이블, 타이포그래피 및 레이아웃 기본 요소. -- Gravity UI 앱의 테마 기초: `ThemeProvider`, 디자인 토큰 및 `@gravity-ui/*` 생태계의 나머지 부분이 존재하기를 기대하는 CSS 변수. -- 내장된 `Table` 컴포넌트를 통한 간단한 테이블 형식 데이터(선택, 정렬, 행 작업). +- 표준 애플리케이션 UI: 버튼, 폼 컨트롤, 모달 및 팝업, 메뉴, 탭, 라벨, 타이포그래피 및 레이아웃 기본 요소. +- Gravity UI 앱의 테마 기반: `ThemeProvider`, 디자인 토큰, 그리고 `@gravity-ui/*` 생태계의 나머지 부분에서 필요로 하는 CSS 변수. +- 내장된 `Table` 컴포넌트를 통한 간단한 테이블 데이터 (선택, 정렬, 행 액션). ### 언제 사용하지 않아야 할까요? -- 기능이 풍부한 데이터 그리드 (가상화, 컬럼 크기 조절, 그룹화, 재정렬) — [`@gravity-ui/table`](https://github.com/gravity-ui/table)을 사용하세요. 이 패키지는 별도의 헤드리스(headless) 패키지입니다. uikit의 `Table` 컴포넌트와는 **다릅니다**. +- 기능이 풍부한 데이터 그리드 (가상화, 컬럼 크기 조절, 그룹화, 재정렬) — 별도의 헤드리스 패키지인 [`@gravity-ui/table`](https://github.com/gravity-ui/table)을 사용하세요. uikit의 `Table` 컴포넌트와는 **다릅니다**. - 차트 및 데이터 시각화 — [`@gravity-ui/charts`](https://github.com/gravity-ui/charts)를 사용하세요 (`@gravity-ui/chartkit`은 레거시 래퍼입니다). -- 애플리케이션 네비게이션 쉘 (aside, header, footer, logo) — [`@gravity-ui/navigation`](https://github.com/gravity-ui/navigation)을 사용하세요. +- 애플리케이션 네비게이션 쉘 (사이드 헤더, 푸터, 로고) — [`@gravity-ui/navigation`](https://github.com/gravity-ui/navigation)을 사용하세요. - 날짜 선택기, 캘린더 및 범위 컨트롤 — [`@gravity-ui/date-components`](https://github.com/gravity-ui/date-components)를 사용하세요. -- SVG 아이콘 세트 자체 — [`@gravity-ui/icons`](https://github.com/gravity-ui/icons)를 사용하세요. uikit은 `Icon` 렌더러만 제공합니다. +- SVG 아이콘 세트 자체 — [`@gravity-ui/icons`](https://github.com/gravity-ui/icons)를 사용하세요; uikit은 `Icon` 렌더러만 제공합니다. -### 흔히 발생하는 실수 +### 흔한 실수 - `Button`의 스타일링 prop은 `view`이며, `variant`나 `color`가 아닙니다. -- **컴포넌트가 설정 없이 스타일이 적용되지 않은 채 렌더링됩니다.** 앱을 `ThemeProvider`로 감싸고, 진입점에서 `@gravity-ui/uikit/styles/styles.css` (및 `fonts.css`)를 한 번 임포트해야 합니다. 둘 다 필수입니다. -- **`Icon`에는 `name` prop이 없습니다.** 임포트한 아이콘 컴포넌트를 `data` prop으로 전달하세요: `import {Gear} from '@gravity-ui/icons'; `. +- **컴포넌트가 설정 없이 스타일링되지 않은 채 렌더링됩니다.** 앱을 `ThemeProvider`로 감싸고, 진입점에서 `@gravity-ui/uikit/styles/styles.css` (및 `fonts.css`)를 한 번 임포트해야 합니다 — 둘 다 필수입니다. +- **`Icon`에는 `name` prop이 없습니다.** 임포트한 아이콘 컴포넌트를 `data`를 통해 전달하세요: `import {Gear} from '@gravity-ui/icons'; `. - **`theme` 값은 `light | dark | light-hc | dark-hc`입니다.** `theme="default"`는 없습니다. ### 유용한 문서 - [레이아웃 컴포넌트 및 간격](./docs/layout.md) -- [테마, 색상 및 브랜딩](./docs/theming.md) -- [타이포그래피](./docs/typography.md) \ No newline at end of file +- [테마, 색상 & 브랜딩](./docs/theming.md) +- [타이포그래피](./docs/typography.md) + +## AI 에이전트용 문서 + +설치된 버전의 에이전트 읽기 가능 문서는 `node_modules/@gravity-ui/uikit/build/docs/INDEX.md`에 있습니다. + +## Star History + +
+ + + + Star History Chart + +
+ +--- + +UIKit이 유용하다고 생각하시면, [GitHub](https://github.com/gravity-ui/uikit)에서 ⭐를 눌러주세요 — 다른 사람들이 프로젝트를 발견하는 데 도움이 됩니다. \ No newline at end of file diff --git a/src/content/local-docs/libs/uikit/README-pt.md b/src/content/local-docs/libs/uikit/README-pt.md index a3f398455fea..510d294a75b2 100644 --- a/src/content/local-docs/libs/uikit/README-pt.md +++ b/src/content/local-docs/libs/uikit/README-pt.md @@ -1,99 +1,175 @@ -# UIKit · [![npm package](https://img.shields.io/npm/v/@gravity-ui/uikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/uikit) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/ci.yml?query=branch:main) [![storybook tests](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/test-storybook.yml?label=Storybook%20Tests&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/test-storybook.yml) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685?logo=storybook)](https://preview.gravity-ui.com/uikit/) +# UIKit · [![npm package](https://img.shields.io/npm/v/@gravity-ui/uikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/uikit) [![npm downloads](https://img.shields.io/npm/dm/@gravity-ui/uikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/uikit) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/ci.yml?query=branch:main) [![storybook tests](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/test-storybook.yml?label=Storybook%20Tests&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/test-storybook.yml) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685?logo=storybook)](https://preview.gravity-ui.com/uikit/) -Um conjunto de componentes React flexíveis, altamente práticos e eficientes para criar aplicações web ricas. +[English](README.md) | [Русский](README-ru.md) + +Um conjunto de componentes React flexíveis, altamente práticos e eficientes para a criação de aplicações web ricas. Parte do sistema de design [Gravity UI](https://gravity-ui.com). -![Cover image](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/uikit_cover.png) +![Imagem de capa](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/uikit_cover.png) -## Recursos +### ![Logo do Globo Claro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_light.svg#gh-light-mode-only) ![Logo do Globo Escuro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_dark.svg#gh-dark-mode-only) [Website](https://gravity-ui.com)    ![Logo da Documentação Claro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_light.svg#gh-light-mode-only) ![Logo da Documentação Escuro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_dark.svg#gh-dark-mode-only) [Documentação](https://gravity-ui.com/components/uikit/alert)    ![Logo do Figma Claro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_light.svg#gh-light-mode-only) ![Logo do Figma Escuro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_dark.svg#gh-dark-mode-only) [Figma]()    ![Logo do Themer Claro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_light.svg#gh-light-mode-only) ![Logo do Themer Escuro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_dark.svg#gh-dark-mode-only) [Themer](https://gravity-ui.com/themer)    ![Logo do Storybook Claro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_light.svg#gh-light-mode-only) ![Logo do Storybook Escuro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_dark.svg#gh-dark-mode-only) [Storybook](https://preview.gravity-ui.com/uikit/)    ![Logo da Comunidade Claro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_light.svg#gh-light-mode-only) ![Logo da Comunidade Escuro](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_dark.svg#gh-dark-mode-only) [Comunidade](https://t.me/gravity_ui) -### ![Globe Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_light.svg#gh-light-mode-only) ![Globe Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_dark.svg#gh-dark-mode-only) [Website](https://gravity-ui.com) + -### ![Documentation Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_light.svg#gh-light-mode-only) ![Documentation Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_dark.svg#gh-dark-mode-only) [Documentação](https://gravity-ui.com/components/uikit/alert) +## Sobre -### ![Figma Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_light.svg#gh-light-mode-only) ![Figma Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_dark.svg#gh-dark-mode-only) [Figma]() +O UIKit é o pacote fundamental do sistema de design [Gravity UI](https://gravity-ui.com) — um conjunto testado em batalha com mais de 70 componentes React construídos para aplicações web de produção. Ele cuida das partes difíceis: temas, acessibilidade, layout RTL, renderização do lado do servidor e internacionalização, para que você possa focar na construção do seu produto. -### ![Themer Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_light.svg#gh-light-mode-only) ![Themer Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_dark.svg#gh-dark-mode-only) [Themer](https://gravity-ui.com/themer) +Principais recursos: -### ![Storybook Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_light.svg#gh-light-mode-only) ![Storybook Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_dark.svg#gh-dark-mode-only) [Storybook](https://preview.gravity-ui.com/uikit/) +- **Mais de 70 componentes** — inputs, overlays, exibição de dados, primitivas de layout, feedback e muito mais +- **Temas integrados** — variantes claras, escuras e de alto contraste com uma ferramenta [Themer](https://gravity-ui.com/themer) ao vivo para personalizar tokens +- **Suporte RTL** — direção completa do layout da direita para a esquerda -### ![Community Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_light.svg#gh-light-mode-only) ![Community Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_dark.svg#gh-dark-mode-only) [Comunidade](https://t.me/gravity_ui) +Navegue pelo catálogo completo de componentes no [Storybook](https://preview.gravity-ui.com/uikit/) ou na [documentação](https://gravity-ui.com/components/uikit/alert). - +## Primeiros Passos + +### Pré-requisitos + +React 16.14, 17, 18 ou 19 deve estar instalado no seu projeto. -## Instalação +### Instalação ```shell -npm install --save-dev @gravity-ui/uikit +npm install @gravity-ui/uikit ``` ## Uso +Importe componentes diretamente do pacote: + ```jsx import {Button} from '@gravity-ui/uikit'; -const SubmitButton = +); ``` ### Estilos -O UIKit vem com estilos base e tema. Para que tudo fique bonito, inclua isto no topo do seu arquivo de entrada: +Inclua os estilos base e as fontes uma vez no topo do ponto de entrada da sua aplicação: ```js // index.js - import '@gravity-ui/uikit/styles/fonts.css'; import '@gravity-ui/uikit/styles/styles.css'; - -// ... ``` -O UIKit suporta diferentes temas: claro, escuro e suas variantes de contraste. Sua aplicação deve ser renderizada dentro de `ThemeProvider`: +Um arquivo SCSS com [mixins](styles/mixins.scss) e utilitários úteis também está disponível para uso em suas próprias folhas de estilo. -```js -import {createRoot} from 'react-dom/client'; -import {ThemeProvider} from '@gravity-ui/uikit'; - -const root = createRoot(document.getElementById('root')); -root.render( - - - , -); +### Guias + +Leia mais: + +- [Temas](docs/theming.md) — habilite temas claros, escuros e de alto contraste +- [Renderização do lado do servidor](docs/server-side-rendering.md) — gere a classe CSS raiz no servidor +- [Internacionalização](docs/i18n.md) — defina o idioma dos componentes integrados + +## Desenvolvimento + +```shell +git clone git@github.com:gravity-ui/uikit.git +cd uikit +npm ci +npm run start # inicia o Storybook em http://localhost:7007 ``` -É possível gerar classes CSS raiz iniciais durante o SSR para evitar o flash de tema: +Outros comandos úteis: -```js -import {getRootClassName} from '@gravity-ui/uikit/server'; - -const theme = 'dark'; -const rootClassName = getRootClassName({theme}); - -const html = ` - - -
- - -`; +```shell +npm test # executa testes unitários +npm run lint # faz lint em JS, SCSS e Markdown +npm run typecheck # verifica tipos do TypeScript +npm run playwright # executa testes de regressão visual ``` -Além disso, há um arquivo SCSS com [mixins](styles/mixins.scss) com utilitários úteis para usar em sua aplicação. +## Mantenedores -### I18N + + + + + + +
+ + amje
+ @amje + + 		+ + ValeraS
+ @ValeraS + + 		+ + korvin89
+ @korvin89 + +
-Alguns componentes contêm tokens de texto (palavras e frases). Eles vêm em dois +## Contribuições -- Grade de dados rica em recursos (virtualização, redimensionamento de colunas, agrupamento, reordenação) — use [`@gravity-ui/table`](https://github.com/gravity-ui/table), um pacote separado sem interface. **Não** é o mesmo que o componente `Table` do uikit. +Suas contribuições são bem-vindas! Por favor, leia o [CONTRIBUTING.md](CONTRIBUTING.md) antes de enviar um pull request. Para diretrizes detalhadas de PR, consulte [contribute/pull-request.md](contribute/pull-request.md). + +Temos [![contributors](https://img.shields.io/github/contributors/gravity-ui/uikit?label=contributors)](https://github.com/gravity-ui/uikit/graphs/contributors) contribuidores e contando — junte-se a nós! + +Participe da comunidade no [Telegram](https://t.me/gravity_ui) para dúvidas e discussões. + +## Licença + +Distribuído sob a Licença MIT. Veja [LICENSE](LICENSE) para detalhes. + +## Para agentes de IA + +A biblioteca base de componentes React e tokens de design para aplicativos Gravity UI — controles, entradas, overlays, layout e temas nos quais todos os outros pacotes `@gravity-ui/*` se baseiam. + +### Quando usar + +- UI padrão de aplicativos: botões, controles de formulário, modais e popups, menus, abas, rótulos, tipografia e primitivas de layout. +- A base de temas de um aplicativo Gravity UI: `ThemeProvider`, tokens de design e variáveis CSS que o restante do ecossistema `@gravity-ui/*` espera que estejam presentes. +- Dados tabulares simples através do componente `Table` integrado (seleção, ordenação, ações de linha). + +### Quando não usar + +- Grids de dados com muitos recursos (virtualização, redimensionamento de colunas, agrupamento, reordenação) — use [`@gravity-ui/table`](https://github.com/gravity-ui/table), um pacote headless separado. Ele **não** é o mesmo que o componente `Table` do uikit. - Gráficos e visualização de dados — use [`@gravity-ui/charts`](https://github.com/gravity-ui/charts) (`@gravity-ui/chartkit` é o wrapper legado). - Estruturas de navegação de aplicativos (cabeçalho lateral, rodapé, logo) — use [`@gravity-ui/navigation`](https://github.com/gravity-ui/navigation). - Seletores de data, calendários e controles de intervalo — use [`@gravity-ui/date-components`](https://github.com/gravity-ui/date-components). -- O próprio conjunto de ícones SVG — use [`@gravity-ui/icons`](https://github.com/gravity-ui/icons); o uikit apenas distribui o renderizador `Icon`. +- O próprio conjunto de ícones SVG — use [`@gravity-ui/icons`](https://github.com/gravity-ui/icons); o uikit apenas fornece o renderizador `Icon`. ### Armadilhas comuns - A prop de estilo do `Button` é `view`, não `variant` ou `color`. - **Componentes renderizam sem estilo sem configuração.** Envolva o aplicativo em `ThemeProvider` **e** importe `@gravity-ui/uikit/styles/styles.css` (mais `fonts.css`) uma vez no ponto de entrada — ambos são necessários. - **`Icon` não tem a prop `name`.** Passe um componente de ícone importado através de `data`: `import {Gear} from '@gravity-ui/icons'; `. +- **Os valores de `theme` são `light | dark | light-hc | dark-hc`.** Não existe `theme="default"`. + +### Documentação útil + +- [Componentes de layout e espaçamentos](./docs/layout.md) +- [Temas, Cores e Branding](./docs/theming.md) +- [Tipografia](./docs/typography.md) + +## Documentação para agentes de IA + +A documentação legível por agente para a versão instalada está localizada em `node_modules/@gravity-ui/uikit/build/docs/INDEX.md`. + +## Histórico de Estrelas + +
+ + + + Star History Chart + +
+ +--- + +Se você achar o UIKit útil, considere dar uma ⭐ no [GitHub](https://github.com/gravity-ui/uikit) — isso ajuda outras pessoas a descobrirem o projeto. \ No newline at end of file diff --git a/src/content/local-docs/libs/uikit/README-zh.md b/src/content/local-docs/libs/uikit/README-zh.md index eaa36bfd04ec..f27accc431e7 100644 --- a/src/content/local-docs/libs/uikit/README-zh.md +++ b/src/content/local-docs/libs/uikit/README-zh.md @@ -1,144 +1,175 @@ -# UIKit · [![npm package](https://img.shields.io/npm/v/@gravity-ui/uikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/uikit) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/ci.yml?query=branch:main) [![storybook tests](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/test-storybook.yml?label=Storybook%20Tests&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/test-storybook.yml) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685?logo=storybook)](https://preview.gravity-ui.com/uikit/) +# UIKit · [![npm package](https://img.shields.io/npm/v/@gravity-ui/uikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/uikit) [![npm downloads](https://img.shields.io/npm/dm/@gravity-ui/uikit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/uikit) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/ci.yml?query=branch:main) [![storybook tests](https://img.shields.io/github/actions/workflow/status/gravity-ui/uikit/.github/workflows/test-storybook.yml?label=Storybook%20Tests&logo=github)](https://github.com/gravity-ui/uikit/actions/workflows/test-storybook.yml) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685?logo=storybook)](https://preview.gravity-ui.com/uikit/) -一套灵活、实用且高效的 React 组件，用于构建丰富的 Web 应用程序。 +[English](README.md) | [Русский](README-ru.md) + +一套灵活、实用且高效的 React 组件，用于构建丰富的 Web 应用程序。是 [Gravity UI](https://gravity-ui.com) 设计系统的一部分。 ![Cover image](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/uikit_cover.png) -## 资源 +### ![Globe Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_light.svg#gh-light-mode-only) ![Globe Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_dark.svg#gh-dark-mode-only) [网站](https://gravity-ui.com)    ![Documentation Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_light.svg#gh-light-mode-only) ![Documentation Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_dark.svg#gh-dark-mode-only) [文档](https://gravity-ui.com/components/uikit/alert)    ![Figma Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_light.svg#gh-light-mode-only) ![Figma Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_dark.svg#gh-dark-mode-only) [Figma]()    ![Themer Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_light.svg#gh-light-mode-only) ![Themer Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_dark.svg#gh-dark-mode-only) [Themer](https://gravity-ui.com/themer)    ![Storybook Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_light.svg#gh-light-mode-only) ![Storybook Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_dark.svg#gh-dark-mode-only) [Storybook](https://preview.gravity-ui.com/uikit/)    ![Community Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_light.svg#gh-light-mode-only) ![Community Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_dark.svg#gh-dark-mode-only) [社区](https://t.me/gravity_ui) -### ![Globe Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_light.svg#gh-light-mode-only) ![Globe Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/globe_dark.svg#gh-dark-mode-only) [网站](https://gravity-ui.com) + -### ![Documentation Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_light.svg#gh-light-mode-only) ![Documentation Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/book-open_dark.svg#gh-dark-mode-only) [文档](https://gravity-ui.com/components/uikit/alert) +## 关于 -### ![Figma Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_light.svg#gh-light-mode-only) ![Figma Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/figma_dark.svg#gh-dark-mode-only) [Figma]() +UIKit 是 [Gravity UI](https://gravity-ui.com) 设计系统的基础包——这是一套经过实战检验的、包含 70 多个 React 组件的集合，专为生产环境的 Web 应用程序而构建。它处理了棘手的问题：主题化、可访问性、RTL 布局、服务器端渲染和国际化，让您可以专注于构建您的产品。 -### ![Themer Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_light.svg#gh-light-mode-only) ![Themer Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/bucket-paint_dark.svg#gh-dark-mode-only) [Themer](https://gravity-ui.com/themer) +主要特点： -### ![Storybook Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_light.svg#gh-light-mode-only) ![Storybook Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/storybook_dark.svg#gh-dark-mode-only) [Storybook](https://preview.gravity-ui.com/uikit/) +- **70 多个组件** — 输入框、弹出层、数据展示、布局基元、反馈等 +- **内置主题化** — 提供浅色、深色和高对比度变体，并附带实时 [Themer](https://gravity-ui.com/themer) 工具来定制令牌 +- **RTL 支持** — 完全支持从右到左的布局方向 -### ![Community Logo Light](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_light.svg#gh-light-mode-only) ![Community Logo Dark](https://raw.githubusercontent.com/gravity-ui/uikit/main/docs/assets/telegram_dark.svg#gh-dark-mode-only) [社区](https://t.me/gravity_ui) +您可以在 [Storybook](https://preview.gravity-ui.com/uikit/) 或 [文档](https://gravity-ui.com/components/uikit/alert) 中浏览完整的组件目录。 - +## 入门 + +### 前提条件 + +您的项目必须已安装 React 16.14、17、18 或 19。 -## 安装 +### 安装 ```shell -npm install --save-dev @gravity-ui/uikit +npm install @gravity-ui/uikit ``` -## 使用 +## 用法 + +直接从包中导入组件： ```jsx import {Button} from '@gravity-ui/uikit'; -const SubmitButton = +); ``` ### 样式 -UIKit 包含基础样式和主题。为了让一切看起来都很棒，请在你的入口文件的顶部添加以下内容： +在应用程序入口点的顶部一次性引入基础样式和字体： ```js // index.js - import '@gravity-ui/uikit/styles/fonts.css'; import '@gravity-ui/uikit/styles/styles.css'; - -// ... ``` -UIKit 支持不同的主题：浅色、深色以及它们的对比色变体。你的应用必须渲染在 `ThemeProvider` 内部： +还提供了一个 SCSS [mixins](styles/mixins.scss) 文件，其中包含有用的辅助函数，供您在自己的样式表中使用。 -```js -import {createRoot} from 'react-dom/client'; -import {ThemeProvider} from '@gravity-ui/uikit'; - -const root = createRoot(document.getElementById('root')); -root.render( - - - , -); -``` +### 指南 -在 SSR（服务器端渲染）期间，可以生成初始的根 CSS 类，以避免主题闪烁： +阅读更多： -```js -import {getRootClassName} from '@gravity-ui/uikit/server'; - -const theme = 'dark'; -const rootClassName = getRootClassName({theme}); - -const html = ` - - -
- - -`; -``` - -此外，还有一个 SCSS [mixins](styles/mixins.scss) 文件，其中包含一些有用的辅助函数，可以在你的应用程序中使用。 - -### i18N（国际化） - -某些组件包含文本令牌（单词和短语）。它们有两种语言：`en`（默认）和 `ru`。 -要设置语言，请使用 `configure` 函数： - -```js -// index.js - -import {configure} from '@gravity-ui/uikit'; - -configure({ - lang: 'ru', -}); -``` +- [主题化](docs/theming.md) — 启用浅色、深色和高对比度主题 +- [服务器端渲染](docs/server-side-rendering.md) — 在服务器上生成根 CSS 类 +- [国际化](docs/i18n.md) — 设置内置组件的语言 ## 开发 -要启动带有 storybook 的开发服务器，请运行以下命令： - ```shell git clone git@github.com:gravity-ui/uikit.git cd uikit npm ci -npm run start +npm run start # 在 http://localhost:7007 启动 Storybook ``` +其他常用命令： + +```shell +npm test # 运行单元测试 +npm run lint # 检查 JS、SCSS 和 Markdown 代码风格 +npm run typecheck # TypeScript 类型检查 +npm run playwright # 运行视觉回归测试 +``` + +## 维护者 + + + + + + + +
+ + amje
+ @amje + + 		+ + ValeraS
+ @ValeraS + + 		+ + korvin89
+ @korvin89 + +
+ +## 贡献 + +欢迎贡献！在提交 Pull Request 之前，请阅读 [CONTRIBUTING.md](CONTRIBUTING.md)。有关详细的 PR 指南，请参阅 [contribute/pull-request.md](contribute/pull-request.md)。 + +我们已有 [![contributors](https://img.shields.io/github/contributors/gravity-ui/uikit?label=contributors)](https://github.com/gravity-ui/uikit/graphs/contributors) 位贡献者，并且还在不断增加——快加入我们吧！ + +加入我们的 [Telegram](https://t.me/gravity_ui) 社区，进行提问和讨论。 + ## 许可证 -根据 MIT 许可证分发。有关详细信息，请参阅 [LICENSE](LICENSE)。 +在 MIT 许可证下分发。详情请参阅 [LICENSE](LICENSE)。 -## 致 AI 代理 +## 供 AI 代理使用 -Gravity UI 应用的基础 React 组件和设计令牌库 — 包含其他所有 `@gravity-ui` 包都依赖的控件、输入、覆盖层、布局和主题化功能。 +Gravity UI 应用的基础 React 组件和设计令牌库——包含所有其他 `@gravity-ui/*` 包都依赖的控件、输入框、覆盖层、布局和主题化。 ### 何时使用 -- 标准应用程序 UI：按钮、表单控件、模态框和弹出窗口、菜单、标签页、标签、排版和布局基元。 -- Gravity UI 应用的主题基础：`ThemeProvider`、设计令牌和 CSS 变量，这是其他 `@gravity-ui/*` 生态系统所期望存在的。 -- 通过内置的 `Table` 组件（支持选择、排序、行操作）处理简单的表格数据。 +- 标准应用 UI：按钮、表单控件、模态框和弹出框、菜单、标签页、标签、排版以及布局基础组件。 +- Gravity UI 应用的主题化基础：`ThemeProvider`、设计令牌以及其他 `@gravity-ui/*` 生态系统期望存在的 CSS 变量。 +- 通过内置的 `Table` 组件处理简单的表格数据（选择、排序、行操作）。 ### 何时避免使用 -- 功能丰富的表格（虚拟化、列调整、分组、重排）— 请使用 [`@gravity-ui/table`](https://github.com/gravity-ui/table)，这是一个独立的无头包。它**不同于** uikit 的 `Table` 组件。 -- 图表和数据可视化 — 请使用 [`@gravity-ui/charts`](https://github.com/gravity-ui/charts)（`@gravity-ui/chartkit` 是旧版包装器）。 -- 应用导航外壳（侧边栏、页眉、页脚、Logo）— 请使用 [`@gravity-ui/navigation`](https://github.com/gravity-ui/navigation)。 -- 日期选择器、日历和范围控件 — 请使用 [`@gravity-ui/date-components`](https://github.com/gravity-ui/date-components)。 -- SVG 图标集本身 — 请使用 [`@gravity-ui/icons`](https://github.com/gravity-ui/icons)；uikit 只提供 `Icon` 渲染器。 +- 功能丰富的表格（虚拟化、列调整、分组、重排）——请使用独立的无头包 [`@gravity-ui/table`](https://github.com/gravity-ui/table)。它**不**等同于 uikit 的 `Table` 组件。 +- 图表和数据可视化——请使用 [`@gravity-ui/charts`](https://github.com/gravity-ui/charts)（`@gravity-ui/chartkit` 是旧版包装器）。 +- 应用导航外壳（侧边栏、页眉、页脚、Logo）——请使用 [`@gravity-ui/navigation`](https://github.com/gravity-ui/navigation)。 +- 日期选择器、日历和范围控件——请使用 [`@gravity-ui/date-components`](https://github.com/gravity-ui/date-components)。 +- SVG 图标集本身——请使用 [`@gravity-ui/icons`](https://github.com/gravity-ui/icons)；uikit 只提供 `Icon` 渲染器。 ### 常见陷阱 - `Button` 的样式属性是 `view`，而不是 `variant` 或 `color`。 -- **组件在未设置的情况下会渲染无样式。** 请将应用包裹在 `ThemeProvider` 中，**并**在入口点一次性导入 `@gravity-ui/uikit/styles/styles.css`（以及 `fonts.css`）— 两者都是必需的。 -- **`Icon` 没有 `name` 属性。** 通过 `data` 传递导入的图标组件：`import {Gear} from '@gravity-ui/icons'; `。 +- **组件在未进行设置的情况下会渲染为空白。** 请在应用的入口点使用 `ThemeProvider` 包裹整个应用，**并且**一次性导入 `@gravity-ui/uikit/styles/styles.css`（以及 `fonts.css`）——两者都是必需的。 +- **`Icon` 没有 `name` 属性。** 请通过 `data` 属性传递导入的图标组件：`import {Gear} from '@gravity-ui/icons'; `。 - **`theme` 的值是 `light | dark | light-hc | dark-hc`。** 没有 `theme="default"`。 ### 有用的文档 - [布局组件和间距](./docs/layout.md) -- [主题、颜色和品牌](./docs/theming.md) -- [排版](./docs/typography.md) \ No newline at end of file +- [主题化、颜色与品牌](./docs/theming.md) +- [排版](./docs/typography.md) + +## 供 AI 代理使用的文档 + +已安装版本的代理可读文档位于 `node_modules/@gravity-ui/uikit/build/docs/INDEX.md`。 + +## Star History + +
+ + + + Star History Chart + +
+ +--- + +如果您觉得 UIKit 有用，请考虑在 [GitHub](https://github.com/gravity-ui/uikit) 上给它一个 ⭐，这有助于他人发现该项目。 \ No newline at end of file