Merge branch 'master' into feature/QUV-405_create_tests_for_panel_and…

…_panelSection

.github/workflows/release.yml

@@ -17,7 +17,7 @@ on:
           - patch
           - prerelease
           - auto
-        default: prerelease
+        default: auto
         required: true
 
 run-name: release ${{ github.event.inputs.version }}${{ github.event.inputs.dry == 'true' && ' (--dry-run)' || '' }}

CHANGELOG.md

@@ -1,5 +1,7 @@
 # Changelog
 
+## [1.0.3](https://github.com/DevoInc/genesys-ui/compare/v1.0.3-alpha.35...v1.0.3) (2023-10-27)
+
 ## [1.0.3-alpha.35](https://github.com/DevoInc/genesys-ui/compare/v1.0.3-alpha.34...v1.0.3-alpha.35) (2023-10-26)
 
 

README.md

@@ -10,18 +10,18 @@ Monorepo containing the codebase for the Genesys UI components library.
 
 The project is built using `npm workspaces` and includes the following packages:
 
-[![npm version](https://img.shields.io/npm/v/@devoinc/genesys-ui/alpha?label=%40devoinc%2Fgenesys-ui@alpha)](https://www.npmjs.com/package/@devoinc/genesys-ui)
+[![npm version](https://img.shields.io/npm/v/@devoinc/genesys-ui/latest?label=%40devoinc%2Fgenesys-ui@latest)](https://www.npmjs.com/package/@devoinc/genesys-ui)
 
-[![npm version](https://img.shields.io/npm/v/@devoinc/genesys-ui-form/alpha?label=%40devoinc%2Fgenesys-ui-form@alpha)](https://www.npmjs.com/package/@devoinc/genesys-ui-form)
+[![npm version](https://img.shields.io/npm/v/@devoinc/genesys-ui-form/latest?label=%40devoinc%2Fgenesys-ui-form@latest)](https://www.npmjs.com/package/@devoinc/genesys-ui-form)
 
-[![npm version](https://img.shields.io/npm/v/@devoinc/genesys-ui-datetime/alpha?label=%40devoinc%2Fgenesys-ui-datetime@alpha)](https://www.npmjs.com/package/@devoinc/genesys-ui-datetime)
+[![npm version](https://img.shields.io/npm/v/@devoinc/genesys-ui-datetime/latest?label=%40devoinc%2Fgenesys-ui-datetime@latest)](https://www.npmjs.com/package/@devoinc/genesys-ui-datetime)
 
-[![npm version](https://img.shields.io/npm/v/@devoinc/genesys-ui-code/alpha?label=%40devoinc%2Fgenesys-ui-code@alpha)](https://www.npmjs.com/package/@devoinc/genesys-ui-code)
+[![npm version](https://img.shields.io/npm/v/@devoinc/genesys-ui-code/latest?label=%40devoinc%2Fgenesys-ui-code@latest)](https://www.npmjs.com/package/@devoinc/genesys-ui-code)
 
 - **genesys-ui:** Core package containing base components.
 - **genesys-ui-form:** Form components.
 - **genesys-ui-datetime:** Date and time components.
-- **genesys-ui-datetime:** Code editing and code visualization components.
+- **genesys-ui-code:** Code editing and code visualization components.
 
 The packages have the following interdependencies:
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "genesys-ui",
-  "version": "1.0.3-alpha.35",
+  "version": "1.0.3",
   "description": "",
   "main": "index.js",
   "private": true,

packages/code/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devoinc/genesys-ui-code",
-  "version": "1.0.3-alpha.35",
+  "version": "1.0.3",
   "description": "",
   "types": "./dist/types/src/index.d.ts",
   "main": "./dist/index.umd.js",
@@ -31,7 +31,7 @@
   },
   "peerDependencies": {
     "@devoinc/genesys-brand-devo": "^6.1.1",
-    "@devoinc/genesys-ui": "^1.0.3-alpha.35",
+    "@devoinc/genesys-ui": "^1.0.3",
     "monaco-editor-core": "^0.24.0",
     "react": ">=16.13.1",
     "react-dom": ">=16.13.1",

packages/code/src/components/DiffEditor/stories/DiffEditor.cases.stories.tsx

@@ -8,18 +8,17 @@ import {
   MultipleEds,
   Programatic,
   Actions,
-  MultipleLangs,
   Shortcuts,
   CustomThemed,
 } from './cases';
-import { rawLanguage } from '../../Editor/__stories__/languages/rawConfig';
+import { jason } from '../../Editor/__stories__/languages/jason';
 
 const meta: Meta<typeof DiffEditor> = {
   title: 'Components/Code/DiffEditor/cases',
   component: DiffEditor,
   args: {
-    originalValue: rawLanguage.value,
-    modifiedValue: rawLanguage.value.replaceAll('Grid', 'Flex'),
+    originalValue: jason.value,
+    modifiedValue: jason.value.replaceAll('Grid', 'Flex'),
     height: '300px',
     bordered: true,
   },
@@ -54,10 +53,3 @@ export const MultipleDiffEditors: DiffEditorStory = {
     <MultipleEds {...props} />
   ),
 };
-
-export const MultipleLanguages: DiffEditorStory = {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  render: ({ originalValue, modifiedValue, ...props }) => (
-    <MultipleLangs {...props} />
-  ),
-};

packages/code/src/components/DiffEditor/stories/DiffEditor.mdx

@@ -73,6 +73,86 @@ export const CustomThemed = () => {
 `}
 />
 
+## Registering a custom language
+
+The Editor supports custom languages. To use a custom language, the language and its configuration must be registered with the editor using the `registerLanguage` function.
+**Please, refrain from directly using monaco editor's `monaco.languages.register` function, as it might side-effect other editors.**
+
+For more a more advanced use case, visit [Custom Language With Validation](#custom-language-with-validation). See also [Monaco Editor - Custom Languages](https://microsoft.github.io/monaco-editor/monarch.html) 
+and [Monaco Editor - Custom Autocompletion](https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-custom-languages)
+for more information regarding language definitions and autocompletion.
+
+<Source
+  code={`
+import * as React from 'react';
+import * as monaco from 'monaco-editor-core';
+
+import { DiffEditor, registerLanguage } from '@devoinc/genesys-ui-code';
+
+const languageId = 'myLang';
+
+const language = {
+  keywords: ['"keyword"'],
+  tokenizer: {
+    root: [
+      [
+        /"[A-Za-z0-9_]*"/,
+        {
+          cases: {
+            '@keywords': 'keyword',
+            '@default': 'default',
+          },
+        },
+      ],
+      [/:\s"((.|-|\n|\r)*)"/, 'value'],
+    ],
+  },
+};
+
+const completionProvider = {
+  provideCompletionItems: (model, position) => {
+    const word = model.getWordUntilPosition(position);
+    const suggestions = [
+      {
+        label: 'keyword',
+        kind: monaco.languages.CompletionItemKind.Field,
+        insertText: '"keyword"',
+        range: {
+          startLineNumber: position.lineNumber,
+          endLineNumber: position.lineNumber,
+          startColumn: word.startColumn,
+          endColumn: word.endColumn,
+        },
+      },
+    ];
+
+    return { suggestions: suggestions };
+  },
+};
+
+export const CustomLang = () => {
+  const registerLanguageProviders = (monaco) => {
+    registerLanguage(monaco, languageId)
+      // register highlighting
+      .registerStyleTokenizer(language)
+      // register autocompletion
+      .registerCompletionProvider(completionProvider);
+  };
+
+  return (
+    <DiffEditor
+      height="300px"
+      language={languageId}
+      bordered={true}
+      originalValue={'{ "keyword": true, "not_keyword": 123 }'}
+      modifiedValue={'{\n "keyword": true,\n "not_keyword": 1234\n}'}
+      beforeMount={registerLanguageProviders}
+    />
+  );
+};
+`} />
+
+
 ## Hooks
 
 ### useDiffEditor

packages/code/src/components/DiffEditor/stories/cases/CustomLang.tsx

@@ -2,12 +2,9 @@ import * as React from 'react';
 import type * as monaco from 'monaco-editor-core';
 
 import { DiffEditor, type DiffEditorProps } from '../../';
-import { rawLanguage } from '../../../Editor/__stories__/languages/rawConfig';
-import { dedalLanguage } from '../../../Editor/__stories__/languages/dedal';
-import {
-  registerCompletionProvider,
-  registerStyleTokenizer,
-} from '../../../Editor';
+import { jason } from '../../../Editor/__stories__/languages/jason';
+import { esql } from '../../../Editor/__stories__/languages/esql';
+import { registerLanguage } from '../../../Editor';
 
 type Monaco = typeof monaco;
 
@@ -23,31 +20,24 @@ const opts: monaco.editor.IDiffEditorOptions = {
 };
 
 const languages = {
-  rawConfig: rawLanguage,
-  dedal: dedalLanguage,
+  jason: jason,
+  esql: esql,
 };
 
 export const CustomLang = ({
-  langId = 'rawConfig',
+  langId = 'jason',
   options,
   ...props
 }: Partial<DiffEditorProps & { langId: string }>) => {
   const editorRef = React.useRef<monaco.editor.IStandaloneDiffEditor>();
   const monacoRef = React.useRef<Monaco>();
 
   const registerLanguageProviders = (monaco) => {
-    // Register highlighting
-    registerStyleTokenizer(
-      monaco,
-      languages[langId].id,
-      languages[langId].lang,
-    );
-    // Register autocompletion
-    registerCompletionProvider(
-      monaco,
-      languages[langId].id,
-      languages[langId].completionProvider,
-    );
+    registerLanguage(monaco, languages[langId].id)
+      // register highlighting
+      .registerStyleTokenizer(languages[langId].lang)
+      // register autocompletion
+      .registerCompletionProvider(languages[langId].completionProvider);
   };
 
   const handleEditorDidMount = (

packages/code/src/components/DiffEditor/stories/cases/MultipleEds.tsx

@@ -9,7 +9,7 @@ export const MultipleEds = ({ ...props }: Partial<DiffEditorProps>) => {
     <Flex width="100%" flexDirection="column" gap="cmp-md">
       <CustomLang {...props} />
       <CustomLang options={{ minimap: { enabled: false } }} {...props} />
-      <CustomLang langId="dedal" language="dedal" {...props} />
+      <CustomLang langId="esql" language="esql" {...props} />
       <CustomLang options={{ fontSize: 10 }} {...props} />
     </Flex>
   );