From fa58266630870e9dbf9d212be7ea15191fab0452 Mon Sep 17 00:00:00 2001 From: Kirill Revenkov Date: Fri, 10 May 2024 16:13:14 +0300 Subject: [PATCH] feat(Slider): introduce uikit slider component description (#206) * feat: introduce slider component description * feat: update uikit version to 6.15.0 * feat: remove deprecated LayoutProvider --- package-lock.json | 8 +-- package.json | 2 +- src/components/Layout/Layout.tsx | 22 +++---- src/content/components/uikit/Slider/index.ts | 62 +++++++++++++++++++ .../examples/components/SliderExample.tsx | 48 ++++++++++++++ .../uikit/examples/components/index.ts | 1 + src/content/components/uikit/index.ts | 2 + 7 files changed, 128 insertions(+), 17 deletions(-) create mode 100644 src/content/components/uikit/Slider/index.ts create mode 100644 src/content/components/uikit/examples/components/SliderExample.tsx diff --git a/package-lock.json b/package-lock.json index 35094c7b0bcd..c9df54f51cc8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@gravity-ui/date-components": "^2.0.1", "@gravity-ui/icons": "^2.8.1", "@gravity-ui/page-constructor": "^5.2.0", - "@gravity-ui/uikit": "^6.12.0", + "@gravity-ui/uikit": "^6.15.0", "@mdx-js/mdx": "^2.3.0", "@mdx-js/react": "^2.3.0", "@testing-library/jest-dom": "^5.16.5", @@ -2471,9 +2471,9 @@ "dev": true }, "node_modules/@gravity-ui/uikit": { - "version": "6.12.0", - "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-6.12.0.tgz", - "integrity": "sha512-kMrhzlb0SKzyupneZnWb5nRxSm8l84Vgp/jkBi0cXt+s24X53vo7VxM/1Wh9nUT+K5F0WtPuKLTeHG+B2rP9Zw==", + "version": "6.15.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-6.15.0.tgz", + "integrity": "sha512-UYy1iDgsqbN3y+RKVEZHlPwxwAnrD3YzFgNtg+q/l8g4Inz9uK1W/8WBAKyvbp7cqdoSGONq0t0UsoAtJhybfg==", "dependencies": { "@bem-react/classname": "^1.6.0", "@gravity-ui/i18n": "^1.3.0", diff --git a/package.json b/package.json index 178423234ee0..27d2d74c3569 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "@gravity-ui/date-components": "^2.0.1", "@gravity-ui/icons": "^2.8.1", "@gravity-ui/page-constructor": "^5.2.0", - "@gravity-ui/uikit": "^6.12.0", + "@gravity-ui/uikit": "^6.15.0", "@mdx-js/mdx": "^2.3.0", "@mdx-js/react": "^2.3.0", "@testing-library/jest-dom": "^5.16.5", diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx index 8a17c88f61ec..c537e7c17024 100644 --- a/src/components/Layout/Layout.tsx +++ b/src/components/Layout/Layout.tsx @@ -1,5 +1,5 @@ import {PageConstructorProvider, Theme as PageConstructorTheme} from '@gravity-ui/page-constructor'; -import {Lang, LayoutProvider, ThemeProvider, configure as configureUiKit} from '@gravity-ui/uikit'; +import {Lang, ThemeProvider, configure as configureUiKit} from '@gravity-ui/uikit'; import TimeAgo from 'javascript-time-ago'; import en from 'javascript-time-ago/locale/en.json'; import ru from 'javascript-time-ago/locale/ru.json'; @@ -83,17 +83,15 @@ export const Layout: React.FC = ({ {`Gravity UI${title ? ` – ${title}` : ''}`} - - - {isPageConstrucor ? ( - - {pageConent} - - ) : ( - pageConent - )} - - + + {isPageConstrucor ? ( + + {pageConent} + + ) : ( + pageConent + )} + ); }; diff --git a/src/content/components/uikit/Slider/index.ts b/src/content/components/uikit/Slider/index.ts new file mode 100644 index 000000000000..6b4a76121e5c --- /dev/null +++ b/src/content/components/uikit/Slider/index.ts @@ -0,0 +1,62 @@ +import dynamic from 'next/dynamic'; + +import {Repos} from '../../../../types/common'; +import {getGithubUrl, getReadmeUrl, mappingOptions} from '../../utils'; + +const getterOptions = {repoName: Repos.Uikit, componentName: 'Slider'}; + +export const sliderConfig = { + id: 'slider', + title: 'Slider', + githubUrl: getGithubUrl(getterOptions), + content: { + readmeUrl: getReadmeUrl(getterOptions), + }, + sandbox: { + component: dynamic(() => import('../examples/components').then((mod) => mod.SliderExample)), + props: { + hasTooltip: { + type: 'switch', + defaultValue: false, + }, + disabled: { + type: 'switch', + defaultValue: false, + }, + validationState: { + type: 'radioButton', + values: mappingOptions(['normal', 'invalid']), + defaultValue: 'normal', + }, + errorMessage: { + type: 'input', + defaultValue: 'Input is invalid', + }, + size: { + type: 'radioButton', + values: mappingOptions(['s', 'm', 'l', 'xl']), + defaultValue: 'm', + }, + min: { + type: 'input', + defaultValue: 0, + }, + max: { + type: 'input', + defaultValue: 100, + }, + step: { + type: 'input', + defaultValue: 1, + }, + debounceDelay: { + type: 'input', + defaultValue: 0, + }, + marksCount: { + type: 'input', + defaultValue: 2, + }, + }, + }, +}; diff --git a/src/content/components/uikit/examples/components/SliderExample.tsx b/src/content/components/uikit/examples/components/SliderExample.tsx new file mode 100644 index 000000000000..0572d7946cd9 --- /dev/null +++ b/src/content/components/uikit/examples/components/SliderExample.tsx @@ -0,0 +1,48 @@ +import {Slider, SliderProps} from '@gravity-ui/uikit'; +import React from 'react'; + +type SliderExampleProps = Omit< + SliderProps, + 'max' | 'min' | 'marksCount' | 'step' | 'debounceDelay' +> & { + max?: string | number; + min?: string | number; + marksCount?: string | number; + step?: string | number; + debounceDelay?: string | number; +}; + +export const SliderExample = ({ + defaultValue, + max, + min, + marksCount, + step, + debounceDelay, + ...restProps +}: SliderExampleProps) => { + const [value, setValue] = React.useState(defaultValue || min || 0); + const maxValue = Number(max) || undefined; + const minValue = Number(min) || undefined; + const marksCountValue = Number(marksCount) || undefined; + const stepValue = Number(step) || undefined; + const debounceDelayValue = Number(debounceDelay) || undefined; + + return ( +
+ +
{`Selected value: ${ + value === undefined ? '' : value + }`}
+
+ ); +}; diff --git a/src/content/components/uikit/examples/components/index.ts b/src/content/components/uikit/examples/components/index.ts index bc835e2a07c0..5c75ae3d3136 100644 --- a/src/content/components/uikit/examples/components/index.ts +++ b/src/content/components/uikit/examples/components/index.ts @@ -1,3 +1,4 @@ export * from './ArrowToggleExample'; export * from './PopupAnchorExample'; export * from './PopupPlacementExample'; +export * from './SliderExample'; diff --git a/src/content/components/uikit/index.ts b/src/content/components/uikit/index.ts index a9b092c3473b..e0fb1a266c4f 100644 --- a/src/content/components/uikit/index.ts +++ b/src/content/components/uikit/index.ts @@ -29,6 +29,7 @@ import {radioGroupConfig} from './RadioGroup'; import {selectConfig} from './Select'; import {sheetConfig} from './Sheet'; import {skeletonConfig} from './Skeleton'; +import {sliderConfig} from './Slider'; import {spinConfig} from './Spin'; import {switchConfig} from './Switch'; import {tableConfig} from './Table'; @@ -69,6 +70,7 @@ const uikitComponents: Component[] = [ radioGroupConfig, selectConfig, skeletonConfig, + sliderConfig, spinConfig, switchConfig, tableConfig,