update storybook formats

.storybook/main.js

@@ -15,7 +15,7 @@ const alias = packages.reduce((memo, pkg) => {
 }, {});
 
 module.exports = {
-  stories: ["../packages/**/*/*.example.@(js|ts|tsx)"],
+  stories: ["../packages/**/*/*.story.@(js|ts|tsx)"],
   addons: [
     "@storybook/addon-actions/register",
     "@storybook/addon-docs/register",

packages/accordion/examples/animated.example.js

@@ -96,5 +96,4 @@ const AnimatedPanel = React.forwardRef(({ children }, forwardedRef) => {
 });
 
 Example.storyName = name;
-export const Animated = Example;
-export default { title: "Accordion" };
+export { Example };

packages/accordion/examples/basic.example.js

@@ -49,8 +49,7 @@ function Example() {
 }
 
 Example.storyName = name;
-export const Basic = Example;
-export default { title: "Accordion" };
+export { Example };
 
 ////////////////////////////////////////////////////////////////////////////////
 

packages/accordion/examples/collapsible.example.js

@@ -62,5 +62,4 @@ function Example() {
 }
 
 Example.storyName = name;
-export const Collapsible = Example;
-export default { title: "Accordion" };
+export { Example };

packages/accordion/examples/controlled.example.js

@@ -64,5 +64,4 @@ function Example() {
 }
 
 Example.storyName = name;
-export const Controlled = Example;
-export default { title: "Accordion" };
+export { Example };

packages/accordion/examples/index.story.js

@@ -0,0 +1,15 @@
+export { Example as Animated } from "./animated.example.js";
+export { Example as Basic } from "./basic.example.js";
+export { Example as Collapsible } from "./collapsible.example.js";
+export { Example as Controlled } from "./controlled.example.js";
+export { Example as MultipleCollapsible } from "./multiple-collapsible.example.js";
+export { Example as Multiple } from "./multiple.example.js";
+export { Example as ReadOnly } from "./read-only.example.js";
+export { Example as StyledTS } from "./styled.example.tsx";
+export { Example as WithArbitraryElements } from "./with-arbitrary-elements.example.js";
+export { Example as WithArrows } from "./with-arrows.example.js";
+export { Example as WithUseaccordioncontextHookTS } from "./with-useaccordioncontext-hook.example.tsx";
+
+export default {
+  title: "Accordion",
+};

packages/accordion/examples/multiple-collapsible.example.js

@@ -62,5 +62,4 @@ function Example() {
 }
 
 Example.storyName = name;
-export const MultipleCollapsible = Example;
-export default { title: "Accordion" };
+export { Example };

packages/accordion/examples/multiple.example.js

@@ -76,5 +76,4 @@ function Example() {
 }
 
 Example.storyName = name;
-export const Multiple = Example;
-export default { title: "Accordion" };
+export { Example };

packages/accordion/examples/read-only.example.js

@@ -47,5 +47,4 @@ function Example() {
 }
 
 Example.storyName = name;
-export const ReadOnly = Example;
-export default { title: "Accordion" };
+export { Example };

packages/accordion/examples/styled.example.tsx

@@ -64,8 +64,7 @@ function Example() {
 }
 
 Example.storyName = name;
-export const Styled = Example;
-export default { title: "Accordion" };
+export { Example };
 
 ////////////////////////////////////////////////////////////////////////////////
 

packages/accordion/examples/with-arbitrary-elements.example.js

@@ -61,8 +61,7 @@ function Example() {
 }
 
 Example.storyName = name;
-export const ArbitraryElems = Example;
-export default { title: "Accordion" };
+export { Example };
 
 function ExampleAccordionBody({ children }) {
   return <AccordionPanel style={{ padding: 16 }}>{children}</AccordionPanel>;

packages/accordion/examples/with-arrows.example.js

@@ -46,8 +46,7 @@ function Example() {
 }
 
 Example.storyName = name;
-export const WithArrows = Example;
-export default { title: "Accordion" };
+export { Example };
 
 function ArrowButton({ children, active, ...props }) {
   return (

packages/accordion/examples/with-useaccordioncontext-hook.example.tsx

@@ -64,7 +64,6 @@ function Example() {
 }
 
 Example.storyName = name;
-export const WithContextHooks = Example;
-export default { title: "Accordion" };
+export { Example };
 
 ////////////////////////////////////////////////////////////////////////////////

packages/alert-dialog/examples/basic-ts.example.tsx

@@ -32,5 +32,4 @@ function Example() {
 }
 
 Example.storyName = name;
-export const BasicTS = Example;
-export default { title: "AlertDialog" };
+export { Example };

packages/alert-dialog/examples/basic.example.js

@@ -32,5 +32,4 @@ function Example() {
 }
 
 Example.storyName = name;
-export const Basic = Example;
-export default { title: "AlertDialog" };
+export { Example };

packages/alert-dialog/examples/index.story.js

@@ -0,0 +1,6 @@
+export { Example as BasicTsTS } from "./basic-ts.example.tsx";
+export { Example as Basic } from "./basic.example.js";
+
+export default {
+  title: "AlertDialog",
+};

packages/alert/examples/basic-ts.example.tsx

@@ -68,8 +68,7 @@ function Example() {
 }
 
 Example.storyName = name;
-export const BasicTS = Example;
-export default { title: "Alert" };
+export { Example };
 
 ////////////////////////////////////////////////////////////////////////////////
 

packages/alert/examples/basic.example.js

@@ -67,8 +67,7 @@ function Example() {
 }
 
 Example.storyName = name;
-export const Basic = Example;
-export default { title: "Alert" };
+export { Example };
 
 ////////////////////////////////////////////////////////////////////////////////
 

packages/alert/examples/index.story.js

@@ -0,0 +1,6 @@
+export { Example as BasicTsTS } from "./basic-ts.example.tsx";
+export { Example as Basic } from "./basic.example.js";
+
+export default {
+  title: "Alert",
+};

packages/checkbox/examples/basic-mixed.example.js

@@ -36,5 +36,4 @@ function Example() {
 }
 
 Example.storyName = name;
-export const BasicMixed = Example;
-export default { title: "Checkbox" };
+export { Example };

packages/checkbox/examples/checklist.example.js

@@ -111,5 +111,4 @@ function Example() {
 }
 
 Example.storyName = name;
-export const Checklist = Example;
-export default { title: "Checkbox" };
+export { Example };

packages/checkbox/examples/custom-composed.example.js

@@ -47,7 +47,7 @@ function MyCheckbox(props) {
   );
 }
 
-export function Example() {
+function Example() {
   return (
     <div>
       <label>
@@ -64,5 +64,4 @@ export function Example() {
 }
 
 Example.storyName = name;
-export const CustomComposed = Example;
-export default { title: "Checkbox" };
+export { Example };

packages/checkbox/examples/custom-group.example.js

@@ -31,8 +31,7 @@ function Example() {
 }
 
 Example.storyName = name;
-export const CustomGroup = Example;
-export default { title: "Checkbox" };
+export { Example };
 
 ////////////////////////////////////////////////////////////////////////////////
 

packages/checkbox/examples/custom-pseudo.example.js

@@ -29,5 +29,4 @@ function Example() {
 }
 
 Example.storyName = name;
-export const CustomPseudo = Example;
-export default { title: "Checkbox" };
+export { Example };

packages/checkbox/examples/disabled.example.js

@@ -52,5 +52,4 @@ function Example() {
 }
 
 Example.storyName = name;
-export const MixedDisabled = Example;
-export default { title: "Checkbox" };
+export { Example };

packages/checkbox/examples/hook.example.tsx

@@ -23,5 +23,4 @@ function Example() {
 }
 
 Example.storyName = name;
-export const MixedHook = Example;
-export default { title: "Checkbox" };
+export { Example };

packages/checkbox/examples/index.story.js

@@ -0,0 +1,11 @@
+export { Example as BasicMixed } from "./basic-mixed.example.js";
+export { Example as Checklist } from "./checklist.example.js";
+export { Example as CustomComposed } from "./custom-composed.example.js";
+export { Example as CustomGroup } from "./custom-group.example.js";
+export { Example as CustomPseudo } from "./custom-pseudo.example.js";
+export { Example as Disabled } from "./disabled.example.js";
+export { Example as HookTS } from "./hook.example.tsx";
+
+export default {
+  title: "Checkbox",
+};

packages/combobox/examples/basic-ts.example.tsx

@@ -49,8 +49,7 @@ function Example() {
 }
 
 Example.storyName = name;
-export const BasicTS = Example;
-export default { title: "Combobox" };
+export { Example };
 
 ////////////////////////////////////////////////////////////////////////////////
 

packages/combobox/examples/basic.example.js

@@ -45,8 +45,7 @@ function Example() {
 }
 
 Example.storyName = name;
-export const Basic = Example;
-export default { title: "Combobox" };
+export { Example };
 
 ////////////////////////////////////////////////////////////////////////////////
 

packages/combobox/examples/controlled-ts.example.tsx

@@ -74,7 +74,6 @@ function Example() {
 }
 
 Example.storyName = name;
-export const ControlledTS = Example;
-export default { title: "Combobox" };
+export { Example };
 
 ////////////////////////////////////////////////////////////////////////////////

packages/combobox/examples/controlled.example.js

@@ -73,5 +73,4 @@ function Example() {
 }
 
 Example.storyName = name;
-export const Controlled = Example;
-export default { title: "Combobox" };
+export { Example };

packages/combobox/examples/index.story.js

@@ -0,0 +1,15 @@
+export { Example as BasicTsTS } from "./basic-ts.example.tsx";
+export { Example as Basic } from "./basic.example.js";
+export { Example as ControlledTsTS } from "./controlled-ts.example.tsx";
+export { Example as Controlled } from "./controlled.example.js";
+export { Example as LotsOfElements } from "./lots-of-elements.example.js";
+export { Example as NoPopover } from "./no-popover.example.js";
+export { Example as OpenOnFocus } from "./open-on-focus.example.js";
+export { Example as TokenInput } from "./token-input.example.js";
+export { Example as WithButton } from "./with-button.example.js";
+export { Example as WithCustomSelectDataTS } from "./with-custom-select-data.example.tsx";
+export { Example as WithUsecomboboxcontextHookTS } from "./with-usecomboboxcontext-hook.example.tsx";
+
+export default {
+  title: "Combobox",
+};

packages/combobox/examples/lots-of-elements.example.js

@@ -62,5 +62,4 @@ function Example() {
 }
 
 Example.storyName = name;
-export const LotsOfElems = Example;
-export default { title: "Combobox" };
+export { Example };

packages/combobox/examples/no-popover.example.js

@@ -56,5 +56,4 @@ function Example() {
 }
 
 Example.storyName = name;
-export const NoPopover = Example;
-export default { title: "Combobox" };
+export { Example };

packages/combobox/examples/open-on-focus.example.js

@@ -48,8 +48,7 @@ function Example() {
 }
 
 Example.storyName = name;
-export const OpenOnFocus = Example;
-export default { title: "Combobox" };
+export { Example };
 
 ////////////////////////////////////////////////////////////////////////////////
 

packages/combobox/examples/token-input.example.js

@@ -88,8 +88,7 @@ function Example() {
 }
 
 Example.storyName = name;
-export const TokenInput = Example;
-export default { title: "Combobox" };
+export { Example };
 
 ////////////////////////////////////////////////////////////////////////////////
 

packages/combobox/examples/with-button.example.js

@@ -48,5 +48,4 @@ function Example() {
 }
 
 Example.storyName = name;
-export const WithButton = Example;
-export default { title: "Combobox" };
+export { Example };

packages/combobox/examples/with-custom-select-data.example.tsx

@@ -66,19 +66,15 @@ function Example() {
 }
 
 Example.storyName = name;
-export const WithCustomOnSelectData = Example;
-export default { title: "Combobox" };
+export { Example };
 
 ////////////////////////////////////////////////////////////////////////////////
 
 const ComboboxContext = React.createContext<ComboboxContextValue>({} as any);
 
 function Combobox({ onSelect: onSelectProp, ...props }: ComboboxProps) {
-  const {
-    addOptionData,
-    getOptionData,
-    removeOptionData,
-  } = useOptionDataFactory();
+  const { addOptionData, getOptionData, removeOptionData } =
+    useOptionDataFactory();
 
   const onSelectRef = React.useRef(onSelectProp);
   React.useEffect(() => {

packages/combobox/examples/with-usecomboboxcontext-hook.example.tsx

@@ -51,8 +51,7 @@ function Example() {
 }
 
 Example.storyName = name;
-export const WithHook = Example;
-export default { title: "Combobox" };
+export { Example };
 
 ////////////////////////////////////////////////////////////////////////////////
 

packages/component-component/examples/index.story.js

@@ -0,0 +1,7 @@
+export { Example as Lifecycles } from "./lifecycles.example.js";
+export { Example as State } from "./state.example.js";
+export { Example as TodoList } from "./todo-list.example.js";
+
+export default {
+  title: "ComponentComponent",
+};

packages/component-component/examples/lifecycles.example.js

@@ -56,5 +56,4 @@ function Example() {
 }
 
 Example.storyName = name;
-export const Lifecycles = Example;
-export default { title: "ComponentComponent" };
+export { Example };

packages/component-component/examples/state.example.js

@@ -24,5 +24,4 @@ function Example() {
 }
 
 Example.storyName = name;
-export const Basic = Example;
-export default { title: "ComponentComponent" };
+export { Example };

packages/component-component/examples/todo-list.example.js

@@ -79,5 +79,4 @@ function Example() {
 }
 
 Example.storyName = name;
-export const TodoList = Example;
-export default { title: "ComponentComponent" };
+export { Example };

packages/dialog/examples/animated.example.js

@@ -51,5 +51,4 @@ function Example() {
 }
 
 Example.storyName = name;
-export const Animated = Example;
-export default { title: "Dialog" };
+export { Example };