@app-studio/web 0.1.4 → 0.1.6

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,134 +0,0 @@
-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.
-   */
-  onClick?: () => 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

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

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

@@ -1,170 +0,0 @@
-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 = () => {},
-  onClick = () => {},
-  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;