willba-component-library 0.0.35 → 0.0.37

package/lib/themes/useTheme.d.ts

@@ -0,0 +1,5 @@
+type ThemeProps = {
+    vendor?: string;
+};
+export default function useTheme({ vendor }: ThemeProps): any;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "description": "A stroybook 6 with TypeScript demo",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
@@ -16,7 +16,9 @@
   "dependencies": {
     "classnames": "^2.3.2",
     "date-fns": "^2.30.0",
-    "react-day-picker": "^8.8.0"
+    "i18next": "^23.4.4",
+    "react-day-picker": "^8.8.0",
+    "react-i18next": "^13.1.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -24,6 +26,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.3",
+    "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@rollup/plugin-typescript": "^11.1.2",
     "@storybook/addon-essentials": "^7.2.1",

package/rollup.config.mjs

@@ -1,41 +1,42 @@
-import peerDepsExternal from "rollup-plugin-peer-deps-external";
-import resolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
-import typescript from "@rollup/plugin-typescript";
-import postcss from "rollup-plugin-postcss";
-import dts from "rollup-plugin-dts";
+import peerDepsExternal from 'rollup-plugin-peer-deps-external'
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import typescript from '@rollup/plugin-typescript'
+import postcss from 'rollup-plugin-postcss'
+import dts from 'rollup-plugin-dts'
+import json from '@rollup/plugin-json'
 
 // This is required to read package.json file when
 // using Native ES modules in Node.js
 // https://rollupjs.org/command-line-interface/#importing-package-json
-import { createRequire } from "node:module";
-const requireFile = createRequire(import.meta.url);
-const packageJson = requireFile("./package.json");
+import { createRequire } from 'node:module'
+const requireFile = createRequire(import.meta.url)
+const packageJson = requireFile('./package.json')
 
 const globals = {
-  react: "React",
-  "react-dom": "ReactDOM",
-  "react-query": "ReactQuery",
-};
+  react: 'React',
+  'react-dom': 'ReactDOM',
+  'react-query': 'ReactQuery',
+}
 
 export default [
   {
-    input: "src/index.ts",
+    input: 'src/index.ts',
     output: [
       {
         file: packageJson.main,
-        format: "cjs",
+        format: 'cjs',
         sourcemap: true,
       },
       {
         file: packageJson.module,
-        format: "esm",
+        format: 'esm',
         sourcemap: true,
       },
       {
-        name: "WillbaComponentLibrary",
+        name: 'WillbaComponentLibrary',
         file: `lib/index.umd.js`,
-        format: "umd",
+        format: 'umd',
         sourcemap: true,
         globals,
       },
@@ -46,14 +47,15 @@ export default [
       commonjs(),
       typescript(),
       postcss({
-        extensions: [".css"],
+        extensions: ['.css'],
       }),
+      json(),
     ],
   },
   {
-    input: "lib/index.d.ts",
-    output: [{ file: "lib/index.d.ts", format: "es" }],
+    input: 'lib/index.d.ts',
+    output: [{ file: 'lib/index.d.ts', format: 'es' }],
     plugins: [dts()],
     external: [/\.css$/],
   },
-];
+]

package/src/components/FilterBar/FilterBar.css

@@ -27,11 +27,5 @@
   z-index: 111;
   border-radius: 40px;
   width: -webkit-fill-available;
-  box-shadow: 0px 6px 11px 0px #a7a4a480;
-}
-
-
-
-
-
-
+  box-shadow: var(--box-shadow);
+}

package/src/components/FilterBar/FilterBar.stories.tsx

@@ -1,20 +1,19 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import FilterBar from "./FilterBar";
+import type { Meta, StoryObj } from '@storybook/react'
+import FilterBar from './FilterBar'
 
 // Default metadata of the story https://storybook.js.org/docs/react/api/csf#default-export
 const meta: Meta<typeof FilterBar> = {
-  title: "Components/FilterBar",
+  title: 'Components/FilterBar',
   component: FilterBar,
-};
+}
 
-export default meta;
+export default meta
 
 // The story type for the component https://storybook.js.org/docs/react/api/csf#named-story-exports
-type Story = StoryObj<typeof FilterBar>;
+type Story = StoryObj<typeof FilterBar>
 
 export const Primary: Story = {
   args: {
-    label: "Primary 😃",
+    vendor: '',
   },
-};
+}

package/src/components/FilterBar/FilterBar.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 
 import Divider from './components/divider/Divider'
 import SelectButton from './components/select-button/SelectButton'
@@ -8,10 +9,20 @@ import Guests from './components/guests/Guests'
 import Categories from './components/categories/Categories'
 
 import useFilterBar from './hooks/useFilterBar'
+import useTheme from '../../themes/useTheme'
 
 import './FilterBar.css'
