[UILISTS-90] Add stripes-core typings used by ui-lists (#46)

core/index.d.ts

@@ -10,7 +10,7 @@ export const useModules: any;
 export const withModule: any;
 export const withModules: any;
 export const stripesConnect: any;
-export const Pluggable: any;
+export { default as Pluggable, PluggableProps } from './src/Pluggable';
 export const updateUser: any;
 export const coreEvents: any;
 
@@ -20,12 +20,12 @@ export const withOkapiKy: any;
 export const useCustomFields: any;
 export const createReactQueryClient: any;
 export const AppContextMenu: any;
-export const IfInterface: any;
-export const IfPermission: any;
+export { default as IfInterface, IfInterfaceProps } from './src/components/IfInterface';
+export { default as IfPermission, IfPermissionProps } from './src/components/IfPermission';
 export const TitleManager: any;
 export const HandlerManager: any;
 export const IntlConsumer: any;
-export const AppIcon: any;
+export { default as AppIcon, AppIconProps } from './src/components/AppIcon';
 export const Route: any;
 export const Switch: any;
 export const Redirect: any;

core/src/Pluggable.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, FunctionComponent, ReactNode } from 'react';
+
+export interface PluggableProps {
+  /** The plugin to load, i.e. `query-builder` for `@folio/plugin-query-builder` */
+  type: string;
+  /** The plugin's props */
+  [key: string]: any;
+}
+
+/**
+ * Loads a plugin from the Stripes context
+ */
+declare const Pluggable: FunctionComponent<PluggableProps>;
+export default Pluggable;

core/src/Stripes.d.ts

@@ -22,24 +22,19 @@ export interface StripesType {
    * @returns 0, if the interface is available but the requested version is not
    * @see https://github.com/folio-org/stripes/blob/master/doc/dev-guide.md#testing-for-interfaces
    */
-  hasInterface(
-    interface: string,
-    version?: string,
-  ): boolean | string | 0 | undefined;
+  hasInterface(interface: string, version?: string): boolean | string | 0 | undefined;
 
   // TODO: fill this in with additional properties from Stripes object
   // https://github.com/folio-org/stripes/blob/master/doc/dev-guide.md#the-stripes-object
   [key: string]: unknown;
 }
 
+// for use in prop-types
 export const stripesShape: Requireable<StripesType>;
 
 export class Stripes implements StripesType {
   hasPerm(perm: string): boolean | undefined;
-  hasInterface(
-    interface: string,
-    version?: string,
-  ): boolean | string | 0 | undefined;
+  hasInterface(interface: string, version?: string): boolean | string | 0 | undefined;
 
   [key: string]: unknown;
 }

core/src/components/AppIcon/AppIcon.d.ts

