From 0c5d539952f8168855fd92d746358e1ef0bf052c Mon Sep 17 00:00:00 2001 From: sanskar Date: Thu, 27 Feb 2025 18:04:07 -0800 Subject: [PATCH 1/5] feat: render elements natively in NGUI --- packages/ui/locales/en/views.json | 4 +- packages/ui/locales/es/views.json | 4 +- packages/ui/locales/fr/views.json | 4 +- packages/ui/package.json | 23 +- packages/ui/publish-minimal.js | 106 ++++ .../ui/src/components/commit-copy-actions.tsx | 99 ++-- .../src/components/file-additions-trigger.tsx | 86 ++-- packages/ui/src/components/file-explorer.tsx | 212 ++++---- .../git-commit-dialog/git-commit-dialog.tsx | 5 +- packages/ui/src/components/index.ts | 144 +++--- .../src/components/markdown-viewer/index.tsx | 454 +++++++++--------- .../src/components/more-actions-tooltip.tsx | 174 +++---- packages/ui/src/components/more-submenu.tsx | 94 ++-- .../components/navbar/navbar-item/index.tsx | 174 +++---- .../components/navbar/navbar-user/index.tsx | 336 ++++++------- packages/ui/src/components/navbar/navbar.tsx | 254 +++++----- packages/ui/src/components/no-data.tsx | 198 ++++---- .../ui/src/components/path-breadcrumbs.tsx | 246 +++++----- packages/ui/src/components/settings-menu.tsx | 104 ++-- packages/ui/src/components/styled-link.tsx | 28 +- packages/ui/src/components/tabnav.tsx | 56 +-- packages/ui/src/index.ts | 11 +- packages/ui/src/standalone.ts | 5 + packages/ui/src/utils/utils.ts | 2 +- packages/ui/src/views/index.ts | 78 +-- packages/ui/src/views/secrets/index.ts | 1 + .../secrets/new-secret/new-secret-form.tsx | 9 +- .../src/views/secrets/time-ago-hover-card.tsx | 72 +++ packages/ui/vite-base.config.ts | 22 +- packages/ui/vite-custom.config.ts | 36 ++ 30 files changed, 1630 insertions(+), 1411 deletions(-) create mode 100644 packages/ui/publish-minimal.js create mode 100644 packages/ui/src/standalone.ts create mode 100644 packages/ui/src/views/secrets/time-ago-hover-card.tsx create mode 100644 packages/ui/vite-custom.config.ts diff --git a/packages/ui/locales/en/views.json b/packages/ui/locales/en/views.json index 30bb1dbbe0..92275b21a8 100644 --- a/packages/ui/locales/en/views.json +++ b/packages/ui/locales/en/views.json @@ -1,7 +1,5 @@ { "repos": { - "create-new-file-no-plus": "Create new file", - "upload-files": "Upload files", "search": "Search", "summary": "Summary", "files": "Files", @@ -30,6 +28,7 @@ "findTag": "Find a tag", "allCommits": "All commits", "noFile": "No files available", + "create-new-file-no-plus": "Create new file", "name": "Name", "lastCommit": "Last commit message", "date": "Date", @@ -170,6 +169,7 @@ "creatingWebhook": "Creating webhook...", "updateWebhook": "Update webhook", "createWebhook": "Create webhook", + "upload-files": "Upload files", "tagger": "Tagger", "renameBranch": "Rename Branch", "add": "Add", diff --git a/packages/ui/locales/es/views.json b/packages/ui/locales/es/views.json index 7427f776a2..24ed4e02ed 100644 --- a/packages/ui/locales/es/views.json +++ b/packages/ui/locales/es/views.json @@ -1,7 +1,5 @@ { "repos": { - "create-new-file-no-plus": "Crear nuevo archivo", - "upload-files": "Subir archivos", "search": "Search", "summary": "Summary", "files": "Files", @@ -30,6 +28,7 @@ "findTag": "Find a tag", "allCommits": "All commits", "noFile": "No files available", + "create-new-file-no-plus": "Crear nuevo archivo", "name": "Name", "lastCommit": "Last commit message", "date": "Date", @@ -170,6 +169,7 @@ "creatingWebhook": "Creating webhook...", "updateWebhook": "Update webhook", "createWebhook": "Create webhook", + "upload-files": "Subir archivos", "tagger": "Tagger", "renameBranch": "Rename Branch", "add": "Add", diff --git a/packages/ui/locales/fr/views.json b/packages/ui/locales/fr/views.json index 67cc538994..d2a615bc6f 100644 --- a/packages/ui/locales/fr/views.json +++ b/packages/ui/locales/fr/views.json @@ -1,7 +1,5 @@ { "repos": { - "create-new-file-no-plus": "Créer un nouveau fichier", - "upload-files": "Télécharger des fichiers", "search": "Rechercher", "summary": "Résumé", "files": "Fichiers", @@ -30,6 +28,7 @@ "findTag": "Trouver une étiquette", "allCommits": "Tous les commits", "noFile": "Aucun fichier disponible", + "create-new-file-no-plus": "Créer un nouveau fichier", "name": "Nom", "lastCommit": "Dernier commit", "date": "Date", @@ -170,6 +169,7 @@ "creatingWebhook": "Creating webhook...", "updateWebhook": "Update webhook", "createWebhook": "Create webhook", + "upload-files": "Télécharger des fichiers", "tagger": "Tagger", "renameBranch": "Renommer la branche", "add": "Ajouter", diff --git a/packages/ui/package.json b/packages/ui/package.json index 80e5debd9b..c5d8ab8107 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -5,18 +5,21 @@ "private": false, "type": "module", "main": "./dist/index.js", + "module": "./dist/index.js", + "types": "./dist/index.d.ts", "exports": { - "./components": "./dist/components.js", - "./views": "./dist/views.js", - "./utils": "./dist/utils.js", - "./hooks": "./dist/hooks.js", - "./locales": "./dist/locales.js", - "./tailwind.config": "./dist/tailwind.config.js", + ".": { + "import": "./dist/index.js", + "types": "./dist/index.d.ts" + }, + "./views": { + "import": "./dist/views.js", + "types": "./dist/views.d.ts" + }, "./styles.css": "./dist/styles.css", "./shared-style-variables.css": "./src/shared-style-variables.css", "./markdown-preview-styles.css": "./src/components/markdown-viewer/style.css", - "./context": "./dist/context.js", - "./types": "./dist/types.js" + "./tailwind.config": "./dist/tailwind.config.js" }, "files": [ "dist/**.*", @@ -29,10 +32,13 @@ "build:ci": "vite build --config ./vite-base.config.ts", "build:analyse": "vite build --config ./vite-analyse.config.ts", "build:watch": "vite build --watch --emptyOutDir=false", + "build:custom": "vite build --config ./vite-custom.config.ts", + "build:standalone": "vite build --config ./vite-standalone.config.ts", "lint": "eslint ./src", "pretty": "prettier --check ./src", "shadcn:update": "npx shadcn-ui@latest add -a -o -y", "prepublishOnly": "pnpm build", + "publish:custom": "pnpm build:custom && yalc publish --no-scripts", "pre-commit": "lint-staged", "test": "vitest --run", "test:coverage": "vitest --run --coverage", @@ -41,7 +47,6 @@ "typecheck": "tsc -b", "extract": "i18next --config './i18n.config.ts'" }, - "types": "./dist/index.d.ts", "style": "./dist/styles.css", "sideEffects": false, "repository": { diff --git a/packages/ui/publish-minimal.js b/packages/ui/publish-minimal.js new file mode 100644 index 0000000000..357f130e46 --- /dev/null +++ b/packages/ui/publish-minimal.js @@ -0,0 +1,106 @@ +#!/usr/bin/env node + +const fs = require('fs'); +const path = require('path'); +const { execSync } = require('child_process'); + +// Create a temporary directory for our minimal package +const tempDir = path.join(__dirname, 'temp-publish'); +if (fs.existsSync(tempDir)) { + fs.rmSync(tempDir, { recursive: true, force: true }); +} +fs.mkdirSync(tempDir); +fs.mkdirSync(path.join(tempDir, 'dist')); +fs.mkdirSync(path.join(tempDir, 'src')); + +// Copy only the files we need +console.log('Copying files...'); + +// Copy the built files +const distFiles = [ + 'index.js', + 'views.js', + 'styles.css', + 'time-ago-hover-card-BMBtffzB.js', + 'secrets-header-CKmXo4_V.js', + 'hover-card-B2Uq_eJp.js', + 'stacked-list-9yPp5fQw.js', +]; + +distFiles.forEach(file => { + const sourcePath = path.join(__dirname, 'dist', file); + const destPath = path.join(tempDir, 'dist', file); + + if (fs.existsSync(sourcePath)) { + fs.copyFileSync(sourcePath, destPath); + console.log(`Copied ${sourcePath} to ${destPath}`); + } else { + console.warn(`Warning: ${sourcePath} does not exist`); + } +}); + +// Copy source files for CSS +fs.mkdirSync(path.join(tempDir, 'src', 'components'), { recursive: true }); +fs.mkdirSync(path.join(tempDir, 'src', 'components', 'markdown-viewer'), { recursive: true }); + +const sourceFiles = [ + 'src/shared-style-variables.css', + 'src/components/markdown-viewer/style.css' +]; + +sourceFiles.forEach(file => { + const sourcePath = path.join(__dirname, file); + const destPath = path.join(tempDir, file); + + if (fs.existsSync(sourcePath)) { + // Create directory if it doesn't exist + const destDir = path.dirname(destPath); + if (!fs.existsSync(destDir)) { + fs.mkdirSync(destDir, { recursive: true }); + } + + fs.copyFileSync(sourcePath, destPath); + console.log(`Copied ${sourcePath} to ${destPath}`); + } else { + console.warn(`Warning: ${sourcePath} does not exist`); + } +}); + +// Create a minimal package.json for the temporary directory +const packageJson = JSON.parse(fs.readFileSync(path.join(__dirname, 'package.json'), 'utf8')); +const minimalPackageJson = { + name: packageJson.name, + version: packageJson.version, + type: "module", + main: "./dist/index.js", + module: "./dist/index.js", + exports: { + ".": "./dist/index.js", + "./views": "./dist/views.js", + "./styles.css": "./dist/styles.css", + "./shared-style-variables.css": "./src/shared-style-variables.css", + "./markdown-preview-styles.css": "./src/components/markdown-viewer/style.css" + }, + files: [ + "dist/**/*", + "src/shared-style-variables.css", + "src/components/markdown-viewer/style.css" + ] +}; + +fs.writeFileSync( + path.join(tempDir, 'package.json'), + JSON.stringify(minimalPackageJson, null, 2) +); + +console.log('Created minimal package.json'); + +// Run yalc publish from the temporary directory +console.log('Publishing minimal package with yalc...'); +execSync('yalc publish --no-scripts', { cwd: tempDir, stdio: 'inherit' }); + +// Clean up +console.log('Cleaning up...'); +fs.rmSync(tempDir, { recursive: true, force: true }); + +console.log('Done!'); diff --git a/packages/ui/src/components/commit-copy-actions.tsx b/packages/ui/src/components/commit-copy-actions.tsx index 68249b893a..e19e63c133 100644 --- a/packages/ui/src/components/commit-copy-actions.tsx +++ b/packages/ui/src/components/commit-copy-actions.tsx @@ -1,54 +1,55 @@ -import { useEffect, useState } from 'react' -import { useNavigate } from 'react-router-dom' +// import { useEffect, useState } from 'react' -import { Icon, ShaBadge } from '@/components' -import copy from 'clipboard-copy' +// // import { useNavigate } from 'react-router-dom' -export const CommitCopyActions = ({ - sha, - toCommitDetails -}: { - sha: string - toCommitDetails?: ({ sha }: { sha: string }) => string -}) => { - const [copied, setCopied] = useState(false) - const navigate = useNavigate() +// import { Icon, ShaBadge } from '@/components' +// import copy from 'clipboard-copy' - useEffect(() => { - let timeoutId: number - if (copied) { - copy(sha) - timeoutId = window.setTimeout(() => setCopied(false), 2500) - } - return () => { - clearTimeout(timeoutId) - } - }, [copied, sha]) +// export const CommitCopyActions = ({ +// sha, +// toCommitDetails +// }: { +// sha: string +// toCommitDetails?: ({ sha }: { sha: string }) => string +// }) => { +// const [copied, setCopied] = useState(false) +// const navigate = useNavigate() - const handleNavigation = () => { - navigate(toCommitDetails?.({ sha: sha || '' }) || '') - } +// useEffect(() => { +// let timeoutId: number +// if (copied) { +// copy(sha) +// timeoutId = window.setTimeout(() => setCopied(false), 2500) +// } +// return () => { +// clearTimeout(timeoutId) +// } +// }, [copied, sha]) - return ( - - - - - { - setCopied(true) - }} - > - - - - ) -} +// const handleNavigation = () => { +// navigate(toCommitDetails?.({ sha: sha || '' }) || '') +// } + +// return ( +// +// +// +// +// { +// setCopied(true) +// }} +// > +// +// +// +// ) +// } diff --git a/packages/ui/src/components/file-additions-trigger.tsx b/packages/ui/src/components/file-additions-trigger.tsx index d523fc0123..76e52fd105 100644 --- a/packages/ui/src/components/file-additions-trigger.tsx +++ b/packages/ui/src/components/file-additions-trigger.tsx @@ -1,47 +1,47 @@ -import { FC, useRef } from 'react' -import { Link } from 'react-router-dom' +// import { FC, useRef } from 'react' +// import { Link } from 'react-router-dom' -import { Button, DropdownMenu, Icon } from '@/components' -import { TranslationStore } from '@/views' +// import { Button, DropdownMenu, Icon } from '@/components' +// import { TranslationStore } from '@/views' -export interface FileAdditionsTriggerProps { - useTranslationStore: () => TranslationStore - pathNewFile: string - pathUploadFiles: string -} +// export interface FileAdditionsTriggerProps { +// useTranslationStore: () => TranslationStore +// pathNewFile: string +// pathUploadFiles: string +// } -export const FileAdditionsTrigger: FC = ({ - useTranslationStore, - pathNewFile, - pathUploadFiles -}) => { - const triggerRef = useRef(null) - const { t } = useTranslationStore() +// export const FileAdditionsTrigger: FC = ({ +// useTranslationStore, +// pathNewFile, +// pathUploadFiles +// }) => { +// const triggerRef = useRef(null) +// const { t } = useTranslationStore() - return ( - - - - - - - - - {t('views:repos.create-new-file-no-plus', 'Create new file')} - - - - - - {t('views:repos.upload-files', 'Upload files')} - - - - - ) -} +// return ( +// +// +// +// +// +// +// +// +// {t('views:repos.create-new-file-no-plus', 'Create new file')} +// +// +// +// +// +// {t('views:repos.upload-files', 'Upload files')} +// +// +// +// +// ) +// } diff --git a/packages/ui/src/components/file-explorer.tsx b/packages/ui/src/components/file-explorer.tsx index 05deb1d9d3..f851393594 100644 --- a/packages/ui/src/components/file-explorer.tsx +++ b/packages/ui/src/components/file-explorer.tsx @@ -1,115 +1,115 @@ -import { ReactNode } from 'react' -import { Link } from 'react-router-dom' +// import { ReactNode } from 'react' +// import { Link } from 'react-router-dom' -import { Accordion, Icon, Text } from '@/components' -import { cn } from '@utils/cn' +// import { Accordion, Icon, Text } from '@/components' +// import { cn } from '@utils/cn' -interface FolderItemProps { - children: ReactNode - value?: string - isActive?: boolean - content?: ReactNode - chevronClassName?: string - link: string -} +// interface FolderItemProps { +// children: ReactNode +// value?: string +// isActive?: boolean +// content?: ReactNode +// chevronClassName?: string +// link: string +// } -function FolderItem({ children, value = '', isActive, content, chevronClassName, link }: FolderItemProps) { - return ( - - -
-
- - - - {children} - - -
-
- - {!!content && ( - {content} - )} - - ) -} +// function FolderItem({ children, value = '', isActive, content, chevronClassName, link }: FolderItemProps) { +// return ( +// +// +//
+//
+// +// +// +// {children} +// +// +//
+//
+// +// {!!content && ( +// {content} +// )} +// +// ) +// } -interface FileItemProps { - children: ReactNode - isActive?: boolean - link?: string -} +// interface FileItemProps { +// children: ReactNode +// isActive?: boolean +// link?: string +// } -function FileItem({ children, isActive, link }: FileItemProps) { - const comp = ( -
- - - {children} - -
- ) +// function FileItem({ children, isActive, link }: FileItemProps) { +// const comp = ( +//
+// +// +// {children} +// +//
+// ) - return link ? {comp} : comp -} +// return link ? {comp} : comp +// } -interface RootProps { - children: ReactNode - onValueChange: (value: string | string[]) => void - value: string[] -} +// interface RootProps { +// children: ReactNode +// onValueChange: (value: string | string[]) => void +// value: string[] +// } -function Root({ children, onValueChange, value }: RootProps) { - return ( - - {children} - - ) -} +// function Root({ children, onValueChange, value }: RootProps) { +// return ( +// +// {children} +// +// ) +// } -export { Root, FileItem, FolderItem } +// export { Root, FileItem, FolderItem } diff --git a/packages/ui/src/components/git-commit-dialog/git-commit-dialog.tsx b/packages/ui/src/components/git-commit-dialog/git-commit-dialog.tsx index d44557fd82..939e38ba22 100644 --- a/packages/ui/src/components/git-commit-dialog/git-commit-dialog.tsx +++ b/packages/ui/src/components/git-commit-dialog/git-commit-dialog.tsx @@ -15,7 +15,7 @@ import { Option, RadioButton, RadioGroup, - StyledLink, + // StyledLink, Textarea } from '@/components' import { UsererrorError, ViolationState } from '@/types' @@ -200,7 +200,8 @@ export const GitCommitDialog: FC = ({ ariaSelected={commitToGitRefValue === CommitToGitRefOption.NEW_BRANCH} description={ // TODO: Add correct path - Learn more about pull requests + // Learn more about pull requests + <> } /> diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index 0d529ce4b9..ea946ffa33 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -1,89 +1,89 @@ export * from './alert' export * from './icon' export * from './button' -export * from './more-submenu' -export * from './settings-menu' -export * from './sheet' +// // export * from './more-submenu' +// // export * from './settings-menu' +// export * from './sheet' export * from './drawer' export * from './text' export * from './spacer' -export * from './pagination/pagination' +// export * from './pagination/pagination' export * from './badge/badge' -export * from './scroll-area' -export * from './dropdown-menu' -export * from './manage-navigation' -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' -export * from './no-data' -export * from './tabs' -export * from './tabnav' -export * from './command' -export * from './search-files' -export * from './toast' -export * from './styled-link' -export * from './table' -export * from './commit-copy-actions' +// export * from './scroll-area' +// export * from './dropdown-menu' +// export * from './manage-navigation' +// 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' +// // export * from './no-data' +// export * from './tabs' +// // export * from './tabnav' +// export * from './command' +// export * from './search-files' +// export * from './toast' +// // export * from './styled-link' +// export * from './table' +// // export * from './commit-copy-actions' export * from './accordion/accordion' -export * from './breadcrumb' -export * from './skeletons' -export * from './dialog' -export * from './path-breadcrumbs' -export * from './card' -export * from './input-otp' +// export * from './breadcrumb' +// export * from './skeletons' +// export * from './dialog' +// // export * from './path-breadcrumbs' +// export * from './card' +// export * from './input-otp' export * from './form-primitives' export * from './button-group' export * from './input' export * from './textarea' -export * from './select' -export * from './checkbox' +// export * from './select' +// export * from './checkbox' export * from './radio' export * from './option' -export * from './calendar' -export * from './toggle' -export * from './toggle-group' -export * from './file-control-bars' -export * from './copy-button' -export * from './file-toolbar-actions' -export * from './git-commit-dialog' -export * from './commit-suggestions-dialog/commit-suggestions-dialog' -export * from './layout' -export * from './carousel' -export * from './markdown-viewer' -export * from './image-carousel' -export * from './topbar' -export * from './file-additions-trigger' -export * from './progress' -export * from './dialogs' -export * from './repo-subheader' -export * from './switch' -export * from './meter' -export * from './filters' -export * from './more-actions-tooltip' -export * from './multi-select' -export * from './button-with-options' -export * from './tooltip' -export * from './navigation-menu' -export * from './pipeline-nodes' -export * from './sidebar/sidebar' -export * from './separator' -export * from './label-marker' -export * from './problems' -export * from './chat' -export * from './treeview' +// export * from './calendar' +// export * from './toggle' +// export * from './toggle-group' +// export * from './file-control-bars' +// export * from './copy-button' +// export * from './file-toolbar-actions' +// export * from './git-commit-dialog' +// export * from './commit-suggestions-dialog/commit-suggestions-dialog' +// export * from './layout' +// export * from './carousel' +// // export * from './markdown-viewer' +// export * from './image-carousel' +// export * from './topbar' +// // export * from './file-additions-trigger' +// export * from './progress' +// export * from './dialogs' +// export * from './repo-subheader' +// export * from './switch' +// export * from './meter' +// export * from './filters' +// // export * from './more-actions-tooltip' +// export * from './multi-select' +// export * from './button-with-options' +// export * from './tooltip' +// export * from './navigation-menu' +// export * from './pipeline-nodes' +// export * from './sidebar/sidebar' +// export * from './separator' +// export * from './label-marker' +// export * from './problems' +// export * from './chat' +// export * from './treeview' export * from './hover-card' -export * as NodeGroup from './node-group' -export * as ShaBadge from './sha-badge' -export * as ListActions from './list-actions' -export * as SearchBox from './search-box' -export * as NavbarProjectChooser from './navbar-project-chooser' +// export * as NodeGroup from './node-group' +// export * as ShaBadge from './sha-badge' +// export * as ListActions from './list-actions' +// export * as SearchBox from './search-box' +// export * as NavbarProjectChooser from './navbar-project-chooser' export * as StackedList from './stacked-list' -export * as FileExplorer from './file-explorer' -export * from './theme-selector-v2' -export * from './language-selector' +// // export * as FileExplorer from './file-explorer' +// export * from './theme-selector-v2' +// export * from './language-selector' diff --git a/packages/ui/src/components/markdown-viewer/index.tsx b/packages/ui/src/components/markdown-viewer/index.tsx index f39dac02ce..c67c547367 100644 --- a/packages/ui/src/components/markdown-viewer/index.tsx +++ b/packages/ui/src/components/markdown-viewer/index.tsx @@ -1,227 +1,227 @@ -import { CSSProperties, FC, Fragment, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react' -import { useNavigate } from 'react-router-dom' - -import { CopyButton, ImageCarousel } from '@/components' -import MarkdownPreview from '@uiw/react-markdown-preview' -import rehypeExternalLinks from 'rehype-external-links' -import { getCodeString, RehypeRewriteOptions } from 'rehype-rewrite' -import rehypeSanitize from 'rehype-sanitize' -import rehypeVideo from 'rehype-video' - -import './style.css' - -import { cn } from '@utils/cn' - -import { CodeSuggestionBlock, SuggestionBlock } from './CodeSuggestionBlock' - -// TODO: add ai stuff at a later point for code suggestions -// import type { SuggestionBlock } from 'components/SuggestionBlock/SuggestionBlock' -// import { CodeSuggestionBlock } from './CodeSuggestionBlock' - -const isHeadingElement = (tagName: string) => /^h(1|2|3|4|5|6)/.test(tagName) -const isRelativeLink = (href: string) => - href && !href.startsWith('/') && !href.startsWith('#') && !/^https?:|mailto:|tel:|data:|javascript:|sms:/.test(href) - -interface MarkdownViewerWrapperProps { - children: ReactNode -} - -const MarkdownViewerWrapper: FC = ({ children }) => { - return
{children}
-} - -interface MarkdownViewerProps { - source: string - maxHeight?: string | number - withBorderWrapper?: boolean - // TODO: add ai stuff at a later point for code suggestions - suggestionBlock?: SuggestionBlock - suggestionCheckSum?: string - isSuggestion?: boolean - markdownClassName?: string -} - -export function MarkdownViewer({ - source, - maxHeight, - withBorderWrapper = false, - suggestionBlock, - suggestionCheckSum, - isSuggestion, - markdownClassName -}: MarkdownViewerProps) { - const navigate = useNavigate() - const [isOpen, setIsOpen] = useState(false) - const [imgEvent, setImageEvent] = useState([]) - const refRootHref = useMemo(() => document.getElementById('repository-ref-root')?.getAttribute('href'), []) - const ref = useRef(null) - const [initialSlide, setInitialSlide] = useState(0) - - const styles: CSSProperties = maxHeight ? { maxHeight } : {} - const Wrapper = withBorderWrapper ? MarkdownViewerWrapper : Fragment - - const rewriteRelativeLinks = useCallback( - (href: string) => { - try { - if (href.startsWith('./')) { - href = href.replace('./', '') - } - - const fullUrl = new URL(window.location.href + '/' + href) - if (fullUrl.origin === window.location.origin) { - const currentPath = window.location.href.split('~/')[1] ?? '' - const replaceReadmeText = currentPath.replace('README.md', '') - const newUrl = '/~/' + (currentPath && !currentPath.includes(href) ? replaceReadmeText + '/' : '') + href - - return (refRootHref + newUrl.replace(/\/\//g, '/')).replace(/^\/ng\//, '/') - } - - return href - } catch (error) { - console.warn('Error rewriting relative link:', error) - return href - } - }, - [refRootHref] - ) - - /** - * Rewrite links nodes - */ - const rehypeRewrite: RehypeRewriteOptions['rewrite'] = useCallback( - (node, _index, parent) => { - if (node.type === 'element' && node?.tagName === 'a') { - // Remove links from titles - if (parent && parent.type === 'element' && isHeadingElement(parent.tagName)) { - parent.children = parent.children.slice(1) - } - - // TODO: I'm not sure under what circumstances the condition for having an ID repository-ref-root would be met; I don't know why this code was written. - if (refRootHref) { - // Rewriting relative links - const { properties } = node as unknown as { properties: { href: string } } - if (properties?.href && isRelativeLink(properties.href)) { - properties.href = rewriteRelativeLinks(properties.href) - } - } - } - }, - [refRootHref, rewriteRelativeLinks] - ) - - const interceptClickEventOnViewerContainer = useCallback( - (event: MouseEvent) => { - const { target } = event - - const imgTags = ref.current?.querySelectorAll('.wmde-markdown img') || [] - - if (target instanceof HTMLImageElement && !!imgTags.length) { - const imgsArr: string[] = Array.from(imgTags).map(img => img.src) - const dataSrc = target.getAttribute('src') - const index = imgsArr.findIndex(val => val === dataSrc) - - setImageEvent(imgsArr) - setInitialSlide(index > -1 ? index : 0) - setIsOpen(true) - } - - if (target instanceof HTMLAnchorElement) { - const href = target.getAttribute('href') - if (href && !/^https?:\/\//.test(href)) { - event.preventDefault() - if (href.startsWith('#')) { - document.getElementById(href.slice(1))?.scrollIntoView() - } else { - const newUrl = new URL(target.href) - navigate(newUrl.pathname) - } - } - } - }, - [navigate] - ) - - useEffect(() => { - const container = ref.current - - if (container) { - container.addEventListener('click', interceptClickEventOnViewerContainer) - - return () => { - container.removeEventListener('click', interceptClickEventOnViewerContainer) - } - } - }, [interceptClickEventOnViewerContainer]) - - return ( - -
- {isSuggestion && ( -
- - {suggestionBlock?.appliedCheckSum && suggestionBlock?.appliedCheckSum === suggestionCheckSum - ? 'Suggestion applied' - : 'Suggested change'} - -
- )} - - div>pre]:rounded-t-none': isSuggestion - }, - markdownClassName - )} - rehypeRewrite={rehypeRewrite} - rehypePlugins={[ - rehypeSanitize, - [rehypeVideo, { test: /\.(mp4|mov|webm|mkv|flv)$/ }], - [rehypeExternalLinks, { rel: ['nofollow noreferrer noopener'], target: '_blank' }] - ]} - components={{ - pre: ({ children, node }) => { - const code = node && node.children ? getCodeString(node.children) : (children as string) - - return ( -
- - 
{children}
-
- ) - }, - // Rewriting the code component to support code suggestions - code: ({ children = [], className: _className, ...props }) => { - const code = props.node && props.node.children ? getCodeString(props.node.children) : children - - if ( - typeof code === 'string' && - isSuggestion && - typeof _className === 'string' && - 'language-suggestion' === _className.split(' ')[0].toLocaleLowerCase() - ) { - return - } - - return {children} - } - }} - /> - - -
- - ) -} +// import { CSSProperties, FC, Fragment, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react' +// import { useNavigate } from 'react-router-dom' + +// import { CopyButton, ImageCarousel } from '@/components' +// import MarkdownPreview from '@uiw/react-markdown-preview' +// import rehypeExternalLinks from 'rehype-external-links' +// import { getCodeString, RehypeRewriteOptions } from 'rehype-rewrite' +// import rehypeSanitize from 'rehype-sanitize' +// import rehypeVideo from 'rehype-video' + +// import './style.css' + +// import { cn } from '@utils/cn' + +// import { CodeSuggestionBlock, SuggestionBlock } from './CodeSuggestionBlock' + +// // TODO: add ai stuff at a later point for code suggestions +// // import type { SuggestionBlock } from 'components/SuggestionBlock/SuggestionBlock' +// // import { CodeSuggestionBlock } from './CodeSuggestionBlock' + +// const isHeadingElement = (tagName: string) => /^h(1|2|3|4|5|6)/.test(tagName) +// const isRelativeLink = (href: string) => +// href && !href.startsWith('/') && !href.startsWith('#') && !/^https?:|mailto:|tel:|data:|javascript:|sms:/.test(href) + +// interface MarkdownViewerWrapperProps { +// children: ReactNode +// } + +// const MarkdownViewerWrapper: FC = ({ children }) => { +// return
{children}
+// } + +// interface MarkdownViewerProps { +// source: string +// maxHeight?: string | number +// withBorderWrapper?: boolean +// // TODO: add ai stuff at a later point for code suggestions +// suggestionBlock?: SuggestionBlock +// suggestionCheckSum?: string +// isSuggestion?: boolean +// markdownClassName?: string +// } + +// export function MarkdownViewer({ +// source, +// maxHeight, +// withBorderWrapper = false, +// suggestionBlock, +// suggestionCheckSum, +// isSuggestion, +// markdownClassName +// }: MarkdownViewerProps) { +// const navigate = useNavigate() +// const [isOpen, setIsOpen] = useState(false) +// const [imgEvent, setImageEvent] = useState([]) +// const refRootHref = useMemo(() => document.getElementById('repository-ref-root')?.getAttribute('href'), []) +// const ref = useRef(null) +// const [initialSlide, setInitialSlide] = useState(0) + +// const styles: CSSProperties = maxHeight ? { maxHeight } : {} +// const Wrapper = withBorderWrapper ? MarkdownViewerWrapper : Fragment + +// const rewriteRelativeLinks = useCallback( +// (href: string) => { +// try { +// if (href.startsWith('./')) { +// href = href.replace('./', '') +// } + +// const fullUrl = new URL(window.location.href + '/' + href) +// if (fullUrl.origin === window.location.origin) { +// const currentPath = window.location.href.split('~/')[1] ?? '' +// const replaceReadmeText = currentPath.replace('README.md', '') +// const newUrl = '/~/' + (currentPath && !currentPath.includes(href) ? replaceReadmeText + '/' : '') + href + +// return (refRootHref + newUrl.replace(/\/\//g, '/')).replace(/^\/ng\//, '/') +// } + +// return href +// } catch (error) { +// console.warn('Error rewriting relative link:', error) +// return href +// } +// }, +// [refRootHref] +// ) + +// /** +// * Rewrite links nodes +// */ +// const rehypeRewrite: RehypeRewriteOptions['rewrite'] = useCallback( +// (node, _index, parent) => { +// if (node.type === 'element' && node?.tagName === 'a') { +// // Remove links from titles +// if (parent && parent.type === 'element' && isHeadingElement(parent.tagName)) { +// parent.children = parent.children.slice(1) +// } + +// // TODO: I'm not sure under what circumstances the condition for having an ID repository-ref-root would be met; I don't know why this code was written. +// if (refRootHref) { +// // Rewriting relative links +// const { properties } = node as unknown as { properties: { href: string } } +// if (properties?.href && isRelativeLink(properties.href)) { +// properties.href = rewriteRelativeLinks(properties.href) +// } +// } +// } +// }, +// [refRootHref, rewriteRelativeLinks] +// ) + +// const interceptClickEventOnViewerContainer = useCallback( +// (event: MouseEvent) => { +// const { target } = event + +// const imgTags = ref.current?.querySelectorAll('.wmde-markdown img') || [] + +// if (target instanceof HTMLImageElement && !!imgTags.length) { +// const imgsArr: string[] = Array.from(imgTags).map(img => img.src) +// const dataSrc = target.getAttribute('src') +// const index = imgsArr.findIndex(val => val === dataSrc) + +// setImageEvent(imgsArr) +// setInitialSlide(index > -1 ? index : 0) +// setIsOpen(true) +// } + +// if (target instanceof HTMLAnchorElement) { +// const href = target.getAttribute('href') +// if (href && !/^https?:\/\//.test(href)) { +// event.preventDefault() +// if (href.startsWith('#')) { +// document.getElementById(href.slice(1))?.scrollIntoView() +// } else { +// const newUrl = new URL(target.href) +// navigate(newUrl.pathname) +// } +// } +// } +// }, +// [navigate] +// ) + +// useEffect(() => { +// const container = ref.current + +// if (container) { +// container.addEventListener('click', interceptClickEventOnViewerContainer) + +// return () => { +// container.removeEventListener('click', interceptClickEventOnViewerContainer) +// } +// } +// }, [interceptClickEventOnViewerContainer]) + +// return ( +// +//
+// {isSuggestion && ( +//
+// +// {suggestionBlock?.appliedCheckSum && suggestionBlock?.appliedCheckSum === suggestionCheckSum +// ? 'Suggestion applied' +// : 'Suggested change'} +// +//
+// )} + +// div>pre]:rounded-t-none': isSuggestion +// }, +// markdownClassName +// )} +// rehypeRewrite={rehypeRewrite} +// rehypePlugins={[ +// rehypeSanitize, +// [rehypeVideo, { test: /\.(mp4|mov|webm|mkv|flv)$/ }], +// [rehypeExternalLinks, { rel: ['nofollow noreferrer noopener'], target: '_blank' }] +// ]} +// components={{ +// pre: ({ children, node }) => { +// const code = node && node.children ? getCodeString(node.children) : (children as string) + +// return ( +//
+// +// 
{children}
+//
+// ) +// }, +// // Rewriting the code component to support code suggestions +// code: ({ children = [], className: _className, ...props }) => { +// const code = props.node && props.node.children ? getCodeString(props.node.children) : children + +// if ( +// typeof code === 'string' && +// isSuggestion && +// typeof _className === 'string' && +// 'language-suggestion' === _className.split(' ')[0].toLocaleLowerCase() +// ) { +// return +// } + +// return {children} +// } +// }} +// /> + +// +//
+// +// ) +// } diff --git a/packages/ui/src/components/more-actions-tooltip.tsx b/packages/ui/src/components/more-actions-tooltip.tsx index 2d42daed3f..d2b63b7cf2 100644 --- a/packages/ui/src/components/more-actions-tooltip.tsx +++ b/packages/ui/src/components/more-actions-tooltip.tsx @@ -1,92 +1,92 @@ -import { FC } from 'react' -import { Link } from 'react-router-dom' +// import { FC } from 'react' +// import { Link } from 'react-router-dom' -import { Button } from '@components/button' -import { DropdownMenu } from '@components/dropdown-menu' -import { Icon, IconProps } from '@components/icon' -import { cn } from '@utils/cn' +// import { Button } from '@components/button' +// import { DropdownMenu } from '@components/dropdown-menu' +// import { Icon, IconProps } from '@components/icon' +// import { cn } from '@utils/cn' -export interface ActionData { - to?: string - title: string - onClick?: () => void - isDanger?: boolean -} +// export interface ActionData { +// to?: string +// title: string +// onClick?: () => void +// isDanger?: boolean +// } -export interface MoreActionsTooltipProps { - actions: ActionData[] - isInTable?: boolean - iconName?: IconProps['name'] - sideOffset?: number - alignOffset?: number - className?: string -} +// export interface MoreActionsTooltipProps { +// actions: ActionData[] +// isInTable?: boolean +// iconName?: IconProps['name'] +// sideOffset?: number +// alignOffset?: number +// className?: string +// } -/** - * A component for displaying a button that, when clicked, shows a tooltip with a list of actions. - */ -export const MoreActionsTooltip: FC = ({ - actions, - isInTable = false, - iconName = 'vertical-ellipsis', - sideOffset = -6, - alignOffset = 10, - className -}) => { - if (!actions.length) return <> +// /** +// * A component for displaying a button that, when clicked, shows a tooltip with a list of actions. +// */ +// export const MoreActionsTooltip: FC = ({ +// actions, +// isInTable = false, +// iconName = 'vertical-ellipsis', +// sideOffset = -6, +// alignOffset = 10, +// className +// }) => { +// if (!actions.length) return <> - return ( - - - - - event.preventDefault()} // Prevent focus on hidden content - > - - {actions.map((action, idx) => - action.to ? ( - { - e.stopPropagation() - }} - > - - - {action.title} - - - - ) : ( - { - e.stopPropagation() - action?.onClick?.() - }} - > - - {action.title} - - - ) - )} - - - - ) -} +// return ( +// +// +// +// +// event.preventDefault()} // Prevent focus on hidden content +// > +// +// {actions.map((action, idx) => +// action.to ? ( +// { +// e.stopPropagation() +// }} +// > +// +// +// {action.title} +// +// +// +// ) : ( +// { +// e.stopPropagation() +// action?.onClick?.() +// }} +// > +// +// {action.title} +// +// +// ) +// )} +// +// +// +// ) +// } diff --git a/packages/ui/src/components/more-submenu.tsx b/packages/ui/src/components/more-submenu.tsx index c32efe0134..2f7a55af9a 100644 --- a/packages/ui/src/components/more-submenu.tsx +++ b/packages/ui/src/components/more-submenu.tsx @@ -1,50 +1,50 @@ -import { NavLink } from 'react-router-dom' +// import { NavLink } from 'react-router-dom' -import { Icon, NavbarSkeleton, ScrollArea, Sheet, Spacer } from '@/components' -import { MenuGroupType } from '@components/navbar/types' +// import { Icon, NavbarSkeleton, ScrollArea, Sheet, Spacer } from '@/components' +// import { MenuGroupType } from '@components/navbar/types' -interface MoreSubmenuProps { - showMoreMenu: boolean - handleMoreMenu: () => void - items: MenuGroupType[] -} +// interface MoreSubmenuProps { +// showMoreMenu: boolean +// handleMoreMenu: () => void +// items: MenuGroupType[] +// } -export function MoreSubmenu({ showMoreMenu, handleMoreMenu, items }: MoreSubmenuProps) { - return ( - - - More Menu - - - - - {items.map((group, group_idx) => ( - 0} title={group.title} isSubMenu> - {group.items.map(item => ( - - {({ isActive }) => ( - } - active={isActive} - /> - )} - - ))} - - ))} - - - - - - - ) -} +// export function MoreSubmenu({ showMoreMenu, handleMoreMenu, items }: MoreSubmenuProps) { +// return ( +// +// +// More Menu +// +// +// +// +// {items.map((group, group_idx) => ( +// 0} title={group.title} isSubMenu> +// {group.items.map(item => ( +// +// {({ isActive }) => ( +// } +// active={isActive} +// /> +// )} +// +// ))} +// +// ))} +// +// +// +// +// +// +// ) +// } diff --git a/packages/ui/src/components/navbar/navbar-item/index.tsx b/packages/ui/src/components/navbar/navbar-item/index.tsx index 377521ce28..459a8fcb39 100644 --- a/packages/ui/src/components/navbar/navbar-item/index.tsx +++ b/packages/ui/src/components/navbar/navbar-item/index.tsx @@ -1,96 +1,96 @@ -import { NavLink } from 'react-router-dom' +// import { NavLink } from 'react-router-dom' -import { Button, DropdownMenu, Icon, IconProps, Text } from '@/components' -import { NavbarSkeleton } from '@components/navbar-skeleton' -import { TFunction } from 'i18next' +// import { Button, DropdownMenu, Icon, IconProps, Text } from '@/components' +// import { NavbarSkeleton } from '@components/navbar-skeleton' +// import { TFunction } from 'i18next' -import { NavbarItemType } from '../types' +// import { NavbarItemType } from '../types' -interface NavbarItemProps { - item: NavbarItemType - isRecent?: boolean - handleChangePinnedMenuItem: (item: NavbarItemType, pin: boolean) => void - handleRemoveRecentMenuItem: (item: NavbarItemType) => void - handleCustomNav: () => void - t: TFunction -} +// interface NavbarItemProps { +// item: NavbarItemType +// isRecent?: boolean +// handleChangePinnedMenuItem: (item: NavbarItemType, pin: boolean) => void +// handleRemoveRecentMenuItem: (item: NavbarItemType) => void +// handleCustomNav: () => void +// t: TFunction +// } -export const NavbarItem = ({ - item, - isRecent = false, - handleChangePinnedMenuItem, - handleRemoveRecentMenuItem, - handleCustomNav, - t -}: NavbarItemProps) => { - const iconName = item.iconName && (item.iconName.replace('-gradient', '') as IconProps['name']) +// export const NavbarItem = ({ +// item, +// isRecent = false, +// handleChangePinnedMenuItem, +// handleRemoveRecentMenuItem, +// handleCustomNav, +// t +// }: NavbarItemProps) => { +// const iconName = item.iconName && (item.iconName.replace('-gradient', '') as IconProps['name']) - const handlePin = () => { - handleChangePinnedMenuItem(item, isRecent) - } +// const handlePin = () => { +// handleChangePinnedMenuItem(item, isRecent) +// } - const handleRemoveRecent = () => { - handleRemoveRecentMenuItem(item) - } +// const handleRemoveRecent = () => { +// handleRemoveRecentMenuItem(item) +// } - const dropdownItems = isRecent ? ( - <> - - - {t('component:navbar.pin')} - - - - - {t('component:navbar.remove')} - - - - ) : ( - <> - - - {t('component:navbar.reorder')} - - +// const dropdownItems = isRecent ? ( +// <> +// +// +// {t('component:navbar.pin')} +// +// +// +// +// {t('component:navbar.remove')} +// +// +// +// ) : ( +// <> +// +// +// {t('component:navbar.reorder')} +// +// - {!item.permanentlyPinned ? ( - - - {t('component:navbar.unpin')} - - - ) : null} - - ) +// {!item.permanentlyPinned ? ( +// +// +// {t('component:navbar.unpin')} +// +// +// ) : null} +// +// ) - return ( -
- - {({ isActive }) => ( - } - active={isActive} - /> - )} - - {!item.permanentlyPinned && ( - - - - - - {dropdownItems} - - - )} -
- ) -} +// return ( +//
+// +// {({ isActive }) => ( +// } +// active={isActive} +// /> +// )} +// +// {!item.permanentlyPinned && ( +// +// +// +// +// +// {dropdownItems} +// +// +// )} +//
+// ) +// } diff --git a/packages/ui/src/components/navbar/navbar-user/index.tsx b/packages/ui/src/components/navbar/navbar-user/index.tsx index b12d11c308..0bff2add59 100644 --- a/packages/ui/src/components/navbar/navbar-user/index.tsx +++ b/packages/ui/src/components/navbar/navbar-user/index.tsx @@ -1,176 +1,176 @@ -import { useMemo } from 'react' -import { Link } from 'react-router-dom' +// import { useMemo } from 'react' +// import { Link } from 'react-router-dom' -import { - Avatar, - ColorType, - ContrastType, - DropdownMenu, - FullTheme, - getModeColorContrastFromFullTheme, - Icon, - IThemeStore, - ModeType, - Text -} from '@/components' -import { TypesUser } from '@/types' -import { cn } from '@utils/cn' -import { getInitials } from '@utils/stringUtils' -import { TranslationStore } from '@views/repo' +// import { +// Avatar, +// ColorType, +// ContrastType, +// DropdownMenu, +// FullTheme, +// getModeColorContrastFromFullTheme, +// Icon, +// IThemeStore, +// ModeType, +// Text +// } from '@/components' +// import { TypesUser } from '@/types' +// import { cn } from '@utils/cn' +// import { getInitials } from '@utils/stringUtils' +// import { TranslationStore } from '@views/repo' -interface UserBlockProps { - username: string - email?: string - url?: string - isButton?: boolean - className?: string -} +// interface UserBlockProps { +// username: string +// email?: string +// url?: string +// isButton?: boolean +// className?: string +// } -const UserBlock = ({ username, email, url, isButton = false, className }: UserBlockProps) => { - const Tag = isButton ? 'button' : 'div' +// const UserBlock = ({ username, email, url, isButton = false, className }: UserBlockProps) => { +// const Tag = isButton ? 'button' : 'div' - return ( - - {isButton && ( -
- )} -
- - {!!url && } - {getInitials(username)} - -
-

