@app-studio/web 0.1.4 → 0.1.6

package/src/components/Form/CountryPicker/examples/Color.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Vertical } from 'src/components/Layout/Vertical/examples';
-
-import { CountryPicker } from '../CountryPicker';
-
-export const ColorCountryPicker = () => (
-  <Vertical gap={15}>
-    {['theme.primary', 'theme.secondary', 'theme.error', 'theme.success', 'theme.warning'].map((color) => (
-      <CountryPicker key={color} label={color} colorScheme={color} />
-    ))}
-  </Vertical>
-);

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

@@ -1,4 +0,0 @@
-import React from 'react';
-import { CountryPicker } from 'src/components';
-
-export const DefaultCountryPicker = () => <CountryPicker label="Country" />;

package/src/components/Form/CountryPicker/examples/Disabled.tsx

@@ -1,5 +0,0 @@
-import React from 'react';
-
-import { CountryPicker } from '../CountryPicker';
-
-export const DisabledCountryPicker = () => <CountryPicker isDisabled />;

package/src/components/Form/CountryPicker/examples/Error.tsx

@@ -1,4 +0,0 @@
-import React from 'react';
-import { CountryPicker } from 'src/components';
-
-export const ErrorCountryPicker = () => <CountryPicker id="error" label="Country" error />;

package/src/components/Form/CountryPicker/examples/Form.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { Button } from 'src/components';
-import { Vertical } from 'src/components/Layout/Vertical/examples';
-
-import { CountryPicker } from '../CountryPicker';
-
-export const FormCountryPicker = () => {
-  const handleSubmit = (event: any) => {
-    event.preventDefault();
-    const formData = new FormData(event.target);
-    alert(`You CountryPickered: ${formData.getAll('formItem')}`);
-  };
-  return (
-    <form onSubmit={handleSubmit}>
-      <Vertical gap={10} width="100%">
-        <CountryPicker id="formItem" name="formItem" placeholder="CountryPicker an item..." />
-        <Button type="submit" alignSelf="center">
-          Submit
-        </Button>
-      </Vertical>
-    </form>
-  );
-};

package/src/components/Form/CountryPicker/examples/Formik.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { Field, Form, Formik } from 'formik';
-import { Button } from 'src/components';
-import { Vertical } from 'src/components/Layout/Vertical/examples';
-
-import { CountryPicker } from '../CountryPicker';
-
-export const FormikCountryPicker = () => {
-  const initialValues = {
-    country: '',
-  };
-
-  const onSubmit = (values: any) => {
-    alert(`${values.country}`);
-  };
-
-  return (
-    <Formik initialValues={initialValues} onSubmit={onSubmit}>
-      {({ values, handleChange }) => (
-        <Form>
-          <Vertical gap={10}>
-            <Field
-              id="country"
-              name="country"
-              as={CountryPicker}
-              value={values.country}
-              onChange={handleChange}
-              placeholder="CountryPicker an item..."
-            />
-
-            <Button type="submit" alignSelf="center">
-              Submit
-            </Button>
-          </Vertical>
-        </Form>
-      )}
-    </Formik>
-  );
-};

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

@@ -1,5 +0,0 @@
-import React from 'react';
-
-import { CountryPicker } from '../CountryPicker';
-
-export const HelperTextCountryPicker = () => <CountryPicker helperText="CountryPicker one item!" error />;

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

@@ -1,5 +0,0 @@
-import React from 'react';
-
-import { CountryPicker } from '../CountryPicker';
-
-export const ReadOnlyCountryPicker = () => <CountryPicker isReadOnly />;

package/src/components/Form/CountryPicker/examples/Shadow.tsx

@@ -1,4 +0,0 @@
-import React from 'react';
-import { CountryPicker } from 'src/components';
-
-export const ShadowCountryPicker = () => <CountryPicker shadow={{ boxShadow: 'rgba(0, 0, 0, 0.20) 0px 3px 8px' }} />;

