@xola/ui-kit 3.0.8 → 3.4.1

package/build/components/Charts/HistogramOptions.d.ts

@@ -0,0 +1,192 @@
+/**
+ * This is the base Histogram chart. A histogram can be a line, column or a bar view. This is the master file
+ * for all defaults for a histogram. This should ideally be extended by business-specific implementations like
+ * revenue graph, turnover etc.
+ */
+export declare const HistogramOptions: {
+    global: {
+        useUTC: boolean;
+    };
+    chart: {
+        spacingLeft: number;
+    };
+    colors: (string | {
+        lighter: string;
+        light: string;
+        DEFAULT: string;
+        dark: string;
+        darker: string;
+    })[];
+    xAxis: {
+        title: {
+            style: {
+                color: string;
+                fontSize: string;
+                fontWeight: number;
+                cursor: string;
+                textOverflow: string;
+                fontFamily: string[];
+            } & {
+                color: string;
+            };
+        };
+        labels: {
+            style: {
+                color: string;
+                fontSize: string;
+                fontWeight: number;
+                cursor: string;
+                textOverflow: string;
+                fontFamily: string[];
+            };
+        };
+    };
+    yAxis: {
+        title: {
+            style: {
+                color: string;
+                fontSize: string;
+                fontWeight: number;
+                cursor: string;
+                textOverflow: string;
+                fontFamily: string[];
+            } & {
+                color: string;
+            };
+        };
+        labels: {
+            style: {
+                color: string;
+                fontSize: string;
+                fontWeight: number;
+                cursor: string;
+                textOverflow: string;
+                fontFamily: string[];
+            };
+        };
+    };
+    tooltip: {
+        enabled: boolean;
+        backgroundColor: string;
+        borderColor: string;
+        borderRadius: number;
+        borderWidth: number;
+        valueDecimals: number;
+        crosshairs: boolean[];
+        shadow: boolean;
+        useHTML: boolean;
+        style: {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+            cursor: string;
+            textOverflow: string;
+            fontFamily: string[];
+        } & {
+            opacity: number;
+            color: string;
+        };
+    };
+    title: {
+        text: string;
+        style: {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+            cursor: string;
+            textOverflow: string;
+            fontFamily: string[];
+        } & {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+        };
+    };
+    plotOptions: {
+        series: {
+            marker: {
+                enabled: boolean;
+                states: {
+                    hover: {
+                        enabled: boolean;
+                        lineWidth: number;
+                        radius: number;
+                    };
+                };
+            };
+        };
+    };
+    legend: {
+        enabled: boolean;
+        itemStyle: {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+            cursor: string;
+            textOverflow: string;
+            fontFamily: string[];
+        };
+        itemMarginBottom: number;
+        align: string;
+        layout: string;
+        borderWidth: number;
+    };
+    credits: {
+        enabled: boolean;
+    };
+} & {
+    chart: {
+        type: string;
+    };
+    title: {
+        align: string;
+        margin: number;
+        verticalAlign: string;
+    };
+    xAxis: {
+        type: string;
+        step: number;
+        minTickInterval: number;
+        lineColor: string;
+        lineWidth: number;
+        gridLineWidth: string;
+        gridLineColor: string;
+        gridLineDashStyle: string;
+    };
+    yAxis: {
+        lineColor: string;
+        lineWidth: number;
+        gridLineWidth: string;
+        gridLineColor: string;
+        gridLineDashStyle: string;
+    };
+    plotOptions: {
+        series: {
+            marker: {
+                enabled: boolean;
+                lineWidth: number;
+                radius: number;
+                states: {
+                    hover: {
+                        enabled: boolean;
+                        lineWidth: number;
+                        radius: number;
+                    };
+                };
+            };
+        };
+    };
+    legend: {
+        enabled: boolean;
+        itemStyle: {
+            fontSize: string;
+            color: string;
+            textTransform: string;
+            fontFamily: string[];
+        };
+        itemMarginBottom: number;
+        align: string;
+        layout: string;
+        borderWidth: number;
+    };
+};

package/build/components/Charts/HistogramOptions.js

@@ -0,0 +1,69 @@
+import { merge as i } from "lodash-es";
+import { theme as e } from "../../theme.js";
+import { BaseChartOptions as t } from "./BaseChartOptions.js";
+const n = i({}, t, {
+  chart: {
+    type: "line"
+  },
+  title: {
+    align: "left",
+    margin: 20,
+    verticalAlign: "top"
+  },
+  xAxis: {
+    type: "datetime",
+    // This will convert time into proper dates on the axis
+    step: 1,
+    minTickInterval: 24 * 3600 * 1e3,
+    lineColor: e.colors.gray.darker,
+    lineWidth: 1,
+    gridLineWidth: "1",
+    gridLineColor: "#DEDEDE",
+    gridLineDashStyle: "dot"
+  },
+  yAxis: {
+    lineColor: e.colors.gray.darker,
+    lineWidth: 1,
+    gridLineWidth: "1",
+    gridLineColor: "#DEDEDE",
+    gridLineDashStyle: "dot"
+  },
+  plotOptions: {
+    series: {
+      // Markers are not shown by default, except when you hover
+      marker: {
+        enabled: !0,
+        lineWidth: 1,
+        radius: 3,
+        states: {
+          hover: {
+            enabled: !0,
+            // Width and radius of the marker when you hover
+            lineWidth: 1,
+            radius: 4
+          }
+        }
+      }
+    }
+  },
+  legend: {
+    // By default legend is disabled
+    enabled: !1,
+    // The style applied to each item in the legend
+    itemStyle: {
+      fontSize: "14px",
+      color: "#666666",
+      textTransform: "capitalize",
+      fontFamily: e.extend.fontFamily.sans
+    },
+    itemMarginBottom: 5,
+    align: "center",
+    // Center it in the chart canvas
+    layout: "vertical",
+    // Legend items are shown as a list
+    borderWidth: 0
+  }
+});
+export {
+  n as HistogramOptions
+};

