[Fix #209] Global decorators for stories fixed. Answer stories transf…

…ormed to new standard of storybook (CSF3).
kbss-cvut · Jul 3, 2023 · 73c4d70 · 73c4d70
1 parent 2656432
commit 73c4d70
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 39 deletions.
diff --git 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
@@ -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
@@ -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,
+  },
 };