@websolutespa/bom-mixer-ui 0.4.0 → 0.4.2

package/src/sections/blog-more/blog-card.tsx

@@ -0,0 +1,58 @@
+import { IMedia } from '@websolutespa/bom-core';
+import { useDateTimeFormat } from '@websolutespa/bom-mixer-hooks';
+import { IconArrowRight } from '@websolutespa/bom-mixer-icons';
+import Link from 'next/link';
+import { Button, Card, Flex, Media, Text } from '../../components';
+import { UIStyledComponentProps } from '../../components/types';
+
+type Props = {
+  item: BlogItem
+};
+
+export type BlogItem = {
+  id: number;
+  href: string;
+  title: string;
+  abstract: string;
+  date: string | Date;
+  media: IMedia;
+  author: {
+    fullName: string;
+    media: IMedia;
+  };
+};
+
+export type BlogCardProps = UIStyledComponentProps<Props, 'a'>;
+
+export const BlogCard: React.FC<BlogCardProps> = ({ item, ...props }: BlogCardProps) => {
+  const dateTimeFormat = useDateTimeFormat({
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  });
+  return (
+    <Link href={item.href} passHref>
+      <Card as="a" height="100%" hoverable {...props}>
+        <Media aspectRatio={4 / 3} aspectRatioMd={5 / 3} borderRadius="0.4rem" marginBottom="1rem" item={item.media} />
+        <Card.Content flex="1">
+          <Text variant="heading20">{item.title}</Text>
+          <Text variant="paragraph10" marginBottom="1rem">{dateTimeFormat(item.date)}</Text>
+          <Text variant="paragraph10">{item.abstract}</Text>
+        </Card.Content>
+        <Card.Footer marginTop="1rem">
+          <Flex.Row justifyContent="space-between">
+            <Flex>
+              <Media width="3rem" height="3rem" marginRight="0.75rem" circle item={item.author.media} />
+              <Text variant="paragraph10" fontWeight="700">{item.author.fullName}</Text>
+            </Flex>
+            {false &&
+              <Link href={item.href} passHref>
+                <Button as="a" variant="link"><Text>Read more</Text> <IconArrowRight /></Button>
+              </Link>
+            }
+          </Flex.Row>
+        </Card.Footer>
+      </Card>
+    </Link>
+  );
+};

package/src/sections/blog-more/blog-more.tsx

