@puredesktop/create-app 2.1.7 → 2.1.9

package/template/src/components/StarterWorkspace.tsx

@@ -0,0 +1,154 @@
+import styled from 'styled-components'
+import { Heading } from '@puredesktop/puredesktop-ui-bridge/components/common/typography/Heading'
+import { Text } from '@puredesktop/puredesktop-ui-bridge/components/common/typography/Text'
+import {
+  readConfiguredSettingCount,
+  starterMilestones,
+} from '../lib/starterWorkspace'
+import type { AppSettings } from '../types'
+
+const Root = styled.div`
+  display: flex;
+  min-height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: var(--platform-spacing-xxl);
+  color: var(--platform-colors-text);
+  background:
+    linear-gradient(
+      135deg,
+      color-mix(in srgb, var(--platform-colors-accent) 6%, transparent),
+      transparent 42%
+    ),
+    var(--platform-colors-bg);
+`
+
+const Panel = styled.section`
+  display: grid;
+  width: min(760px, 100%);
+  gap: var(--platform-spacing-xl);
+`
+
+const Header = styled.header`
+  display: grid;
+  gap: var(--platform-spacing-sm);
+`
+
+const MilestoneGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--platform-spacing-md);
+
+  @media (max-width: 720px) {
+    grid-template-columns: 1fr;
+  }
+`
+
+const Milestone = styled.article`
+  display: grid;
+  gap: var(--platform-spacing-sm);
+  min-width: 0;
+  padding: var(--platform-spacing-lg);
+  border: 1px solid var(--platform-colors-border);
+  background: var(--platform-colors-surface);
+  box-shadow: var(--platform-shadow-sm);
+`
+
+const PulseTrack = styled.div`
+  position: relative;
+  overflow: hidden;
+  height: 3px;
+  background: var(--platform-colors-border);
+`
+
+const Pulse = styled.div`
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 44%;
+  background: var(--platform-colors-accent);
+  animation: starter-pulse 1600ms ease-in-out infinite;
+
+  @keyframes starter-pulse {
+    0% {
+      transform: translateX(-100%);
+      opacity: 0.35;
+    }
+
+    45%,
+    60% {
+      opacity: 1;
+    }
+
+    100% {
+      transform: translateX(230%);
+      opacity: 0.35;
+    }
+  }
+`
+
+const MetaRow = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--platform-spacing-sm);
+`
+
+const MetaPill = styled.span`
+  padding: 4px 8px;
+  border: 1px solid var(--platform-colors-border);
+  background: var(--platform-colors-surface);
+  color: var(--platform-colors-text-secondary);
+  font-size: var(--platform-typography-font-size-xs);
+  font-weight: var(--platform-typography-font-weight-medium);
+`
+
+interface StarterWorkspaceProps {
+  appName: string
+  settings: AppSettings
+}
+
+export function StarterWorkspace({
+  appName,
+  settings,
+}: StarterWorkspaceProps): React.ReactElement {
+  const settingCount = readConfiguredSettingCount(settings)
+
+  return (
+    <Root>
+      <Panel aria-label={`${appName} starter workspace`}>
+        <Header>
+          <Text size="sm" tone="secondary">
+            PureDesktop app workspace
+          </Text>
+          <Heading level={1}>{appName}</Heading>
+          <Text tone="secondary">
+            This workspace is ready. The first build step will replace this
+            starter screen with the product experience.
+          </Text>
+        </Header>
+
+        <MilestoneGrid>
+          {starterMilestones.map(milestone => (
+            <Milestone key={milestone.id}>
+              <Text size="sm" weight="medium">
+                {milestone.title}
+              </Text>
+              <Text size="sm" tone="secondary">
+                {milestone.detail}
+              </Text>
+              <PulseTrack aria-hidden="true">
+                <Pulse />
+              </PulseTrack>
+            </Milestone>
+          ))}
+        </MilestoneGrid>
+
+        <MetaRow>
+          <MetaPill>{settingCount} setting key(s)</MetaPill>
+          <MetaPill>Theme active</MetaPill>
+          <MetaPill>Shell connected</MetaPill>
+        </MetaRow>
+      </Panel>
+    </Root>
+  )
+}

package/template/src/constants.ts

@@ -1 +1,2 @@
-export const APP_SLUG = '{{APP_SLUG}}'
+export const APP_SLUG = '{{APP_SLUG}}'
+export const APP_TITLE = '{{APP_TITLE}}'

package/template/src/lib/starterWorkspace.ts

@@ -0,0 +1,29 @@
+import type { AppSettings } from '../types'
+
+export interface StarterMilestone {
+  detail: string
+  id: string
+  title: string
+}
+
+export const starterMilestones: StarterMilestone[] = [
+  {
+    detail: 'The starter screen is temporary and ready to be replaced by product UI.',
+    id: 'boot',
+    title: 'Workspace ready',
+  },
+  {
+    detail: 'PureDesktop styling is loaded so early screens match the shell.',
+    id: 'composition',
+    title: 'Theme active',
+  },
+  {
+    detail: 'Settings and shell capabilities are available through the app bridge.',
+    id: 'domain',
+    title: 'Shell connected',
+  },
+]
+
+export function readConfiguredSettingCount(settings: AppSettings): number {
+  return Object.keys(settings).length
+}

package/template/vite.config.js

@@ -16,13 +16,16 @@ function devServerFromManifest(metaUrl) {
   }
 }
 
-export default defineConfig({
-  plugins: [
-    react({
-      plugins: [
-        ['@swc/plugin-styled-components', { displayName: true, fileName: true }],
-      ],
-    }),
-  ],
-  server: devServerFromManifest(import.meta.url),
-})
+export default defineConfig({
+  plugins: [
+    react({
+      plugins: [
+        ['@swc/plugin-styled-components', { displayName: true, fileName: true }],
+      ],
+    }),
+  ],
+  optimizeDeps: {
+    include: ['react-dom'],
+  },
+  server: devServerFromManifest(import.meta.url),
+})