@app-studio/web 0.1.4 → 0.1.6

package/src/components/Link/examples/IsExternal.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { Text } from 'src/components';
-
-import { Link } from '../Link';
-
-export const ExternalLink = () => (
-  <Link href={'https://www.npmjs.com/package/app-studio'} isExternal iconSize="md">
-    <Text size="2xl">External</Text>
-  </Link>
-);

package/src/components/Link/examples/Underline.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { Text, Vertical } from 'src/components';
-
-import { Link } from '../Link';
-
-export const UnderlineLink = () => (
-  <Vertical gap={10}>
-    <Link href={'https://www.npmjs.com/package/app-studio'} underline="default">
-      Default
-    </Link>
-    <Link href={'https://www.npmjs.com/package/app-studio'} underline="hover">
-      Hover
-    </Link>
-    <Link
-      href={'https://www.npmjs.com/package/app-studio'}
-      underline="underline"
-      color="theme.primary"
-      textDecorationColor="theme.primary"
-    >
-      <Text>Underline</Text>
-    </Link>
-  </Vertical>
-);

package/src/components/Loader/Loader/Loader.props.ts

@@ -1,105 +0,0 @@
-import React from 'react';
-
-import { LoaderType, Size, Speed, TextPosition } from './Loader.type';
-
-/**
- * Props for the Loader component.
- */
-export interface LoaderProps {
-  /**
-   * The text content.
-   */
-  children?: React.ReactNode;
-
-  /**
-   * The color of the loader.
-   */
-  loaderColor?: string;
-
-  /**
-   * The type of loader.
-   */
-  type?: LoaderType;
-
-  /**
-   * The color of the text.
-   */
-  textColor?: string;
-
-  /**
-   * The position where to place the children.
-   */
-  textPosition?: TextPosition;
-
-  /**
-   * The width and height of the loader.
-   */
-  size?: number | Size;
-
-  /**
-   * The rotation speed of the loader.
-   */
-  speed?: Speed;
-
-  /**
-   * Additional properties.
-   */
-  [x: string]: any;
-}
-
-export interface DefaultSpinnerProps {
-  /**
-   * To set the spinner height and width
-   */
-  size?: number | Size;
-  /**
-   * To set the rate at which the spinner moves
-   */
-  speed?: Speed;
-  /**
-   * To change the spinner color
-   */
-  color?: string;
-  /**
-   * Other props
-   *  */
-  [x: string]: any;
-}
-
-export interface DottedProps {
-  /**
-   * To set the spinner height and width
-   */
-  size?: number | Size;
-  /**
-   * To set the rate at which the spinner moves
-   */
-  speed?: Speed;
-  /**
-   * To change the spinner color
-   */
-  color?: string;
-  /**
-   * Other properties
-   */
-  [x: string]: any;
-}
-
-export interface QuarterProps {
-  /**
-   * To set the spinner height and width
-   */
-  size?: number | Size;
-  /**
-   * To set the rate at which the spinner moves
-   */
-  speed?: Speed;
-  /**
-   * To change the spinner color
-   */
-  color?: string;
-  /**
-   *Other properties
-   */
-  [x: string]: any;
-}

package/src/components/Loader/Loader/Loader.style.ts

@@ -1,25 +0,0 @@
-import { Size, Speed } from './Loader.type';
-
-export const DefaultEllipsisSpeeds: Record<Speed, number> = {
-  fast: 0.4,
-  normal: 0.6,
-  slow: 0.8,
-};
-
-export const DefaultSizes: Record<Size, number> = {
-  xs: 14,
-  sm: 18,
-  md: 22,
-  lg: 26,
-  xl: 30,
-  '2xl': 40,
-  '3xl': 50,
-  '4xl': 60,
-  '5xl': 70,
-  '6xl': 80,
-};
-export const DefaultSpeeds: Record<Speed, number> = {
-  fast: 50,
-  normal: 100,
-  slow: 300,
-};

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

