Merge pull request #31 from HubSpot/bmatto/module-components

Examples project for CMS Components being built out

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+hubspot.config.yml

examples/module-components/.eslintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+  parserOptions: {
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    node: true,
+    es2021: true,
+  },
+  extends: ['eslint:recommended', 'prettier', 'plugin:react/recommended'],
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+    'react/prop-types': 'off',
+  },
+  ignorePatterns: ['hello-world-project/hello-world-app/dist/*'],
+  settings: {
+    react: {
+      version: '18.1',
+    },
+  },
+};

examples/module-components/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+hubspot.config.yml
+dist

examples/module-components/.prettierrc

@@ -0,0 +1,14 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.hubl.html",
+      "options": {
+        "parser": "hubl"
+      }
+    }
+  ]
+}

examples/module-components/jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "NodeNext"
+  }
+}

examples/module-components/module-components-project/.hsignore

@@ -0,0 +1,4 @@
+README.md
+tsconfig.json
+yarn.lock
+dist

examples/module-components/module-components-project/hsproject.json

@@ -0,0 +1,5 @@
+{
+  "name": "module-components-project",
+  "srcDir": ".",
+  "platformVersion": "2023.2"
+}

examples/module-components/module-components-project/module-components-app/cms-assets.json

@@ -0,0 +1,4 @@
+{
+  "label": "Components - CMS React",
+  "outputPath": ""
+}

examples/module-components/module-components-project/module-components-app/components/modules/IconExample/index.jsx

@@ -0,0 +1,52 @@
+import { ModuleFields, IconField } from '@hubspot/cms-components/fields';
+import { Icon } from '@hubspot/cms-components';
+
+export function Component() {
+  return (
+    <>
+      <h1>Icon Examples</h1>
+      <div
+        style={{
+          height: 200,
+          display: 'flex',
+          justifyContent: 'space-around',
+        }}
+      >
+        {/* The Icon component takes a field path as defined in the "fields" export */}
+        <Icon fieldPath="iconExampleOne" />
+        <Icon fieldPath="iconExampleTwo" />
+        <Icon fieldPath="iconExampleThree" />
+      </div>
+    </>
+  );
+}
+
+export const fields = (
+  <ModuleFields>
+    <IconField
+      label="Icon Example One"
+      name="iconExampleOne"
+      default={{
+        name: 'align-left',
+      }}
+    />
+    <IconField
+      label="Icon Example Two"
+      name="iconExampleTwo"
+      default={{
+        name: 'align-center',
+      }}
+    />
+    <IconField
+      label="Icon Example Three"
+      name="iconExampleThree"
+      default={{
+        name: 'align-right',
+      }}
+    />
+  </ModuleFields>
+);
+
+export const meta = {
+  label: 'Icon Example',
+};

examples/module-components/module-components-project/module-components-app/components/modules/RichTextExample/index.jsx

@@ -0,0 +1,32 @@
+import { ModuleFields, RichTextField } from '@hubspot/cms-components/fields';
+import { RichText, logInfo } from '@hubspot/cms-components';
+
+export function Component(props) {
+  logInfo(props);
+
+  return (
+    <>
+      <h1>Rich Text Example</h1>
+      <div
+        style={{
+          display: 'flex',
+        }}
+      >
+        <RichText fieldPath="richTextField" />
+      </div>
+    </>
+  );
+}
+
+export const fields = (
+  <ModuleFields>
+    <RichTextField
+      label="Rich Text Field"
+      name="richTextField"
+      default="<h2>Rich Text Field</h2><p>Hello CMS React</p>"
+    />
+  </ModuleFields>
+);
+export const meta = {
+  label: 'Rich Text Example',
+};

examples/module-components/module-components-project/module-components-app/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "module-components-app",
+  "version": "0.1.0",
+  "type": "module",
+  "dependencies": {
+    "@hubspot/cms-components": "latest",
+    "prop-types": "^15.8.1",
+    "react": "^18.1.0"
+  },
+  "devDependencies": {
+    "@hubspot/cms-dev-server": "latest",
+    "@testing-library/react": "^13.4.0",
+    "@vitejs/plugin-react": "^2.1.0",
+    "jsdom": "^20.0.1",
+    "vitest": "^0.24.3"
+  },
+  "scripts": {
+    "start": "hs-cms-dev-server .",
+    "test": "vitest"
+  }
+}

examples/module-components/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "module-components",
+  "description": "CMS React Module Components Example",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@hubspot/cli": "latest",
+    "@hubspot/prettier-plugin-hubl": "latest",
+    "eslint": "^8.24.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-react": "^7.31.10",
+    "prettier": "^2.7.1",
+    "yarpm": "^1.2.0"
+  },
+  "scripts": {
+    "start": "cd module-components-project/module-components-app && yarpm start",
+    "postinstall": "cd module-components-project/module-components-app && yarpm install",
+    "lint:js": "eslint . --ext .js,.jsx",
+    "prettier": "prettier . --check",
+    "deploy": "hs project upload module-components-project"
+  },
+  "dependencies": {},
+  "engines": {
+    "node": ">=16.0.0"
+  }
+}