@quillsql/react 2.11.16 → 2.11.17

package/dist/cjs/Dashboard.js

@@ -3,13 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DashboardFilter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable no-unused-vars */
 const react_1 = require("react");
 const Chart_1 = __importDefault(require("./Chart"));
 const dateRangePickerUtils_1 = require("./DateRangePicker/dateRangePickerUtils");
 const Context_1 = require("./Context");
-const assets_1 = require("./assets");
 const useDashboard_1 = require("./hooks/useDashboard");
 const crypto_1 = require("./utils/crypto");
 const DashboardSectionContainer_1 = __importDefault(require("./components/Dashboard/DashboardSectionContainer"));
@@ -21,138 +20,8 @@ const styles_1 = require("./utils/styles");
 const dashboard_1 = require("./utils/dashboard");
 const QuillDateRangePicker_1 = require("./DateRangePicker/QuillDateRangePicker");
 const DataLoader_1 = __importDefault(require("./components/Dashboard/DataLoader"));
-const QuillSelect_1 = require("./components/QuillSelect");
-const ChartSkeleton_1 = __importDefault(require("./components/Chart/ChartSkeleton"));
-function DashboardFilter({ filter, onChangeFilter, SelectComponent = QuillSelect_1.QuillSelectComponent, DateRangePickerComponent, theme, }) {
-    const { comparisonRange, setComparisonRange } = (0, Context_1.useComparisonRange)();
-    const { setDateFilter } = (0, Context_1.useDateFilter)();
-    const [filterValue, setFilterValue] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        if (filter.filterType === 'string') {
-            setFilterValue(filter.selectedValue);
-        }
-        if (filter.filterType == 'date_range') {
-            setDateFilter(filter.preset.label);
-            if (filter?.comparisonRange?.value) {
-                const newComparisonRange = dateRangePickerUtils_1.COMPARISON_OPTIONS.find((option) => {
-                    return option.value === filter.comparisonRange.value;
-                });
-                setComparisonRange(newComparisonRange);
-            }
-            else {
-                setComparisonRange(null);
-            }
-        }
-    }, [filter]);
-    if (filter.filterType === 'string') {
-        return ((0, jsx_runtime_1.jsx)(SelectComponent, { theme: theme, label: filter.label, value: filterValue, onChange: (e) => {
-                onChangeFilter(filter, e);
-            }, options: [
-                ...filter.options.map((elem) => {
-                    return {
-                        label: elem[filter.labelField],
-                        value: elem[filter.field],
-                    };
-                }),
-            ] }));
-    }
-    if (filter.filterType == 'date_range') {
-        return ((0, jsx_runtime_1.jsxs)("div", { style: {
-                display: 'flex',
-                flexDirection: 'row',
-                alignItems: 'flex-end',
-            }, children: [(0, jsx_runtime_1.jsx)(DateRangePickerComponent, { label: filter.label, dateRange: { startDate: filter.startDate, endDate: filter.endDate }, preset: filter.preset.label, onChangeDateRange: (value) => {
-                        onChangeFilter(filter, {
-                            startDate: value.startDate,
-                            endDate: value.endDate,
-                        });
-                    }, onChangePreset: (value) => {
-                        onChangeFilter(filter, { preset: value });
-                    }, presetOptions: filter.options.map((option) => {
-                        return { label: option.label, value: option.label };
-                    }) }), comparisonRange && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                        }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-                                    paddingLeft: 16,
-                                    paddingRight: 12,
-                                    color: theme?.secondaryTextColor,
-                                    fontFamily: theme?.fontFamily,
-                                    fontSize: 14,
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    flex: 1,
-                                    minWidth: 80,
-                                    justifyContent: 'center',
-                                }, children: "compared to" }), (0, jsx_runtime_1.jsx)(SelectComponent, { theme: theme, value: comparisonRange.value, onChange: (e) => {
-                                    onChangeFilter(filter, null, dateRangePickerUtils_1.COMPARISON_OPTIONS.find((option) => {
-                                        return option.value === e;
-                                    }));
-                                }, options: dateRangePickerUtils_1.COMPARISON_OPTIONS.map((compareOption) => {
-                                    return {
-                                        value: compareOption.value,
-                                        label: compareOption.text,
-                                    };
-                                }) })] }) }))] }));
-    }
-    return null;
-}
-exports.DashboardFilter = DashboardFilter;
-const QuillDropdownComponent = ({ onChange, value, label, options, }) => {
-    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
-    const handleOnChange = (0, react_1.useCallback)((event) => {
-        onChange(event.target.value);
-    }, [onChange]);
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [label && ((0, jsx_runtime_1.jsx)("div", { style: {
-                    marginBottom: 6,
-                    fontWeight: theme.labelFontWeight || '600',
-                    color: theme.secondaryTextColor,
-                    fontFamily: theme.fontFamily,
-                    fontSize: 14,
-                }, children: label })), (0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', height: 38 }, children: [(0, jsx_runtime_1.jsxs)("select", { onChange: handleOnChange, value: value ?? '', id: 'reportbuilderdropdown', 
-                        // defaultValue="Select"
-                        style: {
-                            width: '100%',
-                            WebkitAppearance: 'none',
-                            minWidth: 230,
-                            outline: 'none',
-                            textAlign: 'left',
-                            whiteSpace: 'nowrap',
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            borderRadius: 6,
-                            paddingLeft: 12,
-                            paddingRight: 12,
-                            height: 38,
-                            borderWidth: theme.borderWidth,
-                            borderColor: theme.borderColor,
-                            background: theme.backgroundColor,
-                            color: theme.primaryTextColor,
-                            boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
-                            fontFamily: theme.fontFamily,
-                            fontSize: 14,
-                            fontWeight: 500,
-                            boxSizing: 'border-box',
-                        }, children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "Select" }), options.map((option, index) => ((0, jsx_runtime_1.jsx)("option", { value: option.value, children: option.label }, option.label + index)))] }), (0, jsx_runtime_1.jsx)(assets_1.ArrowDownHeadIcon, { style: {
-                            height: '20px',
-                            width: '20px',
-                            flex: 'none',
-                            position: 'absolute',
-                            right: 8,
-                            top: 9,
-                            color: theme?.secondaryTextColor,
-                        }, "aria-hidden": "true" })] })] }));
-};
-const MemoizedDropdown = (0, react_1.memo)(QuillDropdownComponent);
-const areEqual = (prevProps, nextProps) => {
-    // This function returns true if passing nextProps to render would return
-    // the same result as passing prevProps to render, otherwise it returns false
-    return (prevProps.dateRange.startDate === nextProps.dateRange.startDate &&
-        prevProps.dateRange.endDate === nextProps.dateRange.endDate);
-};
-const MemoizedDateRangePicker = (0, react_1.memo)(QuillDateRangePicker_1.QuillDateRangePicker, areEqual);
-const QuillEmptyDashboardComponent = () => (0, jsx_runtime_1.jsx)("div", {});
+const UiComponents_1 = require("./components/UiComponents");
+const DashboardFilter_1 = require("./components/Dashboard/DashboardFilter");
 const defaultChartContainerStyles = {
     display: 'flex',
     width: '100%',
@@ -160,10 +29,37 @@ const defaultChartContainerStyles = {
     height: 300,
 };
 /**
- * Quill Dashboard.
+ * ### Quill Dashboard
+ *
+ * Dynamically displays a filterable grid of charts, metrics, and tables with
+ * live data from your database. Once implemented, Quill lets you perform
+ * zero-downtime, zero-code updates to your dashboard views on an org-level as
+ * well as company-wide.
+ *
+ * @example
+ * ```js
+ * // Usage without custom components
+ * <Dashboard />
+ * ```
+ *
+ * @example
+ * ```js
+ * // You can also pass your own components
+ * <Dashboard
+ *   name="saved_reports"
+ *   SelectComponent={MySelect}
+ *   onClickDashboardItem={(item) => navigate(`/detail/${item.id}`)}
+ *   MetricComponent={MyMetric}
+ *   ChartComponent={MyChart}
+ *   TableComponent={MyTable}
+ *   containerStyle={{ backgroundColor: 'white', padding: '10px' }}
+ * />
+ * ```
+ *
+ * ### API Reference
+ * @see https://docs.quillsql.com/components/dashboard
  */
-function Dashboard({ name, containerStyle, chartContainerStyle = defaultChartContainerStyles, metricContainerStyle, maxColumnWidth, rowHeight, onClickDashboardItem, hideFilters, dateRangeFilterDisabled = false, SelectComponent, EmptyDashboardComponent = QuillEmptyDashboardComponent, DateRangePickerComponent, FilterButtonComponent, FilterModalComponent, onChangeLoading, MetricComponent = MetricComponent_1.default, ChartComponent = ChartComponent_1.default, TableComponent = TableComponent_1.default, SkeletonComponent = ChartSkeleton_1.default, DashboardSectionContainerComponent = DashboardSectionContainer_1.default, DashboardSectionComponent = DashboardSection_1.default, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, dashedComparison = false, singlePointStyle = 'dot', }) {
-    const { dateFilter } = (0, Context_1.useDateFilter)();
+function Dashboard({ name, SelectComponent = UiComponents_1.QuillDropdownComponent, EmptyDashboardComponent = UiComponents_1.QuillEmptyDashboardComponent, DateRangePickerComponent = QuillDateRangePicker_1.QuillDateRangePicker, MetricComponent = MetricComponent_1.default, ChartComponent = ChartComponent_1.default, TableComponent = TableComponent_1.default, DashboardSectionComponent = DashboardSection_1.default, DashboardSectionContainerComponent = DashboardSectionContainer_1.default, onClickDashboardItem, onChangeLoading, hideFilters, hideDateRangeFilter = false, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, comparisonLineStyle = 'solid', containerStyle, className, chartContainerStyle = defaultChartContainerStyles, }) {
     const { dispatch } = (0, react_1.useContext)(Context_1.DashboardContext);
     const { isLoading: isDataLoading, data, reload, } = (0, useDashboard_1.useDashboard)(name);
     const [dashboardSections, setDashboardSections] = (0, react_1.useState)(null);
@@ -424,16 +320,16 @@ function Dashboard({ name, containerStyle, chartContainerStyle = defaultChartCon
         return (0, jsx_runtime_1.jsx)(EmptyDashboardComponent, {});
     const sortByOrdering = (a, b) => {
         if (a.order === undefined && b.order === undefined)
-            return 0; // both items don't have the 'order' field
+            return 0;
         if (a.order === undefined)
-            return 1; // only 'a' doesn't have the 'order' field, place 'a' last
+            return 1;
         if (b.order === undefined)
-            return -1; // only 'b' doesn't have the 'order' field, place 'b' last
-        return a.order - b.order; // both items have the 'order' field, sort numerically
+            return -1;
+        return a.order - b.order;
     };
     const sortedFilters = Object.values(dashboardFilters)
         .sort((filter) => (filter.filterType === 'date_range' ? -1 : 1))
-        .filter((f) => !dateRangeFilterDisabled || f.filterType !== 'date_range');
+        .filter((f) => !hideDateRangeFilter || f.filterType !== 'date_range');
     const metrics = (section) => dashboardSections[section]
         .filter(({ chartType }) => chartType === 'metric')
         .sort(sortByOrdering);
@@ -443,7 +339,7 @@ function Dashboard({ name, containerStyle, chartContainerStyle = defaultChartCon
     const tables = (section) => dashboardSections[section]
         .filter(({ chartType }) => chartType === 'table')
         .sort(sortByOrdering);
-    return ((0, jsx_runtime_1.jsxs)("div", { ...(0, styles_1.styleToProps)(containerStyle), children: [!hideFilters && sortedFilters.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className, ...(0, styles_1.styleToProps)(containerStyle), children: [!hideFilters && sortedFilters.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
                     display: 'flex',
                     boxSizing: 'content-box',
                     flexDirection: 'row',
@@ -455,9 +351,7 @@ function Dashboard({ name, containerStyle, chartContainerStyle = defaultChartCon
                         flexDirection: 'row',
                         alignItems: 'center',
                         gap: 12,
-                    }, children: sortedFilters.map((filter, index) => ((0, jsx_runtime_1.jsx)(DashboardFilter, { filter: filter, onChangeFilter: updateFilter, theme: theme, SelectComponent: SelectComponent ? SelectComponent : MemoizedDropdown, DateRangePickerComponent: DateRangePickerComponent
-                            ? DateRangePickerComponent
-                            : MemoizedDateRangePicker }, index))) }) })), Object.keys(dashboardSections)
+                    }, children: sortedFilters.map((filter, index) => ((0, jsx_runtime_1.jsx)(DashboardFilter_1.DashboardFilter, { filter: filter, onChangeFilter: updateFilter, theme: theme, SelectComponent: SelectComponent, DateRangePickerComponent: DateRangePickerComponent }, index))) }) })), Object.keys(dashboardSections)
                 .sort(function (a, b) {
                 return a.length - b.length;
             })
@@ -471,16 +365,16 @@ function Dashboard({ name, containerStyle, chartContainerStyle = defaultChartCon
                                         textAlign: 'left',
                                         marginTop: 12,
                                     }, children: section })] })), metrics(section).length > 0 && ((0, jsx_runtime_1.jsx)(DashboardSectionComponent, { section: "metrics", children: metrics(section).map((item, index) => {
-                                return ((0, jsx_runtime_1.jsx)(DataLoader_1.default, { id: item._id, children: ({ isLoading, error }) => ((0, jsx_runtime_1.jsx)(MetricComponent, { theme: theme, error: error, isLoading: isLoading, dashboardItem: (0, dashboard_1.cleanDashboardItem)(dashboard[item._id] ?? item, dashboardFilters), onClickDashboardItem: onClickDashboardItem
+                                return ((0, jsx_runtime_1.jsx)(DataLoader_1.default, { id: item._id, children: ({ isLoading, error }) => ((0, jsx_runtime_1.jsx)(MetricComponent, { error: error, isLoading: isLoading, dashboardItem: (0, dashboard_1.cleanDashboardItem)(dashboard[item._id] ?? item, dashboardFilters), onClick: onClickDashboardItem
                                             ? () => handleOnClickDashboardItem(item)
-                                            : void null }, item.name + '' + index)) }, `${item.name}${index}`));
-                            }) })), charts(section).length > 0 && ((0, jsx_runtime_1.jsx)(DashboardSectionComponent, { section: "charts", children: charts(section).map((item, index) => ((0, jsx_runtime_1.jsx)(ChartComponent, { theme: theme, dashboardItem: (0, dashboard_1.cleanDashboardItem)(dashboard[item._id] ?? item, dashboardFilters), onClickDashboardItem: onClickDashboardItem
+                                            : undefined }, item.name + '' + index)) }, `${item.name}${index}`));
+                            }) })), charts(section).length > 0 && ((0, jsx_runtime_1.jsx)(DashboardSectionComponent, { section: "charts", children: charts(section).map((item, index) => ((0, jsx_runtime_1.jsx)(ChartComponent, { dashboardItem: (0, dashboard_1.cleanDashboardItem)(dashboard[item._id] ?? item, dashboardFilters), onClick: onClickDashboardItem
                                     ? () => handleOnClickDashboardItem(item)
-                                    : void null, children: (0, jsx_runtime_1.jsx)(Chart_1.default, { containerStyle: chartContainerStyle, chartId: item._id, colors: theme.chartColors?.length
+                                    : undefined, children: (0, jsx_runtime_1.jsx)(Chart_1.default, { containerStyle: chartContainerStyle, chartId: item._id, colors: theme.chartColors?.length
                                         ? theme.chartColors
-                                        : undefined, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, dashedComparison: dashedComparison, singlePointStyle: singlePointStyle }) }, item.name + '' + index))) })), tables(section).length > 0 && ((0, jsx_runtime_1.jsx)(DashboardSectionComponent, { section: "tables", children: tables(section).map((item, index) => ((0, jsx_runtime_1.jsx)(DataLoader_1.default, { id: item._id, children: ({ isLoading, error }) => ((0, jsx_runtime_1.jsx)(TableComponent, { theme: theme, dashboardItem: (0, dashboard_1.cleanDashboardItem)(dashboard[item._id] ?? item, dashboardFilters), isLoading: isLoading, error: error, onClickDashboardItem: onClickDashboardItem
+                                        : undefined, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, comparisonLineStyle: comparisonLineStyle }) }, item.name + '' + index))) })), tables(section).length > 0 && ((0, jsx_runtime_1.jsx)(DashboardSectionComponent, { section: "tables", children: tables(section).map((item, index) => ((0, jsx_runtime_1.jsx)(DataLoader_1.default, { id: item._id, children: ({ isLoading, error }) => ((0, jsx_runtime_1.jsx)(TableComponent, { dashboardItem: (0, dashboard_1.cleanDashboardItem)(dashboard[item._id] ?? item, dashboardFilters), isLoading: isLoading, error: error, onClick: onClickDashboardItem
                                         ? () => handleOnClickDashboardItem(item)
-                                        : void null })) }, `${item.name}${index}`))) }))] }, section + '' + sectionIndex));
+                                        : undefined })) }, `${item.name}${index}`))) }))] }, section + '' + sectionIndex));
             })] }));
 }
 exports.default = Dashboard;

