@4geit/rct-data-table-component

data table component for react apps


License
MIT
Install
npm install @4geit/rct-data-table-component@1.78.0

Documentation

React Packages


This repository is a monorepo intended to host reusable React components and containers thanks to Lerna and Yarn Workspaces.

A live storybook is available to see how the components looks like @ http://react-packages.ws3.4ge.it

You can find all the React components and containers under the packages folder.

Installation

  1. This monorepo requires yarn version >=1.0.0 to work properly. If you have a previous version you can use the following command line to get it upgraded:
sudo npm i -g yarn
  1. A recommended way to install @4geit/react-packages is through git repository using the following command:
git clone git@gitlab.com:4geit/react-packages.git

alternatively you can use the HTTPS URL:

git clone https://gitlab.com/4geit/react-packages.git

And finally change your directory to the folder react-packages:

cd react-packages
  1. Now you are ready to install all the packages dependencies by using simply the command line:
yarn
  1. (Optional), you can also skip typing the author name and email each time that you want to create a package/project by adding those lines in your ~/.bashrc file:
export AUTHOR_NAME="John Doe"
export AUTHOR_EMAIL="john.doe@provider.xyz"
  • <AUTHOR_NAME>: the name of the author stored in the package.json generated when creating a new package/project.
  • <AUTHOR_EMAIL>: the name of the author stored in the package.json generated when creating a new package/project.

Development

Storybook

You can see a live preview of those packages by running the storybook server with the following command line:

yarn storybook

And the instance will be running at http://localhost:6006

This command also enables the watch mode therefore any changes that happens in a package will apply the changes in the storybook interface.

Watch mode alone

If you want to run the watch mode alone in order to build the package automatically while you are making changes to them, you can use the following command:

yarn watch

Caution: Don't use this command if you are already using yarn storybook

Package generator

Create a new package

  1. The easiest way to generate a new package with react-packages is to use the following command line:
yarn 4geit-component-builder

or

yarn 4geit-store-builder

if you are willing to create a store package alone.

The command will ask a set of values such as:

  • <NAME>: the name of the repository the one used in rct-<NAME>-<TYPE>. It has to comply with the slug format.
  • <DESCRIPTION>: the description of the project stored in the package.json and README.md
  1. But you can also use the command argument by doing so:
yarn 4geit-component-builder --name <NAME>

or

yarn 4geit-store-builder --name <NAME>

You will still be asked to type the description though.

  1. Once the package is generated, you will see it available under the folder ./packages.

  2. You are now ready to use your new package by reading its README.md file.

Create a new web project

  1. You will need to add those two additional environment variables in your ~/.bashrc file:
export GITLAB_PRIVATE_TOKEN=YOUR_GITLAB_PRIVATE_TOKEN
export RUNNER_ID=YOUR_RUNNER_ID
  • GITLAB_PRIVATE_TOKEN: a gitlab token allowed to create a project under the group 4geit. You can get your private gitlab token right here under the Private token section.
  • RUNNER_ID: the runner id that will run the CI build. Ask your team in order to provide you this ID.

Plus, you will also need to install the tool jq if it's not installed yet, assuming you are using Debian and Ubuntu, you can use the following command line:

sudo apt install jq
  1. The easiest way to generate a new project with react-packages is to use the following command line:
yarn web-builder

The command will ask a set of values such as:

  • <GROUP>: the group repository where it will be located on gitlab.com, the one used in <GROUP>/<NAME>
  • <NAME>: the name of the repository the one used in <GROUP>/<NAME>
  • <DESCRIPTION>: the description of the project stored in the package.json and README.md
  1. But you can also use the command argument by doing so:
yarn web-builder --group <GROUP> --name <NAME>

You will still be asked to type the description though.

  1. You will need to run the yarn command in order to install its dependencies.

Create a new native project

  1. You will need to add those two additional environment variables in your ~/.bashrc file:
export GITLAB_PRIVATE_TOKEN=YOUR_GITLAB_PRIVATE_TOKEN
export RUNNER_ID=YOUR_RUNNER_ID
  • GITLAB_PRIVATE_TOKEN: a gitlab token allowed to create a project under the group 4geit. You can get your private gitlab token right here under the Private token section.
  • RUNNER_ID: the runner id that will run the CI build. Ask your team in order to provide you this ID.

Plus, you will also need to install the tool jq if it's not installed yet, assuming you are using Debian and Ubuntu, you can use the following command line:

sudo apt install jq
  1. The easiest way to generate a new project with react-packages is to use the following command line:
yarn native-builder

The command will ask a set of values such as:

  • <GROUP>: the group repository where it will be located on gitlab.com, the one used in <GROUP>/<NAME>
  • <NAME>: the name of the repository the one used in <GROUP>/<NAME>
  • <DESCRIPTION>: the description of the project stored in the package.json and README.md
  1. But you can also use the command argument by doing so:
yarn native-builder --group <GROUP> --name <NAME>

You will still be asked to type the description though.

  1. You will need to run the yarn command in order to install its dependencies.

Storybook

The storybook interface allows to test quickly the react components available in the repository. Each component is added as a story.

Let's assume you create a new component package named RctDummyComponent with the package name @4geit/rct-dummy-component and you are willing to see it appears in the storybook interface. Therefore you will need to edit the file stories/index.js, import the component class RctDummyComponent as follows:

import RctDummyComponent from '@4geit/rct-dummy-component'

and then at the bottom of the file add the following code:

storiesOf('RctDummyComponent', module)
  .addDecorator(centered)
  .add('simple usage',
    withInfo('This is the basic usage of the component without any props provided')(() => (
      <RctDummyComponent/>
    ))
  )

as you might have noticed the string RctDummyComponent is used to pass a named to the story, .addDecorator(centered) is used to center the component UI to the center of the screen and .add('simple usage', ...) is used to add one example of the story with a given designation. Here we are calling the component directive <RctDummyComponent/>.

And you can then run the storybook instance with the command:

yarn storybook

and get access to it through http://localhost:6006

Test environment

You can run the entire test environment by running the command line:

yarn test

You can also enable some debug messages by using the DEBUG environment variable as follow:

DEBUG="react-packages:*" yarn test

All the debug message are prefixed by react-packages:.

If you are willing to run the storybook and the test command line in the same time, you might encounter some limitation on Ubuntu, in order to fix this issue take a look to this workaround.