Skip to content

Commit 3bef3c4

Browse files
hxrshxzhxrshxz
committed
Replace invalid className HTML attributes
Signed-off-by: Harsh <harshmastic@gmail.com>
1 parent 2321550 commit 3bef3c4

File tree

10 files changed

+94
-99
lines changed

10 files changed

+94
-99
lines changed

‎src/components/CircleButton/index.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,14 @@ export const CircleButton = ({
2222
onClick={onClick}
2323
aria-label={ariaLabel}
2424
href={href}
25-
className={sharedClassName}
25+
class={sharedClassName}
2626
>
2727
{children}
2828
</a>
2929
);
3030
}
3131
return (
32-
<button
33-
onClick={onClick}
34-
aria-label={ariaLabel}
35-
className={sharedClassName}
36-
>
32+
<button onClick={onClick} aria-label={ariaLabel} class={sharedClassName}>
3733
{children}
3834
</button>
3935
);

‎src/components/CodeEmbed/index.jsx‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState, useEffect, useRef } from "preact/hooks";
2-
import { useLiveRegion } from '../hooks/useLiveRegion';
2+
import { useLiveRegion } from "../hooks/useLiveRegion";
33
import CodeMirror, { EditorView } from "@uiw/react-codemirror";
44
import { javascript } from "@codemirror/lang-javascript";
55
import { cdnLibraryUrl, cdnSoundUrl } from "@/src/globals/globals";
@@ -38,14 +38,19 @@ export const CodeEmbed = (props) => {
3838
);
3939

4040
let { previewWidth, previewHeight } = props;
41-
const canvasMatch = /createCanvas\(\s*(\d+),\s*(\d+)\s*(?:,\s*(?:P2D|WEBGL)\s*)?\)/m.exec(initialCode);
41+
const canvasMatch =
42+
/createCanvas\(\s*(\d+),\s*(\d+)\s*(?:,\s*(?:P2D|WEBGL)\s*)?\)/m.exec(
43+
initialCode,
44+
);
4245
if (canvasMatch) {
4346
previewWidth = previewWidth || parseFloat(canvasMatch[1]);
4447
previewHeight = previewHeight || parseFloat(canvasMatch[2]);
4548
}
4649

4750
// Quick hack to make room for DOM that gets added below the canvas by default
48-
const domMatch = /create(Button|Select|P|Div|Input|ColorPicker)/.exec(initialCode);
51+
const domMatch = /create(Button|Select|P|Div|Input|ColorPicker)/.exec(
52+
initialCode,
53+
);
4954
if (domMatch && previewHeight) {
5055
previewHeight += 100;
5156
}
@@ -87,15 +92,15 @@ export const CodeEmbed = (props) => {
8792
}
8893
}, []);
8994

90-
if (!rendered) return <div className="code-placeholder" />;
95+
if (!rendered) return <div class="code-placeholder" />;
9196

