Merge pull request #174 from Dias999/feature/Storybook-Checkbox

feat: storybook / tsdocs - Checkbox

packages/react-material-ui/__tests__/Checkbox.spec.tsx

@@ -5,7 +5,7 @@
 import '@testing-library/jest-dom';
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import Checkbox from '../src/components/Checkbox/Checkbox';
+import { Checkbox } from '../src/components/Checkbox/Checkbox';
 
 describe('Checkbox Component', () => {
   test('should render correctly', () => {

packages/react-material-ui/src/components/Checkbox/Checkbox.tsx

@@ -1,16 +1,51 @@
 import React from 'react';
-import MuiCheckbox, { CheckboxProps } from '@mui/material/Checkbox';
+import MuiCheckbox, {
+  CheckboxProps as MuiCheckboxProps,
+} from '@mui/material/Checkbox';
 import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Text from '../Text';
 import { TextProps } from 'interfaces';
 
-type Props = {
+/**
+ * Checkbox component props.
+ */
+export type CheckboxProps = MuiCheckboxProps & {
+  /** Label text associated with the checkbox */
   label?: string;
+  /**
+   * Custom styles for the label text. This prop is passed down to the `Text` component.
+   */
   textProps?: TextProps;
 };
 
-const Checkbox = (props: CheckboxProps & Props) => {
+/**
+ * The Checkbox component is a UI element that renders a Material-UI Checkbox
+ * with optional label and customizable label styling. It supports all standard
+ * checkbox properties along with additional features like label customization.
+ * It's props extend from [Material UI's Checkbox](https://mui.com/material-ui/api/checkbox/#props) component props, so every
+ * prop is interchangeable between those two.
+ *
+ * @see [Storybook - Checkbox](https://storybook.rockets.tools/?path=/docs/checkbox)
+ *
+ * @example
+ * ```tsx
+ * <Checkbox
+ *   label="Accept Terms"
+ *   checked={true}
+ *   required={true}
+ *   textProps={{
+ *     fontSize: 14,
+ *     fontWeight: 500,
+ *     color: 'text.secondary'
+ *   }}
+ * />
+ * ```
+ *
+ * @param CheckboxProps - Checkbox component props
+ * @param MuiCheckboxProps - MUI {@link [MuiCheckboxProps](https://mui.com/material-ui/api/checkbox/#props)}
+ */
+export const Checkbox = (props: CheckboxProps) => {
   const {
     label,
     checked,
@@ -44,5 +79,3 @@ const Checkbox = (props: CheckboxProps & Props) => {
     </>
   );
 };
-
-export default Checkbox;

packages/react-material-ui/src/components/Checkbox/index.ts

@@ -1 +1 @@
-export { default } from './Checkbox';
+export { Checkbox, CheckboxProps } from './Checkbox';

packages/react-material-ui/src/index.ts

@@ -1,5 +1,5 @@
 export { Avatar, AvatarProps } from './components/Avatar';
-export { default as Checkbox } from './components/Checkbox';
+export { Checkbox, CheckboxProps } from './components/Checkbox';
 
 export { AppBar } from './components/AppBar';
 export { AppBarRoot, AppBarRootProps } from './components/AppBar/AppBarRoot';

packages/react-material-ui/src/styles/CustomWidgets/CustomCheckboxWidget.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Checkbox from '../../components/Checkbox';
+import { Checkbox } from '../../components/Checkbox';
 import { WidgetProps } from '@rjsf/utils';
 
 const CustomCheckboxWidget = (props: WidgetProps) => (

packages/react-material-ui/src/styles/CustomWidgets/CustomCheckboxesWidget.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { WidgetProps } from '@rjsf/utils';
 import { Box, Divider, FormControl, Grid, Typography } from '@mui/material';
-import Checkbox from '../../components/Checkbox';
+import { Checkbox } from '../../components/Checkbox';
 
 const CustomCheckboxesWidget = (props: WidgetProps) => {
   const {

stories/Checkbox.stories.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Checkbox } from '@concepta/react-material-ui';
+
+const meta = {
+  component: Checkbox,
+  tags: ['autodocs'],
+  args: {},
+  argTypes: {
+    label: { control: 'text' },
+    onChange: { action: 'changed' },
+    textProps: { control: 'object' },
+  },
+  render: (args) => {
+    const [checked, setChecked] = useState(args.checked);
+    return (
+      <Checkbox
+        {...args}
+        checked={checked}
+        onChange={(e) => setChecked(e.target.checked)}
+      />
+    );
+  },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithLabel: Story = {
+  args: {
+    label: 'Checkbox Label',
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    checked: true,
+    label: 'Checked Checkbox',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    label: 'Disabled Checkbox',
+  },
+};
+
+export const Required: Story = {
+  args: {
+    required: true,
+    label: 'Required Checkbox',
+  },
+};
+
+export const CustomTextProperties: Story = {
+  args: {
+    label: 'Custom Text Properties',
+    textProps: {
+      fontSize: 20,
+      fontWeight: 700,
+      color: 'secondary.main',
+    },
+  },
+};
+
+export const CustomStylesWithSx: Story = {
+  args: {
+    label: 'Custom Styles with sx',
+    sx: {
+      border: '1px solid red',
+    },
+  },
+};

stories/Switch.stories.tsx

@@ -10,6 +10,7 @@ const meta = {
   argTypes: {
     label: { control: 'text' },
     onChange: { action: 'changed' },
+    textProps: { control: 'object' },
   },
 } satisfies Meta<typeof Switch>;