From e7304b5853a572b53429809ed8ac4b7a198c90f8 Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Fri, 21 Aug 2020 21:51:57 -0400
Subject: [PATCH] fix(react-base16-styling): fix Styling type (#602)

* fix(react-base16-styling): fix Styling type

* fix that
---
 package.json                                   | 11 -----------
 packages/react-base16-styling/src/index.ts     | 11 +++++++----
 packages/react-base16-styling/src/types.ts     |  6 +++---
 .../react-base16-styling/test/index.test.ts    | 18 +++++++++++++++++-
 .../src/createStylingFromTheme.ts              |  3 +--
 5 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index f3a8e428..220c0dda 100644
--- a/package.json
+++ b/package.json
@@ -58,16 +58,5 @@
   ],
   "engines": {
     "node": ">=10.13.0"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "**/*": [
-      "eslint --fix",
-      "prettier --write"
-    ]
   }
 }
diff --git a/packages/react-base16-styling/src/index.ts b/packages/react-base16-styling/src/index.ts
index 6f3c36db..8f65c04d 100644
--- a/packages/react-base16-styling/src/index.ts
+++ b/packages/react-base16-styling/src/index.ts
@@ -29,8 +29,8 @@ const invertColor = (hexString: string) => {
   return Color.rgb(rgb).hex();
 };
 
-const merger = (styling: Styling) => {
-  return (prevStyling: Styling) => ({
+const merger = (styling: Partial<Styling>) => {
+  return (prevStyling: Partial<Styling>) => ({
     className: [prevStyling.className, styling.className]
       .filter(Boolean)
       .join(' '),
@@ -109,7 +109,10 @@ const mergeStyling = (
         case 'function':
           return (styling, ...args) =>
             (customStyling as StylingValueFunction)(
-              (defaultStyling as StylingValueFunction)(styling, ...args),
+              (defaultStyling as StylingValueFunction)(
+                styling,
+                ...args
+              ) as Styling,
               ...args
             );
       }
@@ -143,7 +146,7 @@ const getStylingByKeys = (
   ...args: any[]
 ): Styling => {
   if (keys === null) {
-    return mergedStyling as Styling;
+    return (mergedStyling as unknown) as Styling;
   }
 
   if (!Array.isArray(keys)) {
diff --git a/packages/react-base16-styling/src/types.ts b/packages/react-base16-styling/src/types.ts
index f5e93f0e..7226b163 100644
--- a/packages/react-base16-styling/src/types.ts
+++ b/packages/react-base16-styling/src/types.ts
@@ -2,14 +2,14 @@ import { Base16Theme } from 'base16';
 import * as CSS from 'csstype';
 
 export interface Styling {
-  className?: string;
-  style?: CSS.Properties<string | number>;
+  className: string;
+  style: CSS.Properties<string | number>;
 }
 
 export type StylingValueFunction = (
   styling: Styling,
   ...rest: any[]
-) => Styling;
+) => Partial<Styling>;
 
 export type StylingValue =
   | string
diff --git a/packages/react-base16-styling/test/index.test.ts b/packages/react-base16-styling/test/index.test.ts
index 1ee0e6ae..e45bf789 100644
--- a/packages/react-base16-styling/test/index.test.ts
+++ b/packages/react-base16-styling/test/index.test.ts
@@ -84,6 +84,9 @@ const getStylingFromBase16 = (base16: Base16Theme): StylingConfig => ({
   additionalStyle: {
     border: 0,
   },
+  testFuncNoStyle: (_, arg: string) => ({
+    className: `testClass--${arg}`,
+  }),
 });
 
 test('invertTheme', () => {
@@ -124,7 +127,14 @@ test('createStyling (custom)', () => {
     testClass: 'customClass',
     testStyle: { height: 0 },
     testFunc: (styling: Styling, arg: string) => ({
-      className: `${styling.className!} customClass--${arg}`,
+      className: `${styling.className} customClass--${arg}`,
+      style: {
+        ...styling.style,
+        border: 0,
+      },
+    }),
+    testFuncNoStyle: (styling: Styling, arg: string) => ({
+      className: `${styling.className} customClass--${arg}`,
       style: {
         ...styling.style,
         border: 0,
@@ -146,6 +156,12 @@ test('createStyling (custom)', () => {
       border: 0,
     },
   });
+  expect(customStyling('testFuncNoStyle', 'mod')).toEqual({
+    className: 'testClass--mod customClass--mod',
+    style: {
+      border: 0,
+    },
+  });
 
   customStyling = styling({
     testClass: () => ({
diff --git a/packages/react-json-tree/src/createStylingFromTheme.ts b/packages/react-json-tree/src/createStylingFromTheme.ts
index b5a0f28a..bb2a5bd5 100644
--- a/packages/react-json-tree/src/createStylingFromTheme.ts
+++ b/packages/react-json-tree/src/createStylingFromTheme.ts
@@ -1,7 +1,6 @@
 import {
   Base16Theme,
   createStyling,
-  Styling,
   StylingConfig,
 } from 'react-base16-styling';
 import solarized from './themes/solarized';
@@ -56,7 +55,7 @@ const getDefaultThemeStyling = (theme: Base16Theme): StylingConfig => {
       backgroundColor: colors.BACKGROUND_COLOR,
     },
 
-    value: ({ style }, nodeType, keyPath: (string | number)[]): Styling => ({
+    value: ({ style }, nodeType, keyPath: (string | number)[]) => ({
       style: {
         ...style,
         paddingTop: '0.25em',