scu-web-components 0.0.1

package/dist/tokens/apps/tokens/groups-nav/groups-nav.js

@@ -0,0 +1,67 @@
+import { findFirstPattern, findFirstValueset, findGroup } from '../../utils/accessors.js';
+import fetchCss from '../../utils/fetchCss.js';
+
+const groupNavItemClass = 'group-nav-item';
+let root;
+
+
+export default function init(state) {
+  fetchCss('./groups-nav.css', import.meta );
+
+  // we can render all the groups...
+  const pages = [
+    ['Color','colors'],
+    ['Type','typography'],
+    ['Effect','effects'],
+    ['Icon','icons'],
+    ['Image','graphics'],
+    ['Comp','components'],
+    ['Layout','layouts']
+  ];
+
+  root = document.createElement('div');// querySelector('#groups');
+  pages.map(group => {
+    const navItem = document.createElement('a');
+    navItem.classList.add(groupNavItemClass);
+    navItem.classList.add(group[1]);
+    navItem.innerHTML = group[0];
+    navItem.dataset.group = JSON.stringify(group);
+    navItem.addEventListener('click', (evt) => {
+      navItemClickHandler(evt, state.tokens);
+    });
+    root.appendChild(navItem);
+  });
+
+  RouteState.addDiffListener(
+    "group",
+    function( route ) {
+      selectGroup(route.group);
+    }
+  );
+
+  if (RouteState.route.group) {
+    selectGroup(RouteState.route.group);
+  }
+
+  return root;
+}
+
+function navItemClickHandler(evt, tokens) {
+  const group = JSON.parse(evt.target.dataset.group);
+  const groupObj = findGroup(tokens, group[1]);
+  const targetPattern = findFirstPattern(tokens, groupObj);
+  const targetValueset = findFirstValueset(tokens, targetPattern);
+  RouteState.merge({
+    group: group[1],
+    pattern: targetPattern.id,
+    'pattern:scope':targetPattern.scope,
+    valueset: targetValueset.id
+  });
+}
+
+function selectGroup(group) {
+  Object.values(root.querySelectorAll(`.${groupNavItemClass}`)).map(groupNavItem => {
+    groupNavItem.classList.remove('selected');
+  });
+  root.querySelector(`.${group}`).classList.add('selected');
+}

package/dist/tokens/apps/tokens/main.css

@@ -0,0 +1,81 @@
+
+body, html {
+  width: 100%; 
+  height: 100%;
+  margin: 0; padding: 0;
+  font: var( --text-05 );
+  color: var( --grey-4 );
+  background-color: var( --grey-10 );
+}
+
+::-webkit-scrollbar {
+  width: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: rgba(0,0,0,0); 
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #ccc; 
+  border: 4px solid #fff;
+}
+
+  body.active #main {
+    display: grid;
+  }
+
+  body.active #main-loading {
+    display: none;
+  }
+
+  #main-loading {
+    position: absolute;
+    top: 0; right: 0;
+    left: 0; bottom: 0;
+
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+
+    padding-bottom: 100px;
+  }
+
+  #main {
+    display: none;/* grid after active */
+    position: absolute;
+    top: 0; right: 0;
+    left: 0; bottom: 0;
+
+    grid-template-columns: auto auto 1fr;
+    grid-template-rows: auto 1fr;
+    grid-template-areas: 
+      "grps grps code"
+      "ptrn vset code";
+    overflow: hidden;
+    height: 100%;/* safari fix */
+  }
+
+    #groups {
+      grid-area: grps;
+    }
+
+    #patterns {
+      grid-area: ptrn;
+      width: 200px;
+      border-right: 1px solid var( --grey-095 );
+    }
+
+    #valuesets {
+      grid-area: vset;
+      width: 300px;
+    }
+
+    #code {
+      grid-area: code;
+      background-color: var( --grey-00 );
+    }
+    
+

package/dist/tokens/apps/tokens/main.js

