@patternfly/quickstarts 2.2.3 → 2.2.4

package/src/utils/PluralResolver.ts

@@ -0,0 +1,356 @@
+/* eslint-disable */
+// @ts-nocheck
+// https://github.com/i18next/i18next/blob/master/src/PluralResolver.js
+
+const sets = [
+  {
+    lngs: [
+      'ach',
+      'ak',
+      'am',
+      'arn',
+      'br',
+      'fil',
+      'gun',
+      'ln',
+      'mfe',
+      'mg',
+      'mi',
+      'oc',
+      'pt',
+      'pt-BR',
+      'tg',
+      'tl',
+      'ti',
+      'tr',
+      'uz',
+      'wa',
+    ],
+    nr: [1, 2],
+    fc: 1,
+  },
+
+  {
+    lngs: [
+      'af',
+      'an',
+      'ast',
+      'az',
+      'bg',
+      'bn',
+      'ca',
+      'da',
+      'de',
+      'dev',
+      'el',
+      'en',
+      'eo',
+      'es',
+      'et',
+      'eu',
+      'fi',
+      'fo',
+      'fur',
+      'fy',
+      'gl',
+      'gu',
+      'ha',
+      'hi',
+      'hu',
+      'hy',
+      'ia',
+      'it',
+      'kk',
+      'kn',
+      'ku',
+      'lb',
+      'mai',
+      'ml',
+      'mn',
+      'mr',
+      'nah',
+      'nap',
+      'nb',
+      'ne',
+      'nl',
+      'nn',
+      'no',
+      'nso',
+      'pa',
+      'pap',
+      'pms',
+      'ps',
+      'pt-PT',
+      'rm',
+      'sco',
+      'se',
+      'si',
+      'so',
+      'son',
+      'sq',
+      'sv',
+      'sw',
+      'ta',
+      'te',
+      'tk',
+      'ur',
+      'yo',
+    ],
+    nr: [1, 2],
+    fc: 2,
+  },
+
+  {
+    lngs: [
+      'ay',
+      'bo',
+      'cgg',
+      'fa',
+      'ht',
+      'id',
+      'ja',
+      'jbo',
+      'ka',
+      'km',
+      'ko',
+      'ky',
+      'lo',
+      'ms',
+      'sah',
+      'su',
+      'th',
+      'tt',
+      'ug',
+      'vi',
+      'wo',
+      'zh',
+    ],
+    nr: [1],
+    fc: 3,
+  },
+
+  { lngs: ['be', 'bs', 'cnr', 'dz', 'hr', 'ru', 'sr', 'uk'], nr: [1, 2, 5], fc: 4 },
+
+  { lngs: ['ar'], nr: [0, 1, 2, 3, 11, 100], fc: 5 },
+  { lngs: ['cs', 'sk'], nr: [1, 2, 5], fc: 6 },
+  { lngs: ['csb', 'pl'], nr: [1, 2, 5], fc: 7 },
+  { lngs: ['cy'], nr: [1, 2, 3, 8], fc: 8 },
+  { lngs: ['fr'], nr: [1, 2], fc: 9 },
+  { lngs: ['ga'], nr: [1, 2, 3, 7, 11], fc: 10 },
+  { lngs: ['gd'], nr: [1, 2, 3, 20], fc: 11 },
+  { lngs: ['is'], nr: [1, 2], fc: 12 },
+  { lngs: ['jv'], nr: [0, 1], fc: 13 },
+  { lngs: ['kw'], nr: [1, 2, 3, 4], fc: 14 },
+  { lngs: ['lt'], nr: [1, 2, 10], fc: 15 },
+  { lngs: ['lv'], nr: [1, 2, 0], fc: 16 },
+  { lngs: ['mk'], nr: [1, 2], fc: 17 },
+  { lngs: ['mnk'], nr: [0, 1, 2], fc: 18 },
+  { lngs: ['mt'], nr: [1, 2, 11, 20], fc: 19 },
+  { lngs: ['or'], nr: [2, 1], fc: 2 },
+  { lngs: ['ro'], nr: [1, 2, 20], fc: 20 },
+  { lngs: ['sl'], nr: [5, 1, 2, 3], fc: 21 },
+  { lngs: ['he', 'iw'], nr: [1, 2, 20, 21], fc: 22 },
+];
+
+const _rulesPluralsTypes = {
+  1: function(n) {
+    return Number(n > 1);
+  },
+  2: function(n) {
+    return Number(n != 1);
+  },
+  3: function(n) {
+    return 0;
+  },
+  4: function(n) {
+    return Number(
+      n % 10 == 1 && n % 100 != 11
+        ? 0
+        : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20)
+        ? 1
+        : 2,
+    );
+  },
+  5: function(n) {
+    return Number(
+      n == 0
+        ? 0
+        : n == 1
+        ? 1
+        : n == 2
+        ? 2
+        : n % 100 >= 3 && n % 100 <= 10
+        ? 3
+        : n % 100 >= 11
+        ? 4
+        : 5,
+    );
+  },
+  6: function(n) {
+    return Number(n == 1 ? 0 : n >= 2 && n <= 4 ? 1 : 2);
+  },
+  7: function(n) {
+    return Number(
+      n == 1 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2,
+    );
+  },
+  8: function(n) {
+    return Number(n == 1 ? 0 : n == 2 ? 1 : n != 8 && n != 11 ? 2 : 3);
+  },
+  9: function(n) {
+    return Number(n >= 2);
+  },
+  10: function(n) {
+    return Number(n == 1 ? 0 : n == 2 ? 1 : n < 7 ? 2 : n < 11 ? 3 : 4);
+  },
+  11: function(n) {
+    return Number(n == 1 || n == 11 ? 0 : n == 2 || n == 12 ? 1 : n > 2 && n < 20 ? 2 : 3);
+  },
+  12: function(n) {
+    return Number(n % 10 != 1 || n % 100 == 11);
+  },
+  13: function(n) {
+    return Number(n !== 0);
+  },
+  14: function(n) {
+    return Number(n == 1 ? 0 : n == 2 ? 1 : n == 3 ? 2 : 3);
+  },
+  15: function(n) {
+    return Number(
+      n % 10 == 1 && n % 100 != 11 ? 0 : n % 10 >= 2 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2,
+    );
+  },
+  16: function(n) {
+    return Number(n % 10 == 1 && n % 100 != 11 ? 0 : n !== 0 ? 1 : 2);
+  },
+  17: function(n) {
+    return Number(n == 1 || (n % 10 == 1 && n % 100 != 11) ? 0 : 1);
+  },
+  18: function(n) {
+    return Number(n == 0 ? 0 : n == 1 ? 1 : 2);
+  },
+  19: function(n) {
+    return Number(
+      n == 1
+        ? 0
+        : n == 0 || (n % 100 > 1 && n % 100 < 11)
+        ? 1
+        : n % 100 > 10 && n % 100 < 20
+        ? 2
+        : 3,
+    );
+  },
+  20: function(n) {
+    return Number(n == 1 ? 0 : n == 0 || (n % 100 > 0 && n % 100 < 20) ? 1 : 2);
+  },
+  21: function(n) {
+    return Number(n % 100 == 1 ? 1 : n % 100 == 2 ? 2 : n % 100 == 3 || n % 100 == 4 ? 3 : 0);
+  },
+  22: function(n) {
+    return Number(n == 1 ? 0 : n == 2 ? 1 : (n < 0 || n > 10) && n % 10 == 0 ? 2 : 3);
+  },
+};
+
+function createRules() {
+  const rules = {};
+  sets.forEach((set) => {
+    set.lngs.forEach((l) => {
+      rules[l] = {
+        numbers: set.nr,
+        plurals: _rulesPluralsTypes[set.fc],
+      };
+    });
+  });
+  return rules;
+}
+
+class PluralResolver {
+  constructor(options = {}) {
+    this.options = options;
+
+    this.rules = createRules();
+  }
+
+  addRule(lng, obj) {
+    this.rules[lng] = obj;
+  }
+
+  getRule(code) {
+    return this.rules[code];
+  }
+
+  needsPlural(code) {
+    const rule = this.getRule(code);
+
+    return rule && rule.numbers.length > 1;
+  }
+
+  getPluralFormsOfKey(code, key) {
+    return this.getSuffixes(code).map((suffix) => key + suffix);
+  }
+
+  getSuffixes(code) {
+    const rule = this.getRule(code);
+
+    if (!rule) {
+      return [];
+    }
+
+    return rule.numbers.map((number) => this.getSuffix(code, number));
+  }
+
+  getSuffix(code, count) {
+    const rule = this.getRule(code);
+
+    if (rule) {
+      // if (rule.numbers.length === 1) return ''; // only singular
+
+      const idx = rule.noAbs ? rule.plurals(count) : rule.plurals(Math.abs(count));
+      let suffix = rule.numbers[idx];
+
+      // special treatment for lngs only having singular and plural
+      if (this.options.simplifyPluralSuffix && rule.numbers.length === 2 && rule.numbers[0] === 1) {
+        if (suffix === 2) {
+          suffix = 'plural';
+        } else if (suffix === 1) {
+          suffix = '';
+        }
+      }
+
+      const returnSuffix = () =>
+        this.options.prepend && suffix.toString()
+          ? this.options.prepend + suffix.toString()
+          : suffix.toString();
+
+      // COMPATIBILITY JSON
+      // v1
+      if (this.options.compatibilityJSON === 'v1') {
+        if (suffix === 1) {
+          return '';
+        }
+        if (typeof suffix === 'number') {
+          return `_plural_${suffix.toString()}`;
+        }
+        return returnSuffix();
+      }
+      if (/* v2 */ this.options.compatibilityJSON === 'v2') {
+        return returnSuffix();
+      }
+      if (
+        /* v3 - gettext index */ this.options.simplifyPluralSuffix &&
+        rule.numbers.length === 2 &&
+        rule.numbers[0] === 1
+      ) {
+        return returnSuffix();
+      }
+      return this.options.prepend && idx.toString()
+        ? this.options.prepend + idx.toString()
+        : idx.toString();
+    }
+
+    //   this.logger.warn(`no plural rule found for: ${code}`);
+    return '';
+  }
+}
+
+export default PluralResolver;

