docs: upgrade storybook to 6.1.x. HVUIKIT-5637

Author: francisco-guilherme

.storybook/blocks/ArgsTable.js

@@ -0,0 +1,39 @@
+import React, { useContext } from "react";
+import { ArgsTableError } from "@storybook/components";
+import { DocsContext, CURRENT_SELECTION, PRIMARY_STORY } from "@storybook/addon-docs/blocks";
+import { StoryTable } from "@storybook/addon-docs/dist/blocks/ArgsTable";
+
+const isShortcut = (value) => {
+  return value && [CURRENT_SELECTION, PRIMARY_STORY].includes(value);
+};
+
+export const getComponent = (props = {}, context) => {
+  const { of } = props;
+  const { story } = props;
+  const { parameters = {} } = context;
+  const { component } = parameters;
+  if (isShortcut(of) || isShortcut(story)) {
+    return component.Naked || component || null;
+  }
+  if (!of) {
+    throw new Error(ArgsTableError.NO_COMPONENT);
+  }
+  return of;
+};
+
+export const ArgsTable = (props) => {
+  const context = useContext(DocsContext);
+  const { parameters: { subcomponents } = {} } = context;
+  const { include, exclude, components } = props;
+  const { story } = props;
+
+  const main = getComponent(props, context);
+
+  if (story) {
+    return <StoryTable {...props} component={main} subcomponents={subcomponents} />;
+  }
+};
+
+ArgsTable.defaultProps = {
+  of: ".",
+};

.storybook/blocks/Deprecated.js

@@ -1,12 +1,12 @@
 import React, { useContext } from "react";
 import { Subtitle } from "@storybook/components";
 import { DocsContext } from "@storybook/addon-docs/blocks";
-import { getStoredTheme, getStorybookTheme } from "../themes";
+import { getTheme } from "../theme";
 
 export const Deprecated = () => {
   const context = useContext(DocsContext);
   const { compNameToUse, deprecated } = context.parameters;
-  const theme = getStorybookTheme(getStoredTheme());
+  const theme = getTheme();
 
   return deprecated ? (
     <Subtitle style={{ color: theme.hv.palette.semantic.sema4 }}>

.storybook/blocks/DocsContainer.js

@@ -1,33 +1,21 @@
-// Copied from https://github.com/storybookjs/storybook/blob/v5.3.18/addons/docs/src/blocks/DocsContainer.tsx
-// to update storybook theme at runtime and apply stylesheet overrides
-
-import * as React from "react";
-
+import React from "react";
 import { DocsContainer } from "@storybook/addon-docs/blocks";
 import { Global } from "@storybook/theming";
-
-import HvProvider from "@hv/uikit-react-core/dist/Provider";
-
-import { getStoredTheme, getStorybookTheme, getDocsStylesOverrides } from "../themes";
+import { getTheme } from "../theme";
+import { getDocsStyles } from "../theme/styles/docs";
 
 export default ({ context, children }) => {
-  const themeName = getStoredTheme();
-  const theme = getStorybookTheme(themeName);
+  const theme = getTheme();
 
-  const docsContext = { ...context };
-  docsContext.parameters = { ...context.parameters };
-  docsContext.parameters.options = {
-    ...context.parameters.options,
-    theme: theme,
+  const docsContext = {
+    ...context,
+    parameters: { ...context.parameters, docs: { ...context.parameters.docs, theme } },
   };
 
   return (
     <>
-      <Global styles={getDocsStylesOverrides(theme)} />
-
-      <DocsContainer context={docsContext}>
-        <HvProvider uiKitTheme={themeName}>{children}</HvProvider>
-      </DocsContainer>
+      <Global styles={getDocsStyles(theme)} />
+      <DocsContainer context={docsContext}>{children}</DocsContainer>
     </>
   );
 };

.storybook/blocks/DocsPage.js

@@ -1,36 +1,25 @@
-// Copied from https://github.com/storybookjs/storybook/blob/v5.3.18/addons/docs/src/blocks/DocsPage.tsx
-// to add a Usage block, customize the stories title and replace some blocks with our own versions
-
 import React from "react";
-import { Title, Subtitle, Description, Primary } from "@storybook/addon-docs/blocks";
-
-import { Usage } from "./Usage";
-import { Props } from "./Props";
-import { Stories } from "./Stories";
-import { Deprecated } from "./Deprecated";
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  Stories,
+  PRIMARY_STORY,
+} from "@storybook/addon-docs/blocks";
 import { MaturityStatus } from "./MaturityStatus";
+import { Usage } from "./Usage";
+import { ArgsTable } from "./ArgsTable";
 
-export default ({
-  titleSlot,
-  maturityStatusSlot,
-  subtitleSlot,
-  descriptionSlot,
-  primarySlot,
-  usageSlot,
-  propsSlot,
-  storiesSlot,
-}) => {
-  return (
-    <>
-      <Title slot={titleSlot} />
-      <MaturityStatus slot={maturityStatusSlot} />
-      <Subtitle slot={subtitleSlot} />
-      <Description slot={descriptionSlot} />
-      <Usage code={usageSlot} />
-      <Deprecated />
-      <Primary slot={primarySlot} />
-      <Props slot={propsSlot} />
-      <Stories title="Examples" slot={storiesSlot} />
-    </>
-  );
-};
+export default ({}) => (
+  <>
+    <Title />
+    <MaturityStatus />
+    <Subtitle />
+    <Description />
+    <Usage />
+    <Primary />
+    <ArgsTable story={PRIMARY_STORY} />
+    <Stories />
+  </>
+);