docs: add theming section

.storybook/global.css

@@ -1,22 +1,3 @@
-.sb-preparing-docs, .sb-nopreview {
-  @apply hidden
-}
-.sbdocs{
-  &.sbdocs-wrapper {
-    @apply pt-12
-  }
-
-  .hide-controls-column > div > table  {
-    & > thead > tr > th:last-child,
-    & > tbody > tr:not(:first-child) > td:last-child {
-      display: none !important;
-    }
-
-    & > thead > tr th:nth-child(1),
-    & > tbody > tr td:nth-child(1) {
-      width: 15%;
-    }
-
-  }
-
+input[placeholder="Choose color..."] + svg {
+  display: none;
 }

.storybook/main.ts

@@ -27,10 +27,6 @@ const config: StorybookConfig = {
   },
   async viteFinal(config, {configType}) {
     config.publicDir = false
-    config.plugins = config.plugins?.filter(s => {
-      return !['vite:lib-inject-css', 'vite:dts'].includes(s!["name"])
-    }) || []
-
     return config
   },
   framework: {

.storybook/preview.css

@@ -0,0 +1,22 @@
+.sb-preparing-docs, .sb-nopreview {
+  @apply hidden
+}
+.sbdocs{
+  &.sbdocs-wrapper {
+    @apply pt-12
+  }
+
+  .hide-controls-column > div > table  {
+    & > thead > tr > th:last-child,
+    & > tbody > tr:not(:first-child) > td:last-child {
+      display: none !important;
+    }
+
+    & > thead > tr th:nth-child(1),
+    & > tbody > tr td:nth-child(1) {
+      width: 15%;
+    }
+
+  }
+
+}

.storybook/preview.ts

@@ -1,5 +1,5 @@
 import type {Preview} from "@storybook/vue3";
-import './global.css'
+import './preview.css'
 
 const preview: Preview = {
   parameters: {

.storybook/theme.ts

@@ -1,5 +1,6 @@
 import { create } from '@storybook/theming/create';
 import logoFile from '../stories/public/plusauth-md-dark.svg';
+import './global.css'
 
 export default create({
   base: 'light',

package.json

@@ -88,7 +88,7 @@
     "storybook": "^8.0.0-beta.4",
     "super-tiny-icons": "^0.6.0",
     "tailwindcss": "^3.4.1",
-    "terser": "^5.27.2",
+    "terser": "^5.28.1",
     "ts-jest": "^29.1.2",
     "tslib": "^2.6.2",
     "typescript": "5.3.3",

stories/Theming/ThemeStory.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { AdditionalFields, IWidgetSettings } from '../../src/ui/interfaces';
+
+import WidgetWrapper from '../WidgetWrapper.vue';
+
+const props = defineProps<IWidgetSettings['theme']>()
+
+</script>
+
+<template>
+  <WidgetWrapper
+    :context="{
+      client: {
+        clientName: 'TestApp',
+        tosUri: 'https://sometosuri.com',
+        policyUri: 'https://somepolicyuri.com',
+        logoUri: 'https://static.plusauth.com/images/logo.png',
+        social: [
+          {name: 'google-connection', provider: 'google'},
+          {name: 'facebook-connection', provider: 'facebook'},
+        ]
+      },
+      settings: {
+        register_enabled: true,
+        forgot_password_enabled: true,
+        password_policy: {
+          min: 4,
+          max: 16,
+          lower_case: 4
+        }
+      },
+    } as any"
+    :settings="{
+      theme: props,
+      modeOptions: {
+        login: {
+          fields: {
+            password: {
+              order: 1,
+              errors: ['Password is required']
+            },
+            otpCode: {
+              order: 2,
+              type: 'code',
+              label: 'OTP'
+            },
+            accept: {
+              order: 3,
+              type: 'checkbox',
+              label: 'I accept terms and conditions'
+            }
+          }
+        }
+      }
+    }"
+  />
+</template>

stories/Theming/theming.stories.ts

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { CustomFields } from '../PageStories/Login/login.stories.ts';
+
+import ThemingStory from './ThemeStory.vue';
+
+type Story = StoryObj<typeof ThemingStory>;
+
+/**
+ *
+ */
+const meta: Meta<typeof ThemingStory> = {
+  component: ThemingStory,
+  title: 'theming',
+}
+
+export default meta
+
+
+/**
+ * You can provide custom fields for your view
+ */
+export const Colors: Story = {
+  args: {
+    primary: '#e37006',
+    secondary: '#424242',
+    accent: '#82B1FF',
+    error: '#FF5252',
+    info: '#2196F3',
+    success: '#4CAF50',
+    warning: '#FB8C00',
+  },
+  argTypes: [
+    'primary',
+    'secondary',
+    'accent',
+    'error',
+    'info',
+    'success',
+    'warning'
+  ].reduce((final, type, ) => {
+    final[type] = {
+      control: { type: 'color' }
+    }
+    return final
+  }, {})
+
+};