c5-test-library v0.0.1

c5cl

Installation:

npm install c5cl

Usage:

import React from 'react';
import {Button} from 'c5cl';

function App(){
  return <Button label="click me" />
}

export default App;

There are a number of helper utilites, example usage: formateDate: takes a string or a date and returns a string representation of only the date. formatMoney: fixes issues with money values that only have a decimal precision of 1. isValid: return true or false depending on the existence of a string, a number that is not zero, or an object with keys.

import {formatDate, formatMoney, isValid} from 'c5cl';

isValid(null);
// returns false
isValid(undefined)
// returns false
isValid('hello')
// returns true
isValid({name: 'mike'})
// returns true
isValid({})
// returns false

formatDate('1/1/2022 2:00 PM')
// returns '1/1/2022'

formatMoney('1.1')
// returns '$1.10

TextInput example usage:

import {TextInput} from 'c5cl';

return (
  <TextInput 
    id="someid"
    name="somename"
    label="somelabel"
    placeholder="some placeholder"
    onChange={(e) => console.log(e.target.value) }
    type="text"
    value="someValue"
    error="This field is required"
  />
)

SelectField example usage:

import {SelectField} from 'c5cl';

const states = [
  {abbr: 'AL', name:'Alabama'},
  {abbr: 'TN', name: 'Tennessee'}
]

return (
  <SelectField 
    id="someid"
    name="somename"
    label="somelabel"
    displayField="name"
    valueField="abbr"
    onChange={(e) => console.log(e.target.value)}
    emptyMsg="Please select a state"
    data={states}
    error="This field is required"
  />
)

RippleButton usage: Color, HoverColor, and TextColor are optional.

  import {RippleButton} from 'c5cl';

  return (
    <RippleButton 
      text="Click Me" 
      onClick={() => console.log('I have been clicked')}
      color={'#de34eb'}
      hoverColor={'#bb5bc2'}
      textColor={'#fff'}
    />
  )

DataGrid usage:

  import {DataGrid} from 'c5cl';

  const testData = [
  {
    id: 1,
    storeName: 'IGA 001',
    storeNumber: '001',
    termCount: 3,
  },
  {
    id: 2,
    storeName: 'IGA 002',
    storeNumber: '002',
    termCount: 4,
  },
  {
    id: 3,
    storeName: 'IGA 003',
    storeNumber: '003',
    termCount: 6,
  },
];

  return (
    <DataGrid 
      data={testData}
      identifier={'grid1'}
      headers={[
          {
            columnName: 'id',
            title: 'ID',
            visible: true,
            style: {
              textAlign: 'center',
            },
          },
          {
            columnName: 'storeName',
            title: 'Name',
            style: {
              textAlign: 'left',
            },
          },
          {
            columnName: 'storeNumber',
            title: '#',
            style: {
              textAlign: 'center',
            },
          },
        ]}
    />
  )

DataGrid Props:

DataGrid Header Props

Custom Renderers

You can for example add custom Renderers to your grid with an example like so:

const renderers = {
  active: (i: T) => (
    <input type="checkbox" checked={i.active} />;
  ),
  image: (i: T) => {
    return (
      <img
        alt={i.image.name}
        src={i.image.url}
        height={i.image.height}
        width={i.image.width}
      />
    );
  },
};

<DataGrid customRenderers={renderers} />

and then your headers would look like this:

const headers = [
  {
    columnName: 'active',
    title: 'active',
    style: {
      textAlign: 'center',
    },
  },
  {
    columnName: 'image',
    title: 'PinPad',
    style: {
      textAlign: 'center',
    },
  }
]

and your data would look like this:

const testData = [
  {
    id: 1,
    storeName: 'IGA 001',
    storeNumber: '001',
    termCount: 3,
    active: true,
    image: {
      url: 'https://www.someurl.com/_images/pinpadlogos/l5300.png',
      name: 'l5300',
      height: '20',
      width: '30',
    },
  },
]

so your columnName needs to match the name of the renderer

note: The error field in both components is used for when the form validation fails, you can send in a unique error message to each element of your form.

If for some reason you are using CRA and are getting an error about not being able to find source maps, this is a known issue with Webpack5 and is being address. The workaround is to add this to your .env file:

GENERATE_SOURCEMAP=false

DataGrid Todos

• ✔ work on row colors based on the color that might be passed in
• ✔ figure out how to center the column text
• ✔ make each column sortable
• ✔ make columns hidden
• ✔ make column filterable by the unique values that are displayed for that column
• ✔ make columns draggable 🚀
• ✔ enable light and dark mode
• ✔ change column hiding to be enabled by right clicking
• ✔ fix column widget vertical placement
• ✔ fix filter widget vertical placement
• fix custom renderers

Some ideas for extra components

• Toasts
• Data Picker
• Tooltips
• ✔ Slider
• any other thoughts
• TreeViewer
• Carousel