package/src/utils/asciidoc-procedure-parser.ts

@@ -0,0 +1,132 @@
+/* eslint-disable */
+// Brought in from dev to publish this with QS module
+// Dev now imports from here
+
+import { QuickStart, QuickStartTask } from './quick-start-types';
+
+export const ProcQuickStartParser = (
+  quickStart: QuickStart & {
+    spec: {
+      tasks: undefined | QuickStartTask[] | string[];
+    };
+  },
+  environmentVariables?: { [name: string]: string },
+) => {
+  const replaceEnvironmentVariables = (s: string | undefined) =>
+    s?.replace(/\${(\w+)}/, (substring, name) => {
+      return environmentVariables ? ([name] ? environmentVariables[name] : substring) : substring;
+    });
+
+  quickStart.spec.tasks = quickStart.spec.tasks?.map((task: QuickStartTask | string, index) => {
+    let proc: string;
+    let answer: QuickStartTask;
+    if (typeof task === 'string') {
+      proc = task;
+      answer = {};
+    } else {
+      // @ts-ignore
+      proc = task.proc;
+      answer = task;
+      // @ts-ignore
+      delete task.proc;
+    }
+
+    let description = '',
+      procedure,
+      verification,
+      title,
+      summaryFailed,
+      success,
+      reviewFailed: string | undefined,
+      prerequisites;
+    if (proc) {
+      const taskDOM = document.createElement('div');
+      taskDOM.innerHTML = proc;
+
+      // remove the screencapture images
+      taskDOM.querySelectorAll('.imageblock.screencapture').forEach((node) => {
+        node.parentElement?.removeChild(node);
+      });
+
+      title = taskDOM
+        .querySelector('h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child')
+        ?.innerHTML.trim();
+      let sectionBody = taskDOM.querySelector('.sectionbody');
+      if (!sectionBody?.hasChildNodes()) {
+        // possibly in other templates, where we want to look for article
+        sectionBody = taskDOM.querySelector('article');
+      }
+      if (sectionBody) {
+        for (let i = 0; i < sectionBody.children.length || 0; i++) {
+          /**
+          child typically looks like:
+
+          <div class="paragraph|olist|ulist|admonitionblock">
+             <div class="title">Procedure|Prerequisites|Verification|Note|Warning</div>
+             <ol|ul class="arabic">
+               <li>
+               <li>...
+             </ol|ul>
+          </div>
+
+          And the below code extracts the <ol> or <ul>
+          Except for when there is no <div class="title|heading"/>, then the description is extracted
+          in the else if below
+          */
+          const child = sectionBody.children.item(i);
+          // find the title
+          const sectionTitle = child?.querySelector('.heading,.title');
+          // should this section be assigned to a specific section
+          const sectionTitleText = sectionTitle?.textContent?.trim();
+          const isKnownSection = ['Procedure', 'Verification', 'Prerequisites'].includes(
+            sectionTitle?.textContent?.trim(),
+          );
+          if (isKnownSection) {
+            switch (sectionTitleText) {
+              case 'Procedure':
+                procedure = child?.querySelector(':not(.heading):not(.title)')?.outerHTML.trim();
+                break;
+              case 'Verification':
+                verification = child?.querySelector(':not(.heading):not(.title)')?.outerHTML.trim();
+                break;
+              case 'Prerequisites':
+                prerequisites = child
+                  ?.querySelector(':not(.heading):not(.title)')
+                  ?.outerHTML.trim();
+                break;
+            }
+          } else if (!procedure) {
+            // Otherwise if it comes before a procedure it's part of the description
+            description = description + child?.outerHTML.trim();
+          }
+        }
+      }
+      success = taskDOM.querySelector('.qs-summary.success')?.innerHTML.trim();
+      reviewFailed = taskDOM.querySelector('.qs-review.failed')?.innerHTML.trim();
+      summaryFailed = taskDOM.querySelector('.qs-summary.failed')?.innerHTML.trim();
+    }
+
+    answer.title = replaceEnvironmentVariables(answer.title || title);
+    answer.description = replaceEnvironmentVariables(
+      answer.description || `${description} ${prerequisites || ''} ${procedure}`,
+    );
+    answer.review = answer.review || {};
+    answer.review.instructions = replaceEnvironmentVariables(
+      answer.review?.instructions || verification || 'Have you completed these steps?',
+    );
+    answer.review.failedTaskHelp = replaceEnvironmentVariables(
+      answer.review.failedTaskHelp ||
+      reviewFailed ||
+      'This task isn’t verified yet. Try the task again.',
+    );
+    answer.summary = answer.summary || {};
+    answer.summary.success = replaceEnvironmentVariables(
+      answer.summary.success || success || 'You have completed this task!',
+    );
+    answer.summary.failed = replaceEnvironmentVariables(
+      answer.summary.failed || summaryFailed || 'Try the steps again.',
+    );
+    return answer;
+  });
+  return quickStart;
+};