@@ -0,0 +1,131 @@
+import { STNK_CLIPBOARD_REGISTER_TEMPLATE } from '../clipboard/clipboard.js';
+import {
+  findFirstGroup,
+  findFirstPattern,
+  findFirstValueset
+} from '../utils/accessors.js';
+import fetchCss from '../utils/fetchCss.js';
+import fetchJSON from '../utils/fetchJson.js';
+import fetchScript from '../utils/fetchScript.js';
+
+let state = {};
+
+export default async function run(tokenDir, meta, version, testingTokenDir ) {
+  const finalTokenDir = tokenDir !== '{FINAL_DIR}' ? tokenDir : testingTokenDir;
+
+  await fetchScript('../local_modules/routestate/routestate.js', import.meta );
+  await fetchCss('../theme.css', import.meta);
+  await fetchCss('./main.css', import.meta );
+  await fetchCss(`${finalTokenDir}/theme.css`, meta );
+  await loadReferenceInfo(finalTokenDir);
+
+  state.version = version;
+  state.tokenDir = finalTokenDir;
+  render(finalTokenDir);
+}
+
+function initRouteState() {
+  RouteState.sustainHashHistory = false;// can't use localStorage in Plugin
+  RouteState.serializePathname = false;
+  RouteState.previousStateToBody = false;
+  RouteState.listenToHash(false, true);
+}
+  
+function setDefaultRouteState(tokens) {
+  // lets focus on first one for each...
+  const firstGroup = findFirstGroup(tokens);
+  if (firstGroup && !RouteState.route.group) {
+    RouteState.merge({group:firstGroup.id});
+    const firstPattern = findFirstPattern(tokens);
+    if (firstPattern && !RouteState.route.pattern) {
+      RouteState.merge({pattern:firstPattern.id,'pattern:scope':firstPattern.scope});
+      const firstValueset = findFirstValueset(tokens);
+      if (firstValueset && !RouteState.route.valueset) {
+        RouteState.merge({valueset:firstValueset.id});
+      }
+    }
+  }  
+}
+
+async function render() {
+  document.querySelector('body').classList.add('active');
+  const mainEle = document.querySelector('#main');
+  initRouteState();
+  const cacheId = '';//Math.random();
+
+  mainEle.appendChild(
+    await import('../clipboard/clipboard.js').then(js => js.default())
+  );
+  document.dispatchEvent(
+    new CustomEvent(
+      STNK_CLIPBOARD_REGISTER_TEMPLATE, 
+      { bubbles: true,
+        detail: {
+          clipboard: 'generic',
+          template: '[content]'
+        }
+      }
+    )
+  )
+
+  // set up navigations
+  const groupsEle = await import(`./groups-nav/groups-nav.js?${cacheId}`).then(js => js.default(state));
+  groupsEle.setAttribute('id', 'groups');
+  mainEle.appendChild( groupsEle );
+
+  const patternsEle = await import(`./patterns-nav/patterns-nav.js?${cacheId}`).then(js => js.default(state));
+  patternsEle.setAttribute('id', 'patterns');
+  mainEle.appendChild( patternsEle );
+  
+  // recursive appends, so pass root
+  await import(`./valuesets-nav/valuesets-nav.js?${cacheId}`).then(js => js.default(state, mainEle));
+
+  const codeEle = await import('./code-page/code-page.js').then(js => js.default(state));
+  codeEle.setAttribute('id', 'code');
+  mainEle.appendChild( codeEle );
+
+  setDefaultRouteState(state.tokens);
+}
+
+function loadReferenceInfo( tokenDir ) {
+  state = {};
+  const tokensUrl = `${tokenDir}/source/tokens.json`;
+  /*const scssVariablesUrl = `${tokenDir}/source/scssVariables.json`;
+  const componentScssMixinsUrl = `${tokenDir}/source/componentScssMixins.json`;
+  const cssVariablesUrl = `${tokenDir}/source/cssVariables.json`;
+  const htmlStubsUrl = `${tokenDir}/source/htmlStubs.json`;
+  const cssApiCssUrl = `${tokenDir}/source/cssApi.css.json`;
+  const cssApiScssUrl = `${tokenDir}/source/cssApi.scss.json`;*/
+
+  return Promise.all([
+    fetchJSON(tokensUrl).then(result => { 
+      state.tokens = result;
+    }),
+    /*fetchJSON(scssVariablesUrl).then(result => { 
+      console.log("loaded scssVariables");
+      state.scssVariables = result;
+    }),
+    fetchJSON(componentScssMixinsUrl).then(result => { 
+      console.log("loaded mixins");
+      state.mixins = result;
+    }),
+    fetchJSON(cssVariablesUrl).then(result => { 
+      console.log("loaded cssVariables");
+      state.cssVariables = result;
+    }),
+    fetchJSON(htmlStubsUrl).then(result => { 
+      console.log("loaded htmlStubs");
+      state.htmlStubs = result;
+    }),
+    fetchJSON(cssApiCssUrl).then(result => { 
+      console.log("loaded cssApiCssUrl");
+      state.cssApiCsses = result;
+    }),
+    fetchJSON(cssApiScssUrl).then(result => { 
+      console.log("loaded cssApiScssUrl");
+      state.cssApiScsses = result;
+    })*/
+  ]).catch(err => {
+    console.error(err);
+  });
+}

