MyCuppa

Getting Started

This guide will help you get started with Cuppa and build your first application.

Prerequisites

Before you begin, make sure you have the following installed:

  • Node.js 20.0.0 or higher
  • pnpm 9.0.0 or higher (recommended) or npm/yarn

Installation

Create a new project and install Cuppa packages:

# Create a new directory
mkdir my-cuppa-app
cd my-cuppa-app

# Initialize package.json
pnpm init

# Install Cuppa packages
pnpm add @mycuppa/core @mycuppa/ui @mycuppa/router

# Install peer dependencies
pnpm add react react-dom
pnpm add -D typescript @types/react @types/react-dom

TypeScript Configuration

Create a tsconfig.json file:

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

Your First Component

Create src/App.tsx:

import { Button, Container } from '@mycuppa/ui'
import { useTheme } from '@mycuppa/ui'

export function App() {
  const { theme, setTheme } = useTheme()

  return (
    <Container>
      <h1>Welcome to Cuppa!</h1>
      <Button
        variant="primary"
        onClick={() => {
          console.log('Button clicked!')
        }}
      >
        Get Started
      </Button>
    </Container>
  )
}

Adding Routing

Set up routing in src/main.tsx:

import { createRouter } from '@mycuppa/router'
import { setRouter } from '@mycuppa/router'

const router = createRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      handler: () => import('./pages/Home'),
    },
    {
      path: '/about',
      handler: () => import('./pages/About'),
    },
  ],
})

setRouter(router)

Next Steps

Now that you have Cuppa installed, explore the individual packages: