@selfcommunity/react-ui 0.10.5-alpha.2 → 0.10.5-alpha.3

package/lib/esm/shared/LiveStreamInfoDetails/index.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Icon, Stack, styled, Tooltip, Typography, useThemeProps } from '@mui/material';
+import { Link, SCRoutes, useSCFetchLiveStream, useSCRouting } from '@selfcommunity/react-core';
+import { FormattedMessage, useIntl } from 'react-intl';
+const PREFIX = 'SCLiveStreamInfoDetails';
+const classes = {
+    root: `${PREFIX}-root`,
+    iconTextWrapper: `${PREFIX}-icon-text-wrapper`,
+    inProgress: `${PREFIX}-in-progress`,
+    link: `${PREFIX}-link`,
+    url: `${PREFIX}-url`,
+    creationWrapper: `${PREFIX}-creation-wrapper`
+};
+const Root = styled(Stack, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
+export default function LiveStreamInfoDetails(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { liveStream, liveStreamId, hideDateIcon = false, hideLocationIcon = false, hideCreatedIcon = false, hasDateInfo = true, hasLocationInfo = true, hasCreatedInfo = false, hasInProgress = false, beforeDateInfo, beforeLocationInfo, beforeCreatedInfo } = props;
+    // CONTEXT
+    const scRoutingContext = useSCRouting();
+    // HOOKS
+    const intl = useIntl();
+    const { scLiveStream } = useSCFetchLiveStream({ id: liveStreamId, liveStream });
+    if (!scLiveStream) {
+        return null;
+    }
+    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [beforeDateInfo, hasDateInfo && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideDateIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: scLiveStream.closed_at_by_host ? 'calendar_off' : 'CalendarIcon' })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.eventInfoDetails.date.startEndTime", defaultMessage: "ui.eventInfoDetails.date.startEndTime", values: {
+                                date: intl.formatDate(scLiveStream.created_at, {
+                                    weekday: 'long',
+                                    day: 'numeric',
+                                    year: 'numeric',
+                                    month: 'long'
+                                }),
+                                start: intl.formatDate(scLiveStream.created_at, { hour: 'numeric', minute: 'numeric' })
+                            } }) })), hasInProgress && scLiveStream.last_started_at && (_jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.eventInfoDetails.inProgress", defaultMessage: "ui.eventInfoDetails.inProgress" }) }, { children: _jsx(Box, { className: classes.inProgress }) })))] }))), beforeLocationInfo, hasLocationInfo && (_jsxs(Stack, Object.assign({ className: classes.iconTextWrapper }, { children: [!hideLocationIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "play_circle_outline" })), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.LIVESTREAM_ROUTE_NAME, scLiveStream), target: "_blank", className: classes.link }, { children: _jsx(Typography, Object.assign({ variant: "body1", className: classes.url }, { children: scRoutingContext.url(SCRoutes.LIVESTREAM_ROUTE_NAME, scLiveStream) })) }))] }))), beforeCreatedInfo, hasCreatedInfo && (_jsxs(Stack, Object.assign({ className: classes.creationWrapper }, { children: [!hideCreatedIcon && _jsx(Icon, Object.assign({ fontSize: "small" }, { children: "create" })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.eventInfoDetails.date.create", defaultMessage: "ui.eventInfoDetails.date.create", values: {
+                                date: intl.formatDate(scLiveStream.created_at, {
+                                    weekday: 'long',
+                                    day: 'numeric',
+                                    year: 'numeric',
+                                    month: 'long'
+                                })
+                            } }) }))] })))] })));
+}

