@dxos/plugin-github 0.6.8-main.046e6cf

package/src/components/Issue.tsx

@@ -0,0 +1,62 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type IconWeight, IconBase, type IconProps } from '@phosphor-icons/react';
+import React, { forwardRef, type ReactElement } from 'react';
+
+// TODO(wittjosiah): This is a workaround until we have utilities to compose icons.
+//   This is a combination of the Circle and Dot icons.
+
+const weights = new Map<IconWeight, ReactElement>([
+  [
+    'bold',
+    <>
+      <path d='M128,20A108,108,0,1,0,236,128,108.12,108.12,0,0,0,128,20Zm0,192a84,84,0,1,1,84-84A84.09,84.09,0,0,1,128,212Z' />
+      <path d='M144,128a16,16,0,1,1-16-16A16,16,0,0,1,144,128Z' />
+    </>,
+  ],
+  [
+    'duotone',
+    <>
+      <path d='M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z' opacity='0.2' />
+      <path d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Z' />
+      <path d='M176,128a48,48,0,1,1-48-48A48,48,0,0,1,176,128Z' opacity='0.2' />
+      <path d='M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Z' />
+    </>,
+  ],
+  [
+    'fill',
+    <>
+      <path d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Z' />
+      <path d='M128,80a48,48,0,1,0,48,48A48,48,0,0,0,128,80Zm0,60a12,12,0,1,1,12-12A12,12,0,0,1,128,140Z' />
+    </>,
+  ],
+  [
+    'light',
+    <>
+      <path d='M128,26A102,102,0,1,0,230,128,102.12,102.12,0,0,0,128,26Zm0,192a90,90,0,1,1,90-90A90.1,90.1,0,0,1,128,218Z' />
+      <path d='M138,128a10,10,0,1,1-10-10A10,10,0,0,1,138,128Z' />
+    </>,
+  ],
+  [
+    'regular',
+    <>
+      <path d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Z' />
+      <path d='M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Z' />
+    </>,
+  ],
+  [
+    'thin',
+    <>
+      <path d='M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Z' />
+      <path d='M136,128a8,8,0,1,1-8-8A8,8,0,0,1,136,128Z' />
+    </>,
+  ],
+]);
+
+const Issue = forwardRef<SVGSVGElement, IconProps>((props, ref) => <IconBase ref={ref} {...props} weights={weights} />);
+
+Issue.displayName = 'Issue';
+
+export { Issue };

package/src/components/Loading/Loading.stories.tsx

@@ -0,0 +1,28 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { Loading } from './Loading';
+
+export default {
+  title: 'plugin-github/Loading',
+  component: Loading,
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg', 'xl'],
+    },
+    color: {
+      control: 'select',
+      options: ['primary', 'neutral'],
+    },
+  },
+};
+
+export const Default = { args: { label: 'Loading', size: 'md', color: 'primary' } };
+export const Small = { args: { ...Default.args, size: 'sm' } };
+export const Neutral = { args: { ...Default.args, color: 'neutral' } };
+export const Large = { args: { ...Default.args, size: 'lg' } };
+export const ExtraLarge = { args: { ...Default.args, size: 'xl' } };

package/src/components/Loading/Loading.tsx

@@ -0,0 +1,70 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import React, { type ComponentProps } from 'react';
+
+import { useId } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+export type LoadingSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export type LoadingColor = 'primary' | 'neutral';
+
+export interface LoadingSlots {
+  root?: Omit<ComponentProps<'div'>, 'children'>;
+  svg?: Pick<ComponentProps<'svg'>, 'className'>;
+}
+
+export interface LoadingProps {
+  label: string;
+  size?: LoadingSize;
+  color?: LoadingColor;
+  slots?: LoadingSlots;
+}
+
+const sizeMap = new Map<LoadingSize, string>([
+  ['sm', 'w-4 h-4'],
+  ['md', 'w-8 h-8'],
+  ['lg', 'w-12 h-12'],
+  ['xl', 'w-16 h-16'],
+]);
+
+// TODO(wittjosiah): Factor out.
+export const Loading = ({ size, color, label, slots = {} }: LoadingProps) => {
+  const labelId = useId('loading-label');
+  const sizeClassName = sizeMap.get(size ?? 'md');
+  return (
+    <div
+      {...slots.root}
+      className={mx('flex justify-center p-4', slots.root?.className)}
+      role='status'
+      aria-labelledby={labelId}
+    >
+      <svg
+        role='none'
+        className={mx(
+          sizeClassName,
+          'text-neutral-200/50 animate-spin dark:text-neutral-600/50',
+          color === 'neutral' ? 'fill-neutral-400' : 'fill-primary-400',
+          slots.svg?.className,
+        )}
+        viewBox='0 0 100 101'
+        fill='none'
+        xmlns='http://www.w3.org/2000/svg'
+      >
+        <path
+          d='M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z'
+          fill='currentColor'
+        />
+        <path
+          d='M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z'
+          fill='currentFill'
+        />
+      </svg>
+      <span className='sr-only' id={labelId}>
+        {label}
+      </span>
+    </div>
+  );
+};

