From 80ea396c4b051e17bc05827919f47b52f1995154 Mon Sep 17 00:00:00 2001
From: NasgulNexus <mostovoyegor@yandex-team.ru>
Date: Thu, 25 May 2023 16:16:16 +0200
Subject: [PATCH] feat(Switch): added new input switch

---
 .../kit/components/Inputs/Switch/Switch.scss  |  7 +++++
 .../kit/components/Inputs/Switch/Switch.tsx   | 31 +++++++++++++++++++
 src/lib/kit/components/Inputs/Switch/index.ts |  1 +
 src/lib/kit/components/Inputs/index.ts        |  1 +
 src/lib/kit/constants/config.tsx              |  5 +++
 src/stories/BooleanSwitch.stories.tsx         | 29 +++++++++++++++++
 6 files changed, 74 insertions(+)
 create mode 100644 src/lib/kit/components/Inputs/Switch/Switch.scss
 create mode 100644 src/lib/kit/components/Inputs/Switch/Switch.tsx
 create mode 100644 src/lib/kit/components/Inputs/Switch/index.ts
 create mode 100644 src/stories/BooleanSwitch.stories.tsx

diff --git a/src/lib/kit/components/Inputs/Switch/Switch.scss b/src/lib/kit/components/Inputs/Switch/Switch.scss
new file mode 100644
index 00000000..d16e4d21
--- /dev/null
+++ b/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;
+}
diff --git a/src/lib/kit/components/Inputs/Switch/Switch.tsx b/src/lib/kit/components/Inputs/Switch/Switch.tsx
new file mode 100644
index 00000000..900db8a7
--- /dev/null
+++ b/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}
+        />
+    );
+};
diff --git a/src/lib/kit/components/Inputs/Switch/index.ts b/src/lib/kit/components/Inputs/Switch/index.ts
new file mode 100644
index 00000000..1b19c1d3
--- /dev/null
+++ b/src/lib/kit/components/Inputs/Switch/index.ts
@@ -0,0 +1 @@
+export * from './Switch';
diff --git a/src/lib/kit/components/Inputs/index.ts b/src/lib/kit/components/Inputs/index.ts
index df5c775e..6651bd14 100644
--- a/src/lib/kit/components/Inputs/index.ts
+++ b/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';
diff --git a/src/lib/kit/constants/config.tsx b/src/lib/kit/constants/config.tsx
index e13c6793..d39313af 100644
--- a/src/lib/kit/constants/config.tsx
+++ b/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,
diff --git a/src/stories/BooleanSwitch.stories.tsx b/src/stories/BooleanSwitch.stories.tsx
new file mode 100644
index 00000000..52893a43
--- /dev/null
+++ b/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();