@ossy/design-system 3.0.3 → 3.0.5

package/src/tabs/Tabs.jsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { Button } from '../button'
+import { View } from '../view'
+
+/**
+ * Tab interface
+ * @typedef {Object} Tab
+ * @property {string} id - Used to identify active tab
+ * @property {string} label - Text that will show up in the tab
+ */
+
+export const Tabs = ({
+  as = 'nav',
+  tabs = [],
+  activeTabId,
+  variant = 'tab',
+  onTabClick = () => {},
+  gap,
+  ...props
+}) => (
+  <View as={as} {...props} data-tabs>
+
+    <style>
+    {`
+      [data-tabs] {
+        margin: 0;
+        padding: 0;
+        boxSizing: border-box;
+        height: 100%;
+        whiteSpace: nowrap;
+        background: transparent;
+      }
+
+      [data-tabs] ul {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        justify-content: flex-start;
+        align-items: stretch;
+        flex-wrap: no-wrap;
+      }
+
+      [data-tabs] li {
+        list-style: none
+      }
+
+    `}
+    </style>
+
+    <View as="ul" gap={gap} layout="row">
+      {
+        tabs.map(tab => (
+          <li key={tab.id}>
+            <Button
+              variant={tab.id === activeTabId ? `${variant}-active` : variant}
+              onClick={e => onTabClick(e, tab)}
+              {...tab}
+            >
+              {tab.label}
+            </Button>
+          </li>
+        ))
+      }
+    </View>
+  </View>
+)

package/src/tabs/Tabs.stories.jsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react'
+import { Tabs } from './Tabs.jsx'
+
+export default {
+  title: 'Design System/Display/Tabs',
+  component: Tabs,
+  args: {
+    activeTabId: 'English',
+    tabs: [
+      { id: 'Português', label: 'Português' },
+      { id: 'English', label: 'English' },
+      { id: 'Svenska', label: 'Svenska' },
+      { id: 'Français', label: 'Français' },
+      { id: 'Español', label: 'Español' },
+    ],
+  },
+  render: (props) => {
+    const [activeTabId, setActiveTabId] = useState(props.activeTabId)
+
+    return (
+      <Tabs
+        {...props}
+        activeTabId={activeTabId}
+        onTabClick={(_event, tab) => setActiveTabId(tab.id)}
+      />
+    )
+  },
+}
+
+export const Default = {}
+
+export const AsLinks = {
+  args: {
+    tabs: [
+      { id: 'Português', label: 'Português', href: '/portuguese' },
+      { id: 'English', label: 'English', href: '/' },
+      { id: 'Svenska', label: 'Svenska', href: '/swedish' },
+      { id: 'Français', label: 'Français', href: '/french' },
+      { id: 'Español', label: 'Español', href: '/spanish' },
+    ],
+  },
+}
+
+export const Theming = {
+  args: {
+    variant: 'dark',
+    theme: {
+      'tabs-dark-background': 'hsl(0, 0%, 20%)',
+      'tabs-dark-color': 'hsl(0, 0%, 80%)',
+      'tabs-dark-accent-active': 'hsl(25, 80%, 50%)',
+    },
+  },
+}

package/src/tabs/index.js

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

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'