@pandacss/studio 0.0.0-dev-20230613163214

package/index.ts

@@ -0,0 +1 @@
+export * from './scripts/studio'

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@pandacss/studio",
+  "version": "0.0.0-dev-20230613163214",
+  "description": "The automated token documentation for Panda CSS",
+  "main": "dist/studio.js",
+  "module": "dist/studio.mjs",
+  "types": "dist/studio.d.ts",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "src",
+    "public",
+    "styled-system",
+    "*.ts"
+  ],
+  "keywords": [
+    "panda",
+    "studio",
+    "design tokens",
+    "documentation"
+  ],
+  "author": "Segun Adebayo <joseshegs@gmail.com>",
+  "license": "MIT",
+  "dependencies": {
+    "@ark-ui/react": "0.6.0",
+    "@astrojs/react": "2.2.1",
+    "astro": "2.6.3",
+    "javascript-stringify": "2.1.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "vite": "4.3.9",
+    "@pandacss/types": "0.0.0-dev-20230613163214",
+    "@pandacss/config": "0.0.0-dev-20230613163214",
+    "@pandacss/shared": "0.0.0-dev-20230613163214",
+    "@pandacss/token-dictionary": "0.0.0-dev-20230613163214",
+    "@pandacss/logger": "0.0.0-dev-20230613163214",
+    "@pandacss/node": "0.0.0-dev-20230613163214"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.12",
+    "@types/react-dom": "18.2.5",
+    "@vitejs/plugin-react": "4.0.0",
+    "execa": "7.1.1",
+    "@pandacss/dev": "0.0.0-dev-20230613163214"
+  },
+  "scripts": {
+    "codegen": "panda",
+    "build": "tsup scripts --format=esm,cjs --dts --no-splitting --shims",
+    "postbuild": "panda",
+    "build-fast": "tsup scripts --format=esm,cjs --no-dts --no-splitting --shims",
+    "dev": "pnpm build-fast --watch scripts",
+    "dev:panda": "panda --clean --watch",
+    "dev:astro": "astro dev",
+    "start": "concurrently \"pnpm dev:panda\" \"pnpm dev:astro\""
+  }
+}

package/panda.config.ts

@@ -0,0 +1,110 @@
+import { defineConfig } from '@pandacss/dev'
+
+export default defineConfig({
+  gitignore: false,
+  preflight: true,
+  include: ['./src/**/*.{tsx,jsx,astro}'],
+  exclude: [],
+  outdir: 'styled-system',
+  jsxFactory: 'panda',
+  jsxFramework: 'react',
+  theme: {
+    extend: {
+      tokens: {
+        colors: {
+          neutral: {
+            50: { value: '#fafafa' },
+            100: { value: '#f5f5f5' },
+            200: { value: '#e5e5e5' },
+            300: { value: '#d4d4d4' },
+            400: { value: '#a3a3a3' },
+            500: { value: '#737373' },
+            600: { value: '#525252' },
+            700: { value: '#404040' },
+            800: { value: '#262626' },
+            900: { value: '#171717' },
+            950: { value: '#0a0a0a' },
+          },
+        },
+        assets: {
+          check: {
+            value: {
+              type: 'url',
+              value:
+                'data:image/svg+xml;utf8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200H3V3H0V0Z%22%20fill%3D%22%23E1E1E1%22/%3E%3Cpath%20d%3D%22M3%200H6V3H3V0Z%22%20fill%3D%22white%22/%3E%3Cpath%20d%3D%22M3%203H6V6H3V3Z%22%20fill%3D%22%23E1E1E1%22/%3E%3Cpath%20d%3D%22M0%203H3V6H0V3Z%22%20fill%3D%22white%22/%3E%3C/svg%3E%0A',
+            },
+          },
+        },
+      },
+      semanticTokens: {
+        shadows: {
+          inset: {
+            value: { base: 'inset 0 0 0 1px rgba(0,0,0,0.1)', _dark: 'inset 0 0 0 1px rgba(255,255,255,0.2)' },
+          },
+        },
+        colors: {
+          text: {
+            value: { base: '{colors.black}', _dark: '{colors.neutral.200}' },
+          },
+          bg: {
+            value: { base: '{colors.white}', _dark: '{colors.neutral.900}' },
+          },
+          card: {
+            value: { base: '{colors.neutral.200}', _dark: '{colors.neutral.800}' },
+          },
+          border: {
+            value: { base: '{colors.neutral.300}', _dark: '{colors.neutral.700}' },
+          },
+        },
+      },
+    },
+  },
+  patterns: {
+    extend: {
+      styledLink: {
+        properties: {},
+        transform: (props: any) => ({
+          display: 'inline-flex',
+          alignItems: 'center',
+          opacity: '0.5',
+          borderBottom: '1px solid transparent',
+          cursor: 'pointer',
+          _hover: { opacity: 1, borderBottomColor: 'black' },
+          ...props,
+        }),
+      },
+    },
+  },
+  staticCss: {
+    css: [
+      {
+        properties: {
+          color: ['red.400'],
+        },
+      },
+    ],
+  },
+  globalCss: {
+    ':root': {
+      '--global-color-border': 'colors.border',
+      '--global-color-placeholder': 'colors.neutral.500',
+      fontFamily: 'Inter, Avenir, Helvetica, Arial, sans-serif',
+      fontSize: 'md',
+      lineHeight: 'normal',
+      fontWeight: 'normal',
+      colorScheme: 'light dark',
+      color: 'text',
+      background: 'bg',
+    },
+
+    a: {
+      color: 'unset',
+      textDecoration: 'none',
+    },
+
+    body: {
+      margin: 0,
+      minHeight: '100vh',
+    },
+  },
+})

