willba-component-library 0.3.26 → 0.4.0

package/prettier.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  arrowParens: 'always',
-  semi: false,
-  singleQuote: true,
-  trailingComma: 'es5',
-}

package/rollup.config.mjs

@@ -1,63 +0,0 @@
-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')
-
-const globals = {
-  react: 'React',
-  'react-dom': 'ReactDOM',
-  'react-query': 'ReactQuery',
-}
-
-export default [
-  {
-    input: 'src/index.ts',
-    output: [
-      {
-        file: packageJson.main,
-        format: 'cjs',
-        sourcemap: true,
-      },
-      {
-        file: packageJson.module,
-        format: 'esm',
-        sourcemap: true,
-      },
-      {
-        name: 'WillbaComponentLibrary',
-        file: `lib/index.umd.js`,
-        format: 'umd',
-        sourcemap: true,
-        globals,
-      },
-    ],
-    plugins: [
-      peerDepsExternal(),
-      resolve(),
-      commonjs(),
-      typescript({
-        jsx: 'react',
-      }),
-      postcss({
-        extensions: ['.css'],
-      }),
-      json(),
-    ],
-  },
-  {
-    input: 'lib/index.d.ts',
-    output: [{ file: 'lib/index.d.ts', format: 'es' }],
-    plugins: [dts()],
-    external: [/\.css$/],
-  },
-]

package/src/assets/IconsSvg.tsx

@@ -1,69 +0,0 @@
-import React from 'react'
-
-type Icon = 'spinner' | 'warning'
-
-type Props = {
-  fill?: string
-  size?: number
-  icon: Icon
-}
-
-export const IconsSvg = ({ fill, size, icon }: Props) => {
-  switch (icon) {
-    case 'spinner':
-      return (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width={`${size || 25}`}
-          height={`${size || 25}`}
-          viewBox="0 0 24 24"
-        >
-          <style>
-            {`
-      .spinner_z9k8 {
-      transform-origin: center;
-      animation: spinner_StKS .75s infinite linear;
-      }
-      @keyframes spinner_StKS {
-      100% {
-      transform: rotate(360deg);
-      }
-      }
-      `}
-          </style>
-          <path
-            d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
-            opacity=".25"
-            fill={fill}
-          />
-          <path
-            d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"
-            className="spinner_z9k8"
-            fill={fill}
-          />
-        </svg>
-      )
-    case 'warning':
-      return (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width={`${size || 25}`}
-          height={`${size || 25}`}
-          className="svg-icon"
-          style={{
-            verticalAlign: 'middle',
-            fill: fill,
-            overflow: 'hidden',
-            minWidth: '25px',
-            minHeight: '25px',
-          }}
-          viewBox="0 0 1024 1024"
-          version="1.1"
-        >
-          <path d="M42.666667 896h938.666666L512 85.333333 42.666667 896z m512-128h-85.333334v-85.333333h85.333334v85.333333z m0-170.666667h-85.333334v-170.666666h85.333334v170.666666z" />
-        </svg>
-      )
-    default:
-      return null
-  }
-}

package/src/components/Button/Button.stories.tsx

@@ -1,34 +0,0 @@
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-import Button from './Button'
-
-// Default metadata of the story https://storybook.js.org/docs/react/api/csf#default-export
-const meta: Meta<typeof Button> = {
-  title: 'Components/Button',
-  component: Button,
-  argTypes: {
-    textColor: { control: 'color' },
-    onClick: { action: 'clicked' },
-  },
-}
-
-export default meta
-
-// The story type for the component https://storybook.js.org/docs/react/api/csf#named-story-exports
-type Story = StoryObj<typeof Button>
-
-export const Primary: Story = {
-  args: {
-    label: 'Primary 😃',
-    size: 'large',
-    type: 'primary',
-  },
-}
-
-export const Secondary: Story = {
-  args: {
-    ...Primary.args,
-    type: 'secondary',
-    label: 'Secondary 😇',
-  },
-}

package/src/components/Button/Button.tsx

@@ -1,56 +0,0 @@
-import React, { useState, MouseEvent } from 'react'
-import classNames from 'classnames'
-import './button.css'
-
-export interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
-  type?: 'primary' | 'secondary'
-  /**
-   * What background color to use
-   */
-  textColor?: string
-  /**
-   * How large should the button be?
-   */
-  size?: 'small' | 'medium' | 'large'
-  /**
-   * Button contents
-   */
-  label: string
-  /**
-   * Optional click handler
-   */
-  onClick?: (event: MouseEvent<HTMLButtonElement>) => void
-}
-
-/**
- * Primary UI component for user interaction
- */
-const Button = ({
-  type = 'primary',
-  textColor,
-  size = 'medium',
-  onClick,
-  label,
-}: ButtonProps) => {
-  const [theState, setTheState] = useState(4)
-
-  return (
-    <button
-      type="button"
-      className={classNames(
-        'storybook-button',
-        `storybook-button--${size}`,
-        `storybook-button--${type}`
-      )}
-      style={textColor ? { color: textColor } : {}}
-      onClick={onClick}
-    >
-      {`${label} ${theState}`}
-    </button>
-  )
-}
-
-export default Button

