@app-studio/web 0.1.0

package/src/components/Layout/Input/FieldLayout/FieldLayout/FieldLayout.props.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Size, TextFieldStyles } from 'src/components/Layout/configs/Input.type';
+
+export interface FieldProps {
+  /**
+   * The content to be rendered inside the Field.
+   */
+  children?: React.ReactNode;
+  /**
+   * The size of the field (default: "md").
+   */
+  size?: Size;
+  /**
+   * Determines if the field is disabled (default: false).
+   */
+  isDisabled?: boolean;
+  /**
+   * Determines if the field is read-only (default: false).
+   */
+  isReadOnly?: boolean;
+  /**
+   * CSS styles applied to the field (default: {}).
+   */
+  styles?: TextFieldStyles;
+  /**
+   * Additional properties and attributes for the field.
+   */
+  [x: string]: any;
+}

package/src/components/Layout/Input/FieldLayout/FieldLayout.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {Typography} from 'app-studio';
+
+import { Vertical } from '../../Vertical/Vertical';
+
+import { FieldProps } from './FieldLayout/FieldLayout.props';
+
+export const FieldLayout: React.FC<FieldProps> = ({
+  children,
+  size = 'md',
+  isDisabled = false,
+  isReadOnly = false,
+  styles = { text: {} },
+  ...props
+}) => (
+  <Vertical
+    gap={2}
+    margin={0}
+    padding={0}
+    width="100%"
+    heigth="100%"
+    border="none"
+    position="relative"
+    fontSize={Typography.fontSizes[size]}
+    backgroundColor="transparent"
+    color={isDisabled ? 'theme.text.disable' : 'theme.text.normal'}
+    cursor={isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'}
+    {...styles['text']}
+    {...props}
+  >
+    {children}
+  </Vertical>
+);

package/src/components/Layout/Input/FieldWrapper/FieldWrapper.props.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export interface WrapperFieldProps {
+  /**
+   * The content to be rendered inside the Wrapper Field.
+   */
+  children?: React.ReactNode;
+  /**
+   * Additional properties and attributes for the field.
+   */
+  [x: string]: any;
+}

package/src/components/Layout/Input/FieldWrapper/FieldWrapper.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { Vertical } from '../../Vertical/Vertical';
+
+import { WrapperFieldProps } from './FieldWrapper.props';
+
+export const FieldWrapper: React.FC<WrapperFieldProps> = ({ children, ...props }) => (
+  <Vertical width="100%" {...props}>
+    {children}
+  </Vertical>
+);

package/src/components/Layout/Input/HelperText/HelperText.props.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { TextFieldStyles } from 'src/components/Layout/configs/Input.type';
+
+export interface HelperTextProps {
+  /**
+   * The content to be rendered inside the HelperText.
+   */
+  children: React.ReactNode;
+  /**
+   * If true, changes the input style to indicate error.
+   */
+  error?: boolean;
+  /**
+   * CSS styles applied to the HelperText.
+   */
+  styles?: TextFieldStyles;
+  /**
+   * Additional properties and attributes for the field.
+   */
+  [x: string]: any;
+}

package/src/components/Layout/Input/HelperText/HelperText.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Text } from 'src/components';
+
+import { HelperTextProps } from './HelperText.props';
+
+export const HelperText: React.FC<HelperTextProps> = ({
+  children,
+  styles = { helperText: {} },
+  error = false,
+  ...props
+}) => (
+  <Text
+    size="xs"
+    marginVertical={0}
+    marginHorizontal={0}
+    color={error ? 'theme.error' : 'theme.text.dark'}
+    {...(styles['helperText'] as any)}
+    {...props}
+  >
+    {children}
+  </Text>
+);

package/src/components/Layout/Input/index.ts

@@ -0,0 +1,7 @@
+export * from 'src/components/Layout/Input/FieldContainer/FieldContainer';
+export * from 'src/components/Layout/Input/FieldContent/FieldContent';
+export * from 'src/components/Layout/Input/FieldIcons/FieldIcons';
+export * from 'src/components/Layout/Input/FieldLabel/FieldLabel';
+export * from 'src/components/Layout/Input/FieldLayout/FieldLayout';
+export * from 'src/components/Layout/Input/FieldWrapper/FieldWrapper';
+export * from 'src/components/Layout/Input/HelperText/HelperText';

