[Feature] Create a Inputbase component

.github/workflows/unit-testing.yaml

@@ -0,0 +1,26 @@
+name: Run Unit Test
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - run: yarn build
+      - run: yarn test

apps/docs/pages/index.tsx

@@ -1,10 +1,7 @@
-import { Button } from "ui";
-
 export default function Docs() {
   return (
     <div>
       <h1>Docs</h1>
-      <Button />
     </div>
   );
 }

apps/web/pages/_app.tsx

@@ -1,8 +1,12 @@
-import { AppProps } from "next/app";
+import { SSRProvider } from "ui";
 import "../styles/global.css";
 
 function MyApp({ Component, pageProps }: any) {
-  return <Component {...pageProps} />;
+  return (
+    <SSRProvider>
+      <Component {...pageProps} />;
+    </SSRProvider>
+  );
 }
 
-export default MyApp;
+export default MyApp;

apps/web/pages/index.tsx

@@ -1,14 +1,16 @@
-import { Button } from "ui";
-
 export default function Web() {
   return (
-    <div>
-      <h1>Web</h1>
-      <Button onPress={() => console.log('is clicked')}
-        type="reset"
+    <div className="flex justify-center py-20 px-10">
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          console.log("Submit");
+        }}
+        className="w-full flex flex-col gap-10"
       >
-        Prueba
-      </Button>
+
+        <button type="submit">Aqui</button>
+      </form>
     </div>
   );
 }

jest.config.js

@@ -0,0 +1,19 @@
+const path = require('path')
+
+const fromRoot = d => path.join(__dirname, d)
+
+module.exports = {
+  roots: [fromRoot('packages/ui')],
+  resetMocks: true,
+  coveragePathIgnorePatterns: [],
+  collectCoverageFrom: ['<rootDir>/src/**/*.{js,ts,tsx}'],
+  coverageThreshold: null,
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.tsx?$': 'esbuild-jest',
+    '^.+\\.jsx?$': 'esbuild-jest',
+  },
+  setupFilesAfterEnv: ['@testing-library/jest-dom'],
+  moduleDirectories: ['node_modules'],
+  moduleFileExtensions: ['js', 'jsx', 'json', 'ts', 'tsx']
+}

package.json

@@ -9,10 +9,20 @@
   "scripts": {
     "build": "turbo run build",
     "dev": "turbo run dev --parallel",
+    "test": "turbo run test",
     "lint": "turbo run lint",
     "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.4.0",
+    "esbuild": "^0.14.10",
+    "esbuild-jest": "^0.5.0",
+    "jest": "^27.4.7",
+    "jest-watch-typeahead": "^1.0.0",
     "prettier": "^2.5.1",
     "turbo": "latest"
   },

packages/config/tailwind.config.js

@@ -1,11 +1,16 @@
 module.exports = {
+  mode: 'jit',
   content: [
     "../../packages/ui/**/*.{js,ts,jsx,tsx}",
     "./pages/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        primary: "#2196f3",
+      }
+    },
   },
   plugins: [],
 };

packages/tsconfig/base.json

@@ -2,19 +2,24 @@
   "$schema": "https://json.schemastore.org/tsconfig",
   "display": "Default",
   "compilerOptions": {
+    "allowJs": true,
     "composite": false,
     "declaration": true,
     "declarationMap": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
+    "incremental": true,
     "inlineSources": false,
     "isolatedModules": true,
+    "lib": ["ES2021", "DOM", "DOM.Iterable"],
+    "module": "esnext",
     "moduleResolution": "node",
     "noUnusedLocals": false,
     "noUnusedParameters": false,
     "preserveWatchOutput": true,
+    "resolveJsonModule": true,
     "skipLibCheck": true,
-    "strict": true
-  },
-  "exclude": ["node_modules"]
-}
+    "strict": true,
+    "typeRoots": ["../../node_modules/@types"]
+  }
+}

packages/tsconfig/ui.json

