web/packages/design-system/.storybook/content/Shadow.tsx

/* eslint-disable formatjs/no-literal-string-in-jsx */
import copy from "copy-to-clipboard"

import { kebabify } from "../../generate/utils"

import tableStyles from "./tokens.module.css"

type ThemeValue = {
  resolved: string | number
  alias?: string | number
}

type Theme = Record<string, ThemeValue>

type ShadowProps = {
  theme: Theme
}

function copyToClipboard(text: string) {
  copy(text)
}

export function Shadow({ theme }: ShadowProps) {
  // Filter shadow tokens
  const shadowTokens: Theme = {}
  for (const [k, v] of Object.entries(theme)) {
    if (k.startsWith("BoxShadow-")) {
      shadowTokens[k] = v as ThemeValue
    }
  }

  // Sort by level
  const sortedTokens = Object.entries(shadowTokens).sort((a, b) => {
    const aLevel = parseInt(a[0].match(/\d+/)?.[0] || "0")
    const bLevel = parseInt(b[0].match(/\d+/)?.[0] || "0")
    return aLevel - bLevel
  })

  return (
    <div>
      <div className={tableStyles.tableContainer}>
        <table className={tableStyles.table}>
          <thead className={tableStyles.tableHeader}>
            <tr>
              <th className={tableStyles.tableHeaderCell}>Token</th>
              <th className={tableStyles.tableHeaderCell}>Level</th>
              <th className={tableStyles.tableHeaderCell}>Value</th>
              <th className={tableStyles.tableHeaderCell}>
                Visual representation
              </th>
            </tr>
          </thead>
          <tbody>
            {sortedTokens.map(([k, v]) => {
              const shadowValue =
                typeof v.resolved === "string" ? v.resolved : ""
              const level = k.match(/\d+/)?.[0] || "0"

              return (
                <tr key={k} className={tableStyles.tableRow}>
                  <td className={tableStyles.tableCell}>
                    <code
                      className={tableStyles.tokenName}
                      onClick={() => {
                        copyToClipboard(`var(--${kebabify(k)})`)
                      }}
                      title="Click to copy CSS variable"
                    >
                      {kebabify(k)}
                    </code>
                  </td>
                  <td className={tableStyles.tableCell}>
                    <span className={tableStyles.value}>Level {level}</span>
                  </td>
                  <td className={tableStyles.tableCell}>
                    <code
                      className={tableStyles.value}
                      onClick={() => {
                        copyToClipboard(shadowValue)
                      }}
                      title="Click to copy"
                      style={{
                        fontSize: "0.75rem",
                        wordBreak: "break-all",
                      }}
                    >
                      {shadowValue}
                    </code>
                  </td>
                  <td className={tableStyles.tableCell}>
                    <div
                      className={tableStyles.shadowPreview}
                      style={{
                        boxShadow: shadowValue,
                      }}
                    />
                  </td>
                </tr>
              )
            })}
          </tbody>
        </table>
      </div>
    </div>
  )
}