zuplo 6.67.32 → 6.68.0

package/docs/dev-portal/zudoku/components/syntax-highlight.mdx

@@ -0,0 +1,602 @@
+---
+title: Syntax Highlight
+sidebar_icon: code
+---
+
+import { SyntaxHighlight } from "zudoku/ui/SyntaxHighlight";
+import { Callout } from "zudoku/ui/Callout";
+
+Add syntax highlighting to your code blocks with customizable styling and features. The component
+offers extensive customization options including line numbers, copy buttons, language indicators,
+and custom theming to match your brand. For simpler use cases, you can also use standard Markdown
+code blocks as described in [Code Blocks](/dev-portal/zudoku/markdown/code-blocks).
+
+:::tip
+
+You can also use backticks to highlight code blocks in Markdown files, see
+[Code Blocks](../markdown/code-blocks) for more information.
+
+:::
+
+## Import
+
+```tsx
+import { SyntaxHighlight } from "zudoku/ui/SyntaxHighlight";
+```
+
+## Types
+
+```ts
+type SyntaxHighlightProps = {
+  language?: string;
+  code?: string;
+  wrapLines?: boolean;
+  title?: string;
+  showCopy?: "hover" | "always" | "never";
+  showCopyText?: boolean;
+  children?: string;
+  showLanguageIndicator?: boolean;
+  className?: string;
+  showLineNumbers?: boolean;
+};
+```
+
+## Usage
+
+You can either use `children` or `code` prop to pass the code to the component.
+
+```tsx
+<SyntaxHighlight language="typescript">
+  {`for (let i = 0; i < Infinity; i++) {
+  console.log(i);
+}`}
+</SyntaxHighlight>
+```
+
+## Result
+
+<SyntaxHighlight language="typescript">
+  {`for (let i = 0; i < Infinity; i++) {
+  console.log(i);
+}`}
+</SyntaxHighlight>
+
+## Supported Languages
+
+Here are examples for all supported languages:
+
+### TypeScript / JavaScript / TSX
+
+```typescript title="User.ts"
+interface User {
+  name: string;
+  age: number;
+}
+
+const greet = (user: User): string => `Hello, ${user.name}!`;
+```
+
+```javascript title="fibonacci.js"
+function fibonacci(n) {
+  if (n <= 1) return n;
+  return fibonacci(n - 1) + fibonacci(n - 2);
+}
+
+console.log(fibonacci(10));
+```
+
+```tsx title="App.tsx"
+export const App = () => {
+  return <div>Hello, World!</div>;
+};
+```
+
+### Markdown / MDX
+
+```markdown title="hello.md"
+# Hello World
+
+This is **bold** and _italic_ text.
+
+- Item 1
+- Item 2
+
+[Link to Zudoku](https://zudoku.dev)
+```
+
+```mdx title="welcome.mdx"
+import { Button } from "./Button";
+
+# Welcome to MDX
+
+<Button onClick={() => alert("Hello!")}>Click me</Button>
+```
+
+### JSON / YAML / TOML
+
+```json title="package.json"
+{
+  "name": "zudoku",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  }
+}
+```
+
+```yaml title="package.yml"
+name: zudoku
+version: 1.0.0
+scripts:
+  dev: vite
+  build: vite build
+```
+
+```toml title="package.toml"
+[package]
+name = "zudoku"
+version = "1.0.0"
+
+[dependencies]
+react = "^19.0.0"
+```
+
+### Shell / Bash / Terminal
+
+```bash title="build.sh"
+#!/bin/bash
+
+# Install and build
+npm install
+
+if [ "$NODE_ENV" = "production" ]; then
+  npm run build
+else
+  npm run dev
+fi
+```
+
+```ansi title=ANSI
+$ pnpm run build
+
+> zudoku@1.0.0 build
+
+vite v7.0.5 building for production...
+✓ 34 modules transformed.
+dist/index.html                 0.46 kB │ gzip:  0.30 kB
+dist/assets/index-4sK2hL.css   24.67 kB │ gzip:  4.72 kB
+dist/assets/index-B1tPwS.js   143.18 kB │ gzip: 46.13 kB
+✓ built in 1.23s
+```
+
+### GraphQL
+
+```graphql title="schema.graphql"
+type User {
+  id: ID!
+  name: String!
+  email: String!
+}
+
+type Query {
+  user(id: ID!): User
+  users: [User!]!
+}
+
+type Mutation {
+  createUser(name: String!, email: String!): User!
+}
+```
+
+### Python
+
+```python title="data_processor.py"
+import asyncio
+from typing import List, Optional
+
+class DataProcessor:
+    def __init__(self, name: str):
+        self.name = name
+
+    async def process_items(self, items: List[str]) -> dict:
+        results = [await self._process(item) for item in items]
+        return {"processed": len(results), "items": results}
+```
+
+### C#
+
+```csharp title="user_service.cs"
+using System;
+using System.Linq;
+
+public class UserService {
+    private readonly List<User> _users = new();
+
+    public async Task<User?> GetUserAsync(int id) {
+        await Task.Delay(100);
+        return _users.FirstOrDefault(u => u.Id == id);
+    }
+}
+```
+
+### Rust
+
+```rust title="main.rs"
+use std::collections::HashMap;
+
+fn main() {
+    let mut scores = HashMap::new();
+    scores.insert(String::from("Blue"), 10);
+    scores.insert(String::from("Red"), 50);
+
+    println!("Team scores: {:?}", scores);
+}
+```
+
+### Ruby
+
+```ruby title="todo_list.rb"
+class TodoList
+  attr_reader :name, :items
+
+  def initialize(name)
+    @name = name
+    @items = []
+  end
+
+  def add_item(description)
+    @items << { description: description, completed: false }
+  end
+end
+```
+
+### PHP
+
+```php title="user.php"
+<?php
+class User {
+    public function __construct(
+        public readonly int $id,
+        public readonly string $name,
+        public readonly string $email
+    ) {}
+
+    public function getDisplayName(): string {
+        return ucfirst($this->name);
+    }
+}
+```
+
+### HTML
+
+<!-- prettier-ignore -->
+```html title="index.html"
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Dev Portal Example</title>
+  </head>
+  <body>
+    <h1>Welcome to Zudoku</h1>
+    <p>Build beautiful documentation sites with ease.</p>
+    <p>
+      Nunc nec ornare libero. Sed ultricies lorem vitae enim vestibulum, at posuere augue ullamcorper.
+    </p>
+  </body>
+</html>
+```
+
+### CSS
+
+```css title="styles.css"
+.button {
+  background-color: #007bff;
+  color: white;
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+}
+
+.button:hover {
+  background-color: #0056b3;
+}
+```
+
+### Java
+
+```java title="user_service.java"
+import java.util.List;
+import java.util.stream.Collectors;
+
+public class UserService {
+    private List<User> users;
+
+    public List<User> getActiveUsers() {
+        return users.stream()
+            .filter(User::isActive)
+            .collect(Collectors.toList());
+    }
+}
+```
+
+### Go
+
+```go title="main.go"
+package main
+
+import "fmt"
+
+type User struct {
+    ID    int
+    Name  string
+    Email string
+}
+
+func main() {
+    user := User{ID: 1, Name: "Alice", Email: "alice@example.com"}
+    fmt.Printf("User: %+v\n", user)
+}
+```
+
+### Kotlin
+
+```kotlin title="user.kt"
+data class User(val id: Long, val name: String, val email: String)
+
+class UserRepository {
+    private val users = mutableListOf<User>()
+
+    fun addUser(user: User) {
+        users.add(user)
+    }
+
+    fun findById(id: Long): User? = users.find { it.id == id }
+}
+```
+
+### Objective-C
+
+```objc title="user.m"
+#import <Foundation/Foundation.h>
+
+@interface User : NSObject
+@property (nonatomic, strong) NSString *name;
+@property (nonatomic, strong) NSString *email;
+@property (nonatomic, assign) NSInteger userId;
+
+- (instancetype)initWithName:(NSString *)name
+                       email:(NSString *)email
+                      userId:(NSInteger)userId;
+@end
+```
+
+### Swift
+
+```swift title="user.swift"
+import Foundation
+
+struct User: Codable {
+    let id: UUID
+    let name: String
+    let email: String
+
+    init(name: String, email: String) {
+        self.id = UUID()
+        self.name = name
+        self.email = email
+    }
+}
+```
+
+### XML
+
+```xml title="app.xml"
+<?xml version="1.0" encoding="UTF-8"?>
+<configuration>
+  <appSettings>
+    <add key="ApplicationName" value="Zudoku" />
+    <add key="Version" value="1.0.0" />
+  </appSettings>
+  <modules>
+    <module name="Auth" enabled="true" />
+    <module name="Logging" enabled="true" />
+  </modules>
+</configuration>
+```
+
+### C
+
+```c title="hello.c"
+#include <stdio.h>
+#include <stdlib.h>
+
+typedef struct {
+    int id;
+    char name[50];
+} User;
+
+int main() {
+    User user = {1, "Alice"};
+    printf("User: %s (ID: %d)\n", user.name, user.id);
+    return 0;
+}
+```
+
+### C++
+
+```cpp title="user.cpp"
+#include <iostream>
+#include <string>
+#include <vector>
+
+class User {
+private:
+    int id;
+    std::string name;
+
+public:
+    User(int id, std::string name) : id(id), name(name) {}
+
+    void display() const {
+        std::cout << "User: " << name << " (ID: " << id << ")" << std::endl;
+    }
+};
+
+int main() {
+    User user(1, "Alice");
+    user.display();
+    return 0;
+}
+```
+
+### Zig
+
+```zig title="main.zig"
+const std = @import("std");
+
+const User = struct {
+    id: u32,
+    name: []const u8,
+
+    pub fn display(self: User) void {
+        std.debug.print("User: {s} (ID: {})\n", .{ self.name, self.id });
+    }
+};
+
+pub fn main() !void {
+    const user = User{ .id = 1, .name = "Alice" };
+    user.display();
+}
+```
+
+### Scala
+
+```scala title="User.scala"
+case class User(id: Int, name: String, email: String)
+
+object UserRepository {
+  private var users = List[User]()
+
+  def addUser(user: User): Unit = {
+    users = user :: users
+  }
+
+  def findById(id: Int): Option[User] = {
+    users.find(_.id == id)
+  }
+}
+```
+
+### Dart
+
+```dart title="user.dart"
+class User {
+  final int id;
+  final String name;
+  final String email;
+
+  User({required this.id, required this.name, required this.email});
+
+  factory User.fromJson(Map<String, dynamic> json) {
+    return User(
+      id: json['id'],
+      name: json['name'],
+      email: json['email'],
+    );
+  }
+
+  Map<String, dynamic> toJson() => {
+    'id': id,
+    'name': name,
+    'email': email,
+  };
+}
+```
+
+### Elixir
+
+```elixir title="user.ex"
+defmodule User do
+  defstruct [:id, :name, :email]
+
+  def new(id, name, email) do
+    %User{id: id, name: name, email: email}
+  end
+
+  def display(%User{name: name, id: id}) do
+    IO.puts("User: #{name} (ID: #{id})")
+  end
+end
+
+# Usage
+user = User.new(1, "Alice", "alice@example.com")
+User.display(user)
+```
+
+### OCaml
+
+```ocaml title="user.ml"
+type user = {
+  id : int;
+  name : string;
+  email : string;
+}
+
+let create_user id name email =
+  { id; name; email }
+
+let display_user user =
+  Printf.printf "User: %s (ID: %d)\n" user.name user.id
+
+let () =
+  let user = create_user 1 "Alice" "alice@example.com" in
+  display_user user
+```
+
+### Common Lisp
+
+```lisp title="user.lisp"
+(defstruct user
+  id
+  name
+  email)
+
+(defun create-user (id name email)
+  (make-user :id id :name name :email email))
+
+(defun display-user (user)
+  (format t "User: ~A (ID: ~A)~%"
+          (user-name user)
+          (user-id user)))
+
+;; Usage
+(let ((user (create-user 1 "Alice" "alice@example.com")))
+  (display-user user))
+```
+
+### PowerShell
+
+```powershell title="user.ps1"
+class User {
+    [int]$Id
+    [string]$Name
+    [string]$Email
+
+    User([int]$id, [string]$name, [string]$email) {
+        $this.Id = $id
+        $this.Name = $name
+        $this.Email = $email
+    }
+
+    [void]Display() {
+        Write-Host "User: $($this.Name) (ID: $($this.Id))"
+    }
+}
+
+# Usage
+$user = [User]::new(1, "Alice", "alice@example.com")
+$user.Display()
+```

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

