npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ministryofjustice/fb-components

v1.4.15

Published

Components as JSON Schemas, Nunjucks templates, Nunjucks helpers, and utilities for Form Builder

Downloads

103

Readme

@ministryofjustice/fb-components

UI components for Form Builder described in JSON Schema with supporting Nunjucks templates and helpers.

Installation

npm i -P @ministryofjustice/fb-components

Overview

Components for Form Builder are described with the JSON Schema vocabulary in discrete JSON files. They are contained in the directory specifications.

Data objects (which satisfy the schemas and are consumed by the Form Builder application) are contained in the directory metadata.

Nunjucks templates and helpers are contained in the directory templates (but note that the template for an individual component is contained in a directory named templates beside the schema for the component.)

Build

  • Assets are built on pre-commit using Husky in development environments
  • In addition they are built on pre-publish using NPM

The first ensures that GitHub always contains the latest built assets. (You can clone the repository and check-out a branch without needing to build.)

The second ensures that NPM always does. (You can install the dependency and it will contain up-to-date assets. The build process will be initiated both when CircleCI publishes and when a developer manually publishes from the command line.)

While you should not have to build manually because these automatic process will do so for you, you can build whenever you want, provided that you have developement dependencies installed, by executing the script target npm run build.

In case Husky does not build on pre-commit check your pre-commit Git hook scripts:

vim .git/hooks/pre-commit

It should at least contain the statement:

. "$(dirname "$0")/husky.sh"

This pre-commit Git hook script ensures that references to an NPM proxy are not accidentally pushed to GitHub:

#!/bin/sh

set -e

File=$(<.npmrc)

[[ $File =~ http{1}s{0,1}:\/\/([a-z\.]*):{0,1} ]];

REGISTRY="${BASH_REMATCH[1]}"

File=$(<package-lock.json)

if [[ $File =~ $REGISTRY ]];
then
  echo
  echo "Package contains \"$REGISTRY\""
  echo
  exit 1
else
  . "$(dirname "$0")/husky.sh"
fi

exit $?

JSON Schemas

$id and $ref

Each schema has an $id. Many schemas have one or more $ref attributes. Superficially, both are URIs, but they require additional processing at runtime to resolve.

For instance, the definition for a button component may resemble this schema:

{
  "$id": "http://gov.uk/schema/v1.0.0/definition/button",
  "_name": "definition.button",
  "title": "Button component definition"
}

And that definition may be referenced elsewhere:

{
  "$id": "http://gov.uk/schema/v1.0.0/button",
  "_name": "button",
  "title": "Button component",
  "allOf: [
    {
      "$ref": "http://gov.uk/schema/v1.0.0/definition/button"
    }
  ]
}

But neither the $id nor the $ref URIs resolve to a location accessible with HTTP.

Instead these URIs must be transformed and mapped to the location of the schema, wherever it is.

That location can be determined in two steps:

  1. The fragment http://gov.uk/schema/v1.0.0 of the URI should map to the specifications directory wherever @ministryofjustice/fb-components-core is installed or hosted. (The location may be on the file system or at a resource on the internet)

  2. The remainder of the URI should be used to compute the path to that particular JSON Schema file, such that /definition/button becomes /definition/button/definition.button.schema.json

While these patterns are internally consistent and the schemas can be validated with some tools, such as AJV, they cannot be dereferenced by other tools, such as JSON Schema $Ref Parser, without an additional processing step.

Circularity and recursion in the JSON Schemas

The schemas are highly referential and some represent tree structures which validators can interpret as circular. Circular references cannot easily be transformed to JSON and the schemas may fail validation, depending on the tool.

Recursion is isolated to schemas which define conditional behaviour, and specifically conditions which can themselves have conditions:

  • /specifications/definition/conditional/boolean/definition.conditional.boolean.schema.json
  • /specifications/definition/conditions/any/definition.conditions.all.schema.json
  • /specifications/definition/conditions/all/definition.conditions.any.schema.json
  • /specifications/definition/conditions/exactly/definition.conditions.exactly.schema.json

These conditions are tree structures which can resolve.

About this project

This project combines three deprecated projects:

  1. @ministryofjustice/fb-components-core
  2. @ministryofjustice/fb-nunjucks-helpers
  3. @ministryofjustice/fb-specification