Setup 4.x branch (#673)

* Cleaning up the 4.x branch to allow for starting fresh.

* Switching to a mostly fresh install of Vue 3.

* Updated README to reflect new options.

* Pulled in a few items to the package.json file from the old version.

* Added an entry point for components.

* Removed Fractal theme sass file.

* Added banner component, CSS file. Refactored click-a11y.js and included it in index.html. Updated application to display the banner.

* More tweaks to banner.

* Added headline component and related files.

* Added Storybook.

* Attempting to get the docs build working again.

* Updating dependencies, adding lockfile for yarn, updating GH Actions workflow.

* Added in some CSS files. Moved storybook stuff and started modifying the button example.

* Adding license field.

* Trying a different license.

* Removed license from package.json and updated install command.

* Updated workflow to include debugging message and to use old build path. Adjustments to button component.

* Added configuration for a BASE_URL to .storybook/main.js and then set that variable in the workflow file. Per storybookjs/storybook#17433.

* Trying a different order.

* Fixed BASE_URL.

* Starting to theme the application.

* Re-factoring the headline, button, banner, and main application.

* Updating storybook UI and button.

* Updated storybook theme.

* Added HTML panel to Storybook. Added some headline examples and refactored the component.

* Added outline and font options to button component. Updated color options for button. Refactored button story for less code and updated options.

* A few more updates to button and headline compponents.

* fix up some extra spannage

Co-authored-by: Gary Ridgway <[email protected]>

.eslintrc.cjs

@@ -0,0 +1,25 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+  "root": true,
+  "extends": [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-typescript/recommended",
+    "@vue/eslint-config-prettier"
+  ],
+  "env": {
+    "vue/setup-compiler-macros": true
+  },
+  "overrides": [
+    {
+      "files": [
+        "cypress/integration/**.spec.{js,ts,jsx,tsx}"
+      ],
+      "extends": [
+        "plugin:cypress/recommended"
+      ]
+    }
+  ]
+}

.github/dependabot.yml

@@ -9,17 +9,3 @@ updates:
     time: "14:00"
     timezone: America/Chicago
   open-pull-requests-limit: 10
-  ignore:
-  - dependency-name: "@frctl/mandelbrot"
-    versions:
-    - 1.7.0
-    - 1.8.1
-    - 1.8.2
-  - dependency-name: "@frctl/fractal"
-    versions:
-    - 1.5.2
-    - 1.5.4
-    - 1.5.5
-  - dependency-name: "@frctl/twig"
-    versions:
-    - 1.2.0

.github/workflows/gh-pages.yml

@@ -4,7 +4,7 @@ name: Update documentation in GitHub Pages
 on:
   push:
     branches:
-      - "3.x"
+      - "4.x"
     tags:
       - '*'
   pull_request:
@@ -25,19 +25,19 @@ jobs:
       (github.event_name != 'pull_request_target' && github.actor != 'dependabot[bot]')
     env:
       TARGET_BRANCH: gh-pages
-      MAIN_BRANCH: 3.x
+      MAIN_BRANCH: 4.x
 
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
       # https://github.com/actions/checkout#readme
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
       - name: Checkout 🛎️
         if: ${{ github.event_name != 'pull_request_target' }}
-        uses: actions/checkout@v2.3.1
+        uses: actions/checkout@v3
 
       - name: Checkout PR 🛎️
         if: ${{ github.event_name == 'pull_request_target' }}
-        uses: actions/checkout@v2.3.1
+        uses: actions/checkout@v3
         with:
           ref: ${{ github.event.pull_request.head.sha }}
 
@@ -66,25 +66,19 @@ jobs:
           echo "target_dir=/docs/" >> $GITHUB_ENV
 
       - name: Setup node
-        uses: actions/setup-node@v2.1.2
+        uses: actions/setup-node@v3
         with:
-          node-version: "14.x"
+          node-version: '16.x'
+          cache: 'yarn'
 
       # Update NPM to 7 to fix https://github.com/actions/setup-node/issues/214.
-      - run: npm install -g npm@7
-      - run: npm -v
-
-      - name: Cache dependencies
-        uses: actions/cache@v2
-        with:
-          path: ~/.npm
-          key: npm-packages-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: npm-packages-
+#      - run: npm install -g npm@7
+#      - run: npm -v
 
-      - run: npm ci
-      - run: npm run docs
+      - run: yarn install --frozen-lockfile
+      - run: BASE_URL=$target_dir$branch/ yarn build-storybook -o www
       # Check to make sure that docs built into www.
-#      - run: ls -lah $GITHUB_WORKSPACE/www
+      - run: ls -lah $GITHUB_WORKSPACE/www
 
       # https://github.com/actions/checkout#readme
       - name: Checkout docs

