Creating Open-Source
Components
with some TypeScript

Aaron from Indirect

My experiences on creating components and how do you actually make them?

(always read up on the latest guides from SEEK)

Creating: UI Components

Utility libraries

Sharing code

Types

Indirect?

We dont build consumer UI's

Well sort of...

Why do we need open-source components?

&

- Internal Only

- TypeScript, React, GraphQL

- Sku + Braid
- Tests SEEK API queries and mutations

- SEEK OSS

- TypeScript, React, GraphQL

- Sku + Braid
- Monorepo
- Reference implementation
- Component Library 

- Sku: Front-end development toolkit.

- Braid: Themeable design system for the SEEK Group

- Monorepo: Frontend (fe) and Backend (be) workspaces

- Storybook:  Interactive documentation

- GitHub Actions: Test, build, package and release

- NPM Packages: Easily install across codebases

Component Library

General Principal

Invest in good documentation. Providing context and examples is underrated.

More is not always better.

 

General Principals

Include rationale and decisions

 

General Principals

Easily view what is changed in each version. Upgrade guides are a must

General Principals

Build to the use cases you know of*

Firstly understand what are the use cases.
Dont implement based on assumption.

*Controversial

General Principals

But make it easy to extend if need be*

Allowing ways to use your components in undocumented ways. Learn from these deviations and implement.

*Controversial

Building your own

1. Init

- Creating repo

- Configuring Renovate

- Configuring NPM (if using internal SEEK packages)

- Adding Sku

 

2. Build

- Build your component/ module

- Set-up exports



3. Documentation

- Readme

- Storybook

- Playroom

 

 

4. Package

- Compile/Bundle*

- Prep for release

5. Release

- Version

- Buildkite to SEEK NPM

- GitHub Actions to OSS NPM

1. Make a change

2. Create a 'change set'

3. Merge
4. Version and release

Demo

Buildkite to SEEK NPM

- SEEK gutenberg

GitHub Actions to OSS NPM

- release script
 

6. Consume

- yarn/npm install

- Configure Sku*

Consumer sku.config.js

Not just for SEEK modules...

- Replaces SKU with rollup bundler
- Publishes to GitHub packages


 

Thank you for listening!

Creating Open-source components

By Aaron Vanston

Creating Open-source components

  • 27

More from Aaron Vanston