@bitrise/bitkit 9.4.1 → 9.4.3-alpha-chakra.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.4.1",
+  "version": "9.4.3-alpha-chakra.2",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "lib/cjs/index.js",
   "esnext": "lib/esn/index.js",
@@ -27,34 +27,53 @@
     "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/Icon/svg/** -c \"yarn svgr {path} && yarn lint:fix-icons\"",
-    "test": "jest ./src"
+    "test": "jest ./src",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "alias": {
-    "@bitrise/bitkit": "./src"
+    "@bitrise/bitkit": "./src",
+    "framer-motion": "./node_modules/framer-motion/dist/cjs"
   },
   "dependencies": {
+    "@chakra-ui/react": "^1.8.7",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
     "@juggle/resize-observer": "^3.3.1",
+    "@popperjs/core": "^2.11.5",
     "classnames": "^2.3.1",
     "clipboard": "^2.0.10",
-    "luxon": "^1.28.0",
+    "framer-motion": "^6.2.9",
+    "luxon": "^2.3.1",
     "normalize.css": "^8.0.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"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-popper": "^2.2.5",
+    "react-transition-group": "^4.4.2"
   },
   "peerDependencies": {
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.8",
     "@bitrise/eslint-plugin": "^2.1.0",
-    "@commitlint/cli": "^8.3.6",
-    "@commitlint/config-conventional": "^8.3.6",
+    "@commitlint/cli": "^16.2.3",
+    "@commitlint/config-conventional": "^16.2.1",
+    "@gkz/ast-types": "^0.14.4",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/git": "^10.0.1",
+    "@storybook/addon-actions": "^6.4.20",
+    "@storybook/addon-essentials": "^6.4.20",
+    "@storybook/addon-interactions": "^6.4.20",
+    "@storybook/addon-links": "^6.4.20",
+    "@storybook/addons": "^6.4.20",
+    "@storybook/builder-webpack5": "^6.4.20",
+    "@storybook/manager-webpack5": "^6.4.20",
+    "@storybook/react": "^6.4.20",
+    "@storybook/testing-library": "^0.0.9",
+    "@storybook/theming": "^6.4.20",
     "@svgr/cli": "^6.2.1",
     "@types/cheerio": "^0.22.31",
     "@types/clipboard": "^2.0.1",
@@ -62,33 +81,37 @@
     "@types/jest": "^27.4.1",
     "@types/lodash.sample": "^4.2.6",
     "@types/lodash.shuffle": "^4.2.6",
-    "@types/luxon": "^1.27.1",
+    "@types/luxon": "^2.3.1",
     "@types/prismjs": "^1.26.0",
-    "@types/react": "^17.0.40",
-    "@types/react-dom": "^17.0.13",
+    "@types/react": "17.0.40",
+    "@types/react-dom": "^17.0.14",
     "@types/react-router": "^5.1.18",
     "@types/react-router-dom": "^5.3.3",
-    "@types/react-transition-group": "^2.9.2",
+    "@types/react-transition-group": "^4.4.4",
     "@types/vfile-message": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.15.0",
-    "@typescript-eslint/parser": "^5.15.0",
+    "@typescript-eslint/eslint-plugin": "^5.18.0",
+    "@typescript-eslint/parser": "^5.18.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "autoprefixer": "^9.8.8",
     "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.2.4",
+    "babel-plugin-polyfill-corejs2": "^0.3.1",
     "chokidar-cli": "^3.0.0",
-    "concurrently": "^4.1.2",
+    "concurrently": "^7.1.0",
+    "csstype": "3.0.10",
     "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": "^8.12.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^26.1.3",
     "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",
+    "eslint-plugin-react-hooks": "^4.4.0",
+    "eslint-plugin-storybook": "^0.5.7",
+    "eslint-plugin-testing-library": "^5.2.1",
     "fscreen": "^1.2.0",
-    "husky": "^3.1.0",
+    "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
     "jsdom": "^19.0.0",
@@ -98,27 +121,24 @@
     "parcel-bundler": "^1.12.0",
     "postcss-cli": "^6.1.3",
     "postcss-preset-env": "^6.7.1",
-    "prettier": "^2.6.0",
+    "prettier": "^2.6.2",
     "prismjs": "^1.27.0",
     "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": "^27.1.3",
+    "semantic-release": "^19.0.2",
+    "stylelint": "^14.6.1",
+    "stylelint-order": "^5.0.0",
+    "superstatic": "^7.1.0",
+    "ts-jest": "^27.1.4",
     "ts-node": "^10.7.0",
-    "typescript": "^4.6.2"
+    "tsconfig-paths-webpack-plugin": "^3.5.2",
+    "typescript": "^4.6.3",
+    "webpack": "^5.71.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "husky": {
-    "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-    }
-  },
   "jest": {
     "moduleNameMapper": {
       "^.+\\.css$": "identity-obj-proxy"
@@ -129,5 +149,10 @@
     "transform": {
       "\\.tsx?$": "ts-jest"
     }
+  },
+  "resolutions": {
+    "**/ast-types": "npm:@gkz/ast-types",
+    "@types/react": "17.0.40",
+    "csstype": "3.0.10"
   }
 }