package/src/components/Loading/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './Loading';

package/src/components/MarkdownActions.tsx

@@ -0,0 +1,136 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { ArrowSquareOut, FileArrowDown, FileArrowUp, Link, LinkBreak } from '@phosphor-icons/react';
+import React, { useCallback } from 'react';
+
+import { LayoutAction, useIntent } from '@dxos/app-framework';
+import { log } from '@dxos/log';
+import { type MarkdownProperties } from '@dxos/plugin-markdown';
+import { getMeta } from '@dxos/react-client/echo';
+import { DropdownMenu, useTranslation } from '@dxos/react-ui';
+import { getSize } from '@dxos/react-ui-theme';
+
+import { useOctokitContext } from './GithubApiProviders';
+import { useDocGhId } from '../hooks';
+import { GITHUB_PLUGIN } from '../meta';
+import { type GhIssueIdentifier } from '../types';
+
+// TODO(burdon): Requires test; very likely out of date.
+// TODO(burdon): Where do "properties" come from? Is this the graph node datum?
+export const MarkdownActions = ({ content, properties }: { content: string; properties: MarkdownProperties }) => {
+  // TODO(burdon): Ad hoc assumption that underlying object is ECHO?
+  const ghId = getMeta(properties)?.keys?.find((key) => key.source === 'github.com')?.id;
+  const { octokit } = useOctokitContext();
+  const { t } = useTranslation(GITHUB_PLUGIN);
+  const { dispatch } = useIntent();
+
+  const docGhId = useDocGhId(properties.__meta?.keys ?? []);
+
+  const updateIssueContent = useCallback(() => {
+    const { owner, repo, issueNumber } = docGhId as GhIssueIdentifier;
+    return octokit!.rest.issues.update({
+      owner,
+      repo,
+      issue_number: issueNumber,
+      body: content,
+    });
+  }, [octokit, docGhId, content]);
+
+  const exportGhIssueContent = useCallback(async () => {
+    if (octokit && docGhId && 'issueNumber' in docGhId && content) {
+      try {
+        const {
+          data: { html_url: issueUrl },
+        } = await updateIssueContent();
+        await dispatch({
+          action: LayoutAction.SET_LAYOUT,
+          data: {
+            element: 'dialog',
+            component: 'dxos.org/plugin/github/ExportDialog',
+            subject: { type: 'response', target: issueUrl, docGhId, content },
+          },
+        });
+      } catch (err) {
+        log.error('Failed to export to Github issue');
+      }
+    } else {
+      log.error('Not prepared to export to Github issue when requested.');
+    }
+  }, [octokit, docGhId, content]);
+
+  const handleGhExport = useCallback(() => {
+    if ('issueNumber' in docGhId!) {
+      void exportGhIssueContent();
+    } else if ('path' in docGhId!) {
+      void dispatch({
+        action: LayoutAction.SET_LAYOUT,
+        data: {
+          element: 'dialog',
+          component: 'dxos.org/plugin/github/ExportDialog',
+          subject: { type: 'create-pr', content, docGhId },
+        },
+      });
+    }
+  }, [exportGhIssueContent, docGhId]);
+
+  return (
+    <>
+      <DropdownMenu.GroupLabel>{t('markdown actions label')}</DropdownMenu.GroupLabel>
+      {docGhId ? (
+        <>
+          <DropdownMenu.Item
+            classNames='gap-2'
+            disabled={!docGhId}
+            onClick={() =>
+              // TODO(burdon): Intent should return content value from dialog.
+              dispatch({
+                action: LayoutAction.SET_LAYOUT,
+                data: { element: 'dialog', component: 'dxos.org/plugin/github/ImportDialog', subject: { docGhId } },
+              })
+            }
+          >
+            <FileArrowDown className={getSize(4)} />
+            <span className='grow'>{t('import from github label')}</span>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item classNames='gap-2' disabled={!docGhId} onClick={() => docGhId && handleGhExport()}>
+            <FileArrowUp className={getSize(4)} />
+            <span className='grow'>{t('export to github label')}</span>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item asChild classNames='gap-2' disabled={!ghId}>
+            <a
+              {...(ghId ? { href: `https://github.com/${ghId}`, target: '_blank', rel: 'noreferrer' } : { href: '#' })}
+            >
+              <ArrowSquareOut className={getSize(4)} />
+              <span className='grow'>{t('open in github label')}</span>
+            </a>
+          </DropdownMenu.Item>
+          <DropdownMenu.Item
+            classNames='gap-2'
+            onClick={() => {
+              const index = getMeta(properties)?.keys?.findIndex((key) => key.source === 'github.com');
+              typeof index !== 'undefined' && index >= 0 && properties.__meta?.keys?.splice(index, 1);
+            }}
+          >
+            <LinkBreak className={getSize(4)} />
+            <span className='grow'>{t('unbind to file in github label')}</span>
+          </DropdownMenu.Item>
+        </>
+      ) : (
+        <DropdownMenu.Item
+          classNames='gap-2'
+          onClick={() =>
+            dispatch({
+              action: LayoutAction.SET_LAYOUT,
+              data: { element: 'dialog', component: 'dxos.org/plugin/github/BindDialog', subject: properties },
+            })
+          }
+        >
+          <Link className={getSize(4)} />
+          <span className='grow'>{t('bind to file in github label')}</span>
+        </DropdownMenu.Item>
+      )}
+    </>
+  );
+};

