@app-studio/web 0.9.31 → 0.9.32

package/docs/components/Message.mdx

@@ -0,0 +1,571 @@
+### **Import**
+
+```tsx
+import { Message } from 'app-studio';
+```
+
+### **Default**
+
+It uses the isOpen and onClose properties to display the message.
+
+```tsx
+import { Button } from '../Button/Button';
+import { useState } from 'react';
+
+const [show, setShow] = useState(false);
+
+<>
+  <Button onClick={() => setShow(true)} isAuto>
+    Open Message
+  </Button>
+  <Message.Overlay isOpen={show} onClose={() => setShow(false)}>
+    <Message.Container>
+      <Message.Header>Title</Message.Header>
+      <Message.Body>
+        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+        Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
+        nisl consectetur et.
+      </Message.Body>
+      <Message.Footer>
+        <Button onClick={() => setShow(false)}>Cancel</Button>
+      </Message.Footer>
+    </Message.Container>
+  </Message.Overlay>
+</>;
+```
+
+## **Message Overlay**
+
+It represents the overlay or backdrop that appears behind the message content when the message is displayed.
+
+### **Props**
+
+| Prop             | Type          | Description                                                                                                                               | Default |
+| ---------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| isOpen           | boolean       | Whether the message overlay is open.                                                                                                       | false   |
+| onClose          | function      | Callback function to close the message.                                                                                                     |         |
+| position         | Position      | Positions the message overlay ('top', 'left', 'right', 'bottom', 'center').                                                                 | 'center' |
+| blur             | number        | Adds a blur effect on the message overlay.                                                                                                |         |
+| isClosePrevented | boolean       | Prevents the user from closing the message when clicking outside of it.                                                                   | false   |
+| styles           | CSSProperties | Optional custom styles for the MessageOverlay.                                                                                              |         |
+| className        | string        | Optional className for the MessageOverlay container.                                                                                        |         |
+
+### **FullScreen**
+
+“**is*fullScreen***” property changes the width and height of the message so that it fits the entire screen.
+
+```tsx
+import { Button } from '../Button/Button';
+import { useState } from 'react';
+
+const [show, setShow] = useState(false);
+
+<>
+  <Button onClick={() => setShow(true)} isAuto>
+    Full Screen
+  </Button>
+  <Message.Overlay isOpen={show} onClose={() => setShow(false)}>
+    <Message.Container isFullScreen>
+      <Message.Header>Title</Message.Header>
+      <Message.Body>
+        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+        Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
+        nisl consectetur et.
+      </Message.Body>
+      <Message.Footer>
+        <Button onClick={() => setShow(false)}>Cancel</Button>
+      </Message.Footer>
+    </Message.Container>
+  </Message.Overlay>
+</>;
+```
+
+### **Position**
+
+“**_position_**” places the message in the specified direction. It has a default positioning of “center”.
+
+```tsx
+import { useState } from 'react';
+import { Button } from '../Button/Button';
+import { Horizontal } from '../Layout/Horizontal/Horizontal';
+
+const [showTop, setShowTop] = useState(false);
+const [showBottom, setShowBottom] = useState(false);
+const [showRight, setShowRight] = useState(false);
+const [showLeft, setShowLeft] = useState(false);
+const [showCenter, setShowCenter] = useState(false);
+
+<>
+  <Horizontal gap={10} flexWrap="nowrap">
+    <Button onClick={() => setShowTop(true)}>Top</Button>
+    <Button onClick={() => setShowBottom(true)}>Bottom</Button>
+    <Button onClick={() => setShowRight(true)}>Right</Button>
+    <Button onClick={() => setShowLeft(true)}>Left</Button>
+    <Button onClick={() => setShowCenter(true)}>Center</Button>
+  </Horizontal>
+
+  {showBottom && (
+    <Message.Overlay isOpen={showBottom} onClose={() => setShowBottom(false)} position="bottom">
+      <Message.Container>
+        <Message.Header>Title</Message.Header>
+        <Message.Body>
+          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+          Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
+          nisl consectetur et.
+        </Message.Body>
+        <Message.Footer>
+          <Button onClick={() => setShowBottom(false)}>Cancel</Button>
+        </Message.Footer>
+      </Message.Container>
+    </Message.Overlay>
+  )}
+  {showTop && (
+    <Message.Overlay isOpen={showTop} onClose={() => setShowTop(false)} position="top">
+      <Message.Container>
+        <Message.Header>Title</Message.Header>
+        <Message.Body>
+          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+          Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
+          nisl consectetur et.
+        </Message.Body>
+        <Message.Footer>
+          <Button onClick={() => setShowTop(false)}>Cancel</Button>
+        </Message.Footer>
+      </Message.Container>
+    </Message.Overlay>
+  )}
+  {showLeft && (
+    <Message.Overlay isOpen={showLeft} onClose={() => setShowLeft(false)} position="left">
+      <Message.Container>
+        <Message.Header>Title</Message.Header>
+        <Message.Body>
+          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+          Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
+          nisl consectetur et.
+        </Message.Body>
+        <Message.Footer>
+          <Button onClick={() => setShowLeft(false)}>Cancel</Button>
+        </Message.Footer>
+      </Message.Container>
+    </Message.Overlay>
+  )}
+  {showRight && (
+    <Message.Overlay isOpen={showRight} onClose={() => setShowRight(false)} position="right">
+      <Message.Container>
+        <Message.Header>Title</Message.Header>
+        <Message.Body>
+          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+          Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
+          nisl consectetur et.
+        </Message.Body>
+        <Message.Footer>
+          <Button onClick={() => setShowRight(false)}>Cancel</Button>
+        </Message.Footer>
+      </Message.Container>
+    </Message.Overlay>
+  )}
+  {showCenter && (
+    <Message.Overlay isOpen={showCenter} onClose={() => setShowCenter(false)} position="center">
+      <Message.Container>
+        <Message.Header>Title</Message.Header>
+        <Message.Body>
+          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+          Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
+          nisl consectetur et.
+        </Message.Body>
+        <Message.Footer>
+          <Button onClick={() => setShowCenter(false)}>Cancel</Button>
+        </Message.Footer>
+      </Message.Container>
+    </Message.Overlay>
+  )}
+</>;
+```
+
+### **Blur**
+
+“**_blur_**” adds a blur effect on the message overlay.
+
+```tsx
+import { useState } from 'react';
+import { Button } from '../Button/Button';
+
+const [show, setShow] = useState(false);
+
+<>
+  <Button onClick={() => setShow(true)}>Blur Overlay</Button>
+  <Message.Overlay isOpen={show} onClose={() => setShow(false)} blur={10}>
+    <Message.Container>
+      <Message.Header>Title</Message.Header>
+      <Message.Body>
+        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+        Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
+        nisl consectetur et.
+      </Message.Body>
+      <Message.Footer>
+        <Button onClick={() => setShow(false)}>Cancel</Button>
+      </Message.Footer>
+    </Message.Container>
+  </Message.Overlay>
+</>;
+```
+
+### **Prevent Close**
+
+“**_isClosePrevented_**” prevents the user from closing the message when clicking outside of it.
+
+```tsx
+import { useState } from 'react';
+import { Button } from '../Button/Button';
+
+const [show, setShow] = useState(false);
+
+<>
+  <Button onClick={() => setShow(true)}>Blur Overlay</Button>
+  <Message.Overlay isOpen={show} onClose={() => setShow(false)} isClosePrevented>
+    <Message.Container>
+      <Message.Header>Title</Message.Header>
+      <Message.Body>
+        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+        Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque
+        nisl consectetur et.
+      </Message.Body>
+      <Message.Footer>
+        <Button onClick={() => setShow(false)}>Cancel</Button>
+      </Message.Footer>
+    </Message.Container>
+  </Message.Overlay>
+</>;
+```
+
+## **Message Container**
+
+It represents the main container or wrapper that holds all the content and components of a message.
+
+### **Props**
+| Prop | Type | Description | Default |
+| ----------- | ----------- | ----------- | ----------- |
+| isFullScreen      | boolean      |  Changes the width and height of the message so that it fits the entire screen.       |    false         |
+| variant     | 'sharp' \| 'rounded'      |  Gives a sharp or rounded edges to the message container.               | 'rounded'     |
+| shadow | object | Adds a shadow effect on the message container. | |
+| styles    | CSSProperties | Optional custom styles for the MessageContainer.                 |          |
+| className | string        | Optional className for the MessageContainer.           |          |
+
+### **Shapes**
+
+“**_shape_**” gives a sharp or rounded edges to the message container.
+
+```tsx
+import { useState } from 'react';
+import { Button } from '../Button/Button';
+import { Text } from '../Text/Text';
+import { Horizontal } from '../Layout/Horizontal/Horizontal';
+
+const [showSharp, setShowSharp] = useState(false);
+const [showRounded, setShowRounded] = useState(false);
+
+<>
+  <Horizontal gap={10}>
+    <Button onClick={() => setShowSharp(true)}>Sharp</Button>
+    <Button onClick={() => setShowRounded(true)}>Rounded</Button>
+  </Horizontal>
+
+  {showSharp && (
+    <Message.Overlay isOpen={showSharp} onClose={() => setShowSharp(false)}>
+      <Message.Container variant="sharp">
+        <Message.Body>
+          <Text  maxLines={2}>
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
+            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel
+            scelerisque nisl consectetur et.
+          </Text>
+        </Message.Body>
+      </Message.Container>
+    </Message.Overlay>
+  )}
+  {showRounded && (
+    <Message.Overlay isOpen={showRounded} onClose={() => setShowRounded(false)}>
+      <Message.Container variant="rounded">
+        <Message.Body>
+          <Text  maxLines={2}>
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
+            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel
+            scelerisque nisl consectetur et.
+          </Text>
+        </Message.Body>
+      </Message.Container>
+    </Message.Overlay>
+  )}
+</>;
+```
+
+### **Shadow**
+
+“**_shadow_**” adds a shadow effect on the message container.
+
+```tsx
+import { useState } from 'react';
+import { Button } from '../Button/Button';
+import { Text } from '../Text/Text';
+
+const [show, setShow] = useState(false);
+
+<>
+  <Button onClick={() => setShow(true)}>Shadow</Button>
+  {show && (
+    <Message.Overlay isOpen={show} onClose={() => setShow(false)}>
+      <Message.Container shadow={{ boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.6)' }}>
+        <Message.Body>
+          <Text  maxLines={2}>
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget
+            quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel
+            scelerisque nisl consectetur et.
+          </Text>
+        </Message.Body>
+      </Message.Container>
+    </Message.Overlay>
+  )}
+</>;
+```
+
+## **Message Header**
+
+It represents the header section of a message, which typically contains a title or heading and optionally other elements such as a close button or additional controls.
+
+### **Close Button Alignment**
+
+“**_buttonPosition_**” places the closing button found in the header message in the specified direction. It has a default position of “**right**”.
+
+```tsx
+import { useState } from 'react';
+import { Button } from '../Button/Button';
+import { Horizontal } from '../Layout/Horizontal/Horizontal';
+
+const [showRight, setShowRight] = useState(false);
+const [showWithout, setShowWithout] = useState(false);
+const [showLeft, setShowLeft] = useState(false);
+
+<>
+  <Horizontal gap={10}>
+    <Button onClick={() => setShowRight(true)}>Right</Button>
+    <Button onClick={() => setShowWithout(true)}>Without</Button>
+    <Button onClick={() => setShowLeft(true)}>Left</Button>
+  </Horizontal>
+  {showRight && (
+    <Message.Overlay isOpen={showRight} onClose={() => setShowRight(false)}>
+      <Message.Container>
+        <Message.Header> Right</Message.Header>
+        <Message.Body>Cras mattis consectetur purus sit amet fermentum.</Message.Body>
+        <Message.Footer>
+          <Button onClick={() => setShowRight(false)}>Cancel</Button>
+        </Message.Footer>
+      </Message.Container>
+    </Message.Overlay>
+  )}
+  {showWithout && (
+    <Message.Overlay isOpen={showWithout} onClose={() => setShowWithout(false)}>
+      <Message.Container>
+        <Message.Header buttonPosition="none"> Without</Message.Header>
+        <Message.Body>Cras mattis consectetur purus sit amet fermentum.</Message.Body>
+        <Message.Footer>
+          <Button onClick={() => setShowWithout(false)}>Cancel</Button>
+        </Message.Footer>
+      </Message.Container>
+    </Message.Overlay>
+  )}
+  {showLeft && (
+    <Message.Overlay isOpen={showLeft} onClose={() => setShowLeft(false)}>
+      <Message.Container>
+        <Message.Header buttonPosition="left">Left</Message.Header>
+        <Message.Body>Cras mattis consectetur purus sit amet fermentum.</Message.Body>
+        <Message.Footer>
+          <Button onClick={() => setShowLeft(false)}>Cancel</Button>
+        </Message.Footer>
+      </Message.Container>
+    </Message.Overlay>
+  )}
+</>;
+```
+
+## **Message Body**
+
+It represents the main content area of a message, where the primary information or user interaction elements are displayed.
+
+### **LargeContent**
+
+A vertical scroll is displayed, if the content height exceed the body height.
+
+```tsx
+import { useState } from 'react';
+import { Button } from '../Button/Button';
+import { Text } from '../Text/Text';
+
+const [show, setShow] = useState(false);
+
+<>
+  <Button onClick={() => setShow(true)}>Scroll</Button>
+  {show && (
+    <Message.Overlay isOpen={show} onClose={() => setShow(false)}>
+      <Message.Container>
+        <Message.Header buttonPosition="none">
+          <Text size="lg" weight="semibold">
+            Title
+          </Text>
+        </Message.Header>
+        <Message.Body height="200px">
+          Cras mattis consectetur purus sit amet fermentum.Cras mattis consectetur purus sit amet fermentum.Cras mattis
+          consectetur purus sit amet fermentum.Cras mattis consectetur purus sit amet fermentum.Cras mattis consectetur
+          purus sit amet fermentum.Cras mattis consectetur purus sit amet fermentum.Cras mattis consectetur purus sit
+          amet fermentum.Cras mattis consectetur purus sit amet fermentum.Cras mattis consectetur purus sit amet Cras
+          mattis consectetur purus sit amet fermentum.Cras mattis consectetur purus sit amet fermentum.Cras mattis
+          consectetur purus sit amet fermentum.Cras mattis consectetur purus sit amet fermentum.Cras mattis consectetur
+          purus sit amet fermentum.Cras mattis consectetur purus sit amet fermentum.Cras mattis consectetur purus sit
+          amet fermentum.Cras mattis consectetur purus sit amet fermentum.Cras mattis consectetur purus sit amet
+          fermentum.Cras mattis consectetur purus sit amet fermentum.
+        </Message.Body>
+        <Message.Footer>
+          <Button onClick={() => setShow(false)}>Cancel</Button>
+        </Message.Footer>
+      </Message.Container>
+    </Message.Overlay>
+  )}
+</>;
+```
+
+## **Message Footer**
+
+It represents the footer section of a message, where the primary information or user interaction elements are displayed.
+
+```tsx
+import { useState } from 'react';
+import { Button } from '../Button/Button';
+import { Text } from '../Text/Text';
+
+const [show, setShow] = useState(false);
+
+<>
+  <Button onClick={() => setShow(true)}>Footer</Button>
+  {show && (
+    <Message.Overlay isOpen={show} onClose={() => setShow(false)}>
+      <Message.Container>
+        <Message.Header buttonPosition="none">
+          <Text size="lg" weight="semibold">
+            Title
+          </Text>
+        </Message.Header>
+        <Message.Body height="200px">
+          Cras mattis consectetur purus sit amet fermentum.Cras mattis consectetur purus sit amet fermentum.Cras mattis
+          consectetur purus sit amet fermentum.Cras mattis consectetur purus sit amet fermentum.Cras mattis consectetur
+          purus sit amet fermentum.
+        </Message.Body>
+        <Message.Footer>
+          <Button onClick={() => setShow(false)}>Cancel</Button>
+        </Message.Footer>
+      </Message.Container>
+    </Message.Overlay>
+  )}
+</>;
+```
+
+## **Types**
+
+```tsx
+type Position = 'top' | 'left' | 'right' | 'bottom' | 'center';
+```
+
+```tsx
+type Shape = 'sharp' | 'rounded';
+```
+
+```tsx
+type CloseButtonPosition = 'left' | 'right' | 'none';
+```
+
+```tsx
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+```
+
+## **Default Styles**
+
+#### **OverlayAlignments**
+
+```tsx
+const OverlayAlignments: Record<Position, CSSProperties> = {
+  center: { justifyContent: 'center', alignItems: 'center' },
+  top: { justifyContent: 'center' },
+  right: { justifyContent: 'flex-end', alignItems: 'center' },
+  bottom: { justifyContent: 'center', alignItems: 'flex-end' },
+  left: { alignItems: 'center' },
+};
+```
+
+#### **ContainerShapes**
+
+```tsx
+const ContainerShapes: Record<Shape, CSSProperties> = {
+  sharp: { borderRadius: 0 },
+  rounded: { borderRadius: 4 },
+};
+```
+
+#### **HeaderIconSizes**
+
+```tsx
+const HeaderIconSizes: Record<Size, number> = {
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 28,
+};
+```
+
+</file_content>
+
+Try again with fewer/more precise SEARCH blocks.
+(If you run into this error two times in a row, you may use the write_to_file tool as a fallback.)
+</error><environment_details>
+# VSCode Visible Files
+public/files/media/Message.mdx
+
+# VSCode Open Tabs
+src/components/Form/CountryPicker/CountryPicker/CountryPicker.view.tsx
+src/components/DragAndDrop/DragAndDrop.tsx
+public/files/media/DragAndDrop.mdx
+public/files/media/File.mdx
+public/files/media/Form.mdx
+public/files/media/Formik.mdx
+public/files/media/Icon.mdx
+public/files/media/Uploader.mdx
+public/files/media/Alert.mdx
+public/files/media/AspectRatio.mdx
+public/files/media/Avatar.mdx
+public/files/media/Badge.mdx
+public/files/media/Button.mdx
+public/files/media/Center.mdx
+public/files/media/Checkbox.mdx
+public/files/media/ComboBox.mdx
+public/files/media/CountryPicker.mdx
+public/files/media/DatePicker.mdx
+public/files/media/Horizontal.mdx
+public/files/media/Label.mdx
+public/files/media/Link.mdx
+public/files/media/Loader.mdx
+public/files/media/Message.mdx
+src/components/Button/Button/Button.view.tsx
+src/utils/componentsPageImports.tsx
+src/components/Uploader/Uploader.tsx
+src/components/Uploader/Uploader.props.ts
+src/pages/upload.page.tsx
+src/components/index.tsx
+src/components/Text/Text.tsx
+src/components/Text/Text/Text.view.tsx
+package.json
+src/components/Button/examples/effect.tsx
+
+# Current Time
+22/03/2025 9:02:50 PM (Africa/Dar_es_Salaam, UTC+3:00)
+
+# Current Mode
+ACT MODE
+</environment_details>