Merge pull request #173 from Dias999/feature/Storybook-Switch

feat: storybook / tsdocs - Switch

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

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

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

@@ -1,16 +1,49 @@
 import React from 'react';
-import MuiSwitch, { SwitchProps } from '@mui/material/Switch';
+import MuiSwitch, { SwitchProps as MuiSwitchProps } from '@mui/material/Switch';
 import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Text from '../Text';
 import { TextProps } from 'interfaces';
 
-type Props = {
+/**
+ * Props for the `Switch` component.
+ */
+export type SwitchProps = MuiSwitchProps & {
+  /**
+   * The label text displayed alongside the switch.
+   */
   label?: string;
+
+  /**
+   * Custom styles for the label text. This prop is passed down to the `Text` component.
+   */
   textProps?: TextProps;
 };
 
-const Switch = (props: Props & SwitchProps) => {
+/**
+ * The `Switch` component is a UI element used to toggle between two states,
+ * typically representing "on" and "off". It supports features such as labeling,
+ * custom label styling, and controlled or uncontrolled state management.
+ * It's props extend from [Material UI's Switch](https://mui.com/material-ui/api/switch/#props) component props, so every
+ * prop is interchangeable between those two.
+ *
+ * @see [Storybook - Switch](https://storybook.rockets.tools/?path=/docs/switch)
+ *
+ * @example
+ * ```tsx
+ * <Switch
+ *   label="Enable Notifications"
+ *   checked={true}
+ *   onChange={(e) => console.log(e.target.checked)}
+ *   textProps={{ fontSize: 14, color: 'primary.main' }}
+ * />
+ * ```
+ *
+ * @param SwitchProps - The props for the `Switch` component.
+ * @param MuiSwitchProps - MUI {@link [MuiSwitchProps](https://mui.com/material-ui/api/switch/#props)}
+ */
+
+export const Switch = (props: SwitchProps) => {
   const {
     label,
     disabled,
@@ -46,5 +79,3 @@ const Switch = (props: Props & SwitchProps) => {
     </>
   );
 };
-
-export default Switch;

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

@@ -1 +1 @@
-export { default } from './Switch';
+export { Switch, SwitchProps } from './Switch';

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

@@ -34,7 +34,7 @@ export { Notifications, NotificationsProps } from './components/Notifications';
 export { default as RadioGroup } from './components/RadioGroup';
 export { SideModal, SideModalProps } from './components/SideModal';
 export { default as Select } from './components/Select';
-export { default as Switch } from './components/Switch';
+export { Switch, SwitchProps } from './components/Switch';
 
 import Table, {
   useTable,

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

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

stories/Switch.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { Switch } from '@concepta/react-material-ui';
+
+const meta = {
+  component: Switch,
+  tags: ['autodocs'],
+  args: {},
+  argTypes: {
+    label: { control: 'text' },
+    onChange: { action: 'changed' },
+  },
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithLabel: Story = {
+  args: {
+    label: 'Switch Label',
+  },
+};
+
+export const CustomLabelStyles: Story = {
+  args: {
+    label: 'Custom Styled Label',
+    textProps: {
+      fontSize: 18,
+      fontWeight: 600,
+      color: 'secondary.main',
+    },
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    checked: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const Required: Story = {
+  args: {
+    label: 'Required Switch',
+    required: true,
+  },
+};
+
+/**
+ * Check the actions tab
+ */
+export const OnChangeCallback: Story = {
+  args: {
+    onChange: fn(),
+  },
+};