@helpdice/draggable 0.0.0-stage → 0.0.1

package/dist/types/view/use-sensor-marshal/sensors/use-mouse-sensor.d.ts

@@ -0,0 +1,4 @@
+import type { SensorAPI } from "../../../types";
+export declare const primaryButton: number;
+export declare const sloppyClickThreshold: number;
+export default function useMouseSensor(api: SensorAPI): void;

package/dist/types/view/use-sensor-marshal/sensors/use-touch-sensor.d.ts

@@ -0,0 +1,4 @@
+import type { SensorAPI } from "../../../types";
+export declare const timeForLongPress: number;
+export declare const forcePressThreshold: number;
+export default function useTouchSensor(api: SensorAPI): void;

package/dist/types/view/use-sensor-marshal/sensors/util/prevent-standard-key-events.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (event: KeyboardEvent) => void;
+export default _default;

package/dist/types/view/use-sensor-marshal/sensors/util/supported-page-visibility-event-name.d.ts

@@ -0,0 +1,2 @@
+declare const supportedEventName: string;
+export default supportedEventName;

package/dist/types/view/use-sensor-marshal/use-sensor-marshal.d.ts

@@ -0,0 +1,12 @@
+import type { ContextId, Sensor } from "../../types";
+import type { Store } from "../../state/store-types";
+import type { Registry } from "../../state/registry/registry-types";
+type SensorMarshalArgs = {
+    contextId: ContextId;
+    registry: Registry;
+    store: Store;
+    customSensors?: (Sensor[]) | null;
+    enableDefaultSensors: boolean;
+};
+export default function useSensorMarshal({ contextId, store, registry, customSensors, enableDefaultSensors, }: SensorMarshalArgs): void;
+export {};

package/dist/types/view/use-sensor-marshal/use-validate-sensor-hooks.d.ts

@@ -0,0 +1,2 @@
+import type { Sensor } from '../../types';
+export default function useValidateSensorHooks(sensorHooks: Sensor[]): void;

package/dist/types/view/use-style-marshal/get-styles.d.ts

@@ -0,0 +1,10 @@
+import type { ContextId } from '../../types';
+export type Styles = {
+    always: string;
+    dragging: string;
+    resting: string;
+    dropAnimating: string;
+    userCancel: string;
+};
+declare const _default: (contextId: ContextId) => Styles;
+export default _default;

package/dist/types/view/use-style-marshal/index.d.ts

@@ -0,0 +1 @@
+export { default } from './use-style-marshal';

package/dist/types/view/use-style-marshal/style-marshal-types.d.ts

@@ -0,0 +1,6 @@
+import type { DropReason } from '../../types';
+export type StyleMarshal = {
+    dragging: () => void;
+    dropping: (reason: DropReason) => void;
+    resting: () => void;
+};

package/dist/types/view/use-style-marshal/use-style-marshal.d.ts

@@ -0,0 +1,3 @@
+import type { StyleMarshal } from "./style-marshal-types";
+import type { ContextId } from "../../types";
+export default function useStyleMarshal(contextId: ContextId, nonce?: string): StyleMarshal;

package/dist/types/view/use-unique-id.d.ts

@@ -0,0 +1,7 @@
+import type { Id } from "../types";
+type Options = {
+    separator: string;
+};
+export declare function reset(): void;
+export default function useUniqueId(prefix: string, options?: Options): Id;
+export {};

package/dist/types/view/visually-hidden-style.d.ts

@@ -0,0 +1,2 @@
+declare const visuallyHidden: Object;
+export default visuallyHidden;

package/dist/types/view/window/get-max-window-scroll.d.ts

@@ -0,0 +1,3 @@
+import type { Position } from 'css-box-model';
+declare const _default: () => Position;
+export default _default;

package/dist/types/view/window/get-viewport.d.ts

@@ -0,0 +1,3 @@
+import type { Viewport } from '../../types';
+declare const _default: () => Viewport;
+export default _default;

package/dist/types/view/window/get-window-from-el.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (el: Element | null) => typeof window;
+export default _default;

package/dist/types/view/window/get-window-scroll.d.ts

@@ -0,0 +1,3 @@
+import { type Position } from 'css-box-model';
+declare const _default: () => Position;
+export default _default;

package/dist/types/view/window/scroll-window.d.ts

@@ -0,0 +1,3 @@
+import { type Position } from 'css-box-model';
+declare const _default: (change: Position) => void;
+export default _default;

package/package.json

