Capture component doc progress (#13656)

* fix ProgressBar component

* [styleguide] - add some simple stats

* update ProgressBar snap

* cleanup

frontend/src/metabase/components/ProgressBar.jsx

@@ -15,7 +15,7 @@ const ProgressWrapper = styled.div`
   position: relative;
   border: 1px solid ${props => props.color};
   height: 10px;
-  borderradius: 99px;
+  border-radius: 99px;
 `;
 
 const Progress = styled.div`
@@ -27,7 +27,7 @@ const Progress = styled.div`
       left: 0;
       border-radius: inherit;
       border-top-left-radius: 0;
-      borderBottomLeftRadius: 0;
+      border-bottom-left-radius: 0;
       width: ${props => props.width}%;
       ":before": {
         display: ${props => (props.animated ? "block" : "none")};
@@ -42,6 +42,7 @@ const Progress = styled.div`
       },
 `;
 
+// @Question - why is this separate from our progress Viz type?
 export default class ProgressBar extends Component {
   props: Props;
 
@@ -58,7 +59,7 @@ export default class ProgressBar extends Component {
 
     return (
       <ProgressWrapper color={color}>
-        <Progress width={width} animated={animated} />
+        <Progress width={width} animated={animated} color={color} />
       </ProgressWrapper>
     );
   }

frontend/src/metabase/internal/lib/components-webpack.js

-// import all modules in this directory (http://stackoverflow.com/a/31770875)
-const componentsReq = require.context(
+// get all the jsx (component) files in the main components directory
+const allComponents = require.context("metabase/components", true, /\.(jsx)$/);
+
+// import modules with .info.js in /components (http://stackoverflow.com/a/31770875)
+const documentedComponents = require.context(
   "metabase/components",
   true,
+  // only match files that have .info.js
   /^(.*\.info\.(js$))[^.]*$/im,
 );
 
-const containersReq = require.context(
+const documentedContainers = require.context(
   "metabase/containers",
   true,
+  // only match files that have .info.js
   /^(.*\.info\.(js$))[^.]*$/im,
 );
 
@@ -17,9 +22,20 @@ function getComponents(req) {
     .map(key => Object.assign({}, req(key), { showExample: true }));
 }
 
-const components = [
-  ...getComponents(componentsReq),
-  ...getComponents(containersReq),
+const guideComponents = [
+  ...getComponents(documentedComponents),
+  ...getComponents(documentedContainers),
 ];
 
-export default components;
+// we'll consider all containers and components with .info.js files to be "documented" in some form
+const documented = getComponents(documentedComponents).length;
+
+const total = getComponents(allComponents).length;
+
+export const stats = {
+  total,
+  documented,
+  ratio: documented / total,
+};
+
+export default guideComponents;

frontend/src/metabase/internal/pages/WelcomePage.jsx

 import React from "react";
+import { Box, Flex } from "grid-styled";
 
 import Heading from "metabase/components/type/Heading";
+import Subhead from "metabase/components/type/Subhead";
 import Text from "metabase/components/type/Text";
 
+import ProgressBar from "metabase/components/ProgressBar";
+
+import { stats } from "../lib/components-webpack";
+
 const WelcomePage = () => {
   return (
-    <div className="wrapper wrapper--trim">
-      <div className="my4">
+    <Box className="wrapper wrapper--trim">
+      <Box my={4}>
         <Heading>Metabase Style Guide</Heading>
         <Text>
           Reference and samples for how to make things the Metabase way.
         </Text>
-      </div>
-    </div>
+      </Box>
+
+      <Subhead>Documentation progress</Subhead>
+      <Text>
+        Documenting our component library is an ongoing process. Here's what
+        percentage of the code in <code>metabase/components</code> has some form
+        of documentation so far.
+      </Text>
+
+      <Box mt={3}>
+        <ProgressBar percentage={stats.ratio} />
+        <Flex align="center" mt={1}>
+          <Box>
+            <Subhead>{stats.documented}</Subhead>
+            <Text>Documented</Text>
+          </Box>
+          <Box ml={"auto"} className="text-right">
+            <Subhead>{stats.total}</Subhead>
+            <Text>Total .jsx files in /components</Text>
+          </Box>
+        </Flex>
+      </Box>
+    </Box>
   );
 };
 

frontend/test/metabase/internal/__snapshots__/components.unit.spec.js.snap

@@ -730,11 +730,12 @@ exports[`Position should render "Relative" correctly 1`] = `
 
 exports[`ProgressBar should render "Animated" correctly 1`] = `
 <div
-  className="ProgressBar__ProgressWrapper-sc-11v0v62-0 jstHKb"
+  className="ProgressBar__ProgressWrapper-sc-11v0v62-0 gNslgH"
   color="#509EE3"
 >
   <div
-    className="ProgressBar__Progress-sc-11v0v62-1 dhIpua"
+    className="ProgressBar__Progress-sc-11v0v62-1 gzZAJq"
+    color="#509EE3"
     width={35}
   />
 </div>
@@ -742,11 +743,12 @@ exports[`ProgressBar should render "Animated" correctly 1`] = `
 
 exports[`ProgressBar should render "Default" correctly 1`] = `
 <div
-  className="ProgressBar__ProgressWrapper-sc-11v0v62-0 jstHKb"
+  className="ProgressBar__ProgressWrapper-sc-11v0v62-0 gNslgH"
   color="#509EE3"
 >
   <div
-    className="ProgressBar__Progress-sc-11v0v62-1 kTuUwV"
+    className="ProgressBar__Progress-sc-11v0v62-1 cmFRuU"
+    color="#509EE3"
     width={75}
   />
 </div>