dsi-ui-web-components

DSI React Component Library

Usage

Usage of the component (after the library installed as a dependency into another project) will be:

Note :: before using these components make sure you import ant design css in App.js import 'antd/dist/antd.css'

import React from 'react'
import ContainerHeader from 'dsi-ui-web-components'

const App = () => {

  const onSearch = (value) => {
    console.log(value)
  }
  const headerConfig = {
    placeholderTitle: 'Search For Organisation',
    headerTitle: 'List of Organisation',
  }
  return (
    <ContainerHeader onSearch={onSearch} headerConfig={headerConfig} />
  )
})

export default App;

import React from 'react'
import OrganisationList from 'dsi-ui-web-components'
import { Space } from 'antd'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'

const App = () => {

  const isLoading = !false

  const organisations = [
    {
      createdAt: '25/02/2022, 12:12:23',
      createdBy: 'yoBZwqQZ4cTvx9tlB0v7HfkGOBp2',
      description: 'Demo Org Description 1',
      id: '1xk9SaDyRBkGWyJdY30e',
      name: 'Demo Org Name 1',
    },
    {
      createdAt: '25/02/2022, 12:12:23',
      createdBy: 'yoBZwqQZ4cTvx9tlB0v7HfkGOBp2',
      description: 'Demo Org Description 2',
      id: '1xk9SaDyRBkGWyJdY30e',
      name: 'Demo Org Name 2',
    },
  ]

  const tableColumns = [
    {
      title: 'Name of Organisation',
      dataIndex: 'name_of_organisation',
      key: 'name_of_organisation',
    },
    {
      title: 'Description',
      dataIndex: 'description',
      key: 'description',
    },
    {
      title: 'Date of Creation',
      dataIndex: 'date_of_creation',
      key: 'date_of_creation',
    },
    {
      title: '',
      dataIndex: 'action',
      key: 'action',
      align: 'right',
    },
  ]
  const deleteOrganisation = (id) => {
    alert(`lets delete org : ${id}`)
  }
  const editOrganisation = (id) => {
    alert(`lets edit org : ${id}`)
  }
  const list = (organisations || []).map((organisation, index) => {
    return {
      key: index,
      name_of_organisation: organisation.name,
      description: organisation.description,
      date_of_creation: organisation.createdAt,
      action: (
        <Space size={'large'}>
          <EditOutlined
            onClick={() => editOrganisation(organisation.id)}
            style={{ fontSize: '20px' }}
          />
          <DeleteOutlined
            style={{ fontSize: '20px', color: 'red' }}
            onClick={() => deleteOrganisation(organisation.id)}
          />
        </Space>
      ),
    }
  })
  return (
     <OrganisationList
      loading={isLoading}
      tableColumnLayout={tableColumns}
      listSourceLayout={list}
      defaultPageSize={10}
      showSizeChanger={false}
      pageSizeOptions={[10, 20, 30]}
    />
  )
})

export default App;

This project skeleton was created to help people get started with creating their own React component library using:

• Rollup

It also features:

• Storybook to help you create and show off your components
• Jest and React Testing Library enabling testing of the components

Development

Testing

npm run test

Building

npm run build

Storybook

To run a live-reload Storybook server on your local machine:

npm run storybook

To export your Storybook as static files:

npm run storybook:export

Publishing

Hosting via NPM

First, make sure you have an NPM account and are logged into NPM using the npm login command.

Then update the name field in package.json to reflect your NPM package name in your private or public NPM registry. Then run:

npm publish

The "prepublishOnly": "npm run build" script in package.json will execute before publish occurs, ensuring the build/ directory and the compiled component library exist.

Additional Help

Supporting Image Imports

Add the following library to your component library @rollup/plugin-image:

npm i -D @rollup/plugin-image

Then add it to rollup-config.js:

...
plugins:[
  ...,
  image(),
  ...
]
...

You can then import and render images in your components like:

import logo from './rollup.png'

export const ImageComponent = () => (
  <div>
    <img src={logo} />
  </div>
)

Supporting JSON Imports

Add the following library to your component library @rollup/plugin-json:

npm i -D @rollup/plugin-json

Then add it to rollup-config.js:

...
plugins:[
  ...,
  json(),
  ...
]
...

You can then import and use JSON as ES6 Modules:

import data from './some-data.json'

export const JsonDataComponent = () => <div>{data.description}</div>

Checkout the official Rollup plugin list for additional helpful plugins.