create-switch-framework-app 0.1.0

package/templates/web/base/app/(tabs)/+not-found.js

@@ -0,0 +1,158 @@
+export const screen = {
+  name: '+not-found',
+  path: '/+not-found',
+  title: 'Not Found',
+  tag: 'sw-user-not-found-screen',
+  layout: 'stack'
+};
+
+export class SwUserNotFoundScreen extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  static get observedAttributes() {
+    return ['path'];
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const path = this.getAttribute('path') || window.location.pathname || '';
+
+    this.shadowRoot.innerHTML = `
+      ${this.styleSheet()}
+      <div class="wrap">
+        <div class="card">
+          <div class="code">404</div>
+          <div class="h">This screen does not exist</div>
+          <div class="p">No screen is registered for:</div>
+          <div class="path">${path}</div>
+
+          <div class="row">
+            <button class="btn" id="home">Go to Home</button>
+            <button class="btn secondary" id="back">Go Back</button>
+          </div>
+        </div>
+      </div>
+    `;
+
+    this.shadowRoot.getElementById('home')?.addEventListener('click', () => {
+      const navigate = globalStates?.getState ? globalStates.getState('navigate') : null;
+      if (typeof navigate === 'function') navigate('home');
+    });
+
+    this.shadowRoot.getElementById('back')?.addEventListener('click', () => {
+      const goBack = globalStates?.getState ? globalStates.getState('go_back') : null;
+      if (typeof goBack === 'function') goBack();
+      else window.history.back();
+    });
+  }
+
+  styleSheet() {
+    return `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          min-height: 100dvh;
+          font-family: var(--font);
+        }
+
+        * {
+          box-sizing: border-box;
+          font-family: inherit;
+        }
+
+        .wrap {
+          min-height: 100vh;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 18px;
+        }
+
+        .card {
+          width: min(680px, 100%);
+          background: transparent;
+          border: none;
+          border-radius: 18px;
+          padding: 18px;
+          box-shadow: none;
+        }
+
+        .code {
+          font-weight: 1000;
+          font-size: 44px;
+          line-height: 1;
+          color: var(--main_text);
+        }
+
+        .h {
+          margin-top: 10px;
+          font-weight: 1000;
+          font-size: 20px;
+          color: var(--main_text);
+        }
+
+        .p {
+          margin-top: 6px;
+          color: var(--sub_text);
+          font-weight: 800;
+        }
+
+        .path {
+          margin-top: 10px;
+          padding: 10px 12px;
+          border-radius: 14px;
+          background: var(--surface_2);
+          border: 1px solid var(--border_light);
+          font-weight: 900;
+          color: var(--main_text);
+          word-break: break-word;
+        }
+
+        .row {
+          margin-top: 14px;
+          display: flex;
+          gap: 10px;
+          flex-wrap: wrap;
+        }
+
+        .btn {
+          border: none;
+          background: linear-gradient(135deg, #0091ff 0%, #0073e6 100%);
+          color: #fff;
+          font-weight: 1000;
+          border-radius: 999px;
+          padding: 10px 14px;
+          cursor: pointer;
+        }
+
+        .btn:hover {
+          opacity: 0.9;
+        }
+
+        .btn.secondary {
+          background: var(--surface_2);
+          color: var(--main_text);
+        }
+
+        .btn.secondary:hover {
+          background: var(--surface_3);
+        }
+      </style>
+    `;
+  }
+}
+
+if (!customElements.get('sw-user-not-found-screen')) {
+  customElements.define('sw-user-not-found-screen', SwUserNotFoundScreen);
+}

package/templates/web/base/app/(tabs)/_layout.js

