Skip to content

Commit 3b5f3fc

Browse files
author
mdatelle
committed
refactor: migrate several components to use unraid-ui and create preset to consume in web
1 parent fea663e commit 3b5f3fc

File tree

13 files changed

+189
-131
lines changed

13 files changed

+189
-131
lines changed

‎.vscode/extensions.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"recommendations": [
3+
"natizyskunk.sftp",
4+
"davidanson.vscode-markdownlint",
5+
"bmewburn.vscode-intelephense-client",
6+
"foxundermoon.shell-format",
7+
"timonwong.shellcheck",
8+
"esbenp.prettier-vscode"
9+
]
10+
}

‎.vscode/settings.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"files.associations": {
3+
"*.page": "php"
4+
},
5+
"editor.codeActionsOnSave": {
6+
"source.fixAll": "never",
7+
"source.fixAll.eslint": "explicit"
8+
},
9+
"i18n-ally.localesPaths": [
10+
"locales"
11+
],
12+
"i18n-ally.keystyle": "flat",
13+
"eslint.experimental.useFlatConfig": true,
14+
}
15+

‎.vscode/sftp-template.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"_comment": "rename this file to .vscode/sftp.json and replace name/host/privateKeyPath for your system",
3+
"name": "Tower",
4+
"host": "Tower.local",
5+
"protocol": "sftp",
6+
"port": 22,
7+
"username": "root",
8+
"privateKeyPath": "C:/Users/username/.ssh/tower",
9+
"remotePath": "/",
10+
"context": "plugin/source/dynamix.unraid.net/",
11+
"uploadOnSave": true,
12+
"useTempFile": false,
13+
"openSsh": false,
14+
"ignore": [
15+
"// comment: ignore dot files/dirs in root of repo",
16+
".github",
17+
".vscode",
18+
".git",
19+
".DS_Store"
20+
]
21+
}
22+