package/build/components/Charts/PieOptions.d.ts

@@ -0,0 +1,177 @@
+export declare const PieOptions: {
+    global: {
+        useUTC: boolean;
+    };
+    chart: {
+        spacingLeft: number;
+    };
+    colors: (string | {
+        lighter: string;
+        light: string;
+        DEFAULT: string;
+        dark: string;
+        darker: string;
+    })[];
+    xAxis: {
+        title: {
+            style: {
+                color: string;
+                fontSize: string;
+                fontWeight: number;
+                cursor: string;
+                textOverflow: string;
+                fontFamily: string[];
+            } & {
+                color: string;
+            };
+        };
+        labels: {
+            style: {
+                color: string;
+                fontSize: string;
+                fontWeight: number;
+                cursor: string;
+                textOverflow: string;
+                fontFamily: string[];
+            };
+        };
+    };
+    yAxis: {
+        title: {
+            style: {
+                color: string;
+                fontSize: string;
+                fontWeight: number;
+                cursor: string;
+                textOverflow: string;
+                fontFamily: string[];
+            } & {
+                color: string;
+            };
+        };
+        labels: {
+            style: {
+                color: string;
+                fontSize: string;
+                fontWeight: number;
+                cursor: string;
+                textOverflow: string;
+                fontFamily: string[];
+            };
+        };
+    };
+    tooltip: {
+        enabled: boolean;
+        backgroundColor: string;
+        borderColor: string;
+        borderRadius: number;
+        borderWidth: number;
+        valueDecimals: number;
+        crosshairs: boolean[];
+        shadow: boolean;
+        useHTML: boolean;
+        style: {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+            cursor: string;
+            textOverflow: string;
+            fontFamily: string[];
+        } & {
+            opacity: number;
+            color: string;
+        };
+    };
+    title: {
+        text: string;
+        style: {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+            cursor: string;
+            textOverflow: string;
+            fontFamily: string[];
+        } & {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+        };
+    };
+    plotOptions: {
+        series: {
+            marker: {
+                enabled: boolean;
+                states: {
+                    hover: {
+                        enabled: boolean;
+                        lineWidth: number;
+                        radius: number;
+                    };
+                };
+            };
+        };
+    };
+    legend: {
+        enabled: boolean;
+        itemStyle: {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+            cursor: string;
+            textOverflow: string;
+            fontFamily: string[];
+        };
+        itemMarginBottom: number;
+        align: string;
+        layout: string;
+        borderWidth: number;
+    };
+    credits: {
+        enabled: boolean;
+    };
+} & {
+    chart: {
+        type: string;
+    };
+    tooltip: {
+        pointFormat: string;
+    };
+    plotOptions: {
+        pie: {
+            size: number;
+            center: number[];
+            allowPointSelect: boolean;
+            cursor: string;
+            dataLabels: {
+                enabled: boolean;
+            };
+            showInLegend: boolean;
+            innerSize: number;
+        };
+    };
+    legend: {
+        enabled: boolean;
+        maxHeight: number;
+        width: number;
+        navigation: {
+            activeColor: string;
+            animation: string;
+            style: string[];
+        };
+        padding: number;
+        backgroundColor: string;
+        itemMarginTop: number;
+        itemMarginBottom: number;
+        itemStyle: string[];
+        style: {
+            overflow: string;
+        };
+        align: string;
+        layout: string;
+        verticalAlign: string;
+        y: number;
+    };
+    credits: {
+        enabled: boolean;
+    };
+};

package/build/components/Charts/PieOptions.js