package/src/components/Layout/Vertical/Vertical/Vertical.props.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { Justify, Wrap } from '../../configs/Input.type';
+
+export interface VerticalProps {
+  /**
+   * The layout content
+   */
+  children: React.ReactNode;
+  /**
+   * It aligns the elements of the container according to the available space.
+   */
+  justify?: Justify;
+  /**
+   * To specify, if the items should be wrap or not, based on available space on the line.
+   */
+  wrap?: Wrap;
+  /**
+   * If true, the items' position on the vertical axis is reversed.
+   */
+  isReversed?: boolean;
+  /**
+   * other properties
+   */
+  [x: string]: any;
+}

package/src/components/Layout/Vertical/Vertical/Vertical.type.ts

@@ -0,0 +1,3 @@
+export type Wrap = 'wrap' | 'nowrap' | 'wrap-reverse';
+
+export type Justify = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';

package/src/components/Layout/Vertical/Vertical/Vertical.view.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { View } from 'app-studio';
+
+import { VerticalProps } from './Vertical.props';
+
+const VerticalView: React.FC<VerticalProps> = ({
+  children,
+  wrap = 'nowrap',
+  justify = 'flex-start',
+  isReversed = false,
+  ...props
+}) => (
+  <View
+    display="flex"
+    flexWrap={wrap}
+    flexDirection={isReversed ? 'column-reverse' : 'column'}
+    justifyContent={justify}
+    {...props}
+  >
+    {children}
+  </View>
+);
+export default VerticalView;

package/src/components/Layout/Vertical/Vertical.md

@@ -0,0 +1,120 @@
+### **Import**
+
+```tsx static
+import { Vertical } from "app-studio";
+```
+
+### **Default**
+
+Flex direction is set as “column.
+
+```tsx
+import { View } from "../View/View";
+
+<Vertical>
+  <View height={50} backgroundColor="theme.primary" />
+  <View height={50} backgroundColor="theme.secondary" />
+  <View height={50} backgroundColor="theme.warning" />
+</Vertical>;
+```
+
+### **Wrap**
+
+“**_wrap_**” specifies if the items should be wrap or not based on the available space on the line. By default, wrap is set to “wrap”.
+
+**Example**
+
+```tsx
+import { Horizontal } from "../Horizontal/Horizontal";
+import { View } from "../View/View";
+
+const size = {
+  width: 50,
+  height: 50,
+};
+
+<Horizontal gap={5} justify="space-evenly">
+  {["wrap", "nowrap", "wrap-reverse"].map((wrapping, index) => (
+    <View key={index}>
+      <View>{wrapping}</View>
+      <Vertical wrap={wrapping} gap={5} height={200} flex={1}>
+        <View backgroundColor="theme.primary" {...size} />
+        <View backgroundColor="theme.secondary" {...size} />
+        <View backgroundColor="theme.warning" {...size} />
+        <View backgroundColor="theme.success" {...size} />
+        <View backgroundColor="theme.error" {...size} />
+        <View backgroundColor="color.blue" {...size} />
+      </Vertical>
+    </View>
+  ))}
+</Horizontal>;
+```
+
+## **Reverse**
+
+“**_isReversed_**” renders the items in the reverse order at the end of the main axis.
+
+```tsx
+import { View } from "../View/View";
+
+<Vertical isReversed gap={5}>
+  <View height={50} backgroundColor="theme.primary" />
+  <View height={50} backgroundColor="theme.secondary" />
+  <View height={50} backgroundColor="theme.warning" />
+</Vertical>;
+```
+
+## **Justify**
+
+“**_justify_**” with type “Justify”, aligns the elements of the container according to the available space.
+
+```tsx
+import { Horizontal } from "../Horizontal/Horizontal";
+import { View } from "../View/View";
+
+const size = {
+  width: 50,
+  height: 50,
+};
+
+<Horizontal gap={20} wrap="nowrap" justify="space-between">
+  {[
+    "flex-start",
+    "flex-end",
+    "center",
+    "space-between",
+    "space-around",
+    "space-evenly",
+  ].map((justify) => (
+    <Vertical flex={1}>
+      {justify}
+      <Vertical
+        justify={justify}
+        gap={5}
+        height={300}
+        backgroundColor="lightGrey"
+      >
+        <View backgroundColor="theme.primary" {...size} />
+        <View backgroundColor="theme.secondary" {...size} />
+        <View backgroundColor="theme.warning" {...size} />
+      </Vertical>
+    </Vertical>
+  ))}
+</Horizontal>;
+```
+
+## **Types**
+
+```tsx static
+type Wrap = "wrap" | "nowrap" | "wrap-reverse";
+```
+
+```tsx static
+type Justify =
+  | "flex-start"
+  | "center"
+  | "flex-end"
+  | "space-between"
+  | "space-around"
+  | "space-evenly";
+```

