@lukoweb/apitogo 0.1.24 → 0.1.37

package/docs/components/markdown.mdx

@@ -0,0 +1,151 @@
+---
+title: Markdown
+sidebar_icon: heading-1
+---
+
+A component for rendering markdown content with syntax highlighting and custom components.
+
+## Import
+
+```tsx
+import { Markdown } from "@lukoweb/apitogo/components";
+```
+
+## Props
+
+```ts
+type MarkdownProps = {
+  content: string;
+  className?: string;
+  components?: Components;
+};
+```
+
+## Usage
+
+### Basic Markdown
+
+```tsx
+<Markdown content="# Hello World\n\nThis is **bold** text." />
+```
+
+### With Custom Styling
+
+```tsx
+<Markdown content="# Styled Content" className="max-w-2xl mx-auto" />
+```
+
+### With Custom Components
+
+```tsx
+const customComponents = {
+  h1: ({ children }) => <h1 className="text-4xl font-bold text-blue-600">{children}</h1>,
+  p: ({ children }) => <p className="text-gray-700 leading-relaxed">{children}</p>,
+};
+
+<Markdown content="# Custom Heading\n\nCustom paragraph styling." components={customComponents} />;
+```
+
+:::info
+
+Custom components provided via the `components` prop will merge with default MDX components,
+allowing you to override specific elements while keeping others intact.
+
+:::
+
+## Features
+
+- **GitHub Flavored Markdown**: Full GFM support including tables, strikethrough, and task lists
+- **Syntax Highlighting**: Code blocks with configurable Shiki themes
+- **Raw HTML Support**: Safely renders HTML mixed with markdown
+- **Custom Components**: Override default markdown elements with custom React components
+- **Prose Styling**: Built-in typography styles with dark mode support
+
+## Supported Markdown
+
+### Headers
+
+```markdown
+# H1 Header
+
+## H2 Header
+
+### H3 Header
+```
+
+### Emphasis
+
+<!-- prettier-ignore -->
+```markdown
+_italic_ or *italic*
+**bold** or __bold__
+**_bold italic_**
+~~strikethrough~~
+```
+
+### Lists
+
+```markdown
+- Unordered list item
+- Another item
+  - Nested item
+
+1. Ordered list item
+2. Another numbered item
+```
+
+### Code
+
+The Markdown component supports both inline code and code blocks with syntax highlighting.
+
+**Inline code** with backticks:
+
+```markdown
+Inline `code` with backticks
+```
+
+**Code blocks** with syntax highlighting:
+
+````markdown
+```javascript
+// Code block with syntax highlighting
+function hello() {
+  console.log("Hello, world!");
+}
+```
+````
+
+For advanced syntax highlighting features like line numbers, titles, and line highlighting, see:
+
+- [Code Blocks](/docs/markdown/code-blocks) - Markdown code block syntax and features
+- [Syntax Highlight](/docs/components/syntax-highlight) - React component for syntax highlighting
+
+### Links and Images
+
+```markdown
+[Link text](https://example.com) ![Alt text](image.jpg)
+```
+
+### Tables
+
+```markdown
+| Column 1 | Column 2 |
+| -------- | -------- |
+| Cell 1   | Cell 2   |
+| Cell 3   | Cell 4   |
+```
+
+## Configuration
+
+The Markdown component automatically uses:
+
+- **Remark GFM**: For GitHub Flavored Markdown features
+- **Rehype Raw**: For HTML support
+- **Shiki**: For syntax highlighting with your configured themes
+
+:::tip
+
+The Markdown component integrates with APIToGo's syntax highlighting configuration and will use the
+same themes as configured in your APIToGo options.
+
+:::

package/docs/components/mermaid.mdx

