willba-component-library 0.0.42 → 0.0.44

package/lib/themes/Default.css

@@ -0,0 +1,13 @@
+:root {
+  --primary-color: #3498db;
+  --font-size: 16px;
+  --box-shadow: 0px 6px 11px 0px #a7a4a480
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  background-color: aqua;
+}

package/lib/themes/Kisakallio.css

@@ -0,0 +1,3 @@
+html {
+  background-color: blue;
+}

package/lib/themes/Pajulahti.css

@@ -0,0 +1,3 @@
+html {
+  background-color: red;
+}

package/lib/themes/useTheme.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 type ThemeProps = {
     vendor?: string;
 };
-export default function MyComponent({ vendor }: ThemeProps): React.JSX.Element;
+export default function useTheme({ vendor }: ThemeProps): void;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.0.42",
+  "version": "0.0.44",
   "description": "A stroybook 6 with TypeScript demo",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",

package/rollup.config.mjs

@@ -41,7 +41,6 @@ export default [
         format: 'umd',
         sourcemap: true,
         globals,
-        inlineDynamicImports: true,
       },
     ],
     plugins: [

package/src/components/FilterBar/FilterBar.tsx

@@ -21,7 +21,7 @@ type FilterBarProps = {
 }
 
 export default function FilterBar({ vendor, language }: FilterBarProps) {
-  const cssLoaded = useTheme({ vendor })
+  useTheme({ vendor })
 
   const [rerenderKey, setRerenderKey] = useState(0)
 
@@ -49,7 +49,7 @@ export default function FilterBar({ vendor, language }: FilterBarProps) {
   } = useFilterBar()
 
   return (
-    <div className={`filter-bar ${cssLoaded ? 'dynamic-theme-class' : ''}`}>
+    <div className={`filter-bar `}>
       <div className="filter-bar-header">
         <SelectButton
           label={t('calendar.startDate')}

package/src/themes/useTheme.tsx

@@ -1,54 +1,27 @@
-// import React, { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 
-// type ThemeProps = {
-//   vendor?: string
-// }
-
-// export default function useTheme({ vendor }: ThemeProps) {
-//   const [cssLoaded, setCssLoaded] = useState(false)
-
-//   useEffect(() => {
-//     async function loadThemeCSS() {
-//       try {
-//         let cssUrl = ''
-
-//         if (vendor === 'Kisakallio') {
-//           cssUrl = './Kisakallio.css'
-//         } else if (vendor === 'Pajulahti') {
-//           cssUrl = './Pajulahti.css'
-//         } else {
-//           cssUrl = './Default.css'
-//         }
-
-//         await loadCSS(cssUrl)
-//         setCssLoaded(true)
-//       } catch (error) {
-//         console.error('Error loading CSS:', error)
-//       }
-//     }
-
-//     loadThemeCSS()
-//   }, [vendor])
-
-//   return cssLoaded
-// }
-
-import React, { useEffect } from 'react'
 type ThemeProps = {
   vendor?: string
 }
 
-export default function MyComponent({ vendor }: ThemeProps) {
+export default function useTheme({ vendor }: ThemeProps) {
   useEffect(() => {
     if (vendor === 'Kisakallio') {
-      addCSSFile('./Kisakallio.css')
+      addCSSFile(
+        'https://cdn.jsdelivr.net/npm/willba-component-library@0.0.43/lib/themes/Kisakallio.css'
+      )
+    } else if (vendor === 'Pajulahti') {
+      addCSSFile(
+        'https://cdn.jsdelivr.net/npm/willba-component-library@0.0.43/lib/themes/Pajulahti.css'
+      )
     } else {
-      addCSSFile('./Default.css')
+      addCSSFile(
+        'https://cdn.jsdelivr.net/npm/willba-component-library@0.0.43/lib/themes/Default.css'
+      )
     }
   }, [vendor])
 
-  // Rest of your component code
-  return <div>My Component</div>
+  return
 }
 
 const addCSSFile = (href: string) => {