npm - @timum/booking - Versions diffs - 0.4.2 → 0.6.0 - Mend

@timum/booking 0.4.2 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/build/timum-booking.mjs +52637 -230
package/build/timum-booking.umd.js +1199 -0
package/examples/callbacks.htm +1 -1
package/examples/fields.htm +1 -1
package/examples/fullExample.htm +5 -1
package/examples/group-bookings.htm +1 -1
package/examples/list-view.htm +2 -2
package/examples/local-language.htm +1 -1
package/examples/local-preset.htm +1 -1
package/examples/local-strings.htm +1 -1
package/examples/multiple.htm +1 -1
package/examples/selectable-product.htm +1 -1
package/examples/usingChannelId.htm +1 -1
package/examples/usingChannelKeyAndResourceRef.htm +1 -1
package/examples/usingFullCalendar.htm +1 -1
package/index.html +568 -0
package/package.json +16 -24
package/vite.config.js +29 -0
package/build/asset-manifest.json +0 -10
package/build/index.html +0 -1
package/build/timum-booking.js +0 -3
package/build/timum-booking.js.LICENSE.txt +0 -110
package/build/timum-booking.js.map +0 -1
package/build/timum-booking.mjs.map +0 -1
package/build.js +0 -22
package/public/index.html +0 -59
package/rollup.config.js +0 -44

package/index.html ADDED Viewed

