@infonomic/uikit 2.0.0 → 2.1.1

package/src/styles/utils/utils.css

@@ -0,0 +1,2 @@
+@import "./utility-classes.css";
+@import "./scroll-layout-shift.css";

package/src/theme/theme-provider/index.ts

@@ -0,0 +1 @@
+export * from './provider'

package/src/theme/theme-provider/provider.tsx

@@ -0,0 +1,44 @@
+/**
+ * NOTE: Not used in production. This is only here for
+ * uikit development with the provider placed in
+ * .storybook/preview.tsx
+ */
+
+import { createContext, useContext, useMemo } from 'react'
+import type { ReactNode } from 'react'
+
+enum Theme {
+  DARK = 'dark',
+  LIGHT = 'light'
+}
+
+// ThemeContext
+interface ThemeContextType {
+  theme: Theme | null
+}
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
+
+interface ThemeProviderProps {
+  children: ReactNode
+  theme: Theme
+}
+
+// ThemeProvider
+function ThemeProvider({ children, theme }: ThemeProviderProps): React.JSX.Element {
+  const contextValue = useMemo(() => {
+    return { theme }
+  }, [theme])
+
+  return <ThemeContext value={contextValue}>{children}</ThemeContext>
+}
+
+// Hook helper useTheme
+function useTheme(): ThemeContextType {
+  const context = useContext(ThemeContext)
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider')
+  }
+  return context
+}
+
+export { Theme, ThemeProvider, useTheme }

package/src/utils/capitalize.ts

@@ -0,0 +1,6 @@
+export function capitalize(str: string): string {
+  if (typeof str !== 'string' || str.length === 0) {
+    return ''
+  }
+  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()
+}

package/src/utils/externalLinkProps.ts

@@ -0,0 +1,6 @@
+const EXTERNAL_LINK_PROPS: { target: string; rel: string } = {
+  target: '_blank',
+  rel: 'noreferrer noopener'
+}
+
+export default EXTERNAL_LINK_PROPS

package/src/utils/findMatch.ts

@@ -0,0 +1,7 @@
+function findMatch(data: any, find: any, defaultValue: any): any {
+  const founded = data.findIndex((el: any) => el === find)
+
+  return founded >= 0 ? find : defaultValue
+}
+
+export default findMatch

package/src/utils/getPortalRoot.ts

@@ -0,0 +1,3 @@
+export function getPortalRoot(): false | HTMLElement {
+  return typeof window !== 'undefined' && (document.getElementById('portal-root') ?? document.body)
+}

package/src/utils/isTouchDevice.ts

@@ -0,0 +1,11 @@
+const isTouchDevice = (): boolean => {
+  return (
+    typeof window !== 'undefined' &&
+    ('ontouchstart' in window ||
+      navigator.maxTouchPoints > 0 ||
+      // @ts-expect-error: error
+      navigator.msMaxTouchPoints > 0)
+  )
+}
+
+export default isTouchDevice

package/src/utils/objectsToArray.ts

@@ -0,0 +1,15 @@
+export default function objectsToArray(object: any): any[] {
+  let result: any[] = []
+
+  Object.values(object).forEach((value) => {
+    if (typeof value === 'string') {
+      result = [...result, value]
+    } else if (typeof value === 'object' && !Array.isArray(value) && value !== null) {
+      result = [...result, ...objectsToArray(value)]
+    }
+
+    return undefined
+  })
+
+  return result
+}

package/src/utils/objectsToString.ts

@@ -0,0 +1,5 @@
+import objectsToArray from './objectsToArray.js'
+
+export default function objectsToString(object: any): string {
+  return objectsToArray(object).join(' ')
+}

package/src/utils/polymorphic.ts

@@ -0,0 +1,16 @@
+import { type ComponentProps, type ElementType, type ReactElement } from 'react'
+
+/**
+ * @see https://www.benmvp.com/blog/polymorphic-react-components-typescript/
+ */
+export interface AsProps<E extends ElementType = ElementType> {
+  as?: E
+}
+
+export type MergeProps<E extends ElementType> = AsProps<E> & Omit<ComponentProps<E>, keyof AsProps>
+
+export type PolymorphicComponentProps<E extends ElementType, P> = P & MergeProps<E>
+
+export type PolymorphicComponent<P, D extends ElementType = 'button'> = <E extends ElementType = D>(
+  props: PolymorphicComponentProps<E, P>
+) => ReactElement | null

package/src/utils/to-kebab-case.ts

@@ -0,0 +1,5 @@
+export const toKebabCase = (string?: string): string =>
+  (string ?? '')
+    ?.replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/\s+/g, '-')
+    .toLowerCase()

