diff --git a/core/index.d.ts b/core/index.d.ts index 8a324df..bfa235e 100644 --- a/core/index.d.ts +++ b/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; diff --git a/core/src/Pluggable.d.ts b/core/src/Pluggable.d.ts new file mode 100644 index 0000000..cadc65c --- /dev/null +++ b/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; +export default Pluggable; diff --git a/core/src/Stripes.d.ts b/core/src/Stripes.d.ts index c4eb765..d2f1883 100644 --- a/core/src/Stripes.d.ts +++ b/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; 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; } diff --git a/core/src/components/AppIcon/AppIcon.d.ts b/core/src/components/AppIcon/AppIcon.d.ts new file mode 100644 index 0000000..0e551d6 --- /dev/null +++ b/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 + * ``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. + * + * ``` + * + * 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 + * + * ``` + * + * 2. Supply an object to the icon prop + * ```js + * const icon = { + * src: '/static/some-icon.png', + * alt: 'My icon', + * }; + * + * + * ``` + * + * 3. Pass src and alt as props + * ```js + * + * ``` + * + * Also, you can add a label to the icon by passing it as a child: + * ```js + * + * Users + * + * ``` + */ +declare const AppIcon: FunctionComponent; +export default AppIcon; diff --git a/core/src/components/AppIcon/index.d.ts b/core/src/components/AppIcon/index.d.ts new file mode 100644 index 0000000..fde24af --- /dev/null +++ b/core/src/components/AppIcon/index.d.ts @@ -0,0 +1 @@ +export { default, AppIconProps } from './AppIcon'; diff --git a/core/src/components/IfInterface/IfInterface.d.ts b/core/src/components/IfInterface/IfInterface.d.ts new file mode 100644 index 0000000..515dc02 --- /dev/null +++ b/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 + * + * + * + */ +declare const IfInterface: FunctionComponent; +export default IfInterface; diff --git a/core/src/components/IfInterface/index.d.ts b/core/src/components/IfInterface/index.d.ts new file mode 100644 index 0000000..93e6b4f --- /dev/null +++ b/core/src/components/IfInterface/index.d.ts @@ -0,0 +1 @@ +export { default, IfInterfaceProps } from './IfInterface'; diff --git a/core/src/components/IfPermission/IfPermission.d.ts b/core/src/components/IfPermission/IfPermission.d.ts new file mode 100644 index 0000000..4fff6da --- /dev/null +++ b/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 + * + * + * + * + * @example + * + * {({ hasPermission }) => hasPermission ? + * + * : + * You do not have permission to edit this user! + * } + * + */ +declare const IfPermission: FunctionComponent; +export default IfPermission; diff --git a/core/src/components/IfPermission/index.d.ts b/core/src/components/IfPermission/index.d.ts new file mode 100644 index 0000000..5b15b4c --- /dev/null +++ b/core/src/components/IfPermission/index.d.ts @@ -0,0 +1 @@ +export { default, IfPermissionProps } from './IfPermission';