feat: Built modules for design tokens

.vscode/settings.json

@@ -26,5 +26,7 @@
   },
   "eslint.options": {
     "extensions": [".js", ".jsx", ".md", ".mdx", ".ts", ".tsx"]
-  }
+  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }

packages/css-in-js/package.json

@@ -40,32 +40,32 @@
   },
   "devDependencies": {
     "@rocket.chat/eslint-config": "^0.4.0",
-    "@rollup/plugin-commonjs": "^16.0.0",
+    "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^10.0.0",
-    "@rollup/plugin-typescript": "^6.1.0",
-    "@types/jest": "^26.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.1",
+    "@rollup/plugin-typescript": "^8.1.0",
+    "@types/jest": "^26.0.19",
     "@types/stylis": "^4.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.5.0",
-    "@typescript-eslint/parser": "^4.5.0",
-    "documentation": "^13.0.2",
-    "eslint": "^7.13.0",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-import": "^2.19.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "jest": "^26.1.0",
-    "lint-staged": "^10.0.8",
-    "prettier": "2.1.2",
-    "rollup": "^2.33.3",
+    "@typescript-eslint/eslint-plugin": "^4.11.0",
+    "@typescript-eslint/parser": "^4.11.0",
+    "documentation": "^13.1.0",
+    "eslint": "^7.16.0",
+    "eslint-config-prettier": "^7.1.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-prettier": "^3.3.0",
+    "jest": "^26.6.3",
+    "lint-staged": "^10.5.3",
+    "prettier": "^2.2.1",
+    "rollup": "^2.35.1",
     "rollup-plugin-terser": "^7.0.2",
-    "ts-jest": "^26.1.1",
-    "typescript": "^4.0.3"
+    "ts-jest": "^26.4.4",
+    "typescript": "^4.1.3"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "@emotion/hash": "^0.8.0",
-    "stylis": "^4.0.3"
+    "stylis": "^4.0.6"
   }
 }

packages/emitter/README.md

@@ -69,26 +69,26 @@ The event emitter class.
 
 Returns the whole EventType list
 