.gitignore

@@ -1,14 +1,29 @@
-# Folders
-node_modules
-www
-tmp
-npm-debug.log
-
-# Ignore generated css files in components
-src/components/**/*.css
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-# Files
+node_modules
 .DS_Store
+dist
+dist-ssr
+coverage
+*.local
+storybook-static
+
+/cypress/videos/
+/cypress/screenshots/
 
-# Common files
-.idea/
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.storybook/main.js

@@ -0,0 +1,22 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-scss",
+    "@whitespace/storybook-addon-html",
+  ],
+  "framework": "@storybook/vue3",
+  "core": {
+    "builder": "@storybook/builder-vite"
+  },
+  async viteFinal(config, { configType }) {
+    config.base = process.env.BASE_URL || config.base;
+
+    // return the customized config
+    return config;
+  },
+}

.storybook/manager.js

@@ -0,0 +1,8 @@
+// .storybook/manager.js
+
+import { addons } from '@storybook/addons';
+import uidsTheme from './uidsTheme';
+
+addons.setConfig({
+  theme: uidsTheme,
+});

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

.storybook/preview.js

@@ -0,0 +1,16 @@
+import '../src/assets/scss/reset.scss';
+import '../src/assets/scss/fonts.scss';
+import '../src/assets/base.css';
+import '../src/assets/scss/headings.scss';
+import '../src/assets/scss/paragraph.scss';
+import '../src/assets/scss/lists.scss';
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

.storybook/uidsTheme.js

@@ -0,0 +1,35 @@
+// .storybook/YourTheme.js
+
+import { create } from '@storybook/theming';
+import brand_image from '../src/assets/images/uiowa-secondary.svg'
+
+export default create({
+  base: 'light',
+
+  colorPrimary: '#FFCD00',
+  colorSecondary: '#151515',
+
+  // UI
+  appBg: 'white',
+  appContentBg: 'white',
+  appBorderColor: 'grey',
+  appBorderRadius: 0,
+
+  // Typography
+  fontBase: '"Zilla Slab", serif',
+  fontCode: 'monospace',
+
+  // Text colors
+  textColor: '#151515',
+  textInverseColor: 'white',
+
+  // Toolbar default and active colors
+  barTextColor: '#63666A',
+  barSelectedColor: '#151515',
+  barBg: '#FFCD00',
+
+  // Branding
+  brandTitle: 'U of Iowa Design System (UIDS)',
+  brandUrl: 'https://uids.brand.uiowa.edu',
+  brandImage: brand_image,
+});

.vscode/extensions.json

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

README.md

@@ -4,7 +4,7 @@ A design system for the University of Iowa.
 See the documentation at http://uids.brand.uiowa.edu.
 
 ## Documentation
-The documentation is built with Fractal.js. You can build and run a local version to aid in development.
+The documentation uses Vue.js. You can build and run a local version to aid in development.
 
 ### Requirements
 [Node Version Manager (NVM)](https://github.com/nvm-sh/nvm) is used to lock the version of Node to the latest LTS.
@@ -13,19 +13,47 @@ After installing NVM, run `nvm use`. You may need to install the specified versi
 
 The node-gyp package requires a C compiler. If you notice node-gyp errors after installing dependencies, see the instructions for installing a C compiler based on your OS: https://github.com/nodejs/node-gyp#on-macos
 
+## Project Setup
+
 ### Install dependencies
-First, install NPM dependencies:
-```
+
+```sh
 npm ci
 ```
 
-### Start the local server.
-The following command creates and runs a temporary server to view the site locally.
-```
-npm run watch
+### Start the local server
+Compile and hot-reload for development.
+
+```sh
+npm run dev
 ```
 The command will output the server URL to visit in your browser, ex. http://localhost:3000.
 
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Run Unit Tests with [Vitest](https://vitest.dev/)
+
+```sh
+npm run test:unit
+```
+
+### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
+
+```sh
+npm run build
+npm run test:e2e # or `npm run test:e2e:ci` for headless testing
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```
+
 ## Contributing
 While we have not done a perfect job of applying any of these standards, we recommend the following resources as a starting point for best practices that are observed by this project:
 * Writing CSS and HTML: https://codeguide.co/

cypress.json

@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://localhost:5050"
+}

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/integration/example.spec.ts

@@ -0,0 +1,8 @@
+// https://docs.cypress.io/api/introduction/api.html
+
+describe('My First Test', () => {
+  it('visits the app root url', () => {
+    cy.visit('/')
+    cy.contains('h1', 'You did it!')
+  })
+})