React Components using Styled Components and "utility props" (like marginTop={3}
)
- Box
- Button
-
Install the UI Library:
yarn add zenny-ui-components
-
Use a component:
import { Button } from "zenny-ui-components"; // Inside a React component return <Button>Submit</Button>;
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.
- Install dependencies in the root of the repo:
yarn
- Run Typescript to build on each file save:
yarn dev
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.
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
Use Lerna CLI to create package:
lerna create package-name
- When asked for a package name, provide one prefixed with
zenny-ui-
(e.g.zenny-ui-button
). - Set version to
0.0.0
. Lerna will increment the versioning automatically. - Add a short description
- Keywords are optional, these will be modified later for SEO.
- Skip past "homepage" (press enter)
- Set License to MIT
- Entry point should be set to
lib/index.js
- Skip past "Repository" (press enter)
Add necessary files:
- Create a
tsconfig.json
inside the new package folder:
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "./lib"
},
"include": ["./src"]
}
- 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.
You can build separate packages by navigating to the package and running the build command locally there. For example:
- From the monorepo root:
cd packages/button
yarn build
This will run the build process locally, and give you better, syntax highlighted, error messaging.