npm package: @lxjay/react-ui-test
Description: Reusable React/Tailwind UI component library with Storybook, tests, and i18n support.
Latest version: 0.1.2

# React Tailwind UI Library

A reusable React + Tailwind CSS component library scaffold that includes Storybook docs, Jest + React Testing Library tests, strict TypeScript, ESLint/Prettier, i18n (English, Norwegian Bokmål, Lithuanian), accessibility helpers, and light/dark theming.

## Features

- React 18, TypeScript, Tailwind CSS 3 design system with tokens + dark mode via CSS variables.
- Component set: Button, Input, Select, Checkbox, Modal, Table, Tabs, Toast (with provider), Pagination, FormField.
- Storybook 7 with Docs/Controls, accessibility addon, Tailwind styling, design tokens, and preview decorators for Theme + Toast providers.
- Jest + React Testing Library with jsdom environment for fast unit tests.
- ESLint (TypeScript, React, Testing Library, jest-dom) + Prettier formatting.
- i18next setup with helper `initI18n` and translations for English, Norwegian Bokmål, Lithuanian.
- Build via tsup + Tailwind CLI, ready to publish to npm.

## Scripts

```bash
pnpm install # install deps
pnpm lint    # lint TS/React files
pnpm test    # run unit tests
pnpm storybook        # start Storybook on :6006
pnpm storybook:build  # generate static Storybook
pnpm build   # bundle components + CSS to dist/
```

## Development Workflow

1. **Install dependencies** – `pnpm install` (enable via `corepack enable pnpm` if needed).
2. **Run Storybook** – `pnpm storybook` for component-driven development with live docs.
3. **Add/Update components** – implement in `src/components`, export from `src/index.ts`, document with a `stories/*.stories.tsx` file, and add relevant tests under `src/components/__tests__`.
4. **Style with tokens** – use Tailwind classes powered by `src/styles/tokens.css`, or import `tokens` from `@/tokens` for JS usage. Respect dark-mode via `[data-theme="dark"]` or the provided `ThemeProvider`.
5. **Internationalization** – call `initI18n({ lng: 'nb' })` when embedding in consuming apps; use `useTranslation` from the library for UI text.
6. **Testing & linting** – run `pnpm test` and `pnpm lint` before building. The `pnpm check` script runs lint + test + build for CI safety.
7. **Build artifacts** – `pnpm build` outputs `dist/index.{cjs,mjs,d.ts}` and `dist/styles.css`. Consumers import CSS via `import '@ziliang/react-tailwind-ui/styles.css';`.
8. **Version & publish** – bump the version in `package.json`, run `pnpm build`, then `npm publish --access public` (from the repo root, authenticated with npm).

## Importing Components in Another App

```tsx
import '@ziliang/react-tailwind-ui/styles.css';
import { Button, ThemeProvider, initI18n } from '@ziliang/react-tailwind-ui';

initI18n();

export const Example = () => (
  <ThemeProvider>
    <Button variant="secondary">Click me</Button>
  </ThemeProvider>
);
```

## Project Structure

```
src/
  components/        # All UI primitives
  design-tokens/     # JS access to CSS tokens
  i18n/              # i18next setup + locales
  styles/            # Tailwind + CSS variables
  theme/             # ThemeProvider + hook
  utils/             # Shared helpers
stories/             # Storybook stories for each component
storybook/           # Storybook config
```

## Publishing Checklist

1. `pnpm check`
2. Update `README.md` / CHANGELOG if needed
3. `pnpm build`
4. `npm publish --access public`
5. Tag the release in git

Enjoy building accessible, themeable UI blocks!