@app-studio/web 0.1.4 → 0.1.6

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

@@ -1,91 +0,0 @@
-import { CSSProperties } from 'react';
-import { Elevation } from 'src/utils/elevation';
-import { Shadow } from 'app-studio';
-
-import { Size, SwitchStyles } from './Switch.type';
-
-export interface SwitchProps {
-  /**
-   * The content to be rendered when the switch is active.
-   */
-  activeChild?: React.ReactNode;
-
-  /**
-   * Specifies the color scheme for the switch's background.
-   */
-  colorScheme?: string;
-
-  /**
-   * Specifies the unique identifier of the switch.
-   */
-  id?: string;
-
-  /**
-   * Indicates the initial value of the switch.
-   */
-  isChecked?: boolean;
-
-  /**
-   * If set to true, the switch is disabled and cannot be interacted with.
-   */
-  isDisabled?: boolean;
-
-  /**
-   * If set to true, the switch cannot be turned on or off and is in read-only mode.
-   */
-  isReadOnly?: boolean;
-
-  /**
-   * A callback function that is invoked when the switch's value changes.
-   */
-  onChange?: Function;
-
-  /**
-   * A callback function that is invoked when the switch's value changes on iOS and Android devices.
-   */
-  onValueChange?: (event: any) => void;
-
-  /**
-   * The name of the switch.
-   */
-  name?: string;
-
-  /**
-   * The content to be rendered when the switch is inactive.
-   */
-  inActiveChild?: React.ReactNode;
-
-  /**
-   * Custom CSS styles for the switch container and its components.
-   */
-  styles?: SwitchStyles;
-
-  /**
-   * Adds a shadow effect to the switch.
-   */
-  shadow?: Shadow | Elevation | CSSProperties;
-
-  /**
-   * Specifies the size of the switch, affecting its height and width.
-   */
-  size?: Size;
-
-  /**
-   * Additional properties and attributes.
-   */
-  [x: string]: any;
-}
-
-export interface SwitchViewProps extends SwitchProps {
-  /** Prop indicating if the switch is being hovered */
-  isHovered: boolean;
-
-  /** Callback prop to update the hover state of the switch */
-  setIsHovered: Function;
-
-  /** Prop indicating the current state of the switch */
-  on?: boolean;
-
-  /** Callback prop to update the state of the switch */
-  setOn?: Function;
-}

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

@@ -1,11 +0,0 @@
-import React from 'react';
-
-import { SwitchProps } from './Switch.props';
-
-export const useSwitchState = ({ isDisabled, isChecked }: SwitchProps) => {
-  const [isHovered, setIsHovered] = React.useState(false);
-
-  const [on, setOn] = React.useState(isDisabled ? !isDisabled : isChecked);
-
-  return { isHovered, setIsHovered, on, setOn };
-};

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

@@ -1,72 +0,0 @@
-import { CSSProperties } from 'react';
-
-import { Size } from './Switch.type';
-
-export const KnobSizes: Record<Size, CSSProperties> = {
-  xs: { height: 6, width: 6 },
-  sm: { height: 9, width: 9 },
-  md: { height: 12, width: 12 },
-  lg: { height: 15, width: 15 },
-  xl: { height: 18, width: 18 },
-  '2xl': { height: 21, width: 21 },
-  '3xl': { height: 24, width: 24 },
-  '4xl': { height: 27, width: 27 },
-  '5xl': { height: 30, width: 30 },
-  '6xl': { height: 33, width: 33 },
-};
-
-export const SliderSizes: Record<Size, CSSProperties> = {
-  xs: {
-    height: 16,
-    width: 28,
-  },
-  sm: {
-    height: 20,
-    width: 36,
-  },
-  md: {
-    height: 24,
-    width: 44,
-  },
-  lg: {
-    height: 28,
-    width: 52,
-  },
-  xl: {
-    height: 32,
-    width: 60,
-  },
-  '2xl': {
-    height: 36,
-    width: 68,
-  },
-  '3xl': {
-    height: 40,
-    width: 76,
-  },
-  '4xl': {
-    height: 44,
-    width: 84,
-  },
-  '5xl': {
-    height: 48,
-    width: 92,
-  },
-  '6xl': {
-    height: 52,
-    width: 100,
-  },
-};
-
-export const SliderPadding: Record<Size, Record<string, number>> = {
-  xs: { paddingVertical: 0, paddingHorizontal: 2 },
-  sm: { paddingVertical: 0, paddingHorizontal: 3 },
-  md: { paddingVertical: 0, paddingHorizontal: 5 },
-  lg: { paddingVertical: 0, paddingHorizontal: 6 },
-  xl: { paddingVertical: 0, paddingHorizontal: 8 },
-  '2xl': { paddingVertical: 0, paddingHorizontal: 9 },
-  '3xl': { paddingVertical: 0, paddingHorizontal: 10 },
-  '4xl': { paddingVertical: 0, paddingHorizontal: 13 },
-  '5xl': { paddingVertical: 0, paddingHorizontal: 15 },
-  '6xl': { paddingVertical: 0, paddingHorizontal: 16 },
-};

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

