Skip to content

Commit 8ce9601

Browse files
vovacodesvovacodes
committed
Migrate demo to bundler-less setup
1 parent 77c17d2 commit 8ce9601

24 files changed

Lines changed: 445 additions & 3162 deletions

‎.eslintrc.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
module.exports = {
2+
parser: "@typescript-eslint/parser",
3+
parserOptions: {
4+
project: "./tsconfig.json",
5+
tsconfigRootDir: __dirname,
6+
},
7+
settings: {
8+
react: {
9+
version: "detect",
10+
},
11+
},
12+
plugins: ["@typescript-eslint", "react", "react-hooks", "import"],
13+
extends: [
14+
"plugin:@typescript-eslint/recommended",
15+
"plugin:react/recommended",
16+
"prettier",
17+
"prettier/@typescript-eslint",
18+
],
19+
rules: {
20+
"react-hooks/rules-of-hooks": "error",
21+
"react-hooks/exhaustive-deps": "warn",
22+
"@typescript-eslint/explicit-function-return-type": "off",
23+
"@typescript-eslint/explicit-module-boundary-types": "off",
24+
"@typescript-eslint/no-use-before-define": ["error", { functions: false }],
25+
"@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_", varsIgnorePattern: "^_" }],
26+
"@typescript-eslint/no-empty-function": "off",
27+
"import/extensions": ["error", "always"],
28+
},
29+
}

‎package.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"commit:retry": "git-cz --retry",
1010
"dev": "yarn build && lerna run --parallel --stream dev",
1111
"clean": "lerna run clean",
12-
"lint": "lerna run lint",
12+
"lint": "eslint packages/react-sunbeam/src --ext .ts,.tsx && eslint packages/demo/src --ext .ts,.tsx",
1313
"release": "yarn build && lerna publish --conventional-commits",
1414
"test": "lerna run test",
1515
"type-check": "lerna run type-check",
@@ -47,8 +47,15 @@
4747
"devDependencies": {
4848
"@commitlint/cli": "^11.0.0",
4949
"@commitlint/config-conventional": "^11.0.0",
50+
"@typescript-eslint/eslint-plugin": "^4.7.0",
51+
"@typescript-eslint/parser": "^4.7.0",
5052
"commitizen": "^4.2.2",
5153
"cz-conventional-changelog": "^3.3.0",
54+
"eslint": "^7.13.0",
55+
"eslint-config-prettier": "^6.15.0",
56+
"eslint-plugin-import": "^2.22.1",
57+
"eslint-plugin-react": "^7.21.5",
58+
"eslint-plugin-react-hooks": "^4.2.0",
5259
"husky": "^4.3.0",
5360
"lerna": "^3.22.1",
5461
"prettier": "^2.1.2",

‎packages/demo/.eslintrc.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
parserOptions: {
3+
project: "./tsconfig.json",
4+
tsconfigRootDir: __dirname,
5+
},
6+
}

‎packages/demo/Makefile‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
DEFAULT_GOAL: build
2+
3+
build:
4+
yarn tsc
5+
6+
dev:
7+
yarn concurrently -n tsc,srv -c cyan,magenta \
8+
'tsc --watch --preserveWatchOutput' \
9+
'deno run --allow-net --allow-read https://deno.land/x/denoliver@2.1.0/mod.ts .. -p 3333 --entry /demo/index.html'
10+
11+
type-check:
12+
yarn tsc --noEmit
13+
14+
PHONY: build dev type-check

‎packages/demo/index.html‎

Lines changed: 47 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,51 @@
77
href="https://fonts.googleapis.com/css?family=Fira+Code:400,700|DM+Serif+Display&display=swap"
88
rel="stylesheet"
99
/>
10+
11+
<!--
12+
JSPM Generator Import Map
13+
Edit URL: https://generator.jspm.io/#U2VgYGCzD0pNTC5RCC5JLCpJLWJIK0rMTS3Szc0vyczPczDWMzTQM2bIyCwuyS+qdDDVM9AzYCgCadBNyc91MDQHChhCBYryS4EGgMVN9Yzg6iDCyEJQbQCidtfSfgA
14+
-->
15+
<script type="importmap">
16+
{
17+
"imports": {
18+
"react-sunbeam": "../react-sunbeam/dist/index.js",
19+
20+
"framer-motion": "https://ga.jspm.io/npm:framer-motion@3.10.3/dist/dev.framer-motion.cjs.js",
21+
"history": "https://ga.jspm.io/npm:history@5.0.0/dev.main.js",
22+
"react": "https://ga.jspm.io/npm:react@17.0.1/dev.index.js",
23+
"react-dom": "https://ga.jspm.io/npm:react-dom@17.0.1/dev.index.js",
24+
"react-router": "https://ga.jspm.io/npm:react-router@5.2.0/dev.index.js",
25+
"react-router-dom": "https://ga.jspm.io/npm:react-router-dom@5.2.0/dev.index.js"
26+
},
27+
"scopes": {
28+
"https://ga.jspm.io/": {
29+
"@babel/runtime/helpers/inheritsLoose": "https://ga.jspm.io/npm:@babel/runtime@7.13.10/helpers/inheritsLoose.js",
30+
"@emotion/is-prop-valid": "https://ga.jspm.io/npm:@emotion/is-prop-valid@0.8.8/dist/is-prop-valid.browser.cjs.js",
31+
"@emotion/memoize": "https://ga.jspm.io/npm:@emotion/memoize@0.7.4/dist/memoize.browser.cjs.js",
32+
"framesync": "https://ga.jspm.io/npm:framesync@5.2.0/lib/index.js",
33+
"hey-listen": "https://ga.jspm.io/npm:hey-listen@1.0.8/dist/dev.index.js",
34+
"history": "https://ga.jspm.io/npm:history@4.10.1/dev.index.js",
35+
"hoist-non-react-statics": "https://ga.jspm.io/npm:hoist-non-react-statics@3.3.2/dist/hoist-non-react-statics.cjs.js",
36+
"isarray": "https://ga.jspm.io/npm:isarray@0.0.1/index.js",
37+
"mini-create-react-context": "https://ga.jspm.io/npm:mini-create-react-context@0.4.1/dist/cjs/dev.index.js",
38+
"object-assign": "https://ga.jspm.io/npm:object-assign@4.1.1/index.js",
39+
"path-to-regexp": "https://ga.jspm.io/npm:path-to-regexp@1.8.0/index.js",
40+
"popmotion": "https://ga.jspm.io/npm:popmotion@9.3.1/lib/index.js",
41+
"prop-types": "https://ga.jspm.io/npm:prop-types@15.7.2/dev.index.js",
42+
"react-is": "https://ga.jspm.io/npm:react-is@16.13.1/dev.index.js",
43+
"resolve-pathname": "https://ga.jspm.io/npm:resolve-pathname@3.0.0/dev.index.js",
44+
"scheduler": "https://ga.jspm.io/npm:scheduler@0.20.1/dev.index.js",
45+
"scheduler/tracing": "https://ga.jspm.io/npm:scheduler@0.20.1/dev.tracing.js",
46+
"style-value-types": "https://ga.jspm.io/npm:style-value-types@4.1.1/lib/index.js",
47+
"tiny-invariant": "https://ga.jspm.io/npm:tiny-invariant@1.1.0/dist/dev.tiny-invariant.cjs.js",
48+
"tiny-warning": "https://ga.jspm.io/npm:tiny-warning@1.0.3/dist/dev.tiny-warning.cjs.js",
49+
"tslib": "https://ga.jspm.io/npm:tslib@1.14.1/tslib.js",
50+
"value-equal": "https://ga.jspm.io/npm:value-equal@1.0.1/dev.index.js"
51+
}
52+
}
53+
}
54+
</script>
1055
</head>
1156
<style>
1257
body {
@@ -23,7 +68,7 @@
2368
}
2469
</style>
2570
<body>
26-
<div id="app"></div>
27-
<script src="./src/apps/index.tsx"></script>
71+
<div id="app" />
72+
<script type="module" src="/demo/dist/apps/index.js"></script>
2873
</body>
2974
</html>

