Powered by:
- π Turborepo β High-performance build system for Monorepos
- π React β JavaScript library for user interfaces
- π Tsup β TypeScript bundler powered by esbuild
- π Nextra β Simple, powerful and flexible site generation framework from Next.js.
As well as a few others 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
Full documentation on the everything contained in this repo can be found at hauscore.xyz
git clone https://github.com/MadeInHaus/haus-core.git
cd haus-core
pnpm install
pnpm build
- Build all packages, including the Storybook sitepnpm dev
- Run all packages locally and preview with Storybookpnpm lint
- Lint all packagespnpm changeset
- Generate a changesetpnpm clean
- Clean up allnode_modules
anddist
folders (runs each package's clean script)
Turborepo is a high-performance build system for JavaScript and TypeScript codebases. It was designed after the workflows used by massive software engineering organizations to ship code at scale. Turborepo abstracts the complex configuration needed for monorepos and provides fast, incremental builds with zero-configuration remote caching.
Using Turborepo simplifies managing your design system monorepo, as you can have a single lint, build, test, and release process for all packages. Learn more about how monorepos improve your development workflow.
This Turborepo includes the following packages and applications:
apps/docs
: Component documentation site with Nextrapackages/[package]
: React componentspackages/hooks
: Shared React hookspackages/utils
: Shared utilities
This example sets up your .gitignore
to exclude all generated files, other folders like node_modules
used to store your dependencies.
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 vite
, which uses rollup
to greatly improve performance.
Running pnpm build
from the root of the Turborepo will run the build
command defined in each package's package.json
file. Turborepo runs each build
in parallel and caches & hashes the output to speed up future builds.
For ui
, 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 acme-core
then instructs the consumer to select the correct format:
{
"name": "@madeinhaus/textural-video",
"version": "0.0.0",
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"sideEffects": false,
}
Run pnpm build
to confirm compilation is working correctly. You should see a folder [package]/dist
which contains the compiled output.
textural-video
βββ dist
βββ index.js <-- CommonJS version
βββ index.mjs <-- ES Modules version
import * as React from "react";
import cx from 'clsx';
import styles from "./Button.module.scss";
export interface ButtonProps {
children: React.ReactNode;
variant: "primary" | "secondary";
}
export default function Button({ children, variant }: ButtonProps) {
return (
<button className={cx(styles.root, styles[variant])}>{children}</button>
);
}
Nextra provides us with an interactive UI playground for our components. This allows us to preview our components in the browser and instantly see changes when developing locally. This example preconfigures Nextra to:
-
The Nextra repository uses PNPM Workspaces and Turborepo. To install dependencies, run pnpm install in the project root directory.
-
Write MDX for component documentation pages
-
pnpm dev
: Starts Nextra in dev mode with hot reloading atlocalhost:3001
-
pnpm build
: Builds the Nextra app and generates the static files
For example, here's the Nextra markdown for our Portal
component:
# Portal
The Portal component allows you to render a child component outside of its parent hierarchy, by creating a portal to another part of the DOM. This can be useful in situations where you need to render a component in a specific part of the page or outside of the component tree.
## Installation
import { Tab, Tabs } from 'nextra-theme-docs';
<Tabs items={['npm', 'yarn', 'pnpm']}>
<Tab>
```bash copy
npm install @madeinhaus/portal
```
</Tab>
<Tab>
```bash copy
yarn add @madeinhaus/portal
```
</Tab>
<Tab>
```bash copy
pnpm add @madeinhaus/portal
```
</Tab>
</Tabs>
## Import
`import Portal from '@madeinhaus/portal';`
## Props
The `Portal` component accepts two props:
- `selector`: A string representing the CSS selector for the DOM element where the portal will be created. If no selector is provided, the default selector `#__portal__` will be used.
- `children`: The child component(s) to be rendered within the portal.
## Usage
Wrap your desired child component(s) within the `Portal` component:
```tsx copy showLineNumbers
function MyComponent() {
return (
<div>
<h1>My Component</h1>
<Portal>
<div>
<p>This component will be rendered outside of the parent hierarchy.</p>
</div>
</Portal>
</div>
);
}
This example uses Changesets to manage versions, create changelogs, and publish to npm. It's preconfigured so you can start publishing packages immediately.
You'll need to create an NPM_TOKEN
and GITHUB_TOKEN
and add it to your GitHub repository settings to enable access to npm. It's also worth installing the Changesets bot on your repository.
To generate your changelog, run pnpm changeset
locally:
- 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 thechangeset
. - Which packages should have a major bump? β Press
space
to select the packages you want to bump versions for. - If doing the first major version, confirm you want to release.
- Write a summary for the changes.
- Confirm the changeset looks as expected.
- A new Markdown file will be created in the
changeset
folder with the summary and a list of the packages included.
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
To publish packages to a private npm organization scope, remove the following from each of the package.json
's
- "publishConfig": {
- "access": "public"
- },