feat(Switch): added new input switch (#48)

Author: NasgulNexus

src/lib/kit/components/Inputs/Switch/Switch.scss

@@ -0,0 +1,7 @@
+@import '../../../styles/variables.scss';
+
+.#{$ns}switch {
+    height: 28px;
+    display: flex;
+    align-items: center;
+}

src/lib/kit/components/Inputs/Switch/Switch.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import {Switch as SwitchBase} from '@gravity-ui/uikit';
+
+import {BooleanInput} from '../../../../core';
+import {block} from '../../../utils';
+
+import './Switch.scss';
+
+const b = block('switch');
+
+export const Switch: BooleanInput = ({name, input, spec}) => {
+    const {value, onBlur, onChange, onFocus} = input;
+
+    const handleChange = React.useCallback(
+        (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.checked),
+        [onChange],
+    );
+
+    return (
+        <SwitchBase
+            checked={value}
+            onChange={handleChange}
+            onBlur={onBlur}
+            onFocus={onFocus}
+            disabled={spec.viewSpec.disabled}
+            className={b()}
+            qa={name}
+        />
+    );
+};

src/lib/kit/components/Inputs/Switch/index.ts

@@ -0,0 +1 @@
+export * from './Switch';

src/lib/kit/components/Inputs/index.ts

@@ -9,6 +9,7 @@ export * from './OneOf';
 export * from './OneOfCard';
 export * from './Secret';
 export * from './Select';
+export * from './Switch';
 export * from './TableArrayInput';
 export * from './Text';
 export * from './TextArea';

src/lib/kit/constants/config.tsx

@@ -43,6 +43,7 @@ import {
     SectionWithSubtitle,
     SectionWithSubtitle2,
     Select,
+    Switch,
     TableArrayInput,
     TableArrayView,
     TableCell,
@@ -103,6 +104,7 @@ export const dynamicConfig: DynamicFormConfig = {
     boolean: {
         inputs: {
             base: {Component: Checkbox},
+            switch: {Component: Switch},
         },
         layouts: {
             row: Row,
@@ -206,6 +208,7 @@ export const dynamicCardConfig: DynamicFormConfig = {
     boolean: {
         inputs: {
             base: {Component: Checkbox},
+            switch: {Component: Switch},
         },
         layouts: {
             row: Row2,
@@ -299,6 +302,7 @@ export const dynamicViewConfig: DynamicViewConfig = {
     boolean: {
         views: {
             base: {Component: BaseView},
+            switch: {Component: BaseView},
         },
         layouts: {
             row: ViewRow,
@@ -382,6 +386,7 @@ export const dynamicViewCardConfig: DynamicViewConfig = {
     boolean: {
         views: {
             base: {Component: BaseView},
+            switch: {Component: BaseView},
         },
         layouts: {
             row: ViewRow2,

src/stories/BooleanSwitch.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import {ComponentStory} from '@storybook/react';
+
+import {BooleanSpec, SpecTypes, Switch as SwitchBase} from '../lib';
+
+import {InputPreview} from './components';
+
+export default {
+    title: 'Boolean/Switch',
+    component: SwitchBase,
+};
+
+const baseSpec: BooleanSpec = {
+    type: SpecTypes.Boolean,
+    viewSpec: {type: 'switch', layout: 'row', layoutTitle: 'Flag'},
+};
+
+const excludeOptions = ['viewSpec.type'];
+
+const template = (spec: BooleanSpec = baseSpec) => {
+    const Template: ComponentStory<typeof SwitchBase> = (__, {viewMode}) => (
+        <InputPreview spec={spec} excludeOptions={excludeOptions} viewMode={viewMode} />
+    );
+
+    return Template;
+};
+
+export const Switch = template();