@hashd/components

HASHD semantic design system - CSS and React components

Overview

This package serves dual purposes:

1. Standalone Style Guide App - Interactive documentation of all design system components
2. NPM Package - Reusable design system for HASHD projects

Quick Start

Running the Style Guide (Standalone)

View the interactive component documentation:

cd styles
yarn install
yarn start

The style guide will open at http://localhost:3001

Using as NPM Package

Install in your project:

# Local development (from project root)
yarn add @hashd/components@file:../styles

# From npm (when published)
yarn add @hashd/components

Import CSS in your app:

// In your main entry file (index.tsx or App.tsx)
import '@hashd/components/dist/styles.css';

Import React components:

import { HashdComponents } from '@hashd/components';

function App() {
  return <HashdComponents />;
}

Package Structure

styles/
├── public/              # HTML template for standalone app
│   └── index.html
├── src/
│   ├── index.tsx       # React entry point (standalone app)
│   ├── index.ts        # Package entry point (exports)
│   ├── index.css       # Main CSS entry point
│   ├── css/            # Semantic CSS modules
│   │   ├── _variables.css
│   │   ├── _typography.css
│   │   ├── _buttons.css
│   │   ├── _cards.css
│   │   ├── _inputs.css
│   │   ├── _badges.css
│   │   ├── _modals.css
│   │   └── _utilities.css
│   └── components/
│       └── HashdComponents.tsx
├── dist/               # Built output (generated)
├── package.json
├── tsconfig.json
└── README.md

Development

Building the Package

yarn build

This runs two build steps:

1. build:ts - Compiles TypeScript to JavaScript
2. build:css - Copies CSS files to dist folder

Development Mode

Watch mode for TypeScript changes:

yarn dev

Clean Build

Remove build artifacts:

yarn clean

Publishing to NPM

When ready to publish:

1. Update version:

npm version patch  # or minor, or major

2. Build the package:

yarn build

3. Publish:

npm publish --access public

4. Update consuming projects:

yarn add @hashd/components@latest

License

MIT © 3oh Inc