# @dragmove/react-ui-v3

NCAI UI v3 design system for internal React applications.

## Install

```sh
npm install @dragmove/react-ui-v3
```

The internal npm registry is configured outside this package, usually through a
project-level or CI-provided `.npmrc`.

## Usage

Import components from the package root:

```tsx
import { Dialog, Input, Tooltip } from '@dragmove/react-ui-v3';
```

Import the compiled stylesheet once from the application entry point:

```tsx
import '@dragmove/react-ui-v3/style.css';
```

Use SCSS variables, functions, and mixins directly from the package:

```scss
@use '@dragmove/react-ui-v3/styles/variable.scss' as *;
@use '@dragmove/react-ui-v3/styles/mixin.scss' as *;
@use '@dragmove/react-ui-v3/styles/typography.scss' as *;
```

Use packaged assets through the exported asset subpath:

```tsx
import CheckIcon from '@dragmove/react-ui-v3/assets/svg/icons/ic_check.svg';
import loadingAnimation from '@dragmove/react-ui-v3/assets/lottie/loading.json';
import loaderImage from '@dragmove/react-ui-v3/assets/png/loader.png';
```

SVG imports depend on the consuming framework's SVG handling. Vite projects can
use `vite-plugin-svgr`; Next.js projects can add `@svgr/webpack` when SVGs must
be imported as React components.

## Public Exports

- `@dragmove/react-ui-v3`: React components, utilities, and public TypeScript types.
- `@dragmove/react-ui-v3/style.css`: compiled global stylesheet and component styles.
- `@dragmove/react-ui-v3/styles/*`: source SCSS tokens, functions, and mixins.
- `@dragmove/react-ui-v3/assets/*`: fonts, SVG icons/logos, lottie JSON, and PNG assets.

## Development

```sh
pnpm install
pnpm typecheck
pnpm build
pnpm storybook
```

Build output:

- `dist/index.mjs`
- `dist/index.cjs`
- `dist/index.d.ts`
- `dist/style.css`

## Verification

Run the package-level verification:

```sh
pnpm verify:package
```

This builds the package, creates a local tarball, and checks that `dist`,
`src/styles`, `assets`, `README.md`, and `types.d.ts` are present in the npm
package.

Run the full consumer matrix:

```sh
pnpm verify:matrix
```

The matrix creates temporary Vite and Next.js projects under `tmp/verify-matrix`
and installs the local tarball with:

- npm
- pnpm
- Yarn Classic
- Yarn Berry with `nodeLinker: node-modules`
- Yarn Berry with `nodeLinker: pnp`
- Bun
- Deno npm compatibility

Each consumer project validates:

- package root imports and public type imports
- `@dragmove/react-ui-v3/style.css`
- SCSS `@use` from `@dragmove/react-ui-v3/styles/*`
- SVG, PNG, lottie JSON, and font resolution
- TypeScript checks
- production builds
- smoke rendering of the exported component set
