From bf9c07f6411a1f96369335f1b0b96ba207cd5a8a Mon Sep 17 00:00:00 2001 From: Kevin Nagurski Date: Thu, 19 Dec 2024 20:34:19 +0000 Subject: [PATCH] pick feat: [XD-47]: Initial effort for component library docs --- apps/design-system/package.json | 4 +- apps/design-system/src/App.tsx | 14 +- .../docs-layout/docs-layout.module.css | 10 + .../components/docs-layout/docs-layout.tsx | 22 ++ .../docs-navbar/docs-navbar.module.css | 9 + .../components/docs-navbar/docs-navbar.tsx | 56 +++++ .../docs-page/component-example.tsx | 17 ++ .../src/components/docs-page/docs-page.tsx | 13 ++ .../docs-page/example-layout.module.css | 7 + .../components/docs-page/example-layout.tsx | 7 + .../components/docs-page/example.module.css | 48 +++++ .../src/components/docs-page/example.tsx | 141 ++++++++++++ .../src/components/docs-page/root.module.css | 13 ++ .../src/components/docs-page/root.tsx | 11 + .../src/components/docs-page/section.tsx | 20 ++ .../src/components/docs-page/summary.tsx | 18 ++ .../src/pages/component-page.tsx | 14 ++ .../view-preview/repo-files-view-wrapper.tsx | 6 +- .../pages/view-preview/repo-view-wrapper.tsx | 3 +- .../pages/view-preview/root-view-wrapper.tsx | 4 +- .../src/pages/view-preview/view-preview.tsx | 26 ++- .../view-switcher/view-switcher.module.css | 10 - .../view-switcher/view-switcher.tsx | 38 ---- .../src/subjects/components/alert.tsx | 29 +++ .../src/subjects/components/badge.tsx | 24 +++ .../src/subjects/components/button.tsx | 158 ++++++++++++++ .../src/subjects/components/componentPages.ts | 17 ++ .../execution-list/execution-list.store.ts | 4 +- .../views/execution-list/execution-list.tsx | 3 +- .../pipeline-list/pipeline-list.store.ts | 4 +- .../views/pipeline-list/pipeline-list.tsx | 3 +- .../pull-request-compare.tsx | 3 +- .../pull-request-compare/repo-branch-store.ts | 4 +- .../pull-request-compare/repo-commit-store.ts | 2 +- .../pull-request-list-store.ts | 2 +- .../pull-request-list/pull-request-list.tsx | 3 +- .../views/repo-commits/index.tsx | 3 +- .../views/repo-commits/repo-commits-store.ts | 0 .../components/repo-file-content-viewer.tsx | 7 +- .../repo-files/components/repo-file-edit.tsx | 9 +- .../repo-files/components/repo-files-store.ts | 0 .../components/repo-files-wrapper.tsx | 3 +- .../context/exit-confirm-context.tsx | 0 .../repo-files}/hooks/use-exit-confirm.ts | 0 .../{ => subjects}/views/repo-files/index.ts | 0 .../views/repo-files/repo-files-edit-view.tsx | 0 .../views/repo-files/repo-files-json-view.tsx | 0 .../views/repo-files/repo-files-list.tsx | 0 .../repo-files/repo-files-markdown-view.tsx | 0 .../views/repo-files}/theme/monaco-theme.ts | 0 .../views/repo-list/repo-list-store.json | 0 .../views/repo-list/repo-list.tsx | 3 +- .../repo-summary/repo-summary-props.json | 0 .../views/repo-summary/repo-summary.tsx | 3 +- .../src/{utils.ts => utils/viewUtils.ts} | 1 + apps/design-system/tsconfig.app.json | 9 +- apps/design-system/tsconfig.json | 5 +- apps/design-system/vite.config.ts | 3 +- packages/ui/locales/en/views.json | 16 +- packages/ui/locales/es/views.json | 16 +- packages/ui/locales/fr/views.json | 16 +- packages/ui/package.json | 2 +- packages/ui/src/components/index.ts | 1 + packages/ui/src/components/more-submenu.tsx | 3 +- .../components/navbar-skeleton/content.tsx | 11 + .../src/components/navbar-skeleton/footer.tsx | 7 + .../src/components/navbar-skeleton/group.tsx | 31 +++ .../src/components/navbar-skeleton/header.tsx | 5 + .../src/components/navbar-skeleton/index.ts | 15 ++ .../src/components/navbar-skeleton/item.tsx | 99 +++++++++ .../{navbar => }/navbar-skeleton/noise.png | Bin .../src/components/navbar-skeleton/root.tsx | 61 ++++++ .../components/navbar/navbar-item/index.tsx | 2 +- .../navbar/navbar-skeleton/index.tsx | 202 ------------------ packages/ui/src/components/navbar/navbar.tsx | 7 +- packages/ui/src/components/settings-menu.tsx | 3 +- packages/ui/src/components/text.tsx | 2 +- .../repo-settings/components/repo-sidebar.tsx | 2 +- pnpm-lock.yaml | 55 ++++- 79 files changed, 1021 insertions(+), 348 deletions(-) create mode 100644 apps/design-system/src/components/docs-layout/docs-layout.module.css create mode 100644 apps/design-system/src/components/docs-layout/docs-layout.tsx create mode 100644 apps/design-system/src/components/docs-navbar/docs-navbar.module.css create mode 100644 apps/design-system/src/components/docs-navbar/docs-navbar.tsx create mode 100644 apps/design-system/src/components/docs-page/component-example.tsx create mode 100644 apps/design-system/src/components/docs-page/docs-page.tsx create mode 100644 apps/design-system/src/components/docs-page/example-layout.module.css create mode 100644 apps/design-system/src/components/docs-page/example-layout.tsx create mode 100644 apps/design-system/src/components/docs-page/example.module.css create mode 100644 apps/design-system/src/components/docs-page/example.tsx create mode 100644 apps/design-system/src/components/docs-page/root.module.css create mode 100644 apps/design-system/src/components/docs-page/root.tsx create mode 100644 apps/design-system/src/components/docs-page/section.tsx create mode 100644 apps/design-system/src/components/docs-page/summary.tsx create mode 100644 apps/design-system/src/pages/component-page.tsx delete mode 100644 apps/design-system/src/pages/view-preview/view-switcher/view-switcher.module.css delete mode 100644 apps/design-system/src/pages/view-preview/view-switcher/view-switcher.tsx create mode 100644 apps/design-system/src/subjects/components/alert.tsx create mode 100644 apps/design-system/src/subjects/components/badge.tsx create mode 100644 apps/design-system/src/subjects/components/button.tsx create mode 100644 apps/design-system/src/subjects/components/componentPages.ts rename apps/design-system/src/{ => subjects}/views/execution-list/execution-list.store.ts (95%) rename apps/design-system/src/{ => subjects}/views/execution-list/execution-list.tsx (91%) rename apps/design-system/src/{ => subjects}/views/pipeline-list/pipeline-list.store.ts (97%) rename apps/design-system/src/{ => subjects}/views/pipeline-list/pipeline-list.tsx (91%) rename apps/design-system/src/{ => subjects}/views/pull-request-compare/pull-request-compare.tsx (96%) rename apps/design-system/src/{ => subjects}/views/pull-request-compare/repo-branch-store.ts (96%) rename apps/design-system/src/{ => subjects}/views/pull-request-compare/repo-commit-store.ts (96%) rename apps/design-system/src/{ => subjects}/views/pull-request-list/pull-request-list-store.ts (91%) rename apps/design-system/src/{ => subjects}/views/pull-request-list/pull-request-list.tsx (90%) rename apps/design-system/src/{ => subjects}/views/repo-commits/index.tsx (95%) rename apps/design-system/src/{ => subjects}/views/repo-commits/repo-commits-store.ts (100%) rename apps/design-system/src/{ => subjects}/views/repo-files/components/repo-file-content-viewer.tsx (94%) rename apps/design-system/src/{ => subjects}/views/repo-files/components/repo-file-edit.tsx (92%) rename apps/design-system/src/{ => subjects}/views/repo-files/components/repo-files-store.ts (100%) rename apps/design-system/src/{ => subjects}/views/repo-files/components/repo-files-wrapper.tsx (96%) rename apps/design-system/src/{ => subjects/views/repo-files}/context/exit-confirm-context.tsx (100%) rename apps/design-system/src/{ => subjects/views/repo-files}/hooks/use-exit-confirm.ts (100%) rename apps/design-system/src/{ => subjects}/views/repo-files/index.ts (100%) rename apps/design-system/src/{ => subjects}/views/repo-files/repo-files-edit-view.tsx (100%) rename apps/design-system/src/{ => subjects}/views/repo-files/repo-files-json-view.tsx (100%) rename apps/design-system/src/{ => subjects}/views/repo-files/repo-files-list.tsx (100%) rename apps/design-system/src/{ => subjects}/views/repo-files/repo-files-markdown-view.tsx (100%) rename apps/design-system/src/{ => subjects/views/repo-files}/theme/monaco-theme.ts (100%) rename apps/design-system/src/{ => subjects}/views/repo-list/repo-list-store.json (100%) rename apps/design-system/src/{ => subjects}/views/repo-list/repo-list.tsx (90%) rename apps/design-system/src/{ => subjects}/views/repo-summary/repo-summary-props.json (100%) rename apps/design-system/src/{ => subjects}/views/repo-summary/repo-summary.tsx (96%) rename apps/design-system/src/{utils.ts => utils/viewUtils.ts} (82%) create mode 100644 packages/ui/src/components/navbar-skeleton/content.tsx create mode 100644 packages/ui/src/components/navbar-skeleton/footer.tsx create mode 100644 packages/ui/src/components/navbar-skeleton/group.tsx create mode 100644 packages/ui/src/components/navbar-skeleton/header.tsx create mode 100644 packages/ui/src/components/navbar-skeleton/index.ts create mode 100644 packages/ui/src/components/navbar-skeleton/item.tsx rename packages/ui/src/components/{navbar => }/navbar-skeleton/noise.png (100%) create mode 100644 packages/ui/src/components/navbar-skeleton/root.tsx delete mode 100644 packages/ui/src/components/navbar/navbar-skeleton/index.tsx diff --git a/apps/design-system/package.json b/apps/design-system/package.json index 7ccd7bb44..a11f1fc20 100644 --- a/apps/design-system/package.json +++ b/apps/design-system/package.json @@ -15,8 +15,10 @@ "@harnessio/ui": "workspace:*", "@harnessio/yaml-editor": "workspace:*", "clsx": "^2.1.1", + "monaco-editor": "0.50.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-live": "^4.1.8", "react-router-dom": "^6.26.0" }, "devDependencies": { @@ -30,7 +32,7 @@ "typescript": "~5.6.2", "typescript-eslint": "^8.15.0", "vite": "^6.0.3", - "monaco-editor": "0.50.0" + "vite-tsconfig-paths": "^5.1.4" }, "lint-staged": { "*.{js,jsx,ts,tsx}": [ diff --git a/apps/design-system/src/App.tsx b/apps/design-system/src/App.tsx index 7dfa3e1aa..efe951e36 100644 --- a/apps/design-system/src/App.tsx +++ b/apps/design-system/src/App.tsx @@ -1,20 +1,18 @@ import { FC } from 'react' import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom' -import { ExitConfirmProvider } from './context/exit-confirm-context.tsx' -import ViewPreview from './pages/view-preview/view-preview.tsx' +import ComponentPage from '@/pages/component-page.tsx' +import ViewPreview from '@/pages/view-preview/view-preview.tsx' +import DocsLayout from '@components/docs-layout/docs-layout.tsx' const router = createBrowserRouter([ { path: '/view-preview/*', element: }, - { path: '/*', element: } // temp redirect to view preview + { path: '/docs/*', element: , children: [{ path: 'components/*', element: }] }, + { path: '/*', element: } // temp redirect to view preview ]) const App: FC = () => { - return ( - - - - ) + return } export default App diff --git a/apps/design-system/src/components/docs-layout/docs-layout.module.css b/apps/design-system/src/components/docs-layout/docs-layout.module.css new file mode 100644 index 000000000..5e38d481b --- /dev/null +++ b/apps/design-system/src/components/docs-layout/docs-layout.module.css @@ -0,0 +1,10 @@ +.layout { + display: grid; + grid-template-columns: auto 1fr; +} + +.navbar { + position: sticky; + top: 0; + left: 0; +} diff --git a/apps/design-system/src/components/docs-layout/docs-layout.tsx b/apps/design-system/src/components/docs-layout/docs-layout.tsx new file mode 100644 index 000000000..720b32955 --- /dev/null +++ b/apps/design-system/src/components/docs-layout/docs-layout.tsx @@ -0,0 +1,22 @@ +import { FC, useEffect } from 'react' +import { Outlet } from 'react-router-dom' + +import '@harnessio/ui/styles.css' + +import DocsNavbar from '@components/docs-navbar/docs-navbar' + +import css from './docs-layout.module.css' + +const DocsLayout: FC = () => { + // TODO: expose this via a UI element to switch between light-std-std and dark-std-std + useEffect(() => document.body.classList.add('light-std-std'), []) + + return ( +
+ + +
+ ) +} + +export default DocsLayout diff --git a/apps/design-system/src/components/docs-navbar/docs-navbar.module.css b/apps/design-system/src/components/docs-navbar/docs-navbar.module.css new file mode 100644 index 000000000..bc49ede76 --- /dev/null +++ b/apps/design-system/src/components/docs-navbar/docs-navbar.module.css @@ -0,0 +1,9 @@ +.content { + overflow: hidden; +} + +.viewLink { + display: flex; + align-items: baseline; + gap: 0.5rem; +} diff --git a/apps/design-system/src/components/docs-navbar/docs-navbar.tsx b/apps/design-system/src/components/docs-navbar/docs-navbar.tsx new file mode 100644 index 000000000..2f7159693 --- /dev/null +++ b/apps/design-system/src/components/docs-navbar/docs-navbar.tsx @@ -0,0 +1,56 @@ +import { FC } from 'react' +import { Link, useLocation } from 'react-router-dom' + +import { viewPreviews } from '@/pages/view-preview/view-preview.tsx' +import { componentPages } from '@subjects/components/componentPages.ts' + +import { Icon, NavbarSkeleton, ScrollArea } from '@harnessio/ui/components' + +import css from './docs-navbar.module.css' + +export interface DocsNavbarProps { + className?: string +} + +const DocsNavbar: FC = ({ className }) => { + const location = useLocation() + + return ( + + + + + + + + + + + + {componentPages.map(({ name, path }) => ( + + + + ))} + + + {Object.keys(viewPreviews).map(path => ( + + + + + ))} + + + + + + + + + + + ) +} + +export default DocsNavbar diff --git a/apps/design-system/src/components/docs-page/component-example.tsx b/apps/design-system/src/components/docs-page/component-example.tsx new file mode 100644 index 000000000..faa03b871 --- /dev/null +++ b/apps/design-system/src/components/docs-page/component-example.tsx @@ -0,0 +1,17 @@ +import { FC, useMemo } from 'react' + +import Example, { ExampleProps } from '@components/docs-page/example.tsx' + +import * as components from '@harnessio/ui/components' + +export type ComponentExampleProps = Omit & { + scope?: ExampleProps['scope'] +} + +const ComponentExample: FC = ({ code, scope }) => { + const combinedScope = useMemo(() => ({ ...components, ...scope }), [scope]) + + return +} + +export default ComponentExample diff --git a/apps/design-system/src/components/docs-page/docs-page.tsx b/apps/design-system/src/components/docs-page/docs-page.tsx new file mode 100644 index 000000000..9708198de --- /dev/null +++ b/apps/design-system/src/components/docs-page/docs-page.tsx @@ -0,0 +1,13 @@ +import ComponentExample from './component-example.tsx' +import Example from './example.tsx' +import Root from './root' +import Section from './section.tsx' +import Summary from './summary.tsx' + +export const DocsPage = { + Root, + Summary, + Section, + Example, + ComponentExample +} diff --git a/apps/design-system/src/components/docs-page/example-layout.module.css b/apps/design-system/src/components/docs-page/example-layout.module.css new file mode 100644 index 000000000..a98ab7e96 --- /dev/null +++ b/apps/design-system/src/components/docs-page/example-layout.module.css @@ -0,0 +1,7 @@ +.layout { + display: flex; + flex-direction: column; + gap: 0.5rem; + justify-content: center; + align-items: center; +} diff --git a/apps/design-system/src/components/docs-page/example-layout.tsx b/apps/design-system/src/components/docs-page/example-layout.tsx new file mode 100644 index 000000000..3115851d4 --- /dev/null +++ b/apps/design-system/src/components/docs-page/example-layout.tsx @@ -0,0 +1,7 @@ +import { FC, PropsWithChildren } from 'react' + +import css from './example-layout.module.css' + +const ExampleLayout: FC = ({ children }) =>
{children}
+ +export default ExampleLayout diff --git a/apps/design-system/src/components/docs-page/example.module.css b/apps/design-system/src/components/docs-page/example.module.css new file mode 100644 index 000000000..a2f3e5446 --- /dev/null +++ b/apps/design-system/src/components/docs-page/example.module.css @@ -0,0 +1,48 @@ +.root { + border: 1px solid var(--preview-border, #eaeaea); + border-radius: 6px; + margin-top: 20px; + margin-bottom: 20px; + overflow: hidden; +} + +.preview { + padding: 24px; +} + +.editor { + background: var(--preview-background, #f7f7f7); + border-top: 1px solid var(--preview-border, #eaeaea); + list-style-type: none; + + summary { + padding: 6px 24px; + color: var(--preview-text, #666); + cursor: pointer; + user-select: none; + list-style-type: none; + line-height: 24px; + display: flex; + align-items: center; + } + + summary:before { + content: ''; + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2NjYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS11bmZvbGQtdmVydGljYWwiPjxwYXRoIGQ9Ik0xMiAyMnYtNiIvPjxwYXRoIGQ9Ik0xMiA4VjIiLz48cGF0aCBkPSJNNCAxMkgyIi8+PHBhdGggZD0iTTEwIDEySDgiLz48cGF0aCBkPSJNMTYgMTJoLTIiLz48cGF0aCBkPSJNMjIgMTJoLTIiLz48cGF0aCBkPSJtMTUgMTktMyAzLTMtMyIvPjxwYXRoIGQ9Im0xNSA1LTMtMy0zIDMiLz48L3N2Zz4=); + width: 16px; + height: 16px; + display: inline-flex; + margin-right: 6px; + } + + &[open] summary:before { + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2NjYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1mb2xkLXZlcnRpY2FsIj48cGF0aCBkPSJNMTIgMjJ2LTYiLz48cGF0aCBkPSJNMTIgOFYyIi8+PHBhdGggZD0iTTQgMTJIMiIvPjxwYXRoIGQ9Ik0xMCAxMkg4Ii8+PHBhdGggZD0iTTE2IDEyaC0yIi8+PHBhdGggZD0iTTIyIDEyaC0yIi8+PHBhdGggZD0ibTE1IDE5LTMtMy0zIDMiLz48cGF0aCBkPSJtMTUgNS0zIDMtMy0zIi8+PC9zdmc+); + } +} + +body[theme='dark'] { + --preview-border: #2f2e30; + --preview-background: #202023; + --preview-text: #a1a1aa; + --preview-text: #666666; +} diff --git a/apps/design-system/src/components/docs-page/example.tsx b/apps/design-system/src/components/docs-page/example.tsx new file mode 100644 index 000000000..269dd966f --- /dev/null +++ b/apps/design-system/src/components/docs-page/example.tsx @@ -0,0 +1,141 @@ +import { ComponentProps, FC, useMemo } from 'react' +import { LiveEditor, LiveError, LivePreview, LiveProvider } from 'react-live' + +import ExampleLayout from '@components/docs-page/example-layout.tsx' + +import css from './example.module.css' + +type LiveProviderProps = ComponentProps + +export type ExampleProps = Pick + +const Example: FC = ({ code, scope }) => { + const scopeWithLayout = useMemo(() => ({ ...scope, ExampleLayout }), [scope]) + + return ( +
+ ${code}`} scope={scopeWithLayout} theme={theme}> +
+ + +
+
+ Code Editor + +
+ +
+ ) +} + +export default Example + +const theme: LiveProviderProps['theme'] = { + plain: { + backgroundColor: '#fff', + color: '#1f2937', // ? + fontWeight: '400', + fontStyle: 'normal', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + fontFamily: 'Roboto Mono, JetBrains Mono, monospace', + fontSize: '13px', + textRendering: 'geometricPrecision' + }, + styles: [ + { + types: ['comment', 'prolog', 'doctype', 'cdata', 'punctuation'], + style: { + color: '#374151' + } + }, + { + types: ['namespace'], + style: { + opacity: 1 + } + }, + { + types: ['tag', 'operator', 'number'], + style: { + color: '#1d4ed8', + fontWeight: '500' + } + }, + { + types: ['property', 'function'], + style: { + color: '#a21caf' + } + }, + { + types: ['tag-id', 'selector', 'atrule-id'], + style: { + color: '#eeebff' + } + }, + { + types: ['attr-name'], + style: { + color: '#a21caf' + } + }, + { + types: [ + 'boolean', + 'string', + 'entity', + 'url', + 'attr-value', + 'keyword', + 'control', + 'directive', + 'unit', + 'statement', + 'regex', + 'at-rule', + 'placeholder', + 'variable' + ], + style: { + color: '#06b6d4' + } + }, + { + types: ['deleted'], + style: { + textDecorationLine: 'line-through' + } + }, + { + types: ['language-javascript', 'script'], + style: { + color: '#1d4ed8' + } + }, + { + types: ['inserted'], + style: { + textDecorationLine: 'underline' + } + }, + { + types: ['italic'], + style: { + fontStyle: 'italic' + } + }, + { + types: ['important', 'bold'], + style: { + fontWeight: 'bold' + } + }, + { + types: ['important'], + style: { + color: '#c4b9fe' + } + } + ] +} diff --git a/apps/design-system/src/components/docs-page/root.module.css b/apps/design-system/src/components/docs-page/root.module.css new file mode 100644 index 000000000..f995e727b --- /dev/null +++ b/apps/design-system/src/components/docs-page/root.module.css @@ -0,0 +1,13 @@ +.root { + padding: 4rem; + display: flex; + justify-content: center; +} + +.content { + width: 100%; + max-width: 960px; + display: flex; + flex-direction: column; + gap: 2rem; +} diff --git a/apps/design-system/src/components/docs-page/root.tsx b/apps/design-system/src/components/docs-page/root.tsx new file mode 100644 index 000000000..593e7157b --- /dev/null +++ b/apps/design-system/src/components/docs-page/root.tsx @@ -0,0 +1,11 @@ +import { FC, PropsWithChildren } from 'react' + +import css from './root.module.css' + +const Root: FC = ({ children }) => ( +
+
{children}
+
+) + +export default Root diff --git a/apps/design-system/src/components/docs-page/section.tsx b/apps/design-system/src/components/docs-page/section.tsx new file mode 100644 index 000000000..395cdc7b7 --- /dev/null +++ b/apps/design-system/src/components/docs-page/section.tsx @@ -0,0 +1,20 @@ +import { FC, PropsWithChildren, ReactNode } from 'react' + +import { Text } from '@harnessio/ui/components' + +export interface SectionProps extends PropsWithChildren { + title: string + description?: ReactNode +} + +const Section: FC = ({ title, description, children }) => ( +
+ + {title} + + {description} + {children} +
+) + +export default Section diff --git a/apps/design-system/src/components/docs-page/summary.tsx b/apps/design-system/src/components/docs-page/summary.tsx new file mode 100644 index 000000000..625b74e98 --- /dev/null +++ b/apps/design-system/src/components/docs-page/summary.tsx @@ -0,0 +1,18 @@ +import { FC, PropsWithChildren } from 'react' + +import { Text } from '@harnessio/ui/components' + +export interface SummaryProps extends PropsWithChildren { + title: string +} + +const Summary: FC = ({ title, children }) => ( +
+ + {title} + + {children} +
+) + +export default Summary diff --git a/apps/design-system/src/pages/component-page.tsx b/apps/design-system/src/pages/component-page.tsx new file mode 100644 index 000000000..aadf6a907 --- /dev/null +++ b/apps/design-system/src/pages/component-page.tsx @@ -0,0 +1,14 @@ +import { FC } from 'react' +import { Route, Routes } from 'react-router-dom' + +import { componentPages } from '@subjects/components/componentPages.ts' + +const ComponentPage: FC = () => ( + + {componentPages.map(props => ( + + ))} + +) + +export default ComponentPage diff --git a/apps/design-system/src/pages/view-preview/repo-files-view-wrapper.tsx b/apps/design-system/src/pages/view-preview/repo-files-view-wrapper.tsx index 8b545845d..20fd0d107 100644 --- a/apps/design-system/src/pages/view-preview/repo-files-view-wrapper.tsx +++ b/apps/design-system/src/pages/view-preview/repo-files-view-wrapper.tsx @@ -1,11 +1,11 @@ import { FC, PropsWithChildren, useCallback } from 'react' +import { OpenapiContentInfo, repoFilesStore } from '@subjects/views/repo-files/components/repo-files-store.ts' +import { noop, useTranslationsStore } from '@utils/viewUtils.ts' + import { FileExplorer } from '@harnessio/ui/components' import { BranchSelectorTab, IBranchSelectorStore, RepoSidebar as RepoSidebarView } from '@harnessio/ui/views' -import { noop, useTranslationsStore } from '../../utils.ts' -import { OpenapiContentInfo, repoFilesStore } from '../../views/repo-files/components/repo-files-store.ts' - const sortEntriesByType = (entries: OpenapiContentInfo[]): OpenapiContentInfo[] => { return entries.sort((a, b) => { if (a.type === 'dir' && b.type === 'file') { diff --git a/apps/design-system/src/pages/view-preview/repo-view-wrapper.tsx b/apps/design-system/src/pages/view-preview/repo-view-wrapper.tsx index 206ebbdab..0e08d81c5 100644 --- a/apps/design-system/src/pages/view-preview/repo-view-wrapper.tsx +++ b/apps/design-system/src/pages/view-preview/repo-view-wrapper.tsx @@ -1,9 +1,10 @@ import { FC, PropsWithChildren } from 'react' import { Route } from 'react-router-dom' +import { useTranslationsStore } from '@utils/viewUtils.ts' + import { RepoLayout } from '@harnessio/ui/views' -import { useTranslationsStore } from '../../utils.ts' import RootViewWrapper from './root-view-wrapper.tsx' const RepoViewWrapper: FC> = ({ children }) => ( diff --git a/apps/design-system/src/pages/view-preview/root-view-wrapper.tsx b/apps/design-system/src/pages/view-preview/root-view-wrapper.tsx index 04f3941b2..95a27ae5e 100644 --- a/apps/design-system/src/pages/view-preview/root-view-wrapper.tsx +++ b/apps/design-system/src/pages/view-preview/root-view-wrapper.tsx @@ -1,11 +1,11 @@ import { FC, PropsWithChildren, useCallback, useState } from 'react' import { Route, Routes } from 'react-router-dom' +import { noop, useThemeStore, useTranslationsStore } from '@utils/viewUtils.ts' + import { NavbarItemType, NavState } from '@harnessio/ui/components' import { SandboxRoot } from '@harnessio/ui/views' -import { noop, useThemeStore, useTranslationsStore } from '../../utils.ts' - const RootViewWrapper: FC> = ({ children, asChild = false }) => { const [pinnedMenu, setPinnedMenu] = useState([]) const [recentMenu, setRecentMenu] = useState([]) diff --git a/apps/design-system/src/pages/view-preview/view-preview.tsx b/apps/design-system/src/pages/view-preview/view-preview.tsx index cb3dedddd..1c7ca6cef 100644 --- a/apps/design-system/src/pages/view-preview/view-preview.tsx +++ b/apps/design-system/src/pages/view-preview/view-preview.tsx @@ -4,20 +4,24 @@ import '@harnessio/ui/styles.css' import { Navigate, Route, Routes } from 'react-router-dom' -import ExecutionListWrapper from '../../views/execution-list/execution-list.tsx' -import PipelineListWrapper from '../../views/pipeline-list/pipeline-list.tsx' -import PullRequestCompareWrapper from '../../views/pull-request-compare/pull-request-compare.tsx' -import PullRequestListWrapper from '../../views/pull-request-list/pull-request-list.tsx' -import { RepoCommitsView } from '../../views/repo-commits' -import { RepoFilesEditView, RepoFilesJsonView, RepoFilesList, RepoFilesMarkdownView } from '../../views/repo-files' -import RepoListWrapper from '../../views/repo-list/repo-list.tsx' -import RepoSummaryViewWrapper from '../../views/repo-summary/repo-summary.tsx' +import ExecutionListWrapper from '@subjects/views/execution-list/execution-list.tsx' +import PipelineListWrapper from '@subjects/views/pipeline-list/pipeline-list.tsx' +import PullRequestCompareWrapper from '@subjects/views/pull-request-compare/pull-request-compare.tsx' +import PullRequestListWrapper from '@subjects/views/pull-request-list/pull-request-list.tsx' +import { RepoCommitsView } from '@subjects/views/repo-commits' +import { RepoFilesEditView } from '@subjects/views/repo-files/repo-files-edit-view.tsx' +import { RepoFilesJsonView } from '@subjects/views/repo-files/repo-files-json-view.tsx' +import { RepoFilesList } from '@subjects/views/repo-files/repo-files-list.tsx' +import { RepoFilesMarkdownView } from '@subjects/views/repo-files/repo-files-markdown-view.tsx' +import RepoListWrapper from '@subjects/views/repo-list/repo-list.tsx' +import RepoSummaryViewWrapper from '@subjects/views/repo-summary/repo-summary.tsx' + import { RepoFilesViewWrapper } from './repo-files-view-wrapper.tsx' import RepoViewWrapper from './repo-view-wrapper.tsx' import RootViewWrapper from './root-view-wrapper.tsx' import ViewSettings from './view-settings.tsx' -const views: Record = { +export const viewPreviews: Record = { 'repo-summary': ( @@ -83,8 +87,8 @@ const views: Record = { ) } -const routeEntries = Object.entries(views) -const routeKeys = Object.keys(views) +const routeEntries = Object.entries(viewPreviews) +const routeKeys = Object.keys(viewPreviews) const ViewPreview: FC = () => { return ( diff --git a/apps/design-system/src/pages/view-preview/view-switcher/view-switcher.module.css b/apps/design-system/src/pages/view-preview/view-switcher/view-switcher.module.css deleted file mode 100644 index 62b0cd045..000000000 --- a/apps/design-system/src/pages/view-preview/view-switcher/view-switcher.module.css +++ /dev/null @@ -1,10 +0,0 @@ -.select { - z-index: 1000; - position: fixed; - bottom: 1rem; - right: 1rem; - color: darkslategrey; - font-size: 1rem; - padding: 1rem; - border-radius: 0.5em; -} diff --git a/apps/design-system/src/pages/view-preview/view-switcher/view-switcher.tsx b/apps/design-system/src/pages/view-preview/view-switcher/view-switcher.tsx deleted file mode 100644 index da77bac0d..000000000 --- a/apps/design-system/src/pages/view-preview/view-switcher/view-switcher.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { FC, useMemo } from 'react' -import { useLocation, useNavigate } from 'react-router-dom' - -import css from './view-switcher.module.css' - -export interface ViewSwitcherProps { - routes: string[] -} - -const ViewSwitcher: FC = ({ routes }) => { - const navigate = useNavigate() - const { pathname } = useLocation() - - const currentView = useMemo( - () => pathname.match(/view-preview\/([^/]+)/)?.[1] || routes[0], - [pathname, routes] - ) - - if (routes.length < 2) return null - - return ( - - ) -} - -export default ViewSwitcher diff --git a/apps/design-system/src/subjects/components/alert.tsx b/apps/design-system/src/subjects/components/alert.tsx new file mode 100644 index 000000000..3eb48136a --- /dev/null +++ b/apps/design-system/src/subjects/components/alert.tsx @@ -0,0 +1,29 @@ +import { FC } from 'react' + +import { DocsPage } from '@components/docs-page/docs-page.tsx' + +import { Text } from '@harnessio/ui/components' + +const AlertComponent: FC = () => ( + + + A warning message showing that attention is required. + + + + This is an alert + An alert has happened and someone should look into that. + +`} + /> + + + The Alert.Container component is a thing + This is a test`} /> + + +) + +export default AlertComponent diff --git a/apps/design-system/src/subjects/components/badge.tsx b/apps/design-system/src/subjects/components/badge.tsx new file mode 100644 index 000000000..d9dd8deb4 --- /dev/null +++ b/apps/design-system/src/subjects/components/badge.tsx @@ -0,0 +1,24 @@ +import { FC } from 'react' + +import { DocsPage } from '@components/docs-page/docs-page.tsx' + +import { Text } from '@harnessio/ui/components' + +const BadgeComponent: FC = () => ( + + + + A label that shows the status of an object, emphasizes an element that requires attention, or helps categorize + with other similar elements. + + + + Label`} /> + + + Label`} /> + + +) + +export default BadgeComponent diff --git a/apps/design-system/src/subjects/components/button.tsx b/apps/design-system/src/subjects/components/button.tsx new file mode 100644 index 000000000..82abeb7f5 --- /dev/null +++ b/apps/design-system/src/subjects/components/button.tsx @@ -0,0 +1,158 @@ +import { FC } from 'react' + +import { DocsPage } from '@components/docs-page/docs-page.tsx' + +import { Text } from '@harnessio/ui/components' + +const dropdown = ` + + + + + + + Item 1 + Item 2 + + + +` + +const onClick = () => alert('Button clicked') +const scope = { onClick } + +const ButtonComponent: FC = () => ( + + + It is a button + + + I am a button`} /> + + The `Button` component supports a number of variants using the `variant` prop.} + > + Default variant + + + + + + + + + + + `} + /> + + + The `Button` component supports a number of sizes using the `size` prop.} + > + Default size + + + + + + + + +`} + /> + + + The `Button` component supports a number of border radii using the `borderRadius` prop. + } + > + Default border radius + + +`} + /> + + + The `Button` component supports a number of themes using the `theme` prop.} + > + Default theme + + + + + +`} + /> + + + The `Button` component supports a number of padding options using the `padding` prop. + } + > + Default padding + +`} + /> + + + The `Button` component supports a number of gradient options using the `gradient` prop. + } + > + Default gradient +`} + /> + + +) + +export default ButtonComponent diff --git a/apps/design-system/src/subjects/components/componentPages.ts b/apps/design-system/src/subjects/components/componentPages.ts new file mode 100644 index 000000000..19b046ce8 --- /dev/null +++ b/apps/design-system/src/subjects/components/componentPages.ts @@ -0,0 +1,17 @@ +import type { RouteProps } from 'react-router-dom' + +import AlertComponent from '@subjects/components/alert.tsx' +import BadgeComponent from '@subjects/components/badge.tsx' +import ButtonComponent from '@subjects/components/button.tsx' + +interface ComponentPage { + name: string + path: string + Component: RouteProps['Component'] +} + +export const componentPages: ComponentPage[] = [ + { name: 'Alert', path: 'alert', Component: AlertComponent }, + { name: 'Badge', path: 'badge', Component: BadgeComponent }, + { name: 'Button', path: 'button', Component: ButtonComponent } +] diff --git a/apps/design-system/src/views/execution-list/execution-list.store.ts b/apps/design-system/src/subjects/views/execution-list/execution-list.store.ts similarity index 95% rename from apps/design-system/src/views/execution-list/execution-list.store.ts rename to apps/design-system/src/subjects/views/execution-list/execution-list.store.ts index 58a60a565..3fc64892b 100644 --- a/apps/design-system/src/views/execution-list/execution-list.store.ts +++ b/apps/design-system/src/subjects/views/execution-list/execution-list.store.ts @@ -1,6 +1,6 @@ -import { IExecution, IExecutionListStore, PipelineExecutionStatus } from '@harnessio/ui/views' +import { noop } from '@utils/viewUtils.ts' -import { noop } from '../../utils' +import { IExecution, IExecutionListStore, PipelineExecutionStatus } from '@harnessio/ui/views' const executions: IExecution[] = [ { diff --git a/apps/design-system/src/views/execution-list/execution-list.tsx b/apps/design-system/src/subjects/views/execution-list/execution-list.tsx similarity index 91% rename from apps/design-system/src/views/execution-list/execution-list.tsx rename to apps/design-system/src/subjects/views/execution-list/execution-list.tsx index 8ae898360..b3355a22a 100644 --- a/apps/design-system/src/views/execution-list/execution-list.tsx +++ b/apps/design-system/src/subjects/views/execution-list/execution-list.tsx @@ -1,9 +1,10 @@ import { FC } from 'react' import { Link } from 'react-router-dom' +import { noop, useTranslationsStore } from '@utils/viewUtils.ts' + import { ExecutionListPage, RepoSummaryViewProps, TLinkComponent } from '@harnessio/ui/views' -import { noop, useTranslationsStore } from '../../utils.ts' import { useExecutionListStore } from './execution-list.store.ts' const LinkComponent: TLinkComponent = ({ to, children }) => {children} diff --git a/apps/design-system/src/views/pipeline-list/pipeline-list.store.ts b/apps/design-system/src/subjects/views/pipeline-list/pipeline-list.store.ts similarity index 97% rename from apps/design-system/src/views/pipeline-list/pipeline-list.store.ts rename to apps/design-system/src/subjects/views/pipeline-list/pipeline-list.store.ts index fabc71b94..478fa3c65 100644 --- a/apps/design-system/src/views/pipeline-list/pipeline-list.store.ts +++ b/apps/design-system/src/subjects/views/pipeline-list/pipeline-list.store.ts @@ -1,8 +1,8 @@ +import { noop } from '@utils/viewUtils.ts' + import { MeterState } from '@harnessio/ui/components' import { IPipeline, IPipelineListStore, PipelineExecutionStatus } from '@harnessio/ui/views' -import { noop } from '../../utils' - const pipelines: IPipeline[] = [ { id: '1', diff --git a/apps/design-system/src/views/pipeline-list/pipeline-list.tsx b/apps/design-system/src/subjects/views/pipeline-list/pipeline-list.tsx similarity index 91% rename from apps/design-system/src/views/pipeline-list/pipeline-list.tsx rename to apps/design-system/src/subjects/views/pipeline-list/pipeline-list.tsx index 6e03f1a9f..d52b43eb5 100644 --- a/apps/design-system/src/views/pipeline-list/pipeline-list.tsx +++ b/apps/design-system/src/subjects/views/pipeline-list/pipeline-list.tsx @@ -1,9 +1,10 @@ import { FC } from 'react' import { Link } from 'react-router-dom' +import { noop, useTranslationsStore } from '@utils/viewUtils.ts' + import { PipelineListPage, RepoSummaryViewProps, TLinkComponent } from '@harnessio/ui/views' -import { noop, useTranslationsStore } from '../../utils.ts' import { usePipelineListStore } from './pipeline-list.store.ts' const LinkComponent: TLinkComponent = ({ to, children }) => {children} diff --git a/apps/design-system/src/views/pull-request-compare/pull-request-compare.tsx b/apps/design-system/src/subjects/views/pull-request-compare/pull-request-compare.tsx similarity index 96% rename from apps/design-system/src/views/pull-request-compare/pull-request-compare.tsx rename to apps/design-system/src/subjects/views/pull-request-compare/pull-request-compare.tsx index 874c62b66..b67d72998 100644 --- a/apps/design-system/src/views/pull-request-compare/pull-request-compare.tsx +++ b/apps/design-system/src/subjects/views/pull-request-compare/pull-request-compare.tsx @@ -1,8 +1,9 @@ import { FC, useCallback } from 'react' +import { noop, useTranslationsStore } from '@utils/viewUtils.ts' + import { PullRequestCompare, SandboxPullRequestCompareProps } from '@harnessio/ui/views' -import { noop, useTranslationsStore } from '../../utils.ts' import { repoBranchListStore } from './repo-branch-store.ts' import { repoCommitStore } from './repo-commit-store.ts' diff --git a/apps/design-system/src/views/pull-request-compare/repo-branch-store.ts b/apps/design-system/src/subjects/views/pull-request-compare/repo-branch-store.ts similarity index 96% rename from apps/design-system/src/views/pull-request-compare/repo-branch-store.ts rename to apps/design-system/src/subjects/views/pull-request-compare/repo-branch-store.ts index 60bb78fa2..ea1d8b005 100644 --- a/apps/design-system/src/views/pull-request-compare/repo-branch-store.ts +++ b/apps/design-system/src/subjects/views/pull-request-compare/repo-branch-store.ts @@ -1,6 +1,6 @@ -import { BranchSelectorTab } from '@harnessio/ui/views' +import { noop } from '@utils/viewUtils.ts' -import { noop } from '../../utils' +import { BranchSelectorTab } from '@harnessio/ui/views' export const repoBranchListStore = { selectedBranchTag: { name: 'main', sha: '1d0e5a9461b340ebb3d7e092a2d35ff6d0d5c952', default: true }, diff --git a/apps/design-system/src/views/pull-request-compare/repo-commit-store.ts b/apps/design-system/src/subjects/views/pull-request-compare/repo-commit-store.ts similarity index 96% rename from apps/design-system/src/views/pull-request-compare/repo-commit-store.ts rename to apps/design-system/src/subjects/views/pull-request-compare/repo-commit-store.ts index 7f2c6d8f6..8d2eedce8 100644 --- a/apps/design-system/src/views/pull-request-compare/repo-commit-store.ts +++ b/apps/design-system/src/subjects/views/pull-request-compare/repo-commit-store.ts @@ -1,4 +1,4 @@ -import { noop } from '../../utils' +import { noop } from '@utils/viewUtils.ts' export const repoCommitStore = { setPage: noop, diff --git a/apps/design-system/src/views/pull-request-list/pull-request-list-store.ts b/apps/design-system/src/subjects/views/pull-request-list/pull-request-list-store.ts similarity index 91% rename from apps/design-system/src/views/pull-request-list/pull-request-list-store.ts rename to apps/design-system/src/subjects/views/pull-request-list/pull-request-list-store.ts index ef67bf158..d885cede0 100644 --- a/apps/design-system/src/views/pull-request-list/pull-request-list-store.ts +++ b/apps/design-system/src/subjects/views/pull-request-list/pull-request-list-store.ts @@ -1,4 +1,4 @@ -import { noop } from '../../utils' +import { noop } from '@utils/viewUtils.ts' export const pullRequestListStore = { pullRequests: [ diff --git a/apps/design-system/src/views/pull-request-list/pull-request-list.tsx b/apps/design-system/src/subjects/views/pull-request-list/pull-request-list.tsx similarity index 90% rename from apps/design-system/src/views/pull-request-list/pull-request-list.tsx rename to apps/design-system/src/subjects/views/pull-request-list/pull-request-list.tsx index a1c841ae7..652244b8b 100644 --- a/apps/design-system/src/views/pull-request-list/pull-request-list.tsx +++ b/apps/design-system/src/subjects/views/pull-request-list/pull-request-list.tsx @@ -1,8 +1,9 @@ import { FC, useCallback } from 'react' +import { noop, useTranslationsStore } from '@utils/viewUtils.ts' + import { PullRequestList, PullRequestPageProps } from '@harnessio/ui/views' -import { noop, useTranslationsStore } from '../../utils.ts' import { pullRequestListStore } from './pull-request-list-store.ts' const PullRequestListWrapper: FC> = props => { diff --git a/apps/design-system/src/views/repo-commits/index.tsx b/apps/design-system/src/subjects/views/repo-commits/index.tsx similarity index 95% rename from apps/design-system/src/views/repo-commits/index.tsx rename to apps/design-system/src/subjects/views/repo-commits/index.tsx index 622bae432..aa0e2ddd7 100644 --- a/apps/design-system/src/views/repo-commits/index.tsx +++ b/apps/design-system/src/subjects/views/repo-commits/index.tsx @@ -1,8 +1,9 @@ import { useCallback, useState } from 'react' +import { noop, useTranslationsStore } from '@utils/viewUtils.ts' + import { BranchSelectorTab, IBranchSelectorStore, RepoCommitsView as RepoCommitsUiView } from '@harnessio/ui/views' -import { noop, useTranslationsStore } from '../../utils' import { repoFilesStore } from '../repo-files/components/repo-files-store' import { repoCommitsStore } from './repo-commits-store' diff --git a/apps/design-system/src/views/repo-commits/repo-commits-store.ts b/apps/design-system/src/subjects/views/repo-commits/repo-commits-store.ts similarity index 100% rename from apps/design-system/src/views/repo-commits/repo-commits-store.ts rename to apps/design-system/src/subjects/views/repo-commits/repo-commits-store.ts diff --git a/apps/design-system/src/views/repo-files/components/repo-file-content-viewer.tsx b/apps/design-system/src/subjects/views/repo-files/components/repo-file-content-viewer.tsx similarity index 94% rename from apps/design-system/src/views/repo-files/components/repo-file-content-viewer.tsx rename to apps/design-system/src/subjects/views/repo-files/components/repo-file-content-viewer.tsx index 3b5a26045..0a68598e1 100644 --- a/apps/design-system/src/views/repo-files/components/repo-file-content-viewer.tsx +++ b/apps/design-system/src/subjects/views/repo-files/components/repo-file-content-viewer.tsx @@ -1,5 +1,7 @@ import { useState } from 'react' +import { noop } from '@utils/viewUtils.ts' + import { FileViewerControlBar, GitCommitDialog, @@ -9,9 +11,8 @@ import { } from '@harnessio/ui/components' import { BlameEditor, CodeEditor } from '@harnessio/yaml-editor' -import { themes } from '../../../theme/monaco-theme' -import { noop } from '../../../utils' -import { repoFilesStore } from './repo-files-store' +import { themes } from '../theme/monaco-theme.ts' +import { repoFilesStore } from './repo-files-store.ts' export const RepoFileContentViewer = ({ isMarkdown = false }: { isMarkdown?: boolean }) => { const [isDeleteFileDialogOpen, setIsDeleteFileDialogOpen] = useState(false) diff --git a/apps/design-system/src/views/repo-files/components/repo-file-edit.tsx b/apps/design-system/src/subjects/views/repo-files/components/repo-file-edit.tsx similarity index 92% rename from apps/design-system/src/views/repo-files/components/repo-file-edit.tsx rename to apps/design-system/src/subjects/views/repo-files/components/repo-file-edit.tsx index a9eb1bf29..77dcb1f50 100644 --- a/apps/design-system/src/views/repo-files/components/repo-file-edit.tsx +++ b/apps/design-system/src/subjects/views/repo-files/components/repo-file-edit.tsx @@ -1,13 +1,14 @@ import { useCallback, useState } from 'react' +import { noop, useTranslationsStore } from '@utils/viewUtils.ts' + import { EditViewTypeValue, FileEditorControlBar, GitCommitDialog, GitCommitFormType } from '@harnessio/ui/components' import { CodeModes, PathActionBar } from '@harnessio/ui/views' import { CodeDiffEditor, CodeEditor } from '@harnessio/yaml-editor' -import { useExitConfirm } from '../../../hooks/use-exit-confirm' -import { themes } from '../../../theme/monaco-theme' -import { noop, useTranslationsStore } from '../../../utils' -import { repoFilesStore } from './repo-files-store' +import { useExitConfirm } from '../hooks/use-exit-confirm.ts' +import { themes } from '../theme/monaco-theme.ts' +import { repoFilesStore } from './repo-files-store.ts' export const RepoFileEdit = () => { const [view, setView] = useState('edit') diff --git a/apps/design-system/src/views/repo-files/components/repo-files-store.ts b/apps/design-system/src/subjects/views/repo-files/components/repo-files-store.ts similarity index 100% rename from apps/design-system/src/views/repo-files/components/repo-files-store.ts rename to apps/design-system/src/subjects/views/repo-files/components/repo-files-store.ts diff --git a/apps/design-system/src/views/repo-files/components/repo-files-wrapper.tsx b/apps/design-system/src/subjects/views/repo-files/components/repo-files-wrapper.tsx similarity index 96% rename from apps/design-system/src/views/repo-files/components/repo-files-wrapper.tsx rename to apps/design-system/src/subjects/views/repo-files/components/repo-files-wrapper.tsx index 80eac7767..4058245b6 100644 --- a/apps/design-system/src/views/repo-files/components/repo-files-wrapper.tsx +++ b/apps/design-system/src/subjects/views/repo-files/components/repo-files-wrapper.tsx @@ -1,8 +1,9 @@ import { FC, useCallback, useMemo } from 'react' +import { noop, useTranslationsStore } from '@utils/viewUtils.ts' + import { BranchSelectorTab, CodeModes, IBranchSelectorStore, RepoFiles } from '@harnessio/ui/views' -import { noop, useTranslationsStore } from '../../../utils' import { RepoFileContentViewer } from './repo-file-content-viewer' import { RepoFileEdit } from './repo-file-edit' import { repoFilesStore } from './repo-files-store' diff --git a/apps/design-system/src/context/exit-confirm-context.tsx b/apps/design-system/src/subjects/views/repo-files/context/exit-confirm-context.tsx similarity index 100% rename from apps/design-system/src/context/exit-confirm-context.tsx rename to apps/design-system/src/subjects/views/repo-files/context/exit-confirm-context.tsx diff --git a/apps/design-system/src/hooks/use-exit-confirm.ts b/apps/design-system/src/subjects/views/repo-files/hooks/use-exit-confirm.ts similarity index 100% rename from apps/design-system/src/hooks/use-exit-confirm.ts rename to apps/design-system/src/subjects/views/repo-files/hooks/use-exit-confirm.ts diff --git a/apps/design-system/src/views/repo-files/index.ts b/apps/design-system/src/subjects/views/repo-files/index.ts similarity index 100% rename from apps/design-system/src/views/repo-files/index.ts rename to apps/design-system/src/subjects/views/repo-files/index.ts diff --git a/apps/design-system/src/views/repo-files/repo-files-edit-view.tsx b/apps/design-system/src/subjects/views/repo-files/repo-files-edit-view.tsx similarity index 100% rename from apps/design-system/src/views/repo-files/repo-files-edit-view.tsx rename to apps/design-system/src/subjects/views/repo-files/repo-files-edit-view.tsx diff --git a/apps/design-system/src/views/repo-files/repo-files-json-view.tsx b/apps/design-system/src/subjects/views/repo-files/repo-files-json-view.tsx similarity index 100% rename from apps/design-system/src/views/repo-files/repo-files-json-view.tsx rename to apps/design-system/src/subjects/views/repo-files/repo-files-json-view.tsx diff --git a/apps/design-system/src/views/repo-files/repo-files-list.tsx b/apps/design-system/src/subjects/views/repo-files/repo-files-list.tsx similarity index 100% rename from apps/design-system/src/views/repo-files/repo-files-list.tsx rename to apps/design-system/src/subjects/views/repo-files/repo-files-list.tsx diff --git a/apps/design-system/src/views/repo-files/repo-files-markdown-view.tsx b/apps/design-system/src/subjects/views/repo-files/repo-files-markdown-view.tsx similarity index 100% rename from apps/design-system/src/views/repo-files/repo-files-markdown-view.tsx rename to apps/design-system/src/subjects/views/repo-files/repo-files-markdown-view.tsx diff --git a/apps/design-system/src/theme/monaco-theme.ts b/apps/design-system/src/subjects/views/repo-files/theme/monaco-theme.ts similarity index 100% rename from apps/design-system/src/theme/monaco-theme.ts rename to apps/design-system/src/subjects/views/repo-files/theme/monaco-theme.ts diff --git a/apps/design-system/src/views/repo-list/repo-list-store.json b/apps/design-system/src/subjects/views/repo-list/repo-list-store.json similarity index 100% rename from apps/design-system/src/views/repo-list/repo-list-store.json rename to apps/design-system/src/subjects/views/repo-list/repo-list-store.json diff --git a/apps/design-system/src/views/repo-list/repo-list.tsx b/apps/design-system/src/subjects/views/repo-list/repo-list.tsx similarity index 90% rename from apps/design-system/src/views/repo-list/repo-list.tsx rename to apps/design-system/src/subjects/views/repo-list/repo-list.tsx index 7ca6a4cb1..53d529e8f 100644 --- a/apps/design-system/src/views/repo-list/repo-list.tsx +++ b/apps/design-system/src/subjects/views/repo-list/repo-list.tsx @@ -1,8 +1,9 @@ import { FC, useCallback } from 'react' +import { noop, useTranslationsStore } from '@utils/viewUtils.ts' + import { RepoListProps, SandboxRepoListPage } from '@harnessio/ui/views' -import { noop, useTranslationsStore } from '../../utils.ts' import repoListStore from './repo-list-store.json' const RepoListWrapper: FC> = props => { diff --git a/apps/design-system/src/views/repo-summary/repo-summary-props.json b/apps/design-system/src/subjects/views/repo-summary/repo-summary-props.json similarity index 100% rename from apps/design-system/src/views/repo-summary/repo-summary-props.json rename to apps/design-system/src/subjects/views/repo-summary/repo-summary-props.json diff --git a/apps/design-system/src/views/repo-summary/repo-summary.tsx b/apps/design-system/src/subjects/views/repo-summary/repo-summary.tsx similarity index 96% rename from apps/design-system/src/views/repo-summary/repo-summary.tsx rename to apps/design-system/src/subjects/views/repo-summary/repo-summary.tsx index 2e576197e..4ca16b907 100644 --- a/apps/design-system/src/views/repo-summary/repo-summary.tsx +++ b/apps/design-system/src/subjects/views/repo-summary/repo-summary.tsx @@ -1,8 +1,9 @@ import { FC, useCallback, useMemo } from 'react' +import { useTranslationsStore } from '@utils/viewUtils.ts' + import { BranchSelectorTab, IBranchSelectorStore, RepoSummaryView, RepoSummaryViewProps } from '@harnessio/ui/views' -import { useTranslationsStore } from '../../utils.ts' import repoSummaryProps from './repo-summary-props.json' const noop = () => void 0 diff --git a/apps/design-system/src/utils.ts b/apps/design-system/src/utils/viewUtils.ts similarity index 82% rename from apps/design-system/src/utils.ts rename to apps/design-system/src/utils/viewUtils.ts index 54012b809..8d79063bf 100644 --- a/apps/design-system/src/utils.ts +++ b/apps/design-system/src/utils/viewUtils.ts @@ -4,5 +4,6 @@ export const mockT = (...args: unknown[]) => { return args[1] || args[0] } +// eslint-disable-next-line @typescript-eslint/no-explicit-any export const useTranslationsStore = () => ({ t: mockT as any, changeLanguage: noop, i18n: {} as any }) export const useThemeStore = () => ({ theme: 'dark-std-std' as any, setTheme: noop }) diff --git a/apps/design-system/tsconfig.app.json b/apps/design-system/tsconfig.app.json index 358ca9ba9..9b565d611 100644 --- a/apps/design-system/tsconfig.app.json +++ b/apps/design-system/tsconfig.app.json @@ -20,7 +20,14 @@ "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, - "noUncheckedSideEffectImports": true + "noUncheckedSideEffectImports": true, + + "paths": { + "@utils/*": ["./src/utils/*"], + "@components/*": ["./src/components/*"], + "@subjects/*": ["./src/subjects/*"], + "@/*": ["./src/*"] + } }, "include": ["src"] } diff --git a/apps/design-system/tsconfig.json b/apps/design-system/tsconfig.json index 1ffef600d..d32ff6820 100644 --- a/apps/design-system/tsconfig.json +++ b/apps/design-system/tsconfig.json @@ -1,7 +1,4 @@ { "files": [], - "references": [ - { "path": "./tsconfig.app.json" }, - { "path": "./tsconfig.node.json" } - ] + "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }] } diff --git a/apps/design-system/vite.config.ts b/apps/design-system/vite.config.ts index 957640a07..3cdbc8b96 100644 --- a/apps/design-system/vite.config.ts +++ b/apps/design-system/vite.config.ts @@ -1,7 +1,8 @@ import react from '@vitejs/plugin-react-swc' import { defineConfig } from 'vite' +import tsConfigPaths from 'vite-tsconfig-paths' // https://vite.dev/config/ export default defineConfig({ - plugins: [react()] + plugins: [react(), tsConfigPaths()] }) diff --git a/packages/ui/locales/en/views.json b/packages/ui/locales/en/views.json index 47f34d0d6..a29326a46 100644 --- a/packages/ui/locales/en/views.json +++ b/packages/ui/locales/en/views.json @@ -158,16 +158,13 @@ "createBranchDescription": "Your branches will appear here once they're created.", "startBranchDescription": "Start branching to see your work organized.", "createBranch": "Create branch", - "noRepos": "No repositories yet", - "noReposProject": "There are no repositories in this project yet.", - "createOrImportRepos": "Create new or import an existing repository.", "noCommitsHistory": "No commits history", - "noCommitsHistoryDescription": "There isn't any commit history to show here for the selected user, time range, or current page.", "noCommitsYet": "No commits yet", - "noCommitsYetDescription": "Your commits will appear here once they're made. Start committing to see your changes reflected." - }, - "commits": { - "createNewCommit": "Create new commit" + "noCommitsHistoryDescription": "There isn't any commit history to show here for the selected user, time range, or current page.", + "noCommitsYetDescription": "Your commits will appear here once they're made. Start committing to see your changes reflected.", + "noRepos": "No repositories yet", + "noReposProject": "There are no repositories in this project yet.", + "createOrImportRepos": "Create new or import an existing repository." }, "projectSettings": { "newMember": "New member", @@ -186,5 +183,8 @@ "select": "Select", "baseBranch": "Base Branch", "selectBranchError": "Base branch is required" + }, + "commits": { + "createNewCommit": "Create new commit" } } diff --git a/packages/ui/locales/es/views.json b/packages/ui/locales/es/views.json index 8fa498c72..e2a4512ee 100644 --- a/packages/ui/locales/es/views.json +++ b/packages/ui/locales/es/views.json @@ -158,16 +158,13 @@ "createBranchDescription": "Your branches will appear here once they're created.", "startBranchDescription": "Start branching to see your work organized.", "createBranch": "Create branch", - "noRepos": "No repositories yet", - "noReposProject": "There are no repositories in this project yet.", - "createOrImportRepos": "Create new or import an existing repository.", "noCommitsHistory": "No commits history", - "noCommitsHistoryDescription": "There isn't any commit history to show here for the selected user, time range, or current page.", "noCommitsYet": "No commits yet", - "noCommitsYetDescription": "Your commits will appear here once they're made. Start committing to see your changes reflected." - }, - "commits": { - "createNewCommit": "Create new commit" + "noCommitsHistoryDescription": "There isn't any commit history to show here for the selected user, time range, or current page.", + "noCommitsYetDescription": "Your commits will appear here once they're made. Start committing to see your changes reflected.", + "noRepos": "No repositories yet", + "noReposProject": "There are no repositories in this project yet.", + "createOrImportRepos": "Create new or import an existing repository." }, "projectSettings": { "newMember": "", @@ -186,5 +183,8 @@ "select": "Select", "baseBranch": "Base Branch", "selectBranchError": "" + }, + "commits": { + "createNewCommit": "Create new commit" } } diff --git a/packages/ui/locales/fr/views.json b/packages/ui/locales/fr/views.json index a8fdb8a31..dcec293c8 100644 --- a/packages/ui/locales/fr/views.json +++ b/packages/ui/locales/fr/views.json @@ -158,16 +158,13 @@ "createBranchDescription": "Vos branches apparaîtront ici une fois créées.", "startBranchDescription": "Commencez à créer des branches pour voir votre travail organisé.", "createBranch": "Créer une branche", - "noRepos": "Pas encore de dépôts", - "noReposProject": "Il n'y a pas encore de dépôts dans ce projet.", - "createOrImportRepos": "Créer un nouveau dépôt ou importer un dépôt existant.", "noCommitsHistory": "No commits history", - "noCommitsHistoryDescription": "There isn't any commit history to show here for the selected user, time range, or current page.", "noCommitsYet": "No commits yet", - "noCommitsYetDescription": "Your commits will appear here once they're made. Start committing to see your changes reflected." - }, - "commits": { - "createNewCommit": "Create new commit" + "noCommitsHistoryDescription": "There isn't any commit history to show here for the selected user, time range, or current page.", + "noCommitsYetDescription": "Your commits will appear here once they're made. Start committing to see your changes reflected.", + "noRepos": "Pas encore de dépôts", + "noReposProject": "Il n'y a pas encore de dépôts dans ce projet.", + "createOrImportRepos": "Créer un nouveau dépôt ou importer un dépôt existant." }, "projectSettings": { "newMember": "", @@ -186,5 +183,8 @@ "select": "Sélectionner", "baseBranch": "Branche de base", "selectBranchError": "La branche de base est requise" + }, + "commits": { + "createNewCommit": "Create new commit" } } diff --git a/packages/ui/package.json b/packages/ui/package.json index dfc2a8301..73bdc8613 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -131,7 +131,7 @@ "jsdom": "^25.0.1", "lint-staged": "^15.2.9", "tailwindcss": "^3.4.14", - "typescript": "^5.5.3", + "typescript": "~5.6.2", "vite": "^6.0.3", "vite-bundle-analyzer": "^0.15.2", "vite-plugin-dts": "^4.3.0", diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index d19bb9130..1c136d648 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -16,6 +16,7 @@ export * from './alert-dialog' export * from './popover' export * from './avatar' export * from './navbar' +export * from './navbar-skeleton' export * from './theme-selector' export * from './theme-selector/types' export * from './theme-selector/utils' diff --git a/packages/ui/src/components/more-submenu.tsx b/packages/ui/src/components/more-submenu.tsx index 11cf7f9b4..50b9f5ab4 100644 --- a/packages/ui/src/components/more-submenu.tsx +++ b/packages/ui/src/components/more-submenu.tsx @@ -1,7 +1,6 @@ import { NavLink } from 'react-router-dom' -import { Icon, ScrollArea, Sheet, SheetContent, SheetTitle, Spacer } from '@/components' -import NavbarSkeleton from '@/components/navbar/navbar-skeleton' +import { Icon, NavbarSkeleton, ScrollArea, Sheet, SheetContent, SheetTitle, Spacer } from '@/components' import { MenuGroupType } from '@components/navbar/types' interface MoreSubmenuProps { diff --git a/packages/ui/src/components/navbar-skeleton/content.tsx b/packages/ui/src/components/navbar-skeleton/content.tsx new file mode 100644 index 000000000..9d319523e --- /dev/null +++ b/packages/ui/src/components/navbar-skeleton/content.tsx @@ -0,0 +1,11 @@ +import { PropsWithChildren } from 'react' + +import { cn } from '@utils/cn' + +export interface ContentProps extends PropsWithChildren { + className?: string +} + +export function Content({ children, className }: ContentProps) { + return
{children}
+} diff --git a/packages/ui/src/components/navbar-skeleton/footer.tsx b/packages/ui/src/components/navbar-skeleton/footer.tsx new file mode 100644 index 000000000..e1bb0cacf --- /dev/null +++ b/packages/ui/src/components/navbar-skeleton/footer.tsx @@ -0,0 +1,7 @@ +import { PropsWithChildren } from 'react' + +export function Footer({ children }: PropsWithChildren) { + return ( +
{children}
+ ) +} diff --git a/packages/ui/src/components/navbar-skeleton/group.tsx b/packages/ui/src/components/navbar-skeleton/group.tsx new file mode 100644 index 000000000..33c3fe567 --- /dev/null +++ b/packages/ui/src/components/navbar-skeleton/group.tsx @@ -0,0 +1,31 @@ +import { PropsWithChildren } from 'react' + +import { cn } from '@utils/cn' + +export interface GroupProps extends PropsWithChildren { + title?: string + topBorder?: boolean + isSubMenu?: boolean + titleClassName?: string + className?: string +} + +export function Group({ children, title, topBorder, isSubMenu = false, titleClassName, className }: GroupProps) { + return ( +
+ {title && ( +
+

{title}

+
+ )} + {children} +
+ ) +} diff --git a/packages/ui/src/components/navbar-skeleton/header.tsx b/packages/ui/src/components/navbar-skeleton/header.tsx new file mode 100644 index 000000000..1a64066a2 --- /dev/null +++ b/packages/ui/src/components/navbar-skeleton/header.tsx @@ -0,0 +1,5 @@ +import { PropsWithChildren } from 'react' + +export function Header({ children }: PropsWithChildren) { + return
{children}
+} diff --git a/packages/ui/src/components/navbar-skeleton/index.ts b/packages/ui/src/components/navbar-skeleton/index.ts new file mode 100644 index 000000000..a7b3609b8 --- /dev/null +++ b/packages/ui/src/components/navbar-skeleton/index.ts @@ -0,0 +1,15 @@ +import { Content } from './content' +import { Footer } from './footer' +import { Group } from './group' +import { Header } from './header' +import { Item } from './item' +import { Root } from './root' + +export const NavbarSkeleton = { + Content, + Footer, + Group, + Header, + Item, + Root +} diff --git a/packages/ui/src/components/navbar-skeleton/item.tsx b/packages/ui/src/components/navbar-skeleton/item.tsx new file mode 100644 index 000000000..3bead9470 --- /dev/null +++ b/packages/ui/src/components/navbar-skeleton/item.tsx @@ -0,0 +1,99 @@ +import { ReactElement } from 'react' + +import { Icon, Text } from '@/components' +import { cn } from '@utils/cn' + +export interface ItemProps { + icon?: ReactElement + text: string + description?: string + active?: boolean + className?: string + submenuItem?: boolean + onClick?: () => void +} + +export function Item({ icon, text, description, active, submenuItem, className }: ItemProps) { + if (submenuItem) { + return ( +
+
+
+ {icon ? ( +
+ + {icon} +
+ ) : ( +
+ )} +
+
+ + {text} + + {!!description && ( + + {description} + + )} +
+
+ ) + } + + return ( +
+ {icon && ( +
+ {active && ( + + )} + {icon} +
+ )} + + {text} + +
+ ) +} diff --git a/packages/ui/src/components/navbar/navbar-skeleton/noise.png b/packages/ui/src/components/navbar-skeleton/noise.png similarity index 100% rename from packages/ui/src/components/navbar/navbar-skeleton/noise.png rename to packages/ui/src/components/navbar-skeleton/noise.png diff --git a/packages/ui/src/components/navbar-skeleton/root.tsx b/packages/ui/src/components/navbar-skeleton/root.tsx new file mode 100644 index 000000000..d41c3ff1b --- /dev/null +++ b/packages/ui/src/components/navbar-skeleton/root.tsx @@ -0,0 +1,61 @@ +import { PropsWithChildren } from 'react' + +import { cn } from '@utils/cn' +import { isSafari } from '@utils/isSafari' + +import noiseBg from './noise.png' + +export interface RootProps extends PropsWithChildren { + className?: string + isSubMenu?: boolean +} + +export function Root({ className, children, isSubMenu = false }: RootProps) { + return ( +
+ {!isSubMenu && ( + <> +
+
+
+
+
+ + )} + {children} +
+ ) +} diff --git a/packages/ui/src/components/navbar/navbar-item/index.tsx b/packages/ui/src/components/navbar/navbar-item/index.tsx index e47836de2..ec5c1f8db 100644 --- a/packages/ui/src/components/navbar/navbar-item/index.tsx +++ b/packages/ui/src/components/navbar/navbar-item/index.tsx @@ -10,9 +10,9 @@ import { IconProps, Text } from '@/components' +import { NavbarSkeleton } from '@components/navbar-skeleton' import { TFunction } from 'i18next' -import NavbarSkeleton from '../navbar-skeleton' import { NavbarItemType } from '../types' interface NavbarItemProps { diff --git a/packages/ui/src/components/navbar/navbar-skeleton/index.tsx b/packages/ui/src/components/navbar/navbar-skeleton/index.tsx deleted file mode 100644 index 85694374d..000000000 --- a/packages/ui/src/components/navbar/navbar-skeleton/index.tsx +++ /dev/null @@ -1,202 +0,0 @@ -import { Icon, Text } from '@/components' -import { cn } from '@utils/cn' -import { isSafari } from '@utils/isSafari' - -import noiseBg from './noise.png' - -interface NavbarRootProps { - className?: string - children: React.ReactNode - isSubMenu?: boolean -} - -function Root({ className, children, isSubMenu = false }: NavbarRootProps) { - return ( -
- {!isSubMenu && ( - <> -
-
-
-
-
- - )} - {children} -
- ) -} - -function Header({ children }: { children: React.ReactNode }) { - return
{children}
-} - -function Content({ children, className }: { children: React.ReactNode; className?: string }) { - return
{children}
-} - -interface GroupProps { - children: React.ReactNode - title?: string - topBorder?: boolean - isSubMenu?: boolean - titleClassName?: string - className?: string -} - -function Group({ children, title, topBorder, isSubMenu = false, titleClassName, className }: GroupProps) { - return ( -
- {title && ( -
-

{title}

-
- )} - {children} -
- ) -} - -interface ItemProps { - icon?: React.ReactElement - text: string - description?: string - active?: boolean - className?: string - submenuItem?: boolean - onClick?: () => void -} - -function Item({ icon, text, description, active, submenuItem, className }: ItemProps) { - if (submenuItem) { - return ( -
-
-
- {icon ? ( -
- - {icon} -
- ) : ( -
- )} -
-
- - {text} - - {!!description && ( - - {description} - - )} -
-
- ) - } - - return ( -
- {icon && ( -
- {active && ( - - )} - {icon} -
- )} - - {text} - -
- ) -} - -function Footer({ children }: { children: React.ReactNode }) { - return ( -
{children}
- ) -} - -const NavbarSkeleton = { Root, Header, Content, Group, Item, Footer } -export default NavbarSkeleton diff --git a/packages/ui/src/components/navbar/navbar.tsx b/packages/ui/src/components/navbar/navbar.tsx index 81ce681d0..0f19e9b31 100644 --- a/packages/ui/src/components/navbar/navbar.tsx +++ b/packages/ui/src/components/navbar/navbar.tsx @@ -1,14 +1,13 @@ import { useMemo } from 'react' import { Link, useLocation, useNavigate } from 'react-router-dom' -import { Button, Icon, IThemeStore, NavbarProjectChooser, ScrollArea, Spacer } from '@/components' +import { Button, Icon, IThemeStore, NavbarProjectChooser, NavbarSkeleton, ScrollArea, Spacer } from '@/components' import { TypesUser } from '@/types' -import { TranslationStore } from '@views/index' +import { TranslationStore } from '@/views' import { isEmpty } from 'lodash-es' import { getAdminMenuItem } from './data' import { NavbarItem } from './navbar-item' -import NavbarSkeleton from './navbar-skeleton' import { NavbarUser } from './navbar-user' import { NavbarItemType } from './types' @@ -62,7 +61,7 @@ export const Navbar = ({ logo={ - + } /> diff --git a/packages/ui/src/components/settings-menu.tsx b/packages/ui/src/components/settings-menu.tsx index 5bc85556d..8324de7e9 100644 --- a/packages/ui/src/components/settings-menu.tsx +++ b/packages/ui/src/components/settings-menu.tsx @@ -1,7 +1,6 @@ import { NavLink } from 'react-router-dom' -import { Icon, ScrollArea, Sheet, SheetContent, SheetTitle, Spacer } from '@/components' -import NavbarSkeleton from '@/components/navbar/navbar-skeleton' +import { Icon, NavbarSkeleton, ScrollArea, Sheet, SheetContent, SheetTitle, Spacer } from '@/components' import { MenuGroupType } from '@components/navbar/types' interface SystemAdminMenuProps { diff --git a/packages/ui/src/components/text.tsx b/packages/ui/src/components/text.tsx index 049fc0533..94e427749 100644 --- a/packages/ui/src/components/text.tsx +++ b/packages/ui/src/components/text.tsx @@ -64,7 +64,7 @@ interface TextProps extends React.ComponentProps<'span'> { * Shorthand for changing the default rendered element * into a semantically appropriate alternative. */ - as?: 'span' | 'div' | 'label' | 'p' + as?: 'span' | 'div' | 'label' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' /** * Change the default rendered element for the one diff --git a/packages/ui/src/views/repo/repo-settings/components/repo-sidebar.tsx b/packages/ui/src/views/repo/repo-settings/components/repo-sidebar.tsx index 42000be48..cff71ee8f 100644 --- a/packages/ui/src/views/repo/repo-settings/components/repo-sidebar.tsx +++ b/packages/ui/src/views/repo/repo-settings/components/repo-sidebar.tsx @@ -1,6 +1,6 @@ import { NavLink } from 'react-router-dom' -import NavbarSkeleton from '@/components/navbar/navbar-skeleton' +import { NavbarSkeleton } from '@components/navbar-skeleton' import { MenuGroupType } from '@components/navbar/types' interface RepoSidebarProps { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6ee25e5b5..bf2f4f260 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -77,12 +77,18 @@ importers: clsx: specifier: ^2.1.1 version: 2.1.1 + monaco-editor: + specifier: 0.50.0 + version: 0.50.0 react: specifier: ^18.3.1 version: 18.3.1 react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) + react-live: + specifier: ^4.1.8 + version: 4.1.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react-router-dom: specifier: ^6.26.0 version: 6.26.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -108,9 +114,6 @@ importers: lint-staged: specifier: ^15.2.9 version: 15.2.9 - monaco-editor: - specifier: 0.50.0 - version: 0.50.0 typescript: specifier: ~5.6.2 version: 5.6.3 @@ -120,6 +123,9 @@ importers: vite: specifier: ^6.0.3 version: 6.0.3(@types/node@22.9.1)(jiti@1.21.6)(sass@1.77.8)(terser@5.31.3)(yaml@2.5.0) + vite-tsconfig-paths: + specifier: ^5.1.4 + version: 5.1.4(typescript@5.6.3)(vite@6.0.3(@types/node@22.9.1)(jiti@1.21.6)(sass@1.77.8)(terser@5.31.3)(yaml@2.5.0)) apps/gitness: dependencies: @@ -451,7 +457,7 @@ importers: version: 3.7.2(@swc/helpers@0.5.2)(vite@6.0.3(@types/node@20.14.9)(jiti@1.21.6)(sass@1.77.8)(terser@5.31.3)(yaml@2.5.0)) autoprefixer: specifier: ^10.4.19 - version: 10.4.19(postcss@8.4.49) + version: 10.4.19(postcss@8.4.44) eslint: specifier: ^8.57.1 version: 8.57.1 @@ -827,7 +833,7 @@ importers: specifier: ^3.4.14 version: 3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.2))(@types/node@22.9.1)(typescript@5.6.3)) typescript: - specifier: ^5.5.3 + specifier: ~5.6.2 version: 5.6.3 vite: specifier: ^6.0.3 @@ -8899,6 +8905,11 @@ packages: resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} + prism-react-renderer@2.4.1: + resolution: {integrity: sha512-ey8Ls/+Di31eqzUxC46h8MksNuGx/n0AAC8uKpwFau4RPDYLuE3EXTp8N8G2vX2N7UC/+IXeNUnlWBGGcAG+Ig==} + peerDependencies: + react: '>=16.0.0' + process-nextick-args@2.0.1: resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==} @@ -8999,6 +9010,13 @@ packages: react: '>=16.8.0' react-dom: '>=16.8.0' + react-live@4.1.8: + resolution: {integrity: sha512-B2SgNqwPuS2ekqj4lcxi5TibEcjWkdVyYykBEUBshPAPDQ527x2zPEZg560n8egNtAjUpwXFQm7pcXV65aAYmg==} + engines: {node: '>= 0.12.0', npm: '>= 2.0.0'} + peerDependencies: + react: '>=18.0.0' + react-dom: '>=18.0.0' + react-markdown@9.0.1: resolution: {integrity: sha512-186Gw/vF1uRkydbsOIkcGXw7aHq0sZOCRFFjGrr7b9+nVZg4UfA4enXCaxm4fUzecU38sWfrNDitGhshuU7rdg==} peerDependencies: @@ -10224,6 +10242,11 @@ packages: '@types/react': optional: true + use-editable@2.3.3: + resolution: {integrity: sha512-7wVD2JbfAFJ3DK0vITvXBdpd9JAz5BcKAAolsnLBuBn6UDDwBGuCIAGvR3yA2BNKm578vAMVHFCWaOcA+BhhiA==} + peerDependencies: + react: '>= 16.8.0' + use-sidecar@1.1.2: resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==} engines: {node: '>=10'} @@ -16272,14 +16295,14 @@ snapshots: asynckit@0.4.0: {} - autoprefixer@10.4.19(postcss@8.4.49): + autoprefixer@10.4.19(postcss@8.4.44): dependencies: browserslist: 4.23.1 caniuse-lite: 1.0.30001638 fraction.js: 4.3.7 normalize-range: 0.1.2 picocolors: 1.0.1 - postcss: 8.4.49 + postcss: 8.4.44 postcss-value-parser: 4.2.0 autoprefixer@10.4.20(postcss@8.4.49): @@ -20818,6 +20841,12 @@ snapshots: ansi-styles: 5.2.0 react-is: 18.2.0 + prism-react-renderer@2.4.1(react@18.3.1): + dependencies: + '@types/prismjs': 1.26.0 + clsx: 2.1.1 + react: 18.3.1 + process-nextick-args@2.0.1: {} promise-map-series@0.3.0: {} @@ -20917,6 +20946,14 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + react-live@4.1.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + prism-react-renderer: 2.4.1(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + sucrase: 3.35.0 + use-editable: 2.3.3(react@18.3.1) + react-markdown@9.0.1(@types/react@18.3.3)(react@18.3.1): dependencies: '@types/hast': 3.0.4 @@ -22550,6 +22587,10 @@ snapshots: optionalDependencies: '@types/react': 18.3.3 + use-editable@2.3.3(react@18.3.1): + dependencies: + react: 18.3.1 + use-sidecar@1.1.2(@types/react@18.3.3)(react@18.3.1): dependencies: detect-node-es: 1.1.0