@seeqdev/qomponents

qomponents

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

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

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';

2) How do I get my Button to be green?

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"

3) How do I use Fontawesome Icons?

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

4) How can I see all the props that are available?

Take a look at the .types.d.ts files that can be found in the dist/{component name}/ folder. This file contains all available properties including some descriptive text that tells you more about them.