@@ -1,6 +1,159 @@
 {
   "name": "@helpdice/draggable",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.0.1",
+  "description": "Beautiful and accessible drag and drop for lists with React",
+  "author": "Helpdice",
+  "type": "module",
+  "keywords": [
+    "drag and drop",
+    "dnd",
+    "sortable",
+    "reorder",
+    "reorderable",
+    "react",
+    "react.js",
+    "natural",
+    "beautiful",
+    "accessible"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/helpdice/draggable.git"
+  },
+  "bugs": {
+    "url": "https://github.com/helpdice/draggable/issues"
+  },
+  "main": "dist/draggable.cjs.js",
+  "module": "dist/draggable.esm.js",
+  "types": "dist/types/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "/dist",
+    "/src"
+  ],
+  "config": {
+    "prettier_target": "*.{js,jsx,md,json} src/**/*.{js,jsx,md,json} test/**/*.{js,jsx,md,json} docs/**/*.{js,jsx,md,json} stories/**/*.{js,jsx,md,json} cypress/**/*.{js,jsx,md,json} csp-server/**/*.{js,jsx,md,json}"
+  },
+  "scripts": {
+    "test:accessibility": "lighthouse http://localhost:9002/iframe.html?id=single-vertical-list--basic --chrome-flags='--headless' --output=json --output=html --output-path=./test-reports/lighthouse/a11y.json && node a11y-audit-parse.js",
+    "test": "jest --config ./jest.config.js",
+    "test:ci": "jest test --maxWorkers=2",
+    "test:browser": "cypress open",
+    "test:browser:ci": "cypress run",
+    "test:coverage": "yarn test --coverage --coveragePathIgnorePatterns=/debug",
+    "validate": "yarn prettier:check && yarn lint:eslint && yarn lint:css && yarn typecheck",
+    "prettier:check": "yarn prettier --debug-check $npm_package_config_prettier_target",
+    "prettier:write": "yarn prettier --write $npm_package_config_prettier_target",
+    "lint:eslint": "yarn eslint \"./**/*.{js,jsx}\"",
+    "lint:css": "stylelint \"stories/**/*.{js,jsx}\"",
+    "typecheck": "flow check --max-warnings=0",
+    "bundle-size:check": "cross-env SNAPSHOT=match yarn bundle-size:update",
+    "bundle-size:update": "yarn build:clean && yarn build:dist && yarn build:clean",
+    "build": "yarn build:clean && yarn build:dist && yarn build:types",
+    "build:clean": "rimraf dist",
+    "build:dist": "rollup -c",
+    "build:types": "npx tsc -p tsconfig.types.json",
+    "build:flow": "echo \"// @flow\n\nexport * from '../src';\" > dist/draggable.cjs.js.flow",
+    "storybook": "start-storybook -p 9002",
+    "build-storybook": "build-storybook -c .storybook -o site",
+    "prepublishOnly": "yarn build"
+  },
+  "dependencies": {
+    "@babel/runtime": "^8.1.2",
+    "@helpdice/memoizer": "^1.0.5",
+    "css-box-model": "^1.2.1",
+    "memoize-one": "^6.0.0",
+    "raf-schd": "^4.0.2",
+    "react-redux": "^9.3.1",
+    "redux": "^5.0.1"
+  },
+  "devDependencies": {
+    "@babel/core": "7.9.0",
+    "@babel/plugin-proposal-class-properties": "7.8.3",
+    "@babel/plugin-transform-modules-commonjs": "7.9.0",
+    "@babel/plugin-transform-object-assign": "7.8.3",
+    "@babel/plugin-transform-runtime": "7.9.0",
+    "@babel/preset-env": "7.9.5",
+    "@babel/preset-flow": "7.9.0",
+    "@babel/preset-react": "7.9.4",
+    "@emotion/babel-preset-css-prop": "10.0.27",
+    "@emotion/core": "10.0.28",
+    "@emotion/styled": "10.0.27",
+    "@rollup/plugin-commonjs": "^29.0.3",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^12.3.1",
+    "@storybook/addon-storysource": "5.3.21",
+    "@storybook/react": "5.3.21",
+    "@storybook/theming": "5.3.21",
+    "@testing-library/react": "10.4.9",
+    "@types/node": "^26.6.6",
+    "@types/raf-schd": "^4.0.3",
+    "@types/react-dom": "^19.3.0",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-eslint": "10.1.0",
+    "babel-jest": "25.5.1",
+    "babel-loader": "8.1.0",
+    "babel-plugin-dev-expression": "0.2.2",
+    "babel-plugin-emotion": "10.0.33",
+    "cross-env": "7.0.3",
+    "cypress": "4.4.0",
+    "emotion-theming": "10.0.27",
+    "eslint": "6.8.0",
+    "eslint-config-airbnb": "18.1.0",
+    "eslint-config-prettier": "6.15.0",
+    "eslint-plugin-cypress": "2.11.3",
+    "eslint-plugin-emotion": "10.0.27",
+    "eslint-plugin-es5": "1.5.0",
+    "eslint-plugin-flowtype": "4.7.0",
+    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-jest": "23.20.0",
+    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-prettier": "3.3.1",
+    "eslint-plugin-react": "7.19.0",
+    "eslint-plugin-react-hooks": "3.0.0",
+    "flow-bin": "0.110.1",
+    "fs-extra": "9.1.0",
+    "globby": "11.0.3",
+    "jest": "25.5.4",
+    "jest-axe": "3.5.0",
+    "jest-junit": "10.0.0",
+    "jest-watch-typeahead": "0.6.1",
+    "lighthouse": "5.6.0",
+    "markdown-it": "10.0.0",
+    "prettier": "2.0.4",
+    "raf-stub": "3.0.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "react-test-renderer": "19.3.1",
+    "react-virtualized": "10.0.1",
+    "react-window": "2.5.3",
+    "require-from-string": "2.0.2",
+    "rimraf": "3.0.2",
+    "rollup": "4.68.0",
+    "rollup-plugin-babel": "4.4.0",
+    "rollup-plugin-json": "4.0.0",
+    "rollup-plugin-replace": "2.2.0",
+    "rollup-plugin-size-snapshot": "0.11.0",
+    "rollup-plugin-strip": "1.2.2",
+    "rollup-plugin-terser": "5.3.1",
+    "styled-components": "5.1.0",
+    "stylelint": "13.13.1",
+    "stylelint-config-prettier": "8.0.2",
+    "stylelint-config-recommended": "3.0.0",
+    "stylelint-config-standard": "20.0.0",
+    "stylelint-config-styled-components": "0.1.1",
+    "stylelint-processor-styled-components": "1.10.0",
+    "typescript": "^6.0.3",
+    "wait-port": "0.2.9",
+    "webpack": "4.42.1"
+  },
+  "peerDependencies": {
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1"
+  },
+  "license": "Apache-2.0",
+  "jest-junit": {
+    "output": "test-reports/junit/js-test-results.xml"
+  }
+}

