@soul-refiner/design-system 0.0.19 → 0.0.21

package/dist/src/navigation/Navigation/SubNavigation.d.ts

@@ -0,0 +1,98 @@
+import React from "react";
+import { ButtonProps } from "../../actions";
+import { DropdownOptionProps } from "../../actions/Dropdown";
+import { AvatarProps } from "../../iconography";
+/********************************************************
+ *  Sub Navigation
+ */
+export interface SubNavigationProps extends React.PropsWithChildren {
+    onSearch: (query: string) => void;
+    onScrollEnd?: () => void;
+    show: boolean;
+    title: string;
+}
+declare const SubNavigation: {
+    ({ children, onSearch, onScrollEnd, show, title, }: SubNavigationProps): JSX.Element;
+    Item: {
+        ({ as, active, dateCreated, dropdownOptions, dropdownElements, isMessage, onClick, subtitle, title, unread, url, }: SubNavigationItemProps): JSX.Element;
+        displayName: string;
+    };
+    Button: {
+        ({ active, children, ...rest }: SubNavigationButtonProps): JSX.Element;
+        displayName: string;
+    };
+    Create: {
+        ({ active, children, ...rest }: SubNavigationCreateProps): JSX.Element;
+        displayName: string;
+    };
+    Tab: {
+        ({ children }: SubNavigationTabProps): JSX.Element;
+        displayName: string;
+    };
+    SubMenu: {
+        ({ children }: SubNavigationSubMenuProps): JSX.Element;
+        displayName: string;
+    };
+    SubMenuItem: {
+        ({ as, children, icon, href, onClick, title, }: SubNavigationSubMenuItemProps): JSX.Element;
+        displayName: string;
+    };
+};
+/********************************************************
+ *  Item - Renders individual items of the sub navigation
+ */
+export interface SubNavigationItemProps extends Omit<AvatarProps, "as" | "size"> {
+    as?: React.ElementType;
+    active?: boolean;
+    /**
+     * The time stamp renders only if isMessage is true
+     */
+    dateCreated?: Date;
+    /**
+     * Dropdown options render only if isMessage is false
+     */
+    dropdownOptions?: DropdownOptionProps[];
+    dropdownElements?: React.ReactNode[];
+    isMessage?: boolean;
+    onClick?: () => void;
+    submenu?: React.ReactNode;
+    /**
+     * The unread props is for messages only
+     */
+    unread?: boolean;
+}
+/********************************************************
+ *  Button - Renders one of the call to actions at the top of the inner drawer navigation
+ */
+export interface SubNavigationButtonProps extends Omit<ButtonProps, "size" | "buttonColor" | "bold" | "uppercase"> {
+    active?: boolean;
+}
+/********************************************************
+ *  Create - Renders the CTA to create something at the bottom of the inner drawer navigation
+ */
+export interface SubNavigationCreateProps extends Omit<ButtonProps, "size" | "buttonColor" | "bold" | "uppercase" | "icon"> {
+    active?: boolean;
+}
+/********************************************************
+ *  Tab - Renders both the tabs in the header and the content of each tab
+ */
+export interface SubNavigationTabProps extends React.PropsWithChildren {
+    name: string;
+}
+/********************************************************
+ *  Sub Menu - Renders a sub menu that navigates to a new page of the inner drawer navigation
+ */
+export interface SubNavigationSubMenuProps extends React.PropsWithChildren {
+    title: string;
+}
+/********************************************************
+ *  Sub Menu Item - Renders a child element of the sub menu
+ */
+export interface SubNavigationSubMenuItemProps extends React.PropsWithChildren {
+    as?: React.ElementType;
+    icon?: React.ReactElement;
+    href?: string;
+    onClick?: () => void;
+    title: string;
+}
+export { SubNavigation };

package/dist/src/navigation/Navigation/index.d.ts

@@ -0,0 +1,2 @@
+export { Navigation, type NavigationProps, type NavigationItemProps, } from "./Navigation";
+export { SubNavigation, type SubNavigationProps, type SubNavigationItemProps, type SubNavigationButtonProps, type SubNavigationCreateProps, type SubNavigationTabProps, type SubNavigationSubMenuProps, type SubNavigationSubMenuItemProps, } from "./SubNavigation";