@@ -0,0 +1,568 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=1080, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=0.6" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" />
+  <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png" />
+  <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
+  <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png" />
+  <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
+  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" />
+  <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
+  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png" />
+  <link rel="icon" href="/favicon.ico" />
+  <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
+  <link rel="icon" type="image/png" href="/favicon-194x194.png" sizes="194x194" />
+  <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
+  <link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192" />
+  <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
+  <meta name="msapplication-TileColor" content="#2b5797" />
+  <meta name="msapplication-TileImage" content="/mstile-144x144.png" />
+  <meta name="theme-color" content="#ffffff" />
+  <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+  <link rel="manifest" href="/manifest.json" />
+  <title>timum booking</title>
+</head>
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="bookingjs" style="margin: 15px;"></div>
+  <script type="module" src="./src/index.jsx"></script>
+  <script type="text/javascript">
+    init(
+      {
+        // Reference of the resource to show the appointments of
+        // This is the only prop that is mandatory. Everything else is optional.
+        // Can also be a url parameter.
+        ref: "booking-widget-demo-resource@timum",
+        // height of timum in your page. 500px is standard.
+        height: '500px',
+        // timum has, as of now, 4 different channels through which you can share your resource's appointments.
+        // You can find them in the timum frontend under <resource name> -> Calendar Sharing (Terminbuchung freigeben)
+        // Every channel has its own settings allowing you to control whom of your customers can see certain appointments,
+        // whether they book directly or create an request first and other settings.
+        // Valid values for this attribute are:
+        // * RESOURCE_PUBLIC -> referring to "Public Booking Link" (Öffentlicher Buchungs-Link)
+        // * RESOURCE_EXCLUSIVE -> referring to "Exclusive Booking Access" (Exklusiver Buchungs-Zugang)
+        // * RESOURCE_REFERENCE -> referring to "Embedded booking calendars" (Eingebettete Buchungskalender)
+        // * CALENDAR_PUBLIC -> referring to "In all Website Plugin Views and your General Calendar" (In Website-Plugin Ansichten sowie Ihrem Gesamtkalender)
+        // RESOURCE_PUBLIC is the default, used if you specify nothing else.
+        // Can also be a url parameter.
+        channelKey: 'RESOURCE_PUBLIC',
+        // either fullCalendar or pureListView or detailsListView
+        calendarFrontend: 'detailsListView',
+        // The localisation to use. If not specified the browser language is used.
+        // Can also be a url parameter.
+        culture: "de",
+        // Data indentifying the customer, so that they don't have to input their data again.
+        // Works in conjunction with timum and select, supported plaforms like OnOffice, Immosolve etc.
+        // Can also be a url parameter. -> the params are named differently though: pDataPlatform, pDataId
+        pData: {
+          platform: 'timum',
+          personId: 'some-id'
+        },
+        // here are various callbacks which allow you to run custom code
+        // here is the reference for the RTKQ portions: https://redux-toolkit.js.org/rtk-query/usage-with-typescript#type-safe-error-handling
+        callbacks: {
+          // makeup of timeslot:
+          /*
+          {
+              "start": luxon Datetime object. Internal state. "2023-01-27T09:05:00.000Z",
+              "end": luxon Datetime object. Internal state. "2023-01-27T09:35:00.000Z",
+              "timeslot_uuid": uuid of the booked timeslot. e.g. "82ec5220-9d55-11ed-8617-e4a7a0ca32e8",
+              "product_uuid": uuid of the booked product e.g. "92867f70-4836-11e5-bc04-021a52c25043",
+              "product_name": string. e.g. "Meeting",
+              "resource_name": string. e.g. "Booking Widget DEMO",
+              "capacity": number e.g. 1,
+              "capacity_left": number e.g. 1,
+              "kind": either "models.Bookable" or "models.LotAppointment",
+              "untouchedStart": ISO String e.g: "2023-01-27T09:05:00+01:00" as the server sent it,
+              "untouchedEnd": ISO String e.g: "2023-01-27T09:35:00+01:00" as the server sent it
+          }
+          */
+          // makeup of data. Contains properties named after the 'fields' property placed right after 'callbacks'.
+          // e.g if you defined field.creditCard : {title: ..., <...>} then it's input value is stored under "creditCard".
+          // the fields you see here are hose present if you use timum's standard configuration.
+          //
+          // --> this allows you to evaluate the input data of your custom fields in these callbacks and act accordingly.
+          /*
+              {
+                  "firstName": "Sebastian",
+                  "lastName": "Müller",
+                  "email": "sebastian@timum.de",
+                  "agbs": true
+              }
+          */
+          createBookingStarted: ({ timeslot, data }) => { },
+          createBookingSuccessful: ({ timeslot, response /* an RTKQ response object */, data }) => { },
+          createBookingFailed: ({ timeslot, response/* an RTKQ response object */, data }) => { },
+          cancelationgStarted: ({ timeslot, response /* an RTKQ response object */ }) => { },
+          cancelationSuccessful: ({ timeslot, response /* an RTKQ response object */ }) => { },
+          cancelationFailed: ({ timeslot, response /* an RTKQ response object */ }) => { },
+          // these are requests collecting the necessary information to
+          // display the booking frontend
+          fetchingPublicDataSucceeded: (publicData) => { },
+          fetchingProductsSucceeded: (products) => { },
+          fetchingBookablesSucceeded: (bookables) => { },
+          fetchingPublicDataFailed: (error /* an RTKQ error object */) => { },
+          fetchingProductsFailed: (error /* an RTKQ error object */) => { },
+          fetchingBookablesFailed: (error /* an RTKQ error object */) => { },
+        },
+        // The standard fields displayed for unknown customers.
+        // You can customise what information is demanded of your customers prior to booking.
+        // timum only ever needs firstName, lastName, email and agbs to function (meaning you can savely remove fields 'mobile' and 'message').
+        // But you can also add fields of your own.
+        //
+        // See 'callbacks' to see how you can process input data of your custom fields.
+        /*
+            How to do custom fields
+            Anatomy of a field
+            <fieldName> : {
+                title: string or JSXElement;
+                validation: yup based validation. See https://github.com/jquense/yup. Re-exported and accessible via timum.yup
+                type: string; either 'text' (default), 'phoneNumber', 'textarea', 'checkbox' or 'select',
+                prefilled: string; value a fiels is initiated with. Not that for fields of type 'select' you must use the 'key' of on of it's options.
+            }
+            Depending on the type there are additional properties you can/must specify:
+            Type 'text':
+             -> format: string; the native input fields 'type' (... don't judge ^^). Can be 'email', 'number' etc.
+            Type 'phoneNumber':
+             -> does NOT support 'validation'. Phone number validation is hard. So timum does it for you.
+                This does mean that field validaion localisation is currently not supported for fields of this type.
+                This will  be fixed in a future update.
+             -> isRequired: boolean; if true, this field must be filled with a valid number
+            Type 'textArea':
+             -> limit: number; sets the maximum number of characters customers may enter.
+            Type 'checkbox':
+             -> no special properties here
+            Type 'select':
+             -> options: array of objects. Structure { title: string, key: string };
+                         'title' is displayed. 'key' is what you get in the 'data' object passed into callbacks.
+        */
+        fields: {
+          firstName: {
+            title: 'fields.firstName',
+            validation: timum.yup.string().required('validation.field_required'), // <- compare with key in 'localisation'
+          },
+          lastName: {
+            title: 'fields.lastName',
+            validation: timum.yup.string().required('validation.field_required'),
+          },
+          email: {
+            title: 'fields.email',
+            format: 'email',
+            type: 'text',
+            validation: timum.yup
+              .string()
+              .email('validation.email_field_must_be_valid')
+              .required('validation.field_required'),
+          },
+          mobile: {
+            title: 'fields.mobile',
+            type: 'phoneNumber',
+            isRequired: false,
+            // validation: is in built and ignored
+          },
+          message: {
+            title: 'fields.message',
+            type: 'textarea',
+            validation: timum.yup.string().max(1024),
+            limit: 1024,
+          },
+          agbs: {
+            title: 'fields.accept_timum_privacy',
+            type: 'checkbox',
+            validation: timum.yup
+              .boolean()
+              .required('validation.field_required')
+              .test(
+                'privacyAccepted',
+                'validation.privacy_field_required',
+                (value) => value === true
+              ),
+          },
+        },
+        // Here are all localization variables and their standard texts.
+        // You may change the texts as you see fit.
+        // timum supports de and en out of the box.
+        // You can easily expand this with fr or it (or any other language)
+        // by adding it to the localization object below and translating all of the variables.
+        localization: {
+          de: {
+            product_selection_headline: 'Terminart wählen',
+            booked_successfully_header: 'Termin gebucht',
+            booked_successfully_message:
+              'Sie erhalten eine E-Mail mit den Termindetails an {{mail}}',
+            requested_successfully_header: 'Termin angefragt',
+            requested_successfully_message:
+              'Sie erhalten eine E-Mail mit den Termindetails an {{mail}}. Sie werden unter der gleichen Adresse benachrichtigt, sobald Ihre Anfrage bearbeitet wurde.',
+            submit_button_book: 'Buchen',
+            submit_button_request: 'Verbindlich Anfragen',
+            noEventsMessage:
+              'Zur Zeit sind leider keine buchbaren Termine verfügbar.',
+            appoinment_at_capacity: 'vollständig ausgebucht',
+            add_to_calendar_btn: 'Zu Kalender hinzufügen',
+            until_reservation_expiration:
+              '{{expiration}} bis zum Ablauf der Reservierung',
+            reservation_expired: 'Reservierung abgelaufen.',
+            identified_customer_hint:
+              'Sie wurden mit persönlichem Link eingeladen und können direkt Ihren Termin buchen.',
+            cancellation: {
+              cancelation_successfull_message: 'Termin erfolgreich abgesagt',
+              cancellable_appointment_highlight: 'Mein Termin',
+              submit_button_cancel: 'Absagen',
+              cancel_appointment_header: 'Ihr Termin',
+              message_label: 'Nachricht zur Terminabsage',
+            },
+            // if you have additional fields with their own validation texts you can add
+            // translation keys here and reference them in your custom fields validation.
+            // e.g. If you were to add the key 'valid_credit_card' here, you could reference it in your credit card field with 'validation.valid_credit_card'.
+            validation: {
+              field_required: 'Notwendig',
+              privacy_field_required:
+                'Sie müssen die Datenschutzbestimmungen akzeptieren bevor Sie buchen können.',
+              email_field_must_be_valid: 'Geben Sie eine valide E-Mail Adresse ein',
+            },
+            // Similarly to additional validation texts for your custom fields above,
+            // Similarly to additional validation texts for your custom fields above,
+            // Similarly to additional validation texts for your custom fields above,
+            // you can also add custom labels for them.
+            // you can also add custom labels for them.
+            // you can also add custom labels for them.
+            // e.g. add creditCard here and reference it in your custom field's 'title' with 'fields.creditCard'
+            fields: {
+              firstName: 'Vorname',
+              lastName: 'Nachname',
+              name: 'Name',
+              email: 'E-Mail',
+              mobile: 'Mobil',
+              message: 'Ihre Nachricht',
+              accept_timum_privacy:
+                'Datenschutzbestimmungen gelesen und akzeptiert',
+            },
+          },
+          // the same for english.
+          en: {
+            product_selection_headline: 'Choose Product',
+            booked_successfully_header: 'Appoinment Booked',
+            booked_successfully_message:
+              'You will receive an email with appointment details to {{mail}}',
+            requested_successfully_header: 'Appointment Requested',
+            requested_successfully_message:
+              'You will receive an email with appointment details to {{mail}}. You will be notified at the same address once your request has been processed.',
+            submit_button_book: 'Book',
+            submit_button_request: 'Request',
+            noEventsMessage:
+              'Unfortunately, there are no bookable dates available at the moment.',
+            appoinment_at_capacity: 'fully booked',
+            add_to_calendar_btn: 'Add to Calendar',
+            until_reservation_expiration:
+              '{{expiration}} until reservation expiration.',
+            reservation_expired: 'Reservation expired.',
+            identified_customer_hint:
+              'You have been invited with a personal link and can book your appointment directly.',
+            cancellation: {
+              cancelation_successfull_message: 'Appointment canceled sucessfully.',
+              cancellable_appointment_highlight: 'My Appointment',
+              submit_button_cancel: 'Cancel',
+              cancel_appointment_header: 'Your Appointment',
+              message_label: 'You may enter a reason here.',
+            },
+            validation: {
+              field_required: 'Required',
+              privacy_field_required:
+                'You must accept the privacy policy prior to booking.',
+              email_field_must_be_valid: 'Enter a valid email address',
+            },
+            fields: {
+              firstName: 'First name',
+              lastName: 'Last name',
+              name: 'name',
+              email: 'E-mail',
+              mobile: 'Mobile',
+              message: 'Your Message',
+              accept_timum_privacy: '<0>Privacy policy</0> read and accepted.',
+            },
+          },
+        },
+      },
+      {
+        // This is a mui theme object. Documentation: https://mui.com/material-ui/customization/default-theme/
+        // If you are in a professional plan you can customise the look and feel of timum booking to your hearts content.
+        // otherwise timum's standard theme is used.
+        // Here is an example which alters some aspects of the standard timum theme.
+        // (Based on https://github.com/app-generator/react-berry-dashboard)
+        palette: {
+          common: {
+            black: '#000000'
+          },
+          primary: {
+            light: '#b39ddb',
+            main: '#5e35b1',
+          },
+          secondary: {
+            light: '#ede7f6',
+            main: '#673ab7',
+            dark: '#5e35b1'
+          },
+          error: {
+            main: '#f44336',
+          },
+          warning: {
+            main: '#ffe57f',
+          },
+          success: {
+            main: '#00e676',
+          },
+          grey: {
+            50: '#fafafa',
+            100: '#f5f5f5',
+            500: '#9e9e9e',
+            600: '#757575',
+            700: '#616161',
+            900: '#212121'
+          },
+          text: {
+            primary: '#616161',
+            secondary: '#9e9e9e',
+            dark: '#212121',
+            hint: '#f5f5f5'
+          },
+        },
+        typography: {
+          fontFamily: "'Inter', sans-serif",
+          fontSize: "16px",
+          h6: {
+            fontWeight: 500,
+            color: '#757575',
+            fontSize: '0.75rem'
+          },
+          h5: {
+            fontSize: '0.875rem',
+            color: '#757575',
+            fontWeight: 500
+          },
+          h4: {
+            fontSize: '1rem',
+            color: '#757575',
+            fontWeight: 600
+          },
+          h3: {
+            fontSize: '1.25rem',
+            color: '#757575',
+            fontWeight: 600
+          },
+          h2: {
+            fontSize: '1.5rem',
+            color: '#757575',
+            fontWeight: 700
+          },
+          h1: {
+            fontSize: '2.125rem',
+            color: '#757575',
+            fontWeight: 700
+          },
+          subtitle1: {
+            fontSize: '0.875rem',
+            fontWeight: 500,
+            color: '#212121'
+          },
+          subtitle2: {
+            fontSize: '0.75rem',
+            fontWeight: 400,
+            color: '#9e9e9e'
+          },
+          caption: {
+            fontSize: '0.75rem',
+            color: '#9e9e9e',
+            fontWeight: 400
+          },
+          body1: {
+            fontSize: '0.875rem',
+            fontWeight: 400,
+            lineHeight: '1.334'
+          },
+          body2: {
+            fontSize: '0.800rem',
+            letterSpacing: '0em',
+            fontWeight: 400,
+            lineHeight: '1.5',
+            color: '#616161'
+          },
+        },
+        components: {
+          MuiButton: {
+            styleOverrides: {
+              root: {
+                fontWeight: 500,
+                textTransform: 'capitalize',
+                borderRadius: '16px'
+              }
+            }
+          },
+          MuiPaper: {
+            defaultProps: {
+              elevation: 0
+            },
+            styleOverrides: {
+              root: {
+                backgroundImage: 'none'
+              },
+              rounded: {
+                borderRadius: '16px'
+              }
+            }
+          },
+          MuiCardContent: {
+            styleOverrides: {
+              root: {
+                padding: '12px'
+              }
+            }
+          },
+          MuiCardActions: {
+            styleOverrides: {
+              root: {
+                padding: '12px'
+              }
+            }
+          },
+          MuiListItem: {
+            styleOverrides: {
+              root: {
+                borderRadius: '16px'
+              }
+            }
+          },
+          MuiListItemButton: {
+            styleOverrides: {
+              root: {
+                color: '#616161',
+                paddingTop: '10px',
+                paddingBottom: '10px',
+                borderRadius: '16px',
+                '&:hover': {
+                  backgroundColor: '#ede7f6',
+                  color: '#ede7f6',
+                  '& .MuiListItemIcon-root': {
+                    color: '#5e35b1'
+                  }
+                }
+              }
+            }
+          },
+          MuiListItemIcon: {
+            styleOverrides: {
+              root: {
+                color: '#616161',
+                minWidth: '36px'
+              }
+            }
+          },
+          MuiListItemText: {
+            styleOverrides: {
+              primary: {
+                color: '#212121'
+              },
+              borderRadius: '16px',
+            }
+          },
+          MuiInputBase: {
+            styleOverrides: {
+              input: {
+                color: '#212121',
+                '&::placeholder': {
+                  color: '#212121',
+                  fontSize: '0.875rem'
+                }
+              }
+            }
+          },
+          MuiOutlinedInput: {
+            styleOverrides: {
+              root: {
+                background: '#fafafa',
+                borderRadius: '16px',
+                '& .MuiOutlinedInput-notchedOutline': {
+                  borderColor: '#bdbdbd'
+                },
+                '&:hover $notchedOutline': {
+                  borderColor: '#e3f2fd'
+                },
+                '&.MuiInputBase-multiline': {
+                  padding: 1
+                }
+              },
+              input: {
+                fontWeight: 500,
+                background: '#fafafa',
+                padding: '15.5px 14px',
+                borderRadius: '16px',
+                '&.MuiInputBase-inputSizeSmall': {
+                  padding: '10px 14px',
+                  '&.MuiInputBase-inputAdornedStart': {
+                    paddingLeft: 0
+                  }
+                }
+              },
+              inputAdornedStart: {
+                paddingLeft: 4
+              },
+              notchedOutline: {
+                borderRadius: '16px'
+              }
+            }
+          },
+        }
+      }
+    );
+  </script>
+  <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+</html>

