@semanticmx/cooking-ui

React + Tailwind design system for Cocinando con Polo (Chef Polo).

Requirements

• Node.js 20+
• React 18+
• Tailwind CSS 3.4+

Development

Use the Makefile (loads nvm Node 22 automatically):

make help            # list targets
make install
make dev             # Storybook on :6006
make test
make build
make check           # typecheck + lint + test + build

Or run npm directly:

nvm use 22   # or any Node 20+
npm install
npm run dev          # Storybook on :6006
npm run test         # Vitest
npm run build        # Library + tokens to dist/
npm run typecheck
npm run lint

Install in a Next.js (Pages Router) app

npm install @semanticmx/cooking-ui

1. Tailwind preset

// tailwind.config.ts
import type { Config } from 'tailwindcss';
import cookingUI from '@semanticmx/cooking-ui/tailwind';

const config: Config = {
  presets: [cookingUI],
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './node_modules/@semanticmx/cooking-ui/dist/**/*.{js,ts,jsx,tsx}',
  ],
};

export default config;

2. Tokens + ThemeProvider

// pages/_app.tsx
import '@semanticmx/cooking-ui/tokens.css';
import { ThemeProvider, ThemeToggle, ToastProvider } from '@semanticmx/cooking-ui';
import { Plus_Jakarta_Sans } from 'next/font/google';
import type { AppProps } from 'next/app';

const plusJakarta = Plus_Jakarta_Sans({
  subsets: ['latin', 'latin-ext'],
  variable: '--font-family-sans',
  display: 'swap',
});

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider defaultTheme="system">
      <ToastProvider>
        <div className={`${plusJakarta.variable} font-sans`}>
          <Component {...pageProps} />
        </div>
      </ToastProvider>
    </ThemeProvider>
  );
}

3. Anti-flash script (required for system/dark)

// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document';
import { themeAntiFlashScript } from '@semanticmx/cooking-ui';

export default function Document() {
  return (
    <Html>
      <Head>
        <script dangerouslySetInnerHTML={{ __html: themeAntiFlashScript }} />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

4. Usage example

import {
  Button,
  RecipeCard,
  RecipeCollection,
  UnitsToggle,
  ThemeToggle,
} from '@semanticmx/cooking-ui';
import { useState } from 'react';

export default function RecipesPage() {
  const [units, setUnits] = useState<'metric' | 'imperial'>('metric');

  return (
    <>
      <header className="flex justify-end gap-2 p-4">
        <UnitsToggle value={units} onChange={setUnits} />
        <ThemeToggle />
      </header>
      <RecipeCollection title="Recetas populares" cols={3}>
        <RecipeCard
          title="Tacos al Pastor"
          cookTime="45 min"
          difficulty="medium"
          servings={4}
          href="/recetas/tacos-al-pastor"
        />
      </RecipeCollection>
      <Button variant="primary">Ver todas</Button>
    </>
  );
}

Package exports

| Export | Purpose | |--------|---------| | @semanticmx/cooking-ui | Components, providers, utilities | | @semanticmx/cooking-ui/tokens.css | Design tokens (CSS custom properties) | | @semanticmx/cooking-ui/tailwind | Tailwind preset |

Component map

| Layer | Components | |-------|------------| | Primitives | Button, Input, Badge, Card, Avatar, Select, Tabs, Dialog, Toast, Stepper, Header, BottomNav | | Layout | Container, Stack, Cluster, Grid | | Content | VideoPlayer, RecipeCard, RecipeCollection, DietaryBadge, AllergenBadge, ChefProfileHeader, CourseCard, LessonCard, SponsoredProductCallout, IngredientItem, PrintRecipeLayout | | Utilities | ThemeToggle, UnitsToggle | | Providers | ThemeProvider, ToastProvider |

Storybook docs

Open Storybook (make dev) for living docs under Docs/:

• Introduction
• Colors
• Typography
• Spacing
• Icons

Design specs

Living design-system docs:
/Users/cvences/Documents/context/github.com/semanticmx/cooking-ui-library/

Consumer app (Phase 6)

Sample Next.js Pages Router integration lives in the sibling repo:

../cocinando-con-polo

cd ../cooking-ui-library && make build
cd ../cocinando-con-polo && make install && make dev

License

MIT