td-plots 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Ann Sizemore Blevins
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,41 @@
+# td-plots
+
+A React + TypeScript component library for interactive Plotly.js charts, with Storybook documentation and Vite-powered builds.
+
+
+## Getting Started
+
+### Install dependencies
+```sh
+pnpm install
+```
+
+### Run Storybook
+```sh
+pnpm storybook
+```
+
+### Build the library
+```sh
+pnpm run build
+```
+
+## Usage Example
+
+Import and use the `TestPlot` component in your React app:
+
+```tsx
+import { TestPlot } from './src/components/TestPlot';
+
+export default function App() {
+  return <TestPlot xaxisTitle="X Label" yaxisTitle="Y Label" />;
+}
+```
+
+## Project Structure
+- `src/components/` – Plot components (e.g., `TestPlot.tsx`)
+- `stories/` – Storybook stories for components
+
+
+## License
+MIT

package/dist/components/Histogram.d.ts

@@ -0,0 +1,11 @@
+import './plotStyles.scss';
+export type HistogramPlotProps = {
+    data: number[];
+    title?: string;
+    xAxisTitle?: string;
+    barColor?: string;
+    unselectedBarColor?: string;
+    selectorsColor?: string;
+};
+export declare const HistogramPlot: (props: HistogramPlotProps) => import("react/jsx-runtime").JSX.Element;
+export default HistogramPlot;

package/dist/components/TestPlot.d.ts

@@ -0,0 +1,6 @@
+export type TestPlotProps = {
+    yaxisTitle?: string;
+    xaxisTitle?: string;
+};
+export declare const TestPlot: (props: TestPlotProps) => import("react/jsx-runtime").JSX.Element;
+export default TestPlot;

package/dist/index.css

@@ -0,0 +1 @@
+.plot-container{height:100%;overflow:hidden!important;width:100%}.plot-container .point{border-radius:5px!important;overflow:hidden!important}.plot-container .cursor-ns-resize{height:0;width:0}.plot-container .cursor-ew-resize{fill:var(--selection-color,blue)!important;stroke:var(--selection-color,blue)!important}.plot-container .selectionlayer>path{stroke:var(--selection-color,blue)!important;stroke-dasharray:0!important;stroke-width:1px!important;opacity:.5!important}.plot-container .zoomlayer>path{stroke-dasharray:0!important;stroke:var(--selection-color,blue)!important;fill:var(--selection-color,blue)!important}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { HistogramPlot } from './components/Histogram';
+export type { HistogramPlotProps } from './components/Histogram';
+export { default as TestPlot } from './components/TestPlot';
+export type { PlotParams } from 'react-plotly.js';

package/dist/index.esm.css

@@ -0,0 +1 @@
+.plot-container{height:100%;overflow:hidden!important;width:100%}.plot-container .point{border-radius:5px!important;overflow:hidden!important}.plot-container .cursor-ns-resize{height:0;width:0}.plot-container .cursor-ew-resize{fill:var(--selection-color,blue)!important;stroke:var(--selection-color,blue)!important}.plot-container .selectionlayer>path{stroke:var(--selection-color,blue)!important;stroke-dasharray:0!important;stroke-width:1px!important;opacity:.5!important}.plot-container .zoomlayer>path{stroke-dasharray:0!important;stroke:var(--selection-color,blue)!important;fill:var(--selection-color,blue)!important}

package/dist/index.esm.js

