Merge pull request #322 from AmazeeLabs/gutenberg-move-js-into-own-fo…

…lder

packages/drupal/gutenberg_blocks/.eslintignore

@@ -1,3 +1,3 @@
 .turbo
-js
+dist
 node_modules

packages/drupal/gutenberg_blocks/.gitignore

@@ -1,3 +1,3 @@
 node_modules
-js/gutenberg_blocks.mjs
-js/gutenberg_blocks.umd.js
+dist/gutenberg_blocks.mjs
+dist/gutenberg_blocks.umd.js

packages/drupal/gutenberg_blocks/README.md

@@ -4,9 +4,9 @@
 
 To create a custom Gutenberg you must:
 
-1. Create a `.tsx` file in `src/blocks`, using one of the existing examples as a
+1. Create a `.tsx` file in `js/blocks`, using one of the existing examples as a
    starting point.
-2. Include the file within `src/index.ts` - this file is used to generate the
+2. Include the file within `js/index.ts` - this file is used to generate the
    javascript file included by the Drupal module.
 3. Clear the cache if necessary and you should be able to add your new block
    within the Gutenberg editor.
@@ -20,9 +20,9 @@ create a new block based on a GraphQL type.
 pnpm gutenberg:generate <GraphQLType>
 ```
 
-This will create a new block in the `src/blocks` directory, with the necessary
+This will create a new block in the `js/blocks` directory, with the necessary
 fields and attributes already defined. You will still need to add the block to
-`src/index.ts` and clear the cache to see the new block in the Gutenberg editor
+`js/index.ts` and clear the cache to see the new block in the Gutenberg editor
 after running this command.
 
 ### Icons
@@ -178,7 +178,6 @@ import { registerBlockType } from 'wordpress__blocks';
 import { InnerBlocks } from 'wordpress__block-editor';
 import { useSelect } from 'wordpress__data';
 
-// @ts-ignore
 const __ = Drupal.t;
 
 const MAX_BLOCKS: number = 1;

packages/drupal/gutenberg_blocks/gutenberg_blocks.libraries.yml

@@ -1,6 +1,6 @@
 edit:
   js:
-    js/gutenberg_blocks.umd.js: {}
+    dist/gutenberg_blocks.umd.js: {}
   css:
     theme:
       css/edit.css: {}

packages/drupal/gutenberg_blocks/src/blocks/cta.tsx → packages/drupal/gutenberg_blocks/js/blocks/cta.tsx

@@ -10,8 +10,6 @@ import { PanelBody, SelectControl, ToggleControl } from 'wordpress__components';
 import { compose, withState } from 'wordpress__compose';
 
 const { t: __ } = Drupal;
-
-// @ts-ignore
 const { setPlainTextAttribute } = silverbackGutenbergUtils;
 
 const ArrowRightIcon = () => (

packages/drupal/gutenberg_blocks/src/blocks/heading.tsx → packages/drupal/gutenberg_blocks/js/blocks/heading.tsx

@@ -6,8 +6,6 @@ import { compose, withState } from 'wordpress__compose';
 import { cleanUpText } from '../utils/clean-up-text';
 
 const { t: __ } = Drupal;
-
-// @ts-ignore
 const { sanitizeText } = silverbackGutenbergUtils;
 
 // There is no way to remove formatting options (bold, italic, etc.) from the

packages/drupal/gutenberg_blocks/src/blocks/hero.tsx → packages/drupal/gutenberg_blocks/js/blocks/hero.tsx

@@ -13,8 +13,6 @@ import { dispatch } from 'wordpress__data';
 import { DrupalMediaEntity } from '../utils/drupal-media';
 
 const { t: __ } = Drupal;
-
-// @ts-ignore
 const { setPlainTextAttribute } = silverbackGutenbergUtils;
 
 registerBlockType('custom/hero', {

packages/drupal/gutenberg_blocks/src/blocks/image-teaser.tsx → packages/drupal/gutenberg_blocks/js/blocks/image-teaser.tsx

@@ -12,8 +12,6 @@ import { dispatch } from 'wordpress__data';
 import { DrupalMediaEntity } from '../utils/drupal-media';
 
 const { t: __ } = Drupal;
-
-// @ts-ignore
 const { setPlainTextAttribute } = silverbackGutenbergUtils;
 
 registerBlockType('custom/image-teaser', {

packages/drupal/gutenberg_blocks/src/blocks/info-grid.tsx → packages/drupal/gutenberg_blocks/js/blocks/info-grid.tsx

@@ -3,7 +3,6 @@ import { registerBlockType } from 'wordpress__blocks';
 import { useSelect } from 'wordpress__data';
 
 const { t: __ } = Drupal;
-
 const MAX_BLOCKS: number = 3;
 
 registerBlockType('custom/info-grid', {

packages/drupal/gutenberg_blocks/src/blocks/quote.tsx → packages/drupal/gutenberg_blocks/js/blocks/quote.tsx

@@ -7,8 +7,6 @@ import { cleanUpText } from '../utils/clean-up-text';
 import { DrupalMediaEntity } from '../utils/drupal-media';
 
 const { t: __ } = Drupal;
-
-// @ts-ignore
 const { setPlainTextAttribute } = silverbackGutenbergUtils;
 
 // @ts-ignore

packages/drupal/gutenberg_blocks/src/filters/list.tsx → packages/drupal/gutenberg_blocks/js/filters/list.tsx

@@ -4,8 +4,7 @@ import { PanelBody, SelectControl } from 'wordpress__components';
 import { createHigherOrderComponent } from 'wordpress__compose';
 import { addFilter } from 'wordpress__hooks';
 
-// @ts-ignore
-const __ = Drupal.t;
+const { t: __ } = Drupal;
 
 addFilter(
   'blocks.registerBlockType',

packages/drupal/gutenberg_blocks/src/utils/icon-list.ts → packages/drupal/gutenberg_blocks/js/utils/icon-list.ts

@@ -1,4 +1,3 @@
-// @ts-ignore
 const { t: __ } = Drupal;
 
 // HOW TO ADD A NEW ICON.

packages/drupal/gutenberg_blocks/scripts/generate-gutenberg-block.js

@@ -42,7 +42,7 @@ function generateGutenbergBlockCode(typeName) {
       );
 
       // Write the generated code to a file.
-      const filePath = `./src/blocks/${gutenbergBlockMachineName}.tsx`; // Output file path
+      const filePath = `./js/blocks/${gutenbergBlockMachineName}.tsx`; // Output file path
       fs.writeFileSync(filePath, blockCode);
 
       console.log(`Generated Gutenberg block for ${blockName} in ${filePath}`);
@@ -75,9 +75,8 @@ ${
 import { DrupalMediaEntity } from '../utils/drupal-media';`
 }
 
-// @ts-ignore
 const { t: __ } = Drupal;
- // @ts-ignore
+
 registerBlockType('custom/${blockName}', {
   title: '${titleCaseTitle}',
   icon: 'text',
@@ -92,8 +91,7 @@ registerBlockType('custom/${blockName}', {
     }`,
       )
       .join(',\n\t\t')}
-  }, 
-  // @ts-ignore
+  },
   edit: compose(withState())((props) => {
     const { attributes, setAttributes } = props;
     
@@ -123,7 +121,6 @@ registerBlockType('custom/${blockName}', {
       </Fragment>
     );
   }),
-
   save() {
     return null;
     // or uncomment this if you import and use InnerBlocks from wordpress__block-editor
@@ -160,7 +157,6 @@ function getGutenbergFieldBlock(attribute) {
             setAttributes={props.setAttributes}
             isMediaLibraryEnabled={true}
             onError={(error) => {
-              // @ts-ignore
               error = typeof error === 'string' ? error : error[2];
               dispatch('core/notices').createWarningNotice(error);
             }}

packages/drupal/gutenberg_blocks/tsconfig.json

@@ -16,6 +16,6 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src"],
+  "include": ["js"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

packages/drupal/gutenberg_blocks/turbo.json

@@ -2,11 +2,11 @@
   "extends": ["//"],
   "tasks": {
     "test:static": {
-      "inputs": ["src/**"]
+      "inputs": ["js/**"]
     },
     "prep": {
-      "inputs": ["src/**"],
-      "outputs": ["js/**"]
+      "inputs": ["js/**"],
+      "outputs": ["dist/**"]
     }
   }
 }

packages/drupal/gutenberg_blocks/vite.config.ts

@@ -5,7 +5,7 @@ import { defineConfig } from 'vite';
 export default defineConfig({
   build: {
     lib: {
-      entry: resolve(__dirname, 'src/index.ts'),
+      entry: resolve(__dirname, 'js/index.ts'),
       name: 'gutenberg_blocks',
       fileName: 'gutenberg_blocks',
     },
@@ -38,7 +38,7 @@ export default defineConfig({
         },
       },
     },
-    outDir: resolve(__dirname, './js'),
+    outDir: resolve(__dirname, './dist'),
   },
   plugins: [
     react({