@ossy/design-system 3.0.2 → 3.0.4

package/src/locale/LocaleProvider.jsx

@@ -0,0 +1,72 @@
+import React, { createContext, useCallback, useContext, useMemo } from 'react'
+import { createTranslator } from '@ossy/locale'
+
+const LocaleContext = createContext(null)
+
+const fallbackLocale = {
+  language: 'en',
+  messages: {},
+  defaultLanguage: 'en',
+  supportedLanguages: ['en'],
+  t: (key) => key,
+}
+
+const isDev = typeof process !== 'undefined' && process.env.NODE_ENV !== 'production'
+
+/**
+ * Provides merged translation catalog and `t()` lookup for the active request language.
+ *
+ * @param {{
+ *   language?: string
+ *   messages?: Record<string, string>
+ *   fallbackMessages?: Record<string, string>
+ *   defaultLanguage?: string
+ *   supportedLanguages?: string[]
+ *   children: import('react').ReactNode
+ * }} props
+ */
+export function LocaleProvider ({
+  language,
+  messages = {},
+  fallbackMessages,
+  defaultLanguage,
+  supportedLanguages,
+  children,
+}) {
+  const onMissingKey = useMemo(
+    () => (isDev
+      ? (key) => {
+          if (typeof console !== 'undefined' && typeof console.warn === 'function') {
+            console.warn(`[@ossy/locale] Missing translation key: ${key}`)
+          }
+        }
+      : undefined),
+    [],
+  )
+
+  const t = useCallback(
+    (key, params) => createTranslator(messages, { fallbackCatalog: fallbackMessages, onMissingKey })(key, params),
+    [messages, fallbackMessages, onMissingKey],
+  )
+
+  const value = useMemo(
+    () => ({
+      language: language || defaultLanguage || 'en',
+      messages,
+      defaultLanguage,
+      supportedLanguages,
+      t,
+    }),
+    [language, messages, defaultLanguage, supportedLanguages, t],
+  )
+
+  return (
+    <LocaleContext.Provider value={value}>
+      {children}
+    </LocaleContext.Provider>
+  )
+}
+
+export function useLocale () {
+  return useContext(LocaleContext) || fallbackLocale
+}

package/src/locale/index.js

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

package/src/markdown-viewer/MarkdownViewer.jsx

