@pandacss/studio 0.15.2 → 0.15.4

package/src/components/token-analyzer.tsx

@@ -1,397 +0,0 @@
-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: 'card',
-  rounded: 'md',
-  '& li': {
-    cursor: 'pointer',
-    _hover: { opacity: 0.8 },
-  },
-})
-
-const MostUsedList = () => {
-  return (
-    <>
-      <Select defaultValue={{ label: 'tokens', value: 'tokens' }}>
-        {({ selectedOption }) => (
-          <Section
-            title={
-              <>
-                <SelectLabel>Top 10 </SelectLabel>
-                <SelectTrigger>
-                  <button>{selectedOption?.label}</button>
-                </SelectTrigger>
-              </>
-            }
-            bg="card"
-          >
-            {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="card"
-    >
-      <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"
-            rounded="md"
-            _hover={{ bgColor: 'border' }}
-          >
-            <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" cursor="pointer" _hover={{ opacity: 0.6 }}>
-                    Sort by {selectedOption?.label}
-                    <panda.div w="5" ml="2" color="text">
-                      <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' })} 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({
-                width: 'full',
-                rounded: 'md',
-                bg: 'card',
-                _hover: { opacity: '0.8' },
-                cursor: 'pointer',
-              })}
-            >
-              {(props) => (
-                <>
-                  <AccordionTrigger asChild>
-                    <panda.button display="flex" bg="none" w="full" pt="6" pl="6" pr="4" cursor="pointer" color="text">
-                      <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: '6', cursor: 'default' })}>
-                    <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: 'border' }}
-                                rounded="md"
-                              >
-                                <TruncatedText text={key} />
-                              </ColorItem>
-                            )
-                          })}
-                        </Wrap>
-                      </panda.div>
-                    ) : null}
-                  </AccordionContent>
-                </>
-              )}
-            </AccordionItem>
-          )
-        })}
-      </Accordion>
-    </Section>
-  )
-}

package/src/lib/analysis-data.ts

@@ -1,17 +0,0 @@
-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
-}

package/src/lib/get-report-item.tsx

@@ -1,41 +0,0 @@
-import type { ReportItemJSON } from '@pandacss/types'
-import { analysisData } from './analysis-data'
-import { pick } from './pick'
-
-export const getReportItem = (id: ReportItemJSON['id']) =>
-  (analysisData.details.byId as Record<string, any>)[id] as ReportItemJSON
-
-export type SearchableReportItemAttributes = Partial<
-  Pick<ReportItemJSON, 'value' | 'category' | 'propName' | 'filepath' | 'from' | 'isKnown'> & {
-    important?: boolean
-  }
->
-
-export const getUtilityLink = (reportItem: SearchableReportItemAttributes) => {
-  const searchParams = new URLSearchParams(
-    pick(reportItem, ['value', 'category', 'propName', 'from', 'filepath', 'isKnown', 'important']) as any,
-  )
-  return `/token-analyzer/utility?${searchParams.toString()}`
-}
-
-export const getFileLink = (reportItem: SearchableReportItemAttributes) => {
-  const searchParams = new URLSearchParams(pick(reportItem, ['filepath']) as any)
-  return `/token-analyzer/file?${searchParams.toString()}`
-}
-
-export const getReportItemFromTokenName = (tokenName: string) => {
-  const reportItem = analysisData.details.globalMaps.byTokenName[tokenName]?.[0]
-  return getReportItem(reportItem)
-}
-
-export const getReportRelativeFilePath = (filePath: string) => filePath.replace(analysisData.cwd + '/', '')
-export const getReportRange = (reportItem: ReportItemJSON) => `:${reportItem.box.line}:${reportItem.box.column}`
-
-const openInEditor = (filepath: string, line: number, column: number) => {
-  return fetch(`/__open-in-editor?file=${encodeURIComponent(`${filepath}:${line}:${column}`)}`)
-}
-
-export const openReportItemInEditor = (reportItem: ReportItemJSON) => {
-  console.log(reportItem)
-  return openInEditor(reportItem.filepath, reportItem.box.line, reportItem.box.column)
-}