@@ -0,0 +1,125 @@
+import { Tabs } from '/switch-framework/index.js';
+
+export const tabsLayout = Tabs({
+  name: 'sw-tabs-layout',
+  initialTab: 'home',
+  tabs: [
+    {
+      name: 'home',
+      title: 'Home',
+      icon: 'home',
+      path: '/home',
+      screen: 'sw-home-screen',
+      match: ['home']
+    },
+    {
+      name: 'explore',
+      title: 'Explore',
+      icon: 'compass',
+      path: '/explore',
+      screen: 'sw-explore-screen',
+      match: ['explore']
+    }
+  ],
+  options: {
+    position: 'bottom'
+  }
+});
+
+export class SwTabsLayout extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  getContentContainer() {
+    return this.shadowRoot.querySelector('.tabcontainer');
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      ${this.styleSheet()}
+      <div class="layout">
+        <div class="tabcontainer"></div>
+        <div class="tabbar">
+          <sw-tab-bar></sw-tab-bar>
+        </div>
+      </div>
+    `;
+  }
+
+  styleSheet() {
+    return `
+      <style> 
+      :host {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: inherit;
+    overflow: hidden;
+    font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif
+}
+
+* {
+    box-sizing: border-box;
+    font-family: inherit
+}
+
+
+.layout {
+  min-height: 0;
+  height: 100%;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  overflow: hidden;
+}
+
+.tabbar {
+  height: auto;
+  position: sticky;
+  bottom: 0;
+  z-index: 50;
+}
+
+
+.tabcontainer {
+  z-index: 1;
+  min-height: 0;
+  overflow: auto;
+  overflow-x: hidden;
+  padding-bottom: calc(12px + 56px + env(safe-area-inset-bottom, 0px));
+}
+
+</style>
+    `;
+  }
+}
+
+if (!customElements.get('sw-tabs-layout')) {
+  customElements.define('sw-tabs-layout', SwTabsLayout);
+}
+
+export const screens = [
+  Tabs.screen({
+    name: 'home',
+    path: '/home',
+    title: 'Home',
+    tag: 'sw-home-screen',
+    layout: 'tabs'
+  }),
+  Tabs.screen({
+    name: 'explore',
+    path: '/explore',
+    title: 'Explore',
+    tag: 'sw-explore-screen',
+    layout: 'tabs'
+  })
+];
+
+tabsLayout.screens = screens;
+
+export default tabsLayout;

package/templates/web/base/app/(tabs)/explore.js

@@ -0,0 +1,44 @@
+export const screen = {
+  name: 'explore',
+  path: '/explore',
+  title: 'Explore',
+  tag: 'sw-explore-screen',
+  layout: 'tabs'
+};
+
+export class SwExploreScreen extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      ${this.styleSheet()}
+      <div class="wrap">
+        <div class="h">Explore</div>
+        <div class="p">This is a placeholder tab. Replace it with whatever you want.</div>
+      </div>
+    `;
+  }
+
+  styleSheet() {
+    return `
+      <style>
+        :host{display:block;padding:18px;font-family:var(--font)}
+        *{box-sizing:border-box;font-family:inherit}
+        .wrap{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
+        .h{font-weight:1000;font-size:22px;color:var(--main_text)}
+        .p{color:var(--sub_text);font-weight:800;line-height:1.5}
+      </style>
+    `;
+  }
+}
+
+if (!customElements.get('sw-explore-screen')) {
+  customElements.define('sw-explore-screen', SwExploreScreen);
+}

package/templates/web/base/app/(tabs)/index.js

