@ossy/design-system 0.0.1-alpha → 0.0.3-alpha

package/src/carousel/Carousel.stories.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import { Carousel } from './Carousel.jsx'
+import { View } from '../view/index.js'
+
+export default {
+  title: 'Design System/Carousel',
+  component: Carousel,
+}
+
+const Story = () => (
+  <Carousel childWidth="80%" childMaxWidth='400px'>
+
+    <View
+      surface="secondary"
+      style={{
+        padding: 'var(--space-m)',
+        height: '200px',
+        background: 'hsl(0, 0%, 90%)',
+        borderRadius: 'var(--space-s)',
+      }}>1</View>
+
+    <View
+      surface="secondary"
+      style={{
+        margin: 'var(--spacing-m)',
+        padding: 'var(--space-m)',
+        height: '200px',
+        background: 'hsl(0, 0%, 90%)',
+        borderRadius: 'var(--space-s)',
+      }}>2</View>
+
+    <View
+      surface="secondary"
+      style={{
+        padding: 'var(--space-m)',
+        height: '200px',
+        background: 'hsl(0, 0%, 90%)',
+        borderRadius: 'var(--space-s)',
+      }}>3</View>
+
+    
+  </Carousel>
+)
+
+export const Default = Story.bind({})
+Default.args = {}

package/src/carousel/index.js

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

package/src/carousel/useCarousel.jsx

@@ -0,0 +1,151 @@
+import {
+  useEffect,
+  useRef,
+  Children,
+  // RefObject,
+  useCallback,
+  useMemo,
+  // ReactNode,
+  createRef
+} from 'react';
+import { useIntersectionObserver, useForceRerender } from '../hooks';
+
+// export interface CarouselItem<T extends HTMLElement = HTMLElement> {
+//   itemId: string;
+//   isVisible: boolean;
+//   ref: RefObject<T>;
+//   originalReactNode: ReactNode;
+// }
+
+export const useCarousel = (
+  scrollContainerRef, // RefObject<HTMLElement>,
+  scrollItems,// ReactNode,
+  options // { childWidth?: string; childMaxWidth?: string; }
+) => {
+  const childWidth = options?.childWidth || '100%';
+  const childMaxWidth = options?.childMaxWidth || '100%';
+  const [hasForcedRerender, forceRerender] = useForceRerender();
+  const carouselItemsRef = useRef(new Map());
+  // const carouselItemsRef = useRef<Map<string, CarouselItem<HTMLDivElement>>>(new Map());
+
+  const intersectionObserver = useIntersectionObserver(
+    useCallback((entries, observer) => {
+      entries.forEach(entry => {
+        const target = entry.target //as HTMLElement;
+        const carouselItemId = target.dataset.itemId || '';
+        const carouselItems = carouselItemsRef.current;
+        if (!carouselItems.has(carouselItemId)) return;
+        const carouselItem = carouselItems.get(carouselItemId) // as CarouselItem<HTMLDivElement>;
+        carouselItems.set(
+          carouselItemId,
+          {
+            ...carouselItem,
+            isVisible: entry.isIntersecting
+          });
+      });
+
+      forceRerender();
+
+    }, [carouselItemsRef, forceRerender]),
+    useMemo(() => ({
+        root: scrollContainerRef.current,
+        threshold: 0.8
+      }),
+      [scrollContainerRef]
+    )
+  );
+
+  const nextSlide = useCallback(() => {
+    const carouselItems = Array.from(carouselItemsRef.current.entries());
+
+    const positionOflastVisibleItem = carouselItems
+      .map(([itemId, item]) => item)
+      .reduce((acc, curr, index) => curr.isVisible ? index : acc, 0);
+
+    // eslint-disable-next-line
+    const [_, carouselItemToScrollTo] =
+      positionOflastVisibleItem === carouselItems.length - 1
+        ? carouselItems[positionOflastVisibleItem]
+        : carouselItems[positionOflastVisibleItem + 1];
+
+    carouselItemToScrollTo.ref?.current?.scrollIntoView?.({
+      behavior: 'smooth',
+      inline: 'start'
+    });
+
+    forceRerender();
+
+  }, [forceRerender]);
+
+  const prevSlide = useCallback(() => {
+    const carouselItems = Array.from(carouselItemsRef.current.entries());
+
+    const positionOfFirstVisibleItem = carouselItems
+      .map(([itemId, item]) => item)
+      .findIndex(item => item.isVisible);
+
+    // eslint-disable-next-line
+    const [_, carouselItemToScrollTo] =
+      positionOfFirstVisibleItem <= 0
+        ? carouselItems[0]
+        : carouselItems[positionOfFirstVisibleItem - 1];
+
+    carouselItemToScrollTo.ref?.current?.scrollIntoView?.({
+      behavior: 'smooth',
+      inline: 'start'
+    });
+
+    forceRerender();
+
+  }, [forceRerender]);
+
+  useEffect(() => {
+    // const carouselItems: CarouselItem<HTMLDivElement>[] = Children
+    const carouselItems  = Children
+      .toArray(scrollItems)
+      .map((originalReactNode, index) => ({
+          itemId: `${index}`,
+          isVisible: false,
+          originalReactNode,
+          ref: createRef(),
+        }));
+
+    carouselItemsRef.current = new Map(carouselItems.map(item => [
+      item.itemId,
+      item
+    ]));
+
+    forceRerender();
+
+  }, [scrollItems, forceRerender]);
+
+  useEffect(() => {
+    intersectionObserver.disconnect();
+    const carouselItems = carouselItemsRef.current;
+    carouselItems.forEach(item => {
+      item?.ref?.current && intersectionObserver.observe(item.ref.current);
+    });
+  }, [hasForcedRerender, intersectionObserver]);
+
+
+  return {
+    nextSlide: nextSlide,
+    prevSlide: prevSlide,
+    carouselItems: Array.from(carouselItemsRef.current.values()),
+    children: Array.from(carouselItemsRef.current.values())
+      .map(carouselItem => (
+        <div
+          key={carouselItem.itemId}
+          ref={carouselItem.ref}
+          children={carouselItem.originalReactNode}
+          style={{
+            height: '100%',
+            flexBasis: childWidth,
+            maxWidth: childMaxWidth,
+            flexShrink: 0
+          }}
+          data-item-id={carouselItem.itemId}
+        />
+      ))
+  }
+}