@@ -0,0 +1,81 @@
+import Link from 'next/link';
+import { Button, Card, Container, Flex, Grid, Media, MediaImage, Section, Text } from '../../components';
+import { UIComponentProps } from '../../components/types';
+import { BlogCard, BlogItem } from './blog-card';
+
+type Props = {
+  items: BlogItem[],
+};
+
+export type BlogMoreProps = UIComponentProps<Props>;
+
+export const BlogMore: React.FC<BlogMoreProps> = ({ items }: BlogMoreProps) => {
+  return (
+    <Section padding="3rem 0">
+      <Container>
+        <Text variant="display30" fontWeight="700" marginBottom="3rem">More Stories</Text>
+        {items && (
+          <Grid.Row rowGap="3rem">
+            {items.map((item, i) => (
+              <Grid sm={6} key={i}>
+                <BlogCard item={item}></BlogCard>
+              </Grid>
+            ))}
+          </Grid.Row>
+        )}
+        {false &&
+          <Grid.Row rowGap="3rem">
+            <Grid sm={6}>
+              <Card>
+                <Media aspectRatio={4 / 3} aspectRatioMd={5 / 3} marginBottom="1rem">
+                  <MediaImage src={'https://picsum.photos/640/480?u=2'} />
+                </Media>
+                <Card.Content>
+                  <Link href="/#we-choose-to-go-to-the-moon" passHref>
+                    <Button as="a" variant="link" marginBottom="1rem">
+                      <Text variant="heading20">We choose to go to the moon.</Text>
+                    </Button>
+                  </Link>
+                  <Text variant="paragraph10" marginBottom="1rem">March 8, 2020</Text>
+                  <Text variant="paragraph10">We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win, and the others, too.</Text>
+                </Card.Content>
+                <Card.Footer marginTop="1rem">
+                  <Flex.Row>
+                    <Media width="3rem" height="3rem" circle>
+                      <MediaImage src="https://i.pravatar.cc/128?u=3" />
+                    </Media>
+                    <Text variant="paragraph10" fontWeight="700">Joe Haddad</Text>
+                  </Flex.Row>
+                </Card.Footer>
+              </Card>
+            </Grid>
+            <Grid sm={6}>
+              <Card>
+                <Media aspectRatio={4 / 3} aspectRatioMd={5 / 3} marginBottom="1rem">
+                  <MediaImage src={'https://picsum.photos/640/480?u=4'} />
+                </Media>
+                <Card.Content>
+                  <Link href="/#the-view-of-the-earth-from-the-moon" passHref>
+                    <Button as="a" variant="link" marginBottom="1rem">
+                      <Text variant="heading20">The earth from the moon.</Text>
+                    </Button>
+                  </Link>
+                  <Text variant="paragraph10" marginBottom="1rem">March 8, 2020</Text>
+                  <Text variant="paragraph10">A small disk, 240,000 mniles away. It was hard to think that that little thing held so many problems, so many frustrations. But the samw wayward stranger would certainly know instinctively that if the earth were inhabited, then the destinies of all who lived on it must inevitably be interwoven and joined. We are one hunk of ground, water, air, clouds, floating around in space. From out there it really is &lsquo;one world&rsquo;.</Text>
+                </Card.Content>
+                <Card.Footer marginTop="1rem">
+                  <Flex.Row>
+                    <Media width="3rem" height="3rem" circle>
+                      <MediaImage src="https://i.pravatar.cc/128?u=5" />
+                    </Media>
+                    <Text variant="paragraph10" fontWeight="700">JJ Kasper</Text>
+                  </Flex.Row>
+                </Card.Footer>
+              </Card>
+            </Grid>
+          </Grid.Row>
+        }
+      </Container>
+    </Section>
+  );
+};

package/src/sections/blog-proposition/blog-proposition.tsx

@@ -0,0 +1,58 @@
+import { IMedia } from '@websolutespa/bom-core';
+import { useDateTimeFormat } from '@websolutespa/bom-mixer-hooks';
+import { IconArrowRight } from '@websolutespa/bom-mixer-icons';
+import Link from 'next/link';
+import { Button, Container, Flex, Grid, Media, Section, Text } from '../../components';
+import { UIComponentProps } from '../../components/types';
+
+type Props = {
+  item: BlogPropositionItem
+};
+
+export type BlogPropositionItem = {
+  id: number;
+  href: string;
+  title: string;
+  abstract: string;
+  date: string | Date;
+  author: {
+    fullName: string;
+    media: IMedia;
+  };
+};
+
+export type BlogPropositionProps = UIComponentProps<Props>;
+
+export const BlogProposition: React.FC<BlogPropositionProps> = ({ item, ...props }: BlogPropositionProps) => {
+  const dateTimeFormat = useDateTimeFormat({
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  });
+  return (
+    <Section padding="3rem 0">
+      <Container>
+        <Grid.Row>
+          <Grid md={6}>
+            <Text variant="heading10" marginBottom="1rem">{item.title}</Text>
+            <Text variant="paragraph10" marginBottom="1rem">{dateTimeFormat(item.date)}</Text>
+          </Grid>
+          <Grid md={6}>
+            <Text variant="paragraph10" maxWidth="60ch">{item.abstract}</Text>
+            <Flex.Row justifyContent="space-between" marginTop="1rem">
+              <Flex>
+                <Media width="3rem" height="3rem" marginRight="0.75rem" circle item={item.author.media} />
+                <Text variant="paragraph10" fontWeight="700">{item.author.fullName}</Text>
+              </Flex>
+              {false &&
+                <Link href={item.href} passHref>
+                  <Button as="a" variant="link"><Text>Read more</Text> <IconArrowRight /></Button>
+                </Link>
+              }
+            </Flex.Row>
+          </Grid>
+        </Grid.Row>
+      </Container>
+    </Section>
+  );
+};

package/src/sections/cart-mini/cart-mini-item.tsx

