design-systems-monorepo

KO | EN

gitlite — search

#hacktoberfest #react #golang #machine-learning #rust #deep-learning #linux #macos #nodejs #awesome-list #pytorch #ios #mcp #openai

design-systems-monorepo

(★ 13)

No description available.

design-systems-monorepo 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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:

```js
   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`
1. 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`
1. When asked for a package name, provide one prefixed with `zenny-ui-` (e.g. `zenny-ui-button`).
1. Set version to `0.0.0`. Lerna will increment the versioning automatically.
1. Add a short description
1. Keywords are optional, these will be modified later for SEO.
1. Skip past "homepage" (press enter)
1. Set License to MIT
1. Entry point should be set to `lib/index.js`
1. Skip past "Repository" (press enter)

**Add necessary files:**

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

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

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

```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:

```bash
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`
1. `yarn build`

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

# Thanks

- [design-systems-monorepo](https://github.com/whoisryosuke/design-systems-monorepo)
- [Theme UI](https://github.com/system-ui/theme-ui/blob/master/packages/components/index.d.ts)

design-systems-monorepo

design-systems-monorepo 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

design-systems-monorepo

design-systems-monorepo 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README