@steedos-widgets/sortable 1.0.1

package/src/components/components/Container/Container.module.css

@@ -0,0 +1,103 @@
+.Container {
+  display: flex;
+  flex-direction: column;
+  grid-auto-rows: max-content;
+  overflow: hidden;
+  box-sizing: border-box;
+  appearance: none;
+  outline: none;
+  min-width: 350px;
+  margin: 10px;
+  border-radius: 5px;
+  min-height: 200px;
+  transition: background-color 350ms ease;
+  background-color: rgba(246, 246, 246, 1);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  font-size: 1em;
+
+  ul {
+    display: grid;
+    grid-gap: 10px;
+    grid-template-columns: repeat(var(--columns, 1), 1fr);
+    list-style: none;
+    padding: 10px;
+    margin: 0;
+  }
+
+  &.scrollable {
+    ul {
+      overflow-y: auto;
+    }
+  }
+
+  &.placeholder {
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    color: rgba(0, 0, 0, 0.5);
+    background-color: transparent;
+    border-style: dashed;
+    border-color: rgba(0, 0, 0, 0.08);
+
+    &:hover {
+      border-color: rgba(0, 0, 0, 0.15);
+    }
+  }
+
+  &.hover {
+    background-color: rgb(235, 235, 235, 1);
+  }
+
+  &.unstyled {
+    overflow: visible;
+    background-color: transparent !important;
+    border: none !important;
+  }
+
+  &.horizontal {
+    width: 100%;
+
+    ul {
+      grid-auto-flow: column;
+    }
+  }
+
+  &.shadow {
+    box-shadow: 0 1px 10px 0 rgba(34, 33, 81, 0.1);
+  }
+
+  &:focus-visible {
+    border-color: transparent;
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0), 0 0px 0px 2px #4c9ffe;
+  }
+}
+
+.Header {
+  display: flex;
+  padding: 5px 20px;
+  padding-right: 8px;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #fff;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+
+  &:hover {
+    .Actions > * {
+      opacity: 1 !important;
+    }
+  }
+}
+
+.Actions {
+  display: flex;
+
+  > *:first-child:not(:last-child) {
+    opacity: 0;
+
+    &:focus-visible {
+      opacity: 1;
+    }
+  }
+}

package/src/components/components/Container/Container.tsx

@@ -0,0 +1,83 @@
+//@ts-nocheck
+
+import React, {forwardRef} from 'react';
+import classNames from 'classnames';
+
+import {Handle, Remove} from '../Item';
+
+import styles from './Container.module.css';
+
+export interface Props {
+  children: React.ReactNode;
+  columns?: number;
+  label?: string;
+  style?: React.CSSProperties;
+  horizontal?: boolean;
+  hover?: boolean;
+  handleProps?: React.HTMLAttributes<any>;
+  scrollable?: boolean;
+  shadow?: boolean;
+  placeholder?: boolean;
+  unstyled?: boolean;
+  onClick?(): void;
+  onRemove?(): void;
+}
+
+export const Container = forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      children,
+      columns = 1,
+      handleProps,
+      horizontal,
+      hover,
+      onClick,
+      onRemove,
+      label,
+      placeholder,
+      style,
+      scrollable,
+      shadow,
+      unstyled,
+      ...props
+    }: Props,
+    ref
+  ) => {
+    const Component = onClick ? 'button' : 'div';
+    
+    return (
+      <Component
+        {...props}
+        ref={ref}
+        style={
+          {
+            ...style,
+            '--columns': columns,
+          } as React.CSSProperties
+        }
+        className={classNames(
+          styles.Container,
+          unstyled && styles.unstyled,
+          horizontal && styles.horizontal,
+          hover && styles.hover,
+          placeholder && styles.placeholder,
+          scrollable && styles.scrollable,
+          shadow && styles.shadow
+        )}
+        onClick={onClick}
+        tabIndex={onClick ? 0 : undefined}
+      >
+        {label ? (
+          <div className={styles.Header}>
+            {label}
+            <div className={styles.Actions}>
+              {onRemove ? <Remove onClick={onRemove} /> : undefined}
+              <Handle {...handleProps} />
+            </div>
+          </div>
+        ) : null}
+        {placeholder ? children : <ul>{children}</ul>}
+      </Component>
+    );
+  }
+);

package/src/components/components/Container/index.ts

@@ -0,0 +1,2 @@
+export {Container} from './Container';
+export type {Props as ContainerProps} from './Container';

