Skip to content

Commit aaec438

Browse files
weotchweotch
committed
Run prettier on whole project
1 parent bca1d76 commit aaec438

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+1868
-1818
lines changed

‎.github/workflows/cypress.yml‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ jobs:
1515
- packages/sanity-next
1616

1717
steps:
18-
1918
- name: Install
2019
uses: bkwld/cloak-actions/install@v2
2120

@@ -31,4 +30,4 @@ jobs:
3130
CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
3231
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
3332
NEXT_PUBLIC_SANITY_DATASET: ${{ secrets.NEXT_PUBLIC_SANITY_DATASET }}
34-
NEXT_PUBLIC_SANITY_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_SANITY_PROJECT_ID }}
33+
NEXT_PUBLIC_SANITY_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_SANITY_PROJECT_ID }}

‎README.md‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,23 @@ A monorepo hosting components for rendering image and video in a single containe
1414
Using `sourceTypes` and `sourceMedia` with `imageLoader` to produce multiple `<source>` tags with `srcset` attributes.
1515

1616
```jsx
17-
import Visual from '@react-visual/react'
17+
import Visual from "@react-visual/react";
1818

1919
export default function ResponsiveExample() {
2020
return (
2121
<Visual
22-
image='https://placehold.co/200x200'
23-
sourceTypes={['image/webp']}
24-
sourceMedia={['(orientation:landscape)', '(orientation:portrait)']}
22+
image="https://placehold.co/200x200"
23+
sourceTypes={["image/webp"]}
24+
sourceMedia={["(orientation:landscape)", "(orientation:portrait)"]}
2525
imageLoader={({ src, type, media, width }) => {
26-
const height = media?.includes('landscape') ? width * 0.5 : width
27-
const ext = type?.includes('webp') ? '.webp' : ''
28-
return `https://placehold.co/${width}x${height}${ext}`
26+
const height = media?.includes("landscape") ? width * 0.5 : width;
27+
const ext = type?.includes("webp") ? ".webp" : "";
28+
return `https://placehold.co/${width}x${height}${ext}`;
2929
}}
30-
width='100%'
31-
alt='Example of responsive images'/>
32-
)
30+
width="100%"
31+
alt="Example of responsive images"
32+
/>
33+
);
3334
}
3435
```
3536
@@ -40,14 +41,10 @@ export default function ResponsiveExample() {
4041
Using with a Visual entryType containing image and video fields:
4142
4243
```jsx
43-
import Visual from '@react-visual/contentful'
44+
import Visual from "@react-visual/contentful";
4445

4546
export default function Example() {
46-
return (
47-
<Visual
48-
src={ entry.background }
49-
sizes='100vw' />
50-
)
47+
return <Visual src={entry.background} sizes="100vw" />;
5148
}
5249
```
5350
@@ -58,17 +55,18 @@ export default function Example() {
5855
Using framework adapter for Next.js:
5956
6057
```jsx
61-
import Visual from '@react-visual/next'
58+
import Visual from "@react-visual/next";
6259

6360
export default function Example() {
6461
return (
6562
<Visual
6663
image="https://placehold.co/1600x900.png"
6764
video="https://placehold.co/1600x900.mp4"
6865
aspect={16 / 9}
69-
sizes='100vw'
70-
alt='Example using placeholder assets' />
71-
)
66+
sizes="100vw"
67+
alt="Example using placeholder assets"
68+
/>
69+
);
7270
}
7371
```
7472
@@ -79,10 +77,10 @@ export default function Example() {
7977
Using Sanity + Next.js Adapter to automatically populate aspect ratio, alt, blurred placeholder, and support both image and video in one object:
8078
8179
```jsx
82-
import Visual from '@react-visual/sanity-next'
80+
import Visual from "@react-visual/sanity-next";
8381