package/dist/src/navigation/Pagination/Pagination.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export interface PaginationProps {
+    currentPage: number;
+    /**
+     * The max number of pages visible from which one may select
+     * @default 3
+     */
+    visibilityInterval: number;
+    numPages: number;
+    onNavigate: (page: number) => void;
+}
+export declare const Pagination: ({ currentPage, visibilityInterval, numPages, onNavigate, }: PaginationProps) => JSX.Element;

package/dist/src/navigation/Pagination/{index.ts → index.d.ts}

@@ -1 +1 @@
-export { Pagination, type PaginationProps } from "./Pagination";
+export { Pagination, type PaginationProps } from "./Pagination";

package/dist/src/navigation/index.d.ts

@@ -0,0 +1,6 @@
+export { Breadcrumbs, type BreadcrumbsProps } from "./Breadcrumbs";
+export { Drawer, type DrawerProps } from "./Drawer";
+export { EditorBar, type EditorBarProps } from "./EditorBar";
+export { MenuTabs, type MenuTabsProps } from "./MenuTabs";
+export { Navigation, SubNavigation, type NavigationProps, type NavigationItemProps, type SubNavigationProps, type SubNavigationItemProps, type SubNavigationButtonProps, type SubNavigationCreateProps, type SubNavigationTabProps, type SubNavigationSubMenuProps, type SubNavigationSubMenuItemProps, } from "./Navigation";
+export { Pagination, type PaginationProps } from "./Pagination";

package/dist/src/surfaces/Comment/Comment.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Comment as IComment } from "@soul-refiner/models";
+export interface CommentProps extends IComment {
+    onReact: () => void;
+    onReply: (reply: string) => void;
+    onShowReplies?: () => void;
+    replies?: IComment[];
+    showReplies: boolean;
+}
+export declare const Comment: ({ id, parentId, user, text, created, onReact, onReply, onShowReplies, replies, reactions, showReplies, }: CommentProps) => JSX.Element;

package/dist/src/surfaces/Faq/Faq.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface FaqProps {
+    title: string;
+    content: string;
+    editable: boolean;
+    creationMode: boolean;
+    onSubmit: (event: React.FormEvent, props: {
+        title: string;
+        content: string;
+    }) => void;
+}
+export declare const Faq: ({ title, content, editable, creationMode, onSubmit, }: FaqProps) => JSX.Element;

package/dist/src/surfaces/Message/Message.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { User } from "@soul-refiner/models";
+export interface MessageProps extends React.PropsWithChildren {
+    created: Date;
+    fromSelf: boolean;
+    sender: User;
+}
+export declare const Message: ({ children, created, fromSelf, sender, }: MessageProps) => JSX.Element;

package/dist/src/surfaces/Message/index.d.ts

@@ -0,0 +1 @@
+export { Message, type MessageProps } from "./Message";

