codeapp-js 0.1.0 → 0.1.1

package/docs-mockups/field-guide/script.js

@@ -0,0 +1,20 @@
+const aModeButtons = Array.from(document.querySelectorAll('.modeButton'));
+const aModeContents = Array.from(document.querySelectorAll('.modeContent'));
+
+const setMode = (sModeId) => {
+  aModeButtons.forEach((eButton) => {
+    const bIsMatch = eButton.dataset.mode === sModeId;
+    eButton.classList.toggle('is-active', bIsMatch);
+  });
+
+  aModeContents.forEach((eContent) => {
+    const bIsMatch = eContent.id === sModeId;
+    eContent.classList.toggle('is-active', bIsMatch);
+  });
+};
+
+aModeButtons.forEach((eButton) => {
+  eButton.addEventListener('click', () => {
+    setMode(eButton.dataset.mode);
+  });
+});

package/docs-mockups/field-guide/styles.css

@@ -0,0 +1,272 @@
+:root {
+  --bg: #efe1c6;
+  --paper: #f8f0dc;
+  --paper-strong: #f3e4c0;
+  --ink: #2a241b;
+  --muted: #65594a;
+  --forest: #425438;
+  --rust: #b55c3b;
+  --line: rgba(42, 36, 27, 0.14);
+  --shadow: 0 18px 48px rgba(78, 58, 28, 0.16);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background:
+    radial-gradient(circle at 15% 10%, rgba(181, 92, 59, 0.16), transparent 22%),
+    radial-gradient(circle at 85% 20%, rgba(66, 84, 56, 0.14), transparent 18%),
+    linear-gradient(180deg, #f4e7cb, var(--bg));
+  color: var(--ink);
+  font-family: 'Outfit', sans-serif;
+}
+
+.poster {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgba(42, 36, 27, 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(42, 36, 27, 0.04) 1px, transparent 1px);
+  background-size: 36px 36px;
+  opacity: 0.55;
+}
+
+.shell {
+  position: relative;
+  z-index: 1;
+  width: min(1180px, calc(100% - 42px));
+  margin: 0 auto;
+  padding: 34px 0 52px;
+}
+
+.masthead {
+  display: flex;
+  justify-content: space-between;
+  gap: 24px;
+  align-items: end;
+}
+
+.kicker,
+.cardLabel {
+  margin: 0;
+  color: var(--rust);
+  font-size: 0.82rem;
+  font-weight: 800;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.masthead h1,
+.featurePanel h2,
+.routePanel h2,
+.samplesPanel h3 {
+  font-family: 'Literata', serif;
+}
+
+.masthead h1 {
+  max-width: 720px;
+  margin: 12px 0 0;
+  font-size: clamp(3rem, 6vw, 5.2rem);
+  line-height: 0.95;
+}
+
+.subcopy {
+  max-width: 720px;
+  margin: 16px 0 0;
+  color: var(--muted);
+  line-height: 1.8;
+}
+
+.returnLink {
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 12px 16px;
+  background: rgba(248, 240, 220, 0.72);
+  color: var(--ink);
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.guideGrid {
+  display: grid;
+  grid-template-columns: 280px minmax(0, 1fr);
+  gap: 22px;
+  margin-top: 26px;
+}
+
+.mapColumn {
+  display: grid;
+  gap: 18px;
+  align-content: start;
+}
+
+.noteCard,
+.routeCard,
+.featurePanel,
+.kitPanel,
+.samplesPanel {
+  border: 1px solid var(--line);
+  border-radius: 28px;
+  background: linear-gradient(180deg, rgba(248, 240, 220, 0.95), rgba(243, 228, 192, 0.96));
+  box-shadow: var(--shadow);
+}
+
+.noteCard,
+.routeCard,
+.featurePanel,
+.kitPanel,
+.samplesPanel {
+  padding: 22px;
+}
+
+.noteCard p:last-child,
+.featurePanel p,
+.modeContent p,
+.sampleList p {
+  color: var(--muted);
+  line-height: 1.8;
+}
+
+.routeCard {
+  display: grid;
+  gap: 12px;
+}
+
+.routeCard a {
+  color: var(--forest);
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.contentColumn {
+  display: grid;
+  gap: 18px;
+}
+
+.featurePanel h2,
+.routePanel h2 {
+  margin: 12px 0 0;
+  font-size: clamp(2rem, 3.2vw, 3.3rem);
+  line-height: 1.05;
+}
+
+.routePanel {
+  display: grid;
+  gap: 18px;
+}
+
+.routeSteps {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.routeSteps div {
+  padding: 18px;
+  border: 1px dashed rgba(42, 36, 27, 0.22);
+  border-radius: 20px;
+  background: rgba(248, 240, 220, 0.6);
+}
+
+.routeSteps span {
+  color: var(--forest);
+  font-size: 1.4rem;
+  font-weight: 800;
+}
+
+.kitHeader {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: center;
+}
+
+.modeToggle {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.modeButton {
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  padding: 10px 14px;
+  background: transparent;
+  color: var(--muted);
+  font: inherit;
+  cursor: pointer;
+}
+
+.modeButton.is-active {
+  background: var(--forest);
+  color: #f8f0dc;
+}
+
+.modeContent {
+  display: none;
+  margin-top: 16px;
+}
+
+.modeContent.is-active {
+  display: block;
+}
+
+pre {
+  overflow-x: auto;
+  margin: 0;
+  padding: 18px;
+  border-radius: 18px;
+  background: #292419;
+  color: #f8f0dc;
+}
+
+code {
+  font-family: 'Courier New', monospace;
+}
+
+.sampleList {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.sampleList article {
+  padding: 18px;
+  border-radius: 20px;
+  background: rgba(248, 240, 220, 0.7);
+  border: 1px solid rgba(42, 36, 27, 0.1);
+}
+
+.sampleList h3 {
+  margin: 0 0 10px;
+  font-size: 1.35rem;
+}
+
+@media (max-width: 980px) {
+  .guideGrid,
+  .routeSteps,
+  .sampleList {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 760px) {
+  .shell {
+    width: min(100% - 24px, 1180px);
+  }
+
+  .masthead,
+  .kitHeader {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}

package/docs-mockups/index.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>CodeApp JS Docs Mockups</title>
+  <link rel="stylesheet" href="./styles.css">
+</head>
+<body>
+  <div class="shell">
+    <header class="topbar">
+      <div class="brandBlock">
+        <div class="suiteMark">P</div>
+        <div>
+          <p class="eyebrow">Power Platform-style Study</p>
+          <h1>Two new docs mockups shaped like maker and model-driven experiences.</h1>
+        </div>
+      </div>
+      <div class="topbarMeta">
+        <span>codeapp-js</span>
+        <span>Static prototype</span>
+      </div>
+    </header>
+
+    <section class="heroPanel">
+      <div>
+        <p class="heroLead">The new direction drops the art-direction experiments and moves toward the visual language of make.powerapps.com and model-driven apps: light enterprise chrome, left rails, tabs, command bars, cards, forms, and data tables.</p>
+        <div class="heroActions">
+          <a class="primaryAction" href="./maker-hub/index.html">Open Maker Hub</a>
+          <a class="secondaryAction" href="./model-workspace/index.html">Open Model Workspace</a>
+        </div>
+      </div>
+      <div class="heroStats">
+        <article>
+          <strong>01</strong>
+          <span>Maker portal docs hub</span>
+        </article>
+        <article>
+          <strong>02</strong>
+          <span>Model-driven reference workspace</span>
+        </article>
+      </div>
+    </section>
+
+    <main class="conceptGrid">
+      <article class="conceptCard makerCard" data-index="1">
+        <p class="conceptNumber">01</p>
+        <h2>Maker Hub</h2>
+        <p class="conceptTone">Inspired by make.powerapps.com</p>
+        <p class="conceptBody">A docs home screen that feels like a maker portal: product chrome, command bar, learning cards, quick starts, and guided entry points into install, connectors, and examples.</p>
+        <ul class="tags">
+          <li>Portal shell</li>
+          <li>Command bar</li>
+          <li>Learning cards</li>
+        </ul>
+        <a href="./maker-hub/index.html">Preview concept</a>
+      </article>
+
+      <article class="conceptCard workspaceCard" data-index="2">
+        <p class="conceptNumber">02</p>
+        <h2>Model Workspace</h2>
+        <p class="conceptTone">Inspired by model-driven apps</p>
+        <p class="conceptBody">A dense reference layout that behaves like a model-driven work area with sitemap navigation, entity forms, related data grids, and tabbed detail panes for docs content.</p>
+        <ul class="tags">
+          <li>Sitemap</li>
+          <li>Form canvas</li>
+          <li>Grid + details</li>
+        </ul>
+        <a href="./model-workspace/index.html">Preview concept</a>
+      </article>
+    </main>
+
+    <footer class="footerNote">
+      <p>Keyboard shortcuts: press 1 for Maker Hub or 2 for Model Workspace.</p>
+    </footer>
+  </div>
+
+  <script src="./script.js"></script>
+</body>
+</html>

package/docs-mockups/maker-hub/index.html

@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Maker Hub | codeapp-js Docs</title>
+  <link rel="stylesheet" href="./styles.css">
+</head>
+<body>
+  <div class="appShell">
+    <header class="suiteBar">
+      <div class="suiteLeft">
+        <button class="iconButton" aria-label="Open menu">☰</button>
+        <div class="suiteBadge">P</div>
+        <strong>Power Apps</strong>
+        <span class="suiteDivider"></span>
+        <span class="suiteLabel">codeapp-js documentation</span>
+      </div>
+      <div class="suiteRight">
+        <input class="searchBox" type="search" placeholder="Search docs, connectors, examples">
+        <button class="iconButton" aria-label="Notifications">⎋</button>
+        <div class="avatar">CW</div>
+      </div>
+    </header>
+
+    <div class="workspace">
+      <aside class="leftRail">
+        <p class="railLabel">Explore</p>
+        <nav class="railNav">
+          <a class="is-active" href="#home">Home</a>
+          <a href="#quickstart">Quick start</a>
+          <a href="#connectors">Connectors</a>
+          <a href="#examples">Examples</a>
+          <a href="#reference">Reference</a>
+        </nav>
+        <div class="railPanel">
+          <p class="panelTitle">Environment</p>
+          <p>Default workspace</p>
+          <span>CLI ready</span>
+        </div>
+      </aside>
+
+      <main class="contentArea">
+        <section class="commandBar">
+          <div class="commandSet">
+            <button class="commandPrimary">Get started</button>
+            <button class="commandButton">Install</button>
+            <button class="commandButton">Configure</button>
+            <button class="commandButton">Push app</button>
+          </div>
+          <div class="commandSet">
+            <button class="commandButton">Share</button>
+            <button class="commandButton">Feedback</button>
+          </div>
+        </section>
+
+        <section class="pageHeader" id="home">
+          <div>
+            <p class="eyebrow">Maker portal concept</p>
+            <h1>Build a documentation home that feels native to the Power Platform ecosystem.</h1>
+            <p class="lead">This mockup treats docs as a product workspace: short paths in, task cards, status surfaces, and a familiar Microsoft-style shell rather than a marketing landing page.</p>
+          </div>
+          <article class="summaryCard">
+            <span>Library summary</span>
+            <strong>JavaScript-first Power Apps Code Apps workflow</strong>
+            <p>Generated services, `power.config.json`, connector references, and example apps from one hub.</p>
+          </article>
+        </section>
+
+        <section class="tabRow" aria-label="Sections">
+          <button class="tabButton is-active" data-target="overviewPanel">Overview</button>
+          <button class="tabButton" data-target="setupPanel">Setup</button>
+          <button class="tabButton" data-target="examplesPanel">Examples</button>
+          <button class="tabButton" data-target="referencePanel">Reference</button>
+        </section>
+
+        <section class="panelDeck">
+          <div class="contentPanel is-active" id="overviewPanel">
+            <div class="cardGrid wideGrid">
+              <article class="infoCard accentCard">
+                <p class="cardLabel">Why this works</p>
+                <h2>It matches how Power Platform users already navigate products.</h2>
+                <p>Use entry cards for install, connectors, Dataverse tables, and generated code. The surface feels like product documentation inside a maker experience, not a detached microsite.</p>
+              </article>
+              <article class="infoCard">
+                <p class="cardLabel">Recommended entry points</p>
+                <ul class="checkList">
+                  <li>Install and serve from the repo root</li>
+                  <li>Connect Dataverse or Office 365 services</li>
+                  <li>Explore starter and sample apps</li>
+                </ul>
+              </article>
+              <article class="infoCard">
+                <p class="cardLabel">At-a-glance</p>
+                <div class="metricRow">
+                  <div><strong>5</strong><span>connector families</span></div>
+                  <div><strong>4173</strong><span>default port</span></div>
+                  <div><strong>pac</strong><span>CLI workflow</span></div>
+                </div>
+              </article>
+            </div>
+          </div>
+
+          <div class="contentPanel" id="setupPanel">
+            <div class="cardGrid">
+              <article class="infoCard" id="quickstart">
+                <p class="cardLabel">Quick start</p>
+                <pre><code>npm install
+npm start
+pac auth create
+pac env select --environment "environment-id"</code></pre>
+              </article>
+              <article class="infoCard">
+                <p class="cardLabel">Config map</p>
+                <p>The docs can split `databaseReferences.default.cds.dataSources` and `connectionReferences` into focused cards instead of one giant JSON blob.</p>
+                <div class="miniPills">
+                  <span>Dataverse tables</span>
+                  <span>Outlook</span>
+                  <span>SharePoint</span>
+                  <span>Groups</span>
+                  <span>Users</span>
+                </div>
+              </article>
+            </div>
+          </div>
+
+          <div class="contentPanel" id="examplesPanel">
+            <div class="cardGrid triGrid" id="examples">
+              <article class="infoCard">
+                <p class="cardLabel">Starter app</p>
+                <strong>codeApp/dist/</strong>
+                <p>Primary onboarding destination for first success.</p>
+              </article>
+              <article class="infoCard">
+                <p class="cardLabel">Connector demos</p>
+                <strong>examples/outlook Demo/dist/</strong>
+                <p>Ideal for service-specific walkthrough pages.</p>
+              </article>
+              <article class="infoCard">
+                <p class="cardLabel">App gallery</p>
+                <strong>todo, kanban, planning poker</strong>
+                <p>Use these to show progressive complexity.</p>
+              </article>
+            </div>
+          </div>
+
+          <div class="contentPanel" id="referencePanel">
+            <div class="cardGrid" id="reference">
+              <article class="infoCard">
+                <p class="cardLabel">Generated files</p>
+                <table>
+                  <tbody>
+                    <tr><td>Services</td><td>src/generated/services/*</td></tr>
+                    <tr><td>Models</td><td>src/generated/models/*</td></tr>
+                    <tr><td>Config</td><td>power.config.json</td></tr>
+                  </tbody>
+                </table>
+              </article>
+              <article class="infoCard" id="connectors">
+                <p class="cardLabel">Connector references</p>
+                <ul class="checkList compactList">
+                  <li>shared_commondataserviceforapps</li>
+                  <li>shared_office365</li>
+                  <li>shared_sharepointonline</li>
+                  <li>shared_office365groups</li>
+                  <li>shared_office365users</li>
+                </ul>
+              </article>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  </div>
+
+  <script src="./script.js"></script>
+</body>
+</html>

package/docs-mockups/maker-hub/script.js

@@ -0,0 +1,20 @@
+const aMakerTabs = Array.from(document.querySelectorAll('.tabButton'));
+const aMakerPanels = Array.from(document.querySelectorAll('.contentPanel'));
+
+const setMakerPanel = (sTargetId) => {
+  aMakerTabs.forEach((eButton) => {
+    const bIsActive = eButton.dataset.target === sTargetId;
+    eButton.classList.toggle('is-active', bIsActive);
+  });
+
+  aMakerPanels.forEach((ePanel) => {
+    const bIsActive = ePanel.id === sTargetId;
+    ePanel.classList.toggle('is-active', bIsActive);
+  });
+};
+
+aMakerTabs.forEach((eButton) => {
+  eButton.addEventListener('click', () => {
+    setMakerPanel(eButton.dataset.target);
+  });
+});