willba-component-library 0.1.3 → 0.1.5

package/package.json

@@ -1,51 +1,51 @@
-{
-  "name": "willba-component-library",
-  "version": "0.1.3",
-  "description": "A stroybook 6 with TypeScript demo",
-  "main": "lib/index.js",
-  "module": "lib/index.esm.js",
-  "types": "lib/index.d.ts",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "build": "rollup -c"
-  },
-  "author": "Willba",
-  "license": "MIT",
-  "dependencies": {
-    "@rollup/plugin-json": "^6.0.0",
-    "classnames": "^2.3.2",
-    "react-day-picker": "^8.8.0",
-    "react-i18next": "^13.1.2",
-    "react-icons": "^4.10.1",
-    "react-responsive": "^9.0.2"
-  },
-  "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^25.0.3",
-    "@rollup/plugin-node-resolve": "^15.1.0",
-    "@rollup/plugin-typescript": "^11.1.2",
-    "@storybook/addon-essentials": "^7.2.1",
-    "@storybook/addon-interactions": "^7.2.1",
-    "@storybook/addon-links": "^7.2.1",
-    "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/blocks": "^7.2.1",
-    "@storybook/react": "^7.2.1",
-    "@storybook/react-vite": "^7.2.1",
-    "@storybook/testing-library": "^0.2.0",
-    "@types/react": "^18.2.19",
-    "postcss": "^8.4.27",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "rollup": "^3.28.0",
-    "rollup-plugin-dts": "^5.3.1",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^7.2.1",
-    "typescript": "^5.1.6"
-  }
-}
+{
+  "name": "willba-component-library",
+  "version": "0.1.5",
+  "description": "A stroybook 6 with TypeScript demo",
+  "main": "lib/index.js",
+  "module": "lib/index.esm.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "rollup -c"
+  },
+  "author": "Willba",
+  "license": "MIT",
+  "dependencies": {
+    "@rollup/plugin-json": "^6.0.0",
+    "classnames": "^2.3.2",
+    "react-day-picker": "^8.8.0",
+    "react-i18next": "^13.1.2",
+    "react-icons": "^4.10.1",
+    "react-responsive": "^9.0.2"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.3",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-typescript": "^11.1.2",
+    "@storybook/addon-essentials": "^7.2.1",
+    "@storybook/addon-interactions": "^7.2.1",
+    "@storybook/addon-links": "^7.2.1",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.2.1",
+    "@storybook/react": "^7.2.1",
+    "@storybook/react-vite": "^7.2.1",
+    "@storybook/testing-library": "^0.2.0",
+    "@types/react": "^18.2.19",
+    "postcss": "^8.4.27",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^3.28.0",
+    "rollup-plugin-dts": "^5.3.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "storybook": "^7.2.1",
+    "typescript": "^5.1.6"
+  }
+}

package/src/components/FilterBar/FilterBarTypes.ts

@@ -1,25 +1,25 @@
-export interface AgeCategoryCount {
-  [categoryId: string]: number
-}
-
-export interface AgeCategoryType {
-  id: string
-  name: string
-  minAge: number | null
-  maxAge: number | null
-  minVal: number
-}
-
-export interface GuestsPropsType {
-  ageCategories: AgeCategoryType[]
-  updateGuestsCount: (arg1: number, arg2: number) => void
-  ageCategoryCounts: AgeCategoryCount | {}
-}
-
-export interface GuestsCountPropsType {
-  label: string
-  id: number
-  updateGuestsCount: (arg1: number, arg2: number) => void
-  count: number
-  minVal: number
-}
+export interface AgeCategoryCount {
+  [categoryId: string]: number
+}
+
+export interface AgeCategoryType {
+  id: string
+  name: string
+  minAge: number | null
+  maxAge: number | null
+  minVal: number
+}
+
+export interface GuestsPropsType {
+  ageCategories: AgeCategoryType[]
+  updateGuestsCount: (arg1: number, arg2: number) => void
+  ageCategoryCounts: AgeCategoryCount | {}
+}
+
+export interface GuestsCountPropsType {
+  label: string
+  id: number
+  updateGuestsCount: (arg1: number, arg2: number) => void
+  count: number
+  minVal: number
+}

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

