From 281e8c676d3104a1195787ef82acc11d390b4196 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Fri, 26 Jan 2024 17:47:54 +0100 Subject: [PATCH] core-components: remove SidebarIntro and IntroCard Signed-off-by: Patrik Oldsberg --- .changeset/four-mugs-try.md | 5 + packages/core-components/api-report.md | 18 -- .../src/layout/Sidebar/Intro.tsx | 199 ------------------ .../src/layout/Sidebar/Sidebar.stories.tsx | 3 - .../src/layout/Sidebar/index.ts | 2 - .../src/overridableComponents.ts | 2 - 6 files changed, 5 insertions(+), 224 deletions(-) create mode 100644 .changeset/four-mugs-try.md delete mode 100644 packages/core-components/src/layout/Sidebar/Intro.tsx diff --git a/.changeset/four-mugs-try.md b/.changeset/four-mugs-try.md new file mode 100644 index 0000000000..11fdf783d4 --- /dev/null +++ b/.changeset/four-mugs-try.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': minor +--- + +**BREAKING**: Removed the `SidebarIntro` component as it was providing instructions for features that do not exist, along with `IntroCard`. If you were relying on this component and want to keep using it you can refer to the original implementations of [`SidebarIntro`](https://github.com/backstage/backstage/blob/80f2413334ed9b221ec3c2b7c22fa737ad8d8885/packages/core-components/src/layout/Sidebar/Intro.tsx#L149) and [`IntroCard`](https://github.com/backstage/backstage/blob/80f2413334ed9b221ec3c2b7c22fa737ad8d8885/packages/core-components/src/layout/Sidebar/Intro.tsx#L100). diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index cca7017089..b5d54dd606 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -593,11 +593,6 @@ export type InfoCardClassKey = // @public (undocumented) export type InfoCardVariants = 'flex' | 'fullHeight' | 'gridItem'; -// Warning: (ae-forgotten-export) The symbol "IntroCardProps" needs to be exported by the entry point index.d.ts -// -// @public -export function IntroCard(props: IntroCardProps): React_2.JSX.Element; - // Warning: (ae-forgotten-export) The symbol "ItemCardProps" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "ItemCard" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -953,19 +948,6 @@ export interface SidebarGroupProps extends BottomNavigationActionProps { to?: string; } -// Warning: (ae-missing-release-tag) "SidebarIntro" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) -// -// @public (undocumented) -export function SidebarIntro(_props: {}): React_2.JSX.Element | null; - -// @public (undocumented) -export type SidebarIntroClassKey = - | 'introCard' - | 'introDismiss' - | 'introDismissLink' - | 'introDismissText' - | 'introDismissIcon'; - // Warning: (ae-forgotten-export) The symbol "SidebarItemProps" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "SidebarItem" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal) // diff --git a/packages/core-components/src/layout/Sidebar/Intro.tsx b/packages/core-components/src/layout/Sidebar/Intro.tsx deleted file mode 100644 index 6f75f096fb..0000000000 --- a/packages/core-components/src/layout/Sidebar/Intro.tsx +++ /dev/null @@ -1,199 +0,0 @@ -/* - * Copyright 2020 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import Box from '@material-ui/core/Box'; -import Collapse from '@material-ui/core/Collapse'; -import IconButton from '@material-ui/core/IconButton'; -import { makeStyles, Theme } from '@material-ui/core/styles'; -import Typography from '@material-ui/core/Typography'; -import CloseIcon from '@material-ui/icons/Close'; -import { useLocalStorageValue } from '@react-hookz/web'; -import React, { useContext, useState } from 'react'; - -import { - SIDEBAR_INTRO_LOCAL_STORAGE, - SidebarConfig, - SidebarConfigContext, -} from './config'; -import { SidebarDivider } from './Items'; -import { useSidebarOpenState } from './SidebarOpenStateContext'; - -/** @public */ -export type SidebarIntroClassKey = - | 'introCard' - | 'introDismiss' - | 'introDismissLink' - | 'introDismissText' - | 'introDismissIcon'; - -const useStyles = makeStyles( - theme => ({ - introCard: props => ({ - color: '#b5b5b5', - // XXX (@koroeskohr): should I be using a Mui theme variable? - fontSize: 12, - width: props.sidebarConfig.drawerWidthOpen, - marginTop: theme.spacing(2.25), - marginBottom: theme.spacing(1.5), - paddingLeft: props.sidebarConfig.iconPadding, - paddingRight: props.sidebarConfig.iconPadding, - }), - introDismiss: { - display: 'flex', - justifyContent: 'flex-end', - alignItems: 'center', - marginTop: theme.spacing(1.5), - }, - introDismissLink: { - color: '#dddddd', - display: 'flex', - alignItems: 'center', - marginBottom: theme.spacing(0.5), - '&:hover': { - color: theme.palette.linkHover, - transition: theme.transitions.create('color', { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.shortest, - }), - }, - }, - introDismissText: { - fontSize: '0.7rem', - fontWeight: 'bold', - textTransform: 'uppercase', - letterSpacing: 1, - }, - introDismissIcon: { - width: 18, - height: 18, - marginRight: theme.spacing(1.5), - }, - }), - { name: 'BackstageSidebarIntro' }, -); - -type IntroCardProps = { - text: string; - onClose: () => void; -}; - -/** - * Closable card with information from Navigation Sidebar - * - * @public - * - */ - -export function IntroCard(props: IntroCardProps) { - const { sidebarConfig } = useContext(SidebarConfigContext); - const classes = useStyles({ sidebarConfig }); - const { text, onClose } = props; - const handleClose = () => onClose(); - - return ( - - {text} - - - - - Dismiss - - - - - ); -} - -type SidebarIntroLocalStorage = { - starredItemsDismissed: boolean; - recentlyViewedItemsDismissed: boolean; -}; - -type SidebarIntroCardProps = { - text: string; - onDismiss: () => void; -}; - -const SidebarIntroCard = (props: SidebarIntroCardProps) => { - const { text, onDismiss } = props; - const [collapsing, setCollapsing] = useState(false); - const startDismissing = () => { - setCollapsing(true); - }; - return ( - - - - ); -}; - -const starredIntroText = `Fun fact! As you explore all the awesome plugins in Backstage, you can actually pin them to this side nav. -Keep an eye out for the little star icon (⭐) next to the plugin name and give it a click!`; -const recentlyViewedIntroText = - 'And your recently viewed plugins will pop up here!'; - -export function SidebarIntro(_props: {}) { - const { isOpen } = useSidebarOpenState(); - const defaultValue = { - starredItemsDismissed: false, - recentlyViewedItemsDismissed: false, - }; - const { value: dismissedIntro, set: setDismissedIntro } = - useLocalStorageValue(SIDEBAR_INTRO_LOCAL_STORAGE); - - const { starredItemsDismissed, recentlyViewedItemsDismissed } = - dismissedIntro ?? {}; - - const dismissStarred = () => { - setDismissedIntro(state => ({ - ...defaultValue, - ...state, - starredItemsDismissed: true, - })); - }; - const dismissRecentlyViewed = () => { - setDismissedIntro(state => ({ - ...defaultValue, - ...state, - recentlyViewedItemsDismissed: true, - })); - }; - - if (!isOpen) { - return null; - } - - return ( - <> - {!starredItemsDismissed && ( - <> - - - - )} - {!recentlyViewedItemsDismissed && ( - - )} - - ); -} diff --git a/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx b/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx index 342a9b2a29..aef837b646 100644 --- a/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx +++ b/packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx @@ -34,7 +34,6 @@ import { SidebarSearchField, SidebarSpace, } from './Items'; -import { SidebarIntro } from './Intro'; import { SidebarSubmenu } from './SidebarSubmenu'; import { SidebarSubmenuItem } from './SidebarSubmenuItem'; @@ -65,7 +64,6 @@ export const SampleSidebar = () => ( - @@ -104,7 +102,6 @@ export const SampleScalableSidebar = () => ( - diff --git a/packages/core-components/src/layout/Sidebar/index.ts b/packages/core-components/src/layout/Sidebar/index.ts index 4c91ea6a8f..b614d50feb 100644 --- a/packages/core-components/src/layout/Sidebar/index.ts +++ b/packages/core-components/src/layout/Sidebar/index.ts @@ -44,8 +44,6 @@ export type { SidebarSpacerClassKey, SidebarDividerClassKey, } from './Items'; -export { IntroCard, SidebarIntro } from './Intro'; -export type { SidebarIntroClassKey } from './Intro'; export { SIDEBAR_INTRO_LOCAL_STORAGE, sidebarConfig } from './config'; export type { SidebarOptions, SubmenuOptions } from './config'; export { diff --git a/packages/core-components/src/overridableComponents.ts b/packages/core-components/src/overridableComponents.ts index 750303e4df..85e9dc96a8 100644 --- a/packages/core-components/src/overridableComponents.ts +++ b/packages/core-components/src/overridableComponents.ts @@ -83,7 +83,6 @@ import { SidebarSpaceClassKey, SidebarSpacerClassKey, SidebarDividerClassKey, - SidebarIntroClassKey, SidebarItemClassKey, SidebarPageClassKey, CustomProviderClassKey, @@ -157,7 +156,6 @@ type BackstageComponentsNameToClassKey = { BackstageSidebarSpace: SidebarSpaceClassKey; BackstageSidebarSpacer: SidebarSpacerClassKey; BackstageSidebarDivider: SidebarDividerClassKey; - BackstageSidebarIntro: SidebarIntroClassKey; BackstageSidebarItem: SidebarItemClassKey; BackstageSidebarPage: SidebarPageClassKey; BackstageCustomProvider: CustomProviderClassKey;