npm - react-proportion-slider - Versions diffs - 0.9.0 → 0.9.2 - Mend

react-proportion-slider 0.9.0 → 0.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/package.json +27 -5
package/dev/App.css +0 -13
package/dev/App.tsx +0 -49
package/dev/index.html +0 -17
package/dev/main.tsx +0 -9
package/eslint.config.js +0 -28
package/src/components/DynamicChildPositioner.tsx +0 -143
package/src/components/Proportion.tsx +0 -55
package/src/components/ProportionSlider.tsx +0 -112
package/src/components/SliderKnob.tsx +0 -68
package/src/index.ts +0 -1
package/src/vite-env.d.ts +0 -1
package/tsconfig.app.json +0 -26
package/tsconfig.json +0 -7
package/tsconfig.node.json +0 -24
package/vite.config.ts +0 -26

package/package.json CHANGED Viewed

@@ -1,20 +1,35 @@
 {
   "name": "react-proportion-slider",
   "private": false,
-  "version": "0.9.0",
+  "version": "0.9.2",
   "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/react-proportion-slider.umd.js",
+  "module": "./dist/react-proportion-slider.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/react-proportion-slider.es.js",
+      "require": "./dist/react-proportion-slider.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest"
   },
   "dependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
+    "@testing-library/react": "^14.2.1",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.4",
@@ -22,8 +37,15 @@
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^15.15.0",
+    "jsdom": "^24.0.0",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.24.1",
-    "vite": "^6.2.0"
+    "vite": "^6.2.0",
+    "vite-plugin-dts": "^4.5.3",
+    "vitest": "^3.0.8"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
   }
 }

package/dev/App.css DELETED Viewed

@@ -1,13 +0,0 @@
-html,body {
-    height: 100%;
-}
-#root{
-    height: 100%;
-    background-color: #11110D;
-}
-* {
-    font-family: Roboto, sans-serif;
-    font-weight: 200;
-}

package/dev/App.tsx DELETED Viewed

@@ -1,49 +0,0 @@
-import React from "react";
-import "./App.css";
-import { ProportionSlider } from "../src/components/ProportionSlider";
-function App() {
-  const [proportions, setProportions] = React.useState<[number, number]>([
-    50, 50,
-  ]);
-  return (
-    <div
-      style={{
-        height: "100%",
-        flex: 1,
-        padding: "20px 200px",
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-      }}
-    >
-      <ProportionSlider
-        value={proportions}
-        proportions={[
-          {
-            name: "Skill",
-            backgroundColor: "#31332E",
-          },
-          {
-            name: "3.7 Sonnet",
-            backgroundColor: "#5f625C",
-          },
-        ]}
-        onChange={(change) => {
-          setProportions(change);
-        }}
-        sliderOptions={{
-          width: 5,
-          gap: 5,
-          backgroundColor: "#EC1308",
-        }}
-        options={{
-          height: 50,
-          displayValueType: "percentage",
-        }}
-      />
-    </div>
-  );
-}
-export default App;

package/dev/index.html DELETED Viewed

@@ -1,17 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Dev Environment</title>
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@200;400;700&display=swap" rel="stylesheet">
-</head>
-<body>
-  <div id="root"></div>
-  <script type="module" src="/dev/main.tsx"></script>
-</body>
-</html>

package/dev/main.tsx DELETED Viewed

@@ -1,9 +0,0 @@
-import React, { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App.tsx";
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-);

package/eslint.config.js DELETED Viewed

@@ -1,28 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-export default tseslint.config(
-  { ignores: ['dist'] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
-    },
-  },
-)

package/src/components/DynamicChildPositioner.tsx DELETED Viewed

