Merge pull request #166 from Dias999/feature/Storybook-FormFieldSkeleton

feat: storybook - formFieldSkeleton

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

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

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

@@ -11,7 +11,7 @@ import {
   SelectOption,
   allOption,
 } from '../../components/SelectField/SelectField';
-import FormFieldSkeleton from '../../components/FormFieldSkeleton';
+import { FormFieldSkeleton } from '../../components/FormFieldSkeleton';
 import useDataProvider, { useQuery } from '@concepta/react-data-provider';
 import { SimpleFilter } from 'components/Table/types';
 

packages/react-material-ui/src/components/FormFieldSkeleton/index.tsx

@@ -1,12 +1,35 @@
 import React, { PropsWithChildren } from 'react';
 import { Box, Skeleton, useTheme } from '@mui/material';
 
-type FormFieldSkeletonProps = {
+/**
+ * FormFieldSkeleton component props.
+ */
+export type FormFieldSkeletonProps = {
+  /** Indicates if the form field is loading */
   isLoading?: boolean;
+  /** Hides the label when set to true */
   hideLabel?: boolean;
 };
 
-const FormFieldSkeleton = ({
+/**
+ * The FormFieldSkeleton component is used to display a loading skeleton
+ * for form fields. It shows a skeleton text area and a skeleton input
+ * area when the form field is loading. The component supports options
+ * to hide the label and to toggle loading state.
+ *
+ * @see [Storybook - FormFieldSkeleton](https://storybook.rockets.tools/?path=/docs/formfieldskeleton)
+ *
+ * @example
+ * ```tsx
+ * <FormFieldSkeleton isLoading={true} hideLabel={true}>
+ *   <YourComponent />
+ * </FormFieldSkeleton>
+ * ```
+ *
+ * @param props - FormFieldSkeleton component props
+ * @returns The skeleton loading component or the children if not loading
+ */
+export const FormFieldSkeleton = ({
   isLoading = true,
   children,
   hideLabel,
@@ -38,5 +61,3 @@ const FormFieldSkeleton = ({
     </Box>
   );
 };
-
-export default FormFieldSkeleton;

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

@@ -11,7 +11,7 @@ import {
   SelectProps,
 } from '@mui/material';
 
-import FormFieldSkeleton from '../../components/FormFieldSkeleton';
+import { FormFieldSkeleton } from '../../components/FormFieldSkeleton';
 
 export const allOption: SelectOption = {
   value: 'all',

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

@@ -51,8 +51,10 @@ export {
 } from './components/Filter';
 export { SchemaForm, SchemaFormProps } from './components/SchemaForm';
 
-import FormFieldSkeleton from './components/FormFieldSkeleton';
-export { FormFieldSkeleton };
+export {
+  FormFieldSkeleton,
+  FormFieldSkeletonProps,
+} from './components/FormFieldSkeleton';
 
 export { default as ComposedTable } from './components/ComposedTable';
 

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

@@ -10,7 +10,7 @@ import {
 } from '@rjsf/utils';
 import { Autocomplete, createFilterOptions } from '@mui/material';
 import useDataProvider, { useQuery } from '@concepta/react-data-provider';
-import FormFieldSkeleton from '../../components/FormFieldSkeleton';
+import { FormFieldSkeleton } from '../../components/FormFieldSkeleton';
 import { allOption } from '../../components/SelectField/SelectField';
 import { TextField } from '../../components/TextField';
 

stories/FormFieldSkeleton.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { FormFieldSkeleton, TextField } from '@concepta/react-material-ui';
+
+const meta = {
+  component: FormFieldSkeleton,
+  tags: ['autodocs'],
+  args: {
+    isLoading: true,
+    hideLabel: false,
+  },
+  argTypes: {
+    isLoading: { control: 'boolean' },
+    hideLabel: { control: 'boolean' },
+  },
+  render: (args) => (
+    <FormFieldSkeleton {...args}>
+      <TextField label="Text field" />
+    </FormFieldSkeleton>
+  ),
+} satisfies Meta<typeof FormFieldSkeleton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithoutLabel: Story = {
+  args: {
+    hideLabel: true,
+  },
+};
+
+export const NotLoading: Story = {
+  args: {
+    isLoading: false,
+  },
+};