@local-civics/mgmt-ui 0.1.0

package/dist/pages/Dashboard/Dashboard.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { TabsValue } from '@mantine/core';
+import { DateRangePickerValue } from '@mantine/dates';
+import { BreakdownData } from "./Breakdown/Breakdown";
+import { OverviewData } from "./Overview/Overview";
+/**
+ * DashboardData
+ */
+export interface DashboardData {
+    dateRange: DateRangePickerValue;
+    overview: OverviewData;
+    breakdown: BreakdownData;
+    groups: {
+        name: string;
+        active?: boolean;
+    }[];
+    tab: TabsValue;
+}
+/**
+ * DashboardProps
+ */
+export interface DashboardProps {
+    data: DashboardData;
+    onBreakdownMetricChange: (next: string) => void;
+    onDateRangeChange: (next: DateRangePickerValue) => void;
+    onGroupChange: (next: string) => void;
+    onOverviewMetricChange: (next: string) => void;
+    onTabChange: (next: TabsValue) => void;
+}
+/**
+ * Dashboard
+ * @param props
+ * @constructor
+ */
+export declare const Dashboard: (props: DashboardProps) => JSX.Element;

package/dist/pages/Dashboard/Overview/Overview.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+/**
+ * OverviewData
+ */
+export interface OverviewData {
+    stats: {
+        "PROBLEMS SOLVED": {
+            value: number;
+            diff: number;
+        };
+        "LESSONS COMPLETED": {
+            value: number;
+            diff: number;
+        };
+        "BADGES EARNED": {
+            value: number;
+            diff: number;
+        };
+    };
+    areaChart: {
+        metric: string;
+        points: {
+            name: string;
+            value: number;
+        }[];
+    };
+}
+/**
+ * OverviewProps
+ */
+export interface OverviewProps {
+    data: OverviewData;
+    onMetricChange: (next: string) => void;
+}
+/**
+ * Overview
+ * @param props
+ * @constructor
+ */
+export declare const Overview: (props: OverviewProps) => JSX.Element;

package/dist/pages/Dashboard/component.stories.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { DashboardProps } from "./Dashboard";
+import { Story } from "@storybook/react";
+/**
+ * Storybook component configuration
+ */
+declare const _default: {
+    title: string;
+    component: (props: DashboardProps) => JSX.Element;
+};
+export default _default;
+/**
+ * Component stories
+ */
+export declare const Component: Story<DashboardProps>;

package/dist/pages/Groups/Group/Group.d.ts

@@ -0,0 +1,64 @@
+/// <reference types="react" />
+import { GroupUserItem } from "./GroupUserTable";
+/**
+ * GroupData
+ */
+export interface GroupData {
+    description: string;
+    name: string;
+    groupUserHomeOpen: boolean;
+    user: {
+        avatar: string;
+        givenName: string;
+        familyName: string;
+        email: string;
+        job: string;
+        quote: string;
+    };
+    tenant: {
+        name: string;
+        description: string;
+        image: string;
+        website: string;
+    };
+    stats: {
+        "PROBLEMS SOLVED": {
+            value: number;
+            diff: number;
+        };
+        "LESSONS COMPLETED": {
+            value: number;
+            diff: number;
+        };
+        "BADGES EARNED": {
+            value: number;
+            diff: number;
+        };
+    };
+    timeline: {
+        key: string;
+        name: string;
+        link?: string;
+        description: string;
+        time: string;
+    }[];
+    users: GroupUserItem[];
+}
+/**
+ * GroupProps
+ */
+export interface GroupProps {
+    data: GroupData;
+    onBackClick: () => void;
+    onCreateUsers: (users: GroupUserItem[]) => void;
+    onDelete: (user: GroupUserItem) => void;
+    onRoleChange: (user: GroupUserItem, role: string | null) => void;
+    onViewProfile: (user: GroupUserItem) => Promise<void>;
+    onTimelineScrollBottom: () => void;
+}
+/**
+ * Group
+ * @param props
+ * @constructor
+ */
+export declare const Group: (props: GroupProps) => JSX.Element;

package/dist/pages/Groups/Group/GroupUserTable.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+/**
+ * GroupUserItem
+ */
+export type GroupUserItem = {
+    key: string;
+    avatar: string;
+    email: string;
+    givenName: string;
+    familyName: string;
+    role: string;
+    lastActivity: Date | null;
+};
+/**
+ * GroupUserTableProps
+ */
+export interface GroupUserTableProps {
+    data: GroupUserItem[];
+    onChangeRole: (user: GroupUserItem, role: string | null) => void;
+    onDelete: (user: GroupUserItem) => void;
+    onViewProfile: (user: GroupUserItem) => void;
+}
+/**
+ * GroupUserTable
+ * @param props
+ * @constructor
+ */
+export declare function GroupUserTable(props: GroupUserTableProps): JSX.Element;

