Merge pull request #2028 from GetStream/develop

MartinCupela · web-flow · commit a0c1c2468bc2 · 2023-06-09T16:30:59.000+02:00
v10.8.2
diff --git a/SECURITY.md b/SECURITY.md
@@ -0,0 +1,16 @@
+# Reporting a Vulnerability
+At Stream we are committed to the security of our Software. We appreciate your efforts in disclosing vulnerabilities responsibly and we will make every effort to acknowledge your contributions.
+
+Report security vulnerabilities at the following email address:
+```
+security@getstream.io
+```
+Alternatively it is also possible to open a new issue in the affected repository, tagging it with the `security` tag.
+
+A team member will acknowledge the vulnerability and will follow-up with more detailed information. A representative of the security team will be in touch if more information is needed.
+
+# Information to include in a report
+While we appreciate any information that you are willing to provide, please make sure to include the following:
+* Which repository is affected
+* Which branch, if relevant
+* Be as descriptive as possible, the team will replicate the vulnerability before working on a fix.
diff --git a/docusaurus/docs/React/components/contexts/chat-context.mdx b/docusaurus/docs/React/components/contexts/chat-context.mdx
@@ -109,7 +109,7 @@ Deprecated and to be removed in a future major release. Use the `customStyles` p
 
 ### themeVersion
 
-Stream chat theme version 2 has been introduced with the release of stream-chat-react v10.0.0. This flag is used internally by some UI components of the SDK and the integrators shouldn't need to use it. The value is extracted from a CSS variable `--str-chat__theme-version`. You can set it to values `'1'` or `'2'` in your stylesheets and import the corresponding v2 stylesheet from `stream-chat-react/dist`. Find out more about benefits that the theme version 2 brings to the integrators with [the theming guide](../../guides/theming/css-and-theming.mdx).
+Stream chat theme version 2 has been introduced with the release of stream-chat-react v10.0.0. This flag is used internally by some UI components of the SDK and the integrators shouldn't need to use it. The value is extracted from a CSS variable `--str-chat__theme-version`. You can set it to values `'1'` or `'2'` in your stylesheets and import the corresponding v2 stylesheet from `stream-chat-react/dist`. Find out more about benefits that the theme version 2 brings to the integrators with [the theming guide](../../theming/introduction.mdx).
 
 |   Type         |  Default  |
 | -------------- | --------- |
diff --git a/docusaurus/docs/React/components/contexts/component-context.mdx b/docusaurus/docs/React/components/contexts/component-context.mdx
@@ -295,7 +295,7 @@ Custom UI component to display the header of a `Thread`.
 
 ### ThreadInput
 
-Custom UI component to replace the `MessageInput` of a `Thread`. For  the applications using [theme version](../../guides/theming/css-and-theming.mdx) 1, the default is `MessageInputSmall`. Applications using theme version 2 will use `MessageInputFlat` by default.
+Custom UI component to replace the `MessageInput` of a `Thread`. For  the applications using [theme version 1](../../guides/theming/css-and-theming.mdx), the default is `MessageInputSmall`. Applications using [theme version 2](../../theming/introduction.mdx) will use `MessageInputFlat` by default.
 
 | Type | Default |
 | --------- | ------------------------------------------------------------------------------------------------------------------ |
diff --git a/docusaurus/docs/React/components/core-components/channel.mdx b/docusaurus/docs/React/components/core-components/channel.mdx
@@ -546,7 +546,7 @@ Custom UI component to display the header of a `Thread`.
 
 ### ThreadInput
 
-Custom UI component to replace the `MessageInput` of a `Thread`. For  the applications using [theme version](../../guides/theming/css-and-theming.mdx) 1, the default is `MessageInputSmall`. Applications using theme version 2 will use `MessageInputFlat` by default.
+Custom UI component to replace the `MessageInput` of a `Thread`. For  the applications using [theme version 1](../../guides/theming/css-and-theming.mdx), the default is `MessageInputSmall`. Applications using [theme version 2](../../theming/introduction.mdx) will use `MessageInputFlat` by default.
 
 | Type      | Default                                                                                                                                                                                               |
 |-----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
diff --git a/docusaurus/docs/React/components/core-components/thread.mdx b/docusaurus/docs/React/components/core-components/thread.mdx
@@ -180,7 +180,7 @@ If true, displays the thread at 100% width of its parent container, useful for m
 
 ### Input
 