@@ -1,143 +0,0 @@
-import React, { useRef, useState, useMemo, useEffect } from "react";
-type DynamicChildPositionerProps = {
-  rightNode: React.ReactNode;
-  leftNode: React.ReactNode;
-  options: {
-    primary: "left" | "right";
-  };
-  backgroundColor?: string;
-  width: number | string;
-};
-export const DynamicChildPositioner = ({
-  rightNode,
-  leftNode,
-  options: { primary },
-  width,
-  backgroundColor = "gray",
-}: DynamicChildPositionerProps) => {
-  const ref = useRef<HTMLDivElement | null>(null);
-  const refRight = useRef<HTMLDivElement | null>(null);
-  const refLeft = useRef<HTMLDivElement | null>(null);
-  const [fitStatus, setFitStatus] = useState<"both" | "primary" | "none">(
-    "both"
-  );
-  const rightStyle = useMemo(() => {
-    const rightNoSpace =
-      fitStatus === "none" || (fitStatus === "primary" && primary === "left");
-    if (primary === "right") {
-      return rightNoSpace ? STYLES["BOTTOM_RIGHT"] : STYLES["RIGHT"];
-    } else {
-      return rightNoSpace ? STYLES["TOP_LEFT"] : STYLES["RIGHT"];
-    }
-  }, [fitStatus, primary]);
-  const leftStyle = useMemo(() => {
-    const leftNoSpace =
-      fitStatus === "none" || (fitStatus === "primary" && primary === "right");
-    if (primary === "left") {
-      return leftNoSpace ? STYLES["BOTTOM_LEFT"] : STYLES["LEFT"];
-    } else {
-      return leftNoSpace ? STYLES["TOP_RIGHT"] : STYLES["LEFT"];
-    }
-  }, [fitStatus, primary]);
-  useEffect(() => {
-    const interval = setInterval(() => {
-      const textRight = refRight.current;
-      const textLeft = refLeft.current;
-      const container = ref.current;
-      if (!container || !textRight || !textLeft) {
-        return;
-      }
-      const containerRectWidth = container.getBoundingClientRect().width;
-      const rightWidth = textRight.getBoundingClientRect().width;
-      const leftWidth = textLeft.getBoundingClientRect().width;
-      const { primaryWidth, secondaryWidth } =
-        primary === "left"
-          ? { primaryWidth: leftWidth, secondaryWidth: rightWidth }
-          : { primaryWidth: rightWidth, secondaryWidth: leftWidth };
-      const primaryCanFit = primaryWidth + 2 * GAP <= containerRectWidth;
-      const secondaryCanFit =
-        secondaryWidth + primaryWidth + 3 * GAP <= containerRectWidth;
-      const fitStatus = primaryCanFit
-        ? secondaryCanFit
-          ? "both"
-          : "primary"
-        : "none";
-      setFitStatus(fitStatus);
-    }, 1000 / 30);
-    return () => clearInterval(interval);
-  }, [ref, refRight, refLeft, primary]);
-  return (
-    <div
-      ref={ref}
-      style={{
-        position: "relative",
-        width,
-        backgroundColor,
-        borderRadius: "5px",
-        color: "white",
-      }}
-    >
-      <div ref={refLeft} style={leftStyle}>
-        {leftNode}
-      </div>
-      <div ref={refRight} style={rightStyle}>
-        {rightNode}
-      </div>
-    </div>
-  );
-};
-const GAP = 5;
-const COMMON_STYLES: React.CSSProperties = {
-  position: "absolute",
-  transition: "all 200ms cubic-bezier(.47,1.64,.41,.8)",
-  transitionProperty: "transform, top, left, bottom, right",
-};
-const STYLES: Record<string, React.CSSProperties> = {
-  TOP_LEFT: {
-    ...COMMON_STYLES,
-    left: GAP,
-    top: -GAP,
-    transform: "translateY(-100%)",
-  },
-  LEFT: {
-    ...COMMON_STYLES,
-    left: GAP,
-    top: "50%",
-    transform: "translateY(-50%)",
-  },
-  BOTTOM_LEFT: {
-    ...COMMON_STYLES,
-    left: GAP,
-    bottom: -GAP,
-    transform: "translateY(100%)",
-  },
-  TOP_RIGHT: {
-    ...COMMON_STYLES,
-    right: GAP,
-    top: -GAP,
-    transform: "translateY(-100%)",
-  },
-  RIGHT: {
-    ...COMMON_STYLES,
-    right: GAP,
-    top: "50%",
-    transform: "translateY(-50%)",
-  },
-  BOTTOM_RIGHT: {
-    ...COMMON_STYLES,
-    right: GAP,
-    bottom: -GAP,
-    transform: "translateY(100%)",
-  },
-};

