@wavv/ui 2.2.2-alpha.7 → 2.2.2

package/build/components/BarChart.d.ts

@@ -25,7 +25,7 @@ type Props = {
     /** The width of the Y axis */
     yAxisWidth?: number;
 } & ChartProps;
-declare const BarChart: ({ data, legend, keys, stacked, barGap, barCategoryGap, barSize, maxBarSize, vertical, hideYLabels, hideXLabels, diagonalXLabels, maxXLabelLength, xAxisHeight, yAxisWidth, axisColor, tooltipLegendPostfix, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const BarChart: ({ data, legend, keys, stacked, barGap, barCategoryGap, barSize, maxBarSize, vertical, hideYLabels, hideXLabels, diagonalXLabels, maxXLabelLength, xAxisHeight, yAxisWidth, axisColor, tooltipLegendPostfix, initialDimension, width, height, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export declare const DiagonalAxisTick: ({ x, y, payload, maxXLabelLength, axisColor, }: {
     x: number;
     y: number;

package/build/components/BarChart.js

@@ -3,21 +3,25 @@ import { useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, XAxis, YAxis } from "recharts";
 import { formatNumber } from "../utils/formatNumber.js";
-import { ChartContainer, ChartStyles, LegendContent, Tooltip } from "./ChartHelpers.js";
-const BarChart_BarChart = ({ data, legend, keys, stacked, barGap, barCategoryGap, barSize = 16, maxBarSize, vertical = false, hideYLabels, hideXLabels, diagonalXLabels, maxXLabelLength = 10, xAxisHeight = 22, yAxisWidth = 45, axisColor, tooltipLegendPostfix, ...rest })=>{
+import { ChartContainer, ChartStyles, LegendContent, Tooltip, getInitialDimension } from "./ChartHelpers.js";
+const BarChart_BarChart = ({ data, legend, keys, stacked, barGap, barCategoryGap, barSize = 16, maxBarSize, vertical = false, hideYLabels, hideXLabels, diagonalXLabels, maxXLabelLength = 10, xAxisHeight = 22, yAxisWidth = 45, axisColor, tooltipLegendPostfix, initialDimension, width, height, ...rest })=>{
     const { scale2 } = useTheme();
     const xAxisTick = diagonalXLabels ? (args)=>DiagonalAxisTick({
             ...args,
             maxXLabelLength,
             axisColor
         }) : {};
+    const initial = getInitialDimension(initialDimension, width, height);
     return /*#__PURE__*/ jsxs(ChartContainer, {
+        width: width,
+        height: height,
         ...rest,
         children: [
             /*#__PURE__*/ jsx(ChartStyles, {}),
             /*#__PURE__*/ jsx(ResponsiveContainer, {
                 width: "100%",
                 height: "100%",
+                initialDimension: initial,
                 children: /*#__PURE__*/ jsxs(BarChart, {
                     margin: {
                         top: 0,

package/build/components/ChartHelpers.d.ts

@@ -1,4 +1,4 @@
-import { type LegendPayload, type TooltipContentProps } from 'recharts';
+import { type LegendPayload, type ResponsiveContainerProps, type TooltipContentProps } from 'recharts';
 import type { Attributes } from './typeDefs/elementTypes';
 import type { Margin, MaxWidthHeight, WidthHeight } from './types';
 type ChartData = {
@@ -23,7 +23,11 @@ export type ChartProps = {
     axisColor?: string;
     /** The postfix to display after the legend value in the tooltip */
     tooltipLegendPostfix?: React.ReactNode;
-} & Margin & WidthHeight & MaxWidthHeight & ElAttributes;
+} & Pick<ResponsiveContainerProps, 'initialDimension'> & Margin & WidthHeight & MaxWidthHeight & ElAttributes;
+type InitialDimension = ResponsiveContainerProps['initialDimension'];
+type Width = WidthHeight['width'];
+type Height = WidthHeight['height'];
+export declare const getInitialDimension: (initialDimension: InitialDimension, width: Width, height: Height) => InitialDimension;
 export declare const ChartStyles: () => import("react/jsx-runtime").JSX.Element;
 export declare const ChartContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;

package/build/components/ChartHelpers.js

@@ -5,6 +5,13 @@ import { Tooltip } from "recharts";
 import { numberWithCommas } from "../utils/index.js";
 import Dot from "./Dot.js";
 import { marginProps } from "./helpers/styledProps.js";
+const getInitialDimension = (initialDimension, width, height)=>{
+    if (initialDimension) return initialDimension;
+    if ('number' == typeof width && 'number' == typeof height) return {
+        width,
+        height
+    };
+};
 const ChartStyles = ()=>/*#__PURE__*/ jsx(Global, {
         styles: {
             '.recharts-cartesian-grid-vertical line:first-of-type': {
@@ -118,4 +125,4 @@ const TooltipLabel = styled.div(({ theme })=>({
         color: theme.tooltip.color.subtext,
         marginBottom: 4
     }));
-export { ChartContainer, ChartStyles, LegendContent, ChartHelpers_Tooltip as Tooltip, TooltipContent };
+export { ChartContainer, ChartStyles, LegendContent, ChartHelpers_Tooltip as Tooltip, TooltipContent, getInitialDimension };

package/build/components/LineChart.d.ts

@@ -2,5 +2,5 @@ import { type ChartProps } from './ChartHelpers';
 type Props = {
     enableLegendToggle?: boolean;
 } & ChartProps;
-declare const LineChart: ({ data, legend, keys, enableLegendToggle, axisColor, tooltipLegendPostfix, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const LineChart: ({ data, legend, keys, enableLegendToggle, axisColor, tooltipLegendPostfix, initialDimension, width, height, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default LineChart;

package/build/components/LineChart.js

@@ -3,8 +3,8 @@ import { useTheme } from "@emotion/react";
 import { useState } from "react";
 import { CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, XAxis, YAxis } from "recharts";
 import { formatNumber } from "../utils/formatNumber.js";
-import { ChartContainer, ChartStyles, LegendContent, Tooltip } from "./ChartHelpers.js";
-const LineChart_LineChart = ({ data, legend, keys, enableLegendToggle, axisColor, tooltipLegendPostfix, ...rest })=>{
+import { ChartContainer, ChartStyles, LegendContent, Tooltip, getInitialDimension } from "./ChartHelpers.js";
+const LineChart_LineChart = ({ data, legend, keys, enableLegendToggle, axisColor, tooltipLegendPostfix, initialDimension, width, height, ...rest })=>{
     const [lines, setLines] = useState(keys);
     const { scale2 } = useTheme();
     const handleLineToggle = (item)=>{
@@ -19,13 +19,17 @@ const LineChart_LineChart = ({ data, legend, keys, enableLegendToggle, axisColor
         setLines((prevLines)=>toggleLines(prevLines));
     };
     const toggleData = enableLegendToggle && keys.length > 1 ? handleLineToggle : void 0;
+    const initial = getInitialDimension(initialDimension, width, height);
     return /*#__PURE__*/ jsxs(ChartContainer, {
+        width: width,
+        height: height,
         ...rest,
         children: [
             /*#__PURE__*/ jsx(ChartStyles, {}),
             /*#__PURE__*/ jsx(ResponsiveContainer, {
                 width: "100%",
                 height: "100%",
+                initialDimension: initial,
                 children: /*#__PURE__*/ jsxs(LineChart, {
                     margin: {
                         top: 8,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wavv/ui",
-	"version": "2.2.2-alpha.7",
+	"version": "2.2.2",
 	"type": "module",
 	"exports": {
 		".": {
@@ -65,12 +65,6 @@
 		"@chromatic-com/storybook": "^4.1.1",
 		"@emotion/babel-plugin": "^11.13.5",
 		"@emotion/react": "^11.14.0",
-		"@mdx-js/react": "^3.1.1",
-		"@mdx-js/rollup": "^3.1.1",
-		"@rollup/plugin-commonjs": "^28.0.9",
-		"@rollup/plugin-node-resolve": "^16.0.3",
-		"@rollup/plugin-terser": "^0.4.4",
-		"@rollup/plugin-typescript": "^11.1.6",
 		"@rsbuild/core": "1.5.17",
 		"@rsbuild/plugin-react": "^1.4.1",
 		"@rsbuild/plugin-svgr": "^1.2.2",
@@ -91,7 +85,6 @@
 		"@types/randomcolor": "^0.5.9",
 		"@types/react": "^19.2.2",
 		"@types/react-dom": "^19.2.2",
-		"@types/rollup-plugin-peer-deps-external": "^2.2.5",
 		"@types/signale": "^1.4.7",
 		"@types/webfontloader": "^1.6.38",
 		"chalk": "^5.6.2",
@@ -110,10 +103,6 @@
 		"react": "^19.2.0",
 		"react-dom": "^19.2.0",
 		"replace": "^1.2.2",
-		"rollup": "^4.52.5",
-		"rollup-plugin-dts": "^6.2.3",
-		"rollup-plugin-peer-deps-external": "^2.2.4",
-		"rollup-plugin-postcss": "^4.0.2",
 		"signale": "^1.4.0",
 		"storybook": "^9.1.15",
 		"storybook-react-rsbuild": "^2.1.2",
@@ -132,11 +121,8 @@
 		"start": "storybook dev -p 6006",
 		"dev": "rsbuild dev",
 		"preview": "rsbuild preview",
-		"roll-lib": "rollup -c --bundleConfigAsCjs",
 		"generate-tailwind-theme": "pnpm exec tsx scripts/generateThemeCSS.ts",
 		"build:lib": "rm -rf build && rslib build && pnpm run generate-tailwind-theme",
-		"build:watch": "pnpm run roll-lib -w",
-		"build:old": "rm -rf build && pnpm run roll-lib && pnpm run generate-tailwind-theme",
 		"build": "storybook build -o dist --disable-telemetry",
 		"lint": "biome lint",
 		"lint:ts": "tsc -p tsconfig-lint.json --noEmit",