@quillsql/react 1.0.0

package/lib/Button.js

@@ -0,0 +1,151 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { twMerge } from 'tailwind-merge';
+import { Area, CartesianGrid, ComposedChart as ReChartsAreaChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
+var colorValues = [
+    'slate',
+    'gray',
+    'zinc',
+    'neutral',
+    'stone',
+    'red',
+    'orange',
+    'amber',
+    'yellow',
+    'lime',
+    'green',
+    'emerald',
+    'teal',
+    'cyan',
+    'sky',
+    'blue',
+    'indigo',
+    'violet',
+    'purple',
+    'fuchsia',
+    'pink',
+    'rose',
+];
+var data = [
+    {
+        date: 'Jan 22',
+        SemiAnalysis: 2890,
+        'The Pragmatic Engineer': 2338,
+    },
+    {
+        date: 'Feb 22',
+        SemiAnalysis: 2756,
+        'The Pragmatic Engineer': 2103,
+    },
+    {
+        date: 'Mar 22',
+        SemiAnalysis: 3322,
+        'The Pragmatic Engineer': 2194,
+    },
+    {
+        date: 'Apr 22',
+        SemiAnalysis: 3470,
+        'The Pragmatic Engineer': 2108,
+    },
+    {
+        date: 'May 22',
+        SemiAnalysis: 3475,
+        'The Pragmatic Engineer': 1812,
+    },
+    {
+        date: 'Jun 22',
+        SemiAnalysis: 3129,
+        'The Pragmatic Engineer': 1726,
+    },
+];
+var valueFormatter = function (number) {
+    return '$ ' + Intl.NumberFormat('us').format(number).toString();
+};
+export var ChartTooltipFrame = function (_a) {
+    var children = _a.children;
+    return (_jsx("div", __assign({ className: "bg-white text-sm rounded-md border shadow-lg" }, { children: children })));
+};
+export var ChartTooltipRow = function (_a) {
+    var value = _a.value, name = _a.name, color = _a.color;
+    return (_jsxs("div", __assign({ className: "flex items-center justify-between space-x-8" }, { children: [_jsxs("div", __assign({ className: "flex items-center space-x-2" }, { children: [_jsx("span", { style: { background: color, borderWidth: 2, borderColor: 'white' }, className: twMerge(
+                        // 'shrink-0',
+                        // 'bg-black',
+                        // 'bg-white',
+                        // 'border-black',
+                        // sizing.sm.height,
+                        // sizing.sm.width,
+                        'h-3', 'w-3', 'shadow', 'rounded-full'
+                        // border.md.all,
+                        // boxShadow.md
+                        ) }), _jsx("p", __assign({ 
+                        // className={twMerge(
+                        //   'font-medium tabular-nums text-right whitespace-nowrap',
+                        //   'text-[#212121] !important'
+                        // )}
+                        className: "font-medium tabular-nums text-right whitespace-nowrap text-black" }, { children: value }))] })), _jsx("p", __assign({ className: twMerge('text-right whitespace-nowrap', 
+                // getColorClassNames(DEFAULT_COLOR, colorPalette.text).textColor,
+                'text-black'
+                // fontWeight.sm
+                ) }, { children: name }))] })));
+};
+var ChartTooltip = function (_a) {
+    var active = _a.active, payload = _a.payload, label = _a.label, categoryColors = _a.categoryColors, valueFormatter = _a.valueFormatter;
+    if (active && payload) {
+        return (_jsxs(ChartTooltipFrame, { children: [_jsx("div", __assign({ className: "flex flex-col py-2 px-4" }, { children: _jsx("p", __assign({ style: { textAlign: 'left' }, className: twMerge('text-elem', 'text-black'
+                        // getColorClassNames(DEFAULT_COLOR, colorPalette.darkText)
+                        //   .textColor,
+                        // fontWeight.md
+                        ) }, { children: label })) })), _jsx("div", __assign({ className: "px-4 space-y-1 py-2 px-4" }, { children: payload.map(function (_a, idx) {
+                        var value = _a.value, name = _a.name;
+                        return (_jsx(ChartTooltipRow, { value: valueFormatter(value), name: name, 
+                            // color={categoryColors.get(name) ?? BaseColors.Blue}
+                            color: "blue" }, "id-".concat(idx)));
+                    }) }))] }));
+    }
+    return null;
+};
+var Chart = function (_a) {
+    var text = _a.text, onClick = _a.onClick, className = _a.className;
+    var defaultClasses = 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded';
+    var showGridLines = true;
+    var categories = data.map(function (elem) { return elem['SemiAnalysis']; });
+    return (_jsx("div", __assign({ className: "flex flex-col flex-1 w-full" }, { children: _jsx("div", __assign({ className: twMerge('w-full h-80', className) }, { children: _jsx(ResponsiveContainer, __assign({ width: "100%", height: '100%' }, { children: _jsxs(ReChartsAreaChart, __assign({ data: data }, { children: [showGridLines ? (_jsx(CartesianGrid, { strokeDasharray: "3 3", horizontal: true, vertical: false })) : null, _jsx(XAxis
+                        //   hide={!showXAxis}
+                        , { 
+                            //   hide={!showXAxis}
+                            dataKey: 'date', tick: { transform: 'translate(0, 6)' }, 
+                            //   ticks={
+                            //     startEndOnly
+                            //       ? [data[0][index], data[data.length - 1][index]]
+                            //       : undefined
+                            //   }
+                            style: {
+                                fontSize: '12px',
+                                fontFamily: 'Inter; Helvetica',
+                                color: '#6269E9',
+                            }, interval: "preserveStartEnd", tickLine: false, axisLine: false, padding: { left: 10, right: 10 }, minTickGap: 5 }), _jsx(YAxis, { width: 56, 
+                            //   hide={!showYAxis}
+                            axisLine: false, tickLine: false, type: "number", 
+                            //   domain={yAxisDomain as AxisDomain}
+                            domain: [0, 4000], tick: { transform: 'translate(-3, 0)' }, style: {
+                                fontSize: '12px',
+                                fontFamily: 'Inter; Helvetica',
+                            }, tickFormatter: valueFormatter }), _jsx(Tooltip, { wrapperStyle: { outline: 'none' }, isAnimationActive: false, cursor: { stroke: '#d1d5db', strokeWidth: 1 }, content: function (_a) {
+                                var active = _a.active, payload = _a.payload, label = _a.label;
+                                console.log('HUH: ', payload);
+                                console.log('HUH 2: ', label);
+                                return (_jsx(ChartTooltip, { active: active, payload: payload, label: label, valueFormatter: valueFormatter, categoryColors: { SemiAnalysis: 'cyan' } }));
+                            }, position: { y: 0 } }), _jsx("defs", { children: _jsxs("linearGradient", __assign({ id: 'colorUv', x1: "0", y1: "0", x2: "0", y2: "1" }, { children: [_jsx("stop", { offset: "5%", stopColor: '#6269E9', stopOpacity: 0.4 }), _jsx("stop", { offset: "95%", stopColor: 'rgba(0,0,0,0)', stopOpacity: 0 })] })) }), _jsx("defs", { children: _jsxs("linearGradient", __assign({ id: 'colorUj', x1: "0", y1: "0", x2: "0", y2: "1" }, { children: [_jsx("stop", { offset: "5%", stopColor: '#E14F62', stopOpacity: 0.4 }), _jsx("stop", { offset: "95%", stopColor: 'rgba(0,0,0,0)', stopOpacity: 0 })] })) }), _jsx(Area, { name: "SemiAnalysis", type: "linear", dataKey: "SemiAnalysis", stroke: '#6269E9', fill: "url(#colorUv)", strokeWidth: 2, dot: false, isAnimationActive: true }, "SemiAnalysis"), _jsx(Area, { name: "The Pragmatic Engineer", type: "linear", dataKey: "The Pragmatic Engineer", stroke: '#E14F62', fill: "url(#colorUj)", strokeWidth: 2, dot: false, isAnimationActive: true }, "The Pragmatic Engineer")] })) })) })) })));
+};
+export default Chart;
+//# sourceMappingURL=Button.js.map

package/lib/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"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"}

package/lib/Chart.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import 'react-loading-skeleton/dist/skeleton.css';
+declare const colorValues: readonly ["slate", "gray", "zinc", "neutral", "stone", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"];
+export type Color = (typeof colorValues)[number];
+export declare const ChartTooltipFrame: ({ children, }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export interface ChartTooltipRowProps {
+    value: string;
+    name: string;
+    color: Color;
+}
+export declare const ChartTooltipRow: ({ value, name, color, }: ChartTooltipRowProps) => JSX.Element;
+export interface ChartTooltipProps {
+    active: boolean | undefined;
+    payload: any;
+    label: string;
+    colors: string[];
+    valueFormatter: any;
+}
+declare const Chart: ({ chartId, colors, containerStyle }: {
+    chartId: any;
+    colors: any;
+    containerStyle: any;
+}) => JSX.Element;
+export default Chart;