package/dist/tokens/apps/tokens/patterns-nav/patterns-nav.css

@@ -0,0 +1,54 @@
+
+
+#patterns {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: stretch;
+
+  padding: var( --spacing-3 );
+
+  overflow-y: auto;
+
+  border-right: 1px solid var( --grey-092 );
+}
+
+  .pattern-nav-item {
+    font: var( --text-04 );
+    padding: var( --spacing-1 ) 0;
+    position: relative;
+    margin-bottom: var( --spacing-0-6 );
+    /* z-index: 1; */
+    transform-style: preserve-3d;
+  }
+    .pattern-nav-item:hover {
+      cursor: pointer;
+    }
+
+    .pattern-nav-item:before {
+      content: ' ';
+      display: none;
+      position: absolute;
+      left: calc( var( --spacing-1 ) * -1 );
+      right: calc( var( --spacing-1 ) * -1 );
+      top: 0; bottom: 0;
+      
+      border-radius: var( --border-radius );
+      /* z-index: -1; */
+      transform: translateZ(-1px);
+    }
+
+    .pattern-nav-item:hover:before {
+      display: block;
+      background-color: var( --grey-092 );
+    }
+
+    .pattern-nav-item.selected:before {
+      display: block;
+      background-color: var( --grey-095 );
+    }
+
+    .pattern-nav-item.selected:hover:before {
+      display: block;
+      background-color: var( --grey-092 );
+    }

package/dist/tokens/apps/tokens/patterns-nav/patterns-nav.js

@@ -0,0 +1,107 @@
+import {
+  findFirstValueset,
+  findGroup,
+  findPattern
+} from '../../utils/accessors.js';
+import fetchCss from '../../utils/fetchCss.js';
+
+const patternNavItemClass = 'pattern-nav-item';
+let root;
+
+export default function init(state) {
+  fetchCss('./patterns-nav.css', import.meta );
+
+  RouteState.addDiffListener(
+    "pattern",
+    function() {
+      render(state.tokens);
+    }
+  );
+
+  RouteState.addDiffListener(
+    "scope",
+    function() {
+      render(state.tokens);
+    }
+  );
+
+  root = document.createElement('div');
+  render(state.tokens);
+  return root;
+}
+
+function render(tokens) {
+  if (RouteState.route.group) {
+    const group = findGroup(tokens, RouteState.route.group);
+    let focusedPattern;
+    if (RouteState.route.pattern) {
+      focusedPattern = findPattern(tokens, RouteState.route.pattern, RouteState.route.scope);
+    }
+    const patternNav = root;
+    if (patternNav.dataset.group !== group.id) {
+      patternNav.dataset.group = group.id;
+      patternNav.innerHTML = '';// clear out everything...
+      sortByName(group);
+      group.patterns.map(pattern => {
+        const patternNavItem = document.createElement('div');
+        const patternScope = pattern.scope;// ? pattern.scope : 'root';
+        const patternScopeStr = (patternScope && patternScope !== 'root') ? `:${patternScope}` : '';
+        patternNavItem.classList.add(patternNavItemClass);
+        patternNavItem.innerHTML = `${pattern.name}${patternScopeStr}`;
+        patternNavItem.dataset.pattern = pattern.id;
+        if (patternScope) {// otherwise it lands as a string
+          patternNavItem.dataset.scope = patternScope;
+        }
+        patternNavItem.addEventListener('click', (evt) => {
+          patternNavItemClickHandler(evt, tokens);
+        });
+        patternNav.appendChild(patternNavItem);
+      });
+    }
+    highlightSelected();
+  }
+}
+
+function highlightSelected () {
+  // just highlight the right one instead...they are rendered
+  const patternNav = root;
+  Object.values(patternNav.querySelectorAll(`.${patternNavItemClass}`)).map( patternNavItem => {
+    patternNavItem.classList.remove("selected");
+  });
+  let targetPattern;
+  if (RouteState.route.scope) {
+    targetPattern = patternNav.querySelector(`[data-pattern=${RouteState.route.pattern}][data-scope=${RouteState.route.scope}]`);
+  }else{
+    targetPattern = patternNav.querySelector(`[data-pattern=${RouteState.route.pattern}]`);
+  }
+  targetPattern.classList.add('selected');
+}
+
+function patternNavItemClickHandler(evt, tokens) {
+  const patternId = evt.target.dataset.pattern;
+  const scope = evt.target.dataset.scope;
+  const targetPattern = findPattern(tokens, patternId, scope);
+  const targetValueset = findFirstValueset(tokens, targetPattern);
+  RouteState.merge({
+    pattern: patternId,
+    valueset: targetValueset.id,
+    'pattern:scope': targetPattern.scope
+  });
+}
+
+function sortByName(group) {
+  // sort patterns first
+  group.patterns.sort(function(a, b) {
+    var nameA = a.name.toUpperCase(); // ignore upper and lowercase
+    var nameB = b.name.toUpperCase(); // ignore upper and lowercase
+    if (nameA < nameB) {
+      return -1;
+    }
+    if (nameA > nameB) {
+      return 1;
+    }
+
+    // names must be equal
+    return 0;
+  });
+}

