Make fixture input hooks less generic (#1626)

docs/pages/docs/fixtures.mdx

@@ -8,6 +8,6 @@ The fixture is the main abstraction in React Cosmos. It represents a component e
   <Card title="Fixture Modules" href="/docs/fixtures/fixture-modules" />
   <Card title="File Conventions" href="/docs/fixtures/file-conventions" />
   <Card title="Decorators" href="/docs/fixtures/decorators" />
-  <Card title="Inputs" href="/docs/fixtures/inputs" />
+  <Card title="Fixture Inputs" href="/docs/fixtures/fixture-inputs" />
   <Card title="Viewport" href="/docs/fixtures/viewport" />
 </Cards>

docs/pages/docs/fixtures/_meta.json

@@ -2,6 +2,6 @@
   "fixture-modules": "",
   "file-conventions": "",
   "decorators": "",
-  "inputs": "",
+  "fixture-inputs": "",
   "viewport": ""
 }

docs/pages/docs/fixtures/inputs.mdx → docs/pages/docs/fixtures/fixture-inputs.mdx

@@ -1,6 +1,8 @@
 import { Callout } from 'nextra/components';
 
-# Inputs
+# Fixture Inputs
+
+The following APIs allow you manipulate components visually by defining fixture inputs in the [Control Panel](/docs/user-interface.md#control-panel).
 
 <Callout type="info">
   Prop inputs are created automatically for [Node
@@ -9,21 +11,19 @@ import { Callout } from 'nextra/components';
   without any configuration.
 </Callout>
 
-The following fixture APIs allow you to define component inputs in the [Control Panel](/docs/user-interface.md#control-panel).
-
-## `useInput`
+## `useFixtureInput`
 
 ```jsx filename="CounterButton.fixture.jsx"
-import { useInput } from 'react-cosmos/client';
+import { useFixtureInput } from 'react-cosmos/client';
 
 export default () => {
-  const [count, setCount] = useInput('count', 0);
+  const [count, setCount] = useFixtureInput('count', 0);
 
   return <CounterButton count={count} increment={() => setCount(count + 1)} />;
 };
 ```
 
-The `useInput` hook can be used with any type of serializable data, like strings, numbers and booleans, including objects and arrays.
+The `useFixtureInput` hook can be used with any type of serializable data, like strings, numbers and booleans, including objects and arrays.
 
 ### Number inputs
 
@@ -33,28 +33,28 @@ While focused on number inputs you can use the up and down arrow keys to increme
 
 The [Boolean Input Plugin](/docs/plugins#boolean-input-plugin) can be installed to turn boolean inputs into checkboxes.
 
-## `useSelect`
+## `useFixtureSelect`
 
 ```jsx filename="Button.fixture.jsx"
-import { useSelect } from 'react-cosmos/client';
+import { useFixtureSelect } from 'react-cosmos/client';
 
 export default () => {
-  const [buttonType] = useSelect('buttonType', {
+  const [buttonType] = useFixtureSelect('buttonType', {
     options: ['primary', 'secondary', 'danger'],
   });
 
   return <Button type={buttonType}>Press me</Button>;
 };
 ```
 
-`useSelect` also returns a setter as the second value in the return tuple, like the `useState` hook, in case you want to change the value programatically.
+`useFixtureSelect` also returns a setter as the second value in the return tuple, like the `useState` hook, in case you want to change the value programatically.
 
 ### Option groups
 
 You can group options by passing an array of objects with `group` and `options` properties.
 
 ```jsx
-const [color] = useSelect('color', {
+const [color] = useFixtureSelect('color', {
   options: [
     { group: 'warm', options: ['red', 'orange', 'yellow'] },
     { group: 'cold', options: ['blue', 'green', 'purple'] },
@@ -63,5 +63,6 @@ const [color] = useSelect('color', {
 ```
 
 <Callout type="info">
-  `useInput` and `useSelect` (and Cosmos in general) work great with TypeScript.
+  `useFixtureInput` and `useFixtureSelect` (and Cosmos in general) work great
+  with TypeScript.
 </Callout>

docs/pages/docs/user-interface.mdx

@@ -95,13 +95,13 @@ Inputs that provide powerful component data manipulation.
   src="/screenshots/props-panel.png"
 />
 
-Three categories of inputs are currently supported:
+Three categories of fixture inputs are currently supported:
 
 | Inputs      | Description                                                                                                                             |
 | ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |
 | Props       | Automatically generated based on React element props. Only works with [Node Fixtures](/docs/fixtures/fixture-modules.md#node-fixtures). |
 | Class State | Automatically generated based on React Class components, which are deprecated but supported indefinitely.                               |
-| Custom      | Defined using [fixture hooks](/docs/fixtures/inputs.md) that can be represented as text inputs or select dropdowns.                     |
+| Custom      | Defined using [fixture hooks](/docs/fixtures/fixture-inputs.md) that can be represented as text inputs or select dropdowns.             |
 
 ## Adjustable Panels
 

examples/todo/src/components/TodoContext.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useInput, useSelect } from 'react-cosmos/client';
+import { useFixtureInput, useFixtureSelect } from 'react-cosmos/client';
 import { Todo, TodoFilter } from '../types.js';
 
 type ContextValue = {
@@ -38,9 +38,9 @@ type ProviderProps = {
   children: React.ReactNode;
 };
 export function TodoProvider({ children }: ProviderProps) {
-  const [todos, setTodos] = useInput('todos', defaultTodos);
+  const [todos, setTodos] = useFixtureInput('todos', defaultTodos);
 
-  const [filter, setFilter] = useSelect<TodoFilter>('filter', {
+  const [filter, setFilter] = useFixtureSelect('filter', {
     defaultValue: 'all',
     options: ['all', 'active', 'completed'],
   });

examples/todo/src/components/TodoList/TodoItem.fixture.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { useInput } from 'react-cosmos/client';
+import { useFixtureInput } from 'react-cosmos/client';
 import { TodoItem } from './TodoItem.js';
 
 export default () => {
-  const [label, setLabel] = useInput('label', 'Eat the homework');
-  const [done, setDone] = useInput('done', false);
+  const [label, setLabel] = useFixtureInput('label', 'Eat the homework');
+  const [done, setDone] = useFixtureInput('done', false);
   return (
     <div className="todoapp">
       <section className="main">

examples/vite/src/CounterButton.fixture.tsx

@@ -1,9 +1,9 @@
 import { CounterButton } from 'examples-shared/components/CounterButton.js';
 import React from 'react';
-import { useInput } from 'react-cosmos/client';
+import { useFixtureInput } from 'react-cosmos/client';
 
 export default () => {
-  const [count, setCount] = useInput('count', 0);
+  const [count, setCount] = useFixtureInput('count', 0);
   return (
     <CounterButton
       suffix="times"

examples/vite/src/Planets.fixture.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useSelect } from 'react-cosmos/client';
+import { useFixtureSelect } from 'react-cosmos/client';
 
 const planets = [
   'Mercury',
@@ -15,7 +15,7 @@ const planets = [
 const exoplanets = ['Kepler-51 b', 'Kepler-51 c', 'Kepler-51 d'];
 
 export default () => {
-  const [planet] = useSelect('planet', {
+  const [planet] = useFixtureSelect('planet', {
     options: [
       { group: 'Solar System', options: planets },
       { group: 'Exoplanets', options: exoplanets },

examples/webpack/src/CounterButton.fixture.tsx

@@ -1,9 +1,9 @@
 import { CounterButton } from 'examples-shared/components/CounterButton.js';
 import React from 'react';
-import { useInput } from 'react-cosmos/client';
+import { useFixtureInput } from 'react-cosmos/client';
 
 export default () => {
-  const [count, setCount] = useInput('count', 0);
+  const [count, setCount] = useFixtureInput('count', 0);
   return (
     <CounterButton
       suffix="times"

examples/webpack/src/__fixtures__/controls/Inputs Panel.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import { useInput, useSelect } from 'react-cosmos/client';
+import { useFixtureInput, useFixtureSelect } from 'react-cosmos/client';
 
 export default () => {
-  const [name] = useInput('name', 'Mark Normand');
-  const [age] = useInput('age', 39);
-  const [comedy] = useInput('comedy', true);
-  const [special, setSpecial] = useSelect('special', {
+  const [name] = useFixtureInput('name', 'Mark Normand');
+  const [age] = useFixtureInput('age', 39);
+  const [comedy] = useFixtureInput('comedy', true);
+  const [special, setSpecial] = useFixtureSelect('special', {
     options: ['Still Got It', "Don't Be Yourself", 'Out to Lunch'],
     defaultValue: 'Out to Lunch',
   });
-  const [podcast] = useInput('podcast', {
+  const [podcast] = useFixtureInput('podcast', {
     name: 'Tuesdays with Stories',
     cohost: 'Joe List',
     episodes: 300,

packages/react-cosmos-renderer/src/__tests__/selects.tsx

@@ -6,7 +6,7 @@ import {
   ReactTestRenderer,
   ReactTestRendererJSON,
 } from 'react-test-renderer';
-import { useSelect } from '../fixture/useSelect/useSelect.js';
+import { useFixtureSelect } from '../fixture/useFixtureSelect/useFixtureSelect.js';
 import { getInputs } from '../testHelpers/fixtureState.js';
 import { testRenderer } from '../testHelpers/testRenderer.js';
 import { wrapDefaultExport } from '../testHelpers/wrapDefaultExport.js';
@@ -17,7 +17,7 @@ const options: Option[] = ['first', 'second', 'third'];
 
 function createFixtures({ defaultValue }: { defaultValue: Option }) {
   const MyComponent = () => {
-    const [value, setValue] = useSelect('selectName', {
+    const [value, setValue] = useFixtureSelect('selectName', {
       defaultValue,
       options,
     });

packages/react-cosmos-renderer/src/__tests__/selectsNoDefault.tsx

@@ -2,13 +2,13 @@ import retry from '@skidding/async-retry';
 import React from 'react';
 import { uuid } from 'react-cosmos-core';
 import { ReactTestRenderer, ReactTestRendererJSON } from 'react-test-renderer';
-import { useSelect } from '../fixture/useSelect/useSelect.js';
+import { useFixtureSelect } from '../fixture/useFixtureSelect/useFixtureSelect.js';
 import { testRenderer } from '../testHelpers/testRenderer.js';
 import { wrapDefaultExport } from '../testHelpers/wrapDefaultExport.js';
 
 function createFixtures() {
   const MyComponent = () => {
-    const [value, setValue] = useSelect('selectName', {
+    const [value, setValue] = useFixtureSelect('selectName', {
       options: ['first', 'second', 'third'],
     });
     return (

packages/react-cosmos-renderer/src/__tests__/valuesArray.tsx

@@ -2,7 +2,7 @@ import retry from '@skidding/async-retry';
 import React from 'react';
 import { createValue, uuid } from 'react-cosmos-core';
 import { ReactTestRenderer } from 'react-test-renderer';
-import { useInput } from '../fixture/useInput/useInput.js';
+import { useFixtureInput } from '../fixture/useFixtureInput/useFixtureInput.js';
 import { testRenderer } from '../testHelpers/testRenderer.js';
 import { wrapDefaultExport } from '../testHelpers/wrapDefaultExport.js';
 
@@ -15,7 +15,7 @@ type Profile = {
 
 function createFixtures({ defaultValue }: { defaultValue: Profile[] }) {
   const MyComponent = () => {
-    const [profiles] = useInput('profiles', defaultValue);
+    const [profiles] = useFixtureInput('profiles', defaultValue);
     return JSON.stringify(profiles, null, 2);
   };
   return wrapDefaultExport({

packages/react-cosmos-renderer/src/__tests__/valuesBoolean.tsx

@@ -6,13 +6,13 @@ import {
   ReactTestRendererJSON,
   act,
 } from 'react-test-renderer';
-import { useInput } from '../fixture/useInput/useInput.js';
+import { useFixtureInput } from '../fixture/useFixtureInput/useFixtureInput.js';
 import { testRenderer } from '../testHelpers/testRenderer.js';
 import { wrapDefaultExport } from '../testHelpers/wrapDefaultExport.js';
 
 function createFixtures({ defaultValue }: { defaultValue: boolean }) {
   const MyComponent = () => {
-    const [toggled, setToggled] = useInput('toggled', defaultValue);
+    const [toggled, setToggled] = useFixtureInput('toggled', defaultValue);
     return (
       <button onClick={() => setToggled(!toggled)}>{String(toggled)}</button>
     );

packages/react-cosmos-renderer/src/__tests__/valuesHotReload.tsx

@@ -6,7 +6,7 @@ import {
   ReactTestRendererJSON,
   act,
 } from 'react-test-renderer';
-import { useInput } from '../fixture/useInput/useInput.js';
+import { useFixtureInput } from '../fixture/useFixtureInput/useFixtureInput.js';
 import { getInputs } from '../testHelpers/fixtureState.js';
 import { testRenderer } from '../testHelpers/testRenderer.js';
 import { wrapDefaultExport } from '../testHelpers/wrapDefaultExport.js';
@@ -25,8 +25,8 @@ function createFixtures({
   defaultToggled = false,
 }: CreateFixtureArgs = {}) {
   const MyComponent = () => {
-    const [count, setCount] = useInput(countName, defaultCount);
-    const [toggled, setToggled] = useInput(toggledName, defaultToggled);
+    const [count, setCount] = useFixtureInput(countName, defaultCount);
+    const [toggled, setToggled] = useFixtureInput(toggledName, defaultToggled);
     return (
       <>
         <button onClick={() => setCount(prevCount => prevCount + 1)}>

packages/react-cosmos-renderer/src/__tests__/valuesNumber.tsx

@@ -6,13 +6,13 @@ import {
   ReactTestRendererJSON,
   act,
 } from 'react-test-renderer';
-import { useInput } from '../fixture/useInput/useInput.js';
+import { useFixtureInput } from '../fixture/useFixtureInput/useFixtureInput.js';
 import { testRenderer } from '../testHelpers/testRenderer.js';
 import { wrapDefaultExport } from '../testHelpers/wrapDefaultExport.js';
 
 function createFixtures({ defaultValue }: { defaultValue: number }) {
   const MyComponent = () => {
-    const [count, setCount] = useInput('count', defaultValue);
+    const [count, setCount] = useFixtureInput('count', defaultValue);
     return (
       <button onClick={() => setCount(prevCount => prevCount + 1)}>
         {count} clicks

packages/react-cosmos-renderer/src/__tests__/valuesObject.tsx

@@ -6,7 +6,7 @@ import {
   ReactTestRendererJSON,
   act,
 } from 'react-test-renderer';
-import { useInput } from '../fixture/useInput/useInput.js';
+import { useFixtureInput } from '../fixture/useFixtureInput/useFixtureInput.js';
 import { testRenderer } from '../testHelpers/testRenderer.js';
 import { wrapDefaultExport } from '../testHelpers/wrapDefaultExport.js';
 
@@ -19,7 +19,7 @@ type Profile = {
 
 function createFixtures({ defaultValue }: { defaultValue: Profile }) {
   const MyComponent = () => {
-    const [profile, setProfile] = useInput('profile', defaultValue);
+    const [profile, setProfile] = useFixtureInput('profile', defaultValue);
     return (
       <>
         <p>{JSON.stringify(profile, null, 2)}</p>

packages/react-cosmos-renderer/src/__tests__/valuesString.tsx

@@ -6,13 +6,13 @@ import {
   ReactTestRendererJSON,
   act,
 } from 'react-test-renderer';
-import { useInput } from '../fixture/useInput/useInput.js';
+import { useFixtureInput } from '../fixture/useFixtureInput/useFixtureInput.js';
 import { testRenderer } from '../testHelpers/testRenderer.js';
 import { wrapDefaultExport } from '../testHelpers/wrapDefaultExport.js';
 
 function createFixtures({ defaultValue }: { defaultValue: string }) {
   const MyComponent = () => {
-    const [value, setValue] = useInput('name', defaultValue);
+    const [value, setValue] = useFixtureInput('name', defaultValue);
     return (
       <input
         type="text"

packages/react-cosmos-renderer/src/client.ts

@@ -1,10 +1,11 @@
 export * from './fixture/FixtureCapture/FixtureCapture.js';
 export * from './fixture/FixtureContext.js';
 export * from './fixture/Viewport.js';
+export * from './fixture/useFixtureInput/useFixtureInput.js';
+export * from './fixture/useFixtureInput/useValue.js';
+export * from './fixture/useFixtureSelect/useFixtureSelect.js';
+export * from './fixture/useFixtureSelect/useSelect.js';
 export * from './fixture/useFixtureState.js';
-export * from './fixture/useInput/useInput.js';
-export * from './fixture/useInput/useValue.js';
-export * from './fixture/useSelect/useSelect.js';
 export * from './fixtureLoaders/ClientFixtureLoader.js';
 export * from './rendererConnect/RendererContext.js';
 export * from './rendererConnect/RendererProvider.js';

packages/react-cosmos-renderer/src/fixture/useInput/useInput.ts → packages/react-cosmos-renderer/src/fixture/useFixtureInput/useFixtureInput.ts

@@ -2,7 +2,7 @@ import { useCurrentInputValue } from './useCurrentInputValue.js';
 import { useInputFixtureState } from './useInputFixtureState.js';
 import { useSetInputValue } from './useSetInputValue.js';
 
-export function useInput<T>(
+export function useFixtureInput<T>(
   inputName: string,
   defaultValue: T
 ): [T, React.Dispatch<React.SetStateAction<T>>] {

packages/react-cosmos-renderer/src/fixture/useFixtureInput/useValue.ts

@@ -0,0 +1,14 @@
+import { useFixtureInput } from './useFixtureInput.js';
+
+type Opts<T> = {
+  defaultValue: T;
+};
+
+// NOTE: This is an alias for useFixtureInput kept for backwards compatibility
+// with Cosmos versions older than 6.1
+export function useValue<T>(
+  inputName: string,
+  opts: Opts<T>
+): [T, React.Dispatch<React.SetStateAction<T>>] {
+  return useFixtureInput(inputName, opts.defaultValue);
+}

packages/react-cosmos-renderer/src/fixture/useSelect/useSelect.ts → packages/react-cosmos-renderer/src/fixture/useFixtureSelect/useFixtureSelect.ts

@@ -3,7 +3,7 @@ import { useCurrentSelectValue } from './useCurrentSelectValue.js';
 import { useSelectFixtureState } from './useSelectFixtureState.js';
 import { useSetSelectValue } from './useSetSelectValue.js';
 
-export function useSelect<Option extends string>(
+export function useFixtureSelect<Option extends string>(
   selectName: string,
   args: UseSelectArgs<Option>
 ): [Option, SetSelectValue<Option>] {