@orbe-agro/client-core 5.3.67 → 5.3.69

package/lib/@ecme/assets/markdown/shared/CalendarViewDoc/Example.md

@@ -0,0 +1,84 @@
+```jsx
+import CalendarView from '@/components/shared/CalendarView'
+
+const Example = () => {
+    function getDate(dayString: string) {
+        const today = new Date()
+        const year = today.getFullYear().toString()
+        let month = (today.getMonth() + 1).toString()
+
+        if (month.length === 1) {
+            month = '0' + month
+        }
+
+        return dayString.replace('YEAR', year).replace('MONTH', month)
+    }
+
+    const eventsData = [
+        {
+            id: '0',
+            title: 'All Day Event',
+            start: getDate('YEAR-MONTH-01'),
+            eventColor: 'orange',
+        },
+        {
+            id: '1',
+            title: 'Long Event',
+            start: getDate('YEAR-MONTH-07'),
+            end: getDate('YEAR-MONTH-10'),
+            eventColor: 'red',
+        },
+        {
+            id: '2',
+            groupId: '999',
+            title: 'Repeating Event',
+            start: getDate('YEAR-MONTH-09T16:00:00+00:00'),
+            eventColor: 'blue',
+        },
+        {
+            id: '3',
+            groupId: '999',
+            title: 'Repeating Event',
+            start: getDate('YEAR-MONTH-16T16:00:00+00:00'),
+            eventColor: 'blue',
+        },
+        {
+            id: '4',
+            title: 'Birthday Party',
+            start: getDate('YEAR-MONTH-19T07:00:00+00:00'),
+            eventColor: 'purple',
+        },
+        {
+            id: '5',
+            title: 'Meeting',
+            start: getDate('YEAR-MONTH-18T14:30:00+00:00'),
+            eventColor: 'blue',
+        },
+        {
+            id: '6',
+            title: 'Dinner',
+            start: getDate('YEAR-MONTH-18T20:00:00+00:00'),
+            eventColor: 'emerald',
+        },
+    ]
+
+    return (
+        <CalendarView
+            editable
+            selectable
+            events={eventsData}
+            eventClick={(arg) => {
+                console.log('onEventClick', arg)
+            }}
+            select={(event) => {
+                console.log('onCellSelect', event)
+            }}
+            eventDrop={(arg) => {
+                console.log('onEventChange', arg)
+            }}
+        />
+    )
+}
+
+export default Example
+```

package/lib/@ecme/assets/markdown/shared/ChartDoc/Area.md

@@ -0,0 +1,42 @@
+```jsx
+import Chart from '@/components/shared/Chart'
+
+const Area = () => {
+    const visitorChartData = {
+        series: [
+            {
+                name: 'Session Duration',
+                data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10],
+            },
+            {
+                name: 'Page Views',
+                data: [35, 41, 62, 42, 13, 18, 29, 37, 36, 51, 32, 35],
+            },
+        ],
+        categories: [
+            '01 Jan',
+            '02 Jan',
+            '03 Jan',
+            '04 Jan',
+            '05 Jan',
+            '06 Jan',
+            '07 Jan',
+            '08 Jan',
+            '09 Jan',
+            '10 Jan',
+            '11 Jan',
+            '12 Jan',
+        ],
+    }
+    return (
+        <Chart
+            type="area"
+            series={visitorChartData.series}
+            xAxis={visitorChartData.categories}
+            height={400}
+        />
+    )
+}
+
+export default Area
+```

package/lib/@ecme/assets/markdown/shared/ChartDoc/Bar.md

