@gitlab/ui 72.12.4 → 72.14.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [72.14.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v72.13.0...v72.14.0) (2024-01-30)
+
+
+### Features
+
+* **tailwindcss:** extend config with colors and spacing scale ([2c7a006](https://gitlab.com/gitlab-org/gitlab-ui/commit/2c7a006e4c605c58a753d8bfbc8ceb0bdc101cf8))
+
+# [72.13.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v72.12.4...v72.13.0) (2024-01-30)
+
+
+### Features
+
+* **GlDuoChat:** slash commands for chat as a prop ([af86eb8](https://gitlab.com/gitlab-org/gitlab-ui/commit/af86eb883fad3b63b012c25fbe19f4cfa773f8ba))
+
 ## [72.12.4](https://gitlab.com/gitlab-org/gitlab-ui/compare/v72.12.3...v72.12.4) (2024-01-26)
 
 

package/dist/components/experimental/duo/chat/duo_chat.js

@@ -30,27 +30,13 @@ const i18n = {
   CHAT_LEGAL_DISCLAIMER: "May provide inappropriate responses not representative of GitLab's views. Do not input personal data.",
   CHAT_DEFAULT_PREDEFINED_PROMPTS: ['How do I change my password in GitLab?', 'How do I fork a project?', 'How do I clone a repository?', 'How do I create a template?']
 };
-const slashCommands = [{
-  name: '/reset',
-  shouldSubmit: true,
-  description: 'Reset conversation, ignore the previous messages.'
-}, {
-  name: '/tests',
-  shouldSubmit: false,
-  description: 'Write tests for the selected snippet.'
-}, {
-  name: '/refactor',
-  shouldSubmit: false,
-  description: 'Refactor the selected snippet.'
-}, {
-  name: '/explain',
-  shouldSubmit: false,
-  description: 'Explain the selected snippet.'
-}];
 const isMessage = item => Boolean(item) && (item === null || item === void 0 ? void 0 : item.role);
+const isSlashCommand = command => Boolean(command) && (command === null || command === void 0 ? void 0 : command.name) && command.description;
 
 // eslint-disable-next-line unicorn/no-array-callback-reference
 const itemsValidator = items => items.every(isMessage);
+// eslint-disable-next-line unicorn/no-array-callback-reference
+const slashCommandsValidator = commands => commands.every(isSlashCommand);
 var script = {
   name: 'GlDuoChat',
   components: {
@@ -147,12 +133,13 @@ var script = {
       default: i18n.CHAT_DEFAULT_TITLE
     },
     /**
-     * Whether the slash commands should be available to user when typing the prompt.
+     * Array of slash commands to display in the chat.
      */
-    withSlashCommands: {
-      type: Boolean,
+    slashCommands: {
+      type: Array,
       required: false,
-      default: false
+      default: () => [],
+      validator: slashCommandsValidator
     }
   },
   data() {
@@ -164,6 +151,9 @@ var script = {
     };
   },
   computed: {
+    withSlashCommands() {
+      return this.slashCommands.length > 0;
+    },
     hasMessages() {
       var _this$messages;
       return ((_this$messages = this.messages) === null || _this$messages === void 0 ? void 0 : _this$messages.length) > 0;
@@ -188,13 +178,13 @@ var script = {
     },
     filteredSlashCommands() {
       const caseInsensitivePrompt = this.prompt.toLowerCase();
-      return slashCommands.filter(c => c.name.toLowerCase().startsWith(caseInsensitivePrompt));
+      return this.slashCommands.filter(c => c.name.toLowerCase().startsWith(caseInsensitivePrompt));
     },
     shouldShowSlashCommands() {
       if (!this.withSlashCommands) return false;
       const caseInsensitivePrompt = this.prompt.toLowerCase();
       const startsWithSlash = caseInsensitivePrompt.startsWith('/');
-      const startsWithSlashCommand = slashCommands.some(c => caseInsensitivePrompt.startsWith(c.name));
+      const startsWithSlashCommand = this.slashCommands.some(c => caseInsensitivePrompt.startsWith(c.name));
       return startsWithSlash && this.filteredSlashCommands.length && !startsWithSlashCommand;
     },
     inputPlaceholder() {
@@ -356,4 +346,4 @@ var __vue_staticRenderFns__ = [];
   );
 
 export default __vue_component__;
-export { i18n, slashCommands };
+export { i18n };

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 26 Jan 2024 18:13:36 GMT
+ * Generated on Tue, 30 Jan 2024 18:03:42 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 26 Jan 2024 18:13:37 GMT
+ * Generated on Tue, 30 Jan 2024 18:03:42 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 26 Jan 2024 18:13:37 GMT
+ * Generated on Tue, 30 Jan 2024 18:03:42 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 26 Jan 2024 18:13:36 GMT
+ * Generated on Tue, 30 Jan 2024 18:03:42 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 26 Jan 2024 18:13:37 GMT
+// Generated on Tue, 30 Jan 2024 18:03:43 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 26 Jan 2024 18:13:37 GMT
+// Generated on Tue, 30 Jan 2024 18:03:42 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "72.12.4",
+  "version": "72.14.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -30,7 +30,7 @@
     "build-tokens": "node ./bin/build_tokens.js",
     "clean": "rm -r dist storybook src/scss/utilities.scss",
     "cy:a11y": "cypress run --browser chrome --env grepTags=@a11y",
-    "cy:edge": "cypress run --browser edge --env grepTags=-@a11y",
+    "cy:edge": "cypress run --browser edge --env grepTags=-@a11y+-@storybook",
     "cy:run": "cypress run --browser firefox --env grepTags=-@a11y",
     "start": "yarn storybook",
     "storybook": "yarn storybook-prep && storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
@@ -91,16 +91,16 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.23.7",
+    "@babel/core": "^7.23.9",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.23.8",
+    "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@cypress/grep": "^4.0.1",
     "@gitlab/eslint-plugin": "19.4.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "5.0.1",
-    "@gitlab/svgs": "3.75.0",
+    "@gitlab/svgs": "3.79.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/src/components/experimental/duo/chat/duo_chat.md

@@ -18,6 +18,7 @@ consumer component.
   :predefined-prompts="predefinedPrompts"
   :badge-help-page-url="badgeHelpPageUrl"
   :tool-name="toolName"
+  :slash-commands="slashCommands"
   @chat-hidden="onChatHidden"
   @send-chat-prompt="onSendChatPrompt"
   @track-feedback="onTrackFeedback"
@@ -141,3 +142,34 @@ With this template in place, consumer is left with the following things to imple
 
 - Send the new user's prompt. For Duo Chat, we rely on GraphQL mutation for this purpose.
 - Send user feedback to the telemetry of your choice when `track-feedback` event arrives.
+
+## Slash commands
+
+One of the props accepted by the component is the `slashCommands`. This is an `Array` of
+the commands, shown to user when they start typing the prompt with a slash (`/`)
+character.
+
+```javascript
+<script>
+  const slashCommands = [
+    {
+      name: '/mycommand', // This is the exact name of my command as it will be submitted
+      shouldSubmit: true, // If the command should be submitted right away without free text
+      description: 'The description of my super-duper command.',
+    },
+    ...
+  ];
+  export default {
+    ...
+    options: {
+      slashCommands
+    }
+  }
+<script>
+<template>
+  <gl-duo-chat
+    ...
+    :slash-commands="slashCommands"
+  />
+</template>
+```

package/src/components/experimental/duo/chat/duo_chat.spec.js

@@ -7,10 +7,42 @@ import GlDropdownItem from '../../../base/dropdown/dropdown_item.vue';
 import DuoChatLoader from './components/duo_chat_loader/duo_chat_loader.vue';
 import DuoChatPredefinedPrompts from './components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue';
 import DuoChatConversation from './components/duo_chat_conversation/duo_chat_conversation.vue';
-import GlDuoChat, { slashCommands } from './duo_chat.vue';
+import GlDuoChat from './duo_chat.vue';
 
 import { MESSAGE_MODEL_ROLES, CHAT_RESET_MESSAGE } from './constants';
 
+const slashCommands = [
+  {
+    name: '/reset',
+    shouldSubmit: true,
+    description: 'Reset conversation, ignore the previous messages.',
+  },
+  {
+    name: '/tests',
+    description: 'Write tests for the selected snippet.',
+  },
+  {
+    name: '/refactor',
+    description: 'Refactor the selected snippet.',
+  },
+  {
+    name: '/explain',
+    description: 'Explain the selected snippet.',
+  },
+];
+
+const invalidSlashCommands = [
+  {
+    name: '/foo',
+  },
+  {
+    description: '/bar',
+  },
+  {
+    shouldSubmit: true,
+  },
+];
+
 const generatePartialSlashCommands = () => {
   const res = [];
   slashCommands.forEach((command) => {
@@ -421,21 +453,14 @@ describe('GlDuoChat', () => {
       slashCommandsNames.filter((name) => commands.includes(name));
 
     describe('rendering', () => {
-      describe('without the `withSlashCommands` enabled', () => {
+      describe('without slash commands', () => {
         it('does not render slash commands by default', () => {
-          createComponent({
-            propsData: {
-              withSlashCommands: false,
-            },
-          });
+          createComponent();
           expect(findSlashCommandsCard().exists()).toBe(false);
         });
 
         it('does not render slash commands when prompt is "/"', async () => {
           createComponent({
-            propsData: {
-              withSlashCommands: false,
-            },
             data: {
               prompt: '/',
             },
@@ -446,20 +471,16 @@ describe('GlDuoChat', () => {
         });
 
         it('shows default placeholder in the chat input', () => {
-          createComponent({
-            propsData: {
-              withSlashCommands: false,
-            },
-          });
+          createComponent();
           expect(findChatInput().attributes('placeholder')).toBe('GitLab Duo Chat');
         });
       });
 
-      describe('with the `withSlashCommands` enabled', () => {
+      describe('with slash commands', () => {
         it('does not render slash commands by default', async () => {
           createComponent({
             propsData: {
-              withSlashCommands: true,
+              slashCommands,
             },
           });
 
@@ -470,7 +491,7 @@ describe('GlDuoChat', () => {
         it('renders all slash commands when prompt is "/"', async () => {
           createComponent({
             propsData: {
-              withSlashCommands: true,
+              slashCommands,
             },
             data: {
               prompt: '/',
@@ -490,19 +511,29 @@ describe('GlDuoChat', () => {
         it('shows the correct placeholder in the chat input', () => {
           createComponent({
             propsData: {
-              withSlashCommands: true,
+              slashCommands,
             },
           });
           expect(findChatInput().attributes('placeholder')).toBe('Type "/" for slash commands');
         });
 
+        it('prevents passing down invalid slash commands', () => {
+          expect(() => {
+            wrapper = shallowMount(GlDuoChat, {
+              propsData: {
+                slashCommands: [...slashCommands, ...invalidSlashCommands],
+              },
+            });
+          }).toHaveLength(0);
+        });
+
         describe('when the prompt includes the "/" character or no characters', () => {
           it.each(['', '//', '\\', 'foo', '/foo'])(
             'does not render the slash commands if prompt is "$prompt"',
             async (prompt) => {
               createComponent({
                 propsData: {
-                  withSlashCommands: true,
+                  slashCommands,
                 },
                 data: {
                   prompt,
@@ -521,7 +552,7 @@ describe('GlDuoChat', () => {
             async (prompt) => {
               createComponent({
                 propsData: {
-                  withSlashCommands: true,
+                  slashCommands,
                 },
                 data: {
                   prompt,
@@ -540,7 +571,7 @@ describe('GlDuoChat', () => {
             async (prompt) => {
               createComponent({
                 propsData: {
-                  withSlashCommands: true,
+                  slashCommands,
                 },
                 data: {
                   prompt,
@@ -575,7 +606,7 @@ describe('GlDuoChat', () => {
           async ({ prompt, expectedCommands } = {}) => {
             createComponent({
               propsData: {
-                withSlashCommands: true,
+                slashCommands,
               },
               data: {
                 prompt,
@@ -595,7 +626,7 @@ describe('GlDuoChat', () => {
         beforeEach(() => {
           createComponent({
             propsData: {
-              withSlashCommands: true,
+              slashCommands,
               messages,
             },
             data: {
@@ -664,7 +695,7 @@ describe('GlDuoChat', () => {
         beforeEach(() => {
           createComponent({
             propsData: {
-              withSlashCommands: true,
+              slashCommands,
               messages,
             },
             data: {

package/src/components/experimental/duo/chat/duo_chat.stories.js

@@ -12,6 +12,26 @@ import {
   renderMarkdown,
 } from './mock_data';
 
+const slashCommands = [
+  {
+    name: '/reset',
+    shouldSubmit: true,
+    description: 'Reset conversation, ignore the previous messages.',
+  },
+  {
+    name: '/tests',
+    description: 'Write tests for the selected snippet.',
+  },
+  {
+    name: '/refactor',
+    description: 'Refactor the selected snippet.',
+  },
+  {
+    name: '/explain',
+    description: 'Explain the selected snippet.',
+  },
+];
+
 const defaultValue = (prop) =>
   typeof GlDuoChat.props[prop].default === 'function'
     ? GlDuoChat.props[prop].default()
@@ -27,7 +47,6 @@ const generateProps = ({
   badgeHelpPageUrl = defaultValue('badgeHelpPageUrl'),
   badgeType = defaultValue('badgeType'),
   toolName = defaultValue('toolName'),
-  withSlashCommands = defaultValue('withSlashCommands'),
 } = {}) => ({
   title,
   messages,
@@ -38,7 +57,7 @@ const generateProps = ({
   badgeHelpPageUrl,
   badgeType,
   toolName,
-  withSlashCommands,
+  slashCommands,
 });
 
 export const Default = (args, { argTypes }) => ({
@@ -59,7 +78,6 @@ export const Default = (args, { argTypes }) => ({
       :badge-help-page-url="badgeHelpPageUrl"
       :badge-type="badgeType"
       :tool-name="toolName"
-      :with-slash-commands="withSlashCommands"
     />`,
 });
 Default.args = generateProps({
@@ -154,7 +172,6 @@ export const Interactive = (args, { argTypes }) => ({
       :badge-help-page-url="badgeHelpPageUrl"
       :badge-type="badgeType"
       :tool-name="toolName"
-      :with-slash-commands="withSlashCommands"
       @send-chat-prompt="onSendChatPrompt"
       @chat-hidden="onChatHidden"
     />
@@ -180,8 +197,7 @@ export const Slots = (args, { argTypes }) => ({
         :predefined-prompts="predefinedPrompts"
         :badge-help-page-url="badgeHelpPageUrl"
         :badge-type="badgeType"
-        :tool-name="toolName"
-        :with-slash-commands="withSlashCommands">
+        :tool-name="toolName">
 
         <template #hero>
 <pre class="code-block rounded code highlight gl-border-b gl-rounded-0! gl-mb-0 gl-overflow-y-auto solarized-light" style="max-height: 20rem; overflow-y: auto;">

package/src/components/experimental/duo/chat/duo_chat.vue

@@ -37,33 +37,13 @@ export const i18n = {
   ],
 };
 
-export const slashCommands = [
-  {
-    name: '/reset',
-    shouldSubmit: true,
-    description: 'Reset conversation, ignore the previous messages.',
-  },
-  {
-    name: '/tests',
-    shouldSubmit: false,
-    description: 'Write tests for the selected snippet.',
-  },
-  {
-    name: '/refactor',
-    shouldSubmit: false,
-    description: 'Refactor the selected snippet.',
-  },
-  {
-    name: '/explain',
-    shouldSubmit: false,
-    description: 'Explain the selected snippet.',
-  },
-];
-
 const isMessage = (item) => Boolean(item) && item?.role;
+const isSlashCommand = (command) => Boolean(command) && command?.name && command.description;
 
 // eslint-disable-next-line unicorn/no-array-callback-reference
 const itemsValidator = (items) => items.every(isMessage);
+// eslint-disable-next-line unicorn/no-array-callback-reference
+const slashCommandsValidator = (commands) => commands.every(isSlashCommand);
 
 export default {
   name: 'GlDuoChat',
@@ -161,12 +141,13 @@ export default {
       default: i18n.CHAT_DEFAULT_TITLE,
     },
     /**
-     * Whether the slash commands should be available to user when typing the prompt.
+     * Array of slash commands to display in the chat.
      */
-    withSlashCommands: {
-      type: Boolean,
+    slashCommands: {
+      type: Array,
       required: false,
-      default: false,
+      default: () => [],
+      validator: slashCommandsValidator,
     },
   },
   data() {
@@ -178,6 +159,9 @@ export default {
     };
   },
   computed: {
+    withSlashCommands() {
+      return this.slashCommands.length > 0;
+    },
     hasMessages() {
       return this.messages?.length > 0;
     },
@@ -206,13 +190,15 @@ export default {
     },
     filteredSlashCommands() {
       const caseInsensitivePrompt = this.prompt.toLowerCase();
-      return slashCommands.filter((c) => c.name.toLowerCase().startsWith(caseInsensitivePrompt));
+      return this.slashCommands.filter((c) =>
+        c.name.toLowerCase().startsWith(caseInsensitivePrompt)
+      );
     },
     shouldShowSlashCommands() {
       if (!this.withSlashCommands) return false;
       const caseInsensitivePrompt = this.prompt.toLowerCase();
       const startsWithSlash = caseInsensitivePrompt.startsWith('/');
-      const startsWithSlashCommand = slashCommands.some((c) =>
+      const startsWithSlashCommand = this.slashCommands.some((c) =>
         caseInsensitivePrompt.startsWith(c.name)
       );
       return startsWithSlash && this.filteredSlashCommands.length && !startsWithSlashCommand;

package/src/components/regions/empty_state/empty_state.stories.js

@@ -1,4 +1,4 @@
-import securityDashboardEmptyStateSvg from '@gitlab/svgs/dist/illustrations/security-dashboard-empty-state.svg';
+import productivityAnalyticsEmptyStateSvg from '@gitlab/svgs/dist/illustrations/productivity-analytics-empty-state.svg';
 import issuesSvg from '@gitlab/svgs/dist/illustrations/rocket-launch-md.svg';
 import GlButton from '../../base/button/button.vue';
 import GlEmptyState from './empty_state.vue';
@@ -28,7 +28,7 @@ const Template = (args) => ({
 
 const generateProps = ({
   title = 'This state is empty',
-  svgPath = securityDashboardEmptyStateSvg,
+  svgPath = productivityAnalyticsEmptyStateSvg,
   svgHeight = 144,
   description = 'The title and message should be clear, concise, and explain why the user is seeing this screen.',
   primaryButtonText = 'Something actionable',

package/tailwind.defaults.js

@@ -1,5 +1,68 @@
+const baseColorTokens = require('./src/tokens/color.tokens.json');
+const themeColorTokens = require('./src/tokens/color.theme.tokens.json');
+
+const baseColors = ['blue', 'gray', 'green', 'orange', 'purple', 'red'].reduce((acc, color) => {
+  acc[color] = {};
+  Object.entries(baseColorTokens[color]).forEach(([shade, { $value }]) => {
+    acc[color][shade] = $value;
+  });
+  return acc;
+}, {});
+
+const themeColors = Object.entries(themeColorTokens.theme).reduce((acc, [color, shades]) => {
+  const colorKey = `theme-${color}`;
+  acc[colorKey] = {};
+  Object.entries(shades).forEach(([shade, { $value }]) => {
+    acc[colorKey][shade] = $value;
+  });
+  return acc;
+}, {});
+
+const gridSize = 0.5; // rem
+const spacing = Object.fromEntries(
+  Object.entries({
+    0: 0,
+    1: 0.25,
+    2: 0.5,
+    3: 1,
+    4: 1.5,
+    5: 2,
+    6: 3,
+    7: 4,
+    8: 5,
+    9: 6,
+    10: 7,
+    11: 8,
+    '11-5': 9,
+    12: 10,
+    13: 12,
+    15: 15,
+    20: 20,
+    26: 26,
+    28: 28,
+    30: 30,
+    31: 31,
+    34: 34,
+    48: 48,
+    62: 62,
+    75: 75,
+    80: 80,
+    88: 88,
+  }).map(([scale, factor]) => {
+    return [scale, `${factor * gridSize}rem`];
+  })
+);
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   prefix: 'gl-',
-  corePlugins: [],
+  theme: {
+    colors: {
+      white: baseColorTokens.white.$value,
+      black: baseColorTokens.black.$value,
+      ...baseColors,
+      ...themeColors,
+    },
+    spacing,
+  },
 };