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-twcss-003

Go to the project directory

  cd ds-cupcake-ui-twcss-003

Install dependencies

  npm install

Start the storybook server

  npm run storybook

  # http://localhost:6006/

Combobox in Action

Create a React project

npm create vite@latest

Installation

npm i -D @ds-ale-projects/ds-cupcake-ui-twcss-003

Example

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

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>
  );
}

Authors

• Alejandro (@alxmcr)