diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index a45786f5..3ce1ecf1 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -41,7 +41,7 @@ jobs: run: yarn install - name: Check formatting of project files (staged) if: ${{ github.event_name == 'pull_request' }} - run: yarn format:staged + run: yarn format:diff - name: Check formatting of project files (non-staged) if: ${{ github.event_name != 'pull_request' }} run: yarn format diff --git a/.github/workflows/publish-canary-cdn.yml b/.github/workflows/publish-canary-cdn.yml index b68b464d..b18cf0e9 100644 --- a/.github/workflows/publish-canary-cdn.yml +++ b/.github/workflows/publish-canary-cdn.yml @@ -9,9 +9,12 @@ concurrency: cancel-in-progress: true jobs: - build: + web-components: if: github.repository == 'carbon-design-system/carbon-labs' runs-on: ubuntu-latest + defaults: + run: + working-directory: 'packages/web-components' steps: - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 with: @@ -33,7 +36,7 @@ jobs: - name: Create one folder with dist contents from each package run: | mkdir dist - cp -r packages/*/dist/. dist/ + cp -r src/components/**/dist/. dist/ - uses: jakejarvis/s3-sync-action@master with: args: --acl public-read --follow-symlinks @@ -44,4 +47,4 @@ jobs: AWS_REGION: ${{ secrets.COMMON_COS_REGION }} AWS_S3_ENDPOINT: https://${{ secrets.COMMON_COS_ENDPOINT }} SOURCE_DIR: 'dist' - DEST_DIR: 'common/carbon/labs' + DEST_DIR: 'common/carbon/labs/web-components' diff --git a/.github/workflows/publish-cdn.yml b/.github/workflows/publish-cdn.yml index c9c123eb..56e32ea0 100644 --- a/.github/workflows/publish-cdn.yml +++ b/.github/workflows/publish-cdn.yml @@ -11,10 +11,13 @@ concurrency: cancel-in-progress: true jobs: - publish-cdn: + web-components: if: | github.repository == 'carbon-design-system/carbon-labs' runs-on: ubuntu-latest + defaults: + run: + working-directory: 'packages/web-components' steps: - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 with: @@ -33,7 +36,7 @@ jobs: - name: Create one folder with dist contents from each package run: | mkdir dist - cp -r packages/*/dist/. dist/ + cp -r src/components/**/dist/. dist/ - uses: jakejarvis/s3-sync-action@master with: args: --acl public-read --follow-symlinks @@ -44,4 +47,4 @@ jobs: AWS_REGION: ${{ secrets.COMMON_COS_REGION }} AWS_S3_ENDPOINT: https://${{ secrets.COMMON_COS_ENDPOINT }} SOURCE_DIR: 'dist' - DEST_DIR: 'common/carbon/labs' + DEST_DIR: 'common/carbon/labs/web-components' diff --git a/.github/workflows/storybook-publish-production.yml b/.github/workflows/storybook-publish-production.yml index 9b1f951d..f50a5be6 100644 --- a/.github/workflows/storybook-publish-production.yml +++ b/.github/workflows/storybook-publish-production.yml @@ -11,9 +11,12 @@ on: types: [deploy-latest-storybook] jobs: - build: + web-components: if: github.repository == 'carbon-design-system/carbon-labs' runs-on: ubuntu-latest + defaults: + run: + working-directory: 'packages/web-components' steps: - uses: actions/checkout@v4 - name: Use Node.js 18.x @@ -26,7 +29,7 @@ jobs: run: yarn install - name: Build storybook - run: yarn build-storybook + run: npx storybook build - uses: jakejarvis/s3-sync-action@master with: diff --git a/.github/workflows/storybook-publish-staging.yml b/.github/workflows/storybook-publish-staging.yml index 7ff58908..958953f7 100644 --- a/.github/workflows/storybook-publish-staging.yml +++ b/.github/workflows/storybook-publish-staging.yml @@ -11,9 +11,12 @@ on: types: [deploy-staging-storybook] jobs: - build: + web-components: if: github.repository == 'carbon-design-system/carbon-labs' runs-on: ubuntu-latest + defaults: + run: + working-directory: 'packages/web-components' steps: - uses: actions/checkout@v4 - name: Use Node.js 18.x @@ -26,7 +29,7 @@ jobs: run: yarn install - name: Build storybook - run: yarn build-storybook + run: npx storybook build - uses: jakejarvis/s3-sync-action@master with: diff --git a/packages/feedback/examples/feedback/.gitignore b/examples/web-components/feedback/.gitignore similarity index 100% rename from packages/feedback/examples/feedback/.gitignore rename to examples/web-components/feedback/.gitignore diff --git a/packages/feedback/examples/feedback/cdn.html b/examples/web-components/feedback/cdn.html similarity index 89% rename from packages/feedback/examples/feedback/cdn.html rename to examples/web-components/feedback/cdn.html index 9fab3a69..ee0c5ff8 100644 --- a/packages/feedback/examples/feedback/cdn.html +++ b/examples/web-components/feedback/cdn.html @@ -13,16 +13,13 @@ + href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" /> + href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" /> + href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> + src="https://1.www.s81c.com/common/carbon/labs/feedback/v0.3.0/index.min.js">
**Attribute** | **Type** | **Default** | **Description** |
`content` | string | empty | stringified JSON object defining a Vega-lite V5 chart specification. Specifications must contain $schema, data and encoding |
`debug` | boolean | false | shows specification editor button and displays all errors in component when in error mode, otherwise show: Chart failed to render, see console for more details |
`container-height` | string | "300px" | valid CSS string to define chart height, applied to chart container while specification fills the parent container height |
`container-width` | string | "100%" | same as container-height, a CSS string to define the width, applied to chart container |
`render-method` | string | "canvas" | render using "svg" (easier to inspect in the DOM) or "canvas" (better performance) |
`theme` | string | "g100" | this value is either "g100" or "white" and displays the chart using Carbon Chart theme colors. |
`carbonify` | boolean | true | extensively redefine the "config" field of the specification to apply Carbon Chart styling to chart defined in the specification |
`enable-legend-filtering` | boolean | false | enable filtering of data points when clicking legend |
`enable-tooltip` | boolean | false | enable tooltip in the chart component |
`enable-zooming` | boolean | false | enable user-zooming in the chart component |
`enable-brushing` | boolean | false | enable user-brush selection to fetch groups of elements |
`disable-options` | boolean | false | disable all chart option buttons, supercedes all other individual button options below |
`disable-fullscreen` | boolean | false | hide fullscreen button |
`disable-editor` | boolean | false | hide vega editor button |
`disable-export` | boolean | false | hide PNG export button |
`disable-code-inspector` | boolean | false | hide spec viewer button |
`loading` | boolean | true | show loading animation. When content is provided chart will auto-render and this will false. If streaming: raw data is incrementally displayed until complete and rendered |
**Event listener name** | -**Trigger condition** | -
`on-chart-specification-ready` | -Chart is fully parsed/rendered post-carbonification | -
`on-chart-error` | -Rendering encountered an error | -
`on-chart-single-selection` | -Selection event found one object selected | -
`on-chart-multi-selection` | -Selection event found a range of quantitative/qualitative values | -
**Attribute name** | -**Effect** | -**Use case** | -
editable | -Make every line editable by users | -When a user-input is needed to fix an object | -
streaming | -Rerenders component when content is streamed in | -When streaming is enabled | -
enable-coloring | -When editable is invoked, remove edit button | -Disable button to validate edit | -
enable-language-display | -Shows estimated language at top of component | -When any type of code can be returned | -
disable-auto-compacting | -Stops line-ticks from being removed when space isn't sufficient | -Hide ticks when compacted | -
disable-edit-button | -When editable is invoked, remove edit button | -Disable button to validate edit | -
disable-line-ticks | -Remove line counts on the left side-bar of code | -When showing code such as console commands | -
disable-copy-button | -Remove copy button from top-right corner | -When displaying code not meant to be replicated | -
**Attribute name** | -**Type** | -**Effect** | -**Use case** | -
capitalize | -boolean | -Auto capitalize all text provided | -Make LLM responses more formal (should be avoided on user messages) | -
align-right | -boolean | -Makes text element stick to right side | -Used for user messages | -
enable-annotations | -boolean | -Auto-parses markdown link text | -When streaming or receiving raw LLM text | -
enable-html-rendering | -boolean | -Parses and renders HTML strings | -When the need arises to add simple styling | -
enable-text-highlighting | -boolean | -Removes the chevron/underline and highlights annotations with a default color | -when used Text outside of a chat context | -
text-highlight-color | -string | -Provide your own valid CSS Hex color for highlights | -When the default color isn't appropriate | -
**Attribute name** | -**Type** | -**Effect** | +**Attribute name** | +**Type** | +**Effect** |
`type` | -String | -can be `url`, `file`, `video` or `audio`, dictates how to render the card | +`type` | +String | ++ can be `url`, `file`, `video` or `audio`, dictates how to render the + card + |
`content` | -String | -valid url to be rendered | +`content` | +String | +valid url to be rendered |
`card-elements` | -JSON | -JSON object discribed below, sets all values in the Card component (title, preview image url, description, redirect URL, URL Title) | +`card-elements` | +JSON | ++ JSON object discribed below, sets all values in the Card component + (title, preview image url, description, redirect URL, URL Title){' '} + |
`api-url` | -String | -When only content is specified, query a service to fetch preview data from og tags to preview site | +`api-url` | +String | ++ When only content is specified, query a service to fetch preview data + from og tags to preview site + |
`file-type` | -String | -If type is `file`, choose what icon to display if not present in URL | +`file-type` | +String | ++ If type is `file`, choose what icon to display if not present in URL + |
**Attribute** | +**Type** | +**Default** | +**Description** | +
`content` | +string | +empty | ++ stringified JSON object defining a Vega-lite V5 chart specification. + Specifications must contain $schema, data and encoding + | +
`debug` | +boolean | +false | ++ shows specification editor button and displays all errors in component + when in error mode, otherwise show: Chart failed to render, see console + for more details + | +
`container-height` | +string | +"300px" | ++ valid CSS string to define chart height, applied to chart container + while specification fills the parent container height + | +
`container-width` | +string | +"100%" | ++ same as container-height, a CSS string to define the width, applied to + chart container + | +
`render-method` | +string | +"canvas" | ++ render using "svg" (easier to inspect in the DOM) or + "canvas" (better performance) + | +
`theme` | +string | +"g100" | ++ this value is either "g100" or "white" and displays + the chart using Carbon Chart theme colors. + | +
`carbonify` | +boolean | +true | ++ extensively redefine the "config" field of the specification + to apply Carbon Chart styling to chart defined in the specification + | +
`enable-legend-filtering` | +boolean | +false | +enable filtering of data points when clicking legend | +
`enable-tooltip` | +boolean | +false | +enable tooltip in the chart component | +
`enable-zooming` | +boolean | +false | +enable user-zooming in the chart component | +
`enable-brushing` | +boolean | +false | +enable user-brush selection to fetch groups of elements | +
`disable-options` | +boolean | +false | ++ disable all chart option buttons, supercedes all other individual button + options below + | +
`disable-fullscreen` | +boolean | +false | +hide fullscreen button | +
`disable-editor` | +boolean | +false | +hide vega editor button | +
`disable-export` | +boolean | +false | +hide PNG export button | +
`disable-code-inspector` | +boolean | +false | +hide spec viewer button | +
`loading` | +boolean | +true | ++ show loading animation. When content is provided chart will auto-render + and this will false. If streaming: raw data is incrementally displayed + until complete and rendered + | +
**Event listener name** | +**Trigger condition** | +
`on-chart-specification-ready` | +Chart is fully parsed/rendered post-carbonification | +
`on-chart-error` | +Rendering encountered an error | +
`on-chart-single-selection` | +Selection event found one object selected | +
`on-chart-multi-selection` | +Selection event found a range of quantitative/qualitative values | +
**Type** | **Attribute name** | **Usage** |
Boolean | `loading` | User-assigned boolean denoting when an api query has begun and returned to 'false' when it is received or an error occured, used to display an empty loading message |
Boolean | `closed` | Closed state to denote if chart is hidden |
Object | `conversation` | conversation object to display messages straight from the 'message' attribute, overrides any api_url system |
Boolean | `enable-launcher` | Show launcher to open chat when closing chat |
Boolean | `start-with-launcher` | Close chat by default and show launcher |
Boolean | `enable-feedback-form` | Show complex feedback popup when clicking a reaction button |
Boolean | `enable-text-feedback-form` | Show complex feedback form on individual highlighted text items |
Object | `feedbackDefinitions` | Define what should be shown in feedback form, [see here](#feedback-form) |
String | `ai-slug-content` | HTML content to render in header AI slug |
Object | `aiSlugObject` | JSON object to specify AI slug content, formatted [here](#feedback-form) |
Boolean | `enable-request-cancelling` | When sending a query, show cancel button instead of send and interrupt incoming response |
Object | `customLabels` | Label list of all buttons/placeholders to localize UI, [see here](#localization) |
Boolean | `stream-responses` | User-assigned boolean denoting if the conversation object is user-updated or automatically updated using the api system |
Number | `stream-delay` | Number value in milliseconds to throttle streaming response |
String | `user-name` | String denoting the user name, used for internal logic in the server to differentiate bot responses and user reseponses. default: 'user' but should be the user's real name based on IBM ID or any other data available |
String | `agent-name` | String denoting the bot name, default: 'external' but can be changed to 'Watson' or 'client assistant' or any other name |
String | `default-viewing-mode` | String denoting default viewing mode, can be "container" (default), "fullscreen" or "minimized" |
Boolean | `disable-header-buttons` | Disable all buttons except slug |
Boolean | `disable-header-fullscreen` | Remove header fullscreen button option |
Boolean | `disable-header-close` | Remove header closing button option |
Boolean | `disable-header-minimize` | Remove fullscreen button option |
Boolean | `disable-header-menu` | Disable header hamburger menu |
String | `prompt-notification-message` | String denoting message to append above prompt |
String | `prompt-notification-type` | String denoting type of appended prompt message (error, info, warning) |
String | `input-field-placeholder` | Custom placeholder for input field in footer |
Number | `max-character-count` | Max character counter specified by developer to prevent large queries |
String | `api-url` | String url denoting where the message query will be sent, either BAM or watsonx.ai or any other service |
String | `model` | String denoting which model to use in your backend |
Boolean | `auto-update` | User-assigned boolean denoting if the conversation object is user-updated or automatically updated using the api system |
String | `user-prompt` | String denoting the unique behavior of the model designated by the user, appended to the private system prompt |
Number | `temperature` | Float varying from 0.0 to 1.0, denotes how 'creative' the model's response will be. 0.0 (default) is the most safe and predictable while 1.0 is hightly creative but unpredictable (not advised for operations returning code or JSON objects) |
**Type** | +**Attribute name** | +**Usage** | +
Boolean | +`loading` | ++ User-assigned boolean denoting when an api query has begun and returned + to 'false' when it is received or an error occured, used to display an + empty loading message + | +
Boolean | +`closed` | +Closed state to denote if chart is hidden | +
Object | +`conversation` | ++ conversation object to display messages straight from the 'message' + attribute, overrides any api_url system + | +
Boolean | +`enable-launcher` | +Show launcher to open chat when closing chat | +
Boolean | +`start-with-launcher` | +Close chat by default and show launcher | +
Boolean | +`enable-feedback-form` | +Show complex feedback popup when clicking a reaction button | +
Boolean | +`enable-text-feedback-form` | +Show complex feedback form on individual highlighted text items | +
Object | +`feedbackDefinitions` | ++ Define what should be shown in feedback form, [see here](#feedback-form) + | +
String | +`ai-slug-content` | +HTML content to render in header AI slug | +
Object | +`aiSlugObject` | ++ JSON object to specify AI slug content, formatted [here](#feedback-form) + | +
Boolean | +`enable-request-cancelling` | ++ When sending a query, show cancel button instead of send and interrupt + incoming response + | +
Object | +`customLabels` | ++ Label list of all buttons/placeholders to localize UI, [see + here](#localization) + | +
Boolean | +`stream-responses` | ++ User-assigned boolean denoting if the conversation object is + user-updated or automatically updated using the api system + | +
Number | +`stream-delay` | +Number value in milliseconds to throttle streaming response | +
String | +`user-name` | ++ String denoting the user name, used for internal logic in the server to + differentiate bot responses and user reseponses. default: 'user' but + should be the user's real name based on IBM ID or any other data + available + | +
String | +`agent-name` | ++ String denoting the bot name, default: 'external' but can be changed to + 'Watson' or 'client assistant' or any other name + | +
String | +`default-viewing-mode` | ++ String denoting default viewing mode, can be "container" (default), + "fullscreen" or "minimized" + | +
Boolean | +`disable-header-buttons` | +Disable all buttons except slug | +
Boolean | +`disable-header-fullscreen` | +Remove header fullscreen button option | +
Boolean | +`disable-header-close` | +Remove header closing button option | +
Boolean | +`disable-header-minimize` | +Remove fullscreen button option | +
Boolean | +`disable-header-menu` | +Disable header hamburger menu | +
String | +`prompt-notification-message` | +String denoting message to append above prompt | +
String | +`prompt-notification-type` | ++ String denoting type of appended prompt message (error, info, warning) + | +
String | +`input-field-placeholder` | +Custom placeholder for input field in footer | +
Number | +`max-character-count` | ++ Max character counter specified by developer to prevent large queries + | +
String | +`api-url` | ++ String url denoting where the message query will be sent, either BAM or + watsonx.ai or any other service + | +
String | +`model` | +String denoting which model to use in your backend | +
Boolean | +`auto-update` | ++ User-assigned boolean denoting if the conversation object is + user-updated or automatically updated using the api system + | +
String | +`user-prompt` | ++ String denoting the unique behavior of the model designated by the user, + appended to the private system prompt + | +
Number | +`temperature` | ++ Float varying from 0.0 to 1.0, denotes how 'creative' the model's + response will be. 0.0 (default) is the most safe and predictable while + 1.0 is hightly creative but unpredictable (not advised for operations + returning code or JSON objects) + | +
**Event name** | -**Exclusive to chat mode** | -**Triggering logic** | +**Event name** | +**Exclusive to chat mode** | +**Triggering logic** |
on-chat-slot-update | -Carbon slotting in use | -Return child update status | +on-chat-slot-update | +Carbon slotting in use | +Return child update status |
on-user-regeneration-request | -API mode in use | -Return when user requested regeneration on any bot message | +on-user-regeneration-request | +API mode in use | +Return when user requested regeneration on any bot message |
on-chat-close | -All | -Return when user clicked close in the header | +on-chat-close | +All | +Return when user clicked close in the header |
on-user-message-update-request | -API mode in use | -Return when user requested an edit on any user message | +on-user-message-update-request | +API mode in use | +Return when user requested an edit on any user message |
on-submit | -All | -Return when user submits a query in the footer | +on-submit | +All | +Return when user submits a query in the footer |
**Attribute name** | +**Effect** | +**Use case** | +
editable | +Make every line editable by users | +When a user-input is needed to fix an object | +
streaming | +Rerenders component when content is streamed in | +When streaming is enabled | +
enable-coloring | +When editable is invoked, remove edit button | +Disable button to validate edit | +
enable-language-display | +Shows estimated language at top of component | +When any type of code can be returned | +
disable-auto-compacting | +Stops line-ticks from being removed when space isn't sufficient | +Hide ticks when compacted | +
disable-edit-button | +When editable is invoked, remove edit button | +Disable button to validate edit | +
disable-line-ticks | +Remove line counts on the left side-bar of code | +When showing code such as console commands | +
disable-copy-button | +Remove copy button from top-right corner | +When displaying code not meant to be replicated | +
**Attribute name** | +**Type** | +**Effect** | +**Use case** | +
capitalize | +boolean | +Auto capitalize all text provided | ++ Make LLM responses more formal (should be avoided on user messages) + | +
align-right | +boolean | +Makes text element stick to right side | +Used for user messages | +
enable-annotations | +boolean | +Auto-parses markdown link text | +When streaming or receiving raw LLM text | +
enable-html-rendering | +boolean | +Parses and renders HTML strings | +When the need arises to add simple styling | +
enable-text-highlighting | +boolean | ++ Removes the chevron/underline and highlights annotations with a default + color + | +when used Text outside of a chat context | +
text-highlight-color | +string | +Provide your own valid CSS Hex color for highlights | +When the default color isn't appropriate | +
**Attribute name** | +**Type** | +**Effect** | +**Use case** | +
capitalize | +boolean | +Auto capitalize all text provided | ++ Make LLM responses more formal (should be avoided on user messages) + | +
align-right | +boolean | +Makes text element stick to right side | +Used for user messages | +
enable-annotations | +boolean | +Auto-parses markdown link text | +When streaming or receiving raw LLM text | +
enable-html-rendering | +boolean | +Parses and renders HTML strings | +When the need arises to add simple styling | +
enable-text-highlighting | +boolean | ++ Removes the chevron/underline and highlights annotations with a default + color + | +when used Text outside of a chat context | +
text-highlight-color | +string | +Provide your own valid CSS Hex color for highlights | +When the default color isn't appropriate | +