package/lib/esm/shared/Media/File/asUploadButton.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentType } from "react";
-declare type FileInputProps = {
+type FileInputProps = {
     capture?: string;
     accept: string;
 };

package/lib/esm/shared/Media/Link/UrlTextField/index.d.ts

@@ -75,6 +75,6 @@ export interface OutlinedUrlTextFieldProps extends BaseUrlTextFieldProps {
      */
     InputProps?: Partial<OutlinedInputProps>;
 }
-export declare type UrlTextFieldProps = StandardUrlTextFieldProps | FilledUrlTextFieldProps | OutlinedUrlTextFieldProps;
+export type UrlTextFieldProps = StandardUrlTextFieldProps | FilledUrlTextFieldProps | OutlinedUrlTextFieldProps;
 declare const _default: (props: UrlTextFieldProps) => JSX.Element;
 export default _default;

package/lib/esm/shared/MetadataField/MetadataField.d.ts

@@ -1,6 +1,6 @@
 import { TextFieldProps } from '@mui/material';
 import { SCMetadataType } from '@selfcommunity/types';
-export declare type MetadataFieldProps = TextFieldProps & {
+export type MetadataFieldProps = TextFieldProps & {
     metadata: SCMetadataType;
 };
 declare const MetadataField: (props: MetadataFieldProps) => JSX.Element;

package/lib/esm/shared/StickyBox/index.d.ts

@@ -32,18 +32,18 @@ import React from 'react';
 /**
  * Types/interfaces
  */
-export declare type UseStickyBoxProps = {
+export type UseStickyBoxProps = {
     offsetTop?: number;
     offsetBottom?: number;
     bottom?: boolean;
 };
-export declare type StickyBoxProps = UseStickyBoxProps & {
+export type StickyBoxProps = UseStickyBoxProps & {
     style?: React.CSSProperties;
     className?: string;
     children?: React.ReactNode;
 };
-export declare type useStickyBox = <T = any>(options?: UseStickyBoxProps) => React.RefCallback<T>;
-export declare type StickyBoxComponent = React.FunctionComponent<StickyBoxProps>;
+export type useStickyBox = <T = any>(options?: UseStickyBoxProps) => React.RefCallback<T>;
+export type StickyBoxComponent = React.FunctionComponent<StickyBoxProps>;
 /**
  * useStickyBox
  * @param offsetTop

package/lib/esm/shared/UpScalingTierBadge/UpScalingTierBadge.d.ts

@@ -0,0 +1,5 @@
+import type { StoryObj } from '@storybook/react';
+import SCUpScalingTierBadge from './index';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./index").UpScalingTierProps>;
+export default _default;
+export declare const Base: StoryObj<typeof SCUpScalingTierBadge>;

package/lib/esm/shared/UpScalingTierBadge/UpScalingTierBadge.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SCUpScalingTierBadge from './index';
+export default {
+    title: 'Design System/React UI Shared/SCUpScalingTierBadge',
+    component: SCUpScalingTierBadge
+};
+const template = (args) => _jsx(SCUpScalingTierBadge, Object.assign({}, args));
+export const Base = {
+    render: template
+};

package/lib/esm/shared/UpScalingTierBadge/index.d.ts

@@ -0,0 +1,7 @@
+import { TooltipProps } from '@mui/material';
+import { SCCommunitySubscriptionTier } from '@selfcommunity/types';
+export interface UpScalingTierProps extends Pick<TooltipProps, Exclude<keyof TooltipProps, 'children' | 'title'>> {
+    className?: string;
+    desiredTier?: SCCommunitySubscriptionTier;
+}
+export default function UpScalingTierBadge(inProps: UpScalingTierProps): JSX.Element;

package/lib/esm/shared/UpScalingTierBadge/index.js

@@ -0,0 +1,60 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import { FormattedMessage } from 'react-intl';
+import { Chip, Tooltip } from '@mui/material';
+import { useMemo } from 'react';
+import { SCCommunitySubscriptionTier } from '@selfcommunity/types';
+import classNames from 'classnames';
+const PREFIX = 'SCUpScalingTierBadge';
+const classes = {
+    root: `${PREFIX}-root`,
+    badge: `${PREFIX}-badge`
+};
+const Root = styled(Tooltip, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => [styles.root]
+})(() => ({}));
+const Badge = styled(Chip, {
+    name: PREFIX,
+    slot: 'badgeRoot'
+})(({ theme }) => ({}));
+export default function UpScalingTierBadge(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, desiredTier = SCCommunitySubscriptionTier.GO } = props, rest = __rest(props, ["className", "desiredTier"]);
+    const tooltipMsg = useMemo(() => {
+        let _msg = _jsx(FormattedMessage, { id: "ui.upScalingTierBadge.goFeature", defaultMessage: "ui.upScalingTierBadge.goFeature" });
+        switch (desiredTier) {
+            case SCCommunitySubscriptionTier.PROFESSIONAL:
+                _msg = _jsx(FormattedMessage, { id: "ui.upScalingTierBadge.professionalFeature", defaultMessage: "ui.upScalingTierBadge.professionalFeature" });
+                break;
+            case SCCommunitySubscriptionTier.ENTERPRISE:
+                _msg = _jsx(FormattedMessage, { id: "ui.upScalingTierBadge.enterpriseFeature", defaultMessage: "ui.upScalingTierBadge.enterpriseFeature" });
+                break;
+            default:
+                break;
+        }
+        return _msg;
+    }, [desiredTier]);
+    const badgeLabel = useMemo(() => {
+        let _label = _jsx(FormattedMessage, { id: "ui.upScalingTierBadge.go", defaultMessage: "ui.upScalingTierBadge.go" });
+        switch (desiredTier) {
+            case SCCommunitySubscriptionTier.PROFESSIONAL:
+                _label = _jsx(FormattedMessage, { id: "ui.upScalingTierBadge.professional", defaultMessage: "ui.upscalingBadge.professional" });
+                break;
+            case SCCommunitySubscriptionTier.ENTERPRISE:
+                _label = _jsx(FormattedMessage, { id: "ui.upScalingTierBadge.enterprise", defaultMessage: "ui.upScalingTierBadge.enterprise" });
+                break;
+            default:
+                break;
+        }
+        return _label;
+    }, [desiredTier]);
+    return (_jsx(Root, Object.assign({ classes: { root: classNames(className, classes.root) }, title: tooltipMsg, placement: "top" }, rest, { children: _jsx(Badge, { color: "secondary", size: "small", label: badgeLabel, className: classes.badge }) })));
+}

package/lib/esm/shared/UsernameTextField/index.d.ts

@@ -1,5 +1,5 @@
 import { TextFieldProps } from '@mui/material';
-export declare type UsernameTextFieldProps = {
+export type UsernameTextFieldProps = {
     /**
      * Allows the field to accept an email format as well
      */

package/lib/esm/types/composer.d.ts

@@ -10,6 +10,6 @@ export interface ComposerLayerProps {
     onSave: (value: any) => void;
     defaultValue: any;
 }
-export declare type ComposerContentType = Omit<SCFeedPostType, 'id' | 'last_activity_at' | 'added_at' | 'slug' | 'summary' | 'deleted' | 'collapsed' | 'comment_count' | 'share_count' | 'view_count' | 'vote_count' | 'follower_count' | 'reaction' | 'reactions_count' | 'flag_count' | 'type'> & {
+export type ComposerContentType = Omit<SCFeedPostType, 'id' | 'last_activity_at' | 'added_at' | 'slug' | 'summary' | 'deleted' | 'collapsed' | 'comment_count' | 'share_count' | 'view_count' | 'vote_count' | 'follower_count' | 'reaction' | 'reactions_count' | 'flag_count' | 'type'> & {
     title?: string;
 };

package/lib/esm/types/liveStream.d.ts

@@ -0,0 +1,5 @@
+export declare enum SCLiveStreamTemplateType {
+    DETAIL = "detail",
+    SNIPPET = "snippet",
+    PREVIEW = "preview"
+}

package/lib/esm/types/liveStream.js

@@ -0,0 +1,6 @@
+export var SCLiveStreamTemplateType;
+(function (SCLiveStreamTemplateType) {
+    SCLiveStreamTemplateType["DETAIL"] = "detail";
+    SCLiveStreamTemplateType["SNIPPET"] = "snippet";
+    SCLiveStreamTemplateType["PREVIEW"] = "preview";
+})(SCLiveStreamTemplateType || (SCLiveStreamTemplateType = {}));

package/lib/esm/utils/liveStream.d.ts

@@ -0,0 +1,4 @@
+export declare function encodePassphrase(passphrase: string): string;
+export declare function decodePassphrase(base64String: string): string;
+export declare function generateRoomId(): string;
+export declare function randomString(length: number): string;

package/lib/esm/utils/liveStream.js

@@ -0,0 +1,18 @@
+export function encodePassphrase(passphrase) {
+    return encodeURIComponent(passphrase);
+}
+export function decodePassphrase(base64String) {
+    return decodeURIComponent(base64String);
+}
+export function generateRoomId() {
+    return `${randomString(4)}-${randomString(4)}`;
+}
+export function randomString(length) {
+    let result = '';
+    const characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
+    const charactersLength = characters.length;
+    for (let i = 0; i < length; i++) {
+        result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+    return result;
+}