{username}

- {!!email && ( -

{email}

- )} - - ) -} +// return ( +// +// {isButton && ( +//
+// )} +//
+// +// {!!url && } +// {getInitials(username)} +// +//
+//

{username}

+// {!!email && ( +//

{email}

+// )} +// +// ) +// } -interface NavbarUserProps { - currentUser: TypesUser | undefined - handleCustomNav: () => void - handleLogOut: () => void - useThemeStore: () => IThemeStore - useTranslationStore: () => TranslationStore -} +// interface NavbarUserProps { +// currentUser: TypesUser | undefined +// handleCustomNav: () => void +// handleLogOut: () => void +// useThemeStore: () => IThemeStore +// useTranslationStore: () => TranslationStore +// } -export const NavbarUser = ({ - currentUser, - handleCustomNav, - handleLogOut, - useThemeStore, - useTranslationStore -}: NavbarUserProps) => { - const username = currentUser?.display_name || currentUser?.uid || '' - const { theme, setTheme } = useThemeStore() - const { t, i18n, changeLanguage } = useTranslationStore() - const { mode, color, contrast } = useMemo(() => getModeColorContrastFromFullTheme(theme), [theme]) +// export const NavbarUser = ({ +// currentUser, +// handleCustomNav, +// handleLogOut, +// useThemeStore, +// useTranslationStore +// }: NavbarUserProps) => { +// const username = currentUser?.display_name || currentUser?.uid || '' +// const { theme, setTheme } = useThemeStore() +// const { t, i18n, changeLanguage } = useTranslationStore() +// const { mode, color, contrast } = useMemo(() => getModeColorContrastFromFullTheme(theme), [theme]) - return ( - - -
- -
- - - - - - - - {t('component:navbar.profile', 'Profile')} - - - - - - {t('component:navbar.theme', 'Theme')} - - - - Color Scheme - - { - setTheme(`${value}-${color}-${contrast}` as FullTheme) - }} - > - System - Light - Dark - - Color Correction - - { - setTheme(`${mode}-${value}-${contrast}` as FullTheme) - }} - > - None - Red-Green - Blue-Yellow - - Contrast - - { - setTheme(`${mode}-${color}-${value}` as FullTheme) - }} - > - Standard - Low - High - - - - - - - - Language - - - - { - changeLanguage(value) - }} - > - English - French - System - - - - - - - {t('component:navbar.customNav', 'Customize navigation')} - +// return ( +// +// +//
+// +//
+// +// +// +// +// +// +// +// {t('component:navbar.profile', 'Profile')} +// +// +// +// +// +// {t('component:navbar.theme', 'Theme')} +// +// +// +// Color Scheme +// +// { +// setTheme(`${value}-${color}-${contrast}` as FullTheme) +// }} +// > +// System +// Light +// Dark +// +// Color Correction +// +// { +// setTheme(`${mode}-${value}-${contrast}` as FullTheme) +// }} +// > +// None +// Red-Green +// Blue-Yellow +// +// Contrast +// +// { +// setTheme(`${mode}-${color}-${value}` as FullTheme) +// }} +// > +// Standard +// Low +// High +// +// +// +// +// +// +// +// Language +// +// +// +// { +// changeLanguage(value) +// }} +// > +// English +// French +// System +// +// +// +// +// +// +// {t('component:navbar.customNav', 'Customize navigation')} +// - - - - {t('component:navbar.logout', 'Log out')} - - - - ) -} +// +// +// +// {t('component:navbar.logout', 'Log out')} +// +// +// +// ) +// } diff --git a/packages/ui/src/components/navbar/navbar.tsx b/packages/ui/src/components/navbar/navbar.tsx index 60faecc5fe..658de44480 100644 --- a/packages/ui/src/components/navbar/navbar.tsx +++ b/packages/ui/src/components/navbar/navbar.tsx @@ -1,141 +1,141 @@ -import { useMemo } from 'react' -import { Link, useLocation, useNavigate } from 'react-router-dom' +// import { useMemo } from 'react' +// import { Link, useLocation, useNavigate } from 'react-router-dom' -import { Button, Icon, IThemeStore, NavbarProjectChooser, NavbarSkeleton, ScrollArea, Spacer } from '@/components' -import { TypesUser } from '@/types' -import { TranslationStore } from '@/views' -import { isEmpty } from 'lodash-es' +// import { Button, Icon, IThemeStore, NavbarProjectChooser, NavbarSkeleton, ScrollArea, Spacer } from '@/components' +// import { TypesUser } from '@/types' +// import { TranslationStore } from '@/views' +// import { isEmpty } from 'lodash-es' -import { getAdminMenuItem } from './data' -import { NavbarItem } from './navbar-item' -import { NavbarUser } from './navbar-user' -import { NavbarItemType } from './types' +// import { getAdminMenuItem } from './data' +// import { NavbarItem } from './navbar-item' +// import { NavbarUser } from './navbar-user' +// import { NavbarItemType } from './types' -const hideNavbarPaths = ['/signin', '/signup'] +// const hideNavbarPaths = ['/signin', '/signup'] -interface NavbarProps { - recentMenuItems: NavbarItemType[] - pinnedMenuItems: NavbarItemType[] - showMoreMenu: boolean - showSettingMenu: boolean - handleMoreMenu: () => void - handleSettingsMenu: () => void - currentUser: TypesUser | undefined - handleCustomNav: () => void - handleLogOut: () => void - handleChangePinnedMenuItem: (item: NavbarItemType, pin: boolean) => void - handleRemoveRecentMenuItem: (item: NavbarItemType) => void - useThemeStore: () => IThemeStore - useTranslationStore: () => TranslationStore -} +// interface NavbarProps { +// recentMenuItems: NavbarItemType[] +// pinnedMenuItems: NavbarItemType[] +// showMoreMenu: boolean +// showSettingMenu: boolean +// handleMoreMenu: () => void +// handleSettingsMenu: () => void +// currentUser: TypesUser | undefined +// handleCustomNav: () => void +// handleLogOut: () => void +// handleChangePinnedMenuItem: (item: NavbarItemType, pin: boolean) => void +// handleRemoveRecentMenuItem: (item: NavbarItemType) => void +// useThemeStore: () => IThemeStore +// useTranslationStore: () => TranslationStore +// } -export const Navbar = ({ - recentMenuItems, - pinnedMenuItems, - showMoreMenu, - showSettingMenu, - handleMoreMenu, - handleSettingsMenu, - currentUser, - handleCustomNav, - handleLogOut, - handleChangePinnedMenuItem, - handleRemoveRecentMenuItem, - useThemeStore, - useTranslationStore -}: NavbarProps) => { - const location = useLocation() - const navigate = useNavigate() - const { t } = useTranslationStore() - const adminMenuItem = getAdminMenuItem(t) +// export const Navbar = ({ +// recentMenuItems, +// pinnedMenuItems, +// showMoreMenu, +// showSettingMenu, +// handleMoreMenu, +// handleSettingsMenu, +// currentUser, +// handleCustomNav, +// handleLogOut, +// handleChangePinnedMenuItem, +// handleRemoveRecentMenuItem, +// useThemeStore, +// useTranslationStore +// }: NavbarProps) => { +// const location = useLocation() +// const navigate = useNavigate() +// const { t } = useTranslationStore() +// const adminMenuItem = getAdminMenuItem(t) - const showNavbar = useMemo(() => { - return !hideNavbarPaths.includes(location.pathname) - }, [location.pathname]) +// const showNavbar = useMemo(() => { +// return !hideNavbarPaths.includes(location.pathname) +// }, [location.pathname]) - if (!showNavbar) return null +// if (!showNavbar) return null - return ( - - - - - - - } - /> - +// return ( +// +// +// +// +// +// +// } +// /> +// - - - - - {pinnedMenuItems.map(item => ( - - ))} - - +// +// +// +// +// {pinnedMenuItems.map(item => ( +// +// ))} +// +// - {!!recentMenuItems.length && ( - - {recentMenuItems.map(item => ( - - ))} - - )} +// {!!recentMenuItems.length && ( +// +// {recentMenuItems.map(item => ( +// +// ))} +// +// )} - - {!!currentUser?.admin && ( - - } /> - - )} +// +// {!!currentUser?.admin && ( +// +// } /> +// +// )} - - - +// +// +// - {/**/} - +// {/**/} +// - - {!isEmpty(currentUser) ? ( - - ) : ( - - )} - - - ) -} +// +// {!isEmpty(currentUser) ? ( +// +// ) : ( +// +// )} +// +// +// ) +// } diff --git a/packages/ui/src/components/no-data.tsx b/packages/ui/src/components/no-data.tsx index de235f2ad7..cfc299fcd8 100644 --- a/packages/ui/src/components/no-data.tsx +++ b/packages/ui/src/components/no-data.tsx @@ -1,103 +1,103 @@ -import { Dispatch, FC, SetStateAction } from 'react' -import { NavLink } from 'react-router-dom' +// import { Dispatch, FC, SetStateAction } from 'react' +// import { NavLink } from 'react-router-dom' -import { cn } from '@utils/cn' +// import { cn } from '@utils/cn' -import { Button } from './button' -import { Icon, IconProps } from './icon' -import { Text } from './text' +// import { Button } from './button' +// import { Icon, IconProps } from './icon' +// import { Text } from './text' -export interface NoDataProps { - title: string - iconName?: - | Pick - | 'no-data-folder' - | 'no-search-magnifying-glass' - | 'no-data-merge' - | 'no-data-cog' - | 'no-data-webhooks' - | 'no-data-branches' - | 'no-data-members' - | 'no-repository' - | 'no-data-error' - | 'no-data-commits' - | 'no-data-pr' - | 'no-data-tags' - iconSize?: number - description: string[] - primaryButton?: { - label: string - onClick?: () => void - to?: string - } - secondaryButton?: { - label: string - to?: string - onClick?: () => void - } - withBorder?: boolean - loadState?: string - setLoadState?: Dispatch> - textWrapperClassName?: string - className?: string -} +// export interface NoDataProps { +// title: string +// iconName?: +// | Pick +// | 'no-data-folder' +// | 'no-search-magnifying-glass' +// | 'no-data-merge' +// | 'no-data-cog' +// | 'no-data-webhooks' +// | 'no-data-branches' +// | 'no-data-members' +// | 'no-repository' +// | 'no-data-error' +// | 'no-data-commits' +// | 'no-data-pr' +// | 'no-data-tags' +// iconSize?: number +// description: string[] +// primaryButton?: { +// label: string +// onClick?: () => void +// to?: string +// } +// secondaryButton?: { +// label: string +// to?: string +// onClick?: () => void +// } +// withBorder?: boolean +// loadState?: string +// setLoadState?: Dispatch> +// textWrapperClassName?: string +// className?: string +// } -export const NoData: FC = ({ - iconName, - iconSize = 112, - title, - description, - primaryButton, - secondaryButton, - withBorder = false, - textWrapperClassName, - className -}) => { - return ( -
- {iconName && } -
- - {title} - - {description && ( -
- {description.map((line, index) => ( - - {line} - - ))} -
- )} - {(primaryButton || secondaryButton) && ( -
- {primaryButton && - (primaryButton.to ? ( - - ) : ( - - ))} - {secondaryButton && - (secondaryButton.to ? ( - - ) : ( - - ))} -
- )} -
-
- ) -} +// export const NoData: FC = ({ +// iconName, +// iconSize = 112, +// title, +// description, +// primaryButton, +// secondaryButton, +// withBorder = false, +// textWrapperClassName, +// className +// }) => { +// return ( +//
+// {iconName && } +//
+// +// {title} +// +// {description && ( +//
+// {description.map((line, index) => ( +// +// {line} +// +// ))} +//
+// )} +// {(primaryButton || secondaryButton) && ( +//
+// {primaryButton && +// (primaryButton.to ? ( +// +// ) : ( +// +// ))} +// {secondaryButton && +// (secondaryButton.to ? ( +// +// ) : ( +// +// ))} +//
+// )} +//
+//
+// ) +// } diff --git a/packages/ui/src/components/path-breadcrumbs.tsx b/packages/ui/src/components/path-breadcrumbs.tsx index 8653a6fb04..accaf54345 100644 --- a/packages/ui/src/components/path-breadcrumbs.tsx +++ b/packages/ui/src/components/path-breadcrumbs.tsx @@ -1,123 +1,123 @@ -import { Fragment } from 'react' -import { Link } from 'react-router-dom' - -import { Breadcrumb, Icon, Input } from '@/components' -import { useDebounceSearch } from '@/hooks' - -interface InputPathBreadcrumbItemProps { - path: string - changeFileName: (value: string) => void - gitRefName: string - isNew?: boolean - handleOnBlur: () => void -} - -const InputPathBreadcrumbItem = ({ - path, - changeFileName, - gitRefName, - isNew = false, - handleOnBlur -}: InputPathBreadcrumbItemProps) => { - const { search: fileName, handleSearchChange: handleInputChange } = useDebounceSearch({ - handleChangeSearchValue: changeFileName, - searchValue: path - }) - - return ( -
- - in - - - {gitRefName} - -
- ) -} - -export interface PathParts { - path: string - parentPath: string -} - -export interface PathBreadcrumbsBaseProps { - items: PathParts[] - isEdit: boolean - isNew: boolean -} - -export interface PathBreadcrumbsInputProps { - changeFileName: (value: string) => void - gitRefName: string - fileName: string - handleOnBlur: () => void -} - -export type PathBreadcrumbsProps = PathBreadcrumbsBaseProps & Partial - -export const PathBreadcrumbs = ({ items, isEdit, isNew, ...props }: PathBreadcrumbsProps) => { - const length = items.length - - const renderInput = () => { - const { changeFileName, gitRefName, fileName, handleOnBlur } = props - - if (!changeFileName || gitRefName === undefined || fileName === undefined || !handleOnBlur) { - throw new Error('Invalid usage of InputComp') - } - - return ( - - ) - } - - return ( - - - {items.map(({ parentPath, path }, idx) => { - const isLast = length === idx + 1 - - if (isLast) { - return ( - - {isEdit ? renderInput() : {path}} - - ) - } - - return ( - - - - {path} - - - - - ) - })} - - {isNew && ( - <> - {!!items.length && } - {renderInput()} - - )} - - - ) -} +// import { Fragment } from 'react' +// import { Link } from 'react-router-dom' + +// import { Breadcrumb, Icon, Input } from '@/components' +// import { useDebounceSearch } from '@/hooks' + +// interface InputPathBreadcrumbItemProps { +// path: string +// changeFileName: (value: string) => void +// gitRefName: string +// isNew?: boolean +// handleOnBlur: () => void +// } + +// const InputPathBreadcrumbItem = ({ +// path, +// changeFileName, +// gitRefName, +// isNew = false, +// handleOnBlur +// }: InputPathBreadcrumbItemProps) => { +// const { search: fileName, handleSearchChange: handleInputChange } = useDebounceSearch({ +// handleChangeSearchValue: changeFileName, +// searchValue: path +// }) + +// return ( +//
+// +// in +// +// +// {gitRefName} +// +//
+// ) +// } + +// export interface PathParts { +// path: string +// parentPath: string +// } + +// export interface PathBreadcrumbsBaseProps { +// items: PathParts[] +// isEdit: boolean +// isNew: boolean +// } + +// export interface PathBreadcrumbsInputProps { +// changeFileName: (value: string) => void +// gitRefName: string +// fileName: string +// handleOnBlur: () => void +// } + +// export type PathBreadcrumbsProps = PathBreadcrumbsBaseProps & Partial + +// export const PathBreadcrumbs = ({ items, isEdit, isNew, ...props }: PathBreadcrumbsProps) => { +// const length = items.length + +// const renderInput = () => { +// const { changeFileName, gitRefName, fileName, handleOnBlur } = props + +// if (!changeFileName || gitRefName === undefined || fileName === undefined || !handleOnBlur) { +// throw new Error('Invalid usage of InputComp') +// } + +// return ( +// +// ) +// } + +// return ( +// +// +// {items.map(({ parentPath, path }, idx) => { +// const isLast = length === idx + 1 + +// if (isLast) { +// return ( +// +// {isEdit ? renderInput() : {path}} +// +// ) +// } + +// return ( +// +// +// +// {path} +// +// +// +// +// ) +// })} + +// {isNew && ( +// <> +// {!!items.length && } +// {renderInput()} +// +// )} +// +// +// ) +// } diff --git a/packages/ui/src/components/settings-menu.tsx b/packages/ui/src/components/settings-menu.tsx index 907203d4ba..722e5d27f9 100644 --- a/packages/ui/src/components/settings-menu.tsx +++ b/packages/ui/src/components/settings-menu.tsx @@ -1,55 +1,55 @@ -import { NavLink } from 'react-router-dom' +// import { NavLink } from 'react-router-dom' -import { Icon, NavbarSkeleton, ScrollArea, Sheet, Spacer } from '@/components' -import { MenuGroupType } from '@components/navbar/types' +// import { Icon, NavbarSkeleton, ScrollArea, Sheet, Spacer } from '@/components' +// import { MenuGroupType } from '@components/navbar/types' -interface SystemAdminMenuProps { - showSettingMenu: boolean - handleSettingsMenu: () => void - items: MenuGroupType[] -} +// interface SystemAdminMenuProps { +// showSettingMenu: boolean +// handleSettingsMenu: () => void +// items: MenuGroupType[] +// } -export const SettingsMenu = ({ showSettingMenu, handleSettingsMenu, items }: SystemAdminMenuProps) => { - return ( - - - System Administration menu - - - - - {items.map((group, group_idx) => ( - 0} - title={group.title} - titleClassName="mb-1.5" - > -
- {group.items.map(item => ( - - {({ isActive }) => ( - } - active={isActive} - /> - )} - - ))} -
- - ))} - - - - - - - ) -} +// export const SettingsMenu = ({ showSettingMenu, handleSettingsMenu, items }: SystemAdminMenuProps) => { +// return ( +// +// +// System Administration menu +// +// +// +// +// {items.map((group, group_idx) => ( +// 0} +// title={group.title} +// titleClassName="mb-1.5" +// > +//
+// {group.items.map(item => ( +// +// {({ isActive }) => ( +// } +// active={isActive} +// /> +// )} +// +// ))} +//
+// +// ))} +// +// +// +// +// +// +// ) +// } diff --git a/packages/ui/src/components/styled-link.tsx b/packages/ui/src/components/styled-link.tsx index 6a06a8f968..f20bd08b86 100644 --- a/packages/ui/src/components/styled-link.tsx +++ b/packages/ui/src/components/styled-link.tsx @@ -1,17 +1,17 @@ -import { Link, type LinkProps } from 'react-router-dom' +// import { Link, type LinkProps } from 'react-router-dom' -import { cn } from '@utils/cn' +// import { cn } from '@utils/cn' -type StyledLinkProps = LinkProps & React.RefAttributes +// type StyledLinkProps = LinkProps & React.RefAttributes -export function StyledLink({ className, ...props }: StyledLinkProps) { - return ( - - ) -} +// export function StyledLink({ className, ...props }: StyledLinkProps) { +// return ( +// +// ) +// } diff --git a/packages/ui/src/components/tabnav.tsx b/packages/ui/src/components/tabnav.tsx index 30094289b7..6281c01bea 100644 --- a/packages/ui/src/components/tabnav.tsx +++ b/packages/ui/src/components/tabnav.tsx @@ -1,33 +1,33 @@ -import { FC, PropsWithChildren } from 'react' -import { NavLink, NavLinkProps } from 'react-router-dom' +// import { FC, PropsWithChildren } from 'react' +// import { NavLink, NavLinkProps } from 'react-router-dom' -import { cn } from '@utils/cn' +// import { cn } from '@utils/cn' -const TabNavRoot: FC> = ({ children }) => { - return ( - - ) -} +// const TabNavRoot: FC> = ({ children }) => { +// return ( +// +// ) +// } -const commonClasses = - 'flex h-full items-center text-center cursor-pointer border-solid border-b-2 border-b-transparent px-0 font-normal text-foreground-2 duration-150 ease-in-out hover:text-foreground-1' +// const commonClasses = +// 'flex h-full items-center text-center cursor-pointer border-solid border-b-2 border-b-transparent px-0 font-normal text-foreground-2 duration-150 ease-in-out hover:text-foreground-1' -const TabNavItem: FC = ({ children, ...props }) => { - return ( - - cn(commonClasses, { - 'text-primary border-borders-9': isActive - }) - } - {...props} - > - {children} - - ) -} +// const TabNavItem: FC = ({ children, ...props }) => { +// return ( +// +// cn(commonClasses, { +// 'text-primary border-borders-9': isActive +// }) +// } +// {...props} +// > +// {children} +// +// ) +// } -export const TabNav = { Root: TabNavRoot, Item: TabNavItem } +// export const TabNav = { Root: TabNavRoot, Item: TabNavItem } diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 6140cf3ca0..d583c7a2ce 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -1,11 +1,4 @@ import './styles.css' -import * as locales from '../locales' -import * as components from './components' -import * as context from './context' -import * as hooks from './hooks' -import * as types from './types' -import * as utils from './utils' -import * as views from './views' - -export { components, views, hooks, locales, context, types, utils } +// Only export what's needed from views +export { CreateSecretPage, SecretType, SecretsHeader, TimeAgoHoverCard } from './views/secrets' diff --git a/packages/ui/src/standalone.ts b/packages/ui/src/standalone.ts new file mode 100644 index 0000000000..f976c52f84 --- /dev/null +++ b/packages/ui/src/standalone.ts @@ -0,0 +1,5 @@ +// Import only what's needed +import './styles.css' + +// Export only the components needed for the secrets feature +export { CreateSecretPage, SecretType, SecretsHeader, TimeAgoHoverCard } from './views/secrets' diff --git a/packages/ui/src/utils/utils.ts b/packages/ui/src/utils/utils.ts index ae02fbea5e..d3bcf81d56 100644 --- a/packages/ui/src/utils/utils.ts +++ b/packages/ui/src/utils/utils.ts @@ -1,6 +1,6 @@ import { createElement, ReactNode } from 'react' -import { TimeAgoHoverCard } from '@views/repo/components/time-ago-hover-card' +import { TimeAgoHoverCard } from '@views/secrets/time-ago-hover-card' import { formatDistance, formatDistanceToNow } from 'date-fns' export const getInitials = (name: string, length = 2) => { diff --git a/packages/ui/src/views/index.ts b/packages/ui/src/views/index.ts index e475bde53e..dcc2cbfa6b 100644 --- a/packages/ui/src/views/index.ts +++ b/packages/ui/src/views/index.ts @@ -1,59 +1,59 @@ -// types -export * from './types/link-types' +// // types +// export * from './types/link-types' -// layouts +// // layouts export * from './layouts/SandboxLayout' -export * from './layouts/Floating1ColumnLayout' -export * from './layouts/PullRequestLayout' -export * from './layouts/content-layout-with-sidebar' -export * from './layouts/webhooks-settings-layout' +// export * from './layouts/Floating1ColumnLayout' +// export * from './layouts/PullRequestLayout' +// export * from './layouts/content-layout-with-sidebar' +// export * from './layouts/webhooks-settings-layout' -// Account -export * from './account' +// // Account +// export * from './account' -// Project -export * from './project' +// // Project +// export * from './project' -// Repo -export * from './repo' +// // Repo +// export * from './repo' -// auth pages -export * from './auth' +// // auth pages +// export * from './auth' -export * from './empty-page' +// export * from './empty-page' -// pull-request-list -export * from './repo/pull-request' +// // pull-request-list +// export * from './repo/pull-request' -// webhook -export * from './repo/webhooks' +// // webhook +// export * from './repo/webhooks' -// landing-page -export * from './landing-page' +// // landing-page +// export * from './landing-page' -// create-project-page -export * from './create-project-page' +// // create-project-page +// export * from './create-project-page' -// profile-settings -export * from './profile-settings' +// // profile-settings +// export * from './profile-settings' -// pipelines -export * from './pipelines' +// // pipelines +// export * from './pipelines' -// pipeline-edit -export * from './pipeline-edit' +// // pipeline-edit +// export * from './pipeline-edit' -// user-management -export * from './user-management' +// // user-management +// export * from './user-management' -// not found (404) -export * from './not-found-page' +// // not found (404) +// export * from './not-found-page' -// labels -export * from './labels' +// // labels +// export * from './labels' -// execution -export * from './execution' +// // execution +// export * from './execution' -// secrets +// // secrets export * from './secrets' diff --git a/packages/ui/src/views/secrets/index.ts b/packages/ui/src/views/secrets/index.ts index 9485c63e2b..ff4d9df11f 100644 --- a/packages/ui/src/views/secrets/index.ts +++ b/packages/ui/src/views/secrets/index.ts @@ -1,2 +1,3 @@ export * from './new-secret/new-secret-form' export * from './secrets-header' +export * from './time-ago-hover-card' diff --git a/packages/ui/src/views/secrets/new-secret/new-secret-form.tsx b/packages/ui/src/views/secrets/new-secret/new-secret-form.tsx index 4f876e71f0..2b929ffd8d 100644 --- a/packages/ui/src/views/secrets/new-secret/new-secret-form.tsx +++ b/packages/ui/src/views/secrets/new-secret/new-secret-form.tsx @@ -12,10 +12,17 @@ import { Spacer, Textarea } from '@/components' -import { SandboxLayout, TranslationStore } from '@/views' +import { SandboxLayout } from '@/views' import { zodResolver } from '@hookform/resolvers/zod' +import { i18n, TFunction } from 'i18next' import { z } from 'zod' +interface TranslationStore { + t: TFunction + i18n: i18n + changeLanguage: (lng: string) => void +} + const newSecretformSchema = z.object({ name: z.string().min(1, { message: 'Please provide a name' }), value: z.string().min(1, { message: 'Please provide a value' }), diff --git a/packages/ui/src/views/secrets/time-ago-hover-card.tsx b/packages/ui/src/views/secrets/time-ago-hover-card.tsx new file mode 100644 index 0000000000..6231de8337 --- /dev/null +++ b/packages/ui/src/views/secrets/time-ago-hover-card.tsx @@ -0,0 +1,72 @@ +import { FC, useMemo } from 'react' + +import { Badge, Button, HoverCard, HoverCardContent, HoverCardTrigger } from '@/components' + +const utcFormatter = new Intl.DateTimeFormat(undefined, { + day: '2-digit', + month: 'long', + year: 'numeric', + timeZone: 'UTC' +}) + +const utcTimeFormatter = new Intl.DateTimeFormat(undefined, { + hour: '2-digit', + minute: '2-digit', + second: '2-digit', + timeZone: 'UTC' +}) + +const localFormatter = new Intl.DateTimeFormat(undefined, { + day: '2-digit', + month: 'long', + year: 'numeric' +}) + +const localTimeFormatter = new Intl.DateTimeFormat(undefined, { + hour: '2-digit', + minute: '2-digit', + second: '2-digit' +}) + +interface TimeAgoHoverCardProps { + formattedDate: string + timeStamp: number +} + +export const TimeAgoHoverCard: FC = ({ formattedDate, timeStamp }) => { + const getTimeZoneAbbreviation = () => + new Date().toLocaleTimeString(undefined, { timeZoneName: 'short' }).split(' ').pop() + + const formattedDates = useMemo( + () => ({ + utcDate: utcFormatter.format(timeStamp), + utcTime: utcTimeFormatter.format(timeStamp), + localDate: localFormatter.format(timeStamp), + localTime: localTimeFormatter.format(timeStamp) + }), + [timeStamp] + ) + + return ( + + + + + + {(['UTC', 'Local'] as const).map(zone => ( +
+ + {zone === 'UTC' ? 'UTC' : getTimeZoneAbbreviation()} + + {zone === 'UTC' ? formattedDates.utcDate : formattedDates.localDate} + + {zone === 'UTC' ? formattedDates.utcTime : formattedDates.localTime} + +
+ ))} + + + ) +} diff --git a/packages/ui/vite-base.config.ts b/packages/ui/vite-base.config.ts index 1f559b4e25..465c58ecd8 100644 --- a/packages/ui/vite-base.config.ts +++ b/packages/ui/vite-base.config.ts @@ -5,15 +5,7 @@ import { defineConfig } from 'vite' import svgr from 'vite-plugin-svgr' import tsConfigPaths from 'vite-tsconfig-paths' -const external = [ - 'react', - 'react-hook-form', - 'react-router-dom', - 'react-router', - 'react/jsx-runtime', - 'react-i18next', - 'i18next' -] +const external = ['react', 'react-router-dom', 'react-router', 'react/jsx-runtime', 'react-i18next', 'i18next'] export default defineConfig({ plugins: [react(), svgr({ include: '**/*.svg' }), tsConfigPaths()], @@ -21,14 +13,14 @@ export default defineConfig({ lib: { cssFileName: 'styles', entry: { - components: resolve(__dirname, 'src/components/index.ts'), + // components: resolve(__dirname, 'src/components/index.ts'), views: resolve(__dirname, 'src/views/index.ts'), - utils: resolve(__dirname, 'src/utils/index.ts'), - hooks: resolve(__dirname, 'src/hooks/index.ts'), - locales: resolve(__dirname, 'locales/index.ts'), + // utils: resolve(__dirname, 'src/utils/index.ts'), + // hooks: resolve(__dirname, 'src/hooks/index.ts'), + // locales: resolve(__dirname, 'locales/index.ts'), index: resolve(__dirname, 'src/index.ts'), - context: resolve(__dirname, 'src/context/index.ts'), - types: resolve(__dirname, 'src/types/index.ts'), + // context: resolve(__dirname, 'src/context/index.ts'), + // types: resolve(__dirname, 'src/types/index.ts'), 'tailwind.config': resolve(__dirname, 'tailwind.config.js') }, formats: ['es'] diff --git a/packages/ui/vite-custom.config.ts b/packages/ui/vite-custom.config.ts new file mode 100644 index 0000000000..f81cd8aef3 --- /dev/null +++ b/packages/ui/vite-custom.config.ts @@ -0,0 +1,36 @@ +import { resolve } from 'path' + +import react from '@vitejs/plugin-react-swc' +import { defineConfig } from 'vite' +import svgr from 'vite-plugin-svgr' +import tsConfigPaths from 'vite-tsconfig-paths' +import dts from 'vite-plugin-dts' + +const external = [ + 'react', + 'react-hook-form', + 'react-router-dom', + 'react-router', + 'react/jsx-runtime', + 'react-i18next', + 'i18next' +] + +export default defineConfig({ + plugins: [react(), svgr({ include: '**/*.svg' }), tsConfigPaths(), dts({ rollupTypes: true })], + build: { + lib: { + cssFileName: 'styles', + entry: { + // Only include the entries you want to build + views: resolve(__dirname, 'src/views/index.ts'), + index: resolve(__dirname, 'src/index.ts') + }, + formats: ['es'] + }, + rollupOptions: { + external: external + }, + sourcemap: true + } +}) From 180964dbc984e4fb5efd597412f67f05cf4bfbfc Mon Sep 17 00:00:00 2001 From: sanskar Date: Mon, 3 Mar 2025 09:55:32 -0800 Subject: [PATCH 2/5] fix: minor changes --- packages/ui/package.json | 27 +---- packages/ui/publish-minimal.js | 106 ------------------ packages/ui/src/index.ts | 10 +- packages/ui/src/standalone.ts | 5 - .../secrets/new-secret/new-secret-form.tsx | 28 ++--- packages/ui/vite-base.config.ts | 4 +- 6 files changed, 32 insertions(+), 148 deletions(-) delete mode 100644 packages/ui/publish-minimal.js delete mode 100644 packages/ui/src/standalone.ts diff --git a/packages/ui/package.json b/packages/ui/package.json index c5d8ab8107..a28da9c177 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -1,5 +1,5 @@ { - "name": "@harnessio/ui", + "name": "@harnessio/ui-alt", "description": "Harness Canary UI component library", "version": "0.0.1-alpha.21", "private": false, @@ -7,24 +7,9 @@ "main": "./dist/index.js", "module": "./dist/index.js", "types": "./dist/index.d.ts", - "exports": { - ".": { - "import": "./dist/index.js", - "types": "./dist/index.d.ts" - }, - "./views": { - "import": "./dist/views.js", - "types": "./dist/views.d.ts" - }, - "./styles.css": "./dist/styles.css", - "./shared-style-variables.css": "./src/shared-style-variables.css", - "./markdown-preview-styles.css": "./src/components/markdown-viewer/style.css", - "./tailwind.config": "./dist/tailwind.config.js" - }, + "style": "./dist/styles.css", "files": [ - "dist/**.*", - "src/shared-style-variables.css", - "src/components/markdown-viewer/style.css" + "dist/*" ], "scripts": { "dev": "vite", @@ -33,7 +18,6 @@ "build:analyse": "vite build --config ./vite-analyse.config.ts", "build:watch": "vite build --watch --emptyOutDir=false", "build:custom": "vite build --config ./vite-custom.config.ts", - "build:standalone": "vite build --config ./vite-standalone.config.ts", "lint": "eslint ./src", "pretty": "prettier --check ./src", "shadcn:update": "npx shadcn-ui@latest add -a -o -y", @@ -47,8 +31,9 @@ "typecheck": "tsc -b", "extract": "i18next --config './i18n.config.ts'" }, - "style": "./dist/styles.css", - "sideEffects": false, + "sideEffects": [ + "**/*.css" + ], "repository": { "type": "git", "url": "https://github.com/harness/canary.git" diff --git a/packages/ui/publish-minimal.js b/packages/ui/publish-minimal.js deleted file mode 100644 index 357f130e46..0000000000 --- a/packages/ui/publish-minimal.js +++ /dev/null @@ -1,106 +0,0 @@ -#!/usr/bin/env node - -const fs = require('fs'); -const path = require('path'); -const { execSync } = require('child_process'); - -// Create a temporary directory for our minimal package -const tempDir = path.join(__dirname, 'temp-publish'); -if (fs.existsSync(tempDir)) { - fs.rmSync(tempDir, { recursive: true, force: true }); -} -fs.mkdirSync(tempDir); -fs.mkdirSync(path.join(tempDir, 'dist')); -fs.mkdirSync(path.join(tempDir, 'src')); - -// Copy only the files we need -console.log('Copying files...'); - -// Copy the built files -const distFiles = [ - 'index.js', - 'views.js', - 'styles.css', - 'time-ago-hover-card-BMBtffzB.js', - 'secrets-header-CKmXo4_V.js', - 'hover-card-B2Uq_eJp.js', - 'stacked-list-9yPp5fQw.js', -]; - -distFiles.forEach(file => { - const sourcePath = path.join(__dirname, 'dist', file); - const destPath = path.join(tempDir, 'dist', file); - - if (fs.existsSync(sourcePath)) { - fs.copyFileSync(sourcePath, destPath); - console.log(`Copied ${sourcePath} to ${destPath}`); - } else { - console.warn(`Warning: ${sourcePath} does not exist`); - } -}); - -// Copy source files for CSS -fs.mkdirSync(path.join(tempDir, 'src', 'components'), { recursive: true }); -fs.mkdirSync(path.join(tempDir, 'src', 'components', 'markdown-viewer'), { recursive: true }); - -const sourceFiles = [ - 'src/shared-style-variables.css', - 'src/components/markdown-viewer/style.css' -]; - -sourceFiles.forEach(file => { - const sourcePath = path.join(__dirname, file); - const destPath = path.join(tempDir, file); - - if (fs.existsSync(sourcePath)) { - // Create directory if it doesn't exist - const destDir = path.dirname(destPath); - if (!fs.existsSync(destDir)) { - fs.mkdirSync(destDir, { recursive: true }); - } - - fs.copyFileSync(sourcePath, destPath); - console.log(`Copied ${sourcePath} to ${destPath}`); - } else { - console.warn(`Warning: ${sourcePath} does not exist`); - } -}); - -// Create a minimal package.json for the temporary directory -const packageJson = JSON.parse(fs.readFileSync(path.join(__dirname, 'package.json'), 'utf8')); -const minimalPackageJson = { - name: packageJson.name, - version: packageJson.version, - type: "module", - main: "./dist/index.js", - module: "./dist/index.js", - exports: { - ".": "./dist/index.js", - "./views": "./dist/views.js", - "./styles.css": "./dist/styles.css", - "./shared-style-variables.css": "./src/shared-style-variables.css", - "./markdown-preview-styles.css": "./src/components/markdown-viewer/style.css" - }, - files: [ - "dist/**/*", - "src/shared-style-variables.css", - "src/components/markdown-viewer/style.css" - ] -}; - -fs.writeFileSync( - path.join(tempDir, 'package.json'), - JSON.stringify(minimalPackageJson, null, 2) -); - -console.log('Created minimal package.json'); - -// Run yalc publish from the temporary directory -console.log('Publishing minimal package with yalc...'); -execSync('yalc publish --no-scripts', { cwd: tempDir, stdio: 'inherit' }); - -// Clean up -console.log('Cleaning up...'); -fs.rmSync(tempDir, { recursive: true, force: true }); - -console.log('Done!'); diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index d583c7a2ce..4fc8cf3a03 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -1,4 +1,12 @@ +// import * as styles from './shared-style-variables.css' + +// import * as styles from './styles.css' + import './styles.css' +// export * from './styles.css' + // Only export what's needed from views -export { CreateSecretPage, SecretType, SecretsHeader, TimeAgoHoverCard } from './views/secrets' +// export { CreateSecretPage, SecretType, SecretsHeader, TimeAgoHoverCard } from './views/secrets' +export * from './views/secrets' +// export { styles } diff --git a/packages/ui/src/standalone.ts b/packages/ui/src/standalone.ts deleted file mode 100644 index f976c52f84..0000000000 --- a/packages/ui/src/standalone.ts +++ /dev/null @@ -1,5 +0,0 @@ -// Import only what's needed -import './styles.css' - -// Export only the components needed for the secrets feature -export { CreateSecretPage, SecretType, SecretsHeader, TimeAgoHoverCard } from './views/secrets' diff --git a/packages/ui/src/views/secrets/new-secret/new-secret-form.tsx b/packages/ui/src/views/secrets/new-secret/new-secret-form.tsx index 2b929ffd8d..cf5a901c95 100644 --- a/packages/ui/src/views/secrets/new-secret/new-secret-form.tsx +++ b/packages/ui/src/views/secrets/new-secret/new-secret-form.tsx @@ -104,7 +104,7 @@ export function CreateSecretPage({ Metadata -
+
{/* DESCRIPTION */}