diff --git a/.codecov.yml b/.codecov.yml index d5dd1527..32ce4611 100644 --- a/.codecov.yml +++ b/.codecov.yml @@ -6,4 +6,4 @@ codecov: coverage: status: project: off - patch: off \ No newline at end of file + patch: off diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index 63cc1b51..00000000 --- a/.eslintignore +++ /dev/null @@ -1,7 +0,0 @@ -node_modules -dist -auto-imports.d.ts -src/icons -tests/coverage -tests/html -storybook-static diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json deleted file mode 100644 index 1695d75c..00000000 --- a/.eslintrc-auto-import.json +++ /dev/null @@ -1,309 +0,0 @@ -{ - "globals": { - "Component": true, - "ComponentPublicInstance": true, - "ComputedRef": true, - "DEFAULT_POPPER_OPTIONS": true, - "EffectScope": true, - "ExtractDefaultPropTypes": true, - "ExtractPropTypes": true, - "ExtractPublicPropTypes": true, - "InjectionKey": true, - "PropType": true, - "Ref": true, - "VNode": true, - "WritableComputedRef": true, - "asyncComputed": true, - "autoResetRef": true, - "computed": true, - "computedAsync": true, - "computedEager": true, - "computedInject": true, - "computedWithControl": true, - "controlledComputed": true, - "controlledRef": true, - "createApp": true, - "createEventHook": true, - "createGlobalState": true, - "createInjectionState": true, - "createPopper": true, - "createReactiveFn": true, - "createReusableTemplate": true, - "createSharedComposable": true, - "createTemplatePromise": true, - "createUnrefFn": true, - "customRef": true, - "debouncedRef": true, - "debouncedWatch": true, - "defineAsyncComponent": true, - "defineComponent": true, - "eagerComputed": true, - "effectScope": true, - "extendRef": true, - "formatCurrency": true, - "formatInteger": true, - "formatNumber": true, - "generateId": true, - "get": true, - "getCurrentInstance": true, - "getCurrentScope": true, - "getNonRootAttrs": true, - "getRootAttrs": true, - "getRootKeys": true, - "h": true, - "ignorableWatch": true, - "inject": true, - "injectLocal": true, - "isDefined": true, - "isProxy": true, - "isReactive": true, - "isReadonly": true, - "isRef": true, - "makeDestructurable": true, - "markRaw": true, - "nextTick": true, - "onActivated": true, - "onBeforeMount": true, - "onBeforeUnmount": true, - "onBeforeUpdate": true, - "onClickOutside": true, - "onDeactivated": true, - "onErrorCaptured": true, - "onKeyStroke": true, - "onLongPress": true, - "onMounted": true, - "onRenderTracked": true, - "onRenderTriggered": true, - "onScopeDispose": true, - "onServerPrefetch": true, - "onStartTyping": true, - "onUnmounted": true, - "onUpdated": true, - "pausableWatch": true, - "provide": true, - "provideLocal": true, - "reactify": true, - "reactifyObject": true, - "reactive": true, - "reactiveComputed": true, - "reactiveOmit": true, - "reactivePick": true, - "readonly": true, - "ref": true, - "refAutoReset": true, - "refDebounced": true, - "refDefault": true, - "refThrottled": true, - "refWithControl": true, - "resolveComponent": true, - "resolveRef": true, - "resolveUnref": true, - "set": true, - "shallowReactive": true, - "shallowReadonly": true, - "shallowRef": true, - "syncRef": true, - "syncRefs": true, - "templateRef": true, - "throttledRef": true, - "throttledWatch": true, - "toRaw": true, - "toReactive": true, - "toRef": true, - "toRefs": true, - "toValue": true, - "triggerRef": true, - "tryOnBeforeMount": true, - "tryOnBeforeUnmount": true, - "tryOnMounted": true, - "tryOnScopeDispose": true, - "tryOnUnmounted": true, - "unref": true, - "unrefElement": true, - "until": true, - "useActiveElement": true, - "useAnimate": true, - "useArrayDifference": true, - "useArrayEvery": true, - "useArrayFilter": true, - "useArrayFind": true, - "useArrayFindIndex": true, - "useArrayFindLast": true, - "useArrayIncludes": true, - "useArrayJoin": true, - "useArrayMap": true, - "useArrayReduce": true, - "useArraySome": true, - "useArrayUnique": true, - "useAsyncQueue": true, - "useAsyncState": true, - "useAttrs": true, - "useBase64": true, - "useBattery": true, - "useBluetooth": true, - "useBreakpoints": true, - "useBroadcastChannel": true, - "useBrowserLocation": true, - "useCached": true, - "useClipboard": true, - "useClipboardItems": true, - "useCloned": true, - "useColorMode": true, - "useConfirmDialog": true, - "useCounter": true, - "useCssModule": true, - "useCssVar": true, - "useCssVars": true, - "useCurrentElement": true, - "useCycleList": true, - "useDark": true, - "useDateFormat": true, - "useDebounce": true, - "useDebounceFn": true, - "useDebouncedRefHistory": true, - "useDeviceMotion": true, - "useDeviceOrientation": true, - "useDevicePixelRatio": true, - "useDevicesList": true, - "useDisplayMedia": true, - "useDocumentVisibility": true, - "useDraggable": true, - "useDropZone": true, - "useElementBounding": true, - "useElementByPoint": true, - "useElementHover": true, - "useElementSize": true, - "useElementVisibility": true, - "useEventBus": true, - "useEventListener": true, - "useEventSource": true, - "useEyeDropper": true, - "useFavicon": true, - "useFetch": true, - "useFileDialog": true, - "useFileSystemAccess": true, - "useFocus": true, - "useFocusWithin": true, - "useFormTextDetail": true, - "useFps": true, - "useFullscreen": true, - "useGamepad": true, - "useGeolocation": true, - "useGlobalId": true, - "useIcons": true, - "useIdle": true, - "useImage": true, - "useInfiniteScroll": true, - "useIntersectionObserver": true, - "useInterval": true, - "useIntervalFn": true, - "useKeyModifier": true, - "useLastChanged": true, - "useLocalStorage": true, - "useMagicKeys": true, - "useManualRefHistory": true, - "useMediaControls": true, - "useMediaQuery": true, - "useMemoize": true, - "useMemory": true, - "useMounted": true, - "useMouse": true, - "useMouseInElement": true, - "useMousePressed": true, - "useMutationObserver": true, - "useNavigatorLanguage": true, - "useNetwork": true, - "useNow": true, - "useObjectUrl": true, - "useOffsetPagination": true, - "useOnline": true, - "usePageLeave": true, - "useParallax": true, - "useParentElement": true, - "usePerformanceObserver": true, - "usePermission": true, - "usePointer": true, - "usePointerLock": true, - "usePointerSwipe": true, - "usePopper": true, - "usePreferredColorScheme": true, - "usePreferredContrast": true, - "usePreferredDark": true, - "usePreferredLanguages": true, - "usePreferredReducedMotion": true, - "usePrevious": true, - "useRafFn": true, - "useRefHistory": true, - "useResizeObserver": true, - "useRotkiTheme": true, - "useScreenOrientation": true, - "useScreenSafeArea": true, - "useScriptTag": true, - "useScroll": true, - "useScrollLock": true, - "useSessionStorage": true, - "useShare": true, - "useSlots": true, - "useSorted": true, - "useSpeechRecognition": true, - "useSpeechSynthesis": true, - "useStepper": true, - "useStickyTableHeader": true, - "useStorage": true, - "useStorageAsync": true, - "useStyleTag": true, - "useSupported": true, - "useSwipe": true, - "useTemplateRefsList": true, - "useTextDirection": true, - "useTextSelection": true, - "useTextareaAutosize": true, - "useThrottle": true, - "useThrottleFn": true, - "useThrottledRefHistory": true, - "useTimeAgo": true, - "useTimeout": true, - "useTimeoutFn": true, - "useTimeoutPoll": true, - "useTimestamp": true, - "useTitle": true, - "useToNumber": true, - "useToString": true, - "useToggle": true, - "useTransition": true, - "useUrlSearchParams": true, - "useUserMedia": true, - "useVModel": true, - "useVModels": true, - "useVibrate": true, - "useVirtualList": true, - "useWakeLock": true, - "useWebNotification": true, - "useWebSocket": true, - "useWebWorker": true, - "useWebWorkerFn": true, - "useWindowFocus": true, - "useWindowScroll": true, - "useWindowSize": true, - "watch": true, - "watchArray": true, - "watchAtMost": true, - "watchDebounced": true, - "watchDeep": true, - "watchEffect": true, - "watchIgnorable": true, - "watchImmediate": true, - "watchOnce": true, - "watchPausable": true, - "watchPostEffect": true, - "watchSyncEffect": true, - "watchThrottled": true, - "watchTriggerable": true, - "watchWithFilter": true, - "whenever": true, - "TableSymbol": true, - "createTableDefaults": true, - "useTable": true, - "useBreakpoint": true - } -} diff --git a/.eslintrc.cjs b/.eslintrc.cjs deleted file mode 100644 index a1be9325..00000000 --- a/.eslintrc.cjs +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - extends: [ - '@rotki', - './.eslintrc-auto-import.json', - 'plugin:storybook/recommended', - ], -}; diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index 7ec449e0..c717df46 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -13,5 +13,3 @@ expected behaviour. --> ### Addition information - - diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index db8ac1e4..5e998cc2 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1 +1 @@ -Closes #(issue_number) \ No newline at end of file +Closes #(issue_number) diff --git a/.github/renovate.json5 b/.github/renovate.json5 index 5e22e2b6..51dcf726 100644 --- a/.github/renovate.json5 +++ b/.github/renovate.json5 @@ -1,15 +1,15 @@ { - $schema: 'https://docs.renovatebot.com/renovate-schema.json', - extends: [ - 'config:recommended', - ':dependencyDashboard', - ':dependencyDashboardApproval', + "$schema": "https://docs.renovatebot.com/renovate-schema.json", + "extends": [ + "config:recommended", + ":dependencyDashboard", + ":dependencyDashboardApproval" ], - packageRules: [ + "packageRules": [ { - allowedVersions: '/^(18)\\./', - groupName: 'Node.js', - matchPackageNames: ['@types/node', 'node'], - }, - ], + "allowedVersions": "/^(18)\\./", + "groupName": "Node.js", + "matchPackageNames": ["@types/node", "node"] + } + ] } diff --git a/.prettierrc.json b/.prettierrc.json deleted file mode 100644 index a048bb88..00000000 --- a/.prettierrc.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "semi": true, - "singleQuote": true -} \ No newline at end of file diff --git a/.storybook/main.ts b/.storybook/main.ts index f619402d..e541269a 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,5 +1,4 @@ import type { StorybookConfig } from '@storybook/vue3-vite'; -import path = require("node:path"); const config: StorybookConfig = { stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], @@ -10,9 +9,9 @@ const config: StorybookConfig = { { name: '@storybook/addon-essentials', options: { - backgrounds: false - } - } + backgrounds: false, + }, + }, ], framework: { name: '@storybook/vue3-vite', @@ -22,7 +21,8 @@ const config: StorybookConfig = { autodocs: 'tag', }, typescript: { - check: true - } + check: true, + }, }; + export default config; diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 05da1e9d..e5510401 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,3 +1,3 @@ \ No newline at end of file + diff --git a/.storybook/preview.scss b/.storybook/preview.scss index cb95a797..665fea9c 100644 --- a/.storybook/preview.scss +++ b/.storybook/preview.scss @@ -1,3 +1,4 @@ -.dark .sbdocs-preview, .dark .sb-show-main { +.dark .sbdocs-preview, +.dark .sb-show-main { background-color: #121212; } diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 74906816..9c28860e 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -1,13 +1,11 @@ import '../src/style.scss'; import './preview.scss'; import '@fontsource/roboto/latin.css'; -import type { Preview } from '@storybook/vue3'; -import { setup } from '@storybook/vue3'; - +import { type Preview, setup } from '@storybook/vue3'; import { useEffect, useGlobals } from '@storybook/addons'; +import { ref } from 'vue'; import { createRui, useRotkiTheme } from '../src'; import * as Icons from '../src/icons'; -import { ref } from 'vue'; const RuiPlugin = createRui({ theme: { @@ -22,9 +20,9 @@ const RuiPlugin = createRui({ }, }); -setup(app => { - app.use(RuiPlugin) -}) +setup((app) => { + app.use(RuiPlugin); +}); const preview: Preview = { parameters: { diff --git a/README.md b/README.md index f7f2223e..5410d306 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ A Vue component library and design system for rotki ### Installing the library -You can start using the library after installing it from npm along with the roboto font: +You can start using the library after installing it from npm along with the roboto font: ```bash pnpm install -D --save-exact @rotki/ui-library @fontsource/roboto @@ -45,7 +45,9 @@ import { RuiButton } from '@rotki/ui-library'; ``` @@ -71,6 +73,7 @@ switchThemeScheme(ThemeMode.dark); ### Using the icons You need to specify which icons you want to enable, when installing the RuiPlugin. + ```typescript import { Ri4kFill, Ri4kLine, createRui } from '@rotki/ui-library'; @@ -96,6 +99,7 @@ import { RuiIcon } from '@rotki/ui-library'; ``` ### Use @rotki/ui-library tailwindcss theme + You can extend @rotki/ui-library tailwind theme configuration by adding these to your tailwind config. It will provide you the classes for the colors, typography, and shadow. ```javascript @@ -118,33 +122,40 @@ pnpm install --frozen-lockfile ``` ### Compiles and minifies for production + The following command when executed from the project root will build the `@rotki/ui-library` bundle. This command will create the bundle for both Vue version >=3.4.3. + ``` pnpm run build:prod ``` If you want to build for specific version, you can run: + ``` pnpm run build ``` ### Lint check + ``` pnpm run lint ``` ### Lints and fixes files + ``` pnpm run lint:fix ``` ### Type check + ``` pnpm run typecheck ``` ### Storybook + In order to run the storybook, you can run: ``` @@ -152,6 +163,7 @@ pnpm run storybook ``` ### Testing: Unit + In order to test the components, you can run: ``` @@ -159,6 +171,7 @@ pnpm run test ``` ### Testing: end-to-end + In order to test the components in use in a vue 3 project, you can run: ``` @@ -173,6 +186,7 @@ pnpm run coverage:preview ``` ### Locally testing the library + After you build the bundle, in the `package.json` on your main project, you can add this to the dependencies: ```json @@ -184,7 +198,9 @@ After you build the bundle, in the `package.json` on your main project, you can When the dependency installed on the main project, it will run the `prepare` script. ### Generating the library icons + We use remix-icons. You need to run this script to scrap the svgs data from remix-icons. (This script runs automatically on `prepare`. Run this in case the icons aren't generated properly) + ``` pnpm run generate:icons ``` @@ -192,4 +208,3 @@ pnpm run generate:icons ## License [AGPL-3.0](./LICENSE) License © 2023- [Rotki Solutions GmbH](https://github.com/rotki) - diff --git a/commitlint.config.cjs b/commitlint.config.cjs deleted file mode 100644 index f9b4ad51..00000000 --- a/commitlint.config.cjs +++ /dev/null @@ -1,4 +0,0 @@ -// eslint-disable-next-line import/no-commonjs -module.exports = { - extends: ['@commitlint/config-conventional'], -}; diff --git a/commitlint.config.mjs b/commitlint.config.mjs new file mode 100644 index 00000000..0616fb93 --- /dev/null +++ b/commitlint.config.mjs @@ -0,0 +1,3 @@ +export default { + extends: ['@commitlint/config-conventional'], +}; diff --git a/eslint.config.js b/eslint.config.js new file mode 100644 index 00000000..66e80041 --- /dev/null +++ b/eslint.config.js @@ -0,0 +1,31 @@ +import path from 'node:path'; +import rotki from '@rotki/eslint-config'; + +export default rotki({ + vue: true, + typescript: { + tsconfigPath: 'tsconfig.eslint.json', + }, + stylistic: true, + formatters: true, + storybook: true, + test: true, + cypress: { + testDirectory: path.join('example', 'cypress'), + }, +}, { + files: ['src/**/*.ts'], + rules: { + 'perfectionist/sort-objects': 'error', + }, +}, { + files: ['src/**/*.stories.ts', '**/vue-shim.d.ts', '.storybook/**/*.ts'], + rules: { + 'import/no-default-export': 'off', + }, +}, { + files: ['src/**/*.@(ts|vue)'], + rules: { + 'import/no-named-default': 'warn', // todo: fix and turn into an error + }, +}); diff --git a/example/README.md b/example/README.md index 11323330..b719ef89 100644 --- a/example/README.md +++ b/example/README.md @@ -13,8 +13,8 @@ TypeScript cannot handle type information for `.vue` imports by default, so we r If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: 1. Disable the built-in TypeScript Extension - 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette - 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` + 1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette + 2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. ## Customize configuration diff --git a/example/cypress.config.ts b/example/cypress.config.ts index bc3a5bac..9a104d2e 100644 --- a/example/cypress.config.ts +++ b/example/cypress.config.ts @@ -13,8 +13,8 @@ export default defineConfig({ (spec: Cypress.Spec, results: CypressCommandLine.RunResult) => { if (results && results.video) { // Do we have failures for any retry attempts? - const failures = results.tests.some((test) => - test.attempts.some((attempt) => attempt.state === 'failed'), + const failures = results.tests.some(test => + test.attempts.some(attempt => attempt.state === 'failed'), ); if (!failures) { // delete the video if the spec passed and no tests retried diff --git a/example/cypress/e2e/alert.cy.ts b/example/cypress/e2e/alert.cy.ts index 60f1400a..901c75ce 100644 --- a/example/cypress/e2e/alert.cy.ts +++ b/example/cypress/e2e/alert.cy.ts @@ -1,4 +1,4 @@ -describe('Alerts', () => { +describe('alerts', () => { beforeEach(() => { cy.visit('/alerts'); }); diff --git a/example/cypress/e2e/button.cy.ts b/example/cypress/e2e/button.cy.ts index 5081a914..569385e1 100644 --- a/example/cypress/e2e/button.cy.ts +++ b/example/cypress/e2e/button.cy.ts @@ -1,6 +1,6 @@ // https://docs.cypress.io/api/introduction/api.html -describe('Button', () => { +describe('button', () => { beforeEach(() => { cy.visit('/'); }); diff --git a/example/cypress/e2e/card.cy.ts b/example/cypress/e2e/card.cy.ts index d64ff82a..1debe8e8 100644 --- a/example/cypress/e2e/card.cy.ts +++ b/example/cypress/e2e/card.cy.ts @@ -1,6 +1,6 @@ // https://docs.cypress.io/api/introduction/api.html -describe('Dialog', () => { +describe('dialog', () => { beforeEach(() => { cy.visit('/cards'); }); diff --git a/example/cypress/e2e/chip.cy.ts b/example/cypress/e2e/chip.cy.ts index 1d8b25ef..87db456c 100644 --- a/example/cypress/e2e/chip.cy.ts +++ b/example/cypress/e2e/chip.cy.ts @@ -1,6 +1,6 @@ // https://docs.cypress.io/api/introduction/api.html -describe('Chip', () => { +describe('chip', () => { beforeEach(() => { cy.visit('/chips'); }); diff --git a/example/cypress/e2e/data-table.cy.ts b/example/cypress/e2e/data-table.cy.ts index 68239345..9d0a68d6 100644 --- a/example/cypress/e2e/data-table.cy.ts +++ b/example/cypress/e2e/data-table.cy.ts @@ -1,6 +1,6 @@ // https://docs.cypress.io/api/introduction/api.html -describe('DataTable', () => { +describe('dataTable', () => { beforeEach(() => { cy.visit('/data-tables'); }); @@ -213,8 +213,8 @@ describe('DataTable', () => { .should('exist'); cy.get('@row4') - .scrollIntoView() - .get('@mainHead') + .scrollIntoView(); + cy.get('@row4').get('@mainHead') .should((thead) => { const classes = Cypress.$(thead).attr('class'); expect(classes).to.contain('_sticky__header_'); @@ -223,8 +223,9 @@ describe('DataTable', () => { cy.window() .get('body') - .scrollTo('top') - .get('@mainHead') + .scrollTo('top'); + cy.window() + .get('body').get('@mainHead') .should((thead) => { const classes = Cypress.$(thead).attr('class'); expect(classes).not.to.contain('_stick__top_'); diff --git a/example/cypress/e2e/footer-stepper.cy.ts b/example/cypress/e2e/footer-stepper.cy.ts index 72d3dc38..80d87c80 100644 --- a/example/cypress/e2e/footer-stepper.cy.ts +++ b/example/cypress/e2e/footer-stepper.cy.ts @@ -1,6 +1,6 @@ // https://docs.cypress.io/api/introduction/api.html -describe('FooterStepper', () => { +describe('footerStepper', () => { beforeEach(() => { cy.visit('/steppers'); }); diff --git a/example/cypress/e2e/forms/auto-complete.cy.ts b/example/cypress/e2e/forms/auto-complete.cy.ts index ce272adc..31e1d8fa 100644 --- a/example/cypress/e2e/forms/auto-complete.cy.ts +++ b/example/cypress/e2e/forms/auto-complete.cy.ts @@ -1,4 +1,4 @@ -describe('Forms/TextField', () => { +describe('forms/TextField', () => { beforeEach(() => { cy.visit('/auto-complete'); }); diff --git a/example/cypress/e2e/forms/checkbox.cy.ts b/example/cypress/e2e/forms/checkbox.cy.ts index f6999d25..d8e4d5c7 100644 --- a/example/cypress/e2e/forms/checkbox.cy.ts +++ b/example/cypress/e2e/forms/checkbox.cy.ts @@ -1,4 +1,4 @@ -describe('Forms/Checkbox', () => { +describe('forms/Checkbox', () => { beforeEach(() => { cy.visit('/checkboxes'); }); diff --git a/example/cypress/e2e/forms/radio.cy.ts b/example/cypress/e2e/forms/radio.cy.ts index 7bc8bf72..a845c327 100644 --- a/example/cypress/e2e/forms/radio.cy.ts +++ b/example/cypress/e2e/forms/radio.cy.ts @@ -1,4 +1,4 @@ -describe('Forms/Radio', () => { +describe('forms/Radio', () => { beforeEach(() => { cy.visit('/radios'); }); @@ -63,7 +63,7 @@ describe('Forms/Radio', () => { .parentsUntil('div[class*=wrapper]') .parent() .find('.details') - .should('contain.text', `Selected value: ${value}`); + .should('contain.text', `Selected value: ${value?.toString()}`); }); cy.get('@thirdRadio').should('not.be.checked'); @@ -79,7 +79,7 @@ describe('Forms/Radio', () => { .parentsUntil('div[class*=wrapper]') .parent() .find('.details') - .should('contain.text', `Selected value: ${value}`); + .should('contain.text', `Selected value: ${value?.toString()}`); }); }); }); diff --git a/example/cypress/e2e/forms/text-field.cy.ts b/example/cypress/e2e/forms/text-field.cy.ts index 09ab1094..359b6169 100644 --- a/example/cypress/e2e/forms/text-field.cy.ts +++ b/example/cypress/e2e/forms/text-field.cy.ts @@ -1,4 +1,4 @@ -describe('Forms/TextField', () => { +describe('forms/TextField', () => { beforeEach(() => { cy.visit('/text-fields'); }); diff --git a/example/cypress/e2e/loader.cy.ts b/example/cypress/e2e/loader.cy.ts index 084aa4fe..3ebfa559 100644 --- a/example/cypress/e2e/loader.cy.ts +++ b/example/cypress/e2e/loader.cy.ts @@ -1,4 +1,4 @@ -describe('Loaders', () => { +describe('loaders', () => { beforeEach(() => { cy.visit('/loaders'); }); diff --git a/example/cypress/e2e/overlays/badge.cy.ts b/example/cypress/e2e/overlays/badge.cy.ts index 739aefb2..a3d49902 100644 --- a/example/cypress/e2e/overlays/badge.cy.ts +++ b/example/cypress/e2e/overlays/badge.cy.ts @@ -1,6 +1,6 @@ // https://docs.cypress.io/api/introduction/api.html -describe('Badge', () => { +describe('badge', () => { beforeEach(() => { cy.visit('/badges'); }); diff --git a/example/cypress/e2e/overlays/dialog.cy.ts b/example/cypress/e2e/overlays/dialog.cy.ts index 3fd2ae13..7067dc11 100644 --- a/example/cypress/e2e/overlays/dialog.cy.ts +++ b/example/cypress/e2e/overlays/dialog.cy.ts @@ -1,6 +1,6 @@ // https://docs.cypress.io/api/introduction/api.html -describe('Dialog', () => { +describe('dialog', () => { beforeEach(() => { cy.visit('/dialogs'); }); diff --git a/example/cypress/e2e/overlays/tooltip.cy.ts b/example/cypress/e2e/overlays/tooltip.cy.ts index 262d71b2..d767e277 100644 --- a/example/cypress/e2e/overlays/tooltip.cy.ts +++ b/example/cypress/e2e/overlays/tooltip.cy.ts @@ -1,6 +1,6 @@ // https://docs.cypress.io/api/introduction/api.html -describe('Tooltip', () => { +describe('tooltip', () => { beforeEach(() => { cy.visit('/tooltips'); }); diff --git a/example/cypress/e2e/progress.cy.ts b/example/cypress/e2e/progress.cy.ts index 54703799..f3f51c3e 100644 --- a/example/cypress/e2e/progress.cy.ts +++ b/example/cypress/e2e/progress.cy.ts @@ -1,6 +1,6 @@ // https://docs.cypress.io/api/introduction/api.html -describe('Progress', () => { +describe('progress', () => { beforeEach(() => { cy.visit('/progress'); }); diff --git a/example/cypress/e2e/stepper.cy.ts b/example/cypress/e2e/stepper.cy.ts index 6f231966..1ab5c2ac 100644 --- a/example/cypress/e2e/stepper.cy.ts +++ b/example/cypress/e2e/stepper.cy.ts @@ -1,6 +1,6 @@ // https://docs.cypress.io/api/introduction/api.html -describe('Stepper', () => { +describe('stepper', () => { beforeEach(() => { cy.visit('/steppers'); }); diff --git a/example/cypress/e2e/tabs.cy.ts b/example/cypress/e2e/tabs.cy.ts index 85b7a122..a878662e 100644 --- a/example/cypress/e2e/tabs.cy.ts +++ b/example/cypress/e2e/tabs.cy.ts @@ -1,6 +1,6 @@ // https://docs.cypress.io/api/introduction/api.html -describe('Tabs', () => { +describe('tabs', () => { beforeEach(() => { cy.visit('/tabs'); }); diff --git a/example/cypress/e2e/tsconfig.json b/example/cypress/e2e/tsconfig.json index 37748feb..fdf9c697 100644 --- a/example/cypress/e2e/tsconfig.json +++ b/example/cypress/e2e/tsconfig.json @@ -1,10 +1,10 @@ { "extends": "@vue/tsconfig/tsconfig.dom.json", - "include": ["./**/*", "../support/**/*"], "compilerOptions": { - "isolatedModules": false, "target": "es5", "lib": ["es5", "dom"], - "types": ["cypress"] - } + "types": ["cypress"], + "isolatedModules": false + }, + "include": ["./**/*", "../support/**/*"] } diff --git a/example/cypress/support/e2e.ts b/example/cypress/support/e2e.ts index 84e96a51..2f8d9bbc 100644 --- a/example/cypress/support/e2e.ts +++ b/example/cypress/support/e2e.ts @@ -18,9 +18,8 @@ import './commands'; Cypress.on('uncaught:exception', (e) => { if ( - /ResizeObserver loop completed/.test(e.message) || - /ResizeObserver loop limit exceeded/.test(e.message) - ) { + /ResizeObserver loop completed/.test(e.message) + || /ResizeObserver loop limit exceeded/.test(e.message) + ) return false; - } }); diff --git a/example/index.html b/example/index.html index a8885448..dcd69675 100644 --- a/example/index.html +++ b/example/index.html @@ -1,9 +1,9 @@ - + - - - + + + Vite App diff --git a/example/src/App.vue b/example/src/App.vue index 7a8c2aa3..79a50cf9 100644 --- a/example/src/App.vue +++ b/example/src/App.vue @@ -46,7 +46,10 @@ const css = useCssModule();