From f921395259dc7ea2711533b8a6b1d937f8afc914 Mon Sep 17 00:00:00 2001 From: ashley-hebler Date: Sun, 5 Jul 2020 13:35:14 -0500 Subject: [PATCH] Restructure --- .eleventy.js | 18 ++ .gitignore | 1 + docs/config/tasks/style-doc2.ts | 235 +++++++++++++++++++++++++ docs/config/tasks/types.ts | 141 +++++++++++++++ docs/config/tasks/utils.js | 79 ++++++--- docs/config/ts/hello.js | 223 ------------------------ docs/config/ts/hello.ts | 299 -------------------------------- docs/src/data/docs.js | 12 ++ docs/src/index.njk | 4 +- package-lock.json | 22 +++ package.json | 4 +- tsconfig.json | 15 +- 12 files changed, 503 insertions(+), 550 deletions(-) create mode 100644 docs/config/tasks/style-doc2.ts create mode 100644 docs/config/tasks/types.ts delete mode 100644 docs/config/ts/hello.js delete mode 100644 docs/config/ts/hello.ts create mode 100644 docs/src/data/docs.js diff --git a/.eleventy.js b/.eleventy.js index 0a32ed10..5e7f4d91 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -19,6 +19,24 @@ module.exports = function (eleventyConfig) { return value.replace('$size-', ''); }); + // temp logger + eleventyConfig.addFilter('dump', (obj) => { + const getCircularReplacer = () => { + const seen = new WeakSet(); + return (key, value) => { + if (typeof value === 'object' && value !== null) { + if (seen.has(value)) { + return; + } + seen.add(value); + } + return value; + }; + }; + + return JSON.stringify(obj, getCircularReplacer(), 4); + }); + // settings return { dir: { diff --git a/.gitignore b/.gitignore index c36b8a25..a5577385 100644 --- a/.gitignore +++ b/.gitignore @@ -9,4 +9,5 @@ yarn-error.log* node_modules .DS_Store dist +build .editorconfig diff --git a/docs/config/tasks/style-doc2.ts b/docs/config/tasks/style-doc2.ts new file mode 100644 index 00000000..a42b6fba --- /dev/null +++ b/docs/config/tasks/style-doc2.ts @@ -0,0 +1,235 @@ +import { + Color, + ColorMap, + CSSClass, + Modifier, + Section, + Sorted, + Token, + TokenMap, + KSSData, + KSSModifier, +} from './types'; + +const fs = require('fs-extra'); +const kss = require('kss'); +const ora = require('ora'); +const { + generateName, + generateClassName, + generateTemplate, + readUsageInfo, + stripSelector, + findUsageInfo, + renderTemplate, + getDetails, + convertArrayToObject, +} = require('../tasks/utils'); + +const { + passesWcagAaLargeText, + passesWcagAa, + passesWcagAaa, +} = require('passes-wcag'); + +const GITHUB_URL = 'https://github.com/texastribune/queso-ui/blob/main'; + +async function createCSSClass( + config: CSSClass, + modifiers: KSSModifier[] | undefined +) { + let modifierData: Modifier[] = []; + let modifierList: string[] = []; + if (modifiers) { + modifierList = modifiers.map((modifier) => + stripSelector(modifier.data.name) + ); + modifierData = await Promise.all( + modifiers.map((modifier: KSSModifier) => + createModifier({ + name: modifier.data.name, + className: stripSelector(modifier.data.name), + description: modifier.data.description, + type: 'modifier', + template: config.template, + }) + ) + ); + } + config.modifiers = modifierData; + config.modifierList = modifierList; + return config; +} + +async function createModifier(config: Modifier) { + config.preview = await renderTemplate(config.template, config); + return config; +} + +function createColor(config: Color) { + config.check = { + aa: passesWcagAa(config.value, '#fff'), + aaLargeText: passesWcagAaLargeText(config.value, '#fff'), + aaa: passesWcagAaa(config.value, '#fff'), + }; + return config; +} + +// create a color, color map, section or item +async function createEntry(section: KSSData) { + const { meta, data } = section; + const ref = data.reference[0]; + const id = Number(ref); + const { depth } = meta; + const { modifiers, header, source, colors, markup, parameters } = data; + const location = `${GITHUB_URL}/${source.path}#L${source.line}`; + const { details, description } = getDetails(data.description, header); + const base = { name: header, description, location }; + if (colors && colors.length > 0) { + // create a color map + const colorMap = colors.map((color) => { + const { name, description } = color; + return createColor({ + type: 'color', + name, + description, + value: color.color, + }); + }); + return { + ...base, + type: 'colorMap', + list: colorMap, + }; + } else if (parameters && parameters.length > 0) { + const tokenMap = parameters.map((token) => { + const { data } = token; + const { description, defaultValue, name } = data; + return { + type: 'token', + name, + description, + value: defaultValue, + }; + }); + return { + ...base, + type: 'tokenMap', + list: tokenMap, + }; + } else if (meta.depth < 3) { + return { + ...base, + type: 'section', + id, + depth, + }; + } else { + const className = generateClassName(base.name); + const config = { + ...base, + label: generateName(base.name), + type: 'cssClass', + id, + depth: 2, + className, + details, + template: await generateTemplate(markup), + preview: await renderTemplate(markup, className), + }; + return await createCSSClass(config, modifiers); + } +} + +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; + switch (type) { + case 'section': + sections.push(entry as Section); + break; + case 'cssClass': + cssClasses.push(entry as CSSClass); + break; + case 'colorMap': + colorMaps.push(entry as ColorMap); + break; + case 'tokenMap': + tokenMaps.push(entry as TokenMap); + break; + } + }); + // clean up css class data (reduce the repeated keys) + cssClasses.forEach((cssClass) => { + const { details } = cssClass; + if (cssClass.modifiers) { + cssClass.modifiers.forEach((modifier: Modifier) => { + modifiers.push(modifier as Modifier); + }); + const cssClassSlim = { + ...cssClass, + }; + delete cssClassSlim.modifiers; + delete cssClassSlim.template; + if (details.isHelper) { + delete cssClassSlim.preview; + } + cssClassesSlim.push(cssClassSlim as CSSClass); + } + if (!details.isHelper && !details.isRecipe) { + cssClassesNoHelpers.push(cssClass); + } + }); + + const allClasses = [...cssClassesNoHelpers, ...modifiers]; + const fullList = allClasses.map((cssClass) => cssClass.className); + const usage = fullList.map((cssClass) => findUsageInfo(usageInfo, cssClass)); + const sorted: Sorted = { + sections, + cssClasses: cssClassesSlim, + colorMaps, + modifiers: convertArrayToObject(modifiers, 'className'), + tokenMaps, + fullList, + usage: convertArrayToObject(usage, 'className'), + }; + return sorted; +} + +const processComments = async (directory: string) => { + // use KSS library to parse comments + const { data } = await kss.traverse(directory, { markdown: true }); + + // compile KSS data as various types of entries + const all: (Section | CSSClass | ColorMap | TokenMap)[] = await Promise.all( + data.sections.map((section: KSSData) => createEntry(section)) + ); + + // separate by type + const sorted = await sortByType(all); + + // create json files of style data + for (const [key, value] of Object.entries(sorted)) { + await fs.outputFile( + `./docs/dist/data/${key}.json`, + JSON.stringify({ [key]: value }, null, 2) + ); + } + return sorted; +}; + +module.exports = async (dir: string) => { + const spinner = ora('Parsing SCSS comments').start(); + const docs = await processComments(dir); + + spinner.succeed(); + return docs; +}; diff --git a/docs/config/tasks/types.ts b/docs/config/tasks/types.ts new file mode 100644 index 00000000..bef71c44 --- /dev/null +++ b/docs/config/tasks/types.ts @@ -0,0 +1,141 @@ +export interface Base { + name: string; + description: string; + type: string; + location?: string; +} + +export interface CSSClass extends Base { + depth: number; + id: number; + className: string; + details: { + isHelper: true | false; + isRecipe: true | false; + isTool: true | false; + keywordsMatch: string; + }; + template?: string; + preview: string; + label: string; + modifiers?: Modifier[]; + modifierList?: string[]; +} + +export interface Modifier extends Base { + className: string; + usage?: (string | GithubDataItem)[]; + preview?: string; + template?: string; +} + +export interface Color extends Base { + value: string; + check?: { + aa: boolean; + aaa: boolean; + aaLargeText: boolean; + }; +} + +export interface ColorMap extends Base { + list: Color[]; +} + +export interface Token extends Base { + value: string; +} + +export interface TokenMap extends Base { + list: Token[]; +} + +export interface Section extends Base { + depth: number; + slug?: string; + id: number; + list?: object[]; +} + +// Main data +export interface Sorted { + sections: Section[]; + cssClasses: CSSClass[]; + colorMaps: ColorMap[]; + modifiers: Modifier; + tokenMaps: TokenMap[]; + fullList: string[]; + usage: GithubDataItem; +} + +// Third party +export interface KSSData { + meta: { + depth: number; + styleGuide: { + meta: { + autoInit: boolean; + files: object; + hasNumericReferences: boolean; + needsDepth: boolean; + needsReferenceNumber: boolean; + needsSort: boolean; + referenceMap: object; + weightMap: object; + }; + data: object; + }; + }; + data: { + header: string; + modifiers?: KSSModifier[]; + reference: string; + description: string; + colors?: { + color: string; + name: string; + description: string; + }[]; + parameters?: KSSParameter[]; + source: { + filename: string; + path: string; + line: number; + }; + 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; + results: [ + { + label: string; + url: string; + } + ]; +} +export interface GithubData { + lastUpdated: string; + formattedDate: string; + formattedTime: string; + classData: { + [key: string]: { + searchDataArr: GithubDataItem[]; + }; + }; +} diff --git a/docs/config/tasks/utils.js b/docs/config/tasks/utils.js index ed0eef41..6f13c565 100644 --- a/docs/config/tasks/utils.js +++ b/docs/config/tasks/utils.js @@ -27,14 +27,14 @@ const generateName = (str) => { }; const generateTemplate = async (str) => { - const isFile = str.includes('.html'); - let template = str; - if (isFile) { - const codePath = `${docsStyles}${str}`; - template = fs.readFileSync(codePath, 'utf-8'); - } - return template; -} + const isFile = str.includes('.html'); + let template = str; + if (isFile) { + const codePath = `${docsStyles}${str}`; + template = fs.readFileSync(codePath, 'utf-8'); + } + return template; +}; const renderTemplate = async (template, data) => { const env = nunjucks.configure('./assets/scss'); @@ -45,14 +45,13 @@ const renderTemplate = async (template, data) => { // eslint-disable-next-line no-console console.log(error); } - return rendered -} + return rendered; +}; // If string is .classname, make it just classname const stripSelector = (str) => { - return str[0] === '.' ? str.substring(1) : str -} - + return str[0] === '.' ? str.substring(1) : str; +}; const readUsageInfo = async () => { let github = {}; @@ -66,13 +65,17 @@ const readUsageInfo = async () => { }; const findUsageInfo = (usageInfo, className) => { - return typeof usageInfo.classData[stripSelector(className)] !== - 'undefined' - ? usageInfo.classData[stripSelector(className)].searchDataArr - : []; -} + const data = + typeof usageInfo.classData[className] !== 'undefined' + ? usageInfo.classData[className].searchDataArr + : []; + return { + className, + data, + }; +}; -const slugify = text => { +const slugify = (text) => { return text .toString() .toLowerCase() @@ -83,10 +86,44 @@ const slugify = text => { .replace(/-+$/, ''); }; -const stripTags = str => { +const stripTags = (str) => { return str.replace(/(<([^>]+)>)/gi, ''); }; +const getDetails = (description, name) => { + const isHelperStr = '{{isHelper}}'; + const isHelper = description.includes(isHelperStr); + const isRecipeStr = '{{isRecipe}}'; + const isRecipe = description.includes(isRecipeStr); + const isTool = name.includes('@'); + const keywordsStr = /Keywords: (.*)/; + const keywordsMatch = keywordsStr.exec(description); + + const filteredDesc = description + .replace(isHelperStr, '') + .replace(isRecipeStr, '') + .replace(keywordsStr, ''); + return { + details: { + isHelper, + isRecipe, + isTool, + keywordsMatch, + }, + description: filteredDesc, + }; +}; + +const convertArrayToObject = (array, key) => { + const initialValue = {}; + return array.reduce((obj, item) => { + return { + ...obj, + [item[key]]: item, + }; + }, initialValue); +}; + module.exports = { findUsageInfo, generateClassName, @@ -97,4 +134,6 @@ module.exports = { slugify, stripSelector, stripTags, + getDetails, + convertArrayToObject, }; diff --git a/docs/config/ts/hello.js b/docs/config/ts/hello.js deleted file mode 100644 index 21def93a..00000000 --- a/docs/config/ts/hello.js +++ /dev/null @@ -1,223 +0,0 @@ -var __assign = (this && this.__assign) || function () { - __assign = Object.assign || function(t) { - for (var s, i = 1, n = arguments.length; i < n; i++) { - s = arguments[i]; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) - t[p] = s[p]; - } - return t; - }; - return __assign.apply(this, arguments); -}; -var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { - function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } - return new (P || (P = Promise))(function (resolve, reject) { - function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } - function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } - function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } - step((generator = generator.apply(thisArg, _arguments || [])).next()); - }); -}; -var __generator = (this && this.__generator) || function (thisArg, body) { - var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; - return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; - function verb(n) { return function (v) { return step([n, v]); }; } - function step(op) { - if (f) throw new TypeError("Generator is already executing."); - while (_) try { - if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; - if (y = 0, t) op = [op[0] & 2, t.value]; - switch (op[0]) { - case 0: case 1: t = op; break; - case 4: _.label++; return { value: op[1], done: false }; - case 5: _.label++; y = op[1]; op = [0]; continue; - case 7: op = _.ops.pop(); _.trys.pop(); continue; - default: - if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } - if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } - if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } - if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } - if (t[2]) _.ops.pop(); - _.trys.pop(); continue; - } - op = body.call(thisArg, _); - } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } - if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; - } -}; -var _this = this; -var fs = require('fs-extra'); -var kss = require('kss'); -var _a = require('../tasks/utils'), slugify = _a.slugify, generateName = _a.generateName, generateClassName = _a.generateClassName, generateTemplate = _a.generateTemplate, readUsageInfo = _a.readUsageInfo, stripSelector = _a.stripSelector, findUsageInfo = _a.findUsageInfo, renderTemplate = _a.renderTemplate; -var _b = require('../../config/paths.js'), docsStyles = _b.docsStyles, siteURL = _b.siteURL; -var _c = require('passes-wcag'), passesWcagAaLargeText = _c.passesWcagAaLargeText, passesWcagAa = _c.passesWcagAa, passesWcagAaa = _c.passesWcagAaa; -var GITHUB_URL = 'https://github.com/texastribune/queso-ui/blob/master'; -function createSection(config) { - var type = config.type, name = config.name, id = config.id, depth = config.depth, description = config.description, location = config.location; - return config; -} -function createItem(config, modifiers, usageInfo) { - return __awaiter(this, void 0, void 0, function () { - var modifierData, modifierList; - return __generator(this, function (_a) { - switch (_a.label) { - case 0: - modifierData = []; - modifierList = []; - if (!modifiers) return [3 /*break*/, 2]; - modifierList = modifiers.map(function (modifier) { - return stripSelector(modifier.data.name); - }); - return [4 /*yield*/, Promise.all(modifiers.map(function (modifier) { - return createModifier({ - name: modifier.data.name, - className: stripSelector(modifier.data.name), - description: modifier.data.description, - type: 'modifier', - location: config.location, - template: config.template, - usage: findUsageInfo(usageInfo, modifier.data.name) - }); - }))]; - case 1: - modifierData = _a.sent(); - _a.label = 2; - case 2: - config.usage = findUsageInfo(usageInfo, config.className); - config.modifiers = modifierData; - config.modifierList = modifierList; - return [2 /*return*/, config]; - } - }); - }); -} -function createModifier(config) { - return __awaiter(this, void 0, void 0, function () { - var _a; - return __generator(this, function (_b) { - switch (_b.label) { - case 0: - _a = config; - return [4 /*yield*/, renderTemplate(config.template, config)]; - case 1: - _a.preview = _b.sent(); - return [2 /*return*/, config]; - } - }); - }); -} -function createColor(config) { - config.check = { - aa: passesWcagAa(config.value, '#fff'), - aaLargeText: passesWcagAaLargeText(config.value, '#fff'), - aaa: passesWcagAaa(config.value, '#fff') - }; - return config; -} -function createColorMap(config) { - return config; -} -function createAll(section, usageInfo) { - return __awaiter(this, void 0, void 0, function () { - var meta, data, ref, id, depth, modifiers, header, description, source, colors, markup, location, base, colorMap, className, config, _a, _b; - return __generator(this, function (_c) { - switch (_c.label) { - case 0: - meta = section.meta, data = section.data; - ref = data.reference[0]; - id = Number(ref); - depth = meta.depth; - modifiers = data.modifiers, header = data.header, description = data.description, source = data.source, colors = data.colors, markup = data.markup; - location = GITHUB_URL + "/" + source.path + "#L" + source.line; - base = { name: header, description: description, location: location }; - if (!(colors && colors.length > 0)) return [3 /*break*/, 1]; - colorMap = colors.map(function (color) { - var name = color.name, description = color.description; - return createColor({ - type: 'color', - name: name, - description: description, - location: location, - value: color.color - }); - }); - return [2 /*return*/, createColorMap(__assign(__assign({}, base), { type: 'colorMap', list: colorMap }))]; - case 1: - if (!(meta.depth < 3)) return [3 /*break*/, 2]; - // create a section - return [2 /*return*/, createSection(__assign(__assign({}, base), { type: 'section', id: id, - depth: depth }))]; - case 2: - className = generateClassName(base.name); - _a = [__assign({}, base)]; - _b = { label: generateName(base.name), type: 'item', id: id, depth: 2, className: className }; - return [4 /*yield*/, generateTemplate(markup)]; - case 3: - _b.template = _c.sent(); - return [4 /*yield*/, renderTemplate(markup, className)]; - case 4: - config = __assign.apply(void 0, _a.concat([(_b.preview = _c.sent(), _b)])); - return [4 /*yield*/, createItem(config, modifiers, usageInfo)]; - case 5: return [2 /*return*/, _c.sent()]; - } - }); - }); -} -function sortByType(arr) { - var sections = []; - var items = []; - var itemsSlim = []; - var colorMaps = []; - var modifiers = []; - arr.forEach(function (entry) { - var type = entry.type; - switch (type) { - case 'section': - sections.push(entry); - break; - case 'item': - items.push(entry); - break; - case 'colorMap': - colorMaps.push(entry); - break; - } - }); - // pull out modifiers - items.forEach(function (item) { - if (item.modifiers) { - // modifiers.push(item.modifiers as Modifier); - item.modifiers.forEach(function (modifier) { - modifiers.push(modifier); - }); - // modifiers.push(item as Modifier); - var itemSlim = __assign({}, item); - delete itemSlim.modifiers; - itemsSlim.push(itemSlim); - } - }); - var sorted = { sections: sections, items: itemsSlim, colorMaps: colorMaps, modifiers: modifiers }; - return sorted; -} -var processComments = function (directory) { return __awaiter(_this, void 0, void 0, function () { - var data, usageInfo, all, sorted; - return __generator(this, function (_a) { - switch (_a.label) { - case 0: return [4 /*yield*/, kss.traverse(directory, { markdown: true })]; - case 1: - data = (_a.sent()).data; - return [4 /*yield*/, readUsageInfo()]; - case 2: - usageInfo = _a.sent(); - return [4 /*yield*/, Promise.all(data.sections.map(function (section) { return createAll(section, usageInfo); }))]; - case 3: - all = _a.sent(); - sorted = sortByType(all); - return [4 /*yield*/, fs.outputFile('./docs/dist/data-sorted.json', JSON.stringify(sorted, null, 2))]; - case 4: - _a.sent(); - return [2 /*return*/]; - } - }); -}); }; -processComments('./assets/scss/'); diff --git a/docs/config/ts/hello.ts b/docs/config/ts/hello.ts deleted file mode 100644 index 4104ac5e..00000000 --- a/docs/config/ts/hello.ts +++ /dev/null @@ -1,299 +0,0 @@ -const fs = require('fs-extra'); -const kss = require('kss'); -const { - slugify, - generateName, - generateClassName, - generateTemplate, - readUsageInfo, - stripSelector, - findUsageInfo, - renderTemplate, -} = require('../tasks/utils'); -const { docsStyles, siteURL } = require('../../config/paths.js'); - -const { - passesWcagAaLargeText, - passesWcagAa, - passesWcagAaa, -} = require('passes-wcag'); - -const GITHUB_URL = 'https://github.com/texastribune/queso-ui/blob/master'; - -interface Base { - name: string; - description: string; - type: string; - location: string; -} -interface Item extends Base { - depth: number; - id: number; - className: string; - template?: string; - preview: string; - label: string; - usage?: (string | GithubDataItem)[]; - modifiers?: Modifier[]; - modifierList?: string[]; -} -interface Modifier extends Base { - className: string; - usage?: (string | GithubDataItem)[]; - preview?: string; - template?: string; -} -interface Color extends Base { - value: string; - check?: { - aa: boolean; - aaa: boolean; - aaLargeText: boolean; - }; -} -interface ColorMap extends Base { - list: Color[]; -} -interface Variable extends Base { - value: string; -} -interface Section extends Base { - depth: number; - slug?: string; - id: number; - list?: object[]; -} - -// Main data -interface Sorted { - sections: Section[]; - items: Item[]; - colorMaps: ColorMap[]; - modifiers: Modifier[] | string[]; -} - -// Third party -interface KSSData { - meta: { - depth: number; - styleGuide: { - meta: { - autoInit: boolean; - files: object; - hasNumericReferences: boolean; - needsDepth: boolean; - needsReferenceNumber: boolean; - needsSort: boolean; - referenceMap: object; - weightMap: object; - }; - data: object; - }; - }; - data: { - header: string; - modifiers?: KSSModifier[]; - reference: string; - description: string; - colors?: { - color: string; - name: string; - description: string; - }[]; - source: { - filename: string; - path: string; - line: number; - }; - markup: string; - }; -} -interface KSSModifier { - data: { - name: string; - description: string; - className: string; - }; -} -interface GithubDataItem { - repo: string; - total_count: number; - results: [ - { - label: string; - url: string; - } - ]; -} -interface GithubData { - lastUpdated: string; - formattedDate: string; - formattedTime: string; - classData: { - [key: string]: { - searchDataArr: GithubDataItem[]; - }; - }; -} - -function createSection(config: Section) { - const { type, name, id, depth, description, location } = config; - return config; -} - -async function createItem( - config: Item, - modifiers: KSSModifier[] | undefined, - usageInfo: GithubData -) { - let modifierData: Modifier[] = []; - let modifierList: string[] = []; - if (modifiers) { - modifierList = modifiers.map((modifier) => - stripSelector(modifier.data.name) - ); - modifierData = await Promise.all( - modifiers.map((modifier: KSSModifier) => - createModifier({ - name: modifier.data.name, - className: stripSelector(modifier.data.name), - description: modifier.data.description, - type: 'modifier', - location: config.location, - template: config.template, - usage: findUsageInfo(usageInfo, modifier.data.name), - }) - ) - ); - } - config.usage = findUsageInfo(usageInfo, config.className); - config.modifiers = modifierData; - config.modifierList = modifierList; - return config; -} - -async function createModifier(config: Modifier) { - config.preview = await renderTemplate(config.template, config); - return config; -} - -function createColor(config: Color) { - config.check = { - aa: passesWcagAa(config.value, '#fff'), - aaLargeText: passesWcagAaLargeText(config.value, '#fff'), - aaa: passesWcagAaa(config.value, '#fff'), - }; - return config; -} - -function createColorMap(config: ColorMap) { - return config; -} - -async function createAll(section: KSSData, usageInfo: GithubData) { - const { meta, data } = section; - const ref = data.reference[0]; - const id = Number(ref); - const { depth } = meta; - const { modifiers, header, description, source, colors, markup } = data; - const location = `${GITHUB_URL}/${source.path}#L${source.line}`; - const base = { name: header, description, location }; - if (colors && colors.length > 0) { - // create a color map - const colorMap = colors.map((color) => { - const { name, description } = color; - return createColor({ - type: 'color', - name, - description, - location, - value: color.color, - }); - }); - return createColorMap({ - ...base, - type: 'colorMap', - list: colorMap, - }); - } else if (meta.depth < 3) { - // create a section - return createSection({ - ...base, - type: 'section', - id, - depth, - }); - } else { - const className = generateClassName(base.name); - const config = { - ...base, - label: generateName(base.name), - type: 'item', - id, - depth: 2, - className, - template: await generateTemplate(markup), - preview: await renderTemplate(markup, className), - }; - return await createItem(config, modifiers, usageInfo); - } -} - -function sortByType(arr: (Item | ColorMap | Section)[]) { - const sections: Section[] = []; - const items: Item[] = []; - const itemsSlim: Item[] = []; - const colorMaps: ColorMap[] = []; - const modifiers: Modifier[] = []; - arr.forEach((entry: Item | ColorMap | Section) => { - const { type } = entry; - switch (type) { - case 'section': - sections.push(entry as Section); - break; - case 'item': - items.push(entry as Item); - break; - case 'colorMap': - colorMaps.push(entry as ColorMap); - break; - } - }); - // pull out modifiers - items.forEach((item) => { - if (item.modifiers) { - // modifiers.push(item.modifiers as Modifier); - item.modifiers.forEach((modifier: Modifier) => { - modifiers.push(modifier as Modifier); - }); - // modifiers.push(item as Modifier); - const itemSlim = { - ...item, - }; - delete itemSlim.modifiers; - itemsSlim.push(itemSlim as Item); - } - }); - - const sorted: Sorted = { sections, items: itemsSlim, colorMaps, modifiers }; - return sorted; -} - -const processComments = async (directory: string) => { - const { data } = await kss.traverse(directory, { markdown: true }); - // github data from s3 - const usageInfo = await readUsageInfo(); - - const all: (Section | Item | ColorMap)[] = await Promise.all( - data.sections.map((section: KSSData) => createAll(section, usageInfo)) - ); - - // separate by type - const sorted = sortByType(all); - await fs.outputFile( - './docs/dist/data-sorted.json', - JSON.stringify(sorted, null, 2) - ); -}; - -processComments('./assets/scss/'); diff --git a/docs/src/data/docs.js b/docs/src/data/docs.js new file mode 100644 index 00000000..b39a5c61 --- /dev/null +++ b/docs/src/data/docs.js @@ -0,0 +1,12 @@ +/** + * Export style data + * + */ +const styleDocRunner = require('../../build/config/tasks/style-doc2'); +const { docsStyles } = require('../../config/paths.js'); + +module.exports = async () => { + // build doc data and template + const styles = await styleDocRunner(docsStyles); + return styles; +}; diff --git a/docs/src/index.njk b/docs/src/index.njk index 08620abd..d89b0767 100644 --- a/docs/src/index.njk +++ b/docs/src/index.njk @@ -21,4 +21,6 @@ layout: base.njk {% endif %} {% endfor %} - \ No newline at end of file + + +
{{ docs.fullList | dump}}
\ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 79ae172e..21919ddd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5470,6 +5470,15 @@ "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", "dev": true }, + "linkify-it": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-3.0.2.tgz", + "integrity": "sha512-gDBO4aHNZS6coiZCKVhSNh43F9ioIL4JwRjLZPkoLIY4yZFwg264Y5lu2x6rb1Js42Gh6Yqm2f6L2AJcnkzinQ==", + "dev": true, + "requires": { + "uc.micro": "^1.0.1" + } + }, "locate-path": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", @@ -5479,6 +5488,19 @@ "p-locate": "^4.1.0" } }, + "markdown-it": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-11.0.0.tgz", + "integrity": "sha512-+CvOnmbSubmQFSA9dKz1BRiaSMV7rhexl3sngKqFyXSagoA3fBdJQ8oZWtRy2knXdpDXaBw44euz37DeJQ9asg==", + "dev": true, + "requires": { + "argparse": "^1.0.7", + "entities": "~2.0.0", + "linkify-it": "^3.0.1", + "mdurl": "^1.0.1", + "uc.micro": "^1.0.5" + } + }, "p-limit": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", diff --git a/package.json b/package.json index 9b9b571d..892be307 100644 --- a/package.json +++ b/package.json @@ -9,10 +9,10 @@ "lint": "npm run lint:css && npm run lint:js", "deploy": "push-dir --dir=docs/dist --branch=gh-pages", "build": "SITE_ENV=production node docs/config/tasks/build.js && SITE_ENV=production eleventy --pathprefix=queso-ui", - "dev": "SITE_ENV=development node docs/config/tasks/build.js && SITE_ENV=development eleventy --serve", + "dev": "npm run compile && SITE_ENV=development node docs/config/tasks/build.js && SITE_ENV=development eleventy --serve", "test": "npm run lint && npm run build", "release": "np --any-branch", - "type": "tsc ./docs/config/ts/hello.ts && node ./docs/config/ts/hello.js" + "compile": "tsc" }, "files": [ "/assets" diff --git a/tsconfig.json b/tsconfig.json index 60b062f1..21fde440 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,14 +8,14 @@ "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */ "lib": ["es6"], /* Specify library files to be included in the compilation. */ "allowJs": true, /* Allow javascript files to be compiled. */ - // "checkJs": true, /* Report errors in .js files. */ + "checkJs": false, /* Report errors in .js files. */ // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ // "declaration": true, /* Generates corresponding '.d.ts' file. */ // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ // "sourceMap": true, /* Generates corresponding '.map' file. */ // "outFile": "./", /* Concatenate and emit output to single file. */ - "outDir": "./docs/build/", /* Redirect output structure to the directory. */ - "rootDir": "./docs/config/ts", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ + "outDir": "./docs/build", /* Redirect output structure to the directory. */ + "rootDir": "./docs", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ // "composite": true, /* Enable project compilation */ // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ // "removeComments": true, /* Do not emit comments to output. */ @@ -63,8 +63,13 @@ // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ /* Advanced Options */ - "resolveJsonModule": true, /* Include modules imported with '.json' extension */ + "resolveJsonModule": false, /* Include modules imported with '.json' extension */ "skipLibCheck": true, /* Skip type checking of declaration files. */ "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ - } + }, + "exclude": [ + "./docs/build", + "./docs/src", + "./docs/dist" + ] }