@infonomic/uikit 1.5.0 → 2.1.0

package/src/components/calendar/calendar.module.css

@@ -0,0 +1,315 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography, infonomic-components;
+
+@layer infonomic-components {
+  .day-picker {
+    padding: var(--spacing-3)
+  }
+
+  /* relative flex flex-col gap-4 sm:flex-row */
+  .months {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-4);
+  }
+
+  /* 'relative flex h-7 items-center justify-center', */
+  .months-caption {
+    position: relative;
+    display: flex;
+    height: 1.75rem;
+    /* 28px */
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* 'flex items-center justify-center gap-2 w-full',_dropdownsClassName */
+  .dropdowns {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-2);
+    width: 100%;
+  }
+
+  .select-trigger {
+    width: 100%;
+    height: 2.25rem;
+    /* 36px */
+    font-size: 0.875rem;
+    /* 14px */
+  }
+
+  .select-content {
+    z-index: 100;
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+
+  .select-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: center;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+    cursor: pointer;
+    border: none;
+    /* 14px */
+  }
+
+  .select-item:hover {
+    background-color: var(--gray-50);
+    color: var(--foreground);
+  }
+
+  .select-chevrons {
+    stroke: var(--primary-400);
+    opacity: 0.7
+  }
+
+  .scroll-area {
+    border: 1px solid var(--border-color);
+    height: 240px;
+    width: 120px;
+    background-color: var(--background);
+    text-align: center;
+  }
+
+  .disabled {
+    color: var(--muted);
+    opacity: 0.5;
+  }
+
+  /* 'invisible flex-1' */
+  /* This is used to hide the month when the calendar is in single mode */
+  /* and the month is not selected */
+  .hidden {
+    visibility: hidden;
+    flex: 1;
+  }
+
+
+  /* 'text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30', */
+  .outside {
+    color: var(--muted);
+    opacity: 0.5;
+  }
+
+  .outside[aria-selected='true'] {
+    color: var(--muted);
+    opacity: 0.3;
+  }
+
+  /* 'pt-3 text-sm' */
+  .footer {
+    padding-top: var(--spacing-3);
+    font-size: 0.875rem;
+    /* 14px */
+  }
+
+  .weekdays {
+    display: flex;
+  }
+
+  /* 'w-9 text-sm font-normal text-muted-foreground', */
+  .weekday {
+    width: 2.25rem;
+    /* 36px */
+    font-size: 0.875rem;
+    /* 14px */
+    font-weight: normal;
+    color: var(--muted);
+  }
+
+  /* 'truncate text-sm font-medium' */
+  .caption-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.875rem;
+    /* 14px */
+    font-weight: 500;
+  }
+
+  /* 'mx-auto mt-4' */
+  .month-grid {
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: var(--spacing-4);
+  }
+
+  /* 'mt-2 flex w-max items-start' */
+  .week {
+    margin-top: var(--spacing-2);
+    display: flex;
+    width: max-content;
+    align-items: flex-start;
+  }
+
+  /* 'flex size-9 flex-1 items-center justify-center p-0 text-sm', */
+  .day {
+    display: flex;
+    width: 2.25rem;
+    /* 36px */
+    height: 2.25rem;
+    /* 36px */
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    font-size: 0.875rem;
+    /* 14px */
+  }
+
+  /* '[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground', */
+  .day>button {
+    color: var(--foreground);
+  }
+
+  /* '[&>button]:bg-accent [&>button]:text-accent-foreground', */
+  .today>button {
+    /* background-color: var(--gray-50); */
+    border: solid 1px var(--primary-300);
+    color: var(--foreground);
+  }
+
+  .day>button:hover,
+  .day-selected>button {
+    background-color: var(--primary-400);
+    color: white;
+  }
+
+  /* 'size-9 rounded-md p-0 font-normal transition-none aria-selected:opacity-100', */
+  .day-button {
+    width: 2.25rem;
+    /* 36px */
+    height: 2.25rem;
+    /* 36px */
+    border-radius: var(--border-radius-md);
+    padding: 0;
+    font-weight: normal;
+    transition: none;
+  }
+
+  .day-button[aria-selected='true'] {
+    opacity: 1;
+  }
+
+  /* 'bg-accent [&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground' */
+  .button-range {
+    background-color: var(--gray-100);
+    color: var(--foreground);
+  }
+
+  .button-range>button {
+    background-color: var(--primary-400);
+    color: white;
+  }
+
+  .button-range>button:hover {
+    background-color: var(--primary-400);
+    color: var(--foreground);
+  }
+
+  .range-start {
+    border-top-left-radius: var(--border-radius-md);
+    border-bottom-left-radius: var(--border-radius-md);
+  }
+
+  .range-end {
+    border-top-right-radius: var(--border-radius-md);
+    border-bottom-right-radius: var(--border-radius-md);
+  }
+
+  /* 'bg-accent !text-foreground [&>button]:bg-transparent [&>button]:!text-foreground [&>button]:hover:bg-transparent [&>button]:hover:!text-foreground', */
+  .range-middle {
+    background-color: var(--gray-50);
+    color: var(--foreground);
+  }
+
+  .range-middle>button,
+  .range-middle>button:hover {
+    background-color: transparent;
+    color: var(--foreground);
+  }
+
+  @media (min-width: 640px) {
+    .months {
+      flex-direction: row;
+    }
+  }
+
+  /* 🌙 Dark via `.dark` class. We rely on the 
+  * consuming application to detect a user's preferred
+  * color scheme - either by header or cookie, and set
+  * a root html class accordingly
+  */
+  :global(.dark) {
+    .select-content {
+      background-color: var(--canvas-800);
+      color: var(--foreground);
+    }
+
+    .scroll-area {
+      background-color: var(--canvas-800);
+      color: var(--foreground);
+    }
+
+    .select-item:hover {
+      background-color: var(--primary-400);
+      color: var(--foreground);
+    }
+
+    .select-chevrons {
+      stroke: var(--primary-200);
+      opacity: 0.7;
+    }
+
+    .footer {
+      color: var(--muted);
+    }
+
+    .day>button {
+      color: var(--foreground);
+    }
+
+    .day>button:hover,
+    .day-selected>button {
+      background-color: var(--primary-400);
+      color: var(--foreground);
+    }
+
+    /* '[&>button]:bg-accent [&>button]:text-accent-foreground', */
+    .today>button {
+      /* background-color: var(--canvas-700); */
+      border: solid 1px var(--primary-300);
+      color: var(--foreground);
+    }
+
+    .button-range {
+      background-color: var(--canvas-700);
+      color: var(--foreground);
+    }
+
+    .button-range>button {
+      background-color: var(--primary-400);
+      color: var(--foreground);
+    }
+
+    .button-range>button:hover {
+      background-color: var(--primary-400);
+      color: var(--foreground);
+    }
+
+    .range-middle {
+      background-color: var(--canvas-700);
+      color: var(--foreground);
+    }
+
+    .range-middle>button {
+      background-color: var(--canvas-700);
+      color: var(--foreground);
+    }
+  }
+}