@@ -1,6 +0,0 @@
-export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
-
-export type SwitchStyles = {
-  slider?: CSSProperties;
-  circle?: CSSProperties;
-};

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

@@ -1,78 +0,0 @@
-import React from 'react';
-import { Input } from 'app-studio';
-import { Label } from 'src/components/Form/Label/Label';
-import { View } from 'src/components/Layout/View/View';
-
-import { SwitchViewProps } from './Switch.props';
-import { KnobSizes, SliderPadding, SliderSizes } from './Switch.style';
-
-const SwitchContent = (props: any) => <Input type="checkbox" {...props} />;
-
-const SwitchView: React.FC<SwitchViewProps> = ({
-  id,
-  name,
-  inActiveChild,
-  activeChild,
-  shadow = {},
-  size = 'sm',
-  colorScheme = 'theme.primary',
-  on = false,
-  isHovered = false,
-  isChecked = false,
-  isDisabled = false,
-  isReadOnly = false,
-  onChange,
-  onValueChange,
-  setOn = () => {},
-  setIsHovered = () => {},
-  styles = { slider: {}, circle: {} },
-  ...props
-}) => {
-  const handleToggle = (event: any) => {
-    if (!isReadOnly) {
-      setOn(!on);
-      if (onChange) onChange(event);
-    }
-  };
-
-  const handleHover = () => setIsHovered(!isHovered);
-
-  return (
-    <Label htmlFor={id} onMouseEnter={handleHover} onMouseLeave={handleHover}>
-      <SwitchContent
-        id={id}
-        name={name}
-        opacity={0}
-        width={0}
-        height={0}
-        checked={on}
-        onChange={handleToggle}
-        disabled={isDisabled}
-        readOnly={isReadOnly}
-        {...(onValueChange && { onValueChange: handleToggle })}
-        {...props}
-      />
-      {/* Slide */}
-      <View
-        display="flex"
-        cursor="pointer"
-        alignItems="center"
-        borderRadius={24}
-        filter={isHovered && on ? 'brightness(0.9)' : 'brightness(1)'}
-        transition="justify-content 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
-        backgroundColor={isDisabled ? 'disabled' : on ? colorScheme : 'lightgray'}
-        justifyContent={activeChild ? 'space-between' : on ? 'flex-end' : 'flex-start'}
-        {...shadow}
-        {...SliderPadding[size]}
-        {...SliderSizes[size]}
-        {...styles['slider']}
-      >
-        {activeChild && on && <View>{activeChild}</View>}
-        <View borderRadius="50%" backgroundColor="white" {...KnobSizes[size]} {...styles['circle']} />
-        {inActiveChild && !on && <View>{inActiveChild}</View>}
-      </View>
-    </Label>
-  );
-};
-
-export default SwitchView;

package/src/components/Form/Switch/Switch.md

