@ossy/design-system 3.0.2 → 3.0.4

package/src/view/View.jsx

@@ -0,0 +1,498 @@
+import React from 'react'
+
+export const ViewItem = ({
+  fill,
+  layout = 'none',
+  className = '',
+  ...props
+}) => (
+  <View
+    layout={layout}
+    data-fill={fill}
+    className={`ossy-stack__item ${className}`.trim()}
+    {...props}
+  />
+)
+
+export const View = ({
+  surface = 'neutral',
+  selectable,
+  layout = 'column',
+  stack,
+  horizontal = false,
+  bordered,
+  alignItems,
+  justifyContent,
+  gap,
+  roundness,
+  inset,
+  as: Container = 'div',
+  style = {},
+  ...props
+}) => {
+  const resolvedLayout = stack
+    ? (horizontal ? 'row' : 'column')
+    : layout
+
+  return (
+    <>
+      <style href="@ossy/design-system/view" precedence="high">
+      {`
+        [data-view] {
+          max-width: 100%;
+        }
+      `}
+      </style>
+      {stack && (
+        <style href="@ossy/design-system/view-stack" precedence="high">
+        {`
+          [data-stack] .ossy-stack__item {
+            flex-shrink: 0;
+          }
+
+          [data-stack] .ossy-stack__item[data-fill="true"] {
+            flex: 1 1 auto;
+          }
+
+          [data-horizontal="false"][data-bordered="true"] > .ossy-stack__item {
+            border-top: 1px solid var(--separator-primary);
+          }
+
+          [data-horizontal="false"][data-bordered="true"] > .ossy-stack__item:first-child {
+            border-top: none;
+          }
+
+          [data-horizontal="true"][data-bordered="true"] > .ossy-stack__item {
+            border-left: 1px solid var(--separator-primary);
+          }
+
+          [data-horizontal="true"][data-bordered="true"] > .ossy-stack__item:first-child {
+            border-left: none;
+          }
+        `}
+        </style>
+      )}
+      <style href="@ossy/design-system/patterns" precedence="high">
+      {`
+          [data-roundness="none"] { border-radius: var(--roundness-none, 0) }
+          [data-roundness="xs"] { border-radius: var(--roundness-xs, var(--space-xs)) }
+          [data-roundness="s"] { border-radius: var(--roundness-s, var(--space-s)) }
+          [data-roundness="m"] { border-radius: var(--roundness-m, var(--space-m)) }
+          [data-roundness="l"] { border-radius: var(--roundness-l, var(--space-l)) }
+          [data-roundness="rounded"] { border-radius: var(--roundness-rounded, 99999px) }
+
+          [data-inset="none"] { padding: var(--space-none) }
+          [data-inset="xs"] { padding: var(--space-xs) }
+          [data-inset="s"] { padding: var(--space-s) }
+          [data-inset="m"] { padding: var(--space-m) }
+          [data-inset="l m"] { padding: var(--space-l) var(--space-m) }
+          [data-inset="stretch-m"] { padding: var(--space-s) var(--space-m) }
+          [data-inset="list-row"] {
+            padding:
+              calc(var(--space-s) + var(--space-xs))
+              var(--space-s)
+              calc(var(--space-s) + var(--space-xs))
+              calc(var(--space-m) + var(--space-xs));
+          }
+          [data-inset="list-row-leading"] {
+            padding:
+              calc(var(--space-s) + var(--space-xs))
+              0
+              calc(var(--space-s) + var(--space-xs))
+              calc(var(--space-m) + var(--space-xs));
+          }
+          [data-inset="list-row-trailing"] {
+            padding:
+              calc(var(--space-s) + var(--space-xs))
+              var(--space-s)
+              calc(var(--space-s) + var(--space-xs))
+              0;
+          }
+          [data-inset="l"] { padding: var(--space-l) }
+          [data-inset="xl"] { padding: var(--space-xl) }
+          [data-inset="xxl"] { padding: var(--space-xxl) }
+
+          [data-scroll] {
+            scrollbar-width: none;
+          }
+
+          [data-scroll]::-webkit-scrollbar {
+            display: none;
+          }
+      `}
+      </style>
+
+      <style href="@ossy/design-system/layout/column" precedence="high">
+      {`
+        [data-layout="column"] {
+          display: flex;
+          flex-direction: column;
+        }
+      `}
+      </style>
+
+      <style href="@ossy/design-system/layout/row" precedence="high">
+      {`
+        [data-layout="row"] {
+          display: flex;
+          flex-direction: row;
+        }
+      `}
+      </style>
+
+      <style href="@ossy/design-system/layout/row-wrap" precedence="high">
+      {`
+        [data-layout="row-wrap"] {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+        }
+      `}
+      </style>
+
+      <style href="@ossy/design-system/layout/off-center" precedence="high">
+      {`
+        [data-layout="off-center"] {
+          display: grid;
+          grid-template-rows: 1fr max-content 2fr;
+          grid-template-columns: 1fr;
+          grid-template-areas: "."
+                               "content"
+                               ".";
+        }
+
+        [data-layout="off-center"] [data-region="content"] {
+          grid-area: content;
+        }
+      `}
+      </style>
+
+      <style href="@ossy/design-system/layout/off-center-s" precedence="high">
+      {`
+        [data-layout="off-center-s"] {
+          height: 100%;
+          width: 100%;
+          max-width: 100%;
+          display: grid;
+          grid-template-rows: auto 1fr minmax(400px, min-content) 2.2fr auto;
+          grid-template-columns: auto 1fr minmax(min(350px, 100vw), min-content) 1fr auto;
+          grid-template-areas: "header header header header header"
+                               "sidebar-primary . . . sidebar-secondary"
+                               "sidebar-primary . content . sidebar-secondary"
+                               "sidebar-primary . . . sidebar-secondary"
+                               "footer footer footer footer footer";
+        }
+
+        [data-layout="off-center-s"] [data-region="header"] {
+          grid-area: header;
+        }
+
+        [data-layout="off-center-s"] [data-region="content"] {
+          grid-area: content;
+        }
+
+        [data-layout="off-center-s"] [data-region="sidebar-primary"] {
+          grid-area: sidebar-primary;
+        }
+
+        [data-layout="off-center-s"] [data-region="sidebar-secondary"] {
+          grid-area: sidebar-secondary;
+        }
+
+        [data-layout="off-center-s"] [data-region="footer"] {
+          grid-area: footer;
+        }
+      `}
+      </style>
+
+      <style href="@ossy/design-system/layout/off-center-m" precedence="high">
+      {`
+        [data-layout="off-center-m"] {
+          height: 100%;
+          width: 100%;
+          max-width: 100%;
+          display: grid;
+          grid-template-rows: auto 1fr minmax(650px, min-content) 2.2fr auto;
+          grid-template-columns: auto 1fr minmax(min(1100px, 100%), min-content) 1fr auto;
+          grid-template-areas: "header header header header header"
+                               "sidebar-primary . . . sidebar-secondary"
+                               "sidebar-primary . content . sidebar-secondary"
+                               "sidebar-primary . . . sidebar-secondary"
+                               "footer footer footer footer footer";
+        }
+
+        [data-layout="off-center-m"] [data-region="header"] {
+          grid-area: header;
+        }
+
+        [data-layout="off-center-m"] [data-region="content"] {
+          grid-area: content;
+        }
+
+        [data-layout="off-center-m"] [data-region="sidebar-primary"] {
+          grid-area: sidebar-primary;
+        }
+
+        [data-layout="off-center-m"] [data-region="sidebar-secondary"] {
+          grid-area: sidebar-secondary;
+        }
+
+        [data-layout="off-center-m"] [data-region="footer"] {
+          grid-area: footer;
+        }
+      `}
+      </style>
+
+      <style href="@ossy/design-system/layout/vertical-top" precedence="high">
+      {`
+        [data-layout="vertical-top"] {
+          display: grid;
+          grid-template-rows: .05fr max-content 1fr;
+          grid-template-columns: 1fr;
+          grid-template-areas: "."
+                               "content"
+                               ".";
+        }
+
+        [data-layout="vertical-top"] [data-region="content"] {
+          grid-area: content;
+        }
+      `}
+      </style>
+
+      <style href="@ossy/design-system/layout/vertical-top-m" precedence="high">
+      {`
+        [data-layout="vertical-top-m"] {
+          height: 100%;
+          width: 100%;
+          max-width: 100%;
+          display: grid;
+          grid-template-rows: auto 1fr minmax(650px, min-content) 3r auto;
+          grid-template-columns: auto 1fr minmax(1100px, min-content) 1fr auto;
+          grid-template-areas: "header header header header header"
+                               "sidebar-primary . . . sidebar-secondary"
+                               "sidebar-primary . content . sidebar-secondary"
+                               "sidebar-primary . . . sidebar-secondary"
+                               "footer footer footer footer footer";
+        }
+
+        [data-layout="vertical-top-m"] [data-region="header"] {
+          grid-area: header;
+        }
+
+        [data-layout="vertical-top-m"] [data-region="content"] {
+          grid-area: content;
+        }
+
+        [data-layout="vertical-top-m"] [data-region="sidebar-primary"] {
+          grid-area: sidebar-primary;
+        }
+
+        [data-layout="vertical-top-m"] [data-region="sidebar-secondary"] {
+          grid-area: sidebar-secondary;
+        }
+
+        [data-layout="vertical-top-m"] [data-region="footer"] {
+          grid-area: footer;
+        }
+      `}
+      </style>
+
+      <style href="@ossy/design-system/layout/split-even" precedence="high">
+      {`
+        [data-layout="split-even"] {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+          grid-template-rows: auto;
+          grid-auto-flow: column;
+        }
+      `}
+      </style>
+
+      <style href="@ossy/design-system/layout/header" precedence="high">
+      {`
+        [data-layout="header"] {
+          display: grid;
+          grid-template-columns: minmax(0, 1fr) auto;
+          grid-template-areas: "leading far";
+          width: 100%;
+          align-items: center;
+        }
+
+        [data-layout="header"]:has([data-header-slot="description"]):not(:has([data-header-slot="children"])) {
+          grid-template-areas:
+            "leading far"
+            "description description";
+        }
+
+        [data-layout="header"]:not(:has([data-header-slot="description"])):has([data-header-slot="children"]) {
+          grid-template-areas:
+            "leading far"
+            "children children";
+        }
+
+        [data-layout="header"]:has([data-header-slot="description"]):has([data-header-slot="children"]) {
+          grid-template-areas:
+            "leading far"
+            "description description"
+            "children children";
+        }
+
+        [data-layout="header"][data-component="app-header"] {
+          flex-shrink: 0;
+        }
+
+        [data-layout="header"][data-component="content-header"] {
+          text-align: left;
+        }
+
+        [data-layout="header"] [data-header-slot="leading"] {
+          grid-area: leading;
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          gap: inherit;
+          min-width: 0;
+        }
+
+        [data-layout="header"] [data-header-slot="far"] {
+          grid-area: far;
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          justify-content: flex-end;
+          gap: inherit;
+        }
+
+        [data-layout="header"] [data-header-slot="description"] {
+          grid-area: description;
+        }
+
+        [data-layout="header"] [data-header-slot="children"] {
+          grid-area: children;
+        }
+      `}
+      </style>
+
+      <style href="@ossy/design-system/layout/page" precedence="high">
+      {`
+        [data-layout="page"] {
+          box-sizing: border-box;
+          height: 100%;
+          min-height: 100%;
+          min-width: 0;
+          width: 100%;
+          max-width: 100%;
+          display: grid;
+          grid-template-rows: auto minmax(0, 1fr) auto;
+          grid-template-columns: auto minmax(0, 1fr) auto;
+          grid-template-areas: "header header header"
+                               "sidebar-primary content sidebar-secondary"
+                               "footer footer footer";
+        }
+
+        [data-layout="page"] [data-region="header"] {
+          grid-area: header;
+        }
+
+        [data-layout="page"] [data-region="content"] {
+          grid-area: content;
+          min-height: 0;
+          min-width: 0;
+          overflow: auto;
+          scrollbar-width: none;
+        }
+
+        [data-layout="page"] [data-region="content"]::-webkit-scrollbar {
+          display: none;
+        }
+
+        [data-layout="page"] [data-region="sidebar-primary"] {
+          grid-area: sidebar-primary;
+          min-height: 0;
+        }
+
+        [data-layout="page"] [data-region="sidebar-secondary"] {
+          grid-area: sidebar-secondary;
+          min-height: 0;
+        }
+
+        [data-layout="page"] [data-region="footer"] {
+          grid-area: footer;
+        }
+
+        /* Shell owns scroll — page body grows with content; footer stays in document flow. */
+        [data-layout="page"][data-page-scroll="external"] {
+          height: auto;
+          min-height: 100%;
+          grid-template-rows: auto auto auto;
+        }
+
+        [data-layout="page"][data-page-scroll="external"] [data-region="content"] {
+          overflow: visible;
+          min-height: 0;
+        }
+      `}
+      </style>
+
+      <style href="@ossy/design-system/layout/sidebar" precedence="high">
+      {`
+        [data-layout="sidebar"] {
+          height: 100%;
+          width: 100%;
+          max-width: 100%;
+          display: grid;
+          grid-template-rows: auto 1fr;
+          grid-template-columns: auto 1fr auto;
+          grid-template-areas: "sidebar-primary header header"
+                               "sidebar-primary content sidebar-secondary";
+        }
+
+        [data-layout="sidebar"] > [data-region="header"] {
+          grid-area: header;
+        }
+
+        [data-layout="sidebar"] > [data-region="content"] {
+          grid-area: content;
+          min-height: 0;
+          min-width: 0;
+        }
+
+        [data-layout="sidebar"] > [data-region="sidebar-primary"] {
+          grid-area: sidebar-primary;
+        }
+
+        [data-layout="sidebar"] > [data-region="sidebar-secondary"] {
+          grid-area: sidebar-secondary;
+        }
+      `}
+      </style>
+
+      <Container
+        data-view
+        data-surface={surface}
+        data-selectable={selectable}
+        data-roundness={roundness}
+        data-layout={resolvedLayout}
+        data-inset={inset}
+        {...(stack ? {
+          'data-stack': true,
+          'data-horizontal': horizontal,
+          'data-bordered': bordered,
+        } : {})}
+        style={{
+          gap: gap ? `var(--space-${gap})` : undefined,
+          alignItems,
+          justifyContent,
+          minWidth: '0',
+          ...(resolvedLayout === 'page' ? {} : { minHeight: '0' }),
+          ...style
+        }}
+        {...props}
+        
+      />
+    </>
+  )
+}
+
+View.Item = ViewItem

package/src/view/View.stories.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { DemoRegion } from '../../../../.storybook/demo/DemoRegion.jsx'
+import { View } from './View.jsx'
+
+export default {
+  title: 'Design System/Base/View',
+  component: View,
+  tags: ['autodocs'],
+}
+
+export const Surfaces = {
+  render: (args) => (
+    <View {...args} style={{ height: '100%', gap: 'var(--space-m)' }}>
+      <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="700px" />
+      <DemoRegion region="footer" label="Footer" />
+    </View>
+  ),
+  args: { layout: 'page' },
+}
+
+export const Selectable = {
+  render: ({ surface, ...args }) => (
+    <View surface={surface} inset="m">
+      <View {...args} style={{ height: '80px', width: '80px' }} />
+    </View>
+  ),
+  args: { layout: 'row', surface: 'primary', selectable: true },
+}
+
+export const Stack = {
+  render: (args) => (
+    <View stack horizontal bordered style={{ height: '200px' }} {...args}>
+      <View.Item as="section" fill>
+        ~Hello...
+      </View.Item>
+      <View.Item as="section" style={{ width: '300px' }}>
+        ...from the other siiiide~
+      </View.Item>
+    </View>
+  ),
+}

package/src/view/index.js

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