docs(storybook): 📝 finish stories migration to new component

adaptui · Sep 6, 2021 · a780c1a · a780c1a
1 parent ad4cdba
commit a780c1a
Show file tree

Hide file tree

Showing 35 changed files with 120 additions and 124 deletions.
diff --git a/.storybook/utils.ts b/.storybook/utils.ts
@@ -109,7 +109,7 @@ return {
     files: {
         "src/App.js": previews["JSX"][0],
         "src/styles.css": previews["CSS"] ? previews["CSS"][0] : "",
-        ...(previews["UtilsJS"] ? {"src/Utils.component.js": previews["UtilsJSX"][0]} : {}),
+        ...(previews["UtilsJSX"] ? {"src/Utils.component.js": previews["UtilsJSX"][0]} : {}),
     },
     userDependencies: ${joinStrs(dependencies)},
 };`) as CodeSandboxTemplate;
@@ -122,7 +122,7 @@ return {
     files: {
         "src/App.tsx": previews["TSX"][0],
         "src/styles.css": previews["CSS"] ? previews["CSS"][0] : "",
-        ...(previews["Utils"] ? {"src/Utils.component.tsx": previews["UtilsTSX"][0]} : {}),
+        ...(previews["UtilsTSX"] ? {"src/Utils.component.tsx": previews["UtilsTSX"][0]} : {}),
     },
     userDependencies: ${joinStrs(dependencies)},
 };`) as CodeSandboxTemplate;
diff --git a/src/select/stories/SelectBasic.stories.tsx b/src/select/stories/SelectBasic.stories.tsx
@@ -11,7 +11,10 @@ import { createPreviewTabs } from "../../../.storybook/utils";
 export default {
   component: Select,
   title: "Select/Basic",
-  parameters: { preview: createPreviewTabs({ js, ts, css }) },
+  parameters: {
+    preview: createPreviewTabs({ js, ts, css }),
+    options: { showPanel: true },
+  },
 } as Meta;
 
 export const Default: Story = args => <Select {...args} />;
