@spscommerce/ds-react-charts 0.1.0

package/lib/lineChart/SpsLineChart.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import type { ScaleConfig } from "@visx/scale";
+import type { CommonProps, AxisScale } from "@visx/axis/lib/types";
+import type { AxisScaleOutput } from "@visx/axis";
+import type { GridProps } from "@visx/xychart/lib/components/grid/Grid";
+import type { LineChartColors } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+export interface LinesChartProps {
+    data: LineChartData[];
+    name: string;
+    color: LineChartColors;
+    strokeDashArray?: boolean;
+}
+export interface LineChartData {
+    x: number;
+    y: number;
+}
+declare const propTypes: {
+    barTooltip: PropTypes.Requireable<(props: LineTooltipProps) => JSX.Element>;
+    grid: PropTypes.Requireable<GridProps>;
+    labels: PropTypes.Validator<string[]>;
+    lines: PropTypes.Requireable<LinesChartProps[]>;
+    xAxis: PropTypes.Requireable<CommonProps<AxisScale<AxisScaleOutput>>>;
+    xScale: PropTypes.Validator<ScaleConfig<AxisScaleOutput, any, any>>;
+    yAxis: PropTypes.Requireable<CommonProps<AxisScale<AxisScaleOutput>>>;
+    yScale: PropTypes.Validator<ScaleConfig<AxisScaleOutput, any, any>>;
+};
+export interface LineTooltipProps {
+    yAxisName?: string;
+    xLineName?: string;
+    value?: number;
+}
+export declare type SpsLineChartProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsLineChart(props: SpsLineChartProps): JSX.Element;
+export {};

package/lib/lineChart/SpsLineChart.examples.d.ts

@@ -0,0 +1,2 @@
+import type { DSReactExamples } from "@spscommerce/ds-shared";
+export declare const SpsLineChartExamples: DSReactExamples;

package/lib/manifest.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentManifest } from "@spscommerce/ds-shared";
+export declare const MANIFEST: ComponentManifest;

package/lib/prop-types.d.ts

@@ -0,0 +1,23 @@
+import type { MutableRefObject } from "react";
+import * as PropTypes from "prop-types";
+export declare type Deprecated<T> = PropTypes.Requireable<T>;
+export declare function deprecated<T>(type: PropTypes.Requireable<T>): Deprecated<T>;
+export declare function enumValue<T>(e: any): PropTypes.Requireable<T>;
+export declare function fun<T extends (...args: any[]) => any>(): PropTypes.Requireable<T>;
+export declare function impl<T>(): PropTypes.Requireable<T>;
+export declare function ref<T>(): PropTypes.Requireable<MutableRefObject<T>>;
+export declare type ReactNodeOrRenderFn = PropTypes.ReactNodeLike | (() => PropTypes.ReactNodeLike);
+export declare const nodeOrRenderFn: PropTypes.Requireable<ReactNodeOrRenderFn>;
+export declare type TypeDoc = Record<string, string | {
+    type: string;
+    required?: boolean;
+    deprecated?: boolean;
+}>;
+export declare type InferTS<T, K extends HTMLElement> = PropTypes.InferProps<T> & Omit<React.HTMLProps<K>, keyof T>;
+export declare const spsGlobalPropTypes: {
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export * from "prop-types";

package/lib/setup-jest.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/stackedHorizontalBarChart/SpsStackedHorizontalBarChart.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import type { StackedBarChartMilestone } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    chartData: PropTypes.Requireable<ChartDataProps[]>;
+    chartHeight: PropTypes.Requireable<number>;
+    chartWidth: PropTypes.Requireable<number>;
+    milestones: PropTypes.Requireable<MilestonesType[]>;
+    useAbsoluteLegend: PropTypes.Requireable<boolean>;
+    barTooltip: PropTypes.Requireable<(props: BarTooltipProps) => JSX.Element>;
+};
+export interface ChartDataProps {
+    label: string;
+    value: number;
+    color: string;
+}
+export interface MilestonesType {
+    label: string;
+    value: number;
+    color: StackedBarChartMilestone;
+}
+export interface BarTooltipProps {
+    label: string;
+    absoluteValue: number;
+    relativeValue: number;
+}
+export declare type SpsStackedHorizontalBarChartProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsStackedHorizontalBarChart(props: SpsStackedHorizontalBarChartProps): JSX.Element;
+export {};

package/lib/stackedHorizontalBarChart/SpsStackedHorizontalBarChart.examples.d.ts

