@bitrise/bitkit 9.3.0 → 9.3.1

package/lib/esn/variables.d.ts

@@ -111,8 +111,8 @@ export declare const rgbViolet3: number[];
 export declare const rgbViolet4: number[];
 export declare const rgbViolet5: number[];
 export declare const colorMap: {
-    'white': string;
-    'black': string;
+    white: string;
+    black: string;
     'gray-1': string;
     'gray-2': string;
     'gray-3': string;
@@ -131,7 +131,7 @@ export declare const colorMap: {
     'grape-3': string;
     'grape-4': string;
     'grape-5': string;
-    'eggplant': string;
+    eggplant: string;
     'red-1': string;
     'red-2': string;
     'red-3': string;
@@ -169,8 +169,8 @@ export declare const colorMap: {
     'violet-5': string;
 };
 export declare const rgbMap: {
-    'white': number[];
-    'black': number[];
+    white: number[];
+    black: number[];
     'gray-1': number[];
     'gray-2': number[];
     'gray-3': number[];
@@ -189,7 +189,7 @@ export declare const rgbMap: {
     'grape-3': number[];
     'grape-4': number[];
     'grape-5': number[];
-    'eggplant': number[];
+    eggplant: number[];
     'red-1': number[];
     'red-2': number[];
     'red-3': number[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.3.0",
+  "version": "9.3.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "lib/cjs/index.js",
   "esnext": "lib/esn/index.js",
@@ -19,7 +19,7 @@
     "commitlint": "commitlint",
     "lint": "yarn lint:js && yarn lint:css",
     "lint:css": "stylelint src/**/*.css site/**/*.css",
-    "lint:js": "eslint src/**/*.tsx site/**/*.tsx",
+    "lint:js": "eslint src/**/*.tsx",
     "lint:fix-icons": "eslint --fix src/Icon/tsx/**",
     "semantic-release": "semantic-release",
     "serve": "superstatic ./dist --port 4001 -c superstatic.json",
@@ -33,74 +33,83 @@
     "@bitrise/bitkit": "./src"
   },
   "dependencies": {
-    "classnames": "^2.2.6",
-    "clipboard": "^2.0.4",
-    "luxon": "^1.12.1",
+    "@juggle/resize-observer": "^3.3.1",
+    "classnames": "^2.3.1",
+    "clipboard": "^2.0.10",
+    "luxon": "^1.28.0",
     "normalize.css": "^8.0.1",
-    "react": "^16.10.2",
-    "react-dom": "^16.10.2",
-    "react-popper": "^1.3.3",
-    "react-transition-group": "^2.6.1",
-    "resize-observer-polyfill": "^1.5.1"
+    "popper.js": "^1.14.4",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-popper": "^1.3.11",
+    "react-transition-group": "^2.9.0"
   },
   "peerDependencies": {
-    "react": "^16.10.2",
-    "react-dom": "^16.10.2"
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^8.1.0",
-    "@commitlint/config-conventional": "^8.1.0",
-    "@semantic-release/changelog": "^6.0.0",
-    "@semantic-release/commit-analyzer": "^9.0.1",
-    "@semantic-release/git": "^10.0.0",
+    "@bitrise/eslint-plugin": "^2.1.0",
+    "@commitlint/cli": "^8.3.6",
+    "@commitlint/config-conventional": "^8.3.6",
+    "@semantic-release/changelog": "^6.0.1",
+    "@semantic-release/commit-analyzer": "^9.0.2",
+    "@semantic-release/git": "^10.0.1",
     "@svgr/cli": "^6.2.1",
-    "@types/classnames": "^2.2.7",
+    "@types/cheerio": "^0.22.31",
     "@types/clipboard": "^2.0.1",
-    "@types/enzyme": "^3.10.3",
-    "@types/jest": "^24.0.11",
+    "@types/enzyme": "^3.10.11",
+    "@types/jest": "^27.4.1",
     "@types/lodash.sample": "^4.2.6",
     "@types/lodash.shuffle": "^4.2.6",
-    "@types/luxon": "^1.12.0",
+    "@types/luxon": "^1.27.1",
     "@types/prismjs": "^1.26.0",
-    "@types/react": "^16.9.5",
-    "@types/react-dom": "^16.9.1",
-    "@types/react-router": "^5.1.1",
-    "@types/react-router-dom": "^5.1.0",
-    "@types/react-transition-group": "^2.0.16",
-    "@typescript-eslint/eslint-plugin": "^1.4.2",
-    "@typescript-eslint/parser": "^1.4.2",
-    "autoprefixer": "^9.4.10",
+    "@types/react": "^17.0.40",
+    "@types/react-dom": "^17.0.13",
+    "@types/react-router": "^5.1.18",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/react-transition-group": "^2.9.2",
+    "@types/vfile-message": "^2.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.15.0",
+    "@typescript-eslint/parser": "^5.15.0",
+    "autoprefixer": "^9.8.8",
     "babel-eslint": "^10.0.1",
     "chokidar-cli": "^3.0.0",
-    "concurrently": "^4.1.0",
-    "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.10.0",
-    "enzyme-to-json": "^3.4.0",
-    "eslint": "^5.15.1",
-    "eslint-plugin-react": "^7.12.4",
-    "eslint-plugin-react-hooks": "^1.6.1",
-    "fscreen": "^1.0.2",
-    "husky": "^3.0.2",
+    "concurrently": "^4.1.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "enzyme-to-json": "^3.6.2",
+    "eslint": "^8.11.0",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jest": "^26.1.1",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-testing-library": "^5.1.0",
+    "fscreen": "^1.2.0",
+    "husky": "^3.1.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^24.4.0",
-    "jsdom": "^14.0.0",
+    "jest": "^27.5.1",
+    "jsdom": "^19.0.0",
     "lodash.sample": "^4.2.1",
     "lodash.shuffle": "^4.2.0",
-    "node-watch": "^0.6.2",
+    "node-watch": "^0.7.3",
     "parcel-bundler": "^1.12.0",
-    "postcss-cli": "^6.1.2",
-    "postcss-preset-env": "^6.6.0",
+    "postcss-cli": "^6.1.3",
+    "postcss-preset-env": "^6.7.1",
+    "prettier": "^2.6.0",
     "prismjs": "^1.27.0",
-    "react-docgen": "5.0.0-beta.1",
-    "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2",
-    "semantic-release": "^18.0.0",
-    "stylelint": "^9.2.1",
+    "react-docgen": "5.4.0",
+    "react-router": "^5.2.1",
+    "react-router-dom": "^5.3.0",
+    "semantic-release": "^18.0.1",
+    "stylelint": "^9.10.1",
     "stylelint-order": "^0.8.1",
     "superstatic": "^6.0.4",
-    "ts-jest": "^24.0.0",
-    "ts-node": "^8.1.0",
-    "typescript": "^3.5.3"
+    "ts-jest": "^27.1.3",
+    "ts-node": "^10.7.0",
+    "typescript": "^4.6.2"
   },
   "publishConfig": {
     "access": "public"

package/release.config.js

@@ -1,31 +1,31 @@
 module.exports = {
   branches: ['master', { name: 'alpha', prerelease: true }],
   plugins: [
-    ['@semantic-release/commit-analyzer', {
-      releaseRules: [
-        { breaking: true, release: 'major' },
-        { type: 'feat', release: 'minor' },
-        { type: 'fix', release: 'patch' },
-        { type: 'perf', release: 'patch' },
-        { type: 'style', release: 'patch' },
-        { type: 'chore', release: 'patch' },
-      ],
-    }],
+    [
+      '@semantic-release/commit-analyzer',
+      {
+        releaseRules: [
+          { breaking: true, release: 'major' },
+          { type: 'feat', release: 'minor' },
+          { type: 'fix', release: 'patch' },
+          { type: 'perf', release: 'patch' },
+          { type: 'style', release: 'patch' },
+          { type: 'chore', release: 'patch' },
+        ],
+      },
+    ],
     '@semantic-release/release-notes-generator',
     '@semantic-release/npm',
     '@semantic-release/github',
   ],
-  verifyConditions: [
-    '@semantic-release/changelog',
-    '@semantic-release/npm',
-    '@semantic-release/git',
-  ],
+  verifyConditions: ['@semantic-release/changelog', '@semantic-release/npm', '@semantic-release/git'],
   prepare: [
     '@semantic-release/changelog',
     '@semantic-release/npm',
     {
       path: '@semantic-release/git',
       assets: ['CHANGELOG.md'],
+      // eslint-disable-next-line no-template-curly-in-string
       message: 'chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}',
     },
   ],

package/scripts/build-docs.ts

@@ -18,25 +18,25 @@ const getExportedComponents = (node: ts.Node) => {
     const decl = node as ts.ExportDeclaration;
 
     if (decl.exportClause) {
-      const defaultExport = decl.exportClause.elements.find(({ propertyName }) =>
-        !!propertyName && propertyName.getText() === 'default');
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      const defaultExport = decl.exportClause.elements.find(
+        ({ propertyName }: { propertyName: any }) => !!propertyName && propertyName.getText() === 'default',
+      );
 
       if (decl.moduleSpecifier && defaultExport) {
-        exportedComponents[defaultExport.name.getText()] =
-          ((decl.moduleSpecifier as unknown) as { text: string }).text;
+        exportedComponents[defaultExport.name.getText()] = (decl.moduleSpecifier as unknown as { text: string }).text;
       }
     }
   }
 
-  ts.forEachChild(node, (node) =>
-    getExportedComponents(node));
+  ts.forEachChild(node, (n) => getExportedComponents(n));
 };
 
 const buildDocs = () => {
   getExportedComponents(indexSourceFile);
 
-  Object
-    .entries(exportedComponents)
+  Object.entries(exportedComponents)
     .filter(([exportName]) => !exclude.includes(exportName))
     .forEach(([exportName, exportPath]) => {
       try {
@@ -51,10 +51,7 @@ const buildDocs = () => {
       }
     });
 
-  fs.writeFileSync(
-    path.resolve(__dirname, '../documentation.json'),
-    JSON.stringify(documentation, null, 2),
-  );
+  fs.writeFileSync(path.resolve(__dirname, '../documentation.json'), JSON.stringify(documentation, null, 2));
 };
 
 buildDocs();

package/site/components/CodeBlock/CodeBlock.tsx

@@ -22,10 +22,10 @@ const CodeBlock: React.FunctionComponent<Props> = (props: Props) => {
   }, [children]);
 
   return (
-    <Window { ...rest } backgroundColor="grape-5" margin="x12" textColor="grape-1" title={ title }>
+    <Window {...rest} backgroundColor="grape-5" margin="x12" textColor="grape-1" title={title}>
       <Base paddingHorizontal="x4" paddingVertical="x3">
-        <pre className={ `language-${language}` }>
-          <code dangerouslySetInnerHTML={ { __html } }></code>
+        <pre className={`language-${language}`}>
+          <code dangerouslySetInnerHTML={{ __html }} />
         </pre>
       </Base>
     </Window>

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>
   );