package/src/components/Button/button.css

@@ -1,30 +0,0 @@
-.storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 700;
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  line-height: 1;
-}
-.storybook-button--primary {
-  color: white;
-  background-color: #1ea7fd;
-}
-.storybook-button--secondary {
-  color: #333;
-  background-color: transparent;
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-}
-.storybook-button--small {
-  font-size: 12px;
-  padding: 10px 16px;
-}
-.storybook-button--medium {
-  font-size: 14px;
-  padding: 11px 20px;
-}
-.storybook-button--large {
-  font-size: 16px;
-  padding: 12px 24px;
-}

package/src/components/Button/index.ts

@@ -1 +0,0 @@
-export { default } from "./Button";

package/src/components/FilterBar/FilterBar.css

@@ -1,35 +0,0 @@
-.will-root {
-  z-index: 999;
-  width: fit-content;
-  min-width: 796px;
-  max-height: 100vh;
-  position: relative;
-}
-
-.will-root.is-full-width {
-  width: 100%;
-}
-
-.will-filter-bar {
-  box-sizing: border-box;
-  position: relative;
-}
-
-@media (max-width: 960px) {
-  .will-root {
-    width: 100%;
-    min-width: auto;
-  }
-}
-
-/* Common */
-
-.will-filter-bar-controls.dark,
-.will-filter-bar-panels.dark {
-  box-shadow: var(--will-box-shadow-dark);
-}
-
-.will-filter-bar-controls.light,
-.will-filter-bar-panels.light {
-  box-shadow: var(--will-box-shadow-light);
-}

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

@@ -1,116 +0,0 @@
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { FilterBar } from './FilterBar'
-import { Filters } from './FilterBarTypes'
-
-const meta: Meta<typeof FilterBar> = {
-  title: 'Components/FilterBar',
-  component: FilterBar,
-}
-
-export default meta
-
-type Story = StoryObj<typeof FilterBar>
-
-export const Main: Story = {
-  args: {
-    disableCalendarDates: {
-      disabledDatesByPage: [
-        {
-          page: '/rooms',
-          offset: 7,
-        },
-        {
-          page: '/events',
-          offset: -1,
-        },
-      ],
-    },
-    fullWidth: false,
-    language: 'en',
-    redirectUrl: 'http://localhost:4000/',
-    ageCategories: [
-      {
-        id: '1',
-        name: 'Alle 6 vuotiaat',
-        minVal: 0,
-        sortOrder: 1,
-      },
-      {
-        id: '2',
-        name: '6-16 vuotiaat',
-        minVal: 0,
-        sortOrder: 2,
-      },
-      {
-        id: '3',
-        name: 'Aikuiset',
-        minVal: 1,
-        sortOrder: 3,
-      },
-    ],
-    palette: {
-      primary: '',
-      secondary: '',
-      error: '#d32f2f',
-    },
-    mode: 'dark',
-    tabs: [
-      {
-        path: '/rooms',
-        label: 'Rooms',
-        default: true,
-        order: 2,
-      },
-      {
-        path: '/events',
-        label: 'Events',
-        default: false,
-        order: 1,
-      },
-    ],
-    outerLoading: false,
-    locations: {
-      multiSelect: false,
-      disabled: false,
-      data: [
-        {
-          id: 1,
-          label: 'Helsinki Center',
-          description: 'Main training facility in downtown',
-          imageUrl: '',
-        },
-        {
-          id: 2,
-          label: 'Espoo Campus',
-          description: 'Modern facilities with sea views',
-          imageUrl: null,
-        },
-        {
-          id: 3,
-          label: 'Tampere Resort',
-          description: 'Lakeside retreat with full amenities',
-          imageUrl: null,
-        },
-        {
-          id: 4,
-          label: 'Turku Harbor',
-          description: 'Modern facilities with sea views',
-          imageUrl: null,
-        },
-        {
-          id: 5,
-          label: 'Oulu North',
-          description: 'Northern location with winter activities',
-          imageUrl: null,
-        },
-      ],
-    },
-  },
-  render: (args) => (
-    <div style={{ background: 'white', height: '100vh' }}>
-      <FilterBar {...args} onSubmit={false ? null : (_val: Filters) => null} />
-    </div>
-  ),
-}