package/public/favicon.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
+  <path fill="#000" d="M22.25 4h-8.5a1 1 0 0 0-.96.73l-5.54 19.4a.5.5 0 0 0 .62.62l5.05-1.44a2 2 0 0 0 1.38-1.4l3.22-11.66a.5.5 0 0 1 .96 0l3.22 11.67a2 2 0 0 0 1.38 1.39l5.05 1.44a.5.5 0 0 0 .62-.62l-5.54-19.4a1 1 0 0 0-.96-.73Z"/>
+  <path fill="url(#gradient)" d="M18 28a7.63 7.63 0 0 1-5-2c-1.4 2.1-.35 4.35.6 5.55.14.17.41.07.47-.15.44-1.8 2.93-1.22 2.93.6 0 2.28.87 3.4 1.72 3.81.34.16.59-.2.49-.56-.31-1.05-.29-2.46 1.29-3.25 3-1.5 3.17-4.83 2.5-6-.67.67-2.6 2-5 2Z"/>
+  <defs>
+    <linearGradient id="gradient" x1="16" x2="16" y1="32" y2="24" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#000"/>
+      <stop offset="1" stop-color="#000" stop-opacity="0"/>
+    </linearGradient>
+  </defs>
+	<style>
+    @media (prefers-color-scheme:dark){:root{filter:invert(100%)}}
+  </style>
+</svg>

package/src/components/analyzer/category-utilities.tsx

