@infonomic/uikit 5.16.0 → 5.18.0

package/src/styles/typography/default.stories.tsx

@@ -2,40 +2,38 @@ import type { Meta } from '@storybook/react-vite'
 
 export const Default = (): React.JSX.Element => {
   return (
-    <>
-      <div style={{ marginBottom: '48px' }}>
-        <div style={{ maxWidth: '700px', margin: '2rem auto' }} className="prose">
-          <h1>Heading 1 - With Some More Text to Test on Mobile</h1>
-          <p>
-            This is a paragraph of text that we&apos;ll use for our typography storybook page. This
-            is a paragraph of text that we&apos;ll use for our typography storybook page. This is a
-            paragraph of text that we&apos;ll use for our typography storybook page. This is a
-            paragraph of text that we&apos;ll use for our typography storybook page.
-          </p>
-          <h2>Heading 2 - With Some More Text to Test on Mobile</h2>
-          <p>
-            This is a paragraph of text that we&apos;ll use for our typography storybook page. This
-            is a paragraph of text that we&apos;ll use for our typography storybook page. This is a
-            paragraph of text that we&apos;ll use for our typography storybook page. This is a
-            paragraph of text that we&apos;ll use for our typography storybook page.
-          </p>
-          <h3>Heading 3 - With Some More Text to Test on Mobile</h3>
-          <p>
-            This is a paragraph of text that we&apos;ll use for our typography storybook page. This
-            is a paragraph of text that we&apos;ll use for our typography storybook page. This is a
-            paragraph of text that we&apos;ll use for our typography storybook page. This is a
-            paragraph of text that we&apos;ll use for our typography storybook page.
-          </p>
-          <h4>Heading 4 - With Some More Text to Test on Mobile</h4>
-          <p>
-            This is a paragraph of text that we&apos;ll use for our typography storybook page. This
-            is a paragraph of text that we&apos;ll use for our typography storybook page. This is a
-            paragraph of text that we&apos;ll use for our typography storybook page. This is a
-            paragraph of text that we&apos;ll use for our typography storybook page.
-          </p>
-        </div>
+    <div style={{ marginBottom: '48px' }}>
+      <div style={{ maxWidth: '700px', margin: '2rem auto' }} className="prose">
+        <h1>Heading 1 - With Some More Text to Test on Mobile</h1>
+        <p>
+          This is a paragraph of text that we&apos;ll use for our typography storybook page. This is
+          a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page.
+        </p>
+        <h2>Heading 2 - With Some More Text to Test on Mobile</h2>
+        <p>
+          This is a paragraph of text that we&apos;ll use for our typography storybook page. This is
+          a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page.
+        </p>
+        <h3>Heading 3 - With Some More Text to Test on Mobile</h3>
+        <p>
+          This is a paragraph of text that we&apos;ll use for our typography storybook page. This is
+          a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page.
+        </p>
+        <h4>Heading 4 - With Some More Text to Test on Mobile</h4>
+        <p>
+          This is a paragraph of text that we&apos;ll use for our typography storybook page. This is
+          a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page.
+        </p>
       </div>
-    </>
+    </div>
   )
 }
 

package/src/styles/typography/fonts.css

@@ -1,15 +1,18 @@
 @layer infonomic-typography {
   :root {
-    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-sans:
+      "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+      "Segoe UI Symbol", "Noto Color Emoji";
 
-    --font-display: "Roboto", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-display:
+      "Roboto", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+      "Segoe UI Symbol", "Noto Color Emoji";
 
     --font-serif: "Merriweather", Georgia, Cambria, "Times New Roman", Times, serif;
 
-    --font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-      "Liberation Mono", "Courier New", monospace;
+    --font-mono:
+      "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
   }
 
   .sans {
@@ -27,4 +30,4 @@
   .display {
     font-family: var(--font-display);
   }
-}
+}

package/src/styles/typography/lists.stories.tsx

