Cupcake UI

A design system for a fintech startup that is changing the world.

Screenshots

• Storybook home page

• Atomic design: stories

• Combobox storybook: default

• Combobox storybook: open

• Combobox storybook: select

• Combobox storybook: search

Tech Stack

Client: Typescript, React, React hooks, React Router, TailwindCSS, Storybook.

Unit Testing: React Testing Library, Jest.

Storybook

• Cupcake UI - Storybook at Chromatic*

(*) Chromatic: you might need to create an account at chromatic.com

Run Locally

Clone the project

  git clone https://github.com/alxmcr/ds-cupcake-ui-next

Go to the project directory

  cd ds-cupcake-ui-next

Install dependencies

  npm install

Start the storybook server

  npm run storybook

  # http://localhost:6006/

Combobox in Action

Create another React project

npm create vite@latest

# Project name: test-package-001

Installation

• Go to project folder

cd test-package-001

• Install our component library

npm i -D @ds-ale-projects/ds-cupcake-ui-next

Add package styles on your src/main.tsx or src/index.tsx

import '@ds-ale-projects/ds-cupcake-ui-next/dist/index.css';

Create a wrapper component

• Go to components folder

cd src/components

mkdir wrappers
cd wrappers

touch WrapperComboboxes.tsx

• Create wrapper component

import { ComboboxBasic } from '@ds-ale-projects/ds-cupcake-ui-next';

export function WrapperComboboxes() {
  return (
    <div className="flex flex-col gap-3.5 h-[500px]">
      <ComboboxBasic
        defaulLabelText="Elige un usuario"
        emptyMessage="No users"
        id="id"
        labelText="labelText"
        name="name"
        options={[
          {
            id: 'user-001',
            selected: false,
            text: 'Victor Díaz',
            value: 'user-001',
          },
          {
            id: 'user-002',
            selected: false,
            text: 'Jesús Millán',
            value: 'user-002',
          },
          {
            id: 'user-003',
            selected: false,
            text: 'Max Mendez',
            value: 'user-003',
          },
          {
            id: 'user-004',
            selected: false,
            text: 'Nicholas Yepes',
            value: 'user-004',
          },
          {
            id: 'user-005',
            selected: false,
            text: 'David Gonzalez',
            value: 'user-005',
          },
          {
            id: 'a1b2c3d4',
            selected: false,
            text: 'Alice Johnson',
            value: 'a1b2c3d4',
          },
          {
            id: 'e5f6g7h8',
            selected: false,
            text: 'Carlos Martinez',
            value: 'e5f6g7h8',
          },
          {
            id: 'i9j0k1l2',
            selected: false,
            text: 'Emma Smith',
            value: 'i9j0k1l2',
          },
          {
            id: 'm3n4o5p6',
            selected: false,
            text: 'Liam Brown',
            value: 'm3n4o5p6',
          },
          {
            id: 'q7r8s9t0',
            selected: false,
            text: 'Sofia Garcia',
            value: 'q7r8s9t0',
          },
        ]}
      />
    </div>
  );
}

• Update App.tsx

import { WrapperComboboxes } from './components/wrappers/WrapperComboboxes';

function App() {
  return (
    <main>
      <h1>Comboboxes</h1>
      <br />
      <WrapperComboboxes />
    </main>
  );
}

export default App;

• Results

Authors

• Alejandro (@alxmcr)