test(story): add style test

Author: Kunduin

stories/index.stories.tsx

@@ -2,23 +2,27 @@ import { withA11y } from "@storybook/addon-a11y";
 import { addDecorator, storiesOf } from "@storybook/react";
 import React, { useEffect, useState } from "react";
 
-import { ReactPictureAnnotation } from "../src";
+import {
+  DefaultInputSection,
+  defaultShapeStyle,
+  ReactPictureAnnotation,
+} from "../src";
 import { IAnnotation } from "../src/Annotation";
 import { IShapeData } from "../src/Shape";
 
-addDecorator(storyFn => <div>{storyFn()}</div>);
+addDecorator((storyFn) => <div>{storyFn()}</div>);
 
 storiesOf("Hello World", module)
   .addDecorator(withA11y)
   .add("with text", () => {
     const AnnotationComponent = () => {
       const [size, setSize] = useState({
         width: window.innerWidth - 16,
-        height: window.innerHeight - 16
+        height: window.innerHeight - 16,
       });
 
       const [annotationData, setAnnotationData] = useState<
-        Array<IAnnotation<IShapeData>>
+        IAnnotation<IShapeData>[]
       >([
         {
           id: "a",
@@ -28,17 +32,17 @@ storiesOf("Hello World", module)
             width: 161,
             height: 165,
             x: 229,
-            y: 92
-          }
-        }
+            y: 92,
+          },
+        },
       ]);
 
       const [selectedId, setSelectedId] = useState<string | null>("a");
 
       const onResize = () => {
         setSize({
           width: window.innerWidth - 16,
-          height: window.innerHeight - 16
+          height: window.innerHeight - 16,
         });
       };
 
@@ -54,10 +58,21 @@ storiesOf("Hello World", module)
           width={size.width}
           height={size.height}
           annotationData={annotationData}
-          onChange={data => setAnnotationData(data)}
+          onChange={(data) => setAnnotationData(data)}
           selectedId={selectedId}
-          onSelect={e => setSelectedId(e)}
+          onSelect={(e) => setSelectedId(e)}
+          annotationStyle={{
+            ...defaultShapeStyle,
+            shapeStrokeStyle: "#2193ff",
+            transformerBackground: "black",
+          }}
           image="https://bequank.oss-cn-beijing.aliyuncs.com/landpage/large/60682895_p0_master1200.jpg"
+          inputElement={(value, onChange, onDelete) => (
+            <DefaultInputSection
+              placeholder={"Hello world"}
+              {...{ value, onChange, onDelete }}
+            />
+          )}
         />
       );
     };