@@ -1,76 +1,76 @@
-/* .will-filter-bar-calendar {} */
-
-.will-calendar-filter-header {
-  padding: 15px 0;
-  border-bottom: 1px solid var(--will-grey);
-}
-
-.will-calendar-filter-title {
-  font-size: 16px;
-  text-transform: uppercase;
-  margin: 10px 0;
-  text-align: left;
-}
-
-.will-calendar-filter-container {
-  display: flex;
-  justify-content: center;
-  padding-top: 20px;
-}
-
-/* Calendar overrides */
-
-.will-calendar-filter-container .DayPicker {
-  font-size: 25px; /* Adjust this value to make the DayPicker bigger */
-}
-
-.will-calendar-filter-container .rdp-month {
-  position: relative;
-}
-
-.will-calendar-filter-container .rdp-month.rdp-caption_start {
-  padding-left: 70px;
-}
-
-.will-calendar-filter-container .rdp-month.rdp-caption_end {
-  padding-right: 70px;
-}
-
-.will-calendar-filter-container .rdp-month .rdp-nav {
-  border: 1px solid var(--will-primary);
-  border-radius: 50%;
-  left: 25;
-}
-
-.will-calendar-filter-container .rdp-month .rdp-nav svg {
-  color: var(--will-primary);
-}
-
-
-.will-calendar-filter-container .rdp-month .rdp-caption {
-  position: initial;
-}
-
-.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,
-.will-calendar-filter-container .rdp-table .rdp-head {
-  opacity: .6;
-}
-
-.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day {
-  opacity: 0.7;
-}
-
-.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {
-  background-color: var(--will-primary);
-  opacity: 1;
-}
-
-@media (max-width: 960px) {
-  .will-calendar-filter-container .rdp-month .rdp-nav {
-    border: none;
-    border-radius: initial;
-    
-  }
-}
-
-
+/* .will-filter-bar-calendar {} */
+
+.will-calendar-filter-header {
+  padding: 15px 0;
+  border-bottom: 1px solid var(--will-grey);
+}
+
+.will-calendar-filter-title {
+  font-size: 16px;
+  text-transform: uppercase;
+  margin: 10px 0;
+  text-align: left;
+}
+
+.will-calendar-filter-container {
+  display: flex;
+  justify-content: center;
+  padding-top: 20px;
+}
+
+/* Calendar overrides */
+
+.will-calendar-filter-container .DayPicker {
+  font-size: 25px; /* Adjust this value to make the DayPicker bigger */
+}
+
+.will-calendar-filter-container .rdp-month {
+  position: relative;
+}
+
+.will-calendar-filter-container .rdp-month.rdp-caption_start {
+  padding-left: 70px;
+}
+
+.will-calendar-filter-container .rdp-month.rdp-caption_end {
+  padding-right: 70px;
+}
+
+.will-calendar-filter-container .rdp-month .rdp-nav {
+  border: 1px solid var(--will-primary);
+  border-radius: 50%;
+  left: 25;
+}
+
+.will-calendar-filter-container .rdp-month .rdp-nav svg {
+  color: var(--will-primary);
+}
+
+
+.will-calendar-filter-container .rdp-month .rdp-caption {
+  position: initial;
+}
+
+.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,
+.will-calendar-filter-container .rdp-table .rdp-head {
+  opacity: .6;
+}
+
+.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day {
+  opacity: 0.7;
+}
+
+.will-calendar-filter-container .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {
+  background-color: var(--will-primary);
+  opacity: 1;
+}
+
+@media (max-width: 960px) {
+  .will-calendar-filter-container .rdp-month .rdp-nav {
+    border: none;
+    border-radius: initial;
+    
+  }
+}
+
+

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