@@ -2,39 +2,37 @@ import type { Meta } from '@storybook/react-vite'
 
 export const Lists = (): React.JSX.Element => {
   return (
-    <>
-      <div style={{ marginBottom: '48px' }}>
-        <div style={{ maxWidth: '700px', margin: '2rem auto' }} className="prose">
-          <h1>Lists</h1>
-          <p>
-            This is a paragraph of text that we&apos;ll use for our typography storybook page. This
-            is a paragraph of text that we&apos;ll use for our typography storybook page. This is a
-            paragraph of text that we&apos;ll use for our typography storybook page. This is a
-            paragraph of text that we&apos;ll use for our typography storybook page.
-          </p>
-          <ol>
-            <li>One - item in a list here</li>
-            <li>Two - item in a list here</li>
-            <li>Three - item in a list here</li>
-            <li>Four - item in a list here</li>
-            <li>Five - item in a list here</li>
-          </ol>
-          <p>
-            This is a paragraph of text that we&apos;ll use for our typography storybook page. This
-            is a paragraph of text that we&apos;ll use for our typography storybook page. This is a
-            paragraph of text that we&apos;ll use for our typography storybook page. This is a
-            paragraph of text that we&apos;ll use for our typography storybook page.
-          </p>
-          <ul>
-            <li>Item - item in a list here</li>
-            <li>Item - item in a list here</li>
-            <li>Item - item in a list here</li>
-            <li>Item - item in a list here</li>
-            <li>Item - item in a list here</li>
-          </ul>
-        </div>
+    <div style={{ marginBottom: '48px' }}>
+      <div style={{ maxWidth: '700px', margin: '2rem auto' }} className="prose">
+        <h1>Lists</h1>
+        <p>
+          This is a paragraph of text that we&apos;ll use for our typography storybook page. This is
+          a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page.
+        </p>
+        <ol>
+          <li>One - item in a list here</li>
+          <li>Two - item in a list here</li>
+          <li>Three - item in a list here</li>
+          <li>Four - item in a list here</li>
+          <li>Five - item in a list here</li>
+        </ol>
+        <p>
+          This is a paragraph of text that we&apos;ll use for our typography storybook page. This is
+          a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page.
+        </p>
+        <ul>
+          <li>Item - item in a list here</li>
+          <li>Item - item in a list here</li>
+          <li>Item - item in a list here</li>
+          <li>Item - item in a list here</li>
+          <li>Item - item in a list here</li>
+        </ul>
       </div>
-    </>
+    </div>
   )
 }
 

package/src/styles/typography/prose.css

@@ -148,7 +148,6 @@
     }
   }
 
-
   .prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
     font-size: 2.5rem;
     font-weight: 600;
@@ -308,7 +307,7 @@
     margin-bottom: 1.3rem;
     margin-right: 2rem;
     /* Font size must be em - so that it changes in articles or text that has dynamic font sizes on smaller screens */
-    font-size: 1.2em; 
+    font-size: 1.2em;
     line-height: 1.3;
     padding-inline-start: 1rem;
     border-inline-start-width: 0.25rem;
@@ -323,11 +322,17 @@
     }
   }
 
-  .prose :where(blockquote p:first-of-type):not( :where([class~="not-prose"], [class~="not-prose"] *))::before {
+  .prose
+    :where(blockquote p:first-of-type):not(
+      :where([class~="not-prose"], [class~="not-prose"] *)
+    )::before {
     content: open-quote;
   }
 
-  .prose :where(blockquote p:last-of-type):not( :where([class~="not-prose"], [class~="not-prose"] *))::after {
+  .prose
+    :where(blockquote p:last-of-type):not(
+      :where([class~="not-prose"], [class~="not-prose"] *)
+    )::after {
     content: close-quote;
   }
 
@@ -351,7 +356,9 @@
     font-weight: 500;
     font-family: inherit;
     color: var(--prose-kbd);
-    box-shadow: 0 0 0 1px rgb(var(--prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--prose-kbd-shadows) / 10%);
+    box-shadow:
+      0 0 0 1px rgb(var(--prose-kbd-shadows) / 10%),
+      0 3px 0 rgb(var(--prose-kbd-shadows) / 10%);
     font-size: 0.875em;
     border-radius: 0.3125rem;
     padding-top: 0.1875em;
@@ -396,7 +403,7 @@
     padding: 0;
     font-weight: inherit;
     color: inherit;
-    font-size: 1em !important;
+    font-size: 1em;
     font-family: inherit;
     line-height: inherit;
     padding-left: 0;
@@ -404,4 +411,4 @@
     padding-top: 0;
     padding-bottom: 0;
   }
-}
+}

package/src/styles/typography/quote.stories.tsx

