From 6a30c8d8520c29b622f6c70c7752b68067a3eef9 Mon Sep 17 00:00:00 2001 From: Mostafa Talaat Date: Tue, 22 Mar 2022 22:54:56 +0200 Subject: [PATCH] fix: remove ColorPicker component --- index.d.ts | 5 -- package.json | 2 - .../atoms/ColorPicker/ColorPicker.scss | 32 -------- .../atoms/ColorPicker/ColorPicker.stories.tsx | 12 --- .../atoms/ColorPicker/ColorPicker.tsx | 45 ----------- src/components/atoms/ColorPicker/index.ts | 1 - src/components/atoms/index.ts | 1 - yarn.lock | 81 +------------------ 8 files changed, 2 insertions(+), 177 deletions(-) delete mode 100644 src/components/atoms/ColorPicker/ColorPicker.scss delete mode 100644 src/components/atoms/ColorPicker/ColorPicker.stories.tsx delete mode 100644 src/components/atoms/ColorPicker/ColorPicker.tsx delete mode 100644 src/components/atoms/ColorPicker/index.ts diff --git a/index.d.ts b/index.d.ts index 1c794d9..1eba07c 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,5 +1,4 @@ import { ReactNode, FC, PropsWithChildren, ReactElement } from 'react'; -import { ColorResult } from 'react-color'; import { SwiperProps } from 'swiper/react'; declare module '@bonuz/bonuz-ui' { @@ -179,9 +178,6 @@ declare module '@bonuz/bonuz-ui' { created: string; type?: 'main' | 'default'; }; - type ColorPickerProps = { - onChange?: (color: ColorResult) => void; - }; type FaqItemProps = { title: string; description: string; @@ -326,7 +322,6 @@ declare module '@bonuz/bonuz-ui' { export const FanItem: FC; export const Table: FC; export const CreatorNewsCard: FC; - export const ColorPicker: FC; export const FaqItem: FC; export const FansList: FC; export const Media: FC; diff --git a/package.json b/package.json index c5bd0d2..b2defe8 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,6 @@ "@testing-library/user-event": "^13.5.0", "classnames": "^2.3.1", "react": "^17.0.2", - "react-color": "^2.19.3", "react-dom": "^17.0.2", "react-scripts": "^5.0.0", "sanitize.css": "^13.0.0", @@ -80,7 +79,6 @@ "@types/jest": "^27.4.1", "@types/node": "^17.0.22", "@types/react": "^17.0.41", - "@types/react-color": "3.0.6", "@types/react-dom": "^17.0.14", "@typescript-eslint/eslint-plugin": "^5.16.0", "@typescript-eslint/parser": "^5.16.0", diff --git a/src/components/atoms/ColorPicker/ColorPicker.scss b/src/components/atoms/ColorPicker/ColorPicker.scss deleted file mode 100644 index 7cbb705..0000000 --- a/src/components/atoms/ColorPicker/ColorPicker.scss +++ /dev/null @@ -1,32 +0,0 @@ -@use '../../../assets/styles/utils' as u; - -.color-picker { - display: flex; - justify-content: space-between; - align-items: center; - position: relative; - padding: 6px; - border-radius: 8px; - - &__title { - display: block; - margin-left: 10px; - @include u.font($size: var(--font-size-small)); - } - - &__trigger { - display: block; - width: 45px; - height: 45px; - background-color: transparent; - border: none; - border-radius: 8px; - cursor: pointer; - } - - &__wrapper { - position: absolute; - top: 100%; - right: 0; - } -} diff --git a/src/components/atoms/ColorPicker/ColorPicker.stories.tsx b/src/components/atoms/ColorPicker/ColorPicker.stories.tsx deleted file mode 100644 index 5349a3b..0000000 --- a/src/components/atoms/ColorPicker/ColorPicker.stories.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { Meta, Story } from '@storybook/react'; -import { ColorPicker, ColorPickerProps } from './ColorPicker'; - -export default { - title: 'Components/Atoms/ColorPicker', - component: ColorPicker, -} as Meta; - -const Template: Story = (args) => ; - -export const Primary = Template.bind({}); -Primary.args = {}; diff --git a/src/components/atoms/ColorPicker/ColorPicker.tsx b/src/components/atoms/ColorPicker/ColorPicker.tsx deleted file mode 100644 index 46fd040..0000000 --- a/src/components/atoms/ColorPicker/ColorPicker.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { FC, useState } from 'react'; -import { ChromePicker, ColorResult } from 'react-color'; - -import './ColorPicker.scss'; - -export type ColorPickerProps = { - onChange?: (color: ColorResult) => void; -}; - -export const ColorPicker: FC = ({ onChange }) => { - const [isPickerVisible, setIsPickerVisible] = useState(false); - const [selectedColor, setSelectedColor] = useState('#CE09FF'); - - const handleChange = (color: ColorResult) => { - setSelectedColor(color.hex); - - if (onChange) { - onChange(color); - } - }; - - const handleChangeIsPickerVisible = () => { - setIsPickerVisible((prevState) => !prevState); - }; - - return ( -
- - Color: {selectedColor.toUpperCase()} - -
- ); -}; diff --git a/src/components/atoms/ColorPicker/index.ts b/src/components/atoms/ColorPicker/index.ts deleted file mode 100644 index 9fad629..0000000 --- a/src/components/atoms/ColorPicker/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { ColorPicker } from './ColorPicker'; diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts index 9a60498..a7d9f1e 100644 --- a/src/components/atoms/index.ts +++ b/src/components/atoms/index.ts @@ -23,7 +23,6 @@ export { FaqItem } from './FaqItem'; export { SocialList, type SocialListProps } from './SocialList'; export { FanItem } from './FanItem'; export type { FanItemProps } from './FanItem'; -export { ColorPicker } from './ColorPicker'; export { CalendarItem } from './CalendarItem'; export { Modal } from './Modal'; export { StatusText } from './StatusText'; diff --git a/yarn.lock b/yarn.lock index 483d9d5..9e31abd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1681,7 +1681,6 @@ __metadata: "@types/jest": ^27.4.1 "@types/node": ^17.0.22 "@types/react": ^17.0.41 - "@types/react-color": 3.0.6 "@types/react-dom": ^17.0.14 "@typescript-eslint/eslint-plugin": ^5.16.0 "@typescript-eslint/parser": ^5.16.0 @@ -1706,7 +1705,6 @@ __metadata: postcss-url: ^10.1.3 prettier: ^2.6.0 react: ^17.0.2 - react-color: ^2.19.3 react-dom: ^17.0.2 react-scripts: ^5.0.0 rimraf: ^3.0.2 @@ -2029,15 +2027,6 @@ __metadata: languageName: node linkType: hard -"@icons/material@npm:^0.2.4": - version: 0.2.4 - resolution: "@icons/material@npm:0.2.4" - peerDependencies: - react: "*" - checksum: 24baa360cb83f7e1a9e6784ac11185d57eb895b0efd3070ec915693378330f35ff9feb248f650b9649fa3e1045601286585dc05795a4c734d4849b33900351ee - languageName: node - linkType: hard - "@istanbuljs/load-nyc-config@npm:^1.0.0": version: 1.1.0 resolution: "@istanbuljs/load-nyc-config@npm:1.1.0" @@ -4693,16 +4682,6 @@ __metadata: languageName: node linkType: hard -"@types/react-color@npm:3.0.6": - version: 3.0.6 - resolution: "@types/react-color@npm:3.0.6" - dependencies: - "@types/react": "*" - "@types/reactcss": "*" - checksum: 8cd881d6eb725190be942c1d71f7917d3dd1b418417740f64fa6c03ae3ba16cb91d07c4b3b348cf5bae20071c8ca5d4aaf514c9a5318077d5e50bd782a5e8da2 - languageName: node - linkType: hard - "@types/react-dom@npm:*, @types/react-dom@npm:^17.0.14": version: 17.0.14 resolution: "@types/react-dom@npm:17.0.14" @@ -4732,15 +4711,6 @@ __metadata: languageName: node linkType: hard -"@types/reactcss@npm:*": - version: 1.2.6 - resolution: "@types/reactcss@npm:1.2.6" - dependencies: - "@types/react": "*" - checksum: f4711d707a1af653178c8941080e989a945feb0c529d848fed36687ee5e8a462cda183383caadf8848497b5c03bec16e6cdf22fc70462913d8d706cabb597130 - languageName: node - linkType: hard - "@types/resolve@npm:1.17.1": version: 1.17.1 resolution: "@types/resolve@npm:1.17.1" @@ -13138,13 +13108,6 @@ __metadata: languageName: node linkType: hard -"lodash-es@npm:^4.17.15": - version: 4.17.21 - resolution: "lodash-es@npm:4.17.21" - checksum: 05cbffad6e2adbb331a4e16fbd826e7faee403a1a04873b82b42c0f22090f280839f85b95393f487c1303c8a3d2a010048bf06151a6cbe03eee4d388fb0a12d2 - languageName: node - linkType: hard - "lodash.camelcase@npm:^4.3.0": version: 4.3.0 resolution: "lodash.camelcase@npm:4.3.0" @@ -13194,7 +13157,7 @@ __metadata: languageName: node linkType: hard -"lodash@npm:^4.0.1, lodash@npm:^4.17.11, lodash@npm:^4.17.14, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.7.0": +"lodash@npm:^4.17.11, lodash@npm:^4.17.14, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.7.0": version: 4.17.21 resolution: "lodash@npm:4.17.21" checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7 @@ -13388,13 +13351,6 @@ __metadata: languageName: node linkType: hard -"material-colors@npm:^1.2.1": - version: 1.2.6 - resolution: "material-colors@npm:1.2.6" - checksum: 72d005ccccb82bab68eef3cd757e802668634fc86976dedb9fc564ce994f2d3258273766b7efecb7404a0031969e2d72201a1b74169763f0a53c0dd8d649209f - languageName: node - linkType: hard - "mathml-tag-names@npm:^2.1.3": version: 2.1.3 resolution: "mathml-tag-names@npm:2.1.3" @@ -16164,7 +16120,7 @@ __metadata: languageName: node linkType: hard -"prop-types@npm:^15.0.0, prop-types@npm:^15.5.10, prop-types@npm:^15.6.0, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1": +"prop-types@npm:^15.0.0, prop-types@npm:^15.6.0, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1": version: 15.8.1 resolution: "prop-types@npm:15.8.1" dependencies: @@ -16419,23 +16375,6 @@ __metadata: languageName: node linkType: hard -"react-color@npm:^2.19.3": - version: 2.19.3 - resolution: "react-color@npm:2.19.3" - dependencies: - "@icons/material": ^0.2.4 - lodash: ^4.17.15 - lodash-es: ^4.17.15 - material-colors: ^1.2.1 - prop-types: ^15.5.10 - reactcss: ^1.2.0 - tinycolor2: ^1.4.1 - peerDependencies: - react: "*" - checksum: 40b49e1aa2ab27a099cc37a3fa2d5bb906b8def4dbe2d922c0e42365e386d82b03f9b06a2b29a44a51f1e114cef72e61c0ba0740581a128d951936ea4617429b - languageName: node - linkType: hard - "react-colorful@npm:^5.1.2": version: 5.5.1 resolution: "react-colorful@npm:5.5.1" @@ -16779,15 +16718,6 @@ __metadata: languageName: node linkType: hard -"reactcss@npm:^1.2.0": - version: 1.2.3 - resolution: "reactcss@npm:1.2.3" - dependencies: - lodash: ^4.0.1 - checksum: c53e386a0881f1477e1cff661f6a6ad4c662230941f3827862193ac30f9b75cdf7bc7b4c7e5ca543d3e4e80fee1a3e9fa0056c206b1c0423726c41773ab3fe45 - languageName: node - linkType: hard - "read-pkg-up@npm:^7.0.1": version: 7.0.1 resolution: "read-pkg-up@npm:7.0.1" @@ -19152,13 +19082,6 @@ __metadata: languageName: node linkType: hard -"tinycolor2@npm:^1.4.1": - version: 1.4.2 - resolution: "tinycolor2@npm:1.4.2" - checksum: 57ed262e08815a4ab0ed933edafdbc6555a17081781766149813b44a080ecbe58b3ee281e81c0e75b42e4d41679f138cfa98eabf043f829e0683c04adb12c031 - languageName: node - linkType: hard - "tmpl@npm:1.0.5": version: 1.0.5 resolution: "tmpl@npm:1.0.5"