@app-studio/web 0.1.0

package/src/components/Form/TextArea/examples/HelperText.tsx

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import React from 'react';
+import { Button, TextArea } from 'src/components';
+import { Vertical } from 'src/components/Layout/Vertical/examples';
+
+export const HelperTextArea = () => {
+  const initialValues = {
+    guess: '',
+  };
+  const [formValues, setFormValues] = useState(initialValues);
+  const [formErrors, setFormErrors] = useState(initialValues);
+
+  const validate = (values: any) => {
+    const errors: any = {};
+    if (!values.guess) {
+      errors.guess = 'Required';
+    }
+
+    setFormErrors(errors);
+  };
+
+  const handleChange = (event: any) => {
+    setFormValues({ ...formValues, [event.target.name]: event.target.value });
+  };
+
+  const handleSubmit = (event: any) => {
+    event.preventDefault();
+    validate(formValues);
+    if (Object.values(formErrors).length === 0) {
+      alert(formValues.guess);
+    }
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <Vertical gap={10}>
+        <TextArea
+          name="guess"
+          placeholder="Write here..."
+          helperText={formErrors.guess}
+          error={!!formErrors.guess}
+          onChange={handleChange}
+        />
+        <Button type="submit" height="40px" isAuto>
+          Submit
+        </Button>
+      </Vertical>
+    </form>
+  );
+};

package/src/components/Form/TextArea/examples/LabelInput.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Button } from 'src/components';
+import { Horizontal } from 'src/components';
+
+import { TextArea } from '../TextArea';
+
+export const LabelArea = () => {
+  const handleSubmit = (event: any) => {
+    event.preventDefault();
+    const formData = new FormData(event.target);
+    alert(formData.get('description'));
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <Horizontal gap={10} alignItems="center" wrap="nowrap">
+        <TextArea name="description" label="Description" />
+        <Button type="submit" height="40px" isAuto>
+          Submit
+        </Button>
+      </Horizontal>
+    </form>
+  );
+};

package/src/components/Form/TextArea/examples/MaxRowCol.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { TextArea } from '../TextArea';
+
+export const MaxArea = () => {
+  return <TextArea name="max" value="Enter your thought" maxRows={5} maxCols={20} />;
+};

package/src/components/Form/TextArea/examples/Placeholder.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Button } from 'src/components';
+import { Horizontal } from 'src/components';
+
+import { TextArea } from '../TextArea';
+
+export const PlaceholderArea = () => {
+  const handleSubmit = (event: any) => {
+    event.preventDefault();
+    const formData = new FormData(event.target);
+    alert(formData.get('comment'));
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <Horizontal gap={10} alignItems="center" wrap="nowrap">
+        <TextArea name="comment" placeholder="Type your comment here..." />
+        <Button type="submit" height="40px" isAuto>
+          Submit
+        </Button>
+      </Horizontal>
+    </form>
+  );
+};

package/src/components/Form/TextArea/examples/ReadOnlyInput.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { TextArea } from '../TextArea';
+
+export const ReadOnlyArea = () => {
+  return <TextArea name="readOnly" value="Almost before we knew it, we had left the ground." isReadOnly />;
+};

package/src/components/Form/TextArea/examples/ShadowArea.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Button } from 'src/components';
+import { Horizontal } from 'src/components';
+
+import { TextArea } from '../TextArea';
+
+export const ShadowArea = () => {
+  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">
+        <TextArea
+          name="surname"
+          label="Surname"
+          variant="unStyled"
+          shadow={{ boxShadow: 'rgba(0, 0, 0, 0.20) 0px 3px 8px' }}
+        />
+        <Button type="submit" height="40px" colorScheme="theme.primary" isAuto>
+          Submit
+        </Button>
+      </Horizontal>
+    </form>
+  );
+};

package/src/components/Form/TextArea/examples/ShapeInput.tsx

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