package/src/components/Proportion.tsx DELETED Viewed

@@ -1,55 +0,0 @@
-import { DynamicChildPositioner } from "./DynamicChildPositioner";
-import { ProportionDetail, DisplayValueTypes } from "./ProportionSlider";
-export type ProportionProp = {
-  value: number;
-  total: number;
-  detail: ProportionDetail;
-  width: number | string;
-  anchorName: "left" | "right";
-  displayValueType: DisplayValueTypes;
-  backgroundColor?: string;
-};
-export const Proportion = ({
-  value,
-  total,
-  detail,
-  width,
-  anchorName,
-  displayValueType,
-  backgroundColor = "gray",
-}: ProportionProp) => {
-  const nameNode = (
-    <div
-      style={{
-        userSelect: "none",
-        whiteSpace: "nowrap",
-      }}
-    >
-      {detail.name}
-    </div>
-  );
-  const percentNode =
-    displayValueType === "percentage" ? (
-      <div
-        style={{
-          userSelect: "none",
-          whiteSpace: "nowrap",
-        }}
-      >
-        {`${Math.round((value * 100) / total)}%`}
-      </div>
-    ) : null;
-  return (
-    <DynamicChildPositioner
-      width={width}
-      rightNode={anchorName === "right" ? nameNode : percentNode}
-      leftNode={anchorName === "left" ? nameNode : percentNode}
-      options={{
-        primary: anchorName,
-      }}
-      backgroundColor={backgroundColor}
-    ></DynamicChildPositioner>
-  );
-};

package/src/components/ProportionSlider.tsx DELETED Viewed

@@ -1,112 +0,0 @@
-import { useCallback, useRef } from "react";
-import { SliderKnob } from "./SliderKnob";
-import { Proportion } from "./Proportion";
-export type ProportionDetail = {
-  name: string;
-  backgroundColor?: string;
-};
-export type DisplayValueTypes = "percentage" | "none";
-export type ProportionSliderProps = {
-  value: [number, number];
-  proportions: [ProportionDetail, ProportionDetail];
-  onChange: (change: [number, number]) => void;
-  sliderOptions?: {
-    width: number;
-    gap: number;
-    backgroundColor?: string;
-  };
-  options?: {
-    height: number;
-    displayValueType: DisplayValueTypes;
-  };
-};
-export const ProportionSlider = ({
-  value,
-  proportions,
-  onChange,
-  sliderOptions = {
-    width: 5,
-    gap: 2,
-  },
-  options = {
-    height: 20,
-    displayValueType: "percentage",
-  },
-}: ProportionSliderProps) => {
-  const refWidth = useRef<number | null>(null);
-  const total = value[0] + value[1];
-  const refStartX = useRef<number | null>(null);
-  const refValue1Start = useRef<number | null>(null);
-  const refValue2Start = useRef<number | null>(null);
-  const sliderWidth = sliderOptions.width + sliderOptions.gap * 2;
-  const onDragStart = useCallback(
-    (px: number): void => {
-      refStartX.current = px;
-      refValue1Start.current = value[0];
-      refValue2Start.current = value[1];
-    },
-    [value]
-  );
-  const onDragEnd = useCallback(() => {
-    refStartX.current = null;
-    refValue1Start.current = null;
-    refValue2Start.current = null;
-  }, []);
-  const onDrag = useCallback(
-    (px: number): void => {
-      if (refStartX.current === null) return;
-      const diffPx = px - refStartX.current;
-      const totalWidthPx = refWidth.current! - sliderWidth;
-      const total = refValue1Start.current! + refValue2Start.current!;
-      let newValue1 = refValue1Start.current! + (diffPx / totalWidthPx) * total;
-      newValue1 = Math.max(0, Math.min(total, newValue1));
-      onChange([newValue1, total - newValue1]);
-    },
-    [onChange, sliderWidth]
-  );
-  return (
-    <div
-      ref={(el) => {
-        if (el) {
-          refWidth.current = el.getBoundingClientRect().width;
-        }
-      }}
-      style={{
-        display: "flex",
-        flexDirection: "row",
-        height: options.height,
-      }}
-    >
-      <Proportion
-        value={value[0]}
-        backgroundColor={proportions[0].backgroundColor}
-        total={total}
-        width={`calc(${(value[0] * 100) / total}% - ${sliderWidth / 2}px)`}
-        detail={proportions[0]}
-        anchorName="left"
-        displayValueType={options.displayValueType}
-      />
-      <SliderKnob
-        backgroundColor={sliderOptions.backgroundColor}
-        width={sliderOptions.width}
-        gap={sliderOptions.gap}
-        onDragStart={onDragStart}
-        onDrag={onDrag}
-        onDragEnd={onDragEnd}
-      />
-      <Proportion
-        value={value[1]}
-        total={total}
-        backgroundColor={proportions[1].backgroundColor}
-        width={`calc(${(value[1] * 100) / total}% - ${sliderWidth / 2}px)`}
-        detail={proportions[1]}
-        anchorName="right"
-        displayValueType={options.displayValueType}
-      />
-    </div>
-  );
-};