@@ -0,0 +1,41 @@
+```jsx
+import Chart from '@/components/shared/Chart'
+
+const Bar = () => {
+    const uniqueVisitorsData = {
+        series: [
+            {
+                name: 'Session Duration',
+                data: [45, 52, 38, 24, 33, 26, 21],
+            },
+            {
+                name: 'Page Views',
+                data: [35, 41, 62, 42, 13, 18, 29],
+            },
+        ],
+        categories: [
+            '01 Jan',
+            '02 Jan',
+            '03 Jan',
+            '04 Jan',
+            '05 Jan',
+            '06 Jan',
+            '07 Jan',
+        ],
+    }
+
+    return (
+        <Chart
+            series={uniqueVisitorsData.series}
+            xAxis={uniqueVisitorsData.categories}
+            height={410}
+            type="bar"
+            customOptions={{
+                colors: ['#ef4444', '#10b981'],
+            }}
+        />
+    )
+}
+
+export default Bar
+```

package/lib/@ecme/assets/markdown/shared/ChartDoc/Donut.md

@@ -0,0 +1,24 @@
+```jsx
+import Chart from '@/components/shared/Chart'
+
+const Donut = () => {
+    const data = {
+        labels: ['Item A', 'Item B', 'Item C'],
+        values: [15032, 11246, 8273],
+        coinSymbol: ['A', 'B', 'C'],
+    }
+
+    return (
+        <Chart
+            donutTitle={`$${data.values.reduce((a, b) => a + b, 0)}`}
+            donutText="Assets"
+            series={data.values}
+            customOptions={{ labels: data.labels }}
+            type="donut"
+            height={230}
+        />
+    )
+}
+
+export default Donut
+```

package/lib/@ecme/assets/markdown/shared/ChartDoc/Line.md

@@ -0,0 +1,41 @@
+```jsx
+import Chart from '@/components/shared/Chart'
+
+const Line = () => {
+    const visitorChartData = {
+        series: [
+            {
+                name: 'Session Duration',
+                data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10],
+            },
+            {
+                name: 'Page Views',
+                data: [35, 41, 62, 42, 13, 18, 29, 37, 36, 51, 32, 35],
+            },
+        ],
+        categories: [
+            '01 Jan',
+            '02 Jan',
+            '03 Jan',
+            '04 Jan',
+            '05 Jan',
+            '06 Jan',
+            '07 Jan',
+            '08 Jan',
+            '09 Jan',
+            '10 Jan',
+            '11 Jan',
+            '12 Jan',
+        ],
+    }
+    return (
+        <Chart
+            series={visitorChartData.series}
+            xAxis={visitorChartData.categories}
+            height={400}
+        />
+    )
+}
+
+export default Line
+```

package/lib/@ecme/assets/markdown/shared/ChartDoc/Radar.md

@@ -0,0 +1,25 @@
+```jsx
+import Chart from '@/components/shared/Chart'
+
+const Radar = () => {
+    const chartData = {
+        series: [
+            {
+                name: 'Series 1',
+                data: [80, 50, 30, 40, 100, 20],
+            },
+        ],
+        categories: ['January', 'February', 'March', 'April', 'May', 'June'],
+    }
+    return (
+        <Chart
+            type="radar"
+            series={chartData.series}
+            xAxis={chartData.categories}
+            height={400}
+        />
+    )
+}
+
+export default Radar
+```

package/lib/@ecme/assets/markdown/shared/ConfirmDialogDoc/Example.md