package/src/components/Form/CountryPicker/examples/Shape.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { CountryPicker } from 'src/components';
-import { Vertical } from 'src/components/Layout/Vertical/examples';
-
-import { Shape } from '../CountryPicker/CountryPicker.type';
-
-export const ShapeCountryPicker = () => (
-  <Vertical gap={10}>
-    {['default', 'sharp', 'rounded', 'pillShaped'].map((shape) => (
-      <CountryPicker key={shape} label={shape} shape={shape as Shape} placeholder="Select a country..." />
-    ))}
-  </Vertical>
-);

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

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

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

@@ -1,17 +0,0 @@
-import React from 'react';
-
-import { CountryPicker } from '../CountryPicker';
-
-export const StyledCountryPicker = () => (
-  <CountryPicker
-    name="colorScheme"
-    colorScheme="theme.primary"
-    styles={{
-      box: { borderRadius: 10, borderColor: 'theme.primary', borderStyle: 'solid', borderWidth: 1 },
-      text: { color: 'theme.primary' },
-      label: { fontWeight: 'bold', color: 'theme.primary' },
-      dropDown: { color: 'theme.primary' },
-      field: { color: 'theme.primary' },
-    }}
-  />
-);

package/src/components/Form/CountryPicker/examples/Variant.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { CountryPicker } from 'src/components';
-import { Vertical } from 'src/components/Layout/Vertical/examples';
-
-import { Variant } from '../CountryPicker/CountryPicker.type';
-
-export const VariantCountryPicker = () => (
-  <Vertical gap={10}>
-    {['outline', 'default', 'unStyled'].map((variant) => (
-      <CountryPicker key={variant} variant={variant as Variant} label={variant} placeholder="Select a country..." />
-    ))}
-  </Vertical>
-);

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

@@ -1,12 +0,0 @@
-export * from 'src/components/Form/CountryPicker/examples/Color';
-export * from 'src/components/Form/CountryPicker/examples/Default';
-export * from 'src/components/Form/CountryPicker/examples/Disabled';
-export * from 'src/components/Form/CountryPicker/examples/Error';
-export * from 'src/components/Form/CountryPicker/examples/Form';
-export * from 'src/components/Form/CountryPicker/examples/HelperText';
-export * from 'src/components/Form/CountryPicker/examples/ReadOnlyInput';
-export * from 'src/components/Form/CountryPicker/examples/Shadow';
-export * from 'src/components/Form/CountryPicker/examples/Shape';
-export * from 'src/components/Form/CountryPicker/examples/SizeInput';
-export * from 'src/components/Form/CountryPicker/examples/StylesInput';
-export * from 'src/components/Form/CountryPicker/examples/Variant';

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