@@ -0,0 +1,102 @@
+import { jsx } from 'react/jsx-runtime';
+import { lazy } from 'react';
+
+var Plot$1 = lazy(function () { return import('react-plotly.js'); });
+var HistogramPlot = function (props) {
+    var data = props.data, title = props.title, xAxisTitle = props.xAxisTitle, _a = props.barColor, barColor = _a === void 0 ? 'rgb(72, 72, 74)' : _a, _b = props.unselectedBarColor, unselectedBarColor = _b === void 0 ? 'rgba(203, 195, 195, 0.88)' : _b, _c = props.selectorsColor, selectorsColor = _c === void 0 ? 'black' : _c;
+    var plotlyData = [
+        {
+            x: data,
+            type: 'histogram',
+            marker: {
+                color: barColor !== null && barColor !== void 0 ? barColor : 'blue',
+                line: {
+                    color: "white",
+                    width: 0.5,
+                },
+            },
+            // The following property is listed in the api. Not sure why typescript doesn't know about it.
+            // Styles the unselected bars in the histogram
+            //@ts-ignore
+            unselected: {
+                marker: {
+                    color: unselectedBarColor,
+                }
+            },
+            hovertemplate: '[%{x})<br>Count: %{y}<extra></extra>', // Custom hover text
+        }
+    ];
+    var layout = {
+        title: { text: title },
+        xaxis: {
+            title: {
+                text: xAxisTitle
+            },
+            // range: [Math.min(...data, 0), Math.max(...data)], // Range needs to get padding on both sides based on bin size. Consider calculating bins here.
+            showgrid: true,
+            zeroline: true,
+            showline: true,
+            mirror: 'ticks',
+            gridcolor: '#efefef',
+            gridwidth: 0.2,
+            zerolinecolor: '#969696',
+            zerolinewidth: 1,
+            linecolor: '#bababa',
+            linewidth: 1,
+            fixedrange: true, // Disable zooming
+            ticklabelposition: 'outside',
+        },
+        yaxis: {
+            title: {
+                text: 'Count'
+            },
+            showgrid: true,
+            zeroline: true,
+            showline: true,
+            mirror: 'ticks',
+            gridcolor: '#efefef',
+            gridwidth: 0.2,
+            zerolinecolor: '#969696',
+            zerolinewidth: 1,
+            linecolor: '#bababa',
+            linewidth: 1,
+            fixedrange: true, // Disable zooming
+            ticksuffix: ' ', // Add space between y axis and ticks
+        },
+        bargap: 0.03, // Gap between bars
+        dragmode: 'select',
+        selectdirection: 'h', // Allow selection in horizontal direction
+    };
+    var config = {
+        responsive: true, // Make the plot responsive
+        displayModeBar: false, // Hide the mode bar
+        displaylogo: false, // Hide the Plotly logo
+        scrollZoom: false, // Disable zooming with scroll
+        staticPlot: false, // Enable interactivity
+    };
+    return (jsx("div", { className: "plot-container", style: {
+            '--selection-color': selectorsColor,
+        }, children: jsx(Plot$1, { data: plotlyData, layout: layout, config: config }) }));
+};
+
+var Plot = lazy(function () { return import('react-plotly.js'); });
+var TestPlot = function (props) {
+    var _a, _b;
+    var data = [
+        {
+            x: [1, 2, 3, 4],
+            y: [10, 15, 13, 17],
+            type: 'bar',
+            marker: { color: 'blue' },
+        },
+    ];
+    var layout = {
+        title: { text: 'Test Bar Plot' },
+        xaxis: { title: { text: (_a = props.xaxisTitle) !== null && _a !== void 0 ? _a : 'X Axis' } },
+        yaxis: { title: { text: (_b = props.yaxisTitle) !== null && _b !== void 0 ? _b : 'Y Axis' } },
+    };
+    return jsx(Plot, { data: data, layout: layout });
+};
+
+export { HistogramPlot, TestPlot };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/components/Histogram.tsx","../src/components/TestPlot.tsx"],"sourcesContent":["import React, { lazy } from 'react';\nimport { PlotParams } from 'react-plotly.js';\nimport './plotStyles.scss'; // Importing styles for the plot\n\nconst Plot = lazy(() => import('react-plotly.js'));\n\nexport type HistogramPlotProps = {\n  data: number[];\n  title?: string;\n  xAxisTitle?: string;\n  barColor?: string; // Optional prop to set the color of the bars\n  unselectedBarColor?: string; // Optional prop to set the color of unselected bars\n  selectorsColor?: string; // Optional prop to set the color of elements in the selection box\n}\nexport const HistogramPlot = (props: HistogramPlotProps) => {\n\n  const {\n    data,\n    title,\n    xAxisTitle,\n    barColor = 'rgb(72, 72, 74)',\n    unselectedBarColor = 'rgba(203, 195, 195, 0.88)',\n    selectorsColor = 'black',\n  } = props;\n\n  const plotlyData: PlotParams['data'] = [\n    {\n      x: data,\n      type: 'histogram',\n      marker: { \n        color: barColor ?? 'blue',\n        line: {\n          color: \"white\",\n          width: 0.5,\n        },\n      },\n      // The following property is listed in the api. Not sure why typescript doesn't know about it.\n      // Styles the unselected bars in the histogram\n      //@ts-ignore\n      unselected: {\n        marker: { \n          color: unselectedBarColor,\n        }\n      },\n      hovertemplate: '[%{x})<br>Count: %{y}<extra></extra>', // Custom hover text\n    }\n  ];\n\n  const layout: PlotParams['layout'] = {\n    title: {text: title},\n    xaxis: {\n      title: {\n        text: xAxisTitle\n      },\n      // range: [Math.min(...data, 0), Math.max(...data)], // Range needs to get padding on both sides based on bin size. Consider calculating bins here.\n      showgrid: true,\n      zeroline: true,\n      showline: true,\n      mirror: 'ticks',\n      gridcolor: '#efefef',\n      gridwidth: 0.2,\n      zerolinecolor: '#969696',\n      zerolinewidth: 1,\n      linecolor: '#bababa',\n      linewidth: 1,\n      fixedrange: true, // Disable zooming\n      ticklabelposition: 'outside',\n    },\n    yaxis: {\n      title: {\n        text: 'Count'\n      },\n      showgrid: true,\n      zeroline: true,\n      showline: true,\n      mirror: 'ticks',\n      gridcolor: '#efefef',\n      gridwidth: 0.2,\n      zerolinecolor: '#969696',\n      zerolinewidth: 1,\n      linecolor: '#bababa',\n      linewidth: 1,\n      fixedrange: true, // Disable zooming\n      ticksuffix: ' ', // Add space between y axis and ticks\n    },\n    bargap: 0.03, // Gap between bars\n    dragmode: 'select',\n    selectdirection: 'h', // Allow selection in horizontal direction\n  };\n\n  const config: PlotParams['config'] = {\n    responsive: true, // Make the plot responsive\n    displayModeBar: false, // Hide the mode bar\n    displaylogo: false, // Hide the Plotly logo\n    scrollZoom: false, // Disable zooming with scroll\n    staticPlot: false, // Enable interactivity\n  };\n\n  return (\n    <div \n      className=\"plot-container\"\n      style={{\n        '--selection-color': selectorsColor,\n      } as React.CSSProperties}\n    >\n      <Plot data={plotlyData} layout={layout} config={config} />\n    </div>\n  );\n}\n\nexport default HistogramPlot;\n","// A test bar plotly plot\nimport React, { lazy } from 'react';\nimport { PlotParams } from 'react-plotly.js';\n\nconst Plot = lazy(() => import('react-plotly.js'));\n\nexport type TestPlotProps = {\n  yaxisTitle?: string;\n  xaxisTitle?: string;\n}\nexport const TestPlot = (props: TestPlotProps) => {\n  const data: PlotParams['data'] = [\n    {\n      x: [1, 2, 3, 4],\n      y: [10, 15, 13, 17],\n      type: 'bar' as const,\n      marker: { color: 'blue' },\n    },\n  ];\n\n  const layout = {\n    title: {text: 'Test Bar Plot'},\n    xaxis: { title: {text: props.xaxisTitle ?? 'X Axis'} },\n    yaxis: { title: {text: props.yaxisTitle ?? 'Y Axis'} },\n  };\n\n  return <Plot data={data} layout={layout} />;\n};\n\nexport default TestPlot;\n"],"names":["Plot","_jsx"],"mappings":"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"}

