@app-studio/web 0.9.31 → 0.9.32

package/docs/components/Accordion.mdx

@@ -0,0 +1,158 @@
+# Accordion
+
+A component that displays collapsible content panels for presenting information in a limited amount of space.
+
+### **Import**
+  ```tsx
+  import { Accordion } from '@app-studio/web';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Accordion } from '../Accordion';
+import { Text } from '../../Text/Text';
+
+export const DefaultAccordion = () => {
+  return (
+    <Accordion>
+      <Accordion.Item id="item-1">
+        <Accordion.Header>
+          <Text fontWeight="bold">What is React?</Text>
+        </Accordion.Header>
+        <Accordion.Content>
+          <Text>
+            React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.
+          </Text>
+        </Accordion.Content>
+      </Accordion.Item>
+      
+      <Accordion.Item id="item-2">
+        <Accordion.Header>
+          <Text fontWeight="bold">What are React Hooks?</Text>
+        </Accordion.Header>
+        <Accordion.Content>
+          <Text>
+            Hooks are functions that let you "hook into" React state and lifecycle features from function components.
+          </Text>
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion>
+  );
+};
+```
+
+### **Multiple**
+Allow multiple items to be expanded at once.
+
+```tsx
+import React from 'react';
+import { Accordion } from '../Accordion';
+import { Text } from '../../Text/Text';
+
+export const MultipleAccordion = () => {
+  return (
+    <Accordion allowMultiple defaultExpandedItems={['item-1']}>
+      <Accordion.Item id="item-1">
+        <Accordion.Header>
+          <Text fontWeight="bold">First Item (Initially Expanded)</Text>
+        </Accordion.Header>
+        <Accordion.Content>
+          <Text>
+            This item is initially expanded. You can expand multiple items at once in this accordion.
+          </Text>
+        </Accordion.Content>
+      </Accordion.Item>
+      
+      <Accordion.Item id="item-2">
+        <Accordion.Header>
+          <Text fontWeight="bold">Second Item</Text>
+        </Accordion.Header>
+        <Accordion.Content>
+          <Text>
+            This is the second item. Try expanding this while the first item is still open.
+          </Text>
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion>
+  );
+};
+```
+
+### **Variants**
+Different visual styles for the accordion.
+
+```tsx
+import React from 'react';
+import { Accordion } from '../Accordion';
+import { Text } from '../../Text/Text';
+
+export const AccordionVariants = () => {
+  return (
+    <>
+      <Accordion variant="outline">
+        <Accordion.Item id="outline-1">
+          <Accordion.Header>
+            <Text fontWeight="bold">Outline Variant</Text>
+          </Accordion.Header>
+          <Accordion.Content>
+            <Text>
+              This is the content for the outline variant accordion.
+            </Text>
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+      
+      <Accordion variant="filled">
+        <Accordion.Item id="filled-1">
+          <Accordion.Header>
+            <Text fontWeight="bold">Filled Variant</Text>
+          </Accordion.Header>
+          <Accordion.Content>
+            <Text>
+              This is the content for the filled variant accordion.
+            </Text>
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+    </>
+  );
+};
+```
+
+### **Disabled**
+Disable specific accordion items.
+
+```tsx
+import React from 'react';
+import { Accordion } from '../Accordion';
+import { Text } from '../../Text/Text';
+
+export const DisabledAccordion = () => {
+  return (
+    <Accordion>
+      <Accordion.Item id="regular-1">
+        <Accordion.Header>
+          <Text fontWeight="bold">Regular Item</Text>
+        </Accordion.Header>
+        <Accordion.Content>
+          <Text>
+            This is a regular accordion item that can be expanded and collapsed.
+          </Text>
+        </Accordion.Content>
+      </Accordion.Item>
+      
+      <Accordion.Item id="disabled-1" isDisabled>
+        <Accordion.Header>
+          <Text fontWeight="bold">Disabled Item</Text>
+        </Accordion.Header>
+        <Accordion.Content>
+          <Text>
+            This content won't be accessible because the item is disabled.
+          </Text>
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion>
+  );
+};
+```

package/docs/components/Alert.mdx

