@ossy/design-system 3.0.2 → 3.0.4

package/src/tags/Tags.jsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { Button } from '../button'
+import { View } from '../view'
+
+export const Tag = ({
+  onSelect = () => {},
+  active,
+  ...props
+}) => (
+  <li>
+    <Button
+      variant={active ? 'tag-active' : 'tag'}
+      onClick={() => onSelect(props.children)}
+      {...props}
+    />
+  </li>
+)
+
+const alphabeticalAscending = (a, b) => {
+  return a.localeCompare(b)
+}
+
+export const Tags = ({
+  tags = [],
+  activeTags = [],
+  size = 'm',
+  gap = 's',
+  onSelect,
+  ...props
+}) => {
+  const sortedTags = [...tags].sort(alphabeticalAscending)
+
+  return (
+    <>
+
+    <style href="@ossy/design-system/tags" precedence="low">
+    {`
+      [data-tags] {
+        display: flex;
+        flex-wrap: wrap;
+        list-style: none;
+        user-select: none;
+        padding: 0;
+        margin: 0;
+      }
+
+      [data-tags] [data-size="m"] {
+        padding: var(--space-s) var(--space-m)
+      }
+
+      [data-tags] [data-size="s"] {
+        padding: var(--space-xs) var(--space-m)
+      }
+    `}
+    </style>
+
+    <meta name="keywords" content={tags.join(',')} />
+
+    <View as="ul" layout="row-wrap" data-tags  gap={gap} {...props}>      
+      {sortedTags.map(tag => (
+        <Tag
+          key={tag}
+          active={activeTags.includes(tag)}
+          data-size={size}
+          onSelect={onSelect}
+        >{tag}
+        </Tag>
+      ))}
+    </View>
+    </>
+  )
+}

package/src/tags/Tags.stories.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Tags } from './Tags.jsx'
+
+export default {
+  title: 'Design System/Display/Tags',
+  component: Tags,
+  render: (args) => <Tags {...args} />,
+  args: {
+    tags: ['JavaScript', 'TypeScript', 'Angular', 'React'],
+    activeTags: ['Angular']
+  }
+}
+
+
+export const Medium = {
+  args: {
+   size: 'm'
+  }
+}
+
+export const Small = {
+  args: {
+    size: 's'
+  }
+}

package/src/tags/index.js

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

package/src/text/Text.jsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { useLocale } from '../locale/index.js'
+
+export const Text = ({
+  as: Element = 'p',
+  variant = 'default',
+  maxWidth = 'full',
+  text,
+  params,
+  children,
+  ...props
+}) => {
+  const { t } = useLocale()
+  const content = children ?? (text != null ? t(text, params) : undefined)
+
+  return (
+    <>
+      <style href={`@ossy/design-system/max-width/${maxWidth}`} precedence='high'>
+      {`
+        [data-max-width="${maxWidth}"] {
+          maxWidth: var(--max-width-${maxWidth})
+        }
+      `}
+      </style>
+      <style href="@ossy/design-system/text" precedence='high'>
+      {`
+        [data-text] {
+          display: block;
+          box-sizing: border-box;
+          color: var(--color);
+          font-family: var(--font-family);
+          font-size: var(--font-size);
+          font-weight: var(--font-weight);
+          line-height: var(--line-height);
+          letter-spacing: var(--letter-spacing);
+          text-shadow: var(--text-shadow);
+          margin: 0;
+          margin-bottom: var(--margin-bottom);
+        }
+
+        [data-text]:last-of-type {
+          marginBottom: 0
+        }
+      `}
+      </style>
+      <style href={`@ossy/design-system/text/${variant}`} precedence='high'>
+      {`
+        [data-text-variant="${variant}"] {
+          --max-width: var(--text-${variant}-max-width, var(--text-default-max-width, 100%));
+          --color: var(--text-${variant}-color, var(--foreground, inherit));
+          --font-family: var(--text-${variant}-font-family, var(--text-default-font-family, sans-serif));
+          --font-size: var(--text-${variant}-font-size, var(--text-default-font-size, 2rem));
+          --font-weight: var(--text-${variant}-font-weight, var(--text-default-font-weight, 400));
+          --line-height: var(--text-${variant}-line-height, var(--text-default-line-height, 1.6));
+          --margin-bottom: var(--text-${variant}-margin-bottom, var(--text-default-margin-bottom, 0));
+          --letter-spacing: var(--text-${variant}-letter-spacing, var(--text-default-letter-spacing));
+          --text-shadow: var(--text-${variant}-text-shadow, var(--text-default-text-shadow, none));
+        }
+      `}
+      </style>
+      <Element data-text data-text-variant={variant} data-max-width={maxWidth} children={content} {...props} />
+    </>
+  )
+}