@@ -1,148 +0,0 @@
-### **Import**
-
-```tsx static
-import { Switch } from 'app-studio';
-```
-
-### **Default**
-
-```tsx
-<Switch />
-```
-
-### **Checked**
-
-“**_isChecked_**” is the toggle's initial state. It has a default value of false.
-
-```tsx
-<Switch name="checked" isChecked />
-```
-
-### **Disabled**
-
-“**_isDisabled_**” makes the toggle unusable.
-
-```tsx
-<Switch name="disabled" isDisabled />
-```
-
-### **Read Only**
-
-“**_isReadOnly_**” makes the toggle only readable. The user will be unable to change the state of the toggle.
-
-```tsx
-<Switch name="readOnly" isReadOnly isChecked />
-```
-
-### **Sizes**
-
-“**_size_**” changes the toggle size. It has a default value of “sm”.
-
-```tsx
-import { Vertical } from '../../Layout/Vertical/Vertical';
-
-<Vertical gap={10}>
-  <Switch name="xs" size="xs" isChecked />
-  <Switch name="sm" size="sm" isChecked />
-  <Switch name="md" size="md" isChecked />
-  <Switch name="lg" size="lg" isChecked />
-  <Switch name="xl" size="xl" isChecked />
-</Vertical>;
-```
-
-### **Shadow**
-
-“**_shadow_**” adds a shadow effect to the toggle.
-
-```tsx
-<Switch id="checkbox" name="shadow" shadow={{ boxShadow: 'rgb(249, 115, 22) 0px 4px 14px 0px' }} isChecked />
-```
-
-### **Child**
-
-“**_activeChild_**” and “**_inActiveChild_**” add a child to the toggle for each state. It includes the "activeChild" when it is active and the "inActiveChild" when it is not.
-
-```tsx
-import { Text } from '../../Text/Text';
-
-<Switch
-  activeChild={
-    <Text color="white" size="sm">
-      On
-    </Text>
-  }
-  inActiveChild={
-    <Text color="white" size="xs">
-      Off
-    </Text>
-  }
-/>;
-```
-
-### **ColorScheme**
-
-“**_colorScheme_**” modifies the toggle's background color.
-
-```tsx
-<Switch name="name" colorScheme="theme.primary" isChecked />
-```
-
-## **Types**
-
-```tsx static
-type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-```
-
-```tsx static
-type SwitchStyles = {
-  slider?: CSSProperties;
-  circle?: CSSProperties;
-};
-```
-
-## **Default Values**
-
-```tsx static
-const KnobSizes: Record<Size, CSSProperties> = {
-  xs: { height: 6, width: 6 },
-  sm: { height: 9, width: 9 },
-  md: { height: 12, width: 12 },
-  lg: { height: 15, width: 15 },
-  xl: { height: 18, width: 18 },
-};
-```
-
-```tsx static
-const SliderPadding: Record<Size, string> = {
-  xs: '0 2px',
-  sm: '0 3px',
-  md: '0 5px',
-  lg: '0 6px',
-  xl: '0 8px',
-};
-```
-
-```tsx static
-const SliderSizes: Record<Size, CSSProperties> = {
-  xs: {
-    height: 16,
-    width: 28,
-  },
-  sm: {
-    height: 20,
-    width: 36,
-  },
-  md: {
-    height: 24,
-    width: 44,
-  },
-  lg: {
-    height: 28,
-    width: 52,
-  },
-  xl: {
-    height: 32,
-    width: 60,
-  },
-};
-```

package/src/components/Form/Switch/Switch.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { SwitchProps } from './Switch/Switch.props';
-import { useSwitchState } from './Switch/Switch.state';
-import SwitchView from './Switch/Switch.view';
-
-const SwitchComponent: React.FC<SwitchProps> = (props) => {
-  const switchStates = useSwitchState(props);
-  return <SwitchView {...switchStates} {...props} />;
-};
-
-export const Switch = SwitchComponent;

package/src/components/Form/Switch/examples/ChildSwitch.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Switch } from 'src/components';
-import { Text } from 'src/components';
-
-export const ChildSwitch = () => (
-  <Switch
-    id="child"
-    name="child"
-    activeChild={
-      <Text color="white" size="xs">
-        On
-      </Text>
-    }
-    inActiveChild={
-      <Text color="white" size="xs">
-        Off
-      </Text>
-    }
-  />
-);

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

@@ -1,5 +0,0 @@
-import React from 'react';
-
-import { Switch } from '../Switch';
-
-export const ColorSwitch = () => <Switch name="name" colorScheme="theme.primary" isChecked />;

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

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

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

