@mirai/core 0.4.36 → 0.4.37

package/public/routes/Home.jsx

@@ -1,131 +0,0 @@
-/* eslint-disable react/no-unescaped-entities */
-/* eslint-disable react/prop-types */
-import { Event } from '@mirai/data-sources';
-import { InputOption, ScrollView, Text, useDevice, View } from '@mirai/ui';
-import React, { useEffect, useState } from 'react';
-
-import { TESTIMONIALS } from './Home.constants';
-import * as style from './routes.module.css';
-
-const EVENT_INTENT_ENVIRONMENT = 'intentEnvironment';
-
-export const Home = () => {
-  const { isMobile } = useDevice();
-
-  const [locale, setLocale] = useState();
-  const [resident, setResident] = useState();
-
-  useEffect(() => {
-    const handleIntentEnvironment = ({ locale: value } = {}) => setLocale(value);
-
-    Event.subscribe(EVENT_INTENT_ENVIRONMENT, handleIntentEnvironment);
-
-    return () => Event.unsubscribe(EVENT_INTENT_ENVIRONMENT, handleIntentEnvironment);
-  }, []);
-
-  useEffect(() => {
-    Event.publish('setStore', { promocode: resident ? 'RESIDENT' : '' });
-  }, [resident]);
-
-  const showResident = locale === 'es-ES';
-  const testId = window.IS_PLAYWRIGHT ? 'finder' : undefined;
-
-  return (
-    <>
-      <View tag="section" className={[style.section, style.content, style.home]}>
-        <View className={[style.wrapper, style.centered]}>
-          <Text bold brand className={[style.slogan, style.text]}>
-            Discover the Serenity of a Perfect Stay
-          </Text>
-          <Text headline={!isMobile} level={3} className={[style.pitch, style.text]}>
-            Experience the calming atmosphere of our serene guest rooms, each designed with your comfort in mind.
-          </Text>
-        </View>
-        <View className={style.backgroundImage} />
-      </View>
-
-      <View className={[style.finder, style.centered, showResident && style.resident]}>
-        {showResident && (
-          <View>
-            <InputOption
-              checked={resident}
-              name="resident"
-              label="I am resident"
-              onChange={setResident}
-              className={style.resident}
-            />
-          </View>
-        )}
-
-        <View data-mirai-component="finder" data-test-id={testId} />
-      </View>
-
-      <View row={!isMobile} tag="section" className={[style.section, style.spaceBetween, style.wrapper]}>
-        <View className={style.texts}>
-          <Text brand headline level={1}>
-            Welcome to Monalisa
-          </Text>
-
-          <Text lighten headline={!isMobile}>
-            Welcome to Monalisa, where Monalisa and convenience converge in the heart of the city. Our hotel is located
-            in the bustling city center, just steps away from the best shopping, dining, and entertainment that the city
-            has to offer.
-          </Text>
-          <Text lighten headline={!isMobile}>
-            One of our greatest strengths is our location. We are situated in the middle of the city center, which means
-            that our guests can easily explore all the sights and sounds of this vibrant metropolis. Plus, we are just a
-            stone's throw away from the train station, making it incredibly easy for our guests to arrive and depart
-            from our hotel.
-          </Text>
-          <Text lighten headline={!isMobile}>
-            So why wait? Book your stay at Monalisa today and experience the perfect blend of Monalisa, convenience, and
-            comfort in the heart of the city.
-          </Text>
-        </View>
-      </View>
-
-      <View row={!isMobile} tag="section" className={[style.section, style.accent, style.testimonials]}>
-        <View>
-          <Text brand headline level={1}>
-            Testimonials
-          </Text>
-          <Text>See what our guests are saying about their serene and tranquil experiences at Monalisa.</Text>
-        </View>
-
-        <ScrollView horizontal snap={!isMobile} className={style.cards}>
-          {TESTIMONIALS.map(({ text, rating, name, jobPosition } = {}, index) => (
-            <View key={index} className={style.card}>
-              <Text action>{text}</Text>
-              <Text accent action>
-                {'★'.repeat(rating)}
-              </Text>
-
-              <View row>
-                <View
-                  className={style.avatar}
-                  style={{ backgroundImage: `url(https://i.pravatar.cc/96?u=${index})` }}
-                />
-                <View>
-                  <Text action>{name}</Text>
-                  <Text lighten small>
-                    {jobPosition}
-                  </Text>
-                </View>
-              </View>
-            </View>
-          ))}
-        </ScrollView>
-      </View>
-
-      <View row tag="section" className={[style.section, style.border, style.centered]}>
-        <View>
-          <Text>FIND BEST HOTEL FOR LEAVING</Text>
-          <Text bold brand headline level={1}>
-            Find the Best Hotel in Your Next Vacation
-          </Text>
-        </View>
-        <View data-mirai-component="buttonFinder" />
-      </View>
-    </>
-  );
-};