@@ -0,0 +1,58 @@
+import { useCart, useCurrency, useDrawer, useMounted } from '@websolutespa/bom-mixer-hooks';
+import { IconMinus, IconPlus, IconTrash } from '@websolutespa/bom-mixer-icons';
+import { ICartItem } from '@websolutespa/bom-mixer-models';
+import NextLink from 'next/link';
+import { Button, Card, Flex, Media, MediaImage, Text } from '../../components';
+import { Input } from '../../forms';
+
+export const CartMiniItem: React.FC<{ item: ICartItem }> = ({ item }: { item: ICartItem }) => {
+
+  const currency = useCurrency();
+
+  const [drawer, openDrawer, closeDrawer] = useDrawer();
+  const { update, remove } = useCart(state => state.actions);
+
+  function onSetQty(qty: number) {
+    if (qty > 0) {
+      update({ ...item, qty });
+    } else {
+      onRemove();
+    }
+  }
+
+  function onRemove() {
+    const count = remove(item);
+    console.log('count', count);
+    if (count < 1) {
+      closeDrawer();
+    }
+  }
+
+  const mounted = useMounted();
+  return (
+    <>
+      <Card marginBottom="2rem" paddingBottom="1rem" borderBottom="1px solid var(--color-neutral-300)">
+        <Flex.Row alignItems="flex-start">
+          <Flex>
+            <Media aspectRatio={1} width="80px" height="80px" flex="0 0 80px" rounded>
+              <MediaImage width="80px" height="80px" src={item.media.src} draggable={false} title={item.title} />
+            </Media>
+          </Flex>
+          <Card.Content flex="1" padding="0 1rem">
+            <NextLink href={item.href || ''}>
+              <Text variant="paragraph20" fontWeight="700" onClick={closeDrawer}>{item.title}</Text>
+            </NextLink>
+            <Text variant="paragraph30" marginBottom="1rem">{item.abstract}</Text>
+            <Flex.Row justifyContent="space-between">
+              <Button onClick={() => onSetQty(item.qty - 1)} ><IconMinus width="20px" height="20px" /></Button>
+              <Input width="60px" padding="0.2rem" placeholder="qty" value={item.qty.toString()} onChange={(e: React.ChangeEvent<HTMLInputElement>) => onSetQty(Number(e.target.value))} />
+              <Button size="xs" onClick={() => onSetQty(item.qty + 1)} ><IconPlus width="20px" height="20px" /></Button>
+              <Text width="80px" textAlign="right">{currency(item.price * item.qty)}</Text>
+              {mounted && <Button onClick={onRemove}><IconTrash width="20px" height="20px" /></Button>}
+            </Flex.Row>
+          </Card.Content>
+        </Flex.Row>
+      </Card>
+    </>
+  );
+};

package/src/sections/cart-mini/cart-mini.tsx

