Edit Encapsulation

Name

Also known as (comma separated)

Brief definition Keeping implementation details within a component.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "componentName", "type": "text", "label": "Component", "default": "Dropdown" }, { "id": "publicProp", "type": "text", "label": "Public prop", "default": "label" }, { "id": "revealInternals", "type": "toggle", "label": "Peek at internals", "default": false }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#E8A020", "presets": [ "#E8A020", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"enc\">\n <p class=\"enc__title\">&lt;{{componentName}} {{publicProp}}=&quot;&hellip;&quot; /&gt;</p>\n <p class=\"enc__sub\">public API &mdash; the only thing callers can see</p>\n {{#if revealInternals}}\n <div class=\"enc__internal\" style=\"border-color:{{accent}};\">\n <p class=\"enc__internal-title\">private, inside the component</p>\n <code>isOpen = false</code>\n <code>hoverIndex = -1</code>\n <code>listboxRef</code>\n </div>\n {{/if}}\n</div>\n<style>\n.enc { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 300px; box-sizing: border-box; border: 2px solid #24143020; }\n.enc__title { margin: 0 0 4px; font: 12px ui-monospace, monospace; font-weight: 700; }\n.enc__sub { margin: 0; font-size: 11px; color: #24143099; }\n.enc__internal { margin-top: 14px; padding: 12px; border: 2px dashed; border-radius: 8px; background: #24143008; }\n.enc__internal-title { margin: 0 0 8px; font-size: 10px; color: #24143099; text-transform: uppercase; letter-spacing: .04em; }\n.enc__internal code { display: block; font: 11px ui-monospace, monospace; margin-bottom: 4px; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[300px] box-border border-2 border-[#24143020]\">\n <p class=\"m-0 mb-1 font-mono text-xs font-bold\">&lt;{{componentName}} {{publicProp}}=&quot;&hellip;&quot; /&gt;</p>\n <p class=\"m-0 text-[11px] text-[#24143099]\">public API &mdash; the only thing callers can see</p>\n {{#if revealInternals}}\n <div class=\"mt-3.5 p-3 border-2 border-dashed rounded-lg bg-[#24143008]\" style=\"border-color:{{accent}};\">\n <p class=\"m-0 mb-2 text-[10px] text-[#24143099] uppercase tracking-wide\">private, inside the component</p>\n <code class=\"block font-mono text-[11px] mb-1\">isOpen = false</code>\n <code class=\"block font-mono text-[11px] mb-1\">hoverIndex = -1</code>\n <code class=\"block font-mono text-[11px] mb-1\">listboxRef</code>\n </div>\n {{/if}}\n</div>", "react": "export function Encapsulation({\n componentName = \"{{componentName}}\",\n publicProp = \"{{publicProp}}\",\n revealInternals = {{revealInternals}},\n accent = \"{{accent}}\",\n}) {\n return (\n <div style={{ font: \"13px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 20, borderRadius: 12, width: 300, boxSizing: \"border-box\", border: \"2px solid #24143020\" }}>\n <p style={{ margin: \"0 0 4px\", fontFamily: \"ui-monospace, monospace\", fontSize: 12, fontWeight: 700 }}>&lt;{componentName} {publicProp}=\"&hellip;\" /&gt;</p>\n <p style={{ margin: 0, fontSize: 11, color: \"#24143099\" }}>public API &mdash; the only thing callers can see</p>\n {revealInternals && (\n <div style={{ marginTop: 14, padding: 12, border: `2px dashed ${accent}`, borderRadius: 8, background: \"#24143008\" }}>\n <p style={{ margin: \"0 0 8px\", fontSize: 10, color: \"#24143099\", textTransform: \"uppercase\", letterSpacing: \".04em\" }}>private, inside the component</p>\n <code style={{ display: \"block\", fontFamily: \"ui-monospace, monospace\", fontSize: 11, marginBottom: 4 }}>isOpen = false</code>\n <code style={{ display: \"block\", fontFamily: \"ui-monospace, monospace\", fontSize: 11, marginBottom: 4 }}>hoverIndex = -1</code>\n <code style={{ display: \"block\", fontFamily: \"ui-monospace, monospace\", fontSize: 11, marginBottom: 4 }}>listboxRef</code>\n </div>\n )}\n </div>\n );\n}" }