@@ -0,0 +1,123 @@
+# Alert
+
+Displays an alert with optional icon and customizable views.
+
+### **Import**
+  ```tsx
+  import { Alert } from '@app-studio/web';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Alert } from '../Alert';
+
+export const DefaultDemo = () => {
+  return (
+    <Alert
+      title="Heads up!"
+      description="You can add components to your app using the cli."
+    />
+  );
+};
+
+```
+
+### **icon**
+Optional icon property, expecting a React node element
+
+```tsx
+import React from 'react';
+import { EditIcon } from '../../Icon/Icon';
+import { Alert } from '../Alert';
+
+export const IconDemo = () => {
+  return (
+    <Alert
+      title="Heads up!"
+      description="You can add components to your app using the cli."
+      icon={<EditIcon size={24} color="black" />}
+    />
+  );
+};
+
+```
+
+### **variant**
+Optional variant property to determine the style of the alert
+
+```tsx
+import React from 'react';
+import { Horizontal } from 'app-studio';
+import { Alert } from '../Alert';
+import { Variant } from '../Alert/Alert.type';
+
+export const VariantDemo = () => (
+  <Horizontal gap={10}>
+    {['default', 'info', 'warning', 'success', 'error'].map((color, index) => (
+      <Alert
+        key={index}
+        variant={color as Variant}
+        title={'Heads Up!'}
+        description={'You can add components to your app using the cli.'}
+      />
+    ))}
+  </Horizontal>
+);
+
+```
+
+### **styles**
+Optional styles property to apply custom styles to the alert component
+
+```tsx
+import React from 'react';
+import { Alert } from '../Alert';
+
+export const StylesDemo = () => (
+  <Alert
+    title={'Heads Up!'}
+    description={'You can add components to your app using the cli.'}
+    views={{
+      container: { backgroundColor: 'black' },
+      title: { color: 'white' },
+      description: { color: 'white' },
+      icon: { color: 'white' },
+    }}
+  />
+);
+
+```
+
+### **Theme Mode Support**
+The Alert component supports both light and dark themes through the `themeMode` prop.
+
+```tsx
+import React from 'react';
+import { Alert } from '../Alert';
+import { Vertical } from 'app-studio';
+import { Text } from '../../Text/Text';
+
+export const DarkModeDemo = () => {
+  return (
+    <Vertical gap={24}>
+      <Text fontSize={20} fontWeight="bold">Light Mode Alerts</Text>
+      <Alert
+        themeMode="light"
+        variant="info"
+        title="Info Alert (Light)"
+        description="This is an info alert in light mode."
+      />
+
+      <Text fontSize={20} fontWeight="bold" marginTop={40}>Dark Mode Alerts</Text>
+      <Alert
+        themeMode="dark"
+        variant="info"
+        title="Info Alert (Dark)"
+        description="This is an info alert in dark mode."
+      />
+    </Vertical>
+  );
+};
+```
+

package/docs/components/AspectRatio.mdx

@@ -0,0 +1,55 @@
+# AspectRatio
+
+Maintains a set aspect ratio for child content
+
+### **Import**
+  ```tsx
+  import { AspectRatio } from '@app-studio/web';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Image } from 'app-studio';
+import { AspectRatio } from '../AspectRatio';
+
+export const DefaultDemo = () => {
+  return (
+    <AspectRatio>
+      <Image
+        alt="image"
+        objectFit="cover"
+        width="100%"
+        height="100%"
+        src="https://t3.ftcdn.net/jpg/02/82/15/88/360_F_282158853_VtXRiSiN5eCjPddHobErJewxJ65lYZGt.jpg"
+      />
+    </AspectRatio>
+  );
+};
+
+```
+
+### **ratio**
+specifying the aspect ratio
+
+```tsx
+import React from 'react';
+import { Image } from 'app-studio';
+import { AspectRatio } from '../AspectRatio';
+
+export const RatioDemo = () => {
+  return (
+    <AspectRatio ratio={4 / 3} width={300}>
+      <Image
+        alt="image"
+        objectFit="cover"
+        width="100%"
+        height="100%"
+        src="https://t3.ftcdn.net/jpg/02/82/15/88/360_F_282158853_VtXRiSiN5eCjPddHobErJewxJ65lYZGt.jpg"
+      />
+    </AspectRatio>
+  );
+};
+
+```
+

package/docs/components/Avatar.mdx

@@ -0,0 +1,85 @@
+# Avatar
+
+Displays a circular avatar with image fallback and custom styling options.
+
+### **Import**
+  ```tsx
+  import { Avatar } from '@app-studio/web';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Avatar } from '../Avatar';
+
+export const DefaultDemo = () => (
+  <Avatar src="https://t3.ftcdn.net/jpg/06/17/13/26/360_F_617132669_YptvM7fIuczaUbYYpMe3VTLimwZwzlWf.jpg" />
+);
+
+```
+
+### **size**
+Optional property to specify the size of the avatar, from predefined Size options.
+
+```tsx
+import React from 'react';
+import { Vertical } from 'app-studio';
+import { Avatar } from '../Avatar';
+import { Size } from '../Avatar/Avatar.type';
+
+export const SizeDemo = () => {
+  return (
+    <Vertical gap={10}>
+      {['xs', 'sm', 'md', 'lg', 'xl'].map((size, index) => (
+        <Avatar
+          key={index}
+          src="https://t3.ftcdn.net/jpg/06/17/13/26/360_F_617132669_YptvM7fIuczaUbYYpMe3VTLimwZwzlWf.jpg"
+          size={size as Size}
+        />
+      ))}
+    </Vertical>
+  );
+};
+
+```
+
+### **fallback**
+Optional string for an image URL to use if the primary 'src' fails to load.
+
+```tsx
+import React from 'react';
+import { Avatar } from '../Avatar';
+
+export const FallbackDemo = () => <Avatar src="" fallback="ML" />;
+
+```
+
+### **styles**
+Optional object to apply custom styles to the avatar component.
+
+```tsx
+import React from 'react';
+import { Avatar } from '../Avatar';
+
+export const StylesDemo = () => {
+  return (
+    <Avatar
+      src="https://t3.ftcdn.net/jpg/06/17/13/26/360_F_617132669_YptvM7fIuczaUbYYpMe3VTLimwZwzlWf.jpg"
+      views={{
+        container: {
+          boxShadow: 'none', // Add shadow effect
+        },
+        fallback: {
+          color: 'theme.secondary',
+        },
+        image: {
+          objectFit: 'fill',
+        },
+      }}
+      onClick={() => console.log('hello')}
+    />
+  );
+};
+
+```
+