@app-studio/web 0.9.30 → 0.9.32

package/docs/components/Sidebar.mdx

@@ -0,0 +1,147 @@
+# Sidebar
+
+A composable, themeable and customizable sidebar component for navigation and content organization.
+
+### **Import**
+  ```tsx
+  import { Sidebar } from '@app-studio/web';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Sidebar } from '@app-studio/web';
+import { Text } from '@app-studio/web';
+import { Vertical } from '@app-studio/web';
+import { HomeIcon, UserIcon, SettingsIcon } from '@app-studio/web';
+
+export const DefaultSidebar = () => {
+  return (
+    <Sidebar defaultExpanded={true}>
+      <Sidebar.Header>
+        <Text fontWeight="bold" size="lg">App Name</Text>
+      </Sidebar.Header>
+      <Sidebar.Content>
+        <Vertical gap={8}>
+          <NavItem icon={<HomeIcon widthHeight={20} />} label="Home" isActive />
+          <NavItem icon={<UserIcon widthHeight={20} />} label="Profile" />
+          <NavItem icon={<SettingsIcon widthHeight={20} />} label="Settings" />
+        </Vertical>
+      </Sidebar.Content>
+      <Sidebar.Footer>
+        <Text size="sm" color="color.gray.500">© 2023 App Studio</Text>
+      </Sidebar.Footer>
+    </Sidebar>
+  );
+};
+
+const NavItem = ({ icon, label, isActive = false }) => (
+  <Horizontal
+    alignItems="center"
+    gap={12}
+    padding="8px 12px"
+    borderRadius="4px"
+    backgroundColor={isActive ? 'color.blue.50' : 'transparent'}
+    color={isActive ? 'color.blue.600' : 'color.gray.700'}
+    fontWeight={isActive ? 'bold' : 'normal'}
+    cursor="pointer"
+    _hover={{ backgroundColor: isActive ? 'color.blue.50' : 'color.gray.100' }}
+  >
+    {icon}
+    <Text>{label}</Text>
+  </Horizontal>
+);
+```
+
+### **Variants**
+The Sidebar component supports different visual variants:
+
+```tsx
+<Sidebar variant="default" />
+<Sidebar variant="filled" />
+<Sidebar variant="outline" />
+```
+
+### **Positions**
+The Sidebar component can be positioned on either side:
+
+```tsx
+<Sidebar position="left" />
+<Sidebar position="right" />
+```
+
+### **Sizes**
+The Sidebar component supports different sizes:
+
+```tsx
+<Sidebar size="sm" />
+<Sidebar size="md" />
+<Sidebar size="lg" />
+```
+
+### **Controlled Expansion**
+The Sidebar component can be controlled externally:
+
+```tsx
+const [isExpanded, setIsExpanded] = useState(true);
+
+<Button onClick={() => setIsExpanded(!isExpanded)}>
+  {isExpanded ? 'Collapse' : 'Expand'} Sidebar
+</Button>
+
+<Sidebar 
+  expanded={isExpanded} 
+  onExpandedChange={setIsExpanded}
+>
+  {/* Sidebar content */}
+</Sidebar>
+```
+
+### **Customization**
+The Sidebar component can be customized with the views prop:
+
+```tsx
+<Sidebar
+  views={{
+    container: {
+      backgroundColor: 'color.blue.800',
+      color: 'color.white',
+    },
+    header: {
+      borderBottomColor: 'color.blue.700',
+      backgroundColor: 'color.blue.900',
+    },
+    content: {
+      padding: '20px',
+    },
+    footer: {
+      borderTopColor: 'color.blue.700',
+      backgroundColor: 'color.blue.900',
+    },
+    toggleButton: {
+      backgroundColor: 'color.blue.700',
+      _hover: { backgroundColor: 'color.blue.600' },
+    },
+  }}
+>
+  {/* Sidebar content */}
+</Sidebar>
+```
+
+### **Responsive Behavior**
+The Sidebar component can adapt to different screen sizes:
+
+```tsx
+<Sidebar
+  breakpoint={768}
+  breakpointBehavior="overlay"
+  hasBackdrop={true}
+>
+  {/* Sidebar content */}
+</Sidebar>
+```
+
+Available breakpoint behaviors:
+- `collapse`: Automatically collapses the sidebar below the breakpoint
+- `overlay`: Converts the sidebar to an overlay below the breakpoint
+- `hide`: Hides the sidebar completely below the breakpoint

package/docs/components/Slider.mdx

