lost-sia 2.0.1-alpha13 → 2.0.1-alpha14

package/src/stories/Button.jsx

@@ -1,27 +1,23 @@
-import React from "react";
-import PropTypes from "prop-types";
-import "./button.css";
+import React from 'react'
+import PropTypes from 'prop-types'
+import './button.css'
 
 /**
  * Primary UI component for user interaction
  */
 export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
-  const mode = primary
-    ? "storybook-button--primary"
-    : "storybook-button--secondary";
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'
   return (
     <button
       type="button"
-      className={["storybook-button", `storybook-button--${size}`, mode].join(
-        " ",
-      )}
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
       style={backgroundColor && { backgroundColor }}
       {...props}
     >
       {label}
     </button>
-  );
-};
+  )
+}
 
 Button.propTypes = {
   /**
@@ -35,7 +31,7 @@ Button.propTypes = {
   /**
    * How large should the button be?
    */
-  size: PropTypes.oneOf(["small", "medium", "large"]),
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
   /**
    * Button contents
    */
@@ -44,11 +40,11 @@ Button.propTypes = {
    * Optional click handler
    */
   onClick: PropTypes.func,
-};
+}
 
 Button.defaultProps = {
   backgroundColor: null,
   primary: false,
-  size: "medium",
+  size: 'medium',
   onClick: undefined,
-};
+}

package/src/stories/Button.stories.js

@@ -1,48 +1,48 @@
-import { fn } from "@storybook/test";
-import { Button } from "./Button";
+import { fn } from '@storybook/test'
+import { Button } from './Button'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 export default {
-  title: "Example/Button",
+  title: 'Example/Button',
   component: Button,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: "centered",
+    layout: 'centered',
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   // More on argTypes: https://storybook.js.org/docs/api/argtypes
   argTypes: {
-    backgroundColor: { control: "color" },
+    backgroundColor: { control: 'color' },
   },
   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
   args: { onClick: fn() },
-};
+}
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary = {
   args: {
     primary: true,
-    label: "Button",
+    label: 'Button',
   },
-};
+}
 
 export const Secondary = {
   args: {
-    label: "Button",
+    label: 'Button',
   },
-};
+}
 
 export const Large = {
   args: {
-    size: "large",
-    label: "Button",
+    size: 'large',
+    label: 'Button',
   },
-};
+}
 
 export const Small = {
   args: {
-    size: "small",
-    label: "Button",
+    size: 'small',
+    label: 'Button',
   },
-};
+}

package/src/stories/Canvas/CanvasWithOffset.stories.tsx

@@ -1,42 +1,42 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-import { imgBlob } from "../siaDummyData";
+import type { Meta, StoryObj } from '@storybook/react'
+import { fn } from '@storybook/test'
+import { imgBlob } from '../siaDummyData'
 
-import AnnotationTool from "../../models/AnnotationTool";
-import Annotation from "../../Annotation/logic/Annotation";
+import AnnotationTool from '../../models/AnnotationTool'
+import Annotation from '../../Annotation/logic/Annotation'
 
-import { possibleLabels } from "../siaDummyData2";
-import { UiConfig } from "../../types";
-import CanvasWithOffset from "./CanvasOffset";
+import { possibleLabels } from '../siaDummyData2'
+import { UiConfig } from '../../types'
+import CanvasWithOffset from './CanvasOffset'
 
 export const ActionsData = {
   onAnnoEvent: fn(),
   onKeyDown: fn(),
   onKeyUp: fn(),
-};
+}
 
 const meta = {
-  title: "Components/CanvasWithOffset",
+  title: 'Components/CanvasWithOffset',
   component: CanvasWithOffset,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: "fullscreen",
+    layout: 'fullscreen',
   },
-  tags: ["!autodocs"],
+  tags: ['!autodocs'],
   excludeStories: /.*Data$/,
   args: {
     ...ActionsData,
   },
