@skedulo/sked-ui 0.0.4-alpha.3 → 0.0.4-react-18-preview

package/README.md

@@ -1,24 +1,107 @@
 # Skedulo UI
 
+Demo https://ui.skedulo.com
+
+## Demo (Local)
 
-## Installation Instructions
 Run:
-    ```yarn bootstrap```
 
+```bash
+yarn storybook
+ ```
+
+## Development
+
+Use NodeJS 16 for development
+
+### Installation
 
-## Testing
 Run:
-    ```yarn test```
 
-Run with watch command
-    ```yarn test:watch```
+```bash
+yarn bootstrap
+```
 
+### Testing
 
-## Demo
 Run:
-    ```yarn storybook```
 
+```bash
+yarn test
+```
+
+Run with the watch command:
+
+ yarn test:watch
+
+### Build
 
-## Build
 Run:
-    ```yarn build```
+
+```bash
+yarn build
+```
+
+### Linking between projects
+
+If you need to test your changes to the package in another project, you can do so by first building the package:
+
+```bash
+yarn build:package
+```
+
+then allow a link to sked-ui by running:
+
+```bash
+yarn link
+```
+
+within this projects directory.
+
+To use it within another project, navigate to the root folder of that project and run:
+
+```bash
+yarn link @skedulo/sked-ui
+```
+
+Some potentially helpful commands to run if you are making changes to sked are:
+
+```bash
+yarn package:watch
+
+# and
+
+yarn build:declarations:watch
+```
+
+### Merging to master & semantic-release
+
+#### Concurrent merging
+
+Do not in any circumstances merge branches to master while the build pipeline for the last commit is still running.
+
+Doing so will cause the last commit to not be published while other assets relying on it will be.
+
+#### Failed build pipelines on master
+
+Semantic-release will create a new commit at some point in the build pipeline that updates the package version in the source.
+
+If the build fails BEFORE this occurs, then feel free to rerun the build pipeline as it will cleanly re-attempt to release.
+
+If the build fails AFTER a commit is created, then you will not be able to rerun the build pipeline.  This is because the release
+
+process relies on being at the tip of master to release to NPM and a previous pipeline has already added a commit changing the package version.
+
+In this instance you will have to create another commit and merge it through a PR.  If the build pipeline is still broken and needs to be debugged
+
+then the only other option is asking an administrator to rebase master and drop the release commit allowing the release process to cleanly retry.
+
+This is an unfortunate scenario that comes from using semantic-release as it does not do releases idempotently.
+
+## Contributing
+
+PRs welcome. Please review the [CONTRIBUTING.md](./CONTRIBUTING.md) doc for what is required for any code contributions.
+
+## Roadmap
+
+Refer to [ROADMAP.md](./ROADMAP.md) for a planned list of upcoming components.

package/dist/components/IntersectionObserverWrapper/IntersectionObserverWrapper.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+interface IIntersectionObserverWrapper {
+    /**
+     * Function to call when element is visible
+     */
+    onVisible: (entry?: IntersectionObserverEntry) => void;
+    /**
+     * Sends every observer entry event
+     */
+    onMonitor?: (entries: IntersectionObserverEntry[]) => void;
+    /**
+     * Defaults to browser viewport
+     */
+    root?: Element;
+    /**
+     * Between 0 and 1
+     * How visible does the element have to be before onVisible is shown
+     * eg. 1 === 100%, 0.10 === 10%
+     *
+     * Default: 1
+     */
+    threshold?: number;
+    /**
+     * Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left)
+     */
+    rootMargin?: string;
+    /**
+     * The type of wrapper element to create. Defaults to div
+     */
+    as?: keyof HTMLElementTagNameMap;
+}
+/**
+ *
+ * A wrapper around the native IntersectionObserver that calls the onVisible
+ * function when the element is visible within the specified viewport
+ * based on supplied props. Useful for creating infinite scrolling behaviour.
+ */
+export declare const IntersectionObserverWrapper: React.FC<React.PropsWithChildren<IIntersectionObserverWrapper>>;
+export {};

