@bitrise/bitkit 9.4.2 → 9.4.3-alpha-chakra.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.4.2",
+  "version": "9.4.3-alpha-chakra.1",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "lib/cjs/index.js",
   "esnext": "lib/esn/index.js",
@@ -27,16 +27,23 @@
     "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.4",
+    "@popperjs/core": "^2.11.5",
     "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",
@@ -49,6 +56,7 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.8",
     "@bitrise/eslint-plugin": "^2.1.0",
     "@commitlint/cli": "^16.2.3",
     "@commitlint/config-conventional": "^16.2.1",
@@ -56,6 +64,16 @@
     "@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",
@@ -71,23 +89,27 @@
     "@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.17.0",
-    "@typescript-eslint/parser": "^5.17.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": "^7.0.0",
+    "concurrently": "^7.1.0",
+    "csstype": "3.0.10",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
     "eslint": "^8.12.0",
-    "eslint-plugin-import": "^2.25.4",
+    "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.4.0",
-    "eslint-plugin-testing-library": "^5.1.0",
+    "eslint-plugin-storybook": "^0.5.7",
+    "eslint-plugin-testing-library": "^5.2.1",
     "fscreen": "^1.2.0",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
@@ -99,7 +121,7 @@
     "parcel-bundler": "^1.12.0",
     "postcss-cli": "^6.1.3",
     "postcss-preset-env": "^6.7.1",
-    "prettier": "^2.6.1",
+    "prettier": "^2.6.2",
     "prismjs": "^1.27.0",
     "react-docgen": "5.4.0",
     "react-router": "^5.2.1",
@@ -110,7 +132,9 @@
     "superstatic": "^7.1.0",
     "ts-jest": "^27.1.4",
     "ts-node": "^10.7.0",
-    "typescript": "^4.6.3"
+    "tsconfig-paths-webpack-plugin": "^3.5.2",
+    "typescript": "^4.6.3",
+    "webpack": "^5.71.0"
   },
   "publishConfig": {
     "access": "public"
@@ -127,6 +151,8 @@
     }
   },
   "resolutions": {
-    "**/ast-types": "npm:@gkz/ast-types"
+    "**/ast-types": "npm:@gkz/ast-types",
+    "@types/react": "17.0.40",
+    "csstype": "3.0.10"
   }
 }

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/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';
@@ -230,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;

package/src/Foundations/Colors/Colors.examples.tsx

@@ -0,0 +1,13 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ColorPalette, ColorItem } from '@storybook/addon-docs';
+import colors from './Colors';
+
+export const Palette = () => (
+  <ColorPalette>
+    {Object.keys(colors).map((key) => (
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      /* @ts-ignore */
+      <ColorItem title={key.toUpperCase()} subtitle="subtitle" colors={colors[key]} key={key} />
+    ))}
+  </ColorPalette>
+);

package/src/Foundations/Colors/Colors.stories.mdx

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import { Palette } from './Colors.examples';
+
+<Meta title="Foundations/Colors" />
+
+# Colors
+
+<Palette />

package/src/Foundations/Colors/Colors.ts

