From 789210105edfcd43ab90bb91a870d9c4c32c51d2 Mon Sep 17 00:00:00 2001
From: evdmatvey <evd.matvey@mail.ru>
Date: Mon, 15 Jul 2024 13:56:28 +0700
Subject: [PATCH] Add switch ui component

---
 src/shared/ui/Switch/index.ts                 |  1 +
 src/shared/ui/Switch/ui/Switch.module.css     | 43 +++++++++++
 src/shared/ui/Switch/ui/Switch.tsx            | 10 +++
 .../ui/Switch/ui/stories/Switch.stories.tsx   | 77 +++++++++++++++++++
 4 files changed, 131 insertions(+)
 create mode 100644 src/shared/ui/Switch/index.ts
 create mode 100644 src/shared/ui/Switch/ui/Switch.module.css
 create mode 100644 src/shared/ui/Switch/ui/Switch.tsx
 create mode 100644 src/shared/ui/Switch/ui/stories/Switch.stories.tsx

diff --git a/src/shared/ui/Switch/index.ts b/src/shared/ui/Switch/index.ts
new file mode 100644
index 0000000..947044a
--- /dev/null
+++ b/src/shared/ui/Switch/index.ts
@@ -0,0 +1 @@
+export { default } from './ui/Switch';
diff --git a/src/shared/ui/Switch/ui/Switch.module.css b/src/shared/ui/Switch/ui/Switch.module.css
new file mode 100644
index 0000000..2363823
--- /dev/null
+++ b/src/shared/ui/Switch/ui/Switch.module.css
@@ -0,0 +1,43 @@
+.root {
+  width: 44px;
+  height: 24px;
+  margin: 0;
+  vertical-align: top;
+  background: var(--gray-300);
+  border-radius: 30px;
+  outline: none;
+  cursor: pointer;
+  appearance: none;
+  position: relative;
+  transition: all 0.3s cubic-bezier(0.23, 0.79, 0.35, 1.3);
+}
+
+[data-theme='dark'] .root {
+  background: var(--gray-600);
+}
+
+.root::after {
+  content: '';
+  width: 19px;
+  height: 19px;
+  left: 3px;
+  top: 50%;
+  position: absolute;
+  background-color: var(--white-100);
+  border-radius: 50%;
+  transform: translateX(0) translateY(-50%);
+  transition: all 0.3s cubic-bezier(0.23, 0.79, 0.35, 1.3);
+}
+
+.root:checked::after {
+  transform: translateX(18px) translateY(-50%);
+}
+
+.root:checked {
+  background-color: var(--success-main);
+}
+
+.root:disabled {
+  opacity: 0.5;
+  cursor: auto;
+}
diff --git a/src/shared/ui/Switch/ui/Switch.tsx b/src/shared/ui/Switch/ui/Switch.tsx
new file mode 100644
index 0000000..c510670
--- /dev/null
+++ b/src/shared/ui/Switch/ui/Switch.tsx
@@ -0,0 +1,10 @@
+import { ComponentProps } from 'react';
+import styles from './Switch.module.css';
+
+interface SwitchProps extends Omit<ComponentProps<'input'>, 'type'> {}
+
+const Switch = (props: SwitchProps) => {
+  return <input className={styles.root} type="checkbox" {...props} />;
+};
+
+export default Switch;
diff --git a/src/shared/ui/Switch/ui/stories/Switch.stories.tsx b/src/shared/ui/Switch/ui/stories/Switch.stories.tsx
new file mode 100644
index 0000000..b0163be
--- /dev/null
+++ b/src/shared/ui/Switch/ui/stories/Switch.stories.tsx
@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Switch from '../Switch';
+
+const meta: Meta<typeof Switch> = {
+  component: Switch,
+  title: 'Components/Switch',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      subtitle: 'Switch component that includes all cases in our design layout',
+    },
+  },
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof Switch>;
+
+export const Default: Story = {
+  name: 'Switch',
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'You should use the option that is specified in the design layout',
+      },
+    },
+  },
+  render: () => (
+    <div
+      style={{
+        width: '50px',
+        display: 'flex',
+        gap: '10px',
+        flexDirection: 'column',
+      }}
+    >
+      <Switch />
+      <Switch checked />
+      <Switch disabled />
+      <Switch disabled checked />
+    </div>
+  ),
+};
+
+export const DarkMode: Story = {
+  name: 'Switch on dark mode',
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'You can see what the Switch component looks like with dark mode',
+      },
+    },
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+  render: () => (
+    <div
+      data-theme="dark"
+      style={{
+        width: '50px',
+        display: 'flex',
+        gap: '10px',
+        flexDirection: 'column',
+      }}
+    >
+      <Switch />
+      <Switch checked />
+      <Switch disabled />
+      <Switch disabled checked />
+    </div>
+  ),
+};