@kompasid/lit-web-components 0.6.7 → 0.7.0

package/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.ts

@@ -0,0 +1,230 @@
+import { html, css, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { format } from 'date-fns'
+import { id } from 'date-fns/locale/id'
+import { TWStyles } from '../../../tailwind/tailwind.js'
+
+interface PostTag {
+  slug: string
+}
+
+interface ListItem {
+  title: string
+  isAnalisis?: boolean
+  isEksklusif?: boolean
+  isFreemium?: boolean
+  permalink: string
+  publishedDate?: string
+  postTag?: PostTag[]
+}
+
+@customElement('kompasid-widget-recirculations-list')
+export class KompasWidgetRecirculationsList extends LitElement {
+  @property({ type: String }) widgetTitle = ''
+  @property({ type: Array }) articleList: ListItem[] = []
+  @property({ type: String }) accessToken = ''
+  @property({ type: String }) apiSlug = ''
+
+  static styles = [
+    css`
+      :host {
+        font-family: 'PT Sans', sans-serif;
+      }
+      .chip {
+        align-items: center;
+        border-radius: 0.25rem;
+        display: flex;
+        font-family: 'PT Sans', sans-serif;
+        font-size: 0.75rem;
+        font-weight: bold;
+        height: 1.5rem;
+        justify-content: center;
+        line-height: 1rem;
+        margin-bottom: 0.25rem;
+        padding: 0.375rem 0.5rem;
+      }
+    `,
+    TWStyles,
+  ]
+
+  async connectedCallback() {
+    super.connectedCallback()
+    try {
+      await this.fetchAccessToken()
+      await this.fetchArticles()
+    } catch (error) {
+      this.handleFetchError(error)
+    }
+  }
+
+  async fetchAccessToken() {
+    const response = await fetch(
+      'https://api.kompas.id/account/api/v1/login/guest',
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          email: 'anonynous.user@kompas.id',
+        }),
+      }
+    )
+
+    const result = await response.json()
+
+    if (result?.data?.accessToken) {
+      this.accessToken = result.data.accessToken
+    } else {
+      throw new Error('Token akses tidak tersedia dalam respons')
+    }
+  }
+
+  async fetchArticles() {
+    if (!this.accessToken) {
+      throw new Error('Token akses tidak tersedia')
+    }
+
+    const endpoint = `https://cds.kompas.id/api/v1/article/${this.apiSlug}`
+
+    const response = await fetch(endpoint, {
+      headers: {
+        Authorization: `Bearer ${this.accessToken}`,
+        'Content-Type': 'application/json',
+      },
+    })
+
+    const result = await response.json()
+
+    if (result?.result) {
+      this.articleList = result.result.map(
+        (article: {
+          postTag?: never[] | undefined
+          isFreemium?: false | undefined
+          title: any
+          permalink: any
+          publishedDate: any
+        }) => {
+          const {
+            postTag = [],
+            isFreemium = false,
+            title,
+            permalink,
+            publishedDate,
+          } = article
+
+          const isAnalisis = postTag.some(
+            (tag: { slug: string }) => tag.slug === 'analisis'
+          )
+          const isEksklusif = postTag.some(
+            (tag: { slug: string }) => tag.slug === 'eksklusif'
+          )
+
+          return {
+            isAnalisis,
+            isEksklusif,
+            isFreemium,
+            title,
+            permalink,
+            publishedDate,
+          }
+        }
+      )
+    } else {
+      throw new Error('Data artikel populer tidak ditemukan')
+    }
+  }
+
+  formatDate(date: string) {
+    return format(new Date(date), "dd MMMM yyyy' · 'HH:mm' WIB", { locale: id })
+  }
+
+  handleFetchError(error: unknown) {
+    const errorMessage =
+      error instanceof Error ? error.message : 'Kesalahan tidak diketahui'
+    alert(`Terjadi kesalahan: ${errorMessage}`)
+  }
+
+  renderChips(item: ListItem) {
+    const chips = []
+
+    if (item.isAnalisis) {
+      chips.push(
+        html`
+          <div class="flex">
+            <div class="chip bg-orange-100 text-orange-500">Analisis</div>
+          </div>
+        `
+      )
+    }
+
+    if (item.isEksklusif) {
+      chips.push(
+        html`
+          <div class="flex">
+            <div class="chip bg-grey-600 text-white">
+              <img
+                src="https://cdn-www.kompas.id/assets/img/icons/kompas-icon-small.svg"
+                alt="Kompas Icon"
+                style="width: 16px; height: 16px; margin-right: 4px;"
+              />
+              Eksklusif
+            </div>
+          </div>
+        `
+      )
+    }
+
+    if (item.isFreemium) {
+      chips.push(
+        html`
+          <div class="flex">
+            <div class="chip bg-blue-100 text-brand-1">Bebas Akses</div>
+          </div>
+        `
+      )
+    }
+
+    return chips
+  }
+
+  render() {
+    return html`
+      <div>
+        <div class="mb-6">
+          <h5 class="capitalize font-bold text-grey-600 font-sans">
+            ${this.widgetTitle}
+          </h5>
+        </div>
+
+        <ul class="flex flex-col">
+          ${this.articleList.slice(0, 5).map(
+            item =>
+              html`
+                <li class="flex flex-col items-start mb-3">
+                  <div class="flex w-full">
+                    <div class="flex flex-col w-full">
+                      ${this.renderChips(item)}
+                      <a
+                        href="${item.permalink}"
+                        class="font-bold font-sans hover:underline leading-tight text-base text-grey-600"
+                      >
+                        ${item.title}
+                      </a>
+                      <div
+                        class="flex w-full flex-row items-center leading-normal justify-between text-sm text-grey-500 font-sans pt-2"
+                      >
+                        ${item.publishedDate
+                          ? this.formatDate(item.publishedDate)
+                          : 'Tanggal tidak tersedia'}
+                      </div>
+                    </div>
+                  </div>
+                </li>
+              `
+          )}
+        </ul>
+      </div>
+    `
+  }
+}

