@quillsql/react 1.0.0

package/src/lib/constants.ts

@@ -0,0 +1,52 @@
+import { Color, DeltaType, HorizontalPosition, Size, VerticalPosition } from "./inputTypes";
+
+export const DeltaTypes: { [key: string]: DeltaType } = {
+  Increase: "increase",
+  ModerateIncrease: "moderateIncrease",
+  Decrease: "decrease",
+  ModerateDecrease: "moderateDecrease",
+  Unchanged: "unchanged",
+};
+
+export const BaseColors: { [key: string]: Color } = {
+  Slate: "slate",
+  Gray: "gray",
+  Zinc: "zinc",
+  Neutral: "neutral",
+  Stone: "stone",
+  Red: "red",
+  Orange: "orange",
+  Amber: "amber",
+  Yellow: "yellow",
+  Lime: "lime",
+  Green: "green",
+  Emerald: "emerald",
+  Teal: "teal",
+  Cyan: "cyan",
+  Sky: "sky",
+  Blue: "blue",
+  Indigo: "indigo",
+  Violet: "violet",
+  Purple: "purple",
+  Fuchsia: "fuchsia",
+  Pink: "pink",
+  Rose: "rose",
+};
+
+export const Sizes: { [key: string]: Size } = {
+  XS: "xs",
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl",
+};
+
+export const HorizontalPositions: { [key: string]: HorizontalPosition } = {
+  Left: "left",
+  Right: "right",
+};
+
+export const VerticalPositions: { [key: string]: VerticalPosition } = {
+  Top: "top",
+  Bottom: "bottom",
+};

package/src/lib/font.ts

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

package/src/lib/hexColors.ts

@@ -0,0 +1,28 @@
+import { BaseColors } from "./constants";
+
+export const hexColors: { [color: string]: string } = {
+  [BaseColors.Slate]: "#64748b",
+  [BaseColors.Gray]: "#6b7280",
+  [BaseColors.Zinc]: "#71717a",
+  [BaseColors.Neutral]: "#737373",
+  [BaseColors.Stone]: "#78716c",
+  [BaseColors.Red]: "#ef4444",
+  [BaseColors.Orange]: "#f97316",
+  [BaseColors.Amber]: "#f59e0b",
+  [BaseColors.Yellow]: "#eab308",
+  [BaseColors.Lime]: "#84cc16",
+  [BaseColors.Green]: "#22c55e",
+  [BaseColors.Emerald]: "#10b981",
+  [BaseColors.Teal]: "#14b8a6",
+  [BaseColors.Cyan]: "#06b6d4",
+  [BaseColors.Sky]: "#0ea5e9",
+  [BaseColors.Blue]: "#3b82f6",
+  [BaseColors.Indigo]: "#6366f1",
+  [BaseColors.Violet]: "#8b5cf6",
+  [BaseColors.Purple]: "#a855f7",
+  [BaseColors.Fuchsia]: "#d946ef",
+  [BaseColors.Pink]: "#ec4899",
+  [BaseColors.Rose]: "#f43f5e",
+  [BaseColors.Black]: "#000000",
+  [BaseColors.White]: "#ffffff",
+};

package/src/lib/index.ts

@@ -0,0 +1,10 @@
+export * from "./hexColors";
+export * from "./colorClassNames";
+export * from "./inputTypes";
+export * from "./constants";
+export * from "./shape";
+export * from "./sizing";
+export * from "./spacing";
+export * from "./font";
+export * from "./theme";
+export * from "./utils";

package/src/lib/inputTypes.ts

@@ -0,0 +1,62 @@
+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/shape.ts

