@useloops/design-system/README.md

The official React based Loops design system

# @useloops/design-system

The design system for the Loops platform and marketing website.

## Generating new components

New components can be generated using `npm run component`.

## Synchronising icons with Figma

- Create a personal access token in Figma in Settings > Security > Personal access tokens
- Create `.env` file in `scripts/useloops-icon-generator/.env`
- Install packages: `cd scripts/useloops-icon-generator && npm install`
- Run `npm run icons` from the root dir
- Check the Brand Core/Icons story in storybook, verify expected icons have been updated


# Importing from @useloops/design-system

This package now supports both barrel imports and individual component imports for better tree-shaking and reduced bundle sizes.

## Import Methods

### 1. Barrel Import (Default - imports everything)
```typescript
import { Button, Avatar, Typography } from '@useloops/design-system';
```

### 2. System-Level Imports
Import all components from a specific system:

```typescript
// WebCore components
import { Button, Avatar, Typography } from '@useloops/design-system/WebCore';

// Platform components
import { Navigation, Header, KpiIndicator } from '@useloops/design-system/Platform';

// BrandCore
import { Icon } from '@useloops/design-system/BrandCore';

// Marketing components
import { PlanTierCard, TickGroup } from '@useloops/design-system/Marketing';

// Theme
import { ThemeProvider, useTheme } from '@useloops/design-system/theme';

// Utils
import { emailValidation, passwordValidation } from '@useloops/design-system/utils';
```

### 3. Individual Component Imports (Best for tree-shaking)
Import components individually for optimal bundle size:

```typescript
import Button from '@useloops/design-system/WebCore/Button';
import Avatar from '@useloops/design-system/WebCore/Avatar';
import Typography from '@useloops/design-system/WebCore/Typography';
import TextField from '@useloops/design-system/WebCore/TextField';

// Platform components
import Navigation from '@useloops/design-system/Platform/Navigation';
import KpiIndicator from '@useloops/design-system/Platform/KpiIndicator';

// BrandCore components
import Icon from '@useloops/design-system/BrandCore/Icon';

// Marketing components
import PlanTierCard from '@useloops/design-system/Marketing/PlanTierCard';
```

## Benefits of Individual Imports

- **Smaller Bundle Size**: Only include the components you actually use
- **Faster Build Times**: Less code to process during bundling
- **Better Tree-Shaking**: Modern bundlers can more easily eliminate unused code
- **Clearer Dependencies**: Explicitly see which components are being used

## Migration Guide

To migrate from barrel imports to individual imports:

**Before:**
```typescript
import { Button, Avatar, Typography, TextField } from '@useloops/design-system';
```

**After (Option 1 - System Level):**
```typescript
import { Button, Avatar, Typography, TextField } from '@useloops/design-system/WebCore';
```

**After (Option 2 - Individual):**
```typescript
import Button from '@useloops/design-system/WebCore/Button';
import Avatar from '@useloops/design-system/WebCore/Avatar';
import Typography from '@useloops/design-system/WebCore/Typography';
import TextField from '@useloops/design-system/WebCore/TextField';
```

## Available Systems

- **BrandCore**: Brand-specific components (Icon)
- **Marketing**: Marketing page components (PlanTierCard, TickGroup, PlanFeatureTable)
- **Platform**: Platform-specific components (Navigation, Header, KpiIndicator, etc.)
- **WebCore**: Core web components (Button, Avatar, TextField, Typography, etc.)
- **theme**: Theme configuration and provider
- **utils**: Utility functions and validation helpers

## TypeScript Support

All import methods include full TypeScript support with proper type definitions:

```typescript
import Button, { ButtonProps } from '@useloops/design-system/WebCore/Button';
import { ThemeProvider } from '@useloops/design-system/theme';
```