@@ -1,4 +0,0 @@
-export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
-export type LoaderType = 'default' | 'dotted' | 'quarter';
-export type TextPosition = 'right' | 'left' | 'top' | 'bottom';
-export type Speed = 'fast' | 'normal' | 'slow';

package/src/components/Loader/Loader/Loader.view.tsx

@@ -1,138 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useTheme } from 'app-studio';
-import { Center, View } from 'src/components';
-
-import { DefaultSpinnerProps, DottedProps, LoaderProps, QuarterProps } from '../Loader/Loader.props';
-
-import { DefaultSizes, DefaultSpeeds } from './Loader.style';
-
-const DefaultSpinner: React.FC<DefaultSpinnerProps> = ({
-  size = 'md',
-  speed = 'normal',
-  color = 'theme.loading',
-  ...props
-}) => {
-  const theme = useTheme();
-  const colorStyle = theme.getColor(color);
-  const sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
-
-  const [angle, setAngle] = useState(0);
-
-  useEffect(() => {
-    const intervalId = setInterval(() => {
-      setAngle((prevAngle) => prevAngle + 45);
-    }, DefaultSpeeds[speed]);
-
-    return () => clearInterval(intervalId);
-  }, [speed]);
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={`${sizeStyle}px`}
-      height={`${sizeStyle}px`}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={colorStyle}
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      style={{ transform: `rotate(${angle}deg)` }}
-      {...props}
-    >
-      <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
-      <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
-      <g id="SVGRepo_iconCarrier">
-        <path d="M21 12a9 9 0 11-6.219-8.56"></path>
-      </g>
-    </svg>
-  );
-};
-
-const Dotted: React.FC<DottedProps> = ({ size = 'md', speed = 'normal', color = 'theme.loading', ...props }) => {
-  const theme = useTheme();
-  const colorStyle = theme.getColor(color);
-  const sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
-
-  const [angle, setAngle] = useState(0);
-
-  useEffect(() => {
-    const intervalId = setInterval(() => {
-      setAngle((prevAngle) => prevAngle + 45);
-    }, DefaultSpeeds[speed]);
-
-    return () => clearInterval(intervalId);
-  }, [speed]);
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 50 50"
-      width={`${sizeStyle}px`}
-      height={`${sizeStyle}px`}
-      style={{ transform: `rotate(${angle}deg)` }}
-      {...props}
-    >
-      <circle cx="10" cy="25" r="4" fill={colorStyle} />
-      <circle cx="25" cy="25" r="4" fill={colorStyle} />
-      <circle cx="40" cy="25" r="4" fill={colorStyle} />
-    </svg>
-  );
-};
-
-const Quarter: React.FC<QuarterProps> = ({ size = 'md', speed = 'normal', color = 'theme.loading', ...props }) => {
-  const theme = useTheme();
-  const colorStyle = theme.getColor(color);
-  const sizeStyle = typeof size === 'number' ? size : DefaultSizes[size];
-
-  const [angle, setAngle] = useState(0);
-
-  useEffect(() => {
-    const intervalId = setInterval(() => {
-      setAngle((prevAngle) => prevAngle + 45);
-    }, DefaultSpeeds[speed]);
-
-    return () => clearInterval(intervalId);
-  }, [speed]);
-
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 50 50"
-      width={`${sizeStyle}px`}
-      height={`${sizeStyle}px`}
-      style={{ transform: `rotate(${angle}deg)` }}
-      {...props}
-    >
-      <circle cx="25" cy="25" r="20" fill="none" stroke={colorStyle} strokeWidth="5" strokeDasharray="1,10" />
-    </svg>
-  );
-};
-const LoaderView: React.FC<LoaderProps> = ({
-  size,
-  children,
-  textColor,
-  loaderColor,
-  type = 'default',
-  speed = 'normal',
-  textPosition = 'right',
-  ...props
-}) => {
-  const style = { size, speed, color: loaderColor };
-
-  const variants = {
-    default: <DefaultSpinner {...style} />,
-    dotted: <Dotted {...style} />,
-    quarter: <Quarter {...style} />,
-  };
-
-  return (
-    <Center gap={10} flexDirection={textPosition === 'top' || textPosition === 'bottom' ? 'column' : 'row'} {...props}>
-      {(textPosition === 'left' || textPosition === 'top') && children && <View color={textColor}>{children}</View>}
-      {variants[type]}
-      {(textPosition === 'right' || textPosition === 'bottom') && children && <View color={textColor}>{children}</View>}
-    </Center>
-  );
-};
-
-export default LoaderView;

