chore: Add prettier config (#87)

* chore: update stable docs

* Adds prettier config

* Fix wrong tab width

* Brings back semis

Co-authored-by: Prev Wong <prevwong@gmail.com>

.github/workflows/pull-request.yml

@@ -24,4 +24,4 @@ jobs:
         run: yarn build
 
       - name: Run tests
-        run: yarn test
+        run: yarn test

.github/workflows/release.yml

@@ -20,4 +20,4 @@ jobs:
           node-version: 10.x
 
       - run: yarn install --frozen-lockfile
-      - run: yarn release
+      - run: yarn release

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "singleQuote": true
+}

config.js

@@ -1,19 +1,19 @@
 module.exports = {
   url: {
     production: {
-      LANDING: "https://craft.js.org/",
-      DOCUMENTATION: "https://craft.js.org/r/docs/overview/",
-      BASIC_EXAMPLE: "https://craft.js.org/examples/basic/",
+      LANDING: 'https://craft.js.org/',
+      DOCUMENTATION: 'https://craft.js.org/r/docs/overview/',
+      BASIC_EXAMPLE: 'https://craft.js.org/examples/basic/',
     },
     staging: {
-      LANDING: "https://craftjs.netlify.com/",
-      DOCUMENTATION: "https://craftjs.netlify.com/r/docs/overview/",
-      BASIC_EXAMPLE: "https://craftjs.netlify.com/examples/basic/",
+      LANDING: 'https://craftjs.netlify.com/',
+      DOCUMENTATION: 'https://craftjs.netlify.com/r/docs/overview/',
+      BASIC_EXAMPLE: 'https://craftjs.netlify.com/examples/basic/',
     },
     development: {
-      LANDING: "http://localhost:3001/",
-      DOCUMENTATION: "http://localhost:3000/r/docs/overview/",
-      BASIC_EXAMPLE: "http://localhost:3002/",
+      LANDING: 'http://localhost:3001/',
+      DOCUMENTATION: 'http://localhost:3000/r/docs/overview/',
+      BASIC_EXAMPLE: 'http://localhost:3002/',
     },
-  }[process.env.ENV || "development"],
+  }[process.env.ENV || 'development'],
 };

jest/setup.js

@@ -1,4 +1,4 @@
-const Enzyme = require("enzyme");
-const Adapter = require("enzyme-adapter-react-16");
+const Enzyme = require('enzyme');
+const Adapter = require('enzyme-adapter-react-16');
 
 Enzyme.configure({ adapter: new Adapter() });

lerna.json

@@ -1,9 +1,6 @@
 {
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "packages": [
-    "packages/*",
-    "packages/examples/*"
-  ],
+  "packages": ["packages/*", "packages/examples/*"],
   "version": "0.1.0-beta.7"
 }

packages/core/rollup.config.js

@@ -1,6 +1,6 @@
-import config from "../../rollup.config";
+import config from '../../rollup.config';
 
 export default {
   ...config,
-  input: "./src/index.tsx",
+  input: './src/index.tsx',
 };

packages/core/src/editor/Editor.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect } from "react";
+import React, { useEffect } from 'react';
 
-import { Options } from "../interfaces";
-import { Events } from "../events";
+import { Options } from '../interfaces';
+import { Events } from '../events';
 
