docs: duplicated example#2 & used it as a basis for the responsivenes…

…s example
prevwong · Mar 3, 2024 · a111544 · a111544
1 parent a7142f0
commit a111544
Show file tree

Hide file tree

Showing 50 changed files with 1,072 additions and 0 deletions.
diff --git a/examples/responsive/.babelrc b/examples/responsive/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["inline-react-svg"]
+}
diff --git a/examples/responsive/.gitignore b/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*
diff --git a/examples/responsive/README.md b/examples/responsive/README.md
@@ -0,0 +1,5 @@
+# Landing
+
+This is the source code for the landing page demo 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:
diff --git a/examples/responsive/components/selectors/Button/ButtonSettings.tsx b/examples/responsive/components/selectors/Button/ButtonSettings.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+
+import { ToolbarSection, ToolbarItem } from '../../editor';
+import { ToolbarRadio } from '../../editor/Toolbar/ToolbarRadio';
+
+export const ButtonSettings = () => {
+  return (
+    <React.Fragment>
+      <ToolbarSection
+        title="Colors"
+        props={['background', 'color']}
+        summary={({ background, color }: any) => {
+          return (
+            <div className="flex flex-row-reverse">
+              <div
+                style={{
+                  background:
+                    background && `rgba(${Object.values(background)})`,
+                }}
+                className="shadow-md flex-end w-6 h-6 text-center flex items-center rounded-full bg-black"
+              >
+                <p
+                  style={{
+                    color: color && `rgba(${Object.values(color)})`,
+                  }}
+                  className="text-white w-full text-center"
+                >
+                  T
+                </p>
+              </div>
+            </div>
+          );
+        }}
+      >
+        <ToolbarItem
+          full={true}
+          propKey="background"
+          type="bg"
+          label="Background"
+        />
+        <ToolbarItem full={true} propKey="color" type="color" label="Text" />
+      </ToolbarSection>
+      <ToolbarSection
+        title="Margin"
+        props={['margin']}
+        summary={({ margin }: any) => {
+          return `${margin[0] || 0}px ${margin[1] || 0}px ${margin[2] || 0}px ${
+            margin[3] || 0
+          }px`;
+        }}
+      >
+        <ToolbarItem propKey="margin" index={0} type="slider" label="Top" />
+        <ToolbarItem propKey="margin" index={1} type="slider" label="Right" />
+        <ToolbarItem propKey="margin" index={2} type="slider" label="Bottom" />
+        <ToolbarItem propKey="margin" index={3} type="slider" label="Left" />
+      </ToolbarSection>
+      <ToolbarSection title="Decoration">
+        <ToolbarItem propKey="buttonStyle" type="radio" label="Style">
+          <ToolbarRadio value="full" label="Full" />
+          <ToolbarRadio value="outline" label="Outline" />
+        </ToolbarItem>
+      </ToolbarSection>
+    </React.Fragment>
+  );
+};
diff --git a/examples/responsive/components/selectors/Button/index.tsx b/examples/responsive/components/selectors/Button/index.tsx
@@ -0,0 +1,73 @@
+import { UserComponent, useNode } from '@craftjs/core';
+import cx from 'classnames';
+import React from 'react';
+import styled from 'styled-components';
+
+import { ButtonSettings } from './ButtonSettings';
+
+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',
+    },
+  },
+  related: {
+    toolbar: ButtonSettings,
+  },
+};
diff --git a/examples/responsive/components/selectors/Container/ContainerSettings.tsx b/examples/responsive/components/selectors/Container/ContainerSettings.tsx
@@ -0,0 +1,125 @@
+import React from 'react';
+
+import { ToolbarSection, ToolbarItem } from '../../editor';
+import { ToolbarRadio } from '../../editor/Toolbar/ToolbarRadio';
+
+export const ContainerSettings = () => {
+  return (
+    <React.Fragment>
+      <ToolbarSection
+        title="Dimensions"
+        props={['width', 'height']}
+        summary={({ width, height }: any) => {
+          return `${width || 0} x ${height || 0}`;
+        }}
+      >
+        <ToolbarItem propKey="width" type="text" label="Width" />
+        <ToolbarItem propKey="height" type="text" label="Height" />
+      </ToolbarSection>
+      <ToolbarSection
+        title="Colors"
+        props={['background', 'color']}
+        summary={({ background, color }: any) => {
+          return (
+            <div className="flex flex-row-reverse">
+              <div
+                style={{
+                  background:
+                    background && `rgba(${Object.values(background)})`,
+                }}
+                className="shadow-md flex-end w-6 h-6 text-center flex items-center rounded-full bg-black"
+              >
+                <p
+                  style={{
+                    color: color && `rgba(${Object.values(color)})`,
+                  }}
+                  className="text-white w-full text-center"
+                >
+                  T
+                </p>
+              </div>
+            </div>
+          );
+        }}
+      >
+        <ToolbarItem
+          full={true}
+          propKey="background"
+          type="bg"
+          label="Background"
+        />
+        <ToolbarItem full={true} propKey="color" type="color" label="Text" />
+      </ToolbarSection>
+      <ToolbarSection
+        title="Margin"
+        props={['margin']}
+        summary={({ margin }: any) => {
+          return `${margin[0] || 0}px ${margin[1] || 0}px ${margin[2] || 0}px ${
+            margin[3] || 0
+          }px`;
+        }}
+      >
+        <ToolbarItem propKey="margin" index={0} type="slider" label="Top" />
+        <ToolbarItem propKey="margin" index={1} type="slider" label="Right" />
+        <ToolbarItem propKey="margin" index={2} type="slider" label="Bottom" />
+        <ToolbarItem propKey="margin" index={3} type="slider" label="Left" />
+      </ToolbarSection>
+      <ToolbarSection
+        title="Padding"
+        props={['padding']}
+        summary={({ padding }: any) => {
+          return `${padding[0] || 0}px ${padding[1] || 0}px ${
+            padding[2] || 0
+          }px ${padding[3] || 0}px`;
+        }}
+      >
+        <ToolbarItem propKey="padding" index={0} type="slider" label="Top" />
+        <ToolbarItem propKey="padding" index={1} type="slider" label="Right" />
+        <ToolbarItem propKey="padding" index={2} type="slider" label="Bottom" />
+        <ToolbarItem propKey="padding" index={3} type="slider" label="Left" />
+      </ToolbarSection>
+      <ToolbarSection title="Decoration" props={['radius', 'shadow']}>
+        <ToolbarItem
+          full={true}
+          propKey="radius"
+          type="slider"
+          label="Radius"
+        />
+        <ToolbarItem
+          full={true}
+          propKey="shadow"
+          type="slider"
+          label="Shadow"
+        />
+      </ToolbarSection>
+      <ToolbarSection title="Alignment">
+        <ToolbarItem
+          propKey="flexDirection"
+          type="radio"
+          label="Flex Direction"
+        >
+          <ToolbarRadio value="row" label="Row" />
+          <ToolbarRadio value="column" label="Column" />
+        </ToolbarItem>
+        <ToolbarItem propKey="fillSpace" type="radio" label="Fill space">
+          <ToolbarRadio value="yes" label="Yes" />
+          <ToolbarRadio value="no" label="No" />
+        </ToolbarItem>
+        <ToolbarItem propKey="alignItems" type="radio" label="Align Items">
+          <ToolbarRadio value="flex-start" label="Flex start" />
+          <ToolbarRadio value="center" label="Center" />
+          <ToolbarRadio value="flex-end" label="Flex end" />
+        </ToolbarItem>
+        <ToolbarItem
+          propKey="justifyContent"
+          type="radio"
+          label="Justify Content"
+        >
+          <ToolbarRadio value="flex-start" label="Flex start" />
+          <ToolbarRadio value="center" label="Center" />
+          <ToolbarRadio value="flex-end" label="Flex end" />
+        </ToolbarItem>
+      </ToolbarSection>
+    </React.Fragment>
+  );
+};
diff --git a/examples/responsive/components/selectors/Container/index.tsx b/examples/responsive/components/selectors/Container/index.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+
+import { ContainerSettings } from './ContainerSettings';
+
+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,
+  },
+  related: {
+    toolbar: ContainerSettings,
+  },
+};