From 743bd1507af336a62946361f3fe3c800ae5bd4c2 Mon Sep 17 00:00:00 2001 From: Lynn Zhang <78454019+lyzhan7@users.noreply.github.com> Date: Fri, 24 Feb 2023 11:59:20 -0800 Subject: [PATCH] [Proposal] Order imports using the eslint import plugin (#2632) * Add import plugin (eslintrc.json, package.json, yarn.lock) * Changes from running yarn lint --fix * Change files * Change import order config "warn" to "error" * Run yarn lint --fix again + some manual fixes * Change files * Run prettier * Re-order - move standard libraries (react/react native) to the top * Run yarn lint --fix after previous change * Change files * Bad merge --- .eslintrc.json | 23 ++++++- .../pages/ActivityIndicatorPageObject.ts | 2 +- apps/E2E/src/Avatar/pages/AvatarPageObject.ts | 2 +- apps/E2E/src/Avatar/specs/Avatar.spec.win.ts | 2 +- .../pages/ButtonLegacyPageObject.ts | 2 +- .../specs/ButtonLegacy.spec.win.ts | 2 +- .../ButtonV1/specs/ButtonV1.spec.android.ts | 2 +- .../src/ButtonV1/specs/ButtonV1.spec.win.ts | 4 +- .../Callout/pages/CalloutPageObject.win.ts | 2 +- .../E2E/src/Callout/specs/Callout.spec.win.ts | 4 +- .../specs/CheckboxLegacy.spec.win.ts | 4 +- .../CheckboxV1/pages/CheckboxV1PageObject.ts | 2 +- .../specs/CheckboxV1.spec.android.ts | 2 +- .../CheckboxV1/specs/CheckboxV1.spec.win.ts | 4 +- .../pages/ColorTokensPageObject.win.ts | 2 +- .../pages/ContextualMenuPageObject.win.ts | 4 +- .../specs/ContextualMenu.spec.win.ts | 2 +- .../pages/CornerRadiusTokensPageObject.ts | 2 +- .../pages/FocusTrapZonePageObject.win.ts | 2 +- apps/E2E/src/FocusZone/consts.ts | 1 + .../FocusZone/pages/FocusZonePageObject.ts | 1 + .../IconLegacy/pages/IconLegacyPageObject.ts | 2 +- apps/E2E/src/IconV1/pages/IconV1PageObject.ts | 2 +- apps/E2E/src/IconV1/specs/IconV1.spec.win.ts | 2 +- .../LinkLegacy/pages/LinkLegacyPageObject.ts | 2 +- .../LinkLegacy/specs/LinkLegacy.spec.win.ts | 4 +- apps/E2E/src/LinkV1/pages/LinkV1PageObject.ts | 2 +- apps/E2E/src/LinkV1/specs/LinkV1.spec.win.ts | 4 +- .../specs/MenuButtonLegacy.spec.win.ts | 2 +- .../pages/MenuButtonV1PageObject.win.ts | 2 +- .../specs/MenuButtonV1.spec.win.ts | 2 +- .../src/Persona/pages/PersonaPageObject.ts | 2 +- .../pages/PersonaCoinPageObject.ts | 2 +- .../Pressable/pages/PressablePageObject.ts | 2 +- .../Separator/pages/SeparatorPageObject.ts | 2 +- apps/E2E/src/Shadow/pages/ShadowPageObject.ts | 2 +- .../src/Shimmer/pages/ShimmerPageObject.ts | 2 +- .../Spacing/pages/SpacingTokensPageObject.ts | 2 +- .../src/Spinner/pages/SpinnerPageObject.ts | 2 +- .../pages/StrokeWidthTokensPageObject.ts | 2 +- apps/E2E/src/Svg/pages/SvgPageObject.ts | 2 +- apps/E2E/src/Switch/specs/Switch.spec.win.ts | 2 +- .../TabsLegacy/pages/TabsLegacyPageObject.ts | 2 +- .../TabsLegacy/specs/TabsLegacy.spec.win.ts | 2 +- apps/E2E/src/TabsV1/pages/TabsV1PageObject.ts | 2 +- apps/E2E/src/TabsV1/specs/TabsV1.spec.win.ts | 2 +- .../TextLegacy/pages/TextLegacyPageObject.ts | 2 +- .../src/TextV1/pages/TextV1PageObject.win.ts | 2 +- .../src/Theme/pages/ThemePageObject.win.ts | 2 +- .../specs/NativeTesting.spec.win.ts | 2 +- apps/fluent-tester/src/FluentTester.tsx | 20 +++--- apps/fluent-tester/src/FluentTesterApp.tsx | 6 +- .../ActivityIndicatorTest.tsx | 8 ++- .../src/TestComponents/Avatar/AvatarTest.tsx | 9 +-- .../Avatar/BasicAvatar.android.tsx | 8 ++- .../src/TestComponents/Avatar/BasicAvatar.tsx | 10 +-- .../Avatar/CustomizedAvatar.tsx | 10 +-- .../TestComponents/Avatar/E2EAvatarTest.tsx | 6 +- .../Avatar/NativeAvatarTest.tsx | 10 +-- .../src/TestComponents/Badge/BadgeTest.tsx | 9 +-- .../TestComponents/Badge/BasicBadgeTest.tsx | 8 ++- .../TestComponents/Badge/CounterBadgeTest.tsx | 2 + .../src/TestComponents/Badge/E2EBadgeTest.tsx | 6 +- .../Badge/PresenceBadgeTest.tsx | 4 +- .../Button/ButtonHOCTestSection.tsx | 8 ++- .../Button/ButtonIconTestSection.android.tsx | 6 +- .../Button/ButtonIconTestSection.tsx | 8 ++- .../Button/ButtonShapeTestSection.tsx | 4 +- .../Button/ButtonSizeTestSection.tsx | 6 +- .../src/TestComponents/Button/ButtonTest.tsx | 19 +++--- .../ButtonVariantTestSection.mobile.tsx | 6 +- .../Button/ButtonVariantTestSection.tsx | 4 +- .../TestComponents/Button/E2EButtonTest.tsx | 10 +-- .../Button/ToggleButtonTestSection.tsx | 6 +- .../Button/deprecated/ButtonFocusTest.tsx | 4 +- .../Button/deprecated/ButtonIconTest.tsx | 8 ++- .../Button/deprecated/E2EButtonTest.tsx | 8 ++- .../TestComponents/Callout/CalloutE2ETest.tsx | 2 + .../TestComponents/Callout/CalloutTest.tsx | 10 +-- .../CheckboxLegacy/CheckboxLegacyE2ETest.tsx | 8 ++- .../CheckboxLegacy/CheckboxLegacyTest.tsx | 12 ++-- .../CheckboxV1/CheckboxV1Test.tsx | 18 ++--- .../CheckboxV1/E2ECheckboxV1Test.tsx | 10 +-- .../ColorTokens/ColorTokenTest.tsx | 20 +++--- .../TestComponents/Common/AlignmentPicker.tsx | 6 +- .../Common/MenuPicker.desktop.tsx | 9 ++- .../src/TestComponents/Common/MenuPicker.tsx | 4 +- .../Common/MenuPicker.windows.tsx | 1 + .../src/TestComponents/Common/Slider.tsx | 1 + .../TestComponents/Common/StyledPicker.tsx | 4 +- .../TestComponents/Common/iconExamples.tsx | 2 + .../src/TestComponents/Common/styles.ts | 1 + .../ContextualMenu/ContextualMenuTest.tsx | 6 +- .../ContextualMenu/E2EContextualMenuTest.tsx | 2 + .../CornerRadius/CornerRadiusTest.tsx | 14 ++-- .../TestComponents/Divider/DividerTest.tsx | 8 ++- .../Divider/MobileDividerTest.tsx | 5 +- .../src/TestComponents/Drawer/DrawerTest.tsx | 10 +-- .../TestComponents/Dropdown/DropdownTest.tsx | 4 +- .../TestComponents/Expander/ExpanderTest.tsx | 8 ++- .../FocusTrapZone/FocusTrapZoneTest.tsx | 10 +-- .../FocusZone/FocusZoneE2ETest.tsx | 12 ++-- .../FocusZone/FocusZoneTest.tsx | 10 +-- .../src/TestComponents/FocusZone/styles.ts | 1 + .../TestComponents/Icon/IconLegacyE2ETest.tsx | 4 +- .../src/TestComponents/Icon/IconTest.tsx | 12 ++-- .../src/TestComponents/Icon/IconV1.tsx | 4 +- .../src/TestComponents/Icon/IconV1E2ETest.tsx | 2 + .../LinkLegacy/E2ELinkLegacyTest.tsx | 4 +- .../LinkLegacy/LinkLegacyTest.tsx | 6 +- .../TestComponents/LinkV1/E2ELinkV1Test.tsx | 4 +- .../TestComponents/LinkV1/InlineLinksTest.tsx | 2 + .../LinkV1/InlineLinksTest.win32.tsx | 1 + .../src/TestComponents/LinkV1/LinkV1Test.tsx | 10 +-- .../src/TestComponents/Menu/E2EMenuTest.tsx | 8 ++- .../src/TestComponents/Menu/MenuRefs.tsx | 2 + .../TestComponents/Menu/MenuScrollView.tsx | 4 +- .../src/TestComponents/Menu/MenuTest.tsx | 14 ++-- .../src/TestComponents/Menu/MenuTooltips.tsx | 2 + .../Menu/MenuTriggerCallbacks.tsx | 6 +- .../CustomizedMenuButtonTest.tsx | 4 +- .../MenuButtonLegacyE2ETest.tsx | 6 +- .../MenuButtonLegacy/MenuButtonLegacyTest.tsx | 9 +-- .../MenuButtonLegacy/NestedMenuButtonTest.tsx | 4 +- .../StandardMenuButtonTest.tsx | 8 ++- .../MenuButtonLegacy/testData.ts | 1 + .../MenuButtonV1/CustomizedMenuButtonTest.tsx | 4 +- .../MenuButtonV1/MenuButtonV1E2ETest.tsx | 8 ++- .../MenuButtonV1/MenuButtonV1Test.tsx | 9 +-- .../MenuButtonV1/NestedMenuButtonTest.tsx | 6 +- .../MenuButtonV1/StandardMenuButtonTest.tsx | 10 +-- .../TestComponents/MenuButtonV1/testData.ts | 1 + .../NativeDatePicker/NativeDatePickerTest.tsx | 12 ++-- .../Notification/NotificationTest.tsx | 16 +++-- .../TestComponents/Persona/CustomizeUsage.tsx | 8 ++- .../TestComponents/Persona/PersonaTest.tsx | 3 +- .../TestComponents/Persona/StandardUsage.tsx | 8 ++- .../PersonaCoin/CustomizeUsage.mobile.tsx | 6 +- .../PersonaCoin/CustomizeUsage.tsx | 12 ++-- .../PersonaCoin/PersonaCoinTest.tsx | 3 +- .../PersonaCoin/StandardUsage.tsx | 12 ++-- .../Pressable/PressableTest.tsx | 12 ++-- .../RadioGroupLegacyE2ETest.tsx | 4 +- .../RadioGroupLegacy/RadioGroupLegacyTest.tsx | 4 +- .../RadioGroupV1/CustomizedRadioGroup.tsx | 2 + .../DefaultRadioGroup.android.tsx | 3 +- .../RadioGroupV1/DefaultRadioGroup.tsx | 5 +- .../RadioGroupV1/DisabledRadioGroup.tsx | 5 +- .../RadioGroupV1/HorizontalRadioGroup.tsx | 5 +- .../RadioGroupV1/RadioGroupV1E2ETest.tsx | 4 +- .../RadioGroupV1/RadioGroupV1Test.tsx | 15 +++-- .../RadioGroupV1/RequiredRadioGroup.tsx | 3 +- .../RadioGroupV1/SubtextRadioGroup.tsx | 3 +- .../Separator/SeparatorTest.mobile.tsx | 6 +- .../Separator/SeparatorTest.tsx | 6 +- .../Shadow/ShadowButtonTestSection.tsx | 6 +- .../Shadow/ShadowDepthTestSection.tsx | 4 +- .../src/TestComponents/Shadow/ShadowTest.tsx | 9 +-- .../Shadow/ShadowTestPageStyles.tsx | 1 + .../ShadowWithDifferentPropsTestSection.tsx | 6 +- .../TestComponents/Shimmer/ShimmerE2ETest.tsx | 4 +- .../TestComponents/Shimmer/ShimmerTest.tsx | 12 ++-- .../TestComponents/Spacing/SpacingTest.tsx | 8 ++- .../TestComponents/Spinner/SpinnerE2ETest.tsx | 4 +- .../TestComponents/Spinner/SpinnerTest.tsx | 12 ++-- .../StrokeWidth/StrokeWidthTest.tsx | 16 +++-- .../src/TestComponents/Svg/RNSVGIcons.tsx | 14 ++-- .../src/TestComponents/Svg/SvgTest.tsx | 2 + .../Switch/CustomizedSwitch.tsx | 2 + .../TestComponents/Switch/E2ESwitchTest.tsx | 6 +- .../src/TestComponents/Switch/SwitchTest.tsx | 16 +++-- .../TabsLegacy/TabsLegacyE2ETest.tsx | 4 +- .../TabsLegacy/TabsLegacyTest.tsx | 8 ++- .../TestComponents/TabsV1/TabsV1E2ETest.tsx | 6 +- .../src/TestComponents/TabsV1/TabsV1Test.tsx | 10 +-- .../fluent-tester/src/TestComponents/Test.tsx | 8 ++- .../TextLegacy/CustomizeUsage.tsx | 4 +- .../TextLegacy/PressableUsage.tsx | 6 +- .../TextLegacy/StandardUsage.tsx | 2 + .../TextLegacy/TextLegacyE2ETest.tsx | 4 +- .../TextLegacy/TextLegacyTest.tsx | 5 +- .../TestComponents/TextV1/CustomizeUsage.tsx | 4 +- .../TextV1/MaximumFontSize.ios.tsx | 8 ++- .../TestComponents/TextV1/PressableUsage.tsx | 6 +- .../TestComponents/TextV1/StandardUsage.tsx | 4 +- .../TestComponents/TextV1/TextV1E2ETest.tsx | 4 +- .../src/TestComponents/TextV1/TextV1Test.tsx | 11 ++-- .../TestComponents/TextV1/V2Usage.mobile.tsx | 4 +- .../TestComponents/TextV1/V2Usage.win32.tsx | 4 +- .../src/TestComponents/Theme/ThemeTest.tsx | 6 +- apps/fluent-tester/src/testPages.ts | 4 +- apps/fluent-tester/src/theme/CustomThemes.ts | 8 ++- .../src/theme/ThemePickers.android.tsx | 10 +-- .../src/theme/ThemePickers.ios.tsx | 12 ++-- .../src/theme/ThemePickers.macos.tsx | 8 ++- apps/fluent-tester/src/theme/ThemePickers.tsx | 8 ++- .../src/theme/ThemePickers.win32.tsx | 10 +-- apps/win32/src/index.tsx | 3 +- ...-fef2d85a-5291-43e6-ad55-ca7ea12b9c6e.json | 7 ++ ...-9715fc68-eec2-497e-967c-a45a545e21a3.json | 7 ++ ...-362a1f8c-b3e7-499f-9915-36d24095341f.json | 7 ++ ...-49d36a47-b314-43fb-81f4-a04ef806ba77.json | 7 ++ ...-41fb84da-6f82-4d0b-94a8-4044e3a8990f.json | 7 ++ ...-8d908505-4e71-499b-92e1-e270d2d1581f.json | 7 ++ ...-ee5e698f-539c-48f5-833d-f3ab9ed9a8be.json | 7 ++ ...-3755d1db-dfe6-4ed9-b8c8-f72bc1f5fb86.json | 7 ++ ...-037d50ad-9f6c-44b8-a038-ed3b2cf91026.json | 7 ++ ...-fa0569c4-4592-4a73-beac-4c1029fb936f.json | 7 ++ ...-77dc6707-4161-4b59-80c5-163b814a9d75.json | 7 ++ ...-eb125a2a-871a-4ecc-9dae-4c6b0115de58.json | 7 ++ ...-ec4345b9-9c8f-42a6-9488-f7df3734ee92.json | 7 ++ ...-fb7cf5c0-5a8d-4451-9112-0fa8e50be795.json | 7 ++ ...-e2ab5bba-0519-41e1-88dd-15557903144e.json | 7 ++ ...-3635f358-ccea-4464-8934-12db25192da8.json | 7 ++ ...-5620f4eb-f82a-437f-bc09-c8d15fa3f390.json | 7 ++ ...-efe7efd8-03a6-48b1-b08a-9524efa73470.json | 7 ++ ...-7d8b0b54-ab3f-4164-80d5-ff7c9bdde3c9.json | 7 ++ ...-506563c6-6d18-4488-add7-bf30f632494a.json | 7 ++ ...-cfff6e28-fc3c-4caf-aecd-74a03f0a752d.json | 7 ++ ...-c3014f62-b2e3-4ff9-b310-a3776a1e1076.json | 7 ++ ...-bd5509a6-d940-4b97-8f0f-9ad6afc9423e.json | 7 ++ ...-96e8d26d-3239-4685-be1b-b5223ab023f3.json | 7 ++ ...-4a34dca9-9d12-4ef8-8f88-27d8c6523c5a.json | 7 ++ ...-8a346492-6a19-402f-ba63-46155a06ca25.json | 7 ++ ...-7408253a-24a0-4292-9897-c2c8e145fc18.json | 7 ++ ...-1bae699a-88a1-4762-8033-5249c6b12c48.json | 7 ++ ...-5f0e6217-e76b-4401-af0b-5ff85831494e.json | 7 ++ ...-08a30799-8452-4ab8-a13c-8b0c98f498ab.json | 7 ++ ...-2efa1e92-a1a2-4899-bcbb-69caed20752f.json | 7 ++ ...-4a120155-0d5f-449e-bd9b-3648c1847465.json | 7 ++ ...-097d4add-1eac-4ff8-890f-10fed88eac46.json | 7 ++ ...-cdf8efaa-bd73-4e09-b401-dcd87654a28d.json | 7 ++ ...-2cada03e-be9f-4694-9cda-e7fbb89fbf25.json | 7 ++ ...-f7c0606c-3a90-47a6-88f4-f77ed5040a3e.json | 7 ++ ...-cf15ffa7-3f73-4035-bb48-7ce93ad1c9b9.json | 7 ++ ...-b0582e21-6a01-465b-8fe0-a380d787995d.json | 7 ++ ...-e9e7471b-f6fa-4ba9-a8bd-e0d4ebdf94ad.json | 7 ++ ...-dbc52bb1-6ef6-449a-8ca6-e4b296476f46.json | 7 ++ ...-1cdc0cbd-d3b6-4626-8c52-e344e4240082.json | 7 ++ ...-5a0caa08-71c3-402e-88df-58730174ec0d.json | 7 ++ ...-9cb54f86-99f8-4a54-9261-45731efd3e1a.json | 7 ++ ...-a69c91ab-7780-4826-88fe-e7c6da758ccc.json | 7 ++ ...-d5f204a2-e787-4f9b-aacd-64b8338f2bc0.json | 7 ++ ...-4f825d30-7647-4ffc-bfa4-9c69c64b880f.json | 7 ++ ...-a6070f27-0290-4e28-9685-b64eaf363637.json | 7 ++ ...-e4a1a4ed-52dc-4f3a-aa78-78e07a30a086.json | 7 ++ ...-b4d5b30b-210b-4baa-a742-361002b83b4d.json | 7 ++ ...-a604e644-0116-4b39-963f-9f5dd9a8b4af.json | 7 ++ ...-9b4b49ff-db9a-43e3-9b6c-d7f0381e309a.json | 7 ++ ...-b43a69c6-82e4-4040-b769-146cdee4ffee.json | 7 ++ ...-4ff676eb-7bc6-4659-b561-32f9dfb6bd57.json | 7 ++ ...-18903be3-f81d-4a9d-89a7-79e6c94b1c23.json | 7 ++ ...-2814b6ab-cc92-4238-baa6-970dda781edd.json | 7 ++ ...-a6a24b5a-076f-4f12-b0a8-b1199a20240e.json | 7 ++ ...-1d69a690-f279-4838-80d6-e5c2830fcc17.json | 7 ++ ...-34c57ce4-ff42-4cc7-aa11-1144c68c67ec.json | 7 ++ ...-88511bc0-c06a-4e1d-a410-1c306ccabd51.json | 7 ++ ...-f2e18a73-0e65-4d10-af6d-91cd7391f373.json | 7 ++ ...-e45b20cb-e6fd-48ce-94b2-bb249005d5f2.json | 7 ++ ...-63968ec8-70c5-4e68-8dfc-2b1d1b361879.json | 7 ++ ...-c3a7e96b-581f-4873-a6a0-2e3b2ed796f9.json | 7 ++ ...-14d5a3a2-9aa7-48c4-85d7-86b954dd224a.json | 7 ++ ...-feb4d1ac-efbe-4202-8404-79b5134743c3.json | 7 ++ ...-33610170-785d-4c0d-b2e2-037e324ba62d.json | 7 ++ ...-54a7846b-9ad7-432c-9675-3899a227b50a.json | 7 ++ ...-45b98aad-90f9-4076-8146-d5df6b8410ac.json | 7 ++ ...-adaffaff-e190-4aaa-8f11-e367921ae2a6.json | 7 ++ package.json | 1 + packages/codemods/src/transform.ts | 5 +- .../button-v0-to-v1.input.tsx | 5 +- .../button-v0-to-v1.output.tsx | 5 +- .../deprecate-exports.input.tsx | 5 +- .../deprecate-exports.output.tsx | 5 +- .../components/Avatar/src/Avatar.styling.ts | 10 +-- packages/components/Avatar/src/Avatar.tsx | 14 ++-- .../components/Avatar/src/Avatar.types.ts | 5 +- .../Avatar/src/AvatarTokens.mobile.ts | 5 +- .../components/Avatar/src/AvatarTokens.ts | 5 +- .../Avatar/src/AvatarTokens.win32.ts | 5 +- .../Avatar/src/__tests__/Avatar.test.jsx | 4 +- .../Avatar/src/stylingUtils.android.ts | 1 + .../components/Avatar/src/stylingUtils.ts | 1 + packages/components/Avatar/src/useAvatar.ts | 8 ++- .../components/Badge/src/Badge.styling.ts | 7 +- packages/components/Badge/src/Badge.tsx | 10 +-- packages/components/Badge/src/Badge.types.ts | 7 +- .../components/Badge/src/BadgeColorTokens.ts | 1 + .../Badge/src/BadgeColorTokens.win32.ts | 1 + .../components/Badge/src/BadgeFontTokens.ts | 1 + .../Badge/src/BadgeFontTokens.win32.ts | 3 +- packages/components/Badge/src/BadgeTokens.ts | 3 +- .../src/CounterBadge/CounterBadge.styling.ts | 11 ++-- .../Badge/src/CounterBadge/CounterBadge.tsx | 14 ++-- .../src/CounterBadge/CounterBadgeTokens.ts | 1 + .../PresenceBadge/PresenceBadge.styling.ts | 9 +-- .../Badge/src/PresenceBadge/PresenceBadge.tsx | 8 ++- .../src/PresenceBadge/PresenceBadge.types.ts | 1 + .../PresenceBadgeTokens.macos.ts | 1 + .../src/PresenceBadge/PresenceBadgeTokens.ts | 1 + .../PresenceBadgeTokens.win32.ts | 1 + .../Badge/src/__tests__/Badge.test.tsx | 6 +- packages/components/Badge/src/colorHelper.ts | 1 + .../components/Button/src/Button.styling.ts | 18 ++--- .../components/Button/src/Button.test.tsx | 8 ++- packages/components/Button/src/Button.tsx | 12 ++-- .../components/Button/src/Button.types.ts | 11 ++-- .../Button/src/ButtonColorTokens.android.ts | 1 + .../Button/src/ButtonColorTokens.macos.ts | 1 + .../Button/src/ButtonColorTokens.ts | 1 + .../Button/src/ButtonColorTokens.win32.ts | 1 + .../Button/src/ButtonColorTokens.windows.ts | 1 + .../Button/src/ButtonFontTokens.android.ts | 1 + .../Button/src/ButtonFontTokens.macos.ts | 1 + .../components/Button/src/ButtonFontTokens.ts | 1 + .../Button/src/ButtonFontTokens.win32.ts | 1 + .../Button/src/ButtonTokens.android.ts | 1 + .../components/Button/src/ButtonTokens.ios.ts | 1 + .../components/Button/src/ButtonTokens.ts | 1 + .../Button/src/ButtonTokens.win32.ts | 1 + .../CompoundButton/CompoundButton.mobile.tsx | 8 ++- .../CompoundButton/CompoundButton.styling.ts | 13 ++-- .../CompoundButton/CompoundButton.test.tsx | 4 +- .../src/CompoundButton/CompoundButton.tsx | 12 ++-- .../CompoundButton/CompoundButton.types.ts | 4 +- .../CompoundButtonColorTokens.ts | 1 + .../CompoundButtonColorTokens.win32.ts | 1 + .../CompoundButtonColorTokens.windows.ts | 1 + .../CompoundButtonFontTokens.ts | 1 + .../CompoundButtonFontTokens.win32.ts | 1 + .../CompoundButton/CompoundButtonTokens.ts | 1 + .../Button/src/ExtractStyle.android.ts | 3 +- .../components/Button/src/FAB/FAB.mobile.tsx | 14 ++-- .../components/Button/src/FAB/FAB.styling.ts | 12 ++-- .../components/Button/src/FAB/FAB.test.tsx | 4 +- packages/components/Button/src/FAB/FAB.tsx | 8 ++- .../components/Button/src/FAB/FAB.types.ts | 3 +- .../Button/src/FAB/FABColorTokens.ios.ts | 1 + .../Button/src/FAB/FABColorTokens.ts | 1 + .../Button/src/FAB/FABTokens.ios.ts | 1 + .../components/Button/src/FAB/FABTokens.ts | 1 + .../src/ToggleButton/ToggleButton.android.tsx | 8 ++- .../src/ToggleButton/ToggleButton.styling.ts | 11 ++-- .../src/ToggleButton/ToggleButton.test.tsx | 4 +- .../Button/src/ToggleButton/ToggleButton.tsx | 12 ++-- .../ToggleButton/ToggleButtonColorTokens.ts | 1 + .../ToggleButtonColorTokens.win32.ts | 1 + .../ToggleButtonColorTokens.windows.ts | 1 + .../src/ToggleButton/useToggleButton.ts | 8 ++- .../Button/src/deprecated/Button.android.tsx | 22 ++++--- .../src/deprecated/Button.settings.android.ts | 5 +- .../Button/src/deprecated/Button.settings.ts | 5 +- .../src/deprecated/Button.settings.win32.ts | 5 +- .../Button/src/deprecated/Button.test.tsx | 4 +- .../Button/src/deprecated/Button.tsx | 21 +++--- .../Button/src/deprecated/Button.types.ts | 11 ++-- .../PrimaryButton/PrimaryButton.settings.ts | 3 +- .../PrimaryButton.settings.win32.ts | 3 +- .../deprecated/PrimaryButton/PrimaryButton.ts | 2 +- .../StealthButton/StealthButton.settings.ts | 3 +- .../deprecated/StealthButton/StealthButton.ts | 2 +- packages/components/Button/src/useButton.ts | 2 + .../Callout/src/Callout.settings.macos.ts | 3 +- .../Callout/src/Callout.settings.ts | 3 +- packages/components/Callout/src/Callout.tsx | 8 ++- .../components/Callout/src/Callout.types.ts | 5 +- .../Callout/src/__tests__/Callout.test.tsx | 4 +- .../Checkbox/src/Checkbox.macos.tsx | 10 +-- .../Checkbox/src/Checkbox.styling.ts | 12 ++-- packages/components/Checkbox/src/Checkbox.tsx | 12 ++-- .../components/Checkbox/src/Checkbox.types.ts | 5 +- .../Checkbox/src/CheckboxTokens.android.ts | 3 +- .../Checkbox/src/CheckboxTokens.ios.ts | 10 +-- .../components/Checkbox/src/CheckboxTokens.ts | 1 + .../Checkbox/src/CheckboxTokens.win32.ts | 3 +- .../Checkbox/src/CheckboxTokens.windows.ts | 3 +- .../Checkbox/src/__tests__/Checkbox.test.tsx | 10 +-- .../deprecated/Checkbox.settings.android.ts | 1 + .../src/deprecated/Checkbox.settings.ts | 1 + .../Checkbox/src/deprecated/Checkbox.tsx | 24 +++---- .../Checkbox/src/deprecated/Checkbox.types.ts | 9 +-- .../components/Checkbox/src/useCheckbox.ts | 6 +- .../src/ContextualMenu.settings.macos.ts | 6 +- .../src/ContextualMenu.settings.ts | 3 +- .../ContextualMenu/src/ContextualMenu.tsx | 24 +++---- .../src/ContextualMenu.types.ts | 7 +- .../src/ContextualMenuItem.settings.macos.ts | 3 +- .../src/ContextualMenuItem.settings.ts | 3 +- .../ContextualMenu/src/ContextualMenuItem.tsx | 24 +++---- .../src/ContextualMenuItem.types.ts | 11 ++-- .../src/Submenu.settings.macos.ts | 6 +- .../ContextualMenu/src/Submenu.settings.ts | 3 +- .../components/ContextualMenu/src/Submenu.tsx | 18 ++--- .../ContextualMenu/src/Submenu.types.ts | 6 +- .../src/SubmenuItem.settings.macos.ts | 3 +- .../src/SubmenuItem.settings.ts | 3 +- .../ContextualMenu/src/SubmenuItem.tsx | 26 ++++---- .../ContextualMenu/src/SubmenuItem.types.ts | 8 ++- .../src/__tests__/ContextualMenu.test.tsx | 4 +- .../FocusTrapZone/src/FocusTrapZone.ts | 7 +- .../FocusTrapZone/src/FocusTrapZone.types.ts | 1 + .../src/__tests__/FocusTrapZone.test.tsx | 6 +- .../components/FocusZone/src/FocusZone.ts | 8 ++- .../FocusZone/src/FocusZone.types.ts | 1 + .../src/__tests__/FocusZone.test.tsx | 4 +- .../components/Icon/src/FontIcon/FontIcon.tsx | 4 +- .../Icon/src/FontIcon/useFontIcon.ts | 2 + packages/components/Icon/src/Icon.tsx | 3 +- packages/components/Icon/src/Icon.types.ts | 2 +- .../components/Icon/src/SvgIcon/SvgIcon.tsx | 4 +- .../Icon/src/SvgIcon/SvgIcon.types.ts | 3 +- .../components/Icon/src/SvgIcon/useSvgIcon.ts | 2 + .../Icon/src/__tests__/Icon.test.tsx | 9 ++- packages/components/Icon/src/legacy/Icon.tsx | 8 ++- .../components/Icon/src/legacy/Icon.types.ts | 3 +- .../Icon/src/legacy/useIconProps.hooks.ts | 1 + packages/components/Link/src/Link.styling.ts | 5 +- packages/components/Link/src/Link.tsx | 8 ++- packages/components/Link/src/Link.types.ts | 5 +- .../components/Link/src/LinkTokens.android.ts | 1 + packages/components/Link/src/LinkTokens.ts | 1 + .../Link/src/__tests__/Link.test.tsx | 6 +- .../Link/src/legacy/Link.settings.ts | 3 +- packages/components/Link/src/legacy/Link.tsx | 21 +++--- .../components/Link/src/legacy/Link.types.ts | 7 +- .../Link/src/legacy/__tests__/Link.test.tsx | 4 +- packages/components/Link/src/useLink.ts | 4 +- packages/components/Menu/src/Menu/Menu.tsx | 4 +- .../components/Menu/src/Menu/Menu.types.ts | 4 +- packages/components/Menu/src/Menu/useMenu.ts | 8 ++- .../Menu/src/Menu/useMenuContextValue.ts | 3 +- .../src/MenuDivider/MenuDivider.styling.ts | 3 +- .../Menu/src/MenuDivider/MenuDivider.tsx | 4 +- .../Menu/src/MenuDivider/MenuDivider.types.ts | 1 + .../MenuDivider/MenuDividerTokens.macos.ts | 1 + .../Menu/src/MenuDivider/MenuDividerTokens.ts | 1 + .../MenuDivider/MenuDividerTokens.win32.ts | 1 + .../Menu/src/MenuItem/MenuItem.styling.ts | 3 +- .../components/Menu/src/MenuItem/MenuItem.tsx | 8 ++- .../Menu/src/MenuItem/MenuItem.types.ts | 5 +- .../Menu/src/MenuItem/MenuItemTokens.macos.ts | 1 + .../Menu/src/MenuItem/MenuItemTokens.ts | 1 + .../Menu/src/MenuItem/MenuItemTokens.win32.ts | 1 + .../Menu/src/MenuItem/useMenuItem.ts | 4 +- .../MenuItemCheckbox.styling.ts | 3 +- .../src/MenuItemCheckbox/MenuItemCheckbox.tsx | 8 ++- .../MenuItemCheckbox.types.ts | 6 +- .../MenuItemCheckboxTokens.macos.ts | 1 + .../MenuItemCheckboxTokens.ts | 1 + .../MenuItemCheckboxTokens.win32.ts | 1 + .../MenuItemCheckbox/useMenuItemCheckbox.ts | 6 +- .../Menu/src/MenuItemRadio/MenuItemRadio.tsx | 1 + .../src/MenuItemRadio/useMenuItemRadio.ts | 4 +- .../Menu/src/MenuList/MenuList.styling.ts | 3 +- .../components/Menu/src/MenuList/MenuList.tsx | 18 ++--- .../Menu/src/MenuList/MenuList.types.ts | 5 +- .../Menu/src/MenuList/MenuListTokens.macos.ts | 1 + .../Menu/src/MenuList/MenuListTokens.ts | 1 + .../Menu/src/MenuList/MenuListTokens.win32.ts | 1 + .../Menu/src/MenuList/useMenuList.ts | 6 +- .../src/MenuList/useMenuListContextValue.ts | 2 +- .../Menu/src/MenuPopover/MenuPopover.tsx | 8 ++- .../Menu/src/MenuPopover/MenuPopoverTokens.ts | 1 + .../Menu/src/MenuPopover/useMenuPopover.ts | 4 +- .../Menu/src/MenuTrigger/MenuTrigger.tsx | 1 + .../Menu/src/MenuTrigger/MenuTrigger.types.ts | 1 + .../Menu/src/MenuTrigger/useMenuTrigger.ts | 12 ++-- .../Menu/src/__tests__/Menu.test.tsx | 16 +++-- .../Menu/src/context/menuContext.ts | 1 + .../Menu/src/context/menuListContext.ts | 1 + .../MenuButton/src/MenuButton.macos.tsx | 16 +++-- .../components/MenuButton/src/MenuButton.tsx | 9 +-- .../MenuButton/src/MenuButton.types.ts | 6 +- .../src/__tests__/MenuButton.test.tsx | 4 +- .../Notification/src/Notification.helper.tsx | 6 +- .../Notification/src/Notification.styling.ts | 5 +- .../Notification/src/Notification.tsx | 24 +++---- .../Notification/src/Notification.types.ts | 10 +-- .../src/NotificationTokens.ios.ts | 4 +- .../Notification/src/NotificationTokens.ts | 1 + .../src/__tests__/Notification.test.tsx | 6 +- .../Persona/src/Persona.settings.ts | 1 + .../Persona/src/Persona.tokens.coin.ts | 3 +- .../Persona/src/Persona.tokens.root.ts | 8 ++- .../Persona/src/Persona.tokens.stack.ts | 10 +-- .../Persona/src/Persona.tokens.texts.ts | 8 ++- packages/components/Persona/src/Persona.tsx | 18 ++--- .../components/Persona/src/Persona.types.ts | 9 +-- .../PersonaCoin/src/PersonaCoin.helpers.ts | 6 +- .../PersonaCoin/src/PersonaCoin.settings.ts | 3 +- .../src/PersonaCoin.tokens.icon.ts | 6 +- .../src/PersonaCoin.tokens.initials.ts | 6 +- .../PersonaCoin.tokens.initialsBackground.ts | 6 +- .../src/PersonaCoin.tokens.photo.ts | 6 +- .../src/PersonaCoin.tokens.ring.ts | 6 +- .../src/PersonaCoin.tokens.root.ts | 10 +-- .../PersonaCoin/src/PersonaCoin.tsx | 34 +++++----- .../PersonaCoin/src/PersonaCoin.types.ts | 3 +- .../Pressable/src/Pressable.props.ts | 1 + .../components/Pressable/src/Pressable.tsx | 8 ++- .../RadioGroup/src/RadioButton.macos.tsx | 10 +-- .../RadioGroup/src/RadioButton.settings.ts | 3 +- .../RadioGroup/src/RadioButton.test.tsx | 4 +- .../components/RadioGroup/src/RadioButton.tsx | 18 ++--- .../RadioGroup/src/RadioButton.types.ts | 9 +-- .../RadioGroup/src/RadioButtonGroup.test.tsx | 4 +- .../RadioGroup/src/RadioGroup.settings.ts | 1 + .../components/RadioGroup/src/RadioGroup.tsx | 20 +++--- .../RadioGroup/src/RadioGroup.types.ts | 5 +- .../Separator/src/Separator.styling.tsx | 8 ++- .../components/Separator/src/Separator.tsx | 6 +- .../Separator/src/SeparatorTokens.android.tsx | 1 + .../Separator/src/SeparatorTokens.tsx | 5 +- .../src/__tests__/Separator.test.tsx | 4 +- .../components/Stack/src/Stack.settings.ts | 3 +- packages/components/Stack/src/Stack.tokens.ts | 6 +- packages/components/Stack/src/Stack.tsx | 16 +++-- packages/components/Stack/src/Stack.types.ts | 6 +- .../Stack/src/StackItem/StackItem.settings.ts | 1 + .../Stack/src/StackItem/StackItem.tokens.ts | 8 ++- .../Stack/src/StackItem/StackItem.tsx | 8 ++- .../Stack/src/StackUtils.test.win32.ts | 3 +- .../Stack/src/__tests__/Stack.test.tsx | 4 +- .../Tabs/src/Tabs.settings.macos.ts | 1 + packages/components/Tabs/src/Tabs.settings.ts | 1 + .../Tabs/src/Tabs.settings.windows.ts | 1 + packages/components/Tabs/src/Tabs.tsx | 20 +++--- packages/components/Tabs/src/Tabs.types.ts | 9 +-- packages/components/Tabs/src/Tabs.windows.tsx | 18 ++--- .../Tabs/src/TabsItem.settings.macos.ts | 5 +- .../components/Tabs/src/TabsItem.settings.ts | 5 +- .../Tabs/src/TabsItem.settings.windows.ts | 5 +- packages/components/Tabs/src/TabsItem.tsx | 18 ++--- .../components/Tabs/src/TabsItem.types.ts | 5 +- .../components/Tabs/src/TabsItem.windows.tsx | 18 ++--- .../Tabs/src/__tests__/Tabs.test.tsx | 4 +- packages/components/text/src/Text.tsx | 8 ++- packages/components/text/src/Text.types.ts | 5 +- packages/components/text/src/TextTokens.ts | 1 + .../text/src/__tests__/Text.test.tsx | 6 +- .../text/src/deprecated/Text.settings.ts | 6 +- .../components/text/src/deprecated/Text.tsx | 8 ++- .../text/src/deprecated/Text.types.ts | 2 +- .../foundation-composable/src/slots.tsx | 3 +- .../src/Settings.merge.test.ts | 8 ++- .../src/Settings.override.test.ts | 2 +- .../foundation-tokens/src/MockButton.ts | 7 +- .../foundation-tokens/src/MockComponent.ts | 9 +-- .../foundation-tokens/src/MockTokens.ts | 3 +- .../foundation-tokens/src/Token.function.ts | 7 +- .../foundation-tokens/src/Token.test.ts | 3 +- .../deprecated/foundation-tokens/src/Token.ts | 7 +- .../foundation-tokens/src/Token.types.ts | 1 + .../theme-registry/src/Registry.test.ts | 6 +- .../src/CustomSettings.test.ts | 8 ++- .../themed-settings/src/CustomSettings.ts | 3 +- .../deprecated/theming-ramp/src/Theme.test.ts | 5 +- .../theming-ramp/src/Typography.test.ts | 1 + .../src/BaselinePlatformDefaults.ts | 2 +- .../theming-react-native/src/Global.ts | 5 +- .../src/NativeModule/ThemingModule.ts | 3 +- .../src/NativeModule/ThemingModule.types.ts | 4 +- .../src/NativeModule/ThemingModuleHelpers.ts | 9 +-- .../theming-react-native/src/ThemeContext.ts | 1 + .../theming-react-native/src/ThemeLayer.tsx | 4 +- .../src/ThemeProvider.tsx | 8 ++- .../src/platform/PlatformDefaults.native.ts | 5 +- .../src/platform/PlatformDefaults.ts | 3 +- .../src/ActivityIndicator.mobile.tsx | 6 +- .../src/ActivityIndicator.styling.tsx | 8 ++- .../src/ActivityIndicator.types.tsx | 1 + .../src/CoreActivityIndicator.tsx | 8 ++- .../src/appearanceAdditions.ios.ts | 4 +- .../src/appearanceAdditions.ts | 1 + .../src/getSizeClass.ios.ts | 5 +- .../experimental/Avatar/src/NativeAvatar.tsx | 5 +- .../Avatar/src/__tests__/Avatar.test.jsx | 4 +- .../Checkbox/src/Checkbox.macos.tsx | 4 +- .../Divider/src/Divider.styling.ts | 4 +- packages/experimental/Divider/src/Divider.tsx | 12 ++-- .../experimental/Divider/src/Divider.types.ts | 3 +- .../Divider/src/DividerTokens.android.ts | 3 +- .../Divider/src/DividerTokens.ios.ts | 3 +- .../experimental/Divider/src/DividerTokens.ts | 3 +- .../Divider/src/__tests__/Divider.test.tsx | 6 +- packages/experimental/Drawer/src/Drawer.tsx | 8 ++- .../Dropdown/src/Dropdown/Dropdown.tsx | 8 ++- .../Dropdown/src/Listbox/Listbox.tsx | 6 +- .../Dropdown/src/Option/Option.styling.ts | 1 + .../Dropdown/src/Option/Option.tsx | 6 +- .../Dropdown/src/Option/Option.types.ts | 3 +- .../Dropdown/src/Option/OptionTokens.ts | 1 + .../Dropdown/src/Option/useOption.ts | 1 + .../experimental/Expander/src/Expander.tsx | 8 ++- .../MenuButton/src/MenuButton.styling.tsx | 1 + .../MenuButton/src/MenuButton.tsx | 5 +- .../MenuButton/src/MenuButton.types.ts | 2 +- .../src/__tests__/MenuButton.test.tsx | 4 +- .../MenuButton/src/renderContextualMenu.tsx | 2 + .../src/NativeFontMetrics.ios.ts | 1 + .../NativeFontMetrics/src/fontMetrics.ios.ts | 1 + .../src/useFontMetrics.ios.ts | 2 + packages/experimental/Popover/src/Popover.tsx | 5 +- .../RadioGroup/src/Radio/Radio.styling.ts | 7 +- .../RadioGroup/src/Radio/Radio.tsx | 12 ++-- .../RadioGroup/src/Radio/Radio.types.ts | 7 +- .../src/Radio/RadioExperimental.test.tsx | 6 +- .../src/Radio/RadioTokens.android.ts | 3 +- .../RadioGroup/src/Radio/RadioTokens.ios.ts | 3 +- .../RadioGroup/src/Radio/RadioTokens.ts | 3 +- .../RadioGroup/src/Radio/useRadio.ts | 10 +-- .../RadioGroup/src/Radio/useRadio.win32.ts | 12 ++-- .../src/RadioGroup/RadioGroup.styling.ts | 7 +- .../RadioGroup/src/RadioGroup/RadioGroup.tsx | 12 ++-- .../src/RadioGroup/RadioGroup.types.ts | 5 +- .../RadioGroupExperimental.test.tsx | 6 +- .../src/RadioGroup/RadioGroupTokens.mobile.ts | 5 +- .../src/RadioGroup/RadioGroupTokens.ts | 5 +- .../src/RadioGroup/radioGroupContext.ts | 1 + .../src/RadioGroup/useRadioGroup.ts | 8 ++- .../RadioGroup/useRadioGroupContextValue.ts | 2 +- packages/experimental/Shadow/src/Shadow.tsx | 8 ++- .../experimental/Shadow/src/Shadow.types.ts | 3 +- .../Shadow/src/__tests__/Shadow.test.tsx | 8 ++- .../experimental/Shadow/src/shadowStyle.ts | 5 +- .../Shimmer/src/Shimmer.styling.ts | 1 + .../Shimmer/src/Shimmer.styling.win32.ts | 1 + .../experimental/Shimmer/src/Shimmer.test.tsx | 2 + packages/experimental/Shimmer/src/Shimmer.tsx | 14 ++-- .../Shimmer/src/Shimmer.types.shared.ts | 3 +- .../Shimmer/src/Shimmer.types.win32.ts | 1 + .../Shimmer/src/Shimmer.win32.tsx | 10 +-- .../Shimmer/src/ShimmerTokens.mobile.ts | 3 +- .../experimental/Shimmer/src/ShimmerTokens.ts | 5 +- .../Shimmer/src/ShimmerTokens.win32.ts | 3 +- .../Spinner/src/Spinner.android.tsx | 8 ++- .../Spinner/src/Spinner.styling.ts | 1 + packages/experimental/Spinner/src/Spinner.tsx | 8 ++- .../experimental/Spinner/src/Spinner.types.ts | 1 + .../Spinner/src/SpinnerTokens.android.ts | 10 +-- .../experimental/Spinner/src/SpinnerTokens.ts | 4 +- .../experimental/Stack/src/Stack.styling.ts | 8 ++- packages/experimental/Stack/src/Stack.tsx | 10 +-- .../experimental/Stack/src/Stack.types.ts | 4 +- .../Stack/src/StackItem/StackItem.styles.ts | 8 ++- .../Stack/src/StackItem/StackItem.tsx | 8 ++- .../Stack/src/StackUtils.test.win32.ts | 3 +- .../Stack/src/__tests__/Stack.test.tsx | 4 +- .../experimental/Switch/src/Switch.styling.ts | 8 ++- packages/experimental/Switch/src/Switch.tsx | 10 +-- .../experimental/Switch/src/Switch.types.ts | 5 +- .../Switch/src/SwitchTokens.mobile.ts | 1 + .../experimental/Switch/src/SwitchTokens.ts | 1 + .../Switch/src/SwitchTokens.win32.ts | 1 + .../Switch/src/__tests__/Switch.test.tsx | 6 +- packages/experimental/Switch/src/useSwitch.ts | 6 +- .../experimental/Tabs/src/Tabs.styling.ts | 7 +- packages/experimental/Tabs/src/Tabs.tsx | 12 ++-- packages/experimental/Tabs/src/Tabs.types.ts | 3 +- .../experimental/Tabs/src/Tabs.windows.tsx | 10 +-- .../experimental/Tabs/src/TabsItem.styling.ts | 5 +- packages/experimental/Tabs/src/TabsItem.tsx | 12 ++-- .../experimental/Tabs/src/TabsItem.types.ts | 7 +- .../Tabs/src/TabsItemTokens.macos.ts | 5 +- .../experimental/Tabs/src/TabsItemTokens.ts | 1 + .../Tabs/src/TabsItemTokens.windows.ts | 1 + .../experimental/Tabs/src/TabsTokens.macos.ts | 1 + packages/experimental/Tabs/src/TabsTokens.ts | 1 + .../Tabs/src/TabsTokens.windows.ts | 1 + .../Tabs/src/__tests__/Tabs.test.tsx | 4 +- packages/experimental/Tabs/src/useTabs.ts | 2 + .../experimental/Tabs/src/useTabs.windows.ts | 2 + packages/experimental/Tabs/src/useTabsItem.ts | 4 +- .../Tabs/src/useTabsItem.windows.ts | 4 +- .../src/ensureNativeComponent.test.ts | 1 + .../composition/src/composeFactory.test.tsx | 10 +-- .../composition/src/composeFactory.ts | 8 +-- packages/framework/framework/src/compose.ts | 3 +- .../framework/src/compressible.test.tsx | 16 +++-- .../framework/framework/src/compressible.ts | 1 + .../framework/framework/src/themeHelper.ts | 3 +- .../framework/framework/src/useStyling.ts | 3 +- packages/framework/framework/src/useTokens.ts | 3 +- .../framework/merge-props/src/mergeProps.ts | 1 + .../merge-props/src/mergeStyles.test.ts | 3 +- .../framework/merge-props/src/mergeStyles.ts | 1 + .../framework/theme/src/ThemeProvider.tsx | 4 +- .../theme/src/themeReference.test.ts | 5 +- .../framework/theme/src/themeReference.ts | 1 + .../themed-stylesheet/src/themedStyleSheet.ts | 1 + .../framework/use-slot/src/useSlot.test.tsx | 12 ++-- packages/framework/use-slot/src/useSlot.ts | 4 +- .../use-slots/src/buildUseSlots.test.tsx | 8 ++- .../use-slots/src/useSlots.samples.test.tsx | 12 ++-- .../use-styling/src/buildProps.test.ts | 1 + .../use-styling/src/buildUseStyling.test.ts | 5 +- .../use-styling/src/buildUseStyling.ts | 5 +- .../src/useStyling.samples.test.tsx | 12 ++-- .../use-tokens/src/applyPropsToTokens.test.ts | 3 +- .../use-tokens/src/applyTokenLayers.test.ts | 3 +- .../use-tokens/src/applyTokenLayers.ts | 2 +- .../use-tokens/src/buildUseTokens.ts | 2 +- .../framework/use-tokens/src/customizable.ts | 1 + .../use-tokens/src/patchTokens.test.ts | 3 +- .../use-tokens/src/useTokens.samples.test.tsx | 12 ++-- .../src/__tests__/android-theme.test.ts | 5 +- .../android-theme/src/androidShadows.ts | 4 +- .../theming/android-theme/src/androidTheme.ts | 9 +-- .../android-theme/src/androidTypography.ts | 1 + .../android-theme/src/colorsSemantic.ts | 1 + .../theming/android-theme/src/colorsTokens.ts | 1 + .../android-theme/src/createAliasTokens.ts | 2 +- .../android-theme/src/createAndroidTheme.ts | 6 +- .../src/createFontAliasTokens.ts | 2 +- .../src/__tests__/apple-theme.test.ts | 5 +- .../apple-theme/src/appleColors.ios.ts | 4 +- .../apple-theme/src/appleColors.macos.ts | 5 +- .../apple-theme/src/appleShadows.ios.ts | 4 +- .../apple-theme/src/appleShadows.macos.ts | 1 + .../theming/apple-theme/src/appleTheme.ios.ts | 9 +-- .../apple-theme/src/appleTheme.macos.ts | 3 +- .../apple-theme/src/appleTypography.ios.ts | 1 + .../apple-theme/src/createAppleTheme.ios.ts | 4 +- .../apple-theme/src/createAppleTheme.macos.ts | 6 +- .../apple-theme/src/createAppleTheme.ts | 2 +- .../src/createFontAliasTokens.ios.ts | 2 +- .../apple-theme/src/createMacOSAliasTokens.ts | 7 +- .../apple-theme/src/createiOSAliasTokens.ts | 4 +- .../theming/apple-theme/src/getMacOSTokens.ts | 10 +-- .../src/__tests__/default-theme.test.ts | 7 +- .../default-theme/src/createAliasTokens.ts | 2 +- .../default-theme/src/createDefaultTheme.ts | 6 +- .../default-theme/src/defaultColors.macos.ts | 3 +- .../default-theme/src/defaultColors.ts | 3 +- .../default-theme/src/defaultColors.win32.ts | 3 +- .../theming/default-theme/src/defaultTheme.ts | 6 +- .../theme-tokens/src/getTokens.android.ts | 5 +- .../theming/theme-tokens/src/getTokens.ios.ts | 7 +- .../theming/theme-tokens/src/getTokens.ts | 12 ++-- .../src/highContrast/tokens-alias.ts | 1 + .../src/highContrast/tokens-alias.win32.ts | 1 + .../theming/theme-types/src/Theme.types.ts | 5 +- packages/theming/theme-types/src/context.ts | 1 + .../src/__tests__/theming-utils.test.ts | 17 ++--- .../theming-utils/src/getCurrentAppearance.ts | 1 + .../src/getCurrentAppearance.windows.ts | 3 +- .../src/NativeModule/fallbackOfficeModule.ts | 1 + .../NativeModule/getThemingModule.native.ts | 3 +- .../src/NativeModule/getThemingModule.ts | 1 + .../src/NativeModule/officeThemingModule.ts | 1 + .../src/__tests__/win32-theme.test.ts | 8 +-- .../src/createBrandedThemeWithAlias.ts | 5 +- .../win32-theme/src/createFontAliasTokens.ts | 5 +- .../src/createOfficeAliasTokens.ts | 5 +- .../win32-theme/src/createOfficeTheme.ts | 15 +++-- .../src/createPartialOfficeTheme.ts | 1 + .../win32-theme/src/getOfficeTokens.ts | 11 ++-- .../win32-theme/src/getThemeTypography.ts | 3 +- .../src/highContrast/tokens-alias.ts | 1 + .../utils/adapters/src/adapters.android.ts | 1 + packages/utils/adapters/src/adapters.ios.ts | 1 + packages/utils/adapters/src/adapters.macos.ts | 1 + packages/utils/adapters/src/adapters.ts | 4 +- packages/utils/adapters/src/adapters.win32.ts | 4 +- .../utils/adapters/src/adapters.windows.ts | 4 +- .../src/Pressability/CoreEventTypes.ts | 1 + .../src/Pressability/Pressability.ts | 4 +- .../src/Pressability/Pressability.types.ts | 5 +- .../src/__tests__/events.types.test.ts | 3 +- .../src/__tests__/useKeyProps.test.tsx | 6 +- .../interactive-hooks/src/events.types.ts | 1 + .../src/getAccessibilityState.ts | 3 +- .../interactive-hooks/src/useAsPressable.ts | 1 + .../src/useAsToggleWithEvent.ts | 1 + .../interactive-hooks/src/useKeyProps.ts | 2 + .../interactive-hooks/src/usePressability.ts | 5 +- .../src/usePressableState.ts | 1 + .../src/usePressableState.types.ts | 3 +- .../src/useViewCommandFocus.win32.ts | 2 + .../utils/test-tools/src/enzymeTests.test.tsx | 1 + packages/utils/tokens/src/border-tokens.ts | 4 +- packages/utils/tokens/src/color-tokens.ts | 6 +- packages/utils/tokens/src/layout-tokens.ts | 4 +- packages/utils/tokens/src/shadow-tokens.ts | 4 +- packages/utils/tokens/src/text-tokens.ts | 2 + packages/utils/tokens/src/tokenBuilder.ts | 3 +- yarn.lock | 65 ++++++++++++++++++- 786 files changed, 2960 insertions(+), 1438 deletions(-) create mode 100644 change/@fluentui-react-native-adapters-fef2d85a-5291-43e6-ad55-ca7ea12b9c6e.json create mode 100644 change/@fluentui-react-native-android-theme-9715fc68-eec2-497e-967c-a45a545e21a3.json create mode 100644 change/@fluentui-react-native-apple-theme-362a1f8c-b3e7-499f-9915-36d24095341f.json create mode 100644 change/@fluentui-react-native-avatar-49d36a47-b314-43fb-81f4-a04ef806ba77.json create mode 100644 change/@fluentui-react-native-badge-41fb84da-6f82-4d0b-94a8-4044e3a8990f.json create mode 100644 change/@fluentui-react-native-button-8d908505-4e71-499b-92e1-e270d2d1581f.json create mode 100644 change/@fluentui-react-native-callout-ee5e698f-539c-48f5-833d-f3ab9ed9a8be.json create mode 100644 change/@fluentui-react-native-checkbox-3755d1db-dfe6-4ed9-b8c8-f72bc1f5fb86.json create mode 100644 change/@fluentui-react-native-codemods-037d50ad-9f6c-44b8-a038-ed3b2cf91026.json create mode 100644 change/@fluentui-react-native-component-cache-fa0569c4-4592-4a73-beac-4c1029fb936f.json create mode 100644 change/@fluentui-react-native-composition-77dc6707-4161-4b59-80c5-163b814a9d75.json create mode 100644 change/@fluentui-react-native-contextual-menu-eb125a2a-871a-4ecc-9dae-4c6b0115de58.json create mode 100644 change/@fluentui-react-native-default-theme-ec4345b9-9c8f-42a6-9488-f7df3734ee92.json create mode 100644 change/@fluentui-react-native-divider-fb7cf5c0-5a8d-4451-9112-0fa8e50be795.json create mode 100644 change/@fluentui-react-native-dropdown-e2ab5bba-0519-41e1-88dd-15557903144e.json create mode 100644 change/@fluentui-react-native-e2e-testing-3635f358-ccea-4464-8934-12db25192da8.json create mode 100644 change/@fluentui-react-native-experimental-activity-indicator-5620f4eb-f82a-437f-bc09-c8d15fa3f390.json create mode 100644 change/@fluentui-react-native-experimental-appearance-additions-efe7efd8-03a6-48b1-b08a-9524efa73470.json create mode 100644 change/@fluentui-react-native-experimental-avatar-7d8b0b54-ab3f-4164-80d5-ff7c9bdde3c9.json create mode 100644 change/@fluentui-react-native-experimental-checkbox-506563c6-6d18-4488-add7-bf30f632494a.json create mode 100644 change/@fluentui-react-native-experimental-drawer-cfff6e28-fc3c-4caf-aecd-74a03f0a752d.json create mode 100644 change/@fluentui-react-native-experimental-expander-c3014f62-b2e3-4ff9-b310-a3776a1e1076.json create mode 100644 change/@fluentui-react-native-experimental-menu-button-bd5509a6-d940-4b97-8f0f-9ad6afc9423e.json create mode 100644 change/@fluentui-react-native-experimental-native-font-metrics-96e8d26d-3239-4685-be1b-b5223ab023f3.json create mode 100644 change/@fluentui-react-native-experimental-radio-group-4a34dca9-9d12-4ef8-8f88-27d8c6523c5a.json create mode 100644 change/@fluentui-react-native-experimental-shadow-8a346492-6a19-402f-ba63-46155a06ca25.json create mode 100644 change/@fluentui-react-native-experimental-shimmer-7408253a-24a0-4292-9897-c2c8e145fc18.json create mode 100644 change/@fluentui-react-native-experimental-tabs-1bae699a-88a1-4762-8033-5249c6b12c48.json create mode 100644 change/@fluentui-react-native-focus-trap-zone-5f0e6217-e76b-4401-af0b-5ff85831494e.json create mode 100644 change/@fluentui-react-native-focus-zone-08a30799-8452-4ab8-a13c-8b0c98f498ab.json create mode 100644 change/@fluentui-react-native-framework-2efa1e92-a1a2-4899-bcbb-69caed20752f.json create mode 100644 change/@fluentui-react-native-icon-4a120155-0d5f-449e-bd9b-3648c1847465.json create mode 100644 change/@fluentui-react-native-interactive-hooks-097d4add-1eac-4ff8-890f-10fed88eac46.json create mode 100644 change/@fluentui-react-native-link-cdf8efaa-bd73-4e09-b401-dcd87654a28d.json create mode 100644 change/@fluentui-react-native-menu-button-2cada03e-be9f-4694-9cda-e7fbb89fbf25.json create mode 100644 change/@fluentui-react-native-menu-f7c0606c-3a90-47a6-88f4-f77ed5040a3e.json create mode 100644 change/@fluentui-react-native-merge-props-cf15ffa7-3f73-4035-bb48-7ce93ad1c9b9.json create mode 100644 change/@fluentui-react-native-notification-b0582e21-6a01-465b-8fe0-a380d787995d.json create mode 100644 change/@fluentui-react-native-persona-coin-e9e7471b-f6fa-4ba9-a8bd-e0d4ebdf94ad.json create mode 100644 change/@fluentui-react-native-persona-dbc52bb1-6ef6-449a-8ca6-e4b296476f46.json create mode 100644 change/@fluentui-react-native-popover-1cdc0cbd-d3b6-4626-8c52-e344e4240082.json create mode 100644 change/@fluentui-react-native-pressable-5a0caa08-71c3-402e-88df-58730174ec0d.json create mode 100644 change/@fluentui-react-native-radio-group-9cb54f86-99f8-4a54-9261-45731efd3e1a.json create mode 100644 change/@fluentui-react-native-separator-a69c91ab-7780-4826-88fe-e7c6da758ccc.json create mode 100644 change/@fluentui-react-native-spinner-d5f204a2-e787-4f9b-aacd-64b8338f2bc0.json create mode 100644 change/@fluentui-react-native-stack-4f825d30-7647-4ffc-bfa4-9c69c64b880f.json create mode 100644 change/@fluentui-react-native-switch-a6070f27-0290-4e28-9685-b64eaf363637.json create mode 100644 change/@fluentui-react-native-tabs-e4a1a4ed-52dc-4f3a-aa78-78e07a30a086.json create mode 100644 change/@fluentui-react-native-tester-b4d5b30b-210b-4baa-a742-361002b83b4d.json create mode 100644 change/@fluentui-react-native-tester-win32-a604e644-0116-4b39-963f-9f5dd9a8b4af.json create mode 100644 change/@fluentui-react-native-text-9b4b49ff-db9a-43e3-9b6c-d7f0381e309a.json create mode 100644 change/@fluentui-react-native-theme-b43a69c6-82e4-4040-b769-146cdee4ffee.json create mode 100644 change/@fluentui-react-native-theme-tokens-4ff676eb-7bc6-4659-b561-32f9dfb6bd57.json create mode 100644 change/@fluentui-react-native-theme-types-18903be3-f81d-4a9d-89a7-79e6c94b1c23.json create mode 100644 change/@fluentui-react-native-themed-stylesheet-2814b6ab-cc92-4238-baa6-970dda781edd.json create mode 100644 change/@fluentui-react-native-theming-utils-a6a24b5a-076f-4f12-b0a8-b1199a20240e.json create mode 100644 change/@fluentui-react-native-tokens-1d69a690-f279-4838-80d6-e5c2830fcc17.json create mode 100644 change/@fluentui-react-native-use-slot-34c57ce4-ff42-4cc7-aa11-1144c68c67ec.json create mode 100644 change/@fluentui-react-native-use-slots-88511bc0-c06a-4e1d-a410-1c306ccabd51.json create mode 100644 change/@fluentui-react-native-use-styling-f2e18a73-0e65-4d10-af6d-91cd7391f373.json create mode 100644 change/@fluentui-react-native-use-tokens-e45b20cb-e6fd-48ce-94b2-bb249005d5f2.json create mode 100644 change/@fluentui-react-native-win32-theme-63968ec8-70c5-4e68-8dfc-2b1d1b361879.json create mode 100644 change/@uifabricshared-foundation-composable-c3a7e96b-581f-4873-a6a0-2e3b2ed796f9.json create mode 100644 change/@uifabricshared-foundation-settings-14d5a3a2-9aa7-48c4-85d7-86b954dd224a.json create mode 100644 change/@uifabricshared-foundation-tokens-feb4d1ac-efbe-4202-8404-79b5134743c3.json create mode 100644 change/@uifabricshared-theme-registry-33610170-785d-4c0d-b2e2-037e324ba62d.json create mode 100644 change/@uifabricshared-themed-settings-54a7846b-9ad7-432c-9675-3899a227b50a.json create mode 100644 change/@uifabricshared-theming-ramp-45b98aad-90f9-4076-8146-d5df6b8410ac.json create mode 100644 change/@uifabricshared-theming-react-native-adaffaff-e190-4aaa-8f11-e367921ae2a6.json diff --git a/.eslintrc.json b/.eslintrc.json index 0e517ee9a7..a743144352 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -6,7 +6,7 @@ "browser": true }, "parser": "@typescript-eslint/parser", - "plugins": ["@typescript-eslint"], + "plugins": ["@typescript-eslint", "import"], "rules": { "indent": "off", "no-unused-vars": "off", @@ -29,7 +29,26 @@ "@typescript-eslint/no-object-literal-type-assertion": "off", "@typescript-eslint/array-type": "off", "@typescript-eslint/no-var-requires": "off", - "@typescript-eslint/no-unused-vars": "off" + "@typescript-eslint/no-unused-vars": "off", + "import/order": [ + "error", + { + "newlines-between": "always", + "groups": ["builtin", "external", "internal", ["parent", "sibling", "index"]], + "pathGroups": [ + { + "pattern": "react+(|-native)", + "group": "external", + "position": "before" + } + ], + "pathGroupsExcludedImportTypes": ["react"], + "alphabetize": { + "order": "asc", + "caseInsensitive": true + } + } + ] }, "overrides": [ { diff --git a/apps/E2E/src/ActivityIndicator/pages/ActivityIndicatorPageObject.ts b/apps/E2E/src/ActivityIndicator/pages/ActivityIndicatorPageObject.ts index c8c8245cb0..50e1753dd2 100644 --- a/apps/E2E/src/ActivityIndicator/pages/ActivityIndicatorPageObject.ts +++ b/apps/E2E/src/ActivityIndicator/pages/ActivityIndicatorPageObject.ts @@ -1,5 +1,5 @@ -import { HOMEPAGE_ACTIVITY_INDICATOR_BUTTON, ACTIVITY_INDICATOR_TESTPAGE, ACTIVITY_INDICATOR_TEST_COMPONENT } from '../consts'; import { BasePage } from '../../common/BasePage'; +import { HOMEPAGE_ACTIVITY_INDICATOR_BUTTON, ACTIVITY_INDICATOR_TESTPAGE, ACTIVITY_INDICATOR_TEST_COMPONENT } from '../consts'; class ActivityIndicatorPageObject extends BasePage { /*****************************************/ diff --git a/apps/E2E/src/Avatar/pages/AvatarPageObject.ts b/apps/E2E/src/Avatar/pages/AvatarPageObject.ts index 4c8fa4294f..3e755f3da5 100644 --- a/apps/E2E/src/Avatar/pages/AvatarPageObject.ts +++ b/apps/E2E/src/Avatar/pages/AvatarPageObject.ts @@ -1,5 +1,5 @@ -import { AVATAR_TESTPAGE, HOMEPAGE_AVATAR_BUTTON, AVATAR_TEST_COMPONENT, AVATAR_SECONDARY_TEST_COMPONENT } from '../consts'; import { BasePage } from '../../common/BasePage'; +import { AVATAR_TESTPAGE, HOMEPAGE_AVATAR_BUTTON, AVATAR_TEST_COMPONENT, AVATAR_SECONDARY_TEST_COMPONENT } from '../consts'; class AvatarPageObject extends BasePage { /*****************************************/ /**************** Getters ****************/ diff --git a/apps/E2E/src/Avatar/specs/Avatar.spec.win.ts b/apps/E2E/src/Avatar/specs/Avatar.spec.win.ts index 2332ac96f3..4decdbb07e 100644 --- a/apps/E2E/src/Avatar/specs/Avatar.spec.win.ts +++ b/apps/E2E/src/Avatar/specs/Avatar.spec.win.ts @@ -1,6 +1,6 @@ -import AvatarPageObject from '../pages/AvatarPageObject'; import { Attribute, LINK_A11Y_ROLE, IMAGE_A11Y_ROLE } from '../../common/consts'; import { AVATAR_ACCESSIBILITY_LABEL, AVATAR_ACCESSIBILITY_LABEL_BY_NAME, AVATAR_ACCESSIBILITY_HINT } from '../consts'; +import AvatarPageObject from '../pages/AvatarPageObject'; // Before testing begins, allow up to 60 seconds for app to open describe('Avatar Testing Initialization', () => { diff --git a/apps/E2E/src/ButtonLegacy/pages/ButtonLegacyPageObject.ts b/apps/E2E/src/ButtonLegacy/pages/ButtonLegacyPageObject.ts index f8b062c00e..8d4053c872 100644 --- a/apps/E2E/src/ButtonLegacy/pages/ButtonLegacyPageObject.ts +++ b/apps/E2E/src/ButtonLegacy/pages/ButtonLegacyPageObject.ts @@ -1,3 +1,4 @@ +import { BasePage, By } from '../../common/BasePage'; import { BUTTON_TESTPAGE, BUTTON_TEST_COMPONENT_DEPRECATED, @@ -5,7 +6,6 @@ import { HOMEPAGE_BUTTON_BUTTON, BUTTON_ON_PRESS_DEPRECATED, } from '../consts'; -import { BasePage, By } from '../../common/BasePage'; class ButtonLegacyPageObject extends BasePage { /******************************************************************/ /**************** UI Element Interaction Methods ******************/ diff --git a/apps/E2E/src/ButtonLegacy/specs/ButtonLegacy.spec.win.ts b/apps/E2E/src/ButtonLegacy/specs/ButtonLegacy.spec.win.ts index 8135b6c90e..c120439eed 100644 --- a/apps/E2E/src/ButtonLegacy/specs/ButtonLegacy.spec.win.ts +++ b/apps/E2E/src/ButtonLegacy/specs/ButtonLegacy.spec.win.ts @@ -1,6 +1,6 @@ -import ButtonLegacyPageObject from '../pages/ButtonLegacyPageObject'; import { BUTTON_A11Y_ROLE, Keys, Attribute } from '../../common/consts'; import { BUTTON_ACCESSIBILITY_LABEL_DEPRECATED, BUTTON_TEST_COMPONENT_LABEL_DEPRECATED } from '../consts'; +import ButtonLegacyPageObject from '../pages/ButtonLegacyPageObject'; // Before testing begins, allow up to 60 seconds for app to open describe('Button Legacy Testing Initialization', () => { diff --git a/apps/E2E/src/ButtonV1/specs/ButtonV1.spec.android.ts b/apps/E2E/src/ButtonV1/specs/ButtonV1.spec.android.ts index 30d4b6d238..77e857887d 100644 --- a/apps/E2E/src/ButtonV1/specs/ButtonV1.spec.android.ts +++ b/apps/E2E/src/ButtonV1/specs/ButtonV1.spec.android.ts @@ -1,6 +1,6 @@ +import { BUTTON_TEST_COMPONENT } from '../../ButtonLegacy/consts'; import { AndroidAttribute, ANDROID_BUTTON } from '../../common/consts'; import ButtonV1PageObject from '../pages/ButtonV1PageObject'; -import { BUTTON_TEST_COMPONENT } from '../../ButtonLegacy/consts'; // Before testing begins, allow up to 60 seconds for app to open describe('Button Testing Initialization', () => { diff --git a/apps/E2E/src/ButtonV1/specs/ButtonV1.spec.win.ts b/apps/E2E/src/ButtonV1/specs/ButtonV1.spec.win.ts index a857c62338..9596045671 100644 --- a/apps/E2E/src/ButtonV1/specs/ButtonV1.spec.win.ts +++ b/apps/E2E/src/ButtonV1/specs/ButtonV1.spec.win.ts @@ -1,6 +1,6 @@ -import ButtonV1PageObject from '../pages/ButtonV1PageObject'; -import { BUTTON_A11Y_ROLE, Keys, Attribute } from '../../common/consts'; import { BUTTON_ACCESSIBILITY_LABEL, BUTTON_TEST_COMPONENT_LABEL } from '../../ButtonLegacy/consts'; +import { BUTTON_A11Y_ROLE, Keys, Attribute } from '../../common/consts'; +import ButtonV1PageObject from '../pages/ButtonV1PageObject'; // Before testing begins, allow up to 60 seconds for app to open describe('ButtonV1 Testing Initialization', () => { diff --git a/apps/E2E/src/Callout/pages/CalloutPageObject.win.ts b/apps/E2E/src/Callout/pages/CalloutPageObject.win.ts index b3abf48c28..ba117d4aec 100644 --- a/apps/E2E/src/Callout/pages/CalloutPageObject.win.ts +++ b/apps/E2E/src/Callout/pages/CalloutPageObject.win.ts @@ -1,5 +1,5 @@ -import { CALLOUT_TESTPAGE, CALLOUT_TEST_COMPONENT, HOMEPAGE_CALLOUT_BUTTON, BUTTON_TO_OPEN_CALLOUT } from '../consts'; import { BasePage, By } from '../../common/BasePage'; +import { CALLOUT_TESTPAGE, CALLOUT_TEST_COMPONENT, HOMEPAGE_CALLOUT_BUTTON, BUTTON_TO_OPEN_CALLOUT } from '../consts'; class CalloutPageObject extends BasePage { /******************************************************************/ diff --git a/apps/E2E/src/Callout/specs/Callout.spec.win.ts b/apps/E2E/src/Callout/specs/Callout.spec.win.ts index 0cdc378398..03992a13e9 100644 --- a/apps/E2E/src/Callout/specs/Callout.spec.win.ts +++ b/apps/E2E/src/Callout/specs/Callout.spec.win.ts @@ -1,6 +1,6 @@ -import CalloutPageObject from '../pages/CalloutPageObject.win'; -import { CALLOUT_ACCESSIBILITY_LABEL } from '../consts'; import { Attribute, CALLOUT_A11Y_ROLE } from '../../common/consts'; +import { CALLOUT_ACCESSIBILITY_LABEL } from '../consts'; +import CalloutPageObject from '../pages/CalloutPageObject.win'; // Before testing begins, allow up to 60 seconds for app to open describe('Callout Testing Initialization', () => { diff --git a/apps/E2E/src/CheckboxLegacy/specs/CheckboxLegacy.spec.win.ts b/apps/E2E/src/CheckboxLegacy/specs/CheckboxLegacy.spec.win.ts index 749c61f9b6..16f8035c5d 100644 --- a/apps/E2E/src/CheckboxLegacy/specs/CheckboxLegacy.spec.win.ts +++ b/apps/E2E/src/CheckboxLegacy/specs/CheckboxLegacy.spec.win.ts @@ -1,6 +1,6 @@ -import CheckboxLegacyPageObject from '../pages/CheckboxLegacyPageObject'; -import { CHECKBOX_TEST_COMPONENT_LABEL, CHECKBOX_ACCESSIBILITY_LABEL } from '../consts'; import { CHECKBOX_A11Y_ROLE, Keys, Attribute } from '../../common/consts'; +import { CHECKBOX_TEST_COMPONENT_LABEL, CHECKBOX_ACCESSIBILITY_LABEL } from '../consts'; +import CheckboxLegacyPageObject from '../pages/CheckboxLegacyPageObject'; describe('Checkbox Legacy Testing Initialization', () => { it('Wait for app load', async () => { diff --git a/apps/E2E/src/CheckboxV1/pages/CheckboxV1PageObject.ts b/apps/E2E/src/CheckboxV1/pages/CheckboxV1PageObject.ts index 88bca2afb8..622687dcf1 100644 --- a/apps/E2E/src/CheckboxV1/pages/CheckboxV1PageObject.ts +++ b/apps/E2E/src/CheckboxV1/pages/CheckboxV1PageObject.ts @@ -1,3 +1,4 @@ +import { BasePage, By } from '../../common/BasePage'; import { HOMEPAGE_CHECKBOXV1_BUTTON, CHECKBOXV1_TESTPAGE, @@ -5,7 +6,6 @@ import { CHECKBOXV1_NO_A11Y_LABEL_COMPONENT, CHECKBOXV1_ON_PRESS, } from '../consts'; -import { BasePage, By } from '../../common/BasePage'; class CheckboxV1PageObject extends BasePage { /******************************************************************/ diff --git a/apps/E2E/src/CheckboxV1/specs/CheckboxV1.spec.android.ts b/apps/E2E/src/CheckboxV1/specs/CheckboxV1.spec.android.ts index 876e10a8bd..6b4c57f50c 100644 --- a/apps/E2E/src/CheckboxV1/specs/CheckboxV1.spec.android.ts +++ b/apps/E2E/src/CheckboxV1/specs/CheckboxV1.spec.android.ts @@ -1,6 +1,6 @@ -import CheckboxV1PageObject from '../pages/CheckboxV1PageObject'; import { AndroidAttribute, ANDROID_CHECKBOX } from '../../common/consts'; import { CHECKBOXV1_TEST_COMPONENT } from '../consts'; +import CheckboxV1PageObject from '../pages/CheckboxV1PageObject'; describe('CheckboxV1 Testing Initialization', () => { it('Wait for app load', async () => { diff --git a/apps/E2E/src/CheckboxV1/specs/CheckboxV1.spec.win.ts b/apps/E2E/src/CheckboxV1/specs/CheckboxV1.spec.win.ts index c64fac1701..71255ad773 100644 --- a/apps/E2E/src/CheckboxV1/specs/CheckboxV1.spec.win.ts +++ b/apps/E2E/src/CheckboxV1/specs/CheckboxV1.spec.win.ts @@ -1,6 +1,6 @@ -import CheckboxV1PageObject from '../pages/CheckboxV1PageObject'; -import { CHECKBOXV1_TEST_COMPONENT_LABEL, CHECKBOXV1_ACCESSIBILITY_LABEL } from '../consts'; import { CHECKBOX_A11Y_ROLE, Keys, Attribute } from '../../common/consts'; +import { CHECKBOXV1_TEST_COMPONENT_LABEL, CHECKBOXV1_ACCESSIBILITY_LABEL } from '../consts'; +import CheckboxV1PageObject from '../pages/CheckboxV1PageObject'; describe('CheckboxV1 Testing Initialization', () => { it('Wait for app load', async () => { diff --git a/apps/E2E/src/ColorTokens/pages/ColorTokensPageObject.win.ts b/apps/E2E/src/ColorTokens/pages/ColorTokensPageObject.win.ts index 8d2a689ac3..1c7c378043 100644 --- a/apps/E2E/src/ColorTokens/pages/ColorTokensPageObject.win.ts +++ b/apps/E2E/src/ColorTokens/pages/ColorTokensPageObject.win.ts @@ -1,5 +1,5 @@ -import { HOMEPAGE_COLORTOKEN_BUTTON, COLORTOKEN_TESTPAGE } from '../consts'; import { BasePage } from '../../common/BasePage'; +import { HOMEPAGE_COLORTOKEN_BUTTON, COLORTOKEN_TESTPAGE } from '../consts'; class ColorTokenPageObject extends BasePage { /*****************************************/ diff --git a/apps/E2E/src/ContextualMenu/pages/ContextualMenuPageObject.win.ts b/apps/E2E/src/ContextualMenu/pages/ContextualMenuPageObject.win.ts index 98a244328b..fc75c9ca01 100644 --- a/apps/E2E/src/ContextualMenu/pages/ContextualMenuPageObject.win.ts +++ b/apps/E2E/src/ContextualMenu/pages/ContextualMenuPageObject.win.ts @@ -1,11 +1,11 @@ +import { BasePage, By } from '../../common/BasePage'; +import { Keys } from '../../common/consts'; import { CONTEXTUALMENU_TESTPAGE, CONTEXTUALMENU_TEST_COMPONENT, HOMEPAGE_CONTEXTUALMENU_BUTTON, CONTEXTUALMENUITEM_TEST_COMPONENT, } from '../consts'; -import { BasePage, By } from '../../common/BasePage'; -import { Keys } from '../../common/consts'; class ContextualMenuPageObject extends BasePage { /******************************************************************/ diff --git a/apps/E2E/src/ContextualMenu/specs/ContextualMenu.spec.win.ts b/apps/E2E/src/ContextualMenu/specs/ContextualMenu.spec.win.ts index 0cd55a3fd7..cddd85e3b2 100644 --- a/apps/E2E/src/ContextualMenu/specs/ContextualMenu.spec.win.ts +++ b/apps/E2E/src/ContextualMenu/specs/ContextualMenu.spec.win.ts @@ -1,5 +1,5 @@ -import ContextualMenuPageObject from '../pages/ContextualMenuPageObject.win'; import { PAGE_TIMEOUT, Keys } from '../../common/consts'; +import ContextualMenuPageObject from '../pages/ContextualMenuPageObject.win'; // Before testing begins, allow up to 60 seconds for app to open describe('ContextualMenu Testing Initialization', () => { diff --git a/apps/E2E/src/CornerRadiusTokens/pages/CornerRadiusTokensPageObject.ts b/apps/E2E/src/CornerRadiusTokens/pages/CornerRadiusTokensPageObject.ts index e4ab148460..c40c4f5ef2 100644 --- a/apps/E2E/src/CornerRadiusTokens/pages/CornerRadiusTokensPageObject.ts +++ b/apps/E2E/src/CornerRadiusTokens/pages/CornerRadiusTokensPageObject.ts @@ -1,5 +1,5 @@ -import { HOMEPAGE_CORNERRADIUS_TESTPAGE, HOMEPAGE_CORNERRADIUS_BUTTON } from '../consts'; import { BasePage } from '../../common/BasePage'; +import { HOMEPAGE_CORNERRADIUS_TESTPAGE, HOMEPAGE_CORNERRADIUS_BUTTON } from '../consts'; class CornerRadiusTokensPageObject extends BasePage { /*****************************************/ diff --git a/apps/E2E/src/FocusTrapZone/pages/FocusTrapZonePageObject.win.ts b/apps/E2E/src/FocusTrapZone/pages/FocusTrapZonePageObject.win.ts index b7dd45a49e..b6e9844de6 100644 --- a/apps/E2E/src/FocusTrapZone/pages/FocusTrapZonePageObject.win.ts +++ b/apps/E2E/src/FocusTrapZone/pages/FocusTrapZonePageObject.win.ts @@ -1,5 +1,5 @@ -import { FOCUSTRAPZONE_TESTPAGE, FOCUSTRAPZONE_TEST_COMPONENT, HOMEPAGE_FOCUSTRAPZONE_BUTTON } from '../consts'; import { BasePage } from '../../common/BasePage'; +import { FOCUSTRAPZONE_TESTPAGE, FOCUSTRAPZONE_TEST_COMPONENT, HOMEPAGE_FOCUSTRAPZONE_BUTTON } from '../consts'; class FocusTrapZonePageObject extends BasePage { /*****************************************/ diff --git a/apps/E2E/src/FocusZone/consts.ts b/apps/E2E/src/FocusZone/consts.ts index 3bdb3e52c1..40654c0c02 100644 --- a/apps/E2E/src/FocusZone/consts.ts +++ b/apps/E2E/src/FocusZone/consts.ts @@ -1,4 +1,5 @@ import type { FocusZoneDirection } from '@fluentui-react-native/focus-zone'; + import type { GridButton } from './pages/FocusZonePageObject'; export const HOMEPAGE_FOCUSZONE_BUTTON = 'Homepage_FocusZone_Button'; diff --git a/apps/E2E/src/FocusZone/pages/FocusZonePageObject.ts b/apps/E2E/src/FocusZone/pages/FocusZonePageObject.ts index cb6de56ddc..cff52535d4 100644 --- a/apps/E2E/src/FocusZone/pages/FocusZonePageObject.ts +++ b/apps/E2E/src/FocusZone/pages/FocusZonePageObject.ts @@ -1,4 +1,5 @@ import type { FocusZoneDirection } from '@fluentui-react-native/focus-zone'; + import { BasePage, By } from '../../common/BasePage'; import { FOCUSZONE_CIRCLE_NAV_SWITCH, diff --git a/apps/E2E/src/IconLegacy/pages/IconLegacyPageObject.ts b/apps/E2E/src/IconLegacy/pages/IconLegacyPageObject.ts index 763ac62e25..027b2ac49f 100644 --- a/apps/E2E/src/IconLegacy/pages/IconLegacyPageObject.ts +++ b/apps/E2E/src/IconLegacy/pages/IconLegacyPageObject.ts @@ -1,5 +1,5 @@ -import { ICON_TESTPAGE, ICON_TEST_COMPONENT, HOMEPAGE_ICON_BUTTON, ICON_NO_A11Y_LABEL_COMPONENT } from '../consts'; import { BasePage } from '../../common/BasePage'; +import { ICON_TESTPAGE, ICON_TEST_COMPONENT, HOMEPAGE_ICON_BUTTON, ICON_NO_A11Y_LABEL_COMPONENT } from '../consts'; class IconLegacyPageObject extends BasePage { /*****************************************/ diff --git a/apps/E2E/src/IconV1/pages/IconV1PageObject.ts b/apps/E2E/src/IconV1/pages/IconV1PageObject.ts index 93d43ecabd..b0031b0d28 100644 --- a/apps/E2E/src/IconV1/pages/IconV1PageObject.ts +++ b/apps/E2E/src/IconV1/pages/IconV1PageObject.ts @@ -1,5 +1,5 @@ -import { ICON_TESTPAGE, ICON_TEST_COMPONENT, HOMEPAGE_ICON_BUTTON, ICON_FONT_TEST_COMPONENT } from '../../IconLegacy/consts'; import { BasePage } from '../../common/BasePage'; +import { ICON_TESTPAGE, ICON_TEST_COMPONENT, HOMEPAGE_ICON_BUTTON, ICON_FONT_TEST_COMPONENT } from '../../IconLegacy/consts'; class IconV1PageObject extends BasePage { /*****************************************/ diff --git a/apps/E2E/src/IconV1/specs/IconV1.spec.win.ts b/apps/E2E/src/IconV1/specs/IconV1.spec.win.ts index b1b79267cd..44c91fc064 100644 --- a/apps/E2E/src/IconV1/specs/IconV1.spec.win.ts +++ b/apps/E2E/src/IconV1/specs/IconV1.spec.win.ts @@ -1,6 +1,6 @@ -import IconV1PageObject from '../pages/IconV1PageObject'; import { Attribute, IMAGE_A11Y_ROLE } from '../../common/consts'; import { ICON_ACCESSIBILITY_LABEL } from '../../IconLegacy/consts'; +import IconV1PageObject from '../pages/IconV1PageObject'; // Before testing begins, allow up to 60 seconds for app to open describe('IconV1 Testing Initialization', () => { diff --git a/apps/E2E/src/LinkLegacy/pages/LinkLegacyPageObject.ts b/apps/E2E/src/LinkLegacy/pages/LinkLegacyPageObject.ts index d898c7d5bc..a8c30260ed 100644 --- a/apps/E2E/src/LinkLegacy/pages/LinkLegacyPageObject.ts +++ b/apps/E2E/src/LinkLegacy/pages/LinkLegacyPageObject.ts @@ -1,5 +1,5 @@ -import { LINK_TESTPAGE, LINK_TEST_COMPONENT, HOMEPAGE_LINK_BUTTON, LINK_NO_A11Y_LABEL_COMPONENT } from '../consts'; import { BasePage } from '../../common/BasePage'; +import { LINK_TESTPAGE, LINK_TEST_COMPONENT, HOMEPAGE_LINK_BUTTON, LINK_NO_A11Y_LABEL_COMPONENT } from '../consts'; class LinkLegacyPageObject extends BasePage { /*****************************************/ diff --git a/apps/E2E/src/LinkLegacy/specs/LinkLegacy.spec.win.ts b/apps/E2E/src/LinkLegacy/specs/LinkLegacy.spec.win.ts index 0506436788..a45b8da734 100644 --- a/apps/E2E/src/LinkLegacy/specs/LinkLegacy.spec.win.ts +++ b/apps/E2E/src/LinkLegacy/specs/LinkLegacy.spec.win.ts @@ -1,6 +1,6 @@ -import LinkLegacyPageObject from '../pages/LinkLegacyPageObject'; -import { LINK_ACCESSIBILITY_LABEL } from '../consts'; import { LINK_A11Y_ROLE, Attribute } from '../../common/consts'; +import { LINK_ACCESSIBILITY_LABEL } from '../consts'; +import LinkLegacyPageObject from '../pages/LinkLegacyPageObject'; // Before testing begins, allow up to 60 seconds for app to open describe('Link Testing Initialization', () => { diff --git a/apps/E2E/src/LinkV1/pages/LinkV1PageObject.ts b/apps/E2E/src/LinkV1/pages/LinkV1PageObject.ts index 7ffb73d669..b9ea619cf1 100644 --- a/apps/E2E/src/LinkV1/pages/LinkV1PageObject.ts +++ b/apps/E2E/src/LinkV1/pages/LinkV1PageObject.ts @@ -1,5 +1,5 @@ -import { LINKV1_TESTPAGE, LINKV1_TEST_COMPONENT, HOMEPAGE_LINKV1_BUTTON, LINKV1_NO_A11Y_LABEL_COMPONENT } from '../consts'; import { BasePage, By } from '../../common/BasePage'; +import { LINKV1_TESTPAGE, LINKV1_TEST_COMPONENT, HOMEPAGE_LINKV1_BUTTON, LINKV1_NO_A11Y_LABEL_COMPONENT } from '../consts'; class LinkV1PageObject extends BasePage { /******************************************************************/ diff --git a/apps/E2E/src/LinkV1/specs/LinkV1.spec.win.ts b/apps/E2E/src/LinkV1/specs/LinkV1.spec.win.ts index 33dc8c515f..8441139ebf 100644 --- a/apps/E2E/src/LinkV1/specs/LinkV1.spec.win.ts +++ b/apps/E2E/src/LinkV1/specs/LinkV1.spec.win.ts @@ -1,6 +1,6 @@ -import LinkV1PageObject from '../pages/LinkV1PageObject'; -import { LINKV1_ACCESSIBILITY_LABEL } from '../consts'; import { LINK_A11Y_ROLE, Attribute, Keys } from '../../common/consts'; +import { LINKV1_ACCESSIBILITY_LABEL } from '../consts'; +import LinkV1PageObject from '../pages/LinkV1PageObject'; // Before testing begins, allow up to 60 seconds for app to open describe('LinkV1 Testing Initialization', () => { diff --git a/apps/E2E/src/MenuButtonLegacy/specs/MenuButtonLegacy.spec.win.ts b/apps/E2E/src/MenuButtonLegacy/specs/MenuButtonLegacy.spec.win.ts index c1f7a64ad1..63fed5ec52 100644 --- a/apps/E2E/src/MenuButtonLegacy/specs/MenuButtonLegacy.spec.win.ts +++ b/apps/E2E/src/MenuButtonLegacy/specs/MenuButtonLegacy.spec.win.ts @@ -1,6 +1,6 @@ -import MenuButtonLegacyPageObject from '../pages/MenuButtonLegacyPageObject.win'; import { MENUBUTTON_A11Y_ROLE, Keys, Attribute } from '../../common/consts'; import { MENU_BUTTON_ACCESSIBILITY_LABEL, MENU_BUTTON_TEST_COMPONENT_LABEL } from '../consts'; +import MenuButtonLegacyPageObject from '../pages/MenuButtonLegacyPageObject.win'; // Before testing begins, allow up to 60 seconds for app to open describe('MenuButton Legacy Testing Initialization', () => { diff --git a/apps/E2E/src/MenuButtonV1/pages/MenuButtonV1PageObject.win.ts b/apps/E2E/src/MenuButtonV1/pages/MenuButtonV1PageObject.win.ts index e41d93bd82..c776fbb04c 100644 --- a/apps/E2E/src/MenuButtonV1/pages/MenuButtonV1PageObject.win.ts +++ b/apps/E2E/src/MenuButtonV1/pages/MenuButtonV1PageObject.win.ts @@ -1,10 +1,10 @@ +import { BasePage, By } from '../../common/BasePage'; import { MENUBUTTONV1_TESTPAGE, MENUBUTTONV1_TEST_COMPONENT, HOMEPAGE_MENUBUTTONV1_BUTTON, MENUBUTTONV1_NO_A11Y_LABEL_COMPONENT, } from '../consts'; -import { BasePage, By } from '../../common/BasePage'; class MenuButtonV1PageObject extends BasePage { /*****************************************/ diff --git a/apps/E2E/src/MenuButtonV1/specs/MenuButtonV1.spec.win.ts b/apps/E2E/src/MenuButtonV1/specs/MenuButtonV1.spec.win.ts index fae47a7fd5..9d66dfe774 100644 --- a/apps/E2E/src/MenuButtonV1/specs/MenuButtonV1.spec.win.ts +++ b/apps/E2E/src/MenuButtonV1/specs/MenuButtonV1.spec.win.ts @@ -1,6 +1,6 @@ -import MenuButtonV1PageObject from '../pages/MenuButtonV1PageObject.win'; import { MENUBUTTON_A11Y_ROLE, Attribute } from '../../common/consts'; import { MENUBUTTONV1_ACCESSIBILITY_LABEL, MENUBUTTONV1_TEST_COMPONENT_LABEL } from '../consts'; +import MenuButtonV1PageObject from '../pages/MenuButtonV1PageObject.win'; // Before testing begins, allow up to 60 seconds for app to open describe('MenuButtonV1 Testing Initialization', () => { diff --git a/apps/E2E/src/Persona/pages/PersonaPageObject.ts b/apps/E2E/src/Persona/pages/PersonaPageObject.ts index 703fc1866b..9134aea3fd 100644 --- a/apps/E2E/src/Persona/pages/PersonaPageObject.ts +++ b/apps/E2E/src/Persona/pages/PersonaPageObject.ts @@ -1,5 +1,5 @@ -import { PERSONA_TESTPAGE, PERSONA_TEST_COMPONENT, HOMEPAGE_PERSONA_BUTTON } from '../consts'; import { BasePage } from '../../common/BasePage'; +import { PERSONA_TESTPAGE, PERSONA_TEST_COMPONENT, HOMEPAGE_PERSONA_BUTTON } from '../consts'; class PersonaPageObject extends BasePage { /*****************************************/ diff --git a/apps/E2E/src/PersonaCoin/pages/PersonaCoinPageObject.ts b/apps/E2E/src/PersonaCoin/pages/PersonaCoinPageObject.ts index d928988070..bff2ab91ed 100644 --- a/apps/E2E/src/PersonaCoin/pages/PersonaCoinPageObject.ts +++ b/apps/E2E/src/PersonaCoin/pages/PersonaCoinPageObject.ts @@ -1,5 +1,5 @@ -import { PERSONACOIN_TESTPAGE, PERSONACOIN_TEST_COMPONENT, HOMEPAGE_PERSONACOIN_BUTTON } from '../consts'; import { BasePage } from '../../common/BasePage'; +import { PERSONACOIN_TESTPAGE, PERSONACOIN_TEST_COMPONENT, HOMEPAGE_PERSONACOIN_BUTTON } from '../consts'; class PersonaCoinPageObject extends BasePage { /*****************************************/ diff --git a/apps/E2E/src/Pressable/pages/PressablePageObject.ts b/apps/E2E/src/Pressable/pages/PressablePageObject.ts index bc03cfaac3..2990d0a680 100644 --- a/apps/E2E/src/Pressable/pages/PressablePageObject.ts +++ b/apps/E2E/src/Pressable/pages/PressablePageObject.ts @@ -1,5 +1,5 @@ -import { PRESSABLE_TESTPAGE, PRESSABLE_TEST_COMPONENT, HOMEPAGE_PRESSABLE_BUTTON } from '../consts'; import { BasePage } from '../../common/BasePage'; +import { PRESSABLE_TESTPAGE, PRESSABLE_TEST_COMPONENT, HOMEPAGE_PRESSABLE_BUTTON } from '../consts'; class PressablePageObject extends BasePage { /*****************************************/ diff --git a/apps/E2E/src/Separator/pages/SeparatorPageObject.ts b/apps/E2E/src/Separator/pages/SeparatorPageObject.ts index 5f97d5b10a..0df94882f5 100644 --- a/apps/E2E/src/Separator/pages/SeparatorPageObject.ts +++ b/apps/E2E/src/Separator/pages/SeparatorPageObject.ts @@ -1,5 +1,5 @@ -import { SEPARATOR_TESTPAGE, SEPARATOR_TEST_COMPONENT, HOMEPAGE_SEPARATOR_BUTTON } from '../consts'; import { BasePage } from '../../common/BasePage'; +import { SEPARATOR_TESTPAGE, SEPARATOR_TEST_COMPONENT, HOMEPAGE_SEPARATOR_BUTTON } from '../consts'; class SeparatorPageObject extends BasePage { /*****************************************/ diff --git a/apps/E2E/src/Shadow/pages/ShadowPageObject.ts b/apps/E2E/src/Shadow/pages/ShadowPageObject.ts index d4645e32a5..c2adbf70fa 100644 --- a/apps/E2E/src/Shadow/pages/ShadowPageObject.ts +++ b/apps/E2E/src/Shadow/pages/ShadowPageObject.ts @@ -1,5 +1,5 @@ -import { SHADOW_TESTPAGE, HOMEPAGE_SHADOW_BUTTON } from '../consts'; import { BasePage } from '../../common/BasePage'; +import { SHADOW_TESTPAGE, HOMEPAGE_SHADOW_BUTTON } from '../consts'; class ShadowTestPage extends BasePage { /*****************************************/ diff --git a/apps/E2E/src/Shimmer/pages/ShimmerPageObject.ts b/apps/E2E/src/Shimmer/pages/ShimmerPageObject.ts index 4a3d3e646c..82f82fc6f6 100644 --- a/apps/E2E/src/Shimmer/pages/ShimmerPageObject.ts +++ b/apps/E2E/src/Shimmer/pages/ShimmerPageObject.ts @@ -1,5 +1,5 @@ -import { HOMEPAGE_SHIMMER_BUTTON, SHIMMER_TESTPAGE, SHIMMER_TEST_COMPONENT } from '../consts'; import { BasePage } from '../../common/BasePage'; +import { HOMEPAGE_SHIMMER_BUTTON, SHIMMER_TESTPAGE, SHIMMER_TEST_COMPONENT } from '../consts'; class ShimmerPageObject extends BasePage { /*****************************************/ diff --git a/apps/E2E/src/Spacing/pages/SpacingTokensPageObject.ts b/apps/E2E/src/Spacing/pages/SpacingTokensPageObject.ts index 77730d0b3e..bef9c30c86 100644 --- a/apps/E2E/src/Spacing/pages/SpacingTokensPageObject.ts +++ b/apps/E2E/src/Spacing/pages/SpacingTokensPageObject.ts @@ -1,5 +1,5 @@ -import { SPACING_TESTPAGE, HOMEPAGE_SPACING_BUTTON } from '../consts'; import { BasePage } from '../../common/BasePage'; +import { SPACING_TESTPAGE, HOMEPAGE_SPACING_BUTTON } from '../consts'; class SpacingTokensPageObject extends BasePage { /*****************************************/ diff --git a/apps/E2E/src/Spinner/pages/SpinnerPageObject.ts b/apps/E2E/src/Spinner/pages/SpinnerPageObject.ts index dc629e36f3..c1ad520962 100644 --- a/apps/E2E/src/Spinner/pages/SpinnerPageObject.ts +++ b/apps/E2E/src/Spinner/pages/SpinnerPageObject.ts @@ -1,5 +1,5 @@ -import { HOMEPAGE_SPINNER_BUTTON, SPINNER_TESTPAGE, SPINNER_TEST_COMPONENT } from '../consts'; import { BasePage } from '../../common/BasePage'; +import { HOMEPAGE_SPINNER_BUTTON, SPINNER_TESTPAGE, SPINNER_TEST_COMPONENT } from '../consts'; class SpinnerPageObject extends BasePage { /*****************************************/ diff --git a/apps/E2E/src/StrokeWidthTokens/pages/StrokeWidthTokensPageObject.ts b/apps/E2E/src/StrokeWidthTokens/pages/StrokeWidthTokensPageObject.ts index eaf11d4bcb..89975bb33c 100644 --- a/apps/E2E/src/StrokeWidthTokens/pages/StrokeWidthTokensPageObject.ts +++ b/apps/E2E/src/StrokeWidthTokens/pages/StrokeWidthTokensPageObject.ts @@ -1,5 +1,5 @@ -import { STROKEWIDTH_TESTPAGE, HOMEPAGE_STROKEWIDTH_BUTTON } from '../consts'; import { BasePage } from '../../common/BasePage'; +import { STROKEWIDTH_TESTPAGE, HOMEPAGE_STROKEWIDTH_BUTTON } from '../consts'; class StrokeWidthTokensPageObject extends BasePage { /*****************************************/ diff --git a/apps/E2E/src/Svg/pages/SvgPageObject.ts b/apps/E2E/src/Svg/pages/SvgPageObject.ts index 7e359b984a..0577f625cf 100644 --- a/apps/E2E/src/Svg/pages/SvgPageObject.ts +++ b/apps/E2E/src/Svg/pages/SvgPageObject.ts @@ -1,5 +1,5 @@ -import { SVG_TESTPAGE, SVG_TEST_COMPONENT, HOMEPAGE_SVG_BUTTON } from '../consts'; import { BasePage } from '../../common/BasePage'; +import { SVG_TESTPAGE, SVG_TEST_COMPONENT, HOMEPAGE_SVG_BUTTON } from '../consts'; class SvgPageObject extends BasePage { /*****************************************/ diff --git a/apps/E2E/src/Switch/specs/Switch.spec.win.ts b/apps/E2E/src/Switch/specs/Switch.spec.win.ts index 2604513bfb..23efc39678 100644 --- a/apps/E2E/src/Switch/specs/Switch.spec.win.ts +++ b/apps/E2E/src/Switch/specs/Switch.spec.win.ts @@ -1,6 +1,6 @@ -import SwitchPageObject from '../pages/SwitchPageObject'; import { BUTTON_A11Y_ROLE, Keys, Attribute } from '../../common/consts'; import { SWITCH_TEST_COMPONENT_LABEL, SWITCH_ACCESSIBILITY_LABEL } from '../consts'; +import SwitchPageObject from '../pages/SwitchPageObject'; // Before testing begins, allow up to 60 seconds for app to open describe('Switch Testing Initialization', () => { diff --git a/apps/E2E/src/TabsLegacy/pages/TabsLegacyPageObject.ts b/apps/E2E/src/TabsLegacy/pages/TabsLegacyPageObject.ts index 3dd01844a6..e9a0213ea8 100644 --- a/apps/E2E/src/TabsLegacy/pages/TabsLegacyPageObject.ts +++ b/apps/E2E/src/TabsLegacy/pages/TabsLegacyPageObject.ts @@ -1,3 +1,4 @@ +import { BasePage, By } from '../../common/BasePage'; import { TABS_TESTPAGE, TABS_TEST_COMPONENT, @@ -9,7 +10,6 @@ import { SECOND_TABS_ITEM_CONTENT, THIRD_TABS_ITEM_CONTENT, } from '../consts'; -import { BasePage, By } from '../../common/BasePage'; /* This enum gives the spec file an EASY way to interact with SPECIFIC UI elements on the page. * The spec file should import this enum and use it when wanting to interact with different elements on the page. diff --git a/apps/E2E/src/TabsLegacy/specs/TabsLegacy.spec.win.ts b/apps/E2E/src/TabsLegacy/specs/TabsLegacy.spec.win.ts index bb58d7e9cd..8f38b4fd90 100644 --- a/apps/E2E/src/TabsLegacy/specs/TabsLegacy.spec.win.ts +++ b/apps/E2E/src/TabsLegacy/specs/TabsLegacy.spec.win.ts @@ -1,5 +1,5 @@ -import TabsLegacyPageObject from '../pages/TabsLegacyPageObject'; import { TAB_A11Y_ROLE, TABITEM_A11Y_ROLE, Keys, Attribute } from '../../common/consts'; +import TabsLegacyPageObject from '../pages/TabsLegacyPageObject'; // Before testing begins, allow up to 60 seconds for app to open describe('Tabs Legacy Testing Initialization', () => { diff --git a/apps/E2E/src/TabsV1/pages/TabsV1PageObject.ts b/apps/E2E/src/TabsV1/pages/TabsV1PageObject.ts index a423494001..094dba778e 100644 --- a/apps/E2E/src/TabsV1/pages/TabsV1PageObject.ts +++ b/apps/E2E/src/TabsV1/pages/TabsV1PageObject.ts @@ -1,3 +1,4 @@ +import { BasePage, By } from '../../common/BasePage'; import { TABSV1_TESTPAGE, TABSV1_TEST_COMPONENT, @@ -9,7 +10,6 @@ import { TABSITEMV1_CONTENT_2, TABSITEMV1_CONTENT_3, } from '../consts'; -import { BasePage, By } from '../../common/BasePage'; export type TabItem = 'First' | 'Second' | 'Third'; diff --git a/apps/E2E/src/TabsV1/specs/TabsV1.spec.win.ts b/apps/E2E/src/TabsV1/specs/TabsV1.spec.win.ts index 1bc8daf5cc..4bf418758d 100644 --- a/apps/E2E/src/TabsV1/specs/TabsV1.spec.win.ts +++ b/apps/E2E/src/TabsV1/specs/TabsV1.spec.win.ts @@ -1,5 +1,5 @@ -import TabsV1PageObject from '../pages/TabsV1PageObject'; import { Attribute, Keys, TAB_A11Y_ROLE, TABITEM_A11Y_ROLE } from '../../common/consts'; +import TabsV1PageObject from '../pages/TabsV1PageObject'; // Before testing begins, allow up to 60 seconds for app to open describe('TabsV1 Testing Initialization', () => { diff --git a/apps/E2E/src/TextLegacy/pages/TextLegacyPageObject.ts b/apps/E2E/src/TextLegacy/pages/TextLegacyPageObject.ts index 4223f7067a..72e28fb1fc 100644 --- a/apps/E2E/src/TextLegacy/pages/TextLegacyPageObject.ts +++ b/apps/E2E/src/TextLegacy/pages/TextLegacyPageObject.ts @@ -1,5 +1,5 @@ -import { TEXT_TESTPAGE, HOMEPAGE_TEXT_BUTTON, DEPRECATED_TEXT_FIRST_COMPONENT, DEPRECATED_TEXT_SECOND_COMPONENT } from '../consts'; import { BasePage, By } from '../../common/BasePage'; +import { TEXT_TESTPAGE, HOMEPAGE_TEXT_BUTTON, DEPRECATED_TEXT_FIRST_COMPONENT, DEPRECATED_TEXT_SECOND_COMPONENT } from '../consts'; class TextLegacyPageObject extends BasePage { /*****************************************/ /**************** Getters ****************/ diff --git a/apps/E2E/src/TextV1/pages/TextV1PageObject.win.ts b/apps/E2E/src/TextV1/pages/TextV1PageObject.win.ts index 80a71f5dbb..61767a339a 100644 --- a/apps/E2E/src/TextV1/pages/TextV1PageObject.win.ts +++ b/apps/E2E/src/TextV1/pages/TextV1PageObject.win.ts @@ -1,5 +1,5 @@ -import { TEXTV1_NO_A11Y_LABEL_COMPONENT, TEXTV1_TESTPAGE, TEXTV1_TEST_COMPONENT, HOMEPAGE_TEXTV1_BUTTON } from '../consts'; import { BasePage } from '../../common/BasePage'; +import { TEXTV1_NO_A11Y_LABEL_COMPONENT, TEXTV1_TESTPAGE, TEXTV1_TEST_COMPONENT, HOMEPAGE_TEXTV1_BUTTON } from '../consts'; class TextV1PageObject extends BasePage { /*****************************************/ diff --git a/apps/E2E/src/Theme/pages/ThemePageObject.win.ts b/apps/E2E/src/Theme/pages/ThemePageObject.win.ts index 8a537ac4f0..7a41be18c2 100644 --- a/apps/E2E/src/Theme/pages/ThemePageObject.win.ts +++ b/apps/E2E/src/Theme/pages/ThemePageObject.win.ts @@ -1,5 +1,5 @@ -import { THEME_TESTPAGE, THEME_TEST_COMPONENT, HOMEPAGE_THEME_BUTTON } from '../consts'; import { BasePage } from '../../common/BasePage'; +import { THEME_TESTPAGE, THEME_TEST_COMPONENT, HOMEPAGE_THEME_BUTTON } from '../consts'; class ThemePageObject extends BasePage { /*****************************************/ diff --git a/apps/E2E/src/common/NativeTesting/specs/NativeTesting.spec.win.ts b/apps/E2E/src/common/NativeTesting/specs/NativeTesting.spec.win.ts index ea57b471d0..123f9f589b 100644 --- a/apps/E2E/src/common/NativeTesting/specs/NativeTesting.spec.win.ts +++ b/apps/E2E/src/common/NativeTesting/specs/NativeTesting.spec.win.ts @@ -1,5 +1,5 @@ -import NativeTestingPageObject from '../pages/NativeTestingPageObject.win'; import { PAGE_TIMEOUT } from '../../../common/consts'; +import NativeTestingPageObject from '../pages/NativeTestingPageObject.win'; describe('Native Safety Check Testing Initialization', () => { it('Wait for app load', async () => { diff --git a/apps/fluent-tester/src/FluentTester.tsx b/apps/fluent-tester/src/FluentTester.tsx index 8e4883e403..8cb490069e 100644 --- a/apps/fluent-tester/src/FluentTester.tsx +++ b/apps/fluent-tester/src/FluentTester.tsx @@ -1,16 +1,18 @@ -import type { Theme } from '@fluentui-react-native/framework'; -import { Separator, TextV1 as Text } from '@fluentui/react-native'; -import { ButtonV1 as Button } from '@fluentui-react-native/button'; -import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet'; import * as React from 'react'; import { ScrollView, View, Text as RNText, Platform, SafeAreaView, BackHandler, I18nManager } from 'react-native'; -import { BASE_TESTPAGE, TESTPAGE_BUTTONS_SCROLLVIEWER, TESTPAGE_CONTENT_SCROLLVIEWER } from '../../E2E/src/common/consts'; -import { fluentTesterStyles, mobileStyles } from './TestComponents/Common/styles'; + +import { Separator, TextV1 as Text } from '@fluentui/react-native'; +import { ButtonV1 as Button } from '@fluentui-react-native/button'; +import type { Theme } from '@fluentui-react-native/framework'; import { useTheme } from '@fluentui-react-native/theme-types'; -import { ThemePickers } from './theme/ThemePickers'; -import { tests } from './testPages'; -import { ROOT_VIEW } from '../../E2E/src/common/consts'; +import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet'; + +import { fluentTesterStyles, mobileStyles } from './TestComponents/Common/styles'; import { testProps } from './TestComponents/Common/TestProps'; +import { tests } from './testPages'; +import { ThemePickers } from './theme/ThemePickers'; +import { BASE_TESTPAGE, TESTPAGE_BUTTONS_SCROLLVIEWER, TESTPAGE_CONTENT_SCROLLVIEWER } from '../../E2E/src/common/consts'; +import { ROOT_VIEW } from '../../E2E/src/common/consts'; // uncomment the below lines to enable message spy /** diff --git a/apps/fluent-tester/src/FluentTesterApp.tsx b/apps/fluent-tester/src/FluentTesterApp.tsx index 73ddf4044a..73d1034748 100644 --- a/apps/fluent-tester/src/FluentTesterApp.tsx +++ b/apps/fluent-tester/src/FluentTesterApp.tsx @@ -1,12 +1,14 @@ 'use strict'; -import { ThemeProvider } from '@fluentui-react-native/theme'; import * as React from 'react'; import { Platform } from 'react-native'; + +import { useHorizontalSizeClass } from '@fluentui-react-native/experimental-appearance-additions'; +import { ThemeProvider } from '@fluentui-react-native/theme'; + import type { FluentTesterProps } from './FluentTester'; import { FluentTester } from './FluentTester'; import { testerTheme } from './theme/index'; -import { useHorizontalSizeClass } from '@fluentui-react-native/experimental-appearance-additions'; export const FluentTesterApp: React.FunctionComponent = (props) => { const sizeClass = useHorizontalSizeClass(); diff --git a/apps/fluent-tester/src/TestComponents/ActivityIndicator/ActivityIndicatorTest.tsx b/apps/fluent-tester/src/TestComponents/ActivityIndicator/ActivityIndicatorTest.tsx index f680f68dff..f0ee572790 100644 --- a/apps/fluent-tester/src/TestComponents/ActivityIndicator/ActivityIndicatorTest.tsx +++ b/apps/fluent-tester/src/TestComponents/ActivityIndicator/ActivityIndicatorTest.tsx @@ -1,12 +1,14 @@ import * as React from 'react'; -import { ActivityIndicator } from '@fluentui-react-native/experimental-activity-indicator'; +import { View, Switch } from 'react-native'; + import { Text } from '@fluentui/react-native'; +import { ActivityIndicator } from '@fluentui-react-native/experimental-activity-indicator'; import { Stack } from '@fluentui-react-native/stack'; + +import { ACTIVITY_INDICATOR_TESTPAGE } from '../../../../E2E/src/ActivityIndicator/consts'; import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; -import { ACTIVITY_INDICATOR_TESTPAGE } from '../../../../E2E/src/ActivityIndicator/consts'; -import { View, Switch } from 'react-native'; const BasicActivityIndicator: React.FunctionComponent = () => { const [animating, setAnimating] = React.useState(true); diff --git a/apps/fluent-tester/src/TestComponents/Avatar/AvatarTest.tsx b/apps/fluent-tester/src/TestComponents/Avatar/AvatarTest.tsx index dce09e6858..4a6da03650 100644 --- a/apps/fluent-tester/src/TestComponents/Avatar/AvatarTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Avatar/AvatarTest.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; -import { AVATAR_TESTPAGE } from '../../../../E2E/src/Avatar/consts'; -import type { TestSection, PlatformStatus } from '../Test'; -import { Test } from '../Test'; +import { Platform } from 'react-native'; + import { StandardUsage } from './BasicAvatar'; import { CustomizeUsage } from './CustomizedAvatar'; import { E2EAvatarTest } from './E2EAvatarTest'; -import { Platform } from 'react-native'; +import { AVATAR_TESTPAGE } from '../../../../E2E/src/Avatar/consts'; +import type { TestSection, PlatformStatus } from '../Test'; +import { Test } from '../Test'; const avatarSections: TestSection[] = [ { diff --git a/apps/fluent-tester/src/TestComponents/Avatar/BasicAvatar.android.tsx b/apps/fluent-tester/src/TestComponents/Avatar/BasicAvatar.android.tsx index 52278bdac7..14de16b223 100644 --- a/apps/fluent-tester/src/TestComponents/Avatar/BasicAvatar.android.tsx +++ b/apps/fluent-tester/src/TestComponents/Avatar/BasicAvatar.android.tsx @@ -1,11 +1,13 @@ import type { FunctionComponent } from 'react'; import React from 'react'; -import { Avatar } from '@fluentui-react-native/avatar'; import { View } from 'react-native'; + +import { Avatar } from '@fluentui-react-native/avatar'; +import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; +import { Switch } from '@fluentui-react-native/switch'; + import { steveBallmerPhotoUrl } from './../PersonaCoin/styles'; import { mobileStyles } from '../Common/styles'; -import { Switch } from '@fluentui-react-native/switch'; -import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; export const StandardUsage: FunctionComponent = () => { const [activityRing, setActivityRing] = React.useState(true); diff --git a/apps/fluent-tester/src/TestComponents/Avatar/BasicAvatar.tsx b/apps/fluent-tester/src/TestComponents/Avatar/BasicAvatar.tsx index c3c5327bef..59b0f500e4 100644 --- a/apps/fluent-tester/src/TestComponents/Avatar/BasicAvatar.tsx +++ b/apps/fluent-tester/src/TestComponents/Avatar/BasicAvatar.tsx @@ -1,15 +1,17 @@ -import type { FunctionComponent } from 'react'; import React, { useState, useCallback } from 'react'; +import type { FunctionComponent } from 'react'; +import { View, Text, Platform } from 'react-native'; + +import { ToggleButton } from '@fluentui/react-native'; import type { AvatarSize, AvatarColor, AvatarActive } from '@fluentui-react-native/avatar'; import { AvatarSizes, AvatarColors, Avatar } from '@fluentui-react-native/avatar'; import type { PresenceBadgeStatus } from '@fluentui-react-native/badge'; import { PresenceBadgeStatuses } from '@fluentui-react-native/badge'; -import { View, Text, Platform } from 'react-native'; + import { satyaPhotoUrl, undefinedText } from './../PersonaCoin/styles'; -import { commonTestStyles as commonStyles } from '../Common/styles'; import { svgProps } from '../Common/iconExamples'; import { StyledPicker } from '../Common/StyledPicker'; -import { ToggleButton } from '@fluentui/react-native'; +import { commonTestStyles as commonStyles } from '../Common/styles'; type WithUndefined = T | typeof undefinedText; diff --git a/apps/fluent-tester/src/TestComponents/Avatar/CustomizedAvatar.tsx b/apps/fluent-tester/src/TestComponents/Avatar/CustomizedAvatar.tsx index 93d021fd79..7a4c887a77 100644 --- a/apps/fluent-tester/src/TestComponents/Avatar/CustomizedAvatar.tsx +++ b/apps/fluent-tester/src/TestComponents/Avatar/CustomizedAvatar.tsx @@ -1,12 +1,14 @@ import React, { useState, useMemo } from 'react'; +import { View, Text, TextInput, Platform, StyleSheet } from 'react-native'; + +import { ToggleButton } from '@fluentui/react-native'; import type { AvatarSize } from '@fluentui-react-native/avatar'; import { Avatar } from '@fluentui-react-native/avatar'; -import { View, Text, TextInput, Platform, StyleSheet } from 'react-native'; -import { steveBallmerPhotoUrl } from './../PersonaCoin/styles'; -import { commonTestStyles as commonStyles } from '../Common/styles'; import type { FontWeight } from '@fluentui-react-native/theme-types'; + +import { steveBallmerPhotoUrl } from './../PersonaCoin/styles'; import { svgProps } from '../Common/iconExamples'; -import { ToggleButton } from '@fluentui/react-native'; +import { commonTestStyles as commonStyles } from '../Common/styles'; const styles = StyleSheet.create({ avatarTestCaseContainer: { marginLeft: 20 }, diff --git a/apps/fluent-tester/src/TestComponents/Avatar/E2EAvatarTest.tsx b/apps/fluent-tester/src/TestComponents/Avatar/E2EAvatarTest.tsx index f1c701ab90..14e001a992 100644 --- a/apps/fluent-tester/src/TestComponents/Avatar/E2EAvatarTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Avatar/E2EAvatarTest.tsx @@ -1,7 +1,8 @@ -import { Avatar } from '@fluentui-react-native/avatar'; import * as React from 'react'; import { View } from 'react-native'; -import { testProps } from '../Common/TestProps'; + +import { Avatar } from '@fluentui-react-native/avatar'; + import { AVATAR_ACCESSIBILITY_LABEL, AVATAR_ACCESSIBILITY_HINT, @@ -9,6 +10,7 @@ import { AVATAR_TEST_COMPONENT, AVATAR_SECONDARY_TEST_COMPONENT, } from '../../../../E2E/src/Avatar/consts'; +import { testProps } from '../Common/TestProps'; export const E2EAvatarTest: React.FunctionComponent = () => { return ( diff --git a/apps/fluent-tester/src/TestComponents/Avatar/NativeAvatarTest.tsx b/apps/fluent-tester/src/TestComponents/Avatar/NativeAvatarTest.tsx index 48ec49746c..7de43b1e99 100644 --- a/apps/fluent-tester/src/TestComponents/Avatar/NativeAvatarTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Avatar/NativeAvatarTest.tsx @@ -1,14 +1,16 @@ import * as React from 'react'; +import { Switch, View } from 'react-native'; + +import { Text } from '@fluentui/react-native'; import type { Size } from '@fluentui-react-native/experimental-avatar/'; import { NativeAvatar } from '@fluentui-react-native/experimental-avatar/'; -import { Text } from '@fluentui/react-native'; import { Stack } from '@fluentui-react-native/stack'; + +import { testImageSource, rainbowGradientSource } from './testImageSources'; import { NATIVE_AVATAR_TESTPAGE } from '../../../../E2E/src/Avatar/consts'; +import { commonTestStyles as commonStyles } from '../Common/styles'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; -import { testImageSource, rainbowGradientSource } from './testImageSources'; -import { commonTestStyles as commonStyles } from '../Common/styles'; -import { Switch, View } from 'react-native'; export const BasicAvatar: React.FunctionComponent = () => { const [showImage, setShowImage] = React.useState(true); diff --git a/apps/fluent-tester/src/TestComponents/Badge/BadgeTest.tsx b/apps/fluent-tester/src/TestComponents/Badge/BadgeTest.tsx index 183b1811c2..a1d9b8ea85 100644 --- a/apps/fluent-tester/src/TestComponents/Badge/BadgeTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Badge/BadgeTest.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; + +import { BasicBadge } from './BasicBadgeTest'; +import { CounterBadgeTest } from './CounterBadgeTest'; +import { E2EBadgeTest } from './E2EBadgeTest'; +import { PresenceBadgeTest } from './PresenceBadgeTest'; import { BADGE_TESTPAGE } from '../../../../E2E/src/Badge/consts'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; -import { BasicBadge } from './BasicBadgeTest'; -import { CounterBadgeTest } from './CounterBadgeTest'; -import { PresenceBadgeTest } from './PresenceBadgeTest'; -import { E2EBadgeTest } from './E2EBadgeTest'; const badgeSections: TestSection[] = [ { diff --git a/apps/fluent-tester/src/TestComponents/Badge/BasicBadgeTest.tsx b/apps/fluent-tester/src/TestComponents/Badge/BasicBadgeTest.tsx index 5d93073d22..5e73a7ed16 100644 --- a/apps/fluent-tester/src/TestComponents/Badge/BasicBadgeTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Badge/BasicBadgeTest.tsx @@ -1,6 +1,8 @@ /* eslint-disable @typescript-eslint/no-var-requires */ import React, { useState, useCallback, useMemo } from 'react'; import { View, Platform, Text, Image } from 'react-native'; + +import { ToggleButton } from '@fluentui/react-native'; import type { BadgeAppearance, BadgeColor, @@ -11,11 +13,11 @@ import type { BadgeTokens, } from '@fluentui-react-native/badge'; import { Badge, BadgeAppearances, BadgeColors, BadgeShapes, BadgeSizes } from '@fluentui-react-native/badge'; -import { StyledPicker } from '../Common/StyledPicker'; -import { satyaPhotoUrl } from './../PersonaCoin/styles'; -import { ToggleButton } from '@fluentui/react-native'; import { useFluentTheme } from '@fluentui-react-native/framework'; + +import { satyaPhotoUrl } from './../PersonaCoin/styles'; import { svgProps, iconProps } from '../Common/iconExamples'; +import { StyledPicker } from '../Common/StyledPicker'; const badgeColors: BadgeColor[] = [...BadgeColors]; const badgeShapes: BadgeShape[] = [...BadgeShapes]; diff --git a/apps/fluent-tester/src/TestComponents/Badge/CounterBadgeTest.tsx b/apps/fluent-tester/src/TestComponents/Badge/CounterBadgeTest.tsx index 99691caca9..ac6b8d5264 100644 --- a/apps/fluent-tester/src/TestComponents/Badge/CounterBadgeTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Badge/CounterBadgeTest.tsx @@ -1,7 +1,9 @@ /* eslint-disable @typescript-eslint/no-var-requires */ import React from 'react'; import { View, Platform, Text } from 'react-native'; + import { CounterBadge } from '@fluentui-react-native/badge'; + import { iconProps } from '../Common/iconExamples'; export const CounterBadgeTest: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/TestComponents/Badge/E2EBadgeTest.tsx b/apps/fluent-tester/src/TestComponents/Badge/E2EBadgeTest.tsx index e161554c8f..47634c58d5 100644 --- a/apps/fluent-tester/src/TestComponents/Badge/E2EBadgeTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Badge/E2EBadgeTest.tsx @@ -1,8 +1,10 @@ -import { Badge, PresenceBadge } from '@fluentui-react-native/badge'; import * as React from 'react'; import { View } from 'react-native'; -import { testProps } from '../Common/TestProps'; + +import { Badge, PresenceBadge } from '@fluentui-react-native/badge'; + import { BADGE_TEST_COMPONENT, BADGE_SECONDARY_TEST_COMPONENT } from '../../../../E2E/src/Badge/consts'; +import { testProps } from '../Common/TestProps'; export const E2EBadgeTest: React.FunctionComponent = () => { return ( diff --git a/apps/fluent-tester/src/TestComponents/Badge/PresenceBadgeTest.tsx b/apps/fluent-tester/src/TestComponents/Badge/PresenceBadgeTest.tsx index c8c1373516..a2671d3d55 100644 --- a/apps/fluent-tester/src/TestComponents/Badge/PresenceBadgeTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Badge/PresenceBadgeTest.tsx @@ -1,10 +1,12 @@ /* eslint-disable @typescript-eslint/no-var-requires */ import React, { useState, useCallback } from 'react'; import { View, Platform, Text } from 'react-native'; + +import { ToggleButton } from '@fluentui/react-native'; import type { BadgeSize } from '@fluentui-react-native/badge'; import { PresenceBadge, BadgeSizes } from '@fluentui-react-native/badge'; + import { StyledPicker } from '../Common/StyledPicker'; -import { ToggleButton } from '@fluentui/react-native'; const badgeSizes: BadgeSize[] = [...BadgeSizes]; export const PresenceBadgeTest: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/TestComponents/Button/ButtonHOCTestSection.tsx b/apps/fluent-tester/src/TestComponents/Button/ButtonHOCTestSection.tsx index ee1f05c07f..ac8b5982a2 100644 --- a/apps/fluent-tester/src/TestComponents/Button/ButtonHOCTestSection.tsx +++ b/apps/fluent-tester/src/TestComponents/Button/ButtonHOCTestSection.tsx @@ -1,11 +1,13 @@ -import { ButtonV1 as Button } from '@fluentui/react-native'; -import { TextV1 as Text } from '@fluentui-react-native/text'; import * as React from 'react'; import { Platform, View } from 'react-native'; -import { commonTestStyles, stackStyle } from '../Common/styles'; + +import { ButtonV1 as Button } from '@fluentui/react-native'; import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; import { isGestureResponderEvent } from '@fluentui-react-native/interactive-hooks'; +import { TextV1 as Text } from '@fluentui-react-native/text'; + import { svgProps } from '../Common/iconExamples'; +import { commonTestStyles, stackStyle } from '../Common/styles'; const CustomText = Text.customize({ fontSize: 'header', color: 'hotpink' }); const CustomButton = Button.customize({ backgroundColor: 'pink' }); diff --git a/apps/fluent-tester/src/TestComponents/Button/ButtonIconTestSection.android.tsx b/apps/fluent-tester/src/TestComponents/Button/ButtonIconTestSection.android.tsx index 5b54c633e7..714494cc38 100644 --- a/apps/fluent-tester/src/TestComponents/Button/ButtonIconTestSection.android.tsx +++ b/apps/fluent-tester/src/TestComponents/Button/ButtonIconTestSection.android.tsx @@ -1,8 +1,10 @@ -import { ButtonV1 as Button } from '@fluentui/react-native'; import * as React from 'react'; import { View } from 'react-native'; -import { commonTestStyles, testContentRootViewStyle } from '../Common/styles'; + +import { ButtonV1 as Button } from '@fluentui/react-native'; + import { svgProps } from '../Common/iconExamples'; +import { commonTestStyles, testContentRootViewStyle } from '../Common/styles'; export const ButtonIconTest: React.FunctionComponent = () => { const fontBuiltInProps = { diff --git a/apps/fluent-tester/src/TestComponents/Button/ButtonIconTestSection.tsx b/apps/fluent-tester/src/TestComponents/Button/ButtonIconTestSection.tsx index bcda8eb007..66735ed8b9 100644 --- a/apps/fluent-tester/src/TestComponents/Button/ButtonIconTestSection.tsx +++ b/apps/fluent-tester/src/TestComponents/Button/ButtonIconTestSection.tsx @@ -1,10 +1,12 @@ -import { ButtonV1 as Button } from '@fluentui/react-native'; import * as React from 'react'; import { Platform, View, StyleSheet } from 'react-native'; -import { commonTestStyles, testContentRootViewStyle } from '../Common/styles'; -import { testImage, svgProps, iconProps } from '../Common/iconExamples'; + +import { ButtonV1 as Button } from '@fluentui/react-native'; import { SvgXml } from 'react-native-svg'; +import { testImage, svgProps, iconProps } from '../Common/iconExamples'; +import { commonTestStyles, testContentRootViewStyle } from '../Common/styles'; + const styles = StyleSheet.create({ chevron: { paddingStart: 4 }, }); diff --git a/apps/fluent-tester/src/TestComponents/Button/ButtonShapeTestSection.tsx b/apps/fluent-tester/src/TestComponents/Button/ButtonShapeTestSection.tsx index cc841cbe23..d19d5d1ca0 100644 --- a/apps/fluent-tester/src/TestComponents/Button/ButtonShapeTestSection.tsx +++ b/apps/fluent-tester/src/TestComponents/Button/ButtonShapeTestSection.tsx @@ -1,6 +1,8 @@ -import { ButtonV1 as Button, CompoundButton } from '@fluentui/react-native'; import * as React from 'react'; import { View } from 'react-native'; + +import { ButtonV1 as Button, CompoundButton } from '@fluentui/react-native'; + import { commonTestStyles, testContentRootViewStyle } from '../Common/styles'; export const ButtonShapeTest: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/TestComponents/Button/ButtonSizeTestSection.tsx b/apps/fluent-tester/src/TestComponents/Button/ButtonSizeTestSection.tsx index 57082500e7..b745339cd3 100644 --- a/apps/fluent-tester/src/TestComponents/Button/ButtonSizeTestSection.tsx +++ b/apps/fluent-tester/src/TestComponents/Button/ButtonSizeTestSection.tsx @@ -1,8 +1,10 @@ -import { ButtonV1 as Button, CompoundButton, FAB } from '@fluentui/react-native'; import * as React from 'react'; import { Platform, View } from 'react-native'; -import { commonTestStyles, testContentRootViewStyle } from '../Common/styles'; + +import { ButtonV1 as Button, CompoundButton, FAB } from '@fluentui/react-native'; + import { iconProps } from '../Common/iconExamples'; +import { commonTestStyles, testContentRootViewStyle } from '../Common/styles'; const isMobile = Platform.OS === 'android' || Platform.OS === 'ios'; diff --git a/apps/fluent-tester/src/TestComponents/Button/ButtonTest.tsx b/apps/fluent-tester/src/TestComponents/Button/ButtonTest.tsx index f22cce50ef..62f8c54f00 100644 --- a/apps/fluent-tester/src/TestComponents/Button/ButtonTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Button/ButtonTest.tsx @@ -1,18 +1,19 @@ import * as React from 'react'; +import { Platform } from 'react-native'; + +import { ButtonShapeTest } from './ButtonShapeTestSection'; +import { ButtonSizeTest } from './ButtonSizeTestSection'; +import { ButtonVariantTest } from './ButtonVariantTestSection'; import { ButtonFocusTest_deprecated } from './deprecated/ButtonFocusTest'; import { ButtonIconTest_deprecated } from './deprecated/ButtonIconTest'; -import { BUTTON_TESTPAGE } from '../../../../E2E/src/ButtonLegacy/consts'; import { E2EButtonTest_deprecated } from './deprecated/E2EButtonTest'; +import { E2EButtonTest } from './E2EButtonTest'; +import { ToggleButtonTest } from './ToggleButtonTestSection'; +import { BUTTON_TESTPAGE } from '../../../../E2E/src/ButtonLegacy/consts'; +import { ButtonHOCTest } from '../Button/ButtonHOCTestSection'; +import { ButtonIconTest } from '../Button/ButtonIconTestSection'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; -import { ButtonVariantTest } from './ButtonVariantTestSection'; -import { ToggleButtonTest } from './ToggleButtonTestSection'; -import { ButtonIconTest } from '../Button/ButtonIconTestSection'; -import { ButtonSizeTest } from './ButtonSizeTestSection'; -import { ButtonShapeTest } from './ButtonShapeTestSection'; -import { E2EButtonTest } from './E2EButtonTest'; -import { ButtonHOCTest } from '../Button/ButtonHOCTestSection'; -import { Platform } from 'react-native'; const buttonSections: TestSection[] = [ { diff --git a/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.mobile.tsx b/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.mobile.tsx index b1d9fb240f..46438e4b90 100644 --- a/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.mobile.tsx +++ b/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.mobile.tsx @@ -1,8 +1,10 @@ -import { Button, FAB } from '@fluentui-react-native/experimental-button'; import * as React from 'react'; import { View } from 'react-native'; -import { commonTestStyles, testContentRootViewStyle } from '../Common/styles'; + +import { Button, FAB } from '@fluentui-react-native/experimental-button'; + import { iconProps } from '../Common/iconExamples'; +import { commonTestStyles, testContentRootViewStyle } from '../Common/styles'; export const ButtonVariantTest: React.FunctionComponent = () => { const [showFABText, setShowFABText] = React.useState(true); diff --git a/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.tsx b/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.tsx index 6dae9f66c2..839de9b1da 100644 --- a/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.tsx +++ b/apps/fluent-tester/src/TestComponents/Button/ButtonVariantTestSection.tsx @@ -1,6 +1,8 @@ -import { Button, CompoundButton, FAB } from '@fluentui-react-native/experimental-button'; import * as React from 'react'; import { View } from 'react-native'; + +import { Button, CompoundButton, FAB } from '@fluentui-react-native/experimental-button'; + import { iconProps } from '../Common/iconExamples'; import { commonTestStyles, testContentRootViewStyle } from '../Common/styles'; diff --git a/apps/fluent-tester/src/TestComponents/Button/E2EButtonTest.tsx b/apps/fluent-tester/src/TestComponents/Button/E2EButtonTest.tsx index 75381164ad..613420c579 100644 --- a/apps/fluent-tester/src/TestComponents/Button/E2EButtonTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Button/E2EButtonTest.tsx @@ -1,10 +1,12 @@ /* eslint-disable @typescript-eslint/no-var-requires */ +import * as React from 'react'; +import { View } from 'react-native'; + import { Text } from '@fluentui/react-native'; import { ButtonV1 as Button } from '@fluentui/react-native'; import { Stack } from '@fluentui-react-native/stack'; -import * as React from 'react'; -import { View } from 'react-native'; -import { stackStyle } from '../Common/styles'; +import type { IViewWin32Props } from '@office-iss/react-native-win32'; + import { BUTTON_TEST_COMPONENT, BUTTON_ON_PRESS, @@ -17,7 +19,7 @@ import { BUTTON_FOCUSABLE_TEST_COMPONENT, BUTTON_FOCUSABLE_TEST_COMPONENT_LABEL, } from '../../../../E2E/src/ButtonLegacy/consts'; -import type { IViewWin32Props } from '@office-iss/react-native-win32'; +import { stackStyle } from '../Common/styles'; import { testProps } from '../Common/TestProps'; export const E2EButtonTest: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/TestComponents/Button/ToggleButtonTestSection.tsx b/apps/fluent-tester/src/TestComponents/Button/ToggleButtonTestSection.tsx index 0adeec689e..e88d4911df 100644 --- a/apps/fluent-tester/src/TestComponents/Button/ToggleButtonTestSection.tsx +++ b/apps/fluent-tester/src/TestComponents/Button/ToggleButtonTestSection.tsx @@ -1,7 +1,9 @@ -import { ToggleButton } from '@fluentui/react-native'; -import { Checkbox } from '@fluentui/react-native'; import * as React from 'react'; import { StyleSheet, View } from 'react-native'; + +import { ToggleButton } from '@fluentui/react-native'; +import { Checkbox } from '@fluentui/react-native'; + import { commonTestStyles, testContentRootViewStyle } from '../Common/styles'; const styles = StyleSheet.create({ diff --git a/apps/fluent-tester/src/TestComponents/Button/deprecated/ButtonFocusTest.tsx b/apps/fluent-tester/src/TestComponents/Button/deprecated/ButtonFocusTest.tsx index c0ad9e8c3d..9b60755b27 100644 --- a/apps/fluent-tester/src/TestComponents/Button/deprecated/ButtonFocusTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Button/deprecated/ButtonFocusTest.tsx @@ -1,7 +1,9 @@ +import * as React from 'react'; + import { Button } from '@fluentui/react-native'; import type { IFocusable } from '@fluentui-react-native/interactive-hooks'; import { Stack } from '@fluentui-react-native/stack'; -import * as React from 'react'; + import { stackStyle } from '../../Common/styles'; export const ButtonFocusTest_deprecated: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/TestComponents/Button/deprecated/ButtonIconTest.tsx b/apps/fluent-tester/src/TestComponents/Button/deprecated/ButtonIconTest.tsx index c030aaf16a..3e713557f2 100644 --- a/apps/fluent-tester/src/TestComponents/Button/deprecated/ButtonIconTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Button/deprecated/ButtonIconTest.tsx @@ -1,10 +1,12 @@ /* eslint-disable @typescript-eslint/no-var-requires */ -import { Button, Text } from '@fluentui/react-native'; -import { Stack } from '@fluentui-react-native/stack'; import * as React from 'react'; import { Platform, View } from 'react-native'; -import { stackStyle } from '../../Common/styles'; + +import { Button, Text } from '@fluentui/react-native'; +import { Stack } from '@fluentui-react-native/stack'; + import { testImage, svgProps } from '../../Common/iconExamples'; +import { stackStyle } from '../../Common/styles'; const CustomizedIconButton = Button.customize({ tokens: { iconColor: 'red' }, diff --git a/apps/fluent-tester/src/TestComponents/Button/deprecated/E2EButtonTest.tsx b/apps/fluent-tester/src/TestComponents/Button/deprecated/E2EButtonTest.tsx index 61e5839eb7..de19f2623f 100644 --- a/apps/fluent-tester/src/TestComponents/Button/deprecated/E2EButtonTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Button/deprecated/E2EButtonTest.tsx @@ -1,9 +1,10 @@ /* eslint-disable @typescript-eslint/no-var-requires */ -import { Button, Text } from '@fluentui/react-native'; -import { Stack } from '@fluentui-react-native/stack'; import * as React from 'react'; import { View } from 'react-native'; -import { stackStyle } from '../../Common/styles'; + +import { Button, Text } from '@fluentui/react-native'; +import { Stack } from '@fluentui-react-native/stack'; + import { BUTTON_TEST_COMPONENT_DEPRECATED, BUTTON_ON_PRESS_DEPRECATED, @@ -11,6 +12,7 @@ import { BUTTON_ACCESSIBILITY_LABEL_DEPRECATED, BUTTON_TEST_COMPONENT_LABEL_DEPRECATED, } from '../../../../../E2E/src/ButtonLegacy/consts'; +import { stackStyle } from '../../Common/styles'; import { testProps } from '../../Common/TestProps'; export const E2EButtonTest_deprecated: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/TestComponents/Callout/CalloutE2ETest.tsx b/apps/fluent-tester/src/TestComponents/Callout/CalloutE2ETest.tsx index b665815d09..e6db67ff40 100644 --- a/apps/fluent-tester/src/TestComponents/Callout/CalloutE2ETest.tsx +++ b/apps/fluent-tester/src/TestComponents/Callout/CalloutE2ETest.tsx @@ -1,9 +1,11 @@ import * as React from 'react'; import type { ScreenRect } from 'react-native'; import { View } from 'react-native'; + import type { DismissBehaviors } from '@fluentui/react-native'; import { ButtonV1 as Button, Callout, Text } from '@fluentui/react-native'; import { Switch } from '@fluentui-react-native/switch'; + import { BUTTON_TO_OPEN_CALLOUT, CALLOUT_ACCESSIBILITY_LABEL, CALLOUT_TEST_COMPONENT } from '../../../../E2E/src/Callout/consts'; import { testProps } from '../Common/TestProps'; diff --git a/apps/fluent-tester/src/TestComponents/Callout/CalloutTest.tsx b/apps/fluent-tester/src/TestComponents/Callout/CalloutTest.tsx index bbdf889b11..5eccf6df83 100644 --- a/apps/fluent-tester/src/TestComponents/Callout/CalloutTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Callout/CalloutTest.tsx @@ -1,14 +1,16 @@ import * as React from 'react'; import type { ScreenRect } from 'react-native'; import { Text, View, Switch, ScrollView } from 'react-native'; -import type { IFocusable, RestoreFocusEvent, DismissBehaviors } from '@fluentui/react-native'; + import { Button, Callout, Separator, Pressable, StealthButton } from '@fluentui/react-native'; +import type { IFocusable, RestoreFocusEvent, DismissBehaviors } from '@fluentui/react-native'; + +import { E2ECalloutTest } from './CalloutE2ETest'; import { CALLOUT_TESTPAGE } from '../../../../E2E/src/Callout/consts'; +import { MenuPicker } from '../Common/MenuPicker'; +import { fluentTesterStyles } from '../Common/styles'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; -import { E2ECalloutTest } from './CalloutE2ETest'; -import { fluentTesterStyles } from '../Common/styles'; -import { MenuPicker } from '../Common/MenuPicker'; const StandardCallout: React.FunctionComponent = () => { const [showStandardCallout, setShowStandardCallout] = React.useState(false); diff --git a/apps/fluent-tester/src/TestComponents/CheckboxLegacy/CheckboxLegacyE2ETest.tsx b/apps/fluent-tester/src/TestComponents/CheckboxLegacy/CheckboxLegacyE2ETest.tsx index 9a55f031e5..c6f109b645 100644 --- a/apps/fluent-tester/src/TestComponents/CheckboxLegacy/CheckboxLegacyE2ETest.tsx +++ b/apps/fluent-tester/src/TestComponents/CheckboxLegacy/CheckboxLegacyE2ETest.tsx @@ -1,7 +1,9 @@ -import { Checkbox, Text } from '@fluentui/react-native'; import * as React from 'react'; import { View } from 'react-native'; -import { stackStyle } from '../Common/styles'; + +import { Checkbox, Text } from '@fluentui/react-native'; +import { Stack } from '@fluentui-react-native/stack'; + import { CHECKBOX_TEST_COMPONENT, CHECKBOX_ON_PRESS, @@ -9,7 +11,7 @@ import { CHECKBOX_TEST_COMPONENT_LABEL, CHECKBOX_ACCESSIBILITY_LABEL, } from '../../../../E2E/src/CheckboxLegacy/consts'; -import { Stack } from '@fluentui-react-native/stack'; +import { stackStyle } from '../Common/styles'; import { testProps } from '../Common/TestProps'; export const CheckboxLegacyE2ETest: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/TestComponents/CheckboxLegacy/CheckboxLegacyTest.tsx b/apps/fluent-tester/src/TestComponents/CheckboxLegacy/CheckboxLegacyTest.tsx index 04033599ee..980a7dc23c 100644 --- a/apps/fluent-tester/src/TestComponents/CheckboxLegacy/CheckboxLegacyTest.tsx +++ b/apps/fluent-tester/src/TestComponents/CheckboxLegacy/CheckboxLegacyTest.tsx @@ -1,14 +1,16 @@ +import * as React from 'react'; +import { View, TextInput } from 'react-native'; + import { Checkbox } from '@fluentui/react-native'; import type { Theme } from '@fluentui-react-native/theme-types'; import { useTheme } from '@fluentui-react-native/theme-types'; -import * as React from 'react'; -import { View, TextInput } from 'react-native'; -import { commonTestStyles as commonStyles } from '../Common/styles'; -import { CHECKBOX_TESTPAGE } from '../../../../E2E/src/CheckboxLegacy/consts'; +import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet'; + import { CheckboxLegacyE2ETest } from './CheckboxLegacyE2ETest'; +import { CHECKBOX_TESTPAGE } from '../../../../E2E/src/CheckboxLegacy/consts'; +import { commonTestStyles as commonStyles } from '../Common/styles'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; -import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet'; function onChangeUncontrolled(isChecked: boolean) { console.log(isChecked); diff --git a/apps/fluent-tester/src/TestComponents/CheckboxV1/CheckboxV1Test.tsx b/apps/fluent-tester/src/TestComponents/CheckboxV1/CheckboxV1Test.tsx index 1b7c8ca480..be580f531a 100644 --- a/apps/fluent-tester/src/TestComponents/CheckboxV1/CheckboxV1Test.tsx +++ b/apps/fluent-tester/src/TestComponents/CheckboxV1/CheckboxV1Test.tsx @@ -1,16 +1,18 @@ import * as React from 'react'; -import { CHECKBOXV1_TESTPAGE } from '../../../../E2E/src/CheckboxV1/consts'; -import type { TestSection, PlatformStatus } from '../Test'; -import { Test } from '../Test'; +import { View, TextInput, Platform } from 'react-native'; + +import { ButtonV1 as Button } from '@fluentui-react-native/button'; import { Checkbox } from '@fluentui-react-native/experimental-checkbox'; +import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; import type { Theme } from '@fluentui-react-native/theme-types'; import { useTheme } from '@fluentui-react-native/theme-types'; -import { View, TextInput, Platform } from 'react-native'; -import { commonTestStyles as commonStyles, mobileStyles } from '../Common/styles'; -import { E2ECheckboxV1Test } from './E2ECheckboxV1Test'; -import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet'; -import { ButtonV1 as Button } from '@fluentui-react-native/button'; + +import { E2ECheckboxV1Test } from './E2ECheckboxV1Test'; +import { CHECKBOXV1_TESTPAGE } from '../../../../E2E/src/CheckboxV1/consts'; +import { commonTestStyles as commonStyles, mobileStyles } from '../Common/styles'; +import type { TestSection, PlatformStatus } from '../Test'; +import { Test } from '../Test'; function onChangeUncontrolled(_e: InteractionEvent, isChecked: boolean) { console.log(isChecked); diff --git a/apps/fluent-tester/src/TestComponents/CheckboxV1/E2ECheckboxV1Test.tsx b/apps/fluent-tester/src/TestComponents/CheckboxV1/E2ECheckboxV1Test.tsx index f34b59c6cf..7d5820ad1b 100644 --- a/apps/fluent-tester/src/TestComponents/CheckboxV1/E2ECheckboxV1Test.tsx +++ b/apps/fluent-tester/src/TestComponents/CheckboxV1/E2ECheckboxV1Test.tsx @@ -1,7 +1,10 @@ -import { Checkbox } from '@fluentui-react-native/experimental-checkbox'; import * as React from 'react'; import { View } from 'react-native'; -import { stackStyle } from '../Common/styles'; + +import { Text } from '@fluentui/react-native'; +import { Checkbox } from '@fluentui-react-native/experimental-checkbox'; +import { Stack } from '@fluentui-react-native/stack'; + import { CHECKBOXV1_TEST_COMPONENT, CHECKBOXV1_ACCESSIBILITY_LABEL, @@ -9,8 +12,7 @@ import { CHECKBOXV1_TEST_COMPONENT_LABEL, CHECKBOXV1_ON_PRESS, } from '../../../../E2E/src/CheckboxV1/consts'; -import { Stack } from '@fluentui-react-native/stack'; -import { Text } from '@fluentui/react-native'; +import { stackStyle } from '../Common/styles'; import { testProps } from '../Common/TestProps'; export const E2ECheckboxV1Test: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.tsx b/apps/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.tsx index c6eca3e217..bd33d9056b 100644 --- a/apps/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.tsx +++ b/apps/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.tsx @@ -1,22 +1,24 @@ import * as React from 'react'; import type { ViewStyle, ColorValue } from 'react-native'; import { View, StyleSheet, Platform } from 'react-native'; + +import { Text, ToggleButton } from '@fluentui/react-native'; +import { createAliasTokens } from '@fluentui-react-native/default-theme'; +import type { SvgIconProps } from '@fluentui-react-native/icon'; +import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { Theme } from '@fluentui-react-native/theme-types'; import { useTheme } from '@fluentui-react-native/theme-types'; import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet'; import { getCurrentAppearance } from '@fluentui-react-native/theming-utils'; import { createOfficeAliasTokens } from '@fluentui-react-native/win32-theme'; -import { createAliasTokens } from '@fluentui-react-native/default-theme'; -import { commonTestStyles } from '../Common/styles'; -import { Text, ToggleButton } from '@fluentui/react-native'; -import type { TestSection, PlatformStatus } from '../Test'; -import { Test } from '../Test'; -import { COLORTOKENS_TEST_COMPONENT, COLORTOKEN_TESTPAGE } from '../../../../E2E/src/ColorTokens/consts'; -import { testProps } from '../Common/TestProps'; -import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { SvgProps } from 'react-native-svg'; import Svg, { G, Path } from 'react-native-svg'; -import type { SvgIconProps } from '@fluentui-react-native/icon'; + +import { COLORTOKENS_TEST_COMPONENT, COLORTOKEN_TESTPAGE } from '../../../../E2E/src/ColorTokens/consts'; +import { commonTestStyles } from '../Common/styles'; +import { testProps } from '../Common/TestProps'; +import type { TestSection, PlatformStatus } from '../Test'; +import { Test } from '../Test'; const getThemedStyles = themedStyleSheet((theme: Theme) => { return { diff --git a/apps/fluent-tester/src/TestComponents/Common/AlignmentPicker.tsx b/apps/fluent-tester/src/TestComponents/Common/AlignmentPicker.tsx index e49c5a8129..e4fe05405e 100644 --- a/apps/fluent-tester/src/TestComponents/Common/AlignmentPicker.tsx +++ b/apps/fluent-tester/src/TestComponents/Common/AlignmentPicker.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; -import { undefinedText } from '../PersonaCoin/styles'; -import type { IconAlignment } from '@fluentui/react-native'; import type { StyleProp, ViewStyle } from 'react-native'; + +import type { IconAlignment } from '@fluentui/react-native'; + import { MenuPicker } from './MenuPicker'; +import { undefinedText } from '../PersonaCoin/styles'; const alignmentValues: Array = [undefinedText, 'start', 'center', 'end']; diff --git a/apps/fluent-tester/src/TestComponents/Common/MenuPicker.desktop.tsx b/apps/fluent-tester/src/TestComponents/Common/MenuPicker.desktop.tsx index a1be277e2f..58821dfd23 100644 --- a/apps/fluent-tester/src/TestComponents/Common/MenuPicker.desktop.tsx +++ b/apps/fluent-tester/src/TestComponents/Common/MenuPicker.desktop.tsx @@ -1,11 +1,14 @@ import * as React from 'react'; import { View, StyleSheet } from 'react-native'; -import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu'; -import type { MenuPickerProps, CollectionItem } from './MenuPicker.types'; -export { MenuPickerProps, CollectionItem }; + import { ButtonV1 as Button, Text } from '@fluentui/react-native'; +import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu'; import { SvgXml } from 'react-native-svg'; +import type { MenuPickerProps, CollectionItem } from './MenuPicker.types'; + +export { MenuPickerProps, CollectionItem }; + const chevronXml = ` diff --git a/apps/fluent-tester/src/TestComponents/Common/MenuPicker.tsx b/apps/fluent-tester/src/TestComponents/Common/MenuPicker.tsx index 03519e8d8d..7f6c70b987 100644 --- a/apps/fluent-tester/src/TestComponents/Common/MenuPicker.tsx +++ b/apps/fluent-tester/src/TestComponents/Common/MenuPicker.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; + import { Picker } from '@react-native-picker/picker'; -import { testProps } from './TestProps'; + import type { CollectionItem, MenuPickerProps } from './MenuPicker.types'; +import { testProps } from './TestProps'; export { CollectionItem, MenuPickerProps }; /* diff --git a/apps/fluent-tester/src/TestComponents/Common/MenuPicker.windows.tsx b/apps/fluent-tester/src/TestComponents/Common/MenuPicker.windows.tsx index 342b54aabb..a99ebebbef 100644 --- a/apps/fluent-tester/src/TestComponents/Common/MenuPicker.windows.tsx +++ b/apps/fluent-tester/src/TestComponents/Common/MenuPicker.windows.tsx @@ -1,6 +1,7 @@ export * from './MenuPicker.desktop'; import * as React from 'react'; import { Button, Text, View, StyleSheet } from 'react-native'; + import type { MenuPickerProps, CollectionItem } from './MenuPicker.types'; export { MenuPickerProps, CollectionItem }; diff --git a/apps/fluent-tester/src/TestComponents/Common/Slider.tsx b/apps/fluent-tester/src/TestComponents/Common/Slider.tsx index 3924220491..102ce6baf7 100644 --- a/apps/fluent-tester/src/TestComponents/Common/Slider.tsx +++ b/apps/fluent-tester/src/TestComponents/Common/Slider.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import type { ViewProps, StyleProp, ViewStyle } from 'react-native'; import { StyleSheet, UIManager, Text, findNodeHandle, View } from 'react-native'; + import { Separator, Pressable } from '@fluentui/react-native'; import type { IPressableState } from '@fluentui-react-native/interactive-hooks'; diff --git a/apps/fluent-tester/src/TestComponents/Common/StyledPicker.tsx b/apps/fluent-tester/src/TestComponents/Common/StyledPicker.tsx index a4ad199767..fdda6fc0de 100644 --- a/apps/fluent-tester/src/TestComponents/Common/StyledPicker.tsx +++ b/apps/fluent-tester/src/TestComponents/Common/StyledPicker.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; -import { MenuPicker } from './MenuPicker'; import type { ColorValue } from 'react-native'; + import { useTheme } from '@fluentui-react-native/theme-types'; + +import { MenuPicker } from './MenuPicker'; import { commonTestStyles as commonStyles } from './styles'; export const StyledPicker = (props) => { diff --git a/apps/fluent-tester/src/TestComponents/Common/iconExamples.tsx b/apps/fluent-tester/src/TestComponents/Common/iconExamples.tsx index 7c8b6d4050..34ea2d0abc 100644 --- a/apps/fluent-tester/src/TestComponents/Common/iconExamples.tsx +++ b/apps/fluent-tester/src/TestComponents/Common/iconExamples.tsx @@ -1,5 +1,7 @@ import { Platform } from 'react-native'; + import type { SvgIconProps, FontIconProps, IconProps } from '@fluentui-react-native/icon'; + import TestSvg from '../../../assets/test.svg'; export const svgProps: SvgIconProps = { diff --git a/apps/fluent-tester/src/TestComponents/Common/styles.ts b/apps/fluent-tester/src/TestComponents/Common/styles.ts index e8ac9946da..93f694379a 100644 --- a/apps/fluent-tester/src/TestComponents/Common/styles.ts +++ b/apps/fluent-tester/src/TestComponents/Common/styles.ts @@ -1,4 +1,5 @@ import { StyleSheet } from 'react-native'; + import type { IStackProps } from '@fluentui-react-native/stack'; export const commonTestStyles = StyleSheet.create({ diff --git a/apps/fluent-tester/src/TestComponents/ContextualMenu/ContextualMenuTest.tsx b/apps/fluent-tester/src/TestComponents/ContextualMenu/ContextualMenuTest.tsx index 311e12ada4..ede5e4ee51 100644 --- a/apps/fluent-tester/src/TestComponents/ContextualMenu/ContextualMenuTest.tsx +++ b/apps/fluent-tester/src/TestComponents/ContextualMenu/ContextualMenuTest.tsx @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/no-var-requires */ import * as React from 'react'; import { Text, View, Switch } from 'react-native'; + import { Text as FURNText, ButtonV1 as Button, @@ -11,11 +12,12 @@ import { Separator, Checkbox, } from '@fluentui/react-native'; + +import { E2EContextualMenuTest } from './E2EContextualMenuTest'; import { CONTEXTUALMENU_TESTPAGE } from '../../../../E2E/src/ContextualMenu/consts'; +import { svgProps, fontProps, testImage } from '../Common/iconExamples'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; -import { svgProps, fontProps, testImage } from '../Common/iconExamples'; -import { E2EContextualMenuTest } from './E2EContextualMenuTest'; const ContextualMenuMainTest: React.FunctionComponent = () => { const stdBtnRef = React.useRef(null); diff --git a/apps/fluent-tester/src/TestComponents/ContextualMenu/E2EContextualMenuTest.tsx b/apps/fluent-tester/src/TestComponents/ContextualMenu/E2EContextualMenuTest.tsx index 12647328df..412720d1e0 100644 --- a/apps/fluent-tester/src/TestComponents/ContextualMenu/E2EContextualMenuTest.tsx +++ b/apps/fluent-tester/src/TestComponents/ContextualMenu/E2EContextualMenuTest.tsx @@ -1,7 +1,9 @@ /* eslint-disable @typescript-eslint/no-var-requires */ import * as React from 'react'; import { Text, View, Switch } from 'react-native'; + import { ButtonV1 as Button, ContextualMenu, ContextualMenuItem, Separator } from '@fluentui/react-native'; + import { CONTEXTUALMENUITEM_TEST_COMPONENT, CONTEXTUALMENU_TEST_COMPONENT } from '../../../../E2E/src/ContextualMenu/consts'; import { testProps } from '../Common/TestProps'; diff --git a/apps/fluent-tester/src/TestComponents/CornerRadius/CornerRadiusTest.tsx b/apps/fluent-tester/src/TestComponents/CornerRadius/CornerRadiusTest.tsx index 132e56e9c5..f10797369d 100644 --- a/apps/fluent-tester/src/TestComponents/CornerRadius/CornerRadiusTest.tsx +++ b/apps/fluent-tester/src/TestComponents/CornerRadius/CornerRadiusTest.tsx @@ -1,15 +1,17 @@ import * as React from 'react'; -import { HOMEPAGE_CORNERRADIUS_TESTPAGE } from '../../../../E2E/src/CornerRadiusTokens/consts'; -import type { TestSection, PlatformStatus } from '../Test'; -import { Test } from '../Test'; import { View } from 'react-native'; -import { Stack } from '@fluentui-react-native/stack'; -import { stackStyle } from '../Common/styles'; -import { globalTokens } from '@fluentui-react-native/theme-tokens'; + import { Text } from '@fluentui/react-native'; import { useFluentTheme } from '@fluentui-react-native/framework'; +import { Stack } from '@fluentui-react-native/stack'; +import { globalTokens } from '@fluentui-react-native/theme-tokens'; import { getCurrentAppearance } from '@fluentui-react-native/theming-utils'; +import { HOMEPAGE_CORNERRADIUS_TESTPAGE } from '../../../../E2E/src/CornerRadiusTokens/consts'; +import { stackStyle } from '../Common/styles'; +import type { TestSection, PlatformStatus } from '../Test'; +import { Test } from '../Test'; + interface CornerRadiusTestComponentProps { name: string; cornerRadius: number; diff --git a/apps/fluent-tester/src/TestComponents/Divider/DividerTest.tsx b/apps/fluent-tester/src/TestComponents/Divider/DividerTest.tsx index ddadb2b39b..9d58f5e5ea 100644 --- a/apps/fluent-tester/src/TestComponents/Divider/DividerTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Divider/DividerTest.tsx @@ -1,14 +1,16 @@ import * as React from 'react'; import { Platform, StyleSheet, View } from 'react-native'; + import { Divider } from '@fluentui-react-native/divider'; import { Stack } from '@fluentui-react-native/stack'; import { TextV1 as Text } from '@fluentui-react-native/text'; + +import { CustomisedMobileDividers, MobileDividers } from './MobileDividerTest'; import { DIVIDER_TESTPAGE } from '../../../../E2E/src/Divider/consts'; +import TestSvg from '../../../assets/test.svg'; +import { commonTestStyles } from '../Common/styles'; import { Test } from '../Test'; import type { TestSection, PlatformStatus } from '../Test'; -import { commonTestStyles } from '../Common/styles'; -import TestSvg from '../../../assets/test.svg'; -import { CustomisedMobileDividers, MobileDividers } from './MobileDividerTest'; const isMobile = Platform.OS === 'android' || Platform.OS === 'ios'; const PaddedDivider = Divider.customize({ paddingVertical: 4, thickness: 2 }); diff --git a/apps/fluent-tester/src/TestComponents/Divider/MobileDividerTest.tsx b/apps/fluent-tester/src/TestComponents/Divider/MobileDividerTest.tsx index 0178c7670c..f8fc5fe7cf 100644 --- a/apps/fluent-tester/src/TestComponents/Divider/MobileDividerTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Divider/MobileDividerTest.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; +import { StyleSheet, View } from 'react-native'; + import { Divider } from '@fluentui-react-native/divider'; import { Stack } from '@fluentui-react-native/stack'; import { TextV1 as Text } from '@fluentui-react-native/text'; +import { globalTokens } from '@fluentui-react-native/theme-tokens'; import { commonTestStyles } from '../Common/styles'; -import { StyleSheet, View } from 'react-native'; -import { globalTokens } from '@fluentui-react-native/theme-tokens'; const CustomizedText = Text.customize({ textAlign: 'right', diff --git a/apps/fluent-tester/src/TestComponents/Drawer/DrawerTest.tsx b/apps/fluent-tester/src/TestComponents/Drawer/DrawerTest.tsx index bbc98c2bcb..03e863ee1a 100644 --- a/apps/fluent-tester/src/TestComponents/Drawer/DrawerTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Drawer/DrawerTest.tsx @@ -1,15 +1,17 @@ import * as React from 'react'; -import { stackStyle } from '../Common/styles'; import { View, Text } from 'react-native'; + import { Link } from '@fluentui/react-native'; import { Button } from '@fluentui-react-native/experimental-button'; import { Drawer } from '@fluentui-react-native/experimental-drawer'; -import { Stack } from '@fluentui-react-native/stack'; import { Icon } from '@fluentui-react-native/icon'; +import { Stack } from '@fluentui-react-native/stack'; + import { DRAWER_TESTPAGE } from './consts'; -import type { TestSection, PlatformStatus } from '../Test'; -import { Test } from '../Test'; import { svgProps } from '../Common/iconExamples'; +import { stackStyle } from '../Common/styles'; +import { Test } from '../Test'; +import type { TestSection, PlatformStatus } from '../Test'; const BasicDrawer: React.FunctionComponent = () => { const stdBtnRef = React.useRef(null); diff --git a/apps/fluent-tester/src/TestComponents/Dropdown/DropdownTest.tsx b/apps/fluent-tester/src/TestComponents/Dropdown/DropdownTest.tsx index 97b771a524..218113cf23 100644 --- a/apps/fluent-tester/src/TestComponents/Dropdown/DropdownTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Dropdown/DropdownTest.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; + import { Option, Dropdown } from '@fluentui-react-native/dropdown'; import { Stack } from '@fluentui-react-native/stack'; -import { stackStyle } from '../Common/styles'; + import { DROPDOWN_TESTPAGE } from './consts'; +import { stackStyle } from '../Common/styles'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; diff --git a/apps/fluent-tester/src/TestComponents/Expander/ExpanderTest.tsx b/apps/fluent-tester/src/TestComponents/Expander/ExpanderTest.tsx index 1d1b6aa5d4..43e4ba829b 100644 --- a/apps/fluent-tester/src/TestComponents/Expander/ExpanderTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Expander/ExpanderTest.tsx @@ -1,12 +1,14 @@ import * as React from 'react'; -import { Expander } from '@fluentui-react-native/experimental-expander'; +import { View, Switch } from 'react-native'; + import { Text } from '@fluentui/react-native'; +import { Expander } from '@fluentui-react-native/experimental-expander'; import { Stack } from '@fluentui-react-native/stack'; + +import { EXPANDER_TESTPAGE } from './consts'; import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; -import { EXPANDER_TESTPAGE } from './consts'; -import { View, Switch } from 'react-native'; const CustomizedExpander = Expander.customize({ headerBackground: '#9c9c9c', diff --git a/apps/fluent-tester/src/TestComponents/FocusTrapZone/FocusTrapZoneTest.tsx b/apps/fluent-tester/src/TestComponents/FocusTrapZone/FocusTrapZoneTest.tsx index d097ab0020..123942636d 100644 --- a/apps/fluent-tester/src/TestComponents/FocusTrapZone/FocusTrapZoneTest.tsx +++ b/apps/fluent-tester/src/TestComponents/FocusTrapZone/FocusTrapZoneTest.tsx @@ -1,13 +1,15 @@ +import * as React from 'react'; +import type { TouchableHighlightProps, ViewProps } from 'react-native'; +import { TouchableHighlight, View } from 'react-native'; + import type { IFocusTrapZoneProps } from '@fluentui/react-native'; import { FocusTrapZone, Text } from '@fluentui/react-native'; import type { KeyPressEvent } from '@fluentui-react-native/interactive-hooks'; import { useFocusState } from '@fluentui-react-native/interactive-hooks'; import { Stack } from '@fluentui-react-native/stack'; -import * as React from 'react'; -import type { TouchableHighlightProps, ViewProps } from 'react-native'; -import { TouchableHighlight, View } from 'react-native'; -import { stackStyle } from '../Common/styles'; + import { FOCUSTRAPZONE_TESTPAGE } from '../../../../E2E/src/FocusTrapZone/consts'; +import { stackStyle } from '../Common/styles'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; diff --git a/apps/fluent-tester/src/TestComponents/FocusZone/FocusZoneE2ETest.tsx b/apps/fluent-tester/src/TestComponents/FocusZone/FocusZoneE2ETest.tsx index 8b395010c3..d98ec2e213 100644 --- a/apps/fluent-tester/src/TestComponents/FocusZone/FocusZoneE2ETest.tsx +++ b/apps/fluent-tester/src/TestComponents/FocusZone/FocusZoneE2ETest.tsx @@ -1,10 +1,13 @@ +import React from 'react'; +import { View } from 'react-native'; + +import type { FocusZoneDirection } from '@fluentui/react-native'; +import { FocusZone, MenuButton, Text } from '@fluentui/react-native'; import type { ButtonProps } from '@fluentui-react-native/button'; import { ButtonV1 as Button } from '@fluentui-react-native/button'; import { Switch } from '@fluentui-react-native/switch'; -import type { FocusZoneDirection } from '@fluentui/react-native'; -import { FocusZone, MenuButton, Text } from '@fluentui/react-native'; -import React from 'react'; -import { View } from 'react-native'; + +import { focusZoneTestStyles, GridButton } from './styles'; import { FOCUSZONE_CIRCLE_NAV_SWITCH, FOCUSZONE_DEFAULT_TABBABLE_SWITCH, @@ -20,7 +23,6 @@ import { import type { GridButton as GridButtonIndex } from '../../../../E2E/src/FocusZone/pages/FocusZonePageObject'; import { commonTestStyles } from '../Common/styles'; import { testProps } from '../Common/TestProps'; -import { focusZoneTestStyles, GridButton } from './styles'; export const FocusZoneDirections: FocusZoneDirection[] = ['bidirectional', 'horizontal', 'vertical', 'none']; diff --git a/apps/fluent-tester/src/TestComponents/FocusZone/FocusZoneTest.tsx b/apps/fluent-tester/src/TestComponents/FocusZone/FocusZoneTest.tsx index 6ef0bb6067..523c672bc0 100644 --- a/apps/fluent-tester/src/TestComponents/FocusZone/FocusZoneTest.tsx +++ b/apps/fluent-tester/src/TestComponents/FocusZone/FocusZoneTest.tsx @@ -1,17 +1,19 @@ import * as React from 'react'; import { View, ScrollView, Pressable } from 'react-native'; + import type { FocusZoneDirection } from '@fluentui/react-native'; import { FocusZone, Text, useOnPressWithFocus } from '@fluentui/react-native'; import { ButtonV1 as Button } from '@fluentui-react-native/button'; import type { CheckboxProps } from '@fluentui-react-native/experimental-checkbox'; import { Checkbox } from '@fluentui-react-native/experimental-checkbox'; -import type { TestSection, PlatformStatus } from '../Test'; -import { Test } from '../Test'; -import { FOCUSZONE_TESTPAGE } from '../../../../E2E/src/FocusZone/consts'; -import { focusZoneTestStyles, SubheaderText } from './styles'; + import { FocusZone2D, FocusZoneDirections, FocusZoneListWrapper, GridOfButtons } from './FocusZoneE2ETest'; +import { focusZoneTestStyles, SubheaderText } from './styles'; +import { FOCUSZONE_TESTPAGE } from '../../../../E2E/src/FocusZone/consts'; import type { CollectionItem } from '../Common/MenuPicker'; import { MenuPicker } from '../Common/MenuPicker'; +import type { TestSection, PlatformStatus } from '../Test'; +import { Test } from '../Test'; const directionCollection: CollectionItem[] = FocusZoneDirections.map((dir) => ({ label: dir, value: dir })); diff --git a/apps/fluent-tester/src/TestComponents/FocusZone/styles.ts b/apps/fluent-tester/src/TestComponents/FocusZone/styles.ts index 468a257e79..d9a52e2040 100644 --- a/apps/fluent-tester/src/TestComponents/FocusZone/styles.ts +++ b/apps/fluent-tester/src/TestComponents/FocusZone/styles.ts @@ -1,4 +1,5 @@ import { StyleSheet, View } from 'react-native'; + import { Text } from '@fluentui/react-native'; import { ButtonV1 as Button } from '@fluentui-react-native/button'; import { Icon } from '@fluentui-react-native/icon'; diff --git a/apps/fluent-tester/src/TestComponents/Icon/IconLegacyE2ETest.tsx b/apps/fluent-tester/src/TestComponents/Icon/IconLegacyE2ETest.tsx index ac53a3e338..4a202f3130 100644 --- a/apps/fluent-tester/src/TestComponents/Icon/IconLegacyE2ETest.tsx +++ b/apps/fluent-tester/src/TestComponents/Icon/IconLegacyE2ETest.tsx @@ -1,10 +1,12 @@ /* eslint-disable @typescript-eslint/no-var-requires */ import * as React from 'react'; import { View } from 'react-native'; + import { Text } from '@fluentui/react-native'; import { Icon } from '@fluentui-react-native/icon'; -import { ICON_ACCESSIBILITY_LABEL } from '../../../../E2E/src/IconLegacy/consts'; import type { RasterImageIconProps } from '@fluentui-react-native/icon'; + +import { ICON_ACCESSIBILITY_LABEL } from '../../../../E2E/src/IconLegacy/consts'; import { testImage } from '../Common/iconExamples'; export const E2ETestingIcon: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/TestComponents/Icon/IconTest.tsx b/apps/fluent-tester/src/TestComponents/Icon/IconTest.tsx index 4c323165a6..028fcb60e7 100644 --- a/apps/fluent-tester/src/TestComponents/Icon/IconTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Icon/IconTest.tsx @@ -1,16 +1,18 @@ /* eslint-disable @typescript-eslint/no-var-requires */ import * as React from 'react'; import { Platform, PlatformColor, View } from 'react-native'; + import { Text } from '@fluentui/react-native'; import type { RasterImageIconProps, SvgIconProps, FontIconProps } from '@fluentui-react-native/icon'; import { Icon } from '@fluentui-react-native/icon'; + +import { E2ETestingIcon } from './IconLegacyE2ETest'; +import { IconV1Test } from './IconV1'; +import { IconV1E2ETest } from './IconV1E2ETest'; +import { ICON_TESTPAGE } from '../../../../E2E/src/IconLegacy/consts'; +import { testImage, testTtf, svgProps } from '../Common/iconExamples'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; -import { ICON_TESTPAGE } from '../../../../E2E/src/IconLegacy/consts'; -import { E2ETestingIcon } from './IconLegacyE2ETest'; -import { IconV1E2ETest } from './IconV1E2ETest'; -import { IconV1Test } from './IconV1'; -import { testImage, testTtf, svgProps } from '../Common/iconExamples'; const Icons: React.FunctionComponent = () => { const fontCustomFontProps: FontIconProps = { diff --git a/apps/fluent-tester/src/TestComponents/Icon/IconV1.tsx b/apps/fluent-tester/src/TestComponents/Icon/IconV1.tsx index 750422ce55..b74131c967 100644 --- a/apps/fluent-tester/src/TestComponents/Icon/IconV1.tsx +++ b/apps/fluent-tester/src/TestComponents/Icon/IconV1.tsx @@ -1,7 +1,9 @@ import React, { useMemo } from 'react'; +import { Text, View } from 'react-native'; + import type { FontIconPropsV1, SvgIconPropsV1 } from '@fluentui-react-native/icon'; import { FontIcon, SvgIcon, IconV1 } from '@fluentui-react-native/icon'; -import { Text, View } from 'react-native'; + import TestSvg from '../../../assets/test.svg'; const fontBuiltInProps: FontIconPropsV1 = { diff --git a/apps/fluent-tester/src/TestComponents/Icon/IconV1E2ETest.tsx b/apps/fluent-tester/src/TestComponents/Icon/IconV1E2ETest.tsx index 8f5f09a433..f1381091af 100644 --- a/apps/fluent-tester/src/TestComponents/Icon/IconV1E2ETest.tsx +++ b/apps/fluent-tester/src/TestComponents/Icon/IconV1E2ETest.tsx @@ -1,9 +1,11 @@ /* eslint-disable @typescript-eslint/no-var-requires */ import * as React from 'react'; import { View } from 'react-native'; + import { Text } from '@fluentui/react-native'; import type { FontIconPropsV1, SvgIconPropsV1 } from '@fluentui-react-native/icon'; import { FontIcon, SvgIcon, IconV1 } from '@fluentui-react-native/icon'; + import { ICON_ACCESSIBILITY_LABEL, ICON_TEST_COMPONENT, diff --git a/apps/fluent-tester/src/TestComponents/LinkLegacy/E2ELinkLegacyTest.tsx b/apps/fluent-tester/src/TestComponents/LinkLegacy/E2ELinkLegacyTest.tsx index 021e8a37a3..c47eaf05e2 100644 --- a/apps/fluent-tester/src/TestComponents/LinkLegacy/E2ELinkLegacyTest.tsx +++ b/apps/fluent-tester/src/TestComponents/LinkLegacy/E2ELinkLegacyTest.tsx @@ -1,14 +1,16 @@ import * as React from 'react'; import { Alert } from 'react-native'; + import { Link } from '@fluentui/react-native'; import { Stack } from '@fluentui-react-native/stack'; -import { stackStyle } from '../Common/styles'; + import { LINK_TEST_COMPONENT, LINK_ACCESSIBILITY_LABEL, LINK_NO_A11Y_LABEL_COMPONENT, LINK_TEST_COMPONENT_LABEL, } from '../../../../E2E/src/LinkLegacy/consts'; +import { stackStyle } from '../Common/styles'; import { testProps } from '../Common/TestProps'; export const E2ELinkLegacyTest: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/TestComponents/LinkLegacy/LinkLegacyTest.tsx b/apps/fluent-tester/src/TestComponents/LinkLegacy/LinkLegacyTest.tsx index 46390c66a0..506c008a2a 100644 --- a/apps/fluent-tester/src/TestComponents/LinkLegacy/LinkLegacyTest.tsx +++ b/apps/fluent-tester/src/TestComponents/LinkLegacy/LinkLegacyTest.tsx @@ -1,12 +1,14 @@ import * as React from 'react'; import { Alert } from 'react-native'; + import { Link } from '@fluentui/react-native'; import { Stack } from '@fluentui-react-native/stack'; -import { stackStyle } from '../Common/styles'; + +import { E2ELinkLegacyTest } from './E2ELinkLegacyTest'; import { LINK_TESTPAGE } from '../../../../E2E/src/LinkLegacy/consts'; +import { stackStyle } from '../Common/styles'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; -import { E2ELinkLegacyTest } from './E2ELinkLegacyTest'; const Links: React.FunctionComponent = () => { const doPress = (): void => { diff --git a/apps/fluent-tester/src/TestComponents/LinkV1/E2ELinkV1Test.tsx b/apps/fluent-tester/src/TestComponents/LinkV1/E2ELinkV1Test.tsx index d279c1b27d..137c09bc50 100644 --- a/apps/fluent-tester/src/TestComponents/LinkV1/E2ELinkV1Test.tsx +++ b/apps/fluent-tester/src/TestComponents/LinkV1/E2ELinkV1Test.tsx @@ -1,13 +1,15 @@ import * as React from 'react'; + import { LinkV1 as Link } from '@fluentui/react-native'; import { Stack } from '@fluentui-react-native/stack'; -import { stackStyle } from '../Common/styles'; + import { LINKV1_TEST_COMPONENT, LINKV1_ACCESSIBILITY_LABEL, LINKV1_NO_A11Y_LABEL_COMPONENT, LINKV1_TEST_COMPONENT_LABEL, } from '../../../../E2E/src/LinkV1/consts'; +import { stackStyle } from '../Common/styles'; import { testProps } from '../Common/TestProps'; export const E2ELinkV1Test: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/TestComponents/LinkV1/InlineLinksTest.tsx b/apps/fluent-tester/src/TestComponents/LinkV1/InlineLinksTest.tsx index 87c0965ef9..905f1a0871 100644 --- a/apps/fluent-tester/src/TestComponents/LinkV1/InlineLinksTest.tsx +++ b/apps/fluent-tester/src/TestComponents/LinkV1/InlineLinksTest.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; import { Alert } from 'react-native'; + import { LinkV1 as Link, TextV1 as Text } from '@fluentui/react-native'; import { Stack } from '@fluentui-react-native/stack'; + import { stackStyle } from '../Common/styles'; export const InlineLinks: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/TestComponents/LinkV1/InlineLinksTest.win32.tsx b/apps/fluent-tester/src/TestComponents/LinkV1/InlineLinksTest.win32.tsx index 14a7997879..21655f9a01 100644 --- a/apps/fluent-tester/src/TestComponents/LinkV1/InlineLinksTest.win32.tsx +++ b/apps/fluent-tester/src/TestComponents/LinkV1/InlineLinksTest.win32.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; + import { TextV1 as Text } from '@fluentui/react-native'; // Platform.select not available for win32 diff --git a/apps/fluent-tester/src/TestComponents/LinkV1/LinkV1Test.tsx b/apps/fluent-tester/src/TestComponents/LinkV1/LinkV1Test.tsx index 6fadc079f5..40795216dc 100644 --- a/apps/fluent-tester/src/TestComponents/LinkV1/LinkV1Test.tsx +++ b/apps/fluent-tester/src/TestComponents/LinkV1/LinkV1Test.tsx @@ -1,15 +1,17 @@ import * as React from 'react'; import { Alert, View, StyleSheet, Text, TextInput } from 'react-native'; +import { Platform } from 'react-native'; + import type { LinkTokens } from '@fluentui/react-native'; import { LinkV1 as Link } from '@fluentui/react-native'; import { Stack } from '@fluentui-react-native/stack'; -import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles'; + +import { E2ELinkV1Test } from './E2ELinkV1Test'; +import { InlineLinks } from './InlineLinksTest'; import { LINKV1_TESTPAGE } from '../../../../E2E/src/LinkV1/consts'; +import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; -import { E2ELinkV1Test } from './E2ELinkV1Test'; -import { Platform } from 'react-native'; -import { InlineLinks } from './InlineLinksTest'; const DefaultLinks: React.FunctionComponent = () => { const doPress = React.useCallback(() => Alert.alert('Alert.', 'You have been alerted.'), []); diff --git a/apps/fluent-tester/src/TestComponents/Menu/E2EMenuTest.tsx b/apps/fluent-tester/src/TestComponents/Menu/E2EMenuTest.tsx index ad262a0101..6cd87ca1a0 100644 --- a/apps/fluent-tester/src/TestComponents/Menu/E2EMenuTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Menu/E2EMenuTest.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; import { View } from 'react-native'; -import { Stack } from '@fluentui-react-native/stack'; -import { stackStyle } from '../Common/styles'; + import { ButtonV1 as Button } from '@fluentui-react-native/button'; -import { TextV1 as Text } from '@fluentui-react-native/text'; import { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui-react-native/menu'; +import { Stack } from '@fluentui-react-native/stack'; +import { TextV1 as Text } from '@fluentui-react-native/text'; + import { MENUITEM_ACCESSIBILITY_LABEL, MENUITEM_NO_A11Y_LABEL_COMPONENT, @@ -19,6 +20,7 @@ import { MENUITEM_DISABLED_COMPONENT, MENUITEM_CALLBACK_LABEL, } from '../../../../E2E/src/Menu/consts'; +import { stackStyle } from '../Common/styles'; import { testProps } from '../Common/TestProps'; export const E2EMenuTest: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/TestComponents/Menu/MenuRefs.tsx b/apps/fluent-tester/src/TestComponents/Menu/MenuRefs.tsx index 3b456e6706..4590756f90 100644 --- a/apps/fluent-tester/src/TestComponents/Menu/MenuRefs.tsx +++ b/apps/fluent-tester/src/TestComponents/Menu/MenuRefs.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; + import { ButtonV1 as Button } from '@fluentui/react-native'; import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu'; import { Stack } from '@fluentui-react-native/stack'; + import { stackStyle } from '../Common/styles'; export const MenuTriggerChildRef: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/TestComponents/Menu/MenuScrollView.tsx b/apps/fluent-tester/src/TestComponents/Menu/MenuScrollView.tsx index 902523b35b..68427e35df 100644 --- a/apps/fluent-tester/src/TestComponents/Menu/MenuScrollView.tsx +++ b/apps/fluent-tester/src/TestComponents/Menu/MenuScrollView.tsx @@ -1,9 +1,11 @@ import React, { useState } from 'react'; +import { TextInput, StyleSheet, View } from 'react-native'; + import { ButtonV1 as Button } from '@fluentui/react-native'; import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu'; import { Stack } from '@fluentui-react-native/stack'; + import { stackStyle } from '../Common/styles'; -import { TextInput, StyleSheet, View } from 'react-native'; import { commonTestStyles as commonStyles } from '../Common/styles'; const styles = StyleSheet.create({ diff --git a/apps/fluent-tester/src/TestComponents/Menu/MenuTest.tsx b/apps/fluent-tester/src/TestComponents/Menu/MenuTest.tsx index e073efe1b9..6b5ce5dbad 100644 --- a/apps/fluent-tester/src/TestComponents/Menu/MenuTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Menu/MenuTest.tsx @@ -1,4 +1,6 @@ import React from 'react'; +import { StyleSheet } from 'react-native'; + import { ButtonV1 as Button } from '@fluentui/react-native'; import { Menu, @@ -11,17 +13,17 @@ import { MenuDivider, } from '@fluentui-react-native/menu'; import { Stack } from '@fluentui-react-native/stack'; -import { stackStyle } from '../Common/styles'; -import { MENU_TESTPAGE } from '../../../../E2E/src/Menu/consts'; -import type { TestSection, PlatformStatus } from '../Test'; -import { Test } from '../Test'; import { TextV1 as Text } from '@fluentui-react-native/text'; + import { E2EMenuTest } from './E2EMenuTest'; -import { MenuTriggerHoverCallback, MenuTriggerOnClickCallback } from './MenuTriggerCallbacks'; import { MenuTriggerChildRef } from './MenuRefs'; -import { StyleSheet } from 'react-native'; import { MenuScrollView } from './MenuScrollView'; import { MenuTooltips } from './MenuTooltips'; +import { MenuTriggerHoverCallback, MenuTriggerOnClickCallback } from './MenuTriggerCallbacks'; +import { MENU_TESTPAGE } from '../../../../E2E/src/Menu/consts'; +import { stackStyle } from '../Common/styles'; +import { Test } from '../Test'; +import type { TestSection, PlatformStatus } from '../Test'; const MenuDefault: React.FunctionComponent = () => { return ( diff --git a/apps/fluent-tester/src/TestComponents/Menu/MenuTooltips.tsx b/apps/fluent-tester/src/TestComponents/Menu/MenuTooltips.tsx index 6441604023..783fabda0f 100644 --- a/apps/fluent-tester/src/TestComponents/Menu/MenuTooltips.tsx +++ b/apps/fluent-tester/src/TestComponents/Menu/MenuTooltips.tsx @@ -1,7 +1,9 @@ import React from 'react'; + import { ButtonV1 as Button } from '@fluentui/react-native'; import { Menu, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu'; import { Stack } from '@fluentui-react-native/stack'; + import { stackStyle } from '../Common/styles'; export const MenuTooltips: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/TestComponents/Menu/MenuTriggerCallbacks.tsx b/apps/fluent-tester/src/TestComponents/Menu/MenuTriggerCallbacks.tsx index 613a7eea40..7c0c4bd384 100644 --- a/apps/fluent-tester/src/TestComponents/Menu/MenuTriggerCallbacks.tsx +++ b/apps/fluent-tester/src/TestComponents/Menu/MenuTriggerCallbacks.tsx @@ -1,11 +1,13 @@ import * as React from 'react'; +import type { ColorValue } from 'react-native'; + import { ButtonV1 as Button } from '@fluentui/react-native'; import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu'; import { Stack } from '@fluentui-react-native/stack'; -import { stackStyle } from '../Common/styles'; -import type { ColorValue } from 'react-native'; import Svg, { Path } from 'react-native-svg'; +import { stackStyle } from '../Common/styles'; + export const MenuTriggerOnClickCallback: React.FunctionComponent = () => { const [counter, setCounter] = React.useState(0); const onClick = React.useCallback(() => { diff --git a/apps/fluent-tester/src/TestComponents/MenuButtonLegacy/CustomizedMenuButtonTest.tsx b/apps/fluent-tester/src/TestComponents/MenuButtonLegacy/CustomizedMenuButtonTest.tsx index dc63b77c19..1057769e44 100644 --- a/apps/fluent-tester/src/TestComponents/MenuButtonLegacy/CustomizedMenuButtonTest.tsx +++ b/apps/fluent-tester/src/TestComponents/MenuButtonLegacy/CustomizedMenuButtonTest.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; import { Text, View } from 'react-native'; + import { MenuButton } from '@fluentui/react-native'; -import { menuItems } from './testData'; + import { viewWrapperStyle, columnStyle, rowStyle } from './MenuButtonLegacyTestStyles'; +import { menuItems } from './testData'; const StyledMenuButton = MenuButton.customize({ button: { diff --git a/apps/fluent-tester/src/TestComponents/MenuButtonLegacy/MenuButtonLegacyE2ETest.tsx b/apps/fluent-tester/src/TestComponents/MenuButtonLegacy/MenuButtonLegacyE2ETest.tsx index 69e41309ed..bb6e9ffa67 100644 --- a/apps/fluent-tester/src/TestComponents/MenuButtonLegacy/MenuButtonLegacyE2ETest.tsx +++ b/apps/fluent-tester/src/TestComponents/MenuButtonLegacy/MenuButtonLegacyE2ETest.tsx @@ -1,9 +1,11 @@ import * as React from 'react'; +import { Text, View } from 'react-native'; + import type { ContextualMenuProps } from '@fluentui/react-native'; import { MenuButton } from '@fluentui/react-native'; -import { Text, View } from 'react-native'; -import { menuItems } from './testData'; + import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonLegacyTestStyles'; +import { menuItems } from './testData'; import { MENU_BUTTON_TEST_COMPONENT, MENU_BUTTON_ACCESSIBILITY_LABEL, diff --git a/apps/fluent-tester/src/TestComponents/MenuButtonLegacy/MenuButtonLegacyTest.tsx b/apps/fluent-tester/src/TestComponents/MenuButtonLegacy/MenuButtonLegacyTest.tsx index 4714447151..7808d2fff3 100644 --- a/apps/fluent-tester/src/TestComponents/MenuButtonLegacy/MenuButtonLegacyTest.tsx +++ b/apps/fluent-tester/src/TestComponents/MenuButtonLegacy/MenuButtonLegacyTest.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; + +import { CustomizedMenuButton } from './CustomizedMenuButtonTest'; +import { MenuButtonLegacyE2ETest } from './MenuButtonLegacyE2ETest'; +import { NestedMenuButton } from './NestedMenuButtonTest'; +import { StandardMenuButton } from './StandardMenuButtonTest'; import { MENU_BUTTON_TESTPAGE } from '../../../../E2E/src/MenuButtonLegacy/consts'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; -import { StandardMenuButton } from './StandardMenuButtonTest'; -import { NestedMenuButton } from './NestedMenuButtonTest'; -import { CustomizedMenuButton } from './CustomizedMenuButtonTest'; -import { MenuButtonLegacyE2ETest } from './MenuButtonLegacyE2ETest'; const menuButtonSections: TestSection[] = [ { diff --git a/apps/fluent-tester/src/TestComponents/MenuButtonLegacy/NestedMenuButtonTest.tsx b/apps/fluent-tester/src/TestComponents/MenuButtonLegacy/NestedMenuButtonTest.tsx index 8f490d2c06..4e8dba0c19 100644 --- a/apps/fluent-tester/src/TestComponents/MenuButtonLegacy/NestedMenuButtonTest.tsx +++ b/apps/fluent-tester/src/TestComponents/MenuButtonLegacy/NestedMenuButtonTest.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; import { Text, View, Switch } from 'react-native'; + import { Separator, MenuButton } from '@fluentui/react-native'; -import { menuItems, iconProps } from './testData'; + import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonLegacyTestStyles'; +import { menuItems, iconProps } from './testData'; import { testImage } from '../Common/iconExamples'; export const NestedMenuButton: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/TestComponents/MenuButtonLegacy/StandardMenuButtonTest.tsx b/apps/fluent-tester/src/TestComponents/MenuButtonLegacy/StandardMenuButtonTest.tsx index 2d2f2c00c6..b07a3c4de0 100644 --- a/apps/fluent-tester/src/TestComponents/MenuButtonLegacy/StandardMenuButtonTest.tsx +++ b/apps/fluent-tester/src/TestComponents/MenuButtonLegacy/StandardMenuButtonTest.tsx @@ -1,10 +1,12 @@ import * as React from 'react'; +import { Text, View, Switch, Platform } from 'react-native'; + import type { ContextualMenuProps } from '@fluentui/react-native'; import { Separator, MenuButton } from '@fluentui/react-native'; -import { Text, View, Switch, Platform } from 'react-native'; -import { menuItems, iconProps } from './testData'; -import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonLegacyTestStyles'; import type { IconSourcesType } from '@fluentui-react-native/icon'; + +import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonLegacyTestStyles'; +import { menuItems, iconProps } from './testData'; import { testImage } from '../Common/iconExamples'; export const StandardMenuButton: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/TestComponents/MenuButtonLegacy/testData.ts b/apps/fluent-tester/src/TestComponents/MenuButtonLegacy/testData.ts index 68f89b900f..a21901857f 100644 --- a/apps/fluent-tester/src/TestComponents/MenuButtonLegacy/testData.ts +++ b/apps/fluent-tester/src/TestComponents/MenuButtonLegacy/testData.ts @@ -1,5 +1,6 @@ /* eslint-disable @typescript-eslint/no-var-requires */ import type { MenuButtonItemProps } from '@fluentui/react-native'; + import { MENU_ITEM_1_COMPONENT } from '../../../../E2E/src/MenuButtonLegacy/consts'; import { svgProps, testImage } from '../Common/iconExamples'; diff --git a/apps/fluent-tester/src/TestComponents/MenuButtonV1/CustomizedMenuButtonTest.tsx b/apps/fluent-tester/src/TestComponents/MenuButtonV1/CustomizedMenuButtonTest.tsx index ed899fbaff..4a658a9cf4 100644 --- a/apps/fluent-tester/src/TestComponents/MenuButtonV1/CustomizedMenuButtonTest.tsx +++ b/apps/fluent-tester/src/TestComponents/MenuButtonV1/CustomizedMenuButtonTest.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; import { Text, View } from 'react-native'; + import { MenuButton } from '@fluentui/react-native'; -import { menuItems } from './testData'; + import { viewWrapperStyle, columnStyle, rowStyle } from './MenuButtonV1TestStyles'; +import { menuItems } from './testData'; const StyledMenuButton = MenuButton.customize({ button: { diff --git a/apps/fluent-tester/src/TestComponents/MenuButtonV1/MenuButtonV1E2ETest.tsx b/apps/fluent-tester/src/TestComponents/MenuButtonV1/MenuButtonV1E2ETest.tsx index 9ce59f59e2..40a82c50d2 100644 --- a/apps/fluent-tester/src/TestComponents/MenuButtonV1/MenuButtonV1E2ETest.tsx +++ b/apps/fluent-tester/src/TestComponents/MenuButtonV1/MenuButtonV1E2ETest.tsx @@ -1,9 +1,11 @@ import * as React from 'react'; -import { MenuButton } from '@fluentui-react-native/experimental-menu-button'; -import type { ContextualMenuProps } from '@fluentui/react-native'; import { Text, View } from 'react-native'; -import { menuItems } from './testData'; + +import type { ContextualMenuProps } from '@fluentui/react-native'; +import { MenuButton } from '@fluentui-react-native/experimental-menu-button'; + import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonV1TestStyles'; +import { menuItems } from './testData'; import { MENUBUTTONV1_TEST_COMPONENT, MENUBUTTONV1_ACCESSIBILITY_LABEL, diff --git a/apps/fluent-tester/src/TestComponents/MenuButtonV1/MenuButtonV1Test.tsx b/apps/fluent-tester/src/TestComponents/MenuButtonV1/MenuButtonV1Test.tsx index eae0aecab3..930b9758ce 100644 --- a/apps/fluent-tester/src/TestComponents/MenuButtonV1/MenuButtonV1Test.tsx +++ b/apps/fluent-tester/src/TestComponents/MenuButtonV1/MenuButtonV1Test.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; + +import { CustomizedMenuButton } from './CustomizedMenuButtonTest'; +import { MenuButtonV1E2ETest } from './MenuButtonV1E2ETest'; +import { NestedMenuButton } from './NestedMenuButtonTest'; +import { StandardMenuButton } from './StandardMenuButtonTest'; import { MENUBUTTONV1_TESTPAGE } from '../../../../E2E/src/MenuButtonV1/consts'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; -import { StandardMenuButton } from './StandardMenuButtonTest'; -import { NestedMenuButton } from './NestedMenuButtonTest'; -import { MenuButtonV1E2ETest } from './MenuButtonV1E2ETest'; -import { CustomizedMenuButton } from './CustomizedMenuButtonTest'; const menuButtonSections: TestSection[] = [ { diff --git a/apps/fluent-tester/src/TestComponents/MenuButtonV1/NestedMenuButtonTest.tsx b/apps/fluent-tester/src/TestComponents/MenuButtonV1/NestedMenuButtonTest.tsx index 1620de74de..a8c7420008 100644 --- a/apps/fluent-tester/src/TestComponents/MenuButtonV1/NestedMenuButtonTest.tsx +++ b/apps/fluent-tester/src/TestComponents/MenuButtonV1/NestedMenuButtonTest.tsx @@ -1,9 +1,11 @@ import * as React from 'react'; import { Text, View, Switch } from 'react-native'; + import { Separator } from '@fluentui/react-native'; -import { menuItems, iconProps } from './testData'; -import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonV1TestStyles'; import { MenuButton } from '@fluentui-react-native/experimental-menu-button'; + +import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonV1TestStyles'; +import { menuItems, iconProps } from './testData'; import { testImage } from '../Common/iconExamples'; export const NestedMenuButton: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/TestComponents/MenuButtonV1/StandardMenuButtonTest.tsx b/apps/fluent-tester/src/TestComponents/MenuButtonV1/StandardMenuButtonTest.tsx index dd691d3426..43c779dc1e 100644 --- a/apps/fluent-tester/src/TestComponents/MenuButtonV1/StandardMenuButtonTest.tsx +++ b/apps/fluent-tester/src/TestComponents/MenuButtonV1/StandardMenuButtonTest.tsx @@ -1,11 +1,13 @@ import * as React from 'react'; +import { Text, View, Switch, Platform } from 'react-native'; + import type { ContextualMenuProps } from '@fluentui/react-native'; import { Separator } from '@fluentui/react-native'; -import { Text, View, Switch, Platform } from 'react-native'; -import { menuItems, iconProps } from './testData'; -import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonV1TestStyles'; -import type { IconSourcesType } from '@fluentui-react-native/icon'; import { MenuButton } from '@fluentui-react-native/experimental-menu-button'; +import type { IconSourcesType } from '@fluentui-react-native/icon'; + +import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonV1TestStyles'; +import { menuItems, iconProps } from './testData'; import { testImage } from '../Common/iconExamples'; export const StandardMenuButton: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/TestComponents/MenuButtonV1/testData.ts b/apps/fluent-tester/src/TestComponents/MenuButtonV1/testData.ts index 6fbfe91aab..b977ef4064 100644 --- a/apps/fluent-tester/src/TestComponents/MenuButtonV1/testData.ts +++ b/apps/fluent-tester/src/TestComponents/MenuButtonV1/testData.ts @@ -1,5 +1,6 @@ /* eslint-disable @typescript-eslint/no-var-requires */ import type { MenuButtonItemProps } from '@fluentui/react-native'; + import { testImage, svgProps } from '../Common/iconExamples'; export const menuItems: MenuButtonItemProps[] = [ diff --git a/apps/fluent-tester/src/TestComponents/NativeDatePicker/NativeDatePickerTest.tsx b/apps/fluent-tester/src/TestComponents/NativeDatePicker/NativeDatePickerTest.tsx index 0b30c11d5f..45afa8f23e 100644 --- a/apps/fluent-tester/src/TestComponents/NativeDatePicker/NativeDatePickerTest.tsx +++ b/apps/fluent-tester/src/TestComponents/NativeDatePicker/NativeDatePickerTest.tsx @@ -1,13 +1,15 @@ +import * as React from 'react'; +import { Switch, View } from 'react-native'; + +import { Text } from '@fluentui/react-native'; import { Button } from '@fluentui-react-native/button'; import { NativeDatePicker } from '@fluentui-react-native/experimental-native-date-picker'; +import { Stack } from '@fluentui-react-native/stack'; + import { NATIVEDATEPICKER_TESTPAGE } from './consts'; +import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles'; import type { PlatformStatus, TestSection } from '../Test'; import { Test } from '../Test'; -import * as React from 'react'; -import { Stack } from '@fluentui-react-native/stack'; -import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles'; -import { Switch, View } from 'react-native'; -import { Text } from '@fluentui/react-native'; const NativeDatePickerMainTest: React.FunctionComponent = () => { const [startDate, setStartDate] = React.useState(new Date()); diff --git a/apps/fluent-tester/src/TestComponents/Notification/NotificationTest.tsx b/apps/fluent-tester/src/TestComponents/Notification/NotificationTest.tsx index 956db6e134..2ad9a980ee 100644 --- a/apps/fluent-tester/src/TestComponents/Notification/NotificationTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Notification/NotificationTest.tsx @@ -1,15 +1,17 @@ import * as React from 'react'; +import { Animated, StyleSheet, Switch, TextInput, View } from 'react-native'; + +import { ButtonV1 as Button } from '@fluentui-react-native/button'; +import { Text } from '@fluentui-react-native/experimental-text'; +import type { SvgIconProps } from '@fluentui-react-native/icon'; import type { NotificationVariant } from '@fluentui-react-native/notification'; import { Notification, NotificationVariants } from '@fluentui-react-native/notification'; -import type { TestSection, PlatformStatus } from '../Test'; -import { Test } from '../Test'; -import { Animated, StyleSheet, Switch, TextInput, View } from 'react-native'; -import { Text } from '@fluentui-react-native/experimental-text'; -import { ButtonV1 as Button } from '@fluentui-react-native/button'; + +import PlayButton from './assets/play_button.svg'; import { StyledPicker } from '../Common/StyledPicker'; import { commonTestStyles as commonStyles } from '../Common/styles'; -import type { SvgIconProps } from '@fluentui-react-native/icon'; -import PlayButton from './assets/play_button.svg'; +import type { TestSection, PlatformStatus } from '../Test'; +import { Test } from '../Test'; const svgProps: SvgIconProps = { src: PlayButton, diff --git a/apps/fluent-tester/src/TestComponents/Persona/CustomizeUsage.tsx b/apps/fluent-tester/src/TestComponents/Persona/CustomizeUsage.tsx index 39145c9789..5749d8d5f1 100644 --- a/apps/fluent-tester/src/TestComponents/Persona/CustomizeUsage.tsx +++ b/apps/fluent-tester/src/TestComponents/Persona/CustomizeUsage.tsx @@ -1,13 +1,15 @@ import * as React from 'react'; import { View, Text, Switch, TextInput } from 'react-native'; + import { Persona } from '@fluentui/react-native'; -import { michaelImageUrl } from './styles'; -import { commonTestStyles as commonStyles } from '../Common/styles'; import type { Theme } from '@fluentui-react-native/theme-types'; import { useTheme } from '@fluentui-react-native/theme-types'; -import { Slider } from '../Common/Slider'; import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet'; +import { michaelImageUrl } from './styles'; +import { Slider } from '../Common/Slider'; +import { commonTestStyles as commonStyles } from '../Common/styles'; + const getThemedStyles = themedStyleSheet((t: Theme) => { return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } }; }); diff --git a/apps/fluent-tester/src/TestComponents/Persona/PersonaTest.tsx b/apps/fluent-tester/src/TestComponents/Persona/PersonaTest.tsx index 0ad3ee6be4..9d4ecf847a 100644 --- a/apps/fluent-tester/src/TestComponents/Persona/PersonaTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Persona/PersonaTest.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; -import { StandardUsage } from './StandardUsage'; + import { CustomizeUsage } from './CustomizeUsage'; +import { StandardUsage } from './StandardUsage'; import { PERSONA_TESTPAGE } from '../../../../E2E/src/Persona/consts'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; diff --git a/apps/fluent-tester/src/TestComponents/Persona/StandardUsage.tsx b/apps/fluent-tester/src/TestComponents/Persona/StandardUsage.tsx index b5c0fc8716..bbeb992ffd 100644 --- a/apps/fluent-tester/src/TestComponents/Persona/StandardUsage.tsx +++ b/apps/fluent-tester/src/TestComponents/Persona/StandardUsage.tsx @@ -1,11 +1,13 @@ import * as React from 'react'; +import { View, Text, Switch } from 'react-native'; + import type { PersonaSize } from '@fluentui/react-native'; import { Persona } from '@fluentui/react-native'; + import { satyaImageUrl } from './styles'; -import { commonTestStyles as commonStyles } from '../Common/styles'; -import { View, Text, Switch } from 'react-native'; -import { undefinedText } from '../PersonaCoin/styles'; import { MenuPicker } from '../Common/MenuPicker'; +import { commonTestStyles as commonStyles } from '../Common/styles'; +import { undefinedText } from '../PersonaCoin/styles'; type WithUndefined = T | typeof undefinedText; diff --git a/apps/fluent-tester/src/TestComponents/PersonaCoin/CustomizeUsage.mobile.tsx b/apps/fluent-tester/src/TestComponents/PersonaCoin/CustomizeUsage.mobile.tsx index b8dde12d75..d239a4c71c 100644 --- a/apps/fluent-tester/src/TestComponents/PersonaCoin/CustomizeUsage.mobile.tsx +++ b/apps/fluent-tester/src/TestComponents/PersonaCoin/CustomizeUsage.mobile.tsx @@ -1,11 +1,13 @@ import * as React from 'react'; -import { PersonaCoin } from '@fluentui/react-native'; import { Switch, View, Text, TextInput, StyleSheet } from 'react-native'; + +import { PersonaCoin } from '@fluentui/react-native'; +import { useTheme } from '@fluentui-react-native/theme-types'; import Slider from '@react-native-community/slider'; + import type { undefinedText } from './styles'; import { steveBallmerPhotoUrl } from './styles'; import { commonTestStyles as commonStyles } from '../Common/styles'; -import { useTheme } from '@fluentui-react-native/theme-types'; type WithUndefined = T | typeof undefinedText; diff --git a/apps/fluent-tester/src/TestComponents/PersonaCoin/CustomizeUsage.tsx b/apps/fluent-tester/src/TestComponents/PersonaCoin/CustomizeUsage.tsx index 7074884888..d0f0293d80 100644 --- a/apps/fluent-tester/src/TestComponents/PersonaCoin/CustomizeUsage.tsx +++ b/apps/fluent-tester/src/TestComponents/PersonaCoin/CustomizeUsage.tsx @@ -1,15 +1,17 @@ import * as React from 'react'; +import { Switch, View, Text, TextInput } from 'react-native'; + import type { IconAlignment } from '@fluentui/react-native'; import { PersonaCoin } from '@fluentui/react-native'; -import { Switch, View, Text, TextInput } from 'react-native'; -import { Slider } from '../Common/Slider'; -import { steveBallmerPhotoUrl } from './styles'; import type { Theme } from '@fluentui-react-native/theme-types'; import { useTheme } from '@fluentui-react-native/theme-types'; -import { AlignmentPicker } from '../Common/AlignmentPicker'; -import { commonTestStyles as commonStyles } from '../Common/styles'; import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet'; +import { steveBallmerPhotoUrl } from './styles'; +import { AlignmentPicker } from '../Common/AlignmentPicker'; +import { Slider } from '../Common/Slider'; +import { commonTestStyles as commonStyles } from '../Common/styles'; + const getThemedStyles = themedStyleSheet((t: Theme) => { return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } }; }); diff --git a/apps/fluent-tester/src/TestComponents/PersonaCoin/PersonaCoinTest.tsx b/apps/fluent-tester/src/TestComponents/PersonaCoin/PersonaCoinTest.tsx index b5cd1a8f4b..59475d2bbf 100644 --- a/apps/fluent-tester/src/TestComponents/PersonaCoin/PersonaCoinTest.tsx +++ b/apps/fluent-tester/src/TestComponents/PersonaCoin/PersonaCoinTest.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; -import { StandardUsage } from './StandardUsage'; + import { CustomizeUsage } from './CustomizeUsage'; +import { StandardUsage } from './StandardUsage'; import { PERSONACOIN_TESTPAGE } from '../../../../E2E/src/PersonaCoin/consts'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; diff --git a/apps/fluent-tester/src/TestComponents/PersonaCoin/StandardUsage.tsx b/apps/fluent-tester/src/TestComponents/PersonaCoin/StandardUsage.tsx index 999d3abdb1..d01a367c8c 100644 --- a/apps/fluent-tester/src/TestComponents/PersonaCoin/StandardUsage.tsx +++ b/apps/fluent-tester/src/TestComponents/PersonaCoin/StandardUsage.tsx @@ -1,13 +1,15 @@ import * as React from 'react'; -import type { PersonaSize, PersonaCoinFluentColor, PersonaPresence } from '@fluentui/react-native'; -import { PersonaCoin } from '@fluentui/react-native'; -import { StyledPicker } from '../Common/StyledPicker'; import type { ColorValue } from 'react-native'; import { Switch, View, Text } from 'react-native'; -import { satyaPhotoUrl, undefinedText } from './styles'; -import { commonTestStyles as commonStyles } from '../Common/styles'; + +import type { PersonaSize, PersonaCoinFluentColor, PersonaPresence } from '@fluentui/react-native'; +import { PersonaCoin } from '@fluentui/react-native'; import { useTheme } from '@fluentui-react-native/theme-types'; +import { satyaPhotoUrl, undefinedText } from './styles'; +import { StyledPicker } from '../Common/StyledPicker'; +import { commonTestStyles as commonStyles } from '../Common/styles'; + type WithUndefined = T | typeof undefinedText; const allSizes: WithUndefined[] = [ diff --git a/apps/fluent-tester/src/TestComponents/Pressable/PressableTest.tsx b/apps/fluent-tester/src/TestComponents/Pressable/PressableTest.tsx index ae4706689a..33f8ac0e1f 100644 --- a/apps/fluent-tester/src/TestComponents/Pressable/PressableTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Pressable/PressableTest.tsx @@ -1,12 +1,14 @@ import * as React from 'react'; -import type { IPressableState } from '@fluentui-react-native/interactive-hooks'; -import { useFocusState, useHoverState, usePressState } from '@fluentui-react-native/interactive-hooks'; -import { Pressable } from '@fluentui/react-native'; -import { Stack } from '@fluentui-react-native/stack'; -import { Square } from '../Common/Square'; import type { GestureResponderEvent, ViewProps, ViewStyle } from 'react-native'; import { Alert, StyleSheet, View, Text } from 'react-native'; + +import { Pressable } from '@fluentui/react-native'; +import { useFocusState, useHoverState, usePressState } from '@fluentui-react-native/interactive-hooks'; +import type { IPressableState } from '@fluentui-react-native/interactive-hooks'; +import { Stack } from '@fluentui-react-native/stack'; + import { PRESSABLE_TESTPAGE } from '../../../../E2E/src/Pressable/consts'; +import { Square } from '../Common/Square'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; diff --git a/apps/fluent-tester/src/TestComponents/RadioGroupLegacy/RadioGroupLegacyE2ETest.tsx b/apps/fluent-tester/src/TestComponents/RadioGroupLegacy/RadioGroupLegacyE2ETest.tsx index d88ed57d2e..78c6185813 100644 --- a/apps/fluent-tester/src/TestComponents/RadioGroupLegacy/RadioGroupLegacyE2ETest.tsx +++ b/apps/fluent-tester/src/TestComponents/RadioGroupLegacy/RadioGroupLegacyE2ETest.tsx @@ -1,6 +1,9 @@ import * as React from 'react'; import { View } from 'react-native'; + import { RadioButton, RadioGroup } from '@fluentui/react-native'; +import { Stack } from '@fluentui-react-native/stack'; + import { RADIOGROUP_TEST_COMPONENT, RADIOGROUP_NO_A11Y_LABEL_COMPONENT, @@ -13,7 +16,6 @@ import { FIRST_RADIO_BUTTON_ACCESSIBILITY_LABEL, SECOND_RADIO_BUTTON_LABEL, } from '../../../../E2E/src/RadioGroupLegacy/consts'; -import { Stack } from '@fluentui-react-native/stack'; import { stackStyle } from '../Common/styles'; import { testProps } from '../Common/TestProps'; diff --git a/apps/fluent-tester/src/TestComponents/RadioGroupLegacy/RadioGroupLegacyTest.tsx b/apps/fluent-tester/src/TestComponents/RadioGroupLegacy/RadioGroupLegacyTest.tsx index 40c9b20b9a..51b7ec3bea 100644 --- a/apps/fluent-tester/src/TestComponents/RadioGroupLegacy/RadioGroupLegacyTest.tsx +++ b/apps/fluent-tester/src/TestComponents/RadioGroupLegacy/RadioGroupLegacyTest.tsx @@ -1,10 +1,12 @@ import * as React from 'react'; import { View } from 'react-native'; + import { RadioButton, RadioGroup, Separator } from '@fluentui/react-native'; + +import { RadioGroupLegacyE2ETest } from './RadioGroupLegacyE2ETest'; import { RADIOGROUP_TESTPAGE } from '../../../../E2E/src/RadioGroupLegacy/consts'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; -import { RadioGroupLegacyE2ETest } from './RadioGroupLegacyE2ETest'; const BasicRadioGroup: React.FunctionComponent = () => { // Client's example onChange function diff --git a/apps/fluent-tester/src/TestComponents/RadioGroupV1/CustomizedRadioGroup.tsx b/apps/fluent-tester/src/TestComponents/RadioGroupV1/CustomizedRadioGroup.tsx index 00840a1166..c0e32e88ef 100644 --- a/apps/fluent-tester/src/TestComponents/RadioGroupV1/CustomizedRadioGroup.tsx +++ b/apps/fluent-tester/src/TestComponents/RadioGroupV1/CustomizedRadioGroup.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; import { View, TextInput, Text, StyleSheet } from 'react-native'; + import type { RadioGroupTokens, RadioTokens } from '@fluentui-react-native/experimental-radio-group'; import { RadioGroup, Radio } from '@fluentui-react-native/experimental-radio-group'; + import { commonTestStyles as commonStyles } from '../Common/styles'; const styles = StyleSheet.create({ diff --git a/apps/fluent-tester/src/TestComponents/RadioGroupV1/DefaultRadioGroup.android.tsx b/apps/fluent-tester/src/TestComponents/RadioGroupV1/DefaultRadioGroup.android.tsx index 391a015be9..7249099a5c 100644 --- a/apps/fluent-tester/src/TestComponents/RadioGroupV1/DefaultRadioGroup.android.tsx +++ b/apps/fluent-tester/src/TestComponents/RadioGroupV1/DefaultRadioGroup.android.tsx @@ -1,7 +1,8 @@ -import { RadioGroup, Radio } from '@fluentui-react-native/experimental-radio-group'; import * as React from 'react'; import { View } from 'react-native'; +import { RadioGroup, Radio } from '@fluentui-react-native/experimental-radio-group'; + export const DefaultRadioGroup: React.FunctionComponent = () => { // Client's example onChange function const onChange = React.useCallback((key: string) => { diff --git a/apps/fluent-tester/src/TestComponents/RadioGroupV1/DefaultRadioGroup.tsx b/apps/fluent-tester/src/TestComponents/RadioGroupV1/DefaultRadioGroup.tsx index ed256f6716..e54830682b 100644 --- a/apps/fluent-tester/src/TestComponents/RadioGroupV1/DefaultRadioGroup.tsx +++ b/apps/fluent-tester/src/TestComponents/RadioGroupV1/DefaultRadioGroup.tsx @@ -1,8 +1,9 @@ -import { RadioGroup, Radio } from '@fluentui-react-native/experimental-radio-group'; -import { Separator } from '@fluentui/react-native'; import * as React from 'react'; import { View } from 'react-native'; +import { Separator } from '@fluentui/react-native'; +import { RadioGroup, Radio } from '@fluentui-react-native/experimental-radio-group'; + export const DefaultRadioGroup: React.FunctionComponent = () => { // Client's example onChange function const onChange = React.useCallback((key: string) => { diff --git a/apps/fluent-tester/src/TestComponents/RadioGroupV1/DisabledRadioGroup.tsx b/apps/fluent-tester/src/TestComponents/RadioGroupV1/DisabledRadioGroup.tsx index 678cf1fdd8..3caa5d3474 100644 --- a/apps/fluent-tester/src/TestComponents/RadioGroupV1/DisabledRadioGroup.tsx +++ b/apps/fluent-tester/src/TestComponents/RadioGroupV1/DisabledRadioGroup.tsx @@ -1,8 +1,9 @@ -import { RadioGroup, Radio } from '@fluentui-react-native/experimental-radio-group'; -import { Separator } from '@fluentui/react-native'; import * as React from 'react'; import { View } from 'react-native'; +import { Separator } from '@fluentui/react-native'; +import { RadioGroup, Radio } from '@fluentui-react-native/experimental-radio-group'; + export const DisabledRadioGroup: React.FunctionComponent = () => { // Client's example onChange function const onChange = React.useCallback((key: string) => { diff --git a/apps/fluent-tester/src/TestComponents/RadioGroupV1/HorizontalRadioGroup.tsx b/apps/fluent-tester/src/TestComponents/RadioGroupV1/HorizontalRadioGroup.tsx index e83372f152..ba9c1f91b4 100644 --- a/apps/fluent-tester/src/TestComponents/RadioGroupV1/HorizontalRadioGroup.tsx +++ b/apps/fluent-tester/src/TestComponents/RadioGroupV1/HorizontalRadioGroup.tsx @@ -1,8 +1,9 @@ -import { RadioGroup, Radio } from '@fluentui-react-native/experimental-radio-group'; -import { Separator } from '@fluentui/react-native'; import * as React from 'react'; import { View } from 'react-native'; +import { Separator } from '@fluentui/react-native'; +import { RadioGroup, Radio } from '@fluentui-react-native/experimental-radio-group'; + export const HorizontalRadioGroup: React.FunctionComponent = () => { // Client's example onChange function const onChange = React.useCallback((key: string) => { diff --git a/apps/fluent-tester/src/TestComponents/RadioGroupV1/RadioGroupV1E2ETest.tsx b/apps/fluent-tester/src/TestComponents/RadioGroupV1/RadioGroupV1E2ETest.tsx index c97969860c..5a8e27ae93 100644 --- a/apps/fluent-tester/src/TestComponents/RadioGroupV1/RadioGroupV1E2ETest.tsx +++ b/apps/fluent-tester/src/TestComponents/RadioGroupV1/RadioGroupV1E2ETest.tsx @@ -1,6 +1,9 @@ import * as React from 'react'; import { View } from 'react-native'; + import { RadioGroup, Radio } from '@fluentui-react-native/experimental-radio-group'; +import { Stack } from '@fluentui-react-native/stack'; + import { RADIOGROUPV1_TEST_COMPONENT, RADIOGROUPV1_NO_A11Y_LABEL_COMPONENT, @@ -14,7 +17,6 @@ import { FIRST_RADIO_ACCESSIBILITY_LABEL, SECOND_RADIO_LABEL, } from '../../../../E2E/src/RadioGroupV1/consts'; -import { Stack } from '@fluentui-react-native/stack'; import { stackStyle } from '../Common/styles'; import { testProps } from '../Common/TestProps'; diff --git a/apps/fluent-tester/src/TestComponents/RadioGroupV1/RadioGroupV1Test.tsx b/apps/fluent-tester/src/TestComponents/RadioGroupV1/RadioGroupV1Test.tsx index 9b17a720d7..f1333b7fde 100644 --- a/apps/fluent-tester/src/TestComponents/RadioGroupV1/RadioGroupV1Test.tsx +++ b/apps/fluent-tester/src/TestComponents/RadioGroupV1/RadioGroupV1Test.tsx @@ -1,15 +1,16 @@ import * as React from 'react'; -import { RADIOGROUPV1_TESTPAGE } from '../../../../E2E/src/RadioGroupV1/consts'; -import { DefaultRadioGroup } from './DefaultRadioGroup'; -import { RequiredRadioGroup } from './RequiredRadioGroup'; -import { DisabledRadioGroup } from './DisabledRadioGroup'; -import { SubtextRadioGroup } from './SubtextRadioGroup'; -import { HorizontalRadioGroup } from './HorizontalRadioGroup'; +import { Platform } from 'react-native'; + import { CustomizedRadioGroup } from './CustomizedRadioGroup'; +import { DefaultRadioGroup } from './DefaultRadioGroup'; +import { DisabledRadioGroup } from './DisabledRadioGroup'; +import { HorizontalRadioGroup } from './HorizontalRadioGroup'; import { RadioGroupV1E2ETest } from './RadioGroupV1E2ETest'; +import { RequiredRadioGroup } from './RequiredRadioGroup'; +import { SubtextRadioGroup } from './SubtextRadioGroup'; +import { RADIOGROUPV1_TESTPAGE } from '../../../../E2E/src/RadioGroupV1/consts'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; -import { Platform } from 'react-native'; const radioGroupV1Sections: TestSection[] = [ { diff --git a/apps/fluent-tester/src/TestComponents/RadioGroupV1/RequiredRadioGroup.tsx b/apps/fluent-tester/src/TestComponents/RadioGroupV1/RequiredRadioGroup.tsx index 1d82e0d9e6..e2a40dfd74 100644 --- a/apps/fluent-tester/src/TestComponents/RadioGroupV1/RequiredRadioGroup.tsx +++ b/apps/fluent-tester/src/TestComponents/RadioGroupV1/RequiredRadioGroup.tsx @@ -1,7 +1,8 @@ -import { RadioGroup, Radio } from '@fluentui-react-native/experimental-radio-group'; import * as React from 'react'; import { View } from 'react-native'; +import { RadioGroup, Radio } from '@fluentui-react-native/experimental-radio-group'; + export const RequiredRadioGroup: React.FunctionComponent = () => { // Client's example onChange function const onChange = React.useCallback((key: string) => { diff --git a/apps/fluent-tester/src/TestComponents/RadioGroupV1/SubtextRadioGroup.tsx b/apps/fluent-tester/src/TestComponents/RadioGroupV1/SubtextRadioGroup.tsx index 7117ed1ab1..d1041ba76f 100644 --- a/apps/fluent-tester/src/TestComponents/RadioGroupV1/SubtextRadioGroup.tsx +++ b/apps/fluent-tester/src/TestComponents/RadioGroupV1/SubtextRadioGroup.tsx @@ -1,7 +1,8 @@ -import { RadioGroup, Radio } from '@fluentui-react-native/experimental-radio-group'; import * as React from 'react'; import { View } from 'react-native'; +import { RadioGroup, Radio } from '@fluentui-react-native/experimental-radio-group'; + export const SubtextRadioGroup: React.FunctionComponent = () => { // Client's example onChange function const onChange = React.useCallback((key: string) => { diff --git a/apps/fluent-tester/src/TestComponents/Separator/SeparatorTest.mobile.tsx b/apps/fluent-tester/src/TestComponents/Separator/SeparatorTest.mobile.tsx index 8392d71267..2ddd026da1 100644 --- a/apps/fluent-tester/src/TestComponents/Separator/SeparatorTest.mobile.tsx +++ b/apps/fluent-tester/src/TestComponents/Separator/SeparatorTest.mobile.tsx @@ -1,9 +1,11 @@ import * as React from 'react'; -import { Separator } from '@fluentui-react-native/separator'; + import { Text } from '@fluentui-react-native/experimental-text'; -import { commonTestStyles, mobileStyles } from '../Common/styles'; +import { Separator } from '@fluentui-react-native/separator'; import { Stack } from '@fluentui-react-native/stack'; + import { SEPARATOR_TESTPAGE } from '../../../../E2E/src/Separator/consts'; +import { commonTestStyles, mobileStyles } from '../Common/styles'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; diff --git a/apps/fluent-tester/src/TestComponents/Separator/SeparatorTest.tsx b/apps/fluent-tester/src/TestComponents/Separator/SeparatorTest.tsx index c228e5207f..f20475702c 100644 --- a/apps/fluent-tester/src/TestComponents/Separator/SeparatorTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Separator/SeparatorTest.tsx @@ -1,10 +1,12 @@ import * as React from 'react'; -import { Separator } from '@fluentui-react-native/separator'; + import { ButtonV1 } from '@fluentui-react-native/button'; import { Text } from '@fluentui-react-native/experimental-text'; -import { stackStyle, separatorStackStyle } from '../Common/styles'; +import { Separator } from '@fluentui-react-native/separator'; import { Stack } from '@fluentui-react-native/stack'; + import { SEPARATOR_TESTPAGE } from '../../../../E2E/src/Separator/consts'; +import { stackStyle, separatorStackStyle } from '../Common/styles'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; diff --git a/apps/fluent-tester/src/TestComponents/Shadow/ShadowButtonTestSection.tsx b/apps/fluent-tester/src/TestComponents/Shadow/ShadowButtonTestSection.tsx index 086f4dc7b3..4707a57602 100644 --- a/apps/fluent-tester/src/TestComponents/Shadow/ShadowButtonTestSection.tsx +++ b/apps/fluent-tester/src/TestComponents/Shadow/ShadowButtonTestSection.tsx @@ -1,10 +1,12 @@ import * as React from 'react'; import { Platform, View } from 'react-native'; + import { FAB, Text } from '@fluentui/react-native'; -import { commonTestStyles, stackStyle } from '../Common/styles'; -import { shadowTestPageStyles } from './ShadowTestPageStyles'; import { useFluentTheme } from '@fluentui-react-native/framework'; + +import { shadowTestPageStyles } from './ShadowTestPageStyles'; import { iconProps } from '../Common/iconExamples'; +import { commonTestStyles, stackStyle } from '../Common/styles'; const CustomFABNoShadow = FAB.customize({ shadowToken: undefined }); const CustomFABShadow64 = FAB.customize({ diff --git a/apps/fluent-tester/src/TestComponents/Shadow/ShadowDepthTestSection.tsx b/apps/fluent-tester/src/TestComponents/Shadow/ShadowDepthTestSection.tsx index 4ea7ba6fd3..2434ce0d3a 100644 --- a/apps/fluent-tester/src/TestComponents/Shadow/ShadowDepthTestSection.tsx +++ b/apps/fluent-tester/src/TestComponents/Shadow/ShadowDepthTestSection.tsx @@ -1,11 +1,13 @@ import * as React from 'react'; import { View } from 'react-native'; + import { Text } from '@fluentui/react-native'; import { Shadow, getShadowTokenStyleSet } from '@fluentui-react-native/experimental-shadow'; +import { mergeStyles, useFluentTheme } from '@fluentui-react-native/framework'; import type { ShadowToken, Theme } from '@fluentui-react-native/theme-types'; import { useTheme } from '@fluentui-react-native/theme-types'; -import { mergeStyles, useFluentTheme } from '@fluentui-react-native/framework'; import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet'; + import { shadowTestPageStyles } from './ShadowTestPageStyles'; const getThemedStyles = themedStyleSheet((t: Theme) => { diff --git a/apps/fluent-tester/src/TestComponents/Shadow/ShadowTest.tsx b/apps/fluent-tester/src/TestComponents/Shadow/ShadowTest.tsx index fb36c6f6fa..13fd38726f 100644 --- a/apps/fluent-tester/src/TestComponents/Shadow/ShadowTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Shadow/ShadowTest.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; + +import { ShadowButtonTestSection } from './ShadowButtonTestSection'; +import { ShadowDepthTestSection } from './ShadowDepthTestSection'; +import { ShadowWithDifferentPropsTestSection } from './ShadowWithDifferentPropsTestSection'; +import { SHADOW_TESTPAGE } from '../../../../E2E/src/Shadow/consts'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; -import { SHADOW_TESTPAGE } from '../../../../E2E/src/Shadow/consts'; -import { ShadowDepthTestSection } from './ShadowDepthTestSection'; -import { ShadowButtonTestSection } from './ShadowButtonTestSection'; -import { ShadowWithDifferentPropsTestSection } from './ShadowWithDifferentPropsTestSection'; const shadowSections: TestSection[] = [ { diff --git a/apps/fluent-tester/src/TestComponents/Shadow/ShadowTestPageStyles.tsx b/apps/fluent-tester/src/TestComponents/Shadow/ShadowTestPageStyles.tsx index f6e29b36f8..3c14b8bf45 100644 --- a/apps/fluent-tester/src/TestComponents/Shadow/ShadowTestPageStyles.tsx +++ b/apps/fluent-tester/src/TestComponents/Shadow/ShadowTestPageStyles.tsx @@ -1,4 +1,5 @@ import { Platform } from 'react-native'; + import type { Theme } from '@fluentui-react-native/theme-types'; import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet'; diff --git a/apps/fluent-tester/src/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.tsx b/apps/fluent-tester/src/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.tsx index 1d448c3dbd..15863925f6 100644 --- a/apps/fluent-tester/src/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.tsx +++ b/apps/fluent-tester/src/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.tsx @@ -1,11 +1,13 @@ import * as React from 'react'; +import { View } from 'react-native'; + import { Text } from '@fluentui/react-native'; import { Shadow } from '@fluentui-react-native/experimental-shadow'; import type { Theme } from '@fluentui-react-native/framework'; import { useFluentTheme } from '@fluentui-react-native/framework'; -import { View } from 'react-native'; -import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet'; import { mergeStyles } from '@fluentui-react-native/merge-props'; +import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet'; + import { shadowTestPageStyles } from './ShadowTestPageStyles'; const getThemedStyles = themedStyleSheet((t: Theme) => { diff --git a/apps/fluent-tester/src/TestComponents/Shimmer/ShimmerE2ETest.tsx b/apps/fluent-tester/src/TestComponents/Shimmer/ShimmerE2ETest.tsx index 71f3f1af08..dc00147f76 100644 --- a/apps/fluent-tester/src/TestComponents/Shimmer/ShimmerE2ETest.tsx +++ b/apps/fluent-tester/src/TestComponents/Shimmer/ShimmerE2ETest.tsx @@ -1,9 +1,11 @@ import * as React from 'react'; + import { Shimmer } from '@fluentui-react-native/experimental-shimmer'; import { Stack } from '@fluentui-react-native/stack'; -import { stackStyle } from '../Common/styles'; + import { shimmerRectsAndRect } from './ShimmerTestElementSets'; import { SHIMMER_TEST_COMPONENT } from '../../../../E2E/src/Shimmer/consts'; +import { stackStyle } from '../Common/styles'; import { testProps } from '../Common/TestProps'; export const E2ETestingShimmer: React.FunctionComponent> = () => { diff --git a/apps/fluent-tester/src/TestComponents/Shimmer/ShimmerTest.tsx b/apps/fluent-tester/src/TestComponents/Shimmer/ShimmerTest.tsx index a0e523aa8d..81385a4618 100644 --- a/apps/fluent-tester/src/TestComponents/Shimmer/ShimmerTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Shimmer/ShimmerTest.tsx @@ -1,13 +1,15 @@ import * as React from 'react'; +import { Platform } from 'react-native'; + import { Shimmer } from '@fluentui-react-native/experimental-shimmer'; +import { Stack } from '@fluentui-react-native/stack'; + +import { E2ETestingShimmer } from './ShimmerE2ETest'; +import { shimmerBorderRadiusTests, shimmerRectsAndRect, shimmerRectsAndCircle } from './ShimmerTestElementSets'; import { SHIMMER_TESTPAGE } from '../../../../E2E/src/Shimmer/consts'; +import { stackStyle } from '../Common/styles'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; -import { Stack } from '@fluentui-react-native/stack'; -import { stackStyle } from '../Common/styles'; -import { shimmerBorderRadiusTests, shimmerRectsAndRect, shimmerRectsAndCircle } from './ShimmerTestElementSets'; -import { E2ETestingShimmer } from './ShimmerE2ETest'; -import { Platform } from 'react-native'; const TestCompareCustomizeShimmer = Shimmer.customize({ shimmerWaveColor: 'blue', diff --git a/apps/fluent-tester/src/TestComponents/Spacing/SpacingTest.tsx b/apps/fluent-tester/src/TestComponents/Spacing/SpacingTest.tsx index 9b949bf4b7..c9c052a375 100644 --- a/apps/fluent-tester/src/TestComponents/Spacing/SpacingTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Spacing/SpacingTest.tsx @@ -1,11 +1,13 @@ -import { Stack } from '@fluentui-react-native/stack'; -import { globalTokens } from '@fluentui-react-native/theme-tokens'; import * as React from 'react'; import { Text, View } from 'react-native'; + +import { Stack } from '@fluentui-react-native/stack'; +import { globalTokens } from '@fluentui-react-native/theme-tokens'; + +import { SPACING_TESTPAGE } from '../../../../E2E/src/Spacing/consts'; import { stackStyle } from '../Common/styles'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; -import { SPACING_TESTPAGE } from '../../../../E2E/src/Spacing/consts'; const BasicUsage: React.FunctionComponent = () => { function spacingExample(tokenName: string, spacing?: number | string) { diff --git a/apps/fluent-tester/src/TestComponents/Spinner/SpinnerE2ETest.tsx b/apps/fluent-tester/src/TestComponents/Spinner/SpinnerE2ETest.tsx index 481293eb7c..13f7ac3607 100644 --- a/apps/fluent-tester/src/TestComponents/Spinner/SpinnerE2ETest.tsx +++ b/apps/fluent-tester/src/TestComponents/Spinner/SpinnerE2ETest.tsx @@ -1,9 +1,11 @@ import * as React from 'react'; + import { Spinner } from '@fluentui-react-native/spinner'; import { Stack } from '@fluentui-react-native/stack'; + +import { SPINNER_TEST_COMPONENT } from '../../../../E2E/src/Spinner/consts'; import { stackStyle } from '../Common/styles'; import { testProps } from '../Common/TestProps'; -import { SPINNER_TEST_COMPONENT } from '../../../../E2E/src/Spinner/consts'; export const E2ETestingSpinner: React.FunctionComponent> = () => { return ( diff --git a/apps/fluent-tester/src/TestComponents/Spinner/SpinnerTest.tsx b/apps/fluent-tester/src/TestComponents/Spinner/SpinnerTest.tsx index 0fb0f4ad87..0943d9c4e7 100644 --- a/apps/fluent-tester/src/TestComponents/Spinner/SpinnerTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Spinner/SpinnerTest.tsx @@ -1,13 +1,15 @@ import * as React from 'react'; -import { Text, TextV1 } from '@fluentui-react-native/text'; +import { View, Switch } from 'react-native'; + +import { Spinner } from '@fluentui-react-native/spinner'; import { Stack } from '@fluentui-react-native/stack'; +import { Text, TextV1 } from '@fluentui-react-native/text'; + +import { E2ETestingSpinner } from './SpinnerE2ETest'; +import { SPINNER_TESTPAGE } from '../../../../E2E/src/Spinner/consts'; import { stackStyle, commonTestStyles as commonStyles, commonTestStyles } from '../Common/styles'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; -import { SPINNER_TESTPAGE } from '../../../../E2E/src/Spinner/consts'; -import { View, Switch } from 'react-native'; -import { Spinner } from '@fluentui-react-native/spinner'; -import { E2ETestingSpinner } from './SpinnerE2ETest'; const BasicSpinnerTest: React.FunctionComponent = () => { const [animating, setAnimating] = React.useState(true); diff --git a/apps/fluent-tester/src/TestComponents/StrokeWidth/StrokeWidthTest.tsx b/apps/fluent-tester/src/TestComponents/StrokeWidth/StrokeWidthTest.tsx index 83e5dfa449..a3bbc2d53a 100644 --- a/apps/fluent-tester/src/TestComponents/StrokeWidth/StrokeWidthTest.tsx +++ b/apps/fluent-tester/src/TestComponents/StrokeWidth/StrokeWidthTest.tsx @@ -1,16 +1,18 @@ import * as React from 'react'; -import { STROKEWIDTH_TESTPAGE } from '../../../../E2E/src/StrokeWidthTokens/consts'; -import type { TestSection, PlatformStatus } from '../Test'; -import { Test } from '../Test'; import { View } from 'react-native'; -import { Stack } from '@fluentui-react-native/stack'; -import { stackStyle } from '../Common/styles'; -import { globalTokens } from '@fluentui-react-native/theme-tokens'; + import { Text } from '@fluentui/react-native'; import type { Theme } from '@fluentui-react-native/framework'; import { useFluentTheme } from '@fluentui-react-native/framework'; -import { getCurrentAppearance } from '@fluentui-react-native/theming-utils'; +import { Stack } from '@fluentui-react-native/stack'; +import { globalTokens } from '@fluentui-react-native/theme-tokens'; import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet'; +import { getCurrentAppearance } from '@fluentui-react-native/theming-utils'; + +import { STROKEWIDTH_TESTPAGE } from '../../../../E2E/src/StrokeWidthTokens/consts'; +import { stackStyle } from '../Common/styles'; +import type { TestSection, PlatformStatus } from '../Test'; +import { Test } from '../Test'; const getThemedStyles = themedStyleSheet((t: Theme) => { const isLightMode = getCurrentAppearance(t.host.appearance, 'light') === 'light'; diff --git a/apps/fluent-tester/src/TestComponents/Svg/RNSVGIcons.tsx b/apps/fluent-tester/src/TestComponents/Svg/RNSVGIcons.tsx index 3710d1f3a7..6a85c9bdc7 100644 --- a/apps/fluent-tester/src/TestComponents/Svg/RNSVGIcons.tsx +++ b/apps/fluent-tester/src/TestComponents/Svg/RNSVGIcons.tsx @@ -1,13 +1,11 @@ import * as React from 'react'; -import { RNSVGIcons_TESTPAGE } from '../../../../E2E/src/Svg/consts'; import { /* Text, */ View } from 'react-native'; -import type { TestSection, PlatformStatus } from '../Test'; -import { Test } from '../Test'; -import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'; + +import { faMountainCity } from '@fortawesome/free-solid-svg-icons/faMountainCity'; +import { faMugHot } from '@fortawesome/free-solid-svg-icons/faMugHot'; import { faMugSaucer } from '@fortawesome/free-solid-svg-icons/faMugSaucer'; import { faSquareCheck } from '@fortawesome/free-solid-svg-icons/faSquareCheck'; -import { faMugHot } from '@fortawesome/free-solid-svg-icons/faMugHot'; -import { faMountainCity } from '@fortawesome/free-solid-svg-icons/faMountainCity'; +import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'; import { AccessTime20Filled, AccessTime20Regular, @@ -511,6 +509,10 @@ import { ArrowCircleUpLeft20Regular, } from '@warren-ms/react-native-icons'; +import { RNSVGIcons_TESTPAGE } from '../../../../E2E/src/Svg/consts'; +import type { TestSection, PlatformStatus } from '../Test'; +import { Test } from '../Test'; + const FontAwesomeTest: React.FunctionComponent = () => { return ( diff --git a/apps/fluent-tester/src/TestComponents/Svg/SvgTest.tsx b/apps/fluent-tester/src/TestComponents/Svg/SvgTest.tsx index 605955c8cf..4f9182e364 100644 --- a/apps/fluent-tester/src/TestComponents/Svg/SvgTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Svg/SvgTest.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; import { StyleSheet, Switch, Text, View } from 'react-native'; + import { Separator } from '@fluentui/react-native'; import { Circle, Defs, G, Line, Path, Polygon, LinearGradient, RadialGradient, Rect, Stop, Svg, SvgUri, Use } from 'react-native-svg'; + import TestSvg from './Assets/accessible-icon-brands.svg'; import { SVG_TESTPAGE } from '../../../../E2E/src/Svg/consts'; import type { TestSection, PlatformStatus } from '../Test'; diff --git a/apps/fluent-tester/src/TestComponents/Switch/CustomizedSwitch.tsx b/apps/fluent-tester/src/TestComponents/Switch/CustomizedSwitch.tsx index 6fe758ae77..774f2b6727 100644 --- a/apps/fluent-tester/src/TestComponents/Switch/CustomizedSwitch.tsx +++ b/apps/fluent-tester/src/TestComponents/Switch/CustomizedSwitch.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; import { View, TextInput, StyleSheet } from 'react-native'; + import { Text } from '@fluentui-react-native/experimental-text'; import type { SwitchTokens } from '@fluentui-react-native/switch'; import { Switch } from '@fluentui-react-native/switch'; + import { commonTestStyles as commonStyles } from '../Common/styles'; const styles = StyleSheet.create({ diff --git a/apps/fluent-tester/src/TestComponents/Switch/E2ESwitchTest.tsx b/apps/fluent-tester/src/TestComponents/Switch/E2ESwitchTest.tsx index e623f34cad..21b1feb884 100644 --- a/apps/fluent-tester/src/TestComponents/Switch/E2ESwitchTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Switch/E2ESwitchTest.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; +import { Platform } from 'react-native'; + import { Stack } from '@fluentui-react-native/stack'; import { Switch } from '@fluentui-react-native/switch'; import { TextV1 } from '@fluentui-react-native/text'; -import { stackStyle, commonTestStyles } from '../Common/styles'; + import { SWITCH_TEST_COMPONENT, SWITCH_ACCESSIBILITY_LABEL, @@ -10,7 +12,7 @@ import { SWITCH_TEST_COMPONENT_LABEL, SWITCH_ON_PRESS, } from '../../../../E2E/src/Switch/consts'; -import { Platform } from 'react-native'; +import { stackStyle, commonTestStyles } from '../Common/styles'; import { testProps } from '../Common/TestProps'; export const E2ESwitchTest: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/TestComponents/Switch/SwitchTest.tsx b/apps/fluent-tester/src/TestComponents/Switch/SwitchTest.tsx index ca2082cedc..19a754db03 100644 --- a/apps/fluent-tester/src/TestComponents/Switch/SwitchTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Switch/SwitchTest.tsx @@ -1,15 +1,17 @@ import * as React from 'react'; -import type { TestSection, PlatformStatus } from '../Test'; -import { Test } from '../Test'; -import { SWITCH_TESTPAGE } from '../../../../E2E/src/Switch/consts'; import { View, StyleSheet } from 'react-native'; -import { Switch } from '@fluentui-react-native/switch'; -import { E2ESwitchTest } from './E2ESwitchTest'; -import { commonTestStyles } from '../Common/styles'; +import { Platform } from 'react-native'; + import { ButtonV1 as Button } from '@fluentui-react-native/button'; import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; +import { Switch } from '@fluentui-react-native/switch'; + import { CustomizedSwitch } from './CustomizedSwitch'; -import { Platform } from 'react-native'; +import { E2ESwitchTest } from './E2ESwitchTest'; +import { SWITCH_TESTPAGE } from '../../../../E2E/src/Switch/consts'; +import { commonTestStyles } from '../Common/styles'; +import type { TestSection, PlatformStatus } from '../Test'; +import { Test } from '../Test'; const styles = StyleSheet.create({ square: { diff --git a/apps/fluent-tester/src/TestComponents/TabsLegacy/TabsLegacyE2ETest.tsx b/apps/fluent-tester/src/TestComponents/TabsLegacy/TabsLegacyE2ETest.tsx index 74c337ca23..9af227b71d 100644 --- a/apps/fluent-tester/src/TestComponents/TabsLegacy/TabsLegacyE2ETest.tsx +++ b/apps/fluent-tester/src/TestComponents/TabsLegacy/TabsLegacyE2ETest.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import { View } from 'react-native'; + import { Tabs, TabsItem, Text } from '@fluentui/react-native'; -import { stackStyle } from '../Common/styles'; + import { TABS_TEST_COMPONENT, TABS_ACCESSIBILITY_LABEL, @@ -16,6 +17,7 @@ import { THIRD_TABS_ITEM_CONTENT, FIRST_TABS_ITEM_CONTENT, } from '../../../../E2E/src/TabsLegacy/consts'; +import { stackStyle } from '../Common/styles'; import { testProps } from '../Common/TestProps'; export const TabsLegacyE2ETest: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/TestComponents/TabsLegacy/TabsLegacyTest.tsx b/apps/fluent-tester/src/TestComponents/TabsLegacy/TabsLegacyTest.tsx index 264588a5fa..2127d3ae96 100644 --- a/apps/fluent-tester/src/TestComponents/TabsLegacy/TabsLegacyTest.tsx +++ b/apps/fluent-tester/src/TestComponents/TabsLegacy/TabsLegacyTest.tsx @@ -1,12 +1,14 @@ import * as React from 'react'; import { Platform, View } from 'react-native'; + import { Tabs, TabsItem, Text, Button } from '@fluentui/react-native'; -import { stackStyle } from '../Common/styles'; + +import { TabsLegacyE2ETest } from './TabsLegacyE2ETest'; import { TABS_TESTPAGE } from '../../../../E2E/src/TabsLegacy/consts'; +import { svgProps } from '../Common/iconExamples'; +import { stackStyle } from '../Common/styles'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; -import { TabsLegacyE2ETest } from './TabsLegacyE2ETest'; -import { svgProps } from '../Common/iconExamples'; const TabsMainTest: React.FunctionComponent = () => { return ( diff --git a/apps/fluent-tester/src/TestComponents/TabsV1/TabsV1E2ETest.tsx b/apps/fluent-tester/src/TestComponents/TabsV1/TabsV1E2ETest.tsx index 9908da41fe..7b839b9a23 100644 --- a/apps/fluent-tester/src/TestComponents/TabsV1/TabsV1E2ETest.tsx +++ b/apps/fluent-tester/src/TestComponents/TabsV1/TabsV1E2ETest.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import { View } from 'react-native'; -import { TextV1 as Text } from '@fluentui-react-native/text'; + import { Tabs, TabsItem } from '@fluentui-react-native/experimental-tabs'; -import { stackStyle } from '../Common/styles'; +import { TextV1 as Text } from '@fluentui-react-native/text'; + import { TABSV1_TEST_COMPONENT, TABSV1_ACCESSIBILITY_LABEL, @@ -18,6 +19,7 @@ import { TABSITEMV1_NO_A11Y_LABEL_COMPONENT, TABSITEMV1_TEST_COMPONENT_LABEL, } from '../../../../E2E/src/TabsV1/consts'; +import { stackStyle } from '../Common/styles'; import { testProps } from '../Common/TestProps'; export const TabsV1E2ETest: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/TestComponents/TabsV1/TabsV1Test.tsx b/apps/fluent-tester/src/TestComponents/TabsV1/TabsV1Test.tsx index 47d43f1eb4..b0866b0d72 100644 --- a/apps/fluent-tester/src/TestComponents/TabsV1/TabsV1Test.tsx +++ b/apps/fluent-tester/src/TestComponents/TabsV1/TabsV1Test.tsx @@ -1,14 +1,16 @@ import * as React from 'react'; import { View, Platform } from 'react-native'; -import { TextV1 as Text } from '@fluentui-react-native/text'; + import { Button } from '@fluentui-react-native/experimental-button'; import { Tabs, TabsItem } from '@fluentui-react-native/experimental-tabs'; -import { stackStyle } from '../Common/styles'; +import { TextV1 as Text } from '@fluentui-react-native/text'; + +import { TabsV1E2ETest } from './TabsV1E2ETest'; import { TABSV1_TESTPAGE } from '../../../../E2E/src/TabsV1/consts'; +import { svgProps } from '../Common/iconExamples'; +import { stackStyle } from '../Common/styles'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; -import { TabsV1E2ETest } from './TabsV1E2ETest'; -import { svgProps } from '../Common/iconExamples'; const TabsMainTest: React.FunctionComponent = () => { return ( diff --git a/apps/fluent-tester/src/TestComponents/Test.tsx b/apps/fluent-tester/src/TestComponents/Test.tsx index 38b31fa450..b062a336ac 100644 --- a/apps/fluent-tester/src/TestComponents/Test.tsx +++ b/apps/fluent-tester/src/TestComponents/Test.tsx @@ -1,13 +1,15 @@ import * as React from 'react'; import { Platform, StyleSheet, Switch, View } from 'react-native'; + import { Text, ToggleButton, Separator, Link } from '@fluentui/react-native'; +import { Button } from '@fluentui-react-native/experimental-button'; +import type { SvgIconProps } from '@fluentui-react-native/icon'; import { Stack } from '@fluentui-react-native/stack'; -import { stackStyle } from './Common/styles'; import { useTheme } from '@fluentui-react-native/theme-types'; import type { SvgProps } from 'react-native-svg'; import Svg, { G, Path } from 'react-native-svg'; -import type { SvgIconProps } from '@fluentui-react-native/icon'; -import { Button } from '@fluentui-react-native/experimental-button'; + +import { stackStyle } from './Common/styles'; import { testProps } from './Common/TestProps'; import { E2E_MODE_SWITCH, E2E_TEST_SECTION } from '../../../E2E/src/index.consts'; diff --git a/apps/fluent-tester/src/TestComponents/TextLegacy/CustomizeUsage.tsx b/apps/fluent-tester/src/TestComponents/TextLegacy/CustomizeUsage.tsx index 149ddde756..8c2c0f5bad 100644 --- a/apps/fluent-tester/src/TestComponents/TextLegacy/CustomizeUsage.tsx +++ b/apps/fluent-tester/src/TestComponents/TextLegacy/CustomizeUsage.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; import { Platform, View } from 'react-native'; -import { Stack } from '@fluentui-react-native/stack'; + import { Text } from '@fluentui/react-native'; +import { Stack } from '@fluentui-react-native/stack'; + import { stackStyle } from '../Common/styles'; const RedCaptionBold = Text.customize({ tokens: { variant: 'captionStandard', fontWeight: '700', color: '#ff0000' } }); diff --git a/apps/fluent-tester/src/TestComponents/TextLegacy/PressableUsage.tsx b/apps/fluent-tester/src/TestComponents/TextLegacy/PressableUsage.tsx index 9148285ebf..df6e94c256 100644 --- a/apps/fluent-tester/src/TestComponents/TextLegacy/PressableUsage.tsx +++ b/apps/fluent-tester/src/TestComponents/TextLegacy/PressableUsage.tsx @@ -1,10 +1,12 @@ import * as React from 'react'; import { Alert, Linking, View } from 'react-native'; -import { Stack } from '@fluentui-react-native/stack'; + import { Text } from '@fluentui/react-native'; -import { stackStyle } from '../Common/styles'; +import { Stack } from '@fluentui-react-native/stack'; import type { IKeyboardEvent, IHandledKeyboardEvent } from '@office-iss/react-native-win32'; +import { stackStyle } from '../Common/styles'; + export const PressableUsage: React.FunctionComponent = () => { const _onPress = (): void => { Linking.openURL('https://www.microsoft.com'); diff --git a/apps/fluent-tester/src/TestComponents/TextLegacy/StandardUsage.tsx b/apps/fluent-tester/src/TestComponents/TextLegacy/StandardUsage.tsx index fe78242c5e..8723eca653 100644 --- a/apps/fluent-tester/src/TestComponents/TextLegacy/StandardUsage.tsx +++ b/apps/fluent-tester/src/TestComponents/TextLegacy/StandardUsage.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; import { View } from 'react-native'; + import { Text } from '@fluentui/react-native'; import { Stack } from '@fluentui-react-native/stack'; + import { stackStyle } from '../Common/styles'; export const StandardUsage: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/TestComponents/TextLegacy/TextLegacyE2ETest.tsx b/apps/fluent-tester/src/TestComponents/TextLegacy/TextLegacyE2ETest.tsx index 66cea0bd74..589e72536b 100644 --- a/apps/fluent-tester/src/TestComponents/TextLegacy/TextLegacyE2ETest.tsx +++ b/apps/fluent-tester/src/TestComponents/TextLegacy/TextLegacyE2ETest.tsx @@ -1,14 +1,16 @@ import * as React from 'react'; import { View } from 'react-native'; + import { Text } from '@fluentui/react-native'; import { Stack } from '@fluentui-react-native/stack'; -import { stackStyle } from '../Common/styles'; + import { DEPRECATED_TEXT_FIRST_ACCESSIBILITY_LABEL, DEPRECATED_TEXT_FIRST_COMPONENT, DEPRECATED_TEXT_SECOND_COMPONENT, DEPRECATED_TEXT_SECOND_COMPONENT_CONTENT, } from '../../../../E2E/src/TextLegacy/consts'; +import { stackStyle } from '../Common/styles'; import { testProps } from '../Common/TestProps'; export const TextLegacyE2ETest: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/TestComponents/TextLegacy/TextLegacyTest.tsx b/apps/fluent-tester/src/TestComponents/TextLegacy/TextLegacyTest.tsx index f3cfd3050c..e3d64aa8ff 100644 --- a/apps/fluent-tester/src/TestComponents/TextLegacy/TextLegacyTest.tsx +++ b/apps/fluent-tester/src/TestComponents/TextLegacy/TextLegacyTest.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; -import { StandardUsage } from './StandardUsage'; + import { CustomizeUsage } from './CustomizeUsage'; import { PressableUsage } from './PressableUsage'; +import { StandardUsage } from './StandardUsage'; import { TextLegacyE2ETest } from './TextLegacyE2ETest'; +import { TEXT_TESTPAGE } from '../../../../E2E/src/index.consts'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; -import { TEXT_TESTPAGE } from '../../../../E2E/src/index.consts'; const textSections: TestSection[] = [ { diff --git a/apps/fluent-tester/src/TestComponents/TextV1/CustomizeUsage.tsx b/apps/fluent-tester/src/TestComponents/TextV1/CustomizeUsage.tsx index 42d54a8596..20c4c01fe9 100644 --- a/apps/fluent-tester/src/TestComponents/TextV1/CustomizeUsage.tsx +++ b/apps/fluent-tester/src/TestComponents/TextV1/CustomizeUsage.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; import { Platform, View } from 'react-native'; -import { Stack } from '@fluentui-react-native/stack'; + import { Text } from '@fluentui-react-native/experimental-text'; +import { Stack } from '@fluentui-react-native/stack'; + import { stackStyle } from '../Common/styles'; const RedCaptionBold = Text.customize({ variant: 'captionStandard', fontWeight: '700', color: '#ff0000' }); diff --git a/apps/fluent-tester/src/TestComponents/TextV1/MaximumFontSize.ios.tsx b/apps/fluent-tester/src/TestComponents/TextV1/MaximumFontSize.ios.tsx index 1c7b56f5cc..d2ec1cf676 100644 --- a/apps/fluent-tester/src/TestComponents/TextV1/MaximumFontSize.ios.tsx +++ b/apps/fluent-tester/src/TestComponents/TextV1/MaximumFontSize.ios.tsx @@ -1,9 +1,11 @@ import * as React from 'react'; import { Text, View } from 'react-native'; -import { Stack } from '@fluentui-react-native/stack'; -import { stackStyle } from '../Common/styles'; -import { Caption1, Title2, Title3 } from '@fluentui-react-native/text'; + import { Separator } from '@fluentui/react-native'; +import { Stack } from '@fluentui-react-native/stack'; +import { Caption1, Title2, Title3 } from '@fluentui-react-native/text'; + +import { stackStyle } from '../Common/styles'; const maximumFontSizeStyle = { maximumFontSize: 36 }; diff --git a/apps/fluent-tester/src/TestComponents/TextV1/PressableUsage.tsx b/apps/fluent-tester/src/TestComponents/TextV1/PressableUsage.tsx index eb1db3c322..ffa110c563 100644 --- a/apps/fluent-tester/src/TestComponents/TextV1/PressableUsage.tsx +++ b/apps/fluent-tester/src/TestComponents/TextV1/PressableUsage.tsx @@ -1,10 +1,12 @@ import * as React from 'react'; import { Alert, Linking, View } from 'react-native'; -import { Stack } from '@fluentui-react-native/stack'; + import { Text } from '@fluentui-react-native/experimental-text'; -import { stackStyle } from '../Common/styles'; +import { Stack } from '@fluentui-react-native/stack'; import type { IKeyboardEvent, IHandledKeyboardEvent } from '@office-iss/react-native-win32'; +import { stackStyle } from '../Common/styles'; + export const PressableUsage: React.FunctionComponent = () => { const _onPress = (): void => { Linking.openURL('https://www.microsoft.com'); diff --git a/apps/fluent-tester/src/TestComponents/TextV1/StandardUsage.tsx b/apps/fluent-tester/src/TestComponents/TextV1/StandardUsage.tsx index dc693d6772..de86bc4004 100644 --- a/apps/fluent-tester/src/TestComponents/TextV1/StandardUsage.tsx +++ b/apps/fluent-tester/src/TestComponents/TextV1/StandardUsage.tsx @@ -1,9 +1,11 @@ import * as React from 'react'; import { View } from 'react-native'; + import { Text } from '@fluentui-react-native/experimental-text'; import { Stack } from '@fluentui-react-native/stack'; -import { stackStyle } from '../Common/styles'; + import { HOMEPAGE_TEXTV1_BUTTON } from '../../../../E2E/src/TextV1/consts'; +import { stackStyle } from '../Common/styles'; import { testProps } from '../Common/TestProps'; export const StandardUsage: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/TestComponents/TextV1/TextV1E2ETest.tsx b/apps/fluent-tester/src/TestComponents/TextV1/TextV1E2ETest.tsx index ed3d5fa8b0..02173365dc 100644 --- a/apps/fluent-tester/src/TestComponents/TextV1/TextV1E2ETest.tsx +++ b/apps/fluent-tester/src/TestComponents/TextV1/TextV1E2ETest.tsx @@ -1,14 +1,16 @@ import * as React from 'react'; import { View } from 'react-native'; + import { Text } from '@fluentui-react-native/experimental-text'; import { Stack } from '@fluentui-react-native/stack'; -import { stackStyle } from '../Common/styles'; + import { TEXTV1_TEST_COMPONENT, TEXTV1_ACCESSIBILITY_LABEL, TEXTV1_NO_A11Y_LABEL_COMPONENT, TEXTV1_CONTENT, } from '../../../../E2E/src/TextV1/consts'; +import { stackStyle } from '../Common/styles'; import { testProps } from '../Common/TestProps'; export const TextV1E2ETest: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/TestComponents/TextV1/TextV1Test.tsx b/apps/fluent-tester/src/TestComponents/TextV1/TextV1Test.tsx index d8b534ea0a..33002f2a7a 100644 --- a/apps/fluent-tester/src/TestComponents/TextV1/TextV1Test.tsx +++ b/apps/fluent-tester/src/TestComponents/TextV1/TextV1Test.tsx @@ -1,13 +1,14 @@ import * as React from 'react'; -import { StandardUsage } from './StandardUsage'; -import { V2Usage } from './V2Usage'; -import { MaximumFontSizeUsage } from './MaximumFontSize'; + import { CustomizeUsage } from './CustomizeUsage'; +import { MaximumFontSizeUsage } from './MaximumFontSize'; import { PressableUsage } from './PressableUsage'; +import { StandardUsage } from './StandardUsage'; +import { TextV1E2ETest } from './TextV1E2ETest'; +import { V2Usage } from './V2Usage'; +import { TEXTV1_TESTPAGE } from '../../../../E2E/src/TextV1/consts'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; -import { TextV1E2ETest } from './TextV1E2ETest'; -import { TEXTV1_TESTPAGE } from '../../../../E2E/src/TextV1/consts'; const textSections: TestSection[] = [ { diff --git a/apps/fluent-tester/src/TestComponents/TextV1/V2Usage.mobile.tsx b/apps/fluent-tester/src/TestComponents/TextV1/V2Usage.mobile.tsx index 58b096d800..aa8730864e 100644 --- a/apps/fluent-tester/src/TestComponents/TextV1/V2Usage.mobile.tsx +++ b/apps/fluent-tester/src/TestComponents/TextV1/V2Usage.mobile.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { View } from 'react-native'; + import { Stack } from '@fluentui-react-native/stack'; -import { stackStyle } from '../Common/styles'; import { Body1, Body1Strong, @@ -18,6 +18,8 @@ import { Title3, } from '@fluentui-react-native/text'; +import { stackStyle } from '../Common/styles'; + export const V2Usage: React.FunctionComponent = () => { return ( diff --git a/apps/fluent-tester/src/TestComponents/TextV1/V2Usage.win32.tsx b/apps/fluent-tester/src/TestComponents/TextV1/V2Usage.win32.tsx index 7a6415d284..89074e65fb 100644 --- a/apps/fluent-tester/src/TestComponents/TextV1/V2Usage.win32.tsx +++ b/apps/fluent-tester/src/TestComponents/TextV1/V2Usage.win32.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { View } from 'react-native'; + import { Stack } from '@fluentui-react-native/stack'; -import { stackStyle } from '../Common/styles'; import { Body1, Body1Strong, @@ -18,6 +18,8 @@ import { Title1Strong, } from '@fluentui-react-native/text'; +import { stackStyle } from '../Common/styles'; + export const V2Usage: React.FunctionComponent = () => { return ( diff --git a/apps/fluent-tester/src/TestComponents/Theme/ThemeTest.tsx b/apps/fluent-tester/src/TestComponents/Theme/ThemeTest.tsx index 8fb8c0c689..e42e6d0e4b 100644 --- a/apps/fluent-tester/src/TestComponents/Theme/ThemeTest.tsx +++ b/apps/fluent-tester/src/TestComponents/Theme/ThemeTest.tsx @@ -1,12 +1,14 @@ import * as React from 'react'; import type { ViewStyle, ColorValue } from 'react-native'; import { View, StyleSheet } from 'react-native'; + +import { Button, PrimaryButton, Text, StealthButton } from '@fluentui/react-native'; import type { Theme } from '@fluentui-react-native/theme-types'; import { useTheme } from '@fluentui-react-native/theme-types'; import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet'; -import { commonTestStyles } from '../Common/styles'; -import { Button, PrimaryButton, Text, StealthButton } from '@fluentui/react-native'; + import { THEME_TESTPAGE } from '../../../../E2E/src/Theme/consts'; +import { commonTestStyles } from '../Common/styles'; import type { TestSection, PlatformStatus } from '../Test'; import { Test } from '../Test'; diff --git a/apps/fluent-tester/src/testPages.ts b/apps/fluent-tester/src/testPages.ts index f8d484d8ed..6a41440670 100644 --- a/apps/fluent-tester/src/testPages.ts +++ b/apps/fluent-tester/src/testPages.ts @@ -9,7 +9,6 @@ import { CheckboxV1Test } from './TestComponents/CheckboxV1'; import { ColorTokensTest } from './TestComponents/ColorTokens'; import { ContextualMenuTest } from './TestComponents/ContextualMenu'; import { CornerRadiusTokensTest } from './TestComponents/CornerRadius'; -import { NativeDatePickerTest, HOMEPAGE_NATIVEDATEPICKER_BUTTON } from './TestComponents/NativeDatePicker'; import { DividerTest } from './TestComponents/Divider'; import { DropdownTest, HOMEPAGE_DROPDOWN_BUTTON } from './TestComponents/Dropdown'; // import { DrawerTest, Constants.HOMEPAGE_DRAWER_BUTTON } from './TestComponents/Drawer'; @@ -22,6 +21,7 @@ import { LinkV1Test } from './TestComponents/LinkV1'; import { MenuTest } from './TestComponents/Menu'; import { MenuButtonLegacyTest } from './TestComponents/MenuButtonLegacy'; import { MenuButtonV1Test } from './TestComponents/MenuButtonV1'; +import { NativeDatePickerTest, HOMEPAGE_NATIVEDATEPICKER_BUTTON } from './TestComponents/NativeDatePicker'; import { NotificationTest, HOMEPAGE_NOTIFICATION_BUTTON } from './TestComponents/Notification'; import { PersonaTest } from './TestComponents/Persona'; import { PersonaCoinTest } from './TestComponents/PersonaCoin'; @@ -32,6 +32,7 @@ import { SeparatorTest } from './TestComponents/Separator'; import { ShadowTest } from './TestComponents/Shadow'; import { ShimmerTest } from './TestComponents/Shimmer'; import { SpacingTokensTest } from './TestComponents/Spacing'; +import { SpinnerTest } from './TestComponents/Spinner'; import { StrokeWidthTest } from './TestComponents/StrokeWidth'; import { SvgTest, RNSVGIconsTest } from './TestComponents/Svg'; import { SwitchTest } from './TestComponents/Switch'; @@ -41,7 +42,6 @@ import { TextLegacyTest } from './TestComponents/TextLegacy'; import { TextV1Test } from './TestComponents/TextV1'; import { ThemeTest } from './TestComponents/Theme'; import * as Constants from '../../E2E/src/index.consts'; -import { SpinnerTest } from './TestComponents/Spinner'; export const tests: TestDescription[] = [ { diff --git a/apps/fluent-tester/src/theme/CustomThemes.ts b/apps/fluent-tester/src/theme/CustomThemes.ts index 94e44d58bf..4d681a4520 100644 --- a/apps/fluent-tester/src/theme/CustomThemes.ts +++ b/apps/fluent-tester/src/theme/CustomThemes.ts @@ -1,13 +1,15 @@ +import { Platform } from 'react-native'; + +import { createAndroidTheme } from '@fluentui-react-native/android-theme'; import { createAppleTheme } from '@fluentui-react-native/apple-theme'; import { createDefaultTheme } from '@fluentui-react-native/default-theme'; import { ThemeReference } from '@fluentui-react-native/theme'; -import { Platform } from 'react-native'; +import type { ThemeOptions } from '@fluentui-react-native/theme-types'; + import type { OfficeBrand } from './applyBrand'; import { applyBrand } from './applyBrand'; import type { ThemeNames } from './applyTheme'; import { applyTheme } from './applyTheme'; -import { createAndroidTheme } from '@fluentui-react-native/android-theme'; -import type { ThemeOptions } from '@fluentui-react-native/theme-types'; const themeOptions: ThemeOptions = { paletteName: 'TaskPane', appearance: 'dynamic' }; diff --git a/apps/fluent-tester/src/theme/ThemePickers.android.tsx b/apps/fluent-tester/src/theme/ThemePickers.android.tsx index 117c7835c0..1f9399de1d 100644 --- a/apps/fluent-tester/src/theme/ThemePickers.android.tsx +++ b/apps/fluent-tester/src/theme/ThemePickers.android.tsx @@ -1,15 +1,17 @@ import * as React from 'react'; import { View } from 'react-native'; -import { TextV1 as Text } from '@fluentui-react-native/text'; -import { lightnessOptions, testerTheme } from './CustomThemes'; -import type { ThemeNames } from './applyTheme'; -import { themeChoices } from './applyTheme'; + import type { Theme } from '@fluentui-react-native/framework'; import { useTheme } from '@fluentui-react-native/framework'; +import { TextV1 as Text } from '@fluentui-react-native/text'; import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet'; import type { PickerProps } from '@react-native-picker/picker'; import { Picker } from '@react-native-picker/picker'; +import { themeChoices } from './applyTheme'; +import type { ThemeNames } from './applyTheme'; +import { lightnessOptions, testerTheme } from './CustomThemes'; + const getThemedDropdownStyles = themedStyleSheet((t: Theme) => { return { pickerRoot: { diff --git a/apps/fluent-tester/src/theme/ThemePickers.ios.tsx b/apps/fluent-tester/src/theme/ThemePickers.ios.tsx index 7286ebcfcd..2d76252d98 100644 --- a/apps/fluent-tester/src/theme/ThemePickers.ios.tsx +++ b/apps/fluent-tester/src/theme/ThemePickers.ios.tsx @@ -1,14 +1,16 @@ import * as React from 'react'; import { View } from 'react-native'; + import { Button } from '@fluentui-react-native/experimental-button'; -import type { MenuAction } from '@react-native-menu/menu'; -import { MenuView } from '@react-native-menu/menu'; -import { testerTheme } from './CustomThemes'; -import type { ThemeNames } from './applyTheme'; -import { themeChoices } from './applyTheme'; import type { Theme } from '@fluentui-react-native/framework'; import { useTheme } from '@fluentui-react-native/framework'; import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet'; +import { MenuView } from '@react-native-menu/menu'; +import type { MenuAction } from '@react-native-menu/menu'; + +import { themeChoices } from './applyTheme'; +import type { ThemeNames } from './applyTheme'; +import { testerTheme } from './CustomThemes'; export const themePickerStyles = themedStyleSheet((t: Theme) => { // picker, pickerItem, dropdown used in iOS dark mode diff --git a/apps/fluent-tester/src/theme/ThemePickers.macos.tsx b/apps/fluent-tester/src/theme/ThemePickers.macos.tsx index 04dfad6d5f..78baaa5667 100644 --- a/apps/fluent-tester/src/theme/ThemePickers.macos.tsx +++ b/apps/fluent-tester/src/theme/ThemePickers.macos.tsx @@ -1,12 +1,14 @@ import * as React from 'react'; import { View, StyleSheet } from 'react-native'; + +import { ButtonV1 as Button } from '@fluentui/react-native'; +import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu'; import { TextV1 as Text } from '@fluentui-react-native/text'; import { SvgXml } from 'react-native-svg'; -import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu'; -import { ButtonV1 as Button } from '@fluentui/react-native'; -import { testerTheme } from './CustomThemes'; + import type { ThemeNames } from './applyTheme'; import { themeChoices } from './applyTheme'; +import { testerTheme } from './CustomThemes'; export const themePickerStyles = StyleSheet.create({ pickerRoot: { diff --git a/apps/fluent-tester/src/theme/ThemePickers.tsx b/apps/fluent-tester/src/theme/ThemePickers.tsx index ae9753c31c..5fec961537 100644 --- a/apps/fluent-tester/src/theme/ThemePickers.tsx +++ b/apps/fluent-tester/src/theme/ThemePickers.tsx @@ -1,10 +1,12 @@ import * as React from 'react'; import { View, StyleSheet } from 'react-native'; + import { TextV1 as Text } from '@fluentui-react-native/text'; -import { lightnessOptions, testerTheme } from './CustomThemes'; -import type { ThemeNames } from './applyTheme'; -import { themeChoices } from './applyTheme'; import type { ThemeOptions } from '@fluentui-react-native/theme-types'; + +import { themeChoices } from './applyTheme'; +import type { ThemeNames } from './applyTheme'; +import { lightnessOptions, testerTheme } from './CustomThemes'; import { MenuPicker } from '../TestComponents/Common/MenuPicker'; export const themePickerStyles = StyleSheet.create({ diff --git a/apps/fluent-tester/src/theme/ThemePickers.win32.tsx b/apps/fluent-tester/src/theme/ThemePickers.win32.tsx index 26e0773be6..5d75c70bc6 100644 --- a/apps/fluent-tester/src/theme/ThemePickers.win32.tsx +++ b/apps/fluent-tester/src/theme/ThemePickers.win32.tsx @@ -1,12 +1,14 @@ import * as React from 'react'; import { View, StyleSheet } from 'react-native'; + import { TextV1 as Text } from '@fluentui-react-native/text'; -import { lightnessOptions, testerTheme } from './CustomThemes'; -import type { ThemeNames } from './applyTheme'; -import { themeChoices } from './applyTheme'; +import type { ThemeOptions } from '@fluentui-react-native/theme-types'; + import type { OfficeBrand } from './applyBrand'; import { brandOptions } from './applyBrand'; -import type { ThemeOptions } from '@fluentui-react-native/theme-types'; +import type { ThemeNames } from './applyTheme'; +import { themeChoices } from './applyTheme'; +import { lightnessOptions, testerTheme } from './CustomThemes'; import { MenuPicker } from '../TestComponents/Common/MenuPicker'; export const themePickerStyles = StyleSheet.create({ diff --git a/apps/win32/src/index.tsx b/apps/win32/src/index.tsx index 5ac6d664cf..7441bae1b2 100644 --- a/apps/win32/src/index.tsx +++ b/apps/win32/src/index.tsx @@ -1,8 +1,9 @@ 'use strict'; -import { FluentTesterApp } from '@fluentui-react-native/tester'; import { AppRegistry } from 'react-native'; +import { FluentTesterApp } from '@fluentui-react-native/tester'; + AppRegistry.registerComponent('FluentTester', () => FluentTesterApp); export default FluentTesterApp; diff --git a/change/@fluentui-react-native-adapters-fef2d85a-5291-43e6-ad55-ca7ea12b9c6e.json b/change/@fluentui-react-native-adapters-fef2d85a-5291-43e6-ad55-ca7ea12b9c6e.json new file mode 100644 index 0000000000..1891d7a895 --- /dev/null +++ b/change/@fluentui-react-native-adapters-fef2d85a-5291-43e6-ad55-ca7ea12b9c6e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/adapters", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-android-theme-9715fc68-eec2-497e-967c-a45a545e21a3.json b/change/@fluentui-react-native-android-theme-9715fc68-eec2-497e-967c-a45a545e21a3.json new file mode 100644 index 0000000000..e40fa58e4d --- /dev/null +++ b/change/@fluentui-react-native-android-theme-9715fc68-eec2-497e-967c-a45a545e21a3.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/android-theme", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-apple-theme-362a1f8c-b3e7-499f-9915-36d24095341f.json b/change/@fluentui-react-native-apple-theme-362a1f8c-b3e7-499f-9915-36d24095341f.json new file mode 100644 index 0000000000..546d49cf5e --- /dev/null +++ b/change/@fluentui-react-native-apple-theme-362a1f8c-b3e7-499f-9915-36d24095341f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/apple-theme", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-avatar-49d36a47-b314-43fb-81f4-a04ef806ba77.json b/change/@fluentui-react-native-avatar-49d36a47-b314-43fb-81f4-a04ef806ba77.json new file mode 100644 index 0000000000..a3cdbd1861 --- /dev/null +++ b/change/@fluentui-react-native-avatar-49d36a47-b314-43fb-81f4-a04ef806ba77.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/avatar", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-badge-41fb84da-6f82-4d0b-94a8-4044e3a8990f.json b/change/@fluentui-react-native-badge-41fb84da-6f82-4d0b-94a8-4044e3a8990f.json new file mode 100644 index 0000000000..6bcc1f0e24 --- /dev/null +++ b/change/@fluentui-react-native-badge-41fb84da-6f82-4d0b-94a8-4044e3a8990f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/badge", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-button-8d908505-4e71-499b-92e1-e270d2d1581f.json b/change/@fluentui-react-native-button-8d908505-4e71-499b-92e1-e270d2d1581f.json new file mode 100644 index 0000000000..7a028db098 --- /dev/null +++ b/change/@fluentui-react-native-button-8d908505-4e71-499b-92e1-e270d2d1581f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/button", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-callout-ee5e698f-539c-48f5-833d-f3ab9ed9a8be.json b/change/@fluentui-react-native-callout-ee5e698f-539c-48f5-833d-f3ab9ed9a8be.json new file mode 100644 index 0000000000..d6a065cd50 --- /dev/null +++ b/change/@fluentui-react-native-callout-ee5e698f-539c-48f5-833d-f3ab9ed9a8be.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/callout", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-checkbox-3755d1db-dfe6-4ed9-b8c8-f72bc1f5fb86.json b/change/@fluentui-react-native-checkbox-3755d1db-dfe6-4ed9-b8c8-f72bc1f5fb86.json new file mode 100644 index 0000000000..2692343ae9 --- /dev/null +++ b/change/@fluentui-react-native-checkbox-3755d1db-dfe6-4ed9-b8c8-f72bc1f5fb86.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/checkbox", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-codemods-037d50ad-9f6c-44b8-a038-ed3b2cf91026.json b/change/@fluentui-react-native-codemods-037d50ad-9f6c-44b8-a038-ed3b2cf91026.json new file mode 100644 index 0000000000..5626a63ad8 --- /dev/null +++ b/change/@fluentui-react-native-codemods-037d50ad-9f6c-44b8-a038-ed3b2cf91026.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/codemods", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-component-cache-fa0569c4-4592-4a73-beac-4c1029fb936f.json b/change/@fluentui-react-native-component-cache-fa0569c4-4592-4a73-beac-4c1029fb936f.json new file mode 100644 index 0000000000..1257f4dce8 --- /dev/null +++ b/change/@fluentui-react-native-component-cache-fa0569c4-4592-4a73-beac-4c1029fb936f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/component-cache", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-composition-77dc6707-4161-4b59-80c5-163b814a9d75.json b/change/@fluentui-react-native-composition-77dc6707-4161-4b59-80c5-163b814a9d75.json new file mode 100644 index 0000000000..fb8c75e715 --- /dev/null +++ b/change/@fluentui-react-native-composition-77dc6707-4161-4b59-80c5-163b814a9d75.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/composition", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-contextual-menu-eb125a2a-871a-4ecc-9dae-4c6b0115de58.json b/change/@fluentui-react-native-contextual-menu-eb125a2a-871a-4ecc-9dae-4c6b0115de58.json new file mode 100644 index 0000000000..b41a55c992 --- /dev/null +++ b/change/@fluentui-react-native-contextual-menu-eb125a2a-871a-4ecc-9dae-4c6b0115de58.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/contextual-menu", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-default-theme-ec4345b9-9c8f-42a6-9488-f7df3734ee92.json b/change/@fluentui-react-native-default-theme-ec4345b9-9c8f-42a6-9488-f7df3734ee92.json new file mode 100644 index 0000000000..7dec7e9984 --- /dev/null +++ b/change/@fluentui-react-native-default-theme-ec4345b9-9c8f-42a6-9488-f7df3734ee92.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/default-theme", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-divider-fb7cf5c0-5a8d-4451-9112-0fa8e50be795.json b/change/@fluentui-react-native-divider-fb7cf5c0-5a8d-4451-9112-0fa8e50be795.json new file mode 100644 index 0000000000..c3c7d581d9 --- /dev/null +++ b/change/@fluentui-react-native-divider-fb7cf5c0-5a8d-4451-9112-0fa8e50be795.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/divider", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-dropdown-e2ab5bba-0519-41e1-88dd-15557903144e.json b/change/@fluentui-react-native-dropdown-e2ab5bba-0519-41e1-88dd-15557903144e.json new file mode 100644 index 0000000000..cd43333f0a --- /dev/null +++ b/change/@fluentui-react-native-dropdown-e2ab5bba-0519-41e1-88dd-15557903144e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/dropdown", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-e2e-testing-3635f358-ccea-4464-8934-12db25192da8.json b/change/@fluentui-react-native-e2e-testing-3635f358-ccea-4464-8934-12db25192da8.json new file mode 100644 index 0000000000..4846e89569 --- /dev/null +++ b/change/@fluentui-react-native-e2e-testing-3635f358-ccea-4464-8934-12db25192da8.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/e2e-testing", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-activity-indicator-5620f4eb-f82a-437f-bc09-c8d15fa3f390.json b/change/@fluentui-react-native-experimental-activity-indicator-5620f4eb-f82a-437f-bc09-c8d15fa3f390.json new file mode 100644 index 0000000000..8815333826 --- /dev/null +++ b/change/@fluentui-react-native-experimental-activity-indicator-5620f4eb-f82a-437f-bc09-c8d15fa3f390.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/experimental-activity-indicator", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-appearance-additions-efe7efd8-03a6-48b1-b08a-9524efa73470.json b/change/@fluentui-react-native-experimental-appearance-additions-efe7efd8-03a6-48b1-b08a-9524efa73470.json new file mode 100644 index 0000000000..5b8d343f82 --- /dev/null +++ b/change/@fluentui-react-native-experimental-appearance-additions-efe7efd8-03a6-48b1-b08a-9524efa73470.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/experimental-appearance-additions", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-avatar-7d8b0b54-ab3f-4164-80d5-ff7c9bdde3c9.json b/change/@fluentui-react-native-experimental-avatar-7d8b0b54-ab3f-4164-80d5-ff7c9bdde3c9.json new file mode 100644 index 0000000000..3e6257b7d7 --- /dev/null +++ b/change/@fluentui-react-native-experimental-avatar-7d8b0b54-ab3f-4164-80d5-ff7c9bdde3c9.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/experimental-avatar", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-checkbox-506563c6-6d18-4488-add7-bf30f632494a.json b/change/@fluentui-react-native-experimental-checkbox-506563c6-6d18-4488-add7-bf30f632494a.json new file mode 100644 index 0000000000..e12580ddda --- /dev/null +++ b/change/@fluentui-react-native-experimental-checkbox-506563c6-6d18-4488-add7-bf30f632494a.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/experimental-checkbox", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-drawer-cfff6e28-fc3c-4caf-aecd-74a03f0a752d.json b/change/@fluentui-react-native-experimental-drawer-cfff6e28-fc3c-4caf-aecd-74a03f0a752d.json new file mode 100644 index 0000000000..70d0aa09f8 --- /dev/null +++ b/change/@fluentui-react-native-experimental-drawer-cfff6e28-fc3c-4caf-aecd-74a03f0a752d.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/experimental-drawer", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-expander-c3014f62-b2e3-4ff9-b310-a3776a1e1076.json b/change/@fluentui-react-native-experimental-expander-c3014f62-b2e3-4ff9-b310-a3776a1e1076.json new file mode 100644 index 0000000000..600acb7590 --- /dev/null +++ b/change/@fluentui-react-native-experimental-expander-c3014f62-b2e3-4ff9-b310-a3776a1e1076.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/experimental-expander", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-menu-button-bd5509a6-d940-4b97-8f0f-9ad6afc9423e.json b/change/@fluentui-react-native-experimental-menu-button-bd5509a6-d940-4b97-8f0f-9ad6afc9423e.json new file mode 100644 index 0000000000..f0b665e632 --- /dev/null +++ b/change/@fluentui-react-native-experimental-menu-button-bd5509a6-d940-4b97-8f0f-9ad6afc9423e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/experimental-menu-button", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-native-font-metrics-96e8d26d-3239-4685-be1b-b5223ab023f3.json b/change/@fluentui-react-native-experimental-native-font-metrics-96e8d26d-3239-4685-be1b-b5223ab023f3.json new file mode 100644 index 0000000000..780cd690a1 --- /dev/null +++ b/change/@fluentui-react-native-experimental-native-font-metrics-96e8d26d-3239-4685-be1b-b5223ab023f3.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/experimental-native-font-metrics", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-radio-group-4a34dca9-9d12-4ef8-8f88-27d8c6523c5a.json b/change/@fluentui-react-native-experimental-radio-group-4a34dca9-9d12-4ef8-8f88-27d8c6523c5a.json new file mode 100644 index 0000000000..7cdfa87b15 --- /dev/null +++ b/change/@fluentui-react-native-experimental-radio-group-4a34dca9-9d12-4ef8-8f88-27d8c6523c5a.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/experimental-radio-group", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-shadow-8a346492-6a19-402f-ba63-46155a06ca25.json b/change/@fluentui-react-native-experimental-shadow-8a346492-6a19-402f-ba63-46155a06ca25.json new file mode 100644 index 0000000000..4ae185ef4a --- /dev/null +++ b/change/@fluentui-react-native-experimental-shadow-8a346492-6a19-402f-ba63-46155a06ca25.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/experimental-shadow", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-shimmer-7408253a-24a0-4292-9897-c2c8e145fc18.json b/change/@fluentui-react-native-experimental-shimmer-7408253a-24a0-4292-9897-c2c8e145fc18.json new file mode 100644 index 0000000000..ca6bcf5170 --- /dev/null +++ b/change/@fluentui-react-native-experimental-shimmer-7408253a-24a0-4292-9897-c2c8e145fc18.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/experimental-shimmer", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-experimental-tabs-1bae699a-88a1-4762-8033-5249c6b12c48.json b/change/@fluentui-react-native-experimental-tabs-1bae699a-88a1-4762-8033-5249c6b12c48.json new file mode 100644 index 0000000000..21e4a45692 --- /dev/null +++ b/change/@fluentui-react-native-experimental-tabs-1bae699a-88a1-4762-8033-5249c6b12c48.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/experimental-tabs", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-focus-trap-zone-5f0e6217-e76b-4401-af0b-5ff85831494e.json b/change/@fluentui-react-native-focus-trap-zone-5f0e6217-e76b-4401-af0b-5ff85831494e.json new file mode 100644 index 0000000000..95d5bd6ad4 --- /dev/null +++ b/change/@fluentui-react-native-focus-trap-zone-5f0e6217-e76b-4401-af0b-5ff85831494e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/focus-trap-zone", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-focus-zone-08a30799-8452-4ab8-a13c-8b0c98f498ab.json b/change/@fluentui-react-native-focus-zone-08a30799-8452-4ab8-a13c-8b0c98f498ab.json new file mode 100644 index 0000000000..608acf1f2e --- /dev/null +++ b/change/@fluentui-react-native-focus-zone-08a30799-8452-4ab8-a13c-8b0c98f498ab.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/focus-zone", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-framework-2efa1e92-a1a2-4899-bcbb-69caed20752f.json b/change/@fluentui-react-native-framework-2efa1e92-a1a2-4899-bcbb-69caed20752f.json new file mode 100644 index 0000000000..c2b3e09180 --- /dev/null +++ b/change/@fluentui-react-native-framework-2efa1e92-a1a2-4899-bcbb-69caed20752f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/framework", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-icon-4a120155-0d5f-449e-bd9b-3648c1847465.json b/change/@fluentui-react-native-icon-4a120155-0d5f-449e-bd9b-3648c1847465.json new file mode 100644 index 0000000000..59a8865ae4 --- /dev/null +++ b/change/@fluentui-react-native-icon-4a120155-0d5f-449e-bd9b-3648c1847465.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/icon", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-interactive-hooks-097d4add-1eac-4ff8-890f-10fed88eac46.json b/change/@fluentui-react-native-interactive-hooks-097d4add-1eac-4ff8-890f-10fed88eac46.json new file mode 100644 index 0000000000..391c87b757 --- /dev/null +++ b/change/@fluentui-react-native-interactive-hooks-097d4add-1eac-4ff8-890f-10fed88eac46.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/interactive-hooks", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-link-cdf8efaa-bd73-4e09-b401-dcd87654a28d.json b/change/@fluentui-react-native-link-cdf8efaa-bd73-4e09-b401-dcd87654a28d.json new file mode 100644 index 0000000000..1f644e5842 --- /dev/null +++ b/change/@fluentui-react-native-link-cdf8efaa-bd73-4e09-b401-dcd87654a28d.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/link", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-menu-button-2cada03e-be9f-4694-9cda-e7fbb89fbf25.json b/change/@fluentui-react-native-menu-button-2cada03e-be9f-4694-9cda-e7fbb89fbf25.json new file mode 100644 index 0000000000..121f9927c1 --- /dev/null +++ b/change/@fluentui-react-native-menu-button-2cada03e-be9f-4694-9cda-e7fbb89fbf25.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/menu-button", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-menu-f7c0606c-3a90-47a6-88f4-f77ed5040a3e.json b/change/@fluentui-react-native-menu-f7c0606c-3a90-47a6-88f4-f77ed5040a3e.json new file mode 100644 index 0000000000..6d3d2a9397 --- /dev/null +++ b/change/@fluentui-react-native-menu-f7c0606c-3a90-47a6-88f4-f77ed5040a3e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/menu", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-merge-props-cf15ffa7-3f73-4035-bb48-7ce93ad1c9b9.json b/change/@fluentui-react-native-merge-props-cf15ffa7-3f73-4035-bb48-7ce93ad1c9b9.json new file mode 100644 index 0000000000..6be69b2528 --- /dev/null +++ b/change/@fluentui-react-native-merge-props-cf15ffa7-3f73-4035-bb48-7ce93ad1c9b9.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/merge-props", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-notification-b0582e21-6a01-465b-8fe0-a380d787995d.json b/change/@fluentui-react-native-notification-b0582e21-6a01-465b-8fe0-a380d787995d.json new file mode 100644 index 0000000000..019ffdd0d0 --- /dev/null +++ b/change/@fluentui-react-native-notification-b0582e21-6a01-465b-8fe0-a380d787995d.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/notification", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-persona-coin-e9e7471b-f6fa-4ba9-a8bd-e0d4ebdf94ad.json b/change/@fluentui-react-native-persona-coin-e9e7471b-f6fa-4ba9-a8bd-e0d4ebdf94ad.json new file mode 100644 index 0000000000..7a37a87dd6 --- /dev/null +++ b/change/@fluentui-react-native-persona-coin-e9e7471b-f6fa-4ba9-a8bd-e0d4ebdf94ad.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/persona-coin", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-persona-dbc52bb1-6ef6-449a-8ca6-e4b296476f46.json b/change/@fluentui-react-native-persona-dbc52bb1-6ef6-449a-8ca6-e4b296476f46.json new file mode 100644 index 0000000000..68a3527859 --- /dev/null +++ b/change/@fluentui-react-native-persona-dbc52bb1-6ef6-449a-8ca6-e4b296476f46.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/persona", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-popover-1cdc0cbd-d3b6-4626-8c52-e344e4240082.json b/change/@fluentui-react-native-popover-1cdc0cbd-d3b6-4626-8c52-e344e4240082.json new file mode 100644 index 0000000000..4ef15820ef --- /dev/null +++ b/change/@fluentui-react-native-popover-1cdc0cbd-d3b6-4626-8c52-e344e4240082.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/popover", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-pressable-5a0caa08-71c3-402e-88df-58730174ec0d.json b/change/@fluentui-react-native-pressable-5a0caa08-71c3-402e-88df-58730174ec0d.json new file mode 100644 index 0000000000..953f732b5f --- /dev/null +++ b/change/@fluentui-react-native-pressable-5a0caa08-71c3-402e-88df-58730174ec0d.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/pressable", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-radio-group-9cb54f86-99f8-4a54-9261-45731efd3e1a.json b/change/@fluentui-react-native-radio-group-9cb54f86-99f8-4a54-9261-45731efd3e1a.json new file mode 100644 index 0000000000..e9cfea6826 --- /dev/null +++ b/change/@fluentui-react-native-radio-group-9cb54f86-99f8-4a54-9261-45731efd3e1a.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/radio-group", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-separator-a69c91ab-7780-4826-88fe-e7c6da758ccc.json b/change/@fluentui-react-native-separator-a69c91ab-7780-4826-88fe-e7c6da758ccc.json new file mode 100644 index 0000000000..4d53869301 --- /dev/null +++ b/change/@fluentui-react-native-separator-a69c91ab-7780-4826-88fe-e7c6da758ccc.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/separator", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-spinner-d5f204a2-e787-4f9b-aacd-64b8338f2bc0.json b/change/@fluentui-react-native-spinner-d5f204a2-e787-4f9b-aacd-64b8338f2bc0.json new file mode 100644 index 0000000000..291dac13bb --- /dev/null +++ b/change/@fluentui-react-native-spinner-d5f204a2-e787-4f9b-aacd-64b8338f2bc0.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/spinner", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-stack-4f825d30-7647-4ffc-bfa4-9c69c64b880f.json b/change/@fluentui-react-native-stack-4f825d30-7647-4ffc-bfa4-9c69c64b880f.json new file mode 100644 index 0000000000..60574bdb03 --- /dev/null +++ b/change/@fluentui-react-native-stack-4f825d30-7647-4ffc-bfa4-9c69c64b880f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/stack", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-switch-a6070f27-0290-4e28-9685-b64eaf363637.json b/change/@fluentui-react-native-switch-a6070f27-0290-4e28-9685-b64eaf363637.json new file mode 100644 index 0000000000..f8e0a74688 --- /dev/null +++ b/change/@fluentui-react-native-switch-a6070f27-0290-4e28-9685-b64eaf363637.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/switch", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-tabs-e4a1a4ed-52dc-4f3a-aa78-78e07a30a086.json b/change/@fluentui-react-native-tabs-e4a1a4ed-52dc-4f3a-aa78-78e07a30a086.json new file mode 100644 index 0000000000..c0d08b8c7d --- /dev/null +++ b/change/@fluentui-react-native-tabs-e4a1a4ed-52dc-4f3a-aa78-78e07a30a086.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/tabs", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-tester-b4d5b30b-210b-4baa-a742-361002b83b4d.json b/change/@fluentui-react-native-tester-b4d5b30b-210b-4baa-a742-361002b83b4d.json new file mode 100644 index 0000000000..1214559a41 --- /dev/null +++ b/change/@fluentui-react-native-tester-b4d5b30b-210b-4baa-a742-361002b83b4d.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/tester", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-tester-win32-a604e644-0116-4b39-963f-9f5dd9a8b4af.json b/change/@fluentui-react-native-tester-win32-a604e644-0116-4b39-963f-9f5dd9a8b4af.json new file mode 100644 index 0000000000..5666588525 --- /dev/null +++ b/change/@fluentui-react-native-tester-win32-a604e644-0116-4b39-963f-9f5dd9a8b4af.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/tester-win32", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-text-9b4b49ff-db9a-43e3-9b6c-d7f0381e309a.json b/change/@fluentui-react-native-text-9b4b49ff-db9a-43e3-9b6c-d7f0381e309a.json new file mode 100644 index 0000000000..5196111961 --- /dev/null +++ b/change/@fluentui-react-native-text-9b4b49ff-db9a-43e3-9b6c-d7f0381e309a.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/text", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-theme-b43a69c6-82e4-4040-b769-146cdee4ffee.json b/change/@fluentui-react-native-theme-b43a69c6-82e4-4040-b769-146cdee4ffee.json new file mode 100644 index 0000000000..fb7077e951 --- /dev/null +++ b/change/@fluentui-react-native-theme-b43a69c6-82e4-4040-b769-146cdee4ffee.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/theme", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-theme-tokens-4ff676eb-7bc6-4659-b561-32f9dfb6bd57.json b/change/@fluentui-react-native-theme-tokens-4ff676eb-7bc6-4659-b561-32f9dfb6bd57.json new file mode 100644 index 0000000000..e0eb73bb86 --- /dev/null +++ b/change/@fluentui-react-native-theme-tokens-4ff676eb-7bc6-4659-b561-32f9dfb6bd57.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/theme-tokens", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-theme-types-18903be3-f81d-4a9d-89a7-79e6c94b1c23.json b/change/@fluentui-react-native-theme-types-18903be3-f81d-4a9d-89a7-79e6c94b1c23.json new file mode 100644 index 0000000000..44ef578e96 --- /dev/null +++ b/change/@fluentui-react-native-theme-types-18903be3-f81d-4a9d-89a7-79e6c94b1c23.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/theme-types", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-themed-stylesheet-2814b6ab-cc92-4238-baa6-970dda781edd.json b/change/@fluentui-react-native-themed-stylesheet-2814b6ab-cc92-4238-baa6-970dda781edd.json new file mode 100644 index 0000000000..49b48530f6 --- /dev/null +++ b/change/@fluentui-react-native-themed-stylesheet-2814b6ab-cc92-4238-baa6-970dda781edd.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/themed-stylesheet", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-theming-utils-a6a24b5a-076f-4f12-b0a8-b1199a20240e.json b/change/@fluentui-react-native-theming-utils-a6a24b5a-076f-4f12-b0a8-b1199a20240e.json new file mode 100644 index 0000000000..2dbf8d13a6 --- /dev/null +++ b/change/@fluentui-react-native-theming-utils-a6a24b5a-076f-4f12-b0a8-b1199a20240e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/theming-utils", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-tokens-1d69a690-f279-4838-80d6-e5c2830fcc17.json b/change/@fluentui-react-native-tokens-1d69a690-f279-4838-80d6-e5c2830fcc17.json new file mode 100644 index 0000000000..53d794986f --- /dev/null +++ b/change/@fluentui-react-native-tokens-1d69a690-f279-4838-80d6-e5c2830fcc17.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/tokens", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-use-slot-34c57ce4-ff42-4cc7-aa11-1144c68c67ec.json b/change/@fluentui-react-native-use-slot-34c57ce4-ff42-4cc7-aa11-1144c68c67ec.json new file mode 100644 index 0000000000..c7509be45e --- /dev/null +++ b/change/@fluentui-react-native-use-slot-34c57ce4-ff42-4cc7-aa11-1144c68c67ec.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/use-slot", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-use-slots-88511bc0-c06a-4e1d-a410-1c306ccabd51.json b/change/@fluentui-react-native-use-slots-88511bc0-c06a-4e1d-a410-1c306ccabd51.json new file mode 100644 index 0000000000..83a58a3fd7 --- /dev/null +++ b/change/@fluentui-react-native-use-slots-88511bc0-c06a-4e1d-a410-1c306ccabd51.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/use-slots", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-use-styling-f2e18a73-0e65-4d10-af6d-91cd7391f373.json b/change/@fluentui-react-native-use-styling-f2e18a73-0e65-4d10-af6d-91cd7391f373.json new file mode 100644 index 0000000000..9a7c9bbd82 --- /dev/null +++ b/change/@fluentui-react-native-use-styling-f2e18a73-0e65-4d10-af6d-91cd7391f373.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/use-styling", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-use-tokens-e45b20cb-e6fd-48ce-94b2-bb249005d5f2.json b/change/@fluentui-react-native-use-tokens-e45b20cb-e6fd-48ce-94b2-bb249005d5f2.json new file mode 100644 index 0000000000..9ed905e728 --- /dev/null +++ b/change/@fluentui-react-native-use-tokens-e45b20cb-e6fd-48ce-94b2-bb249005d5f2.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/use-tokens", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-native-win32-theme-63968ec8-70c5-4e68-8dfc-2b1d1b361879.json b/change/@fluentui-react-native-win32-theme-63968ec8-70c5-4e68-8dfc-2b1d1b361879.json new file mode 100644 index 0000000000..965970d266 --- /dev/null +++ b/change/@fluentui-react-native-win32-theme-63968ec8-70c5-4e68-8dfc-2b1d1b361879.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@fluentui-react-native/win32-theme", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@uifabricshared-foundation-composable-c3a7e96b-581f-4873-a6a0-2e3b2ed796f9.json b/change/@uifabricshared-foundation-composable-c3a7e96b-581f-4873-a6a0-2e3b2ed796f9.json new file mode 100644 index 0000000000..fdfe56af6f --- /dev/null +++ b/change/@uifabricshared-foundation-composable-c3a7e96b-581f-4873-a6a0-2e3b2ed796f9.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@uifabricshared/foundation-composable", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@uifabricshared-foundation-settings-14d5a3a2-9aa7-48c4-85d7-86b954dd224a.json b/change/@uifabricshared-foundation-settings-14d5a3a2-9aa7-48c4-85d7-86b954dd224a.json new file mode 100644 index 0000000000..186624a1ca --- /dev/null +++ b/change/@uifabricshared-foundation-settings-14d5a3a2-9aa7-48c4-85d7-86b954dd224a.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@uifabricshared/foundation-settings", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@uifabricshared-foundation-tokens-feb4d1ac-efbe-4202-8404-79b5134743c3.json b/change/@uifabricshared-foundation-tokens-feb4d1ac-efbe-4202-8404-79b5134743c3.json new file mode 100644 index 0000000000..0fb35ef088 --- /dev/null +++ b/change/@uifabricshared-foundation-tokens-feb4d1ac-efbe-4202-8404-79b5134743c3.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@uifabricshared/foundation-tokens", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@uifabricshared-theme-registry-33610170-785d-4c0d-b2e2-037e324ba62d.json b/change/@uifabricshared-theme-registry-33610170-785d-4c0d-b2e2-037e324ba62d.json new file mode 100644 index 0000000000..dc0e931cc7 --- /dev/null +++ b/change/@uifabricshared-theme-registry-33610170-785d-4c0d-b2e2-037e324ba62d.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@uifabricshared/theme-registry", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@uifabricshared-themed-settings-54a7846b-9ad7-432c-9675-3899a227b50a.json b/change/@uifabricshared-themed-settings-54a7846b-9ad7-432c-9675-3899a227b50a.json new file mode 100644 index 0000000000..c2895c3158 --- /dev/null +++ b/change/@uifabricshared-themed-settings-54a7846b-9ad7-432c-9675-3899a227b50a.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@uifabricshared/themed-settings", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@uifabricshared-theming-ramp-45b98aad-90f9-4076-8146-d5df6b8410ac.json b/change/@uifabricshared-theming-ramp-45b98aad-90f9-4076-8146-d5df6b8410ac.json new file mode 100644 index 0000000000..eb92551b8f --- /dev/null +++ b/change/@uifabricshared-theming-ramp-45b98aad-90f9-4076-8146-d5df6b8410ac.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@uifabricshared/theming-ramp", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/@uifabricshared-theming-react-native-adaffaff-e190-4aaa-8f11-e367921ae2a6.json b/change/@uifabricshared-theming-react-native-adaffaff-e190-4aaa-8f11-e367921ae2a6.json new file mode 100644 index 0000000000..fbe2bd7d2d --- /dev/null +++ b/change/@uifabricshared-theming-react-native-adaffaff-e190-4aaa-8f11-e367921ae2a6.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Order imports", + "packageName": "@uifabricshared/theming-react-native", + "email": "78454019+lyzhan7@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/package.json b/package.json index 94bbbfd5f2..0769ef4993 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "@rnx-kit/align-deps": "^2.1.1", "babel-jest": "^24.9.0", "beachball": "^2.20.0", + "eslint-plugin-import": "^2.27.5", "lage": "^1.5.0", "markdown-link-check": "^3.8.7", "metro-react-native-babel-preset": "^0.67.0", diff --git a/packages/codemods/src/transform.ts b/packages/codemods/src/transform.ts index c28314b0bd..39157d6851 100644 --- a/packages/codemods/src/transform.ts +++ b/packages/codemods/src/transform.ts @@ -1,6 +1,7 @@ -import path from 'path'; -import yargs from 'yargs'; import { execSync } from 'child_process'; +import path from 'path'; + +import yargs from 'yargs'; const transformerDirectory = path.join(__dirname, 'transforms'); const jscodeshiftExecutable = require.resolve('.bin/jscodeshift'); diff --git a/packages/codemods/src/transforms/__testfixtures__/button-v0-to-v1.input.tsx b/packages/codemods/src/transforms/__testfixtures__/button-v0-to-v1.input.tsx index 5f0bf5e0d3..4b9edb2543 100644 --- a/packages/codemods/src/transforms/__testfixtures__/button-v0-to-v1.input.tsx +++ b/packages/codemods/src/transforms/__testfixtures__/button-v0-to-v1.input.tsx @@ -1,8 +1,9 @@ +import * as React from 'react'; + import { Button, PrimaryButton, StealthButton } from '@fluentui/react-native'; +import type { SvgIconProps } from '@fluentui-react-native/icon'; import type { IFocusable } from '@fluentui-react-native/interactive-hooks'; import { Stack } from '@fluentui-react-native/stack'; -import * as React from 'react'; -import type { SvgIconProps } from '@fluentui-react-native/icon'; export const ButtonFocusTest_deprecated: React.FunctionComponent = () => { const [state, setState] = React.useState({ diff --git a/packages/codemods/src/transforms/__testfixtures__/button-v0-to-v1.output.tsx b/packages/codemods/src/transforms/__testfixtures__/button-v0-to-v1.output.tsx index f4d7056850..7b979439ec 100644 --- a/packages/codemods/src/transforms/__testfixtures__/button-v0-to-v1.output.tsx +++ b/packages/codemods/src/transforms/__testfixtures__/button-v0-to-v1.output.tsx @@ -1,8 +1,9 @@ +import * as React from 'react'; + import { ButtonV1 as Button } from '@fluentui/react-native'; +import type { SvgIconProps } from '@fluentui-react-native/icon'; import type { IFocusable } from '@fluentui-react-native/interactive-hooks'; import { Stack } from '@fluentui-react-native/stack'; -import * as React from 'react'; -import type { SvgIconProps } from '@fluentui-react-native/icon'; export const ButtonFocusTest_deprecated: React.FunctionComponent = () => { const [state, setState] = React.useState({ diff --git a/packages/codemods/src/transforms/__testfixtures__/deprecate-exports.input.tsx b/packages/codemods/src/transforms/__testfixtures__/deprecate-exports.input.tsx index c3ad5ac0b7..65e504f306 100644 --- a/packages/codemods/src/transforms/__testfixtures__/deprecate-exports.input.tsx +++ b/packages/codemods/src/transforms/__testfixtures__/deprecate-exports.input.tsx @@ -1,7 +1,8 @@ -import type { IPartialTheme, ITheme, ThemeRegistry } from './Theme.types'; -import { createPlatformThemeRegistry } from './platform'; import type { IProcessTheme, IThemeEventListener, IThemeRegistry } from '@uifabricshared/theme-registry'; +import { createPlatformThemeRegistry } from './platform'; +import type { IPartialTheme, ITheme, ThemeRegistry } from './Theme.types'; + export { ITheme, IPartialTheme } from '@uifabricshared/theming-ramp'; export type IThemeDefinition = IPartialTheme | IProcessTheme; export type ThemeRegistry = IThemeRegistry; diff --git a/packages/codemods/src/transforms/__testfixtures__/deprecate-exports.output.tsx b/packages/codemods/src/transforms/__testfixtures__/deprecate-exports.output.tsx index 45b32a7ffe..50aee886e6 100644 --- a/packages/codemods/src/transforms/__testfixtures__/deprecate-exports.output.tsx +++ b/packages/codemods/src/transforms/__testfixtures__/deprecate-exports.output.tsx @@ -1,7 +1,8 @@ -import type { IPartialTheme, ITheme, ThemeRegistry } from './Theme.types'; -import { createPlatformThemeRegistry } from './platform'; import type { IProcessTheme, IThemeEventListener, IThemeRegistry } from '@uifabricshared/theme-registry'; +import { createPlatformThemeRegistry } from './platform'; +import type { IPartialTheme, ITheme, ThemeRegistry } from './Theme.types'; + /** * @deprecated */ diff --git a/packages/components/Avatar/src/Avatar.styling.ts b/packages/components/Avatar/src/Avatar.styling.ts index 90a0de193d..646f3af8f2 100644 --- a/packages/components/Avatar/src/Avatar.styling.ts +++ b/packages/components/Avatar/src/Avatar.styling.ts @@ -1,3 +1,9 @@ +import { Platform } from 'react-native'; + +import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; +import { buildProps } from '@fluentui-react-native/framework'; +import { borderStyles, fontStyles } from '@fluentui-react-native/tokens'; + import type { AvatarTokens, AvatarConfigurableProps, @@ -7,11 +13,7 @@ import type { AvatarColorSchemes, } from './Avatar.types'; import { AvatarName, AvatarColors, AvatarSizesForTokens, ColorSchemes } from './Avatar.types'; -import { Platform } from 'react-native'; -import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; -import { buildProps } from '@fluentui-react-native/framework'; import { defaultAvatarTokens } from './AvatarTokens'; -import { borderStyles, fontStyles } from '@fluentui-react-native/tokens'; import { getRingConfig, getRingSpacing, getIconStyles } from './stylingUtils'; export const avatarStates: (keyof AvatarTokens)[] = [ diff --git a/packages/components/Avatar/src/Avatar.tsx b/packages/components/Avatar/src/Avatar.tsx index f4bf3ed341..1ce0dc58d3 100644 --- a/packages/components/Avatar/src/Avatar.tsx +++ b/packages/components/Avatar/src/Avatar.tsx @@ -1,16 +1,18 @@ /** @jsx withSlots */ -import { Image, View, Text, Platform } from 'react-native'; import { Fragment } from 'react'; -import type { AvatarProps, AvatarType, AvatarState, AvatarSlotProps } from './Avatar.types'; -import { AvatarName } from './Avatar.types'; -import { stylingSettings } from './Avatar.styling'; +import { Image, View, Text, Platform } from 'react-native'; + +import { PresenceBadge } from '@fluentui-react-native/badge'; import type { UseSlots, Slots } from '@fluentui-react-native/framework'; import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework'; -import { useAvatar } from './useAvatar'; -import { PresenceBadge } from '@fluentui-react-native/badge'; import { Icon } from '@fluentui-react-native/icon'; import { Svg, Path } from 'react-native-svg'; +import { stylingSettings } from './Avatar.styling'; +import type { AvatarProps, AvatarType, AvatarState, AvatarSlotProps } from './Avatar.types'; +import { AvatarName } from './Avatar.types'; +import { useAvatar } from './useAvatar'; + /** * A function which determines if a set of styles should be applied to the component given the current state and props of the avatar. * diff --git a/packages/components/Avatar/src/Avatar.types.ts b/packages/components/Avatar/src/Avatar.types.ts index c92f55f58a..49b781ca14 100644 --- a/packages/components/Avatar/src/Avatar.types.ts +++ b/packages/components/Avatar/src/Avatar.types.ts @@ -1,8 +1,9 @@ -import type { IViewProps } from '@fluentui-react-native/adapters'; import type { ImageProps, ViewProps, TextProps, ColorValue } from 'react-native'; -import type { IBackgroundColorTokens, IForegroundColorTokens, IBorderTokens, FontTokens } from '@fluentui-react-native/tokens'; + +import type { IViewProps } from '@fluentui-react-native/adapters'; import type { PresenceBadgeProps, BadgeSize, PresenceBadgeStatus } from '@fluentui-react-native/badge'; import type { IconProps, IconSourcesType } from '@fluentui-react-native/icon'; +import type { IBackgroundColorTokens, IForegroundColorTokens, IBorderTokens, FontTokens } from '@fluentui-react-native/tokens'; import type { SvgProps } from 'react-native-svg'; export const AvatarName = 'Avatar'; diff --git a/packages/components/Avatar/src/AvatarTokens.mobile.ts b/packages/components/Avatar/src/AvatarTokens.mobile.ts index 7d0f909afa..396e6b65c5 100644 --- a/packages/components/Avatar/src/AvatarTokens.mobile.ts +++ b/packages/components/Avatar/src/AvatarTokens.mobile.ts @@ -1,7 +1,8 @@ import type { Theme } from '@fluentui-react-native/framework'; -import type { TokenSettings } from '@fluentui-react-native/use-styling'; -import type { AvatarTokens } from '.'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import type { TokenSettings } from '@fluentui-react-native/use-styling'; + +import type { AvatarTokens } from '.'; export const defaultAvatarTokens: TokenSettings = (t: Theme) => ({ diff --git a/packages/components/Avatar/src/AvatarTokens.ts b/packages/components/Avatar/src/AvatarTokens.ts index f0affb498a..c007a5acac 100644 --- a/packages/components/Avatar/src/AvatarTokens.ts +++ b/packages/components/Avatar/src/AvatarTokens.ts @@ -1,7 +1,8 @@ import type { Theme } from '@fluentui-react-native/framework'; -import type { TokenSettings } from '@fluentui-react-native/use-styling'; -import type { AvatarTokens } from '.'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import type { TokenSettings } from '@fluentui-react-native/use-styling'; + +import type { AvatarTokens } from '.'; export const defaultAvatarTokens: TokenSettings = (t: Theme) => ({ diff --git a/packages/components/Avatar/src/AvatarTokens.win32.ts b/packages/components/Avatar/src/AvatarTokens.win32.ts index 58f559cbdf..d0303e563b 100644 --- a/packages/components/Avatar/src/AvatarTokens.win32.ts +++ b/packages/components/Avatar/src/AvatarTokens.win32.ts @@ -1,7 +1,8 @@ import type { Theme } from '@fluentui-react-native/framework'; -import type { TokenSettings } from '@fluentui-react-native/use-styling'; -import type { AvatarTokens } from '.'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import type { TokenSettings } from '@fluentui-react-native/use-styling'; + +import type { AvatarTokens } from '.'; export const defaultAvatarTokens: TokenSettings = (t: Theme) => ({ diff --git a/packages/components/Avatar/src/__tests__/Avatar.test.jsx b/packages/components/Avatar/src/__tests__/Avatar.test.jsx index 26fccdf7ae..0f1cc71dd8 100644 --- a/packages/components/Avatar/src/__tests__/Avatar.test.jsx +++ b/packages/components/Avatar/src/__tests__/Avatar.test.jsx @@ -1,7 +1,9 @@ import * as React from 'react'; + +import * as renderer from 'react-test-renderer'; + import { Avatar } from '..'; import { getInitials, resolveColorfulToSpecificColor } from '../useAvatar'; -import * as renderer from 'react-test-renderer'; const emptyData = [ [undefined, ''], diff --git a/packages/components/Avatar/src/stylingUtils.android.ts b/packages/components/Avatar/src/stylingUtils.android.ts index d9d7ea4032..9abba93f48 100644 --- a/packages/components/Avatar/src/stylingUtils.android.ts +++ b/packages/components/Avatar/src/stylingUtils.android.ts @@ -1,4 +1,5 @@ import { globalTokens } from '@fluentui-react-native/theme-tokens'; + import type { RingConfig, AvatarTokens } from './Avatar.types'; export function getRingConfig(tokens: AvatarTokens): RingConfig { diff --git a/packages/components/Avatar/src/stylingUtils.ts b/packages/components/Avatar/src/stylingUtils.ts index 7a6075e2af..e1069bdaf7 100644 --- a/packages/components/Avatar/src/stylingUtils.ts +++ b/packages/components/Avatar/src/stylingUtils.ts @@ -1,4 +1,5 @@ import { globalTokens } from '@fluentui-react-native/theme-tokens'; + import type { RingConfig, AvatarTokens } from './Avatar.types'; export function getRingConfig(tokens: AvatarTokens): RingConfig { diff --git a/packages/components/Avatar/src/useAvatar.ts b/packages/components/Avatar/src/useAvatar.ts index 0bb2feb065..130ef1533b 100644 --- a/packages/components/Avatar/src/useAvatar.ts +++ b/packages/components/Avatar/src/useAvatar.ts @@ -1,10 +1,12 @@ import type { ImageProps, ImageSourcePropType } from 'react-native'; + +import type { PresenceBadgeProps } from '@fluentui-react-native/badge'; +import { createIconProps } from '@fluentui-react-native/icon'; + import type { AvatarProps, AvatarInfo, AvatarState, AvatarSize, AvatarColor } from './Avatar.types'; import { AvatarColors } from './Avatar.types'; -import type { PresenceBadgeProps } from '@fluentui-react-native/badge'; -import { titles, multiWordTitles } from './titles'; import { getHashCodeWeb } from './getHashCode'; -import { createIconProps } from '@fluentui-react-native/icon'; +import { titles, multiWordTitles } from './titles'; /** * Re-usable hook for FURN Avatar. diff --git a/packages/components/Badge/src/Badge.styling.ts b/packages/components/Badge/src/Badge.styling.ts index 670efe1e6d..8e17bffa51 100644 --- a/packages/components/Badge/src/Badge.styling.ts +++ b/packages/components/Badge/src/Badge.styling.ts @@ -1,11 +1,12 @@ -import type { BadgeCoreTokens, BadgeTokens, BadgeSlotProps, BadgeProps, BadgeConfigurableProps, BadgeNamedColor } from './Badge.types'; -import { badgeName, BadgeColors, BadgeSizes, BadgeShapes, BadgeAppearances } from './Badge.types'; import type { UseStylingOptions, Theme } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; import { borderStyles, layoutStyles, fontStyles } from '@fluentui-react-native/tokens'; -import { defaultBadgeTokens } from './BadgeTokens'; + +import { badgeName, BadgeColors, BadgeSizes, BadgeShapes, BadgeAppearances } from './Badge.types'; +import type { BadgeCoreTokens, BadgeTokens, BadgeSlotProps, BadgeProps, BadgeConfigurableProps, BadgeNamedColor } from './Badge.types'; import { defaultBadgeColorTokens } from './BadgeColorTokens'; import { badgeFontTokens } from './BadgeFontTokens'; +import { defaultBadgeTokens } from './BadgeTokens'; export const coreBadgeStates: (keyof BadgeCoreTokens)[] = [...BadgeSizes, ...BadgeShapes]; export const badgeStates: (keyof BadgeTokens)[] = [...coreBadgeStates, ...BadgeColors, ...BadgeAppearances, 'rtl', 'shadowToken']; diff --git a/packages/components/Badge/src/Badge.tsx b/packages/components/Badge/src/Badge.tsx index ae8fdfba61..bb3118ccd6 100644 --- a/packages/components/Badge/src/Badge.tsx +++ b/packages/components/Badge/src/Badge.tsx @@ -2,15 +2,17 @@ import type { ReactNode } from 'react'; import { Children } from 'react'; import { View, I18nManager } from 'react-native'; -import type { BadgeType, BadgeProps } from './Badge.types'; -import { badgeName } from './Badge.types'; -import { TextV1 as Text } from '@fluentui-react-native/text'; + +import { Shadow } from '@fluentui-react-native/experimental-shadow'; import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, withSlots, mergeProps } from '@fluentui-react-native/framework'; import { Icon, createIconProps } from '@fluentui-react-native/icon'; +import { TextV1 as Text } from '@fluentui-react-native/text'; + import { stylingSettings } from './Badge.styling'; +import type { BadgeType, BadgeProps } from './Badge.types'; +import { badgeName } from './Badge.types'; import { useBadge } from './useBadge'; -import { Shadow } from '@fluentui-react-native/experimental-shadow'; export const badgeLookup = (layer: string, userProps: BadgeProps): boolean => { return ( diff --git a/packages/components/Badge/src/Badge.types.ts b/packages/components/Badge/src/Badge.types.ts index d057752ea9..d3ce5b8dfe 100644 --- a/packages/components/Badge/src/Badge.types.ts +++ b/packages/components/Badge/src/Badge.types.ts @@ -1,10 +1,11 @@ import type { ColorValue, FlexStyle } from 'react-native'; -import type { TextProps } from '@fluentui-react-native/text'; -import type { FontTokens, IBorderTokens, IColorTokens, IShadowTokens, LayoutTokens } from '@fluentui-react-native/tokens'; + import type { IViewProps } from '@fluentui-react-native/adapters'; -import type { IconProps, IconSourcesType } from '@fluentui-react-native/icon'; import type { ShadowProps } from '@fluentui-react-native/experimental-shadow'; +import type { IconProps, IconSourcesType } from '@fluentui-react-native/icon'; +import type { TextProps } from '@fluentui-react-native/text'; import type { ShadowToken } from '@fluentui-react-native/theme-types'; +import type { FontTokens, IBorderTokens, IColorTokens, IShadowTokens, LayoutTokens } from '@fluentui-react-native/tokens'; export const badgeName = 'Badge'; export const BadgeSizes = ['tiny', 'extraSmall', 'small', 'medium', 'large', 'extraLarge'] as const; diff --git a/packages/components/Badge/src/BadgeColorTokens.ts b/packages/components/Badge/src/BadgeColorTokens.ts index 7f30f7dbdf..0001d39a8d 100644 --- a/packages/components/Badge/src/BadgeColorTokens.ts +++ b/packages/components/Badge/src/BadgeColorTokens.ts @@ -1,5 +1,6 @@ import type { Theme, TokenSettings } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; + import type { BadgeTokens } from './Badge.types'; import { getFilledColorProps, getOutlineColorProps, getTintColorProps, getGhostColorProps } from './colorHelper'; diff --git a/packages/components/Badge/src/BadgeColorTokens.win32.ts b/packages/components/Badge/src/BadgeColorTokens.win32.ts index 37364a3119..a0e9805dfa 100644 --- a/packages/components/Badge/src/BadgeColorTokens.win32.ts +++ b/packages/components/Badge/src/BadgeColorTokens.win32.ts @@ -1,5 +1,6 @@ import type { Theme, TokenSettings } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; + import type { BadgeTokens } from './Badge.types'; import { getFilledColorProps, getOutlineColorProps, getTintColorProps, getGhostColorProps, getWin32Props } from './colorHelper'; diff --git a/packages/components/Badge/src/BadgeFontTokens.ts b/packages/components/Badge/src/BadgeFontTokens.ts index 3fbe68c2e3..7a302ee16e 100644 --- a/packages/components/Badge/src/BadgeFontTokens.ts +++ b/packages/components/Badge/src/BadgeFontTokens.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { BadgeTokens } from './Badge.types'; export const badgeFontTokens: TokenSettings = () => diff --git a/packages/components/Badge/src/BadgeFontTokens.win32.ts b/packages/components/Badge/src/BadgeFontTokens.win32.ts index 2da9f53411..867d285b92 100644 --- a/packages/components/Badge/src/BadgeFontTokens.win32.ts +++ b/packages/components/Badge/src/BadgeFontTokens.win32.ts @@ -1,6 +1,7 @@ import type { Theme } from '@fluentui-react-native/framework'; -import type { TokenSettings } from '@fluentui-react-native/use-styling'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { BadgeTokens } from './Badge.types'; export const badgeFontTokens: TokenSettings = (t: Theme) => diff --git a/packages/components/Badge/src/BadgeTokens.ts b/packages/components/Badge/src/BadgeTokens.ts index eb4ab2e5d9..a0571dc7b8 100644 --- a/packages/components/Badge/src/BadgeTokens.ts +++ b/packages/components/Badge/src/BadgeTokens.ts @@ -1,6 +1,7 @@ import type { Theme } from '@fluentui-react-native/framework'; -import type { TokenSettings } from '@fluentui-react-native/use-styling'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { BadgeTokens } from './Badge.types'; export const defaultBadgeTokens: TokenSettings = () => diff --git a/packages/components/Badge/src/CounterBadge/CounterBadge.styling.ts b/packages/components/Badge/src/CounterBadge/CounterBadge.styling.ts index 0cabc8e459..36a3b38dfa 100644 --- a/packages/components/Badge/src/CounterBadge/CounterBadge.styling.ts +++ b/packages/components/Badge/src/CounterBadge/CounterBadge.styling.ts @@ -1,12 +1,13 @@ -import type { CounterBadgeTokens, CounterBadgeProps, CounterBadgeSlotProps } from './CounterBadge.types'; -import { counterBadgeName } from './CounterBadge.types'; import type { UseStylingOptions, Theme } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; import { borderStyles } from '@fluentui-react-native/tokens'; -import { defaultBadgeTokens } from '../BadgeTokens'; -import { defaultBadgeColorTokens } from '../BadgeColorTokens'; -import { badgeStates, getBadgePosition } from '../Badge.styling'; + +import { counterBadgeName } from './CounterBadge.types'; +import type { CounterBadgeTokens, CounterBadgeProps, CounterBadgeSlotProps } from './CounterBadge.types'; import { counterBadgeTokens } from './CounterBadgeTokens'; +import { badgeStates, getBadgePosition } from '../Badge.styling'; +import { defaultBadgeColorTokens } from '../BadgeColorTokens'; +import { defaultBadgeTokens } from '../BadgeTokens'; export const counterBadgeStates: (keyof CounterBadgeTokens)[] = [...badgeStates, 'dot']; const tokensThatAreAlsoProps: (keyof CounterBadgeTokens)[] = ['shadowToken']; diff --git a/packages/components/Badge/src/CounterBadge/CounterBadge.tsx b/packages/components/Badge/src/CounterBadge/CounterBadge.tsx index 2ee6f9cc7f..8c16e15c20 100644 --- a/packages/components/Badge/src/CounterBadge/CounterBadge.tsx +++ b/packages/components/Badge/src/CounterBadge/CounterBadge.tsx @@ -2,16 +2,18 @@ import type { ReactNode } from 'react'; import React, { Children } from 'react'; import { View } from 'react-native'; -import type { CounterBadgeType, CounterBadgeProps } from './CounterBadge.types'; -import { counterBadgeName } from './CounterBadge.types'; + +import { Shadow } from '@fluentui-react-native/experimental-shadow'; import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, withSlots, mergeProps } from '@fluentui-react-native/framework'; -import { stylingSettings } from './CounterBadge.styling'; import { Icon, createIconProps } from '@fluentui-react-native/icon'; -import { badgeLookup } from '../Badge'; -import { useCounterBadge } from './useCounterBadge'; import { TextV1 as Text } from '@fluentui-react-native/text'; -import { Shadow } from '@fluentui-react-native/experimental-shadow'; + +import { stylingSettings } from './CounterBadge.styling'; +import type { CounterBadgeType, CounterBadgeProps } from './CounterBadge.types'; +import { counterBadgeName } from './CounterBadge.types'; +import { useCounterBadge } from './useCounterBadge'; +import { badgeLookup } from '../Badge'; export const CounterBadge = compose({ displayName: counterBadgeName, diff --git a/packages/components/Badge/src/CounterBadge/CounterBadgeTokens.ts b/packages/components/Badge/src/CounterBadge/CounterBadgeTokens.ts index ae86c5a52d..61df849acc 100644 --- a/packages/components/Badge/src/CounterBadge/CounterBadgeTokens.ts +++ b/packages/components/Badge/src/CounterBadge/CounterBadgeTokens.ts @@ -1,5 +1,6 @@ import type { TokenSettings } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; + import type { CounterBadgeTokens } from './CounterBadge.types'; export const counterBadgeTokens: TokenSettings = () => diff --git a/packages/components/Badge/src/PresenceBadge/PresenceBadge.styling.ts b/packages/components/Badge/src/PresenceBadge/PresenceBadge.styling.ts index e564ed3440..a6e8abd4a7 100644 --- a/packages/components/Badge/src/PresenceBadge/PresenceBadge.styling.ts +++ b/packages/components/Badge/src/PresenceBadge/PresenceBadge.styling.ts @@ -1,12 +1,13 @@ -import type { PresenceBadgeTokens, PresenceBadgeSlotProps, PresenceBadgeProps } from './PresenceBadge.types'; -import { presenceBadgeName, PresenceBadgeStatuses } from './PresenceBadge.types'; -import type { BadgeConfigurableProps } from '../Badge.types'; import type { UseStylingOptions, Theme } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; import { borderStyles } from '@fluentui-react-native/tokens'; -import { defaultBadgeTokens } from '../BadgeTokens'; + +import { presenceBadgeName, PresenceBadgeStatuses } from './PresenceBadge.types'; +import type { PresenceBadgeTokens, PresenceBadgeSlotProps, PresenceBadgeProps } from './PresenceBadge.types'; import { defaultPresenceBadgeTokens } from './PresenceBadgeTokens'; import { coreBadgeStates, getBadgePosition } from '../Badge.styling'; +import type { BadgeConfigurableProps } from '../Badge.types'; +import { defaultBadgeTokens } from '../BadgeTokens'; export const badgeStates: (keyof PresenceBadgeTokens)[] = [...coreBadgeStates, ...PresenceBadgeStatuses]; const tokensThatAreAlsoProps: (keyof BadgeConfigurableProps)[] = ['position']; diff --git a/packages/components/Badge/src/PresenceBadge/PresenceBadge.tsx b/packages/components/Badge/src/PresenceBadge/PresenceBadge.tsx index 92da943640..4f5e67da42 100644 --- a/packages/components/Badge/src/PresenceBadge/PresenceBadge.tsx +++ b/packages/components/Badge/src/PresenceBadge/PresenceBadge.tsx @@ -1,12 +1,14 @@ /** @jsx withSlots */ import { View } from 'react-native'; -import type { PresenceBadgeType, PresenceBadgeProps, PresenceBadgeStatus } from './PresenceBadge.types'; -import { presenceBadgeName } from './PresenceBadge.types'; + import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, withSlots, mergeProps } from '@fluentui-react-native/framework'; -import { presenceIconPaths } from './presenceIconPaths'; import { Svg, Path } from 'react-native-svg'; + import { stylingSettings } from './PresenceBadge.styling'; +import type { PresenceBadgeType, PresenceBadgeProps, PresenceBadgeStatus } from './PresenceBadge.types'; +import { presenceBadgeName } from './PresenceBadge.types'; +import { presenceIconPaths } from './presenceIconPaths'; import { useBadge } from '../useBadge'; export const prensenceBadgeLookup = (layer: string, userProps: PresenceBadgeProps): boolean => { diff --git a/packages/components/Badge/src/PresenceBadge/PresenceBadge.types.ts b/packages/components/Badge/src/PresenceBadge/PresenceBadge.types.ts index 21f02f672a..ddaed970ab 100644 --- a/packages/components/Badge/src/PresenceBadge/PresenceBadge.types.ts +++ b/packages/components/Badge/src/PresenceBadge/PresenceBadge.types.ts @@ -1,4 +1,5 @@ import type { SvgProps } from 'react-native-svg'; + import type { BadgeCoreProps, BadgeSlotProps } from '../'; import type { BadgeCoreTokens, BadgeConfigurableProps } from '../Badge.types'; diff --git a/packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.macos.ts b/packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.macos.ts index 259b208f68..c3b2beb6f2 100644 --- a/packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.macos.ts +++ b/packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.macos.ts @@ -1,5 +1,6 @@ import type { TokenSettings } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; + import type { PresenceBadgeTokens } from './PresenceBadge.types'; export const defaultPresenceBadgeTokens: TokenSettings = (): PresenceBadgeTokens => diff --git a/packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.ts b/packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.ts index abc0e56618..c1a6f8b083 100644 --- a/packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.ts +++ b/packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.ts @@ -1,5 +1,6 @@ import type { TokenSettings, Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; + import type { PresenceBadgeTokens } from './PresenceBadge.types'; export const defaultPresenceBadgeTokens: TokenSettings = (t: Theme): PresenceBadgeTokens => diff --git a/packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.win32.ts b/packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.win32.ts index a9a2d7c774..47784eef51 100644 --- a/packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.win32.ts +++ b/packages/components/Badge/src/PresenceBadge/PresenceBadgeTokens.win32.ts @@ -1,5 +1,6 @@ import type { TokenSettings, Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; + import type { PresenceBadgeTokens } from './PresenceBadge.types'; export const defaultPresenceBadgeTokens: TokenSettings = (t: Theme): PresenceBadgeTokens => diff --git a/packages/components/Badge/src/__tests__/Badge.test.tsx b/packages/components/Badge/src/__tests__/Badge.test.tsx index 885dc7c57c..5b91bcd4d3 100644 --- a/packages/components/Badge/src/__tests__/Badge.test.tsx +++ b/packages/components/Badge/src/__tests__/Badge.test.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; -import { Badge, CounterBadge, PresenceBadge } from '../'; -import * as renderer from 'react-test-renderer'; + import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools'; +import * as renderer from 'react-test-renderer'; + +import { Badge, CounterBadge, PresenceBadge } from '../'; describe('Badge component tests', () => { const fontBuiltInProps = { diff --git a/packages/components/Badge/src/colorHelper.ts b/packages/components/Badge/src/colorHelper.ts index f62f288b9d..a751f38bd6 100644 --- a/packages/components/Badge/src/colorHelper.ts +++ b/packages/components/Badge/src/colorHelper.ts @@ -1,4 +1,5 @@ import type { ColorValue } from 'react-native'; + import type { Theme } from '@fluentui-react-native/framework'; export type BadgeColors = { diff --git a/packages/components/Button/src/Button.styling.ts b/packages/components/Button/src/Button.styling.ts index 3d503baf0e..6e32adf401 100644 --- a/packages/components/Button/src/Button.styling.ts +++ b/packages/components/Button/src/Button.styling.ts @@ -1,15 +1,17 @@ -import type { ButtonTokens, ButtonSlotProps, ButtonProps, ButtonSize, ButtonAppearance } from './Button.types'; -import { buttonName } from './Button.types'; -import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; -import { buildProps } from '@fluentui-react-native/framework'; -import type { FontTokens } from '@fluentui-react-native/tokens'; -import { borderStyles, layoutStyles, fontStyles } from '@fluentui-react-native/tokens'; -import { defaultButtonTokens } from './ButtonTokens'; -import { defaultButtonColorTokens } from './ButtonColorTokens'; import type { ColorValue } from 'react-native'; import { Platform } from 'react-native'; + +import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; +import { buildProps } from '@fluentui-react-native/framework'; import { getTextMarginAdjustment } from '@fluentui-react-native/styling-utils'; +import { borderStyles, layoutStyles, fontStyles } from '@fluentui-react-native/tokens'; +import type { FontTokens } from '@fluentui-react-native/tokens'; + +import { buttonName } from './Button.types'; +import type { ButtonTokens, ButtonSlotProps, ButtonProps, ButtonSize, ButtonAppearance } from './Button.types'; +import { defaultButtonColorTokens } from './ButtonColorTokens'; import { defaultButtonFontTokens } from './ButtonFontTokens'; +import { defaultButtonTokens } from './ButtonTokens'; export const buttonStates: (keyof ButtonTokens)[] = [ 'block', diff --git a/packages/components/Button/src/Button.test.tsx b/packages/components/Button/src/Button.test.tsx index c459ae6179..41ce61659a 100644 --- a/packages/components/Button/src/Button.test.tsx +++ b/packages/components/Button/src/Button.test.tsx @@ -1,9 +1,11 @@ import * as React from 'react'; -import { Button } from './Button'; -import * as renderer from 'react-test-renderer'; -import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools'; import { Pressable, Text } from 'react-native'; + import { Icon } from '@fluentui-react-native/icon'; +import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools'; +import * as renderer from 'react-test-renderer'; + +import { Button } from './Button'; describe('Button component tests', () => { it('Button default', () => { diff --git a/packages/components/Button/src/Button.tsx b/packages/components/Button/src/Button.tsx index 4d8ec5557a..19b0b9350d 100644 --- a/packages/components/Button/src/Button.tsx +++ b/packages/components/Button/src/Button.tsx @@ -1,17 +1,19 @@ /** @jsx withSlots */ import * as React from 'react'; import { Platform, Pressable, View } from 'react-native'; + import { ActivityIndicator } from '@fluentui-react-native/experimental-activity-indicator'; -import type { ButtonType, ButtonProps } from './Button.types'; -import { buttonName } from './Button.types'; -import { TextV1 as Text } from '@fluentui-react-native/text'; -import { stylingSettings, getDefaultSize, getPlatformSpecificAppearance } from './Button.styling'; import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework'; -import { useButton } from './useButton'; import { Icon, createIconProps } from '@fluentui-react-native/icon'; import type { IPressableState } from '@fluentui-react-native/interactive-hooks'; +import { TextV1 as Text } from '@fluentui-react-native/text'; + +import { stylingSettings, getDefaultSize, getPlatformSpecificAppearance } from './Button.styling'; +import { buttonName } from './Button.types'; +import type { ButtonType, ButtonProps } from './Button.types'; import { extractOuterStylePropsAndroid } from './ExtractStyle.android'; +import { useButton } from './useButton'; /** * A function which determines if a set of styles should be applied to the component given the current state and props of the button. diff --git a/packages/components/Button/src/Button.types.ts b/packages/components/Button/src/Button.types.ts index d651fc4873..da2c2d68f0 100644 --- a/packages/components/Button/src/Button.types.ts +++ b/packages/components/Button/src/Button.types.ts @@ -1,11 +1,12 @@ import type * as React from 'react'; import type { ViewStyle, ColorValue } from 'react-native'; -import type { TextProps } from '@fluentui-react-native/text'; -import type { FontTokens, IBorderTokens, IColorTokens, IShadowTokens, LayoutTokens } from '@fluentui-react-native/tokens'; -import type { IFocusable, InteractionEvent, PressablePropsExtended, PressableState } from '@fluentui-react-native/interactive-hooks'; -import type { IconProps, IconSourcesType } from '@fluentui-react-native/icon'; -import type { ShadowToken } from '@fluentui-react-native/theme-types'; + import type { IViewProps } from '@fluentui-react-native/adapters'; +import type { IconProps, IconSourcesType } from '@fluentui-react-native/icon'; +import type { IFocusable, InteractionEvent, PressablePropsExtended, PressableState } from '@fluentui-react-native/interactive-hooks'; +import type { TextProps } from '@fluentui-react-native/text'; +import type { ShadowToken } from '@fluentui-react-native/theme-types'; +import type { FontTokens, IBorderTokens, IColorTokens, IShadowTokens, LayoutTokens } from '@fluentui-react-native/tokens'; export const buttonName = 'Button'; export type ButtonSize = 'small' | 'medium' | 'large'; diff --git a/packages/components/Button/src/ButtonColorTokens.android.ts b/packages/components/Button/src/ButtonColorTokens.android.ts index d0e28331e9..077f8f97bb 100644 --- a/packages/components/Button/src/ButtonColorTokens.android.ts +++ b/packages/components/Button/src/ButtonColorTokens.android.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { ButtonTokens } from './Button.types'; export const defaultButtonColorTokens: TokenSettings = (t: Theme) => diff --git a/packages/components/Button/src/ButtonColorTokens.macos.ts b/packages/components/Button/src/ButtonColorTokens.macos.ts index 9cf75871a7..d324820617 100644 --- a/packages/components/Button/src/ButtonColorTokens.macos.ts +++ b/packages/components/Button/src/ButtonColorTokens.macos.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { ButtonTokens } from './Button.types'; export const defaultButtonColorTokens: TokenSettings = (t: Theme) => diff --git a/packages/components/Button/src/ButtonColorTokens.ts b/packages/components/Button/src/ButtonColorTokens.ts index 3dbb1c5d4e..63d9c780c1 100644 --- a/packages/components/Button/src/ButtonColorTokens.ts +++ b/packages/components/Button/src/ButtonColorTokens.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { ButtonTokens } from './Button.types'; export const defaultButtonColorTokens: TokenSettings = (t: Theme) => diff --git a/packages/components/Button/src/ButtonColorTokens.win32.ts b/packages/components/Button/src/ButtonColorTokens.win32.ts index 1186bf735f..2d47f34cfa 100644 --- a/packages/components/Button/src/ButtonColorTokens.win32.ts +++ b/packages/components/Button/src/ButtonColorTokens.win32.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { ButtonTokens } from './Button.types'; export const defaultButtonColorTokens: TokenSettings = (t: Theme) => diff --git a/packages/components/Button/src/ButtonColorTokens.windows.ts b/packages/components/Button/src/ButtonColorTokens.windows.ts index 48aeaf1353..ad1a36c685 100644 --- a/packages/components/Button/src/ButtonColorTokens.windows.ts +++ b/packages/components/Button/src/ButtonColorTokens.windows.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { ButtonTokens } from './Button.types'; export const defaultButtonColorTokens: TokenSettings = (t: Theme) => diff --git a/packages/components/Button/src/ButtonFontTokens.android.ts b/packages/components/Button/src/ButtonFontTokens.android.ts index 65afcbab84..fa93871e5f 100644 --- a/packages/components/Button/src/ButtonFontTokens.android.ts +++ b/packages/components/Button/src/ButtonFontTokens.android.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { ButtonTokens } from './Button.types'; export const defaultButtonFontTokens: TokenSettings = (t: Theme) => diff --git a/packages/components/Button/src/ButtonFontTokens.macos.ts b/packages/components/Button/src/ButtonFontTokens.macos.ts index 7fd4b87825..47bcb99859 100644 --- a/packages/components/Button/src/ButtonFontTokens.macos.ts +++ b/packages/components/Button/src/ButtonFontTokens.macos.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { ButtonTokens } from './Button.types'; export const defaultButtonFontTokens: TokenSettings = (_t: Theme) => diff --git a/packages/components/Button/src/ButtonFontTokens.ts b/packages/components/Button/src/ButtonFontTokens.ts index 87c2807d33..2208b003ce 100644 --- a/packages/components/Button/src/ButtonFontTokens.ts +++ b/packages/components/Button/src/ButtonFontTokens.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { ButtonTokens } from './Button.types'; export const defaultButtonFontTokens: TokenSettings = (_t: Theme) => diff --git a/packages/components/Button/src/ButtonFontTokens.win32.ts b/packages/components/Button/src/ButtonFontTokens.win32.ts index 7e6a785bd5..0d89579b40 100644 --- a/packages/components/Button/src/ButtonFontTokens.win32.ts +++ b/packages/components/Button/src/ButtonFontTokens.win32.ts @@ -1,6 +1,7 @@ import type { Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { ButtonTokens } from './Button.types'; export const defaultButtonFontTokens: TokenSettings = (t: Theme) => diff --git a/packages/components/Button/src/ButtonTokens.android.ts b/packages/components/Button/src/ButtonTokens.android.ts index 85e172ae75..61ba4c7600 100644 --- a/packages/components/Button/src/ButtonTokens.android.ts +++ b/packages/components/Button/src/ButtonTokens.android.ts @@ -1,6 +1,7 @@ import type { Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { ButtonTokens } from './Button.types'; export const defaultButtonTokens: TokenSettings = () => diff --git a/packages/components/Button/src/ButtonTokens.ios.ts b/packages/components/Button/src/ButtonTokens.ios.ts index 9f4b0eabf0..cf52ed9a87 100644 --- a/packages/components/Button/src/ButtonTokens.ios.ts +++ b/packages/components/Button/src/ButtonTokens.ios.ts @@ -1,6 +1,7 @@ import type { Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { ButtonTokens } from './Button.types'; export const defaultButtonTokens: TokenSettings = () => diff --git a/packages/components/Button/src/ButtonTokens.ts b/packages/components/Button/src/ButtonTokens.ts index a06e860611..66673e1790 100644 --- a/packages/components/Button/src/ButtonTokens.ts +++ b/packages/components/Button/src/ButtonTokens.ts @@ -1,6 +1,7 @@ import type { Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { ButtonTokens } from './Button.types'; export const defaultButtonTokens: TokenSettings = () => diff --git a/packages/components/Button/src/ButtonTokens.win32.ts b/packages/components/Button/src/ButtonTokens.win32.ts index b860098c9e..a51122b188 100644 --- a/packages/components/Button/src/ButtonTokens.win32.ts +++ b/packages/components/Button/src/ButtonTokens.win32.ts @@ -1,6 +1,7 @@ import type { Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { ButtonTokens } from './Button.types'; export const defaultButtonTokens: TokenSettings = () => diff --git a/packages/components/Button/src/CompoundButton/CompoundButton.mobile.tsx b/packages/components/Button/src/CompoundButton/CompoundButton.mobile.tsx index fae0a901fd..4dd0db5a1c 100644 --- a/packages/components/Button/src/CompoundButton/CompoundButton.mobile.tsx +++ b/packages/components/Button/src/CompoundButton/CompoundButton.mobile.tsx @@ -1,10 +1,12 @@ /** @jsx withSlots */ import { View } from 'react-native'; -import type { CompoundButtonType } from './CompoundButton.types'; -import { compoundButtonName } from './CompoundButton.types'; -import { TextV1 as Text } from '@fluentui-react-native/text'; + import { compose } from '@fluentui-react-native/framework'; import { Icon } from '@fluentui-react-native/icon'; +import { TextV1 as Text } from '@fluentui-react-native/text'; + +import type { CompoundButtonType } from './CompoundButton.types'; +import { compoundButtonName } from './CompoundButton.types'; export const CompoundButton = compose({ displayName: compoundButtonName, diff --git a/packages/components/Button/src/CompoundButton/CompoundButton.styling.ts b/packages/components/Button/src/CompoundButton/CompoundButton.styling.ts index 953543a8c6..6d144e9cae 100644 --- a/packages/components/Button/src/CompoundButton/CompoundButton.styling.ts +++ b/packages/components/Button/src/CompoundButton/CompoundButton.styling.ts @@ -1,14 +1,15 @@ -import type { CompoundButtonTokens, CompoundButtonSlotProps, CompoundButtonProps } from './CompoundButton.types'; -import { compoundButtonName } from './CompoundButton.types'; import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/tokens'; -import { defaultButtonColorTokens } from '../ButtonColorTokens'; -import { buttonStates, contentStyling } from '../Button.styling'; -import { defaultButtonTokens } from '../ButtonTokens'; + +import { compoundButtonName } from './CompoundButton.types'; +import type { CompoundButtonTokens, CompoundButtonSlotProps, CompoundButtonProps } from './CompoundButton.types'; import { defaultCompoundButtonColorTokens } from './CompoundButtonColorTokens'; -import { defaultCompoundButtonTokens } from './CompoundButtonTokens'; import { defaultCompoundButtonFontTokens } from './CompoundButtonFontTokens'; +import { defaultCompoundButtonTokens } from './CompoundButtonTokens'; +import { buttonStates, contentStyling } from '../Button.styling'; +import { defaultButtonColorTokens } from '../ButtonColorTokens'; +import { defaultButtonTokens } from '../ButtonTokens'; export const stylingSettings: UseStylingOptions = { tokens: [ diff --git a/packages/components/Button/src/CompoundButton/CompoundButton.test.tsx b/packages/components/Button/src/CompoundButton/CompoundButton.test.tsx index 533b667731..4b4152bbcc 100644 --- a/packages/components/Button/src/CompoundButton/CompoundButton.test.tsx +++ b/packages/components/Button/src/CompoundButton/CompoundButton.test.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; -import { CompoundButton } from './CompoundButton'; + import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools'; import * as renderer from 'react-test-renderer'; +import { CompoundButton } from './CompoundButton'; + it('CompoundButton default', () => { const tree = renderer.create(Default Button).toJSON(); expect(tree).toMatchSnapshot(); diff --git a/packages/components/Button/src/CompoundButton/CompoundButton.tsx b/packages/components/Button/src/CompoundButton/CompoundButton.tsx index 6d62fa7933..7ece578df8 100644 --- a/packages/components/Button/src/CompoundButton/CompoundButton.tsx +++ b/packages/components/Button/src/CompoundButton/CompoundButton.tsx @@ -1,16 +1,18 @@ /** @jsx withSlots */ import * as React from 'react'; import { Pressable, View } from 'react-native'; + import { ActivityIndicator } from '@fluentui-react-native/experimental-activity-indicator'; -import type { CompoundButtonProps, CompoundButtonType } from './CompoundButton.types'; -import { compoundButtonName } from './CompoundButton.types'; -import { TextV1 as Text } from '@fluentui-react-native/text'; -import { stylingSettings } from './CompoundButton.styling'; import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework'; -import { useButton } from '../useButton'; import { Icon, createIconProps } from '@fluentui-react-native/icon'; +import { TextV1 as Text } from '@fluentui-react-native/text'; + +import { stylingSettings } from './CompoundButton.styling'; +import type { CompoundButtonProps, CompoundButtonType } from './CompoundButton.types'; +import { compoundButtonName } from './CompoundButton.types'; import { buttonLookup } from '../Button'; +import { useButton } from '../useButton'; export const CompoundButton = compose({ displayName: compoundButtonName, diff --git a/packages/components/Button/src/CompoundButton/CompoundButton.types.ts b/packages/components/Button/src/CompoundButton/CompoundButton.types.ts index dd96a01558..874c22ab68 100644 --- a/packages/components/Button/src/CompoundButton/CompoundButton.types.ts +++ b/packages/components/Button/src/CompoundButton/CompoundButton.types.ts @@ -1,8 +1,10 @@ import type { ViewProps, ColorValue } from 'react-native'; + import type { TextProps } from '@fluentui-react-native/text'; -import type { ButtonSlotProps, ButtonTokens, ButtonProps } from '../Button.types'; import type { FontTokens } from '@fluentui-react-native/tokens'; +import type { ButtonSlotProps, ButtonTokens, ButtonProps } from '../Button.types'; + export const compoundButtonName = 'CompoundButton'; export interface CompoundButtonTokens extends ButtonTokens { diff --git a/packages/components/Button/src/CompoundButton/CompoundButtonColorTokens.ts b/packages/components/Button/src/CompoundButton/CompoundButtonColorTokens.ts index 79673f7da0..6e739edfee 100644 --- a/packages/components/Button/src/CompoundButton/CompoundButtonColorTokens.ts +++ b/packages/components/Button/src/CompoundButton/CompoundButtonColorTokens.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { CompoundButtonTokens } from './CompoundButton.types'; export const defaultCompoundButtonColorTokens: TokenSettings = (t: Theme): CompoundButtonTokens => ({ diff --git a/packages/components/Button/src/CompoundButton/CompoundButtonColorTokens.win32.ts b/packages/components/Button/src/CompoundButton/CompoundButtonColorTokens.win32.ts index 69ce4317bd..c6ff24dbd2 100644 --- a/packages/components/Button/src/CompoundButton/CompoundButtonColorTokens.win32.ts +++ b/packages/components/Button/src/CompoundButton/CompoundButtonColorTokens.win32.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { CompoundButtonTokens } from './CompoundButton.types'; export const defaultCompoundButtonColorTokens: TokenSettings = (t: Theme): CompoundButtonTokens => ({ diff --git a/packages/components/Button/src/CompoundButton/CompoundButtonColorTokens.windows.ts b/packages/components/Button/src/CompoundButton/CompoundButtonColorTokens.windows.ts index 69ce4317bd..c6ff24dbd2 100644 --- a/packages/components/Button/src/CompoundButton/CompoundButtonColorTokens.windows.ts +++ b/packages/components/Button/src/CompoundButton/CompoundButtonColorTokens.windows.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { CompoundButtonTokens } from './CompoundButton.types'; export const defaultCompoundButtonColorTokens: TokenSettings = (t: Theme): CompoundButtonTokens => ({ diff --git a/packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.ts b/packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.ts index 1d2b695baf..d278051a82 100644 --- a/packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.ts +++ b/packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { CompoundButtonTokens } from './CompoundButton.types'; export const defaultCompoundButtonFontTokens: TokenSettings = (_t: Theme): CompoundButtonTokens => ({ diff --git a/packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.win32.ts b/packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.win32.ts index 850db6066a..e4785d73c0 100644 --- a/packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.win32.ts +++ b/packages/components/Button/src/CompoundButton/CompoundButtonFontTokens.win32.ts @@ -1,6 +1,7 @@ import type { FontWeightValue, Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { CompoundButtonTokens } from './CompoundButton.types'; export const defaultCompoundButtonFontTokens: TokenSettings = (t: Theme): CompoundButtonTokens => ({ diff --git a/packages/components/Button/src/CompoundButton/CompoundButtonTokens.ts b/packages/components/Button/src/CompoundButton/CompoundButtonTokens.ts index f69153c8af..57225e120e 100644 --- a/packages/components/Button/src/CompoundButton/CompoundButtonTokens.ts +++ b/packages/components/Button/src/CompoundButton/CompoundButtonTokens.ts @@ -1,6 +1,7 @@ import type { Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { CompoundButtonTokens } from './CompoundButton.types'; export const defaultCompoundButtonTokens: TokenSettings = (): CompoundButtonTokens => ({ diff --git a/packages/components/Button/src/ExtractStyle.android.ts b/packages/components/Button/src/ExtractStyle.android.ts index bc1fb9b2e6..db14be02f9 100644 --- a/packages/components/Button/src/ExtractStyle.android.ts +++ b/packages/components/Button/src/ExtractStyle.android.ts @@ -1,6 +1,7 @@ -import { memoize } from '@fluentui-react-native/framework'; import type { ViewStyle } from 'react-native'; +import { memoize } from '@fluentui-react-native/framework'; + /** * React Native's Pressable does not support curved edges. * It needs to be wrapped inside another view and have border set there. diff --git a/packages/components/Button/src/FAB/FAB.mobile.tsx b/packages/components/Button/src/FAB/FAB.mobile.tsx index 1643497206..012dd15125 100644 --- a/packages/components/Button/src/FAB/FAB.mobile.tsx +++ b/packages/components/Button/src/FAB/FAB.mobile.tsx @@ -1,17 +1,19 @@ /** @jsx withSlots */ import * as React from 'react'; import { Platform, Pressable, View } from 'react-native'; -import type { FABProps, FABType } from './FAB.types'; -import { fabName } from './FAB.types'; -import { TextV1 as Text } from '@fluentui-react-native/text'; -import { stylingSettings } from './FAB.styling'; + +import { Shadow } from '@fluentui-react-native/experimental-shadow'; import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework'; -import { useButton } from '../useButton'; import { Icon, createIconProps } from '@fluentui-react-native/icon'; import type { IPressableState } from '@fluentui-react-native/interactive-hooks'; -import { Shadow } from '@fluentui-react-native/experimental-shadow'; +import { TextV1 as Text } from '@fluentui-react-native/text'; + +import { stylingSettings } from './FAB.styling'; +import type { FABProps, FABType } from './FAB.types'; +import { fabName } from './FAB.types'; import { extractOuterStylePropsAndroid } from '../ExtractStyle.android'; +import { useButton } from '../useButton'; /** * A function which determines if a set of styles should be applied to the component given the current state and props of the button. diff --git a/packages/components/Button/src/FAB/FAB.styling.ts b/packages/components/Button/src/FAB/FAB.styling.ts index 5e4bc03830..35b4209907 100644 --- a/packages/components/Button/src/FAB/FAB.styling.ts +++ b/packages/components/Button/src/FAB/FAB.styling.ts @@ -1,12 +1,14 @@ -import type { FABProps, FABSlotProps, FABTokens } from './FAB.types'; -import { fabName } from './FAB.types'; +import { Platform } from 'react-native'; + import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; -import { borderStyles, layoutStyles, fontStyles, shadowStyles } from '@fluentui-react-native/tokens'; import { getTextMarginAdjustment } from '@fluentui-react-native/styling-utils'; -import { Platform } from 'react-native'; -import { defaultFABTokens } from './FABTokens'; +import { borderStyles, layoutStyles, fontStyles, shadowStyles } from '@fluentui-react-native/tokens'; + +import { fabName } from './FAB.types'; +import type { FABProps, FABSlotProps, FABTokens } from './FAB.types'; import { defaultFABColorTokens } from './FABColorTokens'; +import { defaultFABTokens } from './FABTokens'; export const FABStates: (keyof FABTokens)[] = ['focused', 'pressed', 'subtle', 'disabled', 'large', 'small', 'hasContent']; diff --git a/packages/components/Button/src/FAB/FAB.test.tsx b/packages/components/Button/src/FAB/FAB.test.tsx index f4b9bb43b1..7ed158e120 100644 --- a/packages/components/Button/src/FAB/FAB.test.tsx +++ b/packages/components/Button/src/FAB/FAB.test.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; -import { FAB } from './FAB'; + import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools'; import * as renderer from 'react-test-renderer'; +import { FAB } from './FAB'; + const fontBuiltInProps = { fontFamily: 'Arial', codepoint: 0x2663, diff --git a/packages/components/Button/src/FAB/FAB.tsx b/packages/components/Button/src/FAB/FAB.tsx index 2722410346..27e50f3e81 100644 --- a/packages/components/Button/src/FAB/FAB.tsx +++ b/packages/components/Button/src/FAB/FAB.tsx @@ -1,12 +1,14 @@ /** @jsx withSlots */ import type * as React from 'react'; import { Pressable } from 'react-native'; -import type { FABProps, FABType } from './FAB.types'; -import { fabName } from './FAB.types'; -import { TextV1 as Text } from '@fluentui-react-native/text'; + import type { UseSlots } from '@fluentui-react-native/framework'; import { compose } from '@fluentui-react-native/framework'; import { Icon } from '@fluentui-react-native/icon'; +import { TextV1 as Text } from '@fluentui-react-native/text'; + +import type { FABProps, FABType } from './FAB.types'; +import { fabName } from './FAB.types'; export const FAB = compose({ displayName: fabName, diff --git a/packages/components/Button/src/FAB/FAB.types.ts b/packages/components/Button/src/FAB/FAB.types.ts index df49335707..a47416ae9e 100644 --- a/packages/components/Button/src/FAB/FAB.types.ts +++ b/packages/components/Button/src/FAB/FAB.types.ts @@ -1,7 +1,8 @@ -import type { ButtonSlotProps, ButtonCoreTokens, ButtonCoreProps } from '../Button.types'; import type { ShadowProps } from '@fluentui-react-native/experimental-shadow'; import type { IconSourcesType } from '@fluentui-react-native/icon'; +import type { ButtonSlotProps, ButtonCoreTokens, ButtonCoreProps } from '../Button.types'; + export const fabName = 'FAB'; export type FABSize = 'small' | 'large'; export type FABAppearance = 'primary' | 'subtle' | 'accent'; diff --git a/packages/components/Button/src/FAB/FABColorTokens.ios.ts b/packages/components/Button/src/FAB/FABColorTokens.ios.ts index 44644bc418..0d523284e7 100644 --- a/packages/components/Button/src/FAB/FABColorTokens.ios.ts +++ b/packages/components/Button/src/FAB/FABColorTokens.ios.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { FABTokens } from './FAB.types'; export const defaultFABColorTokens: TokenSettings = (t: Theme): FABTokens => ({ diff --git a/packages/components/Button/src/FAB/FABColorTokens.ts b/packages/components/Button/src/FAB/FABColorTokens.ts index 14fd579e60..158ed5788f 100644 --- a/packages/components/Button/src/FAB/FABColorTokens.ts +++ b/packages/components/Button/src/FAB/FABColorTokens.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { FABTokens } from './FAB.types'; export const defaultFABColorTokens: TokenSettings = (t: Theme): FABTokens => ({ diff --git a/packages/components/Button/src/FAB/FABTokens.ios.ts b/packages/components/Button/src/FAB/FABTokens.ios.ts index 4f46d4cd5a..b0bbca041e 100644 --- a/packages/components/Button/src/FAB/FABTokens.ios.ts +++ b/packages/components/Button/src/FAB/FABTokens.ios.ts @@ -1,6 +1,7 @@ import type { Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { FABTokens } from './FAB.types'; export const defaultFABTokens: TokenSettings = (t: Theme) => diff --git a/packages/components/Button/src/FAB/FABTokens.ts b/packages/components/Button/src/FAB/FABTokens.ts index 80750528d6..3a00dbd75c 100644 --- a/packages/components/Button/src/FAB/FABTokens.ts +++ b/packages/components/Button/src/FAB/FABTokens.ts @@ -1,6 +1,7 @@ import type { Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { FABTokens } from './FAB.types'; export const defaultFABTokens: TokenSettings = (t: Theme) => diff --git a/packages/components/Button/src/ToggleButton/ToggleButton.android.tsx b/packages/components/Button/src/ToggleButton/ToggleButton.android.tsx index 8da2cbc52a..bdf2ba745a 100644 --- a/packages/components/Button/src/ToggleButton/ToggleButton.android.tsx +++ b/packages/components/Button/src/ToggleButton/ToggleButton.android.tsx @@ -1,10 +1,12 @@ /** @jsx withSlots */ import { View } from 'react-native'; -import type { ToggleButtonType } from './ToggleButton.types'; -import { toggleButtonName } from './ToggleButton.types'; -import { TextV1 as Text } from '@fluentui-react-native/text'; + import { compose } from '@fluentui-react-native/framework'; import { Icon } from '@fluentui-react-native/icon'; +import { TextV1 as Text } from '@fluentui-react-native/text'; + +import type { ToggleButtonType } from './ToggleButton.types'; +import { toggleButtonName } from './ToggleButton.types'; export const ToggleButton = compose({ displayName: toggleButtonName, diff --git a/packages/components/Button/src/ToggleButton/ToggleButton.styling.ts b/packages/components/Button/src/ToggleButton/ToggleButton.styling.ts index 8e96db06ac..161529ec4a 100644 --- a/packages/components/Button/src/ToggleButton/ToggleButton.styling.ts +++ b/packages/components/Button/src/ToggleButton/ToggleButton.styling.ts @@ -1,13 +1,14 @@ -import type { ToggleButtonTokens, ToggleButtonSlotProps, ToggleButtonProps } from './ToggleButton.types'; -import { toggleButtonName } from './ToggleButton.types'; import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; import { borderStyles, layoutStyles, fontStyles } from '@fluentui-react-native/tokens'; -import { defaultButtonColorTokens } from '../ButtonColorTokens'; -import { buttonStates, contentStyling } from '../Button.styling'; + +import { toggleButtonName } from './ToggleButton.types'; +import type { ToggleButtonTokens, ToggleButtonSlotProps, ToggleButtonProps } from './ToggleButton.types'; import { defaultToggleButtonColorTokens } from './ToggleButtonColorTokens'; -import { defaultButtonTokens } from '../ButtonTokens'; +import { buttonStates, contentStyling } from '../Button.styling'; +import { defaultButtonColorTokens } from '../ButtonColorTokens'; import { defaultButtonFontTokens } from '../ButtonFontTokens'; +import { defaultButtonTokens } from '../ButtonTokens'; export const stylingSettings: UseStylingOptions = { tokens: [defaultButtonTokens, defaultButtonFontTokens, defaultButtonColorTokens, defaultToggleButtonColorTokens, toggleButtonName], diff --git a/packages/components/Button/src/ToggleButton/ToggleButton.test.tsx b/packages/components/Button/src/ToggleButton/ToggleButton.test.tsx index ef3c34c83d..00eec21f36 100644 --- a/packages/components/Button/src/ToggleButton/ToggleButton.test.tsx +++ b/packages/components/Button/src/ToggleButton/ToggleButton.test.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; -import { ToggleButton } from './ToggleButton'; + import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools'; import * as renderer from 'react-test-renderer'; +import { ToggleButton } from './ToggleButton'; + it('ToggleButton default', () => { const tree = renderer.create(Default Button).toJSON(); expect(tree).toMatchSnapshot(); diff --git a/packages/components/Button/src/ToggleButton/ToggleButton.tsx b/packages/components/Button/src/ToggleButton/ToggleButton.tsx index 7f33cd0777..9e921535ae 100644 --- a/packages/components/Button/src/ToggleButton/ToggleButton.tsx +++ b/packages/components/Button/src/ToggleButton/ToggleButton.tsx @@ -1,16 +1,18 @@ /** @jsx withSlots */ import * as React from 'react'; import { Pressable } from 'react-native'; + import { ActivityIndicator } from '@fluentui-react-native/experimental-activity-indicator'; -import type { ToggleButtonProps, ToggleButtonType } from './ToggleButton.types'; -import { toggleButtonName } from './ToggleButton.types'; -import { TextV1 as Text } from '@fluentui-react-native/text'; -import { stylingSettings } from './ToggleButton.styling'; import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework'; import { Icon, createIconProps } from '@fluentui-react-native/icon'; -import { buttonLookup } from '../Button'; +import { TextV1 as Text } from '@fluentui-react-native/text'; + +import { stylingSettings } from './ToggleButton.styling'; +import type { ToggleButtonProps, ToggleButtonType } from './ToggleButton.types'; +import { toggleButtonName } from './ToggleButton.types'; import { useToggleButton } from './useToggleButton'; +import { buttonLookup } from '../Button'; export const ToggleButton = compose({ displayName: toggleButtonName, diff --git a/packages/components/Button/src/ToggleButton/ToggleButtonColorTokens.ts b/packages/components/Button/src/ToggleButton/ToggleButtonColorTokens.ts index 49ed24214d..a1a5670ae9 100644 --- a/packages/components/Button/src/ToggleButton/ToggleButtonColorTokens.ts +++ b/packages/components/Button/src/ToggleButton/ToggleButtonColorTokens.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { ToggleButtonTokens } from './ToggleButton.types'; export const defaultToggleButtonColorTokens: TokenSettings = (t: Theme): ToggleButtonTokens => ({ diff --git a/packages/components/Button/src/ToggleButton/ToggleButtonColorTokens.win32.ts b/packages/components/Button/src/ToggleButton/ToggleButtonColorTokens.win32.ts index b72dd8f34f..bc1ef8f537 100644 --- a/packages/components/Button/src/ToggleButton/ToggleButtonColorTokens.win32.ts +++ b/packages/components/Button/src/ToggleButton/ToggleButtonColorTokens.win32.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { ToggleButtonTokens } from './ToggleButton.types'; export const defaultToggleButtonColorTokens: TokenSettings = (t: Theme): ToggleButtonTokens => ({ diff --git a/packages/components/Button/src/ToggleButton/ToggleButtonColorTokens.windows.ts b/packages/components/Button/src/ToggleButton/ToggleButtonColorTokens.windows.ts index b72dd8f34f..bc1ef8f537 100644 --- a/packages/components/Button/src/ToggleButton/ToggleButtonColorTokens.windows.ts +++ b/packages/components/Button/src/ToggleButton/ToggleButtonColorTokens.windows.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { ToggleButtonTokens } from './ToggleButton.types'; export const defaultToggleButtonColorTokens: TokenSettings = (t: Theme): ToggleButtonTokens => ({ diff --git a/packages/components/Button/src/ToggleButton/useToggleButton.ts b/packages/components/Button/src/ToggleButton/useToggleButton.ts index d04daa01ff..60e01c0487 100644 --- a/packages/components/Button/src/ToggleButton/useToggleButton.ts +++ b/packages/components/Button/src/ToggleButton/useToggleButton.ts @@ -1,9 +1,11 @@ import * as React from 'react'; +import type { AccessibilityState } from 'react-native'; + +import { memoize } from '@fluentui-react-native/framework'; +import { useAsToggleWithEvent } from '@fluentui-react-native/interactive-hooks'; + import type { ToggleButtonProps, ToggleButtonInfo } from './ToggleButton.types'; import { useButton } from '../useButton'; -import { useAsToggleWithEvent } from '@fluentui-react-native/interactive-hooks'; -import { memoize } from '@fluentui-react-native/framework'; -import type { AccessibilityState } from 'react-native'; const defaultAccessibilityActions = [{ name: 'Toggle' }]; diff --git a/packages/components/Button/src/deprecated/Button.android.tsx b/packages/components/Button/src/deprecated/Button.android.tsx index a9d755f568..c60936b1aa 100644 --- a/packages/components/Button/src/deprecated/Button.android.tsx +++ b/packages/components/Button/src/deprecated/Button.android.tsx @@ -1,19 +1,21 @@ /** @jsx withSlots */ import * as React from 'react'; import { Pressable, View } from 'react-native'; -import type { IButtonSlotProps, IButtonState, IButtonProps, IButtonRenderData, IButtonType } from './Button.types'; -import { buttonName } from './Button.types'; -import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; -import { compose } from '@uifabricshared/foundation-compose'; + +import { filterViewProps } from '@fluentui-react-native/adapters'; +import { Icon, createIconProps } from '@fluentui-react-native/icon'; +import { useAsPressable, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; +import { Text } from '@fluentui-react-native/text'; +import { backgroundColorTokens, borderTokens, textTokens, foregroundColorTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens'; import type { ISlots } from '@uifabricshared/foundation-composable'; import { withSlots } from '@uifabricshared/foundation-composable'; -import { Text } from '@fluentui-react-native/text'; -import { settings } from './Button.settings'; -import { backgroundColorTokens, borderTokens, textTokens, foregroundColorTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens'; -import { filterViewProps } from '@fluentui-react-native/adapters'; +import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; +import { compose } from '@uifabricshared/foundation-compose'; import { mergeSettings } from '@uifabricshared/foundation-settings'; -import { useAsPressable, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; -import { Icon, createIconProps } from '@fluentui-react-native/icon'; + +import { settings } from './Button.settings'; +import type { IButtonSlotProps, IButtonState, IButtonProps, IButtonRenderData, IButtonType } from './Button.types'; +import { buttonName } from './Button.types'; /** * @deprecated This component is deprecated in favor of ButtonV1. This Button will be removed when the package moves to 1.0.0. diff --git a/packages/components/Button/src/deprecated/Button.settings.android.ts b/packages/components/Button/src/deprecated/Button.settings.android.ts index 80e353c6a3..e55f95464f 100644 --- a/packages/components/Button/src/deprecated/Button.settings.android.ts +++ b/packages/components/Button/src/deprecated/Button.settings.android.ts @@ -1,7 +1,8 @@ +import type { IViewProps } from '@fluentui-react-native/adapters'; +import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { IButtonType } from './Button.types'; import { buttonName } from './Button.types'; -import type { IComposeSettings } from '@uifabricshared/foundation-compose'; -import type { IViewProps } from '@fluentui-react-native/adapters'; /** * @deprecated This will be removed when the package moves to 1.0.0. diff --git a/packages/components/Button/src/deprecated/Button.settings.ts b/packages/components/Button/src/deprecated/Button.settings.ts index a56ed847bb..e115b905c2 100644 --- a/packages/components/Button/src/deprecated/Button.settings.ts +++ b/packages/components/Button/src/deprecated/Button.settings.ts @@ -1,7 +1,8 @@ +import type { IViewProps } from '@fluentui-react-native/adapters'; +import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { IButtonType } from './Button.types'; import { buttonName } from './Button.types'; -import type { IComposeSettings } from '@uifabricshared/foundation-compose'; -import type { IViewProps } from '@fluentui-react-native/adapters'; /** * @deprecated This will be removed when the package moves to 1.0.0. diff --git a/packages/components/Button/src/deprecated/Button.settings.win32.ts b/packages/components/Button/src/deprecated/Button.settings.win32.ts index 61ef5b936e..271d42ff07 100644 --- a/packages/components/Button/src/deprecated/Button.settings.win32.ts +++ b/packages/components/Button/src/deprecated/Button.settings.win32.ts @@ -1,7 +1,8 @@ +import type { IViewProps } from '@fluentui-react-native/adapters'; +import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { IButtonType } from './Button.types'; import { buttonName } from './Button.types'; -import type { IComposeSettings } from '@uifabricshared/foundation-compose'; -import type { IViewProps } from '@fluentui-react-native/adapters'; /** * @deprecated This will be removed when the package moves to 1.0.0. diff --git a/packages/components/Button/src/deprecated/Button.test.tsx b/packages/components/Button/src/deprecated/Button.test.tsx index 19dc10d239..64e9897182 100644 --- a/packages/components/Button/src/deprecated/Button.test.tsx +++ b/packages/components/Button/src/deprecated/Button.test.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; -import { Button } from './Button'; + import * as renderer from 'react-test-renderer'; +import { Button } from './Button'; + it('Button default', () => { const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); diff --git a/packages/components/Button/src/deprecated/Button.tsx b/packages/components/Button/src/deprecated/Button.tsx index 767c76b974..6ead6a7a41 100644 --- a/packages/components/Button/src/deprecated/Button.tsx +++ b/packages/components/Button/src/deprecated/Button.tsx @@ -1,20 +1,21 @@ /** @jsx withSlots */ import * as React from 'react'; import { View } from 'react-native'; -import type { IButtonSlotProps, IButtonState, IButtonProps, IButtonRenderData, IButtonType } from './Button.types'; -import { buttonName } from './Button.types'; -import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; -import { compose } from '@uifabricshared/foundation-compose'; + +import { filterViewProps } from '@fluentui-react-native/adapters'; +import { Icon, createIconProps } from '@fluentui-react-native/icon'; +import { useAsPressable, useKeyProps, useViewCommandFocus, useOnPressWithFocus } from '@fluentui-react-native/interactive-hooks'; +import { Text } from '@fluentui-react-native/text'; +import { backgroundColorTokens, borderTokens, textTokens, foregroundColorTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens'; import type { ISlots } from '@uifabricshared/foundation-composable'; import { withSlots } from '@uifabricshared/foundation-composable'; -import { Text } from '@fluentui-react-native/text'; -import { settings } from './Button.settings'; -import { backgroundColorTokens, borderTokens, textTokens, foregroundColorTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens'; -import { filterViewProps } from '@fluentui-react-native/adapters'; +import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; +import { compose } from '@uifabricshared/foundation-compose'; import { mergeSettings } from '@uifabricshared/foundation-settings'; -import { useAsPressable, useKeyProps, useViewCommandFocus, useOnPressWithFocus } from '@fluentui-react-native/interactive-hooks'; -import { Icon, createIconProps } from '@fluentui-react-native/icon'; +import { settings } from './Button.settings'; +import type { IButtonSlotProps, IButtonState, IButtonProps, IButtonRenderData, IButtonType } from './Button.types'; +import { buttonName } from './Button.types'; /** * @deprecated This component is deprecated in favor of ButtonV1. This Button will be removed when the package moves to 1.0.0. diff --git a/packages/components/Button/src/deprecated/Button.types.ts b/packages/components/Button/src/deprecated/Button.types.ts index 41e8a9fc6d..490fe22fb8 100644 --- a/packages/components/Button/src/deprecated/Button.types.ts +++ b/packages/components/Button/src/deprecated/Button.types.ts @@ -1,12 +1,13 @@ import type * as React from 'react'; import type { PressableProps, ViewProps, ColorValue } from 'react-native'; -import type { IRenderData } from '@uifabricshared/foundation-composable'; -import type { ITextProps } from '@fluentui-react-native/text'; -import type { IPressableProps } from '@fluentui-react-native/pressable'; -import type { FontTokens, IForegroundColorTokens, IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens'; -import type { IFocusable, IPressableState } from '@fluentui-react-native/interactive-hooks'; + import type { IViewProps } from '@fluentui-react-native/adapters'; import type { IconProps, IconSourcesType } from '@fluentui-react-native/icon'; +import type { IFocusable, IPressableState } from '@fluentui-react-native/interactive-hooks'; +import type { IPressableProps } from '@fluentui-react-native/pressable'; +import type { ITextProps } from '@fluentui-react-native/text'; +import type { FontTokens, IForegroundColorTokens, IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens'; +import type { IRenderData } from '@uifabricshared/foundation-composable'; /** * @deprecated This will be removed when the package moves to 1.0.0. diff --git a/packages/components/Button/src/deprecated/PrimaryButton/PrimaryButton.settings.ts b/packages/components/Button/src/deprecated/PrimaryButton/PrimaryButton.settings.ts index a55722dbf0..3e8aadbeb3 100644 --- a/packages/components/Button/src/deprecated/PrimaryButton/PrimaryButton.settings.ts +++ b/packages/components/Button/src/deprecated/PrimaryButton/PrimaryButton.settings.ts @@ -1,6 +1,7 @@ -import type { IButtonType } from '../Button.types'; import type { IComposeSettings } from '@uifabricshared/foundation-compose'; +import type { IButtonType } from '../Button.types'; + export const settings: IComposeSettings = [ { tokens: { diff --git a/packages/components/Button/src/deprecated/PrimaryButton/PrimaryButton.settings.win32.ts b/packages/components/Button/src/deprecated/PrimaryButton/PrimaryButton.settings.win32.ts index 84f2bbd7f6..14ff405614 100644 --- a/packages/components/Button/src/deprecated/PrimaryButton/PrimaryButton.settings.win32.ts +++ b/packages/components/Button/src/deprecated/PrimaryButton/PrimaryButton.settings.win32.ts @@ -1,6 +1,7 @@ -import type { IButtonType } from '../Button.types'; import type { IComposeSettings } from '@uifabricshared/foundation-compose'; +import type { IButtonType } from '../Button.types'; + export const settings: IComposeSettings = [ { tokens: { diff --git a/packages/components/Button/src/deprecated/PrimaryButton/PrimaryButton.ts b/packages/components/Button/src/deprecated/PrimaryButton/PrimaryButton.ts index 60bf836d87..787c7db529 100644 --- a/packages/components/Button/src/deprecated/PrimaryButton/PrimaryButton.ts +++ b/packages/components/Button/src/deprecated/PrimaryButton/PrimaryButton.ts @@ -1,5 +1,5 @@ -import { Button } from '../Button'; import { settings } from './PrimaryButton.settings'; +import { Button } from '../Button'; /** * @deprecated This component is deprecated in favor of ButtonV1. The PrimaryButton will be removed when the package moves to 1.0.0. diff --git a/packages/components/Button/src/deprecated/StealthButton/StealthButton.settings.ts b/packages/components/Button/src/deprecated/StealthButton/StealthButton.settings.ts index 1b3046077c..3dba1c31bd 100644 --- a/packages/components/Button/src/deprecated/StealthButton/StealthButton.settings.ts +++ b/packages/components/Button/src/deprecated/StealthButton/StealthButton.settings.ts @@ -1,6 +1,7 @@ -import type { IButtonType } from '../Button.types'; import type { IComposeSettings } from '@uifabricshared/foundation-compose'; +import type { IButtonType } from '../Button.types'; + export const settings: IComposeSettings = [ { tokens: { diff --git a/packages/components/Button/src/deprecated/StealthButton/StealthButton.ts b/packages/components/Button/src/deprecated/StealthButton/StealthButton.ts index 56dc8bd86e..adf98c83fb 100644 --- a/packages/components/Button/src/deprecated/StealthButton/StealthButton.ts +++ b/packages/components/Button/src/deprecated/StealthButton/StealthButton.ts @@ -1,5 +1,5 @@ -import { Button } from '../Button'; import { settings } from './StealthButton.settings'; +import { Button } from '../Button'; /** * @deprecated This component is deprecated in favor of ButtonV1. The StealthButton will be removed when the package moves to 1.0.0. diff --git a/packages/components/Button/src/useButton.ts b/packages/components/Button/src/useButton.ts index 195500fae2..3cce65e261 100644 --- a/packages/components/Button/src/useButton.ts +++ b/packages/components/Button/src/useButton.ts @@ -1,5 +1,7 @@ import * as React from 'react'; + import { usePressableState, useKeyProps, useOnPressWithFocus, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; + import type { ButtonProps, ButtonInfo } from './Button.types'; export const useButton = (props: ButtonProps): ButtonInfo => { diff --git a/packages/components/Callout/src/Callout.settings.macos.ts b/packages/components/Callout/src/Callout.settings.macos.ts index 9867b85fd4..c285346b1d 100644 --- a/packages/components/Callout/src/Callout.settings.macos.ts +++ b/packages/components/Callout/src/Callout.settings.macos.ts @@ -1,6 +1,7 @@ +import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { ICalloutType } from './Callout.types'; import { calloutName } from './Callout.types'; -import type { IComposeSettings } from '@uifabricshared/foundation-compose'; export const settings: IComposeSettings = [ { diff --git a/packages/components/Callout/src/Callout.settings.ts b/packages/components/Callout/src/Callout.settings.ts index abf6d382a9..917feb0a0d 100644 --- a/packages/components/Callout/src/Callout.settings.ts +++ b/packages/components/Callout/src/Callout.settings.ts @@ -1,6 +1,7 @@ +import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { ICalloutType } from './Callout.types'; import { calloutName } from './Callout.types'; -import type { IComposeSettings } from '@uifabricshared/foundation-compose'; export const settings: IComposeSettings = [ { diff --git a/packages/components/Callout/src/Callout.tsx b/packages/components/Callout/src/Callout.tsx index 94f650e88b..3d15d15fee 100644 --- a/packages/components/Callout/src/Callout.tsx +++ b/packages/components/Callout/src/Callout.tsx @@ -1,14 +1,16 @@ +import * as React from 'react'; +import { findNodeHandle, Platform } from 'react-native'; + +import { ensureNativeComponent } from '@fluentui-react-native/component-cache'; import { useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; import { backgroundColorTokens, borderTokens } from '@fluentui-react-native/tokens'; import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; import { compose } from '@uifabricshared/foundation-compose'; import { mergeSettings } from '@uifabricshared/foundation-settings'; -import * as React from 'react'; -import { findNodeHandle, Platform } from 'react-native'; + import { settings } from './Callout.settings'; import type { ICalloutProps, ICalloutSlotProps, ICalloutType } from './Callout.types'; import { calloutName } from './Callout.types'; -import { ensureNativeComponent } from '@fluentui-react-native/component-cache'; const NativeCalloutView = Platform.select({ macos: ensureNativeComponent('FRNCallout'), diff --git a/packages/components/Callout/src/Callout.types.ts b/packages/components/Callout/src/Callout.types.ts index 17521b11e8..fd2a442656 100644 --- a/packages/components/Callout/src/Callout.types.ts +++ b/packages/components/Callout/src/Callout.types.ts @@ -1,9 +1,10 @@ import type * as React from 'react'; import type { ScreenRect, ViewStyle } from 'react-native'; + import type { IViewProps } from '@fluentui-react-native/adapters'; -import type { IRenderData } from '@uifabricshared/foundation-composable'; -import type { IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens'; import type { IFocusable } from '@fluentui-react-native/interactive-hooks'; +import type { IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens'; +import type { IRenderData } from '@uifabricshared/foundation-composable'; export const calloutName = 'Callout'; /** diff --git a/packages/components/Callout/src/__tests__/Callout.test.tsx b/packages/components/Callout/src/__tests__/Callout.test.tsx index 8a77bf29c3..f493264af0 100644 --- a/packages/components/Callout/src/__tests__/Callout.test.tsx +++ b/packages/components/Callout/src/__tests__/Callout.test.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; -import { Callout } from '..'; + import * as renderer from 'react-test-renderer'; +import { Callout } from '..'; + it('Callout default props', () => { const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); diff --git a/packages/components/Checkbox/src/Checkbox.macos.tsx b/packages/components/Checkbox/src/Checkbox.macos.tsx index c8b92e089e..70b8429cd4 100644 --- a/packages/components/Checkbox/src/Checkbox.macos.tsx +++ b/packages/components/Checkbox/src/Checkbox.macos.tsx @@ -1,10 +1,12 @@ /** @jsx withSlots */ -import type { CheckboxTokens, CheckboxProps, CheckboxState } from './Checkbox.types'; -import { checkboxName } from './Checkbox.types'; +import { View } from 'react-native'; + +import type { IViewProps } from '@fluentui-react-native/adapters'; import type { UseSlots } from '@fluentui-react-native/framework'; import { compose } from '@fluentui-react-native/framework'; -import type { IViewProps } from '@fluentui-react-native/adapters'; -import { View } from 'react-native'; + +import type { CheckboxTokens, CheckboxProps, CheckboxState } from './Checkbox.types'; +import { checkboxName } from './Checkbox.types'; interface CheckboxSlotPropsMacOS { root: React.PropsWithRef; diff --git a/packages/components/Checkbox/src/Checkbox.styling.ts b/packages/components/Checkbox/src/Checkbox.styling.ts index df8962d2e0..f76687dc14 100644 --- a/packages/components/Checkbox/src/Checkbox.styling.ts +++ b/packages/components/Checkbox/src/Checkbox.styling.ts @@ -1,11 +1,13 @@ -import type { CheckboxTokens, CheckboxSlotProps, CheckboxProps, CheckboxSize } from './Checkbox.types'; -import { checkboxName } from './Checkbox.types'; +import { Platform } from 'react-native'; + import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; -import { borderStyles, fontStyles } from '@fluentui-react-native/tokens'; -import { defaultCheckboxTokens } from './CheckboxTokens'; import { getTextMarginAdjustment } from '@fluentui-react-native/styling-utils'; -import { Platform } from 'react-native'; +import { borderStyles, fontStyles } from '@fluentui-react-native/tokens'; + +import { checkboxName } from './Checkbox.types'; +import type { CheckboxTokens, CheckboxSlotProps, CheckboxProps, CheckboxSize } from './Checkbox.types'; +import { defaultCheckboxTokens } from './CheckboxTokens'; export const checkboxStates: (keyof CheckboxTokens)[] = [ 'medium', diff --git a/packages/components/Checkbox/src/Checkbox.tsx b/packages/components/Checkbox/src/Checkbox.tsx index e66382ad40..eb617d5cd0 100644 --- a/packages/components/Checkbox/src/Checkbox.tsx +++ b/packages/components/Checkbox/src/Checkbox.tsx @@ -1,15 +1,17 @@ /** @jsx withSlots */ import * as React from 'react'; import { Pressable, Platform } from 'react-native'; -import type { CheckboxType, CheckboxProps } from './Checkbox.types'; -import { checkboxName } from './Checkbox.types'; -import { TextV1 as Text } from '@fluentui-react-native/text'; -import { stylingSettings, getDefaultSize } from './Checkbox.styling'; + import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework'; -import { useCheckbox } from './useCheckbox'; +import { TextV1 as Text } from '@fluentui-react-native/text'; import { Svg, Path } from 'react-native-svg'; +import { stylingSettings, getDefaultSize } from './Checkbox.styling'; +import type { CheckboxType, CheckboxProps } from './Checkbox.types'; +import { checkboxName } from './Checkbox.types'; +import { useCheckbox } from './useCheckbox'; + export const Checkbox = compose({ displayName: checkboxName, ...stylingSettings, diff --git a/packages/components/Checkbox/src/Checkbox.types.ts b/packages/components/Checkbox/src/Checkbox.types.ts index 3e21a188ff..fb66899c5a 100644 --- a/packages/components/Checkbox/src/Checkbox.types.ts +++ b/packages/components/Checkbox/src/Checkbox.types.ts @@ -1,5 +1,8 @@ import type * as React from 'react'; import type { ColorValue, ViewStyle } from 'react-native'; + +import type { ITextProps, IViewProps } from '@fluentui-react-native/adapters'; +import type { IFocusable, InteractionEvent, PressablePropsExtended, PressableState } from '@fluentui-react-native/interactive-hooks'; import type { FontTokens, IBorderTokens, @@ -7,8 +10,6 @@ import type { IBackgroundColorTokens, LayoutTokens, } from '@fluentui-react-native/tokens'; -import type { IFocusable, InteractionEvent, PressablePropsExtended, PressableState } from '@fluentui-react-native/interactive-hooks'; -import type { ITextProps, IViewProps } from '@fluentui-react-native/adapters'; import type { SvgProps } from 'react-native-svg'; export const checkboxName = 'Checkbox'; diff --git a/packages/components/Checkbox/src/CheckboxTokens.android.ts b/packages/components/Checkbox/src/CheckboxTokens.android.ts index a00aa4e482..c163a4d3a7 100644 --- a/packages/components/Checkbox/src/CheckboxTokens.android.ts +++ b/packages/components/Checkbox/src/CheckboxTokens.android.ts @@ -1,6 +1,7 @@ import type { Theme } from '@fluentui-react-native/framework'; -import type { TokenSettings } from '@fluentui-react-native/use-styling'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { CheckboxTokens } from './Checkbox.types'; // No Tokens for Sizes , hovered and circular checkbox as they're not supported for Android Platform diff --git a/packages/components/Checkbox/src/CheckboxTokens.ios.ts b/packages/components/Checkbox/src/CheckboxTokens.ios.ts index 9abebf4f3a..9963ff4b5c 100644 --- a/packages/components/Checkbox/src/CheckboxTokens.ios.ts +++ b/packages/components/Checkbox/src/CheckboxTokens.ios.ts @@ -1,9 +1,11 @@ -import type { Theme } from '@fluentui-react-native/framework'; -import type { TokenSettings } from '@fluentui-react-native/use-styling'; -import { globalTokens } from '@fluentui-react-native/theme-tokens'; -import type { CheckboxTokens } from './Checkbox.types'; import { Platform } from 'react-native'; +import type { Theme } from '@fluentui-react-native/framework'; +import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import type { TokenSettings } from '@fluentui-react-native/use-styling'; + +import type { CheckboxTokens } from './Checkbox.types'; + // A copy of CheckboxTokens.android.ts, these are expected to change in the future. export const defaultCheckboxTokens: TokenSettings = (t: Theme) => diff --git a/packages/components/Checkbox/src/CheckboxTokens.ts b/packages/components/Checkbox/src/CheckboxTokens.ts index f53462f40c..bf5d3b9602 100644 --- a/packages/components/Checkbox/src/CheckboxTokens.ts +++ b/packages/components/Checkbox/src/CheckboxTokens.ts @@ -1,6 +1,7 @@ import type { Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { CheckboxTokens } from './Checkbox.types'; export const defaultCheckboxTokens: TokenSettings = (t: Theme) => diff --git a/packages/components/Checkbox/src/CheckboxTokens.win32.ts b/packages/components/Checkbox/src/CheckboxTokens.win32.ts index 59ecc14930..eef0d57871 100644 --- a/packages/components/Checkbox/src/CheckboxTokens.win32.ts +++ b/packages/components/Checkbox/src/CheckboxTokens.win32.ts @@ -1,6 +1,7 @@ import type { Theme } from '@fluentui-react-native/framework'; -import type { TokenSettings } from '@fluentui-react-native/use-styling'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { CheckboxTokens } from './Checkbox.types'; export const defaultCheckboxTokens: TokenSettings = (t: Theme) => diff --git a/packages/components/Checkbox/src/CheckboxTokens.windows.ts b/packages/components/Checkbox/src/CheckboxTokens.windows.ts index 397f3c6fcc..18ddf95d03 100644 --- a/packages/components/Checkbox/src/CheckboxTokens.windows.ts +++ b/packages/components/Checkbox/src/CheckboxTokens.windows.ts @@ -1,6 +1,7 @@ import type { Theme } from '@fluentui-react-native/framework'; -import type { TokenSettings } from '@fluentui-react-native/use-styling'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { CheckboxTokens } from './Checkbox.types'; export const defaultCheckboxTokens: TokenSettings = (t: Theme) => diff --git a/packages/components/Checkbox/src/__tests__/Checkbox.test.tsx b/packages/components/Checkbox/src/__tests__/Checkbox.test.tsx index dee353ad65..bdee3305f2 100644 --- a/packages/components/Checkbox/src/__tests__/Checkbox.test.tsx +++ b/packages/components/Checkbox/src/__tests__/Checkbox.test.tsx @@ -1,11 +1,13 @@ import * as React from 'react'; -import { Checkbox } from '../Checkbox'; -import * as renderer from 'react-test-renderer'; -import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools'; import type { AccessibilityActionName } from 'react-native'; import { Text, View } from 'react-native'; -import { Svg } from 'react-native-svg'; + import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; +import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools'; +import { Svg } from 'react-native-svg'; +import * as renderer from 'react-test-renderer'; + +import { Checkbox } from '../Checkbox'; function onChange(_e: InteractionEvent, isChecked: boolean) { console.log(isChecked); diff --git a/packages/components/Checkbox/src/deprecated/Checkbox.settings.android.ts b/packages/components/Checkbox/src/deprecated/Checkbox.settings.android.ts index c657a9c49b..c1238dea48 100644 --- a/packages/components/Checkbox/src/deprecated/Checkbox.settings.android.ts +++ b/packages/components/Checkbox/src/deprecated/Checkbox.settings.android.ts @@ -1,4 +1,5 @@ import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { ICheckboxType } from './Checkbox.types'; import { checkboxName } from './Checkbox.types'; diff --git a/packages/components/Checkbox/src/deprecated/Checkbox.settings.ts b/packages/components/Checkbox/src/deprecated/Checkbox.settings.ts index fcdc0562c5..36563f3313 100644 --- a/packages/components/Checkbox/src/deprecated/Checkbox.settings.ts +++ b/packages/components/Checkbox/src/deprecated/Checkbox.settings.ts @@ -1,4 +1,5 @@ import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { ICheckboxType } from './Checkbox.types'; import { checkboxName } from './Checkbox.types'; diff --git a/packages/components/Checkbox/src/deprecated/Checkbox.tsx b/packages/components/Checkbox/src/deprecated/Checkbox.tsx index bf7d0816a3..1a32772dcb 100644 --- a/packages/components/Checkbox/src/deprecated/Checkbox.tsx +++ b/packages/components/Checkbox/src/deprecated/Checkbox.tsx @@ -1,17 +1,8 @@ /** @jsx withSlots */ import * as React from 'react'; import { View } from 'react-native'; -import { Text } from '@fluentui-react-native/text'; -import type { ICheckboxState, ICheckboxProps, ICheckboxSlotProps, ICheckboxRenderData, ICheckboxType } from './Checkbox.types'; -import { checkboxName } from './Checkbox.types'; -import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; -import { compose } from '@uifabricshared/foundation-compose'; -import type { ISlots } from '@uifabricshared/foundation-composable'; -import { withSlots } from '@uifabricshared/foundation-composable'; + import { filterViewProps } from '@fluentui-react-native/adapters'; -import { settings, checkboxSelectActionLabel } from './Checkbox.settings'; -import { mergeSettings } from '@uifabricshared/foundation-settings'; -import { foregroundColorTokens, textTokens, borderTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens'; import { useAsToggle, useAsPressable, @@ -19,8 +10,19 @@ import { useKeyProps, useOnPressWithFocus, } from '@fluentui-react-native/interactive-hooks'; -import { backgroundColorTokens } from '@fluentui-react-native/tokens'; import type { IPressableProps } from '@fluentui-react-native/pressable'; +import { Text } from '@fluentui-react-native/text'; +import { foregroundColorTokens, textTokens, borderTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens'; +import { backgroundColorTokens } from '@fluentui-react-native/tokens'; +import type { ISlots } from '@uifabricshared/foundation-composable'; +import { withSlots } from '@uifabricshared/foundation-composable'; +import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; +import { compose } from '@uifabricshared/foundation-compose'; +import { mergeSettings } from '@uifabricshared/foundation-settings'; + +import { settings, checkboxSelectActionLabel } from './Checkbox.settings'; +import type { ICheckboxState, ICheckboxProps, ICheckboxSlotProps, ICheckboxRenderData, ICheckboxType } from './Checkbox.types'; +import { checkboxName } from './Checkbox.types'; /** * @deprecated This will be removed when the package moves to 1.0.0. diff --git a/packages/components/Checkbox/src/deprecated/Checkbox.types.ts b/packages/components/Checkbox/src/deprecated/Checkbox.types.ts index 521b3a8b34..21fa62ca50 100644 --- a/packages/components/Checkbox/src/deprecated/Checkbox.types.ts +++ b/packages/components/Checkbox/src/deprecated/Checkbox.types.ts @@ -1,11 +1,12 @@ import type * as React from 'react'; -// import { IPressableProps } from '@fluentui-react-native/pressable'; +import type { ColorValue } from 'react-native'; + +import type { IViewProps } from '@fluentui-react-native/adapters'; import type { IPressableState, IFocusable } from '@fluentui-react-native/interactive-hooks'; -import type { IRenderData } from '@uifabricshared/foundation-composable'; +// import { IPressableProps } from '@fluentui-react-native/pressable'; import type { ITextProps } from '@fluentui-react-native/text'; import type { FontTokens, IForegroundColorTokens, IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens'; -import type { IViewProps } from '@fluentui-react-native/adapters'; -import type { ColorValue } from 'react-native'; +import type { IRenderData } from '@uifabricshared/foundation-composable'; /** * @deprecated This will be removed when the package moves to 1.0.0. diff --git a/packages/components/Checkbox/src/useCheckbox.ts b/packages/components/Checkbox/src/useCheckbox.ts index 150b44b357..1cc0f3a1f4 100644 --- a/packages/components/Checkbox/src/useCheckbox.ts +++ b/packages/components/Checkbox/src/useCheckbox.ts @@ -1,4 +1,7 @@ import * as React from 'react'; +import type { AccessibilityActionEvent, AccessibilityState } from 'react-native'; + +import { memoize } from '@fluentui-react-native/framework'; import { usePressableState, useKeyProps, @@ -6,9 +9,8 @@ import { useViewCommandFocus, useAsToggleWithEvent, } from '@fluentui-react-native/interactive-hooks'; + import type { CheckboxProps, CheckboxInfo, CheckboxState } from './Checkbox.types'; -import { memoize } from '@fluentui-react-native/framework'; -import type { AccessibilityActionEvent, AccessibilityState } from 'react-native'; const defaultAccessibilityActions = [{ name: 'Toggle' }]; diff --git a/packages/components/ContextualMenu/src/ContextualMenu.settings.macos.ts b/packages/components/ContextualMenu/src/ContextualMenu.settings.macos.ts index 3702f61ae7..9b474c0786 100644 --- a/packages/components/ContextualMenu/src/ContextualMenu.settings.macos.ts +++ b/packages/components/ContextualMenu/src/ContextualMenu.settings.macos.ts @@ -1,7 +1,9 @@ +import { I18nManager } from 'react-native'; + +import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { ContextualMenuType } from './ContextualMenu.types'; import { contextualMenuName } from './ContextualMenu.types'; -import type { IComposeSettings } from '@uifabricshared/foundation-compose'; -import { I18nManager } from 'react-native'; export const settings: IComposeSettings = [ { diff --git a/packages/components/ContextualMenu/src/ContextualMenu.settings.ts b/packages/components/ContextualMenu/src/ContextualMenu.settings.ts index 5e1fa71c5d..6c88a1f22d 100644 --- a/packages/components/ContextualMenu/src/ContextualMenu.settings.ts +++ b/packages/components/ContextualMenu/src/ContextualMenu.settings.ts @@ -1,6 +1,7 @@ +import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { ContextualMenuType } from './ContextualMenu.types'; import { contextualMenuName } from './ContextualMenu.types'; -import type { IComposeSettings } from '@uifabricshared/foundation-compose'; export const settings: IComposeSettings = [ { diff --git a/packages/components/ContextualMenu/src/ContextualMenu.tsx b/packages/components/ContextualMenu/src/ContextualMenu.tsx index 0edb2fa46d..7d7ead7053 100644 --- a/packages/components/ContextualMenu/src/ContextualMenu.tsx +++ b/packages/components/ContextualMenu/src/ContextualMenu.tsx @@ -1,6 +1,19 @@ /** @jsx withSlots */ import * as React from 'react'; import { View, ScrollView, Platform } from 'react-native'; + +import { Callout } from '@fluentui-react-native/callout'; +import { FocusZone } from '@fluentui-react-native/focus-zone'; +import type { IFocusable } from '@fluentui-react-native/interactive-hooks'; +import { useSelectedKey } from '@fluentui-react-native/interactive-hooks'; +import { backgroundColorTokens, borderTokens } from '@fluentui-react-native/tokens'; +import type { ISlots } from '@uifabricshared/foundation-composable'; +import { withSlots } from '@uifabricshared/foundation-composable'; +import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; +import { compose } from '@uifabricshared/foundation-compose'; +import { mergeSettings } from '@uifabricshared/foundation-settings'; + +import { settings } from './ContextualMenu.settings'; import type { ContextualMenuProps, ContextualMenuSlotProps, @@ -10,17 +23,6 @@ import type { ContextualMenuState, } from './ContextualMenu.types'; import { contextualMenuName } from './ContextualMenu.types'; -import { settings } from './ContextualMenu.settings'; -import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; -import { compose } from '@uifabricshared/foundation-compose'; -import type { IFocusable } from '@fluentui-react-native/interactive-hooks'; -import { useSelectedKey } from '@fluentui-react-native/interactive-hooks'; -import { mergeSettings } from '@uifabricshared/foundation-settings'; -import { backgroundColorTokens, borderTokens } from '@fluentui-react-native/tokens'; -import { Callout } from '@fluentui-react-native/callout'; -import type { ISlots } from '@uifabricshared/foundation-composable'; -import { withSlots } from '@uifabricshared/foundation-composable'; -import { FocusZone } from '@fluentui-react-native/focus-zone'; export const CMContext = React.createContext({ selectedKey: null, diff --git a/packages/components/ContextualMenu/src/ContextualMenu.types.ts b/packages/components/ContextualMenu/src/ContextualMenu.types.ts index 512ef69922..c98b684ced 100644 --- a/packages/components/ContextualMenu/src/ContextualMenu.types.ts +++ b/packages/components/ContextualMenu/src/ContextualMenu.types.ts @@ -1,8 +1,9 @@ -import type { ICalloutProps, ICalloutTokens } from '@fluentui-react-native/callout'; -import type { IViewProps } from '@fluentui-react-native/adapters'; -import type { IRenderData } from '@uifabricshared/foundation-composable'; import type { ScrollViewProps } from 'react-native'; + +import type { IViewProps } from '@fluentui-react-native/adapters'; +import type { ICalloutProps, ICalloutTokens } from '@fluentui-react-native/callout'; import type { FocusZoneProps } from '@fluentui-react-native/focus-zone'; +import type { IRenderData } from '@uifabricshared/foundation-composable'; export const contextualMenuName = 'ContextualMenu'; export interface ContextualMenuContext { diff --git a/packages/components/ContextualMenu/src/ContextualMenuItem.settings.macos.ts b/packages/components/ContextualMenu/src/ContextualMenuItem.settings.macos.ts index f5e180ffa7..09fdc96900 100644 --- a/packages/components/ContextualMenu/src/ContextualMenuItem.settings.macos.ts +++ b/packages/components/ContextualMenu/src/ContextualMenuItem.settings.macos.ts @@ -1,6 +1,7 @@ +import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { ContextualMenuItemType } from './ContextualMenuItem.types'; import { contextualMenuItemName } from './ContextualMenuItem.types'; -import type { IComposeSettings } from '@uifabricshared/foundation-compose'; export const settings: IComposeSettings = [ { diff --git a/packages/components/ContextualMenu/src/ContextualMenuItem.settings.ts b/packages/components/ContextualMenu/src/ContextualMenuItem.settings.ts index f0b3fedbab..5f7153999e 100644 --- a/packages/components/ContextualMenu/src/ContextualMenuItem.settings.ts +++ b/packages/components/ContextualMenu/src/ContextualMenuItem.settings.ts @@ -1,6 +1,7 @@ +import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { ContextualMenuItemType } from './ContextualMenuItem.types'; import { contextualMenuItemName } from './ContextualMenuItem.types'; -import type { IComposeSettings } from '@uifabricshared/foundation-compose'; export const settings: IComposeSettings = [ { diff --git a/packages/components/ContextualMenu/src/ContextualMenuItem.tsx b/packages/components/ContextualMenu/src/ContextualMenuItem.tsx index cf084f00d1..1a488ad604 100644 --- a/packages/components/ContextualMenu/src/ContextualMenuItem.tsx +++ b/packages/components/ContextualMenu/src/ContextualMenuItem.tsx @@ -1,6 +1,19 @@ /** @jsx withSlots */ import * as React from 'react'; import { View } from 'react-native'; + +import { Icon, createIconProps } from '@fluentui-react-native/icon'; +import { useAsPressable, useKeyProps, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; +import { Text } from '@fluentui-react-native/text'; +import { backgroundColorTokens, borderTokens, textTokens, foregroundColorTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens'; +import type { ISlots } from '@uifabricshared/foundation-composable'; +import { withSlots } from '@uifabricshared/foundation-composable'; +import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; +import { compose } from '@uifabricshared/foundation-compose'; +import { mergeSettings } from '@uifabricshared/foundation-settings'; + +import { CMContext } from './ContextualMenu'; +import { settings } from './ContextualMenuItem.settings'; import type { ContextualMenuItemSlotProps, ContextualMenuItemState, @@ -9,17 +22,6 @@ import type { ContextualMenuItemType, } from './ContextualMenuItem.types'; import { contextualMenuItemName } from './ContextualMenuItem.types'; -import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; -import { compose } from '@uifabricshared/foundation-compose'; -import type { ISlots } from '@uifabricshared/foundation-composable'; -import { withSlots } from '@uifabricshared/foundation-composable'; -import { Text } from '@fluentui-react-native/text'; -import { settings } from './ContextualMenuItem.settings'; -import { backgroundColorTokens, borderTokens, textTokens, foregroundColorTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens'; -import { mergeSettings } from '@uifabricshared/foundation-settings'; -import { useAsPressable, useKeyProps, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; -import { CMContext } from './ContextualMenu'; -import { Icon, createIconProps } from '@fluentui-react-native/icon'; export const ContextualMenuItem = compose({ displayName: contextualMenuItemName, diff --git a/packages/components/ContextualMenu/src/ContextualMenuItem.types.ts b/packages/components/ContextualMenu/src/ContextualMenuItem.types.ts index 9181b9c098..ddc2b5530b 100644 --- a/packages/components/ContextualMenu/src/ContextualMenuItem.types.ts +++ b/packages/components/ContextualMenu/src/ContextualMenuItem.types.ts @@ -1,11 +1,12 @@ import type * as React from 'react'; + import type { IViewProps } from '@fluentui-react-native/adapters'; -import type { IRenderData } from '@uifabricshared/foundation-composable'; -import type { ITextProps } from '@fluentui-react-native/text'; -import type { IPressableProps } from '@fluentui-react-native/pressable'; -import type { FontTokens, IForegroundColorTokens, IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens'; -import type { IFocusable, IPressableState } from '@fluentui-react-native/interactive-hooks'; import type { IconProps } from '@fluentui-react-native/icon'; +import type { IFocusable, IPressableState } from '@fluentui-react-native/interactive-hooks'; +import type { IPressableProps } from '@fluentui-react-native/pressable'; +import type { ITextProps } from '@fluentui-react-native/text'; +import type { FontTokens, IForegroundColorTokens, IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens'; +import type { IRenderData } from '@uifabricshared/foundation-composable'; export const contextualMenuItemName = 'ContextualMenuItem'; diff --git a/packages/components/ContextualMenu/src/Submenu.settings.macos.ts b/packages/components/ContextualMenu/src/Submenu.settings.macos.ts index ddf4fe8694..229466d076 100644 --- a/packages/components/ContextualMenu/src/Submenu.settings.macos.ts +++ b/packages/components/ContextualMenu/src/Submenu.settings.macos.ts @@ -1,7 +1,9 @@ +import { I18nManager } from 'react-native'; + +import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { SubmenuType } from './Submenu.types'; import { submenuName } from './Submenu.types'; -import type { IComposeSettings } from '@uifabricshared/foundation-compose'; -import { I18nManager } from 'react-native'; export const settings: IComposeSettings = [ { diff --git a/packages/components/ContextualMenu/src/Submenu.settings.ts b/packages/components/ContextualMenu/src/Submenu.settings.ts index 0aa359ca2b..f06f7f5c37 100644 --- a/packages/components/ContextualMenu/src/Submenu.settings.ts +++ b/packages/components/ContextualMenu/src/Submenu.settings.ts @@ -1,6 +1,7 @@ +import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { SubmenuType } from './Submenu.types'; import { submenuName } from './Submenu.types'; -import type { IComposeSettings } from '@uifabricshared/foundation-compose'; export const settings: IComposeSettings = [ { diff --git a/packages/components/ContextualMenu/src/Submenu.tsx b/packages/components/ContextualMenu/src/Submenu.tsx index fb2e4721ee..7fe5938cbe 100644 --- a/packages/components/ContextualMenu/src/Submenu.tsx +++ b/packages/components/ContextualMenu/src/Submenu.tsx @@ -1,20 +1,22 @@ /** @jsx withSlots */ import * as React from 'react'; import { View, ScrollView, Platform, I18nManager } from 'react-native'; -import type { SubmenuProps, SubmenuSlotProps, SubmenuType, SubmenuRenderData, SubmenuState } from './Submenu.types'; -import { submenuName } from './Submenu.types'; -import { settings } from './Submenu.settings'; -import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; -import { compose } from '@uifabricshared/foundation-compose'; + +import { Callout } from '@fluentui-react-native/callout'; +import { FocusZone } from '@fluentui-react-native/focus-zone'; import type { IFocusable } from '@fluentui-react-native/interactive-hooks'; import { useKeyDownProps, useSelectedKey } from '@fluentui-react-native/interactive-hooks'; -import { mergeSettings } from '@uifabricshared/foundation-settings'; import { backgroundColorTokens, borderTokens } from '@fluentui-react-native/tokens'; -import { Callout } from '@fluentui-react-native/callout'; import type { ISlots } from '@uifabricshared/foundation-composable'; import { withSlots } from '@uifabricshared/foundation-composable'; +import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; +import { compose } from '@uifabricshared/foundation-compose'; +import { mergeSettings } from '@uifabricshared/foundation-settings'; + import { CMContext } from './ContextualMenu'; -import { FocusZone } from '@fluentui-react-native/focus-zone'; +import { settings } from './Submenu.settings'; +import type { SubmenuProps, SubmenuSlotProps, SubmenuType, SubmenuRenderData, SubmenuState } from './Submenu.types'; +import { submenuName } from './Submenu.types'; export const Submenu = compose({ displayName: submenuName, diff --git a/packages/components/ContextualMenu/src/Submenu.types.ts b/packages/components/ContextualMenu/src/Submenu.types.ts index 3dd0359560..dff8e2f37d 100644 --- a/packages/components/ContextualMenu/src/Submenu.types.ts +++ b/packages/components/ContextualMenu/src/Submenu.types.ts @@ -1,7 +1,9 @@ -import type { ContextualMenuProps, ContextualMenuTokens, ContextualMenuState } from './ContextualMenu.types'; import type { ScrollViewProps, ViewProps } from 'react-native'; -import type { IRenderData } from '@uifabricshared/foundation-composable'; + import type { FocusZoneProps } from '@fluentui-react-native/focus-zone'; +import type { IRenderData } from '@uifabricshared/foundation-composable'; + +import type { ContextualMenuProps, ContextualMenuTokens, ContextualMenuState } from './ContextualMenu.types'; export const submenuName = 'Submenu'; diff --git a/packages/components/ContextualMenu/src/SubmenuItem.settings.macos.ts b/packages/components/ContextualMenu/src/SubmenuItem.settings.macos.ts index 50cb6aa0e8..8043ba0170 100644 --- a/packages/components/ContextualMenu/src/SubmenuItem.settings.macos.ts +++ b/packages/components/ContextualMenu/src/SubmenuItem.settings.macos.ts @@ -1,6 +1,7 @@ +import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { SubmenuItemType } from './SubmenuItem.types'; import { submenuItemName } from './SubmenuItem.types'; -import type { IComposeSettings } from '@uifabricshared/foundation-compose'; export const settings: IComposeSettings = [ { diff --git a/packages/components/ContextualMenu/src/SubmenuItem.settings.ts b/packages/components/ContextualMenu/src/SubmenuItem.settings.ts index 54698c297c..51a07dee55 100644 --- a/packages/components/ContextualMenu/src/SubmenuItem.settings.ts +++ b/packages/components/ContextualMenu/src/SubmenuItem.settings.ts @@ -1,6 +1,7 @@ +import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { SubmenuItemType } from './SubmenuItem.types'; import { submenuItemName } from './SubmenuItem.types'; -import type { IComposeSettings } from '@uifabricshared/foundation-compose'; export const settings: IComposeSettings = [ { diff --git a/packages/components/ContextualMenu/src/SubmenuItem.tsx b/packages/components/ContextualMenu/src/SubmenuItem.tsx index 7c360e14d9..25e60bb32d 100644 --- a/packages/components/ContextualMenu/src/SubmenuItem.tsx +++ b/packages/components/ContextualMenu/src/SubmenuItem.tsx @@ -1,23 +1,25 @@ /** @jsx withSlots */ import * as React from 'react'; import { I18nManager, Platform, View } from 'react-native'; -import type { SubmenuItemSlotProps, SubmenuItemState, SubmenuItemProps, SubmenuItemRenderData, SubmenuItemType } from './SubmenuItem.types'; -import { submenuItemName } from './SubmenuItem.types'; -import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; -import { compose } from '@uifabricshared/foundation-compose'; -import type { ISlots } from '@uifabricshared/foundation-composable'; -import { withSlots } from '@uifabricshared/foundation-composable'; -import { Text } from '@fluentui-react-native/text'; -import { settings } from './SubmenuItem.settings'; -import { backgroundColorTokens, borderTokens, textTokens, foregroundColorTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens'; -import { mergeSettings } from '@uifabricshared/foundation-settings'; -import { useKeyDownProps, useViewCommandFocus, useAsPressable } from '@fluentui-react-native/interactive-hooks'; -import { CMContext } from './ContextualMenu'; + import type { SvgIconProps } from '@fluentui-react-native/icon'; import { Icon, createIconProps } from '@fluentui-react-native/icon'; +import { useKeyDownProps, useViewCommandFocus, useAsPressable } from '@fluentui-react-native/interactive-hooks'; +import { Text } from '@fluentui-react-native/text'; +import { backgroundColorTokens, borderTokens, textTokens, foregroundColorTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens'; +import type { ISlots } from '@uifabricshared/foundation-composable'; +import { withSlots } from '@uifabricshared/foundation-composable'; +import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; +import { compose } from '@uifabricshared/foundation-compose'; +import { mergeSettings } from '@uifabricshared/foundation-settings'; import type { SvgProps } from 'react-native-svg'; import { Svg, G, Path } from 'react-native-svg'; +import { CMContext } from './ContextualMenu'; +import { settings } from './SubmenuItem.settings'; +import type { SubmenuItemSlotProps, SubmenuItemState, SubmenuItemProps, SubmenuItemRenderData, SubmenuItemType } from './SubmenuItem.types'; +import { submenuItemName } from './SubmenuItem.types'; + export const SubmenuItem = compose({ displayName: submenuItemName, usePrepareProps: (userProps: SubmenuItemProps, useStyling: IUseComposeStyling) => { diff --git a/packages/components/ContextualMenu/src/SubmenuItem.types.ts b/packages/components/ContextualMenu/src/SubmenuItem.types.ts index bcdfd0408c..e3d28429b7 100644 --- a/packages/components/ContextualMenu/src/SubmenuItem.types.ts +++ b/packages/components/ContextualMenu/src/SubmenuItem.types.ts @@ -1,9 +1,11 @@ import type * as React from 'react'; + import type { IViewProps } from '@fluentui-react-native/adapters'; -import type { IRenderData } from '@uifabricshared/foundation-composable'; -import type { ITextProps } from '@fluentui-react-native/text'; -import type { ContextualMenuItemProps, ContextualMenuItemTokens, ContextualMenuItemState } from './ContextualMenuItem.types'; import type { IconProps } from '@fluentui-react-native/icon'; +import type { ITextProps } from '@fluentui-react-native/text'; +import type { IRenderData } from '@uifabricshared/foundation-composable'; + +import type { ContextualMenuItemProps, ContextualMenuItemTokens, ContextualMenuItemState } from './ContextualMenuItem.types'; export const submenuItemName = 'SubmenuItem'; export interface SubmenuItemTokens extends ContextualMenuItemTokens { diff --git a/packages/components/ContextualMenu/src/__tests__/ContextualMenu.test.tsx b/packages/components/ContextualMenu/src/__tests__/ContextualMenu.test.tsx index 4d5cd963d3..7b73f23447 100644 --- a/packages/components/ContextualMenu/src/__tests__/ContextualMenu.test.tsx +++ b/packages/components/ContextualMenu/src/__tests__/ContextualMenu.test.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; -import { ContextualMenu } from '..'; + import * as renderer from 'react-test-renderer'; +import { ContextualMenu } from '..'; + it('ContextualMenu default props', () => { const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); diff --git a/packages/components/FocusTrapZone/src/FocusTrapZone.ts b/packages/components/FocusTrapZone/src/FocusTrapZone.ts index 34caea0f07..3f03cd017e 100644 --- a/packages/components/FocusTrapZone/src/FocusTrapZone.ts +++ b/packages/components/FocusTrapZone/src/FocusTrapZone.ts @@ -1,9 +1,10 @@ -import type { IFocusTrapZoneProps, IFocusTrapZoneSlotProps, IFocusTrapZoneType } from './FocusTrapZone.types'; +import { ensureNativeComponent } from '@fluentui-react-native/component-cache'; +import { useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; import type { IUseStyling } from '@uifabricshared/foundation-composable'; import { composable } from '@uifabricshared/foundation-composable'; import { mergeSettings } from '@uifabricshared/foundation-settings'; -import { useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; -import { ensureNativeComponent } from '@fluentui-react-native/component-cache'; + +import type { IFocusTrapZoneProps, IFocusTrapZoneSlotProps, IFocusTrapZoneType } from './FocusTrapZone.types'; const RCTFocusTrapZone = ensureNativeComponent('RCTFocusTrapZone'); diff --git a/packages/components/FocusTrapZone/src/FocusTrapZone.types.ts b/packages/components/FocusTrapZone/src/FocusTrapZone.types.ts index bcd9eda7f6..1856f0e2b8 100644 --- a/packages/components/FocusTrapZone/src/FocusTrapZone.types.ts +++ b/packages/components/FocusTrapZone/src/FocusTrapZone.types.ts @@ -1,4 +1,5 @@ import type * as React from 'react'; + import type { IViewProps } from '@fluentui-react-native/adapters'; import type { IFocusable } from '@fluentui-react-native/interactive-hooks'; diff --git a/packages/components/FocusTrapZone/src/__tests__/FocusTrapZone.test.tsx b/packages/components/FocusTrapZone/src/__tests__/FocusTrapZone.test.tsx index 23f2cbea9c..f44d2c927b 100644 --- a/packages/components/FocusTrapZone/src/__tests__/FocusTrapZone.test.tsx +++ b/packages/components/FocusTrapZone/src/__tests__/FocusTrapZone.test.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; -import { FocusTrapZone } from '..'; -import * as renderer from 'react-test-renderer'; + import type { IFocusable } from '@fluentui-react-native/interactive-hooks'; +import * as renderer from 'react-test-renderer'; + +import { FocusTrapZone } from '..'; it('FocusTrapZone default props', () => { const tree = renderer.create().toJSON(); diff --git a/packages/components/FocusZone/src/FocusZone.ts b/packages/components/FocusZone/src/FocusZone.ts index 67558ade3b..fa179551cf 100644 --- a/packages/components/FocusZone/src/FocusZone.ts +++ b/packages/components/FocusZone/src/FocusZone.ts @@ -1,11 +1,13 @@ import * as React from 'react'; import { findNodeHandle } from 'react-native'; -import type { FocusZoneProps, FocusZoneSlotProps, FocusZoneType } from './FocusZone.types'; + +import { ensureNativeComponent } from '@fluentui-react-native/component-cache'; +import { useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; import type { IUseStyling } from '@uifabricshared/foundation-composable'; import { composable } from '@uifabricshared/foundation-composable'; import { mergeSettings } from '@uifabricshared/foundation-settings'; -import { useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; -import { ensureNativeComponent } from '@fluentui-react-native/component-cache'; + +import type { FocusZoneProps, FocusZoneSlotProps, FocusZoneType } from './FocusZone.types'; const RCTFocusZone = ensureNativeComponent('RCTFocusZone'); diff --git a/packages/components/FocusZone/src/FocusZone.types.ts b/packages/components/FocusZone/src/FocusZone.types.ts index 1b988f0a24..ea059b3668 100644 --- a/packages/components/FocusZone/src/FocusZone.types.ts +++ b/packages/components/FocusZone/src/FocusZone.types.ts @@ -1,4 +1,5 @@ import type * as React from 'react'; + import type { IFocusable } from '@fluentui-react-native/interactive-hooks'; import type { IRenderData } from '@uifabricshared/foundation-composable'; diff --git a/packages/components/FocusZone/src/__tests__/FocusZone.test.tsx b/packages/components/FocusZone/src/__tests__/FocusZone.test.tsx index d1b771eba5..105b2ae6dd 100644 --- a/packages/components/FocusZone/src/__tests__/FocusZone.test.tsx +++ b/packages/components/FocusZone/src/__tests__/FocusZone.test.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; -import { FocusZone } from '..'; import { Button } from 'react-native'; + import * as renderer from 'react-test-renderer'; +import { FocusZone } from '..'; + const onPress = () => { return; }; diff --git a/packages/components/Icon/src/FontIcon/FontIcon.tsx b/packages/components/Icon/src/FontIcon/FontIcon.tsx index 25b9ccc701..5f518b8b2f 100644 --- a/packages/components/Icon/src/FontIcon/FontIcon.tsx +++ b/packages/components/Icon/src/FontIcon/FontIcon.tsx @@ -1,6 +1,8 @@ import * as React from 'react'; -import { mergeProps, stagedComponent } from '@fluentui-react-native/framework'; import { Text } from 'react-native'; + +import { mergeProps, stagedComponent } from '@fluentui-react-native/framework'; + import type { FontIconProps } from './FontIcon.types'; import { fontIconName } from './FontIcon.types'; import { useFontIcon } from './useFontIcon'; diff --git a/packages/components/Icon/src/FontIcon/useFontIcon.ts b/packages/components/Icon/src/FontIcon/useFontIcon.ts index dd40c27ff6..51eb7397e1 100644 --- a/packages/components/Icon/src/FontIcon/useFontIcon.ts +++ b/packages/components/Icon/src/FontIcon/useFontIcon.ts @@ -1,6 +1,8 @@ import type { TextStyle } from 'react-native'; import { Image, Platform } from 'react-native'; + import { getMemoCache } from '@fluentui-react-native/framework'; + import type { FontIconProps } from './FontIcon.types'; export const useFontIcon = (props: FontIconProps): FontIconProps => { diff --git a/packages/components/Icon/src/Icon.tsx b/packages/components/Icon/src/Icon.tsx index 01cd87352c..4c535832ef 100644 --- a/packages/components/Icon/src/Icon.tsx +++ b/packages/components/Icon/src/Icon.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; + +import { FontIcon } from './FontIcon/FontIcon'; import type { IconProps } from './Icon.types'; import { SvgIcon } from './SvgIcon/SvgIcon'; -import { FontIcon } from './FontIcon/FontIcon'; export const Icon = (props: IconProps) => { return props.svgSource ? : props.fontSource ? : null; }; diff --git a/packages/components/Icon/src/Icon.types.ts b/packages/components/Icon/src/Icon.types.ts index 370359384a..ea98be0af0 100644 --- a/packages/components/Icon/src/Icon.types.ts +++ b/packages/components/Icon/src/Icon.types.ts @@ -1,5 +1,5 @@ -import type { SvgIconProps } from './SvgIcon/SvgIcon.types'; import type { FontIconProps } from './FontIcon/FontIcon.types'; +import type { SvgIconProps } from './SvgIcon/SvgIcon.types'; export interface IconProps { /* diff --git a/packages/components/Icon/src/SvgIcon/SvgIcon.tsx b/packages/components/Icon/src/SvgIcon/SvgIcon.tsx index 2c2479e753..69a03e8aa6 100644 --- a/packages/components/Icon/src/SvgIcon/SvgIcon.tsx +++ b/packages/components/Icon/src/SvgIcon/SvgIcon.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; import { Platform, View } from 'react-native'; -import { SvgUri } from 'react-native-svg'; + import { mergeProps, stagedComponent } from '@fluentui-react-native/framework'; +import { SvgUri } from 'react-native-svg'; + import type { SvgIconProps } from './SvgIcon.types'; import { svgIconName } from './SvgIcon.types'; import { useSvgIcon } from './useSvgIcon'; diff --git a/packages/components/Icon/src/SvgIcon/SvgIcon.types.ts b/packages/components/Icon/src/SvgIcon/SvgIcon.types.ts index fc7224e994..d985efd755 100644 --- a/packages/components/Icon/src/SvgIcon/SvgIcon.types.ts +++ b/packages/components/Icon/src/SvgIcon/SvgIcon.types.ts @@ -1,6 +1,7 @@ import type { ColorValue, ImageStyle, StyleProp } from 'react-native'; -import type { SvgProps } from 'react-native-svg'; + import type { IViewProps } from '@fluentui-react-native/adapters'; +import type { SvgProps } from 'react-native-svg'; export const svgIconName = 'SvgIcon'; diff --git a/packages/components/Icon/src/SvgIcon/useSvgIcon.ts b/packages/components/Icon/src/SvgIcon/useSvgIcon.ts index b7cb447903..6a85b1b36e 100644 --- a/packages/components/Icon/src/SvgIcon/useSvgIcon.ts +++ b/packages/components/Icon/src/SvgIcon/useSvgIcon.ts @@ -1,5 +1,7 @@ import type { ImageStyle } from 'react-native'; + import { getMemoCache, mergeStyles } from '@fluentui-react-native/framework'; + import type { SvgIconProps } from './SvgIcon.types'; const rasterImageStyleCache = getMemoCache(); diff --git a/packages/components/Icon/src/__tests__/Icon.test.tsx b/packages/components/Icon/src/__tests__/Icon.test.tsx index 035eda2f30..afbbfb3fae 100644 --- a/packages/components/Icon/src/__tests__/Icon.test.tsx +++ b/packages/components/Icon/src/__tests__/Icon.test.tsx @@ -1,9 +1,12 @@ import * as React from 'react'; -import type { FontIconPropsV1 } from '../'; -import { IconV1, SvgIcon, FontIcon } from '../'; -import * as renderer from 'react-test-renderer'; + import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools'; import { Path, Svg } from 'react-native-svg'; +import * as renderer from 'react-test-renderer'; + +import type { FontIconPropsV1 } from '../'; +import { IconV1, SvgIcon, FontIcon } from '../'; + const fontProps: FontIconPropsV1 = { fontFamily: 'Arial', codepoint: 0x2663, diff --git a/packages/components/Icon/src/legacy/Icon.tsx b/packages/components/Icon/src/legacy/Icon.tsx index b77e6cec37..2da85206ac 100644 --- a/packages/components/Icon/src/legacy/Icon.tsx +++ b/packages/components/Icon/src/legacy/Icon.tsx @@ -1,12 +1,14 @@ import * as React from 'react'; -import type { IconProps, SvgIconProps, FontIconProps } from './Icon.types'; -import type { ImageStyle, TextStyle } from 'react-native'; import { Image, Platform, View } from 'react-native'; -import { Text } from '@fluentui-react-native/text'; +import type { ImageStyle, TextStyle } from 'react-native'; + import { mergeStyles, useFluentTheme } from '@fluentui-react-native/framework'; import { stagedComponent, mergeProps, getMemoCache } from '@fluentui-react-native/framework'; +import { Text } from '@fluentui-react-native/text'; import { SvgUri } from 'react-native-svg'; +import type { IconProps, SvgIconProps, FontIconProps } from './Icon.types'; + const rasterImageStyleCache = getMemoCache(); function renderRasterImage(iconProps: IconProps) { diff --git a/packages/components/Icon/src/legacy/Icon.types.ts b/packages/components/Icon/src/legacy/Icon.types.ts index 2a05828e73..0b81cf1325 100644 --- a/packages/components/Icon/src/legacy/Icon.types.ts +++ b/packages/components/Icon/src/legacy/Icon.types.ts @@ -1,5 +1,6 @@ -import type { SvgProps } from 'react-native-svg'; import type { AccessibilityProps, ImageProps, ImageStyle, StyleProp, TextStyle, ColorValue } from 'react-native'; + +import type { SvgProps } from 'react-native-svg'; export const iconName = 'Icon'; export interface FontIconProps { diff --git a/packages/components/Icon/src/legacy/useIconProps.hooks.ts b/packages/components/Icon/src/legacy/useIconProps.hooks.ts index 35036206ba..51cd168fe8 100644 --- a/packages/components/Icon/src/legacy/useIconProps.hooks.ts +++ b/packages/components/Icon/src/legacy/useIconProps.hooks.ts @@ -1,4 +1,5 @@ import { Image } from 'react-native'; + import type { RasterImageIconProps, IconProps } from './Icon.types'; // this hook creates icon props from given source diff --git a/packages/components/Link/src/Link.styling.ts b/packages/components/Link/src/Link.styling.ts index 6a4be948a9..ff0452a6bb 100644 --- a/packages/components/Link/src/Link.styling.ts +++ b/packages/components/Link/src/Link.styling.ts @@ -1,8 +1,9 @@ -import type { LinkState, LinkTokens, LinkSlotProps, LinkProps } from './Link.types'; -import { linkName } from './Link.types'; import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; import { borderStyles, fontStyles } from '@fluentui-react-native/tokens'; + +import { linkName } from './Link.types'; +import type { LinkState, LinkTokens, LinkSlotProps, LinkProps } from './Link.types'; import { defaultLinkTokens } from './LinkTokens'; export const linkStates: (keyof LinkState)[] = ['inline', 'subtle', 'hovered', 'focused', 'pressed', 'disabled']; diff --git a/packages/components/Link/src/Link.tsx b/packages/components/Link/src/Link.tsx index c588d4dfc0..4f95cfa65e 100644 --- a/packages/components/Link/src/Link.tsx +++ b/packages/components/Link/src/Link.tsx @@ -1,13 +1,15 @@ /** @jsx withSlots */ import * as React from 'react'; import { View } from 'react-native'; -import type { LinkType, LinkProps, LinkState } from './Link.types'; -import { linkName } from './Link.types'; + import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework'; -import { useLink } from './useLink'; import { TextV1 as Text } from '@fluentui-react-native/text'; + import { stylingSettings } from './Link.styling'; +import type { LinkType, LinkProps, LinkState } from './Link.types'; +import { linkName } from './Link.types'; +import { useLink } from './useLink'; /** * A function which determines if a set of styles should be applied to the component given the current state and props of the link. diff --git a/packages/components/Link/src/Link.types.ts b/packages/components/Link/src/Link.types.ts index fc992712f6..031cd8110c 100644 --- a/packages/components/Link/src/Link.types.ts +++ b/packages/components/Link/src/Link.types.ts @@ -1,7 +1,8 @@ -import type { TextTokens, TextProps } from '@fluentui-react-native/text'; -import type { IFocusable, IPressableState, IWithPressableEvents, IWithPressableOptions } from '@fluentui-react-native/interactive-hooks'; import type { ViewProps } from 'react-native'; +import type { IFocusable, IPressableState, IWithPressableEvents, IWithPressableOptions } from '@fluentui-react-native/interactive-hooks'; +import type { TextTokens, TextProps } from '@fluentui-react-native/text'; + export const linkName = 'Link'; export type LinkState = IPressableState & { diff --git a/packages/components/Link/src/LinkTokens.android.ts b/packages/components/Link/src/LinkTokens.android.ts index e4bf97eb4d..ffead3773f 100644 --- a/packages/components/Link/src/LinkTokens.android.ts +++ b/packages/components/Link/src/LinkTokens.android.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { LinkTokens } from './Link.types'; export const defaultLinkTokens: TokenSettings = (t: Theme) => diff --git a/packages/components/Link/src/LinkTokens.ts b/packages/components/Link/src/LinkTokens.ts index decdfbeeea..6f5ff3c156 100644 --- a/packages/components/Link/src/LinkTokens.ts +++ b/packages/components/Link/src/LinkTokens.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { LinkTokens } from './Link.types'; export const defaultLinkTokens: TokenSettings = (t: Theme) => diff --git a/packages/components/Link/src/__tests__/Link.test.tsx b/packages/components/Link/src/__tests__/Link.test.tsx index 27522f68d6..e18d210860 100644 --- a/packages/components/Link/src/__tests__/Link.test.tsx +++ b/packages/components/Link/src/__tests__/Link.test.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; import { Alert } from 'react-native'; -import { Link } from '../Link'; -import * as renderer from 'react-test-renderer'; + import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools'; +import * as renderer from 'react-test-renderer'; + +import { Link } from '../Link'; describe('Link component tests', () => { it('Default Link', () => { diff --git a/packages/components/Link/src/legacy/Link.settings.ts b/packages/components/Link/src/legacy/Link.settings.ts index 40135c4eb6..99eb73771a 100644 --- a/packages/components/Link/src/legacy/Link.settings.ts +++ b/packages/components/Link/src/legacy/Link.settings.ts @@ -1,7 +1,8 @@ +import type { IViewProps } from '@fluentui-react-native/adapters'; import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { ILinkType } from './Link.types'; import { linkName } from './Link.types'; -import type { IViewProps } from '@fluentui-react-native/adapters'; export const settings: IComposeSettings = [ { diff --git a/packages/components/Link/src/legacy/Link.tsx b/packages/components/Link/src/legacy/Link.tsx index 999629f8fc..da857b37a3 100644 --- a/packages/components/Link/src/legacy/Link.tsx +++ b/packages/components/Link/src/legacy/Link.tsx @@ -1,19 +1,20 @@ /** @jsx withSlots */ import * as React from 'react'; - import { Linking, View } from 'react-native'; -import { Text } from '@fluentui-react-native/text'; -import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; -import { compose } from '@uifabricshared/foundation-compose'; -import type { ILinkProps, ILinkSlotProps, ILinkState, ILinkRenderData, IWithLinkOptions, ILinkType } from './Link.types'; -import { linkName } from './Link.types'; -import { settings } from './Link.settings'; -import { foregroundColorTokens, textTokens, borderTokens } from '@fluentui-react-native/tokens'; + +import type { IViewProps } from '@fluentui-react-native/adapters'; import { useAsPressable, useKeyProps, useOnPressWithFocus, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; -import { mergeSettings } from '@uifabricshared/foundation-settings'; +import { Text } from '@fluentui-react-native/text'; +import { foregroundColorTokens, textTokens, borderTokens } from '@fluentui-react-native/tokens'; import type { ISlots } from '@uifabricshared/foundation-composable'; import { withSlots } from '@uifabricshared/foundation-composable'; -import type { IViewProps } from '@fluentui-react-native/adapters'; +import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; +import { compose } from '@uifabricshared/foundation-compose'; +import { mergeSettings } from '@uifabricshared/foundation-settings'; + +import { settings } from './Link.settings'; +import type { ILinkProps, ILinkSlotProps, ILinkState, ILinkRenderData, IWithLinkOptions, ILinkType } from './Link.types'; +import { linkName } from './Link.types'; export type ILinkHooks = [IWithLinkOptions, ILinkState]; diff --git a/packages/components/Link/src/legacy/Link.types.ts b/packages/components/Link/src/legacy/Link.types.ts index 1a9972650f..71d18246ea 100644 --- a/packages/components/Link/src/legacy/Link.types.ts +++ b/packages/components/Link/src/legacy/Link.types.ts @@ -1,9 +1,10 @@ import type * as React from 'react'; import type { ViewProps } from 'react-native'; -import type { IRenderData } from '@uifabricshared/foundation-composable'; -import type { IForegroundColorTokens, FontTokens, IBorderTokens } from '@fluentui-react-native/tokens'; -import type { ITextProps } from '@fluentui-react-native/text'; + import type { IFocusable, IPressableState, IWithPressableOptions } from '@fluentui-react-native/interactive-hooks'; +import type { ITextProps } from '@fluentui-react-native/text'; +import type { IForegroundColorTokens, FontTokens, IBorderTokens } from '@fluentui-react-native/tokens'; +import type { IRenderData } from '@uifabricshared/foundation-composable'; export const linkName = 'RNFLink'; diff --git a/packages/components/Link/src/legacy/__tests__/Link.test.tsx b/packages/components/Link/src/legacy/__tests__/Link.test.tsx index 0eb67e130c..aaf811c259 100644 --- a/packages/components/Link/src/legacy/__tests__/Link.test.tsx +++ b/packages/components/Link/src/legacy/__tests__/Link.test.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; import { View } from 'react-native'; -import { Link } from '../Link'; + import * as renderer from 'react-test-renderer'; +import { Link } from '../Link'; + it('Link all props', () => { const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); diff --git a/packages/components/Link/src/useLink.ts b/packages/components/Link/src/useLink.ts index 1becc4824e..0ea0fbcb13 100644 --- a/packages/components/Link/src/useLink.ts +++ b/packages/components/Link/src/useLink.ts @@ -1,4 +1,6 @@ import * as React from 'react'; +import { Linking, Platform } from 'react-native'; + import { useAsPressable, useKeyProps, @@ -6,8 +8,8 @@ import { useViewCommandFocus, getAccessibilityState, } from '@fluentui-react-native/interactive-hooks'; + import type { LinkProps, LinkInfo } from './Link.types'; -import { Linking, Platform } from 'react-native'; /*These callbacks are not implemented on iOS/macOS, and cause Redboxes if passed in. Limit to only windows/win32 for now*/ const isWinPlatform = Platform.OS === (('win32' as any) || 'windows'); diff --git a/packages/components/Menu/src/Menu/Menu.tsx b/packages/components/Menu/src/Menu/Menu.tsx index 580953822e..b08a02fd36 100644 --- a/packages/components/Menu/src/Menu/Menu.tsx +++ b/packages/components/Menu/src/Menu/Menu.tsx @@ -1,7 +1,9 @@ import React from 'react'; + +import { stagedComponent } from '@fluentui-react-native/framework'; + import type { MenuProps } from './Menu.types'; import { menuName } from './Menu.types'; -import { stagedComponent } from '@fluentui-react-native/framework'; import { useMenu } from './useMenu'; import { useMenuContextValue } from './useMenuContextValue'; import { MenuProvider } from '../context/menuContext'; diff --git a/packages/components/Menu/src/Menu/Menu.types.ts b/packages/components/Menu/src/Menu/Menu.types.ts index 6c22c54f48..c5ad4b43b3 100644 --- a/packages/components/Menu/src/Menu/Menu.types.ts +++ b/packages/components/Menu/src/Menu/Menu.types.ts @@ -1,6 +1,8 @@ -import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; import type React from 'react'; import type { View } from 'react-native'; + +import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; + import type { MenuListProps } from '../MenuList/MenuList.types'; export const menuName = 'Menu'; diff --git a/packages/components/Menu/src/Menu/useMenu.ts b/packages/components/Menu/src/Menu/useMenu.ts index e12786bf92..5e5f725835 100644 --- a/packages/components/Menu/src/Menu/useMenu.ts +++ b/packages/components/Menu/src/Menu/useMenu.ts @@ -1,9 +1,11 @@ -import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; -import { isMouseEvent } from '@fluentui-react-native/interactive-hooks'; import React from 'react'; import { Platform } from 'react-native'; -import { useMenuContext } from '../context/menuContext'; + +import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; +import { isMouseEvent } from '@fluentui-react-native/interactive-hooks'; + import type { MenuProps, MenuState } from './Menu.types'; +import { useMenuContext } from '../context/menuContext'; // Due to how events get fired we get double notifications // for the same event causing us to immediately reopen diff --git a/packages/components/Menu/src/Menu/useMenuContextValue.ts b/packages/components/Menu/src/Menu/useMenuContextValue.ts index d4e87b9c90..c3c9c8f748 100644 --- a/packages/components/Menu/src/Menu/useMenuContextValue.ts +++ b/packages/components/Menu/src/Menu/useMenuContextValue.ts @@ -1,6 +1,7 @@ import React from 'react'; -import type { MenuContextValue } from '../context/menuContext'; + import type { MenuState } from './Menu.types'; +import type { MenuContextValue } from '../context/menuContext'; export const useMenuContextValue = (state: MenuState): MenuContextValue => { const [triggerHoverOutTimer, setTriggerHoverOutTimer] = React.useState(); diff --git a/packages/components/Menu/src/MenuDivider/MenuDivider.styling.ts b/packages/components/Menu/src/MenuDivider/MenuDivider.styling.ts index 6fa9a4df0c..c218b157b4 100644 --- a/packages/components/Menu/src/MenuDivider/MenuDivider.styling.ts +++ b/packages/components/Menu/src/MenuDivider/MenuDivider.styling.ts @@ -1,8 +1,9 @@ import type { UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; -import { defaultMenuDividerTokens } from './MenuDividerTokens'; + import type { MenuDividerProps, MenuDividerTokens, MenuDividerSlotProps } from './MenuDivider.types'; import { menuDividerName } from './MenuDivider.types'; +import { defaultMenuDividerTokens } from './MenuDividerTokens'; export const stylingSettings: UseStylingOptions = { tokens: [defaultMenuDividerTokens, menuDividerName], diff --git a/packages/components/Menu/src/MenuDivider/MenuDivider.tsx b/packages/components/Menu/src/MenuDivider/MenuDivider.tsx index a8783809ae..028389bd68 100644 --- a/packages/components/Menu/src/MenuDivider/MenuDivider.tsx +++ b/packages/components/Menu/src/MenuDivider/MenuDivider.tsx @@ -1,10 +1,12 @@ /** @jsx withSlots */ import { View } from 'react-native'; + import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, withSlots } from '@fluentui-react-native/framework'; + +import { stylingSettings } from './MenuDivider.styling'; import type { MenuDividerProps, MenuDividerType } from './MenuDivider.types'; import { menuDividerName } from './MenuDivider.types'; -import { stylingSettings } from './MenuDivider.styling'; export const MenuDivider = compose({ displayName: menuDividerName, diff --git a/packages/components/Menu/src/MenuDivider/MenuDivider.types.ts b/packages/components/Menu/src/MenuDivider/MenuDivider.types.ts index 7865399c8f..0e162cac3e 100644 --- a/packages/components/Menu/src/MenuDivider/MenuDivider.types.ts +++ b/packages/components/Menu/src/MenuDivider/MenuDivider.types.ts @@ -1,5 +1,6 @@ import type * as React from 'react'; import type { ViewStyle } from 'react-native'; + import type { IViewProps } from '@fluentui-react-native/adapters'; import type { IBackgroundColorTokens } from '@fluentui-react-native/tokens'; diff --git a/packages/components/Menu/src/MenuDivider/MenuDividerTokens.macos.ts b/packages/components/Menu/src/MenuDivider/MenuDividerTokens.macos.ts index 2956cb5b99..8fc494fb76 100644 --- a/packages/components/Menu/src/MenuDivider/MenuDividerTokens.macos.ts +++ b/packages/components/Menu/src/MenuDivider/MenuDividerTokens.macos.ts @@ -1,6 +1,7 @@ import type { Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { MenuDividerTokens } from './MenuDivider.types'; export const defaultMenuDividerTokens: TokenSettings = (t: Theme): MenuDividerTokens => ({ diff --git a/packages/components/Menu/src/MenuDivider/MenuDividerTokens.ts b/packages/components/Menu/src/MenuDivider/MenuDividerTokens.ts index b870ac9d9e..0ac88badee 100644 --- a/packages/components/Menu/src/MenuDivider/MenuDividerTokens.ts +++ b/packages/components/Menu/src/MenuDivider/MenuDividerTokens.ts @@ -1,6 +1,7 @@ import type { Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { MenuDividerTokens } from './MenuDivider.types'; export const defaultMenuDividerTokens: TokenSettings = (t: Theme): MenuDividerTokens => ({ diff --git a/packages/components/Menu/src/MenuDivider/MenuDividerTokens.win32.ts b/packages/components/Menu/src/MenuDivider/MenuDividerTokens.win32.ts index d5ed9eedd1..5e2a2c7f26 100644 --- a/packages/components/Menu/src/MenuDivider/MenuDividerTokens.win32.ts +++ b/packages/components/Menu/src/MenuDivider/MenuDividerTokens.win32.ts @@ -1,6 +1,7 @@ import type { Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { MenuDividerTokens } from './MenuDivider.types'; export const defaultMenuDividerTokens: TokenSettings = (t: Theme): MenuDividerTokens => ({ diff --git a/packages/components/Menu/src/MenuItem/MenuItem.styling.ts b/packages/components/Menu/src/MenuItem/MenuItem.styling.ts index 127a5d0c51..79439a7f13 100644 --- a/packages/components/Menu/src/MenuItem/MenuItem.styling.ts +++ b/packages/components/Menu/src/MenuItem/MenuItem.styling.ts @@ -1,9 +1,10 @@ import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/tokens'; -import { defaultMenuItemTokens } from './MenuItemTokens'; + import type { MenuItemProps, MenuItemTokens, MenuItemSlotProps } from './MenuItem.types'; import { menuItemName } from './MenuItem.types'; +import { defaultMenuItemTokens } from './MenuItemTokens'; export const menuItemStates: (keyof MenuItemTokens)[] = ['hovered', 'focused', 'pressed', 'disabled']; diff --git a/packages/components/Menu/src/MenuItem/MenuItem.tsx b/packages/components/Menu/src/MenuItem/MenuItem.tsx index 4268bd458d..35a638787a 100644 --- a/packages/components/Menu/src/MenuItem/MenuItem.tsx +++ b/packages/components/Menu/src/MenuItem/MenuItem.tsx @@ -1,14 +1,16 @@ /** @jsx withSlots */ +import React from 'react'; import { I18nManager, Pressable, View } from 'react-native'; -import { SvgXml } from 'react-native-svg'; + import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, memoize, mergeProps, withSlots } from '@fluentui-react-native/framework'; import { TextV1 as Text } from '@fluentui-react-native/text'; +import { SvgXml } from 'react-native-svg'; + +import { stylingSettings } from './MenuItem.styling'; import type { MenuItemProps, MenuItemType } from './MenuItem.types'; import { menuItemName } from './MenuItem.types'; import { useMenuItem } from './useMenuItem'; -import { stylingSettings } from './MenuItem.styling'; -import React from 'react'; export const MenuItem = compose({ displayName: menuItemName, diff --git a/packages/components/Menu/src/MenuItem/MenuItem.types.ts b/packages/components/Menu/src/MenuItem/MenuItem.types.ts index e43f3564ce..452482b62f 100644 --- a/packages/components/Menu/src/MenuItem/MenuItem.types.ts +++ b/packages/components/Menu/src/MenuItem/MenuItem.types.ts @@ -1,10 +1,11 @@ import type * as React from 'react'; import type { ColorValue } from 'react-native'; -import type { XmlProps } from 'react-native-svg'; + import type { IViewProps } from '@fluentui-react-native/adapters'; -import type { TextProps } from '@fluentui-react-native/text'; import type { IFocusable, InteractionEvent, PressablePropsExtended, PressableState } from '@fluentui-react-native/interactive-hooks'; +import type { TextProps } from '@fluentui-react-native/text'; import type { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/tokens'; +import type { XmlProps } from 'react-native-svg'; export const menuItemName = 'MenuItem'; diff --git a/packages/components/Menu/src/MenuItem/MenuItemTokens.macos.ts b/packages/components/Menu/src/MenuItem/MenuItemTokens.macos.ts index cabab9fd87..fbad3817b4 100644 --- a/packages/components/Menu/src/MenuItem/MenuItemTokens.macos.ts +++ b/packages/components/Menu/src/MenuItem/MenuItemTokens.macos.ts @@ -1,6 +1,7 @@ import type { FontWeightValue, Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { MenuItemTokens } from './MenuItem.types'; export const defaultMenuItemTokens: TokenSettings = (t: Theme): MenuItemTokens => ({ diff --git a/packages/components/Menu/src/MenuItem/MenuItemTokens.ts b/packages/components/Menu/src/MenuItem/MenuItemTokens.ts index 846a29228e..7e2f01ba42 100644 --- a/packages/components/Menu/src/MenuItem/MenuItemTokens.ts +++ b/packages/components/Menu/src/MenuItem/MenuItemTokens.ts @@ -1,6 +1,7 @@ import type { FontWeightValue, Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { MenuItemTokens } from './MenuItem.types'; export const defaultMenuItemTokens: TokenSettings = (t: Theme): MenuItemTokens => ({ diff --git a/packages/components/Menu/src/MenuItem/MenuItemTokens.win32.ts b/packages/components/Menu/src/MenuItem/MenuItemTokens.win32.ts index a5d6c7fd15..f6ebadb3da 100644 --- a/packages/components/Menu/src/MenuItem/MenuItemTokens.win32.ts +++ b/packages/components/Menu/src/MenuItem/MenuItemTokens.win32.ts @@ -1,6 +1,7 @@ import type { FontWeightValue, Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { MenuItemTokens } from './MenuItem.types'; export const defaultMenuItemTokens: TokenSettings = (t: Theme): MenuItemTokens => ({ diff --git a/packages/components/Menu/src/MenuItem/useMenuItem.ts b/packages/components/Menu/src/MenuItem/useMenuItem.ts index 1688db3298..d32f2cdd4a 100644 --- a/packages/components/Menu/src/MenuItem/useMenuItem.ts +++ b/packages/components/Menu/src/MenuItem/useMenuItem.ts @@ -1,10 +1,12 @@ import * as React from 'react'; import type { AccessibilityState } from 'react-native'; import { I18nManager, Platform } from 'react-native'; -import type { MenuItemProps, MenuItemInfo } from './MenuItem.types'; + import { memoize } from '@fluentui-react-native/framework'; import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; import { isKeyPressEvent, usePressableState, useKeyDownProps, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; + +import type { MenuItemProps, MenuItemInfo } from './MenuItem.types'; import { useMenuContext } from '../context/menuContext'; import { useMenuListContext } from '../context/menuListContext'; import { useMenuTriggerContext } from '../context/menuTriggerContext'; diff --git a/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckbox.styling.ts b/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckbox.styling.ts index 6d2cf8961d..4cdc56eb56 100644 --- a/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckbox.styling.ts +++ b/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckbox.styling.ts @@ -1,9 +1,10 @@ import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/tokens'; -import { defaultMenuItemCheckboxTokens } from './MenuItemCheckboxTokens'; + import type { MenuItemCheckboxProps, MenuItemCheckboxTokens, MenuItemCheckboxSlotProps } from './MenuItemCheckbox.types'; import { menuItemCheckboxName } from './MenuItemCheckbox.types'; +import { defaultMenuItemCheckboxTokens } from './MenuItemCheckboxTokens'; export const menuItemCheckboxStates: (keyof MenuItemCheckboxTokens)[] = ['hovered', 'focused', 'pressed', 'disabled', 'checked']; diff --git a/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckbox.tsx b/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckbox.tsx index 5ddf47f3b6..2d91db98d7 100644 --- a/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckbox.tsx +++ b/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckbox.tsx @@ -1,9 +1,13 @@ /** @jsx withSlots */ +import React from 'react'; import { Pressable } from 'react-native'; -import { SvgXml } from 'react-native-svg'; + import type { Slots, UseSlots } from '@fluentui-react-native/framework'; import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework'; import { TextV1 as Text } from '@fluentui-react-native/text'; +import { SvgXml } from 'react-native-svg'; + +import { stylingSettings } from './MenuItemCheckbox.styling'; import type { MenuItemCheckboxProps, MenuItemCheckboxSlotProps, @@ -12,9 +16,7 @@ import type { } from './MenuItemCheckbox.types'; import { menuItemCheckboxName } from './MenuItemCheckbox.types'; import { useMenuItemCheckbox } from './useMenuItemCheckbox'; -import { stylingSettings } from './MenuItemCheckbox.styling'; import { getAccessibilityLabel, getTooltip } from '../MenuItem/MenuItem'; -import React from 'react'; export const MenuItemCheckbox = compose({ displayName: menuItemCheckboxName, diff --git a/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckbox.types.ts b/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckbox.types.ts index 6cf950e7b8..fde582b689 100644 --- a/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckbox.types.ts +++ b/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckbox.types.ts @@ -1,8 +1,10 @@ import type * as React from 'react'; import type { ColorValue } from 'react-native'; -import type { XmlProps } from 'react-native-svg'; -import type { TextProps } from '@fluentui-react-native/text'; + import type { PressablePropsExtended, PressableState } from '@fluentui-react-native/interactive-hooks'; +import type { TextProps } from '@fluentui-react-native/text'; +import type { XmlProps } from 'react-native-svg'; + import type { MenuItemProps, MenuItemTokens } from '../MenuItem/MenuItem.types'; export const menuItemCheckboxName = 'MenuItemCheckbox'; diff --git a/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.macos.ts b/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.macos.ts index 2962ccd490..55f116937d 100644 --- a/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.macos.ts +++ b/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.macos.ts @@ -1,6 +1,7 @@ import type { FontWeightValue, Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { MenuItemCheckboxTokens } from './MenuItemCheckbox.types'; export const defaultMenuItemCheckboxTokens: TokenSettings = (t: Theme): MenuItemCheckboxTokens => ({ diff --git a/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.ts b/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.ts index d403cd9387..61b5ab0167 100644 --- a/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.ts +++ b/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.ts @@ -1,6 +1,7 @@ import type { FontWeightValue, Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { MenuItemCheckboxTokens } from './MenuItemCheckbox.types'; export const defaultMenuItemCheckboxTokens: TokenSettings = (t: Theme): MenuItemCheckboxTokens => ({ diff --git a/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.win32.ts b/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.win32.ts index 7d0e469571..4ef282247c 100644 --- a/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.win32.ts +++ b/packages/components/Menu/src/MenuItemCheckbox/MenuItemCheckboxTokens.win32.ts @@ -1,6 +1,7 @@ import type { FontWeightValue, Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { MenuItemCheckboxTokens } from './MenuItemCheckbox.types'; export const defaultMenuItemCheckboxTokens: TokenSettings = (t: Theme): MenuItemCheckboxTokens => ({ diff --git a/packages/components/Menu/src/MenuItemCheckbox/useMenuItemCheckbox.ts b/packages/components/Menu/src/MenuItemCheckbox/useMenuItemCheckbox.ts index 5710eafac0..e465e44621 100644 --- a/packages/components/Menu/src/MenuItemCheckbox/useMenuItemCheckbox.ts +++ b/packages/components/Menu/src/MenuItemCheckbox/useMenuItemCheckbox.ts @@ -1,13 +1,15 @@ import * as React from 'react'; import type { AccessibilityActionEvent, AccessibilityState } from 'react-native'; import { I18nManager, Platform } from 'react-native'; -import type { MenuItemCheckboxProps, MenuItemCheckboxInfo } from './MenuItemCheckbox.types'; + import { memoize } from '@fluentui-react-native/framework'; import type { InteractionEvent, KeyPressEvent } from '@fluentui-react-native/interactive-hooks'; import { usePressableState, useKeyDownProps, useOnPressWithFocus, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; + +import type { MenuItemCheckboxProps, MenuItemCheckboxInfo } from './MenuItemCheckbox.types'; +import { useMenuContext } from '../context/menuContext'; import { useMenuListContext } from '../context/menuListContext'; import { submenuTriggerKeys, triggerKeys, useHoverFocusEffect } from '../MenuItem/useMenuItem'; -import { useMenuContext } from '../context/menuContext'; const defaultAccessibilityActions = [{ name: 'Toggle' }]; diff --git a/packages/components/Menu/src/MenuItemRadio/MenuItemRadio.tsx b/packages/components/Menu/src/MenuItemRadio/MenuItemRadio.tsx index f44b8a07d3..4869a382a5 100644 --- a/packages/components/Menu/src/MenuItemRadio/MenuItemRadio.tsx +++ b/packages/components/Menu/src/MenuItemRadio/MenuItemRadio.tsx @@ -1,4 +1,5 @@ import type { UseSlots } from '@fluentui-react-native/framework'; + import { useMenuItemRadio } from './useMenuItemRadio'; import { MenuItemCheckbox, menuItemFinalRender } from '../MenuItemCheckbox/MenuItemCheckbox'; import type { MenuItemCheckboxProps, MenuItemCheckboxType } from '../MenuItemCheckbox/MenuItemCheckbox.types'; diff --git a/packages/components/Menu/src/MenuItemRadio/useMenuItemRadio.ts b/packages/components/Menu/src/MenuItemRadio/useMenuItemRadio.ts index 3b36d20928..369344b2ef 100644 --- a/packages/components/Menu/src/MenuItemRadio/useMenuItemRadio.ts +++ b/packages/components/Menu/src/MenuItemRadio/useMenuItemRadio.ts @@ -1,9 +1,11 @@ import * as React from 'react'; + import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; + +import { useMenuContext } from '../context/menuContext'; import { useMenuListContext } from '../context/menuListContext'; import type { MenuItemCheckboxProps, MenuItemCheckboxInfo } from '../MenuItemCheckbox/MenuItemCheckbox.types'; import { useMenuCheckboxInteraction } from '../MenuItemCheckbox/useMenuItemCheckbox'; -import { useMenuContext } from '../context/menuContext'; export const useMenuItemRadio = (props: MenuItemCheckboxProps): MenuItemCheckboxInfo => { const { disabled, name, persistOnClick } = props; diff --git a/packages/components/Menu/src/MenuList/MenuList.styling.ts b/packages/components/Menu/src/MenuList/MenuList.styling.ts index d57f74f621..6bd1b04c2f 100644 --- a/packages/components/Menu/src/MenuList/MenuList.styling.ts +++ b/packages/components/Menu/src/MenuList/MenuList.styling.ts @@ -1,9 +1,10 @@ import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; import { layoutStyles } from '@fluentui-react-native/tokens'; -import { defaultMenuListTokens } from './MenuListTokens'; + import type { MenuListProps, MenuListTokens, MenuListSlotProps } from './MenuList.types'; import { menuListName } from './MenuList.types'; +import { defaultMenuListTokens } from './MenuListTokens'; export const menuListStates: (keyof MenuListTokens)[] = ['hasMaxHeight']; diff --git a/packages/components/Menu/src/MenuList/MenuList.tsx b/packages/components/Menu/src/MenuList/MenuList.tsx index cbf2250f47..6a1dec046e 100644 --- a/packages/components/Menu/src/MenuList/MenuList.tsx +++ b/packages/components/Menu/src/MenuList/MenuList.tsx @@ -1,17 +1,19 @@ /** @jsx withSlots */ import React from 'react'; import { Platform, ScrollView, View } from 'react-native'; -import type { UseSlots } from '@fluentui-react-native/framework'; -import { compose, mergeProps, stagedComponent, withSlots } from '@fluentui-react-native/framework'; -import type { MenuListProps, MenuListState, MenuListType } from './MenuList.types'; -import { menuListName } from './MenuList.types'; -import { stylingSettings } from './MenuList.styling'; -import { MenuListProvider } from '../context/menuListContext'; -import { useMenuList } from './useMenuList'; -import { useMenuListContextValue } from './useMenuListContextValue'; + import type { IViewProps } from '@fluentui-react-native/adapters'; import { FocusZone } from '@fluentui-react-native/focus-zone'; +import type { UseSlots } from '@fluentui-react-native/framework'; +import { compose, mergeProps, stagedComponent, withSlots } from '@fluentui-react-native/framework'; + +import { stylingSettings } from './MenuList.styling'; +import type { MenuListProps, MenuListState, MenuListType } from './MenuList.types'; +import { menuListName } from './MenuList.types'; +import { useMenuList } from './useMenuList'; +import { useMenuListContextValue } from './useMenuListContextValue'; import { useMenuContext } from '../context'; +import { MenuListProvider } from '../context/menuListContext'; const MenuStack = stagedComponent((props: React.PropsWithRef & { gap?: number }) => { const { gap, ...rest } = props; diff --git a/packages/components/Menu/src/MenuList/MenuList.types.ts b/packages/components/Menu/src/MenuList/MenuList.types.ts index 5db858c7b1..bb70db10a4 100644 --- a/packages/components/Menu/src/MenuList/MenuList.types.ts +++ b/packages/components/Menu/src/MenuList/MenuList.types.ts @@ -1,9 +1,10 @@ +import type React from 'react'; +import type { ScrollViewProps } from 'react-native'; + import type { IViewProps } from '@fluentui-react-native/adapters'; import type { FocusZoneProps } from '@fluentui-react-native/focus-zone'; import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; import type { IBackgroundColorTokens, LayoutTokens } from '@fluentui-react-native/tokens'; -import type React from 'react'; -import type { ScrollViewProps } from 'react-native'; export const menuListName = 'MenuList'; diff --git a/packages/components/Menu/src/MenuList/MenuListTokens.macos.ts b/packages/components/Menu/src/MenuList/MenuListTokens.macos.ts index 361b3baad0..921fc0eccd 100644 --- a/packages/components/Menu/src/MenuList/MenuListTokens.macos.ts +++ b/packages/components/Menu/src/MenuList/MenuListTokens.macos.ts @@ -1,6 +1,7 @@ import type { Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { MenuListTokens } from './MenuList.types'; export const defaultMenuListTokens: TokenSettings = (t: Theme): MenuListTokens => ({ diff --git a/packages/components/Menu/src/MenuList/MenuListTokens.ts b/packages/components/Menu/src/MenuList/MenuListTokens.ts index b8c32696cf..e05258381c 100644 --- a/packages/components/Menu/src/MenuList/MenuListTokens.ts +++ b/packages/components/Menu/src/MenuList/MenuListTokens.ts @@ -1,6 +1,7 @@ import type { Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { MenuListTokens } from './MenuList.types'; export const defaultMenuListTokens: TokenSettings = (t: Theme): MenuListTokens => ({ diff --git a/packages/components/Menu/src/MenuList/MenuListTokens.win32.ts b/packages/components/Menu/src/MenuList/MenuListTokens.win32.ts index 267f9debd0..ca9e565aa5 100644 --- a/packages/components/Menu/src/MenuList/MenuListTokens.win32.ts +++ b/packages/components/Menu/src/MenuList/MenuListTokens.win32.ts @@ -1,6 +1,7 @@ import type { Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { MenuListTokens } from './MenuList.types'; export const defaultMenuListTokens: TokenSettings = (t: Theme): MenuListTokens => ({ diff --git a/packages/components/Menu/src/MenuList/useMenuList.ts b/packages/components/Menu/src/MenuList/useMenuList.ts index 4480f6db3a..4995eadb71 100644 --- a/packages/components/Menu/src/MenuList/useMenuList.ts +++ b/packages/components/Menu/src/MenuList/useMenuList.ts @@ -1,7 +1,9 @@ -import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; import React from 'react'; -import { useMenuContext } from '../context/menuContext'; + +import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; + import type { MenuListProps, MenuListState } from './MenuList.types'; +import { useMenuContext } from '../context/menuContext'; // Track the radio items so we know what to clear selection from when selectRadio is called // Purposefully left out of the hook because diff --git a/packages/components/Menu/src/MenuList/useMenuListContextValue.ts b/packages/components/Menu/src/MenuList/useMenuListContextValue.ts index c9c43d6a66..94b755e498 100644 --- a/packages/components/Menu/src/MenuList/useMenuListContextValue.ts +++ b/packages/components/Menu/src/MenuList/useMenuListContextValue.ts @@ -1,5 +1,5 @@ -import type { MenuListContextValue } from '../context/menuListContext'; import type { MenuListState } from './MenuList.types'; +import type { MenuListContextValue } from '../context/menuListContext'; export const useMenuListContextValue = (state: MenuListState): MenuListContextValue => { return { hasCheckmarks: state.props.hasCheckmarks, hasTooltips: state.props.hasTooltips, ...state }; diff --git a/packages/components/Menu/src/MenuPopover/MenuPopover.tsx b/packages/components/Menu/src/MenuPopover/MenuPopover.tsx index e3644ef9fd..b8a3f938bb 100644 --- a/packages/components/Menu/src/MenuPopover/MenuPopover.tsx +++ b/packages/components/Menu/src/MenuPopover/MenuPopover.tsx @@ -1,12 +1,14 @@ import React from 'react'; +import { Platform, View } from 'react-native'; + +import { Callout } from '@fluentui-react-native/callout'; import type { UseTokens } from '@fluentui-react-native/framework'; import { compressible, mergeProps, patchTokens, useFluentTheme } from '@fluentui-react-native/framework'; -import { Callout } from '@fluentui-react-native/callout'; + import type { MenuPopoverProps, MenuPopoverTokens } from './MenuPopover.types'; import { menuPopoverName } from './MenuPopover.types'; -import { useMenuPopover } from './useMenuPopover'; import { useMenuPopoverTokens } from './MenuPopoverTokens'; -import { Platform, View } from 'react-native'; +import { useMenuPopover } from './useMenuPopover'; import { useMenuContext } from '../context'; export const MenuPopover = compressible( diff --git a/packages/components/Menu/src/MenuPopover/MenuPopoverTokens.ts b/packages/components/Menu/src/MenuPopover/MenuPopoverTokens.ts index cb50069654..89a84cfab6 100644 --- a/packages/components/Menu/src/MenuPopover/MenuPopoverTokens.ts +++ b/packages/components/Menu/src/MenuPopover/MenuPopoverTokens.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import { buildUseTokens } from '@fluentui-react-native/framework'; + import type { MenuPopoverTokens } from './MenuPopover.types'; import { menuPopoverName } from './MenuPopover.types'; diff --git a/packages/components/Menu/src/MenuPopover/useMenuPopover.ts b/packages/components/Menu/src/MenuPopover/useMenuPopover.ts index 67f7e0fce9..bf85cbfee4 100644 --- a/packages/components/Menu/src/MenuPopover/useMenuPopover.ts +++ b/packages/components/Menu/src/MenuPopover/useMenuPopover.ts @@ -1,8 +1,10 @@ import React from 'react'; import { I18nManager, Platform } from 'react-native'; + import type { DirectionalHint, DismissBehaviors } from '@fluentui-react-native/callout'; -import { useMenuContext } from '../context/menuContext'; + import type { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types'; +import { useMenuContext } from '../context/menuContext'; const controlledDismissBehaviors = ['preventDismissOnKeyDown', 'preventDismissOnClickOutside'] as DismissBehaviors[]; diff --git a/packages/components/Menu/src/MenuTrigger/MenuTrigger.tsx b/packages/components/Menu/src/MenuTrigger/MenuTrigger.tsx index 55c5a6e380..c601dfd487 100644 --- a/packages/components/Menu/src/MenuTrigger/MenuTrigger.tsx +++ b/packages/components/Menu/src/MenuTrigger/MenuTrigger.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; + import type { MenuTriggerProps } from './MenuTrigger.types'; import { menuTriggerName } from './MenuTrigger.types'; import { useMenuTrigger } from './useMenuTrigger'; diff --git a/packages/components/Menu/src/MenuTrigger/MenuTrigger.types.ts b/packages/components/Menu/src/MenuTrigger/MenuTrigger.types.ts index 280e46b46f..20be2146d3 100644 --- a/packages/components/Menu/src/MenuTrigger/MenuTrigger.types.ts +++ b/packages/components/Menu/src/MenuTrigger/MenuTrigger.types.ts @@ -1,4 +1,5 @@ import type * as React from 'react'; + import type { InteractionEvent, PressablePropsExtended } from '@fluentui-react-native/interactive-hooks'; export const menuTriggerName = 'MenuTrigger'; diff --git a/packages/components/Menu/src/MenuTrigger/useMenuTrigger.ts b/packages/components/Menu/src/MenuTrigger/useMenuTrigger.ts index b9bc161bce..1598d96f17 100644 --- a/packages/components/Menu/src/MenuTrigger/useMenuTrigger.ts +++ b/packages/components/Menu/src/MenuTrigger/useMenuTrigger.ts @@ -1,11 +1,13 @@ -import { useMenuContext } from '../context/menuContext'; -import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; -import type { MenuTriggerChildProps, MenuTriggerState } from './MenuTrigger.types'; +import React from 'react'; import type { AccessibilityActionEvent, AccessibilityActionName } from 'react-native'; import { Platform } from 'react-native'; -import React from 'react'; -import { hoverDelayDefault } from '../consts'; + +import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; + +import type { MenuTriggerChildProps, MenuTriggerState } from './MenuTrigger.types'; import { useMergedRefs } from './useMergeRefs'; +import { hoverDelayDefault } from '../consts'; +import { useMenuContext } from '../context/menuContext'; const baseAccessibilityActions = Platform.OS === ('win32' as any) ? [{ name: 'Expand' as AccessibilityActionName }, { name: 'Collapse' as AccessibilityActionName }] : []; diff --git a/packages/components/Menu/src/__tests__/Menu.test.tsx b/packages/components/Menu/src/__tests__/Menu.test.tsx index bfeb8981c6..2455b1f344 100644 --- a/packages/components/Menu/src/__tests__/Menu.test.tsx +++ b/packages/components/Menu/src/__tests__/Menu.test.tsx @@ -1,16 +1,18 @@ import * as React from 'react'; import type { AccessibilityActionName } from 'react-native'; -import * as renderer from 'react-test-renderer'; -import { Menu } from '../Menu/Menu'; -import { checkReRender } from '@fluentui-react-native/test-tools'; -import MenuTrigger from '../MenuTrigger/MenuTrigger'; + import { ButtonV1 as Button } from '@fluentui-react-native/button'; -import MenuPopover from '../MenuPopover/MenuPopover'; -import { MenuList } from '../MenuList/MenuList'; +import { checkReRender } from '@fluentui-react-native/test-tools'; +import * as renderer from 'react-test-renderer'; + +import { Menu } from '../Menu/Menu'; +import { MenuDivider } from '../MenuDivider/MenuDivider'; import { MenuItem } from '../MenuItem/MenuItem'; import { MenuItemCheckbox } from '../MenuItemCheckbox/MenuItemCheckbox'; -import { MenuDivider } from '../MenuDivider/MenuDivider'; import { MenuItemRadio } from '../MenuItemRadio/MenuItemRadio'; +import { MenuList } from '../MenuList/MenuList'; +import MenuPopover from '../MenuPopover/MenuPopover'; +import MenuTrigger from '../MenuTrigger/MenuTrigger'; describe('Menu component tests', () => { it('Menu default', () => { diff --git a/packages/components/Menu/src/context/menuContext.ts b/packages/components/Menu/src/context/menuContext.ts index f0ca7fb149..c3beb86b5b 100644 --- a/packages/components/Menu/src/context/menuContext.ts +++ b/packages/components/Menu/src/context/menuContext.ts @@ -1,4 +1,5 @@ import * as React from 'react'; + import type { MenuState } from '../Menu/Menu.types'; /** diff --git a/packages/components/Menu/src/context/menuListContext.ts b/packages/components/Menu/src/context/menuListContext.ts index 6d3efafd9b..ad9332f1ab 100644 --- a/packages/components/Menu/src/context/menuListContext.ts +++ b/packages/components/Menu/src/context/menuListContext.ts @@ -1,4 +1,5 @@ import * as React from 'react'; + import type { MenuListState } from '../MenuList/MenuList.types'; /** diff --git a/packages/components/MenuButton/src/MenuButton.macos.tsx b/packages/components/MenuButton/src/MenuButton.macos.tsx index 00d5838577..bb706c955e 100644 --- a/packages/components/MenuButton/src/MenuButton.macos.tsx +++ b/packages/components/MenuButton/src/MenuButton.macos.tsx @@ -1,15 +1,17 @@ /** @jsx withSlots */ -import type { ImageResolvedAssetSource } from 'react-native'; import { Image } from 'react-native'; -import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; -import { compose } from '@uifabricshared/foundation-compose'; -import { mergeSettings } from '@uifabricshared/foundation-settings'; -import type { ISlots } from '@uifabricshared/foundation-composable'; -import { withSlots } from '@uifabricshared/foundation-composable'; -import { backgroundColorTokens, borderTokens } from '@fluentui-react-native/tokens'; +import type { ImageResolvedAssetSource } from 'react-native'; + import { ensureNativeComponent } from '@fluentui-react-native/component-cache'; import type { IconProps } from '@fluentui-react-native/icon'; import { createIconProps } from '@fluentui-react-native/icon'; +import { backgroundColorTokens, borderTokens } from '@fluentui-react-native/tokens'; +import type { ISlots } from '@uifabricshared/foundation-composable'; +import { withSlots } from '@uifabricshared/foundation-composable'; +import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; +import { compose } from '@uifabricshared/foundation-compose'; +import { mergeSettings } from '@uifabricshared/foundation-settings'; + import type { MenuButtonProps, MenuButtonSlotProps, diff --git a/packages/components/MenuButton/src/MenuButton.tsx b/packages/components/MenuButton/src/MenuButton.tsx index 95183b739c..1bb5bef696 100644 --- a/packages/components/MenuButton/src/MenuButton.tsx +++ b/packages/components/MenuButton/src/MenuButton.tsx @@ -1,16 +1,17 @@ /** @jsx withSlots */ import React, { useRef, useState, useCallback } from 'react'; + import { ButtonV1 as Button } from '@fluentui-react-native/button'; import { ContextualMenu, ContextualMenuItem, SubmenuItem, Submenu } from '@fluentui-react-native/contextual-menu'; +import { backgroundColorTokens, borderTokens } from '@fluentui-react-native/tokens'; +import type { ISlots } from '@uifabricshared/foundation-composable'; +import { withSlots } from '@uifabricshared/foundation-composable'; import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; import { compose } from '@uifabricshared/foundation-compose'; import { mergeSettings } from '@uifabricshared/foundation-settings'; -import type { ISlots } from '@uifabricshared/foundation-composable'; -import { withSlots } from '@uifabricshared/foundation-composable'; -import { backgroundColorTokens, borderTokens } from '@fluentui-react-native/tokens'; import { SvgXml } from 'react-native-svg'; -import { defaultIconColor, primaryIconColor } from './MenuButton.style'; +import { defaultIconColor, primaryIconColor } from './MenuButton.style'; import type { MenuButtonProps, MenuButtonSlotProps, diff --git a/packages/components/MenuButton/src/MenuButton.types.ts b/packages/components/MenuButton/src/MenuButton.types.ts index 603b77edfa..3f6f60247d 100644 --- a/packages/components/MenuButton/src/MenuButton.types.ts +++ b/packages/components/MenuButton/src/MenuButton.types.ts @@ -1,7 +1,7 @@ -import type { ContextualMenuItemProps, ContextualMenuProps, SubmenuProps } from '@fluentui-react-native/contextual-menu'; -import type { FontTokens, IForegroundColorTokens, IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens'; -import type { IconSourcesType } from '@fluentui-react-native/icon'; import type { ButtonProps } from '@fluentui-react-native/button'; +import type { ContextualMenuItemProps, ContextualMenuProps, SubmenuProps } from '@fluentui-react-native/contextual-menu'; +import type { IconSourcesType } from '@fluentui-react-native/icon'; +import type { FontTokens, IForegroundColorTokens, IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens'; import type { IRenderData } from '@uifabricshared/foundation-composable'; import type { XmlProps } from 'react-native-svg'; diff --git a/packages/components/MenuButton/src/__tests__/MenuButton.test.tsx b/packages/components/MenuButton/src/__tests__/MenuButton.test.tsx index ac0e476b57..9a88ddb5fb 100644 --- a/packages/components/MenuButton/src/__tests__/MenuButton.test.tsx +++ b/packages/components/MenuButton/src/__tests__/MenuButton.test.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; + +import * as renderer from 'react-test-renderer'; + import type { MenuButtonItemProps } from '..'; import { MenuButton } from '..'; -import * as renderer from 'react-test-renderer'; it('ContextualMenu default', () => { const menuItems: MenuButtonItemProps[] = [ diff --git a/packages/components/Notification/src/Notification.helper.tsx b/packages/components/Notification/src/Notification.helper.tsx index fef751dd76..1f7692245b 100644 --- a/packages/components/Notification/src/Notification.helper.tsx +++ b/packages/components/Notification/src/Notification.helper.tsx @@ -1,12 +1,14 @@ import React from 'react'; -import type { SvgProps } from 'react-native-svg'; -import Svg, { G, Path } from 'react-native-svg'; + import type { ButtonProps, ButtonTokens } from '@fluentui-react-native/button'; import { ButtonV1 as Button } from '@fluentui-react-native/button'; import { mergeProps, stagedComponent } from '@fluentui-react-native/framework'; import type { SvgIconProps } from '@fluentui-react-native/icon'; import { createIconProps } from '@fluentui-react-native/icon'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import Svg, { G, Path } from 'react-native-svg'; +import type { SvgProps } from 'react-native-svg'; + import type { NotificationProps } from './Notification.types'; export type NotificationButtonColorStates = { disabledColor?; pressedColor? }; diff --git a/packages/components/Notification/src/Notification.styling.ts b/packages/components/Notification/src/Notification.styling.ts index eae216483b..f6c0aab50a 100644 --- a/packages/components/Notification/src/Notification.styling.ts +++ b/packages/components/Notification/src/Notification.styling.ts @@ -1,8 +1,9 @@ -import type { NotificationTokens, NotificationSlotProps, NotificationProps } from './Notification.types'; -import { notification } from './Notification.types'; import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; import { borderStyles, fontStyles, layoutStyles } from '@fluentui-react-native/tokens'; + +import { notification } from './Notification.types'; +import type { NotificationTokens, NotificationSlotProps, NotificationProps } from './Notification.types'; import { defaultNotificationTokens } from './NotificationTokens'; export const notificationStates: (keyof NotificationTokens)[] = [ diff --git a/packages/components/Notification/src/Notification.tsx b/packages/components/Notification/src/Notification.tsx index fb8cc4b7cb..523295ef51 100644 --- a/packages/components/Notification/src/Notification.tsx +++ b/packages/components/Notification/src/Notification.tsx @@ -1,19 +1,21 @@ /** @jsx withSlots */ -import type { NotificationType, NotificationProps } from './Notification.types'; -import { notification } from './Notification.types'; -import { Pressable } from '@fluentui-react-native/pressable'; import type { PressableProps, ViewStyle, ViewProps } from 'react-native'; import { useWindowDimensions, View } from 'react-native'; -import { Icon, createIconProps } from '@fluentui-react-native/icon'; -import { Body2, Body2Strong } from '@fluentui-react-native/text'; -import { stylingSettings } from './Notification.styling'; -import type { UseSlots } from '@fluentui-react-native/framework'; -import { compose, mergeProps, withSlots, memoize } from '@fluentui-react-native/framework'; -import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; -import { NotificationButton, createNotificationButtonProps } from './Notification.helper'; -import { Shadow } from '@fluentui-react-native/experimental-shadow'; + import type { SizeClassIOS } from '@fluentui-react-native/experimental-appearance-additions'; import { useHorizontalSizeClass } from '@fluentui-react-native/experimental-appearance-additions'; +import { Shadow } from '@fluentui-react-native/experimental-shadow'; +import type { UseSlots } from '@fluentui-react-native/framework'; +import { compose, mergeProps, withSlots, memoize } from '@fluentui-react-native/framework'; +import { Icon, createIconProps } from '@fluentui-react-native/icon'; +import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; +import { Pressable } from '@fluentui-react-native/pressable'; +import { Body2, Body2Strong } from '@fluentui-react-native/text'; + +import { NotificationButton, createNotificationButtonProps } from './Notification.helper'; +import { stylingSettings } from './Notification.styling'; +import type { NotificationType, NotificationProps } from './Notification.types'; +import { notification } from './Notification.types'; /** * A function which determines if a set of styles should be applied to the component given the current state and props of the Notification. diff --git a/packages/components/Notification/src/Notification.types.ts b/packages/components/Notification/src/Notification.types.ts index ffeebd4196..9e14552bd3 100644 --- a/packages/components/Notification/src/Notification.types.ts +++ b/packages/components/Notification/src/Notification.types.ts @@ -1,12 +1,14 @@ import type { PressableProps } from 'react-native'; -import type { IconProps, IconSourcesType } from '@fluentui-react-native/icon'; + import type { IViewProps, ITextProps } from '@fluentui-react-native/adapters'; import type { ButtonProps } from '@fluentui-react-native/button'; -import type { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/tokens'; -import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; -import type { NotificationButtonColorStates } from './Notification.helper'; import type { ShadowProps } from '@fluentui-react-native/experimental-shadow'; +import type { IconProps, IconSourcesType } from '@fluentui-react-native/icon'; +import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks'; import type { ShadowToken } from '@fluentui-react-native/theme-types'; +import type { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/tokens'; + +import type { NotificationButtonColorStates } from './Notification.helper'; export const notification = 'Notification'; export const NotificationVariants = ['primary', 'neutral', 'primaryBar', 'primaryOutlineBar', 'neutralBar', 'danger', 'warning'] as const; diff --git a/packages/components/Notification/src/NotificationTokens.ios.ts b/packages/components/Notification/src/NotificationTokens.ios.ts index 235b4c781f..c774988b6a 100644 --- a/packages/components/Notification/src/NotificationTokens.ios.ts +++ b/packages/components/Notification/src/NotificationTokens.ios.ts @@ -1,8 +1,10 @@ +import { DynamicColorIOS } from 'react-native'; + import type { Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { NotificationTokens } from './Notification.types'; -import { DynamicColorIOS } from 'react-native'; /** * Fluent 2 colors are not yet in the token pipeline for iOS so DynamicColorIOS is necessary for dark mode diff --git a/packages/components/Notification/src/NotificationTokens.ts b/packages/components/Notification/src/NotificationTokens.ts index b96985bf33..452702d054 100644 --- a/packages/components/Notification/src/NotificationTokens.ts +++ b/packages/components/Notification/src/NotificationTokens.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { NotificationTokens } from './Notification.types'; export const defaultNotificationTokens: TokenSettings = (t: Theme) => diff --git a/packages/components/Notification/src/__tests__/Notification.test.tsx b/packages/components/Notification/src/__tests__/Notification.test.tsx index 743e40d0cb..bbe4b66b1e 100644 --- a/packages/components/Notification/src/__tests__/Notification.test.tsx +++ b/packages/components/Notification/src/__tests__/Notification.test.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; -import { Notification } from '../Notification'; -import * as renderer from 'react-test-renderer'; + import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools'; +import * as renderer from 'react-test-renderer'; + +import { Notification } from '../Notification'; describe('Notification component tests', () => { beforeAll(() => { diff --git a/packages/components/Persona/src/Persona.settings.ts b/packages/components/Persona/src/Persona.settings.ts index fa1c596a3a..cc5de7dfe9 100644 --- a/packages/components/Persona/src/Persona.settings.ts +++ b/packages/components/Persona/src/Persona.settings.ts @@ -1,4 +1,5 @@ import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { IPersonaType } from './Persona.types'; import { personaName } from './Persona.types'; diff --git a/packages/components/Persona/src/Persona.tokens.coin.ts b/packages/components/Persona/src/Persona.tokens.coin.ts index d719176309..dcdfc3ec12 100644 --- a/packages/components/Persona/src/Persona.tokens.coin.ts +++ b/packages/components/Persona/src/Persona.tokens.coin.ts @@ -1,8 +1,9 @@ import type { IViewProps } from '@fluentui-react-native/adapters'; -import { styleFunction } from '@uifabricshared/foundation-tokens'; import type { Theme } from '@fluentui-react-native/framework'; import type { IPersonaCoinTokens } from '@fluentui-react-native/persona-coin'; import { buildRootStyles as buildPersonaCoinRootStyle } from '@fluentui-react-native/persona-coin'; +import { styleFunction } from '@uifabricshared/foundation-tokens'; + import type { IPersonaTokens } from './Persona.types'; const _coinStyleKeys: (keyof IPersonaTokens)[] = [ diff --git a/packages/components/Persona/src/Persona.tokens.root.ts b/packages/components/Persona/src/Persona.tokens.root.ts index a23a743ce6..43fbd8bdfb 100644 --- a/packages/components/Persona/src/Persona.tokens.root.ts +++ b/packages/components/Persona/src/Persona.tokens.root.ts @@ -1,8 +1,10 @@ import type { ViewStyle } from 'react-native'; -import { styleFunction } from '@uifabricshared/foundation-tokens'; -import type { IPersonaTokens } from './Persona.types'; -import type { Theme } from '@fluentui-react-native/framework'; + import type { IViewProps } from '@fluentui-react-native/adapters'; +import type { Theme } from '@fluentui-react-native/framework'; +import { styleFunction } from '@uifabricshared/foundation-tokens'; + +import type { IPersonaTokens } from './Persona.types'; const _rootKeyProps: (keyof IPersonaTokens)[] = ['coinSize', 'size']; diff --git a/packages/components/Persona/src/Persona.tokens.stack.ts b/packages/components/Persona/src/Persona.tokens.stack.ts index 3db788b3b8..f89a91ce07 100644 --- a/packages/components/Persona/src/Persona.tokens.stack.ts +++ b/packages/components/Persona/src/Persona.tokens.stack.ts @@ -1,9 +1,11 @@ import type { ViewStyle } from 'react-native'; -import { styleFunction } from '@uifabricshared/foundation-tokens'; -import type { IPersonaTokens } from './Persona.types'; -import type { Theme } from '@fluentui-react-native/framework'; -import { getHorizontalGap } from './Persona.helpers'; + import type { IViewProps } from '@fluentui-react-native/adapters'; +import type { Theme } from '@fluentui-react-native/framework'; +import { styleFunction } from '@uifabricshared/foundation-tokens'; + +import { getHorizontalGap } from './Persona.helpers'; +import type { IPersonaTokens } from './Persona.types'; const _stackKeyProps: (keyof IPersonaTokens)[] = ['size', 'horizontalGap']; diff --git a/packages/components/Persona/src/Persona.tokens.texts.ts b/packages/components/Persona/src/Persona.tokens.texts.ts index 8817529247..ca06c4bd29 100644 --- a/packages/components/Persona/src/Persona.tokens.texts.ts +++ b/packages/components/Persona/src/Persona.tokens.texts.ts @@ -1,11 +1,13 @@ import type { TextStyle } from 'react-native'; + import type { ITextProps } from '@fluentui-react-native/adapters'; -import { styleFunction } from '@uifabricshared/foundation-tokens'; -import type { IPersonaTokens } from './Persona.types'; import type { Theme } from '@fluentui-react-native/framework'; -import type { FontTokens } from '@fluentui-react-native/tokens'; import type { PersonaSize } from '@fluentui-react-native/persona-coin'; +import type { FontTokens } from '@fluentui-react-native/tokens'; +import { styleFunction } from '@uifabricshared/foundation-tokens'; + import { getTextFont, getSecondaryFont, getTertiaryFont, getOptionalFont } from './Persona.helpers'; +import type { IPersonaTokens } from './Persona.types'; function buildTextStyleHelper( verticalGap: number | undefined, diff --git a/packages/components/Persona/src/Persona.tsx b/packages/components/Persona/src/Persona.tsx index 142c2a9ca0..ede391f652 100644 --- a/packages/components/Persona/src/Persona.tsx +++ b/packages/components/Persona/src/Persona.tsx @@ -1,20 +1,22 @@ /** @jsx withSlots */ -import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; -import { compose } from '@uifabricshared/foundation-compose'; -import type { IPersonaType, IPersonaSlotProps, IPersonaProps, IPersonaRenderData } from './Persona.types'; -import { personaName } from './Persona.types'; -import { settings } from './Persona.settings'; import { View, Text } from 'react-native'; + import { filterViewProps } from '@fluentui-react-native/adapters'; import { PersonaCoin } from '@fluentui-react-native/persona-coin'; +import { foregroundColorTokens } from '@fluentui-react-native/tokens'; import type { ISlots, IRenderData } from '@uifabricshared/foundation-composable'; import { withSlots } from '@uifabricshared/foundation-composable'; +import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; +import { compose } from '@uifabricshared/foundation-compose'; import { mergeSettings } from '@uifabricshared/foundation-settings'; -import { buildRootStyle } from './Persona.tokens.root'; -import { buildTextStyle, buildTertiaryStyle, buildOptionalStyle, buildSecondaryStyle } from './Persona.tokens.texts'; + +import { settings } from './Persona.settings'; import { buildCoinStyle } from './Persona.tokens.coin'; -import { foregroundColorTokens } from '@fluentui-react-native/tokens'; +import { buildRootStyle } from './Persona.tokens.root'; import { buildStackStyle } from './Persona.tokens.stack'; +import { buildTextStyle, buildTertiaryStyle, buildOptionalStyle, buildSecondaryStyle } from './Persona.tokens.texts'; +import { personaName } from './Persona.types'; +import type { IPersonaType, IPersonaSlotProps, IPersonaProps, IPersonaRenderData } from './Persona.types'; function usePrepareForProps(props: IPersonaProps, useStyling: IUseComposeStyling): IRenderData { const { diff --git a/packages/components/Persona/src/Persona.types.ts b/packages/components/Persona/src/Persona.types.ts index e335265737..055aa0cb18 100644 --- a/packages/components/Persona/src/Persona.types.ts +++ b/packages/components/Persona/src/Persona.types.ts @@ -1,9 +1,10 @@ -import type { IPersonaCoinProps, IPersonaCoinTokens } from '@fluentui-react-native/persona-coin'; -import type { IViewProps, ITextProps } from '@fluentui-react-native/adapters'; -import type { IRenderData } from '@uifabricshared/foundation-composable'; -import type { FontTokens } from '@fluentui-react-native/tokens'; import type { ColorValue } from 'react-native'; +import type { IViewProps, ITextProps } from '@fluentui-react-native/adapters'; +import type { IPersonaCoinProps, IPersonaCoinTokens } from '@fluentui-react-native/persona-coin'; +import type { FontTokens } from '@fluentui-react-native/tokens'; +import type { IRenderData } from '@uifabricshared/foundation-composable'; + export const personaName = 'RNFPersona'; export interface IPersonaState { diff --git a/packages/components/PersonaCoin/src/PersonaCoin.helpers.ts b/packages/components/PersonaCoin/src/PersonaCoin.helpers.ts index eff247ffc0..0fa4275cb9 100644 --- a/packages/components/PersonaCoin/src/PersonaCoin.helpers.ts +++ b/packages/components/PersonaCoin/src/PersonaCoin.helpers.ts @@ -1,3 +1,7 @@ +import type { ImageURISource } from 'react-native'; + +import { globalTokens } from '@fluentui-react-native/theme-tokens'; + import type { PersonaSize, PersonaCoinColor, @@ -6,8 +10,6 @@ import type { IPersonaCoinTokens, RingThickness, } from './PersonaCoin.types'; -import type { ImageURISource } from 'react-native'; -import { globalTokens } from '@fluentui-react-native/theme-tokens'; const presenceIconCache: { [key in PersonaPresence]: ImageURISource } = { none: { uri: '' }, diff --git a/packages/components/PersonaCoin/src/PersonaCoin.settings.ts b/packages/components/PersonaCoin/src/PersonaCoin.settings.ts index 602fb1b65e..2bd7e2459b 100644 --- a/packages/components/PersonaCoin/src/PersonaCoin.settings.ts +++ b/packages/components/PersonaCoin/src/PersonaCoin.settings.ts @@ -1,7 +1,8 @@ import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + +import { convertCoinColorFluent } from './PersonaCoin.helpers'; import type { IPersonaCoinType } from './PersonaCoin.types'; import { personaCoinName } from './PersonaCoin.types'; -import { convertCoinColorFluent } from './PersonaCoin.helpers'; export const settings: IComposeSettings = [ { diff --git a/packages/components/PersonaCoin/src/PersonaCoin.tokens.icon.ts b/packages/components/PersonaCoin/src/PersonaCoin.tokens.icon.ts index 5cb81034d9..7795a4df83 100644 --- a/packages/components/PersonaCoin/src/PersonaCoin.tokens.icon.ts +++ b/packages/components/PersonaCoin/src/PersonaCoin.tokens.icon.ts @@ -1,8 +1,10 @@ -import { styleFunction } from '@uifabricshared/foundation-tokens'; import type { ImageProps } from 'react-native'; -import type { IPersonaCoinTokens } from './PersonaCoin.types'; + import type { Theme } from '@fluentui-react-native/framework'; +import { styleFunction } from '@uifabricshared/foundation-tokens'; + import { calculateEffectiveSizes } from './PersonaCoin.helpers'; +import type { IPersonaCoinTokens } from './PersonaCoin.types'; const _iconKeyProps: (keyof IPersonaCoinTokens)[] = ['iconSize', 'size', 'coinSize']; diff --git a/packages/components/PersonaCoin/src/PersonaCoin.tokens.initials.ts b/packages/components/PersonaCoin/src/PersonaCoin.tokens.initials.ts index 41f2f679e0..e219fd4c3b 100644 --- a/packages/components/PersonaCoin/src/PersonaCoin.tokens.initials.ts +++ b/packages/components/PersonaCoin/src/PersonaCoin.tokens.initials.ts @@ -1,8 +1,10 @@ -import { styleFunction } from '@uifabricshared/foundation-tokens'; import type { TextProps } from 'react-native'; -import type { IPersonaCoinTokens } from './PersonaCoin.types'; + import type { Theme } from '@fluentui-react-native/framework'; +import { styleFunction } from '@uifabricshared/foundation-tokens'; + import { calculateEffectiveSizes } from './PersonaCoin.helpers'; +import type { IPersonaCoinTokens } from './PersonaCoin.types'; const _initialsKeyProps: (keyof IPersonaCoinTokens)[] = ['coinSize', 'initialsSize', 'size']; diff --git a/packages/components/PersonaCoin/src/PersonaCoin.tokens.initialsBackground.ts b/packages/components/PersonaCoin/src/PersonaCoin.tokens.initialsBackground.ts index 4445f72665..f1c3d02307 100644 --- a/packages/components/PersonaCoin/src/PersonaCoin.tokens.initialsBackground.ts +++ b/packages/components/PersonaCoin/src/PersonaCoin.tokens.initialsBackground.ts @@ -1,8 +1,10 @@ -import { styleFunction } from '@uifabricshared/foundation-tokens'; import type { ViewProps } from 'react-native'; -import type { IPersonaCoinTokens } from './PersonaCoin.types'; + import type { Theme } from '@fluentui-react-native/framework'; +import { styleFunction } from '@uifabricshared/foundation-tokens'; + import { convertCoinColor, convertCoinColorFluent, calculateEffectiveSizes } from './PersonaCoin.helpers'; +import type { IPersonaCoinTokens } from './PersonaCoin.types'; const _initialsBackgroundKeyProps: (keyof IPersonaCoinTokens)[] = ['coinSize', 'size', 'coinColor', 'coinColorFluent', 'backgroundColor']; diff --git a/packages/components/PersonaCoin/src/PersonaCoin.tokens.photo.ts b/packages/components/PersonaCoin/src/PersonaCoin.tokens.photo.ts index 0de7175c6d..f5cdc5a827 100644 --- a/packages/components/PersonaCoin/src/PersonaCoin.tokens.photo.ts +++ b/packages/components/PersonaCoin/src/PersonaCoin.tokens.photo.ts @@ -1,8 +1,10 @@ -import { styleFunction } from '@uifabricshared/foundation-tokens'; import type { ImageProps } from 'react-native'; -import type { IPersonaCoinTokens } from './PersonaCoin.types'; + import type { Theme } from '@fluentui-react-native/framework'; +import { styleFunction } from '@uifabricshared/foundation-tokens'; + import { calculateEffectiveSizes } from './PersonaCoin.helpers'; +import type { IPersonaCoinTokens } from './PersonaCoin.types'; const _photoKeyProps: (keyof IPersonaCoinTokens)[] = ['coinSize', 'size']; diff --git a/packages/components/PersonaCoin/src/PersonaCoin.tokens.ring.ts b/packages/components/PersonaCoin/src/PersonaCoin.tokens.ring.ts index 1daf829f99..829b9e9684 100644 --- a/packages/components/PersonaCoin/src/PersonaCoin.tokens.ring.ts +++ b/packages/components/PersonaCoin/src/PersonaCoin.tokens.ring.ts @@ -1,8 +1,10 @@ -import { styleFunction } from '@uifabricshared/foundation-tokens'; import type { ViewProps } from 'react-native'; -import type { IPersonaCoinTokens } from './PersonaCoin.types'; + import type { Theme } from '@fluentui-react-native/framework'; +import { styleFunction } from '@uifabricshared/foundation-tokens'; + import { getRingThickness, calculateEffectiveSizes } from './PersonaCoin.helpers'; +import type { IPersonaCoinTokens } from './PersonaCoin.types'; const _ringProps: (keyof IPersonaCoinTokens)[] = ['coinSize', 'size', 'ring']; diff --git a/packages/components/PersonaCoin/src/PersonaCoin.tokens.root.ts b/packages/components/PersonaCoin/src/PersonaCoin.tokens.root.ts index 72e786649b..6619eb24bf 100644 --- a/packages/components/PersonaCoin/src/PersonaCoin.tokens.root.ts +++ b/packages/components/PersonaCoin/src/PersonaCoin.tokens.root.ts @@ -1,9 +1,11 @@ -import type { IPersonaCoinTokens } from './PersonaCoin.types'; import type { ViewStyle } from 'react-native'; -import { calculateEffectiveSizes } from './PersonaCoin.helpers'; -import { styleFunction } from '@uifabricshared/foundation-tokens'; -import type { Theme } from '@fluentui-react-native/framework'; + import type { IViewProps } from '@fluentui-react-native/adapters'; +import type { Theme } from '@fluentui-react-native/framework'; +import { styleFunction } from '@uifabricshared/foundation-tokens'; + +import { calculateEffectiveSizes } from './PersonaCoin.helpers'; +import type { IPersonaCoinTokens } from './PersonaCoin.types'; const nameMap: { [key: string]: string } = { start: 'flex-start', diff --git a/packages/components/PersonaCoin/src/PersonaCoin.tsx b/packages/components/PersonaCoin/src/PersonaCoin.tsx index c083b2d397..fe2611f7ec 100644 --- a/packages/components/PersonaCoin/src/PersonaCoin.tsx +++ b/packages/components/PersonaCoin/src/PersonaCoin.tsx @@ -1,5 +1,23 @@ /** @jsx withSlots */ import { Image, View, Text } from 'react-native'; + +import { filterViewProps, filterImageProps } from '@fluentui-react-native/adapters'; +import { foregroundColorTokens } from '@fluentui-react-native/tokens'; +import type { ISlots, IRenderData } from '@uifabricshared/foundation-composable'; +import { withSlots } from '@uifabricshared/foundation-composable'; +import { compose } from '@uifabricshared/foundation-compose'; +import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; +import { mergeSettings } from '@uifabricshared/foundation-settings'; + +import { getPresenceIconSource } from './PersonaCoin.helpers'; +import { settings } from './PersonaCoin.settings'; +import { buildIconStyles } from './PersonaCoin.tokens.icon'; +import { buildInitialsStyles } from './PersonaCoin.tokens.initials'; +import { buildInitialsBackgroundStyles } from './PersonaCoin.tokens.initialsBackground'; +import { buildPhotoStyles } from './PersonaCoin.tokens.photo'; +import { buildGlowStyles, buildRingStyles } from './PersonaCoin.tokens.ring'; +import { buildRootStyles } from './PersonaCoin.tokens.root'; +import { personaCoinName } from './PersonaCoin.types'; import type { IPersonaCoinProps, IPersonaCoinType, @@ -7,22 +25,6 @@ import type { IPersonaCoinRenderData, IPersonaCoinState, } from './PersonaCoin.types'; -import { personaCoinName } from './PersonaCoin.types'; -import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; -import { compose } from '@uifabricshared/foundation-compose'; -import { filterViewProps, filterImageProps } from '@fluentui-react-native/adapters'; -import { settings } from './PersonaCoin.settings'; -import type { ISlots, IRenderData } from '@uifabricshared/foundation-composable'; -import { withSlots } from '@uifabricshared/foundation-composable'; -import { mergeSettings } from '@uifabricshared/foundation-settings'; -import { getPresenceIconSource } from './PersonaCoin.helpers'; -import { foregroundColorTokens } from '@fluentui-react-native/tokens'; -import { buildRootStyles } from './PersonaCoin.tokens.root'; -import { buildInitialsStyles } from './PersonaCoin.tokens.initials'; -import { buildInitialsBackgroundStyles } from './PersonaCoin.tokens.initialsBackground'; -import { buildPhotoStyles } from './PersonaCoin.tokens.photo'; -import { buildIconStyles } from './PersonaCoin.tokens.icon'; -import { buildGlowStyles, buildRingStyles } from './PersonaCoin.tokens.ring'; function usePrepareForProps( props: IPersonaCoinProps, diff --git a/packages/components/PersonaCoin/src/PersonaCoin.types.ts b/packages/components/PersonaCoin/src/PersonaCoin.types.ts index 1828b25556..3a10861a66 100644 --- a/packages/components/PersonaCoin/src/PersonaCoin.types.ts +++ b/packages/components/PersonaCoin/src/PersonaCoin.types.ts @@ -1,5 +1,6 @@ -import type { IViewProps } from '@fluentui-react-native/adapters'; import type { ImageProps, ViewProps, ImageURISource, TextProps, ColorValue } from 'react-native'; + +import type { IViewProps } from '@fluentui-react-native/adapters'; import type { IBackgroundColorTokens, IForegroundColorTokens } from '@fluentui-react-native/tokens'; import type { IRenderData } from '@uifabricshared/foundation-composable'; diff --git a/packages/components/Pressable/src/Pressable.props.ts b/packages/components/Pressable/src/Pressable.props.ts index 337f9a06e7..e01a1b4e43 100644 --- a/packages/components/Pressable/src/Pressable.props.ts +++ b/packages/components/Pressable/src/Pressable.props.ts @@ -1,5 +1,6 @@ import type * as React from 'react'; import type { ViewStyle, StyleProp } from 'react-native'; + import type { IViewProps } from '@fluentui-react-native/adapters'; import type { IWithPressableOptions, IPressableState } from '@fluentui-react-native/interactive-hooks'; diff --git a/packages/components/Pressable/src/Pressable.tsx b/packages/components/Pressable/src/Pressable.tsx index 5a046e8321..76e4cedb21 100644 --- a/packages/components/Pressable/src/Pressable.tsx +++ b/packages/components/Pressable/src/Pressable.tsx @@ -10,12 +10,14 @@ */ 'use strict'; +import { View } from 'react-native'; + +import { useAsPressable } from '@fluentui-react-native/interactive-hooks'; import type { IUseStyling } from '@uifabricshared/foundation-composable'; import { composable } from '@uifabricshared/foundation-composable'; -import { View } from 'react-native'; -import type { IPressableProps, IPressableType } from './Pressable.props'; import { mergeSettings } from '@uifabricshared/foundation-settings'; -import { useAsPressable } from '@fluentui-react-native/interactive-hooks'; + +import type { IPressableProps, IPressableType } from './Pressable.props'; export const Pressable = composable({ slots: { root: View }, diff --git a/packages/components/RadioGroup/src/RadioButton.macos.tsx b/packages/components/RadioGroup/src/RadioButton.macos.tsx index 6d98e73a18..d0bd81c6d2 100644 --- a/packages/components/RadioGroup/src/RadioButton.macos.tsx +++ b/packages/components/RadioGroup/src/RadioButton.macos.tsx @@ -1,14 +1,16 @@ /** @jsx withSlots */ import * as React from 'react'; -import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; -import { compose } from '@uifabricshared/foundation-compose'; -import { mergeSettings } from '@uifabricshared/foundation-settings'; + import { ensureNativeComponent } from '@fluentui-react-native/component-cache'; import type { ISlots } from '@uifabricshared/foundation-composable'; import { withSlots } from '@uifabricshared/foundation-composable'; -import { RadioGroupContext } from './RadioGroup'; +import { compose } from '@uifabricshared/foundation-compose'; +import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; +import { mergeSettings } from '@uifabricshared/foundation-settings'; + import type { IRadioButtonProps, IRadioButtonSlotProps, IRadioButtonType } from './RadioButton.types'; import { radioButtonName } from './RadioButton.types'; +import { RadioGroupContext } from './RadioGroup'; const NativeRadioButtonView = ensureNativeComponent('FRNRadioButtonView'); diff --git a/packages/components/RadioGroup/src/RadioButton.settings.ts b/packages/components/RadioGroup/src/RadioButton.settings.ts index 0353411d5f..7d90d95dc8 100644 --- a/packages/components/RadioGroup/src/RadioButton.settings.ts +++ b/packages/components/RadioGroup/src/RadioButton.settings.ts @@ -1,6 +1,7 @@ +import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { IRadioButtonType } from './RadioButton.types'; import { radioButtonName } from './RadioButton.types'; -import type { IComposeSettings } from '@uifabricshared/foundation-compose'; const radioButtonSize = 20; const radioButtonRadius = radioButtonSize / 2; diff --git a/packages/components/RadioGroup/src/RadioButton.test.tsx b/packages/components/RadioGroup/src/RadioButton.test.tsx index 40fc07d4a3..b148be33ca 100644 --- a/packages/components/RadioGroup/src/RadioButton.test.tsx +++ b/packages/components/RadioGroup/src/RadioButton.test.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; -import { RadioButton } from './RadioButton'; + import * as renderer from 'react-test-renderer'; +import { RadioButton } from './RadioButton'; + describe('RadioButton component tests', () => { it('RadioButton default', () => { const tree = renderer.create().toJSON(); diff --git a/packages/components/RadioGroup/src/RadioButton.tsx b/packages/components/RadioGroup/src/RadioButton.tsx index e4e9c25e80..e43e7cf00e 100644 --- a/packages/components/RadioGroup/src/RadioButton.tsx +++ b/packages/components/RadioGroup/src/RadioButton.tsx @@ -2,18 +2,20 @@ 'use strict'; import * as React from 'react'; import { View } from 'react-native'; -import { Text } from '@fluentui-react-native/text'; -import type { IRadioButtonType, IRadioButtonProps, IRadioButtonSlotProps, IRadioButtonRenderData } from './RadioButton.types'; -import { radioButtonName } from './RadioButton.types'; -import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; -import { compose } from '@uifabricshared/foundation-compose'; + import { filterViewProps } from '@fluentui-react-native/adapters'; +import { useAsPressable, useOnPressWithFocus, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; +import { Text } from '@fluentui-react-native/text'; +import { foregroundColorTokens, textTokens, borderTokens, backgroundColorTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens'; import type { ISlots } from '@uifabricshared/foundation-composable'; import { withSlots } from '@uifabricshared/foundation-composable'; -import { settings, radioButtonSelectActionLabel } from './RadioButton.settings'; +import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; +import { compose } from '@uifabricshared/foundation-compose'; import { mergeSettings } from '@uifabricshared/foundation-settings'; -import { foregroundColorTokens, textTokens, borderTokens, backgroundColorTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens'; -import { useAsPressable, useOnPressWithFocus, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; + +import { settings, radioButtonSelectActionLabel } from './RadioButton.settings'; +import type { IRadioButtonType, IRadioButtonProps, IRadioButtonSlotProps, IRadioButtonRenderData } from './RadioButton.types'; +import { radioButtonName } from './RadioButton.types'; import { RadioGroupContext } from './RadioGroup'; export const RadioButton = compose({ diff --git a/packages/components/RadioGroup/src/RadioButton.types.ts b/packages/components/RadioGroup/src/RadioButton.types.ts index 426e329462..3fa0bac013 100644 --- a/packages/components/RadioGroup/src/RadioButton.types.ts +++ b/packages/components/RadioGroup/src/RadioButton.types.ts @@ -1,11 +1,12 @@ import type * as React from 'react'; import type { ViewProps } from 'react-native'; -import type { IRenderData } from '@uifabricshared/foundation-composable'; -import type { ITextProps } from '@fluentui-react-native/text'; + import type { IFocusable } from '@fluentui-react-native/interactive-hooks'; -import type { IViewWin32Props } from '@office-iss/react-native-win32'; -import type { FontTokens, IForegroundColorTokens, IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens'; import type { IPressableProps } from '@fluentui-react-native/pressable'; +import type { ITextProps } from '@fluentui-react-native/text'; +import type { FontTokens, IForegroundColorTokens, IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens'; +import type { IViewWin32Props } from '@office-iss/react-native-win32'; +import type { IRenderData } from '@uifabricshared/foundation-composable'; export const radioButtonName = 'RadioButton'; diff --git a/packages/components/RadioGroup/src/RadioButtonGroup.test.tsx b/packages/components/RadioGroup/src/RadioButtonGroup.test.tsx index db6960ecba..3d05f58bec 100644 --- a/packages/components/RadioGroup/src/RadioButtonGroup.test.tsx +++ b/packages/components/RadioGroup/src/RadioButtonGroup.test.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; import { View } from 'react-native'; -import { RadioGroup, RadioButton } from '.'; + import * as renderer from 'react-test-renderer'; +import { RadioGroup, RadioButton } from '.'; + describe('RadioButton component tests', () => { it('RadioButton default', () => { const tree = renderer.create( diff --git a/packages/components/RadioGroup/src/RadioGroup.settings.ts b/packages/components/RadioGroup/src/RadioGroup.settings.ts index f8a0147d57..c936c9085d 100644 --- a/packages/components/RadioGroup/src/RadioGroup.settings.ts +++ b/packages/components/RadioGroup/src/RadioGroup.settings.ts @@ -1,4 +1,5 @@ import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { IRadioGroupType } from './RadioGroup.types'; import { radioGroupName } from './RadioGroup.types'; diff --git a/packages/components/RadioGroup/src/RadioGroup.tsx b/packages/components/RadioGroup/src/RadioGroup.tsx index 21ad8b8c69..266d7facf7 100644 --- a/packages/components/RadioGroup/src/RadioGroup.tsx +++ b/packages/components/RadioGroup/src/RadioGroup.tsx @@ -1,8 +1,18 @@ /** @jsx withSlots */ import * as React from 'react'; import { View } from 'react-native'; -import { Text } from '@fluentui-react-native/text'; + import { FocusZone } from '@fluentui-react-native/focus-zone'; +import { useSelectedKey } from '@fluentui-react-native/interactive-hooks'; +import { Text } from '@fluentui-react-native/text'; +import { foregroundColorTokens, textTokens } from '@fluentui-react-native/tokens'; +import type { ISlots } from '@uifabricshared/foundation-composable'; +import { withSlots } from '@uifabricshared/foundation-composable'; +import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; +import { compose } from '@uifabricshared/foundation-compose'; +import { mergeSettings } from '@uifabricshared/foundation-settings'; + +import { settings } from './RadioGroup.settings'; import type { IRadioGroupType, IRadioGroupProps, @@ -12,14 +22,6 @@ import type { IRadioGroupContext, } from './RadioGroup.types'; import { radioGroupName } from './RadioGroup.types'; -import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; -import { compose } from '@uifabricshared/foundation-compose'; -import type { ISlots } from '@uifabricshared/foundation-composable'; -import { withSlots } from '@uifabricshared/foundation-composable'; -import { settings } from './RadioGroup.settings'; -import { mergeSettings } from '@uifabricshared/foundation-settings'; -import { foregroundColorTokens, textTokens } from '@fluentui-react-native/tokens'; -import { useSelectedKey } from '@fluentui-react-native/interactive-hooks'; export const RadioGroupContext = React.createContext({ selectedKey: null, diff --git a/packages/components/RadioGroup/src/RadioGroup.types.ts b/packages/components/RadioGroup/src/RadioGroup.types.ts index 4046bbd24d..827b8a37fe 100644 --- a/packages/components/RadioGroup/src/RadioGroup.types.ts +++ b/packages/components/RadioGroup/src/RadioGroup.types.ts @@ -1,9 +1,10 @@ import type * as React from 'react'; + +import type { FocusZoneProps } from '@fluentui-react-native/focus-zone'; import type { ITextProps } from '@fluentui-react-native/text'; +import type { IForegroundColorTokens, FontTokens } from '@fluentui-react-native/tokens'; import type { IViewWin32Props } from '@office-iss/react-native-win32'; import type { IRenderData } from '@uifabricshared/foundation-composable'; -import type { IForegroundColorTokens, FontTokens } from '@fluentui-react-native/tokens'; -import type { FocusZoneProps } from '@fluentui-react-native/focus-zone'; export const radioGroupName = 'RadioGroup'; diff --git a/packages/components/Separator/src/Separator.styling.tsx b/packages/components/Separator/src/Separator.styling.tsx index e83028872e..20fa409230 100644 --- a/packages/components/Separator/src/Separator.styling.tsx +++ b/packages/components/Separator/src/Separator.styling.tsx @@ -1,9 +1,11 @@ -import type { SeparatorProps, SeparatorPropTokens, SeparatorTokens, SeperatorSlotProps } from './Separator.types'; -import { separatorName } from './Separator.types'; +import { Platform } from 'react-native'; + import type { UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; + +import type { SeparatorProps, SeparatorPropTokens, SeparatorTokens, SeperatorSlotProps } from './Separator.types'; +import { separatorName } from './Separator.types'; import { defaultSeparatorTokens } from './SeparatorTokens'; -import { Platform } from 'react-native'; const isMobile = Platform.OS === 'android' || Platform.OS === 'ios'; const tokensThatAreAlsoProps: (keyof SeparatorPropTokens)[] = ['vertical', 'insetSpacing']; diff --git a/packages/components/Separator/src/Separator.tsx b/packages/components/Separator/src/Separator.tsx index ea48b6393d..9edb2a7d4c 100644 --- a/packages/components/Separator/src/Separator.tsx +++ b/packages/components/Separator/src/Separator.tsx @@ -1,10 +1,12 @@ /** @jsx withSlots */ import { View } from 'react-native'; -import type { SeparatorProps, SeparatorType } from './Separator.types'; -import { separatorName } from './Separator.types'; + import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, withSlots, mergeProps } from '@fluentui-react-native/framework'; + import { stylingSettings } from './Separator.styling'; +import type { SeparatorProps, SeparatorType } from './Separator.types'; +import { separatorName } from './Separator.types'; const propMask = { vertical: undefined }; diff --git a/packages/components/Separator/src/SeparatorTokens.android.tsx b/packages/components/Separator/src/SeparatorTokens.android.tsx index 4266e1a3a4..b0424466ce 100644 --- a/packages/components/Separator/src/SeparatorTokens.android.tsx +++ b/packages/components/Separator/src/SeparatorTokens.android.tsx @@ -1,6 +1,7 @@ import type { Theme } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { SeparatorTokens } from './Separator.types'; export const defaultSeparatorTokens: TokenSettings = (t: Theme) => diff --git a/packages/components/Separator/src/SeparatorTokens.tsx b/packages/components/Separator/src/SeparatorTokens.tsx index eb4e3157de..28d909bbec 100644 --- a/packages/components/Separator/src/SeparatorTokens.tsx +++ b/packages/components/Separator/src/SeparatorTokens.tsx @@ -1,7 +1,8 @@ import type { Theme } from '@fluentui-react-native/framework'; -import type { TokenSettings } from '@fluentui-react-native/use-styling'; -import type { SeparatorTokens } from './Separator.types'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import type { TokenSettings } from '@fluentui-react-native/use-styling'; + +import type { SeparatorTokens } from './Separator.types'; export const defaultSeparatorTokens: TokenSettings = () => ({ diff --git a/packages/components/Separator/src/__tests__/Separator.test.tsx b/packages/components/Separator/src/__tests__/Separator.test.tsx index aa96f9ac3e..66b11a12ed 100644 --- a/packages/components/Separator/src/__tests__/Separator.test.tsx +++ b/packages/components/Separator/src/__tests__/Separator.test.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; -import { Separator } from '..'; + import * as renderer from 'react-test-renderer'; +import { Separator } from '..'; + it('Separator default', () => { const tree = renderer.create().toJSON(); expect(tree).toMatchSnapshot(); diff --git a/packages/components/Stack/src/Stack.settings.ts b/packages/components/Stack/src/Stack.settings.ts index 5154ff5645..38e995cffd 100644 --- a/packages/components/Stack/src/Stack.settings.ts +++ b/packages/components/Stack/src/Stack.settings.ts @@ -1,6 +1,7 @@ +import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { IStackType } from './Stack.types'; import { stackName } from './Stack.types'; -import type { IComposeSettings } from '@uifabricshared/foundation-compose'; export const settings: IComposeSettings = [ { diff --git a/packages/components/Stack/src/Stack.tokens.ts b/packages/components/Stack/src/Stack.tokens.ts index 80da3ad78a..9f062809c4 100644 --- a/packages/components/Stack/src/Stack.tokens.ts +++ b/packages/components/Stack/src/Stack.tokens.ts @@ -1,9 +1,11 @@ -import type { Alignment, IStackTokens } from './Stack.types'; -import { parseGap, parsePadding } from './StackUtils'; import type { ViewStyle, ViewProps } from 'react-native'; + import type { Theme } from '@fluentui-react-native/framework'; import { styleFunction } from '@uifabricshared/foundation-tokens'; +import type { Alignment, IStackTokens } from './Stack.types'; +import { parseGap, parsePadding } from './StackUtils'; + const nameMap: { [key: string]: Alignment } = { start: 'flex-start', end: 'flex-end', diff --git a/packages/components/Stack/src/Stack.tsx b/packages/components/Stack/src/Stack.tsx index b150d1e347..6470d807c8 100644 --- a/packages/components/Stack/src/Stack.tsx +++ b/packages/components/Stack/src/Stack.tsx @@ -1,19 +1,21 @@ /** @jsx withSlots */ import * as React from 'react'; -import StackItem from './StackItem/StackItem'; -import type { IStackRenderData, IStackProps, IStackSlotProps, IStackType } from './Stack.types'; -import { stackName } from './Stack.types'; import { View } from 'react-native'; +import type { StyleProp, ViewStyle } from 'react-native'; + import { filterViewProps } from '@fluentui-react-native/adapters'; -import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; -import { compose } from '@uifabricshared/foundation-compose'; +import { backgroundColorTokens, borderTokens } from '@fluentui-react-native/tokens'; import type { ISlots } from '@uifabricshared/foundation-composable'; import { withSlots } from '@uifabricshared/foundation-composable'; +import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; +import { compose } from '@uifabricshared/foundation-compose'; import { mergeSettings } from '@uifabricshared/foundation-settings'; + import { settings } from './Stack.settings'; -import { backgroundColorTokens, borderTokens } from '@fluentui-react-native/tokens'; import { buildStackRootStyles, buildStackInnerStyles } from './Stack.tokens'; -import type { StyleProp, ViewStyle } from 'react-native'; +import { stackName } from './Stack.types'; +import type { IStackRenderData, IStackProps, IStackSlotProps, IStackType } from './Stack.types'; +import StackItem from './StackItem/StackItem'; // Needed for TS to understand that __jsiExecutorDescription exists. declare global { diff --git a/packages/components/Stack/src/Stack.types.ts b/packages/components/Stack/src/Stack.types.ts index 23e0fdb829..96a153aad8 100644 --- a/packages/components/Stack/src/Stack.types.ts +++ b/packages/components/Stack/src/Stack.types.ts @@ -1,7 +1,9 @@ -import type { IStackItemProps } from './StackItem/StackItem.types'; import type { ViewStyle, ViewProps } from 'react-native'; -import type { IRenderData } from '@uifabricshared/foundation-composable'; + import type { IBackgroundColorTokens, IBorderTokens, FontTokens } from '@fluentui-react-native/tokens'; +import type { IRenderData } from '@uifabricshared/foundation-composable'; + +import type { IStackItemProps } from './StackItem/StackItem.types'; export const stackName = 'RNFStack'; diff --git a/packages/components/Stack/src/StackItem/StackItem.settings.ts b/packages/components/Stack/src/StackItem/StackItem.settings.ts index b8116135ec..b437c30a2e 100644 --- a/packages/components/Stack/src/StackItem/StackItem.settings.ts +++ b/packages/components/Stack/src/StackItem/StackItem.settings.ts @@ -1,4 +1,5 @@ import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { IStackItemType } from './StackItem.types'; import { stackItemName } from './StackItem.types'; diff --git a/packages/components/Stack/src/StackItem/StackItem.tokens.ts b/packages/components/Stack/src/StackItem/StackItem.tokens.ts index d7e553e1c1..f2d9ee97b2 100644 --- a/packages/components/Stack/src/StackItem/StackItem.tokens.ts +++ b/packages/components/Stack/src/StackItem/StackItem.tokens.ts @@ -1,8 +1,10 @@ -import type { IStackItemTokens } from './StackItem.types'; -import { styleFunction } from '@uifabricshared/foundation-tokens'; -import type { Theme } from '@fluentui-react-native/framework'; import type { ViewStyle, ViewProps } from 'react-native'; +import type { Theme } from '@fluentui-react-native/framework'; +import { styleFunction } from '@uifabricshared/foundation-tokens'; + +import type { IStackItemTokens } from './StackItem.types'; + const alignMap: { [key: string]: ViewStyle['alignSelf'] } = { start: 'flex-start', end: 'flex-end', diff --git a/packages/components/Stack/src/StackItem/StackItem.tsx b/packages/components/Stack/src/StackItem/StackItem.tsx index 3a5b618606..b44b3aa28a 100644 --- a/packages/components/Stack/src/StackItem/StackItem.tsx +++ b/packages/components/Stack/src/StackItem/StackItem.tsx @@ -1,11 +1,13 @@ import type * as React from 'react'; -import type { IStackItemProps, IStackItemType } from './StackItem.types'; -import { stackItemName } from './StackItem.types'; -import { compose } from '@uifabricshared/foundation-compose'; import { View } from 'react-native'; + import { filterViewProps } from '@fluentui-react-native/adapters'; +import { compose } from '@uifabricshared/foundation-compose'; + import { settings } from './StackItem.settings'; import { stackItemTokenProcessor } from './StackItem.tokens'; +import { stackItemName } from './StackItem.types'; +import type { IStackItemProps, IStackItemType } from './StackItem.types'; export const StackItem: React.FunctionComponent = compose({ displayName: stackItemName, diff --git a/packages/components/Stack/src/StackUtils.test.win32.ts b/packages/components/Stack/src/StackUtils.test.win32.ts index c6356888e1..8639171646 100644 --- a/packages/components/Stack/src/StackUtils.test.win32.ts +++ b/packages/components/Stack/src/StackUtils.test.win32.ts @@ -1,6 +1,7 @@ -import { parseGap, parsePadding } from './StackUtils'; import type { Theme } from '@fluentui-react-native/framework'; +import { parseGap, parsePadding } from './StackUtils'; + describe('StackUtils', () => { describe('parseGap', () => { const theme = { diff --git a/packages/components/Stack/src/__tests__/Stack.test.tsx b/packages/components/Stack/src/__tests__/Stack.test.tsx index 1525ab5e2a..43739a340c 100644 --- a/packages/components/Stack/src/__tests__/Stack.test.tsx +++ b/packages/components/Stack/src/__tests__/Stack.test.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; -import { Stack } from '..'; + import { Text } from '@fluentui-react-native/text'; import * as renderer from 'react-test-renderer'; +import { Stack } from '..'; + it('Stack with tokens', () => { const tree = renderer .create( diff --git a/packages/components/Tabs/src/Tabs.settings.macos.ts b/packages/components/Tabs/src/Tabs.settings.macos.ts index 8e645d9d6f..d5b607e4aa 100644 --- a/packages/components/Tabs/src/Tabs.settings.macos.ts +++ b/packages/components/Tabs/src/Tabs.settings.macos.ts @@ -4,6 +4,7 @@ meant to be placeholders until new designs are developed */ import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { TabsType } from './Tabs.types'; import { tabsName } from './Tabs.types'; diff --git a/packages/components/Tabs/src/Tabs.settings.ts b/packages/components/Tabs/src/Tabs.settings.ts index ce84f9bb81..a917d5fd66 100644 --- a/packages/components/Tabs/src/Tabs.settings.ts +++ b/packages/components/Tabs/src/Tabs.settings.ts @@ -1,4 +1,5 @@ import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { TabsType } from './Tabs.types'; import { tabsName } from './Tabs.types'; diff --git a/packages/components/Tabs/src/Tabs.settings.windows.ts b/packages/components/Tabs/src/Tabs.settings.windows.ts index a29edcc925..348a493c15 100644 --- a/packages/components/Tabs/src/Tabs.settings.windows.ts +++ b/packages/components/Tabs/src/Tabs.settings.windows.ts @@ -1,4 +1,5 @@ import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { TabsType } from './Tabs.types'; import { tabsName } from './Tabs.types'; diff --git a/packages/components/Tabs/src/Tabs.tsx b/packages/components/Tabs/src/Tabs.tsx index 082033093b..16f998ee65 100644 --- a/packages/components/Tabs/src/Tabs.tsx +++ b/packages/components/Tabs/src/Tabs.tsx @@ -1,19 +1,21 @@ /** @jsx withSlots */ import * as React from 'react'; import { Pressable, View } from 'react-native'; -import { Text } from '@fluentui-react-native/text'; + +import { filterViewProps } from '@fluentui-react-native/adapters'; import { FocusZone } from '@fluentui-react-native/focus-zone'; -import type { TabsType, TabsProps, TabsState, TabsSlotProps, TabsRenderData, TabsContextData } from './Tabs.types'; -import { tabsName } from './Tabs.types'; -import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; -import { compose } from '@uifabricshared/foundation-compose'; +import { useSelectedKey } from '@fluentui-react-native/interactive-hooks'; +import { Text } from '@fluentui-react-native/text'; +import { foregroundColorTokens, textTokens, backgroundColorTokens } from '@fluentui-react-native/tokens'; import type { ISlots } from '@uifabricshared/foundation-composable'; import { withSlots } from '@uifabricshared/foundation-composable'; -import { settings } from './Tabs.settings'; +import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; +import { compose } from '@uifabricshared/foundation-compose'; import { mergeSettings } from '@uifabricshared/foundation-settings'; -import { filterViewProps } from '@fluentui-react-native/adapters'; -import { foregroundColorTokens, textTokens, backgroundColorTokens } from '@fluentui-react-native/tokens'; -import { useSelectedKey } from '@fluentui-react-native/interactive-hooks'; + +import { settings } from './Tabs.settings'; +import type { TabsType, TabsProps, TabsState, TabsSlotProps, TabsRenderData, TabsContextData } from './Tabs.types'; +import { tabsName } from './Tabs.types'; export const TabsContext = React.createContext({ selectedKey: null, diff --git a/packages/components/Tabs/src/Tabs.types.ts b/packages/components/Tabs/src/Tabs.types.ts index 3cf3a72a04..53c189e6f7 100644 --- a/packages/components/Tabs/src/Tabs.types.ts +++ b/packages/components/Tabs/src/Tabs.types.ts @@ -1,10 +1,11 @@ import type * as React from 'react'; -import type { ITextProps } from '@fluentui-react-native/text'; -import type { IRenderData } from '@uifabricshared/foundation-composable'; -import type { IForegroundColorTokens, FontTokens, IBackgroundColorTokens } from '@fluentui-react-native/tokens'; -import type { FocusZoneProps } from '@fluentui-react-native/focus-zone'; import type { View, ViewProps } from 'react-native'; + +import type { FocusZoneProps } from '@fluentui-react-native/focus-zone'; import type { PressablePropsExtended } from '@fluentui-react-native/interactive-hooks'; +import type { ITextProps } from '@fluentui-react-native/text'; +import type { IForegroundColorTokens, FontTokens, IBackgroundColorTokens } from '@fluentui-react-native/tokens'; +import type { IRenderData } from '@uifabricshared/foundation-composable'; export const tabsName = 'Tabs'; diff --git a/packages/components/Tabs/src/Tabs.windows.tsx b/packages/components/Tabs/src/Tabs.windows.tsx index 2b91fbb2c9..21e8640320 100644 --- a/packages/components/Tabs/src/Tabs.windows.tsx +++ b/packages/components/Tabs/src/Tabs.windows.tsx @@ -1,18 +1,20 @@ /** @jsx withSlots */ import * as React from 'react'; import { Pressable, View } from 'react-native'; + +import { filterViewProps } from '@fluentui-react-native/adapters'; +import { useSelectedKey, usePressableState } from '@fluentui-react-native/interactive-hooks'; import { Text } from '@fluentui-react-native/text'; -import type { TabsType, TabsProps, TabsState, TabsSlotProps, TabsRenderData, TabsContextData } from './Tabs.types'; -import { tabsName } from './Tabs.types'; -import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; -import { compose } from '@uifabricshared/foundation-compose'; +import { foregroundColorTokens, textTokens, backgroundColorTokens } from '@fluentui-react-native/tokens'; import type { ISlots } from '@uifabricshared/foundation-composable'; import { withSlots } from '@uifabricshared/foundation-composable'; -import { settings } from './Tabs.settings'; +import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; +import { compose } from '@uifabricshared/foundation-compose'; import { mergeSettings } from '@uifabricshared/foundation-settings'; -import { filterViewProps } from '@fluentui-react-native/adapters'; -import { foregroundColorTokens, textTokens, backgroundColorTokens } from '@fluentui-react-native/tokens'; -import { useSelectedKey, usePressableState } from '@fluentui-react-native/interactive-hooks'; + +import { settings } from './Tabs.settings'; +import type { TabsType, TabsProps, TabsState, TabsSlotProps, TabsRenderData, TabsContextData } from './Tabs.types'; +import { tabsName } from './Tabs.types'; export const TabsContext = React.createContext({ selectedKey: null, diff --git a/packages/components/Tabs/src/TabsItem.settings.macos.ts b/packages/components/Tabs/src/TabsItem.settings.macos.ts index 1557bf35d3..dbc30c4b2a 100644 --- a/packages/components/Tabs/src/TabsItem.settings.macos.ts +++ b/packages/components/Tabs/src/TabsItem.settings.macos.ts @@ -3,10 +3,11 @@ Disclaimer: these styles do not follow a specific figma design, but are meant to be placeholders until new designs are developed */ +import type { IViewProps } from '@fluentui-react-native/adapters'; +import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { TabsItemType } from './TabsItem.types'; import { tabsItemName } from './TabsItem.types'; -import type { IComposeSettings } from '@uifabricshared/foundation-compose'; -import type { IViewProps } from '@fluentui-react-native/adapters'; export const tabsItemSelectActionLabel = 'Select a TabsItem'; diff --git a/packages/components/Tabs/src/TabsItem.settings.ts b/packages/components/Tabs/src/TabsItem.settings.ts index 1fd74f7c0e..1b375d3510 100644 --- a/packages/components/Tabs/src/TabsItem.settings.ts +++ b/packages/components/Tabs/src/TabsItem.settings.ts @@ -1,7 +1,8 @@ +import type { PressablePropsExtended } from '@fluentui-react-native/interactive-hooks'; +import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { TabsItemType } from './TabsItem.types'; import { tabsItemName } from './TabsItem.types'; -import type { IComposeSettings } from '@uifabricshared/foundation-compose'; -import type { PressablePropsExtended } from '@fluentui-react-native/interactive-hooks'; export const tabsItemSelectActionLabel = 'Select a TabsItem'; diff --git a/packages/components/Tabs/src/TabsItem.settings.windows.ts b/packages/components/Tabs/src/TabsItem.settings.windows.ts index f42b638fc3..de04b682d3 100644 --- a/packages/components/Tabs/src/TabsItem.settings.windows.ts +++ b/packages/components/Tabs/src/TabsItem.settings.windows.ts @@ -1,7 +1,8 @@ +import type { PressablePropsExtended } from '@fluentui-react-native/interactive-hooks'; +import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { TabsItemType } from './TabsItem.types'; import { tabsItemName } from './TabsItem.types'; -import type { IComposeSettings } from '@uifabricshared/foundation-compose'; -import type { PressablePropsExtended } from '@fluentui-react-native/interactive-hooks'; export const settings: IComposeSettings = [ { diff --git a/packages/components/Tabs/src/TabsItem.tsx b/packages/components/Tabs/src/TabsItem.tsx index 97ef00750d..40236e1e41 100644 --- a/packages/components/Tabs/src/TabsItem.tsx +++ b/packages/components/Tabs/src/TabsItem.tsx @@ -1,20 +1,22 @@ /** @jsx withSlots */ import * as React from 'react'; import { Platform, Pressable, View } from 'react-native'; -import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; -import { compose } from '@uifabricshared/foundation-compose'; + +import { filterViewProps } from '@fluentui-react-native/adapters'; +import { Icon, createIconProps } from '@fluentui-react-native/icon'; +import { usePressableState, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; +import { Text } from '@fluentui-react-native/text'; +import { backgroundColorTokens, borderTokens, textTokens, foregroundColorTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens'; import type { ISlots } from '@uifabricshared/foundation-composable'; import { withSlots } from '@uifabricshared/foundation-composable'; -import { Text } from '@fluentui-react-native/text'; -import { Icon, createIconProps } from '@fluentui-react-native/icon'; -import { settings, tabsItemSelectActionLabel } from './TabsItem.settings'; -import { backgroundColorTokens, borderTokens, textTokens, foregroundColorTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens'; -import { filterViewProps } from '@fluentui-react-native/adapters'; +import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; +import { compose } from '@uifabricshared/foundation-compose'; import { mergeSettings } from '@uifabricshared/foundation-settings'; + import { TabsContext } from './Tabs'; +import { settings, tabsItemSelectActionLabel } from './TabsItem.settings'; import type { TabsItemType, TabsItemProps, TabsItemSlotProps, TabsItemRenderData, TabsItemState } from './TabsItem.types'; import { tabsItemName } from './TabsItem.types'; -import { usePressableState, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; export const TabsItem = compose({ displayName: tabsItemName, diff --git a/packages/components/Tabs/src/TabsItem.types.ts b/packages/components/Tabs/src/TabsItem.types.ts index 31fb767c9b..bc931b2f07 100644 --- a/packages/components/Tabs/src/TabsItem.types.ts +++ b/packages/components/Tabs/src/TabsItem.types.ts @@ -1,10 +1,11 @@ import type * as React from 'react'; import type { ViewProps } from 'react-native'; -import type { IRenderData } from '@uifabricshared/foundation-composable'; + +import type { IconProps, IconSourcesType } from '@fluentui-react-native/icon'; import type { IFocusable, PressableState, PressablePropsExtended } from '@fluentui-react-native/interactive-hooks'; import type { ITextProps } from '@fluentui-react-native/text'; -import type { IconProps, IconSourcesType } from '@fluentui-react-native/icon'; import type { FontTokens, IBackgroundColorTokens, IBorderTokens, IForegroundColorTokens } from '@fluentui-react-native/tokens'; +import type { IRenderData } from '@uifabricshared/foundation-composable'; export const tabsItemName = 'TabsItem'; diff --git a/packages/components/Tabs/src/TabsItem.windows.tsx b/packages/components/Tabs/src/TabsItem.windows.tsx index 2b85a45b13..97ea49a633 100644 --- a/packages/components/Tabs/src/TabsItem.windows.tsx +++ b/packages/components/Tabs/src/TabsItem.windows.tsx @@ -1,20 +1,22 @@ /** @jsx withSlots */ import * as React from 'react'; import { Pressable, View } from 'react-native'; -import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; -import { compose } from '@uifabricshared/foundation-compose'; + +import { filterViewProps } from '@fluentui-react-native/adapters'; +import { Icon, createIconProps } from '@fluentui-react-native/icon'; +import { usePressableState, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; +import { Text } from '@fluentui-react-native/text'; +import { backgroundColorTokens, borderTokens, textTokens, foregroundColorTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens'; import type { ISlots } from '@uifabricshared/foundation-composable'; import { withSlots } from '@uifabricshared/foundation-composable'; -import { Text } from '@fluentui-react-native/text'; -import { Icon, createIconProps } from '@fluentui-react-native/icon'; -import { settings, tabsItemSelectActionLabel } from './TabsItem.settings'; -import { backgroundColorTokens, borderTokens, textTokens, foregroundColorTokens, getPaletteFromTheme } from '@fluentui-react-native/tokens'; -import { filterViewProps } from '@fluentui-react-native/adapters'; +import type { IUseComposeStyling } from '@uifabricshared/foundation-compose'; +import { compose } from '@uifabricshared/foundation-compose'; import { mergeSettings } from '@uifabricshared/foundation-settings'; + import { TabsContext } from './Tabs'; +import { settings, tabsItemSelectActionLabel } from './TabsItem.settings'; import type { TabsItemType, TabsItemProps, TabsItemSlotProps, TabsItemRenderData, TabsItemState } from './TabsItem.types'; import { tabsItemName } from './TabsItem.types'; -import { usePressableState, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; export const TabsItem = compose({ displayName: tabsItemName, diff --git a/packages/components/Tabs/src/__tests__/Tabs.test.tsx b/packages/components/Tabs/src/__tests__/Tabs.test.tsx index 4d649696ec..c6f8929cd9 100644 --- a/packages/components/Tabs/src/__tests__/Tabs.test.tsx +++ b/packages/components/Tabs/src/__tests__/Tabs.test.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; -import { Tabs, TabsItem } from '..'; + import * as renderer from 'react-test-renderer'; +import { Tabs, TabsItem } from '..'; + it('Tabs default props', () => { const tree = renderer .create( diff --git a/packages/components/text/src/Text.tsx b/packages/components/text/src/Text.tsx index 7af0ea8ab8..0ddbb9e62c 100644 --- a/packages/components/text/src/Text.tsx +++ b/packages/components/text/src/Text.tsx @@ -1,14 +1,16 @@ /** @jsx withSlots */ +import React from 'react'; +import { I18nManager, Platform, Text as RNText } from 'react-native'; + +import { useFontMetricsScaleFactors } from '@fluentui-react-native/experimental-native-font-metrics'; import type { UseTokens, FontWeightValue } from '@fluentui-react-native/framework'; import { fontStyles, withSlots, useFluentTheme, mergeStyles, compressible, patchTokens } from '@fluentui-react-native/framework'; import { useKeyProps } from '@fluentui-react-native/interactive-hooks'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; -import { I18nManager, Platform, Text as RNText } from 'react-native'; + import type { TextProps, TextTokens } from './Text.types'; import { textName } from './Text.types'; import { useTextTokens } from './TextTokens'; -import React from 'react'; -import { useFontMetricsScaleFactors } from '@fluentui-react-native/experimental-native-font-metrics'; const emptyProps = {}; export const Text = compressible((props: TextProps, useTokens: UseTokens) => { diff --git a/packages/components/text/src/Text.types.ts b/packages/components/text/src/Text.types.ts index 9e4c830822..c935ef43ee 100644 --- a/packages/components/text/src/Text.types.ts +++ b/packages/components/text/src/Text.types.ts @@ -1,7 +1,8 @@ -import type { FontTokens, FontVariantTokens, IForegroundColorTokens } from '@fluentui-react-native/framework'; -import type { ITextProps } from '@fluentui-react-native/adapters'; import type { ColorValue, TextStyle } from 'react-native'; +import type { ITextProps } from '@fluentui-react-native/adapters'; +import type { FontTokens, FontVariantTokens, IForegroundColorTokens } from '@fluentui-react-native/framework'; + export const textName = 'Text'; /** diff --git a/packages/components/text/src/TextTokens.ts b/packages/components/text/src/TextTokens.ts index ea95d5b978..b1b736abfb 100644 --- a/packages/components/text/src/TextTokens.ts +++ b/packages/components/text/src/TextTokens.ts @@ -1,4 +1,5 @@ import { buildUseTokens } from '@fluentui-react-native/framework'; + import type { TextTokens } from './Text.types'; import { textName } from './Text.types'; diff --git a/packages/components/text/src/__tests__/Text.test.tsx b/packages/components/text/src/__tests__/Text.test.tsx index f2b41d28b5..dfc91cc305 100644 --- a/packages/components/text/src/__tests__/Text.test.tsx +++ b/packages/components/text/src/__tests__/Text.test.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; -import { Text } from '../Text'; -import * as renderer from 'react-test-renderer'; + import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools'; +import * as renderer from 'react-test-renderer'; + +import { Text } from '../Text'; describe('Text component tests', () => { it('Text default', () => { diff --git a/packages/components/text/src/deprecated/Text.settings.ts b/packages/components/text/src/deprecated/Text.settings.ts index 9ac66d29cf..4f98ce61eb 100644 --- a/packages/components/text/src/deprecated/Text.settings.ts +++ b/packages/components/text/src/deprecated/Text.settings.ts @@ -1,7 +1,9 @@ +import type { TextStyle } from 'react-native'; + +import type { IComposeSettings } from '@uifabricshared/foundation-compose'; + import type { ITextType } from './Text.types'; import { textName } from './Text.types'; -import type { TextStyle } from 'react-native'; -import type { IComposeSettings } from '@uifabricshared/foundation-compose'; export const settings: IComposeSettings = [ { diff --git a/packages/components/text/src/deprecated/Text.tsx b/packages/components/text/src/deprecated/Text.tsx index 5ff11f4ae6..b7978b605f 100644 --- a/packages/components/text/src/deprecated/Text.tsx +++ b/packages/components/text/src/deprecated/Text.tsx @@ -1,10 +1,12 @@ -import type { ITextType } from './Text.types'; -import { textName } from './Text.types'; -import { compose } from '@uifabricshared/foundation-compose'; import { Text as RNText } from 'react-native'; + import { filterTextProps } from '@fluentui-react-native/adapters'; import { foregroundColorTokens, textTokens } from '@fluentui-react-native/tokens'; +import { compose } from '@uifabricshared/foundation-compose'; + import { settings } from './Text.settings'; +import { textName } from './Text.types'; +import type { ITextType } from './Text.types'; export const Text = compose({ displayName: textName, diff --git a/packages/components/text/src/deprecated/Text.types.ts b/packages/components/text/src/deprecated/Text.types.ts index 36540c0281..b73c7185b6 100644 --- a/packages/components/text/src/deprecated/Text.types.ts +++ b/packages/components/text/src/deprecated/Text.types.ts @@ -1,5 +1,5 @@ -import type { FontTokens, FontVariantTokens, IForegroundColorTokens, IColorTokens } from '@fluentui-react-native/tokens'; import type { ITextProps as INativeTextProps } from '@fluentui-react-native/adapters'; +import type { FontTokens, FontVariantTokens, IForegroundColorTokens, IColorTokens } from '@fluentui-react-native/tokens'; export const textName = 'RNFText'; diff --git a/packages/deprecated/foundation-composable/src/slots.tsx b/packages/deprecated/foundation-composable/src/slots.tsx index 6fe9905dad..cbdb786309 100644 --- a/packages/deprecated/foundation-composable/src/slots.tsx +++ b/packages/deprecated/foundation-composable/src/slots.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; -import type { INativeSlotType } from './Composable.types'; + import type { ISlotFn } from './Composable.slots'; +import type { INativeSlotType } from './Composable.types'; /** * Renders a slot diff --git a/packages/deprecated/foundation-settings/src/Settings.merge.test.ts b/packages/deprecated/foundation-settings/src/Settings.merge.test.ts index ce5e6ee7bc..a005012e98 100644 --- a/packages/deprecated/foundation-settings/src/Settings.merge.test.ts +++ b/packages/deprecated/foundation-settings/src/Settings.merge.test.ts @@ -1,8 +1,10 @@ -import type { IComponentSettings } from './Settings.types'; -import { mergeSettings } from './Settings'; -import type { StyleProp } from '@fluentui-react-native/merge-props'; import type { ColorValue } from 'react-native'; +import type { StyleProp } from '@fluentui-react-native/merge-props'; + +import { mergeSettings } from './Settings'; +import type { IComponentSettings } from './Settings.types'; + interface IProps { root: { prop1: string; diff --git a/packages/deprecated/foundation-settings/src/Settings.override.test.ts b/packages/deprecated/foundation-settings/src/Settings.override.test.ts index 07eee13c2c..0340cfe240 100644 --- a/packages/deprecated/foundation-settings/src/Settings.override.test.ts +++ b/packages/deprecated/foundation-settings/src/Settings.override.test.ts @@ -1,5 +1,5 @@ -import type { IComponentSettings } from './Settings.types'; import { resolveSettingsOverrides } from './Settings'; +import type { IComponentSettings } from './Settings.types'; interface IProps { root: { diff --git a/packages/deprecated/foundation-tokens/src/MockButton.ts b/packages/deprecated/foundation-tokens/src/MockButton.ts index 0bf5fd1183..6dbc8045b0 100644 --- a/packages/deprecated/foundation-tokens/src/MockButton.ts +++ b/packages/deprecated/foundation-tokens/src/MockButton.ts @@ -1,3 +1,7 @@ +import type { IComponentSettings } from '@uifabricshared/foundation-settings'; + +import type { IMockBaseProps } from './MockComponent'; +import { mockCreate, stockFakeComponent } from './MockComponent'; import type { IMockTextTokens, IMockColorTokens, @@ -12,9 +16,6 @@ import { standardBorderTokens, standardCaptionTokens, } from './MockTokens'; -import type { IMockBaseProps } from './MockComponent'; -import { mockCreate, stockFakeComponent } from './MockComponent'; -import type { IComponentSettings } from '@uifabricshared/foundation-settings'; export type IMockTextProps = IMockTextTokens & IMockForegroundColorTokens & IMockBaseProps; export type IMockViewProps = IMockBaseProps; diff --git a/packages/deprecated/foundation-tokens/src/MockComponent.ts b/packages/deprecated/foundation-tokens/src/MockComponent.ts index bcd786218a..8a04af2070 100644 --- a/packages/deprecated/foundation-tokens/src/MockComponent.ts +++ b/packages/deprecated/foundation-tokens/src/MockComponent.ts @@ -1,11 +1,12 @@ -import type { IMockTheme } from './MockTheme'; -import type { ITargetHasToken, IComponentTokens, IStyleFactories } from './Token.types'; +import type { GetMemoValue } from '@fluentui-react-native/memo-cache'; +import type { StyleProp } from '@fluentui-react-native/merge-props'; import type { ISlotProps, IComponentSettings } from '@uifabricshared/foundation-settings'; import { mergeSettings } from '@uifabricshared/foundation-settings'; -import type { StyleProp } from '@fluentui-react-native/merge-props'; + +import type { IMockTheme } from './MockTheme'; import { processTokens } from './Token'; import { buildComponentTokens } from './Token.function'; -import type { GetMemoValue } from '@fluentui-react-native/memo-cache'; +import type { ITargetHasToken, IComponentTokens, IStyleFactories } from './Token.types'; export type ICSSStyle = React.CSSProperties; diff --git a/packages/deprecated/foundation-tokens/src/MockTokens.ts b/packages/deprecated/foundation-tokens/src/MockTokens.ts index 6802b3f0d9..2b9521f360 100644 --- a/packages/deprecated/foundation-tokens/src/MockTokens.ts +++ b/packages/deprecated/foundation-tokens/src/MockTokens.ts @@ -1,6 +1,7 @@ +import type { ColorValue } from 'react-native'; + import type { IMockTheme } from './MockTheme'; import type { IStyleFactoryOperation, ILookupThemePart } from './Token.types'; -import type { ColorValue } from 'react-native'; export interface IMockTextTokens { fontSize?: string | number; diff --git a/packages/deprecated/foundation-tokens/src/Token.function.ts b/packages/deprecated/foundation-tokens/src/Token.function.ts index cdc13ed3b6..a5bb66b5dd 100644 --- a/packages/deprecated/foundation-tokens/src/Token.function.ts +++ b/packages/deprecated/foundation-tokens/src/Token.function.ts @@ -1,5 +1,8 @@ -import type { ISlotProps } from '@uifabricshared/foundation-settings'; +import type { GetMemoValue } from '@fluentui-react-native/memo-cache'; import { mergeProps } from '@fluentui-react-native/merge-props'; +import type { ISlotProps } from '@uifabricshared/foundation-settings'; + +import type { ITokenPropInfo, ICachedPropHandlers } from './Token.internal'; import type { ITargetHasToken, IStyleFactoryOperation, @@ -8,8 +11,6 @@ import type { IStyleFinalizer, IStyleFactoryFunction, } from './Token.types'; -import type { ITokenPropInfo, ICachedPropHandlers } from './Token.internal'; -import type { GetMemoValue } from '@fluentui-react-native/memo-cache'; interface ITokensForSlot { toStyle: IStyleFactoryOperation[]; diff --git a/packages/deprecated/foundation-tokens/src/Token.test.ts b/packages/deprecated/foundation-tokens/src/Token.test.ts index f1e58fbeba..843052076a 100644 --- a/packages/deprecated/foundation-tokens/src/Token.test.ts +++ b/packages/deprecated/foundation-tokens/src/Token.test.ts @@ -1,7 +1,8 @@ +import { getMemoCache } from '@fluentui-react-native/memo-cache'; + import type { IButtonSettings } from './MockButton'; import { MockButton } from './MockButton'; import { theme } from './MockTheme'; -import { getMemoCache } from '@fluentui-react-native/memo-cache'; const b1: IButtonSettings = { tokens: { diff --git a/packages/deprecated/foundation-tokens/src/Token.ts b/packages/deprecated/foundation-tokens/src/Token.ts index 6b606c2ec2..3921d97fc2 100644 --- a/packages/deprecated/foundation-tokens/src/Token.ts +++ b/packages/deprecated/foundation-tokens/src/Token.ts @@ -1,7 +1,8 @@ -import type { IComponentTokens } from './Token.types'; -import type { ISlotProps, IComponentSettings } from '@uifabricshared/foundation-settings'; -import type { ITokenPropInfo } from './Token.internal'; import type { GetMemoValue } from '@fluentui-react-native/memo-cache'; +import type { ISlotProps, IComponentSettings } from '@uifabricshared/foundation-settings'; + +import type { ITokenPropInfo } from './Token.internal'; +import type { IComponentTokens } from './Token.types'; /** * Take the input props and props from settings and return a merged set of token props (a single source diff --git a/packages/deprecated/foundation-tokens/src/Token.types.ts b/packages/deprecated/foundation-tokens/src/Token.types.ts index e8a8dae981..a6b8c30652 100644 --- a/packages/deprecated/foundation-tokens/src/Token.types.ts +++ b/packages/deprecated/foundation-tokens/src/Token.types.ts @@ -5,6 +5,7 @@ import type { StyleFactoryFunctionRaw, StyleFactoryOperation, } from '@fluentui-react-native/tokens'; + import type { ICachedPropHandlers } from './Token.internal'; export type ILookupThemePart = LookupThemePart; diff --git a/packages/deprecated/theme-registry/src/Registry.test.ts b/packages/deprecated/theme-registry/src/Registry.test.ts index 81d613b540..9f7ce177c8 100644 --- a/packages/deprecated/theme-registry/src/Registry.test.ts +++ b/packages/deprecated/theme-registry/src/Registry.test.ts @@ -1,7 +1,9 @@ +import type { ColorValue } from 'react-native'; + +import { immutableMerge } from '@fluentui-react-native/immutable-merge'; + import { createThemeRegistry } from './Registry'; import type { IThemeRegistry } from './Registry.types'; -import { immutableMerge } from '@fluentui-react-native/immutable-merge'; -import type { ColorValue } from 'react-native'; interface IFakeStyle { textColor?: string; diff --git a/packages/deprecated/themed-settings/src/CustomSettings.test.ts b/packages/deprecated/themed-settings/src/CustomSettings.test.ts index 40aefb6e70..4af418d129 100644 --- a/packages/deprecated/themed-settings/src/CustomSettings.test.ts +++ b/packages/deprecated/themed-settings/src/CustomSettings.test.ts @@ -1,9 +1,11 @@ +import type { ColorValue } from 'react-native'; + +import { getMemoCache } from '@fluentui-react-native/memo-cache'; import type { IComponentSettings } from '@uifabricshared/foundation-settings'; import { mergeSettings } from '@uifabricshared/foundation-settings'; -import type { ISettingsEntry, ISettingsFromTheme } from './CustomSettings.types'; + import { mergeBaseSettings, getThemedSettings } from './CustomSettings'; -import { getMemoCache } from '@fluentui-react-native/memo-cache'; -import type { ColorValue } from 'react-native'; +import type { ISettingsEntry, ISettingsFromTheme } from './CustomSettings.types'; interface IMockTheme { palette: { diff --git a/packages/deprecated/themed-settings/src/CustomSettings.ts b/packages/deprecated/themed-settings/src/CustomSettings.ts index 0ee978c577..afad6c52ac 100644 --- a/packages/deprecated/themed-settings/src/CustomSettings.ts +++ b/packages/deprecated/themed-settings/src/CustomSettings.ts @@ -1,7 +1,8 @@ +import type { GetMemoValue } from '@fluentui-react-native/memo-cache'; import type { IComponentSettings, IOverrideLookup } from '@uifabricshared/foundation-settings'; import { mergeSettings, getActiveOverrides, resolveSettingsOverrides } from '@uifabricshared/foundation-settings'; + import type { IGetSettingsFromTheme, ISettingsEntry } from './CustomSettings.types'; -import type { GetMemoValue } from '@fluentui-react-native/memo-cache'; /** * Merges the various settings for a component together diff --git a/packages/deprecated/theming-ramp/src/Theme.test.ts b/packages/deprecated/theming-ramp/src/Theme.test.ts index 7f57971972..630fb87f51 100644 --- a/packages/deprecated/theming-ramp/src/Theme.test.ts +++ b/packages/deprecated/theming-ramp/src/Theme.test.ts @@ -1,6 +1,7 @@ -import type { Theme, PartialTheme } from '@fluentui-react-native/theme-types'; -import { resolvePartialTheme } from './Theme'; import { mockTheme } from '@fluentui-react-native/test-tools'; +import type { Theme, PartialTheme } from '@fluentui-react-native/theme-types'; + +import { resolvePartialTheme } from './Theme'; const theme: Theme = { ...mockTheme, diff --git a/packages/deprecated/theming-ramp/src/Typography.test.ts b/packages/deprecated/theming-ramp/src/Typography.test.ts index b7bb5b43eb..ebc5dff697 100644 --- a/packages/deprecated/theming-ramp/src/Typography.test.ts +++ b/packages/deprecated/theming-ramp/src/Typography.test.ts @@ -1,4 +1,5 @@ import type { FontFamilies, FontSizes, FontWeights, Variants, Typography } from '@fluentui-react-native/theme-types'; + import { resolveFontFamily, resolveFontSize, resolveFontWeight } from './Typography'; const families = { diff --git a/packages/deprecated/theming-react-native/src/BaselinePlatformDefaults.ts b/packages/deprecated/theming-react-native/src/BaselinePlatformDefaults.ts index 350792d977..e3105357ac 100644 --- a/packages/deprecated/theming-react-native/src/BaselinePlatformDefaults.ts +++ b/packages/deprecated/theming-react-native/src/BaselinePlatformDefaults.ts @@ -1,5 +1,5 @@ -import type { ITheme } from '@uifabricshared/theming-ramp'; import { defaultFluentTheme } from '@fluentui-react-native/default-theme'; +import type { ITheme } from '@uifabricshared/theming-ramp'; /** * @deprecated diff --git a/packages/deprecated/theming-react-native/src/Global.ts b/packages/deprecated/theming-react-native/src/Global.ts index 3c0046102d..b0b1058ec6 100644 --- a/packages/deprecated/theming-react-native/src/Global.ts +++ b/packages/deprecated/theming-react-native/src/Global.ts @@ -1,7 +1,8 @@ -import type { IPartialTheme, ITheme, ThemeRegistry } from './Theme.types'; -import { createPlatformThemeRegistry } from './platform'; import type { IProcessTheme, IThemeEventListener } from '@uifabricshared/theme-registry'; +import { createPlatformThemeRegistry } from './platform'; +import type { IPartialTheme, ITheme, ThemeRegistry } from './Theme.types'; + let _registry: ThemeRegistry; /** diff --git a/packages/deprecated/theming-react-native/src/NativeModule/ThemingModule.ts b/packages/deprecated/theming-react-native/src/NativeModule/ThemingModule.ts index 4eac9c1993..14899635f5 100644 --- a/packages/deprecated/theming-react-native/src/NativeModule/ThemingModule.ts +++ b/packages/deprecated/theming-react-native/src/NativeModule/ThemingModule.ts @@ -1,6 +1,7 @@ -import { createThemingModuleHelper } from './ThemingModuleHelpers'; import { getThemingModule } from '@fluentui-react-native/win32-theme'; +import { createThemingModuleHelper } from './ThemingModuleHelpers'; + /** * @deprecated */ diff --git a/packages/deprecated/theming-react-native/src/NativeModule/ThemingModule.types.ts b/packages/deprecated/theming-react-native/src/NativeModule/ThemingModule.types.ts index 77c43f561a..d7a2acbbfd 100644 --- a/packages/deprecated/theming-react-native/src/NativeModule/ThemingModule.types.ts +++ b/packages/deprecated/theming-react-native/src/NativeModule/ThemingModule.types.ts @@ -1,6 +1,6 @@ -import type { ITheme, IPartialTheme, OfficePalette as IOfficePalette } from '@uifabricshared/theming-ramp'; -import type { IProcessTheme } from '@uifabricshared/theme-registry'; import type { PlatformDefaultsChangedCallback } from '@fluentui-react-native/win32-theme'; +import type { IProcessTheme } from '@uifabricshared/theme-registry'; +import type { ITheme, IPartialTheme, OfficePalette as IOfficePalette } from '@uifabricshared/theming-ramp'; /** * @deprecated diff --git a/packages/deprecated/theming-react-native/src/NativeModule/ThemingModuleHelpers.ts b/packages/deprecated/theming-react-native/src/NativeModule/ThemingModuleHelpers.ts index 8268c3d304..cf29d81f22 100644 --- a/packages/deprecated/theming-react-native/src/NativeModule/ThemingModuleHelpers.ts +++ b/packages/deprecated/theming-react-native/src/NativeModule/ThemingModuleHelpers.ts @@ -1,7 +1,3 @@ -import type { ITheme, OfficePalette } from '@uifabricshared/theming-ramp'; -import { resolvePartialTheme } from '@uifabricshared/theming-ramp'; -import type { IThemingModuleHelper, IEventEmitter } from './ThemingModule.types'; -import { getBaselinePlatformTheme } from '../BaselinePlatformDefaults'; import type { OfficeThemingModule, CxxException, @@ -9,6 +5,11 @@ import type { PlatformDefaultsChangedArgs, } from '@fluentui-react-native/win32-theme'; import { createPartialOfficeTheme } from '@fluentui-react-native/win32-theme'; +import type { ITheme, OfficePalette } from '@uifabricshared/theming-ramp'; +import { resolvePartialTheme } from '@uifabricshared/theming-ramp'; + +import type { IThemingModuleHelper, IEventEmitter } from './ThemingModule.types'; +import { getBaselinePlatformTheme } from '../BaselinePlatformDefaults'; type PaletteCache = { [key: string]: OfficePalette }; diff --git a/packages/deprecated/theming-react-native/src/ThemeContext.ts b/packages/deprecated/theming-react-native/src/ThemeContext.ts index 7196a8c55a..e636594bfc 100644 --- a/packages/deprecated/theming-react-native/src/ThemeContext.ts +++ b/packages/deprecated/theming-react-native/src/ThemeContext.ts @@ -1,4 +1,5 @@ import * as React from 'react'; + import type { ThemeRegistry } from './Theme.types'; /** * @deprecated diff --git a/packages/deprecated/theming-react-native/src/ThemeLayer.tsx b/packages/deprecated/theming-react-native/src/ThemeLayer.tsx index a55fcd4d9b..9ed227ef5d 100644 --- a/packages/deprecated/theming-react-native/src/ThemeLayer.tsx +++ b/packages/deprecated/theming-react-native/src/ThemeLayer.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; + import type { IThemeEventListener } from '@uifabricshared/theme-registry'; +import { ThemeContext } from '@uifabricshared/theming-ramp'; + import { removeThemeRegistryListener, getTheme, addThemeRegistryListener } from './Global'; import type { ITheme } from './Theme.types'; -import { ThemeContext } from '@uifabricshared/theming-ramp'; /** * props for the ThemeLayer diff --git a/packages/deprecated/theming-react-native/src/ThemeProvider.tsx b/packages/deprecated/theming-react-native/src/ThemeProvider.tsx index f643f7942f..22abd6419f 100644 --- a/packages/deprecated/theming-react-native/src/ThemeProvider.tsx +++ b/packages/deprecated/theming-react-native/src/ThemeProvider.tsx @@ -1,10 +1,12 @@ import * as React from 'react'; -import type { IThemeProviderProps } from './ThemeProvider.types'; -import { useThemeRegistry, ThemeRegistryContext } from './ThemeContext'; + import type { IThemeEventListener } from '@uifabricshared/theme-registry'; -import { getThemeRegistry } from './Global'; import { ThemeContext } from '@uifabricshared/theming-ramp'; +import { getThemeRegistry } from './Global'; +import { useThemeRegistry, ThemeRegistryContext } from './ThemeContext'; +import type { IThemeProviderProps } from './ThemeProvider.types'; + /** * @deprecated */ diff --git a/packages/deprecated/theming-react-native/src/platform/PlatformDefaults.native.ts b/packages/deprecated/theming-react-native/src/platform/PlatformDefaults.native.ts index ec892fc838..51dc265daa 100644 --- a/packages/deprecated/theming-react-native/src/platform/PlatformDefaults.native.ts +++ b/packages/deprecated/theming-react-native/src/platform/PlatformDefaults.native.ts @@ -1,8 +1,9 @@ -import type { IThemingModuleHelper } from '../NativeModule'; -import { ThemingModuleHelper } from '../NativeModule'; import { createThemeRegistry } from '@uifabricshared/theme-registry'; import { resolvePartialTheme } from '@uifabricshared/theming-ramp'; +import type { IThemingModuleHelper } from '../NativeModule'; +import { ThemingModuleHelper } from '../NativeModule'; + /** * @deprecated */ diff --git a/packages/deprecated/theming-react-native/src/platform/PlatformDefaults.ts b/packages/deprecated/theming-react-native/src/platform/PlatformDefaults.ts index 248f24bb3d..dbdd8b13ae 100644 --- a/packages/deprecated/theming-react-native/src/platform/PlatformDefaults.ts +++ b/packages/deprecated/theming-react-native/src/platform/PlatformDefaults.ts @@ -1,6 +1,7 @@ -import { getBaselinePlatformTheme } from '../BaselinePlatformDefaults'; import { createThemeRegistry } from '@uifabricshared/theme-registry'; import { resolvePartialTheme } from '@uifabricshared/theming-ramp'; + +import { getBaselinePlatformTheme } from '../BaselinePlatformDefaults'; import type { IThemingModuleHelper } from '../NativeModule'; /** diff --git a/packages/experimental/ActivityIndicator/src/ActivityIndicator.mobile.tsx b/packages/experimental/ActivityIndicator/src/ActivityIndicator.mobile.tsx index 886dba4ddf..bbae62d428 100644 --- a/packages/experimental/ActivityIndicator/src/ActivityIndicator.mobile.tsx +++ b/packages/experimental/ActivityIndicator/src/ActivityIndicator.mobile.tsx @@ -1,12 +1,14 @@ /** @jsx withSlots */ import { useRef, useEffect, useCallback } from 'react'; import { Animated, Easing, View } from 'react-native'; -import { Svg, Path } from 'react-native-svg'; + import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, mergeProps, withSlots, buildUseStyling } from '@fluentui-react-native/framework'; +import { Svg, Path } from 'react-native-svg'; + +import { diameterSizeMap, lineThicknessSizeMap, stylingSettings } from './ActivityIndicator.styling'; import type { ActivityIndicatorProps, FluentActivityIndicatorType } from './ActivityIndicator.types'; import { activityIndicatorName } from './ActivityIndicator.types'; -import { diameterSizeMap, lineThicknessSizeMap, stylingSettings } from './ActivityIndicator.styling'; const getActivityIndicatorPath = (diameter: number, width: number, color: string) => { const start = { diff --git a/packages/experimental/ActivityIndicator/src/ActivityIndicator.styling.tsx b/packages/experimental/ActivityIndicator/src/ActivityIndicator.styling.tsx index 0ad02abd3b..754240ade6 100644 --- a/packages/experimental/ActivityIndicator/src/ActivityIndicator.styling.tsx +++ b/packages/experimental/ActivityIndicator/src/ActivityIndicator.styling.tsx @@ -1,7 +1,10 @@ -import type { UseStylingOptions } from '@fluentui-react-native/framework'; -import { buildProps } from '@fluentui-react-native/framework'; import type { ActivityIndicatorProps as CoreActivityIndicatorProps } from 'react-native'; import { Appearance } from 'react-native'; + +import type { UseStylingOptions } from '@fluentui-react-native/framework'; +import { buildProps } from '@fluentui-react-native/framework'; +import assertNever from 'assert-never'; + import type { ActivityIndicatorProps, FluentActivityIndicatorSlotProps, @@ -10,7 +13,6 @@ import type { ActivityIndicatorSize, } from './ActivityIndicator.types'; import { activityIndicatorName } from './ActivityIndicator.types'; -import assertNever from 'assert-never'; export const diameterSizeMap: { [key: string]: number } = { xSmall: 12, diff --git a/packages/experimental/ActivityIndicator/src/ActivityIndicator.types.tsx b/packages/experimental/ActivityIndicator/src/ActivityIndicator.types.tsx index 4f498abfbc..5b8b0b44e7 100644 --- a/packages/experimental/ActivityIndicator/src/ActivityIndicator.types.tsx +++ b/packages/experimental/ActivityIndicator/src/ActivityIndicator.types.tsx @@ -1,4 +1,5 @@ import type { Animated, ActivityIndicatorProps as CoreActivityIndicatorProps } from 'react-native'; + import type { SvgProps } from 'react-native-svg'; export const activityIndicatorName = 'ActivityIndicator'; diff --git a/packages/experimental/ActivityIndicator/src/CoreActivityIndicator.tsx b/packages/experimental/ActivityIndicator/src/CoreActivityIndicator.tsx index d05afe883f..41e46bebab 100644 --- a/packages/experimental/ActivityIndicator/src/CoreActivityIndicator.tsx +++ b/packages/experimental/ActivityIndicator/src/CoreActivityIndicator.tsx @@ -1,12 +1,14 @@ /** @jsx withSlots */ import { ActivityIndicator as CoreActivityIndicator } from 'react-native'; -import type { CoreActivityIndicatorType, ActivityIndicatorProps } from './ActivityIndicator.types'; -import { activityIndicatorName } from './ActivityIndicator.types'; -import { coreStylingSettings } from './ActivityIndicator.styling'; + import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, withSlots } from '@fluentui-react-native/framework'; +import { coreStylingSettings } from './ActivityIndicator.styling'; +import type { CoreActivityIndicatorType, ActivityIndicatorProps } from './ActivityIndicator.types'; +import { activityIndicatorName } from './ActivityIndicator.types'; + /** * Wrapper around React Native Core's ActivityIndicator for platforms we do not * have a custom FluentUI React Native ActivityIndicator defined. diff --git a/packages/experimental/AppearanceAdditions/src/appearanceAdditions.ios.ts b/packages/experimental/AppearanceAdditions/src/appearanceAdditions.ios.ts index e721b38672..01a17633cc 100644 --- a/packages/experimental/AppearanceAdditions/src/appearanceAdditions.ios.ts +++ b/packages/experimental/AppearanceAdditions/src/appearanceAdditions.ios.ts @@ -1,8 +1,10 @@ import { NativeEventEmitter } from 'react-native'; + +import { memoize } from '@fluentui-react-native/framework'; + import NativeAppearanceAdditions from './NativeAppearanceAdditions'; import type { AppearanceAdditions, SizeClass, UserInterfaceLevel, AccessibilityContrastOption } from './NativeAppearanceAdditions.types'; import { HorizontalSizeClassKey, UserInterfaceLevelKey, AccessibilityContrastOptionKey } from './NativeAppearanceAdditions.types'; -import { memoize } from '@fluentui-react-native/framework'; class AppearanceAdditionsImpl implements AppearanceAdditions { _horizontalSizeClass: SizeClass; diff --git a/packages/experimental/AppearanceAdditions/src/appearanceAdditions.ts b/packages/experimental/AppearanceAdditions/src/appearanceAdditions.ts index 37876944b0..1731b01fcb 100644 --- a/packages/experimental/AppearanceAdditions/src/appearanceAdditions.ts +++ b/packages/experimental/AppearanceAdditions/src/appearanceAdditions.ts @@ -1,4 +1,5 @@ import { memoize } from '@fluentui-react-native/framework'; + import type { AppearanceAdditions } from './NativeAppearanceAdditions.types'; // Default values for non-iOS clients. diff --git a/packages/experimental/AppearanceAdditions/src/getSizeClass.ios.ts b/packages/experimental/AppearanceAdditions/src/getSizeClass.ios.ts index 6a54c980f9..13c7708ea2 100644 --- a/packages/experimental/AppearanceAdditions/src/getSizeClass.ios.ts +++ b/packages/experimental/AppearanceAdditions/src/getSizeClass.ios.ts @@ -1,8 +1,9 @@ import { useMemo } from 'react'; import { NativeEventEmitter } from 'react-native'; -import { useSubscription } from 'use-subscription'; -import { appearanceAdditions } from './appearanceAdditions'; +import { useSubscription } from 'use-subscription'; + +import { appearanceAdditions } from './appearanceAdditions'; import NativeAppearanceAdditions from './NativeAppearanceAdditions'; import type { SizeClass } from './NativeAppearanceAdditions.types'; diff --git a/packages/experimental/Avatar/src/NativeAvatar.tsx b/packages/experimental/Avatar/src/NativeAvatar.tsx index 7203e2b8c3..496c8f7dc4 100644 --- a/packages/experimental/Avatar/src/NativeAvatar.tsx +++ b/packages/experimental/Avatar/src/NativeAvatar.tsx @@ -1,9 +1,10 @@ /** @jsx withSlots */ -import type { UseSlots } from '@fluentui-react-native/framework'; -import { compose, buildProps, mergeProps, withSlots } from '@fluentui-react-native/framework'; import type { ImageURISource, ViewProps, ColorValue } from 'react-native'; import { NativeModules } from 'react-native'; + import { ensureNativeComponent } from '@fluentui-react-native/component-cache'; +import type { UseSlots } from '@fluentui-react-native/framework'; +import { compose, buildProps, mergeProps, withSlots } from '@fluentui-react-native/framework'; const avatarName = 'NativeAvatar'; diff --git a/packages/experimental/Avatar/src/__tests__/Avatar.test.jsx b/packages/experimental/Avatar/src/__tests__/Avatar.test.jsx index 7eb617c6da..0d9845889a 100644 --- a/packages/experimental/Avatar/src/__tests__/Avatar.test.jsx +++ b/packages/experimental/Avatar/src/__tests__/Avatar.test.jsx @@ -1,7 +1,9 @@ import * as React from 'react'; + +import * as renderer from 'react-test-renderer'; + import { Avatar } from '..'; import { getInitials } from '../useAvatar'; -import * as renderer from 'react-test-renderer'; const alphabeticalTestNames = [ 'Marie', diff --git a/packages/experimental/Checkbox/src/Checkbox.macos.tsx b/packages/experimental/Checkbox/src/Checkbox.macos.tsx index 37da1c6533..37a4850a0d 100644 --- a/packages/experimental/Checkbox/src/Checkbox.macos.tsx +++ b/packages/experimental/Checkbox/src/Checkbox.macos.tsx @@ -1,10 +1,10 @@ /** @jsx withSlots */ +import type { IViewProps } from '@fluentui-react-native/adapters'; import type { CheckboxTokens, CheckboxProps, CheckboxState } from '@fluentui-react-native/checkbox'; import { checkboxName } from '@fluentui-react-native/checkbox'; +import { ensureNativeComponent } from '@fluentui-react-native/component-cache'; import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, mergeProps, withSlots, buildProps } from '@fluentui-react-native/framework'; -import { ensureNativeComponent } from '@fluentui-react-native/component-cache'; -import type { IViewProps } from '@fluentui-react-native/adapters'; const NativeCheckboxView = ensureNativeComponent('FRNCheckboxView'); diff --git a/packages/experimental/Divider/src/Divider.styling.ts b/packages/experimental/Divider/src/Divider.styling.ts index 07a0a4e5a3..488705a0e0 100644 --- a/packages/experimental/Divider/src/Divider.styling.ts +++ b/packages/experimental/Divider/src/Divider.styling.ts @@ -1,12 +1,14 @@ import { useMemo } from 'react'; import type { ViewProps, ColorValue } from 'react-native'; import { Platform } from 'react-native'; + import type { Theme } from '@fluentui-react-native/framework'; import type { IconPropsV1 as IconProps } from '@fluentui-react-native/icon'; import type { TextProps } from '@fluentui-react-native/text'; -import type { DividerTokens, DividerProps, DividerAppearance } from './Divider.types'; import { fontStyles } from '@fluentui-react-native/tokens'; +import type { DividerTokens, DividerProps, DividerAppearance } from './Divider.types'; + const isMobile = Platform.OS === 'android' || Platform.OS === 'ios'; const getIconProps = (contentColor: ColorValue, icon: IconProps): IconProps => { diff --git a/packages/experimental/Divider/src/Divider.tsx b/packages/experimental/Divider/src/Divider.tsx index c974e3d783..490c050b44 100644 --- a/packages/experimental/Divider/src/Divider.tsx +++ b/packages/experimental/Divider/src/Divider.tsx @@ -3,17 +3,19 @@ import React from 'react'; import { View } from 'react-native'; import type { ViewProps } from 'react-native'; -import { dividerName } from './Divider.types'; -import type { DividerProps, DividerTokens } from './Divider.types'; + import { withSlots, compressible, useSlot, useFluentTheme, patchTokens, mergeStyles } from '@fluentui-react-native/framework'; import type { UseTokens } from '@fluentui-react-native/framework'; -import { TextV1 as Text } from '@fluentui-react-native/text'; -import type { TextProps } from '@fluentui-react-native/text'; import { IconV1 as Icon } from '@fluentui-react-native/icon'; import type { IconPropsV1 as IconProps } from '@fluentui-react-native/icon'; -import { useDividerTokens } from './DividerTokens'; +import { TextV1 as Text } from '@fluentui-react-native/text'; +import type { TextProps } from '@fluentui-react-native/text'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; + import { colorsFromAppearance, useDividerSlotProps } from './Divider.styling'; +import { dividerName } from './Divider.types'; +import type { DividerProps, DividerTokens } from './Divider.types'; +import { useDividerTokens } from './DividerTokens'; export const Divider = compressible((props: DividerProps, useTokens: UseTokens) => { // Set default values for props diff --git a/packages/experimental/Divider/src/Divider.types.ts b/packages/experimental/Divider/src/Divider.types.ts index af35bfe6c8..cf76840161 100644 --- a/packages/experimental/Divider/src/Divider.types.ts +++ b/packages/experimental/Divider/src/Divider.types.ts @@ -1,7 +1,8 @@ import type { ViewProps, ColorValue } from 'react-native'; + import type { IconPropsV1 as IconProps } from '@fluentui-react-native/icon'; -import type { LayoutTokens, FontTokens } from '@fluentui-react-native/tokens'; import type { TextProps } from '@fluentui-react-native/text'; +import type { LayoutTokens, FontTokens } from '@fluentui-react-native/tokens'; export const dividerName = 'Divider'; diff --git a/packages/experimental/Divider/src/DividerTokens.android.ts b/packages/experimental/Divider/src/DividerTokens.android.ts index 2e1ffa02ac..df50a02802 100644 --- a/packages/experimental/Divider/src/DividerTokens.android.ts +++ b/packages/experimental/Divider/src/DividerTokens.android.ts @@ -1,8 +1,9 @@ import { buildUseTokens } from '@fluentui-react-native/framework'; import type { Theme } from '@fluentui-react-native/framework'; -import type { DividerTokens } from './Divider.types'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import type { DividerTokens } from './Divider.types'; + export const useDividerTokens = buildUseTokens((theme: Theme) => ({ // base tokens insetSize: 0, diff --git a/packages/experimental/Divider/src/DividerTokens.ios.ts b/packages/experimental/Divider/src/DividerTokens.ios.ts index aa318aa8bf..2917207f8a 100644 --- a/packages/experimental/Divider/src/DividerTokens.ios.ts +++ b/packages/experimental/Divider/src/DividerTokens.ios.ts @@ -1,8 +1,9 @@ import { buildUseTokens } from '@fluentui-react-native/framework'; import type { Theme } from '@fluentui-react-native/framework'; -import type { DividerTokens } from './Divider.types'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import type { DividerTokens } from './Divider.types'; + export const useDividerTokens = buildUseTokens((theme: Theme) => ({ // base tokens insetSize: 0, diff --git a/packages/experimental/Divider/src/DividerTokens.ts b/packages/experimental/Divider/src/DividerTokens.ts index 4b3f89630d..4d3ce9f011 100644 --- a/packages/experimental/Divider/src/DividerTokens.ts +++ b/packages/experimental/Divider/src/DividerTokens.ts @@ -1,7 +1,8 @@ import { buildUseTokens } from '@fluentui-react-native/framework'; -import type { DividerTokens } from './Divider.types'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import type { DividerTokens } from './Divider.types'; + export const useDividerTokens = buildUseTokens(() => ({ // base tokens contentPadding: globalTokens.size120, diff --git a/packages/experimental/Divider/src/__tests__/Divider.test.tsx b/packages/experimental/Divider/src/__tests__/Divider.test.tsx index 69dcbc26b6..827eeacbf7 100644 --- a/packages/experimental/Divider/src/__tests__/Divider.test.tsx +++ b/packages/experimental/Divider/src/__tests__/Divider.test.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; -import { Divider } from '../Divider'; -import * as renderer from 'react-test-renderer'; + import { checkReRender } from '@fluentui-react-native/test-tools'; +import * as renderer from 'react-test-renderer'; + +import { Divider } from '../Divider'; describe('Divider component tests', () => { it('Divider default', () => { diff --git a/packages/experimental/Drawer/src/Drawer.tsx b/packages/experimental/Drawer/src/Drawer.tsx index ff607b5aa2..4287e9bdc6 100644 --- a/packages/experimental/Drawer/src/Drawer.tsx +++ b/packages/experimental/Drawer/src/Drawer.tsx @@ -1,10 +1,12 @@ /** @jsx withSlots */ import * as React from 'react'; -import type { DrawerTokens, DrawerProps, DrawerType } from './Drawer.types'; -import { drawerName } from './Drawer.types'; + +import { ensureNativeComponent } from '@fluentui-react-native/component-cache'; import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, buildProps, mergeProps, withSlots } from '@fluentui-react-native/framework'; -import { ensureNativeComponent } from '@fluentui-react-native/component-cache'; + +import type { DrawerTokens, DrawerProps, DrawerType } from './Drawer.types'; +import { drawerName } from './Drawer.types'; const FRNDrawer = ensureNativeComponent('FRNDrawer'); diff --git a/packages/experimental/Dropdown/src/Dropdown/Dropdown.tsx b/packages/experimental/Dropdown/src/Dropdown/Dropdown.tsx index 751077e466..e53cdd72af 100644 --- a/packages/experimental/Dropdown/src/Dropdown/Dropdown.tsx +++ b/packages/experimental/Dropdown/src/Dropdown/Dropdown.tsx @@ -1,17 +1,19 @@ /** @jsx withSlots */ +import React from 'react'; +import { View } from 'react-native'; + import type { ButtonProps } from '@fluentui-react-native/button'; import { ButtonV1 as Button } from '@fluentui-react-native/button'; import type { UseTokens } from '@fluentui-react-native/framework'; import { buildUseTokens, compressible, useSlot, withSlots } from '@fluentui-react-native/framework'; -import React from 'react'; -import { View } from 'react-native'; +import type { PressablePropsExtended } from '@fluentui-react-native/interactive-hooks'; import type { SvgProps } from 'react-native-svg'; import { Path, Svg } from 'react-native-svg'; + import type { DropdownProps, DropdownTokens } from './Dropdown.types'; import { dropdownName } from './Dropdown.types'; import type { ListboxProps } from '../Listbox'; import { Listbox } from '../Listbox'; -import type { PressablePropsExtended } from '@fluentui-react-native/interactive-hooks'; const Dropdown = compressible((props: DropdownProps, _useTokens: UseTokens) => { const [isOpen, setOpen] = React.useState(false); diff --git a/packages/experimental/Dropdown/src/Listbox/Listbox.tsx b/packages/experimental/Dropdown/src/Listbox/Listbox.tsx index 978bc4adcc..231d3458eb 100644 --- a/packages/experimental/Dropdown/src/Listbox/Listbox.tsx +++ b/packages/experimental/Dropdown/src/Listbox/Listbox.tsx @@ -1,11 +1,13 @@ /** @jsx withSlots */ +import React from 'react'; +import { View } from 'react-native'; + import type { IViewProps } from '@fluentui-react-native/adapters'; import type { ICalloutProps } from '@fluentui-react-native/callout'; import { Callout } from '@fluentui-react-native/callout'; import type { UseTokens } from '@fluentui-react-native/framework'; import { buildUseTokens, compressible, useSlot, withSlots } from '@fluentui-react-native/framework'; -import React from 'react'; -import { View } from 'react-native'; + import type { ListboxProps, ListboxTokens } from './Listbox.types'; import { listboxName } from './Listbox.types'; diff --git a/packages/experimental/Dropdown/src/Option/Option.styling.ts b/packages/experimental/Dropdown/src/Option/Option.styling.ts index 40035e1503..e1854921cb 100644 --- a/packages/experimental/Dropdown/src/Option/Option.styling.ts +++ b/packages/experimental/Dropdown/src/Option/Option.styling.ts @@ -1,5 +1,6 @@ import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { borderStyles, buildProps, fontStyles, layoutStyles } from '@fluentui-react-native/framework'; + import type { OptionProps, OptionSlotProps, OptionTokens } from './Option.types'; import { optionName } from './Option.types'; import { defaultOptionTokens } from './OptionTokens'; diff --git a/packages/experimental/Dropdown/src/Option/Option.tsx b/packages/experimental/Dropdown/src/Option/Option.tsx index c17be245f3..8b29d655eb 100644 --- a/packages/experimental/Dropdown/src/Option/Option.tsx +++ b/packages/experimental/Dropdown/src/Option/Option.tsx @@ -1,10 +1,12 @@ /** @jsx withSlots */ +import React from 'react'; +import { View } from 'react-native'; + import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework'; import { TextV1 as Text } from '@fluentui-react-native/text'; -import React from 'react'; -import { View } from 'react-native'; import { Path, Svg } from 'react-native-svg'; + import { stylingSettings } from './Option.styling'; import type { OptionProps, OptionType } from './Option.types'; import { optionName } from './Option.types'; diff --git a/packages/experimental/Dropdown/src/Option/Option.types.ts b/packages/experimental/Dropdown/src/Option/Option.types.ts index c8945dd0d7..80cb669264 100644 --- a/packages/experimental/Dropdown/src/Option/Option.types.ts +++ b/packages/experimental/Dropdown/src/Option/Option.types.ts @@ -1,8 +1,9 @@ +import type { ColorValue } from 'react-native'; + import type { IViewProps } from '@fluentui-react-native/adapters'; import type { FontTokens, IBorderTokens, IColorTokens, LayoutTokens } from '@fluentui-react-native/framework'; import type { IFocusable, IPressableHooks, PressablePropsExtended } from '@fluentui-react-native/interactive-hooks'; import type { TextProps } from '@fluentui-react-native/text'; -import type { ColorValue } from 'react-native'; import type { SvgProps } from 'react-native-svg'; export const optionName = 'Option'; diff --git a/packages/experimental/Dropdown/src/Option/OptionTokens.ts b/packages/experimental/Dropdown/src/Option/OptionTokens.ts index 9b67d12eb9..9fcdded71a 100644 --- a/packages/experimental/Dropdown/src/Option/OptionTokens.ts +++ b/packages/experimental/Dropdown/src/Option/OptionTokens.ts @@ -1,5 +1,6 @@ import type { Theme, TokenSettings } from '@fluentui-react-native/framework'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; + import type { OptionTokens } from './Option.types'; export const defaultOptionTokens: TokenSettings = (t: Theme): OptionTokens => ({ diff --git a/packages/experimental/Dropdown/src/Option/useOption.ts b/packages/experimental/Dropdown/src/Option/useOption.ts index de9dbcc171..b6c63027f1 100644 --- a/packages/experimental/Dropdown/src/Option/useOption.ts +++ b/packages/experimental/Dropdown/src/Option/useOption.ts @@ -1,4 +1,5 @@ import { useAsPressable } from '@fluentui-react-native/interactive-hooks'; + import type { OptionProps, OptionState } from './Option.types'; export const useOption = (props: OptionProps): OptionState => { diff --git a/packages/experimental/Expander/src/Expander.tsx b/packages/experimental/Expander/src/Expander.tsx index 14d5964541..36dee22f2d 100644 --- a/packages/experimental/Expander/src/Expander.tsx +++ b/packages/experimental/Expander/src/Expander.tsx @@ -1,10 +1,12 @@ /** @jsx withSlots */ import * as React from 'react'; -import type { ExpanderType, ExpanderProps, ExpanderViewProps } from './Expander.types'; -import { expanderName } from './Expander.types'; + +import { ensureNativeComponent } from '@fluentui-react-native/component-cache'; import type { UseSlots} from '@fluentui-react-native/framework'; import { compose, mergeProps, withSlots, buildProps } from '@fluentui-react-native/framework'; -import { ensureNativeComponent } from '@fluentui-react-native/component-cache'; + +import type { ExpanderType, ExpanderProps, ExpanderViewProps } from './Expander.types'; +import { expanderName } from './Expander.types'; const ExpanderComponent = ensureNativeComponent('ExpanderView'); diff --git a/packages/experimental/MenuButton/src/MenuButton.styling.tsx b/packages/experimental/MenuButton/src/MenuButton.styling.tsx index 903a99a5e5..c60df90304 100644 --- a/packages/experimental/MenuButton/src/MenuButton.styling.tsx +++ b/packages/experimental/MenuButton/src/MenuButton.styling.tsx @@ -1,4 +1,5 @@ import type { UseStylingOptions } from '@fluentui-react-native/framework'; + import type { MenuButtonProps, MenuButtonSlotProps, MenuButtonTokens } from './MenuButton.types'; import { menuButtonName } from './MenuButton.types'; diff --git a/packages/experimental/MenuButton/src/MenuButton.tsx b/packages/experimental/MenuButton/src/MenuButton.tsx index 97521f2525..5bc4ba90df 100644 --- a/packages/experimental/MenuButton/src/MenuButton.tsx +++ b/packages/experimental/MenuButton/src/MenuButton.tsx @@ -1,14 +1,15 @@ /** @jsx withSlots */ import React, { useRef, useState, useCallback } from 'react'; + import { Button } from '@fluentui-react-native/experimental-button'; import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, withSlots } from '@fluentui-react-native/framework'; -import { stylingSettings } from './MenuButton.styling'; -import { renderContextualMenu } from './renderContextualMenu'; import { SvgXml } from 'react-native-svg'; +import { stylingSettings } from './MenuButton.styling'; import type { MenuButtonProps, MenuButtonType } from './MenuButton.types'; import { menuButtonName } from './MenuButton.types'; +import { renderContextualMenu } from './renderContextualMenu'; const defaultIconColor = '#616161'; const primaryIconColor = '#ffffff'; diff --git a/packages/experimental/MenuButton/src/MenuButton.types.ts b/packages/experimental/MenuButton/src/MenuButton.types.ts index 8002464415..319a3fec1b 100644 --- a/packages/experimental/MenuButton/src/MenuButton.types.ts +++ b/packages/experimental/MenuButton/src/MenuButton.types.ts @@ -1,6 +1,6 @@ import type { ContextualMenuItemProps, ContextualMenuProps, SubmenuProps } from '@fluentui-react-native/contextual-menu'; -import type { FontTokens, IForegroundColorTokens, IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens'; import type { ButtonProps } from '@fluentui-react-native/experimental-button'; +import type { FontTokens, IForegroundColorTokens, IBackgroundColorTokens, IBorderTokens } from '@fluentui-react-native/tokens'; import type { SvgProps, XmlProps } from 'react-native-svg'; export const menuButtonName = 'MenuButton'; diff --git a/packages/experimental/MenuButton/src/__tests__/MenuButton.test.tsx b/packages/experimental/MenuButton/src/__tests__/MenuButton.test.tsx index a0ff8dbf5c..d049e64555 100644 --- a/packages/experimental/MenuButton/src/__tests__/MenuButton.test.tsx +++ b/packages/experimental/MenuButton/src/__tests__/MenuButton.test.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; + +import * as renderer from 'react-test-renderer'; + import type { MenuButtonItemProps } from '..'; import { MenuButton } from '..'; -import * as renderer from 'react-test-renderer'; it('ContextualMenu default', () => { const menuItems: MenuButtonItemProps[] = [ diff --git a/packages/experimental/MenuButton/src/renderContextualMenu.tsx b/packages/experimental/MenuButton/src/renderContextualMenu.tsx index 21cd64380a..bae1e3941e 100644 --- a/packages/experimental/MenuButton/src/renderContextualMenu.tsx +++ b/packages/experimental/MenuButton/src/renderContextualMenu.tsx @@ -1,7 +1,9 @@ /* @jsxFrag React.Fragment */ import * as React from 'react'; + import type { ContextualMenuProps } from '@fluentui-react-native/contextual-menu'; import { ContextualMenu, ContextualMenuItem, SubmenuItem, Submenu } from '@fluentui-react-native/contextual-menu'; + import type { MenuButtonItemProps } from './MenuButton.types'; export const renderContextualMenu = (contextualMenu: ContextualMenuProps, menuItems: MenuButtonItemProps[]): JSX.Element => { diff --git a/packages/experimental/NativeFontMetrics/src/NativeFontMetrics.ios.ts b/packages/experimental/NativeFontMetrics/src/NativeFontMetrics.ios.ts index 012f6c4dd4..2abc01419f 100644 --- a/packages/experimental/NativeFontMetrics/src/NativeFontMetrics.ios.ts +++ b/packages/experimental/NativeFontMetrics/src/NativeFontMetrics.ios.ts @@ -1,4 +1,5 @@ import { NativeModules } from 'react-native'; + import type { ScaleFactors, TextStyle } from './NativeFontMetrics.types'; export const NativeFontMetrics = NativeModules.FRNFontMetrics; diff --git a/packages/experimental/NativeFontMetrics/src/fontMetrics.ios.ts b/packages/experimental/NativeFontMetrics/src/fontMetrics.ios.ts index 0f39060dbc..cd48e61702 100644 --- a/packages/experimental/NativeFontMetrics/src/fontMetrics.ios.ts +++ b/packages/experimental/NativeFontMetrics/src/fontMetrics.ios.ts @@ -1,4 +1,5 @@ import { NativeEventEmitter } from 'react-native'; + import NativeFontMetrics from './NativeFontMetrics'; import type { FontMetrics, ScaleFactors } from './NativeFontMetrics.types'; diff --git a/packages/experimental/NativeFontMetrics/src/useFontMetrics.ios.ts b/packages/experimental/NativeFontMetrics/src/useFontMetrics.ios.ts index ad09c149f5..7837f3f7e0 100644 --- a/packages/experimental/NativeFontMetrics/src/useFontMetrics.ios.ts +++ b/packages/experimental/NativeFontMetrics/src/useFontMetrics.ios.ts @@ -1,6 +1,8 @@ import { useMemo } from 'react'; import { NativeEventEmitter } from 'react-native'; + import { useSubscription } from 'use-subscription'; + import { fontMetrics } from './fontMetrics'; import NativeFontMetrics from './NativeFontMetrics'; import type { ScaleFactors } from './NativeFontMetrics.types'; diff --git a/packages/experimental/Popover/src/Popover.tsx b/packages/experimental/Popover/src/Popover.tsx index 86726f8b4f..6ac6be691b 100644 --- a/packages/experimental/Popover/src/Popover.tsx +++ b/packages/experimental/Popover/src/Popover.tsx @@ -1,9 +1,10 @@ /** @jsx withSlots */ -import type { PopoverProps, PopoverTokens } from './Popover.types'; -import { popoverName } from './Popover.types'; import type { UseTokens } from '@fluentui-react-native/framework'; import { compressible, buildUseTokens } from '@fluentui-react-native/framework'; +import type { PopoverProps, PopoverTokens } from './Popover.types'; +import { popoverName } from './Popover.types'; + const usePopoverTokens = buildUseTokens(() => ({}), popoverName); export const Popover = compressible((_props: PopoverProps, _useTokens: UseTokens) => { diff --git a/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts b/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts index 7dae3af06e..7e63cd5e91 100644 --- a/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts +++ b/packages/experimental/RadioGroup/src/Radio/Radio.styling.ts @@ -1,10 +1,11 @@ -import type { RadioTokens, RadioSlotProps, RadioProps } from './Radio.types'; -import { radioName } from './Radio.types'; import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; -import { defaultRadioTokens } from './RadioTokens'; import { fontStyles, borderStyles } from '@fluentui-react-native/tokens'; +import type { RadioTokens, RadioSlotProps, RadioProps } from './Radio.types'; +import { radioName } from './Radio.types'; +import { defaultRadioTokens } from './RadioTokens'; + export const radioStates: (keyof RadioTokens)[] = ['labelPositionBelow', 'focused', 'hovered', 'pressed', 'selected', 'disabled']; export const stylingSettings: UseStylingOptions = { diff --git a/packages/experimental/RadioGroup/src/Radio/Radio.tsx b/packages/experimental/RadioGroup/src/Radio/Radio.tsx index f1c7fa2881..e15bd68098 100644 --- a/packages/experimental/RadioGroup/src/Radio/Radio.tsx +++ b/packages/experimental/RadioGroup/src/Radio/Radio.tsx @@ -1,13 +1,15 @@ /** @jsx withSlots */ import { Platform, Pressable, View } from 'react-native'; -import type { RadioType, RadioProps } from './Radio.types'; -import { radioName } from './Radio.types'; -import { TextV1 as Text } from '@fluentui-react-native/text'; -import { stylingSettings } from './Radio.styling'; + import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework'; -import { useRadio } from './useRadio'; import type { PressableState } from '@fluentui-react-native/interactive-hooks'; +import { TextV1 as Text } from '@fluentui-react-native/text'; + +import { stylingSettings } from './Radio.styling'; +import type { RadioType, RadioProps } from './Radio.types'; +import { radioName } from './Radio.types'; +import { useRadio } from './useRadio'; /** * A function which determines if a set of styles should be applied to the component given the current state and props of the Radio. diff --git a/packages/experimental/RadioGroup/src/Radio/Radio.types.ts b/packages/experimental/RadioGroup/src/Radio/Radio.types.ts index eca9f7b872..e5c129845a 100644 --- a/packages/experimental/RadioGroup/src/Radio/Radio.types.ts +++ b/packages/experimental/RadioGroup/src/Radio/Radio.types.ts @@ -1,4 +1,8 @@ +import type { ColorValue, ViewStyle } from 'react-native'; + import type { IViewProps } from '@fluentui-react-native/adapters'; +import type { Variant } from '@fluentui-react-native/framework'; +import type { IFocusable, PressablePropsExtended, PressableState } from '@fluentui-react-native/interactive-hooks'; import type { TextProps } from '@fluentui-react-native/text'; import type { FontTokens, @@ -7,9 +11,6 @@ import type { IBorderTokens, IColorTokens, } from '@fluentui-react-native/tokens'; -import type { IFocusable, PressablePropsExtended, PressableState } from '@fluentui-react-native/interactive-hooks'; -import type { ColorValue, ViewStyle } from 'react-native'; -import type { Variant } from '@fluentui-react-native/framework'; export const radioName = 'Radio'; diff --git a/packages/experimental/RadioGroup/src/Radio/RadioExperimental.test.tsx b/packages/experimental/RadioGroup/src/Radio/RadioExperimental.test.tsx index 558bf6d081..93353952d8 100644 --- a/packages/experimental/RadioGroup/src/Radio/RadioExperimental.test.tsx +++ b/packages/experimental/RadioGroup/src/Radio/RadioExperimental.test.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; -import { Radio } from './Radio'; -import * as renderer from 'react-test-renderer'; + import { /* checkRenderConsistency,*/ checkReRender } from '@fluentui-react-native/test-tools'; +import * as renderer from 'react-test-renderer'; + +import { Radio } from './Radio'; describe('Radio component tests', () => { it('Radio default', () => { diff --git a/packages/experimental/RadioGroup/src/Radio/RadioTokens.android.ts b/packages/experimental/RadioGroup/src/Radio/RadioTokens.android.ts index 573fe5602a..bdd722d499 100644 --- a/packages/experimental/RadioGroup/src/Radio/RadioTokens.android.ts +++ b/packages/experimental/RadioGroup/src/Radio/RadioTokens.android.ts @@ -1,6 +1,7 @@ import type { Theme } from '@fluentui-react-native/framework'; -import type { TokenSettings } from '@fluentui-react-native/use-styling'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { RadioTokens } from './Radio.types'; export const defaultRadioTokens: TokenSettings = (t: Theme) => diff --git a/packages/experimental/RadioGroup/src/Radio/RadioTokens.ios.ts b/packages/experimental/RadioGroup/src/Radio/RadioTokens.ios.ts index e64678a9e2..233a1cf536 100644 --- a/packages/experimental/RadioGroup/src/Radio/RadioTokens.ios.ts +++ b/packages/experimental/RadioGroup/src/Radio/RadioTokens.ios.ts @@ -1,6 +1,7 @@ import type { Theme } from '@fluentui-react-native/framework'; -import type { TokenSettings } from '@fluentui-react-native/use-styling'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { RadioTokens } from './Radio.types'; // A copy of RadioTokens.android.ts, these are expected to change in the future. diff --git a/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts b/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts index 3938a7fba5..0af2c4ee7d 100644 --- a/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts +++ b/packages/experimental/RadioGroup/src/Radio/RadioTokens.ts @@ -1,6 +1,7 @@ import type { Theme } from '@fluentui-react-native/framework'; -import type { TokenSettings } from '@fluentui-react-native/use-styling'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { RadioTokens } from './Radio.types'; export const defaultRadioTokens: TokenSettings = (t: Theme) => diff --git a/packages/experimental/RadioGroup/src/Radio/useRadio.ts b/packages/experimental/RadioGroup/src/Radio/useRadio.ts index 1e876e4c65..d2bf91ed54 100644 --- a/packages/experimental/RadioGroup/src/Radio/useRadio.ts +++ b/packages/experimental/RadioGroup/src/Radio/useRadio.ts @@ -1,10 +1,12 @@ -import type { RadioProps, RadioInfo } from './Radio.types'; import * as React from 'react'; -import { useRadioGroupContext } from '../RadioGroup/radioGroupContext'; -import { usePressableState, useOnPressWithFocus, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; -import { memoize } from '@fluentui-react-native/framework'; import type { AccessibilityState } from 'react-native'; +import { memoize } from '@fluentui-react-native/framework'; +import { usePressableState, useOnPressWithFocus, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; + +import type { RadioProps, RadioInfo } from './Radio.types'; +import { useRadioGroupContext } from '../RadioGroup/radioGroupContext'; + const defaultAccessibilityActions = [{ name: 'Select' }]; export const useRadio = (props: RadioProps): RadioInfo => { diff --git a/packages/experimental/RadioGroup/src/Radio/useRadio.win32.ts b/packages/experimental/RadioGroup/src/Radio/useRadio.win32.ts index 89ca173a0e..d9f52b99a2 100644 --- a/packages/experimental/RadioGroup/src/Radio/useRadio.win32.ts +++ b/packages/experimental/RadioGroup/src/Radio/useRadio.win32.ts @@ -1,12 +1,14 @@ -import type { RadioProps, RadioInfo } from './Radio.types'; import * as React from 'react'; -import { useRadioGroupContext } from '../RadioGroup/radioGroupContext'; -import type { KeyPressEvent } from '@fluentui-react-native/interactive-hooks'; -import { usePressableState, useOnPressWithFocus, useViewCommandFocus, useKeyDownProps } from '@fluentui-react-native/interactive-hooks'; -import { memoize } from '@fluentui-react-native/framework'; import type { AccessibilityState } from 'react-native'; import { I18nManager } from 'react-native'; +import { memoize } from '@fluentui-react-native/framework'; +import type { KeyPressEvent } from '@fluentui-react-native/interactive-hooks'; +import { usePressableState, useOnPressWithFocus, useViewCommandFocus, useKeyDownProps } from '@fluentui-react-native/interactive-hooks'; + +import type { RadioProps, RadioInfo } from './Radio.types'; +import { useRadioGroupContext } from '../RadioGroup/radioGroupContext'; + const defaultAccessibilityActions = [{ name: 'Select' }]; enum DirectionalArrowKeys { diff --git a/packages/experimental/RadioGroup/src/RadioGroup/RadioGroup.styling.ts b/packages/experimental/RadioGroup/src/RadioGroup/RadioGroup.styling.ts index 7d46907daf..72fa1cbcbf 100644 --- a/packages/experimental/RadioGroup/src/RadioGroup/RadioGroup.styling.ts +++ b/packages/experimental/RadioGroup/src/RadioGroup/RadioGroup.styling.ts @@ -1,10 +1,11 @@ -import type { RadioGroupTokens, RadioGroupSlotProps, RadioGroupProps } from './RadioGroup.types'; -import { radioGroupName } from './RadioGroup.types'; import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; -import { defaultRadioGroupTokens } from './RadioGroupTokens'; import { fontStyles } from '@fluentui-react-native/tokens'; +import type { RadioGroupTokens, RadioGroupSlotProps, RadioGroupProps } from './RadioGroup.types'; +import { radioGroupName } from './RadioGroup.types'; +import { defaultRadioGroupTokens } from './RadioGroupTokens'; + export const radioGroupStates: (keyof RadioGroupTokens)[] = ['isHorizontal', 'disabled']; export const stylingSettings: UseStylingOptions = { diff --git a/packages/experimental/RadioGroup/src/RadioGroup/RadioGroup.tsx b/packages/experimental/RadioGroup/src/RadioGroup/RadioGroup.tsx index c045b7899d..7f027bfd99 100644 --- a/packages/experimental/RadioGroup/src/RadioGroup/RadioGroup.tsx +++ b/packages/experimental/RadioGroup/src/RadioGroup/RadioGroup.tsx @@ -1,15 +1,17 @@ /** @jsx withSlots */ import * as React from 'react'; import { Platform, View } from 'react-native'; -import type { RadioGroupType, RadioGroupProps, RadioGroupState } from './RadioGroup.types'; -import { radioGroupName } from './RadioGroup.types'; -import { TextV1 as Text } from '@fluentui-react-native/text'; + import { FocusZone } from '@fluentui-react-native/focus-zone'; -import { stylingSettings } from './RadioGroup.styling'; import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework'; -import { useRadioGroup } from './useRadioGroup'; +import { TextV1 as Text } from '@fluentui-react-native/text'; + +import { stylingSettings } from './RadioGroup.styling'; +import type { RadioGroupType, RadioGroupProps, RadioGroupState } from './RadioGroup.types'; +import { radioGroupName } from './RadioGroup.types'; import { RadioGroupProvider } from './radioGroupContext'; +import { useRadioGroup } from './useRadioGroup'; import { useRadioGroupContextValue } from './useRadioGroupContextValue'; /** diff --git a/packages/experimental/RadioGroup/src/RadioGroup/RadioGroup.types.ts b/packages/experimental/RadioGroup/src/RadioGroup/RadioGroup.types.ts index 5b602e797b..7dcb119324 100644 --- a/packages/experimental/RadioGroup/src/RadioGroup/RadioGroup.types.ts +++ b/packages/experimental/RadioGroup/src/RadioGroup/RadioGroup.types.ts @@ -1,8 +1,9 @@ +import type { ColorValue, ViewStyle } from 'react-native'; + import type { IViewProps } from '@fluentui-react-native/adapters'; +import type { FocusZoneProps } from '@fluentui-react-native/focus-zone'; import type { TextProps } from '@fluentui-react-native/text'; import type { IForegroundColorTokens, FontTokens } from '@fluentui-react-native/tokens'; -import type { FocusZoneProps } from '@fluentui-react-native/focus-zone'; -import type { ColorValue, ViewStyle } from 'react-native'; export const radioGroupName = 'RadioGroup'; diff --git a/packages/experimental/RadioGroup/src/RadioGroup/RadioGroupExperimental.test.tsx b/packages/experimental/RadioGroup/src/RadioGroup/RadioGroupExperimental.test.tsx index da843f4103..62e12b4ab0 100644 --- a/packages/experimental/RadioGroup/src/RadioGroup/RadioGroupExperimental.test.tsx +++ b/packages/experimental/RadioGroup/src/RadioGroup/RadioGroupExperimental.test.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; + +import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools'; +import * as renderer from 'react-test-renderer'; + import { RadioGroup } from './RadioGroup'; import { Radio } from '../Radio/Radio'; -import * as renderer from 'react-test-renderer'; -import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools'; jest.useFakeTimers(); diff --git a/packages/experimental/RadioGroup/src/RadioGroup/RadioGroupTokens.mobile.ts b/packages/experimental/RadioGroup/src/RadioGroup/RadioGroupTokens.mobile.ts index 9ea3670962..368f5beec8 100644 --- a/packages/experimental/RadioGroup/src/RadioGroup/RadioGroupTokens.mobile.ts +++ b/packages/experimental/RadioGroup/src/RadioGroup/RadioGroupTokens.mobile.ts @@ -1,7 +1,8 @@ import type { Theme } from '@fluentui-react-native/framework'; -import type { TokenSettings } from '@fluentui-react-native/use-styling'; -import type { RadioGroupTokens } from './RadioGroup.types'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import type { TokenSettings } from '@fluentui-react-native/use-styling'; + +import type { RadioGroupTokens } from './RadioGroup.types'; export const defaultRadioGroupTokens: TokenSettings = (t: Theme) => ({ diff --git a/packages/experimental/RadioGroup/src/RadioGroup/RadioGroupTokens.ts b/packages/experimental/RadioGroup/src/RadioGroup/RadioGroupTokens.ts index 57178ca0bc..bfb078441a 100644 --- a/packages/experimental/RadioGroup/src/RadioGroup/RadioGroupTokens.ts +++ b/packages/experimental/RadioGroup/src/RadioGroup/RadioGroupTokens.ts @@ -1,7 +1,8 @@ import type { Theme } from '@fluentui-react-native/framework'; -import type { TokenSettings } from '@fluentui-react-native/use-styling'; -import type { RadioGroupTokens } from './RadioGroup.types'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import type { TokenSettings } from '@fluentui-react-native/use-styling'; + +import type { RadioGroupTokens } from './RadioGroup.types'; export const defaultRadioGroupTokens: TokenSettings = (t: Theme) => ({ diff --git a/packages/experimental/RadioGroup/src/RadioGroup/radioGroupContext.ts b/packages/experimental/RadioGroup/src/RadioGroup/radioGroupContext.ts index 5c7454262d..15f553d8ab 100644 --- a/packages/experimental/RadioGroup/src/RadioGroup/radioGroupContext.ts +++ b/packages/experimental/RadioGroup/src/RadioGroup/radioGroupContext.ts @@ -1,4 +1,5 @@ import * as React from 'react'; + import type { RadioGroupState } from './RadioGroup.types'; /** diff --git a/packages/experimental/RadioGroup/src/RadioGroup/useRadioGroup.ts b/packages/experimental/RadioGroup/src/RadioGroup/useRadioGroup.ts index 5c0250b5c0..73e536d9df 100644 --- a/packages/experimental/RadioGroup/src/RadioGroup/useRadioGroup.ts +++ b/packages/experimental/RadioGroup/src/RadioGroup/useRadioGroup.ts @@ -1,10 +1,12 @@ import * as React from 'react'; -import type { RadioGroupInfo, RadioGroupProps, RadioGroupState } from './RadioGroup.types'; -import { useSelectedKey as useValue } from '@fluentui-react-native/interactive-hooks'; import type { View } from 'react-native'; -import { memoize } from '@fluentui-react-native/framework'; import type { AccessibilityState } from 'react-native'; +import { memoize } from '@fluentui-react-native/framework'; +import { useSelectedKey as useValue } from '@fluentui-react-native/interactive-hooks'; + +import type { RadioGroupInfo, RadioGroupProps, RadioGroupState } from './RadioGroup.types'; + export const useRadioGroup = (props: RadioGroupProps): RadioGroupInfo => { const { value, defaultValue, disabled, required, layout, onChange, isCircularNavigation, accessibilityLabel, label, accessibilityState } = props; diff --git a/packages/experimental/RadioGroup/src/RadioGroup/useRadioGroupContextValue.ts b/packages/experimental/RadioGroup/src/RadioGroup/useRadioGroupContextValue.ts index ed6de5f96f..520eb95d21 100644 --- a/packages/experimental/RadioGroup/src/RadioGroup/useRadioGroupContextValue.ts +++ b/packages/experimental/RadioGroup/src/RadioGroup/useRadioGroupContextValue.ts @@ -1,5 +1,5 @@ -import type { RadioGroupContextValue } from './radioGroupContext'; import type { RadioGroupState } from './RadioGroup.types'; +import type { RadioGroupContextValue } from './radioGroupContext'; export const useRadioGroupContextValue = (state: RadioGroupState): RadioGroupContextValue => { return { ...state }; diff --git a/packages/experimental/Shadow/src/Shadow.tsx b/packages/experimental/Shadow/src/Shadow.tsx index b2fb4341ad..4fb1ba091c 100644 --- a/packages/experimental/Shadow/src/Shadow.tsx +++ b/packages/experimental/Shadow/src/Shadow.tsx @@ -1,13 +1,15 @@ import * as React from 'react'; import type { ViewStyle } from 'react-native'; import { View } from 'react-native'; -import type { ShadowProps } from './Shadow.types'; -import { shadowName } from './Shadow.types'; + import { mergeProps, stagedComponent } from '@fluentui-react-native/framework'; -import { getShadowTokenStyleSet } from './shadowStyle'; import { memoize } from '@fluentui-react-native/framework'; import type { ShadowToken } from '@fluentui-react-native/theme-types'; +import type { ShadowProps } from './Shadow.types'; +import { shadowName } from './Shadow.types'; +import { getShadowTokenStyleSet } from './shadowStyle'; + export const Shadow = stagedComponent((props: ShadowProps) => { return (final: ShadowProps, children: React.ReactNode) => { if (!props.shadowToken) { diff --git a/packages/experimental/Shadow/src/Shadow.types.ts b/packages/experimental/Shadow/src/Shadow.types.ts index 1ff3f94674..0822798c00 100644 --- a/packages/experimental/Shadow/src/Shadow.types.ts +++ b/packages/experimental/Shadow/src/Shadow.types.ts @@ -1,6 +1,7 @@ -import type { ShadowToken } from '@fluentui-react-native/theme-types'; import type { ViewProps } from 'react-native'; +import type { ShadowToken } from '@fluentui-react-native/theme-types'; + export const shadowName = 'Shadow'; export interface ShadowProps extends ViewProps { diff --git a/packages/experimental/Shadow/src/__tests__/Shadow.test.tsx b/packages/experimental/Shadow/src/__tests__/Shadow.test.tsx index 64565601fd..713a203311 100644 --- a/packages/experimental/Shadow/src/__tests__/Shadow.test.tsx +++ b/packages/experimental/Shadow/src/__tests__/Shadow.test.tsx @@ -1,10 +1,12 @@ import * as React from 'react'; import { Text, View } from 'react-native'; -import { Shadow } from '../Shadow'; + import { mergeStyles, useFluentTheme } from '@fluentui-react-native/framework'; -import * as renderer from 'react-test-renderer'; -import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools'; import { Pressable } from '@fluentui-react-native/pressable'; +import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools'; +import * as renderer from 'react-test-renderer'; + +import { Shadow } from '../Shadow'; const backgroundColor = { backgroundColor: 'red' }; interface ShadowTestProps { diff --git a/packages/experimental/Shadow/src/shadowStyle.ts b/packages/experimental/Shadow/src/shadowStyle.ts index 7ffdab65d2..03513ce91c 100644 --- a/packages/experimental/Shadow/src/shadowStyle.ts +++ b/packages/experimental/Shadow/src/shadowStyle.ts @@ -1,8 +1,9 @@ -import { memoize } from '@fluentui-react-native/framework'; -import type { ShadowToken } from '@fluentui-react-native/theme-types'; import type { ColorValue } from 'react-native'; import { Platform } from 'react-native'; +import { memoize } from '@fluentui-react-native/framework'; +import type { ShadowToken } from '@fluentui-react-native/theme-types'; + /** * For iOS/macOS, the blur property from the token is not the same as the shadow radius value, * it needs to be divided by 2 to achieve the same effect. diff --git a/packages/experimental/Shimmer/src/Shimmer.styling.ts b/packages/experimental/Shimmer/src/Shimmer.styling.ts index ad89e7c1cd..94183fb728 100644 --- a/packages/experimental/Shimmer/src/Shimmer.styling.ts +++ b/packages/experimental/Shimmer/src/Shimmer.styling.ts @@ -1,5 +1,6 @@ import type { UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; + import type { ShimmerProps, ShimmerSlotProps, ShimmerTokens } from './Shimmer.types'; import { shimmerName } from './Shimmer.types'; import { defaultShimmerTokens } from './ShimmerTokens'; diff --git a/packages/experimental/Shimmer/src/Shimmer.styling.win32.ts b/packages/experimental/Shimmer/src/Shimmer.styling.win32.ts index 9910b29edb..fc2dd705f6 100644 --- a/packages/experimental/Shimmer/src/Shimmer.styling.win32.ts +++ b/packages/experimental/Shimmer/src/Shimmer.styling.win32.ts @@ -1,5 +1,6 @@ import type { UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; + import type { ShimmerProps, ShimmerTokens } from './Shimmer.types'; import { shimmerName } from './Shimmer.types'; import type { ShimmerSlotProps } from './Shimmer.types.win32'; diff --git a/packages/experimental/Shimmer/src/Shimmer.test.tsx b/packages/experimental/Shimmer/src/Shimmer.test.tsx index 902043fc0a..986dad5004 100644 --- a/packages/experimental/Shimmer/src/Shimmer.test.tsx +++ b/packages/experimental/Shimmer/src/Shimmer.test.tsx @@ -1,5 +1,7 @@ import * as React from 'react'; + import * as renderer from 'react-test-renderer'; + import { Shimmer } from './Shimmer'; import type { ShimmerCircleElement, ShimmerRectElement } from './Shimmer.types'; diff --git a/packages/experimental/Shimmer/src/Shimmer.tsx b/packages/experimental/Shimmer/src/Shimmer.tsx index bb3539e076..9841e4173a 100644 --- a/packages/experimental/Shimmer/src/Shimmer.tsx +++ b/packages/experimental/Shimmer/src/Shimmer.tsx @@ -1,14 +1,16 @@ /** @jsx withSlots */ import { useRef, useEffect, useMemo, useCallback } from 'react'; -import type { TransformObject } from 'react-native-svg'; -import { Circle, ClipPath, Defs, LinearGradient, Rect, Stop, Svg, G } from 'react-native-svg'; -import type { ShimmerProps, ShimmerType } from './Shimmer.types'; -import { shimmerName } from './Shimmer.types'; +import { Animated, I18nManager } from 'react-native'; + import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, mergeProps, withSlots, buildUseStyling } from '@fluentui-react-native/framework'; -import { Animated, I18nManager } from 'react-native'; -import { stylingSettings } from './Shimmer.styling'; import assertNever from 'assert-never'; +import type { TransformObject } from 'react-native-svg'; +import { Circle, ClipPath, Defs, LinearGradient, Rect, Stop, Svg, G } from 'react-native-svg'; + +import { stylingSettings } from './Shimmer.styling'; +import type { ShimmerProps, ShimmerType } from './Shimmer.types'; +import { shimmerName } from './Shimmer.types'; const useStyling = buildUseStyling(stylingSettings); export const Shimmer = compose({ diff --git a/packages/experimental/Shimmer/src/Shimmer.types.shared.ts b/packages/experimental/Shimmer/src/Shimmer.types.shared.ts index 2c8831fc8f..ec0af9e1c3 100644 --- a/packages/experimental/Shimmer/src/Shimmer.types.shared.ts +++ b/packages/experimental/Shimmer/src/Shimmer.types.shared.ts @@ -1,6 +1,7 @@ -import type { SvgProps } from 'react-native-svg'; import type { ColorValue, ViewProps } from 'react-native'; + import type { IBackgroundColorTokens } from '@fluentui-react-native/tokens'; +import type { SvgProps } from 'react-native-svg'; export const shimmerName = 'Shimmer'; diff --git a/packages/experimental/Shimmer/src/Shimmer.types.win32.ts b/packages/experimental/Shimmer/src/Shimmer.types.win32.ts index f5aa2deba6..5b5058206d 100644 --- a/packages/experimental/Shimmer/src/Shimmer.types.win32.ts +++ b/packages/experimental/Shimmer/src/Shimmer.types.win32.ts @@ -1,4 +1,5 @@ import type { ViewProps } from 'react-native'; + import type { ShimmerProps, ShimmerTokens } from './Shimmer.types.shared'; export { ShimmerProps, ShimmerTokens }; export { shimmerName, ShimmerRectElement, ShimmerElementTypes, ShimmerCircleElement } from './Shimmer.types.shared'; diff --git a/packages/experimental/Shimmer/src/Shimmer.win32.tsx b/packages/experimental/Shimmer/src/Shimmer.win32.tsx index 66479b9c2c..09fcd883cc 100644 --- a/packages/experimental/Shimmer/src/Shimmer.win32.tsx +++ b/packages/experimental/Shimmer/src/Shimmer.win32.tsx @@ -1,18 +1,20 @@ /** @jsx withSlots */ +import { View } from 'react-native'; + import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, mergeProps } from '@fluentui-react-native/framework'; -import { View } from 'react-native'; +import { withSlots } from '@fluentui-react-native/framework'; +import { assertNever } from 'assert-never'; import type { SvgProps } from 'react-native-svg'; import { ClipPath, Defs, LinearGradient, Path, Rect, Stop, Svg } from 'react-native-svg'; + +import { RCTNativeAnimatedShimmer } from './consts.win32'; import { stylingSettings } from './Shimmer.styling.win32'; import type { ShimmerElementTypes, ShimmerProps, ShimmerCircleElement, ShimmerRectElement } from './Shimmer.types.shared'; export { ShimmerCircleElement, ShimmerRectElement }; import { shimmerName } from './Shimmer.types.shared'; import type { ClippingMaskProps, ShimmerType, ShimmerWaveProps } from './Shimmer.types.win32'; -import { RCTNativeAnimatedShimmer } from './consts.win32'; import { convertRectToSvgPath, convertCircleToSvgPath } from './SvgShapeToPath'; -import { withSlots } from '@fluentui-react-native/framework'; -import { assertNever } from 'assert-never'; const clippingMask: React.FunctionComponent = (props: ClippingMaskProps) => { /** diff --git a/packages/experimental/Shimmer/src/ShimmerTokens.mobile.ts b/packages/experimental/Shimmer/src/ShimmerTokens.mobile.ts index 1c38f304f3..eb575a3d33 100644 --- a/packages/experimental/Shimmer/src/ShimmerTokens.mobile.ts +++ b/packages/experimental/Shimmer/src/ShimmerTokens.mobile.ts @@ -1,7 +1,8 @@ import type { Theme } from '@fluentui-react-native/framework'; -import type { ShimmerTokens } from './Shimmer.types'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; +import type { ShimmerTokens } from './Shimmer.types'; + export const defaultShimmerTokens: TokenSettings = (theme: Theme) => ({ angle: 45, diff --git a/packages/experimental/Shimmer/src/ShimmerTokens.ts b/packages/experimental/Shimmer/src/ShimmerTokens.ts index e0cb131ef0..8cf73346ef 100644 --- a/packages/experimental/Shimmer/src/ShimmerTokens.ts +++ b/packages/experimental/Shimmer/src/ShimmerTokens.ts @@ -1,7 +1,8 @@ import type { Theme } from '@fluentui-react-native/framework'; -import type { ShimmerTokens } from './Shimmer.types'; -import type { TokenSettings } from '@fluentui-react-native/use-styling'; import { getCurrentAppearance } from '@fluentui-react-native/theming-utils'; +import type { TokenSettings } from '@fluentui-react-native/use-styling'; + +import type { ShimmerTokens } from './Shimmer.types'; export const defaultShimmerTokens: TokenSettings = (theme: Theme) => ({ diff --git a/packages/experimental/Shimmer/src/ShimmerTokens.win32.ts b/packages/experimental/Shimmer/src/ShimmerTokens.win32.ts index 7f2d3a5e74..aa5ffdc418 100644 --- a/packages/experimental/Shimmer/src/ShimmerTokens.win32.ts +++ b/packages/experimental/Shimmer/src/ShimmerTokens.win32.ts @@ -1,7 +1,8 @@ import type { Theme } from '@fluentui-react-native/framework'; -import type { ShimmerTokens } from './Shimmer.types'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; +import type { ShimmerTokens } from './Shimmer.types'; + export const defaultShimmerTokens: TokenSettings = (theme: Theme) => ({ angle: 0, diff --git a/packages/experimental/Spinner/src/Spinner.android.tsx b/packages/experimental/Spinner/src/Spinner.android.tsx index 8b609d8106..ef6b32644e 100644 --- a/packages/experimental/Spinner/src/Spinner.android.tsx +++ b/packages/experimental/Spinner/src/Spinner.android.tsx @@ -2,12 +2,14 @@ import { useEffect, useCallback } from 'react'; import type { ColorValue } from 'react-native'; import { Animated, Easing, View } from 'react-native'; -import { Svg, Path } from 'react-native-svg'; -import type { UseSlots } from '@fluentui-react-native/framework'; + import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework'; +import type { UseSlots } from '@fluentui-react-native/framework'; +import { Svg, Path } from 'react-native-svg'; + +import { diameterSizeMap, lineThicknessSizeMap, stylingSettings } from './Spinner.styling'; import type { SpinnerProps, SpinnerType } from './Spinner.types'; import { spinnerName } from './Spinner.types'; -import { diameterSizeMap, lineThicknessSizeMap, stylingSettings } from './Spinner.styling'; const getSpinnerPath = (diameter: number, width: number, color: ColorValue) => { const start = { diff --git a/packages/experimental/Spinner/src/Spinner.styling.ts b/packages/experimental/Spinner/src/Spinner.styling.ts index d285bd8634..7319a9ae51 100644 --- a/packages/experimental/Spinner/src/Spinner.styling.ts +++ b/packages/experimental/Spinner/src/Spinner.styling.ts @@ -1,5 +1,6 @@ import type { UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; + import type { SpinnerProps, SpinnerSlotProps, SpinnerTokens } from './Spinner.types'; import { spinnerName } from './Spinner.types'; import { defaultSpinnerTokens } from './SpinnerTokens'; diff --git a/packages/experimental/Spinner/src/Spinner.tsx b/packages/experimental/Spinner/src/Spinner.tsx index 3b9922ec13..14ab7d11a9 100644 --- a/packages/experimental/Spinner/src/Spinner.tsx +++ b/packages/experimental/Spinner/src/Spinner.tsx @@ -1,12 +1,14 @@ /** @jsx withSlots */ import { View } from 'react-native'; -import { TextV1 as Text } from '@fluentui-react-native/text'; -import { Svg } from 'react-native-svg'; + import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework'; +import { TextV1 as Text } from '@fluentui-react-native/text'; +import { Svg } from 'react-native-svg'; + +import { RCTNativeAnimatedSpinner } from './consts.win32'; import type { SpinnerProps, SpinnerType } from './Spinner.types'; import { spinnerName } from './Spinner.types'; -import { RCTNativeAnimatedSpinner } from './consts.win32'; /* TODO: Implement Spinner with following slots */ export const Spinner = compose({ diff --git a/packages/experimental/Spinner/src/Spinner.types.ts b/packages/experimental/Spinner/src/Spinner.types.ts index 5d0ea7ff59..2878824a7a 100644 --- a/packages/experimental/Spinner/src/Spinner.types.ts +++ b/packages/experimental/Spinner/src/Spinner.types.ts @@ -1,4 +1,5 @@ import type { Animated, TextProps, ViewProps } from 'react-native'; + import type { SvgProps } from 'react-native-svg'; export const spinnerName = 'Spinner'; diff --git a/packages/experimental/Spinner/src/SpinnerTokens.android.ts b/packages/experimental/Spinner/src/SpinnerTokens.android.ts index f22591ab93..3899c563f1 100644 --- a/packages/experimental/Spinner/src/SpinnerTokens.android.ts +++ b/packages/experimental/Spinner/src/SpinnerTokens.android.ts @@ -1,8 +1,10 @@ -import type { Theme } from '@fluentui-react-native/framework'; -import type { TokenSettings } from '@fluentui-react-native/use-styling'; -import type { SpinnerTokens } from './Spinner.types'; -import { globalTokens } from '@fluentui-react-native/theme-tokens'; import { Appearance } from 'react-native'; + +import type { Theme } from '@fluentui-react-native/framework'; +import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import type { TokenSettings } from '@fluentui-react-native/use-styling'; + +import type { SpinnerTokens } from './Spinner.types'; export const defaultSpinnerTokens: TokenSettings = () => ({ trackColor: Appearance.getColorScheme() === 'light' ? globalTokens.color.grey56 : globalTokens.color.grey72, diff --git a/packages/experimental/Spinner/src/SpinnerTokens.ts b/packages/experimental/Spinner/src/SpinnerTokens.ts index c28033ac23..e086347010 100644 --- a/packages/experimental/Spinner/src/SpinnerTokens.ts +++ b/packages/experimental/Spinner/src/SpinnerTokens.ts @@ -1,7 +1,9 @@ +import { Appearance } from 'react-native'; + import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { SpinnerTokens } from './Spinner.types'; -import { Appearance } from 'react-native'; export const defaultSpinnerTokens: TokenSettings = () => ({ diff --git a/packages/experimental/Stack/src/Stack.styling.ts b/packages/experimental/Stack/src/Stack.styling.ts index 86f6bd92be..5fbfc6b06d 100644 --- a/packages/experimental/Stack/src/Stack.styling.ts +++ b/packages/experimental/Stack/src/Stack.styling.ts @@ -1,12 +1,14 @@ -import type { Alignment, StackSlotProps, StackTokens, StackProps, StackTokenProps } from './Stack.types'; -import { stackName } from './Stack.types'; -import { parseGap, parsePadding } from './StackUtils'; import type { ViewStyle, ViewProps } from 'react-native'; + import type { Theme } from '@fluentui-react-native/framework'; import type { UseStylingOptions, GetMemoValue } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; import { borderStyles } from '@fluentui-react-native/tokens'; +import { stackName } from './Stack.types'; +import type { Alignment, StackSlotProps, StackTokens, StackProps, StackTokenProps } from './Stack.types'; +import { parseGap, parsePadding } from './StackUtils'; + const nameMap: { [key: string]: Alignment } = { start: 'flex-start', end: 'flex-end', diff --git a/packages/experimental/Stack/src/Stack.tsx b/packages/experimental/Stack/src/Stack.tsx index 6d9994a54b..aa5f680591 100644 --- a/packages/experimental/Stack/src/Stack.tsx +++ b/packages/experimental/Stack/src/Stack.tsx @@ -1,14 +1,16 @@ /** @jsx withSlots */ import * as React from 'react'; -import StackItem from './StackItem/StackItem'; -import type { StackProps, StackType, StackTokens } from './Stack.types'; -import { stackName } from './Stack.types'; -import type { ViewProps } from 'react-native'; import { View } from 'react-native'; +import type { ViewProps } from 'react-native'; + import { filterViewProps } from '@fluentui-react-native/adapters'; import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, withSlots, mergeProps, getMemoCache } from '@fluentui-react-native/framework'; + import { stylingSettings } from './Stack.styling'; +import { stackName } from './Stack.types'; +import type { StackProps, StackType, StackTokens } from './Stack.types'; +import StackItem from './StackItem/StackItem'; // Needed for TS to understand that __jsiExecutorDescription exists. declare global { diff --git a/packages/experimental/Stack/src/Stack.types.ts b/packages/experimental/Stack/src/Stack.types.ts index e649990ade..8a21961cee 100644 --- a/packages/experimental/Stack/src/Stack.types.ts +++ b/packages/experimental/Stack/src/Stack.types.ts @@ -1,7 +1,9 @@ -import type { StackItemProps } from './StackItem/StackItem.types'; import type { ViewStyle, ViewProps, ColorValue } from 'react-native'; + import type { IBorderTokens, FontTokens } from '@fluentui-react-native/tokens'; +import type { StackItemProps } from './StackItem/StackItem.types'; + export const stackName = 'Stack'; /** diff --git a/packages/experimental/Stack/src/StackItem/StackItem.styles.ts b/packages/experimental/Stack/src/StackItem/StackItem.styles.ts index ff0bcce206..94cfd20195 100644 --- a/packages/experimental/Stack/src/StackItem/StackItem.styles.ts +++ b/packages/experimental/Stack/src/StackItem/StackItem.styles.ts @@ -1,8 +1,10 @@ -import type { StackItemTokens, StackItemProps, StackItemSlotProps } from './StackItem.types'; -import { stackItemName } from './StackItem.types'; +import type { ViewStyle, ViewProps } from 'react-native'; + import type { UseStylingOptions } from '@fluentui-react-native/framework'; import { getMemoCache } from '@fluentui-react-native/framework'; -import type { ViewStyle, ViewProps } from 'react-native'; + +import { stackItemName } from './StackItem.types'; +import type { StackItemTokens, StackItemProps, StackItemSlotProps } from './StackItem.types'; // styles are keyed on token values and are independent of themes or variants so just use a common cache const localCache = getMemoCache(); diff --git a/packages/experimental/Stack/src/StackItem/StackItem.tsx b/packages/experimental/Stack/src/StackItem/StackItem.tsx index b5920d3e3f..40946f86f4 100644 --- a/packages/experimental/Stack/src/StackItem/StackItem.tsx +++ b/packages/experimental/Stack/src/StackItem/StackItem.tsx @@ -1,11 +1,13 @@ /** @jsx withSlots */ import * as React from 'react'; -import type { StackItemType, StackItemProps } from './StackItem.types'; -import { stackItemName } from './StackItem.types'; +import { View } from 'react-native'; + import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, withSlots, mergeProps } from '@fluentui-react-native/framework'; -import { View } from 'react-native'; + import { stylingSettings } from './StackItem.styles'; +import { stackItemName } from './StackItem.types'; +import type { StackItemType, StackItemProps } from './StackItem.types'; export const StackItem = compose({ displayName: stackItemName, diff --git a/packages/experimental/Stack/src/StackUtils.test.win32.ts b/packages/experimental/Stack/src/StackUtils.test.win32.ts index c6356888e1..8639171646 100644 --- a/packages/experimental/Stack/src/StackUtils.test.win32.ts +++ b/packages/experimental/Stack/src/StackUtils.test.win32.ts @@ -1,6 +1,7 @@ -import { parseGap, parsePadding } from './StackUtils'; import type { Theme } from '@fluentui-react-native/framework'; +import { parseGap, parsePadding } from './StackUtils'; + describe('StackUtils', () => { describe('parseGap', () => { const theme = { diff --git a/packages/experimental/Stack/src/__tests__/Stack.test.tsx b/packages/experimental/Stack/src/__tests__/Stack.test.tsx index 1525ab5e2a..43739a340c 100644 --- a/packages/experimental/Stack/src/__tests__/Stack.test.tsx +++ b/packages/experimental/Stack/src/__tests__/Stack.test.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; -import { Stack } from '..'; + import { Text } from '@fluentui-react-native/text'; import * as renderer from 'react-test-renderer'; +import { Stack } from '..'; + it('Stack with tokens', () => { const tree = renderer .create( diff --git a/packages/experimental/Switch/src/Switch.styling.ts b/packages/experimental/Switch/src/Switch.styling.ts index 91d44de3c2..04a0241029 100644 --- a/packages/experimental/Switch/src/Switch.styling.ts +++ b/packages/experimental/Switch/src/Switch.styling.ts @@ -1,10 +1,12 @@ -import type { SwitchTokens, SwitchSlotProps, SwitchProps } from './Switch.types'; -import { switchName } from './Switch.types'; +import { Platform } from 'react-native'; + import type { UseStylingOptions, Theme } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; import { borderStyles, layoutStyles, fontStyles } from '@fluentui-react-native/tokens'; + +import { switchName } from './Switch.types'; +import type { SwitchTokens, SwitchSlotProps, SwitchProps } from './Switch.types'; import { defaultSwitchTokens } from './SwitchTokens'; -import { Platform } from 'react-native'; export const switchStates: (keyof SwitchTokens)[] = [ 'toggleOn', diff --git a/packages/experimental/Switch/src/Switch.tsx b/packages/experimental/Switch/src/Switch.tsx index 04611ba0bb..8a701ac09c 100644 --- a/packages/experimental/Switch/src/Switch.tsx +++ b/packages/experimental/Switch/src/Switch.tsx @@ -1,11 +1,13 @@ /** @jsx withSlots */ import { View, AccessibilityInfo, Pressable, Animated, Platform } from 'react-native'; -import { Text } from '@fluentui-react-native/text'; -import type { SwitchType, SwitchState, SwitchProps } from './Switch.types'; -import { switchName } from './Switch.types'; -import { stylingSettings } from './Switch.styling'; + import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework'; +import { Text } from '@fluentui-react-native/text'; + +import { stylingSettings } from './Switch.styling'; +import type { SwitchType, SwitchState, SwitchProps } from './Switch.types'; +import { switchName } from './Switch.types'; import { useSwitch } from './useSwitch'; /** diff --git a/packages/experimental/Switch/src/Switch.types.ts b/packages/experimental/Switch/src/Switch.types.ts index 96bc156652..25f17db8b3 100644 --- a/packages/experimental/Switch/src/Switch.types.ts +++ b/packages/experimental/Switch/src/Switch.types.ts @@ -1,9 +1,10 @@ import type * as React from 'react'; import type { ViewStyle, ColorValue, PressableProps } from 'react-native'; + +import type { IViewProps } from '@fluentui-react-native/adapters'; +import type { IFocusable, InteractionEvent, PressablePropsExtended, PressableState } from '@fluentui-react-native/interactive-hooks'; import type { TextProps } from '@fluentui-react-native/text'; import type { FontTokens, IBorderTokens, IColorTokens, IShadowTokens, LayoutTokens } from '@fluentui-react-native/tokens'; -import type { IFocusable, InteractionEvent, PressablePropsExtended, PressableState } from '@fluentui-react-native/interactive-hooks'; -import type { IViewProps } from '@fluentui-react-native/adapters'; export const switchName = 'Switch'; diff --git a/packages/experimental/Switch/src/SwitchTokens.mobile.ts b/packages/experimental/Switch/src/SwitchTokens.mobile.ts index ace4aec29f..43ea59b962 100644 --- a/packages/experimental/Switch/src/SwitchTokens.mobile.ts +++ b/packages/experimental/Switch/src/SwitchTokens.mobile.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { SwitchTokens } from './Switch.types'; export const defaultSwitchTokens: TokenSettings = (t: Theme) => ({ diff --git a/packages/experimental/Switch/src/SwitchTokens.ts b/packages/experimental/Switch/src/SwitchTokens.ts index 98acda736a..9dd28ddc13 100644 --- a/packages/experimental/Switch/src/SwitchTokens.ts +++ b/packages/experimental/Switch/src/SwitchTokens.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { SwitchTokens } from './Switch.types'; export const defaultSwitchTokens: TokenSettings = (t: Theme) => ({ diff --git a/packages/experimental/Switch/src/SwitchTokens.win32.ts b/packages/experimental/Switch/src/SwitchTokens.win32.ts index 0d9dbe5fcc..e3b2dc80a8 100644 --- a/packages/experimental/Switch/src/SwitchTokens.win32.ts +++ b/packages/experimental/Switch/src/SwitchTokens.win32.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { SwitchTokens } from './Switch.types'; export const defaultSwitchTokens: TokenSettings = (t: Theme) => ({ diff --git a/packages/experimental/Switch/src/__tests__/Switch.test.tsx b/packages/experimental/Switch/src/__tests__/Switch.test.tsx index 786f8fc318..4dae0c071f 100644 --- a/packages/experimental/Switch/src/__tests__/Switch.test.tsx +++ b/packages/experimental/Switch/src/__tests__/Switch.test.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; -import * as renderer from 'react-test-renderer'; -import { Switch } from '../Switch'; + import { checkReRender } from '@fluentui-react-native/test-tools'; +import * as renderer from 'react-test-renderer'; + +import { Switch } from '../Switch'; // mocks out setTimeout and other timer functions with mock functions , test will fail without this as we're using Animated API jest.useFakeTimers(); diff --git a/packages/experimental/Switch/src/useSwitch.ts b/packages/experimental/Switch/src/useSwitch.ts index ab42ccc46e..d7eb531d97 100644 --- a/packages/experimental/Switch/src/useSwitch.ts +++ b/packages/experimental/Switch/src/useSwitch.ts @@ -1,11 +1,13 @@ import * as React from 'react'; -import { usePressableState, useKeyProps, useOnPressWithFocus, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; -import type { SwitchProps, SwitchInfo, AnimationConfig } from './Switch.types'; import type { AccessibilityState, AccessibilityActionEvent } from 'react-native'; import { Animated, Platform, I18nManager } from 'react-native'; + import { memoize } from '@fluentui-react-native/framework'; +import { usePressableState, useKeyProps, useOnPressWithFocus, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; import { useAsToggleWithEvent } from '@fluentui-react-native/interactive-hooks'; +import type { SwitchProps, SwitchInfo, AnimationConfig } from './Switch.types'; + const defaultAccessibilityActions = [{ name: 'Toggle' }]; const isMobile = Platform.OS === 'android' || Platform.OS == 'ios'; diff --git a/packages/experimental/Tabs/src/Tabs.styling.ts b/packages/experimental/Tabs/src/Tabs.styling.ts index 35cef90907..295a30e47a 100644 --- a/packages/experimental/Tabs/src/Tabs.styling.ts +++ b/packages/experimental/Tabs/src/Tabs.styling.ts @@ -1,10 +1,11 @@ -import type { TabsTokens, TabsSlotProps, TabsProps } from './Tabs.types'; -import { tabsName } from './Tabs.types'; import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; import { fontStyles } from '@fluentui-react-native/tokens'; -import { defaultTabsTokens } from './TabsTokens'; + +import { tabsName } from './Tabs.types'; +import type { TabsTokens, TabsSlotProps, TabsProps } from './Tabs.types'; import { getRootMargins, getLabelMargins, getStackMargins } from './TabsMargins'; +import { defaultTabsTokens } from './TabsTokens'; export const stylingSettings: UseStylingOptions = { tokens: [defaultTabsTokens, tabsName], diff --git a/packages/experimental/Tabs/src/Tabs.tsx b/packages/experimental/Tabs/src/Tabs.tsx index 729fc72d53..5301942621 100644 --- a/packages/experimental/Tabs/src/Tabs.tsx +++ b/packages/experimental/Tabs/src/Tabs.tsx @@ -1,14 +1,16 @@ /** @jsx withSlots */ import * as React from 'react'; import { Pressable, View } from 'react-native'; -import type { TabsType, TabsProps, TabsContextData } from './Tabs.types'; -import { tabsName } from './Tabs.types'; -import { TextV1 as Text } from '@fluentui-react-native/text'; -import { stylingSettings } from './Tabs.styling'; + +import { FocusZone } from '@fluentui-react-native/focus-zone'; import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework'; +import { TextV1 as Text } from '@fluentui-react-native/text'; + +import { stylingSettings } from './Tabs.styling'; +import type { TabsType, TabsProps, TabsContextData } from './Tabs.types'; +import { tabsName } from './Tabs.types'; import { useTabs } from './useTabs'; -import { FocusZone } from '@fluentui-react-native/focus-zone'; export const TabsContext = React.createContext({ selectedKey: null, diff --git a/packages/experimental/Tabs/src/Tabs.types.ts b/packages/experimental/Tabs/src/Tabs.types.ts index 4d88361137..47e7463950 100644 --- a/packages/experimental/Tabs/src/Tabs.types.ts +++ b/packages/experimental/Tabs/src/Tabs.types.ts @@ -1,8 +1,9 @@ import type * as React from 'react'; import type { View } from 'react-native'; -import type { TextProps } from '@fluentui-react-native/text'; + import type { IViewProps } from '@fluentui-react-native/adapters'; import type { FocusZoneProps } from '@fluentui-react-native/focus-zone'; +import type { TextProps } from '@fluentui-react-native/text'; import type { FontTokens, IForegroundColorTokens, IBackgroundColorTokens } from '@fluentui-react-native/tokens'; export const tabsName = 'Tabs'; diff --git a/packages/experimental/Tabs/src/Tabs.windows.tsx b/packages/experimental/Tabs/src/Tabs.windows.tsx index 47dc981017..cd8e3b9fae 100644 --- a/packages/experimental/Tabs/src/Tabs.windows.tsx +++ b/packages/experimental/Tabs/src/Tabs.windows.tsx @@ -1,12 +1,14 @@ /** @jsx withSlots */ import * as React from 'react'; import { View } from 'react-native'; -import type { TabsType, TabsProps, TabsContextData } from './Tabs.types'; -import { tabsName } from './Tabs.types'; -import { TextV1 as Text } from '@fluentui-react-native/text'; -import { stylingSettings } from './Tabs.styling'; + import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework'; +import { TextV1 as Text } from '@fluentui-react-native/text'; + +import { stylingSettings } from './Tabs.styling'; +import type { TabsType, TabsProps, TabsContextData } from './Tabs.types'; +import { tabsName } from './Tabs.types'; import { useTabs } from './useTabs'; export const TabsContext = React.createContext({ diff --git a/packages/experimental/Tabs/src/TabsItem.styling.ts b/packages/experimental/Tabs/src/TabsItem.styling.ts index e2a60b060d..cd793bbb4f 100644 --- a/packages/experimental/Tabs/src/TabsItem.styling.ts +++ b/packages/experimental/Tabs/src/TabsItem.styling.ts @@ -1,8 +1,9 @@ -import type { TabsItemSlotProps, TabsItemTokens, TabsItemProps } from './TabsItem.types'; -import { tabsItemName } from './TabsItem.types'; import type { Theme, UseStylingOptions } from '@fluentui-react-native/framework'; import { buildProps } from '@fluentui-react-native/framework'; import { borderStyles, fontStyles } from '@fluentui-react-native/tokens'; + +import { tabsItemName } from './TabsItem.types'; +import type { TabsItemSlotProps, TabsItemTokens, TabsItemProps } from './TabsItem.types'; import { tabsItemStates, defaultTabsItemTokens } from './TabsItemTokens'; export const stylingSettings: UseStylingOptions = { diff --git a/packages/experimental/Tabs/src/TabsItem.tsx b/packages/experimental/Tabs/src/TabsItem.tsx index 4982ad53db..5b31917f4a 100644 --- a/packages/experimental/Tabs/src/TabsItem.tsx +++ b/packages/experimental/Tabs/src/TabsItem.tsx @@ -1,15 +1,17 @@ /** @jsx withSlots */ import * as React from 'react'; import { Pressable, View } from 'react-native'; -import type { TabItemType, TabsItemProps } from './TabsItem.types'; -import { tabsItemName } from './TabsItem.types'; -import { TextV1 as Text } from '@fluentui-react-native/text'; -import { stylingSettings } from './TabsItem.styling'; + import type { UseSlots } from '@fluentui-react-native/framework'; import { compose, mergeProps, withSlots } from '@fluentui-react-native/framework'; -import { useTabsItem } from './useTabsItem'; import { Icon, createIconProps } from '@fluentui-react-native/icon'; +import { TextV1 as Text } from '@fluentui-react-native/text'; + import { TabsContext } from './Tabs'; +import { stylingSettings } from './TabsItem.styling'; +import type { TabItemType, TabsItemProps } from './TabsItem.types'; +import { tabsItemName } from './TabsItem.types'; +import { useTabsItem } from './useTabsItem'; export const TabsItem = compose({ displayName: tabsItemName, diff --git a/packages/experimental/Tabs/src/TabsItem.types.ts b/packages/experimental/Tabs/src/TabsItem.types.ts index 09ae7cc642..76069c7e9f 100644 --- a/packages/experimental/Tabs/src/TabsItem.types.ts +++ b/packages/experimental/Tabs/src/TabsItem.types.ts @@ -1,10 +1,11 @@ import type * as React from 'react'; import type { ViewStyle, ColorValue } from 'react-native'; -import type { FontTokens, IBorderTokens } from '@fluentui-react-native/tokens'; -import type { IFocusable, PressableState, PressablePropsExtended } from '@fluentui-react-native/interactive-hooks'; -import type { IconProps, IconSourcesType } from '@fluentui-react-native/icon'; + import type { IViewProps } from '@fluentui-react-native/adapters'; +import type { IconProps, IconSourcesType } from '@fluentui-react-native/icon'; +import type { IFocusable, PressableState, PressablePropsExtended } from '@fluentui-react-native/interactive-hooks'; import type { TextProps } from '@fluentui-react-native/text'; +import type { FontTokens, IBorderTokens } from '@fluentui-react-native/tokens'; export const tabsItemName = 'TabsItem'; diff --git a/packages/experimental/Tabs/src/TabsItemTokens.macos.ts b/packages/experimental/Tabs/src/TabsItemTokens.macos.ts index 8cb41fa754..1e41f00ce6 100644 --- a/packages/experimental/Tabs/src/TabsItemTokens.macos.ts +++ b/packages/experimental/Tabs/src/TabsItemTokens.macos.ts @@ -1,6 +1,7 @@ -import type { TabsItemTokens } from './TabsItem.types'; -import type { TokenSettings } from '@fluentui-react-native/use-styling'; import type { Theme } from '@fluentui-react-native/framework'; +import type { TokenSettings } from '@fluentui-react-native/use-styling'; + +import type { TabsItemTokens } from './TabsItem.types'; export const tabsItemStates: (keyof TabsItemTokens)[] = ['hovered', 'selected', 'focused', 'disabled']; diff --git a/packages/experimental/Tabs/src/TabsItemTokens.ts b/packages/experimental/Tabs/src/TabsItemTokens.ts index 003a6f3a1a..ce0a3e164c 100644 --- a/packages/experimental/Tabs/src/TabsItemTokens.ts +++ b/packages/experimental/Tabs/src/TabsItemTokens.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { TabsItemTokens } from '.'; export const tabsItemStates: (keyof TabsItemTokens)[] = ['hovered', 'selected', 'focused', 'disabled', 'pressed']; diff --git a/packages/experimental/Tabs/src/TabsItemTokens.windows.ts b/packages/experimental/Tabs/src/TabsItemTokens.windows.ts index b1810d2b65..f17e12a2ba 100644 --- a/packages/experimental/Tabs/src/TabsItemTokens.windows.ts +++ b/packages/experimental/Tabs/src/TabsItemTokens.windows.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { TabsItemTokens } from '.'; export const tabsItemStates: (keyof TabsItemTokens)[] = ['hovered', 'selected', 'disabled']; diff --git a/packages/experimental/Tabs/src/TabsTokens.macos.ts b/packages/experimental/Tabs/src/TabsTokens.macos.ts index 93d3b1e2b3..adb89abcd2 100644 --- a/packages/experimental/Tabs/src/TabsTokens.macos.ts +++ b/packages/experimental/Tabs/src/TabsTokens.macos.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { TabsTokens } from '.'; export const defaultTabsTokens: TokenSettings = (t: Theme) => diff --git a/packages/experimental/Tabs/src/TabsTokens.ts b/packages/experimental/Tabs/src/TabsTokens.ts index 6eeda3783a..56e6ac72f6 100644 --- a/packages/experimental/Tabs/src/TabsTokens.ts +++ b/packages/experimental/Tabs/src/TabsTokens.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { TabsTokens } from '.'; export const defaultTabsTokens: TokenSettings = (t: Theme) => diff --git a/packages/experimental/Tabs/src/TabsTokens.windows.ts b/packages/experimental/Tabs/src/TabsTokens.windows.ts index 93d3b1e2b3..adb89abcd2 100644 --- a/packages/experimental/Tabs/src/TabsTokens.windows.ts +++ b/packages/experimental/Tabs/src/TabsTokens.windows.ts @@ -1,5 +1,6 @@ import type { Theme } from '@fluentui-react-native/framework'; import type { TokenSettings } from '@fluentui-react-native/use-styling'; + import type { TabsTokens } from '.'; export const defaultTabsTokens: TokenSettings = (t: Theme) => diff --git a/packages/experimental/Tabs/src/__tests__/Tabs.test.tsx b/packages/experimental/Tabs/src/__tests__/Tabs.test.tsx index 4d649696ec..c6f8929cd9 100644 --- a/packages/experimental/Tabs/src/__tests__/Tabs.test.tsx +++ b/packages/experimental/Tabs/src/__tests__/Tabs.test.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; -import { Tabs, TabsItem } from '..'; + import * as renderer from 'react-test-renderer'; +import { Tabs, TabsItem } from '..'; + it('Tabs default props', () => { const tree = renderer .create( diff --git a/packages/experimental/Tabs/src/useTabs.ts b/packages/experimental/Tabs/src/useTabs.ts index 5ad14adb3f..a9b41462ff 100644 --- a/packages/experimental/Tabs/src/useTabs.ts +++ b/packages/experimental/Tabs/src/useTabs.ts @@ -1,6 +1,8 @@ import * as React from 'react'; import type { View } from 'react-native'; + import { useSelectedKey } from '@fluentui-react-native/interactive-hooks'; + import type { TabsProps, TabsState, TabsInfo } from './Tabs.types'; /** diff --git a/packages/experimental/Tabs/src/useTabs.windows.ts b/packages/experimental/Tabs/src/useTabs.windows.ts index bd51654370..5c6fe2fa0a 100644 --- a/packages/experimental/Tabs/src/useTabs.windows.ts +++ b/packages/experimental/Tabs/src/useTabs.windows.ts @@ -1,5 +1,7 @@ import * as React from 'react'; + import { useSelectedKey } from '@fluentui-react-native/interactive-hooks'; + import type { TabsProps, TabsState, TabsInfo } from './Tabs.types'; /** diff --git a/packages/experimental/Tabs/src/useTabsItem.ts b/packages/experimental/Tabs/src/useTabsItem.ts index 888ce33cd6..4b4050fc2f 100644 --- a/packages/experimental/Tabs/src/useTabsItem.ts +++ b/packages/experimental/Tabs/src/useTabsItem.ts @@ -1,8 +1,10 @@ import * as React from 'react'; + import type { IFocusable } from '@fluentui-react-native/interactive-hooks'; import { usePressableState, useKeyProps, useOnPressWithFocus, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; -import type { TabsItemProps, TabsItemInfo } from './TabsItem.types'; + import { TabsContext } from './Tabs'; +import type { TabsItemProps, TabsItemInfo } from './TabsItem.types'; /** * Re-usable hook for TabsItem. diff --git a/packages/experimental/Tabs/src/useTabsItem.windows.ts b/packages/experimental/Tabs/src/useTabsItem.windows.ts index 0f1c99c5e7..349b7dfa17 100644 --- a/packages/experimental/Tabs/src/useTabsItem.windows.ts +++ b/packages/experimental/Tabs/src/useTabsItem.windows.ts @@ -1,7 +1,9 @@ import * as React from 'react'; + import { usePressableState, useViewCommandFocus } from '@fluentui-react-native/interactive-hooks'; -import type { TabsItemProps, TabsItemInfo, TabsItemState } from './TabsItem.types'; + import { TabsContext } from './Tabs'; +import type { TabsItemProps, TabsItemInfo, TabsItemState } from './TabsItem.types'; /** * Re-usable hook for TabsItem. diff --git a/packages/framework/component-cache/src/ensureNativeComponent.test.ts b/packages/framework/component-cache/src/ensureNativeComponent.test.ts index 91bf3533b1..5a9e6c1e4a 100644 --- a/packages/framework/component-cache/src/ensureNativeComponent.test.ts +++ b/packages/framework/component-cache/src/ensureNativeComponent.test.ts @@ -1,4 +1,5 @@ import { requireNativeComponent } from 'react-native'; + import { ensureNativeComponent } from './ensureNativeComponent'; describe('ensureNativeComponent test suite', () => { diff --git a/packages/framework/composition/src/composeFactory.test.tsx b/packages/framework/composition/src/composeFactory.test.tsx index d6738fcffa..5939cbb23a 100644 --- a/packages/framework/composition/src/composeFactory.test.tsx +++ b/packages/framework/composition/src/composeFactory.test.tsx @@ -1,11 +1,13 @@ /** @jsx withSlots */ -import { withSlots } from '@fluentui-react-native/use-slot'; -import * as renderer from 'react-test-renderer'; -import type { UseStyledSlots } from './composeFactory'; -import { composeFactory } from './composeFactory'; import type { ViewProps, TextProps, ColorValue } from 'react-native'; import { View, Text } from 'react-native'; + +import { withSlots } from '@fluentui-react-native/use-slot'; import type { ThemeHelper } from '@fluentui-react-native/use-styling'; +import * as renderer from 'react-test-renderer'; + +import type { UseStyledSlots } from './composeFactory'; +import { composeFactory } from './composeFactory'; type Theme = { values: { diff --git a/packages/framework/composition/src/composeFactory.ts b/packages/framework/composition/src/composeFactory.ts index 0f9dc8ca39..b7fc57982c 100644 --- a/packages/framework/composition/src/composeFactory.ts +++ b/packages/framework/composition/src/composeFactory.ts @@ -1,11 +1,11 @@ -import type { UseStylingOptions, TokenSettings, ThemeHelper, HasLayer } from '@fluentui-react-native/use-styling'; -import { buildUseStyling } from '@fluentui-react-native/use-styling'; +import type { MergeOptions } from '@fluentui-react-native/immutable-merge'; +import { immutableMergeCore } from '@fluentui-react-native/immutable-merge'; import type { ComposableFunction } from '@fluentui-react-native/use-slot'; import { stagedComponent } from '@fluentui-react-native/use-slot'; import type { UseSlotOptions, Slots } from '@fluentui-react-native/use-slots'; import { buildUseSlots } from '@fluentui-react-native/use-slots'; -import type { MergeOptions } from '@fluentui-react-native/immutable-merge'; -import { immutableMergeCore } from '@fluentui-react-native/immutable-merge'; +import { buildUseStyling } from '@fluentui-react-native/use-styling'; +import type { UseStylingOptions, TokenSettings, ThemeHelper, HasLayer } from '@fluentui-react-native/use-styling'; export type UseStyledSlots = (props: TProps, lookup?: HasLayer) => Slots; diff --git a/packages/framework/framework/src/compose.ts b/packages/framework/framework/src/compose.ts index 2eea3e8721..c67a360207 100644 --- a/packages/framework/framework/src/compose.ts +++ b/packages/framework/framework/src/compose.ts @@ -1,6 +1,7 @@ -import type { Theme } from '@fluentui-react-native/theme-types'; import type { ComposeFactoryOptions, ComposeFactoryComponent, UseStyledSlots } from '@fluentui-react-native/composition'; import { composeFactory } from '@fluentui-react-native/composition'; +import type { Theme } from '@fluentui-react-native/theme-types'; + import { themeHelper } from './themeHelper'; /** diff --git a/packages/framework/framework/src/compressible.test.tsx b/packages/framework/framework/src/compressible.test.tsx index e4a128928a..8097160dec 100644 --- a/packages/framework/framework/src/compressible.test.tsx +++ b/packages/framework/framework/src/compressible.test.tsx @@ -1,16 +1,18 @@ /** @jsx withSlots */ -import type { UseTokens } from './useTokens'; -import { buildUseTokens } from './useTokens'; -import { applyTokenLayers } from '@fluentui-react-native/use-tokens'; +import * as React from 'react'; import type { TextProps, TextStyle } from 'react-native'; import { Text, View } from 'react-native'; -import { compressible } from './compressible'; -import type { Theme } from '@fluentui-react-native/theme-types'; + import { mergeStyles } from '@fluentui-react-native/merge-props'; +import type { Theme } from '@fluentui-react-native/theme-types'; import { useSlot, withSlots } from '@fluentui-react-native/use-slot'; -import * as React from 'react'; -import toJson from 'enzyme-to-json'; +import { applyTokenLayers } from '@fluentui-react-native/use-tokens'; import { mount } from 'enzyme'; +import toJson from 'enzyme-to-json'; + +import { compressible } from './compressible'; +import { buildUseTokens } from './useTokens'; +import type { UseTokens } from './useTokens'; type Variant = 'normal' | 'header' | 'caption'; interface VariantTextTokens { diff --git a/packages/framework/framework/src/compressible.ts b/packages/framework/framework/src/compressible.ts index 5b4687df39..1580593d04 100644 --- a/packages/framework/framework/src/compressible.ts +++ b/packages/framework/framework/src/compressible.ts @@ -2,6 +2,7 @@ import type { Theme } from '@fluentui-react-native/theme-types'; import type { StagedRender } from '@fluentui-react-native/use-slot'; import { stagedComponent } from '@fluentui-react-native/use-slot'; import type { CustomizableComponent } from '@fluentui-react-native/use-tokens'; + import type { TokenSettings } from './useStyling'; import type { UseTokens } from './useTokens'; diff --git a/packages/framework/framework/src/themeHelper.ts b/packages/framework/framework/src/themeHelper.ts index 7870b208f6..ffe58a4b88 100644 --- a/packages/framework/framework/src/themeHelper.ts +++ b/packages/framework/framework/src/themeHelper.ts @@ -1,5 +1,6 @@ -import type { ThemeHelper } from '@fluentui-react-native/use-styling'; import type { Theme } from '@fluentui-react-native/theme-types'; +import type { ThemeHelper } from '@fluentui-react-native/use-styling'; + import { useFluentTheme } from './useFluentTheme'; export const themeHelper: ThemeHelper = { diff --git a/packages/framework/framework/src/useStyling.ts b/packages/framework/framework/src/useStyling.ts index 589f446465..101dd1d431 100644 --- a/packages/framework/framework/src/useStyling.ts +++ b/packages/framework/framework/src/useStyling.ts @@ -3,6 +3,7 @@ * as to be dependent on the core theme type */ export { TokensThatAreAlsoProps, HasLayer, UseStyling } from '@fluentui-react-native/use-styling'; +import type { Theme } from '@fluentui-react-native/theme-types'; import type { TokensFromTheme as TokensFromThemeBase, TokenSettings as TokenSettingsBase, @@ -11,7 +12,7 @@ import type { BuildPropsBase, } from '@fluentui-react-native/use-styling'; import { buildUseStyling as buildUseStylingBase, buildProps as buildPropsBase } from '@fluentui-react-native/use-styling'; -import type { Theme } from '@fluentui-react-native/theme-types'; + import { themeHelper } from './themeHelper'; export type BuildProps = BuildPropsBase; diff --git a/packages/framework/framework/src/useTokens.ts b/packages/framework/framework/src/useTokens.ts index 555b3eb9d8..ad7a0784ee 100644 --- a/packages/framework/framework/src/useTokens.ts +++ b/packages/framework/framework/src/useTokens.ts @@ -1,7 +1,8 @@ +import type { Theme } from '@fluentui-react-native/theme-types'; import type { UseTokens as UseTokensCore } from '@fluentui-react-native/use-tokens'; import { buildUseTokens as buildUseTokensCore } from '@fluentui-react-native/use-tokens'; + import { themeHelper } from './themeHelper'; -import type { Theme } from '@fluentui-react-native/theme-types'; import type { TokenSettings } from './useStyling'; export { applyTokenLayers, applyPropsToTokens, customizable, patchTokens } from '@fluentui-react-native/use-tokens'; diff --git a/packages/framework/merge-props/src/mergeProps.ts b/packages/framework/merge-props/src/mergeProps.ts index 4eb8b4d072..46433d1e8b 100644 --- a/packages/framework/merge-props/src/mergeProps.ts +++ b/packages/framework/merge-props/src/mergeProps.ts @@ -1,5 +1,6 @@ import type { MergeOptions } from '@fluentui-react-native/immutable-merge'; import { immutableMergeCore } from '@fluentui-react-native/immutable-merge'; + import { mergeStyles } from './mergeStyles'; /** diff --git a/packages/framework/merge-props/src/mergeStyles.test.ts b/packages/framework/merge-props/src/mergeStyles.test.ts index 1d12110d51..3fd2d9b934 100644 --- a/packages/framework/merge-props/src/mergeStyles.test.ts +++ b/packages/framework/merge-props/src/mergeStyles.test.ts @@ -1,6 +1,7 @@ +import type { ColorValue } from 'react-native'; + import { flattenStyle, mergeAndFlattenStyles, mergeStyles } from './mergeStyles'; import type { StyleProp } from './mergeStyles.types'; -import type { ColorValue } from 'react-native'; interface IFakeStyle { backgroundColor?: ColorValue; diff --git a/packages/framework/merge-props/src/mergeStyles.ts b/packages/framework/merge-props/src/mergeStyles.ts index 78232cc924..f1c7578b53 100644 --- a/packages/framework/merge-props/src/mergeStyles.ts +++ b/packages/framework/merge-props/src/mergeStyles.ts @@ -1,5 +1,6 @@ import { immutableMerge } from '@fluentui-react-native/immutable-merge'; import { getMemoCache } from '@fluentui-react-native/memo-cache'; + import type { StyleProp } from './mergeStyles.types'; /** diff --git a/packages/framework/theme/src/ThemeProvider.tsx b/packages/framework/theme/src/ThemeProvider.tsx index e6e406ef95..5d9538491e 100644 --- a/packages/framework/theme/src/ThemeProvider.tsx +++ b/packages/framework/theme/src/ThemeProvider.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; -import type { ThemeReference } from './themeReference'; + import { ThemeContext } from '@fluentui-react-native/theme-types'; +import type { ThemeReference } from './themeReference'; + export interface ThemeProviderProps extends React.PropsWithChildren> { /** * to set themes into the provider wrap them in a reference diff --git a/packages/framework/theme/src/themeReference.test.ts b/packages/framework/theme/src/themeReference.test.ts index ae9f70a48c..f0b87123af 100644 --- a/packages/framework/theme/src/themeReference.test.ts +++ b/packages/framework/theme/src/themeReference.test.ts @@ -1,6 +1,7 @@ -import type { Theme, Spacing, PartialTheme } from '@fluentui-react-native/theme-types'; -import { ThemeReference } from './themeReference'; import { mockTheme } from '@fluentui-react-native/test-tools'; +import type { Theme, Spacing, PartialTheme } from '@fluentui-react-native/theme-types'; + +import { ThemeReference } from './themeReference'; const themeBase = mockTheme; diff --git a/packages/framework/theme/src/themeReference.ts b/packages/framework/theme/src/themeReference.ts index 2b9699e106..d9d74abe19 100644 --- a/packages/framework/theme/src/themeReference.ts +++ b/packages/framework/theme/src/themeReference.ts @@ -1,4 +1,5 @@ import type { Theme, PartialTheme } from '@fluentui-react-native/theme-types'; + import { mergeTheme } from './mergeTheme'; /** diff --git a/packages/framework/themed-stylesheet/src/themedStyleSheet.ts b/packages/framework/themed-stylesheet/src/themedStyleSheet.ts index 01f591659c..6782a73079 100644 --- a/packages/framework/themed-stylesheet/src/themedStyleSheet.ts +++ b/packages/framework/themed-stylesheet/src/themedStyleSheet.ts @@ -1,5 +1,6 @@ import type { ViewStyle, TextStyle, ImageStyle } from 'react-native'; import { StyleSheet } from 'react-native'; + import { getMemoCache } from '@fluentui-react-native/memo-cache'; /** diff --git a/packages/framework/use-slot/src/useSlot.test.tsx b/packages/framework/use-slot/src/useSlot.test.tsx index f5857fc0c0..bd4676003b 100644 --- a/packages/framework/use-slot/src/useSlot.test.tsx +++ b/packages/framework/use-slot/src/useSlot.test.tsx @@ -1,14 +1,16 @@ /** @jsx withSlots */ +import * as React from 'react'; import type { TextProps } from 'react-native'; import { Text, View } from 'react-native'; -import toJson from 'enzyme-to-json'; -import * as React from 'react'; -import { mount } from 'enzyme'; -import { useSlot } from './useSlot'; -import { withSlots } from './withSlots'; + import { mergeStyles } from '@fluentui-react-native/merge-props'; +import { mount } from 'enzyme'; +import toJson from 'enzyme-to-json'; + import type { NativeReactType } from './renderSlot'; import { stagedComponent } from './stagedComponent'; +import { useSlot } from './useSlot'; +import { withSlots } from './withSlots'; type PluggableTextProps = React.PropsWithChildren & { inner?: NativeReactType | React.FunctionComponent }; diff --git a/packages/framework/use-slot/src/useSlot.ts b/packages/framework/use-slot/src/useSlot.ts index 7b492c9b9e..83432b287d 100644 --- a/packages/framework/use-slot/src/useSlot.ts +++ b/packages/framework/use-slot/src/useSlot.ts @@ -1,6 +1,8 @@ import * as React from 'react'; -import type { SlotFn, NativeReactType } from './renderSlot'; + import { mergeProps } from '@fluentui-react-native/merge-props'; + +import type { SlotFn, NativeReactType } from './renderSlot'; import type { ComposableFunction, StagedRender } from './stagedComponent'; /** diff --git a/packages/framework/use-slots/src/buildUseSlots.test.tsx b/packages/framework/use-slots/src/buildUseSlots.test.tsx index 1debb34139..91441cbd09 100644 --- a/packages/framework/use-slots/src/buildUseSlots.test.tsx +++ b/packages/framework/use-slots/src/buildUseSlots.test.tsx @@ -1,10 +1,12 @@ /** @jsx withSlots */ -import { withSlots, stagedComponent } from '@fluentui-react-native/use-slot'; -import * as renderer from 'react-test-renderer'; -import { buildUseSlots } from './buildUseSlots'; import type { ViewProps, TextProps } from 'react-native'; import { View, Text } from 'react-native'; +import { withSlots, stagedComponent } from '@fluentui-react-native/use-slot'; +import * as renderer from 'react-test-renderer'; + +import { buildUseSlots } from './buildUseSlots'; + type SlotProps1 = { outer: ViewProps; inner: ViewProps; diff --git a/packages/framework/use-slots/src/useSlots.samples.test.tsx b/packages/framework/use-slots/src/useSlots.samples.test.tsx index 7aac7e64b2..1a877bdd3c 100644 --- a/packages/framework/use-slots/src/useSlots.samples.test.tsx +++ b/packages/framework/use-slots/src/useSlots.samples.test.tsx @@ -1,11 +1,13 @@ /** @jsx withSlots */ -import { withSlots, stagedComponent } from '@fluentui-react-native/use-slot'; -import { mergeProps } from '@fluentui-react-native/merge-props'; -import { buildUseSlots } from './buildUseSlots'; -import toJson from 'enzyme-to-json'; -import { mount } from 'enzyme'; import type { CSSProperties } from 'react'; +import { mergeProps } from '@fluentui-react-native/merge-props'; +import { withSlots, stagedComponent } from '@fluentui-react-native/use-slot'; +import { mount } from 'enzyme'; +import toJson from 'enzyme-to-json'; + +import { buildUseSlots } from './buildUseSlots'; + // types for web type TextProps = { style?: CSSProperties }; type ViewProps = { style?: CSSProperties }; diff --git a/packages/framework/use-styling/src/buildProps.test.ts b/packages/framework/use-styling/src/buildProps.test.ts index 5ae49da878..7846715e74 100644 --- a/packages/framework/use-styling/src/buildProps.test.ts +++ b/packages/framework/use-styling/src/buildProps.test.ts @@ -1,4 +1,5 @@ import { getMemoCache } from '@fluentui-react-native/memo-cache'; + import { buildProps } from './buildProps'; type ITheme = { foo?: string; bar?: string }; diff --git a/packages/framework/use-styling/src/buildUseStyling.test.ts b/packages/framework/use-styling/src/buildUseStyling.test.ts index b45e3b8962..e1ff2ae9a4 100644 --- a/packages/framework/use-styling/src/buildUseStyling.test.ts +++ b/packages/framework/use-styling/src/buildUseStyling.test.ts @@ -1,7 +1,8 @@ +import { getMemoCache } from '@fluentui-react-native/memo-cache'; + +import { buildProps } from './buildProps'; import type { ThemeHelper, UseStylingOptions } from './buildUseStyling'; import { buildUseStyling } from './buildUseStyling'; -import { getMemoCache } from '@fluentui-react-native/memo-cache'; -import { buildProps } from './buildProps'; let lastInstance = 0; diff --git a/packages/framework/use-styling/src/buildUseStyling.ts b/packages/framework/use-styling/src/buildUseStyling.ts index 34f9f51b70..06e384dd76 100644 --- a/packages/framework/use-styling/src/buildUseStyling.ts +++ b/packages/framework/use-styling/src/buildUseStyling.ts @@ -1,9 +1,10 @@ import type { GetMemoValue } from '@fluentui-react-native/memo-cache'; -import type { TokensThatAreAlsoProps, BuildSlotProps } from './buildProps'; -import { refinePropsFunctions } from './buildProps'; import type { HasLayer, TokenSettings } from '@fluentui-react-native/use-tokens'; import { applyPropsToTokens, applyTokenLayers, buildUseTokens } from '@fluentui-react-native/use-tokens'; +import type { TokensThatAreAlsoProps, BuildSlotProps } from './buildProps'; +import { refinePropsFunctions } from './buildProps'; + /** * Options used to build up a useStyling hook */ diff --git a/packages/framework/use-styling/src/useStyling.samples.test.tsx b/packages/framework/use-styling/src/useStyling.samples.test.tsx index 4dec8799fe..1921a62a00 100644 --- a/packages/framework/use-styling/src/useStyling.samples.test.tsx +++ b/packages/framework/use-styling/src/useStyling.samples.test.tsx @@ -1,11 +1,13 @@ -import type { ThemeHelper, UseStylingOptions } from './buildUseStyling'; -import { buildUseStyling } from './buildUseStyling'; +import * as React from 'react'; import type { TextProps, ColorValue } from 'react-native'; import { Text, View } from 'react-native'; -import { buildProps } from './buildProps'; -import toJson from 'enzyme-to-json'; -import * as React from 'react'; + import { mount } from 'enzyme'; +import toJson from 'enzyme-to-json'; + +import { buildProps } from './buildProps'; +import type { ThemeHelper, UseStylingOptions } from './buildUseStyling'; +import { buildUseStyling } from './buildUseStyling'; /** * Sample super simple theming implementation, shared by all the samples. This is intended to be illustrative, diff --git a/packages/framework/use-tokens/src/applyPropsToTokens.test.ts b/packages/framework/use-tokens/src/applyPropsToTokens.test.ts index 269fcadaf0..2e85864897 100644 --- a/packages/framework/use-tokens/src/applyPropsToTokens.test.ts +++ b/packages/framework/use-tokens/src/applyPropsToTokens.test.ts @@ -1,6 +1,7 @@ -import { applyPropsToTokens } from './applyPropsToTokens'; import { getMemoCache } from '@fluentui-react-native/memo-cache'; +import { applyPropsToTokens } from './applyPropsToTokens'; + interface Tokens { uno?: string; dos?: string; diff --git a/packages/framework/use-tokens/src/applyTokenLayers.test.ts b/packages/framework/use-tokens/src/applyTokenLayers.test.ts index 7594558401..27742241b6 100644 --- a/packages/framework/use-tokens/src/applyTokenLayers.test.ts +++ b/packages/framework/use-tokens/src/applyTokenLayers.test.ts @@ -1,6 +1,7 @@ -import { applyTokenLayers } from './applyTokenLayers'; import { getMemoCache } from '@fluentui-react-native/memo-cache'; +import { applyTokenLayers } from './applyTokenLayers'; + type Tokens = { a?: string; b?: string; diff --git a/packages/framework/use-tokens/src/applyTokenLayers.ts b/packages/framework/use-tokens/src/applyTokenLayers.ts index eedaee3057..e8667286da 100644 --- a/packages/framework/use-tokens/src/applyTokenLayers.ts +++ b/packages/framework/use-tokens/src/applyTokenLayers.ts @@ -1,5 +1,5 @@ -import type { GetMemoValue } from '@fluentui-react-native/memo-cache'; import { immutableMerge } from '@fluentui-react-native/immutable-merge'; +import type { GetMemoValue } from '@fluentui-react-native/memo-cache'; /** * alternatively look them up with a passed in function diff --git a/packages/framework/use-tokens/src/buildUseTokens.ts b/packages/framework/use-tokens/src/buildUseTokens.ts index 8c67f073e1..7feac62942 100644 --- a/packages/framework/use-tokens/src/buildUseTokens.ts +++ b/packages/framework/use-tokens/src/buildUseTokens.ts @@ -1,6 +1,6 @@ +import { immutableMerge } from '@fluentui-react-native/immutable-merge'; import type { GetMemoValue } from '@fluentui-react-native/memo-cache'; import { getMemoCache } from '@fluentui-react-native/memo-cache'; -import { immutableMerge } from '@fluentui-react-native/immutable-merge'; /** A function to generate tokens based on a theme */ export type TokensFromTheme = (theme: TTheme) => TTokens; diff --git a/packages/framework/use-tokens/src/customizable.ts b/packages/framework/use-tokens/src/customizable.ts index ba11b65fd4..37c9bc263f 100644 --- a/packages/framework/use-tokens/src/customizable.ts +++ b/packages/framework/use-tokens/src/customizable.ts @@ -1,4 +1,5 @@ import type React from 'react'; + import type { TokenSettings, UseTokens } from './buildUseTokens'; /** diff --git a/packages/framework/use-tokens/src/patchTokens.test.ts b/packages/framework/use-tokens/src/patchTokens.test.ts index 1e022bb4a0..a91ea60b99 100644 --- a/packages/framework/use-tokens/src/patchTokens.test.ts +++ b/packages/framework/use-tokens/src/patchTokens.test.ts @@ -1,6 +1,7 @@ -import { patchTokens } from './patchTokens'; import { getMemoCache } from '@fluentui-react-native/memo-cache'; +import { patchTokens } from './patchTokens'; + interface Tokens { uno?: string; dos?: string; diff --git a/packages/framework/use-tokens/src/useTokens.samples.test.tsx b/packages/framework/use-tokens/src/useTokens.samples.test.tsx index b1970c4a3f..db2b44e267 100644 --- a/packages/framework/use-tokens/src/useTokens.samples.test.tsx +++ b/packages/framework/use-tokens/src/useTokens.samples.test.tsx @@ -1,11 +1,13 @@ +import * as React from 'react'; import type { TextProps } from 'react-native'; import { Text, View } from 'react-native'; -import toJson from 'enzyme-to-json'; -import * as React from 'react'; -import { mount } from 'enzyme'; -import { buildUseTokens } from './buildUseTokens'; -import { mergeStyles } from '@fluentui-react-native/merge-props'; + import { immutableMerge } from '@fluentui-react-native/immutable-merge'; +import { mergeStyles } from '@fluentui-react-native/merge-props'; +import { mount } from 'enzyme'; +import toJson from 'enzyme-to-json'; + +import { buildUseTokens } from './buildUseTokens'; /** * Sample super simple theming implementation, shared by all the samples. This is intended to be illustrative, diff --git a/packages/theming/android-theme/src/__tests__/android-theme.test.ts b/packages/theming/android-theme/src/__tests__/android-theme.test.ts index 993c2c0a34..b340c5c3f0 100644 --- a/packages/theming/android-theme/src/__tests__/android-theme.test.ts +++ b/packages/theming/android-theme/src/__tests__/android-theme.test.ts @@ -1,7 +1,8 @@ -import { createAndroidTheme } from '../createAndroidTheme'; -import { getAndroidTheme } from '../androidTheme'; import type { ThemeOptions } from '@fluentui-react-native/theme-types'; +import { getAndroidTheme } from '../androidTheme'; +import { createAndroidTheme } from '../createAndroidTheme'; + const defaultAppearance = 'light'; const themeOptions: ThemeOptions[][] = [ [{ appearance: 'light', defaultAppearance: defaultAppearance }], diff --git a/packages/theming/android-theme/src/androidShadows.ts b/packages/theming/android-theme/src/androidShadows.ts index 76fb7548c8..7940e13c83 100644 --- a/packages/theming/android-theme/src/androidShadows.ts +++ b/packages/theming/android-theme/src/androidShadows.ts @@ -1,6 +1,8 @@ +import { Appearance } from 'react-native'; + import type { ThemeShadowDefinition } from '@fluentui-react-native/theme-types'; import { getCurrentAppearance } from '@fluentui-react-native/theming-utils'; -import { Appearance } from 'react-native'; + import { createShadowAliasTokens } from './createAliasTokens'; export function androidShadows(): ThemeShadowDefinition { diff --git a/packages/theming/android-theme/src/androidTheme.ts b/packages/theming/android-theme/src/androidTheme.ts index 12ad2c9b98..5afdbde165 100644 --- a/packages/theming/android-theme/src/androidTheme.ts +++ b/packages/theming/android-theme/src/androidTheme.ts @@ -1,10 +1,11 @@ +import { memoize } from '@fluentui-react-native/memo-cache'; import type { Spacing, Theme } from '@fluentui-react-native/theme-types'; -import { getFluentUIAndroidPalette } from './colorsSemantic'; -import { paletteFromAndroidColors } from './colorsTokens'; + +import { androidShadows } from './androidShadows'; import { androidTypography } from './androidTypography'; import { getAndroidPalette } from './colorsBase'; -import { androidShadows } from './androidShadows'; -import { memoize } from '@fluentui-react-native/memo-cache'; +import { getFluentUIAndroidPalette } from './colorsSemantic'; +import { paletteFromAndroidColors } from './colorsTokens'; export function androidSpacing(): Spacing { return { diff --git a/packages/theming/android-theme/src/androidTypography.ts b/packages/theming/android-theme/src/androidTypography.ts index 29a2153016..d415f90dc2 100644 --- a/packages/theming/android-theme/src/androidTypography.ts +++ b/packages/theming/android-theme/src/androidTypography.ts @@ -1,4 +1,5 @@ import type { FontSize, FontSizes, FontWeightValue, Typography, Variants } from '@fluentui-react-native/theme-types'; + import { createFontAliasTokens } from './createFontAliasTokens'; export function androidTypography(): Typography { diff --git a/packages/theming/android-theme/src/colorsSemantic.ts b/packages/theming/android-theme/src/colorsSemantic.ts index aff576315e..ea54d502e5 100644 --- a/packages/theming/android-theme/src/colorsSemantic.ts +++ b/packages/theming/android-theme/src/colorsSemantic.ts @@ -1,4 +1,5 @@ import type { ColorValue } from 'react-native'; + import type { AndroidBaseColorsPalette } from './colorsBase'; export interface SemanticPalette { // Texts diff --git a/packages/theming/android-theme/src/colorsTokens.ts b/packages/theming/android-theme/src/colorsTokens.ts index 2c9ea19670..f6721340f0 100644 --- a/packages/theming/android-theme/src/colorsTokens.ts +++ b/packages/theming/android-theme/src/colorsTokens.ts @@ -1,4 +1,5 @@ import type { ThemeColorDefinition } from '@fluentui-react-native/theme-types'; + import type { FluentUIAndroidPalette } from './colorsSemantic'; import { createColorAliasTokens } from './createAliasTokens'; diff --git a/packages/theming/android-theme/src/createAliasTokens.ts b/packages/theming/android-theme/src/createAliasTokens.ts index 63a97b0237..e6c63cdb7f 100644 --- a/packages/theming/android-theme/src/createAliasTokens.ts +++ b/packages/theming/android-theme/src/createAliasTokens.ts @@ -1,6 +1,6 @@ +import { memoize } from '@fluentui-react-native/memo-cache'; import { getAliasTokens, getShadowTokens } from '@fluentui-react-native/theme-tokens'; import type { AliasColorTokens, AppearanceOptions, ThemeShadowDefinition } from '@fluentui-react-native/theme-types'; -import { memoize } from '@fluentui-react-native/memo-cache'; import { mapPipelineToShadow, mapPipelineToTheme } from '@fluentui-react-native/theming-utils'; function createColorAliasTokensWorker(mode: AppearanceOptions): AliasColorTokens { diff --git a/packages/theming/android-theme/src/createAndroidTheme.ts b/packages/theming/android-theme/src/createAndroidTheme.ts index 8aef55d43b..7ca543861c 100644 --- a/packages/theming/android-theme/src/createAndroidTheme.ts +++ b/packages/theming/android-theme/src/createAndroidTheme.ts @@ -1,8 +1,10 @@ -import { ThemeReference } from '@fluentui-react-native/theme'; -import { getAndroidTheme } from './androidTheme'; import { Appearance } from 'react-native'; + +import { ThemeReference } from '@fluentui-react-native/theme'; import type { Theme, ThemeOptions } from '@fluentui-react-native/theme-types'; +import { getAndroidTheme } from './androidTheme'; + export function createAndroidTheme(options: ThemeOptions = {}): ThemeReference { const themeRef = new ThemeReference({} as Theme, () => { // Stub out HC and darkElevated on Android diff --git a/packages/theming/android-theme/src/createFontAliasTokens.ts b/packages/theming/android-theme/src/createFontAliasTokens.ts index ef44916c66..36e1ddbd30 100644 --- a/packages/theming/android-theme/src/createFontAliasTokens.ts +++ b/packages/theming/android-theme/src/createFontAliasTokens.ts @@ -1,6 +1,6 @@ +import { memoize } from '@fluentui-react-native/memo-cache'; import { getAliasTokens } from '@fluentui-react-native/theme-tokens'; import type { Variants } from '@fluentui-react-native/theme-types'; -import { memoize } from '@fluentui-react-native/memo-cache'; import { mapFontPipelineToTheme } from '@fluentui-react-native/theming-utils'; function createFontAliasTokensWorker(): Partial { diff --git a/packages/theming/apple-theme/src/__tests__/apple-theme.test.ts b/packages/theming/apple-theme/src/__tests__/apple-theme.test.ts index 95707fc25e..c9dd07e23f 100644 --- a/packages/theming/apple-theme/src/__tests__/apple-theme.test.ts +++ b/packages/theming/apple-theme/src/__tests__/apple-theme.test.ts @@ -1,7 +1,8 @@ -import { createMacOSColorAliasTokens, createMacOSShadowAliasTokens } from '../createMacOSAliasTokens'; -import { getIsHighContrast, setIsHighContrast } from '../appleHighContrast.macos'; import type { AppearanceOptions } from '@fluentui-react-native/theme-types'; + +import { getIsHighContrast, setIsHighContrast } from '../appleHighContrast.macos'; import { createAppleTheme } from '../createAppleTheme'; +import { createMacOSColorAliasTokens, createMacOSShadowAliasTokens } from '../createMacOSAliasTokens'; // For some reason the automatically mocked AccessibilityInfo object is the react-native version, not the // react-native-macos version, which doesn't contain the isHighContrastEnabled function that is accessed in diff --git a/packages/theming/apple-theme/src/appleColors.ios.ts b/packages/theming/apple-theme/src/appleColors.ios.ts index e4b6344587..122d65d027 100644 --- a/packages/theming/apple-theme/src/appleColors.ios.ts +++ b/packages/theming/apple-theme/src/appleColors.ios.ts @@ -1,7 +1,9 @@ +import { Appearance } from 'react-native'; + import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { ThemeColorDefinition } from '@fluentui-react-native/theme-types'; import { getCurrentAppearance } from '@fluentui-react-native/theming-utils'; -import { Appearance } from 'react-native'; + import type { ApplePalette } from './appleColors.types.ios'; import { createiOSColorAliasTokens } from './createiOSAliasTokens'; diff --git a/packages/theming/apple-theme/src/appleColors.macos.ts b/packages/theming/apple-theme/src/appleColors.macos.ts index bd59fc2664..e911c811c9 100644 --- a/packages/theming/apple-theme/src/appleColors.macos.ts +++ b/packages/theming/apple-theme/src/appleColors.macos.ts @@ -1,8 +1,9 @@ import type { ThemeColorDefinition, AppearanceOptions } from '@fluentui-react-native/theme-types'; -import type { AppleSemanticPalette, FluentUIApplePalette } from './appleColors.types.macos'; import { PlatformColor, DynamicColorMacOS, ColorWithSystemEffectMacOS } from 'react-native-macos'; -import { createMacOSColorAliasTokens } from './createMacOSAliasTokens'; + +import type { AppleSemanticPalette, FluentUIApplePalette } from './appleColors.types.macos'; import { getIsHighContrast } from './appleHighContrast.macos'; +import { createMacOSColorAliasTokens } from './createMacOSAliasTokens'; /** Creates a Palette of PlatformColors defined for macOS */ function getAppleSemanticPalette(): AppleSemanticPalette { diff --git a/packages/theming/apple-theme/src/appleShadows.ios.ts b/packages/theming/apple-theme/src/appleShadows.ios.ts index 4f76a9f368..b75649e523 100644 --- a/packages/theming/apple-theme/src/appleShadows.ios.ts +++ b/packages/theming/apple-theme/src/appleShadows.ios.ts @@ -1,6 +1,8 @@ +import { Appearance } from 'react-native'; + import type { ThemeShadowDefinition } from '@fluentui-react-native/theme-types'; import { getCurrentAppearance } from '@fluentui-react-native/theming-utils'; -import { Appearance } from 'react-native'; + import { createiOSShadowAliasTokens } from './createiOSAliasTokens'; export function iOSShadows(): ThemeShadowDefinition { diff --git a/packages/theming/apple-theme/src/appleShadows.macos.ts b/packages/theming/apple-theme/src/appleShadows.macos.ts index c7a32cdaca..32c3f32479 100644 --- a/packages/theming/apple-theme/src/appleShadows.macos.ts +++ b/packages/theming/apple-theme/src/appleShadows.macos.ts @@ -1,4 +1,5 @@ import type { ThemeShadowDefinition, AppearanceOptions } from '@fluentui-react-native/theme-types'; + import { getIsHighContrast } from './appleHighContrast.macos'; import { createMacOSShadowAliasTokens } from './createMacOSAliasTokens'; diff --git a/packages/theming/apple-theme/src/appleTheme.ios.ts b/packages/theming/apple-theme/src/appleTheme.ios.ts index 2eba8a48bc..c640b7788b 100644 --- a/packages/theming/apple-theme/src/appleTheme.ios.ts +++ b/packages/theming/apple-theme/src/appleTheme.ios.ts @@ -1,8 +1,9 @@ -import type { Theme, Spacing } from '@fluentui-react-native/theme-types'; -import { paletteFromAppleColors } from './appleColors.ios'; -import { appleTypography } from './appleTypography.ios'; -import { iOSShadows } from './appleShadows.ios'; import { memoize } from '@fluentui-react-native/memo-cache'; +import type { Theme, Spacing } from '@fluentui-react-native/theme-types'; + +import { paletteFromAppleColors } from './appleColors.ios'; +import { iOSShadows } from './appleShadows.ios'; +import { appleTypography } from './appleTypography.ios'; function appleSpacing(): Spacing { return { diff --git a/packages/theming/apple-theme/src/appleTheme.macos.ts b/packages/theming/apple-theme/src/appleTheme.macos.ts index a4766f337c..cfd698740a 100644 --- a/packages/theming/apple-theme/src/appleTheme.macos.ts +++ b/packages/theming/apple-theme/src/appleTheme.macos.ts @@ -1,8 +1,9 @@ +import { memoize } from '@fluentui-react-native/memo-cache'; import type { Spacing, Theme, AppearanceOptions } from '@fluentui-react-native/theme-types'; + import { fallbackApplePalette } from './appleColors.macos'; import { fallbackAppleShadows } from './appleShadows.macos'; import { fallbackAppleTypography } from './appleTypography.macos'; -import { memoize } from '@fluentui-react-native/memo-cache'; export function appleSpacing(): Spacing { return { diff --git a/packages/theming/apple-theme/src/appleTypography.ios.ts b/packages/theming/apple-theme/src/appleTypography.ios.ts index 582d7f434f..a606489c78 100644 --- a/packages/theming/apple-theme/src/appleTypography.ios.ts +++ b/packages/theming/apple-theme/src/appleTypography.ios.ts @@ -1,4 +1,5 @@ import type { FontSize, FontSizes, FontWeightValue, Typography, Variants } from '@fluentui-react-native/theme-types'; + import { createFontAliasTokens } from './createFontAliasTokens.ios'; // The sizes are taken for the Dynamic Type Size "Large", which is the system default diff --git a/packages/theming/apple-theme/src/createAppleTheme.ios.ts b/packages/theming/apple-theme/src/createAppleTheme.ios.ts index fbd31fab37..a165986345 100644 --- a/packages/theming/apple-theme/src/createAppleTheme.ios.ts +++ b/packages/theming/apple-theme/src/createAppleTheme.ios.ts @@ -1,7 +1,9 @@ +import { Appearance, NativeEventEmitter } from 'react-native'; + import { NativeAppearanceAdditions } from '@fluentui-react-native/experimental-appearance-additions'; import { ThemeReference } from '@fluentui-react-native/theme'; import type { Theme } from '@fluentui-react-native/theme-types'; -import { Appearance, NativeEventEmitter } from 'react-native'; + import { getBaseAppleThemeIOS } from './appleTheme.ios'; export function createAppleTheme(): ThemeReference { diff --git a/packages/theming/apple-theme/src/createAppleTheme.macos.ts b/packages/theming/apple-theme/src/createAppleTheme.macos.ts index 56ee22f1b6..a224380c95 100644 --- a/packages/theming/apple-theme/src/createAppleTheme.macos.ts +++ b/packages/theming/apple-theme/src/createAppleTheme.macos.ts @@ -1,10 +1,12 @@ +import { Appearance } from 'react-native'; + import { ThemeReference } from '@fluentui-react-native/theme'; import type { Theme } from '@fluentui-react-native/theme-types'; import { getCurrentAppearance } from '@fluentui-react-native/theming-utils'; -import { Appearance } from 'react-native'; -import { getBaseAppleThemeMacOS } from './appleTheme.macos'; import { AccessibilityInfo } from 'react-native-macos'; + import { setIsHighContrast } from './appleHighContrast.macos'; +import { getBaseAppleThemeMacOS } from './appleTheme.macos'; let appleThemeReference: ThemeReference; diff --git a/packages/theming/apple-theme/src/createAppleTheme.ts b/packages/theming/apple-theme/src/createAppleTheme.ts index 659101eb21..d607c5ac9a 100644 --- a/packages/theming/apple-theme/src/createAppleTheme.ts +++ b/packages/theming/apple-theme/src/createAppleTheme.ts @@ -1,5 +1,5 @@ -import { ThemeReference } from '@fluentui-react-native/theme'; import { createDefaultTheme } from '@fluentui-react-native/default-theme'; +import { ThemeReference } from '@fluentui-react-native/theme'; export function createAppleTheme(): ThemeReference { console.warn('Platform is not supported by apple theme, using default theme'); diff --git a/packages/theming/apple-theme/src/createFontAliasTokens.ios.ts b/packages/theming/apple-theme/src/createFontAliasTokens.ios.ts index 38d03779d3..613ec89d16 100644 --- a/packages/theming/apple-theme/src/createFontAliasTokens.ios.ts +++ b/packages/theming/apple-theme/src/createFontAliasTokens.ios.ts @@ -1,6 +1,6 @@ import aliasTokens from '@fluentui-react-native/design-tokens-ios/light/tokens-aliases.json'; // Font alias tokens should be the same for all color styles -import type { Variants } from '@fluentui-react-native/theme-types'; import { memoize } from '@fluentui-react-native/memo-cache'; +import type { Variants } from '@fluentui-react-native/theme-types'; import { mapFontPipelineToTheme } from '@fluentui-react-native/theming-utils'; function createFontAliasTokensWorker(): Partial { diff --git a/packages/theming/apple-theme/src/createMacOSAliasTokens.ts b/packages/theming/apple-theme/src/createMacOSAliasTokens.ts index 921b96c65d..5cff70123b 100644 --- a/packages/theming/apple-theme/src/createMacOSAliasTokens.ts +++ b/packages/theming/apple-theme/src/createMacOSAliasTokens.ts @@ -1,8 +1,9 @@ -import { getMacOSAliasTokens, getMacOSShadowTokens } from './getMacOSTokens'; -import type { AliasColorTokens, AppearanceOptions } from '@fluentui-react-native/theme-types'; -import { mapPipelineToTheme, mapPipelineToShadow } from '@fluentui-react-native/theming-utils'; import { memoize } from '@fluentui-react-native/memo-cache'; +import type { AliasColorTokens, AppearanceOptions } from '@fluentui-react-native/theme-types'; import type { ThemeShadowDefinition } from '@fluentui-react-native/theme-types/lib/Shadow.types'; +import { mapPipelineToTheme, mapPipelineToShadow } from '@fluentui-react-native/theming-utils'; + +import { getMacOSAliasTokens, getMacOSShadowTokens } from './getMacOSTokens'; function createMacOSColorAliasTokensWorker(mode: AppearanceOptions, isHighContrast: boolean): AliasColorTokens { const aliasTokens = getMacOSAliasTokens(mode, isHighContrast); diff --git a/packages/theming/apple-theme/src/createiOSAliasTokens.ts b/packages/theming/apple-theme/src/createiOSAliasTokens.ts index 04026b48c4..b5267193f2 100644 --- a/packages/theming/apple-theme/src/createiOSAliasTokens.ts +++ b/packages/theming/apple-theme/src/createiOSAliasTokens.ts @@ -1,8 +1,8 @@ +import { memoize } from '@fluentui-react-native/memo-cache'; import { getAliasTokens, getShadowTokens } from '@fluentui-react-native/theme-tokens'; import type { AliasColorTokens, AppearanceOptions } from '@fluentui-react-native/theme-types'; -import { mapPipelineToTheme, mapPipelineToShadow } from '@fluentui-react-native/theming-utils'; -import { memoize } from '@fluentui-react-native/memo-cache'; import type { ThemeShadowDefinition } from '@fluentui-react-native/theme-types/lib/Shadow.types'; +import { mapPipelineToTheme, mapPipelineToShadow } from '@fluentui-react-native/theming-utils'; function createiOSColorAliasTokensWorker(mode: AppearanceOptions): AliasColorTokens { const aliasTokens = getAliasTokens(mode); diff --git a/packages/theming/apple-theme/src/getMacOSTokens.ts b/packages/theming/apple-theme/src/getMacOSTokens.ts index 73bd9b9db3..b037929633 100644 --- a/packages/theming/apple-theme/src/getMacOSTokens.ts +++ b/packages/theming/apple-theme/src/getMacOSTokens.ts @@ -1,11 +1,11 @@ -import macOSLightAliasTokens from '@fluentui-react-native/design-tokens-macos/light/tokens-aliases.json'; import macOSDarkAliasTokens from '@fluentui-react-native/design-tokens-macos/dark/tokens-aliases.json'; -import macOSLightHCAliasTokens from '@fluentui-react-native/design-tokens-macos/hclight/tokens-aliases.json'; -import macOSDarkHCAliasTokens from '@fluentui-react-native/design-tokens-macos/hcdark/tokens-aliases.json'; -import macOSLightShadowTokens from '@fluentui-react-native/design-tokens-macos/light/tokens-shadow.json'; import macOSDarkShadowTokens from '@fluentui-react-native/design-tokens-macos/dark/tokens-shadow.json'; -import macOSLightHCShadowTokens from '@fluentui-react-native/design-tokens-macos/hclight/tokens-shadow.json'; +import macOSDarkHCAliasTokens from '@fluentui-react-native/design-tokens-macos/hcdark/tokens-aliases.json'; import macOSDarkHCShadowTokens from '@fluentui-react-native/design-tokens-macos/hcdark/tokens-shadow.json'; +import macOSLightHCAliasTokens from '@fluentui-react-native/design-tokens-macos/hclight/tokens-aliases.json'; +import macOSLightHCShadowTokens from '@fluentui-react-native/design-tokens-macos/hclight/tokens-shadow.json'; +import macOSLightAliasTokens from '@fluentui-react-native/design-tokens-macos/light/tokens-aliases.json'; +import macOSLightShadowTokens from '@fluentui-react-native/design-tokens-macos/light/tokens-shadow.json'; import type { AppearanceOptions } from '@fluentui-react-native/theme-types'; import { assertNever } from 'assert-never'; diff --git a/packages/theming/default-theme/src/__tests__/default-theme.test.ts b/packages/theming/default-theme/src/__tests__/default-theme.test.ts index da4bf5bdd8..db7d38b4e5 100644 --- a/packages/theming/default-theme/src/__tests__/default-theme.test.ts +++ b/packages/theming/default-theme/src/__tests__/default-theme.test.ts @@ -1,8 +1,9 @@ -import { defaultFluentTheme, defaultFluentDarkTheme } from '../defaultTheme'; -import { createDefaultTheme } from '../createDefaultTheme'; -import { createColorAliasTokens, createShadowAliasTokens } from '../createAliasTokens'; import type { ThemeOptions, AppearanceOptions } from '@fluentui-react-native/theme-types'; +import { createColorAliasTokens, createShadowAliasTokens } from '../createAliasTokens'; +import { createDefaultTheme } from '../createDefaultTheme'; +import { defaultFluentTheme, defaultFluentDarkTheme } from '../defaultTheme'; + const defaultThemeOptions: ThemeOptions[][] = [ [{ appearance: 'light', defaultAppearance: 'light' }], [{ appearance: 'dark', defaultAppearance: 'light' }], diff --git a/packages/theming/default-theme/src/createAliasTokens.ts b/packages/theming/default-theme/src/createAliasTokens.ts index 63a97b0237..e6c63cdb7f 100644 --- a/packages/theming/default-theme/src/createAliasTokens.ts +++ b/packages/theming/default-theme/src/createAliasTokens.ts @@ -1,6 +1,6 @@ +import { memoize } from '@fluentui-react-native/memo-cache'; import { getAliasTokens, getShadowTokens } from '@fluentui-react-native/theme-tokens'; import type { AliasColorTokens, AppearanceOptions, ThemeShadowDefinition } from '@fluentui-react-native/theme-types'; -import { memoize } from '@fluentui-react-native/memo-cache'; import { mapPipelineToShadow, mapPipelineToTheme } from '@fluentui-react-native/theming-utils'; function createColorAliasTokensWorker(mode: AppearanceOptions): AliasColorTokens { diff --git a/packages/theming/default-theme/src/createDefaultTheme.ts b/packages/theming/default-theme/src/createDefaultTheme.ts index c5c53139ab..ef5034d39f 100644 --- a/packages/theming/default-theme/src/createDefaultTheme.ts +++ b/packages/theming/default-theme/src/createDefaultTheme.ts @@ -1,10 +1,12 @@ -import { ThemeReference } from '@fluentui-react-native/theme'; -import { defaultFluentDarkTheme, defaultFluentHighConstrastTheme, defaultFluentTheme } from './defaultTheme'; import { Appearance } from 'react-native'; + +import { ThemeReference } from '@fluentui-react-native/theme'; import type { Theme, ThemeOptions } from '@fluentui-react-native/theme-types'; import { getCurrentAppearance } from '@fluentui-react-native/theming-utils'; import assertNever from 'assert-never'; +import { defaultFluentDarkTheme, defaultFluentHighConstrastTheme, defaultFluentTheme } from './defaultTheme'; + export function createDefaultTheme(options: ThemeOptions = {}): ThemeReference { const themeRef = new ThemeReference({} as Theme, () => { const current = getCurrentAppearance(options.appearance, options.defaultAppearance || 'light'); diff --git a/packages/theming/default-theme/src/defaultColors.macos.ts b/packages/theming/default-theme/src/defaultColors.macos.ts index 9979739770..1aada155e1 100644 --- a/packages/theming/default-theme/src/defaultColors.macos.ts +++ b/packages/theming/default-theme/src/defaultColors.macos.ts @@ -1,5 +1,6 @@ -import type { Palette, FabricWebPalette, ThemeColorDefinition } from '@fluentui-react-native/theme-types'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import type { Palette, FabricWebPalette, ThemeColorDefinition } from '@fluentui-react-native/theme-types'; + import { createColorAliasTokens } from './createAliasTokens'; /** diff --git a/packages/theming/default-theme/src/defaultColors.ts b/packages/theming/default-theme/src/defaultColors.ts index 466c12bf65..5de58b7b95 100644 --- a/packages/theming/default-theme/src/defaultColors.ts +++ b/packages/theming/default-theme/src/defaultColors.ts @@ -1,6 +1,7 @@ /* eslint-disable @typescript-eslint/ban-ts-comment */ -import type { Palette, FabricWebPalette, ThemeColorDefinition } from '@fluentui-react-native/theme-types'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import type { Palette, FabricWebPalette, ThemeColorDefinition } from '@fluentui-react-native/theme-types'; + import { createColorAliasTokens } from './createAliasTokens'; /** diff --git a/packages/theming/default-theme/src/defaultColors.win32.ts b/packages/theming/default-theme/src/defaultColors.win32.ts index 9979739770..1aada155e1 100644 --- a/packages/theming/default-theme/src/defaultColors.win32.ts +++ b/packages/theming/default-theme/src/defaultColors.win32.ts @@ -1,5 +1,6 @@ -import type { Palette, FabricWebPalette, ThemeColorDefinition } from '@fluentui-react-native/theme-types'; import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import type { Palette, FabricWebPalette, ThemeColorDefinition } from '@fluentui-react-native/theme-types'; + import { createColorAliasTokens } from './createAliasTokens'; /** diff --git a/packages/theming/default-theme/src/defaultTheme.ts b/packages/theming/default-theme/src/defaultTheme.ts index 1e50e8c9ec..faab3adb04 100644 --- a/packages/theming/default-theme/src/defaultTheme.ts +++ b/packages/theming/default-theme/src/defaultTheme.ts @@ -1,8 +1,10 @@ -import type { Theme, Typography, Spacing, FontWeightValue, FontSize, FontSizes, Variants } from '@fluentui-react-native/theme-types'; import { Platform } from 'react-native'; -import { getStockWebPalette, getStockWebDarkPalette, getStockWebHCPalette } from './defaultColors'; + import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import type { Theme, Typography, Spacing, FontWeightValue, FontSize, FontSizes, Variants } from '@fluentui-react-native/theme-types'; + import { createShadowAliasTokens } from './createAliasTokens'; +import { getStockWebPalette, getStockWebDarkPalette, getStockWebHCPalette } from './defaultColors'; function _defaultTypography(): Typography { const defaultsDict = { diff --git a/packages/theming/theme-tokens/src/getTokens.android.ts b/packages/theming/theme-tokens/src/getTokens.android.ts index 3bd27d5278..064ddcf7d9 100644 --- a/packages/theming/theme-tokens/src/getTokens.android.ts +++ b/packages/theming/theme-tokens/src/getTokens.android.ts @@ -1,8 +1,7 @@ -import lightAliasTokens from '@fluentui-react-native/design-tokens-android/light/tokens-aliases.json'; import darkAliasTokens from '@fluentui-react-native/design-tokens-android/dark/tokens-aliases.json'; -import lightShadowTokens from '@fluentui-react-native/design-tokens-android/light/tokens-shadow.json'; import darkShadowTokens from '@fluentui-react-native/design-tokens-android/dark/tokens-shadow.json'; - +import lightAliasTokens from '@fluentui-react-native/design-tokens-android/light/tokens-aliases.json'; +import lightShadowTokens from '@fluentui-react-native/design-tokens-android/light/tokens-shadow.json'; import type { AppearanceOptions } from '@fluentui-react-native/theme-types'; export function getAliasTokens(mode: AppearanceOptions) { diff --git a/packages/theming/theme-tokens/src/getTokens.ios.ts b/packages/theming/theme-tokens/src/getTokens.ios.ts index f3d1491053..6a054b5620 100644 --- a/packages/theming/theme-tokens/src/getTokens.ios.ts +++ b/packages/theming/theme-tokens/src/getTokens.ios.ts @@ -1,9 +1,8 @@ -import iOSLightAliasTokens from '@fluentui-react-native/design-tokens-ios/light/tokens-aliases.json'; import iOSDarkAliasTokens from '@fluentui-react-native/design-tokens-ios/dark/tokens-aliases.json'; -import iOSDarkElevatedAliasTokens from '@fluentui-react-native/design-tokens-ios/elevateddark/tokens-aliases.json'; -import iOSLightShadowTokens from '@fluentui-react-native/design-tokens-ios/light/tokens-shadow.json'; import iOSDarkShadowTokens from '@fluentui-react-native/design-tokens-ios/dark/tokens-shadow.json'; - +import iOSDarkElevatedAliasTokens from '@fluentui-react-native/design-tokens-ios/elevateddark/tokens-aliases.json'; +import iOSLightAliasTokens from '@fluentui-react-native/design-tokens-ios/light/tokens-aliases.json'; +import iOSLightShadowTokens from '@fluentui-react-native/design-tokens-ios/light/tokens-shadow.json'; import type { AppearanceOptions } from '@fluentui-react-native/theme-types'; import { assertNever } from 'assert-never'; diff --git a/packages/theming/theme-tokens/src/getTokens.ts b/packages/theming/theme-tokens/src/getTokens.ts index 64645b53c0..79134ad5e1 100644 --- a/packages/theming/theme-tokens/src/getTokens.ts +++ b/packages/theming/theme-tokens/src/getTokens.ts @@ -1,13 +1,13 @@ -import lightAliasTokens from '@fluentui-react-native/design-tokens-windows/light/tokens-aliases.json'; -import darkAliasTokens from '@fluentui-react-native/design-tokens-windows/dark/tokens-aliases.json'; -import lightShadowTokens from '@fluentui-react-native/design-tokens-windows/light/tokens-shadow.json'; -import darkShadowTokens from '@fluentui-react-native/design-tokens-windows/dark/tokens-shadow.json'; import hcShadowTokens from '@fluentui-react-native/design-tokens-win32/hc/tokens-shadow.json'; - -import { hcAliasTokens } from './highContrast/tokens-alias'; +import darkAliasTokens from '@fluentui-react-native/design-tokens-windows/dark/tokens-aliases.json'; +import darkShadowTokens from '@fluentui-react-native/design-tokens-windows/dark/tokens-shadow.json'; +import lightAliasTokens from '@fluentui-react-native/design-tokens-windows/light/tokens-aliases.json'; +import lightShadowTokens from '@fluentui-react-native/design-tokens-windows/light/tokens-shadow.json'; import type { AppearanceOptions } from '@fluentui-react-native/theme-types'; import { assertNever } from 'assert-never'; +import { hcAliasTokens } from './highContrast/tokens-alias'; + export function getAliasTokens(mode: AppearanceOptions) { if (mode === 'light') { return lightAliasTokens; diff --git a/packages/theming/theme-tokens/src/highContrast/tokens-alias.ts b/packages/theming/theme-tokens/src/highContrast/tokens-alias.ts index 981f6f5625..3dbdd8b7ea 100644 --- a/packages/theming/theme-tokens/src/highContrast/tokens-alias.ts +++ b/packages/theming/theme-tokens/src/highContrast/tokens-alias.ts @@ -1,4 +1,5 @@ import { PlatformColor } from 'react-native'; + import aliasTokens from '@fluentui-react-native/design-tokens-win32/hc/tokens-aliases.json'; export const hcAliasTokens = processAliasTokens(aliasTokens); diff --git a/packages/theming/theme-tokens/src/highContrast/tokens-alias.win32.ts b/packages/theming/theme-tokens/src/highContrast/tokens-alias.win32.ts index a685aaa4c5..c594541981 100644 --- a/packages/theming/theme-tokens/src/highContrast/tokens-alias.win32.ts +++ b/packages/theming/theme-tokens/src/highContrast/tokens-alias.win32.ts @@ -1,4 +1,5 @@ import { PlatformColor } from 'react-native'; + import aliasTokens from '@fluentui-react-native/design-tokens-win32/hc/tokens-aliases.json'; export const hcAliasTokens = processAliasTokens(aliasTokens); diff --git a/packages/theming/theme-types/src/Theme.types.ts b/packages/theming/theme-types/src/Theme.types.ts index b4e706863f..67cd4b18eb 100644 --- a/packages/theming/theme-types/src/Theme.types.ts +++ b/packages/theming/theme-types/src/Theme.types.ts @@ -1,8 +1,9 @@ +import type { ColorValue } from 'react-native'; + import type { ThemeColorDefinition } from './Color.types'; import type { OfficePalette } from './palette.types'; -import type { Typography, PartialTypography } from './Typography.types'; -import type { ColorValue } from 'react-native'; import type { PartialShadowDefinition, ThemeShadowDefinition } from './Shadow.types'; +import type { Typography, PartialTypography } from './Typography.types'; type TwoLevelPartial = { [K in keyof T]?: Partial }; diff --git a/packages/theming/theme-types/src/context.ts b/packages/theming/theme-types/src/context.ts index 6b8daf7071..bdc4d01952 100644 --- a/packages/theming/theme-types/src/context.ts +++ b/packages/theming/theme-types/src/context.ts @@ -1,4 +1,5 @@ import * as React from 'react'; + import type { Theme } from './Theme.types'; export const ThemeContext = React.createContext(undefined); diff --git a/packages/theming/theming-utils/src/__tests__/theming-utils.test.ts b/packages/theming/theming-utils/src/__tests__/theming-utils.test.ts index d5d594ff97..ef4cb3989a 100644 --- a/packages/theming/theming-utils/src/__tests__/theming-utils.test.ts +++ b/packages/theming/theming-utils/src/__tests__/theming-utils.test.ts @@ -1,14 +1,15 @@ -import { getCurrentAppearance } from '../'; -import { mapPipelineToTheme, mapFontPipelineToTheme } from '../mapPipelineToTheme'; -import { mapPipelineToShadow } from '../mapPipelineToShadow'; -import lightAliasTokens from '@fluentui-react-native/design-tokens-windows/light/tokens-aliases.json'; -import darkAliasTokens from '@fluentui-react-native/design-tokens-windows/dark/tokens-aliases.json'; +import blackAliasTokens from '@fluentui-react-native/design-tokens-win32/black/tokens-aliases.json'; import colorfulAliasTokens from '@fluentui-react-native/design-tokens-win32/colorful/tokens-aliases.json'; import darkGrayAliasTokens from '@fluentui-react-native/design-tokens-win32/darkgray/tokens-aliases.json'; -import blackAliasTokens from '@fluentui-react-native/design-tokens-win32/black/tokens-aliases.json'; -import lightShadowTokens from '@fluentui-react-native/design-tokens-windows/light/tokens-shadow.json'; -import darkShadowTokens from '@fluentui-react-native/design-tokens-windows/dark/tokens-shadow.json'; import hcShadowTokens from '@fluentui-react-native/design-tokens-win32/hc/tokens-shadow.json'; +import darkAliasTokens from '@fluentui-react-native/design-tokens-windows/dark/tokens-aliases.json'; +import darkShadowTokens from '@fluentui-react-native/design-tokens-windows/dark/tokens-shadow.json'; +import lightAliasTokens from '@fluentui-react-native/design-tokens-windows/light/tokens-aliases.json'; +import lightShadowTokens from '@fluentui-react-native/design-tokens-windows/light/tokens-shadow.json'; + +import { getCurrentAppearance } from '../'; +import { mapPipelineToShadow } from '../mapPipelineToShadow'; +import { mapPipelineToTheme, mapFontPipelineToTheme } from '../mapPipelineToTheme'; const fallBackAppearance = 'light'; diff --git a/packages/theming/theming-utils/src/getCurrentAppearance.ts b/packages/theming/theming-utils/src/getCurrentAppearance.ts index 33ae7b21b7..6baf970d51 100644 --- a/packages/theming/theming-utils/src/getCurrentAppearance.ts +++ b/packages/theming/theming-utils/src/getCurrentAppearance.ts @@ -1,4 +1,5 @@ import { Appearance } from 'react-native'; + import type { AppearanceOptions, ThemeOptions } from '@fluentui-react-native/theme-types'; export function getCurrentAppearance(appearance: ThemeOptions['appearance'], fallback: AppearanceOptions): AppearanceOptions { diff --git a/packages/theming/theming-utils/src/getCurrentAppearance.windows.ts b/packages/theming/theming-utils/src/getCurrentAppearance.windows.ts index 414df3bc50..29ccd8a639 100644 --- a/packages/theming/theming-utils/src/getCurrentAppearance.windows.ts +++ b/packages/theming/theming-utils/src/getCurrentAppearance.windows.ts @@ -1,6 +1,7 @@ import { Appearance } from 'react-native'; -import { AppTheme } from 'react-native-windows'; + import type { AppearanceOptions, ThemeOptions } from '@fluentui-react-native/theme-types'; +import { AppTheme } from 'react-native-windows'; export function getCurrentAppearance(appearance: ThemeOptions['appearance'], fallback: AppearanceOptions): AppearanceOptions { if (appearance === undefined) { diff --git a/packages/theming/win32-theme/src/NativeModule/fallbackOfficeModule.ts b/packages/theming/win32-theme/src/NativeModule/fallbackOfficeModule.ts index 5594413e8c..395f404222 100644 --- a/packages/theming/win32-theme/src/NativeModule/fallbackOfficeModule.ts +++ b/packages/theming/win32-theme/src/NativeModule/fallbackOfficeModule.ts @@ -1,4 +1,5 @@ import type { OfficePalette } from '@fluentui-react-native/theme-types'; + import type { OfficeThemingModule } from './officeThemingModule'; const whiteColorsPalette: OfficePalette = { diff --git a/packages/theming/win32-theme/src/NativeModule/getThemingModule.native.ts b/packages/theming/win32-theme/src/NativeModule/getThemingModule.native.ts index 9003c8c938..a305cd5d4e 100644 --- a/packages/theming/win32-theme/src/NativeModule/getThemingModule.native.ts +++ b/packages/theming/win32-theme/src/NativeModule/getThemingModule.native.ts @@ -1,7 +1,8 @@ -import type { OfficeThemingModule } from './officeThemingModule'; import type { EventSubscriptionVendor, TurboModule } from 'react-native'; import { NativeEventEmitter, TurboModuleRegistry } from 'react-native'; + import { fallbackGetPalette, fallbackOfficeModule } from './fallbackOfficeModule'; +import type { OfficeThemingModule } from './officeThemingModule'; /** * If we have a userAgent string, let's assume we're web debugging. __DEV__ is for developer bundles. Currently, diff --git a/packages/theming/win32-theme/src/NativeModule/getThemingModule.ts b/packages/theming/win32-theme/src/NativeModule/getThemingModule.ts index 3476d79f10..266fe0a327 100644 --- a/packages/theming/win32-theme/src/NativeModule/getThemingModule.ts +++ b/packages/theming/win32-theme/src/NativeModule/getThemingModule.ts @@ -1,4 +1,5 @@ import type { NativeEventEmitter } from 'react-native'; + import { fallbackOfficeModule } from './fallbackOfficeModule'; import type { OfficeThemingModule } from './officeThemingModule'; diff --git a/packages/theming/win32-theme/src/NativeModule/officeThemingModule.ts b/packages/theming/win32-theme/src/NativeModule/officeThemingModule.ts index d486404760..cc3f7296bc 100644 --- a/packages/theming/win32-theme/src/NativeModule/officeThemingModule.ts +++ b/packages/theming/win32-theme/src/NativeModule/officeThemingModule.ts @@ -1,4 +1,5 @@ import type { NativeModule, ColorValue } from 'react-native'; + import type { OfficePalette, Typography } from '@fluentui-react-native/theme-types'; export type PlatformDefaultsChangedArgs = { hostThemeSetting: string }; diff --git a/packages/theming/win32-theme/src/__tests__/win32-theme.test.ts b/packages/theming/win32-theme/src/__tests__/win32-theme.test.ts index a0ff40481a..339ebfc321 100644 --- a/packages/theming/win32-theme/src/__tests__/win32-theme.test.ts +++ b/packages/theming/win32-theme/src/__tests__/win32-theme.test.ts @@ -1,10 +1,10 @@ +import { createBrandedThemeWithAlias, getCurrentBrandAliasTokens } from '../createBrandedThemeWithAlias'; +import { createFontAliasTokens } from '../createFontAliasTokens'; +import { createOfficeColorAliasTokens, createOfficeShadowAliasTokens } from '../createOfficeAliasTokens'; import { createOfficeTheme } from '../createOfficeTheme'; import { createPartialOfficeTheme } from '../createPartialOfficeTheme'; -import { fallbackGetPalette, fallbackOfficeModule, getThemingModule } from '../NativeModule/index'; -import { createOfficeColorAliasTokens, createOfficeShadowAliasTokens } from '../createOfficeAliasTokens'; -import { createFontAliasTokens } from '../createFontAliasTokens'; -import { createBrandedThemeWithAlias, getCurrentBrandAliasTokens } from '../createBrandedThemeWithAlias'; import { win32Typography } from '../getThemeTypography'; +import { fallbackGetPalette, fallbackOfficeModule, getThemingModule } from '../NativeModule/index'; const officeThemes = ['White', 'Colorful', 'DarkGray', 'Black', 'HighContrast']; const appPrimaries = ['#185abd', '#107c41', '#d83b01', '#80397b', '#0078d4', '#c43e1c']; diff --git a/packages/theming/win32-theme/src/createBrandedThemeWithAlias.ts b/packages/theming/win32-theme/src/createBrandedThemeWithAlias.ts index 41a48f41cc..402f16be13 100644 --- a/packages/theming/win32-theme/src/createBrandedThemeWithAlias.ts +++ b/packages/theming/win32-theme/src/createBrandedThemeWithAlias.ts @@ -1,7 +1,8 @@ -import type { Theme, PartialTheme, AliasColorTokens } from '@fluentui-react-native/theme-types'; -import { globalTokens } from '@fluentui-react-native/theme-tokens'; import type { ColorValue } from 'react-native'; +import { globalTokens } from '@fluentui-react-native/theme-tokens'; +import type { Theme, PartialTheme, AliasColorTokens } from '@fluentui-react-native/theme-types'; + export function createBrandedThemeWithAlias(themeName: string, theme: Theme): PartialTheme { if (themeName === 'HighContrast' || !theme.host.colors) { return {}; diff --git a/packages/theming/win32-theme/src/createFontAliasTokens.ts b/packages/theming/win32-theme/src/createFontAliasTokens.ts index 1bd0cfc5a4..6c19ca2cc8 100644 --- a/packages/theming/win32-theme/src/createFontAliasTokens.ts +++ b/packages/theming/win32-theme/src/createFontAliasTokens.ts @@ -1,8 +1,9 @@ -import { getOfficeAliasTokens } from './getOfficeTokens'; -import type { Variants } from '@fluentui-react-native/theme-types'; import { memoize } from '@fluentui-react-native/memo-cache'; +import type { Variants } from '@fluentui-react-native/theme-types'; import { mapFontPipelineToTheme } from '@fluentui-react-native/theming-utils'; +import { getOfficeAliasTokens } from './getOfficeTokens'; + function createFontAliasTokensWorker(): Partial { const aliasTokens = getOfficeAliasTokens('Colorful'); return mapFontPipelineToTheme(aliasTokens); diff --git a/packages/theming/win32-theme/src/createOfficeAliasTokens.ts b/packages/theming/win32-theme/src/createOfficeAliasTokens.ts index d37ce4417a..a8af95ebd8 100644 --- a/packages/theming/win32-theme/src/createOfficeAliasTokens.ts +++ b/packages/theming/win32-theme/src/createOfficeAliasTokens.ts @@ -1,8 +1,9 @@ -import { getOfficeAliasTokens, getOfficeShadowTokens } from './getOfficeTokens'; -import type { AliasColorTokens, ThemeShadowDefinition } from '@fluentui-react-native/theme-types'; import { memoize } from '@fluentui-react-native/memo-cache'; +import type { AliasColorTokens, ThemeShadowDefinition } from '@fluentui-react-native/theme-types'; import { mapPipelineToShadow, mapPipelineToTheme } from '@fluentui-react-native/theming-utils'; +import { getOfficeAliasTokens, getOfficeShadowTokens } from './getOfficeTokens'; + function createOfficeColorAliasTokensWorker(officeTheme: string): AliasColorTokens { const aliasTokens = getOfficeAliasTokens(officeTheme); return mapPipelineToTheme(aliasTokens); diff --git a/packages/theming/win32-theme/src/createOfficeTheme.ts b/packages/theming/win32-theme/src/createOfficeTheme.ts index 1c4e4b25e3..96d9c7c74f 100644 --- a/packages/theming/win32-theme/src/createOfficeTheme.ts +++ b/packages/theming/win32-theme/src/createOfficeTheme.ts @@ -1,13 +1,14 @@ -import { ThemeReference } from '@fluentui-react-native/theme'; import { createDefaultTheme } from '@fluentui-react-native/default-theme'; +import { ThemeReference } from '@fluentui-react-native/theme'; +import type { OfficePalette, Theme, ThemeOptions } from '@fluentui-react-native/theme-types'; + +import { createAliasesFromPalette } from './createAliasesFromPalette'; +import { createBrandedThemeWithAlias } from './createBrandedThemeWithAlias'; +import { createOfficeColorAliasTokens, createOfficeShadowAliasTokens } from './createOfficeAliasTokens'; +import { createPartialOfficeTheme } from './createPartialOfficeTheme'; +import { win32Typography } from './getThemeTypography'; import { getThemingModule } from './NativeModule/getThemingModule'; import type { CxxException, PlatformDefaultsChangedArgs } from './NativeModule/officeThemingModule'; -import type { OfficePalette, Theme, ThemeOptions } from '@fluentui-react-native/theme-types'; -import { createPartialOfficeTheme } from './createPartialOfficeTheme'; -import { createOfficeColorAliasTokens, createOfficeShadowAliasTokens } from './createOfficeAliasTokens'; -import { createBrandedThemeWithAlias } from './createBrandedThemeWithAlias'; -import { createAliasesFromPalette } from './createAliasesFromPalette'; -import { win32Typography } from './getThemeTypography'; function handlePaletteCall(palette: OfficePalette | CxxException): OfficePalette | undefined { const exception = palette as CxxException; diff --git a/packages/theming/win32-theme/src/createPartialOfficeTheme.ts b/packages/theming/win32-theme/src/createPartialOfficeTheme.ts index 0cbc75411a..fbba7bb62c 100644 --- a/packages/theming/win32-theme/src/createPartialOfficeTheme.ts +++ b/packages/theming/win32-theme/src/createPartialOfficeTheme.ts @@ -1,4 +1,5 @@ import type { OfficePalette, PartialTheme } from '@fluentui-react-native/theme-types'; + import type { OfficeThemingModule } from './NativeModule/officeThemingModule'; import { paletteFromOfficeColors } from './paletteFromOfficeColors'; diff --git a/packages/theming/win32-theme/src/getOfficeTokens.ts b/packages/theming/win32-theme/src/getOfficeTokens.ts index ffb1961374..4a00bbdc1e 100644 --- a/packages/theming/win32-theme/src/getOfficeTokens.ts +++ b/packages/theming/win32-theme/src/getOfficeTokens.ts @@ -1,12 +1,13 @@ -import colorfulAliasTokens from '@fluentui-react-native/design-tokens-win32/colorful/tokens-aliases.json'; -import darkGrayAliasTokens from '@fluentui-react-native/design-tokens-win32/darkgray/tokens-aliases.json'; import blackAliasTokens from '@fluentui-react-native/design-tokens-win32/black/tokens-aliases.json'; -import { hcAliasTokens } from './highContrast/tokens-alias'; -import colorfulShadowTokens from '@fluentui-react-native/design-tokens-win32/colorful/tokens-shadow.json'; -import darkGrayShadowTokens from '@fluentui-react-native/design-tokens-win32/darkgray/tokens-shadow.json'; import blackShadowTokens from '@fluentui-react-native/design-tokens-win32/black/tokens-shadow.json'; +import colorfulAliasTokens from '@fluentui-react-native/design-tokens-win32/colorful/tokens-aliases.json'; +import colorfulShadowTokens from '@fluentui-react-native/design-tokens-win32/colorful/tokens-shadow.json'; +import darkGrayAliasTokens from '@fluentui-react-native/design-tokens-win32/darkgray/tokens-aliases.json'; +import darkGrayShadowTokens from '@fluentui-react-native/design-tokens-win32/darkgray/tokens-shadow.json'; import hcShadowTokens from '@fluentui-react-native/design-tokens-win32/hc/tokens-shadow.json'; +import { hcAliasTokens } from './highContrast/tokens-alias'; + export function getOfficeAliasTokens(officeTheme: string) { if (officeTheme === 'White' || officeTheme === 'Colorful') { return colorfulAliasTokens; diff --git a/packages/theming/win32-theme/src/getThemeTypography.ts b/packages/theming/win32-theme/src/getThemeTypography.ts index f84403fae9..374bb24fcc 100644 --- a/packages/theming/win32-theme/src/getThemeTypography.ts +++ b/packages/theming/win32-theme/src/getThemeTypography.ts @@ -1,5 +1,6 @@ -import type { Typography, Variants } from '@fluentui-react-native/theme-types'; import { defaultFluentTheme } from '@fluentui-react-native/default-theme'; +import type { Typography, Variants } from '@fluentui-react-native/theme-types'; + import { createFontAliasTokens } from './createFontAliasTokens'; export function win32Typography(): Typography { diff --git a/packages/theming/win32-theme/src/highContrast/tokens-alias.ts b/packages/theming/win32-theme/src/highContrast/tokens-alias.ts index a685aaa4c5..c594541981 100644 --- a/packages/theming/win32-theme/src/highContrast/tokens-alias.ts +++ b/packages/theming/win32-theme/src/highContrast/tokens-alias.ts @@ -1,4 +1,5 @@ import { PlatformColor } from 'react-native'; + import aliasTokens from '@fluentui-react-native/design-tokens-win32/hc/tokens-aliases.json'; export const hcAliasTokens = processAliasTokens(aliasTokens); diff --git a/packages/utils/adapters/src/adapters.android.ts b/packages/utils/adapters/src/adapters.android.ts index 21b8b83351..cc873ec4af 100644 --- a/packages/utils/adapters/src/adapters.android.ts +++ b/packages/utils/adapters/src/adapters.android.ts @@ -1,4 +1,5 @@ import type { TextProps, TextPropsIOS, ViewProps, ViewPropsIOS, ImageProps, ImagePropsIOS } from 'react-native'; + import type { IFilterMask } from './filter.types'; // export core interface types diff --git a/packages/utils/adapters/src/adapters.ios.ts b/packages/utils/adapters/src/adapters.ios.ts index 4e7d4467d3..c7696fb149 100644 --- a/packages/utils/adapters/src/adapters.ios.ts +++ b/packages/utils/adapters/src/adapters.ios.ts @@ -1,4 +1,5 @@ import type { TextProps, TextPropsAndroid, ViewProps, ViewPropsAndroid, ImageProps, ImagePropsAndroid } from 'react-native'; + import type { IFilterMask } from './filter.types'; // export core interface types diff --git a/packages/utils/adapters/src/adapters.macos.ts b/packages/utils/adapters/src/adapters.macos.ts index 8eed4124b1..c547e4500f 100644 --- a/packages/utils/adapters/src/adapters.macos.ts +++ b/packages/utils/adapters/src/adapters.macos.ts @@ -1,4 +1,5 @@ import type { ImageProps, TextProps, ViewProps } from 'react-native-macos'; + import type { IFilterMask } from './filter.types'; // export core interface types diff --git a/packages/utils/adapters/src/adapters.ts b/packages/utils/adapters/src/adapters.ts index 8beab24d52..eab2bfbe36 100644 --- a/packages/utils/adapters/src/adapters.ts +++ b/packages/utils/adapters/src/adapters.ts @@ -1,7 +1,9 @@ import type { TextProps, ViewProps, ImageProps } from 'react-native'; -import type { IFilterMask } from './filter.types'; + import type { ITextWin32Props, IViewWin32Props } from '@office-iss/react-native-win32'; +import type { IFilterMask } from './filter.types'; + // export core interface types export type ITextProps = TextProps & Partial; export type IViewProps = ViewProps & Partial; diff --git a/packages/utils/adapters/src/adapters.win32.ts b/packages/utils/adapters/src/adapters.win32.ts index 7326e2f9b0..064096a5c6 100644 --- a/packages/utils/adapters/src/adapters.win32.ts +++ b/packages/utils/adapters/src/adapters.win32.ts @@ -1,5 +1,7 @@ -import type { ITextWin32Props, IViewWin32Props } from '@office-iss/react-native-win32'; import type { ImageProps } from 'react-native'; + +import type { ITextWin32Props, IViewWin32Props } from '@office-iss/react-native-win32'; + import type { IFilterMask } from './filter.types'; // export core interface types diff --git a/packages/utils/adapters/src/adapters.windows.ts b/packages/utils/adapters/src/adapters.windows.ts index 288a39c205..028854f500 100644 --- a/packages/utils/adapters/src/adapters.windows.ts +++ b/packages/utils/adapters/src/adapters.windows.ts @@ -1,6 +1,8 @@ -import type { IViewWindowsProps } from 'react-native-windows'; import type { TextProps } from 'react-native'; import type { ImageProps } from 'react-native'; + +import type { IViewWindowsProps } from 'react-native-windows'; + import type { IFilterMask } from './filter.types'; // export core interface types from RN diff --git a/packages/utils/interactive-hooks/src/Pressability/CoreEventTypes.ts b/packages/utils/interactive-hooks/src/Pressability/CoreEventTypes.ts index 94d3c4c216..f30665abe1 100644 --- a/packages/utils/interactive-hooks/src/Pressability/CoreEventTypes.ts +++ b/packages/utils/interactive-hooks/src/Pressability/CoreEventTypes.ts @@ -15,6 +15,7 @@ */ import type * as React from 'react'; + import type { HostComponent } from './InternalTypes'; export type SyntheticEvent = Readonly<{ diff --git a/packages/utils/interactive-hooks/src/Pressability/Pressability.ts b/packages/utils/interactive-hooks/src/Pressability/Pressability.ts index 972f1f80a5..98c6dcf437 100644 --- a/packages/utils/interactive-hooks/src/Pressability/Pressability.ts +++ b/packages/utils/interactive-hooks/src/Pressability/Pressability.ts @@ -10,9 +10,11 @@ 'use strict'; -import invariant from 'invariant'; import type * as React from 'react'; import { Platform, UIManager } from 'react-native'; + +import invariant from 'invariant'; + import type { BlurEvent, FocusEvent, MouseEvent, PressEvent } from './CoreEventTypes'; import { isHoverEnabled } from './HoverState'; import type { HostComponent, Rect } from './InternalTypes'; diff --git a/packages/utils/interactive-hooks/src/Pressability/Pressability.types.ts b/packages/utils/interactive-hooks/src/Pressability/Pressability.types.ts index 8757b3654e..d85f97cdf7 100644 --- a/packages/utils/interactive-hooks/src/Pressability/Pressability.types.ts +++ b/packages/utils/interactive-hooks/src/Pressability/Pressability.types.ts @@ -1,7 +1,8 @@ -import type { RectOrSize } from './InternalTypes'; -import type { BlurEvent, FocusEvent, PressEvent, MouseEvent } from './CoreEventTypes'; import type { ViewProps, PressableProps } from 'react-native'; +import type { BlurEvent, FocusEvent, PressEvent, MouseEvent } from './CoreEventTypes'; +import type { RectOrSize } from './InternalTypes'; + export type PressablePressProps = { /** * Called when a press gestute has been triggered. diff --git a/packages/utils/interactive-hooks/src/__tests__/events.types.test.ts b/packages/utils/interactive-hooks/src/__tests__/events.types.test.ts index 6b8356e49e..6685f5b264 100644 --- a/packages/utils/interactive-hooks/src/__tests__/events.types.test.ts +++ b/packages/utils/interactive-hooks/src/__tests__/events.types.test.ts @@ -1,6 +1,7 @@ import type { AccessibilityActionEvent, GestureResponderEvent } from 'react-native'; -import type { KeyPressEvent } from '../useKeyProps.types'; + import { isAccessibilityActionEvent, isGestureResponderEvent, isKeyPressEvent } from '../events.types'; +import type { KeyPressEvent } from '../useKeyProps.types'; const createMockEvent = (nativeEvent) => { return { diff --git a/packages/utils/interactive-hooks/src/__tests__/useKeyProps.test.tsx b/packages/utils/interactive-hooks/src/__tests__/useKeyProps.test.tsx index 7836ee9703..8b114f3db2 100644 --- a/packages/utils/interactive-hooks/src/__tests__/useKeyProps.test.tsx +++ b/packages/utils/interactive-hooks/src/__tests__/useKeyProps.test.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; -import * as renderer from 'react-test-renderer'; import { Pressable } from 'react-native'; -import { useKeyProps } from '../useKeyProps'; + import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools'; +import * as renderer from 'react-test-renderer'; + +import { useKeyProps } from '../useKeyProps'; import type { PressablePropsExtended } from '../usePressableState.types'; const dummyFunction = () => { diff --git a/packages/utils/interactive-hooks/src/events.types.ts b/packages/utils/interactive-hooks/src/events.types.ts index f13890ca38..6193b608cb 100644 --- a/packages/utils/interactive-hooks/src/events.types.ts +++ b/packages/utils/interactive-hooks/src/events.types.ts @@ -1,4 +1,5 @@ import type { AccessibilityActionEvent, GestureResponderEvent, MouseEvent } from 'react-native'; + import type { KeyPressEvent } from './useKeyProps.types'; export type InteractionEvent = GestureResponderEvent | MouseEvent | KeyPressEvent | AccessibilityActionEvent; diff --git a/packages/utils/interactive-hooks/src/getAccessibilityState.ts b/packages/utils/interactive-hooks/src/getAccessibilityState.ts index 6c70bfc607..19039b1fc5 100644 --- a/packages/utils/interactive-hooks/src/getAccessibilityState.ts +++ b/packages/utils/interactive-hooks/src/getAccessibilityState.ts @@ -1,6 +1,7 @@ -import { memoize } from '@fluentui-react-native/framework'; import type { AccessibilityState } from 'react-native'; +import { memoize } from '@fluentui-react-native/framework'; + export const getAccessibilityState = memoize(getAccessibilityStateWorker); export function getAccessibilityStateWorker(disabled: boolean, accessibilityState?: AccessibilityState) { if (accessibilityState) { diff --git a/packages/utils/interactive-hooks/src/useAsPressable.ts b/packages/utils/interactive-hooks/src/useAsPressable.ts index 503abc0dd1..60a6d6960b 100644 --- a/packages/utils/interactive-hooks/src/useAsPressable.ts +++ b/packages/utils/interactive-hooks/src/useAsPressable.ts @@ -1,4 +1,5 @@ import * as React from 'react'; + import type { PressableFocusProps, PressableHoverProps, PressablePressProps } from './Pressability/Pressability.types'; import type { IPressableHooks, diff --git a/packages/utils/interactive-hooks/src/useAsToggleWithEvent.ts b/packages/utils/interactive-hooks/src/useAsToggleWithEvent.ts index 3fcb4d19f5..0c91833a82 100644 --- a/packages/utils/interactive-hooks/src/useAsToggleWithEvent.ts +++ b/packages/utils/interactive-hooks/src/useAsToggleWithEvent.ts @@ -1,4 +1,5 @@ import * as React from 'react'; + import type { InteractionEvent } from '.'; export type OnToggleWithEventCallback = (e: InteractionEvent, value?: boolean) => void; diff --git a/packages/utils/interactive-hooks/src/useKeyProps.ts b/packages/utils/interactive-hooks/src/useKeyProps.ts index 7ee735e949..96b7da9499 100644 --- a/packages/utils/interactive-hooks/src/useKeyProps.ts +++ b/packages/utils/interactive-hooks/src/useKeyProps.ts @@ -1,6 +1,8 @@ import * as React from 'react'; import { Platform } from 'react-native'; + import { memoize } from '@fluentui-react-native/memo-cache'; + import type { KeyCallback, KeyPressEvent, KeyPressProps } from './useKeyProps.types'; /** diff --git a/packages/utils/interactive-hooks/src/usePressability.ts b/packages/utils/interactive-hooks/src/usePressability.ts index 92493ecfb9..68aed1343b 100644 --- a/packages/utils/interactive-hooks/src/usePressability.ts +++ b/packages/utils/interactive-hooks/src/usePressability.ts @@ -10,10 +10,11 @@ 'use strict'; -import type { PressabilityConfig, PressabilityEventHandlers } from './Pressability/Pressability.types'; -import { Pressability } from './Pressability/Pressability'; import { useEffect, useRef } from 'react'; +import { Pressability } from './Pressability/Pressability'; +import type { PressabilityConfig, PressabilityEventHandlers } from './Pressability/Pressability.types'; + export function usePressability(config: PressabilityConfig): PressabilityEventHandlers { const pressabilityRef = useRef(null); if (pressabilityRef.current == null) { diff --git a/packages/utils/interactive-hooks/src/usePressableState.ts b/packages/utils/interactive-hooks/src/usePressableState.ts index 8e583e9887..d35427b07f 100644 --- a/packages/utils/interactive-hooks/src/usePressableState.ts +++ b/packages/utils/interactive-hooks/src/usePressableState.ts @@ -1,4 +1,5 @@ import * as React from 'react'; + import type { HoverState, FocusState, diff --git a/packages/utils/interactive-hooks/src/usePressableState.types.ts b/packages/utils/interactive-hooks/src/usePressableState.types.ts index 62742b05ad..9711b12bd1 100644 --- a/packages/utils/interactive-hooks/src/usePressableState.types.ts +++ b/packages/utils/interactive-hooks/src/usePressableState.types.ts @@ -1,6 +1,7 @@ -import type { IViewProps } from '@fluentui-react-native/adapters'; import type { PressableProps } from 'react-native'; +import type { IViewProps } from '@fluentui-react-native/adapters'; + export type PressState = { pressed?: boolean; }; diff --git a/packages/utils/interactive-hooks/src/useViewCommandFocus.win32.ts b/packages/utils/interactive-hooks/src/useViewCommandFocus.win32.ts index de95e8c7c7..873f889cc9 100644 --- a/packages/utils/interactive-hooks/src/useViewCommandFocus.win32.ts +++ b/packages/utils/interactive-hooks/src/useViewCommandFocus.win32.ts @@ -1,6 +1,8 @@ import * as React from 'react'; import { findNodeHandle, UIManager } from 'react-native'; + import type { IViewWin32 } from '@office-iss/react-native-win32'; + import { setAndForwardRef } from './setAndForwardRef'; export type IFocusable = IViewWin32; diff --git a/packages/utils/test-tools/src/enzymeTests.test.tsx b/packages/utils/test-tools/src/enzymeTests.test.tsx index aec132b3a6..7a903ccc63 100644 --- a/packages/utils/test-tools/src/enzymeTests.test.tsx +++ b/packages/utils/test-tools/src/enzymeTests.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; + import { checkRenderConsistency, checkReRender } from './enzymeTests'; const fixedStyle = { diff --git a/packages/utils/tokens/src/border-tokens.ts b/packages/utils/tokens/src/border-tokens.ts index 2c5adc962b..3d85ebb242 100644 --- a/packages/utils/tokens/src/border-tokens.ts +++ b/packages/utils/tokens/src/border-tokens.ts @@ -1,7 +1,9 @@ import type { ViewStyle, ColorValue } from 'react-native'; -import type { OperationSet } from './token.types'; + import type { Theme } from '@fluentui-react-native/theme-types'; + import { getPaletteFromTheme } from './color-tokens'; +import type { OperationSet } from './token.types'; import { tokenBuilder } from './tokenBuilder'; export interface IBorderTokens { diff --git a/packages/utils/tokens/src/color-tokens.ts b/packages/utils/tokens/src/color-tokens.ts index c51ec82046..adb1080daa 100644 --- a/packages/utils/tokens/src/color-tokens.ts +++ b/packages/utils/tokens/src/color-tokens.ts @@ -1,7 +1,9 @@ -import type { Theme, ThemeColorDefinition } from '@fluentui-react-native/theme-types'; -import type { OperationSet } from './token.types'; import type { ColorValue } from 'react-native'; +import type { Theme, ThemeColorDefinition } from '@fluentui-react-native/theme-types'; + +import type { OperationSet } from './token.types'; + export interface IForegroundColorTokens { color?: ColorValue; } diff --git a/packages/utils/tokens/src/layout-tokens.ts b/packages/utils/tokens/src/layout-tokens.ts index 11c101e6af..a690713449 100644 --- a/packages/utils/tokens/src/layout-tokens.ts +++ b/packages/utils/tokens/src/layout-tokens.ts @@ -1,6 +1,8 @@ import type { ViewStyle } from 'react-native'; -import type { OperationSet } from './token.types'; + import type { Theme } from '@fluentui-react-native/theme-types'; + +import type { OperationSet } from './token.types'; import { tokenBuilder } from './tokenBuilder'; export interface LayoutTokens { diff --git a/packages/utils/tokens/src/shadow-tokens.ts b/packages/utils/tokens/src/shadow-tokens.ts index 7bfd850f11..6d712a4a99 100644 --- a/packages/utils/tokens/src/shadow-tokens.ts +++ b/packages/utils/tokens/src/shadow-tokens.ts @@ -1,6 +1,8 @@ import type { ColorValue } from 'react-native'; -import type { OperationSet } from './token.types'; + import type { Theme } from '@fluentui-react-native/theme-types'; + +import type { OperationSet } from './token.types'; import { tokenBuilder } from './tokenBuilder'; export interface IShadowTokens { diff --git a/packages/utils/tokens/src/text-tokens.ts b/packages/utils/tokens/src/text-tokens.ts index dacf87d19a..a2fdab0c0a 100644 --- a/packages/utils/tokens/src/text-tokens.ts +++ b/packages/utils/tokens/src/text-tokens.ts @@ -1,6 +1,8 @@ import type { TextStyle } from 'react-native'; + import type { ITextProps } from '@fluentui-react-native/adapters'; import type { Theme, Typography } from '@fluentui-react-native/theme-types'; + import { styleFunction } from './token.function'; import type { TokenBuilder } from './tokenBuilder'; diff --git a/packages/utils/tokens/src/tokenBuilder.ts b/packages/utils/tokens/src/tokenBuilder.ts index 5cdc2459ea..841d331f91 100644 --- a/packages/utils/tokens/src/tokenBuilder.ts +++ b/packages/utils/tokens/src/tokenBuilder.ts @@ -1,6 +1,7 @@ -import type { Theme } from '@fluentui-react-native/theme-types'; import type { ViewStyle, TextStyle, ImageStyle } from 'react-native'; +import type { Theme } from '@fluentui-react-native/theme-types'; + export type TokenBuilder = { from: (tokens: TTokens, theme: Theme) => ViewStyle | TextStyle | ImageStyle; keys: (keyof TTokens)[]; diff --git a/yarn.lock b/yarn.lock index 3367e868c0..801e16a912 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3726,6 +3726,11 @@ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3" integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ== +"@types/json5@^0.0.29": + version "0.0.29" + resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" + integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ== + "@types/keyv@^3.1.4": version "3.1.4" resolved "https://registry.yarnpkg.com/@types/keyv/-/keyv-3.1.4.tgz#3ccdb1c6751b0c7e52300bcdacd5bcbf8faa75b6" @@ -5256,7 +5261,7 @@ array.prototype.filter@^1.0.0: es-array-method-boxes-properly "^1.0.0" is-string "^1.0.7" -array.prototype.flat@^1.2.3: +array.prototype.flat@^1.2.3, array.prototype.flat@^1.3.1: version "1.3.1" resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz#ffc6576a7ca3efc2f46a143b9d1dda9b4b3cf5e2" integrity sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA== @@ -7607,6 +7612,43 @@ escodegen@^2.0.0: optionalDependencies: source-map "~0.6.1" +eslint-import-resolver-node@^0.3.7: + version "0.3.7" + resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz#83b375187d412324a1963d84fa664377a23eb4d7" + integrity sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA== + dependencies: + debug "^3.2.7" + is-core-module "^2.11.0" + resolve "^1.22.1" + +eslint-module-utils@^2.7.4: + version "2.7.4" + resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.4.tgz#4f3e41116aaf13a20792261e61d3a2e7e0583974" + integrity sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA== + dependencies: + debug "^3.2.7" + +eslint-plugin-import@^2.27.5: + version "2.27.5" + resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz#876a6d03f52608a3e5bb439c2550588e51dd6c65" + integrity sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow== + dependencies: + array-includes "^3.1.6" + array.prototype.flat "^1.3.1" + array.prototype.flatmap "^1.3.1" + debug "^3.2.7" + doctrine "^2.1.0" + eslint-import-resolver-node "^0.3.7" + eslint-module-utils "^2.7.4" + has "^1.0.3" + is-core-module "^2.11.0" + is-glob "^4.0.3" + minimatch "^3.1.2" + object.values "^1.1.6" + resolve "^1.22.1" + semver "^6.3.0" + tsconfig-paths "^3.14.1" + eslint-plugin-jest@^25.0.0: version "25.7.0" resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-25.7.0.tgz#ff4ac97520b53a96187bad9c9814e7d00de09a6a" @@ -9165,7 +9207,7 @@ is-ci@^2.0.0: dependencies: ci-info "^2.0.0" -is-core-module@^2.4.0, is-core-module@^2.9.0: +is-core-module@^2.11.0, is-core-module@^2.4.0, is-core-module@^2.9.0: version "2.11.0" resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144" integrity sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw== @@ -10399,6 +10441,13 @@ json-stable-stringify-without-jsonify@^1.0.1: resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651" integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw== +json5@^1.0.1: + version "1.0.2" + resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593" + integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA== + dependencies: + minimist "^1.2.0" + json5@^2.1.3, json5@^2.2.2: version "2.2.3" resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283" @@ -13389,7 +13438,7 @@ resolve.exports@^1.1.0: resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.1.tgz#05cfd5b3edf641571fd46fa608b610dda9ead999" integrity sha512-/NtpHNDN7jWhAaQ9BvBUYZ6YTXsRBgfqWFWP7BZBaoMJO/I3G5OFzvTuWNlZC3aPjins1F+TNrLKsGbH4rfsRQ== -resolve@^1.1.6, resolve@^1.10.0, resolve@^1.14.2, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.20.0: +resolve@^1.1.6, resolve@^1.10.0, resolve@^1.14.2, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.1: version "1.22.1" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177" integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw== @@ -14614,6 +14663,16 @@ ts-node@^8.10.1: source-map-support "^0.5.17" yn "3.1.1" +tsconfig-paths@^3.14.1: + version "3.14.1" + resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a" + integrity sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ== + dependencies: + "@types/json5" "^0.0.29" + json5 "^1.0.1" + minimist "^1.2.6" + strip-bom "^3.0.0" + tslib@^1.10.0, tslib@^1.8.1: version "1.14.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"