Edit Container Component

Name

Also known as (comma separated)

Brief definition Handles state/data/business logic.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "dataLabel", "type": "text", "label": "Data fetched", "default": "user.name" }, { "id": "value", "type": "text", "label": "Fetched value", "default": "Ada Lovelace" }, { "id": "state", "type": "select", "label": "Fetch state", "default": "loaded", "options": [ "loading", "loaded" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"ctnr ctnr--{{state}}\">\n <div class=\"ctnr__box\" style=\"border-color:{{accent}};\">UserContainer<small>fetches {{dataLabel}}</small></div>\n <span class=\"ctnr__arrow\" aria-hidden=\"true\">&darr;</span>\n <div class=\"ctnr__box ctnr__box--presentational\">\n UserView (presentational)\n <div class=\"ctnr__skeleton\" role=\"status\" aria-label=\"loading\"></div>\n <div class=\"ctnr__value\">{{value}}</div>\n </div>\n</div>\n<style>\n.ctnr { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 280px; box-sizing: border-box; text-align: center; }\n.ctnr__box { border: 2px dashed; border-radius: 8px; padding: 10px; font-weight: 700; }\n.ctnr__box small { display: block; font-weight: 400; font-size: 10px; color: #24143099; margin-top: 4px; }\n.ctnr__box--presentational { border-style: solid; border-color: #24143020; margin-top: 4px; }\n.ctnr__arrow { display: block; font-size: 16px; color: #24143060; margin: 4px 0; }\n.ctnr__skeleton { display: none; height: 16px; border-radius: 4px; background: #24143014; margin: 8px auto 0; width: 70%; }\n.ctnr__value { display: none; margin-top: 8px; font-weight: 600; }\n.ctnr--loading .ctnr__skeleton { display: block; }\n.ctnr--loaded .ctnr__value { display: block; }\n</style>", "tailwind": "<div class=\"ctnrtw ctnrtw--{{state}} font-sans text-xs text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[280px] box-border text-center\">\n <div class=\"border-2 border-dashed rounded-lg p-2.5 font-bold\" style=\"border-color:{{accent}};\">UserContainer<small class=\"block font-normal text-[10px] text-[#24143099] mt-1\">fetches {{dataLabel}}</small></div>\n <span class=\"block text-base text-[#24143060] my-1\" aria-hidden=\"true\">&darr;</span>\n <div class=\"border border-solid border-[#24143020] rounded-lg p-2.5 font-bold mt-1\">\n UserView (presentational)\n <div class=\"ctnrtw__skeleton hidden h-4 rounded bg-[#24143014] mx-auto mt-2 w-[70%]\" role=\"status\" aria-label=\"loading\"></div>\n <div class=\"ctnrtw__value hidden mt-2 font-semibold\">{{value}}</div>\n </div>\n</div>\n<style>\n.ctnrtw--loading .ctnrtw__skeleton { display: block; }\n.ctnrtw--loaded .ctnrtw__value { display: block; }\n</style>", "react": "export function ContainerComponent({\n dataLabel = \"{{dataLabel}}\",\n value = \"{{value}}\",\n state = \"{{state}}\",\n accent = \"{{accent}}\",\n}) {\n const loading = state === \"loading\";\n return (\n <div style={{ font: \"12px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12, width: 280, boxSizing: \"border-box\", textAlign: \"center\" }}>\n <div style={{ border: `2px dashed ${accent}`, borderRadius: 8, padding: 10, fontWeight: 700 }}>\n UserContainer\n <small style={{ display: \"block\", fontWeight: 400, fontSize: 10, color: \"#24143099\", marginTop: 4 }}>fetches {dataLabel}</small>\n </div>\n <span aria-hidden=\"true\" style={{ display: \"block\", fontSize: 16, color: \"#24143060\", margin: \"4px 0\" }}>&darr;</span>\n <div style={{ border: \"1.5px solid #24143020\", borderRadius: 8, padding: 10, fontWeight: 700, marginTop: 4 }}>\n UserView (presentational)\n {loading\n ? <div role=\"status\" aria-label=\"loading\" style={{ height: 16, borderRadius: 4, background: \"#24143014\", margin: \"8px auto 0\", width: \"70%\" }} />\n : <div style={{ marginTop: 8, fontWeight: 600 }}>{value}</div>}\n </div>\n </div>\n );\n}" }