@elliemae/ds-system 3.30.0-rc.3 → 3.30.0-rc.4
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.
|
@@ -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, 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,
|
|
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 React, { 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,mBAA+B;AAE/B,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": ["../../../../../../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, 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,
|
|
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 React, { 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,SAAgB,eAAe;AAE/B,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
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import type { AnyStyledComponent, ThemedStyledFunction } from 'styled-components';
|
|
3
2
|
import type { Options, Theme, ThemedStyledFunctionBase } from './types.js';
|
|
4
|
-
|
|
3
|
+
import React from 'react';
|
|
4
|
+
export declare const styledFunction: <C extends React.ComponentType<any> | keyof JSX.IntrinsicElements | AnyStyledComponent>(tag: C, options?: Options) => ThemedStyledFunctionBase<C, Theme, {}, never> & {
|
|
5
5
|
attrs: <U, NewA extends Partial<import("styled-components").StyledComponentPropsWithRef<C> & U> & {
|
|
6
6
|
[others: string]: any;
|
|
7
7
|
} = {}>(attrs: NewA | ((props: import("styled-components").ThemedStyledProps<import("styled-components").StyledComponentPropsWithRef<C> & U, Theme>) => NewA)) => ThemedStyledFunction<C, Theme, {} & NewA, string | number | symbol | keyof NewA>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-system",
|
|
3
|
-
"version": "3.30.0-rc.
|
|
3
|
+
"version": "3.30.0-rc.4",
|
|
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.30.0-rc.
|
|
103
|
+
"@elliemae/ds-monorepo-devops": "3.30.0-rc.4"
|
|
104
104
|
},
|
|
105
105
|
"peerDependencies": {
|
|
106
106
|
"@elliemae/pui-theme": "^2.7.0",
|