@@ -0,0 +1,146 @@
+import { Grid, panda, Wrap } from '../../../styled-system/jsx'
+import { gridItem, styledLink } from '../../../styled-system/patterns'
+import { getReportItem, getUtilityLink } from '../../lib/get-report-item'
+import { groupBy } from '../../lib/group-in'
+import { Section } from './section'
+import { TextWithCount } from './text-with-count'
+import { TruncatedText } from './truncated-text'
+
+import { Portal, Select, SelectContent, SelectOption, SelectPositioner, SelectTrigger } from '@ark-ui/react'
+import { useState } from 'react'
+import { css, cx } from '../../../styled-system/css'
+import { ReportItemLink } from './report-item-link'
+import { SortIcon } from './sort-icon'
+
+const selectOptionClass = css({ padding: '4px 8px', bg: 'white' })
+
+type SortBy = 'property name' | 'tokens count'
+const defaultOption = { label: 'tokens count', value: 'tokens count' as SortBy }
+
+export const ByCategory = ({ byCategory }: { byCategory: Record<string, number[]> }) => {
+  const { unknown, ...rest } = byCategory
+  const keys = Object.keys(rest)
+  const [sortedBy, setSortedBy] = useState<SortBy>('tokens count')
+
+  return (
+    <Section
+      p="0"
+      title={
+        <span>
+          <TextWithCount count={keys.length + 1}>Category </TextWithCount>
+          <panda.span ml="2">utilities</panda.span>
+        </span>
+      }
+      subTitle={
+        <panda.div ml="auto">
+          <Select
+            onChange={(option) => setSortedBy((option?.value as SortBy) ?? 'tokens count')}
+            defaultValue={defaultOption}
+          >
+            {({ 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={defaultOption.value}
+                        label={defaultOption.label}
+                      />
+                      <SelectOption className={selectOptionClass} value="property name" label="property name" />
+                    </SelectContent>
+                  </SelectPositioner>
+                </Portal>
+              </>
+            )}
+          </Select>
+        </panda.div>
+      }
+    >
+      <Grid gap="4" columns={2}>
+        {/* TODO filter out variants from recipes ? */}
+        {keys.map((category) => (
+          <CategoryUtilities key={category} category={category} byCategory={byCategory} sortedBy={sortedBy} />
+        ))}
+        <CategoryUtilities
+          className={gridItem({ colSpan: 2 })}
+          category="unknown"
+          byCategory={byCategory}
+          sortedBy={sortedBy}
+        />
+      </Grid>
+    </Section>
+  )
+}
+
+const CategoryUtilities = ({
+  category,
+  byCategory,
+  className,
+  sortedBy,
+}: {
+  category: string
+  byCategory: Record<string, number[]>
+  className?: string
+  sortedBy: SortBy
+}) => {
+  const reportItemIdList = byCategory[category as keyof typeof byCategory]
+
+  const categoryTokens = reportItemIdList.map(getReportItem)
+  const grouped = groupBy(categoryTokens, 'value')
+  const values = Object.entries(grouped)
+  const flattened = values.flatMap(([_value, reportItemList]) => reportItemList)
+
+  const sorted = flattened
+    .filter((item) => {
+      return item === grouped[String(item.value)][0]
+    })
+    .sort((a, b) => {
+      if (sortedBy === 'property name') {
+        const result = a.propName.localeCompare(b.propName)
+        if (result !== 0) {
+          return result
+        }
+
+        return String(a.value).localeCompare(String(b.value))
+      }
+
+      if (sortedBy === 'tokens count') {
+        return grouped[String(b.value)].length - grouped[String(a.value)].length
+      }
+
+      return 0
+    })
+
+  return (
+    <panda.div key={category} p="4" bg="gray.50" className={className}>
+      <panda.h4>
+        <panda.a className={styledLink({})} href={getUtilityLink({ category })}>
+          <TextWithCount count={values.length}>
+            <TruncatedText text={category} />
+          </TextWithCount>
+        </panda.a>
+      </panda.h4>
+      <Wrap gap="2">
+        {sorted.map((reportItem) => {
+          return (
+            <ReportItemLink
+              key={reportItem.id}
+              value={reportItem.value}
+              category={reportItem.category}
+              propName={reportItem.propName}
+            />
+          )
+        })}
+      </Wrap>
+    </panda.div>
+  )
+}

package/src/components/analyzer/data-combobox.tsx

@@ -0,0 +1,125 @@
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxControl,
+  ComboboxInput,
+  ComboboxLabel,
+  ComboboxOption,
+  ComboboxPositioner,
+  ComboboxTrigger,
+  Portal,
+} from '@ark-ui/react'
+import { useEffect, useState } from 'react'
+import { css } from '../../../styled-system/css'
+import { panda } from '../../../styled-system/jsx'
+
+export type DataComboboxOption = {
+  value: string
+  label: string
+}
+
+export type DataComboboxProps = {
+  options: DataComboboxOption[]
+  label?: React.ReactNode
+  placeholder?: string
+  filterFn?: (value: string) => DataComboboxOption[]
+  defaultValue?: string
+  onSelect?: (option: any) => void
+}
+
+export const DataCombobox = ({ options: allOptions, label, ...props }: DataComboboxProps) => {
+  const [options, setOptions] = useState(allOptions)
+  const filterFn =
+    props.filterFn ||
+    ((value: string) => allOptions.filter((item) => item.label.toLowerCase().includes(value.toLowerCase())))
+
+  // sync available options from parent
+  useEffect(() => {
+    setOptions(allOptions)
+  }, [allOptions])
+
+  return (
+    <Combobox openOnClick {...props}>
+      {(state: any) => {
+        return (
+          <>
+            <ComboboxControl>
+              <panda.div display="flex" flexDirection="column">
+                {label && (
+                  <ComboboxLabel>
+                    <panda.span fontWeight="bold">{label}</panda.span>
+                  </ComboboxLabel>
+                )}
+                <panda.div display="flex" border="1px solid token(colors.blue.400, blue)">
+                  <ComboboxInput
+                    defaultValue={props.defaultValue}
+                    placeholder={props.placeholder ?? 'Search...'}
+                    className={css({ width: 'full' })}
+                    onChange={(e) => {
+                      const value = e.target.value
+                      if (!value) {
+                        props?.onSelect?.({ relatedTarget: null })
+                        setOptions(allOptions)
+                        state.clearValue()
+                        return
+                      }
+
+                      setOptions(filterFn(value))
+                    }}
+                  />
+                  {state.selectedValue && (
+                    <panda.span
+                      px="2"
+                      mr="-2"
+                      cursor="pointer"
+                      userSelect="none"
+                      fontSize="lg"
+                      fontWeight="bold"
+                      onClick={() => state.clearValue()}
+                    >
+                      X
+                    </panda.span>
+                  )}
+                  <ComboboxTrigger>
+                    <panda.span ml="auto" px="2" cursor="pointer">
+                      {state.isOpen ? '▲' : '▼'}
+                    </panda.span>
+                  </ComboboxTrigger>
+                </panda.div>
+              </panda.div>
+            </ComboboxControl>
+            <Portal>
+              <ComboboxPositioner>
+                <ComboboxContent
+                  className={css({
+                    maxHeight: '300px',
+                    overflow: 'auto',
+                    padding: '4px 8px',
+                    bg: 'white',
+                    listStyle: 'none',
+                    border: '1px solid token(colors.blue.400, blue)',
+                  })}
+                >
+                  {/* TODO virtualization */}
+                  {options.map((option) => (
+                    <ComboboxOption
+                      key={option.label + '-' + option.value}
+                      value={option.value}
+                      label={option.label}
+                      className={css({
+                        padding: '4px 8px',
+                        _highlighted: {
+                          outline: '1px solid token(colors.blue.400, blue)',
+                        },
+                      })}
+                    />
+                  ))}
+                </ComboboxContent>
+              </ComboboxPositioner>
+            </Portal>
+          </>
+        )
+      }}
+    </Combobox>
+  )
+}

