Skip to content

Commit

Permalink
chore(dev-deps): bump eslint and prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
@100terres
100terres committed Aug 31, 2023
1 parent 5222e2c commit 656b745
Show file tree
Hide file tree
Showing 23 changed files with 566 additions and 373 deletions.
2 changes: 2 additions & 0 deletions .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,6 +267,8 @@ module.exports = {
},
],

'@typescript-eslint/no-explicit-any': 'warn',

'@typescript-eslint/consistent-type-definitions': [
'error',
'interface',
Expand Down
20 changes: 10 additions & 10 deletions docs/about/browser-support.md
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
# Browser support 🌍

| Desktop | Version |
| ------------------------------------ | ------------------------------------------------------- |
| Microsoft Edge | Latest 5 stable versions supported |
| Mozilla Firefox (all platforms) | Latest 5 stable versions supported |
| Google Chrome (Windows and Mac) | Latest 5 stable versions supported |
| Safari (Mac) | Latest 5 stable versions on latest OS release supported |
| Desktop | Version |
| ------------------------------- | ------------------------------------------------------- |
| Microsoft Edge | Latest 5 stable versions supported |
| Mozilla Firefox (all platforms) | Latest 5 stable versions supported |
| Google Chrome (Windows and Mac) | Latest 5 stable versions supported |
| Safari (Mac) | Latest 5 stable versions on latest OS release supported |

| Mobile | Version |
| ------------------------ | --------------------------------------------------------- |
| Chrome (Android and iOS) | Latest stable version supported |
| Mobile Safari (iOS) | Latest stable version supported |
| Mobile | Version |
| ------------------------ | ------------------------------- |
| Chrome (Android and iOS) | Latest stable version supported |
| Mobile Safari (iOS) | Latest stable version supported |

_Internet Explorer 11 is no longer supported._

Expand Down
2 changes: 1 addition & 1 deletion docs/api/draggable.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ interface DraggableProps {
style?: DraggableStyle;
// used for shared global styles
'data-rfd-draggable-context-id': ContextId;
'data-rfd-draggable-id': DraggableId;// used to know when a transition ends
'data-rfd-draggable-id': DraggableId; // used to know when a transition ends
onTransitionEnd?: TransitionEventHandler;
}
```
Expand Down
20 changes: 10 additions & 10 deletions docs/api/droppable.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,17 @@ import type { ReactNode } from 'react';

interface Props {
// required
droppableId: DroppableId,
children: (DroppableProvided, DroppableStateSnapshot) => ReactNode,
droppableId: DroppableId;
children: (DroppableProvided, DroppableStateSnapshot) => ReactNode;
// optional
mode?: DroppableMode,
type?: TypeId,
isDropDisabled?: boolean,
isCombineEnabled?: boolean,
direction?: Direction,
renderClone?: DraggableChildrenFn | null,
ignoreContainerClipping?: boolean,
getContainerForClone?: () => HTMLElement,
mode?: DroppableMode;
type?: TypeId;
isDropDisabled?: boolean;
isCombineEnabled?: boolean;
direction?: Direction;
renderClone?: DraggableChildrenFn | null;
ignoreContainerClipping?: boolean;
getContainerForClone?: () => HTMLElement;
}

type DroppableMode = 'standard' | 'virtual';
Expand Down
2 changes: 1 addition & 1 deletion docs/guides/doctype.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
Be sure that you have specified the html5 `doctype` ([Document Type Definition - DTD](https://developer.mozilla.org/en-US/docs/Glossary/Doctype)) for your `html` page:

```html
<!DOCTYPE html>
<!doctype html>
```

A `doctype` impacts browser layout and measurement apis. Not specifying a `doctype` is a world of pain 🔥. Browsers will use some other `doctype` such as ["Quirks mode"](https://en.wikipedia.org/wiki/Quirks_mode) which can drastically change layout and measurement ([more information](https://www.w3.org/QA/Tips/Doctype)). The html5 `doctype` is our only supported `doctype`.
Expand Down
9 changes: 3 additions & 6 deletions docs/guides/reparenting.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ function List(props) {
</div>
)}
>
{provided => (
{(provided) => (
<div ref={provided.innerRef} {...provided.droppableProps}>
{items.map((item) => (
<Draggable draggableId={item.id} index={item.index}>
Expand Down Expand Up @@ -78,10 +78,7 @@ function List(props) {
const renderItem = getRenderItem(items);

return (
<Droppable
droppableId="droppable"
renderClone={renderItem}
>
<Droppable droppableId="droppable" renderClone={renderItem}>
{(provided, snapshot) => (
<div ref={provided.innerRef} {...provided.droppableProps}>
{items.map((item) => (
Expand All @@ -101,7 +98,7 @@ function List(props) {
This function is called to get a clone to be rendered while dragging.

```ts
renderClone: DraggableChildrenFn | null
renderClone: DraggableChildrenFn | null;
```

```ts
Expand Down
2 changes: 1 addition & 1 deletion docs/guides/responders.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ interface DraggableRubric {

interface DragStart extends DraggableRubric {
mode: MovementMode;
};
}

interface DraggableLocation {
droppableId: DroppableId;
Expand Down
12 changes: 6 additions & 6 deletions docs/guides/screen-reader.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,12 @@ We do not use the `aria-grabbed` and `aria-dropeffect` as they are [deprecated i

Screen readers use these accessibility properties of a DOM element to tell assistive technologies what something is and how to describe it.

| Attribute | Description | Notes | Examples |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Name | A way of identifying the element. Ideally these would be unique, but it doesn't need to be. Often the name is just the content of the element | This property is [computed](https://www.w3.org/TR/accname-1.1/#mapping_additional_nd_name). Can be based on visible text, or invisible attributes such as `aria-label`. The highest priority value will be picked as the name | `aria-label`, `aria-labelledby`, `title` (not recommended), element content |
| Role | Main indicator for type of element. Can be inferred from semantic element type, or controlled by `role="button"` | ARIA roles (the `role` attribute) communicate semantics to the accessibility API (and by extension, assistive technologies) only. Event handlers, focus styling, and interactivity must be added and managed as well. | `<div role="button">Oh no</div>` |
| Role description | Override the role text read out. Useful for adding a more specific role to a widget | Only applied on the rare occasions when HTML semantics and ARIA roles cannot describe what an element "is" in a meaningful way. | `<section aria-roledescription="slide"> Quarterly Report</section>` Will announce as: _"Quarterly Report, slide"_ rather than _"Quarterly Report, section"_ |
| Description | Adds additional usage information about an element | This property is [computed](https://www.w3.org/TR/accname-1.1/#mapping_additional_nd_te). Typically controlled by `aria-describedby`<br />["Using the aria-describedby property to provide a descriptive label for user interface controls"](https://www.w3.org/TR/WCAG20-TECHS/ARIA1.html) | `<label for="mob">Mobile</label>`<br />`<input type="tel" id="mob" aria-describedby="mobLength" />`<br />`<span id="mobLength">Mobile must contain 10 digits</span>` |
| Attribute | Description | Notes | Examples |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Name | A way of identifying the element. Ideally these would be unique, but it doesn't need to be. Often the name is just the content of the element | This property is [computed](https://www.w3.org/TR/accname-1.1/#mapping_additional_nd_name). Can be based on visible text, or invisible attributes such as `aria-label`. The highest priority value will be picked as the name | `aria-label`, `aria-labelledby`, `title` (not recommended), element content |
| Role | Main indicator for type of element. Can be inferred from semantic element type, or controlled by `role="button"` | ARIA roles (the `role` attribute) communicate semantics to the accessibility API (and by extension, assistive technologies) only. Event handlers, focus styling, and interactivity must be added and managed as well. | `<div role="button">Oh no</div>` |
| Role description | Override the role text read out. Useful for adding a more specific role to a widget | Only applied on the rare occasions when HTML semantics and ARIA roles cannot describe what an element "is" in a meaningful way. | `<section aria-roledescription="slide"> Quarterly Report</section>` Will announce as: _"Quarterly Report, slide"_ rather than _"Quarterly Report, section"_ |
| Description | Adds additional usage information about an element | This property is [computed](https://www.w3.org/TR/accname-1.1/#mapping_additional_nd_te). Typically controlled by `aria-describedby`<br />["Using the aria-describedby property to provide a descriptive label for user interface controls"](https://www.w3.org/TR/WCAG20-TECHS/ARIA1.html) | `<label for="mob">Mobile</label>`<br />`<input type="tel" id="mob" aria-describedby="mobLength" />`<br />`<span id="mobLength">Mobile must contain 10 digits</span>` |

</details>

Expand Down
22 changes: 15 additions & 7 deletions docs/guides/types.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,20 @@ type OnBeforeCaptureResponder = (before: BeforeCapture) => unknown;

type OnBeforeDragStartResponder = (start: DragStart) => unknown;

type OnDragStartResponder = (start: DragStart, provided: ResponderProvided) => unknown;
type OnDragStartResponder = (
start: DragStart,
provided: ResponderProvided,
) => unknown;

type OnDragUpdateResponder = (update: DragUpdate, provided: ResponderProvided) => unknown;
type OnDragUpdateResponder = (
update: DragUpdate,
provided: ResponderProvided,
) => unknown;

type OnDragEndResponder = (result: DropResult, provided: ResponderProvided) => unknown;
type OnDragEndResponder = (
result: DropResult,
provided: ResponderProvided,
) => unknown;

interface DraggableRubric {
draggableId: DraggableId;
Expand All @@ -46,10 +55,9 @@ interface DraggableRubric {
}

interface DragStart extends DraggableRubric {
mode: MovementMode;
mode: MovementMode;
}


interface DragUpdate extends DragStart {
// populated if in a reorder position
destination: DraggableLocation | null;
Expand All @@ -64,7 +72,7 @@ interface Combine {
}

interface DropResult extends DragUpdate {
reason: DropReason;
reason: DropReason;
}

type DropReason = 'DROP' | 'CANCEL';
Expand Down Expand Up @@ -96,7 +104,7 @@ interface SensorAPI {
type TryGetLock = (
draggableId: DraggableId,
forceStop?: () => void,
options?: TryGetLockOptions
options?: TryGetLockOptions,
) => PreDragActions | null;
interface TryGetLockOptions {
sourceEvent?: Event;
Expand Down
10 changes: 5 additions & 5 deletions docs/patterns/tables.md
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# Tables

| Benefits of using `<table>` | Provider |
| ------------------------------------------------ | ------------------------ |
| Clean way of displaying tabular data | Browser |
| Great browser support | Browser |
| Can copy paste the table into other applications | Browser |
| Benefits of using `<table>` | Provider |
| ------------------------------------------------ | ---------------------- |
| Clean way of displaying tabular data | Browser |
| Great browser support | Browser |
| Can copy paste the table into other applications | Browser |
| Can reorder items in the table! | `@hello-pangea/dnd` 😎 |

`@hello-pangea/dnd` requires no additional wrapping elements to create `<Draggable />` and `<Droppable />` components. Therefore it is possible to have a `<table>` that has valid HTML as well as supporting drag and drop.
Expand Down
2 changes: 2 additions & 0 deletions docs/patterns/virtual-lists.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,9 @@ Please raise a pull request if you would like to add examples for other virtuali
- [List](https://dnd.hellopangea.com/?path=/story/examples-virtual-react-virtualized--window-list) with [`WindowScroller`](https://github.com/bvaughn/react-virtualized/blob/master/docs/WindowScroller.md) ([source](/stories/src/virtual/react-virtualized/window-list.jsx))

### [`react-virtuoso`](https://github.com/petyosi/react-virtuoso)

React Virtuoso comes with automatic item measurement out of the box.

- [List with source](https://virtuoso.dev/react-beautiful-dnd/)
- [Basic list on `codesandbox.io`](https://codesandbox.io/s/react-virutoso-with-react-beautiful-dnd-e6vmq)

Expand Down
5 changes: 3 additions & 2 deletions docs/sensors/sensor-api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ These are some examples to show off what is possible with the Sensor API. They a

(Please be sure to use prefix `rbd-`)

| Voice 🗣 | Webcam 📷 | Thought 🧠 |
| Voice 🗣 | Webcam 📷 | Thought 🧠 |
| :--------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------: |
| ![voice sensor](https://user-images.githubusercontent.com/2182637/66467095-87dc4380-eacf-11e9-9e2e-7ae1a59bfddf.gif) | ![webcam sensor](https://user-images.githubusercontent.com/2182637/66466837-1603fa00-eacf-11e9-8c15-5ed324c8916f.gif) | ![thought sensor](https://raw.githubusercontent.com/charliegerard/rbd-thought-sensor/master/demo.gif) |
| [`rbd-voice-sensor`](https://github.com/danieldelcore/rbd-voice-sensor)<br>created by [@danieldelcore](https://github.com/danieldelcore) | [`rbd-webcam-sensor`](https://github.com/kangweichan/rbd-webcam-sensor)<br>created by [@kangweichan](https://github.com/kangweichan) | [`rbd-thought-sensor`](https://github.com/charliegerard/rbd-thought-sensor)<br>created by [@charliegerard](https://github.com/charliegerard) |
Expand Down Expand Up @@ -142,7 +142,8 @@ interface DraggableOptions {
```ts
type TryGetLock = (
draggableId: DraggableId,
forceStop?: () => void, options?: TryGetLockOptions,
forceStop?: () => void,
options?: TryGetLockOptions,
) => PreDragActions | null;
```
Expand Down
Loading

1 comment on commit 656b745

@vercel
Copy link

@vercel vercel bot commented on 656b745 Aug 31, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

dnd – ./

dnd-hello-pangea.vercel.app
dnd-git-main-hello-pangea.vercel.app
dnd-navy.vercel.app
dnd.hellopangea.com

Please sign in to comment.