package/src/widgets/datepicker/datepicker.module.css

@@ -0,0 +1,189 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-components;
+
+@layer infonomic-components {
+  .container {
+    position: relative;
+  }
+
+  .input,
+  .input-wrapper {
+    width: 100%;
+  }
+
+  .content {
+    width: 100%;
+    border-radius: 4px;
+    padding-top: var(--spacing-4);
+    padding-bottom: var(--spacing-2);
+    padding-left: var(--spacing-2);
+    padding-right: var(--spacing-1);
+    background-color: var(--background);
+    border: 1px solid var(--border-color);
+    box-shadow: var(--shadow-md);
+    animation-duration: 400ms;
+    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+    will-change: transform, opacity;
+
+    &:focus {
+      box-shadow: var(--shadow-md)
+    }
+
+    &[data-state="open"][data-side="top"] {
+      animation-name: slideDownAndFade;
+    }
+
+    &[data-state="open"][data-side="right"] {
+      animation-name: slideLeftAndFade;
+    }
+
+    &[data-state="open"][data-side="bottom"] {
+      animation-name: slideUpAndFade;
+    }
+
+    &[data-state="open"][data-side="left"] {
+      animation-name: slideRightAndFade;
+    }
+  }
+
+  .content:is(:global(.dark) *) {
+    background: var(--canvas-800);
+  }
+
+  .content-components {
+    display: flex;
+    width: 100%;
+    gap: var(--spacing-2);
+  }
+
+
+  .status-and-actions {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+
+  .content-status {
+    display: flex;
+    align-items: center;
+    padding-left: var(--spacing-4);
+    padding-right: var(--spacing-2);
+    font-size: var(--font-size-sm);
+    color: var(--foreground);
+    width: 100%;
+  }
+
+  .content-actions {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: var(--spacing-3);
+    padding-left: var(--spacing-4);
+    padding-right: var(--spacing-6);
+    gap: var(--spacing-2);
+    width: 100%;
+  }
+
+  .content-actions-button {
+    /* min-width: 100px; */
+    --ring-color: var(--violet-7);
+  }
+
+  .arrow {
+    fill: var(--gray-50);
+  }
+
+  .close {
+    all: unset;
+    font-family: inherit;
+    border-radius: 100%;
+    height: 25px;
+    width: 25px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--violet-11);
+    position: absolute;
+    top: 5px;
+    right: 5px;
+
+    &:hover {
+      background-color: var(--violet-4);
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 2px var(--violet-7);
+    }
+  }
+
+  .time-picker-container {
+    width: 80px;
+    margin: 0.6rem 0.5rem 1rem 0;
+  }
+
+  .time-picker-scroll-area {
+    height: 280px;
+    padding-right: var(--spacing-4)
+  }
+
+  .time-picker {
+    display: flex;
+    padding-left: var(--spacing-1);
+    padding-right: var(--spacing-1);
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .time-picker-button {
+    width: 100%;
+  }
+
+  @keyframes slideUpAndFade {
+    from {
+      opacity: 0;
+      transform: translateY(2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideRightAndFade {
+    from {
+      opacity: 0;
+      transform: translateX(-2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slideDownAndFade {
+    from {
+      opacity: 0;
+      transform: translateY(-2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideLeftAndFade {
+    from {
+      opacity: 0;
+      transform: translateX(2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+}

package/src/widgets/datepicker/datepicker.stories.tsx

@@ -0,0 +1,25 @@
+import { DatePicker } from './datepicker.js'
+
+export default {
+  title: 'Widgets/DatePicker',
+  component: DatePicker,
+  argTypes: {},
+}
+
+export const Default = (): React.JSX.Element => {
+  const handleDateChange = (value: Date | null): void => {
+    console.log('Selected date:', value)
+  }
+
+  return (
+    <div style={{ maxWidth: '270px', margin: '0 auto' }}>
+      <DatePicker
+        onDateChange={handleDateChange}
+        id="published_on"
+        name="published_on"
+        variant="outlined"
+        helpText="Select published on date."
+      />
+    </div>
+  )
+}

package/src/widgets/datepicker/datepicker.tsx

@@ -0,0 +1,310 @@
+'use client'
+/**
+ * @file DatePicker component using react-day-picker and radix-ui
+ * Portions copyright (c) 2023 Maliksidk19 licensed under the MIT
+ * license found in the LICENSE file in the root directory of this source tree.
+ * of https://github.com/Maliksidk19/shadcn-datetime-picker/
+ */
+
+import cx from 'classnames'
+import { format } from 'date-fns'
+import { Popover } from 'radix-ui'
+import type React from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { Button } from '../../components/button/button.js'
+import { IconButton } from '../../components/button/icon-button.js'
+import { Calendar } from '../../components/calendar/calendar.js'
+import { Input, InputAdornment } from '../../components/input'
+import type { Intent, Size, Variant } from '../../components/input/@types/input.js'
+import { ScrollArea } from '../../components/scroll-area/scroll-area.js'
+import { CalendarIcon } from '../../icons/calendar-icon.js'
+import { CloseIcon } from '../../icons/close-icon.js'
+import styles from './datepicker.module.css'
+
+export interface DatePickerProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  id: string
+  name: string
+  label?: string
+  required?: boolean
+  initialValue?: Date | null
+  mode?: 'date' | 'datetime'
+  yearsInFuture?: number
+  yearsInPast?: number
+  variant?: Variant
+  inputSize?: Size
+  inputWrapperClassName?: string
+  inputClassName?: string
+  intent?: Intent
+  containerClassName?: string
+  helpText?: string
+  errorText?: string
+  ariaLabelForSearch?: string
+  ariaLabelForClear?: string
+  onClear?: () => void
+  onDateChange?: (value: Date | null) => void
+  validatorFn?: (value: Date) => {
+    valid: boolean
+    value: Date
+  }
+  placeHolderText?: string
+}
+
+export function DatePicker({
+  id,
+  name,
+  label,
+  required,
+  initialValue,
+  mode = 'datetime',
+  yearsInFuture = 1,
+  yearsInPast = 10,
+  variant,
+  intent,
+  inputSize,
+  inputClassName,
+  inputWrapperClassName,
+  containerClassName,
+  onClear = () => {},
+  onDateChange = () => {},
+  validatorFn,
+  helpText,
+  errorText,
+  placeHolderText = '',
+  ariaLabelForSearch = 'date',
+  ariaLabelForClear = 'clear',
+  ...rest
+}: DatePickerProps): React.JSX.Element {
+  const [isOpen, setIsOpen] = useState(false)
+  const [time, setTime] = useState<string>('08:00')
+  const [date, setDate] = useState<Date | null>(() => {
+    if (initialValue) {
+      return initialValue
+    }
+    if (initialValue == null && required === true) {
+      return new Date()
+    }
+    return null
+  })
+  const [month, setMonth] = useState<Date | null>(date)
+  const calendarRef = useRef<HTMLDivElement | null>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const hasInitialized = useRef(false)
+
+  const handleClear = (): void => {
+    if (inputRef?.current != null) {
+      inputRef.current.value = ''
+    }
+    setDate(null)
+    onDateChange(null)
+    onClear()
+  }
+
+  const handleOnDateChange = (value: Date | null): void => {
+    if (onDateChange != null && typeof onDateChange === 'function') {
+      onDateChange(value)
+    }
+  }
+
+  const handleOnKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setIsOpen(true)
+    }
+  }
+
+  // This is to handle cases where the date picker is used in a form and the initial
+  // value is not set, but the field is required. In such cases, we want
+  // to trigger the onDateChange callback with the current date to ensure that
+  // the form is valid and the date picker is initialized with a value.
+  // Runs only once on mount
+  useEffect(() => {
+    if (
+      initialValue == null &&
+      date != null &&
+      required === true &&
+      hasInitialized.current === false
+    ) {
+      hasInitialized.current = true
+      onDateChange(date)
+    }
+  })
+
+  return (
+    <div className={cx(styles.container, containerClassName)}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-2)' }}>
+        <Input
+          id={id}
+          label={label}
+          readOnly
+          required={required}
+          name={name}
+          variant={variant}
+          intent={intent}
+          inputSize={inputSize}
+          ref={inputRef}
+          className={cx(styles.input, inputClassName)}
+          inputWrapperClassName={cx(styles['input-wrapper'], inputWrapperClassName)}
+          onKeyDown={handleOnKeyDown}
+          onClick={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            setIsOpen(true)
+          }}
+          value={date ? `${format(date, 'PP HH:mm')}` : ''}
+          placeHolder={placeHolderText}
+          helpText={helpText}
+          disabled={false}
+          error={false}
+          endAdornment={
+            <InputAdornment position="end">
+              <IconButton
+                role="button"
+                intent="noeffect"
+                variant="text"
+                arial-label={ariaLabelForClear}
+                size="xs"
+                onClick={() => {
+                  handleClear()
+                }}
+              >
+                <CloseIcon width="14px" height="14px" />
+              </IconButton>
+              <IconButton
+                role="button"
+                intent="noeffect"
+                variant="text"
+                arial-label={ariaLabelForClear}
+                size="xs"
+                onClick={() => {
+                  setIsOpen(true)
+                }}
+              >
+                <CalendarIcon width="18px" height="18px" />
+              </IconButton>
+            </InputAdornment>
+          }
+          {...rest}
+        />
+      </div>
+
+      <Popover.Root open={isOpen} onOpenChange={setIsOpen}>
+        <Popover.Trigger asChild>
+          <div style={{ position: 'relative', height: '1px' }}>
+            <span className="sr-only">Select date</span>
+          </div>
+        </Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content sideOffset={5} className={styles.content}>
+            <div className={styles['content-components']}>
+              <div ref={calendarRef}>
+                <Calendar
+                  mode="single"
+                  required
+                  captionLayout="dropdown"
+                  selected={date ?? undefined}
+                  month={month ?? undefined}
+                  onMonthChange={setMonth}
+                  onSelect={(selectedDate: Date) => {
+                    if (selectedDate) {
+                      const [hours, minutes] = time.split(':')
+                      selectedDate.setHours(Number.parseInt(hours), Number.parseInt(minutes))
+                      setDate(selectedDate)
+                      setMonth(selectedDate)
+                      handleOnDateChange(selectedDate)
+                    }
+                  }}
+                  startMonth={new Date(new Date().getFullYear() - yearsInPast, 0)}
+                  endMonth={new Date(new Date().getFullYear() + yearsInFuture, 0)}
+                  // TODO: add props
+                  // disabled={(date) =>
+                  //   Number(date) < Date.now() - 1000 * 60 * 60 * 24 ||
+                  //   Number(date) > Date.now() + 1000 * 60 * 60 * 24 * 30
+                  // }
+                />
+              </div>
+              {mode === 'datetime' && (
+                <div className={styles['time-picker-container']}>
+                  <ScrollArea className={styles['time-picker-scroll-area']}>
+                    <div className={styles['time-picker']}>
+                      {Array.from({ length: 96 }).map((_, i) => {
+                        const hour = Math.floor(i / 4)
+                          .toString()
+                          .padStart(2, '0')
+                        const minute = ((i % 4) * 15).toString().padStart(2, '0')
+                        const timeValue = `${hour}:${minute}`
+                        return (
+                          <Button
+                            key={i}
+                            size="sm"
+                            className={styles['time-picker-button']}
+                            variant="outlined"
+                            onClick={() => {
+                              setTime(timeValue)
+                              if (date) {
+                                const newDate = new Date(date.getTime())
+                                newDate.setHours(Number.parseInt(hour), Number.parseInt(minute), 0)
+                                setDate(newDate)
+                                handleOnDateChange(newDate)
+                              }
+                            }}
+                          >
+                            {timeValue}
+                          </Button>
+                        )
+                      })}
+                    </div>
+                  </ScrollArea>
+                </div>
+              )}
+            </div>
+            <div className={styles['status-and-actions']}>
+              <div className={styles['content-status']}>
+                {date ? `${format(date, 'PPPp')}` : 'No date selected'}
+              </div>
+              <div className={styles['content-actions']}>
+                <div>
+                  <Button
+                    variant="outlined"
+                    size="sm"
+                    className={styles['content-actions-button']}
+                    onClick={() => {
+                      const today = new Date()
+                      setDate(today)
+                      setMonth(today)
+                      handleOnDateChange(today)
+                    }}
+                  >
+                    Today
+                  </Button>
+                </div>
+                <div style={{ display: 'flex', gap: 'var(--spacing-3)' }}>
+                  <Button
+                    size="sm"
+                    intent="noeffect"
+                    className={styles['content-actions-button']}
+                    onClick={() => {
+                      setIsOpen(false)
+                    }}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    variant="outlined"
+                    size="sm"
+                    className={styles['content-actions-button']}
+                    onClick={() => {
+                      setIsOpen(false)
+                      handleOnDateChange(date)
+                    }}
+                  >
+                    Select
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+    </div>
+  )
+}

package/src/widgets/drawer/drawer-container.tsx

@@ -0,0 +1,26 @@
+'use client'
+import type * as React from 'react'
+
+import cx from 'classnames'
+
+import styles from './drawer.module.css'
+
+type DrawerContainerIntrinsicProps = React.JSX.IntrinsicElements['div']
+export interface DrawerContainerProps extends DrawerContainerIntrinsicProps {
+  className?: string
+}
+
+export function DrawerContainer({
+  ref,
+  children,
+  className,
+  ...rest
+}: DrawerContainerProps & {
+  ref?: React.RefObject<HTMLDivElement>
+}) {
+  return (
+    <div ref={ref} role="dialog" className={cx(styles['drawer-container'], className)} {...rest}>
+      {children}
+    </div>
+  )
+}