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

Indirect?

We dont build consumer UI's

Well sort of...

developer.seek.com
partner.seek.com

Why do we need open-source components?

&

- Internal Only

- TypeScript, React, GraphQL

- Sku + Braid
- Tests SEEK API queries and mutations

https://github.com/SEEK-Jobs/indie-ryanair-frontend

- SEEK OSS

- TypeScript, React, GraphQL

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

https://github.com/seek-oss/wingman

- 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

https://github.com/seek-oss/wingman

Component Library

https://github.com/seek-oss/wingman/tree/master/fe/lib/components/LocationSuggest

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

https://indie-docs.ssod.skinfra.xyz/how-to/create-a-new-repo

2. Build

- Build your component/ module

- Set-up exports

https://github.com/seek-oss/wingman/tree/master/fe

3. Documentation

- Readme

- Storybook

- Playroom

https://seek-oss.github.io/sku/#/./docs/storybook
https://github.com/seek-oss/wingman/blob/master/fe/package.json#L64
https://github.com/seek-oss/playroom

4. Package

- Compile/Bundle*

- Prep for release

https://seek-oss.github.io/sku/#/./docs/libraries

https://seek-oss.github.io/sku/#/./docs/extra-features?id=compile-packages

5. Release

- Version

- Buildkite to SEEK NPM

- GitHub Actions to OSS NPM

https://github.com/semantic-release/semantic-release
https://github.com/atlassian/changesets

1. Make a change

2. Create a 'change set'

3. Merge
4. Version and release

Demo

Buildkite to SEEK NPM

- SEEK gutenberg

https://github.com/SEEK-Jobs/gutenberg

GitHub Actions to OSS NPM

- release script
 

https://github.com/SEEK-Jobs/seek-oss-ci/blob/master/NPM_PACKAGES.md#access-to-publish-to-npm

6. Consume

- yarn/npm install

- Configure Sku*

https://seek-oss.github.io/sku/#/./docs/extra-features?id=compile-packages

Consumer sku.config.js

Not just for SEEK modules...

- Replaces SKU with rollup bundler
- Publishes to GitHub packages

https://rollupjs.org/guide/en/
https://github.com/features/packages

Thank you for listening!