move ui and api to seperate packages and add npm actions for them

solidtime-io · Aug 21, 2024 · 1d46dd8 · 1d46dd8
1 parent 87b114a
commit 1d46dd8
Show file tree

Hide file tree

Showing 185 changed files with 2,755 additions and 712 deletions.
diff --git a/.github/workflows/npm-publish-api.yml b/.github/workflows/npm-publish-api.yml
@@ -0,0 +1,21 @@
+name: Publish API package to NPM
+on:
+  push:
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      - run: npm run build
+      - run: npm publish --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/npm-publish-ui.yml b/.github/workflows/npm-publish-ui.yml
@@ -0,0 +1,21 @@
+name: Publish UI package to NPM
+on:
+  push:
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      - run: npm run build
+      - run: npm publish --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,6 @@
 /.phpunit.cache
-/node_modules
+node_modules
+dist
 /public/build
 /public/hot
 /public/storage

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -108,7 +108,7 @@ services:
             - sail
             - reverse-proxy
     playwright:
-        image: mcr.microsoft.com/playwright:v1.45.2-jammy
+        image: mcr.microsoft.com/playwright:v1.46.1-jammy
         command: ['npx', 'playwright', 'test', '--ui-port=8080', '--ui-host=0.0.0.0']
         working_dir: /src
         extra_hosts:

diff --git a/e2e/project-members.spec.ts b/e2e/project-members.spec.ts
@@ -1,7 +1,7 @@
 import { expect, Page } from '@playwright/test';
 import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
 import { test } from '../playwright/fixtures';
-import { formatCents } from '../resources/js/utils/money';
+import { formatCents } from '../resources/js/packages/ui/src/utils/money';
 
 async function goToProjectsOverview(page: Page) {
     await page.goto(PLAYWRIGHT_BASE_URL + '/projects');
@@ -58,6 +58,6 @@ test('test that updating project member billable rate works for existing time en
         page
             .getByRole('row')
             .first()
-            .getByText(formatCents(newBillableRate * 100))
+            .getByText(formatCents(newBillableRate * 100, 'EUR'))
     ).toBeVisible();
 });
diff --git a/e2e/projects.spec.ts b/e2e/projects.spec.ts
@@ -1,7 +1,7 @@
 import { expect, Page } from '@playwright/test';
 import { PLAYWRIGHT_BASE_URL } from '../playwright/config';
 import { test } from '../playwright/fixtures';
-import { formatCents } from '../resources/js/utils/money';
+import { formatCents } from '../resources/js/packages/ui/src/utils/money';
 
 async function goToProjectsOverview(page: Page) {
     await page.goto(PLAYWRIGHT_BASE_URL + '/projects');
@@ -131,7 +131,7 @@ test('test that updating billable rate works with existing time entries', async
         page
             .getByRole('row')
             .first()
-            .getByText(formatCents(newBillableRate * 100))
+            .getByText(formatCents(newBillableRate * 100, 'EUR'))
     ).toBeVisible();
 });
 

