@pandacss/studio 0.15.3 → 0.15.4

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[]

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

@@ -1,98 +0,0 @@
-import type { ReportItemJSON } from '@pandacss/types'
-import { panda } from '../../../styled-system/jsx'
-import { styledLink } from '../../../styled-system/patterns'
-import { analysisData } from '../../lib/analysis-data'
-import {
-  getReportItem,
-  getUtilityLink,
-  getReportRange,
-  getReportRelativeFilePath,
-  openReportItemInEditor,
-  type SearchableReportItemAttributes,
-} from '../../lib/get-report-item'
-import { ExternalIcon } from './external-icon'
-import { QuickTooltip } from './quick-tooltip'
-import { TextWithCount } from './text-with-count'
-import { TruncatedText } from './truncated-text'
-
-export const ReportItemLink = (reportItem: Partial<ReportItemJSON>) => {
-  const value = String(reportItem.value)
-  const withTokenName = analysisData.details.globalMaps.byTokenName[value] ?? []
-  const count = withTokenName?.filter((id) => getReportItem(id)?.propName === reportItem.propName)?.length
-
-  return (
-    <panda.a className={styledLink({})} href={getUtilityLink(reportItem)}>
-      <TextWithCount count={count}>
-        {reportItem.propName}.<TruncatedText text={value} />
-      </TextWithCount>
-    </panda.a>
-  )
-}
-
-const mapsByReportItemAttribute = {
-  propName: analysisData.details.globalMaps.byPropertyName,
-  value: analysisData.details.globalMaps.byTokenName,
-  category: analysisData.details.globalMaps.byCategory,
-  from: analysisData.details.globalMaps.byInstanceName,
-  filepath: analysisData.details.byFilepath,
-}
-
-/** Takes a single search param */
-export const UtilityLink = (search: SearchableReportItemAttributes) => {
-  const value = search.value ?? search.propName ?? search.category ?? search.filepath ?? search.from
-
-  let list: number[] | undefined
-  if (search.value) {
-    list = mapsByReportItemAttribute.value[String(search.value)]
-  } else if (search.propName) {
-    list = mapsByReportItemAttribute.propName[search.propName]
-  } else if (search.category) {
-    list = mapsByReportItemAttribute.category[search.category]
-  } else if (search.filepath) {
-    list = mapsByReportItemAttribute.filepath[search.filepath]
-  } else if (search.from) {
-    list = mapsByReportItemAttribute.from[search.from]
-  }
-
-  return (
-    <panda.a
-      className={styledLink({ color: String(value).endsWith('!') ? 'red.400' : undefined })}
-      href={getUtilityLink(search)}
-    >
-      <TextWithCount count={(list ?? []).length}>
-        <TruncatedText text={String(value)} />
-      </TextWithCount>
-    </panda.a>
-  )
-}
-
-export const ReportItemOpenInEditorLink = ({ withRange, ...reportItem }: ReportItemJSON & { withRange?: boolean }) => {
-  return (
-    <panda.div display="flex" alignItems="center">
-      <panda.a
-        className={styledLink({ alignSelf: 'flex-start', mr: '2' })}
-        href={getUtilityLink({ filepath: reportItem.filepath })}
-      >
-        {getReportRelativeFilePath(reportItem.filepath)}
-        {withRange ? getReportRange(reportItem) : ''}
-      </panda.a>
-      <QuickTooltip
-        tooltip={
-          <panda.span p="2" bgColor="card" border="1px solid token(colors.border)" shadow="sm" rounded="md">
-            Click to open in editor
-          </panda.span>
-        }
-      >
-        <panda.div
-          pos="relative"
-          maxW="14px"
-          flexShrink={0}
-          cursor="pointer"
-          onClickCapture={() => openReportItemInEditor(reportItem)}
-        >
-          <ExternalIcon />
-        </panda.div>
-      </QuickTooltip>
-    </panda.div>
-  )
-}

package/src/components/analyzer/section.tsx

