@pandacss/studio 0.15.2 → 0.15.4

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

@@ -1,156 +0,0 @@
-import { Grid, panda, Stack, 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: 'card',
-  rounded: 'md',
-  '& li': {
-    cursor: 'pointer',
-    _hover: { opacity: 0.8 },
-  },
-})
-
-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" cursor="pointer" _hover={{ opacity: 0.6 }}>
-                    Sort by {selectedOption?.label}
-                    <panda.div w="26px" ml="2" color="text">
-                      <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} />
-        ))}
-        {unknown ? (
-          <CategoryUtilities
-            className={gridItem({ colSpan: 2 })}
-            category="unknown"
-            byCategory={byCategory}
-            sortedBy={sortedBy}
-          />
-        ) : null}
-      </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 (
-    <Stack key={category} p="4" bg="card" color="text" rounded="md" gap="2" className={className}>
-      <panda.h4>
-        <panda.a className={styledLink({})} href={getUtilityLink({ category })}>
-          <TextWithCount count={values.length}>
-            <TruncatedText text={category} fontWeight="semibold" />
-          </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>
-    </Stack>
-  )
-}

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

@@ -1,154 +0,0 @@
-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 { Flex, panda } from '../../../styled-system/jsx'
-import { ChevronDownIcon, XMarkIcon } from '../icons'
-import { inputRecipe } from '../input'
-
-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} className={css({ m: 4 })}>
-      {(state: any) => {
-        return (
-          <>
-            <ComboboxControl>
-              <panda.div display="flex" flexDirection="column" gap="2">
-                {label && (
-                  <ComboboxLabel>
-                    <panda.span fontWeight="bold">{label}</panda.span>
-                  </ComboboxLabel>
-                )}
-                <panda.div display="flex" position="relative" isolation="isolate">
-                  <ComboboxInput
-                    defaultValue={props.defaultValue}
-                    placeholder={props.placeholder ?? 'Search...'}
-                    className={inputRecipe()}
-                    onChange={(e) => {
-                      const value = e.target.value
-                      if (!value) {
-                        props?.onSelect?.({ relatedTarget: null })
-                        setOptions(allOptions)
-                        state.clearValue()
-                        return
-                      }
-
-                      setOptions(filterFn(value))
-                    }}
-                  />
-                  <Flex
-                    top="0px"
-                    right="0px"
-                    align="center"
-                    justify="center"
-                    position="absolute"
-                    zIndex="2"
-                    height="full"
-                  >
-                    {state.selectedValue && (
-                      <panda.span
-                        display="flex"
-                        px="2"
-                        cursor="pointer"
-                        userSelect="none"
-                        onClick={() => state.clearValue()}
-                        alignItems="center"
-                      >
-                        <XMarkIcon />
-                      </panda.span>
-                    )}
-                    <ComboboxTrigger>
-                      <panda.span
-                        ml="auto"
-                        p="2"
-                        display="flex"
-                        cursor="pointer"
-                        borderLeft="solid 1px"
-                        borderColor="border"
-                        color="text"
-                      >
-                        <panda.span
-                          data-expanded={state.isOpen ? '' : undefined}
-                          transform={{ _expanded: 'rotate(180deg)' }}
-                          transition="all .2s ease"
-                        >
-                          <ChevronDownIcon />
-                        </panda.span>
-                      </panda.span>
-                    </ComboboxTrigger>
-                  </Flex>
-                </panda.div>
-              </panda.div>
-            </ComboboxControl>
-            <Portal>
-              <ComboboxPositioner>
-                <ComboboxContent
-                  className={css({
-                    maxHeight: '300px',
-                    overflow: 'auto',
-                    padding: '4px 8px',
-                    bg: 'card',
-                    listStyle: 'none',
-                    rounded: 'md',
-                    border: '1px solid token(colors.border)',
-                    shadow: 'sm',
-                  })}
-                >
-                  {/* TODO virtualization */}
-                  {options.map((option) => (
-                    <ComboboxOption
-                      key={option.label + '-' + option.value}
-                      value={option.value}
-                      label={option.label}
-                      className={css({
-                        padding: '4px 8px',
-                        rounded: 'md',
-                        wordWrap: 'break-word',
-                        _highlighted: {
-                          bg: 'border',
-                        },
-                      })}
-                    />
-                  ))}
-                </ComboboxContent>
-              </ComboboxPositioner>
-            </Portal>
-          </>
-        )
-      }}
-    </Combobox>
-  )
-}

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

@@ -1,39 +0,0 @@
-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
-        gridTemplateColumns="80px 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 gridTemplateColumns="80px repeat(auto-fit, minmax(30px, 1fr))" w="full" key={index}>
-              {columns.map((column) => {
-                return (
-                  <panda.div key={column.accessor} wordBreak="break-word">
-                    {column.cell?.(item) ?? (item as any)[column.accessor]}
-                  </panda.div>
-                )
-              })}
-            </Grid>
-          )
-        })}
-      </panda.div>
-    </panda.div>
-  )
-}

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

@@ -1,8 +0,0 @@
-/** @see https://iconmonstr.com/share-11-svg/ */
-export const ExternalIcon = () => {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-      <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

@@ -1,101 +0,0 @@
-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}
-    </>
-  )
-}

package/src/components/analyzer/get-report-infos-from.ts

