build: include project assets for distribution and exclude assets fro…

…m CI

.github/workflows/ci.yaml

@@ -7,6 +7,7 @@ on:
       branches: [ main ]
     paths-ignore:
       - '**/README.md'
+      - 'assets/**'
   workflow_dispatch:
     inputs:
       debug_enabled:

.gitignore

@@ -1,4 +1,4 @@
-/assets/
+
 /var/
 .idea/
 **/cache

assets/.editorconfig

@@ -0,0 +1,10 @@
+; top-most EditorConfig file
+root = true
+
+; Unix-style newlines
+[*]
+end_of_line = LF
+
+[*.php]
+indent_style = space
+indent_size = 4

assets/.env

@@ -0,0 +1 @@
+ASSETS_URL_PREFIX=/bundles/rankymedia/

assets/.env.development

@@ -0,0 +1 @@
+ASSETS_URL_PREFIX=/bundles/rankymedia/

assets/.eslintrc.json

@@ -0,0 +1,74 @@
+{
+  "root": true,
+  "plugins": ["import","@typescript-eslint"],
+  "extends": [
+    "standard",
+    "eslint:recommended",
+    "airbnb",
+    "airbnb/hooks",
+    "airbnb-typescript",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json",
+    "ecmaVersion": 2021,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "settings": {
+    "react":  {
+      "version":  "detect"
+    },
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "node": {
+        "paths": ["src"],
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es2021": true,
+    "node": true,
+    "es6": true
+  },
+  "ignorePatterns": ["webpack.config.js","temp.js","*_copy.js","**/vendor/*.js","dist","scripts"],
+  "rules": {
+    "no-dupe-else-if": "off",
+    "no-import-assign": "off",
+    "no-setter-return": "off",
+    "import/prefer-default-export": "off",
+    "func-names": ["warn", "as-needed"],
+    "max-len": ["warn",{ "code": 120, "ignoreTemplateLiterals": true, "ignoreUrls": true, "ignorePattern": "d=\"([\\s\\S]*?)\""}],
+    "no-console": "off",
+    "import/no-unresolved": "off",
+    "arrow-body-style":  "off",
+    "prefer-arrow-callback": "off",
+    "import/no-useless-path-segments": "off",
+    "import/no-self-import": "off",
+    "no-use-before-define": "off",
+    "no-underscore-dangle": "off",
+    "jsx-a11y/img-redundant-alt": "off",
+    "@typescript-eslint/no-empty-function": ["error", { "allow": ["constructors"]}],
+    "@typescript-eslint/no-use-before-define": ["error"],
+    "@typescript-eslint/no-var-requires": 0,
+    "@typescript-eslint/no-inferrable-types": "off",
+    "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
+    "react/function-component-definition": "off",
+    "react/prop-types": "off",
+    "react/require-default-props": "off",
+    "react/jsx-one-expression-per-line": "off",
+    "no-param-reassign": [2, { "props": false }],
+    "react/no-unescaped-entities": "off",
+    "jsx-a11y/label-has-associated-control": "off"
+  }
+}

assets/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+package-lock.json
+.env.development

assets/.npmignore

@@ -0,0 +1,6 @@
+.eslintrc.json
+.prettierrc.json
+webpack.config.js
+tsconfig.json
+.editorconfig
+.env

assets/.prettierrc.json

@@ -0,0 +1,22 @@
+{
+  "trailingComma": "all",
+  "semi": true,
+  "printWidth": 120,
+  "proseWrap": "always",
+  "bracketSpacing": true,
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.md",
+      "options": {
+        "tabWidth": 4
+      }
+    },
+    {
+      "files": "*.json",
+      "options": {
+        "tabWidth": 6
+      }
+    }
+  ]
+}

assets/README.md

@@ -0,0 +1,21 @@
+# Assets for the project
+
+**index.ts**: Serves solely as a re-exporter of important components from the library (barrel export). Its real utility comes into play when the library is published on NPM.
+
+**load.tsx**: Responsible for loading/mounting the library's components in the DOM with React. This is the entry file for Webpack to generate the bundle.
+
+The currently used scripts are:
+
+```bash
+npm run watch 
+```
+This command is used to enable watch mode, allowing real-time changes. However, reloading the page is necessary to see the changes. Additionally, it's agreed upon to install the assets with Symfony using the command bin/console assets:install --symlink.
+
+
+```bash
+npm run build
+```
+
+This command is used to generate the library bundle in production mode.
+
+