package/src/components/Form/TextArea/examples/SizeInput.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Vertical } from 'src/components/Layout/Vertical/examples';
+
+import { TextArea } from '../TextArea';
+
+export const SizeArea = () => {
+  return (
+    <Vertical gap={10}>
+      <TextArea name="xs" placeholder="xs" size="xs" />
+      <TextArea name="sm" placeholder="sm" size="sm" />
+      <TextArea name="md" placeholder="md" size="md" />
+      <TextArea name="lg" placeholder="lg" size="lg" />
+      <TextArea name="xl" placeholder="xl" size="xl" />
+    </Vertical>
+  );
+};

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Button } from 'src/components';
+import { Horizontal } from 'src/components';
+
+import { TextArea } from '../TextArea';
+
+export const StyledArea = () => {
+  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">
+        <TextArea
+          name="surname"
+          label="Surname"
+          variant="unStyled"
+          styles={{
+            box: { borderRadius: 8, padding: 5,  borderColor: 'theme.primary',
+            borderStyle: 'solid',
+            borderWidth: 1, },
+            field: { color: 'theme.primary', padding: 0 },
+            label: { color: 'theme.primary' },
+          }}
+        />
+        <Button type="submit" height="40px" colorScheme="theme.primary" isAuto>
+          Submit
+        </Button>
+      </Horizontal>
+    </form>
+  );
+};

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

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

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

@@ -0,0 +1,15 @@
+export { ColorArea } from 'src/components/Form/TextArea/examples/ColorScheme';
+export { DefaultArea } from 'src/components/Form/TextArea/examples/Default';
+export { DisabledArea } from 'src/components/Form/TextArea/examples/DisabledInput';
+export { ErrorArea } from 'src/components/Form/TextArea/examples/ErrorInput';
+export { FormikErrorArea } from 'src/components/Form/TextArea/examples/FormikErrorInput';
+export { FormikHelperTextArea } from 'src/components/Form/TextArea/examples/FormikHelperText';
+export { HelperTextArea } from 'src/components/Form/TextArea/examples/HelperText';
+export { LabelArea } from 'src/components/Form/TextArea/examples/LabelInput';
+export { MaxArea } from 'src/components/Form/TextArea/examples/MaxRowCol';
+export { PlaceholderArea } from 'src/components/Form/TextArea/examples/Placeholder';
+export { ReadOnlyArea } from 'src/components/Form/TextArea/examples/ReadOnlyInput';
+export { ShapesArea } from 'src/components/Form/TextArea/examples/ShapeInput';
+export { SizeArea } from 'src/components/Form/TextArea/examples/SizeInput';
+export { StyledArea } from 'src/components/Form/TextArea/examples/StylesInput';
+export { VariantsArea } from 'src/components/Form/TextArea/examples/VariantsInputs';

package/src/components/Form/TextArea/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/Form/TextField/TextField/TextField.props.ts

