From 73c4d70aa4fb731f0150a636b8622707b2af52a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vojte=CC=8Cch=20Lun=CC=8Ca=CC=81k?=
 <vojtech.lunak1@gmail.com>
Date: Mon, 3 Jul 2023 17:58:19 +0200
Subject: [PATCH] [Fix #209] Global decorators for stories fixed. Answer
 stories transformed to new standard of storybook (CSF3).

---
 .storybook/main.cjs            |  1 -
 .storybook/preview.js          |  4 +-
 src/stories/Answer.stories.tsx | 97 +++++++++++++++++++++-------------
 3 files changed, 63 insertions(+), 39 deletions(-)

diff --git a/.storybook/main.cjs b/.storybook/main.cjs
index d05077eb..117d0f9f 100644
--- a/.storybook/main.cjs
+++ b/.storybook/main.cjs
@@ -4,7 +4,6 @@ module.exports = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    "@luigiminardim/storybook-addon-globals-controls",
     "@storybook/addon-a11y",
   ],
   framework: "@storybook/react-webpack5",
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 1524e670..947de0e2 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -115,7 +115,7 @@ const fetchTypeAheadValues = () => {
   );
 };
 
-export const preview = {
+const preview = {
   decorators: [
     (Story, context) => (
       <ConfigurationContextProvider options={options}>
@@ -128,3 +128,5 @@ export const preview = {
     ),
   ],
 };
+
+export default preview;
diff --git a/src/stories/Answer.stories.tsx b/src/stories/Answer.stories.tsx
index ba99d309..05946f9d 100644
--- a/src/stories/Answer.stories.tsx
+++ b/src/stories/Answer.stories.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import Answer from "../components/Answer";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import { preview } from "../../.storybook/preview";
+import { Meta, StoryObj } from "@storybook/react";
 
 import question from "./assets/question/questionWithMedia.json";
 import questionTypeHead from "./assets/question/questionTypeHead.json";
@@ -11,57 +10,81 @@ import questionMaskedInput from "./assets/question/questionMaskedInput.json";
 import questionSparqlInput from "./assets/question/questionSparqlInput.json";
 import questionTurtleInput from "./assets/question/questionTurtleInput.json";
 
-export default {
-  title: "Components/Answer",
+const meta: Meta<typeof Answer> = {
   component: Answer,
-  decorators: preview.decorators,
+  argTypes: {
+    onChange: {
+      table: {
+        disable: true,
+      },
+    },
+    onCommentChange: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
+export default meta;
+
+type Story = StoryObj<typeof Answer>;
 
-const Template: ComponentStory<typeof Answer> = (args) => {
-  return (
-    <Answer
-      {...args}
-      answer={{}}
-      onChange={() => {}}
-      onCommentChange={() => {}}
-    />
-  );
+const Template: Story = {
+  args: {
+    answer: {},
+    onChange: () => {},
+    onCommentChange: () => {},
+  },
 };
 
-export const RegularInput = Template.bind({});
-RegularInput.args = {
-  answer: {
-    "http://onto.fel.cvut.cz/ontologies/documentation/has_data_value": "",
+export const RegularInput: Story = {
+  args: {
+    ...Template.args,
+    answer: {
+      "http://onto.fel.cvut.cz/ontologies/documentation/has_data_value": "",
+    },
+    question: question,
   },
-  question: question,
 };
 
-export const TypeHead = Template.bind({});
-TypeHead.args = {
-  question: questionTypeHead,
+export const TypeHead: Story = {
+  args: {
+    ...Template.args,
+    question: questionTypeHead,
+  },
 };
 
-export const DateTimePicker = Template.bind({});
-DateTimePicker.args = {
-  question: questionDate,
+export const DateTimePicker: Story = {
+  args: {
+    ...Template.args,
+    question: questionDate,
+  },
 };
 
-export const CheckBox = Template.bind({});
-CheckBox.args = {
-  question: questionCheckBox,
+export const CheckBox: Story = {
+  args: {
+    ...Template.args,
+    question: questionCheckBox,
+  },
 };
 
-export const MaskedInput = Template.bind({});
-MaskedInput.args = {
-  question: questionMaskedInput,
+export const MaskedInput: Story = {
+  args: {
+    ...Template.args,
+    question: questionMaskedInput,
+  },
 };
 
-export const SparqlInput = Template.bind({});
-SparqlInput.args = {
-  question: questionSparqlInput,
+export const SparqlInput: Story = {
+  args: {
+    ...Template.args,
+    question: questionSparqlInput,
+  },
 };
 
-export const TurtleInput = Template.bind({});
-TurtleInput.args = {
-  question: questionTurtleInput,
+export const TurtleInput: Story = {
+  args: {
+    ...Template.args,
+    question: questionTurtleInput,
+  },
 };