86 lines
5.1 KiB
JavaScript
86 lines
5.1 KiB
JavaScript
export const createModuleWorkflow = {
|
|
id: "create_module",
|
|
name: "Create Module",
|
|
description: "Design and create an HTML module by writing project files directly, then compile it in the CMS.",
|
|
steps: [
|
|
{
|
|
step: 1,
|
|
action: "Understand the design",
|
|
description: "Clarify with user: what does the module show? Is it a hero, grid, list, slider, CTA, form?",
|
|
tool: null,
|
|
critical: "Get clear requirements before writing code. Ask about: layout, colors, responsive behavior, editable fields."
|
|
},
|
|
{
|
|
step: 2,
|
|
action: "Review project styling and patterns",
|
|
description: "Use the saved project styles and nearby modules as reference before writing code.",
|
|
tool: "save_project_styles",
|
|
critical: "Align typography, spacing, colors, and component patterns with the existing project."
|
|
},
|
|
{
|
|
step: 3,
|
|
action: "Create the module files",
|
|
description: "Write index-base.tpl, style.css, script.js, and optional hook.php directly in the module folder.",
|
|
tool: "acai-write",
|
|
critical: "Use project-relative paths. Create complete files. Keep variable names lowercase, descriptive, and stable."
|
|
},
|
|
{
|
|
step: 4,
|
|
action: "Refine targeted blocks if needed",
|
|
description: "Use incremental replacements for small fixes instead of rewriting whole files.",
|
|
tool: "acai-line-replace",
|
|
critical: "Prefer block edits for existing files to reduce token usage and avoid accidental rewrites."
|
|
},
|
|
{
|
|
step: 5,
|
|
action: "Compile the module",
|
|
description: "Compile after editing index-base.tpl so the CMS syncs index.tpl and builder metadata.",
|
|
tool: "compile_module",
|
|
critical: "This is mandatory after every index-base.tpl change."
|
|
},
|
|
{
|
|
step: 6,
|
|
action: "Set example data",
|
|
description: "Set example/static data for module preview. MUST call get_module first to discover the variable schema.",
|
|
tool: "set_module_example_data",
|
|
critical: "Call get_module first to get ALL variable names. Then fill EVERY variable with realistic example data. Missing variables = blank preview."
|
|
},
|
|
{
|
|
step: 7,
|
|
action: "Check module rendering",
|
|
description: "Test the module with specific variable values to verify it renders correctly.",
|
|
tool: "check_module",
|
|
critical: "Test with realistic values. Check for Twig syntax errors, broken images, layout issues."
|
|
}
|
|
],
|
|
context: {
|
|
builder_vars: "data-field-type attribute on elements creates editable fields. Types: textfield (single line text), headfield (heading), textbox (multiline), wysiwyg (rich HTML), link (URL), upload (single image), uploadBackground (background image), uploadMulti (gallery), list (dropdown options), multiv2 (repeatable block).",
|
|
component_syntax: "c-if='varname' shows/hides element based on variable. c-for='item in items' loops over array. c-hidden='true' makes element invisible (for config vars). c-else after c-if for alternative content.",
|
|
module_structure: "Create index-base.tpl, style.css, script.js, and optional hook.php in the module directory. Compile to generate builder.json and the public templates.",
|
|
css_conventions: "Use TailwindCSS by default. For custom CSS: BEM naming with kebab-case. Root class should match module name. Avoid !important.",
|
|
upload_in_modules: "Upload fields are arrays. Single image: {{ varname[0].urlPath | imagec(WIDTH) }}. Background: style=\"background-image: url('{{ varname[0].urlPath | imagec(1920) }}')\". Gallery: {% for img in varname %}{{ img.urlPath }}{% endfor %}."
|
|
},
|
|
rules: [
|
|
"Variable names: lowercase, no spaces, no accents, no special characters",
|
|
"Labels must be UNIQUE — duplicate labels create shared fields",
|
|
"Upload fields are ALWAYS arrays — access with [0].urlPath",
|
|
"Use ONLY Twig FILTERS (pipe syntax), not Twig functions",
|
|
"c-if='varname' for conditional rendering of optional fields",
|
|
"c-hidden='true' for configuration variables not shown to end user",
|
|
"data-field-width on upload elements to set image optimization width",
|
|
"For multiv2 (repeatable): parent element needs data-field-type='multiv2', children are the repeated fields"
|
|
],
|
|
warnings: [
|
|
"DO NOT use duplicate labels — they create shared/linked fields",
|
|
"DO NOT forget to set example data — the module will appear blank in the editor",
|
|
"DO NOT use Twig functions (range, random, etc.) — only filters work",
|
|
"DO NOT access upload vars as strings — always use varname[0].urlPath (array)",
|
|
"DO NOT mix React/Vue syntax — use Twig for templating, vanilla JS for interactivity"
|
|
],
|
|
resources: [
|
|
"acai://resources/guia-builder-vars",
|
|
"acai://resources/guia-atributos-acai",
|
|
"acai://resources/guia-programacion-acai"
|
|
]
|
|
};
|