@os-design/core 1.0.199 → 1.0.200

package/src/RadioGroup/index.tsx

@@ -0,0 +1,165 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { m } from '@os-design/media';
+import { WithSize } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps, useForwardedState } from '@os-design/utils';
+import React, { forwardRef } from 'react';
+import Button, { ButtonProps } from '../Button';
+
+export interface RadioGroupOption
+  extends Omit<ButtonProps, 'type' | 'wide' | 'size'> {
+  /**
+   * The title of the option.
+   */
+  title: string;
+  /**
+   * The value of the option.
+   */
+  value: string;
+}
+
+type JsxDivProps = Omit<
+  JSX.IntrinsicElements['div'],
+  'value' | 'defaultValue' | 'onChange' | 'ref'
+>;
+export interface RadioGroupProps extends JsxDivProps, WithSize {
+  /**
+   * Options of the radio group.
+   * @default undefined
+   */
+  options?: RadioGroupOption[];
+  /**
+   * Whether the radio group has full width.
+   * Possible values:
+   * `default` – the radio group has full width if the screen width is less than xs;
+   * `always` – the radio group always has full width;
+   * `never` – the radio group never has full width.
+   * @default default
+   */
+  wide?: 'default' | 'always' | 'never';
+  /**
+   * Whether the radio group is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Selected option.
+   * @default false
+   */
+  value?: string;
+  /**
+   * The default value.
+   * @default undefined
+   */
+  defaultValue?: string;
+  /**
+   * The change event handler.
+   * @default undefined
+   */
+  onChange?: (value: string) => void;
+}
+
+const wideDefaultStyles = (p) =>
+  p.wide === 'default' &&
+  css`
+    ${m.max.xxs} {
+      width: 100%;
+      & > button {
+        flex: 1;
+      }
+    }
+  `;
+
+const wideAlwaysStyles = (p) =>
+  p.wide === 'always' &&
+  css`
+    width: 100%;
+    & > button {
+      flex: 1;
+    }
+  `;
+
+type ContainerProps = Required<Pick<RadioGroupProps, 'wide' | 'disabled'>>;
+const Container = styled(
+  'div',
+  omitEmotionProps('wide', 'disabled')
+)<ContainerProps>`
+  display: inline-flex;
+  flex-wrap: wrap;
+
+  border-radius: ${(p) => p.theme.borderRadius}em;
+  overflow: hidden;
+  border: 1px solid
+    ${(p) =>
+      p.disabled
+        ? clr(p.theme.buttonDisabledGhostColorText)
+        : clr(p.theme.colorPrimary)};
+
+  ${wideDefaultStyles};
+  ${wideAlwaysStyles};
+`;
+
+const StyledButton = styled(Button)`
+  border-radius: 0;
+`;
+
+/**
+ * The radio buttons that allow a user to select only one of a limited number of options.
+ */
+const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
+  (
+    {
+      options = [],
+      wide = 'default',
+      disabled = false,
+      value,
+      defaultValue,
+      onChange = () => {},
+      size,
+      ...rest
+    },
+    ref
+  ) => {
+    const [forwardedValue, setForwardedValue] = useForwardedState({
+      value,
+      defaultValue,
+      onChange,
+    });
+
+    return (
+      <div>
+        <Container wide={wide} disabled={disabled} {...rest} ref={ref}>
+          {options?.map(
+            ({
+              title,
+              value: valueOption,
+              disabled: disabledOption,
+              onClick = () => {},
+              ...buttonRest
+            }) => (
+              <StyledButton
+                key={valueOption}
+                type={forwardedValue === valueOption ? 'primary' : 'ghost'}
+                wide='never'
+                disabled={disabled || disabledOption}
+                size={size}
+                onClick={(e) => {
+                  setForwardedValue(valueOption);
+                  onClick(e);
+                }}
+                {...buttonRest}
+              >
+                {title}
+              </StyledButton>
+            )
+          )}
+        </Container>
+      </div>
+    );
+  }
+);
+
+RadioGroup.displayName = 'RadioGroup';
+
+export default RadioGroup;

