fix: update story to CSF format (with hooks)

watson-developer-cloud · Jan 17, 2024 · 8292483 · 8292483
1 parent 9a7c488
commit 8292483
Showing 1 changed file with 43 additions and 45 deletions.
diff --git a/...ents/DocumentPreview/components/PdfViewerWithHighlight/PdfViewerWithHighlight.stories.tsx b/...ents/DocumentPreview/components/PdfViewerWithHighlight/PdfViewerWithHighlight.stories.tsx
@@ -295,53 +295,51 @@ export default {
   decorators: [withKnobs]
 };
 
-export const Default = {
-  render: () => {
-    const page = number(pageKnob.label, pageKnob.defaultValue, pageKnob.options);
-    const zoom = radios(zoomKnob.label, zoomKnob.options, zoomKnob.defaultValue);
-    const scale = parseFloat(zoom);
-    const highlights = select(
-      highlightKnob.label,
-      highlightKnob.options,
-      highlightKnob.defaultValue
-    );
-    const activeId = number('Active highlight index', 0);
-    const setLoadingAction = action('setLoading');
-    const setCurrentPageAction = action('setCurrentPage');
-
-    const [currentPage, setCurrentPage] = useState(0);
-    useEffect(() => {
-      setCurrentPage(page);
-    }, [page]);
-    const handleSetCurrentPage = useCallback(
-      (p: number) => {
-        setCurrentPageAction(p);
-        setCurrentPage(p);
-      },
-      [setCurrentPageAction]
-    );
+const DefaultStory: FC<{}> = () => {
+  const page = number(pageKnob.label, pageKnob.defaultValue, pageKnob.options);
+  const zoom = radios(zoomKnob.label, zoomKnob.options, zoomKnob.defaultValue);
+  const scale = parseFloat(zoom);
+  const highlights = select(highlightKnob.label, highlightKnob.options, highlightKnob.defaultValue);
+  const activeId = number('Active highlight index', 0);
+  const setLoadingAction = action('setLoading');
+  const setCurrentPageAction = action('setCurrentPage');
+
+  const [currentPage, setCurrentPage] = useState(0);
+  useEffect(() => {
+    setCurrentPage(page);
+  }, [page]);
+  const handleSetCurrentPage = useCallback(
+    (p: number) => {
+      setCurrentPageAction(p);
+      setCurrentPage(p);
+    },
+    [setCurrentPageAction]
+  );
 
-    const [activeIds, setActiveIds] = useState<string[]>([]);
-    useEffect(() => {
-      const items = highlightKnob.data[highlights];
-      const item = items[activeId];
-      setActiveIds(item?.id ? [item.id] : []);
-    }, [activeId, highlights]);
+  const [activeIds, setActiveIds] = useState<string[]>([]);
+  useEffect(() => {
+    const items = highlightKnob.data[highlights];
+    const item = items[activeId];
+    setActiveIds(item?.id ? [item.id] : []);
+  }, [activeId, highlights]);
 
-    return (
-      <PdfViewerWithHighlight
-        file={atob(doc)}
-        page={currentPage}
-        scale={scale}
-        setLoading={setLoadingAction}
-        document={document}
-        highlights={highlightKnob.data[highlights]}
-        activeIds={activeIds}
-        setCurrentPage={handleSetCurrentPage}
-        pdfWorkerUrl={PDF_WORKER_URL}
-      />
-    );
-  },
+  return (
+    <PdfViewerWithHighlight
+      file={atob(doc)}
+      page={currentPage}
+      scale={scale}
+      setLoading={setLoadingAction}
+      document={document}
+      highlights={highlightKnob.data[highlights]}
+      activeIds={activeIds}
+      setCurrentPage={handleSetCurrentPage}
+      pdfWorkerUrl={PDF_WORKER_URL}
+    />
+  );
+};
+
+export const Default = {
+  render: () => <DefaultStory />,
 
   name: 'default'
 };