XS-1632 adding icons for equipment checkout and return

[shivbang]

Summary by CodeRabbit

• New Features
  • Added EquipmentCheckoutIcon for inventory and equipment checkout workflows.
  • Added EquipmentReturnIcon for inventory and equipment return workflows.
  • Both icons support standard customization options and are available through the public icon library.

[coderabbitai]

📝 Walkthrough

Walkthrough

Two React SVG icons for equipment checkout and return are added, tagged, re-exported from the icons index, and included in the package’s TypeScript declarations.

Changes

Equipment icons

Layer / File(s)	Summary
Equipment icon components src/icons/src/EquipmentCheckoutIcon.jsx, src/icons/src/EquipmentReturnIcon.jsx	Adds two createIcon SVG components with forwarded props, currentColor strokes, rounded styling, and inventory-related tags.
Public icon exports src/icons/index.js, index.d.ts	Re-exports both icons from the icons index and adds them to the public TypeScript export list.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Suggested reviewers: rushi

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/icons/src/EquipmentCheckoutIcon.jsx`:
- Around line 13-18: Fix Prettier formatting for the short path elements in
EquipmentCheckoutIcon.jsx lines 13-18 and EquipmentReturnIcon.jsx lines 13-18 by
collapsing each path’s attributes onto a single line, without changing their
values or behavior.
- Around line 4-6: Replace the anonymous renderer passed to createIcon in
EquipmentCheckoutIcon.jsx (lines 4-6) with a named functional component, and
make the same change for the renderer in EquipmentReturnIcon.jsx (lines 4-6).
Preserve each SVG’s existing props and markup while ensuring both components
follow the repository’s named-functional-component convention.
- Around line 4-6: Add or update Storybook stories under src/stories/ for both
EquipmentCheckoutIcon and EquipmentReturnIcon, covering the new or changed icon
components. Ensure each icon has Storybook coverage instead of adding Jest
tests; the affected component sites require no direct changes.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 61ae38e1-b873-4902-a56d-33320729de30

📥 Commits

Reviewing files that changed from the base of the PR and between 620d1f4 and 38b9d6f.

📒 Files selected for processing (4)

• index.d.ts
• src/icons/index.js
• src/icons/src/EquipmentCheckoutIcon.jsx
• src/icons/src/EquipmentReturnIcon.jsx

🔗 Linked repositories identified

CodeRabbit considers these linked repositories for cross-repo context during reviews:

• xola/x2-seller (manual)
• xola/x2-checkout (manual)
• xola/jslint (auto-detected)

📜 Review details

🧰 Additional context used

📓 Path-based instructions (4)

src/**/*.jsx

📄 CodeRabbit inference engine (CLAUDE.md)

src/**/*.jsx: Implement components as named functional components using hooks, with the form const ComponentName = (props) => { ... }.
Use prop-types instead of TypeScript for component props, and define a PropTypes entry for every public prop, including children and className.
Destructure component props in the function signature rather than accessing properties through props.x.
Use clsx for conditional className construction; do not use template literals or string concatenation.
Keep JSX indentation to a maximum of six levels.
Avoid custom CSS and inline style props; if Tailwind cannot express a design, flag it rather than routing around the limitation.
Do not add dark mode support.

Files:

• src/icons/src/EquipmentCheckoutIcon.jsx
• src/icons/src/EquipmentReturnIcon.jsx

**/*.{js,jsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{js,jsx}: Use the useMount, useUnmount, and useMemoizedFn hooks from ahooks instead of hand-rolled useEffect or useCallback equivalents.
Always clean up useEffect side effects, including event listeners, timers, tippy/nouislider instances, and subscriptions, when components unmount.
Do not suppress react-hooks/exhaustive-deps.
Write comments only to explain why code exists or behaves a certain way, not what the code does.
Use named color-scale classes from tailwind.config.js such as bg-primary, text-gray-dark, and border-gray-light; never use Tailwind's default numbered palette such as text-gray-600.

For new or changed components, add or update a Storybook story under src/stories/ instead of adding a Jest test; component behavior is covered by Chromatic visual regression.

Files:

• src/icons/src/EquipmentCheckoutIcon.jsx
• src/icons/index.js
• src/icons/src/EquipmentReturnIcon.jsx

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.claude/rules/commenting.md)

**/*.{js,jsx,ts,tsx}: Write self-explanatory code and add comments only when necessary to explain why rather than what. Use comments for complex Tailwind class reasoning, non-obvious prop-types validation, third-party library workarounds, performance trade-offs, or fragile invariants.
Do not add obvious, redundant, dead-code, changelog, caller, ticket, or divider comments.
Use TODO, FIXME, HACK, NOTE, and PERF prefixes for work-in-progress, workaround, assumption, and performance annotations.
Use JSDoc for shared public helpers, documenting their purpose, parameters, and return values.
Before adding a comment, prefer clearer names or self-documenting code, and add the comment only when it explains non-obvious reasoning that will help future maintainers.

Files:

• src/icons/src/EquipmentCheckoutIcon.jsx
• src/icons/index.js
• src/icons/src/EquipmentReturnIcon.jsx
• index.d.ts

index.d.ts

📄 CodeRabbit inference engine (CLAUDE.md)

Maintain consumer-facing type declarations manually in index.d.ts.

Files:

• index.d.ts

🪛 GitHub Check: View Lint Report

src/icons/src/EquipmentCheckoutIcon.jsx

[failure] 13-18: src/icons/src/EquipmentCheckoutIcon.jsx#L13-L18
[prettier/prettier] Replace ⏎················d="M20.0328·16.8691H15.1685"⏎················stroke="currentColor"⏎················strokeLinecap="round"⏎················strokeLinejoin="round"⏎··········· with ·d="M20.0328·16.8691H15.1685"·stroke="currentColor"·strokeLinecap="round"·strokeLinejoin="round"

---

[error] 13-18: ESLint (prettier/prettier) formatting error. Replace the multi-line SVG attributes with d="M20.0328 16.8691H15.1685" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round".

src/icons/src/EquipmentReturnIcon.jsx

[failure] 13-18: src/icons/src/EquipmentReturnIcon.jsx#L13-L18
[prettier/prettier] Replace ⏎················d="M4.14107·6.10742H9.00537"⏎················stroke="currentColor"⏎················strokeLinecap="round"⏎················strokeLinejoin="round"⏎··········· with ·d="M4.14107·6.10742H9.00537"·stroke="currentColor"·strokeLinecap="round"·strokeLinejoin="round"

---

[error] 13-18: ESLint (prettier/prettier) formatting error. Replace the multi-line SVG attributes with d="M4.14107 6.10742H9.00537" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round".

🔇 Additional comments (4)

src/icons/src/EquipmentCheckoutIcon.jsx (1)

1-2: LGTM!

Also applies to: 7-12, 19-30

src/icons/src/EquipmentReturnIcon.jsx (1)

1-2: LGTM!

Also applies to: 7-12, 19-30

src/icons/index.js (1)

102-103: LGTM!

index.d.ts (1)

119-120: LGTM!