npm package: @seeqdev/qomponents
Description: Seeq's UI component library built for React
Author: Seeq
Latest version: 0.0.214

<!-- markdownlint-disable-next-line -->
<p align="center">
  <img width="150" src="https://seeq.com/sites/default/files/seeq-content/seeq-logo-blue-web-33h.svg" alt="Seeq logo">
</p>
<h1 align="center">qomponents</h1>

Seeq qomponents are a collection of UI components, including a Button, a TextField, an Icon, as well as a Tooltip
React component (more coming soon!)

These components are used by Seeq's application and are made publicly available for Developers who want to expand
the Seeq ecosystem with their own plugins and add-ons without having to worry about creating a cohesive Seeq UX
experience. Every component comes fully styled (and with dark mode support).

## Installation

Seeq qomponents are available on npm.

**npm:**

```sh
npm install @seeqdev/qomponents
```

**yarn:**

```sh
yarn add @seeqdev/qomponents
```

## Getting started with Seeq qomponents

Prefer a more complete example? <br/>Check out the example folder provided.
It includes a ready-to-run example application. Start with the readme in the example folder to get up and running!

Here is an example of a basic app using the `Button` component:

```jsx
import * as React from 'react';
import { Button } from '@seeqdev/qomponents';

function App() {
  return <Button variant="theme" label="Seeq Rocks" />;
}
```

To make sure all styles are properly applied be sure to include the qomponents css file in your main css file.

```css
@import '@seeqdev/qomponents/dist/styles.css';
```

<b>A note on CSS:</b> Seeq's qomponents come fully styled and ready to use. While it is tempting to use the
available <i>extraClassNames</i> property to provide yet additional styling we strongly advise you to use this
property to provide only width, margins and padding. This will ensure for a smooth upgrade experience when
Seeq's look and feel changes.
<br />
<b>Tip:</b>: to indicate missing or wrong user input use the <i>showError</i> property available on TextField,
TextArea, as well as Select.

## Frequently asked questions

<h3>1) I use webpack and I get a strange error once I added qomponents to my package.json!</h3>

Webpack needs a little help :)  
Add the following to the <code>rules</code> array in your <code>webpack.config</code>

```
  {
    test: /@?(seeqdev).*\.(ts|js)x?$/,
    loader:'babel-loader'
  },
  {
    test: /\.(woff|woff2|eot|ttf|otf)$/i,
    type: 'asset/resource',
  }
```

If you're using webpack + scss be sure to include a <code>~</code> as part of the css import path:

```
@import '~@seeqdev/qomponents/dist/styles.css';
@import '~@fortawesome/fontawesome-free/css/all.css';
```

<h3>2) How do I get my Button to be green?</h3>

The colors of your qomponents are controlled by the "theme". </br>
If you do not provide a theme your qomponents will use the default blue or also known as Topic-based theme.
Themes are applied by adding the class of the desired theme to a wrapper of your application. The theme class can
also be applied to the body tag.

```html
<div class="color_analysis">... your application here</div>
```

There are 3 themes available:

| Theme    | Color  | Class          | Example                |
| :------- | :----- | :------------- | :--------------------- |
| Topic    | blue   | color_topic    | class="color_topic"    |
| Analysis | green  | color_analysis | class="color_analysis" |
| DataLab  | orange | color_datalab  | class="color_datalab"  |

<h3>3) How do I use Fontawesome Icons?</h3>
Before you can use Fontawesome icons you must install FontAwesome.

```
npm install --save @fortawesome/fontawesome-free
```

Once it's installed simply import the required css files. To import all variations of FontAwesome's Icons you can
add the following import to your main css file:

```
@import "@fortawesome/fontawesome-free/css/all.css";
```

If your project only uses Classic Solid or (Sharp Solids, or any other one kind) it's better to import only the
required css for that Icon type to keep your packages size small.<br/> Note: if you don't import "all" like shown above
be sure to include <code>fontawesome.css</code> in addition to whatever Icon style you require.

For Example:

```
@import "@fortawesome/fontawesome-free/css/fontawesome.css";
@import "@fortawesome/fontawesome-free/css/solid.css";
```

<h3>4) How can I see all the props that are available?</h3>
Take a look at the <code>.types.d.ts</code> files that can be found in the <code>dist/{component name}/</code>
folder. This file contains all available properties including some descriptive text that tells you more about them.