@spake/ui-next NPM

Ookla Common UI (Next)

This is a prototype POC of an updated common-ui. 4 existing common UI components have been migrated as-is with tests.

Built with

Typescript
Rollup
Postcss

The problem

Today, common-ui components, styles, and svgs are published separately. This mean applications that import the components also need to bundle their styles, svgs, etc as part of the application bundle. This is becoming an obstacle to upgrading our bundling configuration in applications that use common-ui.

The solution

Publish bundled common-ui components with scoped styles and assets.

What's different

This update uses Rollup to export React components bundled with scoped styles and svgs and automatic Typescript type declarations.

Using Rollup instead of Webpack
Typescript instead of Proptypes
Updated PostCss configuration
Proptypes have been migrated to typescript and declarations are exported automatically - When components are imported in TS apps, they will come with type hints and code completion

What's the same

CSS modules can still be used to apply scoped styles to components - but now they're bundled before they're published so the parent application just needs to import them. No need to import or bundle styles or SVGs
Custom css properties are still injected from a javascript file; only, it's handled by postcssPresetEnv instead of postcssnext.
No preprocessors needed- postcss supports nesting out of the box and other features can be added via plugins (postcss will process scss automatically, though.)

Problems (Migrate or Rewrite)

The ideal solution would be to make some improvements and updates to the existing common-ui codebase but because of how long it's been since some of these components were written and how much has changed, it may be worth it to reimplement some of them from scratch.

This prototype includes existing Enzyme tests for the components that were migrated but using Enzyme for tests will make it difficult to migrate to React 18. We should be using react-testing-library instead. React testing library is not a drop in replacement for Enzyme and it's a different approach to testing React components but it's what the react core team recommends.
We are using a css-next feature color() in a lot of our css, but it was removed from the spec in 2016, which makes it difficult to migrate, so we should find an alternative
We should generall move away from libraries that have weekly downloads in the thousands and haven't been maintained in years like positions
A lot of our components are class components and some are using deprecated lifecycle methods. We should migrate to function components with hooks.
There are popular well-maintained libraries for ubiquitous UI components like react-toastify and react-datepicker that we could either wrap and export from common-ui, or import directly in applications.

What's missing

A lot of components - Migrating remaining components is not trivial
The pattern library (We should probably move this to storybook - possibly outside of this package)

Docs

This project contains shared React components so that developers can create interfaces quickly and cohesively across projects.

Prerequisites

This module assumes that your app is a React 16 application.

How to Use

Install the module from NPM $ yarn add @ookla/common-ui@2.0.0-alpha-ui-next.0 --save
Import your component using import { Button } from '@ookla/common-ui'

disclaimer - Once you've installed the package, you should either lock to the specific version, or subscribe to patches. Minor bumps are considered "changing" and could impact your UI.

Local development

use yarn link to use a local copy of the common-ui repo in another project. from common-ui root run yarn link. then from the project root run yarn link @ookla/common-ui.
from the common-ui project root, run yarn rollup.