@abcnews/aunty 16.0.1 → 17.0.0-next.2

package/src/generators/component/templates/preact/component.test.tsx

@@ -1,18 +0,0 @@
-import { h } from 'preact';
-import render from 'preact-render-to-string';
-import htmlLooksLike from 'html-looks-like';
-
-import <%= className %> from '.';
-
-describe('<%= className %>', () => {
-  test('It renders', () => {
-    const actual = render(<<%= className %> />);
-    const expected = `
-      <div>
-        Find me in {{ ... }}
-      </div>
-    `;
-
-    htmlLooksLike(actual, expected);
-  });
-});

package/src/generators/component/templates/preact/component.tsx

@@ -1,14 +0,0 @@
-import { h<% if (isTS) { %>, FunctionalComponent<% } %> } from 'preact';
-import styles from './styles.scss';
-<% if (isTS) { %>
-type <%= className %>Props = {}
-<% } %>
-const <%= className %><% if (isTS) { %>: FunctionalComponent<<%= className %>Props><% } %> = () => {
-  return (
-    <div className={styles.root}>
-      Find me in <strong>src/components/<%= className %></strong>
-    </div>
-  );
-};
-
-export default <%= className %>;

package/src/generators/component/templates/react/component-with-d3.test.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-
-import <%= className %> from '.';
-
-describe('<%= className %>', () => {
-  test('It renders', () => {
-    const component = renderer.create(<<%= className %> />);
-
-    let tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

package/src/generators/component/templates/react/component-with-d3.tsx

@@ -1,44 +0,0 @@
-import { select<% if (isTS) { %>, Selection<% } %> } from 'd3-selection';
-import React, { useEffect, useRef } from 'react';
-import styles from './styles.scss';
-<% if (isTS) { %>
-type <%= className %>Props = {
-  color?: string;
-}
-<% } %>
-const <%= className %><% if (isTS) { %>: React.FC<<%= className %>Props><% } %> = ({ color = 'black' }) => {
-  const root = useRef<% if (isTS) { %><HTMLDivElement | null><% } %>(null);
-  const svg = useRef<% if (isTS) { %><Selection<SVGSVGElement, unknown, null, undefined> | null><% } %>(null);
-  const g = useRef<% if (isTS) { %><Selection<SVGGElement, unknown, null, undefined> | null><% } %>(null);
-  const rect = useRef<% if (isTS) { %><Selection<SVGRectElement, unknown, null, undefined> | null><% } %>(null);
-
-  useEffect(() => {
-    svg.current = select(root.current)
-      .append('svg')
-      .attr('width', 400)
-      .attr('height', 300);
-
-    g.current = svg.current.append('g');
-
-    rect.current = g.current
-      .append('rect')
-      .attr('x', 0)
-      .attr('y', 0)
-      .attr('rx', 3)
-      .attr('ry', 3)
-      .attr('width', '100%')
-      .attr('height', '100%');
-  }, []);
-
-  useEffect(() => {
-    if (!g.current) {
-      return;
-    }
-
-    g.current.attr('fill', color);
-  }, [color]);
-
-  return <div ref={root} className={styles.root}></div>;
-};
-
-export default <%= className %>;

package/src/generators/component/templates/react/component.test.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-
-import <%= className %> from '.';
-
-describe('<%= className %>', () => {
-  test('It renders', () => {
-    const component = renderer.create(<<%= className %> />);
-
-    let tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-});

package/src/generators/component/templates/react/component.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import styles from './styles.scss';
-<% if (isTS) { %>
-type <%= className %>Props = {}
-<% } %>
-const <%= className %><% if (isTS) { %>: React.FC<<%= className %>Props><% } %> = () => {
-  return (
-    <div className={styles.root}>
-      Find me in <strong>src/components/<%= className %></strong>
-    </div>
-  );
-}
-
-export default <%= className %>;

package/src/generators/component/templates/svelte/component-with-d3.svelte

@@ -1,46 +0,0 @@
-<script<% if (isTS) { %> lang="ts"<% } %>>
-  export let color<% if (isTS) { %>: string<% } %> = 'black';
-
-  import { select } from 'd3-selection';<% if (isTS) { %>
-  import type { Selection } from 'd3-selection';<% } %>
-  import { afterUpdate, onMount } from 'svelte';
-
-  let root<% if (isTS) { %>: HTMLDivElement<% } %>;
-  let svg<% if (isTS) { %>: Selection<SVGSVGElement, unknown, null, undefined><% } %>;
-  let g<% if (isTS) { %>: Selection<SVGGElement, unknown, null, undefined><% } %>;
-  let rect<% if (isTS) { %>: Selection<SVGRectElement, unknown, null, undefined><% } %>;
-
-  onMount(() => {
-    svg = select(root)
-      .append('svg')
-      .attr('width', 400)
-      .attr('height', 300);
-
-    g = svg.append('g').attr('fill', color);
-
-    rect = g
-      .append('rect')
-      .attr('x', 0)
-      .attr('y', 0)
-      .attr('rx', 3)
-      .attr('ry', 3)
-      .attr('width', '100%')
-      .attr('height', '100%');
-  });
-
-  afterUpdate(() => {
-    g.attr('fill', color);
-  });
-</script>
-
-<div bind:this={root} />
-
-<style lang="scss">
-  div {
-    border: 1px solid rgb(255, 115, 0);
-    padding: 20px;
-    text-align: center;
-    color: black;
-  }
-</style>
-

package/src/generators/component/templates/svelte/component-with-d3.test.ts

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/svelte'
-import <%= className %> from './<%= className %>.svelte';
-
-describe('<%= className %>', () => {
-  it('renders a snapshot', () => {
-    const { container } = render(<%= className %>);
-
-    expect(container).toMatchSnapshot();
-  });
-});

package/src/generators/component/templates/svelte/component.svelte

@@ -1,17 +0,0 @@
-<script<% if (isTS) { %> lang="ts"<% } %>>
-
-</script>
-
-<div>
-  Find me in
-  <strong>src/components/<%= className %></strong>
-</div>
-
-<style lang="scss">
-  div {
-    border: 1px solid rgb(255, 115, 0);
-    padding: 20px;
-    text-align: center;
-    color: black;
-  }
-</style>

package/src/generators/component/templates/svelte/component.test.ts

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/svelte'
-import <%= className %> from './<%= className %>.svelte';
-
-describe('<%= className %>', () => {
-  it('renders a snapshot', () => {
-    const { container } = render(<%= className %>);
-
-    expect(container).toMatchSnapshot();
-  });
-});

package/src/generators/project/index.js

@@ -1,244 +0,0 @@
-// Native
-const path = require('path');
-
-// External
-const getAllPaths = require('get-all-paths');
-const makeDir = require('make-dir');
-const requireg = require('requireg');
-const Generator = require('yeoman-generator');
-const { to: wrap } = require('await-to-js');
-const importLazy = require('import-lazy')(require);
-
-// Ours
-const { OUTPUT_DIRECTORY_NAME } = require('../../constants');
-const { cmd, hvy, opt } = require('../../utils/color');
-const { success } = require('../../utils/logging');
-const { installDependencies } = require('../../utils/npm');
-const { combine } = require('../../utils/structures');
-const { sluggify } = require('../../utils/text');
-const { projectExists } = require('../../utils/ftp');
-const { log, warn, info } = importLazy('../../utils/logging');
-
-module.exports = class extends Generator {
-  constructor(args, opts) {
-    super(args, {
-      ...opts,
-      localConfigOnly: true
-    });
-
-    this.argument('name', {
-      description: `Project name. Create this directory if ${opt('--here')} is not specified`,
-      required: false
-    });
-    this.option('here', { description: `Assume ${opt('<name>')} is current working directory`, type: Boolean });
-    this.option('template', { description: 'Type of project [basic|preact|react|svelte]', type: String });
-  }
-
-  usage() {
-    return `${cmd('aunty generate project')} -- ${opt('[options] [<name>]')}
-
-  Two shorthands are available - ${cmd('aunty new')} and ${cmd('aunty init')} - for quick project creation.
-
-Shorthand examples (assuming xyz is your project name):
-
-  ${cmd('aunty new')}        ==>    ${cmd('aunty generate project')}
-  ${cmd('aunty new')} ${opt('xyz')}    ==>    ${cmd('aunty generate project')} -- ${opt('xyz')}
-  ${cmd('aunty init')}       ==>    ${cmd('aunty generate project')} -- ${opt('--here')}
-`;
-  }
-
-  async prompting() {
-    let prompts = [];
-
-    if (this.options.here) {
-      const currentDirectory = path.basename(process.cwd());
-
-      info(`Info: Using currect directory name as project name:`, currentDirectory);
-      log('Checking project name. This may take a few seconds...');
-
-      const [err, exists] = await wrap(projectExists(sluggify(currentDirectory)));
-
-      if (exists)
-        warn(
-          'Warning: Project with the same name detected externally. ' +
-            'Danger of data loss if you continue. ' +
-            'Press ctrl+c to exit and rename project directory.'
-        );
-
-      if (err)
-        warn(
-          'Warning: Unable to check if project name already exists, most likely ' +
-            'due to a connection or credentials error. Please check manually before deploying.\n'
-        );
-
-      this.options.projectName = currentDirectory;
-    } else {
-      prompts.push({
-        type: 'input',
-        name: 'projectName',
-        message: 'What is your project called?',
-        default: this.options.projectName || 'New Project',
-        validate: async input => {
-          log('\nChecking project name. This may take a few seconds...');
-
-          const [err, exists] = await wrap(projectExists(sluggify(input)));
-
-          if (exists)
-            return (
-              'Error: Project seems to aleady exist on the FTP server and is in ' +
-              'danger of being overwritten. Please try a different name.'
-            );
-
-          if (err)
-            warn(
-              'Warning: Unable to check if project name already exists, most likely ' +
-                'due to a connection or credentials error. Please check manually before deploying.\n'
-            );
-
-          return true;
-        }
-      });
-    }
-
-    if (!this.options.template) {
-      prompts.push({
-        type: 'list',
-        name: 'template',
-        message: 'What type of project is it?',
-        choices: [
-          { name: 'Basic', value: 'basic' },
-          { name: 'Preact', value: 'preact' },
-          { name: 'React', value: 'react' },
-          { name: 'Svelte', value: 'svelte' }
-        ]
-      });
-    }
-
-    prompts.push({
-      type: 'confirm',
-      name: 'typescript',
-      message: 'Will you be authoring your project in TypeScript?',
-      default: true
-    });
-
-    prompts.push({
-      type: 'confirm',
-      name: 'odyssey',
-      message: 'Will this project render components inside an Odyssey?',
-      default: false
-    });
-
-    const answers = await this.prompt(prompts);
-
-    this.options = combine(this.options, answers);
-
-    this.options.projectName = this.options.projectName.replace(/[^\w\-\_\s]/g, '');
-
-    this.options.projectNameSlug = sluggify(this.options.projectName);
-
-    this.options.projectNameFlat = this.options.projectNameSlug.replace(/-/g, '');
-
-    if (this.options.here) {
-      this.options.path = process.cwd();
-    } else {
-      this.options.path = process.cwd() + '/' + this.options.projectNameSlug;
-    }
-  }
-
-  async configuring() {
-    const directory = this.options.path;
-
-    await makeDir(directory);
-    process.chdir(directory);
-    this.destinationRoot(directory);
-  }
-
-  writing() {
-    const context = {
-      OUTPUT_DIRECTORY_NAME,
-      projectName: this.options.projectName,
-      projectNameSlug: this.options.projectNameSlug,
-      projectNameFlat: this.options.projectNameFlat,
-      projectType: this.options.template,
-      isTS: this.options.typescript,
-      isOdyssey: this.options.odyssey,
-      authorName: this.user.git.name(),
-      authorEmail: this.user.git.email()
-    };
-
-    const hasSFCs = this.options.template === 'svelte';
-    const templateDirs = [this.options.template, '_common'].concat(hasSFCs ? [] : ['_non_sfc']);
-    const templateDirPaths = templateDirs.map(dir => this.templatePath(dir));
-    const pathExclusions = [].concat(this.options.typescript ? [] : ['tsconfig.json']);
-    const pathReplacements = templateDirPaths
-      .map(dirPath => [`${dirPath}/`, ''])
-      .concat(this.options.typescript ? [] : [[/\.tsx?/, '.js']], [['_.', '.']]);
-
-    getAllPaths(...templateDirPaths).forEach(filePath => {
-      if (pathExclusions.some(exclusion => filePath.includes(exclusion))) {
-        return;
-      }
-
-      this.fs.copyTpl(
-        filePath,
-        this.destinationPath(
-          pathReplacements.reduce((filePath, replacement) => filePath.replace(...replacement), filePath)
-        ),
-        context
-      );
-    });
-  }
-
-  async install() {
-    let auntyVersion;
-
-    try {
-      auntyVersion = requireg('@abcnews/aunty/package.json').version;
-    } catch (ex) {
-      // Nothing
-    }
-
-    const devDependencies = [`@abcnews/aunty${auntyVersion ? `@${auntyVersion}` : ''}`].concat(
-      this.options.typescript ? ['@types/jest', '@types/webpack-env'] : []
-    );
-    const dependencies = ['@abcnews/alternating-case-to-object', '@abcnews/env-utils', '@abcnews/mount-utils'];
-
-    switch (this.options.template) {
-      case 'preact':
-        devDependencies.push('html-looks-like', 'preact-render-to-string');
-        dependencies.push('preact');
-        break;
-      case 'react':
-        devDependencies.push(
-          'react-test-renderer',
-          ...(this.options.typescript ? ['@types/react', '@types/react-dom', '@types/react-test-renderer'] : [])
-        );
-        dependencies.push('react', 'react-dom');
-        break;
-      case 'svelte':
-        devDependencies.push('@testing-library/svelte');
-        dependencies.push('svelte@5');
-        break;
-      default:
-        break;
-    }
-
-    const allDependencies = [].concat(devDependencies).concat(dependencies);
-    const projectDirectoryName = this.options.path.split('/').reverse()[0];
-
-    if (allDependencies.includes(projectDirectoryName)) {
-      throw new Error(
-        `npm will refuse to install a package ("${projectDirectoryName}") which matches the project directory name.`
-      );
-    }
-
-    await installDependencies(devDependencies.sort(), ['--save-dev'], this.log);
-    await installDependencies(dependencies.sort(), null, this.log);
-  }
-
-  end() {
-    const where = this.options.here ? 'the current directory' : `./${this.options.projectNameSlug}`;
-
-    success(`Created ${hvy(this.options.projectName)} project in ${hvy(where)}`);
-  }
-};

package/src/generators/project/templates/_common/.editorconfig

@@ -1,12 +0,0 @@
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = false
-
-[*.md]
-trim_trailing_whitespace = false

package/src/generators/project/templates/_common/.prettierrc

@@ -1,6 +0,0 @@
-{
-  "arrowParens": "avoid",
-  "printWidth": 120,
-  "singleQuote": true,
-  "trailingComma": "none"
-}

package/src/generators/project/templates/_common/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) <%= new Date().getFullYear() %> ABC News
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/src/generators/project/templates/_common/README.md

@@ -1,3 +0,0 @@
-# <%= projectName %>
-
-A project generated from [aunty](https://github.com/abcnews/aunty)'s `<%= projectType %>` project template.

package/src/generators/project/templates/_common/_.gitignore

@@ -1,12 +0,0 @@
-# dependencies
-/node_modules
-
-# environment
-.env
-
-# output
-/<%= OUTPUT_DIRECTORY_NAME %>
-
-# misc
-.DS_Store
-npm-debug.log

package/src/generators/project/templates/_common/package.json

@@ -1,18 +0,0 @@
-{
-  "name": "<%= projectNameSlug %>",
-  "version": "1.0.0-pre",
-  "description": "A project generated from aunty's <%= projectType %> project template.",
-  "license": "MIT",
-  "private": true,
-  "contributors": [
-    "<%= authorName %> <<%= authorEmail %>>"
-  ],
-  "aunty": {
-    "type": "<%= projectType %>"
-  },
-  "scripts": {
-    "start": "aunty serve",
-    "dev": "aunty serve",
-    "test": "aunty test"
-  }
-}

package/src/generators/project/templates/_common/public/index.html

@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title><%= projectName %></title>
-    <!-- If you add `extractCSS:true` to your build config, add the <link> below -->
-    <!-- <link rel="stylesheet" href="index.css" /> -->
-    <script src="index.js"></script>
-    <!-- If you add `addModernJS:true` to your build config, replace the <script> above with the ones below -->
-    <!-- <script type="module" src="index_modern.js"></script> -->
-    <!-- <script nomodule src="index.js"></script> -->
-  </head>
-  <body>
-    <div data-mount id="<%= projectNameFlat %>X42YtextZtrue"></div><% if (isOdyssey) { %>
-    <!-- Mock Odyssey's loaded event so the `whenOdysseyLoaded` promise resolves -->
-    <script>
-      window.dispatchEvent(new CustomEvent('odyssey:api'));
-    </script><% } %>
-  </body>
-</html>

package/src/generators/project/templates/_common/src/components/Worm/worm.svg

@@ -1,4 +0,0 @@
-<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300">
-  <path fill="#<% if (isTS) { %>fff<% } else { %>000<% } %>" d="M57.733.28c15.15-.238 33.573 5.428 46 20.76 5.63 5.447 15.973 31.627 15.973 31.627l61.955 164.537c7.97 19.756 31.93 21.236 38.965 1.488L239.87 166.8l32.858 86.48c-15.973 29.157-31.435 36.304-49.765 42.966-21.346 6.68-46.932 4.477-65.245-6.9-6.086-3.947-22.06-14.318-32.86-40.516L59.616 66.494V232.53l24.417-70.16 31.325 87.586c-4.57 20.113-19.116 36.918-36.02 44.822-18.496 8.717-40.555 5.63-57.277-4.945C5.41 277.48.715 262.903 0 236.96L.22 57.366c1.9-29.91 21.017-46.193 37.794-53.486C45.67 1.16 48.944.418 57.734.28z"/>
-  <path fill="#<% if (isTS) { %>fff<% } else { %>000<% } %>" d="M343.146 299.71c-15.15.267-33.572-5.427-46.02-20.733-5.628-5.445-15.954-31.625-15.954-31.625L219.22 82.814c-7.987-19.784-31.93-21.264-38.965-1.5L161.01 133.21l-32.86-86.48c15.955-29.132 31.453-36.306 49.765-42.985 21.364-6.68 46.95-4.45 65.245 6.926 6.104 3.95 22.06 14.32 32.86 40.52l65.243 182.31V67.49l-24.397 70.16-31.344-87.586c4.57-20.14 19.135-36.926 36.04-44.82 18.478-8.7 40.555-5.64 57.258 4.942 16.668 12.327 21.347 26.93 22.06 52.845l-.237 179.626c-1.864 29.908-21 46.2-37.795 53.484-7.603 2.712-10.893 3.442-19.702 3.57z"/>
-</svg>

package/src/generators/project/templates/_common/tsconfig.json

@@ -1,4 +0,0 @@
-{
-  "extends": "@abcnews/aunty/ts/config.json",
-  "include": ["src/**/*", "node_modules/@abcnews/aunty/ts/*"]
-}

package/src/generators/project/templates/_non_sfc/src/components/App/styles.scss

@@ -1,23 +0,0 @@
-.root {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  min-height: 320px;
-  background-color: #<% if (isTS) { %>3178c7<% } else { %>f0db4e<% } %>;
-  color: #<% if (isTS) { %>fff<% } else { %>000<% } %>;
-  text-align: center;
-
-  h1 {
-    margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
-    font-size: 24px !important;
-    font-weight: normal !important;
-    line-height: normal !important;
-    letter-spacing: normal !important;
-  }
-}
-
-

package/src/generators/project/templates/_non_sfc/src/components/ErrorBox/styles.scss

@@ -1,16 +0,0 @@
-.root {
-  position: fixed;
-  overflow: auto;
-  left: 0;
-  top: 0;
-  z-index: 10000;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 2rem;
-  width: 100vw;
-  height: 100vh;
-  background-color: #900;
-  color: #fff;
-  font-family: Menlo, Consolas, monospace;
-  font-size: large;
-}

package/src/generators/project/templates/_non_sfc/src/components/Worm/styles.scss

@@ -1,4 +0,0 @@
-.root {
-  width: 240px;
-  height: auto;
-}

package/src/generators/project/templates/basic/src/components/App/index.test.ts

@@ -1,9 +0,0 @@
-import App from './index';<% if (isTS) { %>
-import type { AppProps } from './index';<% } %>
-
-test('it renders', () => {
-  const props<% if (isTS) { %>: AppProps<% } %> = { x: 42, y: 'text', z: true };
-  const component = new App(props);
-
-  expect(component.el.innerHTML).toContain(JSON.stringify(props));
-});

package/src/generators/project/templates/basic/src/components/App/index.ts

@@ -1,22 +0,0 @@
-import Worm from '../Worm';
-import styles from './styles.scss';
-<% if (isTS) { %>
-export type AppProps = {
-  x: number;
-  y: string;
-  z: boolean;
-}
-<% } %>
-export default class App {<% if (isTS) { %>
-  el: Element;
-<% } %>
-  constructor({ x, y, z }<% if (isTS) { %>: AppProps<% } %>) {
-    this.el = document.createElement('div');
-    this.el.className = styles.root;
-    this.el.innerHTML = `
-      ${new Worm().el.outerHTML}
-      <pre>${JSON.stringify({ x, y, z })}</pre>
-      <h1><%= projectName %></h1>
-    `;
-  }
-}