@app-studio/web 0.1.0

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Vertical } from 'src/components/Layout/Vertical/examples';
+
+import { Checkbox } from '../Checkbox';
+
+export const SizeCheckbox = () => (
+  <Vertical gap={10}>
+    <Checkbox name="sm" size="sm" label="sm" defaultIsSelected />
+    <Checkbox name="md" size="md" label="md" defaultIsSelected />
+    <Checkbox name="lg" size="lg" label="lg" defaultIsSelected />
+    <Checkbox name="xl" size="xl" label="xl" defaultIsSelected />
+    <Checkbox name="2xl" size="2xl" label="2xl" defaultIsSelected />
+    <Checkbox name="3xl" size="3xl" label="3xl" defaultIsSelected />
+    <Checkbox name="4xl" size="4xl" label="4xl" defaultIsSelected />
+    <Checkbox name="5xl" size="5xl" label="5xl" defaultIsSelected />
+    <Checkbox name="6xl" size="6xl" label="6xl" defaultIsSelected />
+  </Vertical>
+);

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

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { Checkbox } from '../Checkbox';
+
+export const StyledCheckbox = () => (
+  <Checkbox
+    colorScheme="theme.primary"
+    label="Active"
+    styles={{
+      checkbox: {
+        borderRadius: '50%',
+        borderColor: 'theme.primary',
+        borderStyle: 'solid',
+        borderWidth: 1,
+        height: '16px',
+        width: '16px',
+      },
+      label: { color: 'theme.primary' },
+    }}
+    defaultIsSelected
+  />
+);

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

@@ -0,0 +1,11 @@
+export * from 'src/components/Form/Checkbox/examples/ColorScheme';
+export * from 'src/components/Form/Checkbox/examples/Default';
+export * from 'src/components/Form/Checkbox/examples/DisabledInput';
+export * from 'src/components/Form/Checkbox/examples/ErrorCheckbox';
+export * from 'src/components/Form/Checkbox/examples/FormCheckout';
+export * from 'src/components/Form/Checkbox/examples/IconCheckbox';
+export * from 'src/components/Form/Checkbox/examples/IndeterminateCheckbox';
+export * from 'src/components/Form/Checkbox/examples/ReadOnlyInput';
+export * from 'src/components/Form/Checkbox/examples/Shadow';
+export * from 'src/components/Form/Checkbox/examples/SizeInput';
+export * from 'src/components/Form/Checkbox/examples/StylesInput';

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

