chore: storybook infer controls & component types improvements

src/accordion/stories/Accordion.component.tsx

@@ -1,46 +1,14 @@
 import * as React from "react";
 
 import {
-  useAccordionState,
   Accordion,
-  AccordionTrigger,
   AccordionPanel,
-  AccordionState,
+  AccordionTrigger,
+  useAccordionState,
+  AccordionInitialState,
 } from "renderless-components";
 
-export interface AppProps {
-  /**
-   * The current selected accordion's `id`.
-   */
-  selectedId?: AccordionState["currentId"];
-  /**
-   * Initial selected accordion's `id`.
-   * @default []
-   */
-  selectedIds?: AccordionState["currentId"][];
-  /**
-   * Whether the accodion selection should be manual.
-   * @default true
-   */
-  manual?: boolean;
-  /**
-   * Whether to loop through the accordion triggers
-   * @default false
-   */
-  loop?: boolean;
-  /**
-   * Allow to toggle accordion items
-   * @default false
-   */
-  allowToggle?: boolean;
-  /**
-   * Allow to open multiple accordion items
-   * @default false
-   */
-  allowMultiple?: boolean;
-}
-
-export const App: React.FC<AppProps> = props => {
+export const App: React.FC<AccordionInitialState> = props => {
   const state = useAccordionState(props);
 
   // const initialProps = {

src/accordion/stories/Accordion.stories.tsx

@@ -1,12 +1,19 @@
 import * as React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta } from "@storybook/react";
 
 import { accordionTemplate, accordionTemplateJs } from "./templates";
 import { App as Accordion } from "./Accordion.component";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
+import { AccordionState } from "../AccordionState";
+import { CompositeState } from "reakit/ts";
+
+export const Default: React.FC<Omit<
+  Partial<AccordionState>,
+  keyof CompositeState
+>> = args => <Accordion {...args} />;
 
 export default {
-  component: Accordion,
+  component: Default,
   title: "Accordion",
   parameters: {
     preview: createPreviewTabs({
@@ -16,21 +23,17 @@ export default {
   },
 } as Meta;
 
-const Base: Story = args => <Accordion {...args} />;
-
-export const Default = Base.bind({});
-
-export const DefaultSelected = Base.bind({});
+export const DefaultSelected = Default.bind({});
 DefaultSelected.args = { selectedId: "accordion3" };
 
-export const AutoSelect = Base.bind({});
+export const AutoSelect = Default.bind({});
 AutoSelect.args = { manual: false };
 
-export const Loop = Base.bind({});
+export const Loop = Default.bind({});
 Loop.args = { loop: true };
 
-export const AllowToggle = Base.bind({});
+export const AllowToggle = Default.bind({});
 AllowToggle.args = { allowToggle: true };
 
-export const AllowMultiple = Base.bind({});
+export const AllowMultiple = Default.bind({});
 AllowMultiple.args = { allowMultiple: true };

src/accordion/stories/AccordionStyled.component.tsx

@@ -1,47 +1,15 @@
 import * as React from "react";
 
 import {
-  useAccordionState,
   Accordion,
-  AccordionTrigger,
   AccordionPanel,
-  AccordionState,
+  AccordionTrigger,
+  useAccordionState,
+  AccordionInitialState,
 } from "renderless-components";
 
-interface AppProps {
-  /**
-   * The current selected accordion's `id`.
-   */
-  selectedId?: AccordionState["currentId"];
-  /**
-   * Initial selected accordion's `id`.
-   * @default []
-   */
-  selectedIds?: AccordionState["currentId"][];
-  /**
-   * Whether the accodion selection should be manual.
-   * @default true
-   */
-  manual?: boolean;
-  /**
-   * Whether to loop through the accordion triggers
-   * @default false
-   */
-  loop?: boolean;
-  /**
-   * Allow to open multiple accordion items
-   * @default false
-   */
-  allowMultiple?: boolean;
-  /**
-   * Allow to toggle accordion items
-   * @default false
-   */
-  allowToggle?: boolean;
-}
-
 // Styled based on https://www.w3.org/TR/wai-aria-practices-1.2/examples/accordion/accordion.html
-export const App: React.FC<AppProps> = props => {
+export const App: React.FC<AccordionInitialState> = props => {
   const state = useAccordionState(props);
 
   // const initialProps = {

src/accordion/stories/AccordionStyled.stories.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta } from "@storybook/react";
+import { CompositeState } from "reakit";
 
 import {
   accordionStyledTemplate,
@@ -9,9 +10,15 @@ import {
 import "./AccordionStyled.css";
 import { App as Accordion } from "./AccordionStyled.component";
 import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
+import { AccordionState } from "../AccordionState";
+
+export const Default: React.FC<Omit<
+  Partial<AccordionState>,
+  keyof CompositeState
+>> = args => <Accordion {...args} />;
 
 export default {
-  component: Accordion,
+  component: Default,
   title: "AccordionStyled",
   parameters: {
     preview: createPreviewTabs({
@@ -22,21 +29,17 @@ export default {
   },
 } as Meta;
 
-const Base: Story = args => <Accordion {...args} />;
-
-export const Default = Base.bind({});
-
-export const DefaultSelected = Base.bind({});
+export const DefaultSelected = Default.bind({});
 DefaultSelected.args = { selectedId: "accordion3" };
 
-export const AutoSelect = Base.bind({});
+export const AutoSelect = Default.bind({});
 AutoSelect.args = { manual: false };
 
-export const Loop = Base.bind({});
+export const Loop = Default.bind({});
 Loop.args = { loop: true };
 
-export const AllowToggle = Base.bind({});
+export const AllowToggle = Default.bind({});
 AllowToggle.args = { allowToggle: true };
 
-export const AllowMultiple = Base.bind({});
+export const AllowMultiple = Default.bind({});
 AllowMultiple.args = { allowMultiple: true };

src/breadcrumbs/stories/Breadcrumbs.component.tsx

@@ -2,9 +2,7 @@ import * as React from "react";
 
 import { Breadcrumbs, BreadcrumbLink } from "renderless-components";
 
-export interface AppProps {}
-
-export const App: React.FC<AppProps> = props => {
+export const App: React.FC = props => {
   return (
     <Breadcrumbs className="breadcrumb">
       <ol>

src/meter/stories/Meter.component.tsx

@@ -1,9 +1,14 @@
 import * as React from "react";
 import { css, keyframes } from "emotion";
 
-import { Meter, useMeterState, MeterStateReturn } from "renderless-components";
+import {
+  Meter,
+  useMeterState,
+  MeterStateReturn,
+  MeterInitialState,
+} from "renderless-components";
 
-export interface AppProps {
+export interface AppProps extends MeterInitialState {
   /**
    * Adds a label to meter.
    * @default false
@@ -19,44 +24,6 @@ export interface AppProps {
    * @default false
    */
   withStripeAnimation?: boolean;
-  /**
-   * The `value` of the meter indicator.
-   *
-   * If `undefined`/`not valid` the meter bar will be equal to `min`
-   * @default 0
-   */
-  value?: number;
-  /**
-   * The minimum value of the meter
-   * @default 0
-   */
-  min?: number;
-  /**
-   * The maximum value of the meter
-   * @default 1
-   */
-  max?: number;
-  /**
-   * The higher limit of min range.
-   *
-   * Defaults to `min`.
-   * @default 0
-   */
-  low?: number;
-  /**
-   * The lower limit of max range.
-   *
-   * Defaults to `max`.
-   * @default 1
-   */
-  high?: number;
-  /**
-   * The lower limit of max range.
-   *
-   * Defaults to `median of low & high`.
-   * @default 0.5
-   */
-  optimum?: number;
 }
 
 export const App: React.FC<AppProps> = props => {

src/number-input/stories/NumberInput.component.tsx

@@ -3,60 +3,12 @@ import * as React from "react";
 import {
   NumberInput,
   useNumberInputState,
+  NumberinputInitialState,
   NumberInputDecrementButton,
   NumberInputIncrementButton,
 } from "renderless-components";
 
-export interface AppProps {
-  /**
-   * The value of the counter. Should be less than `max` and greater than `min`
-   *
-   * If no value, initial value is set to `""`
-   */
-  value?: string | number;
-  /**
-   * The minimum value of the counter
-   *
-   * @default Number.MIN_SAFE_INTEGER
-   */
-  min?: number;
-  /**
-   * The maximum value of the counter
-   *
-   * @default Number.MAX_SAFE_INTEGER
-   */
-  max?: number;
-  /**
-   * The step used to increment or decrement the value
-   *
-   * @default 1
-   */
-  step?: number;
-  /**
-   * The number of decimal points used to round the value
-   *
-   * If no precision, initial value is from the decimal places
-   * from value/step - `0`
-   */
-  precision?: number;
-  /**
-   * This controls the value update behavior in general.
-   *
-   * - If `true` and you use the stepper or up/down arrow keys,
-   *  the value will not exceed the `max` or go lower than `min`
-   *
-   * - If `false`, the value will be allowed to go out of range.
-   *
-   * @default true
-   */
-  keepWithinRange?: boolean;
-  /**
-   * If `true`, the input will be focused as you increment
-   * or decrement the value with the stepper
-   *
-   * @default true
-   */
-  focusInputOnChange?: boolean;
+export interface AppProps extends NumberinputInitialState {
   /**
    * This controls the value update when you blur out of the input.
    * - If `true` and the value is greater than `max`, the value will be reset to `max`

src/progress/stories/CircularProgress.component.tsx

@@ -3,35 +3,19 @@ import { Button } from "reakit";
 import { css, keyframes } from "emotion";
 
 import {
+  isNull,
   Progress,
-  useProgressState,
   ProgressState,
-  isNull,
+  useProgressState,
+  ProgressInitialState,
 } from "renderless-components";
 
-export interface AppProps {
+export interface AppProps extends ProgressInitialState {
   /**
    * Adds a label to meter.
    * @default false
    */
   withLabel?: boolean;
-  /**
-   * The `value` of the progress indicator.
-   *
-   * If `null` the progress bar will be in `indeterminate` state
-   * @default 0
-   */
-  value?: number | null;
-  /**
-   * The minimum value of the progress
-   * @default 0
-   */
-  min?: number;
-  /**
-   * The maximum value of the
-   * @default 100
-   */
-  max?: number;
 }
 
 export const App: React.FC<AppProps> = props => {

src/progress/stories/CircularProgress.stories.tsx

@@ -10,7 +10,7 @@ import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 
 export default {
   component: Progress,
-  title: "ProgressCircular",
+  title: "Progress/Circular",
   parameters: {
     preview: createPreviewTabs({
       js: circularProgressTemplateJs,