@@ -1,24 +0,0 @@
-import type { PropsWithChildren, ReactNode } from 'react'
-import { panda, Stack } from '../../../styled-system/jsx'
-import type { JsxStyleProps } from '../../../styled-system/types'
-
-export const Section = ({
-  title,
-  subTitle,
-  children,
-  ...props
-}: PropsWithChildren<{ title: ReactNode; subTitle?: ReactNode } & JsxStyleProps>) => {
-  return (
-    <Stack p="4" gap="4" w="100%">
-      {title && (
-        <panda.div w="full" display="flex">
-          <panda.h3>{title}</panda.h3>
-          {subTitle}
-        </panda.div>
-      )}
-      <panda.div p="4" w="100%" rounded="md" {...props}>
-        {children}
-      </panda.div>
-    </Stack>
-  )
-}

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

@@ -1,10 +0,0 @@
-export const SortIcon = () => {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <path
-        d="M15.344 17.778a.75.75 0 0 0-.75-.75h-5.16a.75.75 0 0 0 0 1.5h5.16a.75.75 0 0 0 .75-.75zm2.206-4a.75.75 0 0 0-.75-.75H7.204a.75.75 0 0 0 0 1.5H16.8a.75.75 0 0 0 .75-.75zm2.45-4a.75.75 0 0 0-.75-.75H4.75a.75.75 0 0 0 0 1.5h14.5a.75.75 0 0 0 .75-.75zm2-4a.75.75 0 0 0-.75-.75H2.75a.75.75 0 0 0 0 1.5h18.5a.75.75 0 0 0 .75-.75z"
-        stroke="currentColor"
-      />
-    </svg>
-  )
-}

package/src/components/analyzer/text-with-count.tsx

@@ -1,28 +0,0 @@
-import type { PropsWithChildren } from 'react'
-import { panda } from '../../../styled-system/jsx'
-import type { JsxStyleProps } from '../../../styled-system/types'
-
-export const TextWithCount = ({ children, count, ...props }: PropsWithChildren<{ count: number } & JsxStyleProps>) => {
-  return (
-    <panda.div display="inline-flex" alignItems="center" {...props}>
-      <panda.span>{children}</panda.span>
-      <Sup>({count})</Sup>
-    </panda.div>
-  )
-}
-
-const Sup = ({ children, className }: PropsWithChildren<{ className?: string }>) => {
-  return (
-    <panda.sup
-      fontSize="75%"
-      lineHeight={0}
-      position="relative"
-      top="-0.35em"
-      opacity="0.5"
-      ml="1"
-      className={className}
-    >
-      {children}
-    </panda.sup>
-  )
-}

package/src/components/analyzer/token-search-combobox.tsx

@@ -1,39 +0,0 @@
-import { analysisData } from '../../lib/analysis-data'
-import { getUtilityLink, getReportRelativeFilePath } from '../../lib/get-report-item'
-import { DataCombobox, type DataComboboxProps } from './data-combobox'
-
-const searchList = new Map<string, string>()
-const tokenNames = Object.keys(analysisData.details.globalMaps.byTokenName)
-const propertyNames = Object.keys(analysisData.details.globalMaps.byPropertyName)
-const categories = Object.keys(analysisData.details.globalMaps.byCategory)
-const filepaths = Object.keys(analysisData.details.byFilepath)
-tokenNames.sort().forEach((key) => {
-  searchList.set(key, 'value')
-})
-propertyNames.sort().forEach((key) => {
-  searchList.set(key, 'propName')
-})
-categories.sort().forEach((key) => {
-  searchList.set(key, 'category')
-})
-filepaths.sort().forEach((key) => {
-  searchList.set(getReportRelativeFilePath(key), 'filepath')
-})
-
-export const TokenSearchCombobox = (props: Omit<DataComboboxProps, 'options' | 'onSelect'>) => {
-  return (
-    <DataCombobox
-      placeholder={`Search for a token name (${tokenNames.length}), property name (${propertyNames.length}), category (${categories.length}), file path (${filepaths.length})...`}
-      {...props}
-      options={Array.from(searchList.entries()).map(([key, value]) => ({ label: `[${value}]: ${key}`, value: key }))}
-      onSelect={(option) => {
-        if (!option.value) return
-
-        const type = searchList.get(option.value)
-        if (!type) return
-
-        window.location.href = getUtilityLink({ [type]: option.value })
-      }}
-    />
-  )
-}