docs(public-docsite-v9): fix all invalid imports from docs @griffel/r…

…eact and suite /unstable occurences
microsoft · May 22, 2024 · 682c17d · 682c17d
1 parent 25b998d
commit 682c17d
Show file tree

Hide file tree

Showing 13 changed files with 25 additions and 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
@@ -82,8 +82,7 @@ The [Link](?path=/docs/components-link--default) component uses `createCustomFoc
 </Canvas>
 
 ```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
@@ -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/...ublic-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/Card.stories.mdx b/...ublic-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/Card.stories.mdx
@@ -16,7 +16,7 @@ const Component = () => <Card>Lorem ipsum, dolor sit amet consectetur adipisicin
 After:
 
 ```tsx
-import { Card } from '@fluentui/react-components/unstable';
+import { Card } from '@fluentui/react-components';
 const Component = () => <Card>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</Card>;
 ```
 
@@ -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/...c-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardBody.stories.mdx b/...c-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 = () => (
   <Card>

diff --git a/...docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardFooter.stories.mdx b/...docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardFooter.stories.mdx
@@ -17,7 +17,7 @@ const Component = () => <CardFooter>Lorem ipsum</CardFooter>;
 After:
 
 ```tsx
-import { CardFooter } from '@fluentui/react-components/unstable';
+import { CardFooter } from '@fluentui/react-components';
 
 const Component = () => <CardFooter Footer="Lorem ipsum" />;
 ```

diff --git a/...docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardHeader.stories.mdx b/...docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardHeader.stories.mdx
@@ -17,7 +17,7 @@ const Component = () => <CardHeader>Lorem ipsum</CardHeader>;
 After:
 
 ```tsx
-import { CardHeader } from '@fluentui/react-components/unstable';
+import { CardHeader } from '@fluentui/react-components';
 
 const Component = () => <CardHeader header="Lorem ipsum" />;
 ```

diff --git a/...ocsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardPreview.stories.mdx b/...ocsite-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 = () => (
   <CardPreview>

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
@@ -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
@@ -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/...blic-docsite-v9/src/Concepts/Migration/FromV8/Components/RadioGroup.stories.mdx b/...blic-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/...blic-docsite-v9/src/Concepts/Migration/FromV8/Components/SpinButton.stories.mdx b/...blic-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
@@ -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
@@ -1,4 +1,4 @@
-import { mergeClasses } from '@griffel/react';
+import { mergeClasses } from '@fluentui/react-components';
 import * as React from 'react';
 
 import { ColorInfo } from './types';
-Original file line number
+Diff line change
@@ Expand Up / @@ -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 = () => (
       <Card>
@@ Expand Down @@