diff --git a/.changeset/quiet-kangaroos-cheer.md b/.changeset/quiet-kangaroos-cheer.md new file mode 100644 index 000000000..3d8cb2869 --- /dev/null +++ b/.changeset/quiet-kangaroos-cheer.md @@ -0,0 +1,5 @@ +--- +'@pandacss/studio': patch +--- + +Fix issue where throws "React is not defined error" diff --git a/packages/studio/package.json b/packages/studio/package.json index 4d600da55..098cd4062 100644 --- a/packages/studio/package.json +++ b/packages/studio/package.json @@ -41,6 +41,7 @@ "src", "public", "styled-system", + "tsconfig.json", "*.ts", "*.mjs" ], diff --git a/packages/studio/panda.config.ts b/packages/studio/panda.config.ts index 300eab232..edcda689d 100644 --- a/packages/studio/panda.config.ts +++ b/packages/studio/panda.config.ts @@ -55,41 +55,19 @@ export default { border: { value: { base: '{colors.neutral.300}', _dark: '{colors.neutral.700}' }, }, + accent: { + value: { base: '{colors.yellow.600}', _dark: '{colors.yellow.300}' }, + }, }, }, }, }, - 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', + fontSize: '0.84em', lineHeight: 'normal', fontWeight: 'normal', colorScheme: 'light dark', @@ -104,7 +82,7 @@ export default { body: { margin: 0, - minHeight: '100vh', + minHeight: '100dvh', }, }, } satisfies Config diff --git a/packages/studio/src/components/color-constrast.tsx b/packages/studio/src/components/color-constrast.tsx index 61b7360c6..09b71ceda 100644 --- a/packages/studio/src/components/color-constrast.tsx +++ b/packages/studio/src/components/color-constrast.tsx @@ -1,46 +1,51 @@ -import { useState } from 'react' +import * as React from 'react' import { HStack, Stack, VStack, panda } from '../../styled-system/jsx' import { getContrastPairs, getContrastRatio } from '../lib/color' -import context from '../lib/panda.context' -import { ErrorIcon, SuccessIcon } from './icons' +import * as context from '../lib/panda-context' +import { Select } from './input' +import { TestScore } from './test-score' import { TokenContent } from './token-content' import { TokenGroup } from './token-group' -function TestScore(props: { score: { WCAG_AA: boolean; WCAG_AAA: boolean }; size: 'regular' | 'large' }) { - const { score, size } = props +interface ColorSelectProps { + title: string + value: string + colors: { + label: string + value: string + }[] + onChange: (value: string) => void +} + +function ColorSelect(props: ColorSelectProps) { + const { title, colors, onChange, value } = props return ( - <> - - - {score.WCAG_AA ? : } - AA - - {size === 'regular' ? '4.5:1' : '3:1'} - - - - {score.WCAG_AAA ? : } - AAA - - {size === 'regular' ? '7:1' : '4.5:1'} - - + + {title} + + + ) } -export function ColorContrastChecker() { - const colorsMap = context.getCategory('colors') - const values = Array.from(colorsMap.values()) - - const colors = values - .filter((color) => !color.isConditional && !color.extensions.isVirtual) - .map((color) => ({ - label: color.extensions.prop, - value: color.value, - })) +export default function ColorContrastChecker() { + const colors = context.colors - const [foreground, setForeGround] = useState('#000000') - const [background, setBackground] = useState('#ffffff') + const [foreground, setForeGround] = React.useState('#000000') + const [background, setBackground] = React.useState('#ffffff') const activeForeground = (colors.find((col) => col.label === foreground)?.value || foreground) as string const activeBackground = (colors.find((col) => col.label === background)?.value || background) as string @@ -52,40 +57,8 @@ export function ColorContrastChecker() { - - - - - - + + ) { - return ( - - ) -} +export const ColorWrapper = panda('div', { + base: { + width: 'full', + height: '10', + borderRadius: 'sm', + position: 'relative', + overflow: 'hidden', + shadow: 'inset', + _before: { + content: "''", + position: 'absolute', + borderRadius: 'sm', + width: '100%', + height: '100%', + backgroundSize: '24px', + zIndex: '-1', + backgroundImage: 'check', + }, + }, +}) diff --git a/packages/studio/src/components/colors.tsx b/packages/studio/src/components/colors.tsx index 637eb08ea..be06c8513 100644 --- a/packages/studio/src/components/colors.tsx +++ b/packages/studio/src/components/colors.tsx @@ -1,3 +1,5 @@ +import type { Token } from '@pandacss/token-dictionary' +import * as React from 'react' import { Grid, HStack, Stack, panda } from '../../styled-system/jsx' import { ColorWrapper } from '../components/color-wrapper' import { TokenContent } from '../components/token-content' @@ -5,6 +7,7 @@ import { TokenGroup } from '../components/token-group' import { useColorDocs } from '../lib/use-color-docs' import { Input } from './input' import { SemanticColorDisplay } from './semantic-color' +import { StickyTop } from './sticky-top' const UNCATEGORIZED_ID = 'uncategorized' as const @@ -12,14 +15,14 @@ function getColorFromReference(reference: string) { return reference.match(/{colors\.(.*?)}/)?.[1] } -export function Colors() { +export default function Colors() { const { filterQuery, setFilterQuery, semanticTokens, hasResults, uncategorizedColors, categorizedColors } = useColorDocs() const renderSemanticTokens = () => { return semanticTokens.map(([name, colors], i) => { return ( - + { - return values?.map((color, i) => { - return ( - - - - {color.extensions.prop} - - {color.value} - - - - ) - }) - } return ( - + setFilterQuery(e.target.value)} placeholder="Filter tokens by text, property or value" /> - + + - {!!categorizedColors.length && - categorizedColors.map(([category, colors]) => ( -
- - {category} - + {categorizedColors.map(([category, colors]) => ( + + ))} + + + + {!!semanticTokens.length && {renderSemanticTokens()}} - - {renderColors(colors)} - -
- ))} - {!!uncategorizedColors?.length && ( -
- - {UNCATEGORIZED_ID} - - - {renderColors(uncategorizedColors)} - -
- )} - {!!semanticTokens.length && ( -
- - Semantic tokens - - - {renderSemanticTokens()} - -
- )} {!hasResults &&
No result found! 🐼
} ) } + +function PrimitiveColors(props: { values?: Token[] }) { + const { values = [] } = props + return values.map((color, i) => { + return ( + + + + {color.extensions.prop} + + {color.value} + + + + ) + }) +} + +function ColorGroup(props: { colors?: Token[]; title: string; children?: React.ReactNode }) { + const { children, colors, title } = props + + const isEmpty = colors == null || colors.length === 0 + + if (!children && isEmpty) return null + + return ( +
+ + {title} + + {children ? ( + + {children} + + ) : ( + + + + )} +
+ ) +} diff --git a/packages/studio/src/components/empty-state.tsx b/packages/studio/src/components/empty-state.tsx index d09201e40..92060b621 100644 --- a/packages/studio/src/components/empty-state.tsx +++ b/packages/studio/src/components/empty-state.tsx @@ -1,3 +1,4 @@ +import * as React from 'react' import { panda, Stack } from '../../styled-system/jsx' interface EmptyStateProps { @@ -6,13 +7,14 @@ interface EmptyStateProps { icon: React.ReactElement } -export function EmptyState({ title, children, icon }: EmptyStateProps) { +export function EmptyState(props: EmptyStateProps) { + const { title, children, icon } = props return ( {icon} {title} -

{children}

+
{children}
 ) diff --git a/packages/studio/src/components/font-family.tsx b/packages/studio/src/components/font-family.tsx index 16cbeb454..0a117c2b7 100644 --- a/packages/studio/src/components/font-family.tsx +++ b/packages/studio/src/components/font-family.tsx @@ -1,17 +1,17 @@ +import * as React from 'react' import { Flex, HStack, Square, Stack, panda } from '../../styled-system/jsx' -import context from '../lib/panda.context' +import * as context from '../lib/panda-context' -const fonts = context.getCategory('fonts') +const fonts = context.getTokens('fonts') const letters = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i)) const symbols = Array.from({ length: 10 }, (_, i) => String.fromCharCode(48 + i)) const specials = ['@', '#', '$', '%', '&', '!', '?', '+', '-'] export const FontFamily = () => { - const values = Array.from(fonts.values()) return ( - {values.map((font) => ( + {fonts.map((font) => ( diff --git a/packages/studio/src/components/font-tokens.tsx b/packages/studio/src/components/font-tokens.tsx index 47bf2ba01..89fec527b 100644 --- a/packages/studio/src/components/font-tokens.tsx +++ b/packages/studio/src/components/font-tokens.tsx @@ -1,50 +1,41 @@ -import { Fragment, useState } from 'react' +import type { Token } from '@pandacss/token-dictionary' +import * as React from 'react' import { HStack, panda, Stack } from '../../styled-system/jsx' import { TokenContent } from '../components/token-content' import { TokenGroup } from '../components/token-group' import { Input, Textarea } from './input' +import { StickyTop } from './sticky-top' interface FontTokensProps { text?: string largeText?: boolean token: string - fontTokens: Map + fontTokens: Token[] css?: any } -export function FontTokens(props: FontTokensProps) { +export default function FontTokens(props: FontTokensProps) { const { text: textProp = 'Hello World', largeText = false, token, fontTokens } = props - const [text, setText] = useState(textProp) - const values = Array.from(fontTokens.values()) + const [text, setText] = React.useState(textProp) + + const handleChange = (event: React.ChangeEvent) => { + setText(event.target.value) + } return ( - + {largeText ? ( -