@@ -0,0 +1,97 @@
+```jsx
+import { useState } from 'react'
+import ConfirmDialog from '@/components/shared/ConfirmDialog'
+import Radio from '@/components/ui/Radio'
+import Button from '@/components/ui/Button'
+
+type DialogTypeKey = 'Info' | 'Success' | 'Warning' | 'Danger'
+
+type DialogType = Record<
+    DialogTypeKey,
+    {
+        type: 'info' | 'success' | 'warning' | 'danger'
+        title: string
+        children: string
+        cancelText: string
+        confirmText: string
+    }
+>
+
+const dialogType: DialogType = {
+    Info: {
+        type: 'info',
+        title: 'Note',
+        children: 'Just some information for you!',
+        cancelText: 'Cancel',
+        confirmText: 'Okay',
+    },
+    Success: {
+        type: 'success',
+        title: 'Complete!',
+        children: 'Just some success message for you!',
+        cancelText: 'Cancel',
+        confirmText: 'All Good',
+    },
+    Warning: {
+        type: 'warning',
+        title: 'Warning',
+        children: 'Just some warning message for you!',
+        cancelText: 'Cancel',
+        confirmText: 'Understand',
+    },
+    Danger: {
+        type: 'danger',
+        title: 'Delete',
+        children: 'Are you sure you wan to delete?',
+        cancelText: 'Cancel',
+        confirmText: 'Delete',
+    },
+}
+
+const Example = () => {
+    const [selected, setSelected] = useState<DialogTypeKey>(
+        Object.keys(dialogType)[0] as DialogTypeKey
+    )
+    const [open, setOpen] = useState(false)
+
+    const handleClose = () => {
+        console.log('Close')
+        setOpen(false)
+    }
+
+    const handleConfirm = () => {
+        console.log('Confirm')
+        setOpen(false)
+    }
+
+    return (
+        <div className="flex flex-col gap-6">
+            <Radio.Group value={selected} onChange={(val) => setSelected(val)}>
+                {Object.keys(dialogType).map((value) => {
+                    return (
+                        <Radio key={value} value={value}>
+                            {value}
+                        </Radio>
+                    )
+                })}
+            </Radio.Group>
+            <div>
+                <Button onClick={() => setOpen(true)}>Trigger</Button>
+            </div>
+            <ConfirmDialog
+                isOpen={open}
+                type={dialogType[selected].type}
+                title={dialogType[selected].title}
+                onClose={handleClose}
+                onRequestClose={handleClose}
+                onCancel={handleClose}
+                onConfirm={handleConfirm}
+            >
+                <p>{dialogType[selected].children}</p>
+            </ConfirmDialog>
+        </div>
+    )
+}
+
+export default Example
+```

package/lib/@ecme/assets/markdown/shared/ContainerDoc/Example.md

@@ -0,0 +1,9 @@
+```jsx
+import Container from '@/components/shared/Container'
+
+const Example = () => {
+    return <Container>Content</Container>
+}
+
+export default Example
+```

package/lib/@ecme/assets/markdown/shared/CustomFormatInputDoc/Simple.md

@@ -0,0 +1,39 @@
+```jsx
+import { useState } from 'react'
+import FormCustomFormatInput from '@/components/shared/CustomFormatInput'
+
+const format = (numStr: string) => {
+    if (numStr === '') {
+        return ''
+    }
+    const num = parseFloat(numStr) // Parse the string into a number
+    return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        maximumFractionDigits: 0,
+    }).format(num)
+}
+
+const Simple = () => {
+    const [value, setValue] = useState(0)
+
+    const handleValueChange = (e: {
+        floatValue?: number
+        formattedValue: string
+        value: string
+    }) => {
+        console.log(e)
+        setValue(e.floatValue as number)
+    }
+
+    return (
+        <FormCustomFormatInput
+            value={value}
+            format={format}
+            onValueChange={handleValueChange}
+        />
+    )
+}
+
+export default Simple
+```

package/lib/@ecme/assets/markdown/shared/CustomFormatInputDoc/WithForm.md

