Skip to content

Commit

Permalink
Merge branch 'master' into dependabot/npm_and_yarn/scripts/bot/puppet…
Browse files Browse the repository at this point in the history
…eer-1.13.0
  • Loading branch information
robertlong committed Feb 19, 2021
2 parents 58625ca + bb0efe1 commit 1d6eac7
Show file tree
Hide file tree
Showing 563 changed files with 53,705 additions and 26,302 deletions.
59 changes: 32 additions & 27 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -1,37 +1,42 @@
{
"presets": [
"@babel/react",
["@babel/env", {
"exclude": ["transform-regenerator"],
"targets": {
"browsers": [
"last 2 major versions",
"not <= 0.5%",
"not dead",

// No WebRTC support (including datachannels)
"not ios_saf < 11",
"not safari < 11",
"not ie >= 0",
"not edge >= 0",
"not ie_mob >= 0",
"not and_uc >= 0",

// No WebGL or WebRTC support
"not op_mini all"
]
},
// false = do not polyfill stuff unneccessarily
"useBuiltIns": false
}]
[
"@babel/env",
{
"exclude": [
"transform-regenerator"
],
"targets": {
"browsers": [
"last 2 major versions",
"not <= 0.5%",
"not dead",
// No WebRTC support (including datachannels)
"not ios_saf < 11",
"not safari < 11",
"not ie >= 0",
"not edge >= 0",
"not ie_mob >= 0",
"not and_uc >= 0",
// No WebGL or WebRTC support
"not op_mini all"
]
},
// false = do not polyfill stuff unneccessarily
"useBuiltIns": false
}
]
],
"plugins": [
[ "react-intl", { "messagesDir": "./public/messages", "enforceDescriptions": false } ],
// TODO: When i18n build pipeline is finished move to: [ "react-intl", { "removeDefaultMessage": true } ]
"react-intl",
"transform-react-jsx-img-import",
"@babel/proposal-class-properties",
["@babel/proposal-class-properties", { "loose": true }],
"@babel/proposal-object-rest-spread",
// Samsung Internet on the Oculus Go version is stuck at version 5.2, which is a
// Chromium 51, as of this writing. It needs babel to transpile async/await.
"@babel/plugin-transform-async-to-generator"
"@babel/plugin-transform-async-to-generator",
"@babel/plugin-proposal-optional-chaining"
]
}
}
38 changes: 33 additions & 5 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
version: 2
jobs:
build:
docker:
- image: circleci/node:10-browsers
version: 2.1

aliases:
- &defaults
working_directory: ~/repo
docker:
- image: circleci/node:14.5-browsers

jobs:
build_and_test:
<<: *defaults
steps:
- checkout
- restore_cache:
Expand All @@ -18,3 +23,26 @@ jobs:
- run: npm test
- store_artifacts:
path: dist
- persist_to_workspace:
root: .
paths:
- node_modules
deploy_storybook:
<<: *defaults
steps:
- checkout
- attach_workspace:
at: .
- run: npm run deploy-storybook -- --ci

workflows:
version: 2
build_test_and_deploy_storybook:
jobs:
- build_and_test
- deploy_storybook:
requires:
- build_and_test
filters:
branches:
only: room-ui-redesign
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
!.eslintrc.js
src/vendor/*
src/loaders/basis_transcoder.worker.js
scripts/bot/node_modules/
27 changes: 25 additions & 2 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ module.exports = {
AFRAME: true,
NAF: true
},
plugins: ["prettier", "react", "react-hooks"],
plugins: ["prettier", "react", "react-hooks", "@calm/react-intl"],
rules: {
"prettier/prettier": "error",
"prefer-const": "error",
Expand All @@ -20,7 +20,30 @@ module.exports = {
// Light console usage is useful but remove debug logs before merging to master.
"no-console": "off",
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn"
"react-hooks/exhaustive-deps": "warn",
// TODO: Move to throwing lint errors for react-intl once migration is complete
"@calm/react-intl/missing-formatted-message": [
"warn",
{
noTrailingWhitespace: true,
ignoreLinks: true,
enforceLabels: true,
enforceImageAlts: true,
enforceInputProps: false
}
],
"@calm/react-intl/missing-attribute": [
"warn",
{
noTrailingWhitespace: true,
noSpreadOperator: true,
requireDescription: false,
formatDefineMessages: true,
requireIdAsString: true,
requireDefaultMessage: true
}
],
"@calm/react-intl/missing-values": "warn"
},
extends: ["prettier", "plugin:react/recommended", "eslint:recommended"]
};
2 changes: 1 addition & 1 deletion .github/ISSUE_TEMPLATE/bug_report.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ If applicable, add screenshots to help explain your problem.
**Hardware** <!-- Please complete the following information -->
- Device: [e.g. Desktop, phone, VR headset]
- OS: [e.g. Windows, iOS, Linux]
- Browser [e.g. Firefox]
- Browser: [e.g. Firefox]

**Additional context**
Add any other context about the problem here.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -65,3 +65,5 @@ dist/
certs/
results/
.ret.credentials
src/assets/locales/en.json
src/assets/locales/extracted-messages.json
52 changes: 52 additions & 0 deletions .storybook/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
const path = require("path");

module.exports = {
stories: ["../src/react-components/**/*.stories.mdx", "../src/react-components/**/*.stories.js"],
addons: ["@storybook/addon-links", "@storybook/addon-essentials", "storybook-addon-designs"],
webpackFinal: async config => {
config.module.rules.push({
test: /\.scss$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: "1",
localIdentName: "[name]__[local]___[hash:base64:5]",
modules: true,
camelCase: true
}
},
"sass-loader"
],
include: path.resolve(__dirname, "..", "src")
});

const fileLoaderRule = config.module.rules.find(rule => rule.test.test(".svg"));
fileLoaderRule.exclude = /\.svg$/;
config.module.rules.push({
test: /\.svg$/,
use: [
{
loader: "@svgr/webpack",
options: {
titleProp: true,
replaceAttrValues: { "#000": "{props.color}" },
template: require("../src/react-components/icons/IconTemplate"),
svgoConfig: {
plugins: {
removeViewBox: false,
mergePaths: false,
convertShapeToPath: false,
removeHiddenElems: false
}
}
}
},
"url-loader"
]
});

return config;
}
};
7 changes: 7 additions & 0 deletions .storybook/preview-head.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<!-- Add extra elements to the head of the preview iframe here. -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
<style>
.sb-show-main {
padding: 0 !important;
}
</style>
58 changes: 58 additions & 0 deletions .storybook/preview.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import React, { useEffect } from "react";
import { useAccessibleOutlineStyle } from "../src/react-components/input/useAccessibleOutlineStyle";
import "../src/react-components/styles/global.scss";
import { WrappedIntlProvider } from "../src/react-components/wrapped-intl-provider";
import { MINIMAL_VIEWPORTS } from "@storybook/addon-viewport";
import { AVAILABLE_LOCALES } from "../src/assets/locales/locale_config";
import { setLocale } from "../src/utils/i18n";

const Layout = ({ children, locale }) => {
useAccessibleOutlineStyle();

useEffect(
() => {
setLocale(locale);
},
[locale]
);

return <WrappedIntlProvider>{children}</WrappedIntlProvider>;
};

export const decorators = [
(Story, context) => (
<Layout locale={context.globals.locale}>
<Story />
</Layout>
)
];

export const parameters = {
viewport: {
viewports: {
...MINIMAL_VIEWPORTS,
oculusQuest: {
name: "Oculus Quest",
styles: {
width: "800px",
height: "450px"
}
}
}
}
};

const locales = Object.entries(AVAILABLE_LOCALES).map(([value, title]) => ({ title, value }));
locales.unshift({ title: "Browser Default", value: "browser" });

export const globalTypes = {
locale: {
name: "Locale",
description: "Active locale",
defaultValue: "browser",
toolbar: {
icon: "globe",
items: locales
}
}
};
46 changes: 32 additions & 14 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ The following GitHub projects are part of the Hubs platform and governed by thes

## Quick Start

