Skip to content

Commit

Permalink
Merge branch 'develop' into project-og-title
Browse files Browse the repository at this point in the history
  • Loading branch information
raclim committed Jan 11, 2024
2 parents 6732753 + e7914d7 commit 783a9a0
Show file tree
Hide file tree
Showing 123 changed files with 3,611 additions and 4,079 deletions.
1 change: 0 additions & 1 deletion .env.example
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ MAILGUN_KEY=<your-mailgun-api-key>
ML5_LIBRARY_USERNAME=ml5
ML5_LIBRARY_EMAIL=[email protected]
ML5_LIBRARY_PASS=helloml5
MOBILE_ENABLED=true
MONGO_URL=mongodb://localhost:27017/p5js-web-editor
PORT=8000
PREVIEW_PORT=8002
Expand Down
8 changes: 2 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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: [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!

Expand All @@ -38,11 +38,7 @@ 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

PATCH Release: By November 2, 2023

MINOR Release: By November 30, 2023
2.11.0 MINOR Release: By January 16, 2023

[You can read more about Semantic Versioning and the differences between a MINOR and PATCH release](https://semver.org/).

Expand Down
64 changes: 5 additions & 59 deletions client/common/Button.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ const displays = {
const StyledButton = styled.button`
&&& {
font-weight: bold;
display: flex;
display: ${({ display }) =>
display === displays.inline ? 'inline-flex' : 'flex'};
justify-content: center;
align-items: center;
Expand Down Expand Up @@ -107,57 +108,6 @@ const StyledInlineButton = styled.button`
}
`;

const StyledIconButton = styled.button`
&&& {
display: flex;
justify-content: center;
align-items: center;
width: ${remSize(32)}px;
height: ${remSize(32)}px;
text-decoration: none;
color: ${({ kind }) => prop(`Button.${kind}.default.foreground`)};
background-color: ${({ kind }) => prop(`Button.${kind}.hover.background`)};
cursor: pointer;
border: 1px solid transparent;
border-radius: 50%;
padding: ${remSize(8)} ${remSize(25)};
line-height: 1;
&:hover:not(:disabled) {
color: ${({ kind }) => prop(`Button.${kind}.hover.foreground`)};
background-color: ${({ kind }) =>
prop(`Button.${kind}.hover.background`)};
svg * {
fill: ${({ kind }) => prop(`Button.${kind}.hover.foreground`)};
}
}
&:active:not(:disabled) {
color: ${({ kind }) => prop(`Button.${kind}.active.foreground`)};
background-color: ${({ kind }) =>
prop(`Button.${kind}.active.background`)};
svg * {
fill: ${({ kind }) => prop(`Button.${kind}.active.foreground`)};
}
}
&:disabled {
color: ${({ kind }) => prop(`Button.${kind}.disabled.foreground`)};
background-color: ${({ kind }) =>
prop(`Button.${kind}.disabled.background`)};
cursor: not-allowed;
}
> * + * {
margin-left: ${remSize(8)};
}
}
`;

/**
* A Button performs an primary action
*/
Expand All @@ -184,12 +134,8 @@ const Button = ({
);
let StyledComponent = StyledButton;

if (display === displays.inline) {
StyledComponent = StyledInlineButton;
}

if (iconOnly) {
StyledComponent = StyledIconButton;
StyledComponent = StyledInlineButton;
}

if (href) {
Expand Down Expand Up @@ -265,7 +211,7 @@ Button.propTypes = {
/**
* The display type of the button—inline or block
*/
display: PropTypes.string,
display: PropTypes.oneOf(Object.values(displays)),
/**
* SVG icon to place after child content
*/
Expand All @@ -286,7 +232,7 @@ Button.propTypes = {
* Specifying an href will use an <a> to link to the URL
*/
href: PropTypes.string,
/*
/**
* An ARIA Label used for accessibility
*/
'aria-label': PropTypes.string,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import Button from '../../common/Button';
import { remSize } from '../../theme';
import Button from './Button';
import { remSize } from '../theme';

const ButtonWrapper = styled(Button)`
width: ${remSize(48)};
Expand All @@ -19,6 +19,7 @@ const IconButton = (props) => {
return (
<ButtonWrapper
iconBefore={icon && <Icon />}
iconOnly
display={Button.displays.inline}
focusable="false"
{...otherProps}
Expand Down
25 changes: 25 additions & 0 deletions client/common/RouterTab.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import PropTypes from 'prop-types';
import React from 'react';
import { NavLink } from 'react-router-dom';

/**
* Wraps the react-router `NavLink` with dashboard-header__tab styling.
*/
const Tab = ({ children, to }) => (
<li className="dashboard-header__tab">
<NavLink
className="dashboard-header__tab__title"
activeClassName="dashboard-header__tab--selected"
to={{ pathname: to, state: { skipSavingPath: true } }}
>
{children}
</NavLink>
</li>
);

Tab.propTypes = {
children: PropTypes.string.isRequired,
to: PropTypes.string.isRequired
};

export default Tab;
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import mapKeys from 'lodash/mapKeys';
import { mapKeys } from 'lodash';
import PropTypes from 'prop-types';
import { useCallback, useEffect, useRef } from 'react';

Expand Down
45 changes: 45 additions & 0 deletions client/common/useModalClose.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { useEffect, useRef } from 'react';
import useKeyDownHandlers from './useKeyDownHandlers';

/**
* Common logic for Modal, Overlay, etc.
*
* Pass in the `onClose` handler.
*
* Can optionally pass in a ref, in case the `onClose` function needs to use the ref.
*
* Calls the provided `onClose` function on:
* - Press Escape key.
* - Click outside the element.
*
* Returns a ref to attach to the outermost element of the modal.
*
* @param {() => void} onClose
* @param {React.MutableRefObject<HTMLElement | null>} [passedRef]
* @return {React.MutableRefObject<HTMLElement | null>}
*/
export default function useModalClose(onClose, passedRef) {
const createdRef = useRef(null);
const modalRef = passedRef || createdRef;

useEffect(() => {
modalRef.current?.focus();

function handleClick(e) {
// ignore clicks on the component itself
if (modalRef.current && !modalRef.current.contains(e.target)) {
onClose?.();
}
}

document.addEventListener('click', handleClick, false);

return () => {
document.removeEventListener('click', handleClick, false);
};
}, [onClose, modalRef]);

useKeyDownHandlers({ escape: onClose });

return modalRef;
}
5 changes: 3 additions & 2 deletions client/components/Dropdown.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { remSize, prop } from '../theme';
import IconButton from './mobile/IconButton';
import IconButton from '../common/IconButton';

const DropdownWrapper = styled.ul`
export const DropdownWrapper = styled.ul`
background-color: ${prop('Modal.background')};
border: 1px solid ${prop('Modal.border')};
box-shadow: 0 0 18px 0 ${prop('shadowColor')};
Expand Down Expand Up @@ -52,6 +52,7 @@ const DropdownWrapper = styled.ul`
& button span,
& a {
padding: ${remSize(8)} ${remSize(16)};
font-size: ${remSize(12)};
}
* {
Expand Down
96 changes: 96 additions & 0 deletions client/components/Dropdown/DropdownMenu.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
import PropTypes from 'prop-types';
import React, { forwardRef, useCallback, useRef, useState } from 'react';
import useModalClose from '../../common/useModalClose';
import DownArrowIcon from '../../images/down-filled-triangle.svg';
import { DropdownWrapper } from '../Dropdown';

// TODO: enable arrow keys to navigate options from list

const DropdownMenu = forwardRef(
(
{ children, anchor, 'aria-label': ariaLabel, align, className, classes },
ref
) => {
// Note: need to use a ref instead of a state to avoid stale closures.
const focusedRef = useRef(false);

const [isOpen, setIsOpen] = useState(false);

const close = useCallback(() => setIsOpen(false), [setIsOpen]);

const anchorRef = useModalClose(close, ref);

const toggle = useCallback(() => {
setIsOpen((prevState) => !prevState);
}, [setIsOpen]);

const handleFocus = () => {
focusedRef.current = true;
};

const handleBlur = () => {
focusedRef.current = false;
setTimeout(() => {
if (!focusedRef.current) {
close();
}
}, 200);
};

return (
<div ref={anchorRef} className={className}>
<button
className={classes.button}
aria-label={ariaLabel}
tabIndex="0"
onClick={toggle}
onBlur={handleBlur}
onFocus={handleFocus}
>
{anchor ?? <DownArrowIcon focusable="false" aria-hidden="true" />}
</button>
{isOpen && (
<DropdownWrapper
className={classes.list}
align={align}
onMouseUp={() => {
setTimeout(close, 0);
}}
onBlur={handleBlur}
onFocus={handleFocus}
>
{children}
</DropdownWrapper>
)}
</div>
);
}
);

DropdownMenu.propTypes = {
/**
* Provide <MenuItem> elements as children to control the contents of the menu.
*/
children: PropTypes.node.isRequired,
/**
* Can optionally override the contents of the button which opens the menu.
* Defaults to <DownArrowIcon>
*/
anchor: PropTypes.node,
'aria-label': PropTypes.string.isRequired,
align: PropTypes.oneOf(['left', 'right']),
className: PropTypes.string,
classes: PropTypes.shape({
button: PropTypes.string,
list: PropTypes.string
})
};

DropdownMenu.defaultProps = {
anchor: null,
align: 'right',
className: '',
classes: {}
};

export default DropdownMenu;
35 changes: 35 additions & 0 deletions client/components/Dropdown/MenuItem.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import PropTypes from 'prop-types';
import React from 'react';
import ButtonOrLink from '../../common/ButtonOrLink';

// TODO: combine with NavMenuItem

function MenuItem({ hideIf, ...rest }) {
if (hideIf) {
return null;
}

return (
<li>
<ButtonOrLink {...rest} />
</li>
);
}

MenuItem.propTypes = {
...ButtonOrLink.propTypes,
onClick: PropTypes.func,
value: PropTypes.string,
/**
* Provides a way to deal with optional items.
*/
hideIf: PropTypes.bool
};

MenuItem.defaultProps = {
onClick: null,
value: null,
hideIf: false
};

export default MenuItem;
Loading

0 comments on commit 783a9a0

Please sign in to comment.