From 58efda7e43a2a4f53e67c9e752ae3d3403508cac Mon Sep 17 00:00:00 2001 From: 3v0k4 Date: Thu, 15 Dec 2022 16:10:23 +0100 Subject: [PATCH 1/7] refactor(theme-classic): extract HomeBreadcrumbItem (#6953) --- .../src/theme-classic.d.ts | 4 +++ .../HomeBreadcrumbItem/index.tsx | 34 +++++++++++++++++++ .../HomeBreadcrumbItem/styles.module.css | 14 ++++++++ .../src/theme/DocBreadcrumbs/index.tsx | 21 +----------- .../theme/DocBreadcrumbs/styles.module.css | 8 ----- 5 files changed, 53 insertions(+), 28 deletions(-) create mode 100644 packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/HomeBreadcrumbItem/index.tsx create mode 100644 packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/HomeBreadcrumbItem/styles.module.css diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts index 2a3588ef3791..2224658476bd 100644 --- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts +++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts @@ -1510,3 +1510,7 @@ declare module '@theme/prism-include-languages' { PrismObject: typeof PrismNamespace, ): void; } + +declare module '@theme/DocBreadcrumbs/HomeBreadcrumbItem' { + export default function HomeBreadcrumbItem(): JSX.Element; +} diff --git a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/HomeBreadcrumbItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/HomeBreadcrumbItem/index.tsx new file mode 100644 index 000000000000..d8569c6432da --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/HomeBreadcrumbItem/index.tsx @@ -0,0 +1,34 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; +import clsx from 'clsx'; +import Link from '@docusaurus/Link'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import {translate} from '@docusaurus/Translate'; +import IconHome from '@theme/Icon/Home'; + +import styles from './styles.module.css'; + +export default function HomeBreadcrumbItem(): JSX.Element { + const homeHref = useBaseUrl('/'); + + return ( +
  • + + + +
    • + ); +} diff --git a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/HomeBreadcrumbItem/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/HomeBreadcrumbItem/styles.module.css new file mode 100644 index 000000000000..81c9f729b749 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/HomeBreadcrumbItem/styles.module.css @@ -0,0 +1,14 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +.breadcrumbHomeIcon { + position: relative; + top: 1px; + vertical-align: top; + height: 1.1rem; + width: 1.1rem; +} diff --git a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx index 9d011bc6bc90..f8f1377cde8b 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx @@ -13,9 +13,8 @@ import { useHomePageRoute, } from '@docusaurus/theme-common/internal'; import Link from '@docusaurus/Link'; -import useBaseUrl from '@docusaurus/useBaseUrl'; import {translate} from '@docusaurus/Translate'; -import IconHome from '@theme/Icon/Home'; +import HomeBreadcrumbItem from '@theme/DocBreadcrumbs/HomeBreadcrumbItem'; import styles from './styles.module.css'; @@ -79,24 +78,6 @@ function BreadcrumbsItem({ ); } -function HomeBreadcrumbItem() { - const homeHref = useBaseUrl('/'); - return ( -
  • - - - -
    • - ); -} - export default function DocBreadcrumbs(): JSX.Element | null { const breadcrumbs = useSidebarBreadcrumbs(); const homePageRoute = useHomePageRoute(); diff --git a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/styles.module.css index 5794e1b3c9fa..a400c5d9e622 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/styles.module.css @@ -9,11 +9,3 @@ --ifm-breadcrumb-size-multiplier: 0.8; margin-bottom: 0.8rem; } - -.breadcrumbHomeIcon { - position: relative; - top: 1px; - vertical-align: top; - height: 1.1rem; - width: 1.1rem; -} From c10b0a8e80d936aad8c600212637a50edc92b5e5 Mon Sep 17 00:00:00 2001 From: Riccardo Date: Fri, 16 Dec 2022 19:37:24 +0100 Subject: [PATCH 2/7] refactor(theme-classic): remove unused style MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Sébastien Lorber --- .../src/theme/DocBreadcrumbs/HomeBreadcrumbItem/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/HomeBreadcrumbItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/HomeBreadcrumbItem/index.tsx index d8569c6432da..eae8c4a87cab 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/HomeBreadcrumbItem/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/HomeBreadcrumbItem/index.tsx @@ -25,7 +25,7 @@ export default function HomeBreadcrumbItem(): JSX.Element { message: 'Home page', description: 'The ARIA label for the home page in the breadcrumbs', })} - className={clsx('breadcrumbs__link', styles.breadcrumbsItemLink)} + className="breadcrumbs__link" href={homeHref}> From 842dd63ef5dfae93d00b76ced2983006ece0fa69 Mon Sep 17 00:00:00 2001 From: 3v0k4 Date: Fri, 16 Dec 2022 19:49:02 +0100 Subject: [PATCH 3/7] refactor(theme-classic): remove unused import --- .../src/theme/DocBreadcrumbs/HomeBreadcrumbItem/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/HomeBreadcrumbItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/HomeBreadcrumbItem/index.tsx index eae8c4a87cab..cb8ae8d518b3 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/HomeBreadcrumbItem/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/HomeBreadcrumbItem/index.tsx @@ -6,7 +6,6 @@ */ import React from 'react'; -import clsx from 'clsx'; import Link from '@docusaurus/Link'; import useBaseUrl from '@docusaurus/useBaseUrl'; import {translate} from '@docusaurus/Translate'; From 7564481176b60fccb3f922a330a8c68967a00830 Mon Sep 17 00:00:00 2001 From: 3v0k4 Date: Fri, 16 Dec 2022 19:42:23 +0100 Subject: [PATCH 4/7] refactor(theme-classic): prepare to extract multiple items --- packages/docusaurus-theme-classic/src/theme-classic.d.ts | 2 +- .../DocBreadcrumbs/{HomeBreadcrumbItem => Items/Home}/index.tsx | 0 .../{HomeBreadcrumbItem => Items/Home}/styles.module.css | 0 .../docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx | 2 +- 4 files changed, 2 insertions(+), 2 deletions(-) rename packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/{HomeBreadcrumbItem => Items/Home}/index.tsx (100%) rename packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/{HomeBreadcrumbItem => Items/Home}/styles.module.css (100%) diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts index 2224658476bd..dd97b073bd65 100644 --- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts +++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts @@ -1511,6 +1511,6 @@ declare module '@theme/prism-include-languages' { ): void; } -declare module '@theme/DocBreadcrumbs/HomeBreadcrumbItem' { +declare module '@theme/DocBreadcrumbs/Items/Home' { export default function HomeBreadcrumbItem(): JSX.Element; } diff --git a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/HomeBreadcrumbItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/Items/Home/index.tsx similarity index 100% rename from packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/HomeBreadcrumbItem/index.tsx rename to packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/Items/Home/index.tsx diff --git a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/HomeBreadcrumbItem/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/Items/Home/styles.module.css similarity index 100% rename from packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/HomeBreadcrumbItem/styles.module.css rename to packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/Items/Home/styles.module.css diff --git a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx index f8f1377cde8b..a0e4ec328308 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx @@ -14,7 +14,7 @@ import { } from '@docusaurus/theme-common/internal'; import Link from '@docusaurus/Link'; import {translate} from '@docusaurus/Translate'; -import HomeBreadcrumbItem from '@theme/DocBreadcrumbs/HomeBreadcrumbItem'; +import HomeBreadcrumbItem from '@theme/DocBreadcrumbs/Items/Home'; import styles from './styles.module.css'; From 04f3c765dd238f8493cc7f2a5896b9fbbeaeac98 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Thu, 29 Dec 2022 12:59:17 +0100 Subject: [PATCH 5/7] fix minor bug in swizzle eject action --- packages/docusaurus/src/commands/swizzle/actions.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docusaurus/src/commands/swizzle/actions.ts b/packages/docusaurus/src/commands/swizzle/actions.ts index a9082737c104..8a81ffd7330d 100644 --- a/packages/docusaurus/src/commands/swizzle/actions.ts +++ b/packages/docusaurus/src/commands/swizzle/actions.ts @@ -56,7 +56,7 @@ export async function eject({ const isDirectory = await isDir(fromPath); const globPattern = isDirectory ? // Do we really want to copy all components? - path.join(fromPath, '*') + path.join(fromPath, '**/*') : `${fromPath}.*`; const globPatternPosix = posixPath(globPattern); From 8af2bba2da799a8885a92876b3542666f79b732f Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Thu, 29 Dec 2022 13:15:23 +0100 Subject: [PATCH 6/7] wrapping DocBreadcrumbs/Items is forbidden --- packages/docusaurus-theme-classic/src/getSwizzleConfig.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/docusaurus-theme-classic/src/getSwizzleConfig.ts b/packages/docusaurus-theme-classic/src/getSwizzleConfig.ts index c5f83bb3c114..010967c003a6 100644 --- a/packages/docusaurus-theme-classic/src/getSwizzleConfig.ts +++ b/packages/docusaurus-theme-classic/src/getSwizzleConfig.ts @@ -143,6 +143,14 @@ export default function getSwizzleConfig(): SwizzleConfig { description: 'The color mode toggle to switch between light and dark mode.', }, + 'DocBreadcrumbs/Items': { + actions: { + eject: 'unsafe', + wrap: 'forbidden', // Can't wrap a folder + }, + description: + 'The components responsible for rendering the breadcrumb items', + }, DocCardList: { actions: { eject: 'safe', From 41e90b6f70a96db23c256248b52c245f37688b0f Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Thu, 29 Dec 2022 13:27:57 +0100 Subject: [PATCH 7/7] fix swizzle not ejecting subfolder components --- .../__snapshots__/index.test.ts.snap | 60 +++++++++++++++++++ .../swizzle/__tests__/actions.test.ts | 12 +++- .../src/commands/swizzle/actions.ts | 1 + 3 files changed, 70 insertions(+), 3 deletions(-) diff --git a/packages/docusaurus/src/commands/swizzle/__tests__/__snapshots__/index.test.ts.snap b/packages/docusaurus/src/commands/swizzle/__tests__/__snapshots__/index.test.ts.snap index 2971f6e9f8c7..31c20d35685a 100644 --- a/packages/docusaurus/src/commands/swizzle/__tests__/__snapshots__/index.test.ts.snap +++ b/packages/docusaurus/src/commands/swizzle/__tests__/__snapshots__/index.test.ts.snap @@ -1,5 +1,26 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/ComponentInSubFolder/index.css 1`] = ` +".testClass { + background: black; +} +" +`; + +exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/ComponentInSubFolder/styles.css 1`] = ` +".testClass { + background: black; +} +" +`; + +exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/ComponentInSubFolder/styles.module.css 1`] = ` +".testClass { + background: black; +} +" +`; + exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/Sibling.css 1`] = ` ".testClass { background: black; @@ -17,10 +38,44 @@ exports[`swizzle eject ComponentInFolder JS: ComponentInFolder/index.css 1`] = ` exports[`swizzle eject ComponentInFolder JS: theme dir tree 1`] = ` "theme └── ComponentInFolder + ├── ComponentInSubFolder + │ ├── index.css + │ ├── styles.css + │ └── styles.module.css ├── Sibling.css └── index.css" `; +exports[`swizzle eject ComponentInFolder TS: ComponentInFolder/ComponentInSubFolder/index.css 1`] = ` +".testClass { + background: black; +} +" +`; + +exports[`swizzle eject ComponentInFolder TS: ComponentInFolder/ComponentInSubFolder/index.tsx 1`] = ` +"import React from 'react'; + +export default function ComponentInSubFolder() { + return
    ComponentInSubFolder
    ; +} +" +`; + +exports[`swizzle eject ComponentInFolder TS: ComponentInFolder/ComponentInSubFolder/styles.css 1`] = ` +".testClass { + background: black; +} +" +`; + +exports[`swizzle eject ComponentInFolder TS: ComponentInFolder/ComponentInSubFolder/styles.module.css 1`] = ` +".testClass { + background: black; +} +" +`; + exports[`swizzle eject ComponentInFolder TS: ComponentInFolder/Sibling.css 1`] = ` ".testClass { background: black; @@ -56,6 +111,11 @@ export default function ComponentInFolder() { exports[`swizzle eject ComponentInFolder TS: theme dir tree 1`] = ` "theme └── ComponentInFolder + ├── ComponentInSubFolder + │ ├── index.css + │ ├── index.tsx + │ ├── styles.css + │ └── styles.module.css ├── Sibling.css ├── Sibling.tsx ├── index.css diff --git a/packages/docusaurus/src/commands/swizzle/__tests__/actions.test.ts b/packages/docusaurus/src/commands/swizzle/__tests__/actions.test.ts index b6e7bed38bde..d13a32cc5bd6 100644 --- a/packages/docusaurus/src/commands/swizzle/__tests__/actions.test.ts +++ b/packages/docusaurus/src/commands/swizzle/__tests__/actions.test.ts @@ -110,9 +110,10 @@ describe('eject', () => { it(`eject ${Components.ComponentInFolder}`, async () => { const result = await testEject('eject', Components.ComponentInFolder); expect(result.createdFiles).toEqual([ - // TODO do we really want to copy those Sibling components? - // It's hard to filter those reliably - // (index.* is not good, we need to include styles.css too) + 'ComponentInFolder/ComponentInSubFolder/index.css', + 'ComponentInFolder/ComponentInSubFolder/index.tsx', + 'ComponentInFolder/ComponentInSubFolder/styles.css', + 'ComponentInFolder/ComponentInSubFolder/styles.module.css', 'ComponentInFolder/Sibling.css', 'ComponentInFolder/Sibling.tsx', 'ComponentInFolder/index.css', @@ -121,6 +122,11 @@ describe('eject', () => { expect(result.tree).toMatchInlineSnapshot(` "theme └── ComponentInFolder + ├── ComponentInSubFolder + │ ├── index.css + │ ├── index.tsx + │ ├── styles.css + │ └── styles.module.css ├── Sibling.css ├── Sibling.tsx ├── index.css diff --git a/packages/docusaurus/src/commands/swizzle/actions.ts b/packages/docusaurus/src/commands/swizzle/actions.ts index 8a81ffd7330d..1bbdb6f47d79 100644 --- a/packages/docusaurus/src/commands/swizzle/actions.ts +++ b/packages/docusaurus/src/commands/swizzle/actions.ts @@ -67,6 +67,7 @@ export async function eject({ // When ejecting JS components, we want to avoid emitting TS files // In particular the .d.ts files that theme build output contains typescript ? null : '**/*.{d.ts,ts,tsx}', + '**/{__fixtures__,__tests__}/*', ]), });