Branch kamakshi

.babelrc

@@ -1,7 +1,8 @@
 {
   "presets": [
     "@babel/preset-react",
-    "@babel/preset-env"
+    "@babel/preset-env",
+    "@babel/preset-typescript"
   ],
   "env": {
     "production": {

.eslintrc

@@ -85,7 +85,12 @@
   },
   "overrides": [
     {
-      "files": ["*.stories.jsx"],
+      "files": ["*.ts", "*.tsx"],
+      "parser": "@typescript-eslint/parser",
+      "plugins": ["@typescript-eslint"]
+    },
+    {
+      "files": ["*.stories.@(js|jsx|ts|tsx)"],
       "rules": {
         "import/no-extraneous-dependencies": "off"
       }

.gitignore

@@ -21,4 +21,6 @@ terraform/.terraform/
 storybook-static
 duplicates.json
 
-coverage
+coverage
+
+*.tsbuildinfo

.storybook/main.js

@@ -1,6 +1,6 @@
 /** @type { import('@storybook/react-webpack5').StorybookConfig } */
 const config = {
-  stories: ['../client/**/*.stories.(jsx|mdx)'],
+  stories: ['../client/**/*.stories.(jsx|mdx|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
@@ -18,19 +18,19 @@ const config = {
     // https://storybook.js.org/docs/react/builders/webpack
     // this modifies the existing image rule to exclude .svg files
     // since we want to handle those files with @svgr/webpack
-    const imageRule = config.module.rules.find(rule => rule.test.test('.svg'))
-    imageRule.exclude = /\.svg$/
+    const imageRule = config.module.rules.find((rule) =>
+      rule.test.test('.svg')
+    );
+    imageRule.exclude = /\.svg$/;
 
     // configure .svg files to be loaded with @svgr/webpack
     config.module.rules.push({
       test: /\.svg$/,
       use: ['@svgr/webpack']
-    })
+    });
 
-    return config
-  },
+    return config;
+  }
 };
 
 export default config;
-
-

client/common/icons.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { prop } from '../theme';
 import SortArrowUp from '../images/sort-arrow-up.svg';
 import SortArrowDown from '../images/sort-arrow-down.svg';
 import Github from '../images/github.svg';
@@ -35,20 +34,20 @@ import Copy from '../images/copy.svg';
 function withLabel(SvgComponent) {
   const StyledIcon = styled(SvgComponent)`
     &&& {
-      color: ${prop('Icon.default')};
+      color: ${(props) => props.Icon?.default};
       & g,
       & path,
       & polygon {
         opacity: 1;
-        fill: ${prop('Icon.default')};
+        fill: ${(props) => props.Icon?.default};
       }
       &:hover {
-        color: ${prop('Icon.hover')};
+        color: ${(props) => props.Icon?.hover};
         & g,
         & path,
         & polygon {
           opacity: 1;
-          fill: ${prop('Icon.hover')};
+          fill: ${(props) => props.Icon?.hover};
         }
       }
     }

client/modules/IDE/components/Banner.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CrossIcon } from '../../../common/icons';
+
+/**
+ * Banner displays a dismissible announcement bar with a link and a close icon.
+ * It's typically used to highlight opportunities, but use and design can be flexible.
+ *
+ * This component is **presentational only** — visibility logic (open/close state) should be
+ * controlled by the parent via the `onClose` handler.
+ *
+ * @param {Object} props
+ * @param {function} props.onClose - Function called when the user clicks the close (✕) button
+ * @returns {JSX.Element} The banner component with a call-to-action link and a close button
+ *
+ * @example
+ * const [showBanner, setShowBanner] = useState(true);
+ *
+ * {showBanner && (
+ *   <Banner onClose={() => setShowBanner(false)} />
+ * )}
+ */
+
+const Banner = ({ onClose }) => {
+  // URL can be updated depending on the opportunity or announcement.
+  const bannerURL = 'https://openprocessing.org/curation/89576';
+  const bannerCopy = (
+    <>
+      We’re accepting p5.js sketches for a special curation exploring mental
+      health and the newest features in p5.js 2.0!{' '}
+      <span style={{ fontWeight: 600 }}>Submit by July 20!</span>
+    </>
+  );
+
+  return (
+    <div className="banner">
+      <a href={bannerURL}>{bannerCopy}</a>
+      <button className="banner-close-button" onClick={onClose}>
+        <CrossIcon Icon={{ default: '#000', hover: '#333' }} />
+      </button>
+    </div>
+  );
+};
+
+Banner.propTypes = {
+  onClose: PropTypes.func.isRequired
+};
+
+export default Banner;

client/modules/IDE/components/Editor/index.jsx

@@ -76,6 +76,7 @@ import IconButton from '../../../../common/IconButton';
 import contextAwareHinter from '../contextAwareHinter';
 import showRenameDialog from '../showRenameDialog';
 import { handleRename } from '../rename-variable';
+import { jumpToDefinition } from '../jump-to-definition';
 
 emmet(CodeMirror);
 
@@ -158,6 +159,16 @@ class Editor extends React.Component {
 
     delete this._cm.options.lint.options.errors;
 
+    this._cm.getWrapperElement().addEventListener('click', (e) => {
+      const isMac = /Mac/.test(navigator.platform);
+      const isCtrlClick = isMac ? e.metaKey : e.ctrlKey;
+
+      if (isCtrlClick) {
+        const pos = this._cm.coordsChar({ left: e.clientX, top: e.clientY });
+        jumpToDefinition.call(this, pos);
+      }
+    });
+
     const replaceCommand =
       metaKey === 'Ctrl' ? `${metaKey}-H` : `${metaKey}-Option-F`;
     this._cm.setOption('extraKeys', {
@@ -173,6 +184,9 @@ class Editor extends React.Component {
       },
       Enter: 'emmetInsertLineBreak',
       Esc: 'emmetResetAbbreviation',
+      [`Shift-${metaKey}-E`]: (cm) => {
+        cm.getInputField().blur();
+      },
       F2: (cm) => this.renameVariable(cm),
       [`Shift-Tab`]: false,
       [`${metaKey}-Enter`]: () => null,
@@ -591,7 +605,7 @@ class Editor extends React.Component {
             <section className={editorSectionClass}>
               <div className="editor__header">
                 <button
-                  aria-label={this.props.t('Editor.OpenSketchARIA')}
+                  aria-label={this.props.t('Editor.CloseSketchARIA')}
                   className="sidebar__contract"
                   onClick={() => {
                     this.props.collapseSidebar();
@@ -601,7 +615,7 @@ class Editor extends React.Component {
                   <LeftArrowIcon focusable="false" aria-hidden="true" />
                 </button>
                 <button
-                  aria-label={this.props.t('Editor.CloseSketchARIA')}
+                  aria-label={this.props.t('Editor.OpenSketchARIA')}
                   className="sidebar__expand"
                   onClick={this.props.expandSidebar}
                 >

client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap

@@ -335,7 +335,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
           >
             <test-file-stub
               aria-hidden="true"
-              classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
+              classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
               focusable="false"
             />
           </button>
@@ -351,7 +351,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
         >
           <test-file-stub
             aria-hidden="true"
-            classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
+            classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
             focusable="false"
           />
         </button>
@@ -930,7 +930,7 @@ exports[`Nav renders editor version for mobile 1`] = `
           >
             <test-file-stub
               aria-hidden="true"
-              classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
+              classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
               focusable="false"
             />
           </button>
@@ -946,7 +946,7 @@ exports[`Nav renders editor version for mobile 1`] = `
         >
           <test-file-stub
             aria-hidden="true"
-            classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
+            classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
             focusable="false"
           />
         </button>

client/modules/IDE/components/jump-to-definition.js

@@ -0,0 +1,82 @@
+/* eslint-disable */
+import parseCodeVariables from './parseCodeVariables';
+import { getAST, getContext } from './rename-variable';
+const traverse = require('@babel/traverse').default;
+
+export function jumpToDefinition(pos) {
+  const cm = this._cm;
+  const token = cm.getTokenAt(pos);
+  const tokenType = token.type;
+
+  // Only act if it's a variable
+  if (!tokenType || !tokenType.includes('variable')) return;
+
+  const varName = token.string;
+
+  // Get full AST and variable scopes
+  const ast = getAST(cm);
+  const varScopeMap = parseCodeVariables(cm).varScopeMap || {};
+  const context = getContext(cm, ast, pos, varScopeMap);
+
+  if (!context || !varScopeMap[context] || !varScopeMap[context].has(varName)) {
+    console.warn(`Variable "${varName}" not found in context "${context}".`);
+    return;
+  }
+
+  // Now find the actual definition location using Babel traverse
+  const targetIndex = cm.indexFromPos(pos);
+  let found = false;
+
+  traverse(ast, {
+    VariableDeclarator(path) {
+      if (found) return;
+
+      const { node } = path;
+      if (
+        node.id.type === 'Identifier' &&
+        node.id.name === varName &&
+        node.loc
+      ) {
+        const defPos = cm.posFromIndex(node.start);
+        const defContext = getContext(cm, ast, defPos, varScopeMap);
+
+        if (defContext === context) {
+          found = true;
+          cm.setCursor(defPos);
+          cm.focus();
+        }
+      }
+    },
+
+    FunctionDeclaration(path) {
+      // Handle function parameters like: function foo(x) { x }
+      if (found) return;
+
+      const { node } = path;
+      if (!node.params || !node.loc) return;
+
+      for (const param of node.params) {
+        if (
+          param.type === 'Identifier' &&
+          param.name === varName &&
+          param.loc
+        ) {
+          const defPos = cm.posFromIndex(param.start);
+          const defContext = getContext(cm, ast, defPos, varScopeMap);
+
+          if (defContext === context) {
+            found = true;
+            cm.setCursor(defPos);
+            cm.focus();
+          }
+        }
+      }
+    }
+  });
+
+  if (!found) {
+    console.warn(
+      `Definition for "${varName}" not found in context "${context}".`
+    );
+  }
+}

client/modules/IDE/components/parseCodeVariables.js

@@ -212,6 +212,7 @@ function _parseCodeVariables(_cm) {
   };
 
   lastValidResult = result;
+  console.log('result=', result);
   return result;
 }
 

client/modules/IDE/components/rename-variable.js

@@ -25,7 +25,7 @@ export function handleRename(fromPos, oldName, newName, cm) {
   const matches = getMatches(cm, state, state.query);
 }
 
-function getContext(cm, ast, fromPos, varScopeMap) {
+export function getContext(cm, ast, fromPos, varScopeMap) {
   const posIndex = cm.indexFromPos(fromPos);
   let foundNode = null;
   let enclosingFunction = null;
@@ -140,7 +140,7 @@ function startRenaming(cm, ast, fromPos, newName, oldName) {
   });
 }
 
-function getAST(cm) {
+export function getAST(cm) {
   const code = cm.getValue();
   const cursor = cm.getCursor();
   const offset = cm.indexFromPos(cursor);

client/modules/IDE/pages/IDEView.jsx

@@ -27,6 +27,7 @@ import {
 } from '../components/Editor/MobileEditor';
 import IDEOverlays from '../components/IDEOverlays';
 import useIsMobile from '../hooks/useIsMobile';
+import Banner from '../components/Banner';
 import { P5VersionProvider } from '../hooks/useP5Version';
 
 function getTitle(project) {
@@ -105,6 +106,7 @@ const IDEView = () => {
   const [sidebarSize, setSidebarSize] = useState(160);
   const [isOverlayVisible, setIsOverlayVisible] = useState(false);
   const [MaxSize, setMaxSize] = useState(window.innerWidth);
+  const [displayBanner, setDisplayBanner] = useState(false);
 
   const cmRef = useRef({});
 
@@ -171,6 +173,7 @@ const IDEView = () => {
       <Helmet>
         <title>{getTitle(project)}</title>
       </Helmet>
+      {displayBanner && <Banner onClose={() => setDisplayBanner(false)} />}
       <IDEKeyHandlers getContent={() => cmRef.current?.getContent()} />
       <WarnIfUnsavedChanges />
       <Toast />