@app-studio/web 0.9.30 → 0.9.32

package/docs/components/Table.mdx

@@ -0,0 +1,409 @@
+# Table
+
+Renders a customizable data table with optional footer and caption.
+
+## Props
+
+| Prop      | Type          | Description                                                                                                                               | Default |
+| ---------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| columns          | array        | Array of column objects, each defining a title and field.                                                                                                     |         |
+| data             | array         | Array of data objects to be displayed in the table rows.                                                                                                    |         |
+| footer           | array         | Optional array of footer cells to add at the bottom of the table.                                                                                             |         |
+| caption          | ReactNode     | Optional table caption as a React node.                                                                                                   |         |
+| styles           | CSSProperties | Optional custom styles to apply to the table and its elements.                                                                                              |         |
+| className        | string        | Optional className for the table.                                                                                                         |         |
+
+### **Import**
+  ```tsx
+  import { Table } from '@app-studio/web';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+import {
+  TableContainer,
+  TableCaption,
+  TableHead,
+  TableRow,
+  TableHeadCell,
+  TableBody,
+  TableCell,
+} from '../Table/Table.view';
+
+export const DefaultDemo = () => {
+  interface DataRow {
+    invoice: string;
+    paymentStatus: string;
+    totalAmount: string;
+    paymentMethod: string;
+  }
+
+  const columns = [
+    { title: 'Invoice', field: 'invoice' },
+    { title: 'Payment Status', field: 'paymentStatus' },
+    { title: 'Total Amount', field: 'totalAmount' },
+    { title: 'Payment Method', field: 'paymentMethod' },
+  ];
+  const data: DataRow[] = [
+    {
+      invoice: 'INV001',
+      paymentStatus: 'Paid',
+      totalAmount: '$250.00',
+      paymentMethod: 'Credit Card',
+    },
+    {
+      invoice: 'INV002',
+      paymentStatus: 'Pending',
+      totalAmount: '$150.00',
+      paymentMethod: 'PayPal',
+    },
+    {
+      invoice: 'INV003',
+      paymentStatus: 'Unpaid',
+      totalAmount: '$350.00',
+      paymentMethod: 'Bank Transfer',
+    },
+    {
+      invoice: 'INV004',
+      paymentStatus: 'Paid',
+      totalAmount: '$450.00',
+      paymentMethod: 'Credit Card',
+    },
+    {
+      invoice: 'INV005',
+      paymentStatus: 'Paid',
+      totalAmount: '$550.00',
+      paymentMethod: 'PayPal',
+    },
+    {
+      invoice: 'INV006',
+      paymentStatus: 'Pending',
+      totalAmount: '$200.00',
+      paymentMethod: 'Bank Transfer',
+    },
+    {
+      invoice: 'INV007',
+      paymentStatus: 'Unpaid',
+      totalAmount: '$300.00',
+      paymentMethod: 'Credit Card',
+    },
+  ];
+  return (
+    <TableContainer>
+      <TableCaption>A list of your recent invoices.</TableCaption>
+      <TableHead>
+        <TableRow>
+          {columns.map((column) => (
+            <TableHeadCell key={column.field}>{column.title}</TableHeadCell>
+          ))}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {data.map((row, index) => (
+          <TableRow key={index}>
+            {columns.map((column, columnIndex) => (
+              <TableCell key={column.field} isFirstColumn={columnIndex === 0}>
+                {row[column.field as keyof DataRow]}
+              </TableCell>
+            ))}
+          </TableRow>
+        ))}
+      </TableBody>
+    </TableContainer>
+  );
+};
+
+```
+
+### **data**
+Array of data objects to be displayed in the table rows.
+
+```tsx
+import React from 'react';
+import { Table } from '../Table';
+
+export const DataDemo = () => {
+  const cols = [
+    { title: 'Invoice', field: 'invoice' },
+    { title: 'Payment Status', field: 'paymentStatus' },
+    { title: 'Total Amount', field: 'totalAmount' },
+    { title: 'Payment Method', field: 'paymentMethod' },
+  ];
+  const invoices = [
+    {
+      invoice: 'INV001',
+      paymentStatus: 'Paid',
+      totalAmount: '$250.00',
+      paymentMethod: 'Credit Card',
+    },
+    {
+      invoice: 'INV002',
+      paymentStatus: 'Pending',
+      totalAmount: '$150.00',
+      paymentMethod: 'PayPal',
+    },
+    {
+      invoice: 'INV003',
+      paymentStatus: 'Unpaid',
+      totalAmount: '$350.00',
+      paymentMethod: 'Bank Transfer',
+    },
+    {
+      invoice: 'INV004',
+      paymentStatus: 'Paid',
+      totalAmount: '$450.00',
+      paymentMethod: 'Credit Card',
+    },
+    {
+      invoice: 'INV005',
+      paymentStatus: 'Paid',
+      totalAmount: '$550.00',
+      paymentMethod: 'PayPal',
+    },
+    {
+      invoice: 'INV006',
+      paymentStatus: 'Pending',
+      totalAmount: '$200.00',
+      paymentMethod: 'Bank Transfer',
+    },
+    {
+      invoice: 'INV007',
+      paymentStatus: 'Unpaid',
+      totalAmount: '$300.00',
+      paymentMethod: 'Credit Card',
+    },
+  ];
+  return <Table.Template columns={cols} data={invoices} />;
+};
+
+```
+
+### **footer**
+Optional array of footer cells to add at the bottom of the table.
+
+```tsx
+import React from 'react';
+import { Table } from '../Table';
+
+export const FooterDemo = () => {
+  const cols = [
+    { title: 'Invoice', field: 'invoice' },
+    { title: 'Payment Status', field: 'paymentStatus' },
+    { title: 'Total Amount', field: 'totalAmount' },
+    { title: 'Payment Method', field: 'paymentMethod' },
+  ];
+  const invoices = [
+    {
+      invoice: 'INV001',
+      paymentStatus: 'Paid',
+      totalAmount: '$250.00',
+      paymentMethod: 'Credit Card',
+    },
+    {
+      invoice: 'INV002',
+      paymentStatus: 'Pending',
+      totalAmount: '$150.00',
+      paymentMethod: 'PayPal',
+    },
+    {
+      invoice: 'INV003',
+      paymentStatus: 'Unpaid',
+      totalAmount: '$350.00',
+      paymentMethod: 'Bank Transfer',
+    },
+    {
+      invoice: 'INV004',
+      paymentStatus: 'Paid',
+      totalAmount: '$450.00',
+      paymentMethod: 'Credit Card',
+    },
+    {
+      invoice: 'INV005',
+      paymentStatus: 'Paid',
+      totalAmount: '$550.00',
+      paymentMethod: 'PayPal',
+    },
+    {
+      invoice: 'INV006',
+      paymentStatus: 'Pending',
+      totalAmount: '$200.00',
+      paymentMethod: 'Bank Transfer',
+    },
+    {
+      invoice: 'INV007',
+      paymentStatus: 'Unpaid',
+      totalAmount: '$300.00',
+      paymentMethod: 'Credit Card',
+    },
+  ];
+  return (
+    <Table
+      views={{
+        tfoot: {
+          borderTop: '1px solid gray',
+          borderBottom: '1px solid gray',
+        },
+      }}
+    >
+      <Table.Template
+        columns={cols}
+        data={invoices}
+        footer={[
+          {
+            value: 'Total Amount',
+            props: { colspan: 3, style: { fontWeight: 'bold' } },
+          },
+          { value: '$2,500.00' },
+        ]}
+      />
+    </Table>
+  );
+};
+
+```
+
+### **caption**
+Optional table caption as a React node.
+
+```tsx
+import React from 'react';
+import { Table } from '../Table';
+
+export const CaptionDemo = () => {
+  const cols = [
+    { title: 'Invoice', field: 'invoice' },
+    { title: 'Payment Status', field: 'paymentStatus' },
+    { title: 'Total Amount', field: 'totalAmount' },
+    { title: 'Payment Method', field: 'paymentMethod' },
+  ];
+  const invoices = [
+    {
+      invoice: 'INV001',
+      paymentStatus: 'Paid',
+      totalAmount: '$250.00',
+      paymentMethod: 'Credit Card',
+    },
+    {
+      invoice: 'INV002',
+      paymentStatus: 'Pending',
+      totalAmount: '$150.00',
+      paymentMethod: 'PayPal',
+    },
+    {
+      invoice: 'INV003',
+      paymentStatus: 'Unpaid',
+      totalAmount: '$350.00',
+      paymentMethod: 'Bank Transfer',
+    },
+    {
+      invoice: 'INV004',
+      paymentStatus: 'Paid',
+      totalAmount: '$450.00',
+      paymentMethod: 'Credit Card',
+    },
+    {
+      invoice: 'INV005',
+      paymentStatus: 'Paid',
+      totalAmount: '$550.00',
+      paymentMethod: 'PayPal',
+    },
+    {
+      invoice: 'INV006',
+      paymentStatus: 'Pending',
+      totalAmount: '$200.00',
+      paymentMethod: 'Bank Transfer',
+    },
+    {
+      invoice: 'INV007',
+      paymentStatus: 'Unpaid',
+      totalAmount: '$300.00',
+      paymentMethod: 'Credit Card',
+    },
+  ];
+  return (
+    <Table.Template
+      caption="A list of your recent invoices."
+      columns={cols}
+      data={invoices}
+    />
+  );
+};
+
+```
+
+### **styles**
+Optional custom styles to apply to the table and its elements.
+
+```tsx
+import React from 'react';
+import { Table } from '../Table';
+
+export const StylesDemo = () => {
+  const cols = [
+    { title: 'Invoice', field: 'invoice' },
+    { title: 'Payment Status', field: 'paymentStatus' },
+    { title: 'Total Amount', field: 'totalAmount' },
+    { title: 'Payment Method', field: 'paymentMethod' },
+  ];
+  const invoices = [
+    {
+      invoice: 'INV001',
+      paymentStatus: 'Paid',
+      totalAmount: '$250.00',
+      paymentMethod: 'Credit Card',
+    },
+    {
+      invoice: 'INV002',
+      paymentStatus: 'Pending',
+      totalAmount: '$150.00',
+      paymentMethod: 'PayPal',
+    },
+    {
+      invoice: 'INV003',
+      paymentStatus: 'Unpaid',
+      totalAmount: '$350.00',
+      paymentMethod: 'Bank Transfer',
+    },
+    {
+      invoice: 'INV004',
+      paymentStatus: 'Paid',
+      totalAmount: '$450.00',
+      paymentMethod: 'Credit Card',
+    },
+    {
+      invoice: 'INV005',
+      paymentStatus: 'Paid',
+      totalAmount: '$550.00',
+      paymentMethod: 'PayPal',
+    },
+    {
+      invoice: 'INV006',
+      paymentStatus: 'Pending',
+      totalAmount: '$200.00',
+      paymentMethod: 'Bank Transfer',
+    },
+    {
+      invoice: 'INV007',
+      paymentStatus: 'Unpaid',
+      totalAmount: '$300.00',
+      paymentMethod: 'Credit Card',
+    },
+  ];
+  return (
+    <Table
+      views={{
+        table: {
+          boxShadow:
+            ' 0 4px 6px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.1)',
+
+          borderRadius: '1em',
+        },
+      }}
+    >
+      <Table.Template columns={cols} data={invoices} />
+    </Table>
+  );
+};
+
+```