package/public/routes/NotFound.jsx

@@ -1,23 +0,0 @@
-import { Button, Text, View } from '@mirai/ui';
-import React from 'react';
-import { useLocation } from 'wouter';
-
-import * as style from './routes.module.css';
-
-export const NotFound = () => {
-  const [, setLocation] = useLocation();
-
-  return (
-    <View tag="section" className={[style.section, style.border, style.home]}>
-      <View className={[style.wrapper, style.centered]}>
-        <Text bold className={style.slogan}>
-          Oops! Something went wrong.
-        </Text>
-        <Text headline>Url {window.location.href} is not a valid.</Text>
-        <Button preventDefault={false} onPress={() => setLocation('/')}>
-          RETURN TO HOME →
-        </Button>
-      </View>
-    </View>
-  );
-};

package/public/routes/Profile.jsx

@@ -1,21 +0,0 @@
-import { Text, View } from '@mirai/ui';
-import React from 'react';
-
-import * as style from './routes.module.css';
-
-export const Profile = () => (
-  <>
-    <View tag="section" className={[style.section, style.box, style.accent]}>
-      <View className={style.wrapper}>
-        <Text bold brand headline level={1}>
-          Your profile
-        </Text>
-        <Text>Explore and manage your personal profile settings here.</Text>
-      </View>
-    </View>
-
-    <View className={[style.wrapper, style.box]}>
-      <View data-mirai-component="profile" />
-    </View>
-  </>
-);

package/public/routes/Signup.jsx

@@ -1,20 +0,0 @@
-import { Text, View } from '@mirai/ui';
-import React from 'react';
-
-import * as style from './routes.module.css';
-
-export const Signup = () => (
-  <>
-    <View tag="section" className={[style.section, style.box, style.accent]}>
-      <View className={style.wrapper}>
-        <Text bold brand headline level={1}>
-          Signup
-        </Text>
-        <Text>Join Club Monalisa for free and enjoy exclusive benefits</Text>
-      </View>
-    </View>
-    <View className={[style.wrapper, style.box]}>
-      <View data-mirai-component="signup" />
-    </View>
-  </>
-);

package/public/routes/Step0-Accommodations.jsx

@@ -1,4 +0,0 @@
-import { View } from '@mirai/ui';
-import React from 'react';
-
-export const Step0 = () => <View data-mirai-component="accommodations" />;

package/public/routes/Step1-Rates.jsx

@@ -1,12 +0,0 @@
-import { View } from '@mirai/ui';
-import React from 'react';
-
-export const Step1 = () => (
-  <View data-mirai-component="rates" data-test-id={window.IS_PLAYWRIGHT ? 'rates' : undefined}>
-    {/* <span data-content-error>
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad itaque odio inventore eos et consequuntur molestias
-      doloremque temporibus accusantium laborum rem nobis nostrum, voluptatum dolorum, repellendus quasi esse eveniet
-      maxime?
-    </span> */}
-  </View>
-);

package/public/routes/Step2-Checkout.jsx

@@ -1,4 +0,0 @@
-import { View } from '@mirai/ui';
-import React from 'react';
-
-export const Step2 = () => <View data-mirai-component="checkout" data-session="true" />;

package/public/routes/Step3-Booking.jsx

@@ -1,4 +0,0 @@
-import { View } from '@mirai/ui';
-import React from 'react';
-
-export const Step3 = () => <View data-mirai-component="booking" />;

package/public/routes/components/Logo.jsx

@@ -1,18 +0,0 @@
-import { Action, Text, View } from '@mirai/ui';
-import React from 'react';
-import { useLocation } from 'wouter';
-
-export const Logo = ({ ...others }) => {
-  const [, setLocation] = useLocation();
-
-  return (
-    <Action inline href="/" onPress={() => setLocation('/')}>
-      <View {...others}>
-        <Text bold brand headline level={2}>
-          Monalisa
-        </Text>
-        <Text tiny>HOTEL & RESORT</Text>
-      </View>
-    </Action>
-  );
-};

package/public/routes/components/index.js

@@ -1 +0,0 @@
-export * from './Logo';

package/public/routes/index.js

@@ -1,10 +0,0 @@
-export * from './Deals';
-export * from './Finder';
-export * from './Home';
-export * from './NotFound';
-export * from './Profile';
-// export * from './step0-accommodations';
-export * from './Step1-Rates';
-export * from './Step2-Checkout';
-export * from './Step3-Booking';
-export * from './Signup';

package/public/routes/routes.module.css