-Custom thread input UI component used to override the optional `Input` value stored in `ComponentContext` or the default. For  the applications using [theme version](../../guides/theming/css-and-theming.mdx) 1, the default is `MessageInputSmall`. Applications using theme version 2 will use `MessageInputFlat` by default.
+Custom thread input UI component used to override the optional `Input` value stored in `ComponentContext` or the default. For  the applications using [theme version 1](../../guides/theming/css-and-theming.mdx), the default is `MessageInputSmall`. Applications using [theme version 2](../../theming/introduction.mdx) will use `MessageInputFlat` by default.
 
 | Type      | Default                                                                                                                                                                                               |
 |-----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
diff --git a/docusaurus/docs/React/components/message-components/attachment.mdx b/docusaurus/docs/React/components/message-components/attachment.mdx
@@ -111,7 +111,7 @@ The following section details how the width and height of images and videos uplo
 
 #### Maximum size
 
-You can control the maximum width and height of images and videos with the [`--str-chat__attachment-max-width`](../../guides/theming/css-and-theming.mdx) CSS variable (available only in [theme-v2](../../guides/theming/css-and-theming.mdx)). The value of this variable must be a value that can be computed to a valid pixel value using the [`getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) method (for example: `300px`, `10rem`, `calc(300px - var(--margin))`, but not `100%`). If you provide an invalid value, the image and video sizing can break, which can lead to scrolling issues inside the message list (for example the message list isn't scrolled to the bottom when you open a channel).
+You can control the maximum width and height of images and videos with the [`--str-chat__attachment-max-width`](../../theming/component-variables.mdx) CSS variable (available only in [theme-v2](../../theming/introduction.mdx)). The value of this variable must be a value that can be computed to a valid pixel value using the [`getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) method (for example: `300px`, `10rem`, `calc(300px - var(--margin))`, but not `100%`). If you provide an invalid value, the image and video sizing can break, which can lead to scrolling issues inside the message list (for example the message list isn't scrolled to the bottom when you open a channel).
 
 If you set an invalid value to the variable, you'll see a warning on the browser's console:
 
@@ -125,7 +125,7 @@ For example if an image has `max-width` and `max-height` set to `300px` and the
 
 #### Aspect ratio
 
-The following description is applicable for [theme-v2](../../guides/theming/css-and-theming.mdx).
+The following description is applicable for [theme-v2](../../theming/introduction.mdx).
 
 The SDK will try to display images and videos with their original aspect ratio, however this isn't always guaranteed (in those cases a cropped image will be displayed). Three notable exceptions are:
 
diff --git a/docusaurus/docs/React/components/utility-components/channel-search.mdx b/docusaurus/docs/React/components/utility-components/channel-search.mdx
@@ -49,7 +49,7 @@ The `ChannelSearch` component renders 2 components:
 1. the search input
 2. the search results list
 
-If opted in the use of [theme version 2](../../guides/theming/css-and-theming.mdx), the `ChannelSearch` will render a more complex search input component called [`SearchBar`](./#searchbar-component). Otherwise, the [`SearchInput`](./#searchinput-component) is rendered.
+If opted in the use of [theme version 2](../../theming/introduction.mdx), the `ChannelSearch` will render a more complex search input component called [`SearchBar`](./#searchbar-component). Otherwise, the [`SearchInput`](./#searchinput-component) is rendered.
 
 ### Search input vs.SearchResults state
 
@@ -158,7 +158,7 @@ The `ChannelSearch` offers possibility to keep the search results open meanwhile
 
 ### AppMenu
 
-Application menu / drop-down to be displayed  when clicked on [`MenuIcon`](./#menuicon). Prop is consumed only by the [`SearchBar` component](./#searchbar). The `SearchBar` component is only available with the use of the [theming v2](../../guides/theming/css-and-theming.mdx).  No default component is provided by the SDK. The library does not provide any CSS for `AppMenu`. Consult the customization tutorial on how to [add AppMenu to your application](../../guides/customization/channel-search.mdx/#adding-menu). The component is passed a prop `close`, which is a function that can be called to hide the app menu (e.g. on menu item selection).
+Application menu / drop-down to be displayed  when clicked on [`MenuIcon`](./#menuicon). Prop is consumed only by the [`SearchBar` component](./#searchbar). The `SearchBar` component is only available with the use of the [theming v2](../../theming/introduction.mdx).  No default component is provided by the SDK. The library does not provide any CSS for `AppMenu`. Consult the customization tutorial on how to [add AppMenu to your application](../../guides/customization/channel-search.mdx/#adding-menu). The component is passed a prop `close`, which is a function that can be called to hide the app menu (e.g. on menu item selection).
 
 | Type                  | Default     |
 |-----------------------|-------------|
diff --git a/docusaurus/docs/React/guides/theming/css-and-theming.mdx b/docusaurus/docs/React/guides/theming/css-and-theming.mdx
@@ -10,7 +10,7 @@ import Theming2 from '../../assets/Theming2.png';
 import Theming3 from '../../assets/Theming3.png';
 
 :::caution
-This page contains information about the old theming system (v1) of the chat UI, this is now deprecated and will be removed in a future release. Please refer to our [new theming guide](./css-and-theming.mdx).
+This page contains information about the old theming system (v1) of the chat UI, this is now deprecated and will be removed in a future release. Please refer to our [new theming guide](../../theming/introduction.mdx).
 :::
 
 While the components in the React Chat library come with basic styling, the look and feel can easily be adjusted to fit
diff --git a/docusaurus/docs/React/guides/theming/translations.mdx b/docusaurus/docs/React/guides/theming/translations.mdx
@@ -149,6 +149,8 @@ The `setLanguage` method on the class instance of `Streami18n` is asynchronous,
 awaited before the language translations can be updated.
 :::
 
+We can initialize the instance dynamically:
+
 ```tsx
 import zhTranslation from 'path/to/zh.json';
 
@@ -177,6 +179,111 @@ const App = () => {
 };
 ```
 
+Or we can have a pre-configured `Streami18n` instance:
+
+```tsx
+import zhTranslation from 'path/to/zh.json';
+
+const i18nInstance = new Streami18n({
+  language: 'zh',
+  translationsForLanguage: zhTranslations,
+  dayjsLocaleConfigForLanguage: {
+    // see the next section about Datetime translations
+    months: [...],
+    monthsShort: [...],
+    calendar: {
+      sameDay: ...'
+    }
+  }
+});
+
+const App = () => {
+  return (
+    <Chat client={client} i18nInstance={i18nInstance}>
+      ...
+    </Chat>
+  );
+};
+```
+
+### Datetime translations
+
+The SDK components use [`Dayjs`](https://day.js.org/en/) internally by default to format dates and times. It has [locale support](https://day.js.org/docs/en/i18n/i18n) being a lightweight alternative to `Momentjs` with the same modern API. `Dayjs` provides [locale config for plenty of languages](https://github.com/iamkun/dayjs/tree/dev/src/locale).
+
+You can either provide the `Dayjs` locale config while registering language with `Streami18n` (either via constructor or `registerTranslation()`) or you can provide your own `Dayjs` or `Momentjs` instance to `Streami18n` constructor, which will be then used internally (using the language locale) in components.
+
+:::note
+The `dayjsLocaleConfigForLanguage` object is a union of configuration objects for [`Dayjs` calendar plugin](https://day.js.org/docs/en/plugin/calendar) and `Dayjs` locale configuration(examples are available in [`Dayjs` default locale configurations](https://github.com/iamkun/dayjs/tree/dev/src/locale))
+:::
+
+1. Via language registration
+
+```js
+const i18n = new Streami18n({
+ language: 'nl',
+ dayjsLocaleConfigForLanguage: {
+   months: [...],
+   monthsShort: [...],
+   calendar: {
+     sameDay: ...'
+   }
+ }
+});
+```
+
+Similarly, you can add locale config for `Momentjs` while registering translation via `registerTranslation` function.
+
+```js
+const i18n = new Streami18n();
+
+i18n.registerTranslation(
+ 'mr',
+ {
+   'Nothing yet...': 'काहीही नाही  ...',
+   '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} आणि {{ secondUser }} टीपी करत आहेत ',
+ },
+ {
+   months: [...],
+   monthsShort: [...],
+   calendar: {
+     sameDay: ...'
+   }
+ }
+);
+```
+2. Provide your own `Momentjs` object
+
+```js
+import 'moment/locale/nl';
+import 'moment/locale/it';
+// or if you want to include all locales
+import 'moment/min/locales';
+
+import Moment from moment
+
+const i18n = new Streami18n({
+ language: 'nl',
+ DateTimeParser: Moment
+})
+```
+
+3. Provide your own Dayjs object
+
+```js
+import Dayjs from 'dayjs'
+
+import 'dayjs/locale/nl';
+import 'dayjs/locale/it';
+// or if you want to include all locales
+import 'dayjs/min/locales';
+
+const i18n = new Streami18n({
+ language: 'nl',
+ DateTimeParser: Dayjs
+})
+```
+If you would like to stick with english language for dates and times in Stream components, you can set `disableDateTimeTranslations` to true.
+
 ### Translating Messages
 
 Stream Chat provide the ability to run users' messages through automatic translation.
@@ -199,15 +306,17 @@ The `Streami18n` class wraps [`i18next`](https://www.npmjs.com/package/i18next)
 
 ### Class Constructor Options
 
-| Option                       | Description                                                                          | Type     | Default    |
-| ---------------------------- | ------------------------------------------------------------------------------------ | -------- | ---------- |
-| language                     | connected user's language                                                            | string   | 'en'       |
-| translationsForLanguage      | overrides existing component text                                                    | object   | {}         |
-| disableDateTimeTranslations  | disables translation of date times                                                   | boolean  | false      |
-| debug                        | enables i18n debug mode                                                              | boolean  | false      |
-| logger                       | logs warnings/errors                                                                 | function | () => {}   |
-| dayjsLocaleConfigForLanguage | internal Day.js [config object](https://github.com/iamkun/dayjs/tree/dev/src/locale) | object   | 'enConfig' |
-| DateTimeParser               | custom date time parser                                                              | function | Day.js     |
+| Option                       | Description                                                                                                                                                          | Type     | Default    |
+|------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------|------------|
+| language                     | connected user's language                                                                                                                                            | string   | 'en'       |
+| translationsForLanguage      | overrides existing component text                                                                                                                                    | object   | {}         |
+| disableDateTimeTranslations  | disables translation of date times                                                                                                                                   | boolean  | false      |
+| debug                        | enables i18n debug mode                                                                                                                                              | boolean  | false      |
+| logger                       | logs warnings/errors                                                                                                                                                 | function | () => {}   |
+| dayjsLocaleConfigForLanguage | internal Day.js [config object](https://github.com/iamkun/dayjs/tree/dev/src/locale) and [calendar locale config object](https://day.js.org/docs/en/plugin/calendar) | object   | 'enConfig' |
+| DateTimeParser               | custom date time parser                                                                                                                                              | function | Day.js     |
+
+####
 
 ### Class Instance Methods
 
diff --git a/docusaurus/docs/React/release-guides/upgrade-to-v10.mdx b/docusaurus/docs/React/release-guides/upgrade-to-v10.mdx
@@ -18,7 +18,7 @@ import EmptyChannelList from '../assets/theme-v2-empty-channel-list.png';
 import EmptyMessageList from '../assets/theme-v2-empty-message-list.png';
 import ScrollToBottomButton from '../assets/theme-v2-scroll-to-bottom-button-theme-v1.png';
 
-The release v10 brings some new features as well as some breaking changes to the users. The main focus was to support [the next version of theming V2](../guides/theming/css-and-theming.mdx) brought with `@stream-io/stream-chat-css@3.0.0`. It lead to addition resp. removal of some HTML elements in few components. This may invalidate some of your CSS selectors. Also, some components marked as deprecated for a longer period of time have been removed.
+The release v10 brings some new features as well as some breaking changes to the users. The main focus was to support [the next version of theming V2](../theming/introduction.mdx) brought with `@stream-io/stream-chat-css@3.0.0`. It lead to addition resp. removal of some HTML elements in few components. This may invalidate some of your CSS selectors. Also, some components marked as deprecated for a longer period of time have been removed.
 
 We have tried to introduce as few breaking changes as possible. We have not removed classes but rather added new ones that are exclusively used with the theming V2 stylesheet. Also, where possible, V1 and V2 components have been introduced for backwards compatibility (the V1 components are used unless opted into theme version 2).
 
diff --git a/examples/vite/yarn.lock b/examples/vite/yarn.lock
diff --git a/examples/website-demos/virtual-event/yarn.lock b/examples/website-demos/virtual-event/yarn.lock
diff --git a/src/i18n/Streami18n.ts b/src/i18n/Streami18n.ts
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
 import EmptyMessageList from '../assets/theme-v2-empty-message-list.png';
 import ScrollToBottomButton from '../assets/theme-v2-scroll-to-bottom-button-theme-v1.png';
 -The release v10 brings some new features as well as some breaking changes to the users. The main focus was to support [the next version of theming V2](../guides/theming/css-and-theming.mdx) brought with `@stream-io/[email protected]`. It lead to addition resp. removal of some HTML elements in few components. This may invalidate some of your CSS selectors. Also, some components marked as deprecated for a longer period of time have been removed.
 +The release v10 brings some new features as well as some breaking changes to the users. The main focus was to support [the next version of theming V2](../theming/introduction.mdx) brought with `@stream-io/[email protected]`. It lead to addition resp. removal of some HTML elements in few components. This may invalidate some of your CSS selectors. Also, some components marked as deprecated for a longer period of time have been removed.
 We have tried to introduce as few breaking changes as possible. We have not removed classes but rather added new ones that are exclusively used with the theming V2 stylesheet. Also, where possible, V1 and V2 components have been introduced for backwards compatibility (the V1 components are used unless opted into theme version 2).