@pandacss/studio 0.15.2 → 0.15.4

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 })
-      }}
-    />
-  )
-}

package/src/components/analyzer/truncated-text.tsx

@@ -1,28 +0,0 @@
-import { panda } from '../../../styled-system/jsx'
-import type { JsxStyleProps } from '../../../styled-system/types'
-import { truncate } from '../../lib/truncate'
-import { QuickTooltip } from './quick-tooltip'
-
-export const TruncatedText = ({
-  text,
-  characters = 24,
-  ...props
-}: { text: string; characters?: number } & JsxStyleProps) => {
-  if (text.length > characters) {
-    return (
-      <QuickTooltip
-        tooltip={
-          <panda.span p="2" bgColor="card" border="1px solid rgba(0, 0, 0, 0.1)">
-            {truncate(text, 80)}
-          </panda.span>
-        }
-      >
-        <panda.span color="text" {...props}>
-          {text.substring(0, characters) + '...'}
-        </panda.span>
-      </QuickTooltip>
-    )
-  }
-
-  return <panda.span {...props}>{text}</panda.span>
-}

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

@@ -1,325 +0,0 @@
-import {
-  Portal,
-  Select,
-  SelectContent,
-  SelectLabel,
-  SelectOption,
-  SelectPositioner,
-  SelectTrigger,
-} from '@ark-ui/react'
-import { useState } from 'react'
-
-import { css, cx } from '../../../styled-system/css'
-import { Flex, Wrap, panda } from '../../../styled-system/jsx'
-import { styledLink } from '../../../styled-system/patterns'
-
-import { analysisData } from '../../lib/analysis-data'
-import { createContext } from '../../lib/create-context'
-import { getFileLink, getReportRelativeFilePath, type SearchableReportItemAttributes } from '../../lib/get-report-item'
-import { TokenSearchCombobox } from './token-search-combobox'
-import { DataCombobox, type DataComboboxOption } from './data-combobox'
-import { DataTable } from './data-table'
-import { getReportInfosFrom } from './get-report-infos-from'
-import { reportItemColumns } from './report-item-columns'
-import { Section } from './section'
-import { TextWithCount } from './text-with-count'
-import { XMarkIcon } from '../icons'
-
-export const UtilityDetails = () => {
-  const search = new URLSearchParams(window.location.search)
-  const initialParams = Object.fromEntries(search.entries()) as SearchableReportItemAttributes
-  const [params, setParams] = useState(initialParams)
-  // console.log({ params, globalMaps: analysisData.details.globalMaps })
-
-  const infos = getReportInfosFrom(params)
-  // console.log(infos)
-
-  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">
-        <DetailsProvider value={[infos, setParams]}>
-          <UtilityFilters />
-          <hr />
-          {infos.reportItemList.length ? (
-            <UtilityDetailsContent />
-          ) : !infos.hasParam ? (
-            <panda.div display="flex" justifyContent="center" fontSize="xl" p="16" fontWeight="bold">
-              Use at least one filter
-            </panda.div>
-          ) : (
-            <panda.div display="flex" justifyContent="center" fontSize="xl" p="16" fontWeight="bold">
-              No results
-            </panda.div>
-          )}
-        </DetailsProvider>
-      </panda.div>
-    </panda.div>
-  )
-}
-
-type Infos = ReturnType<typeof getReportInfosFrom>
-const [DetailsProvider, useDetails] = createContext<[Infos, React.Dispatch<React.SetStateAction<Infos['params']>>]>({
-  name: 'UtilityDetailsContext',
-})
-
-const updateSearchParam = (key: string, value: string | undefined) => {
-  const search = new URLSearchParams(window.location.search)
-  if (value === undefined) {
-    search.delete(key)
-  } else {
-    search.set(key, value)
-  }
-  window.history.pushState(Object.fromEntries(search.entries()), '', `${window.location.pathname}?${search.toString()}`)
-}
-
-const uniq = (arr: string[]) => Array.from(new Set(arr))
-const toOption = (value: string | object) =>
-  (typeof value === 'string' ? { value, label: value } : value) as DataComboboxOption
-const toFilepathOption = (filepath: string) => ({ value: filepath, label: getReportRelativeFilePath(filepath) })
-
-const UtilityFilters = () => {
-  const [infos, setParams] = useDetails()
-  const [resetKey, setResetKey] = useState(0)
-
-  const allTokenNames = Object.keys(analysisData.details.globalMaps.byTokenName)
-  const filteredTokenNames = uniq(infos.reportItemList.map((item) => String(item.value)))
-  const tokenNames = filteredTokenNames.length > 0 ? filteredTokenNames : allTokenNames
-
-  const allCategories = Object.keys(analysisData.details.globalMaps.byCategory)
-  const filteredCategories = uniq(infos.reportItemList.map((item) => item.category))
-  const categories = filteredCategories.length > 0 ? filteredCategories : allCategories
-
-  const allPropertyNames = Object.keys(analysisData.details.globalMaps.byPropertyName)
-  const filteredPropertyNames = uniq(infos.reportItemList.map((item) => item.propName))
-  const propertyNames = filteredPropertyNames.length > 0 ? filteredPropertyNames : allPropertyNames
-
-  const allFrom = Object.keys(analysisData.details.globalMaps.byInstanceName)
-  const filteredFrom = uniq(infos.reportItemList.map((item) => item.from))
-  const from = filteredFrom.length > 0 ? filteredFrom : allFrom
-
-  const allFilepath = Object.keys(analysisData.details.byFilepath).map(toFilepathOption)
-  const filteredFilepath = uniq(infos.reportItemList.map((item) => item.filepath)).map(toFilepathOption)
-  const filepath = filteredFilepath.length > 0 ? filteredFilepath : allFilepath
-
-  return (
-    <panda.div mb="4">
-      <Flex>
-        <panda.h3>Filters</panda.h3>
-        {infos.hasParam && (
-          <panda.button
-            ml="auto"
-            cursor="pointer"
-            userSelect="none"
-            bg="card"
-            px="3"
-            py="2"
-            rounded="md"
-            _hover={{ opacity: 0.8 }}
-            onClick={() => {
-              updateSearchParam('value', undefined)
-              updateSearchParam('category', undefined)
-              updateSearchParam('propName', undefined)
-              updateSearchParam('from', undefined)
-              updateSearchParam('filepath', undefined)
-              setParams({})
-              setResetKey((k) => k + 1)
-            }}
-          >
-            <panda.span display="flex" gap="2" alignItems="center">
-              <XMarkIcon width="16" height="16" /> Clear filters
-            </panda.span>
-          </panda.button>
-        )}
-      </Flex>
-      <Wrap key={resetKey}>
-        <DataCombobox
-          label="Token name"
-          options={tokenNames.map(toOption)}
-          onSelect={(e) => {
-            updateSearchParam('value', e.value)
-            return setParams((params) => ({ ...params, ['value']: e.value }))
-          }}
-          defaultValue={String(infos.params.value ?? '')}
-        />
-        <DataCombobox
-          label="Property name"
-          options={propertyNames.map(toOption)}
-          onSelect={(e) => {
-            updateSearchParam('propName', e.value)
-            return setParams((params) => ({ ...params, ['propName']: e.value }))
-          }}
-          defaultValue={String(infos.params.propName ?? '')}
-        />
-        <DataCombobox
-          label="Category"
-          options={categories.map(toOption)}
-          onSelect={(e) => {
-            updateSearchParam('category', e.value)
-            return setParams((params) => ({ ...params, ['category']: e.value }))
-          }}
-          defaultValue={String(infos.params.category ?? '')}
-        />
-        <DataCombobox
-          label="Instance name (from)"
-          options={from.map(toOption)}
-          onSelect={(e) => {
-            updateSearchParam('from', e.value)
-            return setParams((params) => ({ ...params, ['from']: e.value }))
-          }}
-          defaultValue={String(infos.params.from ?? '')}
-        />
-        <DataCombobox
-          label="Filepath"
-          options={filepath.map(toOption)}
-          onSelect={(e) => {
-            updateSearchParam('filepath', e.value)
-            return setParams((params) => ({ ...params, ['filepath']: e.value }))
-          }}
-          defaultValue={String(infos.params.filepath ?? '')}
-        />
-      </Wrap>
-    </panda.div>
-  )
-}
-
-const UtilityDetailsContent = () => {
-  const [infos] = useDetails()
-
-  return (
-    <>
-      <ReportItemMatchingFiltersTable {...infos} />
-      <UsedInFiles />
-    </>
-  )
-}
-
-const UsedInFiles = () => {
-  const [infos] = useDetails()
-  const files = uniq(infos.reportItemList.map((item) => item.filepath))
-
-  return (
-    <panda.div>
-      <panda.h3>
-        <TextWithCount count={files.length}>Used in files</TextWithCount>
-      </panda.h3>
-      <panda.div display="flex" flexDirection="column">
-        {files.map((filepath) => (
-          <panda.a
-            mt="1"
-            key={filepath}
-            className={styledLink({})}
-            href={getFileLink({ filepath })}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <TextWithCount count={infos.reportItemList.filter((item) => item.filepath === filepath).length}>
-              {getReportRelativeFilePath(filepath)}
-            </TextWithCount>
-          </panda.a>
-        ))}
-      </panda.div>
-    </panda.div>
-  )
-}
-
-const selectOptionClass = css({
-  padding: '4px 8px',
-  rounded: 'md',
-  '& li': {
-    cursor: 'pointer',
-    _hover: { opacity: 0.8 },
-  },
-})
-
-const ReportItemMatchingFiltersTable = (infos: Infos) => {
-  const tokenName = infos.params.value
-  const defaultOption = { label: `matching search filters`, value: 'reportItemList' }
-  const columns = reportItemColumns.filter((col) => (infos.params as any)[col.accessor] === undefined)
-
-  return (
-    <>
-      <Select defaultValue={defaultOption}>
-        {({ selectedOption }) => {
-          const value = (selectedOption?.value ?? defaultOption.value) as keyof Omit<Infos, 'params' | 'hasParam'>
-          // console.log({ value, list: infos[value] })
-
-          return (
-            <Section
-              title={
-                <>
-                  <SelectLabel>By </SelectLabel>
-                  <SelectTrigger asChild>
-                    <button>{selectedOption?.label}</button>
-                  </SelectTrigger>
-                </>
-              }
-              subTitle={
-                <panda.span fontSize="md" fontWeight="bold" ml="auto">
-                  Found ({infos[value].length}) matches{' '}
-                </panda.span>
-              }
-              bg="card"
-            >
-              <DataTable list={infos[value]} columns={columns} />
-              <>
-                <Portal>
-                  <SelectPositioner>
-                    <SelectContent className={cx(selectOptionClass, css({ listStyle: 'none' }))}>
-                      <SelectOption
-                        className={selectOptionClass}
-                        value={defaultOption.value}
-                        label={defaultOption.label}
-                      />
-                      {infos.params.value && (
-                        <SelectOption
-                          className={selectOptionClass}
-                          label={`token name (${tokenName})`}
-                          value="byTokenName"
-                        />
-                      )}
-                      {infos.params.propName && (
-                        <SelectOption
-                          className={selectOptionClass}
-                          value="byPropName"
-                          label={`property name (${infos.params.propName})`}
-                        />
-                      )}
-                      {infos.params.category && (
-                        <SelectOption
-                          className={selectOptionClass}
-                          value="byCategory"
-                          label={`category (${infos.params.category})`}
-                        />
-                      )}
-                      {infos.params.from && (
-                        <SelectOption
-                          className={selectOptionClass}
-                          value="byInstanceName"
-                          label={`from (${infos.params.from})`}
-                        />
-                      )}
-                      {infos.params.filepath && (
-                        <SelectOption
-                          className={selectOptionClass}
-                          value="byFilepath"
-                          label={`filepath (${getReportRelativeFilePath(infos.params.filepath)})`}
-                        />
-                      )}
-                    </SelectContent>
-                  </SelectPositioner>
-                </Portal>
-              </>
-            </Section>
-          )
-        }}
-      </Select>
-    </>
-  )
-}

