From 3e198526e66b88301882b14240f0d50b8819b520 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 18 Feb 2024 18:40:14 +0200
Subject: dynamically load .style.js files; move the files closer to related
 components

---
 src/components/attachment/attachment.style.js     | 15 ++++++
 src/components/avatar.style.js                    | 22 --------
 src/components/button.style.js                    |  2 +-
 src/components/button_unstyled.style.js           |  2 +-
 src/components/chat/chat.scss                     | 12 +----
 src/components/input.style.js                     |  2 +-
 src/components/modal/modals.style.js              |  9 ++++
 src/components/modals.style.js                    |  9 ----
 src/components/notification.style.js              | 22 --------
 src/components/notification/notification.style.js | 23 ++++++++
 src/components/poll/poll_graph.style.js           | 14 +++++
 src/components/post.style.js                      | 22 --------
 src/components/rich_content.style.js              | 17 ------
 src/components/rich_content/rich_content.style.js | 17 ++++++
 src/components/status/post.style.js               | 24 +++++++++
 src/components/user_avatar/avatar.style.js        | 22 ++++++++
 src/services/theme_data/theme_data_3.service.js   | 65 +++++++----------------
 17 files changed, 147 insertions(+), 152 deletions(-)
 create mode 100644 src/components/attachment/attachment.style.js
 delete mode 100644 src/components/avatar.style.js
 create mode 100644 src/components/modal/modals.style.js
 delete mode 100644 src/components/modals.style.js
 delete mode 100644 src/components/notification.style.js
 create mode 100644 src/components/notification/notification.style.js
 create mode 100644 src/components/poll/poll_graph.style.js
 delete mode 100644 src/components/post.style.js
 delete mode 100644 src/components/rich_content.style.js
 create mode 100644 src/components/rich_content/rich_content.style.js
 create mode 100644 src/components/status/post.style.js
 create mode 100644 src/components/user_avatar/avatar.style.js

(limited to 'src')

diff --git a/src/components/attachment/attachment.style.js b/src/components/attachment/attachment.style.js
new file mode 100644
index 00000000..b76b3eb0
--- /dev/null
+++ b/src/components/attachment/attachment.style.js
@@ -0,0 +1,15 @@
+export default {
+  name: 'Attachment',
+  selector: '.Attachment',
+  validInnerComponents: [
+    'Border',
+    'ButtonUnstyled'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        roundness: 3
+      }
+    }
+  ]
+}
diff --git a/src/components/avatar.style.js b/src/components/avatar.style.js
deleted file mode 100644
index 812d45a4..00000000
--- a/src/components/avatar.style.js
+++ /dev/null
@@ -1,22 +0,0 @@
-export default {
-  name: 'Avatar',
-  selector: '.Avatar',
-  variants: {
-    compact: '.-compact'
-  },
-  defaultRules: [
-    {
-      directives: {
-        roundness: 3,
-        shadow: [{
-          x: 0,
-          y: 1,
-          blur: 8,
-          spread: 0,
-          color: '#000000',
-          alpha: 0.7
-        }]
-      }
-    }
-  ]
-}
diff --git a/src/components/button.style.js b/src/components/button.style.js
index 9f238b4e..6560c8fb 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -40,7 +40,7 @@ export default {
     // normal: '' // normal state is implicitly added, it is always included
     toggled: '.toggled',
     pressed: ':active',
-    hover: ':hover',
+    hover: ':hover:not(:disabled)',
     focused: ':focus-within',
     disabled: ':disabled'
   },
diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
index e80322eb..89e8499c 100644
--- a/src/components/button_unstyled.style.js
+++ b/src/components/button_unstyled.style.js
@@ -5,7 +5,7 @@ export default {
     disabled: ':disabled',
     toggled: '.toggled',
     pressed: ':active',
-    hover: ':hover',
+    hover: ':hover:not(:disabled)',
     focused: ':focus-within'
   },
   validInnerComponents: [
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 4f8f8492..31061409 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -11,7 +11,6 @@
 
   .chat-view-body {
     box-sizing: border-box;
-    background-color: var(--chatBg, $fallback--bg);
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -38,8 +37,7 @@
   .footer {
     position: sticky;
     bottom: 0;
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
+    background-color: var(--background);
     z-index: 1;
   }
 
@@ -62,8 +60,6 @@
     position: absolute;
     right: 1.3em;
     top: -3.2em;
-    background-color: $fallback--fg;
-    background-color: var(--btn, $fallback--fg);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -80,12 +76,6 @@
       visibility: visible;
     }
 
-    i {
-      font-size: 1em;
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
-
     .unread-message-count {
       font-size: 0.8em;
       left: 50%;
diff --git a/src/components/input.style.js b/src/components/input.style.js
index 9cddfd8e..7db50b66 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -24,7 +24,7 @@ export default {
   selector: '.input',
   states: {
     disabled: ':disabled',
-    hover: ':hover',
+    hover: ':hover:not(:disabled)',
     focused: ':focus-within'
   },
   validInnerComponents: [
diff --git a/src/components/modal/modals.style.js b/src/components/modal/modals.style.js
new file mode 100644
index 00000000..c401a0cd
--- /dev/null
+++ b/src/components/modal/modals.style.js
@@ -0,0 +1,9 @@
+export default {
+  name: 'Modals',
+  selector: '.modal-view',
+  lazy: true,
+  validInnerComponents: [
+    'Panel'
+  ],
+  defaultRules: []
+}
diff --git a/src/components/modals.style.js b/src/components/modals.style.js
deleted file mode 100644
index c401a0cd..00000000
--- a/src/components/modals.style.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export default {
-  name: 'Modals',
-  selector: '.modal-view',
-  lazy: true,
-  validInnerComponents: [
-    'Panel'
-  ],
-  defaultRules: []
-}
diff --git a/src/components/notification.style.js b/src/components/notification.style.js
deleted file mode 100644
index 0802da77..00000000
--- a/src/components/notification.style.js
+++ /dev/null
@@ -1,22 +0,0 @@
-export default {
-  name: 'Notification',
-  selector: '.Notification',
-  validInnerComponents: [
-    'Text',
-    'Link',
-    'Icon',
-    'Border',
-    'Button',
-    'ButtonUnstyled',
-    'RichContent',
-    'Input',
-    'Avatar'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        background: '--bg'
-      }
-    }
-  ]
-}
diff --git a/src/components/notification/notification.style.js b/src/components/notification/notification.style.js
new file mode 100644
index 00000000..ad7aab65
--- /dev/null
+++ b/src/components/notification/notification.style.js
@@ -0,0 +1,23 @@
+export default {
+  name: 'Notification',
+  selector: '.Notification',
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'ButtonUnstyled',
+    'RichContent',
+    'Input',
+    'Avatar',
+    'Attachment'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg'
+      }
+    }
+  ]
+}
diff --git a/src/components/poll/poll_graph.style.js b/src/components/poll/poll_graph.style.js
new file mode 100644
index 00000000..01b4d35c
--- /dev/null
+++ b/src/components/poll/poll_graph.style.js
@@ -0,0 +1,14 @@
+export default {
+  name: 'PollGraph',
+  selector: '.poll-graph',
+  validInnerComponents: [
+    'Text'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--accent'
+      }
+    }
+  ]
+}
diff --git a/src/components/post.style.js b/src/components/post.style.js
deleted file mode 100644
index f4bd12a6..00000000
--- a/src/components/post.style.js
+++ /dev/null
@@ -1,22 +0,0 @@
-export default {
-  name: 'Post',
-  selector: '.Status',
-  validInnerComponents: [
-    'Text',
-    'Link',
-    'Icon',
-    'Border',
-    'Button',
-    'ButtonUnstyled',
-    'RichContent',
-    'Input',
-    'Avatar'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        background: '--bg'
-      }
-    }
-  ]
-}
diff --git a/src/components/rich_content.style.js b/src/components/rich_content.style.js
deleted file mode 100644
index aaf126a5..00000000
--- a/src/components/rich_content.style.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export default {
-  name: 'RichContent',
-  selector: '.RichContent',
-  validInnerComponents: [
-    'Text',
-    'FunText',
-    'Link'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        background: '--bg',
-        textNoCssColor: 'yes'
-      }
-    }
-  ]
-}
diff --git a/src/components/rich_content/rich_content.style.js b/src/components/rich_content/rich_content.style.js
new file mode 100644
index 00000000..aaf126a5
--- /dev/null
+++ b/src/components/rich_content/rich_content.style.js
@@ -0,0 +1,17 @@
+export default {
+  name: 'RichContent',
+  selector: '.RichContent',
+  validInnerComponents: [
+    'Text',
+    'FunText',
+    'Link'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        textNoCssColor: 'yes'
+      }
+    }
+  ]
+}
diff --git a/src/components/status/post.style.js b/src/components/status/post.style.js
new file mode 100644
index 00000000..dda79220
--- /dev/null
+++ b/src/components/status/post.style.js
@@ -0,0 +1,24 @@
+export default {
+  name: 'Post',
+  selector: '.Status',
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'ButtonUnstyled',
+    'RichContent',
+    'Input',
+    'Avatar',
+    'Attachment',
+    'PollGraph'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg'
+      }
+    }
+  ]
+}
diff --git a/src/components/user_avatar/avatar.style.js b/src/components/user_avatar/avatar.style.js
new file mode 100644
index 00000000..812d45a4
--- /dev/null
+++ b/src/components/user_avatar/avatar.style.js
@@ -0,0 +1,22 @@
+export default {
+  name: 'Avatar',
+  selector: '.Avatar',
+  variants: {
+    compact: '.-compact'
+  },
+  defaultRules: [
+    {
+      directives: {
+        roundness: 3,
+        shadow: [{
+          x: 0,
+          y: 1,
+          blur: 8,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.7
+        }]
+      }
+    }
+  ]
+}
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 41c77506..f84a61c9 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -7,56 +7,25 @@ import {
   relativeLuminance
 } from '../color_convert/color_convert.js'
 
