@lokalise/harmony 1.4.0-exp-sidebarComponent.6 → 1.5.0

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

@@ -12,14 +12,15 @@ declare const Sidebar: {
         ariaLabel?: string;
         alt?: string;
     }) => import("react/jsx-runtime").JSX.Element;
-    IconLink: ({ label, to, icon }: {
+    IconLink: ({ label, to, icon: Icon }: {
         to: string;
         label: string;
-        icon: ReactNode;
+        icon: import('react').FC<import('@lokalise/louis').SvgIconProps>;
     }) => import("react/jsx-runtime").JSX.Element;
-    Menu: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
-    Tasks: (props: {
-        config: import('./Widgets/Tasks/types').SidebarTasksConfig;
+    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;
@@ -36,10 +37,11 @@ declare const Sidebar: {
     UpgradeMenuItem: ({ upgradeOptionHref }: {
         upgradeOptionHref: string;
     }) => import("react/jsx-runtime").JSX.Element | null;
-    ProfileSettingsMenuItem: ({ href, onClick, userEmail }: {
+    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

@@ -1,7 +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>;
-export default meta;
 type Story = StoryObj<typeof Sidebar>;
-export declare const TopSectionOnly: Story;
 export declare const FullSidebar: Story;
+export default meta;

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

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

@@ -1,2 +1,7 @@
-import { PropsWithChildren } from 'react';
-export declare const Menu: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+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

@@ -1,5 +1,5 @@
-import { SidebarProfileMenuConfig } from './types';
 import { ProfileMenuContentProps } from './ProfileMenuContent';
+import { SidebarProfileMenuConfig } from './types';
 type ProfileMenuProps = {
     config: SidebarProfileMenuConfig;
     children: ProfileMenuContentProps['children'];

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

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

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

@@ -3,4 +3,6 @@
  */
 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';
 export * from './utils/node';

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-exp-sidebarComponent.6",
+    "version": "1.5.0",
     "author": {
         "name": "Lokalise",
         "url": "https://lokalise.com/"
@@ -30,7 +30,7 @@
         "storybook:build": "storybook build"
     },
     "peerDependencies": {
-        "@lokalise/louis": ">=26.1.1",
+        "@lokalise/louis": ">=26.0.0",
         "@lokalise/styled": ">=3.0.0",
         "@lokalise/token-dictionary": ">=2.42.1",
         "date-fns": ">=4.1",
@@ -82,15 +82,14 @@
     "main": "dist/harmony.cjs",
     "module": "dist/harmony.mjs",
     "types": "dist/types/index.d.ts",
+    "sideEffects": false,
     "exports": {
         ".": {
             "types": "./dist/types/index.d.ts",
             "require": "./dist/harmony.cjs",
             "import": "./dist/harmony.mjs"
-        },
-        "./harmony.css": "./dist/harmony.css"
+        }
     },
-    "sideEffects": ["*.css"],
     "dependencies": {
         "clsx": "^2.1.1",
         "react-resize-detector": "^11.0.1"

package/dist/types/fixtures/sidebar/profileMenu.d.ts

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

package/dist/types/fixtures/sidebar/tasks.d.ts

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

package/dist/types/src/components/Sidebar/Widgets/Tasks/TaskLanguage/TaskLanguage.d.ts

@@ -1,6 +0,0 @@
-import { SidebarLanguage, SidebarTask } from '../types';
-export type TaskLanguageProps = {
-    task: SidebarTask;
-    language: SidebarLanguage;
-};
-export declare const TaskLanguage: ({ language, task }: TaskLanguageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/src/components/Sidebar/Widgets/Tasks/TaskLanguageCompleted/TaskLanguageCompleted.d.ts

@@ -1,7 +0,0 @@
-import { SidebarLanguage, SidebarTask } from '../types';
-type TaskLanguageCompletedProps = {
-    task: SidebarTask;
-    language: SidebarLanguage;
-};
-export declare const TaskLanguageCompleted: ({ task, language }: TaskLanguageCompletedProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/src/components/Sidebar/Widgets/Tasks/TaskOverview/TaskOverview.d.ts

@@ -1,5 +0,0 @@
-import { SidebarTask } from '../types';
-export type TaskProps = {
-    task: SidebarTask;
-};
-export declare const TaskOverview: ({ task }: TaskProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,3 +0,0 @@
-export declare const Tasks: (props: {
-    config: import('./types').SidebarTasksConfig;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/types/src/components/Sidebar/Widgets/Tasks/TasksContext.d.ts

@@ -1,2 +0,0 @@
-export declare const TasksContext: import('react').Context<TasksContextProps>;
-export declare const useTasks: () => TasksContextProps;

package/dist/types/src/components/Sidebar/Widgets/Tasks/TasksPopover/TasksPopover.d.ts

@@ -1 +0,0 @@
-export declare const TasksPopover: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/src/components/Sidebar/Widgets/Tasks/TasksProvider.d.ts

@@ -1,10 +0,0 @@
-import { FC, PropsWithChildren } from 'react';
-import { SidebarTasksConfig } from './types';
-type TasksProviderProps = PropsWithChildren<{
-    config: SidebarTasksConfig;
-}>;
-export declare const TasksProvider: ({ children, config }: TasksProviderProps) => import("react/jsx-runtime").JSX.Element;
-export declare const withTasksContext: <P extends {
-    config: SidebarTasksConfig;
-}>(WrappedComponent: FC<Omit<P, "config">>) => (props: P) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/src/components/Sidebar/Widgets/Tasks/index.d.ts

@@ -1,2 +0,0 @@
-export { Tasks } from './Tasks';
-export { dispatchTaskEvent, TaskEvents } from './utils/taskEvents';

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

@@ -1,85 +0,0 @@
-import { TypesFromMap } from '../../../../utils/node.ts/typeUtils';
-export declare const SidebarTaskStatuses: {
-    readonly Completed: "completed";
-    readonly InProgress: "in_progress";
-    readonly Created: "created";
-    readonly Queued: "queued";
-};
-export type SidebarTaskStatus = TypesFromMap<typeof SidebarTaskStatuses>;
-export declare const SidebarTaskLanguageStatuses: {
-    readonly Completed: "completed";
-    readonly InProgress: "in_progress";
-    readonly Created: "created";
-    readonly Queued: "queued";
-};
-export type SidebarTaskLanguageStatus = TypesFromMap<typeof SidebarTaskLanguageStatuses>;
-export declare const SidebarTaskTypeOptions: {
-    readonly translation: "translation";
-    readonly review: "review";
-    readonly lqa_by_ai: "lqa_by_ai";
-    readonly automatic_translation: "automatic_translation";
-};
-export type SidebarTaskTypeOption = TypesFromMap<typeof SidebarTaskTypeOptions>;
-export type SidebarTaskStyleGuide = {
-    id: string;
-    name: string;
-};
-export type SidebarTaskLanguage = {
-    lang_id: string;
-    name: string;
-    progress?: number;
-    status: SidebarTaskLanguageStatus;
-    base_words_total: `${number}`;
-    base_words_done: `${number}`;
-};
-export type SidebarTask = {
-    id: string;
-    title: string;
-    status: SidebarTaskStatus;
-    langs: SidebarTaskLanguage[];
-    team_id: number;
-    created_by_fullname: string;
-    source_lang_name: string;
-    task_type: SidebarTaskTypeOption;
-    style_guides: SidebarTaskStyleGuide[];
-    description?: string;
-    project_name: string;
-    master_branching_enabled: '0' | '1';
-    branch_name: string | null;
-    due_date: string | null;
-};
-export type SidebarDefaultFnArgs = {
-    task: SidebarTask;
-    language: SidebarTaskLanguage;
-};
-export type SidebarDefaultFn = (props: SidebarDefaultFnArgs) => void;
-export type SidebarTasksGetProjectUrlFnArgs = {
-    task: SidebarTask;
-    language?: SidebarTaskLanguage;
-    view?: 'single' | 'multi';
-    taskUncompleted?: boolean;
-};
-export type SidebarTasksGetProjectUrlFn = (props: SidebarTasksGetProjectUrlFnArgs) => string;
-export type SidebarTaskTitleOnClickFn = (props: Pick<SidebarDefaultFnArgs, 'task'>) => void;
-export type SidebarOnLanguageCompleteConfirmFnArgs = SidebarDefaultFnArgs & {
-    closePrompt: () => void;
-};
-export type SidebarOnLanguageCompleteConfirmFn = (props: SidebarOnLanguageCompleteConfirmFnArgs) => Promise<void>;
-export type SidebarTasksConfig = {
-    getTasksCount: () => Promise<number>;
-    getTasks: () => Promise<SidebarTask[]>;
-    getProjectUrl: SidebarTasksGetProjectUrlFn;
-    onLanguageCompleteConfirm: SidebarOnLanguageCompleteConfirmFn;
-    onTasksWidgetOpen?: ({ tasks }: {
-        tasks: SidebarTask[];
-    }) => void;
-    taskTitleOnClick?: SidebarTaskTitleOnClickFn;
-    langNameOnClick?: SidebarDefaultFn;
-    langProgressOnClick?: SidebarDefaultFn;
-};
-export type SidebarTasksContextProps = Pick<SidebarTasksConfig, 'onTasksWidgetOpen' | 'getProjectUrl' | 'taskTitleOnClick' | 'langNameOnClick' | 'langProgressOnClick' | 'onLanguageCompleteConfirm'> & {
-    fetchTasks: () => Promise<void>;
-    tasks: SidebarTask[];
-    tasksCount: number;
-    loadingTasks: boolean;
-};

package/dist/types/src/components/Sidebar/Widgets/Tasks/utils/content.d.ts

@@ -1,16 +0,0 @@
-import { SidebarLanguage, SidebarLanguageStatus, SidebarTask, SidebarTaskTypeOption } from '../types';
-export declare const getStatusText: (status: SidebarLanguageStatus, progressValue: number) => "Closed" | "Completed" | "In progress" | "Not started" | "Queued" | "-";
-export declare const resolveStatus: (language: SidebarLanguage) => SidebarLanguageStatus;
-export declare const statusSortOrder: string[];
-/**
- * TODO - these should be taken from louis
- */
-export declare const tagColor: Record<SidebarTaskTypeOption, string>;
-export declare const getTaskLanguages: (langs: SidebarTask["langs"]) => {
-    status: SidebarLanguageStatus;
-    lang_id: string;
-    name: string;
-    progress?: number;
-    base_words_total: `${number}`;
-    base_words_done: `${number}`;
-}[];

package/dist/types/src/components/Sidebar/Widgets/Tasks/utils/taskEvents.d.ts

@@ -1,23 +0,0 @@
-export declare const TaskEvents: {
-    readonly TaskCompleted: "task_completed";
-    readonly TaskClosed: "task_closed";
-    readonly Refresh: "refresh";
-    readonly ShowDialog: "show_dialog";
-};
-export type TaskEvent = (typeof TaskEvents)[keyof typeof TaskEvents];
-type SingleTaskPayload = {
-    taskId: string | number;
-};
-type DispatchTaskEventPayload = {
-    name: typeof TaskEvents.TaskCompleted;
-    detail: SingleTaskPayload;
-} | {
-    name: typeof TaskEvents.TaskClosed;
-    detail: SingleTaskPayload;
-} | {
-    name: typeof TaskEvents.Refresh;
-} | {
-    name: typeof TaskEvents.ShowDialog;
-};
-export declare const dispatchTaskEvent: (props: DispatchTaskEventPayload) => void;
-export {};

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

@@ -1,5 +0,0 @@
-export { Avatar } from './Avatar/Avatar';
-export { IconLink } from './IconLink/IconLink';
-export { Menu } from './Menu/Menu';
-export { Tasks } from './Tasks';
-export { ProfileMenu } from './ProfileMenu/ProfileMenu';

package/dist/types/vite.config.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import('vite').UserConfig;
-export default _default;