# unbxd-react-components

## Using the components library

Install the package from npm 
```
use npm version : '9.7.2' 
```
use node version: 'v14.20.1'
```
npm install @unbxd-ui/unbxd-react-components
```

Import the required components along with the CSS.

```
import Button from "unbxd-react-components/components/Button";
```

Or less ideally (as this will include all components that you might not use as well)

```
import { Button } from "unbxd-react-components";
```

And include the core CSS like below,

```
import "unbxd-react-components/components/core.css";
```

The core CSS file will contain the core styles without which the component will not behave as expected. Hence do not forget to include this. 

### Using theme CSS

Theme CSS file will contain the styles which suggests a theme for all the components but is not a must have to use the library.

You can use the theme CSS in 2 ways:

**1. Use individual component CSS**

You can import the individual files for each of the components like below:

```
import "unbxd-react-components/components/Table/tableTheme.css";
```

**2. Include the bundled CSS file which has all component's CSS**

You can import the bundled CSS file which contains all the component's CSS like below:

```
import "unbxd-react-components/components/theme.css";
```

## Viewing the components

You can view the available components and their props using the storybook at this link:

https://unbxd.github.io/unbxd-react-components/


## To Contribute & Run Storybook Locally 

**1. Use node version: `v14.20.1`.**

**2. After making changes to the required components and their scss, Add examples in stories.js file of the respective component.**

**3. `npm run build` && `npm run build-css`**

**4. Then use node version: `v18.17.1` (Required for storybook)**

**5. `npm run storybook`**

After this the storybook will be up on 6007 port.


## FAQs

1) I am getting "multiple instances of React" error. What to do?
    
    You can fix this error by adding the following config in your `webpack.config.js` file

    ```
    resolve: {
        alias: {
            react: path.resolve('./node_modules/react'),
        },
    }
    ```

    For more details refer [this link](https://github.com/facebook/react/issues/13991)


## Contributing

To contribute to the project, read the [contribution guidelines](CONTRIBUTE.md)