@bitrise/bitkit 9.1.3 → 9.1.6-alpha.1

package/src/Icon/tsx/{index.tsx → index.ts}

@@ -50,7 +50,7 @@ import Coffee from './IconsCoffee';
 import Console from './IconsConsole';
 import Credit from './IconsCredit';
 import Creditcard from './IconsCreditcard';
-import Crown from "./IconsCrown";
+import Crown from './IconsCrown';
 import DeleteNope from './IconsDeleteNope';
 import Deployment from './IconsDeployment';
 import Doc from './IconsDoc';
@@ -170,176 +170,176 @@ import Workflow from './IconsWorkflow';
 import Wow from './IconsWow';
 
 export type TypeIconName =
-  'AddOnsColorTuorqouise' |
-  'AddOnsColorViolet' |
-  'AddOnsWhite' |
-  'AddOns' |
-  'App' |
-  'ArrowBack' |
-  'ArrowDown' |
-  'ArrowForward' |
-  'ArrowQuit' |
-  'ArrowUp' |
-  'BackArrow' |
-  'Bell' |
-  'BitbotFailed' |
-  'Bitbot' |
-  'BitbucketFill' |
-  'Bitbucket' |
-  'BitriseCertified' |
-  'Book' |
-  'BranchBranch' |
-  'BranchCommit' |
-  'BranchPull' |
-  'BranchPush' |
-  'BranchTag' |
-  'Bug' |
-  'Build' |
-  'BuildstatusAbortedSolid' |
-  'BuildstatusAborted' |
-  'BuildstatusFailedSolid' |
-  'BuildstatusFailed' |
-  'BuildstatusLoadingAnimated' |
-  'BuildstatusLoading' |
-  'BuildstatusLoadingeeehhWhite' |
-  'BuildstatusLoadingeeehh' |
-  'BuildstatusNeverbuilt' |
-  'BuildstatusSuccessfulSolid' |
-  'BuildstatusSuccessful' |
-  'Calendar' |
-  'Chain' |
-  'ChangePlan' |
-  'ChatMessage' |
-  'Chat' |
-  'ChevronDown' |
-  'ChevronLeft' |
-  'ChevronRight' |
-  'ChevronUp' |
-  'Clock' |
-  'CloseSmall' |
-  'Code' |
-  'Coffee' |
-  'Console' |
-  'Credit' |
-  'Creditcard' |
-  'Crown' |
-  'DeleteNope' |
-  'Deployment' |
-  'Doc' |
-  'Dollars' |
-  'Download' |
-  'DropdownArrows' |
-  'Dudes' |
-  'Duplicate' |
-  'Enterprise' |
-  'ErrorGeneral' |
-  'Eye' |
-  'FileDoc' |
-  'FilePdf' |
-  'FilePlist' |
-  'FileZip' |
-  'Filter' |
-  'Flag' |
-  'Folder' |
-  'FullscreenExit' |
-  'Fullscreen' |
-  'Gauge' |
-  'Github' |
-  'GitlabFill' |
-  'Gitlab' |
-  'Globe' |
-  'Group' |
-  'Heart' |
-  'History' |
-  'Image' |
-  'Info' |
-  'Integrations' |
-  'Interaction' |
-  'Invoice' |
-  'Japanese' |
-  'Key' |
-  'Laptop' |
-  'Laptops' |
-  'Lightbulb' |
-  'Lock' |
-  'Login' |
-  'Logout' |
-  'Magnifier' |
-  'Mail' |
-  'MenuGrid' |
-  'MenuHamburger' |
-  'Message' |
-  'MinusClose' |
-  'MinusRemove' |
-  'Mobile' |
-  'Monitoring' |
-  'More' |
-  'NoTie' |
-  'Numero' |
-  'OpenInBrowser' |
-  'Overview' |
-  'Owner' |
-  'Pause' |
-  'Pencil' |
-  'Percent' |
-  'Person' |
-  'PlatformsAndroid' |
-  'PlatformsApple' |
-  'PlatformsCordova' |
-  'PlatformsFastlane' |
-  'PlatformsFlutter' |
-  'PlatformsGo' |
-  'PlatformsIonic' |
-  'PlatformsMacos' |
-  'PlatformsNodejs' |
-  'PlatformsOther' |
-  'PlatformsReact' |
-  'PlatformsXamarin' |
-  'Play' |
-  'PlusAdd' |
-  'PlusOpen' |
-  'Power' |
-  'Refresh' |
-  'Request' |
-  'Responsiveness' |
-  'Save' |
-  'SecurityShield' |
-  'Settings' |
-  'Ship' |
-  'Shuffle' |
-  'Stability' |
-  'Stack' |
-  'Status' |
-  'StepThirdParty' |
-  'StepUpgradeCircle' |
-  'StepUpgrade' |
-  'StepVersionOk' |
-  'StepsColorTuorqouise' |
-  'StepsColorViolet' |
-  'StepsWhite' |
-  'Steps' |
-  'Stopwatch' |
-  'Support' |
-  'Switch' |
-  'TestFailed' |
-  'TestInconclusive' |
-  'TestInfo' |
-  'TestSkipped' |
-  'TestSuccess' |
-  'TestWarning' |
-  'Tick' |
-  'Time' |
-  'Trace' |
-  'Trash' |
-  'Trigger' |
-  'Twitter' |
-  'ValidateShield' |
-  'Warning' |
-  'WebUi' |
-  'Window' |
-  'WorkflowFlow' |
-  'Workflow' |
-  'Wow';
+  | 'AddOnsColorTuorqouise'
+  | 'AddOnsColorViolet'
+  | 'AddOnsWhite'
+  | 'AddOns'
+  | 'App'
+  | 'ArrowBack'
+  | 'ArrowDown'
+  | 'ArrowForward'
+  | 'ArrowQuit'
+  | 'ArrowUp'
+  | 'BackArrow'
+  | 'Bell'
+  | 'BitbotFailed'
+  | 'Bitbot'
+  | 'BitbucketFill'
+  | 'Bitbucket'
+  | 'BitriseCertified'
+  | 'Book'
+  | 'BranchBranch'
+  | 'BranchCommit'
+  | 'BranchPull'
+  | 'BranchPush'
+  | 'BranchTag'
+  | 'Bug'
+  | 'Build'
+  | 'BuildstatusAbortedSolid'
+  | 'BuildstatusAborted'
+  | 'BuildstatusFailedSolid'
+  | 'BuildstatusFailed'
+  | 'BuildstatusLoadingAnimated'
+  | 'BuildstatusLoading'
+  | 'BuildstatusLoadingeeehhWhite'
+  | 'BuildstatusLoadingeeehh'
+  | 'BuildstatusNeverbuilt'
+  | 'BuildstatusSuccessfulSolid'
+  | 'BuildstatusSuccessful'
+  | 'Calendar'
+  | 'Chain'
+  | 'ChangePlan'
+  | 'ChatMessage'
+  | 'Chat'
+  | 'ChevronDown'
+  | 'ChevronLeft'
+  | 'ChevronRight'
+  | 'ChevronUp'
+  | 'Clock'
+  | 'CloseSmall'
+  | 'Code'
+  | 'Coffee'
+  | 'Console'
+  | 'Credit'
+  | 'Creditcard'
+  | 'Crown'
+  | 'DeleteNope'
+  | 'Deployment'
+  | 'Doc'
+  | 'Dollars'
+  | 'Download'
+  | 'DropdownArrows'
+  | 'Dudes'
+  | 'Duplicate'
+  | 'Enterprise'
+  | 'ErrorGeneral'
+  | 'Eye'
+  | 'FileDoc'
+  | 'FilePdf'
+  | 'FilePlist'
+  | 'FileZip'
+  | 'Filter'
+  | 'Flag'
+  | 'Folder'
+  | 'FullscreenExit'
+  | 'Fullscreen'
+  | 'Gauge'
+  | 'Github'
+  | 'GitlabFill'
+  | 'Gitlab'
+  | 'Globe'
+  | 'Group'
+  | 'Heart'
+  | 'History'
+  | 'Image'
+  | 'Info'
+  | 'Integrations'
+  | 'Interaction'
+  | 'Invoice'
+  | 'Japanese'
+  | 'Key'
+  | 'Laptop'
+  | 'Laptops'
+  | 'Lightbulb'
+  | 'Lock'
+  | 'Login'
+  | 'Logout'
+  | 'Magnifier'
+  | 'Mail'
+  | 'MenuGrid'
+  | 'MenuHamburger'
+  | 'Message'
+  | 'MinusClose'
+  | 'MinusRemove'
+  | 'Mobile'
+  | 'Monitoring'
+  | 'More'
+  | 'NoTie'
+  | 'Numero'
+  | 'OpenInBrowser'
+  | 'Overview'
+  | 'Owner'
+  | 'Pause'
+  | 'Pencil'
+  | 'Percent'
+  | 'Person'
+  | 'PlatformsAndroid'
+  | 'PlatformsApple'
+  | 'PlatformsCordova'
+  | 'PlatformsFastlane'
+  | 'PlatformsFlutter'
+  | 'PlatformsGo'
+  | 'PlatformsIonic'
+  | 'PlatformsMacos'
+  | 'PlatformsNodejs'
+  | 'PlatformsOther'
+  | 'PlatformsReact'
+  | 'PlatformsXamarin'
+  | 'Play'
+  | 'PlusAdd'
+  | 'PlusOpen'
+  | 'Power'
+  | 'Refresh'
+  | 'Request'
+  | 'Responsiveness'
+  | 'Save'
+  | 'SecurityShield'
+  | 'Settings'
+  | 'Ship'
+  | 'Shuffle'
+  | 'Stability'
+  | 'Stack'
+  | 'Status'
+  | 'StepThirdParty'
+  | 'StepUpgradeCircle'
+  | 'StepUpgrade'
+  | 'StepVersionOk'
+  | 'StepsColorTuorqouise'
+  | 'StepsColorViolet'
+  | 'StepsWhite'
+  | 'Steps'
+  | 'Stopwatch'
+  | 'Support'
+  | 'Switch'
+  | 'TestFailed'
+  | 'TestInconclusive'
+  | 'TestInfo'
+  | 'TestSkipped'
+  | 'TestSuccess'
+  | 'TestWarning'
+  | 'Tick'
+  | 'Time'
+  | 'Trace'
+  | 'Trash'
+  | 'Trigger'
+  | 'Twitter'
+  | 'ValidateShield'
+  | 'Warning'
+  | 'WebUi'
+  | 'Window'
+  | 'WorkflowFlow'
+  | 'Workflow'
+  | 'Wow';
 
 export const IconList: TypeIconName[] = [
   'AddOnsColorTuorqouise',
@@ -514,7 +514,9 @@ export const IconList: TypeIconName[] = [
   'Wow',
 ];
 
-export const IconMap: { [key in TypeIconName]: React.FC<React.SVGProps<SVGSVGElement>> } = {
+export const IconMap: {
+  [key in TypeIconName]: React.FC<React.SVGProps<SVGSVGElement>>;
+} = {
   AddOnsColorTuorqouise,
   AddOnsColorViolet,
   AddOnsWhite,

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