package/src/text/Text.stories.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Text } from './Text.jsx'
+
+const body = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis massa eget mauris posuere feugiat.'
+
+export default {
+  title: 'Design System/Display/Text',
+  component: Text,
+  render: (props) => <Text {...props}>{props.children ?? body}</Text>,
+}
+
+export const Default = { args: { as: 'p', variant: 'default' } }
+
+export const HeadingPrimary = { args: { as: 'h1', variant: 'heading-primary', children: 'Heading primary' } }
+
+export const HeadingSecondary = { args: { as: 'h2', variant: 'heading-secondary', children: 'Heading secondary' } }
+
+export const HeadingTertiary = { args: { as: 'h3', variant: 'heading-tertiary', children: 'Heading tertiary' } }
+
+export const Display = { args: { as: 'h1', variant: 'display', children: 'Display headline' } }
+
+export const Lead = { args: { as: 'p', variant: 'lead', children: 'Lead paragraph' } }
+
+export const Logo = { args: { as: 'span', variant: 'logo', children: 'Logo' } }
+
+export const Small = { args: { as: 'p', variant: 'small', children: body } }
+
+export const WithTextProp = {
+  render: () => (
+    <Text as="p" variant="default" text="design-system.fields.addTag" />
+  ),
+}

package/src/text/index.js

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

package/src/theme/Theme.jsx

@@ -0,0 +1,110 @@
+import React, {
+  useState,
+  createContext,
+  useContext,
+  useId,
+} from 'react'
+import { createCss } from './createCss.js'
+
+const getCssVars = (styleObject, cssVars = [], _previousPath = '') => {
+
+  return Object.entries(styleObject).map(([key, value]) => {
+
+    if (typeof value === 'object') {
+      return !!_previousPath
+        ? getCssVars(value, cssVars, `${_previousPath}-${key}`)
+        : getCssVars(value, cssVars, `--${key}`)
+    } else if (!!_previousPath) {
+      return { [`${_previousPath}-${key}`]: value }
+    } else {
+      return { [`--${key}`]: value }
+    }
+  }).flat()
+
+}
+
+export const addCssProperties = (element, styleObject) => {
+  getCssVars(styleObject)
+    .flatMap(x => Object.entries(x))
+    .forEach(([name, value]) => {
+      element.style.setProperty(name, value)
+  })
+}
+
+export const removeCssProperties = (element, styleObject) => {
+  getCssVars(styleObject)
+    .flatMap(x => Object.entries(x))
+    .forEach(([name, value]) => {
+      element.style.removeProperty(name)
+  })
+}
+
+const ThemeContext = createContext({})
+
+export const Theme = ({
+  theme,
+  themes = {},
+  isolated = false,
+  children,
+  ...props
+}) => {
+  const _themes = typeof theme === 'object' ? { default: theme } : themes
+  const [activeTheme, setTheme] = useState(typeof theme === 'object' ? 'default' : theme)
+  const activeThemeValues = _themes[activeTheme]
+  const scopeId = useId()
+
+  const scope = isolated ? `[data-theme-scope="${scopeId}"]` : ':root'
+  const styleHref = isolated
+    ? `@ossy/design-system/theme/${scopeId}`
+    : `@ossy/design-system/theme/${activeTheme}`
+
+  return (
+    <ThemeContext.Provider value={{ activeTheme, themes: Object.keys(_themes), setTheme, }}>
+      <style href="@ossy/design-system/reset" precedence='high'>
+        {`*, *::before, *::after { box-sizing: border-box; } body { margin: 0; padding: 0; }`}
+      </style>
+      <style href="@ossy/design-system/surface" precedence='high'>
+      {`
+        [data-surface] {
+          background: var(--background, transparent);
+          color: var(--foreground);
+          fill: var(--foreground);
+          backdrop-filter: var(--backdropFilter);
+          transition: background .3s, color .3s, fill .3s;
+        }
+
+        [data-surface="neutral"] {
+          --background: transparent;
+          --backdropFilter: none;
+        }
+
+        [data-selectable] {
+          cursor: pointer;
+        }
+
+        [data-selectable]:hover {
+          --background: var(--background-hover);
+          --foreground: var(--foreground-hover);
+        }
+
+        [data-selectable]:active {
+          --background: var(--background-active);
+          --foreground: var(--foreground-active);
+        }
+      `}
+      </style>
+      <style href={styleHref}>
+        {createCss(activeThemeValues, scope)}
+      </style>
+      {isolated ? (
+        <div data-theme-scope={scopeId} {...props}>
+          {children}
+        </div>
+      ) : (
+        children
+      )}
+    </ThemeContext.Provider>
+  )
+}
+
+export const useTheme = () => useContext(ThemeContext)