@@ -0,0 +1,128 @@
+const colors = {
+  neutral: {
+    10: '#201B22',
+    20: '#362D39',
+    30: '#49404F',
+    40: '#6B6071',
+    50: '#7D7184',
+    60: '#94879B',
+    70: '#AFA4B4',
+    80: '#C9C1CD',
+    90: '#DFDAE1',
+    93: '#EFEBEF',
+    95: '#F6F4F6',
+    100: '#FFFFFF',
+  },
+  purple: {
+    10: '#2B0E3F',
+    20: '#421560',
+    30: '#5C2A7E',
+    40: '#7B3BA5',
+    50: '#9247C2',
+    60: '#AE63DE',
+    70: '#C289E6',
+    80: '#D5ADEB',
+    90: '#EAD4F2',
+    93: '#F3E7F9',
+    95: '#F9F2FD',
+    100: '#FFFFFF',
+  },
+  red: {
+    10: '#47060C',
+    20: '#630811',
+    30: '#78111C',
+    40: '#A91E2E',
+    50: '#D72D40',
+    60: '#F7596C',
+    70: '#FF8091',
+    80: '#FFA8B5',
+    90: '#FFCCD5',
+    93: '#FFE5EB',
+    95: '#FFF0F3',
+    100: '#FFFFFF',
+  },
+  orange: {
+    10: '#421000',
+    20: '#661900',
+    30: '#7A2200',
+    40: '#A33500',
+    50: '#D45202',
+    60: '#ED720C',
+    70: '#FD9730',
+    80: '#FFB766',
+    90: '#FFD5A3',
+    93: '#FFE9CF',
+    95: '#FFF4E5',
+    100: '#FFFFFF',
+  },
+  yellow: {
+    10: '#2E1C00',
+    20: '#4D2F00',
+    30: '#613E00',
+    40: '#875B00',
+    50: '#B27E00',
+    60: '#D6A200',
+    70: '#EBBA00',
+    80: '#F9CC15',
+    90: '#FBE074',
+    93: '#FFEFAD',
+    95: '#FFF6D1',
+    100: '#FFFFFF',
+  },
+  green: {
+    10: '#042A0F',
+    20: '#064217',
+    30: '#0B5620',
+    40: '#167231',
+    50: '#2A9D4C',
+    60: '#4EB76C',
+    70: '#77CF8F',
+    80: '#A1DEB2',
+    90: '#C3EACE',
+    93: '#E1F4E7',
+    95: '#EEF9F1',
+    100: '#FFFFFF',
+  },
+  turquoise: {
+    10: '#002924',
+    20: '#003D36',
+    30: '#005248',
+    40: '#007366',
+    50: '#009E8E',
+    60: '#11BBA9',
+    70: '#55CEC3',
+    80: '#8AE0D7',
+    90: '#AEEFE8',
+    93: '#D8F8F4',
+    95: '#E9FBF9',
+    100: '#FFFFFF',
+  },
+  blue: {
+    10: '#002442',
+    20: '#00315C',
+    30: '#044781',
+    40: '#1066AC',
+    50: '#2582D0',
+    60: '#4F9BDE',
+    70: '#71B8EF',
+    80: '#99D1F5',
+    90: '#C2E7FA',
+    93: '#DEF2FC',
+    95: '#ECF8FD',
+    100: '#FFFFFF',
+  },
+  brand: {
+    primary: '#5C2A7E', // purple.30
+  },
+  text: {
+    body: '#201B22', // neutral.10
+    secondary: '#6B6071', // neutral.40
+    link: '#9247C2', // purple.50
+    linkHover: '#5C2A7E', // purple.30
+  },
+  separator: {
+    primary: '#DFDAE1', // neutral.90,
+  },
+};
+
+export default colors;

package/src/Foundations/Radii/Radii.examples.tsx

@@ -0,0 +1,17 @@
+import { Box, HStack, VStack } from '@chakra-ui/react';
+import Provider from '@/Components/Provider/Provider';
+import Text from '@/Components/Text/Text';
+import radii from './Radii.theme';
+
+export const Radii = () => (
+  <Provider>
+    <HStack alignItems="flex-end" spacing="24">
+      {Object.keys(radii).map((size) => (
+        <VStack key={size}>
+          <Box width="64" height="64" border="3px solid" borderColor="brand.primary" borderRadius={size} />
+          <Text>{size}</Text>
+        </VStack>
+      ))}
+    </HStack>
+  </Provider>
+);

package/src/Foundations/Radii/Radii.stories.mdx

@@ -0,0 +1,8 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import { Radii } from './Radii.examples';
+
+<Meta title="Foundations/Radii (round corners)" />
+
+# Radii (round corners)
+
+<Canvas><Radii /></Canvas>

package/src/Foundations/Radii/Radii.theme.ts

@@ -0,0 +1,9 @@
+const radii = {
+  4: '4px',
+  8: '8px',
+  12: '12px',
+  16: '16px',
+  24: '24px',
+};
+
+export default radii;

package/src/Foundations/Shadows/Shadows.examples.tsx

@@ -0,0 +1,17 @@
+import { Box, HStack, VStack } from '@chakra-ui/react';
+import Provider from '@/Components/Provider/Provider';
+import Text from '@/Components/Text/Text';
+import shadows from './Shadows';
+
+export const Shadows = () => (
+  <Provider>
+    <HStack alignItems="flex-end" spacing="32">
+      {Object.keys(shadows).map((key) => (
+        <VStack key={key}>
+          <Box width="32" height="32" background="purple.80" boxShadow={key} />
+          <Text>{key}</Text>
+        </VStack>
+      ))}
+    </HStack>
+  </Provider>
+);

package/src/Foundations/Shadows/Shadows.stories.mdx

@@ -0,0 +1,8 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import { Shadows } from './Shadows.examples';
+
+<Meta title="Foundations/Shadows" />
+
+# Shadows
+
+<Canvas><Shadows /></Canvas>

package/src/Foundations/Shadows/Shadows.ts

@@ -0,0 +1,9 @@
+const shadows = {
+  small: '0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+  medium: '0 2px 12px 0 rgba(0, 0, 0, 0.06)',
+  large: '0 2px 24px 0 rgba(0, 0, 0, 0.08)',
+  inner: '0 2px 3px 0 rgba(0, 0, 0, 0.1) inset',
+  none: 'none',
+};
+
+export default shadows;