Developing locally

This guide will walk through quickly how to get up and developing locally.



Each component should be built using the following technologies.
  • TypeScript
  • React Aria, a library of React hooks that provide accessible UI primitives for your design system.
  • React Stately, a library of React hooks that provide cross-platform state management for your design system.
  • Framer Motion as a animation library
  • Storybook for component development
  • Cypress for tests

#Using Generators

#Creating a New Component

Use component generator - yarn g or yarn plop This generator creates a new directory with the following format:
├─ index.ts
├─ ComponentName.tsx
├─ ComponentName.test.tsx
└─ ComponentName.stories.tsx

#Barrel Pattern

The pattern of having an index file in the directory is sometimes called the barrel pattern--index.ts exports relevant modules from the directory. This will make it easier to search for your component (avoid dozens of index.ts search results) and make it still nice to import: import { Button } from './buttons/Button' vs import { Button } from './buttons' Component files should be named in PascalCase and you should avoid default exports.

#Using Framer-motion

Motion is a production-ready motion library for React from Framer. It brings declarative animations, effortless layout transitions and gestures while maintaining HTML and SVG semantics. Framer motion website
const variants = { hidden: { opacity: 0 }, visible: { opacity: 1 }, } return <motion.div initial="hidden" animate="visible" variants={variants} />
In Arc Design system will look as the following in dialog component:
<OverlayProvider> <BaseDialogOverlay initial={{ opacity: 0 }} animate={{ opacity: 0.6 }} transition={{ duration: 0.15, ease: [0.2, 0, 0.38, 0.9] }} exit={{ opacity: 0 }} /> <m.div initial={{ scale: 0.95, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} exit={{ opacity: 0, scale: 0.95 }} transition={{ duration: 0.095 }} > <FocusScope contain restoreFocus autoFocus> <BaseDialogContent {...overlayProps} {...dialogProps} {...modalProps} ref={ref} size={size} > <BaseDialogClose> <IconButton aria-label="Close" label="Close" position="bottom" variant="ghost" onPress={onDismiss} icon={<Close />} /> </BaseDialogClose> <VStack gap="$3" css={{ height: '100%', flexDirection: 'column', }} > <DialogTitleContext.Provider value={titleProps}> {children} </DialogTitleContext.Provider> </VStack> </BaseDialogContent> </FocusScope> </m.div> </OverlayProvider>
Copyright 2021 Arc XP