@elliemae/ds-system 3.27.0-next.2 → 3.27.0-next.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/styled/styledFunction.js +12 -9
- package/dist/cjs/styled/styledFunction.js.map +2 -2
- package/dist/cjs/styled/system-types.js.map +1 -1
- package/dist/esm/styled/styledFunction.js +12 -9
- package/dist/esm/styled/styledFunction.js.map +2 -2
- package/dist/types/styled/system-types.d.ts +17 -15
- package/package.json +2 -2
|
@@ -48,15 +48,10 @@ const defaultOptions = {
|
|
|
48
48
|
name: null,
|
|
49
49
|
slot: null
|
|
50
50
|
};
|
|
51
|
-
const styledFunctionCache = /* @__PURE__ */ new WeakMap();
|
|
52
51
|
const styledFunction = (tag, options = defaultOptions) => {
|
|
53
52
|
const { name: componentName, slot: componentSlot } = options;
|
|
54
53
|
(0, import_checkNamingConvention.checkNamingConvention)(componentName, componentSlot);
|
|
55
54
|
const baseStyledResolver = (0, import_system.styled)(tag);
|
|
56
|
-
const styledAttributes = {
|
|
57
|
-
attrs: (...args) => baseStyledResolver.attrs(...args),
|
|
58
|
-
withConfig: (...args) => baseStyledResolver.withConfig(...args)
|
|
59
|
-
};
|
|
60
55
|
const dsStyledResolver = (styleArg, ...expressions) => {
|
|
61
56
|
const expressionsWithDsStyledComponentId = (0, import_transformers.dsStyledComponentTransform)(expressions);
|
|
62
57
|
const [styleArgWithMagic, expressionsWithMagic] = (0, import_transformers.magicCssTransform)(styleArg, expressionsWithDsStyledComponentId);
|
|
@@ -75,8 +70,7 @@ const styledFunction = (tag, options = defaultOptions) => {
|
|
|
75
70
|
baseStyledResolver
|
|
76
71
|
);
|
|
77
72
|
const Component = baseStyledResolverWithAttributes(fixedStyleArg, ...expressionsWithThemeCoerced);
|
|
78
|
-
const
|
|
79
|
-
const ComponentWithRefsMerged = MemoizedComponentWithRefsMerged ?? ((props) => {
|
|
73
|
+
const ComponentWithRefsMerged = (props) => {
|
|
80
74
|
const dataTestId = props["data-testid"] ?? (displayName !== null ? (0, import_helpers.displayNameToKebabCase)(displayName) : "");
|
|
81
75
|
const dataDimsumSlot = displayName !== null ? (0, import_helpers.displayNameToPropCase)(displayName) : "";
|
|
82
76
|
const partProps = (0, import_generateAttributes.getPartProps)({
|
|
@@ -94,8 +88,7 @@ const styledFunction = (tag, options = defaultOptions) => {
|
|
|
94
88
|
innerRef: mergedRef
|
|
95
89
|
};
|
|
96
90
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...propsWithRefMerged });
|
|
97
|
-
}
|
|
98
|
-
styledFunctionCache.set(Component, ComponentWithRefsMerged);
|
|
91
|
+
};
|
|
99
92
|
if (displayName !== null) {
|
|
100
93
|
Component.displayName = displayName;
|
|
101
94
|
}
|
|
@@ -103,6 +96,16 @@ const styledFunction = (tag, options = defaultOptions) => {
|
|
|
103
96
|
ComponentWithRefsMerged.toString = Component.toString;
|
|
104
97
|
return ComponentWithRefsMerged;
|
|
105
98
|
};
|
|
99
|
+
const styledAttributes = {
|
|
100
|
+
attrs: (...args) => {
|
|
101
|
+
baseStyledResolver.attrs(...args);
|
|
102
|
+
return dsStyledResolver;
|
|
103
|
+
},
|
|
104
|
+
withConfig: (...args) => {
|
|
105
|
+
baseStyledResolver.withConfig(...args);
|
|
106
|
+
return dsStyledResolver;
|
|
107
|
+
}
|
|
108
|
+
};
|
|
106
109
|
return Object.assign(dsStyledResolver, styledAttributes);
|
|
107
110
|
};
|
|
108
111
|
//# sourceMappingURL=styledFunction.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/styled/styledFunction.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { AnyStyledComponent,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { AnyStyledComponent, ThemedStyledFunction } from 'styled-components';\nimport { checkNamingConvention } from './checkNamingConvention.js';\nimport { styled as baseStyled } from './system.js';\nimport { dsStyledComponentTransform, magicCssTransform } from './transformers/index.js';\nimport type {\n AnyStyledRef,\n Options,\n OwnerInterface,\n InnerRefInterface,\n Theme,\n ThemedStyledFunctionBase,\n} from './types.js';\nimport { coerceWithDefaultTheme } from './coerceWithDefaultTheme.js';\nimport { genStyleOverridesExpression, genVariantOverridesExpression } from './expressions/index.js';\nimport { fixStyleArg } from './fixStyleArg.js';\nimport { generateAutoCalculated } from './generated-attributes/index.js';\nimport { getPartProps } from './generated-attributes/generateAttributes.js';\nimport { mergeRefs } from './generated-attributes/utils/refMerger.js';\nimport { displayNameToKebabCase, displayNameToPropCase } from './helpers.js';\nimport { useMemo } from 'react';\n\nconst defaultOptions: Options = {\n name: null,\n slot: null,\n};\n\nexport const styledFunction = <C extends AnyStyledComponent | keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n tag: C,\n options: Options = defaultOptions,\n) => {\n const { name: componentName, slot: componentSlot } = options;\n\n checkNamingConvention(componentName, componentSlot);\n\n // Here we use the `as` because when C is keyof JSX.IntrinsicElements we get `never` for the attributes generic\n // We want to account for string | number | symbol that's why we transform it to `keyof any`\n const baseStyledResolver = baseStyled(tag) as unknown as ThemedStyledFunction<C, Theme, {}, keyof any>;\n\n // Due to the recursive natura of this function, we can't type it properly\n // Since we can apply .attrs or .withConfig, we are not sure on the type of the returned function\n // @ts-expect-error explained above\n const dsStyledResolver: ThemedStyledFunctionBase<C, Theme> = (styleArg, ...expressions) => {\n /**\n * Here we apply a transformation to the expressions only.\n * Since this resolver is returning a HOC of a styled-component, the syntax support for\n * selecting the className of another styled-component is not available anymore.\n * That's why we assign it a `dsStyledComponnentId`, we will replace the component's call for\n * the corresponding id\n */\n const expressionsWithDsStyledComponentId = dsStyledComponentTransform(expressions);\n\n /**\n * Here we apply a CSS transformation to support MAGIC styled components\n * This makes it possible to use the following syntax:\n * color: neutral-100;\n * background-color: success-900;\n */\n const [styleArgWithMagic, expressionsWithMagic] = magicCssTransform(styleArg, expressionsWithDsStyledComponentId);\n\n /**\n * We coerce all the already written expressions with the default theme\n * This prevents styled components to break when a theme is not provided\n * either with the HOC or the ThemeProvider\n */\n const expressionsWithThemeCoerced = coerceWithDefaultTheme(expressionsWithMagic);\n\n if (componentName && componentSlot) {\n // Here we add the style overrides expression\n expressionsWithThemeCoerced.push(genStyleOverridesExpression(componentName, componentSlot));\n }\n\n if (componentName && componentSlot === 'root') {\n // Here we add the variant overrides from the user (only for the root slot\n expressionsWithThemeCoerced.push(genVariantOverridesExpression(componentName));\n }\n\n /**\n * Here we will fix the format of the style argument\n * We possible added some new expressions into the mix,\n * so we need to properly adjust the style arg\n */\n const numOfExpressionsAdded = expressionsWithThemeCoerced.length - expressionsWithMagic.length;\n\n const fixedStyleArg = fixStyleArg(styleArgWithMagic, numOfExpressionsAdded);\n\n // We will add autocalculated attributes to the styled component\n const [displayName, attributes] = generateAutoCalculated(options);\n\n // For each attribute function, we will call `attrs` func with it\n // This will add the attributes to the styled component\n const baseStyledResolverWithAttributes = attributes.reduce<typeof baseStyledResolver>(\n (curStyledResolver, attributeFunc) => curStyledResolver.attrs(attributeFunc),\n baseStyledResolver,\n );\n\n const Component = baseStyledResolverWithAttributes(fixedStyleArg, ...expressionsWithThemeCoerced);\n\n const ComponentWithRefsMerged = (props: OwnerInterface & InnerRefInterface<C> & { 'data-testid'?: string }) => {\n // we may or not have data-testid at this point, so we need to calculate it\n const dataTestId = props['data-testid'] ?? (displayName !== null ? displayNameToKebabCase(displayName) : '');\n // we also need to calculate dataDimsumSlot at this point\n const dataDimsumSlot = displayName !== null ? displayNameToPropCase(displayName) : '';\n // then we get the part props for this slot, and we cast it to use refs\n const partProps = getPartProps({\n ...props,\n 'data-testid': dataTestId,\n 'data-dimsum-slot': dataDimsumSlot,\n }) as {\n innerRef?: AnyStyledRef<HTMLElement>;\n };\n\n const mergedRef = useMemo(\n () => mergeRefs(props.innerRef, partProps.innerRef),\n [props.innerRef, partProps.innerRef],\n );\n\n const propsWithRefMerged = {\n ...props,\n ref: mergedRef,\n innerRef: mergedRef,\n } as React.ComponentProps<C>;\n\n return <Component {...propsWithRefMerged} />;\n };\n\n if (displayName !== null) {\n Component.displayName = displayName;\n }\n\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore We use dsStyledComponent to access the original's component id\n ComponentWithRefsMerged.dsStyledComponentId = Component.styledComponentId as string;\n ComponentWithRefsMerged.toString = Component.toString;\n\n return ComponentWithRefsMerged;\n };\n\n // Here we use arrow functions to preserve the `this` context\n const styledAttributes = {\n attrs: ((...args) => {\n baseStyledResolver.attrs(...args);\n return dsStyledResolver;\n }) as (typeof baseStyledResolver)['attrs'],\n withConfig: ((...args) => {\n baseStyledResolver.withConfig(...args);\n return dsStyledResolver;\n }) as (typeof baseStyledResolver)['withConfig'],\n };\n\n return Object.assign(dsStyledResolver, styledAttributes);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6HV;AAzHb,mCAAsC;AACtC,oBAAqC;AACrC,0BAA8D;AAS9D,oCAAuC;AACvC,yBAA2E;AAC3E,yBAA4B;AAC5B,kCAAuC;AACvC,gCAA6B;AAC7B,uBAA0B;AAC1B,qBAA8D;AAC9D,mBAAwB;AAExB,MAAM,iBAA0B;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM;AACR;AAEO,MAAM,iBAAiB,CAC5B,KACA,UAAmB,mBAChB;AACH,QAAM,EAAE,MAAM,eAAe,MAAM,cAAc,IAAI;AAErD,0DAAsB,eAAe,aAAa;AAIlD,QAAM,yBAAqB,cAAAA,QAAW,GAAG;AAKzC,QAAM,mBAAuD,CAAC,aAAa,gBAAgB;AAQzF,UAAM,yCAAqC,gDAA2B,WAAW;AAQjF,UAAM,CAAC,mBAAmB,oBAAoB,QAAI,uCAAkB,UAAU,kCAAkC;AAOhH,UAAM,kCAA8B,sDAAuB,oBAAoB;AAE/E,QAAI,iBAAiB,eAAe;AAElC,kCAA4B,SAAK,gDAA4B,eAAe,aAAa,CAAC;AAAA,IAC5F;AAEA,QAAI,iBAAiB,kBAAkB,QAAQ;AAE7C,kCAA4B,SAAK,kDAA8B,aAAa,CAAC;AAAA,IAC/E;AAOA,UAAM,wBAAwB,4BAA4B,SAAS,qBAAqB;AAExF,UAAM,oBAAgB,gCAAY,mBAAmB,qBAAqB;AAG1E,UAAM,CAAC,aAAa,UAAU,QAAI,oDAAuB,OAAO;AAIhE,UAAM,mCAAmC,WAAW;AAAA,MAClD,CAAC,mBAAmB,kBAAkB,kBAAkB,MAAM,aAAa;AAAA,MAC3E;AAAA,IACF;AAEA,UAAM,YAAY,iCAAiC,eAAe,GAAG,2BAA2B;AAEhG,UAAM,0BAA0B,CAAC,UAA8E;AAE7G,YAAM,aAAa,MAAM,aAAa,MAAM,gBAAgB,WAAO,uCAAuB,WAAW,IAAI;AAEzG,YAAM,iBAAiB,gBAAgB,WAAO,sCAAsB,WAAW,IAAI;AAEnF,YAAM,gBAAY,wCAAa;AAAA,QAC7B,GAAG;AAAA,QACH,eAAe;AAAA,QACf,oBAAoB;AAAA,MACtB,CAAC;AAID,YAAM,gBAAY;AAAA,QAChB,UAAM,4BAAU,MAAM,UAAU,UAAU,QAAQ;AAAA,QAClD,CAAC,MAAM,UAAU,UAAU,QAAQ;AAAA,MACrC;AAEA,YAAM,qBAAqB;AAAA,QACzB,GAAG;AAAA,QACH,KAAK;AAAA,QACL,UAAU;AAAA,MACZ;AAEA,aAAO,4CAAC,aAAW,GAAG,oBAAoB;AAAA,IAC5C;AAEA,QAAI,gBAAgB,MAAM;AACxB,gBAAU,cAAc;AAAA,IAC1B;AAIA,4BAAwB,sBAAsB,UAAU;AACxD,4BAAwB,WAAW,UAAU;AAE7C,WAAO;AAAA,EACT;AAGA,QAAM,mBAAmB;AAAA,IACvB,OAAQ,IAAI,SAAS;AACnB,yBAAmB,MAAM,GAAG,IAAI;AAChC,aAAO;AAAA,IACT;AAAA,IACA,YAAa,IAAI,SAAS;AACxB,yBAAmB,WAAW,GAAG,IAAI;AACrC,aAAO;AAAA,IACT;AAAA,EACF;AAEA,SAAO,OAAO,OAAO,kBAAkB,gBAAgB;AACzD;",
|
|
6
6
|
"names": ["baseStyled"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/styled/system-types.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type {\n SpaceProps as XstyledSpace,\n MarginProps,\n MarginTopProps,\n MarginRightProps,\n MarginBottomProps,\n MarginLeftProps,\n MarginXProps,\n MarginYProps,\n PaddingProps,\n PaddingTopProps,\n PaddingRightProps,\n PaddingBottomProps,\n PaddingLeftProps,\n PaddingXProps,\n PaddingYProps,\n ColorProps as XstyledColor,\n TypographyProps,\n FlexboxesProps,\n} from '@xstyled/system';\nimport type { Theme } from './types.js';\n\nexport type { FlattenSimpleInterpolation, FlattenInterpolation } from 'styled-components';\n\nexport type {\n LayoutProps,\n SizingProps,\n FontSizeProps,\n PositionProps,\n BoxShadowProps,\n LineHeightProps,\n} from '@xstyled/system';\n\ninterface DummyColorTheme {\n 'neutral-100': true;\n 'neutral-200': true;\n 'neutral-300': true;\n 'neutral-400': true;\n 'neutral-500': true;\n 'neutral-600': true;\n 'neutral-700': true;\n 'neutral-800': true;\n 'neutral-000': true;\n 'neutral-050': true;\n 'neutral-080': true;\n 'brand-100': true;\n 'brand-200': true;\n 'brand-300': true;\n 'brand-400': true;\n 'brand-500': true;\n 'brand-600': true;\n 'brand-700': true;\n 'brand-800': true;\n 'success-300': true;\n 'success-900': true;\n 'warning-400': true;\n 'warning-600': true;\n 'warning-900': true;\n 'danger-200': true;\n 'danger-900': true;\n}\n\n// Redeclaring types as interfaces to prevent TS errors\n\ninterface MarginAndPaddings\n extends MarginProps,\n MarginTopProps,\n MarginRightProps,\n MarginBottomProps,\n MarginLeftProps,\n MarginXProps,\n MarginYProps,\n PaddingProps,\n PaddingTopProps,\n PaddingRightProps,\n PaddingBottomProps,\n PaddingLeftProps,\n PaddingXProps,\n PaddingYProps {}\n\ntype SpacePropsT = {\n [key in keyof XstyledSpace]?: XstyledSpace[key];\n} & {\n [key in keyof MarginAndPaddings]?: XstyledSpace[key] |
|
|
4
|
+
"sourcesContent": ["import type {\n SpaceProps as XstyledSpace,\n MarginProps,\n MarginTopProps,\n MarginRightProps,\n MarginBottomProps,\n MarginLeftProps,\n MarginXProps,\n MarginYProps,\n PaddingProps,\n PaddingTopProps,\n PaddingRightProps,\n PaddingBottomProps,\n PaddingLeftProps,\n PaddingXProps,\n PaddingYProps,\n ColorProps as XstyledColor,\n TypographyProps,\n FlexboxesProps,\n} from '@xstyled/system';\nimport type { Theme } from './types.js';\n\nexport type { FlattenSimpleInterpolation, FlattenInterpolation } from 'styled-components';\n\nexport type {\n LayoutProps,\n SizingProps,\n FontSizeProps,\n PositionProps,\n BoxShadowProps,\n LineHeightProps,\n} from '@xstyled/system';\n\ninterface DummyColorTheme {\n 'neutral-100': true;\n 'neutral-200': true;\n 'neutral-300': true;\n 'neutral-400': true;\n 'neutral-500': true;\n 'neutral-600': true;\n 'neutral-700': true;\n 'neutral-800': true;\n 'neutral-000': true;\n 'neutral-050': true;\n 'neutral-080': true;\n 'brand-100': true;\n 'brand-200': true;\n 'brand-300': true;\n 'brand-400': true;\n 'brand-500': true;\n 'brand-600': true;\n 'brand-700': true;\n 'brand-800': true;\n 'success-300': true;\n 'success-900': true;\n 'warning-400': true;\n 'warning-600': true;\n 'warning-900': true;\n 'danger-200': true;\n 'danger-900': true;\n}\n\ntype AllColors =\n | keyof DummyColorTheme\n | `${keyof DummyColorTheme}-${string}`\n | `#${string}`\n | `rgba(${string})`\n | `rgb(${string})`;\n\ntype AllMeasures =\n | keyof Theme['space']\n | `${number}%`\n | `${number}em`\n | `${number}px`\n | `${number}rem`\n | `${number}vh`\n | `${number}vw`\n | `${number}vmin`\n | `${number}vmax`;\n\n// Redeclaring types as interfaces to prevent TS errors\n\ninterface MarginAndPaddings\n extends MarginProps,\n MarginTopProps,\n MarginRightProps,\n MarginBottomProps,\n MarginLeftProps,\n MarginXProps,\n MarginYProps,\n PaddingProps,\n PaddingTopProps,\n PaddingRightProps,\n PaddingBottomProps,\n PaddingLeftProps,\n PaddingXProps,\n PaddingYProps {}\n\ntype SpacePropsT = {\n [key in keyof XstyledSpace]?: XstyledSpace[key];\n} & {\n [key in keyof MarginAndPaddings]?: XstyledSpace[key] | AllMeasures;\n};\n\ntype ColorPropsT = {\n [key in keyof XstyledColor]?: XstyledColor[key] | AllColors;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface SpaceProps extends SpacePropsT {}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface ColorProps extends ColorPropsT {}\n\nexport interface BorderProps {\n border?: string;\n borderTop?: string;\n borderBottom?: string;\n borderRight?: string;\n borderLeft?: string;\n borderColor?: AllColors;\n borderTopColor?: AllColors;\n borderBottomColor?: AllColors;\n borderRightColor?: AllColors;\n borderLeftColor?: AllColors;\n borderStyle?: string;\n borderTopStyle?: string;\n borderBottomStyle?: string;\n borderRightStyle?: string;\n borderLeftStyle?: string;\n borderWidth?: AllMeasures;\n borderTopWidth?: AllMeasures;\n borderBottomWidth?: AllMeasures;\n borderRightWidth?: AllMeasures;\n borderLeftWidth?: AllMeasures;\n borderRadius?: AllMeasures;\n}\n\nexport interface BackgroundProps {\n backgroundColor?: AllColors;\n bg?: AllColors;\n}\n\nexport type { TypographyProps, FlexboxesProps };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -15,15 +15,10 @@ const defaultOptions = {
|
|
|
15
15
|
name: null,
|
|
16
16
|
slot: null
|
|
17
17
|
};
|
|
18
|
-
const styledFunctionCache = /* @__PURE__ */ new WeakMap();
|
|
19
18
|
const styledFunction = (tag, options = defaultOptions) => {
|
|
20
19
|
const { name: componentName, slot: componentSlot } = options;
|
|
21
20
|
checkNamingConvention(componentName, componentSlot);
|
|
22
21
|
const baseStyledResolver = baseStyled(tag);
|
|
23
|
-
const styledAttributes = {
|
|
24
|
-
attrs: (...args) => baseStyledResolver.attrs(...args),
|
|
25
|
-
withConfig: (...args) => baseStyledResolver.withConfig(...args)
|
|
26
|
-
};
|
|
27
22
|
const dsStyledResolver = (styleArg, ...expressions) => {
|
|
28
23
|
const expressionsWithDsStyledComponentId = dsStyledComponentTransform(expressions);
|
|
29
24
|
const [styleArgWithMagic, expressionsWithMagic] = magicCssTransform(styleArg, expressionsWithDsStyledComponentId);
|
|
@@ -42,8 +37,7 @@ const styledFunction = (tag, options = defaultOptions) => {
|
|
|
42
37
|
baseStyledResolver
|
|
43
38
|
);
|
|
44
39
|
const Component = baseStyledResolverWithAttributes(fixedStyleArg, ...expressionsWithThemeCoerced);
|
|
45
|
-
const
|
|
46
|
-
const ComponentWithRefsMerged = MemoizedComponentWithRefsMerged ?? ((props) => {
|
|
40
|
+
const ComponentWithRefsMerged = (props) => {
|
|
47
41
|
const dataTestId = props["data-testid"] ?? (displayName !== null ? displayNameToKebabCase(displayName) : "");
|
|
48
42
|
const dataDimsumSlot = displayName !== null ? displayNameToPropCase(displayName) : "";
|
|
49
43
|
const partProps = getPartProps({
|
|
@@ -61,8 +55,7 @@ const styledFunction = (tag, options = defaultOptions) => {
|
|
|
61
55
|
innerRef: mergedRef
|
|
62
56
|
};
|
|
63
57
|
return /* @__PURE__ */ jsx(Component, { ...propsWithRefMerged });
|
|
64
|
-
}
|
|
65
|
-
styledFunctionCache.set(Component, ComponentWithRefsMerged);
|
|
58
|
+
};
|
|
66
59
|
if (displayName !== null) {
|
|
67
60
|
Component.displayName = displayName;
|
|
68
61
|
}
|
|
@@ -70,6 +63,16 @@ const styledFunction = (tag, options = defaultOptions) => {
|
|
|
70
63
|
ComponentWithRefsMerged.toString = Component.toString;
|
|
71
64
|
return ComponentWithRefsMerged;
|
|
72
65
|
};
|
|
66
|
+
const styledAttributes = {
|
|
67
|
+
attrs: (...args) => {
|
|
68
|
+
baseStyledResolver.attrs(...args);
|
|
69
|
+
return dsStyledResolver;
|
|
70
|
+
},
|
|
71
|
+
withConfig: (...args) => {
|
|
72
|
+
baseStyledResolver.withConfig(...args);
|
|
73
|
+
return dsStyledResolver;
|
|
74
|
+
}
|
|
75
|
+
};
|
|
73
76
|
return Object.assign(dsStyledResolver, styledAttributes);
|
|
74
77
|
};
|
|
75
78
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/styled/styledFunction.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { AnyStyledComponent,
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-unused-vars */\n/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { AnyStyledComponent, ThemedStyledFunction } from 'styled-components';\nimport { checkNamingConvention } from './checkNamingConvention.js';\nimport { styled as baseStyled } from './system.js';\nimport { dsStyledComponentTransform, magicCssTransform } from './transformers/index.js';\nimport type {\n AnyStyledRef,\n Options,\n OwnerInterface,\n InnerRefInterface,\n Theme,\n ThemedStyledFunctionBase,\n} from './types.js';\nimport { coerceWithDefaultTheme } from './coerceWithDefaultTheme.js';\nimport { genStyleOverridesExpression, genVariantOverridesExpression } from './expressions/index.js';\nimport { fixStyleArg } from './fixStyleArg.js';\nimport { generateAutoCalculated } from './generated-attributes/index.js';\nimport { getPartProps } from './generated-attributes/generateAttributes.js';\nimport { mergeRefs } from './generated-attributes/utils/refMerger.js';\nimport { displayNameToKebabCase, displayNameToPropCase } from './helpers.js';\nimport { useMemo } from 'react';\n\nconst defaultOptions: Options = {\n name: null,\n slot: null,\n};\n\nexport const styledFunction = <C extends AnyStyledComponent | keyof JSX.IntrinsicElements | React.ComponentType<any>>(\n tag: C,\n options: Options = defaultOptions,\n) => {\n const { name: componentName, slot: componentSlot } = options;\n\n checkNamingConvention(componentName, componentSlot);\n\n // Here we use the `as` because when C is keyof JSX.IntrinsicElements we get `never` for the attributes generic\n // We want to account for string | number | symbol that's why we transform it to `keyof any`\n const baseStyledResolver = baseStyled(tag) as unknown as ThemedStyledFunction<C, Theme, {}, keyof any>;\n\n // Due to the recursive natura of this function, we can't type it properly\n // Since we can apply .attrs or .withConfig, we are not sure on the type of the returned function\n // @ts-expect-error explained above\n const dsStyledResolver: ThemedStyledFunctionBase<C, Theme> = (styleArg, ...expressions) => {\n /**\n * Here we apply a transformation to the expressions only.\n * Since this resolver is returning a HOC of a styled-component, the syntax support for\n * selecting the className of another styled-component is not available anymore.\n * That's why we assign it a `dsStyledComponnentId`, we will replace the component's call for\n * the corresponding id\n */\n const expressionsWithDsStyledComponentId = dsStyledComponentTransform(expressions);\n\n /**\n * Here we apply a CSS transformation to support MAGIC styled components\n * This makes it possible to use the following syntax:\n * color: neutral-100;\n * background-color: success-900;\n */\n const [styleArgWithMagic, expressionsWithMagic] = magicCssTransform(styleArg, expressionsWithDsStyledComponentId);\n\n /**\n * We coerce all the already written expressions with the default theme\n * This prevents styled components to break when a theme is not provided\n * either with the HOC or the ThemeProvider\n */\n const expressionsWithThemeCoerced = coerceWithDefaultTheme(expressionsWithMagic);\n\n if (componentName && componentSlot) {\n // Here we add the style overrides expression\n expressionsWithThemeCoerced.push(genStyleOverridesExpression(componentName, componentSlot));\n }\n\n if (componentName && componentSlot === 'root') {\n // Here we add the variant overrides from the user (only for the root slot\n expressionsWithThemeCoerced.push(genVariantOverridesExpression(componentName));\n }\n\n /**\n * Here we will fix the format of the style argument\n * We possible added some new expressions into the mix,\n * so we need to properly adjust the style arg\n */\n const numOfExpressionsAdded = expressionsWithThemeCoerced.length - expressionsWithMagic.length;\n\n const fixedStyleArg = fixStyleArg(styleArgWithMagic, numOfExpressionsAdded);\n\n // We will add autocalculated attributes to the styled component\n const [displayName, attributes] = generateAutoCalculated(options);\n\n // For each attribute function, we will call `attrs` func with it\n // This will add the attributes to the styled component\n const baseStyledResolverWithAttributes = attributes.reduce<typeof baseStyledResolver>(\n (curStyledResolver, attributeFunc) => curStyledResolver.attrs(attributeFunc),\n baseStyledResolver,\n );\n\n const Component = baseStyledResolverWithAttributes(fixedStyleArg, ...expressionsWithThemeCoerced);\n\n const ComponentWithRefsMerged = (props: OwnerInterface & InnerRefInterface<C> & { 'data-testid'?: string }) => {\n // we may or not have data-testid at this point, so we need to calculate it\n const dataTestId = props['data-testid'] ?? (displayName !== null ? displayNameToKebabCase(displayName) : '');\n // we also need to calculate dataDimsumSlot at this point\n const dataDimsumSlot = displayName !== null ? displayNameToPropCase(displayName) : '';\n // then we get the part props for this slot, and we cast it to use refs\n const partProps = getPartProps({\n ...props,\n 'data-testid': dataTestId,\n 'data-dimsum-slot': dataDimsumSlot,\n }) as {\n innerRef?: AnyStyledRef<HTMLElement>;\n };\n\n const mergedRef = useMemo(\n () => mergeRefs(props.innerRef, partProps.innerRef),\n [props.innerRef, partProps.innerRef],\n );\n\n const propsWithRefMerged = {\n ...props,\n ref: mergedRef,\n innerRef: mergedRef,\n } as React.ComponentProps<C>;\n\n return <Component {...propsWithRefMerged} />;\n };\n\n if (displayName !== null) {\n Component.displayName = displayName;\n }\n\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore We use dsStyledComponent to access the original's component id\n ComponentWithRefsMerged.dsStyledComponentId = Component.styledComponentId as string;\n ComponentWithRefsMerged.toString = Component.toString;\n\n return ComponentWithRefsMerged;\n };\n\n // Here we use arrow functions to preserve the `this` context\n const styledAttributes = {\n attrs: ((...args) => {\n baseStyledResolver.attrs(...args);\n return dsStyledResolver;\n }) as (typeof baseStyledResolver)['attrs'],\n withConfig: ((...args) => {\n baseStyledResolver.withConfig(...args);\n return dsStyledResolver;\n }) as (typeof baseStyledResolver)['withConfig'],\n };\n\n return Object.assign(dsStyledResolver, styledAttributes);\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC6HV;AAzHb,SAAS,6BAA6B;AACtC,SAAS,UAAU,kBAAkB;AACrC,SAAS,4BAA4B,yBAAyB;AAS9D,SAAS,8BAA8B;AACvC,SAAS,6BAA6B,qCAAqC;AAC3E,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB,6BAA6B;AAC9D,SAAS,eAAe;AAExB,MAAM,iBAA0B;AAAA,EAC9B,MAAM;AAAA,EACN,MAAM;AACR;AAEO,MAAM,iBAAiB,CAC5B,KACA,UAAmB,mBAChB;AACH,QAAM,EAAE,MAAM,eAAe,MAAM,cAAc,IAAI;AAErD,wBAAsB,eAAe,aAAa;AAIlD,QAAM,qBAAqB,WAAW,GAAG;AAKzC,QAAM,mBAAuD,CAAC,aAAa,gBAAgB;AAQzF,UAAM,qCAAqC,2BAA2B,WAAW;AAQjF,UAAM,CAAC,mBAAmB,oBAAoB,IAAI,kBAAkB,UAAU,kCAAkC;AAOhH,UAAM,8BAA8B,uBAAuB,oBAAoB;AAE/E,QAAI,iBAAiB,eAAe;AAElC,kCAA4B,KAAK,4BAA4B,eAAe,aAAa,CAAC;AAAA,IAC5F;AAEA,QAAI,iBAAiB,kBAAkB,QAAQ;AAE7C,kCAA4B,KAAK,8BAA8B,aAAa,CAAC;AAAA,IAC/E;AAOA,UAAM,wBAAwB,4BAA4B,SAAS,qBAAqB;AAExF,UAAM,gBAAgB,YAAY,mBAAmB,qBAAqB;AAG1E,UAAM,CAAC,aAAa,UAAU,IAAI,uBAAuB,OAAO;AAIhE,UAAM,mCAAmC,WAAW;AAAA,MAClD,CAAC,mBAAmB,kBAAkB,kBAAkB,MAAM,aAAa;AAAA,MAC3E;AAAA,IACF;AAEA,UAAM,YAAY,iCAAiC,eAAe,GAAG,2BAA2B;AAEhG,UAAM,0BAA0B,CAAC,UAA8E;AAE7G,YAAM,aAAa,MAAM,aAAa,MAAM,gBAAgB,OAAO,uBAAuB,WAAW,IAAI;AAEzG,YAAM,iBAAiB,gBAAgB,OAAO,sBAAsB,WAAW,IAAI;AAEnF,YAAM,YAAY,aAAa;AAAA,QAC7B,GAAG;AAAA,QACH,eAAe;AAAA,QACf,oBAAoB;AAAA,MACtB,CAAC;AAID,YAAM,YAAY;AAAA,QAChB,MAAM,UAAU,MAAM,UAAU,UAAU,QAAQ;AAAA,QAClD,CAAC,MAAM,UAAU,UAAU,QAAQ;AAAA,MACrC;AAEA,YAAM,qBAAqB;AAAA,QACzB,GAAG;AAAA,QACH,KAAK;AAAA,QACL,UAAU;AAAA,MACZ;AAEA,aAAO,oBAAC,aAAW,GAAG,oBAAoB;AAAA,IAC5C;AAEA,QAAI,gBAAgB,MAAM;AACxB,gBAAU,cAAc;AAAA,IAC1B;AAIA,4BAAwB,sBAAsB,UAAU;AACxD,4BAAwB,WAAW,UAAU;AAE7C,WAAO;AAAA,EACT;AAGA,QAAM,mBAAmB;AAAA,IACvB,OAAQ,IAAI,SAAS;AACnB,yBAAmB,MAAM,GAAG,IAAI;AAChC,aAAO;AAAA,IACT;AAAA,IACA,YAAa,IAAI,SAAS;AACxB,yBAAmB,WAAW,GAAG,IAAI;AACrC,aAAO;AAAA,IACT;AAAA,EACF;AAEA,SAAO,OAAO,OAAO,kBAAkB,gBAAgB;AACzD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -30,15 +30,17 @@ interface DummyColorTheme {
|
|
|
30
30
|
'danger-200': true;
|
|
31
31
|
'danger-900': true;
|
|
32
32
|
}
|
|
33
|
+
type AllColors = keyof DummyColorTheme | `${keyof DummyColorTheme}-${string}` | `#${string}` | `rgba(${string})` | `rgb(${string})`;
|
|
34
|
+
type AllMeasures = keyof Theme['space'] | `${number}%` | `${number}em` | `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}vmin` | `${number}vmax`;
|
|
33
35
|
interface MarginAndPaddings extends MarginProps, MarginTopProps, MarginRightProps, MarginBottomProps, MarginLeftProps, MarginXProps, MarginYProps, PaddingProps, PaddingTopProps, PaddingRightProps, PaddingBottomProps, PaddingLeftProps, PaddingXProps, PaddingYProps {
|
|
34
36
|
}
|
|
35
37
|
type SpacePropsT = {
|
|
36
38
|
[key in keyof XstyledSpace]?: XstyledSpace[key];
|
|
37
39
|
} & {
|
|
38
|
-
[key in keyof MarginAndPaddings]?: XstyledSpace[key] |
|
|
40
|
+
[key in keyof MarginAndPaddings]?: XstyledSpace[key] | AllMeasures;
|
|
39
41
|
};
|
|
40
42
|
type ColorPropsT = {
|
|
41
|
-
[key in keyof XstyledColor]?: XstyledColor[key] |
|
|
43
|
+
[key in keyof XstyledColor]?: XstyledColor[key] | AllColors;
|
|
42
44
|
};
|
|
43
45
|
export interface SpaceProps extends SpacePropsT {
|
|
44
46
|
}
|
|
@@ -50,25 +52,25 @@ export interface BorderProps {
|
|
|
50
52
|
borderBottom?: string;
|
|
51
53
|
borderRight?: string;
|
|
52
54
|
borderLeft?: string;
|
|
53
|
-
borderColor?:
|
|
54
|
-
borderTopColor?:
|
|
55
|
-
borderBottomColor?:
|
|
56
|
-
borderRightColor?:
|
|
57
|
-
borderLeftColor?:
|
|
55
|
+
borderColor?: AllColors;
|
|
56
|
+
borderTopColor?: AllColors;
|
|
57
|
+
borderBottomColor?: AllColors;
|
|
58
|
+
borderRightColor?: AllColors;
|
|
59
|
+
borderLeftColor?: AllColors;
|
|
58
60
|
borderStyle?: string;
|
|
59
61
|
borderTopStyle?: string;
|
|
60
62
|
borderBottomStyle?: string;
|
|
61
63
|
borderRightStyle?: string;
|
|
62
64
|
borderLeftStyle?: string;
|
|
63
|
-
borderWidth?:
|
|
64
|
-
borderTopWidth?:
|
|
65
|
-
borderBottomWidth?:
|
|
66
|
-
borderRightWidth?:
|
|
67
|
-
borderLeftWidth?:
|
|
68
|
-
borderRadius?:
|
|
65
|
+
borderWidth?: AllMeasures;
|
|
66
|
+
borderTopWidth?: AllMeasures;
|
|
67
|
+
borderBottomWidth?: AllMeasures;
|
|
68
|
+
borderRightWidth?: AllMeasures;
|
|
69
|
+
borderLeftWidth?: AllMeasures;
|
|
70
|
+
borderRadius?: AllMeasures;
|
|
69
71
|
}
|
|
70
72
|
export interface BackgroundProps {
|
|
71
|
-
backgroundColor?:
|
|
72
|
-
bg?:
|
|
73
|
+
backgroundColor?: AllColors;
|
|
74
|
+
bg?: AllColors;
|
|
73
75
|
}
|
|
74
76
|
export type { TypographyProps, FlexboxesProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-system",
|
|
3
|
-
"version": "3.27.0-next.
|
|
3
|
+
"version": "3.27.0-next.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - System",
|
|
6
6
|
"files": [
|
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
101
101
|
"@elliemae/pui-theme": "~2.7.0",
|
|
102
102
|
"styled-components": "~5.3.9",
|
|
103
|
-
"@elliemae/ds-monorepo-devops": "3.27.0-next.
|
|
103
|
+
"@elliemae/ds-monorepo-devops": "3.27.0-next.3"
|
|
104
104
|
},
|
|
105
105
|
"peerDependencies": {
|
|
106
106
|
"@elliemae/pui-theme": "^2.7.0",
|