@@ -0,0 +1,75 @@
+export const borderRadius = {
+  none: {
+    left: "rounded-l-none",
+    top: "rounded-t-none",
+    right: "rounded-r-none",
+    bottom: "rounded-b-none",
+    all: "rounded-none",
+  },
+  sm: {
+    left: "rounded-l",
+    top: "rounded-t",
+    right: "rounded-r",
+    bottom: "rounded-b",
+    all: "rounded",
+  },
+  md: {
+    left: "rounded-l-md",
+    top: "rounded-t-md",
+    right: "rounded-r-md",
+    bottom: "rounded-b-md",
+    all: "rounded-md",
+  },
+  lg: {
+    left: "rounded-l-lg",
+    top: "rounded-t-lg",
+    right: "rounded-r-lg",
+    bottom: "rounded-b-lg",
+    all: "rounded-lg",
+  },
+  full: {
+    left: "rounded-l-full",
+    top: "rounded-t-full",
+    right: "rounded-r-full",
+    bottom: "rounded-b-full",
+    all: "rounded-full",
+  },
+};
+
+export const boxShadow = {
+  none: "shadow-none",
+  sm: "shadow-sm",
+  md: "shadow",
+  lg: "shadow-lg",
+};
+
+export const border = {
+  none: {
+    left: "border-l-0",
+    top: "border-t-0",
+    right: "border-r-0",
+    bottom: "border-b-0",
+    all: "border-0",
+  },
+  sm: {
+    left: "border-l",
+    top: "border-t",
+    right: "border-r",
+    bottom: "border-b",
+    all: "border",
+  },
+  md: {
+    left: "border-l-2",
+    top: "border-t-2",
+    right: "border-r-2",
+    bottom: "border-b-2",
+    all: "border-2",
+  },
+  lg: {
+    left: "border-l-4",
+    top: "border-t-4",
+    right: "border-r-4",
+    bottom: "border-b-4",
+    all: "border-4",
+  },
+};

package/src/lib/sizing.ts

@@ -0,0 +1,47 @@
+export type Sizing = {
+  height: string;
+  width: string;
+};
+
+export const sizing = {
+  none: {
+    height: "h-0",
+    width: "w-0",
+  },
+  threeXs: {
+    height: "h-0.5",
+    width: "w-0.5",
+  },
+  twoXs: {
+    height: "h-1",
+    width: "w-1",
+  },
+  xs: {
+    height: "h-2",
+    width: "w-2",
+  },
+  sm: {
+    height: "h-3",
+    width: "w-3",
+  },
+  md: {
+    height: "h-4",
+    width: "w-4",
+  },
+  lg: {
+    height: "h-5",
+    width: "w-5",
+  },
+  xl: {
+    height: "h-6",
+    width: "w-6",
+  },
+  twoXl: {
+    height: "h-7",
+    width: "w-7",
+  },
+  threeXl: {
+    height: "h-9",
+    width: "w-9",
+  },
+};

package/src/lib/spacing.ts

