v0.4.0

Add Weather and Ping module
ajnart · May 18, 2022 · 2586733 · 2586733
2 parents 5c6541e + 7bc779b
commit 2586733
Show file tree

Hide file tree

Showing 35 changed files with 2,027 additions and 1,505 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -20,6 +20,7 @@ module.exports = {
   },
   rules: {
     'react/react-in-jsx-scope': 'off',
+    'react/no-children-prop': 'off',
     "unused-imports/no-unused-imports": "warn",
     "@typescript-eslint/no-unused-vars": "off",
     "@typescript-eslint/no-unused-imports": "off",

diff --git a/.storybook/main.js b/.storybook/main.js
@@ -3,6 +3,7 @@ module.exports = {
   addons: [
     'storybook-dark-mode',
     '@storybook/addon-links',
+    'storybook-addon-mock/register',
     '@storybook/addon-essentials',
     {
       name: 'storybook-addon-turbo-build',

diff --git a/README.md b/README.md
@@ -39,6 +39,7 @@
     - [📊 Modules](#-modules)
     - [🔍 Search Bar](#-search-bar)
 - [💖 Contributing](#-contributing)
+    - [🍏 Request Icons](#-request-icons)
 
 
 <!-- Getting Started -->
@@ -168,10 +169,13 @@ Icons are requested in the following way: <br>
 Modules are blocks shown on the sides of the Homarr dashboard that display information. They can be enabled in settings.
 
 **Clock Module**
-The clock module will display your current time and date.
+The Clock Module will display your current time and date.
 
 **Calendar Module**
-The Calendar module uses [integrations](#--integrations-1) to display new content.
+The Calendar Module uses [integrations](#--integrations-1) to display new content.
+
+**Weather Module**
+The Weather Module uses your devices location to display the current, highest, and lowest temperature.
 
 **[⤴️ Back to Top](#-table-of-contents)**
 
@@ -187,5 +191,11 @@ The Search Bar will open any Search Query after the Query URL you've specified i
 **Please read our [Contribution Guidelines](/CONTRIBUTING.md)**
 
 All contributions are highly appreciated.
+
+**[⤴️ Back to Top](#-table-of-contents)**
+
+## 🍏 Request Icons
+
+The icons used in Homarr are automatically requested from the [dashboard-icons](https://github.com/walkxhub/dashboard-icons) repo. You can make a icon request by creating an [issue](https://github.com/walkxhub/dashboard-icons/issues/new/choose).
 
 **[⤴️ Back to Top](#-table-of-contents)**
diff --git a/data/constants.ts b/data/constants.ts
@@ -1,2 +1,2 @@
 export const REPO_URL = 'ajnart/homarr';
-export const CURRENT_VERSION = 'v0.3.1';
+export const CURRENT_VERSION = 'v0.4.0';
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "homarr",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"private": "false",
 	"description": "Homarr - A homepage for your server.",
 	"repository": {
@@ -79,9 +79,13 @@
     "eslint-plugin-unused-imports": "^2.0.0",
     "jest": "^27.5.1",
     "prettier": "^2.6.2",
+    "storybook-addon-mock": "^2.3.2",
     "storybook-addon-turbo-build": "^1.1.0",
     "storybook-dark-mode": "^1.0.9",
     "ts-jest": "^27.1.4",
     "typescript": "4.6.3"
+  },
+  "resolutions": {
+    "@types/react": "17.0.30"
   }
 }
diff --git a/src/components/AppShelf/AddAppShelfItem.tsx b/src/components/AppShelf/AddAppShelfItem.tsx
@@ -154,7 +154,14 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
   return (
     <>
       <Center>
-        <Image height={120} width={120} src={form.values.icon} alt="Placeholder" withPlaceholder />
+        <Image
+          height={120}
+          width={120}
+          fit="contain"
+          src={form.values.icon}
+          alt="Placeholder"
+          withPlaceholder
+        />
       </Center>
       <form
         onSubmit={form.onSubmit(() => {

diff --git a/src/components/AppShelf/AppShelf.tsx b/src/components/AppShelf/AppShelf.tsx
@@ -1,17 +1,28 @@
 import React, { useState } from 'react';
 import { motion } from 'framer-motion';
-import { Text, AspectRatio, Card, Image, useMantineTheme, Center, Grid } from '@mantine/core';
+import { Text, AspectRatio, Card, Image, Center, Grid, createStyles } from '@mantine/core';
 import { useConfig } from '../../tools/state';
 import { serviceItem } from '../../tools/types';
 import AppShelfMenu from './AppShelfMenu';
+import PingComponent from '../modules/ping/PingModule';
+
+const useStyles = createStyles((theme) => ({
+  item: {
+    transition: 'box-shadow 150ms ease, transform 100ms ease',
+
+    '&:hover': {
+      boxShadow: `${theme.shadows.md} !important`,
+      transform: 'scale(1.05)',
+    },
+  },
+}));
 
 const AppShelf = (props: any) => {
   const { config } = useConfig();
-
   return (
     <Grid gutter="xl" align="center">
       {config.services.map((service) => (
-        <Grid.Col span={6} xl={2} xs={4} sm={3} md={3}>
+        <Grid.Col key={service.name} span={6} xl={2} xs={4} sm={3} md={3}>
           <AppShelfItem key={service.name} service={service} />
         </Grid.Col>
       ))}
@@ -22,9 +33,14 @@ const AppShelf = (props: any) => {
 export function AppShelfItem(props: any) {
   const { service }: { service: serviceItem } = props;
   const [hovering, setHovering] = useState(false);
-  const theme = useMantineTheme();
+  const { classes, theme } = useStyles();
   return (
     <motion.div
+      animate={{
+        scale: [0.9, 1.06, 1],
+        rotate: [0, 5, 0],
+      }}
+      transition={{ duration: 0.6, type: 'spring', damping: 10, mass: 0.75, stiffness: 100 }}
       key={service.name}
       onHoverStart={() => {
         setHovering(true);
@@ -33,16 +49,16 @@ export function AppShelfItem(props: any) {
         setHovering(false);
       }}
     >
-      <Card withBorder radius="lg" shadow="md">
+      <Card withBorder radius="lg" shadow="md" className={classes.item}>
         <Card.Section>
           <Text mt="sm" align="center" lineClamp={1} weight={550}>
             {service.name}
           </Text>
           <motion.div
             style={{
               position: 'absolute',
-              top: 5,
-              right: 5,
+              top: 15,
+              right: 15,
               alignSelf: 'flex-end',
             }}
             animate={{
@@ -79,6 +95,7 @@ export function AppShelfItem(props: any) {
                 />
               </motion.i>
             </AspectRatio>
+            <PingComponent url={service.url} />
           </Card.Section>
         </Center>
       </Card>

diff --git a/src/components/AppShelf/AppShelfMenu.tsx b/src/components/AppShelf/AppShelfMenu.tsx
@@ -1,4 +1,4 @@
-import { Menu, Modal, Text } from '@mantine/core';
+import { Menu, Modal, Text, useMantineTheme } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { useState } from 'react';
 import { Check, Edit, Trash } from 'tabler-icons-react';
@@ -8,12 +8,13 @@ import { AddAppShelfItemForm } from './AddAppShelfItem';
 export default function AppShelfMenu(props: any) {
   const { service } = props;
   const { config, setConfig } = useConfig();
+  const theme = useMantineTheme();
   const [opened, setOpened] = useState(false);
   return (
     <>
       <Modal
         size="xl"
-        radius="lg"
+        radius="md"
         opened={props.opened || opened}
         onClose={() => setOpened(false)}
         title="Modify a service"
@@ -28,7 +29,16 @@ export default function AppShelfMenu(props: any) {
           message="Save service"
         />
       </Modal>
-      <Menu position="right">
+      <Menu
+        position="right"
+        radius="md"
+        styles={{
+          body: {
+            backgroundColor:
+              theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+          },
+        }}
+      >
         <Menu.Label>Settings</Menu.Label>
         <Menu.Item
           color="primary"

diff --git a/src/components/Settings/SettingsMenu.tsx b/src/components/Settings/SettingsMenu.tsx
@@ -2,19 +2,15 @@ import {
   ActionIcon,
   Group,
   Modal,
-  Switch,
   Title,
   Text,
   Tooltip,
   SegmentedControl,
-  Indicator,
-  Alert,
   TextInput,
 } from '@mantine/core';
 import { useColorScheme } from '@mantine/hooks';
-import { useEffect, useState } from 'react';
-import { AlertCircle, Settings as SettingsIcon } from 'tabler-icons-react';
-import { CURRENT_VERSION, REPO_URL } from '../../../data/constants';
+import { useState } from 'react';
+import { Settings as SettingsIcon } from 'tabler-icons-react';
 import { useConfig } from '../../tools/state';
 import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
 import ConfigChanger from '../Config/ConfigChanger';
@@ -40,14 +36,6 @@ function SettingsMenu(props: any) {
 
   return (
     <Group direction="column" grow>
-      <Alert
-        icon={<AlertCircle size={16} />}
-        title="Update available"
-        radius="lg"
-        hidden={current === latest}
-      >
-        Version {latest} is available. Current: {current}
-      </Alert>
       <Group grow direction="column" spacing={0}>
         <Text>Search engine</Text>
         <SegmentedControl
@@ -90,22 +78,6 @@ function SettingsMenu(props: any) {
           />
         )}
       </Group>
-      <Group direction="column">
-        <Switch
-          size="md"
-          onChange={(e) =>
-            setConfig({
-              ...config,
-              settings: {
-                ...config.settings,
-                searchBar: e.currentTarget.checked,
-              },
-            })
-          }
-          checked={config.settings.searchBar}
-          label="Enable search bar"
-        />
-      </Group>
       <ModuleEnabler />
       <ColorSchemeSwitch />
       <ConfigChanger />
@@ -125,20 +97,7 @@ function SettingsMenu(props: any) {
 }
 
 export function SettingsMenuButton(props: any) {
-  const [update, setUpdate] = useState(false);
   const [opened, setOpened] = useState(false);
-  const [latestVersion, setLatestVersion] = useState(CURRENT_VERSION);
-  useEffect(() => {
-    // Fetch Data here when component first mounted
-    fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => {
-      res.json().then((data) => {
-        setLatestVersion(data.tag_name);
-        if (data.tag_name !== CURRENT_VERSION) {
-          setUpdate(true);
-        }
-      });
-    });
-  }, []);
   return (
     <>
       <Modal
@@ -148,7 +107,7 @@ export function SettingsMenuButton(props: any) {
         opened={props.opened || opened}
         onClose={() => setOpened(false)}
       >
-        <SettingsMenu current={CURRENT_VERSION} latest={latestVersion} />
+        <SettingsMenu />
       </Modal>
       <ActionIcon
         variant="default"
@@ -159,14 +118,7 @@ export function SettingsMenuButton(props: any) {
         onClick={() => setOpened(true)}
       >
         <Tooltip label="Settings">
-          <Indicator
-            size={12}
-            disabled={CURRENT_VERSION === latestVersion}
-            offset={-3}
-            position="top-end"
-          >
-            <SettingsIcon />
-          </Indicator>
+          <SettingsIcon />
         </Tooltip>
       </ActionIcon>
     </>

diff --git a/src/components/layout/Aside.tsx b/src/components/layout/Aside.tsx
@@ -1,7 +1,6 @@
 import { Aside as MantineAside, Group } from '@mantine/core';
-import { DateModule } from '../modules';
-import { CalendarModule } from '../modules/calendar/CalendarModule';
-import ModuleWrapper from '../modules/moduleWrapper';
+import { WeatherModule, DateModule, CalendarModule } from '../modules';
+import { ModuleWrapper } from '../modules/moduleWrapper';
 
 export default function Aside(props: any) {
   return (
@@ -18,6 +17,7 @@ export default function Aside(props: any) {
       <Group mt="sm" grow direction="column">
         <ModuleWrapper module={CalendarModule} />
         <ModuleWrapper module={DateModule} />
+        <ModuleWrapper module={WeatherModule} />
       </Group>
     </MantineAside>
   );