From ba43fb48da9803926c727bba6f50b06efee6f623 Mon Sep 17 00:00:00 2001 From: Henrique Pozzolini Date: Mon, 13 Jan 2025 21:46:37 -0300 Subject: [PATCH 1/4] BA-2086-fe-storybook-design-system-dropzone --- .../Dropzone/__storybook__/dropzone.mdx | 82 +++++++++++++++++++ .../Dropzone/__storybook__/stories.tsx | 48 +++++++++++ 2 files changed, 130 insertions(+) create mode 100644 packages/design-system/components/Dropzone/__storybook__/dropzone.mdx create mode 100644 packages/design-system/components/Dropzone/__storybook__/stories.tsx diff --git a/packages/design-system/components/Dropzone/__storybook__/dropzone.mdx b/packages/design-system/components/Dropzone/__storybook__/dropzone.mdx new file mode 100644 index 00000000..c700f838 --- /dev/null +++ b/packages/design-system/components/Dropzone/__storybook__/dropzone.mdx @@ -0,0 +1,82 @@ +import { Meta } from '@storybook/addon-docs' + + + +# Component Documentation + +## Dropzone + +- **Purpose**: The Dropzone component is designed for uploading files, supporting drag-and-drop functionality with visual feedback for accepted and rejected files. +- **Expected Behavior**: The component should accept files based on the `accept` prop, enforce file size limits via `maxFileSize`, and trigger callbacks such as `onSelect` for file selection, `onRemove` for file removal. + +## Use Cases + +- **Current Usage**: + + - Used in the theme configuration to update the application logo. + +- **Potential Usage**: + - Can be integrated into a dashboard for bulk file uploads. + - Useful in applications requiring real-time file validations or preview. + +## Props + +- **accept** (object): Specifies the types of files allowed (e.g., `{ "image/svg+xml": [".svg"] }`). + +- **storedImg** (string): URL of a preloaded image to display as a preview. + + - Default: `undefined` + +- **onSelect** (function): Callback triggered when a file is successfully selected. + + - Parameters: `(imgString: string)` + +- **onRemove** (function): Callback triggered when a file is removed. + + - Parameters: `()` + +- **actionText** (string): Text displayed on the upload button. + + - Default: `'Upload Image'` + +- **maxFileSize** (number): Maximum allowed file size in MB. + + - Default: `15` + +- **subTitle** (string): Subtext displayed within the Dropzone for additional information. + + - Default: `'Max. File Size: 15MB'` + +- **InputProps** (object): Additional props passed to the `` element. + + - Default: `undefined` + +- **DropzoneOptions** (object): Configuration options for the Dropzone behavior. Full details of the available options can be found in the [react-dropzone documentation](https://react-dropzone.js.org/#src). + - Default: `{}` + +## Example Usage + +```javascript +import Dropzone from './Dropzone' + +const MyDropzone = () => ( + console.log('Selected image:', img)} + onRemove={() => console.log('Image removed')} + actionText="Upload SVG" + DropzoneOptions={{ + maxFiles: 3, + noDrag: false, + disabled: false, + }} + InputProps={{ + 'aria-label': 'Default logo dropzone', + }} + /> +) + +export default MyDropzone +``` diff --git a/packages/design-system/components/Dropzone/__storybook__/stories.tsx b/packages/design-system/components/Dropzone/__storybook__/stories.tsx new file mode 100644 index 00000000..61da552e --- /dev/null +++ b/packages/design-system/components/Dropzone/__storybook__/stories.tsx @@ -0,0 +1,48 @@ +import { Meta, StoryObj } from '@storybook/react' + +import Dropzone from '..' +import { DropzoneProps } from '../types' + +export default { + title: '@baseapp-frontend | designSystem/Dropzone/Dropzone', + component: Dropzone, +} as Meta + +type Story = StoryObj + +export const Default: Story = { + args: { + accept: { 'image/svg+xml': ['.svg'] }, + actionText: 'Upload SVG', + maxFileSize: 15, + subTitle: 'Max. File Size: 15MB', + storedImg: undefined, + }, +} + +export const WithStoredImage: Story = { + args: { + ...Default.args, + storedImg: 'https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png', + }, +} + +export const FileTooLarge: Story = { + args: { + ...Default.args, + maxFileSize: 0.0001, + subTitle: 'Max. File Size: 0.0001MB', + }, +} + +export const MultipleFileTypes: Story = { + args: { + accept: { + 'image/jpeg': ['.jpg', '.jpeg'], + 'image/png': ['.png'], + }, + actionText: 'Upload Images', + maxFileSize: 10, + subTitle: 'Supports JPG, JPEG, and PNG. Max. File Size: 10MB', + }, +} From 7920aae475d1bee3cc767b0cc63842b03aef1610 Mon Sep 17 00:00:00 2001 From: Henrique Pozzolini Date: Tue, 21 Jan 2025 16:11:46 -0300 Subject: [PATCH 2/4] change next-font mock export --- packages/components/__mocks__/next-font.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/components/__mocks__/next-font.ts b/packages/components/__mocks__/next-font.ts index 49207c8e..ce7e91ba 100644 --- a/packages/components/__mocks__/next-font.ts +++ b/packages/components/__mocks__/next-font.ts @@ -1,3 +1 @@ -module.exports = require('@baseapp-frontend/test/__mocks__/next-font.ts') - -export {} +export * from '@baseapp-frontend/test/__mocks__/next-font' From 6a99c4f8ba9a01a78b97597d7e36c71d1525f5eb Mon Sep 17 00:00:00 2001 From: Henrique Pozzolini Date: Wed, 22 Jan 2025 10:33:37 -0300 Subject: [PATCH 3/4] change Dorpzone mdx file --- .../components/Dropzone/__storybook__/dropzone.mdx | 8 ++------ .../components/Dropzone/__storybook__/stories.tsx | 6 ++++-- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/design-system/components/Dropzone/__storybook__/dropzone.mdx b/packages/design-system/components/Dropzone/__storybook__/dropzone.mdx index c700f838..8abfc482 100644 --- a/packages/design-system/components/Dropzone/__storybook__/dropzone.mdx +++ b/packages/design-system/components/Dropzone/__storybook__/dropzone.mdx @@ -11,13 +11,9 @@ import { Meta } from '@storybook/addon-docs' ## Use Cases -- **Current Usage**: +- **Current Usage**: Used in the theme configuration to update the application logo. - - Used in the theme configuration to update the application logo. - -- **Potential Usage**: - - Can be integrated into a dashboard for bulk file uploads. - - Useful in applications requiring real-time file validations or preview. +- **Potential Usage**: Can be integrated into a dashboard for bulk file uploads. Useful in applications requiring real-time file validations or preview. ## Props diff --git a/packages/design-system/components/Dropzone/__storybook__/stories.tsx b/packages/design-system/components/Dropzone/__storybook__/stories.tsx index 61da552e..aee75411 100644 --- a/packages/design-system/components/Dropzone/__storybook__/stories.tsx +++ b/packages/design-system/components/Dropzone/__storybook__/stories.tsx @@ -3,10 +3,12 @@ import { Meta, StoryObj } from '@storybook/react' import Dropzone from '..' import { DropzoneProps } from '../types' -export default { +const meta: Meta = { title: '@baseapp-frontend | designSystem/Dropzone/Dropzone', component: Dropzone, -} as Meta +} + +export default meta type Story = StoryObj From fb0c3d14295493b709f79a2330c23d7356b90bdb Mon Sep 17 00:00:00 2001 From: Henrique Pozzolini Date: Wed, 22 Jan 2025 15:47:54 -0300 Subject: [PATCH 4/4] bump design-system version --- packages/components/CHANGELOG.md | 7 +++++++ packages/components/package.json | 2 +- packages/design-system/CHANGELOG.md | 6 ++++++ packages/design-system/package.json | 2 +- packages/wagtail/CHANGELOG.md | 7 +++++++ packages/wagtail/package.json | 2 +- 6 files changed, 23 insertions(+), 3 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index cdefb9c4..c2bd8d90 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,12 @@ # @baseapp-frontend/components +## 0.0.54 + +### Patch Changes + +- Updated dependencies + - @baseapp-frontend/design-system@0.0.33 + ## 0.0.53 ### Patch Changes diff --git a/packages/components/package.json b/packages/components/package.json index 33257553..3eee2d96 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,7 +1,7 @@ { "name": "@baseapp-frontend/components", "description": "BaseApp components modules such as comments, notifications, messages, and more.", - "version": "0.0.53", + "version": "0.0.54", "main": "./index.ts", "types": "dist/index.d.ts", "sideEffects": false, diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md index 01d935a5..6afad4cd 100644 --- a/packages/design-system/CHANGELOG.md +++ b/packages/design-system/CHANGELOG.md @@ -1,5 +1,11 @@ # @baseapp-frontend/design-system +## 0.0.33 + +### Patch Changes + +- create dropzone storybook + ## 0.0.32 ### Patch Changes diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 88778a7b..2d4dcf74 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -1,7 +1,7 @@ { "name": "@baseapp-frontend/design-system", "description": "Design System components and configurations.", - "version": "0.0.32", + "version": "0.0.33", "main": "./index.ts", "types": "dist/index.d.ts", "sideEffects": false, diff --git a/packages/wagtail/CHANGELOG.md b/packages/wagtail/CHANGELOG.md index cc9304a9..3cc0d8c8 100644 --- a/packages/wagtail/CHANGELOG.md +++ b/packages/wagtail/CHANGELOG.md @@ -1,5 +1,12 @@ # @baseapp-frontend/wagtail +## 1.0.18 + +### Patch Changes + +- Updated dependencies + - @baseapp-frontend/design-system@0.0.33 + ## 1.0.17 ### Patch Changes diff --git a/packages/wagtail/package.json b/packages/wagtail/package.json index a37b1f76..609171fc 100644 --- a/packages/wagtail/package.json +++ b/packages/wagtail/package.json @@ -1,7 +1,7 @@ { "name": "@baseapp-frontend/wagtail", "description": "BaseApp Wagtail", - "version": "1.0.17", + "version": "1.0.18", "main": "./index.ts", "types": "dist/index.d.ts", "sideEffects": false,