@app-studio/web 0.1.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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/DatePicker/DatePicker/DatePicker.props.ts

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

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

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

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

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

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

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

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

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

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

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

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

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