npm package: @sennadprasetyo/paradise-ui-design-system-trial
Description: Paradise UI Design System built with Chakra UI and React
Author: Paradise UI Team
Latest version: 2.0.12

# Paradise UI Design System

A beautiful React component library built with Chakra UI and Lato font.

## Installation

```bash
npm install @sennadprasetyo/paradise-ui-design-system-trial
```

## Setup

Wrap your app with ChakraProvider using our theme to enable Lato font:

```jsx
import { ChakraProvider } from "@chakra-ui/react";
import { theme } from "@sennadprasetyo/paradise-ui-design-system-trial";

function App() {
  return (
    <ChakraProvider theme={theme}>{/* Your app components */}</ChakraProvider>
  );
}
```

## Usage

```jsx
import { Button, Text, Loader } from '@sennadprasetyo/paradise-ui-design-system-trial';

// All components automatically use Lato font
<Button>Click me</Button>
<Text>This text uses Lato</Text>
<Loader variant="with-text" text="Loading..." />
```

## Components

### Button

- Multiple variants: primary, secondary, tertiary, quaternary
- Styles: solid, outline
- Sizes: xs, sm, md, lg, xl
- Icon support with plus/minus icons
- Width/height override support

### Text

- Variants: body, caption, label, heading, display
- Customizable font weight
- Uses Lato font family

### Loader

- Custom SVG animation
- Two variants: clean, with-text
- Four sizes: sm (44px), md (62px), lg (80px), xl (108px)
- Width/height override support

## Features

- ✅ **Lato Font Integration** - Automatically loaded via theme
- ✅ **Responsive Design** - Works on all screen sizes
- ✅ **TypeScript Support** - Full type definitions
- ✅ **Customizable** - Easy to override styles
- ✅ **Accessible** - Built with accessibility in mind

## 🚀 Features

- **Consistent Design Tokens**: Colors, typography, spacing, and shadows
- **Custom Components**: Built on top of Chakra UI with additional variants
- **JavaScript Support**: Modern ES6+ JavaScript with React
- **Storybook Documentation**: Interactive component playground
- **Accessible**: Built with accessibility in mind
- **Themeable**: Easy to customize and extend
- **Lato Typography**: Beautiful and readable font family

## 📦 Installation

```bash
npm install @paradise-ui/design-system
```

### Peer Dependencies

Make sure you have the following peer dependencies installed:

```bash
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
```

## 🎨 Usage

### Basic Setup

Wrap your app with the ChakraProvider and use our theme:

```jsx
import { ChakraProvider } from "@chakra-ui/react";
import { theme } from "@paradise-ui/design-system";

function App() {
  return (
    <ChakraProvider theme={theme}>{/* Your app content */}</ChakraProvider>
  );
}
```

### Using Components

```jsx
import { Button, Card, Text } from "@paradise-ui/design-system";

function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <Text variant="heading">Welcome</Text>
      </CardHeader>
      <CardBody>
        <Text>This is a beautiful card with our design system.</Text>
      </CardBody>
      <CardFooter>
        <Button variant="primary" style="solid">
          Get Started
        </Button>
        <Button variant="secondary" style="outline" ml={2}>
          Learn More
        </Button>
        <Button iconOnly icon="plus" variant="primary" style="solid" ml={2} />
        <Button
          icon="minus"
          iconPosition="right"
          variant="tertiary"
          style="outline"
          ml={2}
        >
          Remove
        </Button>
      </CardFooter>
    </Card>
  );
}
```

## 🧩 Components

### Button

A versatile button component with 4 variants, 2 styles, and icon support, all using the Lato font family.

#### Variants

- **Primary**: `#215AA8` - Main action buttons
- **Secondary**: `#1A4886` - Secondary actions
- **Tertiary**: `#143665` - Tertiary actions
- **Quaternary**: `#999999` - Disabled or low-priority actions

#### Styles

- **Solid**: Background color with white text
- **Outline**: Transparent background with colored border and text

#### Icon Support

- **Icon-Only Buttons**: Square buttons with only an icon (no text)
- **Buttons with Icons**: Text buttons with icons positioned left or right
- **Custom Icons**: Plus and minus icons with circular dashed borders
- **Dynamic Colors**: Icons automatically adapt to button style (white for solid, colored for outline)

