@mezo-org/mezo-clay NPM

Mezo Clay

Mezo Clay is Mezo's UI component library.

Development

Installation

This project uses pnpm for package management.

To install dependencies run:

pnpm install

Run the development server

This project uses Storybook to view, develop and test UI components in isolation.

pnpm run dev

Open http://localhost:6006/ to view it in the browser.

Linting

pnpm run format

This will lint both config files and ts/tsx/js/jsx files. See the package.json for specific linting commands.

Pre-commit

The project includes a pre-commit hook to automate linting when you commit. Please refer to the docs to install.

Testing

Storybook automatically runs component tests for each story (if written as a play function) and are visible in the UI under the "Component Tests" tab. We've set up the test-addon to use Vitest as the test runner. You can also run all tests in the terminal:

pnpm run test

Build

Build storybook

pnpm run build

The storybook build will be generated as the /storybook-static directory.

Build the library

pnpm run build:lib

The library is output as the /dist directory.

Publishing to NPM

Before you build and publish to NPM, you'll want to increment the version in package.json.

Build the library (same as above)

pnpm run build:lib

Login to NPM

pnpm login

Test the Built Package Locally

Use pnpm pack to build a .tgz file that you can link to from your test application.

Publish

pnpm publish --access public

Note: You can use the --dry-run flag on publish if you want to preview what will be included in the release package without actually publishing.

Check out your new release on the npm page.

Using Clay

Install

pnpm add @mezo-org/mezo-clay

Clay (and Base) uses Styletron for its component styling (as css in js), and requires its engine as a peer dependency, so you will need to install it as well.

pnpm add styletron-engine-monolithic

Adding Clay to your React app

Wrap the root of your app with the ClayProvider component, like so:

import { StrictMode } from "react"
import { createRoot } from "react-dom/client"
import { ClayLightTheme, ClayProvider } from "@mezo-org/mezo-clay"

import "@mezo-org/mezo-clay/dist/mezo-clay.css" // Font styles

import App from "./App.tsx"

createRoot(document.getElementById('root')!).render(
    <StrictMode>
      <ClayProvider theme={ClayLightTheme}>
        <App />
      </ClayProvider>
    </StrictMode>
  ,
)

Import the @mezo-org/mezo-clay/dist/mezo-clay.css to ensure that the proper fonts are included.