diff --git a/.github/workflows/coverage.yml b/.github/workflows/coverage.yml
index 6d979b4..54463d7 100644
--- a/.github/workflows/coverage.yml
+++ b/.github/workflows/coverage.yml
@@ -9,7 +9,7 @@ jobs:
strategy:
matrix:
- node-version: ['14.x']
+ node-version: ['16.x']
steps:
- name: Cancel Previous Runs
@@ -24,9 +24,6 @@ jobs:
with:
node-version: ${{ matrix.node-version }}
- - run: npm i -g lerna
- id: lerna
-
- run: yarn install
id: install
@@ -42,4 +39,4 @@ jobs:
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
package-manager: yarn
- test-script: yarn run test:ci
+ test-script: ./run-jest.sh
diff --git a/.github/workflows/pipeline-release.yml b/.github/workflows/pipeline-release.yml
index e48d358..b6a7bcb 100644
--- a/.github/workflows/pipeline-release.yml
+++ b/.github/workflows/pipeline-release.yml
@@ -21,7 +21,7 @@ jobs:
node-version: ['14.x']
steps:
- - uses: actions/checkout@v2
+ - uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2
with:
@@ -36,7 +36,7 @@ jobs:
- name: webpage install, build, and test
uses: actions/setup-node@v2
- - run: yarn install --prefer-offline
+ - run: yarn install
if: steps.yarn-cache.outputs.cache-hit != 'true'
id: install
diff --git a/.gitignore b/.gitignore
index b991ff9..5ecfa57 100644
--- a/.gitignore
+++ b/.gitignore
@@ -69,5 +69,3 @@ cache/
*.debug
# Generated Components
-components/
-!packages/components/**/*
diff --git a/.prettierrc.js b/.prettierrc.js
index c2b40d6..d7cac30 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -1,6 +1,6 @@
/**
* @file Prettier configuration for Conformance
- * @version 1.0.6
+ * @version 1.1.0
* @summary base config adapted from AirBNB to maximize performance
* @schema http://json.schemastore.org/prettierrc
*/
@@ -13,7 +13,7 @@ module.exports = {
endOfLine: 'lf',
jsxBracketSameLine: false,
jsxSingleQuote: false,
- printWidth: 80,
+ printWidth: 100,
proseWrap: 'always',
quoteProps: 'consistent',
semi: true,
diff --git a/.size-limit.json b/.size-limit.json
new file mode 100644
index 0000000..3575794
--- /dev/null
+++ b/.size-limit.json
@@ -0,0 +1,15 @@
+[
+ {
+ "path": "./packages/components/dist/index.cjs.js",
+ "limit": "60 kB"
+ },
+ {
+ "path": "./packages/components/dist/index.es.js",
+ "limit": "60 kB"
+ },
+ {
+ "path": "./packages/components/dist/style.css",
+ "limit": "50 kB",
+ "webpack": false
+ }
+]
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..1841723
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+ "cSpell.words": [
+ "zustand"
+ ]
+}
diff --git a/.yarn/releases/yarn-1.19.0.cjs b/.yarn/releases/yarn-1.19.0.cjs
index b1a221d..d73fc8a 100755
--- a/.yarn/releases/yarn-1.19.0.cjs
+++ b/.yarn/releases/yarn-1.19.0.cjs
@@ -98,192 +98,192 @@ module.exports = require("path");
/* unused harmony export __makeTemplateObject */
/* unused harmony export __importStar */
/* unused harmony export __importDefault */
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation. All rights reserved.
-Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-this file except in compliance with the License. You may obtain a copy of the
-License at http://www.apache.org/licenses/LICENSE-2.0
-
-THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-MERCHANTABLITY OR NON-INFRINGEMENT.
-
-See the Apache Version 2.0 License for specific language governing permissions
-and limitations under the License.
-***************************************************************************** */
-/* global Reflect, Promise */
-
-var extendStatics = function(d, b) {
- extendStatics = Object.setPrototypeOf ||
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
- function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
- return extendStatics(d, b);
-};
-
-function __extends(d, b) {
- extendStatics(d, b);
- function __() { this.constructor = d; }
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
-
-var __assign = function() {
- __assign = Object.assign || function __assign(t) {
- for (var s, i = 1, n = arguments.length; i < n; i++) {
- s = arguments[i];
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
- }
- return t;
- }
- return __assign.apply(this, arguments);
-}
-
-function __rest(s, e) {
- var t = {};
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
- t[p] = s[p];
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
- t[p[i]] = s[p[i]];
- return t;
-}
-
-function __decorate(decorators, target, key, desc) {
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
- return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-
-function __param(paramIndex, decorator) {
- return function (target, key) { decorator(target, key, paramIndex); }
-}
-
-function __metadata(metadataKey, metadataValue) {
- if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
- return new (P || (P = Promise))(function (resolve, reject) {
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
- function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
- step((generator = generator.apply(thisArg, _arguments || [])).next());
- });
-}
-
-function __generator(thisArg, body) {
- var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
- return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
- function verb(n) { return function (v) { return step([n, v]); }; }
- function step(op) {
- if (f) throw new TypeError("Generator is already executing.");
- while (_) try {
- if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
- if (y = 0, t) op = [op[0] & 2, t.value];
- switch (op[0]) {
- case 0: case 1: t = op; break;
- case 4: _.label++; return { value: op[1], done: false };
- case 5: _.label++; y = op[1]; op = [0]; continue;
- case 7: op = _.ops.pop(); _.trys.pop(); continue;
- default:
- if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
- if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
- if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
- if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
- if (t[2]) _.ops.pop();
- _.trys.pop(); continue;
- }
- op = body.call(thisArg, _);
- } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
- if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
- }
-}
-
-function __exportStar(m, exports) {
- for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
-
-function __values(o) {
- var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
- if (m) return m.call(o);
- return {
- next: function () {
- if (o && i >= o.length) o = void 0;
- return { value: o && o[i++], done: !o };
- }
- };
-}
-
-function __read(o, n) {
- var m = typeof Symbol === "function" && o[Symbol.iterator];
- if (!m) return o;
- var i = m.call(o), r, ar = [], e;
- try {
- while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
- }
- catch (error) { e = { error: error }; }
- finally {
- try {
- if (r && !r.done && (m = i["return"])) m.call(i);
- }
- finally { if (e) throw e.error; }
- }
- return ar;
-}
-
-function __spread() {
- for (var ar = [], i = 0; i < arguments.length; i++)
- ar = ar.concat(__read(arguments[i]));
- return ar;
-}
-
-function __await(v) {
- return this instanceof __await ? (this.v = v, this) : new __await(v);
-}
-
-function __asyncGenerator(thisArg, _arguments, generator) {
- if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
- var g = generator.apply(thisArg, _arguments || []), i, q = [];
- return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
- function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
- function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
- function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
- function fulfill(value) { resume("next", value); }
- function reject(value) { resume("throw", value); }
- function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
-}
-
-function __asyncDelegator(o) {
- var i, p;
- return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
- function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
-}
-
-function __asyncValues(o) {
- if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
- var m = o[Symbol.asyncIterator], i;
- return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
- function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
- function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
-}
-
-function __makeTemplateObject(cooked, raw) {
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
- return cooked;
-};
-
-function __importStar(mod) {
- if (mod && mod.__esModule) return mod;
- var result = {};
- if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
- result.default = mod;
- return result;
-}
-
-function __importDefault(mod) {
- return (mod && mod.__esModule) ? mod : { default: mod };
-}
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+ extendStatics = Object.setPrototypeOf ||
+ ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+ function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+ return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+ extendStatics(d, b);
+ function __() { this.constructor = d; }
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var __assign = function() {
+ __assign = Object.assign || function __assign(t) {
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
+ s = arguments[i];
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+ }
+ return t;
+ }
+ return __assign.apply(this, arguments);
+}
+
+function __rest(s, e) {
+ var t = {};
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+ t[p] = s[p];
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
+ t[p[i]] = s[p[i]];
+ return t;
+}
+
+function __decorate(decorators, target, key, desc) {
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __param(paramIndex, decorator) {
+ return function (target, key) { decorator(target, key, paramIndex); }
+}
+
+function __metadata(metadataKey, metadataValue) {
+ if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+ return new (P || (P = Promise))(function (resolve, reject) {
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+ function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
+ });
+}
+
+function __generator(thisArg, body) {
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+ function verb(n) { return function (v) { return step([n, v]); }; }
+ function step(op) {
+ if (f) throw new TypeError("Generator is already executing.");
+ while (_) try {
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+ if (y = 0, t) op = [op[0] & 2, t.value];
+ switch (op[0]) {
+ case 0: case 1: t = op; break;
+ case 4: _.label++; return { value: op[1], done: false };
+ case 5: _.label++; y = op[1]; op = [0]; continue;
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
+ default:
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+ if (t[2]) _.ops.pop();
+ _.trys.pop(); continue;
+ }
+ op = body.call(thisArg, _);
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+ }
+}
+
+function __exportStar(m, exports) {
+ for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+
+function __values(o) {
+ var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
+ if (m) return m.call(o);
+ return {
+ next: function () {
+ if (o && i >= o.length) o = void 0;
+ return { value: o && o[i++], done: !o };
+ }
+ };
+}
+
+function __read(o, n) {
+ var m = typeof Symbol === "function" && o[Symbol.iterator];
+ if (!m) return o;
+ var i = m.call(o), r, ar = [], e;
+ try {
+ while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+ }
+ catch (error) { e = { error: error }; }
+ finally {
+ try {
+ if (r && !r.done && (m = i["return"])) m.call(i);
+ }
+ finally { if (e) throw e.error; }
+ }
+ return ar;
+}
+
+function __spread() {
+ for (var ar = [], i = 0; i < arguments.length; i++)
+ ar = ar.concat(__read(arguments[i]));
+ return ar;
+}
+
+function __await(v) {
+ return this instanceof __await ? (this.v = v, this) : new __await(v);
+}
+
+function __asyncGenerator(thisArg, _arguments, generator) {
+ if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
+ var g = generator.apply(thisArg, _arguments || []), i, q = [];
+ return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
+ function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+ function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
+ function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
+ function fulfill(value) { resume("next", value); }
+ function reject(value) { resume("throw", value); }
+ function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
+}
+
+function __asyncDelegator(o) {
+ var i, p;
+ return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
+ function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
+}
+
+function __asyncValues(o) {
+ if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
+ var m = o[Symbol.asyncIterator], i;
+ return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+ function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+ function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
+}
+
+function __makeTemplateObject(cooked, raw) {
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+ return cooked;
+};
+
+function __importStar(mod) {
+ if (mod && mod.__esModule) return mod;
+ var result = {};
+ if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+ result.default = mod;
+ return result;
+}
+
+function __importDefault(mod) {
+ return (mod && mod.__esModule) ? mod : { default: mod };
+}
/***/ }),
@@ -43884,28 +43884,28 @@ function extractWorkspaces(manifest) {
/* 163 */
/***/ (function(module, exports) {
-module.exports = function(module) {
- if(!module.webpackPolyfill) {
- module.deprecate = function() {};
- module.paths = [];
- // module.parent = undefined by default
- if(!module.children) module.children = [];
- Object.defineProperty(module, "loaded", {
- enumerable: true,
- get: function() {
- return module.l;
- }
- });
- Object.defineProperty(module, "id", {
- enumerable: true,
- get: function() {
- return module.i;
- }
- });
- module.webpackPolyfill = 1;
- }
- return module;
-};
+module.exports = function(module) {
+ if(!module.webpackPolyfill) {
+ module.deprecate = function() {};
+ module.paths = [];
+ // module.parent = undefined by default
+ if(!module.children) module.children = [];
+ Object.defineProperty(module, "loaded", {
+ enumerable: true,
+ get: function() {
+ return module.l;
+ }
+ });
+ Object.defineProperty(module, "id", {
+ enumerable: true,
+ get: function() {
+ return module.i;
+ }
+ });
+ module.webpackPolyfill = 1;
+ }
+ return module;
+};
/***/ }),
@@ -109615,155 +109615,155 @@ module.exports = function (fromModel) {
/* 610 */
/***/ (function(module, exports) {
-module.exports = {
- "aliceblue": [240, 248, 255],
- "antiquewhite": [250, 235, 215],
- "aqua": [0, 255, 255],
- "aquamarine": [127, 255, 212],
- "azure": [240, 255, 255],
- "beige": [245, 245, 220],
- "bisque": [255, 228, 196],
- "black": [0, 0, 0],
- "blanchedalmond": [255, 235, 205],
- "blue": [0, 0, 255],
- "blueviolet": [138, 43, 226],
- "brown": [165, 42, 42],
- "burlywood": [222, 184, 135],
- "cadetblue": [95, 158, 160],
- "chartreuse": [127, 255, 0],
- "chocolate": [210, 105, 30],
- "coral": [255, 127, 80],
- "cornflowerblue": [100, 149, 237],
- "cornsilk": [255, 248, 220],
- "crimson": [220, 20, 60],
- "cyan": [0, 255, 255],
- "darkblue": [0, 0, 139],
- "darkcyan": [0, 139, 139],
- "darkgoldenrod": [184, 134, 11],
- "darkgray": [169, 169, 169],
- "darkgreen": [0, 100, 0],
- "darkgrey": [169, 169, 169],
- "darkkhaki": [189, 183, 107],
- "darkmagenta": [139, 0, 139],
- "darkolivegreen": [85, 107, 47],
- "darkorange": [255, 140, 0],
- "darkorchid": [153, 50, 204],
- "darkred": [139, 0, 0],
- "darksalmon": [233, 150, 122],
- "darkseagreen": [143, 188, 143],
- "darkslateblue": [72, 61, 139],
- "darkslategray": [47, 79, 79],
- "darkslategrey": [47, 79, 79],
- "darkturquoise": [0, 206, 209],
- "darkviolet": [148, 0, 211],
- "deeppink": [255, 20, 147],
- "deepskyblue": [0, 191, 255],
- "dimgray": [105, 105, 105],
- "dimgrey": [105, 105, 105],
- "dodgerblue": [30, 144, 255],
- "firebrick": [178, 34, 34],
- "floralwhite": [255, 250, 240],
- "forestgreen": [34, 139, 34],
- "fuchsia": [255, 0, 255],
- "gainsboro": [220, 220, 220],
- "ghostwhite": [248, 248, 255],
- "gold": [255, 215, 0],
- "goldenrod": [218, 165, 32],
- "gray": [128, 128, 128],
- "green": [0, 128, 0],
- "greenyellow": [173, 255, 47],
- "grey": [128, 128, 128],
- "honeydew": [240, 255, 240],
- "hotpink": [255, 105, 180],
- "indianred": [205, 92, 92],
- "indigo": [75, 0, 130],
- "ivory": [255, 255, 240],
- "khaki": [240, 230, 140],
- "lavender": [230, 230, 250],
- "lavenderblush": [255, 240, 245],
- "lawngreen": [124, 252, 0],
- "lemonchiffon": [255, 250, 205],
- "lightblue": [173, 216, 230],
- "lightcoral": [240, 128, 128],
- "lightcyan": [224, 255, 255],
- "lightgoldenrodyellow": [250, 250, 210],
- "lightgray": [211, 211, 211],
- "lightgreen": [144, 238, 144],
- "lightgrey": [211, 211, 211],
- "lightpink": [255, 182, 193],
- "lightsalmon": [255, 160, 122],
- "lightseagreen": [32, 178, 170],
- "lightskyblue": [135, 206, 250],
- "lightslategray": [119, 136, 153],
- "lightslategrey": [119, 136, 153],
- "lightsteelblue": [176, 196, 222],
- "lightyellow": [255, 255, 224],
- "lime": [0, 255, 0],
- "limegreen": [50, 205, 50],
- "linen": [250, 240, 230],
- "magenta": [255, 0, 255],
- "maroon": [128, 0, 0],
- "mediumaquamarine": [102, 205, 170],
- "mediumblue": [0, 0, 205],
- "mediumorchid": [186, 85, 211],
- "mediumpurple": [147, 112, 219],
- "mediumseagreen": [60, 179, 113],
- "mediumslateblue": [123, 104, 238],
- "mediumspringgreen": [0, 250, 154],
- "mediumturquoise": [72, 209, 204],
- "mediumvioletred": [199, 21, 133],
- "midnightblue": [25, 25, 112],
- "mintcream": [245, 255, 250],
- "mistyrose": [255, 228, 225],
- "moccasin": [255, 228, 181],
- "navajowhite": [255, 222, 173],
- "navy": [0, 0, 128],
- "oldlace": [253, 245, 230],
- "olive": [128, 128, 0],
- "olivedrab": [107, 142, 35],
- "orange": [255, 165, 0],
- "orangered": [255, 69, 0],
- "orchid": [218, 112, 214],
- "palegoldenrod": [238, 232, 170],
- "palegreen": [152, 251, 152],
- "paleturquoise": [175, 238, 238],
- "palevioletred": [219, 112, 147],
- "papayawhip": [255, 239, 213],
- "peachpuff": [255, 218, 185],
- "peru": [205, 133, 63],
- "pink": [255, 192, 203],
- "plum": [221, 160, 221],
- "powderblue": [176, 224, 230],
- "purple": [128, 0, 128],
- "rebeccapurple": [102, 51, 153],
- "red": [255, 0, 0],
- "rosybrown": [188, 143, 143],
- "royalblue": [65, 105, 225],
- "saddlebrown": [139, 69, 19],
- "salmon": [250, 128, 114],
- "sandybrown": [244, 164, 96],
- "seagreen": [46, 139, 87],
- "seashell": [255, 245, 238],
- "sienna": [160, 82, 45],
- "silver": [192, 192, 192],
- "skyblue": [135, 206, 235],
- "slateblue": [106, 90, 205],
- "slategray": [112, 128, 144],
- "slategrey": [112, 128, 144],
- "snow": [255, 250, 250],
- "springgreen": [0, 255, 127],
- "steelblue": [70, 130, 180],
- "tan": [210, 180, 140],
- "teal": [0, 128, 128],
- "thistle": [216, 191, 216],
- "tomato": [255, 99, 71],
- "turquoise": [64, 224, 208],
- "violet": [238, 130, 238],
- "wheat": [245, 222, 179],
- "white": [255, 255, 255],
- "whitesmoke": [245, 245, 245],
- "yellow": [255, 255, 0],
- "yellowgreen": [154, 205, 50]
+module.exports = {
+ "aliceblue": [240, 248, 255],
+ "antiquewhite": [250, 235, 215],
+ "aqua": [0, 255, 255],
+ "aquamarine": [127, 255, 212],
+ "azure": [240, 255, 255],
+ "beige": [245, 245, 220],
+ "bisque": [255, 228, 196],
+ "black": [0, 0, 0],
+ "blanchedalmond": [255, 235, 205],
+ "blue": [0, 0, 255],
+ "blueviolet": [138, 43, 226],
+ "brown": [165, 42, 42],
+ "burlywood": [222, 184, 135],
+ "cadetblue": [95, 158, 160],
+ "chartreuse": [127, 255, 0],
+ "chocolate": [210, 105, 30],
+ "coral": [255, 127, 80],
+ "cornflowerblue": [100, 149, 237],
+ "cornsilk": [255, 248, 220],
+ "crimson": [220, 20, 60],
+ "cyan": [0, 255, 255],
+ "darkblue": [0, 0, 139],
+ "darkcyan": [0, 139, 139],
+ "darkgoldenrod": [184, 134, 11],
+ "darkgray": [169, 169, 169],
+ "darkgreen": [0, 100, 0],
+ "darkgrey": [169, 169, 169],
+ "darkkhaki": [189, 183, 107],
+ "darkmagenta": [139, 0, 139],
+ "darkolivegreen": [85, 107, 47],
+ "darkorange": [255, 140, 0],
+ "darkorchid": [153, 50, 204],
+ "darkred": [139, 0, 0],
+ "darksalmon": [233, 150, 122],
+ "darkseagreen": [143, 188, 143],
+ "darkslateblue": [72, 61, 139],
+ "darkslategray": [47, 79, 79],
+ "darkslategrey": [47, 79, 79],
+ "darkturquoise": [0, 206, 209],
+ "darkviolet": [148, 0, 211],
+ "deeppink": [255, 20, 147],
+ "deepskyblue": [0, 191, 255],
+ "dimgray": [105, 105, 105],
+ "dimgrey": [105, 105, 105],
+ "dodgerblue": [30, 144, 255],
+ "firebrick": [178, 34, 34],
+ "floralwhite": [255, 250, 240],
+ "forestgreen": [34, 139, 34],
+ "fuchsia": [255, 0, 255],
+ "gainsboro": [220, 220, 220],
+ "ghostwhite": [248, 248, 255],
+ "gold": [255, 215, 0],
+ "goldenrod": [218, 165, 32],
+ "gray": [128, 128, 128],
+ "green": [0, 128, 0],
+ "greenyellow": [173, 255, 47],
+ "grey": [128, 128, 128],
+ "honeydew": [240, 255, 240],
+ "hotpink": [255, 105, 180],
+ "indianred": [205, 92, 92],
+ "indigo": [75, 0, 130],
+ "ivory": [255, 255, 240],
+ "khaki": [240, 230, 140],
+ "lavender": [230, 230, 250],
+ "lavenderblush": [255, 240, 245],
+ "lawngreen": [124, 252, 0],
+ "lemonchiffon": [255, 250, 205],
+ "lightblue": [173, 216, 230],
+ "lightcoral": [240, 128, 128],
+ "lightcyan": [224, 255, 255],
+ "lightgoldenrodyellow": [250, 250, 210],
+ "lightgray": [211, 211, 211],
+ "lightgreen": [144, 238, 144],
+ "lightgrey": [211, 211, 211],
+ "lightpink": [255, 182, 193],
+ "lightsalmon": [255, 160, 122],
+ "lightseagreen": [32, 178, 170],
+ "lightskyblue": [135, 206, 250],
+ "lightslategray": [119, 136, 153],
+ "lightslategrey": [119, 136, 153],
+ "lightsteelblue": [176, 196, 222],
+ "lightyellow": [255, 255, 224],
+ "lime": [0, 255, 0],
+ "limegreen": [50, 205, 50],
+ "linen": [250, 240, 230],
+ "magenta": [255, 0, 255],
+ "maroon": [128, 0, 0],
+ "mediumaquamarine": [102, 205, 170],
+ "mediumblue": [0, 0, 205],
+ "mediumorchid": [186, 85, 211],
+ "mediumpurple": [147, 112, 219],
+ "mediumseagreen": [60, 179, 113],
+ "mediumslateblue": [123, 104, 238],
+ "mediumspringgreen": [0, 250, 154],
+ "mediumturquoise": [72, 209, 204],
+ "mediumvioletred": [199, 21, 133],
+ "midnightblue": [25, 25, 112],
+ "mintcream": [245, 255, 250],
+ "mistyrose": [255, 228, 225],
+ "moccasin": [255, 228, 181],
+ "navajowhite": [255, 222, 173],
+ "navy": [0, 0, 128],
+ "oldlace": [253, 245, 230],
+ "olive": [128, 128, 0],
+ "olivedrab": [107, 142, 35],
+ "orange": [255, 165, 0],
+ "orangered": [255, 69, 0],
+ "orchid": [218, 112, 214],
+ "palegoldenrod": [238, 232, 170],
+ "palegreen": [152, 251, 152],
+ "paleturquoise": [175, 238, 238],
+ "palevioletred": [219, 112, 147],
+ "papayawhip": [255, 239, 213],
+ "peachpuff": [255, 218, 185],
+ "peru": [205, 133, 63],
+ "pink": [255, 192, 203],
+ "plum": [221, 160, 221],
+ "powderblue": [176, 224, 230],
+ "purple": [128, 0, 128],
+ "rebeccapurple": [102, 51, 153],
+ "red": [255, 0, 0],
+ "rosybrown": [188, 143, 143],
+ "royalblue": [65, 105, 225],
+ "saddlebrown": [139, 69, 19],
+ "salmon": [250, 128, 114],
+ "sandybrown": [244, 164, 96],
+ "seagreen": [46, 139, 87],
+ "seashell": [255, 245, 238],
+ "sienna": [160, 82, 45],
+ "silver": [192, 192, 192],
+ "skyblue": [135, 206, 235],
+ "slateblue": [106, 90, 205],
+ "slategray": [112, 128, 144],
+ "slategrey": [112, 128, 144],
+ "snow": [255, 250, 250],
+ "springgreen": [0, 255, 127],
+ "steelblue": [70, 130, 180],
+ "tan": [210, 180, 140],
+ "teal": [0, 128, 128],
+ "thistle": [216, 191, 216],
+ "tomato": [255, 99, 71],
+ "turquoise": [64, 224, 208],
+ "violet": [238, 130, 238],
+ "wheat": [245, 222, 179],
+ "white": [255, 255, 255],
+ "whitesmoke": [245, 245, 245],
+ "yellow": [255, 255, 0],
+ "yellowgreen": [154, 205, 50]
};
/***/ }),
@@ -122832,280 +122832,280 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
/* 744 */
/***/ (function(module, exports, __webpack_require__) {
-var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/**
- * JSONSchema Validator - Validates JavaScript objects using JSON Schemas
- * (http://www.json.com/json-schema-proposal/)
- *
- * Copyright (c) 2007 Kris Zyp SitePen (www.sitepen.com)
- * Licensed under the MIT (MIT-LICENSE.txt) license.
-To use the validator call the validate function with an instance object and an optional schema object.
-If a schema is provided, it will be used to validate. If the instance object refers to a schema (self-validating),
-that schema will be used to validate and the schema parameter is not necessary (if both exist,
-both validations will occur).
-The validate method will return an array of validation errors. If there are no errors, then an
-empty list will be returned. A validation error will have two properties:
-"property" which indicates which property had the error
-"message" which indicates what the error was
- */
-(function (root, factory) {
- if (true) {
- // AMD. Register as an anonymous module.
- !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function () {
- return factory();
+var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/**
+ * JSONSchema Validator - Validates JavaScript objects using JSON Schemas
+ * (http://www.json.com/json-schema-proposal/)
+ *
+ * Copyright (c) 2007 Kris Zyp SitePen (www.sitepen.com)
+ * Licensed under the MIT (MIT-LICENSE.txt) license.
+To use the validator call the validate function with an instance object and an optional schema object.
+If a schema is provided, it will be used to validate. If the instance object refers to a schema (self-validating),
+that schema will be used to validate and the schema parameter is not necessary (if both exist,
+both validations will occur).
+The validate method will return an array of validation errors. If there are no errors, then an
+empty list will be returned. A validation error will have two properties:
+"property" which indicates which property had the error
+"message" which indicates what the error was
+ */
+(function (root, factory) {
+ if (true) {
+ // AMD. Register as an anonymous module.
+ !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function () {
+ return factory();
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
- __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
- } else if (typeof module === 'object' && module.exports) {
- // Node. Does not work with strict CommonJS, but
- // only CommonJS-like environments that support module.exports,
- // like Node.
- module.exports = factory();
- } else {
- // Browser globals
- root.jsonSchema = factory();
- }
-}(this, function () {// setup primitive classes to be JSON Schema types
-var exports = validate
-exports.Integer = {type:"integer"};
-var primitiveConstructors = {
- String: String,
- Boolean: Boolean,
- Number: Number,
- Object: Object,
- Array: Array,
- Date: Date
-}
-exports.validate = validate;
-function validate(/*Any*/instance,/*Object*/schema) {
- // Summary:
- // To use the validator call JSONSchema.validate with an instance object and an optional schema object.
- // If a schema is provided, it will be used to validate. If the instance object refers to a schema (self-validating),
- // that schema will be used to validate and the schema parameter is not necessary (if both exist,
- // both validations will occur).
- // The validate method will return an object with two properties:
- // valid: A boolean indicating if the instance is valid by the schema
- // errors: An array of validation errors. If there are no errors, then an
- // empty list will be returned. A validation error will have two properties:
- // property: which indicates which property had the error
- // message: which indicates what the error was
- //
- return validate(instance, schema, {changing: false});//, coerce: false, existingOnly: false});
- };
-exports.checkPropertyChange = function(/*Any*/value,/*Object*/schema, /*String*/property) {
- // Summary:
- // The checkPropertyChange method will check to see if an value can legally be in property with the given schema
- // This is slightly different than the validate method in that it will fail if the schema is readonly and it will
- // not check for self-validation, it is assumed that the passed in value is already internally valid.
- // The checkPropertyChange method will return the same object type as validate, see JSONSchema.validate for
- // information.
- //
- return validate(value, schema, {changing: property || "property"});
- };
-var validate = exports._validate = function(/*Any*/instance,/*Object*/schema,/*Object*/options) {
-
- if (!options) options = {};
- var _changing = options.changing;
-
- function getType(schema){
- return schema.type || (primitiveConstructors[schema.name] == schema && schema.name.toLowerCase());
- }
- var errors = [];
- // validate a value against a property definition
- function checkProp(value, schema, path,i){
-
- var l;
- path += path ? typeof i == 'number' ? '[' + i + ']' : typeof i == 'undefined' ? '' : '.' + i : i;
- function addError(message){
- errors.push({property:path,message:message});
- }
-
- if((typeof schema != 'object' || schema instanceof Array) && (path || typeof schema != 'function') && !(schema && getType(schema))){
- if(typeof schema == 'function'){
- if(!(value instanceof schema)){
- addError("is not an instance of the class/constructor " + schema.name);
- }
- }else if(schema){
- addError("Invalid schema/property definition " + schema);
- }
- return null;
- }
- if(_changing && schema.readonly){
- addError("is a readonly field, it can not be changed");
- }
- if(schema['extends']){ // if it extends another schema, it must pass that schema as well
- checkProp(value,schema['extends'],path,i);
- }
- // validate a value against a type definition
- function checkType(type,value){
- if(type){
- if(typeof type == 'string' && type != 'any' &&
- (type == 'null' ? value !== null : typeof value != type) &&
- !(value instanceof Array && type == 'array') &&
- !(value instanceof Date && type == 'date') &&
- !(type == 'integer' && value%1===0)){
- return [{property:path,message:(typeof value) + " value found, but a " + type + " is required"}];
- }
- if(type instanceof Array){
- var unionErrors=[];
- for(var j = 0; j < type.length; j++){ // a union type
- if(!(unionErrors=checkType(type[j],value)).length){
- break;
- }
- }
- if(unionErrors.length){
- return unionErrors;
- }
- }else if(typeof type == 'object'){
- var priorErrors = errors;
- errors = [];
- checkProp(value,type,path);
- var theseErrors = errors;
- errors = priorErrors;
- return theseErrors;
- }
- }
- return [];
- }
- if(value === undefined){
- if(schema.required){
- addError("is missing and it is required");
- }
- }else{
- errors = errors.concat(checkType(getType(schema),value));
- if(schema.disallow && !checkType(schema.disallow,value).length){
- addError(" disallowed value was matched");
- }
- if(value !== null){
- if(value instanceof Array){
- if(schema.items){
- var itemsIsArray = schema.items instanceof Array;
- var propDef = schema.items;
- for (i = 0, l = value.length; i < l; i += 1) {
- if (itemsIsArray)
- propDef = schema.items[i];
- if (options.coerce)
- value[i] = options.coerce(value[i], propDef);
- errors.concat(checkProp(value[i],propDef,path,i));
- }
- }
- if(schema.minItems && value.length < schema.minItems){
- addError("There must be a minimum of " + schema.minItems + " in the array");
- }
- if(schema.maxItems && value.length > schema.maxItems){
- addError("There must be a maximum of " + schema.maxItems + " in the array");
- }
- }else if(schema.properties || schema.additionalProperties){
- errors.concat(checkObj(value, schema.properties, path, schema.additionalProperties));
- }
- if(schema.pattern && typeof value == 'string' && !value.match(schema.pattern)){
- addError("does not match the regex pattern " + schema.pattern);
- }
- if(schema.maxLength && typeof value == 'string' && value.length > schema.maxLength){
- addError("may only be " + schema.maxLength + " characters long");
- }
- if(schema.minLength && typeof value == 'string' && value.length < schema.minLength){
- addError("must be at least " + schema.minLength + " characters long");
- }
- if(typeof schema.minimum !== undefined && typeof value == typeof schema.minimum &&
- schema.minimum > value){
- addError("must have a minimum value of " + schema.minimum);
- }
- if(typeof schema.maximum !== undefined && typeof value == typeof schema.maximum &&
- schema.maximum < value){
- addError("must have a maximum value of " + schema.maximum);
- }
- if(schema['enum']){
- var enumer = schema['enum'];
- l = enumer.length;
- var found;
- for(var j = 0; j < l; j++){
- if(enumer[j]===value){
- found=1;
- break;
- }
- }
- if(!found){
- addError("does not have a value in the enumeration " + enumer.join(", "));
- }
- }
- if(typeof schema.maxDecimal == 'number' &&
- (value.toString().match(new RegExp("\\.[0-9]{" + (schema.maxDecimal + 1) + ",}")))){
- addError("may only have " + schema.maxDecimal + " digits of decimal places");
- }
- }
- }
- return null;
- }
- // validate an object against a schema
- function checkObj(instance,objTypeDef,path,additionalProp){
-
- if(typeof objTypeDef =='object'){
- if(typeof instance != 'object' || instance instanceof Array){
- errors.push({property:path,message:"an object is required"});
- }
-
- for(var i in objTypeDef){
- if(objTypeDef.hasOwnProperty(i)){
- var value = instance[i];
- // skip _not_ specified properties
- if (value === undefined && options.existingOnly) continue;
- var propDef = objTypeDef[i];
- // set default
- if(value === undefined && propDef["default"]){
- value = instance[i] = propDef["default"];
- }
- if(options.coerce && i in instance){
- value = instance[i] = options.coerce(value, propDef);
- }
- checkProp(value,propDef,path,i);
- }
- }
- }
- for(i in instance){
- if(instance.hasOwnProperty(i) && !(i.charAt(0) == '_' && i.charAt(1) == '_') && objTypeDef && !objTypeDef[i] && additionalProp===false){
- if (options.filter) {
- delete instance[i];
- continue;
- } else {
- errors.push({property:path,message:(typeof value) + "The property " + i +
- " is not defined in the schema and the schema does not allow additional properties"});
- }
- }
- var requires = objTypeDef && objTypeDef[i] && objTypeDef[i].requires;
- if(requires && !(requires in instance)){
- errors.push({property:path,message:"the presence of the property " + i + " requires that " + requires + " also be present"});
- }
- value = instance[i];
- if(additionalProp && (!(objTypeDef && typeof objTypeDef == 'object') || !(i in objTypeDef))){
- if(options.coerce){
- value = instance[i] = options.coerce(value, additionalProp);
- }
- checkProp(value,additionalProp,path,i);
- }
- if(!_changing && value && value.$schema){
- errors = errors.concat(checkProp(value,value.$schema,path,i));
- }
- }
- return errors;
- }
- if(schema){
- checkProp(instance,schema,'',_changing || '');
- }
- if(!_changing && instance && instance.$schema){
- checkProp(instance,instance.$schema,'','');
- }
- return {valid:!errors.length,errors:errors};
-};
-exports.mustBeValid = function(result){
- // summary:
- // This checks to ensure that the result is valid and will throw an appropriate error message if it is not
- // result: the result returned from checkPropertyChange or validate
- if(!result.valid){
- throw new TypeError(result.errors.map(function(error){return "for property " + error.property + ': ' + error.message;}).join(", \n"));
- }
-}
-
-return exports;
-}));
+ __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+ } else if (typeof module === 'object' && module.exports) {
+ // Node. Does not work with strict CommonJS, but
+ // only CommonJS-like environments that support module.exports,
+ // like Node.
+ module.exports = factory();
+ } else {
+ // Browser globals
+ root.jsonSchema = factory();
+ }
+}(this, function () {// setup primitive classes to be JSON Schema types
+var exports = validate
+exports.Integer = {type:"integer"};
+var primitiveConstructors = {
+ String: String,
+ Boolean: Boolean,
+ Number: Number,
+ Object: Object,
+ Array: Array,
+ Date: Date
+}
+exports.validate = validate;
+function validate(/*Any*/instance,/*Object*/schema) {
+ // Summary:
+ // To use the validator call JSONSchema.validate with an instance object and an optional schema object.
+ // If a schema is provided, it will be used to validate. If the instance object refers to a schema (self-validating),
+ // that schema will be used to validate and the schema parameter is not necessary (if both exist,
+ // both validations will occur).
+ // The validate method will return an object with two properties:
+ // valid: A boolean indicating if the instance is valid by the schema
+ // errors: An array of validation errors. If there are no errors, then an
+ // empty list will be returned. A validation error will have two properties:
+ // property: which indicates which property had the error
+ // message: which indicates what the error was
+ //
+ return validate(instance, schema, {changing: false});//, coerce: false, existingOnly: false});
+ };
+exports.checkPropertyChange = function(/*Any*/value,/*Object*/schema, /*String*/property) {
+ // Summary:
+ // The checkPropertyChange method will check to see if an value can legally be in property with the given schema
+ // This is slightly different than the validate method in that it will fail if the schema is readonly and it will
+ // not check for self-validation, it is assumed that the passed in value is already internally valid.
+ // The checkPropertyChange method will return the same object type as validate, see JSONSchema.validate for
+ // information.
+ //
+ return validate(value, schema, {changing: property || "property"});
+ };
+var validate = exports._validate = function(/*Any*/instance,/*Object*/schema,/*Object*/options) {
+
+ if (!options) options = {};
+ var _changing = options.changing;
+
+ function getType(schema){
+ return schema.type || (primitiveConstructors[schema.name] == schema && schema.name.toLowerCase());
+ }
+ var errors = [];
+ // validate a value against a property definition
+ function checkProp(value, schema, path,i){
+
+ var l;
+ path += path ? typeof i == 'number' ? '[' + i + ']' : typeof i == 'undefined' ? '' : '.' + i : i;
+ function addError(message){
+ errors.push({property:path,message:message});
+ }
+
+ if((typeof schema != 'object' || schema instanceof Array) && (path || typeof schema != 'function') && !(schema && getType(schema))){
+ if(typeof schema == 'function'){
+ if(!(value instanceof schema)){
+ addError("is not an instance of the class/constructor " + schema.name);
+ }
+ }else if(schema){
+ addError("Invalid schema/property definition " + schema);
+ }
+ return null;
+ }
+ if(_changing && schema.readonly){
+ addError("is a readonly field, it can not be changed");
+ }
+ if(schema['extends']){ // if it extends another schema, it must pass that schema as well
+ checkProp(value,schema['extends'],path,i);
+ }
+ // validate a value against a type definition
+ function checkType(type,value){
+ if(type){
+ if(typeof type == 'string' && type != 'any' &&
+ (type == 'null' ? value !== null : typeof value != type) &&
+ !(value instanceof Array && type == 'array') &&
+ !(value instanceof Date && type == 'date') &&
+ !(type == 'integer' && value%1===0)){
+ return [{property:path,message:(typeof value) + " value found, but a " + type + " is required"}];
+ }
+ if(type instanceof Array){
+ var unionErrors=[];
+ for(var j = 0; j < type.length; j++){ // a union type
+ if(!(unionErrors=checkType(type[j],value)).length){
+ break;
+ }
+ }
+ if(unionErrors.length){
+ return unionErrors;
+ }
+ }else if(typeof type == 'object'){
+ var priorErrors = errors;
+ errors = [];
+ checkProp(value,type,path);
+ var theseErrors = errors;
+ errors = priorErrors;
+ return theseErrors;
+ }
+ }
+ return [];
+ }
+ if(value === undefined){
+ if(schema.required){
+ addError("is missing and it is required");
+ }
+ }else{
+ errors = errors.concat(checkType(getType(schema),value));
+ if(schema.disallow && !checkType(schema.disallow,value).length){
+ addError(" disallowed value was matched");
+ }
+ if(value !== null){
+ if(value instanceof Array){
+ if(schema.items){
+ var itemsIsArray = schema.items instanceof Array;
+ var propDef = schema.items;
+ for (i = 0, l = value.length; i < l; i += 1) {
+ if (itemsIsArray)
+ propDef = schema.items[i];
+ if (options.coerce)
+ value[i] = options.coerce(value[i], propDef);
+ errors.concat(checkProp(value[i],propDef,path,i));
+ }
+ }
+ if(schema.minItems && value.length < schema.minItems){
+ addError("There must be a minimum of " + schema.minItems + " in the array");
+ }
+ if(schema.maxItems && value.length > schema.maxItems){
+ addError("There must be a maximum of " + schema.maxItems + " in the array");
+ }
+ }else if(schema.properties || schema.additionalProperties){
+ errors.concat(checkObj(value, schema.properties, path, schema.additionalProperties));
+ }
+ if(schema.pattern && typeof value == 'string' && !value.match(schema.pattern)){
+ addError("does not match the regex pattern " + schema.pattern);
+ }
+ if(schema.maxLength && typeof value == 'string' && value.length > schema.maxLength){
+ addError("may only be " + schema.maxLength + " characters long");
+ }
+ if(schema.minLength && typeof value == 'string' && value.length < schema.minLength){
+ addError("must be at least " + schema.minLength + " characters long");
+ }
+ if(typeof schema.minimum !== undefined && typeof value == typeof schema.minimum &&
+ schema.minimum > value){
+ addError("must have a minimum value of " + schema.minimum);
+ }
+ if(typeof schema.maximum !== undefined && typeof value == typeof schema.maximum &&
+ schema.maximum < value){
+ addError("must have a maximum value of " + schema.maximum);
+ }
+ if(schema['enum']){
+ var enumer = schema['enum'];
+ l = enumer.length;
+ var found;
+ for(var j = 0; j < l; j++){
+ if(enumer[j]===value){
+ found=1;
+ break;
+ }
+ }
+ if(!found){
+ addError("does not have a value in the enumeration " + enumer.join(", "));
+ }
+ }
+ if(typeof schema.maxDecimal == 'number' &&
+ (value.toString().match(new RegExp("\\.[0-9]{" + (schema.maxDecimal + 1) + ",}")))){
+ addError("may only have " + schema.maxDecimal + " digits of decimal places");
+ }
+ }
+ }
+ return null;
+ }
+ // validate an object against a schema
+ function checkObj(instance,objTypeDef,path,additionalProp){
+
+ if(typeof objTypeDef =='object'){
+ if(typeof instance != 'object' || instance instanceof Array){
+ errors.push({property:path,message:"an object is required"});
+ }
+
+ for(var i in objTypeDef){
+ if(objTypeDef.hasOwnProperty(i)){
+ var value = instance[i];
+ // skip _not_ specified properties
+ if (value === undefined && options.existingOnly) continue;
+ var propDef = objTypeDef[i];
+ // set default
+ if(value === undefined && propDef["default"]){
+ value = instance[i] = propDef["default"];
+ }
+ if(options.coerce && i in instance){
+ value = instance[i] = options.coerce(value, propDef);
+ }
+ checkProp(value,propDef,path,i);
+ }
+ }
+ }
+ for(i in instance){
+ if(instance.hasOwnProperty(i) && !(i.charAt(0) == '_' && i.charAt(1) == '_') && objTypeDef && !objTypeDef[i] && additionalProp===false){
+ if (options.filter) {
+ delete instance[i];
+ continue;
+ } else {
+ errors.push({property:path,message:(typeof value) + "The property " + i +
+ " is not defined in the schema and the schema does not allow additional properties"});
+ }
+ }
+ var requires = objTypeDef && objTypeDef[i] && objTypeDef[i].requires;
+ if(requires && !(requires in instance)){
+ errors.push({property:path,message:"the presence of the property " + i + " requires that " + requires + " also be present"});
+ }
+ value = instance[i];
+ if(additionalProp && (!(objTypeDef && typeof objTypeDef == 'object') || !(i in objTypeDef))){
+ if(options.coerce){
+ value = instance[i] = options.coerce(value, additionalProp);
+ }
+ checkProp(value,additionalProp,path,i);
+ }
+ if(!_changing && value && value.$schema){
+ errors = errors.concat(checkProp(value,value.$schema,path,i));
+ }
+ }
+ return errors;
+ }
+ if(schema){
+ checkProp(instance,schema,'',_changing || '');
+ }
+ if(!_changing && instance && instance.$schema){
+ checkProp(instance,instance.$schema,'','');
+ }
+ return {valid:!errors.length,errors:errors};
+};
+exports.mustBeValid = function(result){
+ // summary:
+ // This checks to ensure that the result is valid and will throw an appropriate error message if it is not
+ // result: the result returned from checkPropertyChange or validate
+ if(!result.valid){
+ throw new TypeError(result.errors.map(function(error){return "for property " + error.property + ': ' + error.message;}).join(", \n"));
+ }
+}
+
+return exports;
+}));
/***/ }),
diff --git a/DISCO3.md b/DISCO3.md
index 150c97e..9546b45 100644
--- a/DISCO3.md
+++ b/DISCO3.md
@@ -1,77 +1,80 @@
-| title: | disco: distributed computing aesthetic and critique |
-|---------- |----------------------------------------------------- |
-| version: | 2022.02 |
-| summary: | distributed computing: a design framework |
-| license: | Apache-2.0 / CC-2.5 SA |
-
+| title: | disco: distributed computing aesthetic and critique |
+| -------- | --------------------------------------------------- |
+| version: | 2022.02 |
+| summary: | distributed computing: a design framework |
+| license: | Apache-2.0 / CC-2.5 SA |
---
-
-# disco - a web3 engineering and design system
-
+# disco - a web3 engineering and design system
> State is the root of all revenue.
-
-
-
-
## abstract
-
-> [abstract]:
-> we present an engineering focused aesthetic for a novel design framework: disco. disco's is a web3 focused UI/UX framework that is built to enable, provide and reinforce *trust* in the underlying process (both the activity and the application they are using itself). By communicating to the end user directly and indirectly we hope to significatly reduce user error prone mistakes
-
+> [abstract]: we present an engineering focused aesthetic for a novel design framework: disco.
+> disco's is a web3 focused UI/UX framework that is built to enable, provide and reinforce _trust_
+> in the underlying process (both the activity and the application they are using itself). By
+> communicating to the end user directly and indirectly we hope to significatly reduce user error
+> prone mistakes
## motivation
-User interface development tools are very powerful. They can be used to construct large and complex user interfaces, with only a relatively small amount of code written by an application developer. And yet, despite the power of such tools and the relatively small amount of code that is written, user interface software often has the following characteristics:
+User interface development tools are very powerful. They can be used to construct large and complex
+user interfaces, with only a relatively small amount of code written by an application developer.
+And yet, despite the power of such tools and the relatively small amount of code that is written,
+user interface software often has the following characteristics:
-- the code can be difficult to understand and review thoroughly:
-- the code can be difficult to test in a systematic and thorough way;
-- the code can contain bugs even after extensive testing and bug fixing;
-- the code can be difficult to enhance without introducing unwanted side-effects;
-- the quality of the code tends to deteriorate as enhancements are made to it.
-
-Despite the obvious problems associated with user interface development, **little effort has been made to improve the situation**. Any practitioner who has worked on large user interface projects will be familiar with many of the above characteristics, which are **symptomatic of the way in which the software is constructed**.
+- the code can be difficult to understand and review thoroughly:
+- the code can be difficult to test in a systematic and thorough way;
+- the code can contain bugs even after extensive testing and bug fixing;
+- the code can be difficult to enhance without introducing unwanted side-effects;
+- the quality of the code tends to deteriorate as enhancements are made to it.
+Despite the obvious problems associated with user interface development, **little effort has been
+made to improve the situation**. Any practitioner who has worked on large user interface projects
+will be familiar with many of the above characteristics, which are **symptomatic of the way in which
+the software is constructed**.
### Principles for Transactions
-[UX/UI] Manage transaction wait time. Clarify blockchain specific times and manage user’s wait in various phases and feedback.
-[UX/UI] Within the context of an individual, adapt to progressively increase/decrease the amount of new lingo and specific concepts that they need to learn and are exposed to. never combine expert-level blockchain-specific lingo with the need-to-know basics when acting within the same context of an individual; create tiers of knowledge levels. You can show an expert the basics, but never the other way around.
-[UX/UI] Use a consistent visual language to dictate addresses. use human-readable deterministic visual representation of the hash (i.e. Identicons, Blockies et al.) when possible. allow users to expand the full address/hash and copy.
-[UX/UI] Apply relevance to interrupting messages only for information relevant to the current user.
-[UX/UI] Clarify which data comes from the blockchain and which doesn’t.
+[UX/UI] Manage transaction wait time. Clarify blockchain specific times and manage user’s wait in
+various phases and feedback. [UX/UI] Within the context of an individual, adapt to
+progressively increase/decrease the amount of new lingo and specific concepts that they need to
+learn and are exposed to. never combine expert-level blockchain-specific lingo with the need-to-know
+basics when acting within the same context of an individual; create tiers of knowledge levels. You
+can show an expert the basics, but never the other way around. [UX/UI] Use a consistent visual
+language to dictate addresses. use human-readable deterministic visual representation of the hash
+(i.e. Identicons, Blockies et al.) when possible. allow users to expand the full address/hash and
+copy. [UX/UI] Apply relevance to interrupting messages only for information relevant to the
+current user. [UX/UI] Clarify which data comes from the blockchain and which doesn’t.
[UX/UI] Types of transactions i.e. value transfers, function calls, contract generating.
-[UX/UI] When a blockchain event aborts or otherwise fails to complete as expected, the fallback must remain functional with resulting blockchain state clear.
-[UX/UI] Allow users to subscribe-to, unsubscribe-from or temporarily mute certain events.
-[UX/UI] Errors MUST populate back to the user.
-[UX/UI] Budget performance and response time so that stallouts or failovers can be approximated in worse-case
-
+[UX/UI] When a blockchain event aborts or otherwise fails to complete as expected, the fallback must
+remain functional with resulting blockchain state clear. [UX/UI] Allow users to subscribe-to,
+unsubscribe-from or temporarily mute certain events. [UX/UI] Errors MUST populate back to the
+user. [UX/UI] Budget performance and response time so that stallouts or failovers can be
+approximated in worse-case
#### Example: Bad UI/UX can cost big
-UI issue causes Citibank to accidentally pay off its insolvent client's $900M loan.
- (accessed, 2021.12.20)
+UI issue causes Citibank to accidentally pay off its insolvent client's $900M loan.
+ (accessed,
+2021.12.20)
---
-
## UI/X - Design Decision Records
-
## Colors - Semantic Aliases
A guide to providing semantic aliases for colors.
-Referencing color scales by their actual scale name can work well, like `blue` and `red`.
-But often, creating semantic aliases like `accent`, `primary`, `neutral`, or `brand` can be helpful, especially when it comes to theming.
-
+Referencing color scales by their actual scale name can work well, like `blue` and `red`. But often,
+creating semantic aliases like `accent`, `primary`, `neutral`, or `brand` can be helpful, especially
+when it comes to theming.
#### Bad Color Aliasing
@@ -111,20 +114,18 @@ But often, creating semantic aliases like `accent`, `primary`, `neutral`, or `br
## Why Color Alias Matters
-With this approach, you will likely run into issues where you need to use the same scale for multiple semantics. Common examples include:
+With this approach, you will likely run into issues where you need to use the same scale for
+multiple semantics. Common examples include:
-- If you map `yellow` to "**warning**", you might also need `yellow` to communicate "**pending**".
-
-- If you map `red` to "danger", you might also need `red` to communicate "error" or "rejected".
-
-- If you map `green` to "success", you might also need `green` to communicate "valid".
-
-- If you map `blue` to "accent", you might also need `blue` to communicate "info".
-
+- If you map `yellow` to "**warning**", you might also need `yellow` to communicate "**pending**".
+- If you map `red` to "danger", you might also need `red` to communicate "error" or "rejected".
+- If you map `green` to "success", you might also need `green` to communicate "valid".
+- If you map `blue` to "accent", you might also need `blue` to communicate "info".
-> 💡 In this scenario, you can choose to define multiple semantic aliases which map to the same scale.
+> 💡 In this scenario, you can choose to define multiple semantic aliases which map to the same
+> scale.
-#### Good Color Alias
+#### Good Color Alias
```css
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/blue.css';
@@ -147,11 +148,9 @@ With this approach, you will likely run into issues where you need to use the sa
--pending1: var(--yellow1);
--pending2: var(--yellow2);
}
-
```
-
-
+
## Table of Contents
- - [Table of Contents](#table-of-contents)
+- [Table of Contents](#table-of-contents)
- [Antipatterns](#antipatterns)
- [Strict email validation](#strict-email-validation)
- [Late returns](#late-returns)
@@ -277,29 +278,25 @@ You might also say: "Things that change together should be located as close as r
# Antipatterns
-Most of those are antipatterns in the Python programming language, but
-some of them might be more generic.
+Most of those are antipatterns in the Python programming language, but some of them might be more
+generic.
## Strict email validation
-It is almost impossible to strictly validate an email. Even if you were
-writing or using a regex that follows
-[RFC5322](http://tools.ietf.org/html/rfc5322#section-3.4), you would
-have false positives when trying to validate actual emails that don't
-follow the RFC.
+It is almost impossible to strictly validate an email. Even if you were writing or using a regex
+that follows [RFC5322](http://tools.ietf.org/html/rfc5322#section-3.4), you would have false
+positives when trying to validate actual emails that don't follow the RFC.
-What's more, validating an email provides very weak guarantees. A
-stronger, more meaningful validation would be to send an email and
-validate that the user received it.
+What's more, validating an email provides very weak guarantees. A stronger, more meaningful
+validation would be to send an email and validate that the user received it.
-To sum up, don't waste your time trying to validate an email if you
-don't need to (or just check that there's a `@` in it). If you need to,
-send an email with a token and validate that the user received it.
+To sum up, don't waste your time trying to validate an email if you don't need to (or just check
+that there's a `@` in it). If you need to, send an email with a token and validate that the user
+received it.
## Late returns
-Returning early reduces cognitive overhead, and improve readability by
-killing indentation levels.
+Returning early reduces cognitive overhead, and improve readability by killing indentation levels.
Bad:
@@ -331,15 +328,12 @@ toaster.restart()
There's multiple things wrong with this comment:
-- Even if it is actually a hack, no need to say it in a comment. It
- lowers the perceived quality of a codebase and impacts developer
- motivation.
-- Putting the author and the date is totally useless when using source
- control (`git blame`).
+- Even if it is actually a hack, no need to say it in a comment. It lowers the perceived quality of
+ a codebase and impacts developer motivation.
+- Putting the author and the date is totally useless when using source control (`git blame`).
- This does not explain why it's temporary.
- It's impossible to easily grep for temporary fixes.
-- [Louis de Funès](https://en.wikipedia.org/wiki/Louis_de_Fun%C3%A8s)
- would never write a hack.
+- [Louis de Funès](https://en.wikipedia.org/wiki/Louis_de_Fun%C3%A8s) would never write a hack.
Good:
@@ -350,8 +344,8 @@ toaster.restart()
```
- This clearly explains the nature of the temporary fix.
-- Using `TODO` is an ubiquitous pattern that allows easy grepping and
- plays nice with most text editors.
+- Using `TODO` is an ubiquitous pattern that allows easy grepping and plays nice with most text
+ editors.
- The perceived quality of this temporary fix is much higher.
## Repeating arguments in function name
@@ -363,8 +357,8 @@ def get_by_color(color):
return Toasters.filter_by(color=color)
```
-Putting the argument name in both the function name and in arguments is,
-in most cases and for most interpreted languages, redundant.
+Putting the argument name in both the function name and in arguments is, in most cases and for most
+interpreted languages, redundant.
Good:
@@ -384,9 +378,8 @@ class Toasters(object):
pass
```
-This is bad because it's unnecessarily redundant
-(`Toasters.get_toaster(1)`). According to the single responsibility
-principle, a class should focus on one area of responsibility. So the
+This is bad because it's unnecessarily redundant (`Toasters.get_toaster(1)`). According to the
+single responsibility principle, a class should focus on one area of responsibility. So the
`Toasters` class should only focus on toasters object.
Good:
@@ -464,8 +457,8 @@ def get_data():
## Undeterministic tests
-When testing function that don't behave deterministically, it can be
-tempting to run them multiple time and average their results.
+When testing function that don't behave deterministically, it can be tempting to run them multiple
+time and average their results.
Bad:
@@ -490,9 +483,8 @@ def test_function():
There are multiple things that are wrong with this approach:
- This is a flaky test. Theoretically, this test could still fail.
-- This example is simple enough, but `function` might be doing some
- computationally expensive task, which would make this test severely
- inefficient.
+- This example is simple enough, but `function` might be doing some computationally expensive task,
+ which would make this test severely inefficient.
- The test is quite difficult to understand.
Good:
@@ -508,21 +500,16 @@ This is a deterministic test that clearly tells what's going on.
## Unbalanced boilerplate
-One thing to strive for in libraries is have as little boilerplate as
-possible, but not less.
+One thing to strive for in libraries is have as little boilerplate as possible, but not less.
-Not enough boilerplate: you'll spend hours trying to understand specific
-behaviors that are too magical/implicit. You will need flexibility and
-you won't be able to get it. Boilerplate is useful insofar as it
-increases
-[transparency](http://www.catb.org/esr/writings/taoup/html/ch01s06.html).
+Not enough boilerplate: you'll spend hours trying to understand specific behaviors that are too
+magical/implicit. You will need flexibility and you won't be able to get it. Boilerplate is useful
+insofar as it increases [transparency](http://www.catb.org/esr/writings/taoup/html/ch01s06.html).
-Too much boilerplate: users of your library will be stuck using outdated
-patterns. Users will write library to generate the boilerplate required
-by your library.
+Too much boilerplate: users of your library will be stuck using outdated patterns. Users will write
+library to generate the boilerplate required by your library.
-I think Flask and SQLAlchemy do a very good job at keeping this under
-control.
+I think Flask and SQLAlchemy do a very good job at keeping this under control.
## Inconsistent use of verbs in functions
@@ -546,17 +533,15 @@ def find_toasts(color):
return filter(lambda toast: toast.color == color, TOASTS)
```
-The use of verb is inconsistent in this example. `get` is used to return
-a possibly empty list of toasters, and `find` is used to return a single
-toaster (or raise an exception) in the second function or a possibly
-empty list of toasts in the third function.
+The use of verb is inconsistent in this example. `get` is used to return a possibly empty list of
+toasters, and `find` is used to return a single toaster (or raise an exception) in the second
+function or a possibly empty list of toasts in the third function.
This is based on personal taste but I have the following rule:
-- `get` prefixes function that return at most one object (they either
- return none or raise an exception depending on the cases)
-- `find` prefixes function that return a possibly empty list (or
- iterable) of objects.
+- `get` prefixes function that return at most one object (they either return none or raise an
+ exception depending on the cases)
+- `find` prefixes function that return a possibly empty list (or iterable) of objects.
Good:
@@ -601,16 +586,15 @@ def create2(*args, **kwargs):
Why is this bad?
-- It's really easy to make a mistake, especially in interpreted
- languages such as Python. For instance, if I call
- `create({'name': 'hello', 'ccolor': 'blue'})`, I won't get any error,
- but the color won't be the one I expect.
-- It increases cognitive load, as I have to understand where the object
- is coming from to introspect its content.
+- It's really easy to make a mistake, especially in interpreted languages such as Python. For
+ instance, if I call `create({'name': 'hello', 'ccolor': 'blue'})`, I won't get any error, but the
+ color won't be the one I expect.
+- It increases cognitive load, as I have to understand where the object is coming from to introspect
+ its content.
- It makes the job of static analyzer harder or impossible.
-Granted, this pattern is sometimes required (for instance when the
-number of params is too large, or when dealing with pure data).
+Granted, this pattern is sometimes required (for instance when the number of params is too large, or
+when dealing with pure data).
A better way is to be explicit:
@@ -641,10 +625,9 @@ def get_url(user_id):
return 'http://127.0.0.1/users/%s' % user_id
```
-I consider this an antipattern because it hides the request formatting
-from the developer, making it more complex to see what `url` look like.
-In this extreme example, the formatting function is a one-liner which
-sounds a bit overkill for a function.
+I consider this an antipattern because it hides the request formatting from the developer, making it
+more complex to see what `url` look like. In this extreme example, the formatting function is a
+one-liner which sounds a bit overkill for a function.
Good:
@@ -654,12 +637,11 @@ def get_user(user_id):
return requests.get(url)
```
-Even if you were duplicating the logic once or twice it might still be
-fine, because:
+Even if you were duplicating the logic once or twice it might still be fine, because:
- You're unlikely to re-use anywhere else outside this file.
-- Putting this inline makes it easier for follow the flow. Code is
- written to be read primarily by computers.
+- Putting this inline makes it easier for follow the flow. Code is written to be read primarily by
+ computers.
## Returning nothing instead of raising NotFound exception
@@ -679,17 +661,14 @@ def toast(toaster_id):
toaster.toast("brioche")
```
-It all depends on the caller, but in this cases I'd argue that it is bad
-practice to return nothing when the toaster identified by `toaster_id`
-can't be found, for two main reasons.
+It all depends on the caller, but in this cases I'd argue that it is bad practice to return nothing
+when the toaster identified by `toaster_id` can't be found, for two main reasons.
-**First reason**: when we provide an identifier, we expect it to return
-something. Once again, this depends on the caller (for instance, we
-could try to see if a user exists by checking an email for instance). In
-this simple example it's ok because the `toaster.toast()` will fail
-immediately, but what if we were never calling it and creating some
-other unrelated objects? We would be doing things that we should never
-be doing if the object did not exist:
+**First reason**: when we provide an identifier, we expect it to return something. Once again, this
+depends on the caller (for instance, we could try to see if a user exists by checking an email for
+instance). In this simple example it's ok because the `toaster.toast()` will fail immediately, but
+what if we were never calling it and creating some other unrelated objects? We would be doing things
+that we should never be doing if the object did not exist:
```python
def toast(toaster_id, user):
@@ -699,12 +678,11 @@ def toast(toaster_id, user):
bill_new_toaster(user)
```
-**Second reason**: `toaster.toast` will fail anyway if `toaster` is none
-(in Python with `AttributeError: NoneType has no attribute toast`). In
-this abstract example it's ok because the two lines are next to each
-other, but the actual `toaster.toast()` call might happen further down
-the stack - and it will be very difficult for the developer to
-understand where the error is coming from.
+**Second reason**: `toaster.toast` will fail anyway if `toaster` is none (in Python with
+`AttributeError: NoneType has no attribute toast`). In this abstract example it's ok because the two
+lines are next to each other, but the actual `toaster.toast()` call might happen further down the
+stack - and it will be very difficult for the developer to understand where the error is coming
+from.
```python
def toast(toaster_id, user):
@@ -726,10 +704,9 @@ def do_stuff_b(toaster):
What's the correct things to do?
-- If you expect the object to be there, make sure to raise if you don't
- find it.
-- If you're using SQLAlchemy, use `one()` to force raising an exception
- if the object can't be found. Don't use `first` or `one_or_none()`.
+- If you expect the object to be there, make sure to raise if you don't find it.
+- If you're using SQLAlchemy, use `one()` to force raising an exception if the object can't be
+ found. Don't use `first` or `one_or_none()`.
## Having a library that contains all utils
@@ -748,26 +725,23 @@ def upload_to_sftp(...):
...
```
-`util` or `tools` or `lib` modules that contain all sorts of utilities
-have a tendency to become bloated and unmaintainable. Prefer to have
-small, dedicated files.
+`util` or `tools` or `lib` modules that contain all sorts of utilities have a tendency to become
+bloated and unmaintainable. Prefer to have small, dedicated files.
-This will keep your imports logical (`lib.date_utils`, `lib.csv_utils`,
-`lib.sftp`), make it easier for the reader to identify all the utilities
-around a specific topic, and test files easy to keep organized.
+This will keep your imports logical (`lib.date_utils`, `lib.csv_utils`, `lib.sftp`), make it easier
+for the reader to identify all the utilities around a specific topic, and test files easy to keep
+organized.
-
-
-### Conformance: Configurations for linting, etc
+### Conformance: Configurations for linting, etc
> Engineering and Design Practices
- [Conformance](#conformance)
- * [Prettier](#prettier)
- + [whitespace](#whitespace)
- + [arrow-parens](#arrow-parens)
- + [comma-dangle](#202-additional-trailing-comma--yup-eslint--comma-dangle)
- + [implicit-arrow-linebreak](#86-enforce-the-location-of-arrow-function-bodies-with-implicit-returns-eslint--implicit-arrow-linebreak)
+ - [Prettier](#prettier)
+ - [whitespace](#whitespace)
+ - [arrow-parens](#arrow-parens)
+ - [comma-dangle](#202-additional-trailing-comma--yup-eslint--comma-dangle)
+ - [implicit-arrow-linebreak](#86-enforce-the-location-of-arrow-function-bodies-with-implicit-returns-eslint--implicit-arrow-linebreak)
- [Naming Convention](#naming-convention)
- [Naming Components](#naming-components)
- [Class vs `React.createClass` vs stateless](#class-vs--reactcreateclass--vs-stateless)
@@ -786,23 +760,22 @@ around a specific topic, and test files easy to keep organized.
- [General Constructs](#general-constructs)
- [Style](#style)
- [Reference Specification](#reference-specification)
- * [System UI](#system-ui)
- + [Scale Objects](#scale-objects)
- + [Scale Aliases](#scale-aliases)
- + [Excluded Values](#excluded-values)
- * [Keys](#keys)
- + [Space](#space)
- * [Breakpoints](#breakpoints)
- + [Media Queries](#media-queries)
- * [Key Reference](#key-reference)
- * [Prior Art](#prior-art)
-
+ - [System UI](#system-ui)
+ - [Scale Objects](#scale-objects)
+ - [Scale Aliases](#scale-aliases)
+ - [Excluded Values](#excluded-values)
+ - [Keys](#keys)
+ - [Space](#space)
+ - [Breakpoints](#breakpoints)
+ - [Media Queries](#media-queries)
+ - [Key Reference](#key-reference)
+ - [Prior Art](#prior-art)
## Conformance
Conformance objectives are to reduce AST diff churn and improve developer experience
-### Prettier
+### Prettier
### whitespace
@@ -820,8 +793,7 @@ const foo = { clark: 'kent' };
#### arrow-parens
-- 8.4 Always include parentheses around arguments for clarity and consistency.
- eslint: arrow-parens
+- 8.4 Always include parentheses around arguments for clarity and consistency. eslint: arrow-parens
[source@airbnb/javascript#arrows--one-arg-parens](https://github.com/airbnb/javascript#arrows--one-arg-parens)
@@ -861,13 +833,11 @@ const foo = { clark: 'kent' };
##### one var
-- 13.2 Use one const or let declaration per variable or assignment. eslint:
- one-var
+- 13.2 Use one const or let declaration per variable or assignment. eslint: one-var
-> Why? It’s easier to add new variable declarations this way, and you never have
-> to worry about swapping out a ; for a , or introducing punctuation-only diffs.
-> You can also step through each declaration with the debugger, instead of
-> jumping through all of them at once.
+> Why? It’s easier to add new variable declarations this way, and you never have to worry about
+> swapping out a ; for a , or introducing punctuation-only diffs. You can also step through each
+> declaration with the debugger, instead of jumping through all of them at once.
##### [ref:eslint/rules/one-var](https://eslint.org/docs/rules/one-var)
@@ -891,7 +861,7 @@ const dragonball = 'z';
#### comma-dangle
-> 20.2 Additional trailing comma: Yup. eslint:
+> 20.2 Additional trailing comma: Yup. eslint:
Why? This leads to cleaner git diffs. Also, transpilers like Babel will remove the additional trailing comma in the transpiled code which means you don’t have to worry about the trailing comma problem in legacy browsers.
@@ -914,7 +884,7 @@ const hero = {
#### implicit-arrow-linebreak
-Enforce the location of arrow function bodies with implicit returns. eslint:
+Enforce the location of arrow function bodies with implicit returns. eslint:
```js
// bad
@@ -928,118 +898,122 @@ Enforce the location of arrow function bodies with implicit returns. eslint:
(foo) => bar;
```
-
## Naming Convention
-We recommend using camel case, pascal case or snake case for your theme tokens. Other word separators may not work as expected.
+We recommend using camel case, pascal case or snake case for your theme tokens. Other word
+separators may not work as expected.
```js
// recommended
-tokenName
-token_name
-token-name
+tokenName;
+token_name;
+token - name;
// avoid
-token.name
-token$name
-token*name
+token.name;
+token$name;
+token * name;
```
## Naming Components
- - **Extensions**: Use `.jsx` extension for React components. eslint: [`react/jsx-filename-extension`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md)
- - **Filename**: Use PascalCase for filenames. E.g., `ReservationCard.jsx`.
- - **Reference Naming**: Use PascalCase for React components and camelCase for their instances. eslint: [`react/jsx-pascal-case`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md)
+- **Extensions**: Use `.jsx` extension for React components. eslint:
+ [`react/jsx-filename-extension`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md)
+- **Filename**: Use PascalCase for filenames. E.g., `ReservationCard.jsx`.
+- **Reference Naming**: Use PascalCase for React components and camelCase for their instances.
+ eslint:
+ [`react/jsx-pascal-case`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md)
```jsx
- // bad
- import reservationCard from './ReservationCard';
+// bad
+import reservationCard from './ReservationCard';
- // good
- import ReservationCard from './ReservationCard';
+// good
+import ReservationCard from './ReservationCard';
- // bad
- const ReservationItem = ;
+// bad
+const ReservationItem = ;
- // good
- const reservationItem = ;
- ```
+// good
+const reservationItem = ;
+```
-- **Component Naming**: Use the filename as the component name. For example, `ReservationCard.jsx` should have a reference name of `ReservationCard`. However, for root components of a directory, use `index.jsx` as the filename and use the directory name as the component name:
+- **Component Naming**: Use the filename as the component name. For example, `ReservationCard.jsx`
+ should have a reference name of `ReservationCard`. However, for root components of a directory,
+ use `index.jsx` as the filename and use the directory name as the component name:
```jsx
- // bad
- import Footer from './Footer/Footer';
+// bad
+import Footer from './Footer/Footer';
- // bad
- import Footer from './Footer/index';
+// bad
+import Footer from './Footer/index';
- // good
- import Footer from './Footer';
+// good
+import Footer from './Footer';
```
-
## Class vs `React.createClass` vs stateless
- - If you have internal state and/or refs, prefer `class extends React.Component` over `React.createClass`. eslint: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md) [`react/prefer-stateless-function`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md)
+- If you have internal state and/or refs, prefer `class extends React.Component` over
+ `React.createClass`. eslint:
+ [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md)
+ [`react/prefer-stateless-function`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md)
```jsx
- // bad
- const Listing = React.createClass({
- // ...
- render() {
- return
;
+ }
+}
```
> And if you don’t have state or refs, prefer normal functions (not arrow functions) over classes:
```jsx
- // bad
- class Listing extends React.Component {
- render() {
- return
;
+}
```
## TypeScript
These guidelines are adapted from the TypeScript core's contributor coding guidelines.
-* [Names](#names)
-* [Exports](#exports)
-* [Components](#components)
-* [Types](#types)
-* [`null` and `undefined`](#null-and-undefined)
-* [General Assumptions](#general-assumptions)
-* [Flags](#flags)
-* [Comments](#comments)
-* [Strings](#strings)
-* [When to use `any`](#when-to-use-any)
-* [Diagnostic Messages](#diagnostic-messages)
-* [General Constructs](#general-constructs)
-* [Style](#style)
-
+- [Names](#names)
+- [Exports](#exports)
+- [Components](#components)
+- [Types](#types)
+- [`null` and `undefined`](#null-and-undefined)
+- [General Assumptions](#general-assumptions)
+- [Flags](#flags)
+- [Comments](#comments)
+- [Strings](#strings)
+- [When to use `any`](#when-to-use-any)
+- [Diagnostic Messages](#diagnostic-messages)
+- [General Constructs](#general-constructs)
+- [Style](#style)
## Names
@@ -1050,19 +1024,26 @@ These guidelines are adapted from the TypeScript core's contributor coding guide
5. Use camelCase for property names and local variables.
6. Do not use "\_" as a prefix for private properties.
7. Use whole words in names when possible.
-8. Use `isXXXing` or `hasXXXXed` for variables representing states of things (e.g. `isLoading`, `hasCompletedOnboarding`).
+8. Use `isXXXing` or `hasXXXXed` for variables representing states of things (e.g. `isLoading`,
+ `hasCompletedOnboarding`).
9. Give folders/files/components/functions unique names.
## Exports
-1. Only use named exports. The only exceptions are a tool requires default exports (e.g `React.lazy()`, Gatsby and Next.js `pages`, `typography.js`)
+1. Only use named exports. The only exceptions are a tool requires default exports (e.g
+ `React.lazy()`, Gatsby and Next.js `pages`, `typography.js`)
## Components
1. 1 file per logical component (e.g. parser, scanner, emitter, checker).
-2. If not kept in a separate folder, files with ".generated.\*" suffix are auto-generated, do not hand-edit them.
+2. If not kept in a separate folder, files with ".generated.\*" suffix are auto-generated, do not
+ hand-edit them.
3. Tests should be kept in the same directory with ".test.\*" suffix
-4. Filename should match the component name. Interfaces for React components should be called `Props` and `State`. The only exception is when writing a render prop. In this situation, you, the author, should call the interface for your component's props `Config` and then the render prop interface `Props` so it is easy for everyone else to use.
+4. Filename should match the component name. Interfaces for React components should be called
+ `Props` and `State`. The only exception is when writing a render
+ prop. In this situation, you, the author, should call the interface for your component's props
+ `Config` and then the render prop interface `Props` so it is easy
+ for everyone else to use.
## Types
@@ -1073,11 +1054,13 @@ These guidelines are adapted from the TypeScript core's contributor coding guide
## `null` and `undefined`
-1. Use **undefined**. Do not use `null`. EVER. If null is used (like in legacy Redux code), it should be kept isolated from other code with selectors.
+1. Use **undefined**. Do not use `null`. EVER. If null is used (like in legacy Redux code), it
+ should be kept isolated from other code with selectors.
## General Assumptions
-1. Consider objects like Nodes, Symbols, etc. as immutable outside the component that created them. Do not change them.
+1. Consider objects like Nodes, Symbols, etc. as immutable outside the component that created them.
+ Do not change them.
2. Consider arrays as immutable by default after creation.
## Flags
@@ -1087,7 +1070,8 @@ These guidelines are adapted from the TypeScript core's contributor coding guide
## Comments
1. Use JSDoc style comments for functions, interfaces, enums, and classes.
-2. **Document crazy stuff.** Always add `@see ` and the current date when referencing external resources, blog posts, tweets, snippets, gists, issues etc.
+2. **Document crazy stuff.** Always add `@see ` and the current date when referencing external
+ resources, blog posts, tweets, snippets, gists, issues etc.
3. Make note conditions upon which hacks and smelly code can be removed.
## Strings
@@ -1097,8 +1081,10 @@ These guidelines are adapted from the TypeScript core's contributor coding guide
## When to use `any`
-1. If something takes you longer than 10 minutes to type or you feel the need to read through TS Advanced Types docs, you should take a step back and ask for help, or use `any`.
-2. Custom typings of 3rd-party modules should be added to a `.d.ts` file in a `typings` directory. Document the date and version of the module you are typing at the top of the file.
+1. If something takes you longer than 10 minutes to type or you feel the need to read through TS
+ Advanced Types docs, you should take a step back and ask for help, or use `any`.
+2. Custom typings of 3rd-party modules should be added to a `.d.ts` file in a `typings` directory.
+ Document the date and version of the module you are typing at the top of the file.
3. Consider rewriting tiny modules in typescript if types are too hard to think through.
## Diagnostic Messages
@@ -1106,7 +1092,8 @@ These guidelines are adapted from the TypeScript core's contributor coding guide
1. Use a period at the end of a sentence.
2. Use indefinite articles for indefinite entities.
3. Definite entities should be named (this is for a variable name, type name, etc..).
-4. When stating a rule, the subject should be in the singular (e.g. "An external module cannot..." instead of "External modules cannot...").
+4. When stating a rule, the subject should be in the singular (e.g. "An external module cannot..."
+ instead of "External modules cannot...").
5. Use present tense.
6. Use active voice.
@@ -1114,51 +1101,55 @@ These guidelines are adapted from the TypeScript core's contributor coding guide
For a variety of reasons, we avoid certain constructs, and use some of our own. Among them:
-1. Do not use `for..in` statements; instead, use `ts.forEach`, `ts.forEachKey` and `ts.forEachValue`. Be aware of their slightly different semantics.
-2. Try to use `ts.forEach`, `ts.map`, and `ts.filter` instead of loops when it is not strongly inconvenient.
+1. Do not use `for..in` statements; instead, use `ts.forEach`, `ts.forEachKey` and
+ `ts.forEachValue`. Be aware of their slightly different semantics.
+2. Try to use `ts.forEach`, `ts.map`, and `ts.filter` instead of loops when it is not strongly
+ inconvenient.
## Style
0. Use prettier and tslint/eslint.
1. Use arrow functions over anonymous function expressions.
-1. Only surround arrow function parameters when necessary. For example, `(x) => x + x` is wrong but the following are correct:
+1. Only surround arrow function parameters when necessary. For example, `(x) => x + x` is
+ wrong but the following are correct:
1. `x => x + x`
2. `(x,y) => x + y`
3. `(x: T, y: T) => x === y`
-1. Always surround loop and conditional bodies with curly braces. Statements on the same line are allowed to omit braces.
+1. Always surround loop and conditional bodies with curly braces. Statements on the same line are
+ allowed to omit braces.
1. Open curly braces always go on the same line as whatever necessitates them.
-1. Parenthesized constructs should have no surrounding whitespace. A single space follows commas, colons, and semicolons in those constructs. For example:
+1. Parenthesized constructs should have no surrounding whitespace. A single space follows
+ commas, colons, and semicolons in those constructs. For example:
1. `for (var i = 0, n = str.length; i < 10; i++) { }`
2. `if (x < 10) { }`
3. `function f(x: number, y: string): void { }`
-1. Use a single declaration per variable statement (i.e. use `var x = 1; var y = 2;` over `var x = 1, y = 2;`).
+1. Use a single declaration per variable statement (i.e. use `var x = 1; var y = 2;` over
+ `var x = 1, y = 2;`).
1. Use 2 spaces per indentation.
-
## Reference Specification
### System UI
> [System UI Theme Specification](https://system-ui.com]
-
-The theme object is intended to be a general purpose format for storing design system style values, scales, and/or design tokens.
-The object itself is not coupled to any particular library's implementation and can be used
-in places where sharing common style values in multiple parts of a code base is desirable.
+The theme object is intended to be a general purpose format for storing design system style values,
+scales, and/or design tokens. The object itself is not coupled to any particular library's
+implementation and can be used in places where sharing common style values in multiple parts of a
+code base is desirable.
#### Scale Objects
-Many CSS style properties accept open-ended values like lengths, colors, and font names.
-In order to create a consistent styling system, the theme object is centered around the idea of scales,
-such as a typographic (font-size) scale, a spacing scale for margin and padding, and a color object.
-These scales can be defined in multiple ways depending on needs, but tend to use arrays for ordinal values like font sizes,
-or plain objects for named values like colors, with the option of nesting objects for more complex systems.
+Many CSS style properties accept open-ended values like lengths, colors, and font names. In order to
+create a consistent styling system, the theme object is centered around the idea of scales, such as
+a typographic (font-size) scale, a spacing scale for margin and padding, and a color object. These
+scales can be defined in multiple ways depending on needs, but tend to use arrays for ordinal values
+like font sizes, or plain objects for named values like colors, with the option of nesting objects
+for more complex systems.
```js
// example fontSizes scale as an array
-fontSizes: [
- 12, 14, 16, 20, 24, 32
-]
+fontSizes: [12, 14, 16, 20, 24, 32];
```
```js
@@ -1184,49 +1175,52 @@ colors: {
#### Scale Aliases
-For typically ordinal values like font sizes that are stored in arrays, it can be helpful to create aliases by adding named properties to the object.
+For typically ordinal values like font sizes that are stored in arrays, it can be helpful to create
+aliases by adding named properties to the object.
```js
// example fontSizes aliases
-fontSizes: [
- 12, 14, 16, 20, 24, 32
-]
+fontSizes: [12, 14, 16, 20, 24, 32];
// aliases
-fontSizes.body = fontSizes[2]
-fontSizes.display = fontSizes[5]
+fontSizes.body = fontSizes[2];
+fontSizes.display = fontSizes[5];
```
#### Excluded Values
-Some CSS properties accept only a small, finite number of valid CSS values and should *not* be included as a scale object.
-For example, the `text-align` property accepts the following values:
-`left`, `right`, `center`, `justify`, `justify-all`, `start`, `end`, or `match-parent`.
-Other properties that are intentionally excluded from this specification include: `float`, `clear`, `display`, `overflow`, `position`, `vertical-align`, `align-items`, `justify-content`, and `flex-direction`.
+Some CSS properties accept only a small, finite number of valid CSS values and should _not_ be
+included as a scale object. For example, the `text-align` property accepts the following values:
+`left`, `right`, `center`, `justify`, `justify-all`, `start`, `end`, or `match-parent`. Other
+properties that are intentionally excluded from this specification include: `float`, `clear`,
+`display`, `overflow`, `position`, `vertical-align`, `align-items`, `justify-content`, and
+`flex-direction`.
### Keys
-The keys in the theme object should typically correspond with the CSS properties they are used for, and follow a plural naming convention.
-For example, the CSS property `font-size` is expected to use values from the `fontSizes` scale, and the `color` property uses values from the `colors` scale.
-
-Some keys can be used for multiple CSS properties, where the data type is the same.
-The `color` object is intended to be used with any property that accepts a CSS color value, such as `background-color` or `border-color`.
+The keys in the theme object should typically correspond with the CSS properties they are used for,
+and follow a plural naming convention. For example, the CSS property `font-size` is expected to use
+values from the `fontSizes` scale, and the `color` property uses values from the `colors` scale.
+Some keys can be used for multiple CSS properties, where the data type is the same. The `color`
+object is intended to be used with any property that accepts a CSS color value, such as
+`background-color` or `border-color`.
#### Space
-The `space` key is a specially-named scale intended for use with margin, padding, and other layout-related CSS properties.
-A space scale can be defined as either a plain object or an array, but by convention an array is preferred.
-This is an intentional constraint that makes it difficult to add *"one-off"* or *"in-between"* sizes that could lead to unwanted and rippling affects to layout.
+The `space` key is a specially-named scale intended for use with margin, padding, and other
+layout-related CSS properties. A space scale can be defined as either a plain object or an array,
+but by convention an array is preferred. This is an intentional constraint that makes it difficult
+to add _"one-off"_ or _"in-between"_ sizes that could lead to unwanted and rippling affects to
+layout.
-> Note: other names under consideration include *spacing*, *spaces*, and *lengths*.
+> Note: other names under consideration include _spacing_, _spaces_, and _lengths_.
-When defining space scales as an array, it is conventional to use the value `0` as the first value so that `space[0] === 0`.
+When defining space scales as an array, it is conventional to use the value `0` as the first value
+so that `space[0] === 0`.
```js
// example space scale
-space: [
- 0, 4, 8, 16, 32, 64
-]
+space: [0, 4, 8, 16, 32, 64];
```
```js
@@ -1240,22 +1234,21 @@ space: {
```js
// example space scale with aliases
-space: [
- 0, 4, 8, 16, 32
-]
-space.small = space[1]
-space.medium = space[2]
-space.large = space[3]
+space: [0, 4, 8, 16, 32];
+space.small = space[1];
+space.medium = space[2];
+space.large = space[3];
```
### Breakpoints
-Breakpoints are CSS lengths intended for use in media queries.
-Commonly, the breakpoints scale is used to create mobile-first responsive media queries based on array values.
+Breakpoints are CSS lengths intended for use in media queries. Commonly, the breakpoints scale is
+used to create mobile-first responsive media queries based on array values.
#### Media Queries
-For convenience and for use with other styling approaches, a `mediaQueries` scale derived from the `breakpoints` scale can be added to the theme object.
+For convenience and for use with other styling approaches, a `mediaQueries` scale derived from the
+`breakpoints` scale can be added to the theme object.
```js
breakpoints: [ '40em', '52em', '64em' ]
@@ -1269,30 +1262,31 @@ mediaQueries: {
### Key Reference
-The following is a list of theme object keys and their corresponding CSS properties.
-This list may be non-exhaustive.
-
-Theme Key | CSS Properties
-------------------|--------------
-`space` | `margin`, `margin-top`, `margin-right`, `margin-bottom`, `margin-left`, `padding`, `padding-top`, `padding-right`, `padding-bottom`, `padding-left`, `grid-gap`, `grid-column-gap`, `grid-row-gap`
-`fontSizes` | `font-size`
-`colors` | `color`, `background-color`, `border-color`
-`fonts` | `font-family`
-`fontWeights` | `font-weight`
-`lineHeights` | `line-height`
-`letterSpacings` | `letter-spacing`
-`sizes` | `width`, `height`, `min-width`, `max-width`, `min-height`, `max-height`
-`borders` | `border`, `border-top`, `border-right`, `border-bottom`, `border-left`
-`borderWidths` | `border-width`
-`borderStyles` | `border-style`
-`radii` | `border-radius`
-`shadows` | `box-shadow`, `text-shadow`
-`zIndices` | `z-index`
-`transitions` | `transition`
+The following is a list of theme object keys and their corresponding CSS properties. This list may
+be non-exhaustive.
+
+| Theme Key | CSS Properties |
+| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `space` | `margin`, `margin-top`, `margin-right`, `margin-bottom`, `margin-left`, `padding`, `padding-top`, `padding-right`, `padding-bottom`, `padding-left`, `grid-gap`, `grid-column-gap`, `grid-row-gap` |
+| `fontSizes` | `font-size` |
+| `colors` | `color`, `background-color`, `border-color` |
+| `fonts` | `font-family` |
+| `fontWeights` | `font-weight` |
+| `lineHeights` | `line-height` |
+| `letterSpacings` | `letter-spacing` |
+| `sizes` | `width`, `height`, `min-width`, `max-width`, `min-height`, `max-height` |
+| `borders` | `border`, `border-top`, `border-right`, `border-bottom`, `border-left` |
+| `borderWidths` | `border-width` |
+| `borderStyles` | `border-style` |
+| `radii` | `border-radius` |
+| `shadows` | `box-shadow`, `text-shadow` |
+| `zIndices` | `z-index` |
+| `transitions` | `transition` |
### Prior Art
-Prior art includes, but is not limited to the following. Please open an issue or pull request to help ensure this list is inclusive.
+Prior art includes, but is not limited to the following. Please open an issue or pull request to
+help ensure this list is inclusive.
- [Theo](https://github.com/salesforce-ux/theo)
- [Style Dictionary](https://amzn.github.io/style-dictionary/)
diff --git a/README.md b/README.md
index c8f7fcc..f31a4f6 100644
--- a/README.md
+++ b/README.md
@@ -4,11 +4,13 @@
> a performant web3 react library
-
> [Read the Disco3 Design and Arch. Document](https://github.com/manifoldfinance/disco3-react/blob/master/DISCO3.md)
+
---
-[](https://bestpractices.coreinfrastructure.org/projects/5693) [](https://etherscan.io/enslookup-search?search=manifoldfinance.eth) [](https://github.com/manifoldfinance/disco3-react 'Go to GitHub repo')
+[](https://github.com/manifoldfinance/disco3-react/actions/workflows/pipeline-release.yml)
+[](https://github.com/manifoldfinance/disco3-react/actions/workflows/coverage.yml)
+
| package | description |
| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -21,6 +23,9 @@
---
+[](https://etherscan.io/enslookup-search?search=manifoldfinance.eth)
+[](https://github.com/manifoldfinance/disco3-react 'Go to GitHub repo')
+
### Overview
- turborepo
@@ -36,8 +41,8 @@
### Setup
-This repository is used in the `npx create-turbo` command, and selected when
-choosing which package manager you wish to use with your Monorepo (Yarn).
+This repository is used in the `npx create-turbo` command, and selected when choosing which package
+manager you wish to use with your Monorepo (Yarn).
#### Build
@@ -60,3 +65,5 @@ turbo run build
Portions under: - GPL-3.0 - Apache-2.0
See package for more information
+
+[](https://bestpractices.coreinfrastructure.org/projects/5693)
diff --git a/jest.config.js b/jest.config.js
index d41a5bc..cbabb34 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,18 +1,5 @@
-'use strict';
-
-// @ts-check
-/** @type {import('@jest/types').Config.InitialOptions} */
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom',
- collectCoverage: true,
- collectCoverageFrom: ['packages/**/*.{ts,tsx}'],
- moduleNameMapper: {
- '^@disco3/(.*)$': '/packages/$1/src',
- },
-testPathIgnorePatterns: [
-'/packages/network',
-'/packages/url',
-'/packages/components',
-]
-}
+};
diff --git a/modules/coinbase-wallet/package.json b/modules/coinbase-wallet/package.json
new file mode 100644
index 0000000..ba8c025
--- /dev/null
+++ b/modules/coinbase-wallet/package.json
@@ -0,0 +1,33 @@
+{
+ "name": "@disco3/coinbase-wallet",
+ "keywords": [
+ "web3-react",
+ "coinbase wallet"
+ ],
+ "publishConfig": {
+ "access": "public"
+ },
+ "version": "8.1.0",
+ "files": [
+ "dist/*"
+ ],
+ "type": "commonjs",
+ "types": "./dist/index.d.ts",
+ "main": "./dist/index.js",
+ "exports": "./dist/index.js",
+ "scripts": {
+ "prebuild": "rm -rf dist",
+ "build": "tsc",
+ "start": "tsc --watch"
+ },
+ "dependencies": {
+ "@coinbase/wallet-sdk": "^3.0.4",
+ "@disco3/types": "8.1.0"
+ },
+ "peerDependencies": {
+ "@coinbase/wallet-sdk": "^3.0.1"
+ },
+ "devDependencies": {
+ "@disco3/store": "^8.0.13-beta.0"
+ }
+}
diff --git a/modules/coinbase-wallet/src/index.spec.ts b/modules/coinbase-wallet/src/index.spec.ts
new file mode 100644
index 0000000..da24128
--- /dev/null
+++ b/modules/coinbase-wallet/src/index.spec.ts
@@ -0,0 +1,56 @@
+import { createWeb3ReactStoreAndActions } from '@disco3/store';
+import type { Actions, Web3ReactStore } from '@disco3/types';
+import { CoinbaseWallet } from '.';
+
+import { MockEIP1193Provider } from '../../eip1193/src/index.spec';
+
+jest.mock(
+ '@coinbase/wallet-sdk',
+ () =>
+ class MockCoinbaseWallet {
+ makeWeb3Provider() {
+ return new MockEIP1193Provider();
+ }
+ },
+);
+
+const chainId = '0x1';
+const accounts: string[] = [];
+
+describe('Coinbase Wallet', () => {
+ let store: Web3ReactStore;
+ let connector: CoinbaseWallet;
+ let mockConnector: MockEIP1193Provider;
+
+ describe('connectEagerly = true', () => {
+ beforeEach(() => {
+ let actions: Actions;
+ [store, actions] = createWeb3ReactStoreAndActions();
+ connector = new CoinbaseWallet(
+ actions,
+ {
+ appName: 'test',
+ url: 'https://mock.url',
+ },
+ true,
+ );
+ });
+
+ beforeEach(async () => {
+ mockConnector = connector.provider as unknown as MockEIP1193Provider;
+ mockConnector.chainId = chainId;
+ mockConnector.accounts = accounts;
+ });
+
+ test('#activate', async () => {
+ await connector.activate();
+
+ expect(store.getState()).toEqual({
+ chainId: Number.parseInt(chainId, 16),
+ accounts,
+ activating: false,
+ error: undefined,
+ });
+ });
+ });
+});
diff --git a/modules/coinbase-wallet/src/index.ts b/modules/coinbase-wallet/src/index.ts
new file mode 100644
index 0000000..1cb43a3
--- /dev/null
+++ b/modules/coinbase-wallet/src/index.ts
@@ -0,0 +1,199 @@
+import type { CoinbaseWalletProvider, CoinbaseWalletSDK } from '@coinbase/wallet-sdk';
+import type {
+ Actions,
+ AddEthereumChainParameter,
+ ProviderConnectInfo,
+ ProviderRpcError,
+} from '@disco3/types';
+import { Connector } from '@disco3/types';
+
+function parseChainId(chainId: string | number) {
+ return typeof chainId === 'number'
+ ? chainId
+ : Number.parseInt(chainId, chainId.startsWith('0x') ? 16 : 10);
+}
+
+type CoinbaseWalletSDKOptions = ConstructorParameters[0] & {
+ url: string;
+};
+
+export class CoinbaseWallet extends Connector {
+ /** {@inheritdoc Connector.provider} */
+ public declare provider: CoinbaseWalletProvider | undefined;
+
+ private readonly options: CoinbaseWalletSDKOptions;
+ private eagerConnection?: Promise;
+
+ /**
+ * A `CoinbaseWalletSDK` instance.
+ */
+ public coinbaseWallet: CoinbaseWalletSDK | undefined;
+
+ /**
+ * @param options - Options to pass to `@coinbase/wallet-sdk`
+ * @param connectEagerly - A flag indicating whether connection should be initiated when the class is constructed.
+ */
+ constructor(actions: Actions, options: CoinbaseWalletSDKOptions, connectEagerly = false) {
+ super(actions);
+
+ if (connectEagerly && typeof window === 'undefined') {
+ throw new Error(
+ 'connectEagerly = true is invalid for SSR, instead use the connectEagerly method in a useEffect',
+ );
+ }
+
+ this.options = options;
+
+ if (connectEagerly) void this.connectEagerly();
+ }
+
+ // the `connected` property, is bugged, but this works as a hack to check connection status
+ private get connected() {
+ return !!this.provider?.selectedAddress;
+ }
+
+ private async isomorphicInitialize(): Promise {
+ if (this.eagerConnection) return this.eagerConnection;
+
+ await (this.eagerConnection = import('@coinbase/wallet-sdk').then((m) => {
+ const { url, ...options } = this.options;
+ this.coinbaseWallet = new m.default(options);
+ this.provider = this.coinbaseWallet.makeWeb3Provider(url);
+
+ this.provider.on('connect', ({ chainId }: ProviderConnectInfo): void => {
+ this.actions.update({ chainId: parseChainId(chainId) });
+ });
+
+ this.provider.on('disconnect', (error: ProviderRpcError): void => {
+ this.actions.reportError(error);
+ });
+
+ this.provider.on('chainChanged', (chainId: string): void => {
+ this.actions.update({ chainId: parseChainId(chainId) });
+ });
+
+ this.provider.on('accountsChanged', (accounts: string[]): void => {
+ this.actions.update({ accounts });
+ });
+ }));
+ }
+
+ /** {@inheritdoc Connector.connectEagerly} */
+ public async connectEagerly(): Promise {
+ const cancelActivation = this.actions.startActivation();
+
+ await this.isomorphicInitialize();
+
+ if (this.connected) {
+ return Promise.all([
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ this.provider!.request({ method: 'eth_chainId' }),
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ this.provider!.request({ method: 'eth_accounts' }),
+ ])
+ .then(([chainId, accounts]) => {
+ if (accounts.length) {
+ this.actions.update({ chainId: parseChainId(chainId), accounts });
+ } else {
+ throw new Error('No accounts returned');
+ }
+ })
+ .catch((error) => {
+ console.debug('Could not connect eagerly', error);
+ cancelActivation();
+ });
+ } else {
+ cancelActivation();
+ }
+ }
+
+ /**
+ * Initiates a connection.
+ *
+ * @param desiredChainIdOrChainParameters - If defined, indicates the desired chain to connect to. If the user is
+ * already connected to this chain, no additional steps will be taken. Otherwise, the user will be prompted to switch
+ * to the chain, if one of two conditions is met: either they already have it added, or the argument is of type
+ * AddEthereumChainParameter, in which case the user will be prompted to add the chain with the specified parameters
+ * first, before being prompted to switch.
+ */
+ public async activate(
+ desiredChainIdOrChainParameters?: number | AddEthereumChainParameter,
+ ): Promise {
+ const desiredChainId =
+ typeof desiredChainIdOrChainParameters === 'number'
+ ? desiredChainIdOrChainParameters
+ : desiredChainIdOrChainParameters?.chainId;
+
+ if (this.connected) {
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ if (!desiredChainId || desiredChainId === parseChainId(this.provider!.chainId)) return;
+
+ const desiredChainIdHex = `0x${desiredChainId.toString(16)}`;
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ return this.provider!.request({
+ method: 'wallet_switchEthereumChain',
+ params: [{ chainId: desiredChainIdHex }],
+ })
+ .catch(async (error: ProviderRpcError) => {
+ if (error.code === 4902 && typeof desiredChainIdOrChainParameters !== 'number') {
+ // if we're here, we can try to add a new network
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ return this.provider!.request({
+ method: 'wallet_addEthereumChain',
+ params: [{ ...desiredChainIdOrChainParameters, chainId: desiredChainIdHex }],
+ });
+ } else {
+ throw error;
+ }
+ })
+ .catch((error: ProviderRpcError) => {
+ this.actions.reportError(error);
+ });
+ }
+
+ this.actions.startActivation();
+ await this.isomorphicInitialize();
+
+ return Promise.all([
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ this.provider!.request({ method: 'eth_chainId' }),
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ this.provider!.request({ method: 'eth_requestAccounts' }),
+ ])
+ .then(([chainId, accounts]) => {
+ const receivedChainId = parseChainId(chainId);
+
+ if (!desiredChainId || desiredChainId === receivedChainId) {
+ return this.actions.update({ chainId: receivedChainId, accounts });
+ }
+
+ // if we're here, we can try to switch networks
+ const desiredChainIdHex = `0x${desiredChainId.toString(16)}`;
+ return this.provider
+ ?.request({
+ method: 'wallet_switchEthereumChain',
+ params: [{ chainId: desiredChainIdHex }],
+ })
+ .catch(async (error: ProviderRpcError) => {
+ if (error.code === 4902 && typeof desiredChainIdOrChainParameters !== 'number') {
+ // if we're here, we can try to add a new network
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ return this.provider!.request({
+ method: 'wallet_addEthereumChain',
+ params: [{ ...desiredChainIdOrChainParameters, chainId: desiredChainIdHex }],
+ });
+ } else {
+ throw error;
+ }
+ });
+ })
+ .catch((error: Error) => {
+ this.actions.reportError(error);
+ });
+ }
+
+ /** {@inheritdoc Connector.deactivate} */
+ public deactivate(): void {
+ this.coinbaseWallet?.disconnect();
+ }
+}
diff --git a/modules/coinbase-wallet/tsconfig.json b/modules/coinbase-wallet/tsconfig.json
new file mode 100644
index 0000000..c125f46
--- /dev/null
+++ b/modules/coinbase-wallet/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "extends": "../../tsconfig.json",
+ "include": ["./src"],
+ "compilerOptions": {
+ "outDir": "./dist",
+ "allowSyntheticDefaultImports": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUnusedParameters": true,
+ "noImplicitReturns": true,
+ "moduleResolution": "node",
+ "esModuleInterop": true,
+ "noUnusedLocals": true,
+ "noImplicitAny": true,
+ "declaration": true,
+ "target": "esnext",
+ "module": "es2020",
+ "strict": true,
+ "resolveJsonModule": true
+ }
+ }
diff --git a/packages/components/jest.config.ts b/modules/components/jest.config.ts
similarity index 88%
rename from packages/components/jest.config.ts
rename to modules/components/jest.config.ts
index 49729d6..d1eb6fd 100644
--- a/packages/components/jest.config.ts
+++ b/modules/components/jest.config.ts
@@ -26,10 +26,7 @@ const config: Config.InitialOptions = {
roots: [''],
testEnvironment: 'jsdom',
testRegex: '.*\\.test\\.(ts|tsx)$',
- watchPlugins: [
- 'jest-watch-typeahead/filename',
- 'jest-watch-typeahead/testname',
- ],
+ watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
};
export default config;
diff --git a/packages/components/package.json b/modules/components/package.json
similarity index 91%
rename from packages/components/package.json
rename to modules/components/package.json
index bb519a8..772c73c 100644
--- a/packages/components/package.json
+++ b/modules/components/package.json
@@ -1,7 +1,10 @@
{
- "name": "@disco3/components",
- "version": "0.0.1",
+ "name": "disco-web3",
+ "version": "0.0.3",
"description": "web3 design system for disco3",
+ "publishConfig": {
+ "access": "public"
+ },
"main": "./dist/index.cjs.js",
"module": "./dist/index.es.js",
"types": "./dist/types/index.d.ts",
@@ -45,9 +48,7 @@
"scripts": {
"build": "NODE_ENV=production npx vite build",
"clean": "rimraf dist src/components/icons/generated/",
- "lint:types": "npx tsc --noEmit",
- "prepack": "yarn build",
- "publish": "yarn npm publish",
+ "lint:types": "npx tsc --noEmit --jsx",
"test": "npx jest -u"
},
"dependencies": {
@@ -96,9 +97,9 @@
"rimraf": "^3.0.2",
"ts-jest": "^27.0.7",
"ts-node": "^10.4.0",
- "vite": "^2.6.13",
- "vite-plugin-dts": "^0.9.2",
- "vite-tsconfig-paths": "^3.3.17"
+ "vite": "^2.8.6",
+ "vite-plugin-dts": "^0.9.9",
+ "vite-tsconfig-paths": "^3.4.1"
},
"peerDependencies": {
"react": "^17",
diff --git a/packages/components/src/components/Avatar/Avatar.docs.mdx b/modules/components/src/components/Avatar/Avatar.docs.mdx
similarity index 100%
rename from packages/components/src/components/Avatar/Avatar.docs.mdx
rename to modules/components/src/components/Avatar/Avatar.docs.mdx
diff --git a/packages/components/src/components/Avatar/Avatar.snippets.tsx b/modules/components/src/components/Avatar/Avatar.snippets.tsx
similarity index 100%
rename from packages/components/src/components/Avatar/Avatar.snippets.tsx
rename to modules/components/src/components/Avatar/Avatar.snippets.tsx
diff --git a/packages/components/src/components/Avatar/Avatar.test.tsx b/modules/components/src/components/Avatar/Avatar.test.tsx
similarity index 100%
rename from packages/components/src/components/Avatar/Avatar.test.tsx
rename to modules/components/src/components/Avatar/Avatar.test.tsx
diff --git a/packages/components/src/components/Avatar/Avatar.tsx b/modules/components/src/components/Avatar/Avatar.tsx
similarity index 100%
rename from packages/components/src/components/Avatar/Avatar.tsx
rename to modules/components/src/components/Avatar/Avatar.tsx
diff --git a/packages/components/src/components/Avatar/index.ts b/modules/components/src/components/Avatar/index.ts
similarity index 100%
rename from packages/components/src/components/Avatar/index.ts
rename to modules/components/src/components/Avatar/index.ts
diff --git a/packages/components/src/components/Avatar/styles.css.ts b/modules/components/src/components/Avatar/styles.css.ts
similarity index 100%
rename from packages/components/src/components/Avatar/styles.css.ts
rename to modules/components/src/components/Avatar/styles.css.ts
diff --git a/packages/components/src/components/AvatarGroup/AvatarGroup.docs.mdx b/modules/components/src/components/AvatarGroup/AvatarGroup.docs.mdx
similarity index 100%
rename from packages/components/src/components/AvatarGroup/AvatarGroup.docs.mdx
rename to modules/components/src/components/AvatarGroup/AvatarGroup.docs.mdx
diff --git a/packages/components/src/components/AvatarGroup/AvatarGroup.snippets.tsx b/modules/components/src/components/AvatarGroup/AvatarGroup.snippets.tsx
similarity index 100%
rename from packages/components/src/components/AvatarGroup/AvatarGroup.snippets.tsx
rename to modules/components/src/components/AvatarGroup/AvatarGroup.snippets.tsx
diff --git a/packages/components/src/components/AvatarGroup/AvatarGroup.test.tsx b/modules/components/src/components/AvatarGroup/AvatarGroup.test.tsx
similarity index 100%
rename from packages/components/src/components/AvatarGroup/AvatarGroup.test.tsx
rename to modules/components/src/components/AvatarGroup/AvatarGroup.test.tsx
diff --git a/packages/components/src/components/AvatarGroup/AvatarGroup.tsx b/modules/components/src/components/AvatarGroup/AvatarGroup.tsx
similarity index 70%
rename from packages/components/src/components/AvatarGroup/AvatarGroup.tsx
rename to modules/components/src/components/AvatarGroup/AvatarGroup.tsx
index ece556d..15e8b11 100644
--- a/packages/components/src/components/AvatarGroup/AvatarGroup.tsx
+++ b/modules/components/src/components/AvatarGroup/AvatarGroup.tsx
@@ -15,12 +15,7 @@ type Props = {
size?: BoxProps['height'];
};
-export const AvatarGroup = ({
- as,
- limit = 3,
- members = [],
- size = '6',
-}: Props) => {
+export const AvatarGroup = ({ as, limit = 3, members = [], size = '6' }: Props) => {
const membersCount = members.length;
const visibleMembers = members.slice(0, limit);
return (
@@ -34,23 +29,12 @@ export const AvatarGroup = ({
key={x.label}
marginLeft={i === 0 ? '0' : '-1.5'}
>
-
+
))}
{membersCount > limit && (
-
+
+{(membersCount - limit).toLocaleString()}
)}
diff --git a/packages/components/src/components/AvatarGroup/index.ts b/modules/components/src/components/AvatarGroup/index.ts
similarity index 100%
rename from packages/components/src/components/AvatarGroup/index.ts
rename to modules/components/src/components/AvatarGroup/index.ts
diff --git a/packages/components/src/components/AvatarGroup/styles.css.ts b/modules/components/src/components/AvatarGroup/styles.css.ts
similarity index 100%
rename from packages/components/src/components/AvatarGroup/styles.css.ts
rename to modules/components/src/components/AvatarGroup/styles.css.ts
diff --git a/packages/components/src/components/Box/Box.docs.mdx b/modules/components/src/components/Box/Box.docs.mdx
similarity index 100%
rename from packages/components/src/components/Box/Box.docs.mdx
rename to modules/components/src/components/Box/Box.docs.mdx
diff --git a/packages/components/src/components/Box/Box.snippets.tsx b/modules/components/src/components/Box/Box.snippets.tsx
similarity index 100%
rename from packages/components/src/components/Box/Box.snippets.tsx
rename to modules/components/src/components/Box/Box.snippets.tsx
diff --git a/packages/components/src/components/Box/Box.test.tsx b/modules/components/src/components/Box/Box.test.tsx
similarity index 100%
rename from packages/components/src/components/Box/Box.test.tsx
rename to modules/components/src/components/Box/Box.test.tsx
diff --git a/packages/components/src/components/Box/Box.tsx b/modules/components/src/components/Box/Box.tsx
similarity index 100%
rename from packages/components/src/components/Box/Box.tsx
rename to modules/components/src/components/Box/Box.tsx
diff --git a/packages/components/src/components/Box/index.ts b/modules/components/src/components/Box/index.ts
similarity index 100%
rename from packages/components/src/components/Box/index.ts
rename to modules/components/src/components/Box/index.ts
diff --git a/packages/components/src/components/Button/Button.docs.mdx b/modules/components/src/components/Button/Button.docs.mdx
similarity index 100%
rename from packages/components/src/components/Button/Button.docs.mdx
rename to modules/components/src/components/Button/Button.docs.mdx
diff --git a/packages/components/src/components/Button/Button.snippets.tsx b/modules/components/src/components/Button/Button.snippets.tsx
similarity index 100%
rename from packages/components/src/components/Button/Button.snippets.tsx
rename to modules/components/src/components/Button/Button.snippets.tsx
diff --git a/packages/components/src/components/Button/Button.test.tsx b/modules/components/src/components/Button/Button.test.tsx
similarity index 100%
rename from packages/components/src/components/Button/Button.test.tsx
rename to modules/components/src/components/Button/Button.test.tsx
diff --git a/packages/components/src/components/Button/Button.tsx b/modules/components/src/components/Button/Button.tsx
similarity index 89%
rename from packages/components/src/components/Button/Button.tsx
rename to modules/components/src/components/Button/Button.tsx
index 12fa3ee..c9efd75 100644
--- a/packages/components/src/components/Button/Button.tsx
+++ b/modules/components/src/components/Button/Button.tsx
@@ -23,13 +23,7 @@ type BaseProps = {
variant?: styles.Variant;
} & Pick<
JSX.IntrinsicElements['button'],
- | 'onClick'
- | 'onMouseEnter'
- | 'onMouseLeave'
- | 'children'
- | 'disabled'
- | 'type'
- | 'tabIndex'
+ 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'children' | 'disabled' | 'type' | 'tabIndex'
> &
Pick;
@@ -51,9 +45,7 @@ type WithoutAnchor = {
as?: 'button';
};
-export type Props = BaseProps &
- (WithTone | WithoutTone) &
- (WithAnchor | WithoutAnchor);
+export type Props = BaseProps & (WithTone | WithoutTone) & (WithAnchor | WithoutAnchor);
export const Button = React.forwardRef(
(
@@ -83,9 +75,7 @@ export const Button = React.forwardRef(
} else {
childContent = (
<>
- {prefix && (
- {prefix}
- )}
+ {prefix && {prefix}}
{labelContent}
diff --git a/packages/components/src/components/Button/index.ts b/modules/components/src/components/Button/index.ts
similarity index 100%
rename from packages/components/src/components/Button/index.ts
rename to modules/components/src/components/Button/index.ts
diff --git a/packages/components/src/components/Button/styles.css.ts b/modules/components/src/components/Button/styles.css.ts
similarity index 93%
rename from packages/components/src/components/Button/styles.css.ts
rename to modules/components/src/components/Button/styles.css.ts
index 7582144..a1c2d85 100644
--- a/packages/components/src/components/Button/styles.css.ts
+++ b/modules/components/src/components/Button/styles.css.ts
@@ -33,14 +33,8 @@ export type Size = keyof typeof size;
const getAccentVars = (colorVar: CSSVarFunction) => ({
[vars.colors.accent]: rgb(colorVar),
[vars.colors.accentText]: vars.colors.white,
- [vars.colors.accentSecondary]: rgb(
- colorVar,
- vars.mode.shades.accentSecondary,
- ),
- [vars.colors.accentSecondaryHover]: rgb(
- colorVar,
- vars.mode.shades.accentSecondaryHover,
- ),
+ [vars.colors.accentSecondary]: rgb(colorVar, vars.mode.shades.accentSecondary),
+ [vars.colors.accentSecondaryHover]: rgb(colorVar, vars.mode.shades.accentSecondaryHover),
});
const tone = {
@@ -169,12 +163,7 @@ const getShapeSizeCompoundVariant = (shape: Shape, size: Size) => ({
},
style: style([
atoms({
- borderRadius:
- shape === 'square'
- ? size === 'small'
- ? 'large'
- : '2xLarge'
- : undefined,
+ borderRadius: shape === 'square' ? (size === 'small' ? 'large' : '2xLarge') : undefined,
minWidth: size === 'small' ? '10' : '14',
}),
style({
diff --git a/packages/components/src/components/Button/utils.test.ts b/modules/components/src/components/Button/utils.test.ts
similarity index 64%
rename from packages/components/src/components/Button/utils.test.ts
rename to modules/components/src/components/Button/utils.test.ts
index 134f535..c346be3 100644
--- a/packages/components/src/components/Button/utils.test.ts
+++ b/modules/components/src/components/Button/utils.test.ts
@@ -6,11 +6,8 @@ describe.each`
${true} | ${'large'} | ${'right'} | ${{ position: 'absolute', right: 5 }}
${true} | ${'medium'} | ${'right'} | ${{ position: 'absolute', right: 4 }}
${undefined} | ${'large'} | ${'left'} | ${{}}
-`(
- 'getCenterProps($center, $size, $side)',
- ({ center, size, side, expected }) => {
- it(`returns ${JSON.stringify(expected)}`, () => {
- expect(getCenterProps(center, size, side)).toEqual(expected);
- });
- },
-);
+`('getCenterProps($center, $size, $side)', ({ center, size, side, expected }) => {
+ it(`returns ${JSON.stringify(expected)}`, () => {
+ expect(getCenterProps(center, size, side)).toEqual(expected);
+ });
+});
diff --git a/packages/components/src/components/Button/utils.ts b/modules/components/src/components/Button/utils.ts
similarity index 100%
rename from packages/components/src/components/Button/utils.ts
rename to modules/components/src/components/Button/utils.ts
diff --git a/packages/components/src/components/Card/Card.docs.mdx b/modules/components/src/components/Card/Card.docs.mdx
similarity index 100%
rename from packages/components/src/components/Card/Card.docs.mdx
rename to modules/components/src/components/Card/Card.docs.mdx
diff --git a/packages/components/src/components/Card/Card.snippets.tsx b/modules/components/src/components/Card/Card.snippets.tsx
similarity index 100%
rename from packages/components/src/components/Card/Card.snippets.tsx
rename to modules/components/src/components/Card/Card.snippets.tsx
diff --git a/packages/components/src/components/Card/Card.test.tsx b/modules/components/src/components/Card/Card.test.tsx
similarity index 100%
rename from packages/components/src/components/Card/Card.test.tsx
rename to modules/components/src/components/Card/Card.test.tsx
diff --git a/packages/components/src/components/Card/Card.tsx b/modules/components/src/components/Card/Card.tsx
similarity index 100%
rename from packages/components/src/components/Card/Card.tsx
rename to modules/components/src/components/Card/Card.tsx
diff --git a/packages/components/src/components/Card/index.ts b/modules/components/src/components/Card/index.ts
similarity index 100%
rename from packages/components/src/components/Card/index.ts
rename to modules/components/src/components/Card/index.ts
diff --git a/packages/components/src/components/Card/styles.css.ts b/modules/components/src/components/Card/styles.css.ts
similarity index 100%
rename from packages/components/src/components/Card/styles.css.ts
rename to modules/components/src/components/Card/styles.css.ts
diff --git a/packages/components/src/components/Field/Field.docs.mdx b/modules/components/src/components/Field/Field.docs.mdx
similarity index 100%
rename from packages/components/src/components/Field/Field.docs.mdx
rename to modules/components/src/components/Field/Field.docs.mdx
diff --git a/packages/components/src/components/Field/Field.snippets.tsx b/modules/components/src/components/Field/Field.snippets.tsx
similarity index 100%
rename from packages/components/src/components/Field/Field.snippets.tsx
rename to modules/components/src/components/Field/Field.snippets.tsx
diff --git a/packages/components/src/components/Field/Field.test.tsx b/modules/components/src/components/Field/Field.test.tsx
similarity index 100%
rename from packages/components/src/components/Field/Field.test.tsx
rename to modules/components/src/components/Field/Field.test.tsx
diff --git a/packages/components/src/components/Field/Field.tsx b/modules/components/src/components/Field/Field.tsx
similarity index 89%
rename from packages/components/src/components/Field/Field.tsx
rename to modules/components/src/components/Field/Field.tsx
index b154055..6124a1e 100644
--- a/packages/components/src/components/Field/Field.tsx
+++ b/modules/components/src/components/Field/Field.tsx
@@ -43,12 +43,7 @@ export const Field = ({
});
const labelContent = (
-
+
{label} {required && (required)}
@@ -69,11 +64,7 @@ export const Field = ({
return (
- {hideLabel ? (
- {labelContent}
- ) : (
- labelContent
- )}
+ {hideLabel ? {labelContent} : labelContent}
{content}
diff --git a/packages/components/src/components/Field/index.ts b/modules/components/src/components/Field/index.ts
similarity index 100%
rename from packages/components/src/components/Field/index.ts
rename to modules/components/src/components/Field/index.ts
diff --git a/packages/components/src/components/FieldSet/FieldSet.docs.mdx b/modules/components/src/components/FieldSet/FieldSet.docs.mdx
similarity index 100%
rename from packages/components/src/components/FieldSet/FieldSet.docs.mdx
rename to modules/components/src/components/FieldSet/FieldSet.docs.mdx
diff --git a/packages/components/src/components/FieldSet/FieldSet.snippets.tsx b/modules/components/src/components/FieldSet/FieldSet.snippets.tsx
similarity index 100%
rename from packages/components/src/components/FieldSet/FieldSet.snippets.tsx
rename to modules/components/src/components/FieldSet/FieldSet.snippets.tsx
diff --git a/packages/components/src/components/FieldSet/FieldSet.test.tsx b/modules/components/src/components/FieldSet/FieldSet.test.tsx
similarity index 100%
rename from packages/components/src/components/FieldSet/FieldSet.test.tsx
rename to modules/components/src/components/FieldSet/FieldSet.test.tsx
diff --git a/packages/components/src/components/FieldSet/FieldSet.tsx b/modules/components/src/components/FieldSet/FieldSet.tsx
similarity index 94%
rename from packages/components/src/components/FieldSet/FieldSet.tsx
rename to modules/components/src/components/FieldSet/FieldSet.tsx
index 2615b11..ee83b05 100644
--- a/packages/components/src/components/FieldSet/FieldSet.tsx
+++ b/modules/components/src/components/FieldSet/FieldSet.tsx
@@ -75,9 +75,7 @@ export const FieldSet = ({
{legend}
- {statusTone && statusText && (
- {statusText}
- )}
+ {statusTone && statusText && {statusText}}
diff --git a/packages/components/src/components/FieldSet/index.ts b/modules/components/src/components/FieldSet/index.ts
similarity index 100%
rename from packages/components/src/components/FieldSet/index.ts
rename to modules/components/src/components/FieldSet/index.ts
diff --git a/packages/components/src/components/FileInput/FileInput.docs.mdx b/modules/components/src/components/FileInput/FileInput.docs.mdx
similarity index 100%
rename from packages/components/src/components/FileInput/FileInput.docs.mdx
rename to modules/components/src/components/FileInput/FileInput.docs.mdx
diff --git a/packages/components/src/components/FileInput/FileInput.snippets.tsx b/modules/components/src/components/FileInput/FileInput.snippets.tsx
similarity index 65%
rename from packages/components/src/components/FileInput/FileInput.snippets.tsx
rename to modules/components/src/components/FileInput/FileInput.snippets.tsx
index e3ccdd3..cf50899 100644
--- a/packages/components/src/components/FileInput/FileInput.snippets.tsx
+++ b/modules/components/src/components/FileInput/FileInput.snippets.tsx
@@ -7,9 +7,7 @@ export const snippets: Snippet[] = [
{
name: 'Basic',
code: (
-
- {(context) => (context.name ?