Merge pull request #77 from CanopyTax/react-18

update to react 18 and things

.gitignore

@@ -60,4 +60,13 @@ typings/
 lib
 
 # ide things
-.idea
+.idea
+
+# yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.prettierrc

@@ -0,0 +1 @@
+{}

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-3.6.4.cjs

babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  ignore: ["**/*.test.js"],
+  presets: ["@babel/preset-env", "@babel/preset-react"],
+};

jest.json

@@ -11,5 +11,6 @@
     ".*": "babel-jest"
   },
   "rootDir": "./",
-  "modulePaths": ["./"]
+  "modulePaths": ["./"],
+  "setupFilesAfterEnv": ["<rootDir>/test-setup.js"]
 }

package.json

@@ -1,27 +1,12 @@
 {
   "name": "kremling",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Embarrassingly simple css for React",
   "main": "lib/kremling.js",
   "repository": "git@github.com:CanopyTax/kremling.git",
   "author": "Joel Denning <joel.denning@canopytax.com>",
   "license": "Apache-2.0",
   "types": "./src/kremling.d.ts",
-  "devDependencies": {
-    "@babel/cli": "^7.14.3",
-    "@babel/core": "^7.14.3",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/preset-env": "^7.14.2",
-    "@babel/preset-react": "^7.13.13",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "^27.0.1",
-    "babel-loader": "^8.2.2",
-    "jest": "^27.0.1",
-    "jest-cli": "^27.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "rimraf": "^3.0.2"
-  },
   "scripts": {
     "prepublish": "yarn build",
     "build": "rimraf lib && yarn compile",
@@ -32,7 +17,28 @@
     "watch-tests": "jest --config jest.json --watch"
   },
   "dependencies": {
-    "prop-types": "^15.7.2"
+    "prop-types": "^15"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.23.0",
+    "@babel/core": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "babel-jest": "^29.7.0",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "prettier": "^3.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^5.0.5"
+  },
+  "peerDependencies": {
+    "react": ">=16",
+    "react-dom": ">=16"
   },
-  "packageManager": "yarn@1.22.1"
+  "packageManager": "yarn@3.6.4"
 }

src/classname-helpers.js