‎packages/demo/package.json‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,9 @@
33
"version": "2.0.0-alpha.1",
44
"main": "index.js",
55
"repository": "git+https://github.com/wzrdzl/react-sunbeam.git",
6-
"author": "Vladimir Guguiev <vladimir.guguiev@gmail.com>",
6+
"author": "Vova Guguiev <vladimir.guguiev@gmail.com>",
77
"license": "MIT",
88
"private": true,
9-
"scripts": {
10-
"build": "parcel build index.html",
11-
"dev": "parcel index.html --port 1234",
12-
"type-check": "tsc --noEmit"
13-
},
149
"dependencies": {
1510
"framer-motion": "^2.9.4",
1611
"history": "^5.0.0",
@@ -24,7 +19,8 @@
2419
"@types/react": "^17.0.0",
2520
"@types/react-dom": "^17.0.0",
2621
"@types/react-router-dom": "^5.1.6",
27-
"parcel-bundler": "^1.12.4",
22+
"concurrently": "^6.0.0",
23+
"http-server": "^0.12.3",
2824
"typescript": "^4.1.2"
2925
},
3026
"alias": {

‎packages/demo/src/apps/ConsoleUI/FocusableItem.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from "react"
22
import { useRef, useCallback } from "react"
33
import { useFocusable, useFocusManager, FocusEvent, KeyPressListener } from "react-sunbeam"
4-
import { Colors } from "../../styles"
4+
import { Colors } from "../../styles.js"
55

66
type Props = {
77
kind: "circle" | "square"
@@ -29,12 +29,12 @@ export function FocusableItem({ kind, color, width, height, focusKey, onKeyPress
2929
onBlur,
3030
onKeyPress,
3131
})
32-
const { setFocus } = useFocusManager()
32+
const focusManager = useFocusManager()
3333

3434
// tap-to-focus
3535
const handleClick = useCallback(() => {
36-
setFocus(path)
37-
}, [path])
36+
focusManager.setFocus(path)
37+
}, [focusManager, path])
3838

3939
return (
4040
<div

‎packages/demo/src/apps/ConsoleUI/GamesGallery.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import * as React from "react"
22
import { memo, useCallback, useRef, useState } from "react"
33
import { Focusable, FocusEvent } from "react-sunbeam"
4-
import { FocusableItem } from "./FocusableItem"
5-
import { Colors } from "../../styles"
4+
import { FocusableItem } from "./FocusableItem.js"
5+
import { Colors } from "../../styles.js"
66

77
type Props = {
88
onFocus: (event: FocusEvent) => void
@@ -45,7 +45,7 @@ export const GamesGallery = memo(function GamesGallery({ onFocus, onBlur, onItem
4545

4646
onItemFocus(event)
4747
},
48-
[scrollX]
48+
[onItemFocus, scrollX]
4949
)
5050

5151
return (

‎packages/demo/src/apps/ConsoleUI/NavigationMenu.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import * as React from "react"
22
import { memo } from "react"
33
import { Direction, Focusable, FocusEvent } from "react-sunbeam"
4-
import { FocusableItem } from "./FocusableItem"
5-
import { Colors } from "../../styles"
4+
import { FocusableItem } from "./FocusableItem.js"
5+
import { Colors } from "../../styles.js"
66

77
type Props = {
88
onFocus: (event: FocusEvent) => void

‎packages/demo/src/apps/ConsoleUI/ProfilesMenu.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import * as React from "react"
22
import { memo } from "react"
33
import { Focusable, FocusEvent } from "react-sunbeam"
4-
import { FocusableItem } from "./FocusableItem"
5-
import { Colors } from "../../styles"
4+
import { FocusableItem } from "./FocusableItem.js"
5+
import { Colors } from "../../styles.js"
66

77
type Props = {
88
onFocus: (event: FocusEvent) => void

0 commit comments

Comments
 (0)