@pandacss/studio 0.0.0-dev-20230613163214

package/src/components/token-analyzer.tsx

@@ -0,0 +1,390 @@
+import { css, cx } from '../../styled-system/css'
+import { panda, Stack, Wrap } from '../../styled-system/jsx'
+import { analysisData } from '../lib/analysis-data'
+
+import {
+  Portal,
+  Select,
+  SelectContent,
+  SelectLabel,
+  SelectOption,
+  SelectPositioner,
+  SelectTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipPositioner,
+  TooltipTrigger,
+} from '@ark-ui/react'
+
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@ark-ui/react'
+import { stack } from '../../styled-system/patterns/stack'
+
+import { styledLink } from '../../styled-system/patterns'
+import { getReportItem, getUtilityLink, getReportRelativeFilePath, getFileLink } from '../lib/get-report-item'
+import { pick } from '../lib/pick'
+import { ReportItemLink } from './analyzer/report-item-link'
+import { Section } from './analyzer/section'
+import { TextWithCount } from './analyzer/text-with-count'
+import { TruncatedText } from './analyzer/truncated-text'
+import { ByCategory } from './analyzer/category-utilities'
+import { ColorItem } from './color-item'
+import { TokenSearchCombobox } from './analyzer/token-search-combobox'
+import { useState } from 'react'
+import { SortIcon } from './analyzer/sort-icon'
+
+export function TokenAnalyzer() {
+  // console.log(tokenDictionary)
+  // console.log(analysisData)
+
+  return (
+    <div className={css({ width: '100%', py: '20px', debug: false })}>
+      <panda.div px="24" w="100%">
+        <HeadlineSummary />
+        <TokenSearchCombobox />
+        <MostUsedList />
+        <ColorPalette />
+        <ByCategory byCategory={analysisData.details.globalMaps.byCategory} />
+        <FilesAccordionList />
+      </panda.div>
+    </div>
+  )
+}
+
+const [topKind, secondKind] = analysisData.stats.mostUseds.instanceOfKinds
+
+const values = Object.values(analysisData.details.byId)
+const withImportant = values.filter((reportItem) => String(reportItem.value).endsWith('!'))
+
+const knownValues = values.filter((reportItem) => reportItem.isKnown)
+const unknownValuesCount = values.length - knownValues.length
+const formater = new Intl.NumberFormat('en-US', {
+  maximumFractionDigits: 2,
+  minimumFractionDigits: 2,
+  style: 'percent',
+})
+
+const HeadlineSummary = () => {
+  return (
+    <Stack mb="4" direction="column" align="center" p="20px" fontSize="lg">
+      <div>
+        <panda.span fontSize="xl" fontWeight="bold">
+          {Object.keys(analysisData.details.byId).length}
+        </panda.span>{' '}
+        token usage including{' '}
+        <panda.span fontSize="xl" fontWeight="bold">
+          <panda.a className={styledLink({})} href={getUtilityLink({ category: 'colors' })}>
+            {analysisData.counts.colorsUsed}
+          </panda.a>
+        </panda.span>{' '}
+        colors found in{' '}
+        <panda.span fontSize="xl" fontWeight="bold">
+          {analysisData.counts.filesWithTokens}
+        </panda.span>{' '}
+        files
+      </div>
+      <panda.div fontSize="md">
+        with{' '}
+        <Tooltip openDelay={0} closeDelay={100} positioning={{ placement: 'bottom-start', gutter: 20 }}>
+          <TooltipTrigger>
+            <span>
+              <panda.span fontSize="lg" fontWeight="bold">
+                {analysisData.fileSizes.gzip.minified}
+              </panda.span>{' '}
+              KB corresponding CSS generated (min+gzip)
+            </span>
+          </TooltipTrigger>
+          <Portal>
+            <TooltipPositioner>
+              <TooltipContent>
+                <panda.span p="2" bg="gray.100" border="1px solid rgba(0, 0, 0, 0.1)" rounded="md">
+                  <panda.span fontSize="lg" fontWeight="bold">
+                    {analysisData.fileSizes.normal}
+                  </panda.span>{' '}
+                  (unmin+uncompressed)
+                </panda.span>
+              </TooltipContent>
+            </TooltipPositioner>
+          </Portal>
+        </Tooltip>
+      </panda.div>
+      {topKind && (
+        <panda.div fontSize="md">
+          <span>Mostly </span>
+          {
+            <TextWithCount display="inline-block" count={topKind.count}>
+              {topKind.key === 'function' ? 'using functions' : 'using style props'}
+            </TextWithCount>
+          }
+          {secondKind && (
+            <>
+              , and others{' '}
+              <TextWithCount display="inline-block" count={secondKind.count}>
+                {secondKind.key === 'function' ? 'using functions' : 'using style props'}.
+              </TextWithCount>
+            </>
+          )}
+        </panda.div>
+      )}
+      <panda.div fontSize="sm">
+        <span>
+          With{' '}
+          <panda.span fontSize="md" fontWeight="bold">
+            {unknownValuesCount}
+          </panda.span>{' '}
+          unknown token values (
+          <panda.span fontSize="md" fontWeight="bold">
+            {formater.format(unknownValuesCount / values.length)}
+          </panda.span>
+          ) and{' '}
+          <panda.span fontSize="md" fontWeight="bold">
+            {withImportant.length}
+          </panda.span>{' '}
+          values marked as important (
+          <panda.span fontSize="md" fontWeight="bold">
+            {formater.format(withImportant.length / values.length)}
+          </panda.span>
+          )
+        </span>
+      </panda.div>
+    </Stack>
+  )
+}
+
+const selectOptionClass = css({
+  padding: '4px 8px',
+  bg: 'white',
+})
+
+const MostUsedList = () => {
+  return (
+    <>
+      <Select defaultValue={{ label: 'tokens', value: 'tokens' }}>
+        {({ selectedOption }) => (
+          <Section
+            title={
+              <>
+                <SelectLabel>Top 10 </SelectLabel>
+                <SelectTrigger>
+                  <button>{selectedOption?.label}</button>
+                </SelectTrigger>
+              </>
+            }
+            bg="gray.50"
+          >
+            {mostUsedByName[selectedOption?.value as keyof typeof mostUsedByName]}
+            <>
+              <Portal>
+                <SelectPositioner>
+                  <SelectContent className={cx(selectOptionClass, css({ listStyle: 'none' }))}>
+                    <SelectOption className={selectOptionClass} value="tokens" label="tokens" />
+                    <SelectOption className={selectOptionClass} value="properties" label="properties" />
+                    <SelectOption className={selectOptionClass} value="categories" label="categories" />
+                    <SelectOption className={selectOptionClass} value="conditions" label="conditions" />
+                    <SelectOption className={selectOptionClass} value="propertyPaths" label="property paths" />
+                    <SelectOption className={selectOptionClass} value="shorthands" label="shorthands" />
+                    <SelectOption className={selectOptionClass} value="instances" label="instances" />
+                    <SelectOption className={selectOptionClass} value="types" label="types" />
+                  </SelectContent>
+                </SelectPositioner>
+              </Portal>
+            </>
+          </Section>
+        )}
+      </Select>
+    </>
+  )
+}
+
+const MostUsedItem = ({
+  entries,
+}: {
+  entries: Array<{
+    key: string
+    count: number
+  }>
+}) => {
+  return (
+    <Wrap gap="4" fontSize="sm">
+      {entries.map(({ key, count }) => {
+        return (
+          <panda.a className={styledLink({})} key={key} href={getUtilityLink({ value: key })}>
+            <TextWithCount count={count}>{key}</TextWithCount>
+          </panda.a>
+        )
+      })}
+    </Wrap>
+  )
+}
+
+const mostUsedByName = {
+  tokens: <MostUsedItem entries={analysisData.stats.mostUseds.tokens} />,
+  properties: <MostUsedItem entries={analysisData.stats.mostUseds.propNames} />,
+  shorthands: <MostUsedItem entries={analysisData.stats.mostUseds.shorthands} />,
+  categories: <MostUsedItem entries={analysisData.stats.mostUseds.categories} />,
+  conditions: <MostUsedItem entries={analysisData.stats.mostUseds.conditions} />,
+  propertyPaths: <MostUsedItem entries={analysisData.stats.mostUseds.propertyPaths} />,
+  instances: <MostUsedItem entries={analysisData.stats.mostUseds.instanceNames} />,
+  types: <MostUsedItem entries={analysisData.stats.mostUseds.types} />,
+}
+
+const ColorPalette = () => {
+  return (
+    <Section
+      title={<TextWithCount count={analysisData.stats.mostUseds.colors.length}>Color palette</TextWithCount>}
+      bg="gray.50"
+    >
+      <Wrap gap="2" fontSize="sm">
+        {analysisData.stats.mostUseds.colors.map(({ key, count }) => (
+          <ColorItem
+            tokenName={key}
+            key={key}
+            py="2"
+            px="4"
+            transition="all 0.2s ease"
+            _hover={{ bgColor: 'gray.100' }}
+          >
+            <TextWithCount count={count}>
+              <TruncatedText text={key} />
+            </TextWithCount>
+          </ColorItem>
+        ))}
+      </Wrap>
+    </Section>
+  )
+}
+
+const FilesAccordionList = () => {
+  const entries = Object.entries(analysisData.details.byFilepath)
+
+  const [sortedBy, setSortedBy] = useState<'name' | 'tokens count' | 'file path'>('file path')
+  const sorted = entries.sort((a, b) => {
+    if (sortedBy === 'name') {
+      return a[0].localeCompare(b[0])
+    }
+
+    if (sortedBy === 'tokens count') {
+      return b[1].length - a[1].length
+    }
+
+    return 0
+  })
+
+  return (
+    <Section
+      p="0"
+      title={<TextWithCount count={sorted.length}>Files</TextWithCount>}
+      subTitle={
+        <panda.div ml="auto">
+          <Select onChange={(option) => setSortedBy((option?.value as any) ?? 'file path')}>
+            {({ selectedOption }) => (
+              <>
+                <SelectTrigger>
+                  <panda.button display="flex" alignItems="center">
+                    Sort by {selectedOption?.label}
+                    <panda.div w="26px" ml="2">
+                      <SortIcon />
+                    </panda.div>
+                  </panda.button>
+                </SelectTrigger>
+                <Portal>
+                  <SelectPositioner>
+                    <SelectContent className={cx(selectOptionClass, css({ listStyle: 'none' }))}>
+                      <SelectOption className={selectOptionClass} value="name" label="name" />
+                      <SelectOption className={selectOptionClass} value="tokens count" label="tokens count" />
+                      <SelectOption className={selectOptionClass} value="file path" label="file path" />
+                    </SelectContent>
+                  </SelectPositioner>
+                </Portal>
+              </>
+            )}
+          </Select>
+        </panda.div>
+      }
+    >
+      <Accordion className={stack({ gap: '2', px: '2', fontSize: 'sm', width: 'full', debug: false })} multiple>
+        {sorted.map(([filepath, reportItemIdList]) => {
+          const values = reportItemIdList.map(getReportItem)
+          const localMaps =
+            analysisData.details.byFilePathMaps[filepath as keyof typeof analysisData.details.byFilePathMaps]
+          const colors = Object.entries(localMaps.colorsUsed)
+          // console.log(localMaps, values)
+
+          return (
+            <AccordionItem
+              key={filepath}
+              value={filepath}
+              className={css({
+                p: '4',
+                width: 'full',
+                rounded: 'md',
+                _hover: { bgColor: 'gray.50' },
+                cursor: 'pointer',
+              })}
+            >
+              {(props) => (
+                <>
+                  <AccordionTrigger>
+                    <panda.button display="flex" bg="none" w="full" p="2" cursor="pointer">
+                      <panda.a
+                        className={styledLink({})}
+                        href={getFileLink({ filepath })}
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <TextWithCount key={filepath} count={reportItemIdList.length}>
+                          {getReportRelativeFilePath(filepath)}
+                        </TextWithCount>
+                      </panda.a>
+                      <panda.div ml="auto" mb="4">
+                        <panda.span fontWeight="bold">{values.length}</panda.span> utilities and{' '}
+                        <panda.span fontWeight="bold">{Object.keys(localMaps.colorsUsed).length}</panda.span> colors
+                        used
+                      </panda.div>
+                      <panda.span ml="2">{props.isOpen ? '▲' : '▼'}</panda.span>
+                    </panda.button>
+                  </AccordionTrigger>
+                  <AccordionContent className={css({ p: '2' })}>
+                    <panda.div>
+                      <panda.h5>Utilities</panda.h5>
+                      <Wrap gap="2" mt="4">
+                        {values.map((reportItem) => (
+                          <ReportItemLink
+                            key={reportItem.id}
+                            {...pick(reportItem, ['value', 'propName', 'filepath'])}
+                          />
+                        ))}
+                      </Wrap>
+                    </panda.div>
+
+                    {colors.length ? (
+                      <panda.div mt="8">
+                        <panda.h5>
+                          <TextWithCount count={colors.length}>Color palette</TextWithCount>
+                        </panda.h5>
+                        <Wrap gap="2" mt="4">
+                          {colors.map(([key]) => {
+                            return (
+                              <ColorItem
+                                tokenName={key}
+                                key={key}
+                                py="2"
+                                px="4"
+                                transition="all 0.2s ease"
+                                _hover={{ bg: 'gray.100' }}
+                              >
+                                <TruncatedText text={key} />
+                              </ColorItem>
+                            )
+                          })}
+                        </Wrap>
+                      </panda.div>
+                    ) : null}
+                  </AccordionContent>
+                </>
+              )}
+            </AccordionItem>
+          )
+        })}
+      </Accordion>
+    </Section>
+  )
+}

