ekm-ui 0.4.39 → 0.4.41

package/src/date-time-component.tsx

@@ -0,0 +1,257 @@
+//@ts-nocheck
+import { useState, useRef, useMemo, useEffect } from 'react'
+import { HiOutlineCalendar } from 'react-icons/hi'
+import { Button } from './button'
+import { useForm, Controller } from 'react-hook-form'
+import debounce from 'lodash/debounce'
+import { variantProps } from 'classname-variants/react'
+import { BiChevronDown } from 'react-icons/bi'
+import PropTypes from 'prop-types'
+import { GetDiscountDateTimeString } from './helpers/datetime'
+import { STANDARD_CONTROL, FAILURE_CONTROL } from './helpers/colour'
+
+
+const generateTimeOptions = () => {
+  const times = [];
+  for (let i = 0; i < 24; i++) {
+    for (let j = 0; j < 60; j += 15) {
+      const hour = (i % 12 || 12).toString().padStart(2, '0'); // Convert 0 to 12 for 12 AM/PM and pad with zero
+      const minute = j.toString().padStart(2, '0');
+      const period = i < 12 ? 'AM' : 'PM';
+      const time = `${hour}:${minute} ${period}`;
+      times.push(time);
+    }
+  }
+  return times;
+};
+
+export function DateTimeComponent({ id, dateValue, showError=false, callback }) {
+  const [showDropdown, setShowDropdown] = useState(false)
+  const timeOptions = generateTimeOptions();
+
+  const handleShowDropdown = () => {
+    setShowDropdown(true)
+  }
+
+  const ref = useRef(null)
+
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setShowDropdown(false)
+      }
+    }
+
+    document.addEventListener('click', handleClickOutside, true)
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (dateValue && (dateValue instanceof Date)) {
+      setValue('date', dateValue.toISOString().split("T")[0])
+      const hours = dateValue.getHours()
+      const mins = dateValue.getMinutes()
+      const newHours = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours
+      const suffix = hours < 12 ? 'AM' : 'PM'
+      const newTime = `${newHours.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')} ${suffix}`
+      setValue('time', newTime)
+    }
+  }, [dateValue])
+
+  const MinDate = useMemo(() => {
+    var d = new Date();
+    d.setDate(d.getDate() - 1);
+    return d;
+  }, [new Date().getDay()]);
+
+  const {
+    control,
+    reset,
+    handleSubmit,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useForm({
+    defaultValues: {
+      date: MinDate.toISOString().split("T")[0],
+      time: "12:00 AM"
+    },
+  });
+
+  const [err, setErr] = useState(false);
+  const [dateErr, setDateErr] = useState(false);
+
+
+
+  const debouncedExport = useRef(
+    debounce((data) => {
+      exportRequest(data);
+    }, 500)
+  ).current;
+
+  const handleCancel = (e) => {
+    e.preventDefault();
+    setShowDropdown(false);
+    setDateErr(false);
+  };
+
+  const onSubmit = (data) => {
+    debouncedExport(data);
+  };
+
+  function convertToDate(date, time) {
+    time = time.trim();  
+    const timeParts = time.match(/(\d+):(\d+)\s?(AM|PM)/i);
+    let hours = parseInt(timeParts[1], 10);
+    const minutes = parseInt(timeParts[2], 10);
+    const period = timeParts[3].toUpperCase();
+    if (period === "PM" && hours !== 12) {
+      hours += 12;
+    } else if (period === "AM" && hours === 12) {
+      hours = 0;
+    }
+    const [year, month, day] = date.split('-');
+    const dateObj = new Date(year, month - 1, day, hours, minutes, 0, 0);
+    return dateObj;
+  }
+
+  const exportRequest = (data) => {
+    if (data.emptyChk) {
+      setErr(true);
+      return;
+    }
+    const newDate = convertToDate(data.date, data.time);
+    callback(newDate);
+    setShowDropdown(false)
+  }
+
+  const onChanged = () => {
+    if (dateErr) setDateErr(false);
+  };
+
+  const renderContent = () => (
+    <div>
+        <>
+          <div className="grid grid-cols-2 pb-4">
+            <Controller
+              name="date"
+              control={control}
+              rules={{
+                required: "A date is required.",
+                validate: {
+                  whitespace: (v) =>
+                    (v?.toString().trim() || "").length > 0 ||
+                    "A date is required.",
+                },
+              }}
+              render={({ field }) => (
+                <div className="w-full pr-1">
+                  <label htmlFor="date">Date</label>
+                  <input
+                    type="date"
+                    id="datePicker"
+                    value={field.value}
+                    name="date"
+                    max={MinDate}
+                    onChange={(e) => {
+                      field.onChange(e);
+                      onChanged();
+                    }}
+                    className={`mt-1 block w-full rounded-md border-gray-300 text-xs ${errors.date ? FAILURE_CONTROL : STANDARD_CONTROL}`}
+                  />
+                </div>
+              )}
+            />
+            <Controller
+              name="time"
+              control={control}
+              rules={{
+                required: "A time is required.",
+                validate: {
+                  whitespace: (v) =>
+                    (v?.toString().trim() || "").length > 0 ||
+                    "A time is required.",
+                },
+              }}
+              render={({ field }) => (
+                <div className="w-full pr-1">
+                  <label htmlFor="time">Time</label>
+                  <select id="time-select" onChange={(e) => {
+                      field.onChange(e);
+                      onChanged();
+                    }} 
+                    className="mt-1 block w-full rounded-md border-gray-300 text-xs"
+                    value={field.value}
+                  >
+                    {timeOptions.map((time) => (
+                      <option key={`time-option-${time}`} value={time}>{time}</option>
+                    ))}
+                  </select>
+                </div>
+              )}
+            />
+          </div>
+        </>
+      {(errors.date || errors.time || dateErr) &&
+        <div className='pb-4 text-sm text-red-600 dark:text-red-500'>
+          {errors.date?.message || errors.time?.message || 'A valid date time is required.'}
+        </div>
+      }
+      <div className="flex justify-end gap-4">
+        <Button color="gray" size="sm" outline onClick={handleCancel}>
+          Cancel
+        </Button>
+        <Button color="default" size="sm" type="submit">
+          Apply
+        </Button>
+      </div>
+    </div>
+  );
+
+  return (
+    <div id={`${id}-panel`} className="relative">
+      <div className='relative'>
+        <input
+          id={`${id}-input`}
+          placeholder="11-Aug-2024 12:00 AM"
+          value={GetDiscountDateTimeString(dateValue, true)}
+          className={`block p-2.5 w-full text-sm border rounded-lg cursor-pointer ${showError ? 
+            'bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500' : 
+            'text-gray-900 bg-gray-50 border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'}`
+          }
+          onClick={handleShowDropdown}
+          readOnly
+        />
+        <HiOutlineCalendar className='absolute right-2 top-3 cursor-pointer' onClick={handleShowDropdown}/>
+      </div>
+      <div
+          id={`${id}-dropdown`}
+          ref={ref}
+          className={`z-50 w-full mt-2 absolute ${
+            showDropdown ? '' : 'hidden'
+          } left-0 bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700`}
+        >
+          <div className="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
+            <form className="space-y-6 p-3" onSubmit={handleSubmit(onSubmit)}>
+              {showDropdown && renderContent()}
+            </form>
+          </div>
+        </div>
+    </div>
+  );
+}
+
+DateTimeComponent.propTypes = {
+  /** This is the unique Id for the DateTimePicker component */
+  id: PropTypes.string.isRequired,
+  /** Date object containing date to display in input control. Date should already be converted to local time */
+  dateValue: PropTypes.instanceOf(Date).isRequired,
+  /** This is an optional boolean option which changes the background colour of the input control to red */
+  showError: PropTypes.bool,
+  /** Callback function for the DateTimecomponent outputs the chosen date time in form of Date object*/
+  callback: PropTypes.func.isRequired,
+};
+
+DateTimeComponent.displayName = "DateTimeComponent";