@@ -1,113 +0,0 @@
-import React, { CSSProperties } from 'react';
-import { Elevation } from 'src/utils/elevation';
-import { Shadow } from 'app-studio';
-
-import { DatePickerStyles, Shape, Size, Variant } from './DatePicker.type';
-
-export interface DatePickerProps {
-  /**
-   * The identifier for the DatePicker component.
-   */
-  id?: string;
-  /**
-   * Custom icon to display when the DatePicker is checked.
-   */
-  icon?: React.ReactNode;
-  /**
-   * Indicates whether the DatePicker has an error.
-   */
-  error?: boolean;
-  /**
-   * Additional helper text that provides information about the field.
-   */
-  helperText?: string;
-  /**
-   * The name of the toggle.
-   */
-  name?: string;
-
-  /**
-   * The color scheme that changes the background color of the DatePicker.
-   */
-  colorScheme?: string;
-  /**
-   * If true, the DatePicker cannot be selected.
-   */
-  isReadOnly?: boolean;
-  /**
-   * If true, the DatePicker will be unusable.
-   */
-  isDisabled?: boolean;
-
-  /**
-   * The label text for the  field.
-   */
-  label?: string;
-  /**
-   * Callback function triggered when the DatePicker value changes.
-   */
-  onChange?: (value: any) => void;
-  /**
-   * Callback function triggered when the DatePicker value changes for IOS and Android.
-   */
-  onChangeText?: (text: string) => void;
-  /**
-   * CSS styles for the DatePicker container and label.
-   */
-  styles?: DatePickerStyles;
-  /**
-   * The shape that changes the outlines of the field.
-   */
-  shape?: Shape;
-  /**
-   * Changes the style of the  field.
-   */
-  variant?: Variant;
-  /**
-   * The size that sets the height and width of the DatePicker.
-   */
-  size?: Size;
-  /**
-   * Adds a shadow effect to the DatePicker.
-   */
-  shadow?: Shadow | Elevation | CSSProperties;
-  /**
-   * Other properties that can be passed to the component.
-   */
-  [x: string]: any;
-}
-
-export interface DatePickerViewProps extends DatePickerProps {
-  /**
-   * The selected date value as a string.
-   */
-  date: string;
-
-  /**
-   * A function to set the selected date value.
-   * @param {string} newDate - The new date value to set.
-   */
-  setDate: (newDate: string) => void;
-
-  /**
-   * Flag indicating if the date picker is currently being hovered.
-   */
-  isHovered: boolean;
-
-  /**
-   * A function to set the hovered state of the date picker.
-   * @param {boolean} hovered - The hovered state to set.
-   */
-  setIsHovered: (hovered: boolean) => void;
-
-  /**
-   * Flag indicating if the date picker is currently focused.
-   */
-  isFocused: boolean;
-
-  /**
-   * A function to set the focus state of the date picker.
-   * @param {boolean} focused - The focus state to set.
-   */
-  setIsFocused: (focused: boolean) => void;
-}

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

@@ -1,17 +0,0 @@
-import React from 'react';
-import format from 'date-fns/format';
-
-export const useDatePickerState = () => {
-  const [isHovered, setIsHovered] = React.useState(false);
-  const [isFocused, setIsFocused] = React.useState(false);
-  const [date, setDate] = React.useState(format(new Date(), 'yyyy-MM-dd'));
-
-  return {
-    date,
-    setDate,
-    isHovered,
-    setIsHovered,
-    isFocused,
-    setIsFocused,
-  };
-};

package/src/components/Form/DatePicker/DatePicker/DatePicker.style.ts

@@ -1,17 +0,0 @@
-import { Size } from './DatePicker.type';
-
-export const IconSizes: Record<Size, string> = {
-  xs: '8px',
-  sm: '10px',
-  md: '12px',
-  lg: '14px',
-  xl: '16px',
-};
-
-export const LabelSizes: Record<Size, number> = {
-  xs: 8,
-  sm: 10,
-  md: 12,
-  lg: 14,
-  xl: 16,
-};

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

@@ -1,15 +0,0 @@
-export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-export type DatePickerStyles = {
-  box?: CSSProperties;
-  text?: CSSProperties;
-  label?: CSSProperties;
-  helperText?: CSSProperties;
-  field?: CSSProperties;
-};
-
-export type Position = 'top' | 'left' | 'right' | 'bottom';
-
-export type Shape = 'default' | 'sharp' | 'rounded' | 'pillShaped';
-
-export type Variant = 'default' | 'outline' | 'unStyled';

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

