ekm-ui 0.0.29 → 0.2.0

package/dist/stacked-list-item.mjs

@@ -1,36 +1,42 @@
-export { a as StackedListItem } from './chunk-MG4OUK2N.mjs';
-import './chunk-HAQTLD4G.mjs';
-import './chunk-X6GXSTW7.mjs';
+export { a as StackedListItem } from './chunk-IUZHBHDJ.mjs';
 import './chunk-ZHHTK7UM.mjs';
 import './chunk-QWPN2UNV.mjs';
-import './chunk-RMX72FR3.mjs';
-import './chunk-25FJ277C.mjs';
 import './chunk-FAFXVD4P.mjs';
 import './chunk-256SAVHD.mjs';
 import './chunk-VPLCWU7T.mjs';
 import './chunk-3ZCDEN7B.mjs';
 import './chunk-HDNA6QBW.mjs';
+import './chunk-HAQTLD4G.mjs';
+import './chunk-X6GXSTW7.mjs';
+import './chunk-FJQEJBBY.mjs';
+import './chunk-EWNPNF2B.mjs';
+import './chunk-YQAMEBON.mjs';
+import './chunk-EQANFKDN.mjs';
+import './chunk-RMX72FR3.mjs';
+import './chunk-NI4IFVX3.mjs';
+import './chunk-25FJ277C.mjs';
+import './chunk-LWDFKEBO.mjs';
+import './chunk-PJMH47GY.mjs';
 import './chunk-KAQJAKQH.mjs';
 import './chunk-BIU2AAPZ.mjs';
 import './chunk-B2KVPYRJ.mjs';
 import './chunk-OT256LE6.mjs';
-import './chunk-FJQEJBBY.mjs';
-import './chunk-EWNPNF2B.mjs';
-import './chunk-YQAMEBON.mjs';
+import './chunk-FRIXS4BL.mjs';
+import './chunk-YTTLKTRL.mjs';
+import './chunk-T2OVPC6F.mjs';
+import './chunk-3CISFAGD.mjs';
 import './chunk-ZPLTGYYM.mjs';
 import './chunk-QRNTMHBL.mjs';
+import './chunk-ER4YVWM3.mjs';
 import './chunk-ZT7KDTGF.mjs';
 import './chunk-WU66HPYP.mjs';
-import './chunk-FRIXS4BL.mjs';
-import './chunk-LWDFKEBO.mjs';
-import './chunk-PJMH47GY.mjs';
+import './chunk-NS6AVKX7.mjs';
 import './chunk-O3QYDTAF.mjs';
 import './chunk-664HOPW7.mjs';
+import './chunk-S7V4MUJ2.mjs';
 import './chunk-SAXGEQRG.mjs';
 import './chunk-LN7UO7PK.mjs';
-import './chunk-YTTLKTRL.mjs';
-import './chunk-T2OVPC6F.mjs';
-import './chunk-3CISFAGD.mjs';
+import './chunk-VASBTVLS.mjs';
 import './chunk-QTAUYFKM.mjs';
 import './chunk-RUPJ2ZHA.mjs';
 //# sourceMappingURL=out.js.map

package/dist/textarea.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare const TextArea: react.ForwardRefExoticComponent<react.RefAttributes<unknown>>;
+
+export { TextArea };

package/dist/textarea.mjs

@@ -0,0 +1,5 @@
+export { a as TextArea } from './chunk-NI4IFVX3.mjs';
+import './chunk-QTAUYFKM.mjs';
+import './chunk-RUPJ2ZHA.mjs';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=textarea.mjs.map

package/dist/textarea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/toast/index.d.ts

@@ -1,6 +1,6 @@
-import * as React$1 from 'react';
+import * as react from 'react';
 
-declare const ToastContext: React$1.Context<((toast: ToastEvent) => void) | undefined>;
+declare const ToastContext: react.Context<((toast: ToastEvent) => void) | undefined>;
 declare function ToastProvider({ children }: {
     children: React.ReactNode;
 }): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ekm-ui",