package/src/components/Loader/Loader.md

@@ -1,111 +0,0 @@
-### Import
-
-```tsx static
-import { Loading } from 'app-studio';
-```
-
-### Default
-
-```tsx
-<Loading />
-```
-
-### Sizes
-
-“**_size_**” changes the the loader size. It has type “Size” with a default value of “_md_”.
-
-```tsx
-import { Horizontal } from '../Layout/Horizontal/Horizontal';
-
-<Horizontal wrap="nowrap">
-  {['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'].map((size) => (
-    <Loading key={size} size={size} />
-  ))}
-</Horizontal>;
-```
-
-### Types
-
-“**_type_**” property is used to change the default loader. It has a type "LoaderType”.
-
-```tsx
-import { Horizontal } from '../Layout/Horizontal/Horizontal';
-
-<Horizontal justifyContent="space-evenly">
-  {['default', 'quarter', 'dotted'].map((type) => (
-    <Loading key={type} type={type} />
-  ))}
-</Horizontal>;
-```
-
-### Speed
-
-“**_speed_**” makes the loader rotate faster. It has a type “[Speed”](https://www.notion.so/c8ba3ae395a0419c8e55a250b7744f69).
-
-```tsx
-import { Horizontal } from '../Layout/Horizontal/Horizontal';
-
-<Horizontal justifyContent="space-evenly">
-  {['slow', 'normal', 'fast'].map((speed) => (
-    <Loading key={speed} speed={speed} />
-  ))}
-</Horizontal>;
-```
-
-### Color
-
-“**_color_**” changes the style colour of the text and the loader.
-
-```tsx
-import { Horizontal } from '../Layout/Horizontal/Horizontal';
-
-<Horizontal justifyContent="space-evenly">
-  <Loading loaderColor="black" textColor="black">
-    Submitting
-  </Loading>
-  <Loading loaderColor="theme.primary" textColor="theme.primary" textPosition="left">
-    Submitting
-  </Loading>
-</Horizontal>;
-```
-
-### TextPosition
-
-“**_text_**” includes a description with the loader.
-
-```tsx
-import { Horizontal } from '../Layout/Horizontal/Horizontal';
-
-<Horizontal justifyContent="space-evenly">
-  <Loading loaderColor="black" textColor="black">
-    Submitting
-  </Loading>
-  <Loading loaderColor="theme.primary" textColor="theme.primary" textPosition="top">
-    Submitting
-  </Loading>
-  <Loading loaderColor="theme.primary" textColor="theme.primary" textPosition="bottom">
-    Submitting
-  </Loading>
-  <Loading loaderColor="theme.primary" textColor="theme.primary" textPosition="left">
-    Submitting
-  </Loading>
-</Horizontal>;
-```
-
-## Types
-
-```tsx static
-type LoaderType = 'default' | 'quarter' | 'dotted';
-```
-
-```tsx static
-type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-```
-
-```tsx static
-type TextPosition = 'top' | 'right' | 'bottom' | 'left';
-```
-
-```tsx static
-type Speed = 'fast' | 'normal' | 'slow';
-```

package/src/components/Loader/Loader.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-import { LoaderProps } from './Loader/Loader.props';
-import LoaderView from './Loader/Loader.view';
-
-const LoadingComponent: React.FC<LoaderProps> = (props) => <LoaderView {...props} />;
-
-/**
- * It  gives the user an insight about an action being processed. It may have an undefined waiting time or display the process length.
- */
-export const Loading = LoadingComponent;

package/src/components/Loader/examples/ColorLoader.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { Horizontal, Loading } from 'src/components';
-
-export const StyleLoader = () => (
-  <Horizontal gap={15} wrap="nowrap">
-    <Loading loaderColor="black" textColor="black">
-      Submitting
-    </Loading>
-    <Loading loaderColor="theme.primary" textColor="theme.primary" textPosition="left">
-      Submitting
-    </Loading>
-  </Horizontal>
-);

package/src/components/Loader/examples/DefaultLoader.tsx

@@ -1,4 +0,0 @@
-import React from 'react';
-import { Loading } from 'src/components';
-
-export const DefaultLoader = () => <Loading />;

package/src/components/Loader/examples/PositionLoader.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { Loading, Vertical } from 'src/components';
-
-export const PositionLoader = () => (
-  <Vertical gap={15}>
-    <Loading loaderColor="black" textColor="black">
-      Submitting
-    </Loading>
-    <Loading loaderColor="theme.primary" textColor="theme.primary" textPosition="top">
-      Submitting
-    </Loading>
-    <Loading loaderColor="theme.primary" textColor="theme.primary" textPosition="bottom">
-      Submitting
-    </Loading>
-    <Loading loaderColor="theme.primary" textColor="theme.primary" textPosition="left">
-      Submitting
-    </Loading>
-  </Vertical>
-);

package/src/components/Loader/examples/SizeLoader.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Loading, Vertical } from 'src/components';
-
-import { Size } from '../Loader/Loader.type';
-
-export const SizeLoader = () => (
-  <Vertical wrap="nowrap">
-    {['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'].map((size) => (
-      <Loading key={size} size={size as Size} />
-    ))}
-  </Vertical>
-);

