diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index c2bd8d90..e6d31cd8 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,12 @@ # @baseapp-frontend/components +## 0.0.55 + +### Patch Changes + +- Updated dependencies + - @baseapp-frontend/design-system@0.0.34 + ## 0.0.54 ### Patch Changes diff --git a/packages/components/package.json b/packages/components/package.json index 3eee2d96..30dd1725 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.54", + "version": "0.0.55", "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 6afad4cd..ad4b72ac 100644 --- a/packages/design-system/CHANGELOG.md +++ b/packages/design-system/CHANGELOG.md @@ -1,5 +1,11 @@ # @baseapp-frontend/design-system +## 0.0.34 + +### Patch Changes + +- Add documentation and fix stories for ImageWithFallback and Searchbar components + ## 0.0.33 ### Patch Changes diff --git a/packages/design-system/components/images/ImageWithFallback/__storybook__/ImageWithFallback.mdx b/packages/design-system/components/images/ImageWithFallback/__storybook__/ImageWithFallback.mdx new file mode 100644 index 00000000..43e195e9 --- /dev/null +++ b/packages/design-system/components/images/ImageWithFallback/__storybook__/ImageWithFallback.mdx @@ -0,0 +1,47 @@ +import { Meta } from '@storybook/addon-docs' + + + +# Component Documentation + +## ImageWithFallback + +- **Purpose**: The `ImageWithFallback` component provides an image field component with a fallback image src. It is designed to add an alternate fallback in case the original src fails to load. +- **Expected Behavior**: The component renders an image field. It uses `src` by default but the fallback `fallbackSrc` case src fails to load. + +## Use Cases + +- **Current Usage**: This component is intended for any image. +- **Potential Usage**: The `ImageWithFallback` could be used for fallback images to support multiple browsers like loading webp for modern browsers and png for browsers that doesn't support it. + +## Props + +- **src** (string): source of the image. +- **fallbackSrc** (string): fallback source image. +- **type** (string, optional): type of the src image (default 'image/webp') +- **fallbackType** (string, optional): type of the fallback image (default 'image/png') +- **alt** (string): An alternate text for the image +- **width** (number): Width of the image +- **height** (number): Height of the image + +## Notes + +- **Related Components**: + - `Image`: Used to render the image in case src fails to load. + +## Example Usage + +```javascript +import ImageWithFallback from '../ImageWithFallback' + +const MyComponent = () => ( + +) +export default MyComponent +``` diff --git a/packages/design-system/components/images/ImageWithFallback/__storybook__/stories.tsx b/packages/design-system/components/images/ImageWithFallback/__storybook__/stories.tsx index 11fa4c52..02db4040 100644 --- a/packages/design-system/components/images/ImageWithFallback/__storybook__/stories.tsx +++ b/packages/design-system/components/images/ImageWithFallback/__storybook__/stories.tsx @@ -1,12 +1,10 @@ -import React from 'react' - import { Meta, StoryFn, StoryObj } from '@storybook/react' import ImageWithFallback from '..' import { ImageWithFallbackProps } from '../types' const meta: Meta = { - title: '@baseapp-frontend-template / Design System/Displays/ImageWithFallback', + title: '@baseapp-frontend | designSystem/Images/ImageWithFallback', component: ImageWithFallback, } diff --git a/packages/design-system/components/inputs/Searchbar/__storybook__/Searchbar.mdx b/packages/design-system/components/inputs/Searchbar/__storybook__/Searchbar.mdx new file mode 100644 index 00000000..5ee3a451 --- /dev/null +++ b/packages/design-system/components/inputs/Searchbar/__storybook__/Searchbar.mdx @@ -0,0 +1,54 @@ +import { Meta } from '@storybook/addon-docs' + + + +# Component Documentation + +## Searchbar + +- **Purpose**: The `Searchbar` component provides a text input field specifically designed for search functionality, with optional loading and clear actions. +- **Expected Behavior**: Renders a text input field with a search icon, optional loading indicator, and a clear button when there is input. It should handle input changes and clear actions. + +## Use Cases + +- **Current Usage**: Used in search interfaces within the application. +- **Potential Usage**: Could be used in any form or interface requiring search functionality, such as filtering lists, searching databases, or querying APIs. + +## Props + +- **value** (string, required): The current value of the input field. +- **placeholder** (string, optional): The placeholder text for the input field. +- **onClear** (function, optional): Callback fired when the clear button is clicked. `(event: React.MouseEvent) => void` +- **onChange** (function, required): Callback fired when the input value changes. `(event: React.ChangeEvent) => void` +- **isPending** (boolean, optional): If true, shows a loading indicator. Defaults to false. +- **sx** (object, optional): MUI system props for custom styling. +- **InputProps** (object, optional): Additional props passed to the underlying `PureTextField` component. +- **variant** (string, optional): The variant of the text field. Defaults to 'filled'. + +## Notes + +- **Related Components**: + - PureTextField: The base text field component used internally. + - IconButton: Used for the clear button. + - CircularProgress: Used for the loading indicator. + +## Example Usage + +```javascript +import Searchbar from '../Searchbar' + +const MyComponent = () => { + const [searchValue, setSearchValue] = useState('') + + return ( + setSearchValue(e.target.value)} + onClear={() => setSearchValue('')} + isPending={false} + /> + ) +} +export default MyComponent +``` diff --git a/packages/design-system/components/inputs/Searchbar/__storybook__/stories.tsx b/packages/design-system/components/inputs/Searchbar/__storybook__/stories.tsx index 600b2b39..d00bdc53 100644 --- a/packages/design-system/components/inputs/Searchbar/__storybook__/stories.tsx +++ b/packages/design-system/components/inputs/Searchbar/__storybook__/stories.tsx @@ -6,29 +6,8 @@ import Searchbar from '..' import { SearchbarProps } from '../types' const meta: Meta> = { - title: '@baseapp-frontend | designSystem/Searchbar', + title: '@baseapp-frontend | designSystem/Inputs/Searchbar', component: Searchbar, - tags: ['autodocs'], - argTypes: { - isPending: { - control: 'boolean', - description: 'Loading state provided by the transition hook.', - }, - onClear: { - action: 'clear search', - description: 'Function to clear the search input.', - table: { - type: { summary: 'VoidFunction' }, - }, - }, - onChange: { - action: 'change input', - description: 'Function to handle input change.', - table: { - type: { summary: 'NonUndefined' }, - }, - }, - }, } export default meta diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 2d4dcf74..63819bd9 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.33", + "version": "0.0.34", "main": "./index.ts", "types": "dist/index.d.ts", "sideEffects": false, diff --git a/packages/wagtail/CHANGELOG.md b/packages/wagtail/CHANGELOG.md index 3cc0d8c8..8c128dc9 100644 --- a/packages/wagtail/CHANGELOG.md +++ b/packages/wagtail/CHANGELOG.md @@ -1,5 +1,12 @@ # @baseapp-frontend/wagtail +## 1.0.19 + +### Patch Changes + +- Updated dependencies + - @baseapp-frontend/design-system@0.0.34 + ## 1.0.18 ### Patch Changes diff --git a/packages/wagtail/package.json b/packages/wagtail/package.json index 609171fc..3c16591e 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.18", + "version": "1.0.19", "main": "./index.ts", "types": "dist/index.d.ts", "sideEffects": false,