-} satisfies Meta<typeof CanvasWithOffset>;
+} satisfies Meta<typeof CanvasWithOffset>
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export default meta
+type Story = StoryObj<typeof meta>
 
 const uiConfig: UiConfig = {
   nodeRadius: 4,
   strokeWidth: 4,
   imageCentered: false,
-};
+}
 
 export const Default: Story = {
   args: {
@@ -47,7 +47,7 @@ export const Default: Story = {
     preventScrolling: true,
     uiConfig,
   },
-};
+}
 
 const samplePointAnnotations: Annotation[] = [
   new Annotation(0, AnnotationTool.Point, [{ x: 10, y: 10 }]),
@@ -58,7 +58,7 @@ const samplePointAnnotations: Annotation[] = [
   new Annotation(5, AnnotationTool.Point, [{ x: 250, y: 250 }]),
   new Annotation(6, AnnotationTool.Point, [{ x: 300, y: 300 }]),
   new Annotation(7, AnnotationTool.Point, [{ x: 350, y: 350 }]),
-];
+]
 
 export const WithPoints: Story = {
   args: {
@@ -70,7 +70,7 @@ export const WithPoints: Story = {
     preventScrolling: true,
     uiConfig,
   },
-};
+}
 
 const sampleLineAnnotations: Annotation[] = [
   new Annotation(0, AnnotationTool.Line, [
@@ -87,7 +87,7 @@ const sampleLineAnnotations: Annotation[] = [
   ]),
   new Annotation(2, AnnotationTool.Line, [{ x: 150, y: 150 }]),
   new Annotation(3, AnnotationTool.Line, [{ x: 200, y: 200 }]),
-];
+]
 
 export const WithLines: Story = {
   args: {
@@ -99,7 +99,7 @@ export const WithLines: Story = {
     preventScrolling: true,
     uiConfig,
   },
-};
+}
 
 const sampleBBoxAnnotations: Annotation[] = [
   new Annotation(0, AnnotationTool.BBox, [
@@ -114,7 +114,7 @@ const sampleBBoxAnnotations: Annotation[] = [
     { x: 400, y: 325 },
     { x: 500, y: 375 },
   ]),
-];
+]
 
 export const WithBBoxes: Story = {
   args: {
@@ -126,7 +126,7 @@ export const WithBBoxes: Story = {
     preventScrolling: true,
     uiConfig,
   },
-};
+}
 
 const samplePolygonAnnotations: Annotation[] = [
   new Annotation(0, AnnotationTool.Polygon, [
@@ -142,7 +142,7 @@ const samplePolygonAnnotations: Annotation[] = [
     { x: 600, y: 350 },
     { x: 550, y: 450 },
   ]),
-];
+]
 
 export const WithPolygonAnnotations: Story = {
   args: {
@@ -154,4 +154,4 @@ export const WithPolygonAnnotations: Story = {
     preventScrolling: true,
     uiConfig,
   },
-};
+}

package/src/stories/FilterDropdown.stories.ts

@@ -1,19 +1,19 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { possibleLabels } from "./siaDummyData2";
-import { fn } from "@storybook/test";
-import LabelInput from "../Canvas/LabelInput";
+import type { Meta, StoryObj } from '@storybook/react'
+import { possibleLabels } from './siaDummyData2'
+import { fn } from '@storybook/test'
+import LabelInput from '../Canvas/LabelInput'
 
 const meta = {
-  title: "Components/LabelFilter",
+  title: 'Components/LabelFilter',
   component: LabelInput,
   argTypes: {},
   parameters: {
-    layout: "centered",
+    layout: 'centered',
   },
-} satisfies Meta<typeof LabelInput>;
+} satisfies Meta<typeof LabelInput>
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export default meta
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
@@ -22,4 +22,4 @@ export const Default: Story = {
     selectedLabelsIds: [],
     onLabelSelect: fn(),
   },
-};
+}

package/src/stories/Header.jsx

@@ -1,8 +1,8 @@
-import React from "react";
-import PropTypes from "prop-types";
+import React from 'react'
+import PropTypes from 'prop-types'
 
-import { Button } from "./Button";
-import "./header.css";
+import { Button } from './Button'
+import './header.css'
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
   <header>
@@ -42,18 +42,13 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
         ) : (
           <>
             <Button size="small" onClick={onLogin} label="Log in" />
-            <Button
-              primary
-              size="small"
-              onClick={onCreateAccount}
-              label="Sign up"
-            />
+            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
           </>
         )}
       </div>
     </div>
   </header>