@@ -3,7 +3,7 @@
   "display": "React Library",
   "extends": "./base.json",
   "compilerOptions": {
-    "lib": ["ES2015"],
+    "lib": ["ES2015", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "target": "ES6",
     "jsx": "react-jsx"

packages/ui/benchmark/common/Icon.common.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+const EyeIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-5 w-5"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+    >
+      <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
+      <path
+        fillRule="evenodd"
+        d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default EyeIcon;

packages/ui/benchmark/components/Inputbase/InputBase.basic.mui.tsx

@@ -0,0 +1,6 @@
+import { TextField } from "@mui/material";
+import * as React from "react";
+
+export default function MuiTextFieldTest() {
+  return <TextField variant="standard" />;
+}

packages/ui/benchmark/components/Inputbase/InputBase.basic.ui.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import { InputBase } from "../../../src/InputBase/InputBase";
+
+export default function () {
+  return <InputBase />;
+}

packages/ui/benchmark/components/Inputbase/InputBase.disabled.mui.tsx

@@ -0,0 +1,16 @@
+import { TextField } from "@mui/material";
+import * as React from "react";
+import EyeIcon from "../../common/Icon.common";
+
+export default function MuiTextFieldTest() {
+  return (
+    <TextField
+      variant="standard"
+      helperText="Esto es una descripcion"
+      disabled
+      InputProps={{
+        endAdornment: <EyeIcon />,
+      }}
+    />
+  );
+}

packages/ui/benchmark/components/Inputbase/InputBase.disabled.ui.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import EyeIcon from "../../common/Icon.common";
+import { InputBase } from "../../../src/InputBase/InputBase";
+
+export default function () {
+  return (
+    <InputBase
+      label="Descripción"
+      description="Esto es una descripcion"
+      isDisabled
+      rightNode={<EyeIcon />}
+    />
+  );
+}

packages/ui/benchmark/components/Inputbase/InputBase.error.mui.tsx

@@ -0,0 +1,16 @@
+import { TextField } from "@mui/material";
+import * as React from "react";
+import EyeIcon from "../../common/Icon.common";
+
+export default function MuiTextFieldTest() {
+  return (
+    <TextField
+      variant="standard"
+      helperText="Esto es un error"
+      error
+      InputProps={{
+        endAdornment: <EyeIcon />,
+      }}
+    />
+  );
+}

packages/ui/benchmark/components/Inputbase/InputBase.error.ui.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import EyeIcon from "../../common/Icon.common";
+import { InputBase } from "../../../src/InputBase/InputBase";
+
+export default function () {
+  return (
+    <InputBase
+      label="Descripción"
+      description="Esto es una descripcion"
+      errorMessage="Esto es un error"
+      rightNode={<EyeIcon />}
+    />
+  );
+}

packages/ui/benchmark/components/Inputbase/InputBase.multiple.mui.tsx

@@ -0,0 +1,16 @@
+import { TextField } from "@mui/material";
+import * as React from "react";
+import EyeIcon from "../../common/Icon.common";
+
+export default function MuiTextFieldTest() {
+  return (
+    <TextField
+      variant="standard"
+      helperText="Esto es una descripcion"
+      multiline
+      InputProps={{
+        endAdornment: <EyeIcon />,
+      }}
+    />
+  );
+}

packages/ui/benchmark/components/Inputbase/InputBase.multiple.ui.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import EyeIcon from "../../common/Icon.common";
+import { InputBase } from "../../../src/InputBase/InputBase";
+
+export default function () {
+  return (
+    <InputBase
+      label="Descripción"
+      description="Esto es una descripcion"
+      multiline
+      rightNode={<EyeIcon />}
+    />
+  );
+}

packages/ui/benchmark/components/Inputbase/InputBase.withIcon.mui.tsx

@@ -0,0 +1,15 @@
+import { TextField } from "@mui/material";
+import * as React from "react";
+import EyeIcon from "../../common/Icon.common";
+
+export default function MuiTextFieldTest() {
+  return (
+    <TextField
+      variant="standard"
+      helperText="Esto es una descripcion"
+      InputProps={{
+        endAdornment: <EyeIcon />,
+      }}
+    />
+  );
+}

packages/ui/benchmark/components/Inputbase/InputBase.withIcon.ui.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import EyeIcon from "../../common/Icon.common";
+import { InputBase } from "../../../src/InputBase/InputBase";
+
+export default function () {
+  return (
+    <InputBase
+      label="Descripción"
+      description="Esto es una descripcion"
+      rightNode={<EyeIcon />}
+    />
+  );
+}

packages/ui/benchmark/index.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import ReactBenchmark from "react-benchmark";
+import { readdir } from "fs/promises";
+
+const reactBenchmark = new ReactBenchmark();
+
+const getTestsNames = async () => {
+  try {
+    return readdir(`${__dirname}/components`);
+  } catch (e) {
+    console.error(`[Error] -> ${e}`);
+  }
+  return [];
+};
+
+const getComponentsByTestName = async (testName: string) => {
+  try {
+    return readdir(`${__dirname}/components/${testName}`);
+  } catch (e) {
+    console.error(`[Error] -> ${e}`);
+  }
+  return [];
+};
+
+const getComponentName = (componentName: string) => {
+  const pointSplit = componentName.split(".");
+  return pointSplit.slice(1).join(".");
+}
+
+const main = async () => {
+  const testList = await getTestsNames();
+
+  console.log("Running benchmarks...");
+
+  await Promise.all(testList.map(async (testName) => {
+    const componentsPaths = await getComponentsByTestName(testName);
+    console.log(`- ${testName}`);
+
+    for (const componentName of componentsPaths) {
+      const name = getComponentName(componentName);
+      const path = `${__dirname}/components/${testName}/${componentName}`;
+      const result = await reactBenchmark.run(path);
+      console.log("\t-", name, "->", result.hz, "ops/sec");
+    }
+  }));
+};
+
+main();