web/packages/design-system/.storybook/content/CornerRadius.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 CornerRadiusProps = {
  theme: Theme
}

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

export function CornerRadius({ theme }: CornerRadiusProps) {
  // Filter corner radius tokens
  const cornerRadiusTokens: Theme = {}
  for (const [k, v] of Object.entries(theme)) {
    if (k.startsWith('Corner radius/')) {
      cornerRadiusTokens[k] = v as ThemeValue
    }
  }

  // Sort by value
  const sortedTokens = Object.entries(cornerRadiusTokens).sort((a, b) => {
    const aValue = typeof a[1].resolved === 'number' ? a[1].resolved : 0
    const bValue = typeof b[1].resolved === 'number' ? b[1].resolved : 0
    return aValue - bValue
  })

  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}>Pixels</th>
              <th className={tableStyles.tableHeaderCell}>
                Visual representation
              </th>
            </tr>
          </thead>
          <tbody>
            {sortedTokens.map(([k, v]) => {
              const value = typeof v.resolved === 'number' ? v.resolved : 0
              const valuePx = `${value}px`

              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}>
                    <code
                      className={tableStyles.value}
                      onClick={() => {
                        copyToClipboard(valuePx)
                      }}
                      title="Click to copy"
                    >
                      {valuePx}
                    </code>
                  </td>
                  <td className={tableStyles.tableCell}>
                    <div
                      className={tableStyles.borderRadiusPreview}
                      style={{
                        borderRadius: `${value}px`,
                      }}
                    >
                      {valuePx}
                    </div>
                  </td>
                </tr>
              )
            })}
          </tbody>
        </table>
      </div>
    </div>
  )
}