package/src/theme/Theme.stories.jsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import { View } from '../view'
+import { Theme, useTheme } from './Theme'
+
+function ThemeSwitcher () {
+  const { activeTheme, setTheme, themes } = useTheme()
+  return (
+    <View gap="s">
+      <div>Active theme: {activeTheme}</div>
+      {themes.map((themeName) => (
+        <button key={themeName} type="button" onClick={() => setTheme(themeName)}>
+          {themeName}
+        </button>
+      ))}
+    </View>
+  )
+}
+
+export default {
+  title: 'Design System/Base/Theme',
+  component: Theme,
+  render: (args) => (
+    <div id={args.elementSelector.replace('#', '')}>
+      <Theme {...args}>
+        <View
+          surface="primary"
+          style={{ width: '50px', height: '50px' }}
+        />
+      </Theme>
+    </div>
+  ),
+}
+
+export const SingleTheme = {
+  args: {
+    elementSelector: '#single-theme-root',
+    theme: {
+      'surface-primary': 'tomato',
+    },
+  },
+}
+
+export const MultipleThemes = {
+  render: (args) => (
+    <div id={args.elementSelector.replace('#', '')}>
+      <Theme {...args}>
+        <View gap="m">
+          <View surface="primary" style={{ width: '50px', height: '50px' }} />
+          <ThemeSwitcher />
+        </View>
+      </Theme>
+    </div>
+  ),
+  args: {
+    elementSelector: '#multi-theme-root',
+    theme: 'light',
+    themes: {
+      light: { 'surface-primary': 'lightblue' },
+      dark: { 'surface-primary': 'hsl(0, 0%, 20%)' },
+      tomato: { 'surface-primary': 'tomato' },
+    },
+  },
+}

package/src/theme/createCss.js

