studiocms 0.1.0-beta.10

package/dist/components/dashboard/islands/content-mgmt/TreeSidebarLink.astro

@@ -0,0 +1,51 @@
+---
+import { Icon } from 'studiocms:ui/components';
+import type { HeroIconName } from '@studiocms/ui/components/Icon/iconType.js';
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'a'> {
+	/**
+	 * ONLY USE OUTLINED ICONS! Shit will break otherwise
+	 */
+	icon: HeroIconName;
+	href: string;
+}
+
+const { icon, ...props } = Astro.props;
+
+const activeIcon = `${icon}-solid`;
+
+const compId = crypto.randomUUID();
+---
+
+<a id={compId} class="inner-sidebar-link" {...props} data-astro-reload>
+  <Icon name={icon} id="not-selected-icon" class='sidebar-link-icon not-selected' width={24} height={24} />
+  <Icon name={activeIcon as HeroIconName} id="selected-icon" class="sidebar-link-icon selected" width={24} height={24} />
+  <span class="sidebar-link-text">
+    <slot />
+  </span>
+</a>
+
+<script is:inline data-astro-rerun define:vars={{ compId }}>
+  function setInnerSidebarLinks() {
+    const link = document.getElementById(compId)
+
+    const notSelectedIcon = link.querySelector('#not-selected-icon')
+    const selectedIcon = link.querySelector('#selected-icon')
+
+    notSelectedIcon.style.display = 'block';
+    selectedIcon.style.display = 'none';
+    link.classList.remove('active');
+
+    const LinkQueryParams = new URL(link.href).searchParams.get('edit');
+    const CurrentQueryParams = new URL(window.location.href).searchParams.get('edit');
+
+    if (LinkQueryParams === CurrentQueryParams) {
+      notSelectedIcon.style.display = 'none';
+      selectedIcon.style.display = 'block';
+      link.classList.add('active');
+    }
+  }
+  document.addEventListener('astro:page-load', setInnerSidebarLinks);
+  setInnerSidebarLinks();
+</script>

package/dist/components/dashboard/islands/content-mgmt/runtime.d.ts

@@ -0,0 +1,10 @@
+import { convertToSafeString } from '../../../../utils/safeString.js';
+export { convertToSafeString };
+/**
+ * Imports components by their keys from the 'studiocms:markdown-remark/user-components' module.
+ *
+ * @param keys - An array of strings representing the keys of the components to import.
+ * @returns A promise that resolves to an object containing the imported components.
+ * @throws {MarkdownRemarkError} If any component fails to import, an error is thrown with a prefixed message.
+ */
+export declare function importEditorKeys(keys: string[]): Promise<Record<string, any>>;

package/dist/components/dashboard/islands/content-mgmt/runtime.js

@@ -0,0 +1,33 @@
+import * as mod from "virtual:studiocms/components/Editors";
+import { StudioCMSError } from "../../../../errors.js";
+import { prefixError } from "../../../../lib/renderer/errors.js";
+import { convertToSafeString } from "../../../../utils/safeString.js";
+async function importEditorKeys(keys) {
+  const predefinedComponents = {};
+  for (const key of keys) {
+    try {
+      predefinedComponents[convertToSafeString(key)] = // @ts-ignore
+      mod[convertToSafeString(key)];
+    } catch (e) {
+      if (e instanceof Error) {
+        const newErr2 = prefixError(
+          e,
+          `Failed to import component "${key}" from Virtual Module "virtual:studiocms/components/Editors"`
+        );
+        console.error(newErr2);
+        throw new StudioCMSError(newErr2.message, newErr2.stack);
+      }
+      const newErr = prefixError(
+        new Error("Unknown error"),
+        `Failed to import component "${key}" from Virtual Module "virtual:studiocms/components/Editors"`
+      );
+      console.error(newErr);
+      throw new StudioCMSError(newErr.message, newErr.stack);
+    }
+  }
+  return predefinedComponents;
+}
+export {
+  convertToSafeString,
+  importEditorKeys
+};