@@ -0,0 +1,76 @@
+import { useCart, useCurrency, useLayout } from '@websolutespa/bom-mixer-hooks';
+import { IconArrowRight, IconShoppingCart } from '@websolutespa/bom-mixer-icons';
+import { ReactNode } from 'react';
+import { Button, Divider, Drawer, Flex, NavLink, Text } from '../../components';
+import { CartMiniItem } from './cart-mini-item';
+
+export type CartMiniProps = {
+  children?: ReactNode;
+  visible: boolean;
+  onClose: () => void;
+};
+
+export const CartMini: React.FC<CartMiniProps> = ({ visible, onClose }: CartMiniProps) => {
+
+  const layout = useLayout();
+
+  const currency = useCurrency();
+
+  const items = useCart((state) => state.items);
+
+  const totalAmount = items.reduce((p, c) => p + c.price * c.qty, 0);
+
+  /*
+  const reduceUI = useUI(state => state.reduce);
+
+  function onSetDrawer(value?: string) {
+    reduceUI((state) => ({ drawer: value }));
+  }
+
+  function onBuy() {
+    return onSetDrawer();
+  }
+  */
+
+  return (
+    <Drawer visible={visible} onClose={onClose} placement="right">
+      <Drawer.Title>
+        <Text variant="paragraph10" fontWeight="700">Shopping cart</Text>
+      </Drawer.Title>
+      <Drawer.Subtitle>
+        <Divider>{items.length} items found</Divider>
+      </Drawer.Subtitle>
+      <Drawer.Content flex="1" display="flex" width="100vw" maxWidth="400px">
+        <Flex.Col justifyContent="space-between">
+          {items && (
+            <Flex.Col flex="1">
+              {items.map((item, i) =>
+                <CartMiniItem key={i} item={item} />
+              )}
+            </Flex.Col>
+          )}
+          <Flex.Row justifyContent="space-between" alignItems="center" padding="1rem 0 0.5rem 0">
+            <Text fontWeight="700">Subtotal</Text>
+            <Text fontWeight="700">{currency(totalAmount)}</Text>
+          </Flex.Row>
+          <Flex.Row justifyContent="space-between" alignItems="center" padding="0.5rem 0 1.5rem 0">
+            <Text>Shipping and taxes calculated at checkout</Text>
+          </Flex.Row>
+          <NavLink href={layout.topLevelHrefs.checkout || ''} passHref>
+            <Button as="a" variant="primary" size="lg" position="sticky" bottom="1rem" justifyContent="center" onClick={onClose}>
+              <span>Checkout</span> <IconShoppingCart />
+            </Button>
+          </NavLink>
+          <Flex.Row justifyContent="center" alignItems="center" padding="1rem 0">
+            <span>or</span>
+            <NavLink href={layout.topLevelHrefs.shop_index || ''} passHref>
+              <Button as="a" variant="link" onClick={onClose}>
+                <span>Continue shopping</span> <IconArrowRight />
+              </Button>
+            </NavLink>
+          </Flex.Row>
+        </Flex.Col>
+      </Drawer.Content>
+    </Drawer>
+  );
+};

package/src/sections/categories-proposition/categories-proposition-card.tsx

@@ -0,0 +1,34 @@
+import { IMedia } from '@websolutespa/bom-core';
+import Link from 'next/link';
+import { Card, Media, Text } from '../../components';
+import { UIStyledComponentProps } from '../../components/types';
+
+export type CategoriesPropositionItem = {
+  href: string;
+  title: string;
+  media?: IMedia;
+};
+
+type Props = {
+  item: CategoriesPropositionItem
+};
+
+export type CategoriesPropositionCardProps = UIStyledComponentProps<Props, 'a'>;
+
+export const CategoriesPropositionCard: React.FC<CategoriesPropositionCardProps> = ({ item, ...props }: CategoriesPropositionCardProps) => {
+  return (
+    <Link href={item.href} passHref>
+      <Card as="a" aspectRatio={2 / 1} {...props} hoverable borderRadius="0.4rem" justifyContent="flex-end">
+        {item.media && (
+          <Card.Background>
+            <Media overlay item={item.media} />
+          </Card.Background>
+        )}
+        <Card.Content padding="1rem" justifyContent="flex-end">
+          <Text variant="paragraph10" fontWeight="700">{item.title}</Text>
+          <Text variant="paragraph30">{'Shop now'}</Text>
+        </Card.Content>
+      </Card>
+    </Link>
+  );
+};

package/src/sections/categories-proposition/categories-proposition.tsx

