fix(tab-menu): Fix merge conflicts

.github/workflows/deploy-storybook.yml

@@ -22,7 +22,7 @@ jobs:
         run: yarn install
 
       - name: Build Storybook
-        run: yarn build-storybook
+        run: yarn storybook:build
 
       - name: Deploy Storybook
         uses: peaceiris/actions-gh-pages@v3

README.md

@@ -0,0 +1,25 @@
+# Pancake Toolkit
+
+This repository is a monorepo manage with [yarn workspaces](https://classic.yarnpkg.com/en/docs/workspaces/) and [Lerna](https://lerna.js.org/). 
+
+## Packages
+
+- [pancake-uikit](https://github.com/pancakeswap/pancake-toolkit/tree/master/packages/pancake-uikit) : React components used to build the Pancake UI
+- [eslint-config-pancake](https://github.com/pancakeswap/pancake-toolkit/tree/master/packages/eslint-config-pancake) : An ESLint config for pancake, with Typescript and Prettier support
+
+## How to use
+
+Clone the repository 
+
+```
+git clone [email protected]:pancakeswap/pancake-toolkit.git
+```
+
+Run yarn at the root of the workspace
+
+```
+cd pancake-toolkit
+yarn
+```
+
+Then, refer to the readme of each project.

lerna.json

@@ -1,6 +1,13 @@
 {
-  "packages": [
-    "packages/*"
-  ],
-  "version": "0.0.0"
+  "packages": ["packages/*"],
+  "version": "independent",
+  "npmClient": "yarn",
+  "workspaces": true,
+  "ignoreChanges": ["**/__tests__/**", "**/*.md"],
+  "command": {
+    "version": {
+      "conventionalCommits": true,
+      "message": "chore(release): Publish %s"
+    }
+  }
 }

package.json

@@ -19,8 +19,15 @@
     "build": "lerna run build",
     "test": "lerna run test",
     "lint": "lerna run lint",
-    "format": "lerna run format",
-    "build-storybook": "lerna run build-storybook"
+    "format:check": "lerna run format:check",
+    "storybook:build": "lerna run storybook:build",
+    "release": "yarn build && yarn lerna publish"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn format:check",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -30,11 +37,11 @@
     "@pancakeswap-libs/eslint-config-pancake": "0.1.0",
     "@rollup/plugin-typescript": "^8.2.0",
     "@rollup/plugin-url": "^6.0.0",
-    "@storybook/addon-a11y": "^6.1.18",
-    "@storybook/addon-actions": "^6.1.18",
-    "@storybook/addon-essentials": "^6.1.18",
-    "@storybook/addon-links": "^6.1.18",
-    "@storybook/react": "^6.1.18",
+    "@storybook/addon-a11y": "^6.1.21",
+    "@storybook/addon-actions": "^6.1.21",
+    "@storybook/addon-essentials": "^6.1.21",
+    "@storybook/addon-links": "^6.1.21",
+    "@storybook/react": "^6.1.21",
     "@types/react": "^17.0.2",
     "@types/react-router-dom": "^5.1.6",
     "@types/react-transition-group": "^4.4.0",
@@ -50,7 +57,7 @@
     "prettier": "^2.1.2",
     "react-is": "^17.0.1",
     "rollup": "^2.39.0",
-    "themeprovider-storybook": "^1.6.4",
+    "themeprovider-storybook": "^1.7.1",
     "ts-jest": "^26.5.1",
     "tslib": "^2.0.3",
     "typescript": "^4.1.5"

packages/eslint-config-pancake/README.md

@@ -0,0 +1,15 @@
+# eslint-config-pancake
+
+Pancake Eslint config with:
+
+- Airbnb config
+- Typescript
+- Prettier
+
+## Usage
+
+```
+npx install-peerdeps --dev @pancakeswap-libs/eslint-config-pancake
+```
+
+Add `"extends": "@pancakeswap-libs/eslint-config-pancake"` to your eslint config file.

packages/eslint-config-pancake/lib/index.js

@@ -0,0 +1,54 @@
+module.exports = {
+  root: true,
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: 2017,
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    es6: true,
+    browser: true,
+  },
+  settings: {
+    "import/resolver": {
+      node: {
+        extensions: [".js", ".ts", ".jsx", ".tsx"],
+      },
+    },
+    "import/extensions": [".js", ".ts", ".jsx", ".tsx"],
+  },
+  extends: [
+    "airbnb",
+    "airbnb/hooks",
+    "prettier",
+    "prettier/react",
+    "prettier/@typescript-eslint",
+    "plugin:@typescript-eslint/recommended",
+  ],
+  rules: {
+    // Typescript
+    "@typescript-eslint/no-unused-vars": "warn",
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": ["warn"],
+    "no-shadow": "off",
+    "@typescript-eslint/no-shadow": ["error"],
+    // React
+    "react/jsx-filename-extension": ["error", { extensions: [".tsx"] }],
+    "react/prop-types": 0,
+    "react/jsx-props-no-spreading": 0,
+    "react/no-multi-comp": 0,
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        js: "never",
+        mjs: "never",
+        jsx: "never",
+        ts: "never",
+        tsx: "never",
+      },
+    ],
+  },
+};

