Paradise UI Design System

A beautiful React component library built with Chakra UI and Lato font.

Installation

npm install @sennadprasetyo/paradise-ui-design-system-trial

Setup

Wrap your app with ChakraProvider using our theme to enable Lato font:

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

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

npm install @paradise-ui/design-system

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

🎨 Usage

Basic Setup

Wrap your app with the ChakraProvider and use our theme:

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

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)

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.

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.

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.

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:

npm run dev

Then open 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 file for details.

🤝 Support

• 📧 Email: [email protected]
• 🐛 Issues: GitHub Issues
• 📖 Documentation: Storybook

🔄 Changelog

See CHANGELOG.md for a list of changes and version history.