@app-studio/web 0.1.0

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

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

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

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

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

@@ -0,0 +1,78 @@
+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 : 'lightGrey'}
+        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

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

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

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

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

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

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

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

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

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

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

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

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

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