Welcome to the Guide to Building a Company Component Library course.

Course Welcome

The different types of component libraries and their uses.

An Intro to Component Libraries and Design Systems

Syllabus

How to setup your environment to complete this course.

Environment setup

Introduction

Which React Components to Build? An Atomic Design Guide

Which UI Elements Should be Turned Into React Components?

Choose React Dependencies for a Maintainable Component Library

Shared components

How to Host an NPM Package in GitHub for Free

How to Add Storybook to React to Test Component Library Locally

How to Keep React Code Consistent With Prettier and ESLint

Library creation

Build a Custom React Button Component With forwardRef API

Build a Custom Design System With React Styled Components

Validate React Props With PropTypes and TypeScript

Shared component patterns

How to Design Compound Components With React Context

How to Design Custom React Field Components With useUniqueID

How to Extend Styled Component Styles With New Style Props

Advanced patterns

How to Test React Component Libraries With ts-jest

How to Build Tests For React Button Components

How to Build Accessibility Tests For React Field Components

Component testing

The Best Ways to Bundle React Modules Into Packages

Build process

Setting Up Continuous Integration for a React Component Library With GitHub Actions

Deployment and automation

This course will teach you how to create a flexible, private, enterprise-grade component library using React.

Since its introduction in 2013, React has become one of the [most used front-end frameworks](https://2019.stateofjs.com/front-end-frameworks/). Its component-based architecture and flexibility has made it the framework of choice for those needing to share code across multiple teams.

However, the same flexibility that has helped React grow in popularity also creates many challenges when creating shared assets and tooling. Some of the most commonly asked questions include:

- What components should be shared?
- How do I choose which dependencies to include in my library?
- Which component APIs and design patterns allow for the most flexibility?
- How do I document and build my components?
- How should I be testing my library?
- Where do I deploy my components for internal use?

This course will teach you how to create a flexible, private, enterprise-grade
component library using React.

The newline Guide to Building a Company Component Library

How to identify potential shared components in an existing codebase

Importance of choosing your libraries dependencies

How to create an NPM library from scratch with TypeScript and Storybook

Basic and advanced API patterns for shared components

How to build and deploy a modern NPM package to a private NPM registry

Now that we have a flexible API to control our 

 component, let's add the relevant styling from our demo application. We will be using 

 as our CSS-in-JS solution and including custom props for controlling each style.

Using the demo application we can identify four unique style combinations. These styles can be represented with the following props:

| Prop          | Values                                    | Default value             |
| ------------- | ----------------------------------------- | ------------------------- |
| `variant`     | `"secondary"`, `"primary"`, or `"danger"` | `"secondary"`             |
| `size`        | `"small"`, `"medium"`, or `"large"`       | `"medium"`                |
| `isFullWidth` | `true` or `false`                         | `false`                   |
| `disabled`    | `true` or `false`                         | inherited from `<button>` |

With these values we are able to create a custom prop interface for our 

 is a native property already provided by 

 so we don't have to explicitly define it.

// File: src/buttons/Button.tsx

export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
  children: React.ReactNode;
  variant?: "secondary" | "primary" | "danger";
  size?: "small" | "medium" | "large";
  isFullWidth?: boolean;
}

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ children, variant, size, isFullWidth, ...props }, ref) => {
  return (
    <button ref={ref} type="button" {...props}>
      {children}
    </button>
  );
});

Button.defaultProps = {
  variant: "secondary",
  size: "medium",
  isFullWidth: false,
};

; a library that allows us to perform style calculations at runtime.

# Install styled-components dependencies
npm install --save-peer styled-components@^5.3.5
npm install --save-dev @types/styled-components@^5.1.25

# Install polished for style calculations
npm install polished@^4.1.0

Even though we are writing our styles with CSS-in-JS, many of the best practices from traditional CSS and pre-processors still apply. Our demo application provides color constants from the 

 file for use throughout its components. Let's migrate those SASS variables to TypeScript for use in our components.

// File: src/utils/styles.ts

export const SECONDARY_COLOR = "#ced4da";
export const SECONDARY_TEXT_COLOR = "#000";
export const PRIMARY_COLOR = "#0a58ca";
export const PRIMARY_TEXT_COLOR = "#fff";
export const DANGER_COLOR = "#dc3545";
export const DANGER_TEXT_COLOR = "#fff";
export const DISABLED_OPACITY = 0.65;

. This file will include all of the styling logic for the component.

 styles from the demo application we can identify some initial styles that are provided regardless of the different style variants. Let's create a new styled component that includes these styles.

---
title: Build a Custom Design System With React Styled Components
privateVideoUrl: https://fullstack.wistia.com/medias/9l0hwo4yub
code: https://gitlab.com/fullstackio/books/newline-course-apps/austin-green-building-a-company-component-library-app/-/tree/main/code/component-library?ref_type=heads
---

Now that we have a flexible API to control our `Button` component, let's add the relevant styling from our demo application. We will be using [styled-components](https://styled-components.com/) as our CSS-in-JS solution and including custom props for controlling each style.

## Prop definitions