@@ -0,0 +1,232 @@
+# Slider
+
+A component that allows users to select a value from a range by moving a handle.
+
+### **Import**
+  ```tsx
+  import { Slider } from '@app-studio/web';
+  ```
+
+### **Default**
+```tsx
+import React, { useState } from 'react';
+import { Slider } from '../Slider';
+
+export const DefaultSlider = () => {
+  const [value, setValue] = useState(50);
+
+  const handleChange = (newValue: number) => {
+    setValue(newValue);
+  };
+
+  return (
+    <Slider
+      label="Default Slider"
+      value={value}
+      onChange={handleChange}
+      showValue
+      helperText="Drag the slider to change the value"
+    />
+  );
+};
+```
+
+### **Range**
+Customize the min, max, and step values.
+
+```tsx
+import React, { useState } from 'react';
+import { Slider } from '../Slider';
+
+export const RangeSlider = () => {
+  const [value, setValue] = useState(25);
+
+  return (
+    <Slider
+      label="Custom Range"
+      value={value}
+      onChange={setValue}
+      min={0}
+      max={200}
+      step={5}
+      showValue
+      helperText="Range from 0 to 200 with steps of 5"
+    />
+  );
+};
+```
+
+### **Step Values**
+Use specific step values instead of a continuous range.
+
+```tsx
+import React, { useState } from 'react';
+import { Slider } from '../Slider';
+
+export const StepValuesSlider = () => {
+  const [value, setValue] = useState(40);
+  const stepValues = [0, 20, 40, 60, 80, 100];
+
+  return (
+    <Slider
+      label="Step Values Slider"
+      value={value}
+      onChange={setValue}
+      min={0}
+      max={100}
+      stepValues={stepValues}
+      showValue
+      helperText="This slider only allows specific values"
+    />
+  );
+};
+```
+
+### **Orientation**
+Change the orientation of the slider.
+
+```tsx
+import React, { useState } from 'react';
+import { Slider } from '../Slider';
+import { View } from 'app-studio';
+
+export const VerticalSlider = () => {
+  const [value, setValue] = useState(50);
+
+  return (
+    <View height={250}>
+      <Slider
+        orientation="vertical"
+        value={value}
+        onChange={setValue}
+        min={0}
+        max={100}
+        step={1}
+        showTooltip
+        ariaLabel="Vertical slider"
+      />
+    </View>
+  );
+};
+```
+
+### **Tooltip**
+Show a tooltip when dragging the slider.
+
+```tsx
+import React, { useState } from 'react';
+import { Slider } from '../Slider';
+
+export const TooltipSlider = () => {
+  const [value, setValue] = useState(50);
+
+  return (
+    <Slider
+      label="Slider with Tooltip"
+      value={value}
+      onChange={setValue}
+      showTooltip
+      helperText="Drag to see the tooltip"
+    />
+  );
+};
+```
+
+### **Disabled**
+Disable the slider to prevent interaction.
+
+```tsx
+import React from 'react';
+import { Slider } from '../Slider';
+
+export const DisabledSlider = () => {
+  return (
+    <Slider
+      label="Disabled Slider"
+      value={30}
+      isDisabled
+      helperText="This slider cannot be interacted with"
+    />
+  );
+};
+```
+
+### **Custom Styling**
+Customize the appearance of the slider.
+
+```tsx
+import React, { useState } from 'react';
+import { Slider } from '../Slider';
+
+export const CustomStyledSlider = () => {
+  const [value, setValue] = useState(60);
+
+  return (
+    <Slider
+      label="Custom Styled Slider"
+      value={value}
+      onChange={setValue}
+      showValue
+      colorScheme="theme.secondary"
+      views={{
+        track: {
+          backgroundColor: 'color.gray.200',
+          height: 8,
+          borderRadius: 4,
+        },
+        progress: {
+          backgroundColor: 'color.blue.500',
+        },
+        thumb: {
+          backgroundColor: 'color.white',
+          border: '2px solid color.blue.500',
+          width: 20,
+          height: 20,
+        },
+        valueLabel: {
+          color: 'color.blue.500',
+          fontWeight: 'bold',
+        },
+      }}
+    />
+  );
+};
+```
+
+### **Formik Integration**
+Use the slider with Formik for form state management.
+
+```tsx
+import React from 'react';
+import { Formik, Form } from 'formik';
+import { FormikSlider } from '../../Formik/Formik.Slider';
+import { Button } from '../../Button/Button';
+
+export const FormikSliderExample = () => {
+  return (
+    <Formik
+      initialValues={{ slider: 50 }}
+      onSubmit={(values) => {
+        alert(JSON.stringify(values, null, 2));
+      }}
+    >
+      {({ handleSubmit }) => (
+        <Form>
+          <FormikSlider
+            name="slider"
+            label="Formik Slider"
+            min={0}
+            max={100}
+            step={1}
+            showValue
+            helperText="This slider is connected to Formik"
+          />
+          <Button type="submit" onClick={handleSubmit} marginTop={16}>
+            Submit
+          </Button>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+```

package/docs/components/Switch.mdx

@@ -0,0 +1,62 @@
+# Switch
+
+A toggle switch for user interactions like turning settings on or off.
+
+## Props
+
+| Prop          | Type          | Description                                                                                                                               | Default |
+| ---------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| name             | string        | Name of the switch.                                                                                                                        |         |
+| id               | string        | Id of the switch.                                                                                                                          |         |
+| colorScheme      | string        | Defines the color theme for the switch component.                                                                                             |         |
+| shadow           | Shadow        | Defines the shadow appearance of the switch using predefined Shadow or Elevation, or a custom CSSProperties object.                        |         |
+| styles           | CSSProperties | Optional custom styles for the switch component.                                                                                              |         |
+| className        | string        | Optional className for the switch component.                                                                                                |         |
+| isChecked        | boolean       | Defines the initial toggle state.                                                                                                          | false   |
+| isDisabled       | boolean       | Sets the toggle component as disabled or not.                                                                                              | false   |
+
+### **Import**
+  ```tsx
+  import { Switch } from '@app-studio/web';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Switch } from '../../../Form/Switch/Switch';
+
+export const DefaultSwitch = () => <Switch id="check" name="checkbox" />;
+
+```
+
+### **colorScheme**
+Defines the color theme for the switch component.
+
+```tsx
+import React from 'react';
+
+import { Switch } from '../Switch';
+
+export const ColorSwitch = () => (
+  <Switch name="name" colorScheme="theme.primary" isChecked />
+);
+
+```
+
+### **shadow**
+Defines the shadow appearance of the switch using predefined Shadow or Elevation, or a custom CSSProperties object.
+
+```tsx
+import React from 'react';
+import { Switch } from '../../../Form/Switch/Switch';
+
+export const ShadowSwitch = () => (
+  <Switch
+    id="shadowCheckbox"
+    name="shadowCheckbox"
+    shadow={{ boxShadow: 'rgb(249, 115, 22) 0px 4px 14px 0px' }}
+    isChecked
+  />
+);
+
+```