@ossy/design-system 3.0.2 → 3.0.4

package/src/cache/Cache.jsx

@@ -0,0 +1,78 @@
+import React, {
+  createContext,
+  useReducer,
+  useContext,
+  useCallback
+} from 'react'
+
+const getInitialState = () => ({})
+export const CacheContext = createContext({})
+
+const Actions = {
+  Set: 'SET'
+}
+
+// get: (path, state)
+// set: (path, value, state)
+
+const createReducer = ({ set, get }) => (
+  state = getInitialState(),
+  action
+) => {
+    switch (action.type) {
+
+      case Actions.Set: {
+        let data
+
+        if (typeof action.data === 'function') {
+          const previousValue = get(action.cachePath, state)
+          data = action.data(previousValue)
+        } else {
+          data = action.data
+        }
+
+          return set(action.cachePath, data, state)
+      }
+
+      default:
+        return ({ ...state })
+
+    }
+  }
+
+export const createCache = ({ get: _get, set: _set }) => props => {
+
+  const [state, updateState] = useReducer(
+    createReducer({ set: _set, get: _get }),
+    getInitialState()
+  )
+
+  const set = useCallback(cachePath => data => {
+    updateState({ type: Actions.Set, cachePath, data })
+  }, [updateState])
+
+  const get = useCallback(cachePath =>
+    _get(cachePath, state),
+    [state, _get]
+  )
+
+  return (
+    <CacheContext.Provider value={{ get, set }} {...props} />
+  )
+}
+
+export const useCache = (cachePath, defaultValue) => {
+  const { get, set } = useContext(CacheContext)
+
+  const getData = () => {
+    const data = get(cachePath)
+    return data === undefined || data === null
+      ? defaultValue
+      : data
+  }
+
+  return ({
+    data: getData(),
+    set: set(cachePath)
+  })
+}

package/src/cache/cache.stories.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { createCache } from './Cache.jsx'
+
+export default {
+  title: 'Design System/Base/Cache',
+  render: () => {
+    const Cache = createCache({
+      get: (path, state) => state,
+      set: (path, value, state) => state,
+    })
+
+    return (
+      <Cache>
+        {/* components */}
+      </Cache>
+    )
+  },
+}
+
+export const Default = {}

package/src/cache/index.js

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

package/src/card/Card.jsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { View } from '../view/View.jsx'
+
+const VARIANT_DEFAULTS = {
+  default: { surface: 'primary', roundness: 's', inset: 'l' },
+  resume: { surface: 'primary', roundness: 'none', inset: 'l' },
+  hero: { surface: 'hero', roundness: 'l', inset: 'xl' },
+}
+
+export const Card = ({
+  variant = 'default',
+  surface: surfaceProp,
+  roundness: roundnessProp,
+  inset: insetProp,
+  ...props
+}) => {
+  const defaults = VARIANT_DEFAULTS[variant] ?? VARIANT_DEFAULTS.default
+  const surface = surfaceProp ?? defaults.surface
+  const roundness = roundnessProp ?? defaults.roundness
+  const inset = insetProp ?? defaults.inset
+
+  return (
+    <>
+      <style href="@ossy/design-system/card" precedence="high">
+      {`
+        [data-card] {
+          overflow: hidden;
+          box-sizing: border-box;
+        }
+
+        [data-card-variant="default"] {
+          border: 0.5px solid var(--separator-primary);
+        }
+
+        [data-card-variant="resume"] {
+          border-width: 0 1px 0 0;
+          border-style: solid;
+          border-color: var(--separator-primary);
+          box-shadow: none;
+        }
+
+        [data-card-variant="hero"] {
+          border: 1px solid transparent;
+        }
+      `}
+      </style>
+      <View
+        data-card
+        data-card-variant={variant}
+        surface={surface}
+        roundness={roundness}
+        inset={inset}
+        {...props}
+      />
+    </>
+  )
+}

package/src/card/Card.stories.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Card } from './Card.jsx'
+
+export default {
+  title: 'Design System/Display/Card',
+  component: Card,
+  render: () => <Card>Card content</Card>,
+}
+
+export const Default = {}

package/src/card/index.js

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

