Merge 68a4979 into 7a7cb29

package.json

@@ -28,25 +28,25 @@
     "react-dom": "16.11.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.7",
+    "@babel/core": "^7.12.9",
     "@babel/plugin-transform-runtime": "^7.12.1",
     "@babel/preset-typescript": "^7.12.7",
-    "@storybook/addon-actions": "^6.1.2",
-    "@storybook/addon-essentials": "^6.1.2",
-    "@storybook/addon-links": "^6.1.2",
-    "@storybook/addon-storyshots": "^6.1.2",
-    "@storybook/react": "^6.1.2",
+    "@storybook/addon-actions": "^6.1.10",
+    "@storybook/addon-essentials": "^6.1.10",
+    "@storybook/addon-links": "^6.1.10",
+    "@storybook/addon-storyshots": "^6.1.10",
+    "@storybook/react": "^6.1.10",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
-    "@types/jest": "^26.0.15",
-    "@typescript-eslint/eslint-plugin": "^4.8.1",
-    "@typescript-eslint/parser": "^4.8.1",
+    "@types/jest": "^26.0.16",
+    "@typescript-eslint/eslint-plugin": "^4.9.0",
+    "@typescript-eslint/parser": "^4.9.0",
     "babel-jest": "^26.6.3",
-    "babel-loader": "^8.2.1",
+    "babel-loader": "^8.2.2",
     "coveralls": "^3.1.0",
-    "eslint": "^7.14.0",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-prettier": "^3.1.4",
+    "eslint": "^7.15.0",
+    "eslint-config-prettier": "^7.0.0",
+    "eslint-plugin-prettier": "^3.2.0",
     "eslint-plugin-react": "^7.21.5",
     "eslint-watch": "^7.0.0",
     "jest": "^26.6.3",
@@ -60,6 +60,6 @@
     "typescript": "^4.1.2"
   },
   "dependencies": {
-    "@changesets/cli": "^2.11.2"
+    "@changesets/cli": "^2.12.0"
   }
 }

packages/artifak/package.json

@@ -24,7 +24,9 @@
     "lib": "lib",
     "test": "__tests__"
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -46,6 +48,7 @@
     "@artifak/flex": "^1.1.4",
     "@artifak/grid": "^1.1.4",
     "@artifak/imagery": "^1.0.6",
+    "@artifak/media": "^1.0.0",
     "@artifak/typography": "^1.1.5"
   },
   "devDependencies": {

packages/artifak/src/index.tsx

@@ -18,8 +18,36 @@ export {
   fontWeight,
   TypographyBase
 } from '@artifak/typography';
+
 export { TypographyBaseProps } from '@artifak/typography';
 
 export { Imagery, ImageryBase, ImageryProps } from '@artifak/imagery';
 
-export { media, Media } from '@artifak/media';
+export {
+  media,
+  all,
+  screen,
+  onlyScreen,
+  speech,
+  onlySpeech,
+  print,
+  onlyPrint,
+  anyHover,
+  anyHoverNone,
+  hover,
+  hoverNone,
+  anyPointer,
+  anyPointerNone,
+  pointer,
+  pointerNone,
+  displayBrowser,
+  displayFullScreen,
+  displayMinUI,
+  displayStandalone,
+  landscape,
+  portrait,
+  darkColorScheme,
+  lightColorScheme,
+  reducedMotion,
+  reducedMotionAny
+} from '@artifak/media';

packages/bundler/package.json

@@ -27,12 +27,12 @@
     "url": "https://github.com/heyjul3s/artifak/issues"
   },
   "dependencies": {
-    "@rollup/plugin-commonjs": "^16.0.0",
-    "@rollup/plugin-node-resolve": "^10.0.0",
-    "rollup": "^2.33.1",
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.0",
+    "rollup": "^2.34.2",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.29.0",
-    "typescript": "^4.0.5",
+    "typescript": "^4.1.2",
     "typescript-plugin-styled-components": "^1.4.4"
   }
 }

packages/media/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@artifak/media",
   "version": "1.0.0",
-  "description": "Artifak media query library",
+  "description": "Artifak media query mixin",
   "keywords": [],
   "author": "Julian Low",
   "license": "MIT",
   "module": "dist/media.esm.js",
   "main": "dist/media.cjs.js",
   "src": "src/index.ts",
   "types": "dist/src/index.d.ts",
+  "sideEffects": false,
   "directories": {
     "src": "src",
     "test": "__tests__"
@@ -33,6 +34,7 @@
   "homepage": "https://github.com/heyjul3s/artifak#readme",
   "devDependencies": {
     "@artifak/bundler": "^1.1.3",
+    "@types/styled-components": "^5.1.3",
     "styled-components": "^5.2.1"
   },
   "peerDependencies": {

packages/media/src/index.ts

@@ -1,3 +1,36 @@
 export { media } from './media';
 export { mediaBounds } from './mediaBoundaries';
-export * from './constants';
+export { Media } from './typings';
+export { MediaBoundaries } from './mediaBoundaries';
+export { MediaInputQueries } from './mediaInput';
+export { MediaTypes } from './mediaTypes';
+export { MediaAccessibilityQueries } from './mediaAccessibilty';
+export { MediaDisplayQueries } from './mediaDisplay';
+
+export {
+  all,
+  screen,
+  onlyScreen,
+  speech,
+  onlySpeech,
+  print,
+  onlyPrint,
+  anyHover,
+  anyHoverNone,
+  hover,
+  hoverNone,
+  anyPointer,
+  anyPointerNone,
+  pointer,
+  pointerNone,
+  displayBrowser,
+  displayFullScreen,
+  displayMinUI,
+  displayStandalone,
+  landscape,
+  portrait,
+  darkColorScheme,
+  lightColorScheme,
+  reducedMotion,
+  reducedMotionAny
+} from './constants';

packages/media/src/mediaBoundaries.ts

@@ -60,8 +60,8 @@ export function createBoundaryString(
 const OPERATOR_REGEX = /(?:[(>|<)=)]+)/g;
 const VALUE_REGEX = /((\d{1,}\/\d{1,})|(\d{1,}(r|em)|px|vh|vw))+/g;
 
-export const extractValues = extractByRegex.bind(this, VALUE_REGEX);
-export const extractOperators = extractByRegex.bind(this, OPERATOR_REGEX);
+export const extractValues = extractByRegex.bind(null, VALUE_REGEX);
+export const extractOperators = extractByRegex.bind(null, OPERATOR_REGEX);
 
 export function extractByRegex(REGEX: RegExp, value: string): string[] {
   return isNonEmptyString(value) ? value.match(REGEX) : [];

packages/media/src/utils.ts

@@ -1,5 +1,7 @@
-export const isString = (arg: unknown): boolean =>
-  Object.prototype.toString.call(arg) === '[object String]';
+export function isString(arg: unknown): boolean {
+  return Object.prototype.toString.call(arg) === '[object String]';
+}
 
-export const isNonEmptyString = (arg?: unknown): boolean =>
-  isString(arg) && (arg as string).trim() !== '';
+export function isNonEmptyString(arg?: unknown): boolean {
+  return isString(arg) && (arg as string).trim() !== '';
+}