Forker/OpenNoodl
1
0
Fork 0
mirror of https://github.com/The-Low-Code-Foundation/OpenNoodl.git synced 2026-01-12 07:12:54 +01:00
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Added initial github integration

Browse Source
This commit is contained in:
Richard Osborne
2026-01-01 21:15:51 +01:00
parent cfaf78fb15
commit 2845b1b879
22 changed files with 7263 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/noodl-core-ui/src/preview/launcher/Launcher/Launcher.tsx
View File

@@ -19,7 +19,7 @@ import {
} from '@noodl-core-ui/preview/launcher/Launcher/components/LauncherProjectCard';
import { ViewMode } from '@noodl-core-ui/preview/launcher/Launcher/components/ViewModeToggle';
import { usePersistentTab } from '@noodl-core-ui/preview/launcher/Launcher/hooks/usePersistentTab';
import { LauncherPageId, LauncherProvider } from '@noodl-core-ui/preview/launcher/Launcher/LauncherContext';
import { GitHubUser, LauncherPageId, LauncherProvider } from '@noodl-core-ui/preview/launcher/Launcher/LauncherContext';
import { LearningCenter } from '@noodl-core-ui/preview/launcher/Launcher/views/LearningCenter';
import { Projects } from '@noodl-core-ui/preview/launcher/Launcher/views/Projects';
import { Templates } from '@noodl-core-ui/preview/launcher/Launcher/views/Templates';
@@ -42,6 +42,13 @@ export interface LauncherProps {
onLaunchProject?: (projectId: string) => void;
onOpenProjectFolder?: (projectId: string) => void;
onDeleteProject?: (projectId: string) => void;
// GitHub OAuth integration (optional - for Storybook compatibility)
githubUser?: GitHubUser | null;
githubIsAuthenticated?: boolean;
githubIsConnecting?: boolean;
onGitHubConnect?: () => void;
onGitHubDisconnect?: () => void;
}
// Tab configuration
@@ -168,7 +175,12 @@ export function Launcher({
onOpenProject,
onLaunchProject,
onOpenProjectFolder,
onDeleteProject
onDeleteProject,
githubUser,
githubIsAuthenticated,
githubIsConnecting,
onGitHubConnect,
onGitHubDisconnect
}: LauncherProps) {
// Determine initial tab: props > deep link > persisted > default
const deepLinkTab = parseDeepLink();
@@ -289,7 +301,12 @@ export function Launcher({
onOpenProject,
onLaunchProject,
onOpenProjectFolder,
onDeleteProject
onDeleteProject,
githubUser,
githubIsAuthenticated,
githubIsConnecting,
onGitHubConnect,
onGitHubDisconnect
}}
>
<div className={css['Root']}>

17
packages/noodl-core-ui/src/preview/launcher/Launcher/LauncherContext.tsx
View File

@@ -16,6 +16,16 @@ export { ViewMode };
export type LauncherPageId = 'projects' | 'learn' | 'templates';
// GitHub user info (matches GitHubOAuthService interface)
export interface GitHubUser {
id: number;
login: string;
name: string | null;
email: string | null;
avatar_url: string;
html_url: string;
}
export interface LauncherContextValue {
activePageId: LauncherPageId;
setActivePageId: (pageId: LauncherPageId) => void;
@@ -36,6 +46,13 @@ export interface LauncherContextValue {
onLaunchProject?: (projectId: string) => void;
onOpenProjectFolder?: (projectId: string) => void;
onDeleteProject?: (projectId: string) => void;
// GitHub OAuth integration (optional - for Storybook compatibility)
githubUser?: GitHubUser | null;
githubIsAuthenticated?: boolean;
githubIsConnecting?: boolean;
onGitHubConnect?: () => void;
onGitHubDisconnect?: () => void;
}
const LauncherContext = createContext<LauncherContextValue | null>(null);

10
packages/noodl-core-ui/src/preview/launcher/Launcher/components/GitHubConnectButton/GitHubConnectButton.module.scss Normal file
View File

@@ -0,0 +1,10 @@
.Root {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--spacing-8);
}
.Description {
display: none; /* Hide description to keep header compact */
}

29
packages/noodl-core-ui/src/preview/launcher/Launcher/components/GitHubConnectButton/GitHubConnectButton.tsx Normal file
View File

@@ -0,0 +1,29 @@
/**
* GitHubConnectButton
*
* Button component for initiating GitHub OAuth flow
*/
import React from 'react';
import { PrimaryButton } from '@noodl-core-ui/components/inputs/PrimaryButton';
import css from './GitHubConnectButton.module.scss';
export interface GitHubConnectButtonProps {
onConnect: () => void;
isConnecting?: boolean;
}
export function GitHubConnectButton({ onConnect, isConnecting = false }: GitHubConnectButtonProps) {
return (
<div className={css.Root}>
<PrimaryButton
label={isConnecting ? 'Connecting...' : 'Connect with GitHub'}
onClick={onConnect}
isDisabled={isConnecting}
/>
<p className={css.Description}>Connect to access your repositories and enable version control features.</p>
</div>
);
}

1
packages/noodl-core-ui/src/preview/launcher/Launcher/components/GitHubConnectButton/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './GitHubConnectButton';

9
packages/noodl-core-ui/src/preview/launcher/Launcher/components/LauncherHeader/LauncherHeader.tsx
View File

@@ -18,6 +18,7 @@ import { TextType } from '@noodl-core-ui/components/typography/Text';
import { Title, TitleSize, TitleVariant } from '@noodl-core-ui/components/typography/Title';
import { useLauncherContext } from '../../LauncherContext';
import { GitHubConnectButton } from '../GitHubConnectButton';
import css from './LauncherHeader.module.scss';
const VERSION_NUMBER = '2.9.3';
@@ -25,7 +26,8 @@ const VERSION_NUMBER = '2.9.3';
export interface LauncherHeaderProps {}
export function LauncherHeader({}: LauncherHeaderProps) {
const { useMockData, setUseMockData, hasRealProjects } = useLauncherContext();
const { useMockData, setUseMockData, hasRealProjects, githubIsAuthenticated, githubIsConnecting, onGitHubConnect } =
useLauncherContext();
const handleToggleDataSource = () => {
setUseMockData(!useMockData);
@@ -42,6 +44,11 @@ export function LauncherHeader({}: LauncherHeaderProps) {
</Title>
</div>
<div className={css['Actions']}>
{/* GitHub OAuth Button - Show when not authenticated */}
{!githubIsAuthenticated && onGitHubConnect && (
<GitHubConnectButton onConnect={onGitHubConnect} isConnecting={githubIsConnecting} />
)}
{hasRealProjects && (
<div className={css['DataSourceToggle']}>
<TextButton