[Refactor #209] Global controls now present in the top toolbar in storybook. Decorators might need further work to make it simple and unified

Author: VojtechLunak

.storybook/preview.js

@@ -23,14 +23,17 @@ export const globalTypes = {
     name: "Icon behavior",
     description: "Set the behavior for the icons",
     defaultValue: Constants.ICON_BEHAVIOR.ON_HOVER,
-    options: [
-      Constants.ICON_BEHAVIOR.ON_HOVER,
-      Constants.ICON_BEHAVIOR.ENABLE,
-      Constants.ICON_BEHAVIOR.DISABLE,
-    ],
-    control: { type: "radio" },
+    toolbar: {
+      icon: "photo",
+      items: [
+        { value: Constants.ICON_BEHAVIOR.ON_HOVER, title: "onHover" },
+        { value: Constants.ICON_BEHAVIOR.ENABLE, title: "Enabled" },
+        { value: Constants.ICON_BEHAVIOR.DISABLE, title: "Disabled" },
+      ],
+      dynamicTitle: true,
+    },
   },
-  locale2: {
+  locale: {
     description: "Internationalization locale",
     defaultValue: "en",
     toolbar: {
@@ -42,30 +45,47 @@ export const globalTypes = {
       dynamicTitle: true,
     },
   },
-  locale: {
-    name: "Locale",
-    description: "Internationalization locale",
-    defaultValue: "en",
-    options: ["en", "cs"],
-    control: { type: "radio" },
-  },
   debugMode: {
     name: "Debug Mode",
     description: "Show irrelevant questions",
     defaultValue: false,
-    control: { type: "boolean" },
+    toolbar: {
+      title: "Debug mode",
+      icon: "beaker",
+      items: [
+        { value: true, title: "On" },
+        { value: false, title: "Off" },
+      ],
+    },
   },
   horizontalNavBar: {
     name: "Toggle Horizontal Navigation Bar",
     description: "Set the navigation bar to horizontal",
     defaultValue: false,
-    control: { type: "boolean" },
+    toolbar: {
+      icon: "expandalt",
+      items: [
+        { value: true, title: "On" },
+        { value: false, title: "Off" },
+      ],
+    },
   },
   timeOut: {
     name: "Time Out (ms)",
     description: "Set time-out for possible values (in ms)",
     defaultValue: 1500,
-    control: { type: "number", min: 0, max: 10000, step: 500 },
+    toolbar: {
+      title: "Time Out (ms)",
+      icon: "timer",
+      items: [
+        { value: 200, title: "200 ms" },
+        { value: 500, title: "500 ms" },
+        { value: 1000, title: "1000 ms" },
+        { value: 1500, title: "1500 ms" },
+        { value: 2000, title: "2000 ms" },
+        { value: 2500, title: "2500 ms" },
+      ],
+    },
   },
 };
 
@@ -120,13 +140,12 @@ const preview = {
     (Story, context) => (
       <ConfigurationContextProvider options={options}>
         <FormGenContextProvider fetchTypeAheadValues={fetchTypeAheadValues}>
-          <IntlContextProvider locale={context.globals.locale2}>
+          <IntlContextProvider locale={context.globals.locale}>
             <Story />
           </IntlContextProvider>
         </FormGenContextProvider>
       </ConfigurationContextProvider>
     ),
   ],
 };
-
 export default preview;

src/stories/SForms.stories.tsx

@@ -91,13 +91,11 @@ const Template: ComponentStory<typeof SForms> = (
   };
 
   return (
-    <IntlContextProvider locale={locale}>
-      <SForms
-        {...args}
-        options={options}
-        fetchTypeAheadValues={fetchTypeAheadValues}
-      />
-    </IntlContextProvider>
+    <SForms
+      {...args}
+      options={options}
+      fetchTypeAheadValues={fetchTypeAheadValues}
+    />
   );
 };