@@ -2,26 +2,27 @@ import type { Meta } from '@storybook/react-vite'
 
 export const Quote = (): React.JSX.Element => {
   return (
-    <>
-      <div style={{ marginBottom: '48px' }}>
-        <div style={{ maxWidth: '700px', margin: '2rem auto' }} className="prose">
-          <h1>Heading 1</h1>
-          <p>
-            This is a paragraph of text that we&apos;ll use for our typography storybook page. This
-            is a paragraph of text that we&apos;ll use for our typography storybook page. This is a
-            paragraph of text that we&apos;ll use for our typography storybook page. This is a
-            paragraph of text that we&apos;ll use for our typography storybook page.
-          </p>
-          <blockquote>This is some text inside a blockquote. We&apos;ll make this a little longer to see how it looks when it wraps.</blockquote>
-          <p>
-            This is a paragraph of text that we&apos;ll use for our typography storybook page. This
-            is a paragraph of text that we&apos;ll use for our typography storybook page. This is a
-            paragraph of text that we&apos;ll use for our typography storybook page. This is a
-            paragraph of text that we&apos;ll use for our typography storybook page.
-          </p>
-        </div>
+    <div style={{ marginBottom: '48px' }}>
+      <div style={{ maxWidth: '700px', margin: '2rem auto' }} className="prose">
+        <h1>Heading 1</h1>
+        <p>
+          This is a paragraph of text that we&apos;ll use for our typography storybook page. This is
+          a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page.
+        </p>
+        <blockquote>
+          This is some text inside a blockquote. We&apos;ll make this a little longer to see how it
+          looks when it wraps.
+        </blockquote>
+        <p>
+          This is a paragraph of text that we&apos;ll use for our typography storybook page. This is
+          a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page. This is a
+          paragraph of text that we&apos;ll use for our typography storybook page.
+        </p>
       </div>
-    </>
+    </div>
   )
 }
 

package/src/styles/typography.css

@@ -21,4 +21,4 @@
   .font-mono {
     font-family: var(--font-mono);
   }
-}
+}

package/src/styles/utils/utility-classes.css

@@ -1,12 +1,11 @@
 /**
  * UTILITY CLASSES
- * 
- * A simple utility class collection. NOT designed as a 
- * replacement for Tailwind - but useful for small or simple 
+ *
+ * A simple utility class collection. NOT designed as a
+ * replacement for Tailwind - but useful for small or simple
  * projects as well as uikit development.
  */
 @layer infonomic-utilities {
-
   .sr-only {
     position: absolute;
     width: 1px;
@@ -34,7 +33,7 @@
   .text {
     color: var(--text);
   }
-  
+
   .headings {
     color: var(--headings);
   }
@@ -58,7 +57,7 @@
   }
 
   .dark .external-link::after,
-   [data-theme="dark"] .external-link::after {
+  [data-theme="dark"] .external-link::after {
     background-image: url("/external-link-dark.svg");
   }
 
@@ -132,7 +131,6 @@
     color: var(--text-on-danger);
   }
 
-
   /* ========================================
      TYPOGRAPHY UTILITIES
   ======================================== */
@@ -953,7 +951,6 @@
     gap: var(--gap-12);
   }
 
-
   .gap-16 {
     gap: var(--gap-16);
   }