package/src/RadioGroupSkeleton/index.tsx

@@ -0,0 +1,36 @@
+import styled from '@emotion/styled';
+
+import { sizeStyles, WithSize } from '@os-design/styles';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
+
+import Skeleton, { SkeletonProps } from '../Skeleton';
+
+export interface RadioGroupSkeletonProps extends SkeletonProps, WithSize {
+  /**
+   * The width of the skeleton.
+   * @default 10em
+   */
+  width?: string;
+}
+
+const StyledRadioGroupSkeleton = styled(
+  Skeleton,
+  omitEmotionProps('size')
+)<WithSize>`
+  height: calc(${(p) => p.theme.baseHeight}em + 2px);
+  ${sizeStyles};
+`;
+
+/**
+ * Provides a radio group placeholder while a user waits for the content to load.
+ */
+const RadioGroupSkeleton = forwardRef<HTMLDivElement, RadioGroupSkeletonProps>(
+  ({ width = '10em', ...rest }, ref) => (
+    <StyledRadioGroupSkeleton width={width} {...rest} ref={ref} />
+  )
+);
+
+RadioGroupSkeleton.displayName = 'RadioGroupSkeleton';
+
+export default RadioGroupSkeleton;

package/src/Result/index.tsx

@@ -0,0 +1,109 @@
+import styled from '@emotion/styled';
+import { m } from '@os-design/media';
+import { sizeStyles, WithSize } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
+
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface ResultProps extends JsxDivProps, WithSize {
+  /**
+   * The title of the result.
+   */
+  title: string;
+  /**
+   * The description that is under the title.
+   * @default undefined
+   */
+  description?: string;
+  /**
+   * The icon that is located above the title.
+   * @default undefined
+   */
+  icon?: React.ReactElement;
+  /**
+   * Active elements.
+   * @default undefined
+   */
+  actions?: React.ReactNode;
+}
+
+const Container = styled('div', omitEmotionProps('size'))<WithSize>`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  color: ${(p) => clr(p.theme.colorText)};
+  padding: 2.6em 0;
+
+  ${sizeStyles};
+`;
+
+const IconContainer = styled.div`
+  font-size: 6em;
+  line-height: 1;
+  color: ${(p) => clr(p.theme.resultColorIcon)};
+  margin-bottom: 0.1em;
+`;
+
+const Text = styled.div`
+  text-align: center;
+  max-width: 28em;
+`;
+
+const Title = styled(Text)`
+  font-size: ${(p) => p.theme.sizes.large}em;
+  font-weight: 500;
+`;
+
+const Description = styled(Text)`
+  font-size: ${(p) => p.theme.sizes.small}em;
+  color: ${(p) => clr(p.theme.resultColorDescription)};
+  margin-top: 0.5em;
+`;
+
+const ActiveElements = styled.div`
+  margin-top: 2em;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  & > *:not(:first-of-type) {
+    margin-top: 0.5em;
+  }
+
+  ${m.min.sm} {
+    flex-direction: row;
+
+    & > *:not(:first-of-type) {
+      margin-top: 0;
+      margin-left: 0.5em;
+    }
+  }
+`;
+
+const ChildrenContainer = styled.div`
+  margin-top: 2em;
+`;
+
+/**
+ * Used to give the user feedback instead of results.
+ * For example, error happened, results not found, no results yet.
+ */
+const Result = forwardRef<HTMLDivElement, ResultProps>(
+  ({ title, description, icon, actions, children, ...rest }, ref) => (
+    <Container {...rest} ref={ref}>
+      {icon && <IconContainer>{icon}</IconContainer>}
+      <Title>{title}</Title>
+      {description && <Description>{description}</Description>}
+      {actions && <ActiveElements>{actions}</ActiveElements>}
+      {children && <ChildrenContainer>{children}</ChildrenContainer>}
+    </Container>
+  )
+);
+
+Result.displayName = 'Result';
+
+export default Result;

