Merge pull request #103 from patrickcate/scaffold-project

Initial project setup and components

Author: patrickcate

.browserslistrc

@@ -0,0 +1,5 @@
+> 1%
+last 2 versions
+Firefox ESR
+not dead
+not ie

.commitlintrc.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] }

.cz-config.js

@@ -0,0 +1,59 @@
+'use strict'
+
+module.exports = {
+  types: [
+    { value: 'feat', name: '✨ feat: A new feature' },
+    { value: 'fix', name: '🐛 fix: A bug fix' },
+    { value: 'docs', name: '📝 docs: Documentation only changes' },
+    {
+      value: 'style',
+      name: '🎨 style: Changes that do not affect the meaning of the code\n(white-space, formatting, missing semi-colons, etc)',
+    },
+    {
+      value: 'refactor',
+      name: '♻️ refactor: A code change that neither fixes a bug nor adds a feature',
+    },
+    {
+      value: 'perf',
+      name: '⚡ perf: A code change that improves performance',
+    },
+    {
+      value: 'test',
+      name: '✅ test: Adding missing tests or stories (example scopes: Cypress, Storybook)',
+    },
+    {
+      value: 'build',
+      name: '🔨 build: Changes that affect the build system or external dependencies (example scopes: Vite, npm, hygen)',
+    },
+    {
+      value: 'ci',
+      name: '⚙️ ci: Changes to our CI configuration files and scripts (example scopes: GitHub Actions, Cypress, Storybook)',
+    },
+    {
+      value: 'chore',
+      name: '👷 chore: Changes to the build process or auxiliary tools\nand libraries such as documentation generation',
+    },
+    { value: 'revert', name: '⏪ revert: Reverts a previous commit' },
+    { value: 'WIP', name: '🚧 WIP: Work in progress' },
+  ],
+
+  // override the messages, defaults are as follows
+  messages: {
+    type: "Select the type of change that you're committing:",
+    scope: '\nDenote the SCOPE of this change (optional):',
+    // used if allowCustomScopes is true
+    // customScope: 'Denote the SCOPE of this change:',
+    subject: 'Write a SHORT, IMPERATIVE tense description of the change:\n',
+    body: 'Provide a LONGER description of the change (optional). Use "|" to break new line:\n',
+    breaking: 'List any BREAKING CHANGES (optional):\n',
+    footer:
+      'List any ISSUES CLOSED by this change (optional). E.g.: #31, #34:\n',
+    confirmCommit: 'Are you sure you want to proceed with the commit above?',
+  },
+  skipQuestions: ['scope'],
+  allowCustomScopes: false,
+  allowBreakingChanges: ['feat', 'fix'],
+
+  // limit subject length
+  subjectLimit: 100,
+}

.editorconfig

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

.eslintignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+dist-ssr

.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  env: {
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:cypress/recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:prettier/recommended',
+  ],
+  globals: {
+    defineProps: 'readonly',
+    defineEmits: 'readonly',
+  },
+  rules: {
+    // override/add rules settings here, such as:
+    // 'vue/no-unused-vars': 'error'
+    'vue/script-setup-uses-vars': 'error',
+  },
+}

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.gitignore

@@ -0,0 +1,13 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+# Cypress testing artifacts.
+cypress/examples
+cypress/videos
+cypress/screenshots
+
+# Storybook artifacts.
+.storybook/examples

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit $1

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.nvmrc

@@ -0,0 +1 @@
+14

.prettierignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+dist-ssr
+.nvmrc
+CHANGELOG.md
+package-lock.json

.prettierrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  arrowParens: 'avoid',
+  bracketSpacing: true,
+  endOfLine: 'lf',
+  htmlWhitespaceSensitivity: 'strict',
+  bracketSameLine: false,
+  jsxSingleQuote: true,
+  printWidth: 80,
+  proseWrap: 'never',
+  quoteProps: 'as-needed',
+  semi: false,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'es5',
+  useTabs: false,
+  vueIndentScriptAndStyle: false,
+}

.storybook/main.js

@@ -0,0 +1,21 @@
+const path = require('path')
+const { loadConfigFromFile, mergeConfig } = require('vite')
+
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  core: {
+    builder: 'storybook-builder-vite',
+  },
+  async viteFinal(config, { configType }) {
+    const { config: userConfig } = await loadConfigFromFile(
+      path.resolve(__dirname, '../vite.config.ts')
+    )
+
+    return mergeConfig(config, {
+      ...userConfig,
+      // manually specify plugins to avoid conflict
+      plugins: [],
+    })
+  },
+}

.storybook/preview.js

@@ -0,0 +1,11 @@
+import '../node_modules/uswds/dist/css/uswds.min.css'
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["johnsoncodehk.volar"]
+}

README.md