package/src/components/analyzer/data-table.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react'
+import { Grid, panda } from '../../../styled-system/jsx'
+import { flex } from '../../../styled-system/patterns'
+
+export type Column<T> = { header: string; accessor: string; cell?: (item: T) => ReactNode }
+
+// TODO tanstack/table ? hide/show columns + sort
+export function DataTable<T>({ list, columns }: { list: T[]; columns: ReadonlyArray<Column<T>> }) {
+  return (
+    <panda.div>
+      <Grid
+        style={{ gridTemplateColumns: `80px repeat(auto-fit, minmax(30px, 1fr))` }}
+        // gridTemplateColumns="repeat(auto-fit, minmax(30px, 1fr))"
+        w="full"
+        fontWeight="bold"
+        fontSize="lg"
+        mb="2"
+      >
+        {columns.map((column) => {
+          return <panda.div key={column.header}>{column.header}</panda.div>
+        })}
+      </Grid>
+      <panda.div className={flex({ direction: 'column', gap: '2' })}>
+        {list.map((item, index) => {
+          return (
+            <Grid
+              style={{ gridTemplateColumns: `80px repeat(auto-fit, minmax(30px, 1fr))` }}
+              // gridTemplateColumns="repeat(auto-fit, minmax(30px, 1fr))"
+              w="full"
+              key={index}
+            >
+              {columns.map((column) => {
+                return (
+                  <panda.div key={column.accessor}>{column.cell?.(item) ?? (item as any)[column.accessor]}</panda.div>
+                )
+              })}
+            </Grid>
+          )
+        })}
+      </panda.div>
+    </panda.div>
+  )
+}