@@ -0,0 +1,86 @@
+import { CSSProperties, FunctionComponent, ReactNode } from 'react';
+
+export interface AppIconProps {
+  /** The `alt` attribute for the `img` tag */
+  alt?: string;
+  /**
+   * The lowercase full package name (e.g. `@folio/users`). Using this prop
+   * will load the icon from the Stripes context
+   */
+  app?: string;
+  /** Adds content next to the icon (for labels) */
+  children?: ReactNode;
+  /** Adds a custom class */
+  className?: string;
+  /** Loads icon based on an object; see `src` and `alt` */
+  icon?: {
+    src: string;
+    alt?: string;
+  };
+  /** Vertical alignment of the icon */
+  iconAlignment?: 'center' | 'baseline';
+  /**
+   * If aria-hidden should be applied. This is true by default since most
+   * `<AppIcon>`s are rendered in/near a labelled element, we usually don't
+   * want screen readers to read the `img`'s `alt`
+   */
+  iconAriaHidden?: boolean;
+  /** Custom class on the inner icon element */
+  iconClassName?: string;
+  /** A specific icon key for apps with multiple icons (defaults to `app`) */
+  iconKey?: string;
+  /** The size of the icon */
+  size?: 'small' | 'medium' | 'large';
+  /** The `src` attribute for the `img` tag */
+  src?: string;
+  /** Custom `style` for the component */
+  style?: CSSProperties;
+  /** Use a custom tag for the root element */
+  tag?: string;
+}
+
+/**
+ * Displays an app's icon in various sizes.
+ *
+ * **There are multiple methods for loading icons:**
+ *
+ * 1. Use context (recommended)
+ *   ```js
+ *     import { AppIcon } from '@folio/stripes/core';
+ *
+ *     // Note: Make sure that the AppIcon has "stripes" in context as it relies on stripes.metadata.
+ *     <AppIcon app="@folio/users" size="small" />
+ *   ```
+ *
+ *   Optional: You can supply an iconKey if you need a specific icon within an app. If the specific icon isn't bundled with the app it will simply render a placeholder.
+ *   ```js
+ *     <AppIcon app="@folio/inventory" iconKey="holdings" />
+ *   ```
+ *
+ * 2. Supply an object to the icon prop
+ *   ```js
+ *     const icon = {
+ *       src: '/static/some-icon.png',
+ *       alt: 'My icon',
+ *     };
+ *
+ *     <AppIcon icon={icon} />
+ *   ```
+ *
+ * 3. Pass src and alt as props
+ *   ```js
+ *     <AppIcon
+ *       src="/static/some-icon.png"
+ *       alt="My Icon"
+ *     />
+ *   ```
+ *
+ * Also, you can add a label to the icon by passing it as a child:
+ *   ```js
+ *    <AppIcon>
+ *      Users
+ *    </AppIcon>
+ *   ```
+ */
+declare const AppIcon: FunctionComponent<AppIconProps>;
+export default AppIcon;

core/src/components/AppIcon/index.d.ts

@@ -0,0 +1 @@
+export { default, AppIconProps } from './AppIcon';

core/src/components/IfInterface/IfInterface.d.ts

@@ -0,0 +1,23 @@
+import { FunctionComponent, ReactNode } from 'react';
+
+export interface IfInterfaceProps {
+  /** What should be conditionally rendered */
+  children: ReactNode;
+  /** The interface to check for */
+  name: string;
+  /** The (optional) version to check for (major.minor) */
+  version?: `${number}.${number}`;
+}
+
+/**
+ * Conditionally renders based on the presence of an interface. If the version prop is also
+ * provided, then the interface is required to be available in a version that is compatible
+ * with the specified version (the same major version, and the same or higher minor version).
+ *
+ * @example
+ * <IfInterface name="loan-storage" version="1.0">
+ *   <ViewUserLoans />
+ * </IfInterface>
+ */
+declare const IfInterface: FunctionComponent<IfInterfaceProps>;
+export default IfInterface;

core/src/components/IfInterface/index.d.ts

@@ -0,0 +1 @@
+export { default, IfInterfaceProps } from './IfInterface';

core/src/components/IfPermission/IfPermission.d.ts

@@ -0,0 +1,32 @@
+import { FunctionComponent, ReactNode } from 'react';
+
+export interface IfPermissionProps {
+  /** What should be conditionally rendered */
+  children: ReactNode | (({ hasPermission }: { hasPermission: boolean }) => ReactNode);
+  /** The permission to check for */
+  perm: string;
+}
+
+/**
+ * Conditionally renders based on the existence of a permission.
+ * Supports ReactNodes as children or a render function-prop function.
+ *
+ * If a render function is provided, it will be called with a object
+ * `{ hasPermission: boolean }` as its parameter.
+ *
+ * @example
+ * <IfPermission perm="users.edit">
+ *   <button onClick={this.onClickEditUser}>Edit</button>
+ * </IfPermission>
+ *
+ * @example
+ * <IfPermission perm="users.edit">
+ *   {({ hasPermission }) => hasPermission ?
+ *     <button onClick={this.onClickEditUser}>Edit</button>
+ *     :
+ *     <span>You do not have permission to edit this user!</span>
+ *   }
+ * </IfPermission>
+ */
+declare const IfPermission: FunctionComponent<IfPermissionProps>;
+export default IfPermission;

core/src/components/IfPermission/index.d.ts

@@ -0,0 +1 @@
+export { default, IfPermissionProps } from './IfPermission';