@app-studio/web 0.9.44 → 0.9.46

package/docs/components/ProgressBar.mdx

@@ -70,11 +70,11 @@ import { Vertical } from 'app-studio';
 
 export const ColoredProgressBars = () => (
   <Vertical gap={15}>
-    <ProgressBar value={60} color="#3b82f6" />
-    <ProgressBar value={60} color="#10b981" />
-    <ProgressBar value={60} color="#ef4444" />
-    <ProgressBar value={60} color="#f59e0b" />
-    <ProgressBar value={60} color="#8b5cf6" />
+    <ProgressBar value={60} color="color.blue.500" />
+    <ProgressBar value={60} color="color.emerald.500" />
+    <ProgressBar value={60} color="color.red.500" />
+    <ProgressBar value={60} color="color.amber.500" />
+    <ProgressBar value={60} color="color.violet.500" />
   </Vertical>
 );
 ```
@@ -93,18 +93,18 @@ export const BackgroundColorProgressBars = () => (
   <Vertical gap={15}>
     <ProgressBar 
       value={60} 
-      color="#3b82f6" 
-      backgroundColor="#dbeafe" 
+      color="color.blue.500" 
+      backgroundColor="color.blue.100" 
     />
     <ProgressBar 
       value={60} 
-      color="#10b981" 
-      backgroundColor="#d1fae5" 
+      color="color.emerald.500" 
+      backgroundColor="color.emerald.100" 
     />
     <ProgressBar 
       value={60} 
-      color="#ef4444" 
-      backgroundColor="#fee2e2" 
+      color="color.red.500" 
+      backgroundColor="color.red.100" 
     />
   </Vertical>
 );
@@ -246,7 +246,7 @@ export const FileUploadProgress = () => {
           <Text fontSize={14}>Uploading... {progress}%</Text>
           <ProgressBar 
             value={progress} 
-            color="#10b981"
+            color="color.emerald.500"
             height={8}
           />
         </Vertical>
@@ -275,7 +275,7 @@ export const MultiStepProgress = () => {
         <Text>Step {step} of {totalSteps}</Text>
         <ProgressBar 
           value={progress} 
-          color="#3b82f6"
+          color="color.blue.500"
           height={10}
         />
       </Vertical>
@@ -430,7 +430,7 @@ export const CompleteProgressExample = () => {
           </Horizontal>
           <ProgressBar 
             value={overallProgress} 
-            color="#3b82f6"
+            color="color.blue.500"
             height={12}
             radius={6}
           />

package/docs/components/StatusIndicator.mdx

@@ -154,7 +154,7 @@ export const OrderStatus = () => (
     <Vertical gap={15}>
       <Text fontSize={18} fontWeight="bold">Order #12345</Text>
       <StatusIndicator status="success" label="Delivered" />
-      <Text fontSize={14} color="#6b7280">
+      <Text fontSize={14} color="color.coolGray.500">
         Your order was delivered on March 15, 2024
       </Text>
     </Vertical>
@@ -242,12 +242,12 @@ export const PaymentStatus = () => (
       <Horizontal justifyContent="space-between" alignItems="center">
         <Vertical gap={5}>
           <Text fontSize={16} fontWeight="bold">Payment to Acme Corp</Text>
-          <Text fontSize={14} color="#6b7280">$1,234.56</Text>
+          <Text fontSize={14} color="color.coolGray.500">$1,234.56</Text>
         </Vertical>
         <StatusIndicator status="success" label="Paid" />
       </Horizontal>
       
-      <Text fontSize={14} color="#6b7280">
+      <Text fontSize={14} color="color.coolGray.500">
         Transaction ID: TXN-2024-03-15-001
       </Text>
     </Vertical>
@@ -283,7 +283,7 @@ export const ServerStatusDashboard = () => {
               <Horizontal justifyContent="space-between" alignItems="center">
                 <Vertical gap={5}>
                   <Text fontWeight="bold">{server.name}</Text>
-                  <Text fontSize={14} color="#6b7280">
+                  <Text fontSize={14} color="color.coolGray.500">
                     Uptime: {server.uptime}
                   </Text>
                 </Vertical>
@@ -342,7 +342,7 @@ export const NotificationStatus = () => {
           <StatusIndicator status={notification.status} />
           <Vertical gap={2}>
             <Text>{notification.message}</Text>
-            <Text fontSize={12} color="#6b7280">{notification.time}</Text>
+            <Text fontSize={12} color="color.coolGray.500">{notification.time}</Text>
           </Vertical>
         </Horizontal>
       ))}

package/docs/components.md

@@ -297,167 +297,3 @@ const TooltipExample = () => (
 );
 ```
 
