Merge pull request #185 from umbraco/Release/2022-03-31

Release/2022 03 31

Author: iOvergaard

.gitattributes

@@ -0,0 +1,21 @@
+# Set the default behavior, in case people don't have core.autocrlf set.
+* text=auto
+
+# Explicitly declare text files you want to always be normalized and converted
+# to native line endings on checkout.
+*.ts text eol=lf
+*.js text eol=lf
+*.cjs text eol=lf
+*.mjs text eol=lf
+*.json text eol=lf
+*.html text eol=lf
+*.md text eol=lf
+*.hbs text eol=lf
+
+# Declare files that will always have CRLF line endings on checkout.
+# *.sln text eol=crlf
+
+# Denote all files that are truly binary and should not be modified.
+*.png binary
+*.jpg binary
+*.gif binary

.github/ISSUE_TEMPLATE/01_bug_report.yml

@@ -0,0 +1,51 @@
+---
+name: 🐛 Bug Report
+description: "File a bug report, if you've discovered a problem."
+labels:
+  - 'bug'
+  - 'needs triage'
+body:
+  - type: input
+    id: 'version'
+    attributes:
+      label: "Which *exact* UI Library version are you using? For example: 1.0.1 - don't just write v1."
+      description: 'The number can usually be found in the package.json file or by writing `npm ls <package>`. Please also specify if you use the `uui` bundle or a specific package.'
+    validations:
+      required: true
+  - type: textarea
+    id: 'summary'
+    attributes:
+      label: 'Bug summary'
+      description: 'Write a short summary of the bug.'
+      placeholder: >
+        Try to pinpoint it as much as possible.
+
+        Try to state the actual problem, and not just what you think the solution might be.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: 'Specifics'
+      description: 'Remember that you can format code and logs nicely with the `<>` button'
+      placeholder: >
+        Mention the URL where this bug occurs, if applicable
+
+        Please mention if you've checked it in other browsers as well
+
+        Please include full error messages and screenshots, gifs or mp4 videos if applicable
+  - type: textarea
+    attributes:
+      label: 'Steps to reproduce'
+      description: 'How can we reproduce the problem?'
+      placeholder: >
+        Please include screenshots, gifs or mp4 videos if applicable
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: 'Expected result / actual result'
+      description: 'What did you expect that would happen and what is the actual result of the above steps?'
+      placeholder: >
+        Describe the intended/desired outcome after you did the steps mentioned.
+
+        Describe the behaviour of the bug

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,11 @@
+blank_issues_enabled: false
+contact_links:
+  - name: 💡 Features and ideas
+    url: https://github.com/umbraco/Umbraco.UI/discussions/new?category=ideas
+    about: Start a new discussion when you have ideas or feature requests, eventually discussions can turn into plans.
+  - name: ⁉️ Support Question
+    url: https://our.umbraco.com
+    about: This issue tracker is NOT meant for support questions. If you have a question, please join us on the forum.
+  - name: 🔐 Security Issue
+    url: https://umbraco.com/about-us/trust-center/security-and-umbraco/how-to-report-a-vulnerability-in-umbraco/
+    about: Learn more on how to report security issues.

.github/pull_request_template.md

@@ -25,7 +25,7 @@
 
 <!--- Go over all the following points, and put an `x` in all the boxes that apply.  If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
 
