Skip to content

Commit d2ddf09

Browse files
authored
Merge branch 'develop' into newchange
2 parents 251d868 + 7982e3a commit d2ddf09

File tree

159 files changed

+8461
-3804
lines changed

Some content is hidden

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

159 files changed

+8461
-3804
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 December 22, 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/common/Button.jsx

Lines changed: 5 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ const displays = {
2121
const StyledButton = styled.button`
2222
&&& {
2323
font-weight: bold;
24-
display: flex;
24+
display: ${({ display }) =>
25+
display === displays.inline ? 'inline-flex' : 'flex'};
2526
justify-content: center;
2627
align-items: center;
2728
@@ -107,57 +108,6 @@ const StyledInlineButton = styled.button`
107108
}
108109
`;
109110

110-
const StyledIconButton = styled.button`
111-
&&& {
112-
display: flex;
113-
justify-content: center;
114-
align-items: center;
115-
116-
width: ${remSize(32)}px;
117-
height: ${remSize(32)}px;
118-
text-decoration: none;
119-
120-
color: ${({ kind }) => prop(`Button.${kind}.default.foreground`)};
121-
background-color: ${({ kind }) => prop(`Button.${kind}.hover.background`)};
122-
cursor: pointer;
123-
border: 1px solid transparent;
124-
border-radius: 50%;
125-
padding: ${remSize(8)} ${remSize(25)};
126-
line-height: 1;
127-
128-
&:hover:not(:disabled) {
129-
color: ${({ kind }) => prop(`Button.${kind}.hover.foreground`)};
130-
background-color: ${({ kind }) =>
131-
prop(`Button.${kind}.hover.background`)};
132-
133-
svg * {
134-
fill: ${({ kind }) => prop(`Button.${kind}.hover.foreground`)};
135-
}
136-
}
137-
138-
&:active:not(:disabled) {
139-
color: ${({ kind }) => prop(`Button.${kind}.active.foreground`)};
140-
background-color: ${({ kind }) =>
141-
prop(`Button.${kind}.active.background`)};
142-
143-
svg * {
144-
fill: ${({ kind }) => prop(`Button.${kind}.active.foreground`)};
145-
}
146-
}
147-
148-
&:disabled {
149-
color: ${({ kind }) => prop(`Button.${kind}.disabled.foreground`)};
150-
background-color: ${({ kind }) =>
151-
prop(`Button.${kind}.disabled.background`)};
152-
cursor: not-allowed;
153-
}
154-
155-
> * + * {
156-
margin-left: ${remSize(8)};
157-
}
158-
}
159-
`;
160-
161111
/**
162112
* A Button performs an primary action
163113
*/
@@ -184,12 +134,8 @@ const Button = ({
184134
);
185135
let StyledComponent = StyledButton;
186136

187-
if (display === displays.inline) {
188-
StyledComponent = StyledInlineButton;
189-
}
190-
191137
if (iconOnly) {
192-
StyledComponent = StyledIconButton;
138+
StyledComponent = StyledInlineButton;
193139
}
194140

195141
if (href) {
@@ -265,7 +211,7 @@ Button.propTypes = {
265211
/**
266212
* The display type of the button—inline or block
267213
*/
268-
display: PropTypes.string,
214+
display: PropTypes.oneOf(Object.values(displays)),
269215
/**
270216
* SVG icon to place after child content
271217
*/
@@ -286,7 +232,7 @@ Button.propTypes = {
286232
* Specifying an href will use an <a> to link to the URL
287233
*/
288234
href: PropTypes.string,
289-
/*
235+
/**
290236
* An ARIA Label used for accessibility
291237
*/
292238
'aria-label': PropTypes.string,

client/common/IconButton.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const IconButton = (props) => {
1919
return (
2020
<ButtonWrapper
2121
iconBefore={icon && <Icon />}
22+
iconOnly
2223
display={Button.displays.inline}
2324
focusable="false"
2425
{...otherProps}

client/components/AddRemoveButton.jsx

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

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/components/NavBasic.jsx

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

client/components/OverlayManager.jsx

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

client/components/PreviewNav.jsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,14 @@ const PreviewNav = ({ owner, project }) => {
1212
<nav className="nav preview-nav">
1313
<div className="nav__items-left">
1414
<div className="nav__item-logo">
15-
<LogoIcon
16-
role="img"
17-
aria-label={t('Common.p5logoARIA')}
18-
focusable="false"
19-
className="svg__logo"
20-
/>
15+
<Link to={`/${owner.username}/sketches`}>
16+
<LogoIcon
17+
role="img"
18+
aria-label={t('Common.p5logoARIA')}
19+
focusable="false"
20+
className="svg__logo"
21+
/>
22+
</Link>
2123
</div>
2224
<Link
2325
className="nav__item"

0 commit comments

Comments
 (0)