@bitrise/bitkit 9.18.1 → 9.19.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.18.1",
+  "version": "9.19.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -12,17 +12,18 @@
     "build:lib": "rm -rf ./lib && yarn build:lib:cjs && yarn build:lib:esn",
     "build:lib:esn": "tsc -p src -m esnext -t esnext --outDir lib/esn",
     "build:lib:cjs": "tsc -p src --outDir lib/cjs",
-    "build:site": "rm -rf ./dist && rm -rf ./public && yarn build:docs && parcel build site/index.html -d dist --public-url '.'",
+    "build:prepare": "rm -rf ./dist && mkdir dist && cp site/index.html dist",
+    "build:site": "yarn build:prepare && yarn build:docs && yarn tsc:site && yarn build:site:esbuild",
+    "tsc:site": "tsc --noEmit -p site/tsconfig.json",
+    "build:site:esbuild": "esbuild --bundle site/index.tsx --outdir=dist --target=esnext --loader:.woff2=file --loader:.woff=file --minify --sourcemap",
     "commitlint": "commitlint",
     "lint": "yarn lint:js",
     "lint:js": "eslint src/**/*.tsx",
-    "lint:fix-icons": "eslint --fix src/Old/Icon/tsx/**",
     "semantic-release": "semantic-release",
     "serve": "superstatic ./dist --port 4001 -c superstatic.json",
-    "start": "rm -rf ./dist && concurrently \"yarn start:docs\" \"yarn start:site\" \"yarn start:icons\"",
+    "start": "yarn build:prepare && concurrently \"yarn start:docs\" \"yarn start:esbuild\" \"yarn serve\"",
+    "start:esbuild": "esbuild --bundle site/index.tsx --watch --outdir=dist --target=esnext --loader:.woff2=file --loader:.woff=file",
     "start:docs": "ts-node ./scripts/build-docs-watch",
-    "start:site": "parcel serve site/index.html --port 4001 -d dist --no-cache",
-    "start:icons": "chokidar src/Old/Icon/svg/** -c \"yarn svgr {path} && yarn lint:fix-icons\"",
     "test": "jest ./src",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
@@ -97,10 +98,10 @@
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.2.5",
     "babel-plugin-polyfill-corejs2": "^0.3.1",
-    "chokidar-cli": "^3.0.0",
     "concurrently": "^7.2.1",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
+    "esbuild": "^0.14.43",
     "eslint": "^8.16.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^26.4.5",
@@ -119,7 +120,6 @@
     "lodash.sample": "^4.2.1",
     "lodash.shuffle": "^4.2.0",
     "node-watch": "^0.7.3",
-    "parcel-bundler": "^1.12.0",
     "prettier": "^2.6.2",
     "prismjs": "^1.28.0",
     "react": "^17.0.2",

package/src/Components/Badge/Badge.stories.tsx

@@ -0,0 +1,13 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Badge from './Badge';
+
+export default {
+  title: 'Components/Badge',
+  component: Badge,
+} as ComponentMeta<typeof Badge>;
+
+export const WithProps: ComponentStory<typeof Badge> = (props) => <Badge {...props} />;
+WithProps.args = {
+  children: 'Coming soon',
+  ...Badge.defaultProps,
+};

package/src/Components/Badge/Badge.theme.ts

@@ -0,0 +1,15 @@
+const BadgeTheme = {
+  baseStyle: {
+    display: 'inline-block',
+    paddingX: '8',
+    paddingY: '3',
+    fontSize: '1',
+    lineHeight: '1',
+    fontWeight: 'bold',
+    textTransform: 'uppercase',
+    borderRadius: '4',
+    cursor: 'default',
+  },
+};
+
+export default BadgeTheme;

package/src/Components/Badge/Badge.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Badge as ChakraBadge, BadgeProps as ChakraBadgeProps } from '@chakra-ui/react';
+
+export type BadgeProps = ChakraBadgeProps;
+
+/**
+ * Badges are used to highlight an item's status for quick recognition.
+ */
+const Badge = (props: BadgeProps) => {
+  return <ChakraBadge {...props} />;
+};
+
+Badge.defaultProps = {
+  color: 'neutral.100',
+  backgroundColor: 'purple.40',
+} as BadgeProps;
+
+export default Badge;

package/src/Old/AddonBeam/AddonBeam.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { TypeIconName } from '../Icon/tsx';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 import Hamburger from '../Hamburger/Hamburger';
-import Badge from '../Badge/Badge';
 import Icon from '../Icon/Icon';
 import Link from '../Link/Link';
 import Image from '../Image/Image';
@@ -83,14 +82,6 @@ const AddonBeam: React.FunctionComponent<Props> = (props: Props) => {
             by Bitrise
           </Text>
         </Flex>
-
-        {isBeta && (
-          <Flex>
-            <Badge backgroundColor="yellow.80" textColor="purple.10">
-              BETA
-            </Badge>
-          </Flex>
-        )}
       </Flex>
 
       {!isInResponsiveView && appName && (

package/src/index.ts

@@ -56,3 +56,6 @@ export { default as TabPanels } from './Components/Tabs/TabPanels';
 
 export type { TabPanelProps } from './Components/Tabs/TabPanel';
 export { default as TabPanel } from './Components/Tabs/TabPanel';
+
+export type { BadgeProps } from './Components/Badge/Badge';
+export { default as Badge } from './Components/Badge/Badge';

package/src/old.ts

@@ -37,9 +37,6 @@ export { default as AppLayoutSidebar } from './Old/AppLayout/AppLayoutSidebar';
 export type { Props as AvatarProps } from './Old/Avatar/Avatar';
 export { default as Avatar } from './Old/Avatar/Avatar';
 
-export type { Props as BadgeProps } from './Old/Badge/Badge';
-export { default as Badge } from './Old/Badge/Badge';
-
 export type { Props as BaseProps } from './Old/Base/Base';
 export type { TypeBorderRadius } from './Old/Base/Base';
 export type { TypeColors } from './Old/Base/Base';

package/src/theme.ts

@@ -1,3 +1,4 @@
+import Badge from './Components/Badge/Badge.theme';
 import Button from './Components/Button/Button.theme';
 import Card from './Components/Card/Card.theme';
 import ColorButton from './Components/ColorButton/ColorButton.theme';
@@ -47,6 +48,7 @@ const theme = {
     },
   },
   components: {
+    Badge,
     Button,
     Card,
     ColorButton,