Add styles typing for consumers

[jjenzz]

Closes #48

This solution isn't ideal because if a component name changes, we'll have a mismatch between the style object key and the typing if the developer forgets to update the PrimitiveStyles generic.

Unfortunately, my research into how we could handle this a bit better lead me to these two TS tickets which aren't currently possible:

• Augment Key during Type Mapping microsoft/TypeScript#12754
• Suggestion: Regex-validated string type microsoft/TypeScript#6579

The alternatives I explored all seemed to create too many complex abstractions which became hard to follow. I wanted to get this PR up so it at least works for release and then we can discuss how to solve this in a less human error prone way. It may be okay as is though since these values shouldn't change very often.

Any ideas? Solved

[benoitgrelard]

@jjenzz what do consumers practically get from this?

[jjenzz]

@benoitgrelard sorry, should have added this to description:

Before:

After:

[benoitgrelard]

Right I see, is that because we are expecting users to have to add the styles to the correct parts themselves?

[jjenzz]

Yep, or use our extracted css file. The options are as follows:

Option one

import { Button as ButtonPrimitive } from '@interop-ui/react-button';
import '@interop-ui/react-button/styles.css';
 
export const Button = styled(ButtonPrimitive, {
  borderRadius: '3px',
  padding: '10px 20px',
});

We have a yarn build:styles script that runs during build to create the style.css file from the primitive styles object. That's why the styles object keys aren't static (and need manually typing) because it switches what the keys output during static extraction process.

Option two

import { Button as ButtonPrimitive, styles } from '@interop-ui/react-button';
 
export const Button = styled(ButtonPrimitive, {
  ...styles.button,
  borderRadius: '3px',
  padding: '10px 20px',
});

[jjenzz]

I think we can probably refactor to something like:

const Accordion = props => {
	return <div {...interopDataAttrObj<typeof styles>('accordion')} {...props} />
};

export const styles = {
	accordion: {}
	button: {}
	panel: {}
};

and then the extraction script can use interopDataAttrSelector to map over and convert them. I probably should have done this really from the offset but didn't think of it at the time 😬

I might go through and do that instead. Will be a whole bunch of changes but will be cleaner.

[jjenzz]

This one is slightly different and uses a function callback so that we can get the right namespaced selector if we need to reference it in other component styles.

[jjenzz]

I've removed the need for this in a more recent PR #121

[jjenzz]

I can't make this part: Part here as it becomes part: never because inference fails

[jjenzz]

I've removed the need for this in a more recent PR #121

[jjenzz]

@benoitgrelard @chancestrickland Okay, this is huge now but it's ready. 😬

[jjenzz]

Annoyingly the icon string isn't typed here, it just expects string. It started to take a while to figure out and since it's only needed in one component, I time-boxed it and failed haha. I'd be surprised if it's possible tbh.

[jjenzz]

I've remove the need for this in a more recent PR #121

[chaance]

Didn't see any issues at first glance, and typing seems to work as expected. Ran out of time for a thorough review of this one but I may try to look again this weekend if you don't merge before then!

[jjenzz]

@chancestrickland @benoitgrelard I'm going to get this in so I can progress in other areas in your absence. Feel free to raise stuff after merge and I'll address 🙂