-import Root from 'src/components/root.style.js'
-import TopBar from 'src/components/top_bar.style.js'
-import Underlay from 'src/components/underlay.style.js'
-import Popover from 'src/components/popover.style.js'
-import Modals from 'src/components/modals.style.js'
-import MenuItem from 'src/components/menu_item.style.js'
-import Panel from 'src/components/panel.style.js'
-import PanelHeader from 'src/components/panel_header.style.js'
-import Button from 'src/components/button.style.js'
-import ButtonUnstyled from 'src/components/button_unstyled.style.js'
-import Input from 'src/components/input.style.js'
-import Text from 'src/components/text.style.js'
-import FunText from 'src/components/fun_text.style.js'
-import Link from 'src/components/link.style.js'
-import Icon from 'src/components/icon.style.js'
-import Border from 'src/components/border.style.js'
-import Post from 'src/components/post.style.js'
-import Notification from 'src/components/notification.style.js'
-import RichContent from 'src/components/rich_content.style.js'
-import Avatar from 'src/components/avatar.style.js'
-import Badge from 'src/components/badge.style.js'
-import Alert from 'src/components/alert.style.js'
-
 const DEBUG = false
 
+// Ensuring the order of components
 const components = {
-  Root,
-  Text,
-  FunText,
-  Link,
-  Icon,
-  Border,
-  Underlay,
-  Modals,
-  Popover,
-  MenuItem,
-  Panel,
-  PanelHeader,
-  TopBar,
-  Button,
-  ButtonUnstyled,
-  Input,
-  Post,
-  Notification,
-  RichContent,
-  Avatar,
-  Alert,
-  Badge
+  Root: null,
+  Text: null,
+  FunText: null,
+  Link: null,
+  Icon: null,
+  Border: null
 }
 
+// Loading all style.js[on] files dynamically
+const componentsContext = require.context('src', true, /\.style.js(on)?$/)
+componentsContext.keys().forEach(key => {
+  const component = componentsContext(key).default
+  components[component.name] = component
+})
+
 // "Unrolls" a tree structure of item: { parent: { ...item2, parent: { ...item3, parent: {...} } }}
 // into an array [item2, item3] for iterating
 const unroll = (item) => {
@@ -370,7 +339,11 @@ export const init = (extraRuleset, palette) => {
     // Normalizing states and variants to always include "normal"
     const states = { normal: '', ...originalStates }
     const variants = { normal: '', ...originalVariants }
-    const innerComponents = (validInnerComponents).map(name => components[name])
+    const innerComponents = (validInnerComponents).map(name => {
+      const result = components[name]
+      if (result === undefined) console.error(`Component ${component.name} references a component ${name} which does not exist!`)
+      return result
+    })
 
     // Optimization: we only really need combinations without "normal" because all states implicitly have it
     const permutationStateKeys = Object.keys(states).filter(s => s !== 'normal')
-- 
cgit v1.2.3-70-g09d2