package/src/carousel/Carousel.jsx

@@ -0,0 +1,87 @@
+'use client'
+import React, { useRef } from 'react';
+import { useCarousel } from './useCarousel.jsx';
+import { Icon } from '../icons/Icon.jsx';
+import { View } from '../view';
+import { Button } from '../button';
+
+export const Carousel = ({
+  childWidth = '100%',
+  childMaxWidth = '100%',
+  children,
+  ...props
+}) => {
+  const scrollContainerRef = useRef(null);
+
+  const {
+    children: childrenAsCarouselItemComponents,
+    carouselItems,
+    nextSlide,
+    prevSlide,
+  } = useCarousel(scrollContainerRef, children, { childWidth, childMaxWidth });
+
+  return (
+    <View {...props}>
+
+      <style href="@ossy/design-system/carousel" precedence='high'>
+      {`
+        [data-hide-scrollbar] {
+          -ms-overflow-style: none;
+          scrollbar-width: none;
+        }
+
+        [data-hide-scrollbar]::-webkit-scrollbar {
+          display: none;
+        }
+      `}
+      </style>
+
+      <View
+        ref={scrollContainerRef}
+        layout="row"
+        data-hide-scrollbar
+        style={{ overflowX: 'auto', overflowY: 'hidden', gap: 'var(--space-m)' }}
+      >
+        { childrenAsCarouselItemComponents }
+      </View>
+
+      <View
+        layout="row"
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          gap: 'var(--space-s)',
+          flexDirection: 'row',
+          position: 'relative',
+          padding: 'var(--space-m) var(--space-m) var(--space-m) var(--space-m)'
+        }}
+      >
+        <View layout="row" style={{ position: 'absolute', left: 'var(--space-s)', top: 'var(--space-s)', gap: 'var(--space-s)' }}>
+          <Button surface="neutral" onClick={prevSlide} style={{ padding: 'var(--space-xs)', borderRadius: '50%' }}>
+            <Icon name="chevron-left"  />
+          </Button>
+          
+          <Button surface="neutral" onClick={nextSlide} style={{ padding: 'var(--space-xs)', borderRadius: '50%' }}>
+            <Icon name="chevron-right"  />
+          </Button>
+        </View>
+        
+        { carouselItems.map(item => <div
+            key={item.itemId}
+            style={{
+              width: '8px',
+              height: '8px',
+              borderRadius: '50%',
+              overflow: 'hidden',
+              transition: 'background-color .3s ease',
+              backgroundColor: item?.isVisible
+                ? 'hsl(0, 0%, 40%)'
+                : 'hsl(0, 0%, 90%)'
+            }}
+
+        />)}
+      </View>
+
+    </View>
+  )
+}

package/src/carousel/Carousel.stories.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Carousel } from './Carousel.jsx'
+import { View } from '../view/index.js'
+
+export default {
+  title: 'Design System/Display/Carousel',
+  component: Carousel,
+  render: () => (
+    <Carousel childWidth="80%" childMaxWidth="400px">
+      <View surface="secondary" inset="m" roundness="s" style={{ height: '200px' }}>1</View>
+      <View surface="secondary" inset="m" roundness="s" style={{ height: '200px' }}>2</View>
+      <View surface="secondary" inset="m" roundness="s" style={{ height: '200px' }}>3</View>
+    </Carousel>
+  ),
+}
+
+export const Default = {}

package/src/carousel/index.js

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

package/src/carousel/useCarousel.jsx