-  "version": "0.0.29",
+  "version": "0.2.0",
   "sideEffects": [
     "**/*.css"
   ],
@@ -62,6 +62,7 @@
     "@dnd-kit/utilities": "^3.2.1",
     "@headlessui/react": "^1.7.14",
     "@heroicons/react": "^2.0.18",
+    "classname-variants": "^1.3.2",
     "clsx": "^1.2.1",
     "flowbite": "^1.8.1",
     "flowbite-react": "^0.6.4",

package/src/accordion.tsx

@@ -0,0 +1,115 @@
+//@ts-nocheck
+import { useState, createContext, useContext, useEffect, useRef, cloneElement, Children } from 'react'
+import { HiChevronDown, HiChevronUp } from 'react-icons/hi'
+import PropTypes from 'prop-types'
+export const AccordionContext = createContext()
+
+export function Accordion({ children, ...props }) {
+  const panelListRef = useRef([])
+  const [currentlyShowing, setCurrentlyShowing] = useState(null)
+
+  const handleSelection = (id) => {
+    if (currentlyShowing === id) {
+      setCurrentlyShowing(null)
+    } else {
+      setCurrentlyShowing(id)
+    }
+  }
+
+  const addPanelOrder = (id) => {
+    panelListRef.current.push(id)
+  }
+
+  const getPanelList = () => {
+    return panelListRef.current
+  }
+
+  return <AccordionContext.Provider value={{ currentlyShowing, handleSelection, addPanelOrder, getPanelList }}>{children}</AccordionContext.Provider>
+}
+
+export function AccordionPanel({ children, ...props }) {
+  const context = useContext(AccordionContext)
+  useEffect(() => {
+    context.addPanelOrder(props.id)
+  }, [])
+
+  return (
+    <div id={`${props.id}-panel`} data-accordion="collapse">
+      {Children.map(children, (child) => {
+        return cloneElement(child, { id: props.id })
+      })}
+    </div>
+  )
+}
+
+export function AccordionTitle({ children, ...props }) {
+  const context = useContext(AccordionContext)
+
+  const handleSelection = (e) => {
+    context.handleSelection(props.id)
+  }
+
+  const panelList = context.getPanelList()
+  const isLastPanel = panelList[panelList.length - 1] === props.id
+
+  return (
+    <h2 id={`${props.id}-title`}>
+      <button
+        type="button"
+        className={`flex items-center justify-between w-full p-5 font-medium text-left border ${
+          isLastPanel && context.currentlyShowing !== props.id ? 'border-b-1' : 'border-b-0'
+        } border-gray-200 ${
+          panelList[0] === props.id ? 'rounded-t-xl' : isLastPanel && context.currentlyShowing !== props.id ? 'rounded-b-xl' : 'rounded-none'
+        } ${context.currentlyShowing === props.id && 'bg-gray-100'}
+         dark:focus:ring-gray-800 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-500 dark:text-gray-400`}
+        data-accordion-target={`#${props.id}-title`}
+        aria-expanded="true"
+        aria-controls={`${props.id}-title`}
+        onClick={handleSelection}
+      >
+        <span>{children}</span>
+        {context.currentlyShowing === `${props.id}` ? <HiChevronUp className="w-6 h-6" /> : <HiChevronDown className="w-6 h-6" />}
+      </button>
+    </h2>
+  )
+}
+
+export function AccordionContent({ children, ...props }) {
+  const context = useContext(AccordionContext)
+  const panelList = context.getPanelList()
+  return (
+    <div className={props.id !== context.currentlyShowing ? 'hidden' : ''} aria-labelledby="accordion-collapse-heading-1">
+      <div
+        className={`p-5 border ${
+          panelList[panelList.length - 1] === props.id && context.currentlyShowing === props.id ? 'rounded-b-xl border-b-1' : 'border-b-0'
+        } border-gray-200 dark:border-gray-700 dark:bg-gray-900`}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+Accordion.Panel = AccordionPanel
+Accordion.Title = AccordionTitle
+Accordion.Content = AccordionContent
+
+Accordion.propTypes = {
+  /** Components to be rendered as Part of the Compound Component, each panel is a seperate accordion section*/
+  children: PropTypes.shape({ type: PropTypes.arrayOf([AccordionPanel]) }).isRequired,
+}
+
+AccordionPanel.propTypes = {
+  /** Unique id for the dropdown */
+  id: PropTypes.string.isRequired,
+  /** Components to be rendered as Part of the Compound Component*/
+  children: PropTypes.oneOfType([
+    PropTypes.shape({ type: PropTypes.oneOf([AccordionTitle]) }),
+    PropTypes.shape({ type: PropTypes.oneOf([AccordionContent]) }),
+  ]).isRequired,
+}
+
+AccordionContent.propTypes = {
+  /** Components held within the Content section of the AccordionPanel*/
+  children: PropTypes.oneOfType([PropTypes.elementType]),
+}

package/src/breadcrumb.tsx

@@ -0,0 +1,43 @@
+//@ts-nocheck
+import { HiOutlineChevronRight } from 'react-icons/hi'
+import PropTypes from 'prop-types'
+
+export function Breadcrumb({ children }) {
+  return (
+    <nav className="flex" aria-label="Breadcrumb">
+      <ol className="inline-flex items-center space-x-1 md:space-x-3">{children}</ol>
+    </nav>
+  )
+}
+export function BreadcrumbHome({ children }) {
+  return <li className="inline-flex items-center">{children}</li>
+}
+export function BreadcrumbItem({ children }) {
+  return (
+    <li className="inline-flex items-center">
+      <HiOutlineChevronRight class="w-3 h-3 mr-2.5" />
+      {children}
+    </li>
+  )
+}
+
+Breadcrumb.Home = BreadcrumbHome
+Breadcrumb.Item = BreadcrumbItem
+
+Breadcrumb.propTypes = {
+    /** Beadcrumb compunds elements that make up the breadcrumb*/
+    children: PropTypes.arrayOf([PropTypes.oneOfType([PropTypes.shape({ type: PropTypes.oneOf([BreadcrumbHome]) }),
+    PropTypes.arrayOf(PropTypes.shape({ type: BreadcrumbItem }))])]).isRequired
+}
+
+BreadcrumbHome.propTypes = {
+    /** Elements to show in the breadcrumb usually this will be an icon with just a string or element like a span */
+    children : PropTypes.arrayOf([PropTypes.node]).isRequired
+}
+
+BreadcrumbItem.propTypes = {
+    /** Elements to show in the breadcrumb usually this will be just a string or element like a span */
+children : PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.node]).isRequired
+}

