Molecule ^molecule-label

= + ^molecule-react SearchBarComponent ^molecule-angular

Atom ^atom-label

, , ^atom-react ButtonComponent, InputComponent ^atom-angular

Side Effects Boundary ^side-effects-boundary

Storybook ^storybook-label

Angular CDK ^cdk-label

%%

Drawing

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [
    {
      "id": "title",
      "type": "text",
      "x": 100,
      "y": 10,
      "width": 620,
      "height": 28,
      "text": "Atomic Design — Component Composition Hierarchy",
      "fontSize": 18,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "top",
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "page-band",
      "type": "rectangle",
      "x": 100,
      "y": 50,
      "width": 580,
      "height": 90,
      "strokeColor": "#c2185b",
      "backgroundColor": "#fce4ec",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "page-label",
      "type": "text",
      "x": 115,
      "y": 65,
      "width": 80,
      "height": 24,
      "text": "Page",
      "fontSize": 16,
      "fontFamily": 1,
      "textAlign": "left",
      "verticalAlign": "middle",
      "strokeColor": "#c2185b",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "page-react",
      "type": "text",
      "x": 220,
      "y": 58,
      "width": 280,
      "height": 20,
      "text": "<BlogPost post={data} />",
      "fontSize": 13,
      "fontFamily": 2,
      "textAlign": "left",
      "verticalAlign": "middle",
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "page-angular",
      "type": "text",
      "x": 220,
      "y": 82,
      "width": 280,
      "height": 20,
      "text": "BlogPostComponent",
      "fontSize": 13,
      "fontFamily": 2,
      "textAlign": "left",
      "verticalAlign": "middle",
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "page-note",
      "type": "text",
      "x": 510,
      "y": 68,
      "width": 160,
      "height": 20,
      "text": "Side effects: Yes",
      "fontSize": 12,
      "fontFamily": 1,
      "textAlign": "right",
      "verticalAlign": "middle",
      "strokeColor": "#c2185b",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "arrow-page-template",
      "type": "arrow",
      "x": 390,
      "y": 144,
      "width": 0,
      "height": 26,
      "strokeColor": "#5c5f66",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "roughness": 1,
      "opacity": 100,
      "points": [[0, 0], [0, -26]],
      "startArrowhead": null,
      "endArrowhead": "arrow"
    },
    {
      "id": "template-band",
      "type": "rectangle",
      "x": 100,
      "y": 170,
      "width": 580,
      "height": 90,
      "strokeColor": "#7b1fa2",
      "backgroundColor": "#f3e5f5",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "template-label",
      "type": "text",
      "x": 115,
      "y": 185,
      "width": 100,
      "height": 24,
      "text": "Template",
      "fontSize": 16,
      "fontFamily": 1,
      "textAlign": "left",
      "verticalAlign": "middle",
      "strokeColor": "#7b1fa2",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "template-react",
      "type": "text",
      "x": 220,
      "y": 178,
      "width": 320,
      "height": 20,
      "text": "<BlogLayout>{children}</BlogLayout>",
      "fontSize": 13,
      "fontFamily": 2,
      "textAlign": "left",
      "verticalAlign": "middle",
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "template-angular",
      "type": "text",
      "x": 220,
      "y": 202,
      "width": 320,
      "height": 20,
      "text": "BlogLayoutComponent with <ng-content>",
      "fontSize": 13,
      "fontFamily": 2,
      "textAlign": "left",
      "verticalAlign": "middle",
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "template-note",
      "type": "text",
      "x": 510,
      "y": 188,
      "width": 160,
      "height": 20,
      "text": "Side effects: No",
      "fontSize": 12,
      "fontFamily": 1,
      "textAlign": "right",
      "verticalAlign": "middle",
      "strokeColor": "#7b1fa2",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "arrow-template-organism",
      "type": "arrow",
      "x": 390,
      "y": 264,
      "width": 0,
      "height": 26,
      "strokeColor": "#5c5f66",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "roughness": 1,
      "opacity": 100,
      "points": [[0, 0], [0, -26]],
      "startArrowhead": null,
      "endArrowhead": "arrow"
    },
    {
      "id": "organism-band",
      "type": "rectangle",
      "x": 100,
      "y": 290,
      "width": 580,
      "height": 90,
      "strokeColor": "#e65100",
      "backgroundColor": "#fff3e0",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "organism-label",
      "type": "text",
      "x": 115,
      "y": 305,
      "width": 100,
      "height": 24,
      "text": "Organism",
      "fontSize": 16,
      "fontFamily": 1,
      "textAlign": "left",
      "verticalAlign": "middle",
      "strokeColor": "#e65100",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "organism-react",
      "type": "text",
      "x": 220,
      "y": 298,
      "width": 340,
      "height": 20,
      "text": "<Header> = Logo + SearchBar + NavMenu",
      "fontSize": 13,
      "fontFamily": 2,
      "textAlign": "left",
      "verticalAlign": "middle",
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "organism-angular",
      "type": "text",
      "x": 220,
      "y": 322,
      "width": 320,
      "height": 20,
      "text": "HeaderComponent (inject AuthService)",
      "fontSize": 13,
      "fontFamily": 2,
      "textAlign": "left",
      "verticalAlign": "middle",
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "organism-note",
      "type": "text",
      "x": 510,
      "y": 308,
      "width": 160,
      "height": 20,
      "text": "Side effects: Yes",
      "fontSize": 12,
      "fontFamily": 1,
      "textAlign": "right",
      "verticalAlign": "middle",
      "strokeColor": "#e65100",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "side-effects-boundary-line",
      "type": "line",
      "x": 100,
      "y": 384,
      "width": 580,
      "height": 0,
      "strokeColor": "#e03131",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "roughness": 1,
      "strokeStyle": "dashed",
      "opacity": 100,
      "points": [[0, 0], [580, 0]]
    },
    {
      "id": "side-effects-boundary",
      "type": "text",
      "x": 250,
      "y": 387,
      "width": 280,
      "height": 18,
      "text": "— Side Effects Boundary —",
      "fontSize": 12,
      "fontFamily": 1,
      "textAlign": "center",
      "verticalAlign": "top",
      "strokeColor": "#e03131",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "arrow-organism-molecule",
      "type": "arrow",
      "x": 390,
      "y": 384,
      "width": 0,
      "height": 26,
      "strokeColor": "#5c5f66",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "roughness": 1,
      "opacity": 100,
      "points": [[0, 0], [0, -26]],
      "startArrowhead": null,
      "endArrowhead": "arrow"
    },
    {
      "id": "molecule-band",
      "type": "rectangle",
      "x": 100,
      "y": 410,
      "width": 580,
      "height": 90,
      "strokeColor": "#1565c0",
      "backgroundColor": "#e3f2fd",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "molecule-label",
      "type": "text",
      "x": 115,
      "y": 425,
      "width": 100,
      "height": 24,
      "text": "Molecule",
      "fontSize": 16,
      "fontFamily": 1,
      "textAlign": "left",
      "verticalAlign": "middle",
      "strokeColor": "#1565c0",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "molecule-react",
      "type": "text",
      "x": 220,
      "y": 418,
      "width": 300,
      "height": 20,
      "text": "<SearchBar> = <Input> + <Button>",
      "fontSize": 13,
      "fontFamily": 2,
      "textAlign": "left",
      "verticalAlign": "middle",
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "molecule-angular",
      "type": "text",
      "x": 220,
      "y": 442,
      "width": 280,
      "height": 20,
      "text": "SearchBarComponent",
      "fontSize": 13,
      "fontFamily": 2,
      "textAlign": "left",
      "verticalAlign": "middle",
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "molecule-note",
      "type": "text",
      "x": 510,
      "y": 428,
      "width": 160,
      "height": 20,
      "text": "Side effects: No",
      "fontSize": 12,
      "fontFamily": 1,
      "textAlign": "right",
      "verticalAlign": "middle",
      "strokeColor": "#1565c0",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "arrow-molecule-atom",
      "type": "arrow",
      "x": 390,
      "y": 504,
      "width": 0,
      "height": 26,
      "strokeColor": "#5c5f66",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "roughness": 1,
      "opacity": 100,
      "points": [[0, 0], [0, -26]],
      "startArrowhead": null,
      "endArrowhead": "arrow"
    },
    {
      "id": "atom-band",
      "type": "rectangle",
      "x": 100,
      "y": 530,
      "width": 580,
      "height": 90,
      "strokeColor": "#2e7d32",
      "backgroundColor": "#e8f5e9",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "atom-label",
      "type": "text",
      "x": 115,
      "y": 545,
      "width": 60,
      "height": 24,
      "text": "Atom",
      "fontSize": 16,
      "fontFamily": 1,
      "textAlign": "left",
      "verticalAlign": "middle",
      "strokeColor": "#2e7d32",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "atom-react",
      "type": "text",
      "x": 220,
      "y": 538,
      "width": 300,
      "height": 20,
      "text": "<Button />, <Input />, <Badge />",
      "fontSize": 13,
      "fontFamily": 2,
      "textAlign": "left",
      "verticalAlign": "middle",
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "atom-angular",
      "type": "text",
      "x": 220,
      "y": 562,
      "width": 280,
      "height": 20,
      "text": "ButtonComponent, InputComponent",
      "fontSize": 13,
      "fontFamily": 2,
      "textAlign": "left",
      "verticalAlign": "middle",
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "atom-note",
      "type": "text",
      "x": 510,
      "y": 548,
      "width": 160,
      "height": 20,
      "text": "Side effects: No",
      "fontSize": 12,
      "fontFamily": 1,
      "textAlign": "right",
      "verticalAlign": "middle",
      "strokeColor": "#2e7d32",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "storybook-bracket",
      "type": "rectangle",
      "x": 695,
      "y": 290,
      "width": 8,
      "height": 330,
      "strokeColor": "#f08c00",
      "backgroundColor": "#fff9db",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "storybook-label",
      "type": "text",
      "x": 708,
      "y": 420,
      "width": 80,
      "height": 60,
      "text": "Storybook\n(Atoms–\nOrganisms)",
      "fontSize": 12,
      "fontFamily": 1,
      "textAlign": "left",
      "verticalAlign": "middle",
      "strokeColor": "#f08c00",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "cdk-bracket",
      "type": "rectangle",
      "x": 10,
      "y": 410,
      "width": 8,
      "height": 210,
      "strokeColor": "#1971c2",
      "backgroundColor": "#d0ebff",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "roughness": 1,
      "opacity": 100
    },
    {
      "id": "cdk-label",
      "type": "text",
      "x": 6,
      "y": 480,
      "width": 80,
      "height": 60,
      "text": "Angular\nCDK\n(Atom\nlevel)",
      "fontSize": 12,
      "fontFamily": 1,
      "textAlign": "left",
      "verticalAlign": "middle",
      "strokeColor": "#1971c2",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 1,
      "roughness": 1,
      "opacity": 100
    }
  ],
  "appState": {
    "gridSize": null,
    "viewBackgroundColor": "#ffffff"
  },
  "files": {}
}

%%