package/src/utils/const.ts

@@ -0,0 +1,10 @@
+import { QuickStartTaskStatus } from './quick-start-types';
+
+export const QUICKSTART_SEARCH_FILTER_KEY = 'keyword';
+export const QUICKSTART_STATUS_FILTER_KEY = 'status';
+export const QUICKSTART_ID_FILTER_KEY = 'quickstart';
+export const QUICKSTART_TASKS_INITIAL_STATES = [
+  QuickStartTaskStatus.INIT,
+  QuickStartTaskStatus.VISITED,
+];
+export const HELP_TOPIC_NAME_KEY = 'topic';

package/src/utils/help-topic-context.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { HelpTopic } from './help-topic-types';
+
+export type HelpTopicContextValues = {
+  helpTopics?: HelpTopic[];
+  setHelpTopics?: React.Dispatch<React.SetStateAction<HelpTopic[]>>;
+  activeHelpTopic?: HelpTopic;
+  setActiveHelpTopicByName?: (helpTopicName: string) => void;
+  filteredHelpTopics?: HelpTopic[];
+  setFilteredHelpTopics?: React.Dispatch<React.SetStateAction<HelpTopic[]>>;
+  loading?: boolean;
+  setLoading?: any;
+};
+
+export const HelpTopicContextDefaults = {
+  helpTopics: [],
+  setHelpTopics: () => {},
+  activeHelpTopic: null,
+  setActiveHelpTopicByName: () => {},
+  filteredHelpTopics: [],
+  setFilteredHelpTopics: () => {},
+  loading: false,
+};
+
+export const HelpTopicContext = React.createContext<HelpTopicContextValues>(
+  HelpTopicContextDefaults,
+);
+
+export const useValuesForHelpTopicContext = (
+  value: HelpTopicContextValues = {},
+): HelpTopicContextValues => {
+  const combinedValue = {
+    ...HelpTopicContextDefaults,
+    ...value,
+  };
+
+  const [loading, setLoading] = React.useState(combinedValue.loading);
+
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  const [helpTopics, setHelpTopics] = React.useState<HelpTopic[]>(combinedValue.helpTopics || []);
+
+  const [activeHelpTopic, setActiveHelpTopic] = React.useState(
+    combinedValue.activeHelpTopic || null,
+  );
+
+  const setActiveHelpTopicByName = React.useCallback(
+    (helpTopicName: string) => {
+      const topic = helpTopics.find((t) => {
+        return t.name === helpTopicName;
+      });
+      if (!helpTopicName) {
+        setActiveHelpTopic(null);
+        return;
+      }
+      setActiveHelpTopic(topic);
+    },
+    [helpTopics],
+  );
+
+  const [filteredHelpTopics, setFilteredHelpTopics] = React.useState(
+    combinedValue.filteredHelpTopics || [],
+  );
+
+  return {
+    helpTopics,
+    setHelpTopics,
+    activeHelpTopic,
+    setActiveHelpTopicByName,
+    filteredHelpTopics,
+    setFilteredHelpTopics,
+    loading,
+    setLoading,
+  };
+};

package/src/utils/help-topic-types.ts

@@ -0,0 +1,16 @@
+export type HelpTopicLink = {
+  href: string;
+  text?: string;
+  // open link in new tab
+  newTab?: boolean;
+  // add PF icon indicating link is external
+  isExternal?: boolean;
+};
+
+export type HelpTopic = {
+  name: string;
+  title: string;
+  tags: string[];
+  content: string;
+  links?: HelpTopicLink[];
+};