react-proportion-slider 0.9.0

package/README.md

@@ -0,0 +1,124 @@
+# React Proportion Slider
+
+> **Note:** This package is currently in beta
+
+A React component that allows users to adjust the proportion of two elements using a slider.
+
+## Installation
+
+(Not yet published to npm)
+
+```bash
+npm install react-proportion-slider
+```
+
+## Usage
+
+```tsx
+import React from "react";
+import { ProportionSlider } from "react-proportion-slider";
+
+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>
+  );
+}
+```
+
+## Future Features
+
+1. Make it possible to adjust the proportion of more than two elements
+2. Add more customization options
+
+## React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+### Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config({
+  extends: [
+    // Remove ...tseslint.configs.recommended and replace with this
+    ...tseslint.configs.recommendedTypeChecked,
+    // Alternatively, use this for stricter rules
+    ...tseslint.configs.strictTypeChecked,
+    // Optionally, add this for stylistic rules
+    ...tseslint.configs.stylisticTypeChecked,
+  ],
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+});
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from "eslint-plugin-react-x";
+import reactDom from "eslint-plugin-react-dom";
+
+export default tseslint.config({
+  plugins: {
+    // Add the react-x and react-dom plugins
+    "react-x": reactX,
+    "react-dom": reactDom,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended typescript rules
+    ...reactX.configs["recommended-typescript"].rules,
+    ...reactDom.configs.recommended.rules,
+  },
+});
+```

package/dev/App.css

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

package/dev/App.tsx

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,17 @@
+<!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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,28 @@
+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/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "react-proportion-slider",
+  "private": false,
+  "version": "0.9.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.2.0"
+  }
+}

package/src/components/DynamicChildPositioner.tsx

@@ -0,0 +1,143 @@
+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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,112 @@
+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

@@ -0,0 +1,68 @@
+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

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

package/src/vite-env.d.ts

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

package/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "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

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

package/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "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

@@ -0,0 +1,26 @@
+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`
+  },
+});