package/src/helpers/datetime.js

@@ -0,0 +1,90 @@
+// Takes a date time string in UTC time and returns a Date object in local time
+export const ConvertUTCToLocal = (utcTime) => {
+  const utcDate = new Date(Date.parse(utcTime))
+  return new Date(Date.UTC(utcDate.getFullYear(), utcDate.getMonth(), utcDate.getDate(), utcDate.getHours(), utcDate.getMinutes()))
+}
+// Returns date in format of e.g 30-Jun-2022 10:00 AM
+export const GetDiscountDateTimeString = (utcTime, timeIsLocal = false) => {
+  const localDate =  timeIsLocal ? new Date(Date.parse(utcTime)) : ConvertUTCToLocal(utcTime)
+  const timeString = getTimeString(localDate.getHours(), localDate.getMinutes())
+  const dateString = getDateString(localDate.getFullYear(), localDate.getMonth(), localDate.getDate())
+  return `${dateString} ${timeString}`
+}
+// Returns date in format of e.g 30-Jun-2022
+export const GetDiscountDateString = (utcTime, timeIsLocal = false) => {
+  const localDate =  timeIsLocal ? new Date(Date.parse(utcTime)) : ConvertUTCToLocal(utcTime)
+  return getDateString(localDate.getFullYear(), localDate.getMonth(), localDate.getDate())
+}
+
+export const GetBrowserControlDateTimeString = (utcTime, timeIsLocal = false) => {
+  const localDate =  timeIsLocal ? new Date(Date.parse(utcTime)) : ConvertUTCToLocal(utcTime)
+  return `${getBrowserDateString(localDate.getFullYear(),localDate.getMonth() + 1, localDate.getDate())}T${getBrowserTimeString(localDate.getHours(), localDate.getMinutes())}`
+}
+
+export const GetBrowserControTimeString = (utcTime, timeIsLocal = false) => {
+  const localDate =  timeIsLocal ? new Date(Date.parse(utcTime)) : ConvertUTCToLocal(utcTime)
+  return getBrowserTimeString(localDate.getHours(), localDate.getMinutes())
+}
+// Converts the time string, e.g. '06:00', into a full Date object 
+export const ConvertBrowserTimeStringToDate = (timeString) => {
+  const parts = timeString.split(':')
+  if (parts.length === 2) {
+    const hours = Number(parts[0])
+    const minutes = Number(parts[1])
+    if (!isNaN(hours) && !isNaN(minutes)) {
+      return new Date().setHours(hours, minutes, 0, 0)
+    }
+  }
+  return new Date().setHours(0,0,0,0)
+}
+
+const getBrowserDateString = (year, month, date) => {
+  return `${year}-${month.toString().padStart(2, 0)}-${date.toString().padStart(2,0)}`
+}
+
+const getBrowserTimeString = (hours, minutes) => {
+  return `${hours.toString().padStart(2,0)}:${minutes.toString().padStart(2, 0)}`
+}
+
+const getTimeString = (hours, minutes) =>
+{
+  const newHours = hours > 12 ? hours - 12 : hours
+  const suffix = hours > 11 ? 'PM' : 'AM'
+  return `${newHours}:${minutes.toString().padStart(2, '0')} ${suffix} `
+}
+
+const getDateString = (year, month, date) =>
+{
+  return `${date.toString().padStart(2, '0')}-${shortMonths[month]}-${year}`
+}
+
+// left this in for future use
+const months = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December'
+]
+
+const shortMonths = [
+  'Jan',
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dec'
+]