package/dist/cjs/DateRangePicker/QuillDateRangePicker.d.ts

@@ -1,3 +1,23 @@
-import { DateRangePickerComponentProps } from '../Dashboard';
+import { ChangeEvent } from 'react';
+export interface DateRangePickerComponentProps {
+    preset: string;
+    label?: string;
+    dateRange: {
+        startDate: Date;
+        endDate: Date;
+    };
+    presetOptions: {
+        label: string;
+        value: string;
+    }[];
+    onChangeDateRange: ({ startDate, endDate, }: {
+        startDate: Date;
+        endDate: Date;
+    }) => void;
+    onChangePreset: (event: ChangeEvent<HTMLSelectElement>) => void;
+}
+/**
+ * The fallback date range picked used in <Dashboard/>.
+ */
 export declare function QuillDateRangePicker({ dateRange, onChangeDateRange, presetOptions, onChangePreset, preset, label, }: DateRangePickerComponentProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=QuillDateRangePicker.d.ts.map

package/dist/cjs/DateRangePicker/QuillDateRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuillDateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/DateRangePicker/QuillDateRangePicker.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,6BAA6B,EAAE,MAAM,cAAc,CAAC;AAK7D,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,MAAM,EACN,KAAK,GACN,EAAE,6BAA6B,2CA+H/B"}
+{"version":3,"file":"QuillDateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/DateRangePicker/QuillDateRangePicker.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,WAAW,EAKZ,MAAM,OAAO,CAAC;AAqBf,MAAM,WAAW,6BAA6B;IAC5C,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE;QAAE,SAAS,EAAE,IAAI,CAAC;QAAC,OAAO,EAAE,IAAI,CAAA;KAAE,CAAC;IAC9C,aAAa,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAClD,iBAAiB,EAAE,CAAC,EAClB,SAAS,EACT,OAAO,GACR,EAAE;QACD,SAAS,EAAE,IAAI,CAAC;QAChB,OAAO,EAAE,IAAI,CAAC;KACf,KAAK,IAAI,CAAC;IACX,cAAc,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACjE;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,MAAM,EACN,KAAK,GACN,EAAE,6BAA6B,2CA8H/B"}

package/dist/cjs/DateRangePicker/QuillDateRangePicker.js

@@ -7,6 +7,9 @@ const date_fns_1 = require("date-fns");
 const Context_1 = require("../Context");
 const hooks_1 = require("../hooks");
 const QuillSelect_1 = require("../components/QuillSelect");
+/**
+ * The fallback date range picked used in <Dashboard/>.
+ */
 function QuillDateRangePicker({ dateRange, onChangeDateRange, presetOptions, onChangePreset, preset, label, }) {
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     const [anchorStartDate, setAnchorStartDate] = (0, react_1.useState)(getAnchorStartDate(dateRange.startDate, dateRange.endDate));
@@ -57,8 +60,8 @@ function QuillDateRangePicker({ dateRange, onChangeDateRange, presetOptions, onC
                     value: option.label,
                 })), value: localPreset.label || '', onChange: (e) => {
                     onChangePreset(e);
-                    setLocalPreset({ label: e });
-                }, theme: theme })] }));
+                    setLocalPreset({ label: e.target.value });
+                } })] }));
 }
 exports.QuillDateRangePicker = QuillDateRangePicker;
 function CalendarRow({ theme, anchorStartDate, anchorEndDate, setAnchorStartDate, setAnchorEndDate, localStartDate, localEndDate, setLocalStartDate, setLocalEndDate, updateDateFilter, setLocalPreset, setShowModal, }) {

package/dist/cjs/DateRangePicker/dateRangePickerUtils.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formatSelectedDates = exports.displaySelected = exports.getDateStyles = exports.getRangeFromPresetOptions = exports.getRangeFromPreset = exports.reportBuilderOptions = exports.defaultOptions = exports.defaultOptionsV2 = exports.COMPARISON_RANGE = exports.COMPARISON_OPTIONS = exports.PRIMARY_CODES = exports.PRIMARY_RANGE = exports.parseEndDate = exports.parseStartDate = exports.getEndDateByDropdownValue = exports.getStartDateByDropdownValue = exports.capitalize = exports.getWeekdays = void 0;
 const date_fns_1 = require("date-fns");
-const BarList_1 = require("../BarList");
+const BarList_1 = require("../components/Chart/BarList");
 const getWeekdays = (locale) => {
     const firstDayOfWeek = (0, date_fns_1.startOfWeek)(new Date());
     return Array.from(Array(7)).map((e, i) => (0, date_fns_1.format)((0, date_fns_1.addDays)(firstDayOfWeek, i), 'EEEEEE', { locale }));

package/dist/cjs/QuillProvider.d.ts

@@ -17,7 +17,51 @@ interface WithQueryEndpoint extends BaseQuillProviderProps {
     queryHeaders: object;
     withCredentials?: boolean;
 }
-type QuillProviderProps = WithOrganizationId | WithQueryEndpoint;
+export type IQuillProviderProps = WithOrganizationId | WithQueryEndpoint;
+/**
+ * Props for the QuillProvider component.
+ */
+export type QuillProviderProps = {
+    /**
+     * Your Quill public key.
+     */
+    publicKey: string;
+    /**
+     * The url of the query endpoint if using self-hosted.
+     */
+    queryEndpoint: string | never;
+    /**
+     * Request headers passed to queryEndpoint, if self-hosted.
+     */
+    queryHeaders: object | never;
+    /**
+     * The organization id of this request, if any.
+     */
+    organizationId?: string;
+    /**
+     * The environment where this request is executed (eg. 'production')
+     */
+    environment?: string;
+    /**
+     * The theme object used to customize all quill components.
+     */
+    theme?: QuillTheme;
+    /**
+     * Whether to pass credentials to the custom query endpoint, if any.
+     */
+    withCredentials?: boolean;
+    /**
+     * The children of this provider (typically, this is the rest of your app).
+     */
+    children?: React.ReactNode;
+};
+/**
+ * ## Quill Theme
+ * Customizable styles used throughout Quill.
+ *
+ * ### QuillTheme API
+ * @see https://docs.quillsql.com/components/quill-provider#quilltheme
+ */
 export interface QuillTheme {
     fontFamily: string;
     backgroundColor: string;
@@ -29,9 +73,9 @@ export interface QuillTheme {
     chartTickColor: string;
     chartColors: string[];
     borderColor: string;
+    borderWidth: number;
     primaryButtonColor?: string;
     secondaryButtonColor?: string;
-    borderWidth: number;
     buttonFontWeight?: number;
     labelFontWeight?: number;
     fontSize?: number;
@@ -55,6 +99,65 @@ export declare const defaultQuillTheme: {
     loadingStateBackgroundColor: string;
     hoverBackgroundColor: string;
 };
+/**
+ * ### Quill Provider
+ *
+ * The quill provider allows all the quill components in your app to share
+ * information which lets your dashboards render fast and update dynamically.
+ *
+ * Similar to React’s `Context.Provider`, `QuillProvider` wraps your React app
+ * and places Quill Client on the context, enabling you to access it from
+ * anywhere in your component tree. We suggest putting the QuillProvider
+ * somewhere high in your app, above any component that might need to access
+ * your quill data.
+ *
+ * ### Quickstart
+ * There are two ways to set up the QuillProvider; with an organization id using
+ * our fully-managed cloud platform, or with a query endpoint pointing to your
+ * own server running our self-hosted server SDK.
+ *
+ * @example
+ * ```js
+ * // Usage with organization id
+ * <QuillProvider
+ *   organizationId={'acme_org'}
+ *   publicKey={QUILL_API_KEY}
+ * >
+ *   // rest of your app here
+ * </QuillProvider>
+ * ```
+ *
+ * @example
+ * ```js
+ * // Usage with query endpoint
+ * <QuillProvider
+ *   queryEndpoint="https://example.com/quill"
+ *   queryHeaders={AUTH_HEADERS}
+ *   publicKey={QUILL_API_KEY}
+ * >
+ *   // rest of your app here
+ * </QuillProvider>
+ * ```
+ *
+ * ### Custom Themes
+ * You can also pass in a custom theme into the QuillProvider to automatically
+ * style all default quill components at the same time. The combination of
+ * passing custom themes as well as passing your existing components gets you
+ * pixel-perfect dashboards in a fraction of the time.
+ *
+ * Our guide on custom themes is coming soon.
+ *
+ * ### Endpoint Authorization
+ * When self-hosting the server SDK, you might need extra authentication measures
+ * to ensure a secure system. In addition to passing a `queryHeaders` object along
+ * with any requests to your custom endpoint, you also can pass a `withCredentials`
+ * boolean.
+ *
+ * Our guide on endpoint authorization is coming soon.
+ *
+ * ### Dashboard API
+ * @see https://docs.quillsql.com/components/quill-provider
+ */
 declare const QuillProvider: ({ organizationId, publicKey, queryEndpoint, queryHeaders, environment, children, theme, withCredentials, }: QuillProviderProps) => import("react/jsx-runtime").JSX.Element;
 export default QuillProvider;
 //# sourceMappingURL=QuillProvider.d.ts.map

package/dist/cjs/QuillProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuillProvider.d.ts","sourceRoot":"","sources":["../../src/QuillProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAGrD,UAAU,sBAAsB;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,UAAU,kBAAmB,SAAQ,sBAAsB;IACzD,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,UAAU,iBAAkB,SAAQ,sBAAsB;IACxD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,KAAK,kBAAkB,GAAG,kBAAkB,GAAG,iBAAiB,CAAC;AAEjE,MAAM,WAAW,UAAU;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B,CAAC,EAAE,MAAM,CAAC;CACtC;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;CAwB7B,CAAC;AAEF,QAAA,MAAM,aAAa,+GAShB,kBAAkB,4CA+BpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"QuillProvider.d.ts","sourceRoot":"","sources":["../../src/QuillProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,sBAAsB;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,UAAU,kBAAmB,SAAQ,sBAAsB;IACzD,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,UAAU,iBAAkB,SAAQ,sBAAsB;IACxD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAGD,MAAM,MAAM,mBAAmB,GAAG,kBAAkB,GAAG,iBAAiB,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,aAAa,EAAE,MAAM,GAAG,KAAK,CAAC;IAE9B;;OAEG;IACH,YAAY,EAAE,MAAM,GAAG,KAAK,CAAC;IAE7B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,WAAW,UAAU;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2BAA2B,CAAC,EAAE,MAAM,CAAC;CACtC;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;CAwB7B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,QAAA,MAAM,aAAa,+GAShB,kBAAkB,4CA+BpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/cjs/QuillProvider.js

@@ -28,6 +28,65 @@ exports.defaultQuillTheme = {
     loadingStateBackgroundColor: '#F9F9FA',
     hoverBackgroundColor: '#F4F4F5',
 };
+/**
+ * ### Quill Provider
+ *
+ * The quill provider allows all the quill components in your app to share
+ * information which lets your dashboards render fast and update dynamically.
+ *
+ * Similar to React’s `Context.Provider`, `QuillProvider` wraps your React app
+ * and places Quill Client on the context, enabling you to access it from
+ * anywhere in your component tree. We suggest putting the QuillProvider
+ * somewhere high in your app, above any component that might need to access
+ * your quill data.
+ *
+ * ### Quickstart
+ * There are two ways to set up the QuillProvider; with an organization id using
+ * our fully-managed cloud platform, or with a query endpoint pointing to your
+ * own server running our self-hosted server SDK.
+ *
+ * @example
+ * ```js
+ * // Usage with organization id
+ * <QuillProvider
+ *   organizationId={'acme_org'}
+ *   publicKey={QUILL_API_KEY}
+ * >
+ *   // rest of your app here
+ * </QuillProvider>
+ * ```
+ *
+ * @example
+ * ```js
+ * // Usage with query endpoint
+ * <QuillProvider
+ *   queryEndpoint="https://example.com/quill"
+ *   queryHeaders={AUTH_HEADERS}
+ *   publicKey={QUILL_API_KEY}
+ * >
+ *   // rest of your app here
+ * </QuillProvider>
+ * ```
+ *
+ * ### Custom Themes
+ * You can also pass in a custom theme into the QuillProvider to automatically
+ * style all default quill components at the same time. The combination of
+ * passing custom themes as well as passing your existing components gets you
+ * pixel-perfect dashboards in a fraction of the time.
+ *
+ * Our guide on custom themes is coming soon.
+ *
+ * ### Endpoint Authorization
+ * When self-hosting the server SDK, you might need extra authentication measures
+ * to ensure a secure system. In addition to passing a `queryHeaders` object along
+ * with any requests to your custom endpoint, you also can pass a `withCredentials`
+ * boolean.
+ *
+ * Our guide on endpoint authorization is coming soon.
+ *
+ * ### Dashboard API
+ * @see https://docs.quillsql.com/components/quill-provider
+ */
 const QuillProvider = ({ organizationId, publicKey, queryEndpoint = 'https://quill-344421.uc.r.appspot.com/cloud', queryHeaders, environment, children, theme = exports.defaultQuillTheme, withCredentials = false, }) => {
     return ((0, jsx_runtime_1.jsxs)(Context_1.ContextProvider, { initialTheme: theme, publicKey: publicKey, environment: environment, customerId: organizationId, queryEndpoint: queryEndpoint, queryHeaders: queryHeaders, withCredentials: withCredentials, children: [children, (0, jsx_runtime_1.jsx)("style", { children: `/* For WebKit-based browsers (Chrome, Safari, Opera) */
         ::-webkit-scrollbar {