bwcl-test v0.0.1

bwcl

Installation:

npm install bwcl

Usage:

import React from "react";
import { Button } from "bwcl";

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

There are a number of helper utilities, example usage: formatDate: takes a string or a date and returns a string representation of only a date. formatMoney: fixes issues with money values that only have a decimal precision of 1. isValid: returns 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 "bwcl";

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

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

TextInput example usage:

import { TextInput } from "bwcl";

return (
  <TextInput
    id="someId"
    name="somename"
    label="somelabel"
    placeholder="someplaceholder"
    onChange={(e) => console.log(e.target.value)}
    type="text"
    value="somevalue"
    error="some error"
  />
);

SelectField example usage:

import { SelectField } from "bwcl";

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 "bwcl";

return (
  <RippleButton
    text="click me"
    onClick={() => console.log("I have been clicked")}
    color={"#ff0000"}
    hoverColor={"#bb5bc2"}
    textColor={"#fff"}
  />
);

DataGrid usage:

import {DataGrid} from 'bwcl
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={"g1"}
    mode="light"
    headers={[
          {
            columnName: "id",
            title: "id",
            visible: true,
            style: {
              textAlign: "center",
            },
          },
          {
            columnName: "storeName",
            title: "name",
            visible: true,
            style: {
              textAlign: "left",
            },
          },
        ]}
  />
)

DataGrid Props:

DataGrid Header Props

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, add this to your .env file:
GENERATE_SOURCEMAP=false

##DataGrid Todos:
[✔] work on row colors based on color that might be passed in
[✔] figure out how to center the column text
[✔] make each column sortable
[✔] make columns hidden
[✔] make columns filterable by the unique values that are displayed for that column
[✔] make columns draggable
[✔] enable light and dark mode
[✔] make DataGrid right clickable
[✔] fix column wiget vertical placement
[✔] fix filter widget vertical placement
[ ] fix custom renders