@@ -1,80 +0,0 @@
-import type { ReportItemJSON } from '@pandacss/types'
-import { analysisData } from '../../lib/analysis-data'
-import { getReportItem, type SearchableReportItemAttributes } from '../../lib/get-report-item'
-
-export const getReportInfosFrom = (params: SearchableReportItemAttributes) => {
-  let byTokenName: Array<ReportItemJSON['id']> = []
-  let byCategory: Array<ReportItemJSON['id']> = []
-  let byPropName: Array<ReportItemJSON['id']> = []
-  let byInstanceName: Array<ReportItemJSON['id']> = []
-  let byFilepath: Array<ReportItemJSON['id']> = []
-  let hasParam = false
-
-  if (params.value) {
-    byTokenName =
-      analysisData.details.globalMaps.byTokenName[
-        params.value as keyof typeof analysisData.details.globalMaps.byTokenName
-      ] ?? []
-    hasParam = true
-  }
-
-  if (params.category) {
-    byCategory =
-      analysisData.details.globalMaps.byCategory[
-        params.category as keyof typeof analysisData.details.globalMaps.byCategory
-      ] ?? []
-    hasParam = true
-  }
-
-  if (params.propName) {
-    byPropName =
-      analysisData.details.globalMaps.byPropertyName[
-        params.propName as keyof typeof analysisData.details.globalMaps.byPropertyName
-      ] ?? []
-    hasParam = true
-  }
-
-  if (params.from) {
-    byInstanceName =
-      analysisData.details.globalMaps.byInstanceName[
-        params.from as keyof typeof analysisData.details.globalMaps.byInstanceName
-      ] ?? []
-    hasParam = true
-  }
-
-  if (params.filepath) {
-    byFilepath = analysisData.details.byFilepath[params.filepath as keyof typeof analysisData.details.byFilepath] ?? []
-    hasParam = true
-  }
-
-  return {
-    params,
-    hasParam,
-    byTokenName: byTokenName.map(getReportItem),
-    byCategory: byCategory.map(getReportItem),
-    byPropName: byPropName.map(getReportItem),
-    byInstanceName: byInstanceName.map(getReportItem),
-    byFilepath: byFilepath.map(getReportItem),
-    reportItemList: combineIntersections(byTokenName, byCategory, byPropName, byInstanceName, byFilepath).map(
-      getReportItem,
-    ),
-  }
-}
-function combineIntersections<T>(...lists: Array<T[]>) {
-  return lists.reduce((acc, current) => {
-    if (!acc.length) return current
-
-    if (!current.length) return acc
-
-    return intersection(acc, current)
-  }, [] as T[])
-}
-function intersection<T = any>(left: Array<T>, right: Array<T>) {
-  const _intersection = new Set()
-  for (const elem of right) {
-    if (left.includes(elem)) {
-      _intersection.add(elem)
-    }
-  }
-  return Array.from(_intersection) as Array<T>
-}

package/src/components/analyzer/quick-tooltip.tsx

@@ -1,15 +0,0 @@
-import { Portal, Tooltip, TooltipContent, TooltipPositioner, TooltipTrigger } from '@ark-ui/react'
-import type { ReactElement, ReactNode } from 'react'
-
-export const QuickTooltip = ({ children, tooltip }: { children: ReactElement; tooltip: ReactNode }) => {
-  return (
-    <Tooltip openDelay={0} closeDelay={100} positioning={{ placement: 'bottom-start', gutter: 20 }}>
-      <TooltipTrigger>{children}</TooltipTrigger>
-      <Portal>
-        <TooltipPositioner>
-          <TooltipContent>{tooltip}</TooltipContent>
-        </TooltipPositioner>
-      </Portal>
-    </Tooltip>
-  )
-}

package/src/components/analyzer/report-item-columns.tsx

@@ -1,52 +0,0 @@
-import type { ReportItemJSON } from '@pandacss/types'
-import { panda } from '../../../styled-system/jsx'
-import { ReportItemOpenInEditorLink, UtilityLink } from './report-item-link'
-import { QuickTooltip } from './quick-tooltip'
-
-export const reportItemColumns = [
-  {
-    header: '#',
-    accessor: 'id',
-    cell: (item: ReportItemJSON) => <panda.span onClick={() => console.log(item)}>{item.id}</panda.span>,
-  },
-  { header: 'from', accessor: 'from', cell: (item: ReportItemJSON) => <UtilityLink from={item.from} /> },
-  {
-    header: 'category',
-    accessor: 'category',
-    cell: (item: ReportItemJSON) => <UtilityLink category={item.category} />,
-  },
-  {
-    header: 'property name',
-    accessor: 'propName',
-    cell: (item: ReportItemJSON) => <UtilityLink propName={item.propName} />,
-  },
-  {
-    header: 'token name',
-    accessor: 'value',
-    cell: (item: ReportItemJSON) => {
-      return (
-        <panda.div display="flex" alignItems="center">
-          {!item.isKnown && (
-            <QuickTooltip
-              tooltip={
-                <panda.span p="2" bgColor="card" border="1px solid token(colors.border)" shadow="sm" rounded="md">
-                  unknown token
-                </panda.span>
-              }
-            >
-              <panda.span mr="2" userSelect="none">
-                {'❌'}
-              </panda.span>
-            </QuickTooltip>
-          )}
-          <UtilityLink value={item.value} />
-        </panda.div>
-      )
-    },
-  },
-  {
-    header: 'filepath',
-    accessor: 'filepath',
-    cell: (item: ReportItemJSON) => <ReportItemOpenInEditorLink withRange {...item} />,
-  },
-] as const // TODO satisifes Column[]