@pandacss/studio 0.0.0-dev-20230613163214

package/src/lib/color-contrast-checker.ts

@@ -0,0 +1,218 @@
+// Credits: https://github.com/bbc/color-contrast-checker
+
+type Pair = { colorA: string; colorB: string; fontSize: number }
+type Rgb = { r: number; g: number; b: number }
+
+class RgbClass {
+  r = 0
+  g = 0
+  b = 0
+  toString = () => {
+    return '<r: ' + this.r + ' g: ' + this.g + ' b: ' + this.b + ' >'
+  }
+}
+
+class Result {
+  WCAG_AA = false
+  WCAG_AAA = false
+  customRatio: number | undefined = undefined
+  toString = () => {
+    return '< WCAG-AA: ' + (this.WCAG_AA ? 'pass' : 'fail') + ' WCAG-AAA: ' + (this.WCAG_AAA ? 'pass' : 'fail') + ' >'
+  }
+}
+
+export class ColorContrastChecker {
+  fontSize = 14
+
+  rgbClass = new RgbClass()
+
+  isValidSixDigitColorCode = (hex: string) => {
+    const regSixDigitColorcode = /^(#)?([0-9a-fA-F]{6})?$/
+    return regSixDigitColorcode.test(hex)
+  }
+
+  isValidThreeDigitColorCode = (hex: string) => {
+    const regThreeDigitColorcode = /^(#)?([0-9a-fA-F]{3})?$/
+    return regThreeDigitColorcode.test(hex)
+  }
+
+  isValidColorCode = (hex: string) => {
+    return this.isValidSixDigitColorCode(hex) || this.isValidThreeDigitColorCode(hex)
+  }
+
+  isValidRatio = (ratio: unknown) => {
+    return typeof ratio === 'number'
+  }
+
+  convertColorToSixDigit = (hex: string) => {
+    return '#' + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3]
+  }
+
+  hexToLuminance = (color: string) => {
+    if (!this.isValidColorCode(color)) {
+      throw new Error('Invalid Color :' + color)
+    }
+
+    if (this.isValidThreeDigitColorCode(color)) {
+      color = this.convertColorToSixDigit(color)
+    }
+
+    const rgb = this.getRGBFromHex(color)
+
+    const LRGB = this.calculateLRGB(rgb)
+
+    return this.calculateLuminance(LRGB)
+  }
+
+  check = (colorA: string, colorB: string, fontSize?: number, customRatio?: number) => {
+    if (typeof fontSize !== 'undefined') {
+      this.fontSize = fontSize
+    }
+
+    if (!colorA || !colorB) {
+      return false
+    }
+
+    const l1 = this.hexToLuminance(colorA) /* higher value */
+    const l2 = this.hexToLuminance(colorB) /* lower value */
+    const contrastRatio = this.getContrastRatio(l1, l2)
+
+    if (typeof customRatio !== 'undefined') {
+      if (!this.isValidRatio(customRatio)) {
+        return false
+      }
+      return this.verifyCustomContrastRatio(contrastRatio, customRatio)
+    } else {
+      return this.verifyContrastRatio(contrastRatio)
+    }
+  }
+
+  checkPairs = (pairs: Pair[], customRatio?: number) => {
+    const results = []
+
+    for (const i in pairs) {
+      const pair = pairs[i]
+      if (typeof pair.fontSize !== 'undefined') {
+        results.push(this.check(pair.colorA, pair.colorB, pair.fontSize, customRatio))
+      } else {
+        results.push(this.check(pair.colorA, pair.colorB, void 0, customRatio))
+      }
+    }
+    return results
+  }
+
+  calculateLuminance = (lRGB: Rgb) => {
+    return 0.2126 * lRGB.r + 0.7152 * lRGB.g + 0.0722 * lRGB.b
+  }
+
+  isLevelAA = (colorA: string, colorB: string, fontSize: number) => {
+    const result = this.check(colorA, colorB, fontSize)
+    return result.WCAG_AA
+  }
+
+  isLevelAAA = (colorA: string, colorB: string, fontSize: number) => {
+    const result = this.check(colorA, colorB, fontSize)
+    return result.WCAG_AAA
+  }
+
+  isLevelCustom = (colorA: string, colorB: string, ratio: number) => {
+    const result = this.check(colorA, colorB, undefined, ratio)
+    return result.customRatio
+  }
+
+  getRGBFromHex = (color: string) => {
+    const rgb = new RgbClass()
+
+    if (typeof color !== 'string') {
+      throw new Error('must use string')
+    }
+
+    const rVal = parseInt(color.slice(1, 3), 16)
+    const gVal = parseInt(color.slice(3, 5), 16)
+    const bVal = parseInt(color.slice(5, 7), 16)
+
+    rgb.r = rVal
+    rgb.g = gVal
+    rgb.b = bVal
+
+    return rgb
+  }
+
+  calculateSRGB = (rgb: Rgb) => {
+    const sRGB = new RgbClass()
+
+    for (const key in rgb) {
+      sRGB[key as keyof Rgb] = parseFloat((rgb[key as keyof Rgb] / 255).toString())
+    }
+
+    return sRGB
+  }
+
+  calculateLRGB = (rgb: Rgb) => {
+    const sRGB = this.calculateSRGB(rgb)
+    const lRGB = Object.create(this.rgbClass)
+    let val = 0
+
+    for (const key in sRGB) {
+      //@ts-ignore
+      val = parseFloat(sRGB[key])
+      if (val <= 0.03928) {
+        lRGB[key] = val / 12.92
+      } else {
+        lRGB[key] = Math.pow((val + 0.055) / 1.055, 2.4)
+      }
+    }
+
+    return lRGB
+  }
+
+  getContrastRatio = (lumA: number, lumB: number) => {
+    let lighter: number
+    let darker: number
+
+    if (lumA >= lumB) {
+      lighter = lumA
+      darker = lumB
+    } else {
+      lighter = lumB
+      darker = lumA
+    }
+
+    const ratio = (lighter + 0.05) / (darker + 0.05)
+
+    return ratio
+  }
+
+  verifyContrastRatio = (ratio: number) => {
+    const WCAG_REQ_RATIO_AA_LG = 3.0,
+      WCAG_REQ_RATIO_AA_SM = 4.5,
+      WCAG_REQ_RATIO_AAA_LG = 4.5,
+      WCAG_REQ_RATIO_AAA_SM = 7.0,
+      WCAG_FONT_CUTOFF = 18
+
+    const results = new Result()
+    const fontSize = this.fontSize || 14
+
+    if (fontSize >= WCAG_FONT_CUTOFF) {
+      results.WCAG_AA = ratio >= WCAG_REQ_RATIO_AA_LG
+      results.WCAG_AAA = ratio >= WCAG_REQ_RATIO_AAA_LG
+    } else {
+      results.WCAG_AA = ratio >= WCAG_REQ_RATIO_AA_SM
+      results.WCAG_AAA = ratio >= WCAG_REQ_RATIO_AAA_SM
+    }
+
+    return results
+  }
+
+  verifyCustomContrastRatio = (inputRatio: number, checkRatio: number) => {
+    const resultsClass = new Result()
+    resultsClass.toString = function () {
+      return '< Custom Ratio: ' + (this.customRatio ? 'pass' : 'fail') + '  >'
+    }
+
+    const results = Object.create(resultsClass)
+
+    results.customRatio = inputRatio >= checkRatio
+    return results
+  }
+}

package/src/lib/color.ts

@@ -0,0 +1,40 @@
+import { ColorContrastChecker } from './color-contrast-checker'
+
+export const getContrastPairs = (colorA: string, colorB: string) => {
+  const contrastChecker = new ColorContrastChecker()
+  let res
+  try {
+    res = contrastChecker.checkPairs([
+      {
+        colorA,
+        colorB,
+        fontSize: 14,
+      },
+      {
+        colorA,
+        colorB,
+        fontSize: 18,
+      },
+    ])
+  } catch (error) {
+    //
+  }
+
+  return res
+}
+
+export const getContrastRatio = (colorA: string, colorB: string) => {
+  const contrastChecker = new ColorContrastChecker()
+  let luminanceA, luminanceB
+  let ratio: number | undefined
+
+  try {
+    luminanceA = contrastChecker.hexToLuminance(colorA)
+    luminanceB = contrastChecker.hexToLuminance(colorB)
+    ratio = contrastChecker.getContrastRatio(luminanceA, luminanceB)
+  } catch (error) {
+    //
+  }
+
+  return ratio
+}

package/src/lib/constants.ts

@@ -0,0 +1,140 @@
+import {
+  ColorContrastIcon,
+  ColorIcon,
+  FontSizesIcon,
+  FontWeightIcon,
+  LayerStylesIcon,
+  LetterSpacingIcon,
+  LineHeightIcon,
+  SizesIcon,
+  SpacingIcon,
+  TextStylesIcon,
+  TypographyIcon,
+} from '../components/icons'
+
+export enum NavKeys {
+  RADII = 'radii',
+  COLORS = 'colors',
+  LETTER_SPACINGS = 'letter-spacings',
+  LINE_HEIGHTS = 'line-heights',
+  FONT_WEIGHTS = 'font-weights',
+  FONT_SIZES = 'font-sizes',
+  SIZES = 'sizes',
+  SPACING = 'spacing',
+  FONTS = 'fonts',
+  TEXT_STYLES = 'text-styles',
+  LAYER_STYLES = 'layer-styles',
+  TOKEN_ANALYZER = 'token-analyzer',
+  TYPOGRAPHY_PLAYGROUND = 'playground/typography',
+  SPACING_PLAYGROUND = 'playground/spacing',
+  CONTRAST_CHECKER = 'playground/contrast-checker',
+}
+
+export type NavItemData = {
+  label: string
+  id: NavKeys
+  description: string
+  icon: React.ElementType
+  type: string
+}
+
+export const navItems: NavItemData[] = [
+  {
+    label: 'Colors',
+    id: NavKeys.COLORS,
+    description: 'A solid color palette for any context',
+    icon: ColorIcon,
+    type: 'token',
+  },
+  {
+    label: 'Fonts',
+    id: NavKeys.FONTS,
+    description: 'Preview your pre configured fonts.',
+    icon: FontSizesIcon,
+    type: 'token',
+  },
+  {
+    label: 'Letter Spacings',
+    id: NavKeys.LETTER_SPACINGS,
+    description: 'Letter spacing is the space between text characters.',
+    icon: LetterSpacingIcon,
+    type: 'token',
+  },
+  {
+    label: 'Line Heights',
+    id: NavKeys.LINE_HEIGHTS,
+    description: 'Line height is the vertical distance between two lines.',
+    icon: LineHeightIcon,
+    type: 'token',
+  },
+  {
+    label: 'Font Weights',
+    id: NavKeys.FONT_WEIGHTS,
+    description: 'Font weight determines how bold or light text appears.',
+    icon: FontWeightIcon,
+    type: 'token',
+  },
+  {
+    label: 'Font Sizes',
+    id: NavKeys.FONT_SIZES,
+    description: 'Font size updates the size of a font, and its relative units.',
+    icon: FontSizesIcon,
+    type: 'token',
+  },
+  {
+    label: 'Sizes',
+    id: NavKeys.SIZES,
+    description: 'Preview your pre configured sizes.',
+    icon: SizesIcon,
+    type: 'token',
+  },
+  {
+    label: 'Spacing',
+    id: NavKeys.SPACING,
+    description: 'Preview your pre configured spacing.',
+    icon: SpacingIcon,
+    type: 'token',
+  },
+  {
+    label: 'Border Radius',
+    id: NavKeys.RADII,
+    description: 'Preview your pre configured radii.',
+    icon: SizesIcon,
+    type: 'token',
+  },
+  {
+    label: 'Text Styles',
+    id: NavKeys.TEXT_STYLES,
+    description: 'Preview your pre configured text styles.',
+    icon: TextStylesIcon,
+    type: 'token',
+  },
+  {
+    label: 'Layer Styles',
+    id: NavKeys.LAYER_STYLES,
+    description: 'Preview your pre configured layer styles.',
+    icon: LayerStylesIcon,
+    type: 'token',
+  },
+  // {
+  //   label: 'Token analyzer',
+  //   id: NavKeys.TOKEN_ANALYZER,
+  //   description: 'Visualize your tokens usage in your app.',
+  //   icon: LayerStylesIcon,
+  //   type: 'token',
+  // },
+  {
+    label: 'Typography',
+    id: NavKeys.TYPOGRAPHY_PLAYGROUND,
+    description: 'Visually test font styles with any text.',
+    icon: TypographyIcon,
+    type: 'playground',
+  },
+  {
+    label: 'Color Contrast',
+    id: NavKeys.CONTRAST_CHECKER,
+    description: 'Test contrast ratio between two colors.',
+    icon: ColorContrastIcon,
+    type: 'playground',
+  },
+]

package/src/lib/create-context.ts

@@ -0,0 +1,27 @@
+import { createContext as createReactContext, useContext as useReactContext } from 'react'
+
+function getErrorMessage(hook: string, provider: string) {
+  return `${hook} returned \`undefined\`. Seems you forgot to wrap component within ${provider}`
+}
+export function createContext<T>(
+  options: { name: string; strict?: boolean; hookName?: string; providerName?: string; errorMessage?: string } = {
+    name: '',
+  },
+) {
+  const { name, strict = true, hookName = 'useContext', providerName = 'Provider', errorMessage } = options
+  const Context = createReactContext<T>(undefined as T)
+  Context.displayName = name
+
+  function useContext() {
+    const context = useReactContext(Context)
+    if (!context && strict) {
+      const error = new Error(errorMessage ?? getErrorMessage(hookName, providerName))
+      error.name = 'ContextError'
+      Error.captureStackTrace?.(error, useContext)
+      throw error
+    }
+    return context
+  }
+
+  return [Context.Provider, useContext, Context] as const
+}

package/src/lib/get-report-item.tsx

@@ -0,0 +1,41 @@
+import type { ReportItemJSON } from '@pandacss/types'
+import { analysisData } from './analysis-data'
+import { pick } from './pick'
+
+export const getReportItem = (id: ReportItemJSON['id']) =>
+  (analysisData.details.byId as Record<string, any>)[id] as ReportItemJSON
+
+export type SearchableReportItemAttributes = Partial<
+  Pick<ReportItemJSON, 'value' | 'category' | 'propName' | 'filepath' | 'from' | 'isKnown'> & {
+    important?: boolean
+  }
+>
+
+export const getUtilityLink = (reportItem: SearchableReportItemAttributes) => {
+  const searchParams = new URLSearchParams(
+    pick(reportItem, ['value', 'category', 'propName', 'from', 'filepath', 'isKnown', 'important']) as any,
+  )
+  return `/token-analyzer/utility?${searchParams.toString()}`
+}
+
+export const getFileLink = (reportItem: SearchableReportItemAttributes) => {
+  const searchParams = new URLSearchParams(pick(reportItem, ['filepath']) as any)
+  return `/token-analyzer/file?${searchParams.toString()}`
+}
+
+export const getReportItemFromTokenName = (tokenName: string) => {
+  const reportItem = analysisData.details.globalMaps.byTokenName[tokenName]?.[0]
+  return getReportItem(reportItem)
+}
+
+export const getReportRelativeFilePath = (filePath: string) => filePath.replace(analysisData.cwd + '/', '')
+export const getReportRange = (reportItem: ReportItemJSON) => `:${reportItem.box.line}:${reportItem.box.column}`
+
+const openInEditor = (filepath: string, line: number, column: number) => {
+  return fetch(`/__open-in-editor?file=${encodeURIComponent(`${filepath}:${line}:${column}`)}`)
+}
+
+export const openReportItemInEditor = (reportItem: ReportItemJSON) => {
+  console.log(reportItem)
+  return openInEditor(reportItem.filepath, reportItem.box.line, reportItem.box.column)
+}

package/src/lib/group-in.ts

@@ -0,0 +1,35 @@
+export function groupIn<Key extends keyof T, T extends Record<string, any>>(
+  array: T[],
+  keyOrGetter: Key,
+): Record<T[Key], T>
+export function groupIn<T, KeyReturnT>(
+  array: T[],
+  keyOrGetter: (item: T) => KeyReturnT,
+): KeyReturnT extends string | number ? Record<KeyReturnT, T> : never
+export function groupIn<Key, T>(array: T[], keyOrGetter: Key) {
+  let kv
+  return array.reduce((r, a) => {
+    kv = typeof keyOrGetter === 'function' ? keyOrGetter(a) : a[keyOrGetter as unknown as keyof T]
+    // @ts-ignore
+    r[kv] = a
+    return r
+  }, {})
+}
+
+export function groupBy<Key extends keyof T, T extends Record<string, any>>(
+  array: T[],
+  keyOrGetter: Key,
+): Record<T[Key], T[]>
+export function groupBy<T, KeyReturnT>(
+  array: T[],
+  keyOrGetter: (item: T) => KeyReturnT,
+): KeyReturnT extends string | number ? Record<KeyReturnT, T[]> : never
+export function groupBy<Key, T>(array: T[], keyOrGetter: Key) {
+  let kv
+  return array.reduce((r, a) => {
+    kv = typeof keyOrGetter === 'function' ? keyOrGetter(a) : a[keyOrGetter as unknown as keyof T]
+    // @ts-ignore
+    r[kv] = [...(r[kv] || []), a]
+    return r
+  }, {})
+}

package/src/lib/panda.context.ts

@@ -0,0 +1,23 @@
+import { flatten } from '@pandacss/shared'
+import { TokenDictionary } from '@pandacss/token-dictionary'
+import type { TokenDataTypes, UserConfig } from '@pandacss/types'
+
+// @ts-ignore
+import { config as _config } from 'virtual:panda'
+
+const config = _config as UserConfig
+
+const { theme } = config
+
+const context = {
+  tokens: new TokenDictionary(theme ?? {}),
+  getCategory(category: keyof TokenDataTypes) {
+    return this.tokens.categoryMap.get(category)!
+  },
+  textStyles: flatten(theme?.textStyles ?? {}),
+  layerStyles: flatten(theme?.layerStyles ?? {}),
+  logo: config.studio?.logo,
+  inject: config.studio?.inject ?? { head: '', body: '' },
+}
+
+export default context

package/src/lib/pick.ts

@@ -0,0 +1,24 @@
+/** Pick given properties in object */
+export function pick<T, K extends keyof T>(obj: T, paths: K[]): Pick<T, K> {
+  const result = {} as Pick<T, K>
+
+  Object.keys(obj as any).forEach((key) => {
+    if (!paths.includes(key as K)) return
+    // @ts-expect-error
+    result[key] = obj[key]
+  })
+
+  return result as Pick<T, K>
+}
+
+/** Omit given properties from object */
+export function omit<T extends Record<string, any>, K extends keyof T>(object: T, keys: K[]) {
+  const result: Record<string, any> = {}
+
+  Object.keys(object).forEach((key) => {
+    if (keys.includes(key as K)) return
+    result[key] = object[key]
+  })
+
+  return result as Omit<T, K>
+}

package/src/lib/sizes-sort.ts

@@ -0,0 +1,10 @@
+import { toPx } from '@pandacss/shared'
+
+const num = (v: string | undefined) => parseFloat(toPx(v) ?? '-1')
+
+export function getSortedSizes(sizes: any[]) {
+  return sizes.sort((a, b) => {
+    if (!a.originalValue || !b.originalValue) return 0
+    return num(a.originalValue) - num(b.originalValue)
+  })
+}

package/src/lib/truncate.tsx

@@ -0,0 +1,7 @@
+export const truncate = (str: string, length = 15) => {
+  if (str.length > length) {
+    return str.substring(0, length) + '...'
+  }
+
+  return str
+}

package/src/lib/use-color-docs.ts

@@ -0,0 +1,101 @@
+import type { Token } from '@pandacss/types'
+import { useState } from 'react'
+import context from './panda.context'
+
+type Color = {
+  isConditional?: boolean
+  isReference?: boolean
+  name: string
+  originalValue: string
+  path: string[]
+}
+
+type ColorToken = Token & Color
+
+const UNCATEGORIZED_ID = 'uncategorized' as const
+
+const groupByColorPalette = (colors: Map<string, any>, filterMethod?: (token: ColorToken) => boolean) => {
+  const values = Array.from(colors.values()).filter((color) => !color.isConditional && !color.extensions.isVirtual)
+  return values.reduce((acc, nxt) => {
+    if (!filterMethod?.(nxt)) return acc
+
+    const colorPalette = nxt.extensions.colorPalette || UNCATEGORIZED_ID
+    if (!(colorPalette in acc)) acc[colorPalette] = []
+    const exists = (acc[colorPalette] as any[]).find((tok) => tok.name === nxt.name)
+    if (!exists) acc[colorPalette].push(nxt)
+    return acc
+  }, {})
+}
+
+const getSemanticTokens = (allTokens: ColorToken[], filterMethod?: (token: ColorToken) => boolean) => {
+  const semanticTokens = allTokens.filter(
+    (token) => token.type === 'color' && token.isConditional && !token.extensions?.isVirtual,
+  )
+  return semanticTokens
+    .reduce((acc, nxt) => {
+      if (!filterMethod) {
+        acc.push(nxt)
+      } else {
+        const rawQualified = semanticTokens.filter(filterMethod)
+
+        if (filterMethod(nxt) || rawQualified.some((tok) => tok.name === nxt.name)) {
+          acc.push(nxt)
+        }
+      }
+      return acc
+    }, [] as ColorToken[])
+    .reduce(
+      (acc, nxt) => ({
+        ...acc,
+        [nxt.extensions?.prop]: {
+          //@ts-expect-error
+          ...acc[nxt.extensions?.prop],
+          [nxt.extensions?.condition]: { value: nxt.value, isReference: nxt.isReference },
+          extensions: nxt.extensions,
+        },
+      }),
+      {},
+    )
+}
+
+const allTokens = context.tokens.allTokens
+const colors = context.getCategory('colors')
+
+export const useColorDocs = () => {
+  const [filterQuery, setFilterQuery] = useState('')
+
+  const filterMethod = (token: ColorToken) => {
+    return [
+      ...token.path,
+      token.originalValue,
+      token.description,
+      token.value,
+      token.name,
+      token.extensions?.var,
+      token.extensions?.prop,
+      ...Object.values(token.extensions?.conditions || {}),
+    ]
+      .filter(Boolean)
+      .some((prop) => prop.includes(filterQuery))
+  }
+
+  const colorsInCategories = groupByColorPalette(colors, filterMethod)
+  const uncategorizedColors = colorsInCategories[UNCATEGORIZED_ID]
+
+  const categorizedColors = Object.entries<any[]>(colorsInCategories).filter(
+    ([category]) => category !== UNCATEGORIZED_ID,
+  )
+
+  const semanticTokens = Object.entries<Record<string, any>>(getSemanticTokens(allTokens, filterMethod))
+  const hasResults =
+    !!categorizedColors.length || !!uncategorizedColors?.length || !!Object.values(semanticTokens).length
+
+  return {
+    filterQuery,
+    setFilterQuery,
+    uncategorizedColors,
+    categorizedColors,
+    semanticTokens,
+    hasResults,
+  }
+}

package/src/pages/colors.astro

@@ -0,0 +1,11 @@
+---
+import { Colors } from '../components/colors'
+import Layout from '../layouts/Layout.astro'
+import Sidebar from '../layouts/Sidebar.astro'
+---
+
+<Layout>
+  <Sidebar title="Colors">
+    <Colors client:load />
+  </Sidebar>
+</Layout>