package/src/components/kompasid-widget-recirculations-list/readme.md

@@ -0,0 +1,27 @@
+# kompasid-widget-recirculations-list
+
+Komponen ini adalah komponen web berbasis LitElement yang digunakan untuk menampilkan daftar aliran artikel dari Kompas.id.
+
+### Element
+
+```javascript
+<kompasid-widget-recirculations-list
+  widgetTitle="Terpopuler"
+  apiSlug="popular-article"
+></kompasid-widget-recirculations-list>
+```
+
+## Properties
+
+| Property      | Attribute    | Description                                       | Tipe     | Default | Content |
+| -------------| -------------| ----------------------------------------------- | -------- | ------- | ---------------- |
+| `widgetTitle`| `widgetTitle`| Judul untuk widget.                             | `string` | `''`    | `"Terbaru" \| "Terpopuler"` |
+| `apiSlug`    | `apiSlug`    | Slug yang digunakan untuk mengidentifikasi endpoint API untuk mengambil daftar artikel. | `string` | `''`    | `"list" \| "popular-article"` |
+
+### Used by
+
+- [kompasid-widget-recirculations-list](../kompasid-widget-recirculations-list)
+
+## Contributors
+
+*Dokumentasi ini dibuat oleh tim front-end Kompas.id.*

package/src/index.ts

@@ -1,3 +1,5 @@
+export { KompasWidgetRecirculationsDefault } from './components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js'
+export { KompasWidgetRecirculationsList } from './components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.js'
 export { KompasPaywall } from './components/kompasid-paywall/KompasPaywall.js'
 export { KompasFooter } from './components/kompasid-footer/KompasFooter.js'
 export { KompasPaywallVideo } from './components/kompasid-paywall-video/KompasPaywallVideo.js'