Doc fixes (#5328)

* Fix pre/code styling * Add StackBlitz buttons to each code example * Delete old .prettierrc * Reformat examples
uber · Mar 1, 2024 · f88694c · f88694c
1 parent 8059778
commit f88694c
Show file tree

Hide file tree

Showing 388 changed files with 3,488 additions and 4,224 deletions.
diff --git a/documentation-site/components/code.jsx b/documentation-site/components/code.jsx
@@ -12,14 +12,15 @@ import { lightTheme } from "react-view";
 import darkTheme from "./yard/dark-theme";
 import CodeBox from "./code-box";
 
-const Code = ({ children, language }) => {
+const Code = ({ children, language, content }) => {
   const [, theme] = useStyletron();
+  const code = content || children.props.children;
   return (
     <CodeBox>
       <Highlight
         {...defaultProps}
-        code={children.replace(/[\r\n]+$/, "")}
-        language={language}
+        code={code.replace(/[\r\n]+$/, "")}
+        language={language || "tsx"}
         theme={theme.name.startsWith("light-theme") ? lightTheme : darkTheme}
       >
         {({ style, tokens, getLineProps, getTokenProps }) => (
@@ -38,8 +39,4 @@ const Code = ({ children, language }) => {
   );
 };
 
-Code.defaultProps = {
-  language: "jsx",
-};
-
 export default Code;
diff --git a/documentation-site/components/example.jsx b/documentation-site/components/example.jsx
@@ -12,6 +12,7 @@ import { Button, KIND, SIZE } from "baseui/button";
 import { ButtonGroup } from "baseui/button-group";
 import { Card } from "baseui/card";
 import { Block } from "baseui/block";
+import sdk from "@stackblitz/sdk";
 
 import Code from "./code";
 import CodeIcon from "./code-icon";
@@ -20,7 +21,7 @@ import { H3 } from "./markdown-elements";
 
 function Source(props) {
   if (!props.children || typeof props.children !== "string") return null;
-  return <Code>{props.children}</Code>;
+  return <Code content={props.children} />;
 }
 
 function Example(props) {
@@ -69,16 +70,103 @@ function Example(props) {
       {children}
 
       <Block paddingTop="scale400">
-        <Button
-          kind={KIND.secondary}
-          startEnhancer={() => <CodeIcon />}
-          onClick={(event, index) => {
-            trackEvent("show_ts_source", title);
-            setIsOpen((p) => !p);
-          }}
-        >
-          Code
-        </Button>
+        <ButtonGroup>
+          <Button
+            kind={KIND.secondary}
+            startEnhancer={() => <CodeIcon />}
+            onClick={(event, index) => {
+              trackEvent("show_ts_source", title);
+              setIsOpen((p) => !p);
+            }}
+          >
+            Code
+          </Button>
+          <Button
+            kind={KIND.secondary}
+            onClick={async (event, index) => {
+              const response = await fetch(
+                "https://registry.npmjs.org/baseui/next"
+              );
+              const data = await response.json();
+              const PACKAGE_JSON = {
+                name: "stackblitz-baseui-example",
+                version: "0.0.0",
+                private: true,
+                dependencies: {
+                  "@types/react": "18.2.45",
+                  "@types/react-dom": "18.2.18",
+                  baseui: data.version,
+                  react: "18.2.0",
+                  "react-dom": "18.2.0",
+                  "react-scripts": "latest",
+                  "styletron-engine-monolithic": "^1.0.0",
+                  "styletron-react": ">=6",
+                },
+                scripts: {
+                  start: "react-scripts start",
+                  build: "react-scripts build",
+                  test: "react-scripts test --env=jsdom",
+                  eject: "react-scripts eject",
+                },
+              };
+              sdk.openProject(
+                {
+                  dependencies: PACKAGE_JSON.dependencies,
+                  title: "BaseWeb Code Example",
+                  description:
+                    "Dynamically generated code example from baseweb.design",
+                  template: "create-react-app",
+                  files: {
+                    "index.html": `<div id="app"></div>`,
+                    "index.tsx": `import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Client as Styletron } from 'styletron-engine-monolithic';
+import { Provider as StyletronProvider } from 'styletron-react';
+import { LightTheme, BaseProvider } from 'baseui';
+import Example from './Example';
+
+const root = createRoot(document.getElementById('app'));
+
+const engine = new Styletron();
+
+root.render(
+  <StrictMode>
+    <StyletronProvider value={engine}>
+      <BaseProvider theme={LightTheme}>
+        <Example />
+      </BaseProvider>
+    </StyletronProvider>
+  </StrictMode>
+);
+`,
+                    "Example.tsx": code,
+                    "tsconfig.json": `{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "lib": ["DOM", "ES2022"],
+    "moduleResolution": "node",
+    "target": "ES2022"
+  }
+}`,
+                    "package.json": JSON.stringify(PACKAGE_JSON, null, 2),
+                  },
+                  settings: {
+                    compile: {
+                      trigger: "auto",
+                      clearConsole: false,
+                    },
+                  },
+                },
+                {
+                  newWindow: true,
+                  openFile: ["Example.tsx"],
+                }
+              );
+            }}
+          >
+            StackBlitz
+          </Button>
+        </ButtonGroup>
       </Block>
 
       {isOpen && (

diff --git a/documentation-site/components/exports.jsx b/documentation-site/components/exports.jsx
@@ -26,7 +26,7 @@ const Exports = (props) => {
     <React.Fragment>
       <H3>{title}</H3>
       <Paragraph>You can import this module like so:</Paragraph>
-      <Code>{code}</Code>
+      <Code content={code} />
       <Paragraph>
         It exports the following components or utility functions:
       </Paragraph>

diff --git a/documentation-site/components/json.jsx b/documentation-site/components/json.jsx
@@ -8,6 +8,8 @@ LICENSE file in the root directory of this source tree.
 import * as React from "react";
 import Code from "./code.jsx";
 
-const JSONViewer = (props) => <Code>{JSON.stringify(props.src, null, 2)}</Code>;
+const JSONViewer = (props) => (
+  <Code content={JSON.stringify(props.src, null, 2)} />
+);
 
 export default JSONViewer;
diff --git a/documentation-site/components/markdown-elements.jsx b/documentation-site/components/markdown-elements.jsx
@@ -33,14 +33,9 @@ const getText = (children) => {
   return label;
 };
 
-export const cleanAnchor = (anchor) =>
-  slugify(getText(anchor));
-
-export const Heading = ({
-  element,
-  fontType,
-  children,
-}) => {
+export const cleanAnchor = (anchor) => slugify(getText(anchor));
+
+export const Heading = ({ element, fontType, children }) => {
   const [hoverRef, isHovered] = useHover();
   const slug = cleanAnchor(children);
   return (
@@ -54,11 +49,7 @@ export const Heading = ({
     >
       <React.Fragment>
         {children}{" "}
-        <Anchor
-          isVisible={isHovered}
-          slug={slug}
-          element={element}
-        />
+        <Anchor isVisible={isHovered} slug={slug} element={element} />
       </React.Fragment>
     </Block>
   );
@@ -76,29 +67,24 @@ export const Paragraph = (props) => (
   </Block>
 );
 
-export const UnorderedList = (props) => (
-  <ul>{props.children}</ul>
-);
-
-export const InlineCode = themedStyled(
-  "code",
-  ({ $theme }) => {
-    return {
-      ...$theme.typography.MonoParagraphMedium,
-      backgroundColor: "rgba(27, 31, 35, 0.05)",
-      borderTopLeftRadius: "3px",
-      borderTopRightRadius: "3px",
-      borderBottomRightRadius: "3px",
-      borderBottomLeftRadius: "3px",
-      fontSize: "85%",
-      marginLeft: 0,
-      marginRight: 0,
-      marginTop: 0,
-      marginBottom: 0,
-      padding: "0.2em 0.4em",
-    };
-  }
-);
+export const UnorderedList = (props) => <ul>{props.children}</ul>;
+
+export const InlineCode = themedStyled("code", ({ $theme }) => {
+  return {
+    ...$theme.typography.MonoParagraphMedium,
+    backgroundColor: "rgba(27, 31, 35, 0.05)",
+    borderTopLeftRadius: "3px",
+    borderTopRightRadius: "3px",
+    borderBottomRightRadius: "3px",
+    borderBottomLeftRadius: "3px",
+    fontSize: "85%",
+    marginLeft: 0,
+    marginRight: 0,
+    marginTop: 0,
+    marginBottom: 0,
+    padding: "0.2em 0.4em",
+  };
+});
 
 const Blockquote = themedStyled("blockquote", {
   backgroundColor: "rgba(27, 31, 35, 0.03)",
@@ -116,8 +102,7 @@ const Blockquote = themedStyled("blockquote", {
 export const DocLink = ({ children, href }) => {
   const parts = href.split("#");
   const internal =
-    (parts[0] === "" && parts[1] !== "") ||
-    !href.includes("http");
+    (parts[0] === "" && parts[1] !== "") || !href.includes("http");
   if (internal) {
     return (
       <Link href={href} legacyBehavior>
@@ -136,9 +121,7 @@ export const H1 = ({ children }) => (
   <React.Fragment>
     <Head>
       <title key="title">
-        {process.env.NODE_ENV !== "production"
-          ? "[DEV] "
-          : ""}
+        {process.env.NODE_ENV !== "production" ? "[DEV] " : ""}
         Base Web - {children}
       </title>
     </Head>
@@ -149,11 +132,7 @@ export const H1 = ({ children }) => (
 );
 
 export const H2 = ({ children }) => (
-  <Heading
-    element="h2"
-    fontType="font650"
-    marginTop="scale1000"
-  >
+  <Heading element="h2" fontType="font650" marginTop="scale1000">
     {children}
   </Heading>
 );
@@ -184,21 +163,14 @@ export const H6 = ({ children }) => (
 
 export const Image = ({ alt, src, height, width }) => {
   if (height || width) {
-    return (
-      <Img
-        src={src}
-        alt={alt}
-        height={height}
-        width={width}
-      />
-    );
+    return <Img src={src} alt={alt} height={height} width={width} />;
   } else {
     return <Img src={src} alt={alt} layout="fill" />;
   }
 };
 
 export default {
-  code: Code,
+  pre: Code,
   h1: H1,
   h2: H2,
   h3: H3,
@@ -209,11 +181,7 @@ export default {
   li: ListItem,
   p: Paragraph,
   ul: UnorderedList,
-  inlineCode: ({ children }) => (
-    <InlineCode>{children}</InlineCode>
-  ),
-  blockquote: ({ children }) => (
-    <Blockquote>{children}</Blockquote>
-  ),
+  code: InlineCode,
+  blockquote: ({ children }) => <Blockquote>{children}</Blockquote>,
   a: DocLink,
 };
diff --git a/documentation-site/examples/.prettierrc b/documentation-site/examples/.prettierrc
diff --git a/documentation-site/examples/accordion/basic.tsx b/documentation-site/examples/accordion/basic.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
-import {Accordion, Panel} from 'baseui/accordion';
+import * as React from "react";
+import { Accordion, Panel } from "baseui/accordion";
 
 const content =
-  'Praesent condimentum ante ac ipsum aliquam, ac scelerisque velit sagittis. Ut sit amet libero scelerisque, accumsan ante vitae, hendrerit tellus. Nullam metus est, vehicula a aliquet id, lobortis in mauris.';
+  "Praesent condimentum ante ac ipsum aliquam, ac scelerisque velit sagittis. Ut sit amet libero scelerisque, accumsan ante vitae, hendrerit tellus. Nullam metus est, vehicula a aliquet id, lobortis in mauris.";
 
 export default function Example() {
   return (

diff --git a/documentation-site/examples/accordion/custom.tsx b/documentation-site/examples/accordion/custom.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react';
-import {Accordion, Panel} from 'baseui/accordion';
+import * as React from "react";
+import { Accordion, Panel } from "baseui/accordion";
 
 export default function Example() {
   return (
-    <Accordion onChange={({expanded}) => console.log(expanded)}>
+    <Accordion onChange={({ expanded }) => console.log(expanded)}>
       <Panel title="Panel 1">Panel 1 opens correctly</Panel>
       <CustomPanel title="Custom Panel">
         This is a custom panel component

diff --git a/documentation-site/examples/accordion/renderpanelcontent.tsx b/documentation-site/examples/accordion/renderpanelcontent.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
-import {Accordion, Panel} from 'baseui/accordion';
+import * as React from "react";
+import { Accordion, Panel } from "baseui/accordion";
 
 const content =
-  'Praesent condimentum ante ac ipsum aliquam, ac scelerisque velit sagittis. Ut sit amet libero scelerisque, accumsan ante vitae, hendrerit tellus. Nullam metus est, vehicula a aliquet id, lobortis in mauris.';
+  "Praesent condimentum ante ac ipsum aliquam, ac scelerisque velit sagittis. Ut sit amet libero scelerisque, accumsan ante vitae, hendrerit tellus. Nullam metus est, vehicula a aliquet id, lobortis in mauris.";
 
 export default function Example() {
   return (