[WIP] SiS version POC

components/blocks/autofunction.js

@@ -1,10 +1,7 @@
 import React, { useEffect, useState, useRef } from "react";
+import ReactDOMServer from "react-dom/server";
+import Markdown from "react-markdown";
 import reverse from "lodash/reverse";
-import classNames from "classnames";
-import Table from "./table";
-import { H2, H3 } from "./headers";
-import Warning from "./warning";
-import Deprecation from "./deprecation";
 import { withRouter, useRouter } from "next/router";
 import Prism from "prismjs";
 import "prismjs/components/prism-python";
@@ -15,31 +12,34 @@ import "prismjs/plugins/toolbar/prism-toolbar";
 import "prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard";
 import "prismjs/plugins/normalize-whitespace/prism-normalize-whitespace";
 
-import styles from "./autofunction.module.css";
-import { name } from "file-loader";
+import Table from "./table";
+import { H2, H3 } from "./headers";
+import Note from "./note";
+import Warning from "./warning";
+import Deprecation from "./deprecation";
+import { functionNameToAnchorName } from "../../lib/utils";
+import VersionSelector from "../utilities/versionSelector";
+import { useVersion } from "../../context/VersionContext";
 
-const cleanHref = (name) => {
-  return String(name).replace(/\./g, "").replace(/\s+/g, "-");
-};
+import styles from "./autofunction.module.css";
 
 const Autofunction = ({
   version,
   versions,
+  snowflakeVersions,
   streamlitFunction,
   streamlit,
+  exceptions,
   slug,
   hideHeader,
   deprecated,
   deprecatedText,
   oldStreamlitFunction,
 }) => {
   const blockRef = useRef();
-  const router = useRouter();
-  const maxVersion = versions[versions.length - 1];
   const [isHighlighted, setIsHighlighted] = useState(false);
-  const [currentVersion, setCurrentVersion] = useState(
-    version ? version : versions[versions.length - 1],
-  );
+
+  const { version: currentVersion } = useVersion();
 
   useEffect(() => {
     highlightWithPrism();
@@ -97,75 +97,13 @@ const Autofunction = ({
     setIsHighlighted(true);
   };
 
-  const VersionSelector = ({
-    versionList,
-    currentVersion,
-    handleSelectVersion,
-  }) => {
-    const isSiS = currentVersion.startsWith("SiS") ? true : false;
-    const selectClass = isSiS
-      ? "version-select sis-version"
-      : currentVersion !== versionList[0]
-        ? "version-select old-version"
-        : "version-select";
-
-    return (
-      <form className={classNames(selectClass, styles.Form)}>
-        <label>
-          <span className="sr-only">Streamlit Version</span>
-          <select
-            value={currentVersion}
-            onChange={handleSelectVersion}
-            className={styles.Select}
-          >
-            {versionList.map((version, index) => (
-              <option value={version} key={version}>
-                {version == "SiS"
-                  ? "Streamlit in Snowflake"
-                  : version.startsWith("SiS.")
-                    ? version.replace("SiS.", "Streamlit in Snowflake ")
-                    : "Version " + version}
-              </option>
-            ))}
-          </select>
-        </label>
-      </form>
-    );
-  };
-
-  const handleSelectVersion = (event) => {
-    const functionObject =
-      streamlit[streamlitFunction] ?? streamlit[oldStreamlitFunction];
-    const slicedSlug = slug.slice();
-
-    if (event.target.value !== currentVersion) {
-      setCurrentVersion(event.target.value);
-      if (event.target.value !== maxVersion) {
-        let isnum = /^[\d\.]+$/.test(slicedSlug[0]);
-        let isSiS = /^SiS[\d\.]*$/.test(slicedSlug[0]);
-        if (isnum || isSiS) {
-          slicedSlug[0] = event.target.value;
-        } else {
-          slicedSlug.unshift(event.target.value);
-        }
-        slug.unshift(event.target.value);
-      }
-    }
-
-    if (!functionObject) {
-      router.push(`/${slicedSlug.join("/")}`);
-    } else {
-      const name = cleanHref(`st.${functionObject.name}`);
-      router.push(`/${slicedSlug.join("/")}#${name} `);
-    }
-  };
-
   const footers = [];
   const args = [];
   const returns = [];
-  const versionList = reverse(versions.slice());
   let functionObject;
+  let functionException;
   let functionDescription;
+  let functionDescriptionPrefix = "";
   let header;
   let headerTitle;
   let body;
@@ -177,8 +115,17 @@ const Autofunction = ({
   if (streamlitFunction in streamlit || oldStreamlitFunction in streamlit) {
     functionObject =
       streamlit[streamlitFunction] ?? streamlit[oldStreamlitFunction];
+    functionException =
+      streamlitFunction in streamlit
+        ? exceptions[streamlitFunction] ?? {}
+        : oldStreamlitFunction in streamlit
+          ? exceptions[oldStreamlitFunction] ?? {}
+          : {};
     isClass = functionObject.is_class;
     isAttributeDict = functionObject.is_attribute_dict ?? false;
+    if ("_" in functionException && "content" in functionException["_"]) {
+      functionDescriptionPrefix = functionException["_"]["content"];
+    }
     if (
       functionObject.description !== undefined &&
       functionObject.description
@@ -198,20 +145,14 @@ const Autofunction = ({
             <a
               aria-hidden="true"
               tabIndex="-1"
-              href={`#${cleanHref(
-                streamlitFunction.replace("streamlit", "st"),
-              )}`.toLowerCase()}
+              href={`#${functionNameToAnchorName(streamlitFunction)}`}
               className="absolute"
             >
               <span className="icon icon-link"></span>
             </a>
             {streamlitFunction.replace("streamlit", "st")}
           </H2>
-          <VersionSelector
-            versionList={versionList}
-            currentVersion={currentVersion}
-            handleSelectVersion={handleSelectVersion}
-          />
+          <VersionSelector functionObject={functionObject} slug={slug} />
         </div>
         <Warning>
           {version && version.startsWith("SiS") ? (
@@ -246,7 +187,7 @@ const Autofunction = ({
         <a
           aria-hidden="true"
           tabIndex="-1"
-          href={`#${cleanHref(name)}`.toLowerCase()}
+          href={`#${functionNameToAnchorName(name)}`}
           className="absolute"
         >
           <span className="icon icon-link"></span>
@@ -258,7 +199,7 @@ const Autofunction = ({
         <a
           aria-hidden="true"
           tabIndex="-1"
-          href={`#${cleanHref(name)}`.toLowerCase()}
+          href={`#${functionNameToAnchorName(name)}`}
           className="absolute"
         >
           <span className="icon icon-link"></span>
@@ -275,11 +216,7 @@ const Autofunction = ({
           `}
         >
           {headerTitle}
-          <VersionSelector
-            versionList={versionList}
-            currentVersion={currentVersion}
-            handleSelectVersion={handleSelectVersion}
-          />
+          <VersionSelector functionObject={functionObject} slug={slug} />
         </div>
         {deprecated === true ? (
           <Deprecation>
@@ -288,6 +225,13 @@ const Autofunction = ({
         ) : (
           ""
         )}
+        {functionDescriptionPrefix ? (
+          <Note label="Streamlit in Snowflake Note" compact>
+            <Markdown children={functionDescriptionPrefix} />
+          </Note>
+        ) : (
+          ""
+        )}
         <div
           className="code-desc"
           dangerouslySetInnerHTML={functionDescription}
@@ -315,7 +259,7 @@ const Autofunction = ({
   // propertiesRows is initialized early to allow Attributes (recorded as args)
   // in any class docstring to be diverted to the properties section.
   let propertiesRows = [];
-  let docstringProperties = []; // Used to avoid duplicates with @property
+  let docstringProperties = []; // Internal use to avoid duplicates with @property
 
   for (const index in functionObject.args) {
     const row = {};
@@ -332,6 +276,9 @@ const Autofunction = ({
         ${param.deprecated.deprecatedText}
       </div>`
       : "";
+    const paramPrefix = functionException[param.name]
+      ? functionException[param.name]["content"]
+      : "";
     const description = param.description
       ? param.description
       : `<p>No description</p> `;
@@ -348,6 +295,15 @@ const Autofunction = ({
       `;
       row["body"] = `
         ${deprecatedMarkup}
+        ${
+          paramPrefix
+            ? ReactDOMServer.renderToString(
+                <Note label="Streamlit in Snowflake Note" compact>
+                  <Markdown children={paramPrefix} />
+                </Note>,
+              )
+            : ""
+        }
         ${description}
       `;
     } else {
@@ -362,6 +318,15 @@ const Autofunction = ({
       `;
       row["body"] = `
         ${deprecatedMarkup}
+        ${
+          paramPrefix
+            ? ReactDOMServer.renderToString(
+                <Note label="Streamlit in Snowflake Note" compact>
+                  <Markdown children={paramPrefix} />
+                </Note>,
+              )
+            : ""
+        }
         ${description}
       `;
     }
@@ -440,6 +405,9 @@ const Autofunction = ({
       ${property.deprecated.deprecatedText}
     </div>`
       : "";
+    const propertyPrefix = functionException[property.name]
+      ? functionException[property.name]["content"]
+      : "";
     const description = property.description
       ? property.description
       : `<p>No description</p> `;
@@ -452,6 +420,15 @@ const Autofunction = ({
       </p>`;
     row["body"] = `
       ${deprecatedMarkup}
+      ${
+        propertyPrefix
+          ? ReactDOMServer.renderToString(
+              <Note label="Streamlit in Snowflake Note" compact>
+                <Markdown children={propertyPrefix} />
+              </Note>,
+            )
+          : ""
+      }
       ${description}
     `;
     propertiesRows.push(row);

components/blocks/autofunction.module.css

@@ -11,7 +11,7 @@
 }
 
 .Title {
-  @apply mt-6 mb-2;
+  @apply grow mt-6 mb-2;
 }
 
 .Form {
@@ -175,3 +175,7 @@
 :global(.dark) .Keyword::after {
   @apply bg-gray-80 text-gray-30;
 }
+
+.Snowflake::after {
+  content: "SiS";
+}

components/blocks/iconHeader.js

@@ -2,17 +2,21 @@ import classNames from "classnames";
 
 import styles from "./iconHeader.module.css";
 
-const IconHeader = ({ icon, rotate, title, background, color }) => {
+const IconHeader = ({ icon, rotate, title, background, color, compact }) => {
   return (
     <section className={classNames(styles.Container)}>
-      <i
-        className={classNames(styles.Icon, BG_CLASS[background])}
-        style={{
-          transform: `rotate(${rotate}deg)`,
-        }}
-      >
-        {icon}
-      </i>
+      {compact ? (
+        ""
+      ) : (
+        <i
+          className={classNames(styles.Icon, BG_CLASS[background])}
+          style={{
+            transform: `rotate(${rotate}deg)`,
+          }}
+        >
+          {icon}
+        </i>
+      )}
       <h4 className={classNames(styles.Title, FG_CLASS[background])}>
         {title}
       </h4>

components/blocks/note.js

@@ -6,15 +6,22 @@ import NoteStyles from "./note.module.css";
 
 import IconHeader from "./iconHeader";
 
-const Note = ({ children }) => {
+const Note = ({ children, label, compact }) => {
   return (
-    <section className={classNames(CalloutStyles.Container, NoteStyles.Note)}>
+    <section
+      className={classNames(
+        CalloutStyles.Container,
+        NoteStyles.Note,
+        compact ? NoteStyles.Compact : "",
+      )}
+    >
       <IconHeader
-        icon="push_pin"
+        icon={"push_pin"}
         rotate="45"
-        title="Note"
+        title={label ?? "Note"}
         background="lightBlue-70"
         color="white"
+        compact={compact}
       />
       {children}
     </section>

components/blocks/note.module.css

@@ -5,3 +5,7 @@
 :global(.dark) .Note {
   background-color: #062633;
 }
+
+.Compact {
+  @apply p-4;
+}