feat(InputPercent): add InputPercent component

src/components/index.ts

@@ -8,6 +8,7 @@ export * from './fullscreen/index.js';
 export * from './header/index.js';
 export * from './hooks/index.js';
 export * from './info-panel/index.js';
+export * from './input-percent/index.js';
 export * from './logger/index.js';
 export * from './root-layout/index.js';
 export * from './split-pane/index.js';

src/components/input-percent/InputPercent.tsx

@@ -0,0 +1,41 @@
+import { InputGroup } from '@blueprintjs/core';
+import type { ChangeEvent } from 'react';
+import { useCallback } from 'react';
+
+export interface InputPercentProps {
+  /**
+   * Between 0 and 1
+   */
+  value: number;
+  onChange: (value: number) => void;
+  digits?: number;
+}
+
+export function InputPercent(props: InputPercentProps) {
+  const { value, onChange: inputPercentChange, digits } = props;
+
+  const onChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const newValue = event.currentTarget.value;
+
+      if (Number(newValue) < 0 || Number(newValue) > 100) {
+        return;
+      }
+
+      inputPercentChange(Number(newValue) / 100);
+    },
+    [inputPercentChange],
+  );
+
+  return (
+    <InputGroup
+      value={String((value * 100).toFixed(digits))}
+      onChange={onChange}
+      leftIcon="percentage"
+      type="number"
+      min={0}
+      max={100}
+      step={1}
+    />
+  );
+}

src/components/input-percent/index.ts

@@ -0,0 +1 @@
+export * from './InputPercent.js';

stories/components/input-percent.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import type { InputPercentProps } from '../../src/components/index.js';
+import { InputPercent } from '../../src/components/index.js';
+
+export default {
+  title: 'Forms / InputPercent',
+  component: InputPercent,
+  decorators: (Story) => {
+    return (
+      <div style={{ width: 200, padding: 5 }}>
+        <Story />
+      </div>
+    );
+  },
+} as Meta;
+
+type Story = StoryObj<InputPercentProps>;
+
+export const Control = {
+  argTypes: {
+    onChange: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    value: 0.2,
+    onChange: () => {},
+    digits: undefined,
+  },
+} satisfies Story;
+
+export const Functional = {
+  argTypes: {
+    onChange: {
+      table: {
+        disable: true,
+      },
+    },
+    value: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  render: (props) => {
+    const [state, setState] = useState(0);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
+        <InputPercent {...props} value={state} onChange={setState} />
+        <p>State: {state}</p>
+      </div>
+    );
+  },
+} satisfies Story;

stories/components/input.stories.tsx

@@ -1,12 +1,14 @@
 import type { FormGroupProps, InputGroupProps } from '@blueprintjs/core';
 import { FormGroup, InputGroup } from '@blueprintjs/core';
 import styled from '@emotion/styled';
+import type { Meta } from '@storybook/react';
 import type { ChangeEvent } from 'react';
 import { useState } from 'react';
 
 export default {
   title: 'Forms / Input',
-};
+  component: InputGroup,
+} as Meta;
 
 const ExampleGroup = styled.div`
   display: flex;