refactor: 💡 move font function and style types to NP

elastic · Oct 10, 2019 · 32d0b91 · 32d0b91
1 parent a90984d
commit 32d0b91
Show file tree

Hide file tree

Showing 14 changed files with 579 additions and 301 deletions.
diff --git a/src/legacy/core_plugins/interpreter/common/index.ts b/src/legacy/core_plugins/interpreter/common/index.ts
@@ -36,6 +36,7 @@ export {
   PointSeriesColumn,
   PointSeriesColumnName,
   Render,
+  ExpressionTypeStyle,
   Style,
   Type,
 } from '../../../../plugins/expressions/public';

diff --git a/src/legacy/core_plugins/interpreter/public/functions/font.ts b/src/legacy/core_plugins/interpreter/public/functions/font.ts
@@ -17,161 +17,5 @@
  * under the License.
  */
 
-// @ts-ignore no @typed def
-import inlineStyle from 'inline-style';
-import { i18n } from '@kbn/i18n';
-import { openSans } from '../../common/lib/fonts';
-import { ExpressionFunction } from '../../types';
-import {
-  CSSStyle,
-  FontFamily,
-  FontStyle,
-  FontWeight,
-  Style,
-  TextAlignment,
-  TextDecoration,
-} from '../types';
-
-interface Arguments {
-  align?: TextAlignment;
-  color?: string;
-  family?: FontFamily;
-  italic?: boolean;
-  lHeight?: number | null;
-  size?: number;
-  underline?: boolean;
-  weight?: FontWeight;
-}
-
-export function font(): ExpressionFunction<'font', null, Arguments, Style> {
-  return {
-    name: 'font',
-    aliases: [],
-    type: 'style',
-    help: i18n.translate('interpreter.functions.fontHelpText', {
-      defaultMessage: 'Create a font style.',
-    }),
-    context: {
-      types: ['null'],
-    },
-    args: {
-      align: {
-        default: 'left',
-        help: i18n.translate('interpreter.functions.font.args.alignHelpText', {
-          defaultMessage: 'The horizontal text alignment.',
-        }),
-        options: Object.values(TextAlignment),
-        types: ['string'],
-      },
-      color: {
-        help: i18n.translate('interpreter.functions.font.args.colorHelpText', {
-          defaultMessage: 'The text color.',
-        }),
-        types: ['string'],
-      },
-      family: {
-        default: `"${openSans.value}"`,
-        help: i18n.translate('interpreter.functions.font.args.familyHelpText', {
-          defaultMessage: 'An acceptable {css} web font string',
-          values: {
-            css: 'CSS',
-          },
-        }),
-        types: ['string'],
-      },
-      italic: {
-        default: false,
-        help: i18n.translate('interpreter.functions.font.args.italicHelpText', {
-          defaultMessage: 'Italicize the text?',
-        }),
-        options: [true, false],
-        types: ['boolean'],
-      },
-      lHeight: {
-        default: null,
-        aliases: ['lineHeight'],
-        help: i18n.translate('interpreter.functions.font.args.lHeightHelpText', {
-          defaultMessage: 'The line height in pixels',
-        }),
-        types: ['number', 'null'],
-      },
-      size: {
-        default: 14,
-        help: i18n.translate('interpreter.functions.font.args.sizeHelpText', {
-          defaultMessage: 'The font size in pixels',
-        }),
-        types: ['number'],
-      },
-      underline: {
-        default: false,
-        help: i18n.translate('interpreter.functions.font.args.underlineHelpText', {
-          defaultMessage: 'Underline the text?',
-        }),
-        options: [true, false],
-        types: ['boolean'],
-      },
-      weight: {
-        default: 'normal',
-        help: i18n.translate('interpreter.functions.font.args.weightHelpText', {
-          defaultMessage: 'The font weight. For example, {list}, or {end}.',
-          values: {
-            list: Object.values(FontWeight)
-              .slice(0, -1)
-              .map(weight => `\`"${weight}"\``)
-              .join(', '),
-            end: `\`"${Object.values(FontWeight).slice(-1)[0]}"\``,
-          },
-        }),
-        options: Object.values(FontWeight),
-        types: ['string'],
-      },
-    },
-    fn: (_context, args) => {
-      if (!Object.values(FontWeight).includes(args.weight!)) {
-        throw new Error(
-          i18n.translate('interpreter.functions.font.invalidFontWeightErrorMessage', {
-            defaultMessage: "Invalid font weight: '{weight}'",
-            values: {
-              weight: args.weight,
-            },
-          })
-        );
-      }
-      if (!Object.values(TextAlignment).includes(args.align!)) {
-        throw new Error(
-          i18n.translate('interpreter.functions.font.invalidTextAlignmentErrorMessage', {
-            defaultMessage: "Invalid text alignment: '{align}'",
-            values: {
-              align: args.align,
-            },
-          })
-        );
-      }
-
-      // the line height shouldn't ever be lower than the size, and apply as a
-      // pixel setting
-      const lineHeight = args.lHeight != null ? `${args.lHeight}px` : '1';
-
-      const spec: CSSStyle = {
-        fontFamily: args.family,
-        fontWeight: args.weight,
-        fontStyle: args.italic ? FontStyle.ITALIC : FontStyle.NORMAL,
-        textDecoration: args.underline ? TextDecoration.UNDERLINE : TextDecoration.NONE,
-        textAlign: args.align,
-        fontSize: `${args.size}px`, // apply font size as a pixel setting
-        lineHeight, // apply line height as a pixel setting
-      };
-
-      // conditionally apply styles based on input
-      if (args.color) {
-        spec.color = args.color;
-      }
-
-      return {
-        type: 'style',
-        spec,
-        css: inlineStyle(spec),
-      };
-    },
-  };
-}
+// eslint-disable-next-line
+export * from '../../../../../plugins/expressions/public/functions/font';
diff --git a/src/legacy/core_plugins/interpreter/public/types/style.ts b/src/legacy/core_plugins/interpreter/public/types/style.ts
@@ -17,120 +17,10 @@
  * under the License.
  */
 
