Initial Commit

.gitignore

@@ -0,0 +1,12 @@
+
+# next.js build output
+.next
+# dotenv environment variables file (build for Zeit Now)
+.env
+.env.build
+# Dependency directories
+node_modules/
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.prettierrc

@@ -0,0 +1 @@
+"@smartive/prettier-config"

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "emma-bringts",
+  "version": "1.0.0-development",
+  "description": "",
+  "scripts": {
+    "develop": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@fullhuman/postcss-purgecss": "^2.1.0",
+    "autoprefixer": "^9.7.4",
+    "gqless": "0.0.1-alpha.27",
+    "next": "^9.3.1",
+    "postcss-import": "^12.0.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "tailwindcss": "^1.2.0",
+    "xstate": "^4.8.0"
+  },
+  "devDependencies": {
+    "@gqless/cli": "0.0.1-alpha.30",
+    "@smartive/prettier-config": "^2.0.1",
+    "@types/node": "^13.9.2",
+    "@types/react": "^16.9.25",
+    "prettier": "^2.0.0",
+    "typescript": "^3.8.3"
+  }
+}

postcss.config.js

@@ -0,0 +1,11 @@
+const purgecss = [
+  '@fullhuman/postcss-purgecss',
+  {
+    content: ['./src/**/*.tsx'],
+    defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
+  },
+];
+
+module.exports = {
+  plugins: ['postcss-import', 'tailwindcss', 'autoprefixer', ...(process.env.NODE_ENV === 'production' ? [purgecss] : [])],
+};

src/assets/app.css

@@ -0,0 +1,5 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+@import url('https://fonts.googleapis.com/css?family=Nanum+Pen+Script&display=swap&text=Emma+bringts!');
+@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap');

src/components/card.tsx

@@ -0,0 +1,19 @@
+import { FC, ReactNode } from 'react';
+
+const styles = {
+  container: 'bg-white mx-auto w-1/2 rounded-md p-8 flex-row flex',
+  body: 'pr-4',
+  button: 'flex-col justify-center flex',
+};
+
+type Props = {
+  children: ReactNode;
+  action: ReactNode;
+};
+
+export const Card: FC<Props> = ({ action, children }) => (
+  <div className={styles.container}>
+    <div className={styles.body}>{children}</div>
+    <div className={styles.button}>{action}</div>
+  </div>
+);

src/components/footer.tsx

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+
+const styles = {
+  container: 'w-full bg-gray-200 py-8 px-12 mt-16',
+  message: 'font-sans text-base font-thin tracking-tight text-center',
+};
+
+export const Footer: FC = () => (
+  <footer className={styles.container}>
+    <p className={styles.message}>asdfasdf</p>
+  </footer>
+);

src/components/header.tsx

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { Logo } from '../identity/logo';
+import Link from 'next/link';
+type Props = {};
+
+const styles = {
+  header: 'bg-white py-2 px-4',
+  nav: '',
+};
+
+export const Header: FC<Props> = () => (
+  <header className={styles.header}>
+    <Link href="/">
+      <a>
+        <Logo />
+      </a>
+    </Link>
+    <nav className={styles.nav}></nav>
+  </header>
+);

src/components/search.tsx

@@ -0,0 +1,22 @@
+import { FC, useState } from 'react';
+import { SearchInput } from '../elements/search-input';
+import { Toggle } from '../elements/toggle';
+
+const styles = { form: 'flex flex-row justify-center' };
+
+type Props = {
+  className?: string;
+  label?: boolean;
+};
+
+export const Search: FC<Props> = ({ className, label = false }) => {
+  const [type, setType] = useState<'delivery' | 'takeaway'>('delivery');
+
+  return (
+    <form className={[className, styles.form].filter(Boolean).join(' ')}>
+      <Toggle active={type} onChange={(fresh) => setType(fresh)} />
+
+      <SearchInput label={label} />
+    </form>
+  );
+};

src/compositions/vendor-list.tsx