@@ -0,0 +1,154 @@
+import React, { isValidElement } from 'react'
+import Markdown from 'markdown-to-jsx'
+import SyntaxHighlighter from 'react-syntax-highlighter'
+import atomOneLight from './styles/atom-one-light'
+import { View } from '../view'
+import { Button } from '../button'
+import { Text } from '../text'
+
+function textFromChildren (node) {
+  if (node == null || node === false) return ''
+  if (typeof node === 'string' || typeof node === 'number') return String(node)
+  if (Array.isArray(node)) return node.map(textFromChildren).join(' ')
+  if (isValidElement(node)) return textFromChildren(node.props?.children)
+  return ''
+}
+
+function asId (children) {
+  const t = textFromChildren(children).trim()
+  if (!t) return undefined
+  return t.toLowerCase().replace(/\s+/g, '-')
+}
+
+/** Map react-markdown-style `components={{ h1: fn }}` into markdown-to-jsx overrides. */
+function normalizeComponentOverrides (components) {
+  if (!components || typeof components !== 'object') return {}
+  const out = {}
+  for (const [tag, value] of Object.entries(components)) {
+    if (value == null) continue
+    if (typeof value === 'function') out[tag] = value
+    else if (typeof value === 'object' && typeof value.component === 'function') out[tag] = value
+    else out[tag] = value
+  }
+  return out
+}
+
+const defaultOverrides = {
+  /** Drop the outer `<pre>` so fenced blocks are shaped like the old ReactMarkdown output. */
+  pre: ({ children }) => <>{children}</>,
+
+  h1: ({ children, id, ...rest }) => (
+    <Text id={id || asId(children)} as="h1" variant="heading-primary" {...rest} style={{ marginBottom: 'var(--space-l)' }}>{children}</Text>
+  ),
+  h2: ({ children, id, ...rest }) => (
+    <Text id={id || asId(children)} as="h2" variant="heading-secondary" {...rest} style={{ marginBottom: 'var(--space-m)', marginTop: 'var(--space-l)' }}>{children}</Text>
+  ),
+  h3: ({ children, id, ...rest }) => (
+    <Text id={id || asId(children)} as="h3" variant="heading-tertiary" {...rest} style={{ marginBottom: 'var(--space-m)' }}>{children}</Text>
+  ),
+  h4: ({ children, id, ...rest }) => (
+    <Text id={id || asId(children)} as="h4" variant="heading-tertiary" {...rest} style={{ marginBottom: 'var(--space-m)' }}>{children}</Text>
+  ),
+  h5: ({ children, id, ...rest }) => (
+    <Text id={id || asId(children)} as="h5" variant="heading-tertiary" {...rest} style={{ marginBottom: 'var(--space-m)' }}>{children}</Text>
+  ),
+  p: (props) => <Text {...props} style={{ marginBottom: 'var(--space-m)' }} />,
+  ul: (props) => <ul {...props} style={{ listStyle: 'inside', paddingLeft: 'var(--space-l)' }} />,
+  li: (props) => <Text as="li" {...props} style={{ marginBottom: 'var(--space-m)' }} />,
+  a: ({ children, href, ...rest }) => (
+    <Button as={href ? 'a' : 'button'} href={href} {...rest} variant="link">{children}</Button>
+  ),
+  code: ({ className, children, ...props }) => {
+    const m = (className || '').match(/(?:language|lang)-(\w+)/)
+    const language = m ? m[1] : null
+    const inline = !language
+
+    if (inline) {
+      return (
+        <View inset="xs" surface="primary" roundness="s" style={{ display: 'inline-block' }} {...props}>
+          <SyntaxHighlighter
+            style={{
+              display: 'inline',
+              ...atomOneLight,
+              hljs: {
+                display: 'inline',
+                color: '#383a42',
+                background: 'transparent',
+              },
+            }}
+            language={language}
+            PreTag="span"
+            {...props}
+          >
+            {children}
+          </SyntaxHighlighter>
+        </View>
+      )
+    }
+
+    return (
+      <View inset="m" surface="primary" roundness="m" data-component="MarkdownViewer">
+        <style href="@ossy/design-system/markdown-viewer/MarkdownViewer" precedence="high">
+          {`
+        [data-component="MarkdownViewer"] {
+          margin: var(--space-s) 0;
+        }
+
+        [data-component="MarkdownViewer"] pre {
+          margin: 0;
+        }
+      `}
+        </style>
+        <SyntaxHighlighter
+          style={{
+            ...atomOneLight,
+            hljs: {
+              display: 'block',
+              overflowX: 'auto',
+              color: '#383a42',
+              background: 'transparent',
+            },
+          }}
+          language={language}
+          {...props}
+        >
+          {children}
+        </SyntaxHighlighter>
+      </View>
+    )
+  },
+}
+
+function markdownString (markdown, children) {
+  if (typeof markdown === 'string') return markdown
+  if (typeof children === 'string') return children
+  if (children == null && markdown == null) return ''
+  if (Array.isArray(children) && children.every((c) => typeof c === 'string' || typeof c === 'number')) {
+    return children.join('')
+  }
+  return String(markdown ?? children ?? '')
+}
+
+export const MarkdownViewer = ({
+  markdown,
+  children,
+  components = {},
+  ...rest
+}) => {
+  const source = markdownString(markdown, children)
+
+  return (
+    <Markdown
+      options={{
+        disableParsingRawHTML: true,
+        overrides: {
+          ...defaultOverrides,
+          ...normalizeComponentOverrides(components),
+        },
+      }}
+      {...rest}
+    >
+      {source}
+    </Markdown>
+  )
+}

package/src/markdown-viewer/MarkdownViewer.stories.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { MarkdownViewer } from './MarkdownViewer.jsx'
+
+export default {
+  title: 'Design System/Display/MarkdownViewer',
+  component: MarkdownViewer,
+}
+
+export const Default = {
+  args: {
+    children: `
+# Hello, this is an md doc
+
+Let's get started with some documentation
+
+## Getting started
+
+\`\`\`bash
+npm install @ossy/sdk @ossy/sdk-react
+\`\`\`
+
+\`\`\`jsx
+import { WorkspaceProvider } from '@ossy/sdk-react'
+
+export function App() {
+  return (
+    <WorkspaceProvider workspaceId="your-workspace-id">
+      {/* your app */}
+    </WorkspaceProvider>
+  )
+}
+\`\`\`
+    `,
+  },
+}