@@ -1,259 +0,0 @@
-.section {
-  gap: var(--mirai-ui-space-M);
-}
-
-/* colors */
-.section.border {
-  background-color: var(--mirai-ui-content-border);
-}
-
-.section.content {
-  background-color: var(--mirai-ui-content);
-}
-
-.section.accent {
-  background-color: var(--mirai-ui-accent);
-}
-
-.section.accent > * > ui-text {
-  color: var(--mirai-ui-base);
-}
-
-/* layout */
-.section.centered {
-  justify-content: center;
-  gap: var(--mirai-ui-space-L);
-}
-
-.section.box {
-  padding-bottom: calc(var(--mirai-ui-space-XXL) + var(--mirai-ui-space-L));
-}
-
-.section.spaceBetween {
-  justify-content: space-between;
-}
-
-.texts {
-  align-self: flex-start;
-}
-
-.image {
-  background-color: var(--mirai-ui-content-background);
-}
-
-.image.square {
-  min-height: var(--mirai-ui-breakpoint-S);
-  min-width: var(--mirai-ui-breakpoint-S);
-}
-
-.wrapper {
-  align-self: center;
-  max-width: var(--mirai-ui-breakpoint-content);
-  width: 100%;
-  gap: var(--mirai-ui-space-S);
-}
-
-.wrapper.box {
-  margin-top: calc(var(--mirai-ui-space-XXL) * -1);
-  background-color: var(--mirai-ui-base);
-  box-shadow: var(--mirai-ui-shadow);
-  border-radius: var(--mirai-ui-border-radius);
-  margin-bottom: var(--mirai-ui-space-XL);
-}
-
-.wrapper.centered {
-  align-items: center;
-}
-
-/* -- home --------------------------------------------------------------- */
-.home {
-  position: relative;
-  justify-content: center;
-}
-
-.home .wrapper {
-  z-index: 1;
-}
-
-.home .backgroundImage {
-  background-position: center;
-  background-size: cover;
-  bottom: 0;
-  left: 0;
-  opacity: 0.66;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
-.home .text {
-  color: var(--mirai-ui-base);
-  text-align: center;
-  text-shadow: 0 0 var(--mirai-ui-space-M) rgba(0, 0, 0, 0.33);
-}
-
-.testimonials > :first-child {
-  max-width: var(--mirai-ui-breakpoint-S);
-}
-
-.cards {
-  gap: var(--mirai-ui-space-L);
-  width: 100%;
-  flex: 1;
-}
-
-.card {
-  background-color: var(--mirai-ui-base);
-  border-radius: var(--mirai-ui-border-radius);
-  gap: var(--mirai-ui-space-S);
-  height: 320px;
-  min-width: 256px;
-  padding: var(--mirai-ui-space-L) var(--mirai-ui-space-L);
-}
-
-.card .avatar {
-  background-color: var(--mirai-ui-content-border);
-  background-size: cover;
-  border-radius: 50%;
-  height: var(--mirai-ui-space-XL);
-  width: var(--mirai-ui-space-XL);
-}
-
-.card .avatar + * {
-  margin-bottom: calc(var(--mirai-ui-space-XS) / 2);
-}
-
-.card > :last-child {
-  align-items: flex-end;
-  flex: 1;
-  gap: var(--mirai-ui-space-S);
-}
-
-.finder.centered {
-  margin: 0 auto;
-  position: sticky;
-  top: var(--mirai-ui-space-M);
-}
-
-.finder .resident > [data-role='text'] {
-  color: var(--mirai-ui-base);
-}
-
-[data-mirai-component='finder'].column {
-  background-color: var(--mirai-ui-content-background);
-  max-width: calc(var(--mirai-ui-breakpoint-S) - var(--mirai-ui-space-M));
-  margin: var(--mirai-ui-space-M);
-  padding: var(--mirai-ui-space-M);
-  align-self: center;
-}
-
-@media only screen and (max-width: 480px) {
-  .section {
-    padding: var(--mirai-ui-space-XL) var(--mirai-ui-space-M);
-  }
-
-  .section.accent.testimonials {
-    gap: var(--mirai-ui-space-L);
-    padding: var(--mirai-ui-space-XL) 0;
-  }
-
-  .testimonials > :first-child {
-    padding: 0 var(--mirai-ui-space-M);
-  }
-
-  .cards > :first-child {
-    margin-left: var(--mirai-ui-space-M);
-  }
-
-  .home {
-    padding: var(--mirai-ui-space-XXL) var(--mirai-ui-space-M) calc(var(--mirai-ui-space-XXL) * 2)
-      var(--mirai-ui-space-M);
-  }
-
-  .home .wrapper {
-    gap: var(--mirai-ui-space-L);
-  }
-
-  .home .slogan {
-    font-size: calc(var(--mirai-ui-font-size-headline-1) * 1.66);
-    line-height: calc(var(--mirai-ui-line-height-headline-1) * 1.66);
-  }
-
-  .home .backgroundImage {
-    background-image: url('https://framerusercontent.com/images/wMnYXmJb2xSPIDf60AukEywhD8A.jpg?scale-down-to=960');
-  }
-
-  .texts {
-    gap: var(--mirai-ui-space-M);
-  }
-
-  .image.square {
-    min-height: 90svw;
-    min-width: 90svw;
-  }
-
-  .finder {
-    margin-top: calc(var(--mirai-ui-space-L) * -1) !important;
-    width: 90svw;
-  }
-}
-
-@media only screen and (min-width: 481px) {
-  .section {
-    padding: var(--mirai-ui-space-XXL) var(--mirai-ui-space-M);
-  }
-
-  .section.accent.testimonials {
-    gap: var(--mirai-ui-space-XXL);
-    padding: var(--mirai-ui-space-XXL) 0 var(--mirai-ui-space-XXL) var(--mirai-ui-space-XXL);
-  }
-
-  .home {
-    min-height: 66svh;
-  }
-
-  .home .wrapper {
-    gap: var(--mirai-ui-space-XL);
-    margin-bottom: var(--mirai-ui-space-M);
-  }
-
-  .home .slogan {
-    font-size: calc(var(--mirai-ui-font-size-headline-1) * 3);
-    line-height: calc(var(--mirai-ui-line-height-headline-1) * 3);
-    max-width: calc(var(--mirai-ui-breakpoint-content) * 0.8);
-  }
-
-  .home .backgroundImage {
-    background-image: url('https://framerusercontent.com/images/wMnYXmJb2xSPIDf60AukEywhD8A.jpg?scale-down-to=1920');
-  }
-
-  .home .pitch {
-    max-width: 50%;
-  }
-
-  body:not([data-mirai-modal='true']) .finder.centered {
-    z-index: 1;
-  }
-
-  .texts {
-    gap: var(--mirai-ui-space-L);
-    max-width: 50%;
-  }
-
-  .image.square {
-    min-height: var(--mirai-ui-breakpoint-S);
-    min-width: var(--mirai-ui-breakpoint-S);
-  }
-
-  .finder.centered {
-    margin-top: calc(var(--mirai-ui-space-XXS) * 8.75 * -1);
-  }
-
-  .finder.centered.resident {
-    margin-top: calc(var(--mirai-ui-space-S) * 5.75 * -1);
-  }
-
-  [data-mirai-component='finder'].column {
-    min-width: calc(var(--mirai-ui-breakpoint-S) - var(--mirai-ui-space-M));
-  }
-}

package/public/themes/monalisa.theme.css

@@ -1,45 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=MuseoModerno:wght@600&display=swap');
-
-:root {
-  /* == legacy ====================================================================================================== */
-  /* booking */
-  /* --corporative-color: #003580; */
-  /* pinterest */
-  /* --corporative-color: #bd081c; */
-
-  /* == @mirai/ui =================================================================================================== */
-  /* typography */
-  --mirai-ui-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-  --mirai-ui-font-weight: 400;
-  --mirai-ui-font-medium-weight: 500;
-  --mirai-ui-font-bold-weight: 600;
-
-  /* palette */
-  --mirai-ui-accent: #f7931a;
-  --mirai-ui-accent-background: #fff5e6;
-  --mirai-ui-accent-light: #ffb84d;
-  --mirai-ui-accent-border: #ffcd94;
-  --mirai-ui-accent-dark: #c66e0e;
-
-  /* text */
-  --mirai-ui-text-brand-font: 'MuseoModerno', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-  --mirai-ui-text-brand-font-weight: 600
-  --mirai-ui-text-brand-font-medium: var(--mirai-ui-text-brand-font);
-  --mirai-ui-text-brand-font-medium-weight: var(--mirai-ui-text-brand-font-weight);
-  --mirai-ui-text-brand-font-bold: var(--mirai-ui-text-brand-font);
-  --mirai-ui-text-brand-font-bold-weight: var(--mirai-ui-text-brand-font-weight);
-
-  /* button */
-  /* --mirai-ui-button-font-weight: var(--mirai-ui-font-bold-weight); */
-
-
-  /* == @mirai/core ================================================================================================= */
-  /* Finder */
-  --mirai-finder-button-font-family: var(--mirai-ui-text-brand-font);
-  --mirai-finder-button-font-weight: var(--mirai-ui-text-brand-font-weight);
-}
-
-body {
-  margin: 0;
-  padding: 0;
-}