reusable login component for react apps
Homepage Repository npm Download
npm install @4geit/rct-login-component@1.85.2
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.
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
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
yarn
~/.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.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.
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
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
yarn 4geit-component-builder --name <NAME>
or
yarn 4geit-store-builder --name <NAME>
You will still be asked to type the description though.
Once the package is generated, you will see it available under the folder ./packages
.
You are now ready to use your new package by reading its README.md
file.
~/.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
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
yarn web-builder --group <GROUP> --name <NAME>
You will still be asked to type the description though.
yarn
command in order to install its dependencies.~/.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
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
yarn native-builder --group <GROUP> --name <NAME>
You will still be asked to type the description though.
yarn
command in order to install its dependencies.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
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.