package/src/components/SliderKnob.tsx DELETED Viewed

@@ -1,68 +0,0 @@
-import { useRef, useEffect } from "react";
-export type SliderKnobProps = {
-  width: number;
-  gap: number;
-  backgroundColor?: string;
-  onDragStart: (px: number) => void;
-  onDrag: (px: number) => void;
-  onDragEnd: () => void;
-};
-export const SliderKnob = ({
-  width,
-  gap,
-  backgroundColor = "red",
-  onDrag,
-  onDragStart,
-  onDragEnd,
-}: SliderKnobProps) => {
-  const ref = useRef<HTMLDivElement | null>(null);
-  const refIsDragging = useRef<boolean>(false);
-  useEffect(() => {
-    const onMouseDown = (e: MouseEvent) => {
-      if (e.target !== ref.current) {
-        return false;
-      }
-      refIsDragging.current = true;
-      onDragStart(e.clientX);
-      return true;
-    };
-    const onMouseMove = (e: MouseEvent) => {
-      if (!refIsDragging.current) {
-        return false;
-      }
-      onDrag(e.clientX);
-      return true;
-    };
-    const onMouseUp = () => {
-      if (!refIsDragging.current) {
-        return false;
-      }
-      refIsDragging.current = false;
-      onDragEnd();
-      return true;
-    };
-    window.addEventListener("mousedown", onMouseDown);
-    window.addEventListener("mousemove", onMouseMove);
-    window.addEventListener("mouseup", onMouseUp);
-    return () => {
-      window.removeEventListener("mousedown", onMouseDown);
-      window.removeEventListener("mousemove", onMouseMove);
-      window.removeEventListener("mouseup", onMouseUp);
-    };
-  }, [onDragStart, onDrag, onDragEnd]);
-  return (
-    <div
-      ref={ref}
-      style={{
-        width: `${width}px`,
-        margin: `${gap}px ${gap}px`,
-        alignSelf: "stretch",
-        background: backgroundColor,
-        borderRadius: "2px",
-        cursor: "ew-resize",
-      }}
-    ></div>
-  );
-};

package/src/index.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export * from "./components/ProportionSlider";

package/src/vite-env.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- /// <reference types="vite/client" />

package/tsconfig.app.json DELETED Viewed

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"]
-}

package/tsconfig.json DELETED Viewed

@@ -1,7 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
-}

package/tsconfig.node.json DELETED Viewed

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2022",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}

package/vite.config.ts DELETED Viewed

@@ -1,26 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [react()],
-  build: {
-    rollupOptions: {
-      external: ["react", "react-dom"],
-      output: {
-        globals: {
-          react: "React",
-          "react-dom": "ReactDOM",
-        },
-      },
-    },
-    lib: {
-      entry: "src/index.ts",
-      name: "react-proportion-slider",
-      fileName: (format) => `my-react-library.${format}.js`,
-    },
-  },
-  server: {
-    open: "/dev/index.html", // Open the dev environment on `npm run dev`
-  },
-});