```jsx
import { Button } from '@paradise-ui/design-system';

// Solid Buttons
<Button variant="primary" style="solid">Primary</Button>
<Button variant="secondary" style="solid">Secondary</Button>
<Button variant="tertiary" style="solid">Tertiary</Button>
<Button variant="quaternary" style="solid">Quaternary</Button>

// Outline Buttons
<Button variant="primary" style="outline">Primary</Button>
<Button variant="secondary" style="outline">Secondary</Button>
<Button variant="tertiary" style="outline">Tertiary</Button>
<Button variant="quaternary" style="outline">Quaternary</Button>

// Icon-Only Buttons
<Button iconOnly icon="plus" variant="primary" style="solid" />
<Button iconOnly icon="minus" variant="secondary" style="outline" />

// Buttons with Icons
<Button icon="plus" iconPosition="left" variant="primary" style="solid">
  Add Item
</Button>
<Button icon="minus" iconPosition="right" variant="secondary" style="outline">
  Remove Item
</Button>

// Sizes
<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>

// Icon Button Sizes
<Button iconOnly icon="plus" size="sm" />
<Button iconOnly icon="plus" size="md" />
<Button iconOnly icon="plus" size="lg" />
```

### Card

A flexible card component with header, body, and footer sections.

```jsx
import {
  Card,
  CardHeader,
  CardBody,
  CardFooter,
} from "@paradise-ui/design-system";

<Card>
  <CardHeader>
    <Text variant="heading">Card Title</Text>
  </CardHeader>
  <CardBody>
    <Text>Card content goes here</Text>
  </CardBody>
  <CardFooter>
    <Button variant="primary" style="solid">
      Action
    </Button>
  </CardFooter>
</Card>;
```

### Text

A typography component with predefined variants using Lato font.

```jsx
import { Text } from '@paradise-ui/design-system';

<Text variant="display">Display Text</Text>
<Text variant="heading">Heading Text</Text>
<Text variant="label">Label Text</Text>
<Text variant="body">Body Text</Text>
<Text variant="caption">Caption Text</Text>
```

### Custom Icons

Custom plus and minus icons with circular dashed borders, designed to match the Paradise UI aesthetic.

```jsx
import { PlusIcon, MinusIcon } from '@paradise-ui/design-system';

// Basic usage
<PlusIcon color="#215AA8" size={22} />
<MinusIcon color="#1A4886" size={18} />

// With custom colors and sizes
<PlusIcon color="white" size={26} />
<MinusIcon color="#143665" size={22} />
```

## 🎨 Design Tokens

### Colors

Our color palette includes:

- **Button Colors**:
  - Primary: `#215AA8`
  - Secondary: `#1A4886`
  - Tertiary: `#143665`
  - Quaternary: `#999999`
- **Gray Scale**: Neutral colors for text and backgrounds
- **Semantic Colors**: Success, warning, and error states

### Typography

- **Font Family**: Lato for all text elements
- **Font Sizes**: Consistent scale from xs to 9xl
- **Font Weights**: Normal, medium, semibold, bold

### Spacing

- **Scale**: 4px base unit system
- **Range**: From 0.25rem to 24rem

### Border Radius

- **Scale**: From none to full
- **Common**: sm, base, md, lg, xl, 2xl, 3xl

## 📚 Storybook

To view all components and their documentation:

```bash
npm run dev
```

Then open [http://localhost:6006](http://localhost:6006) in your browser.

## 🛠 Development

### Prerequisites

- Node.js 16+
- npm or yarn

### Setup

1. Clone the repository
2. Install dependencies: `npm install`
3. Start Storybook: `npm run dev`

### Available Scripts

- `npm run dev` - Start Storybook development server
- `npm run build` - Build the library
- `npm run build:storybook` - Build Storybook for production
- `npm run test` - Run tests
- `npm run lint` - Run ESLint
- `npm run lint:fix` - Fix ESLint errors

### Project Structure

```
src/
├── components/          # React components
│   ├── Button/
│   │   ├── Button.jsx
│   │   ├── Button.stories.jsx
│   │   ├── CustomIcons.jsx
│   │   └── index.js
│   ├── Card/
│   └── Text/
├── theme/              # Design tokens and theme
│   └── index.js
└── index.js           # Main exports
```

## 🎯 Contributing

1. Fork the repository
2. Create a feature branch: `git checkout -b feature/amazing-feature`
3. Make your changes
4. Add tests if applicable
5. Run linting: `npm run lint`
6. Commit your changes: `git commit -m 'Add amazing feature'`
7. Push to the branch: `git push origin feature/amazing-feature`
8. Open a Pull Request

### Component Guidelines

- Use JavaScript for all components
- Extend Chakra UI components when possible
- Include proper JSDoc comments
- Add Storybook stories for all variants
- Ensure accessibility compliance
- Use Lato font family for all text elements

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 🤝 Support

- 📧 Email: design-system@paradise-ui.com
- 🐛 Issues: [GitHub Issues](https://github.com/your-org/paradise-ui-design-system/issues)
- 📖 Documentation: [Storybook](http://localhost:6006)

## 🔄 Changelog

See [CHANGELOG.md](CHANGELOG.md) for a list of changes and version history.