@lokalise/harmony 1.4.0 → 1.5.0

package/dist/types/src/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,47 @@
+import { HTMLProps, PropsWithChildren, ReactNode } from 'react';
+type SidebarProps = HTMLProps<HTMLElement> & {
+    children: ReactNode;
+};
+declare const Sidebar: {
+    ({ children, ...navProps }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+    Top({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+    Bottom({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+    Avatar: ({ src, href, ariaLabel, alt }: {
+        src: string;
+        href?: string;
+        ariaLabel?: string;
+        alt?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    IconLink: ({ label, to, icon: Icon }: {
+        to: string;
+        label: string;
+        icon: import('react').FC<import('@lokalise/louis').SvgIconProps>;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Menu: ({ children, icon: Icon }: {
+        icon: import('react').FC<import('@lokalise/louis').SvgIconProps>;
+    } & {
+        children?: ReactNode | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    ProfileMenu: ({ config, children }: {
+        config: import('./Widgets/ProfileMenu/types').SidebarProfileMenuConfig;
+        children: import('./Widgets/ProfileMenu/ProfileMenuContent').ProfileMenuContentProps["children"];
+    }) => import("react/jsx-runtime").JSX.Element;
+    TeamSwitch: ({ onSwitchTeam }: {
+        onSwitchTeam: (team: import('./types').SidebarTeam) => void;
+    }) => import("react/jsx-runtime").JSX.Element | null;
+    TeamMenuItem: ({ team, onClick, hidePlanLabel }: {
+        team?: import('./types').SidebarTeam;
+        onClick?: (team: import('./types').SidebarTeam) => void;
+        hidePlanLabel?: boolean;
+    }) => import("react/jsx-runtime").JSX.Element | null;
+    UpgradeMenuItem: ({ upgradeOptionHref }: {
+        upgradeOptionHref: string;
+    }) => import("react/jsx-runtime").JSX.Element | null;
+    ProfileSettingsMenuItem: ({ href, onClick, userEmail, hideBottomDivider, }: {
+        href: string;
+        userEmail: string;
+        onClick?: () => void;
+        hideBottomDivider?: boolean;
+    }) => import("react/jsx-runtime").JSX.Element | null;
+};
+export { Sidebar };

package/dist/types/src/components/Sidebar/Sidebar.stories.d.ts

@@ -0,0 +1,90 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Sidebar } from './Sidebar';
+/**
+ * ## Overview
+ * Sidebar is a self-contained component using widgets.
+ *
+ * ## Available Widgets
+ *
+ * ### `Sidebar.Top`
+ * Use to wrap up a top section of the Sidebar
+ *
+ * ### `Sidebar.Bottom`
+ * Use to wrap up a bottom section of the Sidebar
+ *
+ * ### `Sidebar.Avatar`
+ * Display company main avatar / logo in the top section
+ * ```
+ * src: string;
+ * href?: string; ('/')
+ * ariaLabel?: string; ('Home')
+ * alt?: string; ('Lokalise')
+ * ```
+ *
+ * ### `Sidebar.IconLink`
+ * Display link with an icon. Mainly used in the top section
+ * ```
+ * to: string;
+ * label: string;
+ * icon: FC<SvgIconProps>
+ * ```
+ *
+ * ### `Sidebar.Menu`
+ * Use this widget for simple side menu. Currently utilised for `Help` section
+ * ```
+ * icon: FC<SvgIconProps>
+ * children: ReactNode; (representing menu list)
+ * ```
+ *
+ * ### `Sidebar.ProfileMenu`
+ * Contextual component, requires initial configuration
+ * ```
+ * teams: SidebarTeam[];
+ * currentTeamId: number;
+ * planId: number;
+ * isLimitedView: boolean;
+ * isTeamSuspended: boolean;
+ * canAccessTeamSettings: boolean;
+ * isEndOfTrialActive: boolean;
+ * trialDaysLeft: number;
+ * isProviderAlpha: boolean;
+ * ```
+ * and works with internal widgets
+ *
+ * #### `Sidebar.TeamSwitch`
+ * Uses available teams (other than current) and allows user to switch between them
+ * ```
+ * onSwitchTeam: (team: SidebarTeam) => void;
+ * ```
+ *
+ * #### `Sidebar.TeamMenuItem`
+ * Uses context of current team, and depending on ability to switch team or not,
+ * it renders as a div or clickable MenuItem. If used with TeamSwitch, it triggers `onSwitchTeams`
+ * callback, passing relevant team as an argument
+ * ```
+ * team?: SidebarTeam; (fallbacks to currentTeam from context if not passed)
+ * onClick?: (team: SidebarTeam) => void;
+ * hidePlanLabel?: boolean;
+ * ```
+ *
+ * #### `Sidebar.ProfileSettingsMenuItem`
+ * Menu item that comes with a small user's email and renders conditionally, only if team
+ * is not suspended or is not at the end of a trial
+ * ```
+ * href: string;
+ * userEmail: string;
+ * onClick?: () => void; (additional onClick for any tracking events)
+ * hideBottomDivider?: boolean;
+ * ```
+ *
+ * #### `Sidebar.UpgradeMenuItem`
+ * Menu item conditionally rendering only if `showUpgradeButton` is `true`. It renders correct
+ * upgrade note depending on the current team plan and red arrow up to indicate an update option
+ * ```
+ * upgradeOptionHref: string;
+ * ```
+ */
+declare const meta: Meta<typeof Sidebar>;
+type Story = StoryObj<typeof Sidebar>;
+export declare const FullSidebar: Story;
+export default meta;

package/dist/types/src/components/Sidebar/UpgradeIcon/UpgradeIcon.d.ts

@@ -0,0 +1,5 @@
+type UpgradeIconProps = {
+    className?: string;
+};
+export declare const UpgradeIcon: ({ className }: UpgradeIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/src/components/Sidebar/Widgets/Avatar/Avatar.d.ts

@@ -0,0 +1,8 @@
+type AvatarProps = {
+    src: string;
+    href?: string;
+    ariaLabel?: string;
+    alt?: string;
+};
+export declare const Avatar: ({ src, href, ariaLabel, alt }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/src/components/Sidebar/Widgets/IconLink/IconLink.d.ts

@@ -0,0 +1,9 @@
+import { SvgIconProps } from '@lokalise/louis';
+import { FC } from 'react';
+type IconLinkProps = {
+    to: string;
+    label: string;
+    icon: FC<SvgIconProps>;
+};
+export declare const IconLink: ({ label, to, icon: Icon }: IconLinkProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/src/components/Sidebar/Widgets/Menu/Menu.d.ts

@@ -0,0 +1,7 @@
+import { SvgIconProps } from '@lokalise/louis';
+import { FC, PropsWithChildren } from 'react';
+type MenuProps = PropsWithChildren<{
+    icon: FC<SvgIconProps>;
+}>;
+export declare const Menu: ({ children, icon: Icon }: MenuProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/src/components/Sidebar/Widgets/ProfileMenu/ProfileMenu.d.ts

@@ -0,0 +1,8 @@
+import { ProfileMenuContentProps } from './ProfileMenuContent';
+import { SidebarProfileMenuConfig } from './types';
+type ProfileMenuProps = {
+    config: SidebarProfileMenuConfig;
+    children: ProfileMenuContentProps['children'];
+};
+export declare const ProfileMenu: ({ config, children }: ProfileMenuProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/src/components/Sidebar/Widgets/ProfileMenu/ProfileMenuContent.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { SidebarProfileMenuRenderProps } from './types';
+export type ProfileMenuContentProps = {
+    children: (props: SidebarProfileMenuRenderProps) => ReactNode;
+};
+export declare const ProfileMenuContent: ({ children }: ProfileMenuContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/src/components/Sidebar/Widgets/ProfileMenu/ProfileMenuContext.d.ts

@@ -0,0 +1,3 @@
+import { SidebarProfileMenuContextProps } from './types';
+export declare const ProfileMenuContext: import('react').Context<SidebarProfileMenuContextProps>;
+export declare const useProfileMenu: () => SidebarProfileMenuContextProps;

package/dist/types/src/components/Sidebar/Widgets/ProfileMenu/ProfileMenuProvider.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+import { SidebarProfileMenuConfig } from './types';
+type ProfileMenuProviderProps = PropsWithChildren<{
+    config: SidebarProfileMenuConfig;
+}>;
+export declare const ProfileMenuProvider: ({ children, config }: ProfileMenuProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/src/components/Sidebar/Widgets/ProfileMenu/ProfileSettingsMenuItem/ProfileSettingsMenuItem.d.ts

@@ -0,0 +1,8 @@
+type ProfileSettingsMenuItemProps = {
+    href: string;
+    userEmail: string;
+    onClick?: () => void;
+    hideBottomDivider?: boolean;
+};
+export declare const ProfileSettingsMenuItem: ({ href, onClick, userEmail, hideBottomDivider, }: ProfileSettingsMenuItemProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/types/src/components/Sidebar/Widgets/ProfileMenu/TeamMenuItem/TeamMenuItem.d.ts

@@ -0,0 +1,8 @@
+import { SidebarTeam } from '../../../types';
+type TeamMenuItemProps = {
+    team?: SidebarTeam;
+    onClick?: (team: SidebarTeam) => void;
+    hidePlanLabel?: boolean;
+};
+export declare const TeamMenuItem: ({ team, onClick, hidePlanLabel }: TeamMenuItemProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/types/src/components/Sidebar/Widgets/ProfileMenu/TeamSwitch/TeamSwitch.d.ts

@@ -0,0 +1,6 @@
+import { SidebarTeam } from '../../../types';
+type TeamSwitchProps = {
+    onSwitchTeam: (team: SidebarTeam) => void;
+};
+export declare const TeamSwitch: ({ onSwitchTeam }: TeamSwitchProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/types/src/components/Sidebar/Widgets/ProfileMenu/UpgradeMenuItem/UpgradeMenuItem.d.ts

@@ -0,0 +1,5 @@
+type UpgradeMenuItemProps = {
+    upgradeOptionHref: string;
+};
+export declare const UpgradeMenuItem: ({ upgradeOptionHref }: UpgradeMenuItemProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/types/src/components/Sidebar/Widgets/ProfileMenu/types.d.ts

@@ -0,0 +1,22 @@
+import { SidebarTeam } from '../../types';
+export type SidebarProfileMenuConfig = {
+    teams: SidebarTeam[];
+    currentTeamId: number;
+    planId: number;
+    isLimitedView: boolean;
+    isTeamSuspended: boolean;
+    canAccessTeamSettings: boolean;
+    isEndOfTrialActive: boolean;
+    trialDaysLeft: number;
+    isProviderAlpha: boolean;
+};
+export type SidebarProfileMenuContextProps = SidebarProfileMenuConfig & {
+    currentTeam?: SidebarTeam;
+    otherTeams: SidebarTeam[];
+    canChangeBilling: boolean;
+    isOnFreeOrTrialPlan: boolean;
+    showUpgradeCta: boolean;
+    showBillingButton: boolean;
+    allowTeamCreation: boolean;
+};
+export type SidebarProfileMenuRenderProps = Pick<SidebarProfileMenuContextProps, 'otherTeams' | 'allowTeamCreation' | 'isLimitedView' | 'canAccessTeamSettings' | 'isEndOfTrialActive' | 'isTeamSuspended' | 'showBillingButton' | 'isProviderAlpha'>;

package/dist/types/src/components/Sidebar/types.d.ts

@@ -0,0 +1,14 @@
+import { TypesFromMap } from '../../utils/node.ts';
+export declare const SidebarTeamRoles: {
+    readonly member: "member";
+    readonly admin: "admin";
+    readonly biller: "biller";
+    readonly owner: "owner";
+};
+export type SidebarTeamRole = TypesFromMap<typeof SidebarTeamRoles>;
+export type SidebarTeam = {
+    id: number;
+    name: string;
+    role: SidebarTeamRole;
+    logoUrl: string;
+};

package/dist/types/src/components/Sidebar/utils/index.d.ts

@@ -0,0 +1,4 @@
+export declare const splitFileName: (fileName: string) => {
+    name: string;
+    extension: string;
+};

package/dist/types/src/node.d.ts

@@ -2,12 +2,7 @@
  * COMPONENTS EXPORTS
  */
 export { NavigationPanel } from './components/NavigationPanel/NavigationPanel';
+export { Sidebar } from './components/Sidebar/Sidebar';
 export { Breadcrumbs } from './components/NavigationPanel/components/Breadcrumbs/Breadcrumbs';
 export { NavigationTabs } from './components/NavigationPanel/components/NavigationTabs/NavigationTabs';
-/**
- * UTILITIES EXPORTS
- */
-export { isPaidPlan, isProPlan, isEnterpriseOpenSourcePlan, isEnterprisePlan, isEssentialPlan, isStartPlan, isFreePlan, isTrialPlan, ENTERPRISE_PLAN_IDS, START_PLAN_IDS, ESSENTIAL_PLAN_IDS, PRO_PLAN_IDS, FREE_PLAN_ID, TRIAL_PLAN_ID, ENTERPRISE_OPENSOURCE_PLAN_ID, } from './utils/billing/plan/plan';
-export { convertNewLineToBreakTag } from './utils/content/text/text';
-export { makeUrlClickable } from './utils/content/url/url';
-export { formatDate, formatDateTz } from './utils/i18n/date/date';
+export * from './utils/node';

package/dist/types/src/utils/hooks/useEffectOnce.d.ts

@@ -0,0 +1,5 @@
+import { EffectCallback } from 'react';
+/**
+ * React hook that runs an effect only once.
+ */
+export declare const useEffectOnce: (effect: EffectCallback) => void;

package/dist/types/src/utils/node.d.ts

@@ -0,0 +1,6 @@
+export { isPaidPlan, isProPlan, isEnterpriseOpenSourcePlan, isEnterprisePlan, isEssentialPlan, isStartPlan, isFreePlan, isTrialPlan, ENTERPRISE_PLAN_IDS, START_PLAN_IDS, ESSENTIAL_PLAN_IDS, PRO_PLAN_IDS, FREE_PLAN_ID, TRIAL_PLAN_ID, ENTERPRISE_OPENSOURCE_PLAN_ID, } from './billing/plan/plan';
+export { convertNewLineToBreakTag } from './content/text/text';
+export { makeUrlClickable } from './content/url/url';
+export { formatDate, formatDateTz } from './i18n/date/date';
+export { useEffectOnce } from './hooks/useEffectOnce';
+export type { TypesFromMap } from './typeUtils';

package/dist/types/src/utils/typeUtils.d.ts

@@ -0,0 +1,3 @@
+export type TypesFromMap<T extends {
+    [key: string]: string | number;
+}> = T[keyof T];

package/dist/types/tests/mocks/sidebar/profileMenu.d.ts

@@ -0,0 +1,2 @@
+import { SidebarTeam } from '../../../src/components/Sidebar/types';
+export declare const createTeam: () => SidebarTeam;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lokalise/harmony",
-    "version": "1.4.0",
+    "version": "1.5.0",
     "author": {
         "name": "Lokalise",
         "url": "https://lokalise.com/"
@@ -41,6 +41,7 @@
     "devDependencies": {
         "@biomejs/biome": "^1.9.4",
         "@chromatic-com/storybook": "^3.2.4",
+        "@faker-js/faker": "^9.5.0",
         "@lokalise/biome-config": "^1.6.1",
         "@semantic-release/changelog": "^6.0.3",
         "@semantic-release/commit-analyzer": "^13.0.1",