package/src/components/calendar/calendar.stories.tsx

@@ -0,0 +1,139 @@
+import type { Meta } from '@storybook/react-vite'
+import { format } from 'date-fns'
+import { useRef, useState } from 'react'
+import type { DateRange } from 'react-day-picker'
+import { Button } from '../button/button.js'
+import { Calendar as CalendarComponent } from './calendar.js'
+
+const meta: Meta<typeof CalendarComponent> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Components/Calendar',
+  component: CalendarComponent,
+}
+
+export default meta
+
+export const Calendar = (): React.JSX.Element => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [time, setTime] = useState<string>('05:00')
+  const [date, setDate] = useState<Date>(new Date())
+  const [month, setMonth] = useState<Date>(date)
+
+  const calendarRef = useRef<HTMLDivElement | null>(null)
+
+  return (
+    <div style={{ height: '100vh' }}>
+      <div ref={calendarRef} style={{ position: 'relative', width: 'fit-content', margin: 'auto' }}>
+        <CalendarComponent
+          required
+          mode="single"
+          captionLayout="dropdown"
+          selected={date}
+          month={month}
+          onMonthChange={setMonth}
+          onSelect={(selectedDate: Date) => {
+            if (selectedDate) {
+              const [hours, minutes] = time.split(':')
+              selectedDate.setHours(Number.parseInt(hours), Number.parseInt(minutes))
+              setDate(selectedDate)
+              setMonth(selectedDate)
+            }
+          }}
+          onDayClick={() => setIsOpen(false)}
+          // fromYear={2000}
+          // toYear={new Date().getFullYear()}
+          // disabled={(date: Date) =>
+          //   Number(date) < Date.now() - 1000 * 60 * 60 * 24 ||
+          //   Number(date) > Date.now() + 1000 * 60 * 60 * 24 * 30
+          // }
+        />
+        <div style={{ paddingLeft: '1rem', paddingTop: '1rem' }}>
+          {date ? `${format(date, 'PPPp')}` : 'No date selected'}
+        </div>
+        <div style={{ paddingLeft: '1rem', paddingTop: '1rem' }}>
+          <Button
+            size="sm"
+            intent="noeffect"
+            className="mt-2"
+            onClick={() => {
+              const today = new Date()
+              setDate(today)
+              setMonth(today)
+            }}
+          >
+            Today
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const Multiple = (): React.JSX.Element => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [dates, setDates] = useState<Date[] | undefined>([new Date()])
+
+  const calendarRef = useRef<HTMLDivElement | null>(null)
+
+  return (
+    <div style={{ height: '100vh' }}>
+      <div ref={calendarRef} style={{ position: 'relative', width: 'fit-content', margin: 'auto' }}>
+        <CalendarComponent
+          required
+          mode="multiple"
+          captionLayout="dropdown"
+          selected={dates}
+          onSelect={(selectedDates: Date[]) => {
+            if (selectedDates) {
+              // selectedDate.setHours(Number.parseInt(hours), Number.parseInt(minutes))
+              setDates(selectedDates)
+            }
+          }}
+          onDayClick={() => setIsOpen(false)}
+          // fromYear={2000}
+          // toYear={new Date().getFullYear()}
+          // disabled={(date: Date) =>
+          //   Number(date) < Date.now() - 1000 * 60 * 60 * 24 ||
+          //   Number(date) > Date.now() + 1000 * 60 * 60 * 24 * 30
+          // }
+        />
+      </div>
+    </div>
+  )
+}
+
+export const Range = (): React.JSX.Element => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [dateRange, setDateRange] = useState<DateRange | undefined>(undefined)
+
+  const calendarRef = useRef<HTMLDivElement | null>(null)
+
+  return (
+    <div style={{ height: '100vh' }}>
+      <div ref={calendarRef} style={{ position: 'relative', width: 'fit-content', margin: 'auto' }}>
+        <CalendarComponent
+          required
+          mode="range"
+          captionLayout="dropdown"
+          selected={dateRange}
+          onSelect={(selectedDateRange: DateRange) => {
+            if (selectedDateRange) {
+              // selectedDate.setHours(Number.parseInt(hours), Number.parseInt(minutes))
+              setDateRange(selectedDateRange)
+            }
+          }}
+          onDayClick={() => setIsOpen(false)}
+          // fromYear={2000}
+          // toYear={new Date().getFullYear()}
+          // disabled={(date: Date) =>
+          //   Number(date) < Date.now() - 1000 * 60 * 60 * 24 ||
+          //   Number(date) > Date.now() + 1000 * 60 * 60 * 24 * 30
+          // }
+        />
+      </div>
+    </div>
+  )
+}

