whoisryosuke / design-systems-monorepo

Zenny UI

React Components using Styled Components and "utility props" (like marginTop={3})

Components

• Box
• Button

Getting Started

1. Install the UI Library: yarn add zenny-ui-components

2. Use a component:

   import { Button } from "zenny-ui-components";
   
   // Inside a React component
   return <Button>Submit</Button>;

Development

This project is bootstrapped using Lerna and Yarn to create a monorepo structure (one repo containing many, often connected modules). Each folder inside the packages folder is a different module, like the button component, or utility functions used across different modules.

Installation

1. Install dependencies in the root of the repo: yarn
2. Run Typescript to build on each file save: yarn dev

Project Structure

This project is a monorepo made up of several packages, from individual components to utility functions. These packages are often "linked" together to allow us to isolate and modularize functionality and orchestrate them together. This is a fancy way of saying we have a bunch of NPM packages under one repo roof and they usually depend on eachother.

Notable Packages:

• core - This is used by most components to provide common shared dependencies like React and Styled Components.
• variants - This is used by most components to add "variant" props to components that alter the style (like <zenny-button appearance="primary">).
• components - This package exports all the individual component from one place.

Package Structure:

Here is the general structure of a module or "package" contained in the /packages directory. This may be slightly different for utility packages.

packages/component-name
├── 📂 **__tests__** (Jest, Cypress, etc tests)
│   ├── component-name.test.js
├── 📂 **__stories__** (Storybook examples/tests)
│   ├── component-name.stories.tsx
├── 📂 **lib** (Generated by build process)
│   ├── component-name.d.ts
│   ├── component-name.js
│   ├── component-name.js.map
│   ├── index.d.ts
│   ├── index.js
│   └── index.js.map
├── 📄 package.json
├── 📂 **src** (Source code)
│   ├── component-name.tsx
│   └── index.ts
└── 📄 tsconfig.json

Creating New Packages

Use Lerna CLI to create package:

1. lerna create package-name
2. When asked for a package name, provide one prefixed with zenny-ui- (e.g. zenny-ui-button).
3. Set version to 0.0.0. Lerna will increment the versioning automatically.
4. Add a short description
5. Keywords are optional, these will be modified later for SEO.
6. Skip past "homepage" (press enter)
7. Set License to MIT
8. Entry point should be set to lib/index.js
9. Skip past "Repository" (press enter)

Add necessary files:

1. Create a tsconfig.json inside the new package folder:

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "./lib"
  },
  "include": ["./src"]
}

2. Add the typings file and build scripts to the package.json:

{
  "typings": "lib/index.d.ts",
  "scripts": {
    "build": "tsc -d",
    "dev": "tsc --watch"
  }
}

Install shared modules:

If you need to install a module inside of another module (like installing the core package inside a new component), use the Lerna CLI to link the local packages properly. For example, if you wanted to install the core package inside the button package, it'd look like this:

lerna add zenny-ui-core --scope=zenny-ui-button

New Components: Make sure to install core to get access to React, Styled Components, and other dependencies.

Building Packages / Modules

You can build separate packages by navigating to the package and running the build command locally there. For example:

1. From the monorepo root: cd packages/button
2. yarn build

This will run the build process locally, and give you better, syntax highlighted, error messaging.

Thanks

• design-systems-monorepo
• Theme UI