dynamate-design-to-code/dist/templates/react-component.js

A powerful tool for converting Figma designs into high-quality, production-ready code with built-in best practices and customizable rulesets

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.generateStylesTemplate = exports.generateComponentTemplate = void 0;
function generateComponentTemplate({ name, props = [], children = false, styles = '' }) {
    const propsInterface = props.length > 0 ? `
interface ${name}Props {
  ${props.join('\n  ')}${children ? '\n  children?: React.ReactNode;' : ''}
}
` : '';
    const propsType = props.length > 0 || children ? `: React.FC<${name}Props>` : '';
    const propsDestructure = props.length > 0 || children
        ? `{ ${[...props.map(p => p.split(':')[0]), children ? 'children' : ''].filter(Boolean).join(', ')} }`
        : '';
    return `import React from 'react';
${styles ? "import styles from './" + name + ".module.css';" : ''}

${propsInterface}
export const ${name}${propsType} = (${propsDestructure}) => {
  return (
    <div${styles ? " className={styles.container}" : ''}>
      {/* Component content */}
      ${children ? '{children}' : ''}
    </div>
  );
};
`;
}
exports.generateComponentTemplate = generateComponentTemplate;
function generateStylesTemplate(name) {
    return `.container {
  /* Add your styles here */
}
`;
}
exports.generateStylesTemplate = generateStylesTemplate;
//# sourceMappingURL=react-component.js.map