@instructure/ui-source-code-editor 8.25.1-snapshot-19

package/lib/SourceCodeEditor/styles.js

@@ -0,0 +1,213 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _highlight = require("@lezer/highlight");
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme, props) => {
+  const attachment = props.attachment;
+  const attachmentBorderRadius = {
+    top: {
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0
+    },
+    bottom: {
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0
+    }
+  };
+  const attachmentVariants = {
+    top: {
+      marginBottom: 0,
+      marginTop: '0.25rem'
+    },
+    bottom: {
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0,
+      marginBottom: '0.25rem'
+    }
+  };
+  return {
+    codeEditor: {
+      label: 'codeEditor',
+      position: 'relative'
+    },
+    codeEditorContainer: {
+      label: 'codeEditorContainer',
+      borderColor: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.borderColor,
+      borderStyle: 'solid',
+      borderWidth: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.borderWidth,
+      borderRadius: componentTheme.borderRadius,
+      marginBottom: '1rem',
+      ...(attachment && { ...attachmentVariants[attachment],
+        ...attachmentBorderRadius[attachment]
+      })
+    },
+    theme: {
+      '&': {
+        overflow: 'hidden',
+        background: componentTheme.background,
+        height: 'auto',
+        fontFamily: componentTheme.fontFamily,
+        fontSize: componentTheme.fontSize,
+        color: componentTheme.color,
+        border: 0,
+        lineHeight: 1.4375,
+        minHeight: '1.4375rem',
+        borderRadius: componentTheme.borderRadius,
+        ...(attachment && { ...attachmentBorderRadius[attachment]
+        })
+      },
+      '&.cm-editor.cm-focused': {
+        // Provide a simple default outline to make sure a focused
+        // editor is visually distinct. Can't leave the default behavior
+        // because that will apply to the content element, which is
+        // inside the scrollable container and doesn't include the
+        // gutters. We also can't use an 'auto' outline, since those
+        // are, for some reason, drawn behind the element content, which
+        // will cause things like the active line background to cover
+        // the outline (#297).
+        outline: `${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.borderWidth} solid ${componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.focusBorderColor}`
+      },
+      '.cm-content': {
+        padding: `${componentTheme.verticalPadding} 0`
+      },
+      '.cm-scroller': {
+        fontFamily: componentTheme.fontFamily,
+        lineHeight: 1.4375
+      },
+      '.cm-gutters': {
+        background: componentTheme.gutterBackground,
+        borderColor: componentTheme.borderColor
+      },
+      '.cm-line': {
+        padding: `0 ${componentTheme.horizontalPadding}`
+      },
+      '.cm-selectionBackground': {
+        background: 'transparent'
+      },
+      '.cm-focused .cm-selectionBackground': {
+        background: '#d7d4f0'
+      },
+      '.cm-placeholder': {
+        // for better contrast
+        color: '#707070'
+      }
+    },
+    highlightStyle: [
+    /**
+     * Copy of `defaultHighlightStyle` from '@codemirror/language'
+     */
+    // { tag: tags.meta, color: '#7a757a' },
+    {
+      tag: _highlight.tags.link,
+      textDecoration: 'underline'
+    }, {
+      tag: _highlight.tags.heading,
+      textDecoration: 'underline',
+      fontWeight: 'bold'
+    }, {
+      tag: _highlight.tags.emphasis,
+      fontStyle: 'italic'
+    }, {
+      tag: _highlight.tags.strong,
+      fontWeight: 'bold'
+    }, {
+      tag: _highlight.tags.strikethrough,
+      textDecoration: 'line-through'
+    }, {
+      tag: _highlight.tags.keyword,
+      color: '#708'
+    }, {
+      tag: [_highlight.tags.atom, _highlight.tags.bool, _highlight.tags.url, _highlight.tags.contentSeparator, _highlight.tags.labelName],
+      color: '#219'
+    }, {
+      tag: [_highlight.tags.literal, _highlight.tags.inserted],
+      color: '#164'
+    }, {
+      tag: [_highlight.tags.string, _highlight.tags.deleted],
+      color: '#a11'
+    }, // {
+    //   tag: [tags.regexp, tags.escape, tags.special(tags.string)],
+    //   color: '#e40'
+    // },
+    {
+      tag: _highlight.tags.definition(_highlight.tags.variableName),
+      color: '#00f'
+    }, {
+      tag: _highlight.tags.local(_highlight.tags.variableName),
+      color: '#30a'
+    }, // { tag: [tags.typeName, tags.namespace], color: '#085' },
+    {
+      tag: _highlight.tags.className,
+      color: '#167'
+    }, {
+      tag: [_highlight.tags.special(_highlight.tags.variableName), _highlight.tags.macroName],
+      color: '#256'
+    }, {
+      tag: _highlight.tags.definition(_highlight.tags.propertyName),
+      color: '#00c'
+    }, {
+      tag: _highlight.tags.comment,
+      color: '#940'
+    }, // { tag: tags.invalid, color: '#f00' },
+
+    /**
+     * Custom highlighting overrides
+     * (where original colors don't have enough contrast against #fff
+     * or active highlight background)
+     */
+    {
+      tag: _highlight.tags.meta,
+      color: '#757075'
+    }, {
+      tag: [_highlight.tags.regexp, _highlight.tags.escape, _highlight.tags.special(_highlight.tags.string)],
+      color: '#d13b00'
+    }, {
+      tag: [_highlight.tags.typeName, _highlight.tags.namespace],
+      color: '#008051'
+    }, {
+      tag: _highlight.tags.invalid,
+      color: '#e60000'
+    }]
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/SourceCodeEditor/theme.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+/**
+ * Generates the theme object for the component from the theme and provided additional information
+ * @param  {Object} theme The actual theme object.
+ * @return {Object} The final theme object with the overrides and component variables
+ */
+const generateComponentTheme = theme => {
+  const colors = theme.colors,
+        borders = theme.borders,
+        typography = theme.typography,
+        spacing = theme.spacing;
+  const componentVariables = {
+    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamilyMonospace,
+    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
+    background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+    color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    gutterBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
+    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
+    borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
+    focusBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
+    horizontalPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
+    verticalPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall
+  };
+  return { ...componentVariables
+  };
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SourceCodeEditor", {
+  enumerable: true,
+  get: function () {
+    return _SourceCodeEditor.SourceCodeEditor;
+  }
+});
+
+var _SourceCodeEditor = require("./SourceCodeEditor");

package/lib/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@instructure/ui-source-code-editor",
+  "version": "8.25.1-snapshot-19",
+  "description": "A UI component library made by Instructure Inc.",
+  "author": "Instructure, Inc. Engineering and Product Design",
+  "module": "./es/index.js",
+  "main": "./lib/index.js",
+  "types": "./types/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/instructure/instructure-ui.git"
+  },
+  "homepage": "https://instructure.github.io/instructure-ui/",
+  "bugs": "https://github.com/instructure/instructure-ui/issues",
+  "scripts": {
+    "lint": "run -T ui-test --lint",
+    "lint:fix": "run -T ui-test --lint --fix",
+    "clean": "run -T ui-build --clean",
+    "build": "run -T ui-build --modules es,cjs",
+    "build:watch": "yarn ts:check --watch & run -T ui-build --watch",
+    "build:types": "run -T tsc -p tsconfig.build.json",
+    "ts:check": "run -T tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@instructure/ui-babel-preset": "8.25.1-snapshot-19",
+    "@instructure/ui-test-queries": "8.25.1-snapshot-19",
+    "@instructure/ui-test-utils": "8.25.1-snapshot-19",
+    "@types/lodash": "^4"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.13.10",
+    "@codemirror/autocomplete": "^6.0.1",
+    "@codemirror/commands": "^6.0.0",
+    "@codemirror/lang-css": "^6.0.0",
+    "@codemirror/lang-html": "^6.0.0",
+    "@codemirror/lang-javascript": "^6.0.0",
+    "@codemirror/lang-json": "^6.0.0",
+    "@codemirror/lang-markdown": "^6.0.0",
+    "@codemirror/language": "^6.0.0",
+    "@codemirror/legacy-modes": "^6.0.0",
+    "@codemirror/lint": "^6.0.0",
+    "@codemirror/search": "^6.0.0",
+    "@codemirror/state": "^6.0.0",
+    "@codemirror/view": "^6.0.0",
+    "@instructure/emotion": "8.25.1-snapshot-19",
+    "@instructure/shared-types": "8.25.1-snapshot-19",
+    "@instructure/ui-a11y-content": "8.25.1-snapshot-19",
+    "@instructure/ui-dom-utils": "8.25.1-snapshot-19",
+    "@instructure/ui-i18n": "8.25.1-snapshot-19",
+    "@instructure/ui-prop-types": "8.25.1-snapshot-19",
+    "@instructure/ui-react-utils": "8.25.1-snapshot-19",
+    "@instructure/ui-test-locator": "8.25.1-snapshot-19",
+    "@instructure/ui-testable": "8.25.1-snapshot-19",
+    "@instructure/ui-themes": "8.25.1-snapshot-19",
+    "@instructure/ui-utils": "8.25.1-snapshot-19",
+    "@lezer/highlight": "^1.0.0",
+    "lodash": "^4",
+    "prop-types": "^15"
+  },
+  "peerDependencies": {
+    "react": ">=16.8 <=17"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false
+}