package/src/checkbox.tsx

@@ -0,0 +1,30 @@
+//@ts-nocheck
+import { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+
+export const Checkbox = forwardRef(function Checkbox(props, ref) {
+  return (
+    <div className="flex items-center">
+      <input
+        id={props.id}
+        ref={ref}
+        type="checkbox"
+        className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+        {...props}
+      />
+      {props.label && (
+        <label id={`${props.id}-lbl`} htmlFor={props.id} className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+          {props.label}
+        </label>
+      )}
+    </div>
+  )
+})
+
+Checkbox.propTypes = {
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string,
+    checked: PropTypes.bool,
+    disabled: PropTypes.bool,
+    onChange: PropTypes.func,
+}

package/src/dropdown.tsx

@@ -0,0 +1,140 @@
+//@ts-nocheck
+import { variantProps } from 'classname-variants/react'
+import { useState, createContext, useContext, useEffect, useRef } from 'react'
+import { BiChevronDown } from 'react-icons/bi'
+import PropTypes from 'prop-types'
+const DropdownContext = createContext()
+
+// BUTTON CLASSES
+const buttonProps = variantProps({
+  base: 'text-white focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium text-sm py-2.5 text-center inline-flex items-center',
+  variants: {
+    color: {
+      blue: 'bg-blue-700 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:ring-blue-300',
+      gray: 'bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 focus:ring-gray-300',
+      green: 'bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 focus:ring-green-300',
+      red: 'bg-red-700 hover:bg-red-800 dark:bg-red-600 dark:hover:bg-red-700 focus:ring-red-300',
+      yellow: 'bg-yellow-700 hover:bg-yellow-800 dark:bg-yellow-600 dark:hover:bg-yellow-700 focus:ring-yellow-300',
+    },
+    size: {
+      sm: 'px-5 py-1.5',
+      md: 'px-5 py-2.5',
+      lg: 'px-5 py-3.5',
+      // WORKAROUND: Compound variants don't work with classname-variants/react (revisit later)
+      rsm: 'px-2.5 py-2.5',
+      rmd: 'px-3.5 py-3.5',
+      rlg: 'px-4.5 py-4.5',
+    },
+    type: {
+      rect: 'rounded-lg',
+      round: 'rounded-full',
+    },
+    defaultVariants: {
+      color: 'blue',
+      size: 'md',
+      type: 'rect',
+    },
+  },
+})
+
+const DropdownState = Object.freeze({
+  OPEN: 'open',
+  CLOSED: 'closed',
+})
+
+export function Dropdown({ children, ...props }) {
+  const [showDropdown, setShowDropdown] = useState(DropdownState.CLOSED)
+  const handleShowDropdown = () => {
+    const currState = showDropdown
+    setShowDropdown(currState === DropdownState.CLOSED ? DropdownState.OPEN : DropdownState.CLOSED)
+  }
+
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (e.target.id === props.id) return
+      setShowDropdown(DropdownState.CLOSED)
+    }
+
+    document.addEventListener('click', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside)
+    }
+  }, [])
+
+  return (
+    <DropdownContext.Provider value={{ showDropdown, setShowDropdown }}>
+      <button id={props.id} {...buttonProps(props)} data-dropdown-toggle={`${props.id}-dropdown`} type="button" onClick={handleShowDropdown}>
+        {props.label}
+        {props.type === 'rect' && <BiChevronDown />}
+      </button>
+      <div
+        id={`${props.id}-dropdown`}
+        className={`z-10 mt-2 absolute ${
+          showDropdown === DropdownState.OPEN ? '' : 'hidden'
+        } bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700`}
+      >
+        <ul className="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
+          {children}
+        </ul>
+      </div>
+    </DropdownContext.Provider>
+  )
+}
+
+export function DropdownDivider() {
+  return (
+    <li>
+      <hr className="h-px my-2 bg-gray-200 border-0 dark:bg-gray-700" />
+    </li>
+  )
+}
+
+export function DropdownItem({ callback, children }) {
+  const context = useContext(DropdownContext)
+
+  const handleSelection = () => {
+    context.setShowDropdown(false)
+    callback()
+  }
+  return (
+    <li>
+      <div className="block px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" onClick={handleSelection}>
+        {children}
+      </div>
+    </li>
+  )
+}
+
+Dropdown.Divider = DropdownDivider
+Dropdown.Item = DropdownItem
+
+Dropdown.propTypes = {
+  /** Unique id for the dropdown */
+  id: PropTypes.string.isRequired,
+    /** Components to be rendered as Part of the Compound Component*/
+    children: PropTypes.oneOfType([
+        PropTypes.shape({ type: PropTypes.oneOf([DropdownItem]), }),
+        PropTypes.arrayOf(PropTypes.shape({ type: PropTypes.oneOf([DropdownDivider]) }))
+    ]).isRequired,
+    /** Shape of the button rectangle or round */
+    type: PropTypes.oneOf(['rect', 'round']),
+    /** Size of the button sm,md,lg used for rectangle and rsm, rmd, rlg used for a round button */
+    size: PropTypes.oneOf(['sm', 'md', 'lg', 'rsm', 'rmd', 'rlg']),
+    /** Colour of the button based upon predefined values */
+    color: PropTypes.oneOf(['blue', 'gray', 'green', 'red', 'yellow']),
+    /** Rectangle should have a text label eg:'Dropdown' and a round type should take an icon element eg:'...' */
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+    /** Returns value of the selected item */
+    callback: PropTypes.func.isRequired,
+}
+Dropdown.defaultProps = {
+    type: 'rect',
+    size: 'md',
+    color: 'blue',
+    label: 'Dropdown',
+}
+DropdownItem.propTypes = {
+    /** Returns value of the dropdown item selected*/
+    callback: PropTypes.func.isRequired,    
+}