package/dist/pages/Groups/Groups.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import { GroupData } from "./Group/Group";
+import { GroupUserItem } from "./Group/GroupUserTable";
+import { GroupStackItem } from "./GroupsStack";
+/**
+ * GroupsData
+ */
+export interface GroupsData {
+    formOpen: boolean;
+    group: GroupData;
+    groupOpen: boolean;
+    groups: GroupStackItem[];
+}
+/**
+ * GroupsProps
+ */
+export interface GroupsProps {
+    data: GroupsData;
+    onCreateGroup: (group: {
+        name: string;
+        description: string;
+    }) => void;
+    onCreateGroupUsers: (users: GroupUserItem[]) => void;
+    onDeleteGroup: (group: {
+        name: string;
+        description: string;
+    }) => void;
+    onDeleteGroupUser: (user: GroupUserItem) => void;
+    onEditGroup: (group: {
+        name: string;
+        description: string;
+    }) => void;
+    onViewGroupUser: (user: GroupUserItem) => Promise<void>;
+    onGroupUserRoleChange: (user: GroupUserItem, next: string | null) => void;
+    onTimelineScrollBottom: () => void;
+}
+/**
+ * Groups
+ * @param props
+ * @constructor
+ */
+export declare const Groups: (props: GroupsProps) => JSX.Element;

package/dist/pages/Groups/GroupsStack.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+/**
+ * GroupStackItem
+ */
+export type GroupStackItem = {
+    key: string;
+    name: string;
+    description: string;
+};
+/**
+ * GroupsStackProps
+ */
+export interface GroupsStackProps {
+    data: GroupStackItem[];
+    onEditGroup: (group: GroupStackItem) => void;
+    onDeleteGroup: (group: GroupStackItem) => void;
+}
+/**
+ * GroupsStack
+ * @param props
+ * @constructor
+ */
+export declare function GroupsStack(props: GroupsStackProps): JSX.Element;

package/dist/pages/Groups/component.stories.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { GroupsProps } from "./Groups";
+import { Story } from "@storybook/react";
+/**
+ * Storybook component configuration
+ */
+declare const _default: {
+    title: string;
+    component: (props: GroupsProps) => JSX.Element;
+};
+export default _default;
+/**
+ * Component stories
+ */
+export declare const Component: Story<GroupsProps>;

package/dist/pages/Home/Home.d.ts

@@ -0,0 +1,54 @@
+/// <reference types="react" />
+/**
+ * HomeData
+ */
+export interface HomeData {
+    user: {
+        avatar: string;
+        givenName: string;
+        familyName: string;
+        email: string;
+        job: string;
+        quote: string;
+    };
+    tenant: {
+        name: string;
+        description: string;
+        image: string;
+        website: string;
+    };
+    stats: {
+        "PROBLEMS SOLVED": {
+            value: number;
+            diff: number;
+        };
+        "LESSONS COMPLETED": {
+            value: number;
+            diff: number;
+        };
+        "BADGES EARNED": {
+            value: number;
+            diff: number;
+        };
+    };
+    timeline: {
+        key: string;
+        name: string;
+        link?: string;
+        description: string;
+        time: string;
+    }[];
+}
+/**
+ * HomeProps
+ */
+export interface HomeProps {
+    data: HomeData;
+    onTimelineScrollBottom: () => void;
+}
+/**
+ * Home
+ * @param props
+ * @constructor
+ */
+export declare const Home: (props: HomeProps) => JSX.Element;

package/dist/pages/Home/component.stories.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { HomeProps } from "./Home";
+import { Story } from "@storybook/react";
+/**
+ * Storybook component configuration
+ */
+declare const _default: {
+    title: string;
+    component: (props: HomeProps) => JSX.Element;
+};
+export default _default;
+/**
+ * Component stories
+ */
+export declare const Component: Story<HomeProps>;

package/dist/pages/Lessons/Lesson/Lesson.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { TabsValue } from '@mantine/core';
+import { LessonUserItem } from "./LessonUserTable";
+/**
+ * LessonData
+ */
+export interface LessonData {
+    key: string;
+    name: string;
+    description: string;
+    groups: {
+        name: string;
+        active?: boolean;
+    }[];
+    tab: TabsValue;
+    users: LessonUserItem[];
+}
+/**
+ * LessonProps
+ */
+export interface LessonProps {
+    data: LessonData;
+    onBackClick: () => void;
+    onGroupChange: (next: string) => void;
+    onPreview: (lesson: LessonData) => void;
+    onTabChange: (next: TabsValue) => void;
+    onUserClick: (user: LessonUserItem) => void;
+}
+/**
+ * Lesson
+ * @param props
+ * @constructor
+ */
+export declare const Lesson: (props: LessonProps) => JSX.Element;

