@dust-tt/sparkle 0.2.615 → 0.2.617-rc-1

package/src/stories/ToolCard.stories.tsx

@@ -13,55 +13,41 @@ const meta: Meta<typeof ToolCard> = {
 export default meta;
 
 export const Examples = () => (
-  <div className="s-flex s-gap-3">
-    {/* Not added - default md size */}
-    <div className="s-w-80">
-      <ToolCard
-        icon={BookOpenIcon}
-        cardContainerClassName="s-h-36"
-        label="Image Generation"
-        description="Agent can generate images (GPT Image 1)."
-        isSelected
-        canAdd
-        onClick={() => console.log("Add Image Generation")}
-        toolInfo={{
-          label: "Click here",
-          onClick: () => console.log("Click here"),
-        }}
-      />
-    </div>
+  <div className="s-grid s-grid-cols-2 s-gap-3">
+    {/* Not added */}
+    <ToolCard
+      icon={BookOpenIcon}
+      label="Image Generation"
+      description="Agent can generate images (GPT Image 1)."
+      isSelected={false}
+      canAdd={true}
+      onClick={() => console.log("Add Image Generation")}
+    />
 
-    {/* Added - xl size */}
-    <div className="s-w-80">
-      <ToolCard
-        cardContainerClassName="s-h-36"
-        icon={CommandLineIcon}
-        label="Reasoning"
-        description={
-          <>
-            Agent can decide to trigger a reasoning model for complex tasks.
-            Agent can decide to trigger a reasoning model for complex tasks.
-            Agent can decide to trigger a reasoning model for complex tasks.
-            Agent can decide to trigger a reasoning model for complex tasks.
-            Agent can decide to trigger a reasoning model for complex tasks.
-            Agent can decide to trigger a reasoning model for complex tasks.{" "}
-            <Hoverable
-              href="https://example.com/help"
-              target="_blank"
-              rel="noopener noreferrer"
-              variant="primary"
-            >
-              the docs
-            </Hoverable>
-          </>
-        }
-        isSelected
-        canAdd={false}
-        toolInfo={{
-          label: "Click here",
-          onClick: () => console.log("Click here"),
-        }}
-      />
-    </div>
+    {/* Added */}
+    <ToolCard
+      icon={CommandLineIcon}
+      label="Reasoning"
+      description={
+        <>
+          Agent can decide to trigger a reasoning model for complex tasks. Agent
+          can decide to trigger a reasoning model for complex tasks. Agent can
+          decide to trigger a reasoning model for complex tasks. Agent can
+          decide to trigger a reasoning model for complex tasks. Agent can
+          decide to trigger a reasoning model for complex tasks. Agent can
+          decide to trigger a reasoning model for complex tasks.{" "}
+          <Hoverable
+            href="https://example.com/help"
+            target="_blank"
+            rel="noopener noreferrer"
+            variant="primary"
+          >
+            the docs
+          </Hoverable>
+        </>
+      }
+      isSelected={true}
+      canAdd={false}
+    />
   </div>
 );

package/dist/esm/stories/CodeBlock.stories.d.ts

@@ -1,17 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { CodeBlock } from "../index_with_tw_base";
-declare const meta: Meta<typeof CodeBlock>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const InlineCode: Story;
-export declare const InlineCodeWithVariant: Story;
-export declare const TypescriptBlock: Story;
-export declare const ReactTSXBlock: Story;
-export declare const CSSBlock: Story;
-export declare const JSONBlock: Story;
-export declare const BashBlock: Story;
-export declare const SQLBlock: Story;
-export declare const LongCodeWithWrapping: Story;
-export declare const LongCodeWithoutWrapping: Story;
-export declare const TypescriptWithLineNumbers: Story;
-//# sourceMappingURL=CodeBlock.stories.d.ts.map

package/dist/esm/stories/CodeBlock.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CodeBlock.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/CodeBlock.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA2ChC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAMnC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAsB7B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA+C3B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAmCtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KA+BvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KA2BvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA+BtB,CAAC;AAGF,eAAO,MAAM,oBAAoB,EAAE,KAuBlC,CAAC;AAGF,eAAO,MAAM,uBAAuB,EAAE,KAcrC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KA2CvC,CAAC"}

package/dist/esm/stories/CodeBlock.stories.js

@@ -1,125 +0,0 @@
-import React from "react";
-import { CodeBlock } from "../index_with_tw_base";
-var meta = {
-    title: "Components/CodeBlock",
-    component: CodeBlock,
-    argTypes: {
-        children: {
-            description: "The code content to display",
-            control: { type: "text" },
-        },
-        className: {
-            description: "CSS class name, can include language specification (e.g., 'language-javascript')",
-            control: { type: "text" },
-        },
-        inline: {
-            description: "Whether to render as inline code (single line) or block code",
-            control: { type: "boolean" },
-            defaultValue: false,
-        },
-        variant: {
-            description: "Visual variant of the code block",
-            options: ["surface"],
-            control: { type: "select" },
-            defaultValue: "surface",
-        },
-        wrapLongLines: {
-            description: "Whether to wrap long lines in block code",
-            control: { type: "boolean" },
-            defaultValue: false,
-        },
-        showLineNumber: {
-            description: "Whether to show line numbers on the left side of the code",
-            control: { type: "boolean" },
-            defaultValue: false,
-        },
-    },
-    decorators: [
-        function (Story) { return (React.createElement("div", { className: "s-bg-background s-p-4 dark:s-bg-background-night" },
-            React.createElement(Story, null))); },
-    ],
-};
-export default meta;
-// Inline code examples
-export var InlineCode = {
-    args: {
-        children: "const greeting = 'Hello, World!';",
-        inline: true,
-    },
-};
-export var InlineCodeWithVariant = {
-    args: {
-        children: "npm install @dust-tt/sparkle",
-        inline: true,
-        variant: "surface",
-    },
-};
-export var TypescriptBlock = {
-    args: {
-        children: "interface User {\n  id: number;\n  name: string;\n  email: string;\n  isActive: boolean;\n}\n\nconst createUser = (userData: Partial<User>): User => {\n  return {\n    id: Math.random(),\n    name: userData.name || \"Anonymous\",\n    email: userData.email || \"\",\n    isActive: userData.isActive ?? true,\n  };\n};\n\nconst newUser = createUser({ name: \"John Doe\", email: \"john@example.com\" });",
-        className: "language-typescript",
-        inline: false,
-    },
-};
-export var ReactTSXBlock = {
-    args: {
-        children: "import React, { useState, useEffect } from 'react';\nimport { Button } from '@dust-tt/sparkle';\n\ninterface CounterProps {\n  initialValue?: number;\n  step?: number;\n  onCountChange?: (count: number) => void;\n}\n\nconst Counter: React.FC<CounterProps> = ({ \n  initialValue = 0, \n  step = 1,\n  onCountChange\n}) => {\n  const [count, setCount] = useState<number>(initialValue);\n\n  useEffect(() => {\n    document.title = `Count: ${count}`;\n    onCountChange?.(count);\n  }, [count, onCountChange]);\n\n  const increment = (): void => setCount(prev => prev + step);\n  const decrement = (): void => setCount(prev => prev - step);\n  const reset = (): void => setCount(initialValue);\n\n  return (\n    <div className=\"flex items-center gap-4\">\n      <Button onClick={decrement} variant=\"outline\">\n        -\n      </Button>\n      <span className=\"text-2xl font-bold\">{count}</span>\n      <Button onClick={increment} variant=\"primary\">\n        +\n      </Button>\n      <Button onClick={reset} variant=\"ghost\">\n        Reset\n      </Button>\n    </div>\n  );\n};\n\nexport default Counter;",
-        className: "language-tsx",
-        inline: false,
-    },
-};
-export var CSSBlock = {
-    args: {
-        children: ".code-block {\n  background-color: var(--s-muted);\n  border: 1px solid var(--s-border);\n  border-radius: 0.5rem;\n  padding: 1rem;\n  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n  font-size: 0.875rem;\n  line-height: 1.5;\n  overflow-x: auto;\n}\n\n.code-block .keyword {\n  color: #8b5cf6; /* violet-500 */\n}\n\n.code-block .string {\n  color: #10b981; /* emerald-500 */\n}\n\n.code-block .comment {\n  color: #6b7280; /* gray-500 */\n  font-style: italic;\n}\n\n@media (prefers-color-scheme: dark) {\n  .code-block {\n    background-color: var(--s-muted-night);\n    border-color: var(--s-border-night);\n  }\n}",
-        className: "language-css",
-        inline: false,
-    },
-};
-export var JSONBlock = {
-    args: {
-        children: "{\n  \"name\": \"@dust-tt/sparkle\",\n  \"version\": \"1.0.0\",\n  \"description\": \"A beautiful component library for React applications\",\n  \"main\": \"dist/index.js\",\n  \"types\": \"dist/index.d.ts\",\n  \"scripts\": {\n    \"build\": \"rollup -c\",\n    \"dev\": \"rollup -c -w\",\n    \"test\": \"jest\",\n    \"lint\": \"eslint src/**/*.{ts,tsx}\"\n  },\n  \"dependencies\": {\n    \"react\": \"^18.0.0\",\n    \"react-dom\": \"^18.0.0\",\n    \"class-variance-authority\": \"^0.7.0\"\n  },\n  \"devDependencies\": {\n    \"@types/react\": \"^18.0.0\",\n    \"@types/react-dom\": \"^18.0.0\",\n    \"typescript\": \"^5.0.0\"\n  },\n  \"keywords\": [\"react\", \"components\", \"ui\", \"typescript\"],\n  \"author\": \"Dust Team\",\n  \"license\": \"MIT\"\n}",
-        className: "language-json",
-        inline: false,
-    },
-};
-export var BashBlock = {
-    args: {
-        children: "#!/bin/bash\n\n# Install dependencies\nnpm install\n\n# Build the project\nnpm run build\n\n# Run tests\nnpm test\n\n# Deploy to production\nif [ \"$ENVIRONMENT\" = \"production\" ]; then\n  echo \"Deploying to production...\"\n  npm run deploy:prod\nelse\n  echo \"Deploying to staging...\"\n  npm run deploy:staging\nfi\n\n# Clean up\nnpm run clean",
-        className: "language-bash",
-        inline: false,
-    },
-};
-export var SQLBlock = {
-    args: {
-        children: "-- Create users table\nCREATE TABLE users (\n  id SERIAL PRIMARY KEY,\n  username VARCHAR(50) UNIQUE NOT NULL,\n  email VARCHAR(100) UNIQUE NOT NULL,\n  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,\n  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP\n);\n\n-- Insert sample data\nINSERT INTO users (username, email) VALUES\n  ('alice', 'alice@example.com'),\n  ('bob', 'bob@example.com'),\n  ('charlie', 'charlie@example.com');\n\n-- Query with joins\nSELECT \n  u.username,\n  u.email,\n  p.title as post_title,\n  p.created_at as post_date\nFROM users u\nLEFT JOIN posts p ON u.id = p.user_id\nWHERE u.created_at > '2024-01-01'\nORDER BY p.created_at DESC\nLIMIT 10;",
-        className: "language-sql",
-        inline: false,
-    },
-};
-// Long code example with line wrapping
-export var LongCodeWithWrapping = {
-    args: {
-        children: "// This is a very long line of code that demonstrates how the wrapLongLines prop works when set to true. It contains a lot of text and would normally overflow the container, but with wrapLongLines enabled, it will wrap to the next line instead of creating a horizontal scrollbar. This is particularly useful for mobile devices or narrow containers where horizontal scrolling is not desirable.\n\nfunction processVeryLongFunctionNameWithManyParameters(\n  parameterOne: string,\n  parameterTwo: number,\n  parameterThree: boolean,\n  parameterFour: object,\n  parameterFive: array,\n  parameterSix: function,\n  parameterSeven: string,\n  parameterEight: number\n): Promise<ComplexReturnType> {\n  // Implementation here\n  return new Promise((resolve, reject) => {\n    // More implementation\n  });\n}",
-        className: "language-typescript",
-        inline: false,
-        wrapLongLines: true,
-    },
-};
-// Long code example without line wrapping (default)
-export var LongCodeWithoutWrapping = {
-    args: {
-        children: "// This is a very long line of code that demonstrates how the wrapLongLines prop works when set to false (default). It contains a lot of text and will create a horizontal scrollbar when it overflows the container. This is the default behavior and is useful when you want to preserve the exact formatting of the code.\n\nfunction processVeryLongFunctionNameWithManyParameters(parameterOne: string, parameterTwo: number, parameterThree: boolean, parameterFour: object, parameterFive: array, parameterSix: function, parameterSeven: string, parameterEight: number): Promise<ComplexReturnType> {\n  // Implementation here\n  return new Promise((resolve, reject) => {\n    // More implementation\n  });\n}",
-        className: "language-typescript",
-        inline: false,
-        wrapLongLines: false,
-    },
-};
-export var TypescriptWithLineNumbers = {
-    args: {
-        children: "interface User {\n  id: number;\n  name: string;\n  email: string;\n  isActive: boolean;\n}\n\nclass UserService {\n  private users: User[] = [];\n\n  addUser(user: Omit<User, 'id'>): User {\n    const newUser: User = {\n      id: this.users.length + 1,\n      ...user\n    };\n    \n    this.users.push(newUser);\n    return newUser;\n  }\n\n  getUserById(id: number): User | undefined {\n    return this.users.find(user => user.id === id);\n  }\n\n  getAllUsers(): User[] {\n    return [...this.users];\n  }\n}\n\nconst userService = new UserService();\nconst newUser = userService.addUser({\n  name: \"John Doe\",\n  email: \"john@example.com\",\n  isActive: true\n});\n\nconsole.log(\"Created user:\", newUser);",
-        className: "language-typescript",
-        inline: false,
-        showLineNumber: true,
-    },
-};
-//# sourceMappingURL=CodeBlock.stories.js.map

package/dist/esm/stories/CodeBlock.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CodeBlock.stories.js","sourceRoot":"","sources":["../../../src/stories/CodeBlock.stories.tsx"],"names":[],"mappings":"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"}

package/src/stories/CodeBlock.stories.tsx

@@ -1,361 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-
-import { CodeBlock } from "../index_with_tw_base";
-
-const meta: Meta<typeof CodeBlock> = {
-  title: "Components/CodeBlock",
-  component: CodeBlock,
-  argTypes: {
-    children: {
-      description: "The code content to display",
-      control: { type: "text" },
-    },
-    className: {
-      description:
-        "CSS class name, can include language specification (e.g., 'language-javascript')",
-      control: { type: "text" },
-    },
-    inline: {
-      description:
-        "Whether to render as inline code (single line) or block code",
-      control: { type: "boolean" },
-      defaultValue: false,
-    },
-    variant: {
-      description: "Visual variant of the code block",
-      options: ["surface"],
-      control: { type: "select" },
-      defaultValue: "surface",
-    },
-    wrapLongLines: {
-      description: "Whether to wrap long lines in block code",
-      control: { type: "boolean" },
-      defaultValue: false,
-    },
-    showLineNumber: {
-      description: "Whether to show line numbers on the left side of the code",
-      control: { type: "boolean" },
-      defaultValue: false,
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div className="s-bg-background s-p-4 dark:s-bg-background-night">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Inline code examples
-export const InlineCode: Story = {
-  args: {
-    children: "const greeting = 'Hello, World!';",
-    inline: true,
-  },
-};
-
-export const InlineCodeWithVariant: Story = {
-  args: {
-    children: "npm install @dust-tt/sparkle",
-    inline: true,
-    variant: "surface",
-  },
-};
-
-export const TypescriptBlock: Story = {
-  args: {
-    children: `interface User {
-  id: number;
-  name: string;
-  email: string;
-  isActive: boolean;
-}
-
-const createUser = (userData: Partial<User>): User => {
-  return {
-    id: Math.random(),
-    name: userData.name || "Anonymous",
-    email: userData.email || "",
-    isActive: userData.isActive ?? true,
-  };
-};
-
-const newUser = createUser({ name: "John Doe", email: "john@example.com" });`,
-    className: "language-typescript",
-    inline: false,
-  },
-};
-
-export const ReactTSXBlock: Story = {
-  args: {
-    children: `import React, { useState, useEffect } from 'react';
-import { Button } from '@dust-tt/sparkle';
-
-interface CounterProps {
-  initialValue?: number;
-  step?: number;
-  onCountChange?: (count: number) => void;
-}
-
-const Counter: React.FC<CounterProps> = ({ 
-  initialValue = 0, 
-  step = 1,
-  onCountChange
-}) => {
-  const [count, setCount] = useState<number>(initialValue);
-
-  useEffect(() => {
-    document.title = \`Count: \${count}\`;
-    onCountChange?.(count);
-  }, [count, onCountChange]);
-
-  const increment = (): void => setCount(prev => prev + step);
-  const decrement = (): void => setCount(prev => prev - step);
-  const reset = (): void => setCount(initialValue);
-
-  return (
-    <div className="flex items-center gap-4">
-      <Button onClick={decrement} variant="outline">
-        -
-      </Button>
-      <span className="text-2xl font-bold">{count}</span>
-      <Button onClick={increment} variant="primary">
-        +
-      </Button>
-      <Button onClick={reset} variant="ghost">
-        Reset
-      </Button>
-    </div>
-  );
-};
-
-export default Counter;`,
-    className: "language-tsx",
-    inline: false,
-  },
-};
-
-export const CSSBlock: Story = {
-  args: {
-    children: `.code-block {
-  background-color: var(--s-muted);
-  border: 1px solid var(--s-border);
-  border-radius: 0.5rem;
-  padding: 1rem;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  overflow-x: auto;
-}
-
-.code-block .keyword {
-  color: #8b5cf6; /* violet-500 */
-}
-
-.code-block .string {
-  color: #10b981; /* emerald-500 */
-}
-
-.code-block .comment {
-  color: #6b7280; /* gray-500 */
-  font-style: italic;
-}
-
-@media (prefers-color-scheme: dark) {
-  .code-block {
-    background-color: var(--s-muted-night);
-    border-color: var(--s-border-night);
-  }
-}`,
-    className: "language-css",
-    inline: false,
-  },
-};
-
-export const JSONBlock: Story = {
-  args: {
-    children: `{
-  "name": "@dust-tt/sparkle",
-  "version": "1.0.0",
-  "description": "A beautiful component library for React applications",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -c -w",
-    "test": "jest",
-    "lint": "eslint src/**/*.{ts,tsx}"
-  },
-  "dependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "class-variance-authority": "^0.7.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "typescript": "^5.0.0"
-  },
-  "keywords": ["react", "components", "ui", "typescript"],
-  "author": "Dust Team",
-  "license": "MIT"
-}`,
-    className: "language-json",
-    inline: false,
-  },
-};
-
-export const BashBlock: Story = {
-  args: {
-    children: `#!/bin/bash
-
-# Install dependencies
-npm install
-
-# Build the project
-npm run build
-
-# Run tests
-npm test
-
-# Deploy to production
-if [ "$ENVIRONMENT" = "production" ]; then
-  echo "Deploying to production..."
-  npm run deploy:prod
-else
-  echo "Deploying to staging..."
-  npm run deploy:staging
-fi
-
-# Clean up
-npm run clean`,
-    className: "language-bash",
-    inline: false,
-  },
-};
-
-export const SQLBlock: Story = {
-  args: {
-    children: `-- Create users table
-CREATE TABLE users (
-  id SERIAL PRIMARY KEY,
-  username VARCHAR(50) UNIQUE NOT NULL,
-  email VARCHAR(100) UNIQUE NOT NULL,
-  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-);
-
--- Insert sample data
-INSERT INTO users (username, email) VALUES
-  ('alice', 'alice@example.com'),
-  ('bob', 'bob@example.com'),
-  ('charlie', 'charlie@example.com');
-
--- Query with joins
-SELECT 
-  u.username,
-  u.email,
-  p.title as post_title,
-  p.created_at as post_date
-FROM users u
-LEFT JOIN posts p ON u.id = p.user_id
-WHERE u.created_at > '2024-01-01'
-ORDER BY p.created_at DESC
-LIMIT 10;`,
-    className: "language-sql",
-    inline: false,
-  },
-};
-
-// Long code example with line wrapping
-export const LongCodeWithWrapping: Story = {
-  args: {
-    children: `// This is a very long line of code that demonstrates how the wrapLongLines prop works when set to true. It contains a lot of text and would normally overflow the container, but with wrapLongLines enabled, it will wrap to the next line instead of creating a horizontal scrollbar. This is particularly useful for mobile devices or narrow containers where horizontal scrolling is not desirable.
-
-function processVeryLongFunctionNameWithManyParameters(
-  parameterOne: string,
-  parameterTwo: number,
-  parameterThree: boolean,
-  parameterFour: object,
-  parameterFive: array,
-  parameterSix: function,
-  parameterSeven: string,
-  parameterEight: number
-): Promise<ComplexReturnType> {
-  // Implementation here
-  return new Promise((resolve, reject) => {
-    // More implementation
-  });
-}`,
-    className: "language-typescript",
-    inline: false,
-    wrapLongLines: true,
-  },
-};
-
-// Long code example without line wrapping (default)
-export const LongCodeWithoutWrapping: Story = {
-  args: {
-    children: `// This is a very long line of code that demonstrates how the wrapLongLines prop works when set to false (default). It contains a lot of text and will create a horizontal scrollbar when it overflows the container. This is the default behavior and is useful when you want to preserve the exact formatting of the code.
-
-function processVeryLongFunctionNameWithManyParameters(parameterOne: string, parameterTwo: number, parameterThree: boolean, parameterFour: object, parameterFive: array, parameterSix: function, parameterSeven: string, parameterEight: number): Promise<ComplexReturnType> {
-  // Implementation here
-  return new Promise((resolve, reject) => {
-    // More implementation
-  });
-}`,
-    className: "language-typescript",
-    inline: false,
-    wrapLongLines: false,
-  },
-};
-
-export const TypescriptWithLineNumbers: Story = {
-  args: {
-    children: `interface User {
-  id: number;
-  name: string;
-  email: string;
-  isActive: boolean;
-}
-
-class UserService {
-  private users: User[] = [];
-
-  addUser(user: Omit<User, 'id'>): User {
-    const newUser: User = {
-      id: this.users.length + 1,
-      ...user
-    };
-    
-    this.users.push(newUser);
-    return newUser;
-  }
-
-  getUserById(id: number): User | undefined {
-    return this.users.find(user => user.id === id);
-  }
-
-  getAllUsers(): User[] {
-    return [...this.users];
-  }
-}
-
-const userService = new UserService();
-const newUser = userService.addUser({
-  name: "John Doe",
-  email: "john@example.com",
-  isActive: true
-});
-
-console.log("Created user:", newUser);`,
-    className: "language-typescript",
-    inline: false,
-    showLineNumber: true,
-  },
-};