@eccenca/gui-elements 24.0.0 → 24.1.0-rc.0

package/dist/types/components/Tabs/Tab.d.ts

@@ -37,11 +37,13 @@ export declare const transformTabProperties: ({ title, dontShrink, className, ba
     suppressContentEditableWarning?: boolean | undefined;
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
     autoFocus?: boolean | undefined;
     contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     hidden?: boolean | undefined;
     id: import("@blueprintjs/core").TabId;
     lang?: string | undefined;
@@ -63,7 +65,6 @@ export declare const transformTabProperties: ({ title, dontShrink, className, ba
     rev?: string | undefined;
     typeof?: string | undefined;
     vocab?: string | undefined;
-    autoCapitalize?: string | undefined;
     autoCorrect?: string | undefined;
     autoSave?: string | undefined;
     color?: string | undefined;
@@ -288,8 +289,8 @@ export declare const transformTabProperties: ({ title, dontShrink, className, ba
     onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
     icon?: import("@blueprintjs/core").IconName | import("@blueprintjs/core").MaybeElement;
-    tagProps?: Omit<import("@blueprintjs/core").TagProps, "children">;
     panel?: React.JSX.Element | ((props: import("@blueprintjs/core/lib/esm/components/tabs/tab").TabIdProps) => React.JSX.Element);
+    tagProps?: Omit<import("@blueprintjs/core").TagProps, "children">;
     panelClassName?: string;
     tagContent?: import("@blueprintjs/core").TagProps["children"];
     key: import("@blueprintjs/core").TabId;
@@ -307,11 +308,13 @@ export declare const transformTabProperties: ({ title, dontShrink, className, ba
     suppressContentEditableWarning?: boolean | undefined;
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
     autoFocus?: boolean | undefined;
     contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
     hidden?: boolean | undefined;
     id: import("@blueprintjs/core").TabId;
     lang?: string | undefined;
@@ -333,7 +336,6 @@ export declare const transformTabProperties: ({ title, dontShrink, className, ba
     rev?: string | undefined;
     typeof?: string | undefined;
     vocab?: string | undefined;
-    autoCapitalize?: string | undefined;
     autoCorrect?: string | undefined;
     autoSave?: string | undefined;
     color?: string | undefined;
@@ -558,8 +560,8 @@ export declare const transformTabProperties: ({ title, dontShrink, className, ba
     onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
     icon?: import("@blueprintjs/core").IconName | import("@blueprintjs/core").MaybeElement;
-    tagProps?: Omit<import("@blueprintjs/core").TagProps, "children">;
     panel?: React.JSX.Element | ((props: import("@blueprintjs/core/lib/esm/components/tabs/tab").TabIdProps) => React.JSX.Element);
+    tagProps?: Omit<import("@blueprintjs/core").TagProps, "children">;
     panelClassName?: string;
     tagContent?: import("@blueprintjs/core").TagProps["children"];
     key: import("@blueprintjs/core").TabId;

package/dist/types/extensions/codemirror/CodeMirror.d.ts

@@ -1,9 +1,11 @@
 import React from "react";
 import { Extension } from "@codemirror/state";
 import { EditorView, Rect } from "@codemirror/view";
+import { IntentTypes } from "../../common/Intent";
+import { TestableComponent } from "../../components/interfaces";
 import { SupportedCodeEditorModes } from "./hooks/useCodemirrorModeExtension.hooks";
-export interface CodeEditorProps {
-    setEditorView?: (editor: EditorView | undefined) => any;
+export interface CodeEditorProps extends TestableComponent {
+    setEditorView?: (editor: EditorView | undefined) => void;
     /**
      * `name` attribute of connected textarea element.
      */
@@ -25,7 +27,7 @@ export interface CodeEditorProps {
     /**
      *  Called when the focus status changes
      */
-    onFocusChange?: (focused: boolean) => any;
+    onFocusChange?: (focused: boolean) => void;
     /**
      * Called when the user presses a key
      */
@@ -40,7 +42,7 @@ export interface CodeEditorProps {
     onSelection?: (ranges: {
         from: number;
         to: number;
-    }[]) => any;
+    }[]) => void;
     /**
      * Called when the cursor position changes
      */
@@ -101,11 +103,27 @@ export interface CodeEditorProps {
      * If the <Tab> key is enabled as normal input, i.e. it won't have the behavior of changing to the next input element, expected in a web app.
      */
     enableTab?: boolean;
+    /**
+     * Enables linting feature in the editor ("turtle" and "javascript" modes can use linting currently).
+     */
+    useLinting?: boolean;
+    /**
+     * Autofocus the editor when it is rendered
+     */
+    autoFocus?: boolean;
+    /**
+     * Intent state of the code editor.
+     */
+    intent?: IntentTypes | "edited" | "removed";
+    /**
+     * Disables the editor.
+     */
+    disabled?: boolean;
 }
 /**
  * Includes a code editor, currently we use CodeMirror library as base.
  */
 export declare const CodeEditor: {
-    ({ onChange, onSelection, onMouseDown, onFocusChange, onKeyDown, onCursorChange, name, id, mode, preventLineNumbers, defaultValue, readOnly, shouldHaveMinimalSetup, wrapLines, onScroll, setEditorView, supportCodeFolding, shouldHighlightActiveLine, outerDivAttributes, tabIntentSize, tabIntentStyle, placeholder, additionalExtensions, tabForceSpaceForModes, enableTab, height, }: CodeEditorProps): React.JSX.Element;
+    ({ onChange, onSelection, onMouseDown, onFocusChange, onKeyDown, onCursorChange, name, id, mode, preventLineNumbers, defaultValue, readOnly, shouldHaveMinimalSetup, wrapLines, onScroll, setEditorView, supportCodeFolding, shouldHighlightActiveLine, outerDivAttributes, tabIntentSize, tabIntentStyle, placeholder, additionalExtensions, tabForceSpaceForModes, enableTab, height, useLinting, "data-test-id": dataTestId, autoFocus, disabled, intent, ...otherCodeEditorProps }: CodeEditorProps): React.JSX.Element;
     supportedModes: ("markdown" | "python" | "sparql" | "turtle" | "xml" | "yaml" | "jinja2" | "json" | "ntriples" | "mathematica" | "sql" | "javascript")[];
 };

package/dist/types/extensions/codemirror/debouncedLinter.d.ts

@@ -0,0 +1,4 @@
+import { Diagnostic } from "@codemirror/lint";
+import { EditorView } from "@codemirror/view";
+import { Linter } from "./types";
+export declare const debouncedLinter: (lintFunction: Linter, time?: number) => (view: EditorView) => Promise<readonly Diagnostic[]>;

package/dist/types/extensions/codemirror/hooks/useCodemirrorModeExtension.hooks.d.ts

@@ -1,7 +1,7 @@
-import { StreamParser } from "@codemirror/language";
-import { markdown } from "@codemirror/lang-markdown";
 import { json } from "@codemirror/lang-json";
+import { markdown } from "@codemirror/lang-markdown";
 import { xml } from "@codemirror/lang-xml";
+import { StreamParser } from "@codemirror/language";
 import { sql } from "@codemirror/legacy-modes/mode/sql";
 declare const supportedModes: {
     readonly markdown: typeof markdown;

package/dist/types/extensions/codemirror/linters/jsLinter.d.ts

@@ -0,0 +1,5 @@
+import { ExtensionCreator } from "../types";
+/**
+ * Sets up the javascript linter. Documentation: https://codemirror.net/examples/lint/
+ */
+export declare const jsLinter: ExtensionCreator;

package/dist/types/extensions/codemirror/linters/turtleLinter.d.ts

@@ -0,0 +1,5 @@
+import { ExtensionCreator } from "../types";
+/**
+ * Sets up the turtle linter. Documentation: https://codemirror.net/examples/lint/
+ */
+export declare const turtleLinter: ExtensionCreator;

package/dist/types/extensions/codemirror/types.d.ts

@@ -0,0 +1,5 @@
+import { Diagnostic } from "@codemirror/lint";
+import { Extension } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+export type Linter = (view: EditorView) => ReadonlyArray<Diagnostic> | Promise<ReadonlyArray<Diagnostic>>;
+export type ExtensionCreator<T = unknown> = (options?: T) => Extension;

package/dist/types/extensions/react-flow/versionsupport.d.ts

@@ -4,4 +4,4 @@ export interface ReacFlowVersionSupportProps {
      */
     flowVersion?: "legacy" | "next" | "none";
 }
-export declare const useReactFlowVersion: () => "none" | "legacy" | "next";
+export declare const useReactFlowVersion: () => "none" | "next" | "legacy";

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "24.0.0",
+    "version": "24.1.0-rc.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -28,7 +28,7 @@
         "registry": "https://registry.npmjs.org"
     },
     "engines": {
-        "node": ">=18"
+        "node": ">=18.18.0"
     },
     "style": "src/index.scss",
     "main": "dist/cjs/index.js",
@@ -47,6 +47,7 @@
         "scripts"
     ],
     "scripts": {
+        "project:clean": "yarn test:clean && yarn build:clean && yarn storybook:clean && rimraf yarn-error.log",
         "build:clean": "rimraf dist/",
         "build:esm": "tsc --project .typescript/tsbuild-esm.json && ./scripts/fix-esm-dist",
         "build:cjs": "tsc --project .typescript/tsbuild-cjs.json && ./scripts/fix-cjs-dist",
@@ -55,21 +56,23 @@
         "compile-scss": "ts-node -O \"{ \\\"esModuleInterop\\\": true, \\\"module\\\": \\\"commonjs\\\"}\" ./scripts/compile-sass.ts",
         "storybook": "storybook dev -p 6006 --no-open",
         "build-storybook": "storybook build --webpack-stats-json",
+        "storybook:clean": "rimraf storybook-static/",
         "test": "jest",
         "test:ci": "jest --ci --reporters='default'",
         "test:coverage": "jest --collectCoverage",
         "test:generate-output": "jest --json --outputFile=.jest-test-results.json",
+        "test:clean": "rimraf .jest-test-results.json && rimraf coverage/",
         "autolint:scripts": "eslint --fix .storybook/ blueprint/ scripts/ src/ index.ts || exit 0",
         "autolint:styles": "stylelint \"{.storybook,src}/**/*.{css,scss}\" --fix || exit 0",
         "autolint:prettier": "prettier \"{.github,.storybook,.typescript,blueprint,scripts,src}/**/*\" .* *.json *.md *.ts --write --ignore-unknown",
         "autolint:all": "yarn autolint:scripts && yarn autolint:styles && yarn autolint:prettier"
     },
     "dependencies": {
-        "@blueprintjs/colors": "^5.1.1",
-        "@blueprintjs/core": "^5.11.0",
-        "@blueprintjs/select": "^5.2.2",
-        "@carbon/icons": "^11.47.1",
-        "@carbon/react": "^1.64.1",
+        "@blueprintjs/colors": "^5.1.5",
+        "@blueprintjs/core": "^5.16.2",
+        "@blueprintjs/select": "^5.3.7",
+        "@carbon/icons": "^11.53.0",
+        "@carbon/react": "^1.72.0",
         "@codemirror/lang-json": "^6.0.1",
         "@codemirror/lang-markdown": "^6.3.1",
         "@codemirror/lang-xml": "^6.1.0",
@@ -78,7 +81,9 @@
         "codemirror": "^6.0.1",
         "color": "^4.2.3",
         "compute-scroll-into-view": "^3.1.0",
+        "jshint": "^2.13.6",
         "lodash": "^4.17.21",
+        "n3": "^1.23.1",
         "re-resizable": "^6.10.1",
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
@@ -98,44 +103,49 @@
     },
     "devDependencies": {
         "@babel/core": "^7.26.0",
-        "@babel/plugin-proposal-class-properties": "^7.16.7",
-        "@babel/plugin-proposal-private-methods": "^7.16.11",
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
+        "@babel/plugin-proposal-private-methods": "^7.18.6",
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
         "@babel/preset-env": "^7.26.0",
         "@babel/preset-flow": "^7.25.9",
-        "@babel/preset-react": "^7.25.9",
+        "@babel/preset-react": "^7.26.3",
         "@babel/preset-typescript": "^7.26.0",
-        "@storybook/addon-actions": "^8.4.3",
-        "@storybook/addon-essentials": "^8.4.3",
-        "@storybook/addon-jest": "^8.4.3",
-        "@storybook/addon-links": "^8.4.3",
+        "@eslint/compat": "^1.2.4",
+        "@eslint/eslintrc": "^3.2.0",
+        "@eslint/js": "^9.17.0",
+        "@storybook/addon-actions": "^8.4.7",
+        "@storybook/addon-essentials": "^8.4.7",
+        "@storybook/addon-jest": "^8.4.7",
+        "@storybook/addon-links": "^8.4.7",
         "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-        "@storybook/cli": "^8.4.3",
+        "@storybook/cli": "^8.4.7",
         "@storybook/preset-scss": "^1.0.3",
-        "@storybook/react": "^8.4.3",
-        "@storybook/react-webpack5": "^8.4.3",
-        "@storybook/test": "^8.4.3",
+        "@storybook/react": "^8.4.7",
+        "@storybook/react-webpack5": "^8.4.7",
+        "@storybook/test": "^8.4.7",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^12.1.2",
         "@types/codemirror": "^5.60.15",
         "@types/color": "^3.0.6",
-        "@types/jest": "^29.5.12",
-        "@types/lodash": "^4.17.7",
+        "@types/jest": "^29.5.14",
+        "@types/jshint": "^2.12.4",
+        "@types/lodash": "^4.17.13",
+        "@types/n3": "^1.21.1",
         "@types/react-syntax-highlighter": "^15.5.13",
-        "@typescript-eslint/eslint-plugin": "^5.62.0",
-        "@typescript-eslint/parser": "^5.62.0",
+        "@typescript-eslint/eslint-plugin": "^8.18.1",
+        "@typescript-eslint/parser": "^8.18.1",
         "babel-jest": "^29.7.0",
-        "chromatic": "^11.18.1",
-        "eslint": "^8.57.0",
-        "eslint-plugin-react": "^7.35.0",
-        "eslint-plugin-react-hooks": "^4.6.2",
+        "chromatic": "^11.20.2",
+        "eslint": "^9.17.0",
+        "eslint-plugin-react": "^7.37.2",
+        "eslint-plugin-react-hooks": "^5.1.0",
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "husky": "4",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "jest-pnp-resolver": "^1.2.3",
-        "lint-staged": "^15.2.9",
+        "lint-staged": "^15.2.11",
         "node-sass-package-importer": "^5.3.3",
         "path": "^0.12.7",
         "prettier": "^2.8.8",
@@ -145,12 +155,12 @@
         "rimraf": "^5.0.10",
         "sass": "1.62.1",
         "sass-loader": "10.3.1",
-        "storybook": "^8.4.3",
+        "storybook": "^8.4.7",
         "stylelint": "^15.11.0",
         "stylelint-config-recess-order": "^4.6.0",
         "stylelint-config-standard-scss": "^9.0.0",
         "ts-node": "^10.9.2",
-        "tsc-esm-fix": "^3.0.2",
+        "tsc-esm-fix": "^3.1.2",
         "typescript": "5.5.3",
         "url-loader": "^4.1.1",
         "yargs": "^17.7.2"
@@ -161,8 +171,8 @@
         "react-dom": ">=16"
     },
     "resolutions": {
-        "**/@types/react": "^17.0.80",
-        "node-sass-package-importer/**/postcss": "^8.4.41",
+        "**/@types/react": "^17.0.83",
+        "node-sass-package-importer/**/postcss": "^8.4.49",
         "**/cross-spawn": "^7.0.5 ",
         "**/micromatch": "^4.0.8"
     },

package/src/cmem/react-flow/StickyNoteModal/StickyNoteModal.tsx

@@ -4,7 +4,16 @@ import getColorConfiguration from "../../../common/utils/getColorConfiguration";
 import { CodeEditor } from "../../../extensions";
 import { ReactFlowHotkeyContext } from "../extensions/ReactFlowHotkeyContext";
 
-import { Button, FieldItem, Icon, SimpleDialog, SimpleDialogProps, Tag, TagList } from "./../../../index";
+import {
+    Button,
+    CodeEditorProps,
+    FieldItem,
+    Icon,
+    SimpleDialog,
+    SimpleDialogProps,
+    Tag,
+    TagList,
+} from "./../../../index";
 
 export type StickyNoteModalTranslationKeys = "modalTitle" | "noteLabel" | "colorLabel" | "saveButton" | "cancelButton";
 
@@ -32,10 +41,14 @@ export interface StickyNoteModalProps {
      * Forward other properties to the `SimpleModal` element that is used for this dialog.
      */
     simpleDialogProps?: Omit<SimpleDialogProps, "size" | "title" | "hasBorder" | "isOpen" | "onClose" | "actions">;
+    /**
+     * Code editor props
+     */
+    codeEditorProps?: Omit<CodeEditorProps, "defaultValue" | "onChange" | "preventLinuNumbers" | "id" | "name">;
 }
 
 export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(
-    ({ metaData, onClose, onSubmit, translate, simpleDialogProps }) => {
+    ({ metaData, onClose, onSubmit, translate, simpleDialogProps, codeEditorProps }) => {
         const refNote = React.useRef<string>(metaData?.note ?? "");
         const [color, setSelectedColor] = React.useState<string>(metaData?.color ?? "");
         const noteColors: [string, string][] = Object.entries(getColorConfiguration("stickynotes")).map(
@@ -123,6 +136,7 @@ export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(
                             refNote.current = value;
                         }}
                         defaultValue={refNote.current}
+                        {...codeEditorProps}
                     />
                 </FieldItem>
                 <FieldItem

package/src/components/AutoSuggestion/ExtendedCodeEditor.tsx

@@ -4,7 +4,7 @@ import { EditorState } from "@codemirror/state";
 import { EditorView, lineNumbers, Rect } from "@codemirror/view";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import { CodeEditor } from "../../extensions/codemirror/CodeMirror";
+import { CodeEditor, CodeEditorProps } from "../../extensions/codemirror/CodeMirror";
 //hooks
 import { SupportedCodeEditorModes } from "../../extensions/codemirror/hooks/useCodemirrorModeExtension.hooks";
 
@@ -15,23 +15,23 @@ export interface IRange {
 
 export interface ExtendedCodeEditorProps {
     // Is called with the editor instance that allows access via the CodeMirror API
-    setCM: (editor: EditorView | undefined) => any;
+    setCM: (editor: EditorView | undefined) => void;
     // Called whenever the editor content changes
-    onChange: (value: string) => any;
+    onChange: (value: string) => void;
     // Called when the cursor position changes
-    onCursorChange: (pos: number, coords: Rect, scrollinfo: HTMLElement, cm: EditorView) => any;
+    onCursorChange: (pos: number, coords: Rect, scrollinfo: HTMLElement, cm: EditorView) => void;
     // The editor theme, e.g. "sparql"
     mode?: SupportedCodeEditorModes;
     // The initial value of the editor
     initialValue: string;
     // Called when the focus status changes
-    onFocusChange: (focused: boolean) => any;
+    onFocusChange: (focused: boolean) => void;
     // Called when the user presses a key
     onKeyDown: (event: KeyboardEvent) => boolean;
     // function invoked when any click occurs
     onMouseDown?: (view: EditorView) => void;
     // Called when the user selects text
-    onSelection: (ranges: IRange[]) => any;
+    onSelection: (ranges: IRange[]) => void;
     // If the <Tab> key is enabled as normal input, i.e. it won't have the behavior of changing to the next input element, expected in a web app.
     enableTab?: boolean;
     /** Placeholder to be shown when no text has been entered, yet. */
@@ -40,6 +40,27 @@ export interface ExtendedCodeEditorProps {
     showScrollBar?: boolean;
     /** allow multiline entries when new line characters are entered */
     multiline?: boolean;
+    /**
+     * Code editor props
+     */
+    codeEditorProps?: Omit<
+        CodeEditorProps,
+        | "defaultValue"
+        | "setEditorView"
+        | "onChange"
+        | "onCursorChange"
+        | "onFocusChange"
+        | "onKeyDown"
+        | "onSelection"
+        | "onMouseDown"
+        | "shouldHaveMinimalSetup"
+        | "preventLineNumbers"
+        | "mode"
+        | "name"
+        | "enableTab"
+        | "additionalExtensions"
+        | "outerDivAttributes"
+    >;
 }
 
 export type IEditorProps = ExtendedCodeEditorProps;
@@ -58,6 +79,7 @@ export const ExtendedCodeEditor = ({
     placeholder,
     onCursorChange,
     onSelection,
+    codeEditorProps,
 }: ExtendedCodeEditorProps) => {
     const initialContent = React.useRef(multiline ? initialValue : initialValue.replace(/[\r\n]/g, " "));
     const multilineExtensions = multiline
@@ -88,6 +110,7 @@ export const ExtendedCodeEditor = ({
                     multiline ? "codeeditor" : `singlelinecodeeditor ${BlueprintClassNames.INPUT}`
                 }`,
             }}
+            {...codeEditorProps}
         />
     );
 };

package/src/components/MultiSelect/MultiSelect.tsx

@@ -323,6 +323,7 @@ function MultiSelect<T>({
      * @param query
      */
     const onQueryChange = (query: string) => {
+        setFilteredItems([]);
         if (query.length && query !== requestState.current.query) {
             requestState.current.query = query;
             if (requestState.current.timeoutId) {

package/src/components/TextField/stories/TextField.stories.tsx

@@ -31,6 +31,7 @@ Default.args = {
     fullWidth: false,
     placeholder: "placeholder text",
     readOnly: false,
+    disabled: false,
 };
 
 /** Text field with default value that contains a zero width/invisible character.
@@ -46,7 +47,7 @@ const invisibleCharacterWarningProps: TextFieldProps = {
                 const codePointsString = [...Array.from(codePoints)]
                     .map((n) => {
                         const info = characters.invisibleZeroWidthCharacters.codePointMap.get(n);
-                        return info.fullLabel;
+                        return info?.fullLabel;
                     })
                     .join(", ");
                 alert("Invisible character detected in input string. Code points: " + codePointsString);

package/src/extensions/codemirror/CodeMirror.stories.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
+import { helpersArgTypes } from "../../../.storybook/helpers";
+
 import { CodeEditor } from "./CodeMirror";
 
 export default {
@@ -11,6 +13,9 @@ export default {
         onChange: {
             action: "value changed",
         },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+        },
     },
 } as Meta<typeof CodeEditor>;
 
@@ -22,3 +27,28 @@ BasicExample.args = {
     mode: "markdown",
     defaultValue: "**test me**",
 };
+
+export const LinterExample = TemplateFull.bind({});
+LinterExample.args = {
+    name: "codeinput",
+    defaultValue: "**test me**",
+    mode: "javascript",
+    useLinting: true,
+    autoFocus: true,
+};
+
+export const DisabledExample = TemplateFull.bind({});
+DisabledExample.args = {
+    name: "codeinput",
+    defaultValue: "**test me**",
+    mode: "javascript",
+    disabled: true,
+};
+
+export const IntentExample = TemplateFull.bind({});
+IntentExample.args = {
+    name: "codeinput",
+    defaultValue: "**test me**",
+    mode: "javascript",
+    intent: "warning",
+};