@@ -1041,7 +1038,6 @@
   }
 
   @media (min-width: 48rem) {
-
     .md\:grid {
       display: grid;
     }
@@ -1117,19 +1113,19 @@
   .border {
     border-width: var(--border-width-normal);
     border-style: var(--border-style-solid);
-    border-color: var(--border-color)
+    border-color: var(--border-color);
   }
 
   .border-thin {
     border-width: var(--border-width-thin);
     border-style: var(--border-style-solid);
-    border-color: var(--border-color)
+    border-color: var(--border-color);
   }
 
   .border-thick {
     border-width: var(--border-width-thick);
     border-style: var(--border-style-solid);
-    border-color: var(--border-color)
+    border-color: var(--border-color);
   }
 
   .rounded-none {
@@ -1319,7 +1315,6 @@
     .md\:shadow-xl {
       box-shadow: var(--shadow-xl);
     }
-
   }
 
   /* ========================================
@@ -1407,4 +1402,4 @@
     --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--accent-400);
     box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
   }
-}
+}

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

@@ -4,12 +4,12 @@
  * .storybook/preview.tsx
  */
 
-import { createContext, useContext, useMemo } from 'react'
 import type { ReactNode } from 'react'
+import { createContext, useContext, useMemo } from 'react'
 
 enum Theme {
   DARK = 'dark',
-  LIGHT = 'light'
+  LIGHT = 'light',
 }
 
 // ThemeContext

package/src/utils/externalLinkProps.ts

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

package/src/utils/objectsToArray.ts

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

package/src/utils/polymorphic.ts

@@ -1,4 +1,4 @@
-import { type ComponentProps, type ElementType, type ReactElement } from 'react'
+import type { ComponentProps, ElementType, ReactElement } from 'react'
 
 /**
  * @see https://www.benmvp.com/blog/polymorphic-react-components-typescript/

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

@@ -25,7 +25,7 @@
     will-change: transform, opacity;
 
     &:focus {
-      box-shadow: var(--shadow-md)
+      box-shadow: var(--shadow-md);
     }
 
     &[data-state="open"][data-side="top"] {
@@ -55,7 +55,6 @@
     gap: var(--spacing-8);
   }
 
-
   .status-and-actions {
     display: flex;
     flex-direction: column;
@@ -124,7 +123,7 @@
 
   .time-picker-scroll-area {
     height: 280px;
-    padding-right: var(--spacing-16)
+    padding-right: var(--spacing-16);
   }
 
   .time-picker {
@@ -186,4 +185,4 @@
       transform: translateX(0);
     }
   }
-}
+}

package/src/widgets/datepicker/datepicker.tsx

@@ -1,4 +1,5 @@
 'use client'
+
 /**
  * @file DatePicker component using react-day-picker and radix-ui
  * Portions copyright (c) 2023 Maliksidk19 licensed under the MIT
@@ -6,21 +7,23 @@
  * of https://github.com/Maliksidk19/shadcn-datetime-picker/
  */
 
+import type React from 'react'
+import { useEffect, useRef, useState } from 'react'
+
 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/forms/calendar.js'
 import { Input } from '../../components/forms/input.js'
 import { InputAdornment } from '../../components/forms/input-adornment.js'
-import type { Intent, Size, Variant } from '../../components/forms/@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'
+import type { Intent, Size, Variant } from '../../components/forms/@types/input.js'
 
 export interface DatePickerProps extends React.InputHTMLAttributes<HTMLInputElement> {
   id: string
@@ -208,7 +211,10 @@ export function DatePicker({
                   onSelect={(selectedDate: Date) => {
                     if (selectedDate) {
                       const [hours, minutes] = time.split(':')
-                      selectedDate.setHours(Number.parseInt(hours), Number.parseInt(minutes))
+                      selectedDate.setHours(
+                        Number.parseInt(hours, 10),
+                        Number.parseInt(minutes, 10)
+                      )
                       setDate(selectedDate)
                       setMonth(selectedDate)
                       handleOnDateChange(selectedDate)
@@ -243,7 +249,11 @@ export function DatePicker({
                               setTime(timeValue)
                               if (date) {
                                 const newDate = new Date(date.getTime())
-                                newDate.setHours(Number.parseInt(hour), Number.parseInt(minute), 0)
+                                newDate.setHours(
+                                  Number.parseInt(hour, 10),
+                                  Number.parseInt(minute, 10),
+                                  0
+                                )
                                 setDate(newDate)
                                 handleOnDateChange(newDate)
                               }

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

@@ -1,4 +1,5 @@
 'use client'
+
 import type * as React from 'react'
 
 import cx from 'classnames'

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

@@ -1,4 +1,5 @@
 'use client'
+
 import type * as React from 'react'
 
 import cx from 'classnames'

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

@@ -1,10 +1,8 @@
 'use client'
 
 import type React from 'react'
-
-import { createContext, useCallback, useContext, useState } from 'react'
-
 import type { ReactNode } from 'react'
+import { createContext, useCallback, useContext, useState } from 'react'
 
 interface DrawerContextType {
   drawers: string[]

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

@@ -1,4 +1,5 @@
 'use client'
+
 import type * as React from 'react'
 
 import cx from 'classnames'

package/src/widgets/drawer/drawer-top-actions.tsx

@@ -1,4 +1,5 @@
 'use client'
+
 import type * as React from 'react'
 
 import cx from 'classnames'

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

@@ -1,14 +1,13 @@
 'use client'
+
 /* eslint-disable @typescript-eslint/consistent-type-imports */
 import type React from 'react'
 import { useEffect } from 'react'
 
-import cx from 'classnames'
-
 import { useFocusTrap } from '@mantine/hooks'
-import { m } from 'motion/react'
-
+import cx from 'classnames'
 import type { HTMLMotionProps } from 'motion/react'
+import { m } from 'motion/react'
 
 import styles from './drawer.module.css'
 

package/src/widgets/drawer/drawer.module.css

@@ -14,7 +14,6 @@
     opacity: 1;
   }
 
-
   .drawer-container {
     position: absolute;
     right: 0;
@@ -59,7 +58,7 @@
 
   .drawer-narrow .drawer-container {
     width: calc(100% - 32px);
-    max-width: 400px
+    max-width: 400px;
   }
 
   .drawer-container[aria-hidden="true"] {
@@ -109,4 +108,4 @@
       opacity: 1;
     }
   }
-}
+}