@app-studio/web 0.1.0

package/src/components/Form/TextField/examples/StylesInput.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Button } from 'src/components';
+import { Horizontal } from 'src/components';
+
+import { TextField } from '../TextField';
+
+export const StyledInput = () => {
+  const handleSubmit = (event: any) => {
+    event.preventDefault();
+    const formData = new FormData(event.target);
+    alert(`Hello, ${formData.get('surname')}`);
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <Horizontal gap={10} alignItems="center" wrap="nowrap">
+        <TextField
+          name="surname"
+          label="Surname"
+          variant="unStyled"
+          shadow={{ boxShadow: 'rgba(0, 0, 0, 0.20) 0px 3px 8px' }}
+          styles={{
+            box: { borderRadius: 8,  borderColor: 'theme.primary',
+            borderStyle: 'solid',
+            borderWidth: 1, },
+            text: { color: 'theme.primary' },
+            label: { color: 'theme.primary' },
+          }}
+        />
+        <Button type="submit" height="40px" colorScheme="theme.primary" isAuto>
+          Submit
+        </Button>
+      </Horizontal>
+    </form>
+  );
+};

package/src/components/Form/TextField/examples/VariantsInputs.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TextField } from 'src/components';
+import { Vertical } from 'src/components/Layout/Vertical/examples';
+
+import { Variant } from '../TextField/TextField.type';
+
+export const VariantsInput = () => {
+  return (
+    <Vertical gap={10} width="300px">
+      {['default', 'outline', 'unStyled'].map((variant, index) => (
+        <TextField key={index} name={variant} placeholder={variant} variant={variant as Variant} />
+      ))}
+    </Vertical>
+  );
+};

package/src/components/Form/TextField/examples/index.ts

@@ -0,0 +1,17 @@
+export * from 'src/components/Form/TextField/examples/ClearInput';
+export * from 'src/components/Form/TextField/examples/ColorScheme';
+export * from 'src/components/Form/TextField/examples/Default';
+export * from 'src/components/Form/TextField/examples/DisabledInput';
+export * from 'src/components/Form/TextField/examples/ErrorInput';
+export * from 'src/components/Form/TextField/examples/FormikErrorInput';
+export * from 'src/components/Form/TextField/examples/FormikHelperText';
+export * from 'src/components/Form/TextField/examples/HelperText';
+export * from 'src/components/Form/TextField/examples/LabelInput';
+export * from 'src/components/Form/TextField/examples/LeftChild';
+export * from 'src/components/Form/TextField/examples/Placeholder';
+export * from 'src/components/Form/TextField/examples/ReadOnlyInput';
+export * from 'src/components/Form/TextField/examples/RightChild';
+export * from 'src/components/Form/TextField/examples/ShapeInput';
+export * from 'src/components/Form/TextField/examples/SizeInput';
+export * from 'src/components/Form/TextField/examples/StylesInput';
+export * from 'src/components/Form/TextField/examples/VariantsInputs';

package/src/components/Form/TextField/styles.css