-## V. Data Display Components
-
-### Calendar
-
-A component for displaying dates and allowing users to select a single date or a date range.
-
-**Example:**
-```tsx
-import { Calendar } from '@app-studio';
-import { useState } from 'react';
-
-const CalendarExample = () => {
-  const [selectedDate, setSelectedDate] = useState(new Date());
-
-  return (
-    <Calendar
-      value={selectedDate}
-      onChange={setSelectedDate}
-    />
-  );
-};
-```
-
-### Kanban Card
-
-A draggable card component designed for use within a Kanban board. It displays key information and can be customized.
-
-**Example:**
-```tsx
-import { KanbanCard } from '@app-studio';
-
-const KanbanCardExample = () => (
-  <KanbanCard
-    id="task-1"
-    title="Design the new dashboard"
-    description="Create mockups in Figma for the v2 dashboard."
-    tags={[{ label: 'UI/UX', color: 'blue' }, { label: 'High Priority', color: 'red' }]}
-    assignee={{ name: 'Jane Doe', avatarUrl: '/avatars/jane.png' }}
-  />
-);
-```
-
-### Tree
-
-A component for displaying hierarchical data with expandable/collapsible nodes. Supports both a compound component pattern and a data-driven approach.
-
-**Example:**
-```tsx
-import { Tree } from '@app-studio/web';
-import { FolderIcon, FileIcon } from '@app-studio/web';
-
-const FileTreeExample = () => {
-  const treeData = [
-    {
-      id: 'root',
-      label: 'Project',
-      icon: <FolderIcon size={16} />,
-      children: [
-        {
-          id: 'src',
-          label: 'src',
-          icon: <FolderIcon size={16} />,
-          children: [
-            { id: 'components', label: 'components', icon: <FileIcon size={16} /> },
-            { id: 'utils', label: 'utils', icon: <FileIcon size={16} /> },
-          ],
-        },
-      ],
-    },
-  ];
-
-  return (
-    <Tree
-      items={treeData}
-      defaultExpandedItems={['root', 'src']}
-      onItemSelect={(itemId) => console.log(`Selected: ${itemId}`)}
-    />
-  );
-};
-```
-
-For detailed documentation, see [Tree Component](./components/Tree.mdx).
-
-### Flow
-
-A component for creating interactive workflow diagrams and flowcharts with support for node connections, drag-and-drop functionality, and viewport controls.
-
-**Example:**
-```tsx
-import { Flow } from '@app-studio/web';
-import { useState } from 'react';
-
-const FlowExample = () => {
-  const [nodes, setNodes] = useState([
-    {
-      id: 'node-1',
-      position: { x: 50, y: 50 },
-      data: { label: 'Start Node', subtitle: 'Begin here' },
-    },
-    {
-      id: 'node-2',
-      position: { x: 50, y: 200 },
-      data: { label: 'Process Node', subtitle: 'Do something' },
-    },
-  ]);
-
-  const [edges, setEdges] = useState([
-    { id: 'edge-1-2', source: 'node-1', target: 'node-2' },
-  ]);
-
-  return (
-    <Flow
-      nodes={nodes}
-      edges={edges}
-      onNodesChange={setNodes}
-      onEdgesChange={setEdges}
-    />
-  );
-};
-```
-
-For detailed documentation, see [Flow Component](./components/Flow.mdx).
-
-### OKR
-
-A component for displaying and tracking Objectives and Key Results (OKRs). Provides a comprehensive view of progress, status, and ownership for strategic goals.
-
-**Example:**
-```tsx
-import { OKR } from '@app-studio/web';
-
-const OKRExample = () => {
-  const objectives = [
-    {
-      id: '1',
-      title: 'Launch New Feature',
-      description: 'Successfully launch the new feature to all users.',
-      owner: 'John Doe',
-      timeframe: 'Q4 2025',
-      tags: ['new-feature', 'launch'],
-      progress: 50,
-      status: 'onTrack',
-      keyResults: [
-        {
-          id: '1.1',
-          title: 'Complete development',
-          progress: 80,
-          status: 'onTrack',
-        },
-        {
-          id: '1.2',
-          title: 'Complete QA testing',
-          progress: 40,
-          status: 'atRisk',
-        },
-      ],
-    },
-  ];
-
-  return <OKR objectives={objectives} />;
-};
-```
-
-For detailed documentation, see [OKR Component](./components/OKR.mdx).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@app-studio/web",
-  "version": "0.9.44",
+  "version": "0.9.46",
   "main": "dist/index.js",
   "typings": "dist/components/index.d.ts",
   "files": [

package/dist/bot/Bot.d.ts

@@ -1,15 +0,0 @@
-import { AiService } from './ai/ai.service';
-import { ProviderType } from './ai/ai.config';
-import { FileHandler } from './FileHandler';
-export declare class Bot {
-    readonly aiService: AiService;
-    readonly fileHandler: FileHandler;
-    private readonly cache;
-    private readonly cacheKey;
-    constructor(cacheKey: string);
-    generatePropsData(componentFolder: string, componentName: string, model?: string, provider?: ProviderType): Promise<any>;
-    isValidPropsStructure(data: any): boolean;
-    isObject(value: any): boolean;
-    generateMarkdown(componentFolder: string, componentName: string, propsData: any, // Accept generated props data
-    outputFilePath: string): Promise<void>;
-}

package/dist/bot/Cache.d.ts

@@ -1,13 +0,0 @@
-export declare class Cache {
-    private readonly cacheDirectory;
-    constructor(cacheDirectory?: string);
-    generateCacheKey(prompt: string): string;
-    getFromCache(cacheKey: string): any | null;
-    getJsonFromCache(cacheKey: string): any;
-    saveJsonToCache(cacheKey: string, content: any): void;
-    saveToCache(cacheKey: string, content: string): void;
-    saveEachJsonToCache(cacheKey: string, content: any, fileNameKey: string): void;
-    cacheExist(cacheKey: string): boolean;
-    cacheFolderExist(cacheKey: string): boolean;
-    createFile(cacheKey: string, fileContent?: string, fileName?: string): Promise<string>;
-}

package/dist/bot/Config.d.ts

@@ -1,13 +0,0 @@
-/**
-API_CONFIG : Un objet contenant les paramètres de configuration pour l'API OpenAI, tels que la clé API et l'organisation. Ces valeurs peuvent être définies directement ou récupérées à partir de variables d'environnement.
-APPLICATION_SETTINGS : Un objet pour les paramètres généraux de l'application. Vous pouvez inclure ici des configurations telles que le mode de débogage, les paramètres de journalisation, etc.
-*/
-export declare const API_CONFIG: {
-    openaiApiKey: string;
-    openaiOrganization: string;
-    defaultModel: string;
-};
-export declare const APPLICATION_SETTINGS: {
-    debugMode: boolean;
-    cacheDirectory: string;
-};

package/dist/bot/ContentFetcher.d.ts

@@ -1,9 +0,0 @@
-export declare class ContentFetcher {
-    private readonly cache;
-    private readonly cacheKey;
-    constructor(cacheKey: string);
-    private static isLinkValid;
-    private fetchAndProcessContent;
-    processAllLinks(links: string[]): Promise<void>;
-    private urlToMarkdown;
-}

package/dist/bot/DocuCode.d.ts

@@ -1,19 +0,0 @@
-export declare class DocuCode {
-    private readonly fileHandler;
-    private readonly cache;
-    private readonly cacheKey;
-    private readonly aiService;
-    private selectedModel;
-    private selectedProvider;
-    constructor(cacheKey: string, model?: string, provider?: string);
-    commentCodeFile(filePath: string): Promise<void>;
-    processComments(filePath: string, code: string, commentsJson: any): Promise<void>;
-    removeCommentsAndCleanFile(filePath: string): Promise<void>;
-    processDirectory(dirPath: string): Promise<any>;
-    splitArrayToJSON(code: string): {
-        line: number;
-        code: string;
-    }[];
-    insertComments(code: string, comments: any[]): string;
-    compareStrings(line: string, codeSnippet: string): boolean;
-}

package/dist/bot/FileHandler.d.ts

@@ -1,39 +0,0 @@
-export declare class FileHandler {
-    /**
-     * Reads the content of a file as a string.
-     * @param filePath Path to the file
-     * @returns File content as a string
-     */
-    readFile(filePath: string): string;
-    /**
-     * Reads all filenames in a directory, creating the directory if it doesn't exist.
-     * @param directory Directory path
-     * @returns Array of filenames
-     */
-    readFiles(directory: string): string[];
-    /**
-     * Writes content to a file, creating the parent directory if it doesn't exist.
-     * @param filePath Path to the file
-     * @param content Content to write
-     */
-    writeFile(filePath: string, content: string): void;
-    /**
-     * Writes content to a file directly without checking or creating directories.
-     * @param filePath Path to the file
-     * @param content Content to write
-     */
-    writeFileDirect(filePath: string, content: string): void;
-    /**
-     * Checks if a file or directory exists.
-     * @param filePath Path to check
-     * @returns True if the path exists, false otherwise
-     */
-    pathExists(filePath: string): boolean;
-    /**
-     * Reads and parses a JSON file.
-     * @param filePath Path to the JSON file
-     * @returns Parsed JSON object
-     * @throws Error if the file doesn't exist or contains invalid JSON
-     */
-    readJsonFile(filePath: string): any;
-}

package/dist/bot/ai/AnthropicConnector.d.ts

@@ -1,6 +0,0 @@
-export declare class AnthropicConnector {
-    private readonly apiKey;
-    private readonly anthropic;
-    constructor(apiKey: string);
-    sendChatMessage(model: string, messages: any[], props?: {}): Promise<any>;
-}

package/dist/bot/ai/GeminiConnector.d.ts

@@ -1,7 +0,0 @@
-export declare class GeminiConnector {
-    private readonly apiKey;
-    private readonly googleAI;
-    constructor(apiKey: string);
-    sendChatMessage(GeminiModel: string, messages: any[], props?: {}, json?: boolean): Promise<string>;
-    token(GeminiModel: string, prompt: string, props?: {}): Promise<number>;
-}

package/dist/bot/ai/GroqConnector.d.ts

@@ -1,7 +0,0 @@
-export declare class GroqConnector {
-    private readonly apiKey;
-    private readonly groq;
-    constructor(apiKey: string);
-    sendChatMessage(model: string, messages: any[], props?: {}, json?: boolean): Promise<any>;
-    token(messages: any[]): Promise<number>;
-}

package/dist/bot/ai/HuggingFaceConnector.d.ts

@@ -1,6 +0,0 @@
-export declare class HuggingFaceConnector {
-    private readonly apiKey;
-    private readonly hf;
-    constructor(apiKey: string);
-    sendChatMessage(model: string, messages: any[], props?: {}): Promise<string | undefined>;
-}

package/dist/bot/ai/OpenAIConnector.d.ts

@@ -1,11 +0,0 @@
-import { TiktokenModel } from 'tiktoken';
-export declare class OpenAIConnector {
-    private readonly openai;
-    constructor({ apiKey, baseURL, organization, }: {
-        apiKey: string;
-        organization?: string;
-        baseURL?: string;
-    });
-    sendChatMessage(model: string, messages: any[], props?: {}, json?: boolean): Promise<any>;
-    token(model: TiktokenModel, messages: any[]): Promise<any>;
-}

package/dist/bot/ai/ReplicateConnector.d.ts

@@ -1,7 +0,0 @@
-export declare class ReplicateConnector {
-    private readonly apiKey;
-    private readonly replicate;
-    constructor(apiKey: string);
-    sendChatMessage(model: string, messages: any[], props?: {}): Promise<any>;
-    removeBackground(image: string): Promise<any>;
-}

package/dist/bot/ai/SambaNovaConnector.d.ts

@@ -1,6 +0,0 @@
-export declare class SambaNovaConnector {
-    private readonly apiKey;
-    private readonly openai;
-    constructor(apiKey: string);
-    sendChatMessage(model: string, messages: any[], props?: {}, json?: boolean): Promise<any>;
-}

package/dist/bot/ai/ai.config.d.ts

@@ -1,12 +0,0 @@
-export declare type ModelInfos = {
-    creditCost: number;
-    tokenLimit: number;
-    cost?: {
-        prompt_token: number;
-        completion_token: number;
-    };
-    provider: string;
-};
-export declare type ProviderType = 'groq' | 'google' | 'openai' | 'huggingFace' | 'replicate' | 'openrouter' | 'anthropic' | 'deepseek' | 'mistralai' | 'sambaNova';
-export declare const Providers: ProviderType[];
-export declare const MODEL_INFO: Record<string, ModelInfos>;

package/dist/bot/ai/ai.service.d.ts

@@ -1,36 +0,0 @@
-import { ProviderType } from './ai.config';
-import { OpenAIConnector } from './OpenAIConnector';
-import 'dotenv/config';
-export declare const DEFAULT_IMAGE_MODEL = "black-forest-labs/flux-schnell";
-export declare const MODEL_IMAGE_CREDIT_COST = 2;
-export declare class AiService {
-    private models;
-    private config;
-    private readonly MAX_RETRIES;
-    private readonly RETRY_DELAY;
-    openRouter: OpenAIConnector;
-    constructor();
-    private addLanguageInstruction;
-    getProvider(provider: ProviderType, useOpenRouter?: boolean): any;
-    /**
-     * Simple delay utility function.
-     */
-    private delay;
-    /**
-     * Enhanced send method with improved error handling and account verification.
-     */
-    send({ model, provider, temperature, messages, props, options, json, }: {
-        model: string;
-        provider: ProviderType;
-        temperature?: Number;
-        messages: any[];
-        props?: {};
-        options?: {
-            retries?: number;
-            language?: string;
-        };
-        json?: boolean;
-    }): Promise<string>;
-    token(model: string, provider: ProviderType, messages: any[] | string, props?: {}): Promise<string>;
-    handleTokenLimitError(error: any): boolean;
-}

package/dist/bot/data.d.ts

@@ -1,19 +0,0 @@
-export interface Sections {
-    [sectionTitle: string]: Chapter[];
-}
-export interface Chapter {
-    title: string;
-    subchapters: Subchapter[];
-}
-export interface Subchapter {
-    subtitle: string;
-    minWordCount: number;
-    maxWordCount: number;
-    summary: string;
-    points: string[];
-}
-export interface NewsletterSettings {
-    language: string;
-    tone: string;
-    style: string;
-}

package/dist/bot/extractors.d.ts

@@ -1,8 +0,0 @@
-/**
-extractJsonCode : Extrait un bloc de code JSON d'une réponse. Utile si la réponse contient des blocs de code formatés.
-extractTextResponse : Nettoie une réponse pour ne garder que le texte, en supprimant les blocs de code et les formattages spéciaux.
-extractKeyValuePairs : Extrait des paires clé-valeur d'une réponse. Cette fonction peut être utile pour traiter des réponses formatées comme des listes de propriétés.
- */
-export declare function extractJsonCode(response: string): any;
-export declare const extractTextResponse: (response: string) => string;
-export declare const extractKeyValuePairs: (response: string) => Record<string, string>;

package/dist/bot/index.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/bot/prompt/1-project.d.ts

@@ -1 +0,0 @@
-export declare const ProjectPrompt: () => string;

package/dist/bot/prompt/2-response.d.ts

@@ -1 +0,0 @@
-export declare const RespondPrompt: (props: string, view: string, type?: string | undefined) => string;

package/dist/bot/prompt/3-comment.d.ts

@@ -1 +0,0 @@
-export declare const CommentPrompt: (componentName: string, fileName: string, codeContent: string) => string;