9297
return (
9398
<div
94-
className={`my-md flex w-full flex-col gap-[20px] overflow-hidden ${props.allowSideBySide ? "lg:flex-row" : ""} ${props.fullWidth ? "full-width" : ""}`}
99+
class={`my-md flex w-full flex-col gap-[20px] overflow-hidden ${props.allowSideBySide ? "lg:flex-row" : ""} ${props.fullWidth ? "full-width" : ""}`}
95100
>
96101
{props.previewable ? (
97102
<div
98-
className={`ml-0 flex w-fit gap-[20px] ${largeSketch ? "flex-col" : (props.allowSideBySide ? "" : "flex-col lg:flex-row")}`}
103+
class={`ml-0 flex w-fit gap-[20px] ${largeSketch ? "flex-col" : props.allowSideBySide ? "" : "flex-col lg:flex-row"}`}
99104
>
100105
<div>
101106
<CodeFrame
@@ -105,10 +110,16 @@ export const CodeEmbed = (props) => {
105110
base={props.base}
106111
frameRef={codeFrameRef}
107112
lazyLoad={props.lazyLoad}
108-
scripts={props.includeSound ? [cdnLibraryUrl, cdnSoundUrl] :[cdnLibraryUrl]}
113+
scripts={
114+
props.includeSound
115+
? [cdnLibraryUrl, cdnSoundUrl]
116+
: [cdnLibraryUrl]
117+
}
109118
/>
110119
</div>
111-
<div className={`flex gap-2.5 ${largeSketch ? "flex-row" : "md:flex-row lg:flex-col"}`}>
120+
<div
121+
class={`flex gap-2.5 ${largeSketch ? "flex-row" : "md:flex-row lg:flex-col"}`}
122+
>
112123
<CircleButton
113124
className="bg-bg-gray-40"
114125
onClick={updateOrReRun}
@@ -129,7 +140,7 @@ export const CodeEmbed = (props) => {
129140
</div>
130141
</div>
131142
) : null}
132-
<div className="code-editor-container relative w-full">
143+
<div class="code-editor-container relative w-full">
133144
<CodeMirror
134145
value={codeString}
135146
theme="light"
@@ -155,7 +166,7 @@ export const CodeEmbed = (props) => {
155166
(editorView.contentDOM.ariaLabel = "Code Editor")
156167
}
157168
/>
158-
<div className="absolute right-0 top-0 flex flex-col gap-xs p-xs md:flex-row">
169+
<div class="absolute right-0 top-0 flex flex-col gap-xs p-xs md:flex-row">
159170
<CopyCodeButton textToCopy={codeString || initialCode} />
160171
<CircleButton
161172
onClick={() => {

‎src/components/CopyCodeButton/index.tsx‎

Lines changed: 17 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { useState } from 'preact/hooks';
2-
import { useLiveRegion } from '../hooks/useLiveRegion';
1+
import { useState } from "preact/hooks";
2+
import { useLiveRegion } from "../hooks/useLiveRegion";
33
import CircleButton from "../CircleButton";
44

55
interface CopyCodeButtonProps {
@@ -9,56 +9,47 @@ interface CopyCodeButtonProps {
99

1010
export const CopyCodeButton = ({
1111
textToCopy,
12-
announceOnCopy = 'Code copied to clipboard'
12+
announceOnCopy = "Code copied to clipboard",
1313
}: CopyCodeButtonProps) => {
1414
const [isCopied, setIsCopied] = useState(false);
1515

1616
const { ref: liveRegionRef, announce } = useLiveRegion<HTMLSpanElement>();
1717

1818
const copyTextToClipboard = async () => {
19-
console.log('Copy button clicked');
20-
console.log('Text to copy:', textToCopy);
21-
2219
try {
23-
console.log('Using Clipboard API');
2420
await navigator.clipboard.writeText(textToCopy);
25-
console.log('Text copied successfully');
2621

2722
announce(announceOnCopy);
2823

2924
setIsCopied(true);
3025
setTimeout(() => {
3126
setIsCopied(false);
32-
console.log('Copy state reset');
3327
}, 2000);
3428
} catch (err) {
35-
console.error('Clipboard API copy failed:', err);
29+
console.error("Clipboard API copy failed:", err);
3630
}
3731
};
3832

3933
return (
4034
<>
4135
<CircleButton
42-
onClick={() => {
43-
console.log('CircleButton clicked');
44-
copyTextToClipboard();
45-
}}
36+
onClick={copyTextToClipboard}
4637
ariaLabel="Copy code to clipboard"
47-
className={`bg-white ${isCopied ? 'text-green-600' : 'text-black'} transition-colors duration-200`}
38+
className={`bg-white ${isCopied ? "text-green-600" : "text-black"} transition-colors duration-200`}
4839
>
4940
{isCopied ? (
50-
<svg
51-
width="18"
52-
height="22"
53-
viewBox="0 0 24 24"
54-
fill="none"
41+
<svg
42+
width="18"
43+
height="22"
44+
viewBox="0 0 24 24"
45+
fill="none"
5546
xmlns="http://www.w3.org/2000/svg"
5647
>
57-
<path
58-
d="M20 6L9 17L4 12"
59-
stroke="currentColor"
60-
strokeWidth="2"
61-
strokeLinecap="round"
48+
<path
49+
d="M20 6L9 17L4 12"
50+
stroke="currentColor"
51+
strokeWidth="2"
52+
strokeLinecap="round"
6253
strokeLinejoin="round"
6354
/>
6455
</svg>
@@ -89,4 +80,4 @@ export const CopyCodeButton = ({
8980
<span ref={liveRegionRef} aria-live="polite" class="sr-only" />
9081
</>
9182
);
92-
};
83+
};

‎src/components/Dropdown/index.tsx‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -113,37 +113,37 @@ export const Dropdown = ({
113113
// Render the collapsed dropdown button
114114
const renderCollapsedDropdown = () => (
115115
<button
116-
className={styles.selected}
116+
class={styles.selected}
117117
onClick={handleDropdownClick}
118118
aria-haspopup="listbox"
119119
aria-expanded={isOpen}
120120
tabIndex={0}
121121
>
122-
<div className={styles.iconTop}>
122+
<div class={styles.iconTop}>
123123
<Icon kind={iconKind} />
124124
</div>
125125
<span>
126126
{dropdownLabel ||
127127
options.find((option) => isSelected(option))?.label ||
128128
"Select..."}
129129
</span>
130-
<div className={styles.chevron}>
130+
<div class={styles.chevron}>
131131
<Icon kind="chevron-down" />
132132
</div>
133133
</button>
134134
);
135135

136136
// Render the expanded dropdown options
137137
const renderExpandedDropdown = () => (
138-
<ul className={styles.options} role="listbox" tabIndex={-1}>
138+
<ul class={styles.options} role="listbox" tabIndex={-1}>
139139
{options.map((option, index) => (
140140
<li
141141
key={option.value}
142-
className={styles.option}
142+
class={styles.option}
143143
role="option"
144144
aria-selected={isSelected(option)}
145145
>
146-
<div className={styles.icon}>
146+
<div class={styles.icon}>
147147
<Icon
148148
kind={
149149
isSelected(option) ? "option-selected" : "option-unselected"
@@ -162,23 +162,19 @@ export const Dropdown = ({
162162
</li>
163163
))}
164164
{variant === "radio" ? (
165-
<button onClick={() => setIsOpen(false)} className={styles.chevron}>
165+
<button onClick={() => setIsOpen(false)} class={styles.chevron}>
166166
<Icon kind="chevron-up" />
167167
</button>
168168
) : (
169-
<div className={styles.chevron}>
169+
<div class={styles.chevron}>
170170
<Icon kind="chevron-up" />
171171
</div>
172172
)}
173173
</ul>
174174
);
175175

176176
return (
177-
<div
178-
className={styles.container}
179-
ref={dropdownRef}
180-
onKeyDown={handleKeyDown}
181-
>
177+
<div class={styles.container} ref={dropdownRef} onKeyDown={handleKeyDown}>
182178
{isOpen ? renderExpandedDropdown() : renderCollapsedDropdown()}
183179
</div>
184180
);

0 commit comments

Comments
 (0)