@@ -0,0 +1,154 @@
+'use client';
+import React, {
+  useEffect,
+  useRef,
+  Children,
+  // RefObject,
+  useCallback,
+  useMemo,
+  // ReactNode,
+  createRef
+} from 'react';
+import { useIntersectionObserver, useForceRerender } from '../hooks';
+
+// export interface CarouselItem<T extends HTMLElement = HTMLElement> {
+//   itemId: string;
+//   isVisible: boolean;
+//   ref: RefObject<T>;
+//   originalReactNode: ReactNode;
+// }
+
+export const useCarousel = (
+  scrollContainerRef, // RefObject<HTMLElement>,
+  scrollItems,// ReactNode,
+  options // { childWidth?: string; childMaxWidth?: string; }
+) => {
+  const childWidth = options?.childWidth || '100%';
+  const childMaxWidth = options?.childMaxWidth || '100%';
+  const [hasForcedRerender, forceRerender] = useForceRerender();
+  const carouselItemsRef = useRef(new Map());
+  // const carouselItemsRef = useRef<Map<string, CarouselItem<HTMLDivElement>>>(new Map());
+
+  const intersectionObserver = useIntersectionObserver(
+    useCallback((entries, observer) => {
+      entries.forEach(entry => {
+        const target = entry.target //as HTMLElement;
+        const carouselItemId = target.dataset.itemId || '';
+        const carouselItems = carouselItemsRef.current;
+        if (!carouselItems.has(carouselItemId)) return;
+        const carouselItem = carouselItems.get(carouselItemId) // as CarouselItem<HTMLDivElement>;
+        carouselItems.set(
+          carouselItemId,
+          {
+            ...carouselItem,
+            isVisible: entry.isIntersecting
+          });
+      });
+
+      forceRerender();
+
+    }, [carouselItemsRef, forceRerender]),
+    useMemo(() => ({
+        root: scrollContainerRef.current,
+        threshold: 0.8
+      }),
+      [scrollContainerRef]
+    )
+  );
+
+  const nextSlide = useCallback(() => {
+    const carouselItems = Array.from(carouselItemsRef.current.entries());
+
+    const positionOflastVisibleItem = carouselItems
+      .map(([itemId, item]) => item)
+      .reduce((acc, curr, index) => curr.isVisible ? index : acc, 0);
+
+    // eslint-disable-next-line
+    const [_, carouselItemToScrollTo] =
+      positionOflastVisibleItem === carouselItems.length - 1
+        ? carouselItems[positionOflastVisibleItem]
+        : carouselItems[positionOflastVisibleItem + 1];
+
+    carouselItemToScrollTo.ref?.current?.scrollIntoView?.({
+      behavior: 'smooth',
+      inline: 'start',
+      block: 'nearest'
+    });
+
+    forceRerender();
+
+  }, [forceRerender]);
+
+  const prevSlide = useCallback(() => {
+    const carouselItems = Array.from(carouselItemsRef.current.entries());
+
+    const positionOfFirstVisibleItem = carouselItems
+      .map(([itemId, item]) => item)
+      .findIndex(item => item.isVisible);
+
+    // eslint-disable-next-line
+    const [_, carouselItemToScrollTo] =
+      positionOfFirstVisibleItem <= 0
+        ? carouselItems[0]
+        : carouselItems[positionOfFirstVisibleItem - 1];
+
+    carouselItemToScrollTo.ref?.current?.scrollIntoView?.({
+      behavior: 'smooth',
+      inline: 'start',
+      block: 'nearest'
+    });
+
+    forceRerender();
+
+  }, [forceRerender]);
+
+  useEffect(() => {
+    // const carouselItems: CarouselItem<HTMLDivElement>[] = Children
+    const carouselItems  = Children
+      .toArray(scrollItems)
+      .map((originalReactNode, index) => ({
+          itemId: `${index}`,
+          isVisible: false,
+          originalReactNode,
+          ref: createRef(),
+        }));
+
+    carouselItemsRef.current = new Map(carouselItems.map(item => [
+      item.itemId,
+      item
+    ]));
+
+    forceRerender();
+
+  }, [scrollItems, forceRerender]);
+
+  useEffect(() => {
+    intersectionObserver.disconnect();
+    const carouselItems = carouselItemsRef.current;
+    carouselItems.forEach(item => {
+      item?.ref?.current && intersectionObserver.observe(item.ref.current);
+    });
+  }, [hasForcedRerender, intersectionObserver]);
+
+
+  return {
+    nextSlide: nextSlide,
+    prevSlide: prevSlide,
+    carouselItems: Array.from(carouselItemsRef.current.values()),
+    children: Array.from(carouselItemsRef.current.values())
+      .map(carouselItem => (
+        <div
+          key={carouselItem.itemId}
+          ref={carouselItem.ref}
+          children={carouselItem.originalReactNode}
+          style={{
+            height: '100%',
+            flexBasis: childWidth,
+            maxWidth: childMaxWidth,
+            flexShrink: 0
+          }}
+          data-item-id={carouselItem.itemId}
+        />
+      ))
+  }
+}