package/src/markdown-viewer/index.js

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

package/src/markdown-viewer/styles/atom-one-light.js

@@ -0,0 +1,114 @@
+export default {
+    "hljs": {
+        "display": "block",
+        "overflowX": "auto",
+        "padding": "0.5em",
+        "color": "#383a42",
+        "background": "#fafafa"
+    },
+    "hljs-comment": {
+        "color": "#a0a1a7",
+        "fontStyle": "italic"
+    },
+    "hljs-quote": {
+        "color": "#a0a1a7",
+        "fontStyle": "italic"
+    },
+    "hljs-doctag": {
+        "color": "#a626a4"
+    },
+    "hljs-keyword": {
+        "color": "#a626a4"
+    },
+    "hljs-formula": {
+        "color": "#a626a4"
+    },
+    "hljs-section": {
+        "color": "#e45649"
+    },
+    "hljs-name": {
+        "color": "#e45649"
+    },
+    "hljs-selector-tag": {
+        "color": "#e45649"
+    },
+    "hljs-deletion": {
+        "color": "#e45649"
+    },
+    "hljs-subst": {
+        "color": "#e45649"
+    },
+    "hljs-literal": {
+        "color": "#0184bb"
+    },
+    "hljs-string": {
+        "color": "#50a14f"
+    },
+    "hljs-regexp": {
+        "color": "#50a14f"
+    },
+    "hljs-addition": {
+        "color": "#50a14f"
+    },
+    "hljs-attribute": {
+        "color": "#50a14f"
+    },
+    "hljs-meta-string": {
+        "color": "#50a14f"
+    },
+    "hljs-built_in": {
+        "color": "#c18401"
+    },
+    "hljs-class .hljs-title": {
+        "color": "#c18401"
+    },
+    "hljs-attr": {
+        "color": "#986801"
+    },
+    "hljs-variable": {
+        "color": "#986801"
+    },
+    "hljs-template-variable": {
+        "color": "#986801"
+    },
+    "hljs-type": {
+        "color": "#986801"
+    },
+    "hljs-selector-class": {
+        "color": "#986801"
+    },
+    "hljs-selector-attr": {
+        "color": "#986801"
+    },
+    "hljs-selector-pseudo": {
+        "color": "#986801"
+    },
+    "hljs-number": {
+        "color": "#986801"
+    },
+    "hljs-symbol": {
+        "color": "#4078f2"
+    },
+    "hljs-bullet": {
+        "color": "#4078f2"
+    },
+    "hljs-link": {
+        "color": "#4078f2",
+        "textDecoration": "underline"
+    },
+    "hljs-meta": {
+        "color": "#4078f2"
+    },
+    "hljs-selector-id": {
+        "color": "#4078f2"
+    },
+    "hljs-title": {
+        "color": "#4078f2"
+    },
+    "hljs-emphasis": {
+        "fontStyle": "italic"
+    },
+    "hljs-strong": {
+        "fontWeight": "bold"
+    }
+}

package/src/overlay/Overlay.jsx

