@ossy/design-system 3.0.2 → 3.0.4

package/src/content-header/ContentHeader.jsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { Text } from '../text'
+import { HeaderLayout } from '../header-layout/HeaderLayout.jsx'
+
+function renderTitle ({
+  title,
+  titleParams,
+  titleAs = 'h1',
+  titleVariant = 'heading-default',
+}) {
+  if (title == null) return null
+  if (typeof title === 'string') {
+    return (
+      <Text
+        as={titleAs}
+        variant={titleVariant}
+        text={title}
+        params={titleParams}
+      />
+    )
+  }
+  return title
+}
+
+function renderDescription ({
+  description,
+  descriptionParams,
+  descriptionVariant = 'default',
+  descriptionMaxWidth = 'xs',
+  lead,
+}) {
+  if (lead != null) return lead
+  if (description == null) return null
+  return (
+    <Text
+      variant={descriptionVariant}
+      text={description}
+      params={descriptionParams}
+      maxWidth={descriptionMaxWidth}
+    />
+  )
+}
+
+/**
+ * Standard in-app page intro: title (+ optional near slot) on the left,
+ * far slot on the right, description below.
+ */
+export const ContentHeader = ({
+  title,
+  titleParams,
+  titleAs = 'h1',
+  titleVariant = 'heading-default',
+
+  description,
+  descriptionParams,
+  descriptionVariant = 'default',
+  descriptionMaxWidth = 'xs',
+  lead,
+
+  near,
+  far,
+  children,
+
+  inset = 'list-row',
+  gap = 's',
+  ...props
+}) => (
+  <HeaderLayout
+    componentName="content-header"
+    inset={inset}
+    gap={gap}
+    title={renderTitle({ title, titleParams, titleAs, titleVariant })}
+    near={near}
+    far={far}
+    description={renderDescription({
+      description,
+      descriptionParams,
+      descriptionVariant,
+      descriptionMaxWidth,
+      lead,
+    })}
+    {...props}
+  >
+    {children}
+  </HeaderLayout>
+)

package/src/content-header/ContentHeader.stories.jsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import { Button } from '../button'
+import { Tags } from '../tags'
+import { ContentHeader } from './ContentHeader.jsx'
+
+export default {
+  title: 'Design System/Layout/ContentHeader',
+  component: ContentHeader,
+  render: ({ showFar, statusTags, ...args }) => (
+    <ContentHeader
+      {...args}
+      far={showFar ? (
+        <Button variant="cta" prefix="add" label="design-system.add" />
+      ) : undefined}
+      near={statusTags?.length ? (
+        <Tags tags={statusTags} size="s" />
+      ) : undefined}
+    />
+  ),
+}
+
+export const Default = {
+  args: {
+    title: 'design-system.story.pageTitle',
+    description: 'design-system.story.pageDescription',
+    showFar: true,
+  },
+}
+
+export const WithNearSlot = {
+  args: {
+    title: 'design-system.story.pageTitle',
+    description: 'design-system.story.pageDescription',
+    statusTags: ['Coming soon', 'Beta'],
+    showFar: true,
+  },
+}
+
+export const CustomTitle = {
+  render: () => (
+    <ContentHeader
+      title={(
+        <span style={{ fontWeight: 600, fontSize: '1.25rem' }}>
+          Custom title node
+        </span>
+      )}
+      description="design-system.story.pageDescription"
+      near={<Tags tags={['Beta']} size="s" />}
+      far={<Button variant="cta" prefix="add" label="design-system.add" />}
+    />
+  ),
+}
+
+export const DescriptionOnly = {
+  args: {
+    title: 'design-system.story.analyticsTitle',
+    description: 'design-system.story.analyticsDescription',
+    showFar: false,
+  },
+}
+
+export const WideDescription = {
+  args: {
+    title: 'design-system.story.toolsTitle',
+    description: 'design-system.story.toolsDescription',
+    descriptionMaxWidth: 'm',
+    statusTags: ['Beta'],
+    showFar: false,
+  },
+}

package/src/content-header/index.js

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

package/src/context-menu/ContextMenu.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Button } from '../button'
+import { View } from '../view'
+
+const ContextMenuItem = ({...props}) => {
+  return (
+    <Button variant="command" style={{ justifyContent: 'flex-start', gap: 'var(--space-s)', padding: 'var(--space-xs) var(--space-s)' }} {...props}/>
+  )
+}
+
+const ContextMenuSeparator = ({ className = '', ...props}) =>
+  <li className={`context-menu__separator ${className}`} {...props}>
+  </li>
+
+export const ContextMenu = ({
+  surface = 'primary',
+  children,
+  ...props
+}) => (
+  <View data-context-menu style={{ display: 'inline-flex', minWidth: '150px' }} gap="xs" surface={surface} {...props}>
+    <style href="@ossy/design-system/context-menu" precedence="high">
+    {`
+      [data-context-menu] {
+        border-radius: var(--space-s);
+        box-shadow: 0 4px 18px hsla(0, 0%, 0%, 0.14);
+        border: 1px solid var(--separator, hsl(0, 0%, 90%));
+        padding: var(--space-s) var(--space-xs);
+        list-style: none;
+        min-width: 150px;
+      }
+    
+      [data-context-menu] .context-menu__separator {
+        height: 1px;
+        background-color: var(--separator, hsl(0, 0%, 95%));
+      }
+    `}
+    </style>
+    {children}
+  </View>
+)
+
+ContextMenu.Item = ContextMenuItem
+ContextMenu.Separator = ContextMenuSeparator

package/src/context-menu/ContextMenu.stories.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { ContextMenu } from './ContextMenu.jsx'
+
+export default {
+  title: 'Design System/Actions/ContextMenu',
+  component: ContextMenu,
+  render: () => (
+    <ContextMenu>
+      <ContextMenu.Item prefix="details-more">Details</ContextMenu.Item>
+      <ContextMenu.Item prefix="pen">Edit</ContextMenu.Item>
+      <ContextMenu.Separator />
+      <ContextMenu.Item prefix="share">Share</ContextMenu.Item>
+      <ContextMenu.Separator />
+      <ContextMenu.Item variant="command-danger" prefix="trash">Remove</ContextMenu.Item>
+    </ContextMenu>
+  ),
+}
+
+export const Default = {}

package/src/context-menu/index.js

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

package/src/create-icons.js

@@ -0,0 +1,93 @@
+const fs = require('fs');
+
+
+const OUTPUT_PATH = './icons/icons2';
+
+const iconFileNames = fs.readdirSync('./node_modules/css.gg/icons/svg')
+    .map(x => x.replace('.svg', ''))
+    .map(x => x.toLowerCase())
+
+fs.rmSync(OUTPUT_PATH, { recursive: true, force: true })
+fs.mkdirSync(OUTPUT_PATH, { recursive: true, force: true })
+
+iconFileNames.forEach((fileName) => {
+    const iconName = fileName.replace('.svg', '');
+
+    const svg = fs.readFileSync(`./node_modules/css.gg/icons/svg/${fileName}.svg`, 'utf8')
+        .replace('<svg', '<svg {...props}')
+    
+    const jsx = `
+import React from 'react'
+
+export default props => ${svg}
+
+`
+
+    fs.writeFileSync(`${OUTPUT_PATH}/${iconName}.jsx`, jsx)
+    
+})
+
+const iconImports = iconFileNames.map((fileName) => `'${fileName}': lazy(() => import('./icons2/${fileName}.jsx')), \n`).join('')
+
+const iconsJsx = `
+'use client'
+import React, { lazy, Suspense, useMemo } from 'react'
+import { css } from 'glamor'
+
+export const Icons = {
+    ${iconImports}
+}
+
+const iconSizes = css({
+    '[data-size="s"]' {
+      width: 'var(--icon-size-s, 18px)',
+      height: 'var(--icon-size-s, 18px)',
+    },
+    '[data-size="m"]' {
+      width: 'var(--icon-size-m, 24px)',
+      height: 'var(--icon-size-m, 24px)',
+    },
+    '[data-size="l"]' {
+      width: 'var(--icon-size-l, 48px)',
+      height: 'var(--icon-size-l, 48px)',
+    },
+    '[data-size="xl"]' {
+      width: 'var(--icon-size-l, 64px)',
+      height: 'var(--icon-size-l, 64px)',
+    },
+  })
+
+export const Icon = ({ name, variant, size = 's', ...props }) => {
+    const Icon = Icons[name]
+
+    const styles = useMemo(() => {
+        return css({
+          color: \`var(--on-icon-\${variant}, var(--on-icon-default))\`,
+          fill: \`var(--on-icon-\${variant}, var(--on-icon-default))\`,
+          fontSize: \`var(--icon-\${variant}--size, var(--icon-default--size))\`,
+          ':hover': {
+            color: \`var(--on-icon-\${variant}--hover, var(--on-icon-default--hover))\`,
+            fill: \`var(--on-icon-\${variant}--hover, var(--on-icon-default--hover))\`,
+            cursor: \`var(--icon-\${variant}--cursor, var(--on-icon-default--cursor))\`,
+          },
+          ':focus': {
+            color: \`var(--on-icon-\${variant}--hover, var(--on-icon-default--hover))\`,
+            fill: \`var(--on-icon-\${variant}--hover, var(--on-icon-default--hover))\`,
+          },
+          ':disabled': {
+            color: \`var(--on-icon-\${variant}--disabled, var(--on-icon-default--disabled))\`,
+            fill: \`var(--on-icon-\${variant}--disabled, var(--on-icon-default--disabled))\`,
+            cursor: 'not-allowed'
+          },
+        })
+      }, [variant])
+
+    return (
+        <Suspense fallback={<></>}>
+            <Icon {...props} data-size={size} {...styles} {...iconSizes} />
+        </Suspense>
+    )
+}
+`
+
+fs.writeFileSync(`./icons/Icon.jsx`, iconsJsx)

package/src/date-display/DateDisplay.jsx

@@ -0,0 +1,44 @@
+import React, { useMemo } from 'react'
+import { Text } from '../text/index.js'
+import { useLocale } from '../locale/index.js'
+
+/**
+ * Renders a persisted Unix ms timestamp as localized text via {@link Text}.
+ *
+ * @param {object} props
+ * @param {number | null | undefined} props.value — Unix ms from form fields / resources
+ * @param {'full' | 'long' | 'medium' | 'short'} [props.dateStyle]
+ * @param {'full' | 'long' | 'medium' | 'short'} [props.timeStyle]
+ * @param {Intl.DateTimeFormatOptions} [props.formatOptions]
+ */
+export function DateDisplay ({
+  value,
+  dateStyle,
+  timeStyle,
+  formatOptions,
+  variant = 'default',
+  as,
+  ...textProps
+}) {
+  const { language } = useLocale()
+
+  const label = useMemo(() => {
+    if (value == null || value === '' || !Number.isFinite(Number(value))) return ''
+    const locale = language === 'sv' ? 'sv-SE' : 'en-GB'
+    const options = {
+      ...(dateStyle != null ? { dateStyle } : {}),
+      ...(timeStyle != null ? { timeStyle } : {}),
+      ...(dateStyle == null && timeStyle == null && formatOptions == null ? { dateStyle: 'medium' } : {}),
+      ...formatOptions,
+    }
+    return new Intl.DateTimeFormat(locale, options).format(new Date(Number(value)))
+  }, [value, language, dateStyle, timeStyle, formatOptions])
+
+  if (!label) return null
+
+  return (
+    <Text variant={variant} as={as} {...textProps}>
+      {label}
+    </Text>
+  )
+}

package/src/date-display/DateDisplay.stories.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { View } from '../view/index.js'
+import { DateDisplay } from './DateDisplay.jsx'
+
+export default {
+  title: 'Design System/Display/DateDisplay',
+  component: DateDisplay,
+  parameters: {
+    layout: 'padded',
+  },
+}
+
+const sampleMs = Date.parse('2026-06-20T14:30:00.000Z')
+
+export const DateOnly = () => (
+  <DateDisplay value={sampleMs} dateStyle="medium" />
+)
+
+export const WithTime = () => (
+  <DateDisplay value={sampleMs} dateStyle="medium" timeStyle="short" />
+)
+
+export const LongFormat = () => (
+  <DateDisplay value={sampleMs} dateStyle="full" timeStyle="short" />
+)
+
+export const Variants = () => (
+  <View gap="s">
+    <DateDisplay value={sampleMs} variant="heading-secondary" as="h2" dateStyle="long" />
+    <DateDisplay value={sampleMs} variant="small" dateStyle="medium" timeStyle="short" />
+  </View>
+)

package/src/date-display/index.js

@@ -0,0 +1 @@
+export { DateDisplay } from './DateDisplay.jsx'

package/src/delayed-render/DelayedRender.jsx

@@ -0,0 +1,15 @@
+import React, { useState } from 'react'
+import { useTimeout } from '../hooks/index.js'
+
+export const DelayedRender = ({
+  delay = 1000, // milliseconds
+  children
+}) => {
+  const [render, setRender] = useState(false)
+
+  useTimeout(() => {
+    setRender(true)
+  }, delay)
+
+  return render ? children : <></>
+}

package/src/delayed-render/index.js

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

package/src/drop-zone/DropZone.jsx

@@ -0,0 +1,21 @@
+import React, { cloneElement } from 'react'
+import { asDragable } from './asDragable.jsx'
+import { asDropZone } from './asDropZone.jsx'
+
+export const DropZone = ({
+  children,
+  ...props
+}) => {
+  const Component = asDropZone(props => cloneElement(children, props))
+  return <Component {...props}/>
+}
+
+const Dragable = ({
+  children,
+  ...props
+}) => {
+  const Component = asDragable(props => cloneElement(children, props))
+  return <Component {...props}/>
+}
+
+DropZone.Dragable = Dragable

package/src/drop-zone/asDragable.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+export const asDragable = Component => ({
+  dropEffect = 'move',
+  format = 'text/plain',
+  dragData,
+  ...restProps
+}) => {
+
+  const onDragStart = event => {
+    // eslint-disable-next-line no-param-reassign
+    event.dataTransfer.dropEffect = dropEffect
+    event.dataTransfer.setData(format, dragData)
+  }
+
+  return <Component
+    draggable="true"
+    onDragStart={onDragStart}
+    {...restProps}
+  />
+}

package/src/drop-zone/asDropZone.jsx

@@ -0,0 +1,70 @@
+import React from 'react'
+
+// TODO: remove the need for className prop
+// it causses ennying issues
+export const asDropZone = Component => ({
+  dropEffect = 'move',
+  onDragOver = () => {},
+  onDragEnter = () => {},
+  onDragLeave = () => {},
+  onDrop = () => {},
+  format = 'text/plain',
+  ...props
+}) => {
+
+  const _onDragOver = event => {
+    event.preventDefault()
+    // eslint-disable-next-line no-param-reassign
+    event.dataTransfer.dropEffect = dropEffect
+    onDragOver(event)
+  }
+
+  const _onDragEnter = event => {
+    event.preventDefault()
+    event.target.classList.add('dropzone--dragover')
+    onDragEnter(event)
+  }
+
+  const _onDragLeave = event => {
+    event.preventDefault()
+    event.target.classList.remove('dropzone--dragover')
+    onDragLeave(event)
+  }
+
+  const _onDrop = event => {
+    event.preventDefault()
+    event.target.classList.remove('dropzone--dragover')
+    onDrop(event.dataTransfer.getData(format))
+  }
+
+  return (
+    <>
+      <style href="@ossy/design-system/dropzone" precedence="high">
+      {`
+        [data-dropzone].dropzone--dragover {
+          outline: 1px solid hsl(199, 98%, 43%);
+          position: relative;
+        }
+
+        [data-dropzone].dropzone--dragover:after {
+          content: '';
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          background-color: hsla(199, 98%, 43%, .2);
+        }
+      `}
+      </style>
+      <Component
+        onDragOver={_onDragOver}
+        onDragEnter={_onDragEnter}
+        onDragLeave={_onDragLeave}
+        onDrop={_onDrop}
+        data-dropzone
+        {...props}
+      />
+    </>
+  )
+}

package/src/drop-zone/dropZone.stories.jsx

@@ -0,0 +1,128 @@
+import React, { useState } from 'react'
+import { DropZone } from './DropZone.jsx'
+
+export default {
+  title: 'Design System/Actions/DropZone',
+  component: DropZone,
+};
+
+export const ComponentExample = () => {
+  const [droppedValue, setDroppedValue] = useState()
+
+  const dropZoneStyles = {
+    width: '200px',
+    height: '100px',
+    background: 'hsl(0, 0%, 95%)',
+    border: '1px solid hsl(0, 0%, 90%)',
+    marginBottom: '16px',
+    textAlign: 'center'
+  }
+
+  const dragableBoxStyles = {
+    width: '50px',
+    height: '50px',
+    background: 'hsl(0, 0%, 95%)',
+    border: '1px solid hsl(0, 0%, 90%)',
+    borderRadius: '2px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+
+  return (
+    <section>
+
+      <DropZone onDrop={data => setDroppedValue(data)}>
+        <div style={dropZoneStyles}>
+          <div style={{ padding: '16px'}}>
+            Drop a box on me!
+          </div>
+          {droppedValue}
+        </div>
+      </DropZone>
+
+      <div style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '200px'}}>
+        <DropZone.Dragable dragData="Foo" style={dragableBoxStyles}>
+          <div>
+            Foo
+          </div>
+        </DropZone.Dragable>
+        <DropZone.Dragable dragData="Bar" style={dragableBoxStyles}>
+          <div>
+            Bar
+          </div>
+        </DropZone.Dragable>
+        <DropZone.Dragable dragData="Baz" style={dragableBoxStyles}>
+          <div>
+            Baz
+          </div>
+        </DropZone.Dragable>
+      </div>
+
+    </section>
+  )
+  }
+
+// export const HOCExample = () => {
+//     const [droppedValue, setDroppedValue] = useState()
+//
+//     const dropZoneStyles = {
+//       width: '200px',
+//       height: '100px',
+//       background: 'hsl(0, 0%, 95%)',
+//       border: '1px solid hsl(0, 0%, 90%)',
+//       marginBottom: '16px',
+//       textAlign: 'center'
+//     }
+//
+//     const dragableBoxStyles = {
+//       width: '50px',
+//       height: '50px',
+//       background: 'hsl(0, 0%, 95%)',
+//       border: '1px solid hsl(0, 0%, 90%)',
+//       borderRadius: '2px',
+//       display: 'flex',
+//       justifyContent: 'center',
+//       alignItems: 'center'
+//     }
+//
+//     const DropZone = () => (
+//
+//     )
+//
+//
+//     const DropZone = asDropZone
+//
+//     return (
+//       <section>
+//
+//         <DropZone onDrop={data => setDroppedValue(data)}>
+//           <div style={dropZoneStyles}>
+//             <div style={{ padding: '16px'}}>
+//               Drop a box on me!
+//             </div>
+//             {droppedValue}
+//           </div>
+//         </DropZone>
+//
+//         <div style={{ display: 'flex', justifyContent: 'space-between', maxWidth: '200px'}}>
+//           <DropZone.Dragable dragData="Foo" style={dragableBoxStyles}>
+//             <div>
+//               Foo
+//             </div>
+//           </DropZone.Dragable>
+//           <DropZone.Dragable dragData="Bar" style={dragableBoxStyles}>
+//             <div>
+//               Bar
+//             </div>
+//           </DropZone.Dragable>
+//           <DropZone.Dragable dragData="Baz" style={dragableBoxStyles}>
+//             <div>
+//               Baz
+//             </div>
+//           </DropZone.Dragable>
+//         </div>
+//
+//       </section>
+//     )
+//     }

package/src/drop-zone/index.js

@@ -0,0 +1,3 @@
+export * from './asDragable.jsx'
+export * from './asDropZone.jsx'
+export * from './DropZone.jsx'