chore: resolving linting errors, upd dependencies

facebook · Dec 27, 2024 · 93e2b07 · 93e2b07
1 parent 0fada56
commit 93e2b07
Show file tree

Hide file tree

Showing 2 changed files with 905 additions and 120 deletions.
diff --git a/apps/docs/components/Playground.js b/apps/docs/components/Playground.js
@@ -82,10 +82,10 @@ export default function Playground() {
     },
   ]);
   const [url, setUrl] = useState(null);
-  let [loading, setLoading] = useState(true);
-  let [color, setColor] = useState('var(--ifm-color-primary)');
+  let [loading] = useState(true);
+  const [color] = useState('var(--ifm-color-primary)');
   const [selectedPreviewFile, setSelectedPreviewFile] = useState(null);
-  const [resetPreviewFiles, setResetPreviewFiles] = useState(false);
+  // const [resetPreviewFiles, setResetPreviewFiles] = useState(false);
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const [activeFileIndex, setActiveFileIndex] = useState(1);
   const [editingValue, setEditingValue] = useState(null);
@@ -408,8 +408,8 @@ export default function Playground() {
         </button>
         <button {...stylex.props(styles.headerBtn)}>
           <FontAwesomeIcon
-            onClick={reloadContainerPreview}
             icon="fa-solid fa-rotate-right"
+            onClick={reloadContainerPreview}
           />
         </button>
       </header>
@@ -421,11 +421,8 @@ export default function Playground() {
         {isSidebarOpen && (!url || error) && (
           <div {...stylex.props(styles.loading)}>
             <ClipLoader
-              loading={loading}
               color={color}
               size={50}
-              aria-label="Loading Spinner"
-              data-testid="loader"
             />
           </div>
         )}
@@ -641,7 +638,9 @@ const styles = stylex.create({
     paddingRight: '20px',
     paddingLeft: '20px',
     backgroundColor: 'var(--ifm-background-color)',
-    borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
+    borderBottomWidth: '1px',
+    borderBottomStyle: 'solid',
+    borderBottomColor: 'rgba(255, 255, 255, 0.1)',
     boxShadow: '0 1px 4px rgba(0, 0, 0, 0.1)',
     zIndex: 20,
   },
@@ -653,11 +652,11 @@ const styles = stylex.create({
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: 'transparent',
+    borderStyle: 'none',
     color: 'var(--fg1)',
     width: '32px',
     height: '32px',
     borderRadius: '4px',
-    border: 'none',
     cursor: 'pointer',
     zIndex: 20,
     padding: '4px',
@@ -691,7 +690,6 @@ const styles = stylex.create({
     justifyContent: 'center',
     marginLeft: '10px',
     backgroundColor: 'transparent',
-    border: 'none',
     cursor: 'pointer',
     padding: '4px',
     ':hover': {
@@ -767,15 +765,16 @@ const styles = stylex.create({
     flex: '1',
     backgroundColor: 'transparent',
     color: 'inherit',
-    border: 'none',
     fontSize: '14px',
     padding: '2px 4px',
     borderRadius: '2px',
     outline: 'none',
     maxWidth: 'calc(100% - 32px)',
   },
   editingInput: {
-    border: '1px solid var(--ifm-color-primary)',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: 'var(--ifm-color-primary)',
     cursor: 'text',
     backgroundColor: '#FFFFFF',
     color: 'black',
@@ -786,7 +785,6 @@ const styles = stylex.create({
     justifyContent: 'center',
     marginLeft: '10px',
     backgroundColor: 'transparent',
-    border: 'none',
     cursor: 'pointer',
     padding: '4px',
     ':hover': {
@@ -798,7 +796,8 @@ const styles = stylex.create({
     width: '45%',
     height: '100%',
     overflow: 'auto',
-    borderRight: '1px solid var(--ifm-toc-border-color)',
+    borderRightWidth: '1px',
+    borderRightColor: 'var(--ifm-toc-border-color)',
     backgroundColor: 'var(--playground-sidebar-bg)',
   },
   editor: {
@@ -813,7 +812,6 @@ const styles = stylex.create({
   preview: {
     width: '100%',
     height: '100%',
-    border: 'none',
     backgroundColor: '#ffffff',
   },
   loading: {
@@ -837,7 +835,9 @@ const styles = stylex.create({
     backgroundColor: 'var(--ifm-background-color)',
   },
   dragActive: {
-    border: '2px dashed var(--ifm-color-primary)',
+    borderWidth: '2px',
+    borderStyle: 'dashed',
+    borderColor: 'var(--ifm-color-primary)',
     backgroundColor: 'rgba(0, 0, 0, 0.05)',
   },
 });