Markdown Converter
Agent skill for markdown-converter
MacawUI is Saleor's React component library focused on dashboard-like interfaces (admin panels, cloud consoles, apps). It's NOT designed for end-user interfaces like storefronts. The library uses Vanilla Extract for styling and Radix UI primitives for accessible component foundations.
Sign in to like and favorite skills
MacawUI is Saleor's React component library focused on dashboard-like interfaces (admin panels, cloud consoles, apps). It's NOT designed for end-user interfaces like storefronts. The library uses Vanilla Extract for styling and Radix UI primitives for accessible component foundations.
pnpm dev # Start Storybook on port 6006 pnpm dev:docs # Start Storybook in docs mode pnpm watch # Build in watch mode (useful for Dashboard development)
pnpm test # Run Vitest tests pnpm check-types # Run TypeScript type checking pnpm lint # Lint and auto-fix TypeScript/JavaScript files
pnpm build # Type check and build library for production pnpm build-storybook # Build Storybook static site with docs pnpm bundle-visualizer # Build with bundle size visualization
pnpm change:add # Add a changeset describing your changes
.css.ts filessrc/theme/sprinkles.css.ts providing responsive props (padding, margin, grid, etc.)src/theme/contract.css.ts, implemented by themes in src/theme/themes/src/components/Box) that accepts sprinkles props. Most components extend Box via PropsWithBoxdefaultLight and defaultDark (see src/theme/themes/)ThemeProvider wraps app and provides theme contextuseTheme() hook to access/change theme programmaticallygetCSSVariables() helper in _document.tsxComponents follow this pattern:
ComponentName/ ├── ComponentName.tsx # Main component implementation ├── ComponentName.css.ts # Vanilla Extract styles ├── ComponentName.stories.tsx # Storybook stories ├── index.ts # Exports └── utils.ts (optional) # Component-specific utilities
Box to inherit sprinkles styling propssrc/components/index.tslucide-react (optional peer dependency)~/ resolves to src/ (configured in tsconfig and vite.config)~/ for internal imports (enforced by ESLint)~/...)../)./)forwardRef where appropriatePropsWithBox<> for components that extend BoxtabletMediaQuery, desktopMediaQuery.css.ts filesconsole statements allowed (ESLint error)setupTest.ts (extends expect with jest-dom matchers)Uses
@dessert-box/react to merge Box-like sprinkles props with component props. This enables composition like:
<Button padding={4} marginTop={2}> Click me </Button>
All components export from
src/components/index.ts for single import point:
import { Button, Input, Modal } from "@saleor/macaw-ui";
.stories.tsx showing variants and use cases.eslintrc.cjs overrides)lucide-react are optional peer dependencyHusky runs lint-staged which:
eslint --fix on TS/JS filesprettier --write on all filesEnsure code passes before committing.
Managed via Changesets:
pnpm change:add to document changesSee
adr/ directory for key decisions: