@cu-mkp/editioncrafter 1.1.0 → 1.2.0-beta.1

package/dist/es/src/RecordList/component/CollapsibleMenu.jsx

@@ -0,0 +1,22 @@
+import { useState } from 'react'
+import { FaChevronDown, FaChevronUp } from 'react-icons/fa'
+
+function CollapsibleMenu(props) {
+  const [open, setOpen] = useState(true)
+
+  return (
+    <>
+      <div className="collapsible-menu">
+        <button className="collapsible-menu-toggle" onClick={() => setOpen(!open)} type="button">
+          <p className="collapsible-menu-title">{props.title}</p>
+          {open
+            ? <FaChevronUp />
+            : <FaChevronDown />}
+        </button>
+      </div>
+      {open && props.children}
+    </>
+  )
+}
+
+export default CollapsibleMenu

package/dist/es/src/RecordList/component/Loading.jsx

@@ -0,0 +1,12 @@
+import { HiOutlineBookOpen } from 'react-icons/hi2'
+
+function Loading() {
+  return (
+    <div className="loading">
+      <HiOutlineBookOpen />
+      <span>Loading</span>
+    </div>
+  )
+}
+
+export default Loading

package/dist/es/src/RecordList/component/Pill.jsx

@@ -0,0 +1,10 @@
+function Pill(props) {
+  return (
+    <button className={props.isActive ? 'active pill' : 'pill'} onClick={props.onClick} type="button">
+      {props.children}
+      {props.label}
+    </button>
+  )
+}
+
+export default Pill

package/dist/es/src/RecordList/component/Record.jsx