@@ -0,0 +1,7 @@
+input::-webkit-contacts-auto-fill-button {
+  visibility: hidden;
+  display: none !important;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { Wrap } from '../../configs/Input.type';
+
+export interface CenterProps {
+  /**
+   * To specifies if the items should be wrap or not, based on available space on the line.
+   */
+  wrap?: Wrap;
+  /**
+   * Layout content
+   */
+  children: React.ReactNode;
+  /**
+   * other properties
+   */
+  [x: string]: any;
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { View } from 'src/components/Layout/View/View';
+
+import { CenterProps } from './Center.props';
+
+const CenterView: React.FC<CenterProps> = ({ children, wrap, ...props }) => (
+  <View display="flex" justifyContent="center" alignItems="center" flexWrap={wrap} {...props}>
+    {children}
+  </View>
+);
+
+export default CenterView;

package/src/components/Layout/Center/Center.md

@@ -0,0 +1,17 @@
+### **Import**
+
+```tsx static
+import { Center } from "app-studio";
+```
+
+### **Default**
+
+The default height and width are set to 100%.
+
+```tsx
+import { Horizontal } from "../Horizontal/Horizontal";
+
+<Center height={100} width={"100%"} backgroundColor="theme.primary" color="white">
+  Hello World!
+</Center>;
+```

package/src/components/Layout/Center/Center.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { CenterProps } from './Center/Center.props';
+import CenterView from './Center/Center.view';
+
+/**
+ * The Center component is a React functional component that provides a centered layout for its children using flexbox.
+ */
+const CenterComponent: React.FC<CenterProps> = (props) => <CenterView {...props} />;
+
+export const Center = CenterComponent;

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

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { Justify, Wrap } from '../../configs/Input.type';
+
+export interface HorizontalProps {
+  /**
+   * The layout content
+   */
+  children: React.ReactNode;
+  /**
+   * Aligns items horizontally, when they don't fill up the entire main-axis
+   */
+  justify?: Justify;
+  /**
+   * To specifies if the items should be wrap or not, based on available space on the line.
+   */
+  wrap?: Wrap;
+  /**
+   * If true, it reverses the items order on the horizontal axis.
+   */
+  isReversed?: boolean;
+  /**
+   * other properties
+   */
+  [x: string]: any;
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { View } from 'src/components';
+
+import { HorizontalProps } from './Horizontal.props';
+
+const HorizontalView: React.FC<HorizontalProps> = ({
+  children,
+  wrap = 'wrap',
+  justify = 'flex-start',
+  isReversed = false,
+  ...props
+}) => (
+  <View
+    display="flex"
+    flexWrap={wrap}
+    flexDirection={isReversed ? 'row-reverse' : 'row'}
+    justifyContent={justify}
+    {...props}
+  >
+    {children}
+  </View>
+);
+
+export default HorizontalView;

package/src/components/Layout/Horizontal/Horizontal.md

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { HorizontalProps } from './Horizontal/Horizontal.props';
+import HorizontalView from './Horizontal/Horizontal.view';
+
+/**
+ * Horizontal layout aligns all the elements in a container on the horizontal axis.
+ */
+const HorizontalComponent: React.FC<HorizontalProps> = (props) => <HorizontalView {...props} />;
+
+export const Horizontal = HorizontalComponent;

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

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

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Horizontal } from 'src/components';
+import { Justify } from 'src/components/Layout/configs/Input.type';
+import { View } from 'src/components/Layout/View/View';
+
+export const JustifyHorizontal = () => {
+  const size = {
+    width: 50,
+    height: 50,
+  };
+  return (
+    <View>
+      {['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'].map((justify) => (
+        <View key={justify} marginTop={10}>
+          {justify}
+          <Horizontal justify={justify as Justify} gap={5} width="100%">
+            <View backgroundColor="theme.primary" {...size} />
+            <View backgroundColor="theme.secondary" {...size} />
+            <View backgroundColor="theme.warning" {...size} />
+          </Horizontal>
+        </View>
+      ))}
+    </View>
+  );
+};

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

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

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Horizontal } from 'src/components';
+import { View } from 'src/components/Layout/View/View';
+
+import { Wrap } from '../../configs/Input.type';
+
+export const WrapHorizontal = () => {
+  const size = {
+    width: 50,
+    height: 50,
+  };
+  return (
+    <View width={300}>
+      {['wrap', 'nowrap', 'wrap-reverse'].map((wrapping) => (
+        <div key={wrapping}>
+          {wrapping}
+          <Horizontal wrap={wrapping as Wrap} gap={5} marginTop={10}>
+            <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} />
+          </Horizontal>
+        </div>
+      ))}
+    </View>
+  );
+};

package/src/components/Layout/Horizontal/examples/index.ts

@@ -0,0 +1,4 @@
+export * from 'src/components/Layout/Horizontal/examples/Default';
+export * from 'src/components/Layout/Horizontal/examples/Justify';
+export * from 'src/components/Layout/Horizontal/examples/Reversed';
+export * from 'src/components/Layout/Horizontal/examples/Wrap';

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { TextFieldStyles } from 'src/components/Layout/configs/Input.type';
+
+export interface ContainerProps {
+  /**
+   * The content to be rendered inside the container.
+   */
+  children?: React.ReactNode;
+  /**
+   * Specifies whether the input field should display an error state.
+   */
+  error?: boolean;
+  /**
+   * Provides additional information or instructions about the field.
+   */
+  helperText?: string;
+  /**
+   * CSS styles for the select box and dropdown.
+   */
+  styles?: TextFieldStyles;
+  /**
+   * Additional properties and attributes for the field.
+   */
+  [x: string]: any;
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Vertical } from '../../Vertical/examples';
+import { HelperText } from '../HelperText/HelperText';
+
+import { ContainerProps } from './FieldContainer/FieldContainer.props';
+
+export const FieldContainer: React.FC<ContainerProps> = ({ children, helperText, error = false, styles, ...props }) => (
+  <Vertical gap={5} position="relative" {...props}>
+    {children}
+    {helperText && (
+      <HelperText error={error} {...styles}>
+        {helperText}
+      </HelperText>
+    )}
+  </Vertical>
+);

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

