@app-studio/web 0.9.44 → 0.9.45

package/docs/components/Badge.mdx

@@ -74,7 +74,7 @@ export const PositionDemo = () => (
           position="relative"
           height="100px"
           width="200px"
-          backgroundColor="#F2EFE5"
+          backgroundColor="color.warmGray.100"
         >
           <Badge position={position as Position} content={position} />
         </View>

package/docs/components/ColorPicker.mdx

@@ -52,7 +52,7 @@ import { ColorPicker } from '@app-studio/web';
 
 export const DefaultValueColorPicker = () => (
   <ColorPicker 
-    defaultValue="#10b981"
+    defaultValue="color.emerald.500"
     onChange={(color) => console.log(color)}
   />
 );
@@ -69,11 +69,11 @@ import { ColorPicker } from '@app-studio/web';
 
 export const PredefinedColorPicker = () => {
   const colors = [
-    { color: '#ef4444', label: 'Red' },
-    { color: '#3b82f6', label: 'Blue' },
-    { color: '#10b981', label: 'Green' },
-    { color: '#f59e0b', label: 'Orange' },
-    { color: '#8b5cf6', label: 'Purple' },
+    { color: 'color.red.500', label: 'Red' },
+    { color: 'color.blue.500', label: 'Blue' },
+    { color: 'color.emerald.500', label: 'Green' },
+    { color: 'color.amber.500', label: 'Orange' },
+    { color: 'color.violet.500', label: 'Purple' },
   ];
   
   return (
@@ -200,7 +200,7 @@ import { ColorPicker } from '@app-studio/web';
 export const DisabledColorPicker = () => (
   <ColorPicker 
     isDisabled
-    value="#3b82f6"
+    value="color.blue.500"
     onChange={(color) => console.log(color)}
   />
 );
@@ -219,7 +219,7 @@ import { ColorPicker } from '@app-studio/web';
 export const ReadOnlyColorPicker = () => (
   <ColorPicker 
     isReadOnly
-    value="#3b82f6"
+    value="color.blue.500"
     onChange={(color) => console.log(color)}
   />
 );
@@ -385,10 +385,10 @@ export const StyledColorPicker = () => (
     views={{
       trigger: {
         borderWidth: 2,
-        borderColor: '#3b82f6',
+        borderColor: 'color.blue.500',
       },
       dropdown: {
-        backgroundColor: '#f9fafb',
+        backgroundColor: 'color.coolGray.50',
         padding: 20,
       },
       colorSwatch: {
@@ -411,12 +411,12 @@ export const CompleteColorPicker = () => {
   const [color, setColor] = useState('#3b82f6');
   
   const predefinedColors = [
-    { color: '#ef4444', label: 'Red' },
-    { color: '#3b82f6', label: 'Blue' },
-    { color: '#10b981', label: 'Green' },
-    { color: '#f59e0b', label: 'Orange' },
-    { color: '#8b5cf6', label: 'Purple' },
-    { color: '#ec4899', label: 'Pink' },
+    { color: 'color.red.500', label: 'Red' },
+    { color: 'color.blue.500', label: 'Blue' },
+    { color: 'color.emerald.500', label: 'Green' },
+    { color: 'color.amber.500', label: 'Orange' },
+    { color: 'color.violet.500', label: 'Purple' },
+    { color: 'color.pink.500', label: 'Pink' },
   ];
   
   return (

package/docs/components/DragAndDrop.mdx

@@ -115,7 +115,7 @@ export const CustomRenderDragAndDrop = () => {
           gap={10} 
           alignItems="center"
           padding={12}
-          backgroundColor={item.completed ? '#d1fae5' : '#fee2e2'}
+          backgroundColor={item.completed ? 'color.emerald.100' : 'color.red.100'}
           borderRadius={8}
         >
           <Text fontWeight="bold">#{index + 1}</Text>
@@ -147,7 +147,7 @@ export const ContainerPropsDragAndDrop = () => {
       onChange={setItems}
       renderItem={(item) => <Text>{item}</Text>}
       containerProps={{
-        backgroundColor: '#f3f4f6',
+        backgroundColor: 'color.coolGray.100',
         padding: 20,
         borderRadius: 12,
         gap: 10,
@@ -177,7 +177,7 @@ export const ItemPropsDragAndDrop = () => {
       renderItem={(item) => <Text>{item}</Text>}
       itemProps={{
         padding: 15,
-        backgroundColor: '#ffffff',
+        backgroundColor: 'white',
         borderRadius: 8,
         cursor: 'grab',
         boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
@@ -207,13 +207,13 @@ export const StyledDragAndDrop = () => {
       renderItem={(item) => <Text>{item}</Text>}
       views={{
         container: {
-          backgroundColor: '#1f2937',
+          backgroundColor: 'color.coolGray.800',
           padding: 20,
           borderRadius: 16,
         },
         item: {
-          backgroundColor: '#374151',
-          color: '#ffffff',
+          backgroundColor: 'color.coolGray.700',
+          color: 'white',
           padding: 16,
           borderRadius: 8,
           marginBottom: 8,
@@ -266,9 +266,9 @@ export const TaskListDragAndDrop = () => {
   ]);
   
   const priorityColors = {
-    high: '#ef4444',
-    medium: '#f59e0b',
-    low: '#10b981',
+    high: 'color.red.500',
+    medium: 'color.amber.500',
+    low: 'color.emerald.500',
   };
   
   return (
@@ -278,7 +278,7 @@ export const TaskListDragAndDrop = () => {
       renderItem={(task, index) => (
         <View
           padding={16}
-          backgroundColor="#ffffff"
+          backgroundColor="white"
           borderRadius={12}
           borderLeftWidth={4}
           borderLeftColor={priorityColors[task.priority]}
@@ -298,7 +298,7 @@ export const TaskListDragAndDrop = () => {
                   {task.priority}
                 </Text>
               </Horizontal>
-              <Text fontSize={14} color="#6b7280">
+              <Text fontSize={14} color="color.coolGray.500">
                 {task.description}
               </Text>
             </Vertical>

package/docs/components/Drawer.mdx

@@ -434,15 +434,15 @@ export const DetailsDrawer = () => {
             <Drawer.Body>
               <Vertical gap={20}>
                 <div>
-                  <Text fontSize={14} color="#6b7280">Name</Text>
+                  <Text fontSize={14} color="color.coolGray.500">Name</Text>
                   <Text fontSize={16}>Premium Widget</Text>
                 </div>
                 <div>
-                  <Text fontSize={14} color="#6b7280">Price</Text>
+                  <Text fontSize={14} color="color.coolGray.500">Price</Text>
                   <Text fontSize={16}>$99.99</Text>
                 </div>
                 <div>
-                  <Text fontSize={14} color="#6b7280">Description</Text>
+                  <Text fontSize={14} color="color.coolGray.500">Description</Text>
                   <Text fontSize={16}>
                     A high-quality widget with advanced features
                     and premium materials.

package/docs/components/Gradient.mdx

@@ -14,8 +14,8 @@ import { Gradient } from '@app-studio/web';
 
 export const DefaultGradient = () => (
   <Gradient 
-    from="#3b82f6" 
-    to="#8b5cf6" 
+    from="color.blue.500" 
+    to="color.violet.500" 
     width={300} 
     height={200} 
   />
@@ -38,22 +38,22 @@ export const GradientTypes = () => (
   <Vertical gap={15}>
     <Gradient 
       type="linear" 
-      from="#3b82f6" 
-      to="#8b5cf6" 
+      from="color.blue.500" 
+      to="color.violet.500" 
       width={300} 
       height={100} 
     />
     <Gradient 
       type="radial" 
-      from="#3b82f6" 
-      to="#8b5cf6" 
+      from="color.blue.500" 
+      to="color.violet.500" 
       width={300} 
       height={100} 
     />
     <Gradient 
       type="conic" 
-      from="#3b82f6" 
-      to="#8b5cf6" 
+      from="color.blue.500" 
+      to="color.violet.500" 
       width={300} 
       height={100} 
     />
@@ -73,9 +73,9 @@ import { Vertical } from 'app-studio';
 
 export const SimpleGradients = () => (
   <Vertical gap={15}>
-    <Gradient from="#ef4444" to="#f59e0b" width={300} height={100} />
-    <Gradient from="#10b981" to="#3b82f6" width={300} height={100} />
-    <Gradient from="#8b5cf6" to="#ec4899" width={300} height={100} />
+    <Gradient from="color.red.500" to="color.amber.500" width={300} height={100} />
+    <Gradient from="color.emerald.500" to="color.blue.500" width={300} height={100} />
+    <Gradient from="color.violet.500" to="color.pink.500" width={300} height={100} />
   </Vertical>
 );
 ```
@@ -127,8 +127,8 @@ export const DirectionalGradients = () => (
       <Gradient 
         key={direction}
         direction={direction as any}
-        from="#3b82f6" 
-        to="#8b5cf6" 
+        from="color.blue.500" 
+        to="color.violet.500" 
         width={300} 
         height={100} 
       />
@@ -154,16 +154,16 @@ export const RadialShapes = () => (
     <Gradient 
       type="radial"
       shape="circle"
-      from="#3b82f6" 
-      to="#8b5cf6" 
+      from="color.blue.500" 
+      to="color.violet.500" 
       width={200} 
       height={200} 
     />
     <Gradient 
       type="radial"
       shape="ellipse"
-      from="#3b82f6" 
-      to="#8b5cf6" 
+      from="color.blue.500" 
+      to="color.violet.500" 
       width={300} 
       height={200} 
     />
@@ -195,8 +195,8 @@ export const RadialPositions = () => (
         key={position}
         type="radial"
         position={position as any}
-        from="#3b82f6" 
-        to="#8b5cf6" 
+        from="color.blue.500" 
+        to="color.violet.500" 
         width={300} 
         height={100} 
       />
@@ -217,8 +217,8 @@ import { Gradient } from '@app-studio/web';
 
 export const AnimatedGradient = () => (
   <Gradient 
-    from="#3b82f6" 
-    to="#8b5cf6" 
+    from="color.blue.500" 
+    to="color.violet.500" 
     animate
     width={300} 
     height={200} 
@@ -240,16 +240,16 @@ import { Vertical } from 'app-studio';
 export const AnimationDurations = () => (
   <Vertical gap={15}>
     <Gradient 
-      from="#3b82f6" 
-      to="#8b5cf6" 
+      from="color.blue.500" 
+      to="color.violet.500" 
       animate
       animationDuration={1}
       width={300} 
       height={80} 
     />
     <Gradient 
-      from="#3b82f6" 
-      to="#8b5cf6" 
+      from="color.blue.500" 
+      to="color.violet.500" 
       animate
       animationDuration={5}
       width={300} 
@@ -271,14 +271,14 @@ import { Text, Center } from 'app-studio';
 
 export const GradientWithContent = () => (
   <Gradient 
-    from="#3b82f6" 
-    to="#8b5cf6" 
+    from="color.blue.500" 
+    to="color.violet.500" 
     width={300} 
     height={200}
     borderRadius={16}
   >
     <Center width="100%" height="100%">
-      <Text color="#ffffff" fontSize={24} fontWeight="bold">
+      <Text color="white" fontSize={24} fontWeight="bold">
         Gradient Background
       </Text>
     </Center>
@@ -297,8 +297,8 @@ import { Gradient } from '@app-studio/web';
 
 export const StyledGradient = () => (
   <Gradient 
-    from="#3b82f6" 
-    to="#8b5cf6" 
+    from="color.blue.500" 
+    to="color.violet.500" 
     width={300} 
     height={200}
     views={{
@@ -379,28 +379,28 @@ import { Text, Vertical, Button } from 'app-studio';
 
 export const GradientCard = () => (
   <Gradient 
-    from="#667eea" 
-    to="#764ba2" 
+    from="color.indigo.400" 
+    to="color.purple.700" 
     width={350} 
     borderRadius={16}
     boxShadow="0 10px 40px rgba(0,0,0,0.2)"
   >
     <Vertical gap={20} padding={30}>
-      <Text color="#ffffff" fontSize={28} fontWeight="bold">
+      <Text color="white" fontSize={28} fontWeight="bold">
         Premium Plan
       </Text>
-      <Text color="#ffffff" fontSize={48} fontWeight="bold">
+      <Text color="white" fontSize={48} fontWeight="bold">
         $99
         <Text as="span" fontSize={20}>/month</Text>
       </Text>
       <Vertical gap={10}>
-        <Text color="#ffffff">✓ Unlimited projects</Text>
-        <Text color="#ffffff">✓ Priority support</Text>
-        <Text color="#ffffff">✓ Advanced analytics</Text>
+        <Text color="white">✓ Unlimited projects</Text>
+        <Text color="white">✓ Priority support</Text>
+        <Text color="white">✓ Advanced analytics</Text>
       </Vertical>
       <Button 
-        backgroundColor="#ffffff" 
-        color="#667eea"
+        backgroundColor="white" 
+        color="color.indigo.400"
         isFullWidth
       >
         Get Started
@@ -434,7 +434,7 @@ export const AnimatedBackground = () => (
   >
     <Center width="100%" height="100%">
       <Text 
-        color="#ffffff" 
+        color="white" 
         fontSize={40} 
         fontWeight="bold"
         textAlign="center"

package/docs/components/Loader.mdx

@@ -93,11 +93,11 @@ import { Horizontal } from 'app-studio';
 
 export const ColoredLoaders = () => (
   <Horizontal gap={30}>
-    <Loader loaderColor="#3b82f6" />
-    <Loader loaderColor="#10b981" />
-    <Loader loaderColor="#ef4444" />
-    <Loader loaderColor="#f59e0b" />
-    <Loader loaderColor="#8b5cf6" />
+    <Loader loaderColor="color.blue.500" />
+    <Loader loaderColor="color.emerald.500" />
+    <Loader loaderColor="color.red.500" />
+    <Loader loaderColor="color.amber.500" />
+    <Loader loaderColor="color.violet.500" />
   </Horizontal>
 );
 ```
@@ -170,8 +170,8 @@ import { Loader } from '@app-studio/web';
 
 export const ColoredTextLoader = () => (
   <Loader 
-    loaderColor="#3b82f6" 
-    textColor="#3b82f6"
+    loaderColor="color.blue.500" 
+    textColor="color.blue.500"
   >
     Loading...
   </Loader>
@@ -277,7 +277,7 @@ export const ButtonLoader = () => {
       isDisabled={loading}
     >
       <Horizontal gap={10} alignItems="center">
-        {loading && <Loader size={16} loaderColor="#ffffff" />}
+        {loading && <Loader size={16} loaderColor="white" />}
         {loading ? 'Submitting...' : 'Submit'}
       </Horizontal>
     </Button>
@@ -298,31 +298,31 @@ export const LoaderShowcase = () => (
     <Vertical gap={15}>
       <Text fontWeight="bold">Spinner Variants</Text>
       <Horizontal gap={20}>
-        <Loader type="spinner" size="sm" loaderColor="#3b82f6" />
-        <Loader type="spinner" size="md" loaderColor="#10b981" />
-        <Loader type="spinner" size="lg" loaderColor="#ef4444" />
+        <Loader type="spinner" size="sm" loaderColor="color.blue.500" />
+        <Loader type="spinner" size="md" loaderColor="color.emerald.500" />
+        <Loader type="spinner" size="lg" loaderColor="color.red.500" />
       </Horizontal>
     </Vertical>
     
     <Vertical gap={15}>
       <Text fontWeight="bold">Dotted Variants</Text>
       <Horizontal gap={20}>
-        <Loader type="dotted" size="sm" loaderColor="#3b82f6" />
-        <Loader type="dotted" size="md" loaderColor="#10b981" />
-        <Loader type="dotted" size="lg" loaderColor="#ef4444" />
+        <Loader type="dotted" size="sm" loaderColor="color.blue.500" />
+        <Loader type="dotted" size="md" loaderColor="color.emerald.500" />
+        <Loader type="dotted" size="lg" loaderColor="color.red.500" />
       </Horizontal>
     </Vertical>
     
     <Vertical gap={15}>
       <Text fontWeight="bold">With Text</Text>
       <Horizontal gap={30}>
-        <Loader type="spinner" loaderColor="#3b82f6" textColor="#3b82f6">
+        <Loader type="spinner" loaderColor="color.blue.500" textColor="color.blue.500">
           Loading...
         </Loader>
         <Loader 
           type="dotted" 
-          loaderColor="#10b981" 
-          textColor="#10b981"
+          loaderColor="color.emerald.500" 
+          textColor="color.emerald.500"
           textPosition="right"
         >
           Processing

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@app-studio/web",
-  "version": "0.9.44",
+  "version": "0.9.45",
   "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;
-}