zuplo 6.67.32 → 6.68.0

package/docs/dev-portal/zudoku/components/label.mdx

@@ -0,0 +1,86 @@
+---
+title: Label
+sidebar_icon: tag
+---
+
+import { Label } from "zudoku/ui/Label";
+import { Input } from "zudoku/ui/Input";
+import { Textarea } from "zudoku/ui/Textarea";
+import { Checkbox } from "zudoku/ui/Checkbox";
+
+A form label component built on Radix UI primitives with proper accessibility support.
+
+## Import
+
+```tsx
+import { Label } from "zudoku/ui/Label";
+```
+
+## Basic Usage
+
+<Label htmlFor="email">Email</Label>
+
+```tsx
+<Label htmlFor="email">Email</Label>
+```
+
+## With Input
+
+<div className="grid w-full max-w-sm items-center gap-1.5">
+  <Label htmlFor="email">Email</Label>
+  <Input type="email" id="email" placeholder="Email" />
+</div>
+
+```tsx
+<div className="grid w-full max-w-sm items-center gap-1.5">
+  <Label htmlFor="email">Email</Label>
+  <Input type="email" id="email" placeholder="Email" />
+</div>
+```
+
+## With Textarea
+
+<div className="grid w-full gap-1.5">
+  <Label htmlFor="message">Your message</Label>
+  <Textarea placeholder="Type your message here." id="message" />
+</div>
+
+```tsx
+<div className="grid w-full gap-1.5">
+  <Label htmlFor="message">Your message</Label>
+  <Textarea placeholder="Type your message here." id="message" />
+</div>
+```
+
+## With Checkbox
+
+<div className="flex items-center space-x-2">
+  <Checkbox id="terms" />
+  <Label
+    htmlFor="terms"
+    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  >
+    Accept terms and conditions
+  </Label>
+</div>
+
+```tsx
+<div className="flex items-center space-x-2">
+  <Checkbox id="terms" />
+  <Label
+    htmlFor="terms"
+    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  >
+    Accept terms and conditions
+  </Label>
+</div>
+```
+
+## Accessibility
+
+The Label component automatically handles proper accessibility attributes when used with form
+controls:
+
+- Associates the label with form controls via `htmlFor` prop
+- Provides screen reader support
+- Enables clicking the label to focus the associated control

package/docs/dev-portal/zudoku/components/link.mdx