@@ -0,0 +1,188 @@
+import { FC, ReactNode } from 'react';
+import { Tag } from '../elements/tag';
+import { Icon } from '../identity/icon';
+import { BodyText } from '../identity/typography/body-text';
+import { Hyperlink } from '../elements/hyperlink';
+
+const urlRegex = new RegExp(
+  /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/
+);
+
+const emailRegex = new RegExp(
+  /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+);
+
+const phoneRegex = new RegExp(/0(\d{2})\s(\d{3})\s(\d{2})\s(\d{2})/);
+
+const getLink = (el: string): ReactNode => {
+  if (emailRegex.test(el)) {
+    return <Hyperlink href={`mailto:${el}`}>{el}</Hyperlink>;
+  }
+
+  if (urlRegex.test(el)) {
+    return <Hyperlink href={el.startsWith('http') ? el : `http://${el}`}>{el}</Hyperlink>;
+  }
+
+  if (phoneRegex.test(el)) {
+    return <Hyperlink href={`tel:${el}`}>{el}</Hyperlink>;
+  }
+
+  return el;
+};
+
+const styles = {
+  listing: 'rounded-md p-8 flex flex-row bg-white mb-4 shadow-sm box-border',
+  img: 'rounded-md mr-8 h-full flex flex-shrink-0',
+  vendor: 'text-indigo-900 text-lg font-medium',
+  category: '',
+  offer: 'break-word mt-2 mb-8 flex-grow-0',
+  region: 'text-gray-500 fill-current text-base font-light tracking-tight inline-flex flex-row items-center',
+  regionIcon: 'mr-2',
+  tags: 'my-2 flex flex-wrap',
+
+  col: 'flex flex-row w-full box-border',
+  body: 'flex-col w-1/2',
+  attributes: 'flex-col w-1/2 ml-8 box-border',
+
+  infos: 'flex flex-row',
+  infoBox: 'w-1/2',
+
+  attribute: '',
+  key: 'font-medium text-sm text-gray-500',
+  descripton: 'font-medium text-base text-gray-700 break-all mb-4',
+};
+
+type ItemProps = {
+  title: string;
+  tags: string[];
+  region: string;
+  body: string;
+  categories: string[];
+  location?: string[];
+  hours: string[];
+  options: string[];
+  contact: string[];
+};
+
+const VendorItem: FC<ItemProps> = ({ title, tags, region, body, categories, hours, location, options, contact }) => (
+  <li className={styles.listing}>
+    <img
+      className={styles.img}
+      src="https://images.unsplash.com/photo-1532246420286-127bcd803104?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=240&h=180&q=60"
+    />
+
+    <div className={styles.col}>
+      <div className={styles.body}>
+        <h2 className={styles.vendor}>{title} </h2>
+        <div className={styles.tags}>
+          {tags.map((tag) => (
+            <Tag>{tag}</Tag>
+          ))}
+        </div>
+        <h3 className={styles.region}>
+          <Icon className={styles.regionIcon} name="place" size={16} /> {region}
+        </h3>
+
+        <BodyText className={styles.offer}>{body}</BodyText>
+
+        <ul className={styles.infos}>
+          <li className={styles.infoBox}>
+            <strong className={styles.key}>Kategorie</strong>
+            <p className={styles.descripton}>
+              {categories.map((el) => (
+                <>
+                  {el}
+                  <br />
+                </>
+              ))}
+            </p>
+          </li>
+          <li className={styles.infoBox}>
+            <strong className={styles.key}>Zeiten</strong>
+            <p className={styles.descripton}>
+              {hours.map((el) => (
+                <>
+                  {el}
+                  <br />
+                </>
+              ))}
+            </p>
+          </li>
+        </ul>
+      </div>
+      <div className={styles.attributes}>
+        {location && (
+          <div className={styles.attribute}>
+            <strong className={styles.key}>Ort</strong>
+            <p className={styles.descripton}>
+              {location.map((el) => (
+                <>
+                  {el}
+                  <br />
+                </>
+              ))}
+            </p>
+          </div>
+        )}
+        <div className={styles.attribute}>
+          <strong className={styles.key}>Bestellungen via</strong>
+          <p className={styles.descripton}>
+            {options.map((el) => (
+              <>
+                {getLink(el)}
+                <br />
+              </>
+            ))}
+          </p>
+        </div>
+        <div className={styles.attribute}>
+          <strong className={styles.key}>Kontakt</strong>
+          <p className={styles.descripton}>
+            {contact.map((el) => (
+              <>
+                {getLink(el)}
+                <br />
+              </>
+            ))}
+          </p>
+        </div>
+      </div>
+    </div>
+  </li>
+);
+
+type Vendor = {
+  vendor: string;
+  category: string;
+  offer: string;
+  region: string;
+  type: string;
+  hours: string;
+  location: string;
+  order_options: string;
+  contact: string;
+};
+
+type Props = {
+  vendors: Vendor[];
+};
+
+const toArray = (input: string) => input.split(',').map((el) => el.trim());
+
+export const VendorList: FC<Props> = ({ vendors }) => (
+  <ul>
+    {vendors.map(({ vendor, category, contact, hours, location, offer, order_options, region, type }) => (
+      <VendorItem
+        title={vendor}
+        region={region}
+        tags={toArray(type)}
+        body={offer}
+        categories={toArray(category)}
+        hours={toArray(hours)}
+        location={toArray(location)}
+        options={toArray(order_options)}
+        contact={toArray(contact)}
+      />
+    ))}
+  </ul>
+);

src/elements/button.tsx

@@ -0,0 +1,29 @@
+import { FC, MouseEvent, ReactNode } from 'react';
+
+const styles = {
+  button:
+    'px-6 py-4 bg-indigo-500 rounded-full text-white hover:bg-indigo-600 focus:bg-indigo-700 transition-colors duration-200 ease-in-out',
+};
+
+type Props = {
+  children: ReactNode;
+  onClick?: (event: MouseEvent) => void;
+  type?: 'button' | 'reset' | 'submit' | 'link';
+  href?: string;
+};
+
+export const Button: FC<Props> = ({ children, onClick, href, type = 'button' }) => {
+  if (type === 'link') {
+    return (
+      <a href={href} className={styles.button}>
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <button className={styles.button} onClick={onClick} type={type}>
+      {children}
+    </button>
+  );
+};

src/elements/hyperlink.tsx

@@ -0,0 +1,17 @@
+import { FC, ReactNode } from 'react';
+
+const styles = {
+  link: 'text-indigo-500 underline hover:text-indigo-600 active:bg-indigo-700 transition-colors duration-200 ease-in-out',
+};
+
+type Props = {
+  children: ReactNode;
+  href: string;
+  className?: string;
+};
+
+export const Hyperlink: FC<Props> = ({ children, href, className }) => (
+  <a className={[className, styles.link].filter(Boolean).join(' ')} href={href}>
+    {children}
+  </a>
+);