willba-component-library 0.0.40 → 0.0.42

package/lib/themes/useTheme.d.ts

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

package/package.json

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

package/rollup.config.mjs

@@ -27,11 +27,13 @@ export default [
         file: packageJson.main,
         format: 'cjs',
         sourcemap: true,
+        inlineDynamicImports: true,
       },
       {
         file: packageJson.module,
         format: 'esm',
         sourcemap: true,
+        inlineDynamicImports: true,
       },
       {
         name: 'WillbaComponentLibrary',
@@ -39,6 +41,7 @@ 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) {
-  // useTheme({ vendor })
+  const cssLoaded = useTheme({ vendor })
 
   const [rerenderKey, setRerenderKey] = useState(0)
 
@@ -34,8 +34,6 @@ export default function FilterBar({ vendor, language }: FilterBarProps) {
 
   const { t } = useTranslation('filterBar')
 
-  console.log(language, t('calendar.startDate'))
-
   const {
     selectedFilter,
     guestsAdults,
@@ -51,7 +49,7 @@ export default function FilterBar({ vendor, language }: FilterBarProps) {
   } = useFilterBar()
 
   return (
-    <div className="filter-bar">
+    <div className={`filter-bar ${cssLoaded ? 'dynamic-theme-class' : ''}`}>
       <div className="filter-bar-header">
         <SelectButton
           label={t('calendar.startDate')}

package/src/themes/useTheme.tsx

@@ -1,32 +1,60 @@
-import { useEffect, useState } from 'react'
+// import React, { useEffect, useState } 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 useTheme({ vendor }: ThemeProps) {
-  const [cssModule, setCssModule] = useState<any>(null)
-
+export default function MyComponent({ vendor }: ThemeProps) {
   useEffect(() => {
-    async function importCss() {
-      if (vendor === 'Kisakallio') {
-        const kisakallioCss = await import('./Kisakallio.css')
-        setCssModule(kisakallioCss.default)
-      } else if (vendor === 'Pajulahti') {
-        const pajulahtiCss = await import('./Pajulahti.css')
-        setCssModule(pajulahtiCss.default)
-      } else {
-        return
-      }
-    }
-
-    importCss()
-
-    // Clear the CSS module when the 'vendor' changes
-    return () => {
-      setCssModule(null)
+    if (vendor === 'Kisakallio') {
+      addCSSFile('./Kisakallio.css')
+    } else {
+      addCSSFile('./Default.css')
     }
   }, [vendor])
 
-  return cssModule
+  // Rest of your component code
+  return <div>My Component</div>
+}
+
+const addCSSFile = (href: string) => {
+  const link = document.createElement('link')
+  link.rel = 'stylesheet'
+  link.type = 'text/css'
+  link.href = href
+  document.head.appendChild(link)
 }

package/src/themes/cssModules.d.ts

@@ -1,5 +0,0 @@
-// cssModules.d.ts
-declare module '*.css' {
-  const classes: { [key: string]: string }
-  export default classes
-}