@@ -1,118 +0,0 @@
-import React from 'react';
-import { Input, Typography } from 'app-studio';
-import { FieldContainer } from 'src/components/Layout/Input/FieldContainer/FieldContainer';
-import { FieldContent } from 'src/components/Layout/Input/FieldContent/FieldContent';
-import { FieldLabel } from 'src/components/Layout/Input/FieldLabel/FieldLabel';
-import { FieldWrapper } from 'src/components/Layout/Input/FieldWrapper/FieldWrapper';
-
-import { DatePickerViewProps } from './DatePicker.props';
-
-const DatePickerContent = (props: any) => <Input type="date" {...props} />;
-
-const DatePickerView: React.FC<DatePickerViewProps> = ({
-  id,
-  icon,
-  name,
-  label,
-  date,
-  children,
-  helperText,
-  shadow = {},
-  size = 'md',
-  variant = 'default',
-  shape = 'default',
-  colorScheme = 'theme.primary',
-  styles = { box: {}, label: {}, helperText: {}, text: {}, field: {} },
-  error = false,
-  isHovered = false,
-  isFocused = false,
-  isDisabled = false,
-  isReadOnly = false,
-  setDate = () => {},
-  setIsFocused = () => {},
-  setIsHovered = () => {},
-  onChange,
-  onChangeText,
-  ...props
-}) => {
-  const isWithLabel = !!(isFocused && label);
-
-  const handleHover = () => setIsHovered(!isHovered);
-  const handleFocus = () => setIsFocused(true);
-
-  const handleDateChange = (event: any) => {
-    if (typeof event === 'string') {
-      setDate(event);
-      if (onChangeText) onChangeText(event);
-    } else {
-      setDate(event.target.value);
-      if (onChange) onChange(event);
-    }
-  };
-
-  const fieldStyles = {
-    margin: 0,
-    paddingVertical: 8,
-    paddingHorizontal: 0,
-    width: '100%',
-    heigth: '100%',
-    border: 'none',
-    on: {
-      focus: {
-        outline: 'none',
-        backgroundColor: 'transparent',
-      },
-    },
-    fontSize: Typography.fontSizes[size],
-    backgroundColor: 'transparent',
-    color: isDisabled ? 'trueGray.600' : 'blueGray.700',
-    cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer',
-    ...styles['field'],
-  };
-
-  return (
-    <FieldContainer helperText={helperText} error={error} styles={styles}>
-      <FieldContent
-        label={label}
-        size={size}
-        error={error}
-        shape={shape}
-        styles={styles}
-        shadow={shadow}
-        variant={variant}
-        value={date}
-        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>
-          )}
-          <DatePickerContent
-            id={id}
-            name={name}
-            value={date}
-            onFocus={handleFocus}
-            onChange={handleDateChange}
-            disabled={isDisabled}
-            readOnly={isReadOnly}
-            {...fieldStyles}
-            {...(onChangeText && { onChangeText: handleDateChange })}
-            {...props}
-          />
-        </FieldWrapper>
-      </FieldContent>
-    </FieldContainer>
-  );
-};
-
-export default DatePickerView;

package/src/components/Form/DatePicker/DatePicker.md

