diff --git a/README.md b/README.md index b67e95f8..edfd8d0b 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,12 @@ # The VILT Design System -The official repository for the VILT Design System for the Vue.js, Inertia.js, Laravel, and Tailwind CSS web app stack that is turbocharged with Typescript and VueVentus. +The official repository for the VILT Design System for the Vue.js, Inertia.js, Laravel, and Tailwind CSS web app stack that is turbocharged with Typescript, Vitest and VueVentus. ![GitHub package.json version](https://img.shields.io/github/package-json/v/obewds/vilt-ds?label=Github&logo=github&style=for-the-badge)   ![npm](https://img.shields.io/npm/v/@obewds/vilt-ds?color=%23cc3534&logo=npm&style=for-the-badge) -![Vue.js](https://img.shields.io/badge/vue.js-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D)   ![Inertia.js](https://img.shields.io/badge/inertia.js-%239553E9.svg?style=for-the-badge&logo=inertia&logoColor=%23ffffff)   ![Laravel](https://img.shields.io/badge/laravel-%23FF2D20.svg?style=for-the-badge&logo=laravel&logoColor=%23ffffff)   ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)   ![VueVentus](https://img.shields.io/badge/vueventus-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D)   ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)   ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white)   ![Dependabot](https://img.shields.io/badge/dependabot-025E8C?style=for-the-badge&logo=dependabot&logoColor=white) +![Vue.js](https://img.shields.io/badge/vue.js-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D)   ![Inertia.js](https://img.shields.io/badge/inertia.js-%239553E9.svg?style=for-the-badge&logo=inertia&logoColor=%23ffffff)   ![Laravel](https://img.shields.io/badge/laravel-%23FF2D20.svg?style=for-the-badge&logo=laravel&logoColor=%23ffffff)   ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)   ![VueVentus](https://img.shields.io/badge/vueventus-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D)   ![Vitest](https://img.shields.io/badge/vitest-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D)   ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)   ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white)   ![Dependabot](https://img.shields.io/badge/dependabot-025E8C?style=for-the-badge&logo=dependabot&logoColor=white) + ## Installation Prep @@ -56,6 +57,7 @@ npm run dev > NOTE: You may need to delete Jetstream's node_modules directory and reinstall node.js dependencies with a `npm install` command to get vite to play nicely with Jetstream defaults! + ## Installing VILT DS With Laravel/Jetstream/Inertia installed, you can install VILT DS with the following command: @@ -70,12 +72,190 @@ Once the VILT DS package is installed, you can access and run the VILT DS instal npx vilt-ds ``` + + + + +## A Note About ziggy.{jt}s Files + +After a typical VILT/Jetstream install, the `sail artisan ziggy:generate` command will generate a Javascript file with current routes in it. Typescript needs this information downstream, so we need to update this file when new routes are established. + +For now, we can simply switch the ziggy generated `./resources/js/ziggy.js` file from a Javascript `.js` extension to a Typescript `.ts` extension, and move on with our project. + +But moving forward, solutions are being explored to try to automate this for us all so we don't have to think about it much! + + + +## Updating Installed VILT DS Components + +VILT DS provides a handful of `npx` accessible commands to pull in updated versions of VILT DS components after initial installations. + +> PLEASE NOTE: Using any of these updater scripts will overwrite existing files. So it is exuberantly recommended to ensure you are using a versioning solution (like Git) whenever using these scripts IRL and on real projects. + +> It's also recommended to generally NOT edit VILT DS files directly, and instead opt to make components that import/use VILT DS components directly as child/dependency components. Isolation of VILT DS components ultimately allows these updater scripts to be used to keep VILT DS components current, while not breaking downstream components (depending on their architecture of course!). + + + +### Update VILT DS VueVentus Components + +```bash +npx vilt-ds-vueventus +``` + +The `npx vilt-ds-vueventus` command will overwrite the following files in a Laravel Jetstream VILT app with VILT DS installed: + +**Root Path: `./resources/js/Components/vv/`** + +* anchors/VvAnchor.vue +* anchors/VvInertiaLink.vue +* buttons/VvButton.vue +* buttons/VvColorModeButton.vue +* buttons/VvScrollUp.vue +* elements/VvEl.vue +* forms/VvFormGroup.vue +* forms/VvQuadFormGroup.vue +* inputs/VvCheckbox.vue +* inputs/VvInput.vue +* inputs/VvRadio.vue +* lists/VvListItem.vue +* lists/VvList.vue +* selects/VvListbox.vue +* selects/VvSelect.vue +* textareas/VvTextarea.vue + + + +### Update VILT DS Laravel Jetstream API Components + +```bash +npx vilt-ds-jetstream-api +``` + +The `npx vilt-jetstream-api` command will overwrite the following files in a Laravel Jetstream VILT app with VILT DS installed: + +**Root Path: `./resources/js/Pages/`** + +* API/Partials/ApiTokenManager.vue +* API/Index.vue + + + +### Update VILT DS Laravel Jetstream Auth Components + +```bash +npx vilt-ds-jetstream-auth +``` + +The `npx vilt-jetstream-auth` command will overwrite the following files in a Laravel Jetstream VILT app with VILT DS installed: + +**Root Path: `./resources/js/Pages/Auth/`** + +* ConfirmPassword.vue +* ForgotPassword.vue +* Login.vue +* Register.vue +* ResetPassword.vue +* TwoFactorChallenge.vue +* VerifyEmail.vue + + + +### Update VILT DS Laravel Jetstream Base Components + +```bash +npx vilt-ds-jetstream-base-components +``` + +The `npx vilt-base-components` command will overwrite the following files in a Laravel Jetstream VILT app with VILT DS installed: + +**Root Path: `./resources/js/Components/`** + +* ActionMessage.vue +* ActionSection.vue +* ApplicationLogo.vue +* ApplicationMark.vue +* AuthenticationCardLogo.vue +* AuthenticationCard.vue +* Banner.vue +* Checkbox.vue +* ConfirmationModal.vue +* ConfirmsPassword.vue +* DangerButton.vue +* DialogModal.vue +* DropdownLink.vue +* Dropdown.vue +* FormSection.vue +* InputError.vue +* InputLabel.vue +* Modal.vue +* NavLink.vue +* PrimaryButton.vue +* ResponsiveNavLink.vue +* ScrollUpColorModeSection.vue +* SecondaryButton.vue +* SectionBorder.vue +* SectionTitle.vue +* TextInput.vue +* Welcome.vue + + + +### Update VILT DS Laravel Jetstream Base Page Components + +```bash +npx vilt-ds-jetstream-base-pages +``` + +The `npx vilt-ds-jetstream-base-pages` command will overwrite the following files in a Laravel Jetstream VILT app with VILT DS installed: + +**Root Path: `./resources/js/Pages/`** + +* Dashboard.vue +* PrivacyPolicy.vue +* TermsOfService.vue +* VueVentus.vue +* Welcome.vue + + + +### Update VILT DS Laravel Jetstream Profile Components + +```bash +npx vilt-ds-jetstream-profile +``` + +The `npx vilt-ds-jetstream-profile` command will overwrite the following files in a Laravel Jetstream VILT app with VILT DS installed: + +**Root Path: `./resources/js/Pages/Profile/`** + +* Partials/DeleteUserForm.vue +* Partials/LogoutOtherBrowserSessionsForm.vue +* Partials/TwoFactorAuthenticationForm.vue +* Partials/UpdatePasswordForm.vue +* Partials/UpdateProfileInformationForm.vue +* Show.vue + + + +### Update VILT DS Laravel Jetstream Teams Components + +```bash +npx vilt-ds-jetstream-teams +``` + +The `npx vilt-ds-jetstream-teams` command will overwrite the following files in a Laravel Jetstream VILT app with VILT DS installed: -The `sail artisan ziggy:generate` command will generate a Javascript file with current routes in it. Typescript needs this information downstream, so we need to update this file when new routes are established. +**Root Path: `./resources/js/Pages/Teams/`** -For now, we can simply switch the ziggy generated file from a Javascript `.js` extension to a Typescript `.ts` extension, and move on with our project. +* Partials/CreateTeamForm.vue +* Partials/DeleteTeamForm.vue +* Partials/TeamMemberManager.vue +* Partials/UpdateTeamNameForm.vue +* Create.vue +* Show.vue diff --git a/dist/data/npm/vilt-ds-jetstream-deps.d.ts b/dist/data/npm/vilt-ds-jetstream-deps.d.ts index 5317b234..8f24c200 100644 --- a/dist/data/npm/vilt-ds-jetstream-deps.d.ts +++ b/dist/data/npm/vilt-ds-jetstream-deps.d.ts @@ -1,3 +1,3 @@ -export type ViltDsJetstreamDependency = 'typescript' | '@types/node' | '@inertiajs/progress' | '@types/ziggy-js' | 'ziggy-js' | '@obewds/vueventus' | '@headlessui/vue' | '@tailwindcss/aspect-ratio' | '@headlessui/tailwindcss' | 'tailwind-scrollbar' | 'gsap'; +export type ViltDsJetstreamDependency = 'typescript' | '@types/node' | '@inertiajs/progress' | '@types/ziggy-js' | 'ziggy-js' | '@obewds/vueventus' | '@headlessui/vue' | '@tailwindcss/aspect-ratio' | '@headlessui/tailwindcss' | 'tailwind-scrollbar' | 'gsap' | 'vitest' | 'happy-dom' | '@vue/test-utils' | '@vitest/coverage-v8' | '@types/jest'; declare const _default: ViltDsJetstreamDependency[]; export default _default; diff --git a/dist/data/npm/vilt-ds-jetstream-deps.js b/dist/data/npm/vilt-ds-jetstream-deps.js index 85d21601..f61b0d7d 100644 --- a/dist/data/npm/vilt-ds-jetstream-deps.js +++ b/dist/data/npm/vilt-ds-jetstream-deps.js @@ -11,5 +11,10 @@ export default [ '@headlessui/tailwindcss', 'tailwind-scrollbar', 'gsap', + 'vitest', + 'happy-dom', + '@vue/test-utils', + '@vitest/coverage-v8', + '@types/jest', ]; //# sourceMappingURL=vilt-ds-jetstream-deps.js.map \ No newline at end of file diff --git a/dist/data/npm/vilt-ds-jetstream-deps.js.map b/dist/data/npm/vilt-ds-jetstream-deps.js.map index bec1fb81..d7a6252b 100644 --- a/dist/data/npm/vilt-ds-jetstream-deps.js.map +++ b/dist/data/npm/vilt-ds-jetstream-deps.js.map @@ -1 +1 @@ -{"version":3,"file":"vilt-ds-jetstream-deps.js","sourceRoot":"","sources":["../../../src/data/npm/vilt-ds-jetstream-deps.ts"],"names":[],"mappings":"AAAA,2CAA2C;AAc3C,eAAe;IACX,YAAY;IACZ,aAAa;IACb,qBAAqB;IACrB,iBAAiB;IACjB,UAAU;IACV,mBAAmB;IACnB,iBAAiB;IACjB,2BAA2B;IAC3B,yBAAyB;IACzB,oBAAoB;IACpB,MAAM;CAC2B,CAAA"} \ No newline at end of file +{"version":3,"file":"vilt-ds-jetstream-deps.js","sourceRoot":"","sources":["../../../src/data/npm/vilt-ds-jetstream-deps.ts"],"names":[],"mappings":"AAAA,2CAA2C;AAmB3C,eAAe;IACX,YAAY;IACZ,aAAa;IACb,qBAAqB;IACrB,iBAAiB;IACjB,UAAU;IACV,mBAAmB;IACnB,iBAAiB;IACjB,2BAA2B;IAC3B,yBAAyB;IACzB,oBAAoB;IACpB,MAAM;IACN,QAAQ;IACR,WAAW;IACX,iBAAiB;IACjB,qBAAqB;IACrB,aAAa;CACoB,CAAA"} \ No newline at end of file diff --git a/dist/generators/jetstream/generate-vitest-config-ts.d.ts b/dist/generators/jetstream/generate-vitest-config-ts.d.ts new file mode 100644 index 00000000..2c5e828c --- /dev/null +++ b/dist/generators/jetstream/generate-vitest-config-ts.d.ts @@ -0,0 +1 @@ +export default function (): string; diff --git a/dist/generators/jetstream/generate-vitest-config-ts.js b/dist/generators/jetstream/generate-vitest-config-ts.js new file mode 100644 index 00000000..62290d24 --- /dev/null +++ b/dist/generators/jetstream/generate-vitest-config-ts.js @@ -0,0 +1,22 @@ +// ./src/generators/jetstream/generate-vitest-config-ts.ts +export default function () { + return `// ./vitest.config.ts + +import { configDefaults } from 'vitest/config' +import vue from '@vitejs/plugin-vue' + +export default { + plugins: [ + vue() + ], + test: { + globals: true, + environment: 'happy-dom', + setupFiles: ['./vitestSetup.ts', './vitestZiggyRouteShim.d.ts'], + exclude: [...configDefaults.exclude], + include: ['./tests/Vitest/**/*.{test,spec}.?(c|m)[jt]s?(x)'], + }, +} +`; +} +//# sourceMappingURL=generate-vitest-config-ts.js.map \ No newline at end of file diff --git a/dist/generators/jetstream/generate-vitest-config-ts.js.map b/dist/generators/jetstream/generate-vitest-config-ts.js.map new file mode 100644 index 00000000..2dd18576 --- /dev/null +++ b/dist/generators/jetstream/generate-vitest-config-ts.js.map @@ -0,0 +1 @@ +{"version":3,"file":"generate-vitest-config-ts.js","sourceRoot":"","sources":["../../../src/generators/jetstream/generate-vitest-config-ts.ts"],"names":[],"mappings":"AAAA,0DAA0D;AAE1D,MAAM,CAAC,OAAO;IAEd,OAAO;;;;;;;;;;;;;;;;;CAiBN,CAAC;AAEF,CAAC"} \ No newline at end of file diff --git a/dist/generators/jetstream/generate-vitest-head-mocked-vue.d.ts b/dist/generators/jetstream/generate-vitest-head-mocked-vue.d.ts new file mode 100644 index 00000000..2c5e828c --- /dev/null +++ b/dist/generators/jetstream/generate-vitest-head-mocked-vue.d.ts @@ -0,0 +1 @@ +export default function (): string; diff --git a/dist/generators/jetstream/generate-vitest-head-mocked-vue.js b/dist/generators/jetstream/generate-vitest-head-mocked-vue.js new file mode 100644 index 00000000..8a6bc1c6 --- /dev/null +++ b/dist/generators/jetstream/generate-vitest-head-mocked-vue.js @@ -0,0 +1,12 @@ +// ./src/generators/jetstream/generate-vitest-head-mocked-vue.ts +export default function () { + return ` + + +`; +} +//# sourceMappingURL=generate-vitest-head-mocked-vue.js.map \ No newline at end of file diff --git a/dist/generators/jetstream/generate-vitest-head-mocked-vue.js.map b/dist/generators/jetstream/generate-vitest-head-mocked-vue.js.map new file mode 100644 index 00000000..e2dfcd40 --- /dev/null +++ b/dist/generators/jetstream/generate-vitest-head-mocked-vue.js.map @@ -0,0 +1 @@ +{"version":3,"file":"generate-vitest-head-mocked-vue.js","sourceRoot":"","sources":["../../../src/generators/jetstream/generate-vitest-head-mocked-vue.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAEhE,MAAM,CAAC,OAAO;IAEd,OAAO;;;;;;;CAON,CAAC;AAEF,CAAC"} \ No newline at end of file diff --git a/dist/generators/jetstream/generate-vitest-setup-ts.d.ts b/dist/generators/jetstream/generate-vitest-setup-ts.d.ts new file mode 100644 index 00000000..2c5e828c --- /dev/null +++ b/dist/generators/jetstream/generate-vitest-setup-ts.d.ts @@ -0,0 +1 @@ +export default function (): string; diff --git a/dist/generators/jetstream/generate-vitest-setup-ts.js b/dist/generators/jetstream/generate-vitest-setup-ts.js new file mode 100644 index 00000000..09db8ecc --- /dev/null +++ b/dist/generators/jetstream/generate-vitest-setup-ts.js @@ -0,0 +1,13 @@ +// ./src/generators/jetstream/generate-vitest-setup-ts.ts +export default function () { + return `// ./vitestSetup.ts + +import { config } from '@vue/test-utils' +import Head from './VitestHeadMocked.vue' + +config.global.components = { + Head, +}; +`; +} +//# sourceMappingURL=generate-vitest-setup-ts.js.map \ No newline at end of file diff --git a/dist/generators/jetstream/generate-vitest-setup-ts.js.map b/dist/generators/jetstream/generate-vitest-setup-ts.js.map new file mode 100644 index 00000000..3ee34d10 --- /dev/null +++ b/dist/generators/jetstream/generate-vitest-setup-ts.js.map @@ -0,0 +1 @@ +{"version":3,"file":"generate-vitest-setup-ts.js","sourceRoot":"","sources":["../../../src/generators/jetstream/generate-vitest-setup-ts.ts"],"names":[],"mappings":"AAAA,yDAAyD;AAEzD,MAAM,CAAC,OAAO;IAEd,OAAO;;;;;;;;CAQN,CAAC;AAEF,CAAC"} \ No newline at end of file diff --git a/dist/generators/jetstream/generate-vitest-ziggy-route-shim-d-ts.d.ts b/dist/generators/jetstream/generate-vitest-ziggy-route-shim-d-ts.d.ts new file mode 100644 index 00000000..2c5e828c --- /dev/null +++ b/dist/generators/jetstream/generate-vitest-ziggy-route-shim-d-ts.d.ts @@ -0,0 +1 @@ +export default function (): string; diff --git a/dist/generators/jetstream/generate-vitest-ziggy-route-shim-d-ts.js b/dist/generators/jetstream/generate-vitest-ziggy-route-shim-d-ts.js new file mode 100644 index 00000000..43878b5d --- /dev/null +++ b/dist/generators/jetstream/generate-vitest-ziggy-route-shim-d-ts.js @@ -0,0 +1,15 @@ +// ./src/generators/jetstream/generate-vitest-ziggy-route-shim-d-ts.ts +export default function () { + return `// ./vitestZiggyRouteShim.d.ts + +import type { Config, RouteParam, RouteParamsWithQueryOverload } from 'ziggy-js' + +declare function route( + name: string, + params?: RouteParamsWithQueryOverload | RouteParam, + absolute?: boolean, + config?: Config, +): string; +`; +} +//# sourceMappingURL=generate-vitest-ziggy-route-shim-d-ts.js.map \ No newline at end of file diff --git a/dist/generators/jetstream/generate-vitest-ziggy-route-shim-d-ts.js.map b/dist/generators/jetstream/generate-vitest-ziggy-route-shim-d-ts.js.map new file mode 100644 index 00000000..3e798db4 --- /dev/null +++ b/dist/generators/jetstream/generate-vitest-ziggy-route-shim-d-ts.js.map @@ -0,0 +1 @@ +{"version":3,"file":"generate-vitest-ziggy-route-shim-d-ts.js","sourceRoot":"","sources":["../../../src/generators/jetstream/generate-vitest-ziggy-route-shim-d-ts.ts"],"names":[],"mappings":"AAAA,sEAAsE;AAEtE,MAAM,CAAC,OAAO;IAEd,OAAO;;;;;;;;;;CAUN,CAAC;AAEF,CAAC"} \ No newline at end of file diff --git a/dist/generators/jetstream/resources/js/Components/generate-banner-vue.js b/dist/generators/jetstream/resources/js/Components/generate-banner-vue.js index 5ba1ef09..e0595685 100644 --- a/dist/generators/jetstream/resources/js/Components/generate-banner-vue.js +++ b/dist/generators/jetstream/resources/js/Components/generate-banner-vue.js @@ -9,8 +9,16 @@ export default function () { import { computed, defineComponent, ref, watch } from 'vue' import { usePage } from '@inertiajs/vue3' + import VvButton from './vv/buttons/VvButton.vue' + import VvEl from './vv/elements/VvEl.vue' + export default defineComponent({ + components: { + VvButton, + VvEl, + }, + setup () { const pageProps = computed( () => usePage().props as UsePageSharedDataProps ) @@ -41,12 +49,10 @@ export default function () {
-
@@ -56,11 +62,7 @@ export default function () {
-

+

{{ message }}

@@ -103,13 +105,10 @@ export default function () {
- +
@@ -135,7 +134,7 @@ export default function () {
-
+
diff --git a/dist/generators/jetstream/resources/js/Components/generate-banner-vue.js.map b/dist/generators/jetstream/resources/js/Components/generate-banner-vue.js.map index 87727eda..f7aee57c 100644 --- a/dist/generators/jetstream/resources/js/Components/generate-banner-vue.js.map +++ b/dist/generators/jetstream/resources/js/Components/generate-banner-vue.js.map @@ -1 +1 @@ -{"version":3,"file":"generate-banner-vue.js","sourceRoot":"","sources":["../../../../../../src/generators/jetstream/resources/js/Components/generate-banner-vue.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAE5E,MAAM,CAAC,OAAO;IAEd,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4IN,CAAC;AAEF,CAAC"} \ No newline at end of file +{"version":3,"file":"generate-banner-vue.js","sourceRoot":"","sources":["../../../../../../src/generators/jetstream/resources/js/Components/generate-banner-vue.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAE5E,MAAM,CAAC,OAAO;IAEd,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2IN,CAAC;AAEF,CAAC"} \ No newline at end of file diff --git a/dist/generators/jetstream/resources/js/Components/generate-scroll-up-color-mode-section-vue.js b/dist/generators/jetstream/resources/js/Components/generate-scroll-up-color-mode-section-vue.js index 197d9091..2a67f549 100644 --- a/dist/generators/jetstream/resources/js/Components/generate-scroll-up-color-mode-section-vue.js +++ b/dist/generators/jetstream/resources/js/Components/generate-scroll-up-color-mode-section-vue.js @@ -4,7 +4,9 @@ export default function () {