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

Use the predefined VS Code tasks from Command Palette (Cmd+Shift+P) > Tasks: Run Task:

1. Run Audit Dependencies to record the current vulnerabilities. This uses yarn npm audit; its results may differ from GitHub security alerts because the tools can use different advisory data and dependency analysis.
2. Run Yarn: Upgrade Dependencies to update transitive dependencies within the version ranges already declared in package.json.
3. Optionally run Yarn: Dedupe Dependencies to reduce duplicate resolutions in yarn.lock.
4. Run Audit Dependencies again and compare the result with the baseline.
5. Investigate any remaining vulnerability before changing version ranges. Upgrade the affected direct dependency with Yarn: Upgrade Single Package or Yarn: Upgrade Dependencies Interactively, review its release notes for breaking changes, and then repeat the audit. A major upgrade or a temporary resolutions entry may be required for vulnerable transitive dependencies.
6. Run Yarn: Install Dependencies to verify that package.json and yarn.lock are consistent. This task uses yarn install --immutable and must not modify the lockfile.
7. Run Test, Build, and Storybook: Build to verify the updated dependency tree.
8. Review the package.json and yarn.lock changes before committing them.

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.

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.