package/src/components/UrlDialog.tsx

@@ -0,0 +1,52 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useState } from 'react';
+
+import { type MarkdownProperties } from '@dxos/plugin-markdown';
+import { Dialog, Button, useTranslation, Input } from '@dxos/react-ui';
+
+import { useGhIdFromUrl } from '../hooks';
+import { GITHUB_PLUGIN } from '../meta';
+
+export const UrlDialog = ({ properties }: { properties: MarkdownProperties }) => {
+  const { t } = useTranslation(GITHUB_PLUGIN);
+  const [ghUrlValue, setGhUrlValue] = useState('');
+  const ghId = useGhIdFromUrl(ghUrlValue);
+
+  return (
+    <>
+      <Dialog.Title classNames='mbe-2'>{t('bind to file in github label')}</Dialog.Title>
+      <Input.Root validationValence='error'>
+        <Input.Label>{t('paste url to file in github label')}</Input.Label>
+        <Input.TextInput
+          placeholder={t('paste url to file in github placeholder')}
+          value={ghUrlValue}
+          onChange={({ target: { value } }) => setGhUrlValue(value)}
+        />
+        <Input.DescriptionAndValidation>
+          {ghUrlValue.length > 0 && !ghId && (
+            <Input.Validation>{t('error github markdown path message')}</Input.Validation>
+          )}
+          <Input.Description>{t('paste url to file in github description')}</Input.Description>
+        </Input.DescriptionAndValidation>
+      </Input.Root>
+      <div role='none' className='flex justify-end gap-2'>
+        <Dialog.Close asChild>
+          <Button
+            classNames='mbs-2'
+            onClick={() => {
+              if (ghId && document) {
+                // TODO(burdon): Meta should be immutable.
+                properties.__meta.keys.push({ source: 'github.com', id: ghId });
+              }
+            }}
+          >
+            {t('done label', { ns: 'os' })}
+          </Button>
+        </Dialog.Close>
+      </div>
+    </>
+  );
+};