@@ -1,115 +0,0 @@
-### **Default**
-
-```jsx
-<DatePicker />
-```
-
-### **Disabled**
-
-“**_isDisabled_**” makes the field unusable and unwritable.
-
-```tsx
-<DatePicker name="disabled" isDisabled />
-```
-
-### **Read Only**
-
-“**_isReadOnly_**” makes the field readable but not writable. Can only read the the date.
-
-```tsx
-<DatePicker name="readOnly" isReadOnly />
-```
-
-### **Size**
-
-“**_size_**” modifies the date picker's font size and label. The default value is "md.
-
-```tsx
-import { Vertical } from "../../Layout/Vertical/Vertical";
-
-<Vertical gap={10}>
-  <DatePicker name="xs" size="xs" />
-  <DatePicker name="sm" size="sm" />
-  <DatePicker name="md" size="md" />
-  <DatePicker name="lg" size="lg" />
-  <DatePicker name="xl" size="xl" />
-</Vertical>;
-```
-
-### **Color Scheme**
-
-“**_colorScheme_**” property modifies the background color of the datePicker.
-
-```jsx
-import { Vertical } from "../../Layout/Vertical/Vertical";
-
-<Vertical gap={15}>
-  {["theme.primary", "theme.secondary", "theme.error", "theme.success", "warning"].map((color) => (
-    <DatePicker key={color} name={color} colorScheme={color} />
-  ))}
-</Vertical>;
-```
-
-### **Error**
-
-“**_error_**” indicate the presence of an issue or problem with the field
-
-```tsx
-<DatePicker id="error" name="error" error />
-```
-
-### **Helper Text**
-
-“**_helperTex_**t” a text to provides additional information about the field.
-
-```jsx
-<DatePicker
-  id="helper"
-  name="helper"
-  helperText="Please select another date"
-  error
-/>
-```
-
-### **Shadow**
-
-“**_shadow_**” applies a shadow effects to the date picker.
-
-```tsx
-<DatePicker
-  name="shadow"
-  shadow={{
-    boxShadow: "rgba(0, 0, 0, 0.20) 0px 3px 8px",
-  }}
-/>
-```
-
-### **Styles**
-
-“**_styles”_** is used to customize the appearance of both the DatePicker and its associated label.
-
-```tsx
-<DatePicker
-  colorScheme="theme.primary"
-  styles={{
-    datePicker: { borderRadius: 10, borderColor: "color.purple" },
-    label: { color: "color.purple" },
-  }}
-/>
-```
-
-## Types
-
-```tsx static
-type Size = "sm" | "md" | "lg" | "xl";
-```
-
-```jsx static
-type Styles = {
-  box?: CSSProperties,
-  text?: CSSProperties,
-  label?: CSSProperties,
-  helperText?: CSSProperties,
-  field?: CSSProperties,ssss
-};
-```

package/src/components/Form/DatePicker/DatePicker.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-
-import { DatePickerProps } from './DatePicker/DatePicker.props';
-import { useDatePickerState } from './DatePicker/DatePicker.state';
-import DatePickerView from './DatePicker/DatePicker.view';
-
-const DatePickerComponent: React.FC<DatePickerProps> = (props) => {
-  const datePickerStates = useDatePickerState();
-  return <DatePickerView {...datePickerStates} {...props} />;
-};
-
-/**
- * Date picker allows users to select a date from a calendar view.
- */
-export const DatePicker = DatePickerComponent;

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

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Vertical } from 'src/components/Layout/Vertical/examples';
-
-import { DatePicker } from '../DatePicker';
-
-export const ColorDatePicker = () => (
-  <Vertical gap={15}>
-    {['theme.primary', 'theme.secondary', 'theme.error', 'theme.success', 'theme.warning'].map((color) => (
-      <DatePicker key={color} name="name" colorScheme={color} label="Select a date:" />
-    ))}
-  </Vertical>
-);

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

@@ -1,4 +0,0 @@
-import React from 'react';
-import { DatePicker } from 'src/components';
-
-export const DefaultDatePicker = () => <DatePicker label="Select a date" />;

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

@@ -1,5 +0,0 @@
-import React from 'react';
-
-import { DatePicker } from '../DatePicker';
-
-export const DisabledDatePicker = () => <DatePicker name="disabled" isDisabled />;

package/src/components/Form/DatePicker/examples/ErrorCheckbox.tsx

@@ -1,4 +0,0 @@
-import React from 'react';
-import { DatePicker } from 'src/components';
-
-export const ErrorDatePicker = () => <DatePicker id="error" name="error" error />;

package/src/components/Form/DatePicker/examples/FormCheckout.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { Button } from 'src/components';
-import { Horizontal } from 'src/components';
-
-import { DatePicker } from '../DatePicker';
-
-export const FormDatePicker = () => {
-  const handleSubmit = (event: any) => {
-    event.preventDefault();
-    const formData = new FormData(event.target);
-    alert(`You selected: ${formData.getAll('datePicker')}`);
-  };
-  return (
-    <form onSubmit={handleSubmit}>
-      <Horizontal gap={10}>
-        <DatePicker id="date" name="datePicker" />
-        <Button type="submit" marginTop={10}>
-          Submit
-        </Button>
-      </Horizontal>
-    </form>
-  );
-};