package/src/components/FilterBar/FilterBar.tsx

@@ -1,64 +0,0 @@
-import React from 'react'
-
-import { useTheme } from '../../themes/useTheme'
-import { useAwaitRender, useUpdateTranslations } from '../../core/hooks'
-
-import { FilterBarTypes } from './FilterBarTypes'
-import { FilterPanels, FilterControls, FilterTabs } from './components'
-import { FilterBarProvider } from './providers'
-
-import '../../themes/Default.css'
-import './FilterBar.css'
-
-export const FilterBar = ({
-  language,
-  ageCategories,
-  redirectUrl = REDIRECT_URL_FALLBACK,
-  palette,
-  onSubmit,
-  fullWidth,
-  disableCalendarDates,
-  mode,
-  tabs,
-  outerLoading,
-  locations,
-}: FilterBarTypes) => {
-  const themePalette = useTheme({ palette })
-
-  // Translations
-  useUpdateTranslations({ language })
-
-  // Display component after fully loaded
-  useAwaitRender()
-
-  return (
-    <FilterBarProvider
-      language={language}
-      ageCategories={ageCategories}
-      redirectUrl={redirectUrl}
-      palette={palette}
-      onSubmit={onSubmit}
-      fullWidth={fullWidth}
-      disableCalendarDates={disableCalendarDates}
-      mode={mode}
-      tabs={tabs}
-      outerLoading={outerLoading}
-      locations={locations}
-    >
-      <div
-        className={`will-root ${fullWidth ? 'is-full-width' : ''}`}
-        style={themePalette}
-      >
-        <FilterTabs />
-
-        <FilterControls />
-
-        <FilterPanels />
-      </div>
-    </FilterBarProvider>
-  )
-}
-
-////////////
-
-const REDIRECT_URL_FALLBACK = 'http://localhost:3000/'

package/src/components/FilterBar/FilterBarTypes.ts

@@ -1,71 +0,0 @@
-import { DisableCalendarDates } from '../../core/components/calendar/CalendarTypes'
-import { Palette } from '../../themes/useTheme'
-
-export type FilterBarTypes = {
-  language?: string
-  ageCategories?: AgeCategoryType[]
-  redirectUrl?: string
-  palette?: Palette
-  onSubmit?: ((val: Filters) => void) | null
-  fullWidth?: boolean
-  disableCalendarDates?: DisableCalendarDates
-  mode?: string
-  tabs?: Tab[]
-  outerLoading?: boolean
-  locations?: Locations
-}
-
-export type AgeCategoryCount = {
-  [categoryId: string]: number
-}
-
-export type AgeCategoryType = {
-  id: string
-  name: string
-  minVal: number
-  sortOrder: number
-}
-
-export type GuestsCountPropsType = {
-  label: string
-  id: string
-  updateGuestsCount: (arg1: string, arg2: number) => void
-  count: number
-  minVal: number
-  sortOrder: number
-}
-
-export enum FilterSections {
-  CALENDAR = 'calendar',
-  GUESTS = 'guests',
-  CATEGORIES = 'categories',
-  LOCATIONS = 'locations',
-}
-
-export type Filters = { [key: string]: string }
-
-export enum Pages {
-  ROOMS = '/rooms',
-  EVENTS = '/events',
-  SALES = '/sales',
-}
-
-export type Tab = {
-  path: string
-  default?: boolean
-  order: number
-  label?: string
-}
-
-export type Locations = {
-  multiSelect?: boolean
-  disabled?: boolean
-  data: Location[]
-}
-
-export type Location = {
-  id: number
-  label: string
-  description?: string | null
-  imageUrl?: string | null
-}

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

@@ -1,14 +0,0 @@
-.will-filter-bar-divider {
-  width: 1px;
-  margin: 0 10px;
-  background-color: var(--will-charcoal-blue);
-}
-
-@media (max-width: 960px) {
-  .will-filter-bar-divider {
-    width: auto;
-    margin: 0 10px;
-    height: 1px;
-    background-color: var(--will-charcoal-blue);
-  }
-}

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

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

package/src/components/FilterBar/components/FilterControls/FilterControls.css

@@ -1,22 +0,0 @@
-.will-filter-bar-controls {
-  display: flex;
-  justify-content: space-between;
-  padding: 10px;
-  position: relative;
-  z-index: 222;
-  border-radius: 40px;
-  background-color: var(--will-white);
-}
-
-@media (max-width: 960px) {
-  .will-filter-bar-controls {
-    flex-direction: column;
-    padding: 20px;
-    border-radius: 25px;
-    overflow: hidden;
-  }
-
-  .will-filter-bar-controls.disabled {
-    opacity: 0.1;
-  }
-}