Merge pull request #1675 from eclipsesource/vanilla-styles

Vanilla styles - Automatically use default styles, remove redux style support, support style def merging

MIGRATION.md

@@ -56,6 +56,10 @@ Basically there are two different approaches:
 
 Below you can find some guidance about each approach.
 
+In any case, users of the vanilla renderers need to migrate style definitions.
+Providing style classes via the redux context is no longer supported even when using the redux fallback.
+For more information see the [vanilla renderer style guide](./packages/vanilla/Styles.md).
+
 ## Case 1: Migrate to the standalone variant (recommended)
 
 The standalone JSON Forms variant is the new default and the main focus for new features and bug fixes.

packages/vanilla/Styles.md

@@ -52,7 +52,9 @@
 - input.description → id for the description of control
 
 ## Example of styling id contributions
-Overwrite the default styles via the `JsonFormsStyleContext`.
+By default, the `vanillaStyles` defined in [src/styles/styles.ts](./src/styles/styles.ts) are applied.
+These can be overwritten via the `JsonFormsStyleContext`.
+The following example will completely replace the default styles.
 
 ```typescript
 import { JsonFormsStyleContext } from '@jsonforms/vanilla-renderers';
@@ -77,3 +79,32 @@ const styleContextValue = { styles: [
   />
 </JsonFormsStyleContext.Provider>
 ```
+
+You can also extend the existing default styles.
+Thereby, the existing style classes as well as your custom ones will be applied.
+This is the case because all style definitions for an ID are merged.
+
+```typescript
+import { JsonFormsStyleContext, vanillaStyles } from '@jsonforms/vanilla-renderers';
+
+const styleContextValue = { styles: [
+  ...vanillaStyles,
+  {
+    name: 'control.input',
+    classNames: ['custom-input']
+  },
+  {
+    name: 'array.button',
+    classNames: ['custom-array-button']
+  }
+]};
+
+<JsonFormsStyleContext.Provider value={styleContextValue}>
+  <JsonForms
+    data={data}
+    schema={schema}
+    uischema={uischema}
+    ...
+  />
+</JsonFormsStyleContext.Provider>
+```

packages/vanilla/example/index.ts

@@ -24,16 +24,10 @@
 */
 import { createThemeSelection } from './theme.switcher';
 import {
-  stylingReducer,
   vanillaCells,
   vanillaRenderers,
-  vanillaStyles
 } from '../src';
 import { renderExample } from '../../example/src/index';
 
-renderExample(vanillaRenderers, vanillaCells, undefined, {
-  name: 'styles',
-  reducer: stylingReducer,
-  state: vanillaStyles
-});
+renderExample(vanillaRenderers, vanillaCells, undefined);
 createThemeSelection();

packages/vanilla/src/index.ts

@@ -106,7 +106,7 @@ export * from './cells';
 export * from './layouts';
 export * from './reducers';
 export * from './util';
