fr8-searchbar v0.6.0

fr8-searchbar

Fr8 searchbar React component

Usage:

import React from 'react';
import ReactDOM from 'react-dom';
import { SearchBar } from 'fr8-searchbar';
import { darken } from 'polished';
import { wrapText } from 'fr8-searchbar/lib/utils';

const fetchedData = [
  {
    id: 'id1',
    name: 'FedEx',
    dotNumber: '123456789',
    mcNumber: '1234567',
  },
  {
    id: 'id2',
    name: 'Federal Department of',
    dotNumber: '123456789',
    mcNumber: '1234567',
  },
];

const testDataFeed = (value) =>
  fetchedData.filter((rowProps) => rowProps.name.toUpperCase().includes(value.toUpperCase()));

const Example = (props) => (
  <div key="keyRoot" style={{ width: '240px', height: '32px', padding: 0 }}>
    <SearchBar
      key="keySearchBar"
      bg="white"
      inputBg="white"
      inputColor="black"
      buttonColor="black"
      placeholder="Search here..."
      border="2px solid #005ede"
      borderRadius="2px"
      tableHeader={[
        { name: 'Business Name', width: '2fr', key: 'name' },
        { name: 'DOT Number', width: '1fr', key: 'dotNum' },
        { name: 'MC Number', width: '1fr', key: 'mcNum' },
      ]}
      headerColor="#4a90e2"
      hoverBg="rgba(148, 183, 230, 0.5)"
      hoverColor="#364147"
      activeBg={darken(0.5, 'rgba(148, 183, 230, 0.8)')}
      activeColor={darken(0.5, '#364147')}
      dataFeed={testDataFeed}
      rowIdKey="id"
      nameKey="name"
      onChange={() => {}}
      dataWrapper={(value) => wrapText(value)}
      animationTime={700}
    />
  </div>
);

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

or see storybook inside library project

Development

Install dependencies

yarn

Config Storybook/CLI localy

npm i -g @storybook/cli
cd <path to repository>/fr8-searchbar
getstorybook

Start Storybook:

yarn storybook

Build Storybook:

yarn build-storybook

Build for staging/production:

yarn build

or build with watching for changes:

yarn build:watch

Lint:

yarn lint

or lint with watching for changes:

yarn lint:watch

Publish:

yarn publish