package/src/components/calendar/calendar.tsx

@@ -0,0 +1,173 @@
+'use client'
+/**
+ * @file Calendar component using react-day-picker and radix-ui
+ * @see https://github.com/Maliksidk19/shadcn-datetime-picker/
+ * 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 { Select as SelectPrimitive } from 'radix-ui'
+import * as React from 'react'
+import {
+  DayPicker,
+  type DayPickerProps,
+  type Dropdown as DropDownDayPicker,
+} from 'react-day-picker'
+import { ChevronsUpDown } from '../../icons/chevrons-up-down.js'
+import { Button } from '../button/button.js'
+import { ScrollArea } from '../scroll-area/scroll-area.js'
+
+import styles from './calendar.module.css'
+
+export type CalendarProps = DayPickerProps & {
+  ref?: React.RefObject<HTMLDivElement>
+  captionLabelClassName?: string
+  dayClassName?: string
+  dayButtonClassName?: string
+  dropdownsClassName?: string
+  footerClassName?: string
+  monthClassName?: string
+  monthCaptionClassName?: string
+  monthGridClassName?: string
+  monthsClassName?: string
+  weekClassName?: string
+  weekdayClassName?: string
+  weekdaysClassName?: string
+  rangeEndClassName?: string
+  rangeMiddleClassName?: string
+  rangeStartClassName?: string
+  selectedClassName?: string
+  disabledClassName?: string
+  hiddenClassName?: string
+  outsideClassName?: string
+  todayClassName?: string
+  selectTriggerClassName?: string
+}
+
+export function Calendar({
+  ref,
+  className,
+  classNames,
+  hideNavigation,
+  showOutsideDays = true,
+  components: customComponents,
+  ...props
+}: CalendarProps) {
+  const _monthsClassName = cx(styles.months, props.monthsClassName)
+  const _monthCaptionClassName = cx(styles['months-caption'], props.monthCaptionClassName)
+  const _dropdownsClassName = cx(styles.dropdowns, props.dropdownsClassName)
+  const _footerClassName = cx(styles.footer, props.footerClassName)
+  const _weekdaysClassName = cx(styles.weekdays, props.weekdaysClassName)
+  const _weekdayClassName = cx(styles.weekday, props.weekdayClassName)
+  const _captionLabelClassName = cx(styles['caption-label'], props.captionLabelClassName)
+
+  const _monthGridClassName = cx(styles['month-grid'], props.monthGridClassName)
+  const _weekClassName = cx(styles.week, props.weekClassName)
+  const _dayClassName = cx(styles.day, props.dayClassName)
+  const _dayButtonClassName = cx(styles['day-button'], props.dayButtonClassName)
+
+  const buttonRangeClassName = cx(styles['button-range'])
+  const _rangeStartClassName = cx(
+    buttonRangeClassName,
+    styles['range-start'],
+    props.rangeStartClassName
+  )
+  const _rangeEndClassName = cx(buttonRangeClassName, styles['range-end'], props.rangeEndClassName)
+  const _rangeMiddleClassName = cx(styles['range-middle'], props.rangeMiddleClassName)
+  const _selectedClassName = cx(styles['day-selected'], props.selectedClassName)
+  const _todayClassName = cx(styles.today, props.todayClassName)
+  const _outsideClassName = cx(styles.outside, props.outsideClassName)
+  const _disabledClassName = cx(styles.disabled, props.disabledClassName)
+  const _hiddenClassName = cx(styles.hidden, props.hiddenClassName)
+
+  const Dropdown = React.useCallback(
+    ({ value, onChange, options }: React.ComponentProps<typeof DropDownDayPicker>) => {
+      const selected = options?.find((option) => option.value === value)
+      const handleChange = (value: string) => {
+        const changeEvent = {
+          target: { value },
+        } as React.ChangeEvent<HTMLSelectElement>
+        onChange?.(changeEvent)
+      }
+      return (
+        <SelectPrimitive.Root
+          value={value?.toString()}
+          onValueChange={(value) => {
+            handleChange(value)
+          }}
+        >
+          <SelectPrimitive.Trigger asChild>
+            <Button
+              variant="outlined"
+              size="sm"
+              className={cx(styles['select-trigger'], props.selectTriggerClassName)}
+            >
+              <SelectPrimitive.Value>{selected?.label}</SelectPrimitive.Value>
+              <ChevronsUpDown height="18px" width="18px" svgClassName={styles['select-chevrons']} />
+            </Button>
+          </SelectPrimitive.Trigger>
+          <SelectPrimitive.Content
+            className={styles['select-content']}
+            position="popper"
+            sideOffset={4}
+            align="center"
+          >
+            <ScrollArea className={cx(styles['scroll-area'])}>
+              {options?.map(({ value, label, disabled }, id) => (
+                <SelectPrimitive.Item
+                  className={styles['select-item']}
+                  key={`${value}-${id}`}
+                  value={value?.toString()}
+                  disabled={disabled}
+                >
+                  {label}
+                </SelectPrimitive.Item>
+              ))}
+            </ScrollArea>
+          </SelectPrimitive.Content>
+        </SelectPrimitive.Root>
+      )
+    },
+    [props.selectTriggerClassName]
+  )
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      hideNavigation={true} // Ensure navigation is hidden
+      className={cx(styles['day-picker'], className)}
+      classNames={{
+        caption_label: _captionLabelClassName,
+        day: _dayClassName,
+        day_button: _dayButtonClassName,
+        dropdowns: _dropdownsClassName,
+        footer: _footerClassName,
+        month: props.monthClassName,
+        month_caption: _monthCaptionClassName,
+        month_grid: _monthGridClassName,
+        months: _monthsClassName,
+        week: _weekClassName,
+        weekday: _weekdayClassName,
+        weekdays: _weekdaysClassName,
+        range_end: _rangeEndClassName,
+        range_middle: _rangeMiddleClassName,
+        range_start: _rangeStartClassName,
+        selected: _selectedClassName,
+        disabled: _disabledClassName,
+        hidden: _hiddenClassName,
+        outside: _outsideClassName,
+        today: _todayClassName,
+        nav: 'hidden', // This hides the navigation (chevrons)
+        ...classNames,
+      }}
+      components={{
+        Dropdown,
+        ...customComponents,
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = 'Calendar'

package/src/components/card/card-content.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+}
+
+import styles from './card.module.css'
+
+const { class: className, ...rest } = Astro.props as Props
+---
+
+<div class:list={[styles.cardContent, className]} {...rest}>
+  <slot />
+</div>

package/src/components/card/card-description.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+}
+
+import styles from './card.module.css'
+
+const { class: className, ...rest } = Astro.props as Props
+---
+
+<div class:list={[styles.cardDescription, className]} {...rest}>
+  <slot />
+</div>

package/src/components/card/card-footer.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+}
+
+import styles from './card.module.css'
+
+const { class: className, ...rest } = Astro.props as Props
+---
+
+<div class:list={[styles.cardFooter, className]} {...rest}>
+  <slot />
+</div>

package/src/components/card/card-header.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+}
+
+import styles from './card.module.css'
+
+const { class: className, ...rest } = Astro.props as Props
+---
+
+<div class:list={[styles.cardHeader, className]} {...rest}>
+  <slot />
+</div>

package/src/components/card/card-title.astro

@@ -0,0 +1,14 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+}
+
+import styles from './card.module.css'
+
+const { class: className, ...rest } = Astro.props as Props
+---
+
+<div class:list={[styles.cardTitle, className]} {...rest}>
+  <slot />
+</div>