package/src/animation.ts

@@ -0,0 +1,75 @@
+// @flow
+import type { Position } from 'css-box-model';
+import { isEqual, origin } from './state/position';
+
+export const curves = {
+  outOfTheWay: 'cubic-bezier(0.2, 0, 0, 1)',
+  drop: 'cubic-bezier(.2,1,.1,1)',
+};
+
+export const combine = {
+  opacity: {
+    // while dropping: fade out totally
+    drop: 0,
+    // while dragging: fade out partially
+    combining: 0.7,
+  },
+  scale: {
+    drop: 0.75,
+  },
+};
+
+export const timings = {
+  outOfTheWay: 0.2,
+  // greater than the out of the way time
+  // so that when the drop ends everything will
+  // have to be out of the way
+  minDropTime: 0.33,
+  maxDropTime: 0.55,
+};
+
+// slow timings
+// uncomment to use
+// export const timings = {
+//   outOfTheWay: 2,
+//   // greater than the out of the way time
+//   // so that when the drop ends everything will
+//   // have to be out of the way
+//   minDropTime: 3,
+//   maxDropTime: 4,
+// };
+
+const outOfTheWayTiming: string = `${timings.outOfTheWay}s ${curves.outOfTheWay}`;
+export const placeholderTransitionDelayTime: number = 0.1;
+
+export const transitions = {
+  fluid: `opacity ${outOfTheWayTiming}`,
+  snap: `transform ${outOfTheWayTiming}, opacity ${outOfTheWayTiming}`,
+  drop: (duration: number): string => {
+    const timing: string = `${duration}s ${curves.drop}`;
+    return `transform ${timing}, opacity ${timing}`;
+  },
+  outOfTheWay: `transform ${outOfTheWayTiming}`,
+  placeholder: `height ${outOfTheWayTiming}, width ${outOfTheWayTiming}, margin ${outOfTheWayTiming}`,
+};
+
+const moveTo = (offset: Position): string | null =>
+  isEqual(offset, origin) ? null : `translate(${offset.x}px, ${offset.y}px)`;
+
+export const transforms = {
+  moveTo,
+  drop: (offset: Position, isCombining: boolean) => {
+    const translate: string | null = moveTo(offset);
+    if (!translate) {
+      return null;
+    }
+
+    // only transforming the translate
+    if (!isCombining) {
+      return translate;
+    }
+
+    // when dropping while combining we also update the scale
+    return `${translate} scale(${combine.scale.drop})`;
+  },
+};

