Covr Component Library

Google Sheet

Development Environment Setup

Requirements

• Figma Account
• Access to the Covr Figma Project (Jerem can provide access).

1. Clone project
2. Run yarn or yarn install to install dependencies
3. Create .env using .example.env has the template

Generate Figma Access Token

Follow the Figma Official Steps. This part is important. This is what will allow you to see the specifics of components that are built in Figma (ie: padding, margin, hex codes, etc).

Development Workflow

1. Run yarn storybook to start project.

Folder Structure

src/components

Follow this folder structure when creating a new component, src/components/ComponentName/index.tsx.

src/stories

This directory contains the code that builds the Storybook UI. There is one file that will match the name of the component that is being demoed. Button.stories.tsx is a good example of how to setup a story.

External Libraries

We are using a CSS-in-JS library called styled-components and an additional library called styled-system to help create a dynamic component system.

Button

The src/components/Button component is a greate example of how these two libraries are being used.

import styled from 'styled-components'
import {
  variant,
  compose,
  space,
  color,
  SpaceProps,
  ColorProps,
} from 'styled-system'

// Visual Props.
// These props should have direct correlation to the styled-components/styled-system part of the code.
interface BaseButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
  /**
   * Button variant. Primary indicates principal call to action.
   */
  variant?: 'primary' | 'secondary'
  /**
   * How large should the button be?
   */
  size?: 'small' | 'medium' | 'large'
}

// React Logical Props
// These props should be essentially everything else that does not deal with styled-components and the visual aspects of the component, but rather the React part of the code.
export interface ButtonProps extends BaseButtonProps {
  /**
   * Button contents
   */
  label: string
  /**
   * Optional click handler
   */
  onClick?: () => void
}

// A type union between the Prop Types that we defined above and the Types being exported by the styled-system library. (Has to do with being able to use m, mt, pb, backgroundColor, color, etc.)
export type Props = ButtonProps & SpaceProps & ColorProps

// Visual Props from above are being used here
const BaseButton = styled('button')<BaseButtonProps>(
  // Base CSS that should be universal across all possible variants
  (props) => ({
    fontFamily: props.theme.typography.type.primary,
    fontWeight: 700,
    border: 0,
    borderRadius: '3em',
    cursor: 'pointer',
    display: 'inline-block',
    lineHeight: 1,
  }),
  // Variant CSS
  variant({
    variants: {
      primary: {
        // We are able to use 'primary' here, because we have defined a key named 'primary' in the theme being exported from src/shared/theme.ts
        backgroundColor: 'primary',
        color: 'white',
      },
      secondary: {
        backgroundColor: 'transparent',
        color: '#333',
        boxShadow: 'rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset',
      },
    },
  }),
  // Size Variant CSS
  variant({
    // The prop specified below is what we will pass as a prop to BaseButton. The reason we don't specify it in the example above is because it will default to 'variant' if not specified.
    prop: 'size',
    variants: {
      small: {
        fontSize: 12,
        padding: '10px 16px',
      },
      medium: {
        fontSize: 14,
        padding: '11px 20px',
      },
      large: {
        fontSize: 16,
        padding: '12px 24px',
      },
    },
  }),
  // Style functions from styled-system that allows for dynamically updated things like margin, color, backgroundColor, etc. Use compose if using multiple style functions to help with performance.
  compose(space, color)
)

/**
 * Primary UI component for user interaction
 */
export const Button = ({
  variant = 'secondary', // setting a default variant
  size = 'medium', // setting a default size
  label,
  ...props
}: Props) => {
  return (
    <BaseButton type="button" variant={variant} size={size} {...props}>
      {label}
    </BaseButton>
  )
}

Example of what compose(space, color) provides:

import React from 'react'

const ExampleComponent = () => {
  return (
    <>
      <Button
        label="Hello World!"
        m={32} {/* set margin to 32px */}
        mt={8} {/* set margin-top to 8px */}
        pb={16} {/* set padding-bottom to 16px */}
        color="red" {/* set color to red */}
        backgroundColor="blue" {/* set backgroundColor to blue */}
      />
      <Button label="I have good spacing!" ml={16} />
    </>
  )
}

export default ExampleComponent

This level of flexibility should provide us the ability to really focus on just the component when implementing design from our UX/UI team, and not having to worry about implementation details like spacing between buttons or links in a header, while still having a simple and intuitive solution for those problems.

In the example above we can see that it is really easy to deal with component spacing later on in the development process when we are using individual components we have developed to create complex UIs that adhere to the layout specs that have been provided by our design team.

Documentation

All components should be self-documenting thanks to TypeScript Typings and Comments

Using TypeScript interfaces and types with comments above them will provide us with documentation on how to use the components. This will be important for scalability as our component library inevitably continues to scale in both size and individual component complexity.

A lot of modern code editors, such as VSCode, will also have great code completion support because of the Typescript typings and definitions, helping speed up development.

Using the ThemeProvider

To use the 'styled-components' library in a project which depends on @covr/components ThemeProvider without triggering styled-component's several instances error, we must create the following 'styled.d.ts' file in the consuming project:

import { COVRTheme } from '@covr/components'
import 'styled-components'

declare module 'styled-components' {
  export interface DefaultTheme extends COVRTheme {}
}