@noya-app/noya-designsystem 0.0.2

package/src/components/Sortable.tsx

@@ -0,0 +1,296 @@
+import {
+  closestCenter,
+  DndContext,
+  DragEndEvent,
+  DragMoveEvent,
+  DragOverlay,
+  DragStartEvent,
+  PointerSensor,
+  Translate,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import React, {
+  createContext,
+  memo,
+  ReactNode,
+  Ref,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+export type RelativeDropPosition = 'above' | 'below' | 'inside';
+
+export type DropValidator = (
+  sourceIndex: number,
+  destinationIndex: number,
+  position: RelativeDropPosition,
+) => boolean;
+
+export const normalizeListIndex = (
+  index: number,
+  position: 'above' | 'below',
+): number => {
+  return position === 'above' ? index : index + 1;
+};
+
+const defaultAcceptsDrop: DropValidator = (
+  sourceIndex,
+  destinationIndex,
+  position,
+) => {
+  if (position === 'inside') return false;
+
+  const normalized = normalizeListIndex(destinationIndex, position);
+
+  if (sourceIndex === normalized || sourceIndex + 1 === normalized) {
+    return false;
+  }
+
+  return true;
+};
+
+const SortableItemContext = createContext<{
+  keys: string[];
+  position: Translate;
+  acceptsDrop: DropValidator;
+  setActivatorEvent: (event: PointerEvent) => void;
+}>({
+  keys: [],
+  position: { x: 0, y: 0 },
+  acceptsDrop: defaultAcceptsDrop,
+  setActivatorEvent: () => {},
+});
+
+function validateDropIndicator(
+  acceptsDrop: DropValidator,
+  keys: string[],
+  activeId: string,
+  overId: string,
+  offsetTop: number,
+  elementTop: number,
+  elementHeight: number,
+): RelativeDropPosition | undefined {
+  const activeIndex = keys.indexOf(activeId);
+  const overIndex = keys.indexOf(overId);
+
+  const acceptsDropInside = acceptsDrop(activeIndex, overIndex, 'inside');
+
+  // If we're in the center of the element, prefer dropping inside
+  if (
+    offsetTop >= elementTop + elementHeight / 3 &&
+    offsetTop <= elementTop + (elementHeight * 2) / 3 &&
+    acceptsDropInside
+  )
+    return 'inside';
+
+  // Are we over the top or bottom half of the element?
+  const indicator =
+    offsetTop < elementTop + elementHeight / 2 ? 'above' : 'below';
+
+  // Drop above or below if possible, falling back to inside
+  return acceptsDrop(activeIndex, overIndex, indicator)
+    ? indicator
+    : acceptsDropInside
+    ? 'inside'
+    : undefined;
+}
+
+/* ----------------------------------------------------------------------------
+ * Item
+ * ------------------------------------------------------------------------- */
+
+type UseSortableReturnType = ReturnType<typeof useSortable>;
+
+interface ItemProps<T> {
+  id: string;
+  disabled?: boolean;
+  children: (
+    props: {
+      ref: Ref<T>;
+      relativeDropPosition?: RelativeDropPosition;
+      [key: string]: any;
+    } & UseSortableReturnType['attributes'],
+  ) => JSX.Element;
+}
+
+function SortableItem<T extends HTMLElement>({
+  id,
+  disabled,
+  children,
+}: ItemProps<T>) {
+  const { keys, position, acceptsDrop, setActivatorEvent } =
+    useContext(SortableItemContext);
+  const sortable = useSortable({ id, disabled });
+
+  const {
+    active,
+    activatorEvent,
+    attributes,
+    listeners,
+    setNodeRef,
+    isDragging,
+    index,
+    overIndex,
+    over,
+  } = sortable;
+
+  if (activatorEvent) {
+    setActivatorEvent(activatorEvent as PointerEvent);
+  }
+
+  const eventY = (activatorEvent as PointerEvent | null)?.clientY ?? 0;
+  const offsetTop = eventY + position.y;
+
+  const ref = useCallback((node: T) => setNodeRef(node), [setNodeRef]);
+
+  return children({
+    ref,
+    ...attributes,
+    ...listeners,
+    relativeDropPosition:
+      index >= 0 && index === overIndex && !isDragging && active && over
+        ? validateDropIndicator(
+            acceptsDrop,
+            keys,
+            active.id,
+            over.id,
+            offsetTop,
+            over.rect.offsetTop,
+            over.rect.height,
+          )
+        : undefined,
+  });
+}
+
+/* ----------------------------------------------------------------------------
+ * Root
+ * ------------------------------------------------------------------------- */
+
+interface RootProps {
+  keys: string[];
+  children: ReactNode;
+  renderOverlay?: (index: number) => ReactNode;
+  onMoveItem?: (
+    sourceIndex: number,
+    destinationIndex: number,
+    position: RelativeDropPosition,
+  ) => void;
+  acceptsDrop?: DropValidator;
+}
+
+function SortableRoot({
+  keys,
+  children,
+  onMoveItem,
+  renderOverlay,
+  acceptsDrop = defaultAcceptsDrop,
+}: RootProps) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 4,
+      },
+    }),
+  );
+
+  const [activeIndex, setActiveIndex] = useState<number | undefined>();
+  const activatorEvent = useRef<PointerEvent | null>(null);
+
+  const setActivatorEvent = useCallback((event: PointerEvent) => {
+    activatorEvent.current = event;
+  }, []);
+
+  const [position, setPosition] = useState<Translate>({ x: 0, y: 0 });
+
+  const handleDragStart = useCallback(
+    (event: DragStartEvent) => {
+      setActiveIndex(keys.indexOf(event.active.id));
+    },
+    [keys],
+  );
+
+  const handleDragMove = useCallback((event: DragMoveEvent) => {
+    setPosition({ ...event.delta });
+  }, []);
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+
+      setActiveIndex(undefined);
+
+      if (over && active.id !== over.id) {
+        const oldIndex = keys.indexOf(active.id);
+        const newIndex = keys.indexOf(over.id);
+
+        const eventY = activatorEvent.current?.clientY ?? 0;
+        const offsetTop = eventY + position.y;
+
+        const indicator = validateDropIndicator(
+          acceptsDrop,
+          keys,
+          active.id,
+          over.id,
+          offsetTop,
+          over.rect.offsetTop,
+          over.rect.height,
+        );
+
+        if (!indicator) return;
+
+        onMoveItem?.(oldIndex, newIndex, indicator);
+      }
+    },
+    [acceptsDrop, keys, onMoveItem, position.y],
+  );
+
+  return (
+    <SortableItemContext.Provider
+      value={useMemo(
+        () => ({
+          keys,
+          acceptsDrop,
+          position,
+          setActivatorEvent,
+        }),
+        [acceptsDrop, keys, position, setActivatorEvent],
+      )}
+    >
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragStart={handleDragStart}
+        onDragMove={handleDragMove}
+        onDragEnd={handleDragEnd}
+      >
+        <SortableContext items={keys} strategy={verticalListSortingStrategy}>
+          {children}
+        </SortableContext>
+        {renderOverlay &&
+          createPortal(
+            <DragOverlay dropAnimation={null}>
+              {activeIndex !== undefined &&
+                activeIndex >= 0 &&
+                renderOverlay(activeIndex)}
+            </DragOverlay>,
+            document.body,
+          )}
+      </DndContext>
+    </SortableItemContext.Provider>
+  );
+}
+
+export namespace Sortable {
+  export const Item = memo(SortableItem);
+  export const Root = memo(SortableRoot);
+}