@@ -0,0 +1,187 @@
+import { CSSProperties } from 'react';
+import { Elevation } from 'src/utils/elevation';
+import { Shadow } from 'app-studio';
+
+import { Country, CountryPickerStyles, Shape, Size, Variant } from './CountryPicker.type';
+
+export interface CountryPickerProps {
+  /**
+   * The identifier for the CountryPicker component.
+   */
+  id?: string;
+  /**
+   * Indicates whether the field has an error.
+   */
+  error?: boolean;
+  /**
+   * The name of the field.
+   */
+  name?: string;
+  /**
+   * The label text for the field.
+   */
+  label?: string;
+  /**
+   * The color scheme that changes the border color on hover of the field.
+   */
+  colorScheme?: string;
+  /**
+   * Additional helper text that provides information about the field.
+   */
+  helperText?: string;
+  /**
+   * A brief text or hint that appears in the field before the user enters any value.
+   */
+  placeholder?: string;
+  /**
+   * The shape that changes the outlines of the CountryPicker.
+   */
+  shape?: Shape;
+  /**
+   * If true, the field will be automatically focused.
+   */
+  isAutoFocus?: boolean;
+  /**
+   * If true, the CountryPicker cannot be edited.
+   */
+  isReadOnly?: boolean;
+  /**
+   * If true, the field will be unusable.
+   */
+  isDisabled?: boolean;
+  /**
+   * Callback function triggered when the CountryPicker loses focus.
+   */
+  onBlur?: (value: any) => void;
+  /**
+   * Callback function triggered when the field value changes.
+   */
+  onChange?: (value: any) => void;
+  /**
+   * CSS styles for the CountryPicker component.
+   */
+  styles?: CountryPickerStyles;
+  /**
+   * The font size of the CountryPicker.
+   */
+  size?: Size;
+  /**
+   * The default value of the input field.
+   */
+  value?: string | number;
+  /**
+   * Changes the style of the input field.
+   */
+  variant?: Variant;
+  /**
+   * Adds a shadow effect to the CountryPicker.
+   */
+  shadow?: Shadow | Elevation | CSSProperties;
+  /**
+   * Other properties that can be passed to the component.
+   */
+  [x: string]: any;
+}
+
+export interface CountryPickerViewProps extends CountryPickerProps {
+  /**
+   * Indicates whether the country picker is currently being hovered.
+   */
+  isHovered?: boolean;
+
+  /**
+   * A function to set the hovered state of the country picker.
+   * @param hovered - The hovered state to set.
+   */
+  setIsHovered?: (hovered: boolean) => void;
+
+  /**
+   * Indicates whether the country picker is focused.
+   */
+  isFocused?: boolean;
+
+  /**
+   * A function to set the focus state of the country picker.
+   * @param focused - The focus state to set.
+   */
+  setIsFocused?: (focused: boolean) => void;
+
+  /**
+   * Indicates the currently selected country.
+   */
+  selected?: string;
+
+  /**
+   * A function to set the selected country.
+   * @param selected - The selected country to set.
+   */
+  setSelected?: (selected: string) => void;
+
+  /**
+   * Indicates whether the country picker should be hidden.
+   */
+  hide?: boolean;
+
+  /**
+   * A function to set the hide state of the country picker.
+   * @param hide - The hide state to set.
+   */
+  setHide?: (hide: boolean) => void;
+
+  /**
+   * Options for the country picker.
+   */
+  newOptions?: Array<Country>;
+
+  /**
+   * A function to set the new options for the country picker.
+   * @param newOptions - The new options to set.
+   */
+  setNewOptions?: (newOptions: Array<Country>) => void;
+}
+
+export interface DropDownProps {
+  /**
+   * To set the height and width of the item list.
+   */
+  size?: Size;
+  /**
+   * Function that will be called when the option is CountryPickered
+   */
+  callback?: Function;
+  /**
+   * List of options
+   */
+  options: Array<Country>;
+  /**
+   * Css styles for the CountryPicker container and label
+   */
+  styles?: CountryPickerStyles;
+  /**
+   * other properties
+   */
+  [x: string]: any;
+}
+
+export interface DropDownItemProps {
+  /**
+   * Function that will be called when the option is clicked
+   */
+  callback?: Function;
+  /**
+   * Option to be displayed
+   */
+  option: string;
+  /**
+   * To set the DropDownItem's fontSize
+   */
+  size?: Size;
+  /**
+   * Css styles
+   */
+  styles?: CountryPickerStyles;
+  /**
+   * other properties
+   */
+  [x: string]: any;
+}

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

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import countryList from '../countries.json';
+
+import { CountryPickerProps } from './CountryPicker.props';
+import { Country } from './CountryPicker.type';
+
+export const useCountryPickerState = ({ placeholder }: CountryPickerProps) => {
+  const [newOptions, setNewOptions] = React.useState<Array<Country>>(countryList);
+  const [selected, setSelected] = React.useState<string>(placeholder ?? countryList[0].name);
+
+  const [hide, setHide] = React.useState(true);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [isHovered, setIsHovered] = React.useState(false);
+
+  return {
+    hide,
+    setHide,
+    newOptions,
+    setNewOptions,
+    isHovered,
+    setIsHovered,
+    isFocused,
+    setIsFocused,
+    selected,
+    setSelected,
+  };
+};

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

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

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

@@ -0,0 +1,22 @@
+export type CountryPickerStyles = {
+  text?: CSSProperties;
+  icon?: CSSProperties;
+  dropDown?: CSSProperties;
+  box?: CSSProperties;
+  label?: CSSProperties;
+  helperText?: CSSProperties;
+  field?: CSSProperties;
+};
+
+export type Country = {
+  name: string;
+  dial_code: string;
+  emoji: string;
+  code: string;
+};
+
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export type Shape = 'default' | 'sharp' | 'rounded' | 'pillShaped';
+
+export type Variant = 'default' | 'outline' | 'unStyled';

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