-);
+)
 
 Header.propTypes = {
   user: PropTypes.shape({
@@ -62,8 +57,8 @@ Header.propTypes = {
   onLogin: PropTypes.func.isRequired,
   onLogout: PropTypes.func.isRequired,
   onCreateAccount: PropTypes.func.isRequired,
-};
+}
 
 Header.defaultProps = {
   user: null,
-};
+}

package/src/stories/Header.stories.js

@@ -1,28 +1,28 @@
-import { Header } from "./Header";
-import { fn } from "@storybook/test";
+import { Header } from './Header'
+import { fn } from '@storybook/test'
 
 export default {
-  title: "Example/Header",
+  title: 'Example/Header',
   component: Header,
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: "fullscreen",
+    layout: 'fullscreen',
   },
   args: {
     onLogin: fn(),
     onLogout: fn(),
     onCreateAccount: fn(),
   },
-};
+}
 
 export const LoggedIn = {
   args: {
     user: {
-      name: "Jane Doe",
+      name: 'Jane Doe',
     },
   },
-};
+}
 
-export const LoggedOut = {};
+export const LoggedOut = {}

package/src/stories/Page.jsx

@@ -1,50 +1,46 @@
-import React from "react";
+import React from 'react'
 
-import { Header } from "./Header";
-import "./page.css";
+import { Header } from './Header'
+import './page.css'
 
 export const Page = () => {
-  const [user, setUser] = React.useState();
+  const [user, setUser] = React.useState()
 
   return (
     <article>
       <Header
         user={user}
-        onLogin={() => setUser({ name: "Jane Doe" })}
+        onLogin={() => setUser({ name: 'Jane Doe' })}
         onLogout={() => setUser(undefined)}
-        onCreateAccount={() => setUser({ name: "Jane Doe" })}
+        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
       />
 
       <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
-          We recommend building UIs with a{" "}
-          <a
-            href="https://componentdriven.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
+          We recommend building UIs with a{' '}
+          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
             <strong>component-driven</strong>
-          </a>{" "}
+          </a>{' '}
           process starting with atomic components and ending with pages.
         </p>
         <p>
-          Render pages with mock data. This makes it easy to build and review
-          page states without needing to navigate to them in your app. Here are
-          some handy patterns for managing page data in Storybook:
+          Render pages with mock data. This makes it easy to build and review page states
+          without needing to navigate to them in your app. Here are some handy patterns
+          for managing page data in Storybook:
         </p>
         <ul>
           <li>
-            Use a higher-level connected component. Storybook helps you compose
-            such data from the "args" of child component stories
+            Use a higher-level connected component. Storybook helps you compose such data
+            from the "args" of child component stories
           </li>
           <li>
-            Assemble data in the page component from your services. You can mock
-            these services out using Storybook.
+            Assemble data in the page component from your services. You can mock these
+            services out using Storybook.
           </li>
         </ul>
         <p>
-          Get a guided tutorial on component-driven development at{" "}
+          Get a guided tutorial on component-driven development at{' '}
           <a
             href="https://storybook.js.org/tutorials/"
             target="_blank"
@@ -52,7 +48,7 @@ export const Page = () => {
           >
             Storybook tutorials
           </a>
-          . Read more in the{" "}
+          . Read more in the{' '}
           <a
             href="https://storybook.js.org/docs"
             target="_blank"
@@ -63,8 +59,7 @@ export const Page = () => {
           .
         </p>
         <div className="tip-wrapper">
-          <span className="tip">Tip</span> Adjust the width of the canvas with
-          the{" "}
+          <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
           <svg
             width="10"
             height="10"
@@ -83,5 +78,5 @@ export const Page = () => {
         </div>
       </section>
     </article>
-  );
-};
+  )
+}

package/src/stories/Page.stories.js

@@ -1,28 +1,28 @@
-import { within, userEvent, expect } from "@storybook/test";
+import { within, userEvent, expect } from '@storybook/test'
 
-import { Page } from "./Page";
+import { Page } from './Page'
 
 export default {
-  title: "Example/Page",
+  title: 'Example/Page',
   component: Page,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: "fullscreen",
+    layout: 'fullscreen',
   },
-};
+}
 