package/dist/index.js

@@ -0,0 +1,105 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+var Plot$1 = react.lazy(function () { return import('react-plotly.js'); });
+var HistogramPlot = function (props) {
+    var data = props.data, title = props.title, xAxisTitle = props.xAxisTitle, _a = props.barColor, barColor = _a === void 0 ? 'rgb(72, 72, 74)' : _a, _b = props.unselectedBarColor, unselectedBarColor = _b === void 0 ? 'rgba(203, 195, 195, 0.88)' : _b, _c = props.selectorsColor, selectorsColor = _c === void 0 ? 'black' : _c;
+    var plotlyData = [
+        {
+            x: data,
+            type: 'histogram',
+            marker: {
+                color: barColor !== null && barColor !== void 0 ? barColor : 'blue',
+                line: {
+                    color: "white",
+                    width: 0.5,
+                },
+            },
+            // The following property is listed in the api. Not sure why typescript doesn't know about it.
+            // Styles the unselected bars in the histogram
+            //@ts-ignore
+            unselected: {
+                marker: {
+                    color: unselectedBarColor,
+                }
+            },
+            hovertemplate: '[%{x})<br>Count: %{y}<extra></extra>', // Custom hover text
+        }
+    ];
+    var layout = {
+        title: { text: title },
+        xaxis: {
+            title: {
+                text: xAxisTitle
+            },
+            // range: [Math.min(...data, 0), Math.max(...data)], // Range needs to get padding on both sides based on bin size. Consider calculating bins here.
+            showgrid: true,
+            zeroline: true,
+            showline: true,
+            mirror: 'ticks',
+            gridcolor: '#efefef',
+            gridwidth: 0.2,
+            zerolinecolor: '#969696',
+            zerolinewidth: 1,
+            linecolor: '#bababa',
+            linewidth: 1,
+            fixedrange: true, // Disable zooming
+            ticklabelposition: 'outside',
+        },
+        yaxis: {
+            title: {
+                text: 'Count'
+            },
+            showgrid: true,
+            zeroline: true,
+            showline: true,
+            mirror: 'ticks',
+            gridcolor: '#efefef',
+            gridwidth: 0.2,
+            zerolinecolor: '#969696',
+            zerolinewidth: 1,
+            linecolor: '#bababa',
+            linewidth: 1,
+            fixedrange: true, // Disable zooming
+            ticksuffix: ' ', // Add space between y axis and ticks
+        },
+        bargap: 0.03, // Gap between bars
+        dragmode: 'select',
+        selectdirection: 'h', // Allow selection in horizontal direction
+    };
+    var config = {
+        responsive: true, // Make the plot responsive
+        displayModeBar: false, // Hide the mode bar
+        displaylogo: false, // Hide the Plotly logo
+        scrollZoom: false, // Disable zooming with scroll
+        staticPlot: false, // Enable interactivity
+    };
+    return (jsxRuntime.jsx("div", { className: "plot-container", style: {
+            '--selection-color': selectorsColor,
+        }, children: jsxRuntime.jsx(Plot$1, { data: plotlyData, layout: layout, config: config }) }));
+};
+
+var Plot = react.lazy(function () { return import('react-plotly.js'); });
+var TestPlot = function (props) {
+    var _a, _b;
+    var data = [
+        {
+            x: [1, 2, 3, 4],
+            y: [10, 15, 13, 17],
+            type: 'bar',
+            marker: { color: 'blue' },
+        },
+    ];
+    var layout = {
+        title: { text: 'Test Bar Plot' },
+        xaxis: { title: { text: (_a = props.xaxisTitle) !== null && _a !== void 0 ? _a : 'X Axis' } },
+        yaxis: { title: { text: (_b = props.yaxisTitle) !== null && _b !== void 0 ? _b : 'Y Axis' } },
+    };
+    return jsxRuntime.jsx(Plot, { data: data, layout: layout });
+};
+
+exports.HistogramPlot = HistogramPlot;
+exports.TestPlot = TestPlot;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/components/Histogram.tsx","../src/components/TestPlot.tsx"],"sourcesContent":["import React, { lazy } from 'react';\nimport { PlotParams } from 'react-plotly.js';\nimport './plotStyles.scss'; // Importing styles for the plot\n\nconst Plot = lazy(() => import('react-plotly.js'));\n\nexport type HistogramPlotProps = {\n  data: number[];\n  title?: string;\n  xAxisTitle?: string;\n  barColor?: string; // Optional prop to set the color of the bars\n  unselectedBarColor?: string; // Optional prop to set the color of unselected bars\n  selectorsColor?: string; // Optional prop to set the color of elements in the selection box\n}\nexport const HistogramPlot = (props: HistogramPlotProps) => {\n\n  const {\n    data,\n    title,\n    xAxisTitle,\n    barColor = 'rgb(72, 72, 74)',\n    unselectedBarColor = 'rgba(203, 195, 195, 0.88)',\n    selectorsColor = 'black',\n  } = props;\n\n  const plotlyData: PlotParams['data'] = [\n    {\n      x: data,\n      type: 'histogram',\n      marker: { \n        color: barColor ?? 'blue',\n        line: {\n          color: \"white\",\n          width: 0.5,\n        },\n      },\n      // The following property is listed in the api. Not sure why typescript doesn't know about it.\n      // Styles the unselected bars in the histogram\n      //@ts-ignore\n      unselected: {\n        marker: { \n          color: unselectedBarColor,\n        }\n      },\n      hovertemplate: '[%{x})<br>Count: %{y}<extra></extra>', // Custom hover text\n    }\n  ];\n\n  const layout: PlotParams['layout'] = {\n    title: {text: title},\n    xaxis: {\n      title: {\n        text: xAxisTitle\n      },\n      // range: [Math.min(...data, 0), Math.max(...data)], // Range needs to get padding on both sides based on bin size. Consider calculating bins here.\n      showgrid: true,\n      zeroline: true,\n      showline: true,\n      mirror: 'ticks',\n      gridcolor: '#efefef',\n      gridwidth: 0.2,\n      zerolinecolor: '#969696',\n      zerolinewidth: 1,\n      linecolor: '#bababa',\n      linewidth: 1,\n      fixedrange: true, // Disable zooming\n      ticklabelposition: 'outside',\n    },\n    yaxis: {\n      title: {\n        text: 'Count'\n      },\n      showgrid: true,\n      zeroline: true,\n      showline: true,\n      mirror: 'ticks',\n      gridcolor: '#efefef',\n      gridwidth: 0.2,\n      zerolinecolor: '#969696',\n      zerolinewidth: 1,\n      linecolor: '#bababa',\n      linewidth: 1,\n      fixedrange: true, // Disable zooming\n      ticksuffix: ' ', // Add space between y axis and ticks\n    },\n    bargap: 0.03, // Gap between bars\n    dragmode: 'select',\n    selectdirection: 'h', // Allow selection in horizontal direction\n  };\n\n  const config: PlotParams['config'] = {\n    responsive: true, // Make the plot responsive\n    displayModeBar: false, // Hide the mode bar\n    displaylogo: false, // Hide the Plotly logo\n    scrollZoom: false, // Disable zooming with scroll\n    staticPlot: false, // Enable interactivity\n  };\n\n  return (\n    <div \n      className=\"plot-container\"\n      style={{\n        '--selection-color': selectorsColor,\n      } as React.CSSProperties}\n    >\n      <Plot data={plotlyData} layout={layout} config={config} />\n    </div>\n  );\n}\n\nexport default HistogramPlot;\n","// A test bar plotly plot\nimport React, { lazy } from 'react';\nimport { PlotParams } from 'react-plotly.js';\n\nconst Plot = lazy(() => import('react-plotly.js'));\n\nexport type TestPlotProps = {\n  yaxisTitle?: string;\n  xaxisTitle?: string;\n}\nexport const TestPlot = (props: TestPlotProps) => {\n  const data: PlotParams['data'] = [\n    {\n      x: [1, 2, 3, 4],\n      y: [10, 15, 13, 17],\n      type: 'bar' as const,\n      marker: { color: 'blue' },\n    },\n  ];\n\n  const layout = {\n    title: {text: 'Test Bar Plot'},\n    xaxis: { title: {text: props.xaxisTitle ?? 'X Axis'} },\n    yaxis: { title: {text: props.yaxisTitle ?? 'Y Axis'} },\n  };\n\n  return <Plot data={data} layout={layout} />;\n};\n\nexport default TestPlot;\n"],"names":["Plot","lazy","_jsx"],"mappings":"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"}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "td-plots",
+  "version": "1.0.1",
+  "description": "Custom React plotting components built with Plotly.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/asizemore/td-plots"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "react",
+    "plotly",
+    "charts",
+    "histogram",
+    "visualization"
+  ],
+  "author": "Ann Blevins",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "plotly.js": "^3.0.1",
+    "react-plotly.js": "^2.6.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.0.1",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^12.0.0",
+    "@storybook/addon-a11y": "^9.0.13",
+    "@storybook/addon-docs": "^9.0.13",
+    "@storybook/addon-onboarding": "^9.0.13",
+    "@storybook/addon-vitest": "^9.0.13",
+    "@storybook/react": "9.0.9",
+    "@storybook/react-vite": "^9.0.13",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^24.0.4",
+    "@types/plotly.js": "^3.0.2",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@types/react-plotly.js": "^2.6.3",
+    "@vitejs/plugin-react": "^4.6.0",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/ui": "^3.2.4",
+    "dotenv": "^16.5.0",
+    "jsdom": "^26.1.0",
+    "playwright": "^1.53.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "rollup": "^4.9.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.69.0",
+    "storybook": "^9.0.13",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.8.3",
+    "vite": "^5.4.19",
+    "vitest": "^3.2.4",
+    "vitest-browser-react": "^1.0.0",
+    "vitest-plugin": "link:@storybook/addon-vitest/vitest-plugin"
+  },
+  "scripts": {
+    "build": "npm run clean && npm run build:rollup && npm run build:types",
+    "build:rollup": "rollup -c",
+    "build:types": "tsc --project tsconfig.build.json --emitDeclarationOnly",
+    "clean": "rm -rf dist",
+    "test": "vitest run",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  }
+}