@app-studio/web 0.1.0

package/src/components/Form/TextArea/TextArea/TextArea.props.ts

@@ -0,0 +1,154 @@
+import { CSSProperties } from 'react';
+import { Shadow } from 'app-studio';
+import { Elevation } from 'src/utils/elevation';
+
+import { Shape, Size, TextAreaStyles, Variant } from './TextArea.type';
+
+export interface TextAreaProps {
+  /**
+   * Changes the label and border color of the input field.
+   */
+  colorScheme?: string;
+  /**
+   * Sets the initial value of the textarea.
+   */
+  defaultValue?: string;
+  /**
+   * Specifies whether the input field should display an error state.
+   */
+  error?: boolean;
+  /**
+   * Specifies whether the text input is editable or not for iOS and Android.
+   */
+  isEditable?: boolean;
+  /**
+   * Provides additional information about the input field.
+   */
+  helperText?: string;
+  /**
+   * The input field identifier.
+   */
+  id?: 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 the input field should be automatically focused.
+   */
+  isAutoFocus?: boolean;
+  /**
+   * Specifies whether the input field should allow multiple lines of text.
+   */
+  isMultiline?: boolean;
+  /**
+   * Displays a label above the user input.
+   */
+  label?: string;
+  /**
+   * Specifies the maximum number of rows that the textarea should display.
+   */
+  maxRows?: number;
+  /**
+   * Specifies the maximum number of columns that the textarea should display.
+   */
+  maxCols?: number;
+  /**
+   * The name of the input field.
+   */
+  name: string;
+  /**
+   * Placeholder text to display in the input field until the user enters text.
+   */
+  placeholder?: string;
+  /**
+   * 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?: (text: string) => void;
+  /**
+   * Callback function triggered when the field loses focus.
+   */
+  onBlur?: (value: any) => 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?: TextAreaStyles;
+  /**
+   * The default value of the input field.
+   */
+  value?: string | number;
+  /**
+   * Changes the style variant of the input field.
+   */
+  variant?: Variant;
+  /**
+   * Additional properties for customization and extension.
+   */
+  [x: string]: any;
+}
+
+export interface TextAreaViewProps extends TextAreaProps {
+  /**
+   * The hint text displayed in the textarea.
+   */
+  hint?: string;
+
+  /**
+   * Callback prop to update the hint text.
+   */
+  setHint?: Function;
+
+  /**
+   * Prop indicating if the textarea is being hovered.
+   */
+  isHovered?: boolean;
+
+  /**
+   * Callback prop to update the hover state of the textarea.
+   */
+  setIsHovered?: Function;
+
+  /**
+   * The current value of the textarea input.
+   */
+  inputValue?: string | number;
+
+  /**
+   * Callback prop to update the value of the textarea input.
+   */
+  setInputValue?: Function;
+
+  /**
+   * Prop indicating if the textarea is currently focused.
+   */
+  isFocused?: boolean;
+
+  /**
+   * Callback prop to update the focus state of the textarea.
+   */
+  setIsFocused?: Function;
+}

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

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

package/src/components/Form/TextArea/TextArea/TextArea.type.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+
+export type Variant = 'outline' | 'default' | 'unStyled';
+
+export type Shape = 'default' | 'sharp' | 'rounded';
+
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export type TextAreaStyles = {
+  box?: CSSProperties;
+  text?: CSSProperties;
+  label?: CSSProperties;
+  helperText?: CSSProperties;
+  field?: CSSProperties;
+};

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

