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.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",

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<LayoutProps> = ({
                 <title>{`Gravity UI${title ? ` – ${title}` : ''}`}</title>
                 <Meta />
             </Head>
-            <LayoutProvider>
-                <ThemeProvider theme={DEFAULT_THEME} direction={isRtl ? 'rtl' : 'ltr'}>
-                    {isPageConstrucor ? (
-                        <PageConstructorProvider theme={DEFAULT_THEME as PageConstructorTheme}>
-                            {pageConent}
-                        </PageConstructorProvider>
-                    ) : (
-                        pageConent
-                    )}
-                </ThemeProvider>
-            </LayoutProvider>
+            <ThemeProvider theme={DEFAULT_THEME} direction={isRtl ? 'rtl' : 'ltr'}>
+                {isPageConstrucor ? (
+                    <PageConstructorProvider theme={DEFAULT_THEME as PageConstructorTheme}>
+                        {pageConent}
+                    </PageConstructorProvider>
+                ) : (
+                    pageConent
+                )}
+            </ThemeProvider>
         </EnvironmentContext.Provider>
     );
 };

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,
+            },
+        },
+    },
+};

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 (
+        <div style={{width: '100%', maxWidth: 300}}>
+            <Slider
+                {...restProps}
+                onUpdate={setValue}
+                min={minValue}
+                max={maxValue}
+                marksCount={marksCountValue}
+                step={stepValue}
+                debounceDelay={debounceDelayValue}
+                defaultValue={defaultValue}
+            />
+            <div style={{textAlign: 'center'}}>{`Selected value: ${
+                value === undefined ? '' : value
+            }`}</div>
+        </div>
+    );
+};

src/content/components/uikit/examples/components/index.ts

@@ -1,3 +1,4 @@
 export * from './ArrowToggleExample';
 export * from './PopupAnchorExample';
 export * from './PopupPlacementExample';
+export * from './SliderExample';

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,