8482
export default function Example({ background }) {
85-
return <Visual src={ background } sizes='100vw' />
83+
return <Visual src={background} sizes="100vw" />;
8684
}
8785
```
8886

‎lerna.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
"npmClient": "yarn",
33
"$schema": "node_modules/lerna/schemas/lerna-schema.json",
44
"version": "1.3.1"
5-
}
5+
}

‎packages/contentful/README.md‎

Lines changed: 50 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# @react-visual/contentful [![react-visual](https://img.shields.io/endpoint?url=https://cloud.cypress.io/badge/simple/fn6c7w&style=flat&logo=cypress)](https://cloud.cypress.io/projects/fn6c7w/runs)
22

3-
Renders Contentful images and videos into a container. Features:
3+
Renders Contentful images and videos into a container. Features:
44

55
- Automatically defines a loader functions for generating srcsets
66
- Supports responsive image and video assets
@@ -17,15 +17,10 @@ yarn add @react-visual/contentful
1717
### Asset fields
1818

1919
```jsx
20-
import Visual from '@react-visual/contentful'
20+
import Visual from "@react-visual/contentful";
2121

2222
export default function Example() {
23-
return (
24-
<Visual
25-
image={ entry.image }
26-
video={ entry.video }
27-
sizes='100vw'/>
28-
)
23+
return <Visual image={entry.image} video={entry.video} sizes="100vw" />;
2924
}
3025
```
3126

@@ -54,25 +49,29 @@ fragment video on Asset {
5449
This is the expected pattern for rendering responsive images and videos.
5550

5651
```jsx
57-
import Visual from '@react-visual/contentful'
52+
import Visual from "@react-visual/contentful";
5853

