@kompasid/lit-web-components 0.8.29 → 0.9.0

package/src/components/kompasid-menu-sidebar/KompasMenuSideBar.ts

@@ -0,0 +1,550 @@
+/* eslint-disable lit-a11y/click-events-have-key-events */
+import { html, css, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
+import { TWStyles } from '../../../tailwind/tailwind.js'
+import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'
+import { decodeSpecialChars } from '../../utils/decodeSpecialChars.js'
+import { timedContent } from '../../utils/timedContent.js'
+
+interface DataExternalLink {
+  external?: boolean
+  gtmClass?: string
+  icon: object | null
+  iconify: string | null
+  isNew: boolean
+  name: string
+  url: string
+}
+
+interface dataType {
+  href: string
+  external?: boolean
+  icon: object | null
+  iconify: string | null
+  name: string
+  slug: string
+  redDot: [
+    {
+      start: string
+      end: string
+    }
+  ]
+  children: [
+    {
+      href: string
+      external: boolean
+      icon: string
+      iconify: string | null
+      name: string
+      slug: string
+      redDot: [
+        {
+          start: string
+          end: string
+        }
+      ]
+    }
+  ]
+}
+interface DataSideBarLink {
+  feature: dataType[]
+  category: dataType[]
+}
+
+@customElement('kompasid-menu-side-bar')
+export class KompasMenuSideBar extends LitElement {
+  static styles = [
+    css`
+      .slide-side-enter-active,
+      .slide-side-leave-active {
+        transition: all 0.3s ease-out;
+      }
+      .slide-side-enter,
+      .slide-side-leave-to {
+        transform: translateX(-100%);
+      }
+      /* end: transisi buat sidebar */
+      .nuxt-link-exact-active {
+        @apply text-brand-1;
+      }
+      .menu-menu-sidebar {
+        z-index: 99999;
+      }
+      /* Force scrollbar to always show (for debugging) */
+      .menu-menu-sidebar::-webkit-scrollbar {
+        width: 4px;
+      }
+
+      .menu-menu-sidebar::-webkit-scrollbar-track {
+        background: white;
+      }
+
+      .menu-menu-sidebar::-webkit-scrollbar-thumb {
+        background-color: #00557d; /* Replace with your brand color */
+        border-radius: 8px;
+      }
+
+      .menu-menu-sidebar::-webkit-scrollbar-button,
+      .menu-menu-sidebar::-webkit-scrollbar-corner {
+        background-color: white;
+      }
+    `,
+    TWStyles,
+  ]
+  @property({ type: Array }) dataExternal: DataExternalLink[] = []
+  // @property({ type: Array }) dataSidebar: DataSideBarLink[] = []
+
+  async connectedCallback() {
+    super.connectedCallback()
+    try {
+      await this.fetchExternal()
+    } catch (error) {
+      this.handleFetchError(error)
+    }
+  }
+  handleFetchError(error: unknown) {
+    const errorMessage =
+      error instanceof Error ? error.message : 'Kesalahan tidak diketahui'
+    alert(`Terjadi kesalahan: ${errorMessage}`)
+  }
+
+  dataSidebar: DataSideBarLink = {
+    feature: [],
+    category: [],
+  }
+  async fetchExternal() {
+    // External
+    const endpointExternal = `https://cdn-www.kompas.id/assets/json/ApiMenuExternalLink.json`
+    const response = await fetch(endpointExternal, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+    const resultExternal = await response.json()
+    // eslint-disable-next-line no-undef
+    if (!resultExternal || !Array.isArray(resultExternal)) {
+      console.error(
+        'Error: resultExternal.result is undefined or not an array',
+        resultExternal
+      )
+      this.dataExternal = [] // Ensure dataExternal is an empty array instead of undefined
+    } else {
+      this.dataExternal = resultExternal.map(
+        (externalLink: Partial<DataExternalLink>) => ({
+          external: externalLink.external ?? false,
+          gtmClass: externalLink.gtmClass ?? '',
+          icon: externalLink.icon ?? null,
+          iconify: externalLink.iconify ?? null,
+          isNew: externalLink.isNew ?? false,
+          name: externalLink.name ?? '',
+          url: externalLink.url ?? '',
+        })
+      )
+    }
+    // Sidebar
+    const endpointSidebar = `https://cdn-www.kompas.id/assets/json/ApiMenuSideV2.json`
+    const responseSidebar = await fetch(endpointSidebar, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+    const resultSidebar = await responseSidebar.json()
+    // Validate the structure of the response
+    if (!resultSidebar || typeof resultSidebar !== 'object') {
+      console.error('Invalid response format:', resultSidebar)
+      return
+    }
+
+    // Convert object to an array
+    const sidebarArray = Object.values(resultSidebar)
+    const [featureArray, categoryArray] = sidebarArray as [any[], any[]]
+    const features: dataType[] =
+      featureArray?.map((item: any) => ({
+        href: item?.href ?? '',
+        external: item?.external ?? false,
+        icon: item?.icon ?? null,
+        iconify: item?.iconify ?? null,
+        name: item?.name ?? '',
+        slug: item?.slug ?? '',
+        redDot: [
+          {
+            start: item?.redDot?.start ?? '',
+            end: item?.redDot?.end ?? '',
+          },
+        ],
+        children: Array.isArray(item?.children)
+          ? item.children.map((child: any) => ({
+              href: child?.href ?? '',
+              external: child?.external ?? false,
+              icon: child?.icon ?? '',
+              iconify: child?.iconify ?? '',
+              name: child?.name ?? '',
+              slug: child?.slug ?? '',
+              redDot: [
+                {
+                  start: child?.redDot?.start ?? '',
+                  end: child?.redDot?.end ?? '',
+                },
+              ],
+            }))
+          : [],
+      })) ?? []
+
+    // Map category data
+    const categories: dataType[] =
+      categoryArray?.map((item: any) => ({
+        href: item?.href ?? '',
+        external: item?.external ?? false,
+        icon: item?.icon ?? null,
+        iconify: item?.iconify ?? null,
+        name: item?.name ?? '',
+        slug: item?.slug ?? '',
+        redDot: [
+          {
+            start: item?.redDot?.start ?? '',
+            end: item?.redDot?.end ?? '',
+          },
+        ],
+        children: Array.isArray(item?.children)
+          ? item.children.map((child: any) => ({
+              href: child?.href ?? '',
+              external: child?.external ?? false,
+              icon: child?.icon ?? '',
+              iconify: child?.iconify ?? '',
+              name: child?.name ?? '',
+              slug: child?.slug ?? '',
+              redDot: [
+                {
+                  start: child?.redDot?.start ?? '',
+                  end: child?.redDot?.end ?? '',
+                },
+              ],
+            }))
+          : [],
+      })) ?? []
+    this.dataSidebar = { feature: features, category: categories }
+    this.requestUpdate()
+  }
+
+  renderChips() {
+    const chips = []
+    chips.push(
+      html`
+        <div class="flex">
+          <div
+            class="py-1 px-2 rounded text-xs"
+            style="position: absolute; top: -22px; right: -24px; display: inline-flex; background-color:#D71920;"
+          >
+            <span class="font-normal text-white capitalize">Baru</span>
+          </div>
+        </div>
+      `
+    )
+    return chips
+  }
+
+  hasChildren(item: any): boolean {
+    return Array.isArray(item?.children) && item.children.length > 0
+  }
+
+  rubricClicked(item: { name: string; href?: string }, event?: Event): void {
+    if (event) {
+      event.stopPropagation() // Prevent parent click event
+    }
+    if (item.href) {
+      window.location.href = item.href
+    }
+
+    // add data layer here
+  }
+
+  @state()
+  private expandedSlug: string | null = null
+  private toggleChildren(item: any) {
+    this.expandedSlug = this.expandedSlug === item.slug ? null : item.slug
+  }
+
+  @state()
+  private showNavBar: boolean = false
+
+  toggleNavSidebar = (e: Event) => {
+    e.stopPropagation() // prevent bubbling
+    this.showNavBar = !this.showNavBar
+  }
+
+  render() {
+    return html`
+      <!-- Button Menu -->
+      <div
+        class="w-fit flex items-center justify-center cursor-pointer relative"
+        @click=${this.toggleNavSidebar}
+      >
+        <div class="h-4 inline-flex text-brand-1">
+          ${unsafeSVG(getFontAwesomeIcon('fas', 'bars'))}
+        </div>
+        <span
+          class="font-sans hidden sm:inline ml-2 tracking-wide text-brand-1 font-bold"
+          >Menu</span
+        >
+      </div>
+      <!-- Side Menu -->
+      <nav
+        @click=${this.toggleNavSidebar}
+        class=${this.showNavBar
+          ? 'fixed left-0 top-0 w-screen z-[100]'
+          : 'hidden'}
+      >
+        <div
+          ref="toggle-nav-sidebar"
+          class="bg-white h-screen menu-menu-sidebar overflow-y-auto pb-20 pt-0 shadow-lg"
+          style="width: 312px;"
+        >
+          <div
+            class="bg-[#e1f0ff] flex flex-col items-center justify-center mb-6 w-full"
+          >
+            <div
+              ref="logo-kompas"
+              class="flex items-center justify-between px-4 py-6 w-full"
+            >
+              <a href="/" class="flex h-9 w-9">
+                <img
+                  src="https://cdn-www.kompas.id/assets/img/icons/kompas-icon.svg"
+                  alt="Kompas.id"
+                  scale="0"
+                  class="block w-full"
+                />
+              </a>
+              <span
+                class="bg-[#93c8fd] cursor-pointer flex h-10 items-center justify-center rounded text-base w-10 p-4"
+                @click=${this.toggleNavSidebar}
+              >
+                ${unsafeSVG(getFontAwesomeIcon('fa', 'times'))}
+              </span>
+            </div>
+            <div class="flex flex-wrap px-4 w-full">
+              ${this.dataExternal.map(
+                item => html`
+                  <a href="${item.url}" class="block w-1/2 no-underline">
+                    <div class="cursor-pointer flex items-center pb-6 w-full">
+                      <div class="flex mr-2">
+                        ${item.icon &&
+                        Array.isArray(item.icon) &&
+                        item.icon.length >= 2
+                          ? unsafeSVG(
+                              getFontAwesomeIcon(item.icon[0], item.icon[1])
+                            )
+                          : ''}
+                      </div>
+                      <span class="font-sans relative text-sm text-brand-1">
+                        ${item.name} ${item.isNew ? this.renderChips() : ''}
+                      </span>
+                    </div>
+                  </a>
+                `
+              )}
+            </div>
+          </div>
+          <!-- feature -->
+          <div class="flex">
+            <div class="flex justify-between flex-col">
+              ${this.dataSidebar.feature.map(
+                item => html`
+                  <div class="w-full font-sans">
+                    <!-- Parent item -->
+                    <div
+                      class="flex items-center justify-between px-4 text-sm font-medium text-gray-700 transition-all cursor-pointer"
+                      @click=${(e: Event) => this.rubricClicked(item, e)}
+                    >
+                      <div
+                        class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center"
+                      >
+                        <div class="flex items-center space-x-3">
+                          <span
+                            class="text-xl text-brand-1 w-8 h-8 flex items-center"
+                          >
+                            ${item.icon &&
+                            Array.isArray(item.icon) &&
+                            item.icon.length >= 2
+                              ? unsafeSVG(
+                                  getFontAwesomeIcon(item.icon[0], item.icon[1])
+                                )
+                              : ''}
+                          </span>
+                          <span class="font-bold relative text-[#333] w-full"
+                            >${decodeSpecialChars(item.name)}</span
+                          >
+                          ${timedContent(
+                            item.redDot[0].start,
+                            item.redDot[0].end
+                          )
+                            ? html`<span
+                                class="bg-orange-600 h-2 relative rounded-full w-2 -top-[12px]"
+                              ></span>`
+                            : ''}
+                        </div>
+                      </div>
+
+                      <!-- Toggle chevron -->
+                      ${this.hasChildren(item)
+                        ? html`
+                            <span
+                              class="text-xs bg-[#e1f0ff] flex justify-center items-center rounded my-1 p-4 w-10 h-10 cursor-pointer"
+                              @click=${(e: Event) => {
+                                e.stopPropagation() // Prevents click from bubbling to parent
+                                this.toggleChildren(item)
+                              }}
+                            >
+                              ${this.expandedSlug === item.slug
+                                ? unsafeSVG(
+                                    getFontAwesomeIcon('fas', 'chevron-up')
+                                  )
+                                : unsafeSVG(
+                                    getFontAwesomeIcon('fas', 'chevron-down')
+                                  )}
+                            </span>
+                          `
+                        : null}
+                    </div>
+
+                    <!-- Children items -->
+                    ${this.hasChildren(item) && this.expandedSlug === item.slug
+                      ? html`
+                          <div class="pl-14 pt-1 pb-2 space-y-1">
+                            ${item.children.map(
+                              child => html`
+                                <div
+                                  class="flex items-center text-sm text-gray-600 px-4 cursor-pointer transition-all"
+                                  @click=${() => this.rubricClicked(child)}
+                                >
+                                  <div
+                                    class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-11"
+                                  >
+                                    ${decodeSpecialChars(child.name)}
+                                    ${timedContent(
+                                      child.redDot[0].start,
+                                      child.redDot[0].end
+                                    )
+                                      ? html`<span
+                                          class="bg-orange-600 h-2 relative rounded-full w-2 -top-[12px]"
+                                        ></span>`
+                                      : ''}
+                                    <div></div>
+                                  </div>
+                                </div>
+                              `
+                            )}
+                          </div>
+                        `
+                      : ''}
+                  </div>
+                `
+              )}
+            </div>
+          </div>
+          <div class="border-b border-[#DDD] m-6 "></div>
+          <!-- category -->
+          <div class="flex">
+            <div class="w-full flex justify-between flex-col">
+              ${this.dataSidebar.category.map(
+                item => html`
+                  <div class="w-full font-sans">
+                    <!-- Parent item -->
+                    <div
+                      class="flex items-center justify-between text-sm font-medium text-gray-700 px-4 transition-all cursor-pointer"
+                      @click=${(e: Event) => this.rubricClicked(item, e)}
+                    >
+                      <div
+                        class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center"
+                      >
+                        <div class="flex items-center space-x-3">
+                          <span
+                            class="text-xl text-brand-1 w-8 h-8 flex items-center"
+                          >
+                            ${item.icon &&
+                            Array.isArray(item.icon) &&
+                            item.icon.length >= 2
+                              ? unsafeSVG(
+                                  getFontAwesomeIcon(item.icon[0], item.icon[1])
+                                )
+                              : ''}
+                          </span>
+                          <span
+                            class="font-bold ${item.name === 'Beranda'
+                              ? 'text-[#00559a]'
+                              : 'text-[#333] w-full'}"
+                            >${decodeSpecialChars(item.name)}</span
+                          >
+
+                          ${timedContent(
+                            item.redDot[0].start,
+                            item.redDot[0].end
+                          )
+                            ? html`<span
+                                class="bg-orange-600 h-2 relative rounded-full w-2 -top-[12px]"
+                              ></span>`
+                            : ''}
+                        </div>
+                      </div>
+
+                      <!-- Toggle chevron -->
+                      ${this.hasChildren(item)
+                        ? html`
+                            <span
+                              class="text-xs bg-[#e1f0ff] flex justify-center items-center rounded my-1 p-4 w-10 h-10 cursor-pointer"
+                              @click=${(e: Event) => {
+                                e.stopPropagation() // Prevents click from bubbling to parent
+                                this.toggleChildren(item)
+                              }}
+                            >
+                              ${this.expandedSlug === item.slug
+                                ? unsafeSVG(
+                                    getFontAwesomeIcon('fas', 'chevron-up')
+                                  )
+                                : unsafeSVG(
+                                    getFontAwesomeIcon('fas', 'chevron-down')
+                                  )}
+                            </span>
+                          `
+                        : null}
+                    </div>
+
+                    <!-- Children items -->
+                    ${this.hasChildren(item) && this.expandedSlug === item.slug
+                      ? html`
+                          <div class="pt-1 pb-2 space-y-1">
+                            ${item.children.map(
+                              child => html`
+                                <div
+                                  class="flex items-center text-sm text-gray-600 px-4 cursor-pointer transition-all"
+                                  @click=${() => this.rubricClicked(child)}
+                                >
+                                  <div
+                                    class="w-[216px] hover:bg-[#f3f4f6] rounded h-12 flex items-center pl-11"
+                                  >
+                                    ${decodeSpecialChars(child.name)}
+                                    ${timedContent(
+                                      child.redDot[0].start,
+                                      child.redDot[0].end
+                                    )
+                                      ? html`<span
+                                          class="bg-orange-600 h-2 relative rounded-full w-2 -top-[12px]"
+                                        ></span>`
+                                      : ''}
+                                  </div>
+                                </div>
+                              `
+                            )}
+                          </div>
+                        `
+                      : ''}
+                  </div>
+                `
+              )}
+            </div>
+          </div>
+        </div>
+      </nav>
+    `
+  }
+}

package/src/utils/decodeSpecialChars.ts

@@ -0,0 +1,23 @@
+export const decodeSpecialChars = (str: string) => {
+  if (!str) return str
+
+  const charList: { regex: RegExp; replace: string }[] = [
+    { regex: /&/g, replace: '&' },
+    { regex: /&/g, replace: '&' },
+    { regex: /“/g, replace: '“' },
+    { regex: /”/g, replace: '”' },
+    { regex: /‘/g, replace: '‘' },
+    { regex: /’/g, replace: '’' },
+    { regex: /"/g, replace: '”' },
+    { regex: / /g, replace: '  ' },
+    { regex: /…/g, replace: '...' },
+    { regex: /–/g, replace: '–' },
+  ]
+
+  charList.forEach(({ regex, replace }) => {
+    // eslint-disable-next-line no-param-reassign
+    str = str.replace(regex, replace)
+  })
+
+  return str
+}

package/src/utils/timedContent.ts

@@ -0,0 +1,32 @@
+import { parse } from 'date-fns'
+
+const DATE_FORMAT = 'yyyy-MM-dd HH:mm:ss'
+
+export function getTimeZonedDate(
+  dateStr: string | Date,
+  timeZone: string
+): Date {
+  const date =
+    typeof dateStr === 'string'
+      ? parse(dateStr, DATE_FORMAT, new Date())
+      : dateStr
+
+  const localeString = date.toLocaleString('en-US', { timeZone })
+  return new Date(localeString)
+}
+
+export function timedContent(
+  start: string,
+  end: string,
+  timeZone: string = 'Asia/Jakarta'
+): boolean {
+  const now = getTimeZonedDate(new Date(), timeZone).getTime()
+  const startTime = getTimeZonedDate(start, timeZone).getTime()
+  const endTime = getTimeZonedDate(end, timeZone).getTime()
+
+  if (startTime > endTime) {
+    throw new Error('Start date must be before end date')
+  }
+
+  return now >= startTime && now <= endTime
+}