poc-design-system-test

This project is a Proof of Concept (POC) of a simple Design System distributed via npm.

The main goal is to demonstrate in practice:

• creating an npm package
• basic design system structure (tokens + components)
• build process using dist
• distribution and consumption in another project

Table of Contents

• Objective
• Project structure
• Concepts used
• Get started
• Build and test
• Publishing
• Usage in a consumer project
• Next steps
• References
• License

Objective

This POC simulates a real-world scenario where a team needs to:

• centralize styles and components
• reuse code across projects
• distribute via npm

Even though it is simple, it already follows basic Design System concepts.

Project structure

poc-npm-package/
├── src/
│   ├── components/
│   │   └── Button/
│   │       └── Button.js
│   ├── tokens/
│   │   └── colors.js
│   └── index.js
├── dist/
├── test.js
├── package.json
├── README.md
└── .gitignore

Folder explanation

| Folder | Purpose | | ----------------- | ----------------------------------- | | src/ | Design system source code | | src/components/ | Reusable components (e.g. Button) | | src/tokens/ | Design tokens (e.g. colors) | | src/index.js | Central export file | | dist/ | Final build output for distribution | | test.js | File to test the package |

Concepts used

npm Package

The project is distributed as an npm public package and can be installed in other projects.

Tokens

The colors.js file defines reusable color values:

const colors = {
  primary: "#cc092f"
}

Avoids duplication and centralizes design decisions.

Components

Example: Button

function Button(label) {
  return `<button>${label}</button>`
}

Represents a reusable UI element in the design system.

Central export

File: src/index.js

module.exports = {
  Button,
  colors
}

Allows importing everything from a single entry point.

Build (dist)

The src code is copied to dist, which is the version that gets published.

Get started

Clone the project

git clone <repo>
cd poc-npm-package

Install dependencies

npm install

Build and test

Generate build

npm run build

Copies src to dist.

Run test

node test.js

Example output:

token primary: #cc092f
<button>click here</button>

Publishing

Bump version

npm version patch

Build again

npm run build

Publish package

npm publish

Usage in a consumer project

Install package

npm install poc-design-system-test

Use in code

const { Button, colors } = require("poc-design-system-test")

console.log(colors.primary)
console.log(Button("buy now"))

Development flow

src → build → dist → test → publish → consume

Repository

https://github.com/lhenriquei/poc-design-system-test

Package

https://www.npmjs.com/package/poc-design-system-test

References

• Creating Node.js Modules - npm
  Used as a reference for structuring the package and exporting modules with module.exports.

• npm publish - npm
  Used to understand how to publish and distribute the package via npm.

• Atomic Design - Brad Frost
  Inspired the project structure by separating components and tokens in a scalable way.

• Supernova - Getting Started
  Used as a reference for design tokens organization, applied here with the colors object.