package/dist/components/dashboard/islands/content-mgmt/shared.d.ts

@@ -0,0 +1,27 @@
+interface PluginListItem {
+    label: string;
+    value: string;
+}
+export declare const PageFolderTree: import("../../../../sdk/types").FolderNode[];
+export declare const parentFolders: {
+    value: string;
+    label: string;
+}[];
+export declare const parentFolderOptions: {
+    value: string;
+    label: string;
+}[];
+export declare const pageTypeOptions: PluginListItem[];
+export declare const trueFalse: {
+    label: string;
+    value: string;
+}[];
+export declare const categoriesOptions: {
+    label: string;
+    value: string;
+}[];
+export declare const tagsOptions: {
+    label: string;
+    value: string;
+}[];
+export {};

package/dist/components/dashboard/islands/content-mgmt/shared.js

@@ -0,0 +1,31 @@
+import pluginsList from "studiocms:plugins";
+import studioCMS_SDK_Cache from "studiocms:sdk/cache";
+const { data: folderList } = await studioCMS_SDK_Cache.GET.folderList();
+const { data: PageFolderTree } = await studioCMS_SDK_Cache.GET.pageFolderTree(true);
+const parentFolders = folderList.map(({ id: value, name: label }) => ({ value, label }));
+const parentFolderOptions = [{ value: "null", label: "None" }, ...parentFolders];
+const pageTypeOptions = pluginsList.flatMap(({ pageTypes }) => {
+  const pageTypeOutput = [];
+  if (!pageTypes) {
+    return pageTypeOutput;
+  }
+  for (const { label, identifier } of pageTypes) {
+    pageTypeOutput.push({ label, value: identifier });
+  }
+  return pageTypeOutput;
+});
+const trueFalse = [
+  { label: "Yes", value: "true" },
+  { label: "No", value: "false" }
+];
+const categoriesOptions = [{ label: "None", value: "null" }];
+const tagsOptions = [{ label: "None", value: "null" }];
+export {
+  PageFolderTree,
+  categoriesOptions,
+  pageTypeOptions,
+  parentFolderOptions,
+  parentFolders,
+  tagsOptions,
+  trueFalse
+};

package/dist/components/dashboard/islands/dashboard/DashboardGrid.astro

@@ -0,0 +1,39 @@
+---
+import { getUserData, verifyUserPermissionLevel } from 'studiocms:auth/lib/user';
+import dashboardGridItems from 'studiocms:components/dashboard-grid-items';
+import studioCMS_SDK_Cache from 'studiocms:sdk/cache';
+import { Center } from 'studiocms:ui/components';
+import DashboardGridItem from './DashboardGridItem.astro';
+
+const { data } = await studioCMS_SDK_Cache.GET.siteConfig();
+
+let gridItems = dashboardGridItems;
+
+const allowedItems: string[] = (data.gridItems as string[]) ?? [];
+
+const filterItems = allowedItems.length > 0;
+
+if (filterItems) {
+	gridItems = dashboardGridItems.filter((item) => allowedItems.includes(item.name));
+}
+
+const currentUser = await getUserData(Astro);
+---
+<div class="dashboard-grid-container">
+
+    { 
+		gridItems.length > 0 
+		? gridItems.map(async (item) => {
+			if (item.requiresPermission) {
+				const allowed = await verifyUserPermissionLevel(currentUser, item.requiresPermission);
+				if (allowed) {
+					return <DashboardGridItem {...item} />
+				}
+			} else {
+				return <DashboardGridItem {...item} />
+			}
+		}) 
+		: <Center><p>There is nothing to display</p></Center> 
+	}
+
+</div>

package/dist/components/dashboard/islands/dashboard/DashboardGridItem.astro

