BA-2141: Add Missing MDX Doc Files for BaseApp Frontend Template Group 3

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

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,

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

packages/design-system/components/images/ImageWithFallback/__storybook__/ImageWithFallback.mdx

@@ -0,0 +1,47 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | designSystem/Images/ImageWithFallback" />
+
+# 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 = () => (
+  <ImageWithFallback
+    src="/webp/home-banner.webp"
+    fallbackSrc="/webp/home-banner.png"
+    alt="Home Banner"
+    width={300}
+    height={400}
+  />
+)
+export default MyComponent
+```

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,
 }
 

packages/design-system/components/inputs/Searchbar/__storybook__/Searchbar.mdx

@@ -0,0 +1,54 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | designSystem/Inputs/Searchbar" />
+
+# 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<HTMLButtonElement>) => void`
+- **onChange** (function, required): Callback fired when the input value changes. `(event: React.ChangeEvent<HTMLInputElement>) => 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 (
+    <Searchbar
+      placeholder="Search"
+      value={searchValue}
+      onChange={(e) => setSearchValue(e.target.value)}
+      onClear={() => setSearchValue('')}
+      isPending={false}
+    />
+  )
+}
+export default MyComponent
+```

packages/design-system/components/inputs/Searchbar/__storybook__/stories.tsx

@@ -6,29 +6,8 @@ import Searchbar from '..'
 import { SearchbarProps } from '../types'
 
 const meta: Meta<WithControllerProps<SearchbarProps>> = {
-  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<TextFieldProps["onChange"]>' },
-      },
-    },
-  },
 }
 
 export default meta

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,

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

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,