package/src/components/token-content.tsx

@@ -0,0 +1,5 @@
+import { type HTMLPandaProps, panda } from '../../styled-system/jsx'
+
+export function TokenContent(props: HTMLPandaProps<'div'>) {
+  return <panda.div display="flex" flexDir="column" gap="12" {...props} />
+}

package/src/components/token-group.tsx

@@ -0,0 +1,6 @@
+import type { HTMLPandaProps } from '../../styled-system/jsx'
+import { panda } from '../../styled-system/jsx'
+
+export function TokenGroup(props: HTMLPandaProps<'div'>) {
+  return <panda.div display="flex" flexDir="column" gap="3" width="full" marginTop="5" {...props} />
+}

package/src/components/typography-playground.tsx

@@ -0,0 +1,83 @@
+import { useState } from 'react'
+import { Stack, panda } from '../../styled-system/jsx'
+import context from '../lib/panda.context'
+import { TokenContent } from './token-content'
+import { TokenGroup } from './token-group'
+
+const getFirstToken = <T extends Map<string, any>>(token: T) => Array.from(token.values())[0].extensions.prop
+const tokens = Object.fromEntries(context.tokens.categoryMap)
+
+const defaultConfig = {
+  fontSize: getFirstToken(tokens.fontSizes),
+  letterSpacing: getFirstToken(tokens.letterSpacings),
+  fontWeight: getFirstToken(tokens.fontWeights),
+  lineHeight: getFirstToken(tokens.lineHeights),
+}
+
+export function TypographyPlayground() {
+  const [config, setConfig] = useState(defaultConfig)
+  const configValues = Object.entries(config).reduce(
+    (acc, [token, label]) => ({
+      ...acc,
+      [token]: tokens[`${token}s`].get(label)?.value,
+    }),
+    {},
+  )
+
+  const updateConfig = (key: string, value: string) => {
+    setConfig((prev) => ({
+      ...prev,
+      [key]: value,
+    }))
+  }
+
+  const onChangeConfig = (e: Event | React.FormEvent<HTMLElement>, key: string) => {
+    const event = e as React.FormEvent<HTMLInputElement>
+    updateConfig(key, event.currentTarget.value)
+  }
+
+  const renderTokenSwitch = (token: keyof typeof defaultConfig) => {
+    const values = Array.from(tokens[`${token}s`].values())
+    return (
+      <panda.select background="card" value={config[token]} onChange={(e) => onChangeConfig(e, token)}>
+        {values.map((token) => (
+          <option key={token.value} value={token.extensions.prop}>
+            {`${token.extensions.prop} (${token.value})`}
+          </option>
+        ))}
+      </panda.select>
+    )
+  }
+
+  return (
+    <TokenGroup>
+      <TokenContent>
+        <div>
+          <panda.div
+            contentEditable
+            outline="0"
+            pt="28"
+            pb="28"
+            mx="auto"
+            suppressContentEditableWarning={true}
+            width="fit-content"
+            style={configValues}
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </panda.div>
+
+          <Stack gap="4">
+            {Object.keys(config).map((tokenKey) => (
+              <panda.div display="flex" alignItems="center" gap="1.5" key={tokenKey}>
+                <panda.span whiteSpace="nowrap" width="48" textTransform="capitalize" mr="2">
+                  {tokenKey.replace(/([a-z0-9])([A-Z])/g, '$1 $2')}
+                </panda.span>
+                {renderTokenSwitch(tokenKey as keyof typeof defaultConfig)}
+              </panda.div>
+            ))}
+          </Stack>
+        </div>
+      </TokenContent>
+    </TokenGroup>
+  )
+}

