@ntdsk/react-ui/README.md

Reusable components used on nautidesk web projects

# Nautidesk React UI

A collection of reusable React components used in Nautidesk web projects.

## Installation

```bash
npm install @ntdsk/react-ui
pnpm install @ntdsk/react-ui
yarn add @ntdsk/react-ui
```

## CSS Import (Required)

**Important**: You must import the CSS file in your main application file:

```tsx
// In your main.tsx, App.tsx, or index.tsx
import '@ntdsk/react-ui/dist/index.css';
```

## Dependencies

```bash
npm install react react-dom
```

## Optional Dependencies

Some components require optional dependencies. See [OPTIONAL_DEPENDENCIES.md](./OPTIONAL_DEPENDENCIES.md) for details.

**For Controlled Input Components:**

```bash
npm install react-hook-form
```

**For Moment utilities:**

```bash
npm install moment
```

## Usage

```tsx
import { AppButton, AppModal, AppIcon, AppSidebar } from '@ntdsk/react-ui';

function MyComponent() {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  return (
    <div>
      <AppButton label="Click me" onClick={() => console.log('clicked')} />
      <AppIcon icon="mdi:home" />
    </div>
  );
}
```

## Available Components

### App Components

- `AppAlert` - Alert/notification component
- `AppButton` - Customizable button component
- `AppDeleteWarning` - Delete confirmation component
- `AppDropdownButton` - Dropdown button component
- `AppEmptyImage` - Empty state image component
- `AppHelperModal` - Helper modal component
- `AppIcon` - Icon component (uses Iconify)
- `AppLoadingIcon` - Loading spinner component
- `AppMenuDrop` - Menu dropdown component
- `AppModal` - Modal dialog component
- `AppPageLoader` - Page loading component
- `AppPagination` - Pagination component
- `AppRipple` - Ripple effect component
- `AppSidebar` - Sidebar menu component
- `AppStepper` - Stepper/wizard component
- `AppTable` - Data table component
- `AppTabs` - Tabs component
- `AppTag` - Tag/badge component

### Hooks

- `useMoment` - Moment.js utility hook

## Development

```bash
# Install dependencies
npm install

# Build the package
npm run build

# Watch mode for development
npm run dev
```

## License

ISC

## Contributing

Please read the contributing guidelines before submitting PRs.