package/dist/src/surfaces/Modal/Modal.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+export interface ModalProps extends React.PropsWithChildren {
+    /**
+     * This is to make the Modal a controlled component,
+     * instead of it managing its own state
+     */
+    controlledOpen?: boolean;
+}
+declare const Modal: {
+    ({ controlledOpen, ...props }: ModalProps): JSX.Element;
+    Trigger: {
+        ({ children: child, }: {
+            children: React.ReactElement;
+        }): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Dismiss: {
+        ({ children: child, setClosed, }: {
+            children: React.ReactElement;
+            setClosed?: () => void;
+        }): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Content: {
+        ({ backgroundDark, children, footer, header, setClosed, ...props }: ModalContentProps): JSX.Element;
+        displayName: string;
+    };
+};
+export interface ModalContentProps extends React.PropsWithChildren {
+    backgroundDark?: boolean;
+    footer?: React.ReactElement;
+    header?: React.ReactElement;
+    setClosed?: () => void;
+}
+export { Modal };

package/dist/src/surfaces/Modal/index.d.ts

@@ -0,0 +1 @@
+export { Modal, type ModalProps, type ModalContentProps, } from "./Modal";

package/dist/src/surfaces/Plan/Plan.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface PlanProps {
+    activeSubscription: string;
+    annualPrice: number;
+    monthlyPrice: number;
+    name: string;
+    mostPopular: boolean;
+    description: string;
+    benefits: string[];
+}
+export declare const Plan: ({ activeSubscription, annualPrice, monthlyPrice, name, mostPopular, description, benefits, }: PlanProps) => JSX.Element;

package/dist/src/surfaces/Post/Post.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { User } from "@soul-refiner/models";
+import { CommentProps } from "../Comment";
+export interface PostProps extends React.PropsWithChildren {
+    comments: CommentProps[];
+    content: string;
+    created: Date;
+    hasReacted: boolean;
+    locked: boolean;
+    onComment: (comment: string) => void;
+    onReact: () => void;
+    onShare: () => void;
+    poster: User;
+    postId: string;
+    reactions: number;
+    shares?: number;
+    userAvatarSrc: string;
+}
+export declare const Post: ({ comments, children, content, created, hasReacted, onComment, onReact, onShare, poster, reactions, shares, userAvatarSrc, }: PostProps) => JSX.Element;

package/dist/src/surfaces/Post/postHelpers.d.ts

@@ -0,0 +1,2 @@
+import { CommentProps } from "../Comment";
+export declare const countComments: (comments: CommentProps[]) => number;

package/dist/src/surfaces/ProfileHeader/ProfileHeader.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+export interface ProfileHeaderProps {
+    avatarUrl: string;
+    heroUrl: string;
+    title: string;
+    subtitle: string;
+    isOwner: boolean;
+    menuItems: Array<React.ReactNode>;
+    activeMenuItem: number;
+    actionItems?: React.ReactNode;
+    statItems?: React.ReactNode;
+    onChangeAvatar: () => void;
+    onChangeHero: () => void;
+    onTabClick: (index: number) => void;
+    headerType: "group" | "channel" | "profile" | "course";
+}
+export declare const ProfileHeader: ({ avatarUrl, heroUrl, title, subtitle, isOwner, headerType, menuItems, activeMenuItem, actionItems, statItems, onChangeAvatar, onChangeHero, onTabClick, }: ProfileHeaderProps) => JSX.Element;

package/dist/src/surfaces/RatingsOverview/RatingsOverview.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export interface RatingsOverviewProps {
+    rating: number;
+    reviewCount: number;
+    stars: RatingInterface;
+    onWriteReview: () => void;
+}
+export interface RatingInterface {
+    one: number;
+    two: number;
+    three: number;
+    four: number;
+    five: number;
+}
+export declare const RatingElement: (rating: number, percent: number) => JSX.Element;
+export declare const RatingsOverview: ({ rating, reviewCount, stars, onWriteReview, }: RatingsOverviewProps) => JSX.Element;

package/dist/src/surfaces/Review/Review.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export interface ReviewProps {
+    reviewer: string;
+    reviewDate: Date;
+    rating: number;
+    verifiedPurchase: boolean;
+    title: string;
+    content: string;
+    avatarUrl: string;
+    likes: number;
+    hasLiked: boolean;
+    onLike: () => void;
+    onShare: () => void;
+}
+export declare const Review: ({ reviewer, reviewDate, rating, verifiedPurchase, title, content, avatarUrl, likes, hasLiked, onLike, onShare, }: ReviewProps) => JSX.Element;

package/dist/src/tables/Filter/Filter.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface FilterProps {
+    label: string;
+    open: boolean;
+    value: string;
+}
+export declare const Filter: ({ label, open, value }: FilterProps) => JSX.Element;

package/dist/src/tables/Filter/index.d.ts

@@ -0,0 +1 @@
+export { Filter, type FilterProps } from "./Filter";

package/dist/src/tables/Table/Table.d.ts

@@ -0,0 +1,68 @@
+import React from "react";
+import { IconHeaderProps } from "../../iconography";
+/********************************************************
+ *  Table
+ */
+export interface TableProps extends React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> {
+    compact?: boolean;
+    iconHeader?: IconHeaderProps;
+    footer?: React.ReactNode;
+    header?: React.ReactNode;
+    separated?: boolean;
+    striped?: boolean;
+}
+declare const Table: {
+    ({ className, compact, iconHeader, footer, header, separated, striped, children, ...rest }: TableProps): JSX.Element;
+    Head: {
+        ({ children, ...rest }: React.PropsWithChildren): JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ children, ...rest }: React.PropsWithChildren): JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ children, ...rest }: React.PropsWithChildren): JSX.Element;
+        displayName: string;
+    };
+    HeaderCell: {
+        ({ children, lines, style, textAlign, verticalAlign, width, ...rest }: TableHeaderCellProps): JSX.Element;
+        displayName: string;
+    };
+    Row: {
+        ({ children, href, hoverable, onClick, padding, selected, style, ...rest }: TableRowProps): JSX.Element;
+        displayName: string;
+    };
+    Cell: {
+        ({ children, lines, style, textAlign, verticalAlign, width, ...rest }: TableCellProps): JSX.Element;
+        displayName: string;
+    };
+};
+/********************************************************
+ *  Table Header Cell
+ */
+export interface TableHeaderCellProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableCellElement>, HTMLTableCellElement> {
+    lines?: number;
+    textAlign?: "left" | "center" | "right";
+    verticalAlign?: "top" | "middle" | "bottom";
+    width?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16;
+}
+/********************************************************
+ *  Table Row
+ */
+export interface TableRowProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement> {
+    href?: string;
+    hoverable?: boolean;
+    padding?: string;
+    selected?: boolean;
+}
+/********************************************************
+ *  Table Cell
+ */
+export interface TableCellProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableCellElement>, HTMLTableCellElement> {
+    lines?: number;
+    textAlign?: "left" | "center" | "right";
+    verticalAlign?: "top" | "middle" | "bottom";
+    width?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16;
+}
+export { Table };

