chore: migrate all components

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,

src/progress/stories/LinearProgress.component.tsx

@@ -3,35 +3,15 @@ import { Button } from "reakit";
 import { css, keyframes } from "emotion";
 
 import {
+  cx,
   Progress,
-  useProgressState,
   ProgressState,
-  cx,
+  useProgressState,
+  ProgressInitialState,
 } from "renderless-components";
 import { isNull } from "renderless-components/utils";
 
-export interface AppProps {
-  /**
-   * 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;
-  /**
-   * Adds a label to meter.
-   * @default false
-   */
+export interface AppProps extends ProgressInitialState {
   withLabel?: boolean;
   /**
    * Adds a stripe style to meter bar.

src/progress/stories/LinearProgress.stories.tsx

@@ -7,7 +7,7 @@ import { createPreviewTabs } from "../../../scripts/create-preview-tabs";
 
 export default {
   component: Progress,
-  title: "ProgressLinear",
+  title: "Progress/Linear",
   parameters: {
     preview: createPreviewTabs({
       js: linearProgressTemplateJs,

src/segment/stories/Segment.component.tsx

@@ -6,9 +6,7 @@ import {
   SegmentStateProps,
 } from "renderless-components";
 
-interface AppProps extends SegmentStateProps {}
-
-export const App: React.FC<AppProps> = props => {
+export const App: React.FC<SegmentStateProps> = props => {
   const state = useSegmentState(props);
 
   return (

src/select/stories/Combobox.component.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { CompositeInitialState, PopoverInitialState } from "reakit";
 import {
   Select,
   SelectMenu,
@@ -26,12 +25,7 @@ const countries = [
   { name: "zimbabwe", emoji: "🇿🇼" },
 ];
 
-type AppProps = Omit<
-  SelectInitialState,
-  keyof (PopoverInitialState & CompositeInitialState)
->;
-
-export const App: React.FC<AppProps> = props => {
+export const App: React.FC<SelectInitialState> = props => {
   const state = useSelectState({
     ...props,
     allowMultiselect: true,

src/select/stories/Combobox.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta } from "@storybook/react";
+import { PopoverInitialState, CompositeInitialState } from "reakit";
 
 import {
   selectCssTemplate,
@@ -14,10 +15,16 @@ import {
   SelectInput,
   SelectOption,
   useSelectState,
+  SelectInitialState,
 } from "..";
 
+export const Default: React.FC<Omit<
+  SelectInitialState,
+  keyof (PopoverInitialState & CompositeInitialState)
+>> = props => <Combobox {...props} />;
+
 export default {
-  component: Combobox,
+  component: Default,
   title: "Select/Combobox",
   parameters: {
     preview: createPreviewTabs({
@@ -45,10 +52,6 @@ const countries = [
   { name: "zimbabwe", emoji: "🇿🇼" },
 ];
 
-const Base: Story = args => <Combobox {...args} />;
-
-export const Default = Base.bind({});
-
 export const WithoutFilter: React.FC = () => {
   const state = useSelectState({
     allowMultiselect: true,

src/select/stories/Select.component.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { CompositeInitialState, PopoverInitialState } from "reakit";
 import {
   Select,
   SelectMenu,
@@ -26,12 +25,7 @@ const countries = [
   { name: "zimbabwe", emoji: "🇿🇼" },
 ];
 
-type AppProps = Omit<
-  SelectInitialState,
-  keyof (PopoverInitialState & CompositeInitialState)
->;
-
-export const App: React.FC<AppProps> = props => {
+export const App: React.FC<SelectInitialState> = props => {
   const state = useSelectState(props);
 
   return (

src/select/stories/Select.stories.tsx

@@ -1,6 +1,7 @@
 import "./Select.css";
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta } from "@storybook/react";
+import { CompositeInitialState, PopoverInitialState } from "reakit";
 
 import { App as Select } from "./Select.component";
 import {
@@ -14,11 +15,17 @@ import {
   SelectOption,
   SelectTrigger,
   useSelectState,
+  SelectInitialState,
   Select as SelectComponent,
 } from "..";
 
+export const Default: React.FC<Omit<
+  SelectInitialState,
+  keyof (PopoverInitialState & CompositeInitialState)
+>> = props => <Select {...props} />;
+
 export default {
-  component: Select,
+  component: Default,
   title: "Select/Basic",
   parameters: {
     preview: createPreviewTabs({
@@ -46,13 +53,10 @@ const countries = [
   { name: "zimbabwe", emoji: "🇿🇼" },
 ];
 
-const Base: Story = args => <Select {...args} />;
-
-export const Default = Base.bind({});
-export const MultiSelect = Base.bind({});
+export const MultiSelect = Default.bind({});
 MultiSelect.args = { allowMultiselect: true };
 
-export const DefaultSelected = Base.bind({});
+export const DefaultSelected = Default.bind({});
 DefaultSelected.args = { selected: "india" };
 
 export const Scrolling: React.FC = () => {