package/src/components/index.ts

@@ -0,0 +1,12 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './EmbeddedMain';
+export * from './ExportDialog';
+export * from './GithubApiProviders';
+export * from './GithubEchoResolverProviders';
+export * from './ImportDialog';
+export * from './Issue';
+export * from './MarkdownActions';
+export * from './UrlDialog';

package/src/hooks/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './useDocGhId';
+export * from './useGhIdFromUrl';

package/src/hooks/useDocGhId.ts

@@ -0,0 +1,38 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import { log } from '@dxos/log';
+
+import { type GhIdentifier } from '../types';
+
+export const useDocGhId = (keys: { source?: string; id?: string }[]) => {
+  return useMemo<GhIdentifier | null>(() => {
+    try {
+      const key = keys?.find((key) => key.source === 'github.com');
+      const [owner, repo, type, ...rest] = key?.id?.split('/') ?? [];
+      if (type === 'issues') {
+        return {
+          owner,
+          repo,
+          issueNumber: parseInt(rest[0], 10),
+        };
+      } else if (type === 'blob') {
+        const [ref, ...pathParts] = rest;
+        return {
+          owner,
+          repo,
+          ref,
+          path: pathParts.join('/'),
+        };
+      } else {
+        return null;
+      }
+    } catch (err) {
+      log.catch(err);
+      return null;
+    }
+  }, [keys]);
+};

package/src/hooks/useGhIdFromUrl.ts

@@ -0,0 +1,26 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+export const useGhIdFromUrl = (ghUrlValue: string) =>
+  useMemo<string | null>(() => {
+    try {
+      const url = new URL(ghUrlValue);
+      const [_, owner, repo, type, ...rest] = url.pathname.split('/');
+      if (type === 'blob') {
+        const [ref, ...pathParts] = rest;
+        const path = pathParts.join('/');
+        const ext = pathParts[pathParts.length - 1].split('.')[1];
+        return ext === 'md' ? `${owner}/${repo}/blob/${ref}/${path}` : null;
+      } else if (type === 'issues') {
+        const [issueNumberString] = rest;
+        return `${owner}/${repo}/issues/${issueNumberString}`;
+      } else {
+        return null;
+      }
+    } catch (e) {
+      return null;
+    }
+  }, [ghUrlValue]);

package/src/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { GithubPlugin } from './GithubPlugin';
+
+export default GithubPlugin;
+
+export * from './GithubPlugin';

package/src/meta.tsx

@@ -0,0 +1,21 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { GithubLogo, type IconProps } from '@phosphor-icons/react';
+import React from 'react';
+
+import { pluginMeta } from '@dxos/app-framework';
+
+export const GITHUB_PLUGIN = 'dxos.org/plugin/github';
+export const GITHUB_PLUGIN_SHORT_ID = 'github';
+
+export default pluginMeta({
+  id: GITHUB_PLUGIN,
+  shortId: GITHUB_PLUGIN_SHORT_ID,
+  name: 'GitHub',
+  description: 'GitHub integration.',
+  tags: ['experimental'],
+  iconComponent: (props: IconProps) => <GithubLogo {...props} />,
+  iconSymbol: 'ph--github-logo--regular',
+});

package/src/translations.ts