![button styling example](https://d2uusema5elisf.cloudfront.net/courses/newline-guide-to-building-a-company-component-library/module_04/lesson_04.02/public/assets/button-styling.png)

Using the demo application we can identify four unique style combinations. These styles can be represented with the following props:

```txt
| Prop          | Values                                    | Default value             |
| ------------- | ----------------------------------------- | ------------------------- |
| `variant`     | `"secondary"`, `"primary"`, or `"danger"` | `"secondary"`             |
| `size`        | `"small"`, `"medium"`, or `"large"`       | `"medium"`                |
| `isFullWidth` | `true` or `false`                         | `false`                   |
| `disabled`    | `true` or `false`                         | inherited from `<button>` |
```

With these values we are able to create a custom prop interface for our `Button` component. Note that `disabled` is a native property already provided by `HTMLButtonElement` so we don't have to explicitly define it.

```tsx
// File: src/buttons/Button.tsx

export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
  children: React.ReactNode;
  variant?: "secondary" | "primary" | "danger";
  size?: "small" | "medium" | "large";
  isFullWidth?: boolean;
}

export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ children, variant, size, isFullWidth, ...props }, ref) => {
  return (
    <button ref={ref} type="button" {...props}>
      {children}
    </button>
  );
});

Button.defaultProps = {
  variant: "secondary",
  size: "medium",
  isFullWidth: false,
};
```

## styled-components

Similar to `react` and `react-dom`, `styled-components` requires us to [mark it as a peer dependency](https://styled-components.com/docs/faqs#i-am-a-library-author-should-i-bundle-styledcomponents-with-my-library). We will also be including [polished](https://polished.js.org/); a library that allows us to perform style calculations at runtime.

```bash
# Install styled-components dependencies
npm install --save-peer styled-components@^5.3.5
npm install --save-dev @types/styled-components@^5.1.25

# Install polished for style calculations
npm install polished@^4.1.0
```

### Global variables

Even though we are writing our styles with CSS-in-JS, many of the best practices from traditional CSS and pre-processors still apply. Our demo application provides color constants from the `_variables.scss` file for use throughout its components. Let's migrate those SASS variables to TypeScript for use in our components.

Create a new file at `src/utils/styles.ts`.

```bash
mkdir src/utils
```

```tsx
// File: src/utils/styles.ts

export const SECONDARY_COLOR = "#ced4da";
export const SECONDARY_TEXT_COLOR = "#000";
export const PRIMARY_COLOR = "#0a58ca";
export const PRIMARY_TEXT_COLOR = "#fff";
export const DANGER_COLOR = "#dc3545";
export const DANGER_TEXT_COLOR = "#fff";
export const DISABLED_OPACITY = 0.65;
```

### Initial styling

Create a new `styles.ts` file alongside `Button.tsx`. This file will include all of the styling logic for the component.

Austin Green

Now that we have a flexible API to control our button component, let's add the

We will be using style components as our CSS and JS solution and including

Using the demo application, we can identify four unique style combinations.

These styles can be represented by a few different props.

So if we look at variants, we can see a potential variant prop that has three

We can see a size prop with values small, medium, and large.

There is a disabled state that affects all sizes and variants.

And there would also be a full width variant, which can be used in tandem with

So that would be an isful with prop that is a Boolean as well.

So with these values, we're able to create a custom prop interface for a button

One thing to take note of is the disabled prop is already included by our

So we don't need it explicitly to find it, but it will be available later on.

So let's start with creating that custom interface.

So we're going to be exporting this interface as well, since we're going to be

So we have this new button props interface, and we want to include all of the

So we're going to extend that interface and use button refs, button props in

And then here we can add in our three different props.

So we would have variant, which is going to be an optional enum with secondary,

and danger as values, size, which is another optional enum for small, medium or

And then is full width, which is going to be an optional Boolean.

And then disabled, we don't need include because that's already provided by

So here we can call those out, so we're not applying them to button.

And then one other thing we can do is provide some default values using the

So we can provide a default prop for variant.

We would want this to be secondary by default.

And then we do not want it to be full width by default.

And then we'll be using these values once we define them in our style component

So now that we have our style interface determined, we can add in style

So similar to react and react DOM, style components requires us to market as a

So we can include that with MPM install, save peer style components.

And then we also need include the type definitions for style components.

And then along with style components, we're going to be installing a library

So polished allows us to perform style calculations at runtime, where if you've

like SAS or less before, they had built-in functions that allow us to do this

But we need to do the same logic just in the runtime environment so we can MPM

polished as a standard dependency, since that will be something that we use at

One of the other things that we need to do is create some shared style

So even though we're not writing our styles in traditional CSS, a lot of the

practices from CSS and pre-processors still apply in CSS and JS.

So our demo application provides several colored constants in a variables.sas

And we're going to migrate these SaaS variables to TypeScript for use within

So under source, let's create a new folder called utils.

And then here, let's create a new styles.ts file.

And we can create some constants that are the equivalent of SaaS variables or

Now that we have our shared variables, let's actually create our styling for

So within the source button's directory, let's create a new styles.ts file.

And this can be TS since we're not going to have any JSX in it.

And this is where we're going to put all the style logic for the button

If we look at the existing styles in the demo application, we can identify some

styles that are provided regardless of the different style variants.

So first of all, let's import style from style components.