@@ -1,54 +1,54 @@
-import React, { useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import { DateRange, DayPicker } from 'react-day-picker'
-import { addDays } from 'date-fns'
-import { useMediaQuery } from 'react-responsive'
-
-import 'react-day-picker/dist/style.css'
-import './Calendar.css'
-
-interface CalendarPropsType {
-  calendarRange: DateRange | undefined
-  setCalendarRange: (range: DateRange | undefined) => void
-}
-
-const currentMonth = new Date()
-
-export default function Calendar({
-  calendarRange,
-  setCalendarRange,
-}: CalendarPropsType) {
-  const { t } = useTranslation('filterBar')
-  const isTablet = useMediaQuery({ maxWidth: 960 })
-
-  const defaultCalendarSelected: DateRange = {
-    from: currentMonth,
-    to: addDays(currentMonth, 0),
-  }
-
-  useEffect(() => {
-    if (!calendarRange) setCalendarRange(defaultCalendarSelected)
-  }, [])
-
-  return (
-    <div className="will-filter-bar-calendar">
-      <div className="will-calendar-filter-header">
-        <h3 className="will-calendar-filter-title">{t('calendar.title')}</h3>
-      </div>
-      <div className="will-calendar-filter-container">
-        <DayPicker
-          id="will-calendar"
-          mode="range"
-          showOutsideDays
-          fixedWeeks
-          numberOfMonths={!isTablet ? 2 : 1}
-          weekStartsOn={1}
-          max={31}
-          defaultMonth={currentMonth}
-          selected={calendarRange}
-          onSelect={setCalendarRange}
-        />
-      </div>
-    </div>
-  )
-}
+import React, { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { DateRange, DayPicker } from 'react-day-picker'
+import { addDays } from 'date-fns'
+import { useMediaQuery } from 'react-responsive'
+
+import 'react-day-picker/dist/style.css'
+import './Calendar.css'
+
+interface CalendarPropsType {
+  calendarRange: DateRange | undefined
+  setCalendarRange: (range: DateRange | undefined) => void
+}
+
+const currentMonth = new Date()
+
+export default function Calendar({
+  calendarRange,
+  setCalendarRange,
+}: CalendarPropsType) {
+  const { t } = useTranslation('filterBar')
+  const isTablet = useMediaQuery({ maxWidth: 960 })
+
+  const defaultCalendarSelected: DateRange = {
+    from: currentMonth,
+    to: addDays(currentMonth, 0),
+  }
+
+  useEffect(() => {
+    if (!calendarRange) setCalendarRange(defaultCalendarSelected)
+  }, [])
+
+  return (
+    <div className="will-filter-bar-calendar">
+      <div className="will-calendar-filter-header">
+        <h3 className="will-calendar-filter-title">{t('calendar.title')}</h3>
+      </div>
+      <div className="will-calendar-filter-container">
+        <DayPicker
+          id="will-calendar"
+          mode="range"
+          showOutsideDays
+          fixedWeeks
+          numberOfMonths={!isTablet ? 2 : 1}
+          weekStartsOn={1}
+          max={31}
+          defaultMonth={currentMonth}
+          selected={calendarRange}
+          onSelect={setCalendarRange}
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -1,21 +1,21 @@
-.will-filter-bar-categories {
-  text-align: center;
-}
-
-.will-categories-filter-title {
-  font-size: 16px;
-  text-transform: uppercase;
-  margin: 10px 0 30px 0;
-}
-
-.will-categories-filter-inner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
-}
-
-.will-categories-filter-inner input {
-  cursor: pointer;
-  margin-right: 10px;
-}
+.will-filter-bar-categories {
+  text-align: center;
+}
+
+.will-categories-filter-title {
+  font-size: 16px;
+  text-transform: uppercase;
+  margin: 10px 0 30px 0;
+}
+
+.will-categories-filter-inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+}
+
+.will-categories-filter-inner input {
+  cursor: pointer;
+  margin-right: 10px;
+}

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

@@ -1,41 +1,41 @@
-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',
-    'Summer camp',
-    'Winter camp',
-  ]
-
-  const [selectedCategory, setSelectedCategory] = useState('')
-
-  const handleCategoryChange = (selectedCategory: any) => {
-    setSelectedCategory(selectedCategory)
-    setCategories(selectedCategory)
-  }
-
-  return (
-    <div className="will-filter-bar-categories">
-      <h3 className="will-categories-filter-title">{t('categories.label')}</h3>
-      <div className="will-categories-filter-inner">
-        {categoriesPlaceholder.map((itm, idx) => (
-          <div key={idx}>
-            <input
-              type="radio"
-              value={itm}
-              checked={selectedCategory === itm}
-              onChange={() => handleCategoryChange(itm)}
-            />
-            <span>{itm}</span>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
+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',
+    'Summer camp',
+    'Winter camp',
+  ]
+
+  const [selectedCategory, setSelectedCategory] = useState('')
+
+  const handleCategoryChange = (selectedCategory: any) => {
+    setSelectedCategory(selectedCategory)
+    setCategories(selectedCategory)
+  }
+
+  return (
+    <div className="will-filter-bar-categories">
+      <h3 className="will-categories-filter-title">{t('categories.label')}</h3>
+      <div className="will-categories-filter-inner">
+        {categoriesPlaceholder.map((itm, idx) => (
+          <div key={idx}>
+            <input
+              type="radio"
+              value={itm}
+              checked={selectedCategory === itm}
+              onChange={() => handleCategoryChange(itm)}
+            />
+            <span>{itm}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/components/FilterBar/components/close-button/CloseButton.css

@@ -1,26 +1,26 @@
-.will-filter-bar-close-button {
-  width: auto;
-  height: auto;
-  background-color: var(--will-grey);
-  color: var(--will-white);
-  padding: 2px 7px;
-  border-radius: 50%;
-  cursor: pointer;
-  border: none;
-  display: flex;
-  align-items: center;
-  font-size: 25px;
-  margin-left: 15px;
-  display: none;
-}
-
-@media (max-width: 960px) {
-  .will-filter-bar-close-button {
-    min-height: 35px;
-    border-radius: 25px;
-    margin-left:0;
-    margin-bottom: 25px;
-    display: flex;
-    justify-content: center;
-  }
-}
+.will-filter-bar-close-button {
+  width: auto;
+  height: auto;
+  background-color: var(--will-grey);
+  color: var(--will-white);
+  padding: 2px 7px;
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+  display: flex;
+  align-items: center;
+  font-size: 25px;
+  margin-left: 15px;
+  display: none;
+}
+
+@media (max-width: 960px) {
+  .will-filter-bar-close-button {
+    min-height: 35px;
+    border-radius: 25px;
+    margin-left:0;
+    margin-bottom: 25px;
+    display: flex;
+    justify-content: center;
+  }
+}

package/src/components/FilterBar/components/close-button/CloseButton.tsx

@@ -1,16 +1,16 @@
-import React from 'react'
-import { IoIosCloseCircleOutline } from 'react-icons/io'
-
-import './CloseButton.css'
-
-interface CloseButtonPropsType {
-  handleClose: () => void
-}
-
-export default function CloseButton({ handleClose }: CloseButtonPropsType) {
-  return (
-    <button className="will-filter-bar-close-button" onClick={handleClose}>
-      <IoIosCloseCircleOutline />
-    </button>
-  )
-}
+import React from 'react'
+import { IoIosCloseCircleOutline } from 'react-icons/io'
+
+import './CloseButton.css'
+
+interface CloseButtonPropsType {
+  handleClose: () => void
+}
+
+export default function CloseButton({ handleClose }: CloseButtonPropsType) {
+  return (
+    <button className="will-filter-bar-close-button" onClick={handleClose}>
+      <IoIosCloseCircleOutline />
+    </button>
+  )
+}

package/src/components/FilterBar/components/divider/Divider.css

@@ -1,15 +1,15 @@
-.will-filter-bar-divider {
-  width: 1px;
-  margin: 0 10px;
-  height: 35px;
-  background-color: #384265;
-}
-
-@media (max-width: 960px) {
-  .will-filter-bar-divider {
-    width: 100%;
-    margin: 0 10px;
-    height: 1px;
-    background-color: #384265;
-  }
+.will-filter-bar-divider {
+  width: 1px;
+  margin: 0 10px;
+  height: 35px;
+  background-color: #384265;
+}
+
+@media (max-width: 960px) {
+  .will-filter-bar-divider {
+    width: 100%;
+    margin: 0 10px;
+    height: 1px;
+    background-color: #384265;
+  }
 }

package/src/components/FilterBar/components/divider/Divider.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
-
-import './Divider.css'
-
-export default function Divider() {
-  return <div className="will-filter-bar-divider" />
-}
+import React from 'react'
+
+import './Divider.css'
+
+export default function Divider() {
+  return <div className="will-filter-bar-divider" />
+}