@@ -0,0 +1,264 @@
+export const spacing = {
+  none: {
+    paddingLeft: "pl-0",
+    paddingTop: "pt-0",
+    paddingRight: "pr-0",
+    paddingBottom: "pb-0",
+    paddingX: "px-0",
+    paddingY: "py-0",
+    paddingAll: "p-0",
+    marginLeft: "ml-0",
+    marginTop: "mt-0",
+    marginRight: "mr-0",
+    marginBottom: "mb-0",
+    negativeMarginLeft: "-ml-0",
+    negativeMarginRight: "-mr-0",
+    negativeMarginTop: "-mt-0",
+    negativeMarginBottom: "-mb-0",
+    left: "left-0",
+    right: "right-0",
+    top: "top-0",
+    bottom: "bottom-0",
+    spaceX: "space-x-0",
+  },
+  px: {
+    paddingLeft: "pl-px",
+    paddingTop: "pt-px",
+    paddingRight: "pr-px",
+    paddingBottom: "pb-px",
+    paddingX: "px-px",
+    paddingY: "py-px",
+    paddingAll: "p-px",
+    marginLeft: "ml-px",
+    marginTop: "mt-px",
+    marginRight: "mr-px",
+    marginBottom: "mb-px",
+    negativeMarginLeft: "-ml-px",
+    negativeMarginRight: "-mr-px",
+    negativeMarginTop: "-mt-px",
+    negativeMarginBottom: "-mb-px",
+    left: "left-px",
+    right: "right-px",
+    top: "top-px",
+    bottom: "bottom-px",
+    spaceX: "space-x-px",
+  },
+  threeXs: {
+    paddingLeft: "pl-0.5",
+    paddingTop: "pt-0.5",
+    paddingRight: "pr-0.5",
+    paddingBottom: "pb-0.5",
+    paddingX: "px-0.5",
+    paddingY: "py-0.5",
+    paddingAll: "p-0.5",
+    marginLeft: "ml-0.5",
+    marginTop: "mt-0.5",
+    marginRight: "mr-0.5",
+    marginBottom: "mb-0.5",
+    negativeMarginLeft: "-ml-0.5",
+    negativeMarginRight: "-mr-0.5",
+    negativeMarginTop: "-mt-0.5",
+    negativeMarginBottom: "-mb-0.5",
+    left: "left-0.5",
+    right: "right-0.5",
+    top: "top-0.5",
+    bottom: "bottom-0.5",
+    spaceX: "space-x-0.5",
+  },
+  twoXs: {
+    paddingLeft: "pl-1",
+    paddingTop: "pt-1",
+    paddingRight: "pr-1",
+    paddingBottom: "pb-1",
+    paddingX: "px-1",
+    paddingY: "py-1",
+    paddingAll: "p-1",
+    marginLeft: "ml-1",
+    marginTop: "mt-1",
+    marginRight: "mr-1",
+    marginBottom: "mb-1",
+    negativeMarginLeft: "-ml-1",
+    negativeMarginRight: "-mr-1",
+    left: "left-1",
+    right: "right-1",
+    top: "top-1",
+    bottom: "bottom-1",
+    spaceX: "space-x-1",
+  },
+  xs: {
+    paddingLeft: "pl-1.5",
+    paddingTop: "pt-1.5",
+    paddingRight: "pr-1.5",
+    paddingBottom: "pb-1.5",
+    paddingX: "px-1.5",
+    paddingY: "py-1.5",
+    paddingAll: "p-1.5",
+    marginLeft: "ml-1.5",
+    marginTop: "mt-1.5",
+    marginRight: "mr-1.5",
+    marginBottom: "mb-1.5",
+    negativeMarginLeft: "-ml-1.5",
+    negativeMarginRight: "-mr-1.5",
+    negativeMarginTop: "-mt-1.5",
+    negativeMarginBottom: "-mb-1.5",
+    left: "left-1.5",
+    right: "right-1.5",
+    top: "top-1.5",
+    bottom: "bottom-1.5",
+    spaceX: "space-x-1.5",
+  },
+  sm: {
+    paddingLeft: "pl-2",
+    paddingTop: "pt-2",
+    paddingRight: "pr-2",
+    paddingBottom: "pb-2",
+    paddingX: "px-2",
+    paddingY: "py-2",
+    paddingAll: "p-2",
+    marginLeft: "ml-2",
+    marginTop: "mt-2",
+    marginRight: "mr-2",
+    marginBottom: "mb-2",
+    negativeMarginLeft: "-ml-2",
+    negativeMarginRight: "-mr-2",
+    negativeMarginTop: "-mt-2",
+    negativeMarginBottom: "-mb-2",
+    left: "left-2",
+    right: "right-2",
+    top: "left-2",
+    bottom: "bottom-2",
+    spaceX: "space-x-2",
+  },
+  md: {
+    paddingLeft: "pl-2.5",
+    paddingTop: "pt-2.5",
+    paddingRight: "pr-2.5",
+    paddingBottom: "pb-2.5",
+    paddingX: "px-2.5",
+    paddingY: "py-2.5",
+    paddingAll: "p-2.5",
+    marginLeft: "ml-2.5",
+    marginTop: "mt-2.5",
+    marginRight: "mr-2.5",
+    marginBottom: "mb-2.5",
+    negativeMarginLeft: "-ml-2.5",
+    negativeMarginRight: "-mr-2.5",
+    negativeMarginTop: "-mt-2.5",
+    negativeMarginBottom: "-mb-2.5",
+    left: "left-2.5",
+    right: "right-2.5",
+    top: "top-2.5",
+    bottom: "bottom-2.5",
+    spaceX: "space-x-2.5",
+  },
+  lg: {
+    paddingLeft: "pl-3",
+    paddingTop: "pt-3",
+    paddingRight: "pr-3",
+    paddingBottom: "pb-3",
+    paddingX: "px-3",
+    paddingY: "py-3",
+    paddingAll: "p-3",
+    marginLeft: "ml-3",
+    marginTop: "mt-3",
+    marginRight: "mr-3",
+    marginBottom: "mb-3",
+    negativeMarginLeft: "-ml-3",
+    negativeMarginRight: "-mr-3",
+    negativeMarginTop: "-mt-3",
+    negativeMarginBottom: "-mb-3",
+    left: "left-3",
+    right: "right-3",
+    top: "top-3",
+    bottom: "bottom-3",
+    spaceX: "space-x-3",
+  },
+  xl: {
+    paddingLeft: "pl-3.5",
+    paddingTop: "pt-3.5",
+    paddingRight: "pr-3.5",
+    paddingBottom: "pb-3.5",
+    paddingX: "px-3.5",
+    paddingY: "py-3.5",
+    paddingAll: "p-3.5",
+    marginLeft: "ml-3.5",
+    marginTop: "mt-3.5",
+    marginRight: "mr-3.5",
+    marginBottom: "mb-3.5",
+    negativeMarginLeft: "-ml-3.5",
+    negativeMarginRight: "-mr-3.5",
+    negativeMarginTop: "-mt-3.5",
+    negativeMarginBottom: "-mb-3.5",
+    left: "left-3.5",
+    right: "right-3.5",
+    top: "top-3.5",
+    bottom: "bottom-3.5",
+    spaceX: "space-x-3.5",
+  },
+  twoXl: {
+    paddingLeft: "pl-4",
+    paddingTop: "pt-4",
+    paddingRight: "pr-4",
+    paddingBottom: "pb-4",
+    paddingX: "px-4",
+    paddingY: "py-4",
+    paddingAll: "p-4",
+    marginLeft: "ml-4",
+    marginTop: "mt-4",
+    marginRight: "mr-4",
+    marginBottom: "mb-4",
+    negativeMarginLeft: "-ml-4",
+    negativeMarginRight: "-mr-4",
+    negativeMarginTop: "-mt-4",
+    negativeMarginBottom: "-mb-4",
+    left: "left-4",
+    right: "right-4",
+    top: "top-4",
+    bottom: "bottom-4",
+    spaceX: "space-x-4",
+  },
+  threeXl: {
+    paddingLeft: "pl-6",
+    paddingTop: "pt-6",
+    paddingRight: "pr-6",
+    paddingBottom: "pb-6",
+    paddingX: "px-6",
+    paddingY: "py-6",
+    paddingAll: "p-6",
+    marginLeft: "ml-6",
+    marginTop: "mt-6",
+    marginRight: "mr-6",
+    marginBottom: "mb-6",
+    negativeMarginLeft: "-ml-6",
+    negativeMarginRight: "-mr-6",
+    negativeMarginTop: "-mt-6",
+    negativeMarginBottom: "-mb-6",
+    left: "left-6",
+    right: "right-6",
+    top: "top-6",
+    bottom: "bottom-6",
+    spaceX: "space-x-6",
+  },
+  fourXl: {
+    paddingLeft: "pl-8",
+    paddingTop: "pt-8",
+    paddingRight: "pr-8",
+    paddingBottom: "pb-8",
+    paddingX: "px-8",
+    paddingY: "py-8",
+    paddingAll: "p-8",
+    marginLeft: "ml-8",
+    marginTop: "mt-8",
+    marginRight: "mr-8",
+    marginBottom: "mb-8",
+    negativeMarginLeft: "-ml-8",
+    negativeMarginRight: "-mr-8",
+    negativeMarginTop: "-mt-8",
+    negativeMarginBottom: "-mb-8",
+    left: "left-8",
+    right: "right-8",
+    top: "top-8",
+    bottom: "bottom-8",
+    spaceX: "space-x-8",
+  },
+};