@@ -0,0 +1,141 @@
+import { toHsl } from './toHsl'
+
+const createSurfacesCss = (theme, scope) => css => {
+  const surfaces = theme.surfaces
+  if (!surfaces) return ''
+  const surfacePrefix = scope === ':root' ? '' : `${scope} `
+  return Object.entries(surfaces)
+    .reduce((css, [surfaceName, rules]) => {
+      const vars = createCssVars(addSurfaceDefaults(rules))
+      return css + (
+`
+${surfacePrefix}[data-surface="${surfaceName}"] {
+  ${vars}
+}
+`
+)}, css)
+}
+
+const createSpacingCss = (theme, scope) => css => {
+  const { space } = theme
+  if (!space) return ''
+  const vars = createCssVars(Object.entries(space).reduce((acc, [key, value]) => ({...acc, [`space-${key}`]: value}), {}))
+  return css + (
+`
+  ${scope} {
+    ${vars}
+  }
+`
+  )
+}
+
+const createMaxWidthCss = (theme, scope) => css => {
+  const maxWidths = theme.maxWidth || theme['max-width']
+  if (!maxWidths) return ''
+  const vars = createCssVars(Object.entries(maxWidths).reduce((acc, [key, value]) => ({...acc, [`max-width-${key}`]: value}), {}))
+  return css + (
+`
+  ${scope} {
+    ${vars}
+  }
+`
+  )
+}
+
+const createSurfaceVars = (theme, scope) => css => {
+  const surfaces = theme.surfaces
+  if (!surfaces) return ''
+  const vars = Object.entries(surfaces)
+    .filter(([, rules]) => rules && typeof rules.background === 'string')
+    .map(([name, rules]) => `--surface-${name}: ${rules.background};`)
+    .join('\n    ')
+  if (!vars) return ''
+  return css + (
+`
+  ${scope} {
+    ${vars}
+  }
+`
+  )
+}
+
+const createRestVars = (theme, scope) => css => {
+  const vars = createCssVars(theme)
+  const separatorAlias = theme.separator ? '    --separator: var(--separator-primary);\n' : ''
+  return css + (
+`
+  ${scope} {
+    ${separatorAlias}${vars}
+  }
+`
+  )
+}
+
+export const createCss = (theme, scope = ':root') => {
+  if (!theme) return ''
+  const restTheme = { ...theme, maxWidth: undefined, 'max-width': undefined, surfaces: undefined, space: undefined, surface: undefined }
+  return [
+    createSpacingCss(theme, scope),
+    createMaxWidthCss(theme, scope),
+    createSurfaceVars(theme, scope),
+    createSurfacesCss(theme, scope),
+    createRestVars(restTheme, scope),
+  ].reduce((css, fn) => fn(css), '')
+}
+
+function createCssVars(themePortion) {
+  if (!themePortion) return ''
+  return getCssVars(themePortion)
+    .flatMap(Object.entries)
+    .reduce((acc, [name, value]) => {
+      return acc + `${name}: ${value};\n`
+    }, '')
+}
+
+function getCssVars(styleObject, cssVars = [], _previousPath = '') {
+  return Object.entries(styleObject).map(([key, value]) => {
+
+    if (typeof value === 'object') {
+      return !!_previousPath
+        ? getCssVars(value, cssVars, `${_previousPath}-${key}`)
+        : getCssVars(value, cssVars, `--${key}`)
+    } else if (!!_previousPath) {
+      return { [`${_previousPath}-${key}`]: value }
+    } else {
+      return { [`--${key}`]: value }
+    }
+  }).flat()
+}
+
+
+export function differenciateColor(color) {
+  const [h, s, l, a = 1] = toHsl(color)
+  const isDark = l < 50
+  const isTransparent = a < 1
+  const isNeutral = s < 10
+  
+  const newl = isDark ? l + 5 : l - 5
+  return `hsla(${h}, ${s}%, ${newl}%, ${a})`
+}
+
+function addSurfaceDefaults(surface) {
+  const foreground = surface.foreground || 'hsl(182, 23%, 30%)'
+  // TODO: check if background is a color, it could be a gradient or image
+  const foregroundHover = surface['foreground-hover'] || differenciateColor(foreground)
+  const foregroundActive = surface['foreground-active'] || differenciateColor(foregroundHover)
+
+  const background = surface.background || 'hsl(0, 0%, 99%)'
+  const backgroundHover = surface['background-hover'] || differenciateColor(background)
+  const backgroundActive = surface['background-active'] || differenciateColor(backgroundHover)
+
+  return {
+    foreground: foreground,
+    'foreground-hover': foregroundHover,
+    'foreground-active': foregroundActive,
+    background: background,
+    'background-hover': backgroundHover,
+    'background-active': backgroundActive,
+    backdropFilter: 'saturate(180%) blur(10px)',
+    ...surface
+  }
+}

package/src/theme/index.js

@@ -0,0 +1,2 @@
+export * from './Theme.jsx'
+export * from './createCss.js'

package/src/theme/toHsl.js

