Sx-component-library NPM

Component library

The sx-mf-component-library is what drives both Storybook and pure component re-use at Southerncross's Modernise project. All components are build with typescript and React.

Quality resources

-storybook https://storybook.js.org/

-reacthook form https://react-hook-form.com/get-started#IntegratingwithUIlibraries https://codesandbox.io/s/react-hook-form-v7-controller-5h1q5 https://github.com/jquense/yup

-typescript https://github.com/typescript-cheatsheets/react#basic-prop-types-examples https://github.com/typescript-cheatsheets/react#types-or-interfaces

Hosted link

https://zsxmfstorybooksaaedv2.z8.web.core.windows.net/

Getting started

npm i npm run Storybook http://localhost:6006/

Folder Structure / where do I develop a new component?

As the Component Team at Southern Cross maintain the config and structure of the Storybook library, the development of components in Storybook is relatively straight-forward and optimised for developer experience.

All of component development happens within the src/components folder. Here, you will see a break down of the current components available through Storybook.

Please use other components as references. They can act as examples of how to develop other components if needed.

To replicate this folder pattern:

src/components /componentName -componentName.component.tsx -componentName.stories.tsx -componentName.unit.ts -componentName.interfaces.ts -componentName.styles.ts

src -sx-mf-component-library.tsx

The sx-mf-component-library.tsx file is important as it will expose your component to other projects. Once you have finished development of your component please add it to the bottom of this file (see below for an example):

export { default as componentName } from "./components/componentName";

Auto generate the folder structure for development

There is a settings.json file within the .vscode folder. This settings file will add to the Folder Templates plugin.

search vs code extensions and download/install 'Folder Templates' (Huuums)
ctrl+shit+p Create New Templated Folder
add src/components as your root directory
establish the variable (componentName)

The files will be generated.

If you want to skip step 3 you can add Folder Templates to a hotkey in your own personal settings. The code is found in a comment at the top of the settings.js file within the .vscode folder. This cannot be automated, sorry! But we recommend doing this as it makes using Folder Templates a little more fun.

Is Component library a micro frontend?

For simplicity, @sx/component-library is not a micro frontend. The library has been created as a private npm package hosted as an azure artifact on southerncross ADO.

Using components from Storybook in other projects requires installation of the @sx/component-library.

Having component-library as a dedicated package means explicit versioning control. A developer may upgrade their version of component-library to get the latest changes when they are ready for them.

If component-library is not a micro frontend, then why Why is single-spa present? This is a great question. Single-spa import map overides are incredibly useful during local development if a developer wants to see how a component behaves in another micro front end without having to download it from the package first.

Steps to develop with local import maps

Please note: you need to have your micro front end running (banner, claims, group, etc) before applying the below steps. This is because the component library is coming from the node_moudles within your micro front end. It should still be rendered and working fine. Applying the below changes points away from node_modules to a local running version of component-library.
Add to the environment you want to be pointing to this local version of storybook by modifying the webpack config to include the externals flag. For example, locate the webpack.config file within the Banner (or whichever mfe you are working in), find the return merge statement, add the line: externals: "@sx/component-library",

See below for a nominal example only:

return merge(defaultConfig, { externals: "@sx/component-library", ..... ..... }

IMPORTANT: below is @sx/component-library AND NOT @sx-mf/component-library. You will need to add the correct name for this to work (by following the below steps)

Add a new module on the import map override: @sx/component-library https://localhost:9100/sx-mf-component-library.js
npm run start on (component library)
The above steps are organised so that the target micro front end will overide the imported @sx/component-library by pointing to this local version instead. This is accomplished by first adding the externals to the webpack config (step 1), adding a new map by pointing to the sx-mf-component-library (this is the exposed js: you can read this in the component's library webpack.config file as 'singleSpaDefault': in short whatever is listed here is what will need to be mapped). Lastly, you will need to run this component library locally (not storybook) so that the import map is exposed. After going through these steps, the import map overide should be pointing to this environment and you can develop storybook locally and see real time updates.

peer review process

important:

It is important to make sure the feature branch is being raised as a PR into develop (not main)
It is also important to check that the newly created component is exported within the sx-mf-component-library.tsx file