@@ -0,0 +1,55 @@
+import { merge as t } from "lodash-es";
+import { theme as e } from "../../theme.js";
+import { BaseChartOptions as o } from "./BaseChartOptions.js";
+const a = t({}, o, {
+  chart: {
+    type: "pie"
+  },
+  tooltip: {
+    pointFormat: "<b>{point.percentage:.1f}%</b>"
+  },
+  plotOptions: {
+    pie: {
+      size: 180,
+      center: [80, 90],
+      allowPointSelect: !0,
+      cursor: "pointer",
+      dataLabels: {
+        enabled: !1
+      },
+      showInLegend: !0,
+      innerSize: 110
+      // Donuts. Krispy Kreme 4tw
+    }
+  },
+  legend: {
+    enabled: !0,
+    maxHeight: 120,
+    width: 220,
+    navigation: {
+      // This is the navigation for the legend. A scrollable list
+      activeColor: e.colors.gray.darker,
+      animation: "true",
+      style: e.extend.fontFamily.sans
+    },
+    padding: 5,
+    backgroundColor: e.colors.white,
+    // For debugging
+    itemMarginTop: 1,
+    itemMarginBottom: 3,
+    itemStyle: e.extend.fontFamily.sans,
+    style: { overflow: "hidden" },
+    align: "left",
+    layout: "horizontal",
+    verticalAlign: "proximate",
+    y: 240
+    // To get the legend to show right below the pie
+  },
+  credits: {
+    // Don't show the 'Powered by Highcharts' text
+    enabled: !1
+  }
+});
+export {
+  a as PieOptions
+};

package/build/components/Counter.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+export interface CounterProps extends React.HTMLAttributes<HTMLSpanElement> {
+    className?: string;
+}
+export declare const Counter: ({ className, ...rest }: CounterProps) => React.JSX.Element;

package/build/components/Counter.js

@@ -0,0 +1,16 @@
+import { jsx as t } from "react/jsx-runtime";
+import r from "clsx";
+const s = ({ className: e, ...n }) => /* @__PURE__ */ t(
+  "span",
+  {
+    className: r(
+      "ui-counter",
+      "inline-flex items-center justify-center rounded-full bg-danger-dark px-2 py-1 font-semibold leading-none text-white",
+      e
+    ),
+    ...n
+  }
+);
+export {
+  s as Counter
+};

package/build/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+declare const variants: {
+    readonly single: "single";
+    readonly range: "range";
+};
+type DatePickerVariant = keyof typeof variants;
+type DateValue = Date | {
+    from?: Date;
+    to?: Date;
+};
+type RangeKey = "day" | "week" | "month" | "quarter" | "year";
+export interface DatePickerProps {
+    [key: string]: any;
+    variant?: DatePickerVariant;
+    value?: DateValue;
+    selectedDays?: DateValue;
+    upcomingDates?: Date[];
+    disabledDays?: ((date: Date) => boolean) | Date[];
+    loadingDays?: ((date: Date) => boolean) | Date[];
+    shouldShowYearPicker?: boolean;
+    shouldShowMonthSelector?: boolean;
+    shouldShowRelativeRanges?: boolean;
+    isFutureDatesAllowed?: boolean;
+    modifiers?: Record<string, any>;
+    ranges?: RangeKey[];
+    components?: {
+        Footer?: React.ComponentType;
+    };
+    locale?: string;
+    timezoneName?: string;
+    getDayContent?: (day: number, date: Date) => React.ReactNode;
+    getTooltip?: (date: Date) => React.ReactNode;
+    onChange: (value: any, options?: any, event?: any) => void;
+    onMonthChange?: (month: Date) => void;
+    onSubmitDateRange?: () => void;
+}
+/**
+ * Figma Design link: https://www.figma.com/file/tL2vrxuBIzujkDfYvVjUhs/%F0%9F%9B%A0-Xola-DS-Desktop-Master-%F0%9F%9B%A0?node-id=2689%3A101580
+ */
+export declare const DatePicker: ({ variant, value, selectedDays, upcomingDates, disabledDays, loadingDays, shouldShowYearPicker, shouldShowMonthSelector, shouldShowRelativeRanges, isFutureDatesAllowed, modifiers, ranges, components, locale, timezoneName, getDayContent, getTooltip, onChange, onMonthChange, onSubmitDateRange, month: externalMonth, ...rest }: DatePickerProps) => React.JSX.Element;
+export {};

package/build/components/DatePicker/DatePicker.helpers.d.ts

@@ -0,0 +1,17 @@
+import { Locale } from 'date-fns/locale';
+export type LocaleCode = keyof typeof locales;
+export type LocalizationProps = {
+    locale: Locale;
+};
+declare const locales: {
+    en: Locale;
+    "en-US": Locale;
+    "en-GB": Locale;
+    es: Locale;
+    "es-ES": Locale;
+    "es-MX": Locale;
+    fr: Locale;
+    de: Locale;
+};
+export declare const getLocalizationProps: (localeCode: LocaleCode) => Promise<Partial<LocalizationProps>>;
+export {};

package/build/components/DatePicker/DatePicker.helpers.js

@@ -0,0 +1,22 @@
+import { de as n, fr as t, es as e, enGB as a, enUS as o } from "date-fns/locale";
+const l = {
+  en: o,
+  "en-US": o,
+  "en-GB": a,
+  es: e,
+  "es-ES": e,
+  "es-MX": e,
+  fr: t,
+  de: n
+}, i = async (c) => {
+  try {
+    return {
+      locale: l[c]
+    };
+  } catch (r) {
+    throw console.error("Error: React Day Picker localization error", r), r;
+  }
+};
+export {
+  i as getLocalizationProps
+};