package/src/debug/middleware/action-timing-average.ts

@@ -0,0 +1,52 @@
+// @flow
+/* eslint-disable no-console */
+import type { Action } from '../../state/store-types';
+
+type Bucket = {
+  [key: string]: number[],
+};
+
+const average = (values: number[]): number => {
+  const sum: number = values.reduce(
+    (previous: number, current: number) => previous + current,
+    0,
+  );
+  return sum / values.length;
+};
+
+export default (groupSize: number) => {
+  console.log('Starting average action timer middleware');
+  console.log(`Will take an average every ${groupSize} actions`);
+  const bucket: Bucket = {};
+
+  return () => (next: (arg: Action) => unknown) => (action: Action): any => {
+    const start: number = performance.now();
+
+    const result: unknown = next(action);
+
+    const end: number = performance.now();
+
+    const duration: number = end - start;
+
+    if (!bucket[action.type]) {
+      bucket[action.type] = [duration];
+      return result;
+    }
+
+    bucket[action.type].push(duration);
+
+    if (bucket[action.type].length < groupSize) {
+      return result;
+    }
+
+    console.warn(
+      `Average time for ${action.type}`,
+      average(bucket[action.type]),
+    );
+
+    // reset
+    bucket[action.type] = [];
+
+    return result;
+  };
+};

package/src/debug/middleware/action-timing.ts

@@ -0,0 +1,16 @@
+// @flow
+/* eslint-disable no-console */
+import * as timings from '../timings';
+import type { Action } from '../../state/store-types';
+
+export default () => (next: (arg: Action) => unknown) => (action: Action): any => {
+  timings.forceEnable();
+  const key = `redux action: ${action.type}`;
+  timings.start(key);
+
+  const result: unknown = next(action);
+
+  timings.finish(key);
+
+  return result;
+};

package/src/debug/middleware/log.ts

@@ -0,0 +1,26 @@
+// @flow
+/* eslint-disable no-console */
+import type { Action, Store } from '../../state/store-types';
+
+type Mode = 'verbose' | 'light';
+
+export default (mode: Mode = 'verbose') => (store: Store) => (
+  next: (arg: Action) => unknown,
+) => (action: Action): any => {
+  if (mode === 'light') {
+    console.log('🏃‍ Action:', action.type);
+    return next(action);
+  }
+
+  console.group(`action: ${action.type}`);
+  console.log('action payload', action.payload);
+
+  console.log('state before', store.getState());
+
+  const result: unknown = next(action);
+
+  console.log('state after', store.getState());
+  console.groupEnd();
+
+  return result;
+};

package/src/debug/middleware/user-timing.ts

@@ -0,0 +1,16 @@
+// @flow
+import type { Action } from '../../state/store-types';
+
+export default () => (next: (arg: Action) => unknown) => (action: Action): any => {
+  const title: string = `👾 redux (action): ${action.type}`;
+  const startMark: string = `${action.type}:start`;
+  const endMark: string = `${action.type}:end`;
+
+  performance.mark(startMark);
+  const result: unknown = next(action);
+  performance.mark(endMark);
+
+  performance.measure(title, startMark, endMark);
+
+  return result;
+};

package/src/debug/timings.ts

@@ -0,0 +1,87 @@
+// @flow
+type Records = {
+  [key: string]: number,
+};
+
+const records: Records = {};
+let isEnabled: boolean = false;
+
+const isTimingsEnabled = (): boolean => isEnabled;
+
+export const forceEnable = () => {
+  isEnabled = true;
+};
+
+// Debug: uncomment to enable
+// forceEnable();
+
+export const start = (key: string) => {
+  // we want to strip all the code out for production builds
+  // draw back: can only do timings in dev env (which seems to be fine for now)
+  if (process.env.NODE_ENV !== 'production') {
+    if (!isTimingsEnabled()) {
+      return;
+    }
+    const now: number = performance.now();
+
+    records[key] = now;
+  }
+};
+
+// Exact
+type Style = {
+  textColor: string,
+  symbol: string,
+};
+
+export const finish = (key: string) => {
+  if (process.env.NODE_ENV !== 'production') {
+    if (!isTimingsEnabled()) {
+      return;
+    }
+    const now: number = performance.now();
+
+    const previous: number | null = records[key];
+
+    if (!previous) {
+      // eslint-disable-next-line no-console
+      console.warn('cannot finish timing as no previous time found', key);
+      return;
+    }
+
+    const result: number = now - previous;
+    const rounded: string = result.toFixed(2);
+
+    const style: Style = (() => {
+      if (result < 12) {
+        return {
+          textColor: 'green',
+          symbol: '✅',
+        };
+      }
+      if (result < 40) {
+        return {
+          textColor: 'orange',
+          symbol: '⚠️',
+        };
+      }
+      return {
+        textColor: 'red',
+        symbol: '❌',
+      };
+    })();
+
+    // eslint-disable-next-line no-console
+    console.log(
+      `${style.symbol} %cTiming %c${rounded} %cms %c${key}`,
+      // title
+      'color: blue; font-weight: bold;',
+      // result
+      `color: ${style.textColor}; font-size: 1.1em;`,
+      // ms
+      'color: grey;',
+      // key
+      'color: purple; font-weight: bold;',
+    );
+  }
+};

package/src/dev-warning.ts

@@ -0,0 +1,50 @@
+// @flow
+
+const isProduction: boolean = process.env.NODE_ENV === 'production';
+
+// not replacing newlines (which \s does)
+const spacesAndTabs: RegExp = /[ \t]{2,}/g;
+const lineStartWithSpaces: RegExp = /^[ \t]*/gm;
+
+// using .trim() to clear the any newlines before the first text and after last text
+const clean = (value: string): string =>
+  value.replace(spacesAndTabs, ' ').replace(lineStartWithSpaces, '').trim();
+
+const getDevMessage = (message: string): string =>
+  clean(`
+  %creact-beautiful-dnd
+
+  %c${clean(message)}
+
+  %c👷‍ This is a development only message. It will be removed in production builds.
+`);
+
+export const getFormattedMessage = (message: string): string[] => [
+  getDevMessage(message),
+  // title (green400)
+  'color: #00C584; font-size: 1.2em; font-weight: bold;',
+  // message
+  'line-height: 1.5',
+  // footer (purple300)
+  'color: #723874;',
+];
+
+const isDisabledFlag: string = '__react-beautiful-dnd-disable-dev-warnings';
+
+export function log(type: 'error' | 'warn', message: string) {
+  // no warnings in production
+  if (isProduction) {
+    return;
+  }
+
+  // manual opt out of warnings
+  if (typeof window !== 'undefined' && window[isDisabledFlag as any]) {
+    return;
+  }
+
+  // eslint-disable-next-line no-console
+  console[type](...getFormattedMessage(message));
+}
+
+export const warning = log.bind(null, 'warn');
+export const error = log.bind(null, 'error');

package/src/empty.ts

@@ -0,0 +1,6 @@
+// @flow
+export function noop(): void {}
+
+export function identity<T>(value: T): T {
+  return value;
+}

package/src/index.ts

@@ -0,0 +1,67 @@
+// @flow
+
+// Components
+
+export { default as DragDropContext } from './view/drag-drop-context';
+export { default as Droppable } from './view/droppable';
+export { default as Draggable } from './view/draggable';
+
+// Default sensors
+
+export {
+  useMouseSensor,
+  useTouchSensor,
+  useKeyboardSensor,
+} from './view/use-sensor-marshal';
+
+// Utils
+
+export { resetServerContext } from './view/drag-drop-context';
+
+// Public flow types
+
+export type {
+  Id,
+  TypeId,
+  DraggableId,
+  DroppableId,
+  DraggableRubric,
+  MovementMode,
+  BeforeCapture,
+  DragStart,
+  DragUpdate,
+  DropResult,
+  Direction,
+  ResponderProvided,
+  Announce,
+  DraggableLocation,
+  OnBeforeCaptureResponder,
+  OnBeforeDragStartResponder,
+  OnDragStartResponder,
+  OnDragUpdateResponder,
+  OnDragEndResponder,
+  SensorAPI,
+  Sensor,
+  TryGetLock,
+  TryGetLockOptions,
+} from './types';
+
+// Droppable types
+export type {
+  Provided as DroppableProvided,
+  StateSnapshot as DroppableStateSnapshot,
+  DroppableProps,
+} from './view/droppable/droppable-types';
+
+// Draggable types
+export type {
+  Provided as DraggableProvided,
+  StateSnapshot as DraggableStateSnapshot,
+  DragHandleProps,
+  DropAnimation,
+  DraggableProps,
+  DraggableStyle,
+  DraggingStyle,
+  NotDraggingStyle,
+  ChildrenFn as DraggableChildrenFn,
+} from './view/draggable/draggable-types';