From 446757f8607e479aa95f474665c39f3292cdeaf9 Mon Sep 17 00:00:00 2001 From: Ruriko Araki Date: Wed, 12 Jan 2022 11:14:01 -0800 Subject: [PATCH] Add prettier check to pipeline (#1334) * Rerun prettier * Change files * Add prettier check to pipeline --- .ado/azure-pipelines.yml | 4 +++ .../TestComponents/Common/iconExamples.tsx | 2 +- .../ContextualMenu/ContextualMenuTest.tsx | 13 +++++---- .../TestComponents/Drawer/DrawerTest.tsx | 3 +- ...-ee6eff02-8e77-4009-ab40-25ecb3d7f452.json | 7 +++++ ...-52aeb8dd-229d-4194-9c31-71c86107aeba.json | 7 +++++ ...-8bf46c6a-0b75-4b53-a0f5-3c12595953ab.json | 7 +++++ ...-7c669631-b3a1-4c00-ac06-3cba517b55fb.json | 7 +++++ ...-8091eb11-3ab9-4454-8f2d-ef355b03d255.json | 7 +++++ ...-133a03d3-5beb-4b4a-bee1-10072a57c569.json | 7 +++++ .../Button/src/Button.settings.win32.ts | 4 +-- packages/experimental/Drawer/src/Drawer.tsx | 9 +++--- .../experimental/Drawer/src/Drawer.types.ts | 9 ++---- packages/experimental/Tabs/src/Tabs.tsx | 6 ++-- packages/experimental/Tabs/src/Tabs.types.ts | 4 +-- .../experimental/Tabs/src/Tabs.windows.tsx | 25 ++++++++-------- packages/experimental/Tabs/src/useTabs.ts | 19 +++++++----- .../experimental/Tabs/src/useTabs.windows.ts | 29 +++++++++++++------ .../Tabs/src/useTabsItem.windows.ts | 6 ++-- .../token-input-light.android.json | 2 +- 20 files changed, 117 insertions(+), 60 deletions(-) create mode 100644 change/@fluentui-react-native-button-ee6eff02-8e77-4009-ab40-25ecb3d7f452.json create mode 100644 change/@fluentui-react-native-experimental-checkbox-52aeb8dd-229d-4194-9c31-71c86107aeba.json create mode 100644 change/@fluentui-react-native-experimental-drawer-8bf46c6a-0b75-4b53-a0f5-3c12595953ab.json create mode 100644 change/@fluentui-react-native-experimental-tabs-7c669631-b3a1-4c00-ac06-3cba517b55fb.json create mode 100644 change/@fluentui-react-native-tester-8091eb11-3ab9-4454-8f2d-ef355b03d255.json create mode 100644 change/@fluentui-react-native-theme-tokens-133a03d3-5beb-4b4a-bee1-10072a57c569.json diff --git a/.ado/azure-pipelines.yml b/.ado/azure-pipelines.yml index a4cf8f5ee0..2c7ec06aa4 100644 --- a/.ado/azure-pipelines.yml +++ b/.ado/azure-pipelines.yml @@ -24,6 +24,10 @@ jobs: yarn buildci displayName: 'yarn buildci' + - script: | + yarn prettier + displayName: 'check prettier' + - script: | yarn checkchange displayName: 'check change' diff --git a/apps/fluent-tester/src/FluentTester/TestComponents/Common/iconExamples.tsx b/apps/fluent-tester/src/FluentTester/TestComponents/Common/iconExamples.tsx index a385358b98..41dbcf3398 100644 --- a/apps/fluent-tester/src/FluentTester/TestComponents/Common/iconExamples.tsx +++ b/apps/fluent-tester/src/FluentTester/TestComponents/Common/iconExamples.tsx @@ -23,4 +23,4 @@ export const fontProps: FontIconProps = Platform.select({ }, }); -export const testImage = require('../Button/icon_24x24.png'); \ No newline at end of file +export const testImage = require('../Button/icon_24x24.png'); diff --git a/apps/fluent-tester/src/FluentTester/TestComponents/ContextualMenu/ContextualMenuTest.tsx b/apps/fluent-tester/src/FluentTester/TestComponents/ContextualMenu/ContextualMenuTest.tsx index cc6b0b9ef7..14df01d529 100644 --- a/apps/fluent-tester/src/FluentTester/TestComponents/ContextualMenu/ContextualMenuTest.tsx +++ b/apps/fluent-tester/src/FluentTester/TestComponents/ContextualMenu/ContextualMenuTest.tsx @@ -115,7 +115,6 @@ const contextualMenu: React.FunctionComponent = () => { }; const nestedContextualMenu: React.FunctionComponent = () => { - const stdBtnRef = React.useRef(null); const [showContextualMenu, setShowContextualMenu] = React.useState(false); @@ -163,7 +162,6 @@ const nestedContextualMenu: React.FunctionComponent = () => { console.log('submenu item clicked'); }, []); - return ( @@ -235,7 +233,6 @@ const nestedContextualMenu: React.FunctionComponent = () => { }; const IconContextualMenu: React.FunctionComponent = () => { - const stdBtnRef = React.useRef(null); const [showContextualMenu, setShowContextualMenu] = React.useState(false); @@ -442,7 +439,13 @@ const ScrollViewContextualMenu: React.FunctionComponent = () => { componentRef={stdMenuItemRef} /> {showSubmenu && ( - + @@ -486,7 +489,7 @@ const contextualMenuSections: TestSection[] = [ { name: 'ContextualMenu E2E Test', component: E2EContextualMenuTest, - }, + }, ]; export const ContextualMenuTest: React.FunctionComponent = () => { diff --git a/apps/fluent-tester/src/FluentTester/TestComponents/Drawer/DrawerTest.tsx b/apps/fluent-tester/src/FluentTester/TestComponents/Drawer/DrawerTest.tsx index a2e2fa6846..3a12ad90d5 100644 --- a/apps/fluent-tester/src/FluentTester/TestComponents/Drawer/DrawerTest.tsx +++ b/apps/fluent-tester/src/FluentTester/TestComponents/Drawer/DrawerTest.tsx @@ -32,8 +32,7 @@ export const DrawerTest: React.FunctionComponent = () => { androidStatus: 'Experimental', }; - const description = - 'A Drawer component using the Fluent Design System. Currently only implemented on Android.'; + const description = 'A Drawer component using the Fluent Design System. Currently only implemented on Android.'; return ; }; diff --git a/change/@fluentui-react-native-button-ee6eff02-8e77-4009-ab40-25ecb3d7f452.json b/change/@fluentui-react-native-button-ee6eff02-8e77-4009-ab40-25ecb3d7f452.json new file mode 100644 index 0000000000..2ea8f93a7d --- /dev/null +++ b/change/@fluentui-react-native-button-ee6eff02-8e77-4009-ab40-25ecb3d7f452.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Rerun prettier", + "packageName": "@fluentui-react-native/button", + "email": "ruaraki@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-native-experimental-checkbox-52aeb8dd-229d-4194-9c31-71c86107aeba.json b/change/@fluentui-react-native-experimental-checkbox-52aeb8dd-229d-4194-9c31-71c86107aeba.json new file mode 100644 index 0000000000..b98cddd5ea --- /dev/null +++ b/change/@fluentui-react-native-experimental-checkbox-52aeb8dd-229d-4194-9c31-71c86107aeba.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Rerun prettier", + "packageName": "@fluentui-react-native/experimental-checkbox", + "email": "ruaraki@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-native-experimental-drawer-8bf46c6a-0b75-4b53-a0f5-3c12595953ab.json b/change/@fluentui-react-native-experimental-drawer-8bf46c6a-0b75-4b53-a0f5-3c12595953ab.json new file mode 100644 index 0000000000..c96b0e0463 --- /dev/null +++ b/change/@fluentui-react-native-experimental-drawer-8bf46c6a-0b75-4b53-a0f5-3c12595953ab.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Rerun prettier", + "packageName": "@fluentui-react-native/experimental-drawer", + "email": "ruaraki@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-native-experimental-tabs-7c669631-b3a1-4c00-ac06-3cba517b55fb.json b/change/@fluentui-react-native-experimental-tabs-7c669631-b3a1-4c00-ac06-3cba517b55fb.json new file mode 100644 index 0000000000..c3929e0582 --- /dev/null +++ b/change/@fluentui-react-native-experimental-tabs-7c669631-b3a1-4c00-ac06-3cba517b55fb.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Rerun prettier", + "packageName": "@fluentui-react-native/experimental-tabs", + "email": "ruaraki@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-native-tester-8091eb11-3ab9-4454-8f2d-ef355b03d255.json b/change/@fluentui-react-native-tester-8091eb11-3ab9-4454-8f2d-ef355b03d255.json new file mode 100644 index 0000000000..6b90ef39d1 --- /dev/null +++ b/change/@fluentui-react-native-tester-8091eb11-3ab9-4454-8f2d-ef355b03d255.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Rerun prettier", + "packageName": "@fluentui-react-native/tester", + "email": "ruaraki@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-native-theme-tokens-133a03d3-5beb-4b4a-bee1-10072a57c569.json b/change/@fluentui-react-native-theme-tokens-133a03d3-5beb-4b4a-bee1-10072a57c569.json new file mode 100644 index 0000000000..3027f35c2d --- /dev/null +++ b/change/@fluentui-react-native-theme-tokens-133a03d3-5beb-4b4a-bee1-10072a57c569.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Rerun prettier", + "packageName": "@fluentui-react-native/theme-tokens", + "email": "ruaraki@microsoft.com", + "dependentChangeType": "none" +} diff --git a/packages/components/Button/src/Button.settings.win32.ts b/packages/components/Button/src/Button.settings.win32.ts index 7647d41bb1..3e72f44350 100644 --- a/packages/components/Button/src/Button.settings.win32.ts +++ b/packages/components/Button/src/Button.settings.win32.ts @@ -10,7 +10,7 @@ export const settings: IComposeSettings = [ borderColor: 'neutralStroke1', borderWidth: 1, borderRadius: 4, - wrapperBorderColor: 'transparent' + wrapperBorderColor: 'transparent', }, root: { accessible: true, @@ -28,7 +28,7 @@ export const settings: IComposeSettings = [ display: 'flex', flexGrow: 1, borderWidth: 1, - } + }, }, endIcon: { style: { diff --git a/packages/experimental/Drawer/src/Drawer.tsx b/packages/experimental/Drawer/src/Drawer.tsx index fa6495581f..721b49d529 100644 --- a/packages/experimental/Drawer/src/Drawer.tsx +++ b/packages/experimental/Drawer/src/Drawer.tsx @@ -1,8 +1,8 @@ /** @jsx withSlots */ import * as React from 'react'; -import { drawerName, DrawerTokens, DrawerProps, NativeDrawerProps, DrawerType} from './Drawer.types'; +import { drawerName, DrawerTokens, DrawerProps, NativeDrawerProps, DrawerType } from './Drawer.types'; import { compose, UseSlots, buildProps, mergeProps, withSlots } from '@fluentui-react-native/framework'; -import { findNodeHandle} from 'react-native'; +import { findNodeHandle } from 'react-native'; import { ensureNativeComponent } from '@fluentui-react-native/component-cache'; const FRNDrawer = ensureNativeComponent('FRNDrawer'); @@ -13,8 +13,7 @@ export const Drawer = compose({ slots: { root: FRNDrawer }, slotProps: { root: buildProps(() => ({ - style: { - }, + style: {}, })), }, render: (props: DrawerProps, useSlots: UseSlots) => { @@ -35,4 +34,4 @@ export const Drawer = compose({ }; }, }); -export default Drawer; \ No newline at end of file +export default Drawer; diff --git a/packages/experimental/Drawer/src/Drawer.types.ts b/packages/experimental/Drawer/src/Drawer.types.ts index 155cc03e75..daf01c6cad 100644 --- a/packages/experimental/Drawer/src/Drawer.types.ts +++ b/packages/experimental/Drawer/src/Drawer.types.ts @@ -16,14 +16,9 @@ export type DrawerSlotProps = { root: NativeDrawerProps; }; +export interface DrawerTokens {} -export interface DrawerTokens { - -} - -export interface DrawerState { - -} +export interface DrawerState {} export interface DrawerInfo { props: DrawerProps; diff --git a/packages/experimental/Tabs/src/Tabs.tsx b/packages/experimental/Tabs/src/Tabs.tsx index 08057b38aa..dfbb97b5d9 100644 --- a/packages/experimental/Tabs/src/Tabs.tsx +++ b/packages/experimental/Tabs/src/Tabs.tsx @@ -72,9 +72,9 @@ export const Tabs = compose({ {children} - - {context => !tabs?.state?.headersOnly && {context.views.get(context.selectedKey)}} - + + {(context) => !tabs?.state?.headersOnly && {context.views.get(context.selectedKey)}} + diff --git a/packages/experimental/Tabs/src/Tabs.types.ts b/packages/experimental/Tabs/src/Tabs.types.ts index 885a5fd7fe..990c8cc911 100644 --- a/packages/experimental/Tabs/src/Tabs.types.ts +++ b/packages/experimental/Tabs/src/Tabs.types.ts @@ -42,7 +42,7 @@ export interface TabsContextData { * Reference to the Focus Container as there is no FocusZone on windows. * GH #964 */ - focusZoneRef?: React.RefObject | null; + focusZoneRef?: React.RefObject | null; } export interface TabsTokens extends IForegroundColorTokens, FontTokens, IBackgroundColorTokens {} @@ -98,7 +98,7 @@ export interface TabsState { * Array of enabled keys in the group * Windows-Specific Prop. */ - enabledKeys?: string[]; + enabledKeys?: string[]; } export interface TabsInfo { props: TabsProps; diff --git a/packages/experimental/Tabs/src/Tabs.windows.tsx b/packages/experimental/Tabs/src/Tabs.windows.tsx index 581add00de..1cee81c6b3 100644 --- a/packages/experimental/Tabs/src/Tabs.windows.tsx +++ b/packages/experimental/Tabs/src/Tabs.windows.tsx @@ -20,7 +20,7 @@ export const TabsContext = React.createContext({ }, tabsItemKeys: [], views: null, - focusZoneRef: null + focusZoneRef: null, }); export const Tabs = compose({ @@ -30,21 +30,21 @@ export const Tabs = compose({ root: View, label: Text, stack: View, - tabPanel: View + tabPanel: View, }, render: (userProps: TabsProps, useSlots: UseSlots) => { // configure props and state for tabs based on user props const tabs = useTabs(userProps); - if(!tabs.state) return null; + if (!tabs.state) return null; // Grab the styled slots. - const Slots = useSlots(userProps, layer => tabs.state[layer] || userProps[layer]); + const Slots = useSlots(userProps, (layer) => tabs.state[layer] || userProps[layer]); const onKeyDown = (ev: any) => { if (ev.nativeEvent.key === 'ArrowRight' || ev.nativeEvent.key === 'ArrowLeft') { const length = tabs.state.enabledKeys.length; - const currTabItemIndex = tabs.state.enabledKeys.findIndex(x => x == tabs.state.context.selectedKey) + const currTabItemIndex = tabs.state.enabledKeys.findIndex((x) => x == tabs.state.context.selectedKey); let newCurrTabItemIndex; if (ev.nativeEvent.key === 'ArrowRight') { if (tabs.props.isCircularNavigation || !(currTabItemIndex + 1 == length)) { @@ -52,8 +52,7 @@ export const Tabs = compose({ tabs.state.context.selectedKey = tabs.state.enabledKeys[newCurrTabItemIndex]; tabs.state.context.onTabsClick(tabs.state.context.selectedKey); } - } - else { + } else { if (tabs.props.isCircularNavigation || !(currTabItemIndex == 0)) { newCurrTabItemIndex = (currTabItemIndex - 1 + length) % length; tabs.state.context.selectedKey = tabs.state.enabledKeys[newCurrTabItemIndex]; @@ -64,7 +63,9 @@ export const Tabs = compose({ }; const stackProps = { - focusable: true, ref: tabs.state.context.focusZoneRef, onKeyDown: onKeyDown + focusable: true, + ref: tabs.state.context.focusZoneRef, + onKeyDown: onKeyDown, }; // Return the handler to finish render. @@ -104,11 +105,11 @@ export const Tabs = compose({ > {tabs?.state?.label && {label}} - {children} + {children} - - {context => !tabs?.state?.headersOnly && {context.views.get(context.selectedKey)}} - + + {(context) => !tabs?.state?.headersOnly && {context.views.get(context.selectedKey)}} + diff --git a/packages/experimental/Tabs/src/useTabs.ts b/packages/experimental/Tabs/src/useTabs.ts index ce68800acf..9ef97eb650 100644 --- a/packages/experimental/Tabs/src/useTabs.ts +++ b/packages/experimental/Tabs/src/useTabs.ts @@ -26,18 +26,21 @@ export const useTabs = (props: TabsProps): TabsInfo => { [setSelectedTabsItemRef], ); - const findTabId = React.useCallback((key: string, index: number) => { - if (getTabId) { - return getTabId(key, index); - } - return `${key}-Tab${index}`; - }, [getTabId]); + const findTabId = React.useCallback( + (key: string, index: number) => { + if (getTabId) { + return getTabId(key, index); + } + return `${key}-Tab${index}`; + }, + [getTabId], + ); // Stores views to be displayed. const map = new Map(); const state: TabsState = { - context:{ + context: { selectedKey: selectedKey ?? data.selectedKey, onTabsClick: data.onKeySelect, getTabId: findTabId, @@ -58,7 +61,7 @@ export const useTabs = (props: TabsProps): TabsInfo => { isCircularNavigation: props.isCircularNavigation ?? false, }, state: { - ...state + ...state, }, }; }; diff --git a/packages/experimental/Tabs/src/useTabs.windows.ts b/packages/experimental/Tabs/src/useTabs.windows.ts index ca3826493c..787feb41c9 100644 --- a/packages/experimental/Tabs/src/useTabs.windows.ts +++ b/packages/experimental/Tabs/src/useTabs.windows.ts @@ -12,16 +12,28 @@ import { TabsProps, TabsState, TabsInfo } from './Tabs.types'; export const useTabs = (props: TabsProps): TabsInfo => { const defaultComponentRef = React.useRef(null); const focusZoneRef = React.useRef(null); - const { componentRef = defaultComponentRef, selectedKey, getTabId, onTabsClick, defaultSelectedKey, isCircularNavigation, headersOnly, label } = props; + const { + componentRef = defaultComponentRef, + selectedKey, + getTabId, + onTabsClick, + defaultSelectedKey, + isCircularNavigation, + headersOnly, + label, + } = props; const data = useSelectedKey(selectedKey || defaultSelectedKey || null, onTabsClick); - const findTabId = React.useCallback((key: string, index: number) => { - if (getTabId) { - return getTabId(key, index); - } - return `${key}-Tab${index}`; - }, [getTabId]); + const findTabId = React.useCallback( + (key: string, index: number) => { + if (getTabId) { + return getTabId(key, index); + } + return `${key}-Tab${index}`; + }, + [getTabId], + ); // Stores views to be displayed. const map = new Map(); @@ -38,7 +50,6 @@ export const useTabs = (props: TabsProps): TabsInfo => { label: !!label, }; - return { props: { ...props, @@ -48,7 +59,7 @@ export const useTabs = (props: TabsProps): TabsInfo => { isCircularNavigation: isCircularNavigation ?? false, }, state: { - ...state + ...state, }, }; }; diff --git a/packages/experimental/Tabs/src/useTabsItem.windows.ts b/packages/experimental/Tabs/src/useTabsItem.windows.ts index 0e9b770637..740af37818 100644 --- a/packages/experimental/Tabs/src/useTabsItem.windows.ts +++ b/packages/experimental/Tabs/src/useTabsItem.windows.ts @@ -19,7 +19,7 @@ export const useTabsItem = (props: TabsItemProps): TabsItemInfo => { const changeSelection = React.useCallback(() => { info.focusZoneRef?.current?.focus(); // GH #964, FocusZone not implemented on windows. info.onTabsClick && info.onTabsClick(itemKey); - info.getTabId && info.getTabId(itemKey, info.tabsItemKeys.findIndex(x => x == itemKey) + 1); + info.getTabId && info.getTabId(itemKey, info.tabsItemKeys.findIndex((x) => x == itemKey) + 1); info.updateSelectedTabsItemRef && componentRef && info.updateSelectedTabsItemRef(componentRef); }, [componentRef, info, itemKey]); @@ -65,13 +65,13 @@ export const useTabsItem = (props: TabsItemProps): TabsItemInfo => { focusable: false, headerText: headerText ?? '', accessibilityState: { disabled: disabled, selected: info.selectedKey === itemKey }, - accessibilityActions: [{ name: 'Select'}], + accessibilityActions: [{ name: 'Select' }], onAccessibilityAction: onAccessibilityAction, itemCount: itemCount, itemKey: itemKey, }, state: { - ...state + ...state, }, }; }; diff --git a/packages/theming/theme-tokens/src/pipeline-input/token-input-light.android.json b/packages/theming/theme-tokens/src/pipeline-input/token-input-light.android.json index 345dd43073..4c31d9390b 100644 --- a/packages/theming/theme-tokens/src/pipeline-input/token-input-light.android.json +++ b/packages/theming/theme-tokens/src/pipeline-input/token-input-light.android.json @@ -108,7 +108,7 @@ "Hover": { "aliasOf": "Global.Color.Brand.Shade.10" }, "Pressed": { "aliasOf": "Global.Color.Brand.Shade.30" }, "Selected": { "aliasOf": "Global.Color.Brand.Shade.20" }, - "Disabled": { "aliasOf": "Global.Color.Grey.88"} + "Disabled": { "aliasOf": "Global.Color.Grey.88" } } } },