codeapp-js 0.1.1 → 0.2.1

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

@@ -1,272 +0,0 @@
-: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

@@ -1,80 +0,0 @@
-<!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

@@ -1,178 +0,0 @@
-<!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

@@ -1,20 +0,0 @@
-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);
-  });
-});