Weekly Sync #34 - Aug 25, 2021

[andresin87]

Notes from our last Weekly meeting

Agenda

• useSunscreen()
• Dashboard
• Contributor docs
• Tokens (see) discussion
• SUI-Tests metrics
  see: 5196ed1
• PinInput and Validation Code discussion
• Avatar Badge
• switch single label positioning

[andresz1]

Topics suggestions

Documentation

Create a documentation website and use sui-studio as a development tool only. This will:

• Improve the visibility of our open source tools
• Improve documentation itself
• Avoid repeated docs (demo + readme)

Maybe we can use:

• JAMStack - Next.js or Gatsby and MDX
• docusaurus
• docz

Missing points that we can add:

• Colors
• Typography
• Spacing
• Theming
• Among others

Some examples:

• baseui
• chakra-ui
• react-query
• react-hooks-form

Style system

Check what changes we can make to improve our style system (Sass). This will:

• Improve DX
• Improve build times (sass-loader is slow)
• Reduce used DOM Nodes

Somo ideas:

• Use css variables
• Move from Sass to another solution like Shopify did (see thread). They are moving from Sass to vanilla-extract
• Box component

<Box my={2}>
  <Button mr={4}>
    Click me!
  </Button>

  <Typography as="p" variant="p1">
    hello
  </Typography>
</Box>

Types

Maybe we can start adding TypeScript support like we are doing in sui-tools. This will:

• Improve DX
• Reduce possible typing bugs

Components API

Use a compound components based approach to create components. This will:

• Increase readability and flexibility
• Reduce changes
• Improve DX

Most of our current components API is like:

<Modal
  isOpen={isOpen}
  onClose={onClose}
  title="Title"
  closeIcon={<Icon />}
/>

When it could be something like:

<Modal isOpen={isOpen} onClose={onClose}>
  <ModalHeader>Title</ModalHeader>
  
  <ModalCloseButton />

  <ModalContent>
    <Lorem count={2} />
  </ModalContent>

  <ModalFooter>
    <Button onClick={onClose}>
      Close
    </Button>
  </ModalFooter>
</Modal>

We could also set some agreements and naming conventions so getting used to the components API would be easier. For example, boolean props always prefixed with is.

Somo examples:

• react-material-ui
• theme-ui
• chakra-ui

CSS Reset

Reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. This will:

• Reduce resets repeated over and over again
• Single reset definition

This is how chakra-ui does it because uses CSSinJS:

<CSSReset />

We could have just a file instead and import it:

@import '~@s-ui/sui-components/lib/reset';

Accessibility

We should make our components usable by as many people as possible and try to provide first class UX, in order to do so we could:

• Analyse component by component alongside the design team
• Integrate tools like axe and integrate them into our CI if possible
• Create task/issue defining the problems of each component (see example)

[andresin87]

@import '~@s-ui/sui-components/lib/reset';

take a look to the

https://github.com/SUI-Components/sui/blob/master/packages/sui-theme/src/_reset.scss