package/dist/pages/Lessons/Lesson/LessonUserTable.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+/**
+ * LessonUserItem
+ */
+export interface LessonUserItem {
+    key: string;
+    avatar: string;
+    name: string;
+    email: string;
+}
+/**
+ * LessonUserTableProps
+ */
+export interface LessonUserTableProps {
+    data: LessonUserItem[];
+    onClick: (user: LessonUserItem) => void;
+}
+/**
+ * LessonUserTable
+ * @constructor
+ * @param props
+ */
+export declare function LessonUserTable(props: LessonUserTableProps): JSX.Element;

package/dist/pages/Lessons/Lesson/component.stories.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { LessonProps } from "./Lesson";
+import { Story } from "@storybook/react";
+/**
+ * Storybook component configuration
+ */
+declare const _default: {
+    title: string;
+    component: (props: LessonProps) => JSX.Element;
+};
+export default _default;
+/**
+ * Component stories
+ */
+export declare const Component: Story<LessonProps>;

package/dist/pages/Lessons/LessonTable.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+/**
+ * LessonItem
+ */
+export interface LessonItem {
+    key: string;
+    name: string;
+    description: string;
+}
+/**
+ * LessonTableProps
+ */
+export interface LessonTableProps {
+    data: LessonItem[];
+    onClick: (lesson: LessonItem) => void;
+}
+/**
+ * LessonTable
+ * @param props
+ * @constructor
+ */
+export declare function LessonTable(props: LessonTableProps): JSX.Element;

package/dist/pages/Lessons/Lessons.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { TabsValue } from '@mantine/core';
+import { LessonData } from "./Lesson/Lesson";
+import { LessonUserItem } from "./Lesson/LessonUserTable";
+import { LessonItem } from "./LessonTable";
+/**
+ * LessonsData
+ */
+export interface LessonsData {
+    lesson: LessonData;
+    lessonOpen: boolean;
+    lessons: LessonItem[];
+}
+/**
+ * LessonsProps
+ */
+export interface LessonsProps {
+    data: LessonsData;
+    onAutocompleteChange: (next: string) => void;
+    onGroupChange: (next: string) => void;
+    onLessonClick: (lesson: LessonItem) => void;
+    onPreview: (lesson: LessonItem) => void;
+    onTabChange: (tab: TabsValue) => void;
+    onUserClick: (user: LessonUserItem) => void;
+}
+/**
+ * Lessons
+ * @param props
+ * @constructor
+ */
+export declare const Lessons: (props: LessonsProps) => JSX.Element;

package/dist/pages/Lessons/component.stories.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { LessonsProps } from "./Lessons";
+import { Story } from "@storybook/react";
+/**
+ * Storybook component configuration
+ */
+declare const _default: {
+    title: string;
+    component: (props: LessonsProps) => JSX.Element;
+};
+export default _default;
+/**
+ * Component stories
+ */
+export declare const Component: Story<LessonsProps>;

package/dist/providers/MgmtProvider/MgmtProvider.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+/**
+ * MgmtProviderProps
+ */
+export interface MgmtProviderProps {
+    notificationLimit?: number;
+    children?: React.ReactNode;
+}
+/**
+ * MgmtProvider
+ * @constructor
+ * @param props
+ */
+export declare const MgmtProvider: (props: MgmtProviderProps) => JSX.Element;

package/dist/shells/Mgmt/Mgmt.d.ts