package/src/pages/token-analyzer/file.astro

@@ -1,11 +0,0 @@
----
-import { FileDetails } from '../../components/analyzer/file-details'
-import Layout from '../../layouts/Layout.astro'
-import Sidebar from '../../layouts/Sidebar.astro'
----
-
-<Layout>
-  <Sidebar title="Token Analyzer - Files">
-    <FileDetails client:only />
-  </Sidebar>
-</Layout>

package/src/pages/token-analyzer/index.astro

@@ -1,11 +0,0 @@
----
-import { TokenAnalyzer } from '../../components/token-analyzer'
-import Layout from '../../layouts/Layout.astro'
-import Sidebar from '../../layouts/Sidebar.astro'
----
-
-<Layout>
-  <Sidebar title="Token Analyzer">
-    <TokenAnalyzer client:load />
-  </Sidebar>
-</Layout>

package/src/pages/token-analyzer/utility.astro

@@ -1,11 +0,0 @@
----
-import { UtilityDetails } from '../../components/analyzer/utility-details'
-import Layout from '../../layouts/Layout.astro'
-import Sidebar from '../../layouts/Sidebar.astro'
----
-
-<Layout>
-  <Sidebar title="Token Analyzer - Utilities">
-    <UtilityDetails client:only />
-  </Sidebar>
-</Layout>

package/styled-system/chunks/src__components__analyzer__category-utilities.css

@@ -1,118 +0,0 @@
-@layer utilities {
-
-  .p_4px_8px {
-    padding: 4px 8px
-    }
-
-  .\[\&_li\]\:cursor_pointer li {
-    cursor: pointer
-        }
-
-  .list-style_none {
-    list-style: none
-    }
-
-  .p_0 {
-    padding: var(--spacing-0)
-    }
-
-  .ml_auto {
-    margin-left: auto
-    }
-
-  .w_26px {
-    width: 26px
-    }
-
-  .ml_2 {
-    margin-left: var(--spacing-2)
-    }
-
-  .font_semibold {
-    font-weight: var(--font-weights-semibold)
-    }
-
-  .d_grid {
-    display: grid
-    }
-
-  .grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
-    grid-template-columns: repeat(2, minmax(0, 1fr))
-    }
-
-  .gap_4 {
-    gap: var(--spacing-4)
-    }
-
-  .col-span_span_2 {
-    grid-column: span 2
-    }
-
-  .flex_column {
-    flex-direction: column
-    }
-
-  .p_4 {
-    padding: var(--spacing-4)
-    }
-
-  .bg_card {
-    background: var(--colors-card)
-    }
-
-  .text_text {
-    color: var(--colors-text)
-    }
-
-  .rounded_md {
-    border-radius: var(--radii-md)
-    }
-
-  .d_inline-flex {
-    display: inline-flex
-    }
-
-  .items_center {
-    align-items: center
-    }
-
-  .opacity_0\.5 {
-    opacity: 0.5
-    }
-
-  .border-b_1px_solid_transparent {
-    border-bottom: 1px solid transparent
-    }
-
-  .cursor_pointer {
-    cursor: pointer
-    }
-
-  .d_flex {
-    display: flex
-    }
-
-  .flex-wrap_wrap {
-    flex-wrap: wrap
-    }
-
-  .gap_2 {
-    gap: var(--spacing-2)
-    }
-
-  .hover\:opacity_0\.6:is(:hover, [data-hover]) {
-    opacity: 0.6
-        }
-
-  .hover\:opacity_1:is(:hover, [data-hover]) {
-    opacity: 1
-        }
-
-  .hover\:border-b_black:is(:hover, [data-hover]) {
-    border-bottom-color: var(--colors-black)
-        }
-
-  .\[\&_li\]\:hover\:opacity_0\.8 li:is(:hover, [data-hover]) {
-    opacity: 0.8
-            }
-}