package/package.json CHANGED Viewed

@@ -1,9 +1,15 @@
 {
   "name": "@timum/booking",
-  "version": "0.4.2",
+  "version": "0.6.0",
   "license": "CC-BY-ND-4.0",
-  "main": "build/timum-booking.js",
+  "main": "build/timum-booking.umd.js",
   "module": "build/timum-booking.mjs",
+  "exports": {
+    ".": {
+      "import": "./build/timum-booking.mjs",
+      "require": "./build/timum-booking.umd.js"
+    }
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -31,7 +37,6 @@
     "@testing-library/user-event": "^13.5.0",
     "@timum/timum_pdk": "^2.0.2",
     "add-to-calendar-button": "^1.18.8",
-    "create-react-app": "^5.0.1",
     "i18next": "^21.10.0",
     "i18next-browser-languagedetector": "^6.1.5",
     "lodash": "4.17.21",
@@ -52,14 +57,15 @@
     "react-virtualized-auto-sizer": "^1.0.6",
     "react-window": "^1.8.6",
     "reactjs-localstorage": "^1.0.1",
-    "rewire": "^6.0.0",
     "uuid": "^8.3.2",
     "web-vitals": "^2.1.4",
     "yup": "^0.32.11"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "node ./build.js && rollup --config",
+    "start": "vite",
+    "build": "vite build",
+    "buildDev": "vite build --mode development",
+    "serve": "vite preview",
     "np:preview": "np --no-cleanup --preview",
     "np:publish": "yarn build && np --no-cleanup",
     "co:login": "aws codeartifact login --tool npm --repository timum --domain timum --domain-owner 075866820991 --namespace @timum-private",
@@ -99,25 +105,16 @@
     ]
   },
   "devDependencies": {
-    "@babel/plugin-transform-modules-amd": "^7.16.7",
-    "@babel/plugin-transform-runtime": "^7.19.6",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
     "@faker-js/faker": "^7.5.0",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^23.0.5",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-terser": "^0.4.0",
     "@storybook/addon-actions": "^6.5.7",
     "@storybook/addon-essentials": "^6.5.7",
     "@storybook/addon-interactions": "^6.5.7",
     "@storybook/addon-links": "^6.5.7",
-    "@storybook/builder-webpack5": "^6.5.7",
-    "@storybook/manager-webpack5": "^6.5.7",
+    "@storybook/builder-vite": "^0.4.0",
     "@storybook/node-logger": "^6.5.7",
-    "@storybook/preset-create-react-app": "^4.1.2",
     "@storybook/react": "^6.5.7",
     "@storybook/testing-library": "^0.0.13",
+    "@vitejs/plugin-react": "^3.1.0",
     "css-loader": "^6.7.1",
     "eslint": "^8.17.0",
     "eslint-config-prettier": "^8.5.0",
@@ -127,13 +124,8 @@
     "mini-css-extract-plugin": "^1.2.0",
     "msw": "^0.39.2",
     "msw-storybook-addon": "^1.6.3",
-    "rollup": "^3.7.4",
-    "rollup-plugin-peer-deps-external": "^2.2.4"
-  },
-  "babel": {
-    "presets": [
-      "@babel/preset-env"
-    ]
+    "vite": "^4.1.1",
+    "vite-plugin-svgr": "^2.4.0"
   },
   "msw": {
     "workerDirectory": "public"

package/vite.config.js ADDED Viewed

@@ -0,0 +1,29 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+import react from '@vitejs/plugin-react';
+import svgrPlugin from 'vite-plugin-svgr';
+export default defineConfig({
+  define: { 'process.env.NODE_ENV': '"production"' },
+  plugins: [react(), svgrPlugin()],
+  build: {
+    outDir: 'build',
+    lib: {
+      entry: resolve(__dirname, './src/index.jsx'),
+      name: 'timum',
+      fileName: 'timum-booking',
+    },
+    server: {
+      open: true,
+    },
+    // rollupOptions: {
+    //   external: ['react', 'react-dom'],
+    //   output: {
+    //     globals: {
+    //       react: 'React',
+    //       'react-dom': 'ReactDOM',
+    //     },
+    //   },
+    // },
+  },
+});