Implement primitive components + auth interface

Author: NoelDeMartin

.storybook/preview.js

@@ -1,4 +1,5 @@
 import '../src/design-system/styles/variables.css'
+import '../src/primitives/styles/variables.css'
 
 // For backward compatibility, provide rdflib and solid-logic as globals
 import * as rdflib from 'rdflib'

src/primitives/components/guard/Guard.stories.ts

@@ -0,0 +1,27 @@
+import { html } from 'lit'
+import { defineAuthStoryRender } from '../../../storybook'
+
+import './Guard'
+import { USER_OPTIONS } from '../../../storybook/stubs'
+
+const meta = {
+  title: 'Primitives/Guard',
+  args: {
+    user: 'Alice',
+  },
+  argTypes: {
+    user: USER_OPTIONS.control,
+  }
+} as const
+
+const render = defineAuthStoryRender<typeof meta.argTypes>(() => html`
+    <solid-guard>
+        <span slot="guest">Guest content</span>
+        <span>Logged in content</span>
+    </solid-guard>
+`)
+
+export const Primary = { render }
+export const Guest = { render, args: { user: 'Guest' } }
+
+export default meta

src/primitives/components/guard/Guard.ts

@@ -0,0 +1,25 @@
+import { html } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+
+import WebComponent from '../../lib/WebComponent'
+import { consume } from '@lit/context'
+import { authContext, DEFAULT_AUTH_CONTEXT, AuthContext } from '../../lib/auth/context'
+
+@customElement('solid-guard')
+export default class Guard extends WebComponent {
+  @state()
+  @consume({ context: authContext })
+  private auth: AuthContext = DEFAULT_AUTH_CONTEXT
+
+  protected render () {
+    if (!this.auth.account) {
+      return html`
+        <slot name="guest"></slot>
+      `
+    }
+
+    return html`
+      <slot></slot>
+    `
+  }
+}

src/primitives/components/guard/index.ts

@@ -0,0 +1,4 @@
+import Guard from './Guard'
+
+export { Guard }
+export default Guard

src/primitives/lib/WebComponent.ts

@@ -0,0 +1,29 @@
+import { html, LitElement } from 'lit'
+
+export default abstract class WebComponent extends LitElement {
+  static states?: Record<string, Function>
+
+  protected internals = this.attachInternals()
+
+  protected willUpdate (changedProperties: Map<string, any>) {
+    super.updated(changedProperties)
+
+    for (const [state, condition] of Object.entries(this.static().states ?? {})) {
+      const matches = condition(this)
+
+      if (matches && !this.internals.states.has(state)) {
+        this.internals.states.add(state)
+      } else if (!matches && this.internals.states.has(state)) {
+        this.internals.states.delete(state)
+      }
+    }
+  }
+
+  protected render () {
+    return html`<slot></slot>`
+  }
+
+  private static (): typeof WebComponent {
+    return this.constructor as typeof WebComponent
+  }
+}

src/primitives/lib/auth/Account.ts

@@ -0,0 +1,9 @@
+export default class Account {
+  public readonly webId: string
+  public readonly avatarUrl?: string
+
+  constructor (webId: string, avatarUrl?: string) {
+    this.webId = webId
+    this.avatarUrl = avatarUrl
+  }
+}

src/primitives/lib/auth/NoopAuth.ts

@@ -0,0 +1,20 @@
+import { AuthContext } from './context'
+import Account from './Account'
+
+export default class NoopAuth implements AuthContext {
+  public get account (): Account | null {
+    throw new Error('Can\'t use auth, missing context provider')
+  }
+
+  public login (): void {
+    throw new Error('Can\'t use auth, missing context provider')
+  }
+
+  public signup (): void {
+    throw new Error('Can\'t use auth, missing context provider')
+  }
+
+  public logout (): void {
+    throw new Error('Can\'t use auth, missing context provider')
+  }
+}

src/primitives/lib/auth/context.ts

@@ -0,0 +1,13 @@
+import NoopAuth from './NoopAuth'
+import { createContext } from '@lit/context'
+import Account from './Account'
+
+export interface AuthContext {
+  account: Account | null;
+  login(): unknown;
+  signup(): unknown;
+  logout(): unknown;
+}
+
+export const DEFAULT_AUTH_CONTEXT = new NoopAuth()
+export const authContext = createContext<AuthContext>(Symbol('auth'))

src/primitives/styles/common.styles.css

@@ -0,0 +1,17 @@
+@import 'tailwindcss/preflight.css';
+
+button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px 20px;
+    border-radius: 5px;
+    gap: 5px;
+    background: var(--solid-color-primary);
+    color: var(--solid-color-primary-foreground);
+
+    &:hover {
+        background: var(--solid-color-primary-hover);
+        border-color: var(--solid-color-primary-hover);
+    }
+}

src/primitives/styles/variables.css

@@ -0,0 +1,7 @@
+:root {
+    --solid-color-gray-100: #f8fafc;
+    --solid-color-gray-200: #cbd5e1;
+    --solid-color-primary: #7c4dff;
+    --solid-color-primary-foreground: #ffffff;
+    --solid-color-primary-hover: #6a3de8;
+}