@byline/ui 0.9.3 → 0.10.1

package/src/styles/utils/utils.css

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

package/src/uikit.ts

@@ -0,0 +1,116 @@
+// ---------------------------------------------------------------------
+// Synced from @infonomic/uikit (src/react.ts). Do not edit by hand.
+// To change anything here, edit upstream and re-run pnpm sync:uikit.
+// ---------------------------------------------------------------------
+
+/**
+ * NOTE: We put a .js ending on imports here to satisfy
+ * TS / dist output
+ */
+
+// Used for creating theme test pages in client applications
+export * from './components/@types/shared.js'
+export * from './components/accordion/accordion.js'
+export * from './components/animation/fade-in-lift.js'
+export * from './components/avatar/avatar.js'
+export * from './components/badge/badge.js'
+// Used for creating theme test pages in client applications
+export { variant as buttonVariant } from './components/button/@types/button.js'
+export * from './components/button/button.js'
+export * from './components/button/button-group.js'
+export * from './components/button/combo-button.js'
+export * from './components/button/control-buttons.js'
+export * from './components/button/copy-button.js'
+export * from './components/button/icon-button.js'
+export * from './components/card/card.js'
+export * from './components/chips/chip.js'
+export * from './components/container/container.js'
+export * from './components/dropdown/dropdown.js'
+export * from './components/hamburger/hamburger.js'
+export * from './components/inputs/autocomplete.jsx'
+export * from './components/inputs/calendar.jsx'
+export * from './components/inputs/checkbox.jsx'
+export * from './components/inputs/checkbox-group.jsx'
+export * from './components/inputs/error-text.jsx'
+export * from './components/inputs/errors.jsx'
+export * from './components/inputs/help-text.jsx'
+export * from './components/inputs/input.jsx'
+export * from './components/inputs/input-adornment.jsx'
+export * from './components/inputs/input-password.jsx'
+export * from './components/inputs/label.jsx'
+export * from './components/inputs/radio-group.jsx'
+export * from './components/inputs/select.jsx'
+export * from './components/inputs/text-area.jsx'
+export * from './components/inputs/utils.js'
+export * from './components/notifications/alert.js'
+export * from './components/notifications/toast.js'
+export * from './components/pager/pagination.js'
+export * from './components/scroll-area/scroll-area.js'
+export * from './components/scroll-to-top/scroll-to-top.js'
+export * from './components/section/section.js'
+export * from './components/shimmer/shimmer.js'
+export * from './components/table/table.js'
+export * from './components/tabs/tabs.js'
+export * from './components/tooltip/tooltip.js'
+export * from './icons/activity-icon.js'
+export * from './icons/ai-icon.js'
+export * from './icons/calendar-icon.js'
+export * from './icons/check-icon.js'
+export * from './icons/chevron-down-icon.js'
+export * from './icons/chevron-left-double-icon.js'
+export * from './icons/chevron-left-icon.js'
+export * from './icons/chevron-right-double-icon.js'
+export * from './icons/chevron-right-icon.js'
+export * from './icons/chevrons-up-down.js'
+export * from './icons/close-icon.js'
+export * from './icons/copy-icon.js'
+export * from './icons/danger-icon.js'
+export * from './icons/dashboard-icon.js'
+export * from './icons/delete-icon.js'
+export * from './icons/document-icon.js'
+export * from './icons/download-icon.js'
+export * from './icons/edit-icon.js'
+export * from './icons/ellipsis-icon.js'
+export * from './icons/email-icon.js'
+export * from './icons/external-link-icon.js'
+export * from './icons/eye-closed-icon.js'
+export * from './icons/eye-open-icon.js'
+export * from './icons/github-icon.js'
+export * from './icons/globe-icon.js'
+export * from './icons/google-icon.js'
+export * from './icons/gripper-vertical-icon.js'
+export * from './icons/history-icon.js'
+export * from './icons/home-icon.js'
+export * from './icons/icon-element.js'
+export * from './icons/info-icon.js'
+export * from './icons/infonomic-icon.js'
+export * from './icons/light-icon.js'
+export * from './icons/location-pin-icon.js'
+export * from './icons/moon-icon.js'
+export * from './icons/plus-icon.js'
+export * from './icons/primary-icon.js'
+export * from './icons/refresh-icon.js'
+export * from './icons/return-icon.js'
+export * from './icons/roles-icon.js'
+export * from './icons/search-icon.js'
+export * from './icons/search-menu-icon.js'
+export * from './icons/settings-gear-icon.js'
+export * from './icons/settings-sliders-icon.js'
+export * from './icons/sign-out-icon.js'
+export * from './icons/stop-icon.js'
+export * from './icons/stopwatch-icon.js'
+export * from './icons/success-icon.js'
+export * from './icons/user-icon.js'
+export * from './icons/users-icon.js'
+export * from './icons/wallet-icon.js'
+export * from './icons/warning-icon.js'
+export * from './icons/x-icon.js'
+export * from './loaders/ellipses.js'
+export * from './loaders/ring.js'
+export * from './loaders/spinner.js'
+export * from './widgets/datepicker/datepicker.js'
+export * from './widgets/drawer/drawer.js'
+export * from './widgets/drawer/drawer-context.js'
+export * from './widgets/modal/modal.js'
+export * from './widgets/search/search.js'
+export * from './widgets/timeline/timeline.js'

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,13 @@
+export default function objectsToArray(object: any): any[] {
+  const result: any[] = []
+
+  Object.values(object).forEach((value) => {
+    if (typeof value === 'string') {
+      result.push(value)
+    } else if (typeof value === 'object' && !Array.isArray(value) && value !== null) {
+      result.push(...objectsToArray(value))
+    }
+  })
+
+  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, ElementType, 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,207 @@
+@layer byline-base, byline-utilities, byline-theme, byline-components;
+
+@layer byline-components {
+  .container,
+  :global(.infonomic-datepicker-container) {
+    position: relative;
+  }
+
+  .input,
+  .input-wrapper,
+  :global(.infonomic-datepicker-input),
+  :global(.infonomic-datepicker-input-wrapper) {
+    width: 100%;
+  }
+
+  .content,
+  :global(.infonomic-datepicker-content) {
+    width: 100%;
+    z-index: 50;
+    border-radius: 4px;
+    padding-top: var(--spacing-16);
+    padding-bottom: var(--spacing-8);
+    padding-left: var(--spacing-8);
+    padding-right: var(--spacing-4);
+    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-open][data-side="top"] {
+      animation-name: slideDownAndFade;
+    }
+
+    &[data-open][data-side="right"] {
+      animation-name: slideLeftAndFade;
+    }
+
+    &[data-open][data-side="bottom"] {
+      animation-name: slideUpAndFade;
+    }
+
+    &[data-open][data-side="left"] {
+      animation-name: slideRightAndFade;
+    }
+  }
+
+  :global(.dark),
+  :global([data-theme="dark"]) {
+    .content {
+      background: var(--canvas-800);
+    }
+  }
+
+  .content-components,
+  :global(.infonomic-datepicker-content-components) {
+    display: flex;
+    width: 100%;
+    gap: var(--spacing-8);
+  }
+
+  .status-and-actions,
+  :global(.infonomic-datepicker-status-and-actions) {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+
+  .content-status,
+  :global(.infonomic-datepicker-content-status) {
+    display: flex;
+    align-items: center;
+    padding-left: var(--spacing-16);
+    padding-right: var(--spacing-8);
+    font-size: var(--font-size-sm);
+    color: var(--foreground);
+    width: 100%;
+  }
+
+  .content-actions,
+  :global(.infonomic-datepicker-content-actions) {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: var(--spacing-12);
+    padding-left: var(--spacing-16);
+    padding-right: var(--spacing-6);
+    gap: var(--spacing-8);
+    width: 100%;
+  }
+
+  .content-actions-button,
+  :global(.infonomic-datepicker-content-actions-button) {
+    /* min-width: 100px; */
+    --ring-color: var(--violet-7);
+  }
+
+  .arrow,
+  :global(.infonomic-datepicker-arrow) {
+    fill: var(--gray-50);
+  }
+
+  .close,
+  :global(.infonomic-datepicker-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(--primary-400);
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 2px var(--primary-600);
+    }
+  }
+
+  .time-picker-container,
+  :global(.infonomic-datepicker-time-picker-container) {
+    width: 80px;
+    margin: 0.6rem 0.5rem 1rem 0;
+  }
+
+  .time-picker-scroll-area,
+  :global(.infonomic-datepicker-time-picker-scroll-area) {
+    height: 280px;
+    padding-right: var(--spacing-16);
+  }
+
+  .time-picker,
+  :global(.infonomic-datepicker-time-picker) {
+    display: flex;
+    padding-left: var(--spacing-4);
+    padding-right: var(--spacing-4);
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .time-picker-button,
+  :global(.infonomic-datepicker-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);
+    }
+  }
+}