Deprecated react components library
> A set of reusable and composable React components built on top of Material UI core for developing fast and friendly web applications interfaces.
> šØāš Check the migration guide from bit legacy to bit harmony version.
Npmrc is npm config file and in order to use our library, you need to configured this file.
ā¼ Skip this step if the project is generated with our Webapp Rocket Generator. The .npmrc file is already configured
Run
``shell `
npm config set @totalsoft_oss:registry https://node.bit.cloud
This command will add an entry in your root .npmrc file. If it doesn't exist, it will create one.
Go to component main page and then select the command for the package manager that you use. You can also choose the version that you want to install.

Run the command in your terminal and you'll be ready to use it!
`shell `
npm i @totalsoft_oss/rocket-ui.components.data-display.typography
If you want to have all the components in your project in just one package. navigate to core component in bit cloud.

Install core package by running`shell`
npm i @totalsoft_oss/rocket-ui.core
`jsx
import React from 'react'
import Typography from '@totalsoft_oss/rocket-ui.components.data-display.typography'
/* example using core package
import { Typography } from '@totalsoft_oss/rocket-ui.core'
*/
const App = () => {
return (
"Text"
)
}
`𧬠Components structure
Each component is in a section that is appropriate for its purpose. For example, all buttons related components resides in buttons folder.rocket-generator
All components has the same files structure.
We implement and enforce this structure by creating our own component generator, a functionality provided by Bit.
As you will see, all the components and the ones that will be created using the template will have the following structure
* index.js Entry file.MyComponent.js
* Main file.MyComponent.test.js
* Test file.MyComponent.docs.mdx
* Docs file for the component.compositions
* Compositions folder.MyComponent.composition.js
* Compositions for simulating the component in different states and contexts.
We use Bit for components management and contribution. Bit is an open-source tool for composing component-driven software.
shell
npm i -g @teambit/bvm
`
`shell
bvm install
`
If any error occurs at installation, please check the troubleshooting section.
$3
After bit is installed successfully, you can clone the repository and use bit functionalities at their fullest.šTo get started straight away run in command prompt
bit start and open localhost:3000. It may take a while to build the first time you run this command as it is building the whole User Interface for your development environment. When local server is up and running you would see all the components and you can interact with them.`shell
bit start
`
$3
After changing/fixing the component according to your needs, you should run bit test to make sure that all the tests are passing and add more if your changes requires.
`shell
bit test
`Also, if a new feature is added, in addition to the tests, an example with the new functionality should also be added. The examples files are in each component directory inside
compositions directory.After changing the component you need to run
bit status to check for bit related issues and then bit compile in order to have the latest modifications in your UI.`shell
bit status
`
`shell
bit compile
`$3
For creating a new component you should use our own component generator, rocket-generator, that provides a template which is helpful in implementing a new component.
`shell
bit create rocket-generator components/buttons/my-component
`
$3
When your change/feature/fix is done and you want to mark which components are published, their next version and a changelog message use --soft option.
`shell
bit tag -m "my message" --soft
`After running the above command you should see the
bitmap` file changed and after that you can create your pull request.You can read more about Bit and other functionalitites that he provides here.