Skip to content

Commit aa39945

Browse files
hxrshxzhxrshxz
committed
Standardize class attributes in issue-scoped files
Signed-off-by: Harsh <harshmastic@gmail.com>
1 parent 2321550 commit aa39945

19 files changed

Lines changed: 121 additions & 118 deletions

File tree

‎src/components/CircleButton/index.tsx‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ type CircleButtonProps = {
44
onClick?: (ev: MouseEvent) => void;
55
ariaLabel: string;
66
children: Element | JSX.Element;
7-
className?: string;
7+
class?: string;
88
href?: string;
99
};
1010

@@ -13,27 +13,23 @@ export const CircleButton = ({
1313
ariaLabel,
1414
children,
1515
href,
16-
className = "",
16+
class: customClass = "",
1717
}: CircleButtonProps) => {
18-
const sharedClassName = `circle-button grid place-items-center w-[40px] h-[40px] rounded-full p-xs hover:border-type-white text-black hover:!bg-bg-black hover:text-type-white ${className}`;
18+
const sharedClass = `circle-button grid place-items-center w-[40px] h-[40px] rounded-full p-xs hover:border-type-white text-black hover:!bg-bg-black hover:text-type-white ${customClass}`;
1919
if (href) {
2020
return (
2121
<a
2222
onClick={onClick}
2323
aria-label={ariaLabel}
2424
href={href}
25-
className={sharedClassName}
25+
class={sharedClass}
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={sharedClass}>
3733
{children}
3834
</button>
3935
);

‎src/components/CodeEmbed/index.jsx‎

Lines changed: 24 additions & 13 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,19 +110,25 @@ 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
113-
className="bg-bg-gray-40"
124+
class="bg-bg-gray-40"
114125
onClick={updateOrReRun}
115126
ariaLabel="Run sketch"
116127
>
117128
<Icon kind="play" />
118129
</CircleButton>
119130
<CircleButton
120-
className="bg-bg-gray-40"
131+
class="bg-bg-gray-40"
121132
onClick={() => {
122133
setPreviewCodeString("");
123134
announce("Sketch stopped");
@@ -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={() => {
@@ -164,7 +175,7 @@ export const CodeEmbed = (props) => {
164175
announce("Code reset to initial value.");
165176
}}
166177
ariaLabel="Reset code to initial value"
167-
className="bg-white text-black"
178+
class="bg-white text-black"
168179
>
169180
<Icon kind="refresh" />
170181
</CircleButton>

‎src/components/CopyCodeButton/index.tsx‎

Lines changed: 22 additions & 22 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,56 @@ 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);
19+
console.log("Copy button clicked");
20+
console.log("Text to copy:", textToCopy);
2121

2222
try {
23-
console.log('Using Clipboard API');
23+
console.log("Using Clipboard API");
2424
await navigator.clipboard.writeText(textToCopy);
25-
console.log('Text copied successfully');
25+
console.log("Text copied successfully");
2626

2727
announce(announceOnCopy);
2828

2929
setIsCopied(true);
3030
setTimeout(() => {
3131
setIsCopied(false);
32-
console.log('Copy state reset');
32+
console.log("Copy state reset");
3333
}, 2000);
3434
} catch (err) {
35-
console.error('Clipboard API copy failed:', err);
35+
console.error("Clipboard API copy failed:", err);
3636
}
3737
};
3838

3939
return (
4040
<>
4141
<CircleButton
4242
onClick={() => {
43-
console.log('CircleButton clicked');
43+
console.log("CircleButton clicked");
4444
copyTextToClipboard();
4545
}}
4646
ariaLabel="Copy code to clipboard"
47-
className={`bg-white ${isCopied ? 'text-green-600' : 'text-black'} transition-colors duration-200`}
47+
class={`bg-white ${isCopied ? "text-green-600" : "text-black"} transition-colors duration-200`}
4848
>
4949
{isCopied ? (
50-
<svg
51-
width="18"
52-
height="22"
53-
viewBox="0 0 24 24"
54-
fill="none"
50+
<svg
51+
width="18"
52+
height="22"
53+
viewBox="0 0 24 24"
54+
fill="none"
5555
xmlns="http://www.w3.org/2000/svg"
5656
>
57-
<path
58-
d="M20 6L9 17L4 12"
59-
stroke="currentColor"
60-
strokeWidth="2"
61-
strokeLinecap="round"
57+
<path
58+
d="M20 6L9 17L4 12"
59+
stroke="currentColor"
60+
strokeWidth="2"
61+
strokeLinecap="round"
6262
strokeLinejoin="round"
6363
/>
6464
</svg>
@@ -89,4 +89,4 @@ export const CopyCodeButton = ({
8989
<span ref={liveRegionRef} aria-live="polite" class="sr-only" />
9090
</>
9191
);
92-
};
92+
};

‎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)