package/src/index.tsx

@@ -69,7 +69,8 @@ export { NBUI_Card_Form } from "./nbui/nbui-card-form";
 export { NBUI_Card_Table } from "./nbui/nbui-card-table";
 export { NBUI_Card_Paragraphs_Large } from "./nbui/nbui-card-paragraphs-lg";
 export { NBUI_Card_Paragraphs } from "./nbui/nbui-card-paragraphs";
-export { NBUI_Footer} from "./nbui/nbui-footer";  
+export { NBUI_Footer} from "./nbui/nbui-footer";
+export { DateTimeComponent } from "./date-time-component";  
 
 
 import "./styles.css";

package/src/radio.tsx

@@ -37,8 +37,8 @@ Radio.propTypes = {
   disabled: PropTypes.bool,
   /** function to handle checked value */
   onChange: PropTypes.func,
-  /** String for label placed after radio button */
-  label: PropTypes.string,
+  /** label placed after radio button */
+  label: PropTypes.node,
 };
 
 Radio.displayName = "Radio";

package/dist/chunk-YDCYBJPC.js

@@ -1,12 +0,0 @@
-import { a } from './chunk-6LHL364H.js';
-import { e } from './chunk-Z4LPO673.js';
-import { createContext, useRef, useState, useContext, useEffect, Children, cloneElement } from 'react';
-import { HiChevronUp, HiChevronDown } from 'react-icons/hi';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var r=e(a(),1);var d=createContext({currentlyShowing:null,handleSelection:t=>{},addPanelOrder:t=>{},getPanelList:()=>[]});function s({children:t}){let e=useRef([]),[n,o]=useState(null),i=a=>{o(n===a?null:a);},l=a=>{e.current.push(a);},h=()=>e.current;return jsx(d.Provider,{value:{currentlyShowing:n,handleSelection:i,addPanelOrder:l,getPanelList:h},children:t})}function u({children:t,id:e}){let n=useContext(d);return useEffect(()=>{n.addPanelOrder(e);},[]),jsx("div",{id:`${e}-panel`,"data-accordion":"collapse",children:Children.map(t,o=>cloneElement(o,{id:e}))})}function y({children:t,id:e}){let n=useContext(d),o=()=>{n.handleSelection(e);},i=n.getPanelList(),l=i[i.length-1]===e;return jsx("h2",{id:`${e}-title`,children:jsxs("button",{type:"button",className:`flex w-full items-center justify-between border p-5 text-left font-medium ${l&&n.currentlyShowing!==e?"border-b-1":"border-b-0"} border-gray-200 ${i[0]===e?"rounded-t-xl":l&&n.currentlyShowing!==e?"rounded-b-xl":"rounded-none"} ${n.currentlyShowing===e&&"bg-gray-100"}
-         text-gray-500 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:ring-gray-800`,"data-accordion-target":`#${e}-title`,"aria-expanded":"true","aria-controls":`${e}-title`,onClick:o,children:[jsx("span",{children:t}),n.currentlyShowing===`${e}`?jsx(HiChevronUp,{className:"h-6 w-6"}):jsx(HiChevronDown,{className:"h-6 w-6"})]})})}function g({children:t,id:e}){let n=useContext(d),o=n.getPanelList();return jsx("div",{className:e!==n.currentlyShowing?"hidden":"","aria-labelledby":"accordion-collapse-heading-1",children:jsx("div",{className:`border p-5 ${o[o.length-1]===e&&n.currentlyShowing===e?"border-b-1 rounded-b-xl":"border-b-0"} border-gray-200 dark:border-gray-700 dark:bg-gray-900`,children:t})})}s.Panel=u;s.Title=y;s.Content=g;s.propTypes={children:r.default.arrayOf(r.default.element)};u.propTypes={id:r.default.string.isRequired,children:r.default.oneOfType([r.default.shape({type:r.default.oneOf([y])}),r.default.shape({type:r.default.oneOf([g])})]).isRequired};g.propTypes={children:r.default.oneOfType([r.default.elementType])};
-
-export { d as a, s as b, u as c, y as d, g as e };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-YDCYBJPC.js.map