package/src/code-example/CodeExampleStyles.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { codeExampleStyles } from './codeExampleStyles.js'
+
+/** Inject once per page that uses code example blocks or invoke examples. */
+export function CodeExampleStyles () {
+  return (
+    <style href="@ossy/design-system/code-example" precedence="medium">
+      {codeExampleStyles}
+    </style>
+  )
+}

package/src/code-example/InvokeCodeExample.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { codeExampleBlockClass } from './codeExampleStyles.js'
+
+/**
+ * Monospace invoke examples with lightweight token coloring (no extra deps).
+ * Mount {@link CodeExampleStyles} once on the page (see `./index.js`).
+ *
+ * @param {{ actionId: string, compact?: boolean }} props
+ */
+export function SdkInvokeExample ({ actionId, compact = false }) {
+  return (
+    <pre
+      className={codeExampleBlockClass}
+      data-compact={compact ? 'true' : undefined}
+    >
+      <code>
+        <span className="ds-code-example-kw">sdk.invoke</span>
+        (<span className="ds-code-example-str">&apos;{actionId}&apos;</span>, {'{ … }'})
+      </code>
+    </pre>
+  )
+}
+
+/**
+ * @param {{ actionId: string, actionsUrl: string, compact?: boolean }} props
+ */
+export function HttpInvokeExample ({ actionId, actionsUrl, compact = false }) {
+  return (
+    <pre
+      className={codeExampleBlockClass}
+      data-compact={compact ? 'true' : undefined}
+    >
+      <code>
+        <span className="ds-code-example-method">POST</span>{' '}
+        <span className="ds-code-example-path">{actionsUrl}</span>
+        {'\n'}
+        {'{ '}
+        <span className="ds-code-example-key">&quot;action&quot;</span>
+        : <span className="ds-code-example-str">&quot;{actionId}&quot;</span>,{' '}
+        <span className="ds-code-example-key">&quot;payload&quot;</span>
+        : {'{ … }'}
+        {' }'}
+      </code>
+    </pre>
+  )
+}

package/src/code-example/codeExampleStyles.js

@@ -0,0 +1,51 @@
+/** Class names for monospace invoke / HTTP example blocks. */
+export const codeExampleBlockClass = 'ds-code-example-block'
+
+export const codeExampleStyles = `
+  .ds-code-example-block {
+    margin: 0;
+    padding: var(--space-xs) var(--space-s);
+    border-radius: var(--space-xs);
+    background: color-mix(in srgb, var(--foreground) 5%, var(--surface-primary));
+    border: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-size: 0.75rem;
+    line-height: 1.45;
+    white-space: pre-wrap;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+    color: color-mix(in srgb, var(--foreground) 82%, transparent);
+  }
+
+  .ds-code-example-block[data-compact="true"] {
+    font-size: 0.65rem;
+    padding: var(--space-2xs, 4px) var(--space-xs);
+  }
+
+  .ds-code-example-block code {
+    font-family: inherit;
+    font-size: inherit;
+  }
+
+  .ds-code-example-kw {
+    color: var(--color-digital-blue, var(--color-info, #4078f2));
+    font-weight: 600;
+  }
+
+  .ds-code-example-method {
+    color: var(--color-digital-green, var(--color-accent, #50a14f));
+    font-weight: 700;
+  }
+
+  .ds-code-example-path {
+    color: color-mix(in srgb, var(--foreground) 70%, transparent);
+  }
+
+  .ds-code-example-key {
+    color: var(--color-digital-purple, #a626a4);
+  }
+
+  .ds-code-example-str {
+    color: var(--color-digital-orange, #c18401);
+  }
+`

package/src/code-example/index.js

@@ -0,0 +1,3 @@
+export { SdkInvokeExample, HttpInvokeExample } from './InvokeCodeExample.jsx'
+export { CodeExampleStyles } from './CodeExampleStyles.jsx'
+export { codeExampleBlockClass, codeExampleStyles } from './codeExampleStyles.js'