@@ -0,0 +1,75 @@
+import React, { CSSProperties } from 'react';
+import { Shape, Size, TextFieldStyles, Variant } from 'src/components/Layout/configs/Input.type';
+import { Elevation } from 'src/utils/elevation';
+import { Shadow } from 'app-studio';
+
+export interface ContentProps {
+  /**
+   * The color of the Content component.
+   */
+  color?: string;
+  /**
+   * Changes the color style of the field.
+   */
+  colorScheme?: string;
+  /**
+   * The content to be rendered inside the Content component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Indicates whether the field has an error.
+   */
+  error?: boolean;
+  /**
+   * Indicates whether the field has label
+   */
+  isWithLabel?: boolean;
+  /**
+   * Determines whether the Content component is disabled. Default value is false.
+   */
+  isDisabled?: boolean;
+  /**
+   * Determines wheter the field is focused or not.
+   */
+  isFocused?: boolean;
+  /**
+   * Determines whether the Content component is currently being hovered over.
+   */
+  isHovered?: boolean;
+  /**
+   * Determines whether the Content component is read-only. Default value is false.
+   */
+  isReadOnly?: boolean;
+  /**
+   * The label associated with the Content component.
+   */
+  label?: string;
+  /**
+   * The default value of the field.
+   */
+  value?: string | Array<string> | number;
+  /**
+   * Changes the Input style
+   */
+  variant?: Variant;
+  /**
+   * The shape of the Content component.
+   */
+  shape?: Shape;
+  /**
+   * The size of the Content component. Default value is "md".
+   */
+  size?: Size;
+  /**
+   * CSS styles applied to the Content component. Default value is an empty object.
+   */
+  styles?: TextFieldStyles;
+  /**
+   * The shadow effect applied to the Content component.
+   */
+  shadow?: Shadow | Elevation | CSSProperties;
+  /**
+   * Additional properties and attributes for the field.
+   */
+  [x: string]: any;
+}

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import {Typography} from 'app-studio';
+
+import { InputVariants, PadddingWithLabel, PaddingWithoutLabel, Shapes } from '../../configs/Input.style';
+import { Horizontal } from '../../Horizontal/Horizontal';
+
+import { ContentProps } from './FieldContent/FieldContent.props';
+
+export const FieldContent: React.FC<ContentProps> = ({
+  label,
+  shadow,
+  children,
+  value,
+  size = 'md',
+  shape = 'default',
+  variant = 'default',
+  error = false,
+  isWithLabel = false,
+  isFocused = false,
+  isHovered = false,
+  isDisabled = false,
+  isReadOnly = false,
+  colorScheme = 'theme.primary',
+  styles = { pickerBox: {} },
+  ...props
+}) => {
+  const isInteractive = (isHovered || isFocused) && !isDisabled;
+  const color = error ? 'error' : isInteractive ? colorScheme : 'midGrey';
+
+  return (
+    <Horizontal
+      gap={10}
+      width="100%"
+      display="flex"
+      wrap="nowrap"
+      borderStyle="solid"
+      alignItems="center"
+      borderColor={color}
+      backgroundColor="trueGray.50"
+      transition="padding 0.2s ease"
+      justifyContent="space-between"
+      fontSize={Typography.fontSizes[size]}
+      filter={isHovered ? 'brightness(0.97)' : 'brightness(1)'}
+      cursor={isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'}
+      {...(isWithLabel ? PadddingWithLabel : PaddingWithoutLabel)}
+      {...shadow}
+      {...Shapes[shape]}
+      {...InputVariants[variant]}
+      {...styles['box']}
+      {...props}
+    >
+      {children}
+    </Horizontal>
+  );
+};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export interface FieldIconsProps {
+  /**
+   * 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/FieldIcons/FieldIcons.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Center } from 'src/components';
+
+import { FieldIconsProps } from './FieldIcons/FieldIcons.props';
+
+export const FieldIcons: React.FC<FieldIconsProps> = ({ children, ...props }) => (
+  <Center
+    gap={10}
+    top="50%"
+    right={16}
+    zIndex={500}
+    wrap="nowrap"
+    position="absolute"
+    transform="translateY(-50%)"
+    {...props}
+  >
+    {children}
+  </Center>
+);

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Size } from 'src/components/Layout/configs/Input.type';
+
+export interface LabelProps {
+  /**
+   * The content to be rendered inside the Label.
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Indicates whether the field has an error.
+   */
+  error?: boolean;
+
+  /**
+   * The size of the Label
+   */
+  size?: Size;
+  /**
+   * The color of the Label
+   */
+  color?: string;
+  /**
+   * CSS styles applied to the Label
+   */
+  styles?: { label: any };
+  /**
+   * Additional properties and attributes for the field.
+   */
+  [x: string]: any;
+}

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Label } from 'src/components/Form/Label/Label';
+
+import { LabelSizes } from '../../configs/Input.style';
+
+import { LabelProps } from './FieldLabel/FieldLabel.props';
+
+export const FieldLabel: React.FC<LabelProps> = ({
+  children,
+  size = 'md',
+  error = false,
+  color = 'theme.primary',
+  styles = { label: {} },
+  ...props
+}) => (
+  <Label
+    top={4}
+    zIndex={1000}
+    lineHeight={15}
+    letterSpacing={0.25}
+    whiteSpace="noWrap"
+    position="absolute"
+    color={error ? 'error' : color}
+    fontSize={LabelSizes[size]}
+    {...styles['label']}
+    {...props}
+  >
+    {children}
+  </Label>
+);