@@ -1,7 +0,0 @@
-import React from 'react';
-
-import { Switch } from '../Switch';
-
-export const DisabledSwitch = () => {
-  return <Switch name="disabled" isDisabled />;
-};

package/src/components/Form/Switch/examples/FormSwitch.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Button } from 'src/components';
-import { Vertical } from 'src/components/Layout/Vertical/examples';
-
-import { Label } from '../../Label/Label';
-import { Switch } from '../Switch';
-
-export const FormSwitch = () => {
-  const handleSubmit = (event: any) => {
-    event.preventDefault();
-    alert(event.target.elements.toggleFormik.checked);
-  };
-  return (
-    <form onSubmit={handleSubmit}>
-      <Vertical gap={10}>
-        <Label> Without Formik</Label>
-        <Switch id="toggleFormik" name="toggleFormik" />
-        <Button type="submit">Submit</Button>
-      </Vertical>
-    </form>
-  );
-};

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

@@ -1,30 +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 { Label } from '../../Label/Label';
-import { Switch } from '../Switch';
-
-export const FormikSwitch = () => {
-  const initialValues = {
-    toggle: false,
-  };
-
-  const onSubmit = (values: any) => {
-    alert(values.toggle);
-  };
-  return (
-    <Formik initialValues={initialValues} onSubmit={onSubmit}>
-      {({ values, handleChange }) => (
-        <Form>
-          <Vertical gap={10}>
-            <Label>Formik</Label>
-            <Field id="toggle" name="toggle" as={Switch} isChecked={values.toggle} onChange={handleChange} />
-            <Button type="submit">Submit</Button>
-          </Vertical>
-        </Form>
-      )}
-    </Formik>
-  );
-};

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

@@ -1,7 +0,0 @@
-import React from 'react';
-
-import { Switch } from '../Switch';
-
-export const ReadOnlySwitch = () => {
-  return <Switch name="disabled" value="Sarah Jane" isChecked isReadOnly />;
-};

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

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Switch } from 'src/components';
-
-export const ShadowSwitch = () => (
-  <Switch
-    id="shadowCheckbox"
-    name="shadowCheckbox"
-    shadow={{ boxShadow: 'rgb(249, 115, 22) 0px 4px 14px 0px' }}
-    isChecked
-  />
-);

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

@@ -1,21 +0,0 @@
-import React from 'react';
-import { Vertical } from 'src/components/Layout/Vertical/examples';
-
-import { Switch } from '../Switch';
-
-export const SizeSwitch = () => {
-  return (
-    <Vertical gap={10}>
-      <Switch name="xs" size="xs" isChecked />
-      <Switch name="sm" size="sm" isChecked />
-      <Switch name="md" size="md" isChecked />
-      <Switch name="lg" size="lg" isChecked />
-      <Switch name="xl" size="xl" isChecked />
-      <Switch name="2xl" size="2xl" isChecked />
-      <Switch name="3xl" size="3xl" isChecked />
-      <Switch name="4xl" size="4xl" isChecked />
-      <Switch name="5xl" size="5xl" isChecked />
-      <Switch name="6xl" size="6xl" isChecked />
-    </Vertical>
-  );
-};

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

@@ -1,32 +0,0 @@
-import React from 'react';
-import { Button } from 'src/components';
-import { Horizontal } from 'src/components';
-
-import { Switch } from '../Switch';
-
-export const StyledSwitch = () => {
-  const handleSubmit = (event: any) => {
-    event.preventDefault();
-    const formData = new FormData(event.target);
-    alert(`Hello, ${formData.get('surname')}`);
-  };
-  return (
-    <form onSubmit={handleSubmit}>
-      <Horizontal gap={10} alignItems="center" wrap="nowrap">
-        <Switch
-          name="surname"
-          label="Surname"
-          variant="unStyled"
-          shadow={{ boxShadow: 'rgba(0, 0, 0, 0.20) 0px 3px 8px' }}
-          styles={{
-            slider: { borderRadius: 8, borderColor: 'theme.primary', borderStyle: 'solid', borderWidth: 1 },
-            circle: { backgroundColor: 'theme.primary' },
-          }}
-        />
-        <Button type="submit" height="40px" colorScheme="theme.primary" isAuto>
-          Submit
-        </Button>
-      </Horizontal>
-    </form>
-  );
-};