@availity/mui-tabs 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.1.0 (2023-07-14)
+
+
+### Features
+
+* **mui-tabs:** tab component initial commit ([8b20c7e](https://github.com/Availity/element/commit/8b20c7e6be1759a256f110be91f2113c011a8727))
+* **mui-tabs:** tabcontext component initial commit ([9b52724](https://github.com/Availity/element/commit/9b52724abcc70aff355377fff3b81177df271441))
+* **mui-tabs:** tablist component initial commit ([9c445a3](https://github.com/Availity/element/commit/9c445a3d963b5d52852e0a216d058c4e6d6e76b4))
+* **mui-tabs:** tabpanel component initial commit ([d3af6d7](https://github.com/Availity/element/commit/d3af6d7ab1487b39f958e8f4ecbfe73d19cf86d9))
+* **mui-tabs:** tabs component initial commit ([d4e7818](https://github.com/Availity/element/commit/d4e7818f4123d215e4cd0f5df475b5fb0eadc69a))
+
+
+### Bug Fixes
+
+* **mui-tabs:** disableRipple is not allowed on DOM elements ([ad0ada9](https://github.com/Availity/element/commit/ad0ada98922f339ec79cf64f081b54c34107c0b1))

package/README.md

@@ -0,0 +1,61 @@
+# @availity/mui-tabs
+
+> Availity MUI Tabs component to be used with @availity/element design system.
+
+[![Version](https://img.shields.io/npm/v/@availity/mui-tabs.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-tabs)
+[![NPM Downloads](https://img.shields.io/npm/dt/@availity/mui-tabs.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-tabs)
+[![Dependency Status](https://img.shields.io/librariesio/release/npm/@availity/mui-tabs?style=for-the-badge)](https://github.com/Availity/element/blob/main/packages/mui-tabs/package.json)
+
+## Documentation
+
+This package extends the MUI Tabs component: [MUI Tabs Docs](https://mui.com/components/tabs/)
+
+Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/components-tabs-introduction--docs)
+
+Availity standards for design and usage can be found in the [Availity Design Guide](https://zeroheight.com/2e36e50c7)
+
+## Installation
+
+### Import Through @availity/element (Recommended)
+
+#### NPM
+
+```bash
+npm install @availity/element
+```
+
+#### Yarn
+
+```bash
+yarn add @availity/element
+```
+
+### Direct Import
+
+#### NPM
+
+_This package has a few peer dependencies. Add `@mui/material` & `@emotion/react` to your project if not already installed._
+
+```bash
+npm install @availity/mui-tabs
+```
+
+#### Yarn
+
+```bash
+yarn add @availity/mui-tabs
+```
+
+### Usage
+
+#### Import through @availity/element
+
+```tsx
+import { Tabs } from '@availity/element';
+```
+
+#### Direct import
+
+```tsx
+import { Tabs } from '@availity/mui-tabs';
+```

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { TabsProps as TabsProps$1 } from '@mui/material';
+
+interface TabsProps extends Omit<TabsProps$1, 'centered' | 'centerRipple' | 'disableFocusRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'orientation' | 'TouchRippleProps' | 'touchRippleRef'> {
+    children?: React.ReactNode;
+}
+declare const Tabs: ({ children, ...rest }: TabsProps) => JSX.Element;
+
+export { Tabs, TabsProps };

package/dist/index.js

@@ -0,0 +1,43 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Tabs: () => Tabs
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/lib/Tabs.tsx
+var import_material = require("@mui/material");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Tabs = ({ children, ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Tabs, {
+    ...rest,
+    disableRipple: true,
+    disableTouchRipple: true,
+    orientation: "horizontal",
+    centered: false,
+    children
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tabs
+});

package/dist/index.mjs

@@ -0,0 +1,16 @@
+// src/lib/Tabs.tsx
+import { Tabs as MuiTabs } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+var Tabs = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsx(MuiTabs, {
+    ...rest,
+    disableRipple: true,
+    disableTouchRipple: true,
+    orientation: "horizontal",
+    centered: false,
+    children
+  });
+};
+export {
+  Tabs
+};

package/introduction.mdx

@@ -0,0 +1,7 @@
+import { Markdown } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs';
+import ReadMe from './README.md?raw';
+
+<Meta title="Components/Tabs/Introduction" />
+
+<Markdown>{ReadMe}</Markdown>

package/jest.config.js

@@ -0,0 +1,7 @@
+const global = require('../../jest.config.global');
+
+module.exports = {
+  ...global,
+  displayName: 'tabs',
+  coverageDirectory: '../../coverage/tabs',
+};

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@availity/mui-tabs",
+  "version": "0.1.0",
+  "description": "Availity MUI Tabs Component - part of the @availity/element design system",
+  "keywords": [
+    "react",
+    "typescript",
+    "availity",
+    "mui"
+  ],
+  "homepage": "https://availity.github.io/element/?path=/docs/components-tabs-introduction--docs",
+  "bugs": {
+    "url": "https://github.com/Availity/element/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Availity/element.git",
+    "directory": "packages/tabs"
+  },
+  "license": "MIT",
+  "author": "Availity Developers <AVOSS@availity.com>",
+  "browser": "./dist/index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts",
+    "dev": "tsup src/index.ts --format esm,cjs --watch --dts",
+    "clean": "rm -rf dist",
+    "clean:nm": "rm -rf node_modules",
+    "bundlesize": "bundlesize",
+    "publish": "yarn npm publish --tolerate-republish --access public",
+    "publish:canary": "yarn npm publish --access public --tag canary"
+  },
+  "dependencies": {
+    "@mui/lab": "^5.0.0-alpha.121"
+  },
+  "devDependencies": {
+    "@availity/mui-divider": "^0.3.0",
+    "@mui/material": "^5.11.9",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tsup": "^5.12.7",
+    "typescript": "^4.6.4"
+  },
+  "peerDependencies": {
+    "@mui/material": "^5.11.9",
+    "react": ">=16.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/project.json

@@ -0,0 +1,41 @@
+{
+  "name": "mui-tabs",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/tabs/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "options": {
+        "eslintConfig": ".eslintrc.json",
+        "lintFilePatterns": ["packages/tabs/**/*.{js,ts}"],
+        "silent": false,
+        "fix": false,
+        "cache": true,
+        "cacheLocation": "./node_modules/.cache/tabs/.eslintcache",
+        "maxWarnings": -1,
+        "quiet": false,
+        "noEslintrc": false,
+        "hasTypeAwareRules": true,
+        "cacheStrategy": "metadata"
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["coverage/tabs"],
+      "options": {
+        "jestConfig": "packages/tabs/jest.config.js",
+        "passWithNoTests": true
+      }
+    },
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "preset": "conventional",
+        "commitMessageFormat": "chore(${projectName}): release version ${version} [skip ci]",
+        "tagPrefix": "@availity/${projectName}@"
+      }
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/Tabs';

package/src/lib/Tab.stories.tsx

@@ -0,0 +1,39 @@
+// Each exported component in the package should have its own stories file
+
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tabs } from './Tabs';
+import { Tab, TabProps } from './Tab';
+
+const meta: Meta<typeof Tabs> = {
+  title: 'Components/Tabs/Tab',
+  component: Tabs,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
+
+export const _Tab: StoryObj<typeof Tab> = {
+  render: (args: TabProps) => {
+    const [value, setValue] = useState(0);
+
+    const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+      setValue(newValue);
+    };
+    return (
+      <Tabs value={value} onChange={handleChange}>
+        <Tab label="Item One" {...args} {...a11yProps(0)} />
+        <Tab label="Item Two" {...args} {...a11yProps(1)} />
+        <Tab label="Item Three" {...args} {...a11yProps(2)} disabled />
+      </Tabs>
+    );
+  },
+  args: {},
+};

package/src/lib/Tab.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import { Tab } from './Tab';
+
+describe('Tab', () => {
+  test('should render successfully', () => {
+    const { getByTitle } = render(<Tab title="Test" />);
+    expect(getByTitle('Test')).toBeTruthy();
+  });
+});

package/src/lib/Tab.tsx

@@ -0,0 +1,17 @@
+import { Tab as MuiTab, TabProps as MuiTabProps } from '@mui/material';
+
+export type TabProps = Omit<
+  MuiTabProps,
+  | 'centerRipple'
+  | 'disableFocusRipple'
+  | 'disableRipple'
+  | 'disableTouchRipple'
+  | 'focusRipple'
+  | 'icon'
+  | 'iconPosition'
+  | 'TouchRippleProps'
+>;
+
+export const Tab = (props: TabProps): JSX.Element => {
+  return <MuiTab {...props} disableRipple disableFocusRipple disableTouchRipple />;
+};

package/src/lib/TabContext.stories.tsx

@@ -0,0 +1,41 @@
+// Each exported component in the package should have its own stories file
+
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { TabContext, TabContextProps } from './TabContext';
+import { Divider } from '@availity/mui-divider';
+import { TabList } from './TabList';
+import { Tab } from './Tab';
+import { TabPanel } from './TabPanel';
+
+const meta: Meta<typeof TabContext> = {
+  title: 'Components/Tabs/TabContext',
+  component: TabContext,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _TabContext: StoryObj<typeof TabContext> = {
+  render: (args: TabContextProps) => {
+    const [value, setValue] = useState('1');
+
+    const handleChange = (event: React.SyntheticEvent, newValue: string) => {
+      setValue(newValue);
+    };
+    return (
+      <TabContext {...args} value={value}>
+        <TabList onChange={handleChange} aria-label="lab API tabs example">
+          <Tab label="Item One" value="1" />
+          <Tab label="Item Two" value="2" />
+          <Tab label="Item Three" value="3" />
+        </TabList>
+        <Divider />
+        <TabPanel value="1">Item One</TabPanel>
+        <TabPanel value="2">Item Two</TabPanel>
+        <TabPanel value="3">Item Three</TabPanel>
+      </TabContext>
+    );
+  },
+  args: {},
+};

package/src/lib/TabContext.test.tsx

@@ -0,0 +1,25 @@
+import { render } from '@testing-library/react';
+import { TabContext } from './TabContext';
+import { Divider } from '@availity/mui-divider';
+import { TabList } from './TabList';
+import { Tab } from './Tab';
+import { TabPanel } from './TabPanel';
+
+describe('TabContext', () => {
+  test('should render successfully', () => {
+    const { getByText } = render(
+      <TabContext value="1">
+        <TabList aria-label="lab API tabs example">
+          <Tab label="Item One" value="1" />
+          <Tab label="Item Two" value="2" />
+          <Tab label="Item Three" value="3" />
+        </TabList>
+        <Divider />
+        <TabPanel value="1">This is item One</TabPanel>
+        <TabPanel value="2">This is item Two</TabPanel>
+        <TabPanel value="3">This is item Three</TabPanel>
+      </TabContext>
+    );
+    expect(getByText('This is item One')).toBeTruthy();
+  });
+});

package/src/lib/TabContext.tsx

@@ -0,0 +1,9 @@
+import { TabContext as MuiTabContext, TabContextProps as MuiTabContextProps } from '@mui/lab';
+
+export interface TabContextProps extends MuiTabContextProps {
+  children?: React.ReactNode;
+}
+
+export const TabContext = ({ children, ...rest }: TabContextProps): JSX.Element => {
+  return <MuiTabContext {...rest}>{children}</MuiTabContext>;
+};

package/src/lib/TabList.stories.tsx

@@ -0,0 +1,35 @@
+// Each exported component in the package should have its own stories file
+
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { TabList, TabListProps } from './TabList';
+import { Tab } from './Tab';
+import { TabContext } from './TabContext';
+
+const meta: Meta<typeof TabList> = {
+  title: 'Components/Tabs/TabList',
+  component: TabList,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _TabList: StoryObj<typeof TabList> = {
+  render: (args: TabListProps) => {
+    const [value, setValue] = useState('1');
+
+    const handleChange = (event: React.SyntheticEvent, newValue: string) => {
+      setValue(newValue);
+    };
+    return (
+      <TabContext value={value}>
+        <TabList {...args} onChange={handleChange} aria-label="lab API tabs example">
+          <Tab label="Item One" value="1" />
+          <Tab label="Item Two" value="2" />
+          <Tab label="Item Three" value="3" />
+        </TabList>
+      </TabContext>
+    );
+  },
+  args: {},
+};

package/src/lib/TabList.test.tsx

@@ -0,0 +1,19 @@
+import { render } from '@testing-library/react';
+import { TabList } from './TabList';
+import { Tab } from './Tab';
+import { TabContext } from './TabContext';
+
+describe('TabList', () => {
+  test('should render successfully', () => {
+    const { getByRole } = render(
+      <TabContext value={'1'}>
+        <TabList aria-label="lab API tabs example">
+          <Tab label="Item One" value="1" />
+          <Tab label="Item Two" value="2" />
+          <Tab label="Item Three" value="3" />
+        </TabList>
+      </TabContext>
+    );
+    expect(getByRole('tablist')).toBeTruthy();
+  });
+});

package/src/lib/TabList.tsx

@@ -0,0 +1,24 @@
+import { TabList as MuiTabList, TabListProps as MuiTabListProps } from '@mui/lab';
+
+export interface TabListProps
+  extends Omit<
+    MuiTabListProps,
+    | 'centered'
+    | 'centerRipple'
+    | 'disableRipple'
+    | 'disableTouchRipple'
+    | 'focusRipple'
+    | 'orientation'
+    | 'TouchRippleProps'
+    | 'touchRippleRef'
+  > {
+  children?: React.ReactNode;
+}
+
+export const TabList = ({ children, ...rest }: TabListProps): JSX.Element => {
+  return (
+    <MuiTabList {...rest} disableRipple disableTouchRipple orientation="horizontal" centered={false}>
+      {children}
+    </MuiTabList>
+  );
+};

package/src/lib/TabPanel.stories.tsx

@@ -0,0 +1,33 @@
+// Each exported component in the package should have its own stories file
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { TabContext } from './TabContext';
+import { Divider } from '@availity/mui-divider';
+import { TabList } from './TabList';
+import { Tab } from './Tab';
+import { TabPanel, TabPanelProps } from './TabPanel';
+
+const meta: Meta<typeof TabPanel> = {
+  title: 'Components/Tabs/TabPanel',
+  component: TabContext,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _TabPanel: StoryObj<typeof TabPanel> = {
+  render: (args: TabPanelProps) => {
+    return (
+      <TabContext value="1">
+        <TabList aria-label="lab API tabs example">
+          <Tab label="Item One" value="1" />
+        </TabList>
+        <Divider />
+        <TabPanel {...args} value="1" />
+      </TabContext>
+    );
+  },
+  args: {
+    children: 'Item One',
+  },
+};

package/src/lib/TabPanel.test.tsx

@@ -0,0 +1,25 @@
+import { render } from '@testing-library/react';
+import { TabContext } from './TabContext';
+import { Divider } from '@availity/mui-divider';
+import { TabList } from './TabList';
+import { Tab } from './Tab';
+import { TabPanel } from './TabPanel';
+
+describe('TabContext', () => {
+  test('should render successfully', () => {
+    const { getByText } = render(
+      <TabContext value="1">
+        <TabList aria-label="lab API tabs example">
+          <Tab label="Item One" value="1" />
+          <Tab label="Item Two" value="2" />
+          <Tab label="Item Three" value="3" />
+        </TabList>
+        <Divider />
+        <TabPanel value="1">This is item One</TabPanel>
+        <TabPanel value="2">This is item Two</TabPanel>
+        <TabPanel value="3">This is item Three</TabPanel>
+      </TabContext>
+    );
+    expect(getByText('This is item One')).toBeTruthy();
+  });
+});

package/src/lib/TabPanel.tsx

@@ -0,0 +1,9 @@
+import { TabPanel as MuiTabPanel, TabPanelProps as MuiTabPanelProps } from '@mui/lab';
+
+export interface TabPanelProps extends MuiTabPanelProps {
+  children?: React.ReactNode;
+}
+
+export const TabPanel = ({ children, ...rest }: TabPanelProps): JSX.Element => {
+  return <MuiTabPanel {...rest}>{children}</MuiTabPanel>;
+};

package/src/lib/Tabs.stories.tsx

@@ -0,0 +1,38 @@
+// Each exported component in the package should have its own stories file
+
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tabs, TabsProps } from './Tabs';
+import { Tab } from './Tab';
+
+const meta: Meta<typeof Tabs> = {
+  title: 'Components/Tabs/Tabs',
+  component: Tabs,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
+
+export const _Tabs: StoryObj<typeof Tabs> = {
+  render: (args: TabsProps) => {
+    const [value, setValue] = useState(0);
+
+    const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+      setValue(newValue);
+    };
+    return (
+      <Tabs {...args} value={value} onChange={handleChange}>
+        <Tab label="Item One" {...a11yProps(0)} />
+        <Tab label="Item Two" {...a11yProps(1)} />
+        <Tab label="Item Three" {...a11yProps(2)} />
+      </Tabs>
+    );
+  },
+};

package/src/lib/Tabs.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import { Tabs } from './Tabs';
+
+describe('Tabs', () => {
+  test('should render successfully', () => {
+    const { getByRole } = render(<Tabs />);
+    expect(getByRole('tablist')).toBeTruthy();
+  });
+});

package/src/lib/Tabs.tsx

@@ -0,0 +1,25 @@
+import { Tabs as MuiTabs, TabsProps as MuiTabsProps } from '@mui/material';
+
+export interface TabsProps
+  extends Omit<
+    MuiTabsProps,
+    | 'centered'
+    | 'centerRipple'
+    | 'disableFocusRipple'
+    | 'disableRipple'
+    | 'disableTouchRipple'
+    | 'focusRipple'
+    | 'orientation'
+    | 'TouchRippleProps'
+    | 'touchRippleRef'
+  > {
+  children?: React.ReactNode;
+}
+
+export const Tabs = ({ children, ...rest }: TabsProps): JSX.Element => {
+  return (
+    <MuiTabs {...rest} disableRipple disableTouchRipple orientation="horizontal" centered={false}>
+      {children}
+    </MuiTabs>
+  );
+};

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node", "@testing-library/jest-dom"],
+    "allowJs": true
+  },
+  "include": ["**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
+}