Cuda Design System (CDS)

FishAngler's multi-platform design system for React and SwiftUI applications.

Overview

The Cuda Design System is a monorepo containing shared design tokens and component libraries for building consistent user interfaces across web and iOS platforms. It integrates with Figma through Code Connect for seamless design-to-code workflows.

Packages

Core Packages

• @fishangler/cds-tokens - Shared design tokens (colors, spacing, typography)
• @fishangler/cds-react - React component library
• CudaDesignSystem - SwiftUI component library (Swift Package)

Getting Started

Prerequisites

• Node.js >= 18.0.0
• npm >= 9.0.0
• Xcode >= 14.0 (for Swift development)

Installation

# Install all dependencies
npm install

# Build all packages
npm run build:all

Development

Building Packages

# Build tokens package
npm run build:tokens

# Build React package
npm run build:react

# Build all packages
npm run build:all

Using in Your Project

React/React Native

npm install @fishangler/cds-react @fishangler/cds-tokens

import { Button, IconButton } from '@fishangler/cds-react';

function App() {
  return (
    <Button variant="primary" size="medium">
      Click me
    </Button>
  );
}

SwiftUI

Add to your Package.swift:

dependencies: [
    .package(url: "https://github.com/fishangler/cds.git", from: "0.1.0")
]

import CudaDesignSystem

struct ContentView: View {
    var body: some View {
        CudaButton(
            text: "Click me",
            variant: .primary,
            size: .medium
        ) {
            print("Button tapped")
        }
    }
}

Figma Integration

This design system is integrated with Figma through Code Connect. Component definitions are co-located with their implementations in .figma.tsx and .figma.swift files.

Publishing Code Connect

# Publish React Code Connect mappings
npm run code-connect:publish:react

# Publish Swift Code Connect mappings
npm run code-connect:publish:swift

Project Structure

cds/
├── packages/
│   ├── tokens/           # Shared design tokens
│   ├── react/            # React/React Native components
│   └── swift/            # SwiftUI components
├── package.json          # Root workspace configuration
├── tsconfig.json         # Shared TypeScript configuration
└── README.md             # This file

Contributing

This is an internal FishAngler project. For contributing guidelines, please reach out to the design system team.

License

MIT License - see LICENSE file for details.

Roadmap

• Initial setup with tokens package
• React Button and IconButton components
• SwiftUI Button and IconButton components
• Add testing infrastructure
• Add Storybook documentation
• Add more components (Input, Select, Card, etc.)
• Add Jetpack Compose package for Android
• Add automated token sync across platforms