Merge branch 'master' of github.com:DevoInc/genesys-ui

DevoInc · Sep 26, 2024 · 3d22c4f · 3d22c4f
2 parents 7e16941 + 729d1fc
commit 3d22c4f
Show file tree

Hide file tree

Showing 144 changed files with 2,069 additions and 1,208 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "stryker": "npm run stryker -ws --if-present",
     "analyzer": "npm run analyzer -ws --if-present",
     "test": "vitest",
-    "test:ci": "vitest --coverage",
+    "test:ci": "npm run test -ws --if-present -- --coverage --watch=false",
     "dpdm": "npm run dpdm -ws --if-present",
     "release": "release-it --dry-run",
     "release:ci": "release-it --ci",
@@ -51,35 +51,36 @@
     "@stryker-mutator/vitest-runner": "^8.5.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/js-cookie": "^3.0.6",
-    "@types/node": "^22.5.5",
+    "@types/node": "^22.7.0",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitest/coverage-v8": "^2.1.1",
     "babel-plugin-styled-components": "^2.1.4",
-    "dependency-cruiser": "^16.4.1",
+    "dependency-cruiser": "^16.4.2",
     "dpdm": "^3.14.0",
-    "framer-motion": "^11.5.4",
+    "framer-motion": "^11.7.0",
     "happy-dom": "^15.7.4",
     "identity-obj-proxy": "^3.0.0",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "mermaid": "^11.2.1",
-    "oxlint": "^0.9.6",
+    "oxlint": "^0.9.8",
     "polished": "^4.3.1",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-syntax-highlighter": "^15.5.0",
     "release-it": "^17.6.0",
     "remark-gfm": "^4.0.0",
-    "sass": "^1.79.1",
+    "sass": "^1.79.3",
     "storybook": "^8.3.1",
     "tocbot": "^4.29.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.6.2",
-    "vite": "^5.4.6",
-    "vite-bundle-analyzer": "^0.11.0",
-    "vite-plugin-dts": "^4.2.1",
+    "vite": "^5.4.8",
+    "vite-bundle-visualizer": "^1.2.1",
+    "vite-plugin-dts": "^4.2.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
     "viz.js": "^2.1.2"

diff --git a/packages/code/package.json b/packages/code/package.json
@@ -25,7 +25,7 @@
     "build": "vite build",
     "build:watch": "vite build --watch",
     "depcruise": "sh ../../depcruise.sh \"$npm_package_name\"",
-    "analyzer": "npx vite-bundle-visualizer -o 'dist/stats.html'",
+    "analyzer": "vite-bundle-visualizer -o 'dist/stats.html'",
     "stryker": "npx stryker run",
     "dpdm": "dpdm --exit-code circular:1 ./src/index.ts"
   },

diff --git a/packages/code/src/components/Editor/Editor.mdx b/packages/code/src/components/Editor/Editor.mdx
@@ -46,19 +46,19 @@ import { Editor, useEditorTheme } from '@devoinc/genesys-ui-code';
 export const CustomThemed = () => {
   const editorTheme = useEditorTheme();
 
-return (
-<Editor.Container bordered={true}>
-<Editor.Editor
-height="300px"
-bordered={true}
-theme={editorTheme}
-value="I'm being built from my inner parts"
-/>
-<Editor.ActionsContainer>
-<IconButton icon="gi-heart_full" />
-</Editor.ActionsContainer>
-</Editor.Container>
-);
+  return (
+    <Editor.Container bordered={true}>
+      <Editor.Editor
+        height="300px"
+        bordered={true}
+        theme={editorTheme}
+        value="I'm being built from my inner parts"
+      />
+      <Editor.ActionsContainer>
+        <IconButton icon="gi-heart_full" />
+      </Editor.ActionsContainer>
+    </Editor.Container>
+  );
 };
 `} />
 
@@ -87,41 +87,41 @@ import { Editor, 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'],
-],
-},
+  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 };
-},
+  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 = () => {
@@ -133,15 +133,15 @@ export const CustomLang = () => {
       .registerCompletionProvider(completionProvider);
   };
 
-return (
-<Editor
-height="300px"
-language={languageId}
-bordered={true}
-value={'{ "keyword": true, "not_keyword": 123 }'}
-beforeMount={registerLanguageProviders}
-/>
-);
+  return (
+    <Editor
+      height="300px"
+      language={languageId}
+      bordered={true}
+      value={'{ "keyword": true, "not_keyword": 123 }'}
+      beforeMount={registerLanguageProviders}
+    />
+  );
 };
 `} />
 