diff --git a/e2e/timetracker.spec.ts b/e2e/timetracker.spec.ts
@@ -285,3 +285,5 @@ test('test that adding a new tag when the timer is running', async ({
 // test billable toggle
 
 // TODO: Test that project can be created in the time tracker row
+
+// Add Test that time tracker starts on enter with description
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
         "lint:fix": "eslint --fix --ext .js,.vue,.ts --ignore-path .gitignore .",
         "type-check": "vue-tsc --noEmit",
         "test:e2e": "rm -rf test-results/.auth && npx playwright test",
-        "zod:generate": "npx openapi-zod-client http://localhost:80/docs/api.json --output openapi.json.client.ts --base-url /api"
+        "zod:generate": "npx openapi-zod-client http://localhost:80/docs/api.json --output resources/js/packages/api/src/openapi.json.client.ts --base-url /api"
     },
     "devDependencies": {
         "@inertiajs/vue3": "^1.0.0",

diff --git a/resources/js/Components/Common/Client/ClientCreateModal.vue b/resources/js/Components/Common/Client/ClientCreateModal.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import TextInput from '@/Components/TextInput.vue';
-import SecondaryButton from '@/Components/SecondaryButton.vue';
-import DialogModal from '@/Components/DialogModal.vue';
+import TextInput from '@/packages/ui/src/Input/TextInput.vue';
+import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
+import DialogModal from '@/packages/ui/src/DialogModal.vue';
 import { ref } from 'vue';
-import type { CreateClientBody } from '@/utils/api';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
+import type { CreateClientBody } from '@/packages/api/src';
+import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
 import { useFocus } from '@vueuse/core';
 import { useClientsStore } from '@/utils/useClients';
 

diff --git a/resources/js/Components/Common/Client/ClientEditModal.vue b/resources/js/Components/Common/Client/ClientEditModal.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import TextInput from '@/Components/TextInput.vue';
-import SecondaryButton from '@/Components/SecondaryButton.vue';
-import DialogModal from '@/Components/DialogModal.vue';
+import TextInput from '@/packages/ui/src/Input/TextInput.vue';
+import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
+import DialogModal from '@/packages/ui/src/DialogModal.vue';
 import { ref } from 'vue';
-import type { Client, UpdateClientBody } from '@/utils/api';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
+import type { Client, UpdateClientBody } from '@/packages/api/src';
+import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
 import { useFocus } from '@vueuse/core';
 import { useClientsStore } from '@/utils/useClients';
 

diff --git a/resources/js/Components/Common/Client/ClientMoreOptionsDropdown.vue b/resources/js/Components/Common/Client/ClientMoreOptionsDropdown.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { PencilSquareIcon, TrashIcon } from '@heroicons/vue/20/solid';
-import type { Client } from '@/utils/api';
+import type { Client } from '@/packages/api/src';
 import { canDeleteClients, canUpdateClients } from '@/utils/permissions';
-import MoreOptionsDropdown from '@/Components/MoreOptionsDropdown.vue';
+import MoreOptionsDropdown from '@/packages/ui/src/MoreOptionsDropdown.vue';
 
 const emit = defineEmits<{
     delete: [];

diff --git a/resources/js/Components/Common/Client/ClientMultiselectDropdown.vue b/resources/js/Components/Common/Client/ClientMultiselectDropdown.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import MultiselectDropdown from '@/Components/Common/MultiselectDropdown.vue';
 import { storeToRefs } from 'pinia';
-import type { Client } from '@/utils/api';
+import type { Client } from '@/packages/api/src';
 import { useClientsStore } from '@/utils/useClients';
 
 const clientsStore = useClientsStore();

diff --git a/resources/js/Components/Common/Client/ClientTable.vue b/resources/js/Components/Common/Client/ClientTable.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import SecondaryButton from '@/Components/SecondaryButton.vue';
+import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
 import { UserCircleIcon } from '@heroicons/vue/24/solid';
 import { PlusIcon } from '@heroicons/vue/16/solid';
-import { ref } from 'vue';
+import { type Component, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useClientsStore } from '@/utils/useClients';
 import ClientTableRow from '@/Components/Common/Client/ClientTableRow.vue';
@@ -36,7 +36,7 @@ const createClient = ref(false);
                     <SecondaryButton
                         v-if="canCreateClients()"
                         @click="createClient = true"
-                        :icon="PlusIcon"
+                        :icon="PlusIcon as Component"
                         >Create your First Client
                     </SecondaryButton>
                 </div>

diff --git a/resources/js/Components/Common/Client/ClientTableRow.vue b/resources/js/Components/Common/Client/ClientTableRow.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Client } from '@/utils/api';
+import type { Client } from '@/packages/api/src';
 import { computed, ref } from 'vue';
 import { CheckCircleIcon } from '@heroicons/vue/20/solid';
 import { useClientsStore } from '@/utils/useClients';

diff --git a/resources/js/Components/Common/Invitation/InvitationMoreOptionsDropdown.vue b/resources/js/Components/Common/Invitation/InvitationMoreOptionsDropdown.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { TrashIcon, ArrowPathIcon } from '@heroicons/vue/20/solid';
-import MoreOptionsDropdown from '@/Components/MoreOptionsDropdown.vue';
+import MoreOptionsDropdown from '@/packages/ui/src/MoreOptionsDropdown.vue';
 const emit = defineEmits<{
     delete: [];
     resend: [];

diff --git a/resources/js/Components/Common/Invitation/InvitationTableRow.vue b/resources/js/Components/Common/Invitation/InvitationTableRow.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { Invitation } from '@/utils/api';
+import type { Invitation } from '@/packages/api/src';
 import TableRow from '@/Components/TableRow.vue';
 import { capitalizeFirstLetter } from '../../../utils/format';
 import InvitationMoreOptionsDropdown from '@/Components/Common/Invitation/InvitationMoreOptionsDropdown.vue';
-import { api } from '@/utils/api';
+import { api } from '@/packages/api/src';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { useNotificationsStore } from '@/utils/notification';
 import { useInvitationsStore } from '@/utils/useInvitations';

diff --git a/resources/js/Components/Common/Member/MemberBillableRateModal.vue b/resources/js/Components/Common/Member/MemberBillableRateModal.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { formatCents } from '../../../utils/money';
-import BillableRateModal from '@/Components/Common/BillableRateModal.vue';
+import { getOrganizationCurrencyString } from '@/utils/money';
+import BillableRateModal from '@/packages/ui/src/BillableRateModal.vue';
+import { formatCents } from '@/packages/ui/src/utils/money';
 
 const show = defineModel('show', { default: false });
 const saving = defineModel('saving', { default: false });
@@ -25,7 +26,10 @@ defineEmits<{
             The billable rate of {{ memberName }} will be updated to
             <strong>{{
                 newBillableRate
-                    ? formatCents(newBillableRate)
+                    ? formatCents(
+                          newBillableRate,
+                          getOrganizationCurrencyString()
+                      )
                     : ' the default rate of the organization'
             }}</strong
             >.

diff --git a/resources/js/Components/Common/Member/MemberBillableSelect.vue b/resources/js/Components/Common/Member/MemberBillableSelect.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import SelectDropdown from '@/Components/Common/SelectDropdown.vue';
-import Badge from '@/Components/Common/Badge.vue';
+import SelectDropdown from '@/packages/ui/src/Input/SelectDropdown.vue';
+import Badge from '@/packages/ui/src/Badge.vue';
 import { ChevronDownIcon } from '@heroicons/vue/20/solid';
 import type { BillableKey } from '@/types/projects';
 

diff --git a/resources/js/Components/Common/Member/MemberCombobox.vue b/resources/js/Components/Common/Member/MemberCombobox.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
-import ClientDropdownItem from '@/Components/Common/Client/ClientDropdownItem.vue';
+import ClientDropdownItem from '@/packages/ui/src/Client/ClientDropdownItem.vue';
 import { useMembersStore } from '@/utils/useMembers';
 import { UserIcon, XMarkIcon } from '@heroicons/vue/24/solid';
-import TextInput from '@/Components/TextInput.vue';
+import TextInput from '@/packages/ui/src/Input/TextInput.vue';
 import { useFocus } from '@vueuse/core';
-import type { ProjectMember } from '@/utils/api';
-import Dropdown from '@/Components/Dropdown.vue';
+import type { ProjectMember } from '@/packages/api/src';
+import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
 
 const membersStore = useMembersStore();
 const { members } = storeToRefs(membersStore);

diff --git a/resources/js/Components/Common/Member/MemberEditModal.vue b/resources/js/Components/Common/Member/MemberEditModal.vue
@@ -1,17 +1,18 @@
 <script setup lang="ts">
-import SecondaryButton from '@/Components/SecondaryButton.vue';
-import DialogModal from '@/Components/DialogModal.vue';
+import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
+import DialogModal from '@/packages/ui/src/DialogModal.vue';
 import { computed, ref } from 'vue';
-import type { Member, UpdateMemberBody } from '@/utils/api';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
+import type { Member, UpdateMemberBody } from '@/packages/api/src';
+import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
 import { type MemberBillableKey, useMembersStore } from '@/utils/useMembers';
-import BillableRateInput from '@/Components/Common/BillableRateInput.vue';
-import InputLabel from '@/Components/InputLabel.vue';
+import BillableRateInput from '@/packages/ui/src/Input/BillableRateInput.vue';
+import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
 import MemberBillableRateModal from '@/Components/Common/Member/MemberBillableRateModal.vue';
 import MemberBillableSelect from '@/Components/Common/Member/MemberBillableSelect.vue';
 import { onMounted, watch } from 'vue';
 import MemberRoleSelect from '@/Components/Common/Member/MemberRoleSelect.vue';
 import MemberOwnershipTransferConfirmModal from '@/Components/Common/Member/MemberOwnershipTransferConfirmModal.vue';
+import { getOrganizationCurrencyString } from '@/utils/money';
 
 const { updateMember } = useMembersStore();
 const show = defineModel('show', { default: false });
@@ -154,6 +155,7 @@ const roleDescription = computed(() => {
                             <BillableRateInput
                                 focus
                                 class="w-full"
+                                :currency="getOrganizationCurrencyString()"
                                 @keydown.enter="saveWithChecks()"
                                 name="memberBillableRate"
                                 v-model="

diff --git a/resources/js/Components/Common/Member/MemberInviteModal.vue b/resources/js/Components/Common/Member/MemberInviteModal.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import TextInput from '@/Components/TextInput.vue';
-import SecondaryButton from '@/Components/SecondaryButton.vue';
-import DialogModal from '@/Components/DialogModal.vue';
+import TextInput from '@/packages/ui/src/Input/TextInput.vue';
+import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
+import DialogModal from '@/packages/ui/src/DialogModal.vue';
 import { ref } from 'vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
+import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
 import { useFocus } from '@vueuse/core';
-import InputLabel from '@/Components/InputLabel.vue';
-import InputError from '@/Components/InputError.vue';
+import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
+import InputError from '@/packages/ui/src/Input/InputError.vue';
 import type { Role } from '@/types/jetstream';
 import { Link, useForm } from '@inertiajs/vue3';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { filterRoles } from '@/utils/roles';
 import { hasActiveSubscription, isBillingActivated } from '@/utils/billing';
 import { CreditCardIcon, UserGroupIcon } from '@heroicons/vue/20/solid';
 import { canUpdateOrganization } from '@/utils/permissions';
-import { api } from '@/utils/api';
-import type { MemberRole } from '@/utils/api';
+import { api } from '@/packages/api/src';
+import type { MemberRole } from '@/packages/api/src';
 import { z } from 'zod';
 import { useNotificationsStore } from '@/utils/notification';
 

diff --git a/resources/js/Components/Common/Member/MemberMoreOptionsDropdown.vue b/resources/js/Components/Common/Member/MemberMoreOptionsDropdown.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { TrashIcon, PencilSquareIcon } from '@heroicons/vue/20/solid';
-import type { Member } from '@/utils/api';
+import type { Member } from '@/packages/api/src';
 import { canDeleteMembers, canUpdateMembers } from '@/utils/permissions';
-import MoreOptionsDropdown from '@/Components/MoreOptionsDropdown.vue';
+import MoreOptionsDropdown from '@/packages/ui/src/MoreOptionsDropdown.vue';
 
 const emit = defineEmits<{
     delete: [];

diff --git a/resources/js/Components/Common/Member/MemberMultiselectDropdown.vue b/resources/js/Components/Common/Member/MemberMultiselectDropdown.vue
@@ -2,7 +2,7 @@
 import MultiselectDropdown from '@/Components/Common/MultiselectDropdown.vue';
 import { useMembersStore } from '@/utils/useMembers';
 import { storeToRefs } from 'pinia';
-import type { Member } from '@/utils/api';
+import type { Member } from '@/packages/api/src';
 
 const membersStore = useMembersStore();
 const { members } = storeToRefs(membersStore);

diff --git a/resources/js/Components/Common/Member/MemberOwnershipTransferConfirmModal.vue b/resources/js/Components/Common/Member/MemberOwnershipTransferConfirmModal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import SecondaryButton from '@/Components/SecondaryButton.vue';
-import DialogModal from '@/Components/DialogModal.vue';
-import PrimaryButton from '@/Components/PrimaryButton.vue';
+import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
+import DialogModal from '@/packages/ui/src/DialogModal.vue';
+import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
 
 const show = defineModel('show', { default: false });
 const saving = defineModel('saving', { default: false });

diff --git a/resources/js/Components/Common/Member/MemberRoleSelect.vue b/resources/js/Components/Common/Member/MemberRoleSelect.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import SelectDropdown from '@/Components/Common/SelectDropdown.vue';
-import Badge from '@/Components/Common/Badge.vue';
+import SelectDropdown from '@/packages/ui/src/Input/SelectDropdown.vue';
+import Badge from '@/packages/ui/src/Badge.vue';
 import { ChevronDownIcon } from '@heroicons/vue/20/solid';
 import type { Role } from '@/types/jetstream';
 import { usePage } from '@inertiajs/vue3';

diff --git a/resources/js/Components/Common/Member/MemberTableRow.vue b/resources/js/Components/Common/Member/MemberTableRow.vue
@@ -1,18 +1,19 @@
 <script setup lang="ts">
-import type { Member } from '@/utils/api';
+import type { Member } from '@/packages/api/src';
 import { CheckCircleIcon, UserCircleIcon } from '@heroicons/vue/20/solid';
 import MemberMoreOptionsDropdown from '@/Components/Common/Member/MemberMoreOptionsDropdown.vue';
 import TableRow from '@/Components/TableRow.vue';
 import { capitalizeFirstLetter } from '../../../utils/format';
-import SecondaryButton from '@/Components/SecondaryButton.vue';
-import { api } from '@/utils/api';
+import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
+import { api } from '@/packages/api/src';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { useNotificationsStore } from '@/utils/notification';
 import { canInvitePlaceholderMembers } from '@/utils/permissions';
 import { useMembersStore } from '@/utils/useMembers';
 import { ref } from 'vue';
 import MemberEditModal from '@/Components/Common/Member/MemberEditModal.vue';
-import { formatCents } from '../../../utils/money';
+import { getOrganizationCurrencyString } from '@/utils/money';
+import { formatCents } from '@/packages/ui/src/utils/money';
 
 const props = defineProps<{
     member: Member;
@@ -62,7 +63,12 @@ async function invitePlaceholder(id: string) {
         </div>
         <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
             {{
-                member.billable_rate ? formatCents(member.billable_rate) : '--'
+                member.billable_rate
+                    ? formatCents(
+                          member.billable_rate,
+                          getOrganizationCurrencyString()
+                      )
+                    : '--'
             }}
         </div>
         <div
Original file line number	Diff line number	Diff line change
Expand Up		@@ -285,3 +285,5 @@ test('test that adding a new tag when the timer is running', async ({
		// test billable toggle

		// TODO: Test that project can be created in the time tracker row

		// Add Test that time tracker starts on enter with description