package/dist/components/IntersectionObserverWrapper/IntersectionObserverWrapper.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/avatar/Avatar.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+export type AvatarSizes = 'tiny' | 'small' | 'medium' | 'large';
+export interface IAvatar extends React.HTMLAttributes<HTMLDivElement> {
+    /** This will be used for the 'letter' display and be the
+     * default tooltip text if showTooltip is true
+     * */
+    name: string;
+    /**
+     * Use this to skip the name being converted to an initials only display.
+     *   Once set the name will be displayed as-is.
+     */
+    preserveName?: boolean;
+    /**
+     * The url to use to fetch the avatar image
+     */
+    imageUrl?: string;
+    /**
+     * 'medium' is the default
+     */
+    size?: AvatarSizes;
+    /**
+     * Wrap the avatar in a tooltip
+     */
+    showTooltip?: boolean;
+    /**
+     * If you want your tooltip text to say something other
+     * than the 'name' prop, you can supply the text to this prop
+     */
+    tooltipText?: string;
+    /**
+     * Wrap the avatar with a border
+     */
+    bordered?: boolean;
+}
+export declare const avatarSizeClassMap: {
+    [key in AvatarSizes]: string;
+};
+/**
+ * Simple component for displaying avatars
+ * @requires Tooltip
+ */
+export declare class Avatar extends React.PureComponent<IAvatar, {}> {
+    getInitials(name?: string): string;
+    renderAvatar(): React.JSX.Element;
+    render(): React.JSX.Element;
+}

package/dist/components/avatar/Avatar.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/avatar/AvatarDetail.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IAvatar } from './Avatar';
+type AvatarDetailGroupSize = 'tiny' | 'small' | 'medium' | 'large';
+type AvatarProps = Pick<IAvatar, 'name' | 'imageUrl'>;
+export interface IAvatarDetailProps extends AvatarProps {
+    /**
+     * 'medium' is the default
+     */
+    size?: AvatarDetailGroupSize;
+    /**
+     * Section displayed below the name
+     */
+    subtitle?: JSX.Element;
+    className?: string;
+    linkUrl?: string;
+    target?: string;
+}
+export declare const AvatarDetail: ({ name, imageUrl, size, subtitle, className, linkUrl, target }: IAvatarDetailProps) => React.JSX.Element;
+export {};

package/dist/components/avatar/AvatarGroup.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { IAvatar, AvatarSizes } from './Avatar';
+export type IAvatarInfo = Partial<Pick<IAvatar, 'name' | 'imageUrl' | 'tooltipText'> & {
+    onClick: () => void;
+}>;
+export interface IAvatarGroupProps {
+    /**
+     * The number of slots which can be filled or unfilled.
+     */
+    totalSlots?: number;
+    /**
+     */
+    avatarInfo?: IAvatarInfo[];
+    /**
+     *  The number of visible slots allowed to be rendered - Minimum of 2.
+     */
+    maxVisibleSlots?: number;
+    /**
+     * 'small' is the default
+     */
+    size?: AvatarSizes;
+    /**
+     * this is the tooltip to be displayed on unfilled slot icons
+     */
+    emptySlotTooltipText?: string;
+}
+export declare const AvatarGroup: React.FC<IAvatarGroupProps>;

package/dist/components/avatar/Slot.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { ITooltipProps } from '../popups/tooltip/Tooltip';
+import { AvatarSizes } from '../..';
+export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Text to display inside the slot
+     */
+    text?: string;
+    /**
+     * Show the slot as filled grey or with dashed blue line
+     */
+    filled?: boolean;
+    /**
+     * Text displayed in the tooltip is applicable
+     */
+    tooltipText?: string | JSX.Element;
+    /**
+     * Avatar size
+     */
+    size?: AvatarSizes;
+    /**
+     * Tooltip background colour
+     */
+    colorScheme?: ITooltipProps['colorScheme'];
+    /**
+     * Optimal position of the tooltip
+     */
+    tooltipPosition?: ITooltipProps['position'];
+    /**
+     * Slot has white border
+     * */
+    bordered?: boolean;
+    /**
+     * Show the tooltip on the slot
+     */
+    showTooltip?: boolean;
+}
+/**
+ * Simple component for displaying avatars
+ * @requires Tooltip
+ */
+export declare const Slot: React.FC<IProps>;