package/src/components/components/Grid/Grid.module.css

@@ -0,0 +1,30 @@
+.Grid {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: repeating-linear-gradient(
+      0deg,
+      transparent,
+      transparent calc(var(--grid-size) - 1px),
+      #ddd calc(var(--grid-size) - 1px),
+      #ddd var(--grid-size)
+    ),
+    repeating-linear-gradient(
+      -90deg,
+      transparent,
+      transparent calc(var(--grid-size) - 1px),
+      #ddd calc(var(--grid-size) - 1px),
+      #ddd var(--grid-size)
+    );
+  background-size: var(--grid-size) var(--grid-size);
+  z-index: -1;
+  pointer-events: none;
+}
+
+.RangeSlider {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+}

package/src/components/components/Grid/Grid.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import styles from './Grid.module.css';
+
+export interface Props {
+  size: number;
+  step?: number;
+  onSizeChange(size: number): void;
+}
+
+export function Grid({size}: Props) {
+  return (
+    <div
+      className={styles.Grid}
+      style={
+        {
+          '--grid-size': `${size}px`,
+        } as React.CSSProperties
+      }
+    />
+  );
+}

package/src/components/components/Grid/index.ts

@@ -0,0 +1 @@
+export {Grid} from './Grid';

package/src/components/components/GridContainer/GridContainer.module.css

@@ -0,0 +1,15 @@
+.GridContainer {
+  max-width: 800px;
+  display: grid;
+  grid-template-columns: repeat(var(--col-count), 1fr);
+  grid-gap: 10px;
+  padding: 20px;
+
+  @media (max-width: 850px) {
+    grid-template-columns: repeat(calc(var(--col-count) - 1), 1fr);
+  }
+
+  @media (max-width: 650px) {
+    grid-template-columns: repeat(calc(var(--col-count) - 2), 1fr);
+  }
+}

package/src/components/components/GridContainer/GridContainer.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import styles from './GridContainer.module.css';
+
+export interface Props {
+  children: React.ReactNode;
+  columns: number;
+}
+
+export function GridContainer({children, columns}: Props) {
+  return (
+    <ul
+      className={styles.GridContainer}
+      style={
+        {
+          '--col-count': columns,
+        } as React.CSSProperties
+      }
+    >
+      {children}
+    </ul>
+  );
+}

package/src/components/components/GridContainer/index.ts

@@ -0,0 +1 @@
+export {GridContainer} from './GridContainer';

package/src/components/components/Item/Item.module.css

@@ -0,0 +1,145 @@
+$font-weight: 400;
+$background-color: #fff;
+$border-color: #efefef;
+$text-color: #333;
+$handle-color: rgba(0, 0, 0, 0.25);
+$box-shadow-border: 0 0 0 calc(1px / var(--scale-x, 1)) rgba(63, 63, 68, 0.05);
+$box-shadow-common: 0 1px calc(3px / var(--scale-x, 1)) 0 rgba(34, 33, 81, 0.15);
+$box-shadow: $box-shadow-border, $box-shadow-common;
+$focused-outline-color: #4c9ffe;
+
+@keyframes pop {
+  0% {
+    transform: scale(1);
+    box-shadow: var(--box-shadow);
+  }
+  100% {
+    transform: scale(var(--scale));
+    box-shadow: var(--box-shadow-picked-up);
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.Wrapper {
+  display: flex;
+  box-sizing: border-box;
+  transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0)
+    scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
+  transform-origin: 0 0;
+  touch-action: manipulation;
+
+  &.fadeIn {
+    animation: fadeIn 500ms ease;
+  }
+
+  &.dragOverlay {
+    --scale: 1.05;
+    --box-shadow: $box-shadow;
+    --box-shadow-picked-up: $box-shadow-border,
+      -1px 0 15px 0 rgba(34, 33, 81, 0.01),
+      0px 15px 15px 0 rgba(34, 33, 81, 0.25);
+    z-index: 999;
+  }
+}
+
+.Item {
+  position: relative;
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  padding: 8px 10px;
+  background-color: $background-color;
+  box-shadow: $box-shadow;
+  outline: none;
+  border-radius: calc(4px / var(--scale-x, 1));
+  box-sizing: border-box;
+  list-style: none;
+  transform-origin: 50% 50%;
+
+  -webkit-tap-highlight-color: transparent;
+
+  color: $text-color;
+  font-weight: $font-weight;
+  font-size: 1rem;
+  white-space: nowrap;
+
+  transform: scale(var(--scale, 1));
+  transition: box-shadow 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
+
+  &:focus-visible {
+    box-shadow: 0 0px 4px 1px $focused-outline-color, $box-shadow;
+  }
+
+  &:not(.withHandle) {
+    touch-action: manipulation;
+    cursor: grab;
+  }
+
+  &.dragging:not(.dragOverlay) {
+    opacity: var(--dragging-opacity, 0.5);
+    z-index: 0;
+
+    &:focus {
+      box-shadow: $box-shadow;
+    }
+  }
+
+  &.disabled {
+    color: #999;
+    background-color: #f1f1f1;
+    &:focus {
+      box-shadow: 0 0px 4px 1px rgba(0, 0, 0, 0.1), $box-shadow;
+    }
+    cursor: not-allowed;
+  }
+
+  &.dragOverlay {
+    cursor: inherit;
+    /* box-shadow: 0 0px 6px 2px $focused-outline-color; */
+    animation: pop 200ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
+    transform: scale(var(--scale));
+    box-shadow: var(--box-shadow-picked-up);
+    opacity: 1;
+  }
+
+  &.color:before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 0;
+    height: 100%;
+    width: 3px;
+    display: block;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+    background-color: var(--color);
+  }
+
+  &:hover {
+    .Remove {
+      visibility: visible;
+    }
+  }
+}
+
+.Remove {
+  visibility: hidden;
+}
+
+.Actions {
+  display: flex;
+  align-self: flex-start;
+  margin-top: -12px;
+  margin-left: auto;
+  margin-bottom: -15px;
+  margin-right: -10px;
+}

