A story of a shared components library 

Andrey Semin

Senior Software Engineer

at MicroMech

https://twitter.com/ifedyukin

https://www.instagram.com/semin_andrey

Hello Andrey!

Has anyone tried to build your own components library?

Why we decided to build this library?

  • Build more than 1 app
  • Attract more customers
  • Provide same look & feel

Starting point

  • App built with MaterialUI 🤮
  • Sometimes components from MUI were wrapped with custom components
  • Sometime they were not
  • No documentation
  • MUI-styled components API
  • Weird or missing tests

Requirements

  • Simple and handy component API
  • Framework-independent API
  • Written in TypeScript
  • Well documented
  • Well tested
  • Include components showcase
  • Built on fresh MUI version

How exciting it is!

  • Extract basic components to separate package
  • Drop lots of dependencies from the app
  • Remove weird tests
  • Make everything "right"

Cotton

Component folder

  • index.ts
  • ComponentName.tsx
  • ComponentName.spec.tsx
  • ComponentName.stories.tsx
  • ComponentName.README.md
  • components/

Component migration

  • Search for all usages of a component
  • List all used props and their values
  • Use prepared list to design component API
  • Migrate component

How to bundle?

Webpack!

Time to test!

  • Write tests from scratch
  • Jest + @testing-library/react ⚡
  • External component API
  • Separate snapshot for each render path

Time for Storybook!

How MaterialUI uses styles


const typographyStyles = (): StyleRules => createStyles({...})

const TypographyComponent: React.FC<TypographyProps> = () => {...}

export const Typography = withStyles(typographyStyles)(TypographyComponent)

css-in-js 👋 

*.md for the rescue!

A component to add an empty space with controllable height based on default theme gutter value

| Name             | Required | type   | Default Value | Description                         |
| ---------------- | -------- | ------ | ------------- | ----------------------------------- |
| gutterMultiplier | -        | number | 1             | Multiplier to default theme gutter  |
| data-test-id     | -        | string | -             | Custom data-test-id attribute value |

### Example:

```js
import { Spacer } from '@motokaptia/cotton';

<>
  <SomeBlock />
  <Spacer />
  <SomeOtherBlock />
</>;
```

*.md for the rescue!

We have to ship parts of MUI itself

  • ThemeProvider component
  • createGenerateClassName function
  • withStyles, withWidth HOCs
  • StyleRules, Theme types
  • isWidthDown function

css-in-js 👋 

OK, let's try again

New error 😞

  • Quick googling - no results
  • Not-so-quick googling - no results
  • 2 days of investigation

Root cause of the issue is...

React hook call wrapped with if statement

And the solution is

  • Downgrade MaterialUI to latest v3 release
  • Replace webpack with regular TS transpilation

Now it should work!

But it doesn't

Why?

css-in-js 👋 

+

Server Side Rendering


function createStyleContext() {
  return {
    sheetsManager: new Map(),
    sheetsRegistry: new SheetsRegistry(),
    generateClassName: createGenerateClassName()
  };
}

export function getStyleContext() {
  if (!process.browser) {
    return createStyleContext();
  }

  if (!global.__INIT_MATERIAL_UI__) {
    global.__INIT_MATERIAL_UI__ = createStyleContext();
  }

  return global.__INIT_MATERIAL_UI__;
}

Same error appeared in tests


jest.mock('@material-ui/core/styles/createGenerateClassName');
createGenerateClassName.mockImplementation(() => (rule, styleSheet) =>
  `${styleSheet.options.classNamePrefix}-${rule.key}`
);

One more testing issue

Select elements by data-test-id attribute

Naïve approach

  • Specify data-test-id value in components library
  • Use it in library consumers

Such approach won't work in long-term perspective

  • Update value in library
  • Have to update e2e tests in all apps

Better way to handle data-test-id

  • Add data-test-id prop to components' API
  • For complex components, generate data-test-id value

Better way to handle data-test-id

data-test-id + postfix

data-test-id="select"

data-test-id="select-root"

data-test-id="select-option"

Better way to handle data-test-id

data-test-id is omitted from production build

babel-plugin-jsx-remove-data-test-id

Finally!

  • App is running
  • SSR works
  • Styles are not broken
  • Component is on it's place

Conclusion

  • css-in-js - 💩
  • MaterialUI - 💩

Now seriously

  • Easy to work on brand redesign
  • Focus on components and their state
  • Reduced time to interact with design guy
  • Great DX

Library is ready & in use

Benefits we got:

What went wrong

  • Outdated MaterialUI version
  • Quality of tests dropped over time
  • Failed to incapsulate MUI within the library
  • No automatic releases

What's next?

  • Finish redesign
  • Implement more components
  • Update MaterialUI
  • Configure releases

https://www.instagram.com/semin_andrey

Made with Slides.com