chore: styled-system 깃허브에 추가

.github/workflows/deploy-chromatic.yml

@@ -26,14 +26,6 @@ jobs:
           version: 8
           run_install: false
 
-      - name: Install panda css
-        run: pnpm install -D @pandacss/dev
-        working-directory: apps/wow-docs
-
-      - name: Panda init
-        run: pnpm panda init
-        working-directory: apps/wow-docs
-
       - name: Install Dependency
         run: pnpm install -no-frozen-lockfile
         working-directory: packages/wow-ui

.gitignore

@@ -38,6 +38,5 @@ yarn-error.log*
 *.pem
 
 ## Panda
-styled-system
 styled-system-studio
 *storybook.log

apps/wow-docs/styled-system/css/conditions.js

@@ -0,0 +1,34 @@
+import { withoutSpace } from '../helpers.js';
+
+const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_starting,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,base"
+const conditions = new Set(conditionsStr.split(','))
+
+export function isCondition(value){
+  return conditions.has(value) || /^@|&|&$/.test(value)
+}
+
+const underscoreRegex = /^_/
+const conditionsSelectorRegex = /&|@/
+
+export function finalizeConditions(paths){
+  return paths.map((path) => {
+    if (conditions.has(path)){
+      return path.replace(underscoreRegex, '')
+    }
+
+    if (conditionsSelectorRegex.test(path)){
+      return `[${withoutSpace(path.trim())}]`
+    }
+
+    return path
+  })}
+
+  export function sortConditions(paths){
+    return paths.sort((a, b) => {
+      const aa = isCondition(a)
+      const bb = isCondition(b)
+      if (aa && !bb) return 1
+      if (!aa && bb) return -1
+      return 0
+    })
+  }

apps/wow-docs/styled-system/css/css.d.ts

@@ -0,0 +1,18 @@
+/* eslint-disable */
+import type { SystemStyleObject } from '../types/index';
+
+type Styles = SystemStyleObject | undefined | null | false
+
+interface CssFunction {
+  (styles: Styles): string
+  (styles: Styles[]): string
+  (...styles: Array<Styles | Styles[]>): string
+  (styles: Styles): string
+
+  raw: (styles: Styles) => string
+  raw: (styles: Styles[]) => string
+  raw: (...styles: Array<Styles | Styles[]>) => string
+  raw: (styles: Styles) => string
+}
+
+export declare const css: CssFunction;

apps/wow-docs/styled-system/css/cva.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+import type { RecipeCreatorFn } from '../types/recipe';
+
+export declare const cva: RecipeCreatorFn
+
+export type { RecipeVariant, RecipeVariantProps } from '../types/recipe';

apps/wow-docs/styled-system/css/cva.js

@@ -0,0 +1,87 @@
+import { compact, mergeProps, memo, splitProps, uniq } from '../helpers.js';
+import { css, mergeCss } from './css.js';
+
+const defaults = (conf) => ({
+  base: {},
+  variants: {},
+  defaultVariants: {},
+  compoundVariants: [],
+  ...conf,
+})
+
+export function cva(config) {
+  const { base, variants, defaultVariants, compoundVariants } = defaults(config)
+  const getVariantProps = (variants) => ({ ...defaultVariants, ...compact(variants) })
+
+  function resolve(props = {}) {
+    const computedVariants = getVariantProps(props)
+    let variantCss = { ...base }
+    for (const [key, value] of Object.entries(computedVariants)) {
+      if (variants[key]?.[value]) {
+        variantCss = mergeCss(variantCss, variants[key][value])
+      }
+    }
+    const compoundVariantCss = getCompoundVariantCss(compoundVariants, computedVariants)
+    return mergeCss(variantCss, compoundVariantCss)
+  }
+
+  function merge(__cva) {
+    const override = defaults(__cva.config)
+    const variantKeys = uniq(__cva.variantKeys, Object.keys(variants))
+    return cva({
+      base: mergeCss(base, override.base),
+      variants: Object.fromEntries(
+        variantKeys.map((key) => [key, mergeCss(variants[key], override.variants[key])]),
+      ),
+      defaultVariants: mergeProps(defaultVariants, override.defaultVariants),
+      compoundVariants: [...compoundVariants, ...override.compoundVariants],
+    })
+  }
+
+  function cvaFn(props) {
+    return css(resolve(props))
+  }
+
+  const variantKeys = Object.keys(variants)
+
+  function splitVariantProps(props) {
+    return splitProps(props, variantKeys)
+  }
+
+  const variantMap = Object.fromEntries(Object.entries(variants).map(([key, value]) => [key, Object.keys(value)]))
+
+  return Object.assign(memo(cvaFn), {
+    __cva__: true,
+    variantMap,
+    variantKeys,
+    raw: resolve,
+    config,
+    merge,
+    splitVariantProps,
+    getVariantProps
+  })
+}
+
+export function getCompoundVariantCss(compoundVariants, variantMap) {
+  let result = {}
+  compoundVariants.forEach((compoundVariant) => {
+    const isMatching = Object.entries(compoundVariant).every(([key, value]) => {
+      if (key === 'css') return true
+
+      const values = Array.isArray(value) ? value : [value]
+      return values.some((value) => variantMap[key] === value)
+    })
+
+    if (isMatching) {
+      result = mergeCss(result, compoundVariant.css)
+    }
+  })
+
+  return result
+}
+
+export function assertCompoundVariant(name, compoundVariants, variants, prop) {
+  if (compoundVariants.length > 0 && typeof variants?.[prop] === 'object') {
+    throw new Error(`[recipe:${name}:${prop}] Conditions are not supported when using compound variants.`)
+  }
+}