package/src/components/components/Item/Item.tsx

@@ -0,0 +1,157 @@
+import React, {useEffect} from 'react';
+import classNames from 'classnames';
+import type {DraggableSyntheticListeners} from '@dnd-kit/core';
+import type {Transform} from '@dnd-kit/utilities';
+
+import {Handle, Remove} from './components';
+
+import styles from './Item.module.css';
+
+export interface Props {
+  dragOverlay?: boolean;
+  color?: string;
+  disabled?: boolean;
+  dragging?: boolean;
+  handle?: boolean;
+  handleProps?: any;
+  height?: number;
+  index?: number;
+  columnSpan?: number;
+  fadeIn?: boolean;
+  transform?: Transform | null;
+  listeners?: DraggableSyntheticListeners;
+  sorting?: boolean;
+  style?: React.CSSProperties;
+  transition?: string | null;
+  wrapperStyle?: React.CSSProperties;
+  value: React.ReactNode;
+  onRemove?(): void;
+  renderItem?(args: {
+    dragOverlay: boolean;
+    dragging: boolean;
+    sorting: boolean;
+    index: number | undefined;
+    fadeIn: boolean;
+    listeners: DraggableSyntheticListeners;
+    ref: React.Ref<HTMLElement>;
+    style: React.CSSProperties | undefined;
+    transform: Props['transform'];
+    transition: Props['transition'];
+    value: Props['value'];
+  }): React.ReactElement;
+}
+
+export const Item = React.memo(
+  React.forwardRef<HTMLLIElement, Props>(
+    (
+      {
+        color,
+        dragOverlay,
+        dragging,
+        disabled,
+        fadeIn,
+        handle,
+        handleProps,
+        height,
+        columnSpan = 1,
+        index,
+        listeners,
+        onRemove,
+        renderItem,
+        sorting,
+        style,
+        transition,
+        transform,
+        value,
+        wrapperStyle,
+        ...props
+      },
+      ref
+    ) => {
+      useEffect(() => {
+        if (!dragOverlay) {
+          return;
+        }
+
+        document.body.style.cursor = 'grabbing';
+
+        return () => {
+          document.body.style.cursor = '';
+        };
+      }, [dragOverlay]);
+
+      return renderItem ? (
+        renderItem({
+          dragOverlay: Boolean(dragOverlay),
+          dragging: Boolean(dragging),
+          sorting: Boolean(sorting),
+          index,
+          fadeIn: Boolean(fadeIn),
+          listeners,
+          ref,
+          style,
+          transform,
+          transition,
+          value,
+        })
+      ) : (
+        <li
+          className={classNames(
+            styles.Wrapper,
+            fadeIn && styles.fadeIn,
+            sorting && styles.sorting,
+            dragOverlay && styles.dragOverlay
+          )}
+          style={
+            {
+              ...wrapperStyle,
+              gridColumn: `span ${columnSpan} / span ${columnSpan}`,
+              transition: [transition, wrapperStyle?.transition]
+                .filter(Boolean)
+                .join(', '),
+              '--translate-x': transform
+                ? `${Math.round(transform.x)}px`
+                : undefined,
+              '--translate-y': transform
+                ? `${Math.round(transform.y)}px`
+                : undefined,
+              '--scale-x': transform?.scaleX
+                ? `${transform.scaleX}`
+                : undefined,
+              '--scale-y': transform?.scaleY
+                ? `${transform.scaleY}`
+                : undefined,
+              '--index': index,
+              '--color': color,
+            } as React.CSSProperties
+          }
+          ref={ref}
+        >
+          <div
+            className={classNames(
+              styles.Item,
+              dragging && styles.dragging,
+              handle && styles.withHandle,
+              dragOverlay && styles.dragOverlay,
+              disabled && styles.disabled,
+              color && styles.color
+            )}
+            style={style}
+            data-cypress="draggable-item"
+            {...(!handle ? listeners : undefined)}
+            {...props}
+            tabIndex={!handle ? 0 : undefined}
+          >
+            {value}
+            <span className={styles.Actions}>
+              {onRemove ? (
+                <Remove className={styles.Remove} onClick={onRemove} />
+              ) : null}
+              {handle ? <Handle {...handleProps} {...listeners} /> : null}
+            </span>
+          </div>
+        </li>
+      );
+    }
+  )
+);