@@ -0,0 +1,134 @@
+import React, { CSSProperties } from 'react';
+import { Shadow } from 'app-studio';
+import { Elevation } from 'src/utils/elevation';
+
+import { Shape, Size, TextFieldStyles, Variant } from './TextField.type';
+
+export interface TextFieldProps {
+  /**
+   * The input field identifier.
+   */
+  id?: string;
+  /**
+   * Specifies whether the input field should display an error state.
+   */
+  error?: boolean;
+  /**
+   * Provides additional information about the input field.
+   */
+  helperText?: string;
+  /**
+   * The name of the input field.
+   */
+  name?: string;
+  /**
+   * Displays a label above the user input.
+   */
+  label?: string;
+  /**
+   * Changes the label and border color of the input field.
+   */
+  colorScheme?: string;
+  /**
+   * The left child to include in the field.
+   */
+  leftChild?: React.ReactNode;
+  /**
+   * The right child to include in the field.
+   */
+  rightChild?: React.ReactNode;
+  /**
+   * Placeholder text to display in the input field until the user enters text.
+   */
+  placeholder?: string;
+  /**
+   * Specifies whether the input field is read-only and cannot be edited.
+   */
+  isReadOnly?: boolean;
+  /**
+   * Specifies whether the input field is disabled and cannot be interacted with.
+   */
+  isDisabled?: boolean;
+  /**
+   * Specifies whether a clear button should be added to the input field that clears its value when clicked.
+   */
+  isClearable?: boolean;
+  /**
+   * Specifies whether the input field should be automatically focused.
+   */
+  isAutoFocus?: boolean;
+  /**
+   * Handler function called when the input field value changes.
+   */
+  onChange?: (value: any) => void;
+  /**
+   * Handler function called when the input field value changes for iOS and Android.
+   */
+  onChangeText?: (value: string) => void;
+  /**
+   * Callback function triggered when the field loses focus.
+   */
+  onBlur?: (value: any) => void;
+  /**
+   * Event called when the input field is clicked/pressed.
+   */
+  onPress?: () => void;
+  /**
+   * Callback function called when the text input receives focus.
+   */
+  onFocus?: () => void;
+  /**
+   * Sets the text size and padding of the input field.
+   */
+  size?: Size;
+  /**
+   * Applies a shadow effect to the input field.
+   */
+  shadow?: Shadow | Elevation | CSSProperties;
+  /**
+   * Changes the shape or outline of the input field.
+   */
+  shape?: Shape;
+  /**
+   * CSS styles for the input container and field.
+   */
+  styles?: TextFieldStyles;
+  /**
+   * The default value of the input field.
+   */
+  value?: string;
+  /**
+   * Changes the style variant of the input field.
+   */
+  variant?: Variant;
+  /**
+   * Additional properties for customization and extension.
+   */
+  [x: string]: any;
+}
+
+export interface TextFieldViewProps extends TextFieldProps {
+  /** The hint text for the text field */
+  hint?: string;
+
+  /** Function to set the hint text for the text field */
+  setHint?: Function;
+
+  /** Indicates whether the text field is currently focused or not */
+  isFocused?: boolean;
+
+  /** Function to set the focused state of the text field */
+  setIsFocused?: Function;
+
+  /** Indicates whether the mouse pointer is currently hovering over the text field or not */
+  isHovered?: boolean;
+
+  /** Function to set the hovered state of the text field */
+  setIsHovered?: Function;
+
+  /** The current value of the text field */
+  inputValue?: string;
+
+  /** Function to set the value of the text field */
+  setInputValue?: Function;
+}

package/src/components/Form/TextField/TextField/TextField.state.ts

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+
+import { TextFieldProps } from './TextField.props';
+
+export const useTextFieldState = ({ label, placeholder, value }: TextFieldProps) => {
+  const [hint, setHint] = useState(label ?? placeholder);
+  const [isFocused, setIsFocused] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [inputValue, setInputValue] = useState(value || '');
+
+  return {
+    hint,
+    setHint,
+    isFocused,
+    setIsFocused,
+    isHovered,
+    setIsHovered,
+    inputValue,
+    setInputValue,
+  };
+};

package/src/components/Form/TextField/TextField/TextField.type.d.ts

@@ -0,0 +1,15 @@
+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;
+  field?: CSSProperties;
+};

package/src/components/Form/TextField/TextField/TextField.view.tsx