@@ -0,0 +1,75 @@
+import React, { useState, useEffect, forwardRef } from 'react'
+import { createPortal } from 'react-dom'
+
+const overlayRootId = 'ossy-overlay-root'
+
+export const Overlay = forwardRef(({
+  children,
+  isVisible = false,
+  onClose = () => {},
+  ...props
+}, ref) => {
+  const [overlayRoot, setOverlayRoot] = useState()
+
+  const onContentClick = event => {
+    event.stopPropagation()
+  }
+
+  useEffect(() => {
+    let overlayRoot = document.getElementById(overlayRootId)
+    if (!!overlayRoot) return setOverlayRoot(overlayRoot)
+    overlayRoot = document.createElement('div')
+    overlayRoot.id = overlayRootId
+    const body = document.querySelector('body')
+    body.appendChild(overlayRoot)
+    setOverlayRoot(overlayRoot)
+  }, [])
+
+  return (
+    <>
+      <style href="@ossy/design-system/overlay" precedence="high">
+      {`
+        [data-overlay] {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+          overflow: hidden;
+          background: hsla(0, 0%, 0%, .8);
+          z-index: 100;
+        }
+
+        [data-overlay-content] {
+          display: contents
+        }
+
+        @keyframes fade-in {
+          0% { opacity: 0 }
+          100% { opacity: 1 }
+        }
+
+        [data-animation="fade-in"] {
+          animation-name: fade-in;
+          animation-duration: .3s;
+          animation-iteration-count: 1;
+          animation-fill-mode: forwards;
+          animation-timing-function: ease-out;
+        }
+      `}
+      </style>
+      {
+        isVisible
+        && !!overlayRoot
+        && createPortal(
+          <div ref={ref} onClick={onClose} data-overlay data-animation="fade-in" {...props}>
+            <div onClick={onContentClick} data-overlay-content >
+              {children}
+            </div>
+          </div>,
+          overlayRoot
+        )
+      }
+    </>
+  )
+})

package/src/overlay/index.js

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

package/src/overlay/overlay.stories.jsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react'
+import { Button } from '../button'
+import { View } from '../view'
+import { Overlay } from './Overlay.jsx'
+
+export default {
+  title: 'Design System/Base/Overlay',
+  component: Overlay,
+  render: () => {
+    const [isOverlayOpen, setIsOverlayOpen] = useState(false)
+    return (
+      <>
+        <Button type="button" onClick={() => setIsOverlayOpen(true)}>
+          Open overlay
+        </Button>
+        <Overlay
+          isVisible={isOverlayOpen}
+          onClose={() => setIsOverlayOpen(false)}
+        >
+          <View
+            surface="primary"
+            inset="l"
+            roundness="m"
+            style={{
+              width: '400px',
+              height: '250px',
+              margin: '48px auto',
+            }}
+          >
+            Overlay content
+          </View>
+        </Overlay>
+      </>
+    )
+  },
+}
+
+export const Default = {}

package/src/page/DemoSidebar.jsx

@@ -0,0 +1,84 @@
+import React, { useState } from 'react'
+import { Button } from '../button'
+import { View } from '../view'
+
+const PACKAGE_NAV = [
+  { id: 'home', label: 'Home', prefix: 'home' },
+  { id: 'tasks', label: 'Tasks', prefix: 'calendar' },
+  { id: 'calendar', label: 'Calendar', prefix: 'calendar' },
+  { id: 'booking', label: 'Booking', prefix: 'calendar' },
+  { id: 'analytics', label: 'Analytics', prefix: 'chart' },
+]
+
+const WORKSPACE_NAV = [
+  { id: 'users', label: 'Users', prefix: 'user-list' },
+  { id: 'invitations', label: 'Invitations', prefix: 'mail' },
+  { id: 'settings', label: 'Settings', prefix: 'options' },
+]
+
+const navButtonStyle = {
+  justifyContent: 'flex-start',
+  padding: '8px 24px',
+}
+
+/**
+ * Static sidebar demo for Storybook — simplified nav rail without shell dependencies.
+ */
+export const DemoSidebar = ({ selectedId: selectedIdProp, onSelect, small = false }) => {
+  const [selectedId, setSelectedId] = useState(selectedIdProp ?? 'tasks')
+  const activeId = selectedIdProp ?? selectedId
+
+  const select = (id) => {
+    if (selectedIdProp === undefined) setSelectedId(id)
+    onSelect?.(id)
+  }
+
+  return (
+    <View
+      gap={small ? 's' : 'm'}
+      style={{
+        height: '100%',
+        minWidth: small ? '3.5rem' : '12.5rem',
+        maxWidth: small ? '3.5rem' : '15rem',
+        padding: small
+          ? 'var(--space-xs)'
+          : 'var(--space-xs)',
+        flexShrink: 0,
+        boxSizing: 'border-box',
+      }}
+    >
+      <View gap="s" style={{ flexGrow: 1, overflowY: 'auto', minHeight: 0 }} data-scroll>
+
+        <View style={{ flexGrow: 1 }} />
+
+        {PACKAGE_NAV.map((item) => (
+          <Button
+            key={item.id}
+            variant={activeId === item.id ? 'cta' : 'link'}
+            prefix={item.prefix}
+            aria-current={activeId === item.id ? 'page' : undefined}
+            onClick={() => select(item.id)}
+            style={navButtonStyle}
+          >
+            {item.label}
+          </Button>
+        ))}
+
+        <View style={{ flexGrow: 1 }} />
+
+        {WORKSPACE_NAV.map((item) => (
+          <Button
+            key={item.id}
+            variant={activeId === item.id ? 'cta' : 'link'}
+            prefix={item.prefix}
+            aria-current={activeId === item.id ? 'page' : undefined}
+            onClick={() => select(item.id)}
+            style={navButtonStyle}
+          >
+            {item.label}
+          </Button>
+        ))}
+      </View>
+    </View>
+  )
+}