package/src/components/Layout/Vertical/Vertical.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { VerticalProps } from './Vertical/Vertical.props';
+import VerticalView from './Vertical/Vertical.view';
+
+/**
+ * Vertical layout aligns all the elements in a container on the vertical axis.
+ */
+
+const VerticalComponent: React.FC<VerticalProps> = (props) => <VerticalView {...props} />;
+
+export const Vertical = VerticalComponent;

package/src/components/Layout/Vertical/examples/Default.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Vertical } from 'src/components';
+import { View } from 'src/components/Layout/View/View';
+
+export const DefaultVertical = () => (
+  <Vertical>
+    <View height={50} backgroundColor="theme.primary" />
+    <View height={50} backgroundColor="theme.secondary" />
+    <View height={50} backgroundColor="theme.warning" />
+  </Vertical>
+);

package/src/components/Layout/Vertical/examples/Justify.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Vertical } from 'src/components';
+import { Horizontal } from 'src/components';
+import { Justify } from 'src/components/Layout/Vertical/Vertical/Vertical.type';
+import { View } from 'src/components/Layout/View/View';
+
+export const JustifyVertical = () => {
+  const size = {
+    width: 50,
+    height: 50,
+  };
+  return (
+    <Horizontal gap={20} wrap="nowrap" justify="space-between">
+      {['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'].map((justify) => (
+        <Vertical flex={1} key={justify}>
+          {justify}
+          <Vertical justify={justify as Justify} gap={5} height={300} backgroundColor="lightgrey">
+            <View backgroundColor="theme.primary" {...size} />
+            <View backgroundColor="theme.secondary" {...size} />
+            <View backgroundColor="theme.warning" {...size} />
+          </Vertical>
+        </Vertical>
+      ))}
+    </Horizontal>
+  );
+};

package/src/components/Layout/Vertical/examples/Reversed.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Vertical } from 'src/components';
+import { View } from 'src/components/Layout/View/View';
+
+export const ReversedVertical = () => (
+  <Vertical isReversed gap={5}>
+    <View height={50} backgroundColor="theme.primary" />
+    <View height={50} backgroundColor="theme.secondary" />
+    <View height={50} backgroundColor="theme.warning" />
+  </Vertical>
+);

package/src/components/Layout/Vertical/examples/Wrap.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Vertical } from 'src/components';
+import { Horizontal } from 'src/components';
+import { View } from 'src/components/Layout/View/View';
+
+import { Wrap } from '../Vertical/Vertical.type';
+
+export const WrapVertical = () => {
+  const size = {
+    width: 50,
+    height: 50,
+  };
+  return (
+    <Horizontal gap={5} justify="space-between">
+      {['wrap', 'nowrap', 'wrap-reverse'].map((wrapping, index) => (
+        <View key={index}>
+          <View>{wrapping}</View>
+          <Vertical wrap={wrapping as Wrap} gap={5} height={200} flex={1}>
+            <View backgroundColor="theme.primary" {...size} />
+            <View backgroundColor="theme.secondary" {...size} />
+            <View backgroundColor="theme.warning" {...size} />
+            <View backgroundColor="theme.success" {...size} />
+            <View backgroundColor="theme.error" {...size} />
+            <View backgroundColor="color.blue" {...size} />
+          </Vertical>
+        </View>
+      ))}
+    </Horizontal>
+  );
+};

package/src/components/Layout/Vertical/examples/index.tsx

@@ -0,0 +1,5 @@
+export * from '../Vertical';
+export * from './Default';
+export * from './Justify';
+export * from './Reversed';
+export * from './Wrap';

package/src/components/Layout/View/View.tsx

@@ -0,0 +1,2 @@
+export type { ViewProps } from 'app-studio';
+export {  View } from 'app-studio';

package/src/components/Layout/configs/Input.style.ts

@@ -0,0 +1,45 @@
+import { CSSProperties } from 'react';
+
+import { Shape, Size, Variant } from './Input.type';
+
+export const Shapes: Record<Shape, CSSProperties> = {
+  default: { borderTopLeftRadius: 6, borderTopRightRadius: 6, borderBottomLeftRadius: 0, borderBottomRightRadius: 0 },
+  sharp: { borderRadius: 0 },
+  rounded: { borderRadius: 4 },
+  pillShaped: { borderRadius: 24 },
+};
+
+export const LabelSizes: Record<Size, number> = {
+  xs: 8,
+  sm: 10,
+  md: 12,
+  lg: 14,
+  xl: 16,
+};
+
+export const InputVariants: Record<Variant, CSSProperties> = {
+  outline: {
+    borderWidth: 1,
+  },
+  default: {
+    borderWidth: 0,
+    borderBottomWidth: 2,
+  },
+  unStyled: {
+    border: 'none',
+    backgroundColor: 'transparent',
+  },
+};
+
+export const PadddingWithLabel = {
+  paddingTop: 16,
+  paddingBottom: 0,
+  paddingLeft: 16,
+  paddingRight: 35,
+};
+
+export const PaddingWithoutLabel = {
+  paddingVertical: 8,
+  paddingLeft: 16,
+  paddingRight: 35,
+};