-- [ ] If my change required a change to the documentation, I have updated the documentation in this pull request.
+- [ ] If my change requires a change to the documentation, I have updated the documentation in this pull request.
 - [ ] I have read the **[CONTRIBUTING](<(https://github.com/umbraco/Umbraco.UI/blob/dev/docs/CONTRIBUTING.md)>)** document.
+- [ ] I confirm that to my knowledge the contribution looks original and that the [contributor is presumably allowed to share it](https://github.com/umbraco/Umbraco.UI/blob/dev/docs/CONTRIBUTING.md#ownership-and-copyright).
 - [ ] I have added tests to cover my changes.
-- [ ] All new and existing tests passed.

.github/workflows/azure-static-web-apps-delightful-beach-055ecb503.yml

@@ -11,31 +11,7 @@ on:
       - main
 
 jobs:
-  test:
-    # The type of runner that the job will run on
-    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [16.x]
-
-    # Steps represent a sequence of tasks that will be executed as part of the job
-    steps:
-      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - uses: actions/checkout@v2
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'npm'
-      - run: npm install
-      - run: npm run lint
-      - run: npm run test
-      - run: npm run build:prod
-
   build_and_deploy_job:
-    needs: test
     if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
     runs-on: ubuntu-latest
     name: Build and Deploy Job

.github/workflows/chromatic.yml

@@ -0,0 +1,58 @@
+# .github/workflows/chromatic.yml
+
+# Workflow name
+name: 'Chromatic'
+
+# Event for the workflow
+on:
+  push:
+    paths:
+      - 'package.json'
+      - 'package-lock.json'
+      - '.github/workflows/chromatic.yml'
+      - '.storybook/**'
+      - '!packages/uui/**'
+      - 'packages/*/package.json'
+      - 'packages/*/lib/**'
+      - 'packages/*/assets/**'
+    branches-ignore:
+      - 'dependabot/*'
+      - 'release/*'
+      - 'Release/*'
+      - 'main'
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+    inputs:
+      sha:
+        description: The SHA-1 hash referring to the commit to check.
+        required: true
+      ref:
+        description: The head branch associated with the pull request.
+        required: true
+
+# List of jobs
+jobs:
+  chromatic-deployment:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v1
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16.x
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          buildScriptName: 'storybook:build'
+          exitOnceUploaded: true
+          onlyChanged: '!(dev)'
+          externals: 'packages/uui-css/lib/**/*.css'
+          untraced: '.storybook/images'

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,38 @@
+name: 'CodeQL'
+
+on:
+  push:
+    branches: [dev, main]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [dev]
+  schedule:
+    - cron: '39 20 * * 3'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: ['typescript']
+        # Learn more about CodeQL language support at https://git.io/codeql-language-support
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v1
+        with:
+          languages: ${{ matrix.language }}
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v1

.github/workflows/publish.yml

@@ -1,28 +1,27 @@
 name: Publish
 
 on:
-   push:
+  push:
     branches:
       - main
 
 jobs:
   build:
     # The type of runner that the job will run on
     runs-on: ubuntu-latest
-    
+
     strategy:
       matrix:
         node-version: [16.x]
 
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
-      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it      
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
       - uses: actions/checkout@v2
         with:
-      # pulls all commits (needed for lerna / semantic release to correctly version)
-          fetch-depth: "0"
-          
-  
+          # pulls all commits (needed for lerna / semantic release to correctly version)
+          fetch-depth: '0'
+
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v2
         with:
@@ -31,6 +30,7 @@ jobs:
       - run: npm -v
       - run: npm ci
 
+      - run: sudo npx playwright install-deps
       - run: npm run test
 
       - name: Authenticate with Registry
@@ -46,4 +46,3 @@ jobs:
         run: npm run lerna:publish
         env:
           NPM_TOKEN: ${{ secrets.UMBRACO_PUBLISH_NPM_TOKEN}}
-  

.github/workflows/tests.yml

@@ -33,5 +33,6 @@ jobs:
           cache: 'npm'
       - run: npm install
       - run: npm run lint
+      - run: sudo npx playwright install-deps
       - run: npm run test
       - run: npm run build:prod

.storybook/main.js

@@ -1,18 +1,22 @@
 const tsconfigPaths = require('vite-tsconfig-paths').default;
-const processLitCSSPlugin =
-  require('../scripts/vite.processLitCSSPlugin').default;
 
 module.exports = {
   stories: ['../packages/**/*.story.ts'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-a11y',
+    '../storyhelpers/storybook-readme/preset.js',
   ],
   core: { builder: 'storybook-builder-vite' },
+  staticDirs: ['./images'],
+
   async viteFinal(config, { configType }) {
     // customize the Vite config here
 
+    const processLitCSSPlugin = (
+      await import('../scripts/processLitCSSPlugin.mjs')
+    ).default;
     config.plugins.push(processLitCSSPlugin());
 
     if (configType === 'DEVELOPMENT') {