{"_id":"@akasha-platform/vendure-craftjs","_rev":"2-70f34eb000c16b5f6eb72188b9254c83","name":"@akasha-platform/vendure-craftjs","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.2":{"name":"@akasha-platform/vendure-craftjs","version":"0.0.2","description":"A set of hooks and components to provide components that interact with vendure and can be integrated into craftjs.","main":"build/index.js","module":"build/index.es.js","author":{"name":"Khair-ed-Din Husseini","email":"akasha-platform@protonmail.com"},"license":"MIT","private":false,"devDependencies":{"@apollo/client":"^3.3.4","@babel/core":"^7.11.6","@graphql-codegen/cli":"1.19.4","@graphql-codegen/typescript":"^1.19.0","@graphql-codegen/typescript-operations":"1.17.12","@graphql-codegen/typescript-react-apollo":"2.2.1","@rollup/plugin-commonjs":"^15.1.0","@rollup/plugin-json":"^4.1.0","@rollup/plugin-node-resolve":"^9.0.0","@storybook/addon-actions":"^6.0.26","@storybook/addon-essentials":"^6.0.26","@storybook/addon-links":"^6.0.26","@storybook/preset-typescript":"3.0.0","@storybook/react":"^6.0.26","@types/react-redux":"^7.1.11","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","chromatic":"^5.2.0","fork-ts-checker-webpack-plugin":"^5.2.0","install-peers-cli":"^2.2.0","react-docgen-typescript":"^1.20.5","react-docgen-typescript-loader":"^3.7.2","react-redux":"^7.2.1","redux-devtools-extension":"^2.13.8","rollup":"^2.28.2","rollup-plugin-peer-deps-external":"^2.2.3","rollup-plugin-postcss":"^3.1.8","rollup-plugin-typescript2":"^0.27.3","ts-loader":"^8.0.4","typescript":"^4.0.3"},"peerDependencies":{"@akasha-platform/craftjs-tools":"^0.0.14","@apollo/client":"^3.3.4","@craftjs/core":"0.1.0-beta.13","@craftjs/layers":"0.1.0-beta.13","@craftjs/utils":"0.1.0-beta.13","@date-io/date-fns":"1.x","@material-ui/core":"^4.11.0","@material-ui/icons":"^4.9.1","@material-ui/lab":"^4.0.0-alpha.56","@material-ui/pickers":"^3.2.10","@reduxjs/toolkit":"^1.4.0","@types/react":"^16.9.52","@types/styled-components":"^5.1.4","date-fns":"^2.16.1","graphql":"^15.4.0","react":"^16.8.0","react-dom":"^16.8.0","react-redux":"^7.2.1","styled-components":"^5.2.0"},"scripts":{"prepare":"install-peers","prepublishOnly":"yarn run build","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","build":"rollup -c","populate":"ts-node ./dev-server/populate.ts"},"dependencies":{"classnames":"^2.2.6","color-string":"^1.5.3","css-shorthand-expand":"^1.2.0","decamelize":"^4.0.0","lodash":"^4.17.20","lodash.omit":"^4.5.0","lzutf8":"^0.5.6","re-resizable":"^6.6.1","react-color":"^2.18.1","react-contenteditable":"^3.3.5","react-draggable":"^4.4.3","slugify":"^1.4.6"},"_id":"@akasha-platform/vendure-craftjs@0.0.2","dist":{"shasum":"8e9c762afcd4e3623431655a2fc9a00cad4fe8fb","integrity":"sha512-Ou3NviXI8uu4laggd44a1/dEWzg3N/1lgS6GRLt2weghzQl9ofqBQt8qVgUDQ6qGS9E0DbUDhqBD4nDl0lkIOA==","tarball":"https://registry.npmjs.org/@akasha-platform/vendure-craftjs/-/vendure-craftjs-0.0.2.tgz","fileCount":72,"unpackedSize":1599928,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2/cACRA9TVsSAnZWagAAoUUP/0yQNAGR5u78eiHLAEPu\n7NCFKr/Ep7s1GdCPbrxvge1nNgf2aEcG8rkBsvejHNCYL79DLaTixJlGJvW1\np9SgtvFfB9bosOP9cxF2b3RFHgiywzMo30Kpgns6n6SpzxfmPScR3cdOqM7K\nR6J+5gqdPKumA7CiXIO3Dcg2q5RCoTi/88legkI5MjeAfTIs8k7OFFBglEcv\niorLc76b8g6zsc/Ds3Mo9YhyvNLMlSlezYgW9Gcz9FXfijuqP3tHGuGMPLF4\nfNQZ/PHKcDIYtaWdCPRvqSjrJ8Hq70xrsMFbp73OOGU+iH9AW3+v421dOlUn\neJYT6LjdpILy3VBcfAGvlLKsmnLdNJI8xH7+DNOsrlV7hzMjrQof2HtwoGCt\n3V5xUTxXlCcVOHUhCP/CQemwSspgck6M8YsiNq/jlpjbKNtE0ZjOWhiD4gc4\nUrNgs0b2lP8RgHoZVQ+49W+UTJ6wryPxrQPSRGgdzq9VHZYOhc1+v9vvUGyo\nDPL8dM+gJ6v2p5wCz3tXeaDuZs0BjObVSpEv+FZ6eX0SmnYfHUZIzeOzvSyI\nHm5NZBCAHgXn3ZekF0vbCbNsZd8TZ3ezSNz5zkjE/Wv2T81GBY2jAOWyCk4t\nYAQkcuG9hC51Aj5O9bHoRv8VXVH8ourPrRy6tF5iiqAxxQusHXhFp0ugf1NJ\nBKIR\r\n=2jBO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDkgrF2vrlY9lPNVkXIkDE9glSMdffFfzzxxAISSnmb/AiAWQLPURbGECA2Q2+HqrEFjqrpi3lmDmAwjFqODbVVtuA=="}]},"_npmUser":{"name":"akasha-platform","email":"akasha-platform@protonmail.com"},"directories":{},"maintainers":[{"name":"akasha-platform","email":"akasha-platform@protonmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vendure-craftjs_0.0.2_1608251135376_0.8669469785335464"},"_hasShrinkwrap":false},"0.0.3":{"name":"@akasha-platform/vendure-craftjs","version":"0.0.3","description":"A set of hooks and components to provide components that interact with vendure and can be integrated into craftjs.","main":"build/index.js","module":"build/index.es.js","author":{"name":"Khair-ed-Din Husseini","email":"akasha-platform@protonmail.com"},"license":"MIT","private":false,"devDependencies":{"@apollo/client":"^3.3.4","@babel/core":"^7.11.6","@graphql-codegen/cli":"1.19.4","@graphql-codegen/typescript":"^1.19.0","@graphql-codegen/typescript-operations":"1.17.12","@graphql-codegen/typescript-react-apollo":"2.2.1","@rollup/plugin-commonjs":"^15.1.0","@rollup/plugin-json":"^4.1.0","@rollup/plugin-node-resolve":"^9.0.0","@storybook/addon-actions":"^6.0.26","@storybook/addon-essentials":"^6.0.26","@storybook/addon-links":"^6.0.26","@storybook/preset-typescript":"3.0.0","@storybook/react":"^6.0.26","@types/react-redux":"^7.1.11","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","chromatic":"^5.2.0","fork-ts-checker-webpack-plugin":"^5.2.0","install-peers-cli":"^2.2.0","react-docgen-typescript":"^1.20.5","react-docgen-typescript-loader":"^3.7.2","redux-devtools-extension":"^2.13.8","rollup":"^2.28.2","rollup-plugin-peer-deps-external":"^2.2.3","rollup-plugin-postcss":"^3.1.8","rollup-plugin-typescript2":"^0.27.3","ts-loader":"^8.0.4","typescript":"^4.0.3"},"peerDependencies":{"@akasha-platform/craftjs-tools":"^0.0.14","@apollo/client":"^3.3.4","@craftjs/core":"0.1.0-beta.13","@craftjs/layers":"0.1.0-beta.13","@craftjs/utils":"0.1.0-beta.13","@date-io/date-fns":"1.x","@material-ui/core":"^4.11.0","@material-ui/icons":"^4.9.1","@material-ui/lab":"^4.0.0-alpha.56","@material-ui/pickers":"^3.2.10","@reduxjs/toolkit":"^1.4.0","@types/react":"^16.9.52","@types/styled-components":"^5.1.4","date-fns":"^2.16.1","graphql":"^15.4.0","react":"^16.8.0","react-dom":"^16.8.0","react-redux":"^7.2.1","styled-components":"^5.2.0"},"scripts":{"prepare":"install-peers","prepublishOnly":"yarn run build","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","build":"rollup -c","populate":"ts-node ./dev-server/populate.ts"},"dependencies":{"classnames":"^2.2.6","color-string":"^1.5.3","css-shorthand-expand":"^1.2.0","decamelize":"^4.0.0","lodash":"^4.17.20","lodash.omit":"^4.5.0","lzutf8":"^0.5.6","re-resizable":"^6.6.1","react-color":"^2.18.1","react-contenteditable":"^3.3.5","react-draggable":"^4.4.3","slugify":"^1.4.6"},"_id":"@akasha-platform/vendure-craftjs@0.0.3","dist":{"shasum":"d9591acd8d15fe66eae4ba90a02c2b74435e8c42","integrity":"sha512-cdPctgFZzKQHnfqIrTyyoo7l+G4u3Zd6wvLrEzWL9bfAD7jz1hhUL3/tSkCMcYyJe+0eFz776OZUUnrWMghFqg==","tarball":"https://registry.npmjs.org/@akasha-platform/vendure-craftjs/-/vendure-craftjs-0.0.3.tgz","fileCount":72,"unpackedSize":1632731,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf3Bz5CRA9TVsSAnZWagAA52UQAIt3VeEZP2qAEy773xj1\nOZ47O7aN6XJs11Id8vC08l33Co5UGSQz4ZVen0SOqkzvFKpG+RWGcZqcgW4X\nK9szUm1adGw5kXpoAa8Dj+CbGdo0bO28/3Fvla9QmcUaCLR9VZ5/uTL8/taj\n/+FBQNtQz30kXlDi+eB7vQFb3vCfgVGK+tsaOhK2JdiX0YE5yIEyeF8xuviv\njERnn7Mkc+lsQNh2dCkMYNED5Dg77mefH5zkWnuLPnsDyTMvQ2DPXq6j9Edd\nnTzoBZ1boyMoGBJQMS+6cKZo25fJGGlkYrJdOWmso3c4w4yxgWE/tw65Y4VT\neXBVYpSQUzcwvFwZbau/WgGezBYDOOi0h/3B+W9VdAO/Ks5LuPTaIGSwI4fA\n1bXracm+P/yJx10tj7E2W7jT+r0oUWDqzdACvXgK3lQcyDYbhK9dRds1PmyL\n1DIU3hp7yDX0CeAUTnRH4XfLIq/WCroC/Mqi9iWu+6ppi9oHOuqAfTWKGlKG\n8Q+HM2WG7qXM979j2jV107Lpo6EqIqrTOgfspPQLfDJEmDu7JeGKP8g8cU5X\n334HqvGLK5Ib3Mxy2W+Q/kJgBGlR3GBngPwE7ortBds9hI0BGe3ixBKmtQWb\nDZfi94pF7eF1qcC9GXR7JAVvn2puAXFeQF5RdsAC25IO8U10idxwZXNXJlEy\nejMf\r\n=bWFj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4dEiV6Ye57twaaBnOGn44AMtwUzPrGvjNToh4X+uvOQIgbCrtIN8NZSoYYxM+SV3Nxnaq0aYZ/wHsDx4R6f8zsiw="}]},"_npmUser":{"name":"akasha-platform","email":"akasha-platform@protonmail.com"},"directories":{},"maintainers":[{"name":"akasha-platform","email":"akasha-platform@protonmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vendure-craftjs_0.0.3_1608260856797_0.9159150279941355"},"_hasShrinkwrap":false}},"time":{"created":"2020-12-18T00:25:35.313Z","0.0.2":"2020-12-18T00:25:35.708Z","modified":"2022-04-04T12:28:04.995Z","0.0.3":"2020-12-18T03:07:36.964Z"},"maintainers":[{"name":"akasha-platform","email":"akasha-platform@protonmail.com"}],"description":"A set of hooks and components to provide components that interact with vendure and can be integrated into craftjs.","author":{"name":"Khair-ed-Din Husseini","email":"akasha-platform@protonmail.com"},"license":"MIT","readme":"# vendure.craft.js\n\n## Overview\n\n`@akasha-platform/vendure-craftjs` is part of a set of open source repositories which together can be setup to serve a flexible content and ecommerce framework based on microservices/-frontends architecture.\n\nThe use of vendure.io as an e-commerce and GraphQL backend and craft.js with a set of customized components has the potential to serve as a solid but flexible interface between merchants/content creators and their customers/target audience.\n\n### What is vendure.io?\n\n[vendure.io](https://vendure.io/) is \"A modern, headless GraphQL-based e-commerce framework built with TypeScript & Nodejs\"\n\nIts small footprint, easy customisation, extendability and microservice oriented architecture make vendure a perfect candidate for a modern content/e-commerce platform.\n\n### What is craft.js?\n\n[craft.js](https://craft.js.org/) is \" a React framework for building powerful & feature-rich drag-n-drop page editors.\"\n\nWith craft.js it is possible to fairly quickly build up customised drag and drop page builders as it servers only as a page building framework and lifts off the burden of handling editor state, history and drag and drop handling from you shoulders.\n\nIt is possible to build simple React Components with an additional few lines of code to make them compatible with craft.js, however we will see later that the `@akasha-platform/craftjs-tool` library takes care of a lot of the setup for us.\n\n### How do the two work together?\n\nSince both, craft.js and vendure.io do not work together out of the box, a set of repositories was created to make this marriage possible. The microservices are the following:\n\n- Shop API (Customer facing GraphQL API)\n- Admin API (Admin facing GraphQL API)\n- Admin UI (Admin facing UI)\n- Shopfrontend (Customer facing UI)\n- Page Editor (Admin facing publishing UI)\n\nIn order to make this work both, craft.js and vendure.io need to be extended to support the funtionalities required by `@akasha-platform/vendure-craftjs`.\n\nOn the backend side the `@akasha-platform/vendure-document-plugin` is used to provide an admin facing GraphQL API for managing page trees, meta-data and publishing criteria.\n\nOn the frontend side we need to tell craft.js how to fetch page contents and render components using `@akasha-platform/craftjs-tools` and `@akasha-platform/vendure-craftjs`.\n\n## Setup\n\nThis documentation will show you how to setup vendure.io, install all requirements, setup a craft.js page builder and how to extend both the customer facing UI and the admin facing UI (some parts of the vendure admin UI will not be covered).\n\n### Project setup\n\nThe final project will have the following folder strucure.\n\n```\nexample-project/\n|-- vendure/\n|  |-- package.json\n|  |-- ...\n|\n|-- page-builder/\n|  |-- package.json\n|  |-- ...\n|\n|-- shop-front/\n|  |-- package.json\n|  |-- ...\n```\n\n### Installation (Admin facing)\n\n#### Vendure\n\n##### Install Vendure\n\n```\nyarn create @vendure vendure\n```\n\nWhen it asks for the database you're using, select SQLLite for simplicity.\nIf you want to use other database engines you will have to make sure that they are up and reachable for the installation process.\n\nSelect Typescript as your programming language and select the rest as you desire.\n\n##### Configure Vendure\n\n```bash\nyarn add @akasha-platform/vendure-document-plugin\n```\n\n```typescript\n// vendure-config.ts\n\nimport { DocumentPlugin } from \"@akasha-platform/vendure-document-plugin\";\n\nexport const config = {\n  /*...*/\n\n  plugins: [/*...*/ DocumentPlugin],\n};\n```\n\nand then simply run\n\n```bash\nyarn migration:generate document-plugin\nyarn migration:run document-plugin\n```\n\nThis should be enough to have the backend setup.\nNow start the development environment and check if everything went ok by running\n\n```bash\nyarn start\n```\n\nIf everything went fine, you should be able to login into the shop backend via http://localhost:3000/admin/login\n\n#### Page Builder\n\nBack in our main project folder we are ready to create our page builder application.\nYou might need to install [install-peerdeps](https://yarnpkg.com/package/install-peerdeps) for convenience.\n\n##### Install Page Builder\n\n```bash\nyarn create react-app page-builder --template typescript\ncd ./page-builder\ninstall-peerdeps @akasha-platform/vendure-craftjs\n```\n\nAfter using `install-peerdeps` you might want to rearrange some of the packages in the `dependencies` section of your `package.json` files to `devDependencies` and don't forget to re-run `yarn install`.\n\n##### Configure Page Builder\n\nIn order to actually use the Page Builder we will have to implement a redux store and an apollo client for use by the components delivered with `@akasha-platform/vendure-craftjs`.\n\nFirst we will create our redux store:\n\n```typescript\n// ./src/store.ts\nimport { combineReducers, configureStore } from \"@reduxjs/toolkit\";\nimport { exportedUserComponentsReducer } from \"@akasha-platform/craftjs-tools\";\nimport { navigationReducer } from \"@akasha-platform/vendure-craftjs\";\n\nconst reducer = combineReducers({\n  exportedComponents: exportedUserComponentsReducer,\n  navigation: navigationReducer,\n});\n\nconst store = configureStore({\n  reducer,\n});\n\nexport type RootState = ReturnType<typeof store.getState>;\n\nexport default store;\n```\n\nAnd now our clients:\n\n```typescript\n// ./src/client.ts\nimport {\n  ApolloClient,\n  ApolloLink,\n  createHttpLink,\n  from,\n  InMemoryCache,\n} from \"@apollo/client\";\nimport { onError } from \"@apollo/client/link/error\";\n\nconst AUTH_TOKEN = \"vendure-auth-token\";\n\nconst middlewareAuthLink = new ApolloLink((operation, forward) => {\n  const token = localStorage.getItem(AUTH_TOKEN);\n  const authorizationHeader = token ? `Bearer ${token}` : null;\n  operation.setContext({\n    headers: {\n      authorization: authorizationHeader,\n    },\n  });\n  return forward(operation);\n});\n\nconst afterwareLink = new ApolloLink((operation, forward) => {\n  return forward(operation).map((response) => {\n    const context = operation.getContext();\n    const {\n      response: { headers },\n    } = context;\n\n    if (headers) {\n      const refreshToken = headers.get(\"vendure-auth-token\");\n      if (refreshToken) {\n        localStorage.setItem(AUTH_TOKEN, refreshToken);\n      }\n    }\n\n    return response;\n  });\n});\n\nconst errorLink = onError(({ graphQLErrors, networkError }) => {\n  if (graphQLErrors)\n    graphQLErrors.map(({ message, locations, path }) =>\n      console.log(\n        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`\n      )\n    );\n\n  if (networkError) console.log(`[Network error]: ${networkError}`);\n});\n\nexport const adminClient = new ApolloClient({\n  link: from([\n    errorLink,\n    middlewareAuthLink,\n    afterwareLink,\n    createHttpLink({\n      uri: \"http://localhost:3000/admin-api\",\n    }),\n  ]),\n  cache: new InMemoryCache(),\n});\n\nexport const frontendClient = new ApolloClient({\n  link: from([\n    errorLink,\n    middlewareAuthLink,\n    afterwareLink,\n    createHttpLink({\n      uri: \"http://localhost:3000/shop-api\",\n    }),\n  ]),\n  cache: new InMemoryCache(),\n});\n```\n\nLast but not least we setup our `App.tsx` to show the craft.js editor.\nTo use a `react-redux` provider we will have to install it first:\n\n```typescript\n// ./src/App.tsx\nimport { muiTheme, Resolver } from \"@akasha-platform/craftjs-tools\";\nimport {\n  AppEditor,\n  LoginBox,\n  vendureUserComponents,\n} from \"@akasha-platform/vendure-craftjs\";\nimport { ApolloProvider } from \"@apollo/client\";\nimport { Frame } from \"@craftjs/core\";\nimport { MuiThemeProvider } from \"@material-ui/core\";\nimport React, { useEffect, useState } from \"react\";\nimport { Provider } from \"react-redux\";\nimport { adminClient, AUTH_TOKEN, frontendClient } from \"./client\";\nimport store from \"./store\";\n\nexport const App = () => {\n  const resolver = new Resolver({\n    ...vendureUserComponents,\n  });\n  resolver.resolve();\n\n  const [token, setToken] = useState(localStorage.getItem(AUTH_TOKEN));\n\n  useEffect(() => {\n    function updateToken() {\n      setToken(localStorage.getItem(AUTH_TOKEN));\n    }\n    window.addEventListener(\"storage\", updateToken);\n\n    return () => {\n      window.removeEventListener(\"storage\", updateToken);\n    };\n  }, [setToken]);\n\n  return (\n    <>\n      {token ? (\n        <AppEditor\n          store={store}\n          adminClient={adminClient}\n          frontendClient={frontendClient}\n          resolver={resolver}\n          editMode={true}\n        >\n          <Frame>{resolver.create(\"ContentArea\")}</Frame>\n        </AppEditor>\n      ) : (\n        <Provider store={store}>\n          <ApolloProvider client={adminClient}>\n            <MuiThemeProvider theme={muiTheme}>\n              <LoginBox />\n            </MuiThemeProvider>\n          </ApolloProvider>\n        </Provider>\n      )}\n    </>\n  );\n};\n\nexport default App;\n```\n\nAfter running\n\n```bash\nyarn start\n```\n\nWe should be able to start the editor now and directly start to use it.\n\n### Installation (Customer facing)\n\n## Usage\n\n### Features\n\n#### Content Components\n\n##### Content Area\n\n##### Content Editable\n\n##### Vendure Image\n\n#### Data driven Components\n\n##### Product\n\n##### Collection\n\n##### Collections\n\n##### Cart Area\n\n##### Checkout Area\n\n#####\n\n#### Form Components\n\n##### Checkout Form\n\n##### GraphQL Forms\n\n#### Pages & Routing\n\n##### Document Tree and Publishing (+ SEO)\n\n##### Fetching data based on route properties\n\n## Development\n\n### Creating Components for use in Editor\n\n#### \"It is just simple React\"\n\n#### Creating Components for GraphQL Data\n\n##### Products\n\n##### Collections\n\n##### Orders/Carts...\n\n##### Checkout\n\n##### Search\n\n##### Custom Components\n\n#### Wrapping with `@akasha-platform/craftjs-tools`\n\n#### Creating settings forms with `@akasha-platform/craftjs-tools`\n\n#### Creating actions for use in `@akasha-plaform/craftjs-tools`'s `ViewPort`\n\n### Extending the Editor\n\n#### Adding Components\n\n#### Adding Actions\n\n#### Extending the GraphQL Schema\n","readmeFilename":"readme.md"}