@orcado/yoyui 0.0.1

package/components/doc/orderlist/filterdoc.js

@@ -0,0 +1,149 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { OrderList } from '@/components/lib/orderlist/OrderList';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+
+export function FilterDoc(props) {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return (
+            <div className="flex flex-wrap p-2 align-items-center gap-3">
+                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={`https://primefaces.org/cdn/primereact/images/product/${item.image}`} alt={item.name} />
+                <div className="flex-1 flex flex-column gap-2 xl:mr-8">
+                    <span className="font-bold">{item.name}</span>
+                    <div className="flex align-items-center gap-2">
+                        <i className="pi pi-tag text-sm" />
+                        <span>{item.category}</span>
+                    </div>
+                </div>
+                <span className="font-bold text-900">${item.price}</span>
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name" filterPlaceholder="Search products"></OrderList>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { OrderList } from 'primereact/orderlist';
+import { ProductService } from './service/ProductService';
+
+export default function FilterDemo() {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return (
+            <div className="flex flex-wrap p-2 align-items-center gap-3">
+                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${item.image}\`} alt={item.name} />
+                <div className="flex-1 flex flex-column gap-2 xl:mr-8">
+                    <span className="font-bold">{item.name}</span>
+                    <div className="flex align-items-center gap-2">
+                        <i className="pi pi-tag text-sm"></i>
+                        <span>{item.category}</span>
+                    </div>
+                </div>
+                <span className="font-bold text-900">\${item.price}</span>
+            </div>
+        );
+    };
+    
+    return (
+        <div className="card xl:flex xl:justify-content-center">
+            <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name" filterPlaceholder="Search products"></OrderList>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { OrderList } from 'primereact/orderlist';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: 'string',
+    rating: number;
+}
+
+export default function FilterDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data));
+    }, []);
+
+    const itemTemplate = (item: Product) => {
+        return (
+            <div className="flex flex-wrap p-2 align-items-center gap-3">
+                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${item.image}\`} alt={item.name} />
+                <div className="flex-1 flex flex-column gap-2 xl:mr-8">
+                    <span className="font-bold">{item.name}</span>
+                    <div className="flex align-items-center gap-2">
+                        <i className="pi pi-tag text-sm"></i>
+                        <span>{item.category}</span>
+                    </div>
+                </div>
+                <span className="font-bold text-900">\${item.price}</span>
+            </div>
+        );
+    };
+    
+    return (
+        <div className="card xl:flex xl:justify-content-center">
+            <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name" filterPlaceholder="Search products"></OrderList>
+        </div>
+    )
+}
+        `,
+        data: `
+/* ProductService */        
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Items are filtered using an input field by enabling the <i>filter</i> property. Filter value is checked against the property of an object configured with the <i>filterBy</i> property and the filtering match mode with{' '}
+                    <i>filterMatchMode</i> e.g. <i>contains</i>.
+                </p>
+            </DocSectionText>
+            <div className="card xl:flex xl:justify-content-center">
+                <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name" filterPlaceholder="Search products" />
+            </div>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}

package/components/doc/orderlist/importdoc.js

@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { OrderList } from 'primereact/orderlist';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}

package/components/doc/orderlist/pt/wireframe.js

@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/orderlist.jpg" alt="orderlist" />
+            </div>
+        </>
+    );
+};

package/components/doc/orderlist/styledoc.js

@@ -0,0 +1,51 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-orderlist</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-orderlist-list</td>
+                            <td>List container.</td>
+                        </tr>
+                        <tr>
+                            <td>p-orderlist-item</td>
+                            <td>An item in the list</td>
+                        </tr>
+                        <tr>
+                            <td>p-orderlist-filter-container</td>
+                            <td>Container of filter input.</td>
+                        </tr>
+                        <tr>
+                            <td>p-orderlist-filter</td>
+                            <td>Filter element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-orderlist-filter-icon</td>
+                            <td>Filter icon.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}

package/components/doc/orderlist/theming/styleddoc.js

@@ -0,0 +1,47 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-orderlist</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-orderlist-list</td>
+                            <td>List container.</td>
+                        </tr>
+                        <tr>
+                            <td>p-orderlist-item</td>
+                            <td>An item in the list</td>
+                        </tr>
+                        <tr>
+                            <td>p-orderlist-filter-container</td>
+                            <td>Container of filter input.</td>
+                        </tr>
+                        <tr>
+                            <td>p-orderlist-filter</td>
+                            <td>Filter element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-orderlist-filter-icon</td>
+                            <td>Filter icon.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}

package/components/doc/orderlist/theming/tailwinddoc.js

@@ -0,0 +1,151 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {    
+    orderlist: {
+        root: 'flex',
+        controls: 'flex flex-col justify-center p-5',
+        moveupbutton: {
+            root: ({ context }) => ({
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2 w-12', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                )
+            }),
+            label: () => ({ className: classNames('flex-initial w-0') })
+        },
+        movetopbutton: {
+            root: ({ context }) => ({
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                )
+            }),
+              label: () => ({ className: classNames('flex-initial w-0') })
+        },
+        movedownbutton: {
+            root: ({ context }) => ({
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                )
+            }),
+              label: () => ({ className: classNames('flex-initial w-0') })
+        },
+        movebottombutton: {
+            root: ({ context }) => ({
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                )
+            }),
+              label: () => ({ className: classNames('flex-initial w-0') })
+        },
+        container: 'flex-auto',
+        header: {
+            className: classNames(
+                'bg-slate-50 text-slate-700 border border-gray-300 p-5 font-bold border-b-0 rounded-t-md',
+                'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
+            )
+        },
+        list: {
+            className: classNames(
+                'list-none m-0 p-0 overflow-auto min-h-[12rem] max-h-[24rem]',
+                'border border-gray-300 bg-white text-gray-600 py-3 px-0 rounded-b-md outline-none',
+                'dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80' //Dark Mode
+            )
+        },
+        item: ({ context }) => ({
+            className: classNames('relative cursor-pointer overflow-hidden', 'py-3 px-5 m-0 border-none text-gray-600 dark:text-white/80', 'transition duration-200', {
+                'text-blue-700 bg-blue-500/20 dark:bg-blue-300/20': context.selected
+            })
+        })
+    },
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { OrderList } from 'primereact/orderlist';
+import { ProductService } from './service/ProductService';
+
+export default function UnstyledDemo() {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return (
+            <div className="flex flex-wrap p-2 items-center gap-3">
+                <img className="w-16 shadow-md shrink-0 rounded" src={\`https://primefaces.org/cdn/primereact/images/product/\${item.image}\`} alt={item.name} />
+                <div className="flex-1 flex flex-col gap-2 xl:mr-8">
+                    <span className="font-bold text-gray-700 dark:text-white/80">{item.name}</span>
+                    <div className="flex items-center gap-2">
+                        <i className="pi pi-tag text-sm text-gray-700 dark:text-white/80"></i>
+                        <span className="text-gray-700 dark:text-white/80">{item.category}</span>
+                    </div>
+                </div>
+                <span className="font-bold text-gray-700 dark:text-white/80 text-900">\${item.price}</span>
+            </div>
+        );
+    };
+    
+    return (
+        <div className="card xl:flex xl:justify-center">
+            <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products"></OrderList>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded service={['ProductService']} />
+            </DocSectionText>
+        </>
+    );
+}

package/components/doc/organizationchart/accessibilitydoc.js

@@ -0,0 +1,51 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Component currently uses a table based implementation and does not provide high level of screen reader support, a nested list implementation replacement is planned with aria roles and attributes aligned to a tree widget for high level
+                of reader support in the upcoming versions.
+            </p>
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus through the focusable elements within the chart.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Toggles the expanded state of a node.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Toggles the expanded state of a node.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>numpad enter</i>
+                            </td>
+                            <td>Toggles the expanded state of a node.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}

package/components/doc/organizationchart/basicdoc.js

@@ -0,0 +1,150 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { OrganizationChart } from '@/components/lib/organizationchart/OrganizationChart';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [data] = useState([
+        {
+            label: 'Argentina',
+            expanded: true,
+            children: [
+                {
+                    label: 'Argentina',
+                    expanded: true,
+                    children: [
+                        {
+                            label: 'Argentina'
+                        },
+                        {
+                            label: 'Croatia'
+                        }
+                    ]
+                },
+                {
+                    label: 'France',
+                    expanded: true,
+                    children: [
+                        {
+                            label: 'France'
+                        },
+                        {
+                            label: 'Morocco'
+                        }
+                    ]
+                }
+            ]
+        }
+    ]);
+
+    const code = {
+        basic: `
+<OrganizationChart value={data} />
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { OrganizationChart } from 'primereact/organizationchart';
+
+export default function BasicDoc() {
+    const [data] = useState([
+        {
+            label: 'Argentina',
+            expanded: true,
+            children: [
+                {
+                    label: 'Argentina',
+                    expanded: true,
+                    children: [
+                        {
+                            label: 'Argentina'
+                        },
+                        {
+                            label: 'Croatia'
+                        }
+                    ]
+                },
+                {
+                    label: 'France',
+                    expanded: true,
+                    children: [
+                        {
+                            label: 'France'
+                        },
+                        {
+                            label: 'Morocco'
+                        }
+                    ]
+                }
+            ]
+        }
+    ]);
+
+    return (
+        <div className="card overflow-x-auto">
+            <OrganizationChart value={data} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { OrganizationChart } from 'primereact/organizationchart';
+import { TreeNode } from 'primereact/treenode';
+
+export default function BasicDoc() {
+    const [data] = useState<TreeNode[]>([
+        {
+            label: 'Argentina',
+            expanded: true,
+            children: [
+                {
+                    label: 'Argentina',
+                    expanded: true,
+                    children: [
+                        {
+                            label: 'Argentina'
+                        },
+                        {
+                            label: 'Croatia'
+                        }
+                    ]
+                },
+                {
+                    label: 'France',
+                    expanded: true,
+                    children: [
+                        {
+                            label: 'France'
+                        },
+                        {
+                            label: 'Morocco'
+                        }
+                    ]
+                }
+            ]
+        }
+    ]);
+
+    return (
+        <div className="card overflow-x-auto">
+            <OrganizationChart value={data} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    OrganizationChart requires a collection of <i>TreeNode</i> instances as a <i>value</i>.
+                </p>
+            </DocSectionText>
+            <div className="card overflow-x-auto">
+                <OrganizationChart value={data} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}