From 715c0176d80462902f19c18315b3af0bbd81e879 Mon Sep 17 00:00:00 2001 From: nikoloza Date: Sat, 1 Feb 2025 21:49:21 +0400 Subject: [PATCH 01/12] initial decoupling and cleanup --- packages/css-in-props/src/index.js | 3 +- packages/css-in-props/src/props/animation.js | 6 +- packages/css-in-props/src/props/block.js | 20 +- .../css-in-props/src/{ => props}/defaults.js | 0 packages/css-in-props/src/props/index.js | 21 + packages/css-in-props/src/props/misc.js | 2 +- packages/css-in-props/src/props/theme.js | 12 - packages/css-in-props/src/registry.js | 36 -- packages/css-in-props/src/transform.js | 6 +- packages/scratch/src/transforms/index.js | 7 + packages/uikit/Atoms/Animation.js | 57 --- packages/uikit/Atoms/Block.js | 362 +----------------- packages/uikit/Atoms/Direction.js | 10 - packages/uikit/Atoms/Interaction.js | 17 - packages/uikit/Atoms/InteractiveComponent.js | 4 +- packages/uikit/Atoms/Media.js | 42 +- packages/uikit/Atoms/Overflow.js | 19 - packages/uikit/Atoms/Position.js | 42 -- packages/uikit/Atoms/Pseudo.js | 7 - packages/uikit/Atoms/Shape/index.js | 18 +- packages/uikit/Atoms/Shape/style.js | 4 +- packages/uikit/Atoms/Text.js | 37 -- packages/uikit/Atoms/Theme.js | 191 +-------- packages/uikit/Atoms/Timing.js | 39 -- packages/uikit/Atoms/Transform.js | 12 - packages/uikit/Atoms/XYZ.js | 11 - packages/uikit/Atoms/index.js | 9 - packages/uikit/Box/index.js | 10 +- 28 files changed, 88 insertions(+), 916 deletions(-) rename packages/css-in-props/src/{ => props}/defaults.js (100%) delete mode 100644 packages/css-in-props/src/registry.js delete mode 100644 packages/uikit/Atoms/Animation.js delete mode 100644 packages/uikit/Atoms/Direction.js delete mode 100644 packages/uikit/Atoms/Interaction.js delete mode 100644 packages/uikit/Atoms/Overflow.js delete mode 100644 packages/uikit/Atoms/Position.js delete mode 100644 packages/uikit/Atoms/Pseudo.js delete mode 100644 packages/uikit/Atoms/Timing.js delete mode 100644 packages/uikit/Atoms/Transform.js delete mode 100644 packages/uikit/Atoms/XYZ.js diff --git a/packages/css-in-props/src/index.js b/packages/css-in-props/src/index.js index 59040fb1f..92c099fe2 100644 --- a/packages/css-in-props/src/index.js +++ b/packages/css-in-props/src/index.js @@ -3,7 +3,8 @@ export * from './transform' export * from './set' export * from './emotion' -export * from './registry' +export * from './props' +export * from './props/defaults' export const exetuteClassPerComponent = (component, element) => { const classObj = {} diff --git a/packages/css-in-props/src/props/animation.js b/packages/css-in-props/src/props/animation.js index 642033eae..7eaa06847 100644 --- a/packages/css-in-props/src/props/animation.js +++ b/packages/css-in-props/src/props/animation.js @@ -27,12 +27,12 @@ export const ANIMATION_PROPS = { animationName: applyAnimationProps(el.props.animationName, el) }), animationDuration: ({ props, deps }) => ({ - animationDuration: deps.getTimingByKey(props.animationDuration).timing + animationDuration: getTimingByKey(props.animationDuration).timing }), animationDelay: ({ props, deps }) => ({ - animationDelay: deps.getTimingByKey(props.animationDelay).timing + animationDelay: getTimingByKey(props.animationDelay).timing }), animationTimingFunction: ({ props, deps }) => ({ - animationTimingFunction: deps.getTimingFunction(props.animationTimingFunction) + animationTimingFunction: getTimingFunction(props.animationTimingFunction) }) } diff --git a/packages/css-in-props/src/props/block.js b/packages/css-in-props/src/props/block.js index c1dfba492..0521b2ebb 100644 --- a/packages/css-in-props/src/props/block.js +++ b/packages/css-in-props/src/props/block.js @@ -5,6 +5,7 @@ import { isUndefined, isString } from '@domql/utils' import { getSpacingBasedOnRatio, transformSize, + transformBorderRadius, transformSizeRatio, transfromGap } from '@symbo.ls/scratch' @@ -112,10 +113,17 @@ export const BLOCK_PROPS = { ...transformSize('paddingBlockEnd', paddingBlockEnd || paddingBlockStart) } }, - paddingInlineStart: ({ props }) => transformSizeRatio('paddingInlineStart', props), - paddingInlineEnd: ({ props }) => transformSizeRatio('paddingInlineEnd', props), - paddingBlockStart: ({ props }) => transformSizeRatio('paddingBlockStart', props), - paddingBlockEnd: ({ props }) => transformSizeRatio('paddingBlockEnd', props), + // Traditional directional padding + paddingTop: ({ props }) => transformSizeRatio('paddingBlockStart', props), + paddingBottom: ({ props }) => transformSizeRatio('paddingBlockEnd', props), + paddingLeft: ({ props }) => transformSizeRatio('paddingInlineStart', props), + paddingRight: ({ props }) => transformSizeRatio('paddingInlineEnd', props), + + // Logical properties (for reference) + paddingBlockStart: ({ props }) => transformSizeRatio('paddingBlockStart', props), // maps to top + paddingBlockEnd: ({ props }) => transformSizeRatio('paddingBlockEnd', props), // maps to bottom + paddingInlineStart: ({ props }) => transformSizeRatio('paddingInlineStart', props), // maps to left + paddingInlineEnd: ({ props }) => transformSizeRatio('paddingInlineEnd', props), // maps to right margin: ({ props }) => transformSizeRatio('margin', props), marginInline: ({ props }) => { @@ -169,6 +177,8 @@ export const BLOCK_PROPS = { alignItems, justifyContent } - } + }, + round: ({ props, key, deps, ...el }) => transformBorderRadius(props.round || props.borderRadius, props, 'round'), + borderRadius: ({ props, key, deps, ...el }) => transformBorderRadius(props.borderRadius || props.round, props, 'borderRadius') } diff --git a/packages/css-in-props/src/defaults.js b/packages/css-in-props/src/props/defaults.js similarity index 100% rename from packages/css-in-props/src/defaults.js rename to packages/css-in-props/src/props/defaults.js diff --git a/packages/css-in-props/src/props/index.js b/packages/css-in-props/src/props/index.js index 69a6a8afc..0e3143031 100644 --- a/packages/css-in-props/src/props/index.js +++ b/packages/css-in-props/src/props/index.js @@ -1,5 +1,13 @@ 'use strict' +import { ANIMATION_PROPS } from './animation' +import { BLOCK_PROPS } from './block' +import { FONT_PROPS } from './font' +import { MISC_PROPS } from './misc' +import { POSITION_PROPS } from './position' +import { THEME_PROPS } from './theme' +import { TIMING_PROPS } from './timing' + export * from './animation' export * from './block' export * from './font' @@ -7,3 +15,16 @@ export * from './misc' export * from './position' export * from './theme' export * from './timing' + +export const CSS_PROPS_REGISTRY = { + ...ANIMATION_PROPS, + ...BLOCK_PROPS, + ...FONT_PROPS, + ...MISC_PROPS, + ...MISC_PROPS, + ...POSITION_PROPS, + ...THEME_PROPS, + ...TIMING_PROPS +} + +export default CSS_PROPS_REGISTRY diff --git a/packages/css-in-props/src/props/misc.js b/packages/css-in-props/src/props/misc.js index 6b7cc2a19..e9a23192c 100644 --- a/packages/css-in-props/src/props/misc.js +++ b/packages/css-in-props/src/props/misc.js @@ -1,7 +1,7 @@ 'use strict' export const MISC_PROPS = { - overflow: ({ props, deps }) => !deps.isUndefined(props.overflow) && ({ + overflow: ({ props }) => ({ overflow: props.overflow, scrollBehavior: 'smooth' }), diff --git a/packages/css-in-props/src/props/theme.js b/packages/css-in-props/src/props/theme.js index 869619104..19edf6e43 100644 --- a/packages/css-in-props/src/props/theme.js +++ b/packages/css-in-props/src/props/theme.js @@ -72,18 +72,6 @@ export const THEME_PROPS = { }) }, - backgroundSize: ({ props }) => ({ - backgroundSize: props.backgroundSize - }), - - backgroundPosition: ({ props }) => ({ - backgroundPosition: props.backgroundPosition - }), - - backgroundRepeat: ({ props }) => ({ - backgroundRepeat: props.backgroundRepeat - }), - textStroke: ({ props }) => ({ WebkitTextStroke: transformTextStroke(props.textStroke) }), diff --git a/packages/css-in-props/src/registry.js b/packages/css-in-props/src/registry.js deleted file mode 100644 index 6fa8dd028..000000000 --- a/packages/css-in-props/src/registry.js +++ /dev/null @@ -1,36 +0,0 @@ -'use strict' - -import { mergeArray } from '@domql/utils' -import * as preprocs from './props' - -import { - Shape, - Position, - Theme, - Block, - Text, - Overflow, - Timing, - Transform, - Media, - Interaction, - XYZ, - Animation -} from '@symbo.ls/atoms' - -export const CSS_PROPS_REGISTRY = mergeArray([ - Shape, - Position, - Theme, - Block, - Text, - Overflow, - Timing, - Transform, - Media, - Interaction, - XYZ, - Animation -]).class - -export const CSS_PREPROCS_DEFAULTS = mergeArray(Object.values(preprocs)) diff --git a/packages/css-in-props/src/transform.js b/packages/css-in-props/src/transform.js index c69e63d3a..68adce0cd 100644 --- a/packages/css-in-props/src/transform.js +++ b/packages/css-in-props/src/transform.js @@ -3,8 +3,8 @@ import { merge, deepMerge, isFunction, isObject, isArray } from '@domql/utils' import { keySetters } from '@symbo.ls/atoms' -import { CSS_PREPROCS_DEFAULTS } from './registry' -import { DEFAULT_CSS_PROPERTIES_LIST } from './defaults' +import { CSS_PROPS_REGISTRY } from './props' +import { DEFAULT_CSS_PROPERTIES_LIST } from './props/defaults' export const transformClassname = ( element, @@ -56,7 +56,7 @@ export const extractCSSfromProps = (element) => { continue } - const preprop = CSS_PREPROCS_DEFAULTS[key] + const preprop = CSS_PROPS_REGISTRY[key] if (preprop) { // const stack = hasCSS(element) const stack = preprop(element, element.state, element.context) diff --git a/packages/scratch/src/transforms/index.js b/packages/scratch/src/transforms/index.js index e4ad3ad80..75e3cc682 100644 --- a/packages/scratch/src/transforms/index.js +++ b/packages/scratch/src/transforms/index.js @@ -144,3 +144,10 @@ export const transformSizeRatio = (propertyName, props) => { ratio: true }) } + +export const transformBorderRadius = (radius, props, propertyName) => { + if (!isString(radius)) return + return { + borderRadius: radius.split(' ').map((v, k) => getSpacingBasedOnRatio(props, propertyName, v)[propertyName]).join(' ') + } +} diff --git a/packages/uikit/Atoms/Animation.js b/packages/uikit/Atoms/Animation.js deleted file mode 100644 index 34c2dc12f..000000000 --- a/packages/uikit/Atoms/Animation.js +++ /dev/null @@ -1,57 +0,0 @@ -'use strict' - -import { getTimingByKey, getTimingFunction } from '@symbo.ls/scratch' -import { isObject } from '@domql/utils' -import { emotion } from '@symbo.ls/emotion' - -const applyAnimationProps = (animation, element) => { - const { emotion: ctxEmotion } = element.context - const { keyframes } = ctxEmotion || emotion - if (isObject(animation)) return { animationName: keyframes(animation) } - const { ANIMATION } = element.context && element.context.designSystem - const record = ANIMATION[animation] - return keyframes(record) -} - -const props = { - animation: (el) => el.props.animation && { - animationName: el.deps.applyAnimationProps(el.props.animation, el), - animationDuration: el.deps.getTimingByKey(el.props.animationDuration || 'A').timing, - animationDelay: el.deps.getTimingByKey(el.props.animationDelay || '0s').timing, - animationTimingFunction: el.deps.getTimingFunction(el.props.animationTimingFunction || 'ease'), - animationFillMode: el.props.animationFillMode || 'both', - animationPlayState: el.props.animationPlayState, - animationDirection: el.props.animationDirection - }, - animationName: (el) => el.props.animationName && { - animationName: el.deps.applyAnimationProps(el.props.animationName, el) - }, - animationDuration: ({ props, deps }) => props.animationDuration && ({ - animationDuration: deps.getTimingByKey(props.animationDuration).timing - }), - animationDelay: ({ props, deps }) => props.animationDelay && ({ - animationDelay: deps.getTimingByKey(props.animationDelay).timing - }), - animationTimingFunction: ({ props, deps }) => props.animationTimingFunction && ({ - animationTimingFunction: deps.getTimingFunction(props.animationTimingFunction) - }) -} - -export const Animation = { - deps: { isObject, getTimingByKey, getTimingFunction, applyAnimationProps }, - class: { - ...props, - animationFillMode: ({ props }) => props.animationFillMode && ({ - animationFillMode: props.animationFillMode - }), - animationPlayState: ({ props }) => props.animationPlayState && ({ - animationPlayState: props.animationPlayState - }), - animationIterationCount: ({ props }) => props.animationIterationCount && ({ - animationIterationCount: props.animationIterationCount || 1 - }), - animationDirection: ({ props }) => props.animationDirection && ({ - animationDirection: props.animationDirection - }) - } -} diff --git a/packages/uikit/Atoms/Block.js b/packages/uikit/Atoms/Block.js index 27e947d75..94582edd2 100644 --- a/packages/uikit/Atoms/Block.js +++ b/packages/uikit/Atoms/Block.js @@ -1,280 +1,6 @@ 'use strict' -import { isUndefined, isString } from '@domql/utils' - -import { - getSpacingBasedOnRatio, - getSpacingByKey, - transformSize, - transformSizeRatio, - transfromGap -} from '@symbo.ls/scratch' - -const props = { - show: (el, s, ctx) => !!(ctx.utils.exec(el.props.show, el, s) === false) && ({ - display: 'none !important' - }), - - hide: (el, s, ctx) => !!ctx.utils.exec(el.props.hide, el, s) && ({ - display: 'none !important' - }), - - height: ({ props, deps }) => deps.transformSizeRatio('height', props), - width: ({ props, deps }) => deps.transformSizeRatio('width', props), - - boxSizing: ({ props, deps }) => !deps.isUndefined(props.boxSizing) - ? ({ boxSizing: props.boxSizing }) - : { boxSizing: 'border-box' }, - - boxSize: ({ props, deps }) => { - if (!deps.isString(props.boxSize)) return - const [height, width] = props.boxSize.split(' ') - return { - ...deps.transformSize('height', height), - ...deps.transformSize('width', width || height) - } - }, - - inlineSize: ({ props, deps }) => deps.transformSizeRatio('inlineSize', props), - blockSize: ({ props, deps }) => deps.transformSizeRatio('blockSize', props), - - minWidth: ({ props, deps }) => deps.transformSizeRatio('minWidth', props), - maxWidth: ({ props, deps }) => deps.transformSizeRatio('maxWidth', props), - widthRange: ({ props, deps }) => { - if (!deps.isString(props.widthRange)) return - const [minWidth, maxWidth] = props.widthRange.split(' ') - return { - ...deps.transformSize('minWidth', minWidth), - ...deps.transformSize('maxWidth', maxWidth || minWidth) - } - }, - - minHeight: ({ props, deps }) => deps.transformSizeRatio('minHeight', props), - maxHeight: ({ props, deps }) => deps.transformSizeRatio('maxHeight', props), - heightRange: ({ props, deps }) => { - if (!deps.isString(props.heightRange)) return - const [minHeight, maxHeight] = props.heightRange.split(' ') - return { - ...deps.transformSize('minHeight', minHeight), - ...deps.transformSize('maxHeight', maxHeight || minHeight) - } - }, - - size: ({ props, deps }) => { - if (!deps.isString(props.size)) return - const [inlineSize, blockSize] = props.size.split(' ') - return { - ...deps.transformSizeRatio('inlineSize', inlineSize), - ...deps.transformSizeRatio('blockSize', blockSize || inlineSize) - } - }, - - minBlockSize: ({ props, deps }) => deps.transformSizeRatio('minBlockSize', props), - minInlineSize: ({ props, deps }) => deps.transformSizeRatio('minInlineSize', props), - - maxBlockSize: ({ props, deps }) => deps.transformSizeRatio('maxBlockSize', props), - maxInlineSize: ({ props, deps }) => deps.transformSizeRatio('maxInlineSize', props), - - minSize: ({ props, deps }) => { - if (!deps.isString(props.minSize)) return - const [minInlineSize, minBlockSize] = props.minSize.split(' ') - return { - ...deps.transformSize('minInlineSize', minInlineSize), - ...deps.transformSize('minBlockSize', minBlockSize || minInlineSize) - } - }, - - maxSize: ({ props, deps }) => { - if (!deps.isString(props.maxSize)) return - const [maxInlineSize, maxBlockSize] = props.maxSize.split(' ') - return { - ...deps.transformSize('maxInlineSize', maxInlineSize), - ...deps.transformSize('maxBlockSize', maxBlockSize || maxInlineSize) - } - }, - - borderWidth: ({ props, deps }) => deps.transformSizeRatio('borderWidth', props), - - padding: ({ props, deps }) => deps.transformSizeRatio('padding', props), - scrollPadding: ({ props, deps }) => deps.transformSizeRatio('scrollPadding', props), - paddingInline: ({ props, deps }) => { - if (!deps.isString(props.paddingInline)) return - const [paddingInlineStart, paddingInlineEnd] = props.paddingInline.split(' ') - return { - ...deps.transformSize('paddingInlineStart', paddingInlineStart), - ...deps.transformSize('paddingInlineEnd', paddingInlineEnd || paddingInlineStart) - } - }, - paddingBlock: ({ props, deps }) => { - if (!deps.isString(props.paddingBlock)) return - const [paddingBlockStart, paddingBlockEnd] = props.paddingBlock.split(' ') - return { - ...deps.transformSize('paddingBlockStart', paddingBlockStart), - ...deps.transformSize('paddingBlockEnd', paddingBlockEnd || paddingBlockStart) - } - }, - paddingInlineStart: ({ props, deps }) => deps.transformSizeRatio('paddingInlineStart', props), - paddingInlineEnd: ({ props, deps }) => deps.transformSizeRatio('paddingInlineEnd', props), - paddingBlockStart: ({ props, deps }) => deps.transformSizeRatio('paddingBlockStart', props), - paddingBlockEnd: ({ props, deps }) => deps.transformSizeRatio('paddingBlockEnd', props), - - margin: ({ props, deps }) => deps.transformSizeRatio('margin', props), - marginInline: ({ props, deps }) => { - if (!deps.isString(props.marginInline)) return - const [marginInlineStart, marginInlineEnd] = props.marginInline.split(' ') - return { - ...deps.transformSize('marginInlineStart', marginInlineStart), - ...deps.transformSize('marginInlineEnd', marginInlineEnd || marginInlineStart) - } - }, - marginBlock: ({ props, deps }) => { - if (!deps.isString(props.marginBlock)) return - const [marginBlockStart, marginBlockEnd] = props.marginBlock.split(' ') - return { - ...deps.transformSize('marginBlockStart', marginBlockStart), - ...deps.transformSize('marginBlockEnd', marginBlockEnd || marginBlockStart) - } - }, - marginInlineStart: ({ props, deps }) => deps.transformSizeRatio('marginInlineStart', props), - marginInlineEnd: ({ props, deps }) => deps.transformSizeRatio('marginInlineEnd', props), - marginBlockStart: ({ props, deps }) => deps.transformSizeRatio('marginBlockStart', props), - marginBlockEnd: ({ props, deps }) => deps.transformSizeRatio('marginBlockEnd', props), - - gap: ({ props, deps }) => !deps.isUndefined(props.gap) && ({ - gap: transfromGap(props.gap) - }), - - columnGap: ({ props, deps }) => !deps.isUndefined(props.columnGap) ? deps.getSpacingBasedOnRatio(props, 'columnGap') : null, - rowGap: ({ props, deps }) => !deps.isUndefined(props.rowGap) ? deps.getSpacingBasedOnRatio(props, 'rowGap') : null, - - flexWrap: ({ props, deps }) => !deps.isUndefined(props.flexWrap) && ({ - display: 'flex', - flexFlow: (props.flexFlow || 'row').split(' ')[0] + ' ' + props.flexWrap - }), - flexFlow: ({ props, deps }) => { - const { flexFlow, reverse } = props - if (!deps.isString(flexFlow)) return - let [direction, wrap] = (flexFlow || 'row').split(' ') - if (flexFlow.startsWith('x') || flexFlow === 'row') direction = 'row' - if (flexFlow.startsWith('y') || flexFlow === 'column') direction = 'column' - return { - display: 'flex', - flexFlow: (direction || '') + (!direction.includes('-reverse') && reverse ? '-reverse' : '') + ' ' + (wrap || '') - } - }, - flexAlign: ({ props, deps }) => { - if (!deps.isString(props.flexAlign)) return - const [alignItems, justifyContent] = props.flexAlign.split(' ') - return { - display: 'flex', - alignItems, - justifyContent - } - } - -} - export const Block = { - deps: { - getSpacingBasedOnRatio, - getSpacingByKey, - transfromGap, - transformSizeRatio, - transformSize, - isUndefined, - isString - }, - - class: { - ...props, - - display: ({ props, deps }) => !deps.isUndefined(props.display) && ({ - display: props.display - }), - - direction: ({ props, deps }) => !deps.isUndefined(props.direction) && ({ - direction: props.direction - }), - - objectFit: ({ props, deps }) => !deps.isUndefined(props.objectFit) && ({ - objectFit: props.objectFit - }), - - aspectRatio: ({ props, deps }) => !deps.isUndefined(props.aspectRatio) && ({ - aspectRatio: props.aspectRatio - }), - - gridArea: ({ props, deps }) => props.gridArea && ({ gridArea: props.gridArea }), - - float: ({ props, deps }) => !deps.isUndefined(props.float) && ({ - float: props.float - }), - - flex: ({ props, deps }) => !deps.isUndefined(props.flex) && ({ - flex: props.flex - }), - flexDirection: ({ props, deps }) => !deps.isUndefined(props.flexDirection) && ({ - flexDirection: props.flexDirection - }), - alignItems: ({ props, deps }) => !deps.isUndefined(props.alignItems) && ({ - alignItems: props.alignItems - }), - alignContent: ({ props, deps }) => !deps.isUndefined(props.alignContent) && ({ - alignContent: props.alignContent - }), - justifyContent: ({ props, deps }) => !deps.isUndefined(props.justifyContent) && ({ - justifyContent: props.justifyContent - }), - justifyItems: ({ props, deps }) => !deps.isUndefined(props.justifyItems) && ({ - justifyItems: props.justifyItems - }), - alignSelf: ({ props, deps }) => !deps.isUndefined(props.alignSelf) && ({ - alignSelf: props.alignSelf - }), - order: ({ props, deps }) => !deps.isUndefined(props.order) && ({ - order: props.order - }), - - gridColumn: ({ props, deps }) => !deps.isUndefined(props.gridColumn) && ({ - gridColumn: props.gridColumn - }), - gridColumnStart: ({ props, deps }) => !deps.isUndefined(props.gridColumnStart) && ({ - gridColumnStart: props.gridColumnStart - }), - gridRow: ({ props, deps }) => !deps.isUndefined(props.gridRow) && ({ - gridRow: props.gridRow - }), - gridRowStart: ({ props, deps }) => !deps.isUndefined(props.gridRowStart) && ({ - gridRowStart: props.gridRowStart - }), - - resize: ({ props, deps }) => !deps.isUndefined(props.resize) && ({ - resize: props.resize - }), - - verticalAlign: ({ props, deps }) => !deps.isUndefined(props.verticalAlign) && ({ - verticalAlign: props.verticalAlign - }), - - columns: ({ props, deps }) => !deps.isUndefined(props.columns) && ({ - columns: props.columns - }), - columnRule: ({ props, deps }) => !deps.isUndefined(props.columnRule) && ({ - columnRule: props.columnRule - }), - columnWidth: ({ props, deps }) => !deps.isUndefined(props.columnWidth) && ({ - columnWidth: props.columnWidth - }), - columnSpan: ({ props, deps }) => !deps.isUndefined(props.columnSpan) && ({ - columnSpan: props.columnSpan - }), - columnFill: ({ props, deps }) => !deps.isUndefined(props.columnFill) && ({ - columnFill: props.columnFill - }), - columnCount: ({ props, deps }) => !deps.isUndefined(props.columnCount) && ({ - columnCount: props.columnCount - }) - } } export const Hr = { @@ -297,92 +23,6 @@ export const Ol = { export const Gutter = { props: { - size: 'C1' + boxSize: 'C1' } } - -// alt approach -// blockProps: (el, s, ctx) => { -// const { props, deps } = el -// const styles = {} - -// // Utility to conditionally add a style -// const addStyle = (key, value) => { -// if (deps.isObject(value)) deps.merge(styles, value) -// else if (value) styles[key] = value -// } - -// // Box sizing -// addStyle('boxSizing', !deps.isUndefined(props.boxSizing) ? props.boxSizing : 'border-box') - -// // Display -// addStyle('display', !deps.isUndefined(props.display) ? props.display : undefined) - -// // Show/Hide -// if (ctx.utils.exec(el.props.show, el, s) === false) { -// addStyle('display', 'none !important') -// } -// if (ctx.utils.exec(el.props.hide, el, s)) { -// addStyle('display', 'none !important') -// } - -// // Size transformations -// const sizeKeys = ['height', 'width', 'inlineSize', 'blockSize', 'minWidth', 'maxWidth', 'minHeight', 'maxHeight', 'minBlockSize', 'maxBlockSize', 'minInlineSize', 'maxInlineSize'] -// sizeKeys.forEach(key => addStyle(key, deps.transformSizeRatio(key, props))) - -// // Box size -// if (deps.isString(props.boxSize)) { -// const [height, width] = props.boxSize.split(' ') -// Object.assign(styles, deps.transformSize('height', height)) -// Object.assign(styles, deps.transformSize('width', width || height)) -// } - -// // Size ranges -// const rangeKeys = ['widthRange', 'heightRange', 'minSize', 'maxSize'] -// rangeKeys.forEach(key => { -// if (deps.isString(props[key])) { -// const [min, max] = props[key].split(' ') -// addStyle(`min${key.charAt(0).toUpperCase() + key.slice(1)}`, deps.transformSize('min' + key, min)) -// addStyle(`max${key.charAt(0).toUpperCase() + key.slice(1)}`, deps.transformSize('max' + key, max || min)) -// } -// }) - -// // Direction, objectFit, aspectRatio, etc. -// const simpleProps = ['direction', 'objectFit', 'aspectRatio', 'float', 'flex', 'flexDirection', 'alignItems', 'alignContent', 'justifyContent', 'justifyItems', 'alignSelf', 'order', 'resize', 'verticalAlign', 'columns', 'columnRule', 'columnWidth', 'columnSpan', 'columnFill', 'columnCount'] -// simpleProps.forEach(key => addStyle(key, !deps.isUndefined(props[key]) ? props[key] : undefined)) - -// // Flex and grid specific properties -// if (props.flexWrap) { -// addStyle('flexWrap', props.flexWrap) -// } -// if (deps.isString(props.flexFlow)) { -// let [direction, wrap] = props.flexFlow.split(' ') -// direction = direction.startsWith('x') || direction === 'row' ? 'row' : 'column' -// addStyle('flexFlow', direction + ' ' + (wrap || '')) -// } - -// if (deps.isString(props.flexAlign)) { -// const [alignItems, justifyContent] = props.flexAlign.split(' ') -// addStyle('alignItems', alignItems) -// addStyle('justifyContent', justifyContent) -// } - -// // Gap properties -// if (!deps.isUndefined(props.gap)) { -// addStyle('gap', transfromGap(props.gap)) -// } -// if (props.columnGap) { -// addStyle('columnGap', deps.getSpacingBasedOnRatio(props, 'columnGap')) -// } -// if (props.rowGap) { -// addStyle('rowGap', deps.getSpacingBasedOnRatio(props, 'rowGap')) -// } - -// // Grid properties -// const gridProps = ['gridColumn', 'gridColumnStart', 'gridRow', 'gridRowStart'] -// gridProps.forEach(key => addStyle(key, !deps.isUndefined(props[key]) ? props[key] : undefined)) - -// console.log(styles) - -// return styles -// } diff --git a/packages/uikit/Atoms/Direction.js b/packages/uikit/Atoms/Direction.js deleted file mode 100644 index 6cfd480a1..000000000 --- a/packages/uikit/Atoms/Direction.js +++ /dev/null @@ -1,10 +0,0 @@ -'use strict' - -export const Direction = { - props: { - direction: 'ltr' - }, - class: { - direction: ({ props }) => ({ direction: props.direction }) - } -} diff --git a/packages/uikit/Atoms/Interaction.js b/packages/uikit/Atoms/Interaction.js deleted file mode 100644 index bb894bba6..000000000 --- a/packages/uikit/Atoms/Interaction.js +++ /dev/null @@ -1,17 +0,0 @@ -'use strict' - -export const Interaction = { - class: { - userSelect: ({ props }) => props.userSelect && ({ userSelect: props.userSelect }), - pointerEvents: ({ props }) => props.pointerEvents && ({ pointerEvents: props.pointerEvents }), - cursor: (el, s, ctx) => { - let val = el.props.cursor - if (!val) return - - const file = ctx.files && ctx.files[val] - if (file && file.content) val = `url(${file.content.src})` - - return ({ cursor: val }) - } - } -} diff --git a/packages/uikit/Atoms/InteractiveComponent.js b/packages/uikit/Atoms/InteractiveComponent.js index 1513c3ca0..1047735a6 100644 --- a/packages/uikit/Atoms/InteractiveComponent.js +++ b/packages/uikit/Atoms/InteractiveComponent.js @@ -31,7 +31,7 @@ export const Hoverable = { } export const Clickable = { - extend: Hoverable, + extend: 'Hoverable', props: { ':active': { opacity: 1, @@ -60,7 +60,7 @@ export const Focusable = { } export const FocusableComponent = { - extend: Focusable, + extend: 'Focusable', tag: 'button', props: { fontSize: 'A', diff --git a/packages/uikit/Atoms/Media.js b/packages/uikit/Atoms/Media.js index 89f28b6e4..1cc95c70e 100644 --- a/packages/uikit/Atoms/Media.js +++ b/packages/uikit/Atoms/Media.js @@ -1,7 +1,8 @@ 'use strict' -import { merge, isArray, overwriteDeep, overwriteShallow } from '@domql/utils' +import { merge, isArray, overwriteDeep, overwriteShallow, exec } from '@domql/utils' import { getSystemGlobalTheme } from './Theme' +import { CSS_PROPS_REGISTRY, DEFAULT_CSS_PROPERTIES_LIST } from 'css-in-props' export const keySetters = { '@': (key, props, result, element, isSubtree) => applyMediaProps( @@ -43,25 +44,21 @@ export const keySetters = { } const execClass = (key, props, result, element) => { - const { class: className } = element - const classnameExec = className[key] - - if (typeof classnameExec !== 'function') return - - let classExec = classnameExec({ - props, - context: element.context, - state: element.state, - deps: element.deps - }, element.state, element.context) + let value + + if (element.class[key]) { + value = element.call('exec', element.class[key], element) + } else if (CSS_PROPS_REGISTRY[key]) { + value = element.call('exec', CSS_PROPS_REGISTRY[key], element) + } else if (DEFAULT_CSS_PROPERTIES_LIST.includes(key)) { + value = { [key]: props[key] } + } - if (isArray(classExec)) classExec = classExec.reduce((a, c) => merge(a, c), {}) + if (isArray(value)) value = value.reduce((a, c) => merge(a, c), {}) - for (const finalProp in classExec) { - result[finalProp] = classExec[finalProp] - } + result[key] = value - return classExec + return value } const convertPropsToClass = (props, result, element) => { @@ -169,6 +166,7 @@ const beforeClassAssign = (element, s, ctx) => { }) } } + if (setter) setter(key, props[key], CLASS_NAMES, element) else if (key === 'class') { const value = element.props.class @@ -179,7 +177,15 @@ const beforeClassAssign = (element, s, ctx) => { const scratchClass = scratchClasses[current] return merge(accumulator, scratchClass) }, {}) - } else if (key === 'true') applyTrueProps(props[key], CLASS_NAMES, element) + } else if (key === 'true') { + applyTrueProps(props[key], CLASS_NAMES, element) + } else if (element.class[key]) { + CLASS_NAMES[key] = element.call('exec', element.class[key], element) + } else if (CSS_PROPS_REGISTRY[key]) { + CLASS_NAMES[key] = element.call('exec', CSS_PROPS_REGISTRY[key], element) + } else if (DEFAULT_CSS_PROPERTIES_LIST.includes(key)) { + CLASS_NAMES[key] = { [key]: props[key] } + } } // override props diff --git a/packages/uikit/Atoms/Overflow.js b/packages/uikit/Atoms/Overflow.js deleted file mode 100644 index 1cd0e5e19..000000000 --- a/packages/uikit/Atoms/Overflow.js +++ /dev/null @@ -1,19 +0,0 @@ -'use strict' - -export const Overflow = { - class: { - overflow: ({ props, deps }) => !deps.isUndefined(props.overflow) && ({ - overflow: props.overflow, - scrollBehavior: 'smooth' - }), - overflowX: ({ props, deps }) => !deps.isUndefined(props.overflowX) && ({ - overflowX: props.overflowX - }), - overflowY: ({ props, deps }) => !deps.isUndefined(props.overflowY) && ({ - overflowY: props.overflowY - }), - overscrollBehavior: ({ props, deps }) => !deps.isUndefined(props.overscrollBehavior) && ({ - overscrollBehavior: props.overscrollBehavior - }) - } -} diff --git a/packages/uikit/Atoms/Position.js b/packages/uikit/Atoms/Position.js deleted file mode 100644 index f5d07717d..000000000 --- a/packages/uikit/Atoms/Position.js +++ /dev/null @@ -1,42 +0,0 @@ -'use strict' - -import { getSpacingByKey } from '@symbo.ls/scratch' - -export const Position = { - deps: { getSpacingByKey }, - - class: { - position: ({ props }) => props.position && ({ position: props.position }), - inset: ({ props, deps, context }) => { - const { inset } = props - if (context.utils.isNumber(inset)) return ({ inset }) - if (!context.utils.isString(inset)) return - return { inset: inset.split(' ').map(v => deps.getSpacingByKey(v, 'k').k).join(' ') } - }, - - left: ({ props, deps }) => deps.getSpacingByKey(props.left, 'left'), - top: ({ props, deps }) => deps.getSpacingByKey(props.top, 'top'), - right: ({ props, deps }) => deps.getSpacingByKey(props.right, 'right'), - bottom: ({ props, deps }) => deps.getSpacingByKey(props.bottom, 'bottom'), - - verticalInset: ({ props, deps }) => { - const { verticalInset } = props - if (typeof verticalInset !== 'string') return - const vi = verticalInset.split(' ').map(v => deps.getSpacingByKey(v, 'k').k) - return { - top: vi[0], - bottom: vi[1] || vi[0] - } - }, - - horizontalInset: ({ props, deps }) => { - const { horizontalInset } = props - if (typeof horizontalInset !== 'string') return - const vi = horizontalInset.split(' ').map(v => deps.getSpacingByKey(v, 'k').k) - return { - left: vi[0], - right: vi[1] || vi[0] - } - } - } -} diff --git a/packages/uikit/Atoms/Pseudo.js b/packages/uikit/Atoms/Pseudo.js deleted file mode 100644 index 193cfd0fc..000000000 --- a/packages/uikit/Atoms/Pseudo.js +++ /dev/null @@ -1,7 +0,0 @@ -'use strict' - -export const Pseudo = { - class: { - content: ({ props }) => props.content && ({ content: props.content }) - } -} diff --git a/packages/uikit/Atoms/Shape/index.js b/packages/uikit/Atoms/Shape/index.js index 38b2c8c87..07c52c26a 100644 --- a/packages/uikit/Atoms/Shape/index.js +++ b/packages/uikit/Atoms/Shape/index.js @@ -1,20 +1,11 @@ 'use strict' -import { exec, isString } from '@domql/utils' +import { exec } from '@domql/utils' import { SHAPES } from './style' import { getSpacingBasedOnRatio, getMediaColor } from '@symbo.ls/scratch' -const transformBorderRadius = (radius, props, propertyName) => { - if (!isString(radius)) return - return { - borderRadius: radius.split(' ').map((v, k) => getSpacingBasedOnRatio(props, propertyName, v)[propertyName]).join(' ') - } -} - export const Shape = { - extend: 'Pseudo', - - deps: { exec, getSpacingBasedOnRatio, getMediaColor, transformBorderRadius }, + deps: { exec, getSpacingBasedOnRatio, getMediaColor }, class: { shape: ({ props, deps }) => { @@ -33,10 +24,7 @@ export const Shape = { borderColor: deps.getMediaColor(background || backgroundColor) } return props.shapeDirection ? borderColor : null - }, - - round: ({ props, key, deps, ...el }) => deps.transformBorderRadius(props.round || props.borderRadius, props, 'round'), - borderRadius: ({ props, key, deps, ...el }) => deps.transformBorderRadius(props.borderRadius || props.round, props, 'borderRadius') + } } } diff --git a/packages/uikit/Atoms/Shape/style.js b/packages/uikit/Atoms/Shape/style.js index 1f0d2fa4b..f449cf1ab 100644 --- a/packages/uikit/Atoms/Shape/style.js +++ b/packages/uikit/Atoms/Shape/style.js @@ -1,7 +1,7 @@ 'use strict' import { getActiveConfig, getColor } from '@symbo.ls/scratch' // eslint-disable-line no-unused-vars -import { Timing } from '../Timing' +import { TIMING_PROPS } from 'css-in-props/src/props' const CONFIG = getActiveConfig() @@ -22,7 +22,7 @@ const getComputedBackgroundColor = ({ props }) => { } const inheritTransition = ({ props, deps }) => { - const exec = Timing.class.transition({ props, deps }) + const exec = TIMING_PROPS.transition({ props, deps }) return exec && exec.transition } diff --git a/packages/uikit/Atoms/Text.js b/packages/uikit/Atoms/Text.js index e928316bf..9a19ac51f 100644 --- a/packages/uikit/Atoms/Text.js +++ b/packages/uikit/Atoms/Text.js @@ -1,48 +1,11 @@ 'use strict' -import { exec, isUndefined } from '@domql/utils' -import { getFontSizeByKey, getFontFamily } from '@symbo.ls/scratch' - -const props = { - fontSize: (el) => { - const { props, deps } = el - return props.fontSize ? deps.getFontSizeByKey(props.fontSize) : null - }, - fontFamily: ({ props, deps }) => ({ - fontFamily: deps.getFontFamily(props.fontFamily) || props.fontFamily - }), - fontWeight: ({ props }) => ({ - fontWeight: props.fontWeight, - fontVariationSettings: '"wght" ' + props.fontWeight - }) -} - export const Text = { - deps: { exec, getFontSizeByKey, getFontFamily }, - text: (el) => { const { key, props, state, deps } = el if (props.text === true) return (state && state[key]) || (props && props[key]) // return console.log(el) || deps.exec(props.text, el) return deps.exec(props.text, el) - }, - - class: { - font: ({ props }) => !isUndefined(props.font) && ({ font: props.font }), - lineHeight: ({ props }) => !isUndefined(props.lineHeight) && ({ lineHeight: props.lineHeight }), - // lineHeight: ({ props }) => !isUndefined(props.lineHeight) && getSpacingBasedOnRatio(props, 'lineHeight', null, ''), - textDecoration: ({ props }) => !isUndefined(props.textDecoration) && ({ textDecoration: props.textDecoration }), - textTransform: ({ props }) => !isUndefined(props.textTransform) && ({ textTransform: props.textTransform }), - wordBreak: ({ props }) => !isUndefined(props.wordBreak) && ({ wordBreak: props.wordBreak }), - whiteSpace: ({ props }) => !isUndefined(props.whiteSpace) && ({ whiteSpace: props.whiteSpace }), - wordWrap: ({ props }) => !isUndefined(props.wordWrap) && ({ wordWrap: props.wordWrap }), - letterSpacing: ({ props }) => !isUndefined(props.letterSpacing) && ({ letterSpacing: props.letterSpacing }), - textOverflow: ({ props }) => !isUndefined(props.textOverflow) && ({ textOverflow: props.textOverflow }), - textAlign: ({ props }) => !isUndefined(props.textAlign) && ({ textAlign: props.textAlign }), - writingMode: ({ props }) => !isUndefined(props.writingMode) && ({ writingMode: props.writingMode }), - textOrientation: ({ props }) => !isUndefined(props.textOrientation) && ({ textOrientation: props.textOrientation }), - textIndent: ({ props }) => !isUndefined(props.textIndent) && ({ textIndent: props.textIndent }), - ...props } } diff --git a/packages/uikit/Atoms/Theme.js b/packages/uikit/Atoms/Theme.js index d6f12bc9e..ae6929d25 100644 --- a/packages/uikit/Atoms/Theme.js +++ b/packages/uikit/Atoms/Theme.js @@ -1,17 +1,7 @@ 'use strict' -import { - getMediaTheme, - getMediaColor, - transformTextStroke, - transformShadow, - transformBoxShadow, - transformBorder, - transformBackgroundImage -} from '@symbo.ls/scratch' - import { depth } from './Shape/style' -import { isUndefined, isString } from '@domql/utils' +import { isUndefined } from '@domql/utils' export const getSystemGlobalTheme = ({ context, state }) => { const rootState = state && state.root @@ -20,185 +10,10 @@ export const getSystemGlobalTheme = ({ context, state }) => { export const Theme = { deps: { - depth, - getSystemGlobalTheme, - getMediaTheme, - getMediaColor, - transformTextStroke, - transformShadow, - transformBoxShadow, - transformBorder, - transformBackgroundImage + depth }, class: { - depth: ({ props, deps }) => !isUndefined(props.depth) && deps.depth[props.depth], - - theme: (element) => { - const { props, deps } = element - const globalTheme = deps.getSystemGlobalTheme(element) - if (!props.theme) return - const hasSubtheme = props.theme.includes(' ') && !props.theme.includes('@') - const globalThemeForced = `@${props.themeModifier || globalTheme}` - if (hasSubtheme) { - const themeAppliedInVal = props.theme.split(' ') - themeAppliedInVal.splice(1, 0, globalThemeForced) - return deps.getMediaTheme(themeAppliedInVal) - } else if (props.theme.includes('@{globalTheme}')) props.theme.replace('@{globalTheme}', globalThemeForced) - return deps.getMediaTheme(props.theme, `@${props.themeModifier || globalTheme}`) - }, - - color: (element) => { - const { props, deps } = element - const globalTheme = deps.getSystemGlobalTheme(element) - if (!props.color) return - return { - color: deps.getMediaColor(props.color, globalTheme) - } - }, - - background: (element) => { - const { props, deps } = element - const globalTheme = deps.getSystemGlobalTheme(element) - if (!props.background) return - return { - background: deps.getMediaColor(props.background, globalTheme) - } - }, - - backgroundColor: (element) => { - const { props, deps } = element - const globalTheme = deps.getSystemGlobalTheme(element) - if (!props.backgroundColor) return - return { - backgroundColor: deps.getMediaColor(props.backgroundColor, globalTheme) - } - }, - - backgroundImage: (element, s, context) => { - const { props, deps } = element - const globalTheme = deps.getSystemGlobalTheme(element) - let val = props.backgroundImage - if (!val) return - const file = context.files && context.files[val] - if (file && file.content) val = file.content.src - return ({ - backgroundImage: deps.transformBackgroundImage(val, globalTheme) - }) - }, - backgroundSize: ({ props }) => !isUndefined(props.backgroundSize) - ? ({ - backgroundSize: props.backgroundSize - }) - : null, - backgroundPosition: ({ props }) => !isUndefined(props.backgroundPosition) - ? ({ - backgroundPosition: props.backgroundPosition - }) - : null, - backgroundRepeat: ({ props }) => !isUndefined(props.backgroundRepeat) - ? ({ - backgroundRepeat: props.backgroundRepeat - }) - : null, - - textStroke: ({ props, deps }) => !isUndefined(props.textStroke) - ? ({ - WebkitTextStroke: deps.transformTextStroke(props.textStroke) - }) - : null, - - outline: ({ props, deps }) => !isUndefined(props.outline) && ({ - outline: deps.transformBorder(props.outline) - }), - outlineOffset: ({ props, deps }) => deps.transformSizeRatio('outlineOffset', props), - - border: ({ props, deps }) => !isUndefined(props.border) && ({ - border: deps.transformBorder(props.border) - }), - - borderColor: (element) => { - const { props, deps } = element - const globalTheme = deps.getSystemGlobalTheme(element) - if (!props.borderColor) return - return { - borderColor: deps.getMediaColor(props.borderColor, globalTheme) - } - }, - borderStyle: ({ props }) => !isUndefined(props.borderStyle) && ({ - borderStyle: props.borderStyle - }), - - borderLeft: ({ props, deps }) => !isUndefined(props.borderLeft) && ({ - borderLeft: deps.transformBorder(props.borderLeft) - }), - borderTop: ({ props, deps }) => !isUndefined(props.borderTop) && ({ - borderTop: deps.transformBorder(props.borderTop) - }), - borderRight: ({ props, deps }) => !isUndefined(props.borderRight) && ({ - borderRight: deps.transformBorder(props.borderRight) - }), - borderBottom: ({ props, deps }) => !isUndefined(props.borderBottom) && ({ - borderBottom: deps.transformBorder(props.borderBottom) - }), - - shadow: (element) => { - const { props, deps } = element - const globalTheme = deps.getSystemGlobalTheme(element) - if (!props.backgroundImage) return - return ({ - boxShadow: deps.transformShadow(props.shadow, globalTheme) - }) - }, - - // boxShadow: ({ props, deps }) => isString(props.boxShadow) && ({ - // boxShadow: deps.transformBoxShadow(props.boxShadow) - // }), - - boxShadow: (element, state, context) => { - const { props, deps } = element - if (!isString(props.boxShadow)) return - const [val, hasImportant] = props.boxShadow.split('!importan') - const globalTheme = getSystemGlobalTheme(element) - const important = hasImportant ? ' !important' : '' - return { - boxShadow: deps.transformBoxShadow(val.trim(), globalTheme) + important - } - }, - - textShadow: ({ props, deps, context }) => !isUndefined(props.textShadow) && ({ - textShadow: deps.transformBoxShadow(props.textShadow, context.designSystem.globalTheme) - }), - - backdropFilter: ({ props, deps }) => !isUndefined(props.backdropFilter) && ({ - backdropFilter: props.backdropFilter - }), - - caretColor: ({ props }) => !isUndefined(props.caretColor) && ({ - caretColor: props.caretColor - }), - - opacity: ({ props }) => !isUndefined(props.opacity) && ({ - opacity: props.opacity - }), - visibility: ({ props }) => !isUndefined(props.visibility) && ({ - visibility: props.visibility - }), - - columnRule: ({ props, deps }) => !isUndefined(props.columnRule) && ({ - columnRule: deps.transformBorder(props.columnRule) - }), - - filter: ({ props, deps }) => !isUndefined(props.filter) && ({ - filter: props.filter - }), - - mixBlendMode: ({ props, deps }) => !isUndefined(props.mixBlendMode) && ({ - mixBlendMode: props.mixBlendMode - }), - - appearance: ({ props }) => !isUndefined(props.appearance) && ({ - appearance: props.appearance - }) + depth: ({ props, deps }) => !isUndefined(props.depth) && deps.depth[props.depth] } } diff --git a/packages/uikit/Atoms/Timing.js b/packages/uikit/Atoms/Timing.js deleted file mode 100644 index 4b64f24bb..000000000 --- a/packages/uikit/Atoms/Timing.js +++ /dev/null @@ -1,39 +0,0 @@ -'use strict' - -import { - getTimingFunction, - splitTransition, - transformDuration -} from '@symbo.ls/scratch' - -import { isUndefined } from '@domql/utils' - -export const Timing = { - deps: { - getTimingFunction, - splitTransition, - transformDuration - }, - - class: { - transition: ({ props, deps }) => !isUndefined(props.transition) && ({ - transition: deps.splitTransition(props.transition) - }), - willChange: ({ props }) => !isUndefined(props.willChange) && ({ - willChange: props.willChange - }), - transitionDuration: ({ props, deps }) => !isUndefined(props.transitionDuration) && ({ - transitionDuration: deps.transformDuration(props.transitionDuration) - }), - transitionDelay: ({ props, deps }) => !isUndefined(props.transitionDelay) && ({ - transitionDelay: deps.transformDuration(props.transitionDelay) - }), - transitionTimingFunction: ({ props, deps }) => !isUndefined(props.transitionTimingFunction) && ({ - transitionTimingFunction: deps.getTimingFunction(props.transitionTimingFunction) - }), - transitionProperty: ({ props }) => !isUndefined(props.transitionProperty) && ({ - transitionProperty: props.transitionProperty, - willChange: props.transitionProperty - }) - } -} diff --git a/packages/uikit/Atoms/Transform.js b/packages/uikit/Atoms/Transform.js deleted file mode 100644 index 104ce7fe1..000000000 --- a/packages/uikit/Atoms/Transform.js +++ /dev/null @@ -1,12 +0,0 @@ -'use strict' - -import { isUndefined } from '@domql/utils' - -export const Transform = { - class: { - zoom: ({ props }) => !isUndefined(props.zoom) && ({ zoom: props.zoom }), - transform: ({ props }) => !isUndefined(props.transform) && ({ transform: props.transform }), - transformOrigin: ({ props }) => !isUndefined(props.transformOrigin) && ({ transformOrigin: props.transformOrigin }), - backfaceVisibility: ({ props }) => !isUndefined(props.backfaceVisibility) && ({ backfaceVisibility: props.backfaceVisibility }) - } -} diff --git a/packages/uikit/Atoms/XYZ.js b/packages/uikit/Atoms/XYZ.js deleted file mode 100644 index 2734e20cc..000000000 --- a/packages/uikit/Atoms/XYZ.js +++ /dev/null @@ -1,11 +0,0 @@ -'use strict' - -import { isUndefined } from '@domql/utils' - -export const XYZ = { - class: { - zIndex: ({ props }) => !isUndefined(props.zIndex) && ({ zIndex: props.zIndex }), - perspective: ({ props }) => !isUndefined(props.perspective) && ({ perspective: props.perspective }), - perspectiveOrigin: ({ props }) => !isUndefined(props.perspectiveOrigin) && ({ perspectiveOrigin: props.perspectiveOrigin }) - } -} diff --git a/packages/uikit/Atoms/index.js b/packages/uikit/Atoms/index.js index a159fbb04..f83cf74ff 100644 --- a/packages/uikit/Atoms/index.js +++ b/packages/uikit/Atoms/index.js @@ -1,26 +1,17 @@ 'use strict' export * from './Block' -export * from './Direction' export * from './Flex' export * from './Grid' export * from './Img' export * from './Form' export * from './Media' export * from './Iframe' -export * from './Interaction' export * from './InteractiveComponent' -export * from './Overflow' export * from './Collection' -export * from './Position' export * from './Picture' -export * from './Pseudo' export * from './Svg' export * from './Shape' export * from './Video' export * from './Theme' export * from './Text' -export * from './Timing' -export * from './Transform' -export * from './XYZ' -export * from './Animation' diff --git a/packages/uikit/Box/index.js b/packages/uikit/Box/index.js index 35de0f46a..e129f1c96 100644 --- a/packages/uikit/Box/index.js +++ b/packages/uikit/Box/index.js @@ -25,17 +25,9 @@ export const Box = { extend: [ PropsCSS, 'Shape', - 'Position', 'Theme', - 'Block', 'Text', - 'Overflow', - 'Timing', - 'Transform', - 'Media', - 'Interaction', - 'XYZ', - 'Animation' + 'Media' ], attr: { id: el => el.call('isString', el.props.id) && el.props.id, From 2581b1a7399b732c64a3ff8d8e98e74a32d0a7d9 Mon Sep 17 00:00:00 2001 From: nikoloza Date: Sun, 9 Feb 2025 11:55:42 +0400 Subject: [PATCH 02/12] media props restructure --- packages/cli/bin/linking/packages.js | 16 ++++----- packages/uikit/Atoms/Media.js | 50 ++++++++++++++-------------- packages/uikit/Box/index.js | 15 --------- 3 files changed, 33 insertions(+), 48 deletions(-) diff --git a/packages/cli/bin/linking/packages.js b/packages/cli/bin/linking/packages.js index 745465d0d..8f3970f6c 100644 --- a/packages/cli/bin/linking/packages.js +++ b/packages/cli/bin/linking/packages.js @@ -1,27 +1,27 @@ export default [ - 'create-smbls', - '@symbo.ls/fetch', 'attrs-in-props', - '@symbo.ls/feather-icons', - '@symbo.ls/fluent-icons', + '@symbo.ls/fetch', + 'create-smbls', '@symbo.ls/emotion', '@symbo.ls/default-icons', - '@symbo.ls/preview', + '@symbo.ls/feather-icons', + '@symbo.ls/fluent-icons', '@symbo.ls/material-icons', + '@symbo.ls/preview', '@symbo.ls/utils', '@symbo.ls/default-config', '@symbo.ls/scratch', '@symbo.ls/init', '@symbo.ls/atoms', '@symbo.ls/socket', + '@symbo.ls/box', 'css-in-props', '@symbo.ls/icon', - '@symbo.ls/input', - '@symbo.ls/box', '@symbo.ls/link', - '@symbo.ls/select', + '@symbo.ls/input', '@symbo.ls/notification', '@symbo.ls/tooltip', + '@symbo.ls/select', '@symbo.ls/cli', '@symbo.ls/button', '@symbo.ls/avatar', diff --git a/packages/uikit/Atoms/Media.js b/packages/uikit/Atoms/Media.js index 1cc95c70e..860b56937 100644 --- a/packages/uikit/Atoms/Media.js +++ b/packages/uikit/Atoms/Media.js @@ -1,6 +1,6 @@ 'use strict' -import { merge, isArray, overwriteDeep, overwriteShallow, exec } from '@domql/utils' +import { merge, isArray, overwriteDeep, overwriteShallow } from '@domql/utils' import { getSystemGlobalTheme } from './Theme' import { CSS_PROPS_REGISTRY, DEFAULT_CSS_PROPERTIES_LIST } from 'css-in-props' @@ -152,25 +152,24 @@ const beforeClassAssign = (element, s, ctx) => { if (!context) return const globalTheme = context.designSystem.globalTheme - for (const key in props) { - const setter = keySetters[key.slice(0, 1)] - if (globalTheme) { - if (key === 'theme' && !props.themeModifier) { - props.update({ - themeModifier: globalTheme - }, { - preventListeners: true, - preventRecursive: true, - isForced: true, - preventDefineUpdate: true - }) - } - } + // Handle global theme first + if (globalTheme && props.theme && !props.themeModifier) { + props.update({ + themeModifier: globalTheme + }, { + preventListeners: true, + preventRecursive: true, + isForced: true, + preventDefineUpdate: true + }) + } - if (setter) setter(key, props[key], CLASS_NAMES, element) - else if (key === 'class') { - const value = element.props.class - if (!element.call('isString', value)) return + // First pass: handle non-setter properties + const rest = {} + for (const key in props) { + if (key === 'class') { + const value = props.class + if (!element.call('isString', value)) continue const classArr = value.split(' ') const scratchClasses = ctx.designSystem.CLASS CLASS_NAMES.class = classArr.reduce((accumulator, current) => { @@ -185,15 +184,16 @@ const beforeClassAssign = (element, s, ctx) => { CLASS_NAMES[key] = element.call('exec', CSS_PROPS_REGISTRY[key], element) } else if (DEFAULT_CSS_PROPERTIES_LIST.includes(key)) { CLASS_NAMES[key] = { [key]: props[key] } + } else { + rest[key] = props[key] } } - // override props - // if (props['^']) { - // for (const key in props['^']) { - // execClass(key, props, CLASS_NAMES, element) - // } - // } + // Second pass: handle setter properties + for (const key in rest) { + const setter = keySetters[key.slice(0, 1)] + if (setter) setter(key, props[key], CLASS_NAMES, element) + } const parentProps = element.parent && element.parent.props if (parentProps && parentProps.spacingRatio && parentProps.inheritSpacingRatio) { diff --git a/packages/uikit/Box/index.js b/packages/uikit/Box/index.js index e129f1c96..c92127fbb 100644 --- a/packages/uikit/Box/index.js +++ b/packages/uikit/Box/index.js @@ -1,20 +1,5 @@ 'use strict' -// import { -// Shape, -// Position, -// Theme, -// Block, -// Text, -// Overflow, -// Timing, -// Transform, -// Media, -// Interaction, -// XYZ, -// Animation -// } from '@symbo.ls/atoms' - const PropsCSS = { class: { style: el => el.props && el.props.style From e55c11290560d06595b90397d7da4b4d3322c34d Mon Sep 17 00:00:00 2001 From: nikoloza Date: Sun, 9 Feb 2025 12:01:55 +0400 Subject: [PATCH 03/12] new lockfile --- package-lock.json | 616 +++++++++++++++++----------------- packages/uikit/Atoms/Media.js | 9 +- 2 files changed, 318 insertions(+), 307 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1fac365b3..ff989eb5f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -60,9 +60,9 @@ } }, "node_modules/@babel/compat-data": { - "version": "7.26.5", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.5.tgz", - "integrity": "sha512-XvcZi1KWf88RVbF9wn8MN6tYFloU5qX8KjuF3E1PVBmJ9eypXfs4GRiJwLuTZL0iSnJUKn1BFPa5BPZZJyFzPg==", + "version": "7.26.8", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.8.tgz", + "integrity": "sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ==", "dev": true, "license": "MIT", "engines": { @@ -70,22 +70,23 @@ } }, "node_modules/@babel/core": { - "version": "7.26.7", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.7.tgz", - "integrity": "sha512-SRijHmF0PSPgLIBYlWnG0hyeJLwXE2CgpsXaMOrtt2yp9/86ALw6oUlj9KYuZ0JN07T4eBMVIW4li/9S1j2BGA==", + "version": "7.26.8", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.8.tgz", + "integrity": "sha512-l+lkXCHS6tQEc5oUpK28xBOZ6+HwaH7YwoYQbLFiYb4nS2/l1tKnZEtEWkD0GuiYdvArf9qBS0XlQGXzPMsNqQ==", "dev": true, "license": "MIT", "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.26.2", - "@babel/generator": "^7.26.5", + "@babel/generator": "^7.26.8", "@babel/helper-compilation-targets": "^7.26.5", "@babel/helper-module-transforms": "^7.26.0", "@babel/helpers": "^7.26.7", - "@babel/parser": "^7.26.7", - "@babel/template": "^7.25.9", - "@babel/traverse": "^7.26.7", - "@babel/types": "^7.26.7", + "@babel/parser": "^7.26.8", + "@babel/template": "^7.26.8", + "@babel/traverse": "^7.26.8", + "@babel/types": "^7.26.8", + "@types/gensync": "^1.0.0", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", @@ -101,9 +102,9 @@ } }, "node_modules/@babel/eslint-parser": { - "version": "7.26.5", - "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.26.5.tgz", - "integrity": "sha512-Kkm8C8uxI842AwQADxl0GbcG1rupELYLShazYEZO/2DYjhyWXJIOUVOE3tBYm6JXzUCNJOZEzqc4rCW/jsEQYQ==", + "version": "7.26.8", + "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.26.8.tgz", + "integrity": "sha512-3tBctaHRW6xSub26z7n8uyOTwwUsCdvIug/oxBH9n6yCO5hMj2vwDJAo7RbBMKrM7P+W2j61zLKviJQFGOYKMg==", "dev": true, "license": "MIT", "dependencies": { @@ -120,13 +121,13 @@ } }, "node_modules/@babel/generator": { - "version": "7.26.5", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.5.tgz", - "integrity": "sha512-2caSP6fN9I7HOe6nqhtft7V4g7/V/gfDsC3Ag4W7kEzzvRGKqiv0pu0HogPiZ3KaVSoNDhUws6IJjDjpfmYIXw==", + "version": "7.26.8", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.8.tgz", + "integrity": "sha512-ef383X5++iZHWAXX0SXQR6ZyQhw/0KtTkrTz61WXRhFM6dhpHulO/RJz79L8S6ugZHJkOOkUrUdxgdF2YiPFnA==", "license": "MIT", "dependencies": { - "@babel/parser": "^7.26.5", - "@babel/types": "^7.26.5", + "@babel/parser": "^7.26.8", + "@babel/types": "^7.26.8", "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.25", "jsesc": "^3.0.2" @@ -398,12 +399,12 @@ } }, "node_modules/@babel/parser": { - "version": "7.26.7", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.7.tgz", - "integrity": "sha512-kEvgGGgEjRUutvdVvZhbn/BxVt+5VSpwXz1j3WYXQbXDo8KzFOPNG2GQbdAiNq8g6wn1yKk7C/qrke03a84V+w==", + "version": "7.26.8", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.8.tgz", + "integrity": "sha512-TZIQ25pkSoaKEYYaHbbxkfL36GNsQ6iFiBbeuzAkLnXayKR1yP1zFe+NxuZWWsUyvt8icPU9CCq0sgWGXR1GEw==", "license": "MIT", "dependencies": { - "@babel/types": "^7.26.7" + "@babel/types": "^7.26.8" }, "bin": { "parser": "bin/babel-parser.js" @@ -591,15 +592,15 @@ } }, "node_modules/@babel/plugin-transform-async-generator-functions": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.25.9.tgz", - "integrity": "sha512-RXV6QAzTBbhDMO9fWwOmwwTuYaiPbggWQ9INdZqAYeSHyG7FzQ+nOZaUUjNwKv9pV3aE4WFqFm1Hnbci5tBCAw==", + "version": "7.26.8", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.26.8.tgz", + "integrity": "sha512-He9Ej2X7tNf2zdKMAGOsmg2MrFc+hfoAhd3po4cWfo/NWjzEAKa0oQruj1ROVUdl0e6fb6/kE/G3SSxE0lRJOg==", "dev": true, "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9", + "@babel/helper-plugin-utils": "^7.26.5", "@babel/helper-remap-async-to-generator": "^7.25.9", - "@babel/traverse": "^7.25.9" + "@babel/traverse": "^7.26.8" }, "engines": { "node": ">=6.9.0" @@ -1382,13 +1383,13 @@ } }, "node_modules/@babel/plugin-transform-template-literals": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.25.9.tgz", - "integrity": "sha512-o97AE4syN71M/lxrCtQByzphAdlYluKPDBzDVzMmfCobUjjhAryZV0AIpRPrxN0eAkxXO6ZLEScmt+PNhj2OTw==", + "version": "7.26.8", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.26.8.tgz", + "integrity": "sha512-OmGDL5/J0CJPJZTHZbi2XpO0tyT2Ia7fzpW5GURwdtp2X3fMmN8au/ej6peC/T33/+CRiIpA8Krse8hFGVmT5Q==", "dev": true, "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.26.5" }, "engines": { "node": ">=6.9.0" @@ -1481,13 +1482,13 @@ } }, "node_modules/@babel/preset-env": { - "version": "7.26.7", - "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.26.7.tgz", - "integrity": "sha512-Ycg2tnXwixaXOVb29rana8HNPgLVBof8qqtNQ9LE22IoyZboQbGSxI6ZySMdW3K5nAe6gu35IaJefUJflhUFTQ==", + "version": "7.26.8", + "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.26.8.tgz", + "integrity": "sha512-um7Sy+2THd697S4zJEfv/U5MHGJzkN2xhtsR3T/SWRbVSic62nbISh51VVfU9JiO/L/Z97QczHTaFVkOU8IzNg==", "dev": true, "license": "MIT", "dependencies": { - "@babel/compat-data": "^7.26.5", + "@babel/compat-data": "^7.26.8", "@babel/helper-compilation-targets": "^7.26.5", "@babel/helper-plugin-utils": "^7.26.5", "@babel/helper-validator-option": "^7.25.9", @@ -1501,7 +1502,7 @@ "@babel/plugin-syntax-import-attributes": "^7.26.0", "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6", "@babel/plugin-transform-arrow-functions": "^7.25.9", - "@babel/plugin-transform-async-generator-functions": "^7.25.9", + "@babel/plugin-transform-async-generator-functions": "^7.26.8", "@babel/plugin-transform-async-to-generator": "^7.25.9", "@babel/plugin-transform-block-scoped-functions": "^7.26.5", "@babel/plugin-transform-block-scoping": "^7.25.9", @@ -1544,7 +1545,7 @@ "@babel/plugin-transform-shorthand-properties": "^7.25.9", "@babel/plugin-transform-spread": "^7.25.9", "@babel/plugin-transform-sticky-regex": "^7.25.9", - "@babel/plugin-transform-template-literals": "^7.25.9", + "@babel/plugin-transform-template-literals": "^7.26.8", "@babel/plugin-transform-typeof-symbol": "^7.26.7", "@babel/plugin-transform-unicode-escapes": "^7.25.9", "@babel/plugin-transform-unicode-property-regex": "^7.25.9", @@ -1552,9 +1553,9 @@ "@babel/plugin-transform-unicode-sets-regex": "^7.25.9", "@babel/preset-modules": "0.1.6-no-external-plugins", "babel-plugin-polyfill-corejs2": "^0.4.10", - "babel-plugin-polyfill-corejs3": "^0.10.6", + "babel-plugin-polyfill-corejs3": "^0.11.0", "babel-plugin-polyfill-regenerator": "^0.6.1", - "core-js-compat": "^3.38.1", + "core-js-compat": "^3.40.0", "semver": "^6.3.1" }, "engines": { @@ -1613,30 +1614,30 @@ } }, "node_modules/@babel/template": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz", - "integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==", + "version": "7.26.8", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.26.8.tgz", + "integrity": "sha512-iNKaX3ZebKIsCvJ+0jd6embf+Aulaa3vNBqZ41kM7iTWjx5qzWKXGHiJUW3+nTpQ18SG11hdF8OAzKrpXkb96Q==", "license": "MIT", "dependencies": { - "@babel/code-frame": "^7.25.9", - "@babel/parser": "^7.25.9", - "@babel/types": "^7.25.9" + "@babel/code-frame": "^7.26.2", + "@babel/parser": "^7.26.8", + "@babel/types": "^7.26.8" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/traverse": { - "version": "7.26.7", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.7.tgz", - "integrity": "sha512-1x1sgeyRLC3r5fQOM0/xtQKsYjyxmFjaOrLJNtZ81inNjyJHGIolTULPiSc/2qe1/qfpFLisLQYFnnZl7QoedA==", + "version": "7.26.8", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.8.tgz", + "integrity": "sha512-nic9tRkjYH0oB2dzr/JoGIm+4Q6SuYeLEiIiZDwBscRMYFJ+tMAz98fuel9ZnbXViA2I0HVSSRRK8DW5fjXStA==", "license": "MIT", "dependencies": { "@babel/code-frame": "^7.26.2", - "@babel/generator": "^7.26.5", - "@babel/parser": "^7.26.7", - "@babel/template": "^7.25.9", - "@babel/types": "^7.26.7", + "@babel/generator": "^7.26.8", + "@babel/parser": "^7.26.8", + "@babel/template": "^7.26.8", + "@babel/types": "^7.26.8", "debug": "^4.3.1", "globals": "^11.1.0" }, @@ -1645,9 +1646,9 @@ } }, "node_modules/@babel/types": { - "version": "7.26.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.7.tgz", - "integrity": "sha512-t8kDRGrKXyp6+tjUh7hw2RLyclsW4TRoRvRHtSyAX9Bb5ldlFh+90YAYY6awRXrlB4G5G2izNeGySpATlFzmOg==", + "version": "7.26.8", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.8.tgz", + "integrity": "sha512-eUuWapzEGWFEpHFxgEaBG8e3n6S8L3MSu0oda755rOfabWPnh0Our1AozNFVUxGFIhbKgd1ksprsoDGMinTOTA==", "license": "MIT", "dependencies": { "@babel/helper-string-parser": "^7.25.9", @@ -1667,14 +1668,14 @@ } }, "node_modules/@domql/element": { - "version": "2.5.191", - "resolved": "https://registry.npmjs.org/@domql/element/-/element-2.5.191.tgz", - "integrity": "sha512-NO9bR+PkaoxdFTyub5LHwjn0vTXuN7VZDBz9/lphUcnrkNEjzZ9lswkDvYHaR0P0l/PBX1kql5hFcPakZKrx4w==", + "version": "2.5.198", + "resolved": "https://registry.npmjs.org/@domql/element/-/element-2.5.198.tgz", + "integrity": "sha512-1eMazH4H94hBOUYSeTOEq6iptJf/Pi82G1zetUxseIAm/GBPTfvYfHMFDhO0/3RN4pQ5JR7lPPCwjIoqATujzA==", "license": "MIT", "dependencies": { "@domql/event": "^2.5.190", "@domql/render": "^2.5.190", - "@domql/state": "^2.5.190", + "@domql/state": "^2.5.198", "@domql/utils": "^2.5.187" } }, @@ -1735,9 +1736,9 @@ } }, "node_modules/@domql/state": { - "version": "2.5.190", - "resolved": "https://registry.npmjs.org/@domql/state/-/state-2.5.190.tgz", - "integrity": "sha512-tSDPRGIK1bGV4recsP4zatSL7bqomcLHE0vu0k9TZaQXMkgYwlKRW9pq3D1kMWX87UlK1mQVAIK9ORahJciX6w==", + "version": "2.5.198", + "resolved": "https://registry.npmjs.org/@domql/state/-/state-2.5.198.tgz", + "integrity": "sha512-vRaE1/c5XWb9qP5GATpTUrc6CcabF1D9lt9tTMXKU+LhhSPtecT4QQ4xh/zB5qd3k1tp8DUhuMEZp5fPOCdKzw==", "license": "MIT", "dependencies": { "@domql/event": "^2.5.190", @@ -2413,9 +2414,9 @@ } }, "node_modules/@inquirer/figures": { - "version": "1.0.9", - "resolved": "https://registry.npmjs.org/@inquirer/figures/-/figures-1.0.9.tgz", - "integrity": "sha512-BXvGj0ehzrngHTPTDqUoDT3NXL8U0RxUk2zJm2A66RhCEIWdtU1v6GuUqNAgArW4PQ9CinqIWyHdQgdwOj06zQ==", + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/@inquirer/figures/-/figures-1.0.10.tgz", + "integrity": "sha512-Ey6176gZmeqZuY/W/nZiUyvmb1/qInjcpiZjXWi6nON+nxJpD1bxtSoBxNliGISae32n6OwbY+TSXPZ1CfS4bw==", "license": "MIT", "engines": { "node": ">=18" @@ -2882,9 +2883,9 @@ } }, "node_modules/@lerna/create/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -3262,9 +3263,9 @@ } }, "node_modules/@npmcli/arborist/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -3288,9 +3289,9 @@ } }, "node_modules/@npmcli/fs/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -3349,9 +3350,9 @@ "license": "ISC" }, "node_modules/@npmcli/git/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -3454,9 +3455,9 @@ } }, "node_modules/@npmcli/metavuln-calculator/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -3506,9 +3507,9 @@ } }, "node_modules/@npmcli/package-json/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -3625,9 +3626,9 @@ } }, "node_modules/@nx/devkit": { - "version": "20.4.0", - "resolved": "https://registry.npmjs.org/@nx/devkit/-/devkit-20.4.0.tgz", - "integrity": "sha512-qog9oGbuz7DDoXH5k+19tTI3WtaR1p9G5NobiDPfcWmsr1BTK2WH2V2/vVYFAfAcM/DEFgK3ITC5L3PSaJvMmw==", + "version": "20.4.2", + "resolved": "https://registry.npmjs.org/@nx/devkit/-/devkit-20.4.2.tgz", + "integrity": "sha512-JD/7E/e49P7V9ESQK8b7uEzxgp1TP9Op163QmsJ6In0fpv3RytZSmAUx7lBdwOuOS6yybz8UWSLC/tyADUfDcg==", "dev": true, "license": "MIT", "dependencies": { @@ -3671,9 +3672,9 @@ } }, "node_modules/@nx/devkit/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -3694,9 +3695,9 @@ } }, "node_modules/@nx/nx-darwin-arm64": { - "version": "20.4.0", - "resolved": "https://registry.npmjs.org/@nx/nx-darwin-arm64/-/nx-darwin-arm64-20.4.0.tgz", - "integrity": "sha512-w07StYKNUIiH1koqBZY9Ew57d0wACyNdKpX96og4oiuSFYTTb+QhL4+vX2GOIYyEDfX7A97mA4lXcYUvN6R4zQ==", + "version": "20.4.2", + "resolved": "https://registry.npmjs.org/@nx/nx-darwin-arm64/-/nx-darwin-arm64-20.4.2.tgz", + "integrity": "sha512-djXV3rZcDdps2TUo7bMNiB6IkxFlLIZfub5cxPhxSbnrKiMGqmISZNn9n0AmchpNNL6auRWZPAPtDfowtR5GqA==", "cpu": [ "arm64" ], @@ -3711,9 +3712,9 @@ } }, "node_modules/@nx/nx-darwin-x64": { - "version": "20.4.0", - "resolved": "https://registry.npmjs.org/@nx/nx-darwin-x64/-/nx-darwin-x64-20.4.0.tgz", - "integrity": "sha512-HS9SfQs9BKZm3mXnOggmDrsVPTdJOr4RYa0k8zhXd0GKOdAOmgvWYsCAFxHB1BV4FGq7wfc4YskXRYHra4Ornw==", + "version": "20.4.2", + "resolved": "https://registry.npmjs.org/@nx/nx-darwin-x64/-/nx-darwin-x64-20.4.2.tgz", + "integrity": "sha512-3PsiO4zEGgco/pSkYnHIB2j/IEnxsaoME+WdRYa8nRfewASAqCqf7e8DyOCftR7CBsXRosiUQWDcICu3cIfBgw==", "cpu": [ "x64" ], @@ -3728,9 +3729,9 @@ } }, "node_modules/@nx/nx-freebsd-x64": { - "version": "20.4.0", - "resolved": "https://registry.npmjs.org/@nx/nx-freebsd-x64/-/nx-freebsd-x64-20.4.0.tgz", - "integrity": "sha512-5Ex4dV9YKbmO+4ZNI7qXOPvVD7A0t/guPUMcye/Rk/vJVx3Ixr/PZlc2SpBDXDLXye4quiTqICV92VrOrVBj8Q==", + "version": "20.4.2", + "resolved": "https://registry.npmjs.org/@nx/nx-freebsd-x64/-/nx-freebsd-x64-20.4.2.tgz", + "integrity": "sha512-FXaQqn67KDGF6b735GCjFVyWVFWYrVxftvmaM/V4pCmJXjhO3K9NV3jhPVj2MNmrpdYwUtfTP1JMpr/iUBYCQA==", "cpu": [ "x64" ], @@ -3745,9 +3746,9 @@ } }, "node_modules/@nx/nx-linux-arm-gnueabihf": { - "version": "20.4.0", - "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm-gnueabihf/-/nx-linux-arm-gnueabihf-20.4.0.tgz", - "integrity": "sha512-mWu0QPZ4WQS39NuFOhbKy6Dwiytgn4SCzadZs/raXs/Sl9A1JtXIojMe5vy49rZocjhbpDuXCuKzHeFOi24TpA==", + "version": "20.4.2", + "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm-gnueabihf/-/nx-linux-arm-gnueabihf-20.4.2.tgz", + "integrity": "sha512-RcVr6VN7lWJybr0bjs2zaK9mQ0OMFmuILx/8IDniLjAQK8JB+1qQhHLgunAAUJtWv+o0sVb6WXlN/F7PTegmEA==", "cpu": [ "arm" ], @@ -3762,9 +3763,9 @@ } }, "node_modules/@nx/nx-linux-arm64-gnu": { - "version": "20.4.0", - "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm64-gnu/-/nx-linux-arm64-gnu-20.4.0.tgz", - "integrity": "sha512-5ZOMKtEPoAQfSXgWYgQvMt+8JreWfnHC1rHBhQznb/66DyimKlPFv5TprzKCTqg2ElrYMe5NT5usU5fO94NDnA==", + "version": "20.4.2", + "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm64-gnu/-/nx-linux-arm64-gnu-20.4.2.tgz", + "integrity": "sha512-Gt38hdU615g+pUAUHe5Z9ingLgpDKNumbJfqe6Y65N9XDHMGvi3YpUwFio2t/8DNZDYY7FH46CBYydDCJjDNyw==", "cpu": [ "arm64" ], @@ -3779,9 +3780,9 @@ } }, "node_modules/@nx/nx-linux-arm64-musl": { - "version": "20.4.0", - "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm64-musl/-/nx-linux-arm64-musl-20.4.0.tgz", - "integrity": "sha512-RBF3KoBYEs0q9YZ1yBidKhcszI8x4znAfcZI+RQ1zWa/kT/GlnQKamdxinri4ov8/bEo9E4YTx4ITLg4RuVHLg==", + "version": "20.4.2", + "resolved": "https://registry.npmjs.org/@nx/nx-linux-arm64-musl/-/nx-linux-arm64-musl-20.4.2.tgz", + "integrity": "sha512-Kp658KNoRfhi4a/1eoXrxxBiw2kkXqR745iuytVn1f/BL3L2tUHCp6+OyFF7sLx8TnlU9yZAxO62k4DPqS+Ffw==", "cpu": [ "arm64" ], @@ -3796,9 +3797,9 @@ } }, "node_modules/@nx/nx-linux-x64-gnu": { - "version": "20.4.0", - "resolved": "https://registry.npmjs.org/@nx/nx-linux-x64-gnu/-/nx-linux-x64-gnu-20.4.0.tgz", - "integrity": "sha512-RSYAfAmulCatDIKXXbWDhLU/fm03YrAMTD5FtS5IeEvMGEHkQ3scmXEXTxkOF4q5LuqSrutjdb3s8wHkbFRVqw==", + "version": "20.4.2", + "resolved": "https://registry.npmjs.org/@nx/nx-linux-x64-gnu/-/nx-linux-x64-gnu-20.4.2.tgz", + "integrity": "sha512-v+qOF2tmFFPX3fYYCqcdLIgATqlaQcBSHDs8EbwZjdncWk6RQAI/hq6+06+oZQc71RnyhBq5zBE12P0Bj1qTbw==", "cpu": [ "x64" ], @@ -3813,9 +3814,9 @@ } }, "node_modules/@nx/nx-linux-x64-musl": { - "version": "20.4.0", - "resolved": "https://registry.npmjs.org/@nx/nx-linux-x64-musl/-/nx-linux-x64-musl-20.4.0.tgz", - "integrity": "sha512-0eup79jxSzHoYEGl6OU3wb02wWQbEt4ZfOA58fiZ7c5mvCpKXQV9kg7Tu38zIA8nkcEXGb8JaR1R9TgMiAIZsw==", + "version": "20.4.2", + "resolved": "https://registry.npmjs.org/@nx/nx-linux-x64-musl/-/nx-linux-x64-musl-20.4.2.tgz", + "integrity": "sha512-MxlAqNItkSyiVcB91pOpYWX2Mj6PL9+GzPa63TA0v4PcpZTsFmToYlbKno/1e2T6AKI/0R1ZkAo1XxurUc++nw==", "cpu": [ "x64" ], @@ -3830,9 +3831,9 @@ } }, "node_modules/@nx/nx-win32-arm64-msvc": { - "version": "20.4.0", - "resolved": "https://registry.npmjs.org/@nx/nx-win32-arm64-msvc/-/nx-win32-arm64-msvc-20.4.0.tgz", - "integrity": "sha512-EeHJL9YPVqi3ad9hXVCr1xDM2/PNgZIJvOlJ/ND6r9dVZ+UWw2Kk7G2r13zz4j4QAhrhQJ+kzrvXYkQlhiSH6g==", + "version": "20.4.2", + "resolved": "https://registry.npmjs.org/@nx/nx-win32-arm64-msvc/-/nx-win32-arm64-msvc-20.4.2.tgz", + "integrity": "sha512-0FkvctI4lXFK0BEhQjM5If9RC0ja16oVjSacyLY893gBhbSI56Ud/XSA75uF6aplA4AvBe97NPQg5l5btJSxYw==", "cpu": [ "arm64" ], @@ -3847,9 +3848,9 @@ } }, "node_modules/@nx/nx-win32-x64-msvc": { - "version": "20.4.0", - "resolved": "https://registry.npmjs.org/@nx/nx-win32-x64-msvc/-/nx-win32-x64-msvc-20.4.0.tgz", - "integrity": "sha512-IUeCeLdehVocLML6Wub7OZVM96Sk97AshiWmeNnozI6/OYdS34hQ2+thH7ETUZas9nkC2nNkJ5jLwuAHm+5/vw==", + "version": "20.4.2", + "resolved": "https://registry.npmjs.org/@nx/nx-win32-x64-msvc/-/nx-win32-x64-msvc-20.4.2.tgz", + "integrity": "sha512-J7Nh/3hfdlbEXvvIYJI+tAnvupYaeDwSU8ZRlDV7VU5Ee9VLT3hDLhmtXcDjEZnFHNPyaIYgFZXXDppU3a04Xg==", "cpu": [ "x64" ], @@ -4098,9 +4099,9 @@ } }, "node_modules/@parcel/babel-preset-env/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -4280,9 +4281,9 @@ } }, "node_modules/@parcel/core/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -4460,9 +4461,9 @@ } }, "node_modules/@parcel/node-resolver-core/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -4616,9 +4617,9 @@ } }, "node_modules/@parcel/package-manager/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -5036,9 +5037,9 @@ } }, "node_modules/@parcel/transformer-babel/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -5099,9 +5100,9 @@ } }, "node_modules/@parcel/transformer-html/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -5176,9 +5177,9 @@ } }, "node_modules/@parcel/transformer-js/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -5233,9 +5234,9 @@ } }, "node_modules/@parcel/transformer-postcss/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -5270,9 +5271,9 @@ } }, "node_modules/@parcel/transformer-posthtml/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -5346,9 +5347,9 @@ } }, "node_modules/@parcel/transformer-svg/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -5852,9 +5853,9 @@ "license": "MIT" }, "node_modules/@swc/core": { - "version": "1.10.11", - "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.10.11.tgz", - "integrity": "sha512-3zGU5y3S20cAwot9ZcsxVFNsSVaptG+dKdmAxORSE3EX7ixe1Xn5kUwLlgIsM4qrwTUWCJDLNhRS+2HLFivcDg==", + "version": "1.10.15", + "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.10.15.tgz", + "integrity": "sha512-/iFeQuNaGdK7mfJbQcObhAhsMqLT7qgMYl7jX2GEIO+VDTejESpzAyKwaMeYXExN8D6e5BRHBCe7M5YlsuzjDA==", "dev": true, "hasInstallScript": true, "license": "Apache-2.0", @@ -5870,16 +5871,16 @@ "url": "https://opencollective.com/swc" }, "optionalDependencies": { - "@swc/core-darwin-arm64": "1.10.11", - "@swc/core-darwin-x64": "1.10.11", - "@swc/core-linux-arm-gnueabihf": "1.10.11", - "@swc/core-linux-arm64-gnu": "1.10.11", - "@swc/core-linux-arm64-musl": "1.10.11", - "@swc/core-linux-x64-gnu": "1.10.11", - "@swc/core-linux-x64-musl": "1.10.11", - "@swc/core-win32-arm64-msvc": "1.10.11", - "@swc/core-win32-ia32-msvc": "1.10.11", - "@swc/core-win32-x64-msvc": "1.10.11" + "@swc/core-darwin-arm64": "1.10.15", + "@swc/core-darwin-x64": "1.10.15", + "@swc/core-linux-arm-gnueabihf": "1.10.15", + "@swc/core-linux-arm64-gnu": "1.10.15", + "@swc/core-linux-arm64-musl": "1.10.15", + "@swc/core-linux-x64-gnu": "1.10.15", + "@swc/core-linux-x64-musl": "1.10.15", + "@swc/core-win32-arm64-msvc": "1.10.15", + "@swc/core-win32-ia32-msvc": "1.10.15", + "@swc/core-win32-x64-msvc": "1.10.15" }, "peerDependencies": { "@swc/helpers": "*" @@ -5891,9 +5892,9 @@ } }, "node_modules/@swc/core-darwin-arm64": { - "version": "1.10.11", - "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.10.11.tgz", - "integrity": "sha512-ZpgEaNcx2e5D+Pd0yZGVbpSrEDOEubn7r2JXoNBf0O85lPjUm3HDzGRfLlV/MwxRPAkwm93eLP4l7gYnc50l3g==", + "version": "1.10.15", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.10.15.tgz", + "integrity": "sha512-zFdZ6/yHqMCPk7OhLFqHy/MQ1EqJhcZMpNHd1gXYT7VRU3FaqvvKETrUlG3VYl65McPC7AhMRfXPyJ0JO/jARQ==", "cpu": [ "arm64" ], @@ -5908,9 +5909,9 @@ } }, "node_modules/@swc/core-darwin-x64": { - "version": "1.10.11", - "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.10.11.tgz", - "integrity": "sha512-szObinnq2o7spXMDU5pdunmUeLrfV67Q77rV+DyojAiGJI1RSbEQotLOk+ONOLpoapwGUxOijFG4IuX1xiwQ2g==", + "version": "1.10.15", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.10.15.tgz", + "integrity": "sha512-8g4yiQwbr8fxOOjKXdot0dEkE5zgE8uNZudLy/ZyAhiwiZ8pbJ8/wVrDOu6dqbX7FBXAoDnvZ7fwN1jk4C8jdA==", "cpu": [ "x64" ], @@ -5925,9 +5926,9 @@ } }, "node_modules/@swc/core-linux-arm-gnueabihf": { - "version": "1.10.11", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.10.11.tgz", - "integrity": "sha512-tVE8aXQwd8JUB9fOGLawFJa76nrpvp3dvErjozMmWSKWqtoeO7HV83aOrVtc8G66cj4Vq7FjTE9pOJeV1FbKRw==", + "version": "1.10.15", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.10.15.tgz", + "integrity": "sha512-rl+eVOltl2+7WXOnvmWBpMgh6aO13G5x0U0g8hjwlmD6ku3Y9iRcThpOhm7IytMEarUp5pQxItNoPq+VUGjVHg==", "cpu": [ "arm" ], @@ -5942,9 +5943,9 @@ } }, "node_modules/@swc/core-linux-arm64-gnu": { - "version": "1.10.11", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.10.11.tgz", - "integrity": "sha512-geFkENU5GMEKO7FqHOaw9HVlpQEW10nICoM6ubFc0hXBv8dwRXU4vQbh9s/isLSFRftw1m4jEEWixAnXSw8bxQ==", + "version": "1.10.15", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.10.15.tgz", + "integrity": "sha512-qxWEQeyAJMWJqjaN4hi58WMpPdt3Tn0biSK9CYRegQtvZWCbewr6v2agtSu5AZ2rudeH6OfCWAMDQQeSgn6PJQ==", "cpu": [ "arm64" ], @@ -5959,9 +5960,9 @@ } }, "node_modules/@swc/core-linux-arm64-musl": { - "version": "1.10.11", - "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.10.11.tgz", - "integrity": "sha512-2mMscXe/ivq8c4tO3eQSbQDFBvagMJGlalXCspn0DgDImLYTEnt/8KHMUMGVfh0gMJTZ9q4FlGLo7mlnbx99MQ==", + "version": "1.10.15", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.10.15.tgz", + "integrity": "sha512-QcELd9/+HjZx0WCxRrKcyKGWTiQ0485kFb5w8waxcSNd0d9Lgk4EFfWWVyvIb5gIHpDQmhrgzI/yRaWQX4YSZQ==", "cpu": [ "arm64" ], @@ -5976,9 +5977,9 @@ } }, "node_modules/@swc/core-linux-x64-gnu": { - "version": "1.10.11", - "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.10.11.tgz", - "integrity": "sha512-eu2apgDbC4xwsigpl6LS+iyw6a3mL6kB4I+6PZMbFF2nIb1Dh7RGnu70Ai6mMn1o80fTmRSKsCT3CKMfVdeNFg==", + "version": "1.10.15", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.10.15.tgz", + "integrity": "sha512-S1+ZEEn3+a/MiMeQqQypbwTGoBG8/sPoCvpNbk+uValyygT+jSn3U0xVr45FbukpmMB+NhBMqfedMLqKA0QnJA==", "cpu": [ "x64" ], @@ -5993,9 +5994,9 @@ } }, "node_modules/@swc/core-linux-x64-musl": { - "version": "1.10.11", - "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.10.11.tgz", - "integrity": "sha512-0n+wPWpDigwqRay4IL2JIvAqSKCXv6nKxPig9M7+epAlEQlqX+8Oq/Ap3yHtuhjNPb7HmnqNJLCXT1Wx+BZo0w==", + "version": "1.10.15", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.10.15.tgz", + "integrity": "sha512-qW+H9g/2zTJ4jP7NDw4VAALY0ZlNEKzYsEoSj/HKi7k3tYEHjMzsxjfsY9I8WZCft23bBdV3RTCPoxCshaj1CQ==", "cpu": [ "x64" ], @@ -6010,9 +6011,9 @@ } }, "node_modules/@swc/core-win32-arm64-msvc": { - "version": "1.10.11", - "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.10.11.tgz", - "integrity": "sha512-7+bMSIoqcbXKosIVd314YjckDRPneA4OpG1cb3/GrkQTEDXmWT3pFBBlJf82hzJfw7b6lfv6rDVEFBX7/PJoLA==", + "version": "1.10.15", + "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.10.15.tgz", + "integrity": "sha512-AhRB11aA6LxjIqut+mg7qsu/7soQDmbK6MKR9nP3hgBszpqtXbRba58lr24xIbBCMr+dpo6kgEapWt+t5Po6Zg==", "cpu": [ "arm64" ], @@ -6027,9 +6028,9 @@ } }, "node_modules/@swc/core-win32-ia32-msvc": { - "version": "1.10.11", - "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.10.11.tgz", - "integrity": "sha512-6hkLl4+3KjP/OFTryWxpW7YFN+w4R689TSPwiII4fFgsFNupyEmLWWakKfkGgV2JVA59L4Oi02elHy/O1sbgtw==", + "version": "1.10.15", + "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.10.15.tgz", + "integrity": "sha512-UGdh430TQwbDn6KjgvRTg1fO022sbQ4yCCHUev0+5B8uoBwi9a89qAz3emy2m56C8TXxUoihW9Y9OMfaRwPXUw==", "cpu": [ "ia32" ], @@ -6044,9 +6045,9 @@ } }, "node_modules/@swc/core-win32-x64-msvc": { - "version": "1.10.11", - "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.10.11.tgz", - "integrity": "sha512-kKNE2BGu/La2k2WFHovenqZvGQAHRIU+rd2/6a7D6EiQ6EyimtbhUqjCCZ+N1f5fIAnvM+sMdLiQJq4jdd/oOQ==", + "version": "1.10.15", + "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.10.15.tgz", + "integrity": "sha512-XJzBCqO1m929qbJsOG7FZXQWX26TnEoMctS3QjuCoyBmkHxxQmZsy78KjMes1aomTcKHCyFYgrRGWgVmk7tT4Q==", "cpu": [ "x64" ], @@ -6300,6 +6301,13 @@ "@types/node": "*" } }, + "node_modules/@types/gensync": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@types/gensync/-/gensync-1.0.4.tgz", + "integrity": "sha512-C3YYeRQWp2fmq9OryX+FoDy8nXS6scQ7dPptD8LnFDAUNcKWJjXQKDNJD3HVm+kOUsXhTOkpi69vI4EuAr95bA==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", @@ -6322,9 +6330,9 @@ "license": "MIT" }, "node_modules/@types/node": { - "version": "22.12.0", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.12.0.tgz", - "integrity": "sha512-Fll2FZ1riMjNmlmJOdAyY5pUbkftXslB5DgEzlIuNaiWhXd00FhWxVC/r4yV/4wBb9JfImTu+jiSvXTkJ7F/gA==", + "version": "22.13.1", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.1.tgz", + "integrity": "sha512-jK8uzQlrvXqEU91UxiK5J7pKHyzgnI1Qnl0QDHIgVGuolJhRb9EEl28Cj9b3rGR8B2lhFCtvIm5os8lFnO/1Ew==", "license": "MIT", "dependencies": { "undici-types": "~6.20.0" @@ -6902,14 +6910,14 @@ } }, "node_modules/babel-plugin-polyfill-corejs3": { - "version": "0.10.6", - "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.6.tgz", - "integrity": "sha512-b37+KR2i/khY5sKmWNVQAnitvquQbNdWy6lJdsr0kmquCKEEUgMKK4SboVM3HtfnZilfjr4MMQ7vY58FVWDtIA==", + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.11.1.tgz", + "integrity": "sha512-yGCqvBT4rwMczo28xkH/noxJ6MZ4nJfkVYdoDaC/utLtWrXxv27HVrzAeSbqR8SxDsp46n0YF47EbHoixy6rXQ==", "dev": true, "license": "MIT", "dependencies": { - "@babel/helper-define-polyfill-provider": "^0.6.2", - "core-js-compat": "^3.38.0" + "@babel/helper-define-polyfill-provider": "^0.6.3", + "core-js-compat": "^3.40.0" }, "peerDependencies": { "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" @@ -7153,9 +7161,9 @@ } }, "node_modules/builtins/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -7301,9 +7309,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001695", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001695.tgz", - "integrity": "sha512-vHyLade6wTgI2u1ec3WQBxv+2BrTERV28UXQu9LO6lZ9pYeMk34vjXFLOxo1A4UBA8XTL4njRQZdno/yYaSmWw==", + "version": "1.0.30001699", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001699.tgz", + "integrity": "sha512-b+uH5BakXZ9Do9iK+CkDmctUSEqZl+SP056vc5usa0PL+ev5OHw003rZXcnjNDv3L8P5j6rwT6C0BPKSikW08w==", "dev": true, "funding": [ { @@ -7724,9 +7732,9 @@ } }, "node_modules/conventional-changelog-core/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -7776,9 +7784,9 @@ } }, "node_modules/conventional-changelog-writer/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -8423,15 +8431,15 @@ } }, "node_modules/domql": { - "version": "2.5.191", - "resolved": "https://registry.npmjs.org/domql/-/domql-2.5.191.tgz", - "integrity": "sha512-JnIZMzWctj0EXnrH1E99u6qfUv7A2+peUcTY5HMHDI1cFm2N9TH7OqVgy0bin0pwo/umtllJiBPe0YnVuNLTDA==", + "version": "2.5.198", + "resolved": "https://registry.npmjs.org/domql/-/domql-2.5.198.tgz", + "integrity": "sha512-DwPdlNslbVD0ILOyL6GK9bgbeSXNrBBkskMkf5dm9YNuvgSn52axjvvLoyVMJ8lNFji9CLz9DJ8wizG1O3c4gA==", "license": "MIT", "dependencies": { - "@domql/element": "^2.5.191", + "@domql/element": "^2.5.198", "@domql/event": "^2.5.190", "@domql/render": "^2.5.190", - "@domql/state": "^2.5.190", + "@domql/state": "^2.5.198", "@domql/utils": "^2.5.187" } }, @@ -8543,9 +8551,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.5.88", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.88.tgz", - "integrity": "sha512-K3C2qf1o+bGzbilTDCTBhTQcMS9KW60yTAaTeeXsfvQuTDDwlokLam/AdqlqcSy9u4UainDgsHV23ksXAOgamw==", + "version": "1.5.96", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.96.tgz", + "integrity": "sha512-8AJUW6dh75Fm/ny8+kZKJzI1pgoE8bKLZlzDU2W1ENd+DXKJrx7I7l9hb8UWR4ojlnb5OlixMt00QWiYJoVw1w==", "dev": true, "license": "ISC" }, @@ -8600,16 +8608,16 @@ } }, "node_modules/engine.io": { - "version": "6.6.3", - "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.6.3.tgz", - "integrity": "sha512-2hkLItQMBkoYSagneiisupWGvsQlWXqzhSMvsjaM8GYbnfUsX7tzYQq9QARnate5LRedVTX+MbkSZAANAr3NtQ==", + "version": "6.6.4", + "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.6.4.tgz", + "integrity": "sha512-ZCkIjSYNDyGn0R6ewHDtXgns/Zre/NT6Agvq1/WobF7JXgFff4SeDroKiCO3fNJreU9YG429Sc81o4w5ok/W5g==", "license": "MIT", "dependencies": { "@types/cors": "^2.8.12", "@types/node": ">=10.0.0", "accepts": "~1.3.4", "base64id": "2.0.0", - "cookie": "~1.0.2", + "cookie": "~0.7.2", "cors": "~2.8.5", "debug": "~4.3.1", "engine.io-parser": "~5.2.1", @@ -8659,12 +8667,12 @@ } }, "node_modules/engine.io/node_modules/cookie": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", - "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz", + "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==", "license": "MIT", "engines": { - "node": ">=18" + "node": ">= 0.6" } }, "node_modules/engine.io/node_modules/debug": { @@ -9311,9 +9319,9 @@ } }, "node_modules/eslint-plugin-n/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -9677,9 +9685,9 @@ } }, "node_modules/exponential-backoff": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/exponential-backoff/-/exponential-backoff-3.1.1.tgz", - "integrity": "sha512-dX7e/LHVJ6W3DE1MHWi9S1EYzDESENfLrYohG2G++ovZrYOkm4Knwa0mc1cn84xJOR4KEU0WSchhLbd0UklbHw==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/exponential-backoff/-/exponential-backoff-3.1.2.tgz", + "integrity": "sha512-8QxYTVXUkuy7fIIoitQkPwGonB8F3Zj8eEO8Sqg9Zv/bkI7RJAzowee4gr81Hak/dUTpA2Z7VfQgoijjPNlUZA==", "dev": true, "license": "Apache-2.0" }, @@ -9810,9 +9818,9 @@ "license": "MIT" }, "node_modules/fastq": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.18.0.tgz", - "integrity": "sha512-QKHXPW0hD8g4UET03SdOdunzSouc9N4AuHdsX8XNcTsuz+yYFILVNIX4l9yHABMhiEI9Db0JTTIpu0wB+Y1QQw==", + "version": "1.19.0", + "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.0.tgz", + "integrity": "sha512-7SFSRCNjBQIZH/xZR3iy5iQYR8aGBE0h3VG6/cwlbrpdciNYBMotQav8c1XI3HjHH+NikUpP53nPdlZSdWmFzA==", "dev": true, "license": "ISC", "dependencies": { @@ -10595,9 +10603,9 @@ } }, "node_modules/git-semver-tags/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -11160,9 +11168,9 @@ } }, "node_modules/import-fresh": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", - "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz", + "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==", "license": "MIT", "dependencies": { "parent-module": "^1.0.0", @@ -11260,9 +11268,9 @@ } }, "node_modules/init-package-json/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -11394,13 +11402,13 @@ } }, "node_modules/is-boolean-object": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.1.tgz", - "integrity": "sha512-l9qO6eFlUETHtuihLcYOaLKByJ1f+N4kthcU9YjHy3N+B3hWv0y/2Nd0mu/7lTFnRQHTrSdXF50HQ3bl5fEnng==", + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz", + "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==", "dev": true, "license": "MIT", "dependencies": { - "call-bound": "^1.0.2", + "call-bound": "^1.0.3", "has-tostringtag": "^1.0.2" }, "engines": { @@ -11855,13 +11863,13 @@ } }, "node_modules/is-weakref": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.0.tgz", - "integrity": "sha512-SXM8Nwyys6nT5WP6pltOwKytLV7FqQ4UiibxVmW+EIosHcmCqkkjViTb5SNssDlkCiEYRP1/pdWUKVvZBmsR2Q==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz", + "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==", "dev": true, "license": "MIT", "dependencies": { - "call-bound": "^1.0.2" + "call-bound": "^1.0.3" }, "engines": { "node": ">= 0.4" @@ -12517,9 +12525,9 @@ } }, "node_modules/lerna/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -12594,9 +12602,9 @@ } }, "node_modules/libnpmpublish/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -13014,9 +13022,9 @@ } }, "node_modules/make-dir/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -13297,9 +13305,9 @@ } }, "node_modules/meow/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -14029,9 +14037,9 @@ } }, "node_modules/node-gyp/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -14103,9 +14111,9 @@ } }, "node_modules/normalize-package-data/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -14142,9 +14150,9 @@ } }, "node_modules/npm-install-checks/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -14181,9 +14189,9 @@ } }, "node_modules/npm-package-arg/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -14223,9 +14231,9 @@ } }, "node_modules/npm-pick-manifest/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -14289,9 +14297,9 @@ "license": "MIT" }, "node_modules/nx": { - "version": "20.4.0", - "resolved": "https://registry.npmjs.org/nx/-/nx-20.4.0.tgz", - "integrity": "sha512-barpwhq8noc30U0d5j2bSp9x/HDL33TCYsP2fl6FvpssbL64PwLOSBqIdZ9ATxVxAE/xAc/s+z72cYDkaYouPA==", + "version": "20.4.2", + "resolved": "https://registry.npmjs.org/nx/-/nx-20.4.2.tgz", + "integrity": "sha512-WXbKqk8looDo9zAISfmWtGyGm5RlOvr0G/THAa1WGSU4qHAZDsUtMAtwnxXje9s+R5rrwMmhbXCVvZELyeJP9Q==", "dev": true, "hasInstallScript": true, "license": "MIT", @@ -14336,16 +14344,16 @@ "nx-cloud": "bin/nx-cloud.js" }, "optionalDependencies": { - "@nx/nx-darwin-arm64": "20.4.0", - "@nx/nx-darwin-x64": "20.4.0", - "@nx/nx-freebsd-x64": "20.4.0", - "@nx/nx-linux-arm-gnueabihf": "20.4.0", - "@nx/nx-linux-arm64-gnu": "20.4.0", - "@nx/nx-linux-arm64-musl": "20.4.0", - "@nx/nx-linux-x64-gnu": "20.4.0", - "@nx/nx-linux-x64-musl": "20.4.0", - "@nx/nx-win32-arm64-msvc": "20.4.0", - "@nx/nx-win32-x64-msvc": "20.4.0" + "@nx/nx-darwin-arm64": "20.4.2", + "@nx/nx-darwin-x64": "20.4.2", + "@nx/nx-freebsd-x64": "20.4.2", + "@nx/nx-linux-arm-gnueabihf": "20.4.2", + "@nx/nx-linux-arm64-gnu": "20.4.2", + "@nx/nx-linux-arm64-musl": "20.4.2", + "@nx/nx-linux-x64-gnu": "20.4.2", + "@nx/nx-linux-x64-musl": "20.4.2", + "@nx/nx-win32-arm64-msvc": "20.4.2", + "@nx/nx-win32-x64-msvc": "20.4.2" }, "peerDependencies": { "@swc-node/register": "^1.8.0", @@ -14410,9 +14418,9 @@ } }, "node_modules/nx/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", "dev": true, "license": "ISC", "bin": { @@ -14442,9 +14450,9 @@ } }, "node_modules/object-inspect": { - "version": "1.13.3", - "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.3.tgz", - "integrity": "sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==", + "version": "1.13.4", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz", + "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==", "license": "MIT", "engines": { "node": ">= 0.4" @@ -15326,9 +15334,9 @@ } }, "node_modules/possible-typed-array-names": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz", - "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz", + "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==", "dev": true, "license": "MIT", "engines": { diff --git a/packages/uikit/Atoms/Media.js b/packages/uikit/Atoms/Media.js index 860b56937..6abddf89f 100644 --- a/packages/uikit/Atoms/Media.js +++ b/packages/uikit/Atoms/Media.js @@ -143,9 +143,6 @@ const beforeClassAssign = (element, s, ctx) => { const { props, class: className, context } = element const CLASS_NAMES = { - media: {}, - selector: {}, - case: {}, variable: {} } @@ -189,12 +186,18 @@ const beforeClassAssign = (element, s, ctx) => { } } + CLASS_NAMES.media = {} + CLASS_NAMES.selector = {} + CLASS_NAMES.case = {} + // Second pass: handle setter properties for (const key in rest) { const setter = keySetters[key.slice(0, 1)] if (setter) setter(key, props[key], CLASS_NAMES, element) } + console.log(CLASS_NAMES) + const parentProps = element.parent && element.parent.props if (parentProps && parentProps.spacingRatio && parentProps.inheritSpacingRatio) { element.setProps({ From e42fb241679cf5f2528862dc7992c0002eb2ac12 Mon Sep 17 00:00:00 2001 From: nikoloza Date: Mon, 10 Feb 2025 08:37:21 +0400 Subject: [PATCH 04/12] initial cleanup --- package-lock.json | 17 -- package.json | 1 + packages/cli/bin/linking/packages.js | 13 +- packages/css-in-props/src/index.js | 10 - packages/css-in-props/src/props/animation.js | 20 +- packages/css-in-props/src/props/block.js | 156 +++++------ packages/css-in-props/src/props/font.js | 15 +- packages/css-in-props/src/props/index.js | 8 +- packages/css-in-props/src/props/misc.js | 15 +- packages/css-in-props/src/props/position.js | 31 +-- packages/css-in-props/src/props/theme.js | 98 +++---- packages/css-in-props/src/props/timing.js | 22 +- packages/css-in-props/src/set.js | 2 +- packages/css-in-props/src/transform.js | 86 ------ packages/scratch/src/transforms/index.js | 4 +- packages/uikit/Atoms/Block.js | 31 ++- packages/uikit/Atoms/Flex.js | 29 -- packages/uikit/Atoms/Grid.js | 29 -- packages/uikit/Atoms/Media.js | 273 ++++--------------- packages/uikit/Atoms/Shape/index.js | 11 + packages/uikit/Atoms/Shape/style.js | 2 +- packages/uikit/Atoms/index.js | 3 +- packages/uikit/Box/LICENSE | 21 -- packages/uikit/Box/index.js | 35 --- packages/uikit/Box/package.json | 15 - packages/uikit/Input/Textarea.js | 3 +- packages/uikit/index.js | 1 - packages/uikit/package.json | 1 - 28 files changed, 275 insertions(+), 677 deletions(-) delete mode 100644 packages/css-in-props/src/transform.js delete mode 100644 packages/uikit/Atoms/Flex.js delete mode 100644 packages/uikit/Atoms/Grid.js delete mode 100644 packages/uikit/Box/LICENSE delete mode 100644 packages/uikit/Box/index.js delete mode 100644 packages/uikit/Box/package.json diff --git a/package-lock.json b/package-lock.json index ff989eb5f..a80d65093 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6096,10 +6096,6 @@ "resolved": "packages/uikit/Avatar", "link": true }, - "node_modules/@symbo.ls/box": { - "resolved": "packages/uikit/Box", - "link": true - }, "node_modules/@symbo.ls/button": { "resolved": "packages/uikit/Button", "link": true @@ -18773,7 +18769,6 @@ "@domql/utils": "^2.5.0", "@symbo.ls/atoms": "^2.11.515", "@symbo.ls/avatar": "^2.11.515", - "@symbo.ls/box": "^2.11.515", "@symbo.ls/button": "^2.11.515", "@symbo.ls/dialog": "^2.11.515", "@symbo.ls/dropdown": "^2.11.515", @@ -18811,18 +18806,6 @@ "@symbo.ls/indicator": "^2.11.480" } }, - "packages/uikit/Box": { - "name": "@symbo.ls/box", - "version": "2.11.515", - "license": "MIT", - "dependencies": { - "@domql/utils": "^2.5.0", - "@symbo.ls/atoms": "^2.11.515" - }, - "devDependencies": { - "@babel/core": "^7.12.0" - } - }, "packages/uikit/Button": { "name": "@symbo.ls/button", "version": "2.11.515", diff --git a/package.json b/package.json index 654c4f6ba..5193d1521 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "start": "npm run clean:dist; npm run clean:package-modules; parcel example/index.html --no-cache", "build": "npm run clean:dist; npm run clean:package-modules; parcel build example/index.html --no-cache", "build:packages": "lerna run build", + "build:watch": "nodemon --exec \"npm run build:packages\" --ignore 'dist/*'", "postinstall": "npx lerna run build && npx lerna run copy:package:cjs", "update-linkable-list": "npx smbls link-packages -c", "test:lint": "npx standard \"packages/**/*.js\"", diff --git a/packages/cli/bin/linking/packages.js b/packages/cli/bin/linking/packages.js index 8f3970f6c..34c56433e 100644 --- a/packages/cli/bin/linking/packages.js +++ b/packages/cli/bin/linking/packages.js @@ -1,11 +1,11 @@ export default [ 'attrs-in-props', - '@symbo.ls/fetch', 'create-smbls', '@symbo.ls/emotion', + '@symbo.ls/fetch', + '@symbo.ls/fluent-icons', '@symbo.ls/default-icons', '@symbo.ls/feather-icons', - '@symbo.ls/fluent-icons', '@symbo.ls/material-icons', '@symbo.ls/preview', '@symbo.ls/utils', @@ -13,15 +13,14 @@ export default [ '@symbo.ls/scratch', '@symbo.ls/init', '@symbo.ls/atoms', - '@symbo.ls/socket', - '@symbo.ls/box', 'css-in-props', - '@symbo.ls/icon', - '@symbo.ls/link', + '@symbo.ls/socket', '@symbo.ls/input', + '@symbo.ls/icon', '@symbo.ls/notification', - '@symbo.ls/tooltip', '@symbo.ls/select', + '@symbo.ls/link', + '@symbo.ls/tooltip', '@symbo.ls/cli', '@symbo.ls/button', '@symbo.ls/avatar', diff --git a/packages/css-in-props/src/index.js b/packages/css-in-props/src/index.js index 92c099fe2..d9e058177 100644 --- a/packages/css-in-props/src/index.js +++ b/packages/css-in-props/src/index.js @@ -5,13 +5,3 @@ export * from './set' export * from './emotion' export * from './props' export * from './props/defaults' - -export const exetuteClassPerComponent = (component, element) => { - const classObj = {} - if (component.class) { - for (const classProp in component.class) { - classObj[classProp] = component.class[classProp](element) - } - } - return classObj -} diff --git a/packages/css-in-props/src/props/animation.js b/packages/css-in-props/src/props/animation.js index 7eaa06847..a4ca8fa24 100644 --- a/packages/css-in-props/src/props/animation.js +++ b/packages/css-in-props/src/props/animation.js @@ -14,8 +14,8 @@ const applyAnimationProps = (animation, element) => { } export const ANIMATION_PROPS = { - animation: (el) => ({ - animationName: applyAnimationProps(el.props.animation, el), + animation: (val, el) => ({ + animationName: applyAnimationProps(val, el), animationDuration: getTimingByKey(el.props.animationDuration || 'A').timing, animationDelay: getTimingByKey(el.props.animationDelay || '0s').timing, animationTimingFunction: getTimingFunction(el.props.animationTimingFunction || 'ease'), @@ -23,16 +23,16 @@ export const ANIMATION_PROPS = { animationPlayState: el.props.animationPlayState, animationDirection: el.props.animationDirection }), - animationName: (el) => ({ - animationName: applyAnimationProps(el.props.animationName, el) + animationName: (val, el) => ({ + animationName: applyAnimationProps(val, el) }), - animationDuration: ({ props, deps }) => ({ - animationDuration: getTimingByKey(props.animationDuration).timing + animationDuration: (val) => ({ + animationDuration: getTimingByKey(val).timing }), - animationDelay: ({ props, deps }) => ({ - animationDelay: getTimingByKey(props.animationDelay).timing + animationDelay: (val) => ({ + animationDelay: getTimingByKey(val).timing }), - animationTimingFunction: ({ props, deps }) => ({ - animationTimingFunction: getTimingFunction(props.animationTimingFunction) + animationTimingFunction: (val) => ({ + animationTimingFunction: getTimingFunction(val) }) } diff --git a/packages/css-in-props/src/props/block.js b/packages/css-in-props/src/props/block.js index 0521b2ebb..6e8b74a4d 100644 --- a/packages/css-in-props/src/props/block.js +++ b/packages/css-in-props/src/props/block.js @@ -11,130 +11,130 @@ import { } from '@symbo.ls/scratch' export const BLOCK_PROPS = { - show: (el, s, ctx) => !!(ctx.utils.exec(el.props.show, el, s) === false) && ({ + show: (val, el, s, ctx) => !!(ctx.utils.exec(val, el, s) === false) && ({ display: 'none !important' }), - hide: (el, s, ctx) => !!ctx.utils.exec(el.props.hide, el, s) && ({ + hide: (val, el, s, ctx) => !!ctx.utils.exec(val, el, s) && ({ display: 'none !important' }), - height: ({ props }) => transformSizeRatio('height', props), - width: ({ props }) => transformSizeRatio('width', props), + height: (val, { props }) => transformSizeRatio('height', val, props), + width: (val, { props }) => transformSizeRatio('width', val, props), - boxSizing: ({ props }) => !isUndefined(props.boxSizing) - ? ({ boxSizing: props.boxSizing }) + boxSizing: (val) => !isUndefined(val) + ? ({ boxSizing: val }) : { boxSizing: 'border-box' }, - boxSize: ({ props }) => { - if (!isString(props.boxSize)) return - const [height, width] = props.boxSize.split(' ') + boxSize: (val) => { + if (!isString(val)) return + const [height, width] = val.split(' ') return { ...transformSize('height', height), ...transformSize('width', width || height) } }, - inlineSize: ({ props }) => transformSizeRatio('inlineSize', props), - blockSize: ({ props }) => transformSizeRatio('blockSize', props), + inlineSize: (val, { props }) => transformSizeRatio('inlineSize', val, props), + blockSize: (val, { props }) => transformSizeRatio('blockSize', val, props), - minWidth: ({ props }) => transformSizeRatio('minWidth', props), - maxWidth: ({ props }) => transformSizeRatio('maxWidth', props), - widthRange: ({ props }) => { - if (!isString(props.widthRange)) return - const [minWidth, maxWidth] = props.widthRange.split(' ') + minWidth: (val, { props }) => transformSizeRatio('minWidth', val, props), + maxWidth: (val, { props }) => transformSizeRatio('maxWidth', val, props), + widthRange: (val) => { + if (!isString(val)) return + const [minWidth, maxWidth] = val.split(' ') return { ...transformSize('minWidth', minWidth), ...transformSize('maxWidth', maxWidth || minWidth) } }, - minHeight: ({ props }) => transformSizeRatio('minHeight', props), - maxHeight: ({ props }) => transformSizeRatio('maxHeight', props), - heightRange: ({ props }) => { - if (!isString(props.heightRange)) return - const [minHeight, maxHeight] = props.heightRange.split(' ') + minHeight: (val, { props }) => transformSizeRatio('minHeight', val, props), + maxHeight: (val, { props }) => transformSizeRatio('maxHeight', val, props), + heightRange: (val) => { + if (!isString(val)) return + const [minHeight, maxHeight] = val.split(' ') return { ...transformSize('minHeight', minHeight), ...transformSize('maxHeight', maxHeight || minHeight) } }, - size: ({ props }) => { - if (!isString(props.size)) return - const [inlineSize, blockSize] = props.size.split(' ') + size: (val) => { + if (!isString(val)) return + const [inlineSize, blockSize] = val.split(' ') return { ...transformSizeRatio('inlineSize', inlineSize), ...transformSizeRatio('blockSize', blockSize || inlineSize) } }, - minBlockSize: ({ props }) => transformSizeRatio('minBlockSize', props), - minInlineSize: ({ props }) => transformSizeRatio('minInlineSize', props), + minBlockSize: (val, { props }) => transformSizeRatio('minBlockSize', val, props), + minInlineSize: (val, { props }) => transformSizeRatio('minInlineSize', val, props), - maxBlockSize: ({ props }) => transformSizeRatio('maxBlockSize', props), - maxInlineSize: ({ props }) => transformSizeRatio('maxInlineSize', props), + maxBlockSize: (val, { props }) => transformSizeRatio('maxBlockSize', val, props), + maxInlineSize: (val, { props }) => transformSizeRatio('maxInlineSize', val, props), - minSize: ({ props }) => { - if (!isString(props.minSize)) return - const [minInlineSize, minBlockSize] = props.minSize.split(' ') + minSize: (val) => { + if (!isString(val)) return + const [minInlineSize, minBlockSize] = val.split(' ') return { ...transformSize('minInlineSize', minInlineSize), ...transformSize('minBlockSize', minBlockSize || minInlineSize) } }, - maxSize: ({ props }) => { - if (!isString(props.maxSize)) return - const [maxInlineSize, maxBlockSize] = props.maxSize.split(' ') + maxSize: (val) => { + if (!isString(val)) return + const [maxInlineSize, maxBlockSize] = val.split(' ') return { ...transformSize('maxInlineSize', maxInlineSize), ...transformSize('maxBlockSize', maxBlockSize || maxInlineSize) } }, - borderWidth: ({ props }) => transformSizeRatio('borderWidth', props), + borderWidth: (val, { props }) => transformSizeRatio('borderWidth', val, props), - padding: ({ props }) => transformSizeRatio('padding', props), - scrollPadding: ({ props }) => transformSizeRatio('scrollPadding', props), - paddingInline: ({ props }) => { - if (!isString(props.paddingInline)) return - const [paddingInlineStart, paddingInlineEnd] = props.paddingInline.split(' ') + padding: (val, { props }) => transformSizeRatio('padding', val, props), + scrollPadding: (val, { props }) => transformSizeRatio('scrollPadding', val, props), + paddingInline: (val) => { + if (!isString(val)) return + const [paddingInlineStart, paddingInlineEnd] = val.split(' ') return { ...transformSize('paddingInlineStart', paddingInlineStart), ...transformSize('paddingInlineEnd', paddingInlineEnd || paddingInlineStart) } }, - paddingBlock: ({ props }) => { - if (!isString(props.paddingBlock)) return - const [paddingBlockStart, paddingBlockEnd] = props.paddingBlock.split(' ') + paddingBlock: (val) => { + if (!isString(val)) return + const [paddingBlockStart, paddingBlockEnd] = val.split(' ') return { ...transformSize('paddingBlockStart', paddingBlockStart), ...transformSize('paddingBlockEnd', paddingBlockEnd || paddingBlockStart) } }, // Traditional directional padding - paddingTop: ({ props }) => transformSizeRatio('paddingBlockStart', props), - paddingBottom: ({ props }) => transformSizeRatio('paddingBlockEnd', props), - paddingLeft: ({ props }) => transformSizeRatio('paddingInlineStart', props), - paddingRight: ({ props }) => transformSizeRatio('paddingInlineEnd', props), + paddingTop: (val, { props }) => transformSizeRatio('paddingBlockStart', val, props), + paddingBottom: (val, { props }) => transformSizeRatio('paddingBlockEnd', val, props), + paddingLeft: (val, { props }) => transformSizeRatio('paddingInlineStart', val, props), + paddingRight: (val, { props }) => transformSizeRatio('paddingInlineEnd', val, props), // Logical properties (for reference) - paddingBlockStart: ({ props }) => transformSizeRatio('paddingBlockStart', props), // maps to top - paddingBlockEnd: ({ props }) => transformSizeRatio('paddingBlockEnd', props), // maps to bottom - paddingInlineStart: ({ props }) => transformSizeRatio('paddingInlineStart', props), // maps to left - paddingInlineEnd: ({ props }) => transformSizeRatio('paddingInlineEnd', props), // maps to right - - margin: ({ props }) => transformSizeRatio('margin', props), - marginInline: ({ props }) => { - if (!isString(props.marginInline)) return - const [marginInlineStart, marginInlineEnd] = props.marginInline.split(' ') + paddingBlockStart: (val, { props }) => transformSizeRatio('paddingBlockStart', val, props), // maps to top + paddingBlockEnd: (val, { props }) => transformSizeRatio('paddingBlockEnd', val, props), // maps to bottom + paddingInlineStart: (val, { props }) => transformSizeRatio('paddingInlineStart', val, props), // maps to left + paddingInlineEnd: (val, { props }) => transformSizeRatio('paddingInlineEnd', val, props), // maps to right + + margin: (val, { props }) => transformSizeRatio('margin', val, props), + marginInline: (val) => { + if (!isString(val)) return + const [marginInlineStart, marginInlineEnd] = val.split(' ') return { ...transformSize('marginInlineStart', marginInlineStart), ...transformSize('marginInlineEnd', marginInlineEnd || marginInlineStart) } }, - marginBlock: ({ props }) => { + marginBlock: (val, { props }) => { if (!isString(props.marginBlock)) return const [marginBlockStart, marginBlockEnd] = props.marginBlock.split(' ') return { @@ -142,36 +142,36 @@ export const BLOCK_PROPS = { ...transformSize('marginBlockEnd', marginBlockEnd || marginBlockStart) } }, - marginInlineStart: ({ props }) => transformSizeRatio('marginInlineStart', props), - marginInlineEnd: ({ props }) => transformSizeRatio('marginInlineEnd', props), - marginBlockStart: ({ props }) => transformSizeRatio('marginBlockStart', props), - marginBlockEnd: ({ props }) => transformSizeRatio('marginBlockEnd', props), + marginInlineStart: (val, { props }) => transformSizeRatio('marginInlineStart', val, props), + marginInlineEnd: (val, { props }) => transformSizeRatio('marginInlineEnd', val, props), + marginBlockStart: (val, { props }) => transformSizeRatio('marginBlockStart', val, props), + marginBlockEnd: (val, { props }) => transformSizeRatio('marginBlockEnd', val, props), - gap: ({ props }) => ({ - gap: transfromGap(props.gap) + gap: (val) => ({ + gap: transfromGap(val) }), - columnGap: ({ props }) => getSpacingBasedOnRatio(props, 'columnGap'), - rowGap: ({ props }) => getSpacingBasedOnRatio(props, 'rowGap'), + columnGap: (val, { props }) => getSpacingBasedOnRatio(props, 'columnGap', val), + rowGap: (val, { props }) => getSpacingBasedOnRatio(props, 'rowGap', val), - flexWrap: ({ props }) => ({ + flexWrap: (val, { props }) => ({ display: 'flex', - flexFlow: (props.flexFlow || 'row').split(' ')[0] + ' ' + props.flexWrap + flexFlow: (val || 'row').split(' ')[0] + ' ' + props.flexWrap }), - flexFlow: ({ props }) => { - const { flexFlow, reverse } = props - if (!isString(flexFlow)) return - let [direction, wrap] = (flexFlow || 'row').split(' ') - if (flexFlow.startsWith('x') || flexFlow === 'row') direction = 'row' - if (flexFlow.startsWith('y') || flexFlow === 'column') direction = 'column' + flexFlow: (val, { props }) => { + const { reverse } = props + if (!isString(val)) return + let [direction, wrap] = (val || 'row').split(' ') + if (val.startsWith('x') || val === 'row') direction = 'row' + if (val.startsWith('y') || val === 'column') direction = 'column' return { display: 'flex', flexFlow: (direction || '') + (!direction.includes('-reverse') && reverse ? '-reverse' : '') + ' ' + (wrap || '') } }, - flexAlign: ({ props }) => { - if (!isString(props.flexAlign)) return - const [alignItems, justifyContent] = props.flexAlign.split(' ') + flexAlign: (val) => { + if (!isString(val)) return + const [alignItems, justifyContent] = val.split(' ') return { display: 'flex', alignItems, @@ -179,6 +179,6 @@ export const BLOCK_PROPS = { } }, - round: ({ props, key, deps, ...el }) => transformBorderRadius(props.round || props.borderRadius, props, 'round'), - borderRadius: ({ props, key, deps, ...el }) => transformBorderRadius(props.borderRadius || props.round, props, 'borderRadius') + round: (val, { props }) => transformBorderRadius(val || props.borderRadius, props, 'round'), + borderRadius: (val, { props }) => transformBorderRadius(val || props.round, props, 'borderRadius') } diff --git a/packages/css-in-props/src/props/font.js b/packages/css-in-props/src/props/font.js index c550a010f..ae453771b 100644 --- a/packages/css-in-props/src/props/font.js +++ b/packages/css-in-props/src/props/font.js @@ -3,15 +3,14 @@ import { getFontSizeByKey, getFontFamily } from '@symbo.ls/scratch' export const FONT_PROPS = { - fontSize: (el) => { - const { props } = el - return props.fontSize ? getFontSizeByKey(props.fontSize) : null + fontSize: (value) => { + return getFontSizeByKey(value) || value }, - fontFamily: ({ props }) => ({ - fontFamily: getFontFamily(props.fontFamily) || props.fontFamily + fontFamily: (value) => ({ + fontFamily: getFontFamily(value) || value }), - fontWeight: ({ props }) => ({ - fontWeight: props.fontWeight, - fontVariationSettings: '"wght" ' + props.fontWeight + fontWeight: (value) => ({ + fontWeight: value, + fontVariationSettings: '"wght" ' + value }) } diff --git a/packages/css-in-props/src/props/index.js b/packages/css-in-props/src/props/index.js index 0e3143031..5820cc46d 100644 --- a/packages/css-in-props/src/props/index.js +++ b/packages/css-in-props/src/props/index.js @@ -7,6 +7,8 @@ import { MISC_PROPS } from './misc' import { POSITION_PROPS } from './position' import { THEME_PROPS } from './theme' import { TIMING_PROPS } from './timing' +import { FLEX_PROPS } from './flex' +import { GRID_PROPS } from './grid' export * from './animation' export * from './block' @@ -15,6 +17,8 @@ export * from './misc' export * from './position' export * from './theme' export * from './timing' +export * from './flex' +export * from './grid' export const CSS_PROPS_REGISTRY = { ...ANIMATION_PROPS, @@ -24,7 +28,9 @@ export const CSS_PROPS_REGISTRY = { ...MISC_PROPS, ...POSITION_PROPS, ...THEME_PROPS, - ...TIMING_PROPS + ...TIMING_PROPS, + ...FLEX_PROPS, + ...GRID_PROPS } export default CSS_PROPS_REGISTRY diff --git a/packages/css-in-props/src/props/misc.js b/packages/css-in-props/src/props/misc.js index e9a23192c..a49fd64d7 100644 --- a/packages/css-in-props/src/props/misc.js +++ b/packages/css-in-props/src/props/misc.js @@ -1,17 +1,16 @@ 'use strict' export const MISC_PROPS = { - overflow: ({ props }) => ({ - overflow: props.overflow, + overflow: (value) => ({ + overflow: value, scrollBehavior: 'smooth' }), - cursor: (el, s, ctx) => { - let val = el.props.cursor - if (!val) return + cursor: (value, el, s, ctx) => { + if (!value) return - const file = ctx.files && ctx.files[val] - if (file && file.content) val = `url(${file.content.src})` + const file = ctx.files && ctx.files[value] + if (file && file.content) value = `url(${file.content.src})` - return ({ cursor: val }) + return ({ cursor: value }) } } diff --git a/packages/css-in-props/src/props/position.js b/packages/css-in-props/src/props/position.js index dcc0b2b0d..d97d625ad 100644 --- a/packages/css-in-props/src/props/position.js +++ b/packages/css-in-props/src/props/position.js @@ -3,32 +3,29 @@ import { getSpacingByKey } from '@symbo.ls/scratch' export const POSITION_PROPS = { - inset: ({ props, context }) => { - const { inset } = props - if (context.utils.isNumber(inset)) return ({ inset }) - if (!context.utils.isString(inset)) return - return { inset: inset.split(' ').map(v => getSpacingByKey(v, 'k').k).join(' ') } + inset: (val, el) => { + if (el.call('isNumber', val)) return ({ inset: val }) + if (!el.call('isString', val)) return + return { inset: val.split(' ').map(v => getSpacingByKey(v, 'k').k).join(' ') } }, - left: ({ props }) => getSpacingByKey(props.left, 'left'), - top: ({ props }) => getSpacingByKey(props.top, 'top'), - right: ({ props }) => getSpacingByKey(props.right, 'right'), - bottom: ({ props }) => getSpacingByKey(props.bottom, 'bottom'), + left: (val) => getSpacingByKey(val, 'left'), + top: (val) => getSpacingByKey(val, 'top'), + right: (val) => getSpacingByKey(val, 'right'), + bottom: (val) => getSpacingByKey(val, 'bottom'), - verticalInset: ({ props }) => { - const { verticalInset } = props - if (typeof verticalInset !== 'string') return - const vi = verticalInset.split(' ').map(v => getSpacingByKey(v, 'k').k) + verticalInset: (val) => { + if (typeof val !== 'string') return + const vi = val.split(' ').map(v => getSpacingByKey(v, 'k').k) return { top: vi[0], bottom: vi[1] || vi[0] } }, - horizontalInset: ({ props }) => { - const { horizontalInset } = props - if (typeof horizontalInset !== 'string') return - const vi = horizontalInset.split(' ').map(v => getSpacingByKey(v, 'k').k) + horizontalInset: (val) => { + if (typeof val !== 'string') return + const vi = val.split(' ').map(v => getSpacingByKey(v, 'k').k) return { left: vi[0], right: vi[1] || vi[0] diff --git a/packages/css-in-props/src/props/theme.js b/packages/css-in-props/src/props/theme.js index 19edf6e43..fd650b107 100644 --- a/packages/css-in-props/src/props/theme.js +++ b/packages/css-in-props/src/props/theme.js @@ -19,51 +19,46 @@ export const getSystemGlobalTheme = ({ context, state }) => { } export const THEME_PROPS = { - theme: (element) => { + theme: (val, element) => { const { props } = element const globalTheme = getSystemGlobalTheme(element) - if (!props.theme) return - const hasSubtheme = props.theme.includes(' ') && !props.theme.includes('@') + if (!val) return + const hasSubtheme = val.includes(' ') && !val.includes('@') const globalThemeForced = `@${props.themeModifier || globalTheme}` if (hasSubtheme) { - const themeAppliedInVal = props.theme.split(' ') + const themeAppliedInVal = val.split(' ') themeAppliedInVal.splice(1, 0, globalThemeForced) return getMediaTheme(themeAppliedInVal) - } else if (props.theme.includes('@{globalTheme}')) props.theme.replace('@{globalTheme}', globalThemeForced) - return getMediaTheme(props.theme, `@${props.themeModifier || globalTheme}`) + } else if (val.includes('@{globalTheme}')) val.replace('@{globalTheme}', globalThemeForced) + return getMediaTheme(val, `@${props.themeModifier || globalTheme}`) }, - color: (element) => { - const { props } = element + color: (val, element) => { const globalTheme = getSystemGlobalTheme(element) - if (!props.color) return + if (!val) return return { - color: getMediaColor(props.color, globalTheme) + color: getMediaColor(val, globalTheme) } }, - background: (element) => { - const { props } = element + background: (val, element) => { const globalTheme = getSystemGlobalTheme(element) - if (!props.background) return + if (!val) return return { - background: getMediaColor(props.background, globalTheme) + background: getMediaColor(val, globalTheme) } }, - backgroundColor: (element) => { - const { props } = element + backgroundColor: (val, element) => { const globalTheme = getSystemGlobalTheme(element) - if (!props.backgroundColor) return + if (!val) return return { - backgroundColor: getMediaColor(props.backgroundColor, globalTheme) + backgroundColor: getMediaColor(val, globalTheme) } }, - backgroundImage: (element, s, ctx) => { - const { props } = element + backgroundImage: (val, element, s, ctx) => { const globalTheme = getSystemGlobalTheme(element) - let val = props.backgroundImage if (!val) return const file = ctx.files && ctx.files[val] if (file && file.content) val = file.content.src @@ -72,66 +67,63 @@ export const THEME_PROPS = { }) }, - textStroke: ({ props }) => ({ - WebkitTextStroke: transformTextStroke(props.textStroke) + textStroke: (val) => ({ + WebkitTextStroke: transformTextStroke(val) }), - outline: ({ props }) => ({ - outline: transformBorder(props.outline) + outline: (val) => ({ + outline: transformBorder(val) }), - outlineOffset: ({ props }) => transformSizeRatio('outlineOffset', props), + outlineOffset: (val, { props }) => transformSizeRatio('outlineOffset', val, props), - border: ({ props }) => ({ - border: transformBorder(props.border) + border: (val) => ({ + border: transformBorder(val) }), - borderColor: (element) => { - const { props } = element + borderColor: (val, element) => { const globalTheme = getSystemGlobalTheme(element) - if (!props.borderColor) return + if (!val) return return { - borderColor: getMediaColor(props.borderColor, globalTheme) + borderColor: getMediaColor(val, globalTheme) } }, - borderLeft: ({ props }) => ({ - borderLeft: transformBorder(props.borderLeft) + borderLeft: (val) => ({ + borderLeft: transformBorder(val) }), - borderTop: ({ props }) => ({ - borderTop: transformBorder(props.borderTop) + borderTop: (val) => ({ + borderTop: transformBorder(val) }), - borderRight: ({ props }) => ({ - borderRight: transformBorder(props.borderRight) + borderRight: (val) => ({ + borderRight: transformBorder(val) }), - borderBottom: ({ props }) => ({ - borderBottom: transformBorder(props.borderBottom) + borderBottom: (val) => ({ + borderBottom: transformBorder(val) }), - shadow: (element) => { - const { props } = element + shadow: (val, element) => { const globalTheme = getSystemGlobalTheme(element) - if (!props.backgroundImage) return + if (!val) return return ({ - boxShadow: transformShadow(props.shadow, globalTheme) + boxShadow: transformShadow(val, globalTheme) }) }, - boxShadow: (element, state, context) => { - const { props } = element - if (!isString(props.boxShadow)) return - const [val, hasImportant] = props.boxShadow.split('!importan') + boxShadow: (val, element) => { + if (!isString(val)) return + const [value, hasImportant] = val.split('!importan') const globalTheme = getSystemGlobalTheme(element) const important = hasImportant ? ' !important' : '' return { - boxShadow: transformBoxShadow(val.trim(), globalTheme) + important + boxShadow: transformBoxShadow(value.trim(), globalTheme) + important } }, - textShadow: ({ props, context }) => ({ - textShadow: transformBoxShadow(props.textShadow, context.designSystem.globalTheme) + textShadow: (val, { context }) => ({ + textShadow: transformBoxShadow(val, context.designSystem.globalTheme) }), - columnRule: ({ props }) => ({ - columnRule: transformBorder(props.columnRule) + columnRule: (val) => ({ + columnRule: transformBorder(val) }) } diff --git a/packages/css-in-props/src/props/timing.js b/packages/css-in-props/src/props/timing.js index 08982b920..556c995e8 100644 --- a/packages/css-in-props/src/props/timing.js +++ b/packages/css-in-props/src/props/timing.js @@ -7,20 +7,20 @@ import { } from '@symbo.ls/scratch' export const TIMING_PROPS = { - transition: ({ props }) => ({ - transition: splitTransition(props.transition) + transition: val => ({ + transition: splitTransition(val) }), - transitionDuration: ({ props }) => ({ - transitionDuration: transformDuration(props.transitionDuration) + transitionDuration: val => ({ + transitionDuration: transformDuration(val) }), - transitionDelay: ({ props }) => ({ - transitionDelay: transformDuration(props.transitionDelay) + transitionDelay: val => ({ + transitionDelay: transformDuration(val) }), - transitionTimingFunction: ({ props }) => ({ - transitionTimingFunction: getTimingFunction(props.transitionTimingFunction) + transitionTimingFunction: val => ({ + transitionTimingFunction: getTimingFunction(val) }), - transitionProperty: ({ props }) => ({ - transitionProperty: props.transitionProperty, - willChange: props.transitionProperty + transitionProperty: val => ({ + transitionProperty: val, + willChange: val }) } diff --git a/packages/css-in-props/src/set.js b/packages/css-in-props/src/set.js index 9d161d234..81b72a015 100644 --- a/packages/css-in-props/src/set.js +++ b/packages/css-in-props/src/set.js @@ -1,6 +1,6 @@ 'use strict' -import { transformClassname } from './transform' +import { transformClassname } from './_transform' import { transformEmotion } from './emotion' export const setClassname = (props, emotionCss) => { diff --git a/packages/css-in-props/src/transform.js b/packages/css-in-props/src/transform.js deleted file mode 100644 index 68adce0cd..000000000 --- a/packages/css-in-props/src/transform.js +++ /dev/null @@ -1,86 +0,0 @@ -'use strict' - -import { merge, deepMerge, isFunction, isObject, isArray } from '@domql/utils' -import { keySetters } from '@symbo.ls/atoms' - -import { CSS_PROPS_REGISTRY } from './props' -import { DEFAULT_CSS_PROPERTIES_LIST } from './props/defaults' - -export const transformClassname = ( - element, - restProps = {} -) => { - const classCss = {} - const { props, class: elementClass } = element - - if (!isObject(props)) return - - // merge(elementClass, registry) - // if (registry && Object.keys(registry)[0] !== Object.keys(CSS_PROPS_REGISTRY)[0]) { - // merge(elementClass, CSS_PROPS_REGISTRY) - // } - - for (const key in props) { - const setter = keySetters[key.slice(0, 1)] - const hasCSS = elementClass[key] - - if (setter) setter(key, props[key], classCss, element, true) - else if (isFunction(hasCSS)) { - // const stack = hasCSS(element) - const stack = hasCSS(element, element.state, element.context) - const exec = isArray(stack) - ? stack.reduce((a, c) => { - return merge(a, c) - }, {}) - : stack - deepMerge(classCss, exec) - } else if (key === 'style') { - deepMerge(classCss, props[key]) - } else restProps[key] = props[key] - } - - return classCss -} - -export const extractCSSfromProps = (element) => { - const { props: defProps } = element - const css = {} - const props = {} - - for (const key in defProps) { - const val = defProps[key] - - const mediaProp = keySetters[key.slice(0, 1)] - if (mediaProp) { - mediaProp(key, defProps[key], css, element, true) - continue - } - - const preprop = CSS_PROPS_REGISTRY[key] - if (preprop) { - // const stack = hasCSS(element) - const stack = preprop(element, element.state, element.context) - const exec = isArray(stack) - ? stack.reduce((a, c) => { - return merge(a, c) - }, {}) - : stack - deepMerge(css, exec) - continue - } - - if (key === 'style') { - deepMerge(css, defProps[key]) - continue - } - - if (DEFAULT_CSS_PROPERTIES_LIST.includes(key)) { - css[key] = val - continue - } - - props[key] = val - } - - return { css, props } -} diff --git a/packages/scratch/src/transforms/index.js b/packages/scratch/src/transforms/index.js index 75e3cc682..36743ab65 100644 --- a/packages/scratch/src/transforms/index.js +++ b/packages/scratch/src/transforms/index.js @@ -139,8 +139,8 @@ export const transformSize = (propertyName, val, props = {}, opts = {}) => { } } -export const transformSizeRatio = (propertyName, props) => { - return transformSize(propertyName, null, props, { +export const transformSizeRatio = (propertyName, val = null, props) => { + return transformSize(propertyName, val, props, { ratio: true }) } diff --git a/packages/uikit/Atoms/Block.js b/packages/uikit/Atoms/Block.js index 94582edd2..443300cdb 100644 --- a/packages/uikit/Atoms/Block.js +++ b/packages/uikit/Atoms/Block.js @@ -1,24 +1,29 @@ 'use strict' export const Block = { + props: { + display: 'block' + } } -export const Hr = { - tag: 'hr', - props: { margin: 'C1 0' } +export const Inline = { + props: { + display: 'inline' + } } -export const Br = { tag: 'br' } -export const Div = { tag: 'div' } -export const Span = { tag: 'span' } -export const Li = { tag: 'li' } -export const Ul = { - tag: 'ul', - childExtend: { extend: 'Li' } + +export const Flex = { + props: { + display: 'flex' + } } -export const Ol = { - tag: 'ol', - childExtend: { extend: 'Li' } + +export const Grid = { + props: { display: 'grid' } } + +export const Div = { tag: 'div' } +export const Span = { tag: 'span' } // export const Article = { tag: 'article' } export const Gutter = { diff --git a/packages/uikit/Atoms/Flex.js b/packages/uikit/Atoms/Flex.js deleted file mode 100644 index b390dd5d4..000000000 --- a/packages/uikit/Atoms/Flex.js +++ /dev/null @@ -1,29 +0,0 @@ -'use strict' - -import { isString } from '@domql/utils' - -export const Flex = { - props: { - display: 'flex' - }, - - class: { - flow: ({ props }) => { - const { flow, reverse } = props - if (!isString(flow)) return - let [direction, wrap] = (flow || 'row').split(' ') - if (flow.startsWith('x') || flow === 'row') direction = 'row' - if (flow.startsWith('y') || flow === 'column') direction = 'column' - return { - flexFlow: (direction || '') + (!direction.includes('-reverse') && reverse ? '-reverse' : '') + ' ' + (wrap || '') - } - }, - - wrap: ({ props }) => props.wrap && ({ flexWrap: props.wrap }), - align: ({ props }) => { - if (!isString(props.align)) return - const [alignItems, justifyContent] = props.align.split(' ') - return { alignItems, justifyContent } - } - } -} diff --git a/packages/uikit/Atoms/Grid.js b/packages/uikit/Atoms/Grid.js deleted file mode 100644 index 4e8b10900..000000000 --- a/packages/uikit/Atoms/Grid.js +++ /dev/null @@ -1,29 +0,0 @@ -'use strict' - -import { getSpacingBasedOnRatio } from '@symbo.ls/scratch' - -export const Grid = { - deps: { getSpacingBasedOnRatio }, - - props: { display: 'grid' }, - - class: { - area: ({ props }) => props.area ? ({ gridArea: props.area }) : null, - template: ({ props }) => props.template ? ({ gridTemplate: props.template }) : null, - templateAreas: ({ props }) => props.templateAreas ? ({ gridTemplateAreas: props.templateAreas }) : null, - - column: ({ props }) => props.column ? ({ gridColumn: props.column }) : null, - columns: ({ props }) => props.columns ? ({ gridTemplateColumns: props.columns }) : null, - templateColumns: ({ props }) => props.templateColumns ? ({ gridTemplateColumns: props.templateColumns }) : null, - autoColumns: ({ props }) => props.autoColumns ? ({ gridAutoColumns: props.autoColumns }) : null, - columnStart: ({ props }) => props.columnStart ? ({ gridColumnStart: props.columnStart }) : null, - - row: ({ props }) => props.row ? ({ gridRow: props.row }) : null, - rows: ({ props }) => props.rows ? ({ gridTemplateRows: props.rows }) : null, - templateRows: ({ props }) => props.templateRows ? ({ gridTemplateRows: props.templateRows }) : null, - autoRows: ({ props }) => props.autoRows ? ({ gridAutoRows: props.autoRows }) : null, - rowStart: ({ props }) => props.rowStart ? ({ gridRowStart: props.rowStart }) : null, - - autoFlow: ({ props }) => props.autoFlow ? ({ gridAutoFlow: props.autoFlow }) : null - } -} diff --git a/packages/uikit/Atoms/Media.js b/packages/uikit/Atoms/Media.js index 6abddf89f..7bdbb33f3 100644 --- a/packages/uikit/Atoms/Media.js +++ b/packages/uikit/Atoms/Media.js @@ -1,226 +1,61 @@ 'use strict' -import { merge, isArray, overwriteDeep, overwriteShallow } from '@domql/utils' -import { getSystemGlobalTheme } from './Theme' -import { CSS_PROPS_REGISTRY, DEFAULT_CSS_PROPERTIES_LIST } from 'css-in-props' - -export const keySetters = { - '@': (key, props, result, element, isSubtree) => applyMediaProps( - key, props, isSubtree ? result : (result && result.media), element - ), - ':': (key, props, result, element, isSubtree) => applySelectorProps( - key, props, isSubtree ? result : (result && result.selector), element - ), - '[': (key, props, result, element, isSubtree) => applySelectorProps( - key, props, isSubtree ? result : (result && result.selector), element - ), - '*': (key, props, result, element, isSubtree) => applySelectorProps( - key, props, isSubtree ? result : (result && result.selector), element - ), - '+': (key, props, result, element, isSubtree) => applySelectorProps( - key, props, isSubtree ? result : (result && result.selector), element - ), - '~': (key, props, result, element, isSubtree) => applySelectorProps( - key, props, isSubtree ? result : (result && result.selector), element - ), - '&': (key, props, result, element, isSubtree) => applyAndProps( - key, props, isSubtree ? result : (result && result.selector), element - ), - '>': (key, props, result, element, isSubtree) => applyAndProps( - key, props, isSubtree ? result : (result && result.selector), element - ), - $: (key, props, result, element, isSubtree) => applyCaseProps( - key, props, isSubtree ? result : (result && result.case), element - ), - '-': (key, props, result, element, isSubtree) => applyVariableProps( - key, props, isSubtree ? result : (result && result.variable), element - ), - '.': (key, props, result, element, isSubtree) => applyConditionalCaseProps( - key, props, isSubtree ? result : (result && result.case), element - ), - '!': (key, props, result, element, isSubtree) => applyConditionalFalsyProps( - key, props, isSubtree ? result : (result && result.case), element - ) -} - -const execClass = (key, props, result, element) => { - let value - - if (element.class[key]) { - value = element.call('exec', element.class[key], element) - } else if (CSS_PROPS_REGISTRY[key]) { - value = element.call('exec', CSS_PROPS_REGISTRY[key], element) - } else if (DEFAULT_CSS_PROPERTIES_LIST.includes(key)) { - value = { [key]: props[key] } - } - - if (isArray(value)) value = value.reduce((a, c) => merge(a, c), {}) - - result[key] = value - - return value -} - -const convertPropsToClass = (props, result, element) => { - const propsClassObj = {} - - for (const key in props) { - const setter = keySetters[key.slice(0, 1)] - if (setter) { - setter(key, props[key], propsClassObj, element, true) - continue - } else { - execClass(key, props, propsClassObj, element) - } - } - - return propsClassObj -} - -const applyMediaProps = (key, props, result, element) => { - const { context } = element - if (!context.designSystem || !context.designSystem.MEDIA) return - const globalTheme = getSystemGlobalTheme(element) - const { MEDIA } = context.designSystem - const mediaValue = MEDIA[key.slice(1)] - const generatedClass = convertPropsToClass(props, result, element) - - const name = key.slice(1) - const isTheme = ['dark', 'light'].includes(name) - const matchesGlobal = name === globalTheme - - if (globalTheme && isTheme) { - if (matchesGlobal) return merge(result, generatedClass) - return - } - - const printValue = '@media ' + (mediaValue === 'print' ? `${mediaValue}` : `screen and ${mediaValue}`) - const mediaKey = mediaValue ? printValue : key - result[mediaKey] = generatedClass - return result[mediaKey] -} - -const applyAndProps = (key, props, result, element) => { - result[key] = convertPropsToClass(props, result, element) - return result[key] -} - -const applySelectorProps = (key, props, result, element) => { - const selectorKey = `&${key}` - result[selectorKey] = convertPropsToClass(props, result, element) - return result[selectorKey] -} - -const applyCaseProps = (key, props, result, element) => { - const { CASES } = element.context && element.context.designSystem - const caseKey = key.slice(1) - const isPropTrue = element.props[caseKey] - if (!CASES[caseKey] && !isPropTrue) return - return merge(result, convertPropsToClass(props, result, element)) -} - -const applyVariableProps = (key, props, result, element) => { - result[key] = props - return result -} - -const applyConditionalCaseProps = (key, props, result, element) => { - const caseKey = key.slice(1) - const isPropTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey] - if (!isPropTrue) return // remove classname if not here - return overwriteDeep(result, convertPropsToClass(props, result, element)) -} - -const applyConditionalFalsyProps = (key, props, result, element) => { - const caseKey = key.slice(1) - const isPropTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey] - if (!isPropTrue) return overwriteDeep(result, convertPropsToClass(props, result, element)) -} - -const applyTrueProps = (props, result, element) => merge(result, convertPropsToClass(props, result, element)) +import { useCssInProps } from 'css-in-props' +// Main class assignment handler const beforeClassAssign = (element, s, ctx) => { - const { props, class: className, context } = element - - const CLASS_NAMES = { - variable: {} - } - - if (!context) return - const globalTheme = context.designSystem.globalTheme - - // Handle global theme first - if (globalTheme && props.theme && !props.themeModifier) { - props.update({ - themeModifier: globalTheme - }, { - preventListeners: true, - preventRecursive: true, - isForced: true, - preventDefineUpdate: true - }) - } - - // First pass: handle non-setter properties - const rest = {} - for (const key in props) { - if (key === 'class') { - const value = props.class - if (!element.call('isString', value)) continue - const classArr = value.split(' ') - const scratchClasses = ctx.designSystem.CLASS - CLASS_NAMES.class = classArr.reduce((accumulator, current) => { - const scratchClass = scratchClasses[current] - return merge(accumulator, scratchClass) - }, {}) - } else if (key === 'true') { - applyTrueProps(props[key], CLASS_NAMES, element) - } else if (element.class[key]) { - CLASS_NAMES[key] = element.call('exec', element.class[key], element) - } else if (CSS_PROPS_REGISTRY[key]) { - CLASS_NAMES[key] = element.call('exec', CSS_PROPS_REGISTRY[key], element) - } else if (DEFAULT_CSS_PROPERTIES_LIST.includes(key)) { - CLASS_NAMES[key] = { [key]: props[key] } - } else { - rest[key] = props[key] - } - } - - CLASS_NAMES.media = {} - CLASS_NAMES.selector = {} - CLASS_NAMES.case = {} - - // Second pass: handle setter properties - for (const key in rest) { - const setter = keySetters[key.slice(0, 1)] - if (setter) setter(key, props[key], CLASS_NAMES, element) - } - - console.log(CLASS_NAMES) - - const parentProps = element.parent && element.parent.props - if (parentProps && parentProps.spacingRatio && parentProps.inheritSpacingRatio) { - element.setProps({ - spacingRatio: parentProps.spacingRatio, - inheritSpacingRatio: true - }, { - preventListeners: true, - preventRecursive: true, - isForced: true, - preventDefineUpdate: true - }) - } - - overwriteShallow(className, CLASS_NAMES) -} - + if (!element.context) return + + // console.group(element.key) + // Initialize class names container + const { props, __ref: ref } = element + + // // Handle global theme + // const globalTheme = element.context.designSystem.globalTheme + // if (globalTheme && props.theme && !props.themeModifier) { + // props.themeModifier = globalTheme + // // props.update({ themeModifier: globalTheme }, { + // // preventListeners: true, + // // preventRecursive: true, + // // isForced: true, + // // preventDefineUpdate: true + // // }) + // } + + // if (element.key === 'Logo') debugger + + // Process props in two passes + // console.log('----') + // console.log('before', ref.__class) + ref.__class = useCssInProps(props, element, { unpack: false }) + // console.log('after', ref.__class) + + // console.error('yo') + // console.log(CLASS_NAMES) + + // Handle spacing inheritance + // const { parent } = element + // if (parent?.props?.spacingRatio && parent.props.inheritSpacingRatio) { + // element.setProps({ + // spacingRatio: parent.props.spacingRatio, + // inheritSpacingRatio: true + // }, { + // preventListeners: true, + // preventRecursive: true, + // isForced: true, + // preventDefineUpdate: true + // }) + // } + + // console.log(CLASS_NAMES) + + // console.log(CLASS_NAMES, className, ref.__class) + // overwriteShallow(ref.__class, CLASS_NAMES) + + // console.groupEnd(element.key) +} + +// Export Media component export const Media = { - class: { - case: (el, s) => { - return { - // - } - } - }, on: { beforeClassAssign } } diff --git a/packages/uikit/Atoms/Shape/index.js b/packages/uikit/Atoms/Shape/index.js index 07c52c26a..f0a3a8ced 100644 --- a/packages/uikit/Atoms/Shape/index.js +++ b/packages/uikit/Atoms/Shape/index.js @@ -12,6 +12,11 @@ export const Shape = { const { shape } = props return deps.exec(SHAPES[shape], ({ props, deps })) }, + // TODO: replace with this + // shape: (el) => { + // const { shape } = el.props + // return el.call('exec', SHAPES[shape], el) + // }, shapeDirection: ({ props }) => { const { shape, shapeDirection } = props if (!shape || !shapeDirection) return @@ -28,4 +33,10 @@ export const Shape = { } } +export const Circle = { + props: { + round: '100%' + } +} + export default Shape diff --git a/packages/uikit/Atoms/Shape/style.js b/packages/uikit/Atoms/Shape/style.js index f449cf1ab..4ebde59cc 100644 --- a/packages/uikit/Atoms/Shape/style.js +++ b/packages/uikit/Atoms/Shape/style.js @@ -22,7 +22,7 @@ const getComputedBackgroundColor = ({ props }) => { } const inheritTransition = ({ props, deps }) => { - const exec = TIMING_PROPS.transition({ props, deps }) + const exec = TIMING_PROPS.transition(props.transition, { props, deps }) return exec && exec.transition } diff --git a/packages/uikit/Atoms/index.js b/packages/uikit/Atoms/index.js index f83cf74ff..d0f91c12e 100644 --- a/packages/uikit/Atoms/index.js +++ b/packages/uikit/Atoms/index.js @@ -1,8 +1,6 @@ 'use strict' export * from './Block' -export * from './Flex' -export * from './Grid' export * from './Img' export * from './Form' export * from './Media' @@ -15,3 +13,4 @@ export * from './Shape' export * from './Video' export * from './Theme' export * from './Text' +export * from './Box' diff --git a/packages/uikit/Box/LICENSE b/packages/uikit/Box/LICENSE deleted file mode 100644 index 602776ea1..000000000 --- a/packages/uikit/Box/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2023 symbo.ls - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/packages/uikit/Box/index.js b/packages/uikit/Box/index.js deleted file mode 100644 index c92127fbb..000000000 --- a/packages/uikit/Box/index.js +++ /dev/null @@ -1,35 +0,0 @@ -'use strict' - -const PropsCSS = { - class: { - style: el => el.props && el.props.style - } -} - -export const Box = { - extend: [ - PropsCSS, - 'Shape', - 'Theme', - 'Text', - 'Media' - ], - attr: { - id: el => el.call('isString', el.props.id) && el.props.id, - title: el => el.call('isString', el.props.title) && el.props.title, - contentEditable: el => el.props.contentEditable || el.props.contenteditable, - dir: el => el.props.dir, - draggable: el => el.props.draggable, - hidden: el => el.props.hidden, - lang: el => el.props.lang, - spellcheck: el => el.props.spellcheck, - tabindex: el => el.props.tabindex, - translate: el => el.props.translate - } -} - -export const Circle = { - props: { - round: '100%' - } -} diff --git a/packages/uikit/Box/package.json b/packages/uikit/Box/package.json deleted file mode 100644 index c23e375d5..000000000 --- a/packages/uikit/Box/package.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "name": "@symbo.ls/box", - "version": "2.11.515", - "main": "index.js", - "license": "MIT", - "dependencies": { - "@domql/utils": "^2.5.0", - "@symbo.ls/atoms": "^2.11.515" - }, - "source": "src/index.js", - "gitHead": "7744e475b747954ee8f0a8968651ff0eae11127a", - "devDependencies": { - "@babel/core": "^7.12.0" - } -} diff --git a/packages/uikit/Input/Textarea.js b/packages/uikit/Input/Textarea.js index 6050eb54e..91f4a40c3 100644 --- a/packages/uikit/Input/Textarea.js +++ b/packages/uikit/Input/Textarea.js @@ -43,8 +43,7 @@ export const Textarea = { } export const TextareaWithButton = { - extend: 'Flex', - props: { gap: 'Y2' }, + props: { display: 'flex', gap: 'Y2' }, Textarea: { height: 'C2+W', minWidth: 'H', diff --git a/packages/uikit/index.js b/packages/uikit/index.js index f9d74dcab..7673242be 100644 --- a/packages/uikit/index.js +++ b/packages/uikit/index.js @@ -1,7 +1,6 @@ 'use strict' export * from '@symbo.ls/atoms' -export * from '@symbo.ls/box' export * from '@symbo.ls/icon' export * from '@symbo.ls/link' export * from '@symbo.ls/input' diff --git a/packages/uikit/package.json b/packages/uikit/package.json index 4b62b5ec6..f8b25bdc1 100644 --- a/packages/uikit/package.json +++ b/packages/uikit/package.json @@ -16,7 +16,6 @@ "@domql/utils": "^2.5.0", "@symbo.ls/atoms": "^2.11.515", "@symbo.ls/avatar": "^2.11.515", - "@symbo.ls/box": "^2.11.515", "@symbo.ls/button": "^2.11.515", "@symbo.ls/dialog": "^2.11.515", "@symbo.ls/dropdown": "^2.11.515", From e6938e9267c82126b923cd4a5f07b7f2ecb432a4 Mon Sep 17 00:00:00 2001 From: nikoloza Date: Mon, 10 Feb 2025 08:37:34 +0400 Subject: [PATCH 05/12] css-in-props transforms update --- packages/css-in-props/src/_transform.js | 86 +++++++++++++++ packages/css-in-props/src/props/flex.js | 32 ++++++ packages/css-in-props/src/props/grid.js | 21 ++++ .../css-in-props/src/transform/executors.js | 100 +++++++++++++++++ packages/css-in-props/src/transform/index.js | 3 + .../src/transform/transformers.js | 101 ++++++++++++++++++ packages/uikit/Atoms/Box.js | 44 ++++++++ 7 files changed, 387 insertions(+) create mode 100644 packages/css-in-props/src/_transform.js create mode 100644 packages/css-in-props/src/props/flex.js create mode 100644 packages/css-in-props/src/props/grid.js create mode 100644 packages/css-in-props/src/transform/executors.js create mode 100644 packages/css-in-props/src/transform/index.js create mode 100644 packages/css-in-props/src/transform/transformers.js create mode 100644 packages/uikit/Atoms/Box.js diff --git a/packages/css-in-props/src/_transform.js b/packages/css-in-props/src/_transform.js new file mode 100644 index 000000000..68adce0cd --- /dev/null +++ b/packages/css-in-props/src/_transform.js @@ -0,0 +1,86 @@ +'use strict' + +import { merge, deepMerge, isFunction, isObject, isArray } from '@domql/utils' +import { keySetters } from '@symbo.ls/atoms' + +import { CSS_PROPS_REGISTRY } from './props' +import { DEFAULT_CSS_PROPERTIES_LIST } from './props/defaults' + +export const transformClassname = ( + element, + restProps = {} +) => { + const classCss = {} + const { props, class: elementClass } = element + + if (!isObject(props)) return + + // merge(elementClass, registry) + // if (registry && Object.keys(registry)[0] !== Object.keys(CSS_PROPS_REGISTRY)[0]) { + // merge(elementClass, CSS_PROPS_REGISTRY) + // } + + for (const key in props) { + const setter = keySetters[key.slice(0, 1)] + const hasCSS = elementClass[key] + + if (setter) setter(key, props[key], classCss, element, true) + else if (isFunction(hasCSS)) { + // const stack = hasCSS(element) + const stack = hasCSS(element, element.state, element.context) + const exec = isArray(stack) + ? stack.reduce((a, c) => { + return merge(a, c) + }, {}) + : stack + deepMerge(classCss, exec) + } else if (key === 'style') { + deepMerge(classCss, props[key]) + } else restProps[key] = props[key] + } + + return classCss +} + +export const extractCSSfromProps = (element) => { + const { props: defProps } = element + const css = {} + const props = {} + + for (const key in defProps) { + const val = defProps[key] + + const mediaProp = keySetters[key.slice(0, 1)] + if (mediaProp) { + mediaProp(key, defProps[key], css, element, true) + continue + } + + const preprop = CSS_PROPS_REGISTRY[key] + if (preprop) { + // const stack = hasCSS(element) + const stack = preprop(element, element.state, element.context) + const exec = isArray(stack) + ? stack.reduce((a, c) => { + return merge(a, c) + }, {}) + : stack + deepMerge(css, exec) + continue + } + + if (key === 'style') { + deepMerge(css, defProps[key]) + continue + } + + if (DEFAULT_CSS_PROPERTIES_LIST.includes(key)) { + css[key] = val + continue + } + + props[key] = val + } + + return { css, props } +} diff --git a/packages/css-in-props/src/props/flex.js b/packages/css-in-props/src/props/flex.js new file mode 100644 index 000000000..9e80009ba --- /dev/null +++ b/packages/css-in-props/src/props/flex.js @@ -0,0 +1,32 @@ +'use strict' + +import { isString } from '@domql/utils' + +export const FLEX_PROPS = { + flow: (value, el) => { + const { props } = el + // console.log('----flex') + // console.log(value) + // console.log(el) + if (props.display !== 'flex') return + const { reverse } = props + if (!isString(value)) return + let [direction, wrap] = (value || 'row').split(' ') + if (value.startsWith('x') || value === 'row') direction = 'row' + if (value.startsWith('y') || value === 'column') direction = 'column' + return { + flexFlow: (direction || '') + (!direction.includes('-reverse') && reverse ? '-reverse' : '') + ' ' + (wrap || '') + } + }, + + wrap: (value, { props }) => { + if (props.display !== 'flex') return + return { flexWrap: value } + }, + + align: (value, { props }) => { + if (props.display !== 'flex') return + const [alignItems, justifyContent] = value.split(' ') + return { alignItems, justifyContent } + } +} diff --git a/packages/css-in-props/src/props/grid.js b/packages/css-in-props/src/props/grid.js new file mode 100644 index 000000000..c0eb69923 --- /dev/null +++ b/packages/css-in-props/src/props/grid.js @@ -0,0 +1,21 @@ +'use strict' + +export const GRID_PROPS = { + area: (value) => ({ gridArea: value }), + template: (value) => ({ gridTemplate: value }), + templateAreas: (value) => ({ gridTemplateAreas: value }), + + column: (value) => ({ gridColumn: value }), + columns: (value) => ({ gridTemplateColumns: value }), + templateColumns: (value) => ({ gridTemplateColumns: value }), + autoColumns: (value) => ({ gridAutoColumns: value }), + columnStart: (value) => ({ gridColumnStart: value }), + + row: (value) => ({ gridRow: value }), + rows: (value) => ({ gridTemplateRows: value }), + templateRows: (value) => ({ gridTemplateRows: value }), + autoRows: (value) => ({ gridAutoRows: value }), + rowStart: (value) => ({ gridRowStart: value }), + + autoFlow: (value) => ({ gridAutoFlow: value }) +} diff --git a/packages/css-in-props/src/transform/executors.js b/packages/css-in-props/src/transform/executors.js new file mode 100644 index 000000000..6b8ac4a99 --- /dev/null +++ b/packages/css-in-props/src/transform/executors.js @@ -0,0 +1,100 @@ +'use strict' + +import { exec, isArray, isFunction, isObject, isProduction, merge, overwrite, overwriteDeep } from '@domql/utils' +import { CSS_PROPS_REGISTRY } from '../props' +import { DEFAULT_CSS_PROPERTIES_LIST } from '../props/defaults' +import { applyTrueProps, transformersByPrefix } from './transformers' + +/** + * CLASS ASSIGNMENT + * Main handlers for processing and assigning classes + */ + +const isProd = isProduction() + +// Process non-setter properties and return remaining props +export const usePropsAsCSS = (sourceObj, element, opts) => { + let obj = {} + const rest = {} + + const setToObj = (key, val) => { + if (opts.unpack) { + obj = { ...obj, ...val } + return + } + obj[key] = val + } + + for (const key in sourceObj) { + const value = sourceObj[key] + if (key === 'class' && element.call('isString', sourceObj.class)) { + const val = value.split(' ') + if (val.length) { + const CLASS = element.context.designSystem.CLASS + const result = val + .reduce((acc, curr) => merge(acc, CLASS[curr]), {}) + obj.designSystemClass = result + } + } else if (key === 'true') { + const val = exec(value, element) + merge(obj, applyTrueProps(val, element)) + } else if (element.class[key]) { + const originalFromClass = element.class[key] + const result = isFunction(originalFromClass) + ? originalFromClass(element, element.state, element.context) + : originalFromClass + if (result) setToObj(key, result) + if (!isProd && isObject(obj[key])) obj[key].label = key + } else if (CSS_PROPS_REGISTRY[key]) { + let val = exec(value, element) + if (isArray(val)) { + val = val.reduce((a, c) => merge(a, c), {}) + } + const result = CSS_PROPS_REGISTRY[key](val, element, element.state, element.context) + if (result) setToObj(key, result) + if (!isProd && isObject(obj[key])) obj[key].label = key + } else if (DEFAULT_CSS_PROPERTIES_LIST.includes(key)) { + // they can be grouped + const result = exec(value, element) + setToObj(key, { [key]: result }) + if (!isProd) obj[key].label = key + } else { + rest[key] = value + } + } + + return [obj, rest] +} + +export const useSelectorsAsCSS = (sourceObj, element) => { + const obj = {} + for (const key in sourceObj) { + const selectroSetter = transformersByPrefix[key.slice(0, 1)] + if (selectroSetter) { + const result = selectroSetter(key, sourceObj[key], element) + if (result) overwriteDeep(obj, result) + } + } + return obj +} + +export const useCssInProps = (selectorProps, element, opts = { unpack: true }) => { + const [cssObj, restProps] = usePropsAsCSS(selectorProps, element, opts) + const selectorsObj = useSelectorsAsCSS(restProps, element) + if (Object.keys(selectorsObj).length) { + // console.log(opts.unpack, cssObj, selectorsObj) + if (opts.unpack) return overwrite(cssObj, selectorsObj) + cssObj._selectors = selectorsObj + } + return cssObj +} + +export const exetuteClassPerComponent = (component, element) => { + const classObj = {} + if (component.class) { + for (const classProp in component.class) { + classObj[classProp] = component.class[classProp](element) + } + } + return classObj +} diff --git a/packages/css-in-props/src/transform/index.js b/packages/css-in-props/src/transform/index.js new file mode 100644 index 000000000..65210f9a9 --- /dev/null +++ b/packages/css-in-props/src/transform/index.js @@ -0,0 +1,3 @@ +'use strict' + +export * from './executors' diff --git a/packages/css-in-props/src/transform/transformers.js b/packages/css-in-props/src/transform/transformers.js new file mode 100644 index 000000000..e3c5ada7d --- /dev/null +++ b/packages/css-in-props/src/transform/transformers.js @@ -0,0 +1,101 @@ +'use strict' + +import { useCssInProps } from './executors' + +/** + * PROP APPLICATORS + * Functions that handle different types of property applications + */ + +// Media query handler +const applyMediaProps = (key, selectorProps, element) => { + const { context } = element + if (!context.designSystem?.MEDIA) return + + // const globalTheme = getSystemGlobalTheme(element) + const mediaValue = context.designSystem.MEDIA[key.slice(1)] + const generatedClass = useCssInProps(selectorProps, element) + // const name = key.slice(1) + // console.log('==generatedClass', generatedClass) + + // Theme handling + // if (globalTheme && ['dark', 'light'].includes(name)) { + // return name === globalTheme ? merge(result, generatedClass) : undefined + // } + + // Media query construction + const mediaKey = mediaValue + ? '@media ' + (mediaValue === 'print' ? mediaValue : `screen and ${mediaValue}`) + : key + + // result[mediaKey] = generatedClass + // console.log(result, mediaKey) + // return result[mediaKey] + return { [mediaKey]: generatedClass } +} + +// Simple applicators +const applyAndProps = (key, selectorProps, element) => { + return { [key]: useCssInProps(selectorProps, element) } +} + +const applySelectorProps = (key, selectorProps, element) => { + const selectorKey = `&${key}` + return { [selectorKey]: useCssInProps(selectorProps, element) } +} + +// Conditional applicators +const applyCaseProps = (key, selectorProps, element) => { + const { CASES } = element.context?.designSystem || {} + const caseKey = key.slice(1) + const isCaseTrue = !CASES?.[caseKey] && !element.props[caseKey] + if (!isCaseTrue) return + return useCssInProps(selectorProps, element) +} + +const applyVariableProps = (key, selectorVal, element) => { + return { [key]: selectorVal } +} + +const applyConditionalCaseProps = (key, selectorProps, element) => { + const caseKey = key.slice(1) + const isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey] + if (!isCaseTrue) return + return useCssInProps(selectorProps, element) +} + +const applyConditionalFalsyProps = (key, selectorProps, element) => { + const caseKey = key.slice(1) + const isCaseTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey] + if (isCaseTrue) return + return useCssInProps(selectorProps, element) +} + +export const applyTrueProps = (selectorProps, element) => { + return useCssInProps(selectorProps, element) +} + +/** + * REGISTRY + * Mapping of key prefixes to their handler functions + */ +export const transformersByPrefix = { + // Media and theme handlers + // key, props, result, element, isSubtree + '@': applyMediaProps, + + // Selector handlers + ':': applySelectorProps, + '[': applySelectorProps, + '*': applySelectorProps, + '+': applySelectorProps, + '~': applySelectorProps, + '&': applyAndProps, + '>': applyAndProps, + + // Conditional and variable handlers + $: applyCaseProps, + '-': applyVariableProps, + '.': applyConditionalCaseProps, + '!': applyConditionalFalsyProps +} diff --git a/packages/uikit/Atoms/Box.js b/packages/uikit/Atoms/Box.js new file mode 100644 index 000000000..31f216e65 --- /dev/null +++ b/packages/uikit/Atoms/Box.js @@ -0,0 +1,44 @@ +'use strict' + +const PropsCSS = { + class: { + style: el => el.props && el.props.style + } +} + +export const Box = { + extend: [ + PropsCSS, + 'Shape', + 'Theme', + 'Text', + 'Media' + ], + attr: { + id: el => el.call('isString', el.props.id) && el.props.id, + title: el => el.call('isString', el.props.title) && el.props.title, + contentEditable: el => el.props.contentEditable || el.props.contenteditable, + dir: el => el.props.dir, + draggable: el => el.props.draggable, + hidden: el => el.props.hidden, + lang: el => el.props.lang, + spellcheck: el => el.props.spellcheck, + tabindex: el => el.props.tabindex, + translate: el => el.props.translate + } +} + +export const Hr = { + tag: 'hr', + props: { margin: 'C1 0' } +} +export const Br = { tag: 'br' } +export const Li = { tag: 'li' } +export const Ul = { + tag: 'ul', + childExtend: { extend: 'Li' } +} +export const Ol = { + tag: 'ol', + childExtend: { extend: 'Li' } +} From bfea93c6583e0412167dcbdc7bc5e4c1cf0280b4 Mon Sep 17 00:00:00 2001 From: nikoloza Date: Mon, 10 Feb 2025 08:46:49 +0400 Subject: [PATCH 06/12] added boxSizing --- packages/uikit/Atoms/Box.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/uikit/Atoms/Box.js b/packages/uikit/Atoms/Box.js index 31f216e65..1f5eb5857 100644 --- a/packages/uikit/Atoms/Box.js +++ b/packages/uikit/Atoms/Box.js @@ -14,6 +14,9 @@ export const Box = { 'Text', 'Media' ], + props: { + boxSizing: 'border-box' + }, attr: { id: el => el.call('isString', el.props.id) && el.props.id, title: el => el.call('isString', el.props.title) && el.props.title, From 305b267cb67d7e7d9b83113f7f0fcb14008bbc20 Mon Sep 17 00:00:00 2001 From: nikoloza Date: Mon, 10 Feb 2025 12:49:54 +0400 Subject: [PATCH 07/12] only extends --- example/components.js | 14 ++--- example/demo.js | 4 +- packages/create/src/define.js | 2 +- packages/preview/articles/Colors.js | 6 +- packages/preview/articles/Icons.js | 6 +- packages/preview/articles/Shadows.js | 6 +- packages/preview/articles/Shapes.js | 6 +- packages/preview/articles/Spacing.js | 4 +- packages/preview/articles/Themes.js | 14 ++--- packages/preview/articles/Typography.js | 8 +-- packages/preview/blocks/Default.js | 2 +- packages/preview/blocks/color.js | 10 ++-- packages/preview/blocks/font.js | 2 +- packages/preview/blocks/icon.js | 10 ++-- packages/preview/blocks/section.js | 2 +- packages/preview/blocks/shadow.js | 4 +- packages/preview/blocks/shape.js | 2 +- packages/preview/pages/Component.js | 6 +- packages/preview/pages/Components.js | 10 ++-- packages/preview/pages/Styleguide.js | 4 +- packages/sync/Inspect.js | 6 +- packages/sync/SyncNotifications.js | 4 +- packages/sync/index.js | 2 +- packages/uikit/Atoms/Box.js | 33 +++++++---- packages/uikit/Atoms/Collection.js | 26 ++++----- packages/uikit/Atoms/Hgroup.js | 14 ++--- packages/uikit/Atoms/InteractiveComponent.js | 4 +- packages/uikit/Atoms/Media.js | 61 -------------------- packages/uikit/Atoms/Picture.js | 4 +- packages/uikit/Atoms/Text.js | 9 +-- packages/uikit/Atoms/Video.js | 2 +- packages/uikit/Atoms/index.js | 1 - packages/uikit/Avatar/index.js | 2 +- packages/uikit/Avatar/symbols.js | 2 +- packages/uikit/Button/index.js | 18 +++--- packages/uikit/Datepicker/days.js | 2 +- packages/uikit/Datepicker/grid.js | 8 +-- packages/uikit/Datepicker/index.js | 4 +- packages/uikit/Datepicker/months.js | 4 +- packages/uikit/Datepicker/weekdays.js | 6 +- packages/uikit/Datepicker/years.js | 4 +- packages/uikit/Dialog/index.js | 10 ++-- packages/uikit/Dropdown/index.js | 6 +- packages/uikit/Icon/index.js | 6 +- packages/uikit/Input/Checkbox.js | 4 +- packages/uikit/Input/Input.js | 2 +- packages/uikit/Input/NumberInput.js | 2 +- packages/uikit/Input/Radio.js | 4 +- packages/uikit/Input/Textarea.js | 2 +- packages/uikit/Input/Toggle.js | 4 +- packages/uikit/Link/index.js | 4 +- packages/uikit/Notification/index.js | 2 +- packages/uikit/Select/index.js | 2 +- packages/uikit/TimePicker/TimePickerItem.js | 2 +- packages/uikit/TimePicker/TimeSwitcher.js | 6 +- packages/uikit/TimePicker/index.js | 2 +- packages/uikit/Tooltip/index.js | 4 +- plugins/Editorjs/index.js | 4 +- 58 files changed, 171 insertions(+), 233 deletions(-) delete mode 100644 packages/uikit/Atoms/Media.js diff --git a/example/components.js b/example/components.js index 8a37e8b30..53252c8c8 100644 --- a/example/components.js +++ b/example/components.js @@ -3,7 +3,7 @@ import { Avatar, SearchWithButton } from '@symbo.ls/uikit' export const ComponentsView = { - extend: 'Flex', + extends: 'Flex', state: { globalTheme: 'dark', @@ -75,7 +75,7 @@ export const ComponentsView = { }, cnt: { - extend: 'Flex', + extends: 'Flex', props: { flow: 'column', @@ -90,14 +90,14 @@ export const ComponentsView = { } }, - childExtend: { + childExtends: { props: ({ key, state }) => ({ hide: !key.toLowerCase().includes(state.value), position: 'relative' }), __title: { props: { - ignoreChildExtend: true, + ignoreChildExtends: true, position: 'absolute', left: '0', top: '-C', @@ -118,7 +118,7 @@ export const ComponentsView = { Avatar: {}, AvatarIndicator: {}, AvatarBundle: { - childExtend: Avatar, + childExtends: Avatar, ...[{}, {}, {}] }, AvatarChooser: { @@ -244,9 +244,9 @@ export const ComponentsView = { }, footer: { - extend: 'Flex', + extends: 'Flex', Search: { - extend: SearchWithButton, + extends: SearchWithButton, props: { minWidth: 'G+C', minHeight: 'C+X', diff --git a/example/demo.js b/example/demo.js index 69b341aef..4b9cf5c28 100644 --- a/example/demo.js +++ b/example/demo.js @@ -12,7 +12,7 @@ // pages: { // '/': { // box: { -// extend: Editorjs, +// extends: Editorjs, // $editorjs: [{ // id: 'k5OwVLgA2l', // type: 'header', @@ -776,7 +776,7 @@ window.require = (key) => { // // Example DOMQL string // const domqlString = `export const IconText = { -// extend: "Flex", +// extends: "Flex", // props: { // align: "center center", diff --git a/packages/create/src/define.js b/packages/create/src/define.js index a2066fb1f..6aa51507a 100644 --- a/packages/create/src/define.js +++ b/packages/create/src/define.js @@ -22,7 +22,7 @@ export const defaultDefine = { return obj }, - $collection: Collection.define.$collection, + children: Collection.define.children, $setCollection: Collection.define.$setCollection, $stateCollection: Collection.define.$stateCollection, $propsCollection: Collection.define.$propsCollection diff --git a/packages/preview/articles/Colors.js b/packages/preview/articles/Colors.js index 736663b32..57b086d0d 100644 --- a/packages/preview/articles/Colors.js +++ b/packages/preview/articles/Colors.js @@ -4,7 +4,7 @@ import { ColorBlock } from '../blocks' export const Colors = { tag: 'article', - extend: 'Flex', + extends: 'Flex', props: { margin: 'auto', @@ -43,12 +43,12 @@ export const Colors = { '@mobileS': { padding: '- B' } }, - childExtend: ColorBlock, + childExtends: ColorBlock, pallete: { Title: { text: 'Color pallete' }, Paragraph: { - $collection: ({ context }) => { + children: ({ context }) => { const { COLOR } = context.designSystem return Object.keys(COLOR).filter(v => COLOR[v].value) .map(v => ({ diff --git a/packages/preview/articles/Icons.js b/packages/preview/articles/Icons.js index 83424ba72..7fa9ab23b 100644 --- a/packages/preview/articles/Icons.js +++ b/packages/preview/articles/Icons.js @@ -4,11 +4,11 @@ import { icon } from '../blocks' export const Icons = { tag: 'article', - extend: 'Flex', + extends: 'Flex', Header: { tag: 'header', - extend: 'Banner', + extends: 'Banner', Title: { text: 'Icons' }, Paragraph: { P: {}, @@ -25,5 +25,5 @@ export const Icons = { } }, - Section: { extend: icon } + Section: { extends: icon } } diff --git a/packages/preview/articles/Shadows.js b/packages/preview/articles/Shadows.js index 9a1d6d823..071c14c4f 100644 --- a/packages/preview/articles/Shadows.js +++ b/packages/preview/articles/Shadows.js @@ -4,11 +4,11 @@ import { shadow } from '../blocks' export const Shadows = { tag: 'article', - extend: 'Flex', + extends: 'Flex', Header: { tag: 'header', - extend: 'Banner', + extends: 'Banner', Title: { text: 'Shadow' }, Paragraph: { @@ -27,6 +27,6 @@ export const Shadows = { }, Section: { - extend: shadow + extends: shadow } } diff --git a/packages/preview/articles/Shapes.js b/packages/preview/articles/Shapes.js index f3b4b25bc..8367221ec 100644 --- a/packages/preview/articles/Shapes.js +++ b/packages/preview/articles/Shapes.js @@ -4,11 +4,11 @@ import { shape } from '../blocks' export const Shapes = { tag: 'article', - extend: 'Flex', + extends: 'Flex', Header: { tag: 'header', - extend: 'Banner', + extends: 'Banner', Title: { props: { @@ -32,6 +32,6 @@ export const Shapes = { }, Section: { - extend: shape + extends: shape } } diff --git a/packages/preview/articles/Spacing.js b/packages/preview/articles/Spacing.js index 29bc1ed19..debf4da87 100644 --- a/packages/preview/articles/Spacing.js +++ b/packages/preview/articles/Spacing.js @@ -2,11 +2,11 @@ export const Spacing = { tag: 'article', - extend: 'Flex', + extends: 'Flex', Header: { tag: 'header', - extend: 'Banner', + extends: 'Banner', Title: { props: { diff --git a/packages/preview/articles/Themes.js b/packages/preview/articles/Themes.js index 0b342cee7..2ff19fbbb 100644 --- a/packages/preview/articles/Themes.js +++ b/packages/preview/articles/Themes.js @@ -4,7 +4,7 @@ import { ColorBlock } from '../blocks' export const Themes = { tag: 'article', - extend: 'Flex', + extends: 'Flex', Banner: { Title: { props: { text: 'Themes' } }, @@ -33,8 +33,8 @@ export const Themes = { padding: 'E C1 - C1', gap: 'E' }, - childExtend: { - extend: ColorBlock, + childExtends: { + extends: ColorBlock, Hgroup: {}, Grid: { props: { @@ -44,21 +44,21 @@ export const Themes = { border: 'none !important' } }, - childExtend: { - extend: 'Flex', + childExtends: { + extends: 'Flex', props: { flow: 'column', align: 'flex-start space-between', padding: 'Z1 Z2' }, icons: { - extend: 'Flex', + extends: 'Flex', props: { gap: 'B', align: 'center space-between', minWidth: '100%' }, - childExtend: 'Icon', + childExtends: 'Icon', $propsCollection: [ { name: 'sun' }, { name: 'moon' } diff --git a/packages/preview/articles/Typography.js b/packages/preview/articles/Typography.js index 2e92c8788..45e3e160f 100644 --- a/packages/preview/articles/Typography.js +++ b/packages/preview/articles/Typography.js @@ -4,11 +4,11 @@ import { FontsBlock } from '../blocks' export const Typography = { tag: 'article', - extend: 'Flex', + extends: 'Flex', Header: { tag: 'header', - extend: 'Banner', + extends: 'Banner', Title: { props: { text: 'type', @@ -41,7 +41,7 @@ export const Typography = { } } }, - childExtend: FontsBlock, + childExtends: FontsBlock, ...[{}, {}] } // Section: { @@ -67,7 +67,7 @@ export const Typography = { // } // Section: { - // extend: font, + // extends: font, // Title: { // props: { text: 'Sans Serif' } // }, diff --git a/packages/preview/blocks/Default.js b/packages/preview/blocks/Default.js index 4b18f111c..93de889b2 100644 --- a/packages/preview/blocks/Default.js +++ b/packages/preview/blocks/Default.js @@ -2,7 +2,7 @@ export const DefaultBlock = { tag: 'section', - extend: 'Hgroup', + extends: 'Hgroup', props: { flow: 'row', boxSizing: 'border-box', diff --git a/packages/preview/blocks/color.js b/packages/preview/blocks/color.js index 70ba5c3ee..e3add2cd5 100644 --- a/packages/preview/blocks/color.js +++ b/packages/preview/blocks/color.js @@ -3,7 +3,7 @@ import { DefaultBlock } from './section' const ColorTemplate = { - extend: 'Flex', + extends: 'Flex', props: { gap: 'A' }, @@ -16,7 +16,7 @@ const ColorTemplate = { }, Description: { - extend: 'Flex', + extends: 'Flex', props: { gap: 'X', flow: 'column' }, Title: { color: 'title' }, Value: { margin: 'X - -', color: 'paragraph' }, @@ -25,7 +25,7 @@ const ColorTemplate = { } export const ColorBlock = { - extend: DefaultBlock, + extends: DefaultBlock, Title: { props: { @@ -35,7 +35,7 @@ export const ColorBlock = { }, Paragraph: { - extend: 'Grid', + extends: 'Grid', props: { columns: 'repeat(4, 1fr)', @@ -46,6 +46,6 @@ export const ColorBlock = { '@mobileXS': { gap: 'A2' } }, - childExtend: ColorTemplate + childExtends: ColorTemplate } } diff --git a/packages/preview/blocks/font.js b/packages/preview/blocks/font.js index b647c4347..b375ced11 100644 --- a/packages/preview/blocks/font.js +++ b/packages/preview/blocks/font.js @@ -3,7 +3,7 @@ import { DefaultBlock } from './section' export const FontsBlock = { - extend: DefaultBlock, + extends: DefaultBlock, props: { flex: '1', padding: 'D D D1 D', diff --git a/packages/preview/blocks/icon.js b/packages/preview/blocks/icon.js index fc41c3e8e..7b2033b53 100644 --- a/packages/preview/blocks/icon.js +++ b/packages/preview/blocks/icon.js @@ -3,7 +3,7 @@ import { DefaultBlock } from './section' export const icon = { - extend: DefaultBlock, + extends: DefaultBlock, props: { padding: 'E D E1 D', '@mobileL': { padding: 'D C' }, @@ -12,7 +12,7 @@ export const icon = { Title: null, Paragraph: { - extend: 'Grid', + extends: 'Grid', props: { columns: 'repeat(7, 1fr)', gap: 'C', @@ -22,8 +22,8 @@ export const icon = { '@mobileS': { gap: 'Z' } // padding: 'E D E2 D' }, - childExtend: { - extend: 'Flex', + childExtends: { + extends: 'Flex', props: { align: 'center', aspectRatio: '1/1', @@ -42,7 +42,7 @@ export const icon = { } }, - $collection: ({ context }) => { + children: ({ context }) => { const { ICONS } = context.designSystem return Object.keys(ICONS).map(name => ({ Icon: { name } diff --git a/packages/preview/blocks/section.js b/packages/preview/blocks/section.js index 3096bc403..247d4d283 100644 --- a/packages/preview/blocks/section.js +++ b/packages/preview/blocks/section.js @@ -2,7 +2,7 @@ export const DefaultBlock = { tag: 'section', - extend: 'Hgroup', + extends: 'Hgroup', props: { gap: 'A' }, diff --git a/packages/preview/blocks/shadow.js b/packages/preview/blocks/shadow.js index dc4a53f7a..576fc089f 100644 --- a/packages/preview/blocks/shadow.js +++ b/packages/preview/blocks/shadow.js @@ -3,7 +3,7 @@ import { DefaultBlock } from './section' export const shadow = { - extend: DefaultBlock, + extends: DefaultBlock, props: { padding: 'D2 D', '@mobileL': { padding: 'E C' }, @@ -13,7 +13,7 @@ export const shadow = { Title: null, Paragraph: { - extend: 'Grid', + extends: 'Grid', props: { columns: 'repeat(8, 1fr)', gap: 'C2', diff --git a/packages/preview/blocks/shape.js b/packages/preview/blocks/shape.js index 1f3ae2648..c08ee4d7d 100644 --- a/packages/preview/blocks/shape.js +++ b/packages/preview/blocks/shape.js @@ -3,7 +3,7 @@ import { shadow } from './shadow' export const shape = { - extend: shadow, + extends: shadow, Title: null, Paragraph: { props: { diff --git a/packages/preview/pages/Component.js b/packages/preview/pages/Component.js index 026d84254..461f8bce6 100644 --- a/packages/preview/pages/Component.js +++ b/packages/preview/pages/Component.js @@ -1,7 +1,7 @@ 'use strict' export const Component = { - extend: 'Flex', + extends: 'Flex', props: { align: 'center center', minHeight: '100vh' @@ -12,7 +12,7 @@ export const Component = { const urlParams = new URLSearchParams(window.location.search) return !urlParams.get('hideUi') || !urlParams.get('fullsize') }, - extend: 'Flex', + extends: 'Flex', props: { align: 'center space-between', position: 'absolute', @@ -49,7 +49,7 @@ export const Component = { const schema = ctx.schema[factory][key] return { key, - extend: 'Flex', + extends: 'Flex', state: schema.state, props: () => ({ class: 'component', diff --git a/packages/preview/pages/Components.js b/packages/preview/pages/Components.js index 383d471d5..168807f05 100644 --- a/packages/preview/pages/Components.js +++ b/packages/preview/pages/Components.js @@ -1,7 +1,7 @@ 'use strict' export const ComponentsPage = { - extend: 'Flex', + extends: 'Flex', state: { globalTheme: 'dark', @@ -22,14 +22,14 @@ export const ComponentsPage = { } }, - childExtend: { + childExtends: { props: ({ key, state }) => ({ hide: !key.toLowerCase().includes(state.value), position: 'relative' }), __title: { props: { - ignoreChildExtend: true, + ignoreChildExtends: true, position: 'absolute', left: '0', top: '-C', @@ -50,7 +50,7 @@ export const ComponentsPage = { Avatar: {}, AvatarIndicator: {}, AvatarBundle: { - childExtend: 'Avatar', + childExtends: 'Avatar', ...[{}, {}, {}] }, AvatarChooser: { @@ -216,7 +216,7 @@ export const ComponentsPage = { } }, Search: { - extend: 'SearchWithButton', + extends: 'SearchWithButton', props: { minWidth: 'G+C', minHeight: 'C+X', diff --git a/packages/preview/pages/Styleguide.js b/packages/preview/pages/Styleguide.js index 84add00fb..32bb6416a 100644 --- a/packages/preview/pages/Styleguide.js +++ b/packages/preview/pages/Styleguide.js @@ -3,7 +3,7 @@ import { Colors, Typography, Shadows, Icons, Spacing, Shapes } from '../articles' export const Styleguide = { - extend: 'Flex', + extends: 'Flex', tag: 'main', props: { @@ -18,7 +18,7 @@ export const Styleguide = { } }, - childExtend: { + childExtends: { props: { flow: 'column', '> header': { diff --git a/packages/sync/Inspect.js b/packages/sync/Inspect.js index 6f0247359..2d4688665 100644 --- a/packages/sync/Inspect.js +++ b/packages/sync/Inspect.js @@ -12,7 +12,7 @@ function getComponentKey (el) { if (!el) return const __componentKey = el.__ref.__componentKey const extendStr = el.extend && returnStringExtend(el.extend) - const parentChildExtendStr = el.parent && el.parent.childExtend && returnStringExtend(el.parent.childExtend) + const parentChildExtendStr = el.parent && el.parent.childExtends && returnStringExtend(el.parent.childExtends) return (__componentKey || extendStr || parentChildExtendStr || '').split('_')[0].split('.')[0].split('+')[0] } @@ -129,7 +129,7 @@ export const Inspect = { } }), - span: { + Span: { props: { position: 'absolute', margin: 'A2 0', @@ -189,7 +189,7 @@ export const Inspect = { } el.node.style = style - el.span.node.innerText = s.focusKey + el.Span.node.innerText = s.focusKey return false } diff --git a/packages/sync/SyncNotifications.js b/packages/sync/SyncNotifications.js index 1fde1ed4f..4290f9054 100644 --- a/packages/sync/SyncNotifications.js +++ b/packages/sync/SyncNotifications.js @@ -92,8 +92,8 @@ export const Notifications = { bottom: 'Z2', zIndex: '999' }, - childExtend: { - extend: 'Notification', + childExtends: { + extends: 'Notification', props: ({ state }) => ({ animationDuration: 'C', background: NOTIF_COLORS[state.type || 'success'], diff --git a/packages/sync/index.js b/packages/sync/index.js index 9f943a941..7d6bbb016 100644 --- a/packages/sync/index.js +++ b/packages/sync/index.js @@ -84,5 +84,5 @@ export const SyncComponent = { } export const DefaultSyncApp = { - extend: [SyncComponent, Inspect, Notifications] + extends: [SyncComponent, Inspect, Notifications] } diff --git a/packages/uikit/Atoms/Box.js b/packages/uikit/Atoms/Box.js index 1f5eb5857..f9ccef283 100644 --- a/packages/uikit/Atoms/Box.js +++ b/packages/uikit/Atoms/Box.js @@ -1,18 +1,18 @@ 'use strict' -const PropsCSS = { - class: { - style: el => el.props && el.props.style - } +import { useCssInProps } from 'css-in-props' + +// Main class assignment handler +const beforeClassAssign = (element, s, ctx) => { + if (!element.context) return + const { props, __ref: ref } = element + ref.__class = useCssInProps(props, element, { unpack: false }) } export const Box = { - extend: [ - PropsCSS, + extends: [ 'Shape', - 'Theme', - 'Text', - 'Media' + 'Theme' ], props: { boxSizing: 'border-box' @@ -28,7 +28,16 @@ export const Box = { spellcheck: el => el.props.spellcheck, tabindex: el => el.props.tabindex, translate: el => el.props.translate - } + }, + class: { + style: el => el.props && el.props.style + }, + // text: (el) => { + // const { key, props, state } = el + // if (props.text === true) return (state && state[key]) || (props && props[key]) + // return el.call('exec', props.text, el) + // }, + on: { beforeClassAssign } } export const Hr = { @@ -39,9 +48,9 @@ export const Br = { tag: 'br' } export const Li = { tag: 'li' } export const Ul = { tag: 'ul', - childExtend: { extend: 'Li' } + childExtends: { extends: 'Li' } } export const Ol = { tag: 'ol', - childExtend: { extend: 'Li' } + childExtends: { extends: 'Li' } } diff --git a/packages/uikit/Atoms/Collection.js b/packages/uikit/Atoms/Collection.js index 04dbce65e..77be1972e 100644 --- a/packages/uikit/Atoms/Collection.js +++ b/packages/uikit/Atoms/Collection.js @@ -1,14 +1,14 @@ 'use strict' import { isState, getChildStateInKey } from '@domql/state' -import { isString, isNumber, isNot, isArray, isObject, isObjectLike, exec, deepClone, addAdditionalExtend } from '@domql/utils' +import { isString, isNumber, isNot, isArray, isObject, isObjectLike, exec, deepClone, applyAdditionalExtend } from '@domql/utils' export const Collection = { define: { - $collection: (param, el, state) => { + children: (param, el, state) => { const { __ref: ref } = el - const { children: childrenProps, childrenAs, childExtends } = (el.props || {}) - const children = childrenProps && exec(childrenProps, el, state) + const { childrenAs, childExtends } = (el.props || {}) + const children = param && exec(param, el, state) const childrenAsDefault = childrenAs || 'props' @@ -18,13 +18,13 @@ export const Collection = { param = deepClone(children) param = Object.keys(param).map(v => { const val = param[v] - return addAdditionalExtend(v, val) + return applyAdditionalExtend(v, val) }) } else if (isArray(children)) { param = deepClone(children) if (childrenAsDefault || childrenAsDefault !== 'element') { param = param.map(v => ({ - extend: childExtends, + extends: childExtends, [childrenAsDefault]: isObjectLike(v) ? v : childrenAsDefault === 'state' ? { value: v } : { text: v } })) } @@ -52,25 +52,23 @@ export const Collection = { param = deepClone(param) - if (ref.__collectionCache) { - const equals = JSON.stringify(param) === JSON.stringify(ref.__collectionCache) + if (ref.__childrenCache) { + const equals = JSON.stringify(param) === JSON.stringify(ref.__childrenCache) if (equals) { ref.__noCollectionDifference = true return } else { - ref.__collectionCache = deepClone(param) + ref.__childrenCache = deepClone(param) delete ref.__noCollectionDifference } } else { - ref.__collectionCache = deepClone(param) + ref.__childrenCache = deepClone(param) } const obj = { tag: 'fragment', - props: { - ignoreChildProps: true, - childProps: el.props && el.props.childProps - } + ignoreChildProps: true, + childProps: el.props && el.props.childProps } for (const key in param) { diff --git a/packages/uikit/Atoms/Hgroup.js b/packages/uikit/Atoms/Hgroup.js index 904e5f772..7787e45d9 100644 --- a/packages/uikit/Atoms/Hgroup.js +++ b/packages/uikit/Atoms/Hgroup.js @@ -1,7 +1,7 @@ 'use strict' export const Hgroup = { - extend: 'Flex', + extends: 'Flex', tag: 'hgroup', props: { @@ -35,7 +35,7 @@ export const Hgroup = { P: {}, Title: { - extend: 'Flex', + extends: 'Flex', if: ({ parent }) => parent.props.title, props: ({ parent }) => ({ text: parent.props.title, @@ -44,7 +44,7 @@ export const Hgroup = { }, Paragraph: { - extend: 'Flex', + extends: 'Flex', if: ({ parent }) => parent.props.paragraph, props: ({ parent }) => ({ text: parent.props.paragraph, @@ -54,21 +54,21 @@ export const Hgroup = { } export const HgroupRows = { - extend: 'Hgroup', + extends: 'Hgroup', Title: { - extend: 'Flex', + extends: 'Flex', props: { color: 'title', align: 'center space-between' } }, Paragraph: { - extend: 'Flex', + extends: 'Flex', props: { color: 'paragraph', align: 'center space-between' } } } export const HgroupButton = { - extend: 'HgroupRows', + extends: 'HgroupRows', Title: { props: { justifyContent: 'space-between' }, diff --git a/packages/uikit/Atoms/InteractiveComponent.js b/packages/uikit/Atoms/InteractiveComponent.js index 1047735a6..dea2c38db 100644 --- a/packages/uikit/Atoms/InteractiveComponent.js +++ b/packages/uikit/Atoms/InteractiveComponent.js @@ -31,7 +31,7 @@ export const Hoverable = { } export const Clickable = { - extend: 'Hoverable', + extends: 'Hoverable', props: { ':active': { opacity: 1, @@ -60,7 +60,7 @@ export const Focusable = { } export const FocusableComponent = { - extend: 'Focusable', + extends: 'Focusable', tag: 'button', props: { fontSize: 'A', diff --git a/packages/uikit/Atoms/Media.js b/packages/uikit/Atoms/Media.js deleted file mode 100644 index 7bdbb33f3..000000000 --- a/packages/uikit/Atoms/Media.js +++ /dev/null @@ -1,61 +0,0 @@ -'use strict' - -import { useCssInProps } from 'css-in-props' - -// Main class assignment handler -const beforeClassAssign = (element, s, ctx) => { - if (!element.context) return - - // console.group(element.key) - // Initialize class names container - const { props, __ref: ref } = element - - // // Handle global theme - // const globalTheme = element.context.designSystem.globalTheme - // if (globalTheme && props.theme && !props.themeModifier) { - // props.themeModifier = globalTheme - // // props.update({ themeModifier: globalTheme }, { - // // preventListeners: true, - // // preventRecursive: true, - // // isForced: true, - // // preventDefineUpdate: true - // // }) - // } - - // if (element.key === 'Logo') debugger - - // Process props in two passes - // console.log('----') - // console.log('before', ref.__class) - ref.__class = useCssInProps(props, element, { unpack: false }) - // console.log('after', ref.__class) - - // console.error('yo') - // console.log(CLASS_NAMES) - - // Handle spacing inheritance - // const { parent } = element - // if (parent?.props?.spacingRatio && parent.props.inheritSpacingRatio) { - // element.setProps({ - // spacingRatio: parent.props.spacingRatio, - // inheritSpacingRatio: true - // }, { - // preventListeners: true, - // preventRecursive: true, - // isForced: true, - // preventDefineUpdate: true - // }) - // } - - // console.log(CLASS_NAMES) - - // console.log(CLASS_NAMES, className, ref.__class) - // overwriteShallow(ref.__class, CLASS_NAMES) - - // console.groupEnd(element.key) -} - -// Export Media component -export const Media = { - on: { beforeClassAssign } -} diff --git a/packages/uikit/Atoms/Picture.js b/packages/uikit/Atoms/Picture.js index 3cb318348..c083215c5 100644 --- a/packages/uikit/Atoms/Picture.js +++ b/packages/uikit/Atoms/Picture.js @@ -6,7 +6,7 @@ export const Picture = { deps: { getSystemGlobalTheme }, tag: 'picture', - childExtend: { + childExtends: { tag: 'source', attr: { media: (element) => { @@ -26,7 +26,7 @@ export const Picture = { Img: ({ props }) => ({ width: 'inherit', - ignoreChildExtend: true, + ignoreChildExtends: true, height: 'inherit', src: props.src }) diff --git a/packages/uikit/Atoms/Text.js b/packages/uikit/Atoms/Text.js index 9a19ac51f..db8e8fdf5 100644 --- a/packages/uikit/Atoms/Text.js +++ b/packages/uikit/Atoms/Text.js @@ -1,13 +1,6 @@ 'use strict' -export const Text = { - text: (el) => { - const { key, props, state, deps } = el - if (props.text === true) return (state && state[key]) || (props && props[key]) - // return console.log(el) || deps.exec(props.text, el) - return deps.exec(props.text, el) - } -} +export const Text = {} export const H1 = { tag: 'h1' } export const H2 = { tag: 'h2' } diff --git a/packages/uikit/Atoms/Video.js b/packages/uikit/Atoms/Video.js index 917a1295f..bcea2e4c7 100644 --- a/packages/uikit/Atoms/Video.js +++ b/packages/uikit/Atoms/Video.js @@ -3,7 +3,7 @@ export const Video = { tag: 'video', - childExtend: { + childExtends: { tag: 'source', attr: { src: ({ props }) => props.src, diff --git a/packages/uikit/Atoms/index.js b/packages/uikit/Atoms/index.js index d0f91c12e..754c5599f 100644 --- a/packages/uikit/Atoms/index.js +++ b/packages/uikit/Atoms/index.js @@ -3,7 +3,6 @@ export * from './Block' export * from './Img' export * from './Form' -export * from './Media' export * from './Iframe' export * from './InteractiveComponent' export * from './Collection' diff --git a/packages/uikit/Avatar/index.js b/packages/uikit/Avatar/index.js index 52b797872..d39fcc940 100644 --- a/packages/uikit/Avatar/index.js +++ b/packages/uikit/Avatar/index.js @@ -1,7 +1,7 @@ 'use strict' export const Avatar = { - extend: 'Img', + extends: 'Img', props: { display: 'block', avatarType: 'adventurer-neutral', diff --git a/packages/uikit/Avatar/symbols.js b/packages/uikit/Avatar/symbols.js index 202c0b3f6..a29b0f35e 100644 --- a/packages/uikit/Avatar/symbols.js +++ b/packages/uikit/Avatar/symbols.js @@ -13,7 +13,7 @@ const state = {} const props = {} const value = { - extend: Avatar + extends: Avatar } const code = '' diff --git a/packages/uikit/Button/index.js b/packages/uikit/Button/index.js index 2d21f1526..0aa754e4d 100644 --- a/packages/uikit/Button/index.js +++ b/packages/uikit/Button/index.js @@ -13,12 +13,12 @@ * @example * // Example usage of the Button component: * const myButton = { - * extend: Button + * extends: Button * } */ export const Button = { - extend: ['IconText', 'FocusableComponent'], + extends: ['IconText', 'FocusableComponent'], tag: 'button', props: { @@ -42,7 +42,7 @@ export const Button = { } export const SquareButton = { - extend: 'Button', + extends: 'Button', props: { fontSize: 'A', width: 'A', @@ -57,23 +57,23 @@ export const SquareButton = { } export const CircleButton = { - extend: 'SquareButton', + extends: 'SquareButton', props: { round: 'C' } } export const KangorooButton = { - extend: 'Button', - childExtend: 'IconText' + extends: 'Button', + childExtends: 'IconText' } export const ButtonSet = { tag: 'nav', - extend: 'Flex', - childExtend: 'SquareButton' + extends: 'Flex', + childExtends: 'SquareButton' } export const IconButton = { - extend: [ + extends: [ 'SquareButton', 'ClickableItem' ], diff --git a/packages/uikit/Datepicker/days.js b/packages/uikit/Datepicker/days.js index 4fb0c65d6..4b3f979eb 100644 --- a/packages/uikit/Datepicker/days.js +++ b/packages/uikit/Datepicker/days.js @@ -1,7 +1,7 @@ 'use strict' export const DatePickerDay = { - extend: 'Button', + extends: 'Button', state: true, props: ({ state, key }) => { diff --git a/packages/uikit/Datepicker/grid.js b/packages/uikit/Datepicker/grid.js index f00dfea73..d6feac253 100644 --- a/packages/uikit/Datepicker/grid.js +++ b/packages/uikit/Datepicker/grid.js @@ -20,7 +20,7 @@ const extractMonthDays = (data) => { } export const DatePickerGrid = { - extend: 'Grid', + extends: 'Grid', props: { columns: 'repeat(7, 1fr)', @@ -30,7 +30,7 @@ export const DatePickerGrid = { style: { scrollSnapAlign: 'center' } }, - childExtend: DatePickerDay, + childExtends: DatePickerDay, $stateCollection: ({ state }) => state.days } @@ -84,8 +84,8 @@ export const DatePickerGridContainer = { }, Flex: { - childExtend: { - extend: DatePickerGrid, + childExtends: { + extends: DatePickerGrid, on: { render: (el, state) => { const { key } = el diff --git a/packages/uikit/Datepicker/index.js b/packages/uikit/Datepicker/index.js index ee68b7151..85362011d 100644 --- a/packages/uikit/Datepicker/index.js +++ b/packages/uikit/Datepicker/index.js @@ -10,7 +10,7 @@ export * from './years' export * from './grid' export const DatePicker = { - extend: [Dialog, Flex], + extends: [Dialog, Flex], state: ({ props }) => { const date = new Date() @@ -53,7 +53,7 @@ export const DatePicker = { } export const DatePickerTwoColumns = { - extend: DatePicker, + extends: DatePicker, DatePickerYears: {}, Flex: { DatePickerMonthsSlider: { diff --git a/packages/uikit/Datepicker/months.js b/packages/uikit/Datepicker/months.js index 87359dc3a..993f830ea 100644 --- a/packages/uikit/Datepicker/months.js +++ b/packages/uikit/Datepicker/months.js @@ -1,7 +1,7 @@ 'use strict' export const DatePickerMonthsSlider = { - extend: 'Flex', + extends: 'Flex', props: { position: 'relative', overflow: 'hidden', @@ -76,7 +76,7 @@ export const DatePickerMonthsSlider = { '::-webkit-scrollbar': { display: 'none' } }, - childExtend: { + childExtends: { tag: 'h6', props: ({ state, key }) => ({ fontSize: 'Z1', diff --git a/packages/uikit/Datepicker/weekdays.js b/packages/uikit/Datepicker/weekdays.js index f659fd636..85fcc474c 100644 --- a/packages/uikit/Datepicker/weekdays.js +++ b/packages/uikit/Datepicker/weekdays.js @@ -1,7 +1,7 @@ 'use strict' export const DatePickerWeekDays = { - extend: 'Grid', + extends: 'Grid', props: { overflow: 'hidden', padding: '- Z A', @@ -14,9 +14,9 @@ export const DatePickerWeekDays = { } } }, - childExtend: { + childExtends: { tag: 'span', - extend: 'Flex', + extends: 'Flex', props: { fontSize: 'Y1', textTransform: 'capitalize', diff --git a/packages/uikit/Datepicker/years.js b/packages/uikit/Datepicker/years.js index 6eb3b7425..7b517b426 100644 --- a/packages/uikit/Datepicker/years.js +++ b/packages/uikit/Datepicker/years.js @@ -43,8 +43,8 @@ export const DatePickerYears = { '::-webkit-scrollbar': { display: 'none' } }, - childExtend: { - extend: 'Button', + childExtends: { + extends: 'Button', props: ({ state, text }) => ({ fontSize: 'Y1', opacity: '.4', diff --git a/packages/uikit/Dialog/index.js b/packages/uikit/Dialog/index.js index 39e4d31af..8c59c2572 100644 --- a/packages/uikit/Dialog/index.js +++ b/packages/uikit/Dialog/index.js @@ -1,7 +1,7 @@ 'use strict' export const Dialog = { - extend: 'Flex', + extends: 'Flex', tag: 'dialog', props: { @@ -13,7 +13,7 @@ export const Dialog = { } export const DialogHeader = { - extend: 'Hgroup', + extends: 'Hgroup', props: { minWidth: '100%', @@ -37,7 +37,7 @@ export const DialogHeader = { } export const DialogFooter = { - extend: 'Flex', + extends: 'Flex', props: { align: 'center flex-end', @@ -46,8 +46,8 @@ export const DialogFooter = { padding: 'Y2 X2' }, - childExtend: { - extend: 'Button', + childExtends: { + extends: 'Button', props: { textTransform: 'uppercase', background: 'transparent', diff --git a/packages/uikit/Dropdown/index.js b/packages/uikit/Dropdown/index.js index b70fd162d..9df2c4a24 100644 --- a/packages/uikit/Dropdown/index.js +++ b/packages/uikit/Dropdown/index.js @@ -1,7 +1,7 @@ 'use strict' export const DropdownList = { - extend: 'Flex', + extends: 'Flex', attr: { dropdown: true @@ -26,8 +26,8 @@ export const DropdownList = { } }, - childExtend: { - extend: 'Button', + childExtends: { + extends: 'Button', state: {}, props: { isActive: ({ key, state }) => state.active === key, diff --git a/packages/uikit/Icon/index.js b/packages/uikit/Icon/index.js index ae1c2e4dd..7ef677693 100644 --- a/packages/uikit/Icon/index.js +++ b/packages/uikit/Icon/index.js @@ -18,7 +18,7 @@ const getIconName = (el, s) => { } export const Icon = { - extend: 'Svg', + extends: 'Svg', props: (el, s, ctx) => { const { props, parent } = el const { ICONS, useIconSprite, verbose } = ctx && ctx.designSystem @@ -75,7 +75,7 @@ export const Icon = { } export const IconText = { - extend: 'Flex', + extends: 'Flex', props: { align: 'center center', @@ -106,7 +106,7 @@ export const IconText = { } export const FileIcon = { - extend: 'Flex', + extends: 'Flex', props: { theme: 'tertiary', boxSize: 'C1', diff --git a/packages/uikit/Input/Checkbox.js b/packages/uikit/Input/Checkbox.js index be4985edd..b687fe432 100644 --- a/packages/uikit/Input/Checkbox.js +++ b/packages/uikit/Input/Checkbox.js @@ -1,7 +1,7 @@ 'use strict' export const Checkbox = { - extend: 'Focusable', + extends: 'Focusable', tag: 'label', @@ -41,7 +41,7 @@ export const Checkbox = { } export const CheckboxHgroup = { - extend: 'Flex', + extends: 'Flex', tag: 'label', props: { diff --git a/packages/uikit/Input/Input.js b/packages/uikit/Input/Input.js index dab73e4fd..35033db42 100644 --- a/packages/uikit/Input/Input.js +++ b/packages/uikit/Input/Input.js @@ -1,7 +1,7 @@ 'use strict' export const Input = { - extend: ['Focusable'], + extends: ['Focusable'], tag: 'input', diff --git a/packages/uikit/Input/NumberInput.js b/packages/uikit/Input/NumberInput.js index 6ee3f9150..e9270e9e6 100644 --- a/packages/uikit/Input/NumberInput.js +++ b/packages/uikit/Input/NumberInput.js @@ -1,7 +1,7 @@ 'use strict' export const NumberInput = { - extend: ['Flex', 'Input'], + extends: ['Flex', 'Input'], props: { type: 'number', diff --git a/packages/uikit/Input/Radio.js b/packages/uikit/Input/Radio.js index 13048aaa7..c942577e5 100644 --- a/packages/uikit/Input/Radio.js +++ b/packages/uikit/Input/Radio.js @@ -1,7 +1,7 @@ 'use strict' export const Radio = { - extend: 'Checkbox', + extends: 'Checkbox', Input: { type: 'radio', @@ -25,7 +25,7 @@ export const Radio = { } export const RadioHgroup = { - extend: 'CheckboxHgroup', + extends: 'CheckboxHgroup', Checkbox: null, Radio: {} } diff --git a/packages/uikit/Input/Textarea.js b/packages/uikit/Input/Textarea.js index 91f4a40c3..8d2f1312c 100644 --- a/packages/uikit/Input/Textarea.js +++ b/packages/uikit/Input/Textarea.js @@ -2,7 +2,7 @@ export const Textarea = { tag: 'textarea', - extend: ['Input', 'Flex'], + extends: ['Input', 'Flex'], props: { variant: 'outlined', diff --git a/packages/uikit/Input/Toggle.js b/packages/uikit/Input/Toggle.js index e6929f143..2efd75b65 100644 --- a/packages/uikit/Input/Toggle.js +++ b/packages/uikit/Input/Toggle.js @@ -1,7 +1,7 @@ 'use strict' export const Toggle = { - extend: 'Checkbox', + extends: 'Checkbox', Input: { ':checked + div': { @@ -30,7 +30,7 @@ export const Toggle = { } export const ToggleHgroup = { - extend: 'CheckboxHgroup', + extends: 'CheckboxHgroup', Checkbox: null, Toggle: {} } diff --git a/packages/uikit/Link/index.js b/packages/uikit/Link/index.js index e8dcd62e2..0662644dc 100644 --- a/packages/uikit/Link/index.js +++ b/packages/uikit/Link/index.js @@ -3,7 +3,7 @@ import { router as defaultRouter } from '@domql/router' export const Link = { - extend: 'Focusable', + extends: 'Focusable', tag: 'a', props: { aria: {}, @@ -64,5 +64,5 @@ export const RouterLink = { } export const RouteLink = { - extend: [Link, RouterLink] + extends: [Link, RouterLink] } diff --git a/packages/uikit/Notification/index.js b/packages/uikit/Notification/index.js index d8c6b7253..f16871867 100644 --- a/packages/uikit/Notification/index.js +++ b/packages/uikit/Notification/index.js @@ -1,7 +1,7 @@ 'use strict' export const Notification = { - extend: 'Flex', + extends: 'Flex', props: { theme: 'alert', diff --git a/packages/uikit/Select/index.js b/packages/uikit/Select/index.js index 9b8d87944..faa000d1d 100644 --- a/packages/uikit/Select/index.js +++ b/packages/uikit/Select/index.js @@ -1,7 +1,7 @@ 'use strict' export const Select = { - extend: 'Focusable', + extends: 'Focusable', tag: 'select', props: { diff --git a/packages/uikit/TimePicker/TimePickerItem.js b/packages/uikit/TimePicker/TimePickerItem.js index 1950fc0c9..af1b5c4a6 100644 --- a/packages/uikit/TimePicker/TimePickerItem.js +++ b/packages/uikit/TimePicker/TimePickerItem.js @@ -14,7 +14,7 @@ const props = { export const TimePickerItem = { tag: 'label', - extend: 'Flex', + extends: 'Flex', props, Button_plus: { icon: 'plus' }, NumberInput: { diff --git a/packages/uikit/TimePicker/TimeSwitcher.js b/packages/uikit/TimePicker/TimeSwitcher.js index d8674a213..07ec02f5e 100644 --- a/packages/uikit/TimePicker/TimeSwitcher.js +++ b/packages/uikit/TimePicker/TimeSwitcher.js @@ -10,10 +10,10 @@ const props = { export const TimeSwitcher = { props, - extend: 'Flex', + extends: 'Flex', - childExtend: { - extend: 'Button', + childExtends: { + extends: 'Button', props: { padding: '0', flex: '1', diff --git a/packages/uikit/TimePicker/index.js b/packages/uikit/TimePicker/index.js index 8b98acd61..beddbfbb1 100644 --- a/packages/uikit/TimePicker/index.js +++ b/packages/uikit/TimePicker/index.js @@ -7,7 +7,7 @@ export * from './TimePickerItem' export * from './TimeSwitcher' export const TimePicker = { - extend: [Dialog, Flex], + extends: [Dialog, Flex], state: { activeShift: 'am' diff --git a/packages/uikit/Tooltip/index.js b/packages/uikit/Tooltip/index.js index 0cec578af..4ba46ab7c 100644 --- a/packages/uikit/Tooltip/index.js +++ b/packages/uikit/Tooltip/index.js @@ -3,7 +3,7 @@ import { isDefined } from '@domql/utils' export const Tooltip = { - extend: 'Flex', + extends: 'Flex', props: { theme: 'dialog', @@ -42,7 +42,7 @@ export const Tooltip = { } export const TooltipHidden = { - extend: 'Tooltip', + extends: 'Tooltip', props: ({ props }) => ({ position: 'absolute', diff --git a/plugins/Editorjs/index.js b/plugins/Editorjs/index.js index 355d0f8e6..e583c58b8 100644 --- a/plugins/Editorjs/index.js +++ b/plugins/Editorjs/index.js @@ -10,12 +10,12 @@ export const Editorjs = { on: { init: () => initMutiny() }, - childExtend: { + childExtends: { html: (el, s) => { const text = el.text || el.props.text if (text && text.includes(' el.props.text || el.text } }, From 7693e28fbc5fc46039801eab3790b7aa79a77a39 Mon Sep 17 00:00:00 2001 From: nikoloza Date: Mon, 10 Feb 2025 17:24:10 +0400 Subject: [PATCH 08/12] props children fallback --- packages/uikit/Atoms/Collection.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/uikit/Atoms/Collection.js b/packages/uikit/Atoms/Collection.js index 77be1972e..f44f13cab 100644 --- a/packages/uikit/Atoms/Collection.js +++ b/packages/uikit/Atoms/Collection.js @@ -8,10 +8,17 @@ export const Collection = { children: (param, el, state) => { const { __ref: ref } = el const { childrenAs, childExtends } = (el.props || {}) - const children = param && exec(param, el, state) + const children = (param && exec(param, el, state)) || (el.props.children && exec(el.props.children, el, state)) const childrenAsDefault = childrenAs || 'props' + if (children || el.props.children) { + console.log('222---') + console.log(children) + console.log(el.props.children) + console.log(el) + } + if (children) { if (isObject(children)) { if (children.$$typeof) return el.call('renderReact', children, el) From 042378fda4709dc7133efd1de5b1e02fecec11be Mon Sep 17 00:00:00 2001 From: nikoloza Date: Mon, 10 Feb 2025 19:49:31 +0400 Subject: [PATCH 09/12] children cleanup --- packages/uikit/Atoms/Box.js | 10 +++++----- packages/uikit/Atoms/Collection.js | 12 ++++++------ 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/uikit/Atoms/Box.js b/packages/uikit/Atoms/Box.js index f9ccef283..90e9d34aa 100644 --- a/packages/uikit/Atoms/Box.js +++ b/packages/uikit/Atoms/Box.js @@ -32,11 +32,11 @@ export const Box = { class: { style: el => el.props && el.props.style }, - // text: (el) => { - // const { key, props, state } = el - // if (props.text === true) return (state && state[key]) || (props && props[key]) - // return el.call('exec', props.text, el) - // }, + text: (el) => { + const { key, props, state } = el + if (props.text === true) return (state && state[key]) || (props && props[key]) + return el.call('exec', props.text, el) + }, on: { beforeClassAssign } } diff --git a/packages/uikit/Atoms/Collection.js b/packages/uikit/Atoms/Collection.js index f44f13cab..e28a2f902 100644 --- a/packages/uikit/Atoms/Collection.js +++ b/packages/uikit/Atoms/Collection.js @@ -12,12 +12,12 @@ export const Collection = { const childrenAsDefault = childrenAs || 'props' - if (children || el.props.children) { - console.log('222---') - console.log(children) - console.log(el.props.children) - console.log(el) - } + // if (children || el.props.children) { + // console.log('222---') + // console.log(children) + // console.log(el.props.children) + // console.log(el) + // } if (children) { if (isObject(children)) { From 770db9960e3a242056de2239e17b19b023ac7189 Mon Sep 17 00:00:00 2001 From: nikoloza Date: Wed, 12 Feb 2025 04:22:43 +0400 Subject: [PATCH 10/12] default config cleanup --- packages/create/src/define.js | 5 +- packages/default-config/package.json | 4 +- packages/default-config/src/color.js | 70 ------ packages/default-config/src/font.js | 14 -- packages/default-config/src/index.js | 46 ---- packages/default-config/src/media.js | 31 --- packages/default-config/src/spacing.js | 6 - packages/default-config/src/theme.js | 247 ---------------------- packages/default-config/src/timing.js | 8 - packages/default-config/src/typography.js | 8 - packages/preview/articles/Themes.js | 2 +- packages/preview/articles/Typography.js | 3 +- packages/sync/SyncNotifications.js | 19 +- packages/uikit/Atoms/Box.js | 1 + packages/uikit/Atoms/Collection.js | 123 ----------- packages/uikit/Datepicker/grid.js | 32 +-- packages/uikit/Datepicker/months.js | 2 +- packages/uikit/Datepicker/years.js | 2 +- 18 files changed, 35 insertions(+), 588 deletions(-) delete mode 100644 packages/default-config/src/color.js delete mode 100644 packages/default-config/src/font.js delete mode 100644 packages/default-config/src/index.js delete mode 100644 packages/default-config/src/media.js delete mode 100644 packages/default-config/src/spacing.js delete mode 100644 packages/default-config/src/theme.js delete mode 100644 packages/default-config/src/timing.js delete mode 100644 packages/default-config/src/typography.js diff --git a/packages/create/src/define.js b/packages/create/src/define.js index 6aa51507a..040313847 100644 --- a/packages/create/src/define.js +++ b/packages/create/src/define.js @@ -22,8 +22,5 @@ export const defaultDefine = { return obj }, - children: Collection.define.children, - $setCollection: Collection.define.$setCollection, - $stateCollection: Collection.define.$stateCollection, - $propsCollection: Collection.define.$propsCollection + children: Collection.define.children } diff --git a/packages/default-config/package.json b/packages/default-config/package.json index 7df511585..12fa5dff7 100644 --- a/packages/default-config/package.json +++ b/packages/default-config/package.json @@ -1,8 +1,8 @@ { "name": "@symbo.ls/default-config", "version": "2.11.508", - "source": "src/index.js", - "main": "src/index.js", + "source": "blank/index.js", + "main": "blank/index.js", "type": "module", "dependencies": { "@symbo.ls/default-icons": "^2.11.475" diff --git a/packages/default-config/src/color.js b/packages/default-config/src/color.js deleted file mode 100644 index a3cd7fd09..000000000 --- a/packages/default-config/src/color.js +++ /dev/null @@ -1,70 +0,0 @@ -'use strict' - -export const COLOR = { - blue: '#213eb0', - green: '#389d34', - red: '#e15c55', - yellow: '#EDCB38', - orange: '#e97c16', - transparent: 'rgba(0, 0, 0, 0)', - black: 'black', - gray: '#4e4e50', - white: 'white', - title: [ - '--gray 1 -168', - '--gray 1 +168' - ], - caption: [ - '--gray 1 -68', - '--gray 1 +68' - ], - paragraph: [ - '--gray 1 -42', - '--gray 1 +42' - ], - disabled: [ - '--gray 1 -26', - '--gray 1 +26' - ], - line: [ - '--gray 1 -16', - '--gray 1 +16' - ] -} - -export const GRADIENT = { - 'gradient-blue-light': `linear-gradient(to right, - rgba(4, 116, 242, 1), - rgba(0, 48, 103, 1) - )`, - 'gradient-blue-dark': `linear-gradient(to right, - #0474F2, - #003067 - )`, - - 'gradient-dark': `linear-gradient(0deg, - rgba(0,0,0,0.06) 0%, - rgba(0,0,0,0.07) 100% - )`, - 'gradient-dark-active': `linear-gradient(0deg, - rgba(0,0,0,0.09) 0%, - rgba(0,0,0,0.1) 100% - )`, - 'gradient-light': `linear-gradient( - 0deg, - rgba(255,255,255,0.05) 0%, - rgba(255,255,255,0.06) 100% - )`, - 'gradient-light-active': `linear-gradient( - 0deg, - rgba(255,255,255,0.09) 0%, - rgba(255,255,255,0.10) 100% - )`, - 'gradient-colorful': `linear-gradient(60deg, - #00A2E7 0%, - #185DF3 31%, - #1E54F0 36%, - #8B4CCA 69%, - #C66894 100% - )` -} diff --git a/packages/default-config/src/font.js b/packages/default-config/src/font.js deleted file mode 100644 index 1c895a8e1..000000000 --- a/packages/default-config/src/font.js +++ /dev/null @@ -1,14 +0,0 @@ -'use strict' - -export const FONT = { - SourceSans: [{ - url: '' - }] -} - -export const FONT_FAMILY = { - system: { - value: ['"Helvetica Neue"', 'Helvetica', 'Arial'], - type: 'sans-serif' - } -} diff --git a/packages/default-config/src/index.js b/packages/default-config/src/index.js deleted file mode 100644 index f94818d17..000000000 --- a/packages/default-config/src/index.js +++ /dev/null @@ -1,46 +0,0 @@ -'use strict' - -import { DEFAULT_ICONS } from '@symbo.ls/default-icons' -import { COLOR, GRADIENT } from './color' -import { THEME } from './theme' -import { TYPOGRAPHY } from './typography' -import { SPACING } from './spacing' -import { FONT, FONT_FAMILY } from './font' -import { MEDIA } from './media' -import { TIMING } from './timing' - -export const DEFAULT_CONFIG = { - version: '0.0.1', - COLOR, - GRADIENT, - THEME, - TYPOGRAPHY, - SPACING, - FONT, - FONT_FAMILY, - TIMING, - ICONS: DEFAULT_ICONS, - MEDIA, - RESET: { - html: { - }, - body: { - } - }, - ANIMATION: { - fadeIn: { - from: { - opacity: 0 - }, - to: { - opacity: 1 - } - } - }, - DEVICES: {}, - CASES: {}, - CLASS: {}, - SVG: {} // TODO: Check with @nikoloza on this -} - -export default DEFAULT_CONFIG diff --git a/packages/default-config/src/media.js b/packages/default-config/src/media.js deleted file mode 100644 index 4ef881ac2..000000000 --- a/packages/default-config/src/media.js +++ /dev/null @@ -1,31 +0,0 @@ -'use strict' - -export const MEDIA = { - tv: '(min-width: 2780px)', - - screenL: '(max-width: 1920px)', - 'screenL<': '(min-width: 1920px)', - screenM: '(max-width: 1680px)', - 'screenM<': '(min-width: 1680px)', - screenS: '(max-width: 1440px)', - 'screenS<': '(min-width: 1440px)', - tabletL: '(max-width: 1366px)', - 'tabletL<': '(min-width: 1366px)', - tabletM: '(max-width: 1280px)', - 'tabletM<': '(min-width: 1280px)', - tabletS: '(max-width: 1024px)', - 'tabletS<': '(min-width: 1024px)', - mobileL: '(max-width: 768px)', - 'mobileL<': '(min-width: 768px)', - mobileM: '(max-width: 560px)', - 'mobileM<': '(min-width: 560px)', - mobileS: '(max-width: 480px)', - 'mobileS<': '(min-width: 480px)', - mobileXS: '(max-width: 375px)', - 'mobileXS<': '(min-width: 375px)', - - light: '(prefers-color-scheme: light)', - dark: '(prefers-color-scheme: dark)', - - print: 'print' -} diff --git a/packages/default-config/src/spacing.js b/packages/default-config/src/spacing.js deleted file mode 100644 index 3a771de60..000000000 --- a/packages/default-config/src/spacing.js +++ /dev/null @@ -1,6 +0,0 @@ -'use strict' - -export const SPACING = { - ratio: 1.618, - subSequence: true -} diff --git a/packages/default-config/src/theme.js b/packages/default-config/src/theme.js deleted file mode 100644 index e25f14eaf..000000000 --- a/packages/default-config/src/theme.js +++ /dev/null @@ -1,247 +0,0 @@ -'use strict' - -const PRIORITIES = { - primary: { - '@dark': { - color: 'white', - background: 'blue', - '.color-only': { - color: 'blue' - }, - '.inactive': { - background: 'gray 1 +16' - }, - '.gradient': { - color: 'white', - background: 'gradient-blue' - } - }, - '@light': { - color: 'white', - background: 'gradient-blue', - '.color-only': { - color: 'blue' - }, - '.gradient': { - color: 'white', - background: 'gradient-colorful' - } - } - }, - - secondary: { - '@dark': { - color: 'white', - background: 'green', - '.color-only': { - color: 'green' - } - }, - '@light': { - color: 'white', - background: 'green', - '.color-only': { - color: 'green' - } - }, - - '.child': '--primary' - }, - - tertiary: { - '@dark': { - color: 'white', - background: 'gray .92 +8' - }, - '@light': { - background: 'gray .1' - } - }, - - quaternary: { - '@light': { - color: 'white', - background: 'gradient-light' - }, - '@dark': { - color: 'white', - background: 'gradient-dark-active' - } - }, - - quinary: { - '@dark': { - color: 'gray 1 90', - background: 'gradient-light', - - ':hover': { - color: 'gray 1 95', - background: 'gradient-light-active' - }, - - ':focus': { - color: 'gray 1 120', - background: 'gradient-light-active' - }, - - ':active': { - color: 'gray 1 120', - background: 'gradient-light-active' - }, - - '.active': { - color: 'gray 1 120', - background: 'gradient-light-active' - } - }, - - '@light': { - color: 'gray3', - background: 'gradient-dark', - - ':hover': { - color: 'gray1', - background: 'gradient-dark-active' - }, - - ':active': { - color: 'gray1', - background: 'gradient-dark-active' - }, - - '.active': { - color: 'gray1', - background: 'gradient-dark-active' - } - } - } -} - -const STATES = { - alert: { - '@dark': { - color: 'white', - background: 'red' - } - }, - - warning: { - '@dark': { - color: 'black', - background: 'yellow' - } - }, - - success: { - '@dark': { - color: 'black', - background: 'green' - } - } -} - -const UI = { - field: { - '@light': { - color: 'black', - background: 'gray .975 +144', - borderColor: 'gray .975 +144', - '::placeholder': { color: 'gray 1 -68' } - }, - '@dark': { - color: 'white', - background: 'gray .975 -52', - borderColor: 'gray .975 -52', - '::placeholder': { color: 'gray 1 +68' } - } - }, - - label: { - '@dark': { - color: 'white', - background: 'gray .92 +8' - }, - - '@light': { - background: 'gray .1' - }, - - '.light': { - color: 'white', - background: 'gray3' - }, - - '.dark': { - color: 'white', - background: 'black .35' - } - }, - - card: { - '@light': { - background: 'gray .975 +150' - }, - - '@dark': { - color: 'white', - background: 'gray .975 -56' - }, - - '.child': { - color: 'white', - background: 'gray3' - }, - - '.secondary': { - color: 'white', - background: 'gradient-blue-dark', - - '.child': { - color: 'white', - background: 'black .35' - } - } - }, - - dialog: { - '@dark': { - color: 'white', - background: 'gray .92', - '.helper': { - color: 'white', - background: 'black' - } - }, - '@light': { - color: 'currentColor', - background: 'gray .1' - } - } -} - -export const THEME = { - document: { - '@light': { - color: 'black', - background: 'white' - }, - '@dark': { - color: 'white', - background: 'black' - } - }, - - ...PRIORITIES, - ...STATES, - ...UI, - - none: { - color: 'none', - background: 'none' - }, - - transparent: { - color: 'currentColor', - background: 'transparent' - } -} diff --git a/packages/default-config/src/timing.js b/packages/default-config/src/timing.js deleted file mode 100644 index 98196bb47..000000000 --- a/packages/default-config/src/timing.js +++ /dev/null @@ -1,8 +0,0 @@ -'use strict' - -export const TIMING = { - base: 150, - ratio: 1.333, - unit: 'ms', - subSequence: true -} diff --git a/packages/default-config/src/typography.js b/packages/default-config/src/typography.js deleted file mode 100644 index fad5aa214..000000000 --- a/packages/default-config/src/typography.js +++ /dev/null @@ -1,8 +0,0 @@ -'use strict' - -export const TYPOGRAPHY = { - base: 16, - ratio: 1.25, - subSequence: true, - templates: {} -} diff --git a/packages/preview/articles/Themes.js b/packages/preview/articles/Themes.js index 2ff19fbbb..f67cbc99d 100644 --- a/packages/preview/articles/Themes.js +++ b/packages/preview/articles/Themes.js @@ -59,7 +59,7 @@ export const Themes = { minWidth: '100%' }, childExtends: 'Icon', - $propsCollection: [ + children: [ { name: 'sun' }, { name: 'moon' } ] diff --git a/packages/preview/articles/Typography.js b/packages/preview/articles/Typography.js index 45e3e160f..83bb6c76f 100644 --- a/packages/preview/articles/Typography.js +++ b/packages/preview/articles/Typography.js @@ -80,7 +80,8 @@ export const Typography = { // } // }, - // $stateCollection: ({ context }) => { + // childrenAs: 'state', + // children: ({ context }) => { // const { FONT } = context.designSystem // return Object.keys(FONT).map(v => ({ // name: v diff --git a/packages/sync/SyncNotifications.js b/packages/sync/SyncNotifications.js index 4290f9054..3b215f956 100644 --- a/packages/sync/SyncNotifications.js +++ b/packages/sync/SyncNotifications.js @@ -98,14 +98,6 @@ export const Notifications = { animationDuration: 'C', background: NOTIF_COLORS[state.type || 'success'], icon: null, - Flex: { - Title: { - text: '{{ title }}' - }, - P: { - text: '{{ title }}' - } - }, onRender: (e, el, s) => { el.setProps({ animation: 'fadeInUp' }) }, @@ -115,8 +107,17 @@ export const Notifications = { if (s.onClose) s.onClose(e, el, s) } }), + Flex: { + Title: { + text: '{{ title }}' + }, + P: { + text: '{{ title }}' + } + }, IconText: null }, - $stateCollection: ({ state }) => state.notifications + childrenAs: 'state', + children: ({ state }) => state.notifications } } diff --git a/packages/uikit/Atoms/Box.js b/packages/uikit/Atoms/Box.js index 90e9d34aa..75a7fb80b 100644 --- a/packages/uikit/Atoms/Box.js +++ b/packages/uikit/Atoms/Box.js @@ -11,6 +11,7 @@ const beforeClassAssign = (element, s, ctx) => { export const Box = { extends: [ + 'Collection', 'Shape', 'Theme' ], diff --git a/packages/uikit/Atoms/Collection.js b/packages/uikit/Atoms/Collection.js index e28a2f902..cc7c3e84c 100644 --- a/packages/uikit/Atoms/Collection.js +++ b/packages/uikit/Atoms/Collection.js @@ -86,129 +86,6 @@ export const Collection = { el.removeContent() el.content = obj - // return deepClone(param) - }, - - $setCollection: (param, el, state) => { - if (!param) return - - if (isString(param)) { - if (param === 'state') param = state.parse() - else param = getChildStateInKey(param, state) - } - - const data = (isArray(param) ? param : isObject(param) ? Object.values(param) : []) - .map(item => !isObjectLike(item) - ? { props: { value: item } } - : item) - - if (data.length) { - const t = setTimeout(() => { - el.set({ tag: 'fragment', ...data }, { preventDefineUpdate: '$setCollection' }) - clearTimeout(t) - }) - } - - return data - }, - - $stateCollection: (param, el, state, ctx) => { - const { children, childrenAs } = (el.props || {}) - if (!param || children || childrenAs) return - - if (isString(param)) { - if (param === 'state') param = state.parse() - else param = getChildStateInKey(param, state) - } - if (isState(param)) param = param.parse() - if (isNot(param)('array', 'object')) return - - const { __ref: ref } = el - param = deepClone(param) - - if (ref.__stateCollectionCache) { - const equals = JSON.stringify(param) === JSON.stringify(ref.__stateCollectionCache) - if (equals) { - ref.__noCollectionDifference = true - return - } else { - ref.__stateCollectionCache = deepClone(param) - delete ref.__noCollectionDifference - } - } else { - ref.__stateCollectionCache = deepClone(param) - } - - const obj = { - tag: 'fragment', - props: { - ignoreChildProps: true, - childProps: el.props && el.props.childProps - } - } - - for (const key in param) { - const value = param[key] - if (value) obj[key] = { state: isObjectLike(value) ? value : { value } } - } - - el.removeContent() - el.content = obj - - // return deepClone(param) - }, - - $propsCollection: (param, el, state) => { - const { children, childrenAs } = (el.props || {}) - if (!param || children || childrenAs) return - - if (isString(param)) { - if (param === 'state') param = state.parse() - else param = getChildStateInKey(param, state) - } - if (isState(param)) param = param.parse() - if (isNot(param)('array', 'object')) return - - const { __ref: ref } = el - param = deepClone(param) - - if (ref.__propsCollectionCache) { - const equals = JSON.stringify(param) === JSON.stringify(ref.__propsCollectionCache) // eslint-disable-line - if (equals) { - ref.__noCollectionDifference = true - return - } else { - ref.__propsCollectionCache = deepClone(param) - delete ref.__noCollectionDifference - } - } else { - ref.__propsCollectionCache = deepClone(param) - } - - const obj = { - tag: 'fragment', - props: { - ignoreChildProps: true, - childProps: el.props && el.props.childProps - } - } - - for (const key in param) { - const value = param[key] - if (value) obj[key] = { props: isObjectLike(value) ? value : { value } } - } - - el.removeContent() - el.content = obj - - // const set = () => { - // el.set(obj, { preventDefineUpdate: '$propsCollection' }) - // } - - // if (el.props && el.props.lazyLoad) { - // window.requestAnimationFrame(set) - // } else set() - // return deepClone(param) } } diff --git a/packages/uikit/Datepicker/grid.js b/packages/uikit/Datepicker/grid.js index d6feac253..84f0a66ea 100644 --- a/packages/uikit/Datepicker/grid.js +++ b/packages/uikit/Datepicker/grid.js @@ -31,7 +31,8 @@ export const DatePickerGrid = { }, childExtends: DatePickerDay, - $stateCollection: ({ state }) => state.days + childrenAs: 'state', + children: ({ state }) => state.days } export const DatePickerGridContainer = { @@ -84,24 +85,23 @@ export const DatePickerGridContainer = { }, Flex: { - childExtends: { - extends: DatePickerGrid, - on: { - render: (el, state) => { - const { key } = el - const isSelected = state.parent.parent.activeMonth === parseInt(key) - if (isSelected) { - window.requestAnimationFrame(() => { - el.parent.parent.node.scrollTo({ - left: el.node.offsetLeft, - behavior: state.initialized ? 'smooth' : 'instant' - }) + childProps: { + onRender: (el, state) => { + const { key } = el + const isSelected = state.parent.parent.activeMonth === parseInt(key) + if (isSelected) { + window.requestAnimationFrame(() => { + el.parent.parent.node.scrollTo({ + left: el.node.offsetLeft, + behavior: state.initialized ? 'smooth' : 'instant' }) - // if (!state.initialized) state.update({ initialized: true }, { preventUpdate: true, isHoisted: true }) - } + }) + // if (!state.initialized) state.update({ initialized: true }, { preventUpdate: true, isHoisted: true }) } } }, - $stateCollection: ({ state }) => state.parse() + childExtends: 'DatePickerGrid', + childrenAs: 'state', + children: ({ state }) => state.parse() } } diff --git a/packages/uikit/Datepicker/months.js b/packages/uikit/Datepicker/months.js index 993f830ea..fd12b1186 100644 --- a/packages/uikit/Datepicker/months.js +++ b/packages/uikit/Datepicker/months.js @@ -106,7 +106,7 @@ export const DatePickerMonthsSlider = { } }, - $propsCollection: ({ state, parent }) => { + children: ({ state, parent }) => { return [ { text: 'January' }, { text: 'February' }, diff --git a/packages/uikit/Datepicker/years.js b/packages/uikit/Datepicker/years.js index 7b517b426..ffcd039fd 100644 --- a/packages/uikit/Datepicker/years.js +++ b/packages/uikit/Datepicker/years.js @@ -69,7 +69,7 @@ export const DatePickerYears = { } }, - $propsCollection: (element) => { + children: (element) => { const { yearRange } = element.state if (!yearRange) return From 99ded4f0967aa256a4aafcad7fe07a2cc7cbcc66 Mon Sep 17 00:00:00 2001 From: nikoloza Date: Wed, 12 Feb 2025 04:22:54 +0400 Subject: [PATCH 11/12] default config cleanup --- packages/default-config/blank/color.js | 29 ++ packages/default-config/blank/font.js | 10 + packages/default-config/blank/index.js | 63 +++++ packages/default-config/blank/media.js | 31 +++ packages/default-config/blank/spacing.js | 6 + packages/default-config/blank/theme.js | 147 +++++++++++ packages/default-config/blank/timing.js | 8 + packages/default-config/blank/typography.js | 8 + packages/default-config/default/color.js | 70 +++++ packages/default-config/default/font.js | 14 + packages/default-config/default/index.js | 46 ++++ packages/default-config/default/media.js | 31 +++ packages/default-config/default/spacing.js | 6 + packages/default-config/default/theme.js | 247 ++++++++++++++++++ packages/default-config/default/timing.js | 8 + packages/default-config/default/typography.js | 8 + 16 files changed, 732 insertions(+) create mode 100644 packages/default-config/blank/color.js create mode 100644 packages/default-config/blank/font.js create mode 100644 packages/default-config/blank/index.js create mode 100644 packages/default-config/blank/media.js create mode 100644 packages/default-config/blank/spacing.js create mode 100644 packages/default-config/blank/theme.js create mode 100644 packages/default-config/blank/timing.js create mode 100644 packages/default-config/blank/typography.js create mode 100644 packages/default-config/default/color.js create mode 100644 packages/default-config/default/font.js create mode 100644 packages/default-config/default/index.js create mode 100644 packages/default-config/default/media.js create mode 100644 packages/default-config/default/spacing.js create mode 100644 packages/default-config/default/theme.js create mode 100644 packages/default-config/default/timing.js create mode 100644 packages/default-config/default/typography.js diff --git a/packages/default-config/blank/color.js b/packages/default-config/blank/color.js new file mode 100644 index 000000000..e62f12243 --- /dev/null +++ b/packages/default-config/blank/color.js @@ -0,0 +1,29 @@ +'use strict' + +export const COLOR = { + transparent: 'rgba(0, 0, 0, 0)', + black: 'black', + white: 'white', + title: [ + '--gray 1 -168', + '--gray 1 +168' + ], + caption: [ + '--gray 1 -68', + '--gray 1 +68' + ], + paragraph: [ + '--gray 1 -42', + '--gray 1 +42' + ], + disabled: [ + '--gray 1 -26', + '--gray 1 +26' + ], + line: [ + '--gray 1 -16', + '--gray 1 +16' + ] +} + +export const GRADIENT = {} diff --git a/packages/default-config/blank/font.js b/packages/default-config/blank/font.js new file mode 100644 index 000000000..d6d69d07d --- /dev/null +++ b/packages/default-config/blank/font.js @@ -0,0 +1,10 @@ +'use strict' + +export const FONT = {} + +export const FONT_FAMILY = { + system: { + value: ['"Helvetica Neue"', 'Helvetica', 'Arial'], + type: 'sans-serif' + } +} diff --git a/packages/default-config/blank/index.js b/packages/default-config/blank/index.js new file mode 100644 index 000000000..a76157718 --- /dev/null +++ b/packages/default-config/blank/index.js @@ -0,0 +1,63 @@ +'use strict' + +import { DEFAULT_ICONS } from '@symbo.ls/default-icons' +import { COLOR, GRADIENT } from './color' +import { THEME } from './theme' +import { FONT, FONT_FAMILY } from './font' +import { MEDIA } from './media' +import { TIMING } from './timing' + +export const DEFAULT_CONFIG = { + version: '0.0.1', + COLOR, + GRADIENT, + THEME, + TYPOGRAPHY: { + base: 16, + ratio: 1.25, + subSequence: true, + templates: {} + }, + SPACING: { + base: 16, + ratio: 1.618, + subSequence: true + }, + FONT, + FONT_FAMILY, + TIMING, + ICONS: DEFAULT_ICONS, + MEDIA, + RESET: { + html: { + }, + body: { + } + }, + ANIMATION: { + fadeIn: { + from: { + opacity: 0 + }, + to: { + opacity: 1 + } + } + }, + DEVICES: {}, + CASES: {}, + CLASS: {}, + SVG: {}, + GRID: {}, + SHAPE: {}, + useReset: true, + useVariable: true, + useFontImport: true, + useIconSprite: true, + useSvgSprite: true, + useDefaultConfig: true, + useDocumentTheme: true, + verbose: false +} + +export default DEFAULT_CONFIG diff --git a/packages/default-config/blank/media.js b/packages/default-config/blank/media.js new file mode 100644 index 000000000..4ef881ac2 --- /dev/null +++ b/packages/default-config/blank/media.js @@ -0,0 +1,31 @@ +'use strict' + +export const MEDIA = { + tv: '(min-width: 2780px)', + + screenL: '(max-width: 1920px)', + 'screenL<': '(min-width: 1920px)', + screenM: '(max-width: 1680px)', + 'screenM<': '(min-width: 1680px)', + screenS: '(max-width: 1440px)', + 'screenS<': '(min-width: 1440px)', + tabletL: '(max-width: 1366px)', + 'tabletL<': '(min-width: 1366px)', + tabletM: '(max-width: 1280px)', + 'tabletM<': '(min-width: 1280px)', + tabletS: '(max-width: 1024px)', + 'tabletS<': '(min-width: 1024px)', + mobileL: '(max-width: 768px)', + 'mobileL<': '(min-width: 768px)', + mobileM: '(max-width: 560px)', + 'mobileM<': '(min-width: 560px)', + mobileS: '(max-width: 480px)', + 'mobileS<': '(min-width: 480px)', + mobileXS: '(max-width: 375px)', + 'mobileXS<': '(min-width: 375px)', + + light: '(prefers-color-scheme: light)', + dark: '(prefers-color-scheme: dark)', + + print: 'print' +} diff --git a/packages/default-config/blank/spacing.js b/packages/default-config/blank/spacing.js new file mode 100644 index 000000000..3a771de60 --- /dev/null +++ b/packages/default-config/blank/spacing.js @@ -0,0 +1,6 @@ +'use strict' + +export const SPACING = { + ratio: 1.618, + subSequence: true +} diff --git a/packages/default-config/blank/theme.js b/packages/default-config/blank/theme.js new file mode 100644 index 000000000..dacbe7feb --- /dev/null +++ b/packages/default-config/blank/theme.js @@ -0,0 +1,147 @@ +'use strict' + +const PRIORITIES = { + primary: { + '@dark': { + color: 'white', + background: 'blue' + }, + '@light': { + color: 'white', + background: 'gradient-blue' + } + }, + + secondary: { + '@dark': { + color: 'white', + background: 'gray' + }, + '@light': { + color: 'white', + background: 'gray' + } + }, + + tertiary: { + '@dark': { + color: 'white', + background: 'gray .92 +8' + }, + '@light': { + background: 'gray .1' + } + }, + + quaternary: { + '@light': { + color: 'white', + background: 'gradient-light' + }, + '@dark': { + color: 'white', + background: 'gradient-dark-active' + } + }, + + quinary: { + '@dark': { + color: 'gray 1 90', + background: 'gradient-light' + }, + + '@light': { + color: 'gray3', + background: 'gradient-dark' + } + } +} + +const STATES = { + alert: { + '@dark': { + color: 'white', + background: 'red' + } + }, + + warning: { + '@dark': { + color: 'black', + background: 'yellow' + } + }, + + success: { + '@dark': { + color: 'black', + background: 'green' + } + } +} + +const UI = { + field: { + '@light': { + color: 'black', + background: 'gray .975 +144', + borderColor: 'gray .975 +144', + '::placeholder': { color: 'gray 1 -68' } + }, + '@dark': { + color: 'white', + background: 'gray .975 -52', + borderColor: 'gray .975 -52', + '::placeholder': { color: 'gray 1 +68' } + } + }, + + label: { + '@dark': { + color: 'white', + background: 'gray .92 +8' + }, + + '@light': { + background: 'gray .1' + } + }, + + dialog: { + '@dark': { + color: 'white', + background: 'gray .92' + }, + '@light': { + color: 'currentColor', + background: 'gray .1' + } + } +} + +export const THEME = { + document: { + '@light': { + color: 'black', + background: 'white' + }, + '@dark': { + color: 'white', + background: 'black' + } + }, + + ...PRIORITIES, + ...STATES, + ...UI, + + none: { + color: 'none', + background: 'none' + }, + + transparent: { + color: 'currentColor', + background: 'transparent' + } +} diff --git a/packages/default-config/blank/timing.js b/packages/default-config/blank/timing.js new file mode 100644 index 000000000..98196bb47 --- /dev/null +++ b/packages/default-config/blank/timing.js @@ -0,0 +1,8 @@ +'use strict' + +export const TIMING = { + base: 150, + ratio: 1.333, + unit: 'ms', + subSequence: true +} diff --git a/packages/default-config/blank/typography.js b/packages/default-config/blank/typography.js new file mode 100644 index 000000000..fad5aa214 --- /dev/null +++ b/packages/default-config/blank/typography.js @@ -0,0 +1,8 @@ +'use strict' + +export const TYPOGRAPHY = { + base: 16, + ratio: 1.25, + subSequence: true, + templates: {} +} diff --git a/packages/default-config/default/color.js b/packages/default-config/default/color.js new file mode 100644 index 000000000..a3cd7fd09 --- /dev/null +++ b/packages/default-config/default/color.js @@ -0,0 +1,70 @@ +'use strict' + +export const COLOR = { + blue: '#213eb0', + green: '#389d34', + red: '#e15c55', + yellow: '#EDCB38', + orange: '#e97c16', + transparent: 'rgba(0, 0, 0, 0)', + black: 'black', + gray: '#4e4e50', + white: 'white', + title: [ + '--gray 1 -168', + '--gray 1 +168' + ], + caption: [ + '--gray 1 -68', + '--gray 1 +68' + ], + paragraph: [ + '--gray 1 -42', + '--gray 1 +42' + ], + disabled: [ + '--gray 1 -26', + '--gray 1 +26' + ], + line: [ + '--gray 1 -16', + '--gray 1 +16' + ] +} + +export const GRADIENT = { + 'gradient-blue-light': `linear-gradient(to right, + rgba(4, 116, 242, 1), + rgba(0, 48, 103, 1) + )`, + 'gradient-blue-dark': `linear-gradient(to right, + #0474F2, + #003067 + )`, + + 'gradient-dark': `linear-gradient(0deg, + rgba(0,0,0,0.06) 0%, + rgba(0,0,0,0.07) 100% + )`, + 'gradient-dark-active': `linear-gradient(0deg, + rgba(0,0,0,0.09) 0%, + rgba(0,0,0,0.1) 100% + )`, + 'gradient-light': `linear-gradient( + 0deg, + rgba(255,255,255,0.05) 0%, + rgba(255,255,255,0.06) 100% + )`, + 'gradient-light-active': `linear-gradient( + 0deg, + rgba(255,255,255,0.09) 0%, + rgba(255,255,255,0.10) 100% + )`, + 'gradient-colorful': `linear-gradient(60deg, + #00A2E7 0%, + #185DF3 31%, + #1E54F0 36%, + #8B4CCA 69%, + #C66894 100% + )` +} diff --git a/packages/default-config/default/font.js b/packages/default-config/default/font.js new file mode 100644 index 000000000..1c895a8e1 --- /dev/null +++ b/packages/default-config/default/font.js @@ -0,0 +1,14 @@ +'use strict' + +export const FONT = { + SourceSans: [{ + url: '' + }] +} + +export const FONT_FAMILY = { + system: { + value: ['"Helvetica Neue"', 'Helvetica', 'Arial'], + type: 'sans-serif' + } +} diff --git a/packages/default-config/default/index.js b/packages/default-config/default/index.js new file mode 100644 index 000000000..f94818d17 --- /dev/null +++ b/packages/default-config/default/index.js @@ -0,0 +1,46 @@ +'use strict' + +import { DEFAULT_ICONS } from '@symbo.ls/default-icons' +import { COLOR, GRADIENT } from './color' +import { THEME } from './theme' +import { TYPOGRAPHY } from './typography' +import { SPACING } from './spacing' +import { FONT, FONT_FAMILY } from './font' +import { MEDIA } from './media' +import { TIMING } from './timing' + +export const DEFAULT_CONFIG = { + version: '0.0.1', + COLOR, + GRADIENT, + THEME, + TYPOGRAPHY, + SPACING, + FONT, + FONT_FAMILY, + TIMING, + ICONS: DEFAULT_ICONS, + MEDIA, + RESET: { + html: { + }, + body: { + } + }, + ANIMATION: { + fadeIn: { + from: { + opacity: 0 + }, + to: { + opacity: 1 + } + } + }, + DEVICES: {}, + CASES: {}, + CLASS: {}, + SVG: {} // TODO: Check with @nikoloza on this +} + +export default DEFAULT_CONFIG diff --git a/packages/default-config/default/media.js b/packages/default-config/default/media.js new file mode 100644 index 000000000..4ef881ac2 --- /dev/null +++ b/packages/default-config/default/media.js @@ -0,0 +1,31 @@ +'use strict' + +export const MEDIA = { + tv: '(min-width: 2780px)', + + screenL: '(max-width: 1920px)', + 'screenL<': '(min-width: 1920px)', + screenM: '(max-width: 1680px)', + 'screenM<': '(min-width: 1680px)', + screenS: '(max-width: 1440px)', + 'screenS<': '(min-width: 1440px)', + tabletL: '(max-width: 1366px)', + 'tabletL<': '(min-width: 1366px)', + tabletM: '(max-width: 1280px)', + 'tabletM<': '(min-width: 1280px)', + tabletS: '(max-width: 1024px)', + 'tabletS<': '(min-width: 1024px)', + mobileL: '(max-width: 768px)', + 'mobileL<': '(min-width: 768px)', + mobileM: '(max-width: 560px)', + 'mobileM<': '(min-width: 560px)', + mobileS: '(max-width: 480px)', + 'mobileS<': '(min-width: 480px)', + mobileXS: '(max-width: 375px)', + 'mobileXS<': '(min-width: 375px)', + + light: '(prefers-color-scheme: light)', + dark: '(prefers-color-scheme: dark)', + + print: 'print' +} diff --git a/packages/default-config/default/spacing.js b/packages/default-config/default/spacing.js new file mode 100644 index 000000000..3a771de60 --- /dev/null +++ b/packages/default-config/default/spacing.js @@ -0,0 +1,6 @@ +'use strict' + +export const SPACING = { + ratio: 1.618, + subSequence: true +} diff --git a/packages/default-config/default/theme.js b/packages/default-config/default/theme.js new file mode 100644 index 000000000..e25f14eaf --- /dev/null +++ b/packages/default-config/default/theme.js @@ -0,0 +1,247 @@ +'use strict' + +const PRIORITIES = { + primary: { + '@dark': { + color: 'white', + background: 'blue', + '.color-only': { + color: 'blue' + }, + '.inactive': { + background: 'gray 1 +16' + }, + '.gradient': { + color: 'white', + background: 'gradient-blue' + } + }, + '@light': { + color: 'white', + background: 'gradient-blue', + '.color-only': { + color: 'blue' + }, + '.gradient': { + color: 'white', + background: 'gradient-colorful' + } + } + }, + + secondary: { + '@dark': { + color: 'white', + background: 'green', + '.color-only': { + color: 'green' + } + }, + '@light': { + color: 'white', + background: 'green', + '.color-only': { + color: 'green' + } + }, + + '.child': '--primary' + }, + + tertiary: { + '@dark': { + color: 'white', + background: 'gray .92 +8' + }, + '@light': { + background: 'gray .1' + } + }, + + quaternary: { + '@light': { + color: 'white', + background: 'gradient-light' + }, + '@dark': { + color: 'white', + background: 'gradient-dark-active' + } + }, + + quinary: { + '@dark': { + color: 'gray 1 90', + background: 'gradient-light', + + ':hover': { + color: 'gray 1 95', + background: 'gradient-light-active' + }, + + ':focus': { + color: 'gray 1 120', + background: 'gradient-light-active' + }, + + ':active': { + color: 'gray 1 120', + background: 'gradient-light-active' + }, + + '.active': { + color: 'gray 1 120', + background: 'gradient-light-active' + } + }, + + '@light': { + color: 'gray3', + background: 'gradient-dark', + + ':hover': { + color: 'gray1', + background: 'gradient-dark-active' + }, + + ':active': { + color: 'gray1', + background: 'gradient-dark-active' + }, + + '.active': { + color: 'gray1', + background: 'gradient-dark-active' + } + } + } +} + +const STATES = { + alert: { + '@dark': { + color: 'white', + background: 'red' + } + }, + + warning: { + '@dark': { + color: 'black', + background: 'yellow' + } + }, + + success: { + '@dark': { + color: 'black', + background: 'green' + } + } +} + +const UI = { + field: { + '@light': { + color: 'black', + background: 'gray .975 +144', + borderColor: 'gray .975 +144', + '::placeholder': { color: 'gray 1 -68' } + }, + '@dark': { + color: 'white', + background: 'gray .975 -52', + borderColor: 'gray .975 -52', + '::placeholder': { color: 'gray 1 +68' } + } + }, + + label: { + '@dark': { + color: 'white', + background: 'gray .92 +8' + }, + + '@light': { + background: 'gray .1' + }, + + '.light': { + color: 'white', + background: 'gray3' + }, + + '.dark': { + color: 'white', + background: 'black .35' + } + }, + + card: { + '@light': { + background: 'gray .975 +150' + }, + + '@dark': { + color: 'white', + background: 'gray .975 -56' + }, + + '.child': { + color: 'white', + background: 'gray3' + }, + + '.secondary': { + color: 'white', + background: 'gradient-blue-dark', + + '.child': { + color: 'white', + background: 'black .35' + } + } + }, + + dialog: { + '@dark': { + color: 'white', + background: 'gray .92', + '.helper': { + color: 'white', + background: 'black' + } + }, + '@light': { + color: 'currentColor', + background: 'gray .1' + } + } +} + +export const THEME = { + document: { + '@light': { + color: 'black', + background: 'white' + }, + '@dark': { + color: 'white', + background: 'black' + } + }, + + ...PRIORITIES, + ...STATES, + ...UI, + + none: { + color: 'none', + background: 'none' + }, + + transparent: { + color: 'currentColor', + background: 'transparent' + } +} diff --git a/packages/default-config/default/timing.js b/packages/default-config/default/timing.js new file mode 100644 index 000000000..98196bb47 --- /dev/null +++ b/packages/default-config/default/timing.js @@ -0,0 +1,8 @@ +'use strict' + +export const TIMING = { + base: 150, + ratio: 1.333, + unit: 'ms', + subSequence: true +} diff --git a/packages/default-config/default/typography.js b/packages/default-config/default/typography.js new file mode 100644 index 000000000..fad5aa214 --- /dev/null +++ b/packages/default-config/default/typography.js @@ -0,0 +1,8 @@ +'use strict' + +export const TYPOGRAPHY = { + base: 16, + ratio: 1.25, + subSequence: true, + templates: {} +} From 9ad61c29523a1492765e5adf95c2c55c6a4224ab Mon Sep 17 00:00:00 2001 From: nikoloza Date: Mon, 17 Feb 2025 13:38:47 +0400 Subject: [PATCH 12/12] extends updates --- packages/cli/bin/linking/packages.js | 10 +- packages/create/src/createDomql.js | 2 + packages/css-in-props/src/props/flex.js | 12 +- .../src/transform/transformers.js | 4 + packages/scratch/src/system/svg.js | 2 +- packages/scratch/src/utils/color.js | 3 +- packages/sync/Inspect.js | 210 +++++++++--------- packages/uikit/Atoms/Block.js | 28 +-- packages/uikit/Atoms/Box.js | 21 +- packages/uikit/Atoms/Hgroup.js | 78 ++----- packages/uikit/Atoms/Iframe.js | 9 +- packages/uikit/Button/index.js | 53 ++--- 12 files changed, 190 insertions(+), 242 deletions(-) diff --git a/packages/cli/bin/linking/packages.js b/packages/cli/bin/linking/packages.js index 34c56433e..ea93afa8b 100644 --- a/packages/cli/bin/linking/packages.js +++ b/packages/cli/bin/linking/packages.js @@ -1,10 +1,10 @@ export default [ 'attrs-in-props', - 'create-smbls', '@symbo.ls/emotion', + 'create-smbls', '@symbo.ls/fetch', - '@symbo.ls/fluent-icons', '@symbo.ls/default-icons', + '@symbo.ls/fluent-icons', '@symbo.ls/feather-icons', '@symbo.ls/material-icons', '@symbo.ls/preview', @@ -13,13 +13,13 @@ export default [ '@symbo.ls/scratch', '@symbo.ls/init', '@symbo.ls/atoms', - 'css-in-props', '@symbo.ls/socket', - '@symbo.ls/input', '@symbo.ls/icon', + 'css-in-props', + '@symbo.ls/link', + '@symbo.ls/input', '@symbo.ls/notification', '@symbo.ls/select', - '@symbo.ls/link', '@symbo.ls/tooltip', '@symbo.ls/cli', '@symbo.ls/button', diff --git a/packages/create/src/createDomql.js b/packages/create/src/createDomql.js index 66bf56670..424002bb7 100644 --- a/packages/create/src/createDomql.js +++ b/packages/create/src/createDomql.js @@ -65,6 +65,8 @@ export const createDomqlElement = async (app, ctx) => { app.data = app.data || {} app.data.frameListeners = initAnimationFrame(ctx) + console.log(app) + prepareRequire({ functions: ctx.functions, utils: ctx.utils, diff --git a/packages/css-in-props/src/props/flex.js b/packages/css-in-props/src/props/flex.js index 9e80009ba..1aa4511a8 100644 --- a/packages/css-in-props/src/props/flex.js +++ b/packages/css-in-props/src/props/flex.js @@ -5,10 +5,8 @@ import { isString } from '@domql/utils' export const FLEX_PROPS = { flow: (value, el) => { const { props } = el - // console.log('----flex') - // console.log(value) - // console.log(el) - if (props.display !== 'flex') return + const DISPLAY_FLEX_ALLOWED = ['flex', 'inline-flex'] + if (!DISPLAY_FLEX_ALLOWED.includes(props.display)) return const { reverse } = props if (!isString(value)) return let [direction, wrap] = (value || 'row').split(' ') @@ -20,12 +18,14 @@ export const FLEX_PROPS = { }, wrap: (value, { props }) => { - if (props.display !== 'flex') return + const DISPLAY_FLEX_ALLOWED = ['flex', 'inline-flex'] + if (!DISPLAY_FLEX_ALLOWED.includes(props.display)) return return { flexWrap: value } }, align: (value, { props }) => { - if (props.display !== 'flex') return + const DISPLAY_FLEX_ALLOWED = ['flex', 'inline-flex'] + if (!DISPLAY_FLEX_ALLOWED.includes(props.display)) return const [alignItems, justifyContent] = value.split(' ') return { alignItems, justifyContent } } diff --git a/packages/css-in-props/src/transform/transformers.js b/packages/css-in-props/src/transform/transformers.js index e3c5ada7d..c36161e20 100644 --- a/packages/css-in-props/src/transform/transformers.js +++ b/packages/css-in-props/src/transform/transformers.js @@ -41,6 +41,10 @@ const applyAndProps = (key, selectorProps, element) => { const applySelectorProps = (key, selectorProps, element) => { const selectorKey = `&${key}` + // if (key === ':after') { + // console.log(selectorKey) + // console.log(useCssInProps(selectorProps, element)) + // } return { [selectorKey]: useCssInProps(selectorProps, element) } } diff --git a/packages/scratch/src/system/svg.js b/packages/scratch/src/system/svg.js index be3695db4..41c63dbdd 100644 --- a/packages/scratch/src/system/svg.js +++ b/packages/scratch/src/system/svg.js @@ -1,6 +1,6 @@ 'use strict' -import { document } from '@domql/globals' +import { document } from '@domql/utils' import { generateSprite, convertSvgToSymbol } from '../utils' import { getActiveConfig } from '../factory.js' diff --git a/packages/scratch/src/utils/color.js b/packages/scratch/src/utils/color.js index fe463666d..1b97791c8 100644 --- a/packages/scratch/src/utils/color.js +++ b/packages/scratch/src/utils/color.js @@ -1,7 +1,6 @@ 'use strict' -import { document, window } from '@domql/globals' -import { isString, isNumber } from '@domql/utils' +import { document, window, isString, isNumber } from '@domql/utils' const ENV = process.env.NODE_ENV export const colorStringToRgbaArray = color => { diff --git a/packages/sync/Inspect.js b/packages/sync/Inspect.js index 2d4688665..9fbeaf948 100644 --- a/packages/sync/Inspect.js +++ b/packages/sync/Inspect.js @@ -54,145 +54,137 @@ const onInspect = (app, state, ctx) => { } export const Inspect = { - props: { - '.preventSelect': { userSelect: 'none' }, - '!preventSelect': { userSelect: 'auto' }, + '.preventSelect': { userSelect: 'none' }, + '!preventSelect': { userSelect: 'auto' }, - onInspect, + onInspect, - onMousemove: (ev, e, state) => { - const el = ev.target.ref - const component = findComponent(el) - const focusState = e.Inspector.state + onMousemove: (ev, e, state) => { + const el = ev.target.ref + const component = findComponent(el) + const focusState = e.Inspector.state - if (!component || !state.debugging || !component.__ref) return focusState.update({ area: false }) + if (!component || !state.debugging || !component.__ref) return focusState.update({ area: false }) - const componentKey = getComponentKey(component) - const updateValue = (area) => { - focusState.update({ area, focusKey: componentKey }) - } + const componentKey = getComponentKey(component) + const updateValue = (area) => { + focusState.update({ area, focusKey: componentKey }) + } - const update = () => { - if (ev.altKey && ev.shiftKey) { - const { x, y, width, height } = component.node.getBoundingClientRect() - const area = { x, y, width, height } + const update = () => { + if (ev.altKey && ev.shiftKey) { + const { x, y, width, height } = component.node.getBoundingClientRect() + const area = { x, y, width, height } - if (!focusState.area) return updateValue(area) - if (focusState.area.x !== area.x) updateValue(area) - } else if (focusState.area) { - focusState.update({ area: false }) - } + if (!focusState.area) return updateValue(area) + if (focusState.area.x !== area.x) updateValue(area) + } else if (focusState.area) { + focusState.update({ area: false }) } + } - window.requestAnimationFrame(() => { - update() - window.requestAnimationFrame(update) - }) - }, + window.requestAnimationFrame(() => { + update() + window.requestAnimationFrame(update) + }) + }, - onMousedown: (ev, elem, state) => { - if (!state.debugging) return - const el = ev.target.ref - const component = findComponent(el) - if (!component) return - const componentKey = getComponentKey(component) - if (!componentKey) return - - const editor = el.context.editor - if (editor && editor.onInspect) { - return editor.onInspect(componentKey, el, el.state, { allowRouterWhileInspect: true }) - } + onMousedown: (ev, elem, state) => { + if (!state.debugging) return + const el = ev.target.ref + const component = findComponent(el) + if (!component) return + const componentKey = getComponentKey(component) + if (!componentKey) return + + const editor = el.context.editor + if (editor && editor.onInspect) { + return editor.onInspect(componentKey, el, el.state, { allowRouterWhileInspect: true }) + } - const data = JSON.stringify({ - componentKey: `${componentKey}` - }) - send.call(el.context.socket, 'route', data) + const data = JSON.stringify({ + componentKey: `${componentKey}` + }) + send.call(el.context.socket, 'route', data) - ev.preventDefault() - ev.stopPropagation() - return false - } + ev.preventDefault() + ev.stopPropagation() + return false }, Inspector: { state: {}, - props: (el, s) => ({ - transition: 'all, defaultBezier, X', - position: 'fixed', - hide: !(s.area && s.parent.debugging), - style: { - boxShadow: '0 0 10px #3686F733, 0 0 0 3px #3686F766, 0 0 100vmax 100vmax #000A', - zIndex: '9999999', - borderRadius: '10px', - pointerEvents: 'none' - } - }), + transition: 'all, defaultBezier, X', + position: 'fixed', + hide: (el, s) => !(s.area && s.parent.debugging), + style: { + boxShadow: '0 0 10px #3686F733, 0 0 0 3px #3686F766, 0 0 100vmax 100vmax #000A', + zIndex: '9999999', + borderRadius: '10px', + pointerEvents: 'none' + }, Span: { - props: { - position: 'absolute', - margin: 'A2 0', - fontSize: 'Z', - color: 'text', - // color: 'blue', - zIndex: '99999999', - transition: 'all, defaultBezier, X', - textDecoration: 'underline', - fontWeight: '500', - top: '100%', - style: { - boxShadow: '0 25px 10px 35px black', - textShadow: '0 0 10px black' - }, - text: '{{ focusKey }}' - } + position: 'absolute', + margin: 'A2 0', + fontSize: 'Z', + color: 'text', + // color: 'blue', + zIndex: '99999999', + transition: 'all, defaultBezier, X', + textDecoration: 'underline', + fontWeight: '500', + top: '100%', + style: { + boxShadow: '0 25px 10px 35px black', + textShadow: '0 0 10px black' + }, + text: '{{ focusKey }}' }, - on: { - init: ({ context }) => { - const { components } = context - - if (isObject(components)) { - const { Content, ...rest } = components - for (const key in rest) { - if (smblsUI[key]) continue - if (!rest[key].__ref) rest[key].__ref = {} - if (!rest[key].__ref.__componentKey) { - rest[key].__ref.__componentKey = key - } + onInit: ({ context }) => { + const { components } = context + + if (isObject(components)) { + const { Content, ...rest } = components + for (const key in rest) { + if (smblsUI[key]) continue + if (!rest[key].__ref) rest[key].__ref = {} + if (!rest[key].__ref.__componentKey) { + rest[key].__ref.__componentKey = key } } - }, - beforeUpdate: (ch, el, s) => { - const { area } = s - const isDebugging = s.area && s.parent.debugging - - let style - if (!isDebugging) { - style = 'display: none !important' - } else if (area) { - const { x, y, width, height } = area - // el.node.style = Object.stringify({ - // top: y - 6 + 'px', - // left: x - 6 + 'px', - // width: width + 12 + 'px', - // height: height + 12 + 'px' - // }) - style = ` + } + }, + onBeforeUpdate: (ch, el, s) => { + const { area } = s + const isDebugging = s.area && s.parent.debugging + + let style + if (!isDebugging) { + style = 'display: none !important' + } else if (area) { + const { x, y, width, height } = area + // el.node.style = Object.stringify({ + // top: y - 6 + 'px', + // left: x - 6 + 'px', + // width: width + 12 + 'px', + // height: height + 12 + 'px' + // }) + style = ` display: block !important; top: ${y - 6}px; left: ${x - 6}px; width: ${width + 12}px; height: ${height + 12}px; ` - } + } - el.node.style = style - el.Span.node.innerText = s.focusKey + el.node.style = style + el.Span.node.innerText = s.focusKey - return false - } + return false } } } diff --git a/packages/uikit/Atoms/Block.js b/packages/uikit/Atoms/Block.js index 443300cdb..56f4d1be2 100644 --- a/packages/uikit/Atoms/Block.js +++ b/packages/uikit/Atoms/Block.js @@ -1,33 +1,29 @@ 'use strict' export const Block = { - props: { - display: 'block' - } + display: 'block' } export const Inline = { - props: { - display: 'inline' - } + display: 'inline' } export const Flex = { - props: { - display: 'flex' - } + display: 'flex' +} + +export const InlineFlex = { + display: 'inline-flex' } export const Grid = { - props: { display: 'grid' } + display: 'grid' } -export const Div = { tag: 'div' } -export const Span = { tag: 'span' } -// export const Article = { tag: 'article' } +export const InlineGrid = { + display: 'inline-grid' +} export const Gutter = { - props: { - boxSize: 'C1' - } + boxSize: 'C1' } diff --git a/packages/uikit/Atoms/Box.js b/packages/uikit/Atoms/Box.js index 75a7fb80b..af17cd7cf 100644 --- a/packages/uikit/Atoms/Box.js +++ b/packages/uikit/Atoms/Box.js @@ -3,7 +3,7 @@ import { useCssInProps } from 'css-in-props' // Main class assignment handler -const beforeClassAssign = (element, s, ctx) => { +const onBeforeClassAssign = (element) => { if (!element.context) return const { props, __ref: ref } = element ref.__class = useCssInProps(props, element, { unpack: false }) @@ -15,9 +15,9 @@ export const Box = { 'Shape', 'Theme' ], - props: { - boxSizing: 'border-box' - }, + + boxSizing: 'border-box', + attr: { id: el => el.call('isString', el.props.id) && el.props.id, title: el => el.call('isString', el.props.title) && el.props.title, @@ -30,20 +30,17 @@ export const Box = { tabindex: el => el.props.tabindex, translate: el => el.props.translate }, + class: { - style: el => el.props && el.props.style - }, - text: (el) => { - const { key, props, state } = el - if (props.text === true) return (state && state[key]) || (props && props[key]) - return el.call('exec', props.text, el) + style: el => el.style || el.props?.style }, - on: { beforeClassAssign } + + onBeforeClassAssign } export const Hr = { tag: 'hr', - props: { margin: 'C1 0' } + margin: 'C1 0' } export const Br = { tag: 'br' } export const Li = { tag: 'li' } diff --git a/packages/uikit/Atoms/Hgroup.js b/packages/uikit/Atoms/Hgroup.js index 7787e45d9..9c2f45d2e 100644 --- a/packages/uikit/Atoms/Hgroup.js +++ b/packages/uikit/Atoms/Hgroup.js @@ -4,52 +4,18 @@ export const Hgroup = { extends: 'Flex', tag: 'hgroup', - props: { - flow: 'y', - gap: 'Y2', - - Title: { - fontWeight: '700', - alignItems: 'center' - }, - - Paragraph: { - margin: '0', - color: 'caption', - '> p': { margin: '0' } - }, - - H: { - color: 'title', - tag: 'h3', - lineHeight: '1em', - margin: '0' - }, - P: { - margin: '0', - color: 'paragraph' - } - }, - - H: {}, - P: {}, - - Title: { - extends: 'Flex', - if: ({ parent }) => parent.props.title, - props: ({ parent }) => ({ - text: parent.props.title, - lineHeight: '1em' - }) + flow: 'y', + gap: 'Y2', + + H: { + color: 'title', + tag: 'h3', + lineHeight: '1em', + margin: '0' }, - - Paragraph: { - extends: 'Flex', - if: ({ parent }) => parent.props.paragraph, - props: ({ parent }) => ({ - text: parent.props.paragraph, - margin: '0' - }) + P: { + margin: '0', + color: 'paragraph' } } @@ -58,12 +24,14 @@ export const HgroupRows = { Title: { extends: 'Flex', - props: { color: 'title', align: 'center space-between' } + color: 'title', + align: 'center space-between' }, Paragraph: { extends: 'Flex', - props: { color: 'paragraph', align: 'center space-between' } + color: 'paragraph', + align: 'center space-between' } } @@ -71,18 +39,16 @@ export const HgroupButton = { extends: 'HgroupRows', Title: { - props: { justifyContent: 'space-between' }, + justifyContent: 'space-between', Span: {}, Button: { - props: { - background: 'transparent', - color: 'currentColor', - padding: '0', - Icon: { - name: 'x', - fontSize: 'C' - } + background: 'transparent', + color: 'currentColor', + padding: '0', + Icon: { + name: 'x', + fontSize: 'C' } } }, diff --git a/packages/uikit/Atoms/Iframe.js b/packages/uikit/Atoms/Iframe.js index 78e2b9cca..c0636bbfa 100644 --- a/packages/uikit/Atoms/Iframe.js +++ b/packages/uikit/Atoms/Iframe.js @@ -2,11 +2,10 @@ export const Iframe = { tag: 'iframe', - props: { - position: 'relative', - minWidth: 'H', - minHeight: 'H' - }, + position: 'relative', + minWidth: 'H', + minHeight: 'H', + attr: { src: (el, s) => { let src = el.call('exec', el.props.src, el) diff --git a/packages/uikit/Button/index.js b/packages/uikit/Button/index.js index 0aa754e4d..24ae66406 100644 --- a/packages/uikit/Button/index.js +++ b/packages/uikit/Button/index.js @@ -21,20 +21,18 @@ export const Button = { extends: ['IconText', 'FocusableComponent'], tag: 'button', - props: { - fontSize: 'A', - type: 'button', - borderStyle: 'none', - display: 'inline-flex', - align: 'center center', - textDecoration: 'none', - lineHeight: '1', - whiteSpace: 'nowrap', - padding: 'Z B2', - fontWeight: '500', - fontFamily: 'inherit', - round: 'C2' - }, + fontSize: 'A', + type: 'button', + borderStyle: 'none', + display: 'inline-flex', + align: 'center center', + textDecoration: 'none', + lineHeight: '1', + whiteSpace: 'nowrap', + padding: 'Z B2', + fontWeight: '500', + fontFamily: 'inherit', + round: 'C2', attr: { type: ({ props }) => props.type @@ -43,22 +41,20 @@ export const Button = { export const SquareButton = { extends: 'Button', - props: { - fontSize: 'A', - width: 'A', - padding: 'Z', - aspectRatio: '1 / 1', - icon: 'smile', - boxSize: 'fit-content fit-content', - justifyContent: 'center', - round: 'Z', - boxSizing: 'content-box' - } + fontSize: 'A', + width: 'A', + padding: 'Z', + aspectRatio: '1 / 1', + icon: 'smile', + boxSize: 'fit-content fit-content', + justifyContent: 'center', + round: 'Z', + boxSizing: 'content-box' } export const CircleButton = { extends: 'SquareButton', - props: { round: 'C' } + round: 'C' } export const KangorooButton = { @@ -77,8 +73,5 @@ export const IconButton = { 'SquareButton', 'ClickableItem' ], - props: { - round: 'Z' - }, - __hash: '3a7v57sk5rd' + round: 'Z' }