@bitrise/bitkit 9.3.0-alpha.3 → 9.3.1

package/site/components/Documentation/Documentation.tsx

@@ -1,54 +1,43 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable global-require */
 import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
 import { Redirect, Route, Switch } from 'react-router-dom';
-import { Flex, Text, provider as BitchakraProvider } from '@bitrise/bitkit';
+import { Flex, Text } from '@bitrise/bitkit';
 import documentation from '../../../documentation.json';
+import SideMenu from '../SideMenu/SideMenu';
+import SideMenuItem from '../SideMenu/SideMenuItem';
 import ComponentDocumentationPage from './ComponentDocumentationPage';
 import SectionColors from './Materials/SectionColors';
 import SectionIcons from './Materials/SectionIcons';
 import SectionTypography from './Materials/SectionTypography';
-import SideMenu from '../SideMenu/SideMenu';
-import SideMenuItem from '../SideMenu/SideMenuItem';
 
 const { useEffect } = React;
 
 const SectionMap = {
   AddonBeam: {
     Showcase: require('./Components/SectionAddonBeam').default,
-    components: [
-      documentation.AddonBeam,
-      documentation.AddonBeamLink,
-    ],
+    components: [documentation.AddonBeam, documentation.AddonBeamLink],
   },
   AddonFooter: {
     Showcase: require('./Components/SectionAddonFooter').default,
-    components: [
-      documentation.AddonFooter,
-    ],
+    components: [documentation.AddonFooter],
   },
   Appear: {
     Showcase: require('./Components/SectionAppear').default,
-    components: [
-      documentation.Appear,
-    ],
+    components: [documentation.Appear],
   },
   Avatar: {
     Showcase: require('./Components/SectionAvatar').default,
-    components: [
-      documentation.Avatar,
-    ],
+    components: [documentation.Avatar],
   },
   Badge: {
     Showcase: require('./Components/SectionBadge').default,
-    components: [
-      documentation.Badge,
-    ],
+    components: [documentation.Badge],
   },
   Base: {
     Showcase: require('./Components/SectionBase').default,
-    components: [
-      documentation.Base,
-    ],
+    components: [documentation.Base],
   },
   Button: {
     Showcase: require('./Components/SectionButtons').default,
@@ -59,41 +48,25 @@ const SectionMap = {
       documentation.ButtonWithDropdown,
     ],
   },
-  Button2: {
-    Showcase: require('./Components/SectionButton2').default,
-    components: [],
-  },
   Card: {
     Showcase: require('./Components/SectionCards').default,
-    components: [
-      documentation.Card,
-      documentation.CardContent,
-      documentation.CardDivider,
-    ],
+    components: [documentation.Card, documentation.CardContent, documentation.CardDivider],
   },
   Checkbox: {
     Showcase: require('./Components/SectionCheckbox').default,
-    components: [
-      documentation.Checkbox,
-    ],
+    components: [documentation.Checkbox],
   },
   DatePicker: {
     Showcase: require('./Components/SectionDatePicker').default,
-    components: [
-      documentation.DatePicker,
-    ],
+    components: [documentation.DatePicker],
   },
   Divider: {
     Showcase: require('./Components/SectionDivider').default,
-    components: [
-      documentation.Divider,
-    ],
+    components: [documentation.Divider],
   },
   Dot: {
     Showcase: require('./Components/SectionDot').default,
-    components: [
-      documentation.Dot,
-    ],
+    components: [documentation.Dot],
   },
   Dropdown: {
     Showcase: require('./Components/SectionDropdowns').default,
@@ -107,38 +80,26 @@ const SectionMap = {
   },
   Expand: {
     Showcase: require('./Components/SectionExpand').default,
-    components: [
-      documentation.Expand,
-    ],
+    components: [documentation.Expand],
   },
   Flex: {
     Showcase: require('./Components/SectionFlex').default,
-    components: [
-      documentation.Flex,
-    ],
+    components: [documentation.Flex],
   },
   Grid: {
     Showcase: require('./Components/SectionGrid').default,
-    components: [
-      documentation.Grid,
-    ],
+    components: [documentation.Grid],
   },
   Hamburger: {
     Showcase: require('./Components/SectionHamburger').default,
-    components: [
-      documentation.Hamburger,
-    ],
+    components: [documentation.Hamburger],
   },
   Icon: {
     Showcase: require('./Components/SectionIcons').default,
-    components: [
-      documentation.Icon,
-    ],
+    components: [documentation.Icon],
   },
   Image: {
-    components: [
-      documentation.Image,
-    ],
+    components: [documentation.Image],
   },
   Input: {
     Showcase: require('./Components/SectionInputs').default,
@@ -151,21 +112,14 @@ const SectionMap = {
     ],
   },
   Link: {
-    components: [
-      documentation.Link,
-    ],
+    components: [documentation.Link],
   },
   List: {
     Showcase: require('./Components/SectionList').default,
-    components: [
-      documentation.List,
-      documentation.ListItem,
-    ],
+    components: [documentation.List, documentation.ListItem],
   },
   Logo: {
-    components: [
-      documentation.Logo,
-    ],
+    components: [documentation.Logo],
   },
   Modal: {
     Showcase: require('./Components/SectionModals').default,
@@ -179,9 +133,7 @@ const SectionMap = {
   },
   Notification: {
     Showcase: require('./Components/SectionNotification').default,
-    components: [
-      documentation.Notification,
-    ],
+    components: [documentation.Notification],
   },
   Placement: {
     Showcase: require('./Components/SectionPlacement').default,
@@ -205,15 +157,11 @@ const SectionMap = {
   },
   RadioButton: {
     Showcase: require('./Components/SectionRadioButton').default,
-    components: [
-      documentation.RadioButton,
-    ],
+    components: [documentation.RadioButton],
   },
   Ribbon: {
     Showcase: require('./Components/SectionRibbon').default,
-    components: [
-      documentation.Ribbon,
-    ],
+    components: [documentation.Ribbon],
   },
   Sidebar: {
     Showcase: require('./Components/SectionSidebar').default,
@@ -227,17 +175,11 @@ const SectionMap = {
   },
   Skeleton: {
     Showcase: require('./Components/SectionSkeleton').default,
-    components: [
-      documentation.Skeleton,
-      documentation.SkeletonBox,
-    ],
+    components: [documentation.Skeleton, documentation.SkeletonBox],
   },
   Status: {
     Showcase: require('./Components/SectionStatus').default,
-    components: [
-      documentation.Status404,
-      documentation.Status500,
-    ],
+    components: [documentation.Status404, documentation.Status500],
   },
   Table: {
     Showcase: require('./Components/SectionTable').default,
@@ -253,43 +195,29 @@ const SectionMap = {
   },
   Tabs: {
     Showcase: require('./Components/SectionTabs').default,
-    components: [
-      documentation.Tab,
-      documentation.Tabs,
-    ],
+    components: [documentation.Tab, documentation.Tabs],
   },
   Text: {
     Showcase: require('./Components/SectionText').default,
-    components: [
-      documentation.Text,
-    ],
+    components: [documentation.Text],
     information: `Bitkit uses 'TT Norms' for the regular font and 'Source Code Pro'
       for the monospace font. Both of these are not websafe fonts and are not provided
       as part of the Bitkit.`,
   },
   Textarea: {
     Showcase: require('./Components/SectionTextarea').default,
-    components: [
-      documentation.Textarea,
-    ],
+    components: [documentation.Textarea],
   },
   Toggle: {
     Showcase: require('./Components/SectionToggle').default,
-    components: [
-      documentation.Toggle,
-    ],
+    components: [documentation.Toggle],
   },
   Tooltip: {
     Showcase: require('./Components/SectionTooltips').default,
-    components: [
-      documentation.Tooltip,
-    ],
+    components: [documentation.Tooltip],
   },
   Visibility: {
-    components: [
-      documentation.Visibility,
-      documentation.VisibilityContainer,
-    ],
+    components: [documentation.Visibility, documentation.VisibilityContainer],
   },
 };
 
@@ -307,84 +235,69 @@ const Documentation = (props: RouteComponentProps) => {
   }, [location]);
 
   return (
-    <BitchakraProvider>
-      <Flex direction="horizontal" gap="x12" grow>
-        <Flex>
-          <Flex margin="x6">
-            <Text margin="x2">Materials</Text>
+    <Flex direction="horizontal" gap="x12" grow>
+      <Flex>
+        <Flex margin="x6">
+          <Text margin="x2">Materials</Text>
 
-            <Route path="/documentation/materials/colors">
-              { ({ match }) => (
-                <SideMenu
-                    active={ !!match }
-                    name="Colors"
-                    to="/documentation/materials/colors" />
-            ) }
-            </Route>
+          <Route path="/documentation/materials/colors">
+            {({ match }) => <SideMenu active={!!match} name="Colors" to="/documentation/materials/colors" />}
+          </Route>
 
-            <Route path="/documentation/materials/icons">
-              { ({ match }) => (
-                <SideMenu
-                    active={ !!match }
-                    name="Icons"
-                    to="/documentation/materials/icons" />
-            ) }
-            </Route>
+          <Route path="/documentation/materials/icons">
+            {({ match }) => <SideMenu active={!!match} name="Icons" to="/documentation/materials/icons" />}
+          </Route>
 
-            <Route path="/documentation/materials/typography">
-              { ({ match }) => (
-                <SideMenu
-                    active={ !!match }
-                    name="Typography"
-                    to="/documentation/materials/typography" />
-            ) }
-            </Route>
-          </Flex>
+          <Route path="/documentation/materials/typography">
+            {({ match }) => <SideMenu active={!!match} name="Typography" to="/documentation/materials/typography" />}
+          </Route>
+        </Flex>
 
-          <Flex margin="x6">
-            <Text margin="x2">Components</Text>
+        <Flex margin="x6">
+          <Text margin="x2">Components</Text>
 
-            { Object.entries(SectionMap).map(([sectionName, { components }]) => (
-              <Route key={ sectionName } path={ `/documentation/components/${sectionName}` }>
-                { ({ match }) => (
-                  <SideMenu
-                      active={ !!match }
-                      name={ sectionName }
-                      to={ `/documentation/components/${sectionName}` }>
-                    { components.map(({ displayName }) => (
-                      <Route key={ displayName } path={ `/documentation/components/${sectionName}#${displayName}` }>
-                        { ({ match }) => (
-                          <SideMenuItem
-                              active={ !!match }
-                              to={ `/documentation/components/${sectionName}#${displayName}` }>
-                            { displayName }
+          {Object.entries(SectionMap).map(([sectionName, { components }]) => (
+            <Route key={sectionName} path={`/documentation/components/${sectionName}`}>
+              {({ match }) => (
+                <SideMenu active={!!match} name={sectionName} to={`/documentation/components/${sectionName}`}>
+                  {components.map((c) => {
+                    if (!c) {
+                      return;
+                    }
+                    const { displayName } = c;
+                    return (
+                      <Route key={displayName} path={`/documentation/components/${sectionName}#${displayName}`}>
+                        {({ match: m }) => (
+                          <SideMenuItem active={!!m} to={`/documentation/components/${sectionName}#${displayName}`}>
+                            {displayName}
                           </SideMenuItem>
-                      ) }
+                        )}
                       </Route>
-                  )) }
-                  </SideMenu>
-              ) }
-              </Route>
-          )) }
-          </Flex>
+                    );
+                  })}
+                </SideMenu>
+              )}
+            </Route>
+          ))}
         </Flex>
+      </Flex>
 
-        <Flex grow initial="none">
-          <Switch>
-            <Route path="/documentation/404" render={ () => null } />
-            <Route path="/documentation/components/:sectionName" render={ (props) => (
-              <ComponentDocumentationPage { ...props } map={ SectionMap } />
-          ) } />
+      <Flex grow initial="none">
+        <Switch>
+          <Route path="/documentation/404" render={() => null} />
+          <Route
+            path="/documentation/components/:sectionName"
+            render={(properties) => <ComponentDocumentationPage {...properties} map={SectionMap} />}
+          />
 
-            <Route component={ SectionColors } path="/documentation/materials/colors" />
-            <Route component={ SectionIcons } path="/documentation/materials/icons" />
-            <Route component={ SectionTypography } path="/documentation/materials/typography" />
+          <Route component={SectionColors} path="/documentation/materials/colors" />
+          <Route component={SectionIcons} path="/documentation/materials/icons" />
+          <Route component={SectionTypography} path="/documentation/materials/typography" />
 
-            <Redirect to="/documentation/materials/colors" />
-          </Switch>
-        </Flex>
+          <Redirect to="/documentation/materials/colors" />
+        </Switch>
       </Flex>
-    </BitchakraProvider>
+    </Flex>
   );
 };