Docs: Guide to Creating Responsive Builder's

examples/responsive/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["inline-react-svg"]
+}

examples/responsive/.gitignore

@@ -0,0 +1,25 @@
+# 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
+.env*
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

examples/responsive/README.md

@@ -0,0 +1,5 @@
+# Responsive Design Example
+
+This is the source code for the responsive guide seen [here](https://craft.js.org/)
+
+> The code is admittedly a bit messy and is scheduled for a clean up. In the mean time, feel free to submit an issue if you encounter any confusing/weird/wtf bits ... or even better, submit a pull request! :clap:

examples/responsive/components/selectors/Button/index.tsx

@@ -0,0 +1,68 @@
+import { UserComponent, useNode } from '@craftjs/core';
+import cx from 'classnames';
+import React from 'react';
+import styled from 'styled-components';
+
+import { Text } from '../Text';
+
+type ButtonProps = {
+  background?: Record<'r' | 'g' | 'b' | 'a', number>;
+  color?: Record<'r' | 'g' | 'b' | 'a', number>;
+  buttonStyle?: string;
+  margin?: any[];
+  text?: string;
+  textComponent?: any;
+};
+
+const StyledButton = styled.button<ButtonProps>`
+  background: ${(props) =>
+    props.buttonStyle === 'full'
+      ? `rgba(${Object.values(props.background)})`
+      : 'transparent'};
+  border: 2px solid transparent;
+  border-color: ${(props) =>
+    props.buttonStyle === 'outline'
+      ? `rgba(${Object.values(props.background)})`
+      : 'transparent'};
+  margin: ${({ margin }) =>
+    `${margin[0]}px ${margin[1]}px ${margin[2]}px ${margin[3]}px`};
+`;
+
+export const Button: UserComponent<ButtonProps> = (props: any) => {
+  const {
+    connectors: { connect },
+  } = useNode((node) => ({
+    selected: node.events.selected,
+  }));
+
+  const { text, textComponent, color, ...otherProps } = props;
+  return (
+    <StyledButton
+      ref={connect}
+      className={cx([
+        'rounded w-full px-4 py-2',
+        {
+          'shadow-lg': props.buttonStyle === 'full',
+        },
+      ])}
+      {...otherProps}
+    >
+      <Text {...textComponent} text={text} color={props.color} />
+    </StyledButton>
+  );
+};
+
+Button.craft = {
+  displayName: 'Button',
+  props: {
+    background: { r: 255, g: 255, b: 255, a: 0.5 },
+    color: { r: 92, g: 90, b: 90, a: 1 },
+    buttonStyle: 'full',
+    text: 'Button',
+    margin: ['5', '0', '5', '0'],
+    textComponent: {
+      ...Text.craft.props,
+      textAlign: 'center',
+    },
+  },
+};

examples/responsive/components/selectors/Container/index.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+
+export type ContainerProps = {
+  background: Record<'r' | 'g' | 'b' | 'a', number>;
+  color: Record<'r' | 'g' | 'b' | 'a', number>;
+  flexDirection: string;
+  alignItems: string;
+  justifyContent: string;
+  fillSpace: string;
+  width: string;
+  height: string;
+  padding: string[];
+  margin: string[];
+  marginTop: number;
+  marginLeft: number;
+  marginBottom: number;
+  marginRight: number;
+  shadow: number;
+  children: React.ReactNode;
+  radius: number;
+};
+
+const defaultProps = {
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  justifyContent: 'flex-start',
+  fillSpace: 'no',
+  padding: ['0', '0', '0', '0'],
+  margin: ['0', '0', '0', '0'],
+  background: { r: 255, g: 255, b: 255, a: 1 },
+  color: { r: 0, g: 0, b: 0, a: 1 },
+  shadow: 0,
+  radius: 0,
+  width: '100%',
+  height: 'auto',
+};
+
+export const Container = (props: Partial<ContainerProps>) => {
+  props = {
+    ...defaultProps,
+    ...props,
+  };
+  const {
+    // flexDirection,
+    // alignItems,
+    // justifyContent,
+    // fillSpace,
+    background,
+    // color,
+    // padding,
+    // margin,
+    shadow,
+    // radius,
+    children,
+  } = props;
+  return (
+    <div
+      style={{
+        // justifyContent,
+        // flexDirection,
+        // alignItems,
+        background: `rgba(${Object.values(background)})`,
+        // color: `rgba(${Object.values(color)})`,
+        // padding: `${padding[0]}px ${padding[1]}px ${padding[2]}px ${padding[3]}px`,
+        // margin: `${margin[0]}px ${margin[1]}px ${margin[2]}px ${margin[3]}px`,
+        boxShadow:
+          shadow === 0
+            ? 'none'
+            : `0px 3px 100px ${shadow}px rgba(0, 0, 0, 0.13)`,
+        // borderRadius: `${radius}px`,
+        // flex: fillSpace === 'yes' ? 1 : 'unset',
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+Container.craft = {
+  displayName: 'Container',
+  props: defaultProps,
+  rules: {
+    canDrag: () => true,
+  },
+};

examples/responsive/components/selectors/Text/index.tsx

@@ -0,0 +1,64 @@
+import { useNode, useEditor } from '@craftjs/core';
+import React from 'react';
+import ContentEditable from 'react-contenteditable';
+
+export type TextProps = {
+  fontSize: string;
+  textAlign: string;
+  fontWeight: string;
+  color: Record<'r' | 'g' | 'b' | 'a', string>;
+  shadow: number;
+  text: string;
+  margin: [string, string, string, string];
+};
+
+export const Text = ({
+  fontSize,
+  textAlign,
+  fontWeight,
+  color,
+  shadow,
+  text,
+  margin,
+}: Partial<TextProps>) => {
+  const {
+    connectors: { connect },
+    setProp,
+  } = useNode();
+  const { enabled } = useEditor((state) => ({
+    enabled: state.options.enabled,
+  }));
+  return (
+    <ContentEditable
+      innerRef={connect}
+      html={text} // innerHTML of the editable div
+      disabled={!enabled}
+      onChange={(e) => {
+        setProp((prop) => (prop.text = e.target.value), 500);
+      }} // use true to disable editing
+      tagName="h2" // Use a custom HTML tag (uses a div by default)
+      style={{
+        width: '100%',
+        margin: `${margin[0]}px ${margin[1]}px ${margin[2]}px ${margin[3]}px`,
+        color: `rgba(${Object.values(color)})`,
+        fontSize: `${fontSize}px`,
+        textShadow: `0px 0px 2px rgba(0,0,0,${(shadow || 0) / 100})`,
+        fontWeight,
+        textAlign,
+      }}
+    />
+  );
+};
+
+Text.craft = {
+  displayName: 'Text',
+  props: {
+    fontSize: '15',
+    textAlign: 'left',
+    fontWeight: '500',
+    color: { r: 92, g: 90, b: 90, a: 1 },
+    margin: [0, 0, 0, 0],
+    shadow: 0,
+    text: 'Text',
+  },
+};

examples/responsive/components/selectors/index.ts

@@ -0,0 +1,2 @@
+export * from './Container';
+export * from './Text';

examples/responsive/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/responsive/next.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  assetPrefix:
+    process.env.NODE_ENV === 'production' ? '/examples/landing' : '/',
+};

examples/responsive/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "example-responsive",
+  "version": "0.2.0",
+  "private": true,
+  "scripts": {
+    "start": "next dev -p 3002",
+    "build": "next build",
+    "export": "next export",
+    "clean": "rimraf lib .next out dist"
+  },
+  "dependencies": {
+    "@craftjs/core": "workspace:*",
+    "@craftjs/layers": "workspace:*",
+    "@material-ui/core": "4.5.2",
+    "@material-ui/icons": "4.5.1",
+    "autoprefixer": "latest",
+    "classnames": "2.2.6",
+    "cssnano": "4.1.10",
+    "debounce": "1.2.0",
+    "lzutf8": "0.5.5",
+    "next": "13.1.6",
+    "next-seo": "4.24.0",
+    "postcss": "latest",
+    "re-resizable": "6.1.0",
+    "react": "18.2.0",
+    "react-color": "2.17.3",
+    "react-contenteditable": "3.3.2",
+    "react-dom": "18.2.0",
+    "react-frame-component": "^5.2.6",
+    "react-loading": "2.0.3",
+    "react-rnd": "10.1.1",
+    "react-youtube": "7.9.0",
+    "styled-components": "4.4.1"
+  },
+  "devDependencies": {
+    "@babel/core": "7.7.5",
+    "@fullhuman/postcss-purgecss": "1.3.0",
+    "@types/classnames": "2.2.9",
+    "@types/node": "12.12.5",
+    "@types/react": "18.0.27",
+    "@types/react-color": "3.0.1",
+    "@types/styled-components": "4.4.1",
+    "babel-plugin-inline-react-svg": "2.0.1",
+    "cross-env": "6.0.3",
+    "postcss-import": "12.0.1",
+    "postcss-preset-env": "6.7.0",
+    "tailwindcss": "latest",
+    "typescript": "4.9.5"
+  }
+}

examples/responsive/pages/_app.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import '../styles/app.css';
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}
+
+// Only uncomment this method if you have blocking data requirements for
+// every single page in your application. This disables the ability to
+// perform automatic static optimization, causing every page in your app to
+// be server-side rendered.
+//
+// MyApp.getInitialProps = async (appContext) => {
+//   // calls page's `getInitialProps` and fills `appProps.pageProps`
+//   const appProps = await App.getInitialProps(appContext);
+//
+//   return { ...appProps }
+// }
+
+export default MyApp;

examples/responsive/pages/_document.tsx

@@ -0,0 +1,32 @@
+import Document, { DocumentContext, DocumentInitialProps } from 'next/document';
+import { ServerStyleSheet } from 'styled-components';
+
+export default class MyDocument extends Document {
+  static async getInitialProps(
+    ctx: DocumentContext
+  ): Promise<DocumentInitialProps> {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
+        });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+}