@app-studio/web 0.1.5 → 0.1.6

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,51 +0,0 @@
-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>
-  );
-};