Add typescript linting

texastribune · Sep 15, 2020 · 8a6b93a · 8a6b93a
1 parent c0ed135
commit 8a6b93a
Show file tree

Hide file tree

Showing 6 changed files with 279 additions and 80 deletions.
diff --git a/docs/config/tasks/style-doc.ts b/docs/config/tasks/style-doc.ts
@@ -8,6 +8,7 @@ import {
   TokenMap,
   KSSData,
   KSSModifier,
+  // eslint-disable-next-line import/extensions
 } from './types';
 
 const fs = require('fs-extra');
@@ -31,8 +32,6 @@ const {
   buildTokenArr,
 } = require('./utils');
 
-
-
 const GITHUB_URL = 'https://github.com/texastribune/queso-ui/blob/main';
 
 async function createModifier(config: Modifier) {
@@ -95,7 +94,7 @@ async function createEntry(section: KSSData) {
   };
   // colorMaps and colors
   if (colors && colors.length > 0) {
-    const colorMap = colors.map((color) => {
+    const colorMap = colors.map((color: { color: string; name: string; description: string; }) => {
       const { name } = color;
       return createColor({
         type: 'color',
@@ -151,6 +150,8 @@ async function createEntry(section: KSSData) {
     className,
     details,
     template,
+    modifiers: [],
+    modifierList: [],
     preview: await renderTemplate(template, className),
   };
   return createCSSClass(config, modifiers);
@@ -160,10 +161,7 @@ async function sortByType(arr: (CSSClass | ColorMap | Section | TokenMap)[]) {
   const usageInfo = await readUsageInfo();
   const sections: Section[] = [];
   const cssClasses: CSSClass[] = [];
-  const cssClassesSlim: CSSClass[] = [];
-  const cssClassesNoHelpers: CSSClass[] = [];
   const colorMaps: ColorMap[] = [];
-  const modifiers: Modifier[] = [];
   const tokenMaps: TokenMap[] = [];
   arr.forEach((entry: CSSClass | ColorMap | Section) => {
     const { type } = entry;
@@ -184,51 +182,39 @@ async function sortByType(arr: (CSSClass | ColorMap | Section | TokenMap)[]) {
     }
   });
   const sectionMap = convertArrayToObject(sections, 'id');
+  const classesWithModifiers = cssClasses.map(cssClass => cssClass).filter(cssClass => cssClass.modifiers.length > 0);
+  const modifiers = classesWithModifiers.map(cssClass => cssClass.modifiers).flat();
 
-  // clean up css class data
+  // add classes to sections
   cssClasses.forEach((cssClass) => {
-    const { details } = cssClass;
-    // get section
-    const { name } = sectionMap[cssClass.id];
-    const cssClassSlim = {
-      ...cssClass,
-      section: name,
-    };
-
-    // append class to section
     if (sectionMap[cssClass.id]) {
       sections.forEach((section) => {
         if (section.id === cssClass.id) {
           const { className } = cssClass;
-          section.list?.push({
+          if (section.list) {
+            section.list.push({
             className,
             name: cssClass.name
           });
+          }
         }
       });
     }
+  });
 
-    // extract modifiers separately
-    if (cssClass.modifiers) {
-      cssClass.modifiers.forEach((modifier: Modifier) => {
-        modifiers.push(modifier as Modifier);
-      });
-      delete cssClassSlim.modifiers;
-    }
 
-    // previews aren't relevant in helpers (found in modifiers)
-    if (details.isHelper) {
-      delete cssClassSlim.preview;
+  const cssClassesSlim = cssClasses.map(cssClass => {
+    const current = cssClass
+    if (current.details.isHelper) {
+      delete current.preview;
     }
-
-    //  used for full list
-    if (!details.isHelper && !details.isRecipe) {
-      cssClassesNoHelpers.push(cssClass);
+    delete current.modifiers;
+    return {
+      ...current,
+      section: sectionMap[current.id].name,
     }
-
-    cssClassesSlim.push(cssClassSlim as CSSClass);
-  });
-
+  })
+  const cssClassesNoHelpers = cssClasses.map(cssClass => cssClass).filter(cssClass => !cssClass.details.isHelper && !cssClass.details.isRecipe)
   const allClasses = [...cssClassesNoHelpers, ...modifiers];
   const fullList = allClasses.map((cssClass) => cssClass.className);
   const usage = fullList.map((cssClass) => findUsageInfo(usageInfo, cssClass));
@@ -260,8 +246,9 @@ const processComments = async (directory: string) => {
   const sorted = await sortByType(all);
 
   // create json files of style data
+  // eslint-disable-next-line no-restricted-syntax
   for (const [key, value] of Object.entries(sorted)) {
-    await fs.outputFileSync(
+    fs.outputFileSync(
       `./docs/dist/data/${key}.json`,
       JSON.stringify({ [key]: value }, null, 2)
     );

diff --git a/docs/config/tasks/types.ts b/docs/config/tasks/types.ts
@@ -12,6 +12,12 @@ export interface Details {
   keywords?: string[];
 }
 
+export interface Modifier extends Base {
+  className: string;
+  preview?: string;
+  template?: string;
+}
+
 export interface CSSClass extends Base {
   depth: number;
   id: number;
@@ -20,18 +26,11 @@ export interface CSSClass extends Base {
   template?: string;
   preview: string;
   label: string;
-  modifiers?: Modifier[];
+  modifiers: Modifier[];
   modifierList?: string[];
   section?: string;
 }
 
-export interface Modifier extends Base {
-  className: string;
-  usage?: (string | GithubDataItem)[];
-  preview?: string;
-  template?: string;
-}
-
 export interface Color extends Base {
   value: string;
   check?: {
@@ -64,22 +63,23 @@ export interface Section extends Base {
   }[];
 }
 
-// Main data
-export interface Sorted {
-  sections: Section[];
-  cssClasses: CSSClass[];
-  colorMaps: ColorMap[];
-  modifiers: Modifier;
-  modifierMap: Modifier[];
-  tokenMaps: TokenMap[];
-  usage: GithubDataItem;
-  fullList: string[];
-  tokens: Token[];
-  colors: Color[];
-}
 
 // Third party
 // @link https://github.com/kss-node/kss-node
+export interface KSSParameter {
+  data: {
+    name: string;
+    description: string;
+    defaultValue: string;
+  };
+}
+export interface KSSModifier {
+  data: {
+    name: string;
+    description: string;
+    className: string;
+  };
+}
 export interface KSSData {
   meta: {
     depth: number;
@@ -116,23 +116,10 @@ export interface KSSData {
     markup: string;
   };
 }
-export interface KSSModifier {
-  data: {
-    name: string;
-    description: string;
-    className: string;
-  };
-}
-export interface KSSParameter {
-  data: {
-    name: string;
-    description: string;
-    defaultValue: string;
-  };
-}
+
 export interface GithubDataItem {
   repo: string;
-  total_count: number;
+  totalCount: number;
   results: [
     {
       label: string;
@@ -150,3 +137,18 @@ export interface GithubData {
     };
   };
 }
+
+
+// Main data
+export interface Sorted {
+  sections: Section[];
+  cssClasses: CSSClass[];
+  colorMaps: ColorMap[];
+  modifiers: Modifier;
+  modifierMap: Modifier[];
+  tokenMaps: TokenMap[];
+  usage: GithubDataItem;
+  fullList: string[];
+  tokens: Token[];
+  colors: Color[];
+}
diff --git a/docs/src/macros/data-list.njk b/docs/src/macros/data-list.njk
@@ -3,10 +3,10 @@
   <table class="table is-striped is-bordered is-fullwidth">
     <tr><th>Repo</th><th>Count</th><th>Location(s)</th></tr>
     {% for repo in githubData %}
-      {% if repo.total_count > 0 %}
+      {% if repo.totalCount > 0 %}
       <tr>
         <td>{{ repo.repo }}</td>
-        <td><strong>{{ repo.total_count }}</strong></td>
+        <td><strong>{{ repo.totalCount }}</strong></td>
         <td><details class="dropdown q-dropdown">
         <summary>
             <span class="button is-info is-outlined is-small">List</strong></span>