package/dist/src/tables/Table/index.d.ts

@@ -0,0 +1 @@
+export { Table, type TableProps, type TableHeaderCellProps, type TableRowProps, type TableCellProps, } from "./Table";

package/dist/src/tables/index.d.ts

@@ -0,0 +1,2 @@
+export { Filter, type FilterProps } from "./Filter";
+export { Table, type TableProps, type TableHeaderCellProps, type TableRowProps, type TableCellProps, } from "./Table";

package/package.json

@@ -1,15 +1,25 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.0.19",
-  "type": "module",
-  "license": "MIT",
+  "version": "0.0.21",
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/src/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "sideEffects": [
     "**/*.css",
     "**/*.scss"
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    }
+  },
   "scripts": {
     "dev": "vite",
-    "build": "mkdir -p dist && cp --parents `find -name \\*scss` ./dist && tsc && vite build",
+    "build": "mkdir -p dist && cp --parents `find -name \\*scss` ./dist && vite build && mv dist/index.mjs dist/index.js",
     "preview": "vite preview",
     "lint": "TIMING=1 eslint src/**/*.ts* --fix",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
@@ -34,8 +44,7 @@
     "sass": "^1.54.4",
     "ts-jest": "^28.0.8",
     "typescript": "^4.5.3",
-    "vite": "^3.2.5",
-    "vite-dts": "^1.0.4"
+    "vite": "^3.2.5"
   },
   "publishConfig": {
     "access": "restricted"
@@ -43,10 +52,10 @@
   "dependencies": {
     "@emoji-mart/react": "^1.0.1",
     "@soul-refiner/client": "^0.0.13",
-    "@soul-refiner/icons": "0.0.19",
+    "@soul-refiner/icons": "0.0.20",
     "@soul-refiner/models": "^0.0.28",
     "@soul-refiner/tsconfig": "^0.0.1",
-    "@soul-refiner/utils": "0.0.9",
+    "@soul-refiner/utils": "^0.0.8",
     "@udecode/plate": "^18.7.0",
     "emoji-mart": "^5.2.1",
     "node-fetch": "^3.2.10",

package/.eslintrc.js

@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["abide"],
-};

package/.turbo/turbo-build.log

@@ -1,12 +0,0 @@
-$ tsc && vite build
-vite v3.2.5 building for production...
-transforming...
-✓ 53 modules transformed.
-Could not resolve './Editor.module.scss?used' from dist/src/editor/Editor.js
-error during build:
-Error: Could not resolve './Editor.module.scss?used' from dist/src/editor/Editor.js
-    at error (file:///home/ben/soul-refiner/Abide-Design-System/node_modules/rollup/dist/es/shared/rollup.js:1858:30)
-    at ModuleLoader.handleResolveId (file:///home/ben/soul-refiner/Abide-Design-System/node_modules/rollup/dist/es/shared/rollup.js:22156:24)
-    at file:///home/ben/soul-refiner/Abide-Design-System/node_modules/rollup/dist/es/shared/rollup.js:22119:26
-error Command failed with exit code 1.
-info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.