package/src/components/color-item.tsx

@@ -1,37 +0,0 @@
-import type { PropsWithChildren } from 'react'
-import { panda } from '../../styled-system/jsx'
-import type { JsxStyleProps } from '../../styled-system/types'
-import { tokenDictionary } from '../lib/analysis-data'
-import { getReportItemFromTokenName, getUtilityLink } from '../lib/get-report-item'
-import { ColorWrapper } from './color-wrapper'
-
-export const ColorItem = ({
-  tokenName,
-  children,
-  ...props
-}: PropsWithChildren<{ tokenName: string } & JsxStyleProps>) => {
-  const token = tokenDictionary.getByName('colors.' + tokenName)
-  const value = token?.value ?? tokenName
-  const reportItem = getReportItemFromTokenName(tokenName)
-
-  if (!reportItem) return null
-
-  return (
-    <panda.a href={getUtilityLink({ value: reportItem.value })} key={tokenName} {...props}>
-      <ColorWrapper
-        w="auto"
-        minW="80px"
-        h="40px"
-        mb="2"
-        style={{ background: value, border: '1px solid rgba(0,0,0,0.1)' }}
-      />
-      {children}
-
-      {tokenName !== value && (
-        <panda.div opacity={0.7}>
-          <panda.span>{value}</panda.span>
-        </panda.div>
-      )}
-    </panda.a>
-  )
-}