Build a Company Design System - Course Introduction

Which technologies we will be using in this course

Build a Company Design System - Course Overview

What are Design Systems and Why are They so Popular?

How to think of design systems and model them appropriately

Pace Layering and Atomic Design System Mental Models

How to convert a Figma file to requirements

How to Turn a Figma Design System Into Code

Introduction

Module 2 Introduction

How to structure a design system monorepo

How to Structure a Design System Monorepo

Using yarn workspace to create a monorepo

Using Yarn Workspaces to Create a Monorepo

How to Build a Dynamic Design System With TypeScript

Create ESLint and Prettier Configs for a Design System

Design System Monorepo

Module 3 Introduction

How to Work With and Structure Design Tokens

Transforming raw design tokens with Style Dictionary

A Guide to Transforming Design Tokens with Style Dictionary

Creating a Tailwind CSS preset with JavaScript design tokens

Creating Tailwind CSS Presets With Design Tokens

Using `tsc` to build the foundation package

Building the foundation

Foundation package

Module 4 Introduction

Setting up the react component library package

Setting Up A React Component Library for Design Systems

How to Write React Components for a Company Design System

React package

Module 5 Introduction

Developing the component library with Storybook

Setting Up Storybook for Company Design Systems

Using Storybook to document our component library

Creating Your First Stories in Storybook

Storybook controls and Accessibility addon panel

Controls and A11y testing

Storybook package

Module 6 Introduction

Styling React components with JavaScript design tokens

How to Style React Components With Design Tokens

Styling React components with Tailwind CSS preset

How to Use Tailwind CSS With JavaScript Design Tokens

Styling components

Module 7 Introduction

Using React Testing Lirary to test React components

React Testing Library - Install and Write Your First Test

Finding accessibility issues using AXE with Jest

Using jest-axe to Find Accessibility Issues in React Components

What is Visual Testing and How Does it Work?

Testing components

Module 8 Introduction

What are Changesets and How Do They Manage Versioning?

How to test & publish our packages from CI (Github Actions)

How to Setup a CI/CD Pipeline in GitHub Actions

CI, Changelogs and Publishing

Thank you 🙏

Summary

In this course, we will dive into the world of design systems. We will learn how they can help developers increase their productivity, create consistency across a company's products, and ultimately speed up the development process.

We will start by covering the fundamental concepts of design systems, then move on to the architecture of a monorepo codebase. We will set up shared configurations for TypeScript, ESLint, and Prettier, and create a foundation package for hosting and distributing design tokens and assets.

Next, we will create a React package with demo components that are styled using our design system's style tokens. We will also create a Storybook package and learn the best practices for developing and documenting components with TypeScript. We will focus on styling our components in two ways: using CSS-in-JS with styled-components and JavaScript design tokens, as well as Tailwind CSS classes.

Finally, we will learn how to create tests for our React components using React Testing Library and AXE, and manage releases using changesets and set up a CI pipeline with GitHub Actions.

This course aims to be a comprehensive guide, or a cookbook, to building a complete company design system from scratch. By the end of the course, you will have the knowledge and skills to create a practical and maintainable design system for any organization.

This course is a comprehensive guide to publishing your first component library and design assets using React, TypeScript, Storybook, Tailwind CSS, and Styled Dictionary. You’ll create a flexible, enterprise-grade design system library that your co-workers will actually enjoy.

Build a Complete Company Design System

Transform design tokens with Style Dictionary.

Manage an enterprise design system monorepo with Yarn workspaces.

How a simple monorepo works with Yarn workspaces

What design tokens are, and how to generate them with Styled-Dictionary

Automate testing for accessibility issues (Axe) and visual changes (Chromatic)

Develop and document our design system with Storybook

How to publish with Github Actions and Changesets

How to provide a Tailwind configuration for other teams

A tool to manage versioning and changelogs
with a focus on multi-package repositories

and then we will generate an initial configuration file:

 works is by creating small files; a collection of 

 files that describe the changes we made, and to which packages.

, we need to give an initial version to our 

 packages. We can do this by inserting an initial version to our 

 describing our work for the two packages we will publish; 

---
title: What are Changesets and How Do They Manage Versioning?
description: What are changesets and how to use them
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/zvk1hy54lu
---

import { ImageCaption } from "~/components/index.js";

## What is changesets

As `changesets` put it in its [GitHub repo](https://github.com/changesets/changesets):

> A tool to manage versioning and changelogs
> with a focus on multi-package repositories

A definition to the point, as `changesets` is a CLI tool that will:

1.  Manage our releases
2.  Work flawlessly with monorepos, like our `yarn` workspace
3.  Generate changelogs automatically

### Install changesets

To install `changesets`, let's run in the root of our project:

```bash
yarn add -D @changesets/cli
```

and then we will generate an initial configuration file:

```bash
yarn changeset init
```

Now the way `changesets` works is by creating small files; a collection of `changeset` files that describe the changes we made, and to which packages.

Before creating our first `changeset`, we need to give an initial version to our `react` and `foundation` packages. We can do this by inserting an initial version to our `packages/react/package.json` and `packages/foundation/package.json`:

```json
  "version": "0.0.0"
```

### Create our first `changeset`

Let's create a `changeset` describing our work for the two packages we will publish; `react` and `foundation`.

To do this, execute:

```bash
yarn changeset add
```

You will be prompted to select the packages that are affected; in our case, both of the recommended packages.

Costa Alexoglou

So almost everything is in place and we are ready to publish our design system.

I like to work with a tool called TaintSet,

which is a really nice tool that helps us with

basing the version of our packageization when we are ready to publish,

And to install this, we would execute this one,

and we will install this in the root directory,

because this is a script that we will use for all the packages.

yarn, TaintSet, and then init from initialize.

And you will see that we have some new files,

And basically, those are the new files that were created from TaintSet.

And for it to work properly, we need to go to every single package.json

So we went to react and we will go to the foundation.

but remember that Storybook is a private package,

To do this, we go here, yarn, TaintSet, and add.

And now the CLI asks us which packages we want to include in this TaintSet.

And in our case, we want the foundation and the react package.

Then do we want to release a major version?

And let's say this is our very first release.

And now if we go back, we can see that we have a new markdown file.

And this is actually a TaintSet, which holds some information.

For example, here it holds the information of the packages that changed.

And what was the Taint, if it was a part, a minor release for us.

And now how we are publishing, there is a TaintSet.com mod called version,

which basically takes all of our markdown files.

Now you can see that our markdown file is deleted.

So it takes the markdown files and it tries to understand what would be the

So you can see here we have the version we modified from version 0.0.0.

And with the TaintLook included, the same for React Packets with the TaintLook

And here we can see that it's pumped, but we don't care about storebook at all.

And those TaintLook files, if you push them to your Git, they will look

This is the TaintLook file for the TaintSet repository and for the CLI packets,

which is a really nice way and a really nice tool to help us and manage and

Every complexity of publishing and versioning and TaintLook for our packages.

And in the next lesson we will see how we can

publish and test our packages with GitHub actions as our CI/CD.