-import { FontLabel } from '../../common/lib/fonts';
-export { FontLabel as FontFamily, FontValue } from '../../common/lib/fonts';
-
-/**
- * Enum of supported CSS `background-repeat` properties.
- */
-export enum BackgroundRepeat {
-  REPEAT = 'repeat',
-  REPEAT_NO = 'no-repeat',
-  REPEAT_X = 'repeat-x',
-  REPEAT_Y = 'repeat-y',
-  ROUND = 'round',
-  SPACE = 'space',
-}
-
-/**
- * Enum of supported CSS `background-size` properties.
- */
-export enum BackgroundSize {
-  AUTO = 'auto',
-  CONTAIN = 'contain',
-  COVER = 'cover',
-}
-
-/**
- * Enum of supported CSS `font-style` properties.
- */
-export enum FontStyle {
-  ITALIC = 'italic',
-  NORMAL = 'normal',
-}
-
-/**
- * Enum of supported CSS `font-weight` properties.
- */
-export enum FontWeight {
-  NORMAL = 'normal',
-  BOLD = 'bold',
-  BOLDER = 'bolder',
-  LIGHTER = 'lighter',
-  ONE = '100',
-  TWO = '200',
-  THREE = '300',
-  FOUR = '400',
-  FIVE = '500',
-  SIX = '600',
-  SEVEN = '700',
-  EIGHT = '800',
-  NINE = '900',
-}
-
-/**
- * Enum of supported CSS `overflow` properties.
- */
-export enum Overflow {
-  AUTO = 'auto',
-  HIDDEN = 'hidden',
-  SCROLL = 'scroll',
-  VISIBLE = 'visible',
-}
-
-/**
- * Enum of supported CSS `text-align` properties.
- */
-export enum TextAlignment {
-  CENTER = 'center',
-  JUSTIFY = 'justify',
-  LEFT = 'left',
-  RIGHT = 'right',
-}
-
-/**
- * Enum of supported CSS `text-decoration` properties.
- */
-export enum TextDecoration {
-  NONE = 'none',
-  UNDERLINE = 'underline',
-}
-
-/**
- * Represents the various style properties that can be applied to an element.
- */
-export interface CSSStyle {
-  color?: string;
-  fill?: string;
-  fontFamily?: FontLabel;
-  fontSize?: string;
-  fontStyle?: FontStyle;
-  fontWeight?: FontWeight;
-  lineHeight?: number | string;
-  textAlign?: TextAlignment;
-  textDecoration?: TextDecoration;
-}
-
-/**
- * Represents an object containing style information for a Container.
- */
-export interface ContainerStyle {
-  border: string | null;
-  borderRadius: string | null;
-  padding: string | null;
-  backgroundColor: string | null;
-  backgroundImage: string | null;
-  backgroundSize: BackgroundSize;
-  backgroundRepeat: BackgroundRepeat;
-  opacity: number | null;
-  overflow: Overflow;
-}
-
-/**
- * An object that represents style information, typically CSS.
- */
-export interface Style {
-  type: 'style';
-  spec: CSSStyle;
-  css: string;
-}
+/* eslint-disable */
+export * from '../../../../../plugins/expressions/public/types/style';
+export {
+  FontLabel as FontFamily,
+  FontValue,
+} from '../../../../../plugins/expressions/public/fonts';
+/* eslint-enable */
diff --git a/src/legacy/core_plugins/interpreter/test_helpers.ts b/src/legacy/core_plugins/interpreter/test_helpers.ts
@@ -17,17 +17,5 @@
  * under the License.
  */
 
