From 783a31f7af0d05918826affbc0b9c08a87f864e6 Mon Sep 17 00:00:00 2001 From: Jimmy Luong Date: Thu, 18 Jan 2018 05:29:55 +1100 Subject: [PATCH] atlaskit: add @atlaskit/dynamic-table and @atlaskit/button types (#22942) * atlaskit: add @atlaskit/dynamic-table types * atlaskit: add @atlaskit/button types --- types/atlaskit/atlaskit-tests.tsx | 57 ++++++++++++ types/atlaskit/index.d.ts | 144 ++++++++++++++++++++++++++++++ types/atlaskit/tsconfig.json | 24 +++++ types/atlaskit/tslint.json | 8 ++ 4 files changed, 233 insertions(+) create mode 100644 types/atlaskit/atlaskit-tests.tsx create mode 100644 types/atlaskit/index.d.ts create mode 100644 types/atlaskit/tsconfig.json create mode 100644 types/atlaskit/tslint.json diff --git a/types/atlaskit/atlaskit-tests.tsx b/types/atlaskit/atlaskit-tests.tsx new file mode 100644 index 0000000000..fc0f005bcc --- /dev/null +++ b/types/atlaskit/atlaskit-tests.tsx @@ -0,0 +1,57 @@ +import { createElement, ReactElement } from "react"; +import * as React from "react"; + +import DynamicTable, { + DynamicTableStateless, + DynamicTableStatelessProps, + RowCell +} from "@atlaskit/dynamic-table"; + +const element =
Some Element
; +const rowCell: RowCell = { + key: "some-key", + content: element +}; +const props: DynamicTableStatelessProps = { + caption: element, + head: { + cells: [ + { + ...rowCell, + isSortable: true, + width: 123, + shouldTruncate: false + } + ] + }, + rows: [ + { + cells: [rowCell] + } + ], + emptyView: element, + loadingSpinnerSize: "large", + isLoading: true, + isFixedSize: false, + rowsPerPage: 123, + onSetPage: page => {}, + onSort: ({ key, item, sortOrder }) => {}, + page: 123, + sortKey: "some-sort-key", + sortOrder: "DESC" +}; + +function testDynamicTableStateless() { + return ; +} + +function testDynamicTable() { + return ( + + ); +} diff --git a/types/atlaskit/index.d.ts b/types/atlaskit/index.d.ts new file mode 100644 index 0000000000..be564fffce --- /dev/null +++ b/types/atlaskit/index.d.ts @@ -0,0 +1,144 @@ +// Type definitions for "@atlaskit/dynamic-table 6.1 +// Project: https://bitbucket.org/atlassian/atlaskit-mk-2/ +// Definitions by: Jimmy Luong +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.4 +declare module "@atlaskit/dynamic-table" { + import { Component, ReactNode, ReactElement } from "react"; + + type RowCell = { + readonly key?: string | number; + readonly content: ReactNode; + }; + + type Row = { + readonly cells: ReadonlyArray; + }; + + type SortOrder = "ASC" | "DESC"; + + type SpinnerSize = "small" | "medium" | "large" | "xlarge"; + + type LoadingSpinnerSize = "small" | "large"; + + type HeadCell = RowCell & { + readonly isSortable?: boolean; + readonly width?: number; + readonly shouldTruncate?: boolean; + }; + + type Head = { + readonly cells: ReadonlyArray; + }; + + type SetPageEventHandler = (page: number) => void; + + type SortEventPayload = { + readonly key: string | number; + readonly item: RowCell; + readonly sortOrder: SortOrder; + }; + + type SortEventHandler = (payload: SortEventPayload) => void; + + type DynamicTableStatelessProps = { + readonly caption?: ReactNode; + readonly head?: Head; + readonly rows?: ReadonlyArray; + readonly emptyView?: ReactElement; + readonly loadingSpinnerSize?: LoadingSpinnerSize; + readonly isLoading?: boolean; + readonly isFixedSize?: boolean; + readonly rowsPerPage?: number; + readonly onSetPage: SetPageEventHandler; + readonly onSort: SortEventHandler; + readonly page?: number; + readonly sortKey?: string; + readonly sortOrder?: SortOrder; + }; + + class DynamicTableStateless extends Component {} + + type DynamicTableProps = DynamicTableStatelessProps & { + readonly defaultPage: number; + readonly defaultSortKey?: string; + readonly defaultSortOrder?: SortOrder; + }; + + type DynamicTableState = { + readonly page: number; + readonly sortKey?: string; + readonly sortOrder?: SortOrder; + }; + + export default class extends Component< + DynamicTableProps, + DynamicTableState + > {} +} + +// Type definitions for "@atlaskit/button 6.2 +// Project: https://bitbucket.org/atlassian/atlaskit-mk-2/ +// Definitions by: Jimmy Luong +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.4 +declare module "@atlaskit/button" { + import { Component, ComponentClass, ReactNode, ReactElement } from "react"; + + type ButtonAppearances = + | "default" + | "danger" + | "link" + | "primary" + | "subtle" + | "subtle-link" + | "warning" + | "help"; + + type ButtonProps = { + /** The base styling to apply to the button. */ + appearance?: ButtonAppearances; + /** Pass aria-controls to underlying html button. */ + ariaControls?: string; + /** Pass aria-expanded to underlying html button. */ + ariaExpanded?: boolean; + /** Pass aria-haspopup to underlying html button. */ + ariaHaspopup?: boolean; + /** This button's child nodes. */ + children?: ReactNode; + /** Add a classname to the button. */ + className?: string; + /** A custom component to use instead of the default button. */ + component?: ComponentClass; + /** Name property of a linked form that the button submits when clicked. */ + form?: string; + /** Provides a url for buttons being used as a link. */ + href?: string; + /** Places an icon within the button, after the button's text. */ + iconAfter?: ReactElement; + /** Places an icon within the button, before the button's text. */ + iconBefore?: ReactElement; + /** Pass a reference on to the styled component */ + innerRef?: any; + /** Provide a unique id to the button. */ + id?: string; + /** Set if the button is disabled. */ + isDisabled?: boolean; + /** Change the style to indicate the button is selected. */ + isSelected?: boolean; + /** Handler to be called on click. */ + onClick?: () => void; + /** Set the amount of padding in the button. */ + spacing?: "compact" | "default" | "none"; + /** Assign specific tabIndex order to the underlying html button. */ + tabIndex?: number; + /** Pass target down to a link within the button component, if a href is provided. */ + target?: string; + /** Set whether it is a button or a form submission. */ + type?: "button" | "submit"; + /** Option to fit button width to its parent width */ + shouldFitContainer?: boolean; + }; + + export default class extends Component {} +} diff --git a/types/atlaskit/tsconfig.json b/types/atlaskit/tsconfig.json new file mode 100644 index 0000000000..087bb13bc2 --- /dev/null +++ b/types/atlaskit/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "jsx": "react", + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "atlaskit-tests.tsx" + ] +} \ No newline at end of file diff --git a/types/atlaskit/tslint.json b/types/atlaskit/tslint.json new file mode 100644 index 0000000000..7496dc87b7 --- /dev/null +++ b/types/atlaskit/tslint.json @@ -0,0 +1,8 @@ +{ + "extends": "dtslint/dt.json", + "rules": { + "no-duplicate-imports": false, + "interface-over-type-literal": false, + "strict-export-declare-modifiers": false + } +}