IOC Common Frontend ·

NPM library for shared frontend code to be used by applications maintained by the IOC Prevent Breakdowns (PB) team

Preview

To preview the components in this package in storybook, please head to our Storybook.

How to use

For installing this package

yarn add @equinor/ioc-common-frontend

or using npm.

npm install @equinor/ioc-common-frontend

Then use the components or functions by named imports

import { Button } from "@equinor/ioc-common-frontend"

...

export const YourComponent = () => {

    ...

    return {
        <div>
            <Button />
        </div>
    }
}

Local development with Condition Adviser

Use yalc to test an unpublished Common Frontend build in Condition Adviser. The two repositories have independent dev containers and share only the Docker volume named ioc-yalc-store.

1. Open Common Frontend in its dev container and run Yalc: Watch & Push from VS Code's task picker. This builds the complete package, including declarations, and publishes it whenever Common Frontend source changes. (You can also use Yalc: Push Once, to manually push changes on demand, to avoid a rebuild on every file save)
2. Open Condition Adviser in its dev container and run Yalc: Run with Common Frontend. This links Common Frontend from the shared store, watches for updates, and starts the Condition Adviser frontend.
3. Run Common Frontend tests and exercise the affected workflow in Condition Adviser.
4. Stop the Condition Adviser run task when finished. It restores the published dependencies automatically.

If a task is interrupted before cleanup completes, run Yalc: Restore Published Frontend Libraries. Yalc changes the Condition Adviser package manifest and lockfile temporarily; Do not commit those local file:.yalc/ references.

Dependency resolutions

Keep the resolutions field in package.json absent whenever possible. A resolution globally overrides transitive dependency selection and can hide an incompatible parent dependency, so it is a temporary exception rather than a normal dependency-management mechanism.

Before adding one, prefer upgrading the direct parent and refreshing yarn.lock. If an override is still required, add it to package.json and add the same package to approvedResolutions in scripts/check-resolutions.mjs. Its entry must explain:

• why normal dependency resolution is insufficient;
• the issue, advisory, or upstream change that requires the override;
• an objective removal condition, such as the parent package version or native dependency range that makes the override redundant.

yarn build runs this check and rejects undocumented resolutions. Review every approved resolution during dependency upgrades. Remove it once its removal condition is true, then run install, audit, typecheck, tests, and build without the override.

Dependency maintenance

• make knip fails on unused or unlisted dependencies. Build-time and declarative exceptions are documented in knip.json.
• make knip-all also reports unused files and exports. Treat exported library API as a compatibility surface and review those findings before removal.
• make dedupe-check reports compatible lockfile entries that can be merged.
• make dedupe applies the highest-compatible Yarn deduplication strategy.

Run install, audit, typecheck, tests, and build after removing dependencies or deduplicating the lockfile.

Links

Useful links:

• Repository: https://github.com/equinor/ioc-common-frontend
• Storybook site: https://vigilant-giggle-adeaa4b7.pages.github.io

Contributing

As of writing, this package is open for use internally and externally through npmjs.

Repository is however only available for internal equinor for posting PR's.

Licensing

The code in this project is licensed under MIT license.