CRT flow previews (Joystream#4692)

* Setup preview * 🉑 POC Line chart (Joystream#4495) * Add nivo package * Add line chart * Add story for line chart * Fix styling * Chart setup * Style first preview * Correct chart previews * Fix slider mask * Scroll down of form change * Minor improvements on chart
WRadoslaw · Apr 22, 2024 · 65844b2 · 65844b2
1 parent d5beff9
commit 65844b2
Show file tree

Hide file tree

Showing 12 changed files with 356 additions and 26 deletions.
diff --git a/packages/atlas/src/components/CrtDrawer/CrtDrawer.styles.ts b/packages/atlas/src/components/CrtDrawer/CrtDrawer.styles.ts
@@ -11,17 +11,23 @@ export const StyledBottomDrawer = styled(BottomDrawer)`
 
 export const Container = styled.div`
   display: grid;
-  height: 100%;
+  overflow: auto;
 
   ${media.md} {
+    height: 100%;
     grid-template-columns: 1fr 1fr;
   }
 `
 
 export const PreviewContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 100%;
   background-color: #000;
   height: 100%;
+  overflow: hidden;
+
   ${media.md} {
     grid-column: 1;
     grid-row: 1;

diff --git a/packages/atlas/src/components/CrtDrawer/CrtDrawer.tsx b/packages/atlas/src/components/CrtDrawer/CrtDrawer.tsx
@@ -1,4 +1,4 @@
-import { Fragment, ReactNode } from 'react'
+import { Fragment, MutableRefObject, ReactNode } from 'react'
 
 import { SvgActionChevronR } from '@/assets/icons'
 import { BottomDrawerProps } from '@/components/_overlays/BottomDrawer'
@@ -19,13 +19,14 @@ export type CrtDrawerProps<T = string> = {
   preview?: ReactNode
   steps: T[]
   activeStep: number
+  formWrapperRef?: MutableRefObject<HTMLDivElement | null>
 } & BottomDrawerProps
-export const CrtDrawer = ({ children, preview, steps, activeStep, ...drawerProps }: CrtDrawerProps) => {
+export const CrtDrawer = ({ children, preview, steps, activeStep, formWrapperRef, ...drawerProps }: CrtDrawerProps) => {
   const smMatch = useMediaMatch('sm')
   return (
     <StyledBottomDrawer {...drawerProps}>
       <Container>
-        <FormContainer>
+        <FormContainer ref={formWrapperRef}>
           <StepWrapper>
             <StepContainer>
               {steps.map((step, idx) => (

diff --git a/packages/atlas/src/components/_charts/LineChart/LineChart.tsx b/packages/atlas/src/components/_charts/LineChart/LineChart.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled'
 import { LineSvgProps, Point, ResponsiveLine } from '@nivo/line'
+import { ReactNode } from 'react'
 
-import { Text } from '@/components/Text'
 import { cVar, sizes } from '@/styles'
 
 const defaultJoystreamProps: Omit<LineSvgProps, 'data'> = {
@@ -54,19 +54,15 @@ const defaultJoystreamProps: Omit<LineSvgProps, 'data'> = {
   },
 }
 export type LineChartProps = {
-  tooltip?: (point: Point) => string
+  tooltip?: (point: Point) => ReactNode
 } & Omit<LineSvgProps, 'tooltip'>
 export const LineChart = (props: LineChartProps) => {
   return (
     <ResponsiveLine
       {...defaultJoystreamProps}
       {...props}
       tooltip={(point) => (
-        <ChartTooltip>
-          <Text variant="t100" as="p" color="colorTextStrong">
-            {props.tooltip ? props.tooltip(point.point) : String(point.point.data.y)}
-          </Text>
-        </ChartTooltip>
+        <ChartTooltip>{props.tooltip ? props.tooltip(point.point) : String(point.point.data.y)}</ChartTooltip>
       )}
     />
   )
@@ -75,4 +71,5 @@ export const LineChart = (props: LineChartProps) => {
 const ChartTooltip = styled.div`
   background-color: ${cVar('colorBackgroundStrong')};
   padding: ${sizes(1)} ${sizes(2)};
+  border-radius: ${cVar('radiusSmall')};
 `
diff --git a/packages/atlas/src/components/_crt/CreateTokenDrawer/CreateTokenDrawer.tsx b/packages/atlas/src/components/_crt/CreateTokenDrawer/CreateTokenDrawer.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from 'react'
+import { ReactNode, useMemo, useRef, useState } from 'react'
 import { flushSync } from 'react-dom'
 import { CSSTransition, SwitchTransition } from 'react-transition-group'
 
@@ -41,6 +41,8 @@ export const CreateTokenDrawer = ({ show, onClose }: CreateTokenDrawerProps) =>
     useState<NonNullable<CrtDrawerProps['actionBar']>['primaryButton']>()
   const nodeRef = useRef<HTMLDivElement>(null)
   const [isGoingBack, setIsGoingBack] = useState(false)
+  const [preview, setPreview] = useState<ReactNode>()
+  const formRef = useRef<HTMLDivElement>(null)
   const [openDialog, closeDialog] = useConfirmationModal({
     type: 'warning',
     title: 'Discard changes?',
@@ -60,6 +62,12 @@ export const CreateTokenDrawer = ({ show, onClose }: CreateTokenDrawerProps) =>
     },
   })
 
+  const scrollFormDown = () => {
+    if (formRef.current) {
+      formRef.current.scrollTo({ top: formRef.current.scrollHeight, behavior: 'smooth' })
+    }
+  }
+
   const secondaryButton = useMemo(() => {
     switch (activeStep) {
       case CREATE_TOKEN_STEPS.setup:
@@ -90,6 +98,13 @@ export const CreateTokenDrawer = ({ show, onClose }: CreateTokenDrawerProps) =>
     }
   }, [activeStep, onClose, openDialog])
 
+  const commonProps = {
+    setPrimaryButtonProps,
+    setPreview,
+    scrollFormDown,
+    form: formData.current,
+  }
+
   return (
     <CrtDrawer
       steps={steps}
@@ -101,6 +116,8 @@ export const CreateTokenDrawer = ({ show, onClose }: CreateTokenDrawerProps) =>
         primaryButton: primaryButtonProps ?? {},
         secondaryButton,
       }}
+      preview={preview}
+      formWrapperRef={formRef}
     >
       <SwitchTransition mode="out-in">
         <CSSTransition
@@ -116,27 +133,23 @@ export const CreateTokenDrawer = ({ show, onClose }: CreateTokenDrawerProps) =>
           <div ref={nodeRef}>
             {activeStep === CREATE_TOKEN_STEPS.setup && (
               <SetupTokenStep
-                form={formData.current}
+                {...commonProps}
                 onSubmit={(data) => {
                   formData.current = { ...formData.current, ...data }
                   setActiveStep(CREATE_TOKEN_STEPS.issuance)
                 }}
-                setPrimaryButtonProps={setPrimaryButtonProps}
               />
             )}
             {activeStep === CREATE_TOKEN_STEPS.issuance && (
               <TokenIssuanceStep
-                form={formData.current}
+                {...commonProps}
                 onSubmit={(data) => {
                   formData.current = { ...formData.current, ...data }
                   setActiveStep(CREATE_TOKEN_STEPS.summary)
                 }}
-                setPrimaryButtonProps={setPrimaryButtonProps}
               />
             )}
-            {activeStep === CREATE_TOKEN_STEPS.summary && (
-              <TokenSummaryStep form={formData.current} setPrimaryButtonProps={setPrimaryButtonProps} />
-            )}
+            {activeStep === CREATE_TOKEN_STEPS.summary && <TokenSummaryStep {...commonProps} />}
           </div>
         </CSSTransition>
       </SwitchTransition>

diff --git a/packages/atlas/src/components/_crt/CreateTokenDrawer/CreateTokenDrawer.types.ts b/packages/atlas/src/components/_crt/CreateTokenDrawer/CreateTokenDrawer.types.ts
@@ -9,7 +9,7 @@ export type SetupStepForm = {
 
 export type IssuanceStepForm = {
   creatorIssueAmount?: number
-  assuranceType: 'safe' | 'risky' | 'secure' | 'default' | 'custom'
+  assuranceType: 'safe' | 'risky' | 'secure' | 'custom'
   cliff: '0' | '1' | '3' | '6' | null
   vesting: '0' | '1' | '3' | '6' | null
   firstPayout?: number

diff --git a/packages/atlas/src/components/_crt/CreateTokenDrawer/steps/SetupTokenStep.tsx b/packages/atlas/src/components/_crt/CreateTokenDrawer/steps/SetupTokenStep.tsx
@@ -1,8 +1,14 @@
+import { useLayoutEffect } from 'react'
 import { Controller, useForm } from 'react-hook-form'
 
 import { SvgActionLock, SvgActionUnlocked } from '@/assets/icons'
 import { Text } from '@/components/Text'
 import { SetupStepForm } from '@/components/_crt/CreateTokenDrawer/CreateTokenDrawer.types'
+import {
+  BottomPlaceholder,
+  LeftPlaceholder,
+  WidgetPreviewContainer,
+} from '@/components/_crt/CreateTokenDrawer/steps/styles'
 import { CrtFormWrapper } from '@/components/_crt/CrtFormWrapper'
 import { FormField } from '@/components/_inputs/FormField'
 import { Input } from '@/components/_inputs/Input'
@@ -12,6 +18,8 @@ import { useMountEffect } from '@/hooks/useMountEffect'
 
 import { CommonStepProps } from './types'
 
+import { CrtBasicInfoWidget } from '../../CrtBasicInfoWidget/CrtBasicInfoWidget'
+
 const accessOptions = [
   {
     label: 'Anyone',
@@ -31,23 +39,51 @@ type SetupTokenStepProps = {
   onSubmit: (form: SetupStepForm) => void
 } & CommonStepProps
 
-export const SetupTokenStep = ({ setPrimaryButtonProps, onSubmit, form }: SetupTokenStepProps) => {
+export const SetupTokenStep = ({ setPrimaryButtonProps, onSubmit, form, setPreview }: SetupTokenStepProps) => {
   const {
     register,
     control,
     handleSubmit,
+    watch,
     formState: { errors },
   } = useForm<SetupStepForm>({
     defaultValues: form,
   })
 
+  const watchedForm = watch()
+
   useMountEffect(() => {
     setPrimaryButtonProps({
       text: 'Next step',
       onClick: () => handleSubmit(onSubmit)(),
     })
   })
 
+  useLayoutEffect(() => {
+    setPreview(
+      <WidgetPreviewContainer>
+        <LeftPlaceholder />
+        <CrtBasicInfoWidget
+          name={watchedForm.name}
+          creatorReward={watchedForm.creatorReward}
+          revenueShare={watchedForm.revenueShare}
+        />
+        <BottomPlaceholder>
+          <svg xmlns="http://www.w3.org/2000/svg" width="371" height="163" viewBox="0 0 371 163" fill="none">
+            <path
+              d="M0 41C0 34.3726 5.37258 29 12 29C18.6274 29 24 34.3726 24 41C24 47.6274 18.6274 53 12 53C5.37258 53 0 47.6274 0 41Z"
+              fill="#181C20"
+            />
+            <path d="M0 0H91V16H0V0Z" fill="#181C20" />
+            <path d="M0 69H49V85H0V69Z" fill="#181C20" />
+            <path d="M36 25H147V57H36V25Z" fill="#181C20" />
+            <path d="M0 109H371V163H0V109Z" fill="#14171B" />
+          </svg>
+        </BottomPlaceholder>
+      </WidgetPreviewContainer>
+    )
+  }, [setPreview, watchedForm.creatorReward, watchedForm.name, watchedForm.revenueShare])
+
   return (
     <CrtFormWrapper title="Set up your token" subtitle="Enter basic token information and settings." learnMoreLink="">
       <FormField