willba-component-library 0.0.33 → 0.0.36

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.33",
+  "version": "0.0.36",
   "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, { useState } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
 
 import Divider from './components/divider/Divider'
 import SelectButton from './components/select-button/SelectButton'
@@ -8,16 +9,27 @@ 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,
     guestsKids,
     categories,
-    setSelectedFilter,
+    calendarRange,
+    setCalendarRange,
     setGuestsAdults,
     setGuestsKids,
     setCategories,
@@ -29,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} />
@@ -49,8 +64,12 @@ export default function FilterBar() {
 
       {selectedFilter && (
         <div className="filter-bar-container">
-          {selectedFilter === 1 && <Calendar />}
-          {selectedFilter === 2 && <Calendar />}
+          {(selectedFilter === 1 || selectedFilter === 2) && (
+            <Calendar
+              calendarRange={calendarRange}
+              setCalendarRange={setCalendarRange}
+            />
+          )}
           {selectedFilter === 3 && (
             <Guests
               guestsAdults={guestsAdults}

package/src/components/FilterBar/components/calendar/Calendar.css

@@ -0,0 +1,4 @@
+.filter-bar-calendar {
+  display: flex;
+  justify-content: center;
+}

package/src/components/FilterBar/components/calendar/Calendar.tsx

@@ -1,41 +1,33 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from 'react'
 
-import { addDays, format } from "date-fns";
-import { DateRange, DayPicker } from "react-day-picker";
+import { addDays } from 'date-fns'
+import { DateRange, DayPicker } from 'react-day-picker'
 
-import "react-day-picker/dist/style.css";
+import 'react-day-picker/dist/style.css'
+import './Calendar.css'
 
-const pastMonth = new Date(2020, 10, 15);
+const currentMonth = new Date()
 
-export default function Calendar() {
-  const defaultSelected: DateRange = {
-    from: pastMonth,
-    to: addDays(pastMonth, 4),
-  };
-  const [range, setRange] = useState<DateRange | undefined>(defaultSelected);
-
-  let footer = <p>Please pick the first day.</p>;
-  if (range?.from) {
-    if (!range.to) {
-      footer = <p>{format(range.from, "PPP")}</p>;
-    } else if (range.to) {
-      footer = (
-        <p>
-          {format(range.from, "PPP")}–{format(range.to, "PPP")}
-        </p>
-      );
-    }
+export default function Calendar({ calendarRange, setCalendarRange }: any) {
+  const defaultCalendarSelected: DateRange = {
+    from: currentMonth,
+    to: addDays(currentMonth, 0),
   }
 
+  useEffect(() => {
+    if (!calendarRange) setCalendarRange(defaultCalendarSelected)
+  }, [])
+
   return (
-    <DayPicker
-      id="test"
-      mode="range"
-      numberOfMonths={2}
-      defaultMonth={pastMonth}
-      selected={range}
-      footer={footer}
-      onSelect={setRange}
-    />
-  );
+    <div className="filter-bar-calendar">
+      <DayPicker
+        id="test"
+        mode="range"
+        numberOfMonths={2}
+        defaultMonth={currentMonth}
+        selected={calendarRange}
+        onSelect={setCalendarRange}
+      />
+    </div>
+  )
 }

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="search-widget-guests">
-      <h3>Guests</h3>
-      <p>Who's coming?</p>
+    <div className="filter-bar-guests">
+      <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/components/FilterBar/hooks/useFilterBar.tsx

@@ -1,9 +1,10 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
+import { DateRange } from 'react-day-picker'
+import { addDays, format } from 'date-fns'
 
 export default function useFilterBar() {
   const [selectedFilter, setSelectedFilter] = useState<number | boolean>(false)
-  // const [startDate, setStartDate] = useState(0);
-  // const [endDate, setEndDate] = useState(0);
+  const [calendarRange, setCalendarRange] = useState<DateRange>()
   const [guestsAdults, setGuestsAdults] = useState(1)
   const [guestsKids, setGuestsKids] = useState(0)
   const [categories, setCategories] = useState(0)
@@ -16,8 +17,10 @@ export default function useFilterBar() {
     const queryParams = new URLSearchParams()
 
     const params = {
-      // startDate,
-      // endDate,
+      startDate: calendarRange?.from
+        ? format(calendarRange.from, 'yyyy-MM-dd')
+        : '',
+      endDate: calendarRange?.to ? format(calendarRange.to, 'yyyy-MM-dd') : '',
       guestsAdults,
       guestsKids,
       categories,
@@ -39,6 +42,8 @@ export default function useFilterBar() {
     guestsAdults,
     guestsKids,
     categories,
+    calendarRange,
+    setCalendarRange,
     setSelectedFilter,
     setGuestsAdults,
     setGuestsKids,

package/src/i18n.ts

@@ -0,0 +1,22 @@
+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)
+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;