-import { useEditorStore } from "./store";
-import { EditorContext } from "./EditorContext";
+import { useEditorStore } from './store';
+import { EditorContext } from './EditorContext';
 
 export const withDefaults = (options: Partial<Options> = {}) => ({
   onNodesChange: () => null,
@@ -13,8 +13,8 @@ export const withDefaults = (options: Partial<Options> = {}) => ({
   nodes: null,
   enabled: true,
   indicator: {
-    error: "red",
-    success: "rgb(98, 196, 98)",
+    error: 'red',
+    success: 'rgb(98, 196, 98)',
   },
   ...options,
 });

packages/core/src/editor/EditorContext.tsx

@@ -1,5 +1,5 @@
-import { createContext } from "react";
-import { EditorStore } from "./store";
+import { createContext } from 'react';
+import { EditorStore } from './store';
 
 export type EditorContext = EditorStore;
 export const EditorContext = createContext<EditorContext>({} as EditorContext);

packages/core/src/editor/NodeHelpers.ts

@@ -1,5 +1,5 @@
-import { EditorState, Node, NodeId } from "@craftjs/core";
-import invariant from "tiny-invariant";
+import { EditorState, Node, NodeId } from '@craftjs/core';
+import invariant from 'tiny-invariant';
 import {
   deprecationWarning,
   ERROR_CANNOT_DRAG,
@@ -12,19 +12,19 @@ import {
   ERROR_MOVE_TO_NONCANVAS_PARENT,
   ERROR_MOVE_TOP_LEVEL_NODE,
   ROOT_NODE,
-} from "@craftjs/utils";
-import { serializeNode } from "../utils/serializeNode";
-import { mergeTrees } from "../utils/mergeTrees";
+} from '@craftjs/utils';
+import { serializeNode } from '../utils/serializeNode';
+import { mergeTrees } from '../utils/mergeTrees';
 
 export function NodeHelpers(state: EditorState, id: NodeId) {
-  invariant(typeof id == "string", ERROR_INVALID_NODE_ID);
+  invariant(typeof id == 'string', ERROR_INVALID_NODE_ID);
 
   const node = state.nodes[id];
 
   const nodeHelpers = (id) => NodeHelpers(state, id);
 
   const getNodeFromIdOrNode = (node: NodeId | Node) =>
-    typeof node === "string" ? state.nodes[node] : node;
+    typeof node === 'string' ? state.nodes[node] : node;
 
   return {
     isCanvas() {
@@ -47,8 +47,8 @@ export function NodeHelpers(state: EditorState, id: NodeId) {
     },
     isParentOfTopLevelNodes: () => !!node.data.linkedNodes,
     isParentOfTopLevelCanvas() {
-      deprecationWarning("query.node(id).isParentOfTopLevelCanvas", {
-        suggest: "query.node(id).isParentOfTopLevelNodes",
+      deprecationWarning('query.node(id).isParentOfTopLevelCanvas', {
+        suggest: 'query.node(id).isParentOfTopLevelNodes',
       });
       return this.isParentOfTopLevelNodes();
     },
@@ -142,12 +142,12 @@ export function NodeHelpers(state: EditorState, id: NodeId) {
       }
     },
     isDroppable(target: NodeId | Node, onError?: (err: string) => void) {
-      const isNewNode = typeof target == "object" && !state.nodes[target.id];
+      const isNewNode = typeof target == 'object' && !state.nodes[target.id];
       const targetNode = getNodeFromIdOrNode(target),
         newParentNode = node;
       try {
         //  If target is a NodeId (thus it's already in the state), check if it's a top-level node
-        if (typeof target === "string") {
+        if (typeof target === 'string') {
           invariant(
             !nodeHelpers(target).isTopLevelNode(),
             ERROR_MOVE_TOP_LEVEL_NODE
@@ -215,8 +215,8 @@ export function NodeHelpers(state: EditorState, id: NodeId) {
      **/
 
     decendants(deep = false) {
-      deprecationWarning("query.node(id).decendants", {
-        suggest: "query.node(id).descendants",
+      deprecationWarning('query.node(id).decendants', {
+        suggest: 'query.node(id).descendants',
       });
       return this.descendants(deep);
     },

packages/core/src/editor/actions.ts

@@ -8,7 +8,7 @@ import {
   NodeEvents,
   NodeTree,
   SerializedNodes,
-} from "../interfaces";
+} from '../interfaces';
 import {
   deprecationWarning,
   ERROR_INVALID_NODEID,
@@ -17,12 +17,12 @@ import {
   QueryCallbacksFor,
   ERROR_NOPARENT,
   ERROR_DELETE_TOP_LEVEL_NODE,
-} from "@craftjs/utils";
-import { QueryMethods } from "./query";
-import { fromEntries } from "../utils/fromEntries";
-import { updateEventsNode } from "../utils/updateEventsNode";
-import invariant from "tiny-invariant";
-import { editorInitialState } from "./store";
+} from '@craftjs/utils';
+import { QueryMethods } from './query';
+import { fromEntries } from '../utils/fromEntries';
+import { updateEventsNode } from '../utils/updateEventsNode';
+import invariant from 'tiny-invariant';
+import { editorInitialState } from './store';
 
 export const Actions = (
   state: EditorState,
@@ -41,7 +41,7 @@ export const Actions = (
     }
 
     if (parent.data.props.children) {
-      delete parent.data.props["children"];
+      delete parent.data.props['children'];
     }
 
     if (index != null) {
@@ -122,8 +122,8 @@ export const Actions = (
       // TODO: Deprecate adding array of Nodes to keep implementation simpler
       let nodes = [nodeToAdd];
       if (Array.isArray(nodeToAdd)) {
-        deprecationWarning("actions.add(node: Node[])", {
-          suggest: "actions.add(node: Node)",
+        deprecationWarning('actions.add(node: Node[])', {
+          suggest: 'actions.add(node: Node)',
         });
         nodes = nodeToAdd;
       }
@@ -145,7 +145,7 @@ export const Actions = (
       if (!parentId) {
         invariant(
           tree.rootNodeId === ROOT_NODE,
-          "Cannot add non-root Node without a parent"
+          'Cannot add non-root Node without a parent'
         );
         state.nodes[tree.rootNodeId] = node;
       }
@@ -176,7 +176,7 @@ export const Actions = (
 
     deserialize(input: SerializedNodes | string) {
       const dehydratedNodes =
-        typeof input == "string" ? JSON.parse(input) : input;
+        typeof input == 'string' ? JSON.parse(input) : input;
 
       const nodePairs = Object.keys(dehydratedNodes).map((id) => {
         let nodeId = id;
@@ -212,7 +212,7 @@ export const Actions = (
       const currentParent = state.nodes[currentParentId],
         currentParentNodes = currentParent.data.nodes!;
 
-      currentParentNodes[currentParentNodes.indexOf(targetId)] = "marked";
+      currentParentNodes[currentParentNodes.indexOf(targetId)] = 'marked';
 
       if (newParentNodes) {
         newParentNodes.splice(index, 0, targetId);
@@ -222,7 +222,7 @@ export const Actions = (
 
       state.nodes[targetId].data.parent = newParentId;
       state.nodes[targetId].data.index = index;
-      currentParentNodes.splice(currentParentNodes.indexOf("marked"), 1);
+      currentParentNodes.splice(currentParentNodes.indexOf('marked'), 1);
     },
 
     replaceNodes(nodes: Nodes) {
@@ -272,7 +272,7 @@ export const Actions = (
      */
     setCustom<T extends NodeId>(
       id: T,
-      cb: (data: EditorState["nodes"][T]["data"]["custom"]) => void
+      cb: (data: EditorState['nodes'][T]['data']['custom']) => void
     ) {
       cb(state.nodes[id].data.custom);
     },

packages/core/src/editor/index.tsx

@@ -1 +1 @@
-export * from "./Editor";
+export * from './Editor';

packages/core/src/editor/query.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 import {
   NodeId,
   EditorState,
@@ -9,23 +9,23 @@ import {
   NodeTree,
   SerializedNodes,
   SerializedNode,
-} from "../interfaces";
-import invariant from "tiny-invariant";
+} from '../interfaces';
+import invariant from 'tiny-invariant';
 import {
   QueryCallbacksFor,
   ERROR_NOT_IN_RESOLVER,
   getDOMInfo,
   deprecationWarning,
   DEPRECATED_ROOT_NODE,
   ROOT_NODE,
-} from "@craftjs/utils";
-import findPosition from "../events/findPosition";
-import { parseNodeFromJSX } from "../utils/parseNodeFromJSX";
-import { fromEntries } from "../utils/fromEntries";
-import { mergeTrees } from "../utils/mergeTrees";
-import { resolveComponent } from "../utils/resolveComponent";
-import { deserializeNode } from "../utils/deserializeNode";
-import { NodeHelpers } from "./NodeHelpers";
+} from '@craftjs/utils';
+import findPosition from '../events/findPosition';
+import { parseNodeFromJSX } from '../utils/parseNodeFromJSX';
+import { fromEntries } from '../utils/fromEntries';
+import { mergeTrees } from '../utils/mergeTrees';
+import { resolveComponent } from '../utils/resolveComponent';
+import { deserializeNode } from '../utils/deserializeNode';
+import { NodeHelpers } from './NodeHelpers';
 
 export function QueryMethods(state: EditorState) {
   const options = state && state.options;
@@ -45,7 +45,7 @@ export function QueryMethods(state: EditorState) {
         state.nodes[node.id].dom
     ) => {
       if (source === target) return;
-      const sourceNodeFromId = typeof source == "string" && state.nodes[source],
+      const sourceNodeFromId = typeof source == 'string' && state.nodes[source],
         targetNode = state.nodes[target],
         isTargetCanvas = _().node(targetNode.id).isCanvas();
 

packages/core/src/editor/store.tsx

@@ -1,6 +1,6 @@
-import { useMethods, SubscriberAndCallbacksFor } from "@craftjs/utils";
-import { Actions } from "./actions";
-import { QueryMethods } from "./query";
+import { useMethods, SubscriberAndCallbacksFor } from '@craftjs/utils';
+import { Actions } from './actions';
+import { QueryMethods } from './query';
 
 export type EditorStore = SubscriberAndCallbacksFor<typeof Actions>;
 

packages/core/src/editor/tests/Editor.test.tsx

@@ -1,16 +1,16 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { act } from "react-dom/test-utils";
+import React from 'react';
+import { shallow } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 
-import { EditorContext } from "../EditorContext";
-import { Editor } from "../Editor";
-import { Events } from "../../events";
-import { useEditorStore } from "../store";
+import { EditorContext } from '../EditorContext';
+import { Editor } from '../Editor';
+import { Events } from '../../events';
+import { useEditorStore } from '../store';
 
-jest.mock("../store");
+jest.mock('../store');
 const mockStore = useEditorStore as jest.Mock<any>;
 
-describe("<Editor />", () => {
+describe('<Editor />', () => {
   const children = <h1>a children</h1>;
   let actions;
   let component;
@@ -20,7 +20,7 @@ describe("<Editor />", () => {
   beforeEach(() => {
     React.useEffect = (f) => f();
 
-    query = { serialize: jest.fn().mockImplementation(() => "{}") };
+    query = { serialize: jest.fn().mockImplementation(() => '{}') };
     onStateChange = jest.fn();
     mockStore.mockImplementation((value) => ({ ...value, query, actions }));
     act(() => {
@@ -29,10 +29,10 @@ describe("<Editor />", () => {
       );
     });
   });
-  it("should render the children with events", () => {
+  it('should render the children with events', () => {
     expect(component.contains(<Events>{children}</Events>)).toBe(true);
   });
-  it("should render the EditorContext.Provider", () => {
+  it('should render the EditorContext.Provider', () => {
     expect(component.find(EditorContext.Provider)).toHaveLength(1);
   });