package/src/components/Layout/configs/Input.type.ts

@@ -0,0 +1,18 @@
+import { CSSProperties } from 'react';
+
+export type Variant = 'outline' | 'default' | 'unStyled';
+
+export type Shape = 'default' | 'sharp' | 'rounded' | 'pillShaped';
+
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export type TextFieldStyles = {
+  box?: CSSProperties;
+  text?: CSSProperties;
+  label?: CSSProperties;
+  helperText?: CSSProperties;
+};
+
+export type Wrap = 'wrap' | 'nowrap' | 'wrap-reverse';
+
+export type Justify = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';

package/src/components/Link/Link/Link.props.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { Size, Styles, TextDecorationStyle } from './Link.type';
+
+export interface LinkProps {
+  /**
+   * The content of the link.
+   */
+  children: React.ReactNode;
+  /**
+   * The style of text decoration for the link.
+   * Can be one of "default", "hover", or "underline".
+   */
+  underline?: TextDecorationStyle;
+  /**
+   * Indicates whether the link opens in a new tab.
+   */
+  isExternal?: boolean;
+  /**
+   * The size of the icon associated with the link.
+   */
+  iconSize?: Size;
+  /**
+   * Sets the color of the icon and text.
+   */
+  colorScheme?: string;
+  /**
+   * The URL or destination of the link.
+   */
+  href: string;
+  /**
+   * CSS styles for the  external icon.
+   */
+  styles?: Styles;
+  /**
+   * Additional props for customization.
+   */
+  [x: string]: any;
+}
+
+export interface LinkViewProps extends LinkProps {
+  /**
+   *  Indicates whether the link is currently being hovered
+   */
+  isHovered: boolean;
+  /**
+   *  Function to set the hovered state of the link
+   */
+  setIsHovered: Function;
+}

package/src/components/Link/Link/Link.state.ts

@@ -0,0 +1,6 @@
+import { useState } from 'react';
+
+export const useLinkState = () => {
+  const [isHovered, setIsHovered] = useState(false);
+  return { isHovered, setIsHovered };
+};

package/src/components/Link/Link/Link.style.ts

@@ -0,0 +1,14 @@
+import { Size } from './Link.type';
+
+export const IconSizes: Record<Size, number> = {
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 20,
+  '2xl': 24,
+  '3xl': 30,
+  '4xl': 36,
+  '5xl': 48,
+  '6xl': 64,
+};

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

@@ -0,0 +1,8 @@
+export type TextDecorationStyle = 'default' | 'hover' | 'underline';
+
+export type Styles = {
+  icon?: CSSProperties;
+  text?: CSSProperties;
+};
+
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';

package/src/components/Link/Link/Link.view.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Element } from 'app-studio';
+import { Link as ReactRouterLink } from 'react-router-dom';
+import { Horizontal } from 'src/components';
+import { ExternalLinkSvg } from 'src/components/Svg';
+
+import { LinkViewProps } from './Link.props';
+import { IconSizes } from './Link.style';
+
+const LinkView: React.FC<LinkViewProps> = ({
+  children,
+  href = '/',
+  iconSize = 'sm',
+  underline = 'default',
+  isHovered = false,
+  isExternal = false,
+  colorScheme = '#0072F5',
+  styles = { icon: {}, text: {} },
+  setIsHovered = () => {},
+  ...props
+}) => {
+  const handleHover = () => {
+    if (underline === 'hover') setIsHovered(true);
+  };
+  return (
+    <ReactRouterLink to={href} target={isExternal ? '_blank' : '_self'}>
+      <Element
+        color={colorScheme}
+        onMouseEnter={handleHover}
+        onMouseLeave={handleHover}
+        textDecoration={isHovered || underline === 'underline' ? 'underline !important' : 'none'}
+        {...styles.text}
+        {...props}
+      >
+        <Horizontal gap={3} alignItems="center" wrap="nowrap">
+          {children}
+          {isExternal && <ExternalLinkSvg color={colorScheme} size={IconSizes[iconSize]} style={styles.icon} />}
+        </Horizontal>
+      </Element>
+    </ReactRouterLink>
+  );
+};
+
+export default LinkView;