@bitrise/bitkit 9.1.4 → 9.1.6-alpha.2

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.1.4",
+  "version": "9.1.6-alpha.2",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "lib/cjs/index.js",
   "esnext": "lib/esn/index.js",
@@ -30,56 +30,64 @@
     "test": "jest ./src"
   },
   "alias": {
-    "@bitrise/bitkit": "./src"
+    "@bitrise/bitkit": "./src",
+    "framer-motion": "./node_modules/framer-motion/dist/cjs"
   },
   "dependencies": {
-    "classnames": "^2.2.6",
-    "clipboard": "^2.0.4",
-    "luxon": "^1.12.1",
+    "@chakra-ui/react": "^1.8.6",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "@popperjs/core": "^2.11.2",
+    "classnames": "^2.3.1",
+    "clipboard": "^2.0.10",
+    "framer-motion": "^6",
+    "luxon": "^2.3.1",
     "normalize.css": "^8.0.1",
-    "react": "^16.10.2",
-    "react-dom": "^16.10.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-popper": "^1.3.3",
-    "react-transition-group": "^2.6.1",
-    "resize-observer-polyfill": "^1.5.1"
+    "react-transition-group": "^4.4.2",
+    "src": "^1.1.2"
   },
   "peerDependencies": {
-    "react": "^16.10.2",
-    "react-dom": "^16.10.2"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.5",
     "@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",
+    "@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/classnames": "^2.3.0",
     "@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/prismjs": "^1.16.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",
+    "@types/luxon": "^2.0.9",
+    "@types/prismjs": "^1.26.0",
+    "@types/react": "17.0.39",
+    "@types/react-dom": "17.0.12",
+    "@types/react-router": "^5.1.18",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/react-transition-group": "^4.4.4",
+    "@types/vfile": "^4.0.0",
     "@typescript-eslint/eslint-plugin": "^1.4.2",
     "@typescript-eslint/parser": "^1.4.2",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
     "autoprefixer": "^9.4.10",
     "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",
+    "eslint-plugin-react": "^7.29.2",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "fscreen": "^1.2.0",
     "husky": "^3.0.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.4.0",
@@ -90,17 +98,17 @@
     "parcel-bundler": "^1.12.0",
     "postcss-cli": "^6.1.2",
     "postcss-preset-env": "^6.6.0",
-    "prismjs": "^1.16.0",
-    "react-docgen": "5.0.0-beta.1",
-    "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2",
+    "prismjs": "^1.27.0",
+    "react-docgen": "5.4.0",
+    "react-router": "^5.2.1",
+    "react-router-dom": "^5.2.1",
     "semantic-release": "^18.0.0",
     "stylelint": "^9.2.1",
     "stylelint-order": "^0.8.1",
     "superstatic": "^6.0.4",
     "ts-jest": "^24.0.0",
     "ts-node": "^8.1.0",
-    "typescript": "^3.5.3"
+    "typescript": "^4.6.2"
   },
   "publishConfig": {
     "access": "public"
@@ -120,5 +128,9 @@
     "transform": {
       "\\.tsx?$": "ts-jest"
     }
+  },
+  "resolutions": {
+    "@types/react": "17.0.39",
+    "@types/react-router": "5.1.18"
   }
 }

package/scripts/build-docs.ts