@@ -0,0 +1,143 @@
+import React, { useMemo } from 'react';
+import { Element,Typography } from 'app-studio';
+import { FieldContainer, FieldContent, FieldLabel, FieldWrapper } from 'src/components/Layout/Input';
+
+import { TextAreaViewProps } from './TextArea.props';
+
+const TextAreaView: React.FC<TextAreaViewProps> = ({
+  id,
+  name,
+  hint,
+  error,
+  value,
+  label,
+  shadow,
+  inputValue,
+  helperText,
+  placeholder,
+  defaultValue,
+  size = 'sm',
+  shape = 'default',
+  variant = 'default',
+  colorScheme = 'theme.primary',
+  isHovered = false,
+  isFocused = false,
+  isEditable = false,
+  isReadOnly = false,
+  isDisabled = false,
+  isAutoFocus = false,
+  isMultiline = false,
+  maxRows = 3,
+  maxCols = 30,
+  onBlur = () => {},
+  onChange,
+  onFocus,
+  onChangeText,
+  setHint = () => {},
+  setInputValue = () => {},
+  setIsFocused = () => {},
+  setIsHovered = () => {},
+  styles = { box: {}, text: {}, label: {}, helperText: {}, field: {} },
+  ...props
+}) => {
+  const isWithLabel = !!(isFocused && label);
+
+  useMemo(() => {
+    setHint(isFocused && !inputValue ? placeholder ?? '' : label ?? placeholder);
+  }, [inputValue, isFocused, label, placeholder]);
+
+  const fieldStyles = {
+    margin: 0,
+    paddingVertical: 8,
+    paddingHorizontal: 0,
+    width: '100%',
+    heigth: '100%',
+    border: 'none',
+    on: {
+      focus: {
+        outline: 'none',
+      },
+    },
+    fontSize: Typography.fontSizes[size],
+    backgroundColor: 'transparent',
+    color: isDisabled ? 'trueGray.600' : 'blueGray.700',
+    cursor: isDisabled ? 'not-allowed' : 'auto',
+    ...styles['field'],
+  };
+
+  const handleHover = () => setIsHovered(!isHovered);
+  const handleFocus = () => {
+    setIsFocused(true);
+    if (onFocus) onFocus();
+  };
+
+  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 {
+      setInputValue(event.target.value);
+      if (onChange) onChange(event);
+    }
+  };
+
+  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}
+      >
+        <FieldWrapper>
+          {isWithLabel && (
+            <FieldLabel htmlFor={id} color={colorScheme} error={error} {...styles}>
+              {label}
+            </FieldLabel>
+          )}
+          <Element
+            as="textarea"
+            id={id}
+            name={name}
+            rows={maxRows}
+            cols={maxCols}
+            value={inputValue}
+            readOnly={isReadOnly}
+            disabled={isDisabled}
+            autoFocus={isAutoFocus}
+            editable={isEditable}
+            placeholder={hint}
+            onBlur={handleBlur}
+            onFocus={handleFocus}
+            onChange={handleChange}
+            multiline={isMultiline}
+            {...fieldStyles}
+            {...props}
+            {...(onChangeText && { onChangeText: handleChange })}
+          />
+        </FieldWrapper>
+      </FieldContent>
+    </FieldContainer>
+  );
+};
+
+export default TextAreaView;

package/src/components/Form/TextArea/TextArea.md

