REFACTOR.md

WIP

modules

• Rename .js files to .ts
• Rename .js files with JSX inside them to .tsx
• Create .types.ts to keep type information (replacing index.d.ts)
  • requires some refactor to use types directly in the tsx file. we'll generate .d.ts files for consumption at build

Components/theming

• Switch to named exports
• remove dark/light modes. we'll use theme for those
• use <brand.color.level> if a component needs to use brand color (e.g. bg: 'primary.400')
• make sure component is a styled instance [unconfirmed]
  • to allow referencing as nested selector for dynamic hover styling and such

---

Compare

JS way

import { Button } from '@audentio/stuff';

const heroStlyes = {
    m: 'spacing-sm',
    mt: 'spacing-sm',
    p: 'spacing-sm',
    size: 32,
    color: 'blue.200',
};

if (Math.random() > 0.4) {
    heroStlyes.size = 30;
}

const MyCustomBox = (
    <Box {...heroStyles} pl="spacing-sm">
        <Button>CTA</Button>
    </Box>
);

CSS way

const isSmall = Math.random() > 0.4;

const StyledCustomBox = styled(Box)`
    margin: ${props => props.theme.gutter}px;
    margin-top: ${props => props.theme.gutter * 3}px;
    padding: ${props => props.theme.gutter * 2}px;
    height: ${props => (isSmall ? '30px' : '32px')};
    width: ${props => (isSmall ? '30px' : '32px')};
    color: ${props => props.theme.colors.blue[200]};
`;

const MyCustomBox = () => {
    const theme = useTheme();

    return (
        <StyledCustomBox style={{ paddingLeft: theme.gutter * 3 }}>
            <Button>CTA</Button>
        </StyledCustomBox>
    );
};