From ba0b6c57703f35cb703243c77ecdce6cff1c0e51 Mon Sep 17 00:00:00 2001 From: "Geoff Cox (Microsoft)" Date: Fri, 19 Jul 2024 14:42:59 -0700 Subject: [PATCH] chore: remove component poster (#32057) --- apps/public-docsite-v9/.storybook/preview.js | 1 - .../src/Concepts/Poster/AreaCard.styles.ts | 32 -- .../src/Concepts/Poster/AreaCard.tsx | 45 --- .../Concepts/Poster/CodeItemCard.styles.ts | 23 -- .../src/Concepts/Poster/CodeItemCard.tsx | 26 -- .../src/Concepts/Poster/CodeItemIcons.tsx | 41 -- .../src/Concepts/Poster/Legend.styles.ts | 19 - .../src/Concepts/Poster/Legend.tsx | 23 -- .../Concepts/Poster/OverviewCard.styles.ts | 49 --- .../src/Concepts/Poster/OverviewCard.tsx | 45 --- .../src/Concepts/Poster/PackageCard.styles.ts | 47 --- .../src/Concepts/Poster/PackageCard.tsx | 60 --- .../src/Concepts/Poster/Poster.stories.mdx | 7 - .../src/Concepts/Poster/Poster.styles.ts | 31 -- .../src/Concepts/Poster/Poster.tsx | 45 --- .../src/Concepts/Poster/metadata.ts | 367 ------------------ .../src/Concepts/Poster/types.ts | 22 -- 17 files changed, 883 deletions(-) delete mode 100644 apps/public-docsite-v9/src/Concepts/Poster/AreaCard.styles.ts delete mode 100644 apps/public-docsite-v9/src/Concepts/Poster/AreaCard.tsx delete mode 100644 apps/public-docsite-v9/src/Concepts/Poster/CodeItemCard.styles.ts delete mode 100644 apps/public-docsite-v9/src/Concepts/Poster/CodeItemCard.tsx delete mode 100644 apps/public-docsite-v9/src/Concepts/Poster/CodeItemIcons.tsx delete mode 100644 apps/public-docsite-v9/src/Concepts/Poster/Legend.styles.ts delete mode 100644 apps/public-docsite-v9/src/Concepts/Poster/Legend.tsx delete mode 100644 apps/public-docsite-v9/src/Concepts/Poster/OverviewCard.styles.ts delete mode 100644 apps/public-docsite-v9/src/Concepts/Poster/OverviewCard.tsx delete mode 100644 apps/public-docsite-v9/src/Concepts/Poster/PackageCard.styles.ts delete mode 100644 apps/public-docsite-v9/src/Concepts/Poster/PackageCard.tsx delete mode 100644 apps/public-docsite-v9/src/Concepts/Poster/Poster.stories.mdx delete mode 100644 apps/public-docsite-v9/src/Concepts/Poster/Poster.styles.ts delete mode 100644 apps/public-docsite-v9/src/Concepts/Poster/Poster.tsx delete mode 100644 apps/public-docsite-v9/src/Concepts/Poster/metadata.ts delete mode 100644 apps/public-docsite-v9/src/Concepts/Poster/types.ts diff --git a/apps/public-docsite-v9/.storybook/preview.js b/apps/public-docsite-v9/.storybook/preview.js index 561973bd2f128..d28c81aff0fe1 100644 --- a/apps/public-docsite-v9/.storybook/preview.js +++ b/apps/public-docsite-v9/.storybook/preview.js @@ -32,7 +32,6 @@ export const parameters = { 'Quick Start', 'Styling Components', 'Positioning Components', - 'Component Poster', 'Server-Side Rendering', ['Basic setup', 'Next.js setup', 'Limitations with Portals'], ], diff --git a/apps/public-docsite-v9/src/Concepts/Poster/AreaCard.styles.ts b/apps/public-docsite-v9/src/Concepts/Poster/AreaCard.styles.ts deleted file mode 100644 index 5adce233cb70b..0000000000000 --- a/apps/public-docsite-v9/src/Concepts/Poster/AreaCard.styles.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { makeStyles, shorthands, tokens, typographyStyles } from '@fluentui/react-components'; - -export const useAreaCardStyles = makeStyles({ - root: { - ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralBackground3), - ...shorthands.borderRadius(tokens.borderRadiusMedium), - ...shorthands.overflow('visible'), - ...shorthands.padding('40px'), - boxSizing: 'border-box', - boxShadow: tokens.shadow16, - ...shorthands.margin('50px'), - }, - title: { - ...typographyStyles.subtitle1, - color: tokens.colorBrandForeground2, - }, - items: { - alignContent: 'flex-start', - alignItems: 'flex-start', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - justifyItems: 'flex-start', - }, - column: { - alignItems: 'flex-start', - display: 'flex', - flexDirection: 'column', - justifyContent: 'flex-start', - justifyItems: 'flex-start', - }, -}); diff --git a/apps/public-docsite-v9/src/Concepts/Poster/AreaCard.tsx b/apps/public-docsite-v9/src/Concepts/Poster/AreaCard.tsx deleted file mode 100644 index e47a15ac94cb5..0000000000000 --- a/apps/public-docsite-v9/src/Concepts/Poster/AreaCard.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; - -import { useAreaCardStyles } from './AreaCard.styles'; -import { PackageCard } from './PackageCard'; -import { AreaInfo, PackageInfo } from './types'; - -type Props = { - areaInfo: AreaInfo; -}; - -export const AreaCard: React.FunctionComponent = props => { - const { - areaInfo: { name, packages }, - } = props; - - const styles = useAreaCardStyles(); - - const columns: PackageInfo[][] = []; - let currentColumn: PackageInfo[] = []; - columns.push(currentColumn); - - packages.forEach(packageInfo => { - if (packageInfo.newColumn) { - currentColumn = []; - columns.push(currentColumn); - } - currentColumn.push(packageInfo); - }); - - return ( -
-
{name}
-
- {columns.map(column => ( - // eslint-disable-next-line react/jsx-key -
- {column.map(packageInfo => ( - - ))} -
- ))} -
-
- ); -}; diff --git a/apps/public-docsite-v9/src/Concepts/Poster/CodeItemCard.styles.ts b/apps/public-docsite-v9/src/Concepts/Poster/CodeItemCard.styles.ts deleted file mode 100644 index fe61e2b36f6e1..0000000000000 --- a/apps/public-docsite-v9/src/Concepts/Poster/CodeItemCard.styles.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { makeStyles, shorthands, tokens } from '@fluentui/react-components'; - -export const useCodeItemCardStyles = makeStyles({ - root: { - backgroundColor: tokens.colorNeutralBackground2, - boxShadow: tokens.shadow4, - boxSizing: 'border-box', - ...shorthands.border('1px', 'solid', tokens.colorNeutralBackground5), - ...shorthands.borderRadius(tokens.borderRadiusLarge), - ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalM), - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - ...shorthands.margin(tokens.spacingVerticalXS, tokens.spacingHorizontalXS), - }, - icon: { - color: tokens.colorNeutralForeground4, - }, - name: { - display: 'inline', - marginLeft: tokens.spacingHorizontalSNudge, - }, -}); diff --git a/apps/public-docsite-v9/src/Concepts/Poster/CodeItemCard.tsx b/apps/public-docsite-v9/src/Concepts/Poster/CodeItemCard.tsx deleted file mode 100644 index 1d85121577c86..0000000000000 --- a/apps/public-docsite-v9/src/Concepts/Poster/CodeItemCard.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import * as React from 'react'; - -import { ComponentIcon, ConstantIcon, HookIcon, MethodIcon, TypeIcon } from './CodeItemIcons'; -import { useCodeItemCardStyles } from './CodeItemCard.styles'; -import { CodeItemInfo } from './types'; - -type Props = { - codeItemInfo: CodeItemInfo; -}; - -export const CodeItemCard: React.FunctionComponent = props => { - const { codeItemInfo } = props; - - const styles = useCodeItemCardStyles(); - - return ( -
- {codeItemInfo.componentType === 'component' && } - {codeItemInfo.componentType === 'hook' && } - {codeItemInfo.componentType === 'constant' && } - {codeItemInfo.componentType === 'method' && } - {codeItemInfo.componentType === 'type' && } -
{codeItemInfo.name}
-
- ); -}; diff --git a/apps/public-docsite-v9/src/Concepts/Poster/CodeItemIcons.tsx b/apps/public-docsite-v9/src/Concepts/Poster/CodeItemIcons.tsx deleted file mode 100644 index 8efa15f47ed91..0000000000000 --- a/apps/public-docsite-v9/src/Concepts/Poster/CodeItemIcons.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import * as React from 'react'; - -export const ComponentIcon: React.FunctionComponent = () => { - return ( - - - - ); -}; - -export const HookIcon: React.FunctionComponent = () => { - return ( - - - - ); -}; - -export const MethodIcon: React.FunctionComponent = () => { - return ( - - - - ); -}; - -export const ConstantIcon: React.FunctionComponent = () => { - return ( - - - - ); -}; - -export const TypeIcon: React.FunctionComponent = () => { - return ( - - - - ); -}; diff --git a/apps/public-docsite-v9/src/Concepts/Poster/Legend.styles.ts b/apps/public-docsite-v9/src/Concepts/Poster/Legend.styles.ts deleted file mode 100644 index 66344c2927fff..0000000000000 --- a/apps/public-docsite-v9/src/Concepts/Poster/Legend.styles.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { makeStyles, shorthands, tokens } from '@fluentui/react-components'; - -export const useLegendStyles = makeStyles({ - root: { - alignItems: 'center', - backgroundColor: tokens.colorNeutralBackground1, - boxSizing: 'border-box', - display: 'grid', - gridTemplateColumns: 'auto auto', - rowGap: tokens.spacingVerticalMNudge, - columnGap: tokens.spacingHorizontalSNudge, - ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalM), - ...shorthands.margin(tokens.spacingVerticalXS, tokens.spacingHorizontalXS), - }, - icon: { - color: tokens.colorNeutralForeground4, - }, - name: {}, -}); diff --git a/apps/public-docsite-v9/src/Concepts/Poster/Legend.tsx b/apps/public-docsite-v9/src/Concepts/Poster/Legend.tsx deleted file mode 100644 index 71c8bc75437c6..0000000000000 --- a/apps/public-docsite-v9/src/Concepts/Poster/Legend.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; - -import { ComponentIcon, ConstantIcon, HookIcon, MethodIcon, TypeIcon } from './CodeItemIcons'; -import { useLegendStyles } from './Legend.styles'; - -export const Legend: React.FunctionComponent = () => { - const styles = useLegendStyles(); - - return ( -
- -
Component
- -
Hook
- -
Constant
- -
Method
- -
Type
-
- ); -}; diff --git a/apps/public-docsite-v9/src/Concepts/Poster/OverviewCard.styles.ts b/apps/public-docsite-v9/src/Concepts/Poster/OverviewCard.styles.ts deleted file mode 100644 index 567e4d2580759..0000000000000 --- a/apps/public-docsite-v9/src/Concepts/Poster/OverviewCard.styles.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { makeStyles, shorthands, tokens, typographyStyles } from '@fluentui/react-components'; - -export const useOverviewCardStyles = makeStyles({ - root: { - ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralBackground3), - ...shorthands.borderRadius(tokens.borderRadiusMedium), - ...shorthands.overflow('visible'), - ...shorthands.padding('40px'), - boxSizing: 'border-box', - boxShadow: tokens.shadow16, - ...shorthands.margin('50px'), - display: 'flex', - flexDirection: 'column', - }, - header: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - }, - title: { - ...typographyStyles.title1, - }, - tagline: { - ...typographyStyles.caption1, - }, - features: { - display: 'flex', - alignItems: 'center', - alignContent: 'center', - }, - logo: { - alignSelf: 'center', - width: '400px', - }, - featuresList: { - display: 'grid', - gridTemplateRows: '50px auto 50px auto 50px auto', - gridTemplateColumns: '180px', - alignItems: 'center', - justifyItems: 'center', - justifyContent: 'center', - rowGap: '5px', - ...shorthands.padding('30px', 0, 0, '30px'), - }, - featureText: { - ...typographyStyles.caption2, - ...shorthands.margin('10px'), - }, -}); diff --git a/apps/public-docsite-v9/src/Concepts/Poster/OverviewCard.tsx b/apps/public-docsite-v9/src/Concepts/Poster/OverviewCard.tsx deleted file mode 100644 index 902aab9a6244f..0000000000000 --- a/apps/public-docsite-v9/src/Concepts/Poster/OverviewCard.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; -import { Image } from '@fluentui/react-components'; -import { useOverviewCardStyles } from './OverviewCard.styles'; - -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore -import logoImageSrc from '../../../public/fluent9.png'; - -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore -import chevronsImageSrc from '../../../public/fluent9-chevrons.png'; - -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore -import starsImageSrc from '../../../public/fluent9-stars.png'; - -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore -import springImageSrc from '../../../public/fluent9-spring.png'; - -export const OverviewCard: React.FunctionComponent = () => { - const styles = useOverviewCardStyles(); - - return ( -
-
-
Fluent UI React
-
Smaller, faster, and just as powerful—welcome to v9.
-
-
- Fluent 9 -
- Fluent 9 chevrons -
- Lightweight components for smaller bundle size and faster performance -
- Fluent 9 stars -
New tokens system for frictionless cohesion across OS themes
- Fluent 9 spring -
New assets to level up Teams add-ins and M365 experiences
-
-
-
- ); -}; diff --git a/apps/public-docsite-v9/src/Concepts/Poster/PackageCard.styles.ts b/apps/public-docsite-v9/src/Concepts/Poster/PackageCard.styles.ts deleted file mode 100644 index eed1ae8fbc39a..0000000000000 --- a/apps/public-docsite-v9/src/Concepts/Poster/PackageCard.styles.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { makeStyles, shorthands, tokens } from '@fluentui/react-components'; - -export const usePackageCardStyles = makeStyles({ - root: { - boxShadow: tokens.shadow8, - boxSizing: 'border-box', - ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2), - ...shorthands.margin(tokens.spacingVerticalMNudge, tokens.spacingHorizontalMNudge), - display: 'flex', - flexDirection: 'column', - }, - header: { - display: 'flex', - alignItems: 'center', - ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS), - }, - title: { - fontSize: tokens.fontSizeBase200, - fontWeight: tokens.fontWeightSemibold, - color: tokens.colorNeutralForeground2, - marginLeft: tokens.spacingHorizontalXS, - }, - packageIcon: { - color: tokens.colorNeutralForeground4, - }, - items: { - alignContent: 'flex-start', - alignItems: 'flex-start', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - justifyItems: 'flex-start', - ...shorthands.padding( - tokens.spacingVerticalNone, - tokens.spacingHorizontalM, - tokens.spacingVerticalS, - tokens.spacingHorizontalM, - ), - }, - column: { - alignItems: 'flex-start', - display: 'flex', - flexDirection: 'column', - justifyContent: 'flex-start', - justifyItems: 'flex-start', - }, -}); diff --git a/apps/public-docsite-v9/src/Concepts/Poster/PackageCard.tsx b/apps/public-docsite-v9/src/Concepts/Poster/PackageCard.tsx deleted file mode 100644 index 9f3d3fe673439..0000000000000 --- a/apps/public-docsite-v9/src/Concepts/Poster/PackageCard.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import * as React from 'react'; - -import { CodeItemInfo, PackageInfo } from './types'; -import { CodeItemCard } from './CodeItemCard'; -import { usePackageCardStyles } from './PackageCard.styles'; - -type Props = { - packageInfo: PackageInfo; -}; - -export const PackageCard: React.FunctionComponent = props => { - const { - packageInfo: { codeItems, name }, - } = props; - - const styles = usePackageCardStyles(); - - const columns: CodeItemInfo[][] = []; - let currentColumn: CodeItemInfo[] = []; - columns.push(currentColumn); - - codeItems.forEach(codeItemInfo => { - if (codeItemInfo.newColumn) { - currentColumn = []; - columns.push(currentColumn); - } - currentColumn.push(codeItemInfo); - }); - - return ( -
-
- - - -
{name}
-
-
- {columns.map(column => ( - // eslint-disable-next-line react/jsx-key -
- {column.map(codeItemInfo => ( - - ))} -
- ))} -
-
- ); -}; diff --git a/apps/public-docsite-v9/src/Concepts/Poster/Poster.stories.mdx b/apps/public-docsite-v9/src/Concepts/Poster/Poster.stories.mdx deleted file mode 100644 index c2885ab35c3c9..0000000000000 --- a/apps/public-docsite-v9/src/Concepts/Poster/Poster.stories.mdx +++ /dev/null @@ -1,7 +0,0 @@ -import { Meta } from '@storybook/addon-docs'; - -import { Poster } from './Poster'; - - - - diff --git a/apps/public-docsite-v9/src/Concepts/Poster/Poster.styles.ts b/apps/public-docsite-v9/src/Concepts/Poster/Poster.styles.ts deleted file mode 100644 index 2fe878f73191c..0000000000000 --- a/apps/public-docsite-v9/src/Concepts/Poster/Poster.styles.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { makeStyles, shorthands, tokens } from '@fluentui/react-components'; - -export const usePosterStyles = makeStyles({ - root: { - ...shorthands.padding('40px'), - ...shorthands.overflow('auto'), - width: 'fit-content', - backgroundColor: tokens.colorNeutralBackground1, - color: tokens.colorNeutralForeground1, - }, - items: { - alignContent: 'flex-start', - alignItems: 'flex-start', - display: 'flex', - flexDirection: 'column', - justifyContent: 'flex-start', - justifyItems: 'flex-start', - width: 'unset', //Needed to prevent cascade of width:fit-content - }, - row: { - alignContent: 'flex-start', - alignItems: 'flex-start', - display: 'flex', - flexDirection: 'row', - justifyContent: 'flex-start', - justifyItems: 'flex-start', - }, - legend: { - ...shorthands.margin(0, '40px'), - }, -}); diff --git a/apps/public-docsite-v9/src/Concepts/Poster/Poster.tsx b/apps/public-docsite-v9/src/Concepts/Poster/Poster.tsx deleted file mode 100644 index 01569eb2e85ef..0000000000000 --- a/apps/public-docsite-v9/src/Concepts/Poster/Poster.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; -import { FluentProvider, webLightTheme } from '@fluentui/react-components'; -import { libraryInfo } from './metadata'; -import { AreaCard } from './AreaCard'; -import { AreaInfo } from './types'; -import { Legend } from './Legend'; -import { OverviewCard } from './OverviewCard'; -import { usePosterStyles } from './Poster.styles'; - -export const Poster: React.FunctionComponent = () => { - const styles = usePosterStyles(); - - const rows: AreaInfo[][] = []; - let currentRow: AreaInfo[] = []; - rows.push(currentRow); - - libraryInfo.areas.forEach(areaInfo => { - if (areaInfo.newRow) { - currentRow = []; - rows.push(currentRow); - } - currentRow.push(areaInfo); - }); - - return ( - -
-
- {rows.map((row, index, arr) => ( - // eslint-disable-next-line react/jsx-key -
- {index === 0 && } - {row.map(areaInfo => ( - - ))} -
- ))} -
- -
-
-
- - ); -}; diff --git a/apps/public-docsite-v9/src/Concepts/Poster/metadata.ts b/apps/public-docsite-v9/src/Concepts/Poster/metadata.ts deleted file mode 100644 index 55a7e66b9a2c0..0000000000000 --- a/apps/public-docsite-v9/src/Concepts/Poster/metadata.ts +++ /dev/null @@ -1,367 +0,0 @@ -import { LibraryInfo } from './types'; - -export const libraryInfo: LibraryInfo = { - name: 'Fluent UI React v9', - areas: [ - { - name: 'Buttons and Form Inputs', - packages: [ - { - name: 'react-button', - codeItems: [ - { - name: 'Button', - componentType: 'component', - }, - { - name: 'CompoundButton', - componentType: 'component', - }, - { - name: 'MenuButton', - componentType: 'component', - }, - { - name: 'SplitButton', - componentType: 'component', - }, - { - name: 'ToggleButton', - componentType: 'component', - }, - ], - }, - { - name: 'react-checkbox', - codeItems: [{ name: 'CheckBox', componentType: 'component' }], - }, - { - name: 'react-combobox', - newColumn: true, - codeItems: [ - { name: 'Combobox', componentType: 'component' }, - { name: 'Dropdown', componentType: 'component' }, - { name: 'Listbox', componentType: 'component' }, - { name: 'Option', componentType: 'component' }, - { name: 'OptionGroup', componentType: 'component' }, - ], - }, - { - name: 'react-field', - codeItems: [{ name: 'Field', componentType: 'component' }], - }, - { - name: 'react-input', - newColumn: true, - codeItems: [{ name: 'Input', componentType: 'component' }], - }, - { - name: 'react-label', - codeItems: [{ name: 'Label', componentType: 'component' }], - }, - { - name: 'react-link', - codeItems: [{ name: 'Link', componentType: 'component' }], - }, - { - name: 'react-radio', - newColumn: true, - codeItems: [ - { name: 'Radio', componentType: 'component' }, - { name: 'RadioGroup', componentType: 'component' }, - ], - }, - { - name: 'react-select', - codeItems: [{ name: 'Select', componentType: 'component' }], - }, - { - name: 'react-slider', - codeItems: [{ name: 'Slider', componentType: 'component' }], - }, - { - name: 'react-spinbutton', - newColumn: true, - codeItems: [{ name: 'SpinButton', componentType: 'component' }], - }, - { - name: 'react-textarea', - codeItems: [{ name: 'TextArea', componentType: 'component' }], - }, - { - name: 'react-switch', - codeItems: [ - { - name: 'Switch', - componentType: 'component', - }, - ], - }, - ], - }, - { - name: 'Lists, Grids, and Trees', - packages: [ - { - name: 'react-table', - codeItems: [ - { name: 'DataGrid', componentType: 'component' }, - { name: 'DataGridBody', componentType: 'component' }, - { name: 'DataGridCell', componentType: 'component' }, - { name: 'DataGridHeader', componentType: 'component' }, - { name: 'DataGridHeaderCell', componentType: 'component' }, - { name: 'DataGridRow', componentType: 'component' }, - { name: 'DataGridSelectionCell', componentType: 'component' }, - { name: 'Table', newColumn: true, componentType: 'component' }, - { name: 'TableBody', componentType: 'component' }, - { name: 'TableCell', componentType: 'component' }, - { name: 'TableCellActions', componentType: 'component' }, - { name: 'TableCellLayout', componentType: 'component' }, - { name: 'TableHeader', newColumn: true, componentType: 'component' }, - { name: 'TableHeaderCell', componentType: 'component' }, - { name: 'TableResizeHandle', componentType: 'component' }, - { name: 'TableRow', componentType: 'component' }, - { name: 'TableSelectionCell', componentType: 'component' }, - ], - }, - ], - }, - { - name: 'Menus and Navigation', - newRow: true, - packages: [ - { - name: 'react-accordion', - codeItems: [ - { name: 'Accordion', componentType: 'component' }, - { name: 'AccordionHeader', componentType: 'component' }, - { name: 'AccordionItem', componentType: 'component' }, - { name: 'AccordionPanel', componentType: 'component' }, - ], - }, - { - name: 'react-menu', - newColumn: true, - codeItems: [ - { name: 'Menu', componentType: 'component' }, - { name: 'MenuDivider', componentType: 'component' }, - { name: 'MenuGroup', componentType: 'component' }, - { name: 'MenuGroupHeader', componentType: 'component' }, - { name: 'MenuItem', componentType: 'component' }, - { name: 'MenuItemCheckbox', componentType: 'component' }, - { name: 'MenuItemRadio', newColumn: true, componentType: 'component' }, - { name: 'MenuList', componentType: 'component' }, - { name: 'MenuPopover', componentType: 'component' }, - { name: 'MenuSplitGroup', componentType: 'component' }, - { name: 'MenuTrigger', componentType: 'component' }, - ], - }, - { - name: 'react-tabs', - newColumn: true, - codeItems: [ - { name: 'Tab', componentType: 'component' }, - { name: 'TabList', componentType: 'component' }, - ], - }, - ], - }, - { - name: 'Surfaces', - packages: [ - { - name: 'react-card', - codeItems: [ - { name: 'Card', componentType: 'component' }, - { name: 'CardFooter', componentType: 'component' }, - { name: 'CardHeader', componentType: 'component' }, - { name: 'CardPreview', componentType: 'component' }, - ], - }, - { - name: 'react-dialog', - newColumn: true, - codeItems: [ - { name: 'Dialog', componentType: 'component' }, - { name: 'DialogTrigger', componentType: 'component' }, - { name: 'DialogSurface', componentType: 'component' }, - { name: 'DialogTitle', componentType: 'component' }, - { name: 'DialogBody', componentType: 'component' }, - { name: 'DialogActions', componentType: 'component' }, - ], - }, - { - name: 'react-divider', - codeItems: [{ name: 'Divider', componentType: 'component' }], - }, - { - name: 'react-popover', - newColumn: true, - codeItems: [ - { name: 'Popover', componentType: 'component' }, - { name: 'PopoverSurface', componentType: 'component' }, - { name: 'PopoverTrigger', componentType: 'component' }, - ], - }, - { - name: 'react-portal', - codeItems: [ - { name: 'Portal', componentType: 'component' }, - { name: 'PopoverSurface', componentType: 'component' }, - { name: 'PopoverTrigger', componentType: 'component' }, - ], - }, - { - name: 'react-toolbar', - newColumn: true, - codeItems: [ - { name: 'Toolbar', componentType: 'component' }, - { name: 'ToolbarButton', componentType: 'component' }, - { name: 'ToolbarToggleButton', componentType: 'component' }, - { name: 'ToolbarDivider', componentType: 'component' }, - ], - }, - ], - }, - { - name: 'Display and Status', - packages: [ - { - name: 'react-avatar', - codeItems: [ - { name: 'Avatar', componentType: 'component' }, - { name: 'AvatarGroup', componentType: 'component' }, - ], - }, - { - name: 'react-badge', - codeItems: [ - { name: 'Badge', componentType: 'component' }, - { name: 'CounterBadge', componentType: 'component' }, - { name: 'PresenceBadge', componentType: 'component' }, - ], - }, - { - name: 'react-image', - codeItems: [{ name: 'Image', componentType: 'component' }], - }, - { - name: 'react-persona', - newColumn: true, - codeItems: [{ name: 'Persona', componentType: 'component' }], - }, - { - name: 'react-progress', - codeItems: [{ name: 'ProgressBar', componentType: 'component' }], - }, - { - name: 'react-spinner', - codeItems: [{ name: 'Spinner', componentType: 'component' }], - }, - { - name: 'react-text', - newColumn: true, - codeItems: [ - { name: 'Body', componentType: 'component' }, - { name: 'Caption', componentType: 'component' }, - { name: 'Display', componentType: 'component' }, - { name: 'Headline', newColumn: true, componentType: 'component' }, - { name: 'LargeTitle', componentType: 'component' }, - { name: 'Subheadline', componentType: 'component' }, - { name: 'Text', componentType: 'component' }, - { name: 'Title1', newColumn: true, componentType: 'component' }, - { name: 'Title2', componentType: 'component' }, - { name: 'Title3', componentType: 'component' }, - ], - }, - { - name: 'react-tooltip', - codeItems: [{ name: 'Tooltip', componentType: 'component' }], - }, - ], - }, - { - name: 'Theming', - newRow: true, - packages: [ - { - name: 'react-provider', - codeItems: [ - { name: 'FluentProvider', componentType: 'component' }, - { name: 'PopoverSurface', componentType: 'component' }, - { name: 'PopoverTrigger', componentType: 'component' }, - ], - }, - { - name: 'react-theme', - newColumn: true, - codeItems: [ - { name: 'tokens', componentType: 'constant' }, - { name: 'teamsDarkTheme', componentType: 'constant' }, - { name: 'teamsHighContrastTheme', componentType: 'constant' }, - { name: 'teamsLightTheme', componentType: 'constant' }, - { name: 'webDarkTheme', newColumn: true, componentType: 'constant' }, - { name: 'webHighContrastTheme', componentType: 'constant' }, - { name: 'webLightTheme', componentType: 'constant' }, - { name: 'typographyStyles', componentType: 'constant' }, - { - name: 'createDarkTheme', - newColumn: true, - componentType: 'method', - }, - { name: 'createHighContrastTheme', componentType: 'method' }, - { name: 'createLightTheme', componentType: 'method' }, - { name: 'createTeamsDarkTheme', componentType: 'method' }, - ], - }, - ], - }, - { - name: 'Utilities', - packages: [ - { - name: 'react-context-selector', - codeItems: [ - { name: 'useContextSelector', componentType: 'hook' }, - { name: 'useHasParentContext', componentType: 'hook' }, - ], - }, - { - name: 'react-overflow', - newColumn: true, - codeItems: [ - { name: 'Overflow', componentType: 'component' }, - { name: 'OverflowItem', componentType: 'component' }, - { name: 'useIsOverflowGroupVisible', componentType: 'hook' }, - { name: 'useIsOverflowItemVisible', componentType: 'hook' }, - { - name: 'useOverflowContainer', - newColumn: true, - componentType: 'hook', - }, - { name: 'useOverflowCount', componentType: 'hook' }, - { name: 'useOverflowItem', componentType: 'hook' }, - { name: 'useOverflowMenu', componentType: 'hook' }, - ], - }, - { - name: 'react-tabster', - newColumn: true, - codeItems: [ - { name: 'useArrowNavigationGroup', componentType: 'hook' }, - { name: 'useFocusableGroup', componentType: 'hook' }, - { name: 'useFocusFinders', componentType: 'hook' }, - { name: 'useKeyboardNavAttribute', componentType: 'hook' }, - { - name: 'useModalAttributes', - newColumn: true, - componentType: 'hook', - }, - { name: 'useTabster', componentType: 'hook' }, - { name: 'useTabsterAttributes', componentType: 'hook' }, - ], - }, - ], - }, - ], -}; diff --git a/apps/public-docsite-v9/src/Concepts/Poster/types.ts b/apps/public-docsite-v9/src/Concepts/Poster/types.ts deleted file mode 100644 index 0957d04039121..0000000000000 --- a/apps/public-docsite-v9/src/Concepts/Poster/types.ts +++ /dev/null @@ -1,22 +0,0 @@ -export type CodeItemInfo = { - name: string; - componentType: 'component' | 'hook' | 'method' | 'constant' | 'type' | 'misc'; - newColumn?: boolean; -}; - -export type PackageInfo = { - name: string; - codeItems: CodeItemInfo[]; - newColumn?: boolean; -}; - -export type AreaInfo = { - name: string; - packages: PackageInfo[]; - newRow?: boolean; -}; - -export type LibraryInfo = { - name: string; - areas: AreaInfo[]; -};