- add tests

- update packages
- update jest to use ts-jest
- refactor color generation to theme

jest.config.js

@@ -0,0 +1,6 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  preset: "ts-jest",
+  testEnvironment: "node",
+  modulePaths: ["<rootDir>/src"],
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unom/unom-style",
-  "version": "0.2.1",
+  "version": "0.2.5",
   "description": "The official unom-style library",
   "main": "build/unom-style.js",
   "module": "build/unom-style.es.js",
@@ -17,10 +17,6 @@
   ],
   "keywords": [],
   "author": "unom",
-  "jest": {
-    "preset": "ts-jest",
-    "testEnvironment": "node"
-  },
   "license": "GPL-3.0-or-later",
   "peerDependencies": {
     "joi": "^17.2.1",
@@ -29,17 +25,18 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^11.0.2",
     "@rollup/plugin-node-resolve": "^7.1.1",
+    "@types/jest": "^27.0.2",
     "@types/joi": "^17.2.3",
     "@wessberg/rollup-plugin-ts": "^1.3.12",
-    "jest": "^26.6.3",
+    "jest": "^27.3.1",
     "rollup": "^2.48.0",
     "rollup-plugin-bundle-size": "^1.0.3",
     "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-uglify": "^6.0.4",
-    "ts-jest": "^26.5.6",
+    "ts-jest": "^27.0.7",
-    "tslib": "^1.11.0",
+    "tslib": "^2.3.1",
-    "typescript": "^3.8.2"
+    "typescript": "^4.4.4"
   },
   "repository": {
     "type": "git",

rollup.config.js

@@ -33,7 +33,7 @@ export default {
   plugins: [
     copy({
       targets: [
-        { src: "src/assets/easings.css", dest: "build/easings/easings.css" },
+        { src: "static/easings.css", dest: "build/easings/easings.css" },
       ],
     }),
     external(),

src/Easings/index.test.ts

@@ -0,0 +1,23 @@
+import ease from ".";
+
+const DURATION = 2;
+
+test("returns correct ease quint out with 2 second duration", () => {
+  const easing = ease.quint(DURATION).out;
+
+  expect(easing).toEqual({
+    ease: [0.23, 1, 0.32, 1],
+    type: "tween",
+    duration: DURATION,
+  });
+});
+
+test("returns correct ease circ in with 2 second duration", () => {
+  const easing = ease.circ(DURATION).in;
+
+  expect(easing).toEqual({
+    ease: [0.6, 0.04, 0.98, 0.335],
+    type: "tween",
+    duration: DURATION,
+  });
+});

src/Easings/index.ts

@@ -1,5 +1,13 @@
-const Easings = {
+type EasingCollection = {
-  quart: (duration: number, delay: number) =>
+  out: any;
+  in: any;
+  inOut: any;
+};
+
+type EasingFunction = (duration: number, delay?: number) => EasingCollection;
+
+const Easings: { [key: string]: EasingFunction } = {
+  quart: (duration, delay) =>
     easing(
       [0.895, 0.03, 0.685, 0.22],
       [0.165, 0.84, 0.44, 1],
@@ -7,7 +15,7 @@ const Easings = {
       duration,
       delay
     ),
-  circ: (duration: number, delay: number) =>
+  circ: (duration, delay) =>
     easing(
       [0.6, 0.04, 0.98, 0.335],
       [0.075, 0.82, 0.165, 1],
@@ -15,7 +23,7 @@ const Easings = {
       duration,
       delay
     ),
-  quint: (duration: number, delay: number) =>
+  quint: (duration, delay) =>
     easing(
       [0.755, 0.05, 0.855, 0.06],
       [0.23, 1, 0.32, 1],
@@ -23,7 +31,7 @@ const Easings = {
       duration,
       delay
     ),
-  sine: (duration: number, delay: number) =>
+  sine: (duration, delay) =>
     easing(
       [0.47, 0, 0.745, 0.715],
       [0.39, 0.575, 0.565, 1],
@@ -31,7 +39,7 @@ const Easings = {
       duration,
       delay
     ),
-  expo: (duration: number, delay: number) =>
+  expo: (duration, delay) =>
     easing(
       [0.95, 0.05, 0.795, 0.035],
       [0.19, 1, 0.22, 1],
@@ -39,7 +47,7 @@ const Easings = {
       duration,
       delay
     ),
-  cubic: (duration: number, delay: number) =>
+  cubic: (duration, delay) =>
     easing(
       [0.55, 0.055, 0.675, 0.19],
       [0.215, 0.61, 0.355, 1],
@@ -61,7 +69,7 @@ const easing = (
   easeOut: CubicBezierEase,
   easeInOut: CubicBezierEase,
   duration: number,
-  delay: number
+  delay?: number
 ) => {
   const durationObj = duration ? { duration: duration } : {};
 

src/Theme/Colors/index.test.ts

@@ -0,0 +1,55 @@
+import { generateShades } from ".";
+
+const exampleColors = {
+  main: "black",
+  "secondary-accent": "#fff",
+};
+
+test("color shades are generated in a nested structure", () => {
+  const colors = generateShades(exampleColors, {
+    structure: "nested",
+    format: "css-variable",
+  });
+
+  expect(colors).toMatchObject({
+    main: {
+      "10": "rgba(0,0,0,0.1)",
+    },
+  });
+});
+
+test("color shades are generated in a flat structure", () => {
+  const colors = generateShades(exampleColors, {
+    structure: "flat",
+    format: "css-variable",
+  });
+
+  expect(colors).toMatchObject({
+    "main-10": "rgba(0,0,0,0.1)",
+  });
+});
+
+test("color shades are generated in a flat structure with a prefix", () => {
+  const colors = generateShades(exampleColors, {
+    structure: "flat",
+    keyPrefix: "color-",
+    format: "css-variable",
+  });
+
+  expect(colors).toMatchObject({
+    "color-main-10": "rgba(0,0,0,0.1)",
+  });
+});
+
+test("a filtered list of color shades is generated in a flat structure", () => {
+  const colors = generateShades(exampleColors, {
+    structure: "flat",
+    keys: ["main"],
+    format: "css-variable",
+  });
+
+  expect(colors).toMatchObject({
+    "main-10": "rgba(0,0,0,0.1)",
+  });
+  expect(colors["secondary-accent"]).toBeUndefined();
+});

src/Theme/Colors/index.ts

@@ -0,0 +1,83 @@
+import { countDecimals } from "Utils";
+import { fromString } from "css-color-converter";
+
+const DEFAULT_OPACITIES = [0.1, 0.25, 0.5, 0.75];
+const DEFAULT_STRUCTURE = "flat";
+
+const formatColor = ({
+  prefix,
+  rgb,
+  opacity,
+}: {
+  prefix?: string;
+  rgb: string;
+  opacity?: number;
+}) => {
+  return {
+    [`${prefix ? prefix + "-" : ""}${
+      opacity !== undefined
+        ? countDecimals(opacity) === 1
+          ? (opacity + "").split(".")[1] + "0"
+          : (opacity + "").split(".")[1]
+        : ""
+    }`]: `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${opacity})`,
+  };
+};
+
+const generateShades = (
+  colors: { [key: string]: string },
+  options?: {
+    keys?: string[];
+    keyPrefix?: string;
+    opacities?: number[];
+    structure?: "flat" | "nested";
+    format?: "default" | "css-variable";
+  }
+) => {
+  const colorKeys = options?.keys
+    ? Object.keys(colors).filter((key) => options.keys?.includes(key))
+    : Object.keys(colors);
+
+  const structure = options?.structure
+    ? options.structure === "nested"
+      ? "nested"
+      : "flat"
+    : DEFAULT_STRUCTURE;
+
+  const generatedColorShadesArr: object[] = [];
+
+  colorKeys.forEach((_key) => {
+    const key = (options?.keyPrefix || "") + _key;
+    const colorString = colors[_key];
+
+    const opacities = options?.opacities
+      ? options.opacities
+      : DEFAULT_OPACITIES;
+
+    if (structure === "flat") {
+      opacities.forEach((opacity) => {
+        const rgba = fromString(colorString).toRgbaArray();
+        generatedColorShadesArr.push(
+          formatColor({ prefix: key, rgb: rgba, opacity })
+        );
+      });
+    } else {
+      generatedColorShadesArr.push({
+        [key]: Object.assign(
+          {},
+          ...opacities.map((opacity) => {
+            const rgba = fromString(colorString).toRgbaArray();
+
+            return formatColor({ rgb: rgba, opacity });
+          })
+        ),
+      });
+    }
+  });
+
+  const generatedColorShades = Object.assign({}, ...generatedColorShadesArr);
+
+  return generatedColorShades;
+};
+
+export { generateShades, formatColor };

src/Theme/index.ts

@@ -0,0 +1,3 @@
+import * as Colors from "./Colors";
+
+export default { Colors };

src/Utils/index.ts

@@ -1,47 +1,9 @@
-import { fromString } from "css-color-converter";
+const countDecimals = (value: number) => {
-
-const countDecimals = (value) => {
   if (Math.floor(value) === value) return 0;
   return value.toString().split(".")[1].length || 0;
 };
 
-const generateColorShades = (
+export { countDecimals };
-  colors: { [key: string]: string },
+export default {
-  options?: {
+  countDecimals,
-    keyList?: string[];
-    opacities?: number[];
-    outputType: "obj" | "cssVars";
-  }
-) => {
-  const colorKeys = options?.keyList
-    ? Object.keys(colors).filter((key) => options.keyList?.includes(key))
-    : Object.keys(colors);
-
-  const generatedColorShadesArr: object[] = [];
-
-  colorKeys.forEach((key) => {
-    const colorString = colors[key];
-
-    const opacities = options?.opacities
-      ? options.opacities
-      : [0.1, 0.25, 0.5, 0.75];
-
-    opacities.forEach((opacity) => {
-      const rgba = fromString(colorString).toRgbaArray();
-      generatedColorShadesArr.push({
-        [countDecimals(opacity) === 1
-          ? `${key}-${(opacity + "").split(".")[1]}0`
-          : `${key}-${
-              (opacity + "").split(".")[1]
-            }`]: `rgba(${rgba[0]},${rgba[1]},${rgba[2]},${opacity})`,
-      });
-    });
-  });
-
-  const generatedColorShades = Object.assign({}, generatedColorShadesArr);
-
-  return generatedColorShades;
 };
-
-export { generateColorShades };
-export default { generateColorShades };

src/unom-style.ts

@@ -1,13 +1,23 @@
 import Utils from "./Utils";
 import ease from "./Easings";
+import Theme from "./Theme";
 
 declare module "unom-style";
 
 export {
+  /**
+   * @public
+   * Util function to create framer-motion transitions based on penner's functions
+   */
   ease,
   /**
    * @public
    * Collection of Utils
    */
   Utils,
+  /**
+   * @public
+   *  Collection of theming tools
+   */
+  Theme,
 };