From 682c17df2e3312cf76b8e175090a0e9cf77316ca Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Wed, 22 May 2024 17:18:19 +0200 Subject: [PATCH] docs(public-docsite-v9): fix all invalid imports from docs @griffel/react and suite /unstable occurences --- .../Accessibility/FocusIndicator.stories.mdx | 3 +-- .../Concepts/AdvancedConfiguration.stories.mdx | 4 ++-- .../FromV0/Components/Card/Card.stories.mdx | 18 +++++++++--------- .../Components/Card/CardBody.stories.mdx | 2 +- .../Components/Card/CardFooter.stories.mdx | 2 +- .../Components/Card/CardHeader.stories.mdx | 2 +- .../Components/Card/CardPreview.stories.mdx | 2 +- .../FromV0/Components/Input.stories.mdx | 3 +-- .../FromV8/Components/Input.stories.mdx | 4 +--- .../FromV8/Components/RadioGroup.stories.mdx | 3 +-- .../FromV8/Components/SpinButton.stories.mdx | 10 ++++------ .../FromV8/ThemeColors/ColorBlock.styles.ts | 2 +- .../FromV8/ThemeColors/ColorBlock.tsx | 2 +- 13 files changed, 25 insertions(+), 32 deletions(-) diff --git a/apps/public-docsite-v9/src/Concepts/Accessibility/FocusIndicator.stories.mdx b/apps/public-docsite-v9/src/Concepts/Accessibility/FocusIndicator.stories.mdx index 7cce1a81dc5a34..3e8ee155d18294 100644 --- a/apps/public-docsite-v9/src/Concepts/Accessibility/FocusIndicator.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Accessibility/FocusIndicator.stories.mdx @@ -82,8 +82,7 @@ The [Link](?path=/docs/components-link--default) component uses `createCustomFoc ```tsx -import { makeStyles } from '@griffel/react'; -import { createCustomFocusIndicatorStyle } from '@fluentui/react-components'; +import { makeStyles, createCustomFocusIndicatorStyle } from '@fluentui/react-components'; const useStyles = makeStyles({ focusIndicator: createCustomFocusIndicatorStyle({ diff --git a/apps/public-docsite-v9/src/Concepts/AdvancedConfiguration.stories.mdx b/apps/public-docsite-v9/src/Concepts/AdvancedConfiguration.stories.mdx index bbff3b23e97007..12cf681787cefe 100644 --- a/apps/public-docsite-v9/src/Concepts/AdvancedConfiguration.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/AdvancedConfiguration.stories.mdx @@ -39,7 +39,7 @@ Fluent UI React v9 uses Griffel as CSS-in-JS to apply styles. To provide determi To configure the sorting behavior, please pass `compareMediaQueries` function with the same signature as sort functions in e.g. `Array.prototype.sort`. ```js -import { createDOMRenderer } from '@griffel/react'; +import { createDOMRenderer } from '@fluentui/react-components'; const mediaQueryOrder = [ 'only screen and (min-width: 1024px)', @@ -69,7 +69,7 @@ const renderer = createDOMRenderer(document, { For mobile-first methodology, consider using [`sort-css-media-queries`](https://github.com/dutchenkoOleg/sort-css-media-queries): ```js -import { createDOMRenderer } from '@griffel/react'; +import { createDOMRenderer } from '@fluentui/react-components'; import sortCSSmq from 'sort-css-media-queries'; const renderer = createDOMRenderer(document, { diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/Card.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/Card.stories.mdx index 4e4dcc09ee1ff2..42da50b0c098fd 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/Card.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/Card.stories.mdx @@ -16,7 +16,7 @@ const Component = () => Lorem ipsum, dolor sit amet consectetur adipisicin After: ```tsx -import { Card } from '@fluentui/react-components/unstable'; +import { Card } from '@fluentui/react-components'; const Component = () => Lorem ipsum, dolor sit amet consectetur adipisicing elit.; ``` @@ -65,7 +65,7 @@ After: ```tsx // in COMPONENT_NAME.tsx -import { Card } from '@fluentui/react-components/unstable'; +import { Card } from '@fluentui/react-components'; import { useStyles } from './COMPONENT_NAME.styles.ts'; export const Component = () => { @@ -75,7 +75,7 @@ export const Component = () => { }; // in COMPONENT_NAME.styles.ts -import { makeStyles, tokens } from '@fluentui/react-components/unstable'; +import { makeStyles, tokens } from '@fluentui/react-components'; export const useStyles = makeStyles({ actionCard: { @@ -127,7 +127,7 @@ After: ```tsx // in COMPONENT_NAME.tsx -import { Card, mergeClasses } from '@fluentui/react-components/unstable'; +import { Card, mergeClasses } from '@fluentui/react-components'; import { useStyles } from './COMPONENT_NAME.styles.ts'; export const Component = props => { @@ -141,7 +141,7 @@ export const Component = props => { }; // in COMPONENT_NAME.styles.ts -import { makeStyles } from '@fluentui/react-components/unstable'; +import { makeStyles } from '@fluentui/react-components'; export const useStyles = makeStyles({ chatListGroupTitleAsHeader: { @@ -168,8 +168,8 @@ After: ```tsx import * as React from 'react'; -import { makeStyles } from '@fluentui/react-components/unstable'; -import { Card } from '@fluentui/react-components/unstable'; +import { makeStyles } from '@fluentui/react-components'; +import { Card } from '@fluentui/react-components'; const useStyles = makeStyles({ centeredCard: { @@ -204,8 +204,8 @@ After: ```jsx import * as React from 'react'; -import { makeStyles } from '@fluentui/react-components/unstable'; -import { Card } from '@fluentui/react-components/unstable'; +import { makeStyles } from '@fluentui/react-components'; +import { Card } from '@fluentui/react-components'; const useStyles = makeStyles({ parent: { diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardBody.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardBody.stories.mdx index fabc5c78b04f23..d4ba56baf8de2e 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardBody.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardBody.stories.mdx @@ -25,7 +25,7 @@ export const CardBodyExample = () => ( After: ```jsx -import { Card } from '@fluentui/react-components/unstable'; +import { Card } from '@fluentui/react-components'; export const CardBodyExample = () => ( diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardFooter.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardFooter.stories.mdx index 6b837ff1f4e2a0..c10268cf50111b 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardFooter.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardFooter.stories.mdx @@ -17,7 +17,7 @@ const Component = () => Lorem ipsum; After: ```tsx -import { CardFooter } from '@fluentui/react-components/unstable'; +import { CardFooter } from '@fluentui/react-components'; const Component = () => ; ``` diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardHeader.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardHeader.stories.mdx index c54be2bc5519d0..80dae19c893ecb 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardHeader.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardHeader.stories.mdx @@ -17,7 +17,7 @@ const Component = () => Lorem ipsum; After: ```tsx -import { CardHeader } from '@fluentui/react-components/unstable'; +import { CardHeader } from '@fluentui/react-components'; const Component = () => ; ``` diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardPreview.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardPreview.stories.mdx index 29f1275d335391..9346e9f9fae1e7 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardPreview.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardPreview.stories.mdx @@ -21,7 +21,7 @@ const Component = () => ( After: ```tsx -import { CardPreview } from '@fluentui/react-components/unstable'; +import { CardPreview } from '@fluentui/react-components'; const Component = () => ( diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Input.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Input.stories.mdx index 542280e241e2a0..c67858aa826188 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Input.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Input.stories.mdx @@ -25,9 +25,8 @@ An equivalent `Input` v9 usage is ```tsx import * as React from 'react'; -import { Label, Input } from '@fluentui/react-components/unstable'; +import { makeStyles, Label, Input } from '@fluentui/react-components'; import { useId } from '@fluentui/react-utilities'; -import { makeStyles } from '@griffel/react'; const useLayoutStyles = makeStyles({ root: { diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Input.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Input.stories.mdx index 4274c80dafc43d..f6ea4f9c99c7a6 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Input.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Input.stories.mdx @@ -40,10 +40,8 @@ An equivalent `Input` usage is: ```tsx import * as React from 'react'; -import { Text } from '@fluentui/react-components'; -import { Label, Input } from '@fluentui/react-components/unstable'; +import { makeStyles, Text, Label, Input } from '@fluentui/react-components'; import { useId } from '@fluentui/react-utilities'; -import { makeStyles } from '@griffel/react'; const useStackStyles = makeStyles({ root: { diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/RadioGroup.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/RadioGroup.stories.mdx index 853118f0467f3a..1c1380085ac037 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/RadioGroup.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/RadioGroup.stories.mdx @@ -102,9 +102,8 @@ An equivalent `RadioGroup` implementation: ```tsx import * as React from 'react'; -import { Label, Radio, RadioGroup } from '@fluentui/react-components'; +import { makeStyles, shorthands, Label, Radio, RadioGroup } from '@fluentui/react-components'; import { useId } from '@fluentui/react-utilities'; -import { makeStyles, shorthands } from '@griffel/react'; import { AnimalCat24Regular } from '@fluentui/react-icons'; const useIconOptionStyles = makeStyles({ diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/SpinButton.stories.mdx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/SpinButton.stories.mdx index 0b8366925585fe..4b6712155281cb 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/SpinButton.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/SpinButton.stories.mdx @@ -47,10 +47,9 @@ An equivalent `SpinButton` v9 usage is ```tsx import * as React from 'react'; -import { Label, SpinButton } from '@fluentui/react-components/unstable'; -import type { SpinButtonChangeEvent, SpinButtonOnChangeData } from '@fluentui/react-components/unstable'; +import { makeStyles, Label, SpinButton } from '@fluentui/react-components'; +import type { SpinButtonChangeEvent, SpinButtonOnChangeData } from '@fluentui/react-components'; import { useId } from '@fluentui/react-utilities'; -import { makeStyles } from '@griffel/react'; const useLayoutStyles = makeStyles({ root: { @@ -185,10 +184,9 @@ const SpinButtonV8CustomSuffixBasicExample: React.FunctionComponent = () => { ```tsx import * as React from 'react'; -import { Label, SpinButton } from '@fluentui/react-components/unstable'; -import type { SpinButtonChangeEvent, SpinButtonOnChangeData } from '@fluentui/react-components/unstable'; +import { makeStyles, Label, SpinButton } from '@fluentui/react-components'; +import type { SpinButtonChangeEvent, SpinButtonOnChangeData } from '@fluentui/react-components'; import { useId } from '@fluentui/react-utilities'; -import { makeStyles } from '@griffel/react'; const useLayoutStyles = makeStyles({ root: { diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorBlock.styles.ts b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorBlock.styles.ts index 1d2d92d0ed91a8..3c9611fd2aac5d 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorBlock.styles.ts +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorBlock.styles.ts @@ -1,4 +1,4 @@ -import { makeStyles, shorthands } from '@griffel/react'; +import { makeStyles, shorthands } from '@fluentui/react-components'; export const useColorBlockStyles = makeStyles({ root: { diff --git a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorBlock.tsx b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorBlock.tsx index 686161115656c1..c551935e5ee07d 100644 --- a/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorBlock.tsx +++ b/apps/public-docsite-v9/src/Concepts/Migration/FromV8/ThemeColors/ColorBlock.tsx @@ -1,4 +1,4 @@ -import { mergeClasses } from '@griffel/react'; +import { mergeClasses } from '@fluentui/react-components'; import * as React from 'react'; import { ColorInfo } from './types';