Add Blueprint components

packages/ui-components/src/index.tsx

@@ -0,0 +1,68 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import * as React from 'react';
+import {
+  Button as BPButton,
+  IButtonProps as IBPButtonProps,
+  InputGroup as BPInputGroup,
+  IInputGroupProps as IBPInputGroupProps,
+  Icon as BPIcon,
+  IIconProps,
+  Collapse as BPCollapse,
+  HTMLSelect as BPHTMLSelect,
+  IHTMLSelectProps,
+  ICollapseProps
+} from '@blueprintjs/core';
+import { Select as BPSelect, ISelectProps } from '@blueprintjs/select';
+import '@blueprintjs/icons/lib/css/blueprint-icons.css';
+import '@blueprintjs/core/lib/css/blueprint.css';
+import '../style/index.css';
+
+export { Intent } from '@blueprintjs/core/lib/esm/common/intent';
+
+interface IButtonProps extends IBPButtonProps {
+  title?: string;
+}
+
+interface IInputGroupProps extends IBPInputGroupProps {
+  rightIcon?: IIconProps['icon'];
+}
+
+export const Button = (props: IButtonProps) => (
+  <BPButton
+    className={props.minimal ? 'jp-Button minimal' : 'jp-Button'}
+    {...props}
+  />
+);
+
+export const InputGroup = (props: IInputGroupProps) => {
+  if (props.rightIcon) {
+    return (
+      <BPInputGroup
+        className="jp-InputGroup"
+        rightElement={
+          <div className="jp-InputGroupAction right">
+            <Icon className="jp-Icon" icon={props.rightIcon} />
+          </div>
+        }
+        {...props}
+      />
+    );
+  }
+  return <BPInputGroup className="jp-InputGroup" {...props} />;
+};
+
+export const Icon = (props: IIconProps) => (
+  <BPIcon className="jp-Icon" {...props} />
+);
+
+export const Collapse = (props: ICollapseProps) => <BPCollapse {...props} />;
+
+export const HTMLSelect = (props: IHTMLSelectProps) => (
+  <BPHTMLSelect className="jp-HTMLSelect" {...props} />
+);
+
+export const Select = (props: ISelectProps<any>) => (
+  <BPSelect className="jp-Select" {...props} />
+);

packages/ui-components/style/index.css

@@ -4,7 +4,54 @@
 |----------------------------------------------------------------------------*/
 
 .jp-Button {
+  border-radius: var(--jp-border-radius);
+  padding: 0px 12px;
+  font-size: var(--jp-ui-font-size1);
+  text-transform: uppercase;
 }
 
-.jp-Select {
+.jp-Button.minimal {
+  color: unset !important;
 }
+
+.jp-InputGroup {
+  border-radius: 0;
+}
+
+.jp-InputGroup input {
+  box-sizing: border-box;
+}
+
+.jp-InputGroup input:focus {
+  box-shadow: inset 0 0 0 1px rgba(19, 124, 189, 0.3),
+    inset 0 0 0 3px rgba(19, 124, 189, 0.3);
+}
+
+.jp-Icon {
+  color: var(--jp-layout-color4);
+}
+
+.jp-InputGroupAction {
+  line-height: 24px;
+  font-size: 20px;
+}
+
+.jp-InputGroupAction.left {
+  padding-left: 8px;
+}
+
+.jp-InputGroupAction.right {
+  padding-right: 8px;
+}
+
+.jp-HTMLSelect select {
+  height: 24;
+  font-size: var(--jp-ui-font-size1);
+  line-height: 14px;
+  border-radius: 0;
+  display: block;
+}
+
+/* .jp-Select {
+
+} */