Add Checkbox Component with Storybook Integration and Tests

[mohanadkandil]

Add Checkbox Component with Storybook Integration and Tests

♻️ Current situation & Problem

closes #15

Changes Included

• Added the Checkbox component with support for checked, indeterminate, and onCheckedChange states.

Storybook Integration (Added Storybook stories for the Checkbox component)

• Unchecked: Renders the checkbox in its default unchecked state.
• Checked: Renders the checkbox in the checked state.
• Functional: Demonstrates the checkbox with state management using useState.
• Labeled: Displays the checkbox alongside a label using the SideLabel component.

Unit Tests

• Tests added using @testing-library/react to validate:
• Checkbox rendering.
• Functionality of checked and indeterminate states.
• Behavior of the onCheckedChange callback when toggling the checkbox.

📝 Code of Conduct & Contributing Guidelines

By submitting creating this pull request, you agree to follow our Code of Conduct and Contributing Guidelines:

• I agree to follow the Code of Conduct and Contributing Guidelines.

[arkadiuszbachorski]

Thank you for contributing! There are some slight adjustments to be made. Please let me know if any questions!

[arkadiuszbachorski]

./components/Checkbox needs to be added here. It enables consumers of the package to import Checkbox directly:

import { Checkbox } from '@stanfordspezi/spezi-web-design-system/components/Checkbox'

[arkadiuszbachorski]

It seems like newCheckedValue variable is redundant. expect(onCheckedChange).toHaveBeenCalledWith already tells us we're asserting on new value of checked.

Suggested change

	const newCheckedValue = false
	expect(onCheckedChange).toHaveBeenCalledWith(newCheckedValue)
	expect(onCheckedChange).toHaveBeenCalledWith(false)

[arkadiuszbachorski]

It needs displayName property. There is ESLint rule to enforce that. Did it fire in your IDE?

[arkadiuszbachorski]

I have not run this yet, but it seems like we need a bit more work here.

Components have to rely on the standard Tailwind's design tokens and design system custom color tokens. This enables consumers to modify the theme.

Focus states have to be properly handled. focus-ring className should do the trick most likely.

[codecov]

Codecov Report

Attention: Patch coverage is 94.44444% with 1 line in your changes missing coverage. Please review.

Project coverage is 81.17%. Comparing base (8a4daaf) to head (672bb5c).
Report is 7 commits behind head on main.

Files with missing lines	Patch %	Lines
src/index.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main      #19      +/-   ##
==========================================
+ Coverage   81.07%   81.17%   +0.10%     
==========================================
  Files         125      127       +2     
  Lines        2435     2453      +18     
  Branches      276      277       +1     
==========================================
+ Hits         1974     1991      +17     
- Misses        440      441       +1     
  Partials       21       21              

Files with missing lines	Coverage Δ
src/components/Checkbox/Checkbox.tsx	100.00% <100.00%> (ø)
src/components/Checkbox/index.tsx	100.00% <100.00%> (ø)
src/index.ts	0.00% <0.00%> (ø)

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8a4daaf...672bb5c. Read the comment docs.

[arkadiuszbachorski]

Closing this in favor of #36 due to inactivity. Thank you for working on this!