change editor with @cesdk/cesdk-js

Author: softcodenet

.editorconfig

@@ -0,0 +1,23 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+
+# Matches multiple files with brace expansion notation
+# Set default charset
+# 4 space indentation
+[*.{js,jsx,ts,tsx}]
+indent_style = space
+indent_size = 2
+
+# Matches the exact files either package.json or .travis.yml
+[{package.json,.travis.yml}]
+indent_style = space
+indent_size = 2
+

.env.example

@@ -0,0 +1,3 @@
+NEXT_PUBLIC_SUPABASE_URL=supabase_url
+NEXT_PUBLIC_SUPABASE_ANON_KEY=supabase_key
+NEXT_PUBLIC_GOOGLE_FONTS_API_KEY=google_font_api_key

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files
+.env*
+!.env.example
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+/test-results/
+/playwright-report/
+/playwright/.cache/
+/tests/.auth/

.nvmrc

@@ -0,0 +1 @@
+v18.13.0

.prettierignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "trailingCommas": "es5",
+  "semi": true,
+  "singleQuote": false
+}

README.md

@@ -0,0 +1,61 @@
+# FlapJack Editor
+
+Menu editor.
+
+## Requirements
+
+This project uses [Supabase](https://supabase.com/) for the database.
+
+To be able to run this project, make sure you have these installed on your local machine:
+
+- [Node](https://nodejs.org/en)
+- [Docker](https://docs.docker.com/engine/install/)
+- [Yarn](https://classic.yarnpkg.com/lang/en/docs/install/#debian-stable) as the package manager
+
+## Available Commands
+
+### `yarn dev`
+
+Run the development server.
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+### `yarn db:start`
+
+Start the local database.
+
+To start the local database, make sure you have **docker-daemon** running.
+
+After starting the local database, you can go to [localhost:54323](http://localhost:54323) to interract with the supabase interface.
+
+Then create a `.env.development` file following the structure of the [.env.example](./.env.example) and update the `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY` with the keys you got.
+
+### `yarn db:stop`
+
+Stop the local database.
+
+All the data you have added to the database will be deleted.
+
+If you want to persist your newly added data, run
+
+```bash
+yarn db:stop --backup
+```
+
+### `yarn test:e2e`
+
+Run all the end-to-end tests.
+
+Requires to start the database before running the tests.
+
+### `yarn test:e2e:headless`
+
+Test the application without the UI.
+
+Requires to start the database before running the tests.

components/AuthDialog.tsx

@@ -0,0 +1,136 @@
+import { Modal, Grid, Stack, Text, Flex } from "@mantine/core";
+import { Auth, ThemeSupa } from "@supabase/auth-ui-react";
+import { useSupabaseClient } from "@supabase/auth-helpers-react";
+import { useRouter } from "next/router";
+import Image from 'next/image'
+import theme from "../config/theme";
+
+interface IAuthDialogProps {
+  opened: boolean;
+  onClose: () => void;
+}
+type ValuePropProps = {
+  number: number
+  title: string
+  description: string
+}
+
+const ValueProp = ({ number, title, description }: ValuePropProps) => {
+  return (
+    <Flex>
+      <div style={{
+        border: 'solid 2px #C1C2C5',
+        borderRadius: "100px",
+        width: '30px',
+        height: '30px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}>
+        <Text
+          color={theme.colors.yellow[9]}
+        >{number}</Text>
+      </div>
+      <div style={{ marginLeft: '10px' }}>
+        <Text
+          color={theme.colors.dark[3]}
+        >{title}</Text>
+        <Text
+          fz={theme.fontSizes.xs}
+          color={theme.colors.dark[1]}
+        >{description}</Text>
+      </div>
+    </Flex >
+  )
+}
+const SalesContent = () => {
+  return (
+    <Stack>
+      <Image
+        src="/upsell-image-small.png"
+        width={500}
+        height={300}
+        alt="this is the alt text"
+        placeholder="blur"
+        blurDataURL="/upsell-image-blur.jpg"
+      />
+      <Text
+        align="center"
+        fz="xl"
+        weight={300}
+        color="#343A40"
+      >Your Menu is Almost Ready to Use</Text>
+      <Stack>
+        <ValueProp number={1} title="Save Your Work" description="Keep your menu up to date" />
+        <ValueProp number={2} title="Unlimited downloads" description="Get unlimited high-res and watermark-free downloads" />
+        <ValueProp number={3} title="Endless Designs" description="Unlock access to the most beautiful catalog of menus online" />
+      </Stack>
+    </Stack>
+  )
+}
+
+const AuthDialog = ({ opened, onClose }: IAuthDialogProps) => {
+  const supabase = useSupabaseClient();
+  const router = useRouter();
+  const origin = typeof window !== 'undefined' && window.location.origin ? window.location.origin : '';
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      size="xl"
+      radius="md"
+      withCloseButton={false}
+      padding={8}
+      centered={true}
+    >
+      <Grid>
+        <Grid.Col
+          span={6}
+          bg={theme.colors.gray[1]}
+          sx={{ borderRadius: '8px 0 0 8px' }}
+          p="xl"
+        >
+          <SalesContent />
+        </Grid.Col>
+        <Grid.Col
+          span={6}
+          bg={"#fff"}
+          p="xl"
+          sx={{ borderRadius: '0 8px 8px 0' }}
+        >
+          <Auth
+            redirectTo={`${origin}${router.asPath}`}
+            supabaseClient={supabase}
+            appearance={{
+              theme: ThemeSupa,
+              variables: {
+                default: {
+                  colors: {
+                    brand: 'orange',
+                    brandAccent: 'darkOrange',
+                  },
+                },
+              },
+            }}
+            providers={["google", "facebook"]}
+            magicLink
+            view="sign_up"
+            localization={{
+              variables: {
+                sign_up: {
+                  social_provider_text: 'Sign up with',
+                },
+              },
+            }}
+
+          />
+          <Text fz="6pt" ta="center" color={theme.colors.dark[0]} lh="12px">By providing us with your information you are consenting to the collection and use
+            of vour information in accordance with our <a href="https://www.flapjack.co/terms-of-use">Terms of Service</a> and <a href="https://www.flapjack.co/privacy-policy">Privacy Policy</a>.</Text>
+        </Grid.Col>
+      </Grid>
+    </Modal>
+  );
+};
+
+export default AuthDialog;