@@ -0,0 +1,242 @@
+---
+title: Link
+sidebar_icon: link
+---
+
+A navigation component that provides client-side routing capabilities for internal links and
+external link handling.
+
+## Import
+
+```tsx
+import { Link } from "zudoku/components";
+```
+
+## Usage
+
+### Basic Internal Link
+
+```tsx
+<Link to="/docs/getting-started">Get Started</Link>
+```
+
+### Link with State
+
+```tsx
+<Link to="/profile" state={{ from: "header" }}>
+  Profile
+</Link>
+```
+
+### Replace History Entry
+
+```tsx
+<Link to="/login" replace>
+  Login
+</Link>
+```
+
+### External Link Behavior
+
+```tsx
+<Link to="/docs" reloadDocument>
+  Full Page Reload
+</Link>
+```
+
+## Examples
+
+### Navigation Menu
+
+```tsx
+function Navigation() {
+  return (
+    <nav>
+      <Link to="/">Home</Link>
+      <Link to="/docs">Documentation</Link>
+      <Link to="/api">API Reference</Link>
+      <Link to="/blog">Blog</Link>
+    </nav>
+  );
+}
+```
+
+### Breadcrumb Navigation
+
+```tsx
+function Breadcrumbs({ path }) {
+  return (
+    <div className="breadcrumbs">
+      <Link to="/">Home</Link>
+      <span>/</span>
+      <Link to="/docs">Docs</Link>
+      <span>/</span>
+      <span>{path}</span>
+    </div>
+  );
+}
+```
+
+### Dynamic Links
+
+```tsx
+function DocsList({ docs }) {
+  return (
+    <ul>
+      {docs.map((doc) => (
+        <li key={doc.id}>
+          <Link to={`/docs/${doc.slug}`}>{doc.title}</Link>
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+### Conditional Linking
+
+```tsx
+function ConditionalLink({ to, disabled, children }) {
+  if (disabled) {
+    return <span className="disabled-link">{children}</span>;
+  }
+
+  return <Link to={to}>{children}</Link>;
+}
+```
+
+## Link Types
+
+### Relative Links
+
+```tsx
+// Relative to current route
+<Link to="../parent-page">Up one level</Link>
+
+// Relative to path
+<Link to="./sibling-page" relative="path">
+  Sibling page
+</Link>
+```
+
+### Absolute Links
+
+```tsx
+<Link to="/absolute/path">Absolute Path</Link>
+```
+
+### Query Parameters
+
+```tsx
+<Link to="/search?q=react&type=docs">Search Results</Link>
+```
+
+### Hash Links
+
+```tsx
+<Link to="/docs/api#authentication">Authentication Section</Link>
+```
+
+## Advanced Usage
+
+### With Custom Styling
+
+```tsx
+<Link to="/important-page" className="text-blue-600 hover:text-blue-800 underline">
+  Important Page
+</Link>
+```
+
+### Programmatic Navigation
+
+```tsx
+import { useNavigate } from "react-router";
+
+function MyComponent() {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    // Perform some logic
+    navigate("/next-page");
+  };
+
+  return (
+    <div>
+      <Link to="/direct-link">Direct Link</Link>
+      <button onClick={handleClick}>Programmatic Navigation</button>
+    </div>
+  );
+}
+```
+
+### Link with Confirmation
+
+```tsx
+function DeleteLink({ itemId }) {
+  const handleClick = (e) => {
+    if (!confirm("Are you sure you want to delete this item?")) {
+      e.preventDefault();
+    }
+  };
+
+  return (
+    <Link to={`/items/${itemId}/delete`} onClick={handleClick} className="text-red-600">
+      Delete Item
+    </Link>
+  );
+}
+```
+
+## Integration with Button
+
+Use the Link component with the Button component's `asChild` prop:
+
+```tsx
+<Button asChild variant="outline">
+  <Link to="/action">Perform Action</Link>
+</Button>
+```
+
+## Accessibility
+
+The Link component maintains accessibility best practices:
+
+- Proper focus management
+- Keyboard navigation support
+- Screen reader compatibility
+- Semantic HTML structure
+
+```tsx
+<Link to="/help" aria-label="Get help and support">
+  Help
+</Link>
+```
+
+## Performance
+
+- **Client-side routing**: No full page reloads for internal navigation
+- **Prefetching**: Intelligent prefetching of linked resources
+- **View transitions**: Smooth transitions between pages (when supported)
+
+## Notes
+
+:::tip
+
+The Link component is optimized for internal navigation and provides the best user experience for
+single-page application routing.
+
+:::
+
+:::info
+
+For external links, use a regular `<a>` tag instead of the Link component to ensure proper external
+navigation behavior.
+
+:::
+
+:::caution
+
+When using `reloadDocument`, the link will perform a full page reload, which may impact performance
+and user experience.
+
+:::

package/docs/dev-portal/zudoku/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 "zudoku/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](/dev-portal/zudoku/markdown/code-blocks) - Markdown code block syntax and features
+- [Syntax Highlight](/dev-portal/zudoku/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 Zudoku's syntax highlighting configuration and will use the
+same themes as configured in your Dev Portal options.
+
+:::

package/docs/dev-portal/zudoku/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 "zudoku/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](/dev-portal/zudoku/guides/mermaid).
+
+:::
+
+## Prerequisites
+
+Install the `mermaid` peer dependency:
+
+```bash
+npm install mermaid
+```
+
+## Import
+
+```tsx
+import { Mermaid } from "zudoku/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/dev-portal/zudoku/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](/dev-portal/zudoku/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-Zudoku-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-Zudoku-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/dev-portal/zudoku/components/secret.mdx

@@ -0,0 +1,78 @@
+---
+title: Secret
+sidebar_icon: lock
+description: Use the Secret component to display and manage API keys in your Dev Portal application.
+---
+
+import { Secret } from "zudoku/ui/Secret";
+import { Value } from "zudoku/ui/Value";
+
+The `Secret` component can be used to display secrets, typically API keys, in your Dev Portal application.
+
+## Import
+
+```tsx
+import { Secret } from "zudoku/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>