docs: migrate FilePicker docs to csf3

Author: Nikolai Lopin

src/components/FilePicker/docs/ControlledErrorFilePicker.tsx

@@ -5,34 +5,16 @@ import { HelperText } from '../../HelperText/HelperText';
 
 const ControlledErrorFilePicker: FC = () => {
     const [error, setError] = useState(false);
-    const onError = file => {
-        // eslint-disable-next-line no-console
-        console.log('onError', file);
-        setError(!!file);
-    };
 
     return (
         <Box maxWidth="100%" width="30rem">
             <FilePicker
-                accept="image/png, image/jpeg"
                 buttonText="Browse files"
                 label="A picture of you"
                 name="avatar"
                 error={error}
-                onChange={e => {
-                    // eslint-disable-next-line no-console
-                    console.log('onChange', e);
-                }}
-                onFileChange={(eventFile, e) => {
-                    // eslint-disable-next-line no-console
-                    console.log('onFileChange', eventFile, e);
-                    try {
-                        if (eventFile.size > 0) {
-                            throw new Error('Oops! I need a file with no size');
-                        }
-                    } catch {
-                        onError(eventFile);
-                    }
+                onFileChange={() => {
+                    setError(true);
                 }}
             />
             {error && (

src/components/FilePicker/docs/FilePicker.stories.mdx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { FilePicker } from '../FilePicker';
+import { Box } from '../../Box/Box';
+
+const meta: Meta = {
+    title: 'Form Elements/FilePicker',
+    component: FilePicker,
+    argTypes: {
+        capture: {
+            options: ['user', 'environment'],
+            control: 'select'
+        }
+    },
+    args: {
+        name: 'avatar',
+        label: 'Picture of you',
+        buttonText: 'Browse'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FilePicker>;
+
+export const Default: Story = {};
+
+export const WithBrowserButtonAlwaysVisible: Story = {
+    args: {
+        alwaysShowActionButton: true
+    }
+};
+
+export const WithMultilineLabel: Story = {
+    args: {
+        label: 'A very long label which can stretch to more than one line without any issues'
+    },
+    decorators: [
+        Story => (
+            <Box width="20rem">
+                <Story />
+            </Box>
+        )
+    ]
+};
+
+export const AcceptingOnlyImages: Story = {
+    args: {
+        accept: 'image/*'
+    }
+};

src/components/FilePicker/docs/FilePicker.stories.tsx

@@ -0,0 +1,76 @@
+import { Primary, Stories, ArgTypes, Meta } from '@storybook/blocks';
+import { ControlledErrorFilePicker } from './ControlledErrorFilePicker';
+import { StyledSystemLinks } from '../../../docs/StyledSystemLinks';
+import * as FilePickerStories from './FilePicker.stories';
+
+<Meta of={FilePickerStories} />
+
+# FilePicker
+
+This component delivers an optimal user experience by utilizing core web technologies. It uses the [HTML filepicker](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file) for a lightweight and efficient approach to file uploading.
+
+<Primary />
+
+## Properties
+
+<ArgTypes of={FilePickerStories} />
+
+<StyledSystemLinks component="FilePicker" supportedProps={['margin']} />
+
+## Appearance
+
+-   **File title**: This provides a clear description of what the user should upload. If long, takes as many lines as needed extending the height of the component.
+-   **Button label**: Describes the main action, it works better when short
+
+## Placement
+
+-   They are mainly used in forms but can also appear in other places as a standalone component. In either case, prefer to have them inside `<form>` tag for better user experience.
+-   Place `Filepicker` with a minimum of 8px _("Spaces" value 1 for our default spaces values)_ margin on each side.
+
+## Behaviour
+
+-   The user may only select 1 file at a time.
+-   By default, any file format is accepted, but you can add `accept` property to validate a specific file format.
+-   Click on "Browse" button triggers a browser-specific upload window.
+-   Once the user selects the file, the browser-specific select window closes and the files will appear below the File title label.
+
+## Usage
+
+### Showing errors
+
+Below you have an example of how you can show an error using the [`HelperText` component](?path=/docs/components-helpertext--docs).
+Submit any file to trigger the error and clean the input by canceling the selection to remove the error state.
+
+<ControlledErrorFilePicker />
+
+```tsx
+const UploadAvatar = () => {
+    const [error, setError] = useState<string>();
+
+    return (
+        <Box>
+            <FilePicker
+                buttonText="Browse files"
+                label="A picture of you"
+                name="avatar"
+                error={error}
+                onFileChange={eventFile => {
+                    try {
+                        setError(undefined);
+                        // here we make something that can throw
+                    } catch (error) {
+                        setError(error.message);
+                    }
+                }}
+            />
+            {error && (
+                <HelperText mt={1} variant="danger">
+                    {error}
+                </HelperText>
+            )}
+        </Box>
+    );
+};
+```
+
+<Stories includePrimary={false} />