-export const LoggedOut = {};
+export const LoggedOut = {}
 
 // More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
 export const LoggedIn = {
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const loginButton = canvas.getByRole("button", { name: /Log in/i });
-    await expect(loginButton).toBeInTheDocument();
-    await userEvent.click(loginButton);
-    await expect(loginButton).not.toBeInTheDocument();
+    const canvas = within(canvasElement)
+    const loginButton = canvas.getByRole('button', { name: /Log in/i })
+    await expect(loginButton).toBeInTheDocument()
+    await userEvent.click(loginButton)
+    await expect(loginButton).not.toBeInTheDocument()
 
-    const logoutButton = canvas.getByRole("button", { name: /Log out/i });
-    await expect(logoutButton).toBeInTheDocument();
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i })
+    await expect(logoutButton).toBeInTheDocument()
   },
-};
+}

package/src/stories/SIA2/DemoWrapper.stories.tsx

@@ -1,29 +1,29 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from '@storybook/react'
 
-import DemoWrapper from "./DemoWrapper";
-import AnnotationTool from "../../models/AnnotationTool";
+import DemoWrapper from './DemoWrapper'
+import AnnotationTool from '../../models/AnnotationTool'
 
-import { AnnotationSettings, ExternalAnnotation } from "../../types";
-import { AnnotationStatus } from "../../models";
+import { AnnotationSettings, ExternalAnnotation } from '../../types'
+import { AnnotationStatus } from '../../models'
 
-export const ActionsData = {};
+export const ActionsData = {}
 
 const meta = {
-  title: "Components/DemoWrapper",
+  title: 'Components/DemoWrapper',
   component: DemoWrapper,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: "padded",
+    layout: 'padded',
   },
-  tags: ["!autodocs"],
+  tags: ['!autodocs'],
   excludeStories: /.*Data$/,
   args: {
     ...ActionsData,
   },
-} satisfies Meta<typeof DemoWrapper>;
+} satisfies Meta<typeof DemoWrapper>
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export default meta
+type Story = StoryObj<typeof meta>
 
 /**
  * SIA with dummy data
@@ -32,7 +32,7 @@ export const Default: Story = {
   args: {
     ...ActionsData,
   },
-};
+}
 
 const polygonAnnotations: ExternalAnnotation[] = [
   {
@@ -58,13 +58,13 @@ const polygonAnnotations: ExternalAnnotation[] = [
     status: AnnotationStatus.LOADED,
     type: AnnotationTool.Polygon,
   },
-];
+]
 
 const annotationSettings: AnnotationSettings = {
   canCreate: true,
   canHaveMultipleLabels: true,
   canLabel: true,
-};
+}
 
 export const WithPolygonAnnotations: Story = {
   args: {
@@ -72,7 +72,7 @@ export const WithPolygonAnnotations: Story = {
     annotations: polygonAnnotations,
     annotationSettings,
   },
-};
+}
 
 const bboxAnnotations: ExternalAnnotation[] = [
   {
@@ -93,7 +93,7 @@ const bboxAnnotations: ExternalAnnotation[] = [
     type: AnnotationTool.BBox,
     status: AnnotationStatus.LOADED,
   },
-];
+]
 
 export const WithBBoxAnnotations: Story = {
   args: {
@@ -101,7 +101,7 @@ export const WithBBoxAnnotations: Story = {
     annotations: bboxAnnotations,
     annotationSettings,
   },
-};
+}
 
 const lineAnnotations: ExternalAnnotation[] = [
   {
@@ -127,7 +127,7 @@ const lineAnnotations: ExternalAnnotation[] = [
     type: AnnotationTool.Line,
     status: AnnotationStatus.LOADED,
   },
-];
+]
 
 export const WithLineAnnotations: Story = {
   args: {
@@ -135,7 +135,7 @@ export const WithLineAnnotations: Story = {
     annotations: lineAnnotations,
     annotationSettings,
   },
-};
+}
 
 const pointAnnotations: ExternalAnnotation[] = [
   {
@@ -168,7 +168,7 @@ const pointAnnotations: ExternalAnnotation[] = [
     type: AnnotationTool.Point,
     status: AnnotationStatus.LOADED,
   },
-];
+]
 
 export const WithPointAnnotations: Story = {
   args: {
@@ -176,4 +176,4 @@ export const WithPointAnnotations: Story = {
     annotations: pointAnnotations,
     annotationSettings,
   },
-};
+}