package/dist/chunk-YDCYBJPC.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/accordion.tsx"],"names":["import_prop_types","useState","createContext","useContext","useEffect","useRef","cloneElement","Children","HiChevronDown","HiChevronUp","jsx","jsxs","AccordionContext","_","Accordion","children","panelListRef","currentlyShowing","setCurrentlyShowing","handleSelection","id","addPanelOrder","getPanelList","AccordionPanel","context","child","AccordionTitle","panelList","isLastPanel","AccordionContent","PropTypes"],"mappings":"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","sourcesContent":["import React, {\n  useState,\n  createContext,\n  useContext,\n  useEffect,\n  useRef,\n  cloneElement,\n  Children,\n} from \"react\";\nimport { HiChevronDown, HiChevronUp } from \"react-icons/hi\";\nimport PropTypes from \"prop-types\";\n\ntype AccordionContext = {\n  currentlyShowing: string | null;\n  handleSelection: (id: string) => void;\n  addPanelOrder: (id: string) => void;\n  getPanelList: () => string[];\n};\n\nexport const AccordionContext = createContext<AccordionContext>({\n  currentlyShowing: null,\n  handleSelection: (_: string) => {},\n  addPanelOrder: (_: string) => {},\n  getPanelList: () => [],\n});\n\ntype AccordionProps = {\n  children: React.ReactElement<AccordionPanelProps>[];\n};\n\nexport function Accordion({ children }: AccordionProps) {\n  const panelListRef = useRef<string[]>([]);\n  const [currentlyShowing, setCurrentlyShowing] = useState<string | null>(null);\n\n  const handleSelection = (id: string) => {\n    if (currentlyShowing === id) {\n      setCurrentlyShowing(null);\n    } else {\n      setCurrentlyShowing(id);\n    }\n  };\n\n  const addPanelOrder = (id: string) => {\n    panelListRef.current.push(id);\n  };\n\n  const getPanelList = () => {\n    return panelListRef.current;\n  };\n\n  return (\n    <AccordionContext.Provider\n      value={{ currentlyShowing, handleSelection, addPanelOrder, getPanelList }}\n    >\n      {children}\n    </AccordionContext.Provider>\n  );\n}\n\ntype AccordionPanelProps = {\n  children: React.DetailedReactHTMLElement<any, HTMLElement>;\n  id: string;\n};\n\nexport function AccordionPanel({ children, id }: AccordionPanelProps) {\n  const context = useContext(AccordionContext);\n\n  useEffect(() => {\n    context.addPanelOrder(id);\n  }, []);\n\n  return (\n    <div id={`${id}-panel`} data-accordion=\"collapse\">\n      {Children.map(children, (child) => {\n        return cloneElement(child, { id: id });\n      })}\n    </div>\n  );\n}\n\ntype AccordionTitleProps = {\n  children: React.ReactNode;\n  id: string;\n};\n\nexport function AccordionTitle({ children, id }: AccordionTitleProps) {\n  const context = useContext(AccordionContext);\n\n  const handleSelection = () => {\n    context.handleSelection(id);\n  };\n\n  const panelList = context.getPanelList();\n  const isLastPanel = panelList[panelList.length - 1] === id;\n\n  return (\n    <h2 id={`${id}-title`}>\n      <button\n        type=\"button\"\n        className={`flex w-full items-center justify-between border p-5 text-left font-medium ${\n          isLastPanel && context.currentlyShowing !== id\n            ? \"border-b-1\"\n            : \"border-b-0\"\n        } border-gray-200 ${\n          panelList[0] === id\n            ? \"rounded-t-xl\"\n            : isLastPanel && context.currentlyShowing !== id\n            ? \"rounded-b-xl\"\n            : \"rounded-none\"\n        } ${context.currentlyShowing === id && \"bg-gray-100\"}\n         text-gray-500 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:focus:ring-gray-800`}\n        data-accordion-target={`#${id}-title`}\n        aria-expanded=\"true\"\n        aria-controls={`${id}-title`}\n        onClick={handleSelection}\n      >\n        <span>{children}</span>\n        {context.currentlyShowing === `${id}` ? (\n          <HiChevronUp className=\"h-6 w-6\" />\n        ) : (\n          <HiChevronDown className=\"h-6 w-6\" />\n        )}\n      </button>\n    </h2>\n  );\n}\n\ntype AccordionContentProps = {\n  children: React.ReactNode;\n  id: string;\n};\n\nexport function AccordionContent({ children, id }: AccordionContentProps) {\n  const context = useContext(AccordionContext);\n  const panelList = context.getPanelList();\n  return (\n    <div\n      className={id !== context.currentlyShowing ? \"hidden\" : \"\"}\n      aria-labelledby=\"accordion-collapse-heading-1\"\n    >\n      <div\n        className={`border p-5 ${\n          panelList[panelList.length - 1] === id &&\n          context.currentlyShowing === id\n            ? \"border-b-1 rounded-b-xl\"\n            : \"border-b-0\"\n        } border-gray-200 dark:border-gray-700 dark:bg-gray-900`}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nAccordion.Panel = AccordionPanel;\nAccordion.Title = AccordionTitle;\nAccordion.Content = AccordionContent;\n\nAccordion.propTypes = {\n  /** Components to be rendered as Part of the Compound Component, each panel is a seperate accordion section*/\n  children: PropTypes.arrayOf(PropTypes.element),\n};\n\nAccordionPanel.propTypes = {\n  /** Unique id for the dropdown */\n  id: PropTypes.string.isRequired,\n  /** Components to be rendered as Part of the Compound Component*/\n  children: PropTypes.oneOfType([\n    PropTypes.shape({ type: PropTypes.oneOf([AccordionTitle]) }),\n    PropTypes.shape({ type: PropTypes.oneOf([AccordionContent]) }),\n  ]).isRequired,\n};\n\nAccordionContent.propTypes = {\n  /** Components held within the Content section of the AccordionPanel*/\n  children: PropTypes.oneOfType([PropTypes.elementType]),\n};\n"]}