package/dist/components/avatar/__tests__/Avatar.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/avatar/__tests__/AvatarDetail.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/avatar/__tests__/GroupAvatars.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/avatar/__tests__/Slot.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/badge/Badge.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export type BadgeTypes = 'default' | 'primary' | 'important';
+export declare const DEFAULT_BADGE_CLASSES = "sked-badge-min-w sk-text-xxs sk-font-medium sk-tracking-wide sk-h-5 sk-pb-px sk-rounded-full sk-inline-flex sk-items-center sk-justify-center";
+export interface IBadgeProps {
+    /**
+     * Value to be displayed in badge
+     */
+    count: number;
+    /**
+     * Optional value to indicate when count should be truncated with '+' (default 99)
+     */
+    countLimiter?: number;
+    /**
+     * The type of badge to be displayed. Default | Primary | Important (default 'primary')
+     */
+    badgeType?: BadgeTypes;
+}
+export declare const Badge: ({ count, countLimiter, badgeType }: IBadgeProps) => React.JSX.Element;

package/dist/components/badge/Badge.stories.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ComponentStory } from '@storybook/react';
+import { IBadgeProps } from './Badge';
+declare const _default: {
+    title: string;
+    component: (props: IBadgeProps) => React.JSX.Element;
+    argTypes: {
+        badgeType: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Basic: ComponentStory<({ count, countLimiter, badgeType }: IBadgeProps) => React.JSX.Element>;

package/dist/components/badge/__tests__/Badge.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/button-group/ButtonGroup.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+interface IButtonGroup extends React.HTMLProps<HTMLDivElement> {
+    compact?: boolean;
+}
+export declare const ButtonGroup: React.FC<React.PropsWithChildren<IButtonGroup>>;
+export {};

package/dist/components/button-group/ButtonGroup.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/button-group/__tests__/ButtonGroup.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/buttons/Buttons.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/buttons/button/Button.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { IconNames } from '../../icon/Icon';
+export type ButtonTypes = 'primary' | 'secondary' | 'transparent';
+export type IButtonProps = {
+    /**
+     * The type of button to be displayed. Primary | Secondary | Transparent
+     */
+    buttonType: ButtonTypes;
+    icon?: IconNames;
+    /**
+     * Pass additional class names
+     */
+    className?: string;
+    /**
+     * Disable the button
+     */
+    disabled?: boolean;
+    /**
+     * Compact sized button—used when space is tight - allowing more room for content.
+     */
+    compact?: boolean;
+    /**
+     * Loading button state
+     */
+    loading?: boolean;
+    /**
+     * Button is active
+     */
+    active?: boolean;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * Button component
+ */
+export declare const Button: React.ForwardRefExoticComponent<{
+    /**
+     * The type of button to be displayed. Primary | Secondary | Transparent
+     */
+    buttonType: ButtonTypes;
+    icon?: IconNames;
+    /**
+     * Pass additional class names
+     */
+    className?: string;
+    /**
+     * Disable the button
+     */
+    disabled?: boolean;
+    /**
+     * Compact sized button—used when space is tight - allowing more room for content.
+     */
+    compact?: boolean;
+    /**
+     * Loading button state
+     */
+    loading?: boolean;
+    /**
+     * Button is active
+     */
+    active?: boolean;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/buttons/button/__tests__/Button.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/buttons/button-dropdown/ButtonDropdown.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { IButtonDropdownCommon } from '../interfaces';
+interface IButtonDropdownProps extends IButtonDropdownCommon {
+    /**
+     * Text to display on the button
+     */
+    label: React.ReactNode;
+}
+/**
+ * The DropdownButton component displays/hides children as a dropdown when clicked. The Menu and MenuItem
+ components are strongly recommended to be used in conjunction with this component to enforce correct styling of the dropdown menu.
+ */
+export declare const ButtonDropdown: React.FC<React.PropsWithChildren<IButtonDropdownProps>>;
+export {};

package/dist/components/buttons/button-dropdown/__tests__/ButtonDropdown.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/buttons/icon-button/IconButton.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ITooltipProps } from '../../popups/tooltip/Tooltip';
+import { IconNames } from '../../icon/Icon';
+import { IButtonProps } from '../button/Button';
+interface IconButtonProps {
+    icon: IconNames;
+    tooltipContent: ITooltipProps['content'];
+    tooltipDelay?: ITooltipProps['delayShow'];
+    disableTooltip?: boolean;
+}
+export type IIconButton = IconButtonProps & Partial<IButtonProps>;
+export declare const IconButton: React.FC<React.PropsWithChildren<IIconButton>>;
+export {};

package/dist/components/buttons/icon-button/__tests__/IconButton.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/buttons/icon-button-dropdown/IconButtonDropdown.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { IIconButton } from '../icon-button/IconButton';
+import { IButtonDropdownCommon } from '../interfaces';
+export type IconButtonDropdown = IIconButton & IButtonDropdownCommon;
+export declare const IconButtonDropdown: React.FC<React.PropsWithChildren<IconButtonDropdown>>;

package/dist/components/buttons/icon-button-dropdown/__tests__/IconButtonDropdown.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/buttons/interfaces.d.ts

@@ -0,0 +1,10 @@
+import { Placement } from 'popper.js';
+import { IPopOutProps, IButtonProps } from '../..';
+export interface IButtonDropdownCommon extends Partial<IButtonProps> {
+    placement?: Placement;
+    /**
+     * Dropdown content is placed in a PopOut which is wrapped in a Portal by default.
+     * You can override that container using this prop.
+     */
+    popOutContainer?: IPopOutProps['popOutContainer'];
+}

package/dist/components/calendar-controls/CalendarControls-utils.d.ts

@@ -0,0 +1,7 @@
+import { RangeType } from './elements/RangePicker';
+export type DateDirection = 'forward' | 'backward';
+export type DateFormat = 'MonthDayYear' | 'DayMonthYear';
+export declare const moveDate: (selected: Date, days: RangeType, direction: DateDirection) => Date;
+export declare const endOfPeriod: (selected: Date, selectedRange: RangeType) => Date;
+export declare const formatLongDate: (date: Date, dateFormat?: DateFormat) => string;
+export declare const formatShortDate: (date: Date, dateFormat?: DateFormat) => string;

package/dist/components/calendar-controls/CalendarControls.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { IDateSelectorProps } from './elements/DateSelector';
+import { INavigationButtonProps } from './elements/NavigationButtons';
+import { IRangeProps, RangePicker, RangeType } from './elements/RangePicker';
+import { ValidationProps } from '../forms/elements/FormElements';
+export interface IBaseCalendarControlProps extends ValidationProps {
+    /**
+     * The current range to display. This will update the current range dropdown and the date range displayed
+     */
+    selectedRange?: RangeType;
+    /**
+     * The current focus date for the Calendar. If a range is provided this is the start of the range to render
+     */
+    selected?: Date;
+}
+export interface ICalendarControlProps extends React.HTMLAttributes<HTMLDivElement>, IBaseCalendarControlProps, IDateSelectorProps, INavigationButtonProps, IRangeProps {
+    /**
+     * Whenever the user clicks the `Today` button this callback is triggered
+     */
+    onTodayClick?: () => void;
+}
+export declare function useCalendarControlsContext(): ICalendarControlProps;
+declare function CalendarControls(props: ICalendarControlProps): React.JSX.Element;
+declare namespace CalendarControls {
+    var TodayButton: React.FC<import("./elements/TodayButton").ITodayButtonProps>;
+    var NavigationButtons: (props: INavigationButtonProps) => React.JSX.Element;
+    var DateSelector: React.FC<IDateSelectorProps>;
+    var RangePicker: React.FC<IRangeProps>;
+}
+export { CalendarControls, RangePicker, RangeType };

package/dist/components/calendar-controls/CalendarControls.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/calendar-controls/elements/DateSelector.d.ts

@@ -0,0 +1,47 @@
+import React, { HTMLAttributes } from 'react';
+import { ReactDatePickerProps } from 'react-datepicker';
+import { ButtonTypes } from '../../..';
+import { IBaseCalendarControlProps } from '../CalendarControls';
+import { DateFormat } from '../CalendarControls-utils';
+export type SelectDateHandler = (date: Date) => void;
+export interface IBaseDateSelectorProps extends IBaseCalendarControlProps {
+    /**
+     * Whenever the date is changed, either through direct select, clicking to or navigating, the new date is provided to this function
+     */
+    onDateSelect?: SelectDateHandler;
+    /**
+     * Minimum date allowed to be selected. This will also affect the month navigation
+     */
+    minDate?: ReactDatePickerProps['minDate'];
+    /**
+     * Latest date allowed to be selected. This will also affect the month navigation
+     */
+    maxDate?: ReactDatePickerProps['maxDate'];
+}
+export interface IDateSelectorProps extends IBaseDateSelectorProps, HTMLAttributes<HTMLDivElement> {
+    /**
+     * The callback handler when a Day in the datepicker dropdown is hovered
+     */
+    onDayMouseEnter?: SelectDateHandler;
+    /**
+     * The callback handler for when the mouse leaves the datepicker dropdown
+     */
+    onMonthMouseLeave?: () => void;
+    /**
+     * A day of a week to highlight. It will highlight from Sunday to Saturday of the weeks selected based on rangeOptions
+     */
+    highlightWeek?: Date;
+    /**
+     * Highlight the entire week of the currently selected date, from Sunday to Saturday based on rangeOptions
+     */
+    selectWeek?: boolean;
+    /**
+     * The type of Datepicker custom input button to be displayed. Primary | Secondary | Transparent
+     */
+    buttonType?: ButtonTypes;
+    /**
+     * User preferred date format
+     */
+    dateFormat?: DateFormat;
+}
+export declare const DateSelector: React.FC<IDateSelectorProps>;

package/dist/components/calendar-controls/elements/NavigationButtons.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IBaseDateSelectorProps } from './DateSelector';
+export interface INavigationButtonProps extends IBaseDateSelectorProps {
+    hideTooltipIfDisabled?: boolean;
+}
+export declare const NavigationButtons: (props: INavigationButtonProps) => React.JSX.Element;

package/dist/components/calendar-controls/elements/RangePicker.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { IBaseCalendarControlProps } from '../CalendarControls';
+export interface IRangeProps extends IBaseCalendarControlProps {
+    /**
+     * When a new range has been provided, this callback is triggered
+     */
+    onRangeChange?: (range: RangeType) => void;
+    /**
+     * The list of options that can be chosen from. Current range options are 'day', '3-days', 'week' and 'month'
+     */
+    rangeOptions?: RangeType[];
+}
+export type RangeType = 'day' | '3-days' | '2-weeks' | 'week' | 'month';
+export declare const dateRangeLabel: {
+    day: string;
+    '3-days': string;
+    week: string;
+    '2-weeks': string;
+    month: string;
+};
+export declare const RangePicker: React.FC<IRangeProps>;

package/dist/components/calendar-controls/elements/TodayButton.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface ITodayButtonProps {
+    onClick?: () => void;
+}
+export declare const TodayButton: React.FC<ITodayButtonProps>;