@lpm.dev/tolgaergin.ex-source

Example configurable source package for E2E testing of the lpm.config.json system.

Install

lpm add @lpm.dev/tolgaergin.ex-source

Or with inline configuration:

lpm add "@lpm.dev/tolgaergin.ex-source?component=button&styling=panda"

To accept all defaults non-interactively:

lpm add @lpm.dev/tolgaergin.ex-source --yes

Usage

Button

import Button from "@/components/ui/button"

export default function App() {
  return (
    <Button variant="solid" size="md">
      Click me
    </Button>
  )
}

Dialog

import Dialog from "@/components/ui/dialog"
import { useState } from "react"

export default function App() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button onClick={() => setOpen(true)}>Open Dialog</button>
      <Dialog open={open} onClose={() => setOpen(false)} title="My Dialog">
        <p>Dialog content goes here.</p>
      </Dialog>
    </>
  )
}

API

Button Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | ReactNode | — | Button content | | variant | "solid" \| "outline" | "solid" | Visual style variant | | size | "sm" \| "md" \| "lg" | "md" | Button size |

Dialog Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | open | boolean | — | Whether the dialog is visible | | onClose | () => void | — | Called when overlay is clicked | | title | string | — | Optional dialog title | | children | ReactNode | — | Dialog body content |

Design Tokens

lib/tokens.js exports a tokens object with semantic color references:

| Token | Value | |-------|-------| | primary | neutral.500 | | primaryHover | neutral.600 | | primaryActive | neutral.700 | | primaryLight | neutral.100 | | primaryDark | neutral.900 |

Configuration Options

This is a configurable source package. When you run lpm add, you'll be prompted for:

| Option | Type | Required | Default | Description | |--------|------|----------|---------|-------------| | component | multi-select | No | All | Which components to install (button, dialog) | | styling | select | Yes | panda | Styling framework (panda, tailwind) | | darkMode | boolean | No | true | Include dark mode CSS support |

Package Structure

ex-source/
├── package.json                    # @lpm.dev/[email protected]
├── lpm.config.json                 # 3 config options
├── components/
│   ├── button/
│   │   ├── index.js
│   │   ├── Button.jsx
│   │   └── Button.style.jsx        # imports @/lib/tokens
│   └── dialog/
│       ├── index.js
│       ├── Dialog.jsx
│       └── Dialog.style.jsx        # imports @/lib/tokens
├── lib/
│   └── tokens.js                   # semantic color tokens
└── styles/
    ├── panda.config.js             # condition: styling=panda
    ├── tailwind.config.js          # condition: styling=tailwind
    └── dark-mode.css               # condition: darkMode=true

What It Tests

| Feature | How it's covered | |---|---| | Conditional includes | Button/dialog files gated on component, style configs on styling, dark mode on darkMode | | Include all by default | Running without ?component=... should install both button AND dialog | | Multi-select | component field has multiSelect: true | | Required field | styling is required: true (prevents "include all" for conflicting dest paths) | | Boolean condition | darkMode controls dark-mode.css | | Glob patterns | components/button/** and components/dialog/** | | Dest path mapping | Components go to button/ and dialog/ | | Conditional dependencies | Panda → @pandacss/dev, Tailwind → tailwindcss + autoprefixer | | Import rewriting | Component files use @/ imports |

E2E Test Scenarios

1. lpm add @lpm.dev/tolgaergin.ex-source — interactive, all components (no component filter)
2. lpm add "@lpm.dev/tolgaergin.ex-source?component=button&styling=panda" — only button, panda
3. lpm add "@lpm.dev/tolgaergin.ex-source?component=dialog,button&styling=tailwind" — both, tailwind
4. lpm add @lpm.dev/tolgaergin.ex-source --yes — defaults, all components
5. lpm add "@lpm.dev/tolgaergin.ex-source?darkMode=false&styling=panda" — no dark-mode.css

Publish first with lpm publish from this directory.

License

MIT