apps/wow-docs/styled-system/css/cx.d.ts

@@ -0,0 +1,5 @@
+/* eslint-disable */
+type Argument = string | boolean | null | undefined
+
+/** Conditionally join classNames into a single string */
+export declare function cx(...args: Argument[]): string

apps/wow-docs/styled-system/css/cx.js

@@ -0,0 +1,15 @@
+function cx() {
+  let str = '',
+    i = 0,
+    arg
+
+  for (; i < arguments.length; ) {
+    if ((arg = arguments[i++]) && typeof arg === 'string') {
+      str && (str += ' ')
+      str += arg
+    }
+  }
+  return str
+}
+
+export { cx }

apps/wow-docs/styled-system/css/index.d.ts

@@ -0,0 +1,5 @@
+/* eslint-disable */
+export * from './css';
+export * from './cx';
+export * from './cva';
+export * from './sva';

apps/wow-docs/styled-system/css/index.js

@@ -0,0 +1,4 @@
+export * from './css.js';
+export * from './cx.js';
+export * from './cva.js';
+export * from './sva.js';

apps/wow-docs/styled-system/css/sva.d.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import type { SlotRecipeCreatorFn } from '../types/recipe';
+
+export declare const sva: SlotRecipeCreatorFn

apps/wow-docs/styled-system/css/sva.js

@@ -0,0 +1,41 @@
+import { compact, getSlotRecipes, memo, splitProps } from '../helpers.js';
+import { cva } from './cva.js';
+import { cx } from './cx.js';
+
+const slotClass = (className, slot) => className + '__' + slot
+
+export function sva(config) {
+  const slots = Object.entries(getSlotRecipes(config)).map(([slot, slotCva]) => [slot, cva(slotCva)])
+  const defaultVariants = config.defaultVariants ?? {}
+
+  function svaFn(props) {
+    const result = slots.map(([slot, cvaFn]) => [slot, cx(cvaFn(props), config.className && slotClass(config.className, slot))])
+    return Object.fromEntries(result)
+  }
+
+  function raw(props) {
+    const result = slots.map(([slot, cvaFn]) => [slot, cvaFn.raw(props)])
+    return Object.fromEntries(result)
+  }
+
+  const variants = config.variants ?? {};
+  const variantKeys = Object.keys(variants);
+
+  function splitVariantProps(props) {
+    return splitProps(props, variantKeys);
+  }
+  const getVariantProps = (variants) => ({ ...(defaultVariants || {}), ...compact(variants) })
+
+  const variantMap = Object.fromEntries(
+    Object.entries(variants).map(([key, value]) => [key, Object.keys(value)])
+  );
+
+  return Object.assign(memo(svaFn), {
+    __cva__: false,
+    raw,
+    variantMap,
+    variantKeys,
+    splitVariantProps,
+    getVariantProps,
+  })
+}