fix(react-base16-styling): fix Styling type (#602)

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

* fix that

package.json

@@ -58,16 +58,5 @@
   ],
   "engines": {
     "node": ">=10.13.0"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "**/*": [
-      "eslint --fix",
-      "prettier --write"
-    ]
   }
 }

packages/react-base16-styling/src/index.ts

@@ -29,8 +29,8 @@ const invertColor = (hexString: string) => {
   return Color.rgb(rgb).hex();
 };
 
-const merger = (styling: Styling) => {
+const merger = (styling: Partial<Styling>) => {
-  return (prevStyling: 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)) {

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;
+  className: string;
-  style?: CSS.Properties<string | number>;
+  style: CSS.Properties<string | number>;
 }
 
 export type StylingValueFunction = (
   styling: Styling,
   ...rest: any[]
-) => Styling;
+) => Partial<Styling>;
 
 export type StylingValue =
   | string

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: () => ({

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',