@bright-lab/core NPM

Bright Lab Core contains foundational React UI component libraries for shipping new features faster and it is based on Material UI and will be including some BRIGHT components.

Material UI is a comprehensive library of components that features our implementation of Google's Material Design system.

Installation

@bright-lab/core

@bright-lab/core is available as an npm package.

// with npm
npm install @bright-lab/core

// with yarn
yarn add @bright-lab/core

Note: @bright-lab/core is still in alpha. We are adding new components regularly and updating exisitng ones. You're welcome to contribute!

Getting started with @bright-lab/core

Here is an example of a basic app using @bright-lab/core's Form component:

import * as React from 'react';
import { Form } from '@bright-lab/core';

let fields = [
  {
    id: 'full_name',
    name: 'full_name',
    label: 'Full Name',
    type: 'TextField',
    required: true,
    grid: {
      xs: 12,
      md: 6,
    },
  },
  {
    id: 'image_url',
    name: 'image_url',
    label: 'Image',
    type: 'FileUpload',
    required: true,
    grid: {
      xs: 12,
      md: 6,
    },
  },
  {
    id: 'deactivated',
    name: 'deactivated',
    label: 'Deactivated',
    type: 'RadioGroup',
    required: true,
    grid: {
      xs: 12,
      md: 6,
    },
    data: [
      {
        title: 'Yes',
        value: '0',
      },
      {
        title: 'No',
        value: '1',
      },
    ],
  },
  {
    id: 'company_obj',
    name: 'company_obj',
    label: 'Company',
    type: 'Select',
    required: true,
    grid: {
      xs: 12,
      md: 6,
    },
    data: [
      {
        title: 'Yes',
        value: '0',
      },
      {
        title: 'No',
        value: '1',
      },
    ],
  },
];

function App() {
  return (
    <Form
      fields={fields}
      errorValues={{}}
      handleChange={(values) => console.log('changed', values)}
      defaultValues={{}}
    />
  );
}