@app-studio/web 0.1.0

package/src/components/Modal/Examples/CloseButtonModal.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { Button, Horizontal } from 'src/components';
+
+import Modal from '../Modal';
+
+export const CloseButtonModal = () => {
+  const [showWith, setShowWith] = useState(false);
+  const [showWithout, setShowWithout] = useState(false);
+
+  return (
+    <>
+      <Horizontal gap={10}>
+        <Button onPress={() => setShowWith(true)} isAuto>
+          With Close Button
+        </Button>
+        <Button onPress={() => setShowWithout(true)} isAuto>
+          Without Close Button
+        </Button>
+      </Horizontal>
+      {showWith && (
+        <Modal.Overlay isOpen={showWith} onClose={() => setShowWith(false)}>
+          <Modal.Container>
+            <Modal.Header buttonPosition="left" />
+            <Modal.Body>Cras mattis consectetur purus sit amet fermentum.</Modal.Body>
+            <Modal.Footer>
+              <Button onPress={() => setShowWith(false)}>Cancel</Button>
+            </Modal.Footer>
+          </Modal.Container>
+        </Modal.Overlay>
+      )}
+      {showWithout && (
+        <Modal.Overlay isOpen={showWithout} onClose={() => setShowWithout(false)}>
+          <Modal.Container>
+            <Modal.Header buttonPosition="none">Without Close Button</Modal.Header>
+            <Modal.Body>Cras mattis consectetur purus sit amet fermentum.</Modal.Body>
+            <Modal.Footer>
+              <Button onPress={() => setShowWithout(false)}>Cancel</Button>
+            </Modal.Footer>
+          </Modal.Container>
+        </Modal.Overlay>
+      )}
+    </>
+  );
+};

package/src/components/Modal/Examples/DefaultModal.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import { Button, Text } from 'src/components';
+
+import Modal from '../Modal';
+
+export const DefaultModal = () => {
+  const [show, setShow] = useState(false);
+
+  return (
+    <>
+      <Button onPress={() => setShow(true)} isAuto>
+        Blur Overlay
+      </Button>
+
+      {show && (
+        <Modal.Overlay isOpen={show} onClose={() => setShow(false)}>
+          <Modal.Container>
+            <Modal.Header>
+              <Text size="lg" weight="semiBold">
+                Title
+              </Text>
+            </Modal.Header>
+            <Modal.Body>
+              <Text>
+                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>
+            </Modal.Body>
+            <Modal.Footer>
+              <Button onPress={() => setShow(false)}>Cancel</Button>
+            </Modal.Footer>
+          </Modal.Container>
+        </Modal.Overlay>
+      )}
+    </>
+  );
+};

package/src/components/Modal/Examples/FullScreenModal.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { Button } from 'src/components';
+
+import Modal from '../Modal';
+
+export const FullScreenModal = () => {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <Button onPress={() => setShow(true)} isAuto>
+        Full Screen
+      </Button>
+      <Modal.Overlay isOpen={show} onClose={() => setShow(false)}>
+        <Modal.Container isFullScreen>
+          <Modal.Header>Title</Modal.Header>
+          <Modal.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.
+          </Modal.Body>
+          <Modal.Footer>
+            <Button onPress={() => setShow(false)}>Cancel</Button>
+          </Modal.Footer>
+        </Modal.Container>
+      </Modal.Overlay>
+    </>
+  );
+};

package/src/components/Modal/Examples/ModalPosition.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import { Button, Horizontal, Text } from 'src/components';
+
+import Modal from '../Modal';
+
+export const ModalPosition = () => {
+  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);
+
+  const content = (
+    <Modal.Container width="fit-content">
+      <Modal.Body>
+        <Text color="theme.error" weight="bold">
+          Unknown Error
+        </Text>
+      </Modal.Body>
+    </Modal.Container>
+  );
+
+  return (
+    <>
+      <Horizontal gap={10} wrap="nowrap">
+        <Button onPress={() => setShowTop(true)}>Top</Button>
+        <Button onPress={() => setShowBottom(true)}>Bottom</Button>
+        <Button onPress={() => setShowRight(true)}>Right</Button>
+        <Button onPress={() => setShowLeft(true)}>Left</Button>
+        <Button onPress={() => setShowCenter(true)}>Center</Button>
+      </Horizontal>
+
+      {showTop && (
+        <Modal.Overlay isOpen={showTop} onClose={() => setShowTop(false)} position="top">
+          {content}
+        </Modal.Overlay>
+      )}
+      {showBottom && (
+        <Modal.Overlay isOpen={showBottom} onClose={() => setShowBottom(false)} position="bottom">
+          {content}
+        </Modal.Overlay>
+      )}
+      {showRight && (
+        <Modal.Overlay isOpen={showRight} onClose={() => setShowRight(false)} position="right">
+          {content}
+        </Modal.Overlay>
+      )}
+
+      {showLeft && (
+        <Modal.Overlay isOpen={showLeft} onClose={() => setShowLeft(false)} position="left">
+          {content}
+        </Modal.Overlay>
+      )}
+      {showCenter && (
+        <Modal.Overlay isOpen={showCenter} onClose={() => setShowCenter(false)} position="center">
+          {content}
+        </Modal.Overlay>
+      )}
+    </>
+  );
+};

