chore:(react-nav-preview) Scaffold AppItem (#32088)

change/@fluentui-react-nav-preview-19bf0a36-ee5b-4bec-8be9-b195b29bc9a7.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Adds AppItem and AppItemStatic, removes AppNode",
+  "packageName": "@fluentui/react-nav-preview",
+  "email": "matejera@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-nav-preview/library/etc/react-nav-preview.api.md

@@ -36,21 +36,38 @@ import type { Slot } from '@fluentui/react-utilities';
 import { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
-export const AppNode: ForwardRefComponent<AppNodeProps>;
+export const AppItem: ForwardRefComponent<AppItemProps>;
 
 // @public (undocumented)
-export const appNodeClassNames: SlotClassNames<AppNodeSlots>;
+export const appItemClassNames: SlotClassNames<AppItemSlots>;
 
 // @public
-export type AppNodeProps = ComponentProps<AppNodeSlots> & {};
+export type AppItemProps = ComponentProps<AppItemSlots> & {};
 
 // @public (undocumented)
-export type AppNodeSlots = {
+export type AppItemSlots = {
     root: Slot<'div'>;
 };
 
 // @public
-export type AppNodeState = ComponentState<AppNodeSlots>;
+export type AppItemState = ComponentState<AppItemSlots>;
+
+// @public
+export const AppItemStatic: ForwardRefComponent<AppItemStaticProps>;
+
+// @public (undocumented)
+export const appItemStaticClassNames: SlotClassNames<AppItemStaticSlots>;
+
+// @public
+export type AppItemStaticProps = ComponentProps<AppItemStaticSlots> & {};
+
+// @public (undocumented)
+export type AppItemStaticSlots = {
+    root: Slot<'div'>;
+};
+
+// @public
+export type AppItemStaticState = ComponentState<AppItemStaticSlots>;
 
 // @public
 export const Hamburger: ForwardRefComponent<HamburgerProps>;
@@ -320,7 +337,10 @@ export type NavSubItemState = ComponentState<NavSubItemSlots> & Pick<NavSubItemP
 export type RegisterNavItemEventHandler = (data: NavItemRegisterData) => void;
 
 // @public
-export const renderAppNode_unstable: (state: AppNodeState) => JSX.Element;
+export const renderAppItem_unstable: (state: AppItemState) => JSX.Element;
+
+// @public
+export const renderAppItemStatic_unstable: (state: AppItemStaticState) => JSX.Element;
 
 // @public (undocumented)
 export const renderNav_unstable: (state: NavState, contextValues: NavContextValues) => JSX.Element;
@@ -347,10 +367,16 @@ export const renderNavSubItem_unstable: (state: NavSubItemState) => JSX.Element;
 export const renderNavSubItemGroup_unstable: (state: NavSubItemGroupState) => JSX.Element | null;
 
 // @public
-export const useAppNode_unstable: (props: AppNodeProps, ref: React_2.Ref<HTMLDivElement>) => AppNodeState;
+export const useAppItem_unstable: (props: AppItemProps, ref: React_2.Ref<HTMLDivElement>) => AppItemState;
+
+// @public
+export const useAppItemStatic_unstable: (props: AppItemStaticProps, ref: React_2.Ref<HTMLDivElement>) => AppItemStaticState;
+
+// @public
+export const useAppItemStaticStyles_unstable: (state: AppItemStaticState) => AppItemStaticState;
 
 // @public
-export const useAppNodeStyles_unstable: (state: AppNodeState) => AppNodeState;
+export const useAppItemStyles_unstable: (state: AppItemState) => AppItemState;
 
 // @public
 export const useHamburger_unstable: (props: HamburgerProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => HamburgerState;

packages/react-components/react-nav-preview/library/src/AppItem.ts

@@ -0,0 +1 @@
+export * from './components/AppItem/index';

packages/react-components/react-nav-preview/library/src/AppItemStatic.ts

@@ -0,0 +1 @@
+export * from './components/AppItemStatic/index';

packages/react-components/react-nav-preview/library/src/components/AppNode/AppNode.test.tsx → packages/react-components/react-nav-preview/library/src/components/AppItem/AppItem.test.tsx

@@ -1,18 +1,18 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 import { isConformant } from '../../testing/isConformant';
-import { AppNode } from './AppNode';
+import { AppItem } from './AppItem';
 
-describe('AppNode', () => {
+describe('AppItem', () => {
   isConformant({
-    Component: AppNode,
-    displayName: 'AppNode',
+    Component: AppItem,
+    displayName: 'AppItem',
   });
 
   // TODO add more tests here, and create visual regression tests in /apps/vr-tests
 
   it('renders a default state', () => {
-    const result = render(<AppNode>Default AppNode</AppNode>);
+    const result = render(<AppItem>Default AppItem</AppItem>);
     expect(result.container).toMatchSnapshot();
   });
 });

packages/react-components/react-nav-preview/library/src/components/AppItem/AppItem.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useAppItem_unstable } from './useAppItem';
+import { renderAppItem_unstable } from './renderAppItem';
+import { useAppItemStyles_unstable } from './useAppItemStyles.styles';
+import type { AppItemProps } from './AppItem.types';
+
+/**
+ * AppItem component - TODO: add more docs
+ */
+export const AppItem: ForwardRefComponent<AppItemProps> = React.forwardRef((props, ref) => {
+  const state = useAppItem_unstable(props, ref);
+
+  useAppItemStyles_unstable(state);
+
+  /**
+   * @see https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/rfcs/react-components/convergence/custom-styling.md
+   *
+   * TODO: 💡 once package will become stable (PR which will be part of promoting PREVIEW package to STABLE),
+   *      - uncomment this line
+   *      - update types {@link file://./../../../../../../../packages/react-components/react-shared-contexts/library/src/CustomStyleHooksContext/CustomStyleHooksContext.ts#CustomStyleHooksContextValue}
+   *      - verify that custom global style override works for your component
+   */
+  // useCustomStyleHook_unstable('useAppItemStyles_unstable')(state);
+
+  return renderAppItem_unstable(state);
+});
+
+AppItem.displayName = 'AppItem';

packages/react-components/react-nav-preview/library/src/components/AppItem/AppItem.types.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+
+export type AppItemSlots = {
+  root: Slot<'div'>;
+};
+
+/**
+ * AppItem Props
+ */
+export type AppItemProps = ComponentProps<AppItemSlots> & {};
+
+/**
+ * State used in rendering AppItem
+ */
+export type AppItemState = ComponentState<AppItemSlots>;
+// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from AppItemProps.
+// & Required<Pick<AppItemProps, 'propName'>>

packages/react-components/react-nav-preview/library/src/components/AppItem/__snapshots__/AppItem.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AppItem renders a default state 1`] = `
+<div>
+  <div
+    class="fui-AppItem"
+  >
+    Default AppItem
+  </div>
+</div>
+`;

packages/react-components/react-nav-preview/library/src/components/AppItem/index.ts

@@ -0,0 +1,5 @@
+export * from './AppItem';
+export * from './AppItem.types';
+export * from './renderAppItem';
+export * from './useAppItem';
+export * from './useAppItemStyles.styles';

packages/react-components/react-nav-preview/library/src/components/AppNode/renderAppNode.tsx → packages/react-components/react-nav-preview/library/src/components/AppItem/renderAppItem.tsx

@@ -2,13 +2,13 @@
 /** @jsxImportSource @fluentui/react-jsx-runtime */
 
 import { assertSlots } from '@fluentui/react-utilities';
-import type { AppNodeState, AppNodeSlots } from './AppNode.types';
+import type { AppItemState, AppItemSlots } from './AppItem.types';
 
 /**
- * Render the final JSX of AppNode
+ * Render the final JSX of AppItem
  */
-export const renderAppNode_unstable = (state: AppNodeState) => {
-  assertSlots<AppNodeSlots>(state);
+export const renderAppItem_unstable = (state: AppItemState) => {
+  assertSlots<AppItemSlots>(state);
 
   // TODO Add additional slots in the appropriate place
   return <state.root />;

packages/react-components/react-nav-preview/library/src/components/AppNode/useAppNode.ts → packages/react-components/react-nav-preview/library/src/components/AppItem/useAppItem.ts

@@ -1,17 +1,17 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
-import type { AppNodeProps, AppNodeState } from './AppNode.types';
+import type { AppItemProps, AppItemState } from './AppItem.types';
 
 /**
- * Create the state required to render AppNode.
+ * Create the state required to render AppItem.
  *
- * The returned state can be modified with hooks such as useAppNodeStyles_unstable,
- * before being passed to renderAppNode_unstable.
+ * The returned state can be modified with hooks such as useAppItemStyles_unstable,
+ * before being passed to renderAppItem_unstable.
  *
- * @param props - props from this instance of AppNode
- * @param ref - reference to root HTMLDivElement of AppNode
+ * @param props - props from this instance of AppItem
+ * @param ref - reference to root HTMLDivElement of AppItem
  */
-export const useAppNode_unstable = (props: AppNodeProps, ref: React.Ref<HTMLDivElement>): AppNodeState => {
+export const useAppItem_unstable = (props: AppItemProps, ref: React.Ref<HTMLDivElement>): AppItemState => {
   return {
     // TODO add appropriate props/defaults
     components: {

packages/react-components/react-nav-preview/library/src/components/AppNode/useAppNodeStyles.styles.ts → packages/react-components/react-nav-preview/library/src/components/AppItem/useAppItemStyles.styles.ts

@@ -1,11 +1,11 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import type { AppNodeSlots, AppNodeState } from './AppNode.types';
+import type { AppItemSlots, AppItemState } from './AppItem.types';
 
-export const appNodeClassNames: SlotClassNames<AppNodeSlots> = {
-  root: 'fui-AppNode',
-  // TODO: add class names for all slots on AppNodeSlots.
-  // Should be of the form `<slotName>: 'fui-AppNode__<slotName>`
+export const appItemClassNames: SlotClassNames<AppItemSlots> = {
+  root: 'fui-AppItem',
+  // TODO: add class names for all slots on AppItemSlots.
+  // Should be of the form `<slotName>: 'fui-AppItem__<slotName>`
 };
 
 /**
@@ -20,13 +20,13 @@ const useStyles = makeStyles({
 });
 
 /**
- * Apply styling to the AppNode slots based on the state
+ * Apply styling to the AppItem slots based on the state
  */
-export const useAppNodeStyles_unstable = (state: AppNodeState): AppNodeState => {
+export const useAppItemStyles_unstable = (state: AppItemState): AppItemState => {
   'use no memo';
 
   const styles = useStyles();
-  state.root.className = mergeClasses(appNodeClassNames.root, styles.root, state.root.className);
+  state.root.className = mergeClasses(appItemClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);

packages/react-components/react-nav-preview/library/src/components/AppItemStatic/AppItemStatic.test.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { isConformant } from '../../testing/isConformant';
+import { AppItemStatic } from './AppItemStatic';
+
+describe('AppItemStatic', () => {
+  isConformant({
+    Component: AppItemStatic,
+    displayName: 'AppItemStatic',
+  });
+
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<AppItemStatic>Default AppItemStatic</AppItemStatic>);
+    expect(result.container).toMatchSnapshot();
+  });
+});

packages/react-components/react-nav-preview/library/src/components/AppItemStatic/AppItemStatic.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useAppItemStatic_unstable } from './useAppItemStatic';
+import { renderAppItemStatic_unstable } from './renderAppItemStatic';
+import { useAppItemStaticStyles_unstable } from './useAppItemStaticStyles.styles';
+import type { AppItemStaticProps } from './AppItemStatic.types';
+
+/**
+ * AppItemStatic component - TODO: add more docs
+ */
+export const AppItemStatic: ForwardRefComponent<AppItemStaticProps> = React.forwardRef((props, ref) => {
+  const state = useAppItemStatic_unstable(props, ref);
+
+  useAppItemStaticStyles_unstable(state);
+
+  /**
+   * @see https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/rfcs/react-components/convergence/custom-styling.md
+   *
+   * TODO: 💡 once package will become stable (PR which will be part of promoting PREVIEW package to STABLE),
+   *      - uncomment this line
+   *      - update types {@link file://./../../../../../../../packages/react-components/react-shared-contexts/library/src/CustomStyleHooksContext/CustomStyleHooksContext.ts#CustomStyleHooksContextValue}
+   *      - verify that custom global style override works for your component
+   */
+  // useCustomStyleHook_unstable('useAppItemStaticStyles_unstable')(state);
+
+  return renderAppItemStatic_unstable(state);
+});
+
+AppItemStatic.displayName = 'AppItemStatic';

packages/react-components/react-nav-preview/library/src/components/AppItemStatic/AppItemStatic.types.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+
+export type AppItemStaticSlots = {
+  root: Slot<'div'>;
+};
+
+/**
+ * AppItemStatic Props
+ */
+export type AppItemStaticProps = ComponentProps<AppItemStaticSlots> & {};
+
+/**
+ * State used in rendering AppItemStatic
+ */
+export type AppItemStaticState = ComponentState<AppItemStaticSlots>;
+// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from AppItemStaticProps.
+// & Required<Pick<AppItemStaticProps, 'propName'>>

packages/react-components/react-nav-preview/library/src/components/AppItemStatic/__snapshots__/AppItemStatic.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AppItemStatic renders a default state 1`] = `
+<div>
+  <div
+    class="fui-AppItemStatic"
+  >
+    Default AppItemStatic
+  </div>
+</div>
+`;

packages/react-components/react-nav-preview/library/src/components/AppItemStatic/index.ts

@@ -0,0 +1,5 @@
+export * from './AppItemStatic';
+export * from './AppItemStatic.types';
+export * from './renderAppItemStatic';
+export * from './useAppItemStatic';
+export * from './useAppItemStaticStyles.styles';

packages/react-components/react-nav-preview/library/src/components/AppItemStatic/renderAppItemStatic.tsx

@@ -0,0 +1,15 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource @fluentui/react-jsx-runtime */
+
+import { assertSlots } from '@fluentui/react-utilities';
+import type { AppItemStaticState, AppItemStaticSlots } from './AppItemStatic.types';
+
+/**
+ * Render the final JSX of AppItemStatic
+ */
+export const renderAppItemStatic_unstable = (state: AppItemStaticState) => {
+  assertSlots<AppItemStaticSlots>(state);
+
+  // TODO Add additional slots in the appropriate place
+  return <state.root />;
+};

packages/react-components/react-nav-preview/library/src/components/AppItemStatic/useAppItemStatic.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import type { AppItemStaticProps, AppItemStaticState } from './AppItemStatic.types';
+
+/**
+ * Create the state required to render AppItemStatic.
+ *
+ * The returned state can be modified with hooks such as useAppItemStaticStyles_unstable,
+ * before being passed to renderAppItemStatic_unstable.
+ *
+ * @param props - props from this instance of AppItemStatic
+ * @param ref - reference to root HTMLDivElement of AppItemStatic
+ */
+export const useAppItemStatic_unstable = (
+  props: AppItemStaticProps,
+  ref: React.Ref<HTMLDivElement>,
+): AppItemStaticState => {
+  return {
+    // TODO add appropriate props/defaults
+    components: {
+      // TODO add each slot's element type or component
+      root: 'div',
+    },
+    // TODO add appropriate slots, for example:
+    // mySlot: resolveShorthand(props.mySlot),
+    root: slot.always(
+      getIntrinsicElementProps('div', {
+        ref,
+        ...props,
+      }),
+      { elementType: 'div' },
+    ),
+  };
+};