Skip to content

Commit 3e9a151

Browse files
Akhilbisht798Akhilbisht798
authored
Merge branch 'develop' into PasswordSetting
2 parents 43cb4fe + 9bc4286 commit 3e9a151

File tree

108 files changed

+6655
-2336
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

108 files changed

+6655
-2336
lines changed

‎.storybook/decorator-theme.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { upperFirst } from 'lodash';
2+
import React from 'react';
3+
import styled, { ThemeProvider } from 'styled-components';
4+
import theme, { prop } from '../client/theme';
5+
6+
const PreviewArea = styled.div`
7+
background: ${prop('backgroundColor')};
8+
flex-grow: 1;
9+
padding: 2rem;
10+
& > h4 {
11+
margin-top: 0;
12+
color: ${prop('primaryTextColor')};
13+
}
14+
`;
15+
16+
const themeKeys = Object.keys(theme);
17+
18+
export const withThemeProvider = (Story, context) => {
19+
const setting = context.globals.theme;
20+
if (setting === 'all') {
21+
return (
22+
<div style={{ display: 'flex', flexWrap: 'wrap' }}>
23+
{Object.keys(theme).map((themeName) => (
24+
<ThemeProvider theme={theme[themeName]} key={themeName}>
25+
<PreviewArea className={themeName}>
26+
<h4>{upperFirst(themeName)}</h4>
27+
<Story />
28+
</PreviewArea>
29+
</ThemeProvider>
30+
))}
31+
</div>
32+
);
33+
} else {
34+
const themeName = setting;
35+
return (
36+
<ThemeProvider theme={theme[themeName]}>
37+
<PreviewArea className={themeName}>
38+
<Story />
39+
</PreviewArea>
40+
</ThemeProvider>
41+
);
42+
}
43+
};
44+
45+
export const themeToolbarItem = {
46+
description: 'Global theme for components',
47+
defaultValue: 'all',
48+
toolbar: {
49+
title: 'Theme',
50+
icon: 'mirror',
51+
items: [...themeKeys, 'all']
52+
}
53+
};

‎.storybook/preview.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import React from 'react';
22
import { Provider } from 'react-redux';
33
import { MemoryRouter } from 'react-router';
44

5-
import ThemeProvider from '../client/modules/App/components/ThemeProvider';
65
import configureStore from '../client/store';
76
import '../client/i18n-test';
87
import '../client/styles/storybook.css'
8+
import { withThemeProvider, themeToolbarItem } from './decorator-theme';
99

1010
const initialState = window.__INITIAL_STATE__;
1111

@@ -21,5 +21,9 @@ export const decorators = [
2121
</MemoryRouter>
2222
</Provider>
2323
),
24-
]
24+
withThemeProvider
25+
];
2526

27+
export const globalTypes = {
28+
theme: themeToolbarItem
29+
};

‎Dockerfile

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ FROM base as development
1010
ENV NODE_ENV development
1111
COPY package.json package-lock.json ./
1212
RUN npm install
13-
RUN npm rebuild node-sass
1413
COPY .babelrc index.js nodemon.json ./
1514
COPY ./webpack ./webpack
1615
COPY client ./client
@@ -27,6 +26,5 @@ FROM base as production
2726
ENV NODE_ENV=production
2827
COPY package.json package-lock.json index.js ./
2928
RUN npm install --production
30-
RUN npm rebuild node-sass
3129
COPY --from=build $APP_HOME/dist ./dist
3230
CMD ["npm", "run", "start:prod"]

‎README.md

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -31,17 +31,6 @@ If you have found a bug in the p5.js Web Editor, you can file it under the ["iss
3131

3232
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).
3333