@@ -0,0 +1,234 @@
+import React, { useEffect, useState } from 'react';
+import { Element,Input,Typography,useTheme } from 'app-studio';
+import { FieldContainer, FieldContent, FieldIcons, FieldLabel, FieldWrapper } from 'src/components/Layout/Input';
+import { ArrowDownSvg } from 'src/components/Svg/ArrowDown';
+import { ArrowUpSvg } from 'src/components/Svg/ArrowUp';
+
+import countryList from '../countries.json';
+
+import { CountryPickerViewProps, DropDownItemProps, DropDownProps } from './CountryPicker.props';
+import { IconSizes } from './CountryPicker.style';
+import { Country } from './CountryPicker.type';
+
+const CountryList: React.FC<DropDownProps> = (props) => <Element as="ul" {...props} />;
+
+const CountrySelector: React.FC<any> = (props) => <Input type="country" {...props} />;
+
+const CountryItem: React.FC<DropDownItemProps> = (props) => <Element as="li" {...props} />;
+
+export const DropDownItem: React.FC<DropDownItemProps> = ({
+  option,
+  size = 'md',
+  callback = () => {},
+  styles = { text: {} },
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleOptionClick = (event: any) => {
+    event.stopPropagation();
+    callback(option);
+  };
+  const handleHover = () => setIsHovered(!isHovered);
+  return (
+    <CountryItem
+      margin={0}
+      role="DropDownItem"
+      listStyleType="none"
+      paddingVertical={6}
+      paddingHorizontal={12}
+      onMouseEnter={handleHover}
+      onMouseLeave={handleHover}
+      onPress={handleOptionClick}
+      fontSize={Typography.fontSizes[size]}
+      backgroundColor={isHovered ? 'trueGray.100' : 'transparent'}
+      {...styles['text']}
+    >
+      {option}
+    </CountryItem>
+  );
+};
+
+export const DropDown: React.FC<DropDownProps> = ({
+  size,
+  styles = { dropDown: {} },
+  options,
+  callback = () => {},
+}) => {
+  const handleCallback = (option: string) => callback(option);
+  return (
+    <CountryList
+      role="dropDown"
+      margin={0}
+      padding={0}
+      top="100%"
+      width="100%"
+      display="flex"
+      zIndex={1000}
+      overflow="auto"
+      maxHeight="300px"
+      borderRadius={4}
+      position="absolute"
+      flexDirection="column"
+      backgroundColor="white"
+      boxShadow="rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px"
+      {...styles['dropDown']}
+    >
+      {options.map((option: Country) => (
+        <DropDownItem
+          key={option.code}
+          size={size}
+          option={option.name}
+          callback={handleCallback}
+          {...styles['text']}
+        />
+      ))}
+    </CountryList>
+  );
+};
+
+const CountryPickerView: React.FC<CountryPickerViewProps> = ({
+  id,
+  name,
+  label,
+  selected,
+  placeholder,
+  helperText,
+  hide = false,
+  error = false,
+  isHovered = false,
+  isFocused = false,
+  isAutoFocus = false,
+  isDisabled = false,
+  isReadOnly = false,
+  shadow = {},
+  newOptions = [],
+  size = 'md',
+  variant = 'default',
+  shape = 'default',
+  colorScheme = 'theme.primary',
+  onChange,
+  onBlur = () => {},
+  setHide = () => {},
+  setNewOptions = () => {},
+  setIsHovered = () => {},
+  setIsFocused = () => {},
+  setSelected = () => {},
+  styles = {
+    text: {},
+    icon: {},
+    label: {},
+    dropDown: {},
+    helperText: {},
+    box: {},
+  },
+  ...props
+}) => {
+  const { getColor } = useTheme();
+  const IconColor = getColor('color.blueGray.700');
+
+  const handleHover = () => setIsHovered(!isHovered);
+  const handleFocus = () => setIsFocused(true);
+
+  const handleCallback = (option: string) => {
+    setHide(!hide);
+    setSelected(option);
+  };
+
+  const handleClick = () => {
+    if (!isDisabled && !isReadOnly) {
+      setHide(!hide);
+    }
+  };
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedCountry = event.target.value;
+    const filteredCountries = countryList.filter((country) =>
+      country.name.toLowerCase().startsWith(selectedCountry.toLowerCase())
+    );
+    if (hide) setHide(false);
+    setSelected(event.target.value);
+    setNewOptions(filteredCountries);
+    if (onChange) onChange(event);
+  };
+
+  const handleBlur = (event: any) => {
+    onBlur(event);
+    setIsFocused(false);
+  };
+
+  useEffect(() => {
+    if (onChange) onChange(selected); // Call onChange when selectedCountry changes
+  }, [onChange, selected]);
+
+  const isWithLabel = !!(isFocused && label);
+
+  const fieldStyles = {
+    margin: 0,
+    paddingVerical: 8,
+    paddingHorizonatl: 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'],
+  };
+
+  return (
+    <FieldContainer helperText={helperText} error={error} styles={styles} onPress={handleClick}>
+      <FieldContent
+        label={label}
+        size={size}
+        error={error}
+        shape={shape}
+        styles={styles}
+        shadow={shadow}
+        variant={variant}
+        value={selected}
+        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>
+          )}
+          <CountrySelector
+            id={id}
+            name={name}
+            placeholder={placeholder}
+            readOnly={isReadOnly}
+            disabled={isDisabled}
+            autoFocus={isAutoFocus}
+            onBlur={handleBlur}
+            onFocus={handleFocus}
+            {...fieldStyles}
+            {...props}
+            value={selected}
+            onChange={handleChange}
+          />
+        </FieldWrapper>
+        <FieldIcons>
+          {hide ? (
+            <ArrowDownSvg size={IconSizes[size]} color={IconColor} style={styles['icon']} />
+          ) : (
+            <ArrowUpSvg size={IconSizes[size]} color={IconColor} style={styles['icon']} />
+          )}
+        </FieldIcons>
+      </FieldContent>
+      {!hide && <DropDown size={size} styles={styles} options={newOptions} callback={handleCallback} />}
+    </FieldContainer>
+  );
+};
+
+export default CountryPickerView;