package/src/components/components/Item/components/Action/Action.module.css

@@ -0,0 +1,50 @@
+$focused-outline-color: #4c9ffe;
+
+.Action {
+  display: flex;
+  width: 12px;
+  padding: 10px;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  touch-action: none;
+  cursor: var(--cursor, pointer);
+  border-radius: 5px;
+  border: none;
+  outline: none;
+  appearance: none;
+  background-color: transparent;
+  -webkit-tap-highlight-color: transparent;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--action-background, rgba(0, 0, 0, 0.05));
+
+      svg {
+        fill: #6f7b88;
+      }
+    }
+  }
+
+  svg {
+    flex: 0 0 auto;
+    margin: auto;
+    height: 100%;
+    overflow: visible;
+    fill: #919eab;
+  }
+
+  &:active {
+    background-color: var(--background, rgba(0, 0, 0, 0.05));
+
+    svg {
+      fill: var(--fill, #788491);
+    }
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0),
+      0 0px 0px 2px $focused-outline-color;
+  }
+}

package/src/components/components/Item/components/Action/Action.tsx

@@ -0,0 +1,33 @@
+import React, {forwardRef, CSSProperties} from 'react';
+import classNames from 'classnames';
+
+import styles from './Action.module.css';
+
+export interface Props extends React.HTMLAttributes<HTMLButtonElement> {
+  active?: {
+    fill: string;
+    background: string;
+  };
+  cursor?: CSSProperties['cursor'];
+}
+
+export const Action = forwardRef<HTMLButtonElement, Props>(
+  ({active, className, cursor, style, ...props}, ref) => {
+    return (
+      <button
+        ref={ref}
+        {...props}
+        className={classNames(styles.Action, className)}
+        tabIndex={0}
+        style={
+          {
+            ...style,
+            cursor,
+            '--fill': active?.fill,
+            '--background': active?.background,
+          } as CSSProperties
+        }
+      />
+    );
+  }
+);

package/src/components/components/Item/components/Action/index.ts

@@ -0,0 +1,2 @@
+export {Action} from './Action';
+export type {Props as ActionProps} from './Action';

package/src/components/components/Item/components/Handle/Handle.tsx

@@ -0,0 +1,20 @@
+import React, {forwardRef} from 'react';
+
+import {Action, ActionProps} from '../Action';
+
+export const Handle = forwardRef<HTMLButtonElement, ActionProps>(
+  (props, ref) => {
+    return (
+      <Action
+        ref={ref}
+        cursor="grab"
+        data-cypress="draggable-handle"
+        {...props}
+      >
+        <svg viewBox="0 0 20 20" width="12">
+          <path d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"></path>
+        </svg>
+      </Action>
+    );
+  }
+);

package/src/components/components/Item/components/Handle/index.ts

@@ -0,0 +1 @@
+export {Handle} from './Handle';