Add Upload to Storybook and make it reusable and move it into it's own component

[Traxmaxx]

We introduced a new Feedback widget width a drag'n'drop file upload. We would like to make this component reusable in other pages and add it to our Storybook.

Figma designs are here

You will find the current upload form inside /Users/traxmaxx/Sites/tailwarden/komiser/dashboard/components/feedback-widget/FeedbackWidget.tsx:1. Look for something like

 <FileUploader
                    classes={
                      fileAttachement === null
                        ? `grow cursor-pointer rounded border-2 border-dashed border-black-170 py-5 text-center text-xs transition hover:border-[#B6EAEA] hover:bg-black-100 w-[50%]`
                        : `grow min-h-full flex-1 rounded border-2 border-[#B6EAEA] text-center text-xs transition w-full`
                    }
                    disabled={
                      fileAttachement !== null ||
                      isSendingFeedback ||
                      isTakingScreenCapture
                    }
                    handleChange={uploadFile}
                    name="attachement"
                    types={FILE_TYPES}
                    fileOrFiles={fileAttachement}
                    hoverTitle="drop here"
                    maxSize={MAX_FILE_SIZE_MB}
                    onTypeError={(err: string) =>
                      setToast({
                        hasError: true,
                        title: 'File upload failed',
                        message: err
                      })
                    }
                    onSizeError={(err: string) =>
                      setToast({
                        hasError: true,
                        title: 'File upload failed',
                        message: err
                      })
                    }
                    dropMessageStyle={{
                      width: '100%',
                      height: '100%',
                      position: 'absolute',
                      background: '#F4F9F9',
                      top: 0,
                      right: 2,
                      display: 'flex',
                      flexGrow: 2,
                      opacity: 1,
                      zIndex: 20,
                      color: '#008484',
                      fontSize: 14,
                      border: 'none'
                    }}
                  >
...
 </FileUploader>

Please move this into it's own component with all necessary props and stylings and make sure the FeedbackWidget is using the new implementation. Also please add the new component to Storybook with all necessary variants and a proper documentation.

Additional context
If you want to tackle this task, feel free to share with us your email address so we can give you access to the Figma project :)

[faisal7008]

hey @Traxmaxx i would like to do this task, Can you assign this to me ?

[Traxmaxx]

Hei @faisal7008! It's all your's! Do you already have access to our Figma? If not we would need your email to give you access : )

[faisal7008]

Hei @faisal7008! It's all your's! Do you already have access to our Figma? If not we would need your email to give you access : )
Thanks @Traxmaxx
I already started working on it. Also, Please share the access to figma on [email protected]

[Traxmaxx]

You should have received an invite!