package/src/page/Page.jsx

@@ -0,0 +1,112 @@
+import React, { Children } from 'react'
+import { View } from '../view'
+import { Slot } from '../component-slots'
+import { ContentHeader } from '../content-header'
+import { PageSection } from '../page-section'
+import { PAGE_LAYOUT_REGIONS } from '../component-slots/pageSlotKeys.js'
+
+/**
+ * Split page children into layout-region fallbacks (`region="header"`, …) vs
+ * unslotted body content for `page.content`.
+ *
+ * @param {import('react').ReactNode} children
+ */
+function partitionPageChildren (children) {
+  /** @type {Record<string, import('react').ReactNode>} */
+  const slotted = Object.fromEntries(PAGE_LAYOUT_REGIONS.map((region) => [region, null]))
+  /** @type {import('react').ReactNode[]} */
+  const content = []
+
+  Children.forEach(children, (child) => {
+    if (child == null || child === false) return
+    const region = child.props?.region ?? child.props?.['data-region']
+    if (typeof region === 'string' && Object.prototype.hasOwnProperty.call(slotted, region)) {
+      slotted[region] = child
+      return
+    }
+    content.push(child)
+  })
+
+  return { slotted, content }
+}
+
+/**
+ * Standard in-app page body inside the shell content slot.
+ * Registered `page.*` slots override; otherwise built-in header props and
+ * unslotted children are used as fallbacks (see design-system README).
+ */
+export const Page = ({
+  layout = 'page',
+  maxWidth,
+  scroll = false,
+  surface = 'primary',
+  inset = 's',
+  gap = 's',
+  title,
+  description,
+  near,
+  far,
+  header,
+  children,
+  style,
+  ...viewProps
+}) => {
+  const { slotted, content } = partitionPageChildren(children)
+
+  const hasBuiltInHeader =
+    header != null ||
+    title != null ||
+    description != null ||
+    near != null ||
+    far != null
+
+  const headerFallback =
+    slotted.header ??
+    header ??
+    (hasBuiltInHeader ? (
+      <ContentHeader
+        inset="none"
+        title={title}
+        description={description}
+        near={near}
+        far={far}
+      />
+    ) : null)
+
+  let contentFallback = null
+  if (content.length > 0) {
+    contentFallback = maxWidth ? (
+      <PageSection maxWidth={maxWidth} gap={gap}>
+        {content}
+      </PageSection>
+    ) : (
+      content
+    )
+  }
+
+  return (
+    <View
+      surface={surface}
+      layout={layout}
+      inset={inset}
+      gap={gap}
+      data-page-scroll={scroll ? 'internal' : 'external'}
+      style={{
+        ...(scroll ? { height: '100%', minHeight: 0 } : { minHeight: '100%' }),
+        ...style,
+      }}
+      {...viewProps}
+    >
+      <Slot region="header" view="page.header" fallback={headerFallback} />
+      <Slot region="sidebar-primary" view="page.sidebar-primary" fallback={slotted['sidebar-primary']} />
+      <Slot region="sidebar-secondary" view="page.sidebar-secondary" fallback={slotted['sidebar-secondary']} />
+      <Slot
+        region="content"
+        view="page.content"
+        fallback={contentFallback}
+        style={scroll ? { overflow: 'auto' } : undefined}
+      />
+      <Slot region="footer" view="page.footer" fallback={slotted.footer} />
+    </View>
+  )
+}