@@ -0,0 +1,72 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { GITHUB_PLUGIN } from './meta';
+
+export default [
+  {
+    'en-US': {
+      [GITHUB_PLUGIN]: {
+        'plugin name': 'GitHub',
+        'markdown actions label': 'GitHub actions',
+        'unbind to file in github label': 'Disconnect from GitHub',
+        'bind to file in github label': 'Connect to issue or file in GitHub',
+        'github pat label': 'GitHub personal access token:',
+        'github pat description':
+          'Composer needs this in order to communicate with GitHub. <docsLink>GitHub’s documentation describes how to create a token.</docsLink> Composer only needs write access to issues, contents, and pull requests.',
+        'github pat description href':
+          'https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens',
+        'empty github pat message': 'Set a GitHub personal access token to continue.',
+        'set github pat label': 'Set GitHub token',
+        'error github pat message':
+          'There was a problem authenticating with GitHub using the personal access token provided.',
+        'error github markdown path message': 'This is not a valid path to a Markdown file or Issue in GitHub.',
+        'paste url to file in github label': 'Paste the URL to the Issue or Markdown file in GitHub.',
+        'paste url to file in github description':
+          'Navigate to the issue or file in GitHub, then copy the URL in your browser and paste it here.',
+        'paste url to file in github placeholder': 'https://github.com/owner/repo/blob/main/path/to/README.md',
+        'confirm export title': 'Export to GitHub',
+        'export to github success message':
+          '<resultStyle>Success!</resultStyle> Your changes are now live here: <prLink>{{linkText}}</prLink>',
+        'github branch name label': 'Name of the branch to create',
+        'github branch name placeholder': 'update-readme',
+        'github commit message label': 'Commit message',
+        'github commit message placeholder': 'Updated README.md',
+        'save and close description': 'Save changes to GitHub and close the editor',
+        'close embed description':
+          'Close the editor without saving changes to GitHub. Your changes will still persist in Composer.',
+        'resolver init document message': 'Syncing this document, one moment…',
+        'comment stale title': 'No longer in-sync',
+        'comment stale body':
+          'The document in GitHub was updated in another session. To re-sync, please save your changes, reload the page, and choose to edit from GitHub again.',
+        'open in github label': 'Open in GitHub',
+        'stale rescue title': 'Set a personal access token',
+        'stale rescue description':
+          'Another user has recently updated this issue, so GitHub won’t accept your changes unless you set a personal access token (a PAT) here, or refresh the page.',
+        'embedded options label': 'Options',
+        'unset repo space label': 'Select a different space for this repository',
+        'loading preview message': 'Loading preview…',
+        'preview gfm label': 'Preview Markdown',
+        'exit gfm preview label': 'Exit preview',
+        'save and close label': 'Save & close',
+        'export to github label': 'Export to GitHub',
+        'import from github label': 'Import from GitHub',
+        'resolver tree label': 'Choose a Space',
+        'resolver tree description':
+          'To collaborate on documents in this repository, choose the Space that will store and control access to the documents.',
+        'resolver no spaces message': 'You aren’t in any spaces yet',
+        'resolver create space label': 'Create a space for this repository',
+        'bound members message_one': 'One member uses this space for this repository',
+        'bound members message_other': '{{count}} members use this space for this repository',
+        'select label': 'Select',
+        'selected label': 'Selected',
+        'open in composer label': 'Open in Composer',
+        'confirm import title': 'Overwrite this document’s content?',
+        'confirm import body':
+          'Importing will overwrite this document’s content. If you’d rather import into a new document, first create a new document and then import into it.',
+        'target blank description': 'Link opens in a new tab.',
+      },
+    },
+  },
+];

package/src/types.ts

@@ -0,0 +1,51 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Dispatch, type SetStateAction } from 'react';
+
+import {
+  type GraphBuilderProvides,
+  type TranslationsProvides,
+  type SettingsProvides,
+  type SurfaceProvides,
+} from '@dxos/app-framework';
+import { type DocumentType } from '@dxos/plugin-markdown/types';
+import { type Space } from '@dxos/react-client/echo';
+
+export type EditorViewState = 'editor' | 'preview';
+
+export type MarkdownDocumentProps = {
+  space: Space;
+  document: DocumentType;
+  layout: 'standalone' | 'embedded';
+  editorViewState: EditorViewState;
+  setEditorViewState: Dispatch<SetStateAction<EditorViewState>>;
+};
+
+export type GhSharedProps = {
+  owner: string;
+  repo: string;
+};
+
+export type GhFileIdentifier = GhSharedProps & {
+  ref: string;
+  path: string;
+};
+
+export type GhIssueIdentifier = GhSharedProps & {
+  issueNumber: number;
+};
+
+export type GhIdentifier = GhFileIdentifier | GhIssueIdentifier;
+
+export type ExportViewState = 'create-pr' | 'pending' | 'response' | null;
+
+export type GithubSettingsProps = {
+  pat?: string;
+};
+
+export type GithubPluginProvides = SurfaceProvides &
+  GraphBuilderProvides &
+  SettingsProvides<GithubSettingsProps> &
+  TranslationsProvides;