package/src/column-gallery/ColumnGallery.jsx

@@ -0,0 +1,294 @@
+import React, {
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+import { css } from 'glamor';
+
+const containerStyles = css({
+  '--color-gray-40': 'hsl(0, 0%, 40%)',
+  '--color-gray-60': 'hsl(0, 0%, 60%)',
+  '--color-gray-85': 'hsl(0, 0%, 85%)',
+  '--color-gray-98': 'hsl(0, 0%, 98%)',
+
+  '--color-digital-blue': 'hsl(193, 83%, 52%)',
+
+  '--color-highlight': 'var(--color-digital-blue)',
+
+  '--space-xxs': '2px',
+  '--space-xs': '4px',
+  '--space-s': '8px',
+  '--space-m': '16px',
+  '--space-l': '32px',
+  '--space-xl': '64px',
+  '--space-xxl': '128px',
+
+  '--space-inset-xxs': '2px 2px 2px 2px',
+  '--space-inset-xs': '4px 4px 4px 4px',
+  '--space-inset-s': '8px 8px 8px 8px',
+  '--space-inset-m': '16px 16px 16px 16px',
+  '--space-inset-l': '32px 32px 32px 32px',
+  '--space-inset-xl': '64px 64px 64px 64px',
+  '--space-inset-xxl': '128px 128px 128px 128px',
+
+  '--space-inset-squish-s': '4px 8px 4px 8px',
+  '--space-inset-squish-m': '8px 16px 8px 16px',
+  '--space-inset-squish-l': '16px 32px 16px 32px',
+
+  '--space-inset-stretch-s': '12px 8px 12px 8px',
+  '--space-inset-stretch-m': '24px 16px 24px 16px',
+
+  '--space-inline-xxs': '0px 2px 0px 0px',
+  '--space-inline-xs': '0px 4px 0px 0px',
+  '--space-inline-s': '0px 8px 0px 0px',
+  '--space-inline-m': '0px 16px 0px 0px',
+  '--space-inline-l': '0px 32px 0px 0px',
+  '--space-inline-xl': '0px 64px 0px 0px',
+  '--space-inline-xxl': '0px 128px 0px 0px',
+
+  '--space-inline-reverse-xxs': '0px 0px 0px 2px',
+  '--space-inline-reverse-xs': '0px 0px 0px 4px',
+  '--space-inline-reverse-s': '0px 0px 0px 8px',
+  '--space-inline-reverse-m': '0px 0px 0px 16px',
+  '--space-inline-reverse-l': '0px 0px 0px 32px',
+  '--space-inline-reverse-xl': '0px 0px 0px 64px',
+  '--space-inline-reverse-xxl': '0px 0px 0px 128px',
+
+  '--space-stack-xxs': '0px 0px 2px 0px',
+  '--space-stack-xs': '0px 0px 4px 0px',
+  '--space-stack-s': '0px 0px 8px 0px',
+  '--space-stack-m': '0px 0px 16px 0px',
+  '--space-stack-l': '0px 0px 32px 0px',
+  '--space-stack-xl': '0px 0px 64px 0px',
+  '--space-stack-xxl': '0px 0px 128px 0px',
+
+  'display': 'block',
+
+  height: 'auto',
+  width: '99%',
+  margin: '0 auto',
+
+  '.gallery-container': {
+    height: 'auto',
+    width: '99%',
+    margin: '0 auto',
+  },
+  
+  '.header-search': {
+    padding: 'var(--space-inset-m)',
+    background: 'hsl(0, 0%, 100%)',
+  },
+  
+  '.header-search input': {
+    width: '100%',
+    padding: 'var(--space-inset-stretch-s)',
+    background: 'hsl(0, 0%, 95%)',
+    border: '1px solid hsl(0, 0%, 95%)',
+    'border-radius': '3px',
+    'box-shadow': '0 1px 1px 1px rgba(0, 0, 0, .18)',
+  
+    color: 'var(--color-gray-40)',
+    'font-size': '1rem',
+  
+  },
+  
+  '.header-search input:focus':  {
+    'border': '1px solid var(--color-highlight)',
+    'outline': 'none',
+    'box-shadow': '0px 2px 5px 1px rgba(0, 0, 0, .20)',
+  },
+
+  '.oskw-gallery': {
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+  },
+  
+  '.oskw-gallery *': {
+    margin: '0',
+    padding: '0',
+    'box-sizing': 'border-box',
+  },
+  
+  '.oskw-gallery .oskw-card-group': {
+    width: '100%',
+    height: '100%',
+    padding: 'var(--space-inset-s)',
+    position: 'relative',
+  },
+  
+  '.oskw-gallery .oskw-card-group  .oskw-column': {
+    display: 'inline-block'
+  },
+  
+  '.oskw-gallery .oskw-img-wrapper': {
+    width: '100%',
+    height: 'auto',
+    overflow: 'hidden',
+  },
+  
+  '.oskw-gallery .oskw-img-wrapper img': {
+    width: '100%',
+    height: 'auto',
+  },
+  
+  '.oskw-gallery .oskw-info-message': {
+    width: '100%',
+    color: 'var(--color-gray-40)',
+    'text-align': 'center',
+    padding: 'var(--space-inset-stretch-m)',
+  },
+
+  '@media ( min-width: 700px )': {
+
+    '.header-search': {
+      padding: 'var(--space-inset-stretch-m)',
+      display: 'flex',
+      'justify-content': 'center',
+    },
+  
+    '.header-search div': {
+      display: 'inline-block',
+      margin: '0 auto',
+    },
+  
+    '.header-search input': {
+      width: '350px',
+    },
+  
+    '.header-search input:focus': {
+      border: '1px solid var(--color-highlight)',
+      outline: 'none',
+      'box-shadow': '0px 2px 5px 1px rgba(0, 0, 0, .20)',
+    },
+  
+  },
+  
+  '@supports (display: flex) and (flex: 1)': {
+
+    '.oskw-gallery .oskw-card-group': {
+      display: 'flex',
+    },
+  
+    '.oskw-gallery .oskw-card-group .oskw-column': {
+      flex: '1',
+    }
+
+  }
+  
+})
+
+// Tries to stack the columns into even heights
+const spreadEven = (imgDataObjects, numberOfColumns) => {
+  const reducer = (totalHeight, curImgObj) => totalHeight + curImgObj.height;
+  const totalStackHeight = imgDataObjects.reduce(reducer, 0);
+  const desiredColumnHeight = Math.floor(totalStackHeight / numberOfColumns);
+  const arrayCopy = imgDataObjects.slice(0);
+  const output = [];
+
+  if (numberOfColumns === 1) {
+    return [arrayCopy];
+  }
+  else {
+    while ( numberOfColumns > 0 ) {
+      let columnHeight = 0;
+      let cutListAt = 1;
+
+      arrayCopy.forEach((item, index) => {
+        if (columnHeight < desiredColumnHeight ) {
+          columnHeight += item.height;
+          cutListAt = index;
+        }
+      });
+
+      output.push({
+        columnHeight,
+        columnItems: arrayCopy.splice(0, cutListAt)
+      });
+
+      numberOfColumns -= 1;
+    }
+
+    // Handle Leftovers
+    arrayCopy.forEach(item => {
+      output.sort((a, b) => a.columnHeight - b.columnHeight);
+      output[0].columnHeight += item.height;
+      output[0].columnItems.push(item);
+    });
+
+  }
+   return  output.map(item => item.columnItems);
+}
+
+export const ColumnGallery = ({
+  columnMinWidth = 250,
+  minNumberOfColumns = 2,
+  items = [],
+  ...props
+}) => {
+  const containerRef = useRef()
+  const childrenRef = useRef()
+
+  const [width, setWidth] =  useState(0)
+  const [columns, setColumns] =  useState([])
+  const [prevNumberOfColumns, setPrevNumberOfColumns] =  useState(0)
+
+  useEffect(() => {
+
+    if (!items.length) return
+
+    let numberOfColumns = Math.floor((width / columnMinWidth));
+
+    numberOfColumns = numberOfColumns < minNumberOfColumns
+      ? minNumberOfColumns
+      : numberOfColumns;
+
+    const columnCountDifference = Math.abs(numberOfColumns - prevNumberOfColumns);
+
+    if (columnCountDifference > 0) {
+      setColumns(spreadEven(items, numberOfColumns))
+      setPrevNumberOfColumns(numberOfColumns)
+    }
+
+  }, [width, items, columnMinWidth, minNumberOfColumns, prevNumberOfColumns])
+
+  useEffect(() => {
+
+    const setContainerWidth = () => {
+      setWidth(containerRef.current.offsetWidth);
+    }
+
+    setContainerWidth()
+
+    window.addEventListener('resize', setContainerWidth)
+
+    return () => {
+      window.removeEventListener('resize', setContainerWidth)
+    }
+
+  }, [])
+
+  return (
+    <div ref={containerRef} {...containerStyles} className="gallery-container">
+      <div id='oskw-gallery' className="oskw-gallery">
+        { columns.length !== 0 && (
+          <div className="oskw-card-group">
+            { columns.map((column, i) => (
+                <div className="oskw-column" key={i}>
+                  {column.map(imgData => (
+                    <ImageCard
+                      key={imgData.url}
+                      title={imgData.title}
+                      src={imgData.url}
+                      link={imgData.link}
+                      dateTaken={imgData.dateTaken}
+                    />
+                  ))}
+                </div>
+            ))}
+          </div>
+        ) }
+      </div>
+    </div>
+  )
+}

package/src/column-gallery/columnGallery.stories.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { ColumnGallery } from './ColumnGallery.jsx'
+
+export default {
+  title: 'Design System/Column Gallery',
+  component: ColumnGallery,
+};
+
+
+const Story = (args) => <ColumnGallery {...args} />;
+
+export const Default = Story.bind({});
+Default.args = {
+  columnMinWidth: 250,
+  minNumberOfColumns: 2,
+  items: [
+    {
+      url: 'https://images.unsplash.com/photo-1645548291117-719a896a45c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80',
+      title: 'Unsplashed',
+      link: 'https://images.unsplash.com/photo-1645548291117-719a896a45c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80',
+      dateTaken: 'Tue, 12 Aug',
+    }
+  ],
+};

package/src/column-gallery/index.js

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

package/src/column-gallery/options.js

@@ -0,0 +1,7 @@
+const config = {
+  galleryId: 'oskw-gallery',
+  columnMinWidth: 250,
+  minNumberOfColumns: 2
+}
+
+export default config;

package/src/context-menu/ContextMenu.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { css } from 'glamor'
+
+const styles = css({
+  backgroundColor: 'hsl(0, 0%, 100%)',
+  display: 'inline-block',
+  borderRadius: '4px',
+  boxShadow: '1px 1px 10px hsla(0, 0%, 30%, .2)',
+  border: '1px solid hsl(0, 0%, 90%)',
+  padding: '8px 0',
+  listStyle: 'none',
+  minWidth: '150px',
+  '& .context-menu__item': {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    whiteSpace: 'nowrap',
+    padding: '8px 16px',
+    color: 'hsl(0, 0%, 30%)',
+    fontFamily: 'sans-serif',
+    textAlign: 'left',
+    cursor: 'pointer',
+  },
+  '& .context-menu__item:hover ': {
+    backgroundColor: 'hsl(0, 0%, 95%)'
+  },
+  '& .context-menu__separator': {
+    height: '1px',
+    margin: '8px 16px',
+    backgroundColor: 'hsl(0, 0%, 95%)',
+  }
+})
+
+const ContextMenuItem = ({ className = '', children, ...props}) =>
+  <li className={`context-menu__item ${className}`} {...props}>
+    {children}
+  </li>
+
+const ContextMenuSeparator = ({ className = '', ...props}) =>
+  <li className={`context-menu__separator ${className}`} {...props}>
+  </li>
+
+export const ContextMenu = ({ children }) => (
+  <ul {...styles}>
+    {children}
+  </ul>
+)
+
+ContextMenu.Item = ContextMenuItem
+ContextMenu.Separator = ContextMenuSeparator

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

@@ -0,0 +1,18 @@
+import React from 'react'
+import { ContextMenu } from './ContextMenu.jsx'
+
+export default {
+  title: 'Design System/ContextMenu',
+  component: ContextMenu,
+}
+
+const Story = () => (
+  <ContextMenu>
+    <ContextMenu.Item>foo</ContextMenu.Item>
+    <ContextMenu.Separator />
+    <ContextMenu.Item>bar</ContextMenu.Item>
+  </ContextMenu>
+)
+
+export const Default = Story.bind({})
+Default.args = {}

package/src/context-menu/index.js

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

package/src/create-icons.js

@@ -0,0 +1,95 @@
+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 { 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 Icon2 = ({ 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))\`,
+          height: \`var(--icon-\${variant}--size, var(--icon-default--size))\`,
+          width: \`var(--icon-\${variant}--size, var(--icon-default--size))\`,
+          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/Icon2.jsx`, iconsJsx)