Added static page for tokens list

docs/site/components/layout.js

@@ -1,7 +1,7 @@
 import Head from "next/head";
 import Link from "next/link";
 
-const name = "Spectrum Tokens";
+const name = "Spectrum Components API";
 export const siteTitle = "Next.js Sample Website";
 
 export default function Layout({ children, home }) {

docs/site/lib/components.js

@@ -40,6 +40,7 @@ const resolveSchemaDefinitions = (schema, ajv) => {
 
 const readJSON = async (filePath) =>
   JSON.parse(await readFile(filePath, "utf8"));
+
 const getValidator = async () => {
   const schemaDir = "public/schemas";
   const ajv = new Ajv();

docs/site/lib/tokens.js

@@ -0,0 +1,34 @@
+import path from "path";
+import { readFile } from "fs/promises";
+import { glob, Glob } from "glob";
+
+const readJSON = async (filePath) =>
+  JSON.parse(await readFile(filePath, "utf8"));
+
+export async function getTokenData() {
+  const tokenDir = path.resolve(
+    path.join(process.cwd(), "..", "..", "packages", "tokens", "src"),
+  );
+  let tokenArray = [];
+  const g = new Glob(`${tokenDir}/*.json`, {});
+  for await (const file of g) {
+    const fileTokenData = await readJSON(file);
+    const newTokenArray = Object.keys(fileTokenData).map((key) => {
+      return {
+        name: key,
+        ...fileTokenData[key],
+      };
+    });
+    tokenArray = [...tokenArray, ...newTokenArray];
+    // await fileNames.forEach(async (file) => {
+    //   const fileTokenData = await readJSON(file);
+    //   Object.keys(fileTokenData).forEach((key) => {
+    //     tokenArray.push({
+    //       name: key,
+    //       token: fileTokenData[key],
+    //     });
+    //   });
+    // });
+  }
+  return tokenArray;
+}

docs/site/package.json

@@ -8,16 +8,18 @@
     "url": "git+https://github.com/adobe/spectrum-tokens.git"
   },
   "dependencies": {
-    "@spectrum-css/page": "^5.0.31",
-    "@spectrum-css/table": "^4.0.60",
-    "@spectrum-css/tokens": "^11.0.0",
-    "@spectrum-css/typography": "^5.0.27",
+    "@spectrum-css/link": "^4.0.74",
+    "@spectrum-css/page": "^6.0.9",
+    "@spectrum-css/sidenav": "^4.0.18",
+    "@spectrum-css/table": "^5.0.10",
+    "@spectrum-css/tokens": "^13.0.5",
+    "@spectrum-css/typography": "^5.0.49",
     "ajv": "^8.12.0",
     "ajv-formats": "^2.1.1",
-    "next": "^13.4.10",
+    "next": "^14.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rimraf": "^5.0.1"
+    "rimraf": "^5.0.5"
   },
   "license": "Apache-2.0",
   "bugs": {

docs/site/pages/_app.js

@@ -1,11 +1,13 @@
 import "@spectrum-css/tokens/dist/css/global-vars.css";
 import "@spectrum-css/tokens/dist/css/spectrum/custom-vars.css";
+import "@spectrum-css/tokens/dist/css/spectrum/medium-vars.css";
 import "@spectrum-css/tokens/dist/css/medium-vars.css";
 import "@spectrum-css/tokens/dist/css/light-vars.css";
 import "@spectrum-css/page/dist/index-vars.css";
+import "@spectrum-css/link/dist/index-vars.css";
 import "@spectrum-css/table/dist/index-vars.css";
 import "@spectrum-css/typography/dist/index-vars.css";
-import "../styles/sidenav.css";
+import "@spectrum-css/sidenav/dist/index-vars.css";
 
 export default function App({ Component, pageProps }) {
   return <Component {...pageProps} />;

docs/site/pages/index.js

@@ -25,7 +25,7 @@ export default function Home({ allComponentsData }) {
 
       <main>
         <section>
-          <h1>Spectrum Components</h1>
+          <h1>Spectrum Components API</h1>
           <nav>
             <ul className="spectrum-SideNav">
               {allComponentsData.map(({ slug, title }) => (
@@ -34,7 +34,7 @@ export default function Home({ allComponentsData }) {
                     className="spectrum-SideNav-itemLink"
                     href={`/components/${slug}`}
                   >
-                    {title}
+                    <span className="spectrum-SideNav-link-text">{title}</span>
                   </Link>
                 </li>
               ))}

docs/site/pages/tokens/index.js

@@ -0,0 +1,187 @@
+import Head from "next/head";
+import Link from "next/link";
+import Layout from "../../components/layout";
+
+import { getTokenData } from "../../lib/tokens";
+
+function isObject(obj) {
+  return typeof obj === "object" && !Array.isArray(obj) && obj !== null;
+}
+
+export async function getStaticProps({}) {
+  const tokenData = await getTokenData();
+  return {
+    props: {
+      tokenData,
+    },
+  };
+}
+
+function RGBAToHexA(rgba, forceRemoveAlpha = false) {
+  return (
+    "#" +
+    rgba
+      .replace(/^rgba?\(|\s+|\)$/g, "") // Get's rgba / rgb string values
+      .split(",") // splits them at ","
+      .filter((string, index) => !forceRemoveAlpha || index !== 3)
+      .map((string) => parseFloat(string)) // Converts them to numbers
+      .map((number, index) => (index === 3 ? Math.round(number * 255) : number)) // Converts alpha to 255 number
+      .map((number) => number.toString(16)) // Converts numbers to hex
+      .map((string) => (string.length === 1 ? "0" + string : string)) // Adds 0 when length of one number is 1
+      .join("")
+  ); // Puts the array to togehter to a string
+}
+
+// function formatTokenLink(value) {
+//   if (value.charAt(0) === "{" && value.charAt(value.length - 1) === "}") {
+//     return (
+//       <Link
+//         className="spectrum-Link"
+//         href={`#${value.substring(1, value.length - 1)}`}
+//       >{`${value.substring(1, value.length - 1)}`}</Link>
+//     );
+//   } else {
+//     return value;
+//   }
+// }
+
+// function formatSets(sets) {
+//   if (Object.hasOwn(sets, "desktop") && Object.hasOwn(sets, "mobile")) {
+//     if (
+//       Object.hasOwn(sets.desktop, "value") &&
+//       Object.hasOwn(sets.mobile, "value")
+//     ) {
+//       return (
+//         <td className="spectrum-Table-cell" tabIndex="0">
+//           {`${formatTokenLink(sets.desktop.value)} (desktop)`}
+//           <br />
+//           {`${formatTokenLink(sets.mobile.value)} (mobile)`}
+//         </td>
+//       );
+//     } else {
+//       return (
+//         <td className="spectrum-Table-cell" tabIndex="0">
+//           {JSON.stringify(sets)}
+//         </td>
+//       );
+//     }
+//   } else {
+//     return (
+//       <td className="spectrum-Table-cell" tabIndex="0">
+//         {JSON.stringify(sets)}
+//       </td>
+//     );
+//   }
+// }
+
+// function formatTokenValue(token) {
+//   if (Object.hasOwn(token, "value")) {
+//     return (
+//       <td className="spectrum-Table-cell" tabIndex="0">
+//         {formatTokenLink(token.value)}
+//       </td>
+//     );
+//   } else if (Object.hasOwn(token, "sets")) {
+//     return formatSets(token.sets);
+//   }
+// }
+
+function TokenValue({ token }) {
+  const type = token.$schema.split("/").pop().slice(0, -5);
+  switch (type) {
+    case "alias":
+      const value = token.value.substring(1, token.value.length - 1);
+      return (
+        <Link className="spectrum-Link" href={`#${value}`}>
+          {value}
+        </Link>
+      );
+    case "dimension":
+    case "multiplier":
+    case "font-family":
+    case "font-weight":
+    case "font-style":
+    case "text-transform":
+    case "opacity":
+      return <>{token.value}</>;
+    case "system-set":
+      if (
+        Object.hasOwn(token.sets.spectrum, "sets") &&
+        Object.hasOwn(token.sets, "express")
+      ) {
+        return (
+          <>
+            {Object.keys(token.sets.spectrum.sets).map((key) => (
+              <div>
+                <TokenValue token={token.sets.express.sets[key]}></TokenValue>{" "}
+                (spectrum / {key})
+              </div>
+            ))}
+            {Object.keys(token.sets.express.sets).map((key) => (
+              <div>
+                <TokenValue token={token.sets.express.sets[key]}></TokenValue>{" "}
+                (express / {key})
+              </div>
+            ))}
+          </>
+        );
+      }
+    case "color-set":
+    case "scale-set":
+      return (
+        <>
+          {Object.keys(token.sets).map((key) => (
+            <div>
+              <TokenValue token={token.sets[key]}></TokenValue> ({key})
+            </div>
+          ))}
+        </>
+      );
+    case "color":
+      return <pre>{RGBAToHexA(token.value)}</pre>;
+    default:
+      return <pre>JSON.stringify(token)</pre>;
+  }
+}
+
+function formatToken(token) {
+  return (
+    <tr className="spectrum-Table-row" id={token.name} key={token.name}>
+      <td className="spectrum-Table-cell" tabIndex="0">
+        <strong>{token.name}</strong>
+      </td>
+      <td className="spectrum-Table-cell" tabIndex="0">
+        <TokenValue token={token}></TokenValue>
+      </td>
+    </tr>
+  );
+}
+
+export default function TokenTable({ tokenData }) {
+  return (
+    <Layout>
+      <Head>
+        <title>Tokens</title>
+      </Head>
+      <table className="spectrum-Table spectrum-Table--sizeM spectrum-Table--quiet">
+        <thead className="spectrum-Table-head">
+          <tr>
+            <th
+              className="spectrum-Table-headCell"
+              aria-sort="descending"
+              tabIndex="0"
+            >
+              Token Name
+            </th>
+            <th className="spectrum-Table-headCell" aria-sort="none">
+              Value
+            </th>
+          </tr>
+        </thead>
+        <tbody className="spectrum-Table-body">
+          {tokenData.map(formatToken)}
+        </tbody>
+      </table>
+    </Layout>
+  );
+}

docs/site/styles/global.css

@@ -2,18 +2,8 @@ html,
 body {
   padding: 0 100px;
   margin: 0;
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    Segoe UI,
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    Fira Sans,
-    Droid Sans,
-    Helvetica Neue,
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   line-height: 1.6;
   font-size: 18px;
 }
@@ -50,4 +40,4 @@ th {
 th,
 td {
   padding: 12px 24px;
-}
+}