package/src/ScrollButton/index.tsx

@@ -0,0 +1,159 @@
+import { css, keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Down, Up } from '@os-design/icons';
+import Portal from '@os-design/portal';
+import { clr, ThemeOverrider, useTheme } from '@os-design/theming';
+import { omitEmotionProps, useClosable } from '@os-design/utils';
+
+import React, {
+  forwardRef,
+  MouseEventHandler,
+  RefObject,
+  useCallback,
+} from 'react';
+import Button, { ButtonProps } from '../Button';
+import useContainerPosition, {
+  ContainerPosition,
+} from './utils/useContainerPosition';
+import useVisibility from './utils/useVisibility';
+
+export interface ScrollButtonProps extends Omit<ButtonProps, 'type' | 'wide'> {
+  /**
+   * The container that needs to be scrolled.
+   * @default undefined
+   */
+  container?: Element | RefObject<Element>;
+  /**
+   * Where the container should be scrolled.
+   * @default top
+   */
+  scrollTo?: 'top' | 'bottom';
+  /**
+   * The min scroll offset when the button is visible.
+   * @default 500
+   */
+  minOffset?: number;
+}
+
+const fadeIn = keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+
+const fadeOut = keyframes`
+  from { opacity: 1; }
+  to { opacity: 0; }
+`;
+
+const visibleStyles = (p) =>
+  p.visible &&
+  css`
+    animation: ${fadeIn} ${p.theme.transitionDelay}ms forwards;
+  `;
+
+const invisibleStyles = (p) =>
+  !p.visible &&
+  css`
+    animation: ${fadeOut} ${p.theme.transitionDelay}ms forwards;
+  `;
+
+interface StyledButtonProps {
+  visible: boolean;
+  containerPosition: ContainerPosition;
+}
+const StyledButton = styled(
+  Button,
+  omitEmotionProps('visible', 'containerPosition')
+)<StyledButtonProps>`
+  position: fixed;
+  right: ${(p) =>
+    p.containerPosition.right > 0
+      ? `calc(${p.containerPosition.right}px + ${p.theme.scrollButtonMargin}em)`
+      : `${p.theme.scrollButtonMargin}em`};
+  bottom: ${(p) =>
+    `calc(${
+      p.containerPosition.bottom > 0 ? `${p.containerPosition.bottom}px + ` : ''
+    }${p.theme.scrollButtonMargin}em + env(safe-area-inset-bottom))`};
+  box-shadow: 0 0.15em 0.8em ${(p) => clr(p.theme.scrollButtonColorBoxShadow)};
+
+  ${visibleStyles};
+  ${invisibleStyles};
+`;
+
+/**
+ * The button to scroll to either the top or bottom of the container.
+ */
+const ScrollButton = forwardRef<HTMLButtonElement, ScrollButtonProps>(
+  (
+    {
+      container,
+      scrollTo = 'top',
+      minOffset = 500,
+      onClick = () => {},
+      ...rest
+    },
+    ref
+  ) => {
+    const visible = useVisibility({ container, scrollTo, minOffset });
+    const containerPosition = useContainerPosition(container);
+    const { theme } = useTheme();
+    const mounted = useClosable(visible, theme.transitionDelay);
+
+    // Scroll through the container when the user clicks the button
+    const clickHandler = useCallback<MouseEventHandler<HTMLButtonElement>>(
+      (e) => {
+        // Scroll the window if the container is not defined
+        if (!container) {
+          window.scrollTo({
+            top: scrollTo === 'top' ? 0 : document.body.scrollHeight,
+          });
+          return;
+        }
+
+        // Otherwise scroll the container
+        const containerElement =
+          container instanceof Element ? container : container.current;
+        if (!containerElement) return;
+
+        containerElement.scrollTo({
+          top: scrollTo === 'top' ? 0 : containerElement.scrollHeight,
+        });
+
+        // Call the passed onClick handler
+        onClick(e);
+      },
+      [container, scrollTo, onClick]
+    );
+
+    if (!mounted) return null;
+
+    return (
+      <Portal container={container}>
+        <ThemeOverrider
+          overrides={(t) => ({
+            buttonPrimaryColorBg: t.scrollButtonColorBg,
+            buttonPrimaryColorText: t.scrollButtonColorText,
+            buttonPrimaryColorBgHover: t.scrollButtonColorBgHover,
+          })}
+        >
+          <StyledButton
+            visible={visible}
+            containerPosition={containerPosition}
+            wide='never'
+            size='small'
+            onClick={clickHandler}
+            aria-label={`Scroll to ${scrollTo}`}
+            {...rest}
+            ref={ref}
+          >
+            {scrollTo === 'top' ? <Up /> : <Down />}
+          </StyledButton>
+        </ThemeOverrider>
+      </Portal>
+    );
+  }
+);
+
+ScrollButton.displayName = 'ScrollButton';
+
+export default ScrollButton;

