@app-studio/web 0.1.4 → 0.1.6

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

@@ -1,28 +0,0 @@
-import React, { useState } from 'react';
-import { Button } from 'src/components';
-
-import Modal from '../Modal';
-
-export const FullScreenModal = () => {
-  const [show, setShow] = useState(false);
-  return (
-    <>
-      <Button onClick={() => 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 onClick={() => setShow(false)}>Cancel</Button>
-          </Modal.Footer>
-        </Modal.Container>
-      </Modal.Overlay>
-    </>
-  );
-};

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

@@ -1,61 +0,0 @@
-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 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>
-
-      {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

@@ -1,27 +0,0 @@
-import React, { useState } from 'react';
-import { Button } from 'src/components';
-
-import Modal from '../Modal';
-
-export const PreventClose = () => {
-  const [prevent, setPrevent] = useState(false);
-  return (
-    <>
-      <Button onClick={() => 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 onClick={() => setPrevent(false)}>Cancel</Button>
-            </Modal.Footer>
-          </Modal.Container>
-        </Modal.Overlay>
-      )}
-    </>
-  );
-};

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

@@ -1,41 +0,0 @@
-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 onClick={() => 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 onClick={() => setShow(false)}>Cancel</Button>
-            </Modal.Footer>
-          </Modal.Container>
-        </Modal.Overlay>
-      )}
-    </>
-  );
-};

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

@@ -1,29 +0,0 @@
-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 onClick={() => 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

@@ -1,48 +0,0 @@
-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 onClick={() => setShowSharp(true)} isAuto>
-          Sharp
-        </Button>
-        <Button onClick={() => 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

@@ -1,9 +0,0 @@
-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

@@ -1,202 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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';

package/src/components/Modal/Modal/Modal.view.tsx

@@ -1,169 +0,0 @@
-import React, { useEffect } from 'react';
-import { Center, Vertical } from 'src/components';
-import { Horizontal } from 'src/components';
-import { Button } from 'src/components';
-import { View } from 'src/components/Layout/View/View';
-import { CloseSvg } from 'src/components/Svg';
-import { useModalStore } from 'src/store/useModalStore';
-
-import { BodyProps, ContainerProps, FooterProps, HeaderProps, OverlayProps } from '../Modal/Modal.props';
-import { ContainerShapes, OverlayAlignments } from '../Modal/Modal.style';
-import { HeaderIconSizes } from '../Modal/Modal.style';
-
-export const ModalOverlay: React.FC<OverlayProps> = ({
-  children,
-  blur,
-  isOpen = false,
-  isClosePrevented = false,
-  onClose = () => {},
-  position = 'center',
-  ...props
-}) => {
-  const setOpen = useModalStore((state: any) => state.setOpen);
-  const setOnClose = useModalStore((state: any) => state.setOnClose);
-
-  useEffect(() => {
-    setOnClose(onClose);
-    if (isOpen) setOpen();
-  });
-
-  if (!isOpen) return null;
-
-  const handleClick = () => {
-    if (!isClosePrevented) onClose();
-  };
-
-  return (
-    <Center
-      position="fixed"
-      top={0}
-      left={0}
-      width="100%"
-      height="100%"
-      zIndex={1000}
-      onClick={handleClick}
-      visibility={isOpen ? 'visible' : 'hidden'}
-    >
-      <View
-        cursor="pointer"
-        position="absolute"
-        top={0}
-        left={0}
-        zIndex={1000}
-        width="100vw"
-        height="100vh"
-        display="flex"
-        backgroundColor="blackAlpha.500"
-        backdropFilter={blur ? `blur(${blur}px)` : undefined}
-        onClick={handleClick}
-        {...OverlayAlignments[position]}
-        {...props}
-      >
-        {children}
-      </View>
-    </Center>
-  );
-};
-
-export const ModalContainer: React.FC<ContainerProps> = ({
-  children,
-  shadow,
-  isFullScreen = false,
-  shape = 'rounded',
-  ...props
-}) => {
-  const defaultShadow =
-    typeof document !== undefined
-      ? {
-          boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.3)',
-        }
-      : {
-          elevation: 5,
-          shadowColor: 'rgba(0, 0, 0, 0.3)',
-          shadowOffset: { width: 0, height: 2 },
-          shadowOpacity: 1,
-          shadowRadius: 8,
-        };
-
-  const handleClick = (event: any) => event.stopPropagation();
-  return (
-    <Vertical
-      cursor="default"
-      overflow="hidden"
-      backgroundColor="white"
-      width={isFullScreen ? '100%' : 600}
-      height={isFullScreen ? '100%' : 'fit-content'}
-      onClick={handleClick}
-      {...(shadow ? shadow : defaultShadow)}
-      {...ContainerShapes[shape]}
-      {...props}
-    >
-      {children}
-    </Vertical>
-  );
-};
-
-export const ModalHeader: React.FC<HeaderProps> = ({
-  children,
-  buttonColor = 'theme.primary',
-  iconSize = 'md',
-  buttonPosition = 'right',
-  ...props
-}) => {
-  const onClose = useModalStore((state: any) => state.onClose);
-
-  const buttonIcon = (
-    <Button
-      onClick={onClose}
-      colorScheme="transparent"
-      icon={<CloseSvg size={HeaderIconSizes[iconSize]} color={buttonColor} />}
-      padding={0}
-      margin={0}
-      filter="none"
-      isAuto
-    />
-  );
-
-  return (
-    <Horizontal
-      justifyContent={buttonPosition === 'none' ? 'center' : 'space-between'}
-      alignItems="center"
-      paddingVertical={15}
-      paddingHorizontal={20}
-      {...props}
-    >
-      {buttonPosition === 'left' && buttonIcon}
-      {children}
-      {buttonPosition === 'right' && buttonIcon}
-    </Horizontal>
-  );
-};
-
-export const ModalBody: React.FC<BodyProps> = ({ children, ...props }) => {
-  const defaultBorder = {
-    borderBottomWidth: 2,
-    borderTopWidth: 2,
-    borderColor: 'rgba(250, 250, 250, 1)',
-    borderStyle: 'solid',
-  };
-  return (
-    <View overflowY="auto" paddingVertical={15} paddingHorizontal={20} {...defaultBorder} {...props}>
-      {children}
-    </View>
-  );
-};
-
-export const ModalFooter: React.FC<FooterProps> = ({ children, ...props }) => {
-  return (
-    <Horizontal
-      marginTop="auto"
-      alignItems="center"
-      justifyContent="flex-end"
-      paddingVertical={15}
-      paddingHorizontal={20}
-      {...props}
-    >
-      {children}
-    </Horizontal>
-  );
-};