Merge pull request #25 from etchteam/feature/etch-358-app

feat: app

components/composition/App/App.css

@@ -0,0 +1,19 @@
+diamond-app {
+  display: grid;
+  grid-template-areas: 'header' 'main' 'footer';
+  grid-template-columns: 1fr;
+  grid-template-rows: auto 1fr auto;
+  min-height: 100dvh;
+
+  &::part(header) {
+    grid-area: header;
+  }
+
+  &::part(main) {
+    grid-area: main;
+  }
+
+  &::part(footer) {
+    grid-area: footer;
+  }
+}

components/composition/App/App.stories.ts

@@ -0,0 +1,37 @@
+import { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+export default {
+  component: 'diamond-app',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Wraps the whole site and provides slots for header, footer, and main content.',
+      },
+    },
+  },
+};
+
+export const App: StoryObj = {
+  render: () => html`
+    <diamond-app>
+      <diamond-section padding="lg" class="diamond-theme-medium" slot="header">
+        <diamond-wrap gutter="md">
+          <header>Header</header>
+        </diamond-wrap>
+      </diamond-section>
+      <diamond-section padding="xl" class="diamond-theme-light">
+        <diamond-wrap gutter="md">
+          <main>Main</main>
+        </diamond-wrap>
+      </diamond-section>
+      <diamond-section padding="lg" class="diamond-theme-dark" slot="footer">
+        <diamond-wrap gutter="md">
+          <footer>Footer</footer>
+        </diamond-wrap>
+      </diamond-section>
+    </diamond-app>
+  `,
+};

components/composition/App/App.ts

@@ -0,0 +1,35 @@
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import { JSXCustomElement } from '../../../types/jsx-custom-element';
+
+@customElement('diamond-app')
+export class App extends LitElement {
+  render() {
+    return html`
+      <div part="header">
+        <slot name="header"></slot>
+      </div>
+      <div part="main">
+        <slot></slot>
+      </div>
+      <div part="footer">
+        <slot name="footer"></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'diamond-app': App;
+  }
+}
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'diamond-app': App & JSXCustomElement;
+    }
+  }
+}