feat: stepper component (#832)

.changeset/honest-readers-nail.md

@@ -0,0 +1,7 @@
+---
+"@mochi-ui/stepper": major
+"@mochi-ui/theme": minor
+"@mochi-ui/core": minor
+---
+
+Add Stepper component

packages/components/stepper/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['custom/react'],
+}

packages/components/stepper/README.md

@@ -0,0 +1,33 @@
+# @mochi-ui/stepper
+
+The Stepper component is used for ...
+
+> This is an internal utility, not intended for public usage.
+
+For further details, visit our
+[Stepper Documentation](https://ds.mochiui.com/?path=/docs/data-display-stepper--docs).
+
+## Installation
+
+Feel free to use the package manager of your choice:
+
+```sh
+# Using PNPM
+pnpm i @mochi-ui/stepper
+
+# Using NPM
+npm i @mochi-ui/stepper
+
+# Using Yarn
+yarn add @mochi-ui/stepper
+```
+
+## Contribution
+
+We welcome your contributions! For guidance on how to contribute, please refer
+to our [Contribution Guidelines](/CONTRIBUTING.md).
+
+## Licence
+
+This project is licensed under the terms of the
+[MIT license](https://choosealicense.com/licenses/mit/).

packages/components/stepper/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@mochi-ui/stepper",
+  "version": "0.0.1",
+  "description": "A stepper component is used to indicate progress through a multi-step process.",
+  "keywords": [
+    "stepper"
+  ],
+  "author": "@consolelabs",
+  "homepage": "https://ds.mochiui.com",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/consolelabs/mochi-ui.git",
+    "directory": "packages/components/stepper"
+  },
+  "bugs": {
+    "url": "https://github.com/consolelabs/mochi-ui.git"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "pnpm build:fast -- --watch",
+    "lint": "eslint src/ --cache",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "@mochi-ui/icons": "workspace:*",
+    "@mochi-ui/theme": "workspace:*",
+    "@mochi-ui/typography": "workspace:*",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0"
+  },
+  "devDependencies": {
+    "clean-package": "^2.2.0",
+    "eslint-config-custom": "workspace:*",
+    "prettier": "^3.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsconfig": "workspace:*"
+  },
+  "clean-package": "../../../clean-package.config.json"
+}

packages/components/stepper/src/context.ts

@@ -0,0 +1,50 @@
+import { createContext, useContext } from 'react'
+
+export type StepItemStatus = 'current' | 'complete' | 'incomplete'
+
+type StepperContextValue = {
+  /**
+   * The status of the step
+   */
+  status: StepItemStatus
+  /**
+   * The total number of steps
+   */
+  count: number
+  /**
+   * The index of the step
+   */
+  step: number
+  /**
+   * Whether the step is the last step
+   */
+  isLast?: boolean
+  /**
+   * Whether the step is the first step
+   */
+  isFirst?: boolean
+  /**
+   * Whether the step is loading
+   */
+  isLoading?: boolean
+  /**
+   * Whether the step has an error
+   */
+  isError?: boolean
+  /**
+   * The orientation of the stepper
+   * @default 'vertical'
+   */
+  orientation: 'horizontal' | 'vertical'
+}
+
+const StepperContext = createContext<StepperContextValue>({
+  status: 'incomplete',
+  count: 0,
+  step: 0,
+  orientation: 'vertical',
+})
+
+const useStepperContext = () => useContext(StepperContext)
+
+export { type StepperContextValue, StepperContext, useStepperContext }

packages/components/stepper/src/index.ts

@@ -0,0 +1,8 @@
+// export types, component
+export * from './stepper'
+export * from './step-item'
+export * from './step-indicator'
+export * from './step-content'
+export * from './step-title'
+export * from './step-description'
+export * from './step-separator'

packages/components/stepper/src/step-content.tsx

@@ -0,0 +1,26 @@
+import { PropsWithChildren, forwardRef } from 'react'
+import { stepper } from '@mochi-ui/theme'
+
+const { stepContentClsx } = stepper
+
+interface StepContentProps extends PropsWithChildren {
+  className?: string
+}
+
+const StepContent = forwardRef<HTMLDivElement, StepContentProps>(
+  (props, ref) => {
+    const { className, ...restProps } = props
+
+    return (
+      <div
+        ref={ref}
+        className={stepContentClsx({ className })}
+        {...restProps}
+      />
+    )
+  },
+)
+
+StepContent.displayName = 'StepContent'
+
+export { StepContent, type StepContentProps }

packages/components/stepper/src/step-description.tsx