package/src/ScrollButton/utils/useContainerPosition.ts

@@ -0,0 +1,41 @@
+import { useBrowserLayoutEffect, useResizeObserver } from '@os-design/utils';
+import { RefObject, useCallback, useState } from 'react';
+
+export interface ContainerPosition {
+  right: number;
+  bottom: number;
+}
+
+/**
+ * Calculates the position of the container.
+ */
+const useContainerPosition = (
+  container?: Element | RefObject<Element>
+): ContainerPosition => {
+  const [position, setPosition] = useState<ContainerPosition>({
+    right: 0,
+    bottom: 0,
+  });
+
+  const updatePosition = useCallback(() => {
+    if (!container) return;
+    const element =
+      container instanceof Element ? container : container.current;
+    if (!element) return;
+
+    const { right, bottom } = element.getBoundingClientRect();
+    const { innerWidth, innerHeight } = window;
+
+    setPosition({
+      right: innerWidth - right,
+      bottom: innerHeight - bottom,
+    });
+  }, [container]);
+
+  useBrowserLayoutEffect(() => updatePosition(), [updatePosition]);
+  useResizeObserver(container as never, updatePosition);
+
+  return position;
+};
+
+export default useContainerPosition;

package/src/ScrollButton/utils/useVisibility.ts

@@ -0,0 +1,56 @@
+import { useBrowserLayoutEffect, useEvent } from '@os-design/utils';
+import { RefObject, useCallback, useState } from 'react';
+
+interface UseVisibilityProps {
+  container?: Element | RefObject<Element>;
+  scrollTo: 'top' | 'bottom';
+  minOffset: number;
+}
+
+/**
+ * Controls the visibility of the button.
+ */
+const useVisibility = ({
+  container,
+  scrollTo,
+  minOffset,
+}: UseVisibilityProps): boolean => {
+  const [visible, setVisible] = useState(false);
+
+  // Update the visibility of the button when the user scrolls the container
+  const updateVisibility = useCallback(() => {
+    let offset = 0;
+
+    if (!container) {
+      offset =
+        scrollTo === 'top'
+          ? window.scrollY
+          : document.body.scrollHeight - window.scrollY - window.innerHeight;
+    } else {
+      const containerElement =
+        container instanceof Element ? container : container.current;
+      if (containerElement === null) return;
+
+      offset =
+        scrollTo === 'top'
+          ? containerElement.scrollTop
+          : containerElement.scrollHeight -
+            containerElement.scrollTop -
+            containerElement.clientHeight;
+    }
+
+    setVisible(offset >= minOffset);
+  }, [container, scrollTo, minOffset]);
+
+  useBrowserLayoutEffect(() => updateVisibility(), [updateVisibility]);
+  useEvent(
+    container ||
+      ((typeof window !== 'undefined' ? window : undefined) as EventTarget),
+    'scroll',
+    updateVisibility
+  );
+
+  return visible;
+};
+
+export default useVisibility;