Move story and add yoda image

.storybook/main.js

@@ -1,8 +1,8 @@
 module.exports = {
-  stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
+  stories: ['../src/**/*.stories.@(ts|tsx|js|jsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
   typescript: {
     check: true, // type-check stories during Storybook build
-  }
+  },
 };

src/components/Annotation.stories.tsx

@@ -0,0 +1,39 @@
+import { ArgTypes } from '@storybook/addons/dist/ts3.9/types';
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import Annotation, { AnnotationPropsOptional } from './Annotation';
+
+const argTypes: ArgTypes = {
+  src: {
+    defaultValue:
+      'https://raw.githubusercontent.com/RobinNagpal/react-image-annotation-ts/HEAD/demo.gif',
+    control: {
+      type: 'text',
+    },
+  },
+};
+
+const meta: Meta = {
+  title: 'Annotation',
+  component: Annotation,
+  argTypes,
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<AnnotationPropsOptional> = (args) => (
+  <Annotation {...args} />
+);
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+const defaultProps: AnnotationPropsOptional = {
+  src:
+    'https://raw.githubusercontent.com/RobinNagpal/react-image-annotation-ts/HEAD/demo.gif',
+};
+export const Default = Template.bind(defaultProps);
+
+Default.args = {};

src/components/Annotation.tsx

@@ -35,7 +35,7 @@ const Items = styled.div`
 
 const Target = Items;
 
-type AnnotationPropsOptional = {
+export type AnnotationPropsOptional = {
   [K in keyof AnnotationProps]?: AnnotationProps[K]; // so that it retains the types
 };
 

stories/Thing.stories.tsx → src/components/Thing/Thing.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
-import { Thing, Props } from '../src';
+import { Thing, Props } from './index';
 
 const meta: Meta = {
   title: 'Welcome',
@@ -19,7 +19,7 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<Props> = args => <Thing {...args} />;
+const Template: Story<Props> = (args) => <Thing {...args} />;
 
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
 // https://storybook.js.org/docs/react/workflows/unit-testing

tsconfig.json

@@ -1,6 +1,6 @@
 {
   // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
-  "include": ["src", "types"],
+  "include": ["src", "types", "stories"],
   "compilerOptions": {
     "module": "esnext",
     "lib": ["dom", "esnext"],
@@ -32,5 +32,9 @@
     "forceConsistentCasingInFileNames": true,
     // `tsdx build` ignores this option, but it is commonly used when type-checking separately with `tsc`
     "noEmit": true,
+    "baseUrl": "." ,
+    "paths": {
+      "@components/*": ["src/components/*"]
+    }
   }
 }