@@ -0,0 +1,34 @@
+---
+import { Card, Icon } from 'studiocms:ui/components';
+import { createComponentProxy, transformHTML } from '../../../../runtime/AstroComponentProxy.js';
+import type { GridItem } from './shared.js';
+
+export interface Props extends GridItem {}
+
+const { span, variant, body, header, name } = Astro.props;
+
+// @ts-expect-error - `$$result` is a global variable injected by Astro's compiler during rendering
+const components = createComponentProxy($$result, body?.components);
+
+let html: string | undefined = undefined;
+
+if (body?.html) {
+	html = await transformHTML(body.html, components, body.sanitizeOpts);
+}
+---
+<Card
+    fullWidth
+    variant={variant}
+    class="grid-item"
+    class:list={[span > 1 && `span-${span}`]}
+    id={name}>
+    {header && (
+        <div slot="header">
+            <span class="grid-item-title">
+                {header.icon && <Icon name={header.icon} width={24} height={24}/>}
+                <span>{header.title}</span>
+            </span>
+        </div>
+    )}
+    { html && <Fragment set:html={html} /> }
+</Card>

package/dist/components/dashboard/islands/dashboard/Test.astro

@@ -0,0 +1,5 @@
+---
+---
+<div>
+    <span>This is only a test!</span>
+</div>

package/dist/components/dashboard/islands/dashboard/UserName.astro

@@ -0,0 +1,6 @@
+---
+import { getUserData } from 'studiocms:auth/lib/user';
+
+const user = await getUserData(Astro);
+---
+<Fragment set:text={user.user?.name} />

package/dist/components/dashboard/islands/dashboard/shared.d.ts

@@ -0,0 +1,2 @@
+import type { GridItemUsable } from '../../../../lib/dashboardGrid.js';
+export type GridItem = GridItemUsable;

package/dist/components/dashboard/islands/plugins/SettingsRenderer.astro

@@ -0,0 +1,29 @@
+---
+import type { SettingsField } from 'studiocms:plugin-helpers';
+import { Row } from 'studiocms:ui/components';
+import { Checkbox, Input, RadioGroup, Select, Textarea } from 'studiocms:ui/components';
+
+interface Props {
+	fields: SettingsField[];
+}
+
+const { fields } = Astro.props;
+---
+{
+  fields.map((field) => {
+    switch (field.input) {
+      case 'checkbox':
+        return <Checkbox label={field.label} size={field.size} color={field.color} defaultChecked={field.defaultChecked} disabled={field.readOnly} name={field.name} isRequired={field.required} />
+      case 'input':
+        return <Input label={field.label} type={field.type} placeholder={field.placeholder} isRequired={field.required} name={field.name} disabled={field.readOnly} defaultValue={field.defaultValue} />
+      case 'textarea':
+        return <Textarea label={field.label} placeholder={field.placeholder} isRequired={field.required} name={field.name} disabled={field.readOnly} defaultValue={field.defaultValue} />
+      case 'radio':
+        return <RadioGroup label={field.label} name={field.name} options={field.options} isRequired={field.required} disabled={field.readOnly} color={field.color} defaultValue={field.defaultValue} horizontal={field.direction === 'horizontal'} />
+      case 'select':
+        return <Select label={field.label} name={field.name} options={field.options} isRequired={field.required} disabled={field.readOnly} defaultValue={field.defaultValue} />
+      case 'row':
+        return <Row alignCenter={field.alignCenter} gapSize={field.gapSize}><Astro.self fields={field.fields} /></Row>
+      }
+    })
+}

package/dist/components/dashboard/islands/profile/APITokens.astro

