Developing locally

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

#Requirements

Node v12 or higher
Yarn (this project relies on yarn workspaces

#Technologies

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:

component-name
├─ 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>