package/src/lib/theme.ts

@@ -0,0 +1,49 @@
+import { BaseColors } from "./constants";
+import { Color } from "./inputTypes";
+
+export const DEFAULT_COLOR: Color = "gray";
+export const WHITE = "white";
+export const TRANSPARENT = "transparent";
+
+export const colorPalette = {
+  canvasBackground: 50,
+  lightBackground: 100,
+  background: 500,
+  darkBackground: 600,
+  darkestBackground: 800,
+  lightBorder: 200,
+  border: 500,
+  darkBorder: 700,
+  lightRing: 200,
+  ring: 300,
+  lightText: 400,
+  text: 500,
+  darkText: 700,
+  darkestText: 900,
+  icon: 500,
+};
+
+export const themeColorRange: Color[] = [
+  BaseColors.Cyan,
+  BaseColors.Sky,
+  BaseColors.Blue,
+  BaseColors.Indigo,
+  BaseColors.Violet,
+  BaseColors.Purple,
+  BaseColors.Fuchsia,
+  BaseColors.Slate,
+  BaseColors.Gray,
+  BaseColors.Zinc,
+  BaseColors.Neutral,
+  BaseColors.Stone,
+  BaseColors.Red,
+  BaseColors.Orange,
+  BaseColors.Amber,
+  BaseColors.Yellow,
+  BaseColors.Lime,
+  BaseColors.Green,
+  BaseColors.Emerald,
+  BaseColors.Teal,
+  BaseColors.Pink,
+  BaseColors.Rose,
+];

