From 9c911f0018bc3ba87163a1804d04f9f44656d04d Mon Sep 17 00:00:00 2001 From: Ishaan28malik Date: Thu, 18 Apr 2024 19:39:03 +0530 Subject: [PATCH 1/7] feat: added ui for inheritance slider stop component --- .changeset/perfect-books-notice.md | 7 +++ .../cysync-core/src/dialogs/HistoryDialog.tsx | 1 + .../Password/ChangePassword/context/index.tsx | 2 +- .../Password/RemovePassword/context/index.tsx | 2 +- .../Password/SetPassword/context/index.tsx | 2 +- .../src/dialogs/Send/Dialogs/Recipient.tsx | 5 +- .../ui/src/components/atoms/SliderStop.tsx | 62 +++++++++++++++++++ packages/ui/src/components/atoms/index.ts | 1 + .../ui/src/stories/atoms/SliderStop.stoes.tsx | 20 ++++++ .../Layouts/OnboardingLayout.stories.tsx | 1 + 10 files changed, 98 insertions(+), 5 deletions(-) create mode 100644 .changeset/perfect-books-notice.md create mode 100644 packages/ui/src/components/atoms/SliderStop.tsx create mode 100644 packages/ui/src/stories/atoms/SliderStop.stoes.tsx diff --git a/.changeset/perfect-books-notice.md b/.changeset/perfect-books-notice.md new file mode 100644 index 000000000..80d523d80 --- /dev/null +++ b/.changeset/perfect-books-notice.md @@ -0,0 +1,7 @@ +--- +'@cypherock/cysync-core': patch +'@cypherock/cysync-ui': patch +'@cypherock/cysync-desktop': patch +--- + +ui changes for inheritance sliderStop component diff --git a/packages/cysync-core/src/dialogs/HistoryDialog.tsx b/packages/cysync-core/src/dialogs/HistoryDialog.tsx index 64a754dce..f0c3e86cd 100644 --- a/packages/cysync-core/src/dialogs/HistoryDialog.tsx +++ b/packages/cysync-core/src/dialogs/HistoryDialog.tsx @@ -40,6 +40,7 @@ import { useAppDispatch, useAppSelector, } from '~/store'; + import { LoaderDialog } from '../components'; export interface IHistoryDialogProps { diff --git a/packages/cysync-core/src/dialogs/Password/ChangePassword/context/index.tsx b/packages/cysync-core/src/dialogs/Password/ChangePassword/context/index.tsx index 156413c6f..a5cad5db0 100644 --- a/packages/cysync-core/src/dialogs/Password/ChangePassword/context/index.tsx +++ b/packages/cysync-core/src/dialogs/Password/ChangePassword/context/index.tsx @@ -18,8 +18,8 @@ import { useAppSelector, } from '~/store'; import { validatePassword } from '~/utils'; - import logger from '~/utils/logger'; + import { ChangePasswordSuccess, CreateNewPassword } from '../Dialogs'; export interface ChangePasswordDialogContextInterface { diff --git a/packages/cysync-core/src/dialogs/Password/RemovePassword/context/index.tsx b/packages/cysync-core/src/dialogs/Password/RemovePassword/context/index.tsx index 8d8bdac6c..ce237301d 100644 --- a/packages/cysync-core/src/dialogs/Password/RemovePassword/context/index.tsx +++ b/packages/cysync-core/src/dialogs/Password/RemovePassword/context/index.tsx @@ -17,8 +17,8 @@ import { useAppDispatch, useAppSelector, } from '~/store'; - import logger from '~/utils/logger'; + import { ConfirmPassword, RemovePasswordSuccess } from '../Dialogs'; export interface RemovePasswordDialogContextInterface { diff --git a/packages/cysync-core/src/dialogs/Password/SetPassword/context/index.tsx b/packages/cysync-core/src/dialogs/Password/SetPassword/context/index.tsx index 4270ebc0d..04e6d0ab6 100644 --- a/packages/cysync-core/src/dialogs/Password/SetPassword/context/index.tsx +++ b/packages/cysync-core/src/dialogs/Password/SetPassword/context/index.tsx @@ -18,8 +18,8 @@ import { useAppSelector, } from '~/store'; import { validatePassword } from '~/utils'; - import logger from '~/utils/logger'; + import { AddPassword, SetPasswordSuccess } from '../Dialogs'; export interface SetPasswordDialogContextInterface { diff --git a/packages/cysync-core/src/dialogs/Send/Dialogs/Recipient.tsx b/packages/cysync-core/src/dialogs/Send/Dialogs/Recipient.tsx index 4aa2935c4..8d7c10c40 100644 --- a/packages/cysync-core/src/dialogs/Send/Dialogs/Recipient.tsx +++ b/packages/cysync-core/src/dialogs/Send/Dialogs/Recipient.tsx @@ -19,11 +19,12 @@ import React, { useCallback, useEffect, useState } from 'react'; import { LoaderDialog } from '~/components'; import { selectLanguage, useAppSelector } from '~/store'; - import logger from '~/utils/logger'; -import { useSendDialog } from '../context'; + import { AddressAndAmountSection, FeeSection } from './Components'; +import { useSendDialog } from '../context'; + export const Recipient: React.FC = () => { const { onNext, diff --git a/packages/ui/src/components/atoms/SliderStop.tsx b/packages/ui/src/components/atoms/SliderStop.tsx new file mode 100644 index 000000000..044511ed2 --- /dev/null +++ b/packages/ui/src/components/atoms/SliderStop.tsx @@ -0,0 +1,62 @@ +import React, { FC, useState } from 'react'; +import { styled } from 'styled-components'; + +export interface SliderStopProps { + Label: string; + isSelected: boolean; + isActive: boolean; +} + +export const SliderStop: FC = ({ + Label, + isSelected, + isActive, +}) => { + const [isHover, setIsHover] = useState(false); + + const Container = styled.div` + font-family: Poppins; + font-size: 12px; + font-weight: 500; + line-height: 18px; + text-align: center; + width: 45px; + height: 66px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + `; + + const StyledContainer = styled.div` + width: 24px; + height: 24px; + border-radius: 50%; + margin-top: ${!isActive && (isSelected || isHover) ? '0px' : '8px'}; + border: 8px solid + ${!isActive && (isSelected || isHover) ? ' #3c3329' : 'inherit'}; + // border-image-source: linear-gradient(90deg, rgba(233, 184, 115, 0.13) 0.19%, rgba(254, 221, 143, 0.13) 37.17%, rgba(183, 141, 81, 0.13) 100.19%)1; + background: ${isActive || isSelected || isHover + ? 'linear-gradient(90deg, #E9B873 0.19%, #FEDD8F 37.17%, #B78D51 100.19%)' + : '#39322C'}; + `; + + const Text = styled.div` + background: ${isSelected && !isHover + ? 'linear-gradient(90deg, #E9B873 0.19%, #FEDD8F 37.17%, #B78D51 100.19%)' + : '#8B8682'}; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + `; + + return ( + setIsHover(true)} + onClick={() => setIsHover(true)} + onMouseLeave={() => setIsHover(false)} + > + + {!isActive && (isHover || isSelected) ? Label : ''} + + ); +}; diff --git a/packages/ui/src/components/atoms/index.ts b/packages/ui/src/components/atoms/index.ts index 1636f66d9..b1a598584 100644 --- a/packages/ui/src/components/atoms/index.ts +++ b/packages/ui/src/components/atoms/index.ts @@ -33,3 +33,4 @@ export * from './MainAppStyles'; export * from './Tooltip'; export * from './Video'; export * from './AdvanceTextDiaplay'; +export * from './SliderStop'; diff --git a/packages/ui/src/stories/atoms/SliderStop.stoes.tsx b/packages/ui/src/stories/atoms/SliderStop.stoes.tsx new file mode 100644 index 000000000..c0241b515 --- /dev/null +++ b/packages/ui/src/stories/atoms/SliderStop.stoes.tsx @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { SliderStop } from '../../components'; + +const meta: Meta = { + component: SliderStop, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Info: Story = { + args: { + Label: '5 Years', + isSelected: false, + isActive: false, + }, +}; diff --git a/packages/ui/src/stories/molecules/Layouts/OnboardingLayout.stories.tsx b/packages/ui/src/stories/molecules/Layouts/OnboardingLayout.stories.tsx index 785d6e1b9..5f8944c07 100644 --- a/packages/ui/src/stories/molecules/Layouts/OnboardingLayout.stories.tsx +++ b/packages/ui/src/stories/molecules/Layouts/OnboardingLayout.stories.tsx @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; + import { LogoOutlinedAsideImage } from '../../../assets'; import { OnboardingLayout } from '../../../components'; From 210738ada637f17ab14f49b4b25d62b61e146b33 Mon Sep 17 00:00:00 2001 From: Ishaan28malik Date: Wed, 5 Jun 2024 22:12:22 +0530 Subject: [PATCH 2/7] feat: pr review changes --- .../ui/src/components/atoms/SliderStop.tsx | 105 +++++++++++------- ...rStop.stoes.tsx => SliderStop.stories.tsx} | 10 +- 2 files changed, 70 insertions(+), 45 deletions(-) rename packages/ui/src/stories/atoms/{SliderStop.stoes.tsx => SliderStop.stories.tsx} (71%) diff --git a/packages/ui/src/components/atoms/SliderStop.tsx b/packages/ui/src/components/atoms/SliderStop.tsx index 044511ed2..d87213908 100644 --- a/packages/ui/src/components/atoms/SliderStop.tsx +++ b/packages/ui/src/components/atoms/SliderStop.tsx @@ -1,62 +1,81 @@ -import React, { FC, useState } from 'react'; +import React, { CSSProperties, FC, useState } from 'react'; import { styled } from 'styled-components'; export interface SliderStopProps { Label: string; - isSelected: boolean; isActive: boolean; } -export const SliderStop: FC = ({ - Label, - isSelected, - isActive, -}) => { - const [isHover, setIsHover] = useState(false); - - const Container = styled.div` - font-family: Poppins; - font-size: 12px; - font-weight: 500; - line-height: 18px; - text-align: center; - width: 45px; - height: 66px; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - `; +const ContainerStyle: CSSProperties = { + fontFamily: 'Poppins', + fontSize: '12px', + fontWeight: 500, + lineHeight: '18px', + textAlign: 'center', + width: '45px', + height: '66px', + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + alignItems: 'center', +}; - const StyledContainer = styled.div` - width: 24px; - height: 24px; - border-radius: 50%; - margin-top: ${!isActive && (isSelected || isHover) ? '0px' : '8px'}; - border: 8px solid - ${!isActive && (isSelected || isHover) ? ' #3c3329' : 'inherit'}; - // border-image-source: linear-gradient(90deg, rgba(233, 184, 115, 0.13) 0.19%, rgba(254, 221, 143, 0.13) 37.17%, rgba(183, 141, 81, 0.13) 100.19%)1; - background: ${isActive || isSelected || isHover +const StyledContainer = styled.div<{ + isActive: boolean; + isSelected: boolean; + isHover: boolean; +}>` + width: 24px; + height: 24px; + border-radius: 50%; + margin-top: ${({ isActive, isSelected, isHover }) => + !isActive && (isSelected || isHover) ? '0px' : '8px'}; + border: 8px solid + ${({ isActive, isSelected, isHover }) => + !isActive && (isSelected || isHover) ? '#3c3329' : 'inherit'}; + background: ${({ isActive, isSelected, isHover }) => + isActive || isSelected || isHover ? 'linear-gradient(90deg, #E9B873 0.19%, #FEDD8F 37.17%, #B78D51 100.19%)' : '#39322C'}; - `; +`; - const Text = styled.div` - background: ${isSelected && !isHover +const TextStyle = (isSelected: boolean, isHover: boolean): CSSProperties => ({ + background: + isSelected && !isHover ? 'linear-gradient(90deg, #E9B873 0.19%, #FEDD8F 37.17%, #B78D51 100.19%)' - : '#8B8682'}; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - `; + : '#8B8682', + WebkitBackgroundClip: 'text', + WebkitTextFillColor: 'transparent', +}); + +export const SliderStop: FC = ({ Label, isActive }) => { + const [isHover, setIsHover] = useState(false); + const [isSelected, setisSelected] = useState(false); + + const handleKeyDown = (event: React.KeyboardEvent) => { + if (event.key === 'Enter' || event.key === ' ') { + setisSelected(!isSelected); + } + }; return ( - setIsHover(true)} - onClick={() => setIsHover(true)} + onClick={() => setisSelected(!isSelected)} onMouseLeave={() => setIsHover(false)} + onKeyDown={handleKeyDown} + role="button" + tabIndex={0} > - - {!isActive && (isHover || isSelected) ? Label : ''} - + +
+ {!isActive && (isHover || isSelected) ? Label : ''} +
+ ); }; diff --git a/packages/ui/src/stories/atoms/SliderStop.stoes.tsx b/packages/ui/src/stories/atoms/SliderStop.stories.tsx similarity index 71% rename from packages/ui/src/stories/atoms/SliderStop.stoes.tsx rename to packages/ui/src/stories/atoms/SliderStop.stories.tsx index c0241b515..b5d242168 100644 --- a/packages/ui/src/stories/atoms/SliderStop.stoes.tsx +++ b/packages/ui/src/stories/atoms/SliderStop.stories.tsx @@ -11,10 +11,16 @@ export default meta; type Story = StoryObj; -export const Info: Story = { +export const Default: Story = { args: { Label: '5 Years', - isSelected: false, isActive: false, }, }; + +export const Active: Story = { + args: { + Label: '5 Years', + isActive: true, + }, +}; From 4d61c743da3362c51cecd65c76983b2764971127 Mon Sep 17 00:00:00 2001 From: Ishaan28malik Date: Sat, 29 Jun 2024 03:22:30 +0530 Subject: [PATCH 3/7] feat: pr review changes --- .changeset/perfect-books-notice.md | 7 ------- packages/ui/src/components/atoms/index.ts | 1 - .../ui/src/components/{atoms => molecules}/SliderStop.tsx | 4 ++-- packages/ui/src/components/molecules/index.ts | 1 + .../stories/{atoms => molecules}/SliderStop.stories.tsx | 0 5 files changed, 3 insertions(+), 10 deletions(-) delete mode 100644 .changeset/perfect-books-notice.md rename packages/ui/src/components/{atoms => molecules}/SliderStop.tsx (98%) rename packages/ui/src/stories/{atoms => molecules}/SliderStop.stories.tsx (100%) diff --git a/.changeset/perfect-books-notice.md b/.changeset/perfect-books-notice.md deleted file mode 100644 index 80d523d80..000000000 --- a/.changeset/perfect-books-notice.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@cypherock/cysync-core': patch -'@cypherock/cysync-ui': patch -'@cypherock/cysync-desktop': patch ---- - -ui changes for inheritance sliderStop component diff --git a/packages/ui/src/components/atoms/index.ts b/packages/ui/src/components/atoms/index.ts index b1a598584..1636f66d9 100644 --- a/packages/ui/src/components/atoms/index.ts +++ b/packages/ui/src/components/atoms/index.ts @@ -33,4 +33,3 @@ export * from './MainAppStyles'; export * from './Tooltip'; export * from './Video'; export * from './AdvanceTextDiaplay'; -export * from './SliderStop'; diff --git a/packages/ui/src/components/atoms/SliderStop.tsx b/packages/ui/src/components/molecules/SliderStop.tsx similarity index 98% rename from packages/ui/src/components/atoms/SliderStop.tsx rename to packages/ui/src/components/molecules/SliderStop.tsx index d87213908..d3b42beeb 100644 --- a/packages/ui/src/components/atoms/SliderStop.tsx +++ b/packages/ui/src/components/molecules/SliderStop.tsx @@ -25,8 +25,8 @@ const StyledContainer = styled.div<{ isSelected: boolean; isHover: boolean; }>` - width: 24px; - height: 24px; + width: 40px; + height: 40px; border-radius: 50%; margin-top: ${({ isActive, isSelected, isHover }) => !isActive && (isSelected || isHover) ? '0px' : '8px'}; diff --git a/packages/ui/src/components/molecules/index.ts b/packages/ui/src/components/molecules/index.ts index 242f21b15..dbb8af280 100644 --- a/packages/ui/src/components/molecules/index.ts +++ b/packages/ui/src/components/molecules/index.ts @@ -39,3 +39,4 @@ export * from './Topbar'; export * from './UpdateBar'; export * from './WallectConnect'; export * from './WalletDialogMainContainer'; +export * from './SliderStop'; diff --git a/packages/ui/src/stories/atoms/SliderStop.stories.tsx b/packages/ui/src/stories/molecules/SliderStop.stories.tsx similarity index 100% rename from packages/ui/src/stories/atoms/SliderStop.stories.tsx rename to packages/ui/src/stories/molecules/SliderStop.stories.tsx From 63d56c6896794e1041943f1f47bedeebca691528 Mon Sep 17 00:00:00 2001 From: Ishaan28malik Date: Thu, 4 Jul 2024 02:39:17 +0530 Subject: [PATCH 4/7] feat: variables used --- packages/ui/src/components/molecules/SliderStop.tsx | 11 +++++------ packages/ui/src/themes/color.styled.ts | 3 +++ 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/ui/src/components/molecules/SliderStop.tsx b/packages/ui/src/components/molecules/SliderStop.tsx index d3b42beeb..6e63dd306 100644 --- a/packages/ui/src/components/molecules/SliderStop.tsx +++ b/packages/ui/src/components/molecules/SliderStop.tsx @@ -1,5 +1,6 @@ import React, { CSSProperties, FC, useState } from 'react'; import { styled } from 'styled-components'; +import { colors } from '../../themes/color.styled'; export interface SliderStopProps { Label: string; @@ -32,18 +33,16 @@ const StyledContainer = styled.div<{ !isActive && (isSelected || isHover) ? '0px' : '8px'}; border: 8px solid ${({ isActive, isSelected, isHover }) => - !isActive && (isSelected || isHover) ? '#3c3329' : 'inherit'}; + !isActive && (isSelected || isHover) ? colors.active.main : 'inherit'}; background: ${({ isActive, isSelected, isHover }) => isActive || isSelected || isHover - ? 'linear-gradient(90deg, #E9B873 0.19%, #FEDD8F 37.17%, #B78D51 100.19%)' - : '#39322C'}; + ? colors.text.gold + : colors.background.separator}; `; const TextStyle = (isSelected: boolean, isHover: boolean): CSSProperties => ({ background: - isSelected && !isHover - ? 'linear-gradient(90deg, #E9B873 0.19%, #FEDD8F 37.17%, #B78D51 100.19%)' - : '#8B8682', + isSelected && !isHover ? colors.text.gold : colors.background.muted, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', }); diff --git a/packages/ui/src/themes/color.styled.ts b/packages/ui/src/themes/color.styled.ts index 9ae764c25..b25b80cb5 100644 --- a/packages/ui/src/themes/color.styled.ts +++ b/packages/ui/src/themes/color.styled.ts @@ -21,6 +21,9 @@ export const colors = { info: { main: '#F1AE4A', }, + active: { + main: '#3c3329', + }, warning: { main: '#FF624C', }, From a82106edc18758c56305a3bd8d2555c9572a56d2 Mon Sep 17 00:00:00 2001 From: moayaan1911 Date: Tue, 23 Jul 2024 08:35:12 +0530 Subject: [PATCH 5/7] feat(inheritance): updated ui --- .../molecules/SliderDeck/SliderDeck.tsx | 90 +++++++++++++++++++ .../molecules/{ => SliderDeck}/SliderStop.tsx | 28 ++++-- .../components/molecules/SliderDeck/index.ts | 1 + packages/ui/src/components/molecules/index.ts | 3 +- .../stories/molecules/SliderDeck.stories.tsx | 41 +++++++++ 5 files changed, 157 insertions(+), 6 deletions(-) create mode 100644 packages/ui/src/components/molecules/SliderDeck/SliderDeck.tsx rename packages/ui/src/components/molecules/{ => SliderDeck}/SliderStop.tsx (79%) create mode 100644 packages/ui/src/components/molecules/SliderDeck/index.ts create mode 100644 packages/ui/src/stories/molecules/SliderDeck.stories.tsx diff --git a/packages/ui/src/components/molecules/SliderDeck/SliderDeck.tsx b/packages/ui/src/components/molecules/SliderDeck/SliderDeck.tsx new file mode 100644 index 000000000..b986e04bd --- /dev/null +++ b/packages/ui/src/components/molecules/SliderDeck/SliderDeck.tsx @@ -0,0 +1,90 @@ +import React, { FC, useState } from 'react'; +import { styled } from 'styled-components'; +import { colors } from '../../../themes/color.styled'; +import { SliderStop } from './SliderStop'; + +const SliderContainer = styled.div` + position: relative; + width: 628px; + padding: var(--Subscription-Years, 1px) 0px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + gap: 10px; +`; + +const LineSegment = styled.div<{ isActive: boolean }>` + position: absolute; + height: 4px; + background-color: ${({ isActive }) => + isActive ? colors.background.gold : colors.background.separator}; +`; + +const StopContainer = styled.div<{ left: string }>` + position: absolute; + top: -25px; + left: ${({ left }) => left}; +`; +const TextContainer = styled.div` + margin-top: 8px; + color: ${colors.background.gold}; + font-family: 'Poppins', sans-serif; + font-size: 12px; + font-weight: 500; + line-height: 18px; + text-align: center; + width: 45px; + position: absolute; + top: 50px; +`; +interface SliderProps { + selectedYear: number; +} + +export const SliderDeck: FC = ({ + selectedYear: initialSelectedYear, +}) => { + const [selectedYear, setSelectedYear] = useState(initialSelectedYear); + + const stops = [ + { label: '1 Year', isActive: selectedYear >= 1 }, + { label: '2 Years', isActive: selectedYear >= 2 }, + { label: '3 Years', isActive: selectedYear >= 3 }, + { label: '4 Years', isActive: selectedYear >= 4 }, + { label: '5 Years', isActive: selectedYear >= 5 }, + ]; + + const stopPositions = ['0%', '25%', '50%', '75%', '100%']; + + return ( + + {stopPositions.map((_, index) => ( + index + 1} + style={{ + left: stopPositions[index], + width: + index < stopPositions.length - 1 + ? `calc(${stopPositions[index + 1]} - ${stopPositions[index]})` + : '0%', + }} + /> + ))} + {stops.map((stop, index) => ( + + setSelectedYear(index + 1)} + />{' '} + {stop.isActive && {stop.label}} + + ))} + + ); +}; diff --git a/packages/ui/src/components/molecules/SliderStop.tsx b/packages/ui/src/components/molecules/SliderDeck/SliderStop.tsx similarity index 79% rename from packages/ui/src/components/molecules/SliderStop.tsx rename to packages/ui/src/components/molecules/SliderDeck/SliderStop.tsx index 6e63dd306..35e41738e 100644 --- a/packages/ui/src/components/molecules/SliderStop.tsx +++ b/packages/ui/src/components/molecules/SliderDeck/SliderStop.tsx @@ -1,10 +1,11 @@ -import React, { CSSProperties, FC, useState } from 'react'; +import React, { CSSProperties, FC, useEffect, useState } from 'react'; import { styled } from 'styled-components'; -import { colors } from '../../themes/color.styled'; +import { colors } from '../../../themes/color.styled'; export interface SliderStopProps { Label: string; isActive: boolean; + onClick: () => void; } const ContainerStyle: CSSProperties = { @@ -19,6 +20,9 @@ const ContainerStyle: CSSProperties = { flexDirection: 'column', justifyContent: 'space-between', alignItems: 'center', + position: 'absolute', + top: '0', + zIndex: 8, }; const StyledContainer = styled.div<{ @@ -47,13 +51,24 @@ const TextStyle = (isSelected: boolean, isHover: boolean): CSSProperties => ({ WebkitTextFillColor: 'transparent', }); -export const SliderStop: FC = ({ Label, isActive }) => { +export const SliderStop: FC = ({ + Label, + isActive, + onClick, +}) => { const [isHover, setIsHover] = useState(false); const [isSelected, setisSelected] = useState(false); + useEffect(() => { + if (!isActive) { + setisSelected(false); + } + }, [isActive]); + const handleKeyDown = (event: React.KeyboardEvent) => { if (event.key === 'Enter' || event.key === ' ') { - setisSelected(!isSelected); + setisSelected(true); + onClick(); } }; @@ -61,7 +76,10 @@ export const SliderStop: FC = ({ Label, isActive }) => {
setIsHover(true)} - onClick={() => setisSelected(!isSelected)} + onClick={() => { + setisSelected(true); + onClick(); + }} onMouseLeave={() => setIsHover(false)} onKeyDown={handleKeyDown} role="button" diff --git a/packages/ui/src/components/molecules/SliderDeck/index.ts b/packages/ui/src/components/molecules/SliderDeck/index.ts new file mode 100644 index 000000000..8044c1feb --- /dev/null +++ b/packages/ui/src/components/molecules/SliderDeck/index.ts @@ -0,0 +1 @@ +export * from './SliderDeck'; diff --git a/packages/ui/src/components/molecules/index.ts b/packages/ui/src/components/molecules/index.ts index c47475ceb..339246dcc 100644 --- a/packages/ui/src/components/molecules/index.ts +++ b/packages/ui/src/components/molecules/index.ts @@ -40,5 +40,6 @@ export * from './Topbar'; export * from './UpdateBar'; export * from './WallectConnect'; export * from './WalletDialogMainContainer'; -export * from './SliderStop'; +export * from './SliderDeck/SliderStop'; export * from './SimpleJsonView'; +export * from './SliderDeck'; diff --git a/packages/ui/src/stories/molecules/SliderDeck.stories.tsx b/packages/ui/src/stories/molecules/SliderDeck.stories.tsx new file mode 100644 index 000000000..355251680 --- /dev/null +++ b/packages/ui/src/stories/molecules/SliderDeck.stories.tsx @@ -0,0 +1,41 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { SliderDeck } from '../../components'; + +const meta: Meta = { + component: SliderDeck, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + selectedYear: 1, + }, +}; + +export const TwoYears: Story = { + args: { + selectedYear: 2, + }, +}; + +export const ThreeYears: Story = { + args: { + selectedYear: 3, + }, +}; + +export const FourYears: Story = { + args: { + selectedYear: 4, + }, +}; + +export const FiveYears: Story = { + args: { + selectedYear: 5, + }, +}; From 0656b1482f209e11b580070e26a58b07abd1c2a5 Mon Sep 17 00:00:00 2001 From: moayaan1911 Date: Tue, 23 Jul 2024 08:38:37 +0530 Subject: [PATCH 6/7] chore: lint changes --- .../ui/src/components/molecules/SliderDeck/SliderDeck.tsx | 4 +++- .../ui/src/components/molecules/SliderDeck/SliderStop.tsx | 1 + packages/ui/src/stories/molecules/SliderDeck.stories.tsx | 1 + 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/components/molecules/SliderDeck/SliderDeck.tsx b/packages/ui/src/components/molecules/SliderDeck/SliderDeck.tsx index b986e04bd..1d8da2e25 100644 --- a/packages/ui/src/components/molecules/SliderDeck/SliderDeck.tsx +++ b/packages/ui/src/components/molecules/SliderDeck/SliderDeck.tsx @@ -1,8 +1,10 @@ import React, { FC, useState } from 'react'; import { styled } from 'styled-components'; -import { colors } from '../../../themes/color.styled'; + import { SliderStop } from './SliderStop'; +import { colors } from '../../../themes/color.styled'; + const SliderContainer = styled.div` position: relative; width: 628px; diff --git a/packages/ui/src/components/molecules/SliderDeck/SliderStop.tsx b/packages/ui/src/components/molecules/SliderDeck/SliderStop.tsx index 35e41738e..0480585fc 100644 --- a/packages/ui/src/components/molecules/SliderDeck/SliderStop.tsx +++ b/packages/ui/src/components/molecules/SliderDeck/SliderStop.tsx @@ -1,5 +1,6 @@ import React, { CSSProperties, FC, useEffect, useState } from 'react'; import { styled } from 'styled-components'; + import { colors } from '../../../themes/color.styled'; export interface SliderStopProps { diff --git a/packages/ui/src/stories/molecules/SliderDeck.stories.tsx b/packages/ui/src/stories/molecules/SliderDeck.stories.tsx index 355251680..5d8b57a1e 100644 --- a/packages/ui/src/stories/molecules/SliderDeck.stories.tsx +++ b/packages/ui/src/stories/molecules/SliderDeck.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; + import { SliderDeck } from '../../components'; const meta: Meta = { From 257332f240369a0666129a8e4cb35f4cfcbe00e4 Mon Sep 17 00:00:00 2001 From: moayaan1911 Date: Sat, 27 Jul 2024 05:14:47 +0530 Subject: [PATCH 7/7] feat(inheritance): slider deck ui drag --- .../molecules/SliderDeck/SliderDeck.tsx | 40 +++++++++++++++---- .../molecules/SliderDeck/SliderStop.tsx | 39 +++++++++++------- 2 files changed, 58 insertions(+), 21 deletions(-) diff --git a/packages/ui/src/components/molecules/SliderDeck/SliderDeck.tsx b/packages/ui/src/components/molecules/SliderDeck/SliderDeck.tsx index 1d8da2e25..c3b2722d1 100644 --- a/packages/ui/src/components/molecules/SliderDeck/SliderDeck.tsx +++ b/packages/ui/src/components/molecules/SliderDeck/SliderDeck.tsx @@ -1,10 +1,8 @@ -import React, { FC, useState } from 'react'; +import React, { FC, useState, useRef } from 'react'; import { styled } from 'styled-components'; import { SliderStop } from './SliderStop'; -import { colors } from '../../../themes/color.styled'; - const SliderContainer = styled.div` position: relative; width: 628px; @@ -14,13 +12,16 @@ const SliderContainer = styled.div` justify-content: center; align-items: flex-start; gap: 10px; + cursor: pointer; `; const LineSegment = styled.div<{ isActive: boolean }>` position: absolute; height: 4px; - background-color: ${({ isActive }) => - isActive ? colors.background.gold : colors.background.separator}; + background-color: ${({ isActive, theme }) => + isActive + ? theme.palette.background.golden + : theme.palette.background.separator}; `; const StopContainer = styled.div<{ left: string }>` @@ -28,9 +29,10 @@ const StopContainer = styled.div<{ left: string }>` top: -25px; left: ${({ left }) => left}; `; + const TextContainer = styled.div` margin-top: 8px; - color: ${colors.background.gold}; + color: ${({ theme }) => theme.palette.background.golden}; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 500; @@ -40,6 +42,7 @@ const TextContainer = styled.div` position: absolute; top: 50px; `; + interface SliderProps { selectedYear: number; } @@ -48,6 +51,17 @@ export const SliderDeck: FC = ({ selectedYear: initialSelectedYear, }) => { const [selectedYear, setSelectedYear] = useState(initialSelectedYear); + const sliderRef = useRef(null); + + const handleMouseMove = (event: MouseEvent) => { + if (sliderRef.current) { + const sliderRect = sliderRef.current.getBoundingClientRect(); + const mousePosition = + (event.clientX - sliderRect.left) / sliderRect.width; + const newSelectedYear = Math.round(mousePosition * 5); + setSelectedYear(newSelectedYear); + } + }; const stops = [ { label: '1 Year', isActive: selectedYear >= 1 }, @@ -60,7 +74,18 @@ export const SliderDeck: FC = ({ const stopPositions = ['0%', '25%', '50%', '75%', '100%']; return ( - + { + sliderRef.current?.addEventListener('mousemove', handleMouseMove); + }} + onMouseUp={() => { + sliderRef.current?.removeEventListener('mousemove', handleMouseMove); + }} + onMouseLeave={() => { + sliderRef.current?.removeEventListener('mousemove', handleMouseMove); + }} + > {stopPositions.map((_, index) => ( = ({ Label={stop.label} isActive={stop.isActive} onClick={() => setSelectedYear(index + 1)} + isSelected={selectedYear === index + 1} />{' '} {stop.isActive && {stop.label}} diff --git a/packages/ui/src/components/molecules/SliderDeck/SliderStop.tsx b/packages/ui/src/components/molecules/SliderDeck/SliderStop.tsx index 0480585fc..369d1c425 100644 --- a/packages/ui/src/components/molecules/SliderDeck/SliderStop.tsx +++ b/packages/ui/src/components/molecules/SliderDeck/SliderStop.tsx @@ -6,6 +6,7 @@ import { colors } from '../../../themes/color.styled'; export interface SliderStopProps { Label: string; isActive: boolean; + isSelected: boolean; onClick: () => void; } @@ -31,14 +32,21 @@ const StyledContainer = styled.div<{ isSelected: boolean; isHover: boolean; }>` - width: 40px; - height: 40px; + width: ${({ isSelected }) => (isSelected ? '48px' : '40px')}; + height: ${({ isSelected }) => (isSelected ? '48px' : '40px')}; border-radius: 50%; - margin-top: ${({ isActive, isSelected, isHover }) => - !isActive && (isSelected || isHover) ? '0px' : '8px'}; - border: 8px solid - ${({ isActive, isSelected, isHover }) => - !isActive && (isSelected || isHover) ? colors.active.main : 'inherit'}; + margin-top: ${({ isActive, isSelected, isHover }) => { + if (isSelected) { + return '-1px'; + } + if (!isActive && isHover) { + return '0px'; + } + return '8px'; + }}; + border: ${({ isSelected }) => (isSelected ? '8px solid' : 'none')}; + border-color: ${({ isActive, isSelected, isHover }) => + isSelected || (!isActive && isHover) ? colors.active.main : 'inherit'}; background: ${({ isActive, isSelected, isHover }) => isActive || isSelected || isHover ? colors.text.gold @@ -50,25 +58,31 @@ const TextStyle = (isSelected: boolean, isHover: boolean): CSSProperties => ({ isSelected && !isHover ? colors.text.gold : colors.background.muted, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', + marginTop: '8px', + textAlign: 'center', + fontFamily: 'Poppins', + fontSize: '12px', + fontStyle: ' normal', + fontWeight: '500', + lineHeight: ' normal', }); export const SliderStop: FC = ({ Label, isActive, + isSelected, onClick, }) => { const [isHover, setIsHover] = useState(false); - const [isSelected, setisSelected] = useState(false); useEffect(() => { if (!isActive) { - setisSelected(false); + setIsHover(false); } }, [isActive]); const handleKeyDown = (event: React.KeyboardEvent) => { if (event.key === 'Enter' || event.key === ' ') { - setisSelected(true); onClick(); } }; @@ -77,10 +91,7 @@ export const SliderStop: FC = ({
setIsHover(true)} - onClick={() => { - setisSelected(true); - onClick(); - }} + onClick={onClick} onMouseLeave={() => setIsHover(false)} onKeyDown={handleKeyDown} role="button"