merge with develop and update to /common pr

Author: clairep94

.eslintrc

@@ -42,6 +42,7 @@
     "no-restricted-exports": 1,
     "no-underscore-dangle": 0,
     "no-useless-catch": 2,
+    "no-plusplus": "off",
     "prefer-object-spread": 0,
     "max-len": [1, 120, 2, {"ignoreComments": true, "ignoreTemplateLiterals": true}],
     "max-classes-per-file": 0,

README.md

@@ -10,6 +10,14 @@ We are a community of, and in solidarity with, people from every gender identity
 
 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).
 
+Stay in touch with Processing Foundation across other platforms: 
+- [Instagram](https://www.instagram.com/p5xjs)
+- [Youtube](https://www.youtube.com/@ProcessingFoundation)
+- [X](https://x.com/p5xjs)
+- Discord (invitation link coming soon!)
+- [Forum](https://discourse.processing.org)
+
+
 ## Using the p5.js Editor 🤔
 
 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/tutorials/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. 

client/common/Button.stories.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 
-import { Button } from './Button';
+import { Button, ButtonDisplays, ButtonKinds, ButtonTypes } from './Button';
 import { GithubIcon, DropdownArrowIcon, PlusIcon } from './icons';
 
 export default {
@@ -15,13 +15,13 @@ export default {
 };
 
 export const AllFeatures = (args) => (
-  <Button disabled={args.disabled} type="submit" label={args.label}>
+  <Button disabled={args.disabled} type={ButtonTypes.SUBMIT} label={args.label}>
     {args.children}
   </Button>
 );
 
 export const SubmitButton = () => (
-  <Button type="submit" label="submit">
+  <Button type={ButtonTypes.SUBMIT} label="submit">
     This is a submit button
   </Button>
 );
@@ -59,7 +59,7 @@ export const ButtonWithIconAfter = () => (
 );
 
 export const InlineButtonWithIconAfter = () => (
-  <Button iconAfter={<DropdownArrowIcon />} display={Button.displays.inline}>
+  <Button iconAfter={<DropdownArrowIcon />} display={ButtonDisplays.INLINE}>
     File name
   </Button>
 );
@@ -68,6 +68,6 @@ export const InlineIconOnlyButton = () => (
   <Button
     aria-label="Add to collection"
     iconBefore={<PlusIcon />}
-    display={Button.displays.inline}
+    display={ButtonDisplays.INLINE}
   />
 );

client/common/Button.tsx

@@ -3,19 +3,36 @@ import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 import { remSize, prop } from '../theme';
 
-enum Kinds {
-  primary = 'primary',
-  secondary = 'secondary'
+/**
+ * Enum for the visual style of a Button.
+ *
+ * These values transpile to lowercase strings (`'primary' | 'secondary'`)
+ * that map directly to keys in the `Button` object in `theme.js` for styling.
+ */
+export enum ButtonKinds {
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary'
 }
-
-enum Displays {
-  block = 'block',
-  inline = 'inline'
+/**
+ * Enum for the display type of a Button.
+ *
+ * These values transpile to lowercase strings (`'block' | 'inline'`)
+ * and map to display styles in the `Button` object in `theme.js`.
+ */
+export enum ButtonDisplays {
+  BLOCK = 'block',
+  INLINE = 'inline'
 }
-
-enum ButtonTypes {
-  button = 'button',
-  submit = 'submit'
+/**
+ * Enum for the native HTML button type.
+ *
+ * These values transpile to lowercase strings (`'button' | 'submit'`)
+ * and correspond to the `type` attribute on a native <button>.
+ * They can also be used in `theme.js` if needed for button-specific styles.
+ */
+export enum ButtonTypes {
+  BUTTON = 'button',
+  SUBMIT = 'submit'
 }
 
 export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
@@ -31,7 +48,7 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * The display type of the button—inline or block
    */
-  display?: Displays;
+  display?: ButtonDisplays;
   /**
    * SVG icon to place after child content
    */
@@ -47,7 +64,7 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * The kind of button - determines how it appears visually
    */
-  kind?: Kinds;
+  kind?: ButtonKinds;
   /**
    * Specifying an href will use an <a> to link to the URL
    */
@@ -69,15 +86,17 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
    */
   type?: ButtonTypes;
   /**
-   * Allows for IconButton to pass `focusable="false"` as a prop for SVGs.
-   * See @types/react > interface SVGAttributes<T> extends AriaAttributes, DOMAttributes<T>
+   * Controls whether the underlying SVG is focusable.
+   * Only relevant for IconButton (or buttons that render an SVG as content).
+   * In SVGs, the `focusable` attribute must be a string (`"true"` or `"false"`),
+   * but React will automatically convert a boolean prop to the correct string value.
    */
-  focusable?: boolean | 'true' | 'false';
+  focusable?: boolean;
 }
 
 interface StyledButtonProps extends ButtonProps {
-  kind: Kinds;
-  display: Displays;
+  kind: ButtonKinds;
+  display: ButtonDisplays;
 }
 
 // The '&&&' will increase the specificity of the
@@ -87,7 +106,7 @@ const StyledButton = styled.button<StyledButtonProps>`
   &&& {
     font-weight: bold;
     display: ${({ display }) =>
-      display === Displays.inline ? 'inline-flex' : 'flex'};
+      display === ButtonDisplays.INLINE ? 'inline-flex' : 'flex'};
     justify-content: center;
     align-items: center;
 
@@ -181,15 +200,15 @@ const StyledInlineButton = styled.button`
  */
 export const Button = ({
   children = null,
-  display = Displays.block,
+  display = ButtonDisplays.BLOCK,
   href,
-  kind = Kinds.primary,
+  kind = ButtonKinds.PRIMARY,
   iconBefore = null,
   iconAfter = null,
   iconOnly = false,
   'aria-label': ariaLabel,
   to,
-  type = ButtonTypes.button,
+  type = ButtonTypes.BUTTON,
   ...props
 }: ButtonProps) => {
   const hasChildren = React.Children.count(children) > 0;
@@ -249,6 +268,3 @@ export const Button = ({
     </StyledComponent>
   );
 };
-
-Button.kinds = Kinds;
-Button.displays = Displays;

client/common/IconButton.tsx

@@ -1,6 +1,6 @@
 import React, { ComponentType } from 'react';
 import styled from 'styled-components';
-import { Button, ButtonProps } from './Button';
+import { Button, ButtonProps, ButtonDisplays } from './Button';
 import { remSize } from '../theme';
 
 const ButtonWrapper = styled(Button)`
@@ -23,8 +23,8 @@ export const IconButton = ({ icon: Icon, ...otherProps }: IconButtonProps) => (
   <ButtonWrapper
     iconBefore={Icon ? <Icon /> : undefined}
     iconOnly
-    display={Button.displays.inline}
-    focusable="false"
+    display={ButtonDisplays.INLINE}
+    focusable={false}
     {...otherProps}
   />
 );

client/i18n.js

@@ -3,7 +3,7 @@ import { initReactI18next } from 'react-i18next';
 import Backend from 'i18next-http-backend';
 
 import {
-  be,
+  bn,
   enUS,
   es,
   ja,
@@ -21,12 +21,12 @@ import {
   enIN
 } from 'date-fns/locale';
 
-import getPreferredLanguage from './utils/language-utils';
+import { getPreferredLanguage } from './utils/language-utils';
 
 const fallbackLng = ['en-US'];
 
 export const availableLanguages = [
-  'be',
+  'bn',
   'de',
   'en-US',
   'es-419',
@@ -61,7 +61,7 @@ if (
 
 export function languageKeyToLabel(lang) {
   const languageMap = {
-    be: 'বাংলা',
+    bn: 'বাংলা',
     de: 'Deutsch',
     'en-US': 'English',
     'es-419': 'Español',
@@ -83,7 +83,7 @@ export function languageKeyToLabel(lang) {
 
 export function languageKeyToDateLocale(lang) {
   const languageMap = {
-    be,
+    bn,
     de,
     'en-US': enUS,
     'es-419': es,

client/modules/IDE/actions/assets.js

@@ -1,4 +1,4 @@
-import apiClient from '../../../utils/apiClient';
+import { apiClient } from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
 import { startLoader, stopLoader } from '../reducers/loading';
 import { assetsActions } from '../reducers/assets';

client/modules/IDE/actions/collections.js

@@ -1,5 +1,5 @@
 import browserHistory from '../../../browserHistory';
-import apiClient from '../../../utils/apiClient';
+import { apiClient } from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
 import { startLoader, stopLoader } from '../reducers/loading';
 import { setToastText, showToast } from './toast';

client/modules/IDE/actions/files.js

@@ -1,6 +1,6 @@
 import objectID from 'bson-objectid';
 import blobUtil from 'blob-util';
-import apiClient from '../../../utils/apiClient';
+import { apiClient } from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
 import {
   setUnsavedChanges,

client/modules/IDE/actions/preferences.js

@@ -1,5 +1,5 @@
 import i18next from 'i18next';
-import apiClient from '../../../utils/apiClient';
+import { apiClient } from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
 
 function updatePreferences(formParams, dispatch) {