diff --git a/src/select/stories/SelectControlled.stories.tsx b/src/select/stories/SelectControlled.stories.tsx
@@ -13,7 +13,10 @@ import { createPreviewTabs } from "../../../.storybook/utils";
 export default {
   component: Select,
   title: "Select/Controlled",
-  parameters: { preview: createPreviewTabs({ js, ts, css, jsUtils, tsUtils }) },
+  parameters: {
+    preview: createPreviewTabs({ js, ts, css, jsUtils, tsUtils }),
+    options: { showPanel: true },
+  },
   decorators: [
     Story => {
       document.body.id = "select-basic";

diff --git a/src/select/stories/SelectCustom.stories.tsx b/src/select/stories/SelectCustom.stories.tsx
@@ -16,6 +16,7 @@ export default {
   parameters: {
     parameters: {
       preview: createPreviewTabs({ js, ts, css, jsUtils, tsUtils }),
+      options: { showPanel: true },
     },
   },
   decorators: [

diff --git a/src/select/stories/SelectDynamic.stories.tsx b/src/select/stories/SelectDynamic.stories.tsx
@@ -15,6 +15,7 @@ export default {
   title: "Select/Dynamic",
   parameters: {
     preview: createPreviewTabs({ js, ts, css, jsUtils, tsUtils }),
+    options: { showPanel: true },
   },
   decorators: [
     Story => {

diff --git a/src/select/stories/SelectFetch.stories.tsx b/src/select/stories/SelectFetch.stories.tsx
@@ -15,6 +15,7 @@ export default {
   title: "Select/Fetch",
   parameters: {
     preview: createPreviewTabs({ js, ts, css, jsUtils, tsUtils }),
+    options: { showPanel: true },
   },
   decorators: [
     Story => {

diff --git a/src/select/stories/SelectMultiple.stories.tsx b/src/select/stories/SelectMultiple.stories.tsx
@@ -15,6 +15,7 @@ export default {
   title: "Select/Multiple",
   parameters: {
     preview: createPreviewTabs({ js, ts, css, jsUtils, tsUtils }),
+    options: { showPanel: true },
   },
   decorators: [
     Story => {

diff --git a/src/select/stories/SelectStyled.stories.tsx b/src/select/stories/SelectStyled.stories.tsx
@@ -11,6 +11,7 @@ export default {
   title: "Select/Styled",
   parameters: {
     preview: createPreviewTabs({ js, ts }),
+    options: { showPanel: true },
   },
   decorators: [
     Story => {

diff --git a/src/select/stories/SelectVirtual.component.tsx b/src/select/stories/SelectVirtual.component.tsx
@@ -10,7 +10,7 @@ import {
 } from "../../index";
 import { fruits } from "./Utils.component";
 
-export const App: React.FC<SelectInitialState> = props => {
+export const Select: React.FC<SelectInitialState> = props => {
   const select = useSelectState({ gutter: 8, values: fruits, ...props });
 
   const listRef = React.useRef();
@@ -72,4 +72,4 @@ export const App: React.FC<SelectInitialState> = props => {
   );
 };
 
-export default App;
+export default Select;
diff --git a/src/select/stories/SelectVirtual.stories.tsx b/src/select/stories/SelectVirtual.stories.tsx
@@ -15,6 +15,7 @@ export default {
   title: "Select/SelectVirtual",
   parameters: {
     preview: createPreviewTabs({ js, ts, css, jsUtils, tsUtils }),
+    options: { showPanel: true },
   },
   decorators: [
     Story => {

diff --git a/src/select/stories/SelectWindows.stories.tsx b/src/select/stories/SelectWindows.stories.tsx
@@ -15,6 +15,7 @@ export default {
   title: "Select/Windows",
   parameters: {
     preview: createPreviewTabs({ js, ts, css, jsUtils, tsUtils }),
+    options: { showPanel: true },
   },
   decorators: [
     Story => {

diff --git a/src/slider/stories/SliderAllInOne.component.tsx b/src/slider/stories/SliderAllInOne.component.tsx
@@ -9,7 +9,7 @@ import {
   SliderInitialState,
 } from "../../index";
 
-interface AppProps extends SliderInitialState {
+interface SliderProps extends SliderInitialState {
   /**
    * Label for the slider
    *
@@ -31,7 +31,7 @@ interface AppProps extends SliderInitialState {
   origin?: number;
 }
 
-export const App: React.FC<AppProps> = args => {
+export const Slider: React.FC<SliderProps> = args => {
   const { label, isReversed, origin: originProp, ...rest } = args;
   const origin = originProp ?? args.min ?? 0;
 
@@ -136,4 +136,4 @@ export const App: React.FC<AppProps> = args => {
   );
 };
 
-export default App;
+export default Slider;
diff --git a/src/slider/stories/SliderAllInOne.stories.tsx b/src/slider/stories/SliderAllInOne.stories.tsx
@@ -5,7 +5,7 @@ import "./SliderBasic.css";
 import css from "./templates/SliderBasicCss";
 import js from "./templates/SliderAllInOneJsx";
 import ts from "./templates/SliderAllInOneTsx";
-import { App as Slider } from "./SliderAllInOne.component";
+import { Slider } from "./SliderAllInOne.component";
 import { createPreviewTabs } from "../../../.storybook/utils";
 
 export default {
@@ -14,6 +14,7 @@ export default {
   parameters: {
     layout: "centered",
     parameters: { preview: createPreviewTabs({ js, ts, css }) },
+    options: { showPanel: true },
   },
   decorators: [
     Story => {

diff --git a/src/slider/stories/SliderBasic.component.tsx b/src/slider/stories/SliderBasic.component.tsx
@@ -9,7 +9,7 @@ import {
   SliderInitialState,
 } from "../../index";
 
-interface AppProps extends SliderInitialState {
+interface SliderProps extends SliderInitialState {
   /**
    * Label for the slider
    *
@@ -27,7 +27,7 @@ interface AppProps extends SliderInitialState {
   isReversed?: boolean;
 }
 
-export const App: React.FC<AppProps> = args => {
+export const Slider: React.FC<SliderProps> = args => {
   const { label, ...rest } = args;
 
   const state = useSliderState(rest);
@@ -78,4 +78,4 @@ export const App: React.FC<AppProps> = args => {
   );
 };
 
-export default App;
+export default Slider;
diff --git a/src/slider/stories/SliderBasic.stories.tsx b/src/slider/stories/SliderBasic.stories.tsx
@@ -5,19 +5,20 @@ import "./SliderBasic.css";
 import js from "./templates/SliderBasicJsx";
 import ts from "./templates/SliderBasicTsx";
 import css from "./templates/SliderBasicCss";
-import { App as SingleSlider } from "./SliderBasic.component";
+import { Slider } from "./SliderBasic.component";
 import { createPreviewTabs } from "../../../.storybook/utils";
 
 export default {
-  component: SingleSlider,
+  component: Slider,
   title: "Slider/Basic",
   parameters: {
     layout: "centered",
-    parameters: { preview: createPreviewTabs({ js, ts, css }) },
+    preview: createPreviewTabs({ js, ts, css }),
+    options: { showPanel: true },
   },
 } as Meta;
 
-export const Default: Story = args => <SingleSlider {...args} />;
+export const Default: Story = args => <Slider {...args} />;
 
 export const ThumbTip = Default.bind({});
 ThumbTip.args = {

diff --git a/src/slider/stories/MultiSlider.component.tsx → src/slider/stories/SliderMulti.component.tsx b/src/slider/stories/MultiSlider.component.tsx → src/slider/stories/SliderMulti.component.tsx
@@ -9,7 +9,7 @@ import {
   SliderInitialState,
 } from "../../index";
 
-interface AppProps extends SliderInitialState {
+interface SliderProps extends SliderInitialState {
   /**
    * Label for the slider
    *
@@ -27,7 +27,7 @@ interface AppProps extends SliderInitialState {
   isReversed?: boolean;
 }
 
-export const App: React.FC<AppProps> = args => {
+export const Slider: React.FC<SliderProps> = args => {
   const { label, isReversed, ...rest } = args;
 
   const state = useSliderState({
@@ -101,4 +101,4 @@ export const App: React.FC<AppProps> = args => {
   );
 };
 
-export default App;
+export default Slider;
diff --git a/src/slider/stories/MultiSlider.stories.tsx → src/slider/stories/SliderMulti.stories.tsx b/src/slider/stories/MultiSlider.stories.tsx → src/slider/stories/SliderMulti.stories.tsx
@@ -5,15 +5,16 @@ import "./SliderBasic.css";
 import js from "./templates/MultiSliderJsx";
 import ts from "./templates/MultiSliderTsx";
 import css from "./templates/SliderBasicCss";
-import { App as MultiSlider } from "./MultiSlider.component";
+import { Slider } from "./SliderMulti.component";
 import { createPreviewTabs } from "../../../.storybook/utils";
 
 export default {
-  component: MultiSlider,
+  component: Slider,
   title: "Slider/Multi",
   parameters: {
     layout: "centered",
     parameters: { preview: createPreviewTabs({ js, ts, css }) },
+    options: { showPanel: true },
   },
   decorators: [
     Story => {
@@ -23,7 +24,7 @@ export default {
   ],
 } as Meta;
 
-export const Default: Story = args => <MultiSlider {...args} />;
+export const Default: Story = args => <Slider {...args} />;
 Default.args = {
   defaultValues: [25, 50, 75],
 };

diff --git a/src/slider/stories/RangeSlider.component.tsx → src/slider/stories/SliderRange.component.tsx b/src/slider/stories/RangeSlider.component.tsx → src/slider/stories/SliderRange.component.tsx
@@ -9,7 +9,7 @@ import {
   SliderInitialState,
 } from "../../index";
 
-interface AppProps extends SliderInitialState {
+interface SliderProps extends SliderInitialState {
   /**
    * Label for the slider
    *
@@ -27,7 +27,7 @@ interface AppProps extends SliderInitialState {
   isReversed?: boolean;
 }
 
-export const App: React.FC<AppProps> = args => {
+export const Slider: React.FC<SliderProps> = args => {
   const { label, isReversed, ...rest } = args;
 
   const state = useSliderState({
@@ -122,4 +122,4 @@ export const App: React.FC<AppProps> = args => {
   );
 };
 
-export default App;
+export default Slider;
diff --git a/src/slider/stories/RangeSlider.stories.tsx → src/slider/stories/SliderRange.stories.tsx b/src/slider/stories/RangeSlider.stories.tsx → src/slider/stories/SliderRange.stories.tsx
@@ -5,15 +5,16 @@ import "./SliderBasic.css";
 import js from "./templates/RangeSliderJsx";
 import ts from "./templates/RangeSliderTsx";
 import css from "./templates/SliderBasicCss";
-import { App as RangeSlider } from "./RangeSlider.component";
+import { Slider } from "./SliderRange.component";
 import { createPreviewTabs } from "../../../.storybook/utils";
 
 export default {
-  component: RangeSlider,
+  component: Slider,
   title: "Slider/Range",
   parameters: {
     layout: "centered",
     parameters: { preview: createPreviewTabs({ js, ts, css }) },
+    options: { showPanel: true },
   },
   decorators: [
     Story => {
@@ -23,7 +24,7 @@ export default {
   ],
 } as Meta;
 
-export const Default: Story = args => <RangeSlider {...args} />;
+export const Default: Story = args => <Slider {...args} />;
 
 Default.args = {
   defaultValues: [25, 75],

diff --git a/.../stories/SingleOriginSlider.component.tsx → .../stories/SliderSingleOrigin.component.tsx b/.../stories/SingleOriginSlider.component.tsx → .../stories/SliderSingleOrigin.component.tsx
@@ -9,7 +9,7 @@ import {
   SliderInitialState,
 } from "../../index";
 
-interface AppProps extends SliderInitialState {
+interface SliderProps extends SliderInitialState {
   /**
    * Label for the slider
    *
@@ -22,7 +22,7 @@ interface AppProps extends SliderInitialState {
   showTip?: boolean;
 }
 
-export const App: React.FC<AppProps> = args => {
+export const Slider: React.FC<SliderProps> = args => {
   const { label, ...rest } = args;
 
   const state = useSliderState(rest);
@@ -81,4 +81,4 @@ export const App: React.FC<AppProps> = args => {
   );
 };
 
-export default App;
+export default Slider;
diff --git a/...er/stories/SingleOriginSlider.stories.tsx → ...er/stories/SliderSingleOrigin.stories.tsx b/...er/stories/SingleOriginSlider.stories.tsx → ...er/stories/SliderSingleOrigin.stories.tsx
@@ -2,18 +2,19 @@ import * as React from "react";
 import { Meta, Story } from "@storybook/react";
 
 import "./SliderBasic.css";
+import css from "./templates/SliderBasicCss";
 import js from "./templates/SingleOriginSliderJsx";
 import ts from "./templates/SingleOriginSliderTsx";
-import css from "./templates/SliderBasicCss";
+import { Slider } from "./SliderSingleOrigin.component";
 import { createPreviewTabs } from "../../../.storybook/utils";
-import { App as SingleOriginSlider } from "./SingleOriginSlider.component";
 
 export default {
-  component: SingleOriginSlider,
+  component: Slider,
   title: "Slider/SingleOrigin",
   parameters: {
     layout: "centered",
     parameters: { preview: createPreviewTabs({ js, ts, css }) },
+    options: { showPanel: true },
   },
   decorators: [
     Story => {
@@ -23,7 +24,7 @@ export default {
   ],
 } as Meta;
 
-export const Default: Story = args => <SingleOriginSlider {...args} />;
+export const Default: Story = args => <Slider {...args} />;
 
 Default.args = {
   min: -10,

diff --git a/...tories/SingleReversedSlider.component.tsx → ...tories/SliderSingleReversed.component.tsx b/...tories/SingleReversedSlider.component.tsx → ...tories/SliderSingleReversed.component.tsx
@@ -9,7 +9,7 @@ import {
   SliderInitialState,
 } from "../../index";
 
-interface AppProps extends SliderInitialState {
+interface SliderProps extends SliderInitialState {
   /**
    * Label for the slider
    *
@@ -22,7 +22,7 @@ interface AppProps extends SliderInitialState {
   showTip?: boolean;
 }
 
-export const App: React.FC<AppProps> = args => {
+export const Slider: React.FC<SliderProps> = args => {
   const { label, ...rest } = args;
 
   const state = useSliderState(rest);
@@ -76,4 +76,4 @@ export const App: React.FC<AppProps> = args => {
   );
 };
 
-export default App;
+export default Slider;