@os-design/core 1.0.198 → 1.0.200

package/src/Gallery/index.tsx

@@ -0,0 +1,290 @@
+import styled from '@emotion/styled';
+import { Left, Right } from '@os-design/icons';
+import { ThemeOverrider, clr } from '@os-design/theming';
+import {
+  isTouchDevice,
+  omitEmotionProps,
+  useForwardedRef,
+  useSize,
+} from '@os-design/utils';
+import React, {
+  MouseEventHandler,
+  TouchEventHandler,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import Button from '../Button';
+import Image, { ImageProps } from '../Image';
+import GalleryStatus from './Status';
+
+interface ContainerProps {
+  heightPercent: number;
+}
+const Container = styled(
+  'div',
+  omitEmotionProps('heightPercent')
+)<ContainerProps>`
+  position: relative;
+  padding-bottom: ${(p) => p.heightPercent}%;
+
+  display: flex;
+  justify-content: center;
+
+  background-color: ${(p) => clr(p.theme.galleryColorBg)};
+  border-radius: ${(p) => p.theme.borderRadius}em;
+  overflow: hidden;
+`;
+
+const StyledImage = styled(Image)`
+  position: absolute;
+  width: auto;
+  height: 100%;
+  border-radius: 0;
+`;
+
+const NavButton = styled(Button)`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+
+  background-color: hsla(0, 0%, 0%, 0.5);
+  backdrop-filter: blur(0.2em);
+`;
+
+const LeftButton = styled(NavButton)`
+  left: 0.2em;
+`;
+
+const RightButton = styled(NavButton)`
+  right: 0.2em;
+`;
+
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface GalleryProps extends JsxDivProps {
+  /**
+   * The image urls.
+   */
+  urls: string[] | ReadonlyArray<string>;
+  /**
+   * The aspect ratio of the gallery.
+   * E.g. [16,9] – 16:9.
+   */
+  aspectRatio?: [number, number];
+  /**
+   * The props of the image component.
+   */
+  imageProps?: Omit<ImageProps, 'url'>;
+  /**
+   * Whether the navigation buttons is shown.
+   */
+  hideArrows?: boolean;
+  /**
+   * The children that can be displayed on top of the image.
+   * E.g. tags.
+   */
+  children?: React.ReactNode;
+}
+
+const MIN_DIST_PX = 30;
+const MAX_ANGLE = 30;
+
+/**
+ * The image gallery. Change the cursor/touch position to change images.
+ * The lib 'lazysizes/plugins/attrchange/ls.attrchange' must be imported.
+ */
+const Gallery = forwardRef<HTMLDivElement, GalleryProps>(
+  (
+    {
+      urls,
+      aspectRatio = [16, 9],
+      imageProps = {},
+      hideArrows = false,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const [innerContainerRef, mergedContainerRef] = useForwardedRef(ref);
+
+    const [imageUrl, setImageUrl] = useState<string | undefined>(undefined);
+    const [imageIndex, setImageIndex] = useState(urls.length > 0 ? 0 : null);
+
+    const heightPercent = useMemo(
+      () => Math.round((aspectRatio[1] / aspectRatio[0]) * 1000000) / 10000,
+      [aspectRatio]
+    );
+
+    const imageIndexRef = useRef(imageIndex);
+    useEffect(() => {
+      imageIndexRef.current = imageIndex;
+    }, [imageIndex]);
+
+    // Update the image if the index was changed
+    useEffect(() => {
+      setImageUrl(imageIndex !== null ? urls[imageIndex] : undefined);
+    }, [imageIndex, urls]);
+
+    const startTouchPosRef = useRef<{ x: number; y: number } | null>(null);
+
+    const size = useSize(innerContainerRef);
+    const sizeRef = useRef(size);
+    useEffect(() => {
+      sizeRef.current = size;
+    }, [size]);
+
+    const statusHeight = useMemo(
+      () => Math.round(size.height / 70),
+      [size.height]
+    );
+
+    const updateGalleryImage = useCallback(
+      (clientX: number) => {
+        if (!innerContainerRef.current) return;
+        const { x } = innerContainerRef.current.getBoundingClientRect();
+        const widthPerImage = sizeRef.current.width / urls.length;
+        const xPos = clientX - x;
+        if (xPos < 0) return;
+        const nextIndex = Math.floor(xPos / widthPerImage);
+        if (imageIndexRef.current !== nextIndex) {
+          setImageIndex(nextIndex);
+        }
+      },
+      [innerContainerRef, urls.length]
+    );
+
+    const prev = useCallback(() => {
+      const index = imageIndexRef.current;
+      if (index === null) return;
+      setImageIndex(index > 0 ? index - 1 : urls.length - 1);
+    }, [urls.length]);
+
+    const next = useCallback(() => {
+      const index = imageIndexRef.current;
+      if (index === null) return;
+      setImageIndex(index < urls.length - 1 ? index + 1 : 0);
+    }, [urls.length]);
+
+    const left = useCallback<MouseEventHandler>(
+      (e) => {
+        prev();
+        e.preventDefault();
+      },
+      [prev]
+    );
+
+    const right = useCallback<MouseEventHandler>(
+      (e) => {
+        next();
+        e.preventDefault();
+      },
+      [next]
+    );
+
+    const mouseMoveHandler = useCallback<MouseEventHandler<HTMLDivElement>>(
+      (e) => updateGalleryImage(e.clientX),
+      [updateGalleryImage]
+    );
+
+    const touchStartHandler = useCallback<TouchEventHandler<HTMLDivElement>>(
+      (e) => {
+        const { clientX, clientY } = e.touches[0];
+        startTouchPosRef.current = { x: clientX, y: clientY };
+      },
+      []
+    );
+
+    const touchMoveHandler = useCallback<TouchEventHandler<HTMLDivElement>>(
+      (e) => {
+        if (!startTouchPosRef.current) return;
+        const { x, y } = startTouchPosRef.current;
+        const { clientX, clientY } = e.touches[0];
+        const diffX = Math.abs(x - clientX);
+        const diffY = Math.abs(y - clientY);
+        const diff = Math.sqrt(diffX ** 2 + diffY ** 2);
+        if (diff < MIN_DIST_PX) return;
+        const angle = (Math.atan(diffY / diffX) * 180) / Math.PI;
+        if (angle > MAX_ANGLE) {
+          startTouchPosRef.current = null;
+          return;
+        }
+        if (x < clientX) prev();
+        else next();
+        startTouchPosRef.current = null;
+      },
+      [next, prev]
+    );
+
+    const touchEndHandler = useCallback<
+      TouchEventHandler<HTMLDivElement>
+    >(() => {
+      startTouchPosRef.current = null;
+    }, []);
+
+    const handlers = useMemo(() => {
+      if (isTouchDevice()) {
+        return {
+          onTouchStart: touchStartHandler,
+          onTouchMove: touchMoveHandler,
+          onTouchEnd: touchEndHandler,
+        };
+      }
+      return {
+        onMouseMove: mouseMoveHandler,
+      };
+    }, [
+      mouseMoveHandler,
+      touchEndHandler,
+      touchMoveHandler,
+      touchStartHandler,
+    ]);
+
+    return (
+      <ThemeOverrider activeTheme='dark'>
+        <Container
+          heightPercent={heightPercent}
+          {...handlers}
+          {...rest}
+          ref={mergedContainerRef}
+        >
+          <StyledImage url={imageUrl} {...imageProps} />
+          {urls.length > 1 && imageIndex !== null && (
+            <>
+              <GalleryStatus
+                count={urls.length}
+                current={imageIndex}
+                height={statusHeight}
+              />
+              {isTouchDevice() && !hideArrows && (
+                <ThemeOverrider overrides={{ colorPrimary: [0, 0, 100] }}>
+                  <LeftButton
+                    type='ghost'
+                    wide='never'
+                    size='small'
+                    onClick={left}
+                  >
+                    <Left />
+                  </LeftButton>
+                  <RightButton
+                    type='ghost'
+                    wide='never'
+                    size='small'
+                    onClick={right}
+                  >
+                    <Right />
+                  </RightButton>
+                </ThemeOverrider>
+              )}
+            </>
+          )}
+          {children}
+        </Container>
+      </ThemeOverrider>
+    );
+  }
+);
+
+export default Gallery;

package/src/GlobalStyles/index.tsx

@@ -0,0 +1,17 @@
+import { Global } from '@emotion/react';
+import { useVh } from '@os-design/utils';
+import React from 'react';
+
+import resetStyles from './resetStyles';
+import typographyStyles from './typographyStyles';
+
+const GlobalStyles: React.FC = () => {
+  useVh();
+  return (
+    <Global styles={(theme) => [resetStyles(theme), typographyStyles(theme)]} />
+  );
+};
+
+GlobalStyles.displayName = 'GlobalStyles';
+
+export default GlobalStyles;

package/src/GlobalStyles/resetStyles.ts

@@ -0,0 +1,17 @@
+import { css } from '@emotion/react';
+import { SerializedStyles } from '@emotion/serialize';
+import { Theme } from '@os-design/theming';
+
+const resetStyles = (theme: Theme): SerializedStyles => css`
+  body {
+    margin: 0;
+  }
+
+  p,
+  figure,
+  pre {
+    margin: 0 0 ${theme.paragraphMarginBottom}em;
+  }
+`;
+
+export default resetStyles;

package/src/GlobalStyles/typographyStyles.ts

@@ -0,0 +1,78 @@
+import { css } from '@emotion/react';
+import { SerializedStyles } from '@emotion/serialize';
+import { m } from '@os-design/media';
+import { Theme, clr } from '@os-design/theming';
+import fp from 'facepaint';
+
+const headingsFontSizeStyles = (fontSize: number[]) => {
+  const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+  return fp(headings, { literal: true })({
+    fontSize: fontSize.map((item) => `${item}em`),
+  });
+};
+
+const headingsMarginTopStyles = (marginTop: number[]) => {
+  const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].map(
+    (h) => `${h}:not(:first-of-type)`
+  );
+  return fp(headings, { literal: true })({
+    marginTop: marginTop.map((item) => `${item}em`),
+  });
+};
+
+const typographyStyles = (theme: Theme): SerializedStyles => css`
+  html,
+  button,
+  input,
+  textarea,
+  select {
+    font-family: 'Helvetica Neue', Helvetica, sans-serif;
+  }
+
+  html,
+  input {
+    color: ${clr(theme.colorText)};
+  }
+
+  html {
+    line-height: ${theme.lineHeight};
+
+    // Sets the font smoothing
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+
+    // Sets the base font size and increases it on large screens
+    ${fp([m.min.md, m.min.xxl])({
+      fontSize: theme.fontSize.map((s) => `${s}px`),
+    })};
+  }
+
+  body {
+    background-color: ${clr(theme.colorBg)};
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: bold;
+    line-height: 1.2;
+    margin: 0 0 ${theme.headingsMarginBottom}em;
+  }
+
+  // Sets the margin top of headings
+  ${headingsMarginTopStyles(theme.headingsMarginTop)};
+
+  // Sets the base font size of headings
+  ${headingsFontSizeStyles(theme.headingsFontSize)};
+
+  // Sets the font size of headings on large screens
+  ${m.min.md} {
+    ${headingsFontSizeStyles(theme.headingsFontSizeMd)}
+  }
+`;
+
+export default typographyStyles;

package/src/HeaderSkeleton/index.tsx

@@ -0,0 +1,64 @@
+import { css } from '@emotion/react';
+
+import styled from '@emotion/styled';
+import { m } from '@os-design/media';
+
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
+
+import Skeleton, { SkeletonProps } from '../Skeleton';
+
+export interface HeaderSkeletonProps extends SkeletonProps {
+  /**
+   * The header type.
+   * @default 1
+   */
+  type?: 1 | 2 | 3 | 4 | 5 | 6;
+  /**
+   * Whether the header has top and bottom margins.
+   * @default false
+   */
+  hasMargin?: boolean;
+}
+
+const hasMarginStyles = (p) =>
+  p.hasMargin &&
+  css`
+    margin: ${p.theme.headingsMarginTop[p.type - 1]}em 0
+      ${p.theme.headingsMarginBottom}em;
+  `;
+
+const MULTIPLIER = 0.9;
+
+type StyledHeaderSkeletonProps = Required<
+  Pick<HeaderSkeletonProps, 'type' | 'hasMargin'>
+>;
+const StyledHeaderSkeleton = styled(
+  Skeleton,
+  omitEmotionProps('type', 'hasMargin')
+)<StyledHeaderSkeletonProps>`
+  font-size: ${(p) => p.theme.headingsFontSize[p.type - 1] * MULTIPLIER}em;
+  ${m.min.md} {
+    font-size: ${(p) => p.theme.headingsFontSizeMd[p.type - 1] * MULTIPLIER}em;
+  }
+  ${hasMarginStyles};
+`;
+
+/**
+ * Provides a header placeholder while a user waits for the content to load.
+ */
+const HeaderSkeleton = forwardRef<HTMLDivElement, HeaderSkeletonProps>(
+  ({ type = 1, hasMargin = false, width = '100%', ...rest }, ref) => (
+    <StyledHeaderSkeleton
+      type={type}
+      hasMargin={hasMargin}
+      width={width}
+      {...rest}
+      ref={ref}
+    />
+  )
+);
+
+HeaderSkeleton.displayName = 'HeaderSkeleton';
+
+export default HeaderSkeleton;

package/src/Image/index.tsx

@@ -0,0 +1,104 @@
+import { css } from '@emotion/react';
+
+import styled from '@emotion/styled';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef, useCallback } from 'react';
+
+const EMPTY_IMAGE =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO8+R8AArcB2pIvCSwAAAAASUVORK5CYII=';
+
+type JsxImgProps = Omit<JSX.IntrinsicElements['img'], 'sizes' | 'ref'>;
+export interface ImageProps extends JsxImgProps {
+  /**
+   * The image URL.
+   * @default undefined
+   */
+  url?: string;
+  /**
+   * All available sizes of the image.
+   * @default [72, 192, 512, 1024, 2560]
+   */
+  sizes?: number[];
+  /**
+   * The image size if the browser does not support lazy loading.
+   * @default 72
+   */
+  defaultSize?: number;
+  /**
+   * Whether the image is cropped.
+   * @default false
+   */
+  cropped?: boolean;
+  /**
+   * Sets object-fit: cover.
+   * @default false
+   */
+  cover?: boolean;
+}
+
+const coverStyles = (p) =>
+  p.cover &&
+  css`
+    height: 100%;
+    object-fit: cover;
+  `;
+
+type StyledImageProps = Pick<ImageProps, 'cover'>;
+const StyledImage = styled('img', omitEmotionProps('cover'))<StyledImageProps>`
+  display: block; // To remove the indent under the image
+  width: 100%;
+  border-radius: ${(p) => p.theme.borderRadius}em;
+  ${coverStyles};
+`;
+
+/**
+ * The image with lazy loading. Required lazysizes.
+ * Should be loaded by @os-team/image-storage.
+ */
+const Image = forwardRef<HTMLImageElement, ImageProps>(
+  (
+    {
+      url,
+      sizes = [72, 192, 512, 1024, 2560],
+      defaultSize = 72,
+      cropped = false,
+      cover = false,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    const getUrl = useCallback(
+      (size: number) => `${url}-${size}${cropped ? '-c' : ''}`,
+      [url, cropped]
+    );
+
+    if (!url) {
+      return (
+        <StyledImage
+          src={EMPTY_IMAGE}
+          className={className}
+          {...rest}
+          ref={ref}
+        />
+      );
+    }
+
+    return (
+      <StyledImage
+        src={getUrl(defaultSize)}
+        srcSet={EMPTY_IMAGE}
+        data-sizes='auto'
+        data-srcset={sizes.map((size) => `${getUrl(size)} ${size}w`).join(', ')}
+        cover={cover}
+        className={[className, 'lazyload'].filter((i) => i).join(' ')}
+        {...rest}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Image.displayName = 'Image';
+
+export default Image;

package/src/ImageSkeleton/index.tsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+import React, { forwardRef } from 'react';
+
+import Skeleton, { SkeletonProps } from '../Skeleton';
+
+export type ImageSkeletonProps = Omit<SkeletonProps, 'width'>;
+
+const StyledImageSkeleton = styled(Skeleton)`
+  height: 100%;
+`;
+
+/**
+ * Provides an image placeholder while a user waits for the content to load.
+ */
+const ImageSkeleton = forwardRef<HTMLDivElement, ImageSkeletonProps>(
+  (props, ref) => <StyledImageSkeleton width='100%' {...props} ref={ref} />
+);
+
+ImageSkeleton.displayName = 'ImageSkeleton';
+
+export default ImageSkeleton;