From 4868a0aea30d6edc62d29879d14011acf11a7e92 Mon Sep 17 00:00:00 2001 From: Juan Pablo Lomeli Diaz Date: Wed, 8 May 2019 20:19:42 +0200 Subject: [PATCH] Remove flow (#613) * Converts to ts * fixes * FormGroup * Updates contributing docs * fix story * Removes the index suffix from imports * doc * Remove extra import * Removes types from css.js files * Remaining styles files * Fix build * Fix proptype file imports * Removes prop-types and converts dropdown to ts * Converting Pop from Flow to TypeScript * Completes code coverage * Complete conversion of Pop -> TS Some of this involved fixing the Tests's mock implementation. For TS files, you need to return an object with { default }, the default value being the (mock) component. * Fix TS for Tooltip. Convert other files to TS Update stories import path for `index` * Fix prop ...rest issue for Sortable components * 2.40.0-no-flow-0 * Remove Helix dependency in HsApp.Sidenav. Fix dependency import for popper.js * 2.40.0-no-flow-1 * Fix popper import/export * 2.40.0-no-flow-2 * Removes flow dependencies and converts utils to TS * quick ts fix * TS fixes --- .eslintrc | 2 +- .storybook/.babelrc | 2 - __mocks__/popper.js.js | 12 + babel.config.js | 2 - docs/contributing/creating.md | 185 ++++++++++++--- docs/contributing/setup.md | 4 +- docs/contributing/storybook.md | 2 +- docs/contributing/styling.md | 1 - package-lock.json | 215 +++++++++--------- package.json | 14 +- src/adapters/__tests__/adapters.app.test.js | 4 +- src/adapters/__tests__/adapters.embed.test.js | 4 +- src/adapters/app.js | 4 +- src/adapters/embed.js | 4 +- src/components/Accordion/Accordion.Body.tsx | 4 +- .../Accordion/Accordion.Section.tsx | 2 +- src/components/Accordion/Accordion.Title.tsx | 4 +- src/components/Accordion/Accordion.tsx | 2 +- .../__tests__/Accordion.Body.test.js | 3 +- .../Accordion/{ => styles}/Accordion.css.ts | 14 +- src/components/Alert/Alert.tsx | 2 +- .../Alert/{ => styles}/Alert.css.ts | 10 +- src/components/Animate/Animate.tsx | 6 +- .../Animate/{types.ts => Animate.types.ts} | 0 .../Animate/{utils.ts => Animate.utils.ts} | 0 src/components/Animate/index.ts | 4 +- src/components/AnimateGroup/AnimateGroup.tsx | 4 +- .../{utils.ts => AnimateGroup.utils.ts} | 0 src/components/ArticleCard/ArticleCard.tsx | 2 +- .../{utils.ts => ArticleCard.utils.ts} | 0 .../{Provider.ts => Attachment.Provider.ts} | 0 src/components/Attachment/Attachment.tsx | 10 +- .../{types.ts => Attachment.types.ts} | 0 .../{utils.ts => Attachment.utils.ts} | 0 src/components/Attachment/index.ts | 4 +- .../{index.js => AttachmentList.tsx} | 19 +- .../__tests__/AttachmentList.test.js | 2 +- src/components/AttachmentList/index.ts | 3 + src/components/Avatar/Avatar.Crop.tsx | 2 +- src/components/Avatar/Avatar.Image.tsx | 2 +- src/components/Avatar/Avatar.tsx | 4 +- .../Avatar/{ => styles}/Avatar.css.ts | 10 +- .../{AvatarGrid.js => AvatarGrid.tsx} | 38 ++-- .../{utils.js => AvatarGrid.utils.ts} | 0 .../AvatarGrid/{index.js => index.ts} | 3 +- .../AvatarGrid/styles/AvatarGrid.css.js | 1 - .../styles/AvatarGridContainer.css.js | 1 - .../styles/AvatarGridWrapper.css.js | 1 - src/components/AvatarList/AvatarList.tsx | 2 +- .../{utils.js => AvatarList.utils.ts} | 0 .../AvatarList/styles/AvatarList.css.js | 1 - src/components/AvatarStack/AvatarStack.tsx | 10 +- .../{ => styles}/AvatarStack.css.ts | 4 +- src/components/Badge/{index.js => Badge.tsx} | 23 +- src/components/Badge/index.ts | 3 + src/components/Badge/styles/Badge.css.js | 3 +- src/components/BlankSlate/BlankSlate.tsx | 9 +- .../{utils.ts => BlankSlate.utils.ts} | 0 .../BlankSlate/__tests__/BlankSlate.test.tsx | 4 +- .../BlankSlate/{ => styles}/BlankSlate.css.js | 12 +- .../Button/{Button.js => Button.tsx} | 53 ++--- src/components/Button/Button.types.ts | 13 ++ .../Button/{utils.js => Button.utils.ts} | 0 .../Button/{ButtonV2.js => ButtonV2.tsx} | 63 ++--- src/components/Button/{index.js => index.tsx} | 9 +- .../Button/{ => styles}/Button.css.js | 13 +- src/components/Button/types.js | 22 -- .../Card/{Block.js => Card.Block.tsx} | 28 ++- src/components/Card/{Card.js => Card.tsx} | 49 ++-- .../Card/{utils.js => Card.utils.ts} | 0 .../Card/__tests__/Card.Block.test.js | 2 +- src/components/Card/{index.js => index.ts} | 1 - src/components/Card/styles/Block.css.js | 1 - src/components/Card/styles/Card.css.js | 1 - src/components/CardList/CardList.tsx | 2 +- .../CardList/{utils.ts => CardList.utils.ts} | 0 src/components/Centralize/Centralize.tsx | 2 +- .../Centralize/{ => styles}/Centralize.css.ts | 4 +- .../{Content.js => ChatInbox.Content.tsx} | 11 +- .../{Header.js => ChatInbox.Header.tsx} | 18 +- .../ChatInbox/{ChatInbox.js => ChatInbox.tsx} | 24 +- .../{utils.js => ChatInbox.utils.ts} | 0 ...tent.test.js => ChatInbox.Content.test.js} | 2 +- ...eader.test.js => ChatInbox.Header.test.js} | 3 +- .../ChatInbox/{index.js => index.ts} | 1 - .../ChatInbox/styles/ChatInbox.css.js | 1 - .../ChatInbox/styles/Content.css.js | 1 - src/components/ChatInbox/styles/Header.css.js | 1 - ...{BlankSlate.js => ChatList.BlankSlate.tsx} | 19 +- .../ChatList/{Item.js => ChatList.Item.tsx} | 36 +-- .../ChatList/{ChatList.js => ChatList.tsx} | 17 +- .../ChatList/{utils.js => ChatList.utils.ts} | 0 .../ChatList/__tests__/BlankSlate.test.js | 2 +- .../ChatList/__tests__/ChatList.test.js | 4 +- .../ChatList/__tests__/Item.test.js | 2 +- .../ChatList/{index.js => index.ts} | 1 - .../ChatList/styles/BlankSlate.css.js | 1 - .../ChatList/styles/ChatList.css.js | 1 - src/components/ChatList/styles/Item.css.js | 3 +- .../{ChatSidebar.js => ChatSidebar.tsx} | 33 +-- .../{utils.js => ChatSidebar.utils.ts} | 0 .../ChatSidebar/{index.js => index.ts} | 1 - ...{ChatSidebar.css.js => ChatSidebar.css.ts} | 1 - .../{Item.js => ChatTranscript.Item.tsx} | 47 ++-- ...ineItem.js => ChatTranscript.LineItem.tsx} | 15 +- .../{index.js => ChatTranscript.tsx} | 11 +- ...em.test.js => ChatTranscript.Item.test.js} | 2 +- ...est.js => ChatTranscript.LineItem.test.js} | 2 +- src/components/ChatTranscript/index.ts | 3 + .../Checkbox/{Checkbox.js => Checkbox.tsx} | 9 +- .../Checkbox/{utils.js => Checkbox.utils.ts} | 0 .../Checkbox/{index.js => index.ts} | 1 - .../Choice/{Input.js => Choice.Input.tsx} | 62 +++-- .../Choice/{Choice.js => Choice.tsx} | 89 +++++--- src/components/Choice/Choice.types.ts | 5 + src/components/Choice/Choice.utils.ts | 1 + .../Choice/__tests__/Choice.test.js | 2 +- .../Choice/__tests__/ChoiceInput.test.js | 2 +- src/components/Choice/{index.js => index.ts} | 3 +- src/components/Choice/styles/Choice.css.js | 3 +- src/components/Choice/styles/Input.css.js | 3 +- src/components/Choice/types.js | 12 - src/components/Choice/utils.js | 1 - .../{Context.js => ChoiceGroup.Context.ts} | 0 .../{ChoiceGroup.js => ChoiceGroup.tsx} | 45 ++-- .../{utils.js => ChoiceGroup.utils.ts} | 0 .../ChoiceGroup/{index.js => index.ts} | 3 +- .../ChoiceGroup/styles/ChoiceGroup.css.js | 1 - src/components/CloseButton/CloseButton.tsx | 2 +- .../{ => styles}/CloseButton.css.js | 12 +- src/components/Code/Code.tsx | 2 +- .../Code/{utils.ts => Code.utils.ts} | 0 src/components/Code/index.ts | 4 +- src/components/Code/styles/Code.css.js | 1 - src/components/Collapsible/Collapsible.tsx | 32 +-- .../Collapsible/Collapsible.types.ts | 16 ++ .../{utils.ts => Collapsible.utils.ts} | 0 src/components/Collapsible/index.ts | 2 +- src/components/ComboBox/ComboBox.tsx | 2 +- .../ComboBox/{ => styles}/ComboBox.css.ts | 9 +- .../{Block.js => ControlGroup.Block.tsx} | 11 +- .../{Item.js => ControlGroup.Item.tsx} | 21 +- .../{ControlGroup.js => ControlGroup.tsx} | 17 +- .../{utils.js => ControlGroup.utils.ts} | 0 ...ock.test.js => ControlGroup.Block.test.js} | 4 +- ...Item.test.js => ControlGroup.Item.test.js} | 2 +- .../ControlGroup/{index.js => index.ts} | 1 - .../ControlGroup/styles/ControlGroup.css.js | 1 - .../ControlGroup/styles/Item.css.js | 1 - .../{CopyButton.js => CopyButton.tsx} | 35 ++- .../{utils.js => CopyButton.utils.ts} | 0 .../CopyButton/{index.js => index.ts} | 1 - .../CopyButton/styles/CopyButton.css.js | 1 - .../CopyCode/{CopyCode.js => CopyCode.tsx} | 29 ++- .../CopyCode/{utils.js => CopyCode.utils.ts} | 0 .../CopyCode/{index.js => index.ts} | 1 - .../CopyCode/styles/CopyCode.css.js | 1 - .../CopyInput/{CopyInput.js => CopyInput.tsx} | 21 +- .../{utils.js => CopyInput.utils.ts} | 0 .../CopyInput/{index.js => index.ts} | 1 - .../CopyInput/styles/CopyInput.css.js | 1 - .../{Item.js => DetailList.Item.tsx} | 2 +- .../{Title.js => DetailList.Title.tsx} | 2 +- .../{DetailList.js => DetailList.tsx} | 6 +- .../DetailList/{index.js => index.ts} | 0 .../{Item.test.js => DetailList.Item.test.js} | 2 +- ...Title.test.js => DetailList.Title.test.js} | 2 +- .../{Positioner.js => Drop.Positioner.tsx} | 86 ++++--- src/components/Drop/{index.js => Drop.tsx} | 56 +++-- src/components/Drop/index.ts | 3 + ...tioner.test.js => Drop.Positioner.test.js} | 2 +- .../{Divider.js => Dropdown.Divider.tsx} | 7 +- .../{Header.js => Dropdown.Header.tsx} | 9 +- .../Dropdown/{Item.js => Dropdown.Item.tsx} | 96 +++----- .../Dropdown/{Menu.js => Dropdown.Menu.tsx} | 97 ++++---- .../{Trigger.js => Dropdown.Trigger.tsx} | 23 +- .../Dropdown/{Dropdown.js => Dropdown.tsx} | 83 ++++--- src/components/Dropdown/Dropdown.types.ts | 76 +++++++ .../Dropdown/V2/Dropdown.MenuPortal.tsx | 8 +- ...vider.test.js => Dropdown.Divider.test.js} | 2 +- ...Header.test.js => Dropdown.Header.test.js} | 2 +- .../{Item.test.js => Dropdown.Item.test.js} | 4 +- .../{Menu.test.js => Dropdown.Menu.test.js} | 6 +- ...igger.test.js => Dropdown.Trigger.test.js} | 2 +- .../Dropdown/__tests__/Dropdown.test.js | 2 +- .../Dropdown/{index.js => index.ts} | 0 src/components/Dropdown/types.js | 3 - src/components/Emoticon/Emoticon.tsx | 2 +- .../Emoticon/{ => styles}/Emoticon.css.js | 4 +- .../Flexy/{Block.tsx => Flexy.Block.tsx} | 4 +- .../Flexy/{Item.tsx => Flexy.Item.tsx} | 4 +- src/components/Flexy/Flexy.tsx | 8 +- .../Flexy/{types.ts => Flexy.types.ts} | 0 .../Flexy/{utils.ts => Flexy.utils.ts} | 0 .../{Block.test.js => Flexy.Block.test.js} | 0 .../{Item.test.js => Flexy.Item.test.js} | 0 src/components/Flexy/index.ts | 4 +- .../{Block.css.js => Flexy.Block.css.js} | 3 +- .../styles/{Item.css.js => Flexy.Item.css.js} | 3 +- src/components/Flexy/styles/Flexy.css.js | 5 +- ...{Container.js => FluffyCard.Container.tsx} | 13 +- .../{FluffyCard.js => FluffyCard.tsx} | 45 ++-- src/components/FluffyCard/FluffyCard.types.ts | 1 + .../{utils.js => FluffyCard.utils.ts} | 0 ...r.test.js => FluffyCard.Container.test.js} | 2 +- .../FluffyCard/{index.js => index.ts} | 1 - ...ner.css.js => FluffyCard.Container.css.js} | 1 - .../FluffyCard/styles/FluffyCard.css.js | 1 - src/components/FluffyCard/types.js | 4 - .../FormGroup/{FormGroup.js => FormGroup.tsx} | 13 +- .../{Choice.js => FromGroup.Choice.tsx} | 19 +- .../FormGroup/{Grid.js => FromGroup.Grid.tsx} | 11 +- .../{utils.js => FromGroup.utils.ts} | 0 .../__tests__/FormGroup.Choice.test.js | 4 +- .../FormGroup/__tests__/FormGroup.test.js | 2 +- .../{Grid.test.js => FromGroup.Grid.test.js} | 4 +- .../FormGroup/{index.js => index.ts} | 5 +- src/components/FormGroup/styles/Choice.css.js | 3 +- .../FormGroup/styles/FormGroup.css.js | 3 +- src/components/FormLabel/FormLabel.tsx | 9 +- .../{types.ts => FormLabel.types.ts} | 0 .../{utils.ts => FormLabel.utils.ts} | 0 src/components/FormLabel/index.ts | 2 +- .../GreeterCard/GreeterCard.Button.tsx | 2 +- src/components/GreeterCard/GreeterCard.tsx | 2 +- .../__tests__/GreeterCard.test.tsx | 7 +- .../{ => styles}/GreeterCard.css.ts | 14 +- src/components/GreeterRow/GreeterRow.tsx | 2 +- .../GreeterRow/{ => styles}/GreeterRow.css.ts | 8 +- src/components/Grid/{Col.js => Grid.Col.tsx} | 18 +- .../Grid/{Container.js => Grid.Container.tsx} | 22 +- src/components/Grid/{Row.js => Grid.Row.tsx} | 20 +- src/components/Grid/{Grid.js => Grid.tsx} | 12 +- src/components/Grid/Grid.types.ts | 28 +++ .../Grid/{utils.js => Grid.utils.ts} | 0 .../{Col.test.js => Grid.Col.test.js} | 2 +- ...ntainer.test.js => Grid.Container.test.js} | 2 +- .../{Row.test.js => Grid.Row.test.js} | 2 +- src/components/Grid/__tests__/Grid.test.js | 4 +- src/components/Grid/{index.js => index.ts} | 3 +- .../styles/{Col.css.js => Grid.Col.css.ts} | 4 +- ...Container.css.js => Grid.Container.css.ts} | 6 +- .../styles/{Row.css.js => Grid.Row.css.ts} | 2 +- src/components/Heading/Heading.tsx | 6 +- .../Heading/{types.ts => Heading.types.ts} | 0 .../Heading/{utils.ts => Heading.utils.ts} | 0 src/components/Heading/index.ts | 2 +- .../Heading/{ => styles}/Heading.css.ts | 12 +- .../HelpText/{HelpText.js => HelpText.tsx} | 23 +- .../HelpText/{utils.js => HelpText.utils.ts} | 0 .../HelpText/{index.js => index.ts} | 1 - .../{HelpText.css.js => HelpText.css.ts} | 5 +- .../Highlight/{Highlight.js => Highlight.tsx} | 18 +- .../{utils.js => Highlight.utils.ts} | 0 .../Highlight/{index.js => index.ts} | 1 - .../{Highlight.css.js => Highlight.css.ts} | 1 - src/components/Hr/Hr.tsx | 2 +- src/components/Hr/{utils.ts => Hr.utils.ts} | 0 src/components/Hr/index.ts | 4 +- .../Hr/styles/{Hr.css.js => Hr.css.ts} | 1 - .../HsApp/{Nav.tsx => HsApp.Nav.tsx} | 2 +- .../HsApp/{Sidenav.tsx => HsApp.Sidenav.tsx} | 18 +- src/components/HsApp/HsApp.tsx | 6 +- ...{Sidenav.test.js => HsApp.Sidenav.test.js} | 2 +- src/components/HsApp/__tests__/HsApp.test.js | 4 +- .../HsApp/{ => styles}/HsApp.css.js | 10 +- .../Huzzah/{index.js => Huzzah.tsx} | 35 +-- src/components/Huzzah/Huzzah.utils.ts | 16 ++ .../Huzzah/__tests__/Huzzah.test.js | 3 +- ...getHuzzah.test.js => Huzzah.utils.test.js} | 2 +- src/components/Huzzah/index.ts | 3 + src/components/Icon/{Icon.js => Icon.tsx} | 38 +--- src/components/Icon/Icon.types.ts | 36 +++ .../Icon/{utils.js => Icon.utils.ts} | 5 + .../Icon/__tests__/Icon.load.test.js | 3 +- .../Icon/__tests__/Icon.utils.test.js | 2 +- src/components/Icon/{index.js => index.ts} | 2 - src/components/Icon/styles/Icon.css.js | 7 +- src/components/Icon/types.js | 14 -- src/components/Illo/{Illo.js => Illo.tsx} | 67 +----- src/components/Illo/Illo.types.ts | 16 ++ src/components/Illo/Illo.utils.ts | 43 ++++ .../Illo/__tests__/Illo.load.test.js | 3 +- .../__tests__/injectFillColorIntoSvg.test.js | 2 +- src/components/Illo/{index.js => index.ts} | 2 - src/components/Illo/styles/Illo.css.js | 3 +- src/components/Illo/types.js | 6 - src/components/Illo/utils.js | 1 - src/components/Image/Image.js | 88 ------- src/components/Image/Image.tsx | 48 ++++ src/components/Image/Image.types.ts | 15 ++ src/components/Image/Image.utils.ts | 27 +++ src/components/Image/{index.js => index.ts} | 1 - src/components/Image/utils.js | 1 - .../{index.js => InfiniteScroller.tsx} | 74 +++--- .../InfiniteScroller.types.ts | 16 ++ src/components/InfiniteScroller/index.ts | 3 + src/components/Inline/Inline.Item.tsx | 2 +- src/components/Inline/Inline.tsx | 2 +- .../Inline/{ => styles}/Inline.css.ts | 6 +- .../Input/{AddOn.js => Input.AddOn.tsx} | 18 +- .../{BackdropV2.tsx => Input.BackdropV2.tsx} | 26 +-- .../Input/{Prefix.js => Input.Prefix.tsx} | 14 +- .../Input/{Resizer.tsx => Input.Resizer.tsx} | 17 +- .../Input/{Static.js => Input.Static.tsx} | 18 +- .../Input/{Suffix.js => Input.Suffix.tsx} | 15 +- src/components/Input/{Input.js => Input.tsx} | 130 +++-------- src/components/Input/Input.types.ts | 130 +++++++++++ .../Input/{utils.js => Input.utils.ts} | 17 +- .../{AddOn.test.js => Input.AddOn.test.js} | 2 +- ...ropV2.test.js => Input.BackdropV2.test.js} | 8 +- .../{Prefix.test.js => Input.Prefix.test.js} | 2 +- ...{Resizer.test.js => Input.Resizer.test.js} | 2 +- .../{Static.test.js => Input.Static.test.js} | 2 +- .../{Suffix.test.js => Input.Suffix.test.js} | 2 +- src/components/Input/__tests__/Input.test.js | 2 +- .../{utils.test.js => Input.utils.test.js} | 17 +- src/components/Input/{index.js => index.ts} | 3 +- .../{AddOn.css.js => Input.AddOn.css.js} | 9 +- ...kdropV2.css.ts => Input.BackdropV2.css.ts} | 4 +- .../Input.Resizer.css.ts} | 4 +- .../Input.Static.css.ts} | 8 +- src/components/Input/styles/Input.css.js | 14 +- src/components/Label/{Label.js => Label.tsx} | 21 +- .../Label/{utils.js => Label.utils.ts} | 0 src/components/Label/{index.js => index.ts} | 1 - src/components/Label/styles/Label.css.js | 1 - src/components/Link/Link.tsx | 2 +- src/components/Link/{ => styles}/Link.css.ts | 6 +- src/components/List/List.Item.tsx | 2 +- src/components/List/List.tsx | 2 +- src/components/List/{ => styles}/List.css.ts | 6 +- .../LoadingDots/{index.js => LoadingDots.tsx} | 7 +- .../LoadingDots/__tests__/LoadingDots.test.js | 2 +- src/components/LoadingDots/index.ts | 3 + .../Message/{Action.js => Message.Action.tsx} | 23 +- .../{Attachment.js => Message.Attachment.tsx} | 37 +-- .../Message/{Bubble.js => Message.Bubble.tsx} | 15 +- .../{Caption.js => Message.Caption.tsx} | 22 +- .../Message/{Chat.js => Message.Chat.tsx} | 31 ++- .../{ChatBlock.js => Message.ChatBlock.tsx} | 29 +-- .../{Content.js => Message.Content.tsx} | 13 +- .../Message/{Embed.js => Message.Embed.tsx} | 21 +- .../Message/{Media.js => Message.Media.tsx} | 87 +++---- src/components/Message/Message.Provider.tsx | 32 +++ .../{Question.js => Message.Question.tsx} | 11 +- .../Message/{Message.js => Message.tsx} | 46 ++-- src/components/Message/Message.types.ts | 35 +++ .../Message/{utils.js => Message.utils.ts} | 0 src/components/Message/Provider.js | 23 -- ...{Action.test.js => Message.Action.test.js} | 8 +- ...ent.test.js => Message.Attachment.test.js} | 6 +- ...{Bubble.test.js => Message.Bubble.test.js} | 4 +- ...aption.test.js => Message.Caption.test.js} | 4 +- .../{Chat.test.js => Message.Chat.test.js} | 10 +- ...lock.test.js => Message.ChatBlock.test.js} | 10 +- ...ontent.test.js => Message.Content.test.js} | 6 +- .../{Embed.test.js => Message.Embed.test.js} | 4 +- .../{Media.test.js => Message.Media.test.js} | 8 +- ...vider.test.js => Message.Provider.test.js} | 4 +- ...stion.test.js => Message.Question.test.js} | 6 +- .../Message/__tests__/Message.test.js | 16 +- src/components/Message/{index.js => index.ts} | 3 +- src/components/Message/propTypes.js | 37 --- src/components/Message/styles/Action.css.js | 3 +- .../Message/styles/Attachment.css.js | 3 +- src/components/Message/styles/Bubble.css.js | 3 +- src/components/Message/styles/Chat.css.js | 5 +- .../Message/styles/ChatBlock.css.js | 2 +- src/components/Message/styles/Embed.css.js | 5 +- src/components/Message/styles/Message.css.js | 2 +- src/components/Message/types.js | 43 ---- .../Modal/{Body.js => Modal.Body.tsx} | 23 +- .../Modal/{Content.js => Modal.Content.tsx} | 16 +- .../Modal/{Footer.js => Modal.Footer.tsx} | 19 +- .../Modal/{Header.js => Modal.Header.tsx} | 19 +- .../Modal/{Overlay.js => Modal.Overlay.tsx} | 19 +- src/components/Modal/{Modal.js => Modal.tsx} | 68 ++---- src/components/Modal/Modal.types.ts | 78 +++++++ .../Modal/{utils.js => Modal.utils.ts} | 0 .../{Body.test.js => Modal.Body.test.js} | 2 +- ...{Content.test.js => Modal.Content.test.js} | 4 +- .../{Footer.test.js => Modal.Footer.test.js} | 4 +- .../{Header.test.js => Modal.Header.test.js} | 4 +- .../Modal/__tests__/Modal.integration.test.js | 2 +- src/components/Modal/__tests__/Modal.test.js | 2 +- src/components/Modal/{index.js => index.ts} | 3 +- .../styles/{Body.css.js => Modal.Body.css.js} | 1 - .../{Content.css.js => Modal.Content.css.js} | 1 - .../{Footer.css.js => Modal.Footer.css.js} | 1 - .../{Header.css.js => Modal.Header.css.js} | 1 - src/components/Modal/styles/Modal.css.js | 3 +- src/components/Nav/Nav.Item.tsx | 2 +- src/components/Nav/Nav.tsx | 2 +- src/components/Nav/{ => styles}/Nav.css.ts | 10 +- .../{Timer.tsx => Notification.Timer.tsx} | 2 +- src/components/Notification/Notification.tsx | 6 +- .../{utils.ts => Notification.utils.ts} | 0 ...mer.test.js => Notification.Timer.test.js} | 2 +- .../{ => styles}/Notification.css.js | 10 +- .../NotificationStack/NotificationStack.tsx | 6 +- .../{utils.ts => NotificationStack.utils.ts} | 0 .../{ => styles}/NotificationStack.css.js | 4 +- .../{OptionIcon.js => OptionIcon.tsx} | 17 +- .../{utils.js => OptionIcon.utils.ts} | 0 .../OptionIcon/{index.js => index.ts} | 1 - .../OptionIcon/styles/OptionIcon.css.js | 1 - src/components/OptionTile/Container.js | 4 - .../OptionTile/OptionTile.Container.tsx | 3 + .../{OptionTile.js => OptionTile.tsx} | 26 +-- src/components/OptionTile/OptionTile.types.ts | 13 ++ .../{utils.js => OptionTile.utils.ts} | 0 .../OptionTile/{index.js => index.ts} | 1 - .../OptionTile/styles/OptionTile.css.js | 1 - .../Overflow/{index.js => Overflow.tsx} | 70 +++--- .../Overflow/__tests__/Overflow.test.js | 2 +- src/components/Overflow/index.ts | 3 + .../Overlay/{Overlay.js => Overlay.tsx} | 20 +- .../Overlay/{utils.js => Overlay.utils.ts} | 0 src/components/Overlay/index.js | 6 - src/components/Overlay/index.ts | 3 + src/components/Overlay/styles/Overlay.css.js | 3 +- .../Page/{Actions.tsx => Page.Actions.tsx} | 21 +- .../Page/{Card.tsx => Page.Card.tsx} | 12 +- .../Page/{Content.tsx => Page.Content.tsx} | 13 +- .../Page/{Header.tsx => Page.Header.tsx} | 23 +- .../Page/{Section.tsx => Page.Section.tsx} | 13 +- src/components/Page/Page.tsx | 21 +- src/components/Page/Page.types.ts | 43 ++++ .../Page/{utils.ts => Page.utils.ts} | 0 .../{Actions.test.js => Page.Actions.test.js} | 4 +- .../{Card.test.js => Page.Card.test.js} | 4 +- .../{Content.test.js => Page.Content.test.js} | 4 +- .../{Header.test.js => Page.Header.test.js} | 4 +- .../{Section.test.js => Page.Section.test.js} | 4 +- src/components/Page/__tests__/Page.test.js | 2 +- src/components/Page/index.ts | 2 +- .../{Actions.css.ts => Page.Actions.css.ts} | 2 +- .../styles/{Card.css.ts => Page.Card.css.ts} | 4 +- .../{Content.css.ts => Page.Content.css.ts} | 2 +- .../{Header.css.ts => Page.Header.css.ts} | 4 +- .../{Section.css.ts => Page.Section.css.ts} | 4 +- src/components/Page/styles/Page.css.ts | 4 +- src/components/Page/types.ts | 1 - src/components/Pagination/Pagination.tsx | 2 +- .../Pagination/__tests__/Pagination.test.js | 3 +- .../Pagination/{ => styles}/Pagination.css.js | 10 +- .../Pop/{Arrow.css.js => Arrow.css.ts} | 2 +- src/components/Pop/{Arrow.js => Arrow.tsx} | 28 +-- src/components/Pop/Manager.js | 3 - src/components/Pop/Manager.ts | 3 + src/components/Pop/Pop.Portal.tsx | 6 +- src/components/Pop/{Pop.css.js => Pop.css.ts} | 0 src/components/Pop/{Pop.js => Pop.tsx} | 23 +- src/components/Pop/{types.ts => Pop.types.ts} | 15 +- src/components/Pop/{Popper.js => Popper.tsx} | 38 +++- .../Pop/{Reference.js => Reference.tsx} | 11 +- src/components/Pop/__tests__/Manager.test.js | 2 +- src/components/Pop/__tests__/Pop.test.js | 8 +- src/components/Pop/__tests__/Popper.test.js | 4 +- src/components/Pop/{index.js => index.ts} | 0 .../Popper/{Manager.js => Popper.Manager.tsx} | 19 +- .../{Reference.js => Popper.Reference.tsx} | 18 +- .../Popper/{Popper.js => Popper.tsx} | 96 ++++---- .../Popper/{utils.js => Popper.utils.ts} | 9 +- src/components/Popper/index.js | 26 --- src/components/Popper/index.ts | 9 + .../{Container.js => Portal.Container.tsx} | 2 +- .../Portal/{Portal.js => Portal.tsx} | 48 ++-- src/components/Portal/Portal.types.ts | 12 + .../{tests => __tests__}/Portal.test.js | 0 src/components/Portal/{index.js => index.ts} | 0 src/components/Portal/types.js | 14 -- ...{Content.tsx => PortalWrapper.Content.tsx} | 0 .../{PortalWrapper.js => PortalWrapper.tsx} | 43 +++- ....test.js => PortalWrapper.Content.test.js} | 2 +- .../PortalWrapper/{index.js => index.ts} | 0 .../{Context.js => PreviewCard.Context.ts} | 3 +- .../PreviewCard/{index.js => PreviewCard.tsx} | 15 +- .../PreviewCard/__tests__/PreviewCard.test.js | 4 +- src/components/PreviewCard/index.ts | 3 + .../ProgressBar/{index.js => ProgressBar.tsx} | 50 ++-- .../ProgressBar/__tests__/ProgressBar.test.js | 8 +- src/components/ProgressBar/index.ts | 3 + src/components/PromoCard/PromoCard.tsx | 4 +- .../{utils.js => PromoCard.utils.ts} | 0 .../PromoCard/{ => styles}/PromoCard.css.ts | 8 +- src/components/PropProvider/Context.tsx | 2 +- src/components/PropProvider/PropProvider.tsx | 8 +- .../{types.ts => PropProvider.types.ts} | 0 .../{utils.ts => PropProvider.utils.ts} | 6 +- .../PropProvider/__tests__/utils.test.js | 2 +- .../PropProvider/contextConnect.tsx | 4 +- src/components/PropProvider/index.ts | 2 +- src/components/PropProvider/propConnect.tsx | 4 +- src/components/Radio/{Radio.js => Radio.tsx} | 16 +- src/components/Radio/Radio.types.ts | 1 + .../Radio/{utils.js => Radio.utils.ts} | 0 src/components/Radio/__tests__/Radio.test.js | 2 +- src/components/Radio/index.js | 5 - src/components/Radio/index.ts | 3 + src/components/Radio/types.js | 3 - .../RadioCard/{RadioCard.js => RadioCard.tsx} | 39 +--- src/components/RadioCard/RadioCard.types.ts | 23 ++ .../{utils.js => RadioCard.utils.ts} | 0 .../RadioCard/__tests__/RadioCard.test.js | 2 +- .../RadioCard/{index.js => index.ts} | 1 - .../{RadioCard.css.js => RadioCard.css.ts} | 3 +- src/components/RateAction/RateAction.tsx | 2 +- .../RateAction/{ => styles}/RateAction.css.ts | 6 +- src/components/Route/Route.js | 32 ++- .../{index.js => RouteWrapper.tsx} | 8 +- .../__tests__/RouteWrapper.test.js | 2 +- src/components/RouteWrapper/index.ts | 3 + src/components/Samp/Samp.tsx | 2 +- .../Samp/{utils.ts => Samp.utils.ts} | 0 src/components/Samp/index.ts | 4 +- src/components/Scrollable/Scrollable.tsx | 2 +- .../Scrollable/{ => styles}/Scrollable.css.ts | 2 +- src/components/Select/Select.Arrows.tsx | 10 +- .../Select/{Select.js => Select.tsx} | 118 +++------- src/components/Select/Select.types.ts | 70 ++++++ .../Select/{utils.js => Select.utils.ts} | 0 .../Select/__tests__/Select.test.js | 2 +- src/components/Select/index.js | 5 - src/components/Select/index.ts | 3 + .../Select/{ => styles}/Select.css.ts | 8 +- src/components/Select/types.js | 15 -- .../SelectDropdown/SelectDropdown.tsx | 28 +-- .../SelectDropdown/SelectDropdown.types.ts | 16 ++ .../{ => styles}/SelectDropdown.css.ts | 4 +- .../{Button.tsx => SideNavigation.Button.tsx} | 17 +- ....tsx => SideNavigation.DropdownFooter.tsx} | 17 +- ....tsx => SideNavigation.DropdownHeader.tsx} | 16 +- ...InOut.tsx => SideNavigation.FadeInOut.tsx} | 12 +- .../{Footer.tsx => SideNavigation.Footer.tsx} | 14 +- .../{Header.tsx => SideNavigation.Header.tsx} | 17 +- ...Heading.tsx => SideNavigation.Heading.tsx} | 9 +- .../{Item.tsx => SideNavigation.Item.tsx} | 22 +- ...Section.tsx => SideNavigation.Section.tsx} | 13 +- .../SideNavigation/SideNavigation.tsx | 40 ++-- .../SideNavigation/SideNavigation.types.ts | 78 +++++++ .../__tests__/SideNavigation.Button.test.js | 4 +- .../SideNavigation.DropdownFooter.test.js | 4 +- .../SideNavigation.DropdownHeader.test.js | 7 +- .../SideNavigation.FadeInOut.test.js | 5 +- .../__tests__/SideNavigation.Footer.test.js | 2 +- .../__tests__/SideNavigation.Header.test.js | 6 +- .../__tests__/SideNavigation.Item.test.js | 5 +- .../__tests__/SideNavigation.Section.test.js | 6 +- .../__tests__/SideNavigation.test.js | 2 +- .../{ => styles}/SideNavigation.css.js | 18 +- .../{index.js => SidebarCollapsibleCard.tsx} | 67 +++--- .../SidebarCollapsibleCard.types.ts | 15 ++ .../SidebarCollapsibleCard.test.js | 2 +- .../SidebarCollapsibleCard/index.ts | 3 + .../{Avatar.js => Skeleton.Avatar.tsx} | 19 +- .../Skeleton/{Block.js => Skeleton.Block.tsx} | 8 +- .../{Control.js => Skeleton.Control.tsx} | 8 +- .../{Heading.js => Skeleton.Heading.tsx} | 9 +- .../Skeleton/{Image.js => Skeleton.Image.tsx} | 8 +- .../{Paragraph.js => Skeleton.Paragraph.tsx} | 8 +- .../Skeleton/{Text.js => Skeleton.Text.tsx} | 9 +- .../Skeleton/{utils.js => Skeleton.utils.ts} | 0 ...Avatar.test.js => Skeleton.Avatar.test.js} | 4 +- .../{Block.test.js => Skeleton.Block.test.js} | 4 +- ...ntrol.test.js => Skeleton.Control.test.js} | 4 +- ...ading.test.js => Skeleton.Heading.test.js} | 4 +- .../{Image.test.js => Skeleton.Image.test.js} | 4 +- ...aph.test.js => Skeleton.Paragraph.test.js} | 6 +- .../{Text.test.js => Skeleton.Text.test.js} | 4 +- src/components/Skeleton/index.js | 23 -- src/components/Skeleton/index.ts | 22 ++ .../{Avatar.css.js => Skeleton.Avatar.css.ts} | 4 +- .../{Block.css.js => Skeleton.Block.css.ts} | 0 ...Control.css.js => Skeleton.Control.css.ts} | 2 +- .../{Image.css.js => Skeleton.Image.css.ts} | 2 +- .../{Text.css.js => Skeleton.Text.css.ts} | 2 +- .../{index.js => SleepDetector.tsx} | 45 ++-- .../SleepDetector.test.js | 4 +- src/components/SleepDetector/index.ts | 3 + ...{DragHandle.js => Sortable.DragHandle.tsx} | 15 +- .../Sortable/{Item.js => Sortable.Item.tsx} | 18 +- .../Sortable/{List.js => Sortable.List.tsx} | 13 +- .../Sortable/{index.js => Sortable.tsx} | 47 ++-- src/components/Sortable/Sortable.types.ts | 22 ++ .../Sortable.DragHandle.test.js} | 4 +- .../Sortable.List.test.js} | 4 +- .../{tests => __tests__}/Sortable.test.js | 8 +- src/components/Sortable/index.ts | 3 + src/components/Sortable/propTypes.js | 30 --- src/components/Spinner/Spinner.tsx | 14 +- src/components/Spinner/Spinner.types.ts | 8 + .../Spinner/{ => styles}/Spinner.css.ts | 4 +- src/components/SplitButton/SplitButton.tsx | 2 +- .../{ => styles}/SplitButton.css.ts | 8 +- .../{StatusAvatar.js => StatusAvatar.tsx} | 20 +- .../{utils.js => StatusAvatar.utils.ts} | 0 .../__tests__/StatusAvatar.test.js | 2 +- src/components/StatusAvatar/index.js | 5 - src/components/StatusAvatar/index.ts | 3 + .../StatusBadge/{index.js => StatusBadge.tsx} | 11 +- .../StatusBadge/StatusBadge.types.ts | 8 + src/components/StatusBadge/index.ts | 3 + src/components/StatusBadge/propTypes.js | 11 - .../StatusBadge/tests/StatusBadge.test.js | 2 +- .../{Button.js => StatusBar.Button.tsx} | 8 +- .../StatusBar/{index.js => StatusBar.tsx} | 47 ++-- src/components/StatusBar/StatusBar.types.ts | 15 ++ .../StatusBar.Button.test.js} | 4 +- .../{tests => __tests__}/StatusBar.test.js | 4 +- src/components/StatusBar/index.ts | 3 + src/components/StatusBar/propTypes.js | 3 - .../StatusDot/{StatusDot.js => StatusDot.tsx} | 35 ++- src/components/StatusDot/StatusDot.types.ts | 9 + .../{utils.js => StatusDot.utils.ts} | 0 .../StatusDot/__tests__/StatusDot.test.js | 4 +- src/components/StatusDot/index.js | 5 - src/components/StatusDot/index.ts | 3 + .../{StatusDot.css.js => StatusDot.css.ts} | 3 +- src/components/StatusDot/types.js | 12 - src/components/Stepper/Stepper.Progress.tsx | 2 +- src/components/Stepper/Stepper.Step.tsx | 2 +- src/components/Stepper/Stepper.tsx | 2 +- .../Stepper/__tests__/Stepper.test.tsx | 4 +- .../Stepper/{ => styles}/Stepper.css.ts | 8 +- src/components/Switch/Switch.tsx | 6 +- .../Switch/{types.ts => Switch.types.ts} | 0 .../Switch/{utils.ts => Switch.utils.ts} | 0 src/components/Switch/index.ts | 2 +- src/components/Switch/styles/Switch.css.js | 9 +- src/components/TabBar/TabBar.tsx | 2 +- .../TabBar/__tests__/TabBar.test.tsx | 2 +- .../TabBar/{ => styles}/TabBar.css.ts | 10 +- .../Table/{Cell.tsx => Table.Cell.tsx} | 2 +- .../{HeaderCell.tsx => Table.HeaderCell.tsx} | 2 +- .../Table/{Row.tsx => Table.Row.tsx} | 4 +- src/components/Table/Table.tsx | 6 +- .../Table/{types.ts => Table.types.ts} | 0 src/components/Tag/Tag.tsx | 2 +- src/components/Tag/{ => styles}/Tag.css.ts | 20 +- src/components/TagList/TagList.tsx | 2 +- .../TagList/__tests__/TagList.test.js | 2 +- .../TagList/{ => styles}/TagList.css.ts | 8 +- src/components/Text/Text.tsx | 4 +- .../Text/{types.ts => Text.types.ts} | 0 .../Text/{utils.ts => Text.utils.ts} | 0 src/components/Text/index.ts | 2 +- .../Timeline/{Item.js => Timeline.Item.tsx} | 11 +- .../Timeline/{Timeline.js => Timeline.tsx} | 11 +- .../{Item.test.js => Timeline.Item.test.js} | 4 +- .../Timeline/__tests__/Timeline.test.js | 2 +- .../Timeline/{index.js => index.ts} | 1 - .../Timestamp/{Time.js => Timestamp.Time.tsx} | 19 +- .../Timestamp/{index.js => Timestamp.tsx} | 27 ++- src/components/Timestamp/Timestamp.types.ts | 1 + .../Timestamp/__tests__/Timestamp.test.js | 4 +- src/components/Timestamp/index.ts | 3 + src/components/Timestamp/types.js | 1 - src/components/Toolbar/Toolbar.Shadow.tsx | 2 +- src/components/Toolbar/Toolbar.tsx | 2 +- .../Toolbar/{ => styles}/Toolbar.css.ts | 15 +- src/components/Toolbar/types.js | 14 -- src/components/Tooltip/Tooltip.Popper.tsx | 2 +- src/components/Tooltip/Tooltip.tsx | 4 +- .../Tooltip/__tests__/Tooltip.Pop.test.js | 2 +- .../Tooltip/{ => styles}/Tooltip.css.ts | 8 +- .../Truncate/{index.js => Truncate.tsx} | 60 ++--- src/components/Truncate/Truncate.types.ts | 19 ++ .../Truncate/__tests__/Truncate.test.js | 4 +- src/components/Truncate/index.ts | 3 + .../{index.js => VisuallyHidden.tsx} | 13 +- .../__tests__/VisuallyHidden.test.js | 2 +- src/components/VisuallyHidden/index.ts | 3 + ...llyHidden.css.js => VisuallyHidden.css.ts} | 0 src/components/{index.js => index.ts} | 0 .../styled/{testHelpers.js => testHelpers.ts} | 9 +- src/constants/{Keys.js => Keys.ts} | 0 src/constants/{index.js => index.ts} | 0 src/constants/propTypes.js | 29 --- src/styles/mixins/breakpoints.css.js | 18 +- src/styles/mixins/cardStyles.css.js | 3 +- src/styles/mixins/linkStyles.css.js | 1 - src/styles/mixins/stateStyles.css.js | 2 +- src/styles/mixins/visuallyHidden.css.js | 1 - src/styles/resets/base.css.js | 1 - src/styles/resets/baseStyles.css.js | 1 - src/styles/resets/font.css.js | 1 - src/styles/resets/fontFamily.css.js | 1 - src/styles/utilities/theme.ts | 5 +- src/utilities/__tests__/memoize.test.ts | 4 +- src/utilities/{check.js => check.ts} | 0 src/utilities/{clipboard.js => clipboard.ts} | 11 +- src/utilities/{color.js => color.ts} | 6 + src/utilities/{events.js => events.ts} | 6 +- src/utilities/{focus.js => focus.ts} | 10 +- src/utilities/{get.js => get.ts} | 0 .../{globalManager.js => globalManager.ts} | 0 src/utilities/{id.js => id.ts} | 7 +- src/utilities/{images.js => images.ts} | 12 +- src/utilities/{index.js => index.ts} | 0 src/utilities/log.js | 44 ---- src/utilities/log.ts | 37 +++ .../{memoizeOne.js => memoizeOne.ts} | 12 +- src/utilities/node.ts | 10 +- .../{nodePosition.js => nodePosition.ts} | 2 +- src/utilities/{number.js => number.ts} | 4 +- src/utilities/pkg.ts | 2 +- src/utilities/popper.lib.js | 9 + .../{scrollFade.js => scrollFade.ts} | 0 src/utilities/{scrolling.js => scrolling.ts} | 9 +- .../{smoothScroll.js => smoothScroll.ts} | 1 + src/utilities/{timestamp.js => timestamp.ts} | 0 stories/Alert.stories.js | 2 +- stories/Animate.stories.js | 2 +- stories/AnimateGroup.stories.js | 2 +- stories/ArticleCard.stories.js | 2 +- stories/Attachment.stories.js | 2 +- stories/AttachmentList.stories.js | 2 +- stories/Avatar/Avatar.stories.js | 2 +- stories/Avatar/AvatarV2.stories.js | 2 +- stories/AvatarGrid/AvatarGrid.stories.js | 2 +- stories/AvatarList.stories.js | 2 +- stories/AvatarStack.stories.js | 2 +- stories/AvatarStackV2.stories.js | 2 +- stories/Badge.stories.js | 2 +- stories/BlankSlate.stories.js | 2 +- stories/Button.stories.js | 2 +- stories/ButtonV2.stories.js | 2 +- stories/Card.stories.js | 2 +- stories/CardList.stories.js | 2 +- stories/ChatInbox.stories.js | 2 +- stories/ChatList/ChatList.stories.js | 2 +- stories/ChatList/ChatListItemStateExample.js | 2 +- stories/ChatScroller.stories.js | 2 +- stories/ChatSidebar.stories.js | 2 +- .../ChatTranscript/ChatTranscript.stories.js | 2 +- stories/Checkbox.stories.js | 2 +- stories/CloseButton.stories.js | 2 +- stories/Code.stories.js | 2 +- stories/Collapsible.stories.js | 2 +- stories/ControlGroup.stories.js | 2 +- stories/CopyButton.stories.js | 2 +- stories/CopyCode.stories.js | 2 +- stories/CopyInput.stories.js | 2 +- stories/DetailList.stories.js | 2 +- stories/Dropdown.stories.js | 2 +- stories/EmbedChat.stories.js | 2 +- stories/Emoticon.stories.js | 2 +- stories/Flexy.stories.js | 2 +- stories/FluffyCard.stories.js | 2 +- stories/FormLabel.stories.js | 2 +- stories/Grid.stories.js | 2 +- stories/Highlight/Highlight.stories.js | 2 +- stories/HsApp.stories.js | 2 +- stories/Huzzah.stories.js | 2 +- stories/Icon.stories.js | 2 +- stories/Illo.stories.js | 2 +- stories/Image.stories.js | 2 +- stories/InfiniteScroller.stories.js | 2 +- stories/Input.stories.js | 2 +- stories/Link.stories.js | 2 +- stories/List.stories.js | 2 +- stories/LoadingDots.stories.js | 2 +- stories/Message/Message.Attachment.stories.js | 2 +- stories/Message/Message.Chat.stories.js | 2 +- stories/Message/Message.Embed.stories.js | 2 +- stories/Message/Message.Media.old.stories.js | 2 +- stories/Message/Message.Media.stories.js | 2 +- stories/Message/Message.Provider.stories.js | 2 +- stories/Message/Message.default.stories.js | 2 +- stories/Message/Message.stories.js | 2 +- stories/Modal.stories.js | 5 +- stories/NavLink.stories.js | 2 +- stories/Notification.stories.js | 2 +- stories/NotificationStack.stories.js | 2 +- stories/OptionIcon.stories.js | 2 +- stories/OptionTile.stories.js | 2 +- stories/Overflow.stories.js | 2 +- stories/Overlay.stories.js | 2 +- stories/Page/Page.Actions.stories.js | 2 +- stories/Page/Page.Card.stories.js | 2 +- stories/Page/Page.Example.stories.js | 2 +- stories/Page/Page.Header.stories.js | 2 +- stories/Page/Page.Section.stories.js | 2 +- stories/PreviewCard.stories.js | 2 +- stories/ProgressBar.stories.js | 2 +- stories/PromoCard.stories.js | 2 +- stories/Radio.stories.js | 2 +- stories/RadioCard.stories.js | 2 +- stories/Samp.stories.js | 2 +- stories/ScrollLock.stories.js | 2 +- stories/Scrollable.stories.js | 2 +- stories/Select.stories.js | 2 +- stories/SideNavigation.stories.js | 16 +- stories/SidebarCollapsibleCard.stories.js | 2 +- stories/Skeleton.stories.js | 2 +- stories/Sortable.stories.js | 2 +- stories/Spinner.stories.js | 2 +- stories/StatusAvatar.stories.js | 2 +- stories/StatusBadge.stories.js | 2 +- stories/StatusBar.stories.js | 2 +- stories/StatusDot.stories.js | 2 +- stories/Switch.stories.js | 2 +- stories/TabBar.stories.js | 2 +- stories/Table/Table.stories.js | 2 +- stories/Table/TablePlayground.js | 2 +- stories/Table/TableWithPagination.js | 2 +- stories/Table/TableWithSorting.js | 2 +- stories/Tag/Tag.stories.js | 2 +- stories/TagList.stories.js | 2 +- stories/Timeline.stories.js | 2 +- stories/Timestamp.stories.js | 2 +- stories/Toolbar.stories.js | 2 +- stories/Truncate.stories.js | 2 +- stories/VisuallyHidden.stories.js | 2 +- 816 files changed, 4113 insertions(+), 3883 deletions(-) create mode 100644 __mocks__/popper.js.js rename src/components/Accordion/{ => styles}/Accordion.css.ts (80%) rename src/components/Alert/{ => styles}/Alert.css.ts (87%) rename src/components/Animate/{types.ts => Animate.types.ts} (100%) rename src/components/Animate/{utils.ts => Animate.utils.ts} (100%) rename src/components/AnimateGroup/{utils.ts => AnimateGroup.utils.ts} (100%) rename src/components/ArticleCard/{utils.ts => ArticleCard.utils.ts} (100%) rename src/components/Attachment/{Provider.ts => Attachment.Provider.ts} (100%) rename src/components/Attachment/{types.ts => Attachment.types.ts} (100%) rename src/components/Attachment/{utils.ts => Attachment.utils.ts} (100%) rename src/components/AttachmentList/{index.js => AttachmentList.tsx} (92%) create mode 100644 src/components/AttachmentList/index.ts rename src/components/Avatar/{ => styles}/Avatar.css.ts (92%) rename src/components/AvatarGrid/{AvatarGrid.js => AvatarGrid.tsx} (85%) rename src/components/AvatarGrid/{utils.js => AvatarGrid.utils.ts} (100%) rename src/components/AvatarGrid/{index.js => index.ts} (62%) rename src/components/AvatarList/{utils.js => AvatarList.utils.ts} (100%) rename src/components/AvatarStack/{ => styles}/AvatarStack.css.ts (85%) rename src/components/Badge/{index.js => Badge.tsx} (74%) create mode 100644 src/components/Badge/index.ts rename src/components/BlankSlate/{utils.ts => BlankSlate.utils.ts} (100%) rename src/components/BlankSlate/{ => styles}/BlankSlate.css.js (76%) rename src/components/Button/{Button.js => Button.tsx} (74%) create mode 100644 src/components/Button/Button.types.ts rename src/components/Button/{utils.js => Button.utils.ts} (100%) rename src/components/Button/{ButtonV2.js => ButtonV2.tsx} (82%) rename src/components/Button/{index.js => index.tsx} (71%) rename src/components/Button/{ => styles}/Button.css.js (97%) delete mode 100644 src/components/Button/types.js rename src/components/Card/{Block.js => Card.Block.tsx} (78%) rename src/components/Card/{Card.js => Card.tsx} (74%) rename src/components/Card/{utils.js => Card.utils.ts} (100%) rename src/components/Card/{index.js => index.ts} (92%) rename src/components/CardList/{utils.ts => CardList.utils.ts} (100%) rename src/components/Centralize/{ => styles}/Centralize.css.ts (63%) rename src/components/ChatInbox/{Content.js => ChatInbox.Content.tsx} (78%) rename src/components/ChatInbox/{Header.js => ChatInbox.Header.tsx} (88%) rename src/components/ChatInbox/{ChatInbox.js => ChatInbox.tsx} (80%) rename src/components/ChatInbox/{utils.js => ChatInbox.utils.ts} (100%) rename src/components/ChatInbox/__tests__/{Content.test.js => ChatInbox.Content.test.js} (94%) rename src/components/ChatInbox/__tests__/{Header.test.js => ChatInbox.Header.test.js} (97%) rename src/components/ChatInbox/{index.js => index.ts} (96%) rename src/components/ChatList/{BlankSlate.js => ChatList.BlankSlate.tsx} (80%) rename src/components/ChatList/{Item.js => ChatList.Item.tsx} (92%) rename src/components/ChatList/{ChatList.js => ChatList.tsx} (71%) rename src/components/ChatList/{utils.js => ChatList.utils.ts} (100%) rename src/components/ChatList/{index.js => index.ts} (96%) rename src/components/ChatSidebar/{ChatSidebar.js => ChatSidebar.tsx} (86%) rename src/components/ChatSidebar/{utils.js => ChatSidebar.utils.ts} (100%) rename src/components/ChatSidebar/{index.js => index.ts} (94%) rename src/components/ChatSidebar/styles/{ChatSidebar.css.js => ChatSidebar.css.ts} (98%) rename src/components/ChatTranscript/{Item.js => ChatTranscript.Item.tsx} (86%) rename src/components/ChatTranscript/{LineItem.js => ChatTranscript.LineItem.tsx} (89%) rename src/components/ChatTranscript/{index.js => ChatTranscript.tsx} (67%) rename src/components/ChatTranscript/__tests__/{Item.test.js => ChatTranscript.Item.test.js} (99%) rename src/components/ChatTranscript/__tests__/{LineItem.test.js => ChatTranscript.LineItem.test.js} (98%) create mode 100644 src/components/ChatTranscript/index.ts rename src/components/Checkbox/{Checkbox.js => Checkbox.tsx} (75%) rename src/components/Checkbox/{utils.js => Checkbox.utils.ts} (100%) rename src/components/Checkbox/{index.js => index.ts} (93%) rename src/components/Choice/{Input.js => Choice.Input.tsx} (78%) rename src/components/Choice/{Choice.js => Choice.tsx} (79%) create mode 100644 src/components/Choice/Choice.types.ts create mode 100644 src/components/Choice/Choice.utils.ts rename src/components/Choice/{index.js => index.ts} (72%) delete mode 100644 src/components/Choice/types.js delete mode 100644 src/components/Choice/utils.js rename src/components/ChoiceGroup/{Context.js => ChoiceGroup.Context.ts} (100%) rename src/components/ChoiceGroup/{ChoiceGroup.js => ChoiceGroup.tsx} (83%) rename src/components/ChoiceGroup/{utils.js => ChoiceGroup.utils.ts} (100%) rename src/components/ChoiceGroup/{index.js => index.ts} (73%) rename src/components/CloseButton/{ => styles}/CloseButton.css.js (85%) rename src/components/Code/{utils.ts => Code.utils.ts} (100%) create mode 100644 src/components/Collapsible/Collapsible.types.ts rename src/components/Collapsible/{utils.ts => Collapsible.utils.ts} (100%) rename src/components/ComboBox/{ => styles}/ComboBox.css.ts (70%) rename src/components/ControlGroup/{Block.js => ControlGroup.Block.tsx} (68%) rename src/components/ControlGroup/{Item.js => ControlGroup.Item.tsx} (80%) rename src/components/ControlGroup/{ControlGroup.js => ControlGroup.tsx} (78%) rename src/components/ControlGroup/{utils.js => ControlGroup.utils.ts} (100%) rename src/components/ControlGroup/__tests__/{Block.test.js => ControlGroup.Block.test.js} (92%) rename src/components/ControlGroup/__tests__/{Item.test.js => ControlGroup.Item.test.js} (97%) rename src/components/ControlGroup/{index.js => index.ts} (97%) rename src/components/CopyButton/{CopyButton.js => CopyButton.tsx} (83%) rename src/components/CopyButton/{utils.js => CopyButton.utils.ts} (100%) rename src/components/CopyButton/{index.js => index.ts} (93%) rename src/components/CopyCode/{CopyCode.js => CopyCode.tsx} (83%) rename src/components/CopyCode/{utils.js => CopyCode.utils.ts} (100%) rename src/components/CopyCode/{index.js => index.ts} (93%) rename src/components/CopyInput/{CopyInput.js => CopyInput.tsx} (81%) rename src/components/CopyInput/{utils.js => CopyInput.utils.ts} (100%) rename src/components/CopyInput/{index.js => index.ts} (93%) rename src/components/DetailList/{Item.js => DetailList.Item.tsx} (91%) rename src/components/DetailList/{Title.js => DetailList.Title.tsx} (92%) rename src/components/DetailList/{DetailList.js => DetailList.tsx} (79%) rename src/components/DetailList/{index.js => index.ts} (100%) rename src/components/DetailList/tests/{Item.test.js => DetailList.Item.test.js} (95%) rename src/components/DetailList/tests/{Title.test.js => DetailList.Title.test.js} (95%) rename src/components/Drop/{Positioner.js => Drop.Positioner.tsx} (73%) rename src/components/Drop/{index.js => Drop.tsx} (70%) create mode 100644 src/components/Drop/index.ts rename src/components/Drop/tests/{Positioner.test.js => Drop.Positioner.test.js} (99%) rename src/components/Dropdown/{Divider.js => Dropdown.Divider.tsx} (81%) rename src/components/Dropdown/{Header.js => Dropdown.Header.tsx} (78%) rename src/components/Dropdown/{Item.js => Dropdown.Item.tsx} (70%) rename src/components/Dropdown/{Menu.js => Dropdown.Menu.tsx} (85%) rename src/components/Dropdown/{Trigger.js => Dropdown.Trigger.tsx} (78%) rename src/components/Dropdown/{Dropdown.js => Dropdown.tsx} (80%) create mode 100644 src/components/Dropdown/Dropdown.types.ts rename src/components/Dropdown/__tests__/{Divider.test.js => Dropdown.Divider.test.js} (92%) rename src/components/Dropdown/__tests__/{Header.test.js => Dropdown.Header.test.js} (95%) rename src/components/Dropdown/__tests__/{Item.test.js => Dropdown.Item.test.js} (98%) rename src/components/Dropdown/__tests__/{Menu.test.js => Dropdown.Menu.test.js} (99%) rename src/components/Dropdown/__tests__/{Trigger.test.js => Dropdown.Trigger.test.js} (98%) rename src/components/Dropdown/{index.js => index.ts} (100%) delete mode 100644 src/components/Dropdown/types.js rename src/components/Emoticon/{ => styles}/Emoticon.css.js (96%) rename src/components/Flexy/{Block.tsx => Flexy.Block.tsx} (87%) rename src/components/Flexy/{Item.tsx => Flexy.Item.tsx} (89%) rename src/components/Flexy/{types.ts => Flexy.types.ts} (100%) rename src/components/Flexy/{utils.ts => Flexy.utils.ts} (100%) rename src/components/Flexy/__tests__/{Block.test.js => Flexy.Block.test.js} (100%) rename src/components/Flexy/__tests__/{Item.test.js => Flexy.Item.test.js} (100%) rename src/components/Flexy/styles/{Block.css.js => Flexy.Block.css.js} (74%) rename src/components/Flexy/styles/{Item.css.js => Flexy.Item.css.js} (81%) rename src/components/FluffyCard/{Container.js => FluffyCard.Container.tsx} (70%) rename src/components/FluffyCard/{FluffyCard.js => FluffyCard.tsx} (58%) create mode 100644 src/components/FluffyCard/FluffyCard.types.ts rename src/components/FluffyCard/{utils.js => FluffyCard.utils.ts} (100%) rename src/components/FluffyCard/__tests__/{Container.test.js => FluffyCard.Container.test.js} (94%) rename src/components/FluffyCard/{index.js => index.ts} (96%) rename src/components/FluffyCard/styles/{Container.css.js => FluffyCard.Container.css.js} (95%) delete mode 100644 src/components/FluffyCard/types.js rename src/components/FormGroup/{FormGroup.js => FormGroup.tsx} (71%) rename src/components/FormGroup/{Choice.js => FromGroup.Choice.tsx} (73%) rename src/components/FormGroup/{Grid.js => FromGroup.Grid.tsx} (76%) rename src/components/FormGroup/{utils.js => FromGroup.utils.ts} (100%) rename src/components/FormGroup/__tests__/{Grid.test.js => FromGroup.Grid.test.js} (94%) rename src/components/FormGroup/{index.js => index.ts} (76%) rename src/components/FormLabel/{types.ts => FormLabel.types.ts} (100%) rename src/components/FormLabel/{utils.ts => FormLabel.utils.ts} (100%) rename src/components/GreeterCard/{ => styles}/GreeterCard.css.ts (76%) rename src/components/GreeterRow/{ => styles}/GreeterRow.css.ts (66%) rename src/components/Grid/{Col.js => Grid.Col.tsx} (62%) rename src/components/Grid/{Container.js => Grid.Container.tsx} (62%) rename src/components/Grid/{Row.js => Grid.Row.tsx} (61%) rename src/components/Grid/{Grid.js => Grid.tsx} (70%) create mode 100644 src/components/Grid/Grid.types.ts rename src/components/Grid/{utils.js => Grid.utils.ts} (100%) rename src/components/Grid/__tests__/{Col.test.js => Grid.Col.test.js} (98%) rename src/components/Grid/__tests__/{Container.test.js => Grid.Container.test.js} (98%) rename src/components/Grid/__tests__/{Row.test.js => Grid.Row.test.js} (98%) rename src/components/Grid/{index.js => index.ts} (86%) rename src/components/Grid/styles/{Col.css.js => Grid.Col.css.ts} (96%) rename src/components/Grid/styles/{Container.css.js => Grid.Container.css.ts} (91%) rename src/components/Grid/styles/{Row.css.js => Grid.Row.css.ts} (96%) rename src/components/Heading/{types.ts => Heading.types.ts} (100%) rename src/components/Heading/{utils.ts => Heading.utils.ts} (100%) rename src/components/Heading/{ => styles}/Heading.css.ts (82%) rename src/components/HelpText/{HelpText.js => HelpText.tsx} (74%) rename src/components/HelpText/{utils.js => HelpText.utils.ts} (100%) rename src/components/HelpText/{index.js => index.ts} (93%) rename src/components/HelpText/styles/{HelpText.css.js => HelpText.css.ts} (80%) rename src/components/Highlight/{Highlight.js => Highlight.tsx} (70%) rename src/components/Highlight/{utils.js => Highlight.utils.ts} (100%) rename src/components/Highlight/{index.js => index.ts} (93%) rename src/components/Highlight/styles/{Highlight.css.js => Highlight.css.ts} (99%) rename src/components/Hr/{utils.ts => Hr.utils.ts} (100%) rename src/components/Hr/styles/{Hr.css.js => Hr.css.ts} (98%) rename src/components/HsApp/{Nav.tsx => HsApp.Nav.tsx} (98%) rename src/components/HsApp/{Sidenav.tsx => HsApp.Sidenav.tsx} (88%) rename src/components/HsApp/__tests__/{Sidenav.test.js => HsApp.Sidenav.test.js} (97%) rename src/components/HsApp/{ => styles}/HsApp.css.js (90%) rename src/components/Huzzah/{index.js => Huzzah.tsx} (56%) create mode 100644 src/components/Huzzah/Huzzah.utils.ts rename src/components/Huzzah/__tests__/{getHuzzah.test.js => Huzzah.utils.test.js} (94%) create mode 100644 src/components/Huzzah/index.ts rename src/components/Icon/{Icon.js => Icon.tsx} (73%) create mode 100644 src/components/Icon/Icon.types.ts rename src/components/Icon/{utils.js => Icon.utils.ts} (77%) rename src/components/Icon/{index.js => index.ts} (70%) delete mode 100644 src/components/Icon/types.js rename src/components/Illo/{Illo.js => Illo.tsx} (53%) create mode 100644 src/components/Illo/Illo.types.ts create mode 100644 src/components/Illo/Illo.utils.ts rename src/components/Illo/{index.js => index.ts} (70%) delete mode 100644 src/components/Illo/types.js delete mode 100644 src/components/Illo/utils.js delete mode 100644 src/components/Image/Image.js create mode 100644 src/components/Image/Image.tsx create mode 100644 src/components/Image/Image.types.ts create mode 100644 src/components/Image/Image.utils.ts rename src/components/Image/{index.js => index.ts} (92%) delete mode 100644 src/components/Image/utils.js rename src/components/InfiniteScroller/{index.js => InfiniteScroller.tsx} (82%) create mode 100644 src/components/InfiniteScroller/InfiniteScroller.types.ts create mode 100644 src/components/InfiniteScroller/index.ts rename src/components/Inline/{ => styles}/Inline.css.ts (87%) rename src/components/Input/{AddOn.js => Input.AddOn.tsx} (69%) rename src/components/Input/{BackdropV2.tsx => Input.BackdropV2.tsx} (80%) rename src/components/Input/{Prefix.js => Input.Prefix.tsx} (71%) rename src/components/Input/{Resizer.tsx => Input.Resizer.tsx} (91%) rename src/components/Input/{Static.js => Input.Static.tsx} (62%) rename src/components/Input/{Suffix.js => Input.Suffix.tsx} (71%) rename src/components/Input/{Input.js => Input.tsx} (86%) create mode 100644 src/components/Input/Input.types.ts rename src/components/Input/{utils.js => Input.utils.ts} (77%) rename src/components/Input/__tests__/{AddOn.test.js => Input.AddOn.test.js} (98%) rename src/components/Input/__tests__/{BackdropV2.test.js => Input.BackdropV2.test.js} (95%) rename src/components/Input/__tests__/{Prefix.test.js => Input.Prefix.test.js} (95%) rename src/components/Input/__tests__/{Resizer.test.js => Input.Resizer.test.js} (99%) rename src/components/Input/__tests__/{Static.test.js => Input.Static.test.js} (98%) rename src/components/Input/__tests__/{Suffix.test.js => Input.Suffix.test.js} (96%) rename src/components/Input/__tests__/{utils.test.js => Input.utils.test.js} (84%) rename src/components/Input/{index.js => index.ts} (88%) rename src/components/Input/styles/{AddOn.css.js => Input.AddOn.css.js} (79%) rename src/components/Input/styles/{BackdropV2.css.ts => Input.BackdropV2.css.ts} (97%) rename src/components/Input/{Resizer.css.ts => styles/Input.Resizer.css.ts} (80%) rename src/components/Input/{Static.css.ts => styles/Input.Static.css.ts} (77%) rename src/components/Label/{Label.js => Label.tsx} (73%) rename src/components/Label/{utils.js => Label.utils.ts} (100%) rename src/components/Label/{index.js => index.ts} (92%) rename src/components/Link/{ => styles}/Link.css.ts (69%) rename src/components/List/{ => styles}/List.css.ts (91%) rename src/components/LoadingDots/{index.js => LoadingDots.tsx} (85%) create mode 100644 src/components/LoadingDots/index.ts rename src/components/Message/{Action.js => Message.Action.tsx} (76%) rename src/components/Message/{Attachment.js => Message.Attachment.tsx} (77%) rename src/components/Message/{Bubble.js => Message.Bubble.tsx} (93%) rename src/components/Message/{Caption.js => Message.Caption.tsx} (75%) rename src/components/Message/{Chat.js => Message.Chat.tsx} (82%) rename src/components/Message/{ChatBlock.js => Message.ChatBlock.tsx} (81%) rename src/components/Message/{Content.js => Message.Content.tsx} (82%) rename src/components/Message/{Embed.js => Message.Embed.tsx} (81%) rename src/components/Message/{Media.js => Message.Media.tsx} (81%) create mode 100644 src/components/Message/Message.Provider.tsx rename src/components/Message/{Question.js => Message.Question.tsx} (66%) rename src/components/Message/{Message.js => Message.tsx} (79%) create mode 100644 src/components/Message/Message.types.ts rename src/components/Message/{utils.js => Message.utils.ts} (100%) delete mode 100644 src/components/Message/Provider.js rename src/components/Message/__tests__/{Action.test.js => Message.Action.test.js} (94%) rename src/components/Message/__tests__/{Attachment.test.js => Message.Attachment.test.js} (98%) rename src/components/Message/__tests__/{Bubble.test.js => Message.Bubble.test.js} (99%) rename src/components/Message/__tests__/{Caption.test.js => Message.Caption.test.js} (96%) rename src/components/Message/__tests__/{Chat.test.js => Message.Chat.test.js} (96%) rename src/components/Message/__tests__/{ChatBlock.test.js => Message.ChatBlock.test.js} (93%) rename src/components/Message/__tests__/{Content.test.js => Message.Content.test.js} (95%) rename src/components/Message/__tests__/{Embed.test.js => Message.Embed.test.js} (97%) rename src/components/Message/__tests__/{Media.test.js => Message.Media.test.js} (98%) rename src/components/Message/__tests__/{Provider.test.js => Message.Provider.test.js} (91%) rename src/components/Message/__tests__/{Question.test.js => Message.Question.test.js} (79%) rename src/components/Message/{index.js => index.ts} (92%) delete mode 100644 src/components/Message/propTypes.js delete mode 100644 src/components/Message/types.js rename src/components/Modal/{Body.js => Modal.Body.tsx} (81%) rename src/components/Modal/{Content.js => Modal.Content.tsx} (73%) rename src/components/Modal/{Footer.js => Modal.Footer.tsx} (60%) rename src/components/Modal/{Header.js => Modal.Header.tsx} (60%) rename src/components/Modal/{Overlay.js => Modal.Overlay.tsx} (77%) rename src/components/Modal/{Modal.js => Modal.tsx} (83%) create mode 100644 src/components/Modal/Modal.types.ts rename src/components/Modal/{utils.js => Modal.utils.ts} (100%) rename src/components/Modal/__tests__/{Body.test.js => Modal.Body.test.js} (98%) rename src/components/Modal/__tests__/{Content.test.js => Modal.Content.test.js} (92%) rename src/components/Modal/__tests__/{Footer.test.js => Modal.Footer.test.js} (95%) rename src/components/Modal/__tests__/{Header.test.js => Modal.Header.test.js} (95%) rename src/components/Modal/{index.js => index.ts} (90%) rename src/components/Modal/styles/{Body.css.js => Modal.Body.css.js} (98%) rename src/components/Modal/styles/{Content.css.js => Modal.Content.css.js} (96%) rename src/components/Modal/styles/{Footer.css.js => Modal.Footer.css.js} (95%) rename src/components/Modal/styles/{Header.css.js => Modal.Header.css.js} (95%) rename src/components/Nav/{ => styles}/Nav.css.ts (88%) rename src/components/Notification/{Timer.tsx => Notification.Timer.tsx} (95%) rename src/components/Notification/{utils.ts => Notification.utils.ts} (100%) rename src/components/Notification/__tests__/{Timer.test.js => Notification.Timer.test.js} (97%) rename src/components/Notification/{ => styles}/Notification.css.js (93%) rename src/components/NotificationStack/{utils.ts => NotificationStack.utils.ts} (100%) rename src/components/NotificationStack/{ => styles}/NotificationStack.css.js (53%) rename src/components/OptionIcon/{OptionIcon.js => OptionIcon.tsx} (73%) rename src/components/OptionIcon/{utils.js => OptionIcon.utils.ts} (100%) rename src/components/OptionIcon/{index.js => index.ts} (93%) delete mode 100644 src/components/OptionTile/Container.js create mode 100644 src/components/OptionTile/OptionTile.Container.tsx rename src/components/OptionTile/{OptionTile.js => OptionTile.tsx} (79%) create mode 100644 src/components/OptionTile/OptionTile.types.ts rename src/components/OptionTile/{utils.js => OptionTile.utils.ts} (100%) rename src/components/OptionTile/{index.js => index.ts} (93%) rename src/components/Overflow/{index.js => Overflow.tsx} (82%) create mode 100644 src/components/Overflow/index.ts rename src/components/Overlay/{Overlay.js => Overlay.tsx} (67%) rename src/components/Overlay/{utils.js => Overlay.utils.ts} (100%) delete mode 100644 src/components/Overlay/index.js create mode 100644 src/components/Overlay/index.ts rename src/components/Page/{Actions.tsx => Page.Actions.tsx} (78%) rename src/components/Page/{Card.tsx => Page.Card.tsx} (73%) rename src/components/Page/{Content.tsx => Page.Content.tsx} (75%) rename src/components/Page/{Header.tsx => Page.Header.tsx} (83%) rename src/components/Page/{Section.tsx => Page.Section.tsx} (72%) create mode 100644 src/components/Page/Page.types.ts rename src/components/Page/{utils.ts => Page.utils.ts} (100%) rename src/components/Page/__tests__/{Actions.test.js => Page.Actions.test.js} (97%) rename src/components/Page/__tests__/{Card.test.js => Page.Card.test.js} (93%) rename src/components/Page/__tests__/{Content.test.js => Page.Content.test.js} (94%) rename src/components/Page/__tests__/{Header.test.js => Page.Header.test.js} (98%) rename src/components/Page/__tests__/{Section.test.js => Page.Section.test.js} (94%) rename src/components/Page/styles/{Actions.css.ts => Page.Actions.css.ts} (91%) rename src/components/Page/styles/{Card.css.ts => Page.Card.css.ts} (95%) rename src/components/Page/styles/{Content.css.ts => Page.Content.css.ts} (71%) rename src/components/Page/styles/{Header.css.ts => Page.Header.css.ts} (94%) rename src/components/Page/styles/{Section.css.ts => Page.Section.css.ts} (91%) delete mode 100644 src/components/Page/types.ts rename src/components/Pagination/{ => styles}/Pagination.css.js (71%) rename src/components/Pop/{Arrow.css.js => Arrow.css.ts} (97%) rename src/components/Pop/{Arrow.js => Arrow.tsx} (89%) delete mode 100644 src/components/Pop/Manager.js create mode 100644 src/components/Pop/Manager.ts rename src/components/Pop/{Pop.css.js => Pop.css.ts} (100%) rename src/components/Pop/{Pop.js => Pop.tsx} (91%) rename src/components/Pop/{types.ts => Pop.types.ts} (76%) rename src/components/Pop/{Popper.js => Popper.tsx} (82%) rename src/components/Pop/{Reference.js => Reference.tsx} (65%) rename src/components/Pop/{index.js => index.ts} (100%) rename src/components/Popper/{Manager.js => Popper.Manager.tsx} (74%) rename src/components/Popper/{Reference.js => Popper.Reference.tsx} (60%) rename src/components/Popper/{Popper.js => Popper.tsx} (74%) rename src/components/Popper/{utils.js => Popper.utils.ts} (68%) delete mode 100644 src/components/Popper/index.js create mode 100644 src/components/Popper/index.ts rename src/components/Portal/{Container.js => Portal.Container.tsx} (91%) rename src/components/Portal/{Portal.js => Portal.tsx} (81%) create mode 100644 src/components/Portal/Portal.types.ts rename src/components/Portal/{tests => __tests__}/Portal.test.js (100%) rename src/components/Portal/{index.js => index.ts} (100%) delete mode 100644 src/components/Portal/types.js rename src/components/PortalWrapper/{Content.tsx => PortalWrapper.Content.tsx} (100%) rename src/components/PortalWrapper/{PortalWrapper.js => PortalWrapper.tsx} (90%) rename src/components/PortalWrapper/__tests__/{Content.test.js => PortalWrapper.Content.test.js} (96%) rename src/components/PortalWrapper/{index.js => index.ts} (100%) rename src/components/PreviewCard/{Context.js => PreviewCard.Context.ts} (88%) rename src/components/PreviewCard/{index.js => PreviewCard.tsx} (83%) create mode 100644 src/components/PreviewCard/index.ts rename src/components/ProgressBar/{index.js => ProgressBar.tsx} (51%) create mode 100644 src/components/ProgressBar/index.ts rename src/components/PromoCard/{utils.js => PromoCard.utils.ts} (100%) rename src/components/PromoCard/{ => styles}/PromoCard.css.ts (65%) rename src/components/PropProvider/{types.ts => PropProvider.types.ts} (100%) rename src/components/PropProvider/{utils.ts => PropProvider.utils.ts} (98%) rename src/components/Radio/{Radio.js => Radio.tsx} (64%) create mode 100644 src/components/Radio/Radio.types.ts rename src/components/Radio/{utils.js => Radio.utils.ts} (100%) delete mode 100644 src/components/Radio/index.js create mode 100644 src/components/Radio/index.ts delete mode 100644 src/components/Radio/types.js rename src/components/RadioCard/{RadioCard.js => RadioCard.tsx} (79%) create mode 100644 src/components/RadioCard/RadioCard.types.ts rename src/components/RadioCard/{utils.js => RadioCard.utils.ts} (100%) rename src/components/RadioCard/{index.js => index.ts} (93%) rename src/components/RadioCard/styles/{RadioCard.css.js => RadioCard.css.ts} (96%) rename src/components/RateAction/{ => styles}/RateAction.css.ts (92%) rename src/components/RouteWrapper/{index.js => RouteWrapper.tsx} (88%) create mode 100644 src/components/RouteWrapper/index.ts rename src/components/Samp/{utils.ts => Samp.utils.ts} (100%) rename src/components/Scrollable/{ => styles}/Scrollable.css.ts (98%) rename src/components/Select/{Select.js => Select.tsx} (79%) create mode 100644 src/components/Select/Select.types.ts rename src/components/Select/{utils.js => Select.utils.ts} (100%) delete mode 100644 src/components/Select/index.js create mode 100644 src/components/Select/index.ts rename src/components/Select/{ => styles}/Select.css.ts (88%) delete mode 100644 src/components/Select/types.js create mode 100644 src/components/SelectDropdown/SelectDropdown.types.ts rename src/components/SelectDropdown/{ => styles}/SelectDropdown.css.ts (93%) rename src/components/SideNavigation/{Button.tsx => SideNavigation.Button.tsx} (72%) rename src/components/SideNavigation/{DropdownFooter.tsx => SideNavigation.DropdownFooter.tsx} (84%) rename src/components/SideNavigation/{DropdownHeader.tsx => SideNavigation.DropdownHeader.tsx} (83%) rename src/components/SideNavigation/{FadeInOut.tsx => SideNavigation.FadeInOut.tsx} (74%) rename src/components/SideNavigation/{Footer.tsx => SideNavigation.Footer.tsx} (77%) rename src/components/SideNavigation/{Header.tsx => SideNavigation.Header.tsx} (80%) rename src/components/SideNavigation/{Heading.tsx => SideNavigation.Heading.tsx} (80%) rename src/components/SideNavigation/{Item.tsx => SideNavigation.Item.tsx} (79%) rename src/components/SideNavigation/{Section.tsx => SideNavigation.Section.tsx} (76%) create mode 100644 src/components/SideNavigation/SideNavigation.types.ts rename src/components/SideNavigation/{ => styles}/SideNavigation.css.js (93%) rename src/components/SidebarCollapsibleCard/{index.js => SidebarCollapsibleCard.tsx} (82%) create mode 100644 src/components/SidebarCollapsibleCard/SidebarCollapsibleCard.types.ts rename src/components/SidebarCollapsibleCard/{tests => __tests__}/SidebarCollapsibleCard.test.js (99%) create mode 100644 src/components/SidebarCollapsibleCard/index.ts rename src/components/Skeleton/{Avatar.js => Skeleton.Avatar.tsx} (63%) rename src/components/Skeleton/{Block.js => Skeleton.Block.tsx} (79%) rename src/components/Skeleton/{Control.js => Skeleton.Control.tsx} (72%) rename src/components/Skeleton/{Heading.js => Skeleton.Heading.tsx} (74%) rename src/components/Skeleton/{Image.js => Skeleton.Image.tsx} (68%) rename src/components/Skeleton/{Paragraph.js => Skeleton.Paragraph.tsx} (82%) rename src/components/Skeleton/{Text.js => Skeleton.Text.tsx} (77%) rename src/components/Skeleton/{utils.js => Skeleton.utils.ts} (100%) rename src/components/Skeleton/__tests__/{Avatar.test.js => Skeleton.Avatar.test.js} (92%) rename src/components/Skeleton/__tests__/{Block.test.js => Skeleton.Block.test.js} (94%) rename src/components/Skeleton/__tests__/{Control.test.js => Skeleton.Control.test.js} (90%) rename src/components/Skeleton/__tests__/{Heading.test.js => Skeleton.Heading.test.js} (90%) rename src/components/Skeleton/__tests__/{Image.test.js => Skeleton.Image.test.js} (88%) rename src/components/Skeleton/__tests__/{Paragraph.test.js => Skeleton.Paragraph.test.js} (90%) rename src/components/Skeleton/__tests__/{Text.test.js => Skeleton.Text.test.js} (96%) delete mode 100644 src/components/Skeleton/index.js create mode 100644 src/components/Skeleton/index.ts rename src/components/Skeleton/styles/{Avatar.css.js => Skeleton.Avatar.css.ts} (85%) rename src/components/Skeleton/styles/{Block.css.js => Skeleton.Block.css.ts} (100%) rename src/components/Skeleton/styles/{Control.css.js => Skeleton.Control.css.ts} (93%) rename src/components/Skeleton/styles/{Image.css.js => Skeleton.Image.css.ts} (81%) rename src/components/Skeleton/styles/{Text.css.js => Skeleton.Text.css.ts} (87%) rename src/components/SleepDetector/{index.js => SleepDetector.tsx} (59%) rename src/components/SleepDetector/{tests => __tests__}/SleepDetector.test.js (94%) create mode 100644 src/components/SleepDetector/index.ts rename src/components/Sortable/{DragHandle.js => Sortable.DragHandle.tsx} (70%) rename src/components/Sortable/{Item.js => Sortable.Item.tsx} (63%) rename src/components/Sortable/{List.js => Sortable.List.tsx} (72%) rename src/components/Sortable/{index.js => Sortable.tsx} (74%) create mode 100644 src/components/Sortable/Sortable.types.ts rename src/components/Sortable/{tests/DragHandle.test.js => __tests__/Sortable.DragHandle.test.js} (86%) rename src/components/Sortable/{tests/List.test.js => __tests__/Sortable.List.test.js} (87%) rename src/components/Sortable/{tests => __tests__}/Sortable.test.js (97%) create mode 100644 src/components/Sortable/index.ts delete mode 100644 src/components/Sortable/propTypes.js rename src/components/Spinner/{ => styles}/Spinner.css.ts (94%) rename src/components/SplitButton/{ => styles}/SplitButton.css.ts (80%) rename src/components/StatusAvatar/{StatusAvatar.js => StatusAvatar.tsx} (69%) rename src/components/StatusAvatar/{utils.js => StatusAvatar.utils.ts} (100%) delete mode 100644 src/components/StatusAvatar/index.js create mode 100644 src/components/StatusAvatar/index.ts rename src/components/StatusBadge/{index.js => StatusBadge.tsx} (81%) create mode 100644 src/components/StatusBadge/StatusBadge.types.ts create mode 100644 src/components/StatusBadge/index.ts delete mode 100644 src/components/StatusBadge/propTypes.js rename src/components/StatusBar/{Button.js => StatusBar.Button.tsx} (78%) rename src/components/StatusBar/{index.js => StatusBar.tsx} (66%) create mode 100644 src/components/StatusBar/StatusBar.types.ts rename src/components/StatusBar/{tests/Button.test.js => __tests__/StatusBar.Button.test.js} (94%) rename src/components/StatusBar/{tests => __tests__}/StatusBar.test.js (97%) create mode 100644 src/components/StatusBar/index.ts delete mode 100644 src/components/StatusBar/propTypes.js rename src/components/StatusDot/{StatusDot.js => StatusDot.tsx} (79%) create mode 100644 src/components/StatusDot/StatusDot.types.ts rename src/components/StatusDot/{utils.js => StatusDot.utils.ts} (100%) delete mode 100644 src/components/StatusDot/index.js create mode 100644 src/components/StatusDot/index.ts rename src/components/StatusDot/styles/{StatusDot.css.js => StatusDot.css.ts} (95%) delete mode 100644 src/components/StatusDot/types.js rename src/components/Stepper/{ => styles}/Stepper.css.ts (93%) rename src/components/Switch/{types.ts => Switch.types.ts} (100%) rename src/components/Switch/{utils.ts => Switch.utils.ts} (100%) rename src/components/TabBar/{ => styles}/TabBar.css.ts (83%) rename src/components/Table/{Cell.tsx => Table.Cell.tsx} (97%) rename src/components/Table/{HeaderCell.tsx => Table.HeaderCell.tsx} (97%) rename src/components/Table/{Row.tsx => Table.Row.tsx} (89%) rename src/components/Table/{types.ts => Table.types.ts} (100%) rename src/components/Tag/{ => styles}/Tag.css.ts (90%) rename src/components/TagList/{ => styles}/TagList.css.ts (68%) rename src/components/Text/{types.ts => Text.types.ts} (100%) rename src/components/Text/{utils.ts => Text.utils.ts} (100%) rename src/components/Timeline/{Item.js => Timeline.Item.tsx} (83%) rename src/components/Timeline/{Timeline.js => Timeline.tsx} (72%) rename src/components/Timeline/__tests__/{Item.test.js => Timeline.Item.test.js} (95%) rename src/components/Timeline/{index.js => index.ts} (95%) rename src/components/Timestamp/{Time.js => Timestamp.Time.tsx} (82%) rename src/components/Timestamp/{index.js => Timestamp.tsx} (70%) create mode 100644 src/components/Timestamp/Timestamp.types.ts create mode 100644 src/components/Timestamp/index.ts delete mode 100644 src/components/Timestamp/types.js rename src/components/Toolbar/{ => styles}/Toolbar.css.ts (85%) delete mode 100644 src/components/Toolbar/types.js rename src/components/Tooltip/{ => styles}/Tooltip.css.ts (68%) rename src/components/Truncate/{index.js => Truncate.tsx} (77%) create mode 100644 src/components/Truncate/Truncate.types.ts create mode 100644 src/components/Truncate/index.ts rename src/components/VisuallyHidden/{index.js => VisuallyHidden.tsx} (74%) create mode 100644 src/components/VisuallyHidden/index.ts rename src/components/VisuallyHidden/styles/{VisuallyHidden.css.js => VisuallyHidden.css.ts} (100%) rename src/components/{index.js => index.ts} (100%) rename src/components/styled/{testHelpers.js => testHelpers.ts} (66%) rename src/constants/{Keys.js => Keys.ts} (100%) rename src/constants/{index.js => index.ts} (100%) delete mode 100644 src/constants/propTypes.js rename src/utilities/{check.js => check.ts} (100%) rename src/utilities/{clipboard.js => clipboard.ts} (85%) rename src/utilities/{color.js => color.ts} (96%) rename src/utilities/{events.js => events.ts} (96%) rename src/utilities/{focus.js => focus.ts} (95%) rename src/utilities/{get.js => get.ts} (100%) rename src/utilities/{globalManager.js => globalManager.ts} (100%) rename src/utilities/{id.js => id.ts} (63%) rename src/utilities/{images.js => images.ts} (75%) rename src/utilities/{index.js => index.ts} (100%) delete mode 100644 src/utilities/log.js create mode 100644 src/utilities/log.ts rename src/utilities/{memoizeOne.js => memoizeOne.ts} (79%) rename src/utilities/{nodePosition.js => nodePosition.ts} (99%) rename src/utilities/{number.js => number.ts} (76%) create mode 100644 src/utilities/popper.lib.js rename src/utilities/{scrollFade.js => scrollFade.ts} (100%) rename src/utilities/{scrolling.js => scrolling.ts} (90%) rename src/utilities/{smoothScroll.js => smoothScroll.ts} (98%) rename src/utilities/{timestamp.js => timestamp.ts} (100%) diff --git a/.eslintrc b/.eslintrc index 540a7fb24..d34d82ce1 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,7 +1,7 @@ { "extends": "react-app", "parser": "babel-eslint", - "plugins": ["flowtype"], + "plugins": [], "settings": { "react": { "createClass": "createReactClass", diff --git a/.storybook/.babelrc b/.storybook/.babelrc index 42b161ce3..b7c168e14 100644 --- a/.storybook/.babelrc +++ b/.storybook/.babelrc @@ -13,12 +13,10 @@ } } ], - "@babel/preset-flow", "@babel/react" ], "plugins": [ "@babel/plugin-proposal-class-properties", - "@babel/plugin-transform-flow-strip-types", "inline-svg", "emotion" ], diff --git a/__mocks__/popper.js.js b/__mocks__/popper.js.js new file mode 100644 index 000000000..1e59807b8 --- /dev/null +++ b/__mocks__/popper.js.js @@ -0,0 +1,12 @@ +import PopperJs from 'popper.js' + +export default class Popper { + static placements = PopperJs.placements + + constructor() { + return { + destroy: () => {}, + scheduleUpdate: () => {}, + } + } +} diff --git a/babel.config.js b/babel.config.js index d70c47175..223eed4e5 100644 --- a/babel.config.js +++ b/babel.config.js @@ -2,7 +2,6 @@ module.exports = api => { const isTest = api.env('test') const plugins = [ '@babel/plugin-proposal-class-properties', - '@babel/plugin-transform-flow-strip-types', 'inline-svg', 'emotion', ] @@ -27,7 +26,6 @@ module.exports = api => { loose: true, }, ], - '@babel/preset-flow', '@babel/react', ], plugins: plugins, diff --git a/docs/contributing/creating.md b/docs/contributing/creating.md index 6377d2874..c63c8e7b5 100644 --- a/docs/contributing/creating.md +++ b/docs/contributing/creating.md @@ -2,6 +2,9 @@ In this guide, we'll walk through creating a custom component in HSDS! +All Components in HSDS are or have been updated to TypeScript, do not fret! You can write your components in regular old JavaScript, just make sure the extensions are '.ts' or '.tsx' (if your file contains jsx, you want .tsx) things will work as normal. +We do enocurage you to have a look at other components and follow how thay are put together, you might learn a thing or two, which is always a good thing! + We'll be created a `Strong` component, an enhancement to the default HTML `strong` primitive. ## Directory @@ -25,45 +28,43 @@ hsds-react/ └── Strong/ ``` -Under our newly created `Strong/` directory, we'll need to create 2 files: +Under our newly created `Strong/` directory, we'll need to create a few files: + +* `index.ts` +* `Strong.tsx` +* `Strong.utils.ts` -* `index.js` -* `Strong.js` +If your component will be styled (not all are!) add a `styles` folder and put a `Strong.css.js` file in it ``` hsds-react/ └── src/ └── components/ └── Strong/ - ├── index.js - └── Strong.js + └── styles/ + └── Strong.css.js + ├── index.ts + ├── Strong.tsx + └── Strong.utils.ts ``` -The **`index.js`** file is the main file allow the consuming App/component to use `Strong`. It also "connects" our component to `PropProvider`, allowing the user to more easily customize `Strong` ([more on that later](#propConnect)!). +The **`index.ts`** file is the main file allow the consuming App/component to use `Strong`. It also "connects" our component to `PropProvider`, allowing the user to more easily customize `Strong` ([more on that later](#propConnect)!). -The **`String.js`** file our actual React component. +The **`String.tsx`** file our actual React component. ## Base component code -Add the starting React component boilerplate for `Strong.js`: +Add the starting React component boilerplate for `Strong.tsx`: ```jsx -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' +import { COMPONENT_KEY } from './Strong.utils.ts' import { StrongUI } from './styles/Strong.css.js' -export const COMPONENT_KEY = 'Strong' - -type Props = { - children?: any, - className?: string, - isSuperBold: boolean, -} - -class Strong extends Component { +class Strong extends React.PureComponent { static defaultProps = { isSuperBold: false, } @@ -92,9 +93,20 @@ export default Strong Whoa 😳! Lots of stuff going on already! -#### `Flow` +#### TypeScript -HSDS uses [Flow](https://flow.org/en/) for typing. To enable Flow type on our component, we have to start off the file with `// @flow`. +HSDS uses [TypeScript](https://www.typescriptlang.org/) for typing. You can write your component in JS, and add the TypeScript layer little by little. +Here are a couple of relevant links to get you started: + +* [JSX in TypeScript](https://www.typescriptlang.org/docs/handbook/jsx.html) +* [Understanding TypeScript’s type notation](http://2ality.com/2018/04/type-notation-typescript.html) +* [Typescript, React, JSX](https://basarat.gitbooks.io/typescript/docs/jsx/react.html) + +Notice how our example at the moment does not include anything TypeScript wise yet. + +**Important** + +I just told you a lie, TypeScript requires that specific way to import React: `import * as React from 'react'` so no `import React, { PureComponent as Component } from 'react'` #### `Strong.css.js` @@ -159,18 +171,28 @@ Wonderful 🙏! You've created the base for `Strong`, that's performant, easy to This is a Higher-Order component that sets up the internal namespacing within HSDS. It allows for HSDS components to reliably type-check each other. -`COMPONENT_KEY` is the namespace for the component, in our case, `Strong`. Exporting it allows for other components to use the key for type-checking. +`COMPONENT_KEY` is the namespace for the component, in our case, `Strong`. This key normally resides in the "utils" file. + +## Utils + +Your component might need different functions, constants or other stuff that don't need to live inside of it, the place to put those is inside your utils file: `Strong.utils.ts`, at the minimum, this file is where the `COMPONENT_KEY` lives: + +**Strong.utils.ts** + +```ts +export const COMPONENT_KEY = 'Strong' +``` ## Exporting We'll need to export `Strong` to make it simpler to import and use. This is all done in our `index.js` file: ```jsx -// @flow import Strong from './Strong' import { propConnect } from '../PropProvider' +import { COMPONENT_KEY } from './Strong.utils.ts' -export default propConnect('Strong')(Strong) +export default propConnect(COMPONENT_KEY)(Strong) ``` Whoa 😳! More stuff! @@ -179,7 +201,7 @@ Whoa 😳! More stuff! `propConnect` is a special Higher-Order Component that works very similar to [Redux's](https://redux.js.org/) `connect`. It hooks up our `Strong` component to HSDS's `PropProvider`, which allows the user to more [easily override props](https://github.com/helpscout/hsds-react/blob/master/src/components/PropProvider/docs/Provider.md). -We provide it with the (`string`) namespace (`'Strong'`), as well as the actual Component. +We provide it with the (`string`) namespace (`COMPONENT_KEY`), as well as the actual Component. ## More Exporting @@ -200,13 +222,124 @@ export { default as Strong } from './Strong' ... ``` +## Adding TypeScript types + +When working with TypeScript on A react component, one of the things it brings to the table is a different way to generate a component's "prop types", you no longer need the separate package 'prop-types' as you will be using TS's type system. Let's add this to our example, first, create a new file: `Strong.types.ts` + +``` +hsds-react/ + └── src/ + └── components/ + └── Strong/ + └── styles/ + └── Strong.css.js + ├── index.ts + ├── Strong.tsx + └── Strong.types.ts +``` + +**Strong.types.ts** + +Notice the convention to define the component prop types: `ComponentNameProps`, for state types use: `ComponentNameState` + +```ts +export type StrongProps = { + children?: any + className?: string + isSuperBold: boolean +} +``` + +**Strong.tsx** + +```jsx +import * as React from 'react' +import getValidProps from '@helpscout/react-utils/dist/getValidProps' +import { classNames } from '../../utilities/classNames' +import { namespaceComponent } from '../../utilities/component' +import { StrongUI } from './styles/Strong.css.js' +import { StrongProps } from './Strong.types.ts' + +export const COMPONENT_KEY = 'Strong' + +class Strong extends React.PureComponent { + static defaultProps = { + isSuperBold: false, + } + + render() { + const { children, className, ...rest } = this.props + + const componentClassName = classNames( + 'c-Strong', + isSuperBold && 'is-superBold', + className + ) + + return ( + + {children} + + ) + } +} + +namespaceComponent(COMPONENT_KEY, Strong) + +export default Strong +``` + And that's it 🙏! You've successfully created, hooked up, and exported our new `Strong` component 💪. +## About naming conventions + +You'll quickly notice a pattern to everything we add inside a component. The reason for this is that HSDS has many components! And when you are working inside your code editor, it's easier to find what you need if everything is named following a convention. + +Below is a summary of things to pay attention to with examples of a slightly more complex component: + +#### Folder Structure + +``` +hsds-react/ + └── src/ + └── components/ + └── Table/ + └── __tests__/ + ├── Table.Cell.test.js + └── Table.test.js + └── styles/ + ├── Table.Cell.css.js + └── Table.css.js + ├── index.ts + ├── Table.tsx + ├── Table.Cell.tsx + ├── Table.utils.ts + └── Table.types.ts +``` + +#### Types + +```ts +export type TableProps = { + /* ... */ +} +export type TableState = { + /* ... */ +} +export type TableCellProps = { + /* ... */ +} +export type TableCellState = { + /* ... */ +} +``` + +In general, the pattern looks like `Component.SubComponent`... + ## Next Let's add some [styles](stying.md)! ## See also -* [Flow](https://flow.org/en/) * [react-utils](https://helpscout.gitbook.io/react-utils) diff --git a/docs/contributing/setup.md b/docs/contributing/setup.md index 55868900f..ec164cea0 100644 --- a/docs/contributing/setup.md +++ b/docs/contributing/setup.md @@ -46,9 +46,7 @@ Fantastic ✌️! You've got HSDS up and running on your computer. ## Code editor -You can use **whatever code editor you like**! HSDS is typed using [Flow](https://flow.org/). Because of this, we recommend using [Visual Studio Code](https://code.visualstudio.com/) as it has pretty great [Flow support](https://github.com/flowtype/flow-for-vscode). - -Note: You may need to [install Flow globally](https://preview.npmjs.com/package/flow-bin) on your computer. +You can use **whatever code editor you like**! HSDS is typed using [TypeScript](https://www.typescriptlang.org/). Because of this, we recommend using [Visual Studio Code](https://code.visualstudio.com/). ## Git branch diff --git a/docs/contributing/storybook.md b/docs/contributing/storybook.md index ca8204801..de25cbaa1 100644 --- a/docs/contributing/storybook.md +++ b/docs/contributing/storybook.md @@ -47,7 +47,7 @@ In our `Strong/index.js` file, we'll need to add: ```jsx import React from 'react' import { storiesOf } from '@storybook/react' -import { Strong } from '../../src/index.js' +import { Strong } from '../../src/index' const stories = storiesOf('Strong', module) diff --git a/docs/contributing/styling.md b/docs/contributing/styling.md index 736a82595..61168491e 100644 --- a/docs/contributing/styling.md +++ b/docs/contributing/styling.md @@ -36,7 +36,6 @@ The `.css.js` file extension is a convention HSDS uses to distinguish dedicated Add the starting styled component boilerplate for `Strong.css.js`: ```jsx -// @flow import baseStyles from '../../../styles/resets/baseStyles.css.js' import styled from '../../styled' diff --git a/package-lock.json b/package-lock.json index ca0c642c7..80b5573c9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@helpscout/hsds-react", - "version": "2.39.4", + "version": "2.40.0-no-flow-2", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -4442,6 +4442,11 @@ "integrity": "sha1-iKK6tz0c97zVwbEYoAP2b2ZfpmI=", "dev": true }, + "array-move": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/array-move/-/array-move-2.1.0.tgz", + "integrity": "sha512-BXEIud+F7/ech2HcSfo+6bpgSCRlNnVTqQhGKdMov9iJkHq+vu9IP9qRXDpZvQpc1WWpDLiEfjs6Lfvvac+fDA==" + }, "array-reduce": { "version": "0.0.0", "resolved": "https://registry.npmjs.org/array-reduce/-/array-reduce-0.0.0.tgz", @@ -5564,6 +5569,7 @@ "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=", + "dev": true, "requires": { "core-js": "^2.4.0", "regenerator-runtime": "^0.11.0" @@ -5572,7 +5578,8 @@ "core-js": { "version": "2.6.5", "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz", - "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A==" + "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A==", + "dev": true } } }, @@ -7915,28 +7922,28 @@ "dependencies": { "abbrev": { "version": "1.1.1", - "resolved": "", + "resolved": false, "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", "dev": true, "optional": true }, "ansi-regex": { "version": "2.1.1", - "resolved": "", + "resolved": false, "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", "dev": true, "optional": true }, "aproba": { "version": "1.2.0", - "resolved": "", + "resolved": false, "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", "dev": true, "optional": true }, "are-we-there-yet": { "version": "1.1.5", - "resolved": "", + "resolved": false, "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", "dev": true, "optional": true, @@ -7947,14 +7954,14 @@ }, "balanced-match": { "version": "1.0.0", - "resolved": "", + "resolved": false, "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", "dev": true, "optional": true }, "brace-expansion": { "version": "1.1.11", - "resolved": "", + "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, "optional": true, @@ -7965,42 +7972,42 @@ }, "chownr": { "version": "1.1.1", - "resolved": "", + "resolved": false, "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==", "dev": true, "optional": true }, "code-point-at": { "version": "1.1.0", - "resolved": "", + "resolved": false, "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "dev": true, "optional": true }, "concat-map": { "version": "0.0.1", - "resolved": "", + "resolved": false, "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "dev": true, "optional": true }, "console-control-strings": { "version": "1.1.0", - "resolved": "", + "resolved": false, "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", "dev": true, "optional": true }, "core-util-is": { "version": "1.0.2", - "resolved": "", + "resolved": false, "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "dev": true, "optional": true }, "debug": { "version": "4.1.1", - "resolved": "", + "resolved": false, "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", "dev": true, "optional": true, @@ -8010,28 +8017,28 @@ }, "deep-extend": { "version": "0.6.0", - "resolved": "", + "resolved": false, "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==", "dev": true, "optional": true }, "delegates": { "version": "1.0.0", - "resolved": "", + "resolved": false, "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", "dev": true, "optional": true }, "detect-libc": { "version": "1.0.3", - "resolved": "", + "resolved": false, "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", "dev": true, "optional": true }, "fs-minipass": { "version": "1.2.5", - "resolved": "", + "resolved": false, "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==", "dev": true, "optional": true, @@ -8041,14 +8048,14 @@ }, "fs.realpath": { "version": "1.0.0", - "resolved": "", + "resolved": false, "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "dev": true, "optional": true }, "gauge": { "version": "2.7.4", - "resolved": "", + "resolved": false, "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "dev": true, "optional": true, @@ -8065,7 +8072,7 @@ }, "glob": { "version": "7.1.3", - "resolved": "", + "resolved": false, "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==", "dev": true, "optional": true, @@ -8080,14 +8087,14 @@ }, "has-unicode": { "version": "2.0.1", - "resolved": "", + "resolved": false, "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", "dev": true, "optional": true }, "iconv-lite": { "version": "0.4.24", - "resolved": "", + "resolved": false, "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", "dev": true, "optional": true, @@ -8097,7 +8104,7 @@ }, "ignore-walk": { "version": "3.0.1", - "resolved": "", + "resolved": false, "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==", "dev": true, "optional": true, @@ -8107,7 +8114,7 @@ }, "inflight": { "version": "1.0.6", - "resolved": "", + "resolved": false, "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "dev": true, "optional": true, @@ -8118,21 +8125,21 @@ }, "inherits": { "version": "2.0.3", - "resolved": "", + "resolved": false, "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", "dev": true, "optional": true }, "ini": { "version": "1.3.5", - "resolved": "", + "resolved": false, "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "dev": true, "optional": true }, "is-fullwidth-code-point": { "version": "1.0.0", - "resolved": "", + "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, "optional": true, @@ -8142,14 +8149,14 @@ }, "isarray": { "version": "1.0.0", - "resolved": "", + "resolved": false, "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", "dev": true, "optional": true }, "minimatch": { "version": "3.0.4", - "resolved": "", + "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, "optional": true, @@ -8159,14 +8166,14 @@ }, "minimist": { "version": "0.0.8", - "resolved": "", + "resolved": false, "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", "dev": true, "optional": true }, "minipass": { "version": "2.3.5", - "resolved": "", + "resolved": false, "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", "dev": true, "optional": true, @@ -8177,7 +8184,7 @@ }, "minizlib": { "version": "1.2.1", - "resolved": "", + "resolved": false, "integrity": "sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==", "dev": true, "optional": true, @@ -8187,7 +8194,7 @@ }, "mkdirp": { "version": "0.5.1", - "resolved": "", + "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, "optional": true, @@ -8197,14 +8204,14 @@ }, "ms": { "version": "2.1.1", - "resolved": "", + "resolved": false, "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==", "dev": true, "optional": true }, "needle": { "version": "2.3.0", - "resolved": "", + "resolved": false, "integrity": "sha512-QBZu7aAFR0522EyaXZM0FZ9GLpq6lvQ3uq8gteiDUp7wKdy0lSd2hPlgFwVuW1CBkfEs9PfDQsQzZghLs/psdg==", "dev": true, "optional": true, @@ -8216,7 +8223,7 @@ }, "node-pre-gyp": { "version": "0.12.0", - "resolved": "", + "resolved": false, "integrity": "sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==", "dev": true, "optional": true, @@ -8235,7 +8242,7 @@ }, "nopt": { "version": "4.0.1", - "resolved": "", + "resolved": false, "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=", "dev": true, "optional": true, @@ -8246,14 +8253,14 @@ }, "npm-bundled": { "version": "1.0.6", - "resolved": "", + "resolved": false, "integrity": "sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==", "dev": true, "optional": true }, "npm-packlist": { "version": "1.4.1", - "resolved": "", + "resolved": false, "integrity": "sha512-+TcdO7HJJ8peiiYhvPxsEDhF3PJFGUGRcFsGve3vxvxdcpO2Z4Z7rkosRM0kWj6LfbK/P0gu3dzk5RU1ffvFcw==", "dev": true, "optional": true, @@ -8264,7 +8271,7 @@ }, "npmlog": { "version": "4.1.2", - "resolved": "", + "resolved": false, "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "dev": true, "optional": true, @@ -8277,21 +8284,21 @@ }, "number-is-nan": { "version": "1.0.1", - "resolved": "", + "resolved": false, "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", "dev": true, "optional": true }, "object-assign": { "version": "4.1.1", - "resolved": "", + "resolved": false, "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", "dev": true, "optional": true }, "once": { "version": "1.4.0", - "resolved": "", + "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, "optional": true, @@ -8301,21 +8308,21 @@ }, "os-homedir": { "version": "1.0.2", - "resolved": "", + "resolved": false, "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", "dev": true, "optional": true }, "os-tmpdir": { "version": "1.0.2", - "resolved": "", + "resolved": false, "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "dev": true, "optional": true }, "osenv": { "version": "0.1.5", - "resolved": "", + "resolved": false, "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", "dev": true, "optional": true, @@ -8326,21 +8333,21 @@ }, "path-is-absolute": { "version": "1.0.1", - "resolved": "", + "resolved": false, "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", "dev": true, "optional": true }, "process-nextick-args": { "version": "2.0.0", - "resolved": "", + "resolved": false, "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", "dev": true, "optional": true }, "rc": { "version": "1.2.8", - "resolved": "", + "resolved": false, "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", "dev": true, "optional": true, @@ -8353,7 +8360,7 @@ "dependencies": { "minimist": { "version": "1.2.0", - "resolved": "", + "resolved": false, "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true, "optional": true @@ -8362,7 +8369,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": "", + "resolved": false, "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "dev": true, "optional": true, @@ -8378,7 +8385,7 @@ }, "rimraf": { "version": "2.6.3", - "resolved": "", + "resolved": false, "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==", "dev": true, "optional": true, @@ -8388,49 +8395,49 @@ }, "safe-buffer": { "version": "5.1.2", - "resolved": "", + "resolved": false, "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "dev": true, "optional": true }, "safer-buffer": { "version": "2.1.2", - "resolved": "", + "resolved": false, "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true, "optional": true }, "sax": { "version": "1.2.4", - "resolved": "", + "resolved": false, "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "dev": true, "optional": true }, "semver": { "version": "5.7.0", - "resolved": "", + "resolved": false, "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==", "dev": true, "optional": true }, "set-blocking": { "version": "2.0.0", - "resolved": "", + "resolved": false, "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", "dev": true, "optional": true }, "signal-exit": { "version": "3.0.2", - "resolved": "", + "resolved": false, "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "dev": true, "optional": true }, "string-width": { "version": "1.0.2", - "resolved": "", + "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, "optional": true, @@ -8442,7 +8449,7 @@ }, "string_decoder": { "version": "1.1.1", - "resolved": "", + "resolved": false, "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", "dev": true, "optional": true, @@ -8452,7 +8459,7 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": "", + "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "optional": true, @@ -8462,14 +8469,14 @@ }, "strip-json-comments": { "version": "2.0.1", - "resolved": "", + "resolved": false, "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", "dev": true, "optional": true }, "tar": { "version": "4.4.8", - "resolved": "", + "resolved": false, "integrity": "sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==", "dev": true, "optional": true, @@ -8485,14 +8492,14 @@ }, "util-deprecate": { "version": "1.0.2", - "resolved": "", + "resolved": false, "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", "dev": true, "optional": true }, "wide-align": { "version": "1.1.3", - "resolved": "", + "resolved": false, "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", "dev": true, "optional": true, @@ -8502,14 +8509,14 @@ }, "wrappy": { "version": "1.0.2", - "resolved": "", + "resolved": false, "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", "dev": true, "optional": true }, "yallist": { "version": "3.0.3", - "resolved": "", + "resolved": false, "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", "dev": true, "optional": true @@ -10780,15 +10787,6 @@ } } }, - "eslint-plugin-flowtype": { - "version": "2.49.3", - "resolved": "https://registry.npmjs.org/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.49.3.tgz", - "integrity": "sha512-wO0S4QbXPReKtydxbY5A0UieOaF9jBO5BMuxYPQOTa082JCpKEoC7+o3fnKsVVycwX47lvqLiUGRsWauCiA9aw==", - "dev": true, - "requires": { - "lodash": "^4.17.10" - } - }, "eslint-plugin-import": { "version": "2.12.0", "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.12.0.tgz", @@ -11742,12 +11740,6 @@ "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=", "dev": true }, - "flow-bin": { - "version": "0.72.0", - "resolved": "https://registry.npmjs.org/flow-bin/-/flow-bin-0.72.0.tgz", - "integrity": "sha1-EgURgPstt8y3KP7+Z8d+lV6SpE0=", - "dev": true - }, "flow-parser": { "version": "0.98.0", "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.98.0.tgz", @@ -15677,7 +15669,8 @@ "lodash": { "version": "4.17.11", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", - "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==" + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "dev": true }, "lodash-es": { "version": "4.17.11", @@ -17665,7 +17658,7 @@ }, "convert-source-map": { "version": "1.5.1", - "resolved": "", + "resolved": false, "integrity": "sha1-uCeAl7m8IpNl3lxiz1/K7YtVmeU=", "dev": true }, @@ -17687,7 +17680,7 @@ }, "debug": { "version": "3.1.0", - "resolved": "", + "resolved": false, "integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=", "dev": true, "requires": { @@ -17794,7 +17787,7 @@ "dependencies": { "cross-spawn": { "version": "5.1.0", - "resolved": "", + "resolved": false, "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=", "dev": true, "requires": { @@ -17906,7 +17899,7 @@ }, "is-accessor-descriptor": { "version": "1.0.0", - "resolved": "", + "resolved": false, "integrity": "sha1-FpwvbT3x+ZJhgHI2XJsOofaHhlY=", "dev": true, "requires": { @@ -17915,7 +17908,7 @@ }, "is-data-descriptor": { "version": "1.0.0", - "resolved": "", + "resolved": false, "integrity": "sha1-2Eh2Mh0Oet0DmQQGq7u9NrqSaMc=", "dev": true, "requires": { @@ -17924,7 +17917,7 @@ }, "is-descriptor": { "version": "1.0.2", - "resolved": "", + "resolved": false, "integrity": "sha1-OxWXRqZmBLBPjIFSS6NlxfFNhuw=", "dev": true, "requires": { @@ -17935,7 +17928,7 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "", + "resolved": false, "integrity": "sha1-ARRrNqYhjmTljzqNZt5df8b20FE=", "dev": true } @@ -18141,7 +18134,7 @@ }, "is-accessor-descriptor": { "version": "0.1.6", - "resolved": "", + "resolved": false, "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=", "dev": true, "requires": { @@ -18171,7 +18164,7 @@ }, "is-data-descriptor": { "version": "0.1.4", - "resolved": "", + "resolved": false, "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=", "dev": true, "requires": { @@ -18180,7 +18173,7 @@ }, "is-descriptor": { "version": "0.1.6", - "resolved": "", + "resolved": false, "integrity": "sha1-Nm2CQN3kh8pRgjsaufB6EKeCUco=", "dev": true, "requires": { @@ -18191,7 +18184,7 @@ "dependencies": { "kind-of": { "version": "5.1.0", - "resolved": "", + "resolved": false, "integrity": "sha1-cpyR4thXt6QZofmqZWhcTDP1hF0=", "dev": true } @@ -18362,7 +18355,7 @@ }, "istanbul-reports": { "version": "1.4.1", - "resolved": "", + "resolved": false, "integrity": "sha1-Ty6OkoqnoF0dpsQn1AmLJlXsczQ=", "dev": true, "requires": { @@ -18572,7 +18565,7 @@ }, "ms": { "version": "2.0.0", - "resolved": "", + "resolved": false, "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", "dev": true }, @@ -18945,7 +18938,7 @@ }, "semver": { "version": "5.5.0", - "resolved": "", + "resolved": false, "integrity": "sha1-3Eu8emyp2Rbe5dQ1FvAJK1j3uKs=", "dev": true }, @@ -19516,13 +19509,13 @@ "dependencies": { "camelcase": { "version": "4.1.0", - "resolved": "", + "resolved": false, "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=", "dev": true }, "cliui": { "version": "4.1.0", - "resolved": "", + "resolved": false, "integrity": "sha1-NIQi2+gtgAswIu709qwQvy5NG0k=", "dev": true, "requires": { @@ -19553,7 +19546,7 @@ "dependencies": { "camelcase": { "version": "4.1.0", - "resolved": "", + "resolved": false, "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=", "dev": true } @@ -23058,9 +23051,9 @@ } }, "react-frame-component": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/react-frame-component/-/react-frame-component-1.1.1.tgz", - "integrity": "sha1-Bbf1aJotNz8luvDJrbDlnXgQM4g=", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/react-frame-component/-/react-frame-component-4.1.0.tgz", + "integrity": "sha512-2HkO0iccSjd+xRA+aOxq7Mm50WUmCjdmhbQhOiG6gQTChaW//Y3mdkGeUfVA3YkXvDVbigRDvJd/VTUlqaZWSw==", "dev": true }, "react-helmet-async": { @@ -23285,13 +23278,12 @@ } }, "react-sortable-hoc": { - "version": "0.6.7", - "resolved": "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-0.6.7.tgz", - "integrity": "sha1-4w0ke8Nt1aYFQwwzGsnLUKX6cqY=", + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-1.9.1.tgz", + "integrity": "sha512-2VeofjRav8+eZeE5Nm/+b8mrA94rQ+gBsqhXi8pRBSjOWNqslU3ZEm+0XhSlfoXJY2lkgHipfYAUuJbDtCixRg==", "requires": { - "babel-runtime": "^6.11.6", - "invariant": "^2.2.1", - "lodash": "^4.12.0", + "@babel/runtime": "^7.2.0", + "invariant": "^2.2.4", "prop-types": "^15.5.7" } }, @@ -23734,7 +23726,8 @@ "regenerator-runtime": { "version": "0.11.1", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", - "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==" + "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==", + "dev": true }, "regenerator-transform": { "version": "0.13.4", diff --git a/package.json b/package.json index 3fe4f3a93..2309ce1dd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@helpscout/hsds-react", - "version": "2.39.4", + "version": "2.40.0-no-flow-2", "private": false, "main": "dist/index.js", "module": "dist/index.es.js", @@ -77,7 +77,7 @@ "test:dev": "node scripts/test.js --env=jsdom", "test:coverage:fast": "npm run test:coverage -- --onlyChanged", "version": "npm run make:version && git add . && npm run build", - "prettier:base": "prettier \"src/**/*.js\" \"test/**/*.js\" \"stories/**/*.js\" --parser=flow", + "prettier:base": "prettier \"src/**/*.js\" \"test/**/*.js\" \"stories/**/*.js\"", "prettier": "npm run prettier:base -- --write", "update:icons": "node ./scripts/update-icons.js", "process:icons": "node ./scripts/process-icons.js", @@ -97,14 +97,14 @@ "@seedcss/seed-dash": "0.0.6", "@seedcss/seed-family": "0.0.6", "@seedcss/seed-this": "0.0.6", + "array-move": "2.1.0", "compute-scroll-into-view": "1.0.11", "dash-get": "1.0.2", "highlight.js": "9.12.0", "invariant": "2.2.4", "path-to-regexp": "2.4.0", "popper.js": "1.14.3", - "prop-types": "^15", - "react-sortable-hoc": "0.6.7", + "react-sortable-hoc": "1.9.1", "react-transition-group": "2.5.3", "warning": "4.0.3" }, @@ -127,10 +127,8 @@ "@babel/plugin-proposal-throw-expressions": "^7.0.0", "@babel/plugin-syntax-dynamic-import": "^7.0.0", "@babel/plugin-syntax-import-meta": "^7.0.0", - "@babel/plugin-transform-flow-strip-types": "^7.0.0", "@babel/plugin-transform-runtime": "^7.4.3", "@babel/preset-env": "^7.0.0", - "@babel/preset-flow": "^7.0.0", "@babel/preset-react": "^7.0.0", "@babel/runtime": "^7.0.0", "@helpscout/artboard": "0.1.12", @@ -173,12 +171,10 @@ "eslint": "4.19.1", "eslint-config-react-app": "3.0.5", "eslint-loader": "2.0.0", - "eslint-plugin-flowtype": "2.49.3", "eslint-plugin-import": "2.12.0", "eslint-plugin-jsx-a11y": "5.1.1", "eslint-plugin-react": "7.9.1", "eslint-scope": "3.7.1", - "flow-bin": "0.72.0", "fs-extra": "^3.0.1", "glob": "^7.1.3", "hoek": "5.0.3", @@ -204,7 +200,7 @@ "react-dev-utils": "^3.0.2", "react-dom": "^16.6.1", "react-draggable": "^3.2.1", - "react-frame-component": "^1.1.0", + "react-frame-component": "4.1.0", "react-router": "^4.3.1", "react-router-dom": "^4.3.1", "react-treebeard": "3.1.0", diff --git a/src/adapters/__tests__/adapters.app.test.js b/src/adapters/__tests__/adapters.app.test.js index 9426b69a3..cc5b838d3 100644 --- a/src/adapters/__tests__/adapters.app.test.js +++ b/src/adapters/__tests__/adapters.app.test.js @@ -2,11 +2,11 @@ import '../app' import { svgSet as iconSet, unload as unloadIcons, -} from '../../components/Icon/Icon' +} from '../../components/Icon/Icon.utils' import { svgSet as illoSet, unload as unloadIllos, -} from '../../components/Illo/Illo' +} from '../../components/Illo/Illo.utils' afterEach(() => { unloadIcons() diff --git a/src/adapters/__tests__/adapters.embed.test.js b/src/adapters/__tests__/adapters.embed.test.js index 9abcafd0d..ce68c5999 100644 --- a/src/adapters/__tests__/adapters.embed.test.js +++ b/src/adapters/__tests__/adapters.embed.test.js @@ -2,11 +2,11 @@ import '../embed' import { svgSet as iconSet, unload as unloadIcons, -} from '../../components/Icon/Icon' +} from '../../components/Icon/Icon.utils' import { svgSet as illoSet, unload as unloadIllos, -} from '../../components/Illo/Illo' +} from '../../components/Illo/Illo.utils' afterEach(() => { unloadIcons() diff --git a/src/adapters/app.js b/src/adapters/app.js index 59b23a125..612b61e9a 100644 --- a/src/adapters/app.js +++ b/src/adapters/app.js @@ -1,5 +1,5 @@ -import { load as loadIcons } from '../components/Icon' -import { load as loadIllos } from '../components/Illo' +import { load as loadIcons } from '../components/Icon/Icon.utils' +import { load as loadIllos } from '../components/Illo/Illo.utils' import icons from '../components/Icon/icons.all' import illos from '../components/Illo/illos.all' diff --git a/src/adapters/embed.js b/src/adapters/embed.js index 433b647a3..dc5bc488a 100644 --- a/src/adapters/embed.js +++ b/src/adapters/embed.js @@ -1,5 +1,5 @@ -import { load as loadIcons } from '../components/Icon' -import { load as loadIllos } from '../components/Illo' +import { load as loadIcons } from '../components/Icon/Icon.utils' +import { load as loadIllos } from '../components/Illo/Illo.utils' import icons from '../components/Icon/icons.embed' import illos from '../components/Illo/illos.embed' diff --git a/src/components/Accordion/Accordion.Body.tsx b/src/components/Accordion/Accordion.Body.tsx index 7098c7b82..83e5a9c77 100644 --- a/src/components/Accordion/Accordion.Body.tsx +++ b/src/components/Accordion/Accordion.Body.tsx @@ -1,10 +1,10 @@ import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import propConnect from '../PropProvider/propConnect' -import Collapsible from '../Collapsible/index' +import Collapsible from '../Collapsible' import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' -import { BodyUI } from './Accordion.css' +import { BodyUI } from './styles/Accordion.css' import { BodyProps } from './Accordion.types' import { COMPONENT_KEY, mapConnectedPropsAsProps } from './Accordion.utils' diff --git a/src/components/Accordion/Accordion.Section.tsx b/src/components/Accordion/Accordion.Section.tsx index 6d4fbd52a..bae298c92 100644 --- a/src/components/Accordion/Accordion.Section.tsx +++ b/src/components/Accordion/Accordion.Section.tsx @@ -7,7 +7,7 @@ import { createUniqueIDFactory } from '../../utilities/id' import { noop } from '../../utilities/other' import { COMPONENT_KEY, withUuid } from './Accordion.utils' import { SectionProps } from './Accordion.types' -import { SectionUI } from './Accordion.css' +import { SectionUI } from './styles/Accordion.css' const nextUuid = createUniqueIDFactory('AccordionSection') diff --git a/src/components/Accordion/Accordion.Title.tsx b/src/components/Accordion/Accordion.Title.tsx index 61905878d..24e35da2e 100644 --- a/src/components/Accordion/Accordion.Title.tsx +++ b/src/components/Accordion/Accordion.Title.tsx @@ -8,7 +8,7 @@ import Keys from '../../constants/Keys' import { classNames } from '../../utilities/classNames' import { memoize } from '../../utilities/memoize' import { noop } from '../../utilities/other' -import { makeTitleUI } from './Accordion.css' +import { makeTitleUI } from './styles/Accordion.css' import { TitleProps } from './Accordion.types' import { COMPONENT_KEY, mapConnectedPropsAsProps } from './Accordion.utils' @@ -103,6 +103,8 @@ class Title extends React.Component { getTitleUI() { const selector = this.getIsLink() ? Link : 'div' + // TODO: fix typescript complains + // @ts-ignore return this.makeTitleUI(selector) } diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 2551b37ae..5acdcb405 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -9,7 +9,7 @@ import Link from './Accordion.Link' import Title from './Accordion.Title' import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' -import { AccordionUI } from './Accordion.css' +import { AccordionUI } from './styles/Accordion.css' import { COMPONENT_KEY } from './Accordion.utils' export const classNameStrings = { diff --git a/src/components/Accordion/__tests__/Accordion.Body.test.js b/src/components/Accordion/__tests__/Accordion.Body.test.js index 6c1a69771..597c0e9dd 100644 --- a/src/components/Accordion/__tests__/Accordion.Body.test.js +++ b/src/components/Accordion/__tests__/Accordion.Body.test.js @@ -1,9 +1,8 @@ import React from 'react' -import { mount, shallow } from 'enzyme' +import { mount } from 'enzyme' import Accordion from '../Accordion' import Collapsible from '../../Collapsible' import Section from '../Accordion.Section' -import Title, { classNameStrings as titleClassNames } from '../Accordion.Title' import Body, { classNameStrings as classNames } from '../Accordion.Body' describe('ClassNames', () => { diff --git a/src/components/Accordion/Accordion.css.ts b/src/components/Accordion/styles/Accordion.css.ts similarity index 80% rename from src/components/Accordion/Accordion.css.ts rename to src/components/Accordion/styles/Accordion.css.ts index 95593b94b..048ebd604 100644 --- a/src/components/Accordion/Accordion.css.ts +++ b/src/components/Accordion/styles/Accordion.css.ts @@ -1,10 +1,10 @@ -import styled from '../styled' -import baseStyles from '../../styles/resets/baseStyles.css' -import { breakpoint } from '../../styles/mixins/breakpoints.css' -import { getColor } from '../../styles/utilities/color' -import PageConfig from '../Page/styles/Page.config.css' -import { classNameStrings as titleClassNames } from './Accordion.Title' -import { setFontSize } from '../../styles/utilities/font' +import styled from '../../styled' +import baseStyles from '../../../styles/resets/baseStyles.css' +import { breakpoint } from '../../../styles/mixins/breakpoints.css' +import { getColor } from '../../../styles/utilities/color' +import PageConfig from '../../Page/styles/Page.config.css' +import { classNameStrings as titleClassNames } from '../Accordion.Title' +import { setFontSize } from '../../../styles/utilities/font' export const AccordionUI = styled('div')` ${baseStyles}; diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx index fb90164cc..9c6c42232 100644 --- a/src/components/Alert/Alert.tsx +++ b/src/components/Alert/Alert.tsx @@ -17,7 +17,7 @@ import { CloseWrapperUI, ContentUI, IconWrapperUI, -} from './Alert.css' +} from './styles/Alert.css' export interface Props { actionRight?: any diff --git a/src/components/Alert/Alert.css.ts b/src/components/Alert/styles/Alert.css.ts similarity index 87% rename from src/components/Alert/Alert.css.ts rename to src/components/Alert/styles/Alert.css.ts index a6829501d..417fe6107 100644 --- a/src/components/Alert/Alert.css.ts +++ b/src/components/Alert/styles/Alert.css.ts @@ -1,8 +1,8 @@ -import styled from '../styled' -import baseStyles from '../../styles/resets/baseStyles.css.js' -import { STATUSES } from '../../styles/configs/constants' -import { getColor } from '../../styles/utilities/color' -import forEach from '../../styles/utilities/forEach' +import styled from '../../styled' +import baseStyles from '../../../styles/resets/baseStyles.css' +import { STATUSES } from '../../../styles/configs/constants' +import { getColor } from '../../../styles/utilities/color' +import forEach from '../../../styles/utilities/forEach' export const config = { backgroundColor: getColor('state.warning.backgroundColor'), diff --git a/src/components/Animate/Animate.tsx b/src/components/Animate/Animate.tsx index 716eb5397..5cf2ed3c2 100644 --- a/src/components/Animate/Animate.tsx +++ b/src/components/Animate/Animate.tsx @@ -1,4 +1,4 @@ -import { AnimationSequence } from './types' +import { AnimationSequence } from './Animate.types' import * as React from 'react' import { Transition } from 'react-transition-group' import { getSequenceNames } from '../../utilities/animation' @@ -6,8 +6,8 @@ import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' import { noop } from '../../utilities/other' import { getEasingTiming } from '../../utilities/easing' -import { AnimateUI } from './styles/Animate.css.js' -import { COMPONENT_KEY } from './utils' +import { AnimateUI } from './styles/Animate.css' +import { COMPONENT_KEY } from './Animate.utils' export interface Props { animateOnMount: boolean diff --git a/src/components/Animate/types.ts b/src/components/Animate/Animate.types.ts similarity index 100% rename from src/components/Animate/types.ts rename to src/components/Animate/Animate.types.ts diff --git a/src/components/Animate/utils.ts b/src/components/Animate/Animate.utils.ts similarity index 100% rename from src/components/Animate/utils.ts rename to src/components/Animate/Animate.utils.ts diff --git a/src/components/Animate/index.ts b/src/components/Animate/index.ts index 6bf9da92b..8487ab329 100644 --- a/src/components/Animate/index.ts +++ b/src/components/Animate/index.ts @@ -1,5 +1,5 @@ -import { propConnect } from '../PropProvider/index' +import { propConnect } from '../PropProvider' import Animate from './Animate' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Animate.utils' export default propConnect(COMPONENT_KEY)(Animate) diff --git a/src/components/AnimateGroup/AnimateGroup.tsx b/src/components/AnimateGroup/AnimateGroup.tsx index 245cc62ed..680e23282 100644 --- a/src/components/AnimateGroup/AnimateGroup.tsx +++ b/src/components/AnimateGroup/AnimateGroup.tsx @@ -4,8 +4,8 @@ import getValidProps from '@helpscout/react-utils/dist/getValidProps' import PropProvider from '../PropProvider' import propConnect from '../PropProvider/propConnect' import { classNames } from '../../utilities/classNames' -import { namespaceComponent, getComponentKey } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' +import { getComponentKey } from '../../utilities/component' +import { COMPONENT_KEY } from './AnimateGroup.utils' export interface Props { appear?: any diff --git a/src/components/AnimateGroup/utils.ts b/src/components/AnimateGroup/AnimateGroup.utils.ts similarity index 100% rename from src/components/AnimateGroup/utils.ts rename to src/components/AnimateGroup/AnimateGroup.utils.ts diff --git a/src/components/ArticleCard/ArticleCard.tsx b/src/components/ArticleCard/ArticleCard.tsx index 3dc825550..379c99d9f 100644 --- a/src/components/ArticleCard/ArticleCard.tsx +++ b/src/components/ArticleCard/ArticleCard.tsx @@ -5,7 +5,7 @@ import Truncate from '../Truncate' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' import { isString } from '../../utilities/is' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './ArticleCard.utils' import { ArticleCardUI, ContentUI, diff --git a/src/components/ArticleCard/utils.ts b/src/components/ArticleCard/ArticleCard.utils.ts similarity index 100% rename from src/components/ArticleCard/utils.ts rename to src/components/ArticleCard/ArticleCard.utils.ts diff --git a/src/components/Attachment/Provider.ts b/src/components/Attachment/Attachment.Provider.ts similarity index 100% rename from src/components/Attachment/Provider.ts rename to src/components/Attachment/Attachment.Provider.ts diff --git a/src/components/Attachment/Attachment.tsx b/src/components/Attachment/Attachment.tsx index 19a362628..69899d8e3 100644 --- a/src/components/Attachment/Attachment.tsx +++ b/src/components/Attachment/Attachment.tsx @@ -1,8 +1,8 @@ -import { AttachmentProp } from './types' import * as React from 'react' -import { UIState } from '../../constants/types.js' +import { AttachmentProp } from './Attachment.types' +import { UIState } from '../../constants/types' import getValidProps from '@helpscout/react-utils/dist/getValidProps' -import AttachmentProvider from './Provider' +import AttachmentProvider from './Attachment.Provider' import CloseButton from '../CloseButton' import Image from '../Image' import Text from '../Text' @@ -11,8 +11,8 @@ import styled from '../styled' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' import { noop } from '../../utilities/other' -import { COMPONENT_KEY } from './utils' -import css, { ErrorBorderUI } from './Attachment.css.js' +import { COMPONENT_KEY } from './Attachment.utils' +import css, { ErrorBorderUI } from './Attachment.css' export const Provider = AttachmentProvider diff --git a/src/components/Attachment/types.ts b/src/components/Attachment/Attachment.types.ts similarity index 100% rename from src/components/Attachment/types.ts rename to src/components/Attachment/Attachment.types.ts diff --git a/src/components/Attachment/utils.ts b/src/components/Attachment/Attachment.utils.ts similarity index 100% rename from src/components/Attachment/utils.ts rename to src/components/Attachment/Attachment.utils.ts diff --git a/src/components/Attachment/index.ts b/src/components/Attachment/index.ts index baa69ff6c..b952c3db9 100644 --- a/src/components/Attachment/index.ts +++ b/src/components/Attachment/index.ts @@ -1,6 +1,6 @@ -import { propConnect } from '../PropProvider/index' +import { propConnect } from '../PropProvider' import Attachment from './Attachment' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Attachment.utils' export { Provider } from './Attachment' export default propConnect(COMPONENT_KEY)(Attachment) diff --git a/src/components/AttachmentList/index.js b/src/components/AttachmentList/AttachmentList.tsx similarity index 92% rename from src/components/AttachmentList/index.js rename to src/components/AttachmentList/AttachmentList.tsx index d4c3b0e93..21cd82194 100644 --- a/src/components/AttachmentList/index.js +++ b/src/components/AttachmentList/AttachmentList.tsx @@ -1,5 +1,4 @@ -// @flow -import React, { Component } from 'react' +import * as React from 'react' import Attachment from '../Attachment' import Icon from '../Icon' import Inline from '../Inline' @@ -7,18 +6,18 @@ import Overflow from '../Overflow' import styled from '../styled' import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' -import css from './styles/AttachmentList.css.js' +import css from './styles/AttachmentList.css' type Props = { - children: Array | string, - className?: string, - downloadAllLabel: string, - onDownloadAllClick: () => void, - showDownloadAll: boolean, - withOverflow: boolean, + children: Array | string + className?: string + downloadAllLabel: string + onDownloadAllClick: () => void + showDownloadAll: boolean + withOverflow: boolean } -export class AttachmentList extends Component { +export class AttachmentList extends React.Component { static defaultProps = { children: [], downloadAllLabel: 'Download All', diff --git a/src/components/AttachmentList/__tests__/AttachmentList.test.js b/src/components/AttachmentList/__tests__/AttachmentList.test.js index c8e658c01..c8fab065c 100644 --- a/src/components/AttachmentList/__tests__/AttachmentList.test.js +++ b/src/components/AttachmentList/__tests__/AttachmentList.test.js @@ -1,6 +1,6 @@ import React from 'react' import { mount, shallow } from 'enzyme' -import { AttachmentList } from '../index' +import { AttachmentList } from '../AttachmentList' import { Attachment, Icon } from '../../index' const ui = { diff --git a/src/components/AttachmentList/index.ts b/src/components/AttachmentList/index.ts new file mode 100644 index 000000000..ec7afad9c --- /dev/null +++ b/src/components/AttachmentList/index.ts @@ -0,0 +1,3 @@ +import AttachmentList from './AttachmentList' + +export default AttachmentList diff --git a/src/components/Avatar/Avatar.Crop.tsx b/src/components/Avatar/Avatar.Crop.tsx index 217eb313b..f93b6393c 100644 --- a/src/components/Avatar/Avatar.Crop.tsx +++ b/src/components/Avatar/Avatar.Crop.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { getEasingTiming } from '../../utilities/easing' import { classNames } from '../../utilities/classNames' -import { CropUI } from './Avatar.css' +import { CropUI } from './styles/Avatar.css' export const AvatarCrop = props => { const { diff --git a/src/components/Avatar/Avatar.Image.tsx b/src/components/Avatar/Avatar.Image.tsx index d61c718ae..eb19daea6 100644 --- a/src/components/Avatar/Avatar.Image.tsx +++ b/src/components/Avatar/Avatar.Image.tsx @@ -3,7 +3,7 @@ import VisuallyHidden from '../VisuallyHidden' import { classNames } from '../../utilities/classNames' import { getEasingTiming } from '../../utilities/easing' import { noop } from '../../utilities/other' -import { ImageWrapperUI, ImageUI } from './Avatar.css' +import { ImageWrapperUI, ImageUI } from './styles/Avatar.css' export const AvatarImage = props => { const { diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index 82f26eec1..89dca5b20 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/src/components/Avatar/Avatar.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import propConnect from '../PropProvider/propConnect' -import { StatusDotStatus } from '../StatusDot/types' +import { StatusDotStatus } from '../StatusDot/StatusDot.types' import { AvatarShape, AvatarSize } from './Avatar.types' import StatusDot from '../StatusDot' import { includes } from '../../utilities/arrays' @@ -16,7 +16,7 @@ import { OuterBorderUI, StatusUI, TitleUI, -} from './Avatar.css' +} from './styles/Avatar.css' import { COMPONENT_KEY, IMAGE_STATES } from './Avatar.utils' export interface Props { diff --git a/src/components/Avatar/Avatar.css.ts b/src/components/Avatar/styles/Avatar.css.ts similarity index 92% rename from src/components/Avatar/Avatar.css.ts rename to src/components/Avatar/styles/Avatar.css.ts index 6453de357..8b657336d 100644 --- a/src/components/Avatar/Avatar.css.ts +++ b/src/components/Avatar/styles/Avatar.css.ts @@ -1,8 +1,8 @@ -import baseStyles from '../../styles/resets/baseStyles.css.js' -import { getColor, getThemeBrandProp } from '../../styles/utilities/color' -import forEach from '../../styles/utilities/forEach' -import variableFontSize from '../../styles/utilities/variableFontSize' -import styled from '../styled' +import baseStyles from '../../../styles/resets/baseStyles.css' +import { getColor, getThemeBrandProp } from '../../../styles/utilities/color' +import forEach from '../../../styles/utilities/forEach' +import variableFontSize from '../../../styles/utilities/variableFontSize' +import styled from '../../styled' export const config = { borderRadius: 3, diff --git a/src/components/AvatarGrid/AvatarGrid.js b/src/components/AvatarGrid/AvatarGrid.tsx similarity index 85% rename from src/components/AvatarGrid/AvatarGrid.js rename to src/components/AvatarGrid/AvatarGrid.tsx index 16d56b6c5..93fb3a725 100644 --- a/src/components/AvatarGrid/AvatarGrid.js +++ b/src/components/AvatarGrid/AvatarGrid.tsx @@ -1,37 +1,37 @@ -// @flow -import type { AvatarShape, AvatarSize } from '../Avatar/types' -import React, { PureComponent as Component } from 'react' +import * as React from 'react' +import { AvatarShape, AvatarSize } from '../Avatar/Avatar.types' import getValidProps from '@helpscout/react-utils/dist/getValidProps' +import propConnect from '../PropProvider/propConnect' import Avatar from '../Avatar' import Animate from '../Animate' import styled from '../styled' import { classNames } from '../../utilities/classNames' import { namespaceComponent, isComponentNamed } from '../../utilities/component' -import avatarGridWrapperCSS from './styles/AvatarGridWrapper.css.js' -import avatarGridContainerCSS from './styles/AvatarGridContainer.css.js' -import avatarGridCSS from './styles/AvatarGrid.css.js' -import { COMPONENT_KEY } from './utils' +import avatarGridWrapperCSS from './styles/AvatarGridWrapper.css' +import avatarGridContainerCSS from './styles/AvatarGridContainer.css' +import avatarGridCSS from './styles/AvatarGrid.css' +import { COMPONENT_KEY } from './AvatarGrid.utils' import { COMPONENT_KEY as AVATAR_KEY } from '../Avatar/Avatar.utils' type Props = { - animationEasing: string, - animationSequence: string, - borderColor?: string, - center: boolean, - children?: any, - className?: string, - max: number, - outerBorderColor?: string, - shape: AvatarShape, - showStatusBorderColor: boolean, - size: AvatarSize, + animationEasing: string + animationSequence: string + borderColor?: string + center: boolean + children?: any + className?: string + max: number + outerBorderColor?: string + shape: AvatarShape + showStatusBorderColor: boolean + size: AvatarSize } const AvatarGridWrapper = styled('div')(avatarGridWrapperCSS) const AvatarGridContainer = styled('div')(avatarGridContainerCSS) const AvatarGridComponent = styled('div')(avatarGridCSS) -class AvatarGrid extends Component { +class AvatarGrid extends React.PureComponent { static defaultProps = { animationEasing: 'bounce', animationSequence: 'fade', diff --git a/src/components/AvatarGrid/utils.js b/src/components/AvatarGrid/AvatarGrid.utils.ts similarity index 100% rename from src/components/AvatarGrid/utils.js rename to src/components/AvatarGrid/AvatarGrid.utils.ts diff --git a/src/components/AvatarGrid/index.js b/src/components/AvatarGrid/index.ts similarity index 62% rename from src/components/AvatarGrid/index.js rename to src/components/AvatarGrid/index.ts index ebf69ea5e..05127e0fa 100644 --- a/src/components/AvatarGrid/index.js +++ b/src/components/AvatarGrid/index.ts @@ -1,5 +1,4 @@ -// @flow -import { propConnect } from '../PropProvider' +import { propConnect } from '../PropProvider/index' import AvatarGrid from './AvatarGrid' export default propConnect('AvatarGrid')(AvatarGrid) diff --git a/src/components/AvatarGrid/styles/AvatarGrid.css.js b/src/components/AvatarGrid/styles/AvatarGrid.css.js index 33b6524c1..88b9a2ff2 100644 --- a/src/components/AvatarGrid/styles/AvatarGrid.css.js +++ b/src/components/AvatarGrid/styles/AvatarGrid.css.js @@ -1,4 +1,3 @@ -// @flow import baseStyles from '../../../styles/resets/baseStyles.css.js' const css = ` diff --git a/src/components/AvatarGrid/styles/AvatarGridContainer.css.js b/src/components/AvatarGrid/styles/AvatarGridContainer.css.js index 6be87522d..e97db4445 100644 --- a/src/components/AvatarGrid/styles/AvatarGridContainer.css.js +++ b/src/components/AvatarGrid/styles/AvatarGridContainer.css.js @@ -1,4 +1,3 @@ -// @flow import baseStyles from '../../../styles/resets/baseStyles.css.js' const css = ` diff --git a/src/components/AvatarGrid/styles/AvatarGridWrapper.css.js b/src/components/AvatarGrid/styles/AvatarGridWrapper.css.js index fb4a2dbb2..c0f55cf83 100644 --- a/src/components/AvatarGrid/styles/AvatarGridWrapper.css.js +++ b/src/components/AvatarGrid/styles/AvatarGridWrapper.css.js @@ -1,4 +1,3 @@ -// @flow import baseStyles from '../../../styles/resets/baseStyles.css.js' const css = ` diff --git a/src/components/AvatarList/AvatarList.tsx b/src/components/AvatarList/AvatarList.tsx index 60f3f0cfc..e06c0dde4 100644 --- a/src/components/AvatarList/AvatarList.tsx +++ b/src/components/AvatarList/AvatarList.tsx @@ -12,7 +12,7 @@ import { getComponentKey, } from '../../utilities/component' import { AvatarListWrapperUI } from './styles/AvatarList.css.js' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './AvatarList.utils' import { COMPONENT_KEY as AVATAR_KEY } from '../Avatar/Avatar.utils' export interface Props { diff --git a/src/components/AvatarList/utils.js b/src/components/AvatarList/AvatarList.utils.ts similarity index 100% rename from src/components/AvatarList/utils.js rename to src/components/AvatarList/AvatarList.utils.ts diff --git a/src/components/AvatarList/styles/AvatarList.css.js b/src/components/AvatarList/styles/AvatarList.css.js index 3f8a8d7bc..2fdbfd7c8 100644 --- a/src/components/AvatarList/styles/AvatarList.css.js +++ b/src/components/AvatarList/styles/AvatarList.css.js @@ -1,4 +1,3 @@ -// @flow import baseStyles from '../../../styles/resets/baseStyles.css.js' import styled from '../../styled' diff --git a/src/components/AvatarStack/AvatarStack.tsx b/src/components/AvatarStack/AvatarStack.tsx index 29b116b58..e2471c972 100644 --- a/src/components/AvatarStack/AvatarStack.tsx +++ b/src/components/AvatarStack/AvatarStack.tsx @@ -9,7 +9,11 @@ import PropProvider from '../PropProvider' import { classNames } from '../../utilities/classNames' import { isComponentNamed, getComponentKey } from '../../utilities/component' import { isOdd, getMiddleIndex } from '../../utilities/number' -import { AvatarStackUI, AvatarStackLayeringUI, ItemUI } from './AvatarStack.css' +import { + AvatarStackUI, + AvatarStackLayeringUI, + ItemUI, +} from './styles/AvatarStack.css' import { COMPONENT_KEY } from './AvatarStack.utils' import { COMPONENT_KEY as AVATAR_KEY } from '../Avatar/Avatar.utils' @@ -136,11 +140,11 @@ export class AvatarStack extends React.PureComponent { if (!shouldLayerStack) return { zIndex } - if (currentCount > 2 && isOdd(currentCount)) { + if (currentCount > 2 && isOdd(`${currentCount}`)) { if (isOdd(index)) { zIndex = zIndex + 1 } - if (index === getMiddleIndex(currentCount)) { + if (index === getMiddleIndex(`${currentCount}`)) { zIndex = zIndex + 2 } } diff --git a/src/components/AvatarStack/AvatarStack.css.ts b/src/components/AvatarStack/styles/AvatarStack.css.ts similarity index 85% rename from src/components/AvatarStack/AvatarStack.css.ts rename to src/components/AvatarStack/styles/AvatarStack.css.ts index bb0b0cfcc..e29025203 100644 --- a/src/components/AvatarStack/AvatarStack.css.ts +++ b/src/components/AvatarStack/styles/AvatarStack.css.ts @@ -1,5 +1,5 @@ -import baseStyles from '../../styles/resets/baseStyles.css.js' -import styled from '../styled' +import baseStyles from '../../../styles/resets/baseStyles.css' +import styled from '../../styled' export const config = { borderWidth: '2px', diff --git a/src/components/Badge/index.js b/src/components/Badge/Badge.tsx similarity index 74% rename from src/components/Badge/index.js rename to src/components/Badge/Badge.tsx index 546a65d65..0cef282bb 100644 --- a/src/components/Badge/index.js +++ b/src/components/Badge/Badge.tsx @@ -1,21 +1,20 @@ -// @flow -import type { UIStatus } from '../../constants/types' -import React from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import styled from '../styled' import { classNames } from '../../utilities/classNames' -import css from './styles/Badge.css.js' +import css from './styles/Badge.css' +import { UIStatus } from '../../constants/types' type BadgeDisplay = 'block' | 'inlineBlock' type Props = { - children?: any, - className?: string, - count?: boolean, - display: BadgeDisplay, - size?: string, - status?: UIStatus, - isSquare?: boolean, - white?: boolean, + children?: any + className?: string + count?: boolean + display: BadgeDisplay + size?: string + status?: UIStatus + isSquare?: boolean + white?: boolean } const Badge = (props: Props) => { diff --git a/src/components/Badge/index.ts b/src/components/Badge/index.ts new file mode 100644 index 000000000..3396d8bd6 --- /dev/null +++ b/src/components/Badge/index.ts @@ -0,0 +1,3 @@ +import Badge from './Badge' + +export default Badge diff --git a/src/components/Badge/styles/Badge.css.js b/src/components/Badge/styles/Badge.css.js index 77d5d00f1..339102a91 100644 --- a/src/components/Badge/styles/Badge.css.js +++ b/src/components/Badge/styles/Badge.css.js @@ -1,4 +1,3 @@ -// @flow import { STATUSES } from '../../../styles/configs/constants' import baseStyles from '../../../styles/resets/baseStyles.css.js' import { getColor } from '../../../styles/utilities/color' @@ -57,7 +56,7 @@ const css = ` } ` -function makeStatusStyles(): string { +function makeStatusStyles() { return forEach( STATUSES, status => ` diff --git a/src/components/BlankSlate/BlankSlate.tsx b/src/components/BlankSlate/BlankSlate.tsx index d9733ad08..0af2c1334 100644 --- a/src/components/BlankSlate/BlankSlate.tsx +++ b/src/components/BlankSlate/BlankSlate.tsx @@ -4,8 +4,13 @@ import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' -import { BlankSlateUI, HeadingUI, TextUI, IlloUI } from './BlankSlate.css' +import { COMPONENT_KEY } from './BlankSlate.utils' +import { + BlankSlateUI, + HeadingUI, + TextUI, + IlloUI, +} from './styles/BlankSlate.css' interface Props { className?: string diff --git a/src/components/BlankSlate/utils.ts b/src/components/BlankSlate/BlankSlate.utils.ts similarity index 100% rename from src/components/BlankSlate/utils.ts rename to src/components/BlankSlate/BlankSlate.utils.ts diff --git a/src/components/BlankSlate/__tests__/BlankSlate.test.tsx b/src/components/BlankSlate/__tests__/BlankSlate.test.tsx index 24d5270ec..5e7ec5051 100644 --- a/src/components/BlankSlate/__tests__/BlankSlate.test.tsx +++ b/src/components/BlankSlate/__tests__/BlankSlate.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' -import { mount, render } from 'enzyme' +import { mount } from 'enzyme' import BlankSlate from '../BlankSlate' -import { TextUI, HeadingUI, IlloUI } from '../BlankSlate.css' +import { TextUI, HeadingUI, IlloUI } from '../styles/BlankSlate.css' describe('ClassName', () => { test('Has default component className', () => { diff --git a/src/components/BlankSlate/BlankSlate.css.js b/src/components/BlankSlate/styles/BlankSlate.css.js similarity index 76% rename from src/components/BlankSlate/BlankSlate.css.js rename to src/components/BlankSlate/styles/BlankSlate.css.js index 6a5f2fdf2..c187c94d4 100644 --- a/src/components/BlankSlate/BlankSlate.css.js +++ b/src/components/BlankSlate/styles/BlankSlate.css.js @@ -1,10 +1,10 @@ -import { getColor } from '../../styles/utilities/color' -import variableFontSize from '../../styles/utilities/variableFontSize' -import styled from '../styled' +import { getColor } from '../../../styles/utilities/color' +import variableFontSize from '../../../styles/utilities/variableFontSize' +import styled from '../../styled' -import Heading from '../Heading' -import Text from '../Text' -import Illo from '../Illo' +import Heading from '../../Heading' +import Text from '../../Text' +import Illo from '../../Illo' export const IlloUI = styled(Illo)` margin: 0; diff --git a/src/components/Button/Button.js b/src/components/Button/Button.tsx similarity index 74% rename from src/components/Button/Button.js rename to src/components/Button/Button.tsx index 3ee1cf59a..3f4387b13 100644 --- a/src/components/Button/Button.js +++ b/src/components/Button/Button.tsx @@ -1,41 +1,38 @@ -// @flow -import type { UIState } from '../../constants/types' -import React, { PureComponent as Component } from 'react' +import * as React from 'react' +import { UIState } from '../../constants/types' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { namespaceComponent } from '../../utilities/component' import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' import RouteWrapper from '../RouteWrapper' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Button.utils' type ButtonSelector = 'a' | 'button' | 'input' - type ButtonSize = 'lg' | 'md' | 'sm' | 'xs' - type Props = { - accessibilityLabel?: string, - block: boolean, - buttonRef: (ref: any) => void, - children?: any, - className?: string, - danger: boolean, - disabled: boolean, - innerRef: (ref: any) => void, - isActive: boolean, - isFirst: boolean, - isNotOnly: boolean, - isLast: boolean, - outline: boolean, - plain: boolean, - primary: boolean, - selector: ButtonSelector, - size: ButtonSize, - state?: UIState, - submit: boolean, - theme?: string, + accessibilityLabel?: string + block: boolean + buttonRef: (ref: any) => void + children?: any + className?: string + danger: boolean + disabled: boolean + innerRef: (ref: any) => void + isActive: boolean + isFirst: boolean + isNotOnly: boolean + isLast: boolean + outline: boolean + plain: boolean + primary: boolean + selector: ButtonSelector + size: ButtonSize + state?: UIState + submit: boolean + theme?: string } -class Button extends Component { +class Button extends React.PureComponent { static defaultProps = { block: false, buttonRef: noop, @@ -56,7 +53,7 @@ class Button extends Component { static BlueComponentVersion = 1 - setInnerRef = (node: HTMLElement) => { + setInnerRef = node => { this.props.buttonRef(node) this.props.innerRef(node) } diff --git a/src/components/Button/Button.types.ts b/src/components/Button/Button.types.ts new file mode 100644 index 000000000..97f07bf63 --- /dev/null +++ b/src/components/Button/Button.types.ts @@ -0,0 +1,13 @@ +export type ButtonKind = + | 'primary' + | 'primaryAlt' + | 'secondary' + | 'secondaryAlt' + | 'tertiary' + | 'default' + | 'link' + | 'icon' + +export type ButtonState = 'default' | 'danger' | 'success' + +export type ButtonSize = 'xl' | 'lgxl' | 'lg' | 'md' | 'sm' | 'xs' diff --git a/src/components/Button/utils.js b/src/components/Button/Button.utils.ts similarity index 100% rename from src/components/Button/utils.js rename to src/components/Button/Button.utils.ts diff --git a/src/components/Button/ButtonV2.js b/src/components/Button/ButtonV2.tsx similarity index 82% rename from src/components/Button/ButtonV2.js rename to src/components/Button/ButtonV2.tsx index 47bf16a34..c1004018d 100644 --- a/src/components/Button/ButtonV2.js +++ b/src/components/Button/ButtonV2.tsx @@ -1,7 +1,6 @@ -// @flow -import type { ButtonKind, ButtonSize } from './types' -import type { UIState } from '../../constants/types' -import React, { PureComponent as Component } from 'react' +import * as React from 'react' +import { ButtonKind, ButtonSize } from './Button.types' +import { UIState } from '../../constants/types' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { namespaceComponent, isComponentNamed } from '../../utilities/component' @@ -14,35 +13,35 @@ import { ButtonContentUI, FocusUI, SpinnerUI, -} from './Button.css.js' -import { COMPONENT_KEY } from './utils' -import { COMPONENT_KEY as ICON_KEY } from '../Icon/utils' +} from './styles/Button.css' +import { COMPONENT_KEY } from './Button.utils' +import { COMPONENT_KEY as ICON_KEY } from '../Icon/Icon.utils' type Props = { - allowContentEventPropogation: boolean, - buttonRef: (ref: any) => void, - canRenderFocus: boolean, - children?: any, - className?: string, - disabled: boolean, - disableOnLoading: boolean, - kind: ButtonKind, - innerRef: (ref: any) => void, - isActive: boolean, - isBlock: boolean, - isFirst: boolean, - isNotOnly: boolean, - isLast: boolean, - isLoading: boolean, - isSuffix: boolean, - size: ButtonSize, - spinButtonOnLoading: boolean, - state?: UIState, - submit: boolean, - theme?: string, + allowContentEventPropogation: boolean + buttonRef: (ref: any) => void + canRenderFocus: boolean + children?: any + className?: string + disabled: boolean + disableOnLoading: boolean + kind: ButtonKind + innerRef: (ref: any) => void + isActive: boolean + isBlock: boolean + isFirst: boolean + isNotOnly: boolean + isLast: boolean + isLoading: boolean + isSuffix: boolean + size: ButtonSize + spinButtonOnLoading: boolean + state?: UIState + submit: boolean + theme?: string } -class Button extends Component { +class Button extends React.PureComponent { static defaultProps = { allowContentEventPropogation: true, buttonRef: noop, @@ -70,7 +69,8 @@ class Button extends Component { // TODO: Resolve data-bypass // const { href, 'data-bypass': dataBypass } = this.props // return href || dataBypass - + // TODO: fix typescript complains + // @ts-ignore return this.props.href } @@ -118,7 +118,6 @@ class Button extends Component { return React.Children.map(children, (child, index) => { if (!isComponentNamed(child, ICON_KEY)) return child - // $FlowFixMe const len = React.Children.count(children) const isFirst = index === 0 const isLast = index === len - 1 @@ -134,6 +133,8 @@ class Button extends Component { getButtonUI() { const selector = this.isLink() ? 'a' : 'button' + // TODO: fix typescript complains + // @ts-ignore return this.makeButtonUI(selector) } diff --git a/src/components/Button/index.js b/src/components/Button/index.tsx similarity index 71% rename from src/components/Button/index.js rename to src/components/Button/index.tsx index 9caebd3c9..7db02fc11 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.tsx @@ -1,16 +1,15 @@ -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import { propConnect } from '../PropProvider' import ButtonV2 from './ButtonV2' import Button from './Button' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Button.utils' type Props = { - version?: number, + version?: number } -class WrappedButton extends Component { +class WrappedButton extends React.PureComponent { render() { const { version, ...rest } = this.props diff --git a/src/components/Button/Button.css.js b/src/components/Button/styles/Button.css.js similarity index 97% rename from src/components/Button/Button.css.js rename to src/components/Button/styles/Button.css.js index 6cf69c44d..802ca6578 100644 --- a/src/components/Button/Button.css.js +++ b/src/components/Button/styles/Button.css.js @@ -1,11 +1,10 @@ -// @flow import get from 'dash-get' -import baseStyles from '../../styles/resets/baseStyles.css.js' -import Spinner from '../Spinner' -import styled from '../styled' -import { getColor } from '../../styles/utilities/color' -import forEach from '../../styles/utilities/forEach' -import variableFontSize from '../../styles/utilities/variableFontSize' +import baseStyles from '../../../styles/resets/baseStyles.css.js' +import Spinner from '../../Spinner' +import styled from '../../styled' +import { getColor } from '../../../styles/utilities/color' +import forEach from '../../../styles/utilities/forEach' +import variableFontSize from '../../../styles/utilities/variableFontSize' export const config = { borderRadius: 3, diff --git a/src/components/Button/types.js b/src/components/Button/types.js deleted file mode 100644 index 02d744461..000000000 --- a/src/components/Button/types.js +++ /dev/null @@ -1,22 +0,0 @@ -export type ButtonKind = -| 'primary' -| 'primaryAlt' -| 'secondary' -| 'secondaryAlt' -| 'tertiary' -| 'default' -| 'link' -| 'icon' - -export type ButtonState = -| 'default' -| 'danger' -| 'success' - -export type ButtonSize = -| 'xl' -| 'lgxl' -| 'lg' -| 'md' -| 'sm' -| 'xs' diff --git a/src/components/Card/Block.js b/src/components/Card/Card.Block.tsx similarity index 78% rename from src/components/Card/Block.js rename to src/components/Card/Card.Block.tsx index f71c31722..aa3f80401 100644 --- a/src/components/Card/Block.js +++ b/src/components/Card/Card.Block.tsx @@ -1,28 +1,26 @@ -// @flow -import type { UISize } from '../../constants/types' -import React, { PureComponent as Component } from 'react' +import * as React from 'react' +import { UISize } from '../../constants/types' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import Scrollable from '../Scrollable' import styled from '../styled' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' import { noop } from '../../utilities/other' -import css from './styles/Block.css.js' -import { COMPONENT_KEY } from './utils' +import css from './styles/Block.css' +import { COMPONENT_KEY } from './Card.utils' type Props = { - bgMuted: boolean, - children?: any, - className?: string, - flex?: boolean, - scrollable: boolean, - scrollableRef: () => void, - onScroll: () => void, - flex: boolean, - size?: UISize, + bgMuted: boolean + children?: any + className?: string + flex?: boolean + scrollable: boolean + scrollableRef: () => void + onScroll: () => void + size?: UISize } -class Block extends Component { +class Block extends React.PureComponent { static defaultProps = { onScroll: noop, scrollableRef: noop, diff --git a/src/components/Card/Card.js b/src/components/Card/Card.tsx similarity index 74% rename from src/components/Card/Card.js rename to src/components/Card/Card.tsx index 7ddc4c5b6..9b27b6290 100644 --- a/src/components/Card/Card.js +++ b/src/components/Card/Card.tsx @@ -1,37 +1,36 @@ -// @flow -import type { BlockSelectorTag } from '../../constants/types' -import React, { PureComponent as Component } from 'react' +import * as React from 'react' +import { BlockSelectorTag } from '../../constants/types' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import Link from '../Link' -import Block from './Block' +import Block from './Card.Block' import styled from '../styled' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' import { noop } from '../../utilities/other' -import css from './styles/Card.css.js' -import { COMPONENT_KEY } from './utils' +import css from './styles/Card.css' +import { COMPONENT_KEY } from './Card.utils' export type Props = { - autoWordWrap?: boolean, - borderless?: boolean, - className?: string, - children?: any, - floating: boolean, - flex: boolean, - fullHeight: boolean, - hover: boolean, - href?: string, - innerRef: (node: HTMLElement) => void, - nodeRef: () => void, - onBlur: (event: Event) => void, - onClick: (event: Event) => void, - onFocus: (event: Event) => void, - seamless: boolean, - selector: BlockSelectorTag, - to?: string, + autoWordWrap?: boolean + borderless?: boolean + className?: string + children?: any + floating: boolean + flex: boolean + fullHeight: boolean + hover: boolean + href?: string + innerRef: (node: HTMLElement) => void + nodeRef: () => void + onBlur: (event: Event) => void + onClick: (event: Event) => void + onFocus: (event: Event) => void + seamless: boolean + selector: BlockSelectorTag + to?: string } -class Card extends Component { +class Card extends React.PureComponent { static defaultProps = { borderless: false, flex: false, @@ -47,7 +46,7 @@ class Card extends Component { selector: 'div', } static Block = Block - node: ?HTMLElement = null + node = null componentWillUnmount() { this.node = null diff --git a/src/components/Card/utils.js b/src/components/Card/Card.utils.ts similarity index 100% rename from src/components/Card/utils.js rename to src/components/Card/Card.utils.ts diff --git a/src/components/Card/__tests__/Card.Block.test.js b/src/components/Card/__tests__/Card.Block.test.js index 8aac6dc3d..a6ba47d2e 100644 --- a/src/components/Card/__tests__/Card.Block.test.js +++ b/src/components/Card/__tests__/Card.Block.test.js @@ -1,6 +1,6 @@ import React from 'react' import { mount } from 'enzyme' -import CardBlock from '../Block' +import CardBlock from '../Card.Block' import Scrollable from '../../Scrollable' describe('ClassName', () => { diff --git a/src/components/Card/index.js b/src/components/Card/index.ts similarity index 92% rename from src/components/Card/index.js rename to src/components/Card/index.ts index d015c5d1a..93e564770 100644 --- a/src/components/Card/index.js +++ b/src/components/Card/index.ts @@ -1,4 +1,3 @@ -// @flow import { propConnect } from '../PropProvider' import Card from './Card' diff --git a/src/components/Card/styles/Block.css.js b/src/components/Card/styles/Block.css.js index 3d31bac95..a14f0ff37 100644 --- a/src/components/Card/styles/Block.css.js +++ b/src/components/Card/styles/Block.css.js @@ -1,4 +1,3 @@ -// @flow import baseStyles from '../../../styles/resets/baseStyles.css.js' export const css = ` diff --git a/src/components/Card/styles/Card.css.js b/src/components/Card/styles/Card.css.js index 8f284a105..2c04a4d97 100644 --- a/src/components/Card/styles/Card.css.js +++ b/src/components/Card/styles/Card.css.js @@ -1,4 +1,3 @@ -// @flow import baseStyles from '../../../styles/resets/baseStyles.css.js' import cardStyles from '../../../styles/mixins/cardStyles.css.js' diff --git a/src/components/CardList/CardList.tsx b/src/components/CardList/CardList.tsx index c1533612d..d913d15ce 100644 --- a/src/components/CardList/CardList.tsx +++ b/src/components/CardList/CardList.tsx @@ -3,7 +3,7 @@ import propConnect from '../PropProvider/propConnect' import Animate from '../Animate' import AnimateGroup from '../AnimateGroup' import { isComponentTypeCard, getComponentKey } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './CardList.utils' import classNames from '../../utilities/classNames' export interface Props { diff --git a/src/components/CardList/utils.ts b/src/components/CardList/CardList.utils.ts similarity index 100% rename from src/components/CardList/utils.ts rename to src/components/CardList/CardList.utils.ts diff --git a/src/components/Centralize/Centralize.tsx b/src/components/Centralize/Centralize.tsx index 4fcdecef9..71dd4e571 100644 --- a/src/components/Centralize/Centralize.tsx +++ b/src/components/Centralize/Centralize.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import propConnect from '../PropProvider/propConnect' import { classNames } from '../../utilities/classNames' -import { CentralizeUI } from './Centralize.css' +import { CentralizeUI } from './styles/Centralize.css' import { COMPONENT_KEY } from './Centralize.utils' export interface Props { diff --git a/src/components/Centralize/Centralize.css.ts b/src/components/Centralize/styles/Centralize.css.ts similarity index 63% rename from src/components/Centralize/Centralize.css.ts rename to src/components/Centralize/styles/Centralize.css.ts index 43f9c3f8c..c5ce5bdee 100644 --- a/src/components/Centralize/Centralize.css.ts +++ b/src/components/Centralize/styles/Centralize.css.ts @@ -1,5 +1,5 @@ -import baseStyles from '../../styles/resets/baseStyles.css.js' -import styled from '../styled' +import baseStyles from '../../../styles/resets/baseStyles.css' +import styled from '../../styled' export const CentralizeUI = styled('div')` ${baseStyles} align-items: center; diff --git a/src/components/ChatInbox/Content.js b/src/components/ChatInbox/ChatInbox.Content.tsx similarity index 78% rename from src/components/ChatInbox/Content.js rename to src/components/ChatInbox/ChatInbox.Content.tsx index 44c118af7..4813d3d22 100644 --- a/src/components/ChatInbox/Content.js +++ b/src/components/ChatInbox/ChatInbox.Content.tsx @@ -1,17 +1,16 @@ -// @flow -import React, { Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './ChatInbox.utils' import { ContentUI } from './styles/Content.css.js' type Props = { - children?: any, - className?: string, + children?: any + className?: string } -class Content extends Component { +class Content extends React.Component { render() { const { className, children, ...rest } = this.props diff --git a/src/components/ChatInbox/Header.js b/src/components/ChatInbox/ChatInbox.Header.tsx similarity index 88% rename from src/components/ChatInbox/Header.js rename to src/components/ChatInbox/ChatInbox.Header.tsx index 09b398275..66d4cb8db 100644 --- a/src/components/ChatInbox/Header.js +++ b/src/components/ChatInbox/ChatInbox.Header.tsx @@ -1,5 +1,4 @@ -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import Flexy from '../Flexy' import Heading from '../Heading' @@ -8,18 +7,19 @@ import Icon from '../Icon' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' import { noop } from '../../utilities/other' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './ChatInbox.utils' import { HeaderUI, ContentUI } from './styles/Header.css.js' type Props = { - avatars?: any, - count: number, - isCollapsed: boolean, - isCollapsible: boolean, - onClick: (event: Event) => void, + avatars?: any + className?: string + count: number + isCollapsed: boolean + isCollapsible: boolean + onClick: (event: Event) => void } -class Header extends Component { +class Header extends React.PureComponent { static defaultProps = { count: 0, isCollapsible: false, diff --git a/src/components/ChatInbox/ChatInbox.js b/src/components/ChatInbox/ChatInbox.tsx similarity index 80% rename from src/components/ChatInbox/ChatInbox.js rename to src/components/ChatInbox/ChatInbox.tsx index 9f0d86831..2d7d14d5e 100644 --- a/src/components/ChatInbox/ChatInbox.js +++ b/src/components/ChatInbox/ChatInbox.tsx @@ -1,25 +1,25 @@ -// @flow -import React, { Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import Collapsible from '../Collapsible' -import Header from './Header' -import Content from './Content' +import Header from './ChatInbox.Header' +import Content from './ChatInbox.Content' import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' import { namespaceComponent, isComponentNamed } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './ChatInbox.utils' import { ChatInboxUI } from './styles/ChatInbox.css.js' type Props = { - isCollapsible: boolean, - isCollapsed: boolean, + className?: string + isCollapsible: boolean + isCollapsed: boolean } type State = { - isCollapsed: boolean, + isCollapsed: boolean } -class ChatInbox extends Component { +class ChatInbox extends React.Component { static defaultProps = { isCollapsible: false, isCollapsed: true, @@ -33,6 +33,8 @@ class ChatInbox extends Component { this.state = { isCollapsed: props.isCollapsed, } + // TODO: fix typescript complains + // @ts-ignore this._selfManageCollapse = props.isCollapsed !== undefined } @@ -42,6 +44,8 @@ class ChatInbox extends Component { if (isCollapsible) { this.setState({ isCollapsed: !this.state.isCollapsed }) } + // TODO: fix typescript complains + // @ts-ignore onClick && onClick(event) } @@ -58,7 +62,7 @@ class ChatInbox extends Component { const componentClassName = classNames('c-ChatInbox', className) - const contentMarkup = React.Children.map(children, (child, index) => { + const contentMarkup = React.Children.map(children, (child: any, index) => { const childProps = child.props if (isComponentNamed(child, COMPONENT_KEY.Header)) { diff --git a/src/components/ChatInbox/utils.js b/src/components/ChatInbox/ChatInbox.utils.ts similarity index 100% rename from src/components/ChatInbox/utils.js rename to src/components/ChatInbox/ChatInbox.utils.ts diff --git a/src/components/ChatInbox/__tests__/Content.test.js b/src/components/ChatInbox/__tests__/ChatInbox.Content.test.js similarity index 94% rename from src/components/ChatInbox/__tests__/Content.test.js rename to src/components/ChatInbox/__tests__/ChatInbox.Content.test.js index 3eff11017..a8f2392fd 100644 --- a/src/components/ChatInbox/__tests__/Content.test.js +++ b/src/components/ChatInbox/__tests__/ChatInbox.Content.test.js @@ -1,6 +1,6 @@ import React from 'react' import { mount } from 'enzyme' -import Content from '../Content' +import Content from '../ChatInbox.Content' describe('ClassName', () => { test('Has default className', () => { diff --git a/src/components/ChatInbox/__tests__/Header.test.js b/src/components/ChatInbox/__tests__/ChatInbox.Header.test.js similarity index 97% rename from src/components/ChatInbox/__tests__/Header.test.js rename to src/components/ChatInbox/__tests__/ChatInbox.Header.test.js index 9b433821c..dfee9092a 100644 --- a/src/components/ChatInbox/__tests__/Header.test.js +++ b/src/components/ChatInbox/__tests__/ChatInbox.Header.test.js @@ -1,8 +1,7 @@ import React from 'react' import { mount } from 'enzyme' -import Header from '../Header' +import Header from '../ChatInbox.Header' import { Icon, Heading, Hr } from '../../index' -import { baseComponentTest } from '../../../tests/helpers/components' describe('ClassName', () => { test('Has default className', () => { diff --git a/src/components/ChatInbox/index.js b/src/components/ChatInbox/index.ts similarity index 96% rename from src/components/ChatInbox/index.js rename to src/components/ChatInbox/index.ts index a5d228e25..27715c9e7 100644 --- a/src/components/ChatInbox/index.js +++ b/src/components/ChatInbox/index.ts @@ -1,4 +1,3 @@ -// @flow import { propConnect } from '../PropProvider' import ChatInbox from './ChatInbox' diff --git a/src/components/ChatInbox/styles/ChatInbox.css.js b/src/components/ChatInbox/styles/ChatInbox.css.js index 484df0119..de5d15efe 100644 --- a/src/components/ChatInbox/styles/ChatInbox.css.js +++ b/src/components/ChatInbox/styles/ChatInbox.css.js @@ -1,4 +1,3 @@ -// @flow import styled from '../../styled' import baseStyles from '../../../styles/resets/baseStyles.css.js' diff --git a/src/components/ChatInbox/styles/Content.css.js b/src/components/ChatInbox/styles/Content.css.js index 417995eaf..401db6c33 100644 --- a/src/components/ChatInbox/styles/Content.css.js +++ b/src/components/ChatInbox/styles/Content.css.js @@ -1,4 +1,3 @@ -// @flow import styled from '../../styled' import baseStyles from '../../../styles/resets/baseStyles.css.js' diff --git a/src/components/ChatInbox/styles/Header.css.js b/src/components/ChatInbox/styles/Header.css.js index ca83af5cb..e7f5f05f0 100644 --- a/src/components/ChatInbox/styles/Header.css.js +++ b/src/components/ChatInbox/styles/Header.css.js @@ -1,4 +1,3 @@ -// @flow import styled from '../../styled' import Flexy from '../../Flexy' import baseStyles from '../../../styles/resets/baseStyles.css.js' diff --git a/src/components/ChatList/BlankSlate.js b/src/components/ChatList/ChatList.BlankSlate.tsx similarity index 80% rename from src/components/ChatList/BlankSlate.js rename to src/components/ChatList/ChatList.BlankSlate.tsx index 4225d0380..03ab18e7c 100644 --- a/src/components/ChatList/BlankSlate.js +++ b/src/components/ChatList/ChatList.BlankSlate.tsx @@ -1,27 +1,22 @@ -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import Hr from '../Hr' import Illo from '../Illo' import Text from '../Text' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' -import { - BlankSlateUI, - IlloWrapperUI, - ContentUI, -} from './styles/BlankSlate.css.js' +import { COMPONENT_KEY } from './ChatList.utils' +import { BlankSlateUI, IlloWrapperUI, ContentUI } from './styles/BlankSlate.css' type Props = { - className?: string, - children?: any, - illoName: string, + className?: string + children?: any + illoName: string } export const defaultMessage = "You're all caught-up" -class BlankSlate extends Component { +class BlankSlate extends React.PureComponent { static defaultProps = { illoName: 'chatListBlankSlate', } diff --git a/src/components/ChatList/Item.js b/src/components/ChatList/ChatList.Item.tsx similarity index 92% rename from src/components/ChatList/Item.js rename to src/components/ChatList/ChatList.Item.tsx index cebc0c392..2716969cd 100644 --- a/src/components/ChatList/Item.js +++ b/src/components/ChatList/ChatList.Item.tsx @@ -1,5 +1,4 @@ -// @flow -import React, { Component } from 'react' +import * as React from 'react' import Animate from '../Animate' import Badge from '../Badge' import Flexy from '../Flexy' @@ -15,7 +14,7 @@ import Timestamp from '../Timestamp' import Truncate from '../Truncate' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './ChatList.utils' import { ItemUI, BlockUI, @@ -29,25 +28,26 @@ import { TagListWrapperUI, AvatarListWrapperUI, DividerWrapperUI, -} from './styles/Item.css.js' +} from './styles/Item.css' type Props = { - avatar?: any, - isAssigned: boolean, - isFocused: boolean, - isTyping: boolean, - isViewing: boolean, - isWaiting: boolean, - message: string, - messageLimit: number, - name: string, - newMessageCount: number, - tags?: any, - timestamp: string, - timestampFormatter: () => void, + avatar?: any + className?: string + isAssigned: boolean + isFocused: boolean + isTyping: boolean + isViewing: boolean + isWaiting: boolean + message: string + messageLimit: number + name: string + newMessageCount: number + tags?: any + timestamp: string + timestampFormatter: () => string } -class Item extends Component { +class Item extends React.Component { static defaultProps = { isAssigned: false, isFocused: false, diff --git a/src/components/ChatList/ChatList.js b/src/components/ChatList/ChatList.tsx similarity index 71% rename from src/components/ChatList/ChatList.js rename to src/components/ChatList/ChatList.tsx index a9d92abff..41d75ed51 100644 --- a/src/components/ChatList/ChatList.js +++ b/src/components/ChatList/ChatList.tsx @@ -1,19 +1,18 @@ -// @flow -import React, { Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import BlankSlate from './BlankSlate' -import Item from './Item' -import { ChatListUI } from './styles/ChatList.css.js' -import { COMPONENT_KEY } from './utils' +import BlankSlate from './ChatList.BlankSlate' +import Item from './ChatList.Item' +import { ChatListUI } from './styles/ChatList.css' +import { COMPONENT_KEY } from './ChatList.utils' type Props = { - className?: string, - children?: any, + className?: string + children?: any } -class ChatList extends Component { +class ChatList extends React.Component { static BlankSlate = BlankSlate static Item = Item diff --git a/src/components/ChatList/utils.js b/src/components/ChatList/ChatList.utils.ts similarity index 100% rename from src/components/ChatList/utils.js rename to src/components/ChatList/ChatList.utils.ts diff --git a/src/components/ChatList/__tests__/BlankSlate.test.js b/src/components/ChatList/__tests__/BlankSlate.test.js index 1e0072691..81204146a 100644 --- a/src/components/ChatList/__tests__/BlankSlate.test.js +++ b/src/components/ChatList/__tests__/BlankSlate.test.js @@ -1,6 +1,6 @@ import React from 'react' import { mount } from 'enzyme' -import { default as BlankSlate } from '../BlankSlate' +import { default as BlankSlate } from '../ChatList.BlankSlate' import { Illo, Text } from '../../index' describe('ClassName', () => { diff --git a/src/components/ChatList/__tests__/ChatList.test.js b/src/components/ChatList/__tests__/ChatList.test.js index 284c75916..91b173c47 100644 --- a/src/components/ChatList/__tests__/ChatList.test.js +++ b/src/components/ChatList/__tests__/ChatList.test.js @@ -1,8 +1,8 @@ import React from 'react' import { mount } from 'enzyme' import ChatList from '../ChatList' -import BlankSlate from '../BlankSlate' -import Item from '../Item' +import BlankSlate from '../ChatList.BlankSlate' +import Item from '../ChatList.Item' describe('ClassName', () => { test('Has default className', () => { diff --git a/src/components/ChatList/__tests__/Item.test.js b/src/components/ChatList/__tests__/Item.test.js index 08552a0bc..2588ec59f 100644 --- a/src/components/ChatList/__tests__/Item.test.js +++ b/src/components/ChatList/__tests__/Item.test.js @@ -1,6 +1,6 @@ import React from 'react' import { mount } from 'enzyme' -import Item from '../Item' +import Item from '../ChatList.Item' import { Animate, Avatar, diff --git a/src/components/ChatList/index.js b/src/components/ChatList/index.ts similarity index 96% rename from src/components/ChatList/index.js rename to src/components/ChatList/index.ts index b33fc5d33..c42f77ac2 100644 --- a/src/components/ChatList/index.js +++ b/src/components/ChatList/index.ts @@ -1,4 +1,3 @@ -// @flow import { propConnect } from '../PropProvider' import ChatList from './ChatList' diff --git a/src/components/ChatList/styles/BlankSlate.css.js b/src/components/ChatList/styles/BlankSlate.css.js index ff22ee43a..ebd5bb732 100644 --- a/src/components/ChatList/styles/BlankSlate.css.js +++ b/src/components/ChatList/styles/BlankSlate.css.js @@ -1,4 +1,3 @@ -// @flow import styled from '../../styled' import baseStyles from '../../../styles/resets/baseStyles.css.js' import { getColor } from '../../../styles/utilities/color' diff --git a/src/components/ChatList/styles/ChatList.css.js b/src/components/ChatList/styles/ChatList.css.js index b8cce84a2..a5a3b26f1 100644 --- a/src/components/ChatList/styles/ChatList.css.js +++ b/src/components/ChatList/styles/ChatList.css.js @@ -1,4 +1,3 @@ -// @flow import styled from '../../styled' import baseStyles from '../../../styles/resets/baseStyles.css.js' diff --git a/src/components/ChatList/styles/Item.css.js b/src/components/ChatList/styles/Item.css.js index eb3888d5d..ff34f68cf 100644 --- a/src/components/ChatList/styles/Item.css.js +++ b/src/components/ChatList/styles/Item.css.js @@ -1,4 +1,3 @@ -// @flow import styled from '../../styled' import Card from '../../Card' import Flexy from '../../Flexy' @@ -114,7 +113,7 @@ export const DividerWrapperUI = styled('div')` margin-left: -3px; ` -function makeBackgroundColorStyles(color: string): string { +function makeBackgroundColorStyles(color) { return ` background-color: ${color}; diff --git a/src/components/ChatSidebar/ChatSidebar.js b/src/components/ChatSidebar/ChatSidebar.tsx similarity index 86% rename from src/components/ChatSidebar/ChatSidebar.js rename to src/components/ChatSidebar/ChatSidebar.tsx index 5cd0288c4..091932575 100644 --- a/src/components/ChatSidebar/ChatSidebar.js +++ b/src/components/ChatSidebar/ChatSidebar.tsx @@ -1,28 +1,29 @@ -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import StatusBar from '../StatusBar' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' import { noop } from '../../utilities/other' import pluralize from '../../utilities/pluralize' import { smoothScrollTo } from '../../utilities/smoothScroll' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './ChatSidebar.utils' import { ChatSidebarUI, StatusBarWrapperUI, ContentUI, -} from './styles/ChatSidebar.css.js' +} from './styles/ChatSidebar.css' type Props = { - isShowStatusBar: boolean, - newMessageCount: number, - onHideStatusBar: () => void, - onShowStatusBar: () => void, - onScroll: () => void, - statusBarScrollTopOffset: number, + className?: string + isShowStatusBar: boolean + newMessageCount: number + onHideStatusBar: (...args: any[]) => void + onStatusBarClose: () => void + onShowStatusBar: (...args: any[]) => void + onScroll: () => void + statusBarScrollTopOffset: number } -class ChatSidebar extends Component { +class ChatSidebar extends React.PureComponent { static defaultProps = { isShowStatusBar: false, newMessageCount: 0, @@ -33,13 +34,16 @@ class ChatSidebar extends Component { } constructor(props) { - super() + super(props) + this.handleOnStatusBarClick = this.handleOnStatusBarClick.bind(this) this.handleOnStatusBarClose = this.handleOnStatusBarClose.bind(this) this.handleOnScroll = this.handleOnScroll.bind(this) this.renderStatusBar = this.renderStatusBar.bind(this) } + contentNode: any + handleOnStatusBarClick() { this.handleOnStatusBarClose() /* istanbul ignore next */ @@ -54,6 +58,8 @@ class ChatSidebar extends Component { // // For now, this method has been extensively tested manually // within Storybook. + // TODO: fix typescript complains + // @ts-ignore smoothScrollTo({ node: this.contentNode, position: 0, @@ -62,6 +68,7 @@ class ChatSidebar extends Component { handleOnStatusBarClose() { const { newMessageCount, onHideStatusBar } = this.props + onHideStatusBar(newMessageCount) } @@ -141,7 +148,7 @@ class ChatSidebar extends Component { className="c-ChatSidebar__content" fade onScroll={handleOnScroll} - scrollableRef={ref => (this.contentNode = ref)} + scrollableRef={(ref: any) => (this.contentNode = ref)} > {children} diff --git a/src/components/ChatSidebar/utils.js b/src/components/ChatSidebar/ChatSidebar.utils.ts similarity index 100% rename from src/components/ChatSidebar/utils.js rename to src/components/ChatSidebar/ChatSidebar.utils.ts diff --git a/src/components/ChatSidebar/index.js b/src/components/ChatSidebar/index.ts similarity index 94% rename from src/components/ChatSidebar/index.js rename to src/components/ChatSidebar/index.ts index 7beb53dbe..82b409d68 100644 --- a/src/components/ChatSidebar/index.js +++ b/src/components/ChatSidebar/index.ts @@ -1,4 +1,3 @@ -// @flow import { propConnect } from '../PropProvider' import ChatSidebar from './ChatSidebar' diff --git a/src/components/ChatSidebar/styles/ChatSidebar.css.js b/src/components/ChatSidebar/styles/ChatSidebar.css.ts similarity index 98% rename from src/components/ChatSidebar/styles/ChatSidebar.css.js rename to src/components/ChatSidebar/styles/ChatSidebar.css.ts index 5bb7a4d1e..59e48f8dd 100644 --- a/src/components/ChatSidebar/styles/ChatSidebar.css.js +++ b/src/components/ChatSidebar/styles/ChatSidebar.css.ts @@ -1,4 +1,3 @@ -// @flow import styled from '../../styled' import Scrollable from '../../Scrollable' import baseStyles from '../../../styles/resets/baseStyles.css.js' diff --git a/src/components/ChatTranscript/Item.js b/src/components/ChatTranscript/ChatTranscript.Item.tsx similarity index 86% rename from src/components/ChatTranscript/Item.js rename to src/components/ChatTranscript/ChatTranscript.Item.tsx index d02c243e3..73f7dd616 100644 --- a/src/components/ChatTranscript/Item.js +++ b/src/components/ChatTranscript/ChatTranscript.Item.tsx @@ -1,6 +1,5 @@ -// @flow -import React from 'react' -import LineItem from './LineItem' +import * as React from 'react' +import LineItem from './ChatTranscript.LineItem' import Attachment from '../Attachment' import AttachmentList from '../AttachmentList' import Flexy from '../Flexy' @@ -8,11 +7,7 @@ import Heading from '../Heading' import Text from '../Text' import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' -import { - convertLinksToHTML, - escapeHTML, - newlineToHTML, -} from '../../utilities/strings' +import { convertLinksToHTML, newlineToHTML } from '../../utilities/strings' import compose from '@helpscout/react-utils/dist/compose' export const ITEM_TYPES = { @@ -22,26 +17,26 @@ export const ITEM_TYPES = { } type Author = { - name?: string, + name?: string } type Props = { - action?: string, - attachments: Array, - author: Author, - body?: string, - chatId?: number | string, - children?: any, - className?: string, - createdAt?: string, - id?: number | string, - isBodySafe?: boolean, - onAttachmentClick?: () => void, - onDownloadAllAttachmentClick?: () => void, - params?: any, - showDownloadAllAttachments?: boolean, - timestamp?: string, - type?: 'line_item' | 'message' | 'note', + action?: string + attachments: Array + author: Author + body?: string + chatId?: number | string + children?: any + className?: string + createdAt?: string + id?: number | string + isBodySafe?: boolean + onAttachmentClick?: () => void + onDownloadAllAttachmentClick?: () => void + params?: any + showDownloadAllAttachments?: boolean + timestamp?: string + type?: 'line_item' | 'message' | 'note' } // convertLinksToHTML will escape for output as HTML @@ -168,6 +163,8 @@ const Item = (props: Props) => { {attachments.map((attachment, index) => { /* istanbul ignore next */ // Enzyme can't test keys :s + // TODO: fix typescript complains + // @ts-ignore const key = attachment.id ? attachment.id : `attachment-${index}` return ( diff --git a/src/components/ChatTranscript/LineItem.js b/src/components/ChatTranscript/ChatTranscript.LineItem.tsx similarity index 89% rename from src/components/ChatTranscript/LineItem.js rename to src/components/ChatTranscript/ChatTranscript.LineItem.tsx index e53da63bc..0e846f1f9 100644 --- a/src/components/ChatTranscript/LineItem.js +++ b/src/components/ChatTranscript/ChatTranscript.LineItem.tsx @@ -1,17 +1,16 @@ -// @flow -import React from 'react' +import * as React from 'react' import Text from '../Text' import { classNames } from '../../utilities/classNames' import { escapeHTML, newlineToHTML } from '../../utilities/strings' import compose from '@helpscout/react-utils/dist/compose' type Props = { - body?: string, - children?: any, - className?: string, - createdAt?: string, - isBodySafe?: boolean, - timestamp?: string, + body?: string + children?: any + className?: string + createdAt?: string + isBodySafe?: boolean + timestamp?: string } const enhanceBody = compose(newlineToHTML, escapeHTML) diff --git a/src/components/ChatTranscript/index.js b/src/components/ChatTranscript/ChatTranscript.tsx similarity index 67% rename from src/components/ChatTranscript/index.js rename to src/components/ChatTranscript/ChatTranscript.tsx index 2ecd855c6..454a7dd49 100644 --- a/src/components/ChatTranscript/index.js +++ b/src/components/ChatTranscript/ChatTranscript.tsx @@ -1,14 +1,13 @@ -// @flow -import React, { PureComponent as Component } from 'react' -import Item from './Item' +import * as React from 'react' +import Item from './ChatTranscript.Item' import { classNames } from '../../utilities/classNames' type Props = { - className?: string, - children?: any, + className?: string + children?: any } -class ChatTranscript extends Component { +class ChatTranscript extends React.Component { static Item = Item render() { diff --git a/src/components/ChatTranscript/__tests__/Item.test.js b/src/components/ChatTranscript/__tests__/ChatTranscript.Item.test.js similarity index 99% rename from src/components/ChatTranscript/__tests__/Item.test.js rename to src/components/ChatTranscript/__tests__/ChatTranscript.Item.test.js index 16a58aaed..0e62b40d3 100644 --- a/src/components/ChatTranscript/__tests__/Item.test.js +++ b/src/components/ChatTranscript/__tests__/ChatTranscript.Item.test.js @@ -1,6 +1,6 @@ import React from 'react' import { mount, shallow } from 'enzyme' -import { default as Item, ITEM_TYPES } from '../Item' +import { default as Item, ITEM_TYPES } from '../ChatTranscript.Item' import { Attachment } from '../../index' const ui = { diff --git a/src/components/ChatTranscript/__tests__/LineItem.test.js b/src/components/ChatTranscript/__tests__/ChatTranscript.LineItem.test.js similarity index 98% rename from src/components/ChatTranscript/__tests__/LineItem.test.js rename to src/components/ChatTranscript/__tests__/ChatTranscript.LineItem.test.js index df926728d..12551c62e 100644 --- a/src/components/ChatTranscript/__tests__/LineItem.test.js +++ b/src/components/ChatTranscript/__tests__/ChatTranscript.LineItem.test.js @@ -1,6 +1,6 @@ import React from 'react' import { mount, shallow } from 'enzyme' -import LineItem from '../LineItem' +import LineItem from '../ChatTranscript.LineItem' const ui = { content: '.c-ChatTranscriptLineItem__content', diff --git a/src/components/ChatTranscript/index.ts b/src/components/ChatTranscript/index.ts new file mode 100644 index 000000000..3cc25e4f1 --- /dev/null +++ b/src/components/ChatTranscript/index.ts @@ -0,0 +1,3 @@ +import ChatTranscript from './ChatTranscript' + +export default ChatTranscript diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.tsx similarity index 75% rename from src/components/Checkbox/Checkbox.js rename to src/components/Checkbox/Checkbox.tsx index bbbb0d159..2bc2f0f7b 100644 --- a/src/components/Checkbox/Checkbox.js +++ b/src/components/Checkbox/Checkbox.tsx @@ -1,15 +1,14 @@ -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import Choice from '../Choice' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Checkbox.utils' type Props = { - className?: string, + className?: string } -class Checkbox extends Component { +class Checkbox extends React.PureComponent { render() { const { className, ...rest } = this.props diff --git a/src/components/Checkbox/utils.js b/src/components/Checkbox/Checkbox.utils.ts similarity index 100% rename from src/components/Checkbox/utils.js rename to src/components/Checkbox/Checkbox.utils.ts diff --git a/src/components/Checkbox/index.js b/src/components/Checkbox/index.ts similarity index 93% rename from src/components/Checkbox/index.js rename to src/components/Checkbox/index.ts index 48975b408..4aa4019d8 100644 --- a/src/components/Checkbox/index.js +++ b/src/components/Checkbox/index.ts @@ -1,4 +1,3 @@ -// @flow import { propConnect } from '../PropProvider' import Checkbox from './Checkbox' diff --git a/src/components/Choice/Input.js b/src/components/Choice/Choice.Input.tsx similarity index 78% rename from src/components/Choice/Input.js rename to src/components/Choice/Choice.Input.tsx index 27a187b91..a5d87161d 100644 --- a/src/components/Choice/Input.js +++ b/src/components/Choice/Choice.Input.tsx @@ -1,8 +1,7 @@ -// @flow -import type { ChoiceAlign, ChoiceType, ChoiceValue } from './types' -import type { UIState } from '../../constants/types' -import React, { PureComponent as Component } from 'react' -import Backdrop from '../Input/BackdropV2' +import * as React from 'react' +import { ChoiceAlign, ChoiceType, ChoiceValue } from './Choice.types' +import { UIState } from '../../constants/types' +import Backdrop from '../Input/Input.BackdropV2' import Icon from '../Icon' import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' @@ -12,40 +11,35 @@ import { InputIconUI, InputPlaceholderUI, InputRadioUI, -} from './styles/Input.css.js' +} from './styles/Input.css' type Props = { - autoFocus: boolean, - align: ChoiceAlign, - autoFocus: boolean, - children?: any, - checked: boolean, - className?: string, - disabled: boolean, - helpText?: string, - id?: string, - inputRef: (node: HTMLElement) => void, - innerRef: (node: HTMLElement) => void, - kind?: string, - onBlur: (event: Event) => void, - onChange: ( - event: SyntheticEvent, - checked: boolean, - id?: string - ) => void, - onFocus: (event: Event) => void, - name?: string, - readOnly: boolean, - state?: UIState, - type: ChoiceType, - value: ChoiceValue, + autoFocus: boolean + align: ChoiceAlign + children?: any + checked: boolean + className?: string + disabled: boolean + helpText?: string + id?: string + inputRef: (node: HTMLElement) => void + innerRef: (node: HTMLElement) => void + kind?: string + onBlur: (event: Event) => void + onChange: (event: Event, checked: boolean, id?: string) => void + onFocus: (event: Event) => void + name?: string + readOnly: boolean + state?: UIState + type: ChoiceType + value: ChoiceValue } type State = { - isFocused: boolean, + isFocused: boolean } -class Input extends Component { +class Input extends React.PureComponent { static defaultProps = { autoFocus: false, disabled: false, @@ -70,9 +64,11 @@ class Input extends Component { this.props.onBlur(event) } - handleOnChange = (event: SyntheticEvent) => { + handleOnChange = (event: Event) => { const { id, onChange, value } = this.props + // TODO: fix typescript complains + // @ts-ignore onChange(value, event.target.checked, id) // Prevents duplicate firing of onChange event event.stopPropagation() diff --git a/src/components/Choice/Choice.js b/src/components/Choice/Choice.tsx similarity index 79% rename from src/components/Choice/Choice.js rename to src/components/Choice/Choice.tsx index 4f7730a97..dfe0e0368 100644 --- a/src/components/Choice/Choice.js +++ b/src/components/Choice/Choice.tsx @@ -1,14 +1,13 @@ -// @flow -import type { ChoiceAlign, ChoiceType, ChoiceValue } from './types' -import type { UIState } from '../../constants/types' -import React, { PureComponent as Component } from 'react' +import * as React from 'react' +import { ChoiceAlign, ChoiceType, ChoiceValue } from './Choice.types' +import { UIState } from '../../constants/types' import getValidProps from '@helpscout/react-utils/dist/getValidProps' -import Input from './Input' +import Input from './Choice.Input' import Flexy from '../Flexy' import HelpText from '../HelpText' import Text from '../Text' import VisuallyHidden from '../VisuallyHidden' -import ChoiceGroupContext from '../ChoiceGroup/Context' +import ChoiceGroupContext from '../ChoiceGroup/ChoiceGroup.Context' import { includes } from '../../utilities/arrays' import { classNames } from '../../utilities/classNames' import { createUniqueIDFactory } from '../../utilities/id' @@ -19,43 +18,43 @@ import { ChoiceLabelUI, ChoiceLabelTextUI, ChoiceHelpTextUI, -} from './styles/Choice.css.js' -import { COMPONENT_KEY } from './utils' +} from './styles/Choice.css' +import { COMPONENT_KEY } from './Choice.utils' type Props = { - align: ChoiceAlign, - autoFocus: boolean, - children?: any, - checked: boolean, - className?: string, - componentID: string, - disabled: boolean, - helpText?: string, - hideLabel: boolean, - id?: string, - inputRef: (node: HTMLElement) => void, - innerRef: (node: HTMLElement) => void, - kind?: string, - label?: string, - onBlur: (event: Event) => void, - onChange: (event: Event, checked: boolean) => void, - onFocus: (event: Event) => void, - name?: string, - readOnly: boolean, - stacked: boolean, - state?: UIState, - type: ChoiceType, - value: ChoiceValue, + align: ChoiceAlign + autoFocus: boolean + children?: any + checked: boolean + className?: string + componentID: string + disabled: boolean + helpText?: string + hideLabel: boolean + id?: string + inputRef: (node: HTMLElement) => void + innerRef: (node: HTMLElement) => void + kind?: string + label?: string + onBlur: (event: Event) => void + onChange: (event: Event, checked: boolean) => void + onFocus: (event: Event) => void + name?: string + readOnly: boolean + stacked: boolean + state?: UIState + type: ChoiceType + value: ChoiceValue } type State = { - checked: boolean, - id: string, + checked: boolean + id: string } const uniqueID = createUniqueIDFactory('Choice') -class Choice extends Component { +class Choice extends React.PureComponent { static defaultProps = { autoFocus: false, checked: false, @@ -73,7 +72,7 @@ class Choice extends Component { } constructor(props: Props) { - super() + super(props) this.state = { checked: props.checked, @@ -90,6 +89,8 @@ class Choice extends Component { handleOnChange = (value: ChoiceValue, checked: boolean) => { this.setState({ checked }) + // TODO: fix typescript complains + // @ts-ignore this.props.onChange(value, checked) } @@ -104,7 +105,11 @@ class Choice extends Component { handleOnBlurWithContext = (contextProps: Object) => { return (...args) => { this.handleOnBlur.apply(null, args) + // TODO: fix typescript complains + // @ts-ignore if (contextProps.onBlur) { + // TODO: fix typescript complains + // @ts-ignore contextProps.onBlur.apply(null, args) } } @@ -112,7 +117,11 @@ class Choice extends Component { handleOnChangeWithContext = (contextProps: Object) => { return (...args) => { + // TODO: fix typescript complains + // @ts-ignore if (contextProps.onChange) { + // TODO: fix typescript complains + // @ts-ignore contextProps.onChange.apply(null, args) this.props.onChange.apply(null, args) } else { @@ -124,7 +133,11 @@ class Choice extends Component { handleOnFocusWithContext = (contextProps: Object) => { return (...args) => { this.handleOnFocus.apply(null, args) + // TODO: fix typescript complains + // @ts-ignore if (contextProps.onFocus) { + // TODO: fix typescript complains + // @ts-ignore contextProps.onFocus.apply(null, args) } } @@ -201,7 +214,11 @@ class Choice extends Component { const { checked, id: choiceID } = this.state const isChecked = + // TODO: fix typescript complains + // @ts-ignore (contextProps.selectedValue && + // TODO: fix typescript complains + // @ts-ignore includes(contextProps.selectedValue, value)) || checked || false @@ -217,6 +234,8 @@ class Choice extends Component { inputRef, innerRef, kind, + // TODO: fix typescript complains + // @ts-ignore name: contextProps.name || name, onBlur: this.handleOnBlurWithContext(contextProps), onFocus: this.handleOnFocusWithContext(contextProps), diff --git a/src/components/Choice/Choice.types.ts b/src/components/Choice/Choice.types.ts new file mode 100644 index 000000000..70eb26b2e --- /dev/null +++ b/src/components/Choice/Choice.types.ts @@ -0,0 +1,5 @@ +export type ChoiceAlign = 'top' | '' + +export type ChoiceType = 'checkbox' | 'radio' + +export type ChoiceValue = string | number | boolean diff --git a/src/components/Choice/Choice.utils.ts b/src/components/Choice/Choice.utils.ts new file mode 100644 index 000000000..83a84398b --- /dev/null +++ b/src/components/Choice/Choice.utils.ts @@ -0,0 +1 @@ +export const COMPONENT_KEY = 'Choice' diff --git a/src/components/Choice/__tests__/Choice.test.js b/src/components/Choice/__tests__/Choice.test.js index 97f8f4a73..74613816e 100644 --- a/src/components/Choice/__tests__/Choice.test.js +++ b/src/components/Choice/__tests__/Choice.test.js @@ -1,7 +1,7 @@ import React from 'react' import { mount } from 'enzyme' import Choice from '../Choice' -import ChoiceInput from '../Input' +import ChoiceInput from '../Choice.Input' import ChoiceGroup from '../../ChoiceGroup' import HelpText from '../../HelpText' import Text from '../../Text' diff --git a/src/components/Choice/__tests__/ChoiceInput.test.js b/src/components/Choice/__tests__/ChoiceInput.test.js index 8be7e753b..e9b335688 100644 --- a/src/components/Choice/__tests__/ChoiceInput.test.js +++ b/src/components/Choice/__tests__/ChoiceInput.test.js @@ -1,6 +1,6 @@ import React from 'react' import { mount } from 'enzyme' -import Input from '../Input' +import Input from '../Choice.Input' describe('ClassName', () => { test('Has default className', () => { diff --git a/src/components/Choice/index.js b/src/components/Choice/index.ts similarity index 72% rename from src/components/Choice/index.js rename to src/components/Choice/index.ts index b0268dc31..0b7ce385f 100644 --- a/src/components/Choice/index.js +++ b/src/components/Choice/index.ts @@ -1,6 +1,5 @@ -// @flow import { propConnect } from '../PropProvider' import Choice from './Choice' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Choice.utils' export default propConnect(COMPONENT_KEY)(Choice) diff --git a/src/components/Choice/styles/Choice.css.js b/src/components/Choice/styles/Choice.css.js index 965b80631..6704132ea 100644 --- a/src/components/Choice/styles/Choice.css.js +++ b/src/components/Choice/styles/Choice.css.js @@ -1,6 +1,5 @@ -// @flow import baseStyles from '../../../styles/resets/baseStyles.css.js' -import styled from '../../styled/index' +import styled from '../../styled' import { getColor } from '../../../styles/utilities/color' export const config = { diff --git a/src/components/Choice/styles/Input.css.js b/src/components/Choice/styles/Input.css.js index d6f150ca4..4535945a0 100644 --- a/src/components/Choice/styles/Input.css.js +++ b/src/components/Choice/styles/Input.css.js @@ -1,7 +1,6 @@ -// @flow import baseStyles from '../../../styles/resets/baseStyles.css.js' import visuallyHidden from '../../../styles/mixins/visuallyHidden.css.js' -import styled from '../../styled/index' +import styled from '../../styled' export const config = { iconColor: 'white', diff --git a/src/components/Choice/types.js b/src/components/Choice/types.js deleted file mode 100644 index 5d3e4bd7a..000000000 --- a/src/components/Choice/types.js +++ /dev/null @@ -1,12 +0,0 @@ -export type ChoiceAlign = -| 'top' -| '' - -export type ChoiceType = -| 'checkbox' -| 'radio' - -export type ChoiceValue = -| string -| number -| boolean \ No newline at end of file diff --git a/src/components/Choice/utils.js b/src/components/Choice/utils.js deleted file mode 100644 index caba812f9..000000000 --- a/src/components/Choice/utils.js +++ /dev/null @@ -1 +0,0 @@ -export type COMPONENT_KEY = 'Choice' diff --git a/src/components/ChoiceGroup/Context.js b/src/components/ChoiceGroup/ChoiceGroup.Context.ts similarity index 100% rename from src/components/ChoiceGroup/Context.js rename to src/components/ChoiceGroup/ChoiceGroup.Context.ts diff --git a/src/components/ChoiceGroup/ChoiceGroup.js b/src/components/ChoiceGroup/ChoiceGroup.tsx similarity index 83% rename from src/components/ChoiceGroup/ChoiceGroup.js rename to src/components/ChoiceGroup/ChoiceGroup.tsx index 1ccac307b..bcaee6c17 100644 --- a/src/components/ChoiceGroup/ChoiceGroup.js +++ b/src/components/ChoiceGroup/ChoiceGroup.tsx @@ -1,7 +1,6 @@ -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' -import Context from './Context' +import Context from './ChoiceGroup.Context' import FormGroup from '../FormGroup' import FormLabelContext from '../FormLabel/Context' import get from '../../utilities/get' @@ -9,34 +8,34 @@ import { isComponentNamed, namespaceComponent } from '../../utilities/component' import { classNames } from '../../utilities/classNames' import { createUniqueIDFactory } from '../../utilities/id' import { noop } from '../../utilities/other' -import { ChoiceGroupUI } from './styles/ChoiceGroup.css.js' -import { COMPONENT_KEY as RADIO_KEY } from '../Radio/utils' -import { COMPONENT_KEY as RADIOCARD_KEY } from '../RadioCard/utils' -import { COMPONENT_KEY } from './utils' +import { ChoiceGroupUI } from './styles/ChoiceGroup.css' +import { COMPONENT_KEY as RADIO_KEY } from '../Radio/Radio.utils' +import { COMPONENT_KEY as RADIOCARD_KEY } from '../RadioCard/RadioCard.utils' +import { COMPONENT_KEY } from './ChoiceGroup.utils' type Props = { - align: 'horizontal' | 'vertical', - className: string, - choiceMaxWidth?: string | number, - children?: any, - isResponsive: boolean, - onBlur: (event: Event) => void, - onChange: (event: Event) => void, - onFocus: (event: Event) => void, - multiSelect: boolean, - name: string, - value: any, + align: 'horizontal' | 'vertical' + className: string + choiceMaxWidth?: string | number + children?: any + isResponsive: boolean + onBlur: (event: Event) => void + onChange: (event: Event) => void + onFocus: (event: Event) => void + multiSelect: boolean + name: string + value: any } type State = { - id: string, - multiSelect: boolean, - selectedValue: any, + id: string + multiSelect: boolean + selectedValue: any } const uniqueID = createUniqueIDFactory('ChoiceGroup') -class ChoiceGroup extends Component { +class ChoiceGroup extends React.PureComponent { static defaultProps = { align: 'vertical', isResponsive: false, @@ -145,7 +144,7 @@ class ChoiceGroup extends Component { ) } - getIdFromContextProps = (props: Object) => props.id || this.state.id + getIdFromContextProps = (props: any) => props.id || this.state.id render() { const { diff --git a/src/components/ChoiceGroup/utils.js b/src/components/ChoiceGroup/ChoiceGroup.utils.ts similarity index 100% rename from src/components/ChoiceGroup/utils.js rename to src/components/ChoiceGroup/ChoiceGroup.utils.ts diff --git a/src/components/ChoiceGroup/index.js b/src/components/ChoiceGroup/index.ts similarity index 73% rename from src/components/ChoiceGroup/index.js rename to src/components/ChoiceGroup/index.ts index aede63df0..db1e0093c 100644 --- a/src/components/ChoiceGroup/index.js +++ b/src/components/ChoiceGroup/index.ts @@ -1,6 +1,5 @@ -// @flow import { propConnect } from '../PropProvider' import ChoiceGroup from './ChoiceGroup' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './ChoiceGroup.utils' export default propConnect(COMPONENT_KEY)(ChoiceGroup) diff --git a/src/components/ChoiceGroup/styles/ChoiceGroup.css.js b/src/components/ChoiceGroup/styles/ChoiceGroup.css.js index 47afd0b4c..18b142c11 100644 --- a/src/components/ChoiceGroup/styles/ChoiceGroup.css.js +++ b/src/components/ChoiceGroup/styles/ChoiceGroup.css.js @@ -1,4 +1,3 @@ -// @flow import baseStyles from '../../../styles/resets/baseStyles.css.js' import styled from '../../styled' diff --git a/src/components/CloseButton/CloseButton.tsx b/src/components/CloseButton/CloseButton.tsx index 661bf37b2..7399eb5cd 100644 --- a/src/components/CloseButton/CloseButton.tsx +++ b/src/components/CloseButton/CloseButton.tsx @@ -6,7 +6,7 @@ import { namespaceComponent } from '../../utilities/component' import { CloseButtonSize } from './CloseButton.types' import { noop } from '../../utilities/other' import { COMPONENT_KEY } from './CloseButton.utils' -import { CloseButtonUI, IconUI } from './CloseButton.css.js' +import { CloseButtonUI, IconUI } from './styles/CloseButton.css' export interface Props { className?: string diff --git a/src/components/CloseButton/CloseButton.css.js b/src/components/CloseButton/styles/CloseButton.css.js similarity index 85% rename from src/components/CloseButton/CloseButton.css.js rename to src/components/CloseButton/styles/CloseButton.css.js index 0a5156a69..9c840c549 100644 --- a/src/components/CloseButton/CloseButton.css.js +++ b/src/components/CloseButton/styles/CloseButton.css.js @@ -1,8 +1,8 @@ -import styled from '../styled' -import Icon from '../Icon' -import baseStyles from '../../styles/resets/baseStyles.css.js' -import { getColor } from '../../styles/utilities/color' -import forEach from '../../styles/utilities/forEach' +import styled from '../../styled' +import Icon from '../../Icon' +import baseStyles from '../../../styles/resets/baseStyles.css.js' +import { getColor } from '../../../styles/utilities/color' +import forEach from '../../../styles/utilities/forEach' export const config = { color: getColor('grey.700'), @@ -89,7 +89,7 @@ export const CloseButtonUI = styled('button')` ${makeSizeStyles}; ` -function makeSizeStyles(): string { +function makeSizeStyles() { return forEach( config.sizes, (size, values) => ` diff --git a/src/components/Code/Code.tsx b/src/components/Code/Code.tsx index 9518ddaed..5a584bbfc 100644 --- a/src/components/Code/Code.tsx +++ b/src/components/Code/Code.tsx @@ -3,7 +3,7 @@ import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' import { CodeUI } from './styles/Code.css' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Code.utils' export interface Props { className?: string diff --git a/src/components/Code/utils.ts b/src/components/Code/Code.utils.ts similarity index 100% rename from src/components/Code/utils.ts rename to src/components/Code/Code.utils.ts diff --git a/src/components/Code/index.ts b/src/components/Code/index.ts index ef782ef75..e6ba5e657 100644 --- a/src/components/Code/index.ts +++ b/src/components/Code/index.ts @@ -1,5 +1,5 @@ -import { propConnect } from '../PropProvider/index' +import { propConnect } from '../PropProvider' import Code from './Code' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Code.utils' export default propConnect(COMPONENT_KEY)(Code) diff --git a/src/components/Code/styles/Code.css.js b/src/components/Code/styles/Code.css.js index 1e4a5f467..b01ea10d1 100644 --- a/src/components/Code/styles/Code.css.js +++ b/src/components/Code/styles/Code.css.js @@ -1,4 +1,3 @@ -// @flow import styled from '../../styled' export const config = { diff --git a/src/components/Collapsible/Collapsible.tsx b/src/components/Collapsible/Collapsible.tsx index d16365ac0..fc284adc4 100644 --- a/src/components/Collapsible/Collapsible.tsx +++ b/src/components/Collapsible/Collapsible.tsx @@ -1,25 +1,9 @@ import * as React from 'react' import { classNames } from '../../utilities/classNames' import { requestAnimationFrame, noop } from '../../utilities/other' +import { CollapsibleProps, CollapsibleState } from './Collapsible.types' -export interface Props { - children?: any - className?: string - duration: number - durationOpen?: number - durationClose?: number - isOpen: boolean - onOpen: () => void - onClose: () => void - style?: Object -} - -export interface State { - animationState: string - height: number -} - -class Collapsible extends React.Component { +class Collapsible extends React.Component { static defaultProps = { duration: 300, isOpen: false, @@ -27,7 +11,7 @@ class Collapsible extends React.Component { onClose: noop, } - state: State = { + state = { height: 0, animationState: 'idle', } @@ -44,14 +28,14 @@ class Collapsible extends React.Component { this._isMounted = false } - shouldFireStateCallback = (prevProps: Props, prevState: State) => { + shouldFireStateCallback = (prevProps, prevState) => { return ( prevProps.isOpen !== this.props.isOpen && prevState.animationState !== this.state.animationState ) } - componentWillReceiveProps(nextProps: Props) { + componentWillReceiveProps(nextProps) { const { isOpen: willOpen } = nextProps /* istanbul ignore next */ if (willOpen !== this.props.isOpen) { @@ -59,7 +43,7 @@ class Collapsible extends React.Component { } } - componentDidUpdate(prevProps: Props, prevState: State) { + componentDidUpdate(prevProps, prevState) { const { isOpen: wasOpen } = prevProps this.handleAnimation(wasOpen) @@ -69,7 +53,7 @@ class Collapsible extends React.Component { } } - safeSetState(state: Object) { + safeSetState(state) { /* istanbul ignore else */ if (this._isMounted) { this.setState(state) @@ -164,7 +148,7 @@ class Collapsible extends React.Component { return `${height || 0}px` } - getTransitionDuration(): number { + getTransitionDuration() { const { duration, durationOpen, durationClose } = this.props const { animationState } = this.state const openDuration = durationOpen !== undefined ? durationOpen : duration diff --git a/src/components/Collapsible/Collapsible.types.ts b/src/components/Collapsible/Collapsible.types.ts new file mode 100644 index 000000000..2c780acf5 --- /dev/null +++ b/src/components/Collapsible/Collapsible.types.ts @@ -0,0 +1,16 @@ +export interface CollapsibleProps { + children?: any + className?: string + duration?: number + durationOpen?: number + durationClose?: number + isOpen: boolean + onOpen: () => void + onClose: () => void + style?: Object +} + +export interface CollapsibleState { + animationState: string + height: number +} diff --git a/src/components/Collapsible/utils.ts b/src/components/Collapsible/Collapsible.utils.ts similarity index 100% rename from src/components/Collapsible/utils.ts rename to src/components/Collapsible/Collapsible.utils.ts diff --git a/src/components/Collapsible/index.ts b/src/components/Collapsible/index.ts index dfcb5db49..3e6c62335 100644 --- a/src/components/Collapsible/index.ts +++ b/src/components/Collapsible/index.ts @@ -1,5 +1,5 @@ import { propConnect } from '../PropProvider' import Collapsible from './Collapsible' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Collapsible.utils' export default propConnect(COMPONENT_KEY)(Collapsible) diff --git a/src/components/ComboBox/ComboBox.tsx b/src/components/ComboBox/ComboBox.tsx index b02599fba..f74a5e769 100644 --- a/src/components/ComboBox/ComboBox.tsx +++ b/src/components/ComboBox/ComboBox.tsx @@ -12,7 +12,7 @@ import { namespaceComponent, renderRenderPropComponent, } from '../../utilities/component' -import { HeaderUI, InputUI, MenuUI, EmptyItemUI } from './ComboBox.css' +import { HeaderUI, InputUI, MenuUI, EmptyItemUI } from './styles/ComboBox.css' import { COMPONENT_KEY } from './ComboBox.utils' export interface ComboBoxProps extends DropdownProps { diff --git a/src/components/ComboBox/ComboBox.css.ts b/src/components/ComboBox/styles/ComboBox.css.ts similarity index 70% rename from src/components/ComboBox/ComboBox.css.ts rename to src/components/ComboBox/styles/ComboBox.css.ts index 7e2ee6a07..509c7b266 100644 --- a/src/components/ComboBox/ComboBox.css.ts +++ b/src/components/ComboBox/styles/ComboBox.css.ts @@ -1,8 +1,7 @@ -import Dropdown from '../Dropdown/DropdownV2' -import Input from '../Input' -import Text from '../Text' -import baseStyles from '../../styles/resets/baseStyles.css.js' -import styled from '../styled' +import Dropdown from '../../Dropdown/DropdownV2' +import Input from '../../Input' +import baseStyles from '../../../styles/resets/baseStyles.css.js' +import styled from '../../styled' export const InputUI = styled(Input)` padding-left: 10px; diff --git a/src/components/ControlGroup/Block.js b/src/components/ControlGroup/ControlGroup.Block.tsx similarity index 68% rename from src/components/ControlGroup/Block.js rename to src/components/ControlGroup/ControlGroup.Block.tsx index d9d3cbad8..3504d817e 100644 --- a/src/components/ControlGroup/Block.js +++ b/src/components/ControlGroup/ControlGroup.Block.tsx @@ -1,15 +1,14 @@ -// @flow -import React, { PureComponent as Component } from 'react' -import Item from './Item' +import * as React from 'react' +import Item from './ControlGroup.Item' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './ControlGroup.utils' type Props = { - className?: string, + className?: string } -class Block extends Component { +class Block extends React.PureComponent { render() { const { className } = this.props diff --git a/src/components/ControlGroup/Item.js b/src/components/ControlGroup/ControlGroup.Item.tsx similarity index 80% rename from src/components/ControlGroup/Item.js rename to src/components/ControlGroup/ControlGroup.Item.tsx index a99107f50..910c17db3 100644 --- a/src/components/ControlGroup/Item.js +++ b/src/components/ControlGroup/ControlGroup.Item.tsx @@ -1,24 +1,23 @@ -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { isComponentTypeControl, namespaceComponent, } from '../../utilities/component' -import { ItemUI } from './styles/Item.css.js' -import { COMPONENT_KEY } from './utils' +import { ItemUI } from './styles/Item.css' +import { COMPONENT_KEY } from './ControlGroup.utils' type Props = { - className?: string, - children?: any, - isBlock: boolean, - isFirst: boolean, - isNotOnly: boolean, - isLast: boolean, + className?: string + children?: any + isBlock: boolean + isFirst: boolean + isNotOnly: boolean + isLast: boolean } -class Item extends Component { +class Item extends React.PureComponent { static defaultProps = { isBlock: false, isFirst: false, diff --git a/src/components/ControlGroup/ControlGroup.js b/src/components/ControlGroup/ControlGroup.tsx similarity index 78% rename from src/components/ControlGroup/ControlGroup.js rename to src/components/ControlGroup/ControlGroup.tsx index c0e153cbf..110d64ff9 100644 --- a/src/components/ControlGroup/ControlGroup.js +++ b/src/components/ControlGroup/ControlGroup.tsx @@ -1,19 +1,18 @@ -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { isComponentNamed, namespaceComponent } from '../../utilities/component' -import Block from './Block' -import Item from './Item' -import { ControlGroupUI } from './styles/ControlGroup.css.js' -import { COMPONENT_KEY } from './utils' +import Block from './ControlGroup.Block' +import Item from './ControlGroup.Item' +import { ControlGroupUI } from './styles/ControlGroup.css' +import { COMPONENT_KEY } from './ControlGroup.utils' type Props = { - className?: string, - children?: any, + className?: string + children?: any } -class ControlGroup extends Component { +class ControlGroup extends React.PureComponent { static Block = Block static Item = Item diff --git a/src/components/ControlGroup/utils.js b/src/components/ControlGroup/ControlGroup.utils.ts similarity index 100% rename from src/components/ControlGroup/utils.js rename to src/components/ControlGroup/ControlGroup.utils.ts diff --git a/src/components/ControlGroup/__tests__/Block.test.js b/src/components/ControlGroup/__tests__/ControlGroup.Block.test.js similarity index 92% rename from src/components/ControlGroup/__tests__/Block.test.js rename to src/components/ControlGroup/__tests__/ControlGroup.Block.test.js index 5e0b692ae..bda68289b 100644 --- a/src/components/ControlGroup/__tests__/Block.test.js +++ b/src/components/ControlGroup/__tests__/ControlGroup.Block.test.js @@ -1,7 +1,7 @@ import React from 'react' import { mount } from 'enzyme' -import Block from '../Block' -import Item from '../Item' +import Block from '../ControlGroup.Block' +import Item from '../ControlGroup.Item' describe('ClassName', () => { test('Has default component className', () => { diff --git a/src/components/ControlGroup/__tests__/Item.test.js b/src/components/ControlGroup/__tests__/ControlGroup.Item.test.js similarity index 97% rename from src/components/ControlGroup/__tests__/Item.test.js rename to src/components/ControlGroup/__tests__/ControlGroup.Item.test.js index ac254169e..6cce4c61d 100644 --- a/src/components/ControlGroup/__tests__/Item.test.js +++ b/src/components/ControlGroup/__tests__/ControlGroup.Item.test.js @@ -1,6 +1,6 @@ import React from 'react' import { mount } from 'enzyme' -import Item from '../Item' +import Item from '../ControlGroup.Item' import Input from '../../Input' import Select from '../../Select' diff --git a/src/components/ControlGroup/index.js b/src/components/ControlGroup/index.ts similarity index 97% rename from src/components/ControlGroup/index.js rename to src/components/ControlGroup/index.ts index 820fea83b..2139fcbcc 100644 --- a/src/components/ControlGroup/index.js +++ b/src/components/ControlGroup/index.ts @@ -1,4 +1,3 @@ -// @flow import { propConnect } from '../PropProvider' import ControlGroup from './ControlGroup' diff --git a/src/components/ControlGroup/styles/ControlGroup.css.js b/src/components/ControlGroup/styles/ControlGroup.css.js index f7cb837c4..2c95960db 100644 --- a/src/components/ControlGroup/styles/ControlGroup.css.js +++ b/src/components/ControlGroup/styles/ControlGroup.css.js @@ -1,4 +1,3 @@ -// @flow import baseStyles from '../../../styles/resets/baseStyles.css.js' import styled from '../../styled' diff --git a/src/components/ControlGroup/styles/Item.css.js b/src/components/ControlGroup/styles/Item.css.js index 06e1b6fa2..944c213c3 100644 --- a/src/components/ControlGroup/styles/Item.css.js +++ b/src/components/ControlGroup/styles/Item.css.js @@ -1,4 +1,3 @@ -// @flow import baseStyles from '../../../styles/resets/baseStyles.css.js' import styled from '../../styled' diff --git a/src/components/CopyButton/CopyButton.js b/src/components/CopyButton/CopyButton.tsx similarity index 83% rename from src/components/CopyButton/CopyButton.js rename to src/components/CopyButton/CopyButton.tsx index f294b104e..f795066a6 100644 --- a/src/components/CopyButton/CopyButton.js +++ b/src/components/CopyButton/CopyButton.tsx @@ -1,5 +1,4 @@ -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import Icon from '../Icon' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' @@ -8,28 +7,28 @@ import { CopyButtonUI, ConfirmationIconWrapperUI, ContentWrapperUI, -} from './styles/CopyButton.css.js' -import { COMPONENT_KEY } from './utils' -import { ButtonSize } from '../Button/types' +} from './styles/CopyButton.css' +import { COMPONENT_KEY } from './CopyButton.utils' +import { ButtonSize } from '../Button/Button.types' type Props = { - canRenderFocus: boolean, - children?: any, - className?: string, - icon: string, - kind: string, - onClick: (event: Event) => void, - onReset: () => void, - resetTimeout: number, - size: ButtonSize, - title?: string, + canRenderFocus: boolean + children?: any + className?: string + icon: string + kind: string + onClick: (event: Event) => void + onReset: () => void + resetTimeout: number + size: ButtonSize + title?: string } type State = { - shouldRenderConfirmation: boolean, + shouldRenderConfirmation: boolean } -class CopyButton extends Component { +class CopyButton extends React.PureComponent { static defaultProps = { canRenderFocus: false, icon: 'copy', @@ -56,7 +55,7 @@ class CopyButton extends Component { this._isMounted = false } - safeSetState = (state: Object) => { + safeSetState = (state: any) => { /* istanbul ignore else */ if (this._isMounted) { this.setState(state) diff --git a/src/components/CopyButton/utils.js b/src/components/CopyButton/CopyButton.utils.ts similarity index 100% rename from src/components/CopyButton/utils.js rename to src/components/CopyButton/CopyButton.utils.ts diff --git a/src/components/CopyButton/index.js b/src/components/CopyButton/index.ts similarity index 93% rename from src/components/CopyButton/index.js rename to src/components/CopyButton/index.ts index 23c999723..c493279bc 100644 --- a/src/components/CopyButton/index.js +++ b/src/components/CopyButton/index.ts @@ -1,4 +1,3 @@ -// @flow import { propConnect } from '../PropProvider' import CopyButton from './CopyButton' diff --git a/src/components/CopyButton/styles/CopyButton.css.js b/src/components/CopyButton/styles/CopyButton.css.js index 2da95cbfb..8f44492ab 100644 --- a/src/components/CopyButton/styles/CopyButton.css.js +++ b/src/components/CopyButton/styles/CopyButton.css.js @@ -1,4 +1,3 @@ -// @flow import { getColor } from '../../../styles/utilities/color' import styled from '../../styled' import Button from '../../Button' diff --git a/src/components/CopyCode/CopyCode.js b/src/components/CopyCode/CopyCode.tsx similarity index 83% rename from src/components/CopyCode/CopyCode.js rename to src/components/CopyCode/CopyCode.tsx index ae4f0472d..a219b304c 100644 --- a/src/components/CopyCode/CopyCode.js +++ b/src/components/CopyCode/CopyCode.tsx @@ -1,26 +1,25 @@ -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import Highlight from '../Highlight' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' import { noop } from '../../utilities/other' import { copyToClipboard, selectText } from '../../utilities/clipboard' -import { COMPONENT_KEY } from './utils' -import { CopyButtonUI, CopyCodeUI, WrapperUI } from './styles/CopyCode.css.js' +import { COMPONENT_KEY } from './CopyCode.utils' +import { CopyButtonUI, CopyCodeUI, WrapperUI } from './styles/CopyCode.css' import Keys from '../../constants/Keys' type Props = { - autoFocus: boolean, - className?: string, - code: string, - copyToClipboard: boolean, - innerRef: (node: HTMLElement) => void, - language?: string, - onCopy: (code: string) => void, + autoFocus: boolean + className?: string + code: string + copyToClipboard: boolean + innerRef: (node: HTMLElement) => void + language?: string + onCopy: (code: string) => void } -class CopyCode extends Component { +class CopyCode extends React.PureComponent { static defaultProps = { autoFocus: true, code: '', @@ -37,7 +36,7 @@ class CopyCode extends Component { } } - handleOnKeyDown = (event: SyntheticKeyboardEvent) => { + handleOnKeyDown = (event: KeyboardEvent) => { if (event.ctrlKey || event.metaKey) { return true } @@ -70,9 +69,7 @@ class CopyCode extends Component { this.codeNode && selectText(this.codeNode) } - preventEventDefault = ( - event: SyntheticKeyboardEvent | Event - ) => { + preventEventDefault = (event: KeyboardEvent | Event) => { event && event.preventDefault() return false } diff --git a/src/components/CopyCode/utils.js b/src/components/CopyCode/CopyCode.utils.ts similarity index 100% rename from src/components/CopyCode/utils.js rename to src/components/CopyCode/CopyCode.utils.ts diff --git a/src/components/CopyCode/index.js b/src/components/CopyCode/index.ts similarity index 93% rename from src/components/CopyCode/index.js rename to src/components/CopyCode/index.ts index 3c271b7ad..e9e93b9fa 100644 --- a/src/components/CopyCode/index.js +++ b/src/components/CopyCode/index.ts @@ -1,4 +1,3 @@ -// @flow import { propConnect } from '../PropProvider' import CopyCode from './CopyCode' diff --git a/src/components/CopyCode/styles/CopyCode.css.js b/src/components/CopyCode/styles/CopyCode.css.js index 0c53f4c78..ebf99ee8e 100644 --- a/src/components/CopyCode/styles/CopyCode.css.js +++ b/src/components/CopyCode/styles/CopyCode.css.js @@ -1,4 +1,3 @@ -// @flow import styled from '../../styled' import CopyButton from '../../CopyButton' import { getColor } from '../../../styles/utilities/color' diff --git a/src/components/CopyInput/CopyInput.js b/src/components/CopyInput/CopyInput.tsx similarity index 81% rename from src/components/CopyInput/CopyInput.js rename to src/components/CopyInput/CopyInput.tsx index b1c11a12d..750bdbc91 100644 --- a/src/components/CopyInput/CopyInput.js +++ b/src/components/CopyInput/CopyInput.tsx @@ -1,26 +1,25 @@ -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import CopyButton from '../CopyButton' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' import { copyToClipboard, selectText } from '../../utilities/clipboard' import { noop } from '../../utilities/other' -import { CopyInputUI } from './styles/CopyInput.css.js' -import { COMPONENT_KEY } from './utils' +import { CopyInputUI } from './styles/CopyInput.css' +import { COMPONENT_KEY } from './CopyInput.utils' type InputNode = HTMLInputElement | HTMLTextAreaElement type Props = { - copyToClipboard: boolean, - className?: string, - innerRef: (node: InputNode) => void, - onCopy: (value: string) => void, - readOnly: boolean, - value: string, + copyToClipboard: boolean + className?: string + innerRef: (node: InputNode) => void + onCopy: (value: string) => void + readOnly: boolean + value: string } -class CopyInput extends Component { +class CopyInput extends React.PureComponent { static defaultProps = { copyToClipboard: true, innerRef: noop, diff --git a/src/components/CopyInput/utils.js b/src/components/CopyInput/CopyInput.utils.ts similarity index 100% rename from src/components/CopyInput/utils.js rename to src/components/CopyInput/CopyInput.utils.ts diff --git a/src/components/CopyInput/index.js b/src/components/CopyInput/index.ts similarity index 93% rename from src/components/CopyInput/index.js rename to src/components/CopyInput/index.ts index b763d02ad..7a5161b7a 100644 --- a/src/components/CopyInput/index.js +++ b/src/components/CopyInput/index.ts @@ -1,4 +1,3 @@ -// @flow import { propConnect } from '../PropProvider' import CopyInput from './CopyInput' diff --git a/src/components/CopyInput/styles/CopyInput.css.js b/src/components/CopyInput/styles/CopyInput.css.js index ff812d28a..3902439ae 100644 --- a/src/components/CopyInput/styles/CopyInput.css.js +++ b/src/components/CopyInput/styles/CopyInput.css.js @@ -1,4 +1,3 @@ -// @flow import styled from '../../styled' import { getColor } from '../../../styles/utilities/color' import Input from '../../Input' diff --git a/src/components/DetailList/Item.js b/src/components/DetailList/DetailList.Item.tsx similarity index 91% rename from src/components/DetailList/Item.js rename to src/components/DetailList/DetailList.Item.tsx index d9d8a84d3..1e46cf47c 100644 --- a/src/components/DetailList/Item.js +++ b/src/components/DetailList/DetailList.Item.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import { classNames } from '../../utilities/classNames' const Item = props => { diff --git a/src/components/DetailList/Title.js b/src/components/DetailList/DetailList.Title.tsx similarity index 92% rename from src/components/DetailList/Title.js rename to src/components/DetailList/DetailList.Title.tsx index 1c16d4cdd..ff0264c99 100644 --- a/src/components/DetailList/Title.js +++ b/src/components/DetailList/DetailList.Title.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import { classNames } from '../../utilities/classNames' const Title = props => { diff --git a/src/components/DetailList/DetailList.js b/src/components/DetailList/DetailList.tsx similarity index 79% rename from src/components/DetailList/DetailList.js rename to src/components/DetailList/DetailList.tsx index 2330d7b70..045df0693 100644 --- a/src/components/DetailList/DetailList.js +++ b/src/components/DetailList/DetailList.tsx @@ -1,6 +1,6 @@ -import React from 'react' -import Item from './Item' -import Title from './Title' +import * as React from 'react' +import Item from './DetailList.Item' +import Title from './DetailList.Title' import { classNames } from '../../utilities/classNames' const DetailList = props => { diff --git a/src/components/DetailList/index.js b/src/components/DetailList/index.ts similarity index 100% rename from src/components/DetailList/index.js rename to src/components/DetailList/index.ts diff --git a/src/components/DetailList/tests/Item.test.js b/src/components/DetailList/tests/DetailList.Item.test.js similarity index 95% rename from src/components/DetailList/tests/Item.test.js rename to src/components/DetailList/tests/DetailList.Item.test.js index f593272a4..42208cedf 100644 --- a/src/components/DetailList/tests/Item.test.js +++ b/src/components/DetailList/tests/DetailList.Item.test.js @@ -1,6 +1,6 @@ import React from 'react' import { mount } from 'enzyme' -import Item from '../Item' +import Item from '../DetailList.Item' describe('ClassName', () => { test('Has default className', () => { diff --git a/src/components/DetailList/tests/Title.test.js b/src/components/DetailList/tests/DetailList.Title.test.js similarity index 95% rename from src/components/DetailList/tests/Title.test.js rename to src/components/DetailList/tests/DetailList.Title.test.js index c4d16150b..6afa4fcc2 100644 --- a/src/components/DetailList/tests/Title.test.js +++ b/src/components/DetailList/tests/DetailList.Title.test.js @@ -1,6 +1,6 @@ import React from 'react' import { mount } from 'enzyme' -import Title from '../Title' +import Title from '../DetailList.Title' describe('ClassName', () => { test('Has default className', () => { diff --git a/src/components/Drop/Positioner.js b/src/components/Drop/Drop.Positioner.tsx similarity index 73% rename from src/components/Drop/Positioner.js rename to src/components/Drop/Drop.Positioner.tsx index 606f888a7..266b289ab 100644 --- a/src/components/Drop/Positioner.js +++ b/src/components/Drop/Drop.Positioner.tsx @@ -1,6 +1,5 @@ -import React, { PureComponent as Component } from 'react' -import ReactDOM from 'react-dom' -import PropTypes from 'prop-types' +import * as React from 'react' +import * as ReactDOM from 'react-dom' import EventListener from '../EventListener' import { classNames } from '../../utilities/classNames' import { applyStylesToNode, isNodeElement } from '../../utilities/node' @@ -10,35 +9,28 @@ import { } from '../../utilities/nodePosition' import { noop } from '../../utilities/other' -export const propTypes = { - autoPosition: PropTypes.bool, - direction: PropTypes.string, - offset: PropTypes.number, - onUpdatePosition: PropTypes.func, - position: PropTypes.shape({ - direction: PropTypes.shape({ - x: PropTypes.oneOf(['left', 'right', '']), - y: PropTypes.oneOf(['up', 'down']), - }), - left: PropTypes.number, - offsetTop: PropTypes.number, - top: PropTypes.number, - }), - trigger: PropTypes.oneOfType([PropTypes.element, PropTypes.object]), - zIndex: PropTypes.number, -} - -const defaultProps = { - autoPosition: true, - direction: 'down', - offset: 8, - onUpdatePosition: noop, - zIndex: 1000, +export interface DropPositionerProps { + className?: string + autoPosition: boolean + direction: string + offset: number + onUpdatePosition: (...args: any[]) => void + position?: { + direction: { + x: 'left' | 'right' | '' + y: 'up' | 'down' + } + left: number + offsetTop: number + top: number + } + trigger: Element | any + zIndex: number } -class Positioner extends Component { +class Positioner extends React.PureComponent { constructor(props) { - super() + super(props) /* istanbul ignore next */ this.state = { direction: props.direction @@ -52,8 +44,23 @@ class Positioner extends Component { this.updatePosition = this.updatePosition.bind(this) } + static defaultProps = { + autoPosition: true, + direction: 'down', + offset: 8, + onUpdatePosition: noop, + zIndex: 1000, + } + + position: any + node: any + triggerNode: any + contentNode: any + componentDidMount() { this.setTriggerNode() + // TODO: fix typescript complains + // @ts-ignore this.updatePosition() } @@ -74,6 +81,8 @@ class Positioner extends Component { } getPosition() { + // TODO: fix typescript complains + // @ts-ignore const { direction, offset } = this.props /* istanbul ignore next */ @@ -92,7 +101,9 @@ class Positioner extends Component { } /* istanbul ignore next */ - updatePosition(newPosition) { + updatePosition(newPosition?) { + // TODO: fix typescript complains + // @ts-ignore const { autoPosition, onUpdatePosition, position, zIndex } = this.props if (!autoPosition) return @@ -108,6 +119,8 @@ class Positioner extends Component { zIndex, } + // TODO: fix typescript complains + // @ts-ignore if (this.direction !== pos.direction) { this.setState({ direction: pos.direction }) } @@ -132,6 +145,8 @@ class Positioner extends Component { ...rest } = this.props + // TODO: fix typescript complains + // @ts-ignore const { direction } = this.state const componentClassName = classNames( @@ -153,7 +168,12 @@ class Positioner extends Component { }} {...rest} > - updatePosition()} /> + { + return updatePosition() + }} + />
{ @@ -167,8 +187,8 @@ class Positioner extends Component { } } -Positioner.propTypes = propTypes -Positioner.defaultProps = defaultProps +// TODO: fix typescript complains +// @ts-ignore Positioner.displayName = 'DropPositioner' export default Positioner diff --git a/src/components/Drop/index.js b/src/components/Drop/Drop.tsx similarity index 70% rename from src/components/Drop/index.js rename to src/components/Drop/Drop.tsx index 3de11d60d..663506beb 100644 --- a/src/components/Drop/index.js +++ b/src/components/Drop/Drop.tsx @@ -1,22 +1,30 @@ -import React, { PureComponent as Component } from 'react' -import PropTypes from 'prop-types' +import * as React from 'react' import PortalWrapper from '../PortalWrapper' -import Positioner from './Positioner' +import Positioner from './Drop.Positioner' import { classNames } from '../../utilities/classNames' -export const propTypes = { - trigger: PropTypes.oneOfType([PropTypes.element, PropTypes.object]), - direction: PropTypes.string, - wrapperClassName: PropTypes.string, -} - -const defaultProps = { - direction: 'down', - wrapperClassName: 'c-DropWrapper', +export interface DropProps { + trigger: Object | Element + direction: string + wrapperClassName: string + className?: any + closePortal?: any + exact?: any + isOpen?: any + onBeforeClose?: any + onBeforeOpen?: any + onClose?: any + onOpen?: any + openPortal?: any + path?: any + portalIsOpen?: any + portalIsMounted?: any + style?: any + timeout?: any + zIndex?: any } const popoverWrapperBaseZIndex = 1020 - const defaultOptions = { autoPosition: true, id: 'Drop', @@ -25,12 +33,18 @@ const defaultOptions = { zIndex: popoverWrapperBaseZIndex, } -export const DropComponent = ( - /* istanbul ignore next */ options = defaultOptions +/* istanbul ignore next */ +export const DropComponent: any = ( + options = defaultOptions ) => ComposedComponent => { const portalOptions = Object.assign({}, defaultOptions, options) - class Drop extends Component { + class Drop extends React.PureComponent { + static defaultProps = { + direction: 'down', + wrapperClassName: 'c-DropWrapper', + } + render() { const { className, @@ -53,9 +67,7 @@ export const DropComponent = ( zIndex: propsZindex, ...rest } = this.props - const { autoPosition, offset, zIndex } = portalOptions - const componentClassName = classNames('c-Drop') return ( @@ -82,20 +94,22 @@ export const DropComponent = ( } } - Drop.propTypes = propTypes - Drop.defaultProps = defaultProps - const componentName = ComposedComponent.displayName || ComposedComponent.name || /* istanbul ignore next */ 'Component' + + // TODO: fix typescript complains + // @ts-ignore Drop.displayName = `withDrop(${componentName})` return Drop } const Drop = (options = defaultOptions) => ComposedComponent => { + // TODO: fix typescript complains + // @ts-ignore return PortalWrapper(options)(DropComponent(options)(ComposedComponent)) } diff --git a/src/components/Drop/index.ts b/src/components/Drop/index.ts new file mode 100644 index 000000000..2ec77f800 --- /dev/null +++ b/src/components/Drop/index.ts @@ -0,0 +1,3 @@ +import Drop from './Drop' + +export default Drop diff --git a/src/components/Drop/tests/Positioner.test.js b/src/components/Drop/tests/Drop.Positioner.test.js similarity index 99% rename from src/components/Drop/tests/Positioner.test.js rename to src/components/Drop/tests/Drop.Positioner.test.js index 3d5c052c7..fd3f1dbdf 100644 --- a/src/components/Drop/tests/Positioner.test.js +++ b/src/components/Drop/tests/Drop.Positioner.test.js @@ -1,6 +1,6 @@ import React from 'react' import { mount } from 'enzyme' -import Positioner from '../Positioner' +import Positioner from '../Drop.Positioner' const simulateEvent = eventName => { window.dispatchEvent(new Event(eventName)) diff --git a/src/components/Dropdown/Divider.js b/src/components/Dropdown/Dropdown.Divider.tsx similarity index 81% rename from src/components/Dropdown/Divider.js rename to src/components/Dropdown/Dropdown.Divider.tsx index b3f26c92f..bae8955d1 100644 --- a/src/components/Dropdown/Divider.js +++ b/src/components/Dropdown/Dropdown.Divider.tsx @@ -1,10 +1,9 @@ -// @flow -import React from 'react' +import * as React from 'react' import { classNames } from '../../utilities/classNames' type Props = { - children?: any, - className?: string, + children?: any + className?: string } const Divider = (props: Props) => { diff --git a/src/components/Dropdown/Header.js b/src/components/Dropdown/Dropdown.Header.tsx similarity index 78% rename from src/components/Dropdown/Header.js rename to src/components/Dropdown/Dropdown.Header.tsx index 72a431723..39b40b59b 100644 --- a/src/components/Dropdown/Header.js +++ b/src/components/Dropdown/Dropdown.Header.tsx @@ -1,11 +1,10 @@ -// @flow -import React from 'react' -import Heading from '../Heading' +import * as React from 'react' +import Heading from '../Heading/index' import { classNames } from '../../utilities/classNames' type Props = { - children?: any, - className?: string, + children?: any + className?: string } const Header = (props: Props) => { diff --git a/src/components/Dropdown/Item.js b/src/components/Dropdown/Dropdown.Item.tsx similarity index 70% rename from src/components/Dropdown/Item.js rename to src/components/Dropdown/Dropdown.Item.tsx index 70654a404..6271fd68f 100644 --- a/src/components/Dropdown/Item.js +++ b/src/components/Dropdown/Dropdown.Item.tsx @@ -1,41 +1,13 @@ -// @flow -import React, { PureComponent as Component } from 'react' -import PropTypes from 'prop-types' +import * as React from 'react' import Flexy from '../Flexy' import Icon from '../Icon' import Keys from '../../constants/Keys' -import { default as Menu, MenuComponent } from './Menu' +import { default as Menu, MenuComponent } from './Dropdown.Menu' import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' +import { DropdownItemProps, DropdownItemState } from './Dropdown.types' -type Props = { - children?: any, - className?: string, - disabled: boolean, - enableTabNavigation: boolean, - isHover?: boolean, - isFocused?: boolean, - isOpen?: boolean, - itemIndex: number, - itemRef: (ref: any) => void, - onBlur: (event: Event, reactEvent: Event, instance: Object) => void, - onClick: (event: Event, reactEvent: Event, instance: Object) => void, - onSelect: (value: any) => void, - onFocus: (event: Event, reactEvent: Event, instance: Object) => void, - onMouseEnter: (event: Event, reactEvent: Event, instance: Object) => void, - onMouseLeave: (event: Event, reactEvent: Event, instance: Object) => void, - onMenuClose: () => void, - onParentMenuClose: () => void, - value?: any, -} - -type State = { - isOpen: ?boolean, - isHover: ?boolean, - isFocused: ?boolean, -} - -class Item extends Component { +class Item extends React.PureComponent { static defaultProps = { disabled: false, enableTabNavigation: false, @@ -50,16 +22,16 @@ class Item extends Component { } static childContextTypes = { - parentMenu: PropTypes.element, - parentMenuClose: PropTypes.func, + parentMenu: noop, + parentMenuClose: noop, } - node: ?HTMLElement = null - menu: ?any = null + node: HTMLElement | null = null + menu: any = null _isMounted: boolean = false - constructor(props: Props) { - super() + constructor(props) { + super(props) this.state = { isOpen: props.isOpen, @@ -67,13 +39,13 @@ class Item extends Component { isFocused: props.isFocused, } - this.handleOnBlur = this.handleOnBlur.bind(this) - this.handleOnClick = this.handleOnClick.bind(this) - this.handleOnEnter = this.handleOnEnter.bind(this) - this.handleOnFocus = this.handleOnFocus.bind(this) - this.handleOnMouseEnter = this.handleOnMouseEnter.bind(this) - this.handleOnMouseLeave = this.handleOnMouseLeave.bind(this) - this.handleOnMenuClose = this.handleOnMenuClose.bind(this) + // this.handleOnBlur = this.handleOnBlur.bind(this) + // this.handleOnClick = this.handleOnClick.bind(this) + // this.handleOnEnter = this.handleOnEnter.bind(this) + // this.handleOnFocus = this.handleOnFocus.bind(this) + // this.handleOnMouseEnter = this.handleOnMouseEnter.bind(this) + // this.handleOnMouseLeave = this.handleOnMouseLeave.bind(this) + // this.handleOnMenuClose = this.handleOnMenuClose.bind(this) } componentWillMount = () => { @@ -86,13 +58,14 @@ class Item extends Component { getChildContext = () => { const { onParentMenuClose } = this.props + return { parentMenu: this.menu, parentMenuClose: onParentMenuClose, } } - componentWillReceiveProps = (nextProps: Props) => { + componentWillReceiveProps = nextProps => { const { isFocused, isHover, isOpen } = this.state if ( nextProps.isFocused !== isFocused || @@ -111,27 +84,27 @@ class Item extends Component { this._isMounted = false } - handleOnBlur = (event: Event, reactEvent: Event) => { + handleOnBlur = event => { const { onBlur } = this.props - onBlur(event, reactEvent, this) + onBlur(event, this) this.setState({ isFocused: false, }) } - handleOnEnter = (event: KeyboardEvent, reactEvent: Event) => { + handleOnEnter = event => { event.stopPropagation() /* istanbul ignore else */ if (event.keyCode === Keys.ENTER) { if (this.menu) { - this.handleOnMouseEnter(event, reactEvent) + this.handleOnMouseEnter(event) } else { - this.handleOnClick(event, reactEvent) + this.handleOnClick(event) } } } - handleOnClick = (event: Event, reactEvent: Event) => { + handleOnClick = event => { const { disabled, onClick, onSelect, value } = this.props if (event) event.stopPropagation() @@ -139,7 +112,7 @@ class Item extends Component { /* istanbul ignore else */ if (!this.menu) { - onClick(event, reactEvent, this) + onClick(event, this) onSelect(value) } else { this.setState({ @@ -148,25 +121,25 @@ class Item extends Component { } } - handleOnFocus = (event: Event, reactEvent: Event) => { + handleOnFocus = event => { const { onFocus } = this.props - onFocus(event, reactEvent, this) + onFocus(event, this) this.setState({ isFocused: true, }) } - handleOnMouseEnter = (event: Event, reactEvent: Event) => { + handleOnMouseEnter = event => { const { onMouseEnter } = this.props - onMouseEnter(event, reactEvent, this) + onMouseEnter(event, this) this.setState({ isHover: true, }) } - handleOnMouseLeave = (event: Event, reactEvent: Event) => { + handleOnMouseLeave = event => { const { onMouseLeave } = this.props - onMouseLeave(event, reactEvent, this) + onMouseLeave(event, this) this.setState({ isHover: false, }) @@ -186,8 +159,9 @@ class Item extends Component { getMenuFromChildren = () => { const { children } = this.props + if (Array.isArray(children)) { - return children.find(child => this.getMenu(child)) + return children.find(child => Boolean(this.getMenu(child))) } else { return this.getMenu(children) ? children : null } @@ -195,6 +169,7 @@ class Item extends Component { removeMenuFromChildren = () => { const { children } = this.props + if (this.menu && Array.isArray(children)) { return children.filter(child => !this.getMenu(child)) } else { @@ -217,6 +192,7 @@ class Item extends Component { onClick, onFocus, onMouseEnter, + onMouseLeave, onMenuClose, onParentMenuClose, ...rest diff --git a/src/components/Dropdown/Menu.js b/src/components/Dropdown/Dropdown.Menu.tsx similarity index 85% rename from src/components/Dropdown/Menu.js rename to src/components/Dropdown/Dropdown.Menu.tsx index 2f75317b8..654f71724 100644 --- a/src/components/Dropdown/Menu.js +++ b/src/components/Dropdown/Dropdown.Menu.tsx @@ -1,8 +1,6 @@ -// @flow -import React, { PureComponent as Component } from 'react' -import PropTypes from 'prop-types' +import * as React from 'react' import enhanceComponentMethod from '@helpscout/react-utils/dist/enhanceComponentMethod' -import Item from './Item' +import Item from './Dropdown.Item' import EventListener from '../EventListener' import KeypressListener from '../KeypressListener' import Animate from '../Animate' @@ -16,29 +14,7 @@ import { incrementFocusIndex } from '../../utilities/focus' import { noop, requestAnimationFrame } from '../../utilities/other' import { applyStylesToNode, isNodeScrollable } from '../../utilities/node' import { getHeightRelativeToViewport } from '../../utilities/nodePosition' -import type { DropdownDirection } from './types' - -type Props = { - children?: any, - className?: string, - closeMenuOnClick: boolean, - closePortal: () => void, - enableCycling: boolean, - enableTabNavigation: boolean, - isOpen: boolean, - onBeforeClose: () => void, - onBeforeOpen: () => void, - onClose: () => void, - onOpen: () => void, - onSelect: () => void, - selectedIndex: number, - trigger?: ?HTMLElement, -} - -type State = { - focusIndex: ?number, - hoverIndex: ?number, -} +import { DropdownMenuProps, DropdownMenuState } from './Dropdown.types' const dropOptions = { autoPosition: true, @@ -47,7 +23,7 @@ const dropOptions = { timeout: 0, } -class Menu extends Component { +class Menu extends React.PureComponent { static defaultProps = { closeMenuOnClick: true, enableCycling: false, @@ -57,24 +33,26 @@ class Menu extends Component { onOpen: noop, onSelect: noop, } + static contextTypes = { - parentMenu: PropTypes.element, - parentMenuClose: PropTypes.func, + parentMenu: noop, + parentMenuClose: noop, } - items: Array = [] + items: Array = [] isFocused: boolean = false - height: ?number = null + height: number | null = null - node: ?HTMLElement = null - wrapperNode: ?HTMLElement = null - contentNode: ?HTMLElement = null - scrollableNode: ?HTMLElement = null - listNode: ?HTMLElement = null + node: HTMLElement | null = null + wrapperNode: HTMLElement | null = null + contentNode: HTMLElement | null = null + scrollableNode: HTMLElement | null = null + listNode: HTMLElement | null = null _isMounted: boolean = false - constructor(props: Props) { - super() + constructor(props) { + super(props) + this.state = { focusIndex: typeof props.selectedIndex === 'number' ? props.selectedIndex : null, @@ -112,14 +90,14 @@ class Menu extends Component { }) } - componentWillUpdate(nextProps: Props) { + componentWillUpdate(nextProps) { if (this.props.isOpen !== nextProps.isOpen) { this.mapRefsToItems() this.isFocused = nextProps.isOpen } } - componentDidUpdate(prevProps: Props) { + componentDidUpdate(prevProps) { if (this.props.isOpen !== prevProps.isOpen) { this.mapRefsToItems() } @@ -129,7 +107,7 @@ class Menu extends Component { this._isMounted = false } - safeSetState(newState: Object) { + safeSetState(newState) { /* istanbul ignore else */ if (this._isMounted) { this.setState(newState) @@ -145,6 +123,9 @@ class Menu extends Component { if (height !== this.height) { // Direct DOM manipulation to avoid component re-render from state change applyStylesToNode(this.contentNode, { height }) + + // TODO: fix typescript complains + // @ts-ignore this.height = height } } @@ -155,8 +136,10 @@ class Menu extends Component { mapRefsToItems = () => { this.items = [] - Object.keys(this.refs).forEach((key, index) => { + Object.keys(this.refs).forEach(key => { /* istanbul ignore else */ + // TODO: fix typescript complains + // @ts-ignore if (includes(key, 'item-')) { const item = this.refs[key] this.items.push(item) @@ -164,11 +147,11 @@ class Menu extends Component { }) } - getIndexFromItem = (item: any) => { + getIndexFromItem = item => { return item.props.itemIndex } - incrementFocusIndex = (direction: DropdownDirection) => { + incrementFocusIndex = direction => { const { enableCycling } = this.props const { focusIndex } = this.state const itemCount = this.items.length - 1 @@ -186,31 +169,31 @@ class Menu extends Component { }) } - handleTab = (event: KeyboardEvent) => { + handleTab = event => { if (!this.props.enableTabNavigation) return this.handleDownArrow(event) } - handleShiftTab = (event: KeyboardEvent) => { + handleShiftTab = event => { if (!this.props.enableTabNavigation) return this.handleUpArrow(event) } - handleUpArrow = (event: KeyboardEvent) => { + handleUpArrow = event => { event.preventDefault && event.preventDefault() if (!this.isFocused) return this.incrementFocusIndex('up') this.handleFocusItemNode() } - handleDownArrow = (event: KeyboardEvent) => { + handleDownArrow = event => { event.preventDefault && event.preventDefault() if (!this.isFocused) return this.incrementFocusIndex('down') this.handleFocusItemNode() } - handleLeftArrow = (event: KeyboardEvent) => { + handleLeftArrow = event => { event.preventDefault && event.preventDefault() if (!this.isFocused) return const { parentMenu } = this.context @@ -219,7 +202,7 @@ class Menu extends Component { } } - handleRightArrow = (event: KeyboardEvent) => { + handleRightArrow = event => { event.preventDefault && event.preventDefault() const { focusIndex } = this.state if (!this.isFocused) return @@ -233,7 +216,7 @@ class Menu extends Component { } } - handleEscape = (event: KeyboardEvent) => { + handleEscape = event => { this.handleOnClose() } @@ -265,12 +248,12 @@ class Menu extends Component { this.handleOnCloseParent() } - handleItemOnFocus = (event: Event, reactEvent: Event, item: any) => { + handleItemOnFocus = (event, item) => { const focusIndex = this.getIndexFromItem(item) this.safeSetState({ focusIndex }) } - handleItemOnMouseEnter = (event: Event, reactEvent: Event, item: any) => { + handleItemOnMouseEnter = (event, item) => { const focusIndex = this.getIndexFromItem(item) const hoverIndex = focusIndex this.safeSetState({ focusIndex, hoverIndex }) @@ -300,7 +283,7 @@ class Menu extends Component { } } - handleOnMenuClick = (event: Event) => { + handleOnMenuClick = event => { event.stopPropagation() } @@ -432,7 +415,7 @@ class Menu extends Component { ref={node => { this.contentNode = node }} - style={{ height: this.height }} + style={{ height: this.height != null ? this.height : '' }} > { @@ -459,4 +442,6 @@ class Menu extends Component { } export const MenuComponent = Menu +// TODO: fix typescript complains +// @ts-ignore export default Drop(dropOptions)(Menu) diff --git a/src/components/Dropdown/Trigger.js b/src/components/Dropdown/Dropdown.Trigger.tsx similarity index 78% rename from src/components/Dropdown/Trigger.js rename to src/components/Dropdown/Dropdown.Trigger.tsx index 315276d96..88e70f40d 100644 --- a/src/components/Dropdown/Trigger.js +++ b/src/components/Dropdown/Dropdown.Trigger.tsx @@ -1,31 +1,22 @@ -// @flow -import React, { PureComponent as Component } from 'react' -import Button from '../Button' -import Icon from '../Icon' +import * as React from 'react' +import Button from '../Button/index' +import Icon from '../Icon/index' import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' -import type { DropdownDirection } from './types' +import { DropdownTriggerProps } from './Dropdown.types' -type Props = { - children?: any, - className?: string, - direction: DropdownDirection, - isActive: boolean, - onClick: (event: Event) => void, -} - -class Trigger extends Component { +class Trigger extends React.PureComponent { static defaultProps = { children: 'Dropdown', direction: 'down', onClick: noop, isActive: false, } - node: ?HTMLElement = null + node: HTMLElement | null = null /* istanbul ignore next */ // Tested, but Istanbul isn't picking it up - handleOnClick = (event: Event) => { + handleOnClick = event => { event && event.preventDefault() this.props.onClick(event) } diff --git a/src/components/Dropdown/Dropdown.js b/src/components/Dropdown/Dropdown.tsx similarity index 80% rename from src/components/Dropdown/Dropdown.js rename to src/components/Dropdown/Dropdown.tsx index 7dc968db3..974761419 100644 --- a/src/components/Dropdown/Dropdown.js +++ b/src/components/Dropdown/Dropdown.tsx @@ -1,12 +1,11 @@ -// @flow -import React, { PureComponent as Component } from 'react' -import ReactDOM from 'react-dom' +import * as React from 'react' +import * as ReactDOM from 'react-dom' import EventListener from '../EventListener' -import Divider from './Divider' -import Header from './Header' -import Item from './Item' -import { default as Menu, MenuComponent } from './Menu' -import Trigger from './Trigger' +import Divider from './Dropdown.Divider' +import Header from './Dropdown.Header' +import Item from './Dropdown.Item' +import { default as Menu, MenuComponent } from './Dropdown.Menu' +import Trigger from './Dropdown.Trigger' import KeypressListener from '../KeypressListener' import { propConnect } from '../PropProvider' import Keys from '../../constants/Keys' @@ -18,26 +17,12 @@ import { } from '../../utilities/focus' import { isNodeElement } from '../../utilities/node' import { noop } from '../../utilities/other' -import type { DropdownDirection } from './types' +import { DropdownProps, DropdownState } from './Dropdown.types' -type Props = { - children?: any, - className?: string, - closeMenuOnClick: boolean, - direction: DropdownDirection, - enableTabNavigation: boolean, - isOpen: boolean, - onClose: () => void, - onSelect: () => void, - selectedIndex: number, -} - -type State = { - isOpen: boolean, - selectedIndex: number, -} - -export class Dropdown extends Component { +export class Dropdown extends React.PureComponent< + DropdownProps, + DropdownState +> { static defaultProps = { closeMenuOnClick: true, enableTabNavigation: false, @@ -51,23 +36,24 @@ export class Dropdown extends Component { static Trigger = Trigger isFocused: boolean = false - triggerNode: ?HTMLElement | ?Element = null + triggerNode: HTMLElement | Element | null = null _isMounted: boolean = false - constructor(props: Props) { - super() + constructor(props) { + super(props) + this.state = { isOpen: props.isOpen, selectedIndex: props.selectedIndex, } - this.handleOnBodyClick = this.handleOnBodyClick.bind(this) - this.handleOnTriggerClick = this.handleOnTriggerClick.bind(this) - this.handleOnTriggerFocus = this.handleOnTriggerFocus.bind(this) - this.handleOnMenuClose = this.handleOnMenuClose.bind(this) - this.handleDownArrow = this.handleDownArrow.bind(this) - this.handleTab = this.handleTab.bind(this) - this.handleShiftTab = this.handleShiftTab.bind(this) + // this.handleOnBodyClick = this.handleOnBodyClick.bind(this) + // this.handleOnTriggerClick = this.handleOnTriggerClick.bind(this) + // this.handleOnTriggerFocus = this.handleOnTriggerFocus.bind(this) + // this.handleOnMenuClose = this.handleOnMenuClose.bind(this) + // this.handleDownArrow = this.handleDownArrow.bind(this) + // this.handleTab = this.handleTab.bind(this) + // this.handleShiftTab = this.handleShiftTab.bind(this) } componentDidMount = () => { @@ -79,13 +65,13 @@ export class Dropdown extends Component { this._isMounted = false } - safeSetState = (newState: Object) => { + safeSetState = newState => { /* istanbul ignore else */ if (this._isMounted) { this.setState(newState) } } - componentWillUpdate = (nextProps: Props) => { + componentWillUpdate = nextProps => { if (this.props.isOpen !== nextProps.isOpen) { this.safeSetState({ isOpen: nextProps.isOpen }) } @@ -95,10 +81,11 @@ export class Dropdown extends Component { const trigger = this.refs.trigger /* istanbul ignore next */ if (!this.triggerNode) { + // TODO: fix typescript complains + // @ts-ignore this.triggerNode = isNodeElement(trigger) ? trigger - : // $FlowFixMe - ReactDOM.findDOMNode(trigger) + : ReactDOM.findDOMNode(trigger) } } @@ -133,7 +120,8 @@ export class Dropdown extends Component { this.props.onClose() if (this.props.enableTabNavigation && this.triggerNode) { - // $FlowFixMe + // TODO: fix typescript complains + // @ts-ignore this.triggerNode.focus() this.isFocused = true } else { @@ -148,9 +136,11 @@ export class Dropdown extends Component { } } - handleTab = (event: KeyboardEvent) => { + handleTab = event => { this.isFocused = false + if (this.props.enableTabNavigation) return + /* istanbul ignore else */ if (this.state.isOpen) { event.preventDefault && event.preventDefault() @@ -164,10 +154,13 @@ export class Dropdown extends Component { } return false } + /* istanbul ignore next */ + return } - handleShiftTab = (event: KeyboardEvent) => { + handleShiftTab = event => { this.isFocused = false + if (this.props.enableTabNavigation) return /* istanbul ignore else */ if (this.state.isOpen) { @@ -182,6 +175,8 @@ export class Dropdown extends Component { } return false } + /* istanbul ignore next */ + return } render() { diff --git a/src/components/Dropdown/Dropdown.types.ts b/src/components/Dropdown/Dropdown.types.ts new file mode 100644 index 000000000..4b1778992 --- /dev/null +++ b/src/components/Dropdown/Dropdown.types.ts @@ -0,0 +1,76 @@ +export type DropdownDirection = 'up' | 'down' + +export type DropdownProps = { + children?: any + className?: string + closeMenuOnClick: boolean + direction: DropdownDirection + enableTabNavigation: boolean + isOpen: boolean + onClose: () => void + onSelect: () => void + selectedIndex: number +} + +export type DropdownState = { + isOpen: boolean + selectedIndex: number +} + +export type DropdownItemProps = { + children?: any + className?: string + disabled: boolean + enableTabNavigation: boolean + isHover?: boolean + isFocused?: boolean + isOpen?: boolean + itemIndex: number + itemRef: (ref: any) => void + onBlur: (event: Event, instance: Object) => void + onClick: (event: Event, instance: Object) => void + onSelect: (value: any) => void + onFocus: (event: Event, instance: Object) => void + onMouseEnter: (event: Event, instance: Object) => void + onMouseLeave: (event: Event, instance: Object) => void + onMenuClose: () => void + onParentMenuClose: () => void + value?: any +} + +export type DropdownItemState = { + isOpen?: boolean + isHover?: boolean + isFocused?: boolean +} + +export type DropdownMenuProps = { + children?: any + className?: string + closeMenuOnClick: boolean + forceClosePortal: boolean + closePortal: () => void + enableCycling: boolean + enableTabNavigation: boolean + isOpen: boolean + onBeforeClose: () => void + onBeforeOpen: () => void + onClose: () => void + onOpen: () => void + onSelect: () => void + selectedIndex: number + trigger?: HTMLElement +} + +export type DropdownMenuState = { + focusIndex: number + hoverIndex: number | null +} + +export type DropdownTriggerProps = { + children?: any + className?: string + direction: DropdownDirection + isActive: boolean + onClick: (event: Event) => void +} diff --git a/src/components/Dropdown/V2/Dropdown.MenuPortal.tsx b/src/components/Dropdown/V2/Dropdown.MenuPortal.tsx index 8eda456b3..43cefbcba 100644 --- a/src/components/Dropdown/V2/Dropdown.MenuPortal.tsx +++ b/src/components/Dropdown/V2/Dropdown.MenuPortal.tsx @@ -2,6 +2,8 @@ import PortalWrapper from '../../PortalWrapper' export const MenuPortal = ({ children }) => children -export default PortalWrapper({ id: 'DropdownMenuPortal', timeout: 80 })( - MenuPortal -) +export default PortalWrapper({ + id: 'DropdownMenuPortal', + timeout: 80, + alwaysCloseIfLast: true, +})(MenuPortal) diff --git a/src/components/Dropdown/__tests__/Divider.test.js b/src/components/Dropdown/__tests__/Dropdown.Divider.test.js similarity index 92% rename from src/components/Dropdown/__tests__/Divider.test.js rename to src/components/Dropdown/__tests__/Dropdown.Divider.test.js index e967a445b..b09879250 100644 --- a/src/components/Dropdown/__tests__/Divider.test.js +++ b/src/components/Dropdown/__tests__/Dropdown.Divider.test.js @@ -1,6 +1,6 @@ import React from 'react' import { mount } from 'enzyme' -import Divider from '../Divider' +import Divider from '../Dropdown.Divider' describe('ClassName', () => { test('Has default className', () => { diff --git a/src/components/Dropdown/__tests__/Header.test.js b/src/components/Dropdown/__tests__/Dropdown.Header.test.js similarity index 95% rename from src/components/Dropdown/__tests__/Header.test.js rename to src/components/Dropdown/__tests__/Dropdown.Header.test.js index 634bdb406..67ef5e8b9 100644 --- a/src/components/Dropdown/__tests__/Header.test.js +++ b/src/components/Dropdown/__tests__/Dropdown.Header.test.js @@ -1,6 +1,6 @@ import React from 'react' import { mount } from 'enzyme' -import Header from '../Header' +import Header from '../Dropdown.Header' describe('ClassName', () => { test('Has default className', () => { diff --git a/src/components/Dropdown/__tests__/Item.test.js b/src/components/Dropdown/__tests__/Dropdown.Item.test.js similarity index 98% rename from src/components/Dropdown/__tests__/Item.test.js rename to src/components/Dropdown/__tests__/Dropdown.Item.test.js index df3b97341..13ae125cb 100644 --- a/src/components/Dropdown/__tests__/Item.test.js +++ b/src/components/Dropdown/__tests__/Dropdown.Item.test.js @@ -1,7 +1,7 @@ import React from 'react' import { mount, shallow } from 'enzyme' -import Item from '../Item' -import { default as Menu, MenuComponent } from '../Menu' +import Item from '../Dropdown.Item' +import { default as Menu, MenuComponent } from '../Dropdown.Menu' import Icon from '../../Icon' const LINK_CLASSNAME = 'c-DropdownItem__link' diff --git a/src/components/Dropdown/__tests__/Menu.test.js b/src/components/Dropdown/__tests__/Dropdown.Menu.test.js similarity index 99% rename from src/components/Dropdown/__tests__/Menu.test.js rename to src/components/Dropdown/__tests__/Dropdown.Menu.test.js index 43ea634bd..df73b9c43 100644 --- a/src/components/Dropdown/__tests__/Menu.test.js +++ b/src/components/Dropdown/__tests__/Dropdown.Menu.test.js @@ -1,8 +1,8 @@ import React from 'react' import { mount, shallow } from 'enzyme' -import { default as Menu, MenuComponent } from '../Menu' -import Divider from '../Divider' -import Item from '../Item' +import { default as Menu, MenuComponent } from '../Dropdown.Menu' +import Divider from '../Dropdown.Divider' +import Item from '../Dropdown.Item' import Keys from '../../../constants/Keys' jest.useFakeTimers() diff --git a/src/components/Dropdown/__tests__/Trigger.test.js b/src/components/Dropdown/__tests__/Dropdown.Trigger.test.js similarity index 98% rename from src/components/Dropdown/__tests__/Trigger.test.js rename to src/components/Dropdown/__tests__/Dropdown.Trigger.test.js index 86ec9fa06..9a2aeb9b3 100644 --- a/src/components/Dropdown/__tests__/Trigger.test.js +++ b/src/components/Dropdown/__tests__/Dropdown.Trigger.test.js @@ -1,6 +1,6 @@ import React from 'react' import { shallow } from 'enzyme' -import Trigger from '../Trigger' +import Trigger from '../Dropdown.Trigger' import { Button, Icon } from '../../' describe('ClassName', () => { diff --git a/src/components/Dropdown/__tests__/Dropdown.test.js b/src/components/Dropdown/__tests__/Dropdown.test.js index df45236f2..a4b7ea16e 100644 --- a/src/components/Dropdown/__tests__/Dropdown.test.js +++ b/src/components/Dropdown/__tests__/Dropdown.test.js @@ -1,7 +1,7 @@ import React from 'react' import { mount, shallow } from 'enzyme' import { Dropdown } from '../Dropdown' -import { MenuComponent } from '../Menu' +import { MenuComponent } from '../Dropdown.Menu' describe('Classname', () => { test('Has default className', () => { diff --git a/src/components/Dropdown/index.js b/src/components/Dropdown/index.ts similarity index 100% rename from src/components/Dropdown/index.js rename to src/components/Dropdown/index.ts diff --git a/src/components/Dropdown/types.js b/src/components/Dropdown/types.js deleted file mode 100644 index bb0cb08c2..000000000 --- a/src/components/Dropdown/types.js +++ /dev/null @@ -1,3 +0,0 @@ -export type DropdownDirection = -| 'up' -| 'down' \ No newline at end of file diff --git a/src/components/Emoticon/Emoticon.tsx b/src/components/Emoticon/Emoticon.tsx index 727aa757d..49aaf04f0 100644 --- a/src/components/Emoticon/Emoticon.tsx +++ b/src/components/Emoticon/Emoticon.tsx @@ -5,7 +5,7 @@ import EMOTICONS from './Emoticon.icons' import { EmoticonName, EmoticonSize } from './Emoticon.types' import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' -import { EmoticonUI, FaceUI, IconUI } from './Emoticon.css.js' +import { EmoticonUI, FaceUI, IconUI } from './styles/Emoticon.css' import { COMPONENT_KEY } from './Emoticon.utils' export interface Props { diff --git a/src/components/Emoticon/Emoticon.css.js b/src/components/Emoticon/styles/Emoticon.css.js similarity index 96% rename from src/components/Emoticon/Emoticon.css.js rename to src/components/Emoticon/styles/Emoticon.css.js index 0b65bcef0..c53e44938 100644 --- a/src/components/Emoticon/Emoticon.css.js +++ b/src/components/Emoticon/styles/Emoticon.css.js @@ -1,5 +1,5 @@ -import base from '../../styles/resets/base.css.js' -import styled from '../styled' +import base from '../../../styles/resets/base.css.js' +import styled from '../../styled' export const config = { colors: { diff --git a/src/components/Flexy/Block.tsx b/src/components/Flexy/Flexy.Block.tsx similarity index 87% rename from src/components/Flexy/Block.tsx rename to src/components/Flexy/Flexy.Block.tsx index 8d94ad6d2..cf147c707 100644 --- a/src/components/Flexy/Block.tsx +++ b/src/components/Flexy/Flexy.Block.tsx @@ -2,8 +2,8 @@ import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' -import { BlockUI } from './styles/Block.css' +import { COMPONENT_KEY } from './Flexy.utils' +import { BlockUI } from './styles/Flexy.Block.css' export interface Props { children?: any diff --git a/src/components/Flexy/Item.tsx b/src/components/Flexy/Flexy.Item.tsx similarity index 89% rename from src/components/Flexy/Item.tsx rename to src/components/Flexy/Flexy.Item.tsx index 7a1ecf028..d4143161c 100644 --- a/src/components/Flexy/Item.tsx +++ b/src/components/Flexy/Flexy.Item.tsx @@ -2,8 +2,8 @@ import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' -import { ItemUI } from './styles/Item.css' +import { COMPONENT_KEY } from './Flexy.utils' +import { ItemUI } from './styles/Flexy.Item.css' export interface Props { children?: any diff --git a/src/components/Flexy/Flexy.tsx b/src/components/Flexy/Flexy.tsx index 4ebf14d6e..058328c07 100644 --- a/src/components/Flexy/Flexy.tsx +++ b/src/components/Flexy/Flexy.tsx @@ -1,11 +1,11 @@ -import { Align, Gap, Just } from './types.js' +import { Align, Gap, Just } from './Flexy.types' import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' -import Block from './Block' -import Item from './Item' +import Block from './Flexy.Block' +import Item from './Flexy.Item' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Flexy.utils' import { FlexyUI } from './styles/Flexy.css' export interface Props { diff --git a/src/components/Flexy/types.ts b/src/components/Flexy/Flexy.types.ts similarity index 100% rename from src/components/Flexy/types.ts rename to src/components/Flexy/Flexy.types.ts diff --git a/src/components/Flexy/utils.ts b/src/components/Flexy/Flexy.utils.ts similarity index 100% rename from src/components/Flexy/utils.ts rename to src/components/Flexy/Flexy.utils.ts diff --git a/src/components/Flexy/__tests__/Block.test.js b/src/components/Flexy/__tests__/Flexy.Block.test.js similarity index 100% rename from src/components/Flexy/__tests__/Block.test.js rename to src/components/Flexy/__tests__/Flexy.Block.test.js diff --git a/src/components/Flexy/__tests__/Item.test.js b/src/components/Flexy/__tests__/Flexy.Item.test.js similarity index 100% rename from src/components/Flexy/__tests__/Item.test.js rename to src/components/Flexy/__tests__/Flexy.Item.test.js diff --git a/src/components/Flexy/index.ts b/src/components/Flexy/index.ts index 864454f93..4ef5a6e9b 100644 --- a/src/components/Flexy/index.ts +++ b/src/components/Flexy/index.ts @@ -1,6 +1,6 @@ -import { propConnect } from '../PropProvider/index' +import { propConnect } from '../PropProvider' import Flexy from './Flexy' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Flexy.utils' Flexy.Block = propConnect(COMPONENT_KEY.Block)(Flexy.Block) Flexy.Item = propConnect(COMPONENT_KEY.Item)(Flexy.Item) diff --git a/src/components/Flexy/styles/Block.css.js b/src/components/Flexy/styles/Flexy.Block.css.js similarity index 74% rename from src/components/Flexy/styles/Block.css.js rename to src/components/Flexy/styles/Flexy.Block.css.js index da5b35c76..1c6f22535 100644 --- a/src/components/Flexy/styles/Block.css.js +++ b/src/components/Flexy/styles/Flexy.Block.css.js @@ -1,6 +1,5 @@ -// @flow import base from '../../../styles/resets/base.css' -import styled from '../../styled/index' +import styled from '../../styled' export const BlockUI = styled('div')` ${base} flex: 1; diff --git a/src/components/Flexy/styles/Item.css.js b/src/components/Flexy/styles/Flexy.Item.css.js similarity index 81% rename from src/components/Flexy/styles/Item.css.js rename to src/components/Flexy/styles/Flexy.Item.css.js index 0381a3c15..25f6d4a76 100644 --- a/src/components/Flexy/styles/Item.css.js +++ b/src/components/Flexy/styles/Flexy.Item.css.js @@ -1,6 +1,5 @@ -// @flow import base from '../../../styles/resets/base.css.js' -import styled from '../../styled/index' +import styled from '../../styled' export const ItemUI = styled('div')` ${base} &.is-inlineItem { diff --git a/src/components/Flexy/styles/Flexy.css.js b/src/components/Flexy/styles/Flexy.css.js index 0d1be1a90..671ff8f34 100644 --- a/src/components/Flexy/styles/Flexy.css.js +++ b/src/components/Flexy/styles/Flexy.css.js @@ -1,7 +1,6 @@ -// @flow import base from '../../../styles/resets/base.css.js' import forEach from '../../../styles/utilities/forEach' -import styled from '../../styled/index' +import styled from '../../styled' export const config = { gapSize: { @@ -47,7 +46,7 @@ export const FlexyUI = styled('div')` ${makeGapStyles()}; ` -function makeGapStyles(): string { +function makeGapStyles() { return forEach( config.gapSize, (size, value) => ` diff --git a/src/components/FluffyCard/Container.js b/src/components/FluffyCard/FluffyCard.Container.tsx similarity index 70% rename from src/components/FluffyCard/Container.js rename to src/components/FluffyCard/FluffyCard.Container.tsx index 5488fca73..7f44f3cea 100644 --- a/src/components/FluffyCard/Container.js +++ b/src/components/FluffyCard/FluffyCard.Container.tsx @@ -1,17 +1,16 @@ -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { ContainerUI } from './styles/Container.css.js' -import { COMPONENT_KEY } from './utils' +import { ContainerUI } from './styles/FluffyCard.Container.css' +import { COMPONENT_KEY } from './FluffyCard.utils' type Props = { - children?: any, - className?: string, + children?: any + className?: string } -class Container extends Component { +class Container extends React.PureComponent { render() { const { children, className, ...rest } = this.props diff --git a/src/components/FluffyCard/FluffyCard.js b/src/components/FluffyCard/FluffyCard.tsx similarity index 58% rename from src/components/FluffyCard/FluffyCard.js rename to src/components/FluffyCard/FluffyCard.tsx index fd32bec58..bfa8356ba 100644 --- a/src/components/FluffyCard/FluffyCard.js +++ b/src/components/FluffyCard/FluffyCard.tsx @@ -1,33 +1,32 @@ -// @flow -import type { FluffyCardTextAlign } from './types' -import React, { PureComponent as Component } from 'react' -import Container from './Container' +import * as React from 'react' +import { FluffyCardTextAlign } from './FluffyCard.types' +import Container from './FluffyCard.Container' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' import { noop } from '../../utilities/other' -import { FluffyCardUI } from './styles/FluffyCard.css.js' -import { COMPONENT_KEY } from './utils' +import { FluffyCardUI } from './styles/FluffyCard.css' +import { COMPONENT_KEY } from './FluffyCard.utils' type Props = { - autoWordWrap?: boolean, - children?: any, - className?: string, - flex: boolean, - fullHeight: boolean, - hover: boolean, - href?: string, - innerRef: (node: HTMLElement) => void, - nodeRef: () => void, - onBlur: (event: Event) => void, - onClick: (event: Event) => void, - onFocus: (event: Event) => void, - seamless: boolean, - selector: 'string', - textAlign: FluffyCardTextAlign, - to?: string, + autoWordWrap?: boolean + children?: any + className?: string + flex: boolean + fullHeight: boolean + hover: boolean + href?: string + innerRef: (node: HTMLElement) => void + nodeRef: () => void + onBlur: (event: Event) => void + onClick: (event: Event) => void + onFocus: (event: Event) => void + seamless: boolean + selector: 'string' + textAlign: FluffyCardTextAlign + to?: string } -class FluffyCard extends Component { +class FluffyCard extends React.PureComponent { static defaultProps = { flex: false, floating: false, diff --git a/src/components/FluffyCard/FluffyCard.types.ts b/src/components/FluffyCard/FluffyCard.types.ts new file mode 100644 index 000000000..d6e746732 --- /dev/null +++ b/src/components/FluffyCard/FluffyCard.types.ts @@ -0,0 +1 @@ +export type FluffyCardTextAlign = 'left' | 'center' | 'right' diff --git a/src/components/FluffyCard/utils.js b/src/components/FluffyCard/FluffyCard.utils.ts similarity index 100% rename from src/components/FluffyCard/utils.js rename to src/components/FluffyCard/FluffyCard.utils.ts diff --git a/src/components/FluffyCard/__tests__/Container.test.js b/src/components/FluffyCard/__tests__/FluffyCard.Container.test.js similarity index 94% rename from src/components/FluffyCard/__tests__/Container.test.js rename to src/components/FluffyCard/__tests__/FluffyCard.Container.test.js index 5c77db267..43c7d2557 100644 --- a/src/components/FluffyCard/__tests__/Container.test.js +++ b/src/components/FluffyCard/__tests__/FluffyCard.Container.test.js @@ -1,6 +1,6 @@ import React from 'react' import { mount } from 'enzyme' -import Container from '../Container' +import Container from '../FluffyCard.Container' describe('ClassName', () => { test('Has default className', () => { diff --git a/src/components/FluffyCard/index.js b/src/components/FluffyCard/index.ts similarity index 96% rename from src/components/FluffyCard/index.js rename to src/components/FluffyCard/index.ts index cd7e693fe..b5d5aa98d 100644 --- a/src/components/FluffyCard/index.js +++ b/src/components/FluffyCard/index.ts @@ -1,4 +1,3 @@ -// @flow import { propConnect } from '../PropProvider' import FluffyCard from './FluffyCard' diff --git a/src/components/FluffyCard/styles/Container.css.js b/src/components/FluffyCard/styles/FluffyCard.Container.css.js similarity index 95% rename from src/components/FluffyCard/styles/Container.css.js rename to src/components/FluffyCard/styles/FluffyCard.Container.css.js index f4dad64ef..74d3f93c1 100644 --- a/src/components/FluffyCard/styles/Container.css.js +++ b/src/components/FluffyCard/styles/FluffyCard.Container.css.js @@ -1,4 +1,3 @@ -// @flow import baseStyles from '../../../styles/resets/baseStyles.css.js' import styled from '../../styled' diff --git a/src/components/FluffyCard/styles/FluffyCard.css.js b/src/components/FluffyCard/styles/FluffyCard.css.js index 5ba0492a2..8e29f6735 100644 --- a/src/components/FluffyCard/styles/FluffyCard.css.js +++ b/src/components/FluffyCard/styles/FluffyCard.css.js @@ -1,4 +1,3 @@ -// @flow import baseStyles from '../../../styles/resets/baseStyles.css.js' import Card from '../../Card' import styled from '../../styled' diff --git a/src/components/FluffyCard/types.js b/src/components/FluffyCard/types.js deleted file mode 100644 index 3ac278870..000000000 --- a/src/components/FluffyCard/types.js +++ /dev/null @@ -1,4 +0,0 @@ -export type FluffyCardTextAlign = -| 'left' -| 'center' -| 'right' \ No newline at end of file diff --git a/src/components/FormGroup/FormGroup.js b/src/components/FormGroup/FormGroup.tsx similarity index 71% rename from src/components/FormGroup/FormGroup.js rename to src/components/FormGroup/FormGroup.tsx index 5299b57ac..3c70c55aa 100644 --- a/src/components/FormGroup/FormGroup.js +++ b/src/components/FormGroup/FormGroup.tsx @@ -1,17 +1,16 @@ -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { FormGroupUI } from './styles/FormGroup.css.js' -import { COMPONENT_KEY } from './utils' +import { FormGroupUI } from './styles/FormGroup.css' +import { COMPONENT_KEY } from './FromGroup.utils' type Props = { - children?: any, - className?: string, + children?: any + className?: string } -class FormGroup extends Component { +class FormGroup extends React.PureComponent { static Choice: any static Grid: any diff --git a/src/components/FormGroup/Choice.js b/src/components/FormGroup/FromGroup.Choice.tsx similarity index 73% rename from src/components/FormGroup/Choice.js rename to src/components/FormGroup/FromGroup.Choice.tsx index 3fe5b7427..d0ef3308c 100644 --- a/src/components/FormGroup/Choice.js +++ b/src/components/FormGroup/FromGroup.Choice.tsx @@ -1,20 +1,19 @@ -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { FormGroupChoiceUI } from './styles/Choice.css.js' -import { COMPONENT_KEY } from './utils' +import { FormGroupChoiceUI } from './styles/Choice.css' +import { COMPONENT_KEY } from './FromGroup.utils' type Props = { - children?: any, - className?: string, - isResponsive: boolean, - maxWidth?: string | number, - style: Object, + children?: any + className?: string + isResponsive: boolean + maxWidth?: string | number + style: Object } -class Choice extends Component { +class Choice extends React.PureComponent { static defaultProps = { isResponsive: false, style: {}, diff --git a/src/components/FormGroup/Grid.js b/src/components/FormGroup/FromGroup.Grid.tsx similarity index 76% rename from src/components/FormGroup/Grid.js rename to src/components/FormGroup/FromGroup.Grid.tsx index 989048739..fc715ddf6 100644 --- a/src/components/FormGroup/Grid.js +++ b/src/components/FormGroup/FromGroup.Grid.tsx @@ -1,17 +1,16 @@ -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import GridComponent from '../Grid' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './FromGroup.utils' type Props = { - children?: any, - className?: string, + children?: any + className?: string } -class Grid extends Component { +class Grid extends React.PureComponent { render() { const { className, children, ...rest } = this.props diff --git a/src/components/FormGroup/utils.js b/src/components/FormGroup/FromGroup.utils.ts similarity index 100% rename from src/components/FormGroup/utils.js rename to src/components/FormGroup/FromGroup.utils.ts diff --git a/src/components/FormGroup/__tests__/FormGroup.Choice.test.js b/src/components/FormGroup/__tests__/FormGroup.Choice.test.js index 79ebc68be..4a3c286f2 100644 --- a/src/components/FormGroup/__tests__/FormGroup.Choice.test.js +++ b/src/components/FormGroup/__tests__/FormGroup.Choice.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import FormGroupChoice from '../Choice' +import FormGroupChoice from '../FromGroup.Choice' describe('FormGroupChoice', () => { describe('ClassName', () => { diff --git a/src/components/FormGroup/__tests__/FormGroup.test.js b/src/components/FormGroup/__tests__/FormGroup.test.js index f54a7f286..3d6af49bb 100644 --- a/src/components/FormGroup/__tests__/FormGroup.test.js +++ b/src/components/FormGroup/__tests__/FormGroup.test.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' import FormGroup from '../FormGroup' diff --git a/src/components/FormGroup/__tests__/Grid.test.js b/src/components/FormGroup/__tests__/FromGroup.Grid.test.js similarity index 94% rename from src/components/FormGroup/__tests__/Grid.test.js rename to src/components/FormGroup/__tests__/FromGroup.Grid.test.js index 344f2a452..1ac27fccc 100644 --- a/src/components/FormGroup/__tests__/Grid.test.js +++ b/src/components/FormGroup/__tests__/FromGroup.Grid.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import Grid from '../Grid' +import Grid from '../FromGroup.Grid' import { default as GridComponent } from '../../Grid' describe('ClassName', () => { diff --git a/src/components/FormGroup/index.js b/src/components/FormGroup/index.ts similarity index 76% rename from src/components/FormGroup/index.js rename to src/components/FormGroup/index.ts index aec42428c..dd3b610d7 100644 --- a/src/components/FormGroup/index.js +++ b/src/components/FormGroup/index.ts @@ -1,8 +1,7 @@ -// @flow import { propConnect } from '../PropProvider' import FormGroup from './FormGroup' -import Choice from './Choice' -import Grid from './Grid' +import Choice from './FromGroup.Choice' +import Grid from './FromGroup.Grid' FormGroup.Choice = propConnect('FormGroupChoice')(Choice) FormGroup.Grid = propConnect('FormGroupGrid')(Grid) diff --git a/src/components/FormGroup/styles/Choice.css.js b/src/components/FormGroup/styles/Choice.css.js index 07eb4f565..8af919b5c 100644 --- a/src/components/FormGroup/styles/Choice.css.js +++ b/src/components/FormGroup/styles/Choice.css.js @@ -1,5 +1,4 @@ -// @flow -import baseStyles from '../../../styles/resets/baseStyles.css.js' +import baseStyles from '../../../styles/resets/baseStyles.css' import styled from '../../styled' export const FormGroupChoiceUI = styled('div')` diff --git a/src/components/FormGroup/styles/FormGroup.css.js b/src/components/FormGroup/styles/FormGroup.css.js index eee579aae..d7b8ef8bb 100644 --- a/src/components/FormGroup/styles/FormGroup.css.js +++ b/src/components/FormGroup/styles/FormGroup.css.js @@ -1,5 +1,4 @@ -// @flow -import baseStyles from '../../../styles/resets/baseStyles.css.js' +import baseStyles from '../../../styles/resets/baseStyles.css' import styled from '../../styled' export const FormGroupUI = styled('div')` diff --git a/src/components/FormLabel/FormLabel.tsx b/src/components/FormLabel/FormLabel.tsx index cdae92251..cc864a569 100644 --- a/src/components/FormLabel/FormLabel.tsx +++ b/src/components/FormLabel/FormLabel.tsx @@ -1,13 +1,13 @@ import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import Context from './Context' -import HelpText from '../HelpText/index' -import Label from '../Label/index.js' +import HelpText from '../HelpText' +import Label from '../Label' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { createUniqueIDFactory } from '../../utilities/id.js' +import { createUniqueIDFactory } from '../../utilities/id' import { FormLabelUI, FormLabelHelpTextUI } from './styles/FormLabel.css' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './FormLabel.utils' export interface Props { children?: any @@ -28,6 +28,7 @@ const uniqueID = createUniqueIDFactory('FormControl') class FormLabel extends React.Component { constructor(props: Props) { super(props) + this.state = { id: props.for || props.id || uniqueID(), } diff --git a/src/components/FormLabel/types.ts b/src/components/FormLabel/FormLabel.types.ts similarity index 100% rename from src/components/FormLabel/types.ts rename to src/components/FormLabel/FormLabel.types.ts diff --git a/src/components/FormLabel/utils.ts b/src/components/FormLabel/FormLabel.utils.ts similarity index 100% rename from src/components/FormLabel/utils.ts rename to src/components/FormLabel/FormLabel.utils.ts diff --git a/src/components/FormLabel/index.ts b/src/components/FormLabel/index.ts index 4b0fc711c..e8f648f6d 100644 --- a/src/components/FormLabel/index.ts +++ b/src/components/FormLabel/index.ts @@ -1,5 +1,5 @@ import { propConnect } from '../PropProvider' import FormLabel from './FormLabel' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './FormLabel.utils' export default propConnect(COMPONENT_KEY)(FormLabel) diff --git a/src/components/GreeterCard/GreeterCard.Button.tsx b/src/components/GreeterCard/GreeterCard.Button.tsx index cdd04cd11..1f1b3b4ed 100644 --- a/src/components/GreeterCard/GreeterCard.Button.tsx +++ b/src/components/GreeterCard/GreeterCard.Button.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { ActionButtonUI } from './GreeterCard.css' +import { ActionButtonUI } from './styles/GreeterCard.css' import { noop } from '../../utilities/other' import Truncate from '../Truncate' diff --git a/src/components/GreeterCard/GreeterCard.tsx b/src/components/GreeterCard/GreeterCard.tsx index a8769918f..40cbe21a6 100644 --- a/src/components/GreeterCard/GreeterCard.tsx +++ b/src/components/GreeterCard/GreeterCard.tsx @@ -11,7 +11,7 @@ import { SubtitleUI, BodyUI, ActionUI, -} from './GreeterCard.css' +} from './styles/GreeterCard.css' import { COMPONENT_KEY } from './GreeterCard.utils' export interface Props { diff --git a/src/components/GreeterCard/__tests__/GreeterCard.test.tsx b/src/components/GreeterCard/__tests__/GreeterCard.test.tsx index bc87bf3f7..016f85ff3 100644 --- a/src/components/GreeterCard/__tests__/GreeterCard.test.tsx +++ b/src/components/GreeterCard/__tests__/GreeterCard.test.tsx @@ -1,7 +1,12 @@ import * as React from 'react' import { mount, render } from 'enzyme' import { GreeterCard } from '../GreeterCard' -import { TitleUI, SubtitleUI, BodyUI, ActionUI } from '../GreeterCard.css' +import { + TitleUI, + SubtitleUI, + BodyUI, + ActionUI, +} from '../styles/GreeterCard.css' import { Animate } from '../../index' describe('className', () => { diff --git a/src/components/GreeterCard/GreeterCard.css.ts b/src/components/GreeterCard/styles/GreeterCard.css.ts similarity index 76% rename from src/components/GreeterCard/GreeterCard.css.ts rename to src/components/GreeterCard/styles/GreeterCard.css.ts index 138467128..3b1497f09 100644 --- a/src/components/GreeterCard/GreeterCard.css.ts +++ b/src/components/GreeterCard/styles/GreeterCard.css.ts @@ -1,10 +1,10 @@ -import styled from '../styled' -import Card from '../Card' -import Button from '../Button' -import Heading from '../Heading' -import Text from '../Text' -import baseStyles from '../../styles/resets/baseStyles.css' -import { makeFontFamily, setFontSize } from '../../styles/utilities/font' +import styled from '../../styled' +import Card from '../../Card' +import Button from '../../Button' +import Heading from '../../Heading' +import Text from '../../Text' +import baseStyles from '../../../styles/resets/baseStyles.css' +import { makeFontFamily, setFontSize } from '../../../styles/utilities/font' const fontFamily = makeFontFamily('Barlow') diff --git a/src/components/GreeterRow/GreeterRow.tsx b/src/components/GreeterRow/GreeterRow.tsx index 945b23305..32d2c5271 100644 --- a/src/components/GreeterRow/GreeterRow.tsx +++ b/src/components/GreeterRow/GreeterRow.tsx @@ -7,7 +7,7 @@ import Tooltip from '../Tooltip' import { classNames } from '../../utilities/classNames' import { renderChildrenSafely } from '../../utilities/component' import { noop } from '../../utilities/other' -import { ContentUI, ErrorIconUI, PauseIconUI } from './GreeterRow.css' +import { ContentUI, ErrorIconUI, PauseIconUI } from './styles/GreeterRow.css' import { COMPONENT_KEY } from './GreeterRow.utils' export interface Props { diff --git a/src/components/GreeterRow/GreeterRow.css.ts b/src/components/GreeterRow/styles/GreeterRow.css.ts similarity index 66% rename from src/components/GreeterRow/GreeterRow.css.ts rename to src/components/GreeterRow/styles/GreeterRow.css.ts index 21f4c4de7..052ec01ac 100644 --- a/src/components/GreeterRow/GreeterRow.css.ts +++ b/src/components/GreeterRow/styles/GreeterRow.css.ts @@ -1,7 +1,7 @@ -import styled from '../styled' -import Flexy from '../Flexy' -import Icon from '../Icon' -import { getColor } from '../../styles/utilities/color' +import styled from '../../styled' +import Flexy from '../../Flexy' +import Icon from '../../Icon' +import { getColor } from '../../../styles/utilities/color' export const ErrorIconUI = styled(Icon)`` diff --git a/src/components/Grid/Col.js b/src/components/Grid/Grid.Col.tsx similarity index 62% rename from src/components/Grid/Col.js rename to src/components/Grid/Grid.Col.tsx index 2a956318a..0c4cd7447 100644 --- a/src/components/Grid/Col.js +++ b/src/components/Grid/Grid.Col.tsx @@ -1,18 +1,12 @@ -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames, variantClassNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' -import { ColUI } from './styles/Col.css.js' +import { COMPONENT_KEY } from './Grid.utils' +import { ColUI } from './styles/Grid.Col.css' +import { GridColProps } from './Grid.types' -export type ColSize = 'md' | 'sm' | 'xs' -export interface Props { - className?: string; - children?: any; - size?: ColSize; -} - -class Col extends Component { +class Col extends React.PureComponent { render() { const { className, children, size, ...rest } = this.props @@ -27,6 +21,6 @@ class Col extends Component { } } -namespaceComponent(COMPONENT_KEY.Col, Col) +namespaceComponent(COMPONENT_KEY.Col)(Col) export default Col diff --git a/src/components/Grid/Container.js b/src/components/Grid/Grid.Container.tsx similarity index 62% rename from src/components/Grid/Container.js rename to src/components/Grid/Grid.Container.tsx index 8f46d84a6..842812801 100644 --- a/src/components/Grid/Container.js +++ b/src/components/Grid/Grid.Container.tsx @@ -1,22 +1,12 @@ -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' -import { ContainerUI } from './styles/Container.css.js' +import { COMPONENT_KEY } from './Grid.utils' +import { ContainerUI } from './styles/Grid.Container.css' +import { GridContainerProps } from './Grid.types' -export type ContainerSize = 'md' | 'sm' | 'xs' -export interface Props { - className?: string; - children?: any; - fluid: boolean; // deprecating - responsive: boolean; // deprecating - isFluid: boolean; - isResponsive: boolean; - size: ContainerSize; -} - -class Container extends Component { +class Container extends React.PureComponent { static defaultProps = { fluid: false, responsive: false, @@ -52,6 +42,6 @@ class Container extends Component { } } -namespaceComponent(COMPONENT_KEY.Container, Container) +namespaceComponent(COMPONENT_KEY.Container)(Container) export default Container diff --git a/src/components/Grid/Row.js b/src/components/Grid/Grid.Row.tsx similarity index 61% rename from src/components/Grid/Row.js rename to src/components/Grid/Grid.Row.tsx index d25b4f051..ca74249fc 100644 --- a/src/components/Grid/Row.js +++ b/src/components/Grid/Grid.Row.tsx @@ -1,20 +1,12 @@ -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' -import { RowUI } from './styles/Row.css.js' +import { COMPONENT_KEY } from './Grid.utils' +import { RowUI } from './styles/Grid.Row.css' +import { GridRowProps } from './Grid.types' -export type RowSize = 'md' | 'sm' | 'xs' -export interface Props { - className?: string; - children?: any; - flex: boolean; // deprecating - isFlex: boolean; - size?: RowSize; -} - -class Row extends Component { +class Row extends React.PureComponent { static defaultProps = { flex: false, isFlex: false, @@ -38,6 +30,6 @@ class Row extends Component { } } -namespaceComponent(COMPONENT_KEY.Row, Row) +namespaceComponent(COMPONENT_KEY.Row)(Row) export default Row diff --git a/src/components/Grid/Grid.js b/src/components/Grid/Grid.tsx similarity index 70% rename from src/components/Grid/Grid.js rename to src/components/Grid/Grid.tsx index d7b52d6fb..397cbecac 100644 --- a/src/components/Grid/Grid.js +++ b/src/components/Grid/Grid.tsx @@ -1,12 +1,12 @@ -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' -import Container from './Container' -import Row from './Row' -import Col from './Col' +import { COMPONENT_KEY } from './Grid.utils' +import Container from './Grid.Container' +import Row from './Grid.Row' +import Col from './Grid.Col' -class Grid extends Component { +class Grid extends React.PureComponent { static Container = Container static Row = Row static Col = Col diff --git a/src/components/Grid/Grid.types.ts b/src/components/Grid/Grid.types.ts new file mode 100644 index 000000000..bb87866cd --- /dev/null +++ b/src/components/Grid/Grid.types.ts @@ -0,0 +1,28 @@ +export type ColSize = 'md' | 'sm' | 'xs' + +export interface GridColProps { + className?: string + children?: any + size?: ColSize +} + +export type ContainerSize = 'md' | 'sm' | 'xs' + +export interface GridContainerProps { + className?: string + children?: any + fluid: boolean // deprecating + responsive: boolean // deprecating + isFluid: boolean + isResponsive: boolean + size?: ContainerSize +} + +export type RowSize = 'md' | 'sm' | 'xs' +export interface GridRowProps { + className?: string + children?: any + flex: boolean // deprecating + isFlex: boolean + size?: RowSize +} diff --git a/src/components/Grid/utils.js b/src/components/Grid/Grid.utils.ts similarity index 100% rename from src/components/Grid/utils.js rename to src/components/Grid/Grid.utils.ts diff --git a/src/components/Grid/__tests__/Col.test.js b/src/components/Grid/__tests__/Grid.Col.test.js similarity index 98% rename from src/components/Grid/__tests__/Col.test.js rename to src/components/Grid/__tests__/Grid.Col.test.js index c63b0de93..b31af4fae 100644 --- a/src/components/Grid/__tests__/Col.test.js +++ b/src/components/Grid/__tests__/Grid.Col.test.js @@ -1,6 +1,6 @@ import React from 'react' import { mount } from 'enzyme' -import Col from '../Col' +import Col from '../Grid.Col' describe('ClassName', () => { test('Has the correct CSS class', () => { diff --git a/src/components/Grid/__tests__/Container.test.js b/src/components/Grid/__tests__/Grid.Container.test.js similarity index 98% rename from src/components/Grid/__tests__/Container.test.js rename to src/components/Grid/__tests__/Grid.Container.test.js index a3dcfceb4..2ead20939 100644 --- a/src/components/Grid/__tests__/Container.test.js +++ b/src/components/Grid/__tests__/Grid.Container.test.js @@ -1,6 +1,6 @@ import React from 'react' import { mount } from 'enzyme' -import Container from '../Container' +import Container from '../Grid.Container' describe('ClassName', () => { test('Has the correct CSS class', () => { diff --git a/src/components/Grid/__tests__/Row.test.js b/src/components/Grid/__tests__/Grid.Row.test.js similarity index 98% rename from src/components/Grid/__tests__/Row.test.js rename to src/components/Grid/__tests__/Grid.Row.test.js index f3b0bd5ba..40da97cf0 100644 --- a/src/components/Grid/__tests__/Row.test.js +++ b/src/components/Grid/__tests__/Grid.Row.test.js @@ -1,6 +1,6 @@ import React from 'react' import { mount } from 'enzyme' -import Row from '../Row' +import Row from '../Grid.Row' describe('ClassName', () => { test('Has the correct CSS class', () => { diff --git a/src/components/Grid/__tests__/Grid.test.js b/src/components/Grid/__tests__/Grid.test.js index 7a8ee9b40..43e3f45bd 100644 --- a/src/components/Grid/__tests__/Grid.test.js +++ b/src/components/Grid/__tests__/Grid.test.js @@ -1,8 +1,8 @@ import React from 'react' import { mount } from 'enzyme' import Grid from '..' -import Container from '../Container' -import Row from '../Row' +import Container from '../Grid.Container' +import Row from '../Grid.Row' describe('ClassName', () => { test('Has the correct CSS class', () => { diff --git a/src/components/Grid/index.js b/src/components/Grid/index.ts similarity index 86% rename from src/components/Grid/index.js rename to src/components/Grid/index.ts index ba8fc1591..6de0980d3 100644 --- a/src/components/Grid/index.js +++ b/src/components/Grid/index.ts @@ -1,7 +1,6 @@ -// @flow import { propConnect } from '../PropProvider' import Grid from './Grid' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Grid.utils' Grid.Container = propConnect(COMPONENT_KEY.Container)(Grid.Container) Grid.Row = propConnect(COMPONENT_KEY.Row)(Grid.Row) diff --git a/src/components/Grid/styles/Col.css.js b/src/components/Grid/styles/Grid.Col.css.ts similarity index 96% rename from src/components/Grid/styles/Col.css.js rename to src/components/Grid/styles/Grid.Col.css.ts index 3869d2232..fc28b8264 100644 --- a/src/components/Grid/styles/Col.css.js +++ b/src/components/Grid/styles/Grid.Col.css.ts @@ -1,5 +1,5 @@ import styled from '../../styled' -import { breakpoints } from '../../../styles/mixins/breakpoints.css.js' +import { breakpoints } from '../../../styles/mixins/breakpoints.css' export const config = { gutter: '15px', @@ -17,7 +17,7 @@ export const ColUI = styled('div')` ${makeSizeStyles}; ` -function makeSizeStyles(): string { +function makeSizeStyles() { let styles = '' // Media queries don't bump CSS scope. Therefore, the 0-12 size generators diff --git a/src/components/Grid/styles/Container.css.js b/src/components/Grid/styles/Grid.Container.css.ts similarity index 91% rename from src/components/Grid/styles/Container.css.js rename to src/components/Grid/styles/Grid.Container.css.ts index 370534432..7805f0551 100644 --- a/src/components/Grid/styles/Container.css.js +++ b/src/components/Grid/styles/Grid.Container.css.ts @@ -1,6 +1,6 @@ import styled from '../../styled' import forEach from '../../../styles/utilities/forEach' -import { breakpointAll } from '../../../styles/mixins/breakpoints.css.js' +import { breakpointAll } from '../../../styles/mixins/breakpoints.css' export const config = { maxWidth: '1140px', @@ -34,7 +34,7 @@ export const ContainerUI = styled('div')` ${makeSizeStyles}; ` -function makeResponsiveStyles(): string { +function makeResponsiveStyles() { return breakpointAll(` &.is-responsive { max-width: 100%; @@ -42,7 +42,7 @@ function makeResponsiveStyles(): string { `) } -function makeSizeStyles(): string { +function makeSizeStyles() { return forEach( config.size, (size, props) => ` diff --git a/src/components/Grid/styles/Row.css.js b/src/components/Grid/styles/Grid.Row.css.ts similarity index 96% rename from src/components/Grid/styles/Row.css.js rename to src/components/Grid/styles/Grid.Row.css.ts index 55cf20c04..17d588e7d 100644 --- a/src/components/Grid/styles/Row.css.js +++ b/src/components/Grid/styles/Grid.Row.css.ts @@ -44,7 +44,7 @@ export const RowUI = styled('div')` ${makeSizeStyles}; ` -function makeSizeStyles(): string { +function makeSizeStyles() { return forEach( config.size, (size, props) => ` diff --git a/src/components/Heading/Heading.tsx b/src/components/Heading/Heading.tsx index 2d4e5bda3..3d7f4eb17 100644 --- a/src/components/Heading/Heading.tsx +++ b/src/components/Heading/Heading.tsx @@ -1,11 +1,11 @@ -import { HeadingSize } from './types' import * as React from 'react' +import { HeadingSize } from './Heading.types' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import styled from '../styled' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import css from './Heading.css' -import { COMPONENT_KEY } from './utils' +import css from './styles/Heading.css' +import { COMPONENT_KEY } from './Heading.utils' export interface Props { center: boolean diff --git a/src/components/Heading/types.ts b/src/components/Heading/Heading.types.ts similarity index 100% rename from src/components/Heading/types.ts rename to src/components/Heading/Heading.types.ts diff --git a/src/components/Heading/utils.ts b/src/components/Heading/Heading.utils.ts similarity index 100% rename from src/components/Heading/utils.ts rename to src/components/Heading/Heading.utils.ts diff --git a/src/components/Heading/index.ts b/src/components/Heading/index.ts index ee2053887..7f4dc2dbf 100644 --- a/src/components/Heading/index.ts +++ b/src/components/Heading/index.ts @@ -1,5 +1,5 @@ import { propConnect } from '../PropProvider' import Heading from './Heading' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Heading.utils' export default propConnect(COMPONENT_KEY)(Heading) diff --git a/src/components/Heading/Heading.css.ts b/src/components/Heading/styles/Heading.css.ts similarity index 82% rename from src/components/Heading/Heading.css.ts rename to src/components/Heading/styles/Heading.css.ts index 922ab68fc..74be790e8 100644 --- a/src/components/Heading/Heading.css.ts +++ b/src/components/Heading/styles/Heading.css.ts @@ -1,11 +1,11 @@ -import baseStyles from '../../styles/resets/baseStyles.css.js' -import linkStyles from '../../styles/mixins/linkStyles.css.js' -import { getColor } from '../../styles/utilities/color' -import forEach from '../../styles/utilities/forEach' +import baseStyles from '../../../styles/resets/baseStyles.css' +import linkStyles from '../../../styles/mixins/linkStyles.css' +import { getColor } from '../../../styles/utilities/color' +import forEach from '../../../styles/utilities/forEach' import variableFontSize, { BASE_FONT_SIZE, -} from '../../styles/utilities/variableFontSize' -import { makeWeightStyles } from '../Text/styles/Text.css' +} from '../../../styles/utilities/variableFontSize' +import { makeWeightStyles } from '../../Text/styles/Text.css' export const VAR_NAMESPACE_SIZE = 'BlueConfigHeadingFontSize' export const SHADES = { diff --git a/src/components/HelpText/HelpText.js b/src/components/HelpText/HelpText.tsx similarity index 74% rename from src/components/HelpText/HelpText.js rename to src/components/HelpText/HelpText.tsx index 1ac00ab53..b3c970b79 100644 --- a/src/components/HelpText/HelpText.js +++ b/src/components/HelpText/HelpText.tsx @@ -1,22 +1,21 @@ -// @flow -import type { Sizes } from '../Text/types' -import type { TextShade, UIState } from '../../constants/types' -import React from 'react' +import * as React from 'react' +import { TextSize } from '../Text/Text.types' +import { TextShade, UIState } from '../../constants/types' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' import Text from '../Text' import { isString } from '../../utilities/is' -import { HelpTextUI } from './styles/HelpText.css.js' -import { COMPONENT_KEY } from './utils' +import { HelpTextUI } from './styles/HelpText.css' +import { COMPONENT_KEY } from './HelpText.utils' type Props = { - children?: any, - className?: string, - isCompact: boolean, - shade?: TextShade, - size?: Sizes, - state?: ?UIState, + children?: any + className?: string + isCompact: boolean + shade?: TextShade + size?: TextSize + state?: UIState } const HelpText = (props: Props) => { diff --git a/src/components/HelpText/utils.js b/src/components/HelpText/HelpText.utils.ts similarity index 100% rename from src/components/HelpText/utils.js rename to src/components/HelpText/HelpText.utils.ts diff --git a/src/components/HelpText/index.js b/src/components/HelpText/index.ts similarity index 93% rename from src/components/HelpText/index.js rename to src/components/HelpText/index.ts index 6aa89a44b..23328106b 100644 --- a/src/components/HelpText/index.js +++ b/src/components/HelpText/index.ts @@ -1,4 +1,3 @@ -// @flow import { propConnect } from '../PropProvider' import HelpText from './HelpText' diff --git a/src/components/HelpText/styles/HelpText.css.js b/src/components/HelpText/styles/HelpText.css.ts similarity index 80% rename from src/components/HelpText/styles/HelpText.css.js rename to src/components/HelpText/styles/HelpText.css.ts index e5257d856..55dfa73a4 100644 --- a/src/components/HelpText/styles/HelpText.css.js +++ b/src/components/HelpText/styles/HelpText.css.ts @@ -1,7 +1,6 @@ -// @flow -import baseStyles from '../../../styles/resets/baseStyles.css.js' +import baseStyles from '../../../styles/resets/baseStyles.css' import styled from '../../styled' -import { makeStateColorStyles } from '../../../styles/mixins/stateStyles.css.js' +import { makeStateColorStyles } from '../../../styles/mixins/stateStyles.css' import { getColor } from '../../../styles/utilities/color' export const HelpTextUI = styled('div')` diff --git a/src/components/Highlight/Highlight.js b/src/components/Highlight/Highlight.tsx similarity index 70% rename from src/components/Highlight/Highlight.js rename to src/components/Highlight/Highlight.tsx index f74106fee..3a61de8d8 100644 --- a/src/components/Highlight/Highlight.js +++ b/src/components/Highlight/Highlight.tsx @@ -1,23 +1,23 @@ -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import hljs from 'highlight.js/lib/highlight' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' -import { HighlightUI } from './styles/Highlight.css.js' +import { COMPONENT_KEY } from './Highlight.utils' +import { HighlightUI } from './styles/Highlight.css' type Props = { - children?: any, - className?: string, - language: string, + children?: any + className?: string + language: string } -class Highlight extends Component { +class Highlight extends React.PureComponent { static defaultProps = {} highlightBlock = (node: HTMLElement) => { - node && hljs.highlightBlock(node) + /* istanbul ignore next */ + node && hljs && hljs.highlightBlock(node) } render() { diff --git a/src/components/Highlight/utils.js b/src/components/Highlight/Highlight.utils.ts similarity index 100% rename from src/components/Highlight/utils.js rename to src/components/Highlight/Highlight.utils.ts diff --git a/src/components/Highlight/index.js b/src/components/Highlight/index.ts similarity index 93% rename from src/components/Highlight/index.js rename to src/components/Highlight/index.ts index b4d5a50bf..0f053be0e 100644 --- a/src/components/Highlight/index.js +++ b/src/components/Highlight/index.ts @@ -1,4 +1,3 @@ -// @flow import { propConnect } from '../PropProvider' import Highlight from './Highlight' diff --git a/src/components/Highlight/styles/Highlight.css.js b/src/components/Highlight/styles/Highlight.css.ts similarity index 99% rename from src/components/Highlight/styles/Highlight.css.js rename to src/components/Highlight/styles/Highlight.css.ts index b27404865..321c98eeb 100644 --- a/src/components/Highlight/styles/Highlight.css.js +++ b/src/components/Highlight/styles/Highlight.css.ts @@ -1,4 +1,3 @@ -// @flow import { getColor } from '../../../styles/utilities/color' import styled from '../../styled' diff --git a/src/components/Hr/Hr.tsx b/src/components/Hr/Hr.tsx index 09653ecfe..e79766e2f 100644 --- a/src/components/Hr/Hr.tsx +++ b/src/components/Hr/Hr.tsx @@ -3,7 +3,7 @@ import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' import { HrUI } from './styles/Hr.css' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Hr.utils' export type HrSize = 'md' | 'sm' | 'xs' | 'none' diff --git a/src/components/Hr/utils.ts b/src/components/Hr/Hr.utils.ts similarity index 100% rename from src/components/Hr/utils.ts rename to src/components/Hr/Hr.utils.ts diff --git a/src/components/Hr/index.ts b/src/components/Hr/index.ts index e2f99ca89..8985844af 100644 --- a/src/components/Hr/index.ts +++ b/src/components/Hr/index.ts @@ -1,5 +1,5 @@ -import { propConnect } from '../PropProvider/index' +import { propConnect } from '../PropProvider' import Hr from './Hr' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Hr.utils' export default propConnect(COMPONENT_KEY)(Hr) diff --git a/src/components/Hr/styles/Hr.css.js b/src/components/Hr/styles/Hr.css.ts similarity index 98% rename from src/components/Hr/styles/Hr.css.js rename to src/components/Hr/styles/Hr.css.ts index 2a5acaac0..911fd87e7 100644 --- a/src/components/Hr/styles/Hr.css.js +++ b/src/components/Hr/styles/Hr.css.ts @@ -1,4 +1,3 @@ -// @flow import styled from '../../styled' import forEach from '../../../styles/utilities/forEach' import { getColor } from '../../../styles/utilities/color' diff --git a/src/components/HsApp/Nav.tsx b/src/components/HsApp/HsApp.Nav.tsx similarity index 98% rename from src/components/HsApp/Nav.tsx rename to src/components/HsApp/HsApp.Nav.tsx index 41b0a114e..bb66e8ef7 100644 --- a/src/components/HsApp/Nav.tsx +++ b/src/components/HsApp/HsApp.Nav.tsx @@ -8,7 +8,7 @@ import { SecIconUI, SecondaryNavUI, AvatarUI, -} from './HsApp.css' +} from './styles/HsApp.css' import Icon from '../Icon' import Text from '../Text' diff --git a/src/components/HsApp/Sidenav.tsx b/src/components/HsApp/HsApp.Sidenav.tsx similarity index 88% rename from src/components/HsApp/Sidenav.tsx rename to src/components/HsApp/HsApp.Sidenav.tsx index e20d364df..97dbf6341 100644 --- a/src/components/HsApp/Sidenav.tsx +++ b/src/components/HsApp/HsApp.Sidenav.tsx @@ -1,25 +1,20 @@ import * as React from 'react' -import { createSpec, faker } from '@helpscout/helix' import SideNavigation from '../SideNavigation' import Icon from '../Icon' -import { noop } from '../../utilities/other' - -const ItemSpec = createSpec({ - id: faker.random.uuid(), - label: faker.name.firstName(), - value: faker.name.firstName(), - onClick: noop, -}) export interface Props { collapsable?: boolean badge?: string + footerItems: Array headerLabel?: string + headerItems: Array } class Sidenav extends React.PureComponent { static defaultProps = { + footerItems: [], headerLabel: 'Help Scout', + headerItems: [], } state = { active: 'chat' } @@ -29,8 +24,7 @@ class Sidenav extends React.PureComponent { } renderHeader() { - const headerItems = ItemSpec.generate(3) - const { headerLabel, badge, collapsable } = this.props + const { headerLabel, badge, collapsable, headerItems } = this.props return ( @@ -98,7 +92,7 @@ class Sidenav extends React.PureComponent { } renderSidebarFooter() { - const footerItems = ItemSpec.generate(3) + const { footerItems } = this.props return ( diff --git a/src/components/HsApp/HsApp.tsx b/src/components/HsApp/HsApp.tsx index 43dfff876..bb127337e 100644 --- a/src/components/HsApp/HsApp.tsx +++ b/src/components/HsApp/HsApp.tsx @@ -6,9 +6,9 @@ import { InnerContentUI, AppLayoutUI, AppContainerUI, -} from './HsApp.css' -import Nav from './Nav' -import Sidenav from './Sidenav' +} from './styles/HsApp.css' +import Nav from './HsApp.Nav' +import Sidenav from './HsApp.Sidenav' export interface Props { children?: any diff --git a/src/components/HsApp/__tests__/Sidenav.test.js b/src/components/HsApp/__tests__/HsApp.Sidenav.test.js similarity index 97% rename from src/components/HsApp/__tests__/Sidenav.test.js rename to src/components/HsApp/__tests__/HsApp.Sidenav.test.js index 714d11d98..8e6fcb5c0 100644 --- a/src/components/HsApp/__tests__/Sidenav.test.js +++ b/src/components/HsApp/__tests__/HsApp.Sidenav.test.js @@ -1,6 +1,6 @@ import React from 'react' import { mount } from 'enzyme' -import Sidenav from '../Sidenav' +import Sidenav from '../HsApp.Sidenav' import SideNavigation from '../../SideNavigation' import Button from '../../Button' diff --git a/src/components/HsApp/__tests__/HsApp.test.js b/src/components/HsApp/__tests__/HsApp.test.js index 59b50fa3b..3e656cf5d 100644 --- a/src/components/HsApp/__tests__/HsApp.test.js +++ b/src/components/HsApp/__tests__/HsApp.test.js @@ -1,8 +1,8 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' import HsApp from '../HsApp' -import { InnerContentUI } from '../HsApp.css' +import { InnerContentUI } from '../styles/HsApp.css' describe('ClassName', () => { test('Has default className', () => { diff --git a/src/components/HsApp/HsApp.css.js b/src/components/HsApp/styles/HsApp.css.js similarity index 90% rename from src/components/HsApp/HsApp.css.js rename to src/components/HsApp/styles/HsApp.css.js index 34b12ed13..21a211548 100644 --- a/src/components/HsApp/HsApp.css.js +++ b/src/components/HsApp/styles/HsApp.css.js @@ -1,8 +1,8 @@ -import styled from '../styled' -import baseStyles from '../../styles/resets/baseStyles.css.js' -import { getColor } from '../../styles/utilities/color' -import Dropdown from '../Dropdown/DropdownV2' -import Avatar from '../Avatar' +import styled from '../../styled' +import baseStyles from '../../../styles/resets/baseStyles.css' +import { getColor } from '../../../styles/utilities/color' +import Dropdown from '../../Dropdown/DropdownV2' +import Avatar from '../../Avatar' export const config = { headerHeight: '54px', diff --git a/src/components/Huzzah/index.js b/src/components/Huzzah/Huzzah.tsx similarity index 56% rename from src/components/Huzzah/index.js rename to src/components/Huzzah/Huzzah.tsx index 51eca5c42..cea23f4eb 100644 --- a/src/components/Huzzah/index.js +++ b/src/components/Huzzah/Huzzah.tsx @@ -1,25 +1,23 @@ -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import styled from '../styled' import HUZZAHS from './huzzahs' +import { getHuzzah, DEFAULT_HUZZAH } from './Huzzah.utils' import { classNames } from '../../utilities/classNames' import { sample } from '../../utilities/collection' -import css from './styles/Huzzah.css.js' - -export const DEFAULT_HUZZAH = 'donut' +import css from './styles/Huzzah.css' type HuzzahSize = 'lg' | 'md' | 'sm' type Props = { - children?: any, - className?: string, - isRandom: boolean, - name: string, - size: HuzzahSize, - styles: Object, + children?: any + className?: string + isRandom: boolean + name: string + size: HuzzahSize + styles: Object } -class Huzzah extends Component { +class Huzzah extends React.PureComponent { static defaultProps = { isRandom: false, name: DEFAULT_HUZZAH, @@ -48,17 +46,4 @@ class Huzzah extends Component { } } -/** - * Retrieves the Huzzah (SVG HTML) string, falling back to a default Huzzah. - * - * @param {string} name - * @returns {string} - */ -export function getHuzzah(name: string): string { - const fallbackHuzzah = HUZZAHS[DEFAULT_HUZZAH] - if (!name) return fallbackHuzzah - - return HUZZAHS[name.toLowerCase()] || fallbackHuzzah -} - export default styled(Huzzah)(css) diff --git a/src/components/Huzzah/Huzzah.utils.ts b/src/components/Huzzah/Huzzah.utils.ts new file mode 100644 index 000000000..d90e78c2b --- /dev/null +++ b/src/components/Huzzah/Huzzah.utils.ts @@ -0,0 +1,16 @@ +import HUZZAHS from './huzzahs' + +export const DEFAULT_HUZZAH = 'donut' + +/** + * Retrieves the Huzzah (SVG HTML) string, falling back to a default Huzzah. + * + * @param {string} name + * @returns {string} + */ +export function getHuzzah(name?: string): string { + const fallbackHuzzah = HUZZAHS[DEFAULT_HUZZAH] + if (!name) return fallbackHuzzah + + return HUZZAHS[name.toLowerCase()] || fallbackHuzzah +} diff --git a/src/components/Huzzah/__tests__/Huzzah.test.js b/src/components/Huzzah/__tests__/Huzzah.test.js index 5bc23ece3..37a61e0c2 100644 --- a/src/components/Huzzah/__tests__/Huzzah.test.js +++ b/src/components/Huzzah/__tests__/Huzzah.test.js @@ -1,6 +1,7 @@ import React from 'react' import { mount } from 'enzyme' -import Huzzah, { DEFAULT_HUZZAH } from '../index' +import Huzzah from '../Huzzah' +import { DEFAULT_HUZZAH } from '../Huzzah.utils' describe('ClassName', () => { test('Renders default className', () => { diff --git a/src/components/Huzzah/__tests__/getHuzzah.test.js b/src/components/Huzzah/__tests__/Huzzah.utils.test.js similarity index 94% rename from src/components/Huzzah/__tests__/getHuzzah.test.js rename to src/components/Huzzah/__tests__/Huzzah.utils.test.js index c09602dc8..86d3510f5 100644 --- a/src/components/Huzzah/__tests__/getHuzzah.test.js +++ b/src/components/Huzzah/__tests__/Huzzah.utils.test.js @@ -1,4 +1,4 @@ -import { getHuzzah } from '../index' +import { getHuzzah } from '../Huzzah.utils' import HUZZAHS from '../huzzahs' describe('getHuzzah', () => { diff --git a/src/components/Huzzah/index.ts b/src/components/Huzzah/index.ts new file mode 100644 index 000000000..c0c1757af --- /dev/null +++ b/src/components/Huzzah/index.ts @@ -0,0 +1,3 @@ +import Huzzah from './Huzzah' + +export default Huzzah diff --git a/src/components/Icon/Icon.js b/src/components/Icon/Icon.tsx similarity index 73% rename from src/components/Icon/Icon.js rename to src/components/Icon/Icon.tsx index efd8904ce..f8e522ad8 100644 --- a/src/components/Icon/Icon.js +++ b/src/components/Icon/Icon.tsx @@ -1,42 +1,16 @@ -// @flow -import type { IconSize } from './types' -import type { TextShade, UIState } from '../../constants/types' -import React from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import styled from '../styled' import VisuallyHidden from '../VisuallyHidden' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' import { noop } from '../../utilities/other' -import css from './styles/Icon.css.js' -import { COMPONENT_KEY, renameSVGIds } from './utils' +import css from './styles/Icon.css' +import { COMPONENT_KEY, renameSVGIds } from './Icon.utils' +import { svgSet } from './Icon.utils' +import { IconProps } from './Icon.types' -export let svgSet = {} - -export const load = (svgs = {}) => (svgSet = svgs) -export const unload = () => load({}) - -type Props = { - center: boolean, - className?: string, - clickable: boolean, - ignoreClick: boolean, - faint?: boolean, - inline?: boolean, - muted?: boolean, - name: string, - onClick: () => void, - offsetLeft: boolean, - offsetRight: boolean, - shade?: TextShade, - state?: UIState, - size: IconSize, - subtle?: boolean, - title?: string, - withCaret: boolean, -} - -const Icon = (props: Props) => { +const Icon = (props: IconProps) => { const { center, className, diff --git a/src/components/Icon/Icon.types.ts b/src/components/Icon/Icon.types.ts new file mode 100644 index 000000000..bd9a55263 --- /dev/null +++ b/src/components/Icon/Icon.types.ts @@ -0,0 +1,36 @@ +import { TextShade, UIState } from '../../constants/types' + +export type IconSize = + | '8' + | '10' + | '12' + | '13' + | '14' + | '15' + | '16' + | '18' + | '20' + | '24' + | '32' + | '48' + | '52' + +export type IconProps = { + center: boolean + className?: string + clickable: boolean + ignoreClick: boolean + faint?: boolean + inline?: boolean + muted?: boolean + name: string + onClick: () => void + offsetLeft: boolean + offsetRight: boolean + shade?: TextShade + state?: UIState + size: IconSize + subtle?: boolean + title?: string + withCaret: boolean +} diff --git a/src/components/Icon/utils.js b/src/components/Icon/Icon.utils.ts similarity index 77% rename from src/components/Icon/utils.js rename to src/components/Icon/Icon.utils.ts index 5675e69e2..de1fa8d19 100644 --- a/src/components/Icon/utils.js +++ b/src/components/Icon/Icon.utils.ts @@ -2,6 +2,11 @@ import { isString } from '../../utilities/is' export const COMPONENT_KEY = 'Icon' +export let svgSet = {} + +export const load = (svgs = {}) => (svgSet = svgs) +export const unload = () => load({}) + export const renameSVGIds = (svgHtml, name) => { if (!isString(svgHtml)) { return svgHtml diff --git a/src/components/Icon/__tests__/Icon.load.test.js b/src/components/Icon/__tests__/Icon.load.test.js index 618bd5a5d..c122bd199 100644 --- a/src/components/Icon/__tests__/Icon.load.test.js +++ b/src/components/Icon/__tests__/Icon.load.test.js @@ -1,6 +1,7 @@ import React from 'react' import { mount } from 'enzyme' -import Icon, { svgSet, load, unload } from '../Icon' +import Icon from '../Icon' +import { svgSet, load, unload } from '../Icon.utils' afterEach(() => { unload() diff --git a/src/components/Icon/__tests__/Icon.utils.test.js b/src/components/Icon/__tests__/Icon.utils.test.js index 5740267a5..0755f15a2 100644 --- a/src/components/Icon/__tests__/Icon.utils.test.js +++ b/src/components/Icon/__tests__/Icon.utils.test.js @@ -1,4 +1,4 @@ -import { renameSVGIds } from '../utils' +import { renameSVGIds } from '../Icon.utils' describe('renameSVGIds', () => { test('Returns the argument, if falsy', () => { diff --git a/src/components/Icon/index.js b/src/components/Icon/index.ts similarity index 70% rename from src/components/Icon/index.js rename to src/components/Icon/index.ts index 44198a1b8..2c6151450 100644 --- a/src/components/Icon/index.js +++ b/src/components/Icon/index.ts @@ -1,6 +1,4 @@ -// @flow import { propConnect } from '../PropProvider' import Icon from './Icon' -export { load, unload } from './Icon' export default propConnect('Icon')(Icon) diff --git a/src/components/Icon/styles/Icon.css.js b/src/components/Icon/styles/Icon.css.js index 1eac4c234..2c1221503 100644 --- a/src/components/Icon/styles/Icon.css.js +++ b/src/components/Icon/styles/Icon.css.js @@ -1,4 +1,3 @@ -// @flow import { BEM } from '../../../utilities/classNames' import baseStyles from '../../../styles/resets/base.css.js' import { STATES, TEXT_SHADES } from '../../../styles/configs/constants' @@ -91,7 +90,7 @@ const css = ` } ` -function makeShadeStyles(): string { +function makeShadeStyles() { return forEach( TEXT_SHADES, shade => ` @@ -102,7 +101,7 @@ function makeShadeStyles(): string { ) } -function makeSizeStyles(): string { +function makeSizeStyles() { return forEach( ICON_SIZES, size => ` @@ -118,7 +117,7 @@ function makeSizeStyles(): string { ) } -function makeStateColorStyles(): string { +function makeStateColorStyles() { return forEach( STATES, state => ` diff --git a/src/components/Icon/types.js b/src/components/Icon/types.js deleted file mode 100644 index 16406bf48..000000000 --- a/src/components/Icon/types.js +++ /dev/null @@ -1,14 +0,0 @@ -export type IconSize = -| '8' -| '10' -| '12' -| '13' -| '14' -| '15' -| '16' -| '18' -| '20' -| '24' -| '32' -| '48' -| '52' \ No newline at end of file diff --git a/src/components/Illo/Illo.js b/src/components/Illo/Illo.tsx similarity index 53% rename from src/components/Illo/Illo.js rename to src/components/Illo/Illo.tsx index 8f3d0dd4d..8e8b8bf59 100644 --- a/src/components/Illo/Illo.js +++ b/src/components/Illo/Illo.tsx @@ -1,35 +1,14 @@ -// @flow -import type { IlloSize } from './types' -import React from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import Centralize from '../Centralize' import VisuallyHidden from '../VisuallyHidden' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { IlloUI, IconUI } from './styles/Illo.css.js' -import { COMPONENT_KEY } from './utils' +import { IlloUI, IconUI } from './styles/Illo.css' +import { COMPONENT_KEY, injectFillColorIntoSvg, svgSet } from './Illo.utils' +import { IlloProps } from './Illo.types' -export let svgSet = {} - -export const load = (svgs = {}) => (svgSet = svgs) -export const unload = () => load({}) - -type Props = { - color?: string, - colorSecondary?: string, - colorUi?: string, - colorUiDark?: string, - colorUiLight?: string, - colorUiTransparent?: string, - colorUiWhite?: string, - className?: string, - name: string, - size: IlloSize, - style?: Object, - title?: string, -} - -const Illo = (props: Props) => { +const Illo = (props: IlloProps) => { const { className, color, @@ -92,42 +71,6 @@ const Illo = (props: Props) => { ) } -export const injectFillColorIntoSvg = ( - svgHTML: string, - props: Object = { - primary: '', - secondary: '', - ui: '', - uiLight: '', - uiDark: '', - uiTransparent: '', - uiWhite: '', - } -) => { - if (typeof svgHTML !== 'string' || !svgHTML.length) return '' - const { - primary, - secondary, - ui, - uiLight, - uiDark, - uiTransparent, - uiWhite, - } = props - - const makeStyle = (color: string): string => - color && color.length ? `style="fill: ${color};"` : '' - - return svgHTML - .replace('data-path-primary=""', makeStyle(primary)) - .replace('data-path-secondary=""', makeStyle(secondary)) - .replace('data-path-ui=""', makeStyle(ui)) - .replace('data-path-uiDark=""', makeStyle(uiDark)) - .replace('data-path-uiLight=""', makeStyle(uiLight)) - .replace('data-path-uiTransparent=""', makeStyle(uiTransparent)) - .replace('data-path-uiWhite=""', makeStyle(uiWhite)) -} - Illo.defaultProps = { color: '', colorSecondary: '', diff --git a/src/components/Illo/Illo.types.ts b/src/components/Illo/Illo.types.ts new file mode 100644 index 000000000..c194dcd38 --- /dev/null +++ b/src/components/Illo/Illo.types.ts @@ -0,0 +1,16 @@ +export type IlloSize = '40' | '60' | '72' | '80' | '90' + +export type IlloProps = { + color?: string + colorSecondary?: string + colorUi?: string + colorUiDark?: string + colorUiLight?: string + colorUiTransparent?: string + colorUiWhite?: string + className?: string + name: string + size: IlloSize + style?: Object + title?: string +} diff --git a/src/components/Illo/Illo.utils.ts b/src/components/Illo/Illo.utils.ts new file mode 100644 index 000000000..3646d58b8 --- /dev/null +++ b/src/components/Illo/Illo.utils.ts @@ -0,0 +1,43 @@ +export const COMPONENT_KEY = 'Illo' + +export let svgSet = {} + +export const load = (svgs = {}) => (svgSet = svgs) + +export const unload = () => load({}) + +export const injectFillColorIntoSvg = ( + svgHTML: string, + props: any = { + primary: '', + secondary: '', + ui: '', + uiLight: '', + uiDark: '', + uiTransparent: '', + uiWhite: '', + } +) => { + if (typeof svgHTML !== 'string' || !svgHTML.length) return '' + const { + primary, + secondary, + ui, + uiLight, + uiDark, + uiTransparent, + uiWhite, + } = props + + const makeStyle = (color: string): string => + color && color.length ? `style="fill: ${color};"` : '' + + return svgHTML + .replace('data-path-primary=""', makeStyle(primary)) + .replace('data-path-secondary=""', makeStyle(secondary)) + .replace('data-path-ui=""', makeStyle(ui)) + .replace('data-path-uiDark=""', makeStyle(uiDark)) + .replace('data-path-uiLight=""', makeStyle(uiLight)) + .replace('data-path-uiTransparent=""', makeStyle(uiTransparent)) + .replace('data-path-uiWhite=""', makeStyle(uiWhite)) +} diff --git a/src/components/Illo/__tests__/Illo.load.test.js b/src/components/Illo/__tests__/Illo.load.test.js index 013589c98..7a9be749f 100644 --- a/src/components/Illo/__tests__/Illo.load.test.js +++ b/src/components/Illo/__tests__/Illo.load.test.js @@ -1,6 +1,7 @@ import React from 'react' import { mount } from 'enzyme' -import Illo, { svgSet, load, unload } from '../Illo' +import Illo from '../Illo' +import { svgSet, load, unload } from '../Illo.utils' afterEach(() => { unload() diff --git a/src/components/Illo/__tests__/injectFillColorIntoSvg.test.js b/src/components/Illo/__tests__/injectFillColorIntoSvg.test.js index 9c43c1c50..36525b9c8 100644 --- a/src/components/Illo/__tests__/injectFillColorIntoSvg.test.js +++ b/src/components/Illo/__tests__/injectFillColorIntoSvg.test.js @@ -1,4 +1,4 @@ -import { injectFillColorIntoSvg } from '../Illo' +import { injectFillColorIntoSvg } from '../Illo.utils' test('Returns empty string if invalid arguments', () => { expect(injectFillColorIntoSvg()).toBe('') diff --git a/src/components/Illo/index.js b/src/components/Illo/index.ts similarity index 70% rename from src/components/Illo/index.js rename to src/components/Illo/index.ts index 35282b203..053bfcb8c 100644 --- a/src/components/Illo/index.js +++ b/src/components/Illo/index.ts @@ -1,6 +1,4 @@ -// @flow import { propConnect } from '../PropProvider' import Illo from './Illo' -export { load, unload } from './Illo' export default propConnect('Illo')(Illo) diff --git a/src/components/Illo/styles/Illo.css.js b/src/components/Illo/styles/Illo.css.js index a3d9b1f72..d4a8824bb 100644 --- a/src/components/Illo/styles/Illo.css.js +++ b/src/components/Illo/styles/Illo.css.js @@ -1,4 +1,3 @@ -// @flow import styled from '../../styled' import baseStyles from '../../../styles/resets/base.css.js' import { getColor } from '../../../styles/utilities/color' @@ -60,7 +59,7 @@ export const IconUI = styled('span')` } ` -function makeSizeStyles(): string { +function makeSizeStyles() { return forEach( ILLO_SIZES, size => ` diff --git a/src/components/Illo/types.js b/src/components/Illo/types.js deleted file mode 100644 index e69e89fef..000000000 --- a/src/components/Illo/types.js +++ /dev/null @@ -1,6 +0,0 @@ -export type IlloSize = -| '40' -| '60' -| '72' -| '80' -| '90' \ No newline at end of file diff --git a/src/components/Illo/utils.js b/src/components/Illo/utils.js deleted file mode 100644 index 28245281e..000000000 --- a/src/components/Illo/utils.js +++ /dev/null @@ -1 +0,0 @@ -export const COMPONENT_KEY = 'Illo' diff --git a/src/components/Image/Image.js b/src/components/Image/Image.js deleted file mode 100644 index 507b55883..000000000 --- a/src/components/Image/Image.js +++ /dev/null @@ -1,88 +0,0 @@ -// @flow -import React, { PureComponent as Component } from 'react' -import getValidProps from '@helpscout/react-utils/dist/getValidProps' -import styled from '../styled' -import { classNames } from '../../utilities/classNames' -import { namespaceComponent } from '../../utilities/component' -import { calculateAspectRatioFit } from '../../utilities/images' -import { allPropsDefined } from '../../utilities/is' -import css from './styles/Image.css.js' -import { COMPONENT_KEY } from './utils' - -type ImageShape = 'rounded' | 'square' | '' -type Props = { - alt?: string, - block: boolean, - className?: string, - height?: number, - maxHeight?: number, - maxWidth?: number, - src: string, - shape?: ImageShape, - style: Object, - title?: string, - width?: number, -} - -class Image extends Component { - static defaultProps = { - shape: '', - style: {}, - } - - render() { - const { - className, - block, - maxHeight, - maxWidth, - shape, - style, - ...rest - } = this.props - - const componentClassName = classNames( - 'c-Image', - block && 'is-block', - shape && `is-${shape}`, - className - ) - - const enhancedStyle = enhanceStyleWithSize(this.props) - - const imageElement = React.createElement('img', { - ...getValidProps(rest), - className: componentClassName, - style: enhancedStyle, - }) - - return imageElement - } -} - -/** - * Enhances the inline style of the component with aspect ratio - * sizing, if applicable. - * - * @param {Object} props The component props. - * @returns {Object} The updated styles. - */ -export function enhanceStyleWithSize(props: Props): Object { - const { maxWidth, maxHeight, width, height, style } = props - const imageProps = { maxWidth, maxHeight, width, height } - - if (!allPropsDefined(imageProps)) return style - - // $FlowFixMe - const aspect = calculateAspectRatioFit(imageProps) - - return { - ...style, - height: aspect.height, - width: aspect.width, - } -} - -namespaceComponent(COMPONENT_KEY)(Image) - -export default styled(Image)(css) diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx new file mode 100644 index 000000000..ac115471d --- /dev/null +++ b/src/components/Image/Image.tsx @@ -0,0 +1,48 @@ +import * as React from 'react' +import getValidProps from '@helpscout/react-utils/dist/getValidProps' +import styled from '../styled' +import { classNames } from '../../utilities/classNames' +import { namespaceComponent } from '../../utilities/component' +import css from './styles/Image.css' +import { COMPONENT_KEY, enhanceStyleWithSize } from './Image.utils' +import { ImageProps } from './Image.types' + +class Image extends React.PureComponent { + static defaultProps = { + shape: '', + style: {}, + } + + render() { + const { + className, + block, + maxHeight, + maxWidth, + shape, + style, + ...rest + } = this.props + + const componentClassName = classNames( + 'c-Image', + block && 'is-block', + shape && `is-${shape}`, + className + ) + + const enhancedStyle = enhanceStyleWithSize(this.props) + + const imageElement = React.createElement('img', { + ...getValidProps(rest), + className: componentClassName, + style: enhancedStyle, + }) + + return imageElement + } +} + +namespaceComponent(COMPONENT_KEY)(Image) + +export default styled(Image)(css) diff --git a/src/components/Image/Image.types.ts b/src/components/Image/Image.types.ts new file mode 100644 index 000000000..2dfa5f5b0 --- /dev/null +++ b/src/components/Image/Image.types.ts @@ -0,0 +1,15 @@ +export type ImageShape = 'rounded' | 'square' | '' + +export type ImageProps = { + alt?: string + block: boolean + className?: string + height?: number + maxHeight?: number + maxWidth?: number + src: string + shape?: ImageShape + style: Object + title?: string + width?: number +} diff --git a/src/components/Image/Image.utils.ts b/src/components/Image/Image.utils.ts new file mode 100644 index 000000000..4b1370dc6 --- /dev/null +++ b/src/components/Image/Image.utils.ts @@ -0,0 +1,27 @@ +import { calculateAspectRatioFit } from '../../utilities/images' +import { allPropsDefined } from '../../utilities/is' +import { ImageProps } from './Image.types' + +export const COMPONENT_KEY = 'Image' + +/** + * Enhances the inline style of the component with aspect ratio + * sizing, if applicable. + * + * @param {Object} props The component props. + * @returns {Object} The updated styles. + */ +export function enhanceStyleWithSize(props: ImageProps): Object { + const { maxWidth, maxHeight, width, height, style } = props + const imageProps: any = { maxWidth, maxHeight, width, height } + + if (!allPropsDefined(imageProps)) return style + + const aspect = calculateAspectRatioFit(imageProps) + + return { + ...style, + height: aspect.height, + width: aspect.width, + } +} diff --git a/src/components/Image/index.js b/src/components/Image/index.ts similarity index 92% rename from src/components/Image/index.js rename to src/components/Image/index.ts index c40273d8d..93b82e4ac 100644 --- a/src/components/Image/index.js +++ b/src/components/Image/index.ts @@ -1,4 +1,3 @@ -// @flow import { propConnect } from '../PropProvider' import Image from './Image' diff --git a/src/components/Image/utils.js b/src/components/Image/utils.js deleted file mode 100644 index 604c2de30..000000000 --- a/src/components/Image/utils.js +++ /dev/null @@ -1 +0,0 @@ -export const COMPONENT_KEY = 'Image' diff --git a/src/components/InfiniteScroller/index.js b/src/components/InfiniteScroller/InfiniteScroller.tsx similarity index 82% rename from src/components/InfiniteScroller/index.js rename to src/components/InfiniteScroller/InfiniteScroller.tsx index be7e13894..6648143ae 100644 --- a/src/components/InfiniteScroller/index.js +++ b/src/components/InfiniteScroller/InfiniteScroller.tsx @@ -1,33 +1,23 @@ -import React, { PureComponent as Component } from 'react' -import ReactDOM from 'react-dom' -import PropTypes from 'prop-types' +import * as React from 'react' +import * as ReactDOM from 'react-dom' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import EventListener from '../EventListener' import { classNames } from '../../utilities/classNames' import LoadingDots from '../LoadingDots' import { isNodeElement, isNodeVisible } from '../../utilities/node' import { noop } from '../../utilities/other' - -export const propTypes = { - className: PropTypes.string, - offset: PropTypes.number, - getScrollParent: PropTypes.func, - isLoading: PropTypes.bool, - onLoading: PropTypes.func, - onLoaded: PropTypes.func, -} -const defaultProps = { - getScrollParent: noop, - offset: 0, - isLoading: false, - onLoading: noop, - onLoaded: noop, - onScroll: noop, -} - -class InfiniteScroller extends Component { +import { + InfiniteScrollerProps, + InfiniteScrollerState, +} from './InfiniteScroller.types' + +class InfiniteScroller extends React.PureComponent< + InfiniteScrollerProps, + InfiniteScrollerState +> { constructor(props) { - super() + super(props) + this.state = { isLoading: props.isLoading, nodeScope: window, @@ -37,6 +27,19 @@ class InfiniteScroller extends Component { this.handleOnScroll = this.handleOnScroll.bind(this) } + static defaultProps = { + getScrollParent: noop, + offset: 0, + isLoading: false, + loading: false, + onLoading: noop, + onLoaded: noop, + onScroll: noop, + } + + _isMounted: boolean | null + node: HTMLElement | null + componentDidMount() { this._isMounted = true this.setParentNode() @@ -62,7 +65,7 @@ class InfiniteScroller extends Component { if (nodeScope === window) { return window.scrollY } else { - return nodeScope.scrollTop + return (nodeScope as HTMLElement).scrollTop } } @@ -127,10 +130,15 @@ class InfiniteScroller extends Component { getNodeScrollTop() { const { nodeScope } = this.state /* istanbul ignore next */ - if (nodeScope !== window && nodeScope.scrollTop !== undefined) { - return nodeScope.scrollTop + if ( + nodeScope !== window && + (nodeScope as HTMLElement).scrollTop !== undefined + ) { + return (nodeScope as HTMLElement).scrollTop } else { - return nodeScope.scrollY + // TODO: fix typescript complains + // @ts-ignore + return (nodeScope as HTMLElement).scrollY } } @@ -142,8 +150,8 @@ class InfiniteScroller extends Component { /* istanbul ignore next */ if (nodeScope === window && nodeScope.scrollTo) { nodeScope.scrollTo(window.scrollX, scrollTop) - } else if (nodeScope.scrollTop !== undefined) { - nodeScope.scrollTop = scrollTop + } else if ((nodeScope as HTMLElement).scrollTop !== undefined) { + ;(nodeScope as HTMLElement).scrollTop = scrollTop } } @@ -166,9 +174,14 @@ class InfiniteScroller extends Component { // This is a super fail-safe. This will always be parentNode, with the // exception of document or window. Cannot be tested in JSDOM/Enzyme, // since it prohibits mounting on document.body directly. + + // TODO: fix typescript complains + // @ts-ignore nodeScope = node && node.parentNode ? node.parentNode : window } + // TODO: fix typescript complains + // @ts-ignore this.setState({ nodeScope }) } @@ -216,7 +229,4 @@ class InfiniteScroller extends Component { } } -InfiniteScroller.propTypes = propTypes -InfiniteScroller.defaultProps = defaultProps - export default InfiniteScroller diff --git a/src/components/InfiniteScroller/InfiniteScroller.types.ts b/src/components/InfiniteScroller/InfiniteScroller.types.ts new file mode 100644 index 000000000..34c3b7d61 --- /dev/null +++ b/src/components/InfiniteScroller/InfiniteScroller.types.ts @@ -0,0 +1,16 @@ +export interface InfiniteScrollerProps { + className: string + offset: number + isLoading: boolean + loading: boolean + scrollParent: HTMLElement + getScrollParent: (...args: any[]) => HTMLElement | Window | null + onLoading: (fn) => void + onLoaded: () => void + onScroll: (event, props) => void +} + +export interface InfiniteScrollerState { + isLoading: boolean + nodeScope: HTMLElement | Window +} diff --git a/src/components/InfiniteScroller/index.ts b/src/components/InfiniteScroller/index.ts new file mode 100644 index 000000000..4fd03ccb9 --- /dev/null +++ b/src/components/InfiniteScroller/index.ts @@ -0,0 +1,3 @@ +import InfiniteScroller from './InfiniteScroller' + +export default InfiniteScroller diff --git a/src/components/Inline/Inline.Item.tsx b/src/components/Inline/Inline.Item.tsx index 2f4f82d8b..5019936e5 100644 --- a/src/components/Inline/Inline.Item.tsx +++ b/src/components/Inline/Inline.Item.tsx @@ -3,7 +3,7 @@ import propConnect from '../PropProvider/propConnect' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' -import { ItemUI } from './Inline.css' +import { ItemUI } from './styles/Inline.css' import { ITEM_COMPONENT_KEY } from './Inline.utils' export interface Props { diff --git a/src/components/Inline/Inline.tsx b/src/components/Inline/Inline.tsx index a538371e7..9b21b2073 100644 --- a/src/components/Inline/Inline.tsx +++ b/src/components/Inline/Inline.tsx @@ -4,7 +4,7 @@ import getValidProps from '@helpscout/react-utils/dist/getValidProps' import Item from './Inline.Item' import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' -import { InlineUI } from './Inline.css' +import { InlineUI } from './styles/Inline.css' import { COMPONENT_KEY } from './Inline.utils' export interface Props { diff --git a/src/components/Inline/Inline.css.ts b/src/components/Inline/styles/Inline.css.ts similarity index 87% rename from src/components/Inline/Inline.css.ts rename to src/components/Inline/styles/Inline.css.ts index 4b99029df..c3222275e 100644 --- a/src/components/Inline/Inline.css.ts +++ b/src/components/Inline/styles/Inline.css.ts @@ -1,6 +1,6 @@ -import styled from '../styled' -import baseStyles from '../../styles/resets/baseStyles.css' -import forEach from '../../styles/utilities/forEach' +import styled from '../../styled' +import baseStyles from '../../../styles/resets/baseStyles.css' +import forEach from '../../../styles/utilities/forEach' export const config = { defaultSpacing: '4px', diff --git a/src/components/Input/AddOn.js b/src/components/Input/Input.AddOn.tsx similarity index 69% rename from src/components/Input/AddOn.js rename to src/components/Input/Input.AddOn.tsx index 352c0f833..be195e0e6 100644 --- a/src/components/Input/AddOn.js +++ b/src/components/Input/Input.AddOn.tsx @@ -1,19 +1,11 @@ -// @flow -import React from 'react' +import * as React from 'react' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { AddOnUI } from './styles/AddOn.css.js' -import { COMPONENT_KEY } from './utils' +import { AddOnUI } from './styles/Input.AddOn.css' +import { COMPONENT_KEY } from './Input.utils' +import { InputAddOnProps } from './Input.types' -type Props = { - children?: any, - className?: string, - isFirst: boolean, - isNotOnly: boolean, - isLast: boolean, -} - -const AddOn = (props: Props) => { +const AddOn = (props: InputAddOnProps) => { const { className, children, isFirst, isNotOnly, isLast, ...rest } = props const componentClassName = classNames( diff --git a/src/components/Input/BackdropV2.tsx b/src/components/Input/Input.BackdropV2.tsx similarity index 80% rename from src/components/Input/BackdropV2.tsx rename to src/components/Input/Input.BackdropV2.tsx index 1cbfe1e75..880782cae 100644 --- a/src/components/Input/BackdropV2.tsx +++ b/src/components/Input/Input.BackdropV2.tsx @@ -1,27 +1,11 @@ import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' -import { UIState } from '../../constants/types' import { classNames } from '../../utilities/classNames' -import { isStateful } from './utils' -import { BackdropUI, FocusUI } from './styles/BackdropV2.css' +import { isStateful } from './Input.utils' +import { BackdropUI, FocusUI } from './styles/Input.BackdropV2.css' +import { InputBackfropV2Props } from './Input.types' -export interface Props { - className?: string - choiceKind?: string - disabled: boolean - isFilled: boolean - isFocused: boolean - isFirst: boolean - isNotOnly: boolean - isLast: boolean - isSeamless: boolean - kind?: string - readOnly: boolean - showFocus: boolean - state?: UIState -} - -export class Backdrop extends React.PureComponent { +export class Backdrop extends React.PureComponent { static defaultProps = { disabled: false, isFilled: false, @@ -73,6 +57,8 @@ export class Backdrop extends React.PureComponent { isFirst && 'is-first', isNotOnly && 'is-notOnly', isLast && 'is-last', + // It's being tested, Istanbul not picking it up + /* istanbul ignore next */ isRadio && 'is-radio', isStateful(this.props) && 'is-stateful', state && `is-${state}` diff --git a/src/components/Input/Prefix.js b/src/components/Input/Input.Prefix.tsx similarity index 71% rename from src/components/Input/Prefix.js rename to src/components/Input/Input.Prefix.tsx index 9f0212b07..1ec640828 100644 --- a/src/components/Input/Prefix.js +++ b/src/components/Input/Input.Prefix.tsx @@ -1,16 +1,12 @@ -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' -import { PrefixUI } from './styles/Input.css.js' +import { COMPONENT_KEY } from './Input.utils' +import { PrefixUI } from './styles/Input.css' +import { InputPrefixProps } from './Input.types' -export interface Props { - className?: string; - isSeamless: boolean; -} - -class Prefix extends Component { +class Prefix extends React.PureComponent { static defaultProps = { isSeamless: false, } diff --git a/src/components/Input/Resizer.tsx b/src/components/Input/Input.Resizer.tsx similarity index 91% rename from src/components/Input/Resizer.tsx rename to src/components/Input/Input.Resizer.tsx index de7e246e4..52ccf3cf4 100644 --- a/src/components/Input/Resizer.tsx +++ b/src/components/Input/Input.Resizer.tsx @@ -3,7 +3,8 @@ import EventListener from '../EventListener' import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' import { repeat } from '../../utilities/strings' -import { ResizerUI, GhostUI } from './Resizer.css' +import { ResizerUI, GhostUI } from './styles/Input.Resizer.css' +import { RefNode, InputResizerProps } from './Input.types' // Thanks Stephen <3 export const OFFSET_CHAR = 'R' @@ -16,19 +17,7 @@ const ENTITIES_TO_REPLACE = { } const REPLACE_REGEX = /[\n&<>]/g -export interface Props { - className?: string - contents: string - currentHeight?: number - minimumLines: number - offsetAmount: number - onResize: (size: number) => void - seamless: boolean -} - -type RefNode = HTMLDivElement | null - -export class Resizer extends React.PureComponent { +export class Resizer extends React.PureComponent { static defaultProps = { contents: '', currentHeight: null, diff --git a/src/components/Input/Static.js b/src/components/Input/Input.Static.tsx similarity index 62% rename from src/components/Input/Static.js rename to src/components/Input/Input.Static.tsx index f21ea7041..49937fadb 100644 --- a/src/components/Input/Static.js +++ b/src/components/Input/Input.Static.tsx @@ -1,19 +1,11 @@ -// @flow -import type { UISize } from '../../constants/types' -import React from 'react' +import * as React from 'react' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' -import { StaticUI } from './Static.css' +import { COMPONENT_KEY } from './Input.utils' +import { StaticUI } from './styles/Input.Static.css' +import { InputStaticProps } from './Input.types' -type Props = { - align: 'left' | 'center' | 'right' | '', - children?: any, - className?: string, - size: UISize, -} - -const Static = (props: Props) => { +const Static = (props: InputStaticProps) => { const { align, className, children, size, ...rest } = props const componentClassName = classNames( diff --git a/src/components/Input/Suffix.js b/src/components/Input/Input.Suffix.tsx similarity index 71% rename from src/components/Input/Suffix.js rename to src/components/Input/Input.Suffix.tsx index 28a77c7c8..a1351c1ff 100644 --- a/src/components/Input/Suffix.js +++ b/src/components/Input/Input.Suffix.tsx @@ -1,17 +1,12 @@ -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' -import { SuffixUI } from './styles/Input.css.js' +import { COMPONENT_KEY } from './Input.utils' +import { SuffixUI } from './styles/Input.css' +import { InputSuffixProps } from './Input.types' -export interface Props { - className?: string; - isAction: boolean; - isSeamless: boolean; -} - -class Suffix extends Component { +class Suffix extends React.PureComponent { static defaultProps = { isAction: false, isSeamless: false, diff --git a/src/components/Input/Input.js b/src/components/Input/Input.tsx similarity index 86% rename from src/components/Input/Input.js rename to src/components/Input/Input.tsx index 12a86de43..976e8444f 100644 --- a/src/components/Input/Input.js +++ b/src/components/Input/Input.tsx @@ -1,21 +1,19 @@ -// @flow /* eslint react/no-deprecated: off */ -import type { UISize, UIState } from '../../constants/types' -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import FormLabelContext from '../FormLabel/Context' -import AddOn from './AddOn' -import Backdrop from './BackdropV2' -import Prefix from './Prefix' -import Resizer from './Resizer' -import Static from './Static' -import Suffix from './Suffix' +import AddOn from './Input.AddOn' +import Backdrop from './Input.BackdropV2' +import Prefix from './Input.Prefix' +import Resizer from './Input.Resizer' +import Static from './Input.Static' +import Suffix from './Input.Suffix' import HelpText from '../HelpText' import Icon from '../Icon' import Label from '../Label' import { scrollLockY } from '../ScrollLock/ScrollLock.utils' import Tooltip from '../Tooltip' -import { STATES } from '../../constants/index' +import { STATES } from '../../constants' import Keys from '../../constants/Keys' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' @@ -29,91 +27,19 @@ import { getTextAreaLineTotal, moveCursorToEnd, isTextArea, -} from './utils' +} from './Input.utils' import { InputWrapperUI, InlinePrefixSuffixUI, FieldUI, FieldTextAreaUI, InputUI, -} from './styles/Input.css.js' +} from './styles/Input.css' +import { InputProps, InputState, InputNode, InputEvent } from './Input.types' const uniqueID = createUniqueIDFactory('Input') -type InputNode = HTMLInputElement | HTMLTextAreaElement -type InputEvent = SyntheticEvent -type WheelEvent = SyntheticWheelEvent -type AnyInputEvent = InputEvent | WheelEvent | Event -type InputValue = string - -type Props = { - action?: any, - autoFocus: boolean, - className: string, - disabled: boolean, - errorIcon?: string, - errorMessage?: string, - forceAutoFocusTimeout: number, - helpText: any, - hintText: any, - id: string, - inlinePrefix?: string, - inlineSuffix?: string, - innerRef: (ref: HTMLElement) => void, - inputRef: (ref: HTMLElement) => void, - isFirst: boolean, - isFocused: boolean, - isLast: boolean, - isNotOnly: boolean, - isSubtleReadOnly: boolean, - label: any, - maxHeight: number | string, - modalhelpText: string, - moveCursorToEnd: boolean, - multiline: boolean | number, - name: string, - offsetAmount: number, - onBlur: (event: AnyInputEvent) => void, - onChange: (value: InputValue) => void, - onEnterDown: (event: AnyInputEvent) => void, - onEnterUp: (event: AnyInputEvent) => void, - onFocus: (event: AnyInputEvent) => void, - onKeyDown: (event: AnyInputEvent) => void, - onKeyUp: (event: AnyInputEvent) => void, - onResize: (height: number) => void, - onStartTyping: (now?: number) => void, - onStopTyping: () => void, - onWheel: (event: AnyInputEvent) => void, - placeholder: string, - prefix: any, - readOnly: boolean, - refApplyCallStopTyping: (fn: () => void) => void, - removeStateStylesOnFocus: boolean, - resizable: boolean, - scrollLock: boolean, - seamless: boolean, - size: UISize, - state?: ?UIState, - style: Object, - suffix: any, - type: string, - typingThrottleInterval: number, - typingTimeoutDelay: number, - value: InputValue, - withTypingEvent: false, -} - -type State = { - id: string, - isFocused: boolean, - height: ?number, - state: ?UIState, - typingThrottle: ?IntervalID, - typingTimeout: ?TimeoutID, - value: InputValue, -} - -export class Input extends Component { +export class Input extends React.PureComponent { static defaultProps = { autoFocus: false, disabled: false, @@ -163,15 +89,15 @@ export class Input extends Component { static Static = Static static Suffix = Suffix - computedStyles: Object - inputNode: InputNode + computedStyles: Object | any + inputNode: InputNode | null - constructor(props: Props) { + constructor(props: InputProps) { super(props) + this.state = { id: props.id || uniqueID(), isFocused: props.isFocused, - height: null, state: props.state, typingThrottle: undefined, typingTimeout: undefined, @@ -185,7 +111,7 @@ export class Input extends Component { this.props.refApplyCallStopTyping(this.callStopTyping.bind(this)) } - componentWillReceiveProps(nextProps: Props) { + componentWillReceiveProps(nextProps: InputProps) { const { isFocused, value, state } = nextProps const prevValue = this.state.value const prevState = this.state.state @@ -206,7 +132,6 @@ export class Input extends Component { } componentWillUnmount() { - // $FlowFixMe this.inputNode = null this.props.withTypingEvent && this.clearTypingTimeout() } @@ -288,6 +213,8 @@ export class Input extends Component { } setTypingTimeout() { + // TODO: fix typescript complains + // @ts-ignore this.setState({ typingTimeout: setTimeout(() => { this.clearThrottler() @@ -305,6 +232,8 @@ export class Input extends Component { } setThrottler() { + // TODO: fix typescript complains + // @ts-ignore this.setState({ typingThrottle: setInterval( this.props.onStartTyping, @@ -325,6 +254,8 @@ export class Input extends Component { handleOnChange = (event: InputEvent) => { if (this.props.withTypingEvent) this.typingEvent() + // TODO: fix typescript complains + // @ts-ignore const value = event.currentTarget.value this.setState({ value }) this.props.onChange(value) @@ -386,6 +317,8 @@ export class Input extends Component { )}` this.setState({ value: newValue }, () => { this.props.onChange(this.state.value) + // TODO: fix typescript complains + // @ts-ignore this.inputNode.setSelectionRange(cursorIndex + 1, cursorIndex + 1) }) } @@ -393,10 +326,14 @@ export class Input extends Component { handleOnKeyDown = (event: Event) => { const { hasInsertCarriageReturns } = this.props + // TODO: fix typescript complains + // @ts-ignore if (event.keyCode === Keys.ENTER) { this.props.onEnterDown(event) } + // TODO: fix typescript complains + // @ts-ignore if (hasInsertCarriageReturns && event.keyCode === Keys.ENTER) { this.insertCarriageReturnAtCursorIndex(event) } @@ -406,6 +343,8 @@ export class Input extends Component { } handleOnKeyUp = (event: Event) => { + // TODO: fix typescript complains + // @ts-ignore if (event.keyCode === Keys.ENTER) { this.props.onEnterUp(event) } @@ -430,6 +369,8 @@ export class Input extends Component { /* istanbul ignore next */ requestAnimationFrame(() => { /* istanbul ignore next */ + // TODO: fix typescript complains + // @ts-ignore moveCursorToEnd(this.inputNode) }) } @@ -450,8 +391,9 @@ export class Input extends Component { const computedStyles = window.getComputedStyle(this.inputNode) const { paddingBottom } = computedStyles - this.computedStyles = { + // TODO: fix typescript complains + // @ts-ignore paddingBottom: parseInt(paddingBottom, 10), } } @@ -486,7 +428,7 @@ export class Input extends Component { } /* istanbul ignore next */ - getInlinePrefixSuffixClassName({ type, icon }) { + getInlinePrefixSuffixClassName({ type, icon }: any) { const { multiline, seamless, state } = this.props return classNames( diff --git a/src/components/Input/Input.types.ts b/src/components/Input/Input.types.ts new file mode 100644 index 000000000..482bb970e --- /dev/null +++ b/src/components/Input/Input.types.ts @@ -0,0 +1,130 @@ +import { UISize, UIState } from '../../constants/types' + +export type InputAddOnProps = { + children?: any + className?: string + isFirst: boolean + isNotOnly: boolean + isLast: boolean +} + +export type InputStaticProps = { + align: 'left' | 'center' | 'right' | '' + children?: any + className?: string + size: UISize +} + +export type InputNode = HTMLInputElement | HTMLTextAreaElement +export type InputEvent = Event +export type WheelEvent = Event +export type AnyInputEvent = InputEvent | WheelEvent | Event +export type InputValue = string + +export type InputProps = { + action?: any + autoFocus: boolean + className: string + disabled: boolean + errorIcon?: string + errorMessage?: string + forceAutoFocusTimeout: number + hasInsertCarriageReturns: boolean + helpText: any + hintText: any + id: string + inlinePrefix?: string + inlineSuffix?: string + innerRef: (ref: HTMLElement) => void + inputRef: (ref: HTMLElement) => void + isFirst: boolean + isFocused: boolean + isLast: boolean + isNotOnly: boolean + isSubtleReadOnly: boolean + label: any + maxHeight: number | string + modalhelpText: string + moveCursorToEnd: boolean + multiline: boolean | number + name: string + offsetAmount: number + onBlur: (event: AnyInputEvent) => void + onChange: (value: InputValue) => void + onEnterDown: (event: AnyInputEvent) => void + onEnterUp: (event: AnyInputEvent) => void + onFocus: (event: AnyInputEvent) => void + onKeyDown: (event: AnyInputEvent) => void + onKeyUp: (event: AnyInputEvent) => void + onScroll: (event: AnyInputEvent) => void + onResize: (height: number) => void + onStartTyping: (now?: number) => void + onStopTyping: () => void + onWheel: (event: AnyInputEvent) => void + placeholder: string + prefix: any + readOnly: boolean + refApplyCallStopTyping: (fn: () => void) => void + removeStateStylesOnFocus: boolean + resizable: boolean + scrollLock: boolean + seamless: boolean + size: UISize + state?: UIState + style: Object + suffix: any + type: string + typingThrottleInterval: number + typingTimeoutDelay: number + value: InputValue + withTypingEvent: false +} + +export type InputState = { + id: string + isFocused: boolean + height?: number + state?: UIState + typingThrottle: number | undefined + typingTimeout: number | undefined + value: InputValue +} + +export type InputBackfropV2Props = { + className?: string + choiceKind?: string + disabled: boolean + isFilled: boolean + isFocused: boolean + isFirst: boolean + isNotOnly: boolean + isLast: boolean + isSeamless: boolean + kind?: string + readOnly: boolean + showFocus: boolean + state?: UIState +} + +export interface InputPrefixProps { + className?: string + isSeamless: boolean +} + +export interface InputSuffixProps { + className?: string + isAction: boolean + isSeamless: boolean +} + +export type RefNode = HTMLDivElement | null + +export interface InputResizerProps { + className?: string + contents: string + currentHeight?: number + minimumLines: number + offsetAmount: number + onResize: (size: number) => void + seamless: boolean +} diff --git a/src/components/Input/utils.js b/src/components/Input/Input.utils.ts similarity index 77% rename from src/components/Input/utils.js rename to src/components/Input/Input.utils.ts index ae61b2aef..466e0f450 100644 --- a/src/components/Input/utils.js +++ b/src/components/Input/Input.utils.ts @@ -1,4 +1,3 @@ -// @flow import { includes } from '../../utilities/arrays' type InputNode = HTMLInputElement | HTMLTextAreaElement @@ -17,7 +16,7 @@ export const COMPONENT_KEY = { * @param {InputNode} textarea * @returns {number} */ -export const getTextAreaLineTotal = (textarea: ?InputNode): number => { +export const getTextAreaLineTotal = (textarea: InputNode): number => { if (!textarea) return 0 return textarea.value.split(/\r*\n/).length } @@ -28,8 +27,10 @@ export const getTextAreaLineTotal = (textarea: ?InputNode): number => { * @param {InputNode} textarea * @returns {number} */ -export const getTextAreaLineCurrent = (textarea: ?InputNode): number => { +export const getTextAreaLineCurrent = (textarea: InputNode): number => { if (!textarea) return 0 + // TODO: fix typescript complains + // @ts-ignore return textarea.value.substr(0, textarea.selectionStart).split('\n').length } @@ -39,14 +40,18 @@ export const getTextAreaLineCurrent = (textarea: ?InputNode): number => { * * @param {InputNode} inputNode */ -export const moveCursorToEnd = (input: ?InputNode) => { +/* istanbul ignore next */ +export const moveCursorToEnd = (input: InputNode) => { // Extra failsafe guard if (!input) return if (typeof input.selectionStart === 'number') { input.selectionStart = input.selectionEnd = input.value.length + // TODO: fix typescript complains + // @ts-ignore } else if (typeof input.createTextRange !== 'undefined') { input.focus() - // $FlowFixMe + // TODO: fix typescript complains + // @ts-ignore let range = input.createTextRange() range.collapse(false) range.select() @@ -63,6 +68,6 @@ export function isTextArea(node: HTMLElement): boolean { return !!(node && node.tagName === 'TEXTAREA') } -export function isStateful(props: Object): boolean { +export function isStateful(props: any): boolean { return props.state && includes(['error', 'success', 'warning'], props.state) } diff --git a/src/components/Input/__tests__/AddOn.test.js b/src/components/Input/__tests__/Input.AddOn.test.js similarity index 98% rename from src/components/Input/__tests__/AddOn.test.js rename to src/components/Input/__tests__/Input.AddOn.test.js index ca037a936..351a4daed 100644 --- a/src/components/Input/__tests__/AddOn.test.js +++ b/src/components/Input/__tests__/Input.AddOn.test.js @@ -1,6 +1,6 @@ import React from 'react' import { mount } from 'enzyme' -import AddOn from '../AddOn' +import AddOn from '../Input.AddOn' describe('ClassName', () => { test('Has default className', () => { diff --git a/src/components/Input/__tests__/BackdropV2.test.js b/src/components/Input/__tests__/Input.BackdropV2.test.js similarity index 95% rename from src/components/Input/__tests__/BackdropV2.test.js rename to src/components/Input/__tests__/Input.BackdropV2.test.js index f617b1202..a64ce263d 100644 --- a/src/components/Input/__tests__/BackdropV2.test.js +++ b/src/components/Input/__tests__/Input.BackdropV2.test.js @@ -1,6 +1,6 @@ import React from 'react' import { mount } from 'enzyme' -import Backdrop from '../BackdropV2' +import Backdrop from '../Input.BackdropV2' describe('ClassName', () => { test('Has default className', () => { @@ -56,6 +56,12 @@ describe('Styles', () => { expect(wrapper.getDOMNode().classList.contains('is-readonly')).toBe(true) }) + test('Can render is-radio styles', () => { + const wrapper = mount() + + expect(wrapper.getDOMNode().classList.contains('is-radio')).toBe(true) + }) + test('Can render disabled styles', () => { const wrapper = mount() diff --git a/src/components/Input/__tests__/Prefix.test.js b/src/components/Input/__tests__/Input.Prefix.test.js similarity index 95% rename from src/components/Input/__tests__/Prefix.test.js rename to src/components/Input/__tests__/Input.Prefix.test.js index 92fa25c65..c2b276194 100644 --- a/src/components/Input/__tests__/Prefix.test.js +++ b/src/components/Input/__tests__/Input.Prefix.test.js @@ -1,6 +1,6 @@ import React from 'react' import { mount } from 'enzyme' -import Prefix from '../Prefix' +import Prefix from '../Input.Prefix' describe('Input/Prefix', () => { describe('ClassName', () => { diff --git a/src/components/Input/__tests__/Resizer.test.js b/src/components/Input/__tests__/Input.Resizer.test.js similarity index 99% rename from src/components/Input/__tests__/Resizer.test.js rename to src/components/Input/__tests__/Input.Resizer.test.js index 8be85cd99..bb66122fd 100644 --- a/src/components/Input/__tests__/Resizer.test.js +++ b/src/components/Input/__tests__/Input.Resizer.test.js @@ -1,6 +1,6 @@ import React from 'react' import { mount } from 'enzyme' -import Resizer from '../Resizer' +import Resizer from '../Input.Resizer' describe('onResize', () => { test('Is called when mounted', () => { diff --git a/src/components/Input/__tests__/Static.test.js b/src/components/Input/__tests__/Input.Static.test.js similarity index 98% rename from src/components/Input/__tests__/Static.test.js rename to src/components/Input/__tests__/Input.Static.test.js index c273bf8c7..b67e590d7 100644 --- a/src/components/Input/__tests__/Static.test.js +++ b/src/components/Input/__tests__/Input.Static.test.js @@ -1,6 +1,6 @@ import React from 'react' import { mount } from 'enzyme' -import Static from '../Static' +import Static from '../Input.Static' describe('ClassName', () => { test('Has the correct CSS class', () => { diff --git a/src/components/Input/__tests__/Suffix.test.js b/src/components/Input/__tests__/Input.Suffix.test.js similarity index 96% rename from src/components/Input/__tests__/Suffix.test.js rename to src/components/Input/__tests__/Input.Suffix.test.js index 6093e0864..bc3556dfc 100644 --- a/src/components/Input/__tests__/Suffix.test.js +++ b/src/components/Input/__tests__/Input.Suffix.test.js @@ -1,6 +1,6 @@ import React from 'react' import { mount } from 'enzyme' -import Suffix from '../Suffix' +import Suffix from '../Input.Suffix' describe('Input/Suffix', () => { describe('ClassName', () => { diff --git a/src/components/Input/__tests__/Input.test.js b/src/components/Input/__tests__/Input.test.js index 27cf3cdd6..2a55e7336 100644 --- a/src/components/Input/__tests__/Input.test.js +++ b/src/components/Input/__tests__/Input.test.js @@ -1,7 +1,7 @@ import React from 'react' import { mount, shallow, render } from 'enzyme' import Input from '../Input' -import Resizer from '../Resizer' +import Resizer from '../Input.Resizer' jest.useFakeTimers() diff --git a/src/components/Input/__tests__/utils.test.js b/src/components/Input/__tests__/Input.utils.test.js similarity index 84% rename from src/components/Input/__tests__/utils.test.js rename to src/components/Input/__tests__/Input.utils.test.js index 15282333b..aacf6778b 100644 --- a/src/components/Input/__tests__/utils.test.js +++ b/src/components/Input/__tests__/Input.utils.test.js @@ -2,7 +2,22 @@ import { getTextAreaLineCurrent, getTextAreaLineTotal, isTextArea, -} from '../utils' + moveCursorToEnd, +} from '../Input.utils' + +describe('moveCursorToEnd', () => { + test('Returns undefined if no node provided', () => { + expect(moveCursorToEnd()).toBeUndefined() + }) + + test('Moves cursor to end', () => { + const input = document.createElement('input') + input.value = 'stephen pomegranate' + moveCursorToEnd(input) + + expect(input.selectionStart).toBe(19) + }) +}) describe('getTextAreaLineCurrent', () => { test('Retrieves the correct line number for a single line', () => { diff --git a/src/components/Input/index.js b/src/components/Input/index.ts similarity index 88% rename from src/components/Input/index.js rename to src/components/Input/index.ts index d20fe3da8..33f3958ea 100644 --- a/src/components/Input/index.js +++ b/src/components/Input/index.ts @@ -1,7 +1,6 @@ -// @flow import { propConnect } from '../PropProvider' import Input from './Input' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Input.utils' Input.AddOn = propConnect(COMPONENT_KEY.AddOn)(Input.AddOn) Input.Prefix = propConnect(COMPONENT_KEY.Prefix)(Input.Prefix) diff --git a/src/components/Input/styles/AddOn.css.js b/src/components/Input/styles/Input.AddOn.css.js similarity index 79% rename from src/components/Input/styles/AddOn.css.js rename to src/components/Input/styles/Input.AddOn.css.js index 04247112a..4bb2213ea 100644 --- a/src/components/Input/styles/AddOn.css.js +++ b/src/components/Input/styles/Input.AddOn.css.js @@ -1,7 +1,6 @@ -// @flow -import baseStyles from '../../../styles/resets/baseStyles.css.js' +import baseStyles from '../../../styles/resets/baseStyles.css' import { getColor } from '../../../styles/utilities/color' -import styled from '../../styled/index' +import styled from '../../styled' export const config = { backgroundColor: getColor('grey.200'), @@ -10,12 +9,12 @@ export const config = { } export const AddOnUI = styled('div')` - ${baseStyles} + ${baseStyles}; background-color: ${config.backgroundColor}; border: 1px solid ${config.borderColor}; align-items: center; background-color: _color(grey, 200); - border-radius ${config.borderRadius}px; + border-radius: ${config.borderRadius}px; display: flex; height: 100%; margin: 0; diff --git a/src/components/Input/styles/BackdropV2.css.ts b/src/components/Input/styles/Input.BackdropV2.css.ts similarity index 97% rename from src/components/Input/styles/BackdropV2.css.ts rename to src/components/Input/styles/Input.BackdropV2.css.ts index ac0538660..57b99d16a 100644 --- a/src/components/Input/styles/BackdropV2.css.ts +++ b/src/components/Input/styles/Input.BackdropV2.css.ts @@ -1,8 +1,8 @@ -import baseStyles from '../../../styles/resets/baseStyles.css.js' +import baseStyles from '../../../styles/resets/baseStyles.css' import { STATES } from '../../../styles/configs/constants' import { getColor } from '../../../styles/utilities/color' import forEach from '../../../styles/utilities/forEach' -import styled from '../../styled/index' +import styled from '../../styled' export const config = { backgroundColor: 'white', diff --git a/src/components/Input/Resizer.css.ts b/src/components/Input/styles/Input.Resizer.css.ts similarity index 80% rename from src/components/Input/Resizer.css.ts rename to src/components/Input/styles/Input.Resizer.css.ts index 676a1e7ed..cde701601 100644 --- a/src/components/Input/Resizer.css.ts +++ b/src/components/Input/styles/Input.Resizer.css.ts @@ -1,5 +1,5 @@ -import styled from '../styled' -import baseStyles from '../../styles/resets/baseStyles.css' +import styled from '../../styled' +import baseStyles from '../../../styles/resets/baseStyles.css' export const ResizerUI = styled('div')` ${baseStyles}; diff --git a/src/components/Input/Static.css.ts b/src/components/Input/styles/Input.Static.css.ts similarity index 77% rename from src/components/Input/Static.css.ts rename to src/components/Input/styles/Input.Static.css.ts index f2468d38d..b7cd1e409 100644 --- a/src/components/Input/Static.css.ts +++ b/src/components/Input/styles/Input.Static.css.ts @@ -1,7 +1,7 @@ -import styled from '../styled' -import baseStyles from '../../styles/resets/baseStyles.css' -import { config as inputConfig } from './styles/Input.css' -import forEach from '../../styles/utilities/forEach' +import styled from '../../styled' +import baseStyles from '../../../styles/resets/baseStyles.css' +import { config as inputConfig } from './Input.css' +import forEach from '../../../styles/utilities/forEach' export const config = { defaultHeight: inputConfig.size.md, diff --git a/src/components/Input/styles/Input.css.js b/src/components/Input/styles/Input.css.js index a7c30bb3e..955bdffe5 100644 --- a/src/components/Input/styles/Input.css.js +++ b/src/components/Input/styles/Input.css.js @@ -1,5 +1,5 @@ -import styled from '../../styled/index' -import baseStyles from '../../../styles/resets/baseStyles.css.js' +import styled from '../../styled' +import baseStyles from '../../../styles/resets/baseStyles.css' import { STATES } from '../../../styles/configs/constants' import { getColor } from '../../../styles/utilities/color' import { makeFontFamilySystem } from '../../../styles/utilities/font' @@ -143,11 +143,11 @@ export const InlinePrefixSuffixUI = styled('div')` } ` -function getHeight(height): string { +function getHeight(height) { return `calc(${height} - ${config.borderWidth} * 2 - ${config.offset} * 2)` } -function makeSizeStyles(): string { +function makeSizeStyles() { return forEach(config.size, (size, props) => { const { height } = props @@ -159,7 +159,7 @@ function makeSizeStyles(): string { }) } -function makeMinSizeStyles(): string { +function makeMinSizeStyles() { return forEach(config.size, (size, props) => { const { height } = props @@ -171,7 +171,7 @@ function makeMinSizeStyles(): string { }) } -function makeStateStyles(): string { +function makeStateStyles() { return forEach( STATES, state => ` @@ -182,7 +182,7 @@ function makeStateStyles(): string { ) } -export function makeFieldStyles(): string { +export function makeFieldStyles() { return ` ${baseStyles}; ${makeFontFamilySystem()}; diff --git a/src/components/Label/Label.js b/src/components/Label/Label.tsx similarity index 73% rename from src/components/Label/Label.js rename to src/components/Label/Label.tsx index 85010a48e..f4eb1eabb 100644 --- a/src/components/Label/Label.js +++ b/src/components/Label/Label.tsx @@ -1,22 +1,21 @@ -// @flow -import type { UIState } from '../../constants/types' -import React, { PureComponent as Component } from 'react' +import * as React from 'react' +import { UIState } from '../../constants/types' import Text from '../Text' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' import { isString } from '../../utilities/is' -import { LabelUI } from './styles/Label.css.js' -import { COMPONENT_KEY } from './utils' +import { LabelUI } from './styles/Label.css' +import { COMPONENT_KEY } from './Label.utils' type Props = { - className?: string, - children?: any, - for: string, - isMarginless: boolean, - state?: UIState, + className?: string + children?: any + for: string + isMarginless: boolean + state?: UIState } -class Label extends Component { +class Label extends React.PureComponent { static defaultProps = { isMarginless: false, state: 'default', diff --git a/src/components/Label/utils.js b/src/components/Label/Label.utils.ts similarity index 100% rename from src/components/Label/utils.js rename to src/components/Label/Label.utils.ts diff --git a/src/components/Label/index.js b/src/components/Label/index.ts similarity index 92% rename from src/components/Label/index.js rename to src/components/Label/index.ts index e94111d53..3fc69abd1 100644 --- a/src/components/Label/index.js +++ b/src/components/Label/index.ts @@ -1,4 +1,3 @@ -// @flow import { propConnect } from '../PropProvider' import Label from './Label' diff --git a/src/components/Label/styles/Label.css.js b/src/components/Label/styles/Label.css.js index c7412ebba..e831348d4 100644 --- a/src/components/Label/styles/Label.css.js +++ b/src/components/Label/styles/Label.css.js @@ -1,4 +1,3 @@ -// @flow import baseStyles from '../../../styles/resets/baseStyles.css.js' import styled from '../../styled' import { makeStateColorStyles } from '../../../styles/mixins/stateStyles.css.js' diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx index 6c26c39e6..4b672e149 100644 --- a/src/components/Link/Link.tsx +++ b/src/components/Link/Link.tsx @@ -4,7 +4,7 @@ import RouteWrapper from '../RouteWrapper' import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' import { wordHasSpaces } from '../../utilities/strings' -import { LinkUI } from './Link.css' +import { LinkUI } from './styles/Link.css' export interface Props { autoWordWrap: boolean diff --git a/src/components/Link/Link.css.ts b/src/components/Link/styles/Link.css.ts similarity index 69% rename from src/components/Link/Link.css.ts rename to src/components/Link/styles/Link.css.ts index 6c4ed21ca..ffd0b497c 100644 --- a/src/components/Link/Link.css.ts +++ b/src/components/Link/styles/Link.css.ts @@ -1,6 +1,6 @@ -import styled from '../styled' -import baseStyles from '../../styles/resets/baseStyles.css' -import linkStyles from '../../styles/mixins/linkStyles.css' +import styled from '../../styled' +import baseStyles from '../../../styles/resets/baseStyles.css' +import linkStyles from '../../../styles/mixins/linkStyles.css' export const LinkUI = styled('a')` ${baseStyles}; diff --git a/src/components/List/List.Item.tsx b/src/components/List/List.Item.tsx index 6f14fa5a5..88e257a87 100644 --- a/src/components/List/List.Item.tsx +++ b/src/components/List/List.Item.tsx @@ -4,7 +4,7 @@ import getValidProps from '@helpscout/react-utils/dist/getValidProps' import propConnect from '../PropProvider/propConnect' import { classNames } from '../../utilities/classNames' import { COMPONENT_KEY } from './List.utils' -import { ItemUI } from './List.css' +import { ItemUI } from './styles/List.css' export interface Props extends ListGenericProps { borderStyle: ListBorder diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx index 3885fbf0b..24d746f23 100644 --- a/src/components/List/List.tsx +++ b/src/components/List/List.tsx @@ -6,7 +6,7 @@ import propConnect from '../PropProvider/propConnect' import { classNames } from '../../utilities/classNames' import Item from './List.Item' import { COMPONENT_KEY } from './List.utils' -import { BulletListUI, NumberedListUI } from './List.css' +import { BulletListUI, NumberedListUI } from './styles/List.css' export interface Props extends ListGenericProps { border: ListBorder diff --git a/src/components/List/List.css.ts b/src/components/List/styles/List.css.ts similarity index 91% rename from src/components/List/List.css.ts rename to src/components/List/styles/List.css.ts index 54ac938ef..e5768de4b 100644 --- a/src/components/List/List.css.ts +++ b/src/components/List/styles/List.css.ts @@ -1,6 +1,6 @@ -import styled from '../styled' -import baseStyles from '../../styles/resets/baseStyles.css.js' -import forEach from '../../styles/utilities/forEach' +import styled from '../../styled' +import baseStyles from '../../../styles/resets/baseStyles.css' +import forEach from '../../../styles/utilities/forEach' export const config = { size: { diff --git a/src/components/LoadingDots/index.js b/src/components/LoadingDots/LoadingDots.tsx similarity index 85% rename from src/components/LoadingDots/index.js rename to src/components/LoadingDots/LoadingDots.tsx index ff97761fc..9b009378c 100644 --- a/src/components/LoadingDots/index.js +++ b/src/components/LoadingDots/LoadingDots.tsx @@ -1,10 +1,9 @@ -// @flow -import React from 'react' +import * as React from 'react' import { classNames } from '../../utilities/classNames' type Props = { - align?: 'left' | 'center' | 'right' | '', - className?: string, + align?: 'left' | 'center' | 'right' | '' + className?: string } const LoadingDots = (props: Props) => { diff --git a/src/components/LoadingDots/__tests__/LoadingDots.test.js b/src/components/LoadingDots/__tests__/LoadingDots.test.js index 4345e38ba..2d06ba8ff 100644 --- a/src/components/LoadingDots/__tests__/LoadingDots.test.js +++ b/src/components/LoadingDots/__tests__/LoadingDots.test.js @@ -1,6 +1,6 @@ import React from 'react' import { shallow } from 'enzyme' -import LoadingDots from '..' +import LoadingDots from '../LoadingDots' describe('ClassName', () => { test('Applies custom className if specified', () => { diff --git a/src/components/LoadingDots/index.ts b/src/components/LoadingDots/index.ts new file mode 100644 index 000000000..d014411e5 --- /dev/null +++ b/src/components/LoadingDots/index.ts @@ -0,0 +1,3 @@ +import LoadingDots from './LoadingDots' + +export default LoadingDots diff --git a/src/components/Message/Action.js b/src/components/Message/Message.Action.tsx similarity index 76% rename from src/components/Message/Action.js rename to src/components/Message/Message.Action.tsx index ebf93085b..cd649f07c 100644 --- a/src/components/Message/Action.js +++ b/src/components/Message/Message.Action.tsx @@ -1,19 +1,18 @@ -// @flow -import type { MessageChat, MessageThemeContext } from './types' -import React from 'react' +import * as React from 'react' +import { MessageChat, MessageThemeContext } from './Message.types' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import Text from '../Text' -import ChatBlock from './ChatBlock' +import ChatBlock from './Message.ChatBlock' import styled from '../styled' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { providerContextTypes } from './propTypes' -import css from './styles/Action.css.js' -import { COMPONENT_KEY } from './utils' +import { noop } from '../../utilities/other' +import css from './styles/Action.css' +import { COMPONENT_KEY } from './Message.utils' type Props = MessageChat & { - className?: string, - icon?: string, + className?: string + icon?: string } type Context = MessageThemeContext @@ -67,7 +66,11 @@ export const Action = (props: Props, context: Context) => { ) } -Action.contextTypes = providerContextTypes +// TODO: fix typescript complains +// @ts-ignore +Action.contextTypes = { + theme: noop, +} namespaceComponent(COMPONENT_KEY.Action)(Action) diff --git a/src/components/Message/Attachment.js b/src/components/Message/Message.Attachment.tsx similarity index 77% rename from src/components/Message/Attachment.js rename to src/components/Message/Message.Attachment.tsx index 85adde162..613a0a780 100644 --- a/src/components/Message/Attachment.js +++ b/src/components/Message/Message.Attachment.tsx @@ -1,27 +1,25 @@ -// @flow -import type { MessageBubble, MessageThemeContext } from './types' -import React from 'react' +import * as React from 'react' +import { MessageBubble, MessageThemeContext } from './Message.types' import Link from '../Link' import Text from '../Text' -import Chat from './Chat' +import Chat from './Message.Chat' import styled from '../styled' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' import { noop } from '../../utilities/other' -import { providerContextTypes } from './propTypes' -import css, { TextCSS } from './styles/Attachment.css.js' -import { COMPONENT_KEY } from './utils' +import css, { TextCSS } from './styles/Attachment.css' +import { COMPONENT_KEY } from './Message.utils' type Props = MessageBubble & { - errorMessage?: string, - error?: boolean | string, - filename?: string, - download?: boolean | string, - isUploading?: boolean, - onClick?: (event?: Event) => void, - openDownloadInNewTab?: boolean, - uploadingMessage?: string, - url?: string, + errorMessage?: string + error?: boolean | string + filename?: string + download?: boolean | string + isUploading?: boolean + onClick?: (event?: Event) => void + openDownloadInNewTab?: boolean + uploadingMessage?: string + url?: string } type Context = MessageThemeContext @@ -100,7 +98,12 @@ Attachment.defaultProps = { size: 'md', uploadingMessage: 'Uploading…', } -Attachment.contextTypes = providerContextTypes + +// TODO: fix typescript complains +// @ts-ignore +Attachment.contextTypes = { + theme: noop, +} namespaceComponent(COMPONENT_KEY.Attachment)(Attachment) diff --git a/src/components/Message/Bubble.js b/src/components/Message/Message.Bubble.tsx similarity index 93% rename from src/components/Message/Bubble.js rename to src/components/Message/Message.Bubble.tsx index 917e64ff5..054aae40e 100644 --- a/src/components/Message/Bubble.js +++ b/src/components/Message/Message.Bubble.tsx @@ -1,6 +1,6 @@ -// @flow -import type { MessageBubble, MessageThemeContext } from './types' -import React from 'react' +import * as React from 'react' +import { MessageBubble, MessageThemeContext } from './Message.types' +import { noop } from '../../utilities/other' import { isNativeSpanType } from '@helpscout/react-utils/dist/isType' import compose from '@helpscout/react-utils/dist/compose' import Heading from '../Heading' @@ -16,15 +16,14 @@ import { isWord, newlineToHTML, } from '../../utilities/strings' -import { providerContextTypes } from './propTypes' import css, { BodyCSS, FromCSS, IconWrapperCSS, TitleCSS, TypingCSS, -} from './styles/Bubble.css.js' -import { COMPONENT_KEY } from './utils' +} from './styles/Bubble.css' +import { COMPONENT_KEY } from './Message.utils' type Props = MessageBubble type Context = MessageThemeContext @@ -151,7 +150,9 @@ export const Bubble = (props: Props, context: Context) => { ) } -Bubble.contextTypes = providerContextTypes +Bubble.contextTypes = { + theme: noop, +} namespaceComponent(COMPONENT_KEY.Bubble)(Bubble) diff --git a/src/components/Message/Caption.js b/src/components/Message/Message.Caption.tsx similarity index 75% rename from src/components/Message/Caption.js rename to src/components/Message/Message.Caption.tsx index b4a970490..377c74f0a 100644 --- a/src/components/Message/Caption.js +++ b/src/components/Message/Message.Caption.tsx @@ -1,17 +1,16 @@ -// @flow -import type { MessageThemeContext } from './types' -import React from 'react' +import * as React from 'react' +import { MessageThemeContext } from './Message.types' import Text from '../Text' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { providerContextTypes } from './propTypes' -import { COMPONENT_KEY } from './utils' +import { noop } from '../../utilities/other' +import { COMPONENT_KEY } from './Message.utils' type Props = { - className?: string, - children?: any, - size?: string, - wordWrap: boolean, + className?: string + children?: any + size?: string + wordWrap: boolean } type Context = MessageThemeContext @@ -46,7 +45,10 @@ const Caption = (props: Props, context: Context) => { Caption.defaultProps = { wordWrap: true, } -Caption.contextTypes = providerContextTypes + +Caption.contextTypes = { + theme: noop, +} namespaceComponent(COMPONENT_KEY.Caption)(Caption) diff --git a/src/components/Message/Chat.js b/src/components/Message/Message.Chat.tsx similarity index 82% rename from src/components/Message/Chat.js rename to src/components/Message/Message.Chat.tsx index 2e48ff6ed..64e149fba 100644 --- a/src/components/Message/Chat.js +++ b/src/components/Message/Message.Chat.tsx @@ -1,29 +1,28 @@ -// @flow -import type { MessageBubble } from './types' -import React, { PureComponent as Component } from 'react' -import Bubble from './Bubble' -import Caption from './Caption' -import ChatBlock from './ChatBlock' +import * as React from 'react' +import { MessageBubble } from './Message.types' +import Bubble from './Message.Bubble' +import Caption from './Message.Caption' +import ChatBlock from './Message.ChatBlock' import Flexy from '../Flexy' import Spinner from '../Spinner' import styled from '../styled' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' import { noop } from '../../utilities/other' -import css from './styles/Chat.css.js' -import { COMPONENT_KEY } from './utils' +import css from './styles/Chat.css' +import { COMPONENT_KEY } from './Message.utils' type Props = MessageBubble & { - bubbleClassName?: string, - captionSize?: string, - caption?: ?string, - errorMessage?: string, - error?: boolean | string, - isLoading?: boolean, - onBubbleClick: (event: Event) => void, + bubbleClassName?: string + captionSize?: string + caption?: string + errorMessage?: string + error?: boolean | string + isLoading?: boolean + onBubbleClick: (event: Event) => void } -export class Chat extends Component { +export class Chat extends React.PureComponent { static defaultProps = { onBubbleClick: noop, error: false, diff --git a/src/components/Message/ChatBlock.js b/src/components/Message/Message.ChatBlock.tsx similarity index 81% rename from src/components/Message/ChatBlock.js rename to src/components/Message/Message.ChatBlock.tsx index b91983ef5..6a1d9d228 100644 --- a/src/components/Message/ChatBlock.js +++ b/src/components/Message/Message.ChatBlock.tsx @@ -1,27 +1,28 @@ -// @flow -import type { MessageChat } from './types' -import React, { PureComponent as Component } from 'react' +import * as React from 'react' +import { MessageChat } from './Message.types' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import Flexy from '../Flexy' -import Action from './Action' -import Bubble from './Bubble' +import Action from './Message.Action' +import Bubble from './Message.Bubble' import Timestamp from '../Timestamp' import styled from '../styled' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { providerContextTypes } from './propTypes' -import css from './styles/ChatBlock.css.js' -import { COMPONENT_KEY } from './utils' +import { noop } from '../../utilities/other' +import css from './styles/ChatBlock.css' +import { COMPONENT_KEY } from './Message.utils' type Props = MessageChat & { - body?: string, - children?: any, - icon?: string, - meta?: any, + body?: string + children?: any + icon?: string + meta?: any } -export class ChatBlock extends Component { - static contextTypes = providerContextTypes +export class ChatBlock extends React.PureComponent { + static contextTypes = { + theme: noop, + } static displayName = 'Message.ChatBlock' getChildrenMarkup = () => { diff --git a/src/components/Message/Content.js b/src/components/Message/Message.Content.tsx similarity index 82% rename from src/components/Message/Content.js rename to src/components/Message/Message.Content.tsx index f85e312b1..e268298f1 100644 --- a/src/components/Message/Content.js +++ b/src/components/Message/Message.Content.tsx @@ -1,14 +1,13 @@ -// @flow -import type { MessageChat } from './types' -import React from 'react' +import * as React from 'react' +import { MessageChat } from './Message.types' import getValidProps from '@helpscout/react-utils/dist/getValidProps' -import ChatBlock from './ChatBlock' +import ChatBlock from './Message.ChatBlock' import styled from '../styled' -import PreviewCardContext from '../PreviewCard/Context' +import PreviewCardContext from '../PreviewCard/PreviewCard.Context' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import css from './styles/Content.css.js' -import { COMPONENT_KEY } from './utils' +import css from './styles/Content.css' +import { COMPONENT_KEY } from './Message.utils' type Props = MessageChat diff --git a/src/components/Message/Embed.js b/src/components/Message/Message.Embed.tsx similarity index 81% rename from src/components/Message/Embed.js rename to src/components/Message/Message.Embed.tsx index de570a6df..751452162 100644 --- a/src/components/Message/Embed.js +++ b/src/components/Message/Message.Embed.tsx @@ -1,26 +1,25 @@ -// @flow -import type { MessageChat, MessageThemeContext } from './types' -import React, { Component } from 'react' +import * as React from 'react' +import { MessageChat, MessageThemeContext } from './Message.types' import styled from '../styled' -import Chat from './Chat' +import Chat from './Message.Chat' import LoadingDots from '../LoadingDots' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import css from './styles/Embed.css.js' -import { COMPONENT_KEY } from './utils' +import css from './styles/Embed.css' +import { COMPONENT_KEY } from './Message.utils' type Props = MessageChat & { - className?: string, - html?: string, + className?: string + html?: string } type State = { - isLoading: boolean, + isLoading: boolean } type Context = MessageThemeContext -class Embed extends Component { +class Embed extends React.Component { static displayName = 'Message.Embed' state = { @@ -76,7 +75,7 @@ class Embed extends Component { className={componentClassName} >
diff --git a/src/components/Message/Media.js b/src/components/Message/Message.Media.tsx similarity index 81% rename from src/components/Message/Media.js rename to src/components/Message/Message.Media.tsx index c3f30a682..eb40b2f52 100644 --- a/src/components/Message/Media.js +++ b/src/components/Message/Message.Media.tsx @@ -1,50 +1,47 @@ -// @flow -import type { Node } from 'react' -import type { MessageBubble } from './types' -import React, { Component } from 'react' +import * as React from 'react' +import { MessageBubble } from './Message.types' import styled from '../styled' import Link from '../Link' import Spinner from '../Spinner' import Modal from '../Modal' -import Chat from './Chat' -import Caption from './Caption' +import Chat from './Message.Chat' +import Caption from './Message.Caption' import classNames, { BEM } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' import { isString } from '../../utilities/is' import { noop } from '../../utilities/other' -import { providerContextTypes } from './propTypes' -import css, { ImageUI } from './styles/Media.css.js' -import { COMPONENT_KEY } from './utils' +import css, { ImageUI } from './styles/Media.css' +import { COMPONENT_KEY } from './Message.utils' type Props = MessageBubble & { - className: string, - caption?: string, - errorMessage?: string, - error?: boolean | string, - imageAlt?: string, - imageUrl?: string, - height?: number, - isUploading?: boolean, - maxHeight: number, - maxWidth: number, - modalAnimationDuration: number, - modalAnimationEasing: string, - modalAnimationSequence: string, - modalClassName?: string, - modalCardClassName?: string, - modalWrapperClassName?: string, - overlayAnimationDuration: number, - onErrorTryAgainClick: (event: Event) => void, - onMediaClick: (event: Event) => void, - onMediaLoad: () => void, - openMediaInModal?: boolean, - thumbnailImageUrl?: string, - showErrorTryAgainLink: boolean, - tryAgainLabel: string, - width?: number, + className: string + caption?: string + errorMessage?: string + error?: boolean | string + imageAlt?: string + imageUrl?: string + height?: number + isUploading?: boolean + maxHeight: number + maxWidth: number + modalAnimationDuration: number + modalAnimationEasing: string + modalAnimationSequence: string + modalClassName?: string + modalCardClassName?: string + modalWrapperClassName?: string + overlayAnimationDuration: number + onErrorTryAgainClick: (event: Event) => void + onMediaClick: (event: Event) => void + onMediaLoad: () => void + openMediaInModal?: boolean + thumbnailImageUrl?: string + showErrorTryAgainLink: boolean + tryAgainLabel: string + width?: number } -export class Media extends Component { +export class Media extends React.Component { static defaultProps = { className: '', errorMessage: `Couldn't send.`, @@ -62,7 +59,10 @@ export class Media extends Component { tryAgainLabel: 'Try again', isUploading: false, } - static contextTypes = providerContextTypes + static contextTypes = { + theme: noop, + } + static displayName = 'Message.Media' /** @@ -70,7 +70,7 @@ export class Media extends Component { * * @returns {string} The caption text. */ - getCaption = (): ?string => { + getCaption = (): string => { const { caption, error, errorMessage } = this.props let text = caption @@ -79,11 +79,12 @@ export class Media extends Component { text = isString(error) ? error : errorMessage } - // $FlowFixMe + // TODO: fix typescript complains + // @ts-ignore return text } - getSpinnerMarkup = (): ?Node => { + getSpinnerMarkup = () => { return ( this.props.isUploading && ( @@ -91,7 +92,7 @@ export class Media extends Component { ) } - getCaptionMarkup = (): ?Node => { + getCaptionMarkup = () => { const captionText = this.getCaption() const spinnerMarkup = this.getSpinnerMarkup() const tryAgainMarkup = this.getTryAgainMarkup() @@ -114,7 +115,7 @@ export class Media extends Component { src, maxHeight, maxWidth, - }: { src?: string, maxHeight?: number, maxWidth?: number } = {}): ?Node => { + }: { src?: string; maxHeight?: number; maxWidth?: number } = {}) => { const { height, onMediaClick, @@ -148,7 +149,7 @@ export class Media extends Component { ) } - getTryAgainMarkup = (): ?Node => { + getTryAgainMarkup = () => { const { error, showErrorTryAgainLink, tryAgainLabel } = this.props if (!error || !showErrorTryAgainLink) return null @@ -223,7 +224,7 @@ export class Media extends Component { error && 'is-error', className ) - const bem = BEM(componentClassName) + const bem: any = BEM(componentClassName) const captionMarkup = caption && (
diff --git a/src/components/Message/Message.Provider.tsx b/src/components/Message/Message.Provider.tsx new file mode 100644 index 000000000..9e46ca6a4 --- /dev/null +++ b/src/components/Message/Message.Provider.tsx @@ -0,0 +1,32 @@ +import * as React from 'react' +import ThemeProvider from '../ThemeProvider' +import { namespaceComponent } from '../../utilities/component' +import { noop } from '../../utilities/other' +import { COMPONENT_KEY } from './Message.utils' + +export type MessageProviderProps = { + theme: any + children: any +} + +// TODO: fix typescript complains +// @ts-ignore +class Provider extends ThemeProvider { + static defaultProps = { + theme: 'admin', + } + static childContextTypes = { + theme: noop, + } + static displayName = 'MessageProvider' + + render() { + // TODO: fix typescript complains + // @ts-ignore + return
{this.props.children}
+ } +} + +namespaceComponent(COMPONENT_KEY.Provider)(Provider) + +export default Provider diff --git a/src/components/Message/Question.js b/src/components/Message/Message.Question.tsx similarity index 66% rename from src/components/Message/Question.js rename to src/components/Message/Message.Question.tsx index 1b3979c71..ee10476ac 100644 --- a/src/components/Message/Question.js +++ b/src/components/Message/Message.Question.tsx @@ -1,12 +1,11 @@ -// @flow -import React from 'react' -import Chat from './Chat' +import * as React from 'react' +import Chat from './Message.Chat' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Message.utils' type Props = { - primary?: boolean, - title?: string, + primary?: boolean + title?: string } const Question = (props: Props) => { diff --git a/src/components/Message/Message.js b/src/components/Message/Message.tsx similarity index 79% rename from src/components/Message/Message.js rename to src/components/Message/Message.tsx index d9a8efcf3..229c54699 100644 --- a/src/components/Message/Message.js +++ b/src/components/Message/Message.tsx @@ -1,20 +1,18 @@ -// @flow -import type { Node } from 'react' -import type { Message as MessageType } from './types' -import React, { PureComponent as Component } from 'react' +import * as React from 'react' +import { Message as MessageType } from './Message.types' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import Flexy from '../Flexy' import Text from '../Text' -import Action from './Action' -import Attachment from './Attachment' -import Bubble from './Bubble' -import Caption from './Caption' -import Chat from './Chat' -import Content from './Content' -import Embed from './Embed' -import Media from './Media' -import Provider from './Provider' -import Question from './Question' +import Action from './Message.Action' +import Attachment from './Message.Attachment' +import Bubble from './Message.Bubble' +import Caption from './Message.Caption' +import Chat from './Message.Chat' +import Content from './Message.Content' +import Embed from './Message.Embed' +import Media from './Message.Media' +import Provider from './Message.Provider' +import Question from './Message.Question' import styled from '../styled' import { classNames } from '../../utilities/classNames' import { @@ -22,20 +20,22 @@ import { namespaceComponent, } from '../../utilities/component' import { isString } from '../../utilities/is' -import { providerContextTypes } from './propTypes' -import css from './styles/Message.css.js' -import { COMPONENT_KEY } from './utils' +import { noop } from '../../utilities/other' +import css from './styles/Message.css' +import { COMPONENT_KEY } from './Message.utils' type Props = MessageType & { - avatar?: any, - showAvatar?: boolean, + avatar?: any + showAvatar?: boolean } -export class Message extends Component { +export class Message extends React.PureComponent { static defaultProps = { showAvatar: true, } - static contextTypes = providerContextTypes + static contextTypes = { + theme: noop, + } static Action = Action static Attachment = Attachment static Bubble = Bubble @@ -78,7 +78,7 @@ export class Message extends Component { ) } - getChildrenMarkup = (): ?Node => { + getChildrenMarkup = () => { const { children, from, ltr, rtl, to } = this.props return React.Children.map(children, child => { @@ -93,7 +93,7 @@ export class Message extends Component { }) } - getFromMarkup = (): ?Node => { + getFromMarkup = () => { const { from } = this.props const fromName = isString(from) ? from : null diff --git a/src/components/Message/Message.types.ts b/src/components/Message/Message.types.ts new file mode 100644 index 000000000..d6ca3b213 --- /dev/null +++ b/src/components/Message/Message.types.ts @@ -0,0 +1,35 @@ +export type MessageType = 'action' | 'message' | '' + +export type Message = { + children?: any + className?: string + from?: any + isNote?: boolean + ltr?: boolean + rtl?: boolean + to?: any + type?: MessageType +} + +export type MessageChat = Message & { + read?: boolean + timestamp?: string +} + +export type MessageBubbleSize = 'md' | 'sm' | '' + +export type MessageBubble = MessageChat & { + body?: string + icon?: string + isNote?: boolean + primary?: boolean + title?: string + size?: MessageBubbleSize + typing?: boolean +} + +export type MessageTheme = 'admin' | 'embed' | 'notifications' | '' + +export type MessageThemeContext = { + theme: MessageTheme +} diff --git a/src/components/Message/utils.js b/src/components/Message/Message.utils.ts similarity index 100% rename from src/components/Message/utils.js rename to src/components/Message/Message.utils.ts diff --git a/src/components/Message/Provider.js b/src/components/Message/Provider.js deleted file mode 100644 index 0a776038c..000000000 --- a/src/components/Message/Provider.js +++ /dev/null @@ -1,23 +0,0 @@ -// @flow -import React from 'react' -import ThemeProvider from '../ThemeProvider' -import { namespaceComponent } from '../../utilities/component' -import { providerContextTypes } from './propTypes' -import { COMPONENT_KEY } from './utils' - -class Provider extends ThemeProvider { - static propTypes = providerContextTypes - static defaultProps = { - theme: 'admin', - } - static childContextTypes = providerContextTypes - static displayName = 'MessageProvider' - - render() { - return
{this.props.children}
- } -} - -namespaceComponent(COMPONENT_KEY.Provider)(Provider) - -export default Provider diff --git a/src/components/Message/__tests__/Action.test.js b/src/components/Message/__tests__/Message.Action.test.js similarity index 94% rename from src/components/Message/__tests__/Action.test.js rename to src/components/Message/__tests__/Message.Action.test.js index 767438908..9e69aad7f 100644 --- a/src/components/Message/__tests__/Action.test.js +++ b/src/components/Message/__tests__/Message.Action.test.js @@ -1,9 +1,9 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import ChatBlock from '../ChatBlock' -import Action from '../Action' +import ChatBlock from '../Message.ChatBlock' +import Action from '../Message.Action' import Message from '../Message' -import { Text } from '../../' +import { Text } from '../..' const cx = 'c-MessageAction' const ui = { diff --git a/src/components/Message/__tests__/Attachment.test.js b/src/components/Message/__tests__/Message.Attachment.test.js similarity index 98% rename from src/components/Message/__tests__/Attachment.test.js rename to src/components/Message/__tests__/Message.Attachment.test.js index 36d6ceb9c..6d111f5bb 100644 --- a/src/components/Message/__tests__/Attachment.test.js +++ b/src/components/Message/__tests__/Message.Attachment.test.js @@ -1,7 +1,7 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import Attachment from '../Attachment' -import Chat from '../Chat' +import Attachment from '../Message.Attachment' +import Chat from '../Message.Chat' import Message from '../Message' const cx = 'c-MessageAttachment' diff --git a/src/components/Message/__tests__/Bubble.test.js b/src/components/Message/__tests__/Message.Bubble.test.js similarity index 99% rename from src/components/Message/__tests__/Bubble.test.js rename to src/components/Message/__tests__/Message.Bubble.test.js index 0bf85ad54..c7b503301 100644 --- a/src/components/Message/__tests__/Bubble.test.js +++ b/src/components/Message/__tests__/Message.Bubble.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import Bubble from '../Bubble' +import Bubble from '../Message.Bubble' import Message from '../Message' import { LoadingDots, Text } from '../../index' diff --git a/src/components/Message/__tests__/Caption.test.js b/src/components/Message/__tests__/Message.Caption.test.js similarity index 96% rename from src/components/Message/__tests__/Caption.test.js rename to src/components/Message/__tests__/Message.Caption.test.js index 90dfc8915..f2ee08d07 100644 --- a/src/components/Message/__tests__/Caption.test.js +++ b/src/components/Message/__tests__/Message.Caption.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { shallow } from 'enzyme' -import Caption from '../Caption' +import Caption from '../Message.Caption' const cx = 'c-MessageCaption' diff --git a/src/components/Message/__tests__/Chat.test.js b/src/components/Message/__tests__/Message.Chat.test.js similarity index 96% rename from src/components/Message/__tests__/Chat.test.js rename to src/components/Message/__tests__/Message.Chat.test.js index aae4d4ad2..2e0c0671e 100644 --- a/src/components/Message/__tests__/Chat.test.js +++ b/src/components/Message/__tests__/Message.Chat.test.js @@ -1,9 +1,9 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import Bubble from '../Bubble' -import ChatBlock from '../ChatBlock' -import Chat from '../Chat' -import Caption from '../Caption' +import Bubble from '../Message.Bubble' +import ChatBlock from '../Message.ChatBlock' +import Chat from '../Message.Chat' +import Caption from '../Message.Caption' const cx = 'c-MessageChat' const ui = { diff --git a/src/components/Message/__tests__/ChatBlock.test.js b/src/components/Message/__tests__/Message.ChatBlock.test.js similarity index 93% rename from src/components/Message/__tests__/ChatBlock.test.js rename to src/components/Message/__tests__/Message.ChatBlock.test.js index 565848097..6ae9e8c32 100644 --- a/src/components/Message/__tests__/ChatBlock.test.js +++ b/src/components/Message/__tests__/Message.ChatBlock.test.js @@ -1,10 +1,10 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import Action from '../Action' -import ChatBlock from '../ChatBlock' -import Bubble from '../Bubble' +import Action from '../Message.Action' +import ChatBlock from '../Message.ChatBlock' +import Bubble from '../Message.Bubble' import Message from '../Message' -import { Flexy, Timestamp } from '../../' +import { Timestamp } from '../..' const cx = 'c-MessageChatBlock' diff --git a/src/components/Message/__tests__/Content.test.js b/src/components/Message/__tests__/Message.Content.test.js similarity index 95% rename from src/components/Message/__tests__/Content.test.js rename to src/components/Message/__tests__/Message.Content.test.js index 97c7ae827..b8d19ff74 100644 --- a/src/components/Message/__tests__/Content.test.js +++ b/src/components/Message/__tests__/Message.Content.test.js @@ -1,7 +1,7 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import ChatBlock from '../ChatBlock' -import Content from '../Content' +import ChatBlock from '../Message.ChatBlock' +import Content from '../Message.Content' const cx = 'c-MessageContent' const ui = { diff --git a/src/components/Message/__tests__/Embed.test.js b/src/components/Message/__tests__/Message.Embed.test.js similarity index 97% rename from src/components/Message/__tests__/Embed.test.js rename to src/components/Message/__tests__/Message.Embed.test.js index e283b771a..c7c480539 100644 --- a/src/components/Message/__tests__/Embed.test.js +++ b/src/components/Message/__tests__/Message.Embed.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import Embed from '../Embed' +import Embed from '../Message.Embed' import LoadingDots from '../../LoadingDots' import Message from '../Message' diff --git a/src/components/Message/__tests__/Media.test.js b/src/components/Message/__tests__/Message.Media.test.js similarity index 98% rename from src/components/Message/__tests__/Media.test.js rename to src/components/Message/__tests__/Message.Media.test.js index 6bb2c6900..7e4e5545b 100644 --- a/src/components/Message/__tests__/Media.test.js +++ b/src/components/Message/__tests__/Message.Media.test.js @@ -1,9 +1,9 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import Chat from '../Chat' -import { Media } from '../Media' +import Chat from '../Message.Chat' +import { Media } from '../Message.Media' import Message from '../Message' -import { Image, Modal, Text } from '../../index' +import { Image, Modal } from '../../index' const cx = 'c-MessageMedia' const ui = { diff --git a/src/components/Message/__tests__/Provider.test.js b/src/components/Message/__tests__/Message.Provider.test.js similarity index 91% rename from src/components/Message/__tests__/Provider.test.js rename to src/components/Message/__tests__/Message.Provider.test.js index 1da59cfe7..953ce7a24 100644 --- a/src/components/Message/__tests__/Provider.test.js +++ b/src/components/Message/__tests__/Message.Provider.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import Provider from '../Provider' +import Provider from '../Message.Provider' import Message from '../Message' const ui = { diff --git a/src/components/Message/__tests__/Question.test.js b/src/components/Message/__tests__/Message.Question.test.js similarity index 79% rename from src/components/Message/__tests__/Question.test.js rename to src/components/Message/__tests__/Message.Question.test.js index c8e975de8..f34e4896c 100644 --- a/src/components/Message/__tests__/Question.test.js +++ b/src/components/Message/__tests__/Message.Question.test.js @@ -1,7 +1,7 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import Question from '../Question' -import Chat from '../Chat' +import Question from '../Message.Question' +import Chat from '../Message.Chat' test('Returns a Chat component', () => { const wrapper = mount() diff --git a/src/components/Message/__tests__/Message.test.js b/src/components/Message/__tests__/Message.test.js index 0579e2cd4..45fb3ade2 100644 --- a/src/components/Message/__tests__/Message.test.js +++ b/src/components/Message/__tests__/Message.test.js @@ -1,13 +1,13 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' import Message from '../Message' -import Action from '../Action' -import Attachment from '../Attachment' -import Bubble from '../Bubble' -import Chat from '../Chat' -import Content from '../Content' -import Media from '../Media' -import Question from '../Question' +import Action from '../Message.Action' +import Attachment from '../Message.Attachment' +import Bubble from '../Message.Bubble' +import Chat from '../Message.Chat' +import Content from '../Message.Content' +import Media from '../Message.Media' +import Question from '../Message.Question' import { Avatar } from '../../index' const cx = 'c-Message' diff --git a/src/components/Message/index.js b/src/components/Message/index.ts similarity index 92% rename from src/components/Message/index.js rename to src/components/Message/index.ts index 524af9eaf..fdc83164d 100644 --- a/src/components/Message/index.js +++ b/src/components/Message/index.ts @@ -1,7 +1,6 @@ -// @flow import Message from './Message' import { propConnect } from '../PropProvider' -export { default as Provider } from './Provider' +export { default as Provider } from './Message.Provider' Message.Action = propConnect('MessageAction')(Message.Action) Message.Attachment = propConnect('MessageAttachment')(Message.Attachment) diff --git a/src/components/Message/propTypes.js b/src/components/Message/propTypes.js deleted file mode 100644 index 502750b6c..000000000 --- a/src/components/Message/propTypes.js +++ /dev/null @@ -1,37 +0,0 @@ -import PropTypes from 'prop-types' - -export const themeTypes = PropTypes.oneOf([ - 'admin', - 'embed', - 'notifications', - '', -]) - -export const typeTypes = PropTypes.oneOf(['action', 'message', '']) - -export const providerContextTypes = { - theme: themeTypes, -} - -export const messageTypes = { - from: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]), - ltr: PropTypes.bool, - rtl: PropTypes.bool, - to: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]), - type: typeTypes, -} - -export const chatTypes = Object.assign({}, messageTypes, { - read: PropTypes.bool, - timestamp: PropTypes.string, -}) - -export const bubbleTypes = Object.assign({}, chatTypes, { - body: PropTypes.string, - icon: PropTypes.string, - isNote: PropTypes.bool, - primary: PropTypes.bool, - title: PropTypes.string, - size: PropTypes.oneOf(['md', 'sm', '']), - typing: PropTypes.bool, -}) diff --git a/src/components/Message/styles/Action.css.js b/src/components/Message/styles/Action.css.js index 0a1cdadbd..3edf799ae 100644 --- a/src/components/Message/styles/Action.css.js +++ b/src/components/Message/styles/Action.css.js @@ -1,5 +1,4 @@ -// @flow -import baseStyles from '../../../styles/resets/baseStyles.css.js' +import baseStyles from '../../../styles/resets/baseStyles.css' import { getColor } from '../../../styles/utilities/color' const css = ` diff --git a/src/components/Message/styles/Attachment.css.js b/src/components/Message/styles/Attachment.css.js index 785bed719..4a7021464 100644 --- a/src/components/Message/styles/Attachment.css.js +++ b/src/components/Message/styles/Attachment.css.js @@ -1,5 +1,4 @@ -// @flow -import baseStyles from '../../../styles/resets/baseStyles.css.js' +import baseStyles from '../../../styles/resets/baseStyles.css' export const TextCSS = ` ${baseStyles} diff --git a/src/components/Message/styles/Bubble.css.js b/src/components/Message/styles/Bubble.css.js index 79992c3dd..51e36320f 100644 --- a/src/components/Message/styles/Bubble.css.js +++ b/src/components/Message/styles/Bubble.css.js @@ -1,6 +1,5 @@ -// @flow import { getColor } from '../../../styles/utilities/color' -import baseStyles from '../../../styles/resets/baseStyles.css.js' +import baseStyles from '../../../styles/resets/baseStyles.css' import variableFontSize from '../../../styles/utilities/variableFontSize' import { BEM } from '../../../utilities/classNames' diff --git a/src/components/Message/styles/Chat.css.js b/src/components/Message/styles/Chat.css.js index 614b78a7c..817ccf5cd 100644 --- a/src/components/Message/styles/Chat.css.js +++ b/src/components/Message/styles/Chat.css.js @@ -1,6 +1,5 @@ -// @flow -import baseStyles from '../../../styles/resets/baseStyles.css.js' -import { config as BubbleConfig } from './Bubble.css.js' +import baseStyles from '../../../styles/resets/baseStyles.css' +import { config as BubbleConfig } from './Bubble.css' import { BEM } from '../../../utilities/classNames' const bem = BEM('.c-MessageChat') diff --git a/src/components/Message/styles/ChatBlock.css.js b/src/components/Message/styles/ChatBlock.css.js index db6c8b7c4..d5f7c5a44 100644 --- a/src/components/Message/styles/ChatBlock.css.js +++ b/src/components/Message/styles/ChatBlock.css.js @@ -1,4 +1,4 @@ -import baseStyles from '../../../styles/resets/baseStyles.css.js' +import baseStyles from '../../../styles/resets/baseStyles.css' import { BEM } from '../../../utilities/classNames' const bem = BEM('.c-MessageChatBlock') diff --git a/src/components/Message/styles/Embed.css.js b/src/components/Message/styles/Embed.css.js index 653a62f3f..a12579908 100644 --- a/src/components/Message/styles/Embed.css.js +++ b/src/components/Message/styles/Embed.css.js @@ -1,8 +1,7 @@ -// @flow -import baseStyles from '../../../styles/resets/baseStyles.css.js' +import baseStyles from '../../../styles/resets/baseStyles.css' import { BEM } from '../../../utilities/classNames' import { getColor } from '../../../styles/utilities/color' -import { noteBoxShadow } from '../../../styles/mixins/noteStyles.css.js' +import { noteBoxShadow } from '../../../styles/mixins/noteStyles.css' const config = { embedBorderRadius: '3px', diff --git a/src/components/Message/styles/Message.css.js b/src/components/Message/styles/Message.css.js index e34786c05..b0cd88745 100644 --- a/src/components/Message/styles/Message.css.js +++ b/src/components/Message/styles/Message.css.js @@ -1,4 +1,4 @@ -import baseStyles from '../../../styles/resets/baseStyles.css.js' +import baseStyles from '../../../styles/resets/baseStyles.css' import { BEM } from '../../../utilities/classNames' const bem = BEM('.c-Message') diff --git a/src/components/Message/types.js b/src/components/Message/types.js deleted file mode 100644 index 071285959..000000000 --- a/src/components/Message/types.js +++ /dev/null @@ -1,43 +0,0 @@ -// @flow -export type MessageType = 'action' | 'message' | '' - -export type Message = { - children?: any, - className?: string, - from?: any, - isNote?: boolean, - ltr?: boolean, - rtl?: boolean, - to?: any, - type?: MessageType, -} - -export type MessageChat = Message & { - read?: boolean, - timestamp?: string -} - -export type MessageBubbleSize = -| 'md' -| 'sm' -| '' - -export type MessageBubble = MessageChat & { - body?: string, - icon?: string, - isNote?: boolean, - primary?: boolean, - title?: string, - size?: MessageBubbleSize, - typing?: boolean, -} - -export type MessageTheme = -| 'admin' -| 'embed' -| 'notifications' -| '' - -export type MessageThemeContext = { - theme: MessageTheme -} diff --git a/src/components/Modal/Body.js b/src/components/Modal/Modal.Body.tsx similarity index 81% rename from src/components/Modal/Body.js rename to src/components/Modal/Modal.Body.tsx index 45feb64f2..ed4bcbc40 100644 --- a/src/components/Modal/Body.js +++ b/src/components/Modal/Modal.Body.tsx @@ -1,25 +1,14 @@ -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import Scrollable from '../Scrollable' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' import { noop } from '../../utilities/other' -import { COMPONENT_KEY } from './utils' -import { BodyUI } from './styles/Body.css.js' +import { COMPONENT_KEY } from './Modal.utils' +import { BodyUI } from './styles/Modal.Body.css' +import { ModalBodyProps } from './Modal.types' -type Props = { - children?: any, - className?: string, - innerRef: (node: HTMLElement) => void, - isSeamless: boolean, - onScroll: (event: Event) => void, - scrollable: boolean, - scrollableRef: Function, - scrollFade: boolean, -} - -class Body extends Component { +class Body extends React.PureComponent { static defaultProps = { innerRef: noop, isSeamless: false, @@ -34,7 +23,7 @@ class Body extends Component { } node: HTMLElement - scrollableNode: ?HTMLElement + scrollableNode: HTMLElement | null componentDidMount() { this.positionCloseNode() diff --git a/src/components/Modal/Content.js b/src/components/Modal/Modal.Content.tsx similarity index 73% rename from src/components/Modal/Content.js rename to src/components/Modal/Modal.Content.tsx index bb31ced33..f3188e474 100644 --- a/src/components/Modal/Content.js +++ b/src/components/Modal/Modal.Content.tsx @@ -1,18 +1,12 @@ -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import { classNames } from '../../utilities/classNames' import { namespaceComponent, isComponentNamed } from '../../utilities/component' import { noop } from '../../utilities/other' -import { COMPONENT_KEY } from './utils' -import { ContentUI } from './styles/Content.css.js' +import { COMPONENT_KEY } from './Modal.utils' +import { ContentUI } from './styles/Modal.Content.css' +import { ModalContentProps } from './Modal.types' -type Props = { - children?: any, - className?: string, - scrollableRef: (node: HTMLElement) => void, -} - -class Content extends Component { +class Content extends React.PureComponent { static defaultProps = { scrollableRef: noop, } diff --git a/src/components/Modal/Footer.js b/src/components/Modal/Modal.Footer.tsx similarity index 60% rename from src/components/Modal/Footer.js rename to src/components/Modal/Modal.Footer.tsx index f115478df..7b3ddaccf 100644 --- a/src/components/Modal/Footer.js +++ b/src/components/Modal/Modal.Footer.tsx @@ -1,20 +1,11 @@ -// @flow -import type { ToolbarSize } from '../Toolbar/types' -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' -import { FooterUI } from './styles/Footer.css.js' +import { COMPONENT_KEY } from './Modal.utils' +import { FooterUI } from './styles/Modal.Footer.css' +import { ModalFooterProps } from './Modal.types' -type Props = { - children?: any, - className?: string, - seamless: boolean, - shadow: boolean, - size: ToolbarSize, -} - -class Footer extends Component { +class Footer extends React.PureComponent { static defaultProps = { seamless: false, shadow: false, diff --git a/src/components/Modal/Header.js b/src/components/Modal/Modal.Header.tsx similarity index 60% rename from src/components/Modal/Header.js rename to src/components/Modal/Modal.Header.tsx index 91e116f60..077e62615 100644 --- a/src/components/Modal/Header.js +++ b/src/components/Modal/Modal.Header.tsx @@ -1,20 +1,11 @@ -// @flow -import type { ToolbarSize } from '../Toolbar/types' -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' -import { HeaderUI } from './styles/Header.css.js' +import { COMPONENT_KEY } from './Modal.utils' +import { HeaderUI } from './styles/Modal.Header.css' +import { ModalHeaderProps } from './Modal.types' -type Props = { - children?: any, - className?: string, - seamless: boolean, - shadow: boolean, - size: ToolbarSize, -} - -class Header extends Component { +class Header extends React.PureComponent { static defaultProps = { seamless: false, shadow: false, diff --git a/src/components/Modal/Overlay.js b/src/components/Modal/Modal.Overlay.tsx similarity index 77% rename from src/components/Modal/Overlay.js rename to src/components/Modal/Modal.Overlay.tsx index 9dd50cdd2..6d9dcbef4 100644 --- a/src/components/Modal/Overlay.js +++ b/src/components/Modal/Modal.Overlay.tsx @@ -1,25 +1,14 @@ -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import Animate from '../Animate' import BaseOverlay from '../Overlay' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' import { noop } from '../../utilities/other' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Modal.utils' +import { ModalOverlayProps } from './Modal.types' -type Props = { - children?: any, - className?: string, - onClick: () => void, - isOpen: boolean, - overlayAnimationDelay: number, - overlayAnimationDuration: number, - overlayAnimationEasing: string, - overlayAnimationSequence: any, -} - -class Overlay extends Component { +class Overlay extends React.PureComponent { static defaultProps = { onClick: noop, isOpen: true, diff --git a/src/components/Modal/Modal.js b/src/components/Modal/Modal.tsx similarity index 83% rename from src/components/Modal/Modal.js rename to src/components/Modal/Modal.tsx index 1b531adc2..3a35dde19 100644 --- a/src/components/Modal/Modal.js +++ b/src/components/Modal/Modal.tsx @@ -1,64 +1,31 @@ -// @flow -import type { PortalProps } from '../Portal/types' -import React, { PureComponent as Component } from 'react' -import ReactDOM from 'react-dom' -import PropTypes from 'prop-types' +import * as React from 'react' +import * as ReactDOM from 'react-dom' import getValidProps from '@helpscout/react-utils/dist/getValidProps' -import Body from './Body' -import Content from './Content' -import Footer from './Footer' -import Header from './Header' -import Overlay from './Overlay' +import Body from './Modal.Body' +import Content from './Modal.Content' +import Footer from './Modal.Footer' +import Header from './Modal.Header' +import Overlay from './Modal.Overlay' import CloseButton from '../CloseButton' import EventListener from '../EventListener' import KeypressListener from '../KeypressListener' import PortalWrapper from '../PortalWrapper' -import { isHSApp } from '../PropProvider/utils' +import { isHSApp } from '../PropProvider/PropProvider.utils' import Keys from '../../constants/Keys' import { classNames } from '../../utilities/classNames' import { isComponentNamed } from '../../utilities/component' import { noop } from '../../utilities/other' import { findFocusableNodes } from '../../utilities/focus' import { getClosestDocument, isNodeElement } from '../../utilities/node' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Modal.utils' import { ModalUI, InnerWrapperUI, AnimatedCardContainerUI, CardUI, CloseUI, -} from './styles/Modal.css.js' - -type Props = PortalProps & { - cardClassName?: string, - children?: any, - className?: string, - closeIcon: boolean, - closeIconRepositionDelay: number, - closeIconOffset: number, - closePortal: () => void, - isOpen: boolean, - containTabKeyPress: boolean, - modalAnimationDelay: number, - modalAnimationDuration: number, - modalAnimationEasing: string, - modalAnimationSequence: number | string, - modalFocusTimeout: number, - overlayAnimationDelay: number, - overlayAnimationDuration: number, - overlayAnimationEasing: string, - overlayAnimationSequence: number | string, - overlayClassName?: string, - portalIsOpen: boolean, - seamless: boolean, - style: Object, - trigger?: any, - timeout: number, - wrapperClassName?: string, - zIndex: number, -} - -type KeyboardEvent = SyntheticEvent +} from './styles/Modal.css' +import { ModalProps } from './Modal.types' const modalBaseZIndex = 1040 const portalOptions = { @@ -66,7 +33,7 @@ const portalOptions = { zIndex: modalBaseZIndex, } -class Modal extends Component { +class Modal extends React.PureComponent { static defaultProps = { closeIcon: true, closePortal: noop, @@ -91,8 +58,9 @@ class Modal extends Component { wrapperClassName: 'c-ModalWrapper', zIndex: 1, } + static childContextTypes = { - positionCloseNode: PropTypes.func, + positionCloseNode: noop, } static Body = Body @@ -103,7 +71,7 @@ class Modal extends Component { documentNode: HTMLElement cardNode: HTMLElement - closeNode: ?HTMLElement + closeNode: HTMLElement scrollableNode: HTMLElement componentWillMount() { @@ -129,7 +97,7 @@ class Modal extends Component { const { containTabKeyPress } = this.props if (!containTabKeyPress || !this.cardNode || !this.documentNode) return - const focusableNodes = findFocusableNodes(this.cardNode, this.documentNode) + const focusableNodes = findFocusableNodes(this.cardNode) const focusedNodeIndex = this.getFocusNodeIndexFromEvent(event) if (focusedNodeIndex === focusableNodes.length - 1) { @@ -153,7 +121,7 @@ class Modal extends Component { if (!event || !this.cardNode || !this.documentNode) return 0 const focusedNode = event.target - const focusableNodes = findFocusableNodes(this.cardNode, this.documentNode) + const focusableNodes = findFocusableNodes(this.cardNode) const focusedNodeIndex = Array.prototype.indexOf.call( focusableNodes, focusedNode @@ -345,4 +313,6 @@ class Modal extends Component { } export const ModalComponent = Modal +// TODO: fix typescript complains +// @ts-ignore export default PortalWrapper(portalOptions)(Modal) diff --git a/src/components/Modal/Modal.types.ts b/src/components/Modal/Modal.types.ts new file mode 100644 index 000000000..fb1a76a20 --- /dev/null +++ b/src/components/Modal/Modal.types.ts @@ -0,0 +1,78 @@ +import { PortalProps } from '../Portal/Portal.types' +import { ToolbarSize } from '../Toolbar/Toolbar.types' + +export interface ModalProps extends PortalProps { + cardClassName?: string + children?: any + className?: string + closeIcon: boolean + forceClosePortal: () => void + closeIconRepositionDelay: number + closeIconOffset: number + closePortal: () => void + isOpen: boolean + containTabKeyPress: boolean + modalAnimationDelay: number + modalAnimationDuration: number + modalAnimationEasing: string + modalAnimationSequence: number | string + modalFocusTimeout: number + overlayAnimationDelay: number + overlayAnimationDuration: number + overlayAnimationEasing: string + overlayAnimationSequence: number | string + overlayClassName?: string + portalIsOpen: boolean + seamless: boolean + style: Object + trigger?: any + timeout: number + wrapperClassName?: string + zIndex: number +} + +type KeyboardEvent = Event + +export type ModalBodyProps = { + children?: any + className?: string + innerRef: (node: HTMLElement) => void + isSeamless: boolean + onScroll: (event: Event) => void + scrollable: boolean + scrollableRef: Function + scrollFade: boolean +} + +export type ModalContentProps = { + children?: any + className?: string + scrollableRef: (node: HTMLElement) => void +} + +export type ModalFooterProps = { + children?: any + className?: string + seamless: boolean + shadow: boolean + size: ToolbarSize +} + +export type ModalHeaderProps = { + children?: any + className?: string + seamless: boolean + shadow: boolean + size: ToolbarSize +} + +export type ModalOverlayProps = { + children?: any + className?: string + onClick: () => void + isOpen: boolean + overlayAnimationDelay: number + overlayAnimationDuration: number + overlayAnimationEasing: string + overlayAnimationSequence: any +} diff --git a/src/components/Modal/utils.js b/src/components/Modal/Modal.utils.ts similarity index 100% rename from src/components/Modal/utils.js rename to src/components/Modal/Modal.utils.ts diff --git a/src/components/Modal/__tests__/Body.test.js b/src/components/Modal/__tests__/Modal.Body.test.js similarity index 98% rename from src/components/Modal/__tests__/Body.test.js rename to src/components/Modal/__tests__/Modal.Body.test.js index 87e6a2e49..a5990c88f 100644 --- a/src/components/Modal/__tests__/Body.test.js +++ b/src/components/Modal/__tests__/Modal.Body.test.js @@ -1,6 +1,6 @@ import React, { PureComponent as Component } from 'react' import { mount } from 'enzyme' -import Body from '../Body' +import Body from '../Modal.Body' import { Scrollable } from '../../index' describe('ClassName', () => { diff --git a/src/components/Modal/__tests__/Content.test.js b/src/components/Modal/__tests__/Modal.Content.test.js similarity index 92% rename from src/components/Modal/__tests__/Content.test.js rename to src/components/Modal/__tests__/Modal.Content.test.js index bb2d59eee..d2abfd02b 100644 --- a/src/components/Modal/__tests__/Content.test.js +++ b/src/components/Modal/__tests__/Modal.Content.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import Content from '../Content' +import Content from '../Modal.Content' describe('ClassName', () => { test('Has default className', () => { diff --git a/src/components/Modal/__tests__/Footer.test.js b/src/components/Modal/__tests__/Modal.Footer.test.js similarity index 95% rename from src/components/Modal/__tests__/Footer.test.js rename to src/components/Modal/__tests__/Modal.Footer.test.js index 16f5cdbdc..d3b03330d 100644 --- a/src/components/Modal/__tests__/Footer.test.js +++ b/src/components/Modal/__tests__/Modal.Footer.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import Footer from '../Footer' +import Footer from '../Modal.Footer' import { Toolbar } from '../../index' describe('ClassName', () => { diff --git a/src/components/Modal/__tests__/Header.test.js b/src/components/Modal/__tests__/Modal.Header.test.js similarity index 95% rename from src/components/Modal/__tests__/Header.test.js rename to src/components/Modal/__tests__/Modal.Header.test.js index 92463a51d..cf9464cb6 100644 --- a/src/components/Modal/__tests__/Header.test.js +++ b/src/components/Modal/__tests__/Modal.Header.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import Header from '../Header' +import Header from '../Modal.Header' import { Toolbar } from '../../index' describe('ClassName', () => { diff --git a/src/components/Modal/__tests__/Modal.integration.test.js b/src/components/Modal/__tests__/Modal.integration.test.js index b4b6a2557..48d42062f 100644 --- a/src/components/Modal/__tests__/Modal.integration.test.js +++ b/src/components/Modal/__tests__/Modal.integration.test.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import { cy } from '@helpscout/cyan' import Button from '../../Button' import Modal from '../index' diff --git a/src/components/Modal/__tests__/Modal.test.js b/src/components/Modal/__tests__/Modal.test.js index 612b741af..7d5b5ef64 100644 --- a/src/components/Modal/__tests__/Modal.test.js +++ b/src/components/Modal/__tests__/Modal.test.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' import { MemoryRouter as Router } from 'react-router' import { default as Modal, ModalComponent } from '../Modal' diff --git a/src/components/Modal/index.js b/src/components/Modal/index.ts similarity index 90% rename from src/components/Modal/index.js rename to src/components/Modal/index.ts index 0695a58a8..9d0cb7c8d 100644 --- a/src/components/Modal/index.js +++ b/src/components/Modal/index.ts @@ -1,7 +1,6 @@ -// @flow import { propConnect } from '../PropProvider' import Modal from './Modal' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Modal.utils' Modal.Body = propConnect(COMPONENT_KEY.Body)(Modal.Body) Modal.Content = propConnect(COMPONENT_KEY.Content)(Modal.Content) diff --git a/src/components/Modal/styles/Body.css.js b/src/components/Modal/styles/Modal.Body.css.js similarity index 98% rename from src/components/Modal/styles/Body.css.js rename to src/components/Modal/styles/Modal.Body.css.js index 62a6edd6e..b5ed0f4a0 100644 --- a/src/components/Modal/styles/Body.css.js +++ b/src/components/Modal/styles/Modal.Body.css.js @@ -1,4 +1,3 @@ -// @flow import styled from '../../styled' import { BEM } from '../../../utilities/classNames' import baseStyles from '../../../styles/resets/baseStyles.css.js' diff --git a/src/components/Modal/styles/Content.css.js b/src/components/Modal/styles/Modal.Content.css.js similarity index 96% rename from src/components/Modal/styles/Content.css.js rename to src/components/Modal/styles/Modal.Content.css.js index bdbe78aac..7f2ecb55f 100644 --- a/src/components/Modal/styles/Content.css.js +++ b/src/components/Modal/styles/Modal.Content.css.js @@ -1,4 +1,3 @@ -// @flow import styled from '../../styled' import baseStyles from '../../../styles/resets/baseStyles.css.js' diff --git a/src/components/Modal/styles/Footer.css.js b/src/components/Modal/styles/Modal.Footer.css.js similarity index 95% rename from src/components/Modal/styles/Footer.css.js rename to src/components/Modal/styles/Modal.Footer.css.js index 7457ef5d1..a962d2da7 100644 --- a/src/components/Modal/styles/Footer.css.js +++ b/src/components/Modal/styles/Modal.Footer.css.js @@ -1,4 +1,3 @@ -// @flow import Toolbar from '../../Toolbar' import styled from '../../styled' diff --git a/src/components/Modal/styles/Header.css.js b/src/components/Modal/styles/Modal.Header.css.js similarity index 95% rename from src/components/Modal/styles/Header.css.js rename to src/components/Modal/styles/Modal.Header.css.js index f45583dba..75326c7c3 100644 --- a/src/components/Modal/styles/Header.css.js +++ b/src/components/Modal/styles/Modal.Header.css.js @@ -1,4 +1,3 @@ -// @flow import Toolbar from '../../Toolbar' import styled from '../../styled' diff --git a/src/components/Modal/styles/Modal.css.js b/src/components/Modal/styles/Modal.css.js index 0950330f2..d8dbb46c0 100644 --- a/src/components/Modal/styles/Modal.css.js +++ b/src/components/Modal/styles/Modal.css.js @@ -1,4 +1,3 @@ -// @flow import styled from '../../styled' import { isHSApp } from '../../../styles/utilities/theme' import Animate from '../../Animate' @@ -68,7 +67,7 @@ export const CloseUI = styled('div')` z-index: 3; ` -function makeHSAppInnerWrapperStyles(props: Object): string { +function makeHSAppInnerWrapperStyles(props) { if (!isHSApp(props)) return '' return ` diff --git a/src/components/Nav/Nav.Item.tsx b/src/components/Nav/Nav.Item.tsx index 0222f5c16..d6dcee64e 100644 --- a/src/components/Nav/Nav.Item.tsx +++ b/src/components/Nav/Nav.Item.tsx @@ -14,7 +14,7 @@ import { TitleUI, IndicatorUI, ErrorWrapperUI, -} from './Nav.css' +} from './styles/Nav.css' import { ITEM_COMPONENT_KEY } from './Nav.utils' export interface Props { diff --git a/src/components/Nav/Nav.tsx b/src/components/Nav/Nav.tsx index 8473bd15d..518ff3a05 100644 --- a/src/components/Nav/Nav.tsx +++ b/src/components/Nav/Nav.tsx @@ -4,7 +4,7 @@ import getValidProps from '@helpscout/react-utils/dist/getValidProps' import Item from './Nav.Item' import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' -import { NavUI, ListUI } from './Nav.css' +import { NavUI, ListUI } from './styles/Nav.css' import { COMPONENT_KEY } from './Nav.utils' export interface Props { diff --git a/src/components/Nav/Nav.css.ts b/src/components/Nav/styles/Nav.css.ts similarity index 88% rename from src/components/Nav/Nav.css.ts rename to src/components/Nav/styles/Nav.css.ts index bb7ab0031..01c8fa30a 100644 --- a/src/components/Nav/Nav.css.ts +++ b/src/components/Nav/styles/Nav.css.ts @@ -1,8 +1,8 @@ -import styled from '../styled' -import Flexy from '../Flexy' -import Text from '../Text' -import { getColor } from '../../styles/utilities/color' -import baseStyles from '../../styles/resets/baseStyles.css' +import styled from '../../styled' +import Flexy from '../../Flexy' +import Text from '../../Text' +import { getColor } from '../../../styles/utilities/color' +import baseStyles from '../../../styles/resets/baseStyles.css' export const config = { indicatorTransition: 'opacity 100ms ease', diff --git a/src/components/Notification/Timer.tsx b/src/components/Notification/Notification.Timer.tsx similarity index 95% rename from src/components/Notification/Timer.tsx rename to src/components/Notification/Notification.Timer.tsx index b446497e9..61d042671 100644 --- a/src/components/Notification/Timer.tsx +++ b/src/components/Notification/Notification.Timer.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' -import { TimerUI } from './Notification.css' +import { TimerUI } from './styles/Notification.css' export interface Props { className?: string diff --git a/src/components/Notification/Notification.tsx b/src/components/Notification/Notification.tsx index 106d5cc87..0665aee12 100644 --- a/src/components/Notification/Notification.tsx +++ b/src/components/Notification/Notification.tsx @@ -5,13 +5,13 @@ import Flexy from '../Flexy' import Message from '../Message' import Text from '../Text' import Truncate from '../Truncate' -import Timer from './Timer' -import { NotificationUI, TextUI } from './Notification.css' +import Timer from './Notification.Timer' +import { NotificationUI, TextUI } from './styles/Notification.css' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' import { noop } from '../../utilities/other' import { stripUrlPrefix } from '../../utilities/strings' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Notification.utils' export const NOTIFICATION_TYPE = { image: 'image', diff --git a/src/components/Notification/utils.ts b/src/components/Notification/Notification.utils.ts similarity index 100% rename from src/components/Notification/utils.ts rename to src/components/Notification/Notification.utils.ts diff --git a/src/components/Notification/__tests__/Timer.test.js b/src/components/Notification/__tests__/Notification.Timer.test.js similarity index 97% rename from src/components/Notification/__tests__/Timer.test.js rename to src/components/Notification/__tests__/Notification.Timer.test.js index 174f5060d..85bd05ce8 100644 --- a/src/components/Notification/__tests__/Timer.test.js +++ b/src/components/Notification/__tests__/Notification.Timer.test.js @@ -1,6 +1,6 @@ import React from 'react' import { shallow } from 'enzyme' -import Timer from '../Timer' +import Timer from '../Notification.Timer' describe('ClassName', () => { test('Has default className', () => { diff --git a/src/components/Notification/Notification.css.js b/src/components/Notification/styles/Notification.css.js similarity index 93% rename from src/components/Notification/Notification.css.js rename to src/components/Notification/styles/Notification.css.js index 6e2b212d0..b9a145092 100644 --- a/src/components/Notification/Notification.css.js +++ b/src/components/Notification/styles/Notification.css.js @@ -1,8 +1,8 @@ -import styled from '../styled' -import Animate from '../Animate' -import Text from '../Text' -import baseStyles from '../../styles/resets/baseStyles.css.js' -import { getColor, rgba } from '../../styles/utilities/color' +import styled from '../../styled' +import Animate from '../../Animate' +import Text from '../../Text' +import baseStyles from '../../../styles/resets/baseStyles.css.js' +import { getColor, rgba } from '../../../styles/utilities/color' export const config = { borderRadius: { diff --git a/src/components/NotificationStack/NotificationStack.tsx b/src/components/NotificationStack/NotificationStack.tsx index a6b940399..51d832718 100644 --- a/src/components/NotificationStack/NotificationStack.tsx +++ b/src/components/NotificationStack/NotificationStack.tsx @@ -4,9 +4,9 @@ import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { isComponentNamed, namespaceComponent } from '../../utilities/component' import { noop } from '../../utilities/other' -import { COMPONENT_KEY as NOTIFICATION } from '../Notification/utils' -import { NotificationStackUI } from './NotificationStack.css' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY as NOTIFICATION } from '../Notification/Notification.utils' +import { NotificationStackUI } from './styles/NotificationStack.css' +import { COMPONENT_KEY } from './NotificationStack.utils' export interface Props { autoDismiss: boolean diff --git a/src/components/NotificationStack/utils.ts b/src/components/NotificationStack/NotificationStack.utils.ts similarity index 100% rename from src/components/NotificationStack/utils.ts rename to src/components/NotificationStack/NotificationStack.utils.ts diff --git a/src/components/NotificationStack/NotificationStack.css.js b/src/components/NotificationStack/styles/NotificationStack.css.js similarity index 53% rename from src/components/NotificationStack/NotificationStack.css.js rename to src/components/NotificationStack/styles/NotificationStack.css.js index d5db5fe6f..44c783dd2 100644 --- a/src/components/NotificationStack/NotificationStack.css.js +++ b/src/components/NotificationStack/styles/NotificationStack.css.js @@ -1,5 +1,5 @@ -import styled from '../styled' -import baseStyles from '../../styles/resets/baseStyles.css.js' +import styled from '../../styled' +import baseStyles from '../../../styles/resets/baseStyles.css.js' export const NotificationStackUI = styled('div')` ${baseStyles}; diff --git a/src/components/OptionIcon/OptionIcon.js b/src/components/OptionIcon/OptionIcon.tsx similarity index 73% rename from src/components/OptionIcon/OptionIcon.js rename to src/components/OptionIcon/OptionIcon.tsx index a3e9fc384..0f10549a4 100644 --- a/src/components/OptionIcon/OptionIcon.js +++ b/src/components/OptionIcon/OptionIcon.tsx @@ -1,20 +1,19 @@ -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import Icon from '../Icon' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { OptionIconUI } from './styles/OptionIcon.css.js' -import { COMPONENT_KEY } from './utils' +import { OptionIconUI } from './styles/OptionIcon.css' +import { COMPONENT_KEY } from './OptionIcon.utils' type Props = { - children?: any, - className?: string, - icon: string, - title?: string, + children?: any + className?: string + icon: string + title?: string } -class OptionIcon extends Component { +class OptionIcon extends React.PureComponent { static defaultProps = { icon: 'chat', } diff --git a/src/components/OptionIcon/utils.js b/src/components/OptionIcon/OptionIcon.utils.ts similarity index 100% rename from src/components/OptionIcon/utils.js rename to src/components/OptionIcon/OptionIcon.utils.ts diff --git a/src/components/OptionIcon/index.js b/src/components/OptionIcon/index.ts similarity index 93% rename from src/components/OptionIcon/index.js rename to src/components/OptionIcon/index.ts index ca6f2824d..2d1236f6d 100644 --- a/src/components/OptionIcon/index.js +++ b/src/components/OptionIcon/index.ts @@ -1,4 +1,3 @@ -// @flow import { propConnect } from '../PropProvider' import OptionIcon from './OptionIcon' diff --git a/src/components/OptionIcon/styles/OptionIcon.css.js b/src/components/OptionIcon/styles/OptionIcon.css.js index dde689142..d317508bf 100644 --- a/src/components/OptionIcon/styles/OptionIcon.css.js +++ b/src/components/OptionIcon/styles/OptionIcon.css.js @@ -1,4 +1,3 @@ -// @flow import baseStyles from '../../../styles/resets/baseStyles.css.js' import { getColor, getThemeBrandProp } from '../../../styles/utilities/color' import styled from '../../styled' diff --git a/src/components/OptionTile/Container.js b/src/components/OptionTile/Container.js deleted file mode 100644 index e8224f36f..000000000 --- a/src/components/OptionTile/Container.js +++ /dev/null @@ -1,4 +0,0 @@ -// @flow -import Container from '../FluffyCard/Container' - -export default Container diff --git a/src/components/OptionTile/OptionTile.Container.tsx b/src/components/OptionTile/OptionTile.Container.tsx new file mode 100644 index 000000000..37703f976 --- /dev/null +++ b/src/components/OptionTile/OptionTile.Container.tsx @@ -0,0 +1,3 @@ +import Container from '../FluffyCard/FluffyCard.Container' + +export default Container diff --git a/src/components/OptionTile/OptionTile.js b/src/components/OptionTile/OptionTile.tsx similarity index 79% rename from src/components/OptionTile/OptionTile.js rename to src/components/OptionTile/OptionTile.tsx index 11e5d58fa..6c21c900d 100644 --- a/src/components/OptionTile/OptionTile.js +++ b/src/components/OptionTile/OptionTile.tsx @@ -1,6 +1,5 @@ -// @flow -import React, { PureComponent as Component } from 'react' -import Container from './Container' +import * as React from 'react' +import Container from './OptionTile.Container' import Centralize from '../Centralize' import Text from '../Text' import { classNames } from '../../utilities/classNames' @@ -10,25 +9,12 @@ import { HeaderUI, ContentUI, TitleUI, -} from './styles/OptionTile.css.js' -import { COMPONENT_KEY } from './utils' +} from './styles/OptionTile.css' +import { COMPONENT_KEY } from './OptionTile.utils' import OptionIcon from '../OptionIcon' +import { OptionTileProps } from './OptionTile.types' -type Props = { - children?: any, - className?: string, - href?: string, - icon: string, - iconTitle?: string, - minHeight?: number | string, - to?: string, - title?: string, - style?: Object, - subtitle?: string, - textAlign: string, -} - -class OptionTile extends Component { +class OptionTile extends React.PureComponent { static defaultProps = { icon: 'chat', title: 'Title', diff --git a/src/components/OptionTile/OptionTile.types.ts b/src/components/OptionTile/OptionTile.types.ts new file mode 100644 index 000000000..9a6e76c0e --- /dev/null +++ b/src/components/OptionTile/OptionTile.types.ts @@ -0,0 +1,13 @@ +export type OptionTileProps = { + children?: any + className?: string + href?: string + icon: string + iconTitle?: string + minHeight?: number | string + to?: string + title?: string + style?: Object + subtitle?: string + textAlign: string +} diff --git a/src/components/OptionTile/utils.js b/src/components/OptionTile/OptionTile.utils.ts similarity index 100% rename from src/components/OptionTile/utils.js rename to src/components/OptionTile/OptionTile.utils.ts diff --git a/src/components/OptionTile/index.js b/src/components/OptionTile/index.ts similarity index 93% rename from src/components/OptionTile/index.js rename to src/components/OptionTile/index.ts index 0863b4b25..ff01f74a3 100644 --- a/src/components/OptionTile/index.js +++ b/src/components/OptionTile/index.ts @@ -1,4 +1,3 @@ -// @flow import { propConnect } from '../PropProvider' import OptionTile from './OptionTile' diff --git a/src/components/OptionTile/styles/OptionTile.css.js b/src/components/OptionTile/styles/OptionTile.css.js index 698a552f0..b33833ff4 100644 --- a/src/components/OptionTile/styles/OptionTile.css.js +++ b/src/components/OptionTile/styles/OptionTile.css.js @@ -1,4 +1,3 @@ -// @flow import FluffyCard from '../../FluffyCard' import styled from '../../styled' diff --git a/src/components/Overflow/index.js b/src/components/Overflow/Overflow.tsx similarity index 82% rename from src/components/Overflow/index.js rename to src/components/Overflow/Overflow.tsx index d8b0d7d70..13c4415c4 100644 --- a/src/components/Overflow/index.js +++ b/src/components/Overflow/Overflow.tsx @@ -1,6 +1,5 @@ -// @flow -import React, { PureComponent as Component } from 'react' -import ReactDOM from 'react-dom' +import * as React from 'react' +import * as ReactDOM from 'react-dom' import EventListener from '../EventListener' import styled from '../styled' import { classNames } from '../../utilities/classNames' @@ -12,28 +11,28 @@ import { getFadeRightStyles, } from '../../utilities/scrollFade' import { noop, requestAnimationFrame } from '../../utilities/other' -import css from './styles/Overflow.css.js' +import css from './styles/Overflow.css' type Props = { - backgroundColor?: string, - className?: string, - children?: any, - refApplyFade: (() => void) => void, - refScrollToEnd: (() => void) => void, - initialHeightAdjustDelay?: number, - isScrollable?: boolean, - onScroll: (event: Event) => void, - onWheel: (event: SyntheticWheelEvent) => void, - remapScrollDirections: boolean, - scrollableRef: (ref: ?HTMLElement) => void, - scrollOnClickFade: boolean, + backgroundColor?: string + className?: string + children?: any + refApplyFade: (...args: any[]) => void + refScrollToEnd: (...args: any[]) => void + initialHeightAdjustDelay?: number + isScrollable?: boolean + onScroll: (event: Event) => void + onWheel: (event: Event) => void + remapScrollDirections: boolean + scrollableRef: (ref?: HTMLElement) => void + scrollOnClickFade: boolean } type State = { - shouldFadeOnMount: boolean, + shouldFadeOnMount: boolean } -export class Overflow extends Component { +export class Overflow extends React.PureComponent { static defaultProps = { initialHeightAdjustDelay: 30, isScrollable: true, @@ -52,10 +51,10 @@ export class Overflow extends Component { _isMounted: boolean = false faderSize: number = 32 - faderNodeLeft: ?HTMLElement - faderNodeRight: ?HTMLElement - containerNode: HTMLElement - node: ?HTMLElement = null + faderNodeLeft: HTMLElement | null + faderNodeRight: HTMLElement | null + containerNode: HTMLElement | null + node: Element | Text | null scrollAmount = 0.7 smoothScrollDuration = 200 @@ -73,7 +72,7 @@ export class Overflow extends Component { setNodes = () => { if (this.node || !this._isMounted) return - // $FlowFixMe + this.node = ReactDOM.findDOMNode(this) } @@ -86,7 +85,7 @@ export class Overflow extends Component { if (!this._isMounted || !this.node) return const containerNode = this.containerNode - const height = containerNode.clientHeight + const height = containerNode && containerNode.clientHeight const heightOffset = 20 this.setState({ @@ -96,7 +95,8 @@ export class Overflow extends Component { /* istanbul ignore next */ // JSDOM does not provide node.clientHeight, which prevents // us from testing this calculation - // $FlowFixMe + // TODO: fix typescript complains + // @ts-ignore this.node.style.height = height ? `${height - heightOffset}px` : null } @@ -110,14 +110,16 @@ export class Overflow extends Component { const transformRight = getFadeRightStyles(event, offset) requestAnimationFrame(() => { - // $FlowFixMe + // TODO: fix typescript complains + // @ts-ignore this.faderNodeLeft.style.transform = transformLeft - // $FlowFixMe + // TODO: fix typescript complains + // @ts-ignore this.faderNodeRight.style.transform = transformRight }) } - handleOnScroll = (event: Event) => { + handleOnScroll = event => { const { onScroll } = this.props this.applyFadeStyles(event) onScroll(event) @@ -142,7 +144,7 @@ export class Overflow extends Component { * @param {WheelEvent} event */ /* istanbul ignore next */ - remapScrollDirections = (event: SyntheticWheelEvent) => { + remapScrollDirections = event => { /* istanbul ignore next */ if (this.props.remapScrollDirections) { remapScrollingPlane(event) @@ -156,7 +158,11 @@ export class Overflow extends Component { scrollLeft = () => { if (!this.props.scrollOnClickFade) return + // TODO: fix typescript complains + // @ts-ignore const currentScrollAmount = this.containerNode.scrollLeft + // TODO: fix typescript complains + // @ts-ignore const scrollAmount = this.containerNode.clientWidth * this.scrollAmount const scrollValue = currentScrollAmount - scrollAmount @@ -169,7 +175,11 @@ export class Overflow extends Component { scrollRight = () => { if (!this.props.scrollOnClickFade) return + // TODO: fix typescript complains + // @ts-ignore const currentScrollAmount = this.containerNode.scrollLeft + // TODO: fix typescript complains + // @ts-ignore const scrollAmount = this.containerNode.clientWidth * this.scrollAmount const scrollValue = currentScrollAmount + scrollAmount @@ -204,6 +214,7 @@ export class Overflow extends Component { position: amount, direction: 'x', duration: this.smoothScrollDuration, + callback: undefined, }) } @@ -220,6 +231,7 @@ export class Overflow extends Component { remapScrollDirections, scrollableRef, scrollOnClickFade, + onWheel, ...rest } = this.props diff --git a/src/components/Overflow/__tests__/Overflow.test.js b/src/components/Overflow/__tests__/Overflow.test.js index 55886d0b3..8a6376122 100644 --- a/src/components/Overflow/__tests__/Overflow.test.js +++ b/src/components/Overflow/__tests__/Overflow.test.js @@ -1,6 +1,6 @@ import React, { PureComponent as Component } from 'react' import { mount } from 'enzyme' -import { Overflow } from '..' +import { Overflow } from '../Overflow' jest.useFakeTimers() diff --git a/src/components/Overflow/index.ts b/src/components/Overflow/index.ts new file mode 100644 index 000000000..ca3092374 --- /dev/null +++ b/src/components/Overflow/index.ts @@ -0,0 +1,3 @@ +import Overflow from './Overflow' + +export default Overflow diff --git a/src/components/Overlay/Overlay.js b/src/components/Overlay/Overlay.tsx similarity index 67% rename from src/components/Overlay/Overlay.js rename to src/components/Overlay/Overlay.tsx index 5400de3c8..515ddfa8c 100644 --- a/src/components/Overlay/Overlay.js +++ b/src/components/Overlay/Overlay.tsx @@ -1,19 +1,19 @@ -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' +import propConnect from '../PropProvider/propConnect' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' -import { OverlayUI } from './styles/Overlay.css.js' +import { COMPONENT_KEY } from './Overlay.utils' +import { OverlayUI } from './styles/Overlay.css' type Props = { - children?: any, - className?: string, - fixed: boolean, - transparent: boolean, + children?: any + className?: string + fixed: boolean + transparent: boolean } -class Overlay extends Component { +class Overlay extends React.PureComponent { static defaultProps = { fixed: false, transparent: false, @@ -43,4 +43,4 @@ class Overlay extends Component { namespaceComponent(COMPONENT_KEY)(Overlay) -export default Overlay +export default propConnect(COMPONENT_KEY)(Overlay) diff --git a/src/components/Overlay/utils.js b/src/components/Overlay/Overlay.utils.ts similarity index 100% rename from src/components/Overlay/utils.js rename to src/components/Overlay/Overlay.utils.ts diff --git a/src/components/Overlay/index.js b/src/components/Overlay/index.js deleted file mode 100644 index a3588562d..000000000 --- a/src/components/Overlay/index.js +++ /dev/null @@ -1,6 +0,0 @@ -// @flow -import { propConnect } from '../PropProvider' -import Overlay from './Overlay' -import { COMPONENT_KEY } from './utils' - -export default propConnect(COMPONENT_KEY)(Overlay) diff --git a/src/components/Overlay/index.ts b/src/components/Overlay/index.ts new file mode 100644 index 000000000..fe021e116 --- /dev/null +++ b/src/components/Overlay/index.ts @@ -0,0 +1,3 @@ +import Overlay from './Overlay' + +export default Overlay diff --git a/src/components/Overlay/styles/Overlay.css.js b/src/components/Overlay/styles/Overlay.css.js index 5805a4518..bfe488b9f 100644 --- a/src/components/Overlay/styles/Overlay.css.js +++ b/src/components/Overlay/styles/Overlay.css.js @@ -1,4 +1,3 @@ -// @flow import styled from '../../styled' import baseStyles from '../../../styles/resets/baseStyles.css.js' import { isHSApp } from '../../../styles/utilities/theme' @@ -36,7 +35,7 @@ export const OverlayUI = styled('div')` ${props => makeHSAppStyles(props)}; ` -function makeHSAppStyles(props: Object): string { +function makeHSAppStyles(props) { if (!isHSApp(props)) return '' return ` diff --git a/src/components/Page/Actions.tsx b/src/components/Page/Page.Actions.tsx similarity index 78% rename from src/components/Page/Actions.tsx rename to src/components/Page/Page.Actions.tsx index 76c490bb3..fc5e673a6 100644 --- a/src/components/Page/Actions.tsx +++ b/src/components/Page/Page.Actions.tsx @@ -1,20 +1,17 @@ -import { ActionsDirection } from './types' +import { ActionsDirection } from './Page.types' import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { ActionsUI, ActionsBlockUI, ActionsItemUI } from './styles/Actions.css' -import { COMPONENT_KEY } from './utils' +import { + ActionsUI, + ActionsBlockUI, + ActionsItemUI, +} from './styles/Page.Actions.css' +import { COMPONENT_KEY } from './Page.utils' +import { PageActionsProps } from './Page.types' -export interface Props { - className?: string - direction?: ActionsDirection - primary?: any - secondary?: any - serious?: any -} - -class Actions extends React.PureComponent { +class Actions extends React.PureComponent { static defaultProps = { direction: 'right', } diff --git a/src/components/Page/Card.tsx b/src/components/Page/Page.Card.tsx similarity index 73% rename from src/components/Page/Card.tsx rename to src/components/Page/Page.Card.tsx index 687aaea87..a113ff957 100644 --- a/src/components/Page/Card.tsx +++ b/src/components/Page/Page.Card.tsx @@ -2,15 +2,11 @@ import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { CardUI } from './styles/Card.css' -import { COMPONENT_KEY } from './utils' +import { CardUI } from './styles/Page.Card.css' +import { COMPONENT_KEY } from './Page.utils' +import { PageCardProps } from './Page.types' -export interface Props { - children?: any - className?: string -} - -class Card extends React.PureComponent { +class Card extends React.PureComponent { render() { const { children, className, ...rest } = this.props diff --git a/src/components/Page/Content.tsx b/src/components/Page/Page.Content.tsx similarity index 75% rename from src/components/Page/Content.tsx rename to src/components/Page/Page.Content.tsx index 82e4918b0..9ceff74f4 100644 --- a/src/components/Page/Content.tsx +++ b/src/components/Page/Page.Content.tsx @@ -2,16 +2,11 @@ import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { ContentUI } from './styles/Content.css' -import { COMPONENT_KEY } from './utils' +import { ContentUI } from './styles/Page.Content.css' +import { COMPONENT_KEY } from './Page.utils' +import { PageContentProps } from './Page.types' -export interface Props { - children?: any - className?: string - isResponsive: boolean -} - -class Content extends React.PureComponent { +class Content extends React.PureComponent { static defaultProps = { isResponsive: false, } diff --git a/src/components/Page/Header.tsx b/src/components/Page/Page.Header.tsx similarity index 83% rename from src/components/Page/Header.tsx rename to src/components/Page/Page.Header.tsx index 6cf730521..fe10068e7 100644 --- a/src/components/Page/Header.tsx +++ b/src/components/Page/Page.Header.tsx @@ -3,19 +3,14 @@ import getValidProps from '@helpscout/react-utils/dist/getValidProps' import Text from '../Text' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { HeaderUI, TitleUI, SubTitleUI, HeadingUI } from './styles/Header.css' -import { COMPONENT_KEY } from './utils' - -export interface Props { - children?: any - className?: string - isResponsive: boolean - render?: any - title?: string - subtitle?: string - withBorder: boolean - withBottomMargin: boolean -} +import { + HeaderUI, + TitleUI, + SubTitleUI, + HeadingUI, +} from './styles/Page.Header.css' +import { COMPONENT_KEY } from './Page.utils' +import { PageHeaderProps } from './Page.types' const Title = props => { const { headingLevel, isSecondary, className, children, ...rest } = props @@ -41,7 +36,7 @@ const Subtitle = ({ children }) => ( ) -class Header extends React.PureComponent { +class Header extends React.PureComponent { static defaultProps = { isResponsive: false, title: 'Title', diff --git a/src/components/Page/Section.tsx b/src/components/Page/Page.Section.tsx similarity index 72% rename from src/components/Page/Section.tsx rename to src/components/Page/Page.Section.tsx index 03860df77..fbcf5daf5 100644 --- a/src/components/Page/Section.tsx +++ b/src/components/Page/Page.Section.tsx @@ -1,16 +1,11 @@ import * as React from 'react' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Page.utils' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { SectionUI } from './styles/Section.css' +import { SectionUI } from './styles/Page.Section.css' +import { PageSectionProps } from './Page.types' -export interface Props { - children?: any - className?: string - isResponsive?: boolean -} - -class Section extends React.PureComponent { +class Section extends React.PureComponent { static defaultProps = { isResponsive: false, } diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx index a088e16ac..6046178ad 100644 --- a/src/components/Page/Page.tsx +++ b/src/components/Page/Page.tsx @@ -1,23 +1,18 @@ import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' -import Actions from './Actions' -import Card from './Card' -import Content from './Content' -import Header from './Header' -import Section from './Section' +import Actions from './Page.Actions' +import Card from './Page.Card' +import Content from './Page.Content' +import Header from './Page.Header' +import Section from './Page.Section' import PropProvider from '../PropProvider' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' import { PageUI } from './styles/Page.css' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Page.utils' +import { PageProps } from './Page.types' -export interface Props { - children?: any - className?: string - isResponsive: boolean -} - -class Page extends React.PureComponent { +class Page extends React.PureComponent { static defaultProps = { isResponsive: false, } diff --git a/src/components/Page/Page.types.ts b/src/components/Page/Page.types.ts new file mode 100644 index 000000000..707878113 --- /dev/null +++ b/src/components/Page/Page.types.ts @@ -0,0 +1,43 @@ +export type ActionsDirection = 'left' | 'right' + +export interface PageProps { + children?: any + className?: string + isResponsive: boolean +} + +export interface PageActionsProps { + className?: string + direction?: ActionsDirection + primary?: any + secondary?: any + serious?: any +} + +export interface PageCardProps { + children?: any + className?: string +} + +export interface PageContentProps { + children?: any + className?: string + isResponsive: boolean +} + +export interface PageHeaderProps { + children?: any + className?: string + isResponsive: boolean + render?: any + title?: string + subtitle?: string + withBorder: boolean + withBottomMargin: boolean +} + +export interface PageSectionProps { + children?: any + className?: string + isResponsive?: boolean +} diff --git a/src/components/Page/utils.ts b/src/components/Page/Page.utils.ts similarity index 100% rename from src/components/Page/utils.ts rename to src/components/Page/Page.utils.ts diff --git a/src/components/Page/__tests__/Actions.test.js b/src/components/Page/__tests__/Page.Actions.test.js similarity index 97% rename from src/components/Page/__tests__/Actions.test.js rename to src/components/Page/__tests__/Page.Actions.test.js index ca3b9338a..6ece10cd7 100644 --- a/src/components/Page/__tests__/Actions.test.js +++ b/src/components/Page/__tests__/Page.Actions.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import Actions from '../Actions' +import Actions from '../Page.Actions' describe('ClassName', () => { test('Has default className', () => { diff --git a/src/components/Page/__tests__/Card.test.js b/src/components/Page/__tests__/Page.Card.test.js similarity index 93% rename from src/components/Page/__tests__/Card.test.js rename to src/components/Page/__tests__/Page.Card.test.js index 24d1e5245..334e7d306 100644 --- a/src/components/Page/__tests__/Card.test.js +++ b/src/components/Page/__tests__/Page.Card.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import Card from '../Card' +import Card from '../Page.Card' describe('ClassName', () => { test('Has default className', () => { diff --git a/src/components/Page/__tests__/Content.test.js b/src/components/Page/__tests__/Page.Content.test.js similarity index 94% rename from src/components/Page/__tests__/Content.test.js rename to src/components/Page/__tests__/Page.Content.test.js index 3ecda8d6a..2c823ba11 100644 --- a/src/components/Page/__tests__/Content.test.js +++ b/src/components/Page/__tests__/Page.Content.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import Content from '../Content' +import Content from '../Page.Content' describe('ClassName', () => { test('Has default className', () => { diff --git a/src/components/Page/__tests__/Header.test.js b/src/components/Page/__tests__/Page.Header.test.js similarity index 98% rename from src/components/Page/__tests__/Header.test.js rename to src/components/Page/__tests__/Page.Header.test.js index 21f9c0603..996b6d3ef 100644 --- a/src/components/Page/__tests__/Header.test.js +++ b/src/components/Page/__tests__/Page.Header.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import Header from '../Header' +import Header from '../Page.Header' describe('ClassName', () => { test('Has default className', () => { diff --git a/src/components/Page/__tests__/Section.test.js b/src/components/Page/__tests__/Page.Section.test.js similarity index 94% rename from src/components/Page/__tests__/Section.test.js rename to src/components/Page/__tests__/Page.Section.test.js index 9c87bd33c..92a10d966 100644 --- a/src/components/Page/__tests__/Section.test.js +++ b/src/components/Page/__tests__/Page.Section.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import Section from '../Section' +import Section from '../Page.Section' describe('ClassName', () => { test('Has default className', () => { diff --git a/src/components/Page/__tests__/Page.test.js b/src/components/Page/__tests__/Page.test.js index 753373aad..717334b64 100644 --- a/src/components/Page/__tests__/Page.test.js +++ b/src/components/Page/__tests__/Page.test.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' import Page from '../Page' import ConnectedPage from '../index' diff --git a/src/components/Page/index.ts b/src/components/Page/index.ts index a98fc0abe..fa615812d 100644 --- a/src/components/Page/index.ts +++ b/src/components/Page/index.ts @@ -1,6 +1,6 @@ import { propConnect } from '../PropProvider' import Page from './Page' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Page.utils' Page.Actions = propConnect(COMPONENT_KEY.Actions)(Page.Actions) Page.Card = propConnect(COMPONENT_KEY.Card)(Page.Card) diff --git a/src/components/Page/styles/Actions.css.ts b/src/components/Page/styles/Page.Actions.css.ts similarity index 91% rename from src/components/Page/styles/Actions.css.ts rename to src/components/Page/styles/Page.Actions.css.ts index b916fc13a..3be4c00c4 100644 --- a/src/components/Page/styles/Actions.css.ts +++ b/src/components/Page/styles/Page.Actions.css.ts @@ -1,4 +1,4 @@ -import baseStyles from '../../../styles/resets/baseStyles.css.js' +import baseStyles from '../../../styles/resets/baseStyles.css' import styled from '../../styled' export const config = { diff --git a/src/components/Page/styles/Card.css.ts b/src/components/Page/styles/Page.Card.css.ts similarity index 95% rename from src/components/Page/styles/Card.css.ts rename to src/components/Page/styles/Page.Card.css.ts index d209fae23..9ec02d65e 100644 --- a/src/components/Page/styles/Card.css.ts +++ b/src/components/Page/styles/Page.Card.css.ts @@ -1,7 +1,7 @@ import styled from '../../styled' -import baseStyles from '../../../styles/resets/baseStyles.css.js' +import baseStyles from '../../../styles/resets/baseStyles.css' import { getColor } from '../../../styles/utilities/color' -import { breakpoint } from '../../../styles/mixins/breakpoints.css.js' +import { breakpoint } from '../../../styles/mixins/breakpoints.css' import PageConfig from './Page.config.css' export const config = { diff --git a/src/components/Page/styles/Content.css.ts b/src/components/Page/styles/Page.Content.css.ts similarity index 71% rename from src/components/Page/styles/Content.css.ts rename to src/components/Page/styles/Page.Content.css.ts index c8b745348..8f3b1318b 100644 --- a/src/components/Page/styles/Content.css.ts +++ b/src/components/Page/styles/Page.Content.css.ts @@ -1,5 +1,5 @@ import styled from '../../styled' -import baseStyles from '../../../styles/resets/baseStyles.css.js' +import baseStyles from '../../../styles/resets/baseStyles.css' export const ContentUI = styled('div')` ${baseStyles}; diff --git a/src/components/Page/styles/Header.css.ts b/src/components/Page/styles/Page.Header.css.ts similarity index 94% rename from src/components/Page/styles/Header.css.ts rename to src/components/Page/styles/Page.Header.css.ts index 4f6558b3c..a660ceb2a 100644 --- a/src/components/Page/styles/Header.css.ts +++ b/src/components/Page/styles/Page.Header.css.ts @@ -1,5 +1,5 @@ -import baseStyles from '../../../styles/resets/baseStyles.css.js' -import { breakpoint } from '../../../styles/mixins/breakpoints.css.js' +import baseStyles from '../../../styles/resets/baseStyles.css' +import { breakpoint } from '../../../styles/mixins/breakpoints.css' import styled from '../../styled' import PageConfig from './Page.config.css' import Heading from '../../Heading' diff --git a/src/components/Page/styles/Section.css.ts b/src/components/Page/styles/Page.Section.css.ts similarity index 91% rename from src/components/Page/styles/Section.css.ts rename to src/components/Page/styles/Page.Section.css.ts index c6de19f23..1e4b54add 100644 --- a/src/components/Page/styles/Section.css.ts +++ b/src/components/Page/styles/Page.Section.css.ts @@ -1,6 +1,6 @@ import styled from '../../styled' -import baseStyles from '../../../styles/resets/baseStyles.css.js' -import { breakpoint } from '../../../styles/mixins/breakpoints.css.js' +import baseStyles from '../../../styles/resets/baseStyles.css' +import { breakpoint } from '../../../styles/mixins/breakpoints.css' import PageConfig from './Page.config.css' export const config = { diff --git a/src/components/Page/styles/Page.css.ts b/src/components/Page/styles/Page.css.ts index 36cb0b02d..d0b1bcccf 100644 --- a/src/components/Page/styles/Page.css.ts +++ b/src/components/Page/styles/Page.css.ts @@ -1,5 +1,5 @@ -import baseStyles from '../../../styles/resets/baseStyles.css.js' -import { breakpoint } from '../../../styles/mixins/breakpoints.css.js' +import baseStyles from '../../../styles/resets/baseStyles.css' +import { breakpoint } from '../../../styles/mixins/breakpoints.css' import styled from '../../styled' import PageConfig from './Page.config.css' diff --git a/src/components/Page/types.ts b/src/components/Page/types.ts deleted file mode 100644 index aaa9fbcff..000000000 --- a/src/components/Page/types.ts +++ /dev/null @@ -1 +0,0 @@ -export type ActionsDirection = 'left' | 'right' diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx index 0ece95088..1eeed4fe6 100644 --- a/src/components/Pagination/Pagination.tsx +++ b/src/components/Pagination/Pagination.tsx @@ -16,7 +16,7 @@ import { NavigationUI, RangeUI, ButtonIconUI, -} from './Pagination.css.js' +} from './styles/Pagination.css.js' import Text from '../Text' import Icon from '../Icon' diff --git a/src/components/Pagination/__tests__/Pagination.test.js b/src/components/Pagination/__tests__/Pagination.test.js index 36c0baeb9..d5d78b30e 100644 --- a/src/components/Pagination/__tests__/Pagination.test.js +++ b/src/components/Pagination/__tests__/Pagination.test.js @@ -1,10 +1,11 @@ import * as React from 'react' import { mount } from 'enzyme' import { Pagination } from '../Pagination' -import { NavigationUI, RangeUI, InformationUI } from '../Pagination.css' +import { NavigationUI, RangeUI, InformationUI } from '../styles/Pagination.css' import { hasClass } from '../../../tests/helpers/enzyme' import { simulateKeyPress } from '../../KeypressListener/__tests__/KeypressListener.test' import Keys from '../../../constants/Keys' + describe('className', () => { test('Has a default className', () => { const wrapper = mount() diff --git a/src/components/Pagination/Pagination.css.js b/src/components/Pagination/styles/Pagination.css.js similarity index 71% rename from src/components/Pagination/Pagination.css.js rename to src/components/Pagination/styles/Pagination.css.js index b9e36d7e9..dace5207d 100644 --- a/src/components/Pagination/Pagination.css.js +++ b/src/components/Pagination/styles/Pagination.css.js @@ -1,9 +1,9 @@ -import styled from '../styled' -import baseStyles from '../../styles/resets/baseStyles.css.js' -import { getColor } from '../../styles/utilities/color' -import Button from '../Button' +import styled from '../../styled' +import baseStyles from '../../../styles/resets/baseStyles.css.js' +import { getColor } from '../../../styles/utilities/color' +import Button from '../../Button' -import { config } from '../Button/Button.css' +import { config } from '../../Button/styles/Button.css' export const PaginationUI = styled('div')` ${baseStyles}; diff --git a/src/components/Pop/Arrow.css.js b/src/components/Pop/Arrow.css.ts similarity index 97% rename from src/components/Pop/Arrow.css.js rename to src/components/Pop/Arrow.css.ts index 88d38a7c1..f52148aec 100644 --- a/src/components/Pop/Arrow.css.js +++ b/src/components/Pop/Arrow.css.ts @@ -1,7 +1,7 @@ import styled from '../styled' import baseStyles from '../../styles/resets/base.css.js' -const css = (props: Object) => { +const css = props => { const { color, size } = props const sizePx = `${size}px` diff --git a/src/components/Pop/Arrow.js b/src/components/Pop/Arrow.tsx similarity index 89% rename from src/components/Pop/Arrow.js rename to src/components/Pop/Arrow.tsx index 1d86ddfa9..697c86702 100644 --- a/src/components/Pop/Arrow.js +++ b/src/components/Pop/Arrow.tsx @@ -1,19 +1,21 @@ -// @flow -import React from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' -import { ArrowUI } from './Arrow.css.js' import { noop } from '../../utilities/other' - -type Props = { - className?: string, - children?: any, - placement: string, - offset: number, - size: number, - showArrow: boolean, - theme: Object | string, - zIndex: number, +import { ArrowUI } from './Arrow.css' + +export interface Props { + color?: string + className?: string + children?: any + innerRef: (node: HTMLElement) => void + placement: string + offset: number + size: number + style?: Object + showArrow: boolean + theme?: Object | string + zIndex: number } export class Arrow extends React.PureComponent { diff --git a/src/components/Pop/Manager.js b/src/components/Pop/Manager.js deleted file mode 100644 index 083a9b34e..000000000 --- a/src/components/Pop/Manager.js +++ /dev/null @@ -1,3 +0,0 @@ -import Manager from '../Popper/Manager' - -export default Manager diff --git a/src/components/Pop/Manager.ts b/src/components/Pop/Manager.ts new file mode 100644 index 000000000..50816ff92 --- /dev/null +++ b/src/components/Pop/Manager.ts @@ -0,0 +1,3 @@ +import Manager from '../Popper/Popper.Manager' + +export default Manager diff --git a/src/components/Pop/Pop.Portal.tsx b/src/components/Pop/Pop.Portal.tsx index 570b1b491..c5eb8039f 100644 --- a/src/components/Pop/Pop.Portal.tsx +++ b/src/components/Pop/Pop.Portal.tsx @@ -2,4 +2,8 @@ import PortalWrapper from '../PortalWrapper' export const PopPortal = ({ children }) => children -export default PortalWrapper({ id: 'PopPortal', timeout: 80 })(PopPortal) +export default PortalWrapper({ + id: 'PopPortal', + timeout: 80, + alwaysCloseIfLast: true, +})(PopPortal) diff --git a/src/components/Pop/Pop.css.js b/src/components/Pop/Pop.css.ts similarity index 100% rename from src/components/Pop/Pop.css.js rename to src/components/Pop/Pop.css.ts diff --git a/src/components/Pop/Pop.js b/src/components/Pop/Pop.tsx similarity index 91% rename from src/components/Pop/Pop.js rename to src/components/Pop/Pop.tsx index c986e8e74..b8b5381c5 100644 --- a/src/components/Pop/Pop.js +++ b/src/components/Pop/Pop.tsx @@ -1,6 +1,4 @@ -// @flow -import type { PopProps } from './types' -import React, { Component } from 'react' +import * as React from 'react' import Manager from './Manager' import Arrow from './Arrow' import Popper from './Popper' @@ -8,18 +6,23 @@ import Reference from './Reference' import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' import { createUniqueIDFactory } from '../../utilities/id' -import { PopUI } from './Pop.css.js' +import { PopProps } from './Pop.types' +import { PopUI } from './Pop.css' -type Props = PopProps +export interface Props extends PopProps { + onBeforeOpen: (instance: Pop) => Promise + onBeforeClose: (instance: Pop) => Promise + onContentClick: (event: React.MouseEvent) => void +} -type State = { - id: string, - isOpen: boolean, +export interface State { + id: string + isOpen: boolean } const uniqueID = createUniqueIDFactory('Pop') -class Pop extends Component { +class Pop extends React.Component { static defaultProps = { arrowSize: 5, closeOnBodyClick: false, @@ -112,7 +115,7 @@ class Pop extends Component { this.close() } - handleOnContentClick = event => { + handleOnContentClick = (event: React.MouseEvent) => { this.props.onContentClick(event) if (!this.props.closeOnContentClick) return this.close() diff --git a/src/components/Pop/types.ts b/src/components/Pop/Pop.types.ts similarity index 76% rename from src/components/Pop/types.ts rename to src/components/Pop/Pop.types.ts index 2e9bbc6a1..5fe0cbb81 100644 --- a/src/components/Pop/types.ts +++ b/src/components/Pop/Pop.types.ts @@ -16,11 +16,12 @@ export type Placements = | 'left-start' export interface PopProps { - animationDelay: number | string - animationDuration: number | string - animationEasing: string - animationSequence: string | Array - arrowClassName: string + animationDelay?: number | string + animationDuration?: number | string + animationEasing?: string + animationSequence?: string | Array + arrowClassName?: string + arrowSize: number children?: any className?: string closeOnBodyClick: boolean @@ -40,8 +41,8 @@ export interface PopProps { } export type PopperStyles = { - arrowSize: string - offset: string + arrowSize: number + offset: number placement: Placements style: Object } diff --git a/src/components/Pop/Popper.js b/src/components/Pop/Popper.tsx similarity index 82% rename from src/components/Pop/Popper.js rename to src/components/Pop/Popper.tsx index 6683d60c4..ba44458ff 100644 --- a/src/components/Pop/Popper.js +++ b/src/components/Pop/Popper.tsx @@ -1,6 +1,4 @@ -// @flow -import type { PopProps, PopperStyles } from './types' -import React, { Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import ReactPopper from '../Popper/Popper' import Animate from '../Animate' @@ -10,27 +8,51 @@ import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' import { renderRenderPropComponent } from '../../utilities/component' import { createUniqueIDFactory } from '../../utilities/id' +import { PopProps } from './Pop.types' const uniqueID = createUniqueIDFactory('PopPopper') -type Props = PopProps +export interface Props extends PopProps { + animationDelay: number | string + animationDuration: number | string + animationEasing: string + animationSequence: string | Array + arrowColor?: string + arrowSize: number + offset: number + close: () => void + onClick: (event: React.MouseEvent) => void + onContentClick: (event: React.MouseEvent) => void + onMouseLeave: (event: React.MouseEvent) => void + positionFixed: boolean + zIndex: number +} -export class Popper extends Component { +export class Popper extends React.Component { static defaultProps = { animationDelay: 0, animationDuration: 0, animationEasing: 'ease', animationSequence: 'fade', arrowSize: 5, + close: noop, + closeOnBodyClick: true, + closeOnContentClick: false, + closeOnEscPress: true, + closeOnMouseLeave: true, + display: 'inline-block', + isOpen: false, modifiers: {}, offset: 0, - close: noop, onClick: noop, + onClose: noop, onContentClick: noop, onMouseLeave: noop, + onOpen: noop, placement: 'auto', positionFixed: false, showArrow: true, + triggerOn: 'click', zIndex: 1000, } @@ -40,7 +62,7 @@ export class Popper extends Component { return this.props.id || this.id } - handleOnClick = (event: Event) => { + handleOnClick = (event: React.MouseEvent) => { /* istanbul ignore next */ event && event.stopPropagation() this.props.onClick(event) @@ -149,7 +171,7 @@ export class Popper extends Component { * @param {object} props * @returns {object} */ -export const enhancePopperStyles = (props: PopperStyles = {}) => { +export const enhancePopperStyles = (props: any = {}) => { const options = { arrowSize: props.arrowSize || 5, offset: props.offset || 0, diff --git a/src/components/Pop/Reference.js b/src/components/Pop/Reference.tsx similarity index 65% rename from src/components/Pop/Reference.js rename to src/components/Pop/Reference.tsx index 51f7de99a..b7ec85f57 100644 --- a/src/components/Pop/Reference.js +++ b/src/components/Pop/Reference.tsx @@ -1,11 +1,10 @@ -// @flow -import React, { Component } from 'react' -import ReactPopperReference from '../Popper/Reference' +import * as React from 'react' +import ReactPopperReference from '../Popper/Popper.Reference' import styled from '../styled' -type Props = any +class Reference extends React.Component { + static displayName = 'Pop.Reference' -class Reference extends Component { render() { return ( @@ -25,6 +24,4 @@ const ReferenceUI = styled('span')` display: ${props => props.display}; ` -Reference.displayName = 'Pop.Reference' - export default Reference diff --git a/src/components/Pop/__tests__/Manager.test.js b/src/components/Pop/__tests__/Manager.test.js index 9e10b9e98..8216436d0 100644 --- a/src/components/Pop/__tests__/Manager.test.js +++ b/src/components/Pop/__tests__/Manager.test.js @@ -1,5 +1,5 @@ import Manager from '../Manager' -import PopperManager from '../../Popper/Manager' +import PopperManager from '../../Popper/Popper.Manager' describe('Popper', () => { test('Is an adapter of Popper.Manager', () => { diff --git a/src/components/Pop/__tests__/Pop.test.js b/src/components/Pop/__tests__/Pop.test.js index f467c0672..a80a76a04 100644 --- a/src/components/Pop/__tests__/Pop.test.js +++ b/src/components/Pop/__tests__/Pop.test.js @@ -4,12 +4,16 @@ import Pop from '../Pop' jest.mock('../Pop.Portal', () => { const Portal = ({ children }) =>
{children}
- return Portal + return { + default: Portal, + } }) jest.mock('../../Animate', () => { const Animate = ({ children }) =>
{children}
- return Animate + return { + default: Animate, + } }) const cx = { diff --git a/src/components/Pop/__tests__/Popper.test.js b/src/components/Pop/__tests__/Popper.test.js index 007595b90..75ca2a013 100644 --- a/src/components/Pop/__tests__/Popper.test.js +++ b/src/components/Pop/__tests__/Popper.test.js @@ -6,7 +6,9 @@ import ReactPopper from '../../Popper/Popper' jest.mock('../Pop.Portal', () => { const Portal = ({ children }) =>
{children}
- return Portal + return { + default: Portal, + } }) const cleanUp = () => { diff --git a/src/components/Pop/index.js b/src/components/Pop/index.ts similarity index 100% rename from src/components/Pop/index.js rename to src/components/Pop/index.ts diff --git a/src/components/Popper/Manager.js b/src/components/Popper/Popper.Manager.tsx similarity index 74% rename from src/components/Popper/Manager.js rename to src/components/Popper/Popper.Manager.tsx index c8888dfd3..dde9a454a 100644 --- a/src/components/Popper/Manager.js +++ b/src/components/Popper/Popper.Manager.tsx @@ -1,6 +1,4 @@ -// @flow -import type { Node } from 'react' -import React from 'react' +import * as React from 'react' import createContext from '@helpscout/react-utils/dist/createContext' export const ManagerContext = createContext({ @@ -9,21 +7,22 @@ export const ManagerContext = createContext({ }) export type ManagerProps = { - children: Node, + children: any } type ManagerState = { context: { - getReferenceRef?: (?HTMLElement) => void, - referenceNode?: ?HTMLElement, - }, + getReferenceRef?: (HTMLElement?) => void + referenceNode?: HTMLElement + } } export default class Manager extends React.Component< ManagerProps, ManagerState > { - constructor() { - super() + constructor(popper) { + super(popper) + this.state = { context: { getReferenceRef: this.getReferenceRef, @@ -32,7 +31,7 @@ export default class Manager extends React.Component< } } - getReferenceRef = (referenceNode: ?HTMLElement) => + getReferenceRef = referenceNode => this.setState(({ context }) => ({ context: { ...context, referenceNode }, })) diff --git a/src/components/Popper/Reference.js b/src/components/Popper/Popper.Reference.tsx similarity index 60% rename from src/components/Popper/Reference.js rename to src/components/Popper/Popper.Reference.tsx index 0e27f7345..1dac410b4 100644 --- a/src/components/Popper/Reference.js +++ b/src/components/Popper/Popper.Reference.tsx @@ -1,23 +1,21 @@ -// @flow -import React from 'react' -import { ManagerContext } from './Manager' -import { safeInvoke, unwrapArray } from './utils' -import type { Node } from 'react' +import * as React from 'react' +import { ManagerContext } from './Popper.Manager' +import { safeInvoke, unwrapArray } from './Popper.utils' -export type ReferenceChildrenProps = { ref: (?HTMLElement) => void } +export type ReferenceChildrenProps = { ref: (HTMLElement?) => void } export type ReferenceProps = { - children: ReferenceChildrenProps => Node, - innerRef?: (?HTMLElement) => void, + children: (ReferenceChildrenProps) => any + innerRef?: (HTMLElement?) => void } type InnerReferenceProps = { - getReferenceRef?: (?HTMLElement) => void, + getReferenceRef?: (HTMLElement?) => void } class InnerReference extends React.Component< ReferenceProps & InnerReferenceProps > { - refHandler = (node: ?HTMLElement) => { + refHandler = node => { safeInvoke(this.props.innerRef, node) safeInvoke(this.props.getReferenceRef, node) } diff --git a/src/components/Popper/Popper.js b/src/components/Popper/Popper.tsx similarity index 74% rename from src/components/Popper/Popper.js rename to src/components/Popper/Popper.tsx index ca8a251d7..591da66ac 100644 --- a/src/components/Popper/Popper.js +++ b/src/components/Popper/Popper.tsx @@ -1,50 +1,44 @@ -// @flow -import React from 'react' -import PopperJS, { - type Placement, - type Instance as PopperJS$Instance, - type Data, - type Modifiers, - type ReferenceObject, -} from 'popper.js' -import { ManagerContext } from './Manager' -import { safeInvoke, unwrapArray } from './utils' -import type { Node } from 'react' - -type getRefFn = (?HTMLElement) => void -type ReferenceElement = ReferenceObject | HTMLElement | null -type StyleOffsets = { top: number, left: number } +/* istanbul ignore file */ +import * as React from 'react' +import PopperJS from '../../utilities/popper.lib' +import { ManagerContext } from './Popper.Manager' +import { safeInvoke, unwrapArray } from './Popper.utils' + +type ReferenceElement = any +type StyleOffsets = { top: number; left: number } type StylePosition = { position: 'absolute' | 'fixed' } export type PopperArrowProps = { - ref: getRefFn, - style: StyleOffsets, + ref: any + style: StyleOffsets } -export type PopperChildrenProps = {| - ref: getRefFn, - style: StyleOffsets & StylePosition, - placement: Placement, - outOfBoundaries: ?boolean, - scheduleUpdate: () => void, - arrowProps: PopperArrowProps, -|} -export type PopperChildren = PopperChildrenProps => Node + +export type PopperChildrenProps = { + ref: any + style: StyleOffsets & StylePosition + placement: any + outOfBoundaries?: boolean + scheduleUpdate: () => void + arrowProps: PopperArrowProps +} + +export type PopperChildren = any export type PopperProps = { - children: PopperChildren, - eventsEnabled?: boolean, - innerRef?: getRefFn, - modifiers?: Modifiers, - placement?: Placement, - positionFixed?: boolean, - referenceElement?: ReferenceElement, + children: PopperChildren + eventsEnabled?: boolean + innerRef?: any + modifiers?: any + placement?: any + positionFixed?: boolean + referenceElement?: ReferenceElement } type PopperState = { - popperNode: ?HTMLElement, - arrowNode: ?HTMLElement, - popperInstance: ?PopperJS$Instance, - data: ?Data, + popperNode?: HTMLElement + arrowNode?: HTMLElement + popperInstance?: any + data?: any } const initialStyle = { @@ -81,21 +75,23 @@ export class InnerPopper extends React.Component { componentWillUnmount() { this._isMounted = false if (this.state.popperInstance) { + // TODO: fix typescript complains + // @ts-ignore this.state.popperInstance.destroy() } } - safeSetState(state, callback) { + safeSetState(state, callback?) { if (this._isMounted) { return this.setState(state, callback) } } - setPopperNode = (popperNode: ?HTMLElement) => { + setPopperNode = popperNode => { safeInvoke(this.props.innerRef, popperNode) this.safeSetState({ popperNode }) } - setArrowNode = (arrowNode: ?HTMLElement) => this.safeSetState({ arrowNode }) + setArrowNode = arrowNode => this.safeSetState({ arrowNode }) updateStateModifier = { enabled: true, @@ -125,25 +121,37 @@ export class InnerPopper extends React.Component { !this.state.popperNode || !this.state.data ? initialStyle : { + // TODO: fix typescript complains + // @ts-ignore position: this.state.data.offsets.popper.position, + // TODO: fix typescript complains + // @ts-ignore ...this.state.data.styles, } getPopperPlacement = () => + // TODO: fix typescript complains + // @ts-ignore !this.state.data ? undefined : this.state.data.placement getArrowStyle = () => !this.state.arrowNode || !this.state.data ? initialArrowStyle - : this.state.data.arrowStyles + : // TODO: fix typescript complains + // @ts-ignore + this.state.data.arrowStyles getOutOfBoundariesState = () => + // TODO: fix typescript complains + // @ts-ignore this.state.data ? this.state.data.hide : undefined initPopperInstance = () => { const { referenceElement } = this.props const { popperNode, popperInstance } = this.state if (referenceElement && popperNode && !popperInstance) { + // TODO: fix typescript complains + // @ts-ignore const popperInstance = new PopperJS( referenceElement, popperNode, @@ -157,6 +165,8 @@ export class InnerPopper extends React.Component { destroyPopperInstance = (callback: () => boolean) => { if (this.state.popperInstance) { + // TODO: fix typescript complains + // @ts-ignore this.state.popperInstance.destroy() } this.safeSetState({ popperInstance: undefined }, callback) @@ -170,6 +180,8 @@ export class InnerPopper extends React.Component { scheduleUpdate = () => { if (this.state.popperInstance) { + // TODO: fix typescript complains + // @ts-ignore this.state.popperInstance.scheduleUpdate() } } diff --git a/src/components/Popper/utils.js b/src/components/Popper/Popper.utils.ts similarity index 68% rename from src/components/Popper/utils.js rename to src/components/Popper/Popper.utils.ts index 90c4722fa..4e25fa004 100644 --- a/src/components/Popper/utils.js +++ b/src/components/Popper/Popper.utils.ts @@ -1,15 +1,18 @@ -// @flow /** * Takes an argument and if it's an array, returns the first item in the array, * otherwise returns the argument. Used for Preact compatibility. */ -export const unwrapArray = (arg: *): * => (Array.isArray(arg) ? arg[0] : arg) +export const unwrapArray = arg => + Array.isArray(arg) + ? /* istanbul ignore next */ + arg[0] + : arg /** * Takes a maybe-undefined function and arbitrary args and invokes the function * only if it is defined. */ -export const safeInvoke = (fn: ?Function, ...args: *) => { +export const safeInvoke = (fn, ...args) => { if (typeof fn === 'function') { return fn(...args) } diff --git a/src/components/Popper/index.js b/src/components/Popper/index.js deleted file mode 100644 index 3db9710af..000000000 --- a/src/components/Popper/index.js +++ /dev/null @@ -1,26 +0,0 @@ -// @flow -// Public types -import type { Placement } from 'popper.js' -import type { ManagerProps } from './Manager' -import type { ReferenceProps, ReferenceChildrenProps } from './Reference' -import type { - PopperChildrenProps, - PopperArrowProps, - PopperProps, -} from './Popper' - -// Public components -import Popper, { placements } from './Popper' -import Manager from './Manager' -import Reference from './Reference' -export { Popper, placements, Manager, Reference } - -export type { - Placement, - ManagerProps, - ReferenceProps, - ReferenceChildrenProps, - PopperChildrenProps, - PopperArrowProps, - PopperProps, -} diff --git a/src/components/Popper/index.ts b/src/components/Popper/index.ts new file mode 100644 index 000000000..e592dd111 --- /dev/null +++ b/src/components/Popper/index.ts @@ -0,0 +1,9 @@ +/* istanbul ignore file */ +import Popper, { placements } from './Popper' +import Manager from './Popper.Manager' +import Reference from './Popper.Reference' + +export { ManagerProps } from './Popper.Manager' +export { ReferenceProps, ReferenceChildrenProps } from './Popper.Reference' +export { PopperChildrenProps, PopperArrowProps, PopperProps } from './Popper' +export { Popper, placements, Manager, Reference } diff --git a/src/components/Portal/Container.js b/src/components/Portal/Portal.Container.tsx similarity index 91% rename from src/components/Portal/Container.js rename to src/components/Portal/Portal.Container.tsx index 711a70df7..f44c8c05e 100644 --- a/src/components/Portal/Container.js +++ b/src/components/Portal/Portal.Container.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import { classNames } from '../../utilities/classNames' export const ID = 'HSBluePortalContainer' diff --git a/src/components/Portal/Portal.js b/src/components/Portal/Portal.tsx similarity index 81% rename from src/components/Portal/Portal.js rename to src/components/Portal/Portal.tsx index d214d1c5f..009087f19 100644 --- a/src/components/Portal/Portal.js +++ b/src/components/Portal/Portal.tsx @@ -1,28 +1,14 @@ -import React from 'react' -import ReactDOM from 'react-dom' -import PropTypes from 'prop-types' +import * as React from 'react' +import * as ReactDOM from 'react-dom' import getDocumentFromComponent from '@helpscout/react-utils/dist/getDocumentFromComponent' import contextConnect from '../PropProvider/contextConnect' import PropProvider from '../PropProvider/PropProvider' -import Container, { ID as portalContainerId } from './Container' +import Container, { ID as portalContainerId } from './Portal.Container' import { isNodeElement } from '../../utilities/node' import { isObject, isString } from '../../utilities/is' +import { PortalProps } from './Portal.types' -export const propTypes = { - className: PropTypes.string, - exact: PropTypes.bool, - id: PropTypes.string, - renderTo: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), - onBeforeOpen: PropTypes.func, - onOpen: PropTypes.func, - onBeforeClose: PropTypes.func, - onClose: PropTypes.func, - path: PropTypes.string, - timeout: PropTypes.number, -} - -export class Portal extends React.Component { - static propTypes = propTypes +export class Portal extends React.Component { static defaultProps = { propProviderContextApp: 'blue', propProviderContextValue: {}, @@ -58,6 +44,8 @@ export class Portal extends React.Component { /* istanbul ignore next */ componentWillReceiveProps(nextProps) { if (this.node && this.props.className !== nextProps.className) { + // TODO: fix typescript complains + // @ts-ignore this.node.className = nextProps.className } @@ -89,6 +77,8 @@ export class Portal extends React.Component { mountSelector = mountSelector || document.querySelector(`#${portalContainerId}`) // 3. Fallback to document.body + // TODO: fix typescript complains + // @ts-ignore return mountSelector || this.document.body // fallback } @@ -104,6 +94,8 @@ export class Portal extends React.Component { > {children} , + // TODO: fix typescript complains + // @ts-ignore this.node ) } @@ -118,16 +110,24 @@ export class Portal extends React.Component { return } + // TODO: fix typescript complains + // @ts-ignore this.node = document.createElement('div') if (className) { + // TODO: fix typescript complains + // @ts-ignore this.node.className = className } if (id) { + // TODO: fix typescript complains + // @ts-ignore this.node.id = id } // Render to specified target, instead of document + // TODO: fix typescript complains + // @ts-ignore this.state.mountSelector.appendChild(this.node) this.renderPortalContent(props) @@ -143,12 +143,18 @@ export class Portal extends React.Component { const { onClose } = props + // TODO: fix typescript complains + // @ts-ignore ReactDOM.unmountComponentAtNode(this.node) // Unmount from specified target, instead of document if ( this.state.mountSelector && + // TODO: fix typescript complains + // @ts-ignore this.node.parentNode === this.state.mountSelector ) { + // TODO: fix typescript complains + // @ts-ignore this.state.mountSelector.removeChild(this.node) } @@ -168,11 +174,15 @@ export class Portal extends React.Component { if (!this.isOpening && !this.isOpen) { this.isOpening = true onBeforeOpen(() => { + // TODO: fix typescript complains + // @ts-ignore this.mountPortal(props) }) } } else { this.isOpening = true + // TODO: fix typescript complains + // @ts-ignore this.mountPortal(props) } } diff --git a/src/components/Portal/Portal.types.ts b/src/components/Portal/Portal.types.ts new file mode 100644 index 000000000..2c92cf3a6 --- /dev/null +++ b/src/components/Portal/Portal.types.ts @@ -0,0 +1,12 @@ +export type PortalProps = { + className?: string + exact?: boolean + id?: string + renderTo?: string | Object + onBeforeOpen: (...args: any[]) => void + onOpen: (...args: any[]) => void + onBeforeClose: (...args: any[]) => void + onClose: (...args: any[]) => void + path?: string + timeout: number +} diff --git a/src/components/Portal/tests/Portal.test.js b/src/components/Portal/__tests__/Portal.test.js similarity index 100% rename from src/components/Portal/tests/Portal.test.js rename to src/components/Portal/__tests__/Portal.test.js diff --git a/src/components/Portal/index.js b/src/components/Portal/index.ts similarity index 100% rename from src/components/Portal/index.js rename to src/components/Portal/index.ts diff --git a/src/components/Portal/types.js b/src/components/Portal/types.js deleted file mode 100644 index 3173d69a1..000000000 --- a/src/components/Portal/types.js +++ /dev/null @@ -1,14 +0,0 @@ -// @flow - -export type PortalProps = { - className?: string, - exact?: boolean, - id?: string, - renderTo?: string | Object, - onBeforeOpen: () => void, - onOpen: () => void, - onBeforeClose: () => void, - onClose: () => void, - path?: string, - timeout: number, -} \ No newline at end of file diff --git a/src/components/PortalWrapper/Content.tsx b/src/components/PortalWrapper/PortalWrapper.Content.tsx similarity index 100% rename from src/components/PortalWrapper/Content.tsx rename to src/components/PortalWrapper/PortalWrapper.Content.tsx diff --git a/src/components/PortalWrapper/PortalWrapper.js b/src/components/PortalWrapper/PortalWrapper.tsx similarity index 90% rename from src/components/PortalWrapper/PortalWrapper.js rename to src/components/PortalWrapper/PortalWrapper.tsx index bb435e60d..c529e3def 100644 --- a/src/components/PortalWrapper/PortalWrapper.js +++ b/src/components/PortalWrapper/PortalWrapper.tsx @@ -1,11 +1,12 @@ -import React from 'react' -import ReactDOM from 'react-dom' +import * as React from 'react' +import * as ReactDOM from 'react-dom' import getComponentDefaultProp from '@helpscout/react-utils/dist/getComponentDefaultProp' import hoistNonReactStatics from '@helpscout/react-utils/dist/hoistNonReactStatics' import getComponentName from '@helpscout/react-utils/dist/getComponentName' import Animate from '../Animate' import KeypressListener from '../KeypressListener' -import Portal, { propTypes } from '../Portal/Portal' +import Portal from '../Portal' +import { PortalProps } from '../Portal/Portal.types' import Keys from '../../constants/Keys' import { createUniqueIDFactory, @@ -16,7 +17,21 @@ import { classNames } from '../../utilities/classNames' import { isFunction } from '../../utilities/is' import { noop, requestAnimationFrame } from '../../utilities/other' import matchPath from '../../utilities/react-router/matchPath' -import Content from './Content' +import Content from './PortalWrapper.Content' + +interface PortalWrapperProps extends PortalProps { + isOpen: boolean + trigger: any + isOpenProps: boolean + wrapperClassName: string +} + +interface PortalWrapperState { + isOpen: boolean + id: string + timeout: number + wrapperClassName: string +} const defaultOptions = { id: 'PortalWrapper', @@ -35,8 +50,10 @@ const PortalWrapper = (options = defaultOptions) => ComposedComponent => { const uniqueID = createUniqueIDFactory(extendedOptions.id) - class PortalWrapper extends React.PureComponent { - static propTypes = propTypes + class PortalWrapper extends React.PureComponent< + PortalWrapperProps, + PortalWrapperState + > { static defaultProps = { isOpen: false, } @@ -131,7 +148,7 @@ const PortalWrapper = (options = defaultOptions) => ComposedComponent => { this.triggerNode = null } - safeSetState(state, callback) { + safeSetState(state, callback?) { /* istanbul ignore else */ if (this._isMounted) { this.setState(state, callback) @@ -141,6 +158,8 @@ const PortalWrapper = (options = defaultOptions) => ComposedComponent => { setTriggerNode() { /* istanbul ignore else */ if (this.triggerComponent) { + // TODO: fix typescript complains + // @ts-ignore this.triggerNode = ReactDOM.findDOMNode(this.triggerComponent) } } @@ -148,6 +167,8 @@ const PortalWrapper = (options = defaultOptions) => ComposedComponent => { refocusTriggerNode() { /* istanbul ignore else */ if (this.triggerNode) { + // TODO: fix typescript complains + // @ts-ignore this.triggerNode.focus() } } @@ -204,7 +225,7 @@ const PortalWrapper = (options = defaultOptions) => ComposedComponent => { } } - handleOnClose = onClose => { + handleOnClose = (onClose?) => { const { onBeforeClose } = this.props if (isFunction(onClose)) { @@ -271,7 +292,11 @@ const PortalWrapper = (options = defaultOptions) => ComposedComponent => { const handleOnClose = this.handleOnClose const uniqueIndex = getUniqueIndex(id, options.id) - const zIndex = options.zIndex ? options.zIndex + uniqueIndex : null + + const zIndex = + // TODO: fix typescript complains + // @ts-ignore + options.zIndex != null ? options.zIndex + uniqueIndex : null return ( { window.MrManager = undefined diff --git a/src/components/PortalWrapper/index.js b/src/components/PortalWrapper/index.ts similarity index 100% rename from src/components/PortalWrapper/index.js rename to src/components/PortalWrapper/index.ts diff --git a/src/components/PreviewCard/Context.js b/src/components/PreviewCard/PreviewCard.Context.ts similarity index 88% rename from src/components/PreviewCard/Context.js rename to src/components/PreviewCard/PreviewCard.Context.ts index 3f069f79c..d109ece8d 100644 --- a/src/components/PreviewCard/Context.js +++ b/src/components/PreviewCard/PreviewCard.Context.ts @@ -1,8 +1,7 @@ -// @flow import createContext from '@helpscout/react-utils/dist/createContext' export type PreviewCardContext = { - isNote?: boolean, + isNote?: boolean } const contextProps: PreviewCardContext = { diff --git a/src/components/PreviewCard/index.js b/src/components/PreviewCard/PreviewCard.tsx similarity index 83% rename from src/components/PreviewCard/index.js rename to src/components/PreviewCard/PreviewCard.tsx index 65c257286..f2cd84b45 100644 --- a/src/components/PreviewCard/index.js +++ b/src/components/PreviewCard/PreviewCard.tsx @@ -1,18 +1,17 @@ -// @flow -import React from 'react' -import Context from './Context' +import * as React from 'react' +import Context from './PreviewCard.Context' import Card from '../Card' import Heading from '../Heading' import Text from '../Text' import styled from '../styled' import { classNames } from '../../utilities/classNames' -import css from './styles/PreviewCard.css.js' +import css from './styles/PreviewCard.css' type Props = { - children?: any, - className?: string, - isNote?: boolean, - title?: string, + children?: any + className?: string + isNote?: boolean + title?: string } const PreviewCard = (props: Props) => { diff --git a/src/components/PreviewCard/__tests__/PreviewCard.test.js b/src/components/PreviewCard/__tests__/PreviewCard.test.js index f1e373409..49add208c 100644 --- a/src/components/PreviewCard/__tests__/PreviewCard.test.js +++ b/src/components/PreviewCard/__tests__/PreviewCard.test.js @@ -1,7 +1,7 @@ import React from 'react' import { mount } from 'enzyme' -import PreviewCard from '../index' -import Context from '../Context' +import PreviewCard from '../PreviewCard' +import Context from '../PreviewCard.Context' import { Card, Heading, Text } from '../../' const ui = { diff --git a/src/components/PreviewCard/index.ts b/src/components/PreviewCard/index.ts new file mode 100644 index 000000000..33911baa5 --- /dev/null +++ b/src/components/PreviewCard/index.ts @@ -0,0 +1,3 @@ +import PreviewCard from './PreviewCard' + +export default PreviewCard diff --git a/src/components/ProgressBar/index.js b/src/components/ProgressBar/ProgressBar.tsx similarity index 51% rename from src/components/ProgressBar/index.js rename to src/components/ProgressBar/ProgressBar.tsx index 5baa0bf06..ccb9ca23d 100644 --- a/src/components/ProgressBar/index.js +++ b/src/components/ProgressBar/ProgressBar.tsx @@ -1,20 +1,19 @@ -// @flow -import type { UISize } from '../../constants/types' -import React, { PureComponent as Component } from 'react' +import * as React from 'react' +import { UISize } from '../../constants/types' import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' -type Value = number | string | null +type Value = number | string type Props = { - className?: string, - description?: string, - onChange: (value: Value) => void, - size?: UISize, - value: Value, + className?: string + description?: string + onChange: (value: Value) => void + size?: UISize + value: Value } -class ProgressBar extends Component { +class ProgressBar extends React.PureComponent { static defaultProps = { onChange: noop, value: 0, @@ -27,41 +26,52 @@ class ProgressBar extends Component { } getValue(val: Value): number { - const value = val !== null ? val : this.props.value - const barValue = parseFloat(value) + const value = + val != null + ? val + : /* istanbul ignore next */ + this.props.value + const barValue = parseFloat(`${value}`) const normalizedBarValue = barValue > 100 ? 100 : barValue < 0 ? 0 : barValue return normalizedBarValue } - getValueAsPercent(val: Value = null): string { + getValueAsPercent(val: Value): string { return `${this.getValue(val)}%` } render() { - const { className, description, size, value, ...rest } = this.props + const { + className, + description, + size, + value, + onChange, + ...rest + } = this.props const componentClassName = classNames( 'c-ProgressBar', size && `is-${size}`, className ) - const progresBarStyle = { - width: this.getValueAsPercent(), + const progressBarStyle = { + width: this.getValueAsPercent(value), } return (
-
+
) } diff --git a/src/components/ProgressBar/__tests__/ProgressBar.test.js b/src/components/ProgressBar/__tests__/ProgressBar.test.js index b60c0b587..c7485bdc0 100644 --- a/src/components/ProgressBar/__tests__/ProgressBar.test.js +++ b/src/components/ProgressBar/__tests__/ProgressBar.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { shallow } from 'enzyme' -import ProgressBar from '..' +import ProgressBar from '../ProgressBar' describe('Accessibility', () => { test('Has the correct aria tags', () => { @@ -10,8 +10,8 @@ describe('Accessibility', () => { const props = wrapper.props() expect(props['aria-valuenow']).toBe(20) - expect(props['aria-valuemin']).toBe('0') - expect(props['aria-valuemax']).toBe('100') + expect(props['aria-valuemin']).toBe(0) + expect(props['aria-valuemax']).toBe(100) expect(props['aria-valuetext']).toBe('Loading stuff!') }) diff --git a/src/components/ProgressBar/index.ts b/src/components/ProgressBar/index.ts new file mode 100644 index 000000000..829fad9a8 --- /dev/null +++ b/src/components/ProgressBar/index.ts @@ -0,0 +1,3 @@ +import ProgressBar from './ProgressBar' + +export default ProgressBar diff --git a/src/components/PromoCard/PromoCard.tsx b/src/components/PromoCard/PromoCard.tsx index 8df1bafec..50f119bea 100644 --- a/src/components/PromoCard/PromoCard.tsx +++ b/src/components/PromoCard/PromoCard.tsx @@ -2,8 +2,8 @@ import * as React from 'react' import propConnect from '../PropProvider/propConnect' import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' -import { COMPONENT_KEY } from './utils' -import { PromoCardUI, BorderUI, ContentUI } from './PromoCard.css' +import { COMPONENT_KEY } from './PromoCard.utils' +import { PromoCardUI, BorderUI, ContentUI } from './styles/PromoCard.css' // Refactor this when FluffyCard is converted to TypeScript export type FluffyCardTextAlign = 'left' | 'center' | 'right' diff --git a/src/components/PromoCard/utils.js b/src/components/PromoCard/PromoCard.utils.ts similarity index 100% rename from src/components/PromoCard/utils.js rename to src/components/PromoCard/PromoCard.utils.ts diff --git a/src/components/PromoCard/PromoCard.css.ts b/src/components/PromoCard/styles/PromoCard.css.ts similarity index 65% rename from src/components/PromoCard/PromoCard.css.ts rename to src/components/PromoCard/styles/PromoCard.css.ts index 44c225132..a49cbd216 100644 --- a/src/components/PromoCard/PromoCard.css.ts +++ b/src/components/PromoCard/styles/PromoCard.css.ts @@ -1,7 +1,7 @@ -import styled from '../styled/index' -import FluffyCard from '../FluffyCard' -import baseStyles from '../../styles/resets/baseStyles.css' -import { getColor } from '../../styles/utilities/color' +import styled from '../../styled' +import FluffyCard from '../../FluffyCard' +import baseStyles from '../../../styles/resets/baseStyles.css' +import { getColor } from '../../../styles/utilities/color' export const PromoCardUI = styled(FluffyCard)` border: 0; diff --git a/src/components/PropProvider/Context.tsx b/src/components/PropProvider/Context.tsx index 2dcacb4a2..9ba1e5a41 100644 --- a/src/components/PropProvider/Context.tsx +++ b/src/components/PropProvider/Context.tsx @@ -1,5 +1,5 @@ import createContext from '@helpscout/react-utils/dist/createContext' -import { contextConfig } from './utils' +import { contextConfig } from './PropProvider.utils' const Context = createContext(contextConfig) diff --git a/src/components/PropProvider/PropProvider.tsx b/src/components/PropProvider/PropProvider.tsx index 1237ded20..7bdb21e56 100644 --- a/src/components/PropProvider/PropProvider.tsx +++ b/src/components/PropProvider/PropProvider.tsx @@ -1,9 +1,13 @@ import * as React from 'react' -import { PropProviderProps } from './types' +import { PropProviderProps } from './PropProvider.types' import Context from './Context' import { ThemeProvider } from '../styled' import { renderAsSingleChild } from '../../utilities/component' -import { setGlobalApp, shallowMergeProps, propProviderDataAttr } from './utils' +import { + setGlobalApp, + shallowMergeProps, + propProviderDataAttr, +} from './PropProvider.utils' export interface Props { app: string diff --git a/src/components/PropProvider/types.ts b/src/components/PropProvider/PropProvider.types.ts similarity index 100% rename from src/components/PropProvider/types.ts rename to src/components/PropProvider/PropProvider.types.ts diff --git a/src/components/PropProvider/utils.ts b/src/components/PropProvider/PropProvider.utils.ts similarity index 98% rename from src/components/PropProvider/utils.ts rename to src/components/PropProvider/PropProvider.utils.ts index eb9511547..dbd341483 100644 --- a/src/components/PropProvider/utils.ts +++ b/src/components/PropProvider/PropProvider.utils.ts @@ -1,4 +1,8 @@ -import { AppNamespace, PropProviderProps, ConfigGetter } from './types' +import { + AppNamespace, + PropProviderProps, + ConfigGetter, +} from './PropProvider.types' import { isArray, isObject, isPlainObject, isString } from '../../utilities/is' /** diff --git a/src/components/PropProvider/__tests__/utils.test.js b/src/components/PropProvider/__tests__/utils.test.js index 3a3b32cc1..94c1cd3ca 100644 --- a/src/components/PropProvider/__tests__/utils.test.js +++ b/src/components/PropProvider/__tests__/utils.test.js @@ -11,7 +11,7 @@ import { propProviderDataAttr, shallowMergeProps, setGlobalApp, -} from '../utils' +} from '../PropProvider.utils' describe('getConfigProps', () => { test('Returns default config object, if no arguments', () => { diff --git a/src/components/PropProvider/contextConnect.tsx b/src/components/PropProvider/contextConnect.tsx index eab2c44e2..a40d94fbc 100644 --- a/src/components/PropProvider/contextConnect.tsx +++ b/src/components/PropProvider/contextConnect.tsx @@ -1,9 +1,9 @@ import * as React from 'react' -import { ConfigGetter, PropProviderProps } from './types' +import { ConfigGetter, PropProviderProps } from './PropProvider.types' import getComponentName from '@helpscout/react-utils/dist/getComponentName' import hoistNonReactStatics from '@helpscout/react-utils/dist/hoistNonReactStatics' import Context from './Context' -import { getGlobalApp, isStateless } from './utils' +import { getGlobalApp, isStateless } from './PropProvider.utils' import { isDefined, isString } from '../../utilities/is' import { noop } from '../../utilities/other' diff --git a/src/components/PropProvider/index.ts b/src/components/PropProvider/index.ts index af443723f..863db6196 100644 --- a/src/components/PropProvider/index.ts +++ b/src/components/PropProvider/index.ts @@ -9,6 +9,6 @@ export { getGlobalAppFromProps, isBeacon, isHSApp, -} from './utils' +} from './PropProvider.utils' export default PropProvider diff --git a/src/components/PropProvider/propConnect.tsx b/src/components/PropProvider/propConnect.tsx index 7f091dd56..51387224b 100644 --- a/src/components/PropProvider/propConnect.tsx +++ b/src/components/PropProvider/propConnect.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { PropProviderProps, ConfigGetter } from './types' +import { PropProviderProps, ConfigGetter } from './PropProvider.types' import getComponentName from '@helpscout/react-utils/dist/getComponentName' import hoistNonReactStatics from '@helpscout/react-utils/dist/hoistNonReactStatics' import Context from './Context' @@ -8,7 +8,7 @@ import { getGlobalApp, propProviderDataAttr, isStateless, -} from './utils' +} from './PropProvider.utils' import { classNames } from '../../utilities/classNames' import { setPackageVersionToGlobal } from '../../utilities/info' import { diff --git a/src/components/Radio/Radio.js b/src/components/Radio/Radio.tsx similarity index 64% rename from src/components/Radio/Radio.js rename to src/components/Radio/Radio.tsx index b405c4e63..2adb6fda3 100644 --- a/src/components/Radio/Radio.js +++ b/src/components/Radio/Radio.tsx @@ -1,17 +1,17 @@ -// @flow -import type { RadioKind } from './types' -import React, { PureComponent as Component } from 'react' +import * as React from 'react' +import propConnect from '../PropProvider/propConnect' +import { RadioKind } from './Radio.types' import Choice from '../Choice' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Radio.utils' type Props = { - className?: string, - kind: RadioKind, + className?: string + kind: RadioKind } -class Radio extends Component { +class Radio extends React.PureComponent { static defaultProps = { kind: 'default', } @@ -35,4 +35,4 @@ class Radio extends Component { namespaceComponent(COMPONENT_KEY)(Radio) -export default Radio +export default propConnect(COMPONENT_KEY)(Radio) diff --git a/src/components/Radio/Radio.types.ts b/src/components/Radio/Radio.types.ts new file mode 100644 index 000000000..a68bcbcba --- /dev/null +++ b/src/components/Radio/Radio.types.ts @@ -0,0 +1 @@ +export type RadioKind = 'default' | 'custom' diff --git a/src/components/Radio/utils.js b/src/components/Radio/Radio.utils.ts similarity index 100% rename from src/components/Radio/utils.js rename to src/components/Radio/Radio.utils.ts diff --git a/src/components/Radio/__tests__/Radio.test.js b/src/components/Radio/__tests__/Radio.test.js index 264572a14..4633566a3 100644 --- a/src/components/Radio/__tests__/Radio.test.js +++ b/src/components/Radio/__tests__/Radio.test.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' import Radio from '..' import Choice from '../../Choice' diff --git a/src/components/Radio/index.js b/src/components/Radio/index.js deleted file mode 100644 index 9aed0fcf4..000000000 --- a/src/components/Radio/index.js +++ /dev/null @@ -1,5 +0,0 @@ -// @flow -import { propConnect } from '../PropProvider' -import Radio from './Radio' - -export default propConnect('Radio')(Radio) diff --git a/src/components/Radio/index.ts b/src/components/Radio/index.ts new file mode 100644 index 000000000..9ec2ccf2c --- /dev/null +++ b/src/components/Radio/index.ts @@ -0,0 +1,3 @@ +import Radio from './Radio' + +export default Radio diff --git a/src/components/Radio/types.js b/src/components/Radio/types.js deleted file mode 100644 index 883a6219c..000000000 --- a/src/components/Radio/types.js +++ /dev/null @@ -1,3 +0,0 @@ -export type RadioKind = -| 'default' -| 'custom' \ No newline at end of file diff --git a/src/components/RadioCard/RadioCard.js b/src/components/RadioCard/RadioCard.tsx similarity index 79% rename from src/components/RadioCard/RadioCard.js rename to src/components/RadioCard/RadioCard.tsx index a1e1e4fd2..629e37a75 100644 --- a/src/components/RadioCard/RadioCard.js +++ b/src/components/RadioCard/RadioCard.tsx @@ -1,7 +1,6 @@ -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import Icon from '../Icon' -import ChoiceGroupContext from '../ChoiceGroup/Context' +import ChoiceGroupContext from '../ChoiceGroup/ChoiceGroup.Context' import { classNames } from '../../utilities/classNames' import { includes } from '../../utilities/arrays' import { namespaceComponent } from '../../utilities/component' @@ -9,35 +8,13 @@ import { createUniqueIDFactory } from '../../utilities/id' import { isFunction, isString } from '../../utilities/is' import { noop } from '../../utilities/other' import Radio from '../Radio' -import { RadioCardUI, IconWrapperUI, FocusUI } from './styles/RadioCard.css.js' -import { COMPONENT_KEY } from './utils' - -type InputNode = HTMLInputElement -type InputEvent = SyntheticEvent - -type Props = { - checked: boolean, - className?: string, - icon: string | Function, - iconSize: number, - id?: string, - inputRef: (node: InputNode) => void, - innerRef: (node: InputNode) => void, - isFocused: boolean, - onBlur: (event: InputEvent) => void, - onFocus: (event: InputEvent) => void, - title?: string, - onChange: (value: any) => void, -} - -type State = { - id: string, - isFocused: boolean, -} +import { RadioCardUI, IconWrapperUI, FocusUI } from './styles/RadioCard.css' +import { COMPONENT_KEY } from './RadioCard.utils' +import { RadioCardProps, RadioCardState, InputEvent } from './RadioCard.types' const uniqueID = createUniqueIDFactory('RadioCard') -class RadioCard extends Component { +class RadioCard extends React.PureComponent { static defaultProps = { checked: false, onChange: noop, @@ -53,7 +30,7 @@ class RadioCard extends Component { defaultIcon: string = 'fab-chat' inputNode: HTMLInputElement - constructor(props: Props) { + constructor(props: RadioCardProps) { super(props) this.state = { @@ -100,7 +77,7 @@ class RadioCard extends Component { return isFocused && } - getCardMarkup = (contextProps: Object) => { + getCardMarkup = contextProps => { const { className, checked, icon, title, value, ...rest } = this.props const { id, isFocused } = this.state diff --git a/src/components/RadioCard/RadioCard.types.ts b/src/components/RadioCard/RadioCard.types.ts new file mode 100644 index 000000000..e09474677 --- /dev/null +++ b/src/components/RadioCard/RadioCard.types.ts @@ -0,0 +1,23 @@ +export type InputNode = HTMLInputElement +export type InputEvent = Event + +export type RadioCardProps = { + checked: boolean + className?: string + icon: string | Component + iconSize: number + id?: string + inputRef: (node: InputNode) => void + innerRef: (node: InputNode) => void + isFocused: boolean + onBlur: (event: InputEvent) => void + onFocus: (event: InputEvent) => void + title?: string + onChange: (value: any) => void + value?: string +} + +export type RadioCardState = { + id: string + isFocused: boolean +} diff --git a/src/components/RadioCard/utils.js b/src/components/RadioCard/RadioCard.utils.ts similarity index 100% rename from src/components/RadioCard/utils.js rename to src/components/RadioCard/RadioCard.utils.ts diff --git a/src/components/RadioCard/__tests__/RadioCard.test.js b/src/components/RadioCard/__tests__/RadioCard.test.js index 8e655ebfe..3056ed4b3 100644 --- a/src/components/RadioCard/__tests__/RadioCard.test.js +++ b/src/components/RadioCard/__tests__/RadioCard.test.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' import RadioCard from '../RadioCard' import ChoiceGroup from '../../ChoiceGroup' diff --git a/src/components/RadioCard/index.js b/src/components/RadioCard/index.ts similarity index 93% rename from src/components/RadioCard/index.js rename to src/components/RadioCard/index.ts index cb118488c..bcc1f4753 100644 --- a/src/components/RadioCard/index.js +++ b/src/components/RadioCard/index.ts @@ -1,4 +1,3 @@ -// @flow import { propConnect } from '../PropProvider' import RadioCard from './RadioCard' diff --git a/src/components/RadioCard/styles/RadioCard.css.js b/src/components/RadioCard/styles/RadioCard.css.ts similarity index 96% rename from src/components/RadioCard/styles/RadioCard.css.js rename to src/components/RadioCard/styles/RadioCard.css.ts index ea2bf7f31..0b6d4f26f 100644 --- a/src/components/RadioCard/styles/RadioCard.css.js +++ b/src/components/RadioCard/styles/RadioCard.css.ts @@ -1,5 +1,4 @@ -// @flow -import baseStyles from '../../../styles/resets/baseStyles.css.js' +import baseStyles from '../../../styles/resets/baseStyles.css' import { getColor } from '../../../styles/utilities/color' import styled from '../../styled' diff --git a/src/components/RateAction/RateAction.tsx b/src/components/RateAction/RateAction.tsx index 007f88f14..166a56f08 100644 --- a/src/components/RateAction/RateAction.tsx +++ b/src/components/RateAction/RateAction.tsx @@ -5,7 +5,7 @@ import Emoticon from '../Emoticon' import { EmoticonName, EmoticonSize } from '../Emoticon/Emoticon.types' import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' -import { RateActionUI } from './RateAction.css' +import { RateActionUI } from './styles/RateAction.css' import { COMPONENT_KEY } from './RateAction.utils' export interface Props { diff --git a/src/components/RateAction/RateAction.css.ts b/src/components/RateAction/styles/RateAction.css.ts similarity index 92% rename from src/components/RateAction/RateAction.css.ts rename to src/components/RateAction/styles/RateAction.css.ts index 24fe00b33..782b83314 100644 --- a/src/components/RateAction/RateAction.css.ts +++ b/src/components/RateAction/styles/RateAction.css.ts @@ -1,6 +1,6 @@ -import styled from '../styled' -import baseStyles from '../../styles/resets/baseStyles.css' -import { getColor } from '../../styles/utilities/color' +import styled from '../../styled' +import baseStyles from '../../../styles/resets/baseStyles.css' +import { getColor } from '../../../styles/utilities/color' export const config = { size: { diff --git a/src/components/Route/Route.js b/src/components/Route/Route.js index 90f3f3f26..90115692e 100644 --- a/src/components/Route/Route.js +++ b/src/components/Route/Route.js @@ -1,7 +1,7 @@ import warning from 'warning' import invariant from 'invariant' import React from 'react' -import PropTypes from 'prop-types' +import { noop } from '../../utilities/other' import matchPath from '../../utilities/react-router/matchPath' const isEmptyChildren = children => React.Children.count(children) === 0 @@ -11,28 +11,24 @@ const isEmptyChildren = children => React.Children.count(children) === 0 * https://github.com/ReactTraining/react-router/blob/3d233bf0b6dd5bf68d9bac9c94273ae25646b207/packages/react-router/modules/Route.js */ class Route extends React.Component { - static propTypes = { - computedMatch: PropTypes.object, // private, from - path: PropTypes.string, - exact: PropTypes.bool, - strict: PropTypes.bool, - sensitive: PropTypes.bool, - component: PropTypes.func, - render: PropTypes.func, - children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]), - location: PropTypes.object, - } + // static propTypes = { + // computedMatch: PropTypes.object, // private, from + // path: PropTypes.string, + // exact: PropTypes.bool, + // strict: PropTypes.bool, + // sensitive: PropTypes.bool, + // component: PropTypes.func, + // render: PropTypes.func, + // children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]), + // location: PropTypes.object, + // } static contextTypes = { - router: PropTypes.shape({ - history: PropTypes.object.isRequired, - route: PropTypes.object.isRequired, - staticContext: PropTypes.object, - }), + router: noop, } static childContextTypes = { - router: PropTypes.object.isRequired, + router: noop, } getChildContext() { diff --git a/src/components/RouteWrapper/index.js b/src/components/RouteWrapper/RouteWrapper.tsx similarity index 88% rename from src/components/RouteWrapper/index.js rename to src/components/RouteWrapper/RouteWrapper.tsx index b7d6856e9..fa6745761 100644 --- a/src/components/RouteWrapper/index.js +++ b/src/components/RouteWrapper/RouteWrapper.tsx @@ -1,7 +1,5 @@ -import React from 'react' +import * as React from 'react' import hoistNonReactStatics from '@helpscout/react-utils/dist/hoistNonReactStatics' -import PropTypes from 'prop-types' -import { isDefined } from '../../utilities/is' import { noop } from '../../utilities/other' import get from '../../utilities/get' @@ -12,9 +10,9 @@ const RouteWrapper = WrappedComponent => { /* istanbul ignore next */ 'Component' - class Component extends React.PureComponent { + class Component extends React.PureComponent { static contextTypes = { - router: PropTypes.object, + router: noop, } static defaultProps = { diff --git a/src/components/RouteWrapper/__tests__/RouteWrapper.test.js b/src/components/RouteWrapper/__tests__/RouteWrapper.test.js index b28a1bf16..5566bfed5 100644 --- a/src/components/RouteWrapper/__tests__/RouteWrapper.test.js +++ b/src/components/RouteWrapper/__tests__/RouteWrapper.test.js @@ -1,6 +1,6 @@ import React, { Component } from 'react' import { shallow } from 'enzyme' -import RouteWrapper from '..' +import RouteWrapper from '../RouteWrapper' // Since we now wrap Link in a HOC, we have to use `.first.shallow()` to test. // See https://github.com/airbnb/enzyme/issues/539#issuecomment-239497107 diff --git a/src/components/RouteWrapper/index.ts b/src/components/RouteWrapper/index.ts new file mode 100644 index 000000000..ab16e66fe --- /dev/null +++ b/src/components/RouteWrapper/index.ts @@ -0,0 +1,3 @@ +import RouteWrapper from './RouteWrapper' + +export default RouteWrapper diff --git a/src/components/Samp/Samp.tsx b/src/components/Samp/Samp.tsx index 7844b3e09..c28f561ef 100644 --- a/src/components/Samp/Samp.tsx +++ b/src/components/Samp/Samp.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import Text from '../Text' import { Props as TextProps } from '../Text/Text' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Samp.utils' export interface Props extends TextProps {} diff --git a/src/components/Samp/utils.ts b/src/components/Samp/Samp.utils.ts similarity index 100% rename from src/components/Samp/utils.ts rename to src/components/Samp/Samp.utils.ts diff --git a/src/components/Samp/index.ts b/src/components/Samp/index.ts index 3b5507507..a1d6d0723 100644 --- a/src/components/Samp/index.ts +++ b/src/components/Samp/index.ts @@ -1,5 +1,5 @@ -import { propConnect } from '../PropProvider/index' +import { propConnect } from '../PropProvider' import Samp from './Samp' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Samp.utils' export default propConnect(COMPONENT_KEY)(Samp) diff --git a/src/components/Scrollable/Scrollable.tsx b/src/components/Scrollable/Scrollable.tsx index 0405717d4..c5622579f 100644 --- a/src/components/Scrollable/Scrollable.tsx +++ b/src/components/Scrollable/Scrollable.tsx @@ -11,7 +11,7 @@ import { getFadeRightStyles, } from '../../utilities/scrollFade' import { noop } from '../../utilities/other' -import { ScrollableUI, ContentUI, FaderUI } from './Scrollable.css' +import { ScrollableUI, ContentUI, FaderUI } from './styles/Scrollable.css' import { COMPONENT_KEY } from './Scrollable.utils' export interface Props { diff --git a/src/components/Scrollable/Scrollable.css.ts b/src/components/Scrollable/styles/Scrollable.css.ts similarity index 98% rename from src/components/Scrollable/Scrollable.css.ts rename to src/components/Scrollable/styles/Scrollable.css.ts index 8696569e4..1e354269f 100644 --- a/src/components/Scrollable/Scrollable.css.ts +++ b/src/components/Scrollable/styles/Scrollable.css.ts @@ -1,4 +1,4 @@ -import styled from '../styled' +import styled from '../../styled' export const config = { borderRadius: '4px', diff --git a/src/components/Select/Select.Arrows.tsx b/src/components/Select/Select.Arrows.tsx index 3362d06b5..4a0b41645 100644 --- a/src/components/Select/Select.Arrows.tsx +++ b/src/components/Select/Select.Arrows.tsx @@ -1,14 +1,10 @@ import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' -import { SelectArrowsUI } from './Select.css' +import { SelectArrowsUI } from './styles/Select.css' +import { SelectArrowProps } from './Select.types' -export interface Props { - className?: string - state: string -} - -export class SelectArrows extends React.PureComponent { +export class SelectArrows extends React.PureComponent { static defaultProps = { state: 'default', } diff --git a/src/components/Select/Select.js b/src/components/Select/Select.tsx similarity index 79% rename from src/components/Select/Select.js rename to src/components/Select/Select.tsx index 4acb120b2..133f76888 100644 --- a/src/components/Select/Select.js +++ b/src/components/Select/Select.tsx @@ -1,82 +1,33 @@ -// @flow -import type { UISize, UIState } from '../../constants/types' -import type { - SelectGroup, - SelectOptions, - SelectOption, - SelectValue, -} from './types' -import React, { PureComponent as Component } from 'react' +import * as React from 'react' +import propConnect from '../PropProvider/propConnect' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import FormLabelContext from '../FormLabel/Context' -import Backdrop from '../Input/BackdropV2' +import Backdrop from '../Input/Input.BackdropV2' import HelpText from '../HelpText' import Label from '../Label' import Icon from '../Icon' import Tooltip from '../Tooltip' import Arrows from './Select.Arrows' -import { STATES } from '../../constants/index' +import { STATES } from '../../constants' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' import { createUniqueIDFactory } from '../../utilities/id' import { isString } from '../../utilities/is' import { noop } from '../../utilities/other' -import { COMPONENT_KEY } from './utils' -import { InputWrapperUI } from '../Input/styles/Input.css.js' -import { SelectUI, FieldUI, InlinePrefixSuffixUI, ItemUI } from './Select.css' - -type SelectEvent = SyntheticEvent -type SelectOptionProp = - | SelectGroup - | SelectOptions - | SelectOption - | Array - | string - -type Props = { - autoFocus: boolean, - children?: any, - className: string, - disabled: boolean, - errorIcon: string, - errorMessage: string, - forceAutoFocusTimeout: number, - helpText: any, - hintText: any, - id: string, - isFocused: boolean, - isFirst: boolean, - isNotOnly: boolean, - isLast: boolean, - label: any, - name: string, - options: SelectOptionProp, - onBlur: (event: SelectEvent) => void, - onChange: (value: SelectValue) => void, - onFocus: (event: SelectEvent) => void, - placeholder: string, - prefix: string, - removeStateStylesOnFocus: boolean, - seamless: boolean, - style?: Object, - size: UISize, - state: UIState, - success: boolean, - value: string, -} - -type State = { - id?: string, - isFocused: boolean, - state?: UIState, - value: SelectValue, -} +import { COMPONENT_KEY } from './Select.utils' +import { InputWrapperUI } from '../Input/styles/Input.css' +import { + SelectUI, + FieldUI, + InlinePrefixSuffixUI, + ItemUI, +} from './styles/Select.css' +import { SelectProps, SelectState, SelectEvent } from './Select.types' const PLACEHOLDER_VALUE = '__placeholder__' - const uniqueID = createUniqueIDFactory('Select') -export class Select extends Component { +export class Select extends React.PureComponent { static defaultProps = { autoFocus: false, disabled: false, @@ -95,10 +46,11 @@ export class Select extends Component { static Arrows = Arrows optionClassName = 'c-Select__option' - selectNode: ?HTMLSelectElement = null + selectNode: HTMLSelectElement | null - constructor(props: Props) { + constructor(props: SelectProps) { super(props) + this.state = { id: props.id || uniqueID(), isFocused: props.isFocused, @@ -111,7 +63,7 @@ export class Select extends Component { this.autoFocus() } - componentWillReceiveProps(nextProps: Props) { + componentWillReceiveProps(nextProps: SelectProps) { const { isFocused, state } = nextProps const prevState = this.state.state @@ -154,7 +106,7 @@ export class Select extends Component { } handleOnChange = (event: SelectEvent) => { - const value = event.currentTarget.value + const value = (event.currentTarget as HTMLSelectElement).value this.props.onChange(value) this.setState({ @@ -222,7 +174,7 @@ export class Select extends Component { } /* istanbul ignore next */ - getInlinePrefixSuffixClassName({ type, icon }) { + getInlinePrefixSuffixClassName({ type, icon }: any) { const { seamless, state } = this.props return classNames( @@ -286,31 +238,25 @@ export class Select extends Component { ) } - renderOptions = (option: SelectOption) => { + renderOptions = option => { // HTML only allows for single level nesting - // $FlowFixMe const hasOptions = - !isString(option) && - option.hasOwnProperty('value') && - Array.isArray(option.value) - - const optionDisabled = option.disabled - const optionLabel = option.label - const optionValue = option.value + option.hasOwnProperty('value') && Array.isArray(option.value) // Group - if (hasOptions) { + if (!isString(option) && hasOptions) { // Recursion! return ( - {optionValue.map(this.renderOptions)} + {option.value.map(this.renderOptions)} ) } + // Option if (isString(option)) { return ( @@ -321,12 +267,12 @@ export class Select extends Component { } else { return ( ) } @@ -467,4 +413,4 @@ export class Select extends Component { namespaceComponent(COMPONENT_KEY)(Select) -export default Select +export default propConnect(COMPONENT_KEY)(Select) diff --git a/src/components/Select/Select.types.ts b/src/components/Select/Select.types.ts new file mode 100644 index 000000000..83344c288 --- /dev/null +++ b/src/components/Select/Select.types.ts @@ -0,0 +1,70 @@ +import { UISize, UIState } from '../../constants/types' + +export type SelectValue = string + +export type Option = { + disabled: boolean + label: string + value: SelectValue +} + +export type SelectOption = Option | SelectValue +export type SelectOptions = Array + +export type SelectGroup = { + label: string + value: SelectOptions +} + +export type SelectEvent = Event +export type SelectOptionProp = + | SelectGroup + | SelectOptions + | SelectOption + // | Array + | string + +export type SelectProps = { + autoFocus: boolean + children?: any + className: string + disabled: boolean + errorIcon: string + errorMessage: string + forceAutoFocusTimeout: number + helpText: any + hintText: any + id: string + innerRef: (node: HTMLElement) => void + isFocused: boolean + isFirst: boolean + isNotOnly: boolean + isLast: boolean + label: any + name: string + options: SelectOptionProp + onBlur: (event: SelectEvent) => void + onChange: (value: SelectValue) => void + onFocus: (event: SelectEvent) => void + placeholder: string + prefix: string + removeStateStylesOnFocus: boolean + seamless: boolean + style?: Object + size: UISize + state?: UIState + success: boolean + value: string +} + +export type SelectState = { + id?: string + isFocused: boolean + state?: UIState + value: SelectValue +} + +export interface SelectArrowProps { + className?: string + state?: UIState +} diff --git a/src/components/Select/utils.js b/src/components/Select/Select.utils.ts similarity index 100% rename from src/components/Select/utils.js rename to src/components/Select/Select.utils.ts diff --git a/src/components/Select/__tests__/Select.test.js b/src/components/Select/__tests__/Select.test.js index 273dda660..5b64103fd 100644 --- a/src/components/Select/__tests__/Select.test.js +++ b/src/components/Select/__tests__/Select.test.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import { mount, render } from 'enzyme' import { Select } from '../Select' diff --git a/src/components/Select/index.js b/src/components/Select/index.js deleted file mode 100644 index 699c93cb2..000000000 --- a/src/components/Select/index.js +++ /dev/null @@ -1,5 +0,0 @@ -// @flow -import { propConnect } from '../PropProvider' -import Select from './Select' - -export default propConnect('Select')(Select) diff --git a/src/components/Select/index.ts b/src/components/Select/index.ts new file mode 100644 index 000000000..0a2a67e2f --- /dev/null +++ b/src/components/Select/index.ts @@ -0,0 +1,3 @@ +import Select from './Select' + +export default Select diff --git a/src/components/Select/Select.css.ts b/src/components/Select/styles/Select.css.ts similarity index 88% rename from src/components/Select/Select.css.ts rename to src/components/Select/styles/Select.css.ts index 80961e11a..7bb3bf50c 100644 --- a/src/components/Select/Select.css.ts +++ b/src/components/Select/styles/Select.css.ts @@ -1,7 +1,7 @@ -import styled from '../styled' -import { makeFieldStyles } from '../Input/styles/Input.css' -import { getColor } from '../../styles/utilities/color' -export { InlinePrefixSuffixUI } from '../Input/styles/Input.css' +import styled from '../../styled' +import { makeFieldStyles } from '../../Input/styles/Input.css' +import { getColor } from '../../../styles/utilities/color' +export { InlinePrefixSuffixUI } from '../../Input/styles/Input.css' export const SelectUI = styled('div')` align-items: center; diff --git a/src/components/Select/types.js b/src/components/Select/types.js deleted file mode 100644 index 750282525..000000000 --- a/src/components/Select/types.js +++ /dev/null @@ -1,15 +0,0 @@ -export type SelectValue = string - -export type Option = { - disable: boolean, - label: string, - value: SelectValue -} - -export type SelectOption = Option | SelectValue -export type SelectOptions = Array - -export type SelectGroup = { - label: string, - value: SelectOptions, -} diff --git a/src/components/SelectDropdown/SelectDropdown.tsx b/src/components/SelectDropdown/SelectDropdown.tsx index eb976e237..f85888262 100644 --- a/src/components/SelectDropdown/SelectDropdown.tsx +++ b/src/components/SelectDropdown/SelectDropdown.tsx @@ -6,7 +6,6 @@ import Text from '../Text' import SelectArrows from '../Select/Select.Arrows' import Tooltip from '../Tooltip' import { initialState } from '../Dropdown/V2/Dropdown.store' -import { DropdownProps } from '../Dropdown/V2/Dropdown.types' import { itemIsActive } from '../Dropdown/V2/Dropdown.utils' import { COMPONENT_KEY } from './SelectDropdown.utils' import { find } from '../../utilities/arrays' @@ -18,24 +17,17 @@ import { LabelUI, BackdropUI, ErrorUI, -} from './SelectDropdown.css' +} from './styles/SelectDropdown.css' import { isObject } from '../../utilities/is' - -export interface Props extends DropdownProps { - onChange: (...args: any) => void - errorIcon: string - errorMessage?: string - isFocused: boolean - placeholder: string - state: string - value?: any -} -export interface State { - isFocused: boolean - selectedItem: any -} - -export class SelectDropdown extends React.PureComponent { +import { + SelectDropdownProps, + SelectDropdownState, +} from './SelectDropdown.types' + +export class SelectDropdown extends React.PureComponent< + SelectDropdownProps, + SelectDropdownState +> { static defaultProps = { ...initialState, clearOnSelect: false, diff --git a/src/components/SelectDropdown/SelectDropdown.types.ts b/src/components/SelectDropdown/SelectDropdown.types.ts new file mode 100644 index 000000000..23128daf6 --- /dev/null +++ b/src/components/SelectDropdown/SelectDropdown.types.ts @@ -0,0 +1,16 @@ +import { UIState } from '../../constants/types' +import { DropdownProps } from '../Dropdown/V2/Dropdown.types' + +export interface SelectDropdownProps extends DropdownProps { + onChange: (...args: any) => void + errorIcon: string + errorMessage?: string + isFocused: boolean + placeholder: string + state?: UIState + value?: any +} +export interface SelectDropdownState { + isFocused: boolean + selectedItem: any +} diff --git a/src/components/SelectDropdown/SelectDropdown.css.ts b/src/components/SelectDropdown/styles/SelectDropdown.css.ts similarity index 93% rename from src/components/SelectDropdown/SelectDropdown.css.ts rename to src/components/SelectDropdown/styles/SelectDropdown.css.ts index d5a68ec17..41367d006 100644 --- a/src/components/SelectDropdown/SelectDropdown.css.ts +++ b/src/components/SelectDropdown/styles/SelectDropdown.css.ts @@ -1,5 +1,5 @@ -import Backdrop from '../Input/BackdropV2' -import styled from '../styled' +import Backdrop from '../../Input/Input.BackdropV2' +import styled from '../../styled' export const SelectDropdownUI = styled('div')` .c-DropdownV2Trigger { diff --git a/src/components/SideNavigation/Button.tsx b/src/components/SideNavigation/SideNavigation.Button.tsx similarity index 72% rename from src/components/SideNavigation/Button.tsx rename to src/components/SideNavigation/SideNavigation.Button.tsx index 0db2b65ce..da9953ccb 100644 --- a/src/components/SideNavigation/Button.tsx +++ b/src/components/SideNavigation/SideNavigation.Button.tsx @@ -3,19 +3,14 @@ import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { COMPONENT_KEY } from './SideNavigation.utils' +import { SideNavigationButtonProps } from './SideNavigation.types' + import { propConnect } from '../PropProvider' import Icon from '../Icon' -import { ButtonUI, ButtonFooterUI } from './SideNavigation.css' - -export interface Props { - className?: string - floatingMenu?: boolean - iconName?: string - icon?: Icon -} +import { ButtonUI, ButtonFooterUI } from './styles/SideNavigation.css' -export class Button extends React.PureComponent { +export class Button extends React.PureComponent { static defaultProps = { floatingMenu: false, } @@ -31,9 +26,7 @@ export class Button extends React.PureComponent { } = this.props const componentClassName = classNames('c-SideNavigation__Button', className) - const ElementName: ButtonUI | ButtonFooterUI = floatingMenu - ? ButtonUI - : ButtonFooterUI + const ElementName = floatingMenu ? ButtonUI : ButtonFooterUI return ( - selectedItem: any - floatingMenu?: boolean - iconName: string - forceNavVisibleOn(id: string) - forceNavVisibleOff(id: string) -} +import {} from './styles/SideNavigation.css' const UNIQUE_ID = createUniqueIDFactory(COMPONENT_KEY.DropdownFooter) -export class DropdownFooter extends React.PureComponent { +export class DropdownFooter extends React.PureComponent< + SideNavigationDropdownFooterProps +> { static defaultProps = { forceNavVisibleOn: noop, forceNavVisibleOff: noop, diff --git a/src/components/SideNavigation/DropdownHeader.tsx b/src/components/SideNavigation/SideNavigation.DropdownHeader.tsx similarity index 83% rename from src/components/SideNavigation/DropdownHeader.tsx rename to src/components/SideNavigation/SideNavigation.DropdownHeader.tsx index 655228811..5f39737e4 100644 --- a/src/components/SideNavigation/DropdownHeader.tsx +++ b/src/components/SideNavigation/SideNavigation.DropdownHeader.tsx @@ -2,28 +2,22 @@ import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { COMPONENT_KEY } from './SideNavigation.utils' +import { SideNavigationDropdownHeaderProps } from './SideNavigation.types' import { createUniqueIDFactory } from '../../utilities/id' -import { noop } from '../../utilities/other' import { propConnect } from '../PropProvider' import Icon from '../Icon' import AutoDropdown from '../AutoDropdown/AutoDropdown' -import { DropdownHeaderUI } from './SideNavigation.css' +import { DropdownHeaderUI } from './styles/SideNavigation.css' import SideNavigation from './SideNavigation' -export interface Props { - className?: string - items: Array - selectedItem: any - forceNavVisibleOn(id: string) - forceNavVisibleOff(id: string) -} - const UNIQUE_ID = createUniqueIDFactory(COMPONENT_KEY.DropdownHeader) -export class DropdownHeader extends React.PureComponent { +export class DropdownHeader extends React.PureComponent< + SideNavigationDropdownHeaderProps +> { static defaultProps = {} id = UNIQUE_ID() diff --git a/src/components/SideNavigation/FadeInOut.tsx b/src/components/SideNavigation/SideNavigation.FadeInOut.tsx similarity index 74% rename from src/components/SideNavigation/FadeInOut.tsx rename to src/components/SideNavigation/SideNavigation.FadeInOut.tsx index e54c52d0f..01365da4c 100644 --- a/src/components/SideNavigation/FadeInOut.tsx +++ b/src/components/SideNavigation/SideNavigation.FadeInOut.tsx @@ -2,16 +2,14 @@ import * as React from 'react' import { classNames } from '../../utilities/classNames' import { COMPONENT_KEY } from './SideNavigation.utils' +import { SideNavigationFadeInOutProps } from './SideNavigation.types' import { propConnect } from '../PropProvider' -import { FadeInOutUI } from './SideNavigation.css' +import { FadeInOutUI } from './styles/SideNavigation.css' -export interface Props { - className?: string - collapsable?: boolean -} - -export class FadeInOut extends React.PureComponent { +export class FadeInOut extends React.PureComponent< + SideNavigationFadeInOutProps +> { render() { const { children, className, collapsable } = this.props diff --git a/src/components/SideNavigation/Footer.tsx b/src/components/SideNavigation/SideNavigation.Footer.tsx similarity index 77% rename from src/components/SideNavigation/Footer.tsx rename to src/components/SideNavigation/SideNavigation.Footer.tsx index 12d52c97b..31d358d28 100644 --- a/src/components/SideNavigation/Footer.tsx +++ b/src/components/SideNavigation/SideNavigation.Footer.tsx @@ -3,20 +3,14 @@ import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { COMPONENT_KEY } from './SideNavigation.utils' +import { SideNavigationFooterProps } from './SideNavigation.types' import { propConnect } from '../PropProvider' import Icon from '../Icon' -import FadeInOut from './FadeInOut' +import FadeInOut from './SideNavigation.FadeInOut' -import { FooterUI } from './SideNavigation.css' +import { FooterUI } from './styles/SideNavigation.css' -export interface Props { - className?: string - collapsable?: boolean - collapsed?: boolean - floatingMenu?: boolean -} - -export class Footer extends React.PureComponent { +export class Footer extends React.PureComponent { static defaultProps = {} render() { diff --git a/src/components/SideNavigation/Header.tsx b/src/components/SideNavigation/SideNavigation.Header.tsx similarity index 80% rename from src/components/SideNavigation/Header.tsx rename to src/components/SideNavigation/SideNavigation.Header.tsx index 2214d740a..e0342ec1b 100644 --- a/src/components/SideNavigation/Header.tsx +++ b/src/components/SideNavigation/SideNavigation.Header.tsx @@ -3,20 +3,13 @@ import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { COMPONENT_KEY } from './SideNavigation.utils' +import { SideNavigationHeaderProps } from './SideNavigation.types' import { propConnect } from '../PropProvider' -import FadeInOut from './FadeInOut' -import Heading from './Heading' -import { HeaderUI, BadgeUI, HeaderLinkUI } from './SideNavigation.css' - -export interface Props { - badge?: string - collapsable?: boolean - className?: string - href?: string - label?: string -} +import FadeInOut from './SideNavigation.FadeInOut' +import Heading from './SideNavigation.Heading' +import { HeaderUI, BadgeUI, HeaderLinkUI } from './styles/SideNavigation.css' -export class Header extends React.PureComponent { +export class Header extends React.PureComponent { static defaultProps = {} getInitial() { diff --git a/src/components/SideNavigation/Heading.tsx b/src/components/SideNavigation/SideNavigation.Heading.tsx similarity index 80% rename from src/components/SideNavigation/Heading.tsx rename to src/components/SideNavigation/SideNavigation.Heading.tsx index c4278d22b..5a12faad7 100644 --- a/src/components/SideNavigation/Heading.tsx +++ b/src/components/SideNavigation/SideNavigation.Heading.tsx @@ -2,14 +2,13 @@ import * as React from 'react' import { classNames } from '../../utilities/classNames' import { COMPONENT_KEY } from './SideNavigation.utils' +import { SideNavigationHeadingProps } from './SideNavigation.types' import { propConnect } from '../PropProvider' import Heading from '../Heading' -export interface Props { - className?: string -} - -export class SideNavigationHeading extends React.PureComponent { +export class SideNavigationHeading extends React.PureComponent< + SideNavigationHeadingProps +> { static defaultProps = {} render() { diff --git a/src/components/SideNavigation/Item.tsx b/src/components/SideNavigation/SideNavigation.Item.tsx similarity index 79% rename from src/components/SideNavigation/Item.tsx rename to src/components/SideNavigation/SideNavigation.Item.tsx index 4ea00338f..2b1cebc28 100644 --- a/src/components/SideNavigation/Item.tsx +++ b/src/components/SideNavigation/SideNavigation.Item.tsx @@ -1,26 +1,16 @@ import * as React from 'react' + import getValidProps from '@helpscout/react-utils/dist/getValidProps' +import { SideNavigationItemProps } from './SideNavigation.types' import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' -import Icon from '../Icon' -import { ItemUI, ButtonUI, CountUI, IconUI } from './SideNavigation.css' -import FadeInOut from './FadeInOut' +import Icon from '../Icon' +import FadeInOut from './SideNavigation.FadeInOut' -export interface Props { - className?: string - collapsed?: boolean - href?: string - iconName?: string - count?: number - active?: boolean - danger?: boolean - muted?: boolean - disabled?: boolean - onClick: (event: Event) => void -} +import { ItemUI, ButtonUI, CountUI, IconUI } from './styles/SideNavigation.css' -export class Item extends React.PureComponent { +export class Item extends React.PureComponent { static defaultProps = { active: false, danger: false, diff --git a/src/components/SideNavigation/Section.tsx b/src/components/SideNavigation/SideNavigation.Section.tsx similarity index 76% rename from src/components/SideNavigation/Section.tsx rename to src/components/SideNavigation/SideNavigation.Section.tsx index 7f7d64aa7..8579f0aa9 100644 --- a/src/components/SideNavigation/Section.tsx +++ b/src/components/SideNavigation/SideNavigation.Section.tsx @@ -3,17 +3,12 @@ import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { COMPONENT_KEY } from './SideNavigation.utils' +import { SideNavigationSectionProps } from './SideNavigation.types' import { propConnect } from '../PropProvider' -import { SectionUI, SectionHeadingUI } from './SideNavigation.css' -import FadeInOut from './FadeInOut' +import { SectionUI, SectionHeadingUI } from './styles/SideNavigation.css' +import FadeInOut from './SideNavigation.FadeInOut' -export interface Props { - className?: string - title?: string - withPadding?: boolean -} - -export class Section extends React.PureComponent { +export class Section extends React.PureComponent { static defaultProps = { withPadding: false, } diff --git a/src/components/SideNavigation/SideNavigation.tsx b/src/components/SideNavigation/SideNavigation.tsx index ec27143be..40ddc39ed 100644 --- a/src/components/SideNavigation/SideNavigation.tsx +++ b/src/components/SideNavigation/SideNavigation.tsx @@ -3,34 +3,30 @@ import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import PropProvider from '../PropProvider' -import Button from './Button' -import DropdownHeader from './DropdownHeader' -import DropdownFooter from './DropdownFooter' -import FadeInOut from './FadeInOut' -import Footer from './Footer' -import Header from './Header' -import Heading from './Heading' -import Item from './Item' -import Section from './Section' +import Button from './SideNavigation.Button' +import DropdownHeader from './SideNavigation.DropdownHeader' +import DropdownFooter from './SideNavigation.DropdownFooter' +import FadeInOut from './SideNavigation.FadeInOut' +import Footer from './SideNavigation.Footer' +import Header from './SideNavigation.Header' +import Heading from './SideNavigation.Heading' +import Item from './SideNavigation.Item' +import Section from './SideNavigation.Section' import { COMPONENT_KEY } from './SideNavigation.utils' +import { + SideNavigationProps, + SideNavigationState, +} from './SideNavigation.types' import { SideNavigationUI, SideNavigationCollapsableUI, -} from './SideNavigation.css' - -export interface Props { - className?: string - width?: number - collapsable?: boolean - collapsed?: boolean - floatingMenu?: boolean -} -export interface States { - dropdowns: string[] -} +} from './styles/SideNavigation.css' -export class SideNavigation extends React.PureComponent { +export class SideNavigation extends React.PureComponent< + SideNavigationProps, + SideNavigationState +> { static defaultProps = {} static Button = Button diff --git a/src/components/SideNavigation/SideNavigation.types.ts b/src/components/SideNavigation/SideNavigation.types.ts new file mode 100644 index 000000000..e5b7f7a71 --- /dev/null +++ b/src/components/SideNavigation/SideNavigation.types.ts @@ -0,0 +1,78 @@ +export interface SideNavigationProps { + className?: string + width?: number + collapsable?: boolean + collapsed?: boolean + floatingMenu?: boolean +} +export interface SideNavigationState { + dropdowns: string[] +} + +export interface SideNavigationButtonProps { + className?: string + floatingMenu?: boolean + iconName?: string + icon?: Element +} + +export interface SideNavigationDropdownFooterProps { + className?: string + items: Array + selectedItem: any + floatingMenu?: boolean + iconName: string + forceNavVisibleOn(id: string) + forceNavVisibleOff(id: string) +} + +export interface SideNavigationDropdownHeaderProps { + className?: string + items: Array + selectedItem: any + forceNavVisibleOn(id: string) + forceNavVisibleOff(id: string) +} + +export interface SideNavigationFadeInOutProps { + className?: string + collapsable?: boolean +} + +export interface SideNavigationFooterProps { + className?: string + collapsable?: boolean + collapsed?: boolean + floatingMenu?: boolean +} + +export interface SideNavigationHeaderProps { + badge?: string + collapsable?: boolean + className?: string + href?: string + label?: string +} + +export interface SideNavigationHeadingProps { + className?: string +} + +export interface SideNavigationItemProps { + className?: string + collapsed?: boolean + href?: string + iconName?: string + count?: number + active?: boolean + danger?: boolean + muted?: boolean + disabled?: boolean + onClick: (event: Event) => void +} + +export interface SideNavigationSectionProps { + className?: string + title?: string + withPadding?: boolean +} diff --git a/src/components/SideNavigation/__tests__/SideNavigation.Button.test.js b/src/components/SideNavigation/__tests__/SideNavigation.Button.test.js index b7fbe1bd9..90135c6b7 100644 --- a/src/components/SideNavigation/__tests__/SideNavigation.Button.test.js +++ b/src/components/SideNavigation/__tests__/SideNavigation.Button.test.js @@ -1,7 +1,7 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' import SideNavigation from '../SideNavigation' -import { ButtonUI, ButtonFooterUI } from '../SideNavigation.css' +import { ButtonUI, ButtonFooterUI } from '../styles/SideNavigation.css' import Icon from '../../Icon' describe('ClassName', () => { diff --git a/src/components/SideNavigation/__tests__/SideNavigation.DropdownFooter.test.js b/src/components/SideNavigation/__tests__/SideNavigation.DropdownFooter.test.js index 3b04098fc..94c65504d 100644 --- a/src/components/SideNavigation/__tests__/SideNavigation.DropdownFooter.test.js +++ b/src/components/SideNavigation/__tests__/SideNavigation.DropdownFooter.test.js @@ -1,7 +1,7 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' import SideNavigation from '../SideNavigation' -import {} from '../SideNavigation.css' +import {} from '../styles/SideNavigation.css' import Dropdown from '../../Dropdown/DropdownV2' import { Trigger } from '../../Dropdown/V2/Dropdown.Trigger' import Icon from '../../Icon/Icon' diff --git a/src/components/SideNavigation/__tests__/SideNavigation.DropdownHeader.test.js b/src/components/SideNavigation/__tests__/SideNavigation.DropdownHeader.test.js index ce1c8d4f1..53b262b50 100644 --- a/src/components/SideNavigation/__tests__/SideNavigation.DropdownHeader.test.js +++ b/src/components/SideNavigation/__tests__/SideNavigation.DropdownHeader.test.js @@ -1,14 +1,9 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' import SideNavigation from '../SideNavigation' -import {} from '../SideNavigation.css' -import Icon from '../../Icon' import AutoDropdown from '../../AutoDropdown/AutoDropdown' -import { ItemSpec } from '../../../../stories/DropdownV2.stories' import { Trigger } from '../../Dropdown/V2/Dropdown.Trigger' -const items = ItemSpec.generate(3) - describe('ClassName', () => { test('Has default className', () => { const wrapper = mount() diff --git a/src/components/SideNavigation/__tests__/SideNavigation.FadeInOut.test.js b/src/components/SideNavigation/__tests__/SideNavigation.FadeInOut.test.js index 58bb9aff9..c637f6ad2 100644 --- a/src/components/SideNavigation/__tests__/SideNavigation.FadeInOut.test.js +++ b/src/components/SideNavigation/__tests__/SideNavigation.FadeInOut.test.js @@ -1,8 +1,7 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' import SideNavigation from '../SideNavigation' -import FadeInOut from '../FadeInOut' -import { FadeInOutUI } from '../SideNavigation.css' +import { FadeInOutUI } from '../styles/SideNavigation.css' describe('ClassName', () => { test('Has default className if collapsable', () => { diff --git a/src/components/SideNavigation/__tests__/SideNavigation.Footer.test.js b/src/components/SideNavigation/__tests__/SideNavigation.Footer.test.js index 159d95f18..b37938a7c 100644 --- a/src/components/SideNavigation/__tests__/SideNavigation.Footer.test.js +++ b/src/components/SideNavigation/__tests__/SideNavigation.Footer.test.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' import SideNavigation from '../SideNavigation' import Icon from '../../Icon' diff --git a/src/components/SideNavigation/__tests__/SideNavigation.Header.test.js b/src/components/SideNavigation/__tests__/SideNavigation.Header.test.js index 385142dc2..ec407c528 100644 --- a/src/components/SideNavigation/__tests__/SideNavigation.Header.test.js +++ b/src/components/SideNavigation/__tests__/SideNavigation.Header.test.js @@ -1,8 +1,8 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' import SideNavigation from '../SideNavigation' -import FadeInOut from '../FadeInOut' -import { BadgeUI } from '../SideNavigation.css' +import FadeInOut from '../SideNavigation.FadeInOut' +import { BadgeUI } from '../styles/SideNavigation.css' describe('ClassName', () => { test('Has default className', () => { diff --git a/src/components/SideNavigation/__tests__/SideNavigation.Item.test.js b/src/components/SideNavigation/__tests__/SideNavigation.Item.test.js index dad3a8ee4..28b9edd4f 100644 --- a/src/components/SideNavigation/__tests__/SideNavigation.Item.test.js +++ b/src/components/SideNavigation/__tests__/SideNavigation.Item.test.js @@ -1,9 +1,8 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' import SideNavigation from '../SideNavigation' -import { ItemUI, CountUI, ButtonUI } from '../SideNavigation.css' +import { CountUI, ButtonUI } from '../styles/SideNavigation.css' import Icon from '../../Icon' -import { Button } from '../Button' describe('ClassName', () => { test('Has default className', () => { diff --git a/src/components/SideNavigation/__tests__/SideNavigation.Section.test.js b/src/components/SideNavigation/__tests__/SideNavigation.Section.test.js index c022b837b..be6a986b5 100644 --- a/src/components/SideNavigation/__tests__/SideNavigation.Section.test.js +++ b/src/components/SideNavigation/__tests__/SideNavigation.Section.test.js @@ -1,8 +1,8 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' import SideNavigation from '../SideNavigation' -import FadeInOut from '../FadeInOut' -import { SectionHeadingUI, SectionUI } from '../SideNavigation.css' +import FadeInOut from '../SideNavigation.FadeInOut' +import { SectionHeadingUI } from '../styles/SideNavigation.css' describe('ClassName', () => { test('Has default className', () => { diff --git a/src/components/SideNavigation/__tests__/SideNavigation.test.js b/src/components/SideNavigation/__tests__/SideNavigation.test.js index 21fba7c4c..feb82e29b 100644 --- a/src/components/SideNavigation/__tests__/SideNavigation.test.js +++ b/src/components/SideNavigation/__tests__/SideNavigation.test.js @@ -5,7 +5,7 @@ import { hasClass } from '../../../tests/helpers/enzyme' import { SideNavigationUI, SideNavigationCollapsableUI, -} from '../SideNavigation.css' +} from '../styles/SideNavigation.css' describe('className', () => { test('Has a default className', () => { diff --git a/src/components/SideNavigation/SideNavigation.css.js b/src/components/SideNavigation/styles/SideNavigation.css.js similarity index 93% rename from src/components/SideNavigation/SideNavigation.css.js rename to src/components/SideNavigation/styles/SideNavigation.css.js index 0ff7fd17b..8008bd2f5 100644 --- a/src/components/SideNavigation/SideNavigation.css.js +++ b/src/components/SideNavigation/styles/SideNavigation.css.js @@ -1,13 +1,13 @@ -import styled from '../styled' -import baseStyles from '../../styles/resets/baseStyles.css.js' -import { getColor } from '../../styles/utilities/color' +import styled from '../../styled' +import baseStyles from '../../../styles/resets/baseStyles.css' +import { getColor } from '../../../styles/utilities/color' -import Button from '../Button' -import Text from '../Text' -import Heading from '../Heading' +import Button from '../../Button' +import Text from '../../Text' +import Heading from '../../Heading' -import { DropdownUI, TriggerUI } from '../Dropdown/V2/Dropdown.css' -import { darken, lighten } from '../../utilities/color' +import { DropdownUI, TriggerUI } from '../../Dropdown/V2/Dropdown.css' +import { darken, lighten } from '../../../utilities/color' const config = { sidePadding: '18px', @@ -110,7 +110,7 @@ export const ButtonFooterUI = styled(Button)` height: 14px; top: calc(50% - 7px); width: 14px; - }z + } } ` diff --git a/src/components/SidebarCollapsibleCard/index.js b/src/components/SidebarCollapsibleCard/SidebarCollapsibleCard.tsx similarity index 82% rename from src/components/SidebarCollapsibleCard/index.js rename to src/components/SidebarCollapsibleCard/SidebarCollapsibleCard.tsx index f492fedb2..c8aa6aba8 100644 --- a/src/components/SidebarCollapsibleCard/index.js +++ b/src/components/SidebarCollapsibleCard/SidebarCollapsibleCard.tsx @@ -1,42 +1,27 @@ -import React, { PureComponent as Component } from 'react' -import PropTypes from 'prop-types' -import { - default as Collapsible, - propTypes as collapsibleTypes, -} from '../Collapsible' +import * as React from 'react' +import { createUniqueIDFactory } from '../../utilities/id' +import { noop } from '../../utilities/other' +import { classNames } from '../../utilities/classNames' import EventListener from '../EventListener' +import Collapsible from '../Collapsible' import Flexy from '../Flexy' import Heading from '../Heading' -import SortableDragHandle from '../Sortable/DragHandle' import Icon from '../Icon' -import { createUniqueIDFactory } from '../../utilities/id' -import { noop } from '../../utilities/other' -import { classNames } from '../../utilities/classNames' - -export const propTypes = Object.assign({}, collapsibleTypes, { - header: PropTypes.element, - title: PropTypes.string, - isOpen: PropTypes.bool, - sortable: PropTypes.bool, - onSortStart: PropTypes.func, - onSortEnd: PropTypes.func, -}) - -export const defaultProps = { - duration: 200, - durationOpen: 200, - durationClose: 100, - isOpen: false, - onSortStart: noop, - onSortEnd: noop, - sortable: false, -} +import SortableDragHandle from '../Sortable/Sortable.DragHandle' +import { + SidebarCollapsibleCardProps, + SidebarCollapsibleCardState, +} from './SidebarCollapsibleCard.types' const uniqueID = createUniqueIDFactory('SidebarCollapsibleCard') -class SidebarCollapsibleCard extends Component { +class SidebarCollapsibleCard extends React.PureComponent< + SidebarCollapsibleCardProps, + SidebarCollapsibleCardState +> { constructor(props) { - super() + super(props) + this.state = { id: props.id || uniqueID(), isOpen: props.isOpen, @@ -48,13 +33,26 @@ class SidebarCollapsibleCard extends Component { this.handleOnSortEnd = this.handleOnSortEnd.bind(this) } + static defaultProps = { + duration: 200, + durationOpen: 200, + durationClose: 100, + isOpen: false, + onSortStart: noop, + onSortEnd: noop, + sortable: false, + } + + isSorting: boolean + _prevIsOpen: boolean + componentWillUpdate(nextProps, nextState) { if (this.props.isOpen !== nextProps.isOpen) { this.handleToggleOpen() } } - handleToggleOpen(e) { + handleToggleOpen(e?) { e && e.preventDefault() this.setState({ isOpen: !this.state.isOpen }) } @@ -146,7 +144,7 @@ class SidebarCollapsibleCard extends Component { role="heading" aria-expanded={open} aria-controls={regionId} - tabIndex="1" + tabIndex={1} > {headerMarkup} @@ -177,7 +175,4 @@ class SidebarCollapsibleCard extends Component { } } -SidebarCollapsibleCard.propTypes = propTypes -SidebarCollapsibleCard.defaultProps = defaultProps - export default SidebarCollapsibleCard diff --git a/src/components/SidebarCollapsibleCard/SidebarCollapsibleCard.types.ts b/src/components/SidebarCollapsibleCard/SidebarCollapsibleCard.types.ts new file mode 100644 index 000000000..d32cdf4c9 --- /dev/null +++ b/src/components/SidebarCollapsibleCard/SidebarCollapsibleCard.types.ts @@ -0,0 +1,15 @@ +import { CollapsibleProps } from '../Collapsible/Collapsible.types' + +export interface SidebarCollapsibleCardProps extends CollapsibleProps { + header: HTMLElement + title: string + isOpen: boolean + sortable: boolean + onSortStart: () => void + onSortEnd: () => void +} + +export interface SidebarCollapsibleCardState { + isOpen: boolean + id: string +} diff --git a/src/components/SidebarCollapsibleCard/tests/SidebarCollapsibleCard.test.js b/src/components/SidebarCollapsibleCard/__tests__/SidebarCollapsibleCard.test.js similarity index 99% rename from src/components/SidebarCollapsibleCard/tests/SidebarCollapsibleCard.test.js rename to src/components/SidebarCollapsibleCard/__tests__/SidebarCollapsibleCard.test.js index e73c07d04..936cc5bde 100644 --- a/src/components/SidebarCollapsibleCard/tests/SidebarCollapsibleCard.test.js +++ b/src/components/SidebarCollapsibleCard/__tests__/SidebarCollapsibleCard.test.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' import SidebarCollapsibleCard from '..' diff --git a/src/components/SidebarCollapsibleCard/index.ts b/src/components/SidebarCollapsibleCard/index.ts new file mode 100644 index 000000000..1650f0af9 --- /dev/null +++ b/src/components/SidebarCollapsibleCard/index.ts @@ -0,0 +1,3 @@ +import SidebarCollapsibleCard from './SidebarCollapsibleCard' + +export default SidebarCollapsibleCard diff --git a/src/components/Skeleton/Avatar.js b/src/components/Skeleton/Skeleton.Avatar.tsx similarity index 63% rename from src/components/Skeleton/Avatar.js rename to src/components/Skeleton/Skeleton.Avatar.tsx index 1c578b18f..a7023c360 100644 --- a/src/components/Skeleton/Avatar.js +++ b/src/components/Skeleton/Skeleton.Avatar.tsx @@ -1,19 +1,18 @@ -// @flow -import type { AvatarShape, AvatarSize } from '../Avatar/types' -import React, { PureComponent as Component } from 'react' +import * as React from 'react' +import { AvatarShape, AvatarSize } from '../Avatar/Avatar.types' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' -import { AvatarUI } from './styles/Avatar.css.js' +import { COMPONENT_KEY } from './Skeleton.utils' +import { AvatarUI } from './styles/Skeleton.Avatar.css' export interface Props { - className?: string; - children?: any; - shape: AvatarShape; - size: AvatarSize; + className?: string + children?: any + shape: AvatarShape + size: AvatarSize } -class Avatar extends Component { +class Avatar extends React.PureComponent { static defaultProps = { size: 'md', shape: 'circle', diff --git a/src/components/Skeleton/Block.js b/src/components/Skeleton/Skeleton.Block.tsx similarity index 79% rename from src/components/Skeleton/Block.js rename to src/components/Skeleton/Skeleton.Block.tsx index e7e87996d..8417c6cc8 100644 --- a/src/components/Skeleton/Block.js +++ b/src/components/Skeleton/Skeleton.Block.tsx @@ -1,11 +1,11 @@ -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' -import { BlockUI } from './styles/Block.css.js' +import { COMPONENT_KEY } from './Skeleton.utils' +import { BlockUI } from './styles/Skeleton.Block.css' -class Block extends Component { +class Block extends React.PureComponent { static defaultProps = { withAnimations: true, } diff --git a/src/components/Skeleton/Control.js b/src/components/Skeleton/Skeleton.Control.tsx similarity index 72% rename from src/components/Skeleton/Control.js rename to src/components/Skeleton/Skeleton.Control.tsx index 4eff31812..1851abc00 100644 --- a/src/components/Skeleton/Control.js +++ b/src/components/Skeleton/Skeleton.Control.tsx @@ -1,10 +1,10 @@ -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' -import { ControlUI } from './styles/Control.css.js' +import { COMPONENT_KEY } from './Skeleton.utils' +import { ControlUI } from './styles/Skeleton.Control.css' -class Control extends Component { +class Control extends React.PureComponent { static defaultProps = { size: 'md', } diff --git a/src/components/Skeleton/Heading.js b/src/components/Skeleton/Skeleton.Heading.tsx similarity index 74% rename from src/components/Skeleton/Heading.js rename to src/components/Skeleton/Skeleton.Heading.tsx index d7d135a3f..20dbcc581 100644 --- a/src/components/Skeleton/Heading.js +++ b/src/components/Skeleton/Skeleton.Heading.tsx @@ -1,10 +1,10 @@ -import React, { PureComponent as Component } from 'react' -import Text from './Text' +import * as React from 'react' +import Text from './Skeleton.Text' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Skeleton.utils' -class Heading extends Component { +class Heading extends React.PureComponent { static defaultProps = { style: {}, width: '70%', @@ -14,7 +14,6 @@ class Heading extends Component { const { className, ...rest } = this.props const componentClassName = classNames('c-SkeletonHeading', className) - return } } diff --git a/src/components/Skeleton/Image.js b/src/components/Skeleton/Skeleton.Image.tsx similarity index 68% rename from src/components/Skeleton/Image.js rename to src/components/Skeleton/Skeleton.Image.tsx index 04913c354..d9d8ae597 100644 --- a/src/components/Skeleton/Image.js +++ b/src/components/Skeleton/Skeleton.Image.tsx @@ -1,10 +1,10 @@ -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' -import { ImageUI } from './styles/Image.css.js' +import { COMPONENT_KEY } from './Skeleton.utils' +import { ImageUI } from './styles/Skeleton.Image.css' -class Image extends Component { +class Image extends React.PureComponent { render() { const { className, ...rest } = this.props diff --git a/src/components/Skeleton/Paragraph.js b/src/components/Skeleton/Skeleton.Paragraph.tsx similarity index 82% rename from src/components/Skeleton/Paragraph.js rename to src/components/Skeleton/Skeleton.Paragraph.tsx index 1cd6ccc0d..9ba94f70c 100644 --- a/src/components/Skeleton/Paragraph.js +++ b/src/components/Skeleton/Skeleton.Paragraph.tsx @@ -1,11 +1,11 @@ -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' -import Text from './Text' +import Text from './Skeleton.Text' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Skeleton.utils' -class Paragraph extends Component { +class Paragraph extends React.PureComponent { render() { const { className, withAnimations, ...rest } = this.props diff --git a/src/components/Skeleton/Text.js b/src/components/Skeleton/Skeleton.Text.tsx similarity index 77% rename from src/components/Skeleton/Text.js rename to src/components/Skeleton/Skeleton.Text.tsx index c2b7b2f3f..91bb597e9 100644 --- a/src/components/Skeleton/Text.js +++ b/src/components/Skeleton/Skeleton.Text.tsx @@ -1,12 +1,13 @@ -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' -import { TextUI } from './styles/Text.css.js' +import { COMPONENT_KEY } from './Skeleton.utils' +import { TextUI } from './styles/Skeleton.Text.css' -class Text extends Component { +class Text extends React.PureComponent { static defaultProps = { heading: false, + withAnimations: false, style: {}, width: '70%', } diff --git a/src/components/Skeleton/utils.js b/src/components/Skeleton/Skeleton.utils.ts similarity index 100% rename from src/components/Skeleton/utils.js rename to src/components/Skeleton/Skeleton.utils.ts diff --git a/src/components/Skeleton/__tests__/Avatar.test.js b/src/components/Skeleton/__tests__/Skeleton.Avatar.test.js similarity index 92% rename from src/components/Skeleton/__tests__/Avatar.test.js rename to src/components/Skeleton/__tests__/Skeleton.Avatar.test.js index 8dec0c404..e00b78800 100644 --- a/src/components/Skeleton/__tests__/Avatar.test.js +++ b/src/components/Skeleton/__tests__/Skeleton.Avatar.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import Avatar from '../Avatar' +import Avatar from '../Skeleton.Avatar' describe('className', () => { test('Has default className', () => { diff --git a/src/components/Skeleton/__tests__/Block.test.js b/src/components/Skeleton/__tests__/Skeleton.Block.test.js similarity index 94% rename from src/components/Skeleton/__tests__/Block.test.js rename to src/components/Skeleton/__tests__/Skeleton.Block.test.js index 69e26fc49..9a4756e73 100644 --- a/src/components/Skeleton/__tests__/Block.test.js +++ b/src/components/Skeleton/__tests__/Skeleton.Block.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import Block from '../Block' +import Block from '../Skeleton.Block' describe('className', () => { test('Has default className', () => { diff --git a/src/components/Skeleton/__tests__/Control.test.js b/src/components/Skeleton/__tests__/Skeleton.Control.test.js similarity index 90% rename from src/components/Skeleton/__tests__/Control.test.js rename to src/components/Skeleton/__tests__/Skeleton.Control.test.js index 5720310cb..653c378ae 100644 --- a/src/components/Skeleton/__tests__/Control.test.js +++ b/src/components/Skeleton/__tests__/Skeleton.Control.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import Control from '../Control' +import Control from '../Skeleton.Control' describe('className', () => { test('Has default className', () => { diff --git a/src/components/Skeleton/__tests__/Heading.test.js b/src/components/Skeleton/__tests__/Skeleton.Heading.test.js similarity index 90% rename from src/components/Skeleton/__tests__/Heading.test.js rename to src/components/Skeleton/__tests__/Skeleton.Heading.test.js index 2cdd5709d..cadcc88d9 100644 --- a/src/components/Skeleton/__tests__/Heading.test.js +++ b/src/components/Skeleton/__tests__/Skeleton.Heading.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import Heading from '../Heading' +import Heading from '../Skeleton.Heading' describe('className', () => { test('Has default className', () => { diff --git a/src/components/Skeleton/__tests__/Image.test.js b/src/components/Skeleton/__tests__/Skeleton.Image.test.js similarity index 88% rename from src/components/Skeleton/__tests__/Image.test.js rename to src/components/Skeleton/__tests__/Skeleton.Image.test.js index d6d21f90c..b268dfa0a 100644 --- a/src/components/Skeleton/__tests__/Image.test.js +++ b/src/components/Skeleton/__tests__/Skeleton.Image.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import Image from '../Image' +import Image from '../Skeleton.Image' describe('className', () => { test('Has default className', () => { diff --git a/src/components/Skeleton/__tests__/Paragraph.test.js b/src/components/Skeleton/__tests__/Skeleton.Paragraph.test.js similarity index 90% rename from src/components/Skeleton/__tests__/Paragraph.test.js rename to src/components/Skeleton/__tests__/Skeleton.Paragraph.test.js index 21aaf9e6c..0fbefce56 100644 --- a/src/components/Skeleton/__tests__/Paragraph.test.js +++ b/src/components/Skeleton/__tests__/Skeleton.Paragraph.test.js @@ -1,7 +1,7 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import Paragraph from '../Paragraph' -import Text from '../Text' +import Paragraph from '../Skeleton.Paragraph' +import Text from '../Skeleton.Text' describe('className', () => { test('Has default className', () => { diff --git a/src/components/Skeleton/__tests__/Text.test.js b/src/components/Skeleton/__tests__/Skeleton.Text.test.js similarity index 96% rename from src/components/Skeleton/__tests__/Text.test.js rename to src/components/Skeleton/__tests__/Skeleton.Text.test.js index 7f4310d07..932eb5810 100644 --- a/src/components/Skeleton/__tests__/Text.test.js +++ b/src/components/Skeleton/__tests__/Skeleton.Text.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import Text from '../Text' +import Text from '../Skeleton.Text' describe('className', () => { test('Has default className', () => { diff --git a/src/components/Skeleton/index.js b/src/components/Skeleton/index.js deleted file mode 100644 index 0aa3c8067..000000000 --- a/src/components/Skeleton/index.js +++ /dev/null @@ -1,23 +0,0 @@ -// @flow -import { propConnect } from '../PropProvider' -import { COMPONENT_KEY } from './utils' - -import Avatar from './Avatar' -import Block from './Block' -import Control from './Control' -import Heading from './Heading' -import Image from './Image' -import Paragraph from './Paragraph' -import Text from './Text' - -const Skeleton = {} - -Skeleton.Avatar = propConnect(COMPONENT_KEY.Avatar)(Avatar) -Skeleton.Block = propConnect(COMPONENT_KEY.Block)(Block) -Skeleton.Control = propConnect(COMPONENT_KEY.Control)(Control) -Skeleton.Heading = propConnect(COMPONENT_KEY.Heading)(Heading) -Skeleton.Image = propConnect(COMPONENT_KEY.Image)(Image) -Skeleton.Paragraph = propConnect(COMPONENT_KEY.Paragraph)(Paragraph) -Skeleton.Text = propConnect(COMPONENT_KEY.Text)(Text) - -export default Skeleton diff --git a/src/components/Skeleton/index.ts b/src/components/Skeleton/index.ts new file mode 100644 index 000000000..8468306c0 --- /dev/null +++ b/src/components/Skeleton/index.ts @@ -0,0 +1,22 @@ +import { propConnect } from '../PropProvider' +import { COMPONENT_KEY } from './Skeleton.utils' + +import Avatar from './Skeleton.Avatar' +import Block from './Skeleton.Block' +import Control from './Skeleton.Control' +import Heading from './Skeleton.Heading' +import Image from './Skeleton.Image' +import Paragraph from './Skeleton.Paragraph' +import Text from './Skeleton.Text' + +const Skeleton = { + Avatar: propConnect(COMPONENT_KEY.Avatar)(Avatar), + Block: propConnect(COMPONENT_KEY.Block)(Block), + Control: propConnect(COMPONENT_KEY.Control)(Control), + Heading: propConnect(COMPONENT_KEY.Heading)(Heading), + Image: propConnect(COMPONENT_KEY.Image)(Image), + Paragraph: propConnect(COMPONENT_KEY.Paragraph)(Paragraph), + Text: propConnect(COMPONENT_KEY.Text)(Text), +} + +export default Skeleton diff --git a/src/components/Skeleton/styles/Avatar.css.js b/src/components/Skeleton/styles/Skeleton.Avatar.css.ts similarity index 85% rename from src/components/Skeleton/styles/Avatar.css.js rename to src/components/Skeleton/styles/Skeleton.Avatar.css.ts index 14aab5bb5..f34ec8e45 100644 --- a/src/components/Skeleton/styles/Avatar.css.js +++ b/src/components/Skeleton/styles/Skeleton.Avatar.css.ts @@ -1,6 +1,6 @@ import styled from '../../styled' -import Block from '../Block' -import { config as avatarConfig } from '../../Avatar/Avatar.css' +import Block from '../Skeleton.Block' +import { config as avatarConfig } from '../../Avatar/styles/Avatar.css' import forEach from '../../../styles/utilities/forEach' export const config = { diff --git a/src/components/Skeleton/styles/Block.css.js b/src/components/Skeleton/styles/Skeleton.Block.css.ts similarity index 100% rename from src/components/Skeleton/styles/Block.css.js rename to src/components/Skeleton/styles/Skeleton.Block.css.ts diff --git a/src/components/Skeleton/styles/Control.css.js b/src/components/Skeleton/styles/Skeleton.Control.css.ts similarity index 93% rename from src/components/Skeleton/styles/Control.css.js rename to src/components/Skeleton/styles/Skeleton.Control.css.ts index 7e02e2655..cb297f0c1 100644 --- a/src/components/Skeleton/styles/Control.css.js +++ b/src/components/Skeleton/styles/Skeleton.Control.css.ts @@ -1,5 +1,5 @@ import styled from '../../styled' -import Block from '../Block' +import Block from '../Skeleton.Block' import forEach from '../../../styles/utilities/forEach' export const config = { diff --git a/src/components/Skeleton/styles/Image.css.js b/src/components/Skeleton/styles/Skeleton.Image.css.ts similarity index 81% rename from src/components/Skeleton/styles/Image.css.js rename to src/components/Skeleton/styles/Skeleton.Image.css.ts index 279f4e149..dc3cd0099 100644 --- a/src/components/Skeleton/styles/Image.css.js +++ b/src/components/Skeleton/styles/Skeleton.Image.css.ts @@ -1,5 +1,5 @@ import styled from '../../styled' -import Block from '../Block' +import Block from '../Skeleton.Block' export const ImageUI = styled(Block)` border-radius: 4px; diff --git a/src/components/Skeleton/styles/Text.css.js b/src/components/Skeleton/styles/Skeleton.Text.css.ts similarity index 87% rename from src/components/Skeleton/styles/Text.css.js rename to src/components/Skeleton/styles/Skeleton.Text.css.ts index c53076488..a91c4c411 100644 --- a/src/components/Skeleton/styles/Text.css.js +++ b/src/components/Skeleton/styles/Skeleton.Text.css.ts @@ -1,5 +1,5 @@ import styled from '../../styled' -import Block from '../Block' +import Block from '../Skeleton.Block' export const TextUI = styled(Block)` border-radius: 9999px; diff --git a/src/components/SleepDetector/index.js b/src/components/SleepDetector/SleepDetector.tsx similarity index 59% rename from src/components/SleepDetector/index.js rename to src/components/SleepDetector/SleepDetector.tsx index a5b86ccb4..2b60643fd 100644 --- a/src/components/SleepDetector/index.js +++ b/src/components/SleepDetector/SleepDetector.tsx @@ -1,10 +1,31 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' +import * as React from 'react' import { noop } from '../../utilities/other' -class SleepDetector extends Component { - constructor() { - super() +export interface SleepDetectorProps { + buffer: number + interval: number + onWake: (fn?) => void +} + +export interface SleepDetectorState { + lastRun: number + intervalId: number +} + +class SleepDetector extends React.Component< + SleepDetectorProps, + SleepDetectorState +> { + static defaultProps = { + buffer: 5000, + interval: 10000, + onWake: noop, + } + + constructor(props) { + super(props) + // TODO: fix typescript complains + // @ts-ignore this.state = {} } @@ -24,6 +45,8 @@ class SleepDetector extends Component { }, interval) const lastRun = Date.now() + // TODO: fix typescript complains + // @ts-ignore this.setState({ intervalId, lastRun }) } @@ -41,16 +64,4 @@ class SleepDetector extends Component { } } -SleepDetector.propTypes = { - buffer: PropTypes.number, - interval: PropTypes.number, - onWake: PropTypes.func.isRequired, -} - -SleepDetector.defaultProps = { - buffer: 5000, - interval: 10000, - onWake: noop, -} - export default SleepDetector diff --git a/src/components/SleepDetector/tests/SleepDetector.test.js b/src/components/SleepDetector/__tests__/SleepDetector.test.js similarity index 94% rename from src/components/SleepDetector/tests/SleepDetector.test.js rename to src/components/SleepDetector/__tests__/SleepDetector.test.js index 0c1276551..b233a0c69 100644 --- a/src/components/SleepDetector/tests/SleepDetector.test.js +++ b/src/components/SleepDetector/__tests__/SleepDetector.test.js @@ -1,7 +1,7 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' import sinon from 'sinon' -import SleepDetector from '../index' +import SleepDetector from '../SleepDetector' describe('SleepDetector', () => { let clock, now diff --git a/src/components/SleepDetector/index.ts b/src/components/SleepDetector/index.ts new file mode 100644 index 000000000..88cbe362c --- /dev/null +++ b/src/components/SleepDetector/index.ts @@ -0,0 +1,3 @@ +import SleepDetector from './SleepDetector' + +export default SleepDetector diff --git a/src/components/Sortable/DragHandle.js b/src/components/Sortable/Sortable.DragHandle.tsx similarity index 70% rename from src/components/Sortable/DragHandle.js rename to src/components/Sortable/Sortable.DragHandle.tsx index 27bf8bcb7..3f580414a 100644 --- a/src/components/Sortable/DragHandle.js +++ b/src/components/Sortable/Sortable.DragHandle.tsx @@ -1,14 +1,10 @@ -import React from 'react' -import PropTypes from 'prop-types' +import * as React from 'react' import { SortableHandle } from 'react-sortable-hoc' +import getValidProps from '@helpscout/react-utils/dist/getValidProps' import Icon from '../Icon' import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' -export const propTypes = { - onDragStart: PropTypes.func, -} - const defaultProps = { onDragStart: noop, } @@ -19,13 +15,16 @@ const DragHandle = SortableHandle(props => { const componentClassName = classNames('c-SortableDragHandle', className) return ( -
+
) }) -DragHandle.propTypes = propTypes DragHandle.defaultProps = defaultProps export default DragHandle diff --git a/src/components/Sortable/Item.js b/src/components/Sortable/Sortable.Item.tsx similarity index 63% rename from src/components/Sortable/Item.js rename to src/components/Sortable/Sortable.Item.tsx index 2b6ae8208..656011163 100644 --- a/src/components/Sortable/Item.js +++ b/src/components/Sortable/Sortable.Item.tsx @@ -1,15 +1,9 @@ -import React from 'react' -import PropTypes from 'prop-types' +import * as React from 'react' +import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { SortableElement } from 'react-sortable-hoc' -import DragHandle from './DragHandle' +import DragHandle from './Sortable.DragHandle' import { classNames } from '../../utilities/classNames' -export const propTypes = { - classNames: PropTypes.string, - hideDragHandles: PropTypes.bool, - useDragHandle: PropTypes.bool, -} - const Item = SortableElement(props => { const { className, @@ -26,13 +20,15 @@ const Item = SortableElement(props => { useDragHandle && !hideDragHandles ? : null return ( -
+
{dragHandleMarkup} {children}
) }) -Item.propTypes = propTypes +Item.defaultProps = { + index: 0, +} export default Item diff --git a/src/components/Sortable/List.js b/src/components/Sortable/Sortable.List.tsx similarity index 72% rename from src/components/Sortable/List.js rename to src/components/Sortable/Sortable.List.tsx index 67c6216bf..4700d326d 100644 --- a/src/components/Sortable/List.js +++ b/src/components/Sortable/Sortable.List.tsx @@ -1,12 +1,7 @@ -import React from 'react' -import PropTypes from 'prop-types' +import * as React from 'react' +import getValidProps from '@helpscout/react-utils/dist/getValidProps' import { SortableContainer } from 'react-sortable-hoc' import { classNames } from '../../utilities/classNames' -import { listTypes } from './propTypes' - -export const propTypes = Object.assign({}, listTypes, { - items: PropTypes.array, -}) const List = SortableContainer(props => { const { @@ -34,12 +29,10 @@ const List = SortableContainer(props => { : null return ( -
+
{itemsMarkup}
) }) -List.propTypes = propTypes - export default List diff --git a/src/components/Sortable/index.js b/src/components/Sortable/Sortable.tsx similarity index 74% rename from src/components/Sortable/index.js rename to src/components/Sortable/Sortable.tsx index ca24f0cbb..7882d6b20 100644 --- a/src/components/Sortable/index.js +++ b/src/components/Sortable/Sortable.tsx @@ -1,30 +1,31 @@ -import React, { PureComponent as Component } from 'react' -import { arrayMove } from 'react-sortable-hoc' +import * as React from 'react' +import arrayMove from 'array-move' import { classNames } from '../../utilities/classNames' -import DragHandle from './DragHandle' -import Item from './Item' -import List from './List' -import { listTypes } from './propTypes' +import DragHandle from './Sortable.DragHandle' +import Item from './Sortable.Item' +import List from './Sortable.List' +import { SortableProps } from './Sortable.types' import { includes } from '../../utilities/arrays' import { noop } from '../../utilities/other' -export const propTypes = listTypes +export { default as arrayMove } from 'array-move' -const defaultProps = { - onSortStart: noop, - onSortMove: noop, - onSortEnd: noop, -} +class Sortable extends React.PureComponent { + constructor(props) { + super(props) -class Sortable extends Component { - constructor() { - super() this.state = { items: [], } this.onSortEnd = this.onSortEnd.bind(this) } + static defaultProps = { + onSortStart: noop, + onSortMove: noop, + onSortEnd: noop, + } + componentWillMount() { this.remapChildrenToState() } @@ -41,7 +42,7 @@ class Sortable extends Component { remapChildrenToState(children = this.props.children) { if (!children) return - const items = React.Children.map(children, (child, index) => { + const items = React.Children.map(children, (child: any, index) => { const sortableElement = includes( child.type.displayName, 'sortableElement' @@ -57,12 +58,14 @@ class Sortable extends Component { const childProps = child.props.sortable !== undefined ? { sortable: true } : {} + return ( {React.cloneElement(child, childProps)} ) }) + this.setState({ items }) } @@ -72,6 +75,8 @@ class Sortable extends Component { onSortEnd({ oldIndex, newIndex, collection }, event) { /* istanbul ignore next */ this.setState({ + // TODO: fix typescript complains + // @ts-ignore items: arrayMove(this.state.items, oldIndex, newIndex), }) /* istanbul ignore next */ @@ -89,6 +94,8 @@ class Sortable extends Component { onSortEnd, ...rest } = this.props + // TODO: fix typescript complains + // @ts-ignore const { items } = this.state const componentClassName = classNames('c-Sortable', className) @@ -109,10 +116,14 @@ class Sortable extends Component { } } -Sortable.propTypes = propTypes -Sortable.defaultProps = defaultProps +// TODO: fix typescript complains +// @ts-ignore Sortable.DragHandle = DragHandle +// TODO: fix typescript complains +// @ts-ignore Sortable.Item = Item +// TODO: fix typescript complains +// @ts-ignore Sortable.List = List export default Sortable diff --git a/src/components/Sortable/Sortable.types.ts b/src/components/Sortable/Sortable.types.ts new file mode 100644 index 000000000..da44d42f7 --- /dev/null +++ b/src/components/Sortable/Sortable.types.ts @@ -0,0 +1,22 @@ +export interface SortableProps { + axis: 'x' | 'y' | 'xy' + className: string + distance: number + lockAxis: string + helperClass: string + hideDragHandles: boolean + transitionDuration: number + contentWindow: any + onSortStart: () => void + onSortMove: () => void + onSortEnd: (...args: any[]) => void + shouldCancelStart: () => void + pressDelay: number + useDragHandle: boolean + useWindowAsScrollContainer: boolean + hideSortableGhost: boolean + lockToContainerEdges: boolean + lockOffset: number | string | Array + getContainer: () => void + getHelperDimensions: () => void +} diff --git a/src/components/Sortable/tests/DragHandle.test.js b/src/components/Sortable/__tests__/Sortable.DragHandle.test.js similarity index 86% rename from src/components/Sortable/tests/DragHandle.test.js rename to src/components/Sortable/__tests__/Sortable.DragHandle.test.js index 0ed29a02a..fb78582f4 100644 --- a/src/components/Sortable/tests/DragHandle.test.js +++ b/src/components/Sortable/__tests__/Sortable.DragHandle.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import DragHandle from '../DragHandle' +import DragHandle from '../Sortable.DragHandle' describe('ClassName', () => { test('Has default className', () => { diff --git a/src/components/Sortable/tests/List.test.js b/src/components/Sortable/__tests__/Sortable.List.test.js similarity index 87% rename from src/components/Sortable/tests/List.test.js rename to src/components/Sortable/__tests__/Sortable.List.test.js index 84b8773c5..20ba2aa55 100644 --- a/src/components/Sortable/tests/List.test.js +++ b/src/components/Sortable/__tests__/Sortable.List.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import List from '../List' +import List from '../Sortable.List' describe('ClassName', () => { test('Has default className', () => { diff --git a/src/components/Sortable/tests/Sortable.test.js b/src/components/Sortable/__tests__/Sortable.test.js similarity index 97% rename from src/components/Sortable/tests/Sortable.test.js rename to src/components/Sortable/__tests__/Sortable.test.js index 9de819d3d..d2e0cc980 100644 --- a/src/components/Sortable/tests/Sortable.test.js +++ b/src/components/Sortable/__tests__/Sortable.test.js @@ -1,8 +1,8 @@ -import React from 'react' +import * as React from 'react' import { mount, shallow } from 'enzyme' -import Sortable from '..' -import List from '../List' -import SortableItem from '../Item' +import Sortable from '../Sortable' +import List from '../Sortable.List' +import SortableItem from '../Sortable.Item' import SidebarCollapsibleCard from '../../SidebarCollapsibleCard' describe('ClassName', () => { diff --git a/src/components/Sortable/index.ts b/src/components/Sortable/index.ts new file mode 100644 index 000000000..6e8d9ad13 --- /dev/null +++ b/src/components/Sortable/index.ts @@ -0,0 +1,3 @@ +import Sortable from './Sortable' + +export default Sortable diff --git a/src/components/Sortable/propTypes.js b/src/components/Sortable/propTypes.js deleted file mode 100644 index 766e9dd51..000000000 --- a/src/components/Sortable/propTypes.js +++ /dev/null @@ -1,30 +0,0 @@ -import PropTypes from 'prop-types' - -export const listTypes = { - axis: PropTypes.oneOf(['x', 'y', 'xy']), - className: PropTypes.string, - distance: PropTypes.number, - lockAxis: PropTypes.string, - helperClass: PropTypes.string, - hideDragHandles: PropTypes.bool, - transitionDuration: PropTypes.number, - contentWindow: PropTypes.any, - onSortStart: PropTypes.func, - onSortMove: PropTypes.func, - onSortEnd: PropTypes.func, - shouldCancelStart: PropTypes.func, - pressDelay: PropTypes.number, - useDragHandle: PropTypes.bool, - useWindowAsScrollContainer: PropTypes.bool, - hideSortableGhost: PropTypes.bool, - lockToContainerEdges: PropTypes.bool, - lockOffset: PropTypes.oneOfType([ - PropTypes.number, - PropTypes.string, - PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.number, PropTypes.string]) - ), - ]), - getContainer: PropTypes.func, - getHelperDimensions: PropTypes.func, -} diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx index 79d432a1e..8564a3d71 100644 --- a/src/components/Spinner/Spinner.tsx +++ b/src/components/Spinner/Spinner.tsx @@ -3,18 +3,10 @@ import VisuallyHidden from '../VisuallyHidden' import { classNames } from '../../utilities/classNames' import { isString } from '../../utilities/is' import { legacySizes } from './Spinner.utils' -import { SpinnerUI, SpinnerSVGUI, SpinnerCircleUI } from './Spinner.css' +import { SpinnerUI, SpinnerSVGUI, SpinnerCircleUI } from './styles/Spinner.css' +import { SpinnerProps } from './Spinner.types' -export interface Props { - className?: string - color: string - shade: string - isRounded: boolean - speed: number - size: string | number -} - -export class Spinner extends React.PureComponent { +export class Spinner extends React.PureComponent { static className = 'c-Spinner' static defaultProps = { color: 'currentColor', diff --git a/src/components/Spinner/Spinner.types.ts b/src/components/Spinner/Spinner.types.ts index e69de29bb..53a50c873 100644 --- a/src/components/Spinner/Spinner.types.ts +++ b/src/components/Spinner/Spinner.types.ts @@ -0,0 +1,8 @@ +export interface SpinnerProps { + className?: string + color: string + shade: string + isRounded: boolean + speed: number + size: string | number +} diff --git a/src/components/Spinner/Spinner.css.ts b/src/components/Spinner/styles/Spinner.css.ts similarity index 94% rename from src/components/Spinner/Spinner.css.ts rename to src/components/Spinner/styles/Spinner.css.ts index 837d9375b..43a1a8772 100644 --- a/src/components/Spinner/Spinner.css.ts +++ b/src/components/Spinner/styles/Spinner.css.ts @@ -1,5 +1,5 @@ -import baseStyles from '../../styles/resets/base.css.js' -import styled from '../styled' +import baseStyles from '../../../styles/resets/base.css.js' +import styled from '../../styled' export const config = { defaultSize: 16, diff --git a/src/components/SplitButton/SplitButton.tsx b/src/components/SplitButton/SplitButton.tsx index cd85bb63d..f51ccfe85 100644 --- a/src/components/SplitButton/SplitButton.tsx +++ b/src/components/SplitButton/SplitButton.tsx @@ -7,7 +7,7 @@ import Button from '../Button' import ControlGroup from '../ControlGroup' import Icon from '../Icon' -import { OptionsTriggerButtonUI } from './SplitButton.css' +import { OptionsTriggerButtonUI } from './styles/SplitButton.css' import { COMPONENT_KEY } from './SplitButton.utils' export interface Props { diff --git a/src/components/SplitButton/SplitButton.css.ts b/src/components/SplitButton/styles/SplitButton.css.ts similarity index 80% rename from src/components/SplitButton/SplitButton.css.ts rename to src/components/SplitButton/styles/SplitButton.css.ts index 54ae69519..76a4cbc31 100644 --- a/src/components/SplitButton/SplitButton.css.ts +++ b/src/components/SplitButton/styles/SplitButton.css.ts @@ -1,6 +1,6 @@ -import styled from '../styled' -import Button from '../Button' -import { getColor } from '../../styles/utilities/color' +import styled from '../../styled' +import Button from '../../Button' +import { getColor } from '../../../styles/utilities/color' export const OptionsTriggerButtonUI = styled(Button)` min-width: 30px !important; @@ -9,7 +9,7 @@ export const OptionsTriggerButtonUI = styled(Button)` &.is-primary { box-shadow: -1px 0 0 ${getColor('blue.600')}; - &.is-success { + &.is-successß { box-shadow: -1px 0 0 ${getColor('green.600')}; } &.is-danger { diff --git a/src/components/StatusAvatar/StatusAvatar.js b/src/components/StatusAvatar/StatusAvatar.tsx similarity index 69% rename from src/components/StatusAvatar/StatusAvatar.js rename to src/components/StatusAvatar/StatusAvatar.tsx index 29cec8cff..7a3922177 100644 --- a/src/components/StatusAvatar/StatusAvatar.js +++ b/src/components/StatusAvatar/StatusAvatar.tsx @@ -1,23 +1,23 @@ -// @flow -import type { AvatarShape, AvatarSize } from '../Avatar/types' -import React, { PureComponent as Component } from 'react' +import * as React from 'react' +import propConnect from '../PropProvider/propConnect' +import { AvatarShape, AvatarSize } from '../Avatar/Avatar.types' import Avatar from '../Avatar' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './StatusAvatar.utils' type Props = { - className?: string, - isOnline: boolean, - shape: AvatarShape, - size: AvatarSize, + className?: string + isOnline: boolean + shape: AvatarShape + size: AvatarSize } /** * A enhanced wrapper that for Avatar, allowing for an easier way to indicate * Avatar state. */ -class StatusAvatar extends Component { +class StatusAvatar extends React.PureComponent { static defaultProps = { isOnline: true, shape: 'circle', @@ -49,4 +49,4 @@ class StatusAvatar extends Component { namespaceComponent(COMPONENT_KEY)(StatusAvatar) -export default StatusAvatar +export default propConnect(COMPONENT_KEY)(StatusAvatar) diff --git a/src/components/StatusAvatar/utils.js b/src/components/StatusAvatar/StatusAvatar.utils.ts similarity index 100% rename from src/components/StatusAvatar/utils.js rename to src/components/StatusAvatar/StatusAvatar.utils.ts diff --git a/src/components/StatusAvatar/__tests__/StatusAvatar.test.js b/src/components/StatusAvatar/__tests__/StatusAvatar.test.js index d3e7f448a..b1c0d6f9b 100644 --- a/src/components/StatusAvatar/__tests__/StatusAvatar.test.js +++ b/src/components/StatusAvatar/__tests__/StatusAvatar.test.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' import { Avatar } from '../../index' import StatusAvatar from '../StatusAvatar' diff --git a/src/components/StatusAvatar/index.js b/src/components/StatusAvatar/index.js deleted file mode 100644 index cabadac25..000000000 --- a/src/components/StatusAvatar/index.js +++ /dev/null @@ -1,5 +0,0 @@ -// @flow -import { propConnect } from '../PropProvider' -import StatusAvatar from './StatusAvatar' - -export default propConnect('StatusAvatar')(StatusAvatar) diff --git a/src/components/StatusAvatar/index.ts b/src/components/StatusAvatar/index.ts new file mode 100644 index 000000000..ad2b94b44 --- /dev/null +++ b/src/components/StatusAvatar/index.ts @@ -0,0 +1,3 @@ +import StatusAvatar from './StatusAvatar' + +export default StatusAvatar diff --git a/src/components/StatusBadge/index.js b/src/components/StatusBadge/StatusBadge.tsx similarity index 81% rename from src/components/StatusBadge/index.js rename to src/components/StatusBadge/StatusBadge.tsx index 54edd73d8..aaea914d4 100644 --- a/src/components/StatusBadge/index.js +++ b/src/components/StatusBadge/StatusBadge.tsx @@ -1,16 +1,9 @@ -import React from 'react' -import PropTypes from 'prop-types' +import * as React from 'react' import Animate from '../Animate' import Badge from '../Badge' import StatusDot from '../StatusDot' -import { statusTypes } from './propTypes' import { classNames } from '../../utilities/classNames' -export const propTypes = { - count: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - status: statusTypes, -} - const defaultProps = { count: 0, } @@ -31,6 +24,7 @@ const StatusBadge = props => { title, ...rest } = props + const statusDotProps = { borderColor, outerBorderColor, @@ -59,7 +53,6 @@ const StatusBadge = props => { ) } -StatusBadge.propTypes = propTypes StatusBadge.defaultProps = defaultProps StatusBadge.displayName = 'StatusBadge' diff --git a/src/components/StatusBadge/StatusBadge.types.ts b/src/components/StatusBadge/StatusBadge.types.ts new file mode 100644 index 000000000..6cbbcc91b --- /dev/null +++ b/src/components/StatusBadge/StatusBadge.types.ts @@ -0,0 +1,8 @@ +export type statusTypes = + | 'online' + | 'offline' + | 'busy' + | 'new' + | 'active' + | 'inactive' + | '' diff --git a/src/components/StatusBadge/index.ts b/src/components/StatusBadge/index.ts new file mode 100644 index 000000000..d979fc333 --- /dev/null +++ b/src/components/StatusBadge/index.ts @@ -0,0 +1,3 @@ +import StatusBadge from './StatusBadge' + +export default StatusBadge diff --git a/src/components/StatusBadge/propTypes.js b/src/components/StatusBadge/propTypes.js deleted file mode 100644 index c5a54a394..000000000 --- a/src/components/StatusBadge/propTypes.js +++ /dev/null @@ -1,11 +0,0 @@ -import PropTypes from 'prop-types' - -export const statusTypes = PropTypes.oneOf([ - 'online', - 'offline', - 'busy', - 'new', - 'active', - 'inactive', - '', -]) diff --git a/src/components/StatusBadge/tests/StatusBadge.test.js b/src/components/StatusBadge/tests/StatusBadge.test.js index ad6851d98..857a59f6d 100644 --- a/src/components/StatusBadge/tests/StatusBadge.test.js +++ b/src/components/StatusBadge/tests/StatusBadge.test.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import StatusBadge from '../index' import { Animate, Badge, StatusDot } from '../../index' import { mount } from 'enzyme' diff --git a/src/components/StatusBar/Button.js b/src/components/StatusBar/StatusBar.Button.tsx similarity index 78% rename from src/components/StatusBar/Button.js rename to src/components/StatusBar/StatusBar.Button.tsx index 0d8c46413..19e0371fd 100644 --- a/src/components/StatusBar/Button.js +++ b/src/components/StatusBar/StatusBar.Button.tsx @@ -1,12 +1,7 @@ -import React from 'react' -import PropTypes from 'prop-types' +import * as React from 'react' import Icon from '../Icon' import { classNames } from '../../utilities/classNames' -export const propTypes = { - icon: PropTypes.string, -} - const Button = props => { const { children, className, icon, ...rest } = props @@ -24,7 +19,6 @@ const Button = props => { ) } -Button.propTypes = propTypes Button.displayName = 'StatusBarButton' export default Button diff --git a/src/components/StatusBar/index.js b/src/components/StatusBar/StatusBar.tsx similarity index 66% rename from src/components/StatusBar/index.js rename to src/components/StatusBar/StatusBar.tsx index 72d362423..cd5de61c0 100644 --- a/src/components/StatusBar/index.js +++ b/src/components/StatusBar/StatusBar.tsx @@ -1,38 +1,31 @@ -import React, { PureComponent as Component } from 'react' -import PropTypes from 'prop-types' -import { default as Collapsible, collapsibleTypes } from '../Collapsible' +import * as React from 'react' +import Collapsible from '../Collapsible' import Centralize from '../Centralize' -import Button from './Button' +import Button from './StatusBar.Button' import { classNames } from '../../utilities/classNames' -import { themeTypes } from './propTypes' import { noop } from '../../utilities/other' -import { statusTypes } from '../../constants/propTypes' +import { StatusBarProps, StatusBarState } from './StatusBar.types' -export const propTypes = Object.assign({}, collapsibleTypes, { - closeOnClick: PropTypes.bool, - statusTypes, - themeTypes, -}) - -const defaultProps = { - isOpen: false, - onClick: noop, - onClose: noop, - onOpen: noop, - closeOnClick: true, - status: 'info', - theme: 'light', -} - -class StatusBar extends Component { +class StatusBar extends React.PureComponent { constructor(props) { - super() + super(props) + this.state = { isOpen: props.isOpen, } this.handleOnClick = this.handleOnClick.bind(this) } + static defaultProps = { + isOpen: false, + onClick: noop, + onClose: noop, + onOpen: noop, + closeOnClick: true, + status: 'info', + theme: 'light', + } + componentWillReceiveProps(nextProps) { const { isOpen } = nextProps /* istanbul ignore else */ @@ -43,6 +36,7 @@ class StatusBar extends Component { handleOnClick() { const { closeOnClick, onClick } = this.props + if (closeOnClick) { this.setState({ isOpen: false }) } @@ -87,9 +81,8 @@ class StatusBar extends Component { } } -StatusBar.propTypes = propTypes -StatusBar.defaultProps = defaultProps -StatusBar.displayName = 'StatusBar' +// TODO: fix typescript complains +// @ts-ignore StatusBar.Button = Button export default StatusBar diff --git a/src/components/StatusBar/StatusBar.types.ts b/src/components/StatusBar/StatusBar.types.ts new file mode 100644 index 000000000..2bd8f4639 --- /dev/null +++ b/src/components/StatusBar/StatusBar.types.ts @@ -0,0 +1,15 @@ +import { CollapsibleProps } from '../Collapsible/Collapsible.types' +import { UIStatus } from '../../constants/types' + +export type themeTypes = 'light' | 'bold' + +export interface StatusBarProps extends CollapsibleProps { + closeOnClick: boolean + status: UIStatus + theme: themeTypes + onClick: (...args: any[]) => void +} + +export interface StatusBarState { + isOpen: boolean +} diff --git a/src/components/StatusBar/tests/Button.test.js b/src/components/StatusBar/__tests__/StatusBar.Button.test.js similarity index 94% rename from src/components/StatusBar/tests/Button.test.js rename to src/components/StatusBar/__tests__/StatusBar.Button.test.js index a28989e5e..3a477644b 100644 --- a/src/components/StatusBar/tests/Button.test.js +++ b/src/components/StatusBar/__tests__/StatusBar.Button.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { shallow } from 'enzyme' -import StatusBar from '..' +import StatusBar from '../StatusBar' import { Icon } from '../../index' describe('ClassName', () => { diff --git a/src/components/StatusBar/tests/StatusBar.test.js b/src/components/StatusBar/__tests__/StatusBar.test.js similarity index 97% rename from src/components/StatusBar/tests/StatusBar.test.js rename to src/components/StatusBar/__tests__/StatusBar.test.js index b0d899158..80fef0b86 100644 --- a/src/components/StatusBar/tests/StatusBar.test.js +++ b/src/components/StatusBar/__tests__/StatusBar.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { mount, shallow } from 'enzyme' -import StatusBar from '..' +import StatusBar from '../StatusBar' import { Collapsible, Text } from '../../index' describe('ClassName', () => { diff --git a/src/components/StatusBar/index.ts b/src/components/StatusBar/index.ts new file mode 100644 index 000000000..ca16a2cf0 --- /dev/null +++ b/src/components/StatusBar/index.ts @@ -0,0 +1,3 @@ +import StatusBar from './StatusBar' + +export default StatusBar diff --git a/src/components/StatusBar/propTypes.js b/src/components/StatusBar/propTypes.js deleted file mode 100644 index 67fd93c9f..000000000 --- a/src/components/StatusBar/propTypes.js +++ /dev/null @@ -1,3 +0,0 @@ -import PropTypes from 'prop-types' - -export const themeTypes = PropTypes.oneOf(['light', 'bold']) diff --git a/src/components/StatusDot/StatusDot.js b/src/components/StatusDot/StatusDot.tsx similarity index 79% rename from src/components/StatusDot/StatusDot.js rename to src/components/StatusDot/StatusDot.tsx index 5dfc8277e..6c8232045 100644 --- a/src/components/StatusDot/StatusDot.js +++ b/src/components/StatusDot/StatusDot.tsx @@ -1,30 +1,29 @@ -// @flow -import type { StatusDotStatus, StatusDotSize } from './types' -import React, { PureComponent as Component } from 'react' +import * as React from 'react' +import { StatusDotStatus, StatusDotSize } from './StatusDot.types' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import Centralize from '../Centralize' import Icon from '../Icon' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' -import { COMPONENT_KEY } from './utils' -import { StatusDotUI } from './styles/StatusDot.css.js' +import { COMPONENT_KEY } from './StatusDot.utils' +import { StatusDotUI } from './styles/StatusDot.css' type Props = { - borderColor: string, - className?: string, - children?: any, - icon?: string, - inline: boolean, - isUnread: boolean, - outerBorderColor?: string, - outerBorderWidth: number, - size: StatusDotSize, - status: StatusDotStatus, - style?: Object, - title?: string, + borderColor?: string + className?: string + children?: any + icon?: string + inline: boolean + isUnread: boolean + outerBorderColor?: string + outerBorderWidth: number + size: StatusDotSize + status: StatusDotStatus + style?: any + title?: string } -class StatusDot extends Component { +class StatusDot extends React.PureComponent { static defaultProps = { inline: false, isUnread: false, diff --git a/src/components/StatusDot/StatusDot.types.ts b/src/components/StatusDot/StatusDot.types.ts new file mode 100644 index 000000000..87a071f7a --- /dev/null +++ b/src/components/StatusDot/StatusDot.types.ts @@ -0,0 +1,9 @@ +export type StatusDotStatus = + | 'online' + | 'offline' + | 'busy' + | 'new' + | 'active' + | 'inactive' + +export type StatusDotSize = 'md' | 'sm' diff --git a/src/components/StatusDot/utils.js b/src/components/StatusDot/StatusDot.utils.ts similarity index 100% rename from src/components/StatusDot/utils.js rename to src/components/StatusDot/StatusDot.utils.ts diff --git a/src/components/StatusDot/__tests__/StatusDot.test.js b/src/components/StatusDot/__tests__/StatusDot.test.js index 5e4420332..57dedd2a0 100644 --- a/src/components/StatusDot/__tests__/StatusDot.test.js +++ b/src/components/StatusDot/__tests__/StatusDot.test.js @@ -1,8 +1,8 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' import StatusDot from '../StatusDot' import { Icon } from '../../index' -import { StatusDotUI } from '../styles/StatusDot.css.js' +import { StatusDotUI } from '../styles/StatusDot.css' describe('ClassName', () => { test('Has default className', () => { diff --git a/src/components/StatusDot/index.js b/src/components/StatusDot/index.js deleted file mode 100644 index fc19323c4..000000000 --- a/src/components/StatusDot/index.js +++ /dev/null @@ -1,5 +0,0 @@ -// @flow -import { propConnect } from '../PropProvider' -import StatusDot from './StatusDot' - -export default propConnect('StatusDot')(StatusDot) diff --git a/src/components/StatusDot/index.ts b/src/components/StatusDot/index.ts new file mode 100644 index 000000000..6c75a6391 --- /dev/null +++ b/src/components/StatusDot/index.ts @@ -0,0 +1,3 @@ +import StatusDot from './StatusDot' + +export default StatusDot diff --git a/src/components/StatusDot/styles/StatusDot.css.js b/src/components/StatusDot/styles/StatusDot.css.ts similarity index 95% rename from src/components/StatusDot/styles/StatusDot.css.js rename to src/components/StatusDot/styles/StatusDot.css.ts index ad12d548e..46d8a17c5 100644 --- a/src/components/StatusDot/styles/StatusDot.css.js +++ b/src/components/StatusDot/styles/StatusDot.css.ts @@ -1,5 +1,4 @@ -// @flow -import baseStyles from '../../../styles/resets/baseStyles.css.js' +import baseStyles from '../../../styles/resets/baseStyles.css' import { getColor } from '../../../styles/utilities/color' import forEach from '../../../styles/utilities/forEach' import styled from '../../styled' diff --git a/src/components/StatusDot/types.js b/src/components/StatusDot/types.js deleted file mode 100644 index a015d6f96..000000000 --- a/src/components/StatusDot/types.js +++ /dev/null @@ -1,12 +0,0 @@ -// @flow -export type StatusDotStatus = -| 'online' -| 'offline' -| 'busy' -| 'new' -| 'active' -| 'inactive' - -export type StatusDotSize = -| 'md' -| 'sm' diff --git a/src/components/Stepper/Stepper.Progress.tsx b/src/components/Stepper/Stepper.Progress.tsx index 8e7d4a4ad..7b979d0cd 100644 --- a/src/components/Stepper/Stepper.Progress.tsx +++ b/src/components/Stepper/Stepper.Progress.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' -import { ProgressLineUI } from './Stepper.css' +import { ProgressLineUI } from './styles/Stepper.css' export interface Props { className?: string diff --git a/src/components/Stepper/Stepper.Step.tsx b/src/components/Stepper/Stepper.Step.tsx index 4f789232f..412babd73 100644 --- a/src/components/Stepper/Stepper.Step.tsx +++ b/src/components/Stepper/Stepper.Step.tsx @@ -5,7 +5,7 @@ import Text from '../Text' import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' import Progress from './Stepper.Progress' -import { StepUI, LineUI, CircleUI, GhostTitleUI } from './Stepper.css' +import { StepUI, LineUI, CircleUI, GhostTitleUI } from './styles/Stepper.css' import { STEP_COMPONENT_KEY } from './Stepper.utils' import { StepperStep } from './Stepper.types' diff --git a/src/components/Stepper/Stepper.tsx b/src/components/Stepper/Stepper.tsx index 12f6cddd3..fb0373769 100644 --- a/src/components/Stepper/Stepper.tsx +++ b/src/components/Stepper/Stepper.tsx @@ -6,7 +6,7 @@ import { classNames } from '../../utilities/classNames' import { getComponentKey } from '../../utilities/component' import { isDefined } from '../../utilities/is' import { noop } from '../../utilities/other' -import { StepperUI, StepWrapperUI } from './Stepper.css' +import { StepperUI, StepWrapperUI } from './styles/Stepper.css' import { COMPONENT_KEY } from './Stepper.utils' import { StepperStep } from './Stepper.types' diff --git a/src/components/Stepper/__tests__/Stepper.test.tsx b/src/components/Stepper/__tests__/Stepper.test.tsx index c12c605a6..3109e2770 100644 --- a/src/components/Stepper/__tests__/Stepper.test.tsx +++ b/src/components/Stepper/__tests__/Stepper.test.tsx @@ -2,8 +2,8 @@ import * as React from 'react' import { mount, shallow, render } from 'enzyme' import { Stepper } from '../Stepper' import Step from '../Stepper.Step' -import { StepUI } from '../Stepper.css' -import { StepperUI } from '../Stepper.css' +import { StepUI } from '../styles/Stepper.css' +import { StepperUI } from '../styles/Stepper.css' const mockSteps = [ { diff --git a/src/components/Stepper/Stepper.css.ts b/src/components/Stepper/styles/Stepper.css.ts similarity index 93% rename from src/components/Stepper/Stepper.css.ts rename to src/components/Stepper/styles/Stepper.css.ts index bb2029fa6..4fbd10953 100644 --- a/src/components/Stepper/Stepper.css.ts +++ b/src/components/Stepper/styles/Stepper.css.ts @@ -1,7 +1,7 @@ -import styled from '../styled' -import Text from '../Text' -import baseStyles from '../../styles/resets/baseStyles.css' -import { getColor } from '../../styles/utilities/color' +import styled from '../../styled' +import Text from '../../Text' +import baseStyles from '../../../styles/resets/baseStyles.css' +import { getColor } from '../../../styles/utilities/color' export const config = { activeColor: getColor('green.500'), diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx index 99c96ef3b..056f278d9 100644 --- a/src/components/Switch/Switch.tsx +++ b/src/components/Switch/Switch.tsx @@ -1,6 +1,6 @@ -import { SwitchSize, SwitchState, SwitchValue } from './types' -import { FormLabelContextProps } from '../FormLabel/types' import * as React from 'react' +import { SwitchSize, SwitchState, SwitchValue } from './Switch.types' +import { FormLabelContextProps } from '../FormLabel/FormLabel.types' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import FormLabelContext from '../FormLabel/Context' import VisuallyHidden from '../VisuallyHidden' @@ -16,7 +16,7 @@ import { BackdropUI, ToggleUI, } from './styles/Switch.css.js' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Switch.utils' export interface Props { className?: string diff --git a/src/components/Switch/types.ts b/src/components/Switch/Switch.types.ts similarity index 100% rename from src/components/Switch/types.ts rename to src/components/Switch/Switch.types.ts diff --git a/src/components/Switch/utils.ts b/src/components/Switch/Switch.utils.ts similarity index 100% rename from src/components/Switch/utils.ts rename to src/components/Switch/Switch.utils.ts diff --git a/src/components/Switch/index.ts b/src/components/Switch/index.ts index f7d56db14..9cb4cda86 100644 --- a/src/components/Switch/index.ts +++ b/src/components/Switch/index.ts @@ -1,5 +1,5 @@ import { propConnect } from '../PropProvider' import Switch from './Switch' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Switch.utils' export default propConnect(COMPONENT_KEY)(Switch) diff --git a/src/components/Switch/styles/Switch.css.js b/src/components/Switch/styles/Switch.css.js index 9dc0c14ea..8be77b195 100644 --- a/src/components/Switch/styles/Switch.css.js +++ b/src/components/Switch/styles/Switch.css.js @@ -1,4 +1,3 @@ -// @flow import baseStyles from '../../../styles/resets/baseStyles.css.js' import { getColor } from '../../../styles/utilities/color' import forEach from '../../../styles/utilities/forEach' @@ -174,11 +173,11 @@ export const StateUI = styled('div')` z-index: 0; ` -function getWidth(size: number): number { +function getWidth(size) { return Math.floor(size * 2) } -function makeSizeStyles(config: Object): string { +function makeSizeStyles(config) { return forEach( config.size, (size, value) => ` @@ -191,7 +190,7 @@ function makeSizeStyles(config: Object): string { ) } -function makeToggleSizeStyles(config: Object): string { +function makeToggleSizeStyles(config) { return forEach( config.size, (size, value) => ` @@ -203,7 +202,7 @@ function makeToggleSizeStyles(config: Object): string { ) } -function makeToggleOffsetStyles(config: Object): string { +function makeToggleOffsetStyles(config) { return forEach( config.size, (size, value) => ` diff --git a/src/components/TabBar/TabBar.tsx b/src/components/TabBar/TabBar.tsx index 028aabc1d..8b2a9502b 100644 --- a/src/components/TabBar/TabBar.tsx +++ b/src/components/TabBar/TabBar.tsx @@ -5,7 +5,7 @@ import Nav from '../Nav' import Toolbar from '../Toolbar' import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' -import { TabBarUI, SecContentUI, ToolbarUI } from './TabBar.css' +import { TabBarUI, SecContentUI, ToolbarUI } from './styles/TabBar.css' import { COMPONENT_KEY } from './TabBar.utils' export interface Props { diff --git a/src/components/TabBar/__tests__/TabBar.test.tsx b/src/components/TabBar/__tests__/TabBar.test.tsx index 083e37a35..6623c4531 100644 --- a/src/components/TabBar/__tests__/TabBar.test.tsx +++ b/src/components/TabBar/__tests__/TabBar.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { mount, render } from 'enzyme' import { TabBar } from '../TabBar' -import { SecContentUI, TabBarUI } from '../TabBar.css' +import { SecContentUI, TabBarUI } from '../styles/TabBar.css' import Item from '../../Nav/Nav.Item' import Toolbar from '../../Toolbar' diff --git a/src/components/TabBar/TabBar.css.ts b/src/components/TabBar/styles/TabBar.css.ts similarity index 83% rename from src/components/TabBar/TabBar.css.ts rename to src/components/TabBar/styles/TabBar.css.ts index 753014d78..9096d31d3 100644 --- a/src/components/TabBar/TabBar.css.ts +++ b/src/components/TabBar/styles/TabBar.css.ts @@ -1,9 +1,9 @@ -import styled from '../styled' -import Toolbar from '../Toolbar' +import styled from '../../styled' +import Toolbar from '../../Toolbar' -import { getColor } from '../../styles/utilities/color' -import { setFontSize } from '../../styles/utilities/font' -import baseStyles from '../../styles/resets/baseStyles.css' +import { getColor } from '../../../styles/utilities/color' +import { setFontSize } from '../../../styles/utilities/font' +import baseStyles from '../../../styles/resets/baseStyles.css' const getAlignment = align => { switch (align) { diff --git a/src/components/Table/Cell.tsx b/src/components/Table/Table.Cell.tsx similarity index 97% rename from src/components/Table/Cell.tsx rename to src/components/Table/Table.Cell.tsx index 107fbf00e..0ea34cbe1 100644 --- a/src/components/Table/Cell.tsx +++ b/src/components/Table/Table.Cell.tsx @@ -4,7 +4,7 @@ import Truncate from '../Truncate' import { CellUI } from './styles/Table.css' import { TABLE_CLASSNAME } from './Table' -import { CellProps } from './types' +import { CellProps } from './Table.types' export default class Cell extends React.PureComponent { getCompoundColumnCellData = () => { diff --git a/src/components/Table/HeaderCell.tsx b/src/components/Table/Table.HeaderCell.tsx similarity index 97% rename from src/components/Table/HeaderCell.tsx rename to src/components/Table/Table.HeaderCell.tsx index da63d3648..cf9bcec5b 100644 --- a/src/components/Table/HeaderCell.tsx +++ b/src/components/Table/Table.HeaderCell.tsx @@ -4,7 +4,7 @@ import Icon from '../Icon' import { SortableCellUI, HeaderCellUI } from './styles/Table.css' import { TABLE_CLASSNAME } from './Table' -import { HeaderCellProps } from './types' +import { HeaderCellProps } from './Table.types' export default class HeaderCell extends React.PureComponent { getColumnSortStatus = () => { diff --git a/src/components/Table/Row.tsx b/src/components/Table/Table.Row.tsx similarity index 89% rename from src/components/Table/Row.tsx rename to src/components/Table/Table.Row.tsx index f2cba24de..142b230ea 100644 --- a/src/components/Table/Row.tsx +++ b/src/components/Table/Table.Row.tsx @@ -1,10 +1,10 @@ import * as React from 'react' -import Cell from './Cell' +import Cell from './Table.Cell' import { TABLE_CLASSNAME } from './Table' import { generateCellKey } from './Table.utils' -import { RowProps } from './types' +import { RowProps } from './Table.types' export default class Row extends React.PureComponent { handleRowClick = e => { diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index 0ea0c5660..92b043294 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -12,10 +12,10 @@ import { COMPONENT_KEY, generateCellKey } from './Table.utils' import { TableWrapperUI, TableUI } from './styles/Table.css' import { defaultTheme, chooseTheme } from './styles/themes' -import Row from './Row' -import HeaderCell from './HeaderCell' +import Row from './Table.Row' +import HeaderCell from './Table.HeaderCell' -import { TableProps, TableState } from './types' +import { TableProps, TableState } from './Table.types' export const TABLE_CLASSNAME = 'c-Table' diff --git a/src/components/Table/types.ts b/src/components/Table/Table.types.ts similarity index 100% rename from src/components/Table/types.ts rename to src/components/Table/Table.types.ts diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx index 5ee999569..5fd498bc9 100644 --- a/src/components/Tag/Tag.tsx +++ b/src/components/Tag/Tag.tsx @@ -14,7 +14,7 @@ import { IconUI, IconWrapperUI, TextUI, -} from './Tag.css' +} from './styles/Tag.css' import { COMPONENT_KEY } from './Tag.utils' type TagColor = diff --git a/src/components/Tag/Tag.css.ts b/src/components/Tag/styles/Tag.css.ts similarity index 90% rename from src/components/Tag/Tag.css.ts rename to src/components/Tag/styles/Tag.css.ts index 0cf0f918e..881bc96d9 100644 --- a/src/components/Tag/Tag.css.ts +++ b/src/components/Tag/styles/Tag.css.ts @@ -1,13 +1,13 @@ -import { getColor } from '../../styles/utilities/color' -import baseStyles from '../../styles/resets/baseStyles.css.js' - -import forEach from '../../styles/utilities/forEach' -import Animate from '../Animate' -import Spinner from '../Spinner' -import Icon from '../Icon' -import Text from '../Text' -import Flexy from '../Flexy' -import styled from '../styled' +import { getColor } from '../../../styles/utilities/color' +import baseStyles from '../../../styles/resets/baseStyles.css' + +import forEach from '../../../styles/utilities/forEach' +import Animate from '../../Animate' +import Spinner from '../../Spinner' +import Icon from '../../Icon' +import Text from '../../Text' +import Flexy from '../../Flexy' +import styled from '../../styled' export const config = { borderRadius: 3, diff --git a/src/components/TagList/TagList.tsx b/src/components/TagList/TagList.tsx index c7f7f58e5..a564a429b 100644 --- a/src/components/TagList/TagList.tsx +++ b/src/components/TagList/TagList.tsx @@ -7,7 +7,7 @@ import PropProvider from '../PropProvider' import { classNames } from '../../utilities/classNames' import { isComponentNamed } from '../../utilities/component' import { noop, promiseNoop } from '../../utilities/other' -import { TagListUI, ClearAllUI } from './TagList.css' +import { TagListUI, ClearAllUI } from './styles/TagList.css' import { COMPONENT_KEY } from './TagList.utils' import { COMPONENT_KEY as TAG } from '../Tag/Tag.utils' diff --git a/src/components/TagList/__tests__/TagList.test.js b/src/components/TagList/__tests__/TagList.test.js index 2397a7e2e..3173c1346 100644 --- a/src/components/TagList/__tests__/TagList.test.js +++ b/src/components/TagList/__tests__/TagList.test.js @@ -2,7 +2,7 @@ import React from 'react' import { mount } from 'enzyme' import TagList from '../TagList' import { Icon, Inline, Overflow, Tag } from '../../index' -import { ClearAllUI, TagListUI } from '../TagList.css' +import { ClearAllUI, TagListUI } from '../styles/TagList.css' jest.useFakeTimers() diff --git a/src/components/TagList/TagList.css.ts b/src/components/TagList/styles/TagList.css.ts similarity index 68% rename from src/components/TagList/TagList.css.ts rename to src/components/TagList/styles/TagList.css.ts index 2818ec53b..d4ce117db 100644 --- a/src/components/TagList/TagList.css.ts +++ b/src/components/TagList/styles/TagList.css.ts @@ -1,7 +1,7 @@ -import baseStyles from '../../styles/resets/baseStyles.css.js' -import styled from '../styled' -import { getColor } from '../../styles/utilities/color' -import { setFontSize } from '../../styles/utilities/font' +import baseStyles from '../../../styles/resets/baseStyles.css.js' +import styled from '../../styled' +import { getColor } from '../../../styles/utilities/color' +import { setFontSize } from '../../../styles/utilities/font' export const TagListUI = styled('div')` ${baseStyles}; diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx index 4fa796ad6..119af77e4 100644 --- a/src/components/Text/Text.tsx +++ b/src/components/Text/Text.tsx @@ -1,11 +1,11 @@ -import { TextSize, TextShade, UIState } from './types' import * as React from 'react' +import { TextSize, TextShade, UIState } from './Text.types' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import styled from '../styled' import { classNames } from '../../utilities/classNames' import { namespaceComponent } from '../../utilities/component' import css from './styles/Text.css' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Text.utils' export interface Props { allCaps?: boolean diff --git a/src/components/Text/types.ts b/src/components/Text/Text.types.ts similarity index 100% rename from src/components/Text/types.ts rename to src/components/Text/Text.types.ts diff --git a/src/components/Text/utils.ts b/src/components/Text/Text.utils.ts similarity index 100% rename from src/components/Text/utils.ts rename to src/components/Text/Text.utils.ts diff --git a/src/components/Text/index.ts b/src/components/Text/index.ts index 972e2ba2e..994bcddca 100644 --- a/src/components/Text/index.ts +++ b/src/components/Text/index.ts @@ -1,5 +1,5 @@ import { propConnect } from '../PropProvider' import Text from './Text' -import { COMPONENT_KEY } from './utils' +import { COMPONENT_KEY } from './Text.utils' export default propConnect(COMPONENT_KEY)(Text) diff --git a/src/components/Timeline/Item.js b/src/components/Timeline/Timeline.Item.tsx similarity index 83% rename from src/components/Timeline/Item.js rename to src/components/Timeline/Timeline.Item.tsx index 521bd2b71..f0bfc5147 100644 --- a/src/components/Timeline/Item.js +++ b/src/components/Timeline/Timeline.Item.tsx @@ -1,17 +1,16 @@ -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import Flexy from '../Flexy' import Timestamp from '../Timestamp' import { classNames } from '../../utilities/classNames' type Props = { - children?: any, - className?: string, - timestamp?: number | string, + children?: any + className?: string + timestamp?: number | string } -class Item extends Component { +class Item extends React.PureComponent { render() { const { children, className, timestamp, ...rest } = this.props diff --git a/src/components/Timeline/Timeline.js b/src/components/Timeline/Timeline.tsx similarity index 72% rename from src/components/Timeline/Timeline.js rename to src/components/Timeline/Timeline.tsx index 9bbec843e..f45666c87 100644 --- a/src/components/Timeline/Timeline.js +++ b/src/components/Timeline/Timeline.tsx @@ -1,15 +1,14 @@ -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import getValidProps from '@helpscout/react-utils/dist/getValidProps' -import Item from './Item' +import Item from './Timeline.Item' import { classNames } from '../../utilities/classNames' type Props = { - children?: any, - className?: string, + children?: any + className?: string } -class Timeline extends Component { +class Timeline extends React.PureComponent { static Item = Item render() { diff --git a/src/components/Timeline/__tests__/Item.test.js b/src/components/Timeline/__tests__/Timeline.Item.test.js similarity index 95% rename from src/components/Timeline/__tests__/Item.test.js rename to src/components/Timeline/__tests__/Timeline.Item.test.js index 53f3385cc..84a8b9af4 100644 --- a/src/components/Timeline/__tests__/Item.test.js +++ b/src/components/Timeline/__tests__/Timeline.Item.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { mount, shallow } from 'enzyme' -import Item from '../Item' +import Item from '../Timeline.Item' import { Timestamp } from '../../..' describe('ClassName', () => { diff --git a/src/components/Timeline/__tests__/Timeline.test.js b/src/components/Timeline/__tests__/Timeline.test.js index 0a35bbb98..c4e3192e3 100644 --- a/src/components/Timeline/__tests__/Timeline.test.js +++ b/src/components/Timeline/__tests__/Timeline.test.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' import Timeline from '../Timeline' diff --git a/src/components/Timeline/index.js b/src/components/Timeline/index.ts similarity index 95% rename from src/components/Timeline/index.js rename to src/components/Timeline/index.ts index 3a0ed70b9..6e76ddb2a 100644 --- a/src/components/Timeline/index.js +++ b/src/components/Timeline/index.ts @@ -1,4 +1,3 @@ -// @flow import { propConnect } from '../PropProvider' import Timeline from './Timeline' diff --git a/src/components/Timestamp/Time.js b/src/components/Timestamp/Timestamp.Time.tsx similarity index 82% rename from src/components/Timestamp/Time.js rename to src/components/Timestamp/Timestamp.Time.tsx index 4bb7ee63e..22c884518 100644 --- a/src/components/Timestamp/Time.js +++ b/src/components/Timestamp/Timestamp.Time.tsx @@ -1,16 +1,15 @@ -// @flow -import React, { Component } from 'react' +import * as React from 'react' import { calculateTimeoutPeriod } from '../../utilities/timestamp' -import type { Timestamp } from './types' +import { Timestamp } from './Timestamp.types' type Props = { - className?: string, - formatter: (timestamp: Timestamp) => string, - live?: boolean, - timestamp?: Timestamp, + className?: string + formatter: (timestamp?: Timestamp) => string + live?: boolean + timestamp?: Timestamp } -class Time extends Component { +class Time extends React.Component { static defaultProps = { formatter: (timestamp: Timestamp) => timestamp, live: false, @@ -53,7 +52,7 @@ class Time extends Component { } } - tick(refresh: any) { + tick(refresh?: any) { const { live, timestamp } = this.props if (!this._isMounted || !live) { @@ -63,6 +62,8 @@ class Time extends Component { const period = calculateTimeoutPeriod(timestamp) if (period > 0) { + // TODO: fix typescript complains + // @ts-ignore this.timeoutId = setTimeout(this.tick.bind(this), period) } diff --git a/src/components/Timestamp/index.js b/src/components/Timestamp/Timestamp.tsx similarity index 70% rename from src/components/Timestamp/index.js rename to src/components/Timestamp/Timestamp.tsx index 171e90cca..021a3f739 100644 --- a/src/components/Timestamp/index.js +++ b/src/components/Timestamp/Timestamp.tsx @@ -1,22 +1,21 @@ -// @flow -import React, { Component } from 'react' +import * as React from 'react' import { classNames } from '../../utilities/classNames' import Flexy from '../Flexy' import Icon from '../Icon' import Text from '../Text' -import Time from './Time' +import Time from './Timestamp.Time' type Props = { - children?: any, - className?: string, - formatter?: () => string, - live?: boolean, - muted?: boolean, - read: boolean, - timestamp?: string | number, + children?: any + className?: string + formatter?: () => string + live?: boolean + muted?: boolean + read: boolean + timestamp?: string | number } -class Timestamp extends Component { +class Timestamp extends React.Component { static defaultProps = { live: false, read: false, @@ -51,7 +50,11 @@ class Timestamp extends Component { - {readMarkup} diff --git a/src/components/Timestamp/Timestamp.types.ts b/src/components/Timestamp/Timestamp.types.ts new file mode 100644 index 000000000..d5bf26558 --- /dev/null +++ b/src/components/Timestamp/Timestamp.types.ts @@ -0,0 +1 @@ +export type Timestamp = string diff --git a/src/components/Timestamp/__tests__/Timestamp.test.js b/src/components/Timestamp/__tests__/Timestamp.test.js index ba2b68996..af7fe8103 100644 --- a/src/components/Timestamp/__tests__/Timestamp.test.js +++ b/src/components/Timestamp/__tests__/Timestamp.test.js @@ -1,6 +1,6 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' -import Timestamp from '..' +import Timestamp from '../Timestamp' import { Icon, Text } from '../../' const cx = 'c-Timestamp' diff --git a/src/components/Timestamp/index.ts b/src/components/Timestamp/index.ts new file mode 100644 index 000000000..48ef13a96 --- /dev/null +++ b/src/components/Timestamp/index.ts @@ -0,0 +1,3 @@ +import Timestamp from './Timestamp' + +export default Timestamp diff --git a/src/components/Timestamp/types.js b/src/components/Timestamp/types.js deleted file mode 100644 index 6a9a84c93..000000000 --- a/src/components/Timestamp/types.js +++ /dev/null @@ -1 +0,0 @@ -export type Timestamp = string | number \ No newline at end of file diff --git a/src/components/Toolbar/Toolbar.Shadow.tsx b/src/components/Toolbar/Toolbar.Shadow.tsx index 6bf991311..5d91a5bf2 100644 --- a/src/components/Toolbar/Toolbar.Shadow.tsx +++ b/src/components/Toolbar/Toolbar.Shadow.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { classNames } from '../../utilities/classNames' -import { ShadowUI } from './Toolbar.css' +import { ShadowUI } from './styles/Toolbar.css' const defaultProps = { placement: 'top', diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx index 8a42f0e20..a6b4bec2f 100644 --- a/src/components/Toolbar/Toolbar.tsx +++ b/src/components/Toolbar/Toolbar.tsx @@ -5,7 +5,7 @@ import Shadow from './Toolbar.Shadow' import propConnect from '../PropProvider/propConnect' import { ToolbarPlacement, ToolbarSize, ToolbarTheme } from './Toolbar.types' import { classNames } from '../../utilities/classNames' -import { WrapperUI, ToolbarUI } from './Toolbar.css' +import { WrapperUI, ToolbarUI } from './styles/Toolbar.css' import { COMPONENT_KEY } from './Toolbar.utils' export interface Props { diff --git a/src/components/Toolbar/Toolbar.css.ts b/src/components/Toolbar/styles/Toolbar.css.ts similarity index 85% rename from src/components/Toolbar/Toolbar.css.ts rename to src/components/Toolbar/styles/Toolbar.css.ts index 7c3c8b886..0976951c2 100644 --- a/src/components/Toolbar/Toolbar.css.ts +++ b/src/components/Toolbar/styles/Toolbar.css.ts @@ -1,9 +1,9 @@ -import Flexy from '../Flexy' -import Nav from '../Nav' -import styled from '../styled' -import baseStyles from '../../styles/resets/baseStyles.css' -import forEach from '../../styles/utilities/forEach' -import { getColor } from '../../styles/utilities/color' +import Flexy from '../../Flexy' +import Nav from '../../Nav' +import styled from '../../styled' +import baseStyles from '../../../styles/resets/baseStyles.css' +import forEach from '../../../styles/utilities/forEach' +import { getColor } from '../../../styles/utilities/color' export const config = { borderColor: getColor('border'), @@ -34,7 +34,7 @@ export const ToolbarUI = styled(Flexy)` padding: 4px 8px; position: relative; - ${makeSizeStyles}; + ${makeSizeStyles()}; &.has-shadow { z-index: 1; @@ -77,7 +77,6 @@ export const ShadowUI = styled('div')` top: calc(${config.shadowSize} * -1); background: linear-gradient(to top, black, rgba(0, 0, 0, 0)); } -} ` function makeSizeStyles() { diff --git a/src/components/Toolbar/types.js b/src/components/Toolbar/types.js deleted file mode 100644 index 9defc8517..000000000 --- a/src/components/Toolbar/types.js +++ /dev/null @@ -1,14 +0,0 @@ -export type ToolbarSize = -| 'xl' -| 'lg' -| 'md' -| 'sm' -| 'xs' - -export type ToolbarTheme = -| 'default' -| 'note' - -export type ToolbarPlacement = -| 'top' -| 'bottom' \ No newline at end of file diff --git a/src/components/Tooltip/Tooltip.Popper.tsx b/src/components/Tooltip/Tooltip.Popper.tsx index a8fd5910f..b82a95094 100644 --- a/src/components/Tooltip/Tooltip.Popper.tsx +++ b/src/components/Tooltip/Tooltip.Popper.tsx @@ -3,7 +3,7 @@ import getValidProps from '@helpscout/react-utils/dist/getValidProps' import propConnect from '../PropProvider/propConnect' import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' -import { PopperUI } from './Tooltip.css' +import { PopperUI } from './styles/Tooltip.css' import { POPPER_COMPONENT_KEY } from './Tooltip.utils' export interface Props { diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index dc65c387b..2a236a39d 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { PopProps } from '../Pop/types' +import { PopProps } from '../Pop/Pop.types' import getValidProps from '@helpscout/react-utils/dist/getValidProps' import propConnect from '../PropProvider/propConnect' import Pop from '../Pop' @@ -8,7 +8,7 @@ import { classNames } from '../../utilities/classNames' import { noop } from '../../utilities/other' import { isFunction } from '../../utilities/is' import { renderChildrenSafely } from '../../utilities/component' -import { TooltipUI } from './Tooltip.css' +import { TooltipUI } from './styles/Tooltip.css' import { COMPONENT_KEY } from './Tooltip.utils' import { getColor } from '../../styles/utilities/color' diff --git a/src/components/Tooltip/__tests__/Tooltip.Pop.test.js b/src/components/Tooltip/__tests__/Tooltip.Pop.test.js index bbe9d09ea..532728d8d 100644 --- a/src/components/Tooltip/__tests__/Tooltip.Pop.test.js +++ b/src/components/Tooltip/__tests__/Tooltip.Pop.test.js @@ -4,7 +4,7 @@ import { mount } from 'enzyme' // Tests the Pop integration with Tooltip -jest.mock('../Tooltip.css', () => { +jest.mock('../styles/Tooltip.css', () => { const TooltipUI = ({ className, children }) => (
{children}
) diff --git a/src/components/Tooltip/Tooltip.css.ts b/src/components/Tooltip/styles/Tooltip.css.ts similarity index 68% rename from src/components/Tooltip/Tooltip.css.ts rename to src/components/Tooltip/styles/Tooltip.css.ts index a0ef7a581..89728a72a 100644 --- a/src/components/Tooltip/Tooltip.css.ts +++ b/src/components/Tooltip/styles/Tooltip.css.ts @@ -1,7 +1,7 @@ -import baseStyles from '../../styles/resets/base.css.js' -import styled from '../styled' -import Pop from '../Pop' -import { getColor } from '../../styles/utilities/color' +import baseStyles from '../../../styles/resets/base.css.js' +import styled from '../../styled' +import Pop from '../../Pop' +import { getColor } from '../../../styles/utilities/color' export const config = { background: getColor('charcoal.700'), diff --git a/src/components/Truncate/index.js b/src/components/Truncate/Truncate.tsx similarity index 77% rename from src/components/Truncate/index.js rename to src/components/Truncate/Truncate.tsx index 9dafcd12d..98430b77d 100644 --- a/src/components/Truncate/index.js +++ b/src/components/Truncate/Truncate.tsx @@ -1,33 +1,16 @@ -// @flow -import React, { PureComponent as Component } from 'react' +import * as React from 'react' import EventListener from '../EventListener' import Tooltip from '../Tooltip' import { classNames } from '../../utilities/classNames' import styled from '../styled' import { truncateMiddle } from '../../utilities/strings' -import css from './styles/Truncate.css.js' - -type Props = { - children?: any, - className?: string, - ellipsis?: string, - limit: number, - end?: number, - start?: number, - showTooltipOnTruncate: boolean, - text?: string, - title?: string, - tooltipProps: Object, - tooltipPlacement: string, - tooltipModifiers: Object, - type?: 'auto' | 'start' | 'middle' | 'end', -} - -type State = { - isTruncated: boolean, -} +import css from './styles/Truncate.css' +import { TruncateProps, TruncateState } from './Truncate.types' -export class BaseComponent extends Component { +export class Truncate extends React.PureComponent< + TruncateProps, + TruncateState +> { static displayName = 'Truncate' static defaultProps = { ellipsis: '…', @@ -38,10 +21,10 @@ export class BaseComponent extends Component { tooltipProps: {}, type: 'auto', } - node: ?HTMLSpanElement = null - contentNode: ?HTMLSpanElement = null + node = null + contentNode = null - constructor(props: Props) { + constructor(props: TruncateProps) { super(props) this.state = { isTruncated: !!props.type, @@ -61,7 +44,7 @@ export class BaseComponent extends Component { this.contentNode = null } - componentWillReceiveProps(nextProps: Props) { + componentWillReceiveProps(nextProps: TruncateProps) { if (nextProps.type !== this.props.type) { this.setState({ isTruncated: this.isTruncated(nextProps), @@ -78,7 +61,7 @@ export class BaseComponent extends Component { this.setState({ isTruncated }) } - isTruncated = (props: Props = this.props): boolean => { + isTruncated = (props: TruncateProps = this.props): boolean => { if (props.type !== 'auto') { return this.getText(props) !== this.getTruncatedContent(props) } else { @@ -86,23 +69,28 @@ export class BaseComponent extends Component { if (!this.node || !this.contentNode) return false // 1. Normalizes the display to allow for calculation + // TODO: fix typescript complains + // @ts-ignore this.contentNode.style.display = 'initial' // 2. Calculate the differences const isContentTruncated = + // TODO: fix typescript complains + // @ts-ignore this.contentNode.offsetWidth > this.node.offsetWidth // 3. Resets the display - // $FlowFixMe + // TODO: fix typescript complains + // @ts-ignore this.contentNode.style.display = null return isContentTruncated } } - getText = (props: Props = this.props) => { + getText = (props: TruncateProps = this.props) => { return this.props.text || this.props.children } - getTruncatedContent = (props: Props = this.props) => { + getTruncatedContent = (props: TruncateProps = this.props) => { return getTruncatedContent({ ...props, text: this.getText(props) }) } @@ -134,7 +122,7 @@ export class BaseComponent extends Component { const wordMarkup = ( (this.contentNode = ref)} + ref={(ref: any) => (this.contentNode = ref)} > {word} @@ -155,7 +143,7 @@ export class BaseComponent extends Component { return ( (this.node = ref)} + ref={(ref: any) => (this.node = ref)} {...rest} > @@ -171,7 +159,7 @@ export class BaseComponent extends Component { * @param {Object} props Component props. * @returns {string} The truncated content. */ -export function getTruncatedContent(props: Object): string { +export function getTruncatedContent(props: any): string { const { ellipsis, limit, type, text } = props let truncateStart @@ -199,4 +187,4 @@ export function getTruncatedContent(props: Object): string { return word } -export default styled(BaseComponent)(css) +export default styled(Truncate)(css) diff --git a/src/components/Truncate/Truncate.types.ts b/src/components/Truncate/Truncate.types.ts new file mode 100644 index 000000000..a957f053c --- /dev/null +++ b/src/components/Truncate/Truncate.types.ts @@ -0,0 +1,19 @@ +export interface TruncateProps { + children?: any + className?: string + ellipsis?: string + limit: number + end?: number + start?: number + showTooltipOnTruncate: boolean + text?: string + title?: string + tooltipProps: Object + tooltipPlacement: string + tooltipModifiers: Object + type?: 'auto' | 'start' | 'middle' | 'end' +} + +export interface TruncateState { + isTruncated: boolean +} diff --git a/src/components/Truncate/__tests__/Truncate.test.js b/src/components/Truncate/__tests__/Truncate.test.js index bd810ae65..b75007bea 100644 --- a/src/components/Truncate/__tests__/Truncate.test.js +++ b/src/components/Truncate/__tests__/Truncate.test.js @@ -1,8 +1,8 @@ -import React from 'react' +import * as React from 'react' import { createSpec, faker } from '@helpscout/helix' import { mount } from 'enzyme' import Tooltip from '../../Tooltip' -import { BaseComponent as Truncate } from '../index' +import { Truncate } from '../Truncate' const fixture = createSpec(faker.lorem.paragraph()) diff --git a/src/components/Truncate/index.ts b/src/components/Truncate/index.ts new file mode 100644 index 000000000..a0019db5b --- /dev/null +++ b/src/components/Truncate/index.ts @@ -0,0 +1,3 @@ +import Truncate from './Truncate' + +export default Truncate diff --git a/src/components/VisuallyHidden/index.js b/src/components/VisuallyHidden/VisuallyHidden.tsx similarity index 74% rename from src/components/VisuallyHidden/index.js rename to src/components/VisuallyHidden/VisuallyHidden.tsx index e16d49c59..cdc04138b 100644 --- a/src/components/VisuallyHidden/index.js +++ b/src/components/VisuallyHidden/VisuallyHidden.tsx @@ -1,13 +1,12 @@ -// @flow -import React from 'react' +import * as React from 'react' import styled from '../styled' import { classNames } from '../../utilities/classNames' -import css from './styles/VisuallyHidden.css.js' +import css from './styles/VisuallyHidden.css' type Props = { - children?: any, - className?: string, - focusable: boolean, + children?: any + className?: string + focusable: boolean } const VisuallyHidden = (props: Props) => { @@ -19,7 +18,7 @@ const VisuallyHidden = (props: Props) => { className ) - const tabIndex = focusable ? 1 : null + const tabIndex = focusable ? 1 : undefined return ( diff --git a/src/components/VisuallyHidden/__tests__/VisuallyHidden.test.js b/src/components/VisuallyHidden/__tests__/VisuallyHidden.test.js index 0469bf8fb..e0f9fcbdc 100644 --- a/src/components/VisuallyHidden/__tests__/VisuallyHidden.test.js +++ b/src/components/VisuallyHidden/__tests__/VisuallyHidden.test.js @@ -1,4 +1,4 @@ -import React from 'react' +import * as React from 'react' import { mount } from 'enzyme' import VisuallyHidden from '..' diff --git a/src/components/VisuallyHidden/index.ts b/src/components/VisuallyHidden/index.ts new file mode 100644 index 000000000..b6310c3a3 --- /dev/null +++ b/src/components/VisuallyHidden/index.ts @@ -0,0 +1,3 @@ +import VisuallyHidden from './VisuallyHidden' + +export default VisuallyHidden diff --git a/src/components/VisuallyHidden/styles/VisuallyHidden.css.js b/src/components/VisuallyHidden/styles/VisuallyHidden.css.ts similarity index 100% rename from src/components/VisuallyHidden/styles/VisuallyHidden.css.js rename to src/components/VisuallyHidden/styles/VisuallyHidden.css.ts diff --git a/src/components/index.js b/src/components/index.ts similarity index 100% rename from src/components/index.js rename to src/components/index.ts diff --git a/src/components/styled/testHelpers.js b/src/components/styled/testHelpers.ts similarity index 66% rename from src/components/styled/testHelpers.js rename to src/components/styled/testHelpers.ts index 24cda76fc..e6d41a08e 100644 --- a/src/components/styled/testHelpers.js +++ b/src/components/styled/testHelpers.ts @@ -1,11 +1,7 @@ -// @flow -import styled from './index' - /** * Removes style tags from the and resets styled StyleSheets. */ export const resetStyles = () => { - // $FlowFixMe document.head.innerHTML = '' } @@ -15,7 +11,7 @@ export const resetStyles = () => { * @param {HTMLElement} el * @returns {object} */ -export const getCSS = (el: ?HTMLElement) => el && window.getComputedStyle(el) +export const getCSS = (el: HTMLElement) => el && window.getComputedStyle(el) /** * Gets a specific CSS property from an element @@ -24,7 +20,6 @@ export const getCSS = (el: ?HTMLElement) => el && window.getComputedStyle(el) * @param {string} prop * @returns {string} */ -export const getCSSProp = (el: ?HTMLElement, prop?: string) => { - // $FlowFixMe +export const getCSSProp = (el: HTMLElement, prop?: string) => { return prop ? getCSS(el)[prop] : '' } diff --git a/src/constants/Keys.js b/src/constants/Keys.ts similarity index 100% rename from src/constants/Keys.js rename to src/constants/Keys.ts diff --git a/src/constants/index.js b/src/constants/index.ts similarity index 100% rename from src/constants/index.js rename to src/constants/index.ts diff --git a/src/constants/propTypes.js b/src/constants/propTypes.js deleted file mode 100644 index 48446bf25..000000000 --- a/src/constants/propTypes.js +++ /dev/null @@ -1,29 +0,0 @@ -import PropTypes from 'prop-types' - -export const standardSizeTypes = PropTypes.oneOf(['lg', 'md', 'sm', '']) - -export const textShadeTypes = PropTypes.oneOf([ - 'subtle', - 'muted', - 'faint', - 'extraMuted', - '', -]) - -export const statusTypes = PropTypes.oneOf([ - 'error', - 'info', - 'success', - 'warning', - '', -]) - -export const stateTypes = PropTypes.oneOf(['error', 'success', 'warning', '']) - -export const blockSelectorTagTypes = PropTypes.oneOf([ - 'div', - 'span', - 'a', - 'p', - '', -]) diff --git a/src/styles/mixins/breakpoints.css.js b/src/styles/mixins/breakpoints.css.js index ff2fef686..e0047845f 100644 --- a/src/styles/mixins/breakpoints.css.js +++ b/src/styles/mixins/breakpoints.css.js @@ -1,4 +1,3 @@ -// @flow import { isFunction, isString, isNumber } from '../../utilities/is' export const breakpoints = { @@ -8,9 +7,9 @@ export const breakpoints = { lg: '992px', } -type BreakpointValue = number | 'xs' | 'sm' | 'md' | 'lg' +// type BreakpointValue = number | 'xs' | 'sm' | 'md' | 'lg' -type BreakpointStyles = string | (() => string) +// type BreakpointStyles = string | (() => string) /** * Generates a mobile-first @media query CSS rule. @@ -19,10 +18,7 @@ type BreakpointStyles = string | (() => string) * @param {Function|string} styles The styles to render. * @returns {string} The compiled @media query rule. */ -export function breakpoint( - value: BreakpointValue = 'md', - styles: BreakpointStyles -): string { +export function breakpoint(value = 'md', styles) { if (!isString(value) && !isNumber(value)) return '' const minWidth = breakpoints.hasOwnProperty(value) @@ -31,18 +27,14 @@ export function breakpoint( ? `${value}px` : value - // $FlowFixMe const compiledStyles = isFunction(styles) ? styles() : styles return `@media (min-width: ${minWidth}) { - ${ - // $FlowFixMe - compiledStyles - } + ${compiledStyles} }` } -export function breakpointAll(content: string): string { +export function breakpointAll(content) { return ` ${content} diff --git a/src/styles/mixins/cardStyles.css.js b/src/styles/mixins/cardStyles.css.js index 534f076c6..587532d05 100644 --- a/src/styles/mixins/cardStyles.css.js +++ b/src/styles/mixins/cardStyles.css.js @@ -1,7 +1,6 @@ -// @flow import { getColor, rgba } from '../utilities/color' -export const cardBaseStyles = (subtle: boolean = false) => { +export const cardBaseStyles = (subtle = false) => { const bottomColor = getColor('grey.600') const color = subtle ? getColor('grey.500') : getColor('grey.600') const colorHover = subtle ? getColor('grey.600') : getColor('grey.700') diff --git a/src/styles/mixins/linkStyles.css.js b/src/styles/mixins/linkStyles.css.js index dacf91522..9b5a99ec3 100644 --- a/src/styles/mixins/linkStyles.css.js +++ b/src/styles/mixins/linkStyles.css.js @@ -1,4 +1,3 @@ -// @flow import { getColor } from '../utilities/color' const linkStyles = () => ` diff --git a/src/styles/mixins/stateStyles.css.js b/src/styles/mixins/stateStyles.css.js index d81011244..ccb7ac392 100644 --- a/src/styles/mixins/stateStyles.css.js +++ b/src/styles/mixins/stateStyles.css.js @@ -7,7 +7,7 @@ import forEach from '../utilities/forEach' * * @returns The compiled CSS styles. */ -export const makeStateColorStyles = (prop: string = 'color'): string => { +export const makeStateColorStyles = (prop = 'color') => { return forEach( STATES, state => ` diff --git a/src/styles/mixins/visuallyHidden.css.js b/src/styles/mixins/visuallyHidden.css.js index fd044e6c3..0615d815d 100644 --- a/src/styles/mixins/visuallyHidden.css.js +++ b/src/styles/mixins/visuallyHidden.css.js @@ -1,4 +1,3 @@ -// @flow const visuallyHidden = () => ` border: 0!important; box-sizing: border-box; diff --git a/src/styles/resets/base.css.js b/src/styles/resets/base.css.js index 96292637d..223fb84e0 100644 --- a/src/styles/resets/base.css.js +++ b/src/styles/resets/base.css.js @@ -1,4 +1,3 @@ -// @flow import fontFamilyStyles from './fontFamily.css.js' const css = ` diff --git a/src/styles/resets/baseStyles.css.js b/src/styles/resets/baseStyles.css.js index 8e5d9645b..4f2457e7f 100644 --- a/src/styles/resets/baseStyles.css.js +++ b/src/styles/resets/baseStyles.css.js @@ -1,4 +1,3 @@ -// @flow import base from './base.css.js' import font from './font.css.js' diff --git a/src/styles/resets/font.css.js b/src/styles/resets/font.css.js index 1b4cb182e..8ea0f892f 100644 --- a/src/styles/resets/font.css.js +++ b/src/styles/resets/font.css.js @@ -1,4 +1,3 @@ -// @flow import { FONT_SIZE } from '../configs/constants' import fontFamilyStyles from './fontFamily.css.js' diff --git a/src/styles/resets/fontFamily.css.js b/src/styles/resets/fontFamily.css.js index 57507ec49..59125e3cc 100644 --- a/src/styles/resets/fontFamily.css.js +++ b/src/styles/resets/fontFamily.css.js @@ -1,4 +1,3 @@ -// @flow import { FONT_FAMILY } from '../configs/constants' const css = ` diff --git a/src/styles/utilities/theme.ts b/src/styles/utilities/theme.ts index 0bd1f2c38..b4ed5d3b3 100644 --- a/src/styles/utilities/theme.ts +++ b/src/styles/utilities/theme.ts @@ -1 +1,4 @@ -export { isBeacon, isHSApp } from '../../components/PropProvider/utils' +export { + isBeacon, + isHSApp, +} from '../../components/PropProvider/PropProvider.utils' diff --git a/src/utilities/__tests__/memoize.test.ts b/src/utilities/__tests__/memoize.test.ts index 272de23d2..b28de0996 100644 --- a/src/utilities/__tests__/memoize.test.ts +++ b/src/utilities/__tests__/memoize.test.ts @@ -46,7 +46,7 @@ describe('shallowPropMemoizeIsEqual', () => { describe('memoizeWithProps', () => { test('Does not refire if props are the same', () => { const spy = jest.fn() - const memoSpy = memoizeWithProps(spy) + const memoSpy: any = memoizeWithProps(spy) const props = { a: 1 } // One @@ -61,7 +61,7 @@ describe('memoizeWithProps', () => { test('Refires function if props are different', () => { const spy = jest.fn() - const memoSpy = memoizeWithProps(spy) + const memoSpy: any = memoizeWithProps(spy) const props = { a: 1 } // One diff --git a/src/utilities/check.js b/src/utilities/check.ts similarity index 100% rename from src/utilities/check.js rename to src/utilities/check.ts diff --git a/src/utilities/clipboard.js b/src/utilities/clipboard.ts similarity index 85% rename from src/utilities/clipboard.js rename to src/utilities/clipboard.ts index ccc5d84af..ddce8ba08 100644 --- a/src/utilities/clipboard.js +++ b/src/utilities/clipboard.ts @@ -1,5 +1,3 @@ -// @flow - // Excluding most of the branches in these functions from test coverage. // Reason is because interactions are difficult to mock or are not supported // by JSDOM. @@ -49,10 +47,13 @@ export const selectText = (element: any) => { const selection = window.getSelection() const range = document.createRange() - range.selectNodeContents(element) - selection.removeAllRanges() + range.selectNodeContents(element) // TODO: fix typescript complains + // @ts-ignore + selection.removeAllRanges() // TODO: fix typescript complains + // @ts-ignore selection.addRange(range) - + // TODO: fix typescript complains + // @ts-ignore selectedText = selection.toString() } diff --git a/src/utilities/color.js b/src/utilities/color.ts similarity index 96% rename from src/utilities/color.js rename to src/utilities/color.ts index feb5646f8..767a205f0 100644 --- a/src/utilities/color.js +++ b/src/utilities/color.ts @@ -45,6 +45,8 @@ export const rgbToHex = (r, g, b) => { export const hexToHsl = hex => { if (!isHex(hex)) return null const rgb = hexToRgb(hex) + // TODO: fix typescript complains + // @ts-ignore return rgbToHsl(rgb.r, rgb.g, rgb.b) } @@ -61,6 +63,8 @@ export const optimalTextColor = ( const { r, g, b } = Object.assign({}, defaultPropValues, propValues) const backgroundRgb = hexToRgb(backgroundHex) const shade = Math.round( + // TODO: fix typescript complains + // @ts-ignore (backgroundRgb.r * r + backgroundRgb.g * g + backgroundRgb.b * b) / 1000 ) @@ -154,6 +158,8 @@ export const darken = (hex, value = 20) => { export const getColorShade = (hex, propValues = optimalTextColorValues) => { if (!isHex(hex)) return null const hsl = hexToHsl(hex) + // TODO: fix typescript complains + // @ts-ignore const l = hsl.l const isDarkText = optimalTextColor(hex, propValues) === 'black' diff --git a/src/utilities/events.js b/src/utilities/events.ts similarity index 96% rename from src/utilities/events.js rename to src/utilities/events.ts index a1d7b6657..a4b3806b3 100644 --- a/src/utilities/events.js +++ b/src/utilities/events.ts @@ -8,7 +8,7 @@ * * @returns {undefined} */ -export const addEventListener = (target, eventName, handler, options) => { +export const addEventListener = (target, eventName, handler, options?) => { /* istanbul ignore next */ if (!target || !target.addEventListener) return /* istanbul ignore next */ @@ -25,7 +25,7 @@ export const addEventListener = (target, eventName, handler, options) => { * * @returns {undefined} */ -export const removeEventListener = (target, eventName, handler, options) => { +export const removeEventListener = (target, eventName, handler, options?) => { /* istanbul ignore next */ if (!target || !target.removeEventListener) return /* istanbul ignore next */ @@ -48,6 +48,8 @@ export const removeEventListener = (target, eventName, handler, options) => { * * @returns {boolean} */ +// TODO: fix typescript complains +// @ts-ignore export const isMouseWheelYEvent = (event: WheelEvent = {}): boolean => { const { deltaX, deltaY } = event diff --git a/src/utilities/focus.js b/src/utilities/focus.ts similarity index 95% rename from src/utilities/focus.js rename to src/utilities/focus.ts index b1c0087b5..c6d9983cc 100644 --- a/src/utilities/focus.js +++ b/src/utilities/focus.ts @@ -18,7 +18,7 @@ export const findLastFocusableNode = nodeScope => { return focusableNodes[focusableNodes.length - 1] } -export const findCurrentFocusedNodeIndex = (currentNode, nodeScope) => { +export const findCurrentFocusedNodeIndex = (currentNode, nodeScope?) => { if (!isNodeElement(currentNode)) return const focusableNodes = findFocusableNodes(nodeScope) const currentNodeIndex = Array.prototype.indexOf.call( @@ -28,7 +28,7 @@ export const findCurrentFocusedNodeIndex = (currentNode, nodeScope) => { return currentNodeIndex !== -1 ? currentNodeIndex : false } -export const findNextFocusableNode = (currentNode, nodeScope) => { +export const findNextFocusableNode = (currentNode, nodeScope?) => { if (!isNodeElement(currentNode)) return const scope = getNodeScope(nodeScope) @@ -42,7 +42,7 @@ export const findNextFocusableNode = (currentNode, nodeScope) => { return nextNode } -export const findPreviousFocusableNode = (currentNode, nodeScope) => { +export const findPreviousFocusableNode = (currentNode, nodeScope?) => { if (!isNodeElement(currentNode)) return const scope = getNodeScope(nodeScope) @@ -54,7 +54,7 @@ export const findPreviousFocusableNode = (currentNode, nodeScope) => { return prevNode } -export const focusNextFocusableNode = (currentNode, nodeScope) => { +export const focusNextFocusableNode = (currentNode, nodeScope?) => { const scope = getNodeScope(nodeScope) const node = findNextFocusableNode(currentNode, scope) node && node !== document @@ -63,7 +63,7 @@ export const focusNextFocusableNode = (currentNode, nodeScope) => { return node } -export const focusPreviousFocusableNode = (currentNode, nodeScope) => { +export const focusPreviousFocusableNode = (currentNode, nodeScope?) => { const scope = getNodeScope(nodeScope) const node = findPreviousFocusableNode(currentNode, scope) node && node !== document diff --git a/src/utilities/get.js b/src/utilities/get.ts similarity index 100% rename from src/utilities/get.js rename to src/utilities/get.ts diff --git a/src/utilities/globalManager.js b/src/utilities/globalManager.ts similarity index 100% rename from src/utilities/globalManager.js rename to src/utilities/globalManager.ts diff --git a/src/utilities/id.js b/src/utilities/id.ts similarity index 63% rename from src/utilities/id.js rename to src/utilities/id.ts index 5d30fe876..b76ed29d4 100644 --- a/src/utilities/id.js +++ b/src/utilities/id.ts @@ -1,16 +1,15 @@ -// @flow // Source // https://github.com/Shopify/javascript-utilities/blob/master/src/other.ts -export function createUniqueIDFactory(prefix: ?string = '') { +export function createUniqueIDFactory(prefix: string = '') { const index = createUniqueIndexFactory(1) - return (prefixOverride: ?string): string => { + return (prefixOverride?: string): string => { const namespace = prefixOverride || prefix || '' return `${namespace}${index()}` } } -export function createUniqueIndexFactory(start: ?number = 1) { +export function createUniqueIndexFactory(start: number = 1) { let index = typeof start === 'number' ? start : 1 return (): number => index++ } diff --git a/src/utilities/images.js b/src/utilities/images.ts similarity index 75% rename from src/utilities/images.js rename to src/utilities/images.ts index 2b33cbefb..f87e4226a 100644 --- a/src/utilities/images.js +++ b/src/utilities/images.ts @@ -1,11 +1,9 @@ -// @flow - export const calculateAspectRatioFit = (props: { - width: number, - height: number, - maxWidth: number, - maxHeight: number, -}): { width: number, height: number } => { + width: number + height: number + maxWidth: number + maxHeight: number +}): { width: number; height: number } => { const { width, height, maxWidth, maxHeight } = props if (width < maxWidth && height < maxHeight) { diff --git a/src/utilities/index.js b/src/utilities/index.ts similarity index 100% rename from src/utilities/index.js rename to src/utilities/index.ts diff --git a/src/utilities/log.js b/src/utilities/log.js deleted file mode 100644 index 14d1033a5..000000000 --- a/src/utilities/log.js +++ /dev/null @@ -1,44 +0,0 @@ -/** - * Higher order functional wrapper for the other log methods - * - * @param function $fn Console.log method - * @param string $message Message to log - * - * @returns function - */ - -/* istanbul ignore next */ -const logWrapper = fn => /* istanbul ignore next */ message => { - /* istanbul ignore next */ - if (process.env.NODE_ENV !== 'test') { - return fn(message) - } -} - -/* istanbul ignore next */ -export const log = /* istanbul ignore next */ message => { - /* istanbul ignore next */ - return logWrapper(console.log, `Blue: ${message}`) -} - -/* istanbul ignore next */ -export const warn = /* istanbul ignore next */ message => { - /* istanbul ignore next */ - return logWrapper(console.warn, `Blue: ${message}`) -} - -/* istanbul ignore next */ -export const error = /* istanbul ignore next */ message => { - /* istanbul ignore next */ - return logWrapper(console.error, `Blue: ${message}`) -} - -/* istanbul ignore next */ -export const Exception = (methodName, message) => { - /* istanbul ignore next */ - if (typeof methodName !== 'string' || typeof message !== 'string') { - warn('helix: Exception(): Arguments need to be strings.') - } - /* istanbul ignore next */ - this.message = `Blue: ${methodName}(): ${message}` -} diff --git a/src/utilities/log.ts b/src/utilities/log.ts new file mode 100644 index 000000000..bbdad93b9 --- /dev/null +++ b/src/utilities/log.ts @@ -0,0 +1,37 @@ +/* istanbul ignore file */ + +/** + * Higher order functional wrapper for the other log methods + * + * @param function $fn Console.log method + * @param string $message Message to log + * + * @returns function + */ +const logWrapper = fn => message => { + if (process.env.NODE_ENV !== 'test') { + return fn(message) + } +} + +export const log = message => { + return logWrapper(console.log)(`Blue: ${message}`) +} + +export const warn = message => { + return logWrapper(console.warn)(`Blue: ${message}`) +} + +export const error = message => { + return logWrapper(console.error)(`Blue: ${message}`) +} + +export const Exception = (methodName, message) => { + if (typeof methodName !== 'string' || typeof message !== 'string') { + warn('helix: Exception(): Arguments need to be strings.') + } + + // TODO: fix typescript complains + // @ts-ignore + this.message = `Blue: ${methodName}(): ${message}` +} diff --git a/src/utilities/memoizeOne.js b/src/utilities/memoizeOne.ts similarity index 79% rename from src/utilities/memoizeOne.js rename to src/utilities/memoizeOne.ts index 7ba887ca3..8d71b170b 100644 --- a/src/utilities/memoizeOne.js +++ b/src/utilities/memoizeOne.ts @@ -15,7 +15,7 @@ const simpleIsEqual = function simpleIsEqual(newArgs, lastArgs) { ) } -export function memoizeOne(resultFn, isEqual) { +export function memoizeOne(resultFn, isEqual?) { if (isEqual === void 0) { isEqual = simpleIsEqual } @@ -33,14 +33,20 @@ export function memoizeOne(resultFn, isEqual) { ) { newArgs[_key] = arguments[_key] } - + // TODO: fix typescript complains + // @ts-ignore if (calledOnce && lastThis === this && isEqual(newArgs, lastArgs)) { return lastResult } - + // TODO: fix typescript complains + // @ts-ignore lastResult = resultFn.apply(this, newArgs) calledOnce = true + // TODO: fix typescript complains + // @ts-ignore lastThis = this + // TODO: fix typescript complains + // @ts-ignore lastArgs = newArgs return lastResult } diff --git a/src/utilities/node.ts b/src/utilities/node.ts index c45753e70..3e3671170 100644 --- a/src/utilities/node.ts +++ b/src/utilities/node.ts @@ -117,7 +117,7 @@ export const getComputedOffsetLeft = (node: Node): number => { return node.getBoundingClientRect().left + offset / 2 } -export const getViewportHeight = (scope: Scope): number => { +export const getViewportHeight = (scope?: Scope): number => { const node = getNodeScope(scope) const { height, offset } = getComputedHeightProps(node) @@ -126,7 +126,7 @@ export const getViewportHeight = (scope: Scope): number => { return height > window.innerHeight ? height : window.innerHeight - offset } -export const getViewportWidth = (scope: Scope): number => { +export const getViewportWidth = (scope?: Scope): number => { const node = getNodeScope(scope) const { width, offset } = getComputedWidthProps(node) @@ -173,9 +173,7 @@ export const isNodeVisible = (options: { const viewportHeight = isWindow ? window.innerHeight - : // $FlowFixMe - nodeScope.getBoundingClientRect().height - // $FlowFixMe + : nodeScope.getBoundingClientRect().height const viewportTop = isWindow ? window.scrollY : nodeScope.scrollTop const viewportBottom = isWindow ? window.innerHeight @@ -246,9 +244,7 @@ export const getClosestNode = (node: Node, selector: string): Node => { */ export const scrollIntoView = (node: Node) => { if (!isNodeElement(node)) return - // $FlowFixMe if (node['scrollIntoViewIfNeeded']) return node.scrollIntoViewIfNeeded() /* istanbul ignore else */ - // $FlowFixMe if (node['scrollIntoView']) return node.scrollIntoView() } diff --git a/src/utilities/nodePosition.js b/src/utilities/nodePosition.ts similarity index 99% rename from src/utilities/nodePosition.js rename to src/utilities/nodePosition.ts index c753a751c..3b5e3b45a 100644 --- a/src/utilities/nodePosition.js +++ b/src/utilities/nodePosition.ts @@ -19,7 +19,7 @@ export const getDirectionY = direction => { return direction.match(/up/) ? 'up' : direction.match(/down/) ? 'down' : '' } -export const getDirections = direction => { +export const getDirections = (direction?) => { return { x: getDirectionX(direction), y: getDirectionY(direction), diff --git a/src/utilities/number.js b/src/utilities/number.ts similarity index 76% rename from src/utilities/number.js rename to src/utilities/number.ts index 9ac8cf774..85c01f580 100644 --- a/src/utilities/number.js +++ b/src/utilities/number.ts @@ -1,11 +1,11 @@ import { isDefined, isNumber } from './is' -export const isEven = (number: string): boolean => number % 2 === 0 +export const isEven = (number: string): boolean => Number(number) % 2 === 0 export const isOdd = (number: string): boolean => !isEven(number) export const getMiddleIndex = (number: string): number => { - const middle = Math.floor(number / 2) + const middle = Math.floor(Number(number) / 2) return isOdd(number) ? middle : middle - 1 } diff --git a/src/utilities/pkg.ts b/src/utilities/pkg.ts index ddb849f2f..b366fa380 100644 --- a/src/utilities/pkg.ts +++ b/src/utilities/pkg.ts @@ -1,3 +1,3 @@ export default { - version: '2.39.4', + version: '2.40.0-no-flow-2', } diff --git a/src/utilities/popper.lib.js b/src/utilities/popper.lib.js new file mode 100644 index 000000000..16d23f6ff --- /dev/null +++ b/src/utilities/popper.lib.js @@ -0,0 +1,9 @@ +/** + * Do not convert this file to TypeScript! + * + * This exists to ensure that the imports work correctly, due to the naming + * of the popper.js node_module, and how it is parsed by TypeScript. + */ +import PopperJS from 'popper.js' + +export default PopperJS diff --git a/src/utilities/scrollFade.js b/src/utilities/scrollFade.ts similarity index 100% rename from src/utilities/scrollFade.js rename to src/utilities/scrollFade.ts diff --git a/src/utilities/scrolling.js b/src/utilities/scrolling.ts similarity index 90% rename from src/utilities/scrolling.js rename to src/utilities/scrolling.ts index 73a75e671..65163ca9c 100644 --- a/src/utilities/scrolling.js +++ b/src/utilities/scrolling.ts @@ -1,9 +1,8 @@ -// @flow import computeScrollIntoView from 'compute-scroll-into-view' import { isFirefox } from './browser' import { isMouseWheelYEvent } from './events' -type ScrollEvent = SyntheticWheelEvent | WheelEvent +type ScrollEvent = WheelEvent // Source // https://github.com/paypal/downshift/blob/master/src/utils.js#L25 @@ -38,7 +37,8 @@ export const remapScrollingPlane = (event: ScrollEvent) => { const node = event.currentTarget // Don't customize native shift + scroll interactions - // $FlowFixMe + // TODO: fix typescript complains + // @ts-ignore if (event.target.shiftKey) return if (!node) return if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) { @@ -46,7 +46,8 @@ export const remapScrollingPlane = (event: ScrollEvent) => { } if (isMouseWheelYEvent(event)) { - // $FlowFixMe + // TODO: fix typescript complains + // @ts-ignore node.scrollLeft += event.deltaY } diff --git a/src/utilities/smoothScroll.js b/src/utilities/smoothScroll.ts similarity index 98% rename from src/utilities/smoothScroll.js rename to src/utilities/smoothScroll.ts index 04cd51a1d..452a9b6fb 100644 --- a/src/utilities/smoothScroll.js +++ b/src/utilities/smoothScroll.ts @@ -1,3 +1,4 @@ +/* istanbul ignore file */ import { isNodeElement } from './node' import { requestAnimationFrame } from './other' import { isFunction } from './is' diff --git a/src/utilities/timestamp.js b/src/utilities/timestamp.ts similarity index 100% rename from src/utilities/timestamp.js rename to src/utilities/timestamp.ts diff --git a/stories/Alert.stories.js b/stories/Alert.stories.js index 7b8dad470..ec70e1cca 100644 --- a/stories/Alert.stories.js +++ b/stories/Alert.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Alert, Button, Heading, Link, Text } from '../src/index.js' +import { Alert, Button, Heading, Link, Text } from '../src/index' const stories = storiesOf('Alert', module) diff --git a/stories/Animate.stories.js b/stories/Animate.stories.js index b7279a138..4ad059459 100644 --- a/stories/Animate.stories.js +++ b/stories/Animate.stories.js @@ -1,6 +1,6 @@ import React, { PureComponent as Component } from 'react' import { storiesOf } from '@storybook/react' -import { Animate, Card, Heading, Text } from '../src/index.js' +import { Animate, Card, Heading, Text } from '../src/index' class AnimateOutExample extends Component { constructor() { diff --git a/stories/AnimateGroup.stories.js b/stories/AnimateGroup.stories.js index 27d401951..dadca6869 100644 --- a/stories/AnimateGroup.stories.js +++ b/stories/AnimateGroup.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Animate, AnimateGroup, Card } from '../src/index.js' +import { Animate, AnimateGroup, Card } from '../src/index' const stories = storiesOf('AnimateGroup', module) diff --git a/stories/ArticleCard.stories.js b/stories/ArticleCard.stories.js index bd78fe958..cec41c418 100644 --- a/stories/ArticleCard.stories.js +++ b/stories/ArticleCard.stories.js @@ -12,7 +12,7 @@ import { AvatarStack, Icon, styled, -} from '../src/index.js' +} from '../src/index' import AvatarSpec from './AvatarGrid/specs/Avatar' const stories = storiesOf('ArticleCard', module) diff --git a/stories/Attachment.stories.js b/stories/Attachment.stories.js index 7795896a9..7a9787684 100644 --- a/stories/Attachment.stories.js +++ b/stories/Attachment.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Attachment } from '../src/index.js' +import { Attachment } from '../src/index' import { withKnobs, select, text } from '@storybook/addon-knobs' import { withArtboard } from '@helpscout/artboard' diff --git a/stories/AttachmentList.stories.js b/stories/AttachmentList.stories.js index 8eef6e7cc..a07f1636d 100644 --- a/stories/AttachmentList.stories.js +++ b/stories/AttachmentList.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Attachment, AttachmentList } from '../src/index.js' +import { Attachment, AttachmentList } from '../src/index' const stories = storiesOf('AttachmentList', module) const onClick = (event, attachment) => { diff --git a/stories/Avatar/Avatar.stories.js b/stories/Avatar/Avatar.stories.js index 2d071420e..4c4a67389 100644 --- a/stories/Avatar/Avatar.stories.js +++ b/stories/Avatar/Avatar.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Avatar, Flexy } from '../../src/index.js' +import { Avatar, Flexy } from '../../src/index' import { ThemeProvider } from '../../src/components/styled' import AvatarSpec from './specs/Avatar' diff --git a/stories/Avatar/AvatarV2.stories.js b/stories/Avatar/AvatarV2.stories.js index 6542acde6..a36a2d2ce 100644 --- a/stories/Avatar/AvatarV2.stories.js +++ b/stories/Avatar/AvatarV2.stories.js @@ -8,7 +8,7 @@ import { select, } from '@storybook/addon-knobs' import { withArtboard, Guide, GuideContainer } from '@helpscout/artboard' -import { Avatar } from '../../src/index.js' +import { Avatar } from '../../src/index' import AvatarSpec from './specs/Avatar' const stories = storiesOf('Avatar', module) diff --git a/stories/AvatarGrid/AvatarGrid.stories.js b/stories/AvatarGrid/AvatarGrid.stories.js index 956098bb5..5e9b3480a 100644 --- a/stories/AvatarGrid/AvatarGrid.stories.js +++ b/stories/AvatarGrid/AvatarGrid.stories.js @@ -1,6 +1,6 @@ import React, { PureComponent as Component } from 'react' import { storiesOf } from '@storybook/react' -import { Avatar, AvatarGrid } from '../../src/index.js' +import { Avatar, AvatarGrid } from '../../src/index' import AvatarSpec from './specs/Avatar' const stories = storiesOf('AvatarGrid', module) diff --git a/stories/AvatarList.stories.js b/stories/AvatarList.stories.js index f8e8f6896..880289da1 100644 --- a/stories/AvatarList.stories.js +++ b/stories/AvatarList.stories.js @@ -1,6 +1,6 @@ import React, { PureComponent as Component } from 'react' import { storiesOf } from '@storybook/react' -import { Avatar, AvatarList } from '../src/index.js' +import { Avatar, AvatarList } from '../src/index' import AvatarSpec from './AvatarGrid/specs/Avatar' const stories = storiesOf('AvatarList', module) diff --git a/stories/AvatarStack.stories.js b/stories/AvatarStack.stories.js index 96d98bf0e..532140b40 100644 --- a/stories/AvatarStack.stories.js +++ b/stories/AvatarStack.stories.js @@ -1,6 +1,6 @@ import React, { PureComponent as Component } from 'react' import { storiesOf } from '@storybook/react' -import { Avatar, AvatarStack } from '../src/index.js' +import { Avatar, AvatarStack } from '../src/index' import AvatarSpec from './AvatarGrid/specs/Avatar' const stories = storiesOf('AvatarStack', module) diff --git a/stories/AvatarStackV2.stories.js b/stories/AvatarStackV2.stories.js index a89867abd..72b2b879f 100644 --- a/stories/AvatarStackV2.stories.js +++ b/stories/AvatarStackV2.stories.js @@ -8,7 +8,7 @@ import { select, } from '@storybook/addon-knobs' import { withArtboard, Guide, GuideContainer } from '@helpscout/artboard' -import { Avatar, AvatarStack } from '../src/index.js' +import { Avatar, AvatarStack } from '../src/index' import AvatarSpec from './Avatar/specs/Avatar' const guides = [ diff --git a/stories/Badge.stories.js b/stories/Badge.stories.js index e17236ddb..7e9aad53e 100644 --- a/stories/Badge.stories.js +++ b/stories/Badge.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Badge } from '../src/index.js' +import { Badge } from '../src/index' const stories = storiesOf('Badge', module) diff --git a/stories/BlankSlate.stories.js b/stories/BlankSlate.stories.js index ea7e25a3f..4d2537c96 100644 --- a/stories/BlankSlate.stories.js +++ b/stories/BlankSlate.stories.js @@ -2,7 +2,7 @@ import React from 'react' import { withKnobs, boolean, number, text } from '@storybook/addon-knobs' import { action } from '@storybook/addon-actions' import { storiesOf } from '@storybook/react' -import { BlankSlate } from '../src/index.js' +import { BlankSlate } from '../src/index' import { withAktiv, withHsApp } from './utils' diff --git a/stories/Button.stories.js b/stories/Button.stories.js index 18d44aee6..67023dcd3 100644 --- a/stories/Button.stories.js +++ b/stories/Button.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Button } from '../src/index.js' +import { Button } from '../src/index' const stories = storiesOf('Button', module) diff --git a/stories/ButtonV2.stories.js b/stories/ButtonV2.stories.js index 4a991ddbb..dfc1dc703 100644 --- a/stories/ButtonV2.stories.js +++ b/stories/ButtonV2.stories.js @@ -8,7 +8,7 @@ import { FormGroup, Icon, PropProvider, -} from '../src/index.js' +} from '../src/index' import styled from '../src/components/styled' const stories = storiesOf('Button/V2', module) diff --git a/stories/Card.stories.js b/stories/Card.stories.js index 4b3ef704b..13396f4cd 100644 --- a/stories/Card.stories.js +++ b/stories/Card.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Card, Heading } from '../src/index.js' +import { Card, Heading } from '../src/index' storiesOf('Card', module) .add('default', () => Hello) diff --git a/stories/CardList.stories.js b/stories/CardList.stories.js index 64f1f8ebe..433d77282 100644 --- a/stories/CardList.stories.js +++ b/stories/CardList.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { ArticleCard, Card, CardList } from '../src/index.js' +import { ArticleCard, Card, CardList } from '../src/index' import { createSpec, faker } from '@helpscout/helix' import { withKnobs, boolean, text, number } from '@storybook/addon-knobs' diff --git a/stories/ChatInbox.stories.js b/stories/ChatInbox.stories.js index a5ef037f0..2d00ada0e 100644 --- a/stories/ChatInbox.stories.js +++ b/stories/ChatInbox.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { AvatarList, ChatInbox, ChatList } from '../src/index.js' +import { AvatarList, ChatInbox, ChatList } from '../src/index' import AvatarSpec from './Avatar/specs/Avatar' const stories = storiesOf('ChatInbox', module) diff --git a/stories/ChatList/ChatList.stories.js b/stories/ChatList/ChatList.stories.js index 4a5b3006c..0389a43f1 100644 --- a/stories/ChatList/ChatList.stories.js +++ b/stories/ChatList/ChatList.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Avatar, ChatList } from '../../src/index.js' +import { Avatar, ChatList } from '../../src/index' import AvatarSpec from '../Avatar/specs/Avatar' import ChatSpec from './specs/Chat' import ChatListItemStateExample from './ChatListItemStateExample' diff --git a/stories/ChatList/ChatListItemStateExample.js b/stories/ChatList/ChatListItemStateExample.js index 784b9ab89..489b82657 100644 --- a/stories/ChatList/ChatListItemStateExample.js +++ b/stories/ChatList/ChatListItemStateExample.js @@ -1,5 +1,5 @@ import React, { PureComponent as Component } from 'react' -import { Avatar, ChatList, List, Button } from '../../src/index.js' +import { Avatar, ChatList, List, Button } from '../../src/index' import AvatarSpec from '../Avatar/specs/Avatar' import ChatSpec from './specs/Chat' diff --git a/stories/ChatScroller.stories.js b/stories/ChatScroller.stories.js index b6222b87b..a1e344ff8 100644 --- a/stories/ChatScroller.stories.js +++ b/stories/ChatScroller.stories.js @@ -8,7 +8,7 @@ import { Message, PreviewCard, Scrollable, -} from '../src/index.js' +} from '../src/index' const stories = storiesOf('ChatScroller', module) diff --git a/stories/ChatSidebar.stories.js b/stories/ChatSidebar.stories.js index e9a562913..87b79a3e5 100644 --- a/stories/ChatSidebar.stories.js +++ b/stories/ChatSidebar.stories.js @@ -8,7 +8,7 @@ import { ChatList, ChatSidebar, Flexy, -} from '../src/index.js' +} from '../src/index' import AvatarSpec from './Avatar/specs/Avatar' import ChatSpec from './ChatList/specs/Chat' diff --git a/stories/ChatTranscript/ChatTranscript.stories.js b/stories/ChatTranscript/ChatTranscript.stories.js index 71eeaee33..68e2ce25a 100644 --- a/stories/ChatTranscript/ChatTranscript.stories.js +++ b/stories/ChatTranscript/ChatTranscript.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { ChatTranscript } from '../../src/index.js' +import { ChatTranscript } from '../../src/index' import fixture from './fixture/data' const stories = storiesOf('ChatTranscript', module) diff --git a/stories/Checkbox.stories.js b/stories/Checkbox.stories.js index 6e11f531d..91f0b28c8 100644 --- a/stories/Checkbox.stories.js +++ b/stories/Checkbox.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Checkbox, ChoiceGroup, Heading, Text } from '../src/index.js' +import { Checkbox, ChoiceGroup, Heading, Text } from '../src/index' storiesOf('Checkbox', module) .add('default', () => ) diff --git a/stories/CloseButton.stories.js b/stories/CloseButton.stories.js index 30726bebb..f20c26f57 100644 --- a/stories/CloseButton.stories.js +++ b/stories/CloseButton.stories.js @@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react' import { withKnobs, boolean, select } from '@storybook/addon-knobs' import { action } from '@storybook/addon-actions' import { withArtboard } from '@helpscout/artboard' -import { CloseButton } from '../src/index.js' +import { CloseButton } from '../src/index' const stories = storiesOf('CloseButton', module) stories.addDecorator(withKnobs) diff --git a/stories/Code.stories.js b/stories/Code.stories.js index 4c10b4c97..7e4556ec0 100644 --- a/stories/Code.stories.js +++ b/stories/Code.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Code, Text } from '../src/index.js' +import { Code, Text } from '../src/index' const stories = storiesOf('Code', module) diff --git a/stories/Collapsible.stories.js b/stories/Collapsible.stories.js index 99f60909c..6d2940960 100644 --- a/stories/Collapsible.stories.js +++ b/stories/Collapsible.stories.js @@ -1,6 +1,6 @@ import React, { PureComponent as Component } from 'react' import { storiesOf } from '@storybook/react' -import { Button, Collapsible } from '../src/index.js' +import { Button, Collapsible } from '../src/index' class SampleComponent extends Component { constructor() { diff --git a/stories/ControlGroup.stories.js b/stories/ControlGroup.stories.js index 5c7260a15..b5445defa 100644 --- a/stories/ControlGroup.stories.js +++ b/stories/ControlGroup.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Button, ControlGroup, Icon, Input, Select } from '../src/index.js' +import { Button, ControlGroup, Icon, Input, Select } from '../src/index' const stories = storiesOf('ControlGroup', module) diff --git a/stories/CopyButton.stories.js b/stories/CopyButton.stories.js index 4675b8c2f..b312b85a2 100644 --- a/stories/CopyButton.stories.js +++ b/stories/CopyButton.stories.js @@ -1,7 +1,7 @@ import React from 'react' import { action } from '@storybook/addon-actions' import { storiesOf } from '@storybook/react' -import { CopyButton } from '../src/index.js' +import { CopyButton } from '../src/index' const stories = storiesOf('CopyButton', module) diff --git a/stories/CopyCode.stories.js b/stories/CopyCode.stories.js index 69b395df1..e3b6169ff 100644 --- a/stories/CopyCode.stories.js +++ b/stories/CopyCode.stories.js @@ -1,7 +1,7 @@ import React from 'react' import { storiesOf } from '@storybook/react' import { action } from '@storybook/addon-actions' -import { CopyCode } from '../src/index.js' +import { CopyCode } from '../src/index' // Import languages import hljs from 'highlight.js/lib/highlight' diff --git a/stories/CopyInput.stories.js b/stories/CopyInput.stories.js index 542f9a984..5b2b5c01b 100644 --- a/stories/CopyInput.stories.js +++ b/stories/CopyInput.stories.js @@ -1,7 +1,7 @@ import React from 'react' import { storiesOf } from '@storybook/react' import { action } from '@storybook/addon-actions' -import { CopyInput } from '../src/index.js' +import { CopyInput } from '../src/index' const stories = storiesOf('CopyInput', module) diff --git a/stories/DetailList.stories.js b/stories/DetailList.stories.js index 2c7d9d335..68ad9fb67 100644 --- a/stories/DetailList.stories.js +++ b/stories/DetailList.stories.js @@ -1,7 +1,7 @@ import React from 'react' import { storiesOf } from '@storybook/react' import { createSpec, faker } from '@helpscout/helix' -import { DetailList, Text } from '../src/index.js' +import { DetailList, Text } from '../src/index' const fixture = createSpec({ text: faker.lorem.sentence(), diff --git a/stories/Dropdown.stories.js b/stories/Dropdown.stories.js index 8bab43a08..74e80a3aa 100644 --- a/stories/Dropdown.stories.js +++ b/stories/Dropdown.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Dropdown, Flexy, Hr, Link } from '../src/index.js' +import { Dropdown, Flexy, Hr, Link } from '../src/index' const logAction = i => () => { console.log(`Action ${i}`) diff --git a/stories/EmbedChat.stories.js b/stories/EmbedChat.stories.js index 2dcf0f98b..9f2c38182 100644 --- a/stories/EmbedChat.stories.js +++ b/stories/EmbedChat.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Avatar, Message } from '../src/index.js' +import { Avatar, Message } from '../src/index' const stories = storiesOf('EmbedChat', module) diff --git a/stories/Emoticon.stories.js b/stories/Emoticon.stories.js index d56be6784..849c2f9b0 100644 --- a/stories/Emoticon.stories.js +++ b/stories/Emoticon.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Emoticon } from '../src/index.js' +import { Emoticon } from '../src/index' import { withKnobs, boolean, diff --git a/stories/Flexy.stories.js b/stories/Flexy.stories.js index 8a4bbf58e..28e99b271 100644 --- a/stories/Flexy.stories.js +++ b/stories/Flexy.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Flexy } from '../src/index.js' +import { Flexy } from '../src/index' import styled from '../src/components/styled' const stories = storiesOf('Flexy', module) diff --git a/stories/FluffyCard.stories.js b/stories/FluffyCard.stories.js index 27aba535e..78a2b2ca0 100644 --- a/stories/FluffyCard.stories.js +++ b/stories/FluffyCard.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { FluffyCard } from '../src/index.js' +import { FluffyCard } from '../src/index' const stories = storiesOf('FluffyCard', module) diff --git a/stories/FormLabel.stories.js b/stories/FormLabel.stories.js index de4ba5acb..b3eb395ed 100644 --- a/stories/FormLabel.stories.js +++ b/stories/FormLabel.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Page, FormLabel, FormGroup, Input, Switch } from '../src/index.js' +import { Page, FormLabel, FormGroup, Input, Switch } from '../src/index' storiesOf('FormLabel', module) .add('default', () => ( diff --git a/stories/Grid.stories.js b/stories/Grid.stories.js index 36e373159..da9b8d4be 100644 --- a/stories/Grid.stories.js +++ b/stories/Grid.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Card, FormGroup, Grid, Input } from '../src/index.js' +import { Card, FormGroup, Grid, Input } from '../src/index' storiesOf('Grid', module) .add('default', () => ( diff --git a/stories/Highlight/Highlight.stories.js b/stories/Highlight/Highlight.stories.js index 11cb01089..e9467fec4 100644 --- a/stories/Highlight/Highlight.stories.js +++ b/stories/Highlight/Highlight.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Highlight } from '../../src/index.js' +import { Highlight } from '../../src/index' // Import languages import hljs from 'highlight.js/lib/highlight' diff --git a/stories/HsApp.stories.js b/stories/HsApp.stories.js index a410f2dfe..c4a9a3b43 100644 --- a/stories/HsApp.stories.js +++ b/stories/HsApp.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { HsApp } from '../src/index.js' +import { HsApp } from '../src/index' const stories = storiesOf('HsApp', module) diff --git a/stories/Huzzah.stories.js b/stories/Huzzah.stories.js index 0ae0cc2be..b2476c4f2 100644 --- a/stories/Huzzah.stories.js +++ b/stories/Huzzah.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Centralize, Huzzah, Text } from '../src/index.js' +import { Centralize, Huzzah, Text } from '../src/index' import huzzahSet from '../src/components/Huzzah/huzzahs' const stories = storiesOf('Huzzah', module) diff --git a/stories/Icon.stories.js b/stories/Icon.stories.js index dd7a648c2..c4a79dfc4 100644 --- a/stories/Icon.stories.js +++ b/stories/Icon.stories.js @@ -1,7 +1,7 @@ import React from 'react' import { storiesOf } from '@storybook/react' import { select } from '@storybook/addon-knobs' -import { Flexy, Icon, Text } from '../src/index.js' +import { Flexy, Icon, Text } from '../src/index' import iconList from '../src/components/Icon/icons' import styled from '../src/components/styled' import { getColor } from '../src/styles/utilities/color' diff --git a/stories/Illo.stories.js b/stories/Illo.stories.js index 3ef760387..6498c515a 100644 --- a/stories/Illo.stories.js +++ b/stories/Illo.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Centralize, Illo, Text } from '../src/index.js' +import { Centralize, Illo, Text } from '../src/index' import illosData from '../src/components/Illo/illos' const stories = storiesOf('Illo', module) diff --git a/stories/Image.stories.js b/stories/Image.stories.js index 76f9007f1..59d850235 100644 --- a/stories/Image.stories.js +++ b/stories/Image.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Image } from '../src/index.js' +import { Image } from '../src/index' const stories = storiesOf('Image', module) diff --git a/stories/InfiniteScroller.stories.js b/stories/InfiniteScroller.stories.js index d8df906d3..9d7d75c01 100644 --- a/stories/InfiniteScroller.stories.js +++ b/stories/InfiniteScroller.stories.js @@ -8,7 +8,7 @@ import { Modal, Scrollable, Text, -} from '../src/index.js' +} from '../src/index' const stories = storiesOf('InfiniteScroller', module) diff --git a/stories/Input.stories.js b/stories/Input.stories.js index fba826e1d..adab3d10f 100644 --- a/stories/Input.stories.js +++ b/stories/Input.stories.js @@ -2,7 +2,7 @@ import React from 'react' import { storiesOf } from '@storybook/react' import { action } from '@storybook/addon-actions' import { boolean, select, text } from '@storybook/addon-knobs' -import { Button, Flexy, Icon, Input, styled } from '../src/index.js' +import { Button, Flexy, Icon, Input, styled } from '../src/index' const stories = storiesOf('Input', module) diff --git a/stories/Link.stories.js b/stories/Link.stories.js index 56b3e02ba..df1563ba8 100644 --- a/stories/Link.stories.js +++ b/stories/Link.stories.js @@ -2,7 +2,7 @@ import React from 'react' import { storiesOf } from '@storybook/react' import { withArtboard } from '@helpscout/artboard' import { boolean, text } from '@storybook/addon-knobs' -import { Link } from '../src/index.js' +import { Link } from '../src/index' const stories = storiesOf('Link', module) diff --git a/stories/List.stories.js b/stories/List.stories.js index 0c28b1932..01f8f9f23 100644 --- a/stories/List.stories.js +++ b/stories/List.stories.js @@ -2,7 +2,7 @@ import React from 'react' import { storiesOf } from '@storybook/react' import { withKnobs, select } from '@storybook/addon-knobs' import { withArtboard } from '@helpscout/artboard' -import { List, Heading, Text } from '../src/index.js' +import { List, Heading, Text } from '../src/index' const stories = storiesOf('List', module) stories.addDecorator( diff --git a/stories/LoadingDots.stories.js b/stories/LoadingDots.stories.js index 3f22abec3..032ca484b 100644 --- a/stories/LoadingDots.stories.js +++ b/stories/LoadingDots.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { LoadingDots, Text } from '../src/index.js' +import { LoadingDots, Text } from '../src/index' storiesOf('LoadingDots', module) .add('default', () => ) diff --git a/stories/Message/Message.Attachment.stories.js b/stories/Message/Message.Attachment.stories.js index ea5cfd98b..1580630e7 100644 --- a/stories/Message/Message.Attachment.stories.js +++ b/stories/Message/Message.Attachment.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Avatar, Message } from '../../src/index.js' +import { Avatar, Message } from '../../src/index' const stories = storiesOf('Message/Attachment', module) const imageUrl = diff --git a/stories/Message/Message.Chat.stories.js b/stories/Message/Message.Chat.stories.js index e63193afc..abff83843 100644 --- a/stories/Message/Message.Chat.stories.js +++ b/stories/Message/Message.Chat.stories.js @@ -1,7 +1,7 @@ import React from 'react' import { storiesOf } from '@storybook/react' import { faker } from '@helpscout/helix' -import { Avatar, Message } from '../../src/index.js' +import { Avatar, Message } from '../../src/index' const stories = storiesOf('Message/Chat', module) diff --git a/stories/Message/Message.Embed.stories.js b/stories/Message/Message.Embed.stories.js index b0621d64d..1e963954e 100644 --- a/stories/Message/Message.Embed.stories.js +++ b/stories/Message/Message.Embed.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Avatar, Message } from '../../src/index.js' +import { Avatar, Message } from '../../src/index' const stories = storiesOf('Message/Embed', module) const html = ` diff --git a/stories/Message/Message.Media.old.stories.js b/stories/Message/Message.Media.old.stories.js index ebf1609d6..0dc49486f 100644 --- a/stories/Message/Message.Media.old.stories.js +++ b/stories/Message/Message.Media.old.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Avatar, Message } from '../../src/index.js' +import { Avatar, Message } from '../../src/index' const stories = storiesOf('Message/Media', module) diff --git a/stories/Message/Message.Media.stories.js b/stories/Message/Message.Media.stories.js index 38e67c5f6..b7c3f47b5 100644 --- a/stories/Message/Message.Media.stories.js +++ b/stories/Message/Message.Media.stories.js @@ -1,7 +1,7 @@ import React from 'react' import { storiesOf } from '@storybook/react' import { withKnobs, boolean, number, text } from '@storybook/addon-knobs' -import { Avatar, Message } from '../../src/index.js' +import { Avatar, Message } from '../../src/index' const stories = storiesOf('Message', module) stories.addDecorator(withKnobs) diff --git a/stories/Message/Message.Provider.stories.js b/stories/Message/Message.Provider.stories.js index b9a161e0a..e929b03a4 100644 --- a/stories/Message/Message.Provider.stories.js +++ b/stories/Message/Message.Provider.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Message } from '../../src/index.js' +import { Message } from '../../src/index' import { ScopeProvider } from '../../src/components/styled' const stories = storiesOf('Message/Provider', module) diff --git a/stories/Message/Message.default.stories.js b/stories/Message/Message.default.stories.js index 5ace9a76a..39f64817c 100644 --- a/stories/Message/Message.default.stories.js +++ b/stories/Message/Message.default.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Avatar, Link, Message, PreviewCard } from '../../src/index.js' +import { Avatar, Link, Message, PreviewCard } from '../../src/index' const stories = storiesOf('Message', module) diff --git a/stories/Message/Message.stories.js b/stories/Message/Message.stories.js index 88d3f51ef..b2c1b0410 100644 --- a/stories/Message/Message.stories.js +++ b/stories/Message/Message.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Avatar, Link, Message, PreviewCard } from '../../src/index.js' +import { Avatar, Link, Message, PreviewCard } from '../../src/index' import { ScopeProvider } from '../../src/components/styled' const stories = storiesOf('Message', module) diff --git a/stories/Modal.stories.js b/stories/Modal.stories.js index 9a621ac9c..8136f7d3c 100644 --- a/stories/Modal.stories.js +++ b/stories/Modal.stories.js @@ -1,5 +1,4 @@ import React from 'react' -import PropTypes from 'prop-types' import { storiesOf } from '@storybook/react' import { AutoDropdown, @@ -14,7 +13,7 @@ import { Switch, Toolbar, styled, -} from '../src/index.js' +} from '../src/index' import { FrameProvider } from '../src/components/styled' import { MemoryRouter } from 'react-router' import { Route } from 'react-router-dom' @@ -233,7 +232,7 @@ stories.add('custom close trigger', () => { } Contents.contextTypes = { - closePortal: PropTypes.func, + closePortal: () => {}, } return ( diff --git a/stories/NavLink.stories.js b/stories/NavLink.stories.js index 21622eb47..5bccdc6c9 100644 --- a/stories/NavLink.stories.js +++ b/stories/NavLink.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { NavLink, Link } from '../src/index.js' +import { NavLink, Link } from '../src/index' import { MemoryRouter as Router, Route } from 'react-router-dom' const stories = storiesOf('NavLink', module) diff --git a/stories/Notification.stories.js b/stories/Notification.stories.js index b0cfb8f25..b8f0ebea3 100644 --- a/stories/Notification.stories.js +++ b/stories/Notification.stories.js @@ -4,7 +4,7 @@ import Artboard, { GuideContainer, Guide } from '@helpscout/artboard' import { storiesOf } from '@storybook/react' import { withKnobs, text, select } from '@storybook/addon-knobs' import { action } from '@storybook/addon-actions' -import { Notification } from '../src/index.js' +import { Notification } from '../src/index' const NotificationSpec = createSpec({ id: faker.random.uuid(), diff --git a/stories/NotificationStack.stories.js b/stories/NotificationStack.stories.js index 8d602b8f7..348c5b33a 100644 --- a/stories/NotificationStack.stories.js +++ b/stories/NotificationStack.stories.js @@ -2,7 +2,7 @@ import React, { Component } from 'react' import { createSpec, faker } from '@helpscout/helix' import { storiesOf } from '@storybook/react' import { action } from '@storybook/addon-actions' -import { Notification, NotificationStack } from '../src/index.js' +import { Notification, NotificationStack } from '../src/index' const NotificationSpec = createSpec({ id: faker.random.uuid(), diff --git a/stories/OptionIcon.stories.js b/stories/OptionIcon.stories.js index 4b6b94326..4af0b1491 100644 --- a/stories/OptionIcon.stories.js +++ b/stories/OptionIcon.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { OptionIcon } from '../src/index.js' +import { OptionIcon } from '../src/index' import styled, { ThemeProvider } from '../src/components/styled' const stories = storiesOf('OptionIcon', module) diff --git a/stories/OptionTile.stories.js b/stories/OptionTile.stories.js index 6c78f9bd5..295813018 100644 --- a/stories/OptionTile.stories.js +++ b/stories/OptionTile.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { OptionTile } from '../src/index.js' +import { OptionTile } from '../src/index' import styled, { ThemeProvider } from '../src/components/styled' const stories = storiesOf('OptionTile', module) diff --git a/stories/Overflow.stories.js b/stories/Overflow.stories.js index c899e6013..f769e6bd3 100644 --- a/stories/Overflow.stories.js +++ b/stories/Overflow.stories.js @@ -1,7 +1,7 @@ import React from 'react' import { createSpec, faker } from '@helpscout/helix' import { storiesOf } from '@storybook/react' -import { List, Overflow, Tag } from '../src/index.js' +import { List, Overflow, Tag } from '../src/index' const ChatSpec = createSpec({ id: faker.random.uuid(), diff --git a/stories/Overlay.stories.js b/stories/Overlay.stories.js index f7f45e8b0..6d8cbebb7 100644 --- a/stories/Overlay.stories.js +++ b/stories/Overlay.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Card, Overlay, PropProvider } from '../src/index.js' +import { Card, Overlay, PropProvider } from '../src/index' const stories = storiesOf('Overlay', module) diff --git a/stories/Page/Page.Actions.stories.js b/stories/Page/Page.Actions.stories.js index 3ddaf288e..2638d65e8 100644 --- a/stories/Page/Page.Actions.stories.js +++ b/stories/Page/Page.Actions.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Button, Input, Page, PropProvider } from '../../src/index.js' +import { Button, Input, Page, PropProvider } from '../../src/index' import { App } from './decorators' const stories = storiesOf('Page/Actions', module).addDecorator(App) diff --git a/stories/Page/Page.Card.stories.js b/stories/Page/Page.Card.stories.js index b4bc0433e..5b0f8ba95 100644 --- a/stories/Page/Page.Card.stories.js +++ b/stories/Page/Page.Card.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Page } from '../../src/index.js' +import { Page } from '../../src/index' import { App } from './decorators' const stories = storiesOf('Page/Card', module).addDecorator(App) diff --git a/stories/Page/Page.Example.stories.js b/stories/Page/Page.Example.stories.js index 30e968d7e..94cea3a1d 100644 --- a/stories/Page/Page.Example.stories.js +++ b/stories/Page/Page.Example.stories.js @@ -8,7 +8,7 @@ import { Input, Page, Switch, -} from '../../src/index.js' +} from '../../src/index' import { App } from './decorators' const stories = storiesOf('Page/Example', module).addDecorator(App) diff --git a/stories/Page/Page.Header.stories.js b/stories/Page/Page.Header.stories.js index cced5a534..c2538f644 100644 --- a/stories/Page/Page.Header.stories.js +++ b/stories/Page/Page.Header.stories.js @@ -1,7 +1,7 @@ import React from 'react' import styled from '../../src/components/styled' import { storiesOf } from '@storybook/react' -import { Page } from '../../src/index.js' +import { Page } from '../../src/index' import { App } from './decorators' const stories = storiesOf('Page/Header', module).addDecorator(App) diff --git a/stories/Page/Page.Section.stories.js b/stories/Page/Page.Section.stories.js index 94288b084..7fdf83f37 100644 --- a/stories/Page/Page.Section.stories.js +++ b/stories/Page/Page.Section.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Page } from '../../src/index.js' +import { Page } from '../../src/index' import { App } from './decorators' const stories = storiesOf('Page/Section', module).addDecorator(App) diff --git a/stories/PreviewCard.stories.js b/stories/PreviewCard.stories.js index 942b8f2d0..2040e8d95 100644 --- a/stories/PreviewCard.stories.js +++ b/stories/PreviewCard.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { PreviewCard } from '../src/index.js' +import { PreviewCard } from '../src/index' storiesOf('PreviewCard', module).add('default', () => ( Preview content text diff --git a/stories/ProgressBar.stories.js b/stories/ProgressBar.stories.js index 61a2698ab..7c5aa8e0c 100644 --- a/stories/ProgressBar.stories.js +++ b/stories/ProgressBar.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { ProgressBar } from '../src/index.js' +import { ProgressBar } from '../src/index' storiesOf('ProgressBar', module) .add('default', () => ) diff --git a/stories/PromoCard.stories.js b/stories/PromoCard.stories.js index d3fb27685..48d3839d3 100644 --- a/stories/PromoCard.stories.js +++ b/stories/PromoCard.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { PromoCard } from '../src/index.js' +import { PromoCard } from '../src/index' import { withKnobs, boolean, diff --git a/stories/Radio.stories.js b/stories/Radio.stories.js index e9ccad1f2..f4b089f52 100644 --- a/stories/Radio.stories.js +++ b/stories/Radio.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Grid, PropProvider, Radio, ChoiceGroup } from '../src/index.js' +import { Grid, PropProvider, Radio, ChoiceGroup } from '../src/index' storiesOf('Radio', module) .add('default', () => ) diff --git a/stories/RadioCard.stories.js b/stories/RadioCard.stories.js index 90d551562..1a61fb51b 100644 --- a/stories/RadioCard.stories.js +++ b/stories/RadioCard.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { ChoiceGroup, RadioCard } from '../src/index.js' +import { ChoiceGroup, RadioCard } from '../src/index' const stories = storiesOf('RadioCard', module) diff --git a/stories/Samp.stories.js b/stories/Samp.stories.js index 52521927c..34e2465cd 100644 --- a/stories/Samp.stories.js +++ b/stories/Samp.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Samp } from '../src/index.js' +import { Samp } from '../src/index' const stories = storiesOf('Samp', module) diff --git a/stories/ScrollLock.stories.js b/stories/ScrollLock.stories.js index b93e60104..4e5ee4d29 100644 --- a/stories/ScrollLock.stories.js +++ b/stories/ScrollLock.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Flexy, Image, Scrollable } from '../src/index.js' +import { Flexy, Image, Scrollable } from '../src/index' const stories = storiesOf('ScrollLock', module) diff --git a/stories/Scrollable.stories.js b/stories/Scrollable.stories.js index 1bb720d1d..af36c69fb 100644 --- a/stories/Scrollable.stories.js +++ b/stories/Scrollable.stories.js @@ -4,7 +4,7 @@ import { withKnobs, boolean } from '@storybook/addon-knobs' import { action } from '@storybook/addon-actions' import { withArtboard } from '@helpscout/artboard' import { createSpec, faker } from '@helpscout/helix' -import { Card, Image, Scrollable } from '../src/index.js' +import { Card, Image, Scrollable } from '../src/index' import styled from '../src/components/styled' import baseStyles from '../src/styles/resets/baseStyles.css.js' diff --git a/stories/Select.stories.js b/stories/Select.stories.js index 6111839f2..73ecb3c79 100644 --- a/stories/Select.stories.js +++ b/stories/Select.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Select } from '../src/index.js' +import { Select } from '../src/index' const stories = storiesOf('Select', module) diff --git a/stories/SideNavigation.stories.js b/stories/SideNavigation.stories.js index 633d93366..0c4ba9ae0 100644 --- a/stories/SideNavigation.stories.js +++ b/stories/SideNavigation.stories.js @@ -1,24 +1,12 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { withKnobs, boolean, text, select } from '@storybook/addon-knobs' +import { withKnobs, text } from '@storybook/addon-knobs' import withAktiv from './utils/withAktiv' import HsApp from '../src/components/HsApp' -import { - SideNavigation, - Flexy, - Heading, - Icon, - Button, - AutoDropdown, -} from '../src/index.js' -import Dropdown from '../src/components/Dropdown/DropdownV2' -import { SideNavigationHeaderUI } from '../src/components/SideNavigation/SideNavigation.css' +import { SideNavigation, Flexy, Heading, Button } from '../src/index' import { ItemSpec } from './DropdownV2.stories' -import styled from '../src/components/styled' -import { render } from 'enzyme' - const renderSidebarFolders = () => { return ( diff --git a/stories/SidebarCollapsibleCard.stories.js b/stories/SidebarCollapsibleCard.stories.js index 0fefea46c..2f90eb87e 100644 --- a/stories/SidebarCollapsibleCard.stories.js +++ b/stories/SidebarCollapsibleCard.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Sortable, SidebarCollapsibleCard } from '../src/index.js' +import { Sortable, SidebarCollapsibleCard } from '../src/index' storiesOf('SidebarCollapsibleCard', module) .add('default', () => ( diff --git a/stories/Skeleton.stories.js b/stories/Skeleton.stories.js index 41d8d1aa1..1b0268818 100644 --- a/stories/Skeleton.stories.js +++ b/stories/Skeleton.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { FormGroup, Flexy, Skeleton } from '../src/index.js' +import { FormGroup, Flexy, Skeleton } from '../src/index' const stories = storiesOf('Skeleton', module) diff --git a/stories/Sortable.stories.js b/stories/Sortable.stories.js index 52ad2b62d..cec8300b0 100644 --- a/stories/Sortable.stories.js +++ b/stories/Sortable.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Card, Sortable, SidebarCollapsibleCard } from '../src/index.js' +import { Card, Sortable, SidebarCollapsibleCard } from '../src/index' storiesOf('Sortable', module) .add('default', () => ( diff --git a/stories/Spinner.stories.js b/stories/Spinner.stories.js index 88488eae5..2e35c36bb 100644 --- a/stories/Spinner.stories.js +++ b/stories/Spinner.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Spinner } from '../src/index.js' +import { Spinner } from '../src/index' const stories = storiesOf('Spinner', module) diff --git a/stories/StatusAvatar.stories.js b/stories/StatusAvatar.stories.js index 42a25640e..fa6abf5d8 100644 --- a/stories/StatusAvatar.stories.js +++ b/stories/StatusAvatar.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { StatusAvatar } from '../src/index.js' +import { StatusAvatar } from '../src/index' import AvatarSpec from './Avatar/specs/Avatar' const stories = storiesOf('StatusAvatar', module) diff --git a/stories/StatusBadge.stories.js b/stories/StatusBadge.stories.js index 261cedeef..3ec4c9122 100644 --- a/stories/StatusBadge.stories.js +++ b/stories/StatusBadge.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { StatusBadge } from '../src/index.js' +import { StatusBadge } from '../src/index' const stories = storiesOf('StatusBadge', module) diff --git a/stories/StatusBar.stories.js b/stories/StatusBar.stories.js index 1aa827717..fbdd9d79f 100644 --- a/stories/StatusBar.stories.js +++ b/stories/StatusBar.stories.js @@ -1,6 +1,6 @@ import React, { PureComponent as Component } from 'react' import { storiesOf } from '@storybook/react' -import { StatusBar } from '../src/index.js' +import { StatusBar } from '../src/index' const stories = storiesOf('StatusBar', module) diff --git a/stories/StatusDot.stories.js b/stories/StatusDot.stories.js index 81e16f371..dd20f7751 100644 --- a/stories/StatusDot.stories.js +++ b/stories/StatusDot.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { StatusDot } from '../src/index.js' +import { StatusDot } from '../src/index' const stories = storiesOf('StatusDot', module) diff --git a/stories/Switch.stories.js b/stories/Switch.stories.js index fc546a5cb..c99a1a040 100644 --- a/stories/Switch.stories.js +++ b/stories/Switch.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Flexy, Hr, Switch, Text } from '../src/index.js' +import { Flexy, Hr, Switch, Text } from '../src/index' const stories = storiesOf('Switch', module) diff --git a/stories/TabBar.stories.js b/stories/TabBar.stories.js index e88aca71c..0df3b24bd 100644 --- a/stories/TabBar.stories.js +++ b/stories/TabBar.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { TabBar } from '../src/index.js' +import { TabBar } from '../src/index' import Dropdown from '../src/components/Dropdown/V2/' import Button from '../src/components/Button' diff --git a/stories/Table/Table.stories.js b/stories/Table/Table.stories.js index 8321baf84..327acc6f2 100644 --- a/stories/Table/Table.stories.js +++ b/stories/Table/Table.stories.js @@ -11,7 +11,7 @@ import { import Heading from '../../src/components/Heading' import PreviewCard from '../../src/components/PreviewCard' -import { Table } from '../../src/index.js' +import { Table } from '../../src/index' import TablePlayground from './TablePlayground' import TableWithPagination from './TableWithPagination' import TableWithSorting from './TableWithSorting' diff --git a/stories/Table/TablePlayground.js b/stories/Table/TablePlayground.js index 0bcbf97fc..5ca1b59bb 100644 --- a/stories/Table/TablePlayground.js +++ b/stories/Table/TablePlayground.js @@ -1,6 +1,6 @@ import React, { Component } from 'react' -import { Table } from '../../src/index.js' +import { Table } from '../../src/index' import Heading from '../../src/components/Heading' import ColumnCustomizer from './ColumnsCustomizer' import TableCustomizer from './TableCustomizer' diff --git a/stories/Table/TableWithPagination.js b/stories/Table/TableWithPagination.js index 657259a65..e55b310c7 100644 --- a/stories/Table/TableWithPagination.js +++ b/stories/Table/TableWithPagination.js @@ -1,6 +1,6 @@ import React, { Component } from 'react' -import { Table } from '../../src/index.js' +import { Table } from '../../src/index' import Pagination from '../../src/components/Pagination' import { Wrapper } from './commonComponents' import { diff --git a/stories/Table/TableWithSorting.js b/stories/Table/TableWithSorting.js index 148d46ac0..7f42751ff 100644 --- a/stories/Table/TableWithSorting.js +++ b/stories/Table/TableWithSorting.js @@ -3,7 +3,7 @@ import { createFakeCustomers, sortData, } from '../../src/components/Table/__tests__/utils' -import { Table } from '../../src/index.js' +import { Table } from '../../src/index' import { Wrapper } from './commonComponents' export default class TablePlayground extends Component { diff --git a/stories/Tag/Tag.stories.js b/stories/Tag/Tag.stories.js index 5e8d86f97..a2319d7a6 100644 --- a/stories/Tag/Tag.stories.js +++ b/stories/Tag/Tag.stories.js @@ -8,7 +8,7 @@ import { text, } from '@storybook/addon-knobs' import { withArtboard } from '@helpscout/artboard' -import { Tag } from '../../src/index.js' +import { Tag } from '../../src/index' const stories = storiesOf('Tag', module) stories.addDecorator(withArtboard({ id: 'Tag' })) diff --git a/stories/TagList.stories.js b/stories/TagList.stories.js index 123929bcf..de755a3a7 100644 --- a/stories/TagList.stories.js +++ b/stories/TagList.stories.js @@ -1,6 +1,6 @@ import React, { PureComponent as Component } from 'react' import { storiesOf } from '@storybook/react' -import { TagList, Tag } from '../src/index.js' +import { TagList, Tag } from '../src/index' import TagSpec from './Tag/specs/Tag' const stories = storiesOf('TagList', module) diff --git a/stories/Timeline.stories.js b/stories/Timeline.stories.js index ac3864ed5..d06e9adbd 100644 --- a/stories/Timeline.stories.js +++ b/stories/Timeline.stories.js @@ -1,7 +1,7 @@ import React from 'react' import { createSpec, faker } from '@helpscout/helix' import { storiesOf } from '@storybook/react' -import { Link, Timeline, Text } from '../src/index.js' +import { Link, Timeline, Text } from '../src/index' const fixture = createSpec({ timestamp: '9:41am', diff --git a/stories/Timestamp.stories.js b/stories/Timestamp.stories.js index 8ce1d24f9..824ad053d 100644 --- a/stories/Timestamp.stories.js +++ b/stories/Timestamp.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Timestamp } from '../src/index.js' +import { Timestamp } from '../src/index' const stories = storiesOf('Timestamp', module) diff --git a/stories/Toolbar.stories.js b/stories/Toolbar.stories.js index f09a676fb..97645802f 100644 --- a/stories/Toolbar.stories.js +++ b/stories/Toolbar.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { Toolbar } from '../src/index.js' +import { Toolbar } from '../src/index' import { SampleComponent as AvatarListSampleComponent } from './AvatarList.stories' import { SampleComponent as TagListSampleComponent } from './TagList.stories' diff --git a/stories/Truncate.stories.js b/stories/Truncate.stories.js index 08a653cb5..2d79b034c 100644 --- a/stories/Truncate.stories.js +++ b/stories/Truncate.stories.js @@ -1,7 +1,7 @@ import React from 'react' import { createSpec, faker } from '@helpscout/helix' import { storiesOf } from '@storybook/react' -import { Truncate } from '../src/index.js' +import { Truncate } from '../src/index' const fixture = createSpec(faker.lorem.paragraph()) diff --git a/stories/VisuallyHidden.stories.js b/stories/VisuallyHidden.stories.js index fab5fd565..939f3e598 100644 --- a/stories/VisuallyHidden.stories.js +++ b/stories/VisuallyHidden.stories.js @@ -1,6 +1,6 @@ import React from 'react' import { storiesOf } from '@storybook/react' -import { VisuallyHidden } from '../src/index.js' +import { VisuallyHidden } from '../src/index' storiesOf('VisuallyHidden', module) .add('default', () => (