@@ -0,0 +1,97 @@
+// Sure, here's a JavaScript function that can convert a color given in any common format (hex, RGB) to HSL:
+
+// ### Explanation:
+
+// 1. **Hex to RGB Conversion (`hexToRgb`):** Converts a hex color string to an RGB object.
+// 2. **RGB to HSL Conversion (`rgbToHsl`):** Converts RGB values to HSL using normalization and calculating hue, saturation, and lightness.
+// 3. **Main Conversion Function (`colorToHsl`):** Accepts either a hex string or an RGB array, and returns an object with HSL properties.
+
+// ### Supported Input Formats:
+
+// - **Hex:** String starting with `#`, e.g., `#FFFFFF`.
+// - **RGB Array:** 3-element array, e.g., `[255, 87, 51]`.
+
+// This function will convert any given hex or RGB color to HSL format.
+
+// Example usage
+// const hslColor = colorToHsl("#FF5733");  // Example hex color
+// console.log("HSL:", hslColor);
+
+function hexToRgb(hex) {
+    // Remove the leading "#" if present
+    hex = hex.replace(/^#/, '');
+    // If it's a 3-character shorthand hex, expand it to 6 characters
+    if (hex.length === 3) {
+        hex = hex.split('').map(char => char + char).join('');
+    }
+    // Parse the hex string into integer RGB values
+    const int = parseInt(hex, 16);
+    return {
+        r: (int >> 16) & 255,
+        g: (int >> 8) & 255,
+        b: int & 255
+    };
+}
+
+function rgbToHsl(r, g, b) {
+    // Normalize RGB to [0, 1]
+    r /= 255;
+    g /= 255;
+    b /= 255;
+
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h, s, l = (max + min) / 2;
+
+    if (max === min) {
+        // Achromatic case (gray)
+        h = s = 0;
+    } else {
+        const delta = max - min;
+        s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+
+        switch (max) {
+            case r:
+                h = (g - b) / delta + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / delta + 2;
+                break;
+            case b:
+                h = (r - g) / delta + 4;
+                break;
+        }
+        h /= 6;
+    }
+
+    // Convert to degrees, percent format
+    return {
+        h: Math.round(h * 360),
+        s: Math.round(s * 100),
+        l: Math.round(l * 100)
+    };
+}
+
+export function toHsl(color) {
+    if (color.startsWith('hsl')) {
+        return color
+                // .replace(/hsla?\(([^)]+)\)/, '$1')
+                .replace('hsl(', '')
+                .replace(')', '')
+                .split(',')
+                .map(x => Number(x.replace('%', '').trim())) 
+    }
+
+    let rgb;
+    if (typeof color === 'string' && color.startsWith('#')) {
+        // Hex string case
+        rgb = hexToRgb(color);
+    } else if (Array.isArray(color) && color.length === 3) {
+        // RGB array case
+        rgb = { r: color[0], g: color[1], b: color[2] };
+    } else {
+        throw new Error(`Unsupported color format: ${color}. Provide a hex string (#RRGGBB) or an RGB array.`);
+    }
+
+    return rgbToHsl(rgb.r, rgb.g, rgb.b);
+}

package/src/view/Layout.stories.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { DemoRegion } from '../../../../.storybook/demo/DemoRegion.jsx'
+import { View } from './View.jsx'
+
+export default {
+  title: 'Design System/Layout',
+  component: View,
+  tags: ['autodocs'],
+  render: (args) => (
+    <View {...args} gap="m" style={{ height: '100%', minHeight: 0 }}>
+      <DemoRegion region="header" label="header" />
+      <DemoRegion region="sidebar-primary" label="sidebar-primary" />
+      <DemoRegion region="sidebar-secondary" label="sidebar-secondary" />
+      <DemoRegion region="content" label="Content" minHeight="450px" />
+      <DemoRegion region="footer" label="footer" />
+    </View>
+  ),
+}
+
+export const ContentLayout = { args: { layout: 'page' } }
+
+export const Sidebar = { args: { layout: 'sidebar' } }
+
+export const OffCenter = { args: { layout: 'off-center' } }
+
+export const OffCenterSmall = { args: { layout: 'off-center-s' } }
+
+export const OffCenterMedium = { args: { layout: 'off-center-m' } }