@@ -1,31 +1,35 @@
-export function css(...args) {
-}
+export function css(...args) {}
 
 export function always(...args) {
-  return chainify(this, args.join(' '));
+  return chainify(this, args.join(" "));
 }
 
 export function maybe(className, enabled) {
   if (!isString(className)) {
-    throw new Error('kremling maybe() must be called with a string className and a boolean expression');
+    throw new Error(
+      "kremling maybe() must be called with a string className and a boolean expression",
+    );
   }
-  return chainify(this, enabled ? className : '');
+  return chainify(this, enabled ? className : "");
 }
 
 export function toggle(className1, className2, enabled) {
   if (!isString(className1) || !isString(className2)) {
-    throw new Error('kremling toggle() must be called with 2 string classNames and a boolean expression');
+    throw new Error(
+      "kremling toggle() must be called with 2 string classNames and a boolean expression",
+    );
   }
   return chainify(this, enabled ? className1 : className2);
 }
 
 function isString(str) {
-  return typeof str === 'string' || str instanceof String
+  return typeof str === "string" || str instanceof String;
 }
 
 function chainify(previousString, newString) {
-  const existing = previousString instanceof String ? previousString.toString() : '';
-  const str = new String([existing, newString].join(' ').trim());
+  const existing =
+    previousString instanceof String ? previousString.toString() : "";
+  const str = new String([existing, newString].join(" ").trim());
   str.css = css.bind(str);
   str.c = str.css;
   str.always = always.bind(str);
@@ -37,9 +41,4 @@ function chainify(previousString, newString) {
   return str;
 }
 
-export {
-  always as a,
-  maybe as m,
-  toggle as t,
-  css as c,
-}
+export { always as a, maybe as m, toggle as t, css as c };

src/classname-helpers.test.js

@@ -1,96 +1,95 @@
 import { always, maybe, toggle } from "./classname-helpers.js";
 
-describe("Classname helpers", function() {
-  it("should always return through a chain", function() {
+describe("Classname helpers", function () {
+  it("should always return through a chain", function () {
     expect(always("krimp").toString()).toBe("krimp");
-    expect(
-      always("krimp")
-        .always("klaptrap")
-        .always("klank")
-        .toString()
-    ).toBe("krimp klaptrap klank");
+    expect(always("krimp").always("klaptrap").always("klank").toString()).toBe(
+      "krimp klaptrap klank",
+    );
   });
 
-  it("should maybe return through a chain", function() {
+  it("should maybe return through a chain", function () {
     expect(maybe("krimp", false).toString()).toBe("");
     expect(maybe("krimp", true).toString()).toBe("krimp");
     expect(
       maybe("krimp", true)
         .maybe("klaptrap", false)
         .maybe("klank", true)
-        .toString()
+        .toString(),
     ).toBe("krimp klank");
   });
 
-  it("should toggle return through a chain", function() {
+  it("should toggle return through a chain", function () {
     expect(toggle("ksmash", "kair").toString()).toBe("kair");
     expect(toggle("krimp", "kramp", false).toString()).toBe("kramp");
     expect(toggle("krimp", "kramp", true).toString()).toBe("krimp");
     expect(
       toggle("krimp", "kramp", true)
         .toggle("klaptrap", "klapsnap", false)
         .toggle("klank", "klink", true)
-        .toString()
+        .toString(),
     ).toBe("krimp klapsnap klank");
   });
 
-  it("should maybe and always return through a chain", function() {
+  it("should maybe and always return through a chain", function () {
     expect(
       maybe("krimp", true)
         .always("kannon")
         .maybe("klaptrap", false)
         .maybe("klank", true)
         .always("kloak")
-        .toString()
+        .toString(),
     ).toBe("krimp kannon klank kloak");
   });
 
-  it("should maybe and toggle return through a chain", function() {
+  it("should maybe and toggle return through a chain", function () {
     expect(
       maybe("krimp", true)
         .toggle("kannon", "keenon", false)
         .maybe("klaptrap", false)
         .maybe("klank", true)
         .toggle("kloak", "koat", true)
-        .toString()
+        .toString(),
     ).toBe("krimp keenon klank kloak");
   });
 
-  it("should always and toggle return through a chain", function() {
+  it("should always and toggle return through a chain", function () {
     expect(
       always("krimp")
         .toggle("kannon", "keenon", false)
         .always("klaptrap")
         .always("klank")
         .toggle("kloak", "koat", true)
-        .toString()
+        .toString(),
     ).toBe("krimp keenon klaptrap klank kloak");
   });
 
-  it("should always maybe and toggle return through a chain", function() {
+  it("should always maybe and toggle return through a chain", function () {
     expect(
       always("krimp")
         .toggle("kannon", "keenon", false)
         .always("klaptrap")
         .maybe("klank", true)
         .toggle("kloak", "koat", true)
         .maybe("klump", false)
-        .toString()
+        .toString(),
     ).toBe("krimp keenon klaptrap klank kloak");
   });
 
-  it("should throw when a non string is passed", function() {
+  it("should throw when a non string is passed", function () {
     expect(() => maybe(2)).toThrow();
-    expect(() => always('dk').maybe(2)).toThrow();
-    expect(() => toggle('yoshi', true)).toThrow();
-    expect(() => always('sup').maybe('yo', true).toggle('blop', false)).toThrow();
+    expect(() => always("dk").maybe(2)).toThrow();
+    expect(() => toggle("yoshi", true)).toThrow();
+    expect(() =>
+      always("sup").maybe("yo", true).toggle("blop", false),
+    ).toThrow();
   });
 
   it("should accept a boxed string as an argument", () => {
-    const boxedKremlingString = always('thing')
-    const boxedKremlingString2 = always('thing2')
-    always(boxedKremlingString)
-    maybe(boxedKremlingString, true)
-    toggle(boxedKremlingString, boxedKremlingString2, true)
+    const boxedKremlingString = always("thing");
+    const boxedKremlingString2 = always("thing2");
+    always(boxedKremlingString);
+    maybe(boxedKremlingString, true);
+    toggle(boxedKremlingString, boxedKremlingString2, true);
   });
 });

src/k.js

@@ -1,11 +1,13 @@
 export const k = (strings, ...args) => {
-  const evalString = strings.map((item, i) => {
-    return `${item}${args[i] || ''}`;
-  }).join('');
+  const evalString = strings
+    .map((item, i) => {
+      return `${item}${args[i] || ""}`;
+    })
+    .join("");
 
-  const [id, namespace, styles] = evalString.split('||KREMLING||');
+  const [id, namespace, styles] = evalString.split("||KREMLING||");
   if (id && namespace && styles) {
     return { id, namespace, styles };
   }
   return evalString;
-}
+};

src/k.test.js

@@ -1,17 +1,18 @@
-import { k } from './k';
+import { k } from "./k";
 
-describe('k', () => {
+describe("k", () => {
   test(`if kremling separators are used, return an object (postcss)`, () => {
     const example = k`k1||KREMLING||kremling||KREMLING||[kremling=k1].test, .test [kremling=k1] { background-color: red; };`;
     expect(example).toEqual({
-      id: 'k1',
-      namespace: 'kremling',
-      styles: '[kremling=k1].test, .test [kremling=k1] { background-color: red; };',
+      id: "k1",
+      namespace: "kremling",
+      styles:
+        "[kremling=k1].test, .test [kremling=k1] { background-color: red; };",
     });
   });
 
   test(`if no separators are found, return a string (css)`, () => {
-    const example = k`&.test { background-color: red; }`
-    expect(example).toEqual(example)
+    const example = k`&.test { background-color: red; }`;
+    expect(example).toEqual(example);
   });
-});
+});

src/kremling.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 
 export = Kremling;
 
@@ -11,18 +11,37 @@ declare namespace Kremling {
   function a(...className: ClassName[]): KremlingString & string;
   function maybe(className: ClassName, condition: any): KremlingString & string;
   function m(className: ClassName, condition: any): KremlingString & string;
-  function toggle(truthyClass: ClassName, falsyClass: ClassName, condition: any): KremlingString & string;
-  function t(truthyClass: ClassName, falsyClass: ClassName, condition: any): KremlingString & string;
-  function k(strings: TemplateStringsArray, ...args: Array<string>): object | string;
+  function toggle(
+    truthyClass: ClassName,
+    falsyClass: ClassName,
+    condition: any,
+  ): KremlingString & string;
+  function t(
+    truthyClass: ClassName,
+    falsyClass: ClassName,
+    condition: any,
+  ): KremlingString & string;
+  function k(
+    strings: TemplateStringsArray,
+    ...args: Array<string>
+  ): object | string;
 
   interface KremlingString extends String {
-    always(...className: ClassName[]): KremlingString & string,
-    a(...className: ClassName[]): KremlingString & string,
-    maybe(className: ClassName, condition: any): KremlingString & string,
-    m(className: ClassName, condition: any): KremlingString & string,
-    toggle(truthyClass: ClassName, falsyClass: ClassName, condition: any): KremlingString & string,
-    t(truthyClass: ClassName, falsyClass: ClassName, condition: any): KremlingString & string,
-    toString(): string,
+    always(...className: ClassName[]): KremlingString & string;
+    a(...className: ClassName[]): KremlingString & string;
+    maybe(className: ClassName, condition: any): KremlingString & string;
+    m(className: ClassName, condition: any): KremlingString & string;
+    toggle(
+      truthyClass: ClassName,
+      falsyClass: ClassName,
+      condition: any,
+    ): KremlingString & string;
+    t(
+      truthyClass: ClassName,
+      falsyClass: ClassName,
+      condition: any,
+    ): KremlingString & string;
+    toString(): string;
   }
 
   interface ScopedProps {
@@ -33,6 +52,6 @@ declare namespace Kremling {
   class Scoped extends React.Component<ScopedProps> {}
 
   type Scope = {
-    'data-kremling': string,
-  }
+    "data-kremling": string;
+  };
 }