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 <irshadjsr21@gmail.com>
Cypherock · Jul 12, 2024 · f60bd49 · f60bd49
1 parent ecb4319
commit f60bd49
Show file tree

Hide file tree

Showing 10 changed files with 386 additions and 0 deletions.
diff --git 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
diff --git a/packages/ui/src/assets/images/common/oneInMany2Hover.svg b/packages/ui/src/assets/images/common/oneInMany2Hover.svg
diff --git a/packages/ui/src/assets/images/common/oneInmany1Default.svg b/packages/ui/src/assets/images/common/oneInmany1Default.svg
diff --git a/packages/ui/src/assets/images/common/oneInmany1Hover.svg b/packages/ui/src/assets/images/common/oneInmany1Hover.svg
diff --git a/packages/ui/src/components/molecules/OneInMany.tsx 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<OneInManyProps, 'title' | 'description'> & { 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<OneInManyProps> = ({
+  title,
+  description,
+  styleType,
+  ...restProps
+}) => {
+  const [isSelected, setisSelected] = useState(false);
+
+  return (
+    <StyledContainer
+      isSelected={isSelected}
+      styleType={styleType}
+      onClick={() => setisSelected(!isSelected)}
+      {...restProps}
+    >
+      <Flex align="center" direction="row" height="100%" mx="32px">
+        <StyledTitle>{title}</StyledTitle>
+        <StyledDescription>{description}</StyledDescription>
+      </Flex>
+    </StyledContainer>
+  );
+};
+
+OneInMany.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  styleType: PropTypes.oneOf<OneInManyStyleType>(['1', '2']).isRequired,
+};
diff --git 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
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { OneInMany } from '../../components';
+
+const meta: Meta<typeof OneInMany> = {
+  component: OneInMany,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+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',
+  },
+};