@@ -0,0 +1,29 @@
+import { PropsWithChildren, forwardRef } from 'react'
+import { stepper } from '@mochi-ui/theme'
+import { Typography } from '@mochi-ui/typography'
+
+const { stepDescriptionClsx } = stepper
+
+interface StepDescriptionProps extends PropsWithChildren {
+  className?: string
+}
+
+const StepDescription = forwardRef<HTMLDivElement, StepDescriptionProps>(
+  (props, ref) => {
+    const { className, ...restProps } = props
+
+    return (
+      <div ref={ref}>
+        <Typography
+          level="p5"
+          className={stepDescriptionClsx({ className })}
+          {...restProps}
+        />
+      </div>
+    )
+  },
+)
+
+StepDescription.displayName = 'StepDescription'
+
+export { StepDescription, type StepDescriptionProps }

packages/components/stepper/src/step-indicator.tsx

@@ -0,0 +1,51 @@
+import { PropsWithChildren, forwardRef } from 'react'
+import { stepper } from '@mochi-ui/theme'
+import { CheckLine, CloseLine, SpinnerLine } from '@mochi-ui/icons'
+import { useStepperContext } from './context'
+
+const { stepIndicatorClsx } = stepper
+
+interface StepIndicatorProps extends PropsWithChildren {
+  className?: string
+}
+
+const StepIndicator = forwardRef<HTMLDivElement, StepIndicatorProps>(
+  (props, ref) => {
+    const { className, ...restProps } = props
+    const { step, status: stepStatus, isLoading, isError } = useStepperContext()
+
+    let status: 'loading' | 'error' | 'success' | 'current' | 'incomplete' =
+      'current'
+    let children = null
+    if (isLoading) {
+      status = 'loading'
+      children = <SpinnerLine className="w-full h-full text-primary-solid" />
+    } else if (isError) {
+      status = 'error'
+      children = <CloseLine className="w-4 h-4 text-text-contrast" />
+    } else if (stepStatus === 'complete') {
+      status = 'success'
+      children = <CheckLine className="w-4 h-4 text-text-contrast" />
+    } else {
+      status = stepStatus
+      children = step
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={stepIndicatorClsx({
+          className,
+          status,
+        })}
+        {...restProps}
+      >
+        {children}
+      </div>
+    )
+  },
+)
+
+StepIndicator.displayName = 'StepIndicator'
+
+export { StepIndicator, type StepIndicatorProps }

packages/components/stepper/src/step-item.tsx

@@ -0,0 +1,26 @@
+import { PropsWithChildren, forwardRef } from 'react'
+import { stepper } from '@mochi-ui/theme'
+import { useStepperContext } from './context'
+
+const { stepClsx } = stepper
+
+interface StepProps extends PropsWithChildren {
+  className?: string
+}
+
+const Step = forwardRef<HTMLDivElement, StepProps>((props, ref) => {
+  const { className, ...restProps } = props
+  const { isLast, orientation } = useStepperContext()
+
+  return (
+    <div
+      ref={ref}
+      className={stepClsx({ className, isLast, orientation })}
+      {...restProps}
+    />
+  )
+})
+
+Step.displayName = 'Step'
+
+export { Step, type StepProps }

packages/components/stepper/src/step-separator.tsx

@@ -0,0 +1,28 @@
+import { PropsWithChildren, forwardRef } from 'react'
+import { stepper } from '@mochi-ui/theme'
+import { useStepperContext } from './context'
+
+const { stepSeparatorClsx } = stepper
+
+interface StepSeparatorProps extends PropsWithChildren {
+  className?: string
+}
+
+const StepSeparator = forwardRef<HTMLDivElement, StepSeparatorProps>(
+  (props, ref) => {
+    const { className, ...restProps } = props
+    const { isLast, orientation } = useStepperContext()
+
+    return (
+      <div
+        ref={ref}
+        className={stepSeparatorClsx({ className, isLast, orientation })}
+        {...restProps}
+      />
+    )
+  },
+)
+
+StepSeparator.displayName = 'StepTitle'
+
+export { StepSeparator, type StepSeparatorProps }

packages/components/stepper/src/step-title.tsx

@@ -0,0 +1,27 @@
+import { PropsWithChildren, forwardRef } from 'react'
+import { stepper } from '@mochi-ui/theme'
+import { Typography } from '@mochi-ui/typography'
+
+const { stepTitleClsx } = stepper
+
+interface StepTitleProps extends PropsWithChildren {
+  className?: string
+}
+
+const StepTitle = forwardRef<HTMLDivElement, StepTitleProps>((props, ref) => {
+  const { className, ...restProps } = props
+
+  return (
+    <div ref={ref}>
+      <Typography
+        level="h8"
+        className={stepTitleClsx({ className })}
+        {...restProps}
+      />
+    </div>
+  )
+})
+
+StepTitle.displayName = 'StepTitle'
+
+export { StepTitle, type StepTitleProps }