-import { mapValues } from 'lodash';
-import { AnyExpressionFunction, FunctionHandlers } from './types';
-
-// Takes a function spec and passes in default args,
-// overriding with any provided args.
-export const functionWrapper = <T extends AnyExpressionFunction>(fnSpec: () => T) => {
-  const spec = fnSpec();
-  const defaultArgs = mapValues(spec.args, argSpec => argSpec.default);
-  return (
-    context: object | null,
-    args: Record<string, any> = {},
-    handlers: FunctionHandlers = {}
-  ) => spec.fn(context, { ...defaultArgs, ...args }, handlers);
-};
+// eslint-disable-next-line
+export * from '../../../plugins/expressions/public/functions/tests/utils';
diff --git a/src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.ts b/src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.ts
@@ -171,7 +171,7 @@ export const createMetricVisFn = (): ExpressionFunction<
       throw new Error('colorRange must be provided when using percentage');
     }
 
-    const fontSize = Number.parseInt(args.font.spec.fontSize, 10);
+    const fontSize = Number.parseInt(args.font.spec.fontSize || '', 10);
 
     return {
       type: 'render',

diff --git a/src/plugins/expressions/public/expression_types/kibana_datatable.ts b/src/plugins/expressions/public/expression_types/kibana_datatable.ts
@@ -19,7 +19,7 @@
 
 import { map } from 'lodash';
 import { SerializedFieldFormat } from '../types/common';
-import { Datatable, PointSeries } from '../types';
+import { Datatable, PointSeries } from '.';
 
 const name = 'kibana_datatable';
 

diff --git a/src/plugins/expressions/public/expression_types/range.ts b/src/plugins/expressions/public/expression_types/range.ts
@@ -17,7 +17,8 @@
  * under the License.
  */
 
-import { ExpressionType, Render } from '../types';
+import { ExpressionType } from '../types';
+import { Render } from '.';
 
 const name = 'range';
 

diff --git a/src/plugins/expressions/public/expression_types/style.ts b/src/plugins/expressions/public/expression_types/style.ts
@@ -17,17 +17,11 @@
  * under the License.
  */
 
-import { ExpressionType } from '../types';
+import { ExpressionType, ExpressionTypeStyle } from '../types';
 
 const name = 'style';
 
-export interface Style {
-  type: typeof name;
-  spec: any;
-  css: string;
-}
-
-export const style = (): ExpressionType<typeof name, Style> => ({
+export const style = (): ExpressionType<typeof name, ExpressionTypeStyle> => ({
   name,
   from: {
     null: () => {