@app-studio/web 0.1.5 → 0.1.6

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

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

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

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

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

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

package/src/components/Form/CountryPicker/CountryPicker.md

@@ -1,206 +0,0 @@
-### **Import**
-
-```jsx static
-import { CountryPicker } from "app-studio";
-```
-
-### **Default**
-
-```jsx
-<CountryPicker label="Country" placeholder="Select a country..." />
-```
-
-### **Disabled**
-
-“**_isDisabled_**” makes the field unusable.
-
-```tsx
-<CountryPicker isDisabled />
-```
-
-### **Read Only**
-
-“**_isReadOnly_**” makes the field readable but not writable. Can only read the element.
-
-```tsx
-<CountryPicker isReadOnly />
-```
-
-### **Size**
-
-“**_size_**” changes the text and icon size . It has a default value of “md”.
-
-```tsx
-import { Vertical } from "../../Layout/Vertical/Vertical";
-
-<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>;
-```
-
-### **Shape**
-
-“**_shape_**” changes the appearance of the borders.
-
-```tsx
-import { Vertical } from "../../Layout/Vertical/Vertical";
-
-<Vertical gap={10}>
-  {["default", "sharp", "rounded", "pillShaped"].map((shape) => (
-    <CountryPicker
-      key={shape}
-      shape={shape}
-      placeholder="Select a country..."
-    />
-  ))}
-</Vertical>;
-```
-
-### **Variant**
-
-“**_variant_**” modifies the layout or design of the component.
-
-```tsx
-import { Vertical } from "../../Layout/Vertical/Vertical";
-
-<Vertical gap={10}>
-  {["outline", "default", "unStyled"].map((variant) => (
-    <CountryPicker
-      key={variant}
-      variant={variant}
-      label={variant}
-      placeholder="Select a country..."
-    />
-  ))}
-</Vertical>;
-```
-
-### **ColorScheme**
-
-“**_colorScheme_**” modifies the label and border color of the field.
-
-```jsx
-import { Vertical } from "../../Layout/Vertical/Vertical";
-
-<Vertical gap={15}>
-  {["theme.primary", "theme.secondary", "theme.error", "theme.success", "theme.warning"].map((color) => (
-    <CountryPicker key={color} label={color} colorScheme={color} />
-  ))}
-</Vertical>;
-```
-
-### **Shadow**
-
-“**_shadow_**” adds a shadow effect to the field.
-
-```tsx
-<CountryPicker shadow={{ boxShadow: "rgba(0, 0, 0, 0.20) 0px 3px 8px" }} />
-```
-
-### **HelperText**
-
-“**_helperText_**” provides additional information about the field.
-
-```tsx
-<CountryPicker helperText="CountryPicker one item!" error />
-```
-
-### **Styles**
-
-“**_styles_**” changes the style of the field.
-
-```jsx
-<CountryPicker
-  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"  },
-  }}
-  error
-/>
-```
-
-```jsx static
-const Shapes: Record<Shape, number | string> = {
-  default: "6px 6px 0 0",
-  sharp: 0,
-  rounded: 4,
-  pillShaped: 24,
-};
-```
-
-## Types
-
-```tsx static
-type Size = "xs" | "sm" | "md" | "lg" | "xl";
-```
-
-```jsx static
-type CountryPickerStyles = {
-  text?: CSSProperties,
-  icon?: CSSProperties,
-  dropDown?: CSSProperties,
-  box?: CSSProperties,
-  label?: CSSProperties,
-  helperText?: CSSProperties,
-};
-```
-
-```jsx static
-type Shape = "default" | "sharp" | "rounded" | "pillShaped";
-```
-
-```jsx static
-type Country = {
-  name: string,
-  dial_code: string,
-  emoji: string,
-  code: string,
-};
-```
-
-```js static
-type Variant = "default" | "outline" | "unStyled";
-```
-
-```jsx static
-type Styles = {
-  box?: CSSProperties,
-  text?: CSSProperties,
-  label?: CSSProperties,
-  helperText?: CSSProperties,
-  field?: CSSProperties,ssss
-};
-```
-
-## Default Values
-
-```jsx static
-const LabelSizes: Record<Size, number> = {
-  xs: 8,
-  sm: 10,
-  md: 12,
-  lg: 14,
-  xl: 16,
-};
-```
-
-```jsx static
-const IconSizes: Record<Size, string> = {
-  xs: "8px",
-  sm: "10px",
-  md: "12px",
-  lg: "14px",
-  xl: "16px",
-};
-```

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

@@ -1,16 +0,0 @@
-import React from 'react';
-
-import { CountryPickerProps } from './CountryPicker/CountryPicker.props';
-import { useCountryPickerState } from './CountryPicker/CountryPicker.state';
-import CountryPickerView from './CountryPicker/CountryPicker.view';
-
-const CountryPickerComponent: React.FC<CountryPickerProps> = (props) => {
-  const countryPickerStates = useCountryPickerState(props);
-
-  return <CountryPickerView {...countryPickerStates} {...props} />;
-};
-
-/**
- * Country picker allows users to select a country from a dropdown list or search field.
- */
-export const CountryPicker = CountryPickerComponent;