@@ -0,0 +1,77 @@
+/// <reference types="react" />
+import { TabsValue } from "@mantine/core";
+import { DateRangePickerValue } from "@mantine/dates";
+import { BadgeUserItem } from "../../pages/Badges/Badge/BadgeUserTable";
+import { BadgesData } from "../../pages/Badges/Badges";
+import { BadgeItem } from "../../pages/Badges/BadgeTable";
+import { LessonUserItem } from "../../pages/Lessons/Lesson/LessonUserTable";
+import { LessonsData } from "../../pages/Lessons/Lessons";
+import { LessonItem } from "../../pages/Lessons/LessonTable";
+import { AccountData } from "./SwitchAccount/SwitchAccount";
+import { GroupUserItem } from "../../pages/Groups/Group/GroupUserTable";
+import { GroupsData } from "../../pages/Groups/Groups";
+import { DashboardData } from "../../pages/Dashboard/Dashboard";
+import { HomeData } from "../../pages/Home/Home";
+/**
+ * MgmtData
+ */
+export interface MgmtData {
+    navbar: {
+        active: string;
+    };
+    home: HomeData;
+    dashboard: DashboardData;
+    groups: GroupsData;
+    account: AccountData;
+    lessons: LessonsData;
+    badges: BadgesData;
+}
+/**
+ * MgmtProps
+ */
+export interface MgmtProps {
+    data: MgmtData;
+    onAccountChange: (next: string) => void;
+    onDashboardBreakdownMetricChange: (next: string) => void;
+    onDashboardDateRangeChange: (next: DateRangePickerValue) => void;
+    onDashboardGroupChange: (next: string) => void;
+    onDashboardOverviewMetricChange: (next: string) => void;
+    onDashboardTabChange: (next: TabsValue) => void;
+    onHomeTimelineScrollBottom: () => void;
+    onNavbarClick: (label: string) => void;
+    onCreateGroup: (group: {
+        name: string;
+        description: string;
+    }) => void;
+    onCreateGroupUsers: (users: GroupUserItem[]) => void;
+    onDeleteGroup: (group: {
+        name: string;
+        description: string;
+    }) => void;
+    onDeleteGroupUser: (user: GroupUserItem) => void;
+    onEditGroup: (group: {
+        name: string;
+        description: string;
+    }) => void;
+    onViewGroupUser: (user: GroupUserItem) => Promise<void>;
+    onGroupUserRoleChange: (user: GroupUserItem, next: string | null) => void;
+    onLessonAutocompleteChange: (next: string) => void;
+    onLessonGroupChange: (next: string) => void;
+    onLessonClick: (lesson: LessonItem) => void;
+    onLessonPreview: (lesson: LessonItem) => void;
+    onLessonTabChange: (tab: TabsValue) => void;
+    onLessonUserClick: (user: LessonUserItem) => void;
+    onGroupUserTimelineScrollBottom: () => void;
+    onBadgeAutocompleteChange: (next: string) => void;
+    onBadgePreview: (badge: BadgeItem) => void;
+    onBadgeGroupChange: (next: string) => void;
+    onBadgeClick: (badge: BadgeItem) => void;
+    onBadgeTabChange: (tab: TabsValue) => void;
+    onBadgeUserClick: (user: BadgeUserItem) => void;
+}
+/**
+ * Mgmt
+ * @param props
+ * @constructor
+ */
+export declare const Mgmt: (props: MgmtProps) => JSX.Element;

package/dist/shells/Mgmt/SwitchAccount/SwitchAccount.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+/**
+ * AccountData
+ */
+export interface AccountData {
+    hidden: boolean;
+    active: string;
+    accounts: {
+        key: string;
+        name: string;
+    }[];
+}
+/**
+ * SwitchAccountProps
+ */
+export interface SwitchAccountProps {
+    data: AccountData;
+    onChange: (next: string) => void;
+    onClose: () => void;
+}
+/**
+ * SwitchAccount
+ * @param props
+ * @constructor
+ */
+export declare const SwitchAccount: (props: SwitchAccountProps) => JSX.Element;

package/dist/shells/Mgmt/component.stories.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { MgmtProps } from "./Mgmt";
+import { Story } from "@storybook/react";
+/**
+ * Storybook component configuration
+ */
+declare const _default: {
+    title: string;
+    component: (props: MgmtProps) => JSX.Element;
+};
+export default _default;
+/**
+ * Component stories
+ */
+export declare const Component: Story<MgmtProps>;

package/dist/utils/time.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Get language-sensitive relative time message from Dates.
+ * @param relative  - the relative dateTime, generally is in the past or future
+ * @param pivot     - the dateTime of reference, generally is the current time
+ */
+export declare function relativeTimeFromDates(relative: Date | null, pivot?: Date): string;
+/**
+ * Get language-sensitive relative time message from elapsed time.
+ * @param elapsed   - the elapsed time in milliseconds
+ */
+export declare function relativeTimeFromElapsed(elapsed: number): string;

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@local-civics/mgmt-ui",
+  "version": "0.1.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.es.js",
+  "scripts": {
+    "start": "start-storybook -h localhost -p 6006",
+    "build": "rollup -c && tsc",
+    "watch": "rollup -cw",
+    "test": "jest --coverage=true --passWithNoTests",
+    "build-storybook": "build-storybook",
+    "chromatic": "npx chromatic",
+    "fmt": "npx prettier --write src"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mantine/core": "^5.8.0",
+    "@mantine/dates": "^5.8.0",
+    "@mantine/dropzone": "^5.8.0",
+    "@mantine/ds": "^5.8.0",
+    "@mantine/form": "^5.8.0",
+    "@mantine/hooks": "^5.8.0",
+    "@mantine/modals": "^5.8.0",
+    "@mantine/notifications": "^5.8.0",
+    "@tabler/icons": "^1.111.0",
+    "papaparse": "^5.3.2",
+    "recharts": "^2.1.9"
+  },
+  "devDependencies": {
+    "@types/papaparse": "^5.3.5"
+  }
+}