package/docs/components/Tabs.mdx

@@ -0,0 +1,215 @@
+# Tabs
+
+Provides an interactive tab interface for content organization
+
+## Props
+
+| Prop      | Type          | Description                                                                                                                               | Default |
+| ---------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| tabs             | {title: string; value: string; content: ReactNode;}[] | An array of tab objects, each defining a title, value, and content.                                                                                                     |         |
+| styles           | TabsStyles    | Allows for optional styling to be applied to the tabs via a TabsStyles object.                                                                                              |         |
+| className        | string        | Optional className for the tabs.                                                                                                          |         |
+
+### **Import**
+  ```tsx
+  import { Tabs } from '@app-studio/web';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Tabs, View, Text } from '../..';
+
+export const Default = () => (
+  <Tabs
+    tabs={[
+      {
+        title: 'Product',
+        value: 'product',
+        content: (
+          <View
+            backgroundColor={'purple'}
+            borderRadius={10}
+            padding="20px 20px 0"
+          >
+            <Text heading="h5" color="white">
+              Product Tab
+            </Text>
+            <DummyContent />
+          </View>
+        ),
+      },
+      {
+        title: 'Services',
+        value: 'services',
+        content: (
+          <View
+            backgroundColor={'purple'}
+            borderRadius={10}
+            padding="20px 20px 0"
+          >
+            <Text heading="h5" color="white">
+              Services tab
+            </Text>
+            <DummyContent />
+          </View>
+        ),
+      },
+      {
+        title: 'Playground',
+        value: 'playground',
+        content: (
+          <View
+            backgroundColor={'purple'}
+            borderRadius={10}
+            padding="20px 20px 0"
+          >
+            <Text heading="h5" color="white">
+              Playground tab
+            </Text>
+            <DummyContent />
+          </View>
+        ),
+      },
+      {
+        title: 'Content',
+        value: 'content',
+        content: (
+          <View
+            backgroundColor={'purple'}
+            borderRadius={10}
+            padding="20px 20px 0"
+          >
+            <Text heading="h5" color="white">
+              Content tab
+            </Text>
+            <DummyContent />
+          </View>
+        ),
+      },
+      {
+        title: 'Random',
+        value: 'random',
+        content: (
+          <View
+            backgroundColor={'purple'}
+            borderRadius={10}
+            padding="20px 20px 0"
+          >
+            <Text heading="h5" color="white">
+              Random tab
+            </Text>
+            <DummyContent />
+          </View>
+        ),
+      },
+    ]}
+  />
+);
+
+const DummyContent = () => {
+  return (
+    <View
+      marginTop="20px"
+      borderRadius="8px"
+      height="300px"
+      backgroundColor={'black'}
+    ></View>
+  );
+};
+
+```
+
+### **styles**
+Allows for optional styling to be applied to the tabs via a TabsStyles object.
+
+```tsx
+import React from 'react';
+import { Text } from '../../Text/Text';
+import { Tabs } from '../../Tabs/Tabs';
+
+export const StylesTabs = () => {
+  const tabs = [
+    {
+      title: 'Product',
+      value: 'product',
+      content: (
+        <Text heading="h5" color="white">
+          Product Tab
+        </Text>
+      ),
+    },
+    {
+      title: 'Services',
+      value: 'services',
+      content: (
+        <Text heading="h5" color="white">
+          Services tab
+        </Text>
+      ),
+    },
+    {
+      title: 'Playground',
+      value: 'playground',
+      content: (
+        <Text heading="h5" color="white">
+          Playground tab
+        </Text>
+      ),
+    },
+    {
+      title: 'Content',
+      value: 'content',
+      content: (
+        <Text heading="h5" color="white">
+          Content tab
+        </Text>
+      ),
+    },
+    {
+      title: 'Random',
+      value: 'random',
+      content: (
+        <Text heading="h5" color="white">
+          Random tab
+        </Text>
+      ),
+    },
+  ];
+  return (
+    <Tabs
+      tabs={tabs}
+      views={{
+        container: { backgroundColor: 'black', borderRadius: '20px' },
+        headerTabs: {
+          backgroundColor: 'purple',
+          width: '100%',
+          borderRadius: '20px 20px 0 0',
+          padding: '10px 0',
+        },
+        tab: {
+          shape: 'rounded',
+        },
+        title: {
+          color: 'color.white',
+        },
+        content: {
+          height: '300px',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+        },
+        activeTab: {
+          variant: 'ghost',
+        },
+        activeText: {
+          weight: 'bold',
+          size: 'lg',
+        },
+      }}
+    />
+  );
+};
+
+```