@@ -0,0 +1,78 @@
+---
+title: Textarea
+sidebar_icon: type
+---
+
+import { Textarea } from "zudoku/ui/Textarea";
+import { Label } from "zudoku/ui/Label";
+
+A multiline text input component for forms and user input.
+
+## Import
+
+```tsx
+import { Textarea } from "zudoku/ui/Textarea";
+```
+
+## Basic Usage
+
+<Textarea placeholder="Type your message here." />
+
+```tsx
+<Textarea placeholder="Type your message here." />
+```
+
+## With Label
+
+<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 Text
+
+<div className="grid w-full gap-1.5">
+  <Label htmlFor="message-2">Your message</Label>
+  <Textarea placeholder="Type your message here." id="message-2" />
+  <p className="text-sm text-muted-foreground">Your message will be copied to the support team.</p>
+</div>
+
+```tsx
+<div className="grid w-full gap-1.5">
+  <Label htmlFor="message-2">Your message</Label>
+  <Textarea placeholder="Type your message here." id="message-2" />
+  <p className="text-sm text-muted-foreground">Your message will be copied to the support team.</p>
+</div>
+```
+
+## Disabled State
+
+<Textarea disabled placeholder="Disabled textarea" />
+
+```tsx
+<Textarea disabled placeholder="Disabled textarea" />
+```
+
+## Custom Height
+
+<Textarea className="min-h-[150px]" placeholder="Taller textarea" />
+
+```tsx
+<Textarea className="min-h-[150px]" placeholder="Taller textarea" />
+```
+
+## Custom Styling
+
+The Textarea component accepts all standard textarea HTML attributes and can be customized with
+additional className:
+
+```tsx
+<Textarea className="resize-none" placeholder="Non-resizable textarea" />
+```