‎unraid-ui/tailwind.config.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,8 @@ export default {
55
presets: [unraidPreset],
66
content: [
77
"./src/components/**/*.{js,vue,ts}",
8-
"./src/components/**/*.ce.{js,vue,ts}",
98
"./src/composables/**/*.{js,vue,ts}",
10-
"./stories/**/*.stories.{js,ts,jsx,tsx,mdx}"
9+
"./stories/**/*.stories.{js,ts,jsx,tsx,mdx}",
1110
],
1211
safelist: [
1312
"dark",

‎web/components/Auth.ce.vue‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
<script lang="ts" setup>
2-
// eslint-disable vue/no-v-html
2+
import { BrandButton } from '@unraid/ui';
3+
import { useServerStore } from '~/store/server';
34
import { storeToRefs } from 'pinia';
45
import { useI18n } from 'vue-i18n';
56
6-
import { useServerStore } from '~/store/server';
7-
import 'tailwindcss/tailwind.css';
8-
import '~/assets/main.css';
9-
107
const { t } = useI18n();
118
129
const serverStore = useServerStore();
@@ -33,7 +30,7 @@ const { authAction, stateData } = storeToRefs(serverStore);
3330
</template>
3431

3532
<style lang="postcss">
36-
@tailwind base;
37-
@tailwind components;
38-
@tailwind utilities;
33+
/* Import unraid-ui globals first */
34+
@import '@unraid/ui/styles';
35+
@import '../assets/main.css';
3936
</style>

‎web/components/DowngradeOs.ce.vue‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,12 @@ else
1515
echo "Third party plugins found - PLEASE CHECK YOUR UNRAID NOTIFICATIONS AND WAIT FOR THE MESSAGE THAT IT IS SAFE TO REBOOT!"
1616
fi
1717
*/
18+
import { PageContainer } from '@unraid/ui';
19+
import { useServerStore } from '~/store/server';
1820
import { storeToRefs } from 'pinia';
1921
import { onBeforeMount } from 'vue';
2022
import { useI18n } from 'vue-i18n';
2123
22-
import { useServerStore } from '~/store/server';
23-
24-
import 'tailwindcss/tailwind.css';
25-
import '~/assets/main.css';
26-
2724
const { t } = useI18n();
2825
2926
export interface Props {
@@ -56,7 +53,7 @@ onBeforeMount(() => {
5653
</script>
5754

5855
<template>
59-
<UiPageContainer>
56+
<PageContainer>
6057
<UpdateOsStatus
6158
:title="t('Downgrade Unraid OS')"
6259
:subtitle="subtitle"
@@ -70,15 +67,12 @@ onBeforeMount(() => {
7067
:version="restoreVersion"
7168
:t="t"
7269
/>
73-
<UpdateOsThirdPartyDrivers
74-
v-if="rebootType === 'thirdPartyDriversDownloading'"
75-
:t="t"
76-
/>
77-
</UiPageContainer>
70+
<UpdateOsThirdPartyDrivers v-if="rebootType === 'thirdPartyDriversDownloading'" :t="t" />
71+
</PageContainer>
7872
</template>
7973

8074
<style lang="postcss">
81-
@tailwind base;
82-
@tailwind components;
83-
@tailwind utilities;
75+
/* Import unraid-ui globals first */
76+
@import '@unraid/ui/styles';
77+
@import '../assets/main.css';
8478
</style>

‎web/components/DownloadApiLogs.ce.vue‎

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
<script setup lang="ts">
2-
import { storeToRefs } from 'pinia';
32
import { ArrowDownTrayIcon, ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/solid';
4-
import { useI18n } from 'vue-i18n';
5-
3+
import { BrandButton } from '@unraid/ui';
64
import { CONNECT_FORUMS, CONTACT, DISCORD, WEBGUI_GRAPHQL } from '~/helpers/urls';
75
import { useServerStore } from '~/store/server';
8-
import 'tailwindcss/tailwind.css';
9-
import '~/assets/main.css';
6+
import { storeToRefs } from 'pinia';
7+
import { useI18n } from 'vue-i18n';
108
119
const { t } = useI18n();
1210
@@ -19,7 +17,11 @@ const downloadUrl = computed(() => new URL(`/graphql/api/logs?apiKey=${apiKey.va
1917
<div class="whitespace-normal flex flex-col gap-y-16px max-w-3xl">
2018
<span>
2119
{{ t('The primary method of support for Unraid Connect is through our forums and Discord.') }}
22-
{{ t('If you are asked to supply logs, please open a support request on our Contact Page and reply to the email message you receive with your logs attached.') }}
20+
{{
21+
t(
22+
'If you are asked to supply logs, please open a support request on our Contact Page and reply to the email message you receive with your logs attached.'
23+
)
24+
}}
2325
{{ t('The logs may contain sensitive information so do not post them publicly.') }}
2426
</span>
2527
<span class="flex flex-col gap-y-16px">
@@ -36,15 +38,30 @@ const downloadUrl = computed(() => new URL(`/graphql/api/logs?apiKey=${apiKey.va
3638
</div>
3739

3840
<div class="flex flex-row items-baseline gap-8px">
39-
<a :href="CONNECT_FORUMS.toString()" target="_blank" rel="noopener noreferrer" class="text-[#486dba] hover:text-[#3b5ea9] focus:text-[#3b5ea9] hover:underline focus:underline inline-flex flex-row items-center justify-start gap-8px">
41+
<a
42+
:href="CONNECT_FORUMS.toString()"
43+
target="_blank"
44+
rel="noopener noreferrer"
45+
class="text-[#486dba] hover:text-[#3b5ea9] focus:text-[#3b5ea9] hover:underline focus:underline inline-flex flex-row items-center justify-start gap-8px"
46+
>
4047
{{ t('Unraid Connect Forums') }}
4148
<ArrowTopRightOnSquareIcon class="w-16px" />
4249
</a>
43-
<a :href="DISCORD.toString()" target="_blank" rel="noopener noreferrer" class="text-[#486dba] hover:text-[#3b5ea9] focus:text-[#3b5ea9] hover:underline focus:underline inline-flex flex-row items-center justify-start gap-8px">
50+
<a
51+
:href="DISCORD.toString()"
52+
target="_blank"
53+
rel="noopener noreferrer"
54+
class="text-[#486dba] hover:text-[#3b5ea9] focus:text-[#3b5ea9] hover:underline focus:underline inline-flex flex-row items-center justify-start gap-8px"
55+
>
4456
{{ t('Unraid Discord') }}
4557
<ArrowTopRightOnSquareIcon class="w-16px" />
4658
</a>
47-
<a :href="CONTACT.toString()" target="_blank" rel="noopener noreferrer" class="text-[#486dba] hover:text-[#3b5ea9] focus:text-[#3b5ea9] hover:underline focus:underline inline-flex flex-row items-center justify-start gap-8px">
59+
<a
60+
:href="CONTACT.toString()"
61+
target="_blank"
62+
rel="noopener noreferrer"
63+
class="text-[#486dba] hover:text-[#3b5ea9] focus:text-[#3b5ea9] hover:underline focus:underline inline-flex flex-row items-center justify-start gap-8px"
64+
>
4865
{{ t('Unraid Contact Page') }}
4966
<ArrowTopRightOnSquareIcon class="w-16px" />
5067
</a>
@@ -54,7 +71,7 @@ const downloadUrl = computed(() => new URL(`/graphql/api/logs?apiKey=${apiKey.va
5471
</template>
5572

5673
<style lang="postcss">
57-
@tailwind base;
58-
@tailwind components;
59-
@tailwind utilities;
74+
/* Import unraid-ui globals first */
75+
@import '@unraid/ui/styles';
76+
@import '../assets/main.css';
6077
</style>

‎web/components/UpdateOs.ce.vue‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,13 @@ else
1515
echo "Third party plugins found - PLEASE CHECK YOUR UNRAID NOTIFICATIONS AND WAIT FOR THE MESSAGE THAT IT IS SAFE TO REBOOT!"
1616
fi
1717
*/
18+
import { BrandLoading, PageContainer } from '@unraid/ui';
1819
import { WEBGUI_TOOLS_UPDATE } from '~/helpers/urls';
1920
import { useAccountStore } from '~/store/account';
2021
import { useServerStore } from '~/store/server';
2122
import { storeToRefs } from 'pinia';
2223
import { useI18n } from 'vue-i18n';
2324
24-
// import 'tailwindcss/tailwind.css';
25-
// import '~/assets/main.css';
26-
2725
const { t } = useI18n();
2826
2927
export interface Props {
@@ -58,7 +56,7 @@ onBeforeMount(() => {
5856
</script>
5957

6058
<template>
61-
<UiPageContainer>
59+
<PageContainer>
6260
<BrandLoading v-if="showLoader" class="mx-auto my-12 max-w-160px" />
6361
<UpdateOsStatus
6462
v-else
@@ -68,12 +66,13 @@ onBeforeMount(() => {
6866
:t="t"
6967
/>
7068
<UpdateOsThirdPartyDrivers v-if="rebootType === 'thirdPartyDriversDownloading'" :t="t" />
71-
</UiPageContainer>
69+
</PageContainer>
7270
</template>
7371

7472
<style lang="postcss">
7573
/* Import unraid-ui globals first */
7674
@import '@unraid/ui/styles';
75+
@import '../assets/main.css';
7776
7877
.unraid_mark_2,
7978
.unraid_mark_4 {

‎web/components/UpdateOs/Downgrade.vue‎

Lines changed: 40 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,16 @@ import {
66
InformationCircleIcon,
77
LifebuoyIcon,
88
} from '@heroicons/vue/24/solid';
9-
import dayjs from 'dayjs';
10-
import { storeToRefs } from 'pinia';
11-
import { ref } from 'vue';
12-
import type { ComposerTranslation } from 'vue-i18n';
13-
14-
import 'tailwindcss/tailwind.css';
15-
import '~/assets/main.css';
16-
9+
import { BrandButton, CardWrapper } from '@unraid/ui';
1710
import useDateTimeHelper from '~/composables/dateTime';
1811
import { FORUMS_BUG_REPORT } from '~/helpers/urls';
1912
import { useServerStore } from '~/store/server';
2013
import { useUpdateOsActionsStore } from '~/store/updateOsActions';
2114
import type { UserProfileLink } from '~/types/userProfile';
15+
import dayjs from 'dayjs';
16+
import { storeToRefs } from 'pinia';
17+
import { ref } from 'vue';
18+
import type { ComposerTranslation } from 'vue-i18n';
2219
2320
const props = defineProps<{
2421
t: ComposerTranslation;
@@ -30,9 +27,12 @@ const serverStore = useServerStore();
3027
const updateOsActionsStore = useUpdateOsActionsStore();
3128
3229
const { dateTimeFormat } = storeToRefs(serverStore);
33-
const {
34-
outputDateTimeFormatted: formattedReleaseDate,
35-
} = useDateTimeHelper(dateTimeFormat.value, props.t, true, dayjs(props.releaseDate, 'YYYY-MM-DD').valueOf());
30+
const { outputDateTimeFormatted: formattedReleaseDate } = useDateTimeHelper(
31+
dateTimeFormat.value,
32+
props.t,
33+
true,
34+
dayjs(props.releaseDate, 'YYYY-MM-DD').valueOf()
35+
);
3636
3737
const diagnosticsButton = ref<UserProfileLink | undefined>({
3838
click: () => {
@@ -55,12 +55,10 @@ const downgradeButton = ref<UserProfileLink>({
5555
</script>
5656

5757
<template>
58-
<UiCardWrapper :increased-padding="true">
58+
<CardWrapper :increased-padding="true">
5959
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-20px sm:gap-24px">
6060
<div class="grid gap-y-16px">
61-
<h3
62-
class="font-semibold leading-normal flex flex-row items-start justify-start gap-8px"
63-
>
61+
<h3 class="font-semibold leading-normal flex flex-row items-start justify-start gap-8px">
6462
<ArrowUturnDownIcon class="w-20px shrink-0" />
6563
<span class="leading-none inline-flex flex-wrap justify-start items-baseline gap-8px">
6664
<span class="text-20px">
@@ -76,28 +74,45 @@ const downgradeButton = ref<UserProfileLink>({
7674
</h3>
7775
<div class="prose text-16px leading-relaxed opacity-75 whitespace-normal">
7876
<p>{{ t(`Downgrades are only recommended if you're unable to solve a critical issue.`) }}</p>
79-
<p>{{ t('In the rare event you need to downgrade we ask that you please provide us with Diagnostics so we can investigate your issue.') }}</p>
80-
<p>{{ t('Download the Diagnostics zip then please open a bug report on our forums with a description of the issue along with your diagnostics.') }} </p>
77+
<p>
78+
{{
79+
t(
80+
'In the rare event you need to downgrade we ask that you please provide us with Diagnostics so we can investigate your issue.'
81+
)
82+
}}
83+
</p>
84+
<p>
85+
{{
86+
t(
87+
'Download the Diagnostics zip then please open a bug report on our forums with a description of the issue along with your diagnostics.'
88+
)
89+
}}
90+
</p>
8191
</div>
8292
</div>
8393

8494
<div v-if="downgradeButton" class="flex flex-col flex-shrink-0 gap-16px flex-grow items-stretch">
8595
<BrandButton
86-
:btn-style="'underline'"
96+
:variant="'underline'"
8797
:icon="InformationCircleIcon"
8898
:text="t('{0} Release Notes', [version])"
89-
@click="updateOsActionsStore.viewReleaseNotes(t('{0} Release Notes', [version]), '/boot/previous/changes.txt')"
99+
@click="
100+
updateOsActionsStore.viewReleaseNotes(
101+
t('{0} Release Notes', [version]),
102+
'/boot/previous/changes.txt'
103+
)
104+
"
90105
/>
91106
<BrandButton
92107
v-if="diagnosticsButton"
93-
:btn-style="'gray'"
108+
:variant="'gray'"
94109
:icon="diagnosticsButton.icon"
95110
:name="diagnosticsButton.name"
96111
:text="diagnosticsButton.text"
97112
@click="diagnosticsButton.click"
98113
/>
99114
<BrandButton
100-
:btn-style="'gray'"
115+
:variant="'gray'"
101116
:external="true"
102117
:href="FORUMS_BUG_REPORT.toString()"
103118
:icon="LifebuoyIcon"
@@ -113,11 +128,11 @@ const downgradeButton = ref<UserProfileLink>({
113128
/>
114129
</div>
115130
</div>
116-
</UiCardWrapper>
131+
</CardWrapper>
117132
</template>
118133

119134
<style lang="postcss">
120-
@tailwind base;
121-
@tailwind components;
122-
@tailwind utilities;
135+
/* Import unraid-ui globals first */
136+
@import '@unraid/ui/styles';
137+
@import '../../assets/main.css';
123138
</style>

0 commit comments

Comments
 (0)