@app-studio/web 0.1.4 → 0.1.6

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;