From f60bd496af6c0787234b35f9dcb3ff14af436777 Mon Sep 17 00:00:00 2001 From: Championrunner <27343592+Ishaan28malik@users.noreply.github.com> Date: Fri, 12 Jul 2024 18:42:58 +0530 Subject: [PATCH] feat: added oneinmany ui component (#437) * feat: added oneinmany ui component * feat: changes as per pr * feat: updated as per PR review * Delete packages/cysync-core-constants/dist/cjs/i18n/lang/ar-AE.json * Delete .changeset/fuzzy-stingrays-judge.md * Delete .changeset/lovely-toes-learn.md * Delete packages/cysync-core-constants/dist/cjs/constants.d.ts * Delete packages/cysync-core-constants/dist/cjs/constants.d.ts.map * Delete packages/cysync-core-constants/dist/cjs/constants.js * Delete packages/cysync-core-constants/dist/cjs/i18n/index.d.ts * Delete packages/cysync-core-constants/dist/cjs/i18n/index.d.ts.map * Delete packages/cysync-core-constants/dist/cjs/i18n/index.js * Delete packages/cysync-core-constants/dist/cjs/i18n/lang/de-DE.json * Delete packages/cysync-core-constants/dist/cjs/i18n/lang/en.json * Delete packages/cysync-core-constants/dist/cjs/i18n/lang/id-ID.json * Delete packages/cysync-core-constants/dist/cjs/i18n/lang/zh-CN.json * Delete packages/cysync-core-constants/dist/cjs/i18n/types.d.ts * Delete packages/cysync-core-constants/dist/cjs/i18n/types.d.ts.map * Delete packages/cysync-core-constants/dist/cjs/i18n/types.js * Delete packages/cysync-core-constants/dist/cjs/index.d.ts * Delete packages/cysync-core-constants/dist/cjs/index.d.ts.map * Delete packages/cysync-core-constants/dist/cjs/index.js * Delete packages/cysync-core-constants/dist/cjs/types/deviceError.d.ts * Delete packages/cysync-core-constants/dist/cjs/types/deviceError.d.ts.map * Delete packages/cysync-core-constants/dist/cjs/types/deviceError.js * Delete packages/cysync-core-constants/dist/cjs/types/index.d.ts * Delete packages/cysync-core-constants/dist/cjs/types/index.d.ts.map * Delete packages/cysync-core-constants/dist/cjs/types/index.js * Delete packages/cysync-core-constants/dist/cjs/types/serverError.d.ts * Delete packages/cysync-core-constants/dist/cjs/types/serverError.d.ts.map * Delete packages/cysync-core-constants/dist/cjs/types/serverError.js * Delete packages/cysync-core-constants/dist/esm/constants.d.ts * Delete packages/cysync-core-constants/dist/esm/constants.d.ts.map * Delete packages/cysync-core-constants/dist/esm/constants.js * Delete packages/cysync-core-constants/dist/esm/i18n/index.d.ts * Delete packages/cysync-core-constants/dist/esm/i18n/index.d.ts.map * Delete packages/cysync-core-constants/dist/esm/i18n/index.js * Delete packages/cysync-core-constants/dist/esm/i18n/lang/ar-AE.json * Delete packages/cysync-core-constants/dist/esm/i18n/lang/de-DE.json * Delete packages/cysync-core-constants/dist/esm/i18n/lang/en.json * Delete packages/cysync-core-constants/dist/esm/i18n/lang/id-ID.json * Delete packages/cysync-core-constants/dist/esm/i18n/lang/zh-CN.json * Delete packages/cysync-core-constants/dist/esm/i18n/types.d.ts * Delete packages/cysync-core-constants/dist/esm/i18n/types.d.ts.map * Delete packages/cysync-core-constants/dist/esm/i18n/types.js * Delete packages/cysync-core-constants/dist/esm/index.d.ts * Delete packages/cysync-core-constants/dist/esm/index.d.ts.map * Delete packages/cysync-core-constants/dist/esm/index.js * Delete packages/cysync-core-constants/dist/esm/types/deviceError.d.ts * Delete packages/cysync-core-constants/dist/esm/types/deviceError.d.ts.map * Delete packages/cysync-core-constants/dist/esm/types/deviceError.js * Delete packages/cysync-core-constants/dist/esm/types/index.d.ts * Delete packages/cysync-core-constants/dist/esm/types/index.d.ts.map * Delete packages/cysync-core-constants/dist/esm/types/index.js * Delete packages/cysync-core-constants/dist/esm/types/serverError.d.ts * Delete packages/cysync-core-constants/dist/esm/types/serverError.d.ts.map * Delete packages/cysync-core-constants/dist/esm/types/serverError.js * feat: pr review changes * feat: pr review changes * feat: image fixes * feat: fixes * feat: pr review changes * feat: pr review changes * feat: pr rview and added type 2 * feat: removed className * feat: variable naming * feat: ui fixes and updates * feat: ui fixes * feat: theme used * feat: fixed oneinmany component animation for style 1 --------- Co-authored-by: Md Irshad Ansari --- packages/ui/src/assets/images/common/index.ts | 8 + .../images/common/oneInMany2Default.svg | 31 +++ .../assets/images/common/oneInMany2Hover.svg | 27 ++ .../images/common/oneInmany1Default.svg | 11 + .../assets/images/common/oneInmany1Hover.svg | 11 + .../ui/src/components/molecules/OneInMany.tsx | 259 ++++++++++++++++++ packages/ui/src/components/molecules/index.ts | 1 + .../stories/molecules/OneInMany.stories.tsx | 28 ++ packages/ui/src/themes/color.styled.ts | 6 + packages/ui/src/themes/theme.styled.ts | 4 + 10 files changed, 386 insertions(+) create mode 100644 packages/ui/src/assets/images/common/oneInMany2Default.svg create mode 100644 packages/ui/src/assets/images/common/oneInMany2Hover.svg create mode 100644 packages/ui/src/assets/images/common/oneInmany1Default.svg create mode 100644 packages/ui/src/assets/images/common/oneInmany1Hover.svg create mode 100644 packages/ui/src/components/molecules/OneInMany.tsx create mode 100644 packages/ui/src/stories/molecules/OneInMany.stories.tsx diff --git a/packages/ui/src/assets/images/common/index.ts b/packages/ui/src/assets/images/common/index.ts index bd4ad8690..ac253ef87 100644 --- a/packages/ui/src/assets/images/common/index.ts +++ b/packages/ui/src/assets/images/common/index.ts @@ -44,6 +44,10 @@ import loaderIcon from './loader.png'; import cysyncLogoBig from './logo-big.svg'; import cysyncLogoSmall from './logo-small.png'; import LogoOutlinedAsideImage from './LogoOutlineAside.png'; +import oneInMany1Default from './oneInmany1Default.svg'; +import oneInMany1Hover from './oneInmany1Hover.svg'; +import oneInMany2Default from './oneInMany2Default.svg'; +import oneInMany2Hover from './oneInMany2Hover.svg'; import openExternalLink from './open-external-link.svg'; import qrImage from './qr.png'; import qrcodeIcon from './qrcode.svg'; @@ -144,4 +148,8 @@ export { UniSwapLogo, createWalletGraphics, recoverWalletFromSeedphraseGraphics, + oneInMany1Default, + oneInMany1Hover, + oneInMany2Hover, + oneInMany2Default, }; diff --git a/packages/ui/src/assets/images/common/oneInMany2Default.svg b/packages/ui/src/assets/images/common/oneInMany2Default.svg new file mode 100644 index 000000000..1da27194b --- /dev/null +++ b/packages/ui/src/assets/images/common/oneInMany2Default.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/ui/src/assets/images/common/oneInMany2Hover.svg b/packages/ui/src/assets/images/common/oneInMany2Hover.svg new file mode 100644 index 000000000..381171b08 --- /dev/null +++ b/packages/ui/src/assets/images/common/oneInMany2Hover.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/ui/src/assets/images/common/oneInmany1Default.svg b/packages/ui/src/assets/images/common/oneInmany1Default.svg new file mode 100644 index 000000000..0e48b5539 --- /dev/null +++ b/packages/ui/src/assets/images/common/oneInmany1Default.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/ui/src/assets/images/common/oneInmany1Hover.svg b/packages/ui/src/assets/images/common/oneInmany1Hover.svg new file mode 100644 index 000000000..7a3eb41de --- /dev/null +++ b/packages/ui/src/assets/images/common/oneInmany1Hover.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/ui/src/components/molecules/OneInMany.tsx b/packages/ui/src/components/molecules/OneInMany.tsx new file mode 100644 index 000000000..519fd728c --- /dev/null +++ b/packages/ui/src/components/molecules/OneInMany.tsx @@ -0,0 +1,259 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import PropTypes from 'prop-types'; +import React, { useState } from 'react'; +import { styled } from 'styled-components'; + +import { + oneInMany1Default, + oneInMany1Hover, + oneInMany2Default, + oneInMany2Hover, +} from '../../assets'; +import { ThemeType } from '../../themes'; +import { Flex } from '../atoms'; +import { WidthProps, width } from '../utils'; + +export type OneInManyStyleType = '1' | '2'; + +export interface OneInManyProps extends WidthProps { + title: string; + description: string; + styleType: OneInManyStyleType; +} + +interface BgStyleProps { + isSelected: boolean; + theme: ThemeType; +} + +const getBgStyle1 = ({ isSelected, theme }: BgStyleProps) => ` + &:before, + &:after { + color: ${theme.palette.text.white}; + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-position: initial; + background-repeat: no-repeat; + backface-visibility: hidden; + z-index: 0; + transition: opacity 0.5s ease-in-out; + background-position: right; + animation: rotateBounceOut 0.5s ease-in-out forwards; + ${isSelected && `animation: rotateBounceIn 0.5s ease-in-out forwards;`} + } + + &:before { + background-image: url(${oneInMany1Default}); + opacity: 1; + } + + &:after { + background-image: url(${oneInMany1Hover}); + opacity: 0; + } + + ${ + !isSelected && + ` + &:hover:before { + animation: rotateBounceIn 0.5s ease-in-out forwards; + opacity: 0; + } + + &:hover:after { + animation: rotateBounceIn 0.5s ease-in-out forwards; + opacity: 1; + } + ` + } + + @keyframes rotateBounceIn { + 0% { + transform: rotateZ(0deg); + } + 10% { + transform: rotateZ(10deg); + } + 20% { + transform: rotateZ(10deg); + } + 80% { + transform: rotateZ(-190deg); + } + 90% { + transform: rotateZ(-190deg); + } + 100% { + transform: rotateZ(-180deg); + } + } + + @keyframes rotateBounceOut { + 0% { + transform: rotateZ(-180deg); + } + 10% { + transform: rotateZ(-190deg); + } + 20% { + transform: rotateZ(-190deg); + } + 80% { + transform: rotateZ(10deg); + } + 90% { + transform: rotateZ(10deg); + } + 100% { + transform: rotateZ(0deg); + } + } +`; + +const getBgStyle2 = ({ isSelected, theme }: BgStyleProps) => ` + &:before, + &:after { + color: ${theme.palette.text.white}; + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-position: initial; + background-repeat: no-repeat; + transition: opacity 0.5s ease, transform 0.5s ease; + backface-visibility: hidden; + z-index: 0; + } + + &:before { + background-image: url(${oneInMany2Default}); + opacity: ${isSelected ? 0 : 1}; + transform: ${isSelected ? 'rotateY(180deg)' : 'rotateY(0deg)'}; + } + + &:after { + background-image: url(${oneInMany2Hover}); + opacity: ${isSelected ? 1 : 0}; + transform: ${isSelected ? 'rotateY(0deg)' : 'rotateY(180deg)'}; + background-position: initial; + } + + ${ + !isSelected && + ` + &:hover:before { + opacity: 0; + transform: rotateY(180deg); + } + &:hover:after { + opacity: 1; + transform: rotateY(0deg); + } + ` + } +`; + +const getBgStyleMap: Record< + OneInManyStyleType, + (props: BgStyleProps) => string +> = { + '1': getBgStyle1, + '2': getBgStyle2, +}; + +const StyledContainer = styled.div< + Omit & { isSelected: boolean } +>` + position: relative; + border: 1px solid + ${({ isSelected, theme }) => + isSelected ? `${theme.palette.border.cardSelected}` : 'transparent'}; + box-shadow: ${({ isSelected }) => + isSelected ? '0px 0px 12px 4px #1B1813 inset' : ''}; + background: ${({ theme }) => theme.palette.cardSelected}; + background-position: center; + background-repeat: no-repeat; + border-radius: 8px; + overflow: hidden; + cursor: pointer; + width: 348px; + height: 128px; + color: ${({ theme }) => theme.palette.text.white}; + transition: background 0.5s ease, box-shadow 0.5s ease; + + ${width} + + ${({ styleType, isSelected, theme }) => + getBgStyleMap[styleType]({ isSelected, theme } as any)} + + ${({ isSelected, theme }) => + !isSelected && + ` + &:hover { + background: ${theme.palette.cardHover}; + background-position: right; + + ${StyledTitle} { + position: relative; + z-index: 3; + background: ${theme.palette.title}; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + } + `} +`; + +const StyledTitle = styled.div` + font-size: 64px; + font-weight: 700; + line-height: 96px; + z-index: 3; + width: 120px; +`; + +const StyledDescription = styled.div` + width: 148px; + font-size: 12px; + font-weight: 400; + line-height: 18px; + color: ${({ theme }) => theme.palette.text.white}; + z-index: 3; + text-align: end; + margin-left: 16px; +`; + +export const OneInMany: React.FC = ({ + title, + description, + styleType, + ...restProps +}) => { + const [isSelected, setisSelected] = useState(false); + + return ( + setisSelected(!isSelected)} + {...restProps} + > + + {title} + {description} + + + ); +}; + +OneInMany.propTypes = { + title: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + styleType: PropTypes.oneOf(['1', '2']).isRequired, +}; diff --git a/packages/ui/src/components/molecules/index.ts b/packages/ui/src/components/molecules/index.ts index 83acdcb1a..fff2262e4 100644 --- a/packages/ui/src/components/molecules/index.ts +++ b/packages/ui/src/components/molecules/index.ts @@ -42,3 +42,4 @@ export * from './WallectConnect'; export * from './WalletDialogMainContainer'; export * from './Accordion'; export * from './SimpleJsonView'; +export * from './OneInMany'; diff --git a/packages/ui/src/stories/molecules/OneInMany.stories.tsx b/packages/ui/src/stories/molecules/OneInMany.stories.tsx new file mode 100644 index 000000000..a999b0a85 --- /dev/null +++ b/packages/ui/src/stories/molecules/OneInMany.stories.tsx @@ -0,0 +1,28 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { OneInMany } from '../../components'; + +const meta: Meta = { + component: OneInMany, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const StyleType1: Story = { + args: { + title: 'YES', + description: 'Description goes here', + styleType: '1', + }, +}; + +export const StyleType2: Story = { + args: { + title: 'NO', + description: 'Different description', + styleType: '2', + }, +}; diff --git a/packages/ui/src/themes/color.styled.ts b/packages/ui/src/themes/color.styled.ts index 9ae764c25..b86a6212b 100644 --- a/packages/ui/src/themes/color.styled.ts +++ b/packages/ui/src/themes/color.styled.ts @@ -17,6 +17,11 @@ export const colors = { silver: 'linear-gradient(180deg, #A2ADB3 -2.08%, #F3F1F2 34.27%, #BCC3C9 66.28%, #DCDFE4 102.08%)', stripe: 'linear-gradient(90deg, #211C18 1.69%, #242018 100%)', + cardSelected: + 'linear-gradient(285deg, rgba(96, 58, 23, 0.20) 0%, rgba(0, 0, 0, 0.00) 60.65%), #2A2827', + cardHover: + 'linear-gradient(105deg, rgba(96, 58, 23, 0.20) 0%, rgba(0, 0, 0, 0.00) 60.65%), #332F2D', + title: `linear-gradient(90deg,#e9b873 0.19%,#fedd8f 37.17%,#b78d51 100.19%)`, }, info: { main: '#F1AE4A', @@ -108,6 +113,7 @@ export const colors = { subMenuLeft: '#534B44', topbar: '#342C26', card: '#534A44', + cardSelected: `#e0bb74`, }, shadow: { dropdown: '#0f0d0b', diff --git a/packages/ui/src/themes/theme.styled.ts b/packages/ui/src/themes/theme.styled.ts index addd75215..dce68958d 100644 --- a/packages/ui/src/themes/theme.styled.ts +++ b/packages/ui/src/themes/theme.styled.ts @@ -59,6 +59,9 @@ export const theme = { shadow: { dropdown: colors.shadow.dropdown, }, + cardSelected: colors.gradients.cardSelected, + cardHover: colors.gradients.cardHover, + title: colors.gradients.title, background: { progress: colors.background.progressBar, input: colors.background.input, @@ -126,6 +129,7 @@ export const theme = { subMenuLeft: colors.border.subMenuLeft, topbar: colors.border.topbar, card: colors.border.card, + cardSelected: colors.border.cardSelected, }, contrastThreshold: 3, tonalOffset: 0.2,