@promptui-lib/codegen 0.1.4 → 0.1.6

package/dist/frameworks/antd.template.js

@@ -0,0 +1,268 @@
+/**
+ * Ant Design Template
+ * Generates React components with Ant Design components
+ */
+import { getComponentMapping, extractComponentType } from '../mappings/index.js';
+/**
+ * Token mapping for Ant Design
+ */
+const TOKEN_TO_ANTD = {
+    // Colors (using CSS variables from Ant Design 5.x)
+    '$color-primary': 'var(--ant-color-primary)',
+    '$color-secondary': 'var(--ant-color-text-secondary)',
+    '$color-success': 'var(--ant-color-success)',
+    '$color-error': 'var(--ant-color-error)',
+    '$color-warning': 'var(--ant-color-warning)',
+    '$color-text-primary': 'var(--ant-color-text)',
+    '$color-text-secondary': 'var(--ant-color-text-secondary)',
+    '$color-bg-primary': 'var(--ant-color-bg-container)',
+    '$color-bg-secondary': 'var(--ant-color-bg-layout)',
+    // Spacing
+    '$spacing-xs': '4px',
+    '$spacing-sm': '8px',
+    '$spacing-md': '16px',
+    '$spacing-lg': '24px',
+    '$spacing-xl': '32px',
+    '$spacing-2xl': '48px',
+    // Border radius
+    '$radius-none': '0',
+    '$radius-small': 'var(--ant-border-radius-sm)',
+    '$radius-medium': 'var(--ant-border-radius)',
+    '$radius-large': 'var(--ant-border-radius-lg)',
+    '$radius-xl': '16px',
+    '$radius-full': '50%',
+    // Typography
+    '$font-size-xs': 'var(--ant-font-size-sm)',
+    '$font-size-sm': 'var(--ant-font-size)',
+    '$font-size-md': 'var(--ant-font-size-lg)',
+    '$font-size-lg': 'var(--ant-font-size-xl)',
+    '$font-size-xl': 'var(--ant-font-size-heading-4)',
+    '$font-size-2xl': 'var(--ant-font-size-heading-3)',
+    // Shadows
+    '$shadow-sm': 'var(--ant-box-shadow-tertiary)',
+    '$shadow-md': 'var(--ant-box-shadow-secondary)',
+    '$shadow-lg': 'var(--ant-box-shadow)',
+};
+/**
+ * Get Ant Design component mapping from frame name
+ */
+function getAntdMapping(componentName) {
+    const componentType = extractComponentType(componentName);
+    if (!componentType)
+        return null;
+    const mapping = getComponentMapping(componentType);
+    if (!mapping)
+        return null;
+    return mapping.antd;
+}
+/**
+ * Convert token to Ant Design value
+ */
+function tokenToAntd(value) {
+    if (value.startsWith('$')) {
+        return TOKEN_TO_ANTD[value] || value;
+    }
+    return value;
+}
+/**
+ * Convert style blocks to inline style object
+ */
+function stylesToInline(styles) {
+    const styleEntries = [];
+    styles.forEach(block => {
+        block.properties.forEach(prop => {
+            const key = prop.property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+            const value = tokenToAntd(prop.value);
+            styleEntries.push(`${key}: '${value}'`);
+        });
+    });
+    return styleEntries.length > 0 ? `{{ ${styleEntries.join(', ')} }}` : '{}';
+}
+/**
+ * Check if a child is a text node
+ */
+function isTextNode(child) {
+    return 'type' in child && child.type === 'text';
+}
+/**
+ * Check if a child is a JSX node
+ */
+function isJSXNode(child) {
+    return 'tag' in child;
+}
+/**
+ * Collect all imports needed for the component
+ */
+function collectImports(node, imports) {
+    const mapping = getAntdMapping(node.tag);
+    if (mapping?.imports) {
+        mapping.imports.forEach(imp => imports.add(imp));
+    }
+    if (node.children) {
+        node.children.forEach(child => {
+            if (isJSXNode(child)) {
+                collectImports(child, imports);
+            }
+        });
+    }
+}
+/**
+ * Generate JSX for a node
+ */
+function generateJSX(node, indent = 2) {
+    const spaces = ' '.repeat(indent);
+    const mapping = getAntdMapping(node.tag);
+    // Determine tag/component to use
+    let tagName = node.tag || 'div';
+    let additionalProps = [];
+    if (mapping) {
+        tagName = mapping.component;
+        if (mapping.props) {
+            additionalProps = Object.entries(mapping.props).map(([key, value]) => {
+                // Handle boolean values
+                if (value === 'true' || value === 'false') {
+                    return value === 'true' ? key : `${key}={false}`;
+                }
+                return `${key}="${value}"`;
+            });
+        }
+    }
+    // Generate className if exists
+    const classAttr = node.className ? ` className="${node.className}"` : '';
+    // Generate props from node.props
+    const nodePropsStr = Object.entries(node.props || {})
+        .map(([key, value]) => {
+        if (typeof value === 'boolean') {
+            return value ? key : `${key}={false}`;
+        }
+        if (typeof value === 'string') {
+            return `${key}="${value}"`;
+        }
+        return '';
+    })
+        .filter(Boolean)
+        .join(' ');
+    // Additional props string
+    const propsStr = [...additionalProps, nodePropsStr].filter(Boolean).join(' ');
+    const propsOutput = propsStr ? ' ' + propsStr : '';
+    // Handle children
+    if (node.children && node.children.length > 0) {
+        const childrenJSX = node.children
+            .map(child => {
+            if (isTextNode(child)) {
+                return `${spaces}  ${child.value}`;
+            }
+            if (isJSXNode(child)) {
+                return generateJSX(child, indent + 2);
+            }
+            return '';
+        })
+            .filter(Boolean)
+            .join('\n');
+        return `${spaces}<${tagName}${propsOutput}${classAttr}>\n${childrenJSX}\n${spaces}</${tagName}>`;
+    }
+    else if (node.selfClosing) {
+        return `${spaces}<${tagName}${propsOutput}${classAttr} />`;
+    }
+    else {
+        return `${spaces}<${tagName}${propsOutput}${classAttr}></${tagName}>`;
+    }
+}
+/**
+ * Generate complete Ant Design component
+ */
+export function generateAntdComponent(ast) {
+    const { name, props, jsx, styles } = ast;
+    // Collect all imports
+    const imports = new Set();
+    imports.add("import React from 'react';");
+    collectImports(jsx, imports);
+    // Generate props interface
+    const propsInterface = props && props.length > 0
+        ? `interface ${name}Props {\n${props.map(p => `  ${p.name}${p.required ? '' : '?'}: ${p.type};`).join('\n')}\n}\n\n`
+        : '';
+    // Generate component
+    const propsParam = props && props.length > 0 ? `{ ${props.map(p => p.name).join(', ')} }: ${name}Props` : '';
+    const jsxContent = generateJSX(jsx);
+    // Generate style object if styles exist
+    const styleSection = styles && styles.length > 0
+        ? `\nconst styles = ${stylesToInline(styles)};\n`
+        : '';
+    return `${Array.from(imports).join('\n')}
+${styleSection}
+${propsInterface}export const ${name} = (${propsParam}) => {
+  return (
+${jsxContent}
+  );
+};
+
+export default ${name};
+`;
+}
+/**
+ * Generate Ant Design ConfigProvider wrapper with theme
+ */
+export function generateAntdThemeConfig(colors) {
+    return `import { ConfigProvider } from 'antd';
+
+const theme = {
+  token: {
+    colorPrimary: '${colors.primary || '#1677ff'}',
+    colorSuccess: '${colors.success || '#52c41a'}',
+    colorWarning: '${colors.warning || '#faad14'}',
+    colorError: '${colors.error || '#ff4d4f'}',
+    colorInfo: '${colors.info || '#1677ff'}',
+    borderRadius: 6,
+  },
+};
+
+export const ThemeProvider = ({ children }: { children: React.ReactNode }) => (
+  <ConfigProvider theme={theme}>
+    {children}
+  </ConfigProvider>
+);
+`;
+}
+/**
+ * Generate complete page with Ant Design Layout
+ */
+export function generateAntdLayout(ast) {
+    const { name } = ast;
+    return `import React from 'react';
+import { Layout, Menu, theme } from 'antd';
+
+const { Header, Content, Footer, Sider } = Layout;
+
+export const ${name} = () => {
+  const {
+    token: { colorBgContainer, borderRadiusLG },
+  } = theme.useToken();
+
+  return (
+    <Layout style={{ minHeight: '100vh' }}>
+      <Header style={{ display: 'flex', alignItems: 'center' }}>
+        <div className="logo" />
+        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']} />
+      </Header>
+      <Content style={{ padding: '0 48px' }}>
+        <div
+          style={{
+            background: colorBgContainer,
+            minHeight: 280,
+            padding: 24,
+            borderRadius: borderRadiusLG,
+          }}
+        >
+          {/* Content here */}
+        </div>
+      </Content>
+      <Footer style={{ textAlign: 'center' }}>
+        Created with PromptUI
+      </Footer>
+    </Layout>
+  );
+};
+
+export default ${name};
+`;
+}