+import '../../themes/Default.css'
+import '../../i18n'
+
+type FilterBarProps = {
+  vendor?: string
+}
+
+export default function FilterBar({ vendor }: FilterBarProps) {
+  // useTheme({ vendor })
+  const { t } = useTranslation('filterBar')
 
-export default function FilterBar() {
   const {
     selectedFilter,
     guestsAdults,
@@ -30,19 +41,22 @@ export default function FilterBar() {
     <div className="filter-bar">
       <div className="filter-bar-header">
         <SelectButton
-          label={'Start date'}
+          label={t('calendar.startDate')}
           onClick={() => handleSelectedFilter(1)}
         />
         <Divider />
         <SelectButton
-          label={'End date'}
+          label={t('calendar.endDate')}
           onClick={() => handleSelectedFilter(2)}
         />
         <Divider />
-        <SelectButton label="Guests" onClick={() => handleSelectedFilter(3)} />
+        <SelectButton
+          label={t('guests.label')}
+          onClick={() => handleSelectedFilter(3)}
+        />
         <Divider />
         <SelectButton
-          label="Categories"
+          label={t('categories.label')}
           onClick={() => handleSelectedFilter(4)}
         />
         <SubmitButton onClick={handleSubmit} />

package/src/components/FilterBar/components/categories/Categories.tsx

@@ -1,7 +1,11 @@
 import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
 import './Categories.css'
 
 export default function Categories({ categories, setCategories }: any) {
+  const { t } = useTranslation('filterBar')
+
   const categoriesPlaceholder = [
     'Weekend',
     'Week',
@@ -18,7 +22,7 @@ export default function Categories({ categories, setCategories }: any) {
 
   return (
     <div className="filter-bar-categories">
-      <h3>CATEGORY</h3>
+      <h3>{t('categories.label')}</h3>
       <div className="categories-filter-inner">
         {categoriesPlaceholder.map((itm, idx) => (
           <div key={idx}>

package/src/components/FilterBar/components/guests/Guests.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 
 import './Guests.css'
 
@@ -10,14 +11,16 @@ export default function Guests({
   decrementKids,
   incrementKids,
 }: any) {
+  const { t } = useTranslation('filterBar')
+
   return (
     <div className="filter-bar-guests">
-      <h3>Guests</h3>
-      <p>Who's coming?</p>
+      <h3>{t('guests.title')}</h3>
+      <p>{t('guests.subtitle')}</p>
 
       <div className="guests-filter-container">
         <div className="guests-filter-inner">
-          <span>Adults</span>
+          <span>{t('guests.adultsLabel')}</span>
           <div>
             <button onClick={decrementAdults} disabled={guestsAdults < 1}>
               -
@@ -27,7 +30,7 @@ export default function Guests({
           </div>
         </div>
         <div className="guests-filter-inner">
-          <span>Kids</span>
+          <span>{t('guests.kidsLabel')}</span>
           <div>
             <button onClick={decrementKids} disabled={guestsKids < 1}>
               -

package/src/i18n.ts

@@ -0,0 +1,26 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+
+import enFilterBar from './locales/en/filterBar.json'
+import fiFilterBar from './locales/fi/filterBar.json'
+
+const urlParams = new URLSearchParams(window.location.search)
+const localeFromUrl = urlParams.get('locale') || 'fi'
+console.log(urlParams)
+
+const userPreferredLanguage = navigator.language
+console.log('User Preferred Language:', userPreferredLanguage)
+
+i18n.use(initReactI18next).init({
+  resources: {
+    en: { filterBar: enFilterBar },
+    fi: { filterBar: fiFilterBar },
+  },
+  lng: localeFromUrl,
+  fallbackLng: 'fi', // Fallback language
+  interpolation: {
+    escapeValue: false,
+  },
+})
+
+export default i18n

package/src/index.ts

@@ -1,4 +1,4 @@
-import Button from "./components/Button";
-import FilterBar from "./components/FilterBar";
+import Button from './components/Button'
+import FilterBar from './components/FilterBar'
 
-export { Button, FilterBar };
+export { Button, FilterBar }

package/src/locales/en/filterBar.json

@@ -0,0 +1,17 @@
+{
+  "calendar": {
+    "startDate": "Start date",
+    "endDate": "End date"
+  },
+  "guests": {
+    "label": "Guests",
+    "title": "Guests",
+    "subtitle": "Who's coming?",
+    "adultsLabel": "Adults",
+    "kidsLabel": "kids"
+  },
+  "categories": {
+    "label": "Categories",
+    "title": "Category"
+  }
+}

package/src/locales/fi/filterBar.json

@@ -0,0 +1,17 @@
+{
+  "calendar": {
+    "startDate": "Aloitus päivämäärä",
+    "endDate": "Päättymis päivämäärä"
+  },
+  "guests": {
+    "label": "Vieraat",
+    "title": "Vieraat",
+    "subtitle": "Kuka saapuu?",
+    "adultsLabel": "Aikuiset",
+    "kidsLabel": "lapset"
+  },
+  "categories": {
+    "label": "Kategoriat",
+    "title": "Kategoria"
+  }
+}

package/src/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/src/themes/Kisakallio.css

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

package/src/themes/Pajulahti.css

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

package/src/themes/cssModules.d.ts

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

package/src/themes/useTheme.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react'
+
+type ThemeProps = {
+  vendor?: string
+}
+
+export default function useTheme({ vendor }: ThemeProps) {
+  const [cssModule, setCssModule] = useState<any>(null)
+
+  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)
+    }
+  }, [vendor])
+
+  return cssModule
+}

package/tsconfig.json

@@ -16,7 +16,13 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react",
+
+    
+    "baseUrl": "./",
+    "paths": {
+      "src/*": ["src/*"]
+    }
   },
   "include": ["src"],
   "exclude": ["node_modules", "lib"]

package/lib/components/FilterBar/components/Callendar.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export default function Calendar(): React.JSX.Element;

package/lib/components/FilterBar/components/Divider.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export default function Divider(): React.JSX.Element;

package/lib/components/FilterBar/components/SelectButton.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export default function SelectButton({ label, onClick }: any): React.JSX.Element;

package/lib/components/FilterBar/components/SubmitButton.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export default function SubmitButton({ onClick }: any): React.JSX.Element;