[ShadCN]: Migrate CreateAccount Screen

src/components/Simulator/screens/CreateAccount/RecoveryPhraseNotice.tsx

@@ -1,31 +1,18 @@
-import React from "react"
 import { motion } from "framer-motion"
-import { Box, Text } from "@chakra-ui/react"
-
-const MotionBox = motion(Box)
 
 export const RecoveryPhraseNotice = () => (
-  <MotionBox
+  <motion.div
+    className="h-full bg-background-highlight px-4 py-8 text-sm md:px-8 md:text-md [&_p]:mb-4 [&_p]:md:mb-6"
     initial={{ opacity: 0 }}
     animate={{ opacity: 1 }}
     transition={{ duration: 0.25 }}
-    py={8}
-    px={{ base: 4, md: 8 }}
-    h="full"
-    bg="background.highlight"
-    fontSize={{ base: "sm", md: "md" }}
-    sx={{ p: { mb: { base: 4, md: 6 } } }}
   >
-    <Text fontSize={{ base: "xl", md: "2xl" }} lineHeight={8} fontWeight="bold">
-      Recovery phrase
-    </Text>
-    <Text>
+    <p className="text-xl font-bold leading-8 md:text-2xl">Recovery phrase</p>
+    <p>
       Any person knowing this <strong>secret</strong> recovery phrase can make
       transactions on behalf of your account.
-    </Text>
-    <Text>
-      Wallet app providers do not have access to your account—only you do.
-    </Text>
-    <Text fontWeight="bold">You must back it up safely.</Text>
-  </MotionBox>
+    </p>
+    <p>Wallet app providers do not have access to your account—only you do.</p>
+    <p className="font-bold">You must back it up safely.</p>
+  </motion.div>
 )

src/components/Simulator/screens/CreateAccount/WelcomeScreen.tsx

@@ -1,39 +1,23 @@
-import React from "react"
 import { motion } from "framer-motion"
-import { Flex, Icon, Text } from "@chakra-ui/react"
+
+import { Flex } from "@/components/ui/flex"
 
 import { EthGlyphIcon } from "../../icons"
 
 const MotionFlex = motion(Flex)
 
 export const WelcomeScreen = () => (
   <MotionFlex
-    direction="column"
-    alignItems="center"
-    pt={16}
-    h="full"
-    bg="background.highlight"
+    className="h-full flex-col items-center bg-background-highlight pt-16"
     initial={{ opacity: 0 }}
     animate={{ opacity: 1 }}
     transition={{ duration: 0.8 }}
   >
-    <Icon
-      as={EthGlyphIcon}
-      color="body.base"
-      height={{ base: "110px", md: "190px" }}
-      w="auto"
-      my={4}
-    />
-    <Text
-      fontSize="2xl"
-      textAlign="center"
-      px={{ base: 4, md: 8 }}
-      lineHeight={8}
-    >
+    {/* TODO: remove important flag from classes when icons are migrated */}
+    <EthGlyphIcon className="!my-4 !h-[110px] !w-auto !text-body md:!h-[190px]" />
+    <p className="px-4 text-center text-2xl leading-8 md:px-8">
       Welcome to
-      <Text as="span" display="block" fontWeight="bold">
-        wallet simulator
-      </Text>
-    </Text>
+      <span className="block font-bold">wallet simulator</span>
+    </p>
   </MotionFlex>
 )

src/components/Simulator/screens/CreateAccount/WordDisplay.tsx

@@ -1,67 +1,37 @@
-import React from "react"
-import {
-  Box,
-  type BoxProps,
-  ListItem,
-  type ListItemProps,
-} from "@chakra-ui/react"
+import React, { type HTMLAttributes } from "react"
+import { tv, type VariantProps } from "tailwind-variants"
 
