@100mslive/roomkit-react 0.1.20-alpha.0 → 0.2.0

package/README.md

@@ -6,14 +6,39 @@
 
 ```
 // npm
-npm install @100mslive/roomkit-react --save
+npm install @100mslive/roomkit-react@latest --save
 
 // yarn
-yarn add @100mslive/roomkit-react
+yarn add @100mslive/roomkit-react@latest
 ```
 
 ## Usage
 
+#### Using room code
+
+```jsx
+import { HMSPrebuilt } from '@100mslive/roomkit-react'
+
+export default App() {
+    return (
+        <HMSPrebuilt roomCode={<room-code>} />
+    );
+}
 ```
+
+#### Using authToken
+
+```jsx
 import { HMSPrebuilt } from '@100mslive/roomkit-react'
+
+export default App() {
+    return (
+        <HMSPrebuilt authToken={<auth-token>} />
+    );
+}
 ```
+
+For additional props, refer the [docs](https://www.100ms.live/docs/javascript/v2/quickstart/prebuilt-quickstart#props-for-hmsprebuilt)
+
+
+Prebuilt customisations are available on [100ms dashboard](https://dashboard.100ms.live)

package/dist/{HLSView-BWR4T6PI.js → HLSView-ULB4DC6B.js}

@@ -23,7 +23,7 @@ import {
   styled,
   usePollViewToggle,
   useTheme
-} from "./chunk-SYBH2G3R.js";
+} from "./chunk-GVA4I77Z.js";
 
 // src/Prebuilt/layouts/HLSView.jsx
 init_define_process_env();
@@ -969,4 +969,4 @@ var HLSView_default = HLSView;
 export {
   HLSView_default as default
 };
-//# sourceMappingURL=HLSView-BWR4T6PI.js.map
+//# sourceMappingURL=HLSView-ULB4DC6B.js.map

package/dist/Input/Input.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CSS } from '@stitches/react';
 export declare const Input: import("@stitches/react/types/styled-component").StyledComponent<"input", {
-    alert_error_default?: boolean | "true" | undefined;
+    error?: boolean | "true" | undefined;
 }, {
     allowMotion: string;
     sm: string;
@@ -1331,8 +1331,8 @@ export declare const PasswordInput: {
     }>, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Input: React.FC<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
         ref?: ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
-    }, "alert_error_default" | "css"> & import("@stitches/react/types/styled-component").TransformProps<{
-        alert_error_default?: boolean | "true" | undefined;
+    }, "css" | "error"> & import("@stitches/react/types/styled-component").TransformProps<{
+        error?: boolean | "true" | undefined;
     }, {
         allowMotion: string;
         sm: string;

package/dist/Prebuilt/components/Chat/ChatActions.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 import { HMSMessage } from '@100mslive/react-sdk';
-export declare const ChatActions: ({ showPinAction, onReply, showReply, message, sentByLocalPeer, isMobile, openSheet, setOpenSheet, }: {
+export declare const ChatActions: ({ showPinAction, onReply, onReplyGroup, showReply, message, sentByLocalPeer, isMobile, openSheet, setOpenSheet, }: {
     showPinAction: boolean;
     onReply: () => void;
+    onReplyGroup: () => void;
     showReply: boolean;
     message: HMSMessage;
     sentByLocalPeer: boolean;

package/dist/Prebuilt/components/Polls/CreateQuestions/DeleteQuestionModal.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const DeleteQuestionModal: ({ open, setOpen, removeQuestion, }: {
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    removeQuestion: () => void;
+}) => React.JSX.Element;

package/dist/Prebuilt/components/Polls/CreateQuestions/QuestionForm.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { HMSPollQuestionCreateParams, HMSPollQuestionOptionCreateParams } from '@100mslive/react-sdk';
+export declare const QuestionForm: ({ question, index, length, onSave, removeQuestion, isQuiz, }: {
+    question: HMSPollQuestionCreateParams & {
+        draftID: number;
+    };
+    index: number;
+    length: number;
+    onSave: (optionParams: HMSPollQuestionCreateParams & {
+        draftID: number;
+        saved: boolean;
+    }) => void;
+    removeQuestion: () => void;
+    isQuiz: boolean;
+}) => React.JSX.Element;
+export declare const isValidQuestion: ({ text, type, options, weight, isQuiz, }: {
+    text: string;
+    type: string;
+    options: HMSPollQuestionOptionCreateParams[];
+    weight: number;
+    isQuiz?: boolean | undefined;
+}) => boolean;

package/dist/Prebuilt/components/Polls/CreateQuestions/SavedQuestion.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { HMSPollQuestion } from '@100mslive/react-sdk';
+export declare const SavedQuestion: ({ question, index, length, convertToDraft, removeQuestion, }: {
+    question: HMSPollQuestion & {
+        draftID: number;
+    };
+    index: number;
+    length: number;
+    convertToDraft: (draftID: number) => void;
+    removeQuestion: (draftID: number) => void;
+}) => React.JSX.Element;

package/dist/Prebuilt/components/Polls/Voting/StandardVoting.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { HMSPoll } from '@100mslive/react-sdk';
+export declare const StandardView: ({ poll }: {
+    poll: HMSPoll;
+}) => React.JSX.Element | null;

package/dist/Prebuilt/components/Polls/Voting/TimedVoting.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { HMSPoll } from '@100mslive/react-sdk';
+export declare const TimedView: ({ poll }: {
+    poll: HMSPoll;
+}) => React.JSX.Element | null;

package/dist/Prebuilt/components/Polls/Voting/Voting.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const Voting: ({ id, toggleVoting }: {
+    id: string;
+    toggleVoting: () => void;
+}) => React.JSX.Element | null;

package/dist/Prebuilt/components/Polls/common/Line.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Line: () => React.JSX.Element;

package/dist/Prebuilt/components/Polls/common/OptionInputWithDelete.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { HMSPollQuestionOption } from '@100mslive/react-sdk';
+export declare const OptionInputWithDelete: ({ index, option, handleOptionTextChange, removeOption, }: {
+    index: number;
+    option: HMSPollQuestionOption;
+    handleOptionTextChange: (index: number, value: string) => void;
+    removeOption: (index: number) => void;
+}) => React.JSX.Element;

package/dist/Prebuilt/components/Polls/common/StatusIndicator.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const StatusIndicator: ({ isLive }: {
+    isLive: boolean;
+}) => React.JSX.Element;

package/dist/Prebuilt/components/Polls/common/VoteCount.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const VoteCount: ({ voteCount }: {
+    voteCount: number;
+}) => React.JSX.Element;

package/dist/Prebuilt/components/Polls/common/VoteProgress.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { HMSPollQuestionOption } from '@100mslive/react-sdk';
+export declare const VoteProgress: ({ option, totalResponses }: {
+    option: HMSPollQuestionOption;
+    totalResponses: number;
+}) => React.JSX.Element | null;

package/dist/Prebuilt/components/Polls/common/VoterList.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const VoterList: ({ voters }: {
+    voters: string[];
+}) => React.JSX.Element[];

package/dist/Prebuilt/components/TileMenu/utils.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Add __cancel-drag-event for the menu to open on touch devices on the draggdable element
+ *
+ */
+export declare const getDragClassName: () => "" | "__cancel-drag-event";

package/dist/Prebuilt/components/hooks/usePinnedBy.d.ts

@@ -0,0 +1 @@
+export declare const usePinnedBy: (messageId: string) => string;

package/dist/Prebuilt/components/hooks/{useSetPinnedMessages.d.ts → usePinnedMessages.d.ts}

@@ -1,8 +1,13 @@
 import { HMSMessage } from '@100mslive/react-sdk';
+export declare type PinnedMessage = {
+    text: string;
+    id: string;
+    pinnedBy: string;
+};
 /**
  * set pinned chat message by updating the session store
  */
-export declare const useSetPinnedMessages: () => {
+export declare const usePinnedMessages: () => {
     setPinnedMessages: (message: HMSMessage, pinnedBy: string) => Promise<void>;
     removePinnedMessage: (indexToRemove: number) => Promise<void>;
     unpinBlacklistedMessages: (blacklistedMessageIDSet: Set<string>) => Promise<void>;

package/dist/TextArea/TextArea.d.ts

@@ -0,0 +1,441 @@
+export declare const TextArea: import("@stitches/react/types/styled-component").StyledComponent<"textarea", {
+    error?: boolean | "true" | undefined;
+}, {
+    allowMotion: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    ls: string;
+}, import("@stitches/react/types/css-util").CSS<{
+    allowMotion: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    ls: string;
+}, {
+    colors: {
+        primary_default: string;
+        primary_bright: string;
+        primary_dim: string;
+        primary_disabled: string;
+        on_primary_high: string;
+        on_primary_medium: string;
+        on_primary_low: string;
+        secondary_default: string;
+        secondary_bright: string;
+        secondary_dim: string;
+        secondary_disabled: string;
+        on_secondary_high: string;
+        on_secondary_medium: string;
+        on_secondary_low: string;
+        background_default: string;
+        background_dim: string;
+        surface_default: string;
+        surface_bright: string;
+        surface_brighter: string;
+        surface_dim: string;
+        on_surface_high: string;
+        on_surface_medium: string;
+        on_surface_low: string;
+        border_default: string;
+        border_bright: string;
+        alert_success: string;
+        alert_warning: string;
+        alert_error_default: string;
+        alert_error_bright: string;
+        alert_error_brighter: string;
+        alert_error_dim: string;
+    };
+    shadows: {
+        sm: string;
+        md: string;
+    };
+    fonts: {
+        sans: string;
+    };
+    fontSizes: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+        tiny: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    fontWeights: {
+        semiBold: number;
+        medium: number;
+        regular: number;
+    };
+    lineHeights: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+        tiny: string;
+        xs: string;
+        sm: string;
+        md: string;
+    };
+    radii: {
+        '0': string;
+        '1': string;
+        '2': string;
+        '3': string;
+        '4': string;
+        round: string;
+    };
+    space: {
+        0: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        px: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        13: string;
+        14: string;
+        15: string;
+        16: string;
+        17: string;
+        18: string;
+        19: string;
+        20: string;
+        24: string;
+        28: string;
+        32: string;
+        36: string;
+        40: string;
+        44: string;
+        48: string;
+        52: string;
+        56: string;
+        60: string;
+        64: string;
+        72: string;
+        80: string;
+        96: string;
+        100: string;
+    };
+    borderWidths: {
+        light: string;
+        normal: string;
+        bold: string;
+        extrabold: string;
+        black: string;
+    };
+}, {
+    width: string;
+    height: string;
+    minWidth: string;
+    maxWidth: string;
+    minHeight: string;
+    maxHeight: string;
+    flexBasis: string;
+    gridTemplateColumns: string;
+    gridTemplateRows: string;
+    blockSize: string;
+    minBlockSize: string;
+    maxBlockSize: string;
+    inlineSize: string;
+    minInlineSize: string;
+    maxInlineSize: string;
+    gap: "space";
+    gridGap: "space";
+    columnGap: "space";
+    gridColumnGap: "space";
+    rowGap: "space";
+    gridRowGap: "space";
+    inset: "space";
+    insetBlock: "space";
+    insetBlockEnd: "space";
+    insetBlockStart: "space";
+    insetInline: "space";
+    insetInlineEnd: "space";
+    insetInlineStart: "space";
+    margin: "space";
+    marginTop: "space";
+    marginRight: "space";
+    marginBottom: "space";
+    marginLeft: "space";
+    marginBlock: "space";
+    marginBlockEnd: "space";
+    marginBlockStart: "space";
+    marginInline: "space";
+    marginInlineEnd: "space";
+    marginInlineStart: "space";
+    padding: "space";
+    paddingTop: "space";
+    paddingRight: "space";
+    paddingBottom: "space";
+    paddingLeft: "space";
+    paddingBlock: "space";
+    paddingBlockEnd: "space";
+    paddingBlockStart: "space";
+    paddingInline: "space";
+    paddingInlineEnd: "space";
+    paddingInlineStart: "space";
+    scrollMargin: "space";
+    scrollMarginTop: "space";
+    scrollMarginRight: "space";
+    scrollMarginBottom: "space";
+    scrollMarginLeft: "space";
+    scrollMarginBlock: "space";
+    scrollMarginBlockEnd: "space";
+    scrollMarginBlockStart: "space";
+    scrollMarginInline: "space";
+    scrollMarginInlineEnd: "space";
+    scrollMarginInlineStart: "space";
+    scrollPadding: "space";
+    scrollPaddingTop: "space";
+    scrollPaddingRight: "space";
+    scrollPaddingBottom: "space";
+    scrollPaddingLeft: "space";
+    scrollPaddingBlock: "space";
+    scrollPaddingBlockEnd: "space";
+    scrollPaddingBlockStart: "space";
+    scrollPaddingInline: "space";
+    scrollPaddingInlineEnd: "space";
+    scrollPaddingInlineStart: "space";
+    top: "space";
+    right: "space";
+    bottom: "space";
+    left: "space";
+    fontSize: "fontSizes";
+    background: "colors";
+    backgroundColor: "colors";
+    backgroundImage: "colors";
+    borderImage: "colors";
+    border: "colors";
+    borderBlock: "colors";
+    borderBlockEnd: "colors";
+    borderBlockStart: "colors";
+    borderBottom: "colors";
+    borderBottomColor: "colors";
+    borderColor: "colors";
+    borderInline: "colors";
+    borderInlineEnd: "colors";
+    borderInlineStart: "colors";
+    borderLeft: "colors";
+    borderLeftColor: "colors";
+    borderRight: "colors";
+    borderRightColor: "colors";
+    borderTop: "colors";
+    borderTopColor: "colors";
+    caretColor: "colors";
+    color: "colors";
+    columnRuleColor: "colors";
+    outline: "colors";
+    outlineColor: "colors";
+    fill: "colors";
+    stroke: "colors";
+    textDecorationColor: "colors";
+    fontFamily: "fonts";
+    fontWeight: "fontWeights";
+    lineHeight: "lineHeights";
+    letterSpacing: "letterSpacings";
+    borderWidth: "borderWidths";
+    borderTopWidth: "borderWidths";
+    borderLeftWidth: "borderWidths";
+    borderRightWidth: "borderWidths";
+    borderBottomWidth: "borderWidths";
+    borderStyle: "borderStyles";
+    borderTopStyle: "borderStyles";
+    borderLeftStyle: "borderStyles";
+    borderRightStyle: "borderStyles";
+    borderBottomStyle: "borderStyles";
+    borderRadius: "radii";
+    borderTopLeftRadius: "radii";
+    borderTopRightRadius: "radii";
+    borderBottomRightRadius: "radii";
+    borderBottomLeftRadius: "radii";
+    boxShadow: "shadows";
+    textShadow: "shadows";
+    transition: "transitions";
+    zIndex: "zIndices";
+}, {
+    bg: (value: {
+        readonly [$$PropertyValue]: "backgroundColor";
+    }) => {
+        backgroundColor: {
+            readonly [$$PropertyValue]: "backgroundColor";
+        };
+    };
+    c: (value: {
+        readonly [$$PropertyValue]: "color";
+    }) => {
+        color: {
+            readonly [$$PropertyValue]: "color";
+        };
+    };
+    r: (value: {
+        readonly [$$ScaleValue]: "radii";
+    }) => {
+        borderRadius: {
+            readonly [$$ScaleValue]: "radii";
+        };
+    };
+    fs: (value: string | number | {
+        readonly [$$PropertyValue]: "fontSize";
+    }) => {
+        fontSize: string | number | {
+            readonly [$$PropertyValue]: "fontSize";
+        };
+    };
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    w: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        width: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    h: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+}>>;

package/dist/TextArea/index.d.ts

@@ -0,0 +1 @@
+export { TextArea } from './TextArea';

package/dist/Toast/Toast.d.ts

@@ -451,7 +451,7 @@ interface HMSToastProps extends ToastProps {
 export declare const Toast: {
     Provider: React.FC<ToastPrimitives.ToastProviderProps>;
     Root: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLLIElement>>, {
-        variant?: "standard" | "warning" | "error" | "success" | undefined;
+        variant?: "standard" | "error" | "warning" | "success" | undefined;
     }, {
         allowMotion: string;
         sm: string;