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 eco-system 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:

npm install @seeqdev/qomponents

yarn:

yarn add @seeqdev/qomponents

Getting started with Seeq qomponents

Prefer a more complete example? Checkout 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:

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.

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

A note on CSS: Seeq's qomponents come fully styled and ready to use. While it is tempting to use the available extraClassNames 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. Tip:: to indicate missing or wrong user input use the showError property available on TextField, TextArea, as well as Select.

Frequently asked questions

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

  {
    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 ~ as part of the css import path:

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

The colors of your qomponents are controlled by the "theme". 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.

<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" |

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. Note: if you don't import "all" like shown above be sure to include fontawesome.css in addition to whatever Icon style you require.

For Example:

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