feat(tab): add tab liibrary and handle tabPanel

packages/tab/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

packages/tab/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

packages/tab/README.md

@@ -0,0 +1,7 @@
+# tab
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test tab` to execute the unit tests via [Jest](https://jestjs.io).

packages/tab/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "@mui-builder/tab",
+  "version": "0.0.1"
+}

packages/tab/project.json

@@ -0,0 +1,29 @@
+{
+  "name": "tab",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/tab/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/rollup:rollup",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/packages/tab",
+        "tsConfig": "packages/tab/tsconfig.lib.json",
+        "project": "packages/tab/package.json",
+        "entryFile": "packages/tab/src/index.ts",
+        "external": ["react", "react-dom", "react/jsx-runtime"],
+        "rollupConfig": "@nx/react/plugins/bundle-rollup",
+        "compiler": "babel",
+        "assets": [
+          {
+            "glob": "packages/tab/README.md",
+            "input": ".",
+            "output": "."
+          }
+        ]
+      }
+    }
+  }
+}

packages/tab/src/components/tabPanel/tabPanel.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { TabPanelProps } from './tabPanel.types';
+
+import useTabPanel from './useTabPanel';
+
+const TabPanel: React.FC<TabPanelProps> = (props) => {
+  const { show, children, getContainerProps } = useTabPanel(props);
+
+  return <div {...getContainerProps}>{show && children}</div>;
+};
+export default TabPanel;

packages/tab/src/components/tabPanel/tabPanel.types.ts

@@ -0,0 +1,5 @@
+export type TabPanelProps = {
+  children?: React.ReactNode;
+  index: number;
+  value: number | null;
+};

packages/tab/src/components/tabPanel/useTabPanel.ts

@@ -0,0 +1,22 @@
+import { TabPanelProps } from './tabPanel.types';
+
+const useTabPanel = (props: TabPanelProps) => {
+  const { children, value, index } = props;
+
+  const show = value === index;
+
+  const getContainerProps = () => ({
+    role: 'tabpanel',
+    hidden: value !== index,
+    id: `tabpanel-${index}`,
+    'aria-labelledby': `tab-${index}`,
+  });
+
+  return {
+    show,
+    children,
+    getContainerProps,
+  };
+};
+
+export default useTabPanel;

packages/tab/src/index.ts

@@ -0,0 +1,3 @@
+import TabPanel from './components/tabPanel/tabPanel';
+
+export { TabPanel };

packages/tab/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

packages/tab/tsconfig.lib.json

@@ -0,0 +1,24 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "node",
+
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

tsconfig.base.json

@@ -15,14 +15,15 @@
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
     "paths": {
-      "@mui-builder/core": ["packages/core/src/index.ts"],
-      "@mui-builder/form": ["packages/core/src/modules/form/src/index.ts"],
-      "@mui-builder/grid": ["packages/core/src/modules/grid/src/index.ts"],
       "@mui-builder/builder": [
         "packages/core/src/modules/builder/src/index.ts"
       ],
-      "@mui-builder/utils/*": ["packages/core/src/utils/*"],
-      "@mui-builder/types/*": ["packages/core/src/types/*"]
+      "@mui-builder/core": ["packages/core/src/index.ts"],
+      "@mui-builder/form": ["packages/core/src/modules/form/src/index.ts"],
+      "@mui-builder/grid": ["packages/core/src/modules/grid/src/index.ts"],
+      "@mui-builder/tab": ["packages/tab/src/index.ts"],
+      "@mui-builder/types/*": ["packages/core/src/types/*"],
+      "@mui-builder/utils/*": ["packages/core/src/utils/*"]
     }
   },
   "exclude": ["node_modules", "tmp"]