package/src/components/analyzer/external-icon.tsx

@@ -0,0 +1,8 @@
+/** @see https://iconmonstr.com/share-11-svg/ */
+export const ExternalIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100%" viewBox="0 0 24 24">
+      <path d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" />
+    </svg>
+  )
+}

package/src/components/analyzer/file-details.tsx

@@ -0,0 +1,101 @@
+import type { ReportItemJSON } from '@pandacss/types'
+import { panda, Wrap } from '../../../styled-system/jsx'
+import { styledLink } from '../../../styled-system/patterns'
+import { createContext } from '../../lib/create-context'
+import { analysisData } from '../../lib/analysis-data'
+import { getReportItem, getUtilityLink, getReportRelativeFilePath } from '../../lib/get-report-item'
+import { ByCategory } from './category-utilities'
+import { ColorItem } from '../color-item'
+import { TokenSearchCombobox } from './token-search-combobox'
+import { TextWithCount } from './text-with-count'
+import { TruncatedText } from './truncated-text'
+
+export const FileDetails = () => {
+  const search = new URLSearchParams(window.location.search)
+  const filepath = search.get('filepath')
+
+  const byFilepath = analysisData.details.byFilepath[filepath as keyof typeof analysisData.details.byFilepath] ?? []
+  const reportItemList = byFilepath.map(getReportItem)
+
+  return (
+    <panda.div>
+      <panda.div display="flex">
+        <panda.a href="/token-analyzer">
+          <panda.span fontWeight="bold">{'<'} </panda.span>Back
+        </panda.a>
+        <panda.div ml="auto">
+          <TokenSearchCombobox placeholder="Global search" />
+        </panda.div>
+      </panda.div>
+      <panda.div p="4" mt="4">
+        {!filepath ? (
+          <panda.div display="flex" justifyContent="center" fontSize="xl" p="16" fontWeight="bold">
+            No file selected
+          </panda.div>
+        ) : reportItemList.length > 0 ? (
+          <FileProvider value={{ filepath, localMaps: analysisData.details.byFilePathMaps[filepath], reportItemList }}>
+            <FileDetailsContent />
+          </FileProvider>
+        ) : (
+          <panda.div display="flex" justifyContent="center" fontSize="xl" p="16" fontWeight="bold">
+            No results
+          </panda.div>
+        )}
+      </panda.div>
+    </panda.div>
+  )
+}
+
+const [FileProvider, useFileContext] = createContext<{
+  filepath: string
+  localMaps: (typeof analysisData.details.byFilePathMaps)[string]
+  reportItemList: Array<ReportItemJSON>
+}>({
+  name: 'UtilityFileContext',
+})
+
+const FileDetailsContent = () => {
+  const { filepath, localMaps, reportItemList } = useFileContext()
+  const colors = Object.entries(localMaps.colorsUsed)
+
+  return (
+    <>
+      <panda.h3 mb="4">
+        Usage in file :{' '}
+        <panda.a
+          mt="1"
+          key={filepath}
+          className={styledLink({})}
+          href={getUtilityLink({ filepath })}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <TextWithCount count={reportItemList.length}>{getReportRelativeFilePath(filepath)}</TextWithCount>
+        </panda.a>
+      </panda.h3>
+      <ByCategory byCategory={localMaps.byCategory} />
+      {colors.length ? (
+        <panda.div mt="8">
+          <panda.h3>
+            <TextWithCount count={colors.length}>Color palette</TextWithCount>
+          </panda.h3>
+          <Wrap gap="2" mt="4">
+            {colors.map(([key]) => {
+              return (
+                <ColorItem
+                  tokenName={key}
+                  key={key}
+                  py="2"
+                  px="4"
+                  transition="all 0.2s ease"
+                  _hover={{ bgColor: 'gray.100' }}
+                >
+                  <TruncatedText text={key} />
+                </ColorItem>
+              )
+            })}
+          </Wrap>
+        </panda.div>
+      ) : null}
+    </>
+  )
+}