Wingo monorepo (turborepo) for all products and the core library (DLS)

Configurations already part of the package are:

1. Core library for react components - shared with other projects, used to create your application using reusable components from core library.
2. Core shared 'utils', for all your utilities.
3. Shared configrations for typescipt, postcss, next, tailwindcss
4. React next app, project application that uses core shared packages like, core component library, configrations, utils etc.

Tools preconfigured:

• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting
• Changesets for managing versioning and changelogs
• GitHub Actions for fully automated package publishing

Using this example

Clone the setup locally or from GitHub:

npx degit https://github.com/farooqmir/wingo-apps
cd wingo-apps
yarn install
git init . && git add . && git commit -m "Init"

Useful Commands

• yarn build - Build all packages including the Storybook site
• yarn dev - Run all packages locally and preview with Storybook
• yarn lint - Lint all packages
• yarn changeset - Generate a changeset
• yarn clean - Clean up all node_modules and dist folders (runs each package's clean script)

Apps & Packages

This Turborepo includes the following packages and applications:

• apps/docs: Documentation core components in storybook
• packages/reactwiind: Core shared React components
• packages/rw-utils: Shared utilities
• packages/rw-tsconfig: Shared tsconfig.jsons used throughout the monorepo
• packages/eslint-config-rw: ESLint preset

To install a dependency for the entire monorepo, use the -W workspaces flag with yarn add.

Compilation

To make the core library code work across all browsers, we need to compile the raw TypeScript and React code to plain JavaScript. We can accomplish this with tsup, which uses esbuild to greatly improve performance.

For reactwiind, the build command is the following:

tsup src/index.tsx --format esm,cjs --dts --external react

tsup compiles src/index.tsx, which exports all of the components in the design system, into both ES Modules and CommonJS formats as well as their TypeScript types. The package.json for wingo-core then instructs the consumer to select the correct format:

{
  "name": "reactwiind",
  "version": "0.0.0",
  "main": "./dist/index.js",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "sideEffects": false,
}

Run yarn build to confirm compilation is working correctly. You should see a folder reactwiind/dist which contains the compiled output.

wingo-core
└── dist
    ├── index.d.ts  <-- Types
    ├── index.js    <-- CommonJS version
    └── index.mjs   <-- ES Modules version

Generating the Changelog

To generate your changelog, run yarn changeset locally:

1. Which packages would you like to include? – This shows which packages and changed and which have remained the same. By default, no packages are included. Press space to select the packages you want to include in the changeset.
2. Which packages should have a major bump? – Press space to select the packages you want to bump versions for.
3. If doing the first major version, confirm you want to release.
4. Write a summary for the changes.
5. Confirm the changeset looks as expected.
6. A new Markdown file will be created in the changeset folder with the summary and a list of the packages included.

Releasing

When you push your code to GitHub, the GitHub Action will run the release script defined in the root package.json:

turbo run build --filter=docs^... && changeset publish

Turborepo runs the build script for all publishable packages (excluding docs) and publishes the packages to npm. By default, this example includes wingo as the npm organization. To change this, do the following:

• Rename folders in packages/* to replace wingo with your desired scope
• Search and replace wingo with your desired scope
• Re-run yarn install

To publish packages to a private npm organization scope, remove the following from each of the package.json's

- "publishConfig": {
-  "access": "public"
- },