We are happy to receive contributions to the Hubs platform in a number of different ways as outlined below. Please note that all contributions are subject to approval by the project maintainers. We ask (but do not require) that those interested in contributing to Hubs consider joining the public [Hubs Discord server](https://discord.gg/wHmY4nd) to connect with the dev team, ask questions, and view discussions about work being done on the project.
We are happy to receive contributions to the Hubs platform in a number of different ways as outlined below. Please note that all contributions are subject to approval by the project maintainers. We ask (but do not require) that those interested in contributing to Hubs consider joining the public [Hubs Discord server](https://discord.gg/dFJncWwHun) to connect with the dev team, ask questions, and view discussions about work being done on the project.

### 💻 Code Contributions
Hubs has a client-server architecture that gives multiple users the ability to connect to a shared room on the server. If you are interested in contributing to the Hubs client, continue on to the [development workflow guide](#development-workflow) to get started. If you want to contribute to the networking or infrastructure, consider looking at the [reticulum](https://github.com/mozilla/reticulum) or [janus](https://github.com/mozilla/janus-plugin-sfu) repositories. If you are interested in working on the code for Spoke, the 3D editor used to create custom environments for Hubs rooms, explore the [Spoke](https://github.com/mozilla/spoke) repository.
Expand Down Expand Up @@ -60,7 +60,7 @@ Our documentation for Hubs is hosted on the [GitHub Hubs Wiki](https://github.co
If you would like to add/update a localization translation for Hubs, please see the [Localization README](src/assets/locales/README.md). Then, please submit a pull request with your new/updated localization changes.

### 🦆 General Help
We believe in the power of community (that's why we're building this, after all!) and know that not all forms of support will come from something outlined here. Feel free to jump into our public [Discord server](https://discord.gg/wHmY4nd) to chat with us and ask about how you can get involved!
We believe in the power of community (that's why we're building this, after all!) and know that not all forms of support will come from something outlined here. Feel free to jump into our public [Discord server](https://discord.gg/dFJncWwHun) to chat with us and ask about how you can get involved!

## Development Workflow

Expand Down Expand Up @@ -122,7 +122,13 @@ The testing process for Hubs is mostly a manual one. You need to test your chang

The Hubs team has a more in-depth testing and release process internally, but we don't have any additional testing process for external contributors at this time.

### 5. High Level Project Organization

### 5. Modifying The 2-D Sprite Graphics

To update the 2-D sprite graphics, you must (manually) install [ImageMagick](https://imagemagick.org/script/download.php) to your command line. See `doc/spritesheet-generation.md` for further details


### 6. High Level Project Organization

```
hubs/
Expand Down Expand Up @@ -153,11 +159,11 @@ hubs/
scene.html <- Scene Page html template
scene.js <- Scene Page js entry point
```
### 6. Testing on an HMD
### 7. Testing on an HMD

The simplest way to test on an HMD is to use `npm run dev` from Step 2 above while having 8080 port traffic on your device point to you local dev instance's port 8080. In order to do that, you'll need to do a few things that will vary per device.

### Oculus Quest
#### Oculus Quest

These steps are what's necessary to enable development on your device

Expand All @@ -174,25 +180,37 @@ These steps are what's necessary to enable development on your device
`adb devices -l`
Lists all connected devices. The -l flag will list device specific details, one of which should be: `model:Quest`

`adb -s model:Quest reverse tcp:8080 tcp:8080`
`adb reverse tcp:8080 tcp:8080`
`adb -s model:Quest reverse tcp:8080 tcp:8080`
`adb reverse tcp:8080 tcp:8080`
This command routes all port 8080 requests from the Quest device to port 8080 on your local web server. The first one is if you want to do things wirelessly, while the second is a quicker (albeit tethered) solution that is less prone to the error below.

If you encounter the following error:
adb: error: more than one device/emulator

Try killing and restarting adb with the following commands:
`adb kill-server`
`adb start-server`
Then retry the reverse command above again
Try killing adb with the following commands:
`adb kill-server`
Then try the reverse command above again (the server will be restarted).

3. Open a browser on the Quest device and test.
Go to the following url: `https://localhost:8080` in the Oculus broswer or Firefox Reality browser
3. Open a browser on the Quest device and test. Either
`adb shell am start -a android.intent.action.VIEW -d 'https://localhost:8080'`
or launch the Oculus browser or Firefox Reality browser and go to the following url: `https://localhost:8080`

> Note the client runs over https with a self-signed SSL certificate. You'll be presented with a warning the first time you open the page. You can accept the SSL certificate warning and continue onto the site.
4. You should see the Hubs index page, the same one you see in a browser on your development machine.

### Other Devices
You may find the tool [scrcpy](https://github.com/Genymobile/scrcpy) useful to display the screen of your headset on your development computer. It doesn't require the headset user to accept, so it's less hassle than casting to a phone or tablet, in some circumstances.

#### Pico G2 / Neo 2

Follow the directions for the Quest, except

* Setup the Pico device for development. (You may need to press the Confirm and Volume Down buttons on the headset simultaneously to enter the system settings.)
`https://developer.pico-interactive.com/question/neo`

* Open Hubs in the Firefox Reality browser:
`adb shell am start -a android.intent.action.VIEW -d 'https://localhost:8080/hub.html' org.mozilla.vrbrowser/org.mozilla.vrbrowser.VRBrowserActivity`

#### Other Devices

Please feel free to contribute setup instructions for additional devices.
Loading

0 comments on commit 1d6eac7

Please sign in to comment.