-Returns **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[EventType](#eventtype)>**
+Returns **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[EventType](#eventtype)>** 
 
 #### has
 
 Returns `true` if this emmiter has a listener attached to the `key` event type
 
 ##### Parameters
 
--   `key` **[EventType](#eventtype)**
+-   `key` **[EventType](#eventtype)** 
 
-Returns **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)**
+Returns **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** 
 
 #### on
 
 Adds the `handler` function to listen events of the `type` type.
 
 ##### Parameters
 
--   `type` **[EventType](#eventtype)**
--   `handler` **[Handler](#handler)<T>**
+-   `type` **[EventType](#eventtype)** 
+-   `handler` **[Handler](#handler)<T>** 
 
 Returns **OffCallbackHandler** a function to unsubscribe the handler invoking `this.off(type, handler)`
 
@@ -98,8 +98,8 @@ Adds a _one-time_ `handler` function for the event of the `type` type.
 
 ##### Parameters
 
--   `type` **[EventType](#eventtype)**
--   `handler` **[Handler](#handler)<T>**
+-   `type` **[EventType](#eventtype)** 
+-   `handler` **[Handler](#handler)<T>** 
 
 Returns **OffCallbackHandler** a function to unsubscribe the handler invoking `this.off(type, handler)`
 
@@ -109,10 +109,10 @@ Removes the specified `handler` from the list of handlers of the event of the `t
 
 ##### Parameters
 
--   `type` **[EventType](#eventtype)**
--   `handler` **[Handler](#handler)<T>**
+-   `type` **[EventType](#eventtype)** 
+-   `handler` **[Handler](#handler)<T>** 
 
-Returns **void**
+Returns **void** 
 
 #### emit
 
@@ -121,7 +121,7 @@ order they were registered, passing the supplied argument `e` to each.
 
 ##### Parameters
 
--   `type` **[EventType](#eventtype)**
--   `e` **T?**
+-   `type` **[EventType](#eventtype)** 
+-   `e` **T?** 
 
-Returns **void**
+Returns **void** 

packages/emitter/package.json

@@ -44,31 +44,31 @@
     "docs": "run-s build docs:api-extractor docs:api-documenter docs:readme docs:clean"
   },
   "devDependencies": {
-    "@microsoft/api-documenter": "^7.8.21",
-    "@microsoft/api-extractor": "^7.9.2",
+    "@microsoft/api-documenter": "^7.12.1",
+    "@microsoft/api-extractor": "^7.12.1",
     "@rocket.chat/eslint-config": "^0.4.0",
-    "@rollup/plugin-commonjs": "^15.1.0",
+    "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "@rollup/plugin-typescript": "^6.0.0",
-    "@types/jest": "^26.0.15",
-    "@typescript-eslint/eslint-plugin": "^4.5.0",
-    "@typescript-eslint/parser": "^4.5.0",
-    "documentation": "^13.0.2",
-    "eslint": "^7.13.0",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-import": "^2.19.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.16.0",
-    "eslint-plugin-react-hooks": "^4.0.4",
-    "jest": "^26.0.1",
-    "lint-staged": "^10.0.8",
-    "prettier": "^2.1.2",
+    "@rollup/plugin-node-resolve": "^11.0.1",
+    "@rollup/plugin-typescript": "^8.1.0",
+    "@types/jest": "^26.0.19",
+    "@typescript-eslint/eslint-plugin": "^4.11.1",
+    "@typescript-eslint/parser": "^4.11.1",
+    "documentation": "^13.1.0",
+    "eslint": "^7.16.0",
+    "eslint-config-prettier": "^7.1.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-prettier": "^3.3.0",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "jest": "^26.6.3",
+    "lint-staged": "^10.5.3",
+    "prettier": "^2.2.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.21.0",
+    "rollup": "^2.35.1",
     "rollup-plugin-terser": "^7.0.2",
-    "ts-jest": "^26.1.0",
-    "typescript": "^4.0.3"
+    "ts-jest": "^26.4.4",
+    "typescript": "^4.1.3"
   },
   "publishConfig": {
     "access": "public"

packages/fuselage-hooks/docs/fuselage-hooks.placements.md

@@ -9,3 +9,5 @@
 ```typescript
 export declare type Placements = 'top-start' | 'top-middle' | 'top-end' | 'bottom-start' | 'bottom-middle' | 'bottom-end' | 'left-start' | 'left-middle' | 'left-end' | 'right-start' | 'right-middle' | 'right-end' | Positions;
 ```
+<b>References:</b> [Positions](./fuselage-hooks.positions.md)
+

packages/fuselage-hooks/docs/fuselage-hooks.positionoptions_2.md

@@ -14,3 +14,5 @@ export declare type PositionOptions = {
     watch?: boolean;
 };
 ```
+<b>References:</b> [Placements](./fuselage-hooks.placements.md)
+

packages/fuselage-hooks/src/useClipboard.spec.ts

@@ -5,7 +5,7 @@ import { act } from 'react-dom/test-utils';
 import { useClipboard, UseClipboardReturn } from './useClipboard';
 
 describe('useClipboard hook', () => {
-  let container;
+  let container: Element;
 
   beforeEach(() => {
     container = document.createElement('div');
@@ -75,8 +75,8 @@ describe('useClipboard hook', () => {
     Object.assign(navigator, {
       clipboard: {
         writeText: () =>
-          new Promise((resolve) => {
-            return resolve();
+          new Promise<void>((resolve) => {
+            resolve();
           }),
       },
     });

packages/fuselage-hooks/src/usePrefersColorScheme.ts

@@ -1,11 +1,10 @@
-import { useMediaQuery } from '.';
+import { useMediaQuery } from './useMediaQuery';
 
 /**
  * Hook to get the prefers-color-scheme value.
  *
  * @returns `true` if the prefers-color-scheme matches
  * @public
  */
-
 export const usePrefersColorScheme = (scheme?: string): boolean =>
   useMediaQuery(`(prefers-color-scheme: ${!scheme ? 'light' : scheme})`);

packages/fuselage-hooks/src/usePrefersReducedData.ts

@@ -1,11 +1,10 @@
-import { useMediaQuery } from '.';
+import { useMediaQuery } from './useMediaQuery';
 
 /**
  * Hook to get the prefers-reduce-data value.
  *
  * @returns `true` if the prefers-reduce-data is set reduce in the media queries that matches
  * @public
  */
-
 export const usePrefersReducedData = (): boolean =>
   useMediaQuery('(prefers-reduced-data: reduce)');

packages/fuselage-hooks/src/usePrefersReducedMotion.ts

@@ -1,11 +1,10 @@
-import { useMediaQuery } from '.';
+import { useMediaQuery } from './useMediaQuery';
 
 /**
  * Hook to get the prefers-reduce-motion value.
  *
  * @returns `true` if the prefers-reduce-motion is set reduce in the media queries that matches
  * @public
  */
-
 export const usePrefersReducedMotion = (): boolean =>
   useMediaQuery('(prefers-reduced-motion: reduce)');

packages/fuselage-polyfills/package.json

@@ -16,10 +16,10 @@
   },
   "main": "index.js",
   "dependencies": {
-    "@juggle/resize-observer": "^3.1.2",
+    "@juggle/resize-observer": "^3.2.0",
     "clipboard-polyfill": "^3.0.1",
     "element-closest-polyfill": "^1.0.2",
-    "focus-visible": "^5.0.2",
+    "focus-visible": "^5.2.0",
     "focus-within-polyfill": "^5.1.0"
   }
 }

packages/fuselage-tokens/.prettierrc

@@ -4,4 +4,4 @@
   "quoteProps": "consistent",
   "jsxSingleQuote": true,
   "printWidth": 80
-} 
+}

packages/fuselage-tokens/breakpoints.js

@@ -1,27 +1,10 @@
-export default {
-  xs: {
-    minViewportWidth: null,
-    columns: 4,
-    gutterWidth: 16,
-  },
-  sm: {
-    minViewportWidth: 600,
-    columns: 8,
-    gutterWidth: 16,
-  },
-  md: {
-    minViewportWidth: 768,
-    columns: 8,
-    gutterWidth: 24,
-  },
-  lg: {
-    minViewportWidth: 1024,
-    columns: 12,
-    gutterWidth: 24,
-  },
-  xl: {
-    minViewportWidth: 1440,
-    columns: 12,
-    gutterWidth: 24,
-  },
+'use strict';
+module.exports = {
+  xs: { name: 'xs', minViewportWidth: null, columns: 4, gutterWidth: 16 },
+  sm: { name: 'sm', minViewportWidth: 600, columns: 8, gutterWidth: 16 },
+  md: { name: 'md', minViewportWidth: 768, columns: 8, gutterWidth: 24 },
+  lg: { name: 'lg', minViewportWidth: 1024, columns: 12, gutterWidth: 24 },
+  xl: { name: 'xl', minViewportWidth: 1280, columns: 12, gutterWidth: 24 },
+  xxl: { name: 'xxl', minViewportWidth: 1600, columns: 12, gutterWidth: 24 },
+  xxxl: { name: 'xxxl', minViewportWidth: 1920, columns: 12, gutterWidth: 24 },
 };

packages/fuselage-tokens/breakpoints.mjs

@@ -0,0 +1,9 @@
+export default {
+  xs: { name: 'xs', minViewportWidth: null, columns: 4, gutterWidth: 16 },
+  sm: { name: 'sm', minViewportWidth: 600, columns: 8, gutterWidth: 16 },
+  md: { name: 'md', minViewportWidth: 768, columns: 8, gutterWidth: 24 },
+  lg: { name: 'lg', minViewportWidth: 1024, columns: 12, gutterWidth: 24 },
+  xl: { name: 'xl', minViewportWidth: 1280, columns: 12, gutterWidth: 24 },
+  xxl: { name: 'xxl', minViewportWidth: 1600, columns: 12, gutterWidth: 24 },
+  xxxl: { name: 'xxxl', minViewportWidth: 1920, columns: 12, gutterWidth: 24 },
+};

packages/fuselage-tokens/breakpoints.scss

@@ -1,26 +1,43 @@
 $breakpoints: (
   xs: (
+    name: xs,
     min-viewport-width: null,
     columns: 4,
     gutter-width: 16,
   ),
   sm: (
+    name: sm,
     min-viewport-width: 600,
     columns: 8,
     gutter-width: 16,
   ),
   md: (
+    name: md,
     min-viewport-width: 768,
     columns: 8,
     gutter-width: 24,
   ),
   lg: (
+    name: lg,
     min-viewport-width: 1024,
     columns: 12,
     gutter-width: 24,
   ),
   xl: (
-    min-viewport-width: 1440,
+    name: xl,
+    min-viewport-width: 1280,
+    columns: 12,
+    gutter-width: 24,
+  ),
+  xxl: (
+    name: xxl,
+    min-viewport-width: 1600,
+    columns: 12,
+    gutter-width: 24,
+  ),
+  xxxl: (
+    name: xxxl,
+    min-viewport-width: 1920,
     columns: 12,
     gutter-width: 24,
   ),