package/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

package/src/icons/moon.tsx

@@ -0,0 +1,15 @@
+import type { ComponentProps } from 'react'
+
+export const MoonIcon = (props: ComponentProps<'svg'>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    aria-hidden="true"
+    {...props}
+  >
+    <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+  </svg>
+)

package/src/icons/sun.tsx

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'react'
+
+export const SunIcon = (props: ComponentProps<'svg'>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    aria-hidden="true"
+    {...props}
+  >
+    <path
+      d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+      fillRule="evenodd"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+)

package/src/layouts/Layout.astro

@@ -0,0 +1,19 @@
+---
+import '../../styled-system/styles.css'
+import Head from '../components/head.astro'
+import context from '../lib/panda.context'
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <Head />
+    <Fragment set:html={context.inject.head} />
+    <meta name="generator" content={Astro.generator} />
+    <title>Panda Playground</title>
+  </head>
+  <body>
+    <Fragment set:html={context.inject.body} />
+    <slot />
+  </body>
+</html>

package/src/layouts/Sidebar.astro

@@ -0,0 +1,35 @@
+---
+import { Container, panda, Stack } from '../../styled-system/jsx'
+import '../../styled-system/styles.css'
+import { Logo } from '../components/logo'
+import SideNav from '../components/side-nav.astro'
+import ThemeToggle from '../components/theme-toggle.astro'
+import context from '../lib/panda.context'
+
+interface Props {
+  title: string
+}
+
+const { title } = Astro.props
+---
+
+<panda.main display="flex" height="calc(100vh - env(safe-area-inset-bottom))">
+  <Stack height="full" minW="60" overflow="auto" px="12" py="8">
+    <panda.a title="Token documentation" fontWeight="bold" fontSize="2xl" href="/" display="flex" gap="2">
+      {context.logo ? <panda.img src={context.logo} width="16" alt="logo" /> : <Logo />}
+    </panda.a>
+    <panda.div mt="4">
+      <ThemeToggle />
+    </panda.div>
+    <SideNav />
+  </Stack>
+
+  <Container width="full">
+    <panda.div overflow="auto" px="4" pt="14" pb="8">
+      <panda.h1 fontSize="3xl" fontWeight="semibold" mb="8" letterSpacing="tight">
+        {title}
+      </panda.h1>
+      <slot />
+    </panda.div>
+  </Container>
+</panda.main>

package/src/lib/analysis-data.ts

@@ -0,0 +1,17 @@
+import { TokenDictionary } from '@pandacss/token-dictionary'
+import type { AnalysisReportJSON } from '@pandacss/types'
+
+//@ts-ignore
+import analysisData from './analysis.json' assert { type: 'json' }
+
+const typedData = analysisData as any as AnalysisReportJSON
+export { typedData as analysisData }
+
+export const tokenDictionary = new TokenDictionary(analysisData.theme)
+
+if (typeof window !== 'undefined') {
+  // @ts-ignore
+  window.PANDA_TOKEN_DICTIONNARY = tokenDictionary
+  // @ts-ignore
+  window.PANDA_ANALYSIS_DATA = analysisData
+}