@abgov/jsonforms-components 0.0.1

package/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

package/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": [
+          "error",
+          {
+            "ignoredDependencies": [
+              "@abgov/react-components",
+              "@abgov/react-components-new"
+            ],
+            "ignoredFiles": [
+              "libs/jsonforms-components/rollup.config.js"
+            ]
+          }
+        ]
+      }
+    }
+  ]
+}

package/.releaserc.json

@@ -0,0 +1,25 @@
+{
+  "extends": "../../.releaserc.json",
+  "tagFormat": "jsonforms-components-v${version}",
+  "plugins": [
+    [
+      "@abgov/nx-release",
+      {
+        "project": "jsonforms-components"
+      }
+    ],
+    [
+      "@semantic-release/npm",
+      {
+        "pkgRoot": "dist/libs/jsonforms-components"
+      }
+    ],
+    [
+      "@semantic-release/github",
+      {
+        "releasedLabels": false,
+        "successComment": false
+      }
+    ]
+  ]
+}

package/README.md

@@ -0,0 +1,251 @@
+# jsonforms-components
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test jsonforms-components` to execute the unit tests via [Jest](https://jestjs.io).
+
+# Folder hierarchy
+
+```
+- src
+  - lib
+    - GoARenders
+      - <GoAComponent A Reducer>
+        ...
+      - <GoAComponent B Reducer>
+        ...
+```
+
+# GoA UI component JSON Forms UI Schema
+
+[UI Schema](https://jsonforms.io/docs/uischema) in the JSON Forms defines the general layout of the forms generated. @abgov/jsonforms-components lib integrates the [GoA UI components](https://github.com/GovAlta/ui-components) form components by extending the "options" attribute in the UI Schema. Take GoAInput UI Schema as example:
+
+```
+    {
+      "type": "Control",
+      "scope": "#/properties/name",
+      "options": {
+        "GoAInput": {
+          "name": "Name",
+          "label": "Name",
+          "testId": ""
+          ...
+        }
+      }
+    }
+```
+
+The presence of the "GoAInput" indicates we are going to use the GoAInput to render the input. The attributes in the "GoAInput" will be passed to the GoAInput as component properties.
+
+# JsonFormContextInstance
+
+To use the package, and the context surrounding it, it's best to import JsonFormContextInstance attach data to it
+
+Here are some sample api endpoints that work currently.
+
+```
+
+import { JsonFormContextInstance } from '@abgov/jsonforms-components';
+
+
+  useEffect(() => {
+    JsonFormContextInstance.addDataByUrl('dog-list', 'https://dog.ceo/api/breeds/list/all', processDogs);
+    JsonFormContextInstance.addDataByUrl(
+      'basketball-players',
+      'https://www.balldontlie.io/api/v1/players',
+      processPlayers
+    );
+    JsonFormContextInstance.addDataByUrl(
+      'car-brands',
+      'https://parallelum.com.br/fipe/api/v1/carros/marcas',
+      processCarBrands
+    );
+
+    JsonFormContextInstance.addData(
+      'countries',
+      Countries.map((country) => country.country)
+    );
+
+  }, []);
+
+  function processDogs(rawData): string[] {
+    return Object.keys(rawData.message);
+  }
+  function processPlayers(rawData): string[] {
+    return rawData.data.map((player) => `${player.first_name} ${player.last_name}`);
+  }
+  function processCarBrands(rawData): string[] {
+    return rawData.map((brand) => brand.nome);
+  }
+
+```
+
+Once you add them, you can add the following to any UI Schema control to create a dropdown that displays them
+
+```
+  "type": "Control",
+  "scope": "#/properties/carBrands",
+  "options": {
+    "enumContext": {
+      "key": "car-brands",
+```
+
+You also need to add the following to the data schema
+
+```
+ "carBrands": {
+    "type": "string",
+    "enum": [
+      ""
+    ]
+ }
+```
+
+# Schemas only with no code changes
+
+To access the apis without making any code changes to add an api,
+
+```
+import { JsonFormContextInstance } from '@abgov/jsonforms-components';
+
+const { jsonFormContext, baseEnumerator } = JsonFormContextInstance;
+
+return(
+  <jsonFormContext.Provider value={baseEnumerator}>
+    <JsonForms
+      schema={...}
+      uischema={...}
+      ...
+    />
+  />
+)
+```
+
+Data Schema
+
+```
+  "carBrands": {
+    "type": "string",
+    "enum": [
+      ""
+    ]
+  },
+  "countries": {
+    "type": "string",
+    "enum": [
+      ""
+    ]
+  },
+  "dogBreeds": {
+    "type": "string",
+    "enum": [
+      ""
+    ]
+  },
+  "basketballPlayers": {
+    "type": "string",
+    "enum": [
+      ""
+    ]
+  }
+```
+
+Ui Schema
+
+```
+{
+  "type": "HorizontalLayout",
+  "elements": [
+    {
+      "type": "Control",
+      "scope": "#/properties/carBrands",
+      "options": {
+        "enumContext": {
+          "key": "car-brands",
+          "url": "https://parallelum.com.br/fipe/api/v1/carros/marcas",
+          "values": "nome"
+        }
+      }
+    },
+    {
+      "type": "Control",
+      "scope": "#/properties/dogBreeds",
+      "options": {
+        "enumContext": {
+          "key": "dog-list",
+          "url": "https://dog.ceo/api/breeds/list/all",
+          "location": "message",
+          "type": "keys"
+        }
+      }
+    },
+    {
+      "type": "Control",
+      "scope": "#/properties/basketballPlayers",
+      "options": {
+        "enumContext": {
+          "key": "basketball-players",
+          "location": "data",
+          "url": "https://www.balldontlie.io/api/v1/players",
+          "values": [
+            "first_name",
+            "last_name"
+          ]
+        }
+      }
+    },
+    {
+      "type": "Control",
+      "scope": "#/properties/countries",
+      "options": {
+        "enumContext": {
+          "key": "countries"
+        }
+      }
+    }
+  ]
+}
+```
+
+Countries in this example comes locally.
+
+```
+import Countries from './countries';
+
+--------
+
+export default [
+  { country: 'Russia', land_mass_km2: 17098242 },
+  { country: 'Canada', land_mass_km2: 9976140 },
+  ...
+]
+```
+
+Another way to add data to ContextProvider (optional)
+
+```
+const animals = {
+  animals: [
+    { name: 'Elephant', type: 'Mammal', habitat: 'Land' },
+    { name: 'Penguin', type: 'Bird', habitat: 'Ice' },
+    { name: 'Kangaroo', type: 'Mammal', habitat: 'Grasslands' },
+    { name: 'Giraffe', type: 'Mammal', habitat: 'Savanna' },
+    { name: 'Octopus', type: 'Invertebrate', habitat: 'Ocean' },
+    { name: 'Cheetah', type: 'Mammal', habitat: 'Grasslands' },
+    { name: 'Koala', type: 'Mammal', habitat: 'Eucalyptus Forest' },
+    { name: 'Toucan', type: 'Bird', habitat: 'Rainforest' },
+    { name: 'Dolphin', type: 'Mammal', habitat: 'Ocean' },
+    { name: 'Arctic Fox', type: 'Mammal', habitat: 'Arctic Tundra' },
+  ],
+};
+
+
+  <ContextProvider data={[{ animals }]}
+    <JsonForms
+      ...
+    </>
+  </ContextProvider>
+
+```

package/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: 'jsonforms-components',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/libs/jsonforms-components',
+};

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@abgov/jsonforms-components",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@abgov/react-components": "^4.18.1",
+    "@jsonforms/core": "^3.1.0",
+    "@jsonforms/material-renderers": "^3.1.0",
+    "@jsonforms/react": "^3.1.0",
+    "@mui/material": "^5.15.10",
+    "react": "^18.0.0"
+  },
+  "dependencies": {
+    "axios": "^1.6.7",
+    "lodash": "^4.17.20",
+    "styled-components": "^5.3.6"
+  }
+}

package/project.json

@@ -0,0 +1,55 @@
+{
+  "name": "jsonforms-components",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/jsonforms-components/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
+    },
+    "build": {
+      "executor": "@nx/rollup:rollup",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/libs/jsonforms-components",
+        "tsConfig": "libs/jsonforms-components/tsconfig.lib.json",
+        "project": "libs/jsonforms-components/package.json",
+        "entryFile": "libs/jsonforms-components/src/index.ts",
+        "external": [
+          "@abgov/react-components-new",
+          "@jsonforms/core",
+          "@jsonforms/material-renderers",
+          "@jsonforms/react",
+          "@mui/material",
+          "react",
+          "react-dom",
+          "react/jsx-runtime"
+        ],
+        "rollupConfig": "libs/jsonforms-components/rollup.config.js",
+        "compiler": "babel",
+        "assets": [
+          {
+            "glob": "libs/jsonforms-components/README.md",
+            "input": ".",
+            "output": "."
+          }
+        ]
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/jsonforms-components/jest.config.ts"
+      }
+    },
+    "release": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "npx semantic-release -e ./libs/jsonforms-components/.releaserc.json"
+      }
+    }
+  }
+}

package/rollup.config.js

@@ -0,0 +1,14 @@
+const nrwlConfig = require('@nx/react/plugins/bundle-rollup');
+
+module.exports = (config) => {
+  const { output, ...nxConfig } = nrwlConfig(config);
+  return {
+    ...nxConfig,
+    output: {
+      ...output,
+      paths: {
+        '@abgov/react-components-new': '@abgov/react-components',
+      },
+    },
+  };
+};

package/src/index.ts

@@ -0,0 +1,166 @@
+import { JsonFormsCellRendererRegistryEntry, JsonFormsRendererRegistryEntry } from '@jsonforms/core';
+import {
+  materialAllOfControlTester,
+  MaterialAllOfRenderer,
+  materialAnyOfControlTester,
+  MaterialAnyOfRenderer,
+  materialObjectControlTester,
+  MaterialObjectRenderer,
+  materialOneOfControlTester,
+  MaterialOneOfRenderer,
+  MaterialEnumArrayRenderer,
+  materialEnumArrayRendererTester,
+} from '@jsonforms/material-renderers';
+import {
+  MaterialAnyOfStringOrEnumControl,
+  materialAnyOfStringOrEnumControlTester,
+  MaterialOneOfEnumControl,
+  MaterialSliderControl,
+  materialSliderControlTester,
+  MaterialOneOfRadioGroupControl,
+  materialOneOfRadioGroupControlTester,
+  materialOneOfEnumControlTester,
+} from '@jsonforms/material-renderers';
+import {
+  MaterialArrayLayout,
+  materialArrayLayoutTester,
+  materialHorizontalLayoutTester,
+  materialVerticalLayoutTester,
+} from '@jsonforms/material-renderers';
+import {
+  MaterialBooleanCell,
+  materialBooleanCellTester,
+  MaterialBooleanToggleCell,
+  materialBooleanToggleCellTester,
+  MaterialEnumCell,
+  materialEnumCellTester,
+  MaterialOneOfEnumCell,
+  materialOneOfEnumCellTester,
+} from '@jsonforms/material-renderers';
+import {
+  GoATextControlTester,
+  GoAInputTextControl,
+  GoADateControlTester,
+  GoAInputDateControl,
+  GoADateTimeControlTester,
+  GoAInputDateTimeControl,
+  GoATimeControlTester,
+  GoAInputTimeControl,
+  GoANumberControlTester,
+  GoAInputNumberControl,
+  GoAIntegerControlTester,
+  GoAInputIntegerControl,
+  CategorizationRendererTester,
+  FormStepperControl,
+  FileUploaderTester,
+  FileUploader,
+  MultiLineTextControl,
+  MultiLineTextControlTester,
+  GoAEnumControl,
+  GoAEnumAutoCompleteControl,
+  GoAEnumControlTester,
+  GoAEnumControlAutoCompleteTester,
+  GoAEnumRadioGroupControl,
+  GoARadioGroupControlTester,
+  GoAArrayControlTester,
+  GoAArrayControlRenderer,
+  GoAListWithDetailsTester,
+  GoABooleanControlTester,
+  GoABooleanControl,
+  GoABooleanRadioControlTester,
+  GoABooleanRadioControl,
+} from './lib/Controls';
+import { InputCells } from './lib/Cells';
+import { GoAVerticalLayout, GoAHorizontalLayout, GoAGroupLayoutTester, GoAGroupControl } from './lib/layouts';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+import { addData } from './lib/Context';
+
+import { HelpContent, HelpContentTester } from './lib/Additional';
+import GoAErrorControl, { GoAErrorControlTester } from './lib/ErrorHandling/GoAErrorControl';
+
+export * from './lib/Context';
+const countries = ['Argentina', 'Brazil', 'Canada', 'Denmark', 'Egypt', 'France', 'Greece', 'India', 'Japan', 'Kenya'];
+addData('countries', countries);
+export const GoABaseRenderers: JsonFormsRendererRegistryEntry[] = [
+  // controls
+  { tester: GoAEnumControlTester, renderer: GoAEnumControl },
+  { tester: GoAEnumControlAutoCompleteTester, renderer: GoAEnumAutoCompleteControl },
+  { tester: GoAIntegerControlTester, renderer: GoAInputIntegerControl },
+  { tester: GoANumberControlTester, renderer: GoAInputNumberControl },
+  { tester: GoATextControlTester, renderer: GoAInputTextControl },
+  { tester: GoADateControlTester, renderer: GoAInputDateControl },
+  { tester: GoADateTimeControlTester, renderer: GoAInputDateTimeControl },
+  { tester: GoATimeControlTester, renderer: GoAInputTimeControl },
+  { tester: materialSliderControlTester, renderer: MaterialSliderControl },
+  { tester: materialObjectControlTester, renderer: MaterialObjectRenderer },
+  { tester: materialAllOfControlTester, renderer: MaterialAllOfRenderer },
+  { tester: materialAnyOfControlTester, renderer: MaterialAnyOfRenderer },
+  { tester: materialOneOfControlTester, renderer: MaterialOneOfRenderer },
+  {
+    tester: GoARadioGroupControlTester,
+    renderer: GoAEnumRadioGroupControl,
+  },
+  { tester: GoABooleanControlTester, renderer: GoABooleanControl },
+
+  { tester: GoABooleanRadioControlTester, renderer: GoABooleanRadioControl },
+  {
+    tester: GoAArrayControlTester,
+    renderer: GoAArrayControlRenderer,
+  },
+  {
+    tester: GoAListWithDetailsTester,
+    renderer: GoAArrayControlRenderer,
+  },
+  {
+    tester: materialOneOfRadioGroupControlTester,
+    renderer: MaterialOneOfRadioGroupControl,
+  },
+  {
+    tester: materialOneOfEnumControlTester,
+    renderer: MaterialOneOfEnumControl,
+  },
+  // layouts
+  { tester: GoAGroupLayoutTester, renderer: GoAGroupControl },
+  {
+    tester: materialHorizontalLayoutTester,
+    renderer: GoAHorizontalLayout,
+  },
+  { tester: materialVerticalLayoutTester, renderer: GoAVerticalLayout },
+  { tester: materialArrayLayoutTester, renderer: MaterialArrayLayout },
+  // additional
+  { tester: GoAErrorControlTester, renderer: GoAErrorControl },
+  {
+    tester: materialAnyOfStringOrEnumControlTester,
+    renderer: MaterialAnyOfStringOrEnumControl,
+  },
+  {
+    tester: materialEnumArrayRendererTester,
+    renderer: MaterialEnumArrayRenderer,
+  },
+  {
+    tester: materialEnumArrayRendererTester,
+    renderer: MaterialEnumArrayRenderer,
+  },
+  {
+    tester: MultiLineTextControlTester,
+    renderer: MultiLineTextControl,
+  },
+  {
+    tester: HelpContentTester,
+    renderer: HelpContent,
+  },
+];
+
+export const GoARenderers: JsonFormsRendererRegistryEntry[] = [
+  ...GoABaseRenderers,
+  { tester: CategorizationRendererTester, renderer: FormStepperControl },
+  { tester: FileUploaderTester, renderer: withJsonFormsControlProps(FileUploader) },
+];
+
+export const GoACells: JsonFormsCellRendererRegistryEntry[] = [
+  { tester: materialBooleanCellTester, cell: MaterialBooleanCell },
+  { tester: materialBooleanToggleCellTester, cell: MaterialBooleanToggleCell },
+  { tester: materialEnumCellTester, cell: MaterialEnumCell },
+  { tester: materialOneOfEnumCellTester, cell: MaterialOneOfEnumCell },
+  ...InputCells,
+];

package/src/lib/Additional/HelpContent.tsx

@@ -0,0 +1,95 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import { RankedTester, rankWith, uiTypeIs } from '@jsonforms/core';
+import { Hidden } from '@mui/material';
+import { GoADetails } from '@abgov/react-components-new';
+import { HelpContentDiv } from './styled-components';
+import { ControlProps, ControlElement } from '@jsonforms/core';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+interface OptionProps {
+  ariaLabel?: string;
+  help?: string | string[];
+  variant?: string;
+}
+
+interface CustomControlElement extends ControlElement {
+  options?: OptionProps;
+  elements?: CustomControlElement[]; // Assuming elements is an array of similar objects
+}
+
+interface CustomControlProps extends ControlProps {
+  uischema: CustomControlElement;
+}
+
+export const HelpContentComponent = ({
+  isParent = true,
+  ...props
+}: CustomControlProps & { isParent?: boolean }): JSX.Element => {
+  const labelClass = isParent ? 'parent-label' : 'child-label';
+  const marginClass = isParent ? 'parent-margin' : 'child-margin';
+  // eslint-disable-next-line
+  const { uischema, visible, label } = props;
+  const renderHelp = () =>
+    Array.isArray(uischema?.options?.help) ? (
+      <ul>
+        {uischema?.options?.help.map((line: string, index: number) => (
+          <li key={index}>{`${line}`}</li>
+        ))}
+      </ul>
+    ) : (
+      <p className="single-line">{uischema?.options?.help}</p>
+    );
+
+  return (
+    <Hidden xsUp={!visible}>
+      <HelpContentDiv aria-label={uischema.options?.ariaLabel}>
+        <div className={marginClass}>
+          {label && !uischema.options?.variant && uischema.options?.variant !== 'details' && (
+            <div className={labelClass}>
+              {label}
+              <br />
+            </div>
+          )}
+          {(!uischema.options?.variant || uischema.options?.variant !== 'details') && renderHelp()}
+          {uischema.options?.variant && uischema.options?.variant === 'details' && (
+            <GoADetails heading={label ? label : ''} mt="3xs" mb="none">
+              {renderHelp()}
+              {uischema?.elements && uischema?.elements?.length > 0 && <HelpContents elements={uischema?.elements} />}
+            </GoADetails>
+          )}
+          {uischema?.elements && uischema?.elements.length > 0 && uischema.options?.variant !== 'details' && (
+            <HelpContents elements={uischema.elements} isParent={false} />
+          )}
+        </div>
+      </HelpContentDiv>
+    </Hidden>
+  );
+};
+const HelpContents = ({ elements, isParent = false }: { elements: CustomControlElement[]; isParent?: boolean }) => (
+  <div>
+    {elements?.map((element: any) => {
+      return (
+        <HelpContentComponent
+          uischema={element}
+          label={element.label}
+          errors={''}
+          data={undefined}
+          enabled={false}
+          visible={true}
+          path={''}
+          handleChange={function (path: string, value: any): void {
+            throw new Error('Function not implemented.');
+          }}
+          rootSchema={{}}
+          id={''}
+          schema={{}}
+          isParent={isParent}
+        />
+      );
+    })}
+  </div>
+);
+
+export const HelpContentTester: RankedTester = rankWith(1, uiTypeIs('HelpContent'));
+
+export const HelpContent = withJsonFormsControlProps(HelpContentComponent);

package/src/lib/Additional/index.ts

@@ -0,0 +1 @@
+export * from './HelpContent';