Implement primitives: avatar and buttons

Author: NoelDeMartin

src/primitives/components/avatar/Avatar.stories.ts

@@ -0,0 +1,23 @@
+import { html } from 'lit'
+import { defineAuthStoryRender } from '../../../storybook'
+
+import './Avatar'
+import { USER_OPTIONS } from '../../../storybook/stubs'
+
+const meta = {
+  title: 'Primitives/Avatar',
+  args: {
+    user: 'Alice',
+  },
+  argTypes: {
+    user: USER_OPTIONS.control,
+  }
+} as const
+
+const render = defineAuthStoryRender<typeof meta.argTypes>(() => html`<solid-avatar></solid-avatar>`)
+
+export const Primary = { render }
+export const Fallback = { render, args: { user: 'Bob' } }
+export const Guest = { render, args: { user: 'Guest' } }
+
+export default meta

src/primitives/components/avatar/Avatar.styles.css

@@ -0,0 +1,26 @@
+:host {
+    --size: 150px;
+
+    display: inline-flex;
+    overflow: hidden;
+    width: var(--size);
+    height: var(--size);
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+
+:host(:state(fallback)) {
+    background: var(--solid-color-gray-100);
+    justify-content: center;
+    align-items: center;
+
+    icon-lucide-circle-user {
+        color: var(--solid-color-gray-200);
+        width: 50%;
+        height: 50%;
+    }
+}

src/primitives/components/avatar/Avatar.ts

@@ -0,0 +1,34 @@
+import { html } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+import '~icons/lucide/circle-user'
+
+import styles from './Avatar.styles.css'
+
+import WebComponent from '../../lib/WebComponent'
+import { consume } from '@lit/context'
+import { authContext, DEFAULT_AUTH_CONTEXT, AuthContext } from '../../lib/auth/context'
+import commonStyles from '../../styles/common.styles.css'
+
+@customElement('solid-avatar')
+export default class Avatar extends WebComponent {
+  static styles = [commonStyles, styles]
+  static states = {
+    fallback: (component: Avatar) => !component.auth.account?.avatarUrl,
+  }
+
+  @state()
+  @consume({ context: authContext })
+  private auth: AuthContext = DEFAULT_AUTH_CONTEXT
+
+  protected render () {
+    if (!this.auth.account?.avatarUrl) {
+      return html`
+          <icon-lucide-circle-user></icon-lucide-circle-user>
+      `
+    }
+
+    return html`
+        <img src="${this.auth.account?.avatarUrl}" alt="" />
+    `
+  }
+}

src/primitives/components/avatar/index.ts

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

src/primitives/components/login-button/LoginButton.stories.ts

@@ -0,0 +1,34 @@
+import { html } from 'lit'
+import { defineStoryRender } from '../../../storybook'
+
+import './LoginButton'
+import '~icons/lucide/log-in'
+
+const meta = {
+  title: 'Primitives/LoginButton',
+} as const
+
+export const Primary = {
+  render: defineStoryRender(() => html`<solid-login-button></solid-login-button>`)
+}
+
+export const CustomLabel = {
+  render: defineStoryRender(() => html`
+    <solid-login-button>
+        Sign In
+        <icon-lucide-log-in style="width: 16px; height: 16px;"></icon-lucide-log-in>
+    </solid-login-button>
+  `)
+}
+
+export const CustomTrigger = {
+  render: defineStoryRender(() => html`
+    <solid-login-button>
+        <button slot="trigger" type="button">
+            Sign In
+        </button>
+    </solid-login-button>
+  `)
+}
+
+export default meta

src/primitives/components/login-button/LoginButton.ts

@@ -0,0 +1,35 @@
+import { html } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+import commonStyles from '../../styles/common.styles.css'
+
+import WebComponent from '../../lib/WebComponent'
+
+import { AuthContext, authContext, DEFAULT_AUTH_CONTEXT } from '../../lib/auth/context'
+import { consume } from '@lit/context'
+
+@customElement('solid-login-button')
+export default class LoginButton extends WebComponent {
+  static styles = commonStyles
+
+  @state()
+  @consume({ context: authContext })
+  private auth: AuthContext = DEFAULT_AUTH_CONTEXT
+
+  protected render () {
+    return html`
+      <slot name="trigger" @click=${this.onClick}>
+        <button type="button">
+            <slot>
+                Log In
+            </slot>
+        </button>
+      </slot>
+    `
+  }
+
+  private onClick (e: MouseEvent) {
+    e.preventDefault()
+
+    this.auth.login()
+  }
+}

src/primitives/components/login-button/index.ts

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

src/primitives/components/logout-button/LogoutButton.stories.ts

@@ -0,0 +1,34 @@
+import { html } from 'lit'
+import { defineStoryRender } from '../../../storybook'
+
+import './LogoutButton'
+import '~icons/lucide/log-out'
+
+const meta = {
+  title: 'Primitives/LogoutButton',
+} as const
+
+export const Primary = {
+  render: defineStoryRender(() => html`<solid-logout-button></solid-logout-button>`)
+}
+
+export const CustomLabel = {
+  render: defineStoryRender(() => html`
+    <solid-logout-button>
+        Sign Out
+        <icon-lucide-log-out style="width: 16px; height: 16px;"></icon-lucide-log-out>
+    </solid-logout-button>
+  `)
+}
+
+export const CustomTrigger = {
+  render: defineStoryRender(() => html`
+    <solid-logout-button>
+        <button slot="trigger" type="button">
+            Sign Out
+        </button>
+    </solid-logout-button>
+  `)
+}
+
+export default meta

src/primitives/components/logout-button/LogoutButton.ts

@@ -0,0 +1,35 @@
+import { html } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+import commonStyles from '../../styles/common.styles.css'
+
+import WebComponent from '../../lib/WebComponent'
+
+import { AuthContext, authContext, DEFAULT_AUTH_CONTEXT } from '../../lib/auth/context'
+import { consume } from '@lit/context'
+
+@customElement('solid-logout-button')
+export default class LogoutButton extends WebComponent {
+  static styles = commonStyles
+
+  @state()
+  @consume({ context: authContext })
+  private auth: AuthContext = DEFAULT_AUTH_CONTEXT
+
+  protected render () {
+    return html`
+      <slot name="trigger" @click=${this.onClick}>
+        <button type="button">
+            <slot>
+                Log Out
+            </slot>
+        </button>
+      </slot>
+    `
+  }
+
+  private onClick (e: MouseEvent) {
+    e.preventDefault()
+
+    this.auth.logout()
+  }
+}

src/primitives/components/logout-button/index.ts

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