@moises.ai/design-system

A comprehensive design system built on Radix UI components with custom theming and components.

Installation

npm install @moises.ai/design-system

Usage

Basic Components

Import components from the main package:

import { Box, Flex, Hello, World, Header } from "@moises.ai/design-system";

function App() {
  return (
    <Box>
      <Header title="My App" />
      <Flex>
        <Hello name="Developer" />
        <World />
      </Flex>
    </Box>
  );
}

Icons

Import icons from the icons subpackage:

import { PlayIcon, RecordIcon } from "@moises.ai/design-system/icons";

function IconDemo() {
  return (
    <div>
      <PlayIcon />
      <RecordIcon />
    </div>
  );
}

Primitives

Import primitive components:

import { Hello, World } from "@moises.ai/design-system/primitives";

function PrimitivesDemo() {
  return (
    <>
      <Hello />
      <World />
    </>
  );
}

CSS Styles

Import the CSS styles:

import "@moises.ai/design-system/styles.css";

Make sure to import this at the root of your application to ensure all styles are loaded correctly.

Note: The styles.css file includes imports to Radix UI themes and custom colors. These paths are resolved when you install the package, so there's no need to install or configure anything additional.

Development

1. Clone this repository
2. Install dependencies: npm install
3. Start development mode: npm run dev
4. Build: npm run build

Local Testing

To test the package locally in another project before publishing to npm:

1. Install yalc globally:

   npm install -g yalc

2. In the design system directory, temporarily update the version in package.json to a unique version (e.g., "50.0.1")

3. Publish the package locally:

   yalc publish

4. In the target project where you want to test the design system:

   yalc add @moises.ai/[email protected]

5. When finished testing, remove the local package:

   # In the target project
   yalc remove @moises.ai/[email protected]
   npm install # or yarn to restore the published version

License

MIT