feat: add hooks stories

package.json

@@ -21,7 +21,7 @@
     "lint-commit": "cross-env COMMIT=true eslint . --ext tsx,ts  --fix",
     "test": "yarn build && react-app-rewired test --silent --detectOpenHandles",
     "prettierAll": "prettier --write .",
-    "storybook": "concurrently \"start-storybook --no-manager-cache -p 6006 -s public \" \"yarn workspace reactjs-view watch\" \"yarn workspace reactjs-view-core watch\" --kill-others",
+    "storybook": "concurrently \"start-storybook --no-manager-cache -p 6006 -s public \" \"yarn workspace reactjs-view watch\" \"yarn workspace reactjs-view-share watch\" \"yarn workspace reactjs-view-core watch\" --kill-others",
     "storybook-build": "yarn build && build-storybook -s public",
     "release": "yarn build && yarn lint-commit && yarn compile && react-app-rewired test --silent --watchAll=false && npx lerna publish",
     "lerna-build": "lerna run compile --stream",

src/core/src/hooks/useCounter/index.ts

@@ -11,14 +11,12 @@ import {
 type Options = {
   step?: number;
   interval?: number;
+  start: number;
+  end: number;
+  onComplete?: () => void;
 };
 
-export const useCounter = (
-  start: number,
-  end: number,
-  onComplete?: () => void,
-  options?: Options,
-) => {
+export const useCounter = ({ start, end, onComplete, ...options }: Options) => {
   const intervalHandle = useRef<any>();
   const [{ canStart, count, isCounting }, dispatch] = useReducer(
     reducer,

src/stories/src/container/renderingControls.tsx

@@ -0,0 +1,21 @@
+import React, { PropsWithChildren, useState } from "react";
+
+const RenderingControls = ({
+  children,
+}: PropsWithChildren<Record<string, unknown>>) => {
+  const [key, setKey] = useState(1);
+  const [_, setRerender] = useState(1);
+
+  return (
+    <div key={key}>
+      {children}
+      <hr />
+      <div>
+        <button onClick={() => setRerender((x) => x + 1)}>Rerender</button>
+        <button onClick={() => setKey((x) => x + 1)}>Remount</button>
+      </div>
+    </div>
+  );
+};
+
+export { RenderingControls };

src/stories/src/hooks/useCounter/index.stories.tsx

@@ -0,0 +1,60 @@
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+import { useCounter } from "reactjs-view-core";
+import { RenderingControls } from "../../container/renderingControls";
+
+type DemoProps = Parameters<typeof useCounter>[0];
+
+const Demo = ({ ...options }: Parameters<typeof useCounter>[0]) => {
+  const data = useCounter(options);
+
+  return (
+    <>
+      <pre>
+        <code>{JSON.stringify(data, null, 4)}</code>
+      </pre>
+      <button onClick={() => data.startCounting()}>startCounting</button>
+      <button onClick={() => data.reset()}>reset</button>
+    </>
+  );
+};
+
+const DemoWithControls = (props: DemoProps) => (
+  <RenderingControls>
+    <Demo {...props} />
+  </RenderingControls>
+);
+
+const meta: Meta<DemoProps> = {
+  title: "Hooks/useCounter",
+  component: DemoWithControls,
+  argTypes: {
+    start: {
+      control: {
+        type: "number",
+      },
+      defaultValue: 0,
+    },
+    end: {
+      control: {
+        type: "number",
+      },
+      defaultValue: 60,
+    },
+    step: {
+      control: {
+        type: "number",
+      },
+      defaultValue: 1,
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<DemoProps> = (args) => <DemoWithControls {...args} />;
+export const Default = Template.bind({});
+Default.args = {};