Skip to content

Commit cfdd816

Browse files
jjenzzjjenzz
committed
Add createStyleObj for a simplified implementation
1 parent e106a3b commit cfdd816

File tree

43 files changed

+386
-402
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+386
-402
lines changed

‎packages/core/utils/package.json

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,10 @@
1717
"prepublish": "npm run build"
1818
},
1919
"dependencies": {
20-
"lodash.camelcase": "^4.3.0",
2120
"lodash.kebabcase": "^4.1.1",
2221
"tslib": "^2.0.0"
2322
},
2423
"devDependencies": {
25-
"@types/lodash.camelcase": "^4.3.6",
2624
"@types/lodash.kebabcase": "^4.1.6"
2725
}
2826
}

‎packages/core/utils/src/domUtils.ts

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import kebabCase from 'lodash.kebabcase';
2-
import camelCase from 'lodash.camelcase';
32
import { isFunction } from './typeUtils';
43

54
export function interopDataAttr(componentPart: string) {
@@ -10,12 +9,6 @@ export function interopDataAttrObj(componentPart: string) {
109
return { [interopDataAttr(componentPart)]: '' };
1110
}
1211

13-
export function interopSelector(componentPart: string) {
14-
return process.env.EXTRACT_CSS
15-
? interopDataAttrSelector(componentPart)
16-
: camelCase(componentPart.split('.').reverse()[0]);
17-
}
18-
1912
export function interopDataAttrSelector(componentPart: string) {
2013
return `[${interopDataAttr(componentPart)}]`;
2114
}

‎packages/react/accessible-icon/src/AccessibleIcon.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { VisuallyHidden } from '@interop-ui/react-visually-hidden';
3-
import { cssReset, interopDataAttrObj, interopSelector } from '@interop-ui/utils';
4-
import { forwardRef, PrimitiveStyles } from '@interop-ui/react-utils';
3+
import { cssReset } from '@interop-ui/utils';
4+
import { forwardRef, createStyleObj } from '@interop-ui/react-utils';
55

66
const NAME = 'AccessibleIcon';
77
const DEFAULT_TAG = 'span';
@@ -18,7 +18,7 @@ const AccessibleIcon = forwardRef<typeof DEFAULT_TAG, AccessibleIconProps>(funct
1818
const child = React.Children.only(children);
1919

2020
return (
21-
<Comp {...interopDataAttrObj(NAME)} ref={forwardedRef} {...iconProps}>
21+
<Comp {...interopDataAttrObj('root')} ref={forwardedRef} {...iconProps}>
2222
{React.cloneElement(child as React.ReactElement, {
2323
// accessibility
2424
'aria-hidden': true,
@@ -31,11 +31,11 @@ const AccessibleIcon = forwardRef<typeof DEFAULT_TAG, AccessibleIconProps>(funct
3131

3232
AccessibleIcon.displayName = NAME;
3333

34-
const styles: PrimitiveStyles<'accessibleIcon'> = {
35-
[interopSelector(NAME)]: {
34+
const [styles, interopDataAttrObj] = createStyleObj(NAME, {
35+
root: {
3636
...cssReset(DEFAULT_TAG),
3737
},
38-
};
38+
});
3939

4040
export { styles, AccessibleIcon };
4141
export type { AccessibleIconProps };

‎packages/react/accordion/src/Accordion.tsx

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React from 'react';
2-
import { cssReset, interopDataAttrObj, interopSelector } from '@interop-ui/utils';
2+
import { cssReset } from '@interop-ui/utils';
33
import {
44
composeEventHandlers,
55
createContext,
6+
createStyleObj,
67
forwardRef,
78
useComposedRefs,
89
useControlledState,
910
useId,
10-
PrimitiveStyles,
1111
} from '@interop-ui/react-utils';
1212
import { Collapsible, styles as collapsibleStyles } from '@interop-ui/react-collapsible';
1313

@@ -81,7 +81,7 @@ const AccordionItem = forwardRef<typeof ITEM_DEFAULT_TAG, AccordionItemProps>(
8181
return (
8282
<Collapsible
8383
{...accordionItemProps}
84-
{...interopDataAttrObj(ITEM_NAME)}
84+
{...interopDataAttrObj('item')}
8585
ref={forwardedRef}
8686
disabled={accordionContext.isDisabled ?? props.disabled}
8787
isOpen={isOpen}
@@ -110,7 +110,7 @@ const AccordionHeader = forwardRef<typeof HEADER_DEFAULT_TAG, AccordionHeaderPro
110110
function AccordionHeader(props, forwardedRef) {
111111
const { as: Comp = HEADER_DEFAULT_TAG, ...headerProps } = props;
112112

113-
return <Comp ref={forwardedRef} {...headerProps} {...interopDataAttrObj(HEADER_NAME)} />;
113+
return <Comp ref={forwardedRef} {...headerProps} {...interopDataAttrObj('header')} />;
114114
}
115115
);
116116

@@ -152,7 +152,7 @@ const AccordionButton = forwardRef<typeof BUTTON_DEFAULT_TAG, AccordionButtonPro
152152
return (
153153
<Collapsible.Button
154154
{...buttonProps}
155-
{...interopDataAttrObj(BUTTON_NAME)}
155+
{...interopDataAttrObj('button')}
156156
ref={composedRefs}
157157
aria-disabled={itemContext.isOpen || undefined}
158158
id={itemContext.buttonId}
@@ -206,7 +206,7 @@ const AccordionPanel = forwardRef<typeof PANEL_DEFAULT_TAG, AccordionPanelProps>
206206
return (
207207
<Collapsible.Content
208208
{...props}
209-
{...interopDataAttrObj(PANEL_NAME)}
209+
{...interopDataAttrObj('panel')}
210210
ref={forwardedRef}
211211
role="region"
212212
aria-labelledby={itemContext.buttonId}
@@ -307,7 +307,7 @@ const Accordion = forwardRef<typeof ACCORDION_DEFAULT_TAG, AccordionProps, Accor
307307
return (
308308
<Comp
309309
{...accordionProps}
310-
{...interopDataAttrObj(ACCORDION_NAME)}
310+
{...interopDataAttrObj('root')}
311311
ref={composedRefs}
312312
onKeyDown={isDisabled ? undefined : handleKeyDown}
313313
>
@@ -340,26 +340,26 @@ interface AccordionStaticProps {
340340
Panel: typeof AccordionPanel;
341341
}
342342

343-
const styles: PrimitiveStyles<'accordion' | 'item' | 'header' | 'button' | 'panel'> = {
344-
[interopSelector(ACCORDION_NAME)]: {
343+
const [styles, interopDataAttrObj] = createStyleObj(ACCORDION_NAME, {
344+
root: {
345345
...cssReset(ACCORDION_DEFAULT_TAG),
346346
},
347-
[interopSelector(ITEM_NAME)]: {
347+
item: {
348348
...cssReset(ITEM_DEFAULT_TAG),
349-
...(collapsibleStyles as any)[interopSelector(Collapsible.displayName)],
349+
...collapsibleStyles.root,
350350
},
351-
[interopSelector(HEADER_NAME)]: {
351+
header: {
352352
...cssReset(HEADER_DEFAULT_TAG),
353353
},
354-
[interopSelector(BUTTON_NAME)]: {
354+
button: {
355355
...cssReset(BUTTON_DEFAULT_TAG),
356-
...(collapsibleStyles as any)[interopSelector(Collapsible.Button.displayName)],
356+
...collapsibleStyles.button,
357357
},
358-
[interopSelector(PANEL_NAME)]: {
358+
panel: {
359359
...cssReset(PANEL_DEFAULT_TAG),
360-
...(collapsibleStyles as any)[interopSelector(Collapsible.Content.displayName)],
360+
...collapsibleStyles.content,
361361
},
362-
};
362+
});
363363

364364
export { Accordion, styles };
365365
export type {

‎packages/react/arrow/src/Arrow.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
2-
import { cssReset, interopDataAttrObj, interopSelector } from '@interop-ui/utils';
3-
import { PrimitiveStyles } from '@interop-ui/react-utils';
2+
import { cssReset } from '@interop-ui/utils';
3+
import { createStyleObj } from '@interop-ui/react-utils';
44

55
const NAME = 'Arrow';
66
const DEFAULT_TAG = 'svg';
@@ -11,7 +11,7 @@ type ArrowProps = ArrowDOMProps;
1111
const Arrow = React.forwardRef<SVGSVGElement, ArrowProps>(function Arrow(props, forwardedRef) {
1212
return (
1313
<svg
14-
{...interopDataAttrObj(NAME)}
14+
{...interopDataAttrObj('root')}
1515
{...props}
1616
ref={forwardedRef}
1717
viewBox="0 0 30 10"
@@ -28,11 +28,11 @@ Arrow.defaultProps = {
2828
height: 5,
2929
};
3030

31-
const styles: PrimitiveStyles<'arrow'> = {
32-
[interopSelector(NAME)]: {
31+
const [styles, interopDataAttrObj] = createStyleObj(NAME, {
32+
root: {
3333
...cssReset(DEFAULT_TAG),
3434
},
35-
};
35+
});
3636

3737
export { Arrow, styles };
3838
export type { ArrowProps };

‎packages/react/aspect-ratio/src/AspectRatio.tsx

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
2-
import { cssReset, interopDataAttrObj, interopSelector } from '@interop-ui/utils';
3-
import { forwardRef, PrimitiveStyles } from '@interop-ui/react-utils';
2+
import { cssReset } from '@interop-ui/utils';
3+
import { forwardRef, createStyleObj } from '@interop-ui/react-utils';
44

55
const ROOT_NAME = 'AspectRatio.Root';
66
const ROOT_DEFAULT_TAG = 'div';
@@ -19,7 +19,7 @@ const AspectRatioRoot = forwardRef<typeof ROOT_DEFAULT_TAG, AspectRatioProps>(
1919
return (
2020
<Comp
2121
{...aspectRatioProps}
22-
{...interopDataAttrObj(ROOT_NAME)}
22+
{...interopDataAttrObj('root')}
2323
ref={forwardedRef}
2424
style={{
2525
paddingBottom: `${paddingBottom}%`,
@@ -41,7 +41,7 @@ const AspectRatioInner = forwardRef<typeof INNER_DEFAULT_TAG, AspectRatioInnerPr
4141
function AspectRatioInner(props, forwardedRef) {
4242
const { as: Comp = INNER_DEFAULT_TAG, ...innerProps } = props;
4343

44-
return <Comp ref={forwardedRef} {...innerProps} {...interopDataAttrObj(INNER_NAME)} />;
44+
return <Comp ref={forwardedRef} {...innerProps} {...interopDataAttrObj('inner')} />;
4545
}
4646
);
4747

@@ -52,11 +52,7 @@ const AspectRatio = forwardRef<typeof ROOT_DEFAULT_TAG, AspectRatioProps, Aspect
5252
const { children, ...aspectRatioProps } = props;
5353

5454
return (
55-
<AspectRatioRoot
56-
{...aspectRatioProps}
57-
{...interopDataAttrObj(ASPECT_RATIO_NAME)}
58-
ref={forwardedRef}
59-
>
55+
<AspectRatioRoot {...aspectRatioProps} ref={forwardedRef}>
6056
<AspectRatioInner>{children}</AspectRatioInner>
6157
</AspectRatioRoot>
6258
);
@@ -75,21 +71,21 @@ interface AspectRatioStaticProps {
7571
Inner: typeof AspectRatioInner;
7672
}
7773

78-
const styles: PrimitiveStyles<'root' | 'inner'> = {
79-
[interopSelector(ROOT_NAME)]: {
74+
const [styles, interopDataAttrObj] = createStyleObj(ASPECT_RATIO_NAME, {
75+
root: {
8076
...cssReset(ROOT_DEFAULT_TAG),
8177
position: 'relative',
8278
width: '100%',
8379
},
84-
[interopSelector(INNER_NAME)]: {
80+
inner: {
8581
...cssReset(INNER_DEFAULT_TAG),
8682
position: 'absolute',
8783
left: 0,
8884
top: 0,
8985
width: '100%',
9086
height: '100%',
9187
},
92-
};
88+
});
9389

9490
export { AspectRatio, styles };
9591
export type { AspectRatioProps, AspectRatioInnerProps };

‎packages/react/avatar/src/Avatar.tsx

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import * as React from 'react';
22
import { AvatarIcon as RadixIcon } from '@modulz/radix-icons';
33
import { Image as ImagePrimitive } from '@interop-ui/react-image';
4-
import { cssReset, interopDataAttrObj, isFunction, interopSelector } from '@interop-ui/utils';
5-
import { createContext, forwardRef, PrimitiveStyles } from '@interop-ui/react-utils';
4+
import { cssReset, isFunction } from '@interop-ui/utils';
5+
import { createContext, forwardRef, createStyleObj } from '@interop-ui/react-utils';
66

77
const ROOT_NAME = 'Avatar.Root';
88
const ROOT_DEFAULT_TAG = 'span';
@@ -74,7 +74,7 @@ const AvatarRoot = forwardRef<typeof ROOT_DEFAULT_TAG, AvatarProps>(function Ava
7474

7575
return (
7676
<AvatarContext.Provider value={ctx}>
77-
<Comp {...interopDataAttrObj(ROOT_NAME)} {...avatarProps} ref={forwardedRef}>
77+
<Comp {...interopDataAttrObj('root')} {...avatarProps} ref={forwardedRef}>
7878
{whatToRender === 'FALLBACK'
7979
? (renderFallback as Function)()
8080
: whatToRender === 'LOADING'
@@ -99,13 +99,7 @@ const AvatarImage = forwardRef<typeof IMAGE_DEFAULT_TAG, AvatarImageProps>(funct
9999
let { as: Comp = ImagePrimitive, children: _, ...imageProps } = props;
100100
let { src, alt, whatToRender } = useAvatarContext(IMAGE_NAME);
101101
return whatToRender === 'IMAGE' ? (
102-
<Comp
103-
{...interopDataAttrObj(IMAGE_NAME)}
104-
ref={forwardedRef}
105-
src={src}
106-
alt={alt}
107-
{...imageProps}
108-
/>
102+
<Comp {...interopDataAttrObj('image')} ref={forwardedRef} src={src} alt={alt} {...imageProps} />
109103
) : null;
110104
});
111105

@@ -123,7 +117,7 @@ const AvatarIcon = forwardRef<typeof ICON_DEFAULT_TAG, AvatarIconProps>(function
123117
let { as: Comp = RadixIcon as any, ...iconProps } = props;
124118
let { whatToRender } = useAvatarContext(ICON_NAME);
125119
return whatToRender === 'ICON' ? (
126-
<Comp {...interopDataAttrObj(ICON_NAME)} ref={forwardedRef} {...iconProps} />
120+
<Comp {...interopDataAttrObj('icon')} ref={forwardedRef} {...iconProps} />
127121
) : null;
128122
});
129123

@@ -141,7 +135,7 @@ const AvatarAbbr = forwardRef<typeof ABBR_DEFAULT_TAG, AvatarAbbrProps>(function
141135
let { as: Comp = 'span', children, ...abbrProps } = props;
142136
let { alt, whatToRender } = useAvatarContext(ABBR_NAME);
143137
return alt && whatToRender === 'ALT_ABBR' ? (
144-
<Comp {...interopDataAttrObj(ABBR_NAME)} aria-hidden ref={forwardedRef} {...abbrProps}>
138+
<Comp {...interopDataAttrObj('abbr')} aria-hidden ref={forwardedRef} {...abbrProps}>
145139
{alt[0]}
146140
</Comp>
147141
) : null;
@@ -155,7 +149,7 @@ const Avatar = forwardRef<typeof AVATAR_DEFAULT_TAG, AvatarProps, AvatarStaticPr
155149
const { children, ...avatarProps } = props;
156150

157151
return (
158-
<AvatarRoot ref={forwardedRef} {...avatarProps} {...interopDataAttrObj(AVATAR_NAME)}>
152+
<AvatarRoot ref={forwardedRef} {...avatarProps}>
159153
<AvatarImage />
160154
<AvatarIcon />
161155
<AvatarAbbr />
@@ -217,8 +211,8 @@ function useImageLoadingStatus(src?: string) {
217211
return loadingStatus;
218212
}
219213

220-
const styles: PrimitiveStyles<'root' | 'image' | 'abbr' | 'icon'> = {
221-
[interopSelector(ROOT_NAME)]: {
214+
const [styles, interopDataAttrObj] = createStyleObj(AVATAR_NAME, {
215+
root: {
222216
...cssReset(ROOT_DEFAULT_TAG),
223217
display: 'inline-flex',
224218
alignItems: 'center',
@@ -227,7 +221,7 @@ const styles: PrimitiveStyles<'root' | 'image' | 'abbr' | 'icon'> = {
227221
overflow: 'hidden',
228222
userSelect: 'none',
229223
},
230-
[interopSelector(IMAGE_NAME)]: {
224+
image: {
231225
...cssReset(IMAGE_DEFAULT_TAG),
232226
width: '100%',
233227
height: '100%',
@@ -238,13 +232,13 @@ const styles: PrimitiveStyles<'root' | 'image' | 'abbr' | 'icon'> = {
238232
// Hide the image broken icon (Chrome only)
239233
textIndent: 10000,
240234
},
241-
[interopSelector(ABBR_NAME)]: {
235+
abbr: {
242236
...cssReset(ABBR_DEFAULT_TAG),
243237
},
244-
[interopSelector(ICON_NAME)]: {
238+
icon: {
245239
...cssReset(ICON_DEFAULT_TAG),
246240
},
247-
};
241+
});
248242

249243
export type { AvatarProps, AvatarImageProps, AvatarIconProps, AvatarAbbrProps };
250244
export { Avatar, styles };

‎packages/react/badge/src/Badge.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export default { title: 'Badge' };
55

66
export function Basic() {
77
return (
8-
<Badge style={badgeStyles.badge}>
8+
<Badge style={badgeStyles.root}>
99
Cool Badge <span aria-hidden>😎</span>
1010
</Badge>
1111
);

0 commit comments

Comments
 (0)