Personal Shopper UI Kit

A React component library for the Personal Shopper application, built with Vite, TypeScript, and Tailwind CSS.

pnpm install

Start Storybook for component development:

pnpm storybook

Build the library:

pnpm build

Run type checking:

pnpm type-check

Run linting:

pnpm lint

This UI kit includes the following components:

• Dashboard - Main dashboard layout with location picker and action cards
• DashboardCard - Reusable card component for dashboard metrics
• CurrentLocationIndicator - Shows current store location or prompts to select one
• LocationSearch - Search and select Kroger store locations by zip code
• LoginPage - OAuth login page for Kroger authentication
• Navbar - Application navigation bar with user info and logout
• ShoppingListCreator - Create and manage shopping lists

• React 18 - UI library
• TypeScript - Type safety
• Vite - Build tool and dev server
• Tailwind CSS - Utility-first CSS framework
• Storybook - Component development and documentation
• ESLint - Code linting

ui-kit/
├── .storybook/          # Storybook configuration
├── components/          # React components
│   ├── *.tsx           # Component implementations
│   ├── *.stories.tsx   # Storybook stories
│   └── types.ts        # Component type definitions
├── src/
│   ├── components/     # Future home for components (migration)
│   ├── styles/         # Global styles and CSS
│   └── index.ts        # Main library exports
├── dist/               # Built library output
└── storybook-static/   # Built Storybook output

This library uses Tailwind CSS for styling. The configuration includes:

• Custom color palette for branding
• Extended spacing and sizing utilities
• Custom animations and transitions
• Component-specific utility classes

.btn-primary     # Primary button styling
.btn-secondary   # Secondary button styling
.card           # Card container styling
.form-input     # Form input styling

Each component has corresponding Storybook stories for development and documentation. Stories include:

• Default state examples
• Various prop combinations
• Interactive controls for testing
• Documentation and usage examples

Access Storybook at http://localhost:6006 when running pnpm storybook.

• Library mode for component distribution
• TypeScript declaration generation
• React plugin for JSX transform
• Path aliases for cleaner imports

• Strict type checking enabled
• JSX React runtime
• Declaration file generation
• Path mapping for imports

Once published, install the UI kit in your project:

pnpm add personal-shopper-ui-kit

Create val
import { Dashboard, Navbar, LoginPage } from 'personal-shopper-ui-kit';
import type { DashboardProps } from 'personal-shopper-ui-kit';

Make sure to import the CSS in your main application:

Create val
import 'personal-shopper-ui-kit/dist/style.css';

1. Make changes to components in the components/ directory
2. Update or add Storybook stories for new features
3. Run pnpm type-check and pnpm lint before committing
4. Test components in Storybook before integration

This project is part of the Personal Shopper application and follows the same licensing terms.