-export * from './styleContext';
+export * from './styles';
 
 export const vanillaRenderers: { tester: RankedTester; renderer: any }[] = [
   { tester: inputControlTester, renderer: InputControl },

packages/vanilla/src/reducers/styling.ts

@@ -22,12 +22,12 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import isEmpty from 'lodash/isEmpty';
 import remove from 'lodash/remove';
-import find from 'lodash/find';
 import join from 'lodash/join';
+import filter from 'lodash/filter';
+import reduce from 'lodash/reduce';
 import { REGISTER_STYLE, REGISTER_STYLES, UNREGISTER_STYLE } from '../actions';
-import { StyleDef } from '../util';
+import { StyleDef } from '../styles';
 
 const removeStyle = (styles: StyleDef[], name: string) => {
   const copy = styles.slice();
@@ -47,15 +47,13 @@ export const findStyle = (styles: StyleDef[]) => (
   style: string,
   ...args: any[]
 ): string[] => {
-  const foundStyle = find(styles, s => s.name === style);
-  if (!isEmpty(foundStyle) && typeof foundStyle.classNames === 'function') {
-    const res = foundStyle.classNames(args);
-    return res;
-  } else if (!isEmpty(foundStyle)) {
-    return foundStyle.classNames as string[];
-  }
-
-  return [];
+  const foundStyles = filter(styles, s => s.name === style);
+  return reduce(foundStyles, (res: string[], style: StyleDef) => {
+    if (typeof style.classNames === 'function') {
+      return res.concat(style.classNames(args));
+    }
+    return res.concat(style.classNames);
+  }, []);
 };
 
 export const findStyleAsClassName = (styles: StyleDef[]) => (

packages/vanilla/src/styles/index.ts

@@ -0,0 +1,27 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2017-2021 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+
+export * from './styleContext';
+export * from './styles';

packages/vanilla/src/styleContext.ts → packages/vanilla/src/styles/styleContext.ts

@@ -24,29 +24,24 @@
 */
 
 import React, { useContext } from 'react';
-import { useJsonForms } from '@jsonforms/react';
-import { StyleDef } from './util';
+import { StyleDef, vanillaStyles } from './styles';
 
 export interface StyleContext {
   styles: StyleDef[];
 }
 
-const defaultContext: any = {
-  styles: []
+const defaultContext: StyleContext = {
+  styles: vanillaStyles
 };
 
-export const JsonFormsStyleContext = React.createContext<StyleContext>(
+export const JsonFormsStyleContext = React.createContext(
   defaultContext
 );
 
 export const useStyleContext = (): StyleContext =>
   useContext(JsonFormsStyleContext);
 
-export const useStyles = (): StyleDef[] | undefined => {
+export const useStyles = (): StyleDef[] => {
   const { styles } = useStyleContext();
-  const ctx = useJsonForms();
-  if (styles.length === 0 && ctx.styles) {
-    return ctx.styles;
-  }
   return styles;
 };

packages/vanilla/src/styles/styles.ts

@@ -0,0 +1,108 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2017-2021 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+
+/**
+ * A style associates a name with a list of CSS class names or a function that calculates them.
+ */
+export interface StyleDef {
+  name: string;
+  classNames: string[] | ((...args: any[]) => string[]);
+}
+
+/**
+ * Pre-defined vanilla styles.
+ *
+ * @type {{name: string; classNames: string[]}[]}
+ */
+export const vanillaStyles: StyleDef[] = [
+  {
+    name: 'control',
+    classNames: ['control']
+  },
+  {
+    name: 'control.trim',
+    classNames: ['trim']
+  },
+  {
+    name: 'control.input',
+    classNames: ['input']
+  },
+  {
+    name: 'control.select',
+    classNames: ['select']
+  },
+  {
+    name: 'control.validation',
+    classNames: ['validation']
+  },
+  {
+    name: 'categorization',
+    classNames: ['categorization']
+  },
+  {
+    name: 'categorization.master',
+    classNames: ['categorization-master']
+  },
+  {
+    name: 'categorization.detail',
+    classNames: ['categorization-detail']
+  },
+  {
+    name: 'category.group',
+    classNames: ['category-group']
+  },
+  {
+    name: 'array.layout',
+    classNames: ['array-layout']
+  },
+  {
+    name: 'array.children',
+    classNames: ['children']
+  },
+  {
+    name: 'group.layout',
+    classNames: ['group-layout']
+  },
+  {
+    name: 'horizontal.layout',
+    classNames: ['horizontal-layout']
+  },
+  {
+    name: 'horizontal.layout.item',
+    classNames: ([size]: number[]) => [`horizontal-layout-${size}`]
+  },
+  {
+    name: 'vertical.layout',
+    classNames: ['vertical-layout']
+  },
+  {
+    name: 'array.table',
+    classNames: ['array-table-layout', 'control']
+  },
+  {
+    name: 'input.description',
+    classNames: ['input-description']
+  }
+];

packages/vanilla/src/util/index.tsx

@@ -41,15 +41,7 @@ import { getStyle, getStyleAsClassName } from '../reducers';
 import { VanillaRendererProps } from '../index';
 import { ComponentType } from 'react';
 import { findStyle, findStyleAsClassName } from '../reducers/styling';
-import { useStyles } from '../styleContext';
-
-/**
- * A style associates a name with a list of CSS class names.
- */
-export interface StyleDef {
-  name: string;
-  classNames: string[] | ((...args: any[]) => string[]);
-}
+import { useStyles } from '../styles';
 
 /**
  * Add vanilla props to the return value of calling the given
@@ -200,78 +192,3 @@ export const withVanillaEnumCellProps = withVanillaCellPropsForType(
   'control.select'
 );
 
-/**
- * Pre-defined vanilla styles.
- *
- * @type {{name: string; classNames: string[]}[]}
- */
-export const vanillaStyles = [
-  {
-    name: 'control',
-    classNames: ['control']
-  },
-  {
-    name: 'control.trim',
-    classNames: ['trim']
-  },
-  {
-    name: 'control.input',
-    classNames: ['input']
-  },
-  {
-    name: 'control.select',
-    classNames: ['select']
-  },
-  {
-    name: 'control.validation',
-    classNames: ['validation']
-  },
-  {
-    name: 'categorization',
-    classNames: ['categorization']
-  },
-  {
-    name: 'categorization.master',
-    classNames: ['categorization-master']
-  },
-  {
-    name: 'categorization.detail',
-    classNames: ['categorization-detail']
-  },
-  {
-    name: 'category.group',
-    classNames: ['category-group']
-  },
-  {
-    name: 'array.layout',
-    classNames: ['array-layout']
-  },
-  {
-    name: 'array.children',
-    classNames: ['children']
-  },
-  {
-    name: 'group.layout',
-    classNames: ['group-layout']
-  },
-  {
-    name: 'horizontal.layout',
-    classNames: ['horizontal-layout']
-  },
-  {
-    name: 'horizontal.layout.item',
-    classNames: ([size]: number[]) => [`horizontal-layout-${size}`]
-  },
-  {
-    name: 'vertical.layout',
-    classNames: ['vertical-layout']
-  },
-  {
-    name: 'array.table',
-    classNames: ['array-table-layout', 'control']
-  },
-  {
-    name: 'input.description',
-    classNames: ['input-description']
-  }
-];