@@ -0,0 +1,81 @@
+---
+title: Mermaid
+sidebar_icon: chart-network
+description: Render Mermaid diagrams dynamically with client-side rendering.
+---
+
+import { Mermaid } from "@lukoweb/apitogo/mermaid";
+
+The `Mermaid` component renders [Mermaid diagrams](https://mermaid.js.org/) in the browser using
+client-side rendering.
+
+<br />
+
+:::info{title="Build-Time Alternative"}
+
+For static diagrams, consider [build-time rendering with rehype-mermaid](/docs/guides/mermaid).
+
+:::
+
+## Prerequisites
+
+Install the `mermaid` peer dependency:
+
+```bash
+npm install mermaid
+```
+
+## Import
+
+```tsx
+import { Mermaid } from "@lukoweb/apitogo/mermaid";
+```
+
+## Props
+
+```ts
+type MermaidProps = {
+  chart: string; // Mermaid diagram definition
+  config?: MermaidConfig; // Optional Mermaid configuration
+} & ComponentProps<"div">;
+```
+
+## Usage
+
+### Basic Usage
+
+```tsx
+<Mermaid
+  chart={`graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;`}
+/>
+```
+
+<Mermaid
+  chart={`graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;`}
+/>
+
+### With Configuration
+
+```tsx
+<Mermaid
+  config={{ theme: "dark" }}
+  chart={`sequenceDiagram
+    Alice->>Bob: Hello Bob
+    Bob-->>Alice: Hi Alice`}
+/>
+```
+
+<Mermaid
+  config={{ theme: "dark" }}
+  chart={`sequenceDiagram
+    Alice->>Bob: Hello Bob
+    Bob-->>Alice: Hi Alice`}
+/>

package/docs/components/playground.mdx

@@ -0,0 +1,87 @@
+---
+title: API Playground
+sidebar_icon: circle-play
+---
+
+You can use this component to allow users to test your API anywhere in your documentation.
+
+This component is **only available in [MDX files](/docs/markdown/mdx)** and you can use it directly
+without any imports:
+
+```tsx
+<OpenPlaygroundButton {...props} />
+```
+
+:::tip{title="Hot tip"}
+
+The Playground can point to any API endpoint, even if it's not in the API catalog.
+
+:::
+
+## Props
+
+```ts
+type PlaygroundProps = {
+  server: string;
+  url: string;
+  method: string;
+  headers?: Header[];
+  pathParams?: PathParam[];
+  queryParams?: QueryParam[];
+  body?: string;
+};
+```
+
+## Examples
+
+### Zuplo Echo
+
+In this example, we're using the Zuplo Echo API to test the `POST /hello-world/{name}` endpoint.
+
+<OpenPlaygroundButton
+  server="https://echo.zuplo.io/"
+  url="/hello-world/{name}"
+  headers={[{ name: "X-APIToGo-Playground", defaultValue: "Hello World" }]}
+  pathParams={[{ name: "name", defaultValue: "John" }]}
+  queryParams={[
+    { name: "age", defaultValue: "30" },
+    { name: "city", defaultValue: "New York" },
+  ]}
+  body={JSON.stringify({ message: "Hello World" })}
+  method="POST"
+/>
+
+```tsx
+<OpenPlaygroundButton
+  server="https://echo.zuplo.io/"
+  url="/hello-world/{name}"
+  headers={[
+    {
+      name: "X-APIToGo-Playground",
+      defaultValue: "Hello World",
+    },
+  ]}
+  pathParams={[{ name: "name", defaultValue: "John" }]}
+  queryParams={[
+    { name: "age", defaultValue: "30" },
+    { name: "city", defaultValue: "New York" },
+  ]}
+  body={JSON.stringify({ message: "Hello World" })}
+  method="POST"
+/>
+```
+
+### JSON Placeholder
+
+In this example, we're using the JSON Placeholder API to test the `GET /photos` endpoint. We can
+also change the Text on the button to something more specific to the API.
+
+<OpenPlaygroundButton server="https://jsonplaceholder.typicode.com" url="/photos" method="GET">
+  Test Photos Endpoint
+</OpenPlaygroundButton>
+
+```tsx
+<OpenPlaygroundButton server="https://jsonplaceholder.typicode.com" url="/photos" method="GET">
+  Test Photos Endpoint
+</OpenPlaygroundButton>
+```

package/docs/components/secret.mdx

@@ -0,0 +1,79 @@
+---
+title: Secret
+sidebar_icon: lock
+description: Use the Secret component to display and manage API keys in your APIToGo application.
+---
+
+import { Secret } from "@lukoweb/apitogo/ui/Secret";
+import { Value } from "@lukoweb/apitogo/ui/Value";
+
+The `Secret` component can be used to display secrets, typically API keys, in your APIToGo
+application.
+
+## Import
+
+```tsx
+import { Secret } from "@lukoweb/apitogo/ui/Secret";
+```
+
+## Usage
+
+```tsx
+<Secret
+  secret="pkcd_this-is-a-never-01K1DASDXXQDA9S6GKASKYAFSDH"
+  status="active"
+  preview={5}
+  onCopy={(secret) => {
+    console.log("Copied secret:", secret);
+  }}
+  onReveal={(revealed) => {
+    console.log("Revealed:", revealed);
+  }}
+/>
+```
+
+ <div className="flex flex-col gap-2">
+<Secret
+  secret="pkcd_this-is-a-never-01K1DASDXXQDA9S6GKASKYAFSDH"
+  status="active"
+  className="max-w-fit"
+/>
+
+<Secret
+  secret="pkcd_this-is-a-gonna-01K1DAFSDHAS9S6GE5KASKYSDXX"
+  status="expiring"
+  className="max-w-fit"
+/>
+
+<Secret
+  secret="pkcd_this-is-a-give-01K1DAFSSDHOOASDD9S6KYGE5KAS"
+  status="expired"
+  className="max-w-fit"
+/>
+
+<Secret
+  secret="pkcd_this-is-a-you-01K1DAGDN0NDDHXS7VBYGFME1SFSR"
+  status="revoked"
+  className="max-w-fit"
+/>
+
+<Secret
+  secret="pkcd_this-is-a-you-01K1DAGDN0NDDHXS7VBYGFME1SFSR"
+  status="none"
+  className="max-w-fit"
+/>
+
+<Secret secret="pkcd_this-is-a-up-01K1DAFSDHASDXXSQDA9S6GE5KASKY" className="max-w-fit" />
+
+<div className="flex flex-col gap-0 max-w-fit not-prose">
+  <span className="text-sm font-medium">Client ID</span>
+  <Value
+    value="client-id-01985b58-d7af-71eb-a27e-b2062935ece4"
+    className="w-full"
+  />
+  <span className="text-sm font-medium">Client Secret</span>
+  <Secret
+    secret="pkcd_this-is-a-up-01K1DAFSDHASDXXSQDA9S6GE5KASKY"
+  />
+</div>
+</div>

package/docs/components/select.mdx

@@ -0,0 +1,176 @@
+---
+title: Select
+sidebar_icon: chevron-down
+---
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "@lukoweb/apitogo/ui/Select";
+import { Label } from "@lukoweb/apitogo/ui/Label";
+
+A select component built on Radix UI primitives for choosing from a list of options.
+
+## Import
+
+<!-- prettier-ignore -->
+```tsx
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@lukoweb/apitogo/ui/Select";
+```
+
+## Components
+
+The Select component consists of several sub-components:
+
+- `Select` - The main container (root)
+- `SelectTrigger` - Button that opens the select menu
+- `SelectValue` - Displays the selected value
+- `SelectContent` - The dropdown content container
+- `SelectItem` - Individual selectable option
+- `SelectLabel` - Section labels within the dropdown
+- `SelectSeparator` - Visual separator between groups
+- `SelectGroup` - Groups related items together
+
+## Basic Usage
+
+<Select>
+  <SelectTrigger className="w-[180px]">
+    <SelectValue placeholder="Select a fruit" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="apple">Apple</SelectItem>
+    <SelectItem value="banana">Banana</SelectItem>
+    <SelectItem value="blueberry">Blueberry</SelectItem>
+    <SelectItem value="grapes">Grapes</SelectItem>
+    <SelectItem value="pineapple">Pineapple</SelectItem>
+  </SelectContent>
+</Select>
+
+```tsx
+<Select>
+  <SelectTrigger className="w-[180px]">
+    <SelectValue placeholder="Select a fruit" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="apple">Apple</SelectItem>
+    <SelectItem value="banana">Banana</SelectItem>
+    <SelectItem value="blueberry">Blueberry</SelectItem>
+    <SelectItem value="grapes">Grapes</SelectItem>
+    <SelectItem value="pineapple">Pineapple</SelectItem>
+  </SelectContent>
+</Select>
+```
+
+## With Labels and Groups
+
+<Select>
+  <SelectTrigger className="w-[280px]">
+    <SelectValue placeholder="Select a timezone" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectGroup>
+      <SelectLabel>North America</SelectLabel>
+      <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
+      <SelectItem value="cst">Central Standard Time (CST)</SelectItem>
+      <SelectItem value="mst">Mountain Standard Time (MST)</SelectItem>
+      <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
+      <SelectItem value="akst">Alaska Standard Time (AKST)</SelectItem>
+      <SelectItem value="hst">Hawaii Standard Time (HST)</SelectItem>
+    </SelectGroup>
+    <SelectSeparator />
+    <SelectGroup>
+      <SelectLabel>Europe & Africa</SelectLabel>
+      <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
+      <SelectItem value="cet">Central European Time (CET)</SelectItem>
+      <SelectItem value="eet">Eastern European Time (EET)</SelectItem>
+      <SelectItem value="west">Western European Summer Time (WEST)</SelectItem>
+      <SelectItem value="cat">Central Africa Time (CAT)</SelectItem>
+      <SelectItem value="eat">East Africa Time (EAT)</SelectItem>
+    </SelectGroup>
+  </SelectContent>
+</Select>
+
+```tsx
+<Select>
+  <SelectTrigger className="w-[280px]">
+    <SelectValue placeholder="Select a timezone" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectGroup>
+      <SelectLabel>North America</SelectLabel>
+      <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
+      <SelectItem value="cst">Central Standard Time (CST)</SelectItem>
+      <SelectItem value="mst">Mountain Standard Time (MST)</SelectItem>
+      <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
+      <SelectItem value="akst">Alaska Standard Time (AKST)</SelectItem>
+      <SelectItem value="hst">Hawaii Standard Time (HST)</SelectItem>
+    </SelectGroup>
+    <SelectSeparator />
+    <SelectGroup>
+      <SelectLabel>Europe & Africa</SelectLabel>
+      <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
+      <SelectItem value="cet">Central European Time (CET)</SelectItem>
+      <SelectItem value="eet">Eastern European Time (EET)</SelectItem>
+      <SelectItem value="west">Western European Summer Time (WEST)</SelectItem>
+      <SelectItem value="cat">Central Africa Time (CAT)</SelectItem>
+      <SelectItem value="eat">East Africa Time (EAT)</SelectItem>
+    </SelectGroup>
+  </SelectContent>
+</Select>
+```
+
+## With Label
+
+<div className="grid w-full max-w-sm items-center gap-1.5">
+  <Label htmlFor="framework">Framework</Label>
+  <Select>
+    <SelectTrigger id="framework">
+      <SelectValue placeholder="Select" />
+    </SelectTrigger>
+    <SelectContent position="popper">
+      <SelectItem value="next">Next.js</SelectItem>
+      <SelectItem value="sveltekit">SvelteKit</SelectItem>
+      <SelectItem value="nuxt">Nuxt.js</SelectItem>
+      <SelectItem value="remix">Remix</SelectItem>
+      <SelectItem value="astro">Astro</SelectItem>
+    </SelectContent>
+  </Select>
+</div>
+
+```tsx
+<div className="grid w-full max-w-sm items-center gap-1.5">
+  <Label htmlFor="framework">Framework</Label>
+  <Select>
+    <SelectTrigger id="framework">
+      <SelectValue placeholder="Select" />
+    </SelectTrigger>
+    <SelectContent position="popper">
+      <SelectItem value="next">Next.js</SelectItem>
+      <SelectItem value="sveltekit">SvelteKit</SelectItem>
+      <SelectItem value="nuxt">Nuxt.js</SelectItem>
+      <SelectItem value="remix">Remix</SelectItem>
+      <SelectItem value="astro">Astro</SelectItem>
+    </SelectContent>
+  </Select>
+</div>
+```
+
+## Features
+
+- **Keyboard Navigation**: Full keyboard support for navigation and selection
+- **Accessibility**: Proper ARIA attributes and screen reader support
+- **Controlled/Uncontrolled**: Can be used with or without state management
+- **Searchable**: Built-in search functionality when typing
+- **Custom Positioning**: Flexible positioning options

package/docs/components/shadcn.mdx

@@ -0,0 +1,73 @@
+---
+sidebar_label: shadcn/ui
+sidebar_icon: puzzle
+---
+
+All shadcn/ui components are available for direct import from their respective UI modules:
+
+export const components = [
+  "Accordion",
+  "Alert",
+  "AspectRatio",
+  "Badge",
+  "Breadcrumb",
+  "Button",
+  "Card",
+  "Carousel",
+  "Checkbox",
+  "Collapsible",
+  "Command",
+  "Dialog",
+  "Drawer",
+  "DropdownMenu",
+  "Form",
+  "HoverCard",
+  "Input",
+  "Label",
+  "Pagination",
+  "Popover",
+  "Progress",
+  "RadioGroup",
+  "ScrollArea",
+  "Select",
+  "Skeleton",
+  "Slider",
+  "Switch",
+  "Tabs",
+  "Textarea",
+  "Toggle",
+  "ToggleGroup",
+  "Tooltip",
+];
+
+# `shadcn/ui` components
+
+We use a couple components from [shadcn/ui](https://ui.shadcn.com). To make them re-usable for and
+use them in your project you can import them from `@lukoweb/apitogo/ui/*`.
+
+For example:
+
+```tsx
+import { Button } from "@lukoweb/apitogo/ui/Button";
+```
+
+Following components are available:
+
+<ul className="grid grid-cols-2 sm:grid-cols-3">
+  {components.map((comp) => {
+    const link = comp.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+
+    return (
+      <li key={comp}>
+        <a
+          target="_blank"
+          href={`https://ui.shadcn.com/docs/components/${link}`}
+        >
+          {comp}
+        </a>
+      </li>
+    );
+
+})}
+
+</ul>