@@ -0,0 +1,218 @@
+export const screen = {
+  name: 'home',
+  path: '/home',
+  title: 'Home',
+  tag: 'sw-home-screen',
+  layout: 'tabs'
+};
+
+export class SwHomeScreen extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      ${this.styleSheet()}
+      <div class="wrap">
+        <div class="spacer-top"></div>
+        
+        <div class="hero">
+          <div class="logo-container">
+            <img class="logo" src="/assets/logo.svg" alt="Expo" />
+          </div>
+          <div class="title">Tabs View</div>
+        </div>
+
+        <div class="spacer-middle"></div>
+
+        <div class="section">
+          <div class="label">GET STARTED</div>
+          
+          <div class="card">
+            <div class="row">
+              <div class="l">Try editing</div>
+              <div class="r">src/app/index.tsx</div>
+            </div>
+            <div class="row">
+              <div class="l">Dev tools</div>
+              <div class="r">cmd+d</div>
+            </div>
+            <div class="row">
+              <div class="l">Fresh start</div>
+              <div class="r">npm reset project</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="spacer-bottom"></div>
+      </div>
+    `;
+  }
+
+  styleSheet() {
+    return `
+      <style>
+        :host {
+          display: block;
+          padding: 0;
+          font-family: var(--font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+          height: 100%;
+          background: var(--bg, #fff);
+        }
+
+        * {
+          box-sizing: border-box;
+          font-family: inherit;
+        }
+
+        .wrap {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          padding: 0 16px;
+        }
+
+        .spacer-top {
+          flex: 1;
+          min-height: 40px;
+        }
+
+        .hero {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 20px;
+          text-align: center;
+        }
+
+        .logo-container {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 120px;
+          height: 120px;
+          background: linear-gradient(135deg, #0091ff 0%, #0073e6 100%);
+          border-radius: 32px;
+          box-shadow: 0 20px 40px rgba(0, 145, 255, 0.3);
+        }
+
+        .logo {
+          width: 70px;
+          height: 70px;
+          filter: brightness(0) invert(1);
+        }
+
+        .title {
+          font-weight: 700;
+          color: var(--main_text, #000);
+          font-size: 36px;
+          line-height: 1.1;
+          letter-spacing: -0.5px;
+        }
+
+        .spacer-middle {
+          flex: 0.8;
+          min-height: 20px;
+        }
+
+        .section {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+          max-width: 400px;
+        }
+
+        .label {
+          font-weight: 600;
+          font-size: 12px;
+          letter-spacing: 1.2px;
+          color: var(--sub_text, #666);
+          text-transform: uppercase;
+          padding: 0 12px;
+        }
+
+        .card {
+          width: 100%;
+          background: #f5f5f5;
+          border-radius: 20px;
+          padding: 8px;
+          display: flex;
+          flex-direction: column;
+          gap: 0;
+          overflow: hidden;
+        }
+
+        :root[data-theme="dark"] .card {
+          background: rgba(255, 255, 255, 0.08);
+        }
+
+        .row {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 12px;
+          padding: 12px 14px;
+          border-radius: 16px;
+          transition: background 0.2s ease;
+        }
+
+        .row:active {
+          background: rgba(0, 0, 0, 0.08);
+        }
+
+        :root[data-theme="dark"] .row {
+          background: rgba(255, 255, 255, 0.06);
+        }
+
+        :root[data-theme="dark"] .row:active {
+          background: rgba(255, 255, 255, 0.12);
+        }
+
+        .l {
+          font-weight: 600;
+          color: var(--main_text, #000);
+          font-size: 14px;
+        }
+
+        .r {
+          font-weight: 500;
+          color: var(--sub_text, #666);
+          background: rgba(0, 0, 0, 0.05);
+          padding: 6px 12px;
+          border-radius: 999px;
+          font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+          font-size: 11px;
+          white-space: nowrap;
+        }
+
+        :root[data-theme="dark"] .r {
+          background: rgba(255, 255, 255, 0.1);
+        }
+
+        .spacer-bottom {
+          flex: 1;
+          min-height: 20px;
+        }
+        @media (max-width: 600px) {
+          .title {
+            font-size: 32px;
+          }
+        }
+      </style>
+    `;
+  }
+}
+
+if (!customElements.get('sw-home-screen')) {
+  customElements.define('sw-home-screen', SwHomeScreen);
+}

package/templates/web/base/app/(tabs)/register.js

@@ -0,0 +1,12 @@
+export async function appRegisters() {
+  await Promise.all([
+    import('../components/SwStarterSplashScreen.js'),
+    import('../components/SwTabBar.js'),
+
+    import('./index.js'),
+    import('./+not-found.js'),
+    import('./(tabs)/_layout.js'),
+    import('./(tabs)/index.js'),
+    import('./(tabs)/explore.js')
+  ]);
+}

package/templates/web/base/app/+not-found.js

@@ -0,0 +1,158 @@
+export const screen = {
+  name: '+not-found',
+  path: '/+not-found',
+  title: 'Not Found',
+  tag: 'sw-user-not-found-screen',
+  layout: 'stack'
+};
+
+export class SwUserNotFoundScreen extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  static get observedAttributes() {
+    return ['path'];
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const path = this.getAttribute('path') || window.location.pathname || '';
+
+    this.shadowRoot.innerHTML = `
+      ${this.styleSheet()}
+      <div class="wrap">
+        <div class="card">
+          <div class="code">404</div>
+          <div class="h">This screen does not exist</div>
+          <div class="p">No screen is registered for:</div>
+          <div class="path">${path}</div>
+
+          <div class="row">
+            <button class="btn" id="home">Go to Home</button>
+            <button class="btn secondary" id="back">Go Back</button>
+          </div>
+        </div>
+      </div>
+    `;
+
+    this.shadowRoot.getElementById('home')?.addEventListener('click', () => {
+      const navigate = globalStates?.getState ? globalStates.getState('navigate') : null;
+      if (typeof navigate === 'function') navigate('home');
+    });
+
+    this.shadowRoot.getElementById('back')?.addEventListener('click', () => {
+      const goBack = globalStates?.getState ? globalStates.getState('go_back') : null;
+      if (typeof goBack === 'function') goBack();
+      else window.history.back();
+    });
+  }
+
+  styleSheet() {
+    return `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          min-height: 100dvh;
+          font-family: var(--font);
+        }
+
+        * {
+          box-sizing: border-box;
+          font-family: inherit;
+        }
+
+        .wrap {
+          min-height: 100vh;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 18px;
+        }
+
+        .card {
+          width: min(680px, 100%);
+          background: transparent;
+          border: none;
+          border-radius: 18px;
+          padding: 18px;
+          box-shadow: none;
+        }
+
+        .code {
+          font-weight: 1000;
+          font-size: 44px;
+          line-height: 1;
+          color: var(--main_text);
+        }
+
+        .h {
+          margin-top: 10px;
+          font-weight: 1000;
+          font-size: 20px;
+          color: var(--main_text);
+        }
+
+        .p {
+          margin-top: 6px;
+          color: var(--sub_text);
+          font-weight: 800;
+        }
+
+        .path {
+          margin-top: 10px;
+          padding: 10px 12px;
+          border-radius: 14px;
+          background: var(--surface_2);
+          border: 1px solid var(--border_light);
+          font-weight: 900;
+          color: var(--main_text);
+          word-break: break-word;
+        }
+
+        .row {
+          margin-top: 14px;
+          display: flex;
+          gap: 10px;
+          flex-wrap: wrap;
+        }
+
+        .btn {
+          border: none;
+          background: linear-gradient(135deg, #0091ff 0%, #0073e6 100%);
+          color: #fff;
+          font-weight: 1000;
+          border-radius: 999px;
+          padding: 10px 14px;
+          cursor: pointer;
+        }
+
+        .btn:hover {
+          opacity: 0.9;
+        }
+
+        .btn.secondary {
+          background: var(--surface_2);
+          color: var(--main_text);
+        }
+
+        .btn.secondary:hover {
+          background: var(--surface_3);
+        }
+      </style>
+    `;
+  }
+}
+
+if (!customElements.get('sw-user-not-found-screen')) {
+  customElements.define('sw-user-not-found-screen', SwUserNotFoundScreen);
+}