34-
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!
35-
36-
37-
### When Will the Next Production Release Be?
38-
39-
We will aim to deploy on a 1-2 month basis. Here are some dates we’re working towards:
40-
41-
2.11.0 MINOR Release: By January 16, 2023
42-
43-
[You can read more about Semantic Versioning and the differences between a MINOR and PATCH release](https://semver.org/).
44-
4534

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

‎client/components/Dropdown/TableDropdown.jsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
11
import React from 'react';
2-
import { useMediaQuery } from 'react-responsive';
32
import styled from 'styled-components';
43
import { prop, remSize } from '../../theme';
54
import DropdownMenu from './DropdownMenu';
65

76
import DownFilledTriangleIcon from '../../images/down-filled-triangle.svg';
87
import MoreIconSvg from '../../images/more.svg';
8+
import useIsMobile from '../../modules/IDE/hooks/useIsMobile';
99

1010
const DotsHorizontal = styled(MoreIconSvg)`
1111
transform: rotate(90deg);
1212
`;
1313

1414
const TableDropdownIcon = () => {
15-
// TODO: centralize breakpoints
16-
const isMobile = useMediaQuery({ maxWidth: 770 });
17-
15+
const isMobile = useIsMobile();
1816
return isMobile ? (
1917
<DotsHorizontal focusable="false" aria-hidden="true" />
2018
) : (

‎client/constants.js

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -137,9 +137,6 @@ export const SET_SORT_PARAMS = 'SET_SORT_PARAMS';
137137
export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
138138
export const CLOSE_SKETCHLIST_MODAL = 'CLOSE_SKETCHLIST_MODAL';
139139

140-
export const START_LOADING = 'START_LOADING';
141-
export const STOP_LOADING = 'STOP_LOADING';
142-
143140
export const START_SAVING_PROJECT = 'START_SAVING_PROJECT';
144141
export const END_SAVING_PROJECT = 'END_SAVING_PROJECT';
145142

‎client/modules/App/components/ThemeProvider.jsx

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,18 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { connect } from 'react-redux';
3+
import { useSelector } from 'react-redux';
44
import { ThemeProvider } from 'styled-components';
5+
import theme from '../../../theme';
56

6-
import theme, { Theme } from '../../../theme';
7-
8-
const Provider = ({ children, currentTheme }) => (
9-
<ThemeProvider theme={{ ...theme[currentTheme] }}>{children}</ThemeProvider>
10-
);
7+
const Provider = ({ children }) => {
8+
const currentTheme = useSelector((state) => state.preferences.theme);
9+
return (
10+
<ThemeProvider theme={{ ...theme[currentTheme] }}>{children}</ThemeProvider>
11+
);
12+
};
1113

1214
Provider.propTypes = {
13-
children: PropTypes.node.isRequired,
14-
currentTheme: PropTypes.oneOf(Object.keys(Theme)).isRequired
15+
children: PropTypes.node.isRequired
1516
};
1617

17-
function mapStateToProps(state) {
18-
return {
19-
currentTheme: state.preferences.theme
20-
};
21-
}
22-
23-
export default connect(mapStateToProps)(Provider);
18+
export default Provider;

‎client/modules/IDE/actions/assets.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import apiClient from '../../../utils/apiClient';
22
import * as ActionTypes from '../../../constants';
3-
import { startLoader, stopLoader } from './loader';
3+
import { startLoader, stopLoader } from '../reducers/loading';
44
import { assetsActions } from '../reducers/assets';
55

66
const { setAssets, deleteAsset } = assetsActions;

‎client/modules/IDE/actions/collections.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import browserHistory from '../../../browserHistory';
22
import apiClient from '../../../utils/apiClient';
33
import * as ActionTypes from '../../../constants';
4-
import { startLoader, stopLoader } from './loader';
4+
import { startLoader, stopLoader } from '../reducers/loading';
55
import { setToastText, showToast } from './toast';
66

77
const TOAST_DISPLAY_TIME_MS = 1500;
@@ -80,7 +80,7 @@ export function addToCollection(collectionId, projectId) {
8080

8181
const collectionName = response.data.name;
8282

83-
dispatch(setToastText(`Added to "${collectionName}`));
83+
dispatch(setToastText(`Added to "${collectionName}"`));
8484
dispatch(showToast(TOAST_DISPLAY_TIME_MS));
8585

8686
return response.data;
@@ -110,7 +110,7 @@ export function removeFromCollection(collectionId, projectId) {
110110

111111
const collectionName = response.data.name;
112112

113-
dispatch(setToastText(`Removed from "${collectionName}`));
113+
dispatch(setToastText(`Removed from "${collectionName}"`));
114114
dispatch(showToast(TOAST_DISPLAY_TIME_MS));
115115

116116
return response.data;

‎client/modules/IDE/actions/loader.js

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎client/modules/IDE/actions/projects.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import apiClient from '../../../utils/apiClient';
22
import * as ActionTypes from '../../../constants';
3-
import { startLoader, stopLoader } from './loader';
3+
import { startLoader, stopLoader } from '../reducers/loading';
44

55
// eslint-disable-next-line
66
export function getProjects(username) {

‎client/modules/IDE/actions/projects.unit.test.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { rest } from 'msw';
55

66
import * as ProjectActions from './projects';
77
import * as ActionTypes from '../../../constants';
8+
import { startLoader, stopLoader } from '../reducers/loading';
89
import {
910
initialTestState,
1011
mockProjects
@@ -33,9 +34,9 @@ describe('projects action creator tests', () => {
3334
store = mockStore(initialTestState);
3435

3536
const expectedActions = [
36-
{ type: ActionTypes.START_LOADING },
37+
{ type: startLoader.type },
3738
{ type: ActionTypes.SET_PROJECTS, projects: mockProjects },
38-
{ type: ActionTypes.STOP_LOADING }
39+
{ type: stopLoader.type }
3940
];
4041

4142
return store

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,20 @@ function About(props) {
162162
{t('About.Discord')}
163163
</a>
164164
</p>
165+
<p className="about__content-column-list">
166+
<a
167+
href="https://p5js.org/download/support.html"
168+
target="_blank"
169+
rel="noopener noreferrer"
170+
>
171+
<AsteriskIcon
172+
className="about__content-column-asterisk"
173+
aria-hidden="true"
174+
focusable="false"
175+
/>
176+
Donate
177+
</a>
178+
</p>
165179
<p className="about__content-column-list">
166180
<Link to="/privacy-policy">
167181
<AsteriskIcon

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -338,7 +338,7 @@ class Editor extends React.Component {
338338
mode = 'application/json';
339339
} else if (fileName.match(/.+\.(frag|glsl)$/i)) {
340340
mode = 'x-shader/x-fragment';
341-
} else if (fileName.match(/.+\.(vert|stl)$/i)) {
341+
} else if (fileName.match(/.+\.(vert|stl|mtl)$/i)) {
342342
mode = 'x-shader/x-vertex';
343343
} else {
344344
mode = 'text/plain';

‎client/modules/IDE/components/Header/Nav.jsx

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { sortBy } from 'lodash';
44
import { Link } from 'react-router-dom';
55
import PropTypes from 'prop-types';
66
import { useTranslation } from 'react-i18next';
7-
import MediaQuery from 'react-responsive';
87
import NavDropdownMenu from '../../../../components/Nav/NavDropdownMenu';
98
import NavMenuItem from '../../../../components/Nav/NavMenuItem';
109
import { availableLanguages, languageKeyToLabel } from '../../../../i18n';
@@ -30,21 +29,20 @@ import {
3029
import { logoutUser } from '../../../User/actions';
3130
import { CmControllerContext } from '../../pages/IDEView';
3231
import MobileNav from './MobileNav';
32+
import useIsMobile from '../../hooks/useIsMobile';
3333

34-
const Nav = ({ layout }) => (
35-
<MediaQuery minWidth={770}>
36-
{(matches) =>
37-
matches ? (
38-
<NavBar>
39-
<LeftLayout layout={layout} />
40-
<UserMenu />
41-
</NavBar>
42-
) : (
43-
<MobileNav />
44-
)
45-
}
46-
</MediaQuery>
47-
);
34+
const Nav = ({ layout }) => {
35+
const isMobile = useIsMobile();
36+
37+
return isMobile ? (
38+
<MobileNav />
39+
) : (
40+
<NavBar>
41+
<LeftLayout layout={layout} />
42+
<UserMenu />
43+
</NavBar>
44+
);
45+
};
4846

4947
Nav.propTypes = {
5048
layout: PropTypes.oneOf(['dashboard', 'project'])

‎client/modules/IDE/components/Header/index.jsx

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,22 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import { useSelector } from 'react-redux';
4-
import MediaQuery from 'react-responsive';
4+
import useIsMobile from '../../hooks/useIsMobile';
5+
56
import Nav from './Nav';
67
import Toolbar from './Toolbar';
78

89
const Header = (props) => {
910
const project = useSelector((state) => state.project);
1011

12+
const isMobile = useIsMobile();
13+
1114
return (
1215
<header>
1316
<Nav />
14-
<MediaQuery minWidth={770}>
15-
{(matches) => {
16-
if (matches)
17-
return (
18-
<Toolbar
19-
syncFileContent={props.syncFileContent}
20-
key={project.id}
21-
/>
22-
);
23-
return null;
24-
}}
25-
</MediaQuery>
17+
{!isMobile && (
18+
<Toolbar syncFileContent={props.syncFileContent} key={project.id} />
19+
)}
2620
</header>
2721
);
2822
};

‎client/modules/IDE/components/IDEOverlays.jsx

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,6 @@ export default function IDEOverlays() {
3434
preferencesIsVisible,
3535
keyboardShortcutVisible,
3636
shareModalVisible,
37-
shareModalProjectId,
38-
shareModalProjectName,
39-
shareModalProjectUsername,
4037
errorType,
4138
previousPath
4239
} = useSelector((state) => state.ide);
@@ -87,11 +84,7 @@ export default function IDEOverlays() {
8784
ariaLabel={t('IDEView.ShareARIA')}
8885
closeOverlay={() => dispatch(closeShareModal())}
8986
>
90-
<ShareModal
91-
projectId={shareModalProjectId}
92-
projectName={shareModalProjectName}
93-
ownerUsername={shareModalProjectUsername}
94-
/>
87+
<ShareModal />
9588
</Overlay>
9689
)}
9790
{keyboardShortcutVisible && (

0 commit comments

Comments
 (0)