Remove sticky line in playground

elchininet · Dec 22, 2024 · 44b6817 · 44b6817
1 parent 8bd9915
commit 44b6817
Show file tree

Hide file tree

Showing 15 changed files with 86 additions and 48 deletions.
diff --git a/docs/scripts/index.js b/docs/scripts/index.js
diff --git a/package.json b/package.json
@@ -47,7 +47,7 @@
   ],
   "scripts": {
     "test": "jest --clearCache && jest --verbose",
-    "lint": "eslint \"src/**/*.ts\" \"tests/**/*.ts\"",
+    "lint": "eslint \"src/**/*.ts\" \"playground/src/**/*.tsx\" \"tests/**/*.ts\"",
     "clean": "./scripts/clean.sh",
     "copy": "./scripts/copy.sh",
     "modify-dts": "replace-in-file --configFile=config.replace.json",

diff --git a/playground/src/components/App/App.tsx b/playground/src/components/App/App.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import { AppProvider } from '@components/AppProvider';
 import { Burger } from '@components/Burger';
 import { Header } from '@components/Header';
@@ -11,13 +11,13 @@ export const App = (): JSX.Element => {
 
     return (
         <AppProvider>
-            <div className={styles.wrapper}>              
+            <div className={styles.wrapper}>
                 <Header />
                 <Playground />
-                <Footer />                        
+                <Footer />
             </div>
             <Options />
             <Burger />
-        </AppProvider> 
+        </AppProvider>
     );
 };
diff --git a/playground/src/components/AppProvider/AppProvider.tsx b/playground/src/components/AppProvider/AppProvider.tsx
@@ -1,4 +1,11 @@
-import React, { PropsWithChildren, createContext, useContext, useState, useEffect } from 'react';
+import React, {
+    JSX,
+    ReactNode,
+    createContext,
+    useContext,
+    useState,
+    useEffect
+} from 'react';
 import { Mode, Source } from 'postcss-rtlcss/options';
 import { PluginOptions, FetchOptions } from '@types';
 import { breakpointSizes } from '@constants';
@@ -64,7 +71,7 @@ const windowSizes = getWindowSizes();
 
 export const AppContext = createContext<AppProviderContext>({} as AppProviderContext);
 
-export const AppProvider = (props: PropsWithChildren<{}>): JSX.Element => {
+export const AppProvider = (props: { children?: ReactNode }): JSX.Element => {
 
     let delay: number;
     const [ code, setCode ] = useState<string>(null);
@@ -83,9 +90,9 @@ export const AppProvider = (props: PropsWithChildren<{}>): JSX.Element => {
 
     const resize = (): void => {
         if (delay) window.clearTimeout(delay);
-        delay = window.setTimeout((): void => {            
+        delay = window.setTimeout((): void => {
             const windowSizes = getWindowSizes();
-            setSizes(windowSizes);       
+            setSizes(windowSizes);
         }, 100);
     };
 
@@ -123,7 +130,7 @@ export const AppProvider = (props: PropsWithChildren<{}>): JSX.Element => {
         changeOptionsProcessEnv,
         changeOptionsUseCalc,
         changeOptionsGreedy,
-        windowSizes: sizes        
+        windowSizes: sizes
     };
 
     return (

diff --git a/playground/src/components/Burger/Burger.tsx b/playground/src/components/Burger/Burger.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import { useAppContext } from '@components/AppProvider';
 import * as styles from './Burger.module.scss';
 

diff --git a/playground/src/components/CSSPanel/CSSPanel.tsx b/playground/src/components/CSSPanel/CSSPanel.tsx
@@ -1,4 +1,8 @@
-import React, {useEffect, useRef} from 'react';
+import React, {
+    useEffect,
+    useRef,
+    JSX
+} from 'react';
 import { editor, languages } from 'monaco-editor';
 import * as styles from './CSSPanel.module.scss';
 
@@ -36,6 +40,9 @@ export const CSSPanel = (props: CSSPanelProps): JSX.Element => {
             theme: 'vs-dark',
             contextmenu: !isMobile,
             selectionHighlight: !isMobile,
+            stickyScroll: {
+                enabled: false
+            },
             hover: {
                 enabled: false
             },

diff --git a/playground/src/components/Footer/Footer.tsx b/playground/src/components/Footer/Footer.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import GitHubButton from 'react-github-btn';
 import classnames from 'classnames';
 import { Link } from '@components/Link';

diff --git a/playground/src/components/Header/Header.tsx b/playground/src/components/Header/Header.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, JSX } from 'react';
 import { Share } from '@icons/Share';
 import { useAppContext } from '@components/AppProvider';
 import { cssLines } from '@components/Playground/css';

diff --git a/playground/src/components/Link/Link.tsx b/playground/src/components/Link/Link.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, JSX } from 'react';
 import * as styles from './Link.module.scss';
 
 export interface LinkProps  {

diff --git a/playground/src/components/Options/Options.tsx b/playground/src/components/Options/Options.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, JSX } from 'react';
 import { Mode, Source } from 'postcss-rtlcss/options';
 import { useAppContext } from '@components/AppProvider';
 import { Switch } from '@components/Switch';
@@ -96,7 +96,7 @@ export const Options = (): JSX.Element => {
                                     ? fetchOptions.ignorePrefixedRules
                                     : true
                             )
-                        }}                        
+                        }}
                     />
                 </div>
                 { /* processUrls */ }
@@ -122,7 +122,7 @@ export const Options = (): JSX.Element => {
                 { /* processKeyFrames */ }
                 <div className={styles.panel}>
                     <Switch
-                        labels={['processKeyFrames: false', 'processKeyFrames: true']}                        
+                        labels={['processKeyFrames: false', 'processKeyFrames: true']}
                         onChange={changeProcessKeyframes}
                         attributes={{
                             checked: !!fetchOptions?.processKeyFrames

diff --git a/playground/src/components/Playground/Playground.tsx b/playground/src/components/Playground/Playground.tsx
@@ -1,4 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, {
+    useState,
+    useEffect,
+    JSX
+} from 'react';
 import postcss, { LazyResult, Result } from 'postcss';
 import postcssRTLCSS from 'postcss-rtlcss';
 import { PluginOptions } from '@types';
@@ -8,7 +12,7 @@ import { cssLines } from './css';
 import * as styles from './Playground.module.scss';
 
 const flipLines = (lines: string, options: PluginOptions = {}): LazyResult => {
-    return postcss([postcssRTLCSS(options)]).process(lines);   
+    return postcss([postcssRTLCSS(options)]).process(lines);
 };
 
 export const Playground = (): JSX.Element => {
@@ -21,14 +25,14 @@ export const Playground = (): JSX.Element => {
     useEffect((): void => {
         flipLines(lines, options).then((result: Result): void => {
             setLinesFlipped(result.css);
-        }).catch((error): void => {           
+        }).catch((error): void => {
             setLinesFlipped(`/* ${error.name}: ${error.message} */`);
         });
         setCode(lines);
     }, [ lines, options ]);
 
     const onChangeCode = (code: string): void => {
-        setLines(code);       
+        setLines(code);
     };
 
     const comonProps = {

diff --git a/playground/src/components/Switch/Switch.tsx b/playground/src/components/Switch/Switch.tsx
@@ -1,4 +1,9 @@
-import React, { useState, useEffect, ChangeEvent } from 'react';
+import React, {
+    JSX,
+    useState,
+    useEffect,
+    ChangeEvent
+} from 'react';
 import * as styles from './Switch.module.scss';
 
 interface Attributes {

diff --git a/playground/src/components/SwitchGroup/SwitchGroup.tsx b/playground/src/components/SwitchGroup/SwitchGroup.tsx
@@ -1,4 +1,9 @@
-import React, { useState, useEffect, ChangeEvent } from 'react';
+import React, {
+    JSX,
+    useState,
+    useEffect,
+    ChangeEvent
+} from 'react';
 import classnames from 'classnames';
 import * as styles from './SwitchGroup.module.scss';
 
@@ -38,7 +43,9 @@ export const SwitchGroup = (props: SwitchGroupProps): JSX.Element => {
         const currentTarget = event.currentTarget;
         const value = currentTarget.value;
         setSelected(value);
-        onChange && onChange(value);
+        if (onChange) {
+            onChange(value);
+        }
     };
     return (
         <div className={styles.component}>
@@ -68,7 +75,7 @@ export const SwitchGroup = (props: SwitchGroupProps): JSX.Element => {
                         );
                     })
                 }
-            </div>            
+            </div>
         </div>
     );
 };
diff --git a/playground/src/hooks/useApi.tsx b/playground/src/hooks/useApi.tsx
@@ -1,4 +1,9 @@
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import {
+    useState,
+    useEffect,
+    useCallback,
+    useMemo
+} from 'react';
 import { FetchOptions } from '@types';
 
 interface UseApiProps {
@@ -122,7 +127,7 @@ export const useApi = (): UseApiProps => {
                     history.replaceState('', '', `#${id}`);
                     if (navigator.clipboard) {
                         navigator.clipboard.writeText(window.location.href);
-                    }                    
+                    }
                 })
                 .catch(() => {
                     setToken(null);
@@ -147,7 +152,7 @@ export const useApi = (): UseApiProps => {
                     setToken(newToken);
                 })
                 .catch(() => setReady(true));
-        }        
+        }
     }, [token]);
 
     useEffect(() => {

diff --git a/playground/src/icons/Share.tsx b/playground/src/icons/Share.tsx
@@ -1,26 +1,29 @@
-import React from 'react';
+import React, { JSX } from 'react';
 
 interface ShareProps {
 	color?: string;
 	size?: number;
 }
 
 export const Share = (props: ShareProps): JSX.Element => {
-	const { color = '#FFF', size = 30 } = props;
-	return (
-		<svg
-			version="1.1"
-			xmlns="http://www.w3.org/2000/svg"
-			x="0px"
-			y="0px"
-			viewBox="0 0 30 30"
-			height={size}
-			width={size}
-		>
-			<path fill={color} d="M24.6,0c-3,0-5.4,2.4-5.4,5.4c0,0.1,0,0.3,0,0.4l-10,4.7C8.2,9.6,6.9,9,5.4,9C2.4,9,0,11.4,0,14.4c0,3,2.4,5.4,5.4,5.4
-				c0.9,0,1.8-0.2,2.6-0.7l4.3,3.7c-0.2,0.6-0.3,1.1-0.3,1.8c0,3,2.4,5.4,5.4,5.4c3,0,5.4-2.4,5.4-5.4s-2.4-5.4-5.4-5.4
-				c-0.9,0-1.8,0.2-2.6,0.7l-4.3-3.7c0.2-0.6,0.3-1.1,0.3-1.8c0-0.1,0-0.2,0-0.4l10-4.7c1,0.9,2.3,1.5,3.7,1.5c3,0,5.4-2.4,5.4-5.4
-				S27.6,0,24.6,0z"/>
-		</svg>
-	);
+    const { color = '#FFF', size = 30 } = props;
+    return (
+        <svg
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            x="0px"
+            y="0px"
+            viewBox="0 0 30 30"
+            height={size}
+            width={size}
+        >
+            <path
+                fill={color}
+                d="M24.6,0c-3,0-5.4,2.4-5.4,5.4c0,0.1,0,0.3,0,0.4l-10,4.7C8.2,9.6,6.9,9,5.4,9C2.4,9,0,11.4,0,14.4c0,3,2.4,5.4,5.4,5.4
+                    c0.9,0,1.8-0.2,2.6-0.7l4.3,3.7c-0.2,0.6-0.3,1.1-0.3,1.8c0,3,2.4,5.4,5.4,5.4c3,0,5.4-2.4,5.4-5.4s-2.4-5.4-5.4-5.4
+                    c-0.9,0-1.8,0.2-2.6,0.7l-4.3-3.7c0.2-0.6,0.3-1.1,0.3-1.8c0-0.1,0-0.2,0-0.4l10-4.7c1,0.9,2.3,1.5,3.7,1.5c3,0,5.4-2.4,5.4-5.4
+                    S27.6,0,24.6,0z"
+            />
+        </svg>
+    );
 };