@@ -0,0 +1,39 @@
+import { IconArrowRight } from '@websolutespa/bom-mixer-icons';
+import Link from 'next/link';
+import { Button, Container, Flex, Grid, Section, Text } from '../../components';
+import { UIComponentProps } from '../../components/types';
+import { CategoriesPropositionCard, CategoriesPropositionItem } from './categories-proposition-card';
+
+type Props = {
+  items: CategoriesPropositionItem[],
+};
+
+export type CategoriesPropositionProps = UIComponentProps<Props>;
+
+export const CategoriesProposition: React.FC<CategoriesPropositionProps> = ({ items }: CategoriesPropositionProps) => {
+  return (
+    <Section padding="3rem 0">
+      <Container>
+        <Flex.Row justifyContent="space-between" marginBottom="1rem">
+          <Text variant="heading40" fontWeight="700">Shop by category</Text>
+          <Link href="/#categories" passHref>
+            <Button as="a" variant="link"><span>Browse all categories</span> <IconArrowRight /></Button>
+          </Link>
+        </Flex.Row>
+        {items.length >= 3 && (
+          <Grid.Row columnGap="1rem" rowGap="1rem">
+            <Grid sm={6}>
+              <CategoriesPropositionCard aspectRatio={1} aspectRatioSm="auto" heightSm="100%" item={items[0]}></CategoriesPropositionCard>
+            </Grid>
+            <Grid sm={6}>
+              <Flex.Col rowGap="1rem">
+                <CategoriesPropositionCard aspectRatio={4 / 3} aspectRatioMd={2 / 1} item={items[1]}></CategoriesPropositionCard>
+                <CategoriesPropositionCard aspectRatio={4 / 3} aspectRatioMd={2 / 1} item={items[2]}></CategoriesPropositionCard>
+              </Flex.Col>
+            </Grid>
+          </Grid.Row>
+        )}
+      </Container>
+    </Section>
+  );
+};

package/src/sections/category-hero/category-hero.tsx

@@ -0,0 +1,47 @@
+import { IMedia } from '@websolutespa/bom-core';
+import { ILink } from '@websolutespa/bom-mixer-models';
+import { Card, Container, Flex, Media, Section, Text } from '../../components';
+import { UIStyledComponentProps } from '../../components/types';
+
+export type CategoryHeroItem = {
+  title?: string;
+  abstract?: string;
+  media?: IMedia;
+  link?: ILink;
+};
+
+type Props = {
+  item: CategoryHeroItem;
+};
+
+export type CategoryHeroProps = UIStyledComponentProps<Props>;
+
+export const CategoryHero: React.FC<CategoryHeroProps> = ({ item, ...props }: CategoryHeroProps) => {
+  return (
+    item.media ?
+      <Card justifyContent="center" height="50vh" overflow="hidden">
+        <Card.Background>
+          <Media overlay eager item={item.media} />
+        </Card.Background>
+        <Card.Content>
+          <Container>
+            {/*
+            <Text variant="paragraph30" textTransform="uppercase">Collections</Text>
+            */}
+            <Flex.Col gap="3rem" alignItems="center" textAlign="center">
+              {item.title && <Text variant="display30" fontWeight="700">{item.title}</Text>}
+              {item.abstract && <Text variant="paragraph10" lineHeight="2" maxWidth="76ch" dangerouslySetInnerHTML={{ __html: item.abstract }}></Text>}
+            </Flex.Col>
+          </Container>
+        </Card.Content>
+      </Card> :
+      <Section padding="6rem 0">
+        <Container>
+          <Flex.Col gap="3rem" alignItems="center" textAlign="center">
+            {item.title && <Text variant="display30" fontWeight="700">{item.title}</Text>}
+            {item.abstract && <Text variant="paragraph10" lineHeight="2" maxWidth="76ch" dangerouslySetInnerHTML={{ __html: item.abstract }}></Text>}
+          </Flex.Col>
+        </Container>
+      </Section>
+  );
+};

package/src/sections/category-proposition/category-proposition.tsx

@@ -0,0 +1,49 @@
+import { IMedia } from '@websolutespa/bom-core';
+import { Button, Card, Container, Flex, Media, NavLink, Section, Text } from '../../components';
+import { UIComponentProps } from '../../components/types';
+
+type Props = {
+  item: CategoryPropositionItem,
+};
+
+export type CategoryPropositionItem = {
+  href: string;
+  title?: string;
+  abstract?: string;
+  description?: string;
+  media?: IMedia;
+};
+
+export type CategoryPropositionProps = UIComponentProps<Props>;
+
+export const CategoryProposition: React.FC<CategoryPropositionProps> = ({ item }) => {
+  if (!item) {
+    return null;
+  }
+  return (
+    <Section>
+      <Container>
+        <Card aspectRatio={1} aspectRatioSm={1.44} aspectRatioMd={1.87} aspectRatioLg={2.3} justifyContent="center" borderRadius="0.4rem" border="1px solid var(--color-primary-200)">
+          {item.media &&
+            <Card.Background>
+              <Media overlay={0.7} item={item.media} />
+            </Card.Background>
+          }
+          <Card.Content>
+            <Container.Fluid>
+              <Flex.Col alignItems="center" textAlign="center">
+                {item.abstract && <Text variant="heading10" fontWeight="700" marginBottom="1rem">{item.abstract}</Text>}
+                {item.description && <Text variant="paragraph10" maxWidth="65ch" marginBottom="2rem">{item.description}</Text>}
+                {item.href &&
+                  <NavLink href={item.href} passHref>
+                    <Button as="a" variant="secondary">Discover {item.title}</Button>
+                  </NavLink>
+                }
+              </Flex.Col>
+            </Container.Fluid>
+          </Card.Content>
+        </Card>
+      </Container>
+    </Section>
+  );
+};