package/src/components/Spacer.tsx

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+
+interface Props {
+  size?: number | string;
+  inline?: boolean;
+}
+
+/* ----------------------------------------------------------------------------
+ * Vertical
+ * ------------------------------------------------------------------------- */
+
+const SpacerVertical = styled.span<Props>(({ size, inline }) => ({
+  display: inline ? 'inline-block' : 'block',
+  ...(size === undefined ? { flex: 1 } : { minHeight: size }),
+}));
+
+/* ----------------------------------------------------------------------------
+ * Horizontal
+ * ------------------------------------------------------------------------- */
+
+const SpacerHorizontal = styled.span<Props>(({ size, inline }) => ({
+  display: inline ? 'inline-block' : 'block',
+  ...(size === undefined ? { flex: 1 } : { minWidth: size }),
+}));
+
+export namespace Spacer {
+  export const Vertical = SpacerVertical;
+  export const Horizontal = SpacerHorizontal;
+}

package/src/components/Stack.tsx

@@ -0,0 +1,142 @@
+import React, {
+  Children,
+  CSSProperties,
+  ForwardedRef,
+  forwardRef,
+  memo,
+  ReactHTML,
+  ReactNode,
+} from 'react';
+import styled from 'styled-components';
+import { BreakpointCollection, mergeBreakpoints } from '../utils/breakpoints';
+import withSeparatorElements from '../utils/withSeparatorElements';
+
+interface StyleProps {
+  display?: 'flex' | 'inline-flex' | 'none' | 'block';
+  visibility?: CSSProperties['visibility'];
+  position?: CSSProperties['position'];
+  zIndex?: CSSProperties['zIndex'];
+  gap?: CSSProperties['gap'];
+  inset?: CSSProperties['inset'];
+  top?: CSSProperties['top'];
+  right?: CSSProperties['right'];
+  bottom?: CSSProperties['bottom'];
+  left?: CSSProperties['left'];
+  flexDirection?: CSSProperties['flexDirection'];
+  justifyContent?: CSSProperties['justifyContent'];
+  alignItems?: CSSProperties['alignItems'];
+  alignSelf?: CSSProperties['alignSelf'];
+  flex?: CSSProperties['flex'];
+  flexWrap?: CSSProperties['flexWrap'];
+  height?: CSSProperties['height'];
+  minHeight?: CSSProperties['minHeight'];
+  maxHeight?: CSSProperties['maxHeight'];
+  width?: CSSProperties['width'];
+  minWidth?: CSSProperties['minWidth'];
+  maxWidth?: CSSProperties['maxWidth'];
+  aspectRatio?: CSSProperties['aspectRatio'];
+  padding?: CSSProperties['padding'];
+  paddingVertical?: string | number;
+  paddingHorizontal?: string | number;
+  margin?: CSSProperties['margin'];
+  background?: CSSProperties['background'];
+  backgroundSize?: CSSProperties['backgroundSize'];
+  backgroundPosition?: CSSProperties['backgroundPosition'];
+  borderRadius?: CSSProperties['borderRadius'];
+  overflowX?: CSSProperties['overflowX'];
+  overflowY?: CSSProperties['overflowY'];
+  overflow?: CSSProperties['overflow'];
+  textOverflow?: CSSProperties['textOverflow'];
+  boxShadow?: CSSProperties['boxShadow'];
+  outline?: CSSProperties['outline'];
+  border?: CSSProperties['border'];
+  borderTop?: CSSProperties['borderTop'];
+  borderRight?: CSSProperties['borderRight'];
+  borderBottom?: CSSProperties['borderBottom'];
+  borderLeft?: CSSProperties['borderLeft'];
+  cursor?: CSSProperties['cursor'];
+  userSelect?: CSSProperties['userSelect'];
+  transition?: CSSProperties['transition'];
+  opacity?: CSSProperties['opacity'];
+  filter?: CSSProperties['filter'];
+  color?: CSSProperties['color'];
+  order?: CSSProperties['order'];
+  pointerEvents?: CSSProperties['pointerEvents'];
+  lineHeight?: CSSProperties['lineHeight'];
+}
+
+export type StackBreakpointList = BreakpointCollection<StyleProps>;
+
+interface Props extends StyleProps {
+  id?: string;
+  as?: keyof ReactHTML;
+  className?: string;
+  children?: ReactNode;
+  separator?: Parameters<typeof withSeparatorElements>[1];
+  breakpoints?: StackBreakpointList | null | false;
+  href?: string; // Shouldn't be here, ideally
+  tabIndex?: number;
+}
+
+const Element = styled.div<{
+  styleProps: StyleProps;
+  breakpoints?: StackBreakpointList | null | false;
+}>(({ styleProps, breakpoints }) => ({
+  ...styleProps,
+  ...mergeBreakpoints(breakpoints || []),
+}));
+
+const StackBase = forwardRef(function StackBase(
+  { id, as, children, separator, breakpoints, tabIndex, href, ...rest }: Props,
+  forwardedRef: ForwardedRef<HTMLElement>,
+) {
+  const elements = separator
+    ? withSeparatorElements(Children.toArray(children), separator)
+    : children;
+
+  const styleProps: StyleProps = {
+    display: 'flex',
+    position: 'relative',
+    alignItems: 'stretch',
+    ...rest,
+  };
+
+  return (
+    <Element
+      ref={forwardedRef}
+      id={id}
+      as={as}
+      styleProps={styleProps}
+      breakpoints={breakpoints}
+      tabIndex={tabIndex}
+      {...(href && { href })}
+    >
+      {elements}
+    </Element>
+  );
+});
+
+type StackProps = Omit<Props, 'flexDirection'>;
+
+const VerticalStack = memo(
+  forwardRef(function VStack(
+    props: StackProps,
+    forwardedRef: ForwardedRef<HTMLElement>,
+  ) {
+    return <StackBase {...props} flexDirection="column" ref={forwardedRef} />;
+  }),
+);
+
+const HorizontalStack = memo(
+  forwardRef(function HStack(
+    props: StackProps,
+    forwardedRef: ForwardedRef<HTMLElement>,
+  ) {
+    return <StackBase {...props} flexDirection="row" ref={forwardedRef} />;
+  }),
+);
+
+export const Stack = {
+  V: VerticalStack,
+  H: HorizontalStack,
+};

