-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathgettingstarted-mdx.41921ecd.iframe.bundle.js
More file actions
16 lines (16 loc) · 36.5 KB
/
gettingstarted-mdx.41921ecd.iframe.bundle.js
File metadata and controls
16 lines (16 loc) · 36.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
(self.webpackChunkdocumentation=self.webpackChunkdocumentation||[]).push([[610],{"./.storybook/docsPages/gettingstarted.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>__WEBPACK_DEFAULT_EXPORT__});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_builds_ui_storybook_documentation_node_modules_storybook_addon_docs_dist_shims_mdx_react_shim__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@mdx-js/react/lib/index.js"),_storybook_blocks__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs"),_skbkontur_react_ui_components_Tabs__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/@skbkontur/react-ui/components/Tabs/Tabs/Tabs.js"),_skbkontur_react_ui_components_Link__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/@skbkontur/react-ui/components/Link/Link/Link.js"),_skbkontur_react_ui_components_Gapped__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/@skbkontur/react-ui/components/Gapped/Gapped/Gapped.js"),_versions__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./.storybook/versions/index.ts");function _createMdxContent(props){let _components=Object.assign({h1:"h1",p:"p",a:"a",h2:"h2",pre:"pre",span:"span",img:"img",code:"code",h3:"h3"},(0,_builds_ui_storybook_documentation_node_modules_storybook_addon_docs_dist_shims_mdx_react_shim__WEBPACK_IMPORTED_MODULE_3__.RP)(),props.components);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_storybook_blocks__WEBPACK_IMPORTED_MODULE_4__.W8,{title:"Getting Started"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("style",{dangerouslySetInnerHTML:{__html:`
[data-access="true"],
.has-access [data-access="false"] {
display: none;
}
.has-access [data-access="true"] {
display: block;
}
`}}),"\n",void(0,_versions__WEBPACK_IMPORTED_MODULE_2__.z)().then(versions=>{document.documentElement.querySelector("body").classList.add("has-access")}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h1,{id:"с-чего-начать",children:"С чего начать"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.p,{children:["Для начала работы с библиотекой достаточно ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.a,{href:"#%D1%83%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0",children:"подключить нужный пакет или несколько пакетов"})," к своему React-проекту."]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h2,{id:"быстрый-старт",children:"Быстрый старт"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"Если у вас нет настроенного проекта, но вы хотите изучить компоненты дизайн-системы или воспроизвести какой-то кейс использования и передать его команде разработки, воспользуйтесь готовыми песочницами:"}),"\n",(()=>{let[active,setActive]=react__WEBPACK_IMPORTED_MODULE_0__.useState("Vite"),TABS_DATA=[{id:"Vite",code:`npx degit skbkontur/retail-ui/vite#starter kontur-ui-vite-starter && cd kontur-ui-vite-starter
npm install
npm run dev`,repo:"skbkontur/retail-ui/tree/starter/vite"},{id:"Webpack",code:`npx degit skbkontur/retail-ui/webpack#starter kontur-ui-webpack-starter && cd kontur-ui-webpack-starter
npm install
npm run dev`,repo:"skbkontur/retail-ui/tree/starter/webpack"},{id:"Next.js",code:`npx create-next-app@latest kontur-ui-nextjs-starter --example "https://github.com/skbkontur/retail-ui/tree/starter/nextjs"
cd kontur-ui-nextjs-starter
npm run dev`,repo:"skbkontur/retail-ui/tree/starter/nextjs"}],CodeBlock=({children})=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{style:{padding:"20px",borderRadius:"4px",fontSize:"13px",lineHeight:"19px",overflow:"auto",border:"1px solid hsla(203, 50%, 30%, 0.15)",boxShadow:"rgba(0, 0, 0, 0.10) 0 1px 3px 0"},children:children}),TabContent=({data})=>{let githubPath=data.repo,stackblitzHref=`https://stackblitz.com/github/${githubPath}?file=src%2FApp.tsx`,codesandboxHref=`https://githubbox.com/${githubPath}`,repoHref=`https://github.com/${githubPath}`;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(CodeBlock,{options:{wrapper:react__WEBPACK_IMPORTED_MODULE_0__.Fragment},children:data.code}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_skbkontur_react_ui_components_Gapped__WEBPACK_IMPORTED_MODULE_5__.O,{vertical:!0,gap:16,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.span,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_skbkontur_react_ui_components_Link__WEBPACK_IMPORTED_MODULE_6__.N,{target:"_blank",href:stackblitzHref,icon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.img,{src:"https://stackblitz.com/_astro/favicon.svg",width:16,height:16,alt:"",style:{verticalAlign:-3}}),children:"Песочница StackBlitz"})," ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.span,{style:{color:"rgba(0, 0, 0, 0.54)"},children:["(",data.id,")"]})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.span,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_skbkontur_react_ui_components_Link__WEBPACK_IMPORTED_MODULE_6__.N,{target:"_blank",href:codesandboxHref,icon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.img,{src:"https://codesandbox.io/codesandbox-32.png",width:16,height:16,alt:"",style:{verticalAlign:-3}}),children:"Песочница CodeSandbox"})," ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.span,{style:{color:"rgba(0, 0, 0, 0.54)"},children:["(",data.id,")"]})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.span,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_skbkontur_react_ui_components_Link__WEBPACK_IMPORTED_MODULE_6__.N,{target:"_blank",href:repoHref,icon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.img,{src:"https://github.githubassets.com/favicons/favicon.svg",width:16,height:16,alt:"",style:{verticalAlign:-3}}),children:"Код на GitHub"})," ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.span,{style:{color:"rgba(0, 0, 0, 0.54)"},children:["(",data.id,")"]})]})]})]})};return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_storybook_blocks__WEBPACK_IMPORTED_MODULE_4__.di,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_skbkontur_react_ui_components_Tabs__WEBPACK_IMPORTED_MODULE_7__.t,{value:active,onValueChange:setActive,children:TABS_DATA.map(tab=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_skbkontur_react_ui_components_Tabs__WEBPACK_IMPORTED_MODULE_7__.t.Tab,{id:tab.id,children:tab.id},tab.id))}),TABS_DATA.map(tab=>active===tab.id&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(TabContent,{data:tab},tab.id))]})})(),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("br",{}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h2,{id:"установка",children:"Установка"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("div",{"data-access":"false",children:"Установите пакет React UI Kit с базовым набором 50+ компонентов:"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("div",{"data-access":"true",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("a",{href:"https://wiki.skbkontur.ru/display/soprovod/NPM+Repository#NPMRepository-%D0%9D%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B9%D0%BA%D0%B0%D1%80%D0%B5%D0%BF%D0%BE%D0%B7%D0%B8%D1%82%D0%BE%D1%80%D0%B8%D0%B5%D0%B2",target:"_blank",children:"Настройте NPM registry"})," и установите пакет React UI Kit с базовым набором 50+ компонентов:"]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-bash",children:"# npm\nnpm i @skbkontur/react-ui\n\n# yarn\nyarn add @skbkontur/react-ui\n"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"Это основной пакет со всеми компонентами.\nЕго можно использовать не только внутри экосистемы Контура, но и в любых проектах с указанием авторства."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"Другие пакеты React UI Kit доступны только для проектов Контура или партнеров.\nНиже примеры установки для npm, установка для других пакетных менеджеров аналогична установке базового пакета:"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-bash",children:"npm i @skbkontur/react-ui-validations # поведение валидаций и отображение ошибок\nnpm i @skbkontur/icons # набор интерфейсных иконок\nnpm i @skbkontur/colors # переменные палитры Контура\nnpm i @skbkontur/typography # пакет с типографикой Lab Grotesque K\nnpm i @skbkontur/logos # логотипы продуктов Контура\nnpm i @skbkontur/side-menu # боковое меню сервисов Контура\nnpm i @skbkontur/react-error-pages # компоненты страниц ошибок 404, 500 и др.\n\n"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.p,{children:["Вы также можете установить под свои запросы другие доступные пакеты с ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.a,{href:"https://tech.skbkontur.ru/kontur-ui/?path=/docs/overview--docs",target:"_blank",rel:"nofollow noopener noreferrer",children:"Витрины пакетов"}),"."]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h2,{id:"использование-компонента",children:"Использование компонента"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.p,{children:["После установки библиотеки вы можете импортировать в проект (",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{children:"src/App.tsx"}),") нужный компонент и включить его в нужном месте.\nНиже покажем это на примере компонента Button."]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-js",children:"import { Button } from '@skbkontur/react-ui/components/Button';\n\nexport function Page() {\n return (\n <Button size=\"medium\" onClick={() => console.log('Создать отчёт')}>\n Создать отчёт\n </Button>\n );\n});\n\n"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.p,{children:["Используйте другие компоненты из библиотеки. Опирайтесь на базовые примеры, описанные пропсы и примеры использования в ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.a,{href:"https://tech.skbkontur.ru/kontur-ui/?path=/docs/overview--docs",target:"_blank",rel:"nofollow noopener noreferrer",children:"документации"}),"."]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h2,{id:"контекстные-настройки",children:"Контекстные настройки"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"За то, в какой цветовой теме, на каком языке и другие настройки, которые влияют на отображение компонентов, отвечают контекстные настройки."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h3,{id:"тема",children:"Тема"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.p,{children:["Компоненты поддерживают светлую ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{children:"LIGHT_THEME"})," и тёмную ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{children:"DARK_THEME"})," темы.\nТема задается с помощью ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{children:"ThemeContext"}),":"]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-js",children:"import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';\nimport { DARK_THEME } from '@skbkontur/react-ui/lib/theming/themes/DarkTheme';\n\n\nexport function Page() {\n return (\n <ThemeContext.Provider value={DARK_THEME}>{/* ... */}</ThemeContext.Provider>\n )\n}\n"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.p,{children:["Темы могут быть кастомизированы, например, для гибкой настройки цветов, размеров, отступов или других визуальных параметров. Все переменные для кастомизации смотрите в ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.a,{href:"https://tech.skbkontur.ru/kontur-ui/packages/react-ui/5.3.2/?path=/docs/information-themeplayground--docs",target:"_blank",rel:"nofollow noopener noreferrer",children:"ThemePlayground"}),"."]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"С версии React UI Kit 5.0 в библиотеке появилось версионирование тем. Это значит, что можно использовать или вернуть старый внешний вид компонентов — то есть выбрать тему из прошлой минорной версии, если новые стили пока не нужны."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.p,{children:["Больше про настройку и создание тем в разделе ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.a,{href:"https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_information-theme--docs",target:"_blank",rel:"nofollow noopener noreferrer",children:"Theme"}),"."]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h3,{id:"локали",children:"Локали"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.p,{children:["React UI Kit поддерживает локализацию текстов и форматов (даты, числа) в компонентах через контекст ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{children:"LocaleContext"}),".\nСейчас доступно два языка ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{children:"Ru"})," и ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{children:"En"}),"."]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.p,{children:["Примеры использования дефолтной и кастомной локализации, а также примеры контролов смотрите в разделе ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.a,{href:"https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_information-locale--localecontext",target:"_blank",rel:"nofollow noopener noreferrer",children:"Локализация"}),"."]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-js",children:"import { LocaleContext, LangCodes } from '@skbkontur/react-ui/lib/locale';\n\nexport function Page() {\n return (\n <LocaleContext.Provider value={{ langCode: LangCodes.En }}>{/* ... */}</LocaleContext.Provider> \n )\n}\n"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h3,{id:"размеры-контролов",children:"Размеры контролов"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.p,{children:["Размеры контролов управляются через проп ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{children:"size"}),". Доступно 3 значения: ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{children:"small"}),", ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{children:"medium"})," и ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{children:"large"}),". По умолчанию применяется ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{children:"small"}),". Через ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{children:"SizeControlContext"})," можно изменять дефотное значение:"]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-js",children:"import { SizeControlContext } from '@skbkontur/react-ui/lib/size';\n\nexport function Page() {\n return (\n <SizeControlContext.Provider value={{ size: 'medium' }}>\n {/* Внутри провайдера все компоненты по умолчанию будут medium */}\n </SizeControlContext.Provider>\n );\n}\n\n"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.p,{children:["Примеры использования дефолтной и кастомной локализации, а также примеры контролов смотрите в разделе ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.a,{href:"https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_information-sizecontrols--sizecontrols",target:"_blank",rel:"nofollow noopener noreferrer",children:"Размеры контролов"}),"."]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h3,{id:"фича-флаги",children:"Фича-флаги"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.p,{children:["Фича-флаги позволяют заранее применять будущие breaking changes (ломающие изменения) до выхода очередного мажорного релиза библиотеки через ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{children:"ReactUIFeatureFlagsContext"}),"."]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.pre,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.code,{className:"language-ts",children:"import { ReactUIFeatureFlagsContext } from '@skbkontur/react-ui/lib/featureFlagsContext';\n\nfunction Page() {\n return (\n <ReactUIFeatureFlagsContext.Provider\n value={{\n dateInputAllowInvalidValuesInDays: true,\n dateInputFixSameNumberTypingOnRefocus: true,\n radioGroupRemoveBaselineSpacer: true,\n comboBoxAllowValueChangeInEditingState: true,\n stickyReduceLayoutEvents: true,\n groupAddHintsAndTooltipsSupport: true,\n popupFixPinTearing: true,\n sidePageDisableHeaderShrink: true,\n sidePageNotCutTitleOnStuckByDefault: true,\n autocompleteUseMaskedInput: true,\n fxInputUseMaskedInput: true,\n tokenInputCreateTokenOnBlurInWithoutReferenceMode: true,\n }}\n >\n {/* Внутри будут работать все фича-флаги с true */}\n </ReactUIFeatureFlagsContext.Provider>\n );\n}\n"})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.p,{children:["Полный список фича-флагов смотрите в разделе ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.a,{href:"https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_information-feature-flags--featureflagscontext",target:"_blank",rel:"nofollow noopener noreferrer",children:"Фича-флаги"}),"."]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.h2,{id:"поддерживаемые-версии",children:"Поддерживаемые версии"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"Пакеты библиотеки совместимы с React 16/17/18 (полная поддержка React 19 в разработке). Ограничений по React-фреймворкам нет, вы можете использовать любой современный стартер – Vite/Webpack/Next.js/Remix."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_components.p,{children:"Мы поддерживаем стабильные версии следующих браузеров:"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("table",{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("tbody",{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("tr",{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("td",{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.p,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("img",{src:"https://raw.githubusercontent.com/alrra/browser-logos/refs/heads/main/src/chrome/chrome_32x32.png",width:"16",height:"16",style:{verticalAlign:-3},alt:""})," ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("strong",{children:"Chrome/Chromium"})]})}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("td",{children:"≥ 64"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("tr",{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("td",{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.p,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("img",{src:"https://raw.githubusercontent.com/alrra/browser-logos/refs/heads/main/src/firefox/firefox_32x32.png",width:"16",height:"16",style:{verticalAlign:-3},alt:""})," ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("strong",{children:"Firefox"})]})}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("td",{children:"≥ 69"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)("tr",{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("td",{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsxs)(_components.p,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("img",{src:"https://raw.githubusercontent.com/alrra/browser-logos/refs/heads/main/src/safari/safari_32x32.png",width:"16",height:"16",style:{verticalAlign:-3},alt:""})," ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("strong",{children:"Safari"})]})}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)("td",{children:"≥ 11.1"})]})]})})]})}let __WEBPACK_DEFAULT_EXPORT__=function MDXContent(props={}){let{wrapper:MDXLayout}=Object.assign({},(0,_builds_ui_storybook_documentation_node_modules_storybook_addon_docs_dist_shims_mdx_react_shim__WEBPACK_IMPORTED_MODULE_3__.RP)(),props.components);return MDXLayout?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(MDXLayout,Object.assign({},props,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_1__.jsx)(_createMdxContent,props)})):_createMdxContent(props)}},"./node_modules/memoizerific sync recursive":module=>{function webpackEmptyContext(req){var e=Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="./node_modules/memoizerific sync recursive",module.exports=webpackEmptyContext},"./.storybook/versions/index.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";function _define_property(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _object_spread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{},ownKeys=Object.keys(source);"function"==typeof Object.getOwnPropertySymbols&&(ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))),ownKeys.forEach(function(key){_define_property(target,key,source[key])})}return target}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})),keys.push.apply(keys,symbols)}return keys}function _object_spread_props(target,source){return source=null!=source?source:{},Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))}),target}__webpack_require__.d(__webpack_exports__,{z:()=>getStorybooksVersions});var OLD_VERSIONS={"react-ui":["4.27.0","4.26.0","4.25.2","4.25.1","4.25.0","4.24.0","4.23.0","4.22.6","4.22.5","4.22.4","4.22.3","4.22.2","4.22.1","4.22.0","4.21.4","4.21.3","4.21.2","4.21.1","4.21.0","4.20.3","4.20.2","4.20.1","4.20.0","4.19.1","4.19.0","4.18.0","4.17.4","4.17.3","4.17.2","4.17.1","4.17.0","4.16.2","4.16.1","4.16.0","4.15.7","4.15.6","4.15.5","4.15.4","4.15.3","4.15.2","4.15.1","4.15.0","4.14.2","4.14.1","4.14.0","4.13.4","4.13.3","4.13.2","4.13.1","4.13.0","4.12.0","4.11.0","4.10.0","4.9.2","4.9.1","4.9.0","4.8.0","4.7.0","4.6.1","4.6.0","4.5.3","4.5.2","4.5.1","4.5.0","4.4.0","4.3.1","4.3.0","4.2.2","4.2.1","4.2.0","4.1.2","4.1.1","4.1.0","4.0.6","4.0.5","4.0.4","4.0.3","4.0.2","4.0.1","4.0.0"].reduce(function(acc,version){return _object_spread_props(_object_spread({},acc),_define_property({},version,"https://tech.skbkontur.ru/react-ui/"+version))},{}),"react-ui-validations":{"1.16.3 ":"https://tech.skbkontur.ru/react-ui-validations/"},"react-ui-addons":{"5.1.5":"https://ui.gitlab-pages.kontur.host/docs/ui-parking-old-if/#/react-ui-addons"},"side-menu":{"3.1.8 ":"https://ui.gitlab-pages.kontur.host/docs/ui-parking-old-if/#/side-menu"},icons:{"1.16.0 ":"https://ui.gitlab-pages.kontur.host/docs/ui-parking-old-if/#/icons"},colors:{"0.5.1":"https://ui.gitlab-pages.kontur.host/docs/ui-parking-old-if/#/colors"},"import-wizard":{"1.5.9":"https://ui.gitlab-pages.kontur.host/docs/ui-parking-old-if/#/import-wizard"},logos:{"2.10.0":"https://ui.gitlab-pages.kontur.host/docs/ui-parking-old-if/#/logos"},"mass-actions-panel":{"0.4.2":"https://ui.gitlab-pages.kontur.host/docs/ui-parking-old-if/#/mass-actions-panel"},"mini-skeleton":{"0.1.3":"https://ui.gitlab-pages.kontur.host/docs/ui-parking-old-if/#/mini-skeleton"},"react-error-pages":{"2.1.3":"https://ui.gitlab-pages.kontur.host/docs/ui-parking-old-if/#/react-error-pages"}};let actual_versions_namespaceObject=JSON.parse('{"typography":["0.1.3","0.1.2","0.1.1","0.1.0"],"table":["0.1.0"],"storybook-8":["0.0.0"],"side-menu":["side-menu_dark-theme","master","3.4.9","3.4.8","3.4.7","3.4.6","3.4.5","3.4.4","3.4.3","3.4.2","3.4.1","3.4.0","3.3.8","3.3.7","3.3.6","3.3.5","3.3.4","3.3.3","3.3.2","3.3.1","3.3.0","3.2.7","3.2.5","3.2.4","3.2.3","3.2.2","3.2.1","3.2.0"],"react-ui-validations":["virtualized-validation","next","merge-requests","master","2.3.8","2.3.7","2.3.6","2.3.4","2.3.3","2.3.2","2.3.0","2.2.1","2.2.0","2.1.6","2.1.5","2.1.3-66a28a30","2.1.3","2.1.0","2.0.6","2.0.5","2.0.4","2.0.3","2.0.2","2.0.1","2.0.0","0.0.0"],"react-ui-addons":["user-avatar_remake-default-and-initials","side-menu_avatar-icon","master","logos_dark-theme","5.3.3","5.3.2","5.3.1","5.3.0","5.2.5","5.2.4","5.2.3","5.2.2","5.2.1","5.2.0"],"react-ui":["keep-open-date-range-picker-on-edit","date-range-picker-dark","date-range-picker-5.x","date-input-fix-onblur-call-after-typing","date-input-allow-invalid-days","data-range-picker-label","IF-2268-FileUploader-tile","5.x","5.6.0","5.5.1","5.5.0","5.4.6","5.4.5","5.4.4","5.4.3","5.4.2","5.4.1","5.4.0","5.3.9","5.3.8","5.3.7","5.3.6","5.3.5","5.3.4","5.3.3","5.3.2","5.3.10","5.3.1","5.3.0","5.2.1","5.2.0","5.1.7","5.1.6","5.1.5","5.1.4","5.1.3","5.1.2","5.1.1","5.1.0","5.0.9","5.0.8","5.0.7","5.0.6","5.0.5","5.0.4","5.0.3","5.0.2","5.0.16","5.0.15","5.0.14","5.0.13","5.0.12","5.0.11","5.0.10","5.0.1","5.0.0","0.0.0"],"react-error-pages":["2.2.9","2.2.8","2.2.7","2.2.6","2.2.5","2.2.4","2.2.3","2.2.2","2.2.10","2.2.1","2.2.0"],"mini-skeleton":["0.2.0"],"mass-actions-panel":["master","0.6.3","0.6.2","0.6.1","0.6.0","0.5.7","0.5.6","0.5.5","0.5.4","0.5.3","0.5.2","0.5.1","0.5.0"],"logos":["master","logos_dark-theme","2.14.0","2.13.0","2.12.0","2.11.0"],"import-wizard":["master","2.3.7","2.3.6","2.3.5","2.3.4","2.3.3","2.3.2","2.3.1","2.3.0","2.2.2","2.2.1","2.2.0","2.1.0","2.0.1","2.0.0"],"icons":["master","1.20.2","1.20.1","1.20.0","1.19.1","1.19.0","1.18.0","1.17.1","1.17.0"],"hidden-links":["0.1.2","0.1.1","0.1.0"],"empty-state":["master","IF-2144_empty-state-docs","1.1.4","1.1.3","1.1.2","1.1.1","1.1.0"],"colors":["master","2.0.4","2.0.3","2.0.2","2.0.1","1.1.1","1.1.0","1.0.0"],"all-packages":["table-dev","side-menu_dark-theme","poc-notifications","mass-actions-panel_fix-styles","logos_dark-theme","icons-2.0-docs","holkin","hidden-links","fix-typography-docs-demo","fix-error-pages","empty-state","debug-side-menu-opening","colors-docs-v2","IF-2398-MassActionsPanel_Add_Local"]}');function asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg),value=info.value}catch(error){reject(error);return}info.done?resolve(value):Promise.resolve(value).then(_next,_throw)}function _async_to_generator(fn){return function(){var self1=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self1,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value)}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err)}_next(void 0)})}}function versions_define_property(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function versions_object_spread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{},ownKeys=Object.keys(source);"function"==typeof Object.getOwnPropertySymbols&&(ownKeys=ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym){return Object.getOwnPropertyDescriptor(source,sym).enumerable}))),ownKeys.forEach(function(key){versions_define_property(target,key,source[key])})}return target}function versions_ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})),keys.push.apply(keys,symbols)}return keys}function versions_object_spread_props(target,source){return source=null!=source?source:{},Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):versions_ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))}),target}function _ts_generator(thisArg,body){var f,y,t,g,_={label:0,sent:function(){if(1&t[0])throw t[1];return t[1]},trys:[],ops:[]};return g={next:verb(0),throw:verb(1),return:verb(2)},"function"==typeof Symbol&&(g[Symbol.iterator]=function(){return this}),g;function verb(n){return function(v){return step([n,v])}}function step(op){if(f)throw TypeError("Generator is already executing.");for(;_;)try{if(f=1,y&&(t=2&op[0]?y.return:op[0]?y.throw||((t=y.return)&&t.call(y),0):y.next)&&!(t=t.call(y,op[1])).done)return t;switch(y=0,t&&(op=[2&op[0],t.value]),op[0]){case 0:case 1:t=op;break;case 4:return _.label++,{value:op[1],done:!1};case 5:_.label++,y=op[1],op=[0];continue;case 7:op=_.ops.pop(),_.trys.pop();continue;default:if(!(t=(t=_.trys).length>0&&t[t.length-1])&&(6===op[0]||2===op[0])){_=0;continue}if(3===op[0]&&(!t||op[1]>t[0]&&op[1]<t[3])){_.label=op[1];break}if(6===op[0]&&_.label<t[1]){_.label=t[1],t=op;break}if(t&&_.label<t[2]){_.label=t[2],_.ops.push(op);break}t[2]&&_.ops.pop(),_.trys.pop();continue}op=body.call(thisArg,_)}catch(e){op=[6,e],y=0}finally{f=t=0}if(5&op[0])throw op[1];return{value:op[0]?op[1]:void 0,done:!0}}}var STORYBOOKS_BASE_URLS={github:"https://tech.skbkontur.ru/kontur-ui/packages",gitlab:"https://ui.gitlab-pages.kontur.host/docs/storybook"},STORYBOOKS_LIST=[{key:"react-ui",title:"React UI"},{key:"react-ui-validations",title:"React UI Validations"},{key:"typography",title:"Typography"},{key:"colors",title:"Colors"},{key:"side-menu",title:"SideMenu"},{key:"icons",title:"Icons"},{key:"logos",title:"Logos"},{key:"empty-state",title:"EmptyState"},{key:"table",title:"Table"},{key:"react-ui-addons",title:"React UI Addons"},{key:"mass-actions-panel",title:"MassActionsPanel"},{key:"hidden-links",title:"HiddenLinks"},{key:"mini-skeleton",title:"MiniSkeleton"},{key:"react-error-pages",title:"React Error Pages"},{key:"import-wizard",title:"ImportWizard"}],STORYBOOKS_HOSTED_ON_GITHUB=["react-ui","react-ui-validations"],versionRegexp=/^\d+\.\d+\.\d+$/,getStorybookUrl=function(storybookName,storybookVersion){var baseUrl=STORYBOOKS_BASE_URLS[STORYBOOKS_HOSTED_ON_GITHUB.includes(storybookName)?"github":"gitlab"];return"".concat(baseUrl,"/").concat(storybookName,"/").concat(storybookVersion)},sortVersions=function(a,b){for(var parseVersion=function(version){var match=version.match(versionRegexp);return match?match[0].split(".").map(Number):[1/0]},splitA=parseVersion(a),splitB=parseVersion(b),i=0;i<Math.max(splitA.length,splitB.length);i++){if(splitA[i]<splitB[i])return 1;if(splitA[i]>splitB[i])return -1}return a.localeCompare(b)},getStorybooksVersions=function(){var _ref=_async_to_generator(function(){var versions;return _ts_generator(this,function(_state){return[2,Object.keys(versions=actual_versions_namespaceObject).reduce(function(acc,packageName){var processedVersions=versions[packageName].filter(function(v){return v.match(versionRegexp)}).sort(sortVersions),latestVersion=processedVersions[0];return versions_object_spread_props(versions_object_spread({},acc),versions_define_property({},packageName,{latest:latestVersion?getStorybookUrl(packageName,latestVersion):"",versions:processedVersions.reduce(function(acc,version){return versions_object_spread_props(versions_object_spread({},acc),versions_define_property({},version,getStorybookUrl(packageName,version)))},{})}))},{})]})});return function getStorybooksVersions(){return _ref.apply(this,arguments)}}();_async_to_generator(function(){var packagesVersions;return _ts_generator(this,function(_state){switch(_state.label){case 0:return[4,getStorybooksVersions()];case 1:if(!Object.entries(packagesVersions=_state.sent()).length)return[2,{}];return[2,STORYBOOKS_LIST.reduce(function(acc,param){var packageName=param.key,title=param.title,versions=Object.assign(packagesVersions[packageName].versions,OLD_VERSIONS[packageName]);return versions_object_spread_props(versions_object_spread({},acc),versions_define_property({},packageName,{expanded:!0,title:title,url:packagesVersions[packageName].latest,versions:versions}))},{})]}})})}}]);
//# sourceMappingURL=gettingstarted-mdx.41921ecd.iframe.bundle.js.map