@@ -164,26 +164,27 @@ import {
 export const CustomThemed = () => {
   const editorTheme = useEditorTheme();
 
-const { containerRef } = useEditor({
-originalValue: 'Hey there!',
-modifiedValue: 'Hey hey!',
-theme: editorTheme,
-language: '',
-beforeMount: () => console.log('beforeMount'),
-onMount: () => console.log('onMount'),
-onChange: () => console.log('onChange'),
-onValidate: () => console.log('onValidate'),
-options: {},
-});
-
-return (
-<Editor.Container>
-<Box ref={containerRef} height="100%" />
-<Editor.ActionsContainer>
-<IconButton icon="gi-heart_full" />
-</Editor.ActionsContainer>
-</Editor.Container>
-);
+  const { containerRef } = useEditor({
+    originalValue: 'Hey there!',
+    modifiedValue: 'Hey hey!',
+    theme: editorTheme,
+    language: '',
+    beforeMount: () => console.log('beforeMount'),
+    onMount: () => console.log('onMount'),
+    onChange: () => console.log('onChange'),
+    onValidate: () => console.log('onValidate'),
+    options: {},
+  });
+
+  return (
+    <Editor.Container>
+      <Box ref={containerRef} height="100%" />
+        <Editor.ActionsContainer>
+          <IconButton icon="gi-heart_full" />
+        </Editor.ActionsContainer>
+      </Box>
+    </Editor.Container>
+  );
 };
 `} />
 
@@ -215,19 +216,19 @@ export const CustomThemed = () => {
     },
   };
 
-return (
-<Editor.Container bordered={true}>
-<Editor.Editor
-height="300px"
-bordered={true}
-theme={customEditorTheme}
-value="I'm being built from my inner parts"
-/>
-<Editor.ActionsContainer>
-<IconButton icon="gi-heart_full" />
-</Editor.ActionsContainer>
-</Editor.Container>
-);
+  return (
+    <Editor.Container bordered={true}>
+      <Editor.Editor
+        height="300px"
+        bordered={true}
+        theme={customEditorTheme}
+        value="I'm being built from my inner parts"
+      />
+      <Editor.ActionsContainer>
+        <IconButton icon="gi-heart_full" />
+      </Editor.ActionsContainer>
+    </Editor.Container>
+  );
 };
 `} />
 

diff --git a/packages/code/vite.config.ts b/packages/code/vite.config.ts
@@ -53,5 +53,14 @@ export default defineConfig({
   test: {
     environment: 'happy-dom',
     include: ['{src,stories}/**/*.test.ts?(x)'],
+    coverage: {
+      provider: 'v8',
+      include: ['{src,stories}/**/*'],
+    },
+    server: {
+      deps: {
+        inline: [/\/@devoinc\/genesys-ui\//],
+      },
+    },
   },
 });
diff --git a/packages/color/package.json b/packages/color/package.json
@@ -9,7 +9,7 @@
     "build": "vite build",
     "build:watch": "vite build --watch",
     "depcruise": "sh ../../depcruise.sh \"$npm_package_name\"",
-    "analyzer": "npx vite-bundle-visualizer -o 'dist/stats.html'",
+    "analyzer": "vite-bundle-visualizer -o 'dist/stats.html'",
     "stryker": "npx stryker run",
     "dpdm": "dpdm --exit-code circular:1 ./src/index.ts"
   },

diff --git a/packages/color/vite.config.ts b/packages/color/vite.config.ts
@@ -54,5 +54,14 @@ export default defineConfig({
   test: {
     environment: 'happy-dom',
     include: ['{src,stories}/**/*.test.ts?(x)'],
+    coverage: {
+      provider: 'v8',
+      include: ['{src,stories}/**/*'],
+    },
+    server: {
+      deps: {
+        inline: [/\/@devoinc\/genesys-ui\//],
+      },
+    },
   },
 });
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -18,10 +18,11 @@
   "scripts": {
     "compile": "tsc --project tsconfig.json",
     "compile:watch": "npm run compile -- --watch",
+    "test": "vitest",
     "build": "vite build",
     "build:watch": "vite build --watch",
     "depcruise": "sh ../../depcruise.sh \"$npm_package_name\"",
-    "analyzer": "npx vite-bundle-visualizer -o 'dist/stats.html'",
+    "analyzer": "vite-bundle-visualizer -o 'dist/stats.html'",
     "stryker": "npx stryker run",
     "dpdm": "dpdm --exit-code circular:1 ./src/index.ts"
   },

diff --git a/packages/core/src/components/Panel/Panel.tsx b/packages/core/src/components/Panel/Panel.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTheme } from 'styled-components';
 
-import { useDetectScroll } from '../../hooks';
+import { useIsOverflow } from '../../hooks';
 import type { TPanelSize } from './declarations';
 import type {
   IStyledOverloadCss,
@@ -47,12 +47,14 @@ const InternalPanel = React.forwardRef<HTMLElement, PanelProps>(
       style,
       size = 'md',
       children,
+      removeContentSpace,
       ...restBoxProps
     },
     ref,
   ) => {
     const theme = useTheme();
-    const { hasScroll, targetElRef } = useDetectScroll();
+    const targetElRef = React.useRef<HTMLDivElement>(null);
+    const { hasScroll } = useIsOverflow(targetElRef);
     return (
       <Box
         {...restBoxProps}
@@ -69,7 +71,12 @@ const InternalPanel = React.forwardRef<HTMLElement, PanelProps>(
         )}
       >
         <PanelContext.Provider
-          value={{ scrolledBodyContent: hasScroll, size, bodyRef: targetElRef }}
+          value={{
+            scrolledBodyContent: hasScroll,
+            size,
+            bodyRef: targetElRef,
+            removeContentSpace,
+          }}
         >
           {children}
         </PanelContext.Provider>

diff --git a/packages/core/src/components/Panel/components/PanelBody/PanelBody.tsx b/packages/core/src/components/Panel/components/PanelBody/PanelBody.tsx
@@ -19,6 +19,8 @@ export const PanelBody = React.forwardRef<HTMLElement, PanelBodyProps>(
     const theme = useTheme();
     const context = React.useContext(PanelContext);
     const evalSize = size || context.size || 'md';
+    const removeContentSpace =
+      removeSpace ?? context?.removeContentSpace ?? false;
 
     return (
       <Box
@@ -29,7 +31,7 @@ export const PanelBody = React.forwardRef<HTMLElement, PanelBodyProps>(
         style={mergeStyles(
           panelBodyMixin({
             hasScrollSpacing: hasScrollSpacing ?? context.scrolledBodyContent,
-            removeSpace,
+            removeSpace: removeContentSpace,
             size: evalSize,
             theme,
           }),