package/src/components/Loader/examples/SpeedLoader.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Horizontal, Loading } from 'src/components';
-
-import { Speed } from '../Loader/Loader.type';
-
-export const SpeedLoader = () => (
-  <Horizontal justifyContent="space-evenly">
-    {['slow', 'normal', 'fast'].map((speed) => (
-      <Loading key={speed} speed={speed as Speed} />
-    ))}
-  </Horizontal>
-);

package/src/components/Loader/examples/TextLoader.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import { Loading } from 'src/components';
-
-export const TextLoader = () => (
-  <Loading textColor="theme.secondary" textPosition="left" loaderColor="theme.secondary">
-    Loading
-  </Loading>
-);

package/src/components/Loader/examples/VariantLoader.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Horizontal, Loading } from 'src/components';
-
-import { LoaderType } from '../Loader/Loader.type';
-
-export const TypeLoader = () => (
-  <Horizontal justifyContent="space-evenly">
-    {['default', 'quarter', 'dotted'].map((type) => (
-      <Loading key={type} type={type as LoaderType} />
-    ))}
-  </Horizontal>
-);

package/src/components/Loader/examples/index.ts

@@ -1,7 +0,0 @@
-export { StyleLoader } from 'src/components/Loader/examples/ColorLoader';
-export { DefaultLoader } from 'src/components/Loader/examples/DefaultLoader';
-export { PositionLoader } from 'src/components/Loader/examples/PositionLoader';
-export { SizeLoader } from 'src/components/Loader/examples/SizeLoader';
-export { SpeedLoader } from 'src/components/Loader/examples/SpeedLoader';
-export { TextLoader } from 'src/components/Loader/examples/TextLoader';
-export { TypeLoader } from 'src/components/Loader/examples/VariantLoader';

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

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

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

@@ -1,44 +0,0 @@
-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 onClick={() => setShowWith(true)} isAuto>
-          With Close Button
-        </Button>
-        <Button onClick={() => 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 onClick={() => 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 onClick={() => setShowWithout(false)}>Cancel</Button>
-            </Modal.Footer>
-          </Modal.Container>
-        </Modal.Overlay>
-      )}
-    </>
-  );
-};

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

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