From c5c65d84dc67d13f155c92b8d56716d56b9b50c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”> Date: Thu, 4 Aug 2022 13:12:12 +0300 Subject: [PATCH 1/5] reset backup --- src/stories/Checkbox.stories.tsx | 58 ++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 src/stories/Checkbox.stories.tsx diff --git a/src/stories/Checkbox.stories.tsx b/src/stories/Checkbox.stories.tsx new file mode 100644 index 0000000..7faf1bd --- /dev/null +++ b/src/stories/Checkbox.stories.tsx @@ -0,0 +1,58 @@ +import Checkbox from "../components/Checkbox"; +import { Meta, Story, ComponentStory, ComponentMeta } from "@storybook/react"; +import React, { useState } from "react"; +import { ReactComponent as Checkmark } from "assets/svg/check.svg"; +import { boolean } from "yup/lib/locale"; + +export default { + title: "Checkbox", + component: Checkbox, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + argTypes: { + isChecked: { + type: "boolean", + }, + children: { + type: "string", + defaultValue: "Use light theme", + }, + disabled: { + type: "boolean", + defaultValue: "false", + }, + id: { + type: "string", + defaultValue: "uniqueID", + }, + name: { + type: "string", + defaultValue: "checkbox name", + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const Checked = Template.bind({}); +Checked.args = { + isChecked: true, + children: "This is custom checkbox", +}; + +export const Unchecked = Template.bind({}); +Unchecked.args = { + isChecked: false, +}; + +export const Disabled = Template.bind({}); +Disabled.args = { + disabled: true, +}; + +export const Hovered = bindTemplate({}); +Hovered.args = { + className: "hover:true", + isChecked: false, +}; From e82c7116bc92698431803487a447d11883ca03f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”> Date: Thu, 4 Aug 2022 17:03:11 +0300 Subject: [PATCH 2/5] Checkbox component with its stories --- src/components/Checkbox.tsx | 103 ++++++++++++------------------- src/stories/Checkbox.stories.tsx | 14 ----- 2 files changed, 40 insertions(+), 77 deletions(-) diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx index 96ec6e0..fe69bb0 100644 --- a/src/components/Checkbox.tsx +++ b/src/components/Checkbox.tsx @@ -1,71 +1,48 @@ +import classNames from "classnames"; import React from "react"; +import { ReactComponent as Checkmark } from "assets/svg/check.svg"; -/** - * [*] A Checkbox Component - * - * [*] when the label is clicked => The checkbox will be checked - * - * [*] for each item(row) you have to put the following in App.tsx: - * const [isCheckedA, setIsCheckedA] = useState(true); - const handleChangeA = (e: React.ChangeEvent) => { - setIsCheckedA(e.target.checked); - }; - * - * [*] to create this component, you have to provide the following: - * [1] label - * [2] if the item is checked or not. - * - * [*] A good example will be: -const App: React.FC = () => -{ - const [isCheckedA, setIsCheckedA] = useState(true); - const handleChangeA = (e: React.ChangeEvent) => { - setIsCheckedA(e.target.checked); - }; - - const [isCheckedB, setIsCheckedB] = useState(true); - const handleChangeB = (e: React.ChangeEvent) => { - setIsCheckedB(e.target.checked); - }; - - return ( -
- - - - - -
- ); -}; - -*/ - -interface Props { +export type Props = { + /** + * Control the state of checkbox + */ isChecked: boolean; - handleChange: (event: React.ChangeEvent) => void; - label: string; -} + /** + * An Element next to the checkbox + */ + children?: React.ReactNode; +} & Omit, "type">; -const Checkbox = (props: Props) => { +const Checkbox = ({ children, className, isChecked, ...props }: Props) => { return ( -
- - -
+ ); }; export default Checkbox; diff --git a/src/stories/Checkbox.stories.tsx b/src/stories/Checkbox.stories.tsx index 7faf1bd..054bf99 100644 --- a/src/stories/Checkbox.stories.tsx +++ b/src/stories/Checkbox.stories.tsx @@ -20,14 +20,6 @@ export default { type: "boolean", defaultValue: "false", }, - id: { - type: "string", - defaultValue: "uniqueID", - }, - name: { - type: "string", - defaultValue: "checkbox name", - }, }, } as ComponentMeta; @@ -50,9 +42,3 @@ export const Disabled = Template.bind({}); Disabled.args = { disabled: true, }; - -export const Hovered = bindTemplate({}); -Hovered.args = { - className: "hover:true", - isChecked: false, -}; From 1c2d86cc6301040d1d9e90756ca69617ce7dfd70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”> Date: Fri, 5 Aug 2022 17:11:23 +0300 Subject: [PATCH 3/5] Fixtry --- src/components/Checkbox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx index fe69bb0..dbf3fd7 100644 --- a/src/components/Checkbox.tsx +++ b/src/components/Checkbox.tsx @@ -1,5 +1,5 @@ -import classNames from "classnames"; import React from "react"; +import classNames from "classnames"; import { ReactComponent as Checkmark } from "assets/svg/check.svg"; export type Props = { From a5ae4238ef49b8bdc6ed1775e3b30ecd4c732296 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”> Date: Fri, 5 Aug 2022 17:13:16 +0300 Subject: [PATCH 4/5] Main text color fix --- src/index.css | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/index.css b/src/index.css index 88cf3d4..426b0a0 100644 --- a/src/index.css +++ b/src/index.css @@ -17,7 +17,8 @@ @font-face { font-family: "Poppins"; src: url("assets/fonts/Poppins-Medium.eot"); - src: url("assets/fonts/Poppins-Medium.eot?#iefix") format("embedded-opentype"), + src: url("assets/fonts/Poppins-Medium.eot?#iefix") + format("embedded-opentype"), url("assets/fonts/Poppins-Medium.woff2") format("woff2"), url("assets/fonts/Poppins-Medium.ttf") format("truetype"); font-weight: 500; @@ -28,7 +29,8 @@ @font-face { font-family: "Poppins"; src: url("assets/fonts/Poppins-Regular.eot"); - src: url("assets/fonts/Poppins-Regular.eot?#iefix") format("embedded-opentype"), + src: url("assets/fonts/Poppins-Regular.eot?#iefix") + format("embedded-opentype"), url("assets/fonts/Poppins-Regular.woff2") format("woff2"), url("assets/fonts/Poppins-Regular.ttf") format("truetype"); font-weight: normal; @@ -91,7 +93,6 @@ --color-gray-50: 250 250 250; --color-gray-75: 240 240 240; --color-gray-100: 235 235 235; - ; --color-gray-200: 214 214 214; --color-gray-300: 191 191 191; --color-gray-400: 166 166 166; @@ -204,7 +205,7 @@ .separate::after, .separate::before { - content: ''; + content: ""; @apply border-b border-gray-300 flex-1; } @@ -215,4 +216,4 @@ .separate:not(:empty)::before { @apply mr-2; } -} \ No newline at end of file +} From b2e0a74a5fb57f61d40e55a35f4288e1d774dff2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”> Date: Fri, 5 Aug 2022 17:16:33 +0300 Subject: [PATCH 5/5] Checkbox story --- src/App.tsx | 3 ++- src/{stories => components}/Checkbox.stories.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) rename src/{stories => components}/Checkbox.stories.tsx (95%) diff --git a/src/App.tsx b/src/App.tsx index ae91156..713a9fe 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -17,6 +17,7 @@ import { store } from "store/store"; import routes from "routes"; import RoutesRenderer from "components/RoutesRenderer"; import NotificationsField from "ui/views/NotificationsField"; + /* -------------------------------------------------------------------------- */ /* Application root component */ /* -------------------------------------------------------------------------- */ @@ -26,7 +27,7 @@ import NotificationsField from "ui/views/NotificationsField"; */ function App() { return ( - + }> diff --git a/src/stories/Checkbox.stories.tsx b/src/components/Checkbox.stories.tsx similarity index 95% rename from src/stories/Checkbox.stories.tsx rename to src/components/Checkbox.stories.tsx index 054bf99..6439bf1 100644 --- a/src/stories/Checkbox.stories.tsx +++ b/src/components/Checkbox.stories.tsx @@ -1,4 +1,4 @@ -import Checkbox from "../components/Checkbox"; +import Checkbox from "./Checkbox"; import { Meta, Story, ComponentStory, ComponentMeta } from "@storybook/react"; import React, { useState } from "react"; import { ReactComponent as Checkmark } from "assets/svg/check.svg";