package/src/lib/utils.tsx

@@ -0,0 +1,81 @@
+import { DeltaTypes } from "./constants";
+import { Color, ValueFormatter } from "./inputTypes";
+import { colorClassNames } from "./colorClassNames";
+
+export const mapInputsToDeltaType = (deltaType: string, isIncreasePositive: boolean): string => {
+  if (isIncreasePositive || deltaType === DeltaTypes.Unchanged) {
+    return deltaType;
+  }
+  switch (deltaType) {
+    case DeltaTypes.Increase:
+      return DeltaTypes.Decrease;
+    case DeltaTypes.ModerateIncrease:
+      return DeltaTypes.ModerateDecrease;
+    case DeltaTypes.Decrease:
+      return DeltaTypes.Increase;
+    case DeltaTypes.ModerateDecrease:
+      return DeltaTypes.ModerateIncrease;
+  }
+  return "";
+};
+
+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;
+      }
+    });
+  };
+}
+
+export function makeClassName(componentName: string) {
+  return (className: string) => {
+    return `tremor-${componentName}-${className}`;
+  };
+}
+
+export function getColorClassNames(
+  color: Color | "white" | "black" | "transparent",
+  shade?: number,
+) {
+  if (colorClassNames[color] === undefined) return colorClassNames["gray"][500];
+  if (color === "white" || color === "black" || color === "transparent" || !shade) {
+    return colorClassNames[color][500];
+  }
+  return colorClassNames[color][shade];
+}

package/src/styles.css

@@ -0,0 +1,5 @@
+/* src/styles.css */
+
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';