@seeqdev/qomponents 0.0.183 → 0.0.184

package/README.md

@@ -4,7 +4,6 @@
 </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!)
 
@@ -37,7 +36,7 @@ Here is an example of a basic app using the `Button` component:
 
 ```jsx
 import * as React from 'react';
-import {Button} from '@seeqdev/qomponents';
+import { Button } from '@seeqdev/qomponents';
 
 function App() {
   return <Button variant="theme" label="Seeq Rocks" />;
@@ -48,15 +47,6 @@ To make sure all styles are properly applied be sure to include the qomponents c
 
 ```css
 @import '@seeqdev/qomponents/dist/styles.css';
-
-@font-face {
-  font-family: 'fontCustom';
-  src: url('@seeqdev/qomponents/dist/FontCustom.woff2') format('woff2'),
-    url('@seeqdev/qomponents/dist/FontCustom.woff') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
-
 ```
 
 <b>A note on CSS:</b> Seeq's qomponents come fully styled and ready to use. While it is tempting to use the
@@ -76,7 +66,7 @@ Add the following to the <code>rules</code> array in your <code>webpack.config</
 
 ```
   {
-    test: /@?(seeqdev).*\.(ts|js)x?$/, 
+    test: /@?(seeqdev).*\.(ts|js)x?$/,
     loader:'babel-loader'
   },
   {
@@ -100,17 +90,13 @@ Themes are applied by adding the class of the desired theme to a wrapper of your
 also be applied to the body tag.
 
 ```html
-
-<div class="color_analysis">
-  ... your application here
-</div>
-
+<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"  |
@@ -142,4 +128,4 @@ For Example:
 
 <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.
+folder. This file contains all available properties including some descriptive text that tells you more about them.

package/dist/example/.eslintrc.cjs

@@ -1,14 +1,10 @@
 module.exports = {
   env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-  ],
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended'],
   parser: '@typescript-eslint/parser',
   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
   plugins: ['react-refresh'],
   rules: {
     'react-refresh/only-export-components': 'warn',
   },
-}
+};

package/dist/example/README.md

@@ -28,6 +28,3 @@ npm run dev
 
 All application code can be found in Example.tsx. Check out the source code to learn how to ensure your
 components display using the correct theme (green, blue, orange) as well as the correct mode (light or dark).
-
-
-

package/dist/example/src/Example.tsx

@@ -37,8 +37,8 @@ const options = [
 ];
 
 const Trigger = ({ label }: { label: string }) => (
-  <div className="flex justify-start items-center border-b px-2 tw:text-sq-theme-dark">
-    <Icon icon="fc-arrow-dropdown" extraClassNames="tw:text-sq-theme-dark mr-[0.5rem] text-[0.75rem]" type="text" />
+  <div className="flex justify-start items-center border-b px-2 tw-text-sq-color-dark">
+    <Icon icon="fc-arrow-dropdown" extraClassNames="tw-text-sq-color-dark mr-[0.5rem] text-[0.75rem]" type="text" />
     {label}
   </div>
 );
@@ -80,7 +80,7 @@ const accordionItems = [
 ];
 
 const renderData = (text: string) => (
-  <div className="tw:text-sq-gray dark:tw-text-sq-white p-6">
+  <div className="tw-text-sq-color-gray dark:tw-text-sq-white p-6">
     <p className="mb-5 text-[0.9375rem] leading-normal">{text}</p>
   </div>
 );
@@ -484,7 +484,7 @@ function Example() {
                       className="w-48 h-32 object-cover rounded-md mb-2"
                     />
                     <div className="font-bold">Explore the Mountains</div>
-                    <div className="text-xs tw:text-sq-dark-gray">Find peace in nature's beauty.</div>
+                    <div className="text-xs tw-text-sq-color-gray">Find peace in nature's beauty.</div>
                   </div>,
                   <div className="flex flex-col items-center justify-center p-4" key="slide2">
                     <img
@@ -493,7 +493,7 @@ function Example() {
                       className="w-48 h-32 object-cover rounded-md mb-2"
                     />
                     <div className="font-bold">City Lights</div>
-                    <div className="text-xs tw:text-sq-dark-gray">Experience the energy of the city.</div>
+                    <div className="text-xs tw-text-sq-color-gray">Experience the energy of the city.</div>
                   </div>,
                   <div className="flex flex-col items-center justify-center p-4" key="slide3">
                     <img
@@ -502,7 +502,7 @@ function Example() {
                       className="w-48 h-32 object-cover rounded-md mb-2"
                     />
                     <div className="font-bold">Relax at the Beach</div>
-                    <div className="text-xs tw:text-sq-dark-gray">Soak up the sun and surf.</div>
+                    <div className="text-xs tw-text-sq-color-gray">Soak up the sun and surf.</div>
                   </div>,
                 ]}
                 showArrows={false}
@@ -527,7 +527,7 @@ function Example() {
               <Collapse isVisible={collapseVisible}>
                 <div className="p-4 mt-2 bg-transparent rounded-md">
                   <div className="font-bold">Advanced Settings</div>
-                  <div className="text-xs tw:text-sq-dark-gray">Configure rarely used options here.</div>
+                  <div className="text-xs tw-text-sq-color-gray">Configure rarely used options here.</div>
                   <Checkbox label="Enable beta features" />
                   <Checkbox label="Show debug info" />
                 </div>

package/dist/example/tsconfig.json

@@ -2,11 +2,7 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": [
-      "ES2020",
-      "DOM",
-      "DOM.Iterable"
-    ],
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
     "moduleResolution": "node",
@@ -22,9 +18,7 @@
     "noFallthroughCasesInSwitch": true,
     "allowSyntheticDefaultImports": true
   },
-  "include": [
-    "src"
-  ],
+  "include": ["src"],
   "references": [
     {
       "path": "./tsconfig.node.json"

package/dist/example/tsconfig.node.json

@@ -6,7 +6,5 @@
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true
   },
-  "include": [
-    "vite.config.ts"
-  ]
+  "include": ["vite.config.ts"]
 }

package/dist/example/vite.config.ts

@@ -1,6 +1,6 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import tailwindcss from '@tailwindcss/vite'
+import tailwindcss from '@tailwindcss/vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({