-const wordStyleVariants = {
-  initial: {
-    borderBottom: "1px",
-    borderColor: "body.medium",
-    mt: { base: 1.5, md: 4 },
-    zIndex: 1,
-  },
-  complete: {
-    borderRadius: "md",
-    bg: "background.base",
-    color: "body.base",
-    border: "1px",
-    borderColor: "body.base",
-    px: 2,
-  },
-  active: {
-    borderRadius: "md",
-    bg: "background.base",
-    color: "primary.base",
-    border: "1px",
-    borderColor: "primary.base",
-    px: 2,
-  },
-  incomplete: {
-    borderRadius: "md",
-    bg: "background.base",
-    color: "body.base",
-    border: "1px",
-    borderColor: "body.light",
-    px: 2,
-  },
-  disabled: {
-    borderRadius: "md",
-    bg: "body.light",
-    color: "body.medium",
-    px: 2,
-    border: "1px",
-    borderColor: "transparent",
+import { ListItem } from "@/components/ui/list"
+
+const wordStyle = tv({
+  base: "[--word-display-transition:color_1s_ease-in-out,_background-color_1s_ease-in-out,_border-color_1s_ease-in-out] transition-(--word-display-transition) relative",
+  variants: {
+    variant: {
+      initial: "border-b border-body-medium mt-1.5 md:mt-4 z-[1]",
+      complete: "rounded-md bg-background text-body border border-body px-2",
+      active:
+        "rounded-md bg-background text-primary border border-primary px-2",
+      incomplete:
+        "rounded-md bg-background text-body border border-body-light px-2",
+      disabled:
+        "rounded-md bg-body-light text-body-medium px-2 border border-transparent",
+    },
   },
-} as const
+})
 
-export type WordStyleVariant = keyof typeof wordStyleVariants
+export type WordStyleVariantProps = VariantProps<typeof wordStyle>
 
-type WordDisplayProps = Pick<ListItemProps, "children"> &
-  Omit<BoxProps, "children"> & {
-    variant: WordStyleVariant
-  }
+type WordDisplayProps = WordStyleVariantProps & HTMLAttributes<HTMLDivElement>
 
 export const WordDisplay = ({
   children,
   variant,
+  className,
   ...boxProps
 }: WordDisplayProps) => (
-  <Box {...wordStyleVariants[variant]} {...boxProps}>
-    <ListItem fontSize="sm" lineHeight={9} mb={0} listStylePos="inside">
+  <div className={wordStyle({ variant, className })} {...boxProps}>
+    <ListItem className="mb-0 list-inside text-sm leading-9">
       {children}
     </ListItem>
-  </Box>
+  </div>
 )

src/components/Simulator/screens/CreateAccount/WordList.tsx

@@ -1,18 +1,16 @@
 import React from "react"
 import { motion } from "framer-motion"
-import {
-  Grid,
-  type GridProps,
-  type ListProps,
-  OrderedList,
-} from "@chakra-ui/react"
+
+import { OrderedList } from "@/components/ui/list"
+
+import { cn } from "@/lib/utils/cn"
 
 import {
   DELAY_MULTIPLIER_MS,
   EXTRA_DELAY_MS,
   WORDS_REQUIRED,
 } from "./constants"
-import { WordDisplay, type WordStyleVariant } from "./WordDisplay"
+import { WordDisplay, type WordStyleVariantProps } from "./WordDisplay"
 
 type WordListProps = {
   words: Array<string>
@@ -22,27 +20,22 @@ type WordListProps = {
 // ?: Consider not generating
 // ?: Keep in mind translations... English only? BIP39 Langs only?
 export const WordList = ({ words, wordsSelected }: WordListProps) => {
-  const sharedStyles = {
-    display: "flex",
-    flexDirection: "column",
-    columnGap: 8,
-    rowGap: 3,
-    m: 0,
-  } as const
-  const styleVariants = {
-    initial: {
-      rowGap: 0,
-    },
-  } as const
+  const sharedClasses = "m-0 flex flex-col gap-y-3 gap-x-8"
+
+  const classVariants = {
+    initial: "gap-x-0",
+  }
+
+  const styles = cn(
+    sharedClasses,
+    classVariants[typeof wordsSelected === "undefined" ? "initial" : ""]
+  )
 
-  const variantStyles: GridProps =
-    styleVariants[typeof wordsSelected === "undefined" ? "initial" : ""] ?? {}
-  const styles = { ...sharedStyles, ...variantStyles } as ListProps
   const splitIndex = Math.floor(words.length / 2)
 
   const wordMapping = (word: string, index: number): React.ReactElement => {
     const initialWordDisplay = typeof wordsSelected === "undefined"
-    const variant: WordStyleVariant = initialWordDisplay
+    const variant: WordStyleVariantProps["variant"] = initialWordDisplay
       ? "initial"
       : index === wordsSelected
         ? "active"
@@ -63,13 +56,7 @@ export const WordList = ({ words, wordsSelected }: WordListProps) => {
       <WordDisplay
         key={word + index}
         variant={variant}
-        transition={`
-          color 1s ease-in-out,
-          background-color 1s ease-in-out,
-          border-color 1s ease-in-out
-        `}
-        transitionDelay={numToMsString(getDelayFromIndex(index))}
-        position="relative"
+        className={`[--display-delay:${numToMsString(getDelayFromIndex(index))}] delay-(--display-delay)`}
       >
         {showLabel && (
           <>
@@ -85,17 +72,13 @@ export const WordList = ({ words, wordsSelected }: WordListProps) => {
             </motion.span>
             {initialWordDisplay && (
               <motion.div
+                className="absolute inset-0 backdrop-blur-[2px]"
                 initial={{ opacity: 1 }}
                 animate={{ opacity: 0 }}
                 transition={{
                   duration: 0.25,
                   delay: getDelayFromIndex(index, true) * 1e-3,
                 }}
-                style={{
-                  position: "absolute",
-                  inset: 0,
-                  backdropFilter: "blur(2px)",
-                }}
               />
             )}
           </>
@@ -105,19 +88,13 @@ export const WordList = ({ words, wordsSelected }: WordListProps) => {
   }
 
   return (
-    <Grid
-      templateColumns="repeat(2, 1fr)"
-      columnGap={7}
-      whiteSpace="nowrap"
-      px={{ base: 4, md: 8 }}
-      bg="background.base"
-    >
-      <OrderedList {...styles} start={1}>
+    <div className="grid grid-cols-2 gap-x-7 whitespace-nowrap px-4 md:px-8">
+      <OrderedList className={styles} start={1}>
         {words.map(wordMapping).slice(0, splitIndex)}
       </OrderedList>
-      <OrderedList {...styles} start={splitIndex + 1}>
+      <OrderedList className={styles} start={splitIndex + 1}>
         {words.map(wordMapping).slice(splitIndex)}
       </OrderedList>
-    </Grid>
+    </div>
   )
 }

src/components/Simulator/screens/CreateAccount/__stories__/HomeScreen.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react/*"
+import { fn } from "@storybook/test"
+
+import { HomeScreen as Component } from "../HomeScreen"
+
+const meta = {
+  title:
+    "Molecules / Display Content / Simulator / CreateAccount Screen / HomeScreen",
+  component: Component,
+  args: {
+    nav: {
+      step: 0,
+      totalSteps: 2,
+      progressStepper: fn(),
+      openPath: fn(),
+      regressStepper: fn(),
+    },
+  },
+} satisfies Meta<typeof Component>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const StepZero: Story = {}
+export const StepOne: Story = {
+  args: {
+    nav: {
+      ...meta.args.nav,
+      step: 1,
+    },
+  },
+}

src/components/Simulator/screens/CreateAccount/__stories__/RecoveryPhraseNotice.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react/*"
+
+import { RecoveryPhraseNotice as Component } from "../RecoveryPhraseNotice"
+
+const meta = {
+  title:
+    "Molecules / Display Content / Simulator / CreateAccount Screen / RecoveryPhraseNotice",
+  component: Component,
+} satisfies Meta<typeof Component>
+
+export default meta
+
+export const RecoveryPhraseNotice: StoryObj<typeof meta> = {}

src/components/Simulator/screens/CreateAccount/__stories__/WelcomeScreen.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react/*"
+
+import { WelcomeScreen as Component } from "../WelcomeScreen"
+
+const meta = {
+  title:
+    "Molecules / Display Content / Simulator / CreateAccount Screen / WelcomeScreen",
+  component: Component,
+} satisfies Meta<typeof Component>
+
+export default meta
+
+export const WelcomeScreen: StoryObj<typeof meta> = {}

src/components/Simulator/screens/CreateAccount/__stories__/WordList.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react/*"
+
+import { WordList as Component } from "../WordList"
+
+const meta = {
+  title:
+    "Molecules / Display Content / Simulator / CreateAccount Screen / WordList",
+  component: Component,
+} satisfies Meta<typeof Component>
+
+export default meta
+
+export const WordList: StoryObj<typeof meta> = {
+  args: {
+    words: ["fake", "none", "nope", "back", "stop", "halt", "cease"],
+    wordsSelected: 2,
+  },
+}