react-ronin
Advanced tools
Comparing version 2.3.4-dependabot-npm-and-yarn-all-e1f480a424-experimental.0 to 2.3.4-dependabot-npm-and-yarn-all-f635da7422-experimental.0
@@ -1,3 +0,3 @@ | ||
import React from "react"; | ||
import type { StoredObject } from "ronin/types"; | ||
import React from 'react'; | ||
import type { StoredObject } from 'ronin/types'; | ||
export interface ImageProps { | ||
@@ -23,3 +23,3 @@ /** | ||
*/ | ||
format?: "webp" | "jpeg" | "png" | "original"; | ||
format?: 'webp' | 'jpeg' | 'png' | 'original'; | ||
/** | ||
@@ -49,7 +49,7 @@ * The value of a RONIN Blob field. | ||
*/ | ||
fit?: React.CSSProperties["objectFit"]; | ||
fit?: React.CSSProperties['objectFit']; | ||
/** | ||
* The aspect ratio of the image. Can be "square", "video", or a custom string. | ||
*/ | ||
aspect?: "square" | "video" | string; | ||
aspect?: 'square' | 'video' | string; | ||
/** | ||
@@ -64,3 +64,3 @@ * Indicates how the browser should load the image. | ||
*/ | ||
loading?: "lazy"; | ||
loading?: 'lazy'; | ||
/** | ||
@@ -67,0 +67,0 @@ * The class names for the image container (not the image itself). |
@@ -1,10 +0,12 @@ | ||
"use client"; | ||
'use client'; | ||
// We are purposefully importing `React` here, as the build output contains | ||
// references to it, and those would fail if we don't import it explicitly. | ||
import React, { useCallback, useRef, forwardRef } from "react"; | ||
const supportedFitValues = ["fill", "contain", "cover"]; | ||
const Image = forwardRef(({ src: input, alt, size: defaultSize, width: defaultWidth, height: defaultHeight, fit = "cover", format = "webp", quality = 80, aspect, loading, style, className, }, ref) => { | ||
// biome-ignore lint/style/useImportType: Explicitly importing `React` is intentional. | ||
import React from 'react'; | ||
import { forwardRef, useCallback, useRef } from 'react'; | ||
const supportedFitValues = ['fill', 'contain', 'cover']; | ||
const Image = forwardRef(({ src: input, alt, size: defaultSize, width: defaultWidth, height: defaultHeight, fit = 'cover', format = 'webp', quality = 80, aspect, loading, style, className, }, ref) => { | ||
const imageElement = useRef(null); | ||
const renderTime = useRef(Date.now()); | ||
const isMediaObject = typeof input === "object" && input !== null; | ||
const isMediaObject = typeof input === 'object' && input !== null; | ||
const width = defaultSize || defaultWidth; | ||
@@ -19,4 +21,4 @@ const height = defaultSize || defaultHeight; | ||
imageElement.current?.animate([ | ||
{ filter: "blur(4px)", opacity: 0 }, | ||
{ filter: "blur(0px)", opacity: 1 }, | ||
{ filter: 'blur(4px)', opacity: 0 }, | ||
{ filter: 'blur(0px)', opacity: 1 }, | ||
], { | ||
@@ -28,11 +30,11 @@ duration: 200, | ||
if (!height && !width) | ||
throw new Error("Either `width`, `height`, or `size` must be defined for `Image`."); | ||
throw new Error('Either `width`, `height`, or `size` must be defined for `Image`.'); | ||
// Validate given `quality` property. | ||
if (quality && (quality < 0 || quality > 100)) | ||
throw new Error("The given `quality` was not in the range between 0 and 100."); | ||
throw new Error('The given `quality` was not in the range between 0 and 100.'); | ||
const optimizationParams = new URLSearchParams({ | ||
...(width ? { w: width.toString() } : {}), | ||
...(height ? { h: height.toString() } : {}), | ||
...(format !== "original" ? { fm: format } : {}), | ||
fit: supportedFitValues.includes(fit) ? fit : "cover", | ||
...(format !== 'original' ? { fm: format } : {}), | ||
fit: supportedFitValues.includes(fit) ? fit : 'cover', | ||
q: quality.toString(), | ||
@@ -43,4 +45,4 @@ }); | ||
...(height ? { h: (height * 2).toString() } : {}), | ||
...(format !== "original" ? { fm: format } : {}), | ||
fit: supportedFitValues.includes(fit) ? fit : "cover", | ||
...(format !== 'original' ? { fm: format } : {}), | ||
fit: supportedFitValues.includes(fit) ? fit : 'cover', | ||
q: quality.toString(), | ||
@@ -53,22 +55,22 @@ }); | ||
: input; | ||
const placeholder = input && typeof input !== "string" ? input.placeholder?.base64 : null; | ||
const placeholder = input && typeof input !== 'string' ? input.placeholder?.base64 : null; | ||
return (React.createElement("div", { ref: ref, className: className, style: { | ||
position: "relative", | ||
overflow: "hidden", | ||
position: 'relative', | ||
overflow: 'hidden', | ||
flexShrink: 0, | ||
width: width || "100%", | ||
height: height || "100%", | ||
aspectRatio: aspect === "video" ? "16/9" : aspect === "square" ? "1/1" : "auto", | ||
width: width || '100%', | ||
height: height || '100%', | ||
aspectRatio: aspect === 'video' ? '16/9' : aspect === 'square' ? '1/1' : 'auto', | ||
...style, | ||
} }, | ||
placeholder && (React.createElement("img", { style: { | ||
position: "absolute", | ||
width: "100%", | ||
height: "100%", | ||
position: 'absolute', | ||
width: '100%', | ||
height: '100%', | ||
objectFit: fit, | ||
}, src: placeholder, alt: alt })), | ||
React.createElement("img", { alt: alt, style: { | ||
position: "absolute", | ||
width: "100%", | ||
height: "100%", | ||
position: 'absolute', | ||
width: '100%', | ||
height: '100%', | ||
objectFit: fit, | ||
@@ -75,0 +77,0 @@ }, decoding: "async", onLoad: onLoad, loading: loading, ref: imageElement, src: source, srcSet: responsiveSource }))); |
@@ -1,4 +0,5 @@ | ||
import React, { type ReactHTML } from "react"; | ||
import type { ReactHTML, ReactNode } from 'react'; | ||
import React from 'react'; | ||
export type RichTextContent = { | ||
type: "doc" | "paragraph" | "blockquote" | "codeBlock" | "bulletList" | "listItem" | "orderedList"; | ||
type: 'doc' | 'paragraph' | 'blockquote' | 'codeBlock' | 'bulletList' | 'listItem' | 'orderedList'; | ||
content?: RichTextContent[]; | ||
@@ -9,3 +10,3 @@ attrs: { | ||
} | { | ||
type: "codeBlock"; | ||
type: 'codeBlock'; | ||
attrs: { | ||
@@ -15,7 +16,7 @@ language: string | null; | ||
content?: { | ||
type: "text"; | ||
type: 'text'; | ||
text: string; | ||
}[]; | ||
} | { | ||
type: "heading"; | ||
type: 'heading'; | ||
content?: RichTextContent[]; | ||
@@ -26,8 +27,8 @@ attrs: { | ||
} | { | ||
type: "text"; | ||
type: 'text'; | ||
text: string; | ||
marks?: ({ | ||
type: "bold" | "italic" | "code" | "link"; | ||
type: 'bold' | 'italic' | 'code' | 'link'; | ||
} | { | ||
type: "link"; | ||
type: 'link'; | ||
attrs: { | ||
@@ -44,3 +45,3 @@ href: string; | ||
components?: ReactHTML; | ||
}) => (string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined)[]; | ||
}) => (string | number | boolean | Iterable<ReactNode> | React.JSX.Element | null | undefined)[]; | ||
export default RichText; |
@@ -1,6 +0,7 @@ | ||
import React, {} from "react"; | ||
// biome-ignore lint/correctness/noUnusedImports: Current file is a module. | ||
import React from 'react'; | ||
const RichText = ({ data, components, }) => { | ||
const items = Array.isArray(data) ? data : [data]; | ||
return items.map((item, position) => { | ||
if (item.type === "text") { | ||
if (item.type === 'text') { | ||
return (item.marks || []).reduce((final, mark) => { | ||
@@ -10,14 +11,14 @@ let Element = null; | ||
switch (mark.type) { | ||
case "bold": | ||
Element = components?.b || "b"; | ||
case 'bold': | ||
Element = components?.b || 'b'; | ||
break; | ||
case "italic": | ||
Element = components?.i || "i"; | ||
case 'italic': | ||
Element = components?.i || 'i'; | ||
break; | ||
case "code": | ||
Element = components?.code || "code"; | ||
case 'code': | ||
Element = components?.code || 'code'; | ||
break; | ||
case "link": | ||
Element = components?.a || "a"; | ||
if ("attrs" in mark) { | ||
case 'link': | ||
Element = components?.a || 'a'; | ||
if ('attrs' in mark) { | ||
attributes = { | ||
@@ -35,3 +36,3 @@ // We're selecting these properties individually because the | ||
const RenderingElement = Element; | ||
return RenderingElement ? (React.createElement(RenderingElement, { ...attributes, key: (typeof RenderingElement === "string" | ||
return RenderingElement ? (React.createElement(RenderingElement, { ...attributes, key: (typeof RenderingElement === 'string' | ||
? RenderingElement | ||
@@ -41,3 +42,3 @@ : RenderingElement.name) + String(position) }, final)) : (final); | ||
} | ||
const richtTextPrefix = "rich-text-"; | ||
const richtTextPrefix = 'rich-text-'; | ||
let Element = null; | ||
@@ -47,24 +48,24 @@ let children = item.content ? (React.createElement(RichText, { data: item.content, components: components, key: richtTextPrefix + String(position) })) : null; | ||
switch (item.type) { | ||
case "doc": | ||
Element = components?.div || "div"; | ||
case 'doc': | ||
Element = components?.div || 'div'; | ||
break; | ||
case "paragraph": | ||
Element = components?.p || "p"; | ||
case 'paragraph': | ||
Element = components?.p || 'p'; | ||
break; | ||
case "blockquote": | ||
Element = components?.blockquote || "blockquote"; | ||
case 'blockquote': | ||
Element = components?.blockquote || 'blockquote'; | ||
break; | ||
case "heading": | ||
case 'heading': | ||
if (item.attrs.level === 1) | ||
Element = components?.h1 || "h1"; | ||
Element = components?.h1 || 'h1'; | ||
if (item.attrs.level === 2) | ||
Element = components?.h2 || "h2"; | ||
Element = components?.h2 || 'h2'; | ||
if (item.attrs.level === 3) | ||
Element = components?.h3 || "h3"; | ||
Element = components?.h3 || 'h3'; | ||
if (item.attrs.level === 4) | ||
Element = components?.h4 || "h4"; | ||
Element = components?.h4 || 'h4'; | ||
break; | ||
case "codeBlock": | ||
case 'codeBlock': | ||
{ | ||
Element = components?.pre || "pre"; | ||
Element = components?.pre || 'pre'; | ||
// Marks are not allowed within code blocks, so we can pick its text | ||
@@ -74,24 +75,23 @@ // children directly, to avoid having to render React elements for | ||
language = | ||
typeof item?.attrs.language === "undefined" || | ||
item.attrs.language === "null" || | ||
typeof item?.attrs.language === 'undefined' || | ||
item.attrs.language === 'null' || | ||
item.attrs.language === null | ||
? "plaintext" | ||
? 'plaintext' | ||
: item?.attrs.language; | ||
const firstChild = item.content?.[0]; | ||
children = | ||
firstChild && "text" in firstChild ? firstChild?.text : null; | ||
children = firstChild && 'text' in firstChild ? firstChild?.text : null; | ||
} | ||
break; | ||
case "bulletList": | ||
Element = components?.ul || "ul"; | ||
case 'bulletList': | ||
Element = components?.ul || 'ul'; | ||
break; | ||
case "listItem": | ||
Element = components?.li || "li"; | ||
case 'listItem': | ||
Element = components?.li || 'li'; | ||
break; | ||
case "orderedList": | ||
Element = components?.ol || "ol"; | ||
case 'orderedList': | ||
Element = components?.ol || 'ol'; | ||
break; | ||
} | ||
const RenderingElement = Element; | ||
return RenderingElement ? (React.createElement(RenderingElement, { key: (typeof RenderingElement === "string" | ||
return RenderingElement ? (React.createElement(RenderingElement, { key: (typeof RenderingElement === 'string' | ||
? RenderingElement | ||
@@ -98,0 +98,0 @@ : RenderingElement.name) + String(position), language: language }, children)) : (children); |
@@ -1,4 +0,4 @@ | ||
export * from "ronin"; | ||
export { default } from "ronin"; | ||
export { default as RichText } from "./components/rich-text"; | ||
export { default as Image } from "./components/image.client"; | ||
export * from 'ronin'; | ||
export { default } from 'ronin'; | ||
export { default as RichText } from './components/rich-text'; | ||
export { default as Image } from './components/image.client'; |
@@ -1,4 +0,4 @@ | ||
export * from "ronin"; | ||
export { default } from "ronin"; | ||
export { default as RichText } from "./components/rich-text"; | ||
export { default as Image } from "./components/image.client"; | ||
export * from 'ronin'; | ||
export { default } from 'ronin'; | ||
export { default as RichText } from './components/rich-text'; | ||
export { default as Image } from './components/image.client'; |
@@ -1,2 +0,2 @@ | ||
export type * from "ronin/types"; | ||
export type { RichTextContent } from "./components/rich-text"; | ||
export type * from 'ronin/types'; | ||
export type { RichTextContent } from './components/rich-text'; |
{ | ||
"name": "react-ronin", | ||
"version": "2.3.4-dependabot-npm-and-yarn-all-e1f480a424-experimental.0", | ||
"version": "2.3.4-dependabot-npm-and-yarn-all-f635da7422-experimental.0", | ||
"license": "Apache-2.0", | ||
@@ -12,2 +12,3 @@ "main": "dist/index.js", | ||
"build": "tsc --project tsconfig.json", | ||
"format": "bun x biome format --write .", | ||
"lint": "bun run lint:tsc && bun run lint:biome --", | ||
@@ -57,14 +58,14 @@ "lint:biome": "biome check --apply .", | ||
"dependencies": { | ||
"ronin": "4.3.1" | ||
"ronin": "4.4.1" | ||
}, | ||
"devDependencies": { | ||
"@biomejs/biome": "1.8.3", | ||
"@types/bun": "1.1.8", | ||
"@types/react": "18.3.5", | ||
"@types/web": "0.0.162", | ||
"husky": "9.1.5", | ||
"@biomejs/biome": "1.9.4", | ||
"@types/bun": "1.1.12", | ||
"@types/react": "18.3.12", | ||
"@types/web": "0.0.175", | ||
"husky": "9.1.6", | ||
"lint-staged": "15.2.10", | ||
"msw": "2.4.4", | ||
"msw": "2.6.0", | ||
"react": "18.3.1", | ||
"typescript": "5.5.4" | ||
"typescript": "5.6.3" | ||
}, | ||
@@ -71,0 +72,0 @@ "peerDependencies": { |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
28664
299
36
7
+ Added@inquirer/checkbox@4.0.2(transitive)
+ Added@inquirer/confirm@5.0.2(transitive)
+ Added@inquirer/core@10.1.0(transitive)
+ Added@inquirer/editor@4.1.0(transitive)
+ Added@inquirer/expand@4.0.2(transitive)
+ Added@inquirer/input@4.0.2(transitive)
+ Added@inquirer/number@3.0.2(transitive)
+ Added@inquirer/password@4.0.2(transitive)
+ Added@inquirer/prompts@7.0.1(transitive)
+ Added@inquirer/rawlist@4.0.2(transitive)
+ Added@inquirer/search@3.0.2(transitive)
+ Added@inquirer/select@4.0.2(transitive)
+ Added@inquirer/type@3.0.1(transitive)
+ Addedcli-cursor@5.0.0(transitive)
+ Addedini@5.0.0(transitive)
+ Addedmimic-function@5.0.1(transitive)
+ Addedmute-stream@2.0.0(transitive)
+ Addedonetime@7.0.0(transitive)
+ Addedora@8.1.0(transitive)
+ Addedrestore-cursor@5.1.0(transitive)
+ Addedronin@4.4.1(transitive)
+ Addedtypescript@5.6.3(transitive)
- Removed@inquirer/confirm@3.2.0(transitive)
- Removed@inquirer/core@9.2.1(transitive)
- Removed@inquirer/editor@2.2.0(transitive)
- Removed@inquirer/expand@2.3.0(transitive)
- Removed@inquirer/input@2.3.0(transitive)
- Removed@inquirer/number@1.1.0(transitive)
- Removed@inquirer/password@2.2.0(transitive)
- Removed@inquirer/prompts@5.3.4(transitive)
- Removed@inquirer/rawlist@2.3.0(transitive)
- Removed@inquirer/search@1.1.0(transitive)
- Removed@inquirer/select@2.5.0(transitive)
- Removed@inquirer/type@1.5.52.0.0(transitive)
- Removed@types/mute-stream@0.0.4(transitive)
- Removed@types/wrap-ansi@3.0.0(transitive)
- Removedcli-cursor@4.0.0(transitive)
- Removedini@4.1.3(transitive)
- Removedmimic-fn@2.1.0(transitive)
- Removedmute-stream@1.0.0(transitive)
- Removedonetime@5.1.2(transitive)
- Removedora@8.0.1(transitive)
- Removedrestore-cursor@4.0.0(transitive)
- Removedronin@4.3.1(transitive)
- Removedsignal-exit@3.0.7(transitive)
- Removedtypescript@5.5.4(transitive)
Updatedronin@4.4.1