@availity/mui-stepper 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.1.0 (2024-07-22)
+
+### Dependency Updates
+
+* `mui-button` updated to version `0.1.0`
+* `mui-layout` updated to version `0.1.0`
+* `mui-typography` updated to version `0.1.0`
+* `mui-icon` updated to version `0.1.0`
+
+### Features
+
+* **mui-stepper:** add Stepper component ([04e21e8](https://github.com/Availity/element/commit/04e21e8f5117c79f0e110308482ed1277a9a16e7))

package/README.md

@@ -0,0 +1,102 @@
+# @availity/mui-stepper
+
+> Availity MUI Stepper component to be used with @availity/element design system.
+
+[![Version](https://img.shields.io/npm/v/@availity/mui-stepper.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-stepper)
+[![NPM Downloads](https://img.shields.io/npm/dt/@availity/mui-stepper.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-stepper)
+[![Dependency Status](https://img.shields.io/librariesio/release/npm/@availity/mui-stepper?style=for-the-badge)](https://github.com/Availity/element/blob/main/packages/mui-stepper/package.json)
+
+## Documentation
+
+This package extends the MUI Stepper component: [MUI Stepper Docs](https://mui.com/components/stepper/)
+
+Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/components-stepper-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-stepper
+```
+
+#### Yarn
+
+```bash
+yarn add @availity/mui-stepper
+```
+
+### Usage
+
+#### Import through @availity/element
+
+```tsx
+import { Stepper } from '@availity/element';
+```
+
+#### Direct import
+
+```tsx
+import { Stepper } from '@availity/mui-stepper';
+```
+
+#### Simple Stepper
+
+```jsx
+import { useState } from 'react';
+import { Stepper, Step, StepLabel } from '@availity/element';
+
+const steps = ['Step 1', 'Step 2', 'Step 3'];
+
+const Example = () => {
+  const [activeStep, setActiveStep] = useState(0);
+
+  const handleBack = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep - 1);
+  };
+
+  const handleNext = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep + 1);
+  };
+
+  return (
+    <>
+      <Stepper activeStep={0}>
+        {steps.map((label, index) => {
+          return (
+            <Step key={label}>
+              <StepLabel>{label}</StepLabel>
+            </Step>
+          );
+        })}
+      </Stepper>
+      <Button color="secondary" disabled={activeStep === 0} onClick={handleBack} sx={{ mr: 1 }}>
+        Back
+      </Button>
+      <Button color={activeStep === steps.length - 1 ? 'primary' : 'secondary'} onClick={handleNext}>
+        {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
+      </Button>
+    </>
+  );
+};
+```

package/dist/index.d.mts

@@ -0,0 +1,6 @@
+import { StepperProps as StepperProps$1 } from '@mui/material/Stepper';
+
+type StepperProps = Omit<StepperProps$1, 'alternativeLabel' | 'elevation'>;
+declare const Stepper: ({ children, orientation, ...rest }: StepperProps) => JSX.Element;
+
+export { Stepper, type StepperProps };

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import { StepperProps as StepperProps$1 } from '@mui/material/Stepper';
+
+type StepperProps = Omit<StepperProps$1, 'alternativeLabel' | 'elevation'>;
+declare const Stepper: ({ children, orientation, ...rest }: StepperProps) => JSX.Element;
+
+export { Stepper, type StepperProps };

package/dist/index.js

@@ -0,0 +1,77 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Stepper: () => Stepper
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/lib/Stepper.tsx
+var import_Stepper = __toESM(require("@mui/material/Stepper"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var Stepper = (_a) => {
+  var _b = _a, { children, orientation } = _b, rest = __objRest(_b, ["children", "orientation"]);
+  const alternativeLabel = orientation !== "vertical";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Stepper.default, __spreadProps(__spreadValues({}, rest), { orientation, alternativeLabel, children }));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Stepper
+});

package/dist/index.mjs

@@ -0,0 +1,43 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/lib/Stepper.tsx
+import MuiStepper from "@mui/material/Stepper";
+import { jsx } from "react/jsx-runtime";
+var Stepper = (_a) => {
+  var _b = _a, { children, orientation } = _b, rest = __objRest(_b, ["children", "orientation"]);
+  const alternativeLabel = orientation !== "vertical";
+  return /* @__PURE__ */ jsx(MuiStepper, __spreadProps(__spreadValues({}, rest), { orientation, alternativeLabel, children }));
+};
+export {
+  Stepper
+};

package/introduction.stories.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/Stepper/Introduction" />
+
+<Markdown>{ReadMe}</Markdown>

package/jest.config.js

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

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@availity/mui-stepper",
+  "version": "0.1.0",
+  "description": "Availity MUI Stepper Component - part of the @availity/element design system",
+  "keywords": [
+    "react",
+    "typescript",
+    "availity",
+    "mui"
+  ],
+  "homepage": "https://availity.github.io/element/?path=/docs/components-stepper-introduction--docs",
+  "bugs": {
+    "url": "https://github.com/Availity/element/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Availity/element.git",
+    "directory": "packages/stepper"
+  },
+  "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",
+    "publish": "yarn npm publish --tolerate-republish --access public",
+    "publish:canary": "yarn npm publish --access public --tag canary"
+  },
+  "dependencies": {
+    "@availity/mui-icon": "^0.9.0"
+  },
+  "devDependencies": {
+    "@availity/mui-button": "^0.6.8",
+    "@availity/mui-layout": "^0.1.6",
+    "@availity/mui-typography": "^0.2.0",
+    "@mui/material": "^5.15.15",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.5"
+  },
+  "peerDependencies": {
+    "@mui/material": "^5.11.9",
+    "react": ">=16.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/project.json

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

package/src/index.ts

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

package/src/lib/Step.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react';
+
+import { Step } from './Step';
+
+describe('Step', () => {
+  test('should render successfully', () => {
+    render(<Step>Test</Step>);
+
+    expect(screen.getByText('Test')).toBeTruthy();
+  });
+});

package/src/lib/Step.tsx

@@ -0,0 +1,7 @@
+import MuiStep, { StepProps as MuiStepProps } from '@mui/material/Step';
+
+export type StepProps = MuiStepProps;
+
+export const Step = ({ children, ...rest }: StepProps): JSX.Element => {
+  return <MuiStep {...rest}>{children}</MuiStep>;
+};

package/src/lib/StepButton.test.tsx

@@ -0,0 +1,20 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import { StepButton } from './StepButton';
+
+describe('StepButton', () => {
+  test('should render successfully', () => {
+    render(<StepButton>Next</StepButton>);
+
+    expect(screen.getByText('Next')).toBeTruthy();
+  });
+
+  test('should handle clicks', () => {
+    const fn = jest.fn();
+    render(<StepButton onClick={fn}>Next</StepButton>);
+
+    fireEvent.click(screen.getByText('Next'));
+
+    expect(fn).toHaveBeenCalled();
+  });
+});

package/src/lib/StepButton.tsx

@@ -0,0 +1,7 @@
+import MuiStepButton, { StepButtonProps as MuiStepButtonProps } from '@mui/material/StepButton';
+
+export type StepButtonProps = MuiStepButtonProps;
+
+export const StepButton = ({ children, ...rest }: StepButtonProps): JSX.Element => {
+  return <MuiStepButton {...rest}>{children}</MuiStepButton>;
+};

package/src/lib/StepConnector.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react';
+
+import { StepConnector } from './StepConnector';
+
+describe('StepConnector', () => {
+  test('should render successfully', () => {
+    render(<StepConnector data-testid="connector" />);
+
+    expect(screen.getByTestId('connector').className).toContain('MuiStepConnector-root');
+  });
+});

package/src/lib/StepConnector.tsx

@@ -0,0 +1,7 @@
+import MuiStepConnector, { StepConnectorProps as MuiStepConnectorProps } from '@mui/material/StepConnector';
+
+export type StepConnectorProps = MuiStepConnectorProps;
+
+export const StepConnector = (props: StepConnectorProps): JSX.Element => {
+  return <MuiStepConnector {...props} />;
+};

package/src/lib/StepContent.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react';
+
+import { StepContent } from './StepContent';
+
+describe('StepContent', () => {
+  test('should render successfully', () => {
+    render(<StepContent data-testid="content" />);
+
+    expect(screen.getByTestId('content').className).toContain('MuiStepContent-root');
+  });
+});

package/src/lib/StepContent.tsx

@@ -0,0 +1,7 @@
+import MuiStepContent, { StepContentProps as MuiStepContentProps } from '@mui/material/StepContent';
+
+export type StepContentProps = MuiStepContentProps;
+
+export const StepContent = ({ children, ...rest }: StepContentProps): JSX.Element => {
+  return <MuiStepContent {...rest}>{children}</MuiStepContent>;
+};

package/src/lib/StepIcon.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react';
+
+import { StepIcon } from './StepIcon';
+
+describe('StepIcon', () => {
+  test('should render successfully', () => {
+    render(<StepIcon icon={1} />);
+
+    expect(screen.getByText('1')).toBeTruthy();
+  });
+});

package/src/lib/StepIcon.tsx

@@ -0,0 +1,23 @@
+import MuiStepIcon, { StepIconProps as MuiStepIconProps } from '@mui/material/StepIcon';
+import { CheckCircleIcon, WarningCircleIcon } from '@availity/mui-icon';
+import { SvgIconProps } from '@mui/material/SvgIcon';
+
+type Tag = ((props: SvgIconProps) => JSX.Element) | null;
+
+declare module '@mui/material/StepIcon' {
+  interface StepIconProps {
+    as?: Tag;
+    warning?: boolean;
+  }
+}
+
+export type StepIconProps = { warning?: boolean } & MuiStepIconProps;
+
+export const StepIcon = ({ error, completed, warning, ...rest }: StepIconProps): JSX.Element => {
+  let tag: Tag = null;
+  if (error) tag = WarningCircleIcon;
+  if (warning) tag = (props: SvgIconProps) => <WarningCircleIcon color="warning" {...props} />;
+  if (completed) tag = CheckCircleIcon;
+
+  return <MuiStepIcon {...rest} error={error} completed={completed} as={tag} />;
+};

package/src/lib/StepLabel.test.tsx

@@ -0,0 +1,11 @@
+import { render } from '@testing-library/react';
+
+import { StepLabel } from './StepLabel';
+
+describe('StepLabel', () => {
+  test('should render successfully', () => {
+    const { getByText } = render(<StepLabel>step 1</StepLabel>);
+
+    expect(getByText('step 1')).toBeTruthy();
+  });
+});

package/src/lib/StepLabel.tsx

@@ -0,0 +1,15 @@
+import MuiStepLabel, { StepLabelProps as MuiStepLabelProps } from '@mui/material/StepLabel';
+
+import { StepIcon } from './StepIcon';
+
+export type StepLabelProps = {
+  warning?: boolean;
+} & MuiStepLabelProps;
+
+export const StepLabel = ({ children, error, warning, ...rest }: StepLabelProps): JSX.Element => {
+  return (
+    <MuiStepLabel StepIconProps={{ error, warning }} StepIconComponent={StepIcon} error={error} {...rest}>
+      {children}
+    </MuiStepLabel>
+  );
+};

package/src/lib/Stepper.stories.tsx

@@ -0,0 +1,162 @@
+// Each exported component in the package should have its own stories file
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '@availity/mui-button';
+import { Typography } from '@availity/mui-typography';
+import { Box } from '@availity/mui-layout';
+
+import { Stepper, StepperProps } from './Stepper';
+import { Step } from './Step';
+import { StepLabel } from './StepLabel';
+
+const meta: Meta<typeof Stepper> = {
+  title: 'Components/Stepper/Stepper',
+  component: Stepper,
+  tags: ['autodocs'],
+  argTypes: {
+    orientation: {
+      options: ['horizontal', 'vertical'],
+    },
+  },
+};
+
+export default meta;
+
+const steps = ['Select', 'Another Step', 'Form Data', 'Create a new one'];
+
+export const _Stepper: StoryObj<typeof Stepper> = {
+  render: (args: StepperProps) => {
+    const [activeStep, setActiveStep] = useState(0);
+    const [skipped, setSkipped] = useState(new Set<number>());
+
+    const isStepOptional = (step: number) => {
+      return step > 1;
+    };
+
+    const isStepSkipped = (step: number) => {
+      return skipped.has(step);
+    };
+
+    const isStepError = (step: number) => {
+      return step === 2 && activeStep < 2;
+    };
+
+    const isStepWarning = (step: number) => {
+      return step === 3 && activeStep < 3;
+    };
+
+    const handleNext = () => {
+      let newSkipped = skipped;
+      if (isStepSkipped(activeStep)) {
+        newSkipped = new Set(newSkipped.values());
+        newSkipped.delete(activeStep);
+      }
+
+      setActiveStep((prevActiveStep) => prevActiveStep + 1);
+      setSkipped(newSkipped);
+    };
+
+    const handleBack = () => {
+      setActiveStep((prevActiveStep) => prevActiveStep - 1);
+    };
+
+    const handleSkip = () => {
+      if (!isStepOptional(activeStep)) {
+        // You probably want to guard against something like this,
+        // it should never occur unless someone's actively trying to break something.
+        throw new Error("You can't skip a step that isn't optional.");
+      }
+
+      setActiveStep((prevActiveStep) => prevActiveStep + 1);
+      setSkipped((prevSkipped) => {
+        const newSkipped = new Set(prevSkipped.values());
+        newSkipped.add(activeStep);
+        return newSkipped;
+      });
+    };
+
+    const handleReset = () => {
+      setActiveStep(0);
+    };
+
+    return (
+      <Box maxWidth="75vw" marginX="auto">
+        <Stepper activeStep={activeStep} {...args}>
+          {steps.map((label, index) => {
+            const stepProps: { completed?: boolean } = {};
+            const labelProps: { optional?: React.ReactNode; error?: boolean; warning?: boolean } = {};
+
+            if (isStepOptional(index)) {
+              labelProps.optional = <Typography variant="caption">Optional</Typography>;
+            }
+
+            if (isStepSkipped(index)) {
+              stepProps.completed = false;
+            }
+
+            if (isStepError(index)) {
+              labelProps.error = true;
+            }
+
+            if (isStepWarning(index)) {
+              labelProps.warning = true;
+            }
+
+            return (
+              <Step key={label} {...stepProps}>
+                <StepLabel {...labelProps}>{label}</StepLabel>
+              </Step>
+            );
+          })}
+        </Stepper>
+        {activeStep === steps.length ? (
+          <>
+            <Typography sx={{ mt: 2, mb: 1 }}>All steps completed - you&apos;re finished</Typography>
+            <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+              <Box sx={{ flex: '1 1 auto' }} />
+              <Button color="tertiary" onClick={handleReset}>
+                Reset
+              </Button>
+            </Box>
+          </>
+        ) : (
+          <>
+            <Typography sx={{ mt: 2, mb: 1 }}>Step {activeStep + 1}</Typography>
+            <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+              <Button color="secondary" disabled={activeStep === 0} onClick={handleBack} sx={{ mr: 1 }}>
+                Back
+              </Button>
+              <Box sx={{ flex: '1 1 auto' }} />
+              {isStepOptional(activeStep) && (
+                <Button color="secondary" onClick={handleSkip} sx={{ mr: 1 }}>
+                  Skip
+                </Button>
+              )}
+              <Button color={activeStep === steps.length - 1 ? 'primary' : 'secondary'} onClick={handleNext}>
+                {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
+              </Button>
+            </Box>
+          </>
+        )}
+      </Box>
+    );
+  },
+  args: {},
+};
+
+export const _StepLabel: StoryObj<typeof StepLabel> = {
+  render: (args) => <StepLabel {...args} />,
+  args: {
+    children: 'Step Label',
+  },
+};
+
+export const _Step: StoryObj<typeof Step> = {
+  render: (args) => (
+    <Stepper>
+      <Step {...args}>
+        <StepLabel>Label</StepLabel>
+      </Step>
+    </Stepper>
+  ),
+};

package/src/lib/Stepper.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react';
+
+import { Stepper } from './Stepper';
+import { Step } from './Step';
+import { StepLabel } from './StepLabel';
+
+describe('Stepper', () => {
+  test('should render successfully', () => {
+    render(
+      <Stepper activeStep={0}>
+        <Step>
+          <StepLabel>step 1</StepLabel>
+        </Step>
+      </Stepper>
+    );
+
+    expect(screen.getByText('step 1')).toBeTruthy();
+  });
+});

package/src/lib/Stepper.tsx

@@ -0,0 +1,13 @@
+import MuiStepper, { StepperProps as MuiStepperProps } from '@mui/material/Stepper';
+
+export type StepperProps = Omit<MuiStepperProps, 'alternativeLabel' | 'elevation'>;
+
+export const Stepper = ({ children, orientation, ...rest }: StepperProps): JSX.Element => {
+  const alternativeLabel = orientation !== 'vertical';
+
+  return (
+    <MuiStepper {...rest} orientation={orientation} alternativeLabel={alternativeLabel}>
+      {children}
+    </MuiStepper>
+  );
+};

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"]
+}