package/src/components/Switch.tsx

@@ -0,0 +1,67 @@
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import React from 'react';
+import styled from 'styled-components';
+
+type SwitchVariant = 'normal' | 'primary' | 'secondary';
+
+const SwitchRoot = styled(SwitchPrimitive.Root)<{
+  variant: SwitchVariant;
+}>(({ theme, variant }) => ({
+  all: 'unset',
+  width: 32,
+  height: 19,
+  backgroundColor: theme.colors.activeBackground,
+  borderRadius: '9999px',
+  position: 'relative',
+  WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+  cursor: 'pointer',
+  // '&:focus': {
+  //   boxShadow: `0 0 0 1px ${
+  //     variant === 'secondary' ? theme.colors.secondary : theme.colors.primary
+  //   }`,
+  // },
+  '&[data-state="checked"]': {
+    backgroundColor:
+      variant === 'primary'
+        ? theme.colors.primary
+        : variant === 'secondary'
+        ? theme.colors.secondary
+        : undefined,
+  },
+}));
+
+const SwitchThumb = styled(SwitchPrimitive.Thumb)({
+  display: 'block',
+  width: 15,
+  height: 15,
+  backgroundColor: 'white',
+  borderRadius: '9999px',
+  transition: 'transform 100ms',
+  transform: 'translateX(2px)',
+  willChange: 'transform',
+  '&[data-state="checked"]': { transform: 'translateX(15px)' },
+});
+
+interface Props {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  variant?: SwitchVariant;
+}
+
+export const Switch = function Switch({
+  value,
+  onChange,
+  variant = 'normal',
+}: Props) {
+  return (
+    <SwitchRoot
+      variant={variant}
+      checked={value}
+      onCheckedChange={(newValue) => {
+        onChange(newValue);
+      }}
+    >
+      <SwitchThumb />
+    </SwitchRoot>
+  );
+};

