@app-studio/web 0.1.0

package/src/components/Link/Link.md

@@ -0,0 +1,61 @@
+### **Import**
+
+```tsx static
+import { Link } from "app-studio";
+```
+
+### **Default**
+
+```tsx
+<Link>Click Me</Link>
+```
+
+### **Underline**
+
+“**_underline_**” modifies the text decoration of the link. It has a type TextDecorationStyle.
+
+```tsx
+import { Vertical } from "../Layout/Vertical/Vertical";
+import { Text } from "../Text/Text";
+
+<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"
+    color="black"
+  >
+    Hover
+  </Link>
+  <Link
+    href="https://www.npmjs.com/package/app-studio"
+    underline="underline"
+    color="theme.primary"
+  >
+    <Text>Underline</Text>
+  </Link>
+</Vertical>;
+```
+
+### **IsExternal**
+
+“**_isExternal_**” enables the opening of URL links in a new tab. When set to true, it adds an icon on the right side of the link content, visually indicating that it is an external link.
+
+```tsx
+import { Text } from "../Text/Text";
+<Link
+  href={"https://www.npmjs.com/package/app-studio"}
+  iconSize="md"
+  isExternal
+>
+  <Text size="2xl">External</Text>
+</Link>;
+```
+
+### Types
+
+```tsx static
+type TextDecorationStyle = "default" | "hover" | "underline";
+```

package/src/components/Link/Link.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { LinkProps } from './Link/Link.props';
+import { useLinkState } from './Link/Link.state';
+import LinkView from './Link/Link.view';
+
+const LinkComponent: React.FC<LinkProps> = (props) => {
+  const linkStates = useLinkState();
+  return <LinkView {...linkStates} {...props} />;
+};
+
+/**
+ * Link allows users to navigate from page to page. It have a similar appearance as the hyperlink.
+ */
+export const Link = LinkComponent;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import { Link } from '../Link';
+
+export const DefaultLink = () => <Link href="/">Default</Link>;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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