@bitrise/bitkit 9.5.0-alpha-15.2 → 9.5.0-alpha-15-2.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,61 +1,31 @@
-# [9.5.0-alpha-15.2](https://github.com/bitrise-io/bitkit/compare/v9.5.0-alpha-15.1...v9.5.0-alpha-15.2) (2022-04-06)
+# [9.5.0-alpha-15-2.2](https://github.com/bitrise-io/bitkit/compare/v9.5.0-alpha-15-2.1...v9.5.0-alpha-15-2.2) (2022-04-07)
 
 
 ### Bug Fixes
 
-* **build:** add react types to devdeps ([8a81522](https://github.com/bitrise-io/bitkit/commit/8a815228f6ac8dfd07ff04e9425791b9bf1fa44b))
-* **build:** fix dependencies ([e4869c4](https://github.com/bitrise-io/bitkit/commit/e4869c44e9e8c8fedfaafee0fead28814871b4ed))
-* **build:** set correct version for @types/react ([6ba889c](https://github.com/bitrise-io/bitkit/commit/6ba889ceee89c5600a8c39974625759453072a30))
+* **build:** add @types/react-transition-group ([24e6c6f](https://github.com/bitrise-io/bitkit/commit/24e6c6fa6e1513702b00ff8928c37420616ac32a))
 
-# [9.5.0-alpha-15.1](https://github.com/bitrise-io/bitkit/compare/v9.4.2...v9.5.0-alpha-15.1) (2022-04-05)
+# [9.5.0-alpha-15-2.1](https://github.com/bitrise-io/bitkit/compare/v9.4.3...v9.5.0-alpha-15-2.1) (2022-04-07)
 
 
 ### Bug Fixes
 
-* **build:** allow multiple alpha releases ([9a1d951](https://github.com/bitrise-io/bitkit/commit/9a1d9518274959a13ea64fa882d11ab714102017))
-* **build:** trigger new build ([3bc84ae](https://github.com/bitrise-io/bitkit/commit/3bc84aeb266328a72ce3ea55e2e2f0017b463076))
-* **build:** trigger new build ([8ce3357](https://github.com/bitrise-io/bitkit/commit/8ce3357d2578d5890e5a1c1da7fc8703c30b69bd))
-* **build:** trigger new build ([d7d308a](https://github.com/bitrise-io/bitkit/commit/d7d308a4415086d0207432bf5be5b587c45e3b38))
-* **build:** try to add patch release ([b32966e](https://github.com/bitrise-io/bitkit/commit/b32966ebdb0a7eee16e18f51c5cecc02350ff8f6))
-* **build:** try without github plugin ([dfb4e83](https://github.com/bitrise-io/bitkit/commit/dfb4e837ee833711f8aafbeb86b52ab1a11cfd78))
-* **build:** update ([0d93e7a](https://github.com/bitrise-io/bitkit/commit/0d93e7abed585b6e690332acd227188d97b8fffb))
+* **build:** allow multiple alpha releases ([424e89e](https://github.com/bitrise-io/bitkit/commit/424e89e924efee2bb54f13f52eb8c34b83f424f2))
+* **build:** trigger new build ([23c7bd9](https://github.com/bitrise-io/bitkit/commit/23c7bd9b2555e2974c8c81c3fccd5d84f70089cb))
+* **build:** trigger new build ([5131464](https://github.com/bitrise-io/bitkit/commit/51314646d9d31aa1f7389134877ebba0aa2f5407))
+* **build:** trigger new build ([9b430eb](https://github.com/bitrise-io/bitkit/commit/9b430eb3aa269172d74db282a1b2cb9b7f04090c))
+* **build:** try to add patch release ([2038917](https://github.com/bitrise-io/bitkit/commit/203891718c237e4cb2b16d6edeab45fe183f8ad1))
+* **build:** try without github plugin ([0110068](https://github.com/bitrise-io/bitkit/commit/0110068cb1523a48c35554b89a5065f4194a85bb))
+* **build:** update ([b5fe409](https://github.com/bitrise-io/bitkit/commit/b5fe40985b6e54eb27a492b5b67cb363b60811e1))
+* **build:** update yarn.lock ([aa069c2](https://github.com/bitrise-io/bitkit/commit/aa069c279dd0be22626b0cedfe74f58da4423d60))
 
 
 ### Features
 
-* **build:** no build ([e34ff4b](https://github.com/bitrise-io/bitkit/commit/e34ff4bd2e62f5313fd30066c820936c9dd3bdda))
-* **build:** update ([6d0a97a](https://github.com/bitrise-io/bitkit/commit/6d0a97a99457b583c3a0e7cc543e9e4398f66924))
+* **build:** no build ([7e1a4ff](https://github.com/bitrise-io/bitkit/commit/7e1a4ff37622d794c60514f4612ccbb762812294))
+* **build:** update ([e00f75e](https://github.com/bitrise-io/bitkit/commit/e00f75ed0a25ea9690e92fc750d188e851aec497))
 
-# [9.5.0-alpha.1](https://github.com/bitrise-io/bitkit/compare/v9.4.2...v9.5.0-alpha.1) (2022-04-05)
-
-
-### Bug Fixes
-
-* **build:** trigger new build ([3bc84ae](https://github.com/bitrise-io/bitkit/commit/3bc84aeb266328a72ce3ea55e2e2f0017b463076))
-* **build:** trigger new build ([8ce3357](https://github.com/bitrise-io/bitkit/commit/8ce3357d2578d5890e5a1c1da7fc8703c30b69bd))
-* **build:** trigger new build ([d7d308a](https://github.com/bitrise-io/bitkit/commit/d7d308a4415086d0207432bf5be5b587c45e3b38))
-* **build:** try without github plugin ([dfb4e83](https://github.com/bitrise-io/bitkit/commit/dfb4e837ee833711f8aafbeb86b52ab1a11cfd78))
-* **build:** update ([0d93e7a](https://github.com/bitrise-io/bitkit/commit/0d93e7abed585b6e690332acd227188d97b8fffb))
-
-
-### Features
-
-* **build:** no build ([e34ff4b](https://github.com/bitrise-io/bitkit/commit/e34ff4bd2e62f5313fd30066c820936c9dd3bdda))
-
-# [9.5.0-alpha.1](https://github.com/bitrise-io/bitkit/compare/v9.4.2...v9.5.0-alpha.1) (2022-04-05)
-
-
-### Bug Fixes
-
-* **build:** trigger new build ([3bc84ae](https://github.com/bitrise-io/bitkit/commit/3bc84aeb266328a72ce3ea55e2e2f0017b463076))
-* **build:** trigger new build ([8ce3357](https://github.com/bitrise-io/bitkit/commit/8ce3357d2578d5890e5a1c1da7fc8703c30b69bd))
-* **build:** trigger new build ([d7d308a](https://github.com/bitrise-io/bitkit/commit/d7d308a4415086d0207432bf5be5b587c45e3b38))
-* **build:** try without github plugin ([dfb4e83](https://github.com/bitrise-io/bitkit/commit/dfb4e837ee833711f8aafbeb86b52ab1a11cfd78))
-
-
-### Features
-
-* **build:** no build ([e34ff4b](https://github.com/bitrise-io/bitkit/commit/e34ff4bd2e62f5313fd30066c820936c9dd3bdda))
+## [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)
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.5.0-alpha-15.2",
+  "version": "9.5.0-alpha-15-2.2",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -17,20 +17,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": "tsc --noEmit -p src && 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",
-    "@types/luxon": "^2.3.1",
+    "@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-popper": "^2.2.5",
     "react-transition-group": "^4.4.2"
   },
@@ -39,13 +44,23 @@
     "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",
-    "@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",
@@ -53,29 +68,33 @@
     "@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": "17.0.43",
     "@types/react-dom": "^17.0.14",
     "@types/react-router": "^5.1.18",
     "@types/react-router-dom": "^5.3.3",
-    "@types/react-transition-group": "^4.4.4",
-    "@typescript-eslint/eslint-plugin": "^5.17.0",
-    "@typescript-eslint/parser": "^5.17.0",
+    "@types/vfile-message": "^2.0.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",
     "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",
@@ -87,7 +106,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": "^17.0.2",
     "react-docgen": "5.4.0",
@@ -100,7 +119,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"
@@ -115,8 +136,5 @@
     "transform": {
       "\\.tsx?$": "ts-jest"
     }
-  },
-  "resolutions": {
-    "**/ast-types": "npm:@gkz/ast-types"
   }
 }

package/release.config.js

@@ -16,7 +16,7 @@ module.exports = {
     ],
     '@semantic-release/release-notes-generator',
     '@semantic-release/npm',
-    // '@semantic-release/github',
+    '@semantic-release/github',
   ],
   verifyConditions: ['@semantic-release/changelog', '@semantic-release/npm', '@semantic-release/git'],
   prepare: [

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/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/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?: TextProps['letterSpacing'];
+  /**
+   * 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 { fontWeight, size, textTransform } = props;
+  const properties: TextProps = { ...props };
+  if (size === '1' && (!textTransform || textTransform === 'none')) {
+    properties.textTransform = 'uppercase';
+  }
+  if (!fontWeight && (size === '5' || size === '6' || size === '7' || size === '8')) {
+    properties.fontWeight = 'bold';
+  }
+  return <ChakraText {...properties} />;
+};
+
+Text.defaultProps = {
+  as: 'p',
+  size: '3',
+} 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 />