@ossy/design-system 3.0.2 → 3.0.4

package/src/column-gallery/ColumnGallery.jsx

@@ -0,0 +1,297 @@
+import React, {
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+
+// Tries to stack the columns into even heights
+const spreadEven = (imgDataObjects, numberOfColumns) => {
+  const reducer = (totalHeight, curImgObj) => totalHeight + curImgObj.height;
+  const totalStackHeight = imgDataObjects.reduce(reducer, 0);
+  const desiredColumnHeight = Math.floor(totalStackHeight / numberOfColumns);
+  const arrayCopy = imgDataObjects.slice(0);
+  const output = [];
+
+  if (numberOfColumns === 1) {
+    return [arrayCopy];
+  }
+  else {
+    while ( numberOfColumns > 0 ) {
+      let columnHeight = 0;
+      let cutListAt = 1;
+
+      arrayCopy.forEach((item, index) => {
+        if (columnHeight < desiredColumnHeight ) {
+          columnHeight += item.height;
+          cutListAt = index;
+        }
+      });
+
+      output.push({
+        columnHeight,
+        columnItems: arrayCopy.splice(0, cutListAt)
+      });
+
+      numberOfColumns -= 1;
+    }
+
+    // Handle Leftovers
+    arrayCopy.forEach(item => {
+      output.sort((a, b) => a.columnHeight - b.columnHeight);
+      output[0].columnHeight += item.height;
+      output[0].columnItems.push(item);
+    });
+
+  }
+   return  output.map(item => item.columnItems);
+}
+
+export const ColumnGallery = ({
+  columnMinWidth = 250,
+  minNumberOfColumns = 2,
+  items = [],
+  ...props
+}) => {
+  const containerRef = useRef()
+  const childrenRef = useRef()
+
+  const [width, setWidth] =  useState(0)
+  const [columns, setColumns] =  useState([])
+  const [prevNumberOfColumns, setPrevNumberOfColumns] =  useState(0)
+
+  useEffect(() => {
+
+    if (!items.length) return
+
+    let numberOfColumns = Math.floor((width / columnMinWidth));
+
+    numberOfColumns = numberOfColumns < minNumberOfColumns
+      ? minNumberOfColumns
+      : numberOfColumns;
+
+    const columnCountDifference = Math.abs(numberOfColumns - prevNumberOfColumns);
+
+    if (columnCountDifference > 0) {
+      setColumns(spreadEven(items, numberOfColumns))
+      setPrevNumberOfColumns(numberOfColumns)
+    }
+
+  }, [width, items, columnMinWidth, minNumberOfColumns, prevNumberOfColumns])
+
+  useEffect(() => {
+
+    const setContainerWidth = () => {
+      setWidth(containerRef.current.offsetWidth);
+    }
+
+    setContainerWidth()
+
+    window.addEventListener('resize', setContainerWidth)
+
+    return () => {
+      window.removeEventListener('resize', setContainerWidth)
+    }
+
+  }, [])
+
+  return (
+    <div ref={containerRef} data-column-gallery className="gallery-container">
+      <style href="@ossy/design-system/column-gallery" precedence="high">
+      {`
+        [data-column-gallery] {
+          --color-gray-40: hsl(0, 0%, 40%);
+          --color-gray-60: hsl(0, 0%, 60%);
+          --color-gray-85: hsl(0, 0%, 85%);
+          --color-gray-98: hsl(0, 0%, 98%);
+
+          --color-digital-blue: hsl(193, 83%, 52%);
+
+          --color-highlight: var(--color-digital-blue);
+
+          --space-xxs: 2px;
+          --space-xs: 4px;
+          --space-s: 8px;
+          --space-m: 16px;
+          --space-l: 32px;
+          --space-xl: 64px;
+          --space-xxl: 128px;
+
+          --space-inset-xxs: 2px 2px 2px 2px;
+          --space-inset-xs: 4px 4px 4px 4px;
+          --space-inset-s: 8px 8px 8px 8px;
+          --space-inset-m: 16px 16px 16px 16px;
+          --space-inset-l: 32px 32px 32px 32px;
+          --space-inset-xl: 64px 64px 64px 64px;
+          --space-inset-xxl: 128px 128px 128px 128px;
+
+          --space-inset-squish-s: 4px 8px 4px 8px;
+          --space-inset-squish-m: 8px 16px 8px 16px;
+          --space-inset-squish-l: 16px 32px 16px 32px;
+
+          --space-inset-stretch-s: 12px 8px 12px 8px;
+          --space-inset-stretch-m: 24px 16px 24px 16px;
+
+          --space-inline-xxs: 0px 2px 0px 0px;
+          --space-inline-xs: 0px 4px 0px 0px;
+          --space-inline-s: 0px 8px 0px 0px;
+          --space-inline-m: 0px 16px 0px 0px;
+          --space-inline-l: 0px 32px 0px 0px;
+          --space-inline-xl: 0px 64px 0px 0px;
+          --space-inline-xxl: 0px 128px 0px 0px;
+
+          --space-inline-reverse-xxs: 0px 0px 0px 2px;
+          --space-inline-reverse-xs: 0px 0px 0px 4px;
+          --space-inline-reverse-s: 0px 0px 0px 8px;
+          --space-inline-reverse-m: 0px 0px 0px 16px;
+          --space-inline-reverse-l: 0px 0px 0px 32px;
+          --space-inline-reverse-xl: 0px 0px 0px 64px;
+          --space-inline-reverse-xxl: 0px 0px 0px 128px;
+
+          --space-stack-xxs: 0px 0px 2px 0px;
+          --space-stack-xs: 0px 0px 4px 0px;
+          --space-stack-s: 0px 0px 8px 0px;
+          --space-stack-m: 0px 0px 16px 0px;
+          --space-stack-l: 0px 0px 32px 0px;
+          --space-stack-xl: 0px 0px 64px 0px;
+          --space-stack-xxl: 0px 0px 128px 0px;
+
+          display: block;
+
+          height: auto;
+          width: 99%;
+          margin: 0 auto;
+        }
+
+        [data-column-gallery].gallery-container {
+          height: auto;
+          width: 99%;
+          margin: 0 auto;
+        }
+        
+        [data-column-gallery] .header-search {
+          padding: var(--space-inset-m);
+          background: hsl(0, 0%, 100%);
+        }
+        
+        [data-column-gallery] .header-search input {
+          width: 100%;
+          padding: var(--space-inset-stretch-s);
+          background: hsl(0, 0%, 95%);
+          border: 1px solid hsl(0, 0%, 95%);
+          border-radius: 3px;
+          box-shadow: 0 1px 1px 1px rgba(0, 0, 0, .18);
+        
+          color: var(--color-gray-40);
+          font-size: 1rem;
+        
+        }
+        
+        [data-column-gallery] .header-search input:focus  {
+          border: 1px solid var(--color-highlight);
+          outline: none;
+          box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, .20);
+        }
+
+        [data-column-gallery] .oskw-gallery {
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
+        }
+        
+        [data-column-gallery] .oskw-gallery * {
+          margin: 0;
+          padding: 0;
+          'box-sizing: border-box;
+        }
+        
+        [data-column-gallery] .oskw-gallery .oskw-card-group: {
+          width: 100%;
+          height: 100%;
+          padding: var(--space-inset-s);
+          position: relative;
+        }
+        
+        [data-column-gallery] .oskw-gallery .oskw-card-group  .oskw-column {
+          display: inline-block;
+        }
+        
+        [data-column-gallery] .oskw-gallery .oskw-img-wrapper {
+          width: 100%;
+          height: auto;
+          overflow: hidden;
+        }
+        
+        [data-column-gallery] .oskw-gallery .oskw-img-wrapper img {
+          width: 100%;
+          height: auto;
+        }
+        
+        [data-column-gallery] .oskw-gallery .oskw-info-message {
+          width: 100%;
+          color: var(--color-gray-40);
+          'text-align': center;
+          padding: var(--space-inset-stretch-m);
+        }
+
+        @media ( min-width: 700px ) {
+
+          [data-column-gallery] .header-search {
+            padding: var(--space-inset-stretch-m);
+            display: flex;
+            justify-content: center;
+          }
+        
+          [data-column-gallery] .header-search div {
+            display: inline-block;
+            margin: 0 auto;
+          }
+        
+          [data-column-gallery] .header-search input {
+            width: 350px;
+          }
+        
+          [data-column-gallery] .header-search input:focus {
+            border: 1px solid var(--color-highlight);
+            outline: none;
+            box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, .20);
+          }
+        
+        }
+        
+        @supports (display: flex) and (flex: 1) {
+
+          [data-column-gallery] .oskw-gallery .oskw-card-group {
+            display: flex;
+          }
+        
+          [data-column-gallery] .oskw-gallery .oskw-card-group .oskw-column {
+            flex: 1;
+          }
+
+        }
+        
+      `}
+      </style>
+      <div id='oskw-gallery' className="oskw-gallery">
+        { columns.length !== 0 && (
+          <div className="oskw-card-group">
+            { columns.map((column, i) => (
+                <div className="oskw-column" key={i}>
+                  {/* todo replace with children **/}
+                  {column.map(imgData => (
+                    <ImageCard
+                      key={imgData.url}
+                      title={imgData.title}
+                      src={imgData.url}
+                      link={imgData.link}
+                      dateTaken={imgData.dateTaken}
+                    />
+                  ))}
+                </div>
+            ))}
+          </div>
+        ) }
+      </div>
+    </div>
+  )
+}

package/src/column-gallery/columnGallery.stories-disabled.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { ColumnGallery } from './ColumnGallery.jsx'
+
+export default {
+  title: 'Other/Column Gallery',
+  component: ColumnGallery,
+};
+
+
+const Story = (args) => <ColumnGallery {...args} />;
+
+export const Default = Story.bind({});
+Default.args = {
+  columnMinWidth: 250,
+  minNumberOfColumns: 2,
+  items: [
+    {
+      url: 'https://images.unsplash.com/photo-1645548291117-719a896a45c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80',
+      title: 'Unsplashed',
+      link: 'https://images.unsplash.com/photo-1645548291117-719a896a45c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80',
+      dateTaken: 'Tue, 12 Aug',
+    }
+  ],
+};

package/src/column-gallery/index.js

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

package/src/column-gallery/options.js

@@ -0,0 +1,7 @@
+const config = {
+  galleryId: 'oskw-gallery',
+  columnMinWidth: 250,
+  minNumberOfColumns: 2
+}
+
+export default config;

package/src/component-slots/ComponentSlots.jsx

@@ -0,0 +1,113 @@
+import React, { createContext, useContext, useMemo } from 'react'
+import { resolveInputComponentChain } from '@ossy/schema'
+import { resolveInputSlotFromMap, resolveSlotFromMap } from './slotLookup.js'
+
+const ComponentSlotsContext = createContext(null)
+
+/**
+ * Nested providers shallow-merge: inner `slots` override keys from the parent map.
+ *
+ * @param {{ slots?: Record<string, import('react').ComponentType<any> | null | undefined>, children: import('react').ReactNode }} props
+ */
+export function ComponentSlotsProvider ({ slots, children }) {
+  const parent = useContext(ComponentSlotsContext)
+  const value = useMemo(() => {
+    const local = slots ?? {}
+    if (!parent) {
+      return { slots: local }
+    }
+    return { slots: { ...parent.slots, ...local } }
+  }, [parent, slots])
+  return (
+    <ComponentSlotsContext.Provider value={value}>
+      {children}
+    </ComponentSlotsContext.Provider>
+  )
+}
+
+/**
+ * Returns the component for `name` from the nearest provider map, or `undefined` if
+ * there is no provider, the key is missing, or the value is explicitly `undefined`.
+ * A value of `null` is returned as-is (slot intentionally empty).
+ *
+ * Accepts canonical ADR 0006 ids; bare app region names normalize to `app:*`.
+ *
+ * @param {string} name
+ * @returns {import('react').ComponentType<any> | null | undefined}
+ */
+export function useSlot (name) {
+  const ctx = useContext(ComponentSlotsContext)
+  if (!ctx) {
+    return undefined
+  }
+  return resolveSlotFromMap(ctx.slots, name)
+}
+
+/**
+ * Resolve a form field control using ADR 0006 input id chain (feature → design-system).
+ *
+ * @param {string | null | undefined} schemaId
+ * @param {string} fieldType
+ * @returns {import('react').ComponentType<any> | null | undefined}
+ */
+export function useInputSlot (schemaId, fieldType) {
+  const ctx = useContext(ComponentSlotsContext)
+  const inputIds = useMemo(
+    () => resolveInputComponentChain(schemaId, fieldType),
+    [schemaId, fieldType],
+  )
+  if (!ctx) return undefined
+  return resolveInputSlotFromMap(ctx.slots, inputIds)
+}
+
+/**
+ * @param {string | undefined} region
+ * @param {import('react').ReactNode} node
+ * @param {Record<string, any>} forwardedProps
+ */
+function renderRegionFallback (region, node, forwardedProps) {
+  if (node == null || node === false) return null
+
+  const regionProps = {
+    ...forwardedProps,
+    ...(region ? { 'data-region': region } : {}),
+  }
+
+  if (React.isValidElement(node)) {
+    return React.cloneElement(node, regionProps)
+  }
+
+  if (region || Object.keys(forwardedProps).length > 0) {
+    return <div {...regionProps}>{node}</div>
+  }
+
+  return node
+}
+
+/**
+ * Renders the component registered under `view` in the nearest
+ * `ComponentSlotsProvider`. Falls back to `fallback` (default `null`) when the
+ * view is not registered or is explicitly `null`.
+ *
+ * When `region` is set, `data-region` is forwarded to the resolved component
+ * (or fallback) so layout CSS can place it in a grid cell. All other props are
+ * spread onto the resolved component as well.
+ *
+ * @param {{ view: string, region?: string, fallback?: import('react').ReactNode } & Record<string, any>} props
+ */
+export function Slot ({ view, region, fallback = null, children, ...forwardedProps }) {
+  const Component = useSlot(view)
+  const mergedProps = {
+    ...forwardedProps,
+    ...(region ? { 'data-region': region } : {}),
+  }
+
+  // undefined = not registered; null = intentionally empty
+  if (Component === null) return fallback
+
+  if (Component === undefined) {
+    return renderRegionFallback(region, fallback ?? children, forwardedProps)
+  }
+
+  return React.createElement(Component, mergedProps)
+}

package/src/component-slots/ComponentSlots.stories.jsx

@@ -0,0 +1,111 @@
+import React from 'react'
+import {
+  ComponentSlotsProvider,
+  useSlot,
+} from './ComponentSlots.jsx'
+
+export default {
+  title: 'Design System/Base/Component slots',
+  component: ComponentSlotsProvider,
+}
+
+const DemoBanner = () => (
+  <div
+    style={{
+      padding: '12px 16px',
+      borderRadius: 8,
+      background: 'var(--surface-secondary, #e8eef5)',
+      font: '14px/1.4 system-ui, sans-serif',
+    }}
+  >
+    Slot content: <strong>DemoBanner</strong>
+  </div>
+)
+
+const SlotPanel = ({ slotKey = 'demo.banner' }) => {
+  const SlotComponent = useSlot(slotKey)
+  if (SlotComponent === null) {
+    return (
+      <p style={{ margin: 0, color: 'var(--text-muted, #666)', font: '14px system-ui' }}>
+        Slot <code>{slotKey}</code> is explicitly empty (<code>null</code>).
+      </p>
+    )
+  }
+  if (SlotComponent === undefined) {
+    return (
+      <p style={{ margin: 0, font: '14px system-ui' }}>
+        No component for <code>{slotKey}</code> — using fallback.
+      </p>
+    )
+  }
+  return <SlotComponent />
+}
+
+/** Registered slot renders the component from the provider map. */
+export const WithRegisteredSlot = () => (
+  <ComponentSlotsProvider slots={{ 'demo.banner': DemoBanner }}>
+    <SlotPanel />
+  </ComponentSlotsProvider>
+)
+
+/** `useSlot` returns `undefined` when the key is missing; app code can branch to defaults. */
+export const MissingSlotFallback = () => (
+  <ComponentSlotsProvider slots={{}}>
+    <SlotPanel />
+  </ComponentSlotsProvider>
+)
+
+/** `null` in the map means “intentionally no UI” for that slot. */
+export const ExplicitNullSlot = () => (
+  <ComponentSlotsProvider slots={{ 'demo.banner': null }}>
+    <SlotPanel />
+  </ComponentSlotsProvider>
+)
+
+const OuterBanner = () => (
+  <div
+    style={{
+      padding: '12px 16px',
+      borderRadius: 8,
+      background: '#dbeafe',
+      font: '14px system-ui',
+    }}
+  >
+    Outer provider
+  </div>
+)
+
+const InnerBanner = () => (
+  <div
+    style={{
+      padding: '12px 16px',
+      borderRadius: 8,
+      background: '#fef3c7',
+      font: '14px system-ui',
+    }}
+  >
+    Inner provider (overrides outer)
+  </div>
+)
+
+/** Nested providers shallow-merge; inner `slots` win on key collision. */
+export const NestedProvidersOverride = () => (
+  <ComponentSlotsProvider slots={{ 'demo.banner': OuterBanner, 'demo.footer': DemoBanner }}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <p style={{ margin: 0, font: '14px system-ui' }}>
+        Outside inner provider — banner from outer:
+      </p>
+      <SlotPanel />
+      <ComponentSlotsProvider slots={{ 'demo.banner': InnerBanner }}>
+        <p style={{ margin: 0, font: '14px system-ui' }}>
+          Inside inner provider — same key overridden:
+        </p>
+        <SlotPanel />
+        <p style={{ margin: 0, font: '14px system-ui' }}>
+          Footer still from outer (not touched by inner):
+        </p>
+        <SlotPanel slotKey="demo.footer" />
+      </ComponentSlotsProvider>
+    </div>
+  </ComponentSlotsProvider>
+)

package/src/component-slots/index.js

@@ -0,0 +1,8 @@
+export {
+  ComponentSlotsProvider,
+  useSlot,
+  useInputSlot,
+  Slot,
+} from './ComponentSlots.jsx'
+export { slotLookupKeys, resolveSlotFromMap, resolveInputSlotFromMap } from './slotLookup.js'
+export { PAGE_LAYOUT_REGIONS } from './pageSlotKeys.js'

package/src/component-slots/pageSlotKeys.js

@@ -0,0 +1,8 @@
+/** Regions in `View layout="page"`. */
+export const PAGE_LAYOUT_REGIONS = [
+  'header',
+  'content',
+  'sidebar-primary',
+  'sidebar-secondary',
+  'footer',
+]

package/src/component-slots/slotLookup.js

@@ -0,0 +1,73 @@
+/** Bare app region → namespaced key for lookup fallbacks. */
+const BARE_APP_REGION = {
+  header: 'app:header',
+  sidebar: 'app:sidebar',
+  toolbar: 'app:toolbar',
+  notifications: 'app:notifications',
+  'system-messages': 'app:system-messages',
+  content: 'app:content',
+}
+
+/**
+ * Normalize a slot map key to the canonical namespaced form when it is a bare app region.
+ *
+ * @param {string} slotName
+ * @returns {string}
+ */
+function normalizeAppSlotName (slotName) {
+  const key = typeof slotName === 'string' ? slotName.trim() : ''
+  return BARE_APP_REGION[key] ?? key
+}
+
+/**
+ * Expand a registered slot name to lookup keys (exact + app region aliases).
+ *
+ * @param {string} name
+ * @returns {string[]}
+ */
+export function slotLookupKeys (name) {
+  /** @type {string[]} */
+  const keys = []
+  const add = (key) => {
+    if (typeof key !== 'string' || !key) return
+    if (!keys.includes(key)) keys.push(key)
+  }
+
+  add(name)
+
+  const app = normalizeAppSlotName(name)
+  add(app)
+
+  return keys
+}
+
+/**
+ * Resolve a component from a slot map.
+ *
+ * @param {Record<string, import('react').ComponentType<any> | null | undefined>} slots
+ * @param {string} name
+ * @returns {import('react').ComponentType<any> | null | undefined}
+ */
+export function resolveSlotFromMap (slots, name) {
+  for (const key of slotLookupKeys(name)) {
+    if (Object.prototype.hasOwnProperty.call(slots, key)) {
+      return slots[key]
+    }
+  }
+  return undefined
+}
+
+/**
+ * Resolve the first registered input field component for a schema field type.
+ *
+ * @param {Record<string, import('react').ComponentType<any> | null | undefined>} slots
+ * @param {string[]} inputIds ADR 0006 chain from {@link resolveInputComponentChain}
+ * @returns {import('react').ComponentType<any> | null | undefined}
+ */
+export function resolveInputSlotFromMap (slots, inputIds) {
+  for (const id of inputIds) {
+    const resolved = resolveSlotFromMap(slots, id)
+    if (resolved !== undefined) return resolved
+  }
+  return undefined
+}

package/src/component-slots/slotLookup.spec.js

@@ -0,0 +1,19 @@
+import { describe, expect, it } from '@jest/globals'
+import { slotLookupKeys } from './slotLookup.js'
+
+describe('slotLookupKeys', () => {
+  it('returns the exact key for canonical component ids', () => {
+    expect(slotLookupKeys('@ossy/design-system/input/text')).toEqual([
+      '@ossy/design-system/input/text',
+    ])
+  })
+
+  it('normalizes bare app region names', () => {
+    expect(slotLookupKeys('header')).toEqual(['header', 'app:header'])
+  })
+
+  it('does not alias legacy input keys', () => {
+    expect(slotLookupKeys('input:text')).toEqual(['input:text'])
+    expect(slotLookupKeys('form.field.text')).toEqual(['form.field.text'])
+  })
+})