@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

$3

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

$3

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

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';
``