@@ -15,10 +15,10 @@ const exclude = ['Portal'];
 
 const getExportedComponents = (node: ts.Node) => {
   if (node.kind === ts.SyntaxKind.ExportDeclaration) {
-    const decl = node as ts.ExportDeclaration;
+    const decl = node as any;
 
     if (decl.exportClause) {
-      const defaultExport = decl.exportClause.elements.find(({ propertyName }) =>
+      const defaultExport = decl.exportClause.elements.find(({ propertyName }: { propertyName: any}) =>
         !!propertyName && propertyName.getText() === 'default');
 
       if (decl.moduleSpecifier && defaultExport) {

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

@@ -0,0 +1,163 @@
+  /* eslint-disable object-shorthand */
+import * as React from 'react';
+import {
+  Base,
+  Button,
+  Buttons,
+  Icon,
+  Tab,
+  Tabs,
+  Text,
+} from '@bitrise/bitkit';
+import CodeBlock from '../../CodeBlock/CodeBlock';
+import Section from '../../Section/Section';
+import SectionSubTitle from '../../Section/SectionSubTitle';
+import Button2 from '../../../../src/Button2/Button2';
+import BitchakraProvider from '../../../../src/chakra/provider';
+
+const SectionButtons = () => {
+  const [selectedTab, setSelectedTab] = React.useState(1);
+
+  return (
+    <BitchakraProvider>
+      <Section>
+        <Tabs gap="x6" margin="x8">
+          <Tab
+              active={ selectedTab === 1 }
+              onClick={ () => setSelectedTab(1) }>
+            Variants & Sizes
+          </Tab>
+
+          <Tab
+              active={ selectedTab === 2 }
+              onClick={ () => setSelectedTab(2) }>
+            With Left & Right Icons
+          </Tab>
+        </Tabs>
+
+        { selectedTab === 1 && (
+        <React.Fragment>
+          <Base margin="x12">
+            <SectionSubTitle>Default Variant Button</SectionSubTitle>
+            <Buttons alignChildrenVertical="end" margin="x3">
+              <Button2>Primary</Button2>
+              <Button2 disabled size="small" textAlign="right" variant="primary">Disabled</Button2>
+              <Button level="primary" size="medium">Primary</Button>
+              <Button disabled level="primary" size="medium">Disabled</Button>
+              <Button level="primary" size="large">Primary</Button>
+              <Button disabled level="primary" size="large">Disabled</Button>
+            </Buttons>
+
+            <Buttons alignChildrenVertical="end" margin="x3">
+              <Button level="secondary" size="small">Secondary</Button>
+              <Button disabled level="secondary" size="small">Disabled</Button>
+              <Button level="secondary" size="medium">Secondary</Button>
+              <Button disabled level="secondary" size="medium">Disabled</Button>
+              <Button level="secondary" size="large">Secondary</Button>
+              <Button disabled level="secondary" size="large">Disabled</Button>
+            </Buttons>
+
+            <Buttons alignChildrenVertical="end" margin="x3">
+              <Button level="tertiary" size="small">Tertiary</Button>
+              <Button disabled level="tertiary" size="small">Disabled</Button>
+              <Button level="tertiary" size="medium">Tertiary</Button>
+              <Button disabled level="tertiary" size="medium">Disabled</Button>
+              <Button level="tertiary" size="large">Tertiary</Button>
+              <Button disabled level="tertiary" size="large">Disabled</Button>
+            </Buttons>
+          </Base>
+
+          <Base margin="x12">
+            <SectionSubTitle>Danger Variant Button</SectionSubTitle>
+
+            <Buttons alignChildrenVertical="end" margin="x3">
+              <Button level="primary" size="small" variant="danger">Primary</Button>
+              <Button disabled level="primary" size="small" variant="danger">Disabled</Button>
+              <Button level="primary" size="medium" variant="danger">Primary</Button>
+              <Button disabled level="primary" size="medium" variant="danger">Disabled</Button>
+              <Button level="primary" size="large" variant="danger">Primary</Button>
+              <Button disabled level="primary" size="large" variant="danger">Disabled</Button>
+            </Buttons>
+
+            <Buttons alignChildrenVertical="end" margin="x3">
+              <Button level="secondary" size="small" variant="danger">Secondary</Button>
+              <Button disabled level="secondary" size="small" variant="danger">Disabled</Button>
+              <Button level="secondary" size="medium" variant="danger">Secondary</Button>
+              <Button disabled level="secondary" size="medium" variant="danger">Disabled</Button>
+              <Button level="secondary" size="large" variant="danger">Secondary</Button>
+              <Button disabled level="secondary" size="large" variant="danger">Disabled</Button>
+            </Buttons>
+          </Base>
+
+          <CodeBlock title="Button Usage Example">{
+`const Component = () => (
+  <Buttons>
+    <Button level="secondary">Secondary</Button>
+    <Button level="primary" variant="danger">Danger Action</Button>
+  </Buttons>
+);`
+            }</CodeBlock>
+        </React.Fragment>
+      ) }
+
+        { selectedTab === 2 && (
+        <React.Fragment>
+          <Buttons margin="x4">
+            <Button level="primary" size="large">
+              <Icon name="Group" />
+              <Text>On the left</Text>
+            </Button>
+
+            <Button level="secondary" size="large">
+              <Text>On the right</Text>
+              <Icon name="Group" />
+            </Button>
+          </Buttons>
+
+          <Buttons margin="x4">
+            <Button level="primary">
+              <Icon name="Group" />
+              <Text>On the left</Text>
+            </Button>
+
+            <Button level="secondary">
+              <Text>On the right</Text>
+              <Icon name="Group" />
+            </Button>
+          </Buttons>
+
+          <Buttons margin="x4">
+            <Button level="primary" size="small">
+              <Icon name="Group" />
+              <Text>On the left</Text>
+            </Button>
+
+            <Button level="secondary" size="small">
+              <Text>On the right</Text>
+              <Icon name="Group" />
+            </Button>
+          </Buttons>
+
+          <CodeBlock title="Button with Icon usage example">{
+`const Component = () => (
+  <Buttons>
+    <Button level="primary" size="small">
+      <Icon name="Group" />
+      <Text>On the left</Text>
+    </Button>
+
+    <Button level="secondary" size="small">
+      <Text>On the right</Text>
+      <Icon name="Group" />
+    </Button>
+  </Buttons>
+);`
+            }</CodeBlock>
+        </React.Fragment>
+      ) }
+      </Section>
+    </BitchakraProvider>
+  );
+};
+
+export default SectionButtons;

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

@@ -19,7 +19,7 @@ const SectionCards = () => {
         <Tab
             active={ selectedTab === 2 }
             onClick={ () => setSelectedTab(2) }>
-         Divided Content
+          Divided Content
         </Tab>
 
         <Tab

package/site/components/Documentation/Documentation.tsx

@@ -59,6 +59,10 @@ const SectionMap = {
       documentation.ButtonWithDropdown,
     ],
   },
+  Button2: {
+    Showcase: require('./Components/SectionButton2').default,
+    components: [],
+  },
   Card: {
     Showcase: require('./Components/SectionCards').default,
     components: [

package/site/components/Documentation/Materials/SectionIcons.tsx

@@ -39,7 +39,7 @@ const SectionIcons = () => {
       <Text>
         All of the Icons below can be achieved with the
         React <Link Component={ RouterLink } color="grape-3" to="/documentation/components/icon">Icon component</Link> and
-         outputs inline SVG for super quality and easy alignment. The SVG
+        outputs inline SVG for super quality and easy alignment. The SVG
         elements uses <code>fill: currentColor;</code> and so inherits the font
         color from it's parent.
       </Text>

package/src/Button2/Button2.tsx

@@ -0,0 +1,23 @@
+/* eslint-disable object-shorthand */
+import * as React from 'react';
+import { Button as ChakraButton, ButtonProps } from '@chakra-ui/react';
+
+interface Props extends ButtonProps {
+    /**
+     * Allows the Button to fill the container space rather than shrinking
+     * down to the content
+     */
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'dangerPrimary' | 'dangerSecondary';
+    /**
+     * Sets the size of the Button. Small allows the Button to fit
+     * into smaller spaces, while large will help the button stand
+     * out on a page with lots of space.
+     */
+    size?: 'small' | 'medium';
+}
+
+const Button2 = (props: Props) => {
+  return <ChakraButton { ...props } />;
+};
+
+export default Button2;

package/src/chakra/provider.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ChakraProvider, ChakraProviderProps } from '@chakra-ui/react';
+import theme from './theme';
+
+const BitchakraProvider = ({ children }: ChakraProviderProps) => {
+  return <ChakraProvider theme={ theme }>{ children }</ChakraProvider>;
+};
+
+export default BitchakraProvider;

package/src/chakra/theme.ts

@@ -0,0 +1,150 @@
+import { extendTheme } from '@chakra-ui/react';
+
+const theme = extendTheme({
+  config: {
+    cssVarPrefix: 'bitkit',
+  },
+  fonts: {
+    body: '"TT Norms Pro", sans-serif',
+    heading: '"TT Norms Pro", sans-serif',
+  },
+  fontSizes: {
+    1: '11px',
+    2: '14px',
+    3: '16px',
+    4: '19px',
+    5: '24px',
+    6: '30px',
+    7: '36px',
+    8: '48px',
+  },
+  lineHeights: {
+    1: '16px',
+    2: '20px',
+    3: '24px',
+    4: '28px',
+    5: '36px',
+    6: '40px',
+    7: '48px',
+    8: '60px',
+  },
+  components: {
+    Button: {
+      baseStyle: {
+        border: '1px solid',
+        borderRadius: 'base',
+        fontWeight: 'normal',
+        lineHeight: 3,
+      },
+      variants: {
+        primary: {
+          bgGradient: 'linear(to-b, #6C0EB2, #450674)',
+          borderColor: '#683D87',
+          color: '#F8F8F8',
+          fontWeight: 'bold',
+          _hover: {
+            bgGradient: 'linear(to-b, #50167B, #3D125D)',
+            _disabled: {
+              bgGradient: 'linear(to-b, #ccc, #ACACAC)',
+              borderColor: '#ACACAC',
+            },
+          },
+          _active: {
+            bgGradient: 'linear(to-b, #351D48, #351D48)',
+          },
+          _disabled: {
+            bgGradient: 'linear(to-b, #ccc, #ACACAC)',
+            borderColor: '#ACACAC',
+          },
+        },
+        secondary: {
+          bgGradient: 'linear(to-b, #f8f8f8, #fff)',
+          borderColor: '#ddd',
+          color: '#351D48',
+          _hover: {
+            bgGradient: 'linear(to-b, #ECECEC, #ECECEC)',
+          },
+          _active: {
+            bgGradient: 'linear(to-b, #351D48, #351D48)',
+            color: '#F8F8F8',
+          },
+          _disabled: {
+            color: '#ACACAC',
+          },
+        },
+        tertiary: {
+          background: 'transparent',
+          borderColor: 'transparent',
+          color: '#760FC3',
+          _hover: {
+            background: '#F8F0FF',
+          },
+          _active: {
+            background: '#351D48',
+            color: '#F8F8F8',
+          },
+          _disabled: {
+            color: '#ACACAC',
+          },
+        },
+        dangerPrimary: {
+          bgGradient: 'linear(to-b, #E41447, #FF2158)',
+          borderColor: '#D4093C',
+          color: '#fff',
+          fontWeight: 'bold',
+          _hover: {
+            bgGradient: 'linear(to-b, #C90032, #C90032)',
+            _disabled: {
+              bgGradient: 'linear(to-b, #ccc, #acacac)',
+              borderColor: '#ACACAC',
+            },
+          },
+          _active: {
+            bgGradient: 'linear(to-b, #C02048, #C02048)',
+          },
+          _disabled: {
+            bgGradient: 'linear(to-b, #ccc, #acacac)',
+            borderColor: '#ACACAC',
+          },
+        },
+        dangerSecondary: {
+          bgGradient: 'linear(to-b, #f8f8f8, #fff)',
+          borderColor: '#ddd',
+          color: '#FF2158',
+          _hover: {
+            bgGradient: 'linear(to-b, #FFE8EE, #FFE8EE)',
+            borderColor: '#FF8FAB',
+            _disabled: {
+              bgGradient: 'linear(to-b, #f8f8f8, #fff)',
+              borderColor: '#ddd',
+              color: '#ACACAC',
+            },
+          },
+          _active: {
+            bgGradient: 'linear(to-b, #C02048, #C02048)',
+            color: '#fff',
+          },
+          _disabled: {
+            color: '#ACACAC',
+          },
+        },
+      },
+      sizes: {
+        small: {
+          h: '32px',
+          fontSize: 2,
+          px: '12px',
+          py: '3px',
+        },
+        medium: {
+          h: '48px',
+          fontSize: 3,
+          px: '16px',
+          py: '11px',
+        },
+      },
+    },
+  },
+});
+
+export default theme;

package/src/hooks/useResizeObserver.ts

@@ -1,5 +1,4 @@
 import { useLayoutEffect, useState } from 'react';
-import ResizeObserver from 'resize-observer-polyfill';
 
 export interface DOMRectReadOnlyWithoutToJSON extends Omit<DOMRectReadOnly, 'toJSON'> {}
 
@@ -20,7 +19,7 @@ export default (): [
   });
 
   useLayoutEffect(() => {
-    const observer = new ResizeObserver(([entry]) => {
+    const observer: ResizeObserver = new ResizeObserver(([entry]) => {
       if (entry) {
         setSize(entry.contentRect);
       }

package/src/index.ts

@@ -22,6 +22,7 @@ export { default as Badge, Props as BadgeProps } from './Badge/Badge';
 export { default as Base, Props as BaseProps, TypeColors, TypeSizes } from './Base/Base';
 export { default as Bounds, Props as BoundsProps } from './Bounds/Bounds';
 export { default as Button, Props as ButtonProps } from './Button/Button';
+export { default as Button2 } from './Button2/Button2';
 export { default as Buttons, Props as ButtonsProps } from './Button/Buttons';
 export { default as ButtonWithDropdown, Props as ButtonWithDropdownProps } from './ButtonWithDropdown/ButtonWithDropdown';
 export { default as Card, Props as CardProps } from './Card/Card';