package/src/components/Modal/Examples/PreventCloseModal.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { Button } from 'src/components';
+
+import Modal from '../Modal';
+
+export const PreventClose = () => {
+  const [prevent, setPrevent] = useState(false);
+  return (
+    <>
+      <Button onPress={() => setPrevent(true)} isAuto>
+        Prevent Close Button on Overlay
+      </Button>
+
+      {prevent && (
+        <Modal.Overlay isOpen={prevent} onClose={() => setPrevent(false)} isClosePrevented>
+          <Modal.Container>
+            <Modal.Header> Prevent Close Button on Overlay</Modal.Header>
+            <Modal.Body>Cras mattis consectetur purus sit amet fermentum.</Modal.Body>
+            <Modal.Footer>
+              <Button onPress={() => setPrevent(false)}>Cancel</Button>
+            </Modal.Footer>
+          </Modal.Container>
+        </Modal.Overlay>
+      )}
+    </>
+  );
+};

package/src/components/Modal/Examples/ScrollModal.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import { Button, Text } from 'src/components';
+
+import Modal from '../Modal';
+
+export const ScrollModal = () => {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <Button onPress={() => setShow(true)} isAuto>
+        Scroll
+      </Button>
+      {show && (
+        <Modal.Overlay isOpen={show} onClose={() => setShow(false)}>
+          <Modal.Container>
+            <Modal.Header buttonPosition="none">
+              <Text size="lg" weight="semiBold">
+                Title
+              </Text>
+            </Modal.Header>
+            <Modal.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.
+            </Modal.Body>
+            <Modal.Footer>
+              <Button onPress={() => setShow(false)}>Cancel</Button>
+            </Modal.Footer>
+          </Modal.Container>
+        </Modal.Overlay>
+      )}
+    </>
+  );
+};

package/src/components/Modal/Examples/ShadowModal.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import { Button, Text } from 'src/components';
+
+import Modal from '../Modal';
+
+export const ShadowModal = () => {
+  const [show, setShow] = useState(false);
+  return (
+    <>
+      <Button onPress={() => setShow(true)} isAuto>
+        Shadow
+      </Button>
+
+      {show && (
+        <Modal.Overlay isOpen={show} onClose={() => setShow(false)}>
+          <Modal.Container shadow={{ boxShadow: '0px 7px 8px rgba(0, 0, 0, 0.6)' }}>
+            <Modal.Body>
+              <Text isTruncated 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>
+            </Modal.Body>
+          </Modal.Container>
+        </Modal.Overlay>
+      )}
+    </>
+  );
+};

package/src/components/Modal/Examples/VariantModal.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { Button, Horizontal, Text } from 'src/components';
+
+import Modal from '../Modal';
+
+export const VariantModal = () => {
+  const [showSharp, setShowSharp] = useState(false);
+  const [showRounded, setShowRounded] = useState(false);
+  return (
+    <>
+      <Horizontal gap={10}>
+        <Button onPress={() => setShowSharp(true)} isAuto>
+          Sharp
+        </Button>
+        <Button onPress={() => setShowRounded(true)} isAuto>
+          Rounded
+        </Button>
+      </Horizontal>
+
+      {showSharp && (
+        <Modal.Overlay isOpen={showSharp} onClose={() => setShowSharp(false)}>
+          <Modal.Container shape="sharp">
+            <Modal.Body>
+              <Text isTruncated 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>
+            </Modal.Body>
+          </Modal.Container>
+        </Modal.Overlay>
+      )}
+      {showRounded && (
+        <Modal.Overlay isOpen={showRounded} onClose={() => setShowRounded(false)}>
+          <Modal.Container shape="rounded">
+            <Modal.Body>
+              <Text isTruncated 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>
+            </Modal.Body>
+          </Modal.Container>
+        </Modal.Overlay>
+      )}
+    </>
+  );
+};

package/src/components/Modal/Examples/index.ts

@@ -0,0 +1,9 @@
+export * from 'src/components/Modal/Examples/BlurModal';
+export * from 'src/components/Modal/Examples/CloseButtonModal';
+export * from 'src/components/Modal/Examples/DefaultModal';
+export * from 'src/components/Modal/Examples/FullScreenModal';
+export * from 'src/components/Modal/Examples/ModalPosition';
+export * from 'src/components/Modal/Examples/PreventCloseModal';
+export * from 'src/components/Modal/Examples/ScrollModal';
+export * from 'src/components/Modal/Examples/ShadowModal';
+export * from 'src/components/Modal/Examples/VariantModal';

package/src/components/Modal/Modal/Modal.props.ts

