homemade-ds

Reusable React UI component library built with MUI and Emotion.

Features

• React components styled with MUI v6 and Emotion
• TypeScript support with full typings
• Supports both ESM and CommonJS consumers
• Storybook integration for interactive component preview
• Jest tests included for reliability

Installation

Install the latest published version from npm:

npm install homemade-ds

Usage

Import components in your React/Next.js app:

import { Banner, Button } from 'homemade-ds';

function App() {
  return (
    <Banner variant="info" heading="Welcome!">
      Hello from homemade-ds
    </Banner>
  );
}

Development

Build

Compile the source with tsup (outputs ESM, CJS, and types):

npm run build

Output goes to the dist/ folder.

Storybook

Run Storybook for live preview and documentation:

npm run storybook

Visit http://localhost:6006.

Build the static Storybook site:

npm run build-storybook

Chromatic Publishing

We use Chromatic to automatically build and publish Storybook on pushes to staging, main, and test-storybook branches.

The published Storybook can be viewed via the Chromatic project dashboard URL.

Published versions

• Public
• main
• staging

Testing

Run unit tests with Jest:

npm test

Local Testing in Consuming Projects

1. Pack the library locally

npm run pack:local

This removes old .tgz files, builds, and creates a new tarball.

2. Install in a local app

For example, to install in react-service-provider-portal:

npm run install:to-react-service-provider-portal

Or for react-customer-portal:

npm run install:to-react-customer-portal

These scripts pack, copy, and install the local tarball into the specified project.

Publishing to NPM

Steps to publish the homemade-ds package to npm:

1. Build the Package

Ensure the package is built and ready for distribution. Run the following command to generate the dist folder:

npm run build

2. Login to NPM

If you are not already logged in, log in to your npm account with: npm login

You will be redirect to NPM webpage.

3. Update the Version

Before publishing, ensure the version field in package.json is updated according to Semantic Versioning. You can use the following commands to increment the version:

For a patch version (e.g., 0.5.10 → 0.5.11): npm version patch

For a minor version (e.g., 0.5.10 → 0.6.0): npm version minor

And for a major version (e.g., 0.5.10 → 1.0.0): npm version major

4. Publish to NPM

Run the following command to publish to NPM: npm publish Note: ensure the version you're publishing is different to the existing version on NPM.

Scripts Overview

| Script | Description | |-------------------------------------|-----------------------------------------------------------------| | npm run build | Build library with tsup (ESM, CJS, typings) | | npm run storybook | Start Storybook dev server on port 6006 | | npm run build-storybook | Build Storybook static site | | npm test | Run Jest tests | | npm run publish:npm | Build and publish to npm (public access) | | npm run pack:local | Clean old packages, build, create local .tgz tarball | | npm run install:to-react-service-provider-portal | Pack and install to local react-service-provider-portal app | | npm run install:to-react-customer-portal | Pack and install to local react-customer-portal app |

Package Exports

{
  "main": "./dist/index.js",
  "module": "./dist/index.esm.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.esm.js",
      "require": "./dist/index.js"
    }
  }
}

• main: CommonJS entry
• module: ES Module entry
• types: TypeScript declarations
• exports: conditional exports for bundlers

Notes

• The pack:local and install scripts assume sibling project folders, e.g. ../react-service-provider-portal.
• Adjust paths if your folder structure differs.
• On Windows, replace rm -f with rimraf or appropriate command.