@@ -0,0 +1,170 @@
+import React, { useMemo } from 'react';
+import { Input,Typography,useTheme } from 'app-studio';
+import { FieldContainer } from 'src/components/Layout/Input/FieldContainer/FieldContainer';
+import { FieldContent } from 'src/components/Layout/Input/FieldContent/FieldContent';
+import { FieldIcons } from 'src/components/Layout/Input/FieldIcons/FieldIcons';
+import { FieldLabel } from 'src/components/Layout/Input/FieldLabel/FieldLabel';
+import { FieldWrapper } from 'src/components/Layout/Input/FieldWrapper/FieldWrapper';
+import { CloseSvg } from 'src/components/Svg';
+
+import { TextFieldViewProps } from './TextField.props';
+
+const TextFieldInput = (props: any) => <Input type="text" {...props} />;
+
+const TextFieldView: React.FC<TextFieldViewProps> = ({
+  id,
+  name,
+  label,
+  value,
+  hint,
+  inputValue,
+  onChange,
+  leftChild,
+  rightChild,
+  helperText,
+  placeholder,
+  onChangeText,
+  shadow = {},
+  styles = { box: {}, field: {}, label: {}, helperText: {}, text: {} },
+  size = 'md',
+  shape = 'default',
+  variant = 'default',
+  colorScheme = 'theme.primary',
+  error = false,
+  isFocused = false,
+  isHovered = false,
+  isDisabled = false,
+  isReadOnly = false,
+  isClearable = true,
+  isAutoFocus = false,
+  setHint = () => {},
+  setIsFocused = () => {},
+  setIsHovered = () => {},
+  setInputValue = () => {},
+  onPress = () => {},
+  onFocus,
+  onBlur = () => {},
+  ...props
+}) => {
+  const { getColor } = useTheme();
+  const IconColor = getColor('color.blueGray.700');
+
+  const isWithLabel = !!(isFocused && label);
+
+  useMemo(() => {
+    setHint(isFocused && !inputValue ? placeholder ?? '' : label ?? placeholder);
+  }, [inputValue, isFocused, label, placeholder]);
+
+  const fieldStyles = {
+    margin: 0,
+    paddingVertical: 8,
+    padddingHorizontal: 0,
+    width: '100%',
+    heigth: '100%',
+    border: 'none',
+    on: {
+      focus: {
+        outline: 'none',
+      },
+    },
+    fontSize: Typography.fontSizes[size],
+    backgroundColor: 'transparent',
+    color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
+    cursor: isDisabled ? 'not-allowed' : 'auto',
+    ...styles['field'],
+  };
+
+  const handleFocus = () => {
+    setIsFocused(true);
+    if (onFocus) onFocus();
+  };
+
+  const handleHover = () => setIsHovered(!isHovered);
+
+  const handleBlur = (event: any) => {
+    onBlur(event);
+    setIsFocused(false);
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement> | string) => {
+    if (typeof event === 'string') {
+      //for ios and android
+      setInputValue(event);
+      if (onChangeText) onChangeText(event);
+    } else {
+      //Web
+      setInputValue(event.target.value);
+      if (onChange) onChange(event);
+    }
+  };
+
+  const handleClear = () => {
+    setInputValue('');
+    //Web
+    if (onChange) {
+      onBlur({ target: { name } });
+      onChange({ target: { name, value: '' } });
+    }
+    //for ios and android
+    if (typeof document === 'undefined' && onChangeText) onChangeText('');
+  };
+
+  return (
+    <FieldContainer helperText={helperText} error={error} styles={styles}>
+      <FieldContent
+        label={label}
+        size={size}
+        error={error}
+        shape={shape}
+        styles={styles}
+        shadow={shadow}
+        variant={variant}
+        value={inputValue}
+        color={colorScheme}
+        isHovered={isHovered}
+        isDisabled={isDisabled}
+        isReadOnly={isReadOnly}
+        isFocused={isFocused}
+        isWithLabel={isWithLabel}
+        colorScheme={colorScheme}
+        onMouseEnter={handleHover}
+        onMouseLeave={handleHover}
+      >
+        {leftChild}
+        <FieldWrapper>
+          {isWithLabel && (
+            <FieldLabel htmlFor={id} color={colorScheme} error={error} {...styles}>
+              {label}
+            </FieldLabel>
+          )}
+          <TextFieldInput
+            id={id}
+            name={name}
+            value={inputValue}
+            readOnly={isReadOnly}
+            disabled={isDisabled}
+            autoFocus={isAutoFocus}
+            placeholder={hint}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            autoComplete="off"
+            {...fieldStyles}
+            {...props}
+            onChange={handleChange}
+            {...(onChangeText && { onChangeText: handleChange })}
+          />
+        </FieldWrapper>
+        {(rightChild || (isClearable && inputValue)) && (
+          <FieldIcons>
+            {rightChild && <>{rightChild}</>}
+            {isClearable && inputValue && !isReadOnly && !isDisabled && (
+              <CloseSvg size={Typography.fontSizes[size]} color={IconColor} onClick={handleClear} />
+            )}
+          </FieldIcons>
+        )}
+      </FieldContent>
+    </FieldContainer>
+  );
+};
+
+export default TextFieldView;