package/src/components/Text.tsx

@@ -0,0 +1,164 @@
+import React, { ForwardedRef, forwardRef, ReactHTML, ReactNode } from 'react';
+import styled, { CSSProperties } from 'styled-components';
+import { Theme, ThemeColorName } from '../theme';
+import { BreakpointCollection, mergeBreakpoints } from '../utils/breakpoints';
+
+const elements: Record<keyof Theme['textStyles'], keyof ReactHTML> = {
+  title: 'h1',
+  subtitle: 'h1',
+  heading1: 'h1',
+  heading2: 'h2',
+  heading3: 'h3',
+  heading4: 'h4',
+  heading5: 'h5',
+  body: 'p',
+  small: 'span',
+  code: 'code',
+  label: 'span',
+};
+
+type StyleProps = {
+  flex?: CSSProperties['flex'];
+  padding?: CSSProperties['padding'];
+  background?: CSSProperties['background'];
+  borderRadius?: CSSProperties['borderRadius'];
+  textAlign?: CSSProperties['textAlign'];
+  fontWeight?: CSSProperties['fontWeight'];
+  fontStyle?: CSSProperties['fontStyle'];
+  fontSize?: CSSProperties['fontSize'];
+  lineHeight?: CSSProperties['lineHeight'];
+  fontFamily?: CSSProperties['fontFamily'];
+  wordBreak?: CSSProperties['wordBreak'];
+  whiteSpace?: CSSProperties['whiteSpace'];
+  height?: CSSProperties['height'];
+  width?: CSSProperties['width'];
+  opacity?: CSSProperties['opacity'];
+  position?: CSSProperties['position'];
+  overflow?: CSSProperties['overflow'];
+  textOverflow?: CSSProperties['textOverflow'];
+  textDecoration?: CSSProperties['textDecoration'];
+  display?: CSSProperties['display'];
+  top?: CSSProperties['top'];
+  right?: CSSProperties['right'];
+  bottom?: CSSProperties['bottom'];
+  left?: CSSProperties['left'];
+  userSelect?: CSSProperties['userSelect'];
+};
+
+export type TextBreakpointList = BreakpointCollection<StyleProps>;
+
+interface Props extends StyleProps {
+  as?: keyof ReactHTML;
+  href?: string;
+  className?: string;
+  variant: keyof Theme['textStyles'];
+  breakpoints?: BreakpointCollection<StyleProps> | null | false;
+  color?: ThemeColorName;
+  children: ReactNode;
+  onClick?: () => void;
+}
+
+const StyledElement = styled.span<
+  {
+    variant: keyof Theme['textStyles'];
+    styleProps: StyleProps;
+  } & Pick<Props, 'variant' | 'breakpoints' | 'color'>
+>(({ theme, variant, styleProps, breakpoints, color }) => ({
+  ...theme.textStyles[variant],
+  color: color ? theme.colors[color] : undefined,
+  ...styleProps,
+  ...mergeBreakpoints(breakpoints || []),
+}));
+
+export const Text = forwardRef(function Text(
+  {
+    as,
+    variant,
+    breakpoints,
+    children,
+    className,
+    color,
+    href,
+    onClick,
+    ...rest
+  }: Props,
+  forwardedRef: ForwardedRef<HTMLElement>,
+) {
+  const element = as ?? elements[variant] ?? 'span';
+
+  return (
+    <StyledElement
+      ref={forwardedRef}
+      as={element}
+      className={className}
+      variant={variant}
+      breakpoints={breakpoints}
+      styleProps={rest}
+      color={color}
+      onClick={onClick}
+      {...(href && { href })}
+    >
+      {children}
+    </StyledElement>
+  );
+});
+
+type PresetProps = Omit<Props, 'variant'>;
+
+export const Heading1 = forwardRef(
+  (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (
+    <Text ref={ref} {...props} variant="heading1" />
+  ),
+);
+
+export const Heading2 = forwardRef(
+  (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (
+    <Text ref={ref} {...props} variant="heading2" />
+  ),
+);
+
+export const Heading3 = forwardRef(
+  (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (
+    <Text ref={ref} {...props} variant="heading3" />
+  ),
+);
+
+export const Heading4 = forwardRef(
+  (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (
+    <Text ref={ref} {...props} variant="heading4" />
+  ),
+);
+
+export const Heading5 = forwardRef(
+  (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (
+    <Text ref={ref} {...props} variant="heading5" />
+  ),
+);
+
+export const Body = forwardRef(
+  (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (
+    <Text ref={ref} {...props} variant="body" />
+  ),
+);
+
+export const Small = forwardRef(
+  (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (
+    <Text ref={ref} {...props} variant="small" />
+  ),
+);
+
+// export const Label = forwardRef(
+//   (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (
+//     <Text ref={ref} {...props} variant="label" />
+//   ),
+// );
+
+export const Italic = ({ children }: { children: ReactNode }) => (
+  <span
+    style={{
+      fontStyle: 'italic',
+    }}
+  >
+    {children}
+  </span>
+);