package/src/index.tsx

@@ -31,5 +31,11 @@ export { TableHeader } from "./table-header/table-header";
 export { Search } from "./search/search";
 export { LoadingButton } from "./loading-button";
 export { DragAndDrop } from "./drag-and-drop";
+export { Dropdown } from "./dropdown";
+export { Select } from "./select";
+export { Checkbox } from "./checkbox";
+export { Accordion } from "./accordion";
+export { Breadcrumb } from "./breadcrumb";
+export {TextArea} from "./textarea";
 
 import "./styles.css";

package/src/select.tsx

@@ -0,0 +1,44 @@
+//@ts-nocheck
+import { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+export const Select = forwardRef(function Select(props, ref) {
+  return (
+    <>
+      {props.label && (
+        <label htmlFor={`${props.id}-select`} className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+          {props.label}
+        </label>
+      )}
+      <select
+        id={`${props.id}-select`}
+        ref={ref}
+        className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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"
+        {...props}
+      >
+        {(props.options || []).map((o) => {
+          return (
+            <option key={`${props.id}-${o.value}`} value={o.value} disabled={o.disabled}>
+              {o.display}
+            </option>
+          )
+        })}
+      </select>
+    </>
+  )
+})
+
+Select.propTypes = {
+/** Unique id for the dropdown */
+    id: PropTypes.string.isRequired,
+    /** Optional label for the dropdown */
+    label: PropTypes.string,
+  /** Optional inital selected value must match the value of an element of an object in the options array. (defaults to first value in the list)*/
+    defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    /** Array of objects with value and display properties */
+    options: PropTypes.arrayOf(PropTypes.shape({
+        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+        display: PropTypes.string.isRequired
+    })).isRequired,
+    /** Callback function when the dropdown value changes */
+    onChange: PropTypes.func.isRequired
+}

package/src/textarea.tsx

@@ -0,0 +1,51 @@
+//@ts-nocheck
+import { forwardRef } from 'react'
+import { variantProps } from 'classname-variants/react'
+import PropTypes from 'prop-types'
+
+const fieldProps = variantProps({
+  base: 'block p-2.5 w-full text-sm rounded-lg border ',
+  variants: {
+    color: {
+      failure:
+        'text-red-700 bg-red-50 border-red-500 focus:ring-red-500 focus:border-red-500 dark:bg-red-700 dark:border-red-600 dark:placeholder-red-700 dark:text-red-900 dark:focus:ring-red-500 dark:focus:border-red-500',
+      gray: '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',
+    },
+  },
+  defaultVariants: {
+    color: 'gray',
+  },
+})
+
+export const TextArea = forwardRef(function TextArea(props, ref) {
+  return (
+    <>
+      {props.label && (
+        <label htmlFor={props.id} className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
+          {props.label}
+        </label>
+      )}
+      <textarea
+        ref={ref}
+        id={props.id}
+        rows={props.rows || 3}
+        {...fieldProps(props)}
+        placeholder={props.placeholder || 'Enter your text here...'}
+        {...props}
+      ></textarea>
+    </>
+  )
+})
+
+TextArea.propTypes = {
+    /** Unique id for the TextArea Component */
+    id: PropTypes.string.isRequired,
+    /** Optional Label to acompany TextArea Component */
+    label: PropTypes.string,
+    /** Optional placeholder text for TextArea Component */
+    placeholder: PropTypes.string,
+    /** Optional number of rows for the TextArea, this defaults to 3 rows if none provided */
+    rows: PropTypes.number,
+    /** Optional color defaults to gray and shpuld be set to failure if it fails validation*/
+    color: PropTypes.oneOf(['gray', 'failure']),
+}