@balena/autoui

AutoUI

A library of UI components, built using React, [styled-components][styled-components] to allow building a UI just using a model.

Table of Contents

• Installation
• Usage
• Development
• Testing
• Upgrading

Installation

npm install --save autoui

Usage

Wrap your application in the AutoUIProvider component and start using components!

import React from 'react';
import ReactDOM from 'react-dom';
import { AutoUIProvider } from 'autoui';
import { useAnalyticsContext } from '@balena/ui-shared-components';
import {
	AutoUIBaseResource,
	AutoUIRawModel,
	autoUIDefaultPermissions,
	autoUIJsonSchemaPick,
  autoUIRunTransformers,
  autoUIGetModelForCollection,
} from 'autoui';


type AugmentedRelease = AutoUIBaseResource<{}>

interface EntityType {
  id: number,
  name: string,
  surname: string,
}

const observerPermissions = {
	read: [
		'id',
		'name',
		'surname',
	],
	create: [],
	update: [],
	delete: false,
};

const adminPermissions = {
	...observerPermissions,
	create: ['name'],
	update: ['name'],
	delete: true,
};

const model = {
  resource: 'user',
  schema: {
    type: 'object',
    required: [],
    properties: {
      id: {
        title: 'Id',
        type: 'number',
      },
      name: {
        title: 'Name',
        type: 'string',
      },
      surname: {
        title: 'Surname',
        type: 'string',
      },
    },
  },
  permissions: {
    default: autoUIDefaultPermissions,
    administrator: adminPermissions,
    developer: adminPermissions,
    member: autoUIDefaultPermissions,
    operator: observerPermissions,
    observer: observerPermissions,
    support_agent: observerPermissions,
    balena_admin: observerPermissions,
  },
  priorities: {
    primary: ['name'],
    secondary: [
      'surname',
      'id',
    ],
    tertiary: [],
  },
} as AutoUIRawModel<Partial<AugmentedRelease>>;

// where the UI can add new properties, but this will be removed soon as everything should live in the model
const transformers = {
	__permissions: (entity: BalenaSdk.Release, context: any) => {
		return model(getExpanded(entity.belongs_to__application)?.is_of__class!)
			.permissions[context.accessRole ?? 'default'];
	},
};

const App = () => {

  const data = [
    {
        "id": 2313948,
        "name": "John",
        "surname": "Smith",
    },
    {
        "id": 2307403,
        "name": "Robert",
        "surname": "Taylor",
    }
  ]

  const memoizedData = React.useMemo(() => {
		return autoUIRunTransformers(data, transformers, {});
	}, [data]);

	const memoizedModel = React.useMemo(() => {
		return autoUIGetModelForCollection(model);
	}, [model]);

	return (
        <AnalyticsContextProvider>
            <AutoUIProvider>
                <AutoUI<EntityType>
                    data={data}
                    model={model}
                />
            </AutoUIProvider>
        </AnalyticsContextProvider>
    );
};

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

Provider

Wrap your application in the <Provider> component so that child components can correctly inherit the following properties:

• t: used for translations (expected lib i18n-next)
• history: used to allow persistent filters. (expected lib history)
• externalTranslationMap: used to add translations for resources (e.g. {'resource.application': 'Applications'}). Usually used if i18n-next is not used.

The AnalyticsContextProvider is a mandatory wrapper that is used to send analytics to our Analytics Backend. If you don't want to send analytics you can instantiate the component without any props.

Contributing

Please read our contribution guidelines

Changelog

v7.3.0

(2025-01-02)

• Support both react-router-dom v5 history and v6 navigate [myarmolinsky]
• Update @balena/ui-shared-components [myarmolinsky]