@bitrise/bitkit 9.3.0-alpha.4 → 9.4.0

package/site/components/Documentation/ComponentDocumentationPage.tsx

@@ -18,93 +18,130 @@ interface Props extends FlexProps {
   };
 }
 
-const filterProps = ([name, value ]: [string, PropDescriptor]) =>
-  value.description !== '@Ignore' &&
-  name !== 'className' &&
-  name !== 'ref' &&
-  name !== 'style';
+const filterProps = ([name, value]: [string, PropDescriptor]) =>
+  value.description !== '@Ignore' && name !== 'className' && name !== 'ref' && name !== 'style';
 
-const ComponentDocumentation: React.FC<Props> = (props: Props) => {
-  const { match: { params }, map } = props;
+const ComponentDocumentation = (props: Props): JSX.Element => {
+  const {
+    match: { params },
+    map,
+  } = props;
   const { sectionName } = params;
-  const key = Object.keys(map).find((key) => !!key.match(new RegExp(sectionName, 'i')));
+  const key = Object.keys(map).find((k) => !!k.match(new RegExp(sectionName, 'i')));
 
   if (!key || !map[key]) {
     return <Redirect to="/components/404" />;
   }
 
   const { Showcase, components, information } = map[key];
-  const componentsFilteredProps = components.reduce((props, component) => ({
-    ...props,
-    [component.displayName]: Object
-      .entries(component.props || {})
-      .filter(filterProps),
-  }), {});
+  const componentsFilteredProps = components.reduce((properties, component) => {
+    if (!component) {
+      return {
+        ...properties,
+      };
+    }
+    return {
+      ...properties,
+      [component.displayName]: Object.entries(component.props || {}).filter(filterProps),
+    };
+  }, {});
 
   return (
     <Flex>
-      <Text margin="x6" size="8" weight="bold">{ key }</Text>
+      <Text margin="x6" size="8" weight="bold">
+        {key}
+      </Text>
 
-      { information && (
+      {information && (
         <Notification icon="Info" type="inform">
-          { information }
+          {information}
         </Notification>
-      ) }
+      )}
 
       <Base margin="x16">
-        <Text margin="x2" size="4" weight="bold">Components summary</Text>
+        <Text margin="x2" size="4" weight="bold">
+          Components summary
+        </Text>
 
-        { components.map(({ description, displayName }) => (
-          <Base key={ displayName } margin="x4">
-            <Link Component={ RouterLink } color="grape-3" to={ `#${displayName}` }>{ displayName }</Link>
-            { description && <Text size="2">{ description }</Text> }
-            { !!componentsFilteredProps[displayName].length && (
-              <Text margin="x1" size="2">Props: { componentsFilteredProps[displayName].map(([propName], index, { length }) =>
-                <Link Component={ RouterLink } color="gray-5" key={ propName } to={ `#${displayName}-${propName}` }>
-                  { propName + (index + 1 === length ? '' : ' / ') }
-                </Link>
-              ) }
-              </Text>
-            ) }
-          </Base>
-        )) }
+        {components.map((c) => {
+          if (!c) {
+            return;
+          }
+          const { description, displayName } = c;
+          return (
+            <Base key={displayName} margin="x4">
+              <Link Component={RouterLink} color="grape-3" to={`#${displayName}`}>
+                {displayName}
+              </Link>
+              {description && <Text size="2">{description}</Text>}
+              {!!componentsFilteredProps[displayName].length && (
+                <Text margin="x1" size="2">
+                  Props:{' '}
+                  {componentsFilteredProps[displayName].map(([propName], index, { length }) => (
+                    <Link Component={RouterLink} color="gray-5" key={propName} to={`#${displayName}-${propName}`}>
+                      {propName + (index + 1 === length ? '' : ' / ')}
+                    </Link>
+                  ))}
+                </Text>
+              )}
+            </Base>
+          );
+        })}
       </Base>
 
-      { Showcase && (
+      {Showcase && (
         <Base margin="x16">
-          <Text margin="x2" size="4" weight="bold">Showcase</Text>
+          <Text margin="x2" size="4" weight="bold">
+            Showcase
+          </Text>
           <Showcase />
         </Base>
-      ) }
+      )}
 
       <Base margin="x16">
-        <Text margin="x2" size="4" weight="bold">Components API</Text>
-
-        { components.map(({ composes, description, displayName }) => (
-          <Base id={ displayName } key={ displayName } margin="x8">
-            <Flex direction="horizontal">
-              <Flex grow initial="none">
-                <Text>{ `<${displayName}>` }</Text>
-                { description && <Text size="2">{ description }</Text> }
-              </Flex>
+        <Text margin="x2" size="4" weight="bold">
+          Components API
+        </Text>
 
-              { composes && composes.length && (
-                <Flex>
-                  <Text>Extends: { composes
-                    .map((compose) => compose.replace('Props', ''))
-                    .map((compose) => <Link key={ compose } to={ `/documentation/components/${compose}` }>{ `<${compose }>` }</Link>) }</Text>
+        {components.map((c) => {
+          if (!c) {
+            return;
+          }
+          const { composes, description, displayName } = c;
+          return (
+            <Base id={displayName} key={displayName} margin="x8">
+              <Flex direction="horizontal">
+                <Flex grow initial="none">
+                  <Text>{`<${displayName}>`}</Text>
+                  {description && <Text size="2">{description}</Text>}
                 </Flex>
-              ) }
-            </Flex>
 
-            <PropsTable
-                composes={ composes }
-                displayName={ displayName }
+                {composes && composes.length && (
+                  <Flex>
+                    <Text>
+                      Extends:{' '}
+                      {composes
+                        .map((compose) => compose.replace('Props', ''))
+                        .map((compose) => (
+                          <Link key={compose} to={`/documentation/components/${compose}`}>{`<${compose}>`}</Link>
+                        ))}
+                    </Text>
+                  </Flex>
+                )}
+              </Flex>
+
+              <PropsTable
+                composes={composes}
+                displayName={displayName}
                 margin="x4"
-                props={ componentsFilteredProps[displayName]
-                  .reduce((props, [name, value]) => ({ ...props, [name]: value }), {}) } />
-          </Base>
-        )) }
+                props={componentsFilteredProps[displayName].reduce(
+                  (props, [name, value]) => ({ ...props, [name]: value }),
+                  {},
+                )}
+              />
+            </Base>
+          );
+        })}
       </Base>
     </Flex>
   );

package/site/components/Documentation/Components/SectionAddonBeam.tsx

@@ -8,19 +8,17 @@ const SectionAddonBeam = () => {
   return (
     <Section>
       <Window
-          backgroundColor="gray-1"
-          borderColor="gray-2"
-          borderWidth="x1"
-          elevation="x2"
-          textColor="grape-5"
-          title="Responsive AddonBeam">
-        <SandboxFrame
-            minHeight="200px"
-            src="/sandbox/addonbeam" />
+        backgroundColor="gray-1"
+        borderColor="gray-2"
+        borderWidth="x1"
+        elevation="x2"
+        textColor="grape-5"
+        title="Responsive AddonBeam"
+      >
+        <SandboxFrame minHeight="200px" src="/sandbox/addonbeam" />
       </Window>
 
-      <CodeBlock title="AddonBeam usage example">{
-`const Component = () => {
+      <CodeBlock title="AddonBeam usage example">{`const Component = () => {
   const match = useMediaQuery(['900px']);
   const [isHamburgerIconActive, setIsHamburgerIconActive] = useState(false);
 
@@ -41,8 +39,7 @@ const SectionAddonBeam = () => {
       </AddonBeamLink>
     </AddonBeam>
   );
-};`
-      }</CodeBlock>
+};`}</CodeBlock>
     </Section>
   );
 };

package/site/components/Documentation/Components/SectionAddonBeamSandbox.tsx

@@ -10,17 +10,18 @@ const SectionAddonBeamSandbox = () => {
 
   return (
     <AddonBeam
-        addonIcon="Deployment"
-        addonName="Ship"
-        appImage="https://bitrise-steplib-collection.s3.amazonaws.com/steps/deploy-to-bitrise-io/assets/icon.svg"
-        appLink="https://bitrise.io"
-        appName="App name this long"
-        backgroundColor="grape-4"
-        isBeta
-        isHamburgerIconActive={ isHamburgerIconActive }
-        isInResponsiveView={ !match('640px') }
-        onHamburgerIconClick={ () => setIsHamburgerIconActive(!isHamburgerIconActive) }
-        textColor="gray-1">
+      addonIcon="Deployment"
+      addonName="Ship"
+      appImage="https://bitrise-steplib-collection.s3.amazonaws.com/steps/deploy-to-bitrise-io/assets/icon.svg"
+      appLink="https://bitrise.io"
+      appName="App name this long"
+      backgroundColor="grape-4"
+      isBeta
+      isHamburgerIconActive={isHamburgerIconActive}
+      isInResponsiveView={!match('640px')}
+      onHamburgerIconClick={() => setIsHamburgerIconActive(!isHamburgerIconActive)}
+      textColor="gray-1"
+    >
       <AddonBeamLink href="" icon="Settings">
         Settings
       </AddonBeamLink>

package/site/components/Documentation/Components/SectionAddonFooter.tsx

@@ -10,11 +10,10 @@ const SectionAddonFooter = () => {
         <AddonFooter addonName="Ship" />
       </Base>
 
-      <CodeBlock title="AddonFooter Usage Example">{
-`const Component = () => (
+      <CodeBlock title="AddonFooter Usage Example">
+        {`const Component = () => (
   <AddonFooter addonName="Ship" />
-);`
-}
+);`}
       </CodeBlock>
     </Section>
   );

package/site/components/Documentation/Components/SectionAppear.tsx

@@ -7,11 +7,12 @@ import Section from '../../Section/Section';
 
 const { useState } = React;
 const AppearDocs: DocumentationObject = documentation.Appear;
-const animationElements = AppearDocs.props &&
+const animationElements =
+  AppearDocs.props &&
   AppearDocs.props &&
   AppearDocs.props.animation &&
   AppearDocs.props.animation.flowType &&
-  (AppearDocs.props.animation.flowType as FlowElementsType).elements as FlowLiteralType[];
+  ((AppearDocs.props.animation.flowType as FlowElementsType).elements as FlowLiteralType[]);
 
 const SectionAppear = () => {
   const [visible, setVisible] = useState(true);
@@ -20,46 +21,37 @@ const SectionAppear = () => {
     <Section>
       <Base margin="x6">
         <Grid alignChildren="middle" gap="x2" repeatWidthMin="12rem">
-          { animationElements && animationElements.map(({ value }, i) => (
-            <Flex
-                alignChildren="middle"
-                direction="vertical"
-                key={ value }
-                padding="x6">
-              <Appear
-                  animation={ value.slice(1, -1) as TypeAppearAnimationName }
+          {animationElements &&
+            animationElements.map(({ value }, i) => (
+              <Flex alignChildren="middle" direction="vertical" key={value} padding="x6">
+                <Appear
+                  animation={value.slice(1, -1) as TypeAppearAnimationName}
                   duration="base"
                   margin="x2"
-                  visible={ visible }>
-                <Icon
-                    name="Bitbot"
-                    size="3rem"
-                    textColor={ i % 2 ? 'grape-2' : 'grape-3' } />
-              </Appear>
+                  visible={visible}
+                >
+                  <Icon name="Bitbot" size="3rem" textColor={i % 2 ? 'grape-2' : 'grape-3'} />
+                </Appear>
 
-              <Text margin="x2">{ value }</Text>
-            </Flex>
-          )) }
+                <Text margin="x2">{value}</Text>
+              </Flex>
+            ))}
         </Grid>
       </Base>
 
       <Flex alignChildren="middle" direction="vertical">
         <Flex>
-          <Toggle
-              checked={ visible }
-              onChange={ () => setVisible(!visible) }>
+          <Toggle checked={visible} onChange={() => setVisible(!visible)}>
             Visible
           </Toggle>
         </Flex>
       </Flex>
 
-      <CodeBlock title="Appear Usage Example">{
-`const Component = () => (
+      <CodeBlock title="Appear Usage Example">{`const Component = () => (
   <Appear animation="FadeSlideUp" duration="slow">
     <Icon name="Bitbot" size="3rem" textColor="grape-3"></Icon>
   </Appear>
-);`
-      }</CodeBlock>
+);`}</CodeBlock>
     </Section>
   );
 };

package/site/components/Documentation/Components/SectionAvatar.tsx

@@ -11,9 +11,9 @@ const SectionBadge = () => {
       <Base margin="x6">
         <SectionSubTitle>Avatar with URL</SectionSubTitle>
         <Flex alignChildrenVertical="middle" direction="horizontal" gap="x2">
-          <Avatar name="Test User" size="4rem" url={ url } />
-          <Avatar name="Test User" size="3rem" url={ url } />
-          <Avatar name="Test User" size="2rem" url={ url } />
+          <Avatar name="Test User" size="4rem" url={url} />
+          <Avatar name="Test User" size="3rem" url={url} />
+          <Avatar name="Test User" size="2rem" url={url} />
         </Flex>
       </Base>
 
@@ -30,20 +30,18 @@ const SectionBadge = () => {
         <SectionSubTitle>Border radius variations</SectionSubTitle>
         <Flex direction="horizontal" gap="x2">
           <Avatar borderRadius="x1" name="placeholder" size="40px" />
-          <Avatar borderRadius="x1" name="placeholder" size="40px" url={ url }/>
+          <Avatar borderRadius="x1" name="placeholder" size="40px" url={url} />
           <Avatar borderRadius="x2" name="placeholder" size="40px" />
-          <Avatar borderRadius="x2" name="placeholder" size="40px" url={ url }/>
+          <Avatar borderRadius="x2" name="placeholder" size="40px" url={url} />
           <Avatar borderRadius="rounded" name="placeholder" size="40px" />
-          <Avatar borderRadius="rounded" name="placeholder" size="40px" url={ url } />
+          <Avatar borderRadius="rounded" name="placeholder" size="40px" url={url} />
         </Flex>
       </Base>
 
       <CodeBlock title="Badge Usage Example">
-        {
-`const Component = () => (
+        {`const Component = () => (
   <Avatar name="Bitrise" url="https://app.bitrise.io/assets/images/hero/cat-illustration.png" size="3rem" />
-);`
-        }
+);`}
       </CodeBlock>
     </Section>
   );

package/site/components/Documentation/Components/SectionBadge.tsx

@@ -6,40 +6,31 @@ import Section from '../../Section/Section';
 const SectionBadge = () => {
   return (
     <Section>
-
       <Base margin="x1">
-        <Badge
-            backgroundColor="eggplant"
-            textColor="gray-1">
+        <Badge backgroundColor="eggplant" textColor="gray-1">
           Coming soon
         </Badge>
       </Base>
 
       <Base margin="x1">
-        <Badge
-            backgroundColor="blue-3"
-            textColor="gray-1">
+        <Badge backgroundColor="blue-3" textColor="gray-1">
           Beta
         </Badge>
       </Base>
 
       <Base margin="x1">
-        <Badge
-            backgroundColor="green-3"
-            textColor="gray-1">
+        <Badge backgroundColor="green-3" textColor="gray-1">
           New feature
         </Badge>
       </Base>
 
-      <CodeBlock title="Badge Usage Example">{
-`const Component = () => (
+      <CodeBlock title="Badge Usage Example">{`const Component = () => (
   <Badge
       backgroundColor="eggplant"
       textColor="gray-1">
     Coming soon
   </Badge>
-);`
-      }</CodeBlock>
+);`}</CodeBlock>
     </Section>
   );
 };

package/site/components/Documentation/Components/SectionBase.tsx

@@ -5,13 +5,11 @@ import Section from '../../Section/Section';
 const SectionBase = () => {
   return (
     <Section>
-      <CodeBlock title="Base Usage Example">{
-`const Component = () => (
+      <CodeBlock title="Base Usage Example">{`const Component = () => (
   <Base backgroundColor="grape-5" borderRadius="x2" padding="x6" textColor="gray-1">
     Some content
   </Base>
-);`
-      }</CodeBlock>
+);`}</CodeBlock>
     </Section>
   );
 };