Merge branch 'develop' into piyush/fix-auto-refresh-hover-effect

Author: lindapaiste

README.md

@@ -29,7 +29,7 @@ If you have found a bug in the p5.js Web Editor, you can file it under the ["iss
 
 ### How Do I Know My Issue or Pull Request is Getting Reviewed?
 
-To see which pull requests and issues are currently being reviewed, check the [PR Review Board](https://github.com/processing/p5.js-web-editor/projects/9) or the following Milestones: [PATCH Release](https://github.com/processing/p5.js-web-editor/milestone/9), [MINOR Release](https://github.com/processing/p5.js-web-editor/milestone/8). 
+To see which pull requests and issues are currently being reviewed, check the [PR Review Board](https://github.com/processing/p5.js-web-editor/projects/9) or the following Milestones: [PATCH Release](https://github.com/processing/p5.js-web-editor/milestone/10), [MINOR Release](https://github.com/processing/p5.js-web-editor/milestone/8). 
 
 Issues and Pull Requests categorized under the PATCH or MINOR Release Milestones will be prioritized since they are planned to be merged for the next release to Production. Please feel free to [comment on this pinned issue](https://github.com/processing/p5.js-web-editor/issues/2534) if you would like your issue to be considered for the next release!
 
@@ -38,11 +38,9 @@ Issues and Pull Requests categorized under the PATCH or MINOR Release Milestones
 
 We will aim to deploy on a 1-2 month basis. Here are some dates we’re working towards: 
 
-MINOR Release for [p5.js version 1.8.0](https://github.com/processing/p5.js/releases/tag/v1.8.0): By October 27, 2023
+2.9.3 PATCH Release: By November 17, 2023
 
-PATCH Release: By November 2, 2023
-
-MINOR Release: By November 30, 2023
+2.10.0 MINOR Release: By December 15, 2023
 
 [You can read more about Semantic Versioning and the differences between a MINOR and PATCH release](https://semver.org/). 
 

client/modules/IDE/actions/project.js

@@ -1,6 +1,6 @@
 import objectID from 'bson-objectid';
 import each from 'async/each';
-import isEqual from 'lodash/isEqual';
+import { isEqual } from 'lodash';
 import browserHistory from '../../../browserHistory';
 import apiClient from '../../../utils/apiClient';
 import getConfig from '../../../utils/getConfig';

client/modules/IDE/components/About.stories.jsx

@@ -0,0 +1,8 @@
+import About from './About';
+
+export default {
+  title: 'IDE/About',
+  component: About
+};
+
+export const Default = {};

client/modules/IDE/components/AddToCollectionSketchList.jsx

@@ -4,7 +4,7 @@ import { Helmet } from 'react-helmet';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { withTranslation } from 'react-i18next';
-// import find from 'lodash/find';
+// import { find } from 'lodash';
 import * as ProjectsActions from '../actions/projects';
 import * as CollectionsActions from '../actions/collections';
 import * as ToastActions from '../actions/toast';

client/modules/IDE/components/AssetList.jsx

@@ -107,15 +107,16 @@ class AssetListRowBase extends React.Component {
                 </button>
               </li>
               <li>
-                <Link
-                  to={asset.url}
+                <a
+                  href={asset.url}
                   target="_blank"
+                  rel="noreferrer"
                   onBlur={this.onBlurComponent}
                   onFocus={this.onFocusComponent}
                   className="asset-table__action-option"
                 >
                   {t('AssetList.OpenNewTab')}
-                </Link>
+                </a>
               </li>
             </ul>
           )}

client/modules/IDE/components/AssetPreview.stories.jsx

@@ -0,0 +1,13 @@
+import AssetPreview from './AssetPreview';
+
+export default {
+  title: 'IDE/AssetPreview',
+  component: AssetPreview
+};
+
+export const Default = {
+  args: {
+    url: 'https://p5js.org/assets/img/p5js.svg',
+    name: 'P5 Logo'
+  }
+};

client/modules/IDE/components/AssetSize.stories.jsx

@@ -0,0 +1,12 @@
+import AssetSize from './AssetSize';
+
+export default {
+  title: 'IDE/AssetSize',
+  component: AssetSize
+};
+
+export const Default = {
+  args: {
+    totalSize: 123
+  }
+};

client/modules/IDE/components/CollectionList/CollectionList.jsx

@@ -5,7 +5,7 @@ import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import classNames from 'classnames';
-import find from 'lodash/find';
+import { find } from 'lodash';
 import * as ProjectActions from '../../actions/project';
 import * as ProjectsActions from '../../actions/projects';
 import * as CollectionsActions from '../../actions/collections';

client/modules/IDE/components/Console.stories.jsx

@@ -0,0 +1,8 @@
+import Console from './Console';
+
+export default {
+  title: 'IDE/Console',
+  component: Console
+};
+
+export const Default = {};

client/modules/IDE/components/ConsoleInput.stories.jsx

@@ -0,0 +1,8 @@
+import ConsoleInput from './ConsoleInput';
+
+export default {
+  title: 'IDE/ConsoleInput',
+  component: ConsoleInput
+};
+
+export const Default = {};

client/modules/IDE/components/CopyableInput.stories.jsx

@@ -0,0 +1,12 @@
+import CopyableInput from './CopyableInput';
+
+export default {
+  title: 'IDE/CopyableInput',
+  component: CopyableInput
+};
+
+export const Default = {
+  args: {
+    value: 'Lorem Ipsum'
+  }
+};

client/modules/IDE/components/EditableInput.jsx

@@ -31,6 +31,9 @@ function EditableInput({
       inputRef.current?.focus();
     }
   }, [isEditing]);
+  React.useEffect(() => {
+    setCurrentValue(value);
+  }, [value]);
 
   function beginEditing() {
     setIsEditing(true);

client/modules/IDE/components/EditableInput.stories.jsx

@@ -0,0 +1,13 @@
+import EditableInput from './EditableInput';
+
+export default {
+  title: 'IDE/EditableInput',
+  component: EditableInput
+};
+
+export const Default = {
+  args: {
+    value: 'an@email.com',
+    label: 'Example'
+  }
+};

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

@@ -594,7 +594,8 @@ Editor.propTypes = {
   linewrap: PropTypes.bool.isRequired,
   lintMessages: PropTypes.arrayOf(
     PropTypes.shape({
-      severity: PropTypes.string.isRequired,
+      severity: PropTypes.oneOf(['error', 'hint', 'info', 'warning'])
+        .isRequired,
       line: PropTypes.number.isRequired,
       message: PropTypes.string.isRequired,
       id: PropTypes.number.isRequired

client/modules/IDE/components/EditorAccessibility.jsx

@@ -37,7 +37,8 @@ const EditorAccessibility = ({ lintMessages = [] }) => {
 EditorAccessibility.propTypes = {
   lintMessages: PropTypes.arrayOf(
     PropTypes.shape({
-      severity: PropTypes.string.isRequired,
+      severity: PropTypes.oneOf(['error', 'hint', 'info', 'warning'])
+        .isRequired,
       line: PropTypes.number.isRequired,
       message: PropTypes.string.isRequired,
       id: PropTypes.number.isRequired

client/modules/IDE/components/EditorAccessibility.unit.test.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { render, screen } from '../../../test-utils';
+
+import EditorAccessibility from './EditorAccessibility';
+
+describe('<EditorAccessibility />', () => {
+  it('renders empty message with no lines', () => {
+    render(<EditorAccessibility lintMessages={[]} />);
+
+    expect(
+      screen.getByRole('listitem', {
+        description: 'There are no lint messages'
+      })
+    ).toBeInTheDocument();
+  });
+
+  it('renders lint message', () => {
+    render(
+      <EditorAccessibility
+        lintMessages={[
+          {
+            severity: 'info',
+            line: '1',
+            message: 'foo',
+            id: '1a2b3c'
+          }
+        ]}
+      />
+    );
+
+    expect(
+      screen.queryByText('There are no lint messages')
+    ).not.toBeInTheDocument();
+
+    const listItem = screen.getByRole('listitem');
+    expect(listItem).toBeInTheDocument();
+    expect(listItem.textContent).toEqual('info in line1 :foo');
+  });
+});

client/modules/IDE/components/Feedback.stories.jsx

@@ -0,0 +1,8 @@
+import Feedback from './Feedback';
+
+export default {
+  title: 'IDE/Feedback',
+  component: Feedback
+};
+
+export const Default = {};

client/modules/IDE/components/FileUploader.stories.jsx

@@ -0,0 +1,8 @@
+import FileUploader from './FileUploader';
+
+export default {
+  title: 'IDE/FileUploader',
+  component: FileUploader
+};
+
+export const Default = {};

client/modules/IDE/components/FloatingActionButton.stories.jsx

@@ -0,0 +1,8 @@
+import FloatingActionButton from './FloatingActionButton';
+
+export default {
+  title: 'IDE/FloatingActionButton',
+  component: FloatingActionButton
+};
+
+export const Default = {};

client/modules/IDE/components/KeyboardShortcutModal.stories.jsx

@@ -0,0 +1,8 @@
+import KeyboardShortcutModal from './KeyboardShortcutModal';
+
+export default {
+  title: 'IDE/KeyboardShortcutModal',
+  component: KeyboardShortcutModal
+};
+
+export const Default = {};

client/modules/IDE/components/NewFileForm.stories.jsx

@@ -0,0 +1,8 @@
+import NewFileForm from './NewFileForm';
+
+export default {
+  title: 'IDE/NewFileForm',
+  component: NewFileForm
+};
+
+export const Default = {};

client/modules/IDE/components/NewFileModal.stories.jsx

@@ -0,0 +1,8 @@
+import NewFileModal from './NewFileModal';
+
+export default {
+  title: 'IDE/NewFileModal',
+  component: NewFileModal
+};
+
+export const Default = {};

client/modules/IDE/components/NewFolderForm.stories.jsx

@@ -0,0 +1,8 @@
+import NewFolderForm from './NewFolderForm';
+
+export default {
+  title: 'IDE/NewFolderForm',
+  component: NewFolderForm
+};
+
+export const Default = {};

client/modules/IDE/components/NewFolderModal.stories.jsx

@@ -0,0 +1,8 @@
+import NewFolderModal from './NewFolderModal';
+
+export default {
+  title: 'IDE/NewFolderModal',
+  component: NewFolderModal
+};
+
+export const Default = {};

client/modules/IDE/components/ShareModal.stories.jsx

@@ -0,0 +1,8 @@
+import ShareModal from './ShareModal';
+
+export default {
+  title: 'IDE/ShareModal',
+  component: ShareModal
+};
+
+export const Default = {};

client/modules/IDE/components/SketchList.stories.jsx

@@ -0,0 +1,25 @@
+import SketchList from './SketchList';
+
+export default {
+  title: 'IDE/SketchList',
+  component: SketchList
+};
+
+export const Default = {
+  args: {
+    user: {
+      username: 'Joe Blogs',
+      authenticated: true
+    },
+    username: 'Joe Blogs',
+    loading: false,
+    sketches: [
+      {
+        id: '1',
+        name: 'Play Sketch',
+        createdAt: Date.now().toString(),
+        updatedAt: Date.now().toString()
+      }
+    ]
+  }
+};

client/modules/IDE/components/UploadFileModal.stories.jsx

@@ -0,0 +1,8 @@
+import UploadFileModal from './UploadFileModal';
+
+export default {
+  title: 'IDE/UploadFileModal',
+  component: UploadFileModal
+};
+
+export const Default = {};

client/modules/IDE/hooks/useKeyDownHandlers.js

@@ -1,4 +1,4 @@
-import mapKeys from 'lodash/mapKeys';
+import { mapKeys } from 'lodash';
 import PropTypes from 'prop-types';
 import { useCallback, useEffect, useRef } from 'react';
 

client/modules/IDE/selectors/collections.js

@@ -1,7 +1,6 @@
 import { createSelector } from 'reselect';
 import differenceInMilliseconds from 'date-fns/differenceInMilliseconds';
-import find from 'lodash/find';
-import orderBy from 'lodash/orderBy';
+import { find, orderBy } from 'lodash';
 import { DIRECTION } from '../actions/sorting';
 
 const getCollections = (state) => state.collections;

client/modules/IDE/selectors/projects.js

@@ -1,6 +1,6 @@
 import { createSelector } from 'reselect';
 import differenceInMilliseconds from 'date-fns/differenceInMilliseconds';
-import orderBy from 'lodash/orderBy';
+import { orderBy } from 'lodash';
 import { DIRECTION } from '../actions/sorting';
 
 const getSketches = (state) => state.sketches;

client/modules/Legal/components/PolicyContainer.jsx

@@ -7,6 +7,7 @@ import { remSize, prop } from '../../../theme';
 
 const PolicyContainerMain = styled.main`
   max-width: ${remSize(700)};
+  min-height: 100vh;
   margin: 0 auto;
   padding: ${remSize(10)};
   line-height: 1.5em;

client/modules/User/components/APIKeyList.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import orderBy from 'lodash/orderBy';
+import { orderBy } from 'lodash';
 import { useTranslation } from 'react-i18next';
 
 import { APIKeyPropType } from './APIKeyForm';