@@ -0,0 +1,72 @@
+```jsx
+import Button from '@/components/ui/Button'
+import { Form, FormItem } from '@/components/ui/Form'
+import FormCustomFormatInput from '@/components/shared/CustomFormatInput'
+import { useForm, Controller } from 'react-hook-form'
+
+function limit(val: string, max: string) {
+    if (val.length === 1 && val[0] > max[0]) {
+        val = '0' + val
+    }
+
+    if (val.length === 2) {
+        if (Number(val) === 0) {
+            val = '01'
+        } else if (val > max) {
+            val = max
+        }
+    }
+
+    return val
+}
+
+function cardExpiryFormat(val: string) {
+    const month = limit(val.substring(0, 2), '12')
+    const date = limit(val.substring(2, 4), '31')
+
+    return month + (date.length ? '/' + date : '')
+}
+
+const WithForm = () => {
+
+    const {
+        handleSubmit,
+        formState: { errors },
+        control
+    } = useForm<{cardExpiry?: string}>();
+
+    const onSubmit = (value: {cardExpiry?: string}) => {
+        console.log(value)
+    }
+
+    return (
+        <Form className="mt-6" onSubmit={handleSubmit(onSubmit)}>
+            <FormItem
+                label="Expiration date"
+                invalid={Boolean(errors.cardExpiry)}
+                errorMessage={errors.cardExpiry?.message}
+            >
+                <Controller
+                    name="cardExpiry"
+                    control={control}
+                    render={({ field }) =>
+                        <FormCustomFormatInput
+                            placeholder="••/••"
+                            format={cardExpiryFormat}
+                            onValueChange={(e) => {
+                                field.onChange(e.value)
+                            }}
+                            value={field.value}
+                        />
+                    }
+                />
+            </FormItem>
+            <Button variant="solid" type="submit" block>
+                Submit
+            </Button>
+        </Form>
+    )
+}
+
+export default WithForm
+```

package/lib/@ecme/assets/markdown/shared/DataTableDoc/Basic.md

@@ -0,0 +1,112 @@
+```jsx
+import { useState, useEffect, useMemo } from 'react'
+import Button from '@/components/ui/Button'
+import DataTable from '@/components/shared/DataTable'
+import { apiGetCustomersList } from '@/services/CustomersService'
+import type { ColumnDef, OnSortParam } from '@/components/shared/DataTable'
+
+type Customer = {
+    id: string
+    name: string
+    email: string
+}
+
+const Basic = () => {
+    const [data, setData] = useState<Customer[]>([])
+    const [loading, setLoading] = useState(false)
+    const [tableData, setTableData] = useState<{
+        pageIndex: number
+        pageSize: number
+        sort: {
+            order: '' | 'asc' | 'desc'
+            key: string | number
+        }
+        query: string
+        total: number
+    }>({
+        total: 0,
+        pageIndex: 1,
+        pageSize: 10,
+        query: '',
+        sort: {
+            order: '',
+            key: '',
+        },
+    })
+
+    const columns: ColumnDef<Customer>[] = useMemo(() => {
+        return [
+            {
+                header: 'Name',
+                accessorKey: 'name',
+            },
+            {
+                header: 'Email',
+                accessorKey: 'email',
+            },
+            {
+                header: '',
+                id: 'action',
+                cell: (props) => (
+                    <Button
+                        size="xs"
+                        onClick={() => console.log('Action clicked', props)}
+                    >
+                        Action
+                    </Button>
+                ),
+            },
+        ]
+    }, [])
+
+    const handlePaginationChange = (pageIndex: number) => {
+        setTableData((prevData) => ({ ...prevData, ...{ pageIndex } }))
+    }
+
+    const handleSelectChange = (pageSize: number) => {
+        setTableData((prevData) => ({ ...prevData, ...{ pageSize } }))
+    }
+
+    const handleSort = ({ order, key }: OnSortParam) => {
+        setTableData((prevData) => ({
+            ...prevData,
+            sort: { order, key },
+        }))
+    }
+
+    useEffect(() => {
+        const fetchData = async () => {
+            setLoading(true)
+            const response = await apiGetCustomersList<{list: Customer[], total: number}, {}>(tableData)
+            if (response) {
+                setData(response.list)
+                setLoading(false)
+                setTableData((prevData) => ({
+                    ...prevData,
+                    ...{ total: response.total },
+                }))
+            }
+        }
+        fetchData()
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [tableData.pageIndex, tableData.sort, tableData.pageSize])
+
+    return (
+        <DataTable<Customer>
+            columns={columns}
+            data={data}
+            loading={loading}
+            pagingData={{
+                total: tableData.total,
+                pageIndex: tableData.pageIndex,
+                pageSize: tableData.pageSize,
+            }}
+            onPaginationChange={handlePaginationChange}
+            onSelectChange={handleSelectChange}
+            onSort={handleSort}
+        />
+    )
+}
+
+export default Basic
+```