@@ -0,0 +1,8 @@
+# Vue USWDS
+
+A Vue 3 implementation of the [USWDS](https://designsystem.digital.gov).
+
+## Recommended IDE Setup
+
+- [VSCode](https://code.visualstudio.com)
+- [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)

_templates/new/component/component.ejs.t

@@ -0,0 +1,36 @@
+---
+to: src/components/<%= h.changeCase.pascal(component_name) %>/<%= h.changeCase.pascal(component_name) %>.vue
+---
+<% if (api === 'options') { -%>
+<script>
+export default {
+  name: '<%= h.changeCase.pascal(component_name) %>',
+  props: {
+    testProp: {
+      type: String,
+      default: '',
+      validator: () => {
+        return true
+      },
+    },
+  },
+}
+</script>
+<% } else { -%>
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  testProp: {
+    type: String,
+    default: '',
+    validator: () => {
+      return true
+    },
+  },
+})
+</script>
+<% } %>
+<template>
+  <div><slot></slot></div>
+</template>

_templates/new/component/index.ejs.t

@@ -0,0 +1,7 @@
+---
+to: src/components/<%= h.changeCase.pascal(component_name) %>/index.js
+---
+import <%= h.changeCase.pascal(component_name) %> from './<%= h.changeCase.pascal(component_name) %>.vue'
+
+export { <%= h.changeCase.pascal(component_name) %> }
+export default <%= h.changeCase.pascal(component_name) %>

_templates/new/component/prompt.js

@@ -0,0 +1,29 @@
+module.exports = [
+  {
+    type: 'input',
+    name: 'component_name',
+    message: 'What is the name of the component?',
+    validate(value) {
+      if (!value) {
+        return 'Components must have a name.'
+      }
+
+      return true
+    },
+  },
+  {
+    type: 'select',
+    name: 'api',
+    message: 'Which API to start?',
+    choices: [
+      {
+        name: 'options',
+        message: 'Options API',
+      },
+      {
+        name: 'composition',
+        message: 'Composition API',
+      },
+    ],
+  },
+]

_templates/new/component/story.ejs.t

@@ -0,0 +1,34 @@
+---
+to: src/components/<%= h.changeCase.pascal(component_name) %>/<%= h.changeCase.pascal(component_name) %>.stories.js
+---
+import <%= h.changeCase.pascal(component_name) %> from './<%= h.changeCase.pascal(component_name) %>.vue'
+
+const defaultProps = {}
+
+export default {
+  component: <%= h.changeCase.pascal(component_name) %>,
+  title: 'Components/<%= h.changeCase.pascal(component_name) %>',
+  argTypes: {
+    defaultSlot: {
+      control: { type: 'text' },
+    },
+  },
+  args: {
+    defaultSlot: 'Test',
+  },
+}
+
+const DefaultTemplate = (args, { argTypes }) => ({
+  components: { <%= h.changeCase.pascal(component_name) %> },
+  props: Object.keys(argTypes),
+  setup() {
+    return { ...args }
+  },
+  template: `<<%= h.changeCase.pascal(component_name) %>>${args.defaultSlot}</<%= h.changeCase.pascal(component_name) %>>`,
+})
+
+export const Default<%= h.changeCase.pascal(component_name).replace('Usa', '') %> = DefaultTemplate.bind({})
+Default<%= h.changeCase.pascal(component_name).replace('Usa', '') %>.args = {
+  ...defaultProps,
+}
+Default<%= h.changeCase.pascal(component_name).replace('Usa', '') %>.storyName = 'Default'

_templates/new/component/unit.ejs.t

@@ -0,0 +1,13 @@
+---
+to: src/components/<%= h.changeCase.pascal(component_name) %>/<%= h.changeCase.pascal(component_name) %>.test.js
+---
+import '@module/uswds/dist/css/uswds.min.css'
+import { mount } from '@cypress/vue'
+import <%= h.changeCase.pascal(component_name) %> from './<%= h.changeCase.pascal(component_name) %>.vue'
+
+describe('<%= h.changeCase.pascal(component_name) %>', () => {
+  it('renders the component', () => {
+    mount(<%= h.changeCase.pascal(component_name) %>, {})
+    cy.get('.<%= h.changeCase.kebab(component_name) %>').should('exist')
+  })
+})

cypress.json

@@ -0,0 +1,6 @@
+{
+  "component": {
+    "componentFolder": "src/components",
+    "testFiles": "**/*.test.js"
+  }
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/plugins/index.js

@@ -0,0 +1,40 @@
+const path = require('path')
+const { startDevServer } = require('@cypress/vite-dev-server')
+
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+
+  on('dev-server:start', options => {
+    const viteConfig = {
+      configFile: path.resolve(__dirname, '..', '..', 'vite.config.js'),
+      resolve: {
+        alias: {
+          vue: 'vue/dist/vue.esm-bundler.js',
+        },
+      },
+    }
+
+    return startDevServer({ options, viteConfig })
+  })
+
+  return config
+}