package/postcss.config.js

@@ -1,9 +1,13 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const autoprefixer = require('autoprefixer');
+const postcssPresetEnv = require('postcss-preset-env');
+
 module.exports = {
-  'plugins': [
-    require('autoprefixer'),
-    require('postcss-preset-env')({
-      'stage': 3,
-      'features': {
+  plugins: [
+    autoprefixer(),
+    postcssPresetEnv({
+      stage: 3,
+      features: {
         'custom-properties': false,
         'nesting-rules': true,
       },

package/release.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  branches: ['master', { name: 'alpha', prerelease: true }],
+  branches: ['master', { name: 'alpha', prerelease: true }, { name: 'alpha-*', prerelease: true }],
   plugins: [
     [
       '@semantic-release/commit-analyzer',

package/site/components/CodeBlock/CodeBlock.css

@@ -7,9 +7,9 @@ pre[class*='language-'] {
 pre[class*='language-'],
 code[class*='language-'] {
   font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  font-size: var(--font-size--2);
+  font-size: var(--fontSizes-2);
   text-align: left;
-  line-height: var(--line-height--2);
+  line-height: var(--lineHeights-2);
   white-space: pre;
   word-spacing: normal;
   hyphens: none;

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

@@ -1,18 +1,5 @@
-/* eslint-disable object-shorthand */
 import * as React from 'react';
-import {
-  Base,
-  Button,
-  Buttons,
-  ColorButton,
-  Icon,
-  Tab,
-  Tabs,
-  Text,
-  Ribbon,
-  ButtonWithDropdown,
-  Flex,
-} from '@bitrise/bitkit';
+import { Base, Button, Buttons, ColorButton, Icon, Tab, Tabs, Text, Ribbon } from '@bitrise/bitkit';
 import CodeBlock from '../../CodeBlock/CodeBlock';
 import Section from '../../Section/Section';
 import SectionSubTitle from '../../Section/SectionSubTitle';
@@ -34,10 +21,6 @@ const SectionButtons = () => {
         <Tab active={selectedTab === 3} onClick={() => setSelectedTab(3)}>
           Color Button
         </Tab>
-
-        <Tab active={selectedTab === 4} onClick={() => setSelectedTab(4)}>
-          with dropdown
-        </Tab>
       </Tabs>
 
       {selectedTab === 1 && (
@@ -371,35 +354,6 @@ const SectionButtons = () => {
 );`}</CodeBlock>
         </>
       )}
-      {selectedTab === 4 && (
-        <Flex alignChildren="end" direction="horizontal">
-          <ButtonWithDropdown
-            items={[
-              {
-                component: 'button',
-                icon: 'Percent',
-                text: 'Refer your friends',
-              },
-              {
-                component: 'a',
-                icon: 'Settings',
-                text: 'Account setings',
-              },
-              {
-                icon: 'ChangePlan',
-                text: 'Change plan',
-              },
-              {
-                icon: 'Logout',
-                text: 'Log out',
-              },
-            ]}
-          >
-            <Icon name="Bitbot" />
-            <Text>Account</Text>
-          </ButtonWithDropdown>
-        </Flex>
-      )}
     </Section>
   );
 };

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

@@ -4,7 +4,6 @@ import {
   DropdownMenu,
   DropdownMenus,
   DropdownMenuItem,
-  DropdownMenuItemGroup,
   Flex,
   Icon,
   Placement,
@@ -245,6 +244,7 @@ const SectionDropdown = () => {
                 setSelectedItem(undefined);
                 handleToggle3();
               }}
+              sameWidth
               visible={visible3}
             >
               {() => (

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

@@ -21,7 +21,9 @@ const SectionPlacement = () => {
   const [selectedTab, setSelectedTab] = useState(1);
   const [ref, setRef] = useState<SVGSVGElement>();
 
-  const handleToggle = () => setVisible(!visible);
+  const handleToggle = () => {
+    setVisible(!visible);
+  };
 
   return (
     <Section>
@@ -39,6 +41,7 @@ const SectionPlacement = () => {
         <>
           <PlacementManager>
             <PlacementReference>
+              {/* eslint-disable-next-line @typescript-eslint/no-shadow */}
               {({ ref }) => (
                 <Button innerRef={ref} level="primary" onClick={handleToggle}>
                   <Icon name="More" />

package/site/components/Documentation/Documentation.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { RouteComponentProps } from 'react-router';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { Flex, Text } from '@bitrise/bitkit';
+import Provider from '../../../src/Components/Provider/Provider';
 import documentation from '../../../documentation.json';
 import SideMenu from '../SideMenu/SideMenu';
 import SideMenuItem from '../SideMenu/SideMenuItem';
@@ -41,12 +42,7 @@ const SectionMap = {
   },
   Button: {
     Showcase: require('./Components/SectionButtons').default,
-    components: [
-      documentation.Button,
-      documentation.Buttons,
-      documentation.ColorButton,
-      documentation.ButtonWithDropdown,
-    ],
+    components: [documentation.Button, documentation.Buttons, documentation.ColorButton],
   },
   Card: {
     Showcase: require('./Components/SectionCards').default,
@@ -235,69 +231,71 @@ const Documentation = (props: RouteComponentProps) => {
   }, [location]);
 
   return (
-    <Flex direction="horizontal" gap="x12" grow>
-      <Flex>
-        <Flex margin="x6">
-          <Text margin="x2">Materials</Text>
+    <Provider>
+      <Flex direction="horizontal" gap="x12" grow>
+        <Flex>
+          <Flex margin="x6">
+            <Text margin="x2">Materials</Text>
 
-          <Route path="/documentation/materials/colors">
-            {({ match }) => <SideMenu active={!!match} name="Colors" to="/documentation/materials/colors" />}
-          </Route>
+            <Route path="/documentation/materials/colors">
+              {({ match }) => <SideMenu active={!!match} name="Colors" to="/documentation/materials/colors" />}
+            </Route>
 
-          <Route path="/documentation/materials/icons">
-            {({ match }) => <SideMenu active={!!match} name="Icons" to="/documentation/materials/icons" />}
-          </Route>
+            <Route path="/documentation/materials/icons">
+              {({ match }) => <SideMenu active={!!match} name="Icons" to="/documentation/materials/icons" />}
+            </Route>
 
-          <Route path="/documentation/materials/typography">
-            {({ match }) => <SideMenu active={!!match} name="Typography" to="/documentation/materials/typography" />}
-          </Route>
-        </Flex>
+            <Route path="/documentation/materials/typography">
+              {({ match }) => <SideMenu active={!!match} name="Typography" to="/documentation/materials/typography" />}
+            </Route>
+          </Flex>
 
-        <Flex margin="x6">
-          <Text margin="x2">Components</Text>
+          <Flex margin="x6">
+            <Text margin="x2">Components</Text>
 
-          {Object.entries(SectionMap).map(([sectionName, { components }]) => (
-            <Route key={sectionName} path={`/documentation/components/${sectionName}`}>
-              {({ match }) => (
-                <SideMenu active={!!match} name={sectionName} to={`/documentation/components/${sectionName}`}>
-                  {components.map((c) => {
-                    if (!c) {
-                      return;
-                    }
-                    const { displayName } = c;
-                    return (
-                      <Route key={displayName} path={`/documentation/components/${sectionName}#${displayName}`}>
-                        {({ match: m }) => (
-                          <SideMenuItem active={!!m} to={`/documentation/components/${sectionName}#${displayName}`}>
-                            {displayName}
-                          </SideMenuItem>
-                        )}
-                      </Route>
-                    );
-                  })}
-                </SideMenu>
-              )}
-            </Route>
-          ))}
+            {Object.entries(SectionMap).map(([sectionName, { components }]) => (
+              <Route key={sectionName} path={`/documentation/components/${sectionName}`}>
+                {({ match }) => (
+                  <SideMenu active={!!match} name={sectionName} to={`/documentation/components/${sectionName}`}>
+                    {components.map((c) => {
+                      if (!c) {
+                        return;
+                      }
+                      const { displayName } = c;
+                      return (
+                        <Route key={displayName} path={`/documentation/components/${sectionName}#${displayName}`}>
+                          {({ match: m }) => (
+                            <SideMenuItem active={!!m} to={`/documentation/components/${sectionName}#${displayName}`}>
+                              {displayName}
+                            </SideMenuItem>
+                          )}
+                        </Route>
+                      );
+                    })}
+                  </SideMenu>
+                )}
+              </Route>
+            ))}
+          </Flex>
         </Flex>
-      </Flex>
 
-      <Flex grow initial="none">
-        <Switch>
-          <Route path="/documentation/404" render={() => null} />
-          <Route
-            path="/documentation/components/:sectionName"
-            render={(properties) => <ComponentDocumentationPage {...properties} map={SectionMap} />}
-          />
+        <Flex grow initial="none">
+          <Switch>
+            <Route path="/documentation/404" render={() => null} />
+            <Route
+              path="/documentation/components/:sectionName"
+              render={(properties) => <ComponentDocumentationPage {...properties} map={SectionMap} />}
+            />
 
-          <Route component={SectionColors} path="/documentation/materials/colors" />
-          <Route component={SectionIcons} path="/documentation/materials/icons" />
-          <Route component={SectionTypography} path="/documentation/materials/typography" />
+            <Route component={SectionColors} path="/documentation/materials/colors" />
+            <Route component={SectionIcons} path="/documentation/materials/icons" />
+            <Route component={SectionTypography} path="/documentation/materials/typography" />
 
-          <Redirect to="/documentation/materials/colors" />
-        </Switch>
+            <Redirect to="/documentation/materials/colors" />
+          </Switch>
+        </Flex>
       </Flex>
-    </Flex>
+    </Provider>
   );
 };
 

package/site/components/Root/Root.tsx

@@ -62,7 +62,7 @@ const Root = () => {
 
             <Flex>
               <Text letterSpacing="x5" size="1" uppercase>
-                in London & Budapest
+                in Budapest
               </Text>
             </Flex>
           </Flex>

package/src/Components/Provider/Provider.tsx

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

package/src/Components/Text/Text.stories.tsx

@@ -0,0 +1,20 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Text from './Text';
+
+export default {
+  title: 'Components/Text',
+  component: Text,
+} as ComponentMeta<typeof Text>;
+
+const Template: ComponentStory<typeof Text> = ({ ...props }) => <Text {...props} />;
+
+export const WithProps = Template.bind({});
+WithProps.args = {
+  align: 'left',
+  className: '',
+  children: 'The quick brown fox jumps over the lazy dog.',
+  fontWeight: 'normal',
+  letterSpacing: 'normal',
+  textTransform: 'none',
+  ...Text.defaultProps,
+};

package/src/Components/Text/Text.theme.ts

@@ -0,0 +1,38 @@
+const TextTheme = {
+  sizes: {
+    1: {
+      fontSize: '1',
+      lineHeight: '1',
+    },
+    2: {
+      fontSize: '2',
+      lineHeight: '2',
+    },
+    3: {
+      fontSize: '3',
+      lineHeight: '3',
+    },
+    4: {
+      fontSize: '4',
+      lineHeight: '4',
+    },
+    5: {
+      fontSize: '5',
+      lineHeight: '5',
+    },
+    6: {
+      fontSize: '6',
+      lineHeight: '6',
+    },
+    7: {
+      fontSize: '7',
+      lineHeight: '7',
+    },
+    8: {
+      fontSize: '8',
+      lineHeight: '8',
+    },
+  },
+};
+
+export default TextTheme;

package/src/Components/Text/Text.tsx

@@ -0,0 +1,72 @@
+import { Text as ChakraText, TextProps } from '@chakra-ui/react';
+
+type TextTags =
+  | 'a'
+  | 'abbr'
+  | 'bdi'
+  | 'bdo'
+  | 'blockquote'
+  | 'cite'
+  | 'data'
+  | 'dd'
+  | 'dfn'
+  | 'dt'
+  | 'em'
+  | 'figcaption'
+  | 'kbd'
+  | 'li'
+  | 'mark'
+  | 'p'
+  | 'pre'
+  | 'q'
+  | 'samp'
+  | 'small'
+  | 'span'
+  | 'strong'
+  | 'sub'
+  | 'sup'
+  | 'time'
+  | 'var';
+
+export interface Props {
+  align?: 'center' | 'justify' | 'left' | 'right';
+  /**
+   * Any valid HTML text tag
+   */
+  as?: TextTags;
+  children?: TextProps['children'];
+  className?: string;
+  /**
+   * Font weight
+   */
+  fontWeight?: 'bold' | 'normal';
+  letterSpacing?: string;
+  /**
+   * Size config (https://www.figma.com/file/grik9mTaJ5DfhydhWhXdP5/Bitkit-Foundations?node-id=211%3A12)
+   */
+  size?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';
+  sx?: TextProps['sx'];
+  textTransform?: 'capitalize' | 'lowercase' | 'none' | 'uppercase';
+}
+
+/**
+ * Basic `Text` component
+ */
+const Text = (props: Props) => {
+  const { size, textTransform } = props;
+  const properties: TextProps = { ...props };
+  if (size === '1' && (!textTransform || textTransform === 'none')) {
+    properties.textTransform = 'uppercase';
+  }
+  if (size === '5' || size === '6' || size === '7' || size === '8') {
+    properties.fontWeight = 'bold';
+  }
+  return <ChakraText {...properties} />;
+};
+
+Text.defaultProps = {
+  as: 'span',
+  size: '4',
+} as Props;
+
+export default Text;