@@ -0,0 +1,169 @@
+### **Import**
+
+```tsx static
+import { TextArea } from "app-studio";
+```
+
+### **Default**
+
+```tsx
+<TextArea />
+```
+
+### **Default Value**
+
+“**_defaultValue_**” it sets the initial value of the textarea.
+
+```tsx
+<TextArea defaultValue="Write your thougts here..." />
+```
+
+### **Disabled**
+
+“**_isDisabled_**” makes the text area unusable.
+
+```tsx
+<TextArea isDisabled />
+```
+
+-
+
+### **Read Only**
+
+“**_isReadOnly_**” makes the input field readable but not writable. Can only read the element.
+
+```tsx
+<TextArea isReadOnly />
+```
+
+### **Variants**
+
+“**_variant_**” changed the text area styles. It has a default value of “default”.
+
+```tsx
+import { Vertical } from "../../Layout/Vertical/Vertical";
+
+<Vertical gap={10} width="300px">
+  {["default", "outline", "unStyled"].map((variant, index) => (
+    <TextArea
+      key={index}
+      name={variant}
+      placeholder={variant}
+      variant={variant}
+    />
+  ))}
+</Vertical>;
+```
+
+### **Label**
+
+“**_label_**” adds a label above the input field.
+
+```tsx
+<TextArea name="label" label="Label" />
+```
+
+### **Shadow**
+
+“**_shadow_**” adds a shadow effect to the text field.
+
+```tsx
+<TextArea
+  name="surname"
+  label="Surname"
+  shadow={{ boxShadow: "rgba(0, 0, 0, 0.20) 0px 3px 8px" }}
+/>
+```
+
+### **ColorScheme**
+
+“**_colorScheme_**” changes the label and border color .
+
+```tsx
+import { Vertical } from "../../Layout/Vertical/Vertical";
+
+<Vertical gap={10}>
+  <TextArea name="surname" label="Surname" colorScheme="theme.secondary" />
+  <TextArea name="name" label="Name" colorScheme="theme.primary" variant="outline" />
+</Vertical>;
+```
+
+### **Styles**
+
+“**_styles_**” changes the the style of the container, field and label.
+
+```tsx
+<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"  },
+  }}
+/>
+```
+
+### **Error**
+
+“**_error_**” if true, indicates that the text field value failed the validation criteria.
+
+```tsx
+<TextArea error />
+```
+
+### **HelperText**
+
+“**_helperText_**” is a string text used to inform the user that the content of the field is invalid.
+
+```tsx
+<TextArea error helperText="Enter thoughts!" />
+```
+
+### **Types**
+
+```tsx static
+type Variant = "outline" | "default" | "unStyled";
+```
+
+```tsx static
+type Shape = "default" | "sharp" | "rounded";
+```
+
+```tsx static
+type Size =
+  | "xs"
+  | "sm"
+  | "md"
+  | "lg"
+  | "xl"
+  | "2xl"
+  | "3xl"
+  | "4xl"
+  | "5xl"
+  | "6xl";
+```
+
+```tsx static
+type TextFieldStyles = {
+  box?: CSSProperties;
+  text?: CSSProperties;
+  label?: CSSProperties;
+  helperText?: CSSProperties;
+  field?: CSSProperties;
+};
+```
+
+### **Default Values**
+
+```tsx static
+const Shapes: Record<Shape, number | string> = {
+  default: "6px 6px 0 0",
+  sharp: 0,
+  rounded: 4,
+  pillShaped: 24,
+};
+```

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

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { TextAreaProps } from './TextArea/TextArea.props';
+import { useTextAreaState } from './TextArea/TextArea.state';
+import TextAreaView from './TextArea/TextArea.view';
+
+const TextAreaComponent: React.FC<TextAreaProps> = (props) => {
+  const textAreaState = useTextAreaState(props);
+  return <TextAreaView {...textAreaState} {...props} />;
+};
+
+/**
+ * Text Area is an component used to create a multi-line input field.
+ */
+export const TextArea = TextAreaComponent;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Vertical } from 'src/components/Layout/Vertical/examples';
+
+import { TextArea } from '../TextArea';
+
+export const ColorArea = () => {
+  return (
+    <Vertical gap={10}>
+      <TextArea name="surname" label="Surname" colorScheme="theme.secondary" />
+      <TextArea name="name" label="Name" colorScheme="theme.primary" variant="outline" />
+    </Vertical>
+  );
+};

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

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import { TextArea } from '../TextArea';
+
+export const DefaultArea = () => <TextArea name="comments" placeholder="Enter your thoughts" />;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { TextArea } from '../TextArea';
+
+export const DisabledArea = () => {
+  return <TextArea name="disabled" value="Enter your thought" label="Thoughts" isDisabled />;
+};

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

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import React from 'react';
+import { Button } from 'src/components';
+import { TextArea } from 'src/components';
+import { Vertical } from 'src/components/Layout/Vertical/examples';
+
+export const ErrorArea = () => {
+  const initialValues = {
+    thoughts: '',
+  };
+  const [formValues, setFormValues] = useState(initialValues);
+  const [formErrors, setFormErrors] = useState(initialValues);
+
+  const validate = (values: any) => {
+    const errors: any = {};
+
+    if (!values.thoughts) {
+      errors.thoughts = '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.thoughts);
+    }
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <Vertical gap={10}>
+        <TextArea
+          name="thoughts"
+          placeholder="Write your thoughts here..."
+          error={!!formErrors.thoughts}
+          onChange={handleChange}
+          colorScheme="theme.secondary"
+        />
+        <Button type="submit" height="40px" isAuto>
+          Submit
+        </Button>
+      </Vertical>
+    </form>
+  );
+};

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Field, Form, Formik } from 'formik';
+import { Button } from 'src/components';
+import { TextArea } from 'src/components';
+import { Vertical } from 'src/components/Layout/Vertical/examples';
+
+export const FormikErrorArea = () => {
+  const initialValues = {
+    thoughts: '',
+  };
+
+  const validate = (values: any) => {
+    const errors: any = {};
+
+    if (!values.thoughts) {
+      errors.thoughts = 'Required';
+    }
+
+    return errors;
+  };
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      validate={validate}
+      onSubmit={(values, { setSubmitting }) => {
+        setTimeout(() => {
+          alert(JSON.stringify(values, null, 2));
+          setSubmitting(false);
+        }, 400);
+      }}
+    >
+      {({ touched, isSubmitting }) => (
+        <Form>
+          <Vertical gap={10}>
+            <Field
+              as={TextArea}
+              name="thoughts"
+              placeholder="Write your thoughts here..."
+              error={touched.thoughts}
+              colorScheme="theme.secondary"
+            />
+
+            <Button type="submit" isDisabled={isSubmitting}>
+              Submit
+            </Button>
+          </Vertical>
+        </Form>
+      )}
+    </Formik>
+  );
+};

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Field, Form, Formik } from 'formik';
+import { Button } from 'src/components';
+import { TextArea } from 'src/components';
+import { Vertical } from 'src/components/Layout/Vertical/examples';
+
+export const FormikHelperTextArea = () => {
+  const initialValues = {
+    thoughts: '',
+  };
+
+  const validate = (values: any) => {
+    const errors: any = {};
+
+    if (!values.thoughts) {
+      errors.thoughts = 'Required';
+    }
+
+    return errors;
+  };
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      validate={validate}
+      onSubmit={(values, { setSubmitting }) => {
+        setTimeout(() => {
+          alert(JSON.stringify(values, null, 2));
+          setSubmitting(false);
+        }, 400);
+      }}
+    >
+      {({ errors, touched, isSubmitting }) => (
+        <Form>
+          <Vertical gap={10}>
+            <Field
+              as={TextArea}
+              name="thoughts"
+              placeholder="Write here..."
+              error={touched.thoughts && errors.thoughts}
+              helperText={touched.thoughts && errors.thoughts}
+            />
+            <Button type="submit" isDisabled={isSubmitting}>
+              Submit
+            </Button>
+          </Vertical>
+        </Form>
+      )}
+    </Formik>
+  );
+};