@@ -0,0 +1,202 @@
+import React, { CSSProperties } from 'react';
+import { Elevation } from 'src/utils/elevation';
+import { Shadow } from 'app-studio';
+
+import { CloseButtonPosition, Position, Shape, Size } from './Modal.type';
+
+export interface ModalProps {
+  /**
+   * The content to be displayed inside the modal.
+   */
+  children: React.ReactNode;
+
+  /**
+   * The color of the close button in the header.
+   */
+  buttonColor?: string;
+
+  /**
+   * The size of the close button in the header.
+   */
+  iconSize?: Size;
+
+  /**
+   * Determines whether the modal should have sharp or rounded edges.
+   */
+  shape?: Shape;
+
+  /**
+   * If set to true, the modal will occupy the full width and height of the screen.
+   */
+  isFullScreen?: boolean;
+
+  /**
+   * Indicates the presence of a close button and its position within the header.
+   */
+  buttonPosition?: CloseButtonPosition;
+
+  /**
+   * The callback function to be executed when the close button is clicked or pressed.
+   */
+  onClose?: () => void;
+
+  /**
+   * The degree of blurriness applied to the overlay.
+   */
+  blur?: number;
+
+  /**
+   * If set to true, the modal will be visible.
+   */
+  isOpen?: boolean;
+
+  /**
+   * If set to true, the modal will remain open when the overlay is clicked.
+   */
+  isClosePrevented?: boolean;
+
+  /**
+   * The positioning of the modal container.
+   */
+  position?: Position;
+
+  /**
+   * Applies a shadow effect to the button.
+   */
+  shadow?: Shadow | Elevation | CSSProperties;
+
+  /**
+   * Additional properties.
+   */
+  [x: string]: any;
+}
+
+export interface ModalType extends React.FunctionComponent<ModalProps> {
+  /**
+   * The overlay component of the modal.
+   */
+  Overlay: React.FC<OverlayProps>;
+
+  /**
+   * The container component of the modal.
+   */
+  Container: React.FC<ContainerProps>;
+
+  /**
+   * The header component of the modal.
+   */
+  Header: React.FC<HeaderProps>;
+
+  /**
+   * The body component of the modal.
+   */
+  Body: React.FC<BodyProps>;
+
+  /**
+   * The footer component of the modal.
+   */
+  Footer: React.FC<FooterProps>;
+}
+
+export interface OverlayProps {
+  /**
+   * The content of the Overlay
+   */
+  children?: React.ReactNode;
+  /**
+   * The value of how much to blur the overlay
+   */
+  blur?: number;
+  /**
+   * If true, the modal will be visible
+   */
+  isOpen: boolean;
+  /**
+   * If true, the modal will not closed when the overlay is clicked
+   */
+  isClosePrevented?: boolean;
+  /**
+   * To position the modal container
+   */
+  position?: Position;
+  /**
+   * Action to be handled when the button close is clicked or pressed
+   */
+  onClose: () => void;
+  /**
+   * Other properties
+   */
+  [x: string]: any;
+}
+
+export interface HeaderProps {
+  /**
+   * The content of the header
+   */
+  buttonColor?: string;
+  /**
+   * To set the close button size
+   */
+  iconSize?: Size;
+  /**
+   * The content of the header
+   */
+  children?: React.ReactNode;
+  /**
+   * Indicates if there is a button and where to position it
+   */
+  buttonPosition?: CloseButtonPosition;
+  /**
+   * Action to be handled when the button close is clicked or pressed
+   */
+  onClose?: () => void;
+  /**
+   * Other properties
+   */
+  [x: string]: any;
+}
+
+export interface ContainerProps {
+  /**
+   * The content of the modal container
+   */
+  children: React.ReactNode;
+  /**
+   * To give a sharp or rounded edges to the modal
+   */
+  shape?: Shape;
+  /**
+   * If true, the modal will take the full width and height
+   */
+  isFullScreen?: boolean;
+  /**
+   * Set a shadow effect on the button.
+   */
+  shadow?: Shadow | Elevation | CSSProperties;
+  /**
+   * Other properties
+   */
+  [x: string]: any;
+}
+
+export interface BodyProps {
+  /**
+   * The content of the Body
+   */
+  children?: React.ReactNode;
+  /**
+   * Other properties
+   */
+  [x: string]: any;
+}
+
+export interface FooterProps {
+  /**
+   * The content of the Footer
+   */
+  children?: React.ReactNode;
+  /**
+   * Other properties
+   */
+  [x: string]: any;
+}

package/src/components/Modal/Modal/Modal.style.ts

@@ -0,0 +1,23 @@
+import { CSSProperties } from 'react';
+
+import { Position, Shape, Size } from './Modal.type';
+
+export const ContainerShapes: Record<Shape, CSSProperties> = {
+  sharp: { borderRadius: 0 },
+  rounded: { borderRadius: 4 },
+};
+export 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' },
+};
+
+export const HeaderIconSizes: Record<Size, number> = {
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 28,
+};

package/src/components/Modal/Modal/Modal.type.d.ts

@@ -0,0 +1,7 @@
+export type Position = 'top' | 'left' | 'right' | 'bottom' | 'center';
+
+export type Shape = 'sharp' | 'rounded';
+
+export type CloseButtonPosition = 'left' | 'right' | 'none';
+
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';