Skip to content

Commit

Permalink
Merge branch 'develop' into refactor/getProjectsForUser
Browse files Browse the repository at this point in the history
  • Loading branch information
raclim authored Jan 25, 2024
2 parents 4516a8c + dfa284b commit 102cb28
Show file tree
Hide file tree
Showing 246 changed files with 49,514 additions and 35,031 deletions.
11 changes: 10 additions & 1 deletion .babelrc
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,16 @@
"development": {
"plugins": [
"babel-plugin-styled-components",
"react-hot-loader/babel"
"react-refresh/babel"
],
"presets": [
[
"@babel/preset-react",
{
"development": true,
"runtime": "automatic"
}
]
]
}
},
Expand Down
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
2 changes: 1 addition & 1 deletion .eslintrc
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"extends": ["airbnb", "prettier"],
"extends": ["airbnb", "prettier", "plugin:storybook/recommended"],
"parser": "@babel/eslint-parser",
"env": {
"browser": true,
Expand Down
44 changes: 25 additions & 19 deletions .storybook/main.js
Original file line number Diff line number Diff line change
@@ -1,29 +1,35 @@
const path = require('path');

module.exports = {
/** @type { import('@storybook/react-webpack5').StorybookConfig } */
const config = {
stories: ['../client/**/*.stories.(jsx|mdx)'],
addons: [
'@storybook/addon-actions',
'@storybook/addon-docs',
'@storybook/addon-knobs',
'@storybook/addon-links',
'storybook-addon-theme-playground/dist/register'
'@storybook/addon-essentials',
'@storybook/addon-interactions'
],
webpackFinal: async config => {
// do mutation to the config

const rules = config.module.rules;

// modify storybook's file-loader rule to avoid conflicts with svgr
const fileLoaderRule = rules.find(rule => rule.test.test('.svg'));
fileLoaderRule.exclude = path.resolve(__dirname, '../client');
framework: {
name: '@storybook/react-webpack5',
options: {}
},
docs: {
autodocs: 'tag'
},
async webpackFinal(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$/

// use svgr for svg files
rules.push({
// configure .svg files to be loaded with @svgr/webpack
config.module.rules.push({
test: /\.svg$/,
use: ["@svgr/webpack"],
use: ['@svgr/webpack']
})

return config;
return config
},
};

export default config;


5 changes: 5 additions & 0 deletions .storybook/preview-head.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<script>
// https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/176#issuecomment-683150213
window.$RefreshReg$ = () => {};
window.$RefreshSig$ = () => () => {};
</script>
44 changes: 19 additions & 25 deletions .storybook/preview.js
Original file line number Diff line number Diff line change
@@ -1,31 +1,25 @@
import React from 'react';
import { addDecorator, addParameters } from '@storybook/react';
import { withKnobs } from "@storybook/addon-knobs";
import { withThemePlayground } from 'storybook-addon-theme-playground';
import { ThemeProvider } from "styled-components";
import { Provider } from 'react-redux';
import { MemoryRouter } from 'react-router';

import theme, { Theme } from '../client/theme';
import ThemeProvider from '../client/modules/App/components/ThemeProvider';
import configureStore from '../client/store';
import '../client/i18n-test';
import '../client/styles/storybook.css'

addDecorator(withKnobs);
const initialState = window.__INITIAL_STATE__;

const themeConfigs = Object.values(Theme).map(
name => {
return { name, theme: theme[name] };
}
);
const store = configureStore(initialState);

addDecorator(withThemePlayground({
theme: themeConfigs,
provider: ThemeProvider
}));
export const decorators = [
(Story) => (
<Provider store={store}>
<MemoryRouter>
<ThemeProvider>
<Story />
</ThemeProvider>
</MemoryRouter>
</Provider>
),
]

addParameters({
options: {
/**
* display the top-level grouping as a "root" in the sidebar
*/
showRoots: true,
},
})

// addDecorator(storyFn => <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>);
44 changes: 36 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,10 @@ The p5.js Editor is a collaborative project created by many individuals, mostly

Learn more about [our community](https://p5js.org/community/) and read our community statement and [code of conduct](./.github/CODE_OF_CONDUCT.md). You can directly support our work with p5.js by [donating to the Processing Foundation](https://processingfoundation.org/support).

## Get Started
## Getting Started

Make your first sketch in the [p5.js Editor](https://editor.p5js.org/)! Learn more about sketching with p5.js on the [Get Started](https://p5js.org/get-started/) and find everything you can do in the [Reference](https://p5js.org/reference/). You can also look at [examples](https://editor.p5js.org/p5/sketches) and remix them in the p5.js Editor.

## Setting Up the Development Environment

- Refer to [this documentation for setting up your environment](https://github.com/processing/p5.js-web-editor/blob/develop/contributor_docs/installation.md)



## Issues

Expand All @@ -31,10 +26,43 @@ If you have found a bug in the p5.js Web Editor, you can file it under the ["iss
* p5.sound: [https://github.com/processing/p5.js-sound/issues](https://github.com/processing/p5.js-sound/issues)
* p5.js website: [https://github.com/processing/p5.js-website/issues](https://github.com/processing/p5.js-website/issues)


### 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: [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!


### When Will the Next Production Release Be?

We will aim to deploy on a 1-2 month basis. Here are some dates we’re working towards:

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/).


## References for Contributing to the p5.js Web Editor

[Code of Conduct](https://editor.p5js.org/code-of-conduct)

[Contribution Guidelines for p5.js](https://p5js.org/contributor-docs/#/)

[Contribution Guidelines for the p5.js Web Editor](https://github.com/processing/p5.js-web-editor/tree/develop/contributor_docs)

[p5.js Community Statement](https://p5js.org/community/)


## Acknowledgements

Support for this project has come from [Processing Foundation](https://processingfoundation.org/), [NYU ITP](https://tisch.nyu.edu/itp), [CS4All, NYC DOE](http://cs4all.nyc/), [COSA at DU](https://liberalarts.du.edu/emergent-digital-practices/open-source-arts), [STUDIO for Creative Inquiry](https://studioforcreativeinquiry.org/), [Grant for the Web](https://www.grantfortheweb.org/), [New Media Rights](https://www.newmediarights.org/), and many others.

Hosting and technical support has come from: <br />
<a href="https://releasehub.com/" target="_blank"><img width="100" src="https://assets.website-files.com/603dd147c5b0a480611bd348/603dd147c5b0a469bc1bd451_logo--dark.svg" /></a>
Hosting and technical support has come from:
<br />
<br />
<a href="https://releasehub.com/" target="_blank"><img width="100" src="https://assets.website-files.com/603dd147c5b0a480611bd348/603dd147c5b0a469bc1bd451_logo--dark.svg" /></a>
<br />
<a href="https://www.browserstack.com/" target="_blank"><img width="100" src="https://user-images.githubusercontent.com/6063380/46976166-ab280a80-d096-11e8-983b-18dd38c8cc9b.png" /></a>
<br />
<a href="https://www.fastly.com/" target="_blank"><img width="100" src="https://cdn-assets-us.frontify.com/s3/frontify-enterprise-files-us/eyJwYXRoIjoiZmFzdGx5XC9hY2NvdW50c1wvYzJcLzQwMDEwMjNcL3Byb2plY3RzXC8xMVwvYXNzZXRzXC80ZVwvNzc0XC9lZTZmYzlkOWYzNWE1NjBkNjUzNjFkNGI0NGQ2MTNmZi0xNjIxNTIyODg4LnBuZyJ9:fastly:nVuY3PxyFqQMI6elJsMzxAGLH3IFlmiuMdacHAGRMkE?width=2400" /></a>
5 changes: 5 additions & 0 deletions client/browserHistory.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { createBrowserHistory } from 'history';

const browserHistory = createBrowserHistory();

export default browserHistory;
66 changes: 6 additions & 60 deletions client/common/Button.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Link } from 'react-router';
import { Link } from 'react-router-dom';

import { remSize, prop } from '../theme';

Expand All @@ -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
18 changes: 9 additions & 9 deletions client/common/Button.stories.jsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
import React from 'react';
import { action } from '@storybook/addon-actions';
import { boolean, text } from '@storybook/addon-knobs';

import Button from './Button';
import { GithubIcon, DropdownArrowIcon, PlusIcon } from './icons';

export default {
title: 'Common/Button',
component: Button
component: Button,
args: {
children: 'this is the button',
label: 'submit',
disabled: false
}
};

export const AllFeatures = () => (
<Button
disabled={boolean('disabled', false)}
type="submit"
label={text('label', 'submit')}
>
{text('children', 'this is the button')}
export const AllFeatures = (args) => (
<Button disabled={args.disabled} type="submit" label={args.label}>
{args.children}
</Button>
);

Expand Down
2 changes: 1 addition & 1 deletion client/common/ButtonOrLink.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { Link } from 'react-router';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';

/**
Expand Down
10 changes: 7 additions & 3 deletions client/common/ButtonOrLink.test.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { render, screen, fireEvent } from '../test-utils';
import { render, screen, fireEvent, waitFor, history } from '../test-utils';
import ButtonOrLink from './ButtonOrLink';

describe('ButtonOrLink', () => {
Expand All @@ -25,8 +25,12 @@ describe('ButtonOrLink', () => {
expect(link).toHaveAttribute('href', 'https://p5js.org');
});

it('can render an internal link with react-router', () => {
it('can render an internal link with react-router', async () => {
render(<ButtonOrLink href="/about">About</ButtonOrLink>);
// TODO: how can this be tested? Needs a router provider?

const link = screen.getByText('About');
fireEvent.click(link);

await waitFor(() => expect(history.location.pathname).toEqual('/about'));
});
});
Loading

0 comments on commit 102cb28

Please sign in to comment.