feat: Render and style SVG drawings #69

web/src/box.tsx

@@ -32,6 +32,7 @@ import { Separator } from './separator';
 import { Slider } from './slider';
 import { Spinbox } from './spinbox';
 import { Spinner } from './spinner';
+import { SVGBox } from './svg';
 import { Table } from './table';
 import { TagPicker } from './tag_picker';
 import { Textbox } from './textbox';
@@ -82,10 +83,12 @@ export const XBox = ({ context, box }: BoxProps) => { // recursive
     return <Rating context={context} box={box} />
   } else if (modes.has('progress')) {
     return <ProgressBar context={context} box={box} />
-  } else if (modes.has('spinner')) {
-    return <Spinner context={context} box={box} />
   } else if (modes.has('separator')) {
     return <Separator context={context} box={box} />
+  } else if (modes.has('spinner')) {
+    return <Spinner context={context} box={box} />
+  } else if (modes.has('svg')) {
+    return <SVGBox context={context} box={box} />
   } else if (modes.has('info') || modes.has('success') || modes.has('warning') || modes.has('critical') || modes.has('blocked') || modes.has('error')) {
     return <Banner context={context} box={box} />
   } else if (modes.has('table')) {

web/src/heuristics.ts

@@ -196,7 +196,7 @@ const knownModes = [
   'row', 'col', 'tab', 'md', 'button', 'menu', 'radio', 'check', 'toggle', 'password',
   'text', 'range', 'number', 'time', 'date', 'day', 'week', 'month', 'tag', 'color',
   'rating', 'table', 'file', 'progress', 'spinner', 'separator', 'image', 'web',
-  'info', 'success', 'warning', 'critical', 'blocked', 'error'
+  'info', 'success', 'warning', 'critical', 'blocked', 'error', 'svg',
 ]
 
 const readonlyBoxes = [
@@ -211,6 +211,7 @@ const readonlyBoxes = [
   'error',
   'image',
   'web',
+  'svg',
 ]
 
 const hasNoMode = (modes: Set<S>): B => { // TODO PERF speed up

web/src/svg.tsx

@@ -0,0 +1,27 @@
+// Copyright 2022 H2O.ai, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { css } from './css';
+import { BoxProps } from './ui';
+
+export const SVGBox = ({ box }: BoxProps) => {
+  const { text, style } = box
+  return (
+    <div className={css(style)} dangerouslySetInnerHTML={{ __html: text ?? '' }} />
+  )
+}
+
+
+
+