Merge pull request #188 from Dias999/feature/Storybook-Select

feat: storybook / TSDocs - Select

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

@@ -5,7 +5,7 @@
 import '@testing-library/jest-dom';
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import Select, { SelectOptions } from '../src/components/Select/Select';
+import { Select, SelectOptions } from '../src/components/Select/Select';
 
 describe('Select Component', () => {
   const options: SelectOptions[] = [

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

@@ -10,19 +10,60 @@ import {
 import { FormLabel } from '../FormLabel';
 import { TextProps } from 'interfaces';
 
+/**
+ * Option type for the Select component.
+ */
 export type SelectOptions = {
+  /** Display label for the option */
   label: string;
+  /** Value associated with the option */
   value: string | number;
+  /** Whether the option is disabled */
   disabled?: boolean;
 };
 
-type Props = {
+/**
+ * Props for the Select component.
+ */
+export type SelectProps = TextFieldProps & {
+  /** Props for the container `Box` element */
   containerProps?: BoxProps;
+  /** Props for the label component */
   labelProps?: TextProps;
+  /** Array of selectable options */
   options: SelectOptions[];
 };
 
-const Select = (props: Props & TextFieldProps) => {
+/**
+ * The Select component is a custom dropdown that leverages Material-UI's
+ * `TextField` component with a `select` prop, allowing for a selection
+ * from a list of options. It supports custom labels, error handling,
+ * and can be styled using additional props for the container and label.
+ * It's props extend from [Material UI's TextField](https://mui.com/material-ui/api/text-field/#props) component props, so every
+ * prop is interchangeable between those two.
+ *
+ * @see [Storybook - Select](https://storybook.rockets.tools/?path=/docs/select)
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   id="example-select"
+ *   label="Choose an option"
+ *   value={selectedValue}
+ *   onChange={handleChange}
+ *   options={[
+ *     { label: 'Option 1', value: 1 },
+ *     { label: 'Option 2', value: 2, disabled: true },
+ *     { label: 'Option 3', value: 3 }
+ *   ]}
+ *   containerProps={{ mt: 2 }}
+ *   labelProps={{ variant: 'h6' }}
+ * />
+ * ```
+ *
+ * @param props - Select component props
+ */
+export const Select = (props: SelectProps) => {
   const {
     id,
     label,
@@ -86,5 +127,3 @@ const Select = (props: Props & TextFieldProps) => {
     </Box>
   );
 };
-
-export default Select;

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

@@ -1,4 +1 @@
-export { default } from './Select';
-export * from './Select';
-// import Select, { SelectOptions } from './Select'
-// export type { SelectOptions }
+export { Select, SelectProps, SelectOptions } from './Select';

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

@@ -38,7 +38,7 @@ export {
   RadioGroupProps,
 } from './components/RadioGroup';
 export { SideModal, SideModalProps } from './components/SideModal';
-export { default as Select } from './components/Select';
+export { Select, SelectProps, SelectOptions } from './components/Select';
 export { Switch, SwitchProps } from './components/Switch';
 
 import Table, {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import Select from '../../components/Select';
+import { Select } from '../../components/Select';
 import { WidgetProps } from '@rjsf/utils';
 
 const CustomSelectWidget = ({

stories/Select.stories.tsx

@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Select } from '@concepta/react-material-ui';
+
+const meta = {
+  component: Select,
+  tags: ['autodocs'],
+  args: {
+    options: [
+      { value: 'option1', label: 'Option 1' },
+      { value: 'option2', label: 'Option 2' },
+      { value: 'option3', label: 'Option 3' },
+    ],
+  },
+  argTypes: {
+    containerProps: { control: { type: 'object' } },
+    labelProps: { control: { type: 'object' } },
+    options: { control: { type: 'object' } },
+    size: {
+      control: { type: 'select', options: ['small', 'medium', 'large'] },
+    },
+    disabled: { control: { type: 'boolean' } },
+    required: { control: { type: 'boolean' } },
+    error: { control: { type: 'boolean' } },
+    helperText: { control: { type: 'text' } },
+  },
+} satisfies Meta<typeof Select>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: 'Select an option',
+  },
+};
+
+export const WithPreselectedValue: Story = {
+  args: {
+    label: 'Select an option',
+    value: 'option2',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Select an option',
+    disabled: true,
+  },
+};
+
+export const CustomSize: Story = {
+  args: {
+    label: 'Select an option',
+    size: 'medium',
+  },
+};
+
+export const Required: Story = {
+  args: {
+    label: 'Select an option',
+    required: true,
+  },
+};
+
+export const WithHelperText: Story = {
+  args: {
+    label: 'Select an option',
+    helperText: 'Select your preferred option',
+  },
+};
+
+export const ErrorState: Story = {
+  args: {
+    label: 'Select an option',
+    error: true,
+    helperText: 'This field is required',
+  },
+};
+
+export const CustomLabelStyles: Story = {
+  args: {
+    label: 'Select an option',
+    labelProps: {
+      color: 'red',
+      fontWeight: 'bold',
+    },
+  },
+};
+
+export const CustomContainerStyling: Story = {
+  args: {
+    label: 'Select an option',
+    containerProps: {
+      sx: {
+        border: '1px solid blue',
+        background: '#eee',
+        padding: 2,
+        borderRadius: '8px',
+      },
+    },
+  },
+};