Merge branch 'main' into emil/clock-icon

.github/workflows/template-test.yml

@@ -0,0 +1,69 @@
+name: Template Tests
+
+on: [push]
+
+jobs:
+  template-test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Get Yarn cache path
+        id: yarn-cache
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - name: Checkout branch
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16.x
+
+      - name: Load Yarn cache
+        uses: actions/cache@v2
+        with:
+          path: ${{ steps.yarn-cache.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Remove Postinstall Script
+        run: npm pkg set scripts.postinstall="echo no-postinstall"
+
+      - name: Install Dependencies
+        run: yarn install --frozen-lockfile
+        env:
+          CI: true
+
+      - name: Create component with template
+        run: yarn new:component --name ComponentName
+
+      - name: Re-link Dependencies
+        run: yarn install --frozen-lockfile
+        env:
+          CI: true
+
+      - name: Build Components
+        run: yarn build:components
+
+      - name: Check global types
+        run: |
+          yarn vue-tsc --noEmit -p . 
+          yarn tsc --noEmit --project ./tsconfig.react.json
+          yarn vue-tsc --noEmit --project ./tsconfig.vue.json
+
+      - name: Lint all files
+        run: yarn eslint .
+
+      # run cypress component tests
+      - name: Cypress run CT
+        uses: cypress-io/github-action@v5
+        with:
+          component: true
+          record: true
+          browser: chrome
+          spec: components/ComponentName/**/*
+        env:
+          # Recommended: pass the GitHub token lets this action correctly
+          # determine the unique run id necessary to re-run the checks
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

_templates/component/new/components_ComponentName_react_ComponentNameReact.cy.tsx.ejs.t

@@ -5,12 +5,14 @@ to: components/<%= h.inflection.camelize(name, false) %>/react/<%= h.inflection.
 
 import * as React from 'react'
 import { mount } from 'cypress/react18'
-import <%= h.inflection.camelize(name, false) %>Story from './<%= h.inflection.camelize(name, false) %>.rootstory'
+import <%= h.inflection.camelize(name, false) %> from './<%= h.inflection.camelize(name, false) %>'
 import assertions from '../assertions'
 
 describe('<%= h.inflection.camelize(name, false) %>', () => {
-  function mountStory(options: Parameters<typeof <%= h.inflection.camelize(name, false) %>Story>[0] = {}) {
-    mount(<<%= h.inflection.camelize(name, false) %>Story {...options} />)
+  function mountStory(
+    options: Parameters<typeof <%= h.inflection.camelize(name, false) %>>[0] = { id: '1' },
+  ) {
+    mount(<<%= h.inflection.camelize(name, false) %> {...options} />)
   }
   assertions(mountStory)
 })

_templates/component/new/components_ComponentName_vue_ComponentName.vue.ejs.t

@@ -2,9 +2,10 @@
 to: components/<%= h.inflection.camelize(name, false) %>/vue/<%= h.inflection.camelize(name, false) %>.vue
 ---
 <template>
-  <div :id="id" class="bg-jade-100" :class="class">
+  <div :id="id" class="bg-jade-100">
     <label>{{ label }}</label>
     Template for <%= h.inflection.camelize(name, false) %>
+    <p>{{ SharedSettings.foo }}</p>
   </div>
 </template>
 
@@ -15,11 +16,9 @@ withDefaults(
   defineProps<{
     id: string
     label?: string
-    class?: string
   }>(),
   {
     label: undefined,
-    class: undefined,
-  }
+  },
 )
 </script>

_templates/component/new/components_ComponentName_vue_ComponentNameVue.cy.tsx.ejs.t

@@ -3,12 +3,15 @@ to: components/<%= h.inflection.camelize(name, false) %>/vue/<%= h.inflection.ca
 ---
 /// <reference types="cypress" />
 import { mount } from 'cypress/vue'
+import type { ComponentProps } from '../../vue-utils'
 import assertions from '../assertions'
-import <%= h.inflection.camelize(name, false) %>Story from './<%= h.inflection.camelize(name, false) %>.rootstory'
+import <%= h.inflection.camelize(name, false) %> from './<%= h.inflection.camelize(name, false) %>.vue'
 
 describe('<<%= h.inflection.camelize(name, false) %>/>', () => {
-  function mountStory(options: Parameters<typeof <%= h.inflection.camelize(name, false) %>Story>[0] = {}) {
-    mount(() => <<%= h.inflection.camelize(name, false) %>Story {...options} />)
+  function mountStory(
+    options: ComponentProps<typeof <%= h.inflection.camelize(name, false) %>> = { id: '1' },
+  ) {
+    mount(() => <<%= h.inflection.camelize(name, false) %> {...options} />)
   }
   assertions(mountStory)
 })

_templates/component/new/components_ComponentName_vue_tsconfig.build.json.ejs.t

@@ -2,7 +2,7 @@
 to: components/<%= h.inflection.camelize(name, false) %>/vue/tsconfig.build.json
 ---
 {
-  "extends": "../../../tsconfig.vue.json",
+  "extends": "../../../tsconfig.vue.build.json",
   "include": ["./*.vue", "./index.ts"],
   "compilerOptions": {
     "outDir": "dist",

components/Button/vue/ButtonVue.cy.tsx

@@ -4,7 +4,6 @@ import { mount } from 'cypress/vue'
 import assertions from '../assertions'
 import Button from './Button.vue'
 import ButtonStory from './Button.rootstory'
-import { cyDeviceLaptopX24 } from '@cypress-design/icon-registry'
 
 describe('<Button />', { viewportHeight: 600, viewportWidth: 1000 }, () => {
   function mountStory(options: Parameters<typeof ButtonStory>[0] = {}) {

components/Modal/vue/ModalVue.cy.tsx

@@ -1,16 +1,11 @@
-import { ref } from 'vue'
+import { Component, ref } from 'vue'
 import { mount } from 'cypress/vue'
+import { ComponentProps } from '../../vue-utils'
 import assertions from '../assertions'
 import Modal from './Modal.vue'
 
 describe('<Modal/>', () => {
-  function mountStory(
-    options: {
-      title?: string
-      helpLink?: string
-      fullscreen?: boolean
-    } = {}
-  ) {
+  function mountStory(options: ComponentProps<typeof Modal> = {}) {
     const visibleModal = ref(false)
     mount(() => (
       <div>
@@ -28,5 +23,6 @@ describe('<Modal/>', () => {
       </div>
     ))
   }
+
   assertions(mountStory)
 })

components/Spinner/vue/SpinnerVue.cy.tsx

@@ -1,7 +1,5 @@
 /// <reference types="cypress" />
-
 import { mount } from 'cypress/vue'
-
 import Spinner from './Spinner.vue'
 
 describe('<Spinner />', () => {

components/StatusIcon/vue/StatusIconVue.cy.tsx

@@ -1,7 +1,7 @@
 /// <reference types="cypress" />
 import { mount } from 'cypress/vue'
 
-import { sizes, statuses } from '@cypress-design/constants-statusicon'
+import { sizes, statuses, variants } from '@cypress-design/constants-statusicon'
 import { StatusIcon } from '@cypress-design/vue-statusicon'
 import StatusIconStory from './StatusIcon.rootstory'
 import { computed, defineComponent, ref } from 'vue'
@@ -61,12 +61,17 @@ describe('StatusIcon', () => {
   const VariableStatusIcon = defineComponent({
     setup() {
       const sizeSlider = ref(3)
-      const size = computed(() => sizes[sizeSlider.value])
+      const size = computed(
+        () => sizes[sizeSlider.value] as (typeof sizes)[number],
+      )
       const statusSlider = ref(0)
-      const status = computed(() => Object.keys(statuses)[statusSlider.value])
+      const status = computed(
+        () =>
+          Object.keys(statuses)[statusSlider.value] as keyof typeof statuses,
+      )
       const variantSlider = ref(0)
       const variant = computed(
-        () => ['simple', 'solid', 'outline'][variantSlider.value],
+        () => variants[variantSlider.value] as (typeof variants)[number],
       )
 
       return () => {

components/Tabs/vue/TabsVue.cy.tsx

@@ -1,19 +1,13 @@
 /// <reference types="cypress" />
 import { ref } from 'vue'
 import { mount } from 'cypress/vue'
+import type { ComponentProps } from '../../vue-utils'
 import assertions from '../assertions'
+import type { Tab } from '../constants'
 import Tabs from './Tabs.vue'
-import type { Tab, variants } from '../constants'
 
 describe('<Tabs/>', () => {
-  function mountStory(
-    options: {
-      tabs: Tab[]
-      activeId?: string
-      variant?: keyof typeof variants
-      [key: `data-${string}`]: any
-    } = { tabs: [] },
-  ) {
+  function mountStory(options: ComponentProps<typeof Tabs> = { tabs: [] }) {
     mount(() => (
       <div class="m-4">
         <Tabs {...options} />

components/Tag/react/Tag.cy.tsx

@@ -2,12 +2,44 @@
 
 import * as React from 'react'
 import { mount } from 'cypress/react18'
-import TagStory from './Tag.rootstory'
+import Tag from './Tag'
+import { SizeClasses, ColorClasses } from '../constants'
 import assertions from '../assertions'
 
 describe('Tag', () => {
   function mountStory() {
-    mount(<TagStory />)
+    mount(
+      <div className="flex flex-row flex-wrap items-start justify-center bg-gray-700 gap-6">
+        {(Object.keys(SizeClasses) as Array<keyof typeof SizeClasses>).map(
+          (size) => {
+            return (
+              <div className="flex flex-col items-center gap-3 justify-center my-4 p-4 bg-white rounded-lg">
+                <h3 className="text-right">{size}</h3>
+                {(
+                  Object.keys(ColorClasses) as Array<keyof typeof ColorClasses>
+                ).map((color) => {
+                  return (
+                    <>
+                      <div className="flex items-center justify-center">
+                        <Tag size={size} color={color}>
+                          {`{Tag}`}
+                        </Tag>
+                      </div>
+                      <div className="flex items-center justify-center">
+                        <Tag size={size} color={color} dark>
+                          {`{Tag}`}
+                        </Tag>
+                      </div>
+                    </>
+                  )
+                })}
+              </div>
+            )
+          },
+        )}
+      </div>,
+    )
   }
+
   assertions(mountStory)
 })

components/Tag/vue/Tag.cy.tsx

@@ -1,11 +1,43 @@
 /// <reference types="cypress" />
 import { mount } from 'cypress/vue'
 import assertions from '../assertions'
-import TagStory from './Tag.rootstory'
+import Tag from './Tag.vue'
+import { SizeClasses, ColorClasses } from '../constants'
 
 describe('<Tag/>', () => {
   function mountStory() {
-    mount(() => <TagStory />)
+    mount(() => (
+      <div class="flex flex-row flex-wrap items-start justify-center bg-gray-700 gap-6">
+        {(Object.keys(SizeClasses) as Array<keyof typeof SizeClasses>).map(
+          (size) => {
+            return (
+              <div class="flex flex-col items-center gap-3 justify-center my-4 p-4 bg-white rounded-lg">
+                <h3 class="text-right">{size}</h3>
+                {(Object.keys(ColorClasses) as Array<keyof typeof ColorClasses>)
+                  .reverse()
+                  .map((color) => {
+                    return (
+                      <>
+                        <div class="flex items-center justify-center">
+                          <Tag size={size} color={color}>
+                            {`{Tag}`}
+                          </Tag>
+                        </div>
+                        <div class="flex items-center justify-center">
+                          <Tag size={size} color={color} dark>
+                            {`{Tag}`}
+                          </Tag>
+                        </div>
+                      </>
+                    )
+                  })}
+              </div>
+            )
+          },
+        )}
+      </div>
+    ))
   }
+
   assertions(mountStory)
 })