feat: add ts definition (#1473)

Co-authored-by: Vita <51940749+Vita-Meow@users.noreply.github.com>

index.d.ts

@@ -0,0 +1,64 @@
+// Type definitions for fundamental-react 0.14
+// Project: https://sap.github.io/fundamental-react
+// Definitions by: Frank Feinbube <https://github.com/Feinbube>
+//                 Milan Proell <https://github.com/milanpro>
+//                 Auryn Engel <https://github.com/auryn31>
+//                 Shawn Xu <https://github.com/infinitexyy>
+
+export { default as ActionBar } from './types/ActionBar/ActionBar';
+export { default as Avatar } from './types/Avatar/Avatar';
+export { default as Breadcrumb } from './types/Breadcrumb/Breadcrumb';
+export { default as BusyIndicator } from './types/BusyIndicator/BusyIndicator';
+export { default as Button } from './types/Button/Button';
+export { default as ButtonGroup } from './types/Button/ButtonGroup';
+export { default as Calendar } from './types/Calendar/Calendar';
+export { default as ComboboxInput } from './types/ComboboxInput/ComboboxInput';
+export { default as Counter } from './types/Counter/Counter';
+export { default as DatePicker } from './types/DatePicker/DatePicker';
+export { default as Dialog } from './types/Dialog/Dialog';
+export { default as Checkbox } from './types/Forms/Checkbox';
+export { default as FormFieldset } from './types/Forms/FormFieldset';
+export { default as FormGroup } from './types/Forms/FormGroup';
+export { default as FormInput } from './types/Forms/FormInput';
+export { default as FormItem } from './types/Forms/FormItem';
+export { default as FormLabel } from './types/Forms/FormLabel';
+export { default as FormLegend } from './types/Forms/FormLegend';
+export { default as FormRadioGroup } from './types/Forms/FormRadioGroup';
+export { default as FormRadioItem } from './types/Forms/FormRadioItem';
+export { default as FormSelect } from './types/Forms/FormSelect';
+export { default as FormSet } from './types/Forms/FormSet';
+export { default as FormTextarea } from './types/Forms/FormTextarea';
+export { default as Icon } from './types/Icon/Icon';
+export { default as Image } from './types/Image/Image';
+export { default as InfoLabel } from './types/InfoLabel/InfoLabel';
+export { default as InlineHelp } from './types/InlineHelp/InlineHelp';
+export { default as InputGroup } from './types/InputGroup/InputGroup';
+export { default as LayoutPanel } from './types/LayoutPanel/LayoutPanel';
+export { default as Link } from './types/Link/Link';
+export { default as List } from './types/List/List';
+export { default as LocalizationEditor } from './types/LocalizationEditor/LocalizationEditor';
+export { default as Menu } from './types/Menu/Menu';
+export { default as MessageStrip } from './types/MessageStrip/MessageStrip';
+export { default as MultiInput } from './types/MultiInput/MultiInput';
+export { default as ObjectStatus } from './types/ObjectStatus/ObjectStatus';
+export { default as Pagination } from './types/Pagination/Pagination';
+export { default as Popover } from './types/Popover/Popover';
+export { default as SearchInput } from './types/SearchInput/SearchInput';
+export { default as Select } from './types/Select/Select';
+export { default as Shellbar } from './types/Shellbar/Shellbar';
+export { default as SideNav } from './types/SideNavigation/SideNav';
+export { default as StepInput } from './types/StepInput/StepInput';
+export { default as Switch } from './types/Switch/Switch';
+export { default as Tab } from './types/Tabs/Tab';
+export { default as TabGroup } from './types/Tabs/TabGroup';
+export { default as Table } from './types/Table/Table';
+export { default as Tile } from './types/Tile/Tile';
+export { default as Time } from './types/Time/Time';
+export { default as TimePicker } from './types/TimePicker/TimePicker';
+export { default as Title } from './types/Title/Title';
+export { default as Token } from './types/Token/Token';
+export { default as Container } from './types/Container/Container';
+export { default as Row } from './types/Row/Row';
+export { default as Column } from './types/Column/Column';
+export { default as Tree } from './types/Tree/Tree';
+export { default as Wizard } from './types/Wizard/Wizard';

package.json

@@ -5,13 +5,17 @@
   "description": "SAP Fundamental Library, implemented in React",
   "license": "Apache-2.0",
   "main": "lib/index.js",
+  "types": "index.d.ts",
   "homepage": "https://sap.github.io/fundamental-react",
   "repository": {
     "type": "git",
     "url": "https://github.com/SAP/fundamental-react"
   },
   "files": [
-    "lib"
+    "lib",
+    "types",
+    "index.d.ts",
+    "README.md"
   ],
   "scripts": {
     "build:index": "babel-node devtools/buildIndexFiles.js",
@@ -148,6 +152,9 @@
     "react": "^16.8.0 || ^17.0.1 || ^18",
     "react-dom": "^16.8.0 || ^17.0.1 || ^18"
   },
+  "prettier": {
+    "singleQuote": true
+  },
   "browserslist": [
     "last 2 versions",
     "not ie < 11",

types/ActionBar/ActionBar.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+export type ActionBarProps = {
+    title: string;
+    actionClassName?: string | undefined;
+    actionProps?: any;
+    actions?: React.ReactNode | undefined;
+    buttonContainerClassName?: string | undefined;
+    buttonProps?: any;
+    className?: string | undefined;
+    description?: string | undefined;
+    descriptionProps?: any;
+    disableStyles?: boolean | undefined;
+    headingLevel?: any;
+    titleProps?: any;
+    onBackClick?: ((...args: any[]) => any) | undefined;
+} & Pick<
+    React.HTMLAttributes<HTMLDivElement>,
+    Exclude<keyof React.HTMLAttributes<HTMLDivElement>, 'children'>
+>;
+
+export const ActionBar: React.FunctionComponent<ActionBarProps> & {
+    displayName: 'ActionBar';
+};
+
+export default ActionBar;

types/Avatar/Avatar.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+export type AvatarSize = 'xs' | 's' | 'm' | 'l' | 'xl';
+
+type HTMLAttributesColorOmited = Omit<
+    React.HTMLAttributes<HTMLSpanElement>,
+    'color'
+>;
+
+export type AvatarProps = {
+    backgroundImageUrl?: string | undefined;
+    border?: boolean | undefined;
+    circle?: boolean | undefined;
+    color?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | undefined;
+    glyph?: string | undefined;
+    label?: string | undefined;
+    placeholder?: boolean | undefined;
+    role?: string | undefined;
+    size?: AvatarSize | undefined;
+    tile?: boolean | undefined;
+    transparent?: boolean | undefined;
+    zoom?: boolean | undefined;
+} & HTMLAttributesColorOmited;
+
+declare const Avatar: React.FunctionComponent<AvatarProps>;
+
+export default Avatar;

types/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+export type BreadcrumbProps = {
+    disableStyles?: boolean | undefined;
+    ref?: React.Ref<HTMLUListElement> | undefined;
+} & Pick<
+    React.HTMLAttributes<HTMLUListElement>,
+    Exclude<keyof React.HTMLAttributes<HTMLUListElement>, 'className'>
+>;
+
+export type BreadcrumbItemProps = {
+    className?: string | undefined;
+    name?: string | undefined;
+    url?: string | undefined;
+} & React.HTMLAttributes<HTMLLIElement>;
+
+declare const Breadcrumb: React.FunctionComponent<BreadcrumbProps> & {
+    displayName: 'Breadcrumb';
+    Item: React.FunctionComponent<BreadcrumbItemProps> & {
+        displayName: 'Breadcrumb.Item';
+    };
+};
+
+export default Breadcrumb;

types/BusyIndicator/BusyIndicator.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+export type BusyIndicatorSizes = 's' | 'm' | 'l';
+
+export type BusyIndicatorProps = {
+    show: boolean;
+    className?: string | undefined;
+    localizedText?:
+        | {
+              loading?: string | undefined;
+          }
+        | undefined;
+    size?: BusyIndicatorSizes | undefined;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+declare const BusyIndicator: React.FunctionComponent<BusyIndicatorProps>;
+
+export default BusyIndicator;

types/Button/Button.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+export type ButtonOptions = 'emphasized' | 'transparent';
+
+export type ButtonTypes =
+    | 'standard'
+    | 'positive'
+    | 'negative'
+    | 'medium'
+    | 'ghost'
+    | 'attention';
+
+export type ButtonProps = {
+    className?: string | undefined;
+    compact?: boolean | undefined;
+    disabled?: boolean | undefined;
+    disableStyles?: boolean | undefined;
+    glyph?: string | undefined;
+    option?: ButtonOptions | undefined;
+    ref?: React.RefObject<HTMLButtonElement> | undefined;
+    selected?: boolean | undefined;
+    type?: ButtonTypes | undefined;
+    typeAttr?: 'submit' | 'reset' | 'button' | undefined;
+    /** Determines whether the icon should be placed before the text */
+    iconBeforeText?: boolean;
+} & React.HTMLAttributes<HTMLButtonElement>;
+
+declare const Button: React.FunctionComponent<ButtonProps> & {
+    displayName: 'Button';
+};
+
+export default Button;

types/Button/ButtonGroup.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+export type ButtonGroupProps = {
+    disabled?: boolean | undefined;
+    disableStyles?: boolean | undefined;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+declare const ButtonGroup: React.FunctionComponent<ButtonGroupProps> & {
+    displayName: 'ButtonGroup';
+};
+
+export default ButtonGroup;

types/Calendar/Calendar.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+export interface CalendarBaseProps {
+    blockedDates?: Date[] | undefined;
+    disableStyles?: boolean | undefined;
+    disableAfterDate?: Date | undefined;
+    disableBeforeDate?: Date | undefined;
+    disabledDates?: Date[] | undefined;
+    disableFutureDates?: boolean | undefined;
+    disablePastDates?: boolean | undefined;
+    disableWeekday?: string[] | undefined;
+    disableWeekends?: boolean | undefined;
+    localizedText?:
+        | {
+              nextMonth?: string | undefined;
+              previousMonth?: string | undefined;
+              show12NextYears?: string | undefined;
+              show12PreviousYears?: string | undefined;
+          }
+        | undefined;
+}
+
+export type CalendarProps = CalendarBaseProps & {
+    monthListProps?: { [x: string]: any } | undefined;
+    tableBodyProps?: { [x: string]: any } | undefined;
+    tableHeaderProps?: { [x: string]: any } | undefined;
+    tableProps?: { [x: string]: any } | undefined;
+    yearListProps?: { [x: string]: any } | undefined;
+    onChange?: ((date: Date) => void) | undefined;
+} & { [x: string]: any };
+
+declare class Calendar extends React.Component<CalendarProps> {}
+
+export default Calendar;

types/Column/Column.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+type ScreenSize =
+    | 'smallScreen'
+    | 'mediumScreen'
+    | 'largeScreen'
+    | 'xLargeScreen';
+
+export type ColumnSpanOption = number | Record<ScreenSize, number>;
+
+export interface ColumnProps {
+    children: React.ReactNode;
+    className?: string;
+    /** Set to true to have the column automatically occupy the remaining space in the row */
+    full?: boolean;
+    /** How many cells out of 12 should the column be offset by on each screen size. Defaults to none. */
+    offset?: number;
+    /** Are the offsets to be applied before or after the column? default: "before" */
+    offsetPosition?: 'before' | 'after';
+    /** How many cells out of 12 should the column occupy on each screen size. Defaults to 12. */
+    span?: number;
+}
+
+declare const Column: React.FunctionComponent<ColumnProps> & {
+    displayName: 'Column';
+};
+
+export default Column;

types/ComboboxInput/ComboboxInput.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { MenuProps } from '../Menu/Menu';
+
+export type ComboboxInputProps = {
+    buttonProps?: object | undefined;
+    className?: string | undefined;
+    compact?: boolean | undefined;
+    disableStyles?: boolean | undefined;
+    inputProps?: object | undefined;
+    list: React.ReactNode;
+    /* An object containing a `Menu` component. */
+    menu: React.ReactElement<MenuProps>;
+    onClick?:
+        | ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void)
+        | undefined;
+    placeholder?: string | undefined;
+    popoverProps?: object | undefined;
+    validationState?:
+        | {
+              state?:
+                  | 'error'
+                  | 'warning'
+                  | 'information'
+                  | 'success'
+                  | undefined;
+              text?: string | undefined;
+          }
+        | undefined;
+} & { [x: string]: any };
+
+declare const ComboboxInput: React.FunctionComponent<ComboboxInputProps>;
+
+export default ComboboxInput;

types/Container/Container.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+export interface ContainerProps {
+    children: React.ReactNode;
+    className?: string;
+    /** Set to true to remove the margins between the panels */
+    noGap?: boolean;
+}
+
+declare const Container: React.FunctionComponent<ContainerProps> & {
+    displayName: 'Container';
+};
+
+export default Container;

types/Counter/Counter.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export type CounterProps = {
+    disableStyles?: boolean | undefined;
+    localizedText?:
+        | {
+              counterLabel?: string | undefined;
+          }
+        | undefined;
+    notification?: boolean | undefined;
+} & React.HTMLAttributes<HTMLSpanElement>;
+
+declare const Counter: React.FunctionComponent<CounterProps> & {
+    displayName: 'Counter';
+};
+
+export default Counter;