packages/eslint-config-pancake/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@pancakeswap-libs/eslint-config-pancake",
+  "version": "1.0.1",
+  "description": "Eslint config for PancakeSwap",
+  "main": "lib/index.js",
+  "files": [
+    "lib"
+  ],
+  "repository": "https://github.com/pancakeswap/pancake-toolkit/tree/master/packages/eslint-config-pancake",
+  "license": "MIT",
+  "author": "RabbitDoge",
+  "private": false,
+  "dependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.7.0",
+    "@typescript-eslint/parser": "^4.7.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.0.0"
+  },
+  "peerDependencies": {
+    "eslint": "^7.2.0",
+    "prettier": "^2.1.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/pancake-uikit/package.json

@@ -1,30 +1,25 @@
 {
   "name": "@pancakeswap-libs/uikit",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "Set of UI components for pancake projects",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
-  "repository": "https://github.com/pancakeswap/pancake-uikit",
+  "repository": "https://github.com/pancakeswap/pancake-toolkit/tree/master/packages/pancake-uikit",
   "license": "MIT",
   "scripts": {
+    "start": "yarn storybook",
     "build": "rm -rf ./dist && rollup -c && tsc -d --emitDeclarationOnly --declarationDir dist",
     "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
     "format:check": "prettier --check --loglevel error 'src/**/*.{js,jsx,ts,tsx}'",
     "format:write": "prettier --write 'src/**/*.{js,jsx,ts,tsx}'",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook:build": "build-storybook",
     "test": "jest"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "yarn format:write",
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-    }
-  },
   "jest": {
     "setupFilesAfterEnv": [
       "<rootDir>/src/setupTests.js"
@@ -51,5 +46,8 @@
     "lodash": "^4.17.20",
     "react-transition-group": "^4.4.1",
     "styled-system": "^5.1.5"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

packages/pancake-uikit/src/__tests__/components/balanceinput.test.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { renderWithTheme } from "../../testHelpers";
+import BalanceInput from "../../components/BalanceInput/BalanceInput";
+
+const handleChange = jest.fn();
+
+it("renders correctly", () => {
+  const { asFragment } = renderWithTheme(<BalanceInput value="14" currencyValue="15 USD" onChange={handleChange} />);
+  expect(asFragment()).toMatchInlineSnapshot(`
+    <DocumentFragment>
+      <div
+        class="sc-gsTCUz sc-hKgILt jLyPtw bSJkHm"
+      >
+        <input
+          class="sc-dlfnbm sc-eCssSg iIlYpN jebGQw"
+          placeholder="0.0"
+          scale="md"
+          type="text"
+          value="14"
+        />
+        <div
+          class="sc-bdfBwQ hRRNWZ"
+          color="textSubtle"
+          font-size="12px"
+        >
+          15 USD
+        </div>
+      </div>
+    </DocumentFragment>
+  `);
+});

packages/pancake-uikit/src/components/BalanceInput/BalanceInput.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import Text from "../Text/Text";
+import { StyledBalanceInput, StyledInput } from "./styles";
+import { BalanceInputProps } from "./types";
+
+const BalanceInput: React.FC<BalanceInputProps> = ({
+  value,
+  placeholder = "0.0",
+  onChange,
+  currencyValue,
+  inputProps,
+  ...props
+}) => {
+  return (
+    <StyledBalanceInput {...props}>
+      <StyledInput type="text" value={value} onChange={onChange} placeholder={placeholder} {...inputProps} />
+      {currencyValue && (
+        <Text fontSize="12px" textAlign="right" color="textSubtle">
+          {currencyValue}
+        </Text>
+      )}
+    </StyledBalanceInput>
+  );
+};
+
+export default BalanceInput;

packages/pancake-uikit/src/components/BalanceInput/index.stories.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import Box from "../Box/Box";
+import BalanceInput from "./BalanceInput";
+
+export default {
+  title: "Components/BalanceInput",
+  component: BalanceInput,
+  argTypes: {},
+};
+
+export const Default: React.FC = () => {
+  const [value, setValue] = useState(1.43333);
+  const currencyValue = `~${(value * 1.3).toLocaleString(undefined, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  })} USD`;
+
+  const handleChange = (evt) => {
+    setValue(evt.target.value);
+  };
+
+  return (
+    <Box width="300px">
+      <BalanceInput value={value} currencyValue={currencyValue} onChange={handleChange} placeholder="0.0" />
+    </Box>
+  );
+};

packages/pancake-uikit/src/components/BalanceInput/index.tsx

@@ -0,0 +1,2 @@
+export { default as BalanceInput } from "./BalanceInput";
+export type { BalanceInputProps } from "./types";

packages/pancake-uikit/src/components/BalanceInput/styles.tsx

@@ -0,0 +1,27 @@
+import styled from "styled-components";
+import Box from "../Box/Box";
+import Input from "../Input/Input";
+
+export const StyledBalanceInput = styled(Box)`
+  background-color: ${({ theme }) => theme.colors.input};
+  border-radius: 16px;
+  box-shadow: ${({ theme }) => theme.shadows.inset};
+  padding: 8px 16px;
+`;
+
+export const StyledInput = styled(Input)`
+  background: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  padding-left: 0;
+  padding-right: 0;
+  text-align: right;
+
+  ::placeholder {
+    color: ${({ theme }) => theme.colors.textSubtle};
+  }
+
+  &:focus:not(:disabled) {
+    box-shadow: none;
+  }
+`;

packages/pancake-uikit/src/components/BalanceInput/types.ts

@@ -0,0 +1,10 @@
+import { InputHTMLAttributes, ReactNode, ReactText } from "react";
+import { BoxProps } from "../Box";
+
+export interface BalanceInputProps extends BoxProps {
+  value: ReactText;
+  onChange?: InputHTMLAttributes<HTMLInputElement>["onChange"];
+  currencyValue?: ReactNode;
+  placeholder?: string;
+  inputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "placeholder" | "onChange">;
+}