@@ -0,0 +1,2 @@
+import type { DSReactExamples } from "@spscommerce/ds-shared";
+export declare const SpsStackedHorizontalBarChartExamples: DSReactExamples;

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@spscommerce/ds-react-charts",
+  "description": "SPS Design System React Chart components",
+  "version": "0.1.0",
+  "author": "SPS Commerce",
+  "license": "UNLICENSED",
+  "repository": "https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-react-charts",
+  "homepage": "https://github.com/spscommerce/design-system/tree/master/packages/@spscommerce/ds-react-charts#readme",
+  "main": "./lib/index.cjs.js",
+  "module": "./lib/index.es.js",
+  "types": "./lib/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@juggle/resize-observer": "^3.3.1",
+    "nanoid": "^2.1.0",
+    "@visx/axis": "^2.1.0",
+    "@visx/gradient": "^2.1.0",
+    "@visx/grid": "^2.1.0",
+    "@visx/group": "^2.1.0",
+    "@visx/scale": "^2.1.0",
+    "@visx/shape": "^2.1.0",
+    "@visx/legend": "^2.1.0",
+    "@visx/xychart": "^1.7.2",
+    "@visx/glyph": "^2.1.2",
+    "react-spring": "^8.0.27"
+  },
+  "peerDependencies": {
+    "@spscommerce/ds-colors": "0.1.0",
+    "@spscommerce/ds-shared": "0.1.0",
+    "@spscommerce/ds-react": "0.1.0",
+    "@spscommerce/utils": "0.1.0",
+    "react": "^16.9.0"
+  },
+  "devDependencies": {
+    "@spscommerce/ds-colors": "0.1.0",
+    "@spscommerce/ds-shared": "0.1.0",
+    "@spscommerce/ds-react": "0.1.0",
+    "@spscommerce/utils": "0.1.0",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@types/react": "^16.9.0",
+    "clsx": "^1.0.3",
+    "expect": "^24.1.0",
+    "react": "^16.9.0",
+    "typescript": "^4.4.4"
+  },
+  "scripts": {
+    "build": "pnpm run build:js && pnpm run build:types",
+    "build:js": "vite build",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
+    "watch": "vite build --watch",
+    "clean": "git clean -fdX",
+    "pub": "pnpm pack && node ../../scripts/publish-package.js"
+  },
+  "readme": "[//]: # \"START_AUTOGENERATED\"\n\n## [@spscommerce/ds-react-charts](https://github.com/spscommerce/ui-angular/tree/master/packages/@spscommerce/ds-react-charts#readme)\n\n![release: 1.1.0](https://img.shields.io/badge/release-1.1.0-blue.svg?style=flat-square)\n![build: passing](https://img.shields.io/badge/build-passing-green.svg?style=flat-square)\n![tests: failing](https://img.shields.io/badge/tests-failing-red.svg?style=flat-square)\n\nSPS Design System React components \n \n ### Installation \n \n ```shell\nnpm install --save @spscommerce/ds-react-charts\n```\n\n#### Peer Dependencies\n\n<div class=\"row\">\n    <div class=\"col-5\"> \n    <table class=\"sps-table\">\n        <thead class=\"sps-table__head\">\n            <tr class=\"sps-table__row\">\n                <th class=\"sps-table__header\">\n                    <span class=\"sps-table__header-cell-body\">    \n                        Package\n                    </span>\n                </th>\n                <th class=\"sps-table__header text-right\">\n                    <span class=\"sps-table__header-cell-body\">    \n                        Version\n                    </span>\n                </th>\n            </tr>\n        </thead>\n        <tbody class=\"sps-table__body\">\n            <tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/ds-colors#readme\">@spscommerce/ds-colors</a></td><td class=\"sps-table__cell text-right\">^1.1.0</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://github.com/spscommerce/design-system/tree/main/packages/@spscommerce/utils#readme\">@spscommerce/utils</a></td><td class=\"sps-table__cell text-right\">^1.1.0</td></tr>\n<tr class=\"sps-table__row\"><td class=\"sps-table__cell\"><a href=\"https://reactjs.org/\">react</a></td><td class=\"sps-table__cell text-right\">^16.9.0</td></tr>\n        </tbody>\n    </table>\n    </div>\n    <div class=\"col-7\">\n        &nbsp;\n    </div>\n</div>\n\n[//]: # \"END_AUTOGENERATED\"\n"
+}

package/vite.config.js

@@ -0,0 +1,20 @@
+import path from 'path';
+
+import { defineConfig } from 'vite';
+
+import pkg from './package.json';
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.ts'),
+      formats: ['es', 'cjs'],
+      fileName: (format) => `index.${format}.js`,
+    },
+    outDir: path.resolve(__dirname, './lib'),
+    emptyOutDir: false,
+    rollupOptions: {
+      external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
+    },
+  },
+});