package/src/sections/checkout/checkout-basket-item.tsx

@@ -0,0 +1,64 @@
+import { useCart, useCurrency } from '@websolutespa/bom-mixer-hooks';
+import { IconMinus, IconPlus, IconTrash } from '@websolutespa/bom-mixer-icons';
+import { ICheckoutItem } from '@websolutespa/bom-mixer-models';
+import NextLink from 'next/link';
+import { Button, Flex, Media, MediaImage, Text } from '../../components';
+import { Input } from '../../forms';
+
+export const CheckoutBasketItem: React.FC<{ item: ICheckoutItem }> = ({ item }: { item: ICheckoutItem }) => {
+
+  const currency = useCurrency();
+
+  const { update, remove } = useCart(state => state.actions);
+
+  function onSetQty(qty: number) {
+    if (qty > 0) {
+      update({ ...item, qty });
+    } else {
+      onRemove();
+    }
+  }
+
+  function onRemove() {
+    const count = remove(item);
+    console.log('onRemove', count);
+  }
+
+  return (
+    <Flex.Row gap="2rem" paddingBottom="1rem" borderBottom="1px solid var(--color-neutral-300)">
+      <Flex flex="0 1 calc(100% - 420px)">
+        <Flex.Row gap="2rem">
+          <Media aspectRatio={1} width="120px" height="120px" flex="0 0 120px" rounded>
+            <MediaImage width="120px" height="120px" src={item.media.src} draggable={false} title={item.title} />
+          </Media>
+          <Flex.Col alignItems="flex-start">
+            <NextLink href={item.href || ''} passHref>
+              <Button as="a" variant="nav">
+                <Text variant="paragraph20" fontWeight="700">{item.title}</Text>
+              </Button>
+            </NextLink>
+            <Text variant="paragraph30">{item.abstract}</Text>
+          </Flex.Col>
+        </Flex.Row>
+      </Flex>
+      <Flex.Col flexBasis="110px" alignItems="flex-end">
+        <Text>{currency(item.price)}</Text>
+        {item.fullPrice > item.price && <Text variant="paragraph40" textDecoration="line-through" color="var(--color-neutral-400)">{currency(item.fullPrice)}</Text>}
+      </Flex.Col>
+      <Flex flexBasis="120px" justifyContent="center">
+        <Flex.Row>
+          <Button onClick={() => onSetQty(item.qty - 1)} ><IconMinus width="20px" height="20px" /></Button>
+          <Input width="60px" padding="0.2rem" placeholder="qty" value={item.qty.toString()} onChange={(e) => onSetQty(Number(e.target.value))} />
+          <Button size="xs" onClick={() => onSetQty(item.qty + 1)} ><IconPlus width="20px" height="20px" /></Button>
+        </Flex.Row>
+      </Flex>
+      <Flex flexBasis="80px" justifyContent="center">
+        <Button onClick={onRemove}><IconTrash width="20px" height="20px" /></Button>
+      </Flex>
+      <Flex.Col flexBasis="110px" alignItems="flex-end">
+        <Text>{currency(item.price * item.qty)}</Text>
+        {item.fullPrice > item.price && <Text variant="paragraph40" textDecoration="line-through" color="var(--color-neutral-400)">{currency(item.fullPrice * item.qty)}</Text>}
+      </Flex.Col>
+    </Flex.Row>
+  );
+};