@@ -0,0 +1,82 @@
+import { useContext, useMemo } from 'react'
+import FilterContext from '../context/FilterContext'
+import Pill from './Pill'
+
+function getRecordName(div) {
+  if (div.element_name) {
+    return `${div.element_name} - ${div.surface_name}`
+  }
+
+  return div.surface_name
+}
+
+function getTagObjects(ids, allTags) {
+  return ids
+    .map(xmlId => allTags.find(t => t.xml_id === xmlId))
+    .filter(Boolean)
+}
+
+function getSurfaceLink(baseUrl, div, cats, tags) {
+  return (
+    `${baseUrl}&viewMode=story#/ec/${div.surface_xml_id}/f/${div.surface_xml_id}/${div.layer_xml_id}?tags=${[...cats, ...tags].join(',')}`
+  )
+}
+
+function Record(props) {
+  const ctx = useContext(FilterContext)
+
+  const categories = useMemo(
+    () => getTagObjects(props.div.tagging_ids, props.tags),
+    [props.div.tagging_ids, props.tags],
+  )
+
+  const tagCounts = useMemo(() => {
+    const result = {}
+
+    props.childElements.forEach((el) => {
+      const tags = getTagObjects(el.tagging_ids, props.tags)
+      tags.forEach((tag) => {
+        if (result[tag.name]) {
+          result[tag.name].count++
+        }
+        else {
+          result[tag.name] = {
+            id: tag.xml_id,
+            count: 1,
+          }
+        }
+      })
+    })
+
+    return result
+  }, [props.childElements, props.tags])
+
+  return (
+    <div className="record-box">
+      <p>
+        <a
+          href={getSurfaceLink(props.viewerUrl, props.div, ctx.categories, ctx.tags)}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {getRecordName(props.div)}
+        </a>
+      </p>
+      <div className="category-list">
+        {categories.map(cat => (
+          <Pill key={cat.id} label={cat.name} isActive={ctx.categories.includes(cat.xml_id)} />
+        ))}
+      </div>
+      <div className="tag-list">
+        <span className="tag-list-label">Tags</span>
+        {Object.keys(tagCounts).map(tagName => (
+          <Pill key={tagName} label={tagName} isActive={ctx.tags.includes(tagCounts[tagName].id)}>
+            <span className="tag-count">{tagCounts[tagName].count}</span>
+          </Pill>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default Record

package/dist/es/src/RecordList/component/RecordListView.jsx

@@ -0,0 +1,109 @@
+import { useContext, useMemo } from 'react'
+import FilterContext from '../context/FilterContext'
+import { getObjs } from '../lib/sql'
+import Record from './Record'
+
+function cleanUpTagIds(obj) {
+  return {
+    ...obj,
+    tagging_ids: obj.tagging_ids.split(','),
+  }
+}
+
+function getData(db) {
+  const elementsStmt = db.prepare(`
+  SELECT
+    elements.id AS id,
+    elements.name AS element_name,
+    elements.type AS element_type,
+    elements.parent_id AS parent_id,
+    surfaces.name AS surface_name,
+    surfaces.xml_id AS surface_xml_id,
+    layers.xml_id AS layer_xml_id,
+    GROUP_CONCAT(tags.xml_id) as tagging_ids
+  FROM
+    taggings
+  INNER JOIN elements
+    ON elements.id = taggings.element_id
+  INNER JOIN tags
+    ON tags.id = taggings.tag_id
+  INNER JOIN surfaces
+    ON surfaces.id = elements.surface_id
+  INNER JOIN layers
+    ON layers.id = elements.layer_id
+  GROUP BY elements.id`)
+
+  const tagsStmt = db.prepare('SELECT * from tags')
+
+  return {
+    elements: getObjs(elementsStmt).map(cleanUpTagIds),
+    tags: getObjs(tagsStmt),
+  }
+}
+
+function isFilterMatch(ctx, divData) {
+  const categoryMatch = (ctx.categories.length === 0
+    || divData.element.tagging_ids.some(id => ctx.categories.includes(id)))
+
+  const tagMatch = (ctx.tags.length === 0
+    || divData.childTags.some(id => ctx.tags.includes(id)))
+
+  return categoryMatch && tagMatch
+}
+
+function RecordListView(props) {
+  const ctx = useContext(FilterContext)
+
+  const { elements, tags } = useMemo(() => getData(props.db), [props.db])
+
+  const divs = useMemo(() => {
+    const arr = []
+
+    for (const element of elements) {
+      if (element.element_type !== 'div') {
+        continue
+      }
+
+      const children = elements.filter(childEl => childEl.parent_id === element.id)
+      const childTags = children.flatMap(childEl => childEl.tagging_ids)
+
+      arr.push({
+        element,
+        children,
+        childTags,
+      })
+    }
+
+    return arr
+  }, [elements])
+
+  return (
+    <div className="record-list-view">
+      <h1 className="entries-header">
+        {props.recordLabel || 'Records'}
+        {' '}
+        (
+        {divs.length}
+        )
+      </h1>
+      {divs.map((divData) => {
+        if (isFilterMatch(ctx, divData)) {
+          return (
+            <Record
+              childElements={elements.filter(el => el.parent_id === divData.element.id)}
+              div={divData.element}
+              key={divData.element.id}
+              tags={tags}
+              viewerUrl={props.viewerUrl}
+            />
+          )
+        }
+
+        return null
+      },
+      )}
+    </div>
+  )
+}
+
+export default RecordListView

package/dist/es/src/RecordList/component/Sidebar.jsx

@@ -0,0 +1,83 @@
+import { useMemo } from 'react'
+import { getObjs } from '../lib/sql'
+import CollapsibleMenu from './CollapsibleMenu'
+import SidebarTagList from './SidebarTagList'
+
+function getData(db) {
+  const tagsStmt = db.prepare(`
+    SELECT
+      tags.id AS id,
+      tags.name AS name,
+      tags.xml_id AS xml_id
+    FROM
+      tags
+    INNER JOIN taggings
+      ON taggings.tag_id = tags.id
+    INNER JOIN elements
+      ON elements.id = taggings.element_id
+    WHERE
+      elements.type = 'seg'
+    GROUP BY
+      tags.xml_id`)
+
+  const tags = getObjs(tagsStmt)
+
+  const categoriesStmt = db.prepare(`
+    SELECT
+      tags.id AS id,
+      tags.name AS name,
+      tags.xml_id AS xml_id
+    FROM
+      tags
+    INNER JOIN taggings
+      ON taggings.tag_id = tags.id
+    INNER JOIN elements
+      ON elements.id = taggings.element_id
+    WHERE
+      elements.type = 'div'
+    GROUP BY
+      tags.xml_id`)
+
+  const categories = getObjs(categoriesStmt)
+
+  const taggingsStmt = db.prepare('SELECT * FROM taggings')
+  const taggings = getObjs(taggingsStmt)
+
+  const labeledTags = tags.map((tag) => {
+    if (tag.parent_id) {
+      const parent = tags.find(pt => pt.id === tag.parent_id)
+      return {
+        ...tag,
+        name: `${parent.name} - ${tag.name}`,
+      }
+    }
+
+    return tag
+  })
+
+  return {
+    tags: labeledTags,
+    categories,
+    taggings,
+  }
+}
+
+function RecordListSidebar(props) {
+  const data = useMemo(() => getData(props.db), [props.db])
+
+  return (
+    <div className="ec-sidebar">
+      <h2>Filters</h2>
+      <div className="h-separator" />
+      <CollapsibleMenu title="Categories">
+        <SidebarTagList tags={data.categories} type="categories" />
+      </CollapsibleMenu>
+      <div className="h-separator" />
+      <CollapsibleMenu title="Tags">
+        <SidebarTagList tags={data.tags} type="tags" />
+      </CollapsibleMenu>
+    </div>
+  )
+}
+
+export default RecordListSidebar

package/dist/es/src/RecordList/component/SidebarTagList.jsx

@@ -0,0 +1,38 @@
+import { useContext, useMemo } from 'react'
+import { IoCheckmarkSharp } from 'react-icons/io5'
+import FilterContext from '../context/FilterContext'
+import Pill from './Pill'
+
+function TagPill(props) {
+  const { categories, toggleCategoryFilter, tags, toggleTagFilter } = useContext(FilterContext)
+
+  const toggleFilter = props.type === 'categories'
+    ? toggleCategoryFilter
+    : toggleTagFilter
+
+  const isActive = useMemo(() => props.type === 'categories'
+    ? categories.includes(props.tag.xml_id)
+    : tags.includes(props.tag.xml_id), [props.type, props.tag.xml_id, categories, tags])
+
+  return (
+    <Pill
+      isActive={isActive}
+      onClick={() => toggleFilter(props.tag.xml_id)}
+      label={props.tag.name}
+    >
+      {isActive && <IoCheckmarkSharp />}
+    </Pill>
+  )
+}
+
+function SidebarTagList(props) {
+  return (
+    <div className="sidebar-tag-list">
+      {props.tags.map(tag => (
+        <TagPill key={tag.id} type={props.type} tag={tag} />
+      ))}
+    </div>
+  )
+}
+
+export default SidebarTagList

package/dist/es/src/RecordList/context/FilterContext.jsx

@@ -0,0 +1,8 @@
+import { createContext } from 'react'
+
+const FilterContext = createContext({
+  categories: [],
+  tags: [],
+})
+
+export default FilterContext

package/dist/es/src/RecordList/index.jsx

@@ -0,0 +1,92 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import initSqlJs from 'sql.js'
+import Loading from './component/Loading'
+import RecordListView from './component/RecordListView'
+import Sidebar from './component/Sidebar'
+
+import FilterContext from './context/FilterContext'
+
+import './styles/base.css'
+import './styles/record.css'
+import './styles/sidebar.css'
+
+const initialFilters = {
+  categories: [],
+  tags: [],
+}
+
+async function initDb(url) {
+  const file = await fetch(url)
+
+  if (!file.ok) {
+    throw new Error('Failed fetching SQLite file.')
+  }
+
+  const buf = await file.arrayBuffer()
+  const arr = new Uint8Array(buf)
+
+  const SQL = await initSqlJs({
+    locateFile: file => `https://sql.js.org/dist/${file}`,
+  })
+
+  const db = new SQL.Database(arr)
+
+  return db
+}
+
+function RecordList(props) {
+  const [db, setDb] = useState(null)
+  const [filters, setFilters] = useState(initialFilters)
+
+  const toggleCategoryFilter = useCallback(id => setFilters({
+    ...filters,
+    categories: filters.categories.includes(id)
+      ? filters.categories.filter(existing => existing !== id)
+      : [...filters.categories, id],
+  }), [filters])
+
+  const toggleTagFilter = useCallback(id => setFilters({
+    ...filters,
+    tags: filters.tags.includes(id)
+      ? filters.tags.filter(existing => existing !== id)
+      : [...filters.tags, id],
+  }), [filters])
+
+  const initialContext = useMemo(() => ({
+    ...filters,
+    toggleCategoryFilter,
+    toggleTagFilter,
+  }), [filters, toggleCategoryFilter, toggleTagFilter])
+
+  useEffect(() => {
+    const loadDb = async () => {
+      const db = await initDb(props.dbUrl)
+      setDb(db)
+    }
+
+    if (!db) {
+      loadDb()
+    }
+
+    return () => {
+      if (db) {
+        db.close()
+      }
+    }
+  }, [props.dbUrl, db])
+
+  if (!db) {
+    return <Loading />
+  }
+
+  return (
+    <FilterContext.Provider value={initialContext}>
+      <div className="editioncrafter-record-list">
+        <Sidebar db={db} />
+        <RecordListView db={db} recordLabel={props.recordLabel} viewerUrl={props.viewerUrl} />
+      </div>
+    </FilterContext.Provider>
+  )
+}
+
+export default RecordList

package/dist/es/src/RecordList/lib/sql.js

@@ -0,0 +1,9 @@
+export function getObjs(statement) {
+  const records = []
+
+  while (statement.step()) {
+    records.push(statement.getAsObject())
+  }
+
+  return records
+}

package/dist/es/src/RecordList/styles/base.css

@@ -0,0 +1,78 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+
+.editioncrafter-record-list {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  gap: 20px;
+  font-family: 'Inter', sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+.editioncrafter-record-list h1, h2, h3, h4, p {
+  margin: 0;
+  padding: 0;
+}
+
+.editioncrafter-record-list h1 {
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 600;
+}
+
+.editioncrafter-record-list h2 {
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 600;
+}
+
+.editioncrafter-record-list div.h-separator {
+  border-top: 1px solid #E1E3E6;
+  width: 100%;
+}
+
+.editioncrafter-record-list * {
+  box-sizing: border-box;
+}
+
+.editioncrafter-record-list a {
+  color: #07529A;
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.editioncrafter-record-list button:hover {
+  cursor: pointer;
+}
+
+.editioncrafter-record-list .loading {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  background-color: #ffffff;
+}
+
+.editioncrafter-record-list .pill {
+  appearance: none;
+  display: flex;
+  height: 32px;
+  padding: 4px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  border-radius: 50px;
+  border: 1px solid #CEDAE7;
+  background: #CEDAE7;
+  color: #0A0A0A;
+  font-family: Inter;
+  font-size: 14px;
+  font-weight: 500;
+}

package/dist/es/src/RecordList/styles/record.css

@@ -0,0 +1,84 @@
+.editioncrafter-record-list .record-list-view {
+  flex-grow: 1;
+  display: flex;
+  flex-flow: column;
+  gap: 16px;
+}
+
+.editioncrafter-record-list .record-list-view .entries-header {
+  padding: 10px 0;
+}
+
+.editioncrafter-record-list .record-list-view .record-box {
+  width: 100%;
+  border-radius: 5px;
+  border: 1px solid #E1E3E6;
+  display: flex;
+  flex-flow: column;
+  gap: 8px;
+  padding: 16px;
+  transition: 0.3s;
+}
+
+.editioncrafter-record-list .record-list-view .record-box:hover {
+  box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.25);
+}
+
+.editioncrafter-record-list .record-list-view .record-box .category-list {
+  display: flex;
+  gap: 6px;
+}
+
+.editioncrafter-record-list .record-list-view .record-box .tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.editioncrafter-record-list .record-list-view .record-box .tag-list .tag-list-label {
+  font-weight: 600;
+}
+
+.editioncrafter-record-list .record-list-view .record-box .tag-list .pill {
+  background: #ffffff;
+  display: flex;
+  height: 32px;
+  padding: 4px 12px 4px 4px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 50px;
+  border: 1px solid #E1E3E6;
+}
+
+.editioncrafter-record-list .record-list-view .record-box .category-list .pill.active {
+  background: #07529A;
+  color: #ffffff
+}
+
+.editioncrafter-record-list .record-list-view .record-box .tag-list .pill .tag-count {
+  display: inline-flex;
+  height: 24px;
+  min-width: 24px;
+  padding: 4px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+  border-radius: 50px;
+  background: #B5C8DC99;
+}
+
+.editioncrafter-record-list .record-list-view .record-box .tag-list .pill.active {
+  border: 1px solid #07529A;
+  color: #07529A;
+}
+
+.editioncrafter-record-list .record-list-view .record-box .tag-list .pill.active .tag-count {
+  background: #07529A;
+  color: #ffffff;
+}

package/dist/es/src/RecordList/styles/sidebar.css

@@ -0,0 +1,39 @@
+.editioncrafter-record-list .ec-sidebar {
+  background-color: #F3F4F7;
+  padding: 32px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 380px;
+  flex-grow: 0;
+}
+
+.editioncrafter-record-list .collapsible-menu .collapsible-menu-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  appearance: none;
+  background: none;
+  border: none;
+  width: 100%;
+}
+
+.editioncrafter-record-list .collapsible-menu .collapsible-menu-title {
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.editioncrafter-record-list .sidebar-tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.editioncrafter-record-list .sidebar-tag-list .pill.active {
+  background: #07529A;
+  color: #ffffff;
+}
+
+.editioncrafter-record-list .sidebar-tag-list .hidden {
+  visibility: hidden;
+}

package/dist/es/src/{index.js → index.jsx}

@@ -1,8 +1,9 @@
 import { createTheme, ThemeProvider } from '@material-ui/core/styles'
 import React from 'react'
-import DiploMatic from './component/DiploMatic'
-import { createReduxStore } from './model/ReduxStore'
-import './scss/editioncrafter.scss'
+import DiploMatic from './EditionCrafter/component/DiploMatic'
+import { createReduxStore } from './EditionCrafter/model/ReduxStore'
+import _RecordList from './RecordList'
+import './EditionCrafter/scss/editioncrafter.scss'
 
 /**
  * Default instantiation
@@ -26,4 +27,6 @@ function EditionCrafter(props) {
   )
 }
 
+export { _RecordList as RecordList }
+
 export default EditionCrafter