assets/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "ranky-media-bundle",
+  "version": "1.0.0",
+  "description": "Package for Ranky Media Bundle of Symfony",
+  "keywords": [
+    "media",
+    "file",
+    "upload",
+    "resize",
+    "symfony",
+    "bundle",
+    "ranky",
+    "plugin"
+  ],
+  "author": "chiqui3d",
+  "homepage": "https://github.com/ranky/media-bundle",
+  "private": true,
+  "license": "MIT",
+  "main": "lib/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "dev": "encore dev --config webpack.config.js",
+    "watch": "encore dev --watch --config webpack.config.js",
+    "server": "NODE_ENV=development encore dev-server --host=${VIRTUAL_HOST} --port=${NODE_PORT} --allowed-hosts all --config webpack.config.js",
+    "build": "NODE_ENV=production encore production --config webpack.config.js",
+    "lib": "tsc ./tsconfig.json",
+    "types": "tsc -p ./tsconfig.json --declaration --emitDeclarationOnly",
+    "eslint": "eslint ./src/** --ext .js,.ts,.tsx,.jsx --no-error-on-unmatched-pattern",
+    "eslint:fix": "eslint ./src/** --ext .js,.ts,.tsx,.jsx --fix --no-error-on-unmatched-pattern"
+  },
+  "browserslist": [
+    "> 0.5%",
+    "last 2 versions",
+    "Firefox ESR",
+    "not dead"
+  ],
+  "dependencies": {
+    "@uppy/core": "^3.0.2",
+    "@uppy/dashboard": "^3.1.0",
+    "@uppy/drag-drop": "^3.0.1",
+    "@uppy/drop-target": "^2.0.1",
+    "@uppy/file-input": "^3.0.1",
+    "@uppy/locales": "^3.0.1",
+    "@uppy/progress-bar": "^3.0.1",
+    "@uppy/react": "^3.0.2",
+    "@uppy/status-bar": "^3.0.1",
+    "@uppy/tus": "^3.0.2",
+    "@uppy/xhr-upload": "^3.0.2",
+    "html-react-parser": "^1.4.8",
+    "jotai": "^1.9.2",
+    "react": "^17.0.2 || ^18.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0",
+    "react-query": "^3.39.2",
+    "sweetalert2": "^11.4.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.5",
+    "@svgr/webpack": "^6.2.1",
+    "@symfony/webpack-encore": "^4.1.1",
+    "@types/dotenv-webpack": "^7.0.3",
+    "@types/node": "^17.0.22",
+    "@types/react": "^17.0.80 || ^18.0.0",
+    "@types/react-dom": "^18.2.23",
+    "@types/webpack": "^5.28.0",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
+    "@typescript-eslint/parser": "^7.4.0",
+    "@welldone-software/why-did-you-render": "^6.2.3",
+    "autoprefixer": "^10.4.0",
+    "dotenv-webpack": "^7.1.0",
+    "eslint": "^8.52.0",
+    "eslint-config-airbnb": "^19.0.3",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-airbnb-typescript": "^18.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-webpack-plugin": "^3.2.0",
+    "file-loader": "^6.2.0",
+    "fork-ts-checker-webpack-plugin": "^7.0.0",
+    "postcss-loader": "^7.0.0",
+    "postcss-preset-env": "^7.4.2",
+    "postcss-url": "^10.1.3",
+    "prettier": "^2.5.1",
+    "purgecss-webpack-plugin": "^4.1.3",
+    "regenerator-runtime": "^0.13.9",
+    "sass": "^1.49.9",
+    "sass-loader": "^13.0.0",
+    "ts-loader": "^9.2.7",
+    "ts-node": "^10.7.0",
+    "tsconfig-paths": "^3.13.0",
+    "typescript": "^4.9.5",
+    "webpack-bundle-analyzer": "^4.7.0",
+    "webpack-cli": "^4.10.0"
+  }
+}

assets/scripts/webpackUppyLocales.js

@@ -0,0 +1,12 @@
+const path = require('path');
+const fs = require('fs');
+
+const folderPath = path.resolve(__dirname, '../node_modules/@uppy/locales/src');
+const locales = fs
+  .readdirSync(folderPath)
+  .map((fileName) => {
+    const { name } = path.parse(fileName);
+    return name;
+  }) || [];
+
+module.exports = locales;

assets/src/App.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { MediaProvider } from '@rankyMedia/context/MediaContext';
+import { AppType } from '@rankyMedia/types/Config';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      staleTime: 60 * 2000,
+    },
+  },
+});
+
+const App: React.FC<AppType> = ({
+  children, apiPrefix, selectionMode, multipleSelection, title, targetRef,
+}) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <MediaProvider
+        title={title}
+        apiPrefix={apiPrefix}
+        selectionMode={selectionMode}
+        multipleSelection={multipleSelection}
+        targetRef={targetRef}
+      >
+        <React.StrictMode>
+          {children}
+        </React.StrictMode>
+      </MediaProvider>
+    </QueryClientProvider>
+  );
+};
+export default App;