package/dist/frameworks/index.d.ts

@@ -2,7 +2,7 @@
  * Framework Templates
  * Templates for generating different UI frameworks
  */
-export type FrameworkType = 'react' | 'mui' | 'tailwind' | 'bootstrap' | 'flutter' | 'swiftui';
+export type FrameworkType = 'react' | 'mui' | 'antd' | 'tailwind' | 'bootstrap' | 'flutter' | 'swiftui';
 export interface IFrameworkConfig {
     name: FrameworkType;
     displayName: string;
@@ -14,6 +14,7 @@ export interface IFrameworkConfig {
 }
 export declare const FRAMEWORKS: Record<FrameworkType, IFrameworkConfig>;
 export { generateMuiComponent, generateMuiStyles } from './mui.template.js';
+export { generateAntdComponent, generateAntdThemeConfig, generateAntdLayout } from './antd.template.js';
 export { generateTailwindComponent, generateTailwindClasses } from './tailwind.template.js';
 export { generateBootstrapComponent } from './bootstrap.template.js';
 export { generateFlutterComponent } from './flutter.template.js';

package/dist/frameworks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/frameworks/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AAE/F,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,aAAa,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAqD9D,CAAC;AAEF,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAAE,yBAAyB,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAC5F,OAAO,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/frameworks/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AAExG,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,aAAa,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAgE9D,CAAC;AAEF,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxG,OAAO,EAAE,yBAAyB,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAC5F,OAAO,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/frameworks/index.js

@@ -23,6 +23,17 @@ export const FRAMEWORKS = {
             "import type { SxProps, Theme } from '@mui/material/styles';",
         ],
     },
