@quillsql/react 1.7.2 → 1.7.4

package/src/SQLEditor.tsx

@@ -13,7 +13,6 @@ import {
 } from '@heroicons/react/20/solid';
 import { QuillTheme } from './QuillProvider';
 import { SpecialTable } from './Table';
-import { TailSpin } from 'react-loader-spinner';
 
 export function convertPostgresColumn(column) {
   let format;
@@ -256,14 +255,8 @@ export default function QueryEditor({
   };
 
   const handleRunQuery = async () => {
-    const {
-      publicKey,
-      customerId,
-      environment,
-      queryEndpoint,
-      queryHeaders,
-      withCredentials,
-    } = client;
+    const { publicKey, customerId, environment, queryEndpoint, queryHeaders } =
+      client;
     try {
       let response;
       setSqlQueryLoading(true);
@@ -271,7 +264,7 @@ export default function QueryEditor({
         response = await axios.post(
           queryEndpoint,
           { metadata: { query, task: 'query' } },
-          { headers: queryHeaders, withCredentials }
+          { headers: queryHeaders }
         );
       } else {
         response = await axios.post(
@@ -679,7 +672,54 @@ const SQLEditorComponent = ({
         >
           {LoadingComponent && <LoadingComponent />}
           {!LoadingComponent && (
-            <TailSpin height={36} width={36} color="#364153" />
+            <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+              <defs>
+                <linearGradient
+                  id="circleGradient"
+                  gradientUnits="objectBoundingBox"
+                >
+                  <stop offset="0%" stop-color="#F9F9FA" />
+                  <stop offset="5%" stop-color="#F9F9FA" />
+                  <stop offset="100%" stop-color="#D1D1D1" />
+                </linearGradient>
+                <mask id="mask">
+                  <circle cx="12" cy="12" r="12" fill="white" />
+                  <path
+                    id="sector"
+                    fill="black"
+                    d="M15,15 L15,1.8 A13.2,13.2 0 0,1 15,1.8 Z"
+                  >
+                    <animate
+                      attributeName="d"
+                      from="M15,15 L15,1.8 A13.2,13.2 0 0,0 15,1.8 Z"
+                      to="M15,15 L15,1.8 A13.2,13.2 0 1,1 15,1.8 Z"
+                      dur="2s"
+                      repeatCount="indefinite"
+                    />
+                  </path>
+                </mask>
+              </defs>
+              <g transform="rotate(0 15 15)">
+                <animateTransform
+                  attributeName="transform"
+                  attributeType="XML"
+                  type="rotate"
+                  from="0 12 12"
+                  to="360 12 12"
+                  dur="2s"
+                  repeatCount="indefinite"
+                />
+                <circle
+                  cx="12"
+                  cy="12"
+                  r="12"
+                  fill="none"
+                  stroke="url(#circleGradient)"
+                  stroke-width="8"
+                  mask="url(#mask)"
+                />
+              </g>
+            </svg>
           )}
         </div>
       ) : (
@@ -824,7 +864,54 @@ const SchemaListComponent = ({ schema, theme, loading, LoadingComponent }) => {
         <div style={{ height: 100 }} />
         {LoadingComponent && <LoadingComponent />}
         {!LoadingComponent && (
-          <TailSpin height={36} width={36} color="#364153" />
+          <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+              <linearGradient
+                id="circleGradient"
+                gradientUnits="objectBoundingBox"
+              >
+                <stop offset="0%" stop-color="#F9F9FA" />
+                <stop offset="5%" stop-color="#F9F9FA" />
+                <stop offset="100%" stop-color="#D1D1D1" />
+              </linearGradient>
+              <mask id="mask">
+                <circle cx="12" cy="12" r="12" fill="white" />
+                <path
+                  id="sector"
+                  fill="black"
+                  d="M15,15 L15,1.8 A13.2,13.2 0 0,1 15,1.8 Z"
+                >
+                  <animate
+                    attributeName="d"
+                    from="M15,15 L15,1.8 A13.2,13.2 0 0,0 15,1.8 Z"
+                    to="M15,15 L15,1.8 A13.2,13.2 0 1,1 15,1.8 Z"
+                    dur="2s"
+                    repeatCount="indefinite"
+                  />
+                </path>
+              </mask>
+            </defs>
+            <g transform="rotate(0 15 15)">
+              <animateTransform
+                attributeName="transform"
+                attributeType="XML"
+                type="rotate"
+                from="0 12 12"
+                to="360 12 12"
+                dur="2s"
+                repeatCount="indefinite"
+              />
+              <circle
+                cx="12"
+                cy="12"
+                r="12"
+                fill="none"
+                stroke="url(#circleGradient)"
+                stroke-width="8"
+                mask="url(#mask)"
+              />
+            </g>
+          </svg>
         )}
       </div>
     );

package/src/Table.tsx

@@ -2,16 +2,11 @@
 // @ts-nocheck
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import axios from 'axios';
-import {
-  ClientContext,
-  DashboardContext,
-  ThemeContext,
-} from './Context';
-import Skeleton from 'react-loading-skeleton';
+import { ClientContext, DashboardContext, ThemeContext } from './Context';
+// import Skeleton from 'react-loading-skeleton';
 import { valueFormatter } from './Chart';
 // import { SpecialTable } from './SQLEditor';
 import { QuillTheme } from './QuillProvider';
-import { TailSpin } from 'react-loader-spinner';
 
 interface TableColumn {
   label: string;
@@ -205,7 +200,54 @@ export function SpecialTable({
         >
           {LoadingComponent && <LoadingComponent />}
           {!LoadingComponent && (
-            <TailSpin height={36} width={36} color="#364153" />
+            <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+              <defs>
+                <linearGradient
+                  id="circleGradient"
+                  gradientUnits="objectBoundingBox"
+                >
+                  <stop offset="0%" stop-color="#F9F9FA" />
+                  <stop offset="5%" stop-color="#F9F9FA" />
+                  <stop offset="100%" stop-color="#D1D1D1" />
+                </linearGradient>
+                <mask id="mask">
+                  <circle cx="12" cy="12" r="12" fill="white" />
+                  <path
+                    id="sector"
+                    fill="black"
+                    d="M15,15 L15,1.8 A13.2,13.2 0 0,1 15,1.8 Z"
+                  >
+                    <animate
+                      attributeName="d"
+                      from="M15,15 L15,1.8 A13.2,13.2 0 0,0 15,1.8 Z"
+                      to="M15,15 L15,1.8 A13.2,13.2 0 1,1 15,1.8 Z"
+                      dur="2s"
+                      repeatCount="indefinite"
+                    />
+                  </path>
+                </mask>
+              </defs>
+              <g transform="rotate(0 15 15)">
+                <animateTransform
+                  attributeName="transform"
+                  attributeType="XML"
+                  type="rotate"
+                  from="0 12 12"
+                  to="360 12 12"
+                  dur="2s"
+                  repeatCount="indefinite"
+                />
+                <circle
+                  cx="12"
+                  cy="12"
+                  r="12"
+                  fill="none"
+                  stroke="url(#circleGradient)"
+                  stroke-width="8"
+                  mask="url(#mask)"
+                />
+              </g>
+            </svg>
           )}
         </div>
       </div>
@@ -834,7 +876,54 @@ const ChartUpdater = ({
             boxSizing: 'content-box',
           }}
         >
-          <Skeleton
+          <svg
+            width="100%"
+            height="100%"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+          >
+            <rect width="100%" height="100%" fill="#F9F9FA" />
+
+            <defs fill="#F9F9FA">
+              <linearGradient
+                id="skeletonGradient"
+                x1="0%"
+                y1="0%"
+                x2="10%"
+                y2="0%"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop offset="0%" stop-color="rgba(255,255,255,0)" />
+                <stop offset="50%" stop-color="#FEFEFE" />
+                <stop offset="100%" stop-color="rgba(255,255,255,0)" />
+                <animate
+                  attributeName="x1"
+                  from="-100%"
+                  to="100%"
+                  dur="2s"
+                  repeatCount="indefinite"
+                />
+                <animate
+                  attributeName="x2"
+                  from="-50%"
+                  to="150%"
+                  dur="2s"
+                  repeatCount="indefinite"
+                />
+              </linearGradient>
+            </defs>
+
+            <rect width="50%" height="100%" fill="url(#skeletonGradient)">
+              <animate
+                attributeName="x"
+                from="-100%"
+                to="100%"
+                dur="2s"
+                repeatCount="indefinite"
+              />
+            </rect>
+          </svg>
+          {/* <Skeleton
             count={1}
             // height={containerStyle?.height}
             height={
@@ -850,7 +939,7 @@ const ChartUpdater = ({
             // baseColor="#F3F4F6"
             baseColor="#F9F9FA"
             width="100%"
-          />
+          /> */}
         </div>
       </div>
     );

package/src/hooks/useQuill.ts

@@ -74,14 +74,13 @@ export const useQuill = (
           environment,
           queryEndpoint,
           queryHeaders,
-          withCredentials,
         } = client;
         try {
           if (queryEndpoint) {
             const resp = await axios.post(
               queryEndpoint,
               { metadata: { id: chartId, task: 'item' } },
-              { headers: queryHeaders, withCredentials }
+              { headers: queryHeaders }
             );
             setLoading(false);
             setData({

package/src/lib/font.ts

@@ -0,0 +1,14 @@
+export const fontSize = {
+  xs: 'qq-text-xs',
+  sm: 'qq-text-sm',
+  md: 'qq-text-base',
+  lg: 'qq-text-lg',
+  xl: 'qq-text-xl',
+  threeXl: 'qq-text-3xl',
+};
+
+export const fontWeight = {
+  sm: 'qq-font-normal',
+  md: 'qq-font-medium',
+  lg: 'qq-font-semibold',
+};

package/src/lib/index.ts

@@ -0,0 +1,3 @@
+export * from './inputTypes';
+export * from './font';
+export * from './utils';

package/src/lib/inputTypes.ts

@@ -0,0 +1,81 @@
+export type ValueFormatter = {
+  (value: number): string;
+};
+
+const iconVariantValues = [
+  'simple',
+  'light',
+  'shadow',
+  'solid',
+  'outlined',
+] as const;
+
+export type IconVariant = (typeof iconVariantValues)[number];
+
+export type HorizontalPosition = 'left' | 'right';
+
+export type VerticalPosition = 'top' | 'bottom';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'light';
+
+const deltaTypeValues = [
+  'increase',
+  'moderateIncrease',
+  'decrease',
+  'moderateDecrease',
+  'unchanged',
+] as const;
+
+export type DeltaType = (typeof deltaTypeValues)[number];
+
+const sizeValues = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+
+export type Size = (typeof sizeValues)[number];
+
+const colorValues = [
+  'slate',
+  'gray',
+  'zinc',
+  'neutral',
+  'stone',
+  'red',
+  'orange',
+  'amber',
+  'yellow',
+  'lime',
+  'green',
+  'emerald',
+  'teal',
+  'cyan',
+  'sky',
+  'blue',
+  'indigo',
+  'violet',
+  'purple',
+  'fuchsia',
+  'pink',
+  'rose',
+] as const;
+
+export type Color = (typeof colorValues)[number];
+
+const justifyContentValues = [
+  'start',
+  'end',
+  'center',
+  'between',
+  'around',
+  'evenly',
+] as const;
+export type JustifyContent = (typeof justifyContentValues)[number];
+
+const alignItemsValues = [
+  'start',
+  'end',
+  'center',
+  'baseline',
+  'stretch',
+] as const;
+export type AlignItems = (typeof alignItemsValues)[number];
+
+export type FlexDirection = 'row' | 'col' | 'row-reverse' | 'col-reverse';

package/src/lib/utils.tsx

@@ -0,0 +1,46 @@
+import { ValueFormatter } from './inputTypes';
+
+export const defaultValueFormatter: ValueFormatter = (value: number) =>
+  value.toString();
+
+export const sumNumericArray = (arr: number[]) =>
+  arr.reduce((prefixSum, num) => prefixSum + num, 0);
+
+export const removeValueFromArray = (value: any, array: any[]): any[] => {
+  const index = array.indexOf(value);
+  if (index > -1) {
+    array.splice(index, 1);
+  }
+  return array;
+};
+
+export const isValueInArray = (value: any, array: any[]): boolean => {
+  for (let i = 0; i < array.length; i++) {
+    if (array[i] === value) {
+      return true;
+    }
+  }
+  return false;
+};
+
+export const stringIsNumeric = (str: string | undefined): boolean => {
+  return !isNaN(Number(str)) && str !== undefined;
+};
+
+export const stringEndsWithNumber = (str: string): boolean => {
+  return stringIsNumeric(str.split('-').pop());
+};
+
+export function mergeRefs<T = any>(
+  refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>
+): React.RefCallback<T> {
+  return value => {
+    refs.forEach(ref => {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref != null) {
+        (ref as React.MutableRefObject<T | null>).current = value;
+      }
+    });
+  };
+}

package/tsconfig.json

@@ -1,14 +1,14 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "target": "es2022",
+    "lib": ["dom", "dom.iterable", "es2022"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
+    "module": "commonjs",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,

package/rollup.config.ts

@@ -1,21 +0,0 @@
-import typescript from '@rollup/plugin-typescript';
-import resolve from '@rollup/plugin-node-resolve';
-
-export default [
-  // {
-  //   input: 'src/index.ts',
-  //   output: {
-  //     file: 'lib/cjs/index.js',
-  //     format: 'cjs',
-  //   },
-  //   plugins: [typescript() , resolve()],
-  // },
-  {
-    input: 'src/index.ts',
-    output: {
-      file: 'lib/esm/index.js',
-      format: 'esm',
-    },
-    plugins: [typescript(), resolve()],
-  },
-];