feat: updated to latest versions, added missing examples

ncpa0 · Jun 16, 2024 · 737f8a6 · 737f8a6
1 parent 4d35b05
commit 737f8a6
Show file tree

Hide file tree

Showing 9 changed files with 191 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -38,8 +38,8 @@
     "workbox-strategies": "^7.1.0"
   },
   "dependencies": {
-    "adwavecss": "0.0.13",
-    "adwaveui": "^0.0.8",
+    "adwavecss": "0.0.14",
+    "adwaveui": "^0.0.10",
     "highlight.js": "^11.9.0"
   },
   "packageManager": "[email protected]+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"

diff --git a/scripts/tmpl-builder.cjs b/scripts/tmpl-builder.cjs
@@ -1,6 +1,6 @@
 const path = require("path");
 const fs = require("fs");
-const { renderToHtmlAsync, defineContext } = require("jsxte");
+const { renderToHtmlAsync, defineContext, JsxteRenderError } = require("jsxte");
 const { jsx } = require("jsxte/jsx-runtime");
 const esbuild = require("esbuild");
 const { evalModule } = require("./eval-module.cjs");
@@ -74,10 +74,18 @@ module.exports.buildTemplate = async function buildTemplate(template, outDir) {
     }
   };
 
-  const html = await renderToHtmlAsync(
-    jsx(ExtFilesCtx.Provider, { value: { register: registerExternalFile } }, jsx(Component, {})),
-    { pretty: true },
-  );
+  let html;
+  try {
+    html = await renderToHtmlAsync(
+      jsx(ExtFilesCtx.Provider, { value: { register: registerExternalFile } }, jsx(Component, {})),
+      { pretty: true },
+    );
+  } catch (e) {
+    if (JsxteRenderError.is(e)) {
+      console.error(e.toString());
+    }
+    throw e;
+  }
 
   const htmlRel = path.relative(templatesSrc, tsxFilename);
   const htmlOutFile = changeExt(path.join(outDir, htmlRel), "html");

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
@@ -53,11 +53,21 @@ const NavbarAllLinks = (props: { activePage?: string }) => {
         href="/example-page/switch.html"
       />
       <span class={NavSidebar.separator}></span>
+      <NavbarLink
+        label="Alert"
+        isActive={props.activePage === "alert"}
+        href="/example-page/alert.html"
+      />
       <NavbarLink
         label="Box"
         isActive={props.activePage === "box"}
         href="/example-page/box.html"
       />
+      <NavbarLink
+        label="Breadcrumbs"
+        isActive={props.activePage === "breadcrumbs"}
+        href="/example-page/breadcrumbs.html"
+      />
       <NavbarLink
         label="Button"
         isActive={props.activePage === "button"}
@@ -103,6 +113,11 @@ const NavbarAllLinks = (props: { activePage?: string }) => {
         isActive={props.activePage === "separator"}
         href="/example-page/separator.html"
       />
+      <NavbarLink
+        label="Skeleton"
+        isActive={props.activePage === "skeleton"}
+        href="/example-page/skeleton.html"
+      />
       <NavbarLink
         label="Typography"
         isActive={props.activePage === "typography"}

diff --git a/src/templates/example-page/alert.tsx b/src/templates/example-page/alert.tsx
@@ -0,0 +1,41 @@
+import { Alert } from "adwavecss";
+import { CodeSample } from "../../components/code-sample";
+import { Example, ExampleSection } from "../../components/example";
+import { Layout } from "../../layout";
+
+export default function AlertExample() {
+  return (
+    <Layout title="Alert Example" activePage="alert">
+      <Example title="Alert">
+        <ExampleSection label="Info Alert">
+          <CodeSample>
+            <div class={Alert.className({ type: "info" })}>
+              This is a info alert.
+            </div>
+          </CodeSample>
+        </ExampleSection>
+        <ExampleSection label="Success Alert">
+          <CodeSample>
+            <div class={Alert.className({ type: "success" })}>
+              This is a success alert.
+            </div>
+          </CodeSample>
+        </ExampleSection>
+        <ExampleSection label="Warning Alert">
+          <CodeSample>
+            <div class={Alert.className({ type: "warning" })}>
+              This is a warning alert.
+            </div>
+          </CodeSample>
+        </ExampleSection>
+        <ExampleSection label="Error Alert">
+          <CodeSample>
+            <div class={Alert.className({ type: "error" })}>
+              This is a error alert.
+            </div>
+          </CodeSample>
+        </ExampleSection>
+      </Example>
+    </Layout>
+  );
+}
diff --git a/src/templates/example-page/breadcrumbs.tsx b/src/templates/example-page/breadcrumbs.tsx
@@ -0,0 +1,28 @@
+import { CodeSample } from "../../components/code-sample";
+import { Example, ExampleSection } from "../../components/example";
+import { Layout } from "../../layout";
+
+export default function BoxExample() {
+  return (
+    <Layout
+      title="Breadcrumbs Example"
+      activePage="breadcrumbs"
+    >
+      <div class="flexbox">
+        <Example title="Box">
+          <ExampleSection label="Breadcrumbs">
+            <CodeSample>
+              <div class="breadcrumbs" style="width: fit-content;">
+                <button class="breadcrumb-item activable">Root</button>
+                <span class="breadcrumb-separator"></span>
+                <button class="breadcrumb-item activable">Documents</button>
+                <span class="breadcrumb-separator"></span>
+                <button class="breadcrumb-item active">ADWaveCSS</button>
+              </div>
+            </CodeSample>
+          </ExampleSection>
+        </Example>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/templates/example-page/message.tsx b/src/templates/example-page/message.tsx
@@ -12,7 +12,7 @@ export default function MessageExample() {
           <CodeSample>
             <div style="display: grid; grid-template-rows: 1fr 1fr; grid-gap: 1em;">
               <span class={cls(Message.message, Message.success)}>Message: Success</span>
-              <span class={cls(Message.message, Message.alert)}>Message: Alert</span>
+              <span class={cls(Message.message, Message.warning)}>Message: Warning</span>
               <span class={cls(Message.message, Message.error)}>Message: Error</span>
             </div>
           </CodeSample>

diff --git a/src/templates/example-page/selector.tsx b/src/templates/example-page/selector.tsx
@@ -63,6 +63,34 @@ export default function SelectorExample() {
             </adw-selector>
           </CodeSample>
         </ExampleSection>
+        <ExampleSection
+          label="Inert Selector Option"
+          description="Inert selector option will display in the dropdown but cannot be interacted with."
+        >
+          <CodeSample>
+            <adw-selector placeholder="Select animal">
+              <adw-option inert>Mammals</adw-option>
+              <adw-option value="cat">Cat</adw-option>
+              <adw-option value="dog">Dog</adw-option>
+              <adw-option value="platypus">Platypus</adw-option>
+              <adw-option value="bat">Bat</adw-option>
+              <adw-option value="lion">Lion</adw-option>
+              <adw-option inert>Birds</adw-option>
+              <adw-option value="eagle">Eagle</adw-option>
+              <adw-option value="penguin">Penguin</adw-option>
+              <adw-option value="parrot">Parrot</adw-option>
+              <adw-option value="owl">Owl</adw-option>
+              <adw-option value="pigeon">Pigeon</adw-option>
+              <adw-option value="crow">Crow</adw-option>
+              <adw-option value="raven">Raven</adw-option>
+              <adw-option value="hummingbird">Hummingbird</adw-option>
+              <adw-option inert>Arachnids</adw-option>
+              <adw-option value="spider">Spider</adw-option>
+              <adw-option value="scorpion">Scorpion</adw-option>
+              <adw-option value="tick">Tick</adw-option>
+            </adw-selector>
+          </CodeSample>
+        </ExampleSection>
         <ExampleSection label="Disabled Selector">
           <CodeSample>
             <adw-selector disabled>

diff --git a/src/templates/example-page/skeleton.tsx b/src/templates/example-page/skeleton.tsx
@@ -0,0 +1,53 @@
+import { Box, Button, Card, Input, Skeleton, Typography } from "adwavecss";
+import { CodeSample } from "../../components/code-sample";
+import { Example, ExampleSection } from "../../components/example";
+import { Layout } from "../../layout";
+import { cls } from "../../utils/cls";
+
+export default function SkeletonExample() {
+  return (
+    <Layout
+      title="Skeleton Example"
+      activePage="skeleton"
+    >
+      <div class="flexbox">
+        <Example title="Skeleton">
+          <ExampleSection
+            label="Skeleton"
+            description="Skeleton is a simple container element that alters how other Adwave elements within it are displayed and adds an animated mask over the content."
+          >
+            <CodeSample>
+              <div class={cls(Box.box, "flexbox", "column")} style="padding: 2em">
+                <button
+                  class={cls(Button.button)}
+                  style="width: fit-content; margin-bottom: 1em;"
+                  onmousedown="document.querySelector('#skeleton-example').classList.toggle('skeleton')"
+                >
+                  Toggle Skeleton
+                </button>
+
+                <div class={Card.card}>
+                  <div id="skeleton-example" class={cls(Skeleton.skeleton, "flexbox", "column")}>
+                    <h1 class={Typography.header}>Some header text</h1>
+                    <span class={Typography.subtitle}>Some subtitle text</span>
+                    <span style="margin-bottom: 1.5em;"></span>
+                    <input class={Input.input} style="margin-bottom: .5em;" />
+                    <input class={Input.input} style="margin-bottom: .5em;" />
+                    <input type="checkbox" class="checkbox" style="place-self: flex-end;" />
+                    <span class={"separator"} />
+                    <adw-switch style="place-self: flex-end;" />
+                    <span class={"separator"} />
+                    <div class={Button.linked} style="place-self: flex-end;">
+                      <button class={Button.button}>First btn</button>
+                      <button class={Button.button}>Second btn</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </CodeSample>
+          </ExampleSection>
+        </Example>
+      </div>
+    </Layout>
+  );
+}
diff --git a/yarn.lock b/yarn.lock
@@ -179,15 +179,20 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.18.6.tgz#26da694f75cdb057750f49d099da5e3f3824cb3e"
   integrity sha512-wf3Vz+jCmOQ2HV1YUJuCWdL64adYxumkrxtc+H1VUQlnQI04+5HtH+qZCOE21lBE7gIrt+CwX2Wv8Acrw5Ak6w==
 
-[email protected], adwavecss@>=0.0.13:
+[email protected]:
+  version "0.0.14"
+  resolved "https://registry.yarnpkg.com/adwavecss/-/adwavecss-0.0.14.tgz#f83ecfef4abdf6ba92e0173237500027a6d84017"
+  integrity sha512-RHtIJfGczsv11bSYI4N5s22F267tzwxtin/qWpP2JMOJiz/4u7yK3uLHJ9R+xnLqN/gqLRFVUoik3st8YztBrg==
+
+adwavecss@>=0.0.13:
   version "0.0.13"
   resolved "https://registry.yarnpkg.com/adwavecss/-/adwavecss-0.0.13.tgz#a36523165e41be2fefbe64a290a10264ec426271"
   integrity sha512-hu6k8PaOKvnluD6fhIq+LSnL0A0VSY6g32Of//uefTtjUMEXmR7czlN/GZct2Z4TxApUAE5srzb9Cuk14n5JwQ==
 
-adwaveui@^0.0.8:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/adwaveui/-/adwaveui-0.0.8.tgz#5a3cb66f71f530120b1074b0345e22ec7f2ba830"
-  integrity sha512-O/kGYI3b8EKQ9TTHbukFYyPGyhD4fKXp2RcVEpo5Qo3qJVYC7K9cqfsx1l02t1Y0yYSHrwXuHHQUUmu9f+etog==
+adwaveui@^0.0.10:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/adwaveui/-/adwaveui-0.0.10.tgz#97fed33dbdefb678ca3b04ab47129e16f7099a3d"
+  integrity sha512-6oj2Y6mSqhVKYy6gydN4pdZeOKIfkOtAB47UaUs90yN7TyatYN/ljaWeUCe7QFTQJGODlgj8ZzkQmtNEY23ZJA==
   dependencies:
     adwavecss ">=0.0.13"
     jsxte "^3.3.1"