CRT flow previews (#4692)

* Setup preview

* 🉑 POC Line chart (#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

packages/atlas/package.json

@@ -43,6 +43,7 @@
     "@livesession/sdk": "^1.1.4",
     "@loadable/component": "^5.15.2",
     "@lottiefiles/react-lottie-player": "^3.5.0",
+    "@nivo/line": "^0.83.0",
     "@segment/analytics-next": "^1.53.0",
     "@sentry/react": "^7.53.1",
     "@talismn/connect-wallets": "^1.2.1",

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;

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) => (

packages/atlas/src/components/_charts/LineChart/LineChart.stories.tsx

@@ -0,0 +1,71 @@
+import { Meta, StoryFn } from '@storybook/react'
+
+import { LineChart, LineChartProps } from '@/components/_charts/LineChart/LineChart'
+
+export default {
+  title: 'charts/LineChart',
+  component: LineChart,
+} as Meta<LineChartProps>
+
+const Template: StoryFn<LineChartProps> = (args) => (
+  <div style={{ height: 400 }}>
+    <LineChart {...args} />
+  </div>
+)
+
+export const Default = Template.bind({})
+
+const data = [
+  {
+    'id': 'japan',
+    'color': 'dodgerblue',
+    'data': [
+      {
+        'x': 'Now',
+        'y': 50,
+      },
+      {
+        'x': '2M',
+        'y': 50,
+      },
+      {
+        'x': '3M',
+        'y': 50,
+      },
+    ],
+  },
+  {
+    'id': 'korea',
+    'color': 'dodgerblue',
+    'data': [
+      {
+        'x': '3M',
+        'y': 50,
+      },
+      {
+        'x': '3M',
+        'y': 130,
+      },
+      {
+        'x': '6M',
+        'y': 160,
+      },
+      {
+        'x': '9M',
+        'y': 190,
+      },
+      {
+        'x': '12M',
+        'y': 220,
+      },
+      {
+        'x': '15M',
+        'y': 250,
+      },
+    ],
+  },
+]
+
+Default.args = {
+  data,
+}

packages/atlas/src/components/_charts/LineChart/LineChart.tsx

@@ -0,0 +1,75 @@
+import styled from '@emotion/styled'
+import { LineSvgProps, Point, ResponsiveLine } from '@nivo/line'
+import { ReactNode } from 'react'
+
+import { cVar, sizes } from '@/styles'
+
+const defaultJoystreamProps: Omit<LineSvgProps, 'data'> = {
+  isInteractive: true,
+  useMesh: true,
+  enablePoints: false,
+  lineWidth: 2,
+  margin: { top: 50, right: 110, bottom: 50, left: 60 },
+  yScale: {
+    type: 'linear',
+    min: 'auto',
+    max: 'auto',
+    stacked: false,
+    reverse: false,
+  },
+  axisTop: null,
+  axisRight: null,
+  axisBottom: {
+    tickSize: 10,
+    tickPadding: 10,
+  },
+  axisLeft: {
+    tickSize: 5,
+    tickPadding: 5,
+    tickValues: 6,
+  },
+  colors: (d) => d.color,
+  theme: {
+    tooltip: {
+      container: {
+        background: cVar('colorBackgroundStrong'),
+      },
+    },
+    axis: {
+      ticks: {
+        line: {
+          stroke: cVar('colorBackgroundAlpha'),
+        },
+        text: {
+          fill: cVar('colorTextMuted'),
+          font: cVar('typographyDesktopT100'),
+        },
+      },
+    },
+    grid: {
+      line: {
+        stroke: cVar('colorBackgroundAlpha'),
+      },
+    },
+  },
+}
+export type LineChartProps = {
+  tooltip?: (point: Point) => ReactNode
+} & Omit<LineSvgProps, 'tooltip'>
+export const LineChart = (props: LineChartProps) => {
+  return (
+    <ResponsiveLine
+      {...defaultJoystreamProps}
+      {...props}
+      tooltip={(point) => (
+        <ChartTooltip>{props.tooltip ? props.tooltip(point.point) : String(point.point.data.y)}</ChartTooltip>
+      )}
+    />
+  )
+}
+
+const ChartTooltip = styled.div`
+  background-color: ${cVar('colorBackgroundStrong')};
+  padding: ${sizes(1)} ${sizes(2)};
+  border-radius: ${cVar('radiusSmall')};
+`

packages/atlas/src/components/_charts/LineChart/index.ts

@@ -0,0 +1 @@
+export * from './LineChart'

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>

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

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