feat(UIPattern): base and settings (#668)

* base

* finish settings

* add appId

* add scoping

Author: ragi96

packages/ui-pattern-block/.eslintrc.js

@@ -0,0 +1,27 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+module.exports = {
+    extends: ['@frontify/eslint-config-react', 'plugin:jsx-a11y/recommended'],
+    plugins: ['notice'],
+    settings: {
+        react: {
+            version: 'detect',
+        },
+    },
+    overrides: [
+        {
+            files: ['*.js', '*.ts', '*.tsx'],
+            rules: {
+                'notice/notice': [
+                    'error',
+                    {
+                        template: '/* (c) Copyright Frontify Ltd., all rights reserved. */\n\n',
+                        messages: {
+                            whenFailedToMatch: 'No Frontify copyright header set.',
+                        },
+                    },
+                ],
+            },
+        },
+    ],
+};

packages/ui-pattern-block/.gitignore

@@ -0,0 +1,2 @@
+dist
+node_modules

packages/ui-pattern-block/.prettierrc

@@ -0,0 +1,7 @@
+{
+    "singleQuote": true,
+    "tabWidth": 4,
+    "printWidth": 120,
+    "arrowParens": "always",
+    "endOfLine": "lf"
+}

packages/ui-pattern-block/README.md

@@ -0,0 +1,3 @@
+# UI Pattern block
+
+Inside this block, you can create and display UI Patterns.

packages/ui-pattern-block/manifest.json

@@ -0,0 +1,3 @@
+{
+    "appId": "clmyyhwdf00010nuqq138mw3s"
+}

packages/ui-pattern-block/package.json

@@ -0,0 +1,45 @@
+{
+    "name": "ui-pattern-block",
+    "private": true,
+    "author": "Frontify Developers <[email protected]>",
+    "version": "1.0.0",
+    "main": "dist/index.js",
+    "scripts": {
+        "serve": "frontify-cli serve --entryPath src/index.ts",
+        "deploy": "frontify-cli deploy --entryPath src/index.ts",
+        "lint": "eslint .",
+        "lint:fix": "eslint --fix .",
+        "prettier": "prettier --check .",
+        "prettier:fix": "prettier --write .",
+        "typecheck": "tsc --noEmit"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.22.17",
+        "@frontify/eslint-config-react": "0.16.1",
+        "@frontify/frontify-cli": "^5.3.17",
+        "@types/lodash-es": "^4.17.9",
+        "@types/react": "^18.2.21",
+        "@types/react-dom": "^18.2.7",
+        "autoprefixer": "^10.4.15",
+        "cypress": "^13.2.0",
+        "eslint": "^8.48.0",
+        "eslint-plugin-jsx-a11y": "^6.7.1",
+        "eslint-plugin-notice": "^0.9.10",
+        "postcss": "^8.4.29",
+        "prettier": "^3.0.3",
+        "sinon": "^16.0.0",
+        "tailwindcss": "^3.3.3",
+        "typescript": "^5.2.2"
+    },
+    "dependencies": {
+        "@codesandbox/sandpack-react": "^2.7.1",
+        "@codesandbox/sandpack-themes": "^2.0.21",
+        "@frontify/app-bridge": "^3.0.0-beta.96",
+        "@frontify/fondue": "12.0.0-beta.334",
+        "@frontify/guideline-blocks-settings": "^0.29.8",
+        "@frontify/guideline-blocks-shared": "workspace:*",
+        "lodash-es": "^4.17.21",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    }
+}

packages/ui-pattern-block/postcss.config.js

@@ -0,0 +1,8 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};

packages/ui-pattern-block/src/UIPatternBlock.tsx

@@ -0,0 +1,25 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { ReactElement } from 'react';
+import { useBlockSettings } from '@frontify/app-bridge';
+import { BlockProps } from '@frontify/guideline-blocks-settings';
+import { Sandpack, SandpackPredefinedTemplate } from '@codesandbox/sandpack-react';
+
+import 'tailwindcss/tailwind.css';
+import '@frontify/guideline-blocks-settings/styles';
+
+import { type Settings, sandpackThemeValues } from './types';
+
+export const UIPatternBlock = ({ appBridge }: BlockProps): ReactElement => {
+    const [blockSettings] = useBlockSettings<Settings>(appBridge);
+    const { sandpackTemplate, sandpackTheme } = blockSettings;
+
+    return (
+        <div className="ui-pattern-block">
+            <Sandpack
+                template={sandpackTemplate as SandpackPredefinedTemplate}
+                theme={sandpackThemeValues[sandpackTheme]}
+            />
+        </div>
+    );
+};

packages/ui-pattern-block/src/index.ts

@@ -0,0 +1,10 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { UIPatternBlock } from './UIPatternBlock';
+import { settings } from './settings';
+import { defineBlock } from '@frontify/guideline-blocks-settings';
+
+export default defineBlock({
+    block: UIPatternBlock,
+    settings,
+});