WIP: ADD THEME PLUGIN

Signed-off-by: Joaquim Rocha <[email protected]>

frontend/src/components/App/Settings/Settings.tsx

@@ -10,7 +10,7 @@ import { ActionButton, NameValueTable, SectionBox } from '../../common';
 import TimezoneSelect from '../../common/TimezoneSelect';
 import { useSettings } from './hook';
 import NumRowsInput from './NumRowsInput';
-import ThemeChangeButton from './ThemeChangeButton';
+import ThemeSettings from './ThemeSettings';
 
 export default function Settings() {
   const { t } = useTranslation(['translation']);
@@ -53,10 +53,6 @@ export default function Settings() {
             name: t('translation|Language'),
             value: <LocaleSelect showFullNames formControlProps={{ className: '' }} />,
           },
-          {
-            name: t('translation|Theme'),
-            value: <ThemeChangeButton showBothIcons />,
-          },
           {
             name: t('translation|Number of rows for tables'),
             value: (
@@ -76,6 +72,10 @@ export default function Settings() {
               </Box>
             ),
           },
+          {
+            name: t('translation|Theme'),
+            value: <ThemeSettings />,
+          },
         ]}
       />
     </SectionBox>

plugins/examples/themes/.gitignore

@@ -0,0 +1,28 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# The output for npm run storybook-book, static html built storybook for the plugin
+storybook-static
+
+.eslintcache

plugins/examples/themes/.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  // See http://go.microsoft.com/fwlink/?LinkId=827846
+  // for the documentation about the extensions.json format
+  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
+}

plugins/examples/themes/.vscode/settings.json

@@ -0,0 +1,17 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

plugins/examples/themes/.vscode/tasks.json

@@ -0,0 +1,33 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "problemMatcher": ["$tsc-watch", "$eslint-compact"],
+      "isBackground": true,
+      "presentation": {
+        "reveal": "never"
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "problemMatcher": ["$tsc-watch", "$eslint-compact"],
+      "isBackground": true,
+      "presentation": {
+        "reveal": "always"
+      },
+      "group": {
+        "kind": "test",
+        "isDefault": true
+      }
+    }
+  ]
+}

plugins/examples/themes/README.md

@@ -0,0 +1,15 @@
+# themes
+
+This is the default template README for [Headlamp Plugins](https://github.com/headlamp-k8s/headlamp).
+
+- The description of your plugin should go here.
+- You should also edit the package.json file meta data (like name and description).
+
+## Developing Headlamp plugins
+
+For more information on developing Headlamp plugins, please refer to:
+
+- [Getting Started](https://headlamp.dev/docs/latest/development/plugins/), How to create a new Headlamp plugin.
+- [API Reference](https://headlamp.dev/docs/latest/development/api/), API documentation for what you can do
+- [UI Component Storybook](https://headlamp.dev/docs/latest/development/frontend/#storybook), pre-existing components you can use when creating your plugin.
+- [Plugin Examples](https://github.com/headlamp-k8s/headlamp/tree/main/plugins/examples), Example plugins you can look at to see how it's done.