@@ -0,0 +1,306 @@
+---
+import type { UserSessionData } from 'studiocms:auth/lib/types';
+import { FormattedDate } from 'studiocms:components';
+import { useTranslations } from 'studiocms:i18n';
+import { StudioCMSRoutes } from 'studiocms:lib';
+import studioCMS_SDK from 'studiocms:sdk';
+import { Button, Card, Center, Icon, Input, Modal } from 'studiocms:ui/components';
+
+interface Props {
+	userSession: UserSessionData;
+}
+
+const { userSession } = Astro.props;
+
+const { user } = userSession;
+
+if (!user) {
+	throw new Error('User not found');
+}
+
+const userTokens = await studioCMS_SDK.REST_API.tokens.get(user.id);
+
+const lang = 'en-us';
+const t = useTranslations(lang, '@studiocms/dashboard:profile');
+---
+<Card fullWidth class="api-tokens">
+    <div slot="header">
+        <h2>
+            <t-profile-tokens key="api-tokens-header">{t('api-tokens-header')}</t-profile-tokens>
+        </h2>
+    
+        <div class="form-header">
+            <Button 
+                type='submit' 
+                id="create-api-token"
+                variant='solid' 
+                color='primary'
+                size='sm'
+                >
+                <Icon slot="start-content" name="plus" width={24} height={24} />
+                <t-profile-tokens key="api-tokens-create">
+                    {t('api-tokens-create')}
+                </t-profile-tokens>
+            </Button> 
+        </div>
+    </div>
+    <div class="api-tokens-content">
+        <span class="description">
+            <t-profile-tokens key="api-tokens-description">{t('api-tokens-description')}</t-profile-tokens>
+        </span>
+
+        { userTokens.length > 0 ? userTokens.map((token) => (
+            <Card fullWidth class="token-list-item">
+                <div slot="header" class="token-list-item-header">
+                    <div class="token-list-item-header-row">
+                        <h4>
+                            <Icon name="key" width={24} height={24} />
+                            {token.description}
+                        </h4>
+                        <Button type="submit" variant="solid" color="danger" size="sm" data-token={token.id} data-user={user.id} disabled>
+                            <Icon slot="start-content" name="trash" width={24} height={24} />
+                            <t-profile-tokens key="api-tokens-delete-button">{t('api-tokens-delete-button')}</t-profile-tokens>
+                        </Button>
+                    </div>
+                </div>
+
+                <div class="token-list-item-content">
+                    <div class="token-list-item-content-row">
+                        <span class="created-at"><t-profile-tokens key="api-tokens-created">{t('api-tokens-created')}</t-profile-tokens> - <FormattedDate date={token.creationDate} /></span>
+                    </div>
+                </div>
+            </Card>
+        )) : (
+            <Card fullWidth class="token-list-item">
+                <Center>
+                    <p class="description">
+                        <t-profile-tokens key="api-tokens-no-tokens">{t('api-tokens-no-tokens')}</t-profile-tokens>
+                    </p>
+                </Center>
+            </Card>
+        ) }
+    </div>
+    
+</Card>
+<Modal
+  id='create-api-token-modal'
+  cancelButton={{ label: 'Cancel', color: 'default' }}
+  actionButton={{ label: 'Confirm', color: 'primary' }}
+  isForm
+>
+  <h2 slot='header'>
+    <t-profile-tokens key="api-tokens-modal-header">{t('api-tokens-modal-header')}</t-profile-tokens>
+  </h2>
+  <div class="modal-body">
+    <Input label="Description" name="description" type="text" isRequired />
+    <input type="hidden" name="user" value={user.id} />
+  </div>
+</Modal>
+
+<Modal id='create-token-response-modal'>
+  <h2 slot="header">
+    <t-profile-tokens key="api-tokens-modal-response-header">{t('api-tokens-modal-response-header')}</t-profile-tokens>
+  </h2>
+  <Center>
+    <div class="modal-body">
+        <span>
+            <t-profile-tokens key="api-tokens-modal-response-description">{t('api-tokens-modal-response-description')}</t-profile-tokens>
+        </span>
+      <code id="create-token-response-placeholder"></code>
+    </div>
+  </Center>
+</Modal>
+
+<div 
+    id="token-api-links" style="display: none;"
+    data-token_api={StudioCMSRoutes.endpointLinks.apiTokens}
+></div>
+
+<script>
+    import { 
+        $i18n,
+        baseTranslation,
+        makeTranslation,
+        updateElmLabel,
+    } from 'studiocms:i18n/client';
+
+    const currentPage = '@studiocms/dashboard:profile';
+
+    const i18n = $i18n(currentPage, baseTranslation[currentPage]);
+    
+    i18n.subscribe(comp => {
+        updateElmLabel('description', comp['api-tokens-modal-description']);
+    });
+
+    if (!customElements.get('t-profile-tokens')) {
+        customElements.define('t-profile-tokens', makeTranslation(currentPage, i18n));
+    }
+</script>
+
+<script>
+    import { ModalHelper, toast } from 'studiocms:ui/components';
+
+    const createAPITokenModal = new ModalHelper('create-api-token-modal', 'create-api-token');
+    const createTokenResponseModal = new ModalHelper('create-token-response-modal');
+    const deleteButtons = document.querySelectorAll('[data-token]') as NodeListOf<HTMLButtonElement>;
+
+    const tokenAPILinks = document.getElementById('token-api-links') as HTMLDivElement;
+
+    const tokenAPI = tokenAPILinks.dataset.token_api!;
+
+    createAPITokenModal.registerConfirmCallback(async (formData) => {
+        const description = formData?.get('description');
+        const user = formData?.get('user');
+
+        if (!description) {
+            toast({
+                title: 'Error',
+                description: 'Description is required',
+                type: 'danger',
+                duration: 5000
+            })
+            return;
+        }
+
+        if (!user) {
+            toast({
+                title: 'Error',
+                description: 'User ID not found',
+                type: 'danger',
+                duration: 5000
+            })
+            return;
+        }
+
+        const response = await fetch(tokenAPI, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                description,
+                user
+            })
+        });
+
+        const res = await response.json();
+
+        if (!response.ok) {
+            toast({
+                title: 'Error',
+                description: res.error,
+                type: 'danger',
+                duration: 5000
+            })
+            return;
+        }
+
+        createTokenResponseModal.show();
+        document.getElementById('create-token-response-placeholder')!.innerText = res.token;
+
+    })
+
+    deleteButtons.forEach((button) => {
+        button.addEventListener('click', async (event) => {
+            event.preventDefault();
+            const tokenID = button.getAttribute('data-token');
+            const userID = button.getAttribute('data-user');
+
+            const response = await fetch(tokenAPI, {
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    tokenID,
+                    userID
+                })
+            });
+
+            const res = await response.json();
+
+            if (!response.ok) {
+                toast({
+                    title: 'Error',
+                    description: res.error,
+                    type: 'danger',
+                    duration: 5000
+                })
+                return;
+            }
+
+            toast({
+                title: 'Success',
+                description: res.message,
+                type: 'success',
+                duration: 5000
+            })
+
+            setTimeout(() => {
+                window.location.reload();
+            }, 1000);
+        });
+    });
+</script>
+
+<style>
+    .api-tokens {
+        position: relative;
+    }
+
+    .form-header {
+        display: block;
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+    }
+
+    .api-tokens-content {
+        display: flex;
+        flex-direction: column;
+        gap: .5rem;
+
+        .description {
+            color: hsl(var(--text-muted));
+        }
+
+        .token-list-item {
+            display: flex;
+            flex-direction: column;
+            background-color: hsl(var(--background-step-2));
+
+            .token-list-item-header {
+                display: flex;
+                flex-direction: column;
+
+                .token-list-item-header-row {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+
+                    h4 {
+                        display: flex;
+                        align-items: center;
+                        gap: 0.5rem;
+                    }
+                }
+            }
+
+            .token-list-item-content {
+                display: flex;
+                flex-direction: column;
+
+                .token-list-item-content-row {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+
+                    .created-at {
+                        font-size: 0.75rem;
+                        color: hsl(var(--text-muted));
+                    }
+                }
+            }
+        }
+    }
+</style>