package/dist/tokens/apps/tokens/valuesets-nav/items/color-items.css

@@ -0,0 +1,21 @@
+
+
+
+.color-tile {
+  display: block;
+  width: 18px; height: 18px;
+  border-radius: 2px;
+  background-color: #eee;
+  margin-right: 8px;
+  box-sizing: border-box;
+  /*border: 1px solid var( --grey-07 );*/
+
+  font: var( --text-02 );
+  color: var( --grey-05 );
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+
+  box-shadow: 0px 0px 4px 0px rgba( 0, 0, 0, 0.3 );
+}

package/dist/tokens/apps/tokens/valuesets-nav/items/color-items.js

@@ -0,0 +1,21 @@
+
+export default function colorNavItem(valueset, pattern) {
+  /*ele.innerHTML = `
+    <div
+      class='color-tile'
+      style='background-color: ${valueset.values.color[0]}'></div>
+    <div>${valueset.fullExportName}</div>
+  `;*/
+  const root = document.createElement('div');
+
+  let ele = document.createElement('div');
+  ele.classList.add('color-tile');
+  ele.style = `background-color: ${valueset.values.color[0]}`;
+  root.appendChild(ele);
+
+  ele = document.createElement('div');
+  ele.innerHTML = valueset.fullExportName;
+  root.appendChild(ele);
+
+  return root;
+}

package/dist/tokens/apps/tokens/valuesets-nav/items/component-items.css

@@ -0,0 +1,31 @@
+
+
+.component-nav-line {
+  background-color: var( --grey-09 );
+  position: relative;
+  z-index: 5;
+}
+
+  .component-nav-line.root {
+    visibility: hidden;
+  }
+
+  .component-nav-line.left {
+    width: 8px;
+    height: 1px;
+  }
+
+  .component-nav-line.down {
+    width: 1px;
+    position: absolute;
+    z-index: 2;
+  }
+
+.component-nav-line.is-last:after {
+  content: ' ';
+  position: absolute;
+  top: 2px;
+  left: -1px; width: 4px;
+  height: 10px;
+  background-color: #fff;
+}

package/dist/tokens/apps/tokens/valuesets-nav/items/component-items.js

@@ -0,0 +1,120 @@
+import { valuesetNavItemClass } from '../valuesets-nav.js';
+
+const indentLength = 16;
+
+export default function renderComponentNavItem(parent, pattern, tokens, indent ) {
+  const finalIndent = (indent) ? indent : 0;
+  // only one valueset per pattern...but they can have children...
+  const valueset = pattern.valuesets[0];
+  const ele = document.createElement('div');
+  ele.classList.add(valuesetNavItemClass);
+  ele.dataset.valueset = valueset.id;
+  ele.addEventListener('click', () => {
+    valuesetNavItemClickHandler(valueset.id);
+  });
+
+  if (RouteState.route.valueset && valueset.id === RouteState.route.valueset) {
+    ele.classList.add('selected');
+  }
+
+  // COLOR TILE
+  const colorTile = document.createElement('div');
+  colorTile.classList.add('color-tile');
+  if (pattern.type === 'TEXT_TOKEN') {
+    colorTile.innerHTML = 'A';
+  }
+  colorTile.style = `
+    background-color: ${getBGColor(valueset)};
+    border: ${getBorder(valueset)};
+    position: relative;
+    z-index: 3;
+  `;
+
+  // LEFT LINE
+  const lineLeft = document.createElement('div');
+  lineLeft.classList.add('component-nav-line', 'left');
+  if (finalIndent === 0 ) {
+    lineLeft.classList.add('root');
+  }
+
+  lineLeft.style = `margin-left: ${(finalIndent)*indentLength - 2}px;`;
+
+  // NAME TILE
+  const nameTile = document.createElement('div');
+  nameTile.innerHTML = pattern.name;
+  ele.appendChild(lineLeft);
+  ele.appendChild(colorTile);
+  ele.appendChild(nameTile);
+
+  parent.appendChild(ele);
+
+  if (pattern.children && pattern.children.length > 0) {
+    const thisIndex = parent.children.length-1;
+    pattern.children.map((childPattern) => {
+      renderComponentNavItem(parent, childPattern, tokens, finalIndent+1 );
+    });
+    renderLine(ele, colorTile, pattern, thisIndex, parent, finalIndent );
+  }
+}
+
+function valuesetNavItemClickHandler(valuesetId) {
+  RouteState.merge({
+    valueset: valuesetId
+  });
+}
+
+function getBGColor(valueset) {
+  if (valueset.values && valueset.values.backgroundColor) {
+    return valueset.values.backgroundColor[0];
+  }else{
+    return 'white';
+  }
+}
+
+function getBorder(valueset) {
+  if (
+    valueset.values && 
+    valueset.values.strokeColor &&
+    valueset.values.strokeWeight
+  ) {
+    return `${valueset.values.strokeWeight[0]}px solid ${valueset.values.strokeColor[0]}`;
+  }else{
+    return 'none';
+  }
+}
+
+function renderLine(ele, colorTile, pattern, thisIndex, parent, finalIndent ) {
+  // DOWN LINE
+  const thisMiddle = ele.offsetHeight/2 + colorTile.offsetHeight/2;
+  const thisTargetY = ele.offsetTop + thisMiddle;
+  const lastChildIndex = countAllChildren(pattern) + thisIndex;
+
+  const lastChild = parent.children[lastChildIndex];
+  const lastChildMiddle = lastChild.offsetHeight/2;
+  const lastChildTargetY = lastChild.offsetTop + lastChildMiddle;
+
+  const lineDown = document.createElement('div');
+  lineDown.classList.add('component-nav-line', 'down');
+  lineDown.style = `
+    height: ${lastChildTargetY - thisTargetY}px;
+    top: ${thisMiddle}px; 
+    left: ${((finalIndent+1)*indentLength) - 2}px;
+  `;
+  ele.appendChild(lineDown);
+}
+
+function countAllChildren(pattern, isRootArg, metrics ) {
+  let isRoot = isRootArg === false ? false : true;
+  let finalMetrics = (isRoot) ? {total:0, name: pattern.name} : metrics;
+  finalMetrics.total += pattern.children.length;
+  pattern.children.map((childPattern, index) => {
+    if (isRoot) {
+      if( index !== pattern.children.length-1) {
+        countAllChildren(childPattern, false, finalMetrics);
+      }
+    }else{
+      countAllChildren(childPattern, false, finalMetrics);
+    }
+  });
+  return finalMetrics.total;
+}

package/dist/tokens/apps/tokens/valuesets-nav/items/icon-items.css

@@ -0,0 +1,35 @@
+
+
+.icon-tile {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.icon-tile > *:first-child {
+  margin-right: var( --spacing-1 );
+}
+
+  .icon-name {
+    flex: 1;
+  }
+  
+  .icon-preview {
+    padding: var( --spacing-1 );
+    border: 1px solid var( --grey-08 );
+    background-color: var( --grey-10 );
+    border-radius: var( --border-radius );
+
+    max-width: 70px;
+    max-height: 70px;
+  }
+
+  .icon-preview svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+
+    max-width: 70px;
+    max-height: 70px;
+  }

package/dist/tokens/apps/tokens/valuesets-nav/items/icon-items.js

@@ -0,0 +1,18 @@
+import { getSVGContent, getTokenValue } from "../../../utils/utils.js";
+
+export default function iconNavItem(valueset, pattern, tokens) {
+  const svgContent = getSVGContent(pattern, tokens);
+  const root = document.createElement('div');
+  root.classList.add('icon-tile');
+  root.innerHTML = `
+    <div class="icon-name">${valueset.fullExportName}</div>
+    <div
+      class="icon-preview"
+      style="
+        width: ${getTokenValue(valueset.values, "width", "20")};
+        height: ${getTokenValue(valueset.values, "height", "20")};">
+      ${svgContent}
+    </div>
+  `;
+  return root;
+}