@bitrise/bitkit 9.5.0-alpha.4 → 9.5.2

package/.eslintrc.js

@@ -6,7 +6,7 @@ module.exports = {
   settings: {
     'import/internal-regex': '^@/',
   },
-  extends: ['plugin:@bitrise/config'],
+  extends: ['plugin:@bitrise/config', 'plugin:storybook/recommended'],
   rules: {
     /** * Import related rules ** */
     'import/no-extraneous-dependencies': [
@@ -23,5 +23,6 @@ module.exports = {
       },
     ],
     'react-hooks/exhaustive-deps': 'off',
+    'react/react-in-jsx-scope': 'off',
   },
 };

package/.storybook/main.js

@@ -0,0 +1,35 @@
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+
+module.exports = {
+  core: {
+    builder: 'webpack5',
+  },
+  stories: [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  framework: "@storybook/react",
+  features: { emotionAlias: false },
+  refs: {
+    '@chakra-ui/react': { disable: true }
+  },
+  webpackFinal: async (config) => {
+    config.module.rules.push({
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: 'javascript/auto',
+    });
+    config.resolve.plugins = [
+      ...(config.resolve.plugins || []),
+      new TsconfigPathsPlugin({
+        extensions: config.resolve.extensions,
+      }),
+    ];
+    return config;
+  },
+};

package/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import theme from './theme';
+
+addons.setConfig({
+  theme,
+});

package/.storybook/preview.tsx

@@ -0,0 +1,20 @@
+import Provider from '../src/Components/Provider/Provider';
+import '../site/index.css'
+
+export const decorators = [
+  (Story) => (
+    <Provider>
+      <Story />
+    </Provider>
+  ),
+];
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

package/.storybook/theme.js

@@ -0,0 +1,7 @@
+import { create } from '@storybook/theming';
+
+export default create({
+  base: 'light',
+  brandTitle: 'Bitkit',
+  // fontBase: '"TT Norms Pro", sans-serif',
+});

package/CHANGELOG.md

@@ -1,20 +1,36 @@
-# [9.5.0-alpha.4](https://github.com/bitrise-io/bitkit/compare/v9.5.0-alpha.3...v9.5.0-alpha.4) (2022-03-24)
+## [9.5.2](https://github.com/bitrise-io/bitkit/compare/v9.5.1...v9.5.2) (2022-04-12)
 
-# [9.5.0-alpha.3](https://github.com/bitrise-io/bitkit/compare/v9.5.0-alpha.2...v9.5.0-alpha.3) (2022-03-24)
 
-# [9.5.0-alpha.2](https://github.com/bitrise-io/bitkit/compare/v9.5.0-alpha.1...v9.5.0-alpha.2) (2022-03-24)
+### Bug Fixes
+
+* **colors:** revert css variables ([#151](https://github.com/bitrise-io/bitkit/issues/151)) ([1873d1c](https://github.com/bitrise-io/bitkit/commit/1873d1c77c6aa4e04225c0c05616dc7c75394dfc))
+
+## [9.5.1](https://github.com/bitrise-io/bitkit/compare/v9.5.0...v9.5.1) (2022-04-12)
 
-# [9.5.0-alpha.1](https://github.com/bitrise-io/bitkit/compare/v9.4.0...v9.5.0-alpha.1) (2022-03-24)
+# [9.5.0](https://github.com/bitrise-io/bitkit/compare/v9.4.4...v9.5.0) (2022-04-12)
 
 
 ### Features
 
-* **hack:** ejj ([71ead41](https://github.com/bitrise-io/bitkit/commit/71ead4130ea53bfe01d359c9c0dcc330e0f7c85f))
+* **build:** don't build ([#149](https://github.com/bitrise-io/bitkit/issues/149)) ([8b923fb](https://github.com/bitrise-io/bitkit/commit/8b923fb65a8b84a0d1bcde2409f31ca76e18ff9e))
+
+## [9.4.4](https://github.com/bitrise-io/bitkit/compare/v9.4.3...v9.4.4) (2022-04-11)
+
+## [9.4.3](https://github.com/bitrise-io/bitkit/compare/v9.4.2...v9.4.3) (2022-04-07)
+
+## [9.4.2](https://github.com/bitrise-io/bitkit/compare/v9.4.1...v9.4.2) (2022-03-30)
+
+## [9.4.1](https://github.com/bitrise-io/bitkit/compare/v9.4.0...v9.4.1) (2022-03-29)
+
+
+### Bug Fixes
+
+* **datepicker:** wrong days of previous month ([#147](https://github.com/bitrise-io/bitkit/issues/147)) ([4a95076](https://github.com/bitrise-io/bitkit/commit/4a950766147817b21a20903d5c3920aed6a04c4c))
 
 # [9.4.0](https://github.com/bitrise-io/bitkit/compare/v9.3.1...v9.4.0) (2022-03-18)
 
 
-### Features :)
+### Features
 
 * **toggle:** implement disabled state for Toggle ([#144](https://github.com/bitrise-io/bitkit/issues/144)) ([86a58c3](https://github.com/bitrise-io/bitkit/commit/86a58c3d89e99647b5b3886626a86cbb6b657152))
 

package/bitrise.yml

@@ -5,7 +5,7 @@ project_type: other
 trigger_map:
 - push_branch: master
   workflow: Master
-- push_branch: alpha
+- push_branch: 'alpha*'
   workflow: AlphaBranch
 - pull_request_source_branch: '*'
   workflow: PullRequests
@@ -40,13 +40,13 @@ workflows:
         inputs:
         - command: lint
     - yarn@0.1:
+        title: Run typechecking
         inputs:
-        - command: test
-        title: Run Tests
+        - command: tsc -p src --noEmit
     - yarn@0.1:
-        title: Build Library and Style Guide
         inputs:
-        - command: build
+        - command: test
+        title: Run Tests
   PullRequests:
     before_run:
     - Primary
@@ -63,4 +63,4 @@ workflows:
 
             git log --pretty=format:'%s' origin/master...$BITRISE_GIT_COMMIT |
             yarn commitlint
-        title: Lint Commits
+        title: Lint Commits

package/package.json

@@ -1,11 +1,9 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.5.0-alpha.4",
+  "version": "9.5.2",
   "repository": "git@github.com:bitrise-io/bitkit.git",
-  "main": "lib/cjs/index.js",
-  "esnext": "lib/esn/index.js",
-  "typings": "lib/cjs/index.d.ts",
+  "main": "src/index.ts",
   "license": "UNLICENSED",
   "scripts": {
     "build": "yarn build:lib && yarn build:site",
@@ -27,20 +25,25 @@
     "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.8",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
     "@juggle/resize-observer": "^3.3.1",
-    "@popperjs/core": "^2.11.4",
+    "@popperjs/core": "^2.11.5",
+    "@types/react-transition-group": "^4.4.4",
     "classnames": "^2.3.1",
     "clipboard": "^2.0.10",
+    "framer-motion": "^6.2.9",
     "luxon": "^2.3.1",
-    "normalize.css": "^8.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "react-popper": "^2.2.5",
     "react-transition-group": "^4.4.2"
   },
@@ -49,45 +52,59 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.9",
     "@bitrise/eslint-plugin": "^2.1.0",
+    "@chakra-ui/cli": "^1.9.0",
     "@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.21",
+    "@storybook/addon-essentials": "^6.4.21",
+    "@storybook/addon-interactions": "^6.4.21",
+    "@storybook/addon-links": "^6.4.21",
+    "@storybook/addons": "^6.4.21",
+    "@storybook/builder-webpack5": "^6.4.21",
+    "@storybook/manager-webpack5": "^6.4.21",
+    "@storybook/react": "^6.4.21",
+    "@storybook/testing-library": "^0.0.9",
+    "@storybook/theming": "^6.4.21",
     "@svgr/cli": "^6.2.1",
     "@types/cheerio": "^0.22.31",
     "@types/clipboard": "^2.0.1",
-    "@types/enzyme": "^3.10.11",
+    "@types/enzyme": "^3.10.12",
     "@types/jest": "^27.4.1",
     "@types/lodash.sample": "^4.2.6",
     "@types/lodash.shuffle": "^4.2.6",
     "@types/luxon": "^2.3.1",
     "@types/prismjs": "^1.26.0",
-    "@types/react": "17.0.40",
-    "@types/react-dom": "^17.0.14",
+    "@types/react": "17.0.44",
+    "@types/react-dom": "^17.0.15",
     "@types/react-router": "^5.1.18",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-transition-group": "^4.4.4",
     "@types/vfile-message": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.16.0",
-    "@typescript-eslint/parser": "^5.16.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
+    "@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": "^7.0.0",
+    "concurrently": "^7.1.0",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
-    "eslint": "^8.11.0",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jest": "^26.1.2",
+    "eslint": "^8.13.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^26.1.4",
     "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.8",
+    "eslint-plugin-testing-library": "^5.2.1",
     "fscreen": "^1.2.0",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
@@ -99,18 +116,22 @@
     "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": "^17.0.2",
     "react-docgen": "5.4.0",
+    "react-dom": "^17.0.2",
     "react-router": "^5.2.1",
     "react-router-dom": "^5.3.0",
     "semantic-release": "^19.0.2",
-    "stylelint": "^14.6.0",
+    "stylelint": "^14.6.1",
     "stylelint-order": "^5.0.0",
     "superstatic": "^7.1.0",
-    "ts-jest": "^27.1.3",
+    "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.72.0"
   },
   "publishConfig": {
     "access": "public"
@@ -125,8 +146,5 @@
     "transform": {
       "\\.tsx?$": "ts-jest"
     }
-  },
-  "resolutions": {
-    "**/ast-types": "npm:@gkz/ast-types"
   }
 }

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,39 +354,6 @@ const SectionButtons = () => {
 );`}</CodeBlock>
         </>
       )}
-      {selectedTab === 4 && (
-        <Flex alignChildren="end" direction="horizontal">
-          <ButtonWithDropdown
-            items={[
-              {
-                key: '1',
-                component: 'button',
-                icon: 'Percent',
-                content: 'Refer your friends',
-              },
-              {
-                key: '2',
-                component: 'a',
-                icon: 'Settings',
-                content: 'Account setings',
-              },
-              {
-                key: '3',
-                icon: 'ChangePlan',
-                content: 'Change plan',
-              },
-              {
-                key: '4',
-                icon: 'Logout',
-                content: 'Log out',
-              },
-            ]}
-          >
-            <Icon name="Bitbot" />
-            <Text>Account</Text>
-          </ButtonWithDropdown>
-        </Flex>
-      )}
     </Section>
   );
 };

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

@@ -21,10 +21,7 @@ const SectionPlacement = () => {
   const [selectedTab, setSelectedTab] = useState(1);
   const [ref, setRef] = useState<SVGSVGElement>();
 
-  const handleToggle = (event?: any) => {
-    if (event && event.stopPropagation) {
-      event.stopPropagation();
-    }
+  const handleToggle = () => {
     setVisible(!visible);
   };
 

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/site/index.html

@@ -4,7 +4,7 @@
     <meta charSet="utf-8" />
     <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
     <meta content="width=device-width,initial-scale=1" name="viewport">
-    <title>Bitrise - Bitkit</title>
+    <title>Bitkit legacy</title>
     <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:500,600&display=swap" rel="stylesheet">
     <link rel="shortcut icon" href="./assets/icons/favicon-32x32.png">
     <link rel="icon" type="image/png" href="./assets/icons/favicon-32x32.png">

package/src/AddonBeam/AddonBeam.css

@@ -13,8 +13,4 @@
   transition-property: background-color;
   transition-duration: var(--transition-duration--base);
   transition-timing-function: var(--transition-timing-function);
-
-  &:hover {
-    background-color: rgba(var(--rgb-grape--1), 0.2);
-  }
 }

package/src/AddonBeam/AddonBeam.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as dataAtIds from '../dataAtIds.json';
+import dataAtIds from '../dataAtIds.json';
 import { TypeIconName } from '../Icon/tsx';
 import Flex, { Props as FlexProps } from '../Flex/Flex';
 import Hamburger from '../Hamburger/Hamburger';

package/src/Components/Card/Card.stories.tsx

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