Merge branch 'new-feature-primefaces#4134' of https://github.com/user…

…kks/primereact into new-feature-primefaces#4134

components/doc/autocomplete/pt/ptdoc.js

@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import { AutoComplete } from '../../../lib/autocomplete/AutoComplete';
+import { DocSectionCode } from '../../common/docsectioncode';
+import { DocSectionText } from '../../common/docsectiontext';
+
+export function PTDoc(props) {
+    const [value, setValue] = useState('');
+    const [items, setItems] = useState([]);
+
+    const search = (event) => {
+        setItems([...Array(10).keys()].map((item) => event.query + '-' + item));
+    };
+
+    const code = {
+        basic: `
+<AutoComplete
+    value={value}
+    suggestions={items}
+    completeMethod={search}
+    onChange={(e) => setValue(e.value)}
+    pt={{
+        input: { root: { className: 'w-16rem' } },
+        item: ({ context }) => ({
+            className: context.selected ? 'bg-primary-300' : undefined
+        })
+    }}
+/>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { AutoComplete } from "primereact/autocomplete";
+
+export default function PTDemo() {
+    const [value, setValue] = useState('');
+    const [items, setItems] = useState([]);
+
+    const search = (event) => {
+        setItems([...Array(10).keys()].map(item => event.query + '-' + item));
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <AutoComplete
+                value={value}
+                suggestions={items}
+                completeMethod={search}
+                onChange={(e) => setValue(e.value)}
+                pt={{
+                    input: { root: { className: 'w-16rem' } },
+                    item: ({ context }) => ({
+                        className: context.selected ? 'bg-primary-300' : undefined
+                    })
+                }}
+            />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+
+export default function PTDemo() {
+    const [value, setValue] = useState<string>('');
+    const [items, setItems] = useState<string[]>([]);
+
+    const search = (event: AutoCompleteCompleteEvent) => {
+        setItems([...Array(10).keys()].map(item => event.query + '-' + item));
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <AutoComplete
+                value={value}
+                suggestions={items}
+                completeMethod={search}
+                onChange={(e) => setValue(e.value)}
+                pt={{
+                    input: { root: { className: 'w-16rem' } },
+                    item: ({ context }) => ({
+                        className: context.selected ? 'bg-primary-300' : undefined
+                    })
+                }}
+            />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}></DocSectionText>
+            <div className="card flex justify-content-center">
+                <AutoComplete
+                    value={value}
+                    suggestions={items}
+                    completeMethod={search}
+                    onChange={(e) => setValue(e.value)}
+                    pt={{
+                        input: { root: { className: 'w-16rem' } },
+                        item: ({ context }) => ({
+                            className: context.selected ? 'bg-primary-300' : undefined
+                        })
+                    }}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}

components/doc/autocomplete/pt/wireframe.js

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

components/doc/calendar/pt/ptdoc.js

@@ -0,0 +1,92 @@
+import { useState } from 'react';
+import { Calendar } from '../../../lib/calendar/Calendar';
+import { DocSectionCode } from '../../common/docsectioncode';
+import { DocSectionText } from '../../common/docsectiontext';
+
+export function PTDoc(props) {
+    const [date, setDate] = useState(null);
+
+    const code = {
+        basic: `
+<Calendar
+    value={date}
+    onChange={(e) => setDate(e.value)}
+    showIcon
+    pt={{
+        input: { className: 'w-16rem' },
+        dropdownButton: {
+            root: { className: 'bg-teal-500 border-teal-500' }
+        }
+    }}
+/>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+
+export default function PTDemo() {
+    const [date, setDate] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar
+                value={date}
+                onChange={(e) => setDate(e.value)}
+                showIcon
+                pt={{
+                    input: { className: 'w-16rem' },
+                    dropdownButton: {
+                        root: { className: 'bg-teal-500 border-teal-500' }
+                    }
+                }}
+            />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Calendar, CalendarChangeEvent } from 'primereact/calendar';
+
+export default function PTDemo() {
+    const [date, setDate] = useState<string | Date | Date[] | null>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar
+                value={date}
+                onChange={(e) => setDate(e.value)}
+                showIcon
+                pt={{
+                    input: { className: 'w-16rem' },
+                    dropdownButton: {
+                        root: { className: 'bg-teal-500 border-teal-500' }
+                    }
+                }}
+            />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}></DocSectionText>
+            <div className="card flex justify-content-center">
+                <Calendar
+                    value={date}
+                    onChange={(e) => setDate(e.value)}
+                    showIcon
+                    pt={{
+                        input: { className: 'w-16rem' },
+                        dropdownButton: {
+                            root: { className: 'bg-teal-500 border-teal-500' }
+                        }
+                    }}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}

components/doc/calendar/pt/wireframe.js

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