+    antd: {
+        name: 'antd',
+        displayName: 'Ant Design',
+        description: 'React components with Ant Design components',
+        fileExtension: 'tsx',
+        styleExtension: null, // Inline styles
+        imports: [
+            "import React from 'react';",
+            "import { Button, Card, Input, Select, Table, Modal, Form } from 'antd';",
+        ],
+    },
     tailwind: {
         name: 'tailwind',
         displayName: 'Tailwind CSS',
@@ -57,6 +68,7 @@ export const FRAMEWORKS = {
     },
 };
 export { generateMuiComponent, generateMuiStyles } from './mui.template.js';
+export { generateAntdComponent, generateAntdThemeConfig, generateAntdLayout } from './antd.template.js';
 export { generateTailwindComponent, generateTailwindClasses } from './tailwind.template.js';
 export { generateBootstrapComponent } from './bootstrap.template.js';
 export { generateFlutterComponent } from './flutter.template.js';

package/dist/index.d.ts

@@ -6,4 +6,5 @@ export * from './generators/index.js';
 export * from './writers/index.js';
 export * from './frameworks/index.js';
 export * from './mappings/index.js';
+export * from './detection/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}

package/dist/index.js

@@ -6,3 +6,4 @@ export * from './generators/index.js';
 export * from './writers/index.js';
 export * from './frameworks/index.js';
 export * from './mappings/index.js';
+export * from './detection/index.js';

package/dist/mappings/component-mappings.d.ts

@@ -16,6 +16,12 @@ export interface IComponentMapping {
         props?: Record<string, string>;
         imports?: string[];
     };
+    /** Ant Design component */
+    antd: {
+        component: string;
+        props?: Record<string, string>;
+        imports?: string[];
+    };
     /** Tailwind classes */
     tailwind: {
         tag: string;

package/dist/mappings/component-mappings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component-mappings.d.ts","sourceRoot":"","sources":["../../src/mappings/component-mappings.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,iBAAiB;IAChC,kCAAkC;IAClC,SAAS,EAAE;QACT,GAAG,EAAE,MAAM,CAAC;QACZ,OAAO,EAAE,MAAM,EAAE,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,oBAAoB;IACpB,GAAG,EAAE;QACH,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC/B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;KACpB,CAAC;IACF,uBAAuB;IACvB,QAAQ,EAAE;QACR,GAAG,EAAE,MAAM,CAAC;QACZ,OAAO,EAAE,MAAM,EAAE,CAAC;KACnB,CAAC;IACF,2CAA2C;IAC3C,IAAI,EAAE;QACJ,GAAG,EAAE,MAAM,CAAC;QACZ,SAAS,EAAE,MAAM,CAAC;QAClB,6CAA6C;QAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;IACF,qBAAqB;IACrB,OAAO,EAAE;QACP,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAChC,CAAC;IACF,mBAAmB;IACnB,OAAO,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;KACtB,CAAC;CACH;AAED;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAwkChE,CAAC;AAEF;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,iBAAiB,GAAG,SAAS,CAG/E;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAEzD;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAYhE"}
+{"version":3,"file":"component-mappings.d.ts","sourceRoot":"","sources":["../../src/mappings/component-mappings.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,iBAAiB;IAChC,kCAAkC;IAClC,SAAS,EAAE;QACT,GAAG,EAAE,MAAM,CAAC;QACZ,OAAO,EAAE,MAAM,EAAE,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,oBAAoB;IACpB,GAAG,EAAE;QACH,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC/B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;KACpB,CAAC;IACF,2BAA2B;IAC3B,IAAI,EAAE;QACJ,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC/B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;KACpB,CAAC;IACF,uBAAuB;IACvB,QAAQ,EAAE;QACR,GAAG,EAAE,MAAM,CAAC;QACZ,OAAO,EAAE,MAAM,EAAE,CAAC;KACnB,CAAC;IACF,2CAA2C;IAC3C,IAAI,EAAE;QACJ,GAAG,EAAE,MAAM,CAAC;QACZ,SAAS,EAAE,MAAM,CAAC;QAClB,6CAA6C;QAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;IACF,qBAAqB;IACrB,OAAO,EAAE;QACP,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAChC,CAAC;IACF,mBAAmB;IACnB,OAAO,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;KACtB,CAAC;CACH;AAED;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAmkDhE,CAAC;AAEF;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,iBAAiB,GAAG,SAAS,CAG/E;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAEzD;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAYhE"}