5954
export default function Example() {
60-
return (
61-
<Visual
62-
src={ entry.background }
63-
sizes='100vw'/>
64-
)
55+
return <Visual src={entry.background} sizes="100vw" />;
6556
}
6657
```
6758

6859
Where `background` is defined by this GQL fragment (this consumes the previous fragments):
6960

7061
```gql
7162
fragment visual on Visual {
72-
image { ...image }
73-
portraitImage { ...image }
74-
video { ...video }
75-
portraitVideo { ...video }
63+
image {
64+
...image
65+
}
66+
portraitImage {
67+
...image
68+
}
69+
video {
70+
...video
71+
}
72+
portraitVideo {
73+
...video
74+
}
7675
alt
7776
}
7877
```
@@ -83,52 +82,51 @@ For more examples, read [the Cypress component tests](./cypress/component).
8382

8483
### Sources
8584

86-
| Prop | Type | Description
87-
| -- | -- | --
88-
| `image` | `object` | A Contentful image Asset.
89-
| `video` | `object` | A Contentful video Asset.
90-
| `src` | `object` | An object with keys of responsive keys. See examples above.
85+
| Prop | Type | Description |
86+
| ------- | -------- | ----------------------------------------------------------- |
87+
| `image` | `object` | A Contentful image Asset. |
88+
| `video` | `object` | A Contentful video Asset. |
89+
| `src` | `object` | An object with keys of responsive keys. See examples above. |
9190

9291
### Layout
9392

94-
| Prop | Type | Description
95-
| -- | -- | --
96-
| `expand` | `boolean` | Make the Visual fill it's container via CSS using absolute positioning.
97-
| `aspect` | `number` | Force the Visual to a specific aspect ratio. If empty, this will be set using width and height fields from Contentful queries.
98-
| `width` | `number`, `string` | A CSS dimension value or a px number.
99-
| `height` | `number`, `string` | A CSS dimension value or a px number.
100-
| `fit` | `string` | An [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) value that is applied to the assets. Defaults to `cover`.
101-
| `position` | `string` | An [`object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) value.
93+
| Prop | Type | Description |
94+
| ---------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
95+
| `expand` | `boolean` | Make the Visual fill it's container via CSS using absolute positioning. |
96+
| `aspect` | `number` | Force the Visual to a specific aspect ratio. If empty, this will be set using width and height fields from Contentful queries. |
97+
| `width` | `number`, `string` | A CSS dimension value or a px number. |
98+
| `height` | `number`, `string` | A CSS dimension value or a px number. |
99+
| `fit` | `string` | An [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) value that is applied to the assets. Defaults to `cover`. |
100+
| `position` | `string` | An [`object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) value. |
102101

103102
### Loading
104103

105-
| Prop | Type | Description
106-
| -- | -- | --
107-
| `priority` | `boolean` | Sets [`next/image`'s `priority`](https://nextjs.org/docs/pages/api-reference/components/image#priority) and videos to not lazy load.
108-
| `sizes` | `string` | Sets [`next/image`'s `sizes`](https://nextjs.org/docs/pages/api-reference/components/image#sizes) prop.
109-
104+
| Prop | Type | Description |
105+
| ---------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------ |
106+
| `priority` | `boolean` | Sets [`next/image`'s `priority`](https://nextjs.org/docs/pages/api-reference/components/image#priority) and videos to not lazy load. |
107+
| `sizes` | `string` | Sets [`next/image`'s `sizes`](https://nextjs.org/docs/pages/api-reference/components/image#sizes) prop. |
110108

111109
### Video
112110

113-
| Prop | Type | Description
114-
| -- | -- | --
115-
| `paused` | `boolean` | Disables autoplay of videos. This prop is reactive, unlike the `paused` property of the html `<video>` tag. You can set it to `true` to pause a playing video or set it to `false` to play a paused video.
116-
| `onPause` | `Function` | Invoked whenever the video fires a [pause event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause_event).
117-
| `onPlay` | `Function` | Invoked whenever the video fires a [play event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event).
118-
| `playIcon` | `ComponentType` | Replace the play icon used with accessibility controls.
119-
| `pauseIcon` | `ComponentType` | Replace the pause icon used with accessibility controls.
111+
| Prop | Type | Description |
112+
| ----------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
113+
| `paused` | `boolean` | Disables autoplay of videos. This prop is reactive, unlike the `paused` property of the html `<video>` tag. You can set it to `true` to pause a playing video or set it to `false` to play a paused video. |
114+
| `onPause` | `Function` | Invoked whenever the video fires a [pause event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause_event). |
115+
| `onPlay` | `Function` | Invoked whenever the video fires a [play event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event). |
116+
| `playIcon` | `ComponentType` | Replace the play icon used with accessibility controls. |
117+
| `pauseIcon` | `ComponentType` | Replace the pause icon used with accessibility controls. |
120118

121119
### Accessibility
122120

123-
| Prop | Type | Description
124-
| -- | -- | --
125-
| `alt` | `string` | Sets the alt attribute or aria-label value, depending on asset type.
126-
| `hideAccessibilityControls` | `boolean` | Removes the play/pause toggle on videos.
127-
| `accessibilityControlsPosition` | [`PositionOption`](https://github.com/BKWLD/react-visual/blob/eaf2d150efa1187033ba732a350a4db20f260435/packages/react/src/types/reactVisualTypes.ts#L61-L70) | Controls the position of the accessibility controls. Defaults to `bottom left`.
121+
| Prop | Type | Description |
122+
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------- |
123+
| `alt` | `string` | Sets the alt attribute or aria-label value, depending on asset type. |
124+
| `hideAccessibilityControls` | `boolean` | Removes the play/pause toggle on videos. |
125+
| `accessibilityControlsPosition` | [`PositionOption`](https://github.com/BKWLD/react-visual/blob/eaf2d150efa1187033ba732a350a4db20f260435/packages/react/src/types/reactVisualTypes.ts#L61-L70) | Controls the position of the accessibility controls. Defaults to `bottom left`. |
128126

129127
### Theming
130128

131-
| Prop | Type | Description
132-
| -- | -- | --
133-
| `className` | `string` | Add a custom CSS class.
134-
| `style` | `CSSProperties` | Add additional styles.
129+
| Prop | Type | Description |
130+
| ----------- | --------------- | ----------------------- |
131+
| `className` | `string` | Add a custom CSS class. |
132+
| `style` | `CSSProperties` | Add additional styles. |

0 commit comments

Comments
 (0)