EverShop
Documentation | Demo
Password: 123456 ## Support If you like my work, feel free to: - ⭐ this repository. It helps. - [][tweet] about EverShop. Thank you! [tweet]: https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Fevershopcommerce%2Fevershop&text=Awesome%20React%20Ecommerce%20Project&hashtags=react,ecommerce,expressjs,graphql ## Contributing EverShop is an open-source project. We are committed to a fully transparent development process and appreciate highly any contributions. Whether you are helping us fix bugs, proposing new features, improving our documentation or spreading the word - we would love to have you as part of the EverShop community. ### Ask a question about EverShop You can ask questions, and participate in discussions about EverShop-related topics in the EverShop Discord channel.
### Create a bug report
If you see an error message or run into an issue, please [create bug report](https://github.com/evershopcommerce/evershop/issues/new). This effort is valued and it will help all EverShop users.
### Submit a feature request
If you have an idea, or you're missing a capability that would make development easier and more robust, please [Submit feature request](https://github.com/evershopcommerce/evershop/issues/new).
If a similar feature request already exists, don't forget to leave a "+1".
If you add some more information such as your thoughts and vision about the feature, your comments will be embraced warmly :)
Please refer to our [Contribution Guidelines](./CONTRIBUTING.md) and [Code of Conduct](./CODE_OF_CONDUCT.md).
## 🚀 The Future of EverShop
EverShop is seeing rapid organic growth and strong adoption from the developer community. We are now scaling our operations and building **EverShop Cloud**.
If you are a strategic investor interested in the future of Node.js commerce and our mission to set a new standard for modern eCommerce, we’d love to share our vision and roadmap with you.
📩 **Get in touch:** support@evershop.io
## License
[GPL-3.0 License](https://github.com/evershopcommerce/evershop/blob/main/LICENSE)
================================================
FILE: docker-compose.yml
================================================
version: '3.8'
services:
app:
image: evershop/evershop:latest
restart: always
environment:
DB_HOST: database
DB_PORT: 5432
DB_PASSWORD: postgres
DB_USER: postgres
DB_NAME: postgres
networks:
- myevershop
depends_on:
- database
ports:
- 3000:3000
#The postgres database:
database:
image: postgres:16
restart: unless-stopped
volumes:
- postgres-data:/var/lib/postgresql/data
environment:
POSTGRES_PASSWORD: postgres
POSTGRES_USER: postgres
POSTGRES_DB: postgres
ports:
- "5432:5432"
networks:
- myevershop
networks:
myevershop:
name: MyEverShop
driver: bridge
volumes:
postgres-data:
================================================
FILE: eslint.config.js
================================================
// eslint.config.js
import eslintPluginTypescript from '@typescript-eslint/eslint-plugin';
import typescriptParser from '@typescript-eslint/parser';
import pluginImport from 'eslint-plugin-import';
import jsxA11y from 'eslint-plugin-jsx-a11y';
import pluginReact from 'eslint-plugin-react';
export default [
{
ignores: [
"/node_modules/",
"**/*test.js",
"**/tests/**",
"**/create-evershop-app/**",
"**/.evershop/**",
"/.vscode/**",
"/.git/**",
"/.idea/**",
"**/extensions/**",
"**/public/**",
"**/themes/**",
"**/media/**",
"**/dist/**",
"**/packages/*/dist/**",
"**/packages/evershop/dist/**",
"**/packages/postgres-query-builder/dist/**",
"**/packages/product_review/**",
"**/packages/resend/**"
]},
pluginReact.configs.flat.recommended,
pluginReact.configs.flat['jsx-runtime'],
jsxA11y.flatConfigs.recommended,
{
files: ["**/*.ts", "**/*.tsx", "**/*.d.ts"],
plugins: {
"@typescript-eslint": eslintPluginTypescript
},
languageOptions: {
parser: typescriptParser,
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
}
}
},
{
plugins: {
"import": pluginImport
},
languageOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
parserOptions : {
ecmaFeatures: {
jsx: true
}
}
},
rules: {
semi: "off",
"prefer-const": "error",
"import/no-dynamic-require": 0,
"no-else-return": "off",
"import/prefer-default-export": 0,
"jsx-a11y/anchor-is-valid": 0,
"import/no-extraneous-dependencies": "off",
"import/no-unresolved": "off",
"camelcase": "off",
"no-multi-assign": "off",
"no-template-curly-in-string": "off",
"react/no-array-index-key": "off",
"react/no-unstable-nested-components": "off",
"no-continue": "off",
"no-await-in-loop": "off",
"no-use-before-define" : "off",
"global-require": "off",
"import/extensions": "off",
"no-shadow": "off",
"no-lonely-if": "warn",
"no-console": "error",
"no-useless-return": "off",
"react/display-name": "off",
"jsx-a11y/label-has-associated-control": "off",
"jsx-a11y/role-supports-aria-props": "warn",
"jsx-a11y/no-noninteractive-element-interactions": "warn",
// Add import sorting rules
"import/order": ["warn", {
"groups": ["builtin", "external", "internal", "parent", "sibling", "index"],
"newlines-between": "never",
"alphabetize": {
"order": "asc",
"caseInsensitive": true
}
}]
},
settings: {
react: {
version: "detect"
}
}
}
]
================================================
FILE: jest.config.js
================================================
export default {
testEnvironment: "node",
moduleNameMapper: {
'^@evershop/postgres-query-builder$': 'Please refer to its documentation: - [Getting Started](https://evershop.io/docs/development/getting-started/introduction) – How to create a new app. - [Development Guide](https://evershop.io/docs/development/) – How to develop an ecommerce web app with EverShop. ================================================ FILE: packages/create-evershop-app/createEverShopApp.js ================================================ const https = require('https'); const chalk = require('chalk'); const commander = require('commander'); const dns = require('dns'); const { execSync } = require('child_process'); const fs = require('fs-extra'); const os = require('os'); const path = require('path'); const semver = require('semver'); const spawn = require('cross-spawn'); const url = require('url'); const validateProjectName = require('validate-npm-package-name'); const { mkdir } = require('fs/promises'); const packageJson = require('./package.json'); function isUsingYarn() { return (process.env.npm_config_user_agent || '').indexOf('yarn') === 0; } let projectName; function init() { const program = new commander.Command(packageJson.name) .version(packageJson.version) .arguments('[project-directory]') .usage(`${chalk.green('
Everywhere
This component is rendered on every page of the store front.
You can modify this component at{' '}
`themes/sample/src/pages/all/EveryWhere.tsx`
You can also remove this by disabling the theme `sample`.
Home Page Only
This component is only rendered on the home page.
You can modify this component at{' '}
`themes/sample/src/pages/homepage/OnlyHomePage.tsx`
You can also remove this by disabling the theme `sample`.
EverShop
Documentation | Demo
Password: 123456 ## Support If you like my work, feel free to: - ⭐ this repository. It helps. - [][tweet] about EverShop. Thank you! [tweet]: https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Fevershopcommerce%2Fevershop&text=Awesome%20React%20Ecommerce%20Project&hashtags=react,ecommerce,expressjs,graphql ## Contributing EverShop is an open-source project. We are committed to a fully transparent development process and appreciate highly any contributions. Whether you are helping us fix bugs, proposing new features, improving our documentation or spreading the word - we would love to have you as part of the EverShop community. ### Ask a question about EverShop You can ask questions, and participate in discussions about EverShop-related topics in the EverShop Discord channel.
### Create a bug report
If you see an error message or run into an issue, please [create bug report](https://github.com/evershopcommerce/evershop/issues/new). This effort is valued and it will help all EverShop users.
### Submit a feature request
If you have an idea, or you're missing a capability that would make development easier and more robust, please [Submit feature request](https://github.com/evershopcommerce/evershop/issues/new).
If a similar feature request already exists, don't forget to leave a "+1".
If you add some more information such as your thoughts and vision about the feature, your comments will be embraced warmly :)
Please refer to our [Contribution Guidelines](./CONTRIBUTING.md) and [Code of Conduct](./CODE_OF_CONDUCT.md).
## License
[GPL-3.0 License](https://github.com/evershopcommerce/evershop/blob/main/LICENSE)
================================================
FILE: packages/evershop/package.json
================================================
{
"name": "@evershop/evershop",
"version": "2.1.1",
"type": "module",
"description": "The React Ecommerce platform. Built with Typescript, React and Postgres. Open-source and free. Fast and customizable.",
"files": [
"dist",
"src",
".swcrc"
],
"bin": {
"evershop": "./dist/bin/evershop.js"
},
"exports": {
"./types/*": {
"types": "./dist/types/*.d.ts"
},
"./lib/helpers": {
"import": "./dist/lib/helpers.js",
"types": "./dist/lib/helpers.d.ts"
},
"./lib/mail/*": {
"import": "./dist/lib/mail/*.js",
"types": "./dist/lib/mail/*.d.ts"
},
"./lib/util/*": {
"import": "./dist/lib/util/*.js",
"types": "./dist/lib/util/*.d.ts"
},
"./lib/event": {
"import": "./dist/lib/event/emitter.js",
"types": "./dist/lib/event/emitter.d.ts"
},
"./lib/event/subscriber": {
"import": "./dist/lib/event/subscriber.js",
"types": "./dist/lib/event/subscriber.d.ts"
},
"./lib/postgres": {
"import": "./dist/lib/postgres/connection.js",
"types": "./dist/lib/postgres/connection.d.ts"
},
"./lib/locale/*": {
"import": "./dist/lib/locale/*.js",
"types": "./dist/lib/locale/*.d.ts"
},
"./lib/log": {
"import": "./dist/lib/log/logger.js",
"types": "./dist/lib/log/logger.d.ts"
},
"./lib/router": {
"import": "./dist/lib/router/index.js",
"types": "./dist/lib/router/index.d.ts"
},
"./lib/widget": {
"import": "./dist/lib/widget/widgetManager.js",
"types": "./dist/lib/widget/widgetManager.d.ts"
},
"./lib/cronjob": {
"import": "./dist/lib/cronjob/jobManager.js",
"types": "./dist/lib/cronjob/jobManager.d.ts"
},
"./lib/middleware/delegate": {
"import": "./dist/lib/middleware/delegate.js",
"types": "./dist/lib/middleware/delegate.d.ts"
},
"./components/common/*": {
"import": "./dist/components/common/*.js",
"types": "./dist/components/common/*.d.ts"
},
"./components/admin/*": {
"import": "./dist/components/admin/*.js",
"types": "./dist/components/admin/*.d.ts"
},
"./components/frontStore/*": {
"import": "./dist/components/frontStore/*.js",
"types": "./dist/components/frontStore/*.d.ts"
},
"./graphql/services": {
"import": "./dist/modules/graphql/services/index.js",
"types": "./dist/modules/graphql/services/index.d.ts"
},
"./catalog/services": {
"import": "./dist/modules/catalog/services/index.js",
"types": "./dist/modules/catalog/services/index.d.ts"
},
"./customer/services": {
"import": "./dist/modules/customer/services/index.js",
"types": "./dist/modules/customer/services/index.d.ts"
},
"./setting/services": {
"import": "./dist/modules/setting/services/index.js",
"types": "./dist/modules/setting/services/index.d.ts"
},
"./checkout/services": {
"import": "./dist/modules/checkout/services/index.js",
"types": "./dist/modules/checkout/services/index.d.ts"
},
"./oms/services": {
"import": "./dist/modules/oms/services/index.js",
"types": "./dist/modules/oms/services/index.d.ts"
},
"./cms/services": {
"import": "./dist/modules/cms/services/index.js",
"types": "./dist/modules/cms/services/index.d.ts"
},
"./package.json": "./package.json"
},
"scripts": {
"prepack": "rimraf dist && tsc && copyfiles -u 1 \"src/**/*.{graphql,scss,css,json}\" dist",
"dev": "node ./dist/bin/dev/index.js",
"start": "node ./dist/bin/start/index.js",
"build": "node ./dist/bin/build/index.js",
"build-fast": "evershop build -- --skip-minify",
"user:create": "evershop user:create",
"user:changePassword": "evershop user:changePassword",
"test": "jest"
},
"author": "The Nguyen (https://evershop.io)",
"license": "GNU GENERAL PUBLIC LICENSE 3.0",
"repository": {
"type": "git",
"url": "git+https://github.com/evershopcommerce/evershop.git"
},
"keywords": [
"ecommerce",
"shopping cart",
"cart"
],
"bugs": {
"url": "https://github.com/evershopcommerce/evershop/issues"
},
"homepage": "http://evershop.io/",
"dependencies": {
"@base-ui/react": "^1.1.0",
"@ckeditor/ckeditor5-build-classic": "^36.0.1",
"@ckeditor/ckeditor5-react": "^5.1.0",
"@dnd-kit/core": "^6.3.1",
"@dnd-kit/sortable": "^10.0.0",
"@editorjs/editorjs": "^2.30.8",
"@editorjs/header": "^2.8.7",
"@editorjs/list": "^1.10.0",
"@editorjs/quote": "^2.6.0",
"@editorjs/raw": "^2.5.0",
"@evershop/editorjs-image": "^1.1.0",
"@evershop/postgres-query-builder": "^2.0.1",
"@graphql-tools/load-files": "^6.6.1",
"@graphql-tools/merge": "^8.4.2",
"@graphql-tools/schema": "^9.0.19",
"@hapi/topo": "^5.0.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.6.0",
"@stripe/react-stripe-js": "^1.5.0",
"@stripe/stripe-js": "^1.18.0",
"@swc/cli": "^0.7.7",
"@swc/core": "^1.11.29",
"@tailwindcss/postcss": "^4.1.18",
"@tailwindcss/typography": "^0.5.13",
"ajv": "^8.12.0",
"ajv-errors": "^3.0.0",
"ajv-formats": "^2.1.1",
"autoprefixer": "^10.4.13",
"axios": "^1.13.2",
"bcryptjs": "^2.4.3",
"body-parser": "^1.20.0",
"boxen": "^5.1.2",
"class-variance-authority": "^0.7.1",
"clean-css": "^5.3.1",
"clsx": "^2.1.1",
"config": "^3.3.6",
"connect-pg-simple": "^9.0.0",
"cookie-parser": "^1.4.6",
"cross-spawn": "^7.0.6",
"css-loader": "^6.7.1",
"csv-parser": "^3.0.0",
"dayjs": "^1.10.6",
"debug": "^4.3.2",
"dotenv": "^16.3.1",
"enquirer": "^2.3.6",
"execa": "^9.6.0",
"express": "^4.21.2",
"express-session": "^1.17.3",
"fast-glob": "^3.3.3",
"flatpickr": "^4.6.9",
"graphql": "^16.6.0",
"graphql-tag": "^2.12.6",
"graphql-type-json": "^0.3.2",
"handlebars": "^4.7.8",
"html-entities": "^2.3.3",
"html-webpack-plugin": "^5.5.0",
"immer": "^10.1.1",
"jsesc": "^3.0.2",
"json5": "^2.2.1",
"jsonwebtoken": "^9.0.2",
"kleur": "3.0.3",
"lodash.isequalwith": "^4.4.0",
"lucide-react": "^0.562.0",
"luxon": "^2.0.2",
"mini-css-extract-plugin": "^2.6.1",
"minimatch": "^10.2.3",
"multer": "^2.1.1",
"node-cron": "^3.0.3",
"ora": "^5.4.1",
"pg": "^8.16.3",
"postcss": "^8.4.18",
"postcss-loader": "^8.2.0",
"prop-types": "^15.8.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-fast-compare": "^3.2.0",
"react-hook-form": "^7.61.1",
"react-refresh": "^0.14.0",
"react-select": "^5.4.0",
"react-slick": "^0.31.0",
"react-toastify": "^6.2.0",
"recharts": "^2.0.9",
"sanitize-html": "^2.17.0",
"sass": "^1.53.0",
"sass-loader": "^13.0.2",
"semver": "^7.6.3",
"serve-static": "^1.15.0",
"session-file-store": "^1.5.0",
"sharp": "^0.33.5",
"slick-carousel": "^1.8.1",
"stripe": "^8.176.0",
"style-loader": "^3.3.1",
"swc-minify-webpack-plugin": "^2.1.3",
"tailwind-merge": "^3.4.0",
"tailwindcss": "^4.1.18",
"touch": "^3.1.1",
"tw-animate-css": "^1.4.0",
"uniqid": "^5.3.0",
"urql": "^3.0.3",
"uuid": "^9.0.0",
"webpack": "^5.72.1",
"webpack-dev-middleware": "^7.4.2",
"webpack-hot-middleware": "^2.26.1",
"webpackbar": "^5.0.2",
"winston": "^3.3.3",
"yargs": "^17.7.2",
"zero-decimal-currencies": "^1.2.0"
},
"devDependencies": {
"@parcel/watcher": "^2.5.1",
"@paypal/paypal-js": "^8.4.2",
"@types/config": "^3.3.5",
"@types/express": "^5.0.1",
"@types/express-session": "^1.18.2",
"@types/multer": "^2.0.0",
"@types/node": "^22.14.1",
"@types/pg": "^8.15.2",
"@types/react": "^19.1.2",
"@types/sanitize-html": "^2.16.0",
"copyfiles": "^2.4.1",
"typescript": "^5.8.3"
}
}
================================================
FILE: packages/evershop/scripts/postpack.js
================================================
import fs from 'fs';
import path from 'path';
import packageJson from '../package.json' with { type: 'json' };
// Get the current version of the package from the nearest package.json file
const { version } = packageJson;
// Get the --pack-destination from the command line arguments
// Create a package.json file in the packDestination directory with dependencies is the package itself
fs.writeFileSync(
path.resolve(process.env.npm_config_pack_destination, 'package.json'),
JSON.stringify(
{
name: packageJson.name,
version,
dependencies: {
'@evershop/evershop': `file:./evershop-evershop-${version}.tgz`
},
scripts: {
setup: 'evershop install',
start: 'evershop start',
'start:debug': 'evershop start:debug',
build: 'evershop build',
dev: 'evershop dev',
'user:create': 'evershop user:create'
}
},
null,
2
)
);
================================================
FILE: packages/evershop/scripts/postpublish.js
================================================
import fs from 'fs';
import path from 'path';
function getFileRecursive(dir, files) {
const list = fs.readdirSync(dir);
list.forEach((file) => {
const filePath = path.join(dir, file);
const stat = fs.statSync(filePath);
if (stat.isDirectory()) {
getFileRecursive(filePath, files);
} else {
files.push(filePath);
}
});
}
const files = [];
getFileRecursive(path.resolve(__dirname, './bin/serve'), files);
files.forEach((file) => {
const source = fs.readFileSync(file, { encoding: 'utf8', flag: 'r' });
const result = source.replace(/\.\.\/dist/g, '../src');
fs.writeFileSync(file, result, 'utf8');
});
================================================
FILE: packages/evershop/scripts/prepublish.js
================================================
import fs from 'fs';
import path from 'path';
fs.copyFile(
path.resolve(__dirname, '../../README.md'),
path.resolve(__dirname, './README.md'),
(err) => {
if (err) throw err;
}
);
================================================
FILE: packages/evershop/src/bin/build/client/index.js
================================================
import webpack from 'webpack';
import { error } from '../../../src/lib/log/logger';
import { createConfigClient } from '../../../src/lib/webpack/prod/createConfigClient';
export async function buildClient(routes) {
const config = createConfigClient(routes);
const compiler = webpack(config);
return new Promise((resolve, reject) => {
compiler.run((err, stats) => {
if (err || stats.hasErrors()) {
error(
stats.toString({
errorDetails: true,
warnings: true
})
);
reject(err);
}
resolve(stats);
});
});
}
================================================
FILE: packages/evershop/src/bin/build/complie.js
================================================
import pkg from 'webpack';
import { error } from '../../lib/log/logger.js';
import { createConfigClient } from '../../lib/webpack/prod/createConfigClient.js';
import { createConfigServer } from '../../lib/webpack/prod/createConfigServer.js';
const { webpack } = pkg;
export async function compile(routes) {
const config = [createConfigClient(routes), createConfigServer(routes)];
const compiler = webpack(config);
return new Promise((resolve, reject) => {
compiler.run((err, stats) => {
if (err || stats.hasErrors()) {
if (err) {
error(err);
}
error(
stats.toString({
errorDetails: true,
warnings: true
})
);
reject(err);
}
resolve(stats);
});
});
}
================================================
FILE: packages/evershop/src/bin/build/index.js
================================================
import { existsSync, mkdirSync, rmSync } from 'fs';
import path from 'path';
import config from 'config';
import { CONSTANTS } from '../../lib/helpers.js';
import { error } from '../../lib/log/logger.js';
import { loadModuleRoutes } from '../../lib/router/loadModuleRoutes.js';
import { getRoutes } from '../../lib/router/Router.js';
import { lockHooks } from '../../lib/util/hookable.js';
import { lockRegistry } from '../../lib/util/registry.js';
import { validateConfiguration } from '../../lib/util/validateConfiguration.js';
import { isBuildRequired } from '../../lib/webpack/isBuildRequired.js';
import { getEnabledExtensions } from '../extension/index.js';
import { loadBootstrapScript } from '../lib/bootstrap/bootstrap.js';
import { buildEntry } from '../lib/buildEntry.js';
import { getCoreModules } from '../lib/loadModules.js';
import { compile } from './complie.js';
import './initEnvBuild.js';
/* Loading modules and initilize routes, components */
const modules = [...getCoreModules(), ...getEnabledExtensions()];
/** Loading routes */
modules.forEach((module) => {
try {
// Load routes
loadModuleRoutes(module.path);
} catch (e) {
error(e);
process.exit(0);
}
});
/** Clean up the build directory */
if (existsSync(path.resolve(CONSTANTS.BUILDPATH))) {
// Delete directory recursively
rmSync(path.resolve(CONSTANTS.BUILDPATH), { recursive: true });
mkdirSync(path.resolve(CONSTANTS.BUILDPATH));
} else {
mkdirSync(path.resolve(CONSTANTS.BUILDPATH), { recursive: true });
}
export default async function build() {
/** Loading bootstrap script from modules */
try {
for (const module of modules) {
await loadBootstrapScript(module, {
command: 'build',
env: 'production',
process: 'main'
});
}
lockHooks();
lockRegistry();
// Get the configuration (nodeconfig)
validateConfiguration(config);
} catch (e) {
error(e);
process.exit(1);
}
process.env.ALLOW_CONFIG_MUTATIONS = false;
const routes = getRoutes();
await buildEntry(routes.filter((r) => isBuildRequired(r)));
/** Build */
await compile(routes);
}
process.on('uncaughtException', function (exception) {
import('../../lib/log/logger.js').then((module) => {
module.error(exception);
});
});
process.on('unhandledRejection', (reason, p) => {
import('../../lib/log/logger.js').then((module) => {
module.error(`Unhandled Rejection: ${reason} at: ${p}`);
});
});
build();
================================================
FILE: packages/evershop/src/bin/build/initEnvBuild.ts
================================================
import 'dotenv/config';
process.env.NODE_ENV = 'production';
process.env.ALLOW_CONFIG_MUTATIONS = 'true';
================================================
FILE: packages/evershop/src/bin/build/server/index.js
================================================
import pkg from 'webpack';
import { error } from '../../../src/lib/log/logger.js';
import { createConfigServer } from '../../../src/lib/webpack/prod/createConfigServer.js';
const { webpack } = pkg;
export const buildServer = async function buildServer(routes) {
const config = createConfigServer(routes);
const compiler = webpack(config);
return new Promise((resolve, reject) => {
compiler.run((err, stats) => {
if (err || stats.hasErrors()) {
error(
stats.toString({
errorDetails: true,
warnings: true
})
);
reject(err);
}
resolve(stats);
});
});
};
================================================
FILE: packages/evershop/src/bin/build/server/useDDL.js
================================================
import { existsSync, rmdirSync } from 'fs';
import { mkdir, writeFile } from 'fs/promises';
import path from 'path';
import { inspect } from 'util';
import boxen from 'boxen';
import { green, red } from 'kleur';
import ora from 'ora';
import pkg from 'webpack';
import { getComponentsByRoute } from '../../../src/lib/componee/getComponentByRoute.js';
import { CONSTANTS } from '../../../src/lib/helpers.js';
import { info } from '../../../src/lib/log/logger.js';
import { getRoutes } from '../../../src/lib/router/routes.js';
// Run building vendor first
import { createVendorConfig } from '../../../src/lib/webpack/configProvider.js';
import { loadModuleComponents } from '../../serve/loadModuleComponents.js';
import { loadModuleRoutes } from '../../serve/loadModuleRoutes.js';
import { loadModules } from '../../serve/loadModules.js';
const { webpack } = pkg;
const modules = loadModules(path.resolve(__dirname, '../../../src', 'modules'));
const spinner = ora({
text: green('Starting server build'),
spinner: 'dots12'
}).start();
spinner.start();
// Initilizing routes
modules.forEach((module) => {
try {
// Load routes
loadModuleRoutes(module.path);
} catch (e) {
spinner.fail(`${red(e.stack)}\n`);
process.exit(0);
}
});
// Initializing components
modules.forEach((module) => {
try {
// Load components
loadModuleComponents(module.path);
} catch (e) {
spinner.fail(`${red(e.stack)}\n`);
process.exit(0);
}
});
const routes = getRoutes();
// Collect all "controller" route
const controllers = routes.filter((r) => r.isApi === false);
const promises = [];
const total = controllers.length - 1;
let completed = 0;
spinner.text = `Start building ☕☕☕☕☕\n${Array(total).fill('▒').join('')}`;
if (existsSync(path.resolve(CONSTANTS.ROOTPATH, './.evershop/build'))) {
rmdirSync(path.resolve(CONSTANTS.ROOTPATH, './.evershop/build'), {
recursive: true
});
}
const start = Date.now();
const vendorComplier = webpack(createVendorConfig(webpack));
const webpackVendorPromise = new Promise((resolve, reject) => {
vendorComplier.run((err, stats) => {
if (err) {
reject(err);
} else if (stats.hasErrors()) {
reject(
new Error(
stats.toString({
errorDetails: true,
warnings: true
})
)
);
} else {
resolve(stats);
}
});
});
webpackVendorPromise.then(async () => {
controllers.forEach((route) => {
const buildFunc = async function () {
const components = getComponentsByRoute(route.id);
if (!components) {
return;
}
Object.keys(components).forEach((area) => {
Object.keys(components[area]).forEach((id) => {
components[area][
id
].component = `---require("${components[area][id].source}")---`;
delete components[area][id].source;
});
});
const buildPath =
route.isAdmin === true
? `./admin/${route.id}`
: `./frontStore/${route.id}`;
let content = `var components = module.exports = exports = ${inspect(
components,
{ depth: 5 }
)
.replace(/'---/g, '')
.replace(/---'/g, '')}`;
content += '\r\n';
await mkdir(
path.resolve(CONSTANTS.ROOTPATH, './.evershop/build', buildPath),
{ recursive: true }
);
await writeFile(
path.resolve(
CONSTANTS.ROOTPATH,
'.evershop/build',
buildPath,
'components.js'
),
content
);
const name =
route.isAdmin === true ? `admin/${route.id}` : `frontStore/${route.id}`;
const entry = {};
entry[name] = [
path.resolve(
CONSTANTS.ROOTPATH,
'.evershop',
'build',
buildPath,
'components.js'
),
path.resolve(
CONSTANTS.LIBPATH,
'../components/common/react/server',
'render.js'
)
];
const compiler = webpack({
mode: 'production', // "production" | "development" | "none"
module: {
rules: [
{
test: /\/views|components|context\/(.*).js?$/,
// test: /\.js?$/,
exclude: /(bower_components)/,
use: {
loader: 'babel-loader?cacheDirectory',
options: {
sourceType: 'unambiguous',
cacheDirectory: true,
presets: [
[
'@babel/preset-env',
{
exclude: [
'@babel/plugin-transform-regenerator',
'@babel/plugin-transform-async-to-generator'
]
}
],
'@babel/preset-react'
]
}
}
},
{
test: /getComponents\.js/,
use: [
{
loader: path.resolve(
CONSTANTS.LIBPATH,
'webpack/getComponentLoader.js'
),
options: {
componentsPath: path.resolve(
CONSTANTS.ROOTPATH,
'./.evershop/build',
buildPath,
'components.js'
)
}
}
]
}
]
},
// name: 'main',
target: 'node12.18',
entry,
output: {
path: path.resolve(
CONSTANTS.ROOTPATH,
'./.evershop/build',
buildPath,
'server'
),
libraryTarget: 'commonjs2',
globalObject: 'this',
filename: 'index.js'
},
resolve: {
alias: {
react: path.resolve(CONSTANTS.NODEMODULEPATH, 'react')
}
},
plugins: [
new webpack.DllReferencePlugin({
manifest: path.resolve(
CONSTANTS.ROOTPATH,
'./.evershop/build/vendor-manifest.json'
)
})
]
});
const webpackPromise = new Promise((resolve, reject) => {
compiler.run((err, stats) => {
if (err) {
reject(err);
} else if (stats.hasErrors()) {
reject(
new Error(
stats.toString({
errorDetails: true,
warnings: true
})
)
);
} else {
resolve(stats);
}
});
});
await webpackPromise;
completed += 1;
spinner.text = `Start building ☕☕☕☕☕\n${Array(completed)
.fill(green('█'))
.concat(total - completed > 0 ? Array(total - completed).fill('▒') : [])
.join('')}`;
};
promises.push(buildFunc());
});
await Promise.all(promises)
.then(() => {
spinner.succeed(
green('Building completed!!!\n') +
boxen(green('Please run "npm run start" to start your website'), {
title: 'EverShop',
titleAlignment: 'center',
padding: 1,
margin: 1,
borderColor: 'green'
})
);
const end = Date.now();
info(`Execution time: ${end - start} ms`);
process.exit(0);
})
.catch((e) => {
spinner.fail(`${red(e)}\n`);
process.exit(0);
});
});
================================================
FILE: packages/evershop/src/bin/build/server/useVendorChunk.js
================================================
import { existsSync, rmSync } from 'fs';
import path from 'path';
import { green, red } from 'kleur';
import ora from 'ora';
import webpack from 'webpack';
import { CONSTANTS } from '../../../src/lib/helpers.js';
import { getRoutes } from '../../../src/lib/router/routes.js';
import { createConfig } from '../../../src/lib/webpack/createConfig.js';
import { loadModuleComponents } from '../../serve/loadModuleComponents.js';
import { loadModuleRoutes } from '../../serve/loadModuleRoutes.js';
import { loadModules } from '../../serve/loadModules.js';
import { createComponents } from '../createComponents.js';
(async () => {
const start = Date.now();
const modules = loadModules(
path.resolve(__dirname, '../../../src', 'modules')
);
const spinner = ora({
text: green('Starting server build'),
spinner: 'dots12'
}).start();
spinner.start();
/** Initilizing routes */
modules.forEach((module) => {
try {
// Load routes
loadModuleRoutes(module.path);
} catch (e) {
spinner.fail(`${red(e.stack)}\n`);
process.exit(0);
}
});
/** Initializing components */
modules.forEach((module) => {
try {
// Load components
loadModuleComponents(module.path);
} catch (e) {
spinner.fail(`${red(e.stack)}\n`);
process.exit(0);
}
});
/** Get list of routes */
const routes = getRoutes();
/** Collect all 'controller' routes */
const controllers = routes.filter((r) => r.isApi === false);
/** Clean up the build directory */
if (existsSync(CONSTANTS.BUILDPATH)) {
rmSync(CONSTANTS.BUILDPATH, { recursive: true });
}
/** Create components.js file for each route */
await createComponents(controllers);
/** Create the webpack complier object */
const compiler = webpack(createConfig(true, controllers));
/** Run the build */
await new Promise((resolve, reject) => {
compiler.run((err, stats) => {
if (err) {
reject(err);
} else if (stats.hasErrors()) {
reject(
new Error(
stats.toString({
errorDetails: true,
warnings: true
})
)
);
} else {
resolve(stats);
}
});
});
const end = Date.now();
spinner.succeed(`${green('Server build completed in')} ${end - start}ms`);
process.exit(0);
})();
================================================
FILE: packages/evershop/src/bin/dev/compileTs.js
================================================
import path from 'path';
import { compileSwc } from '../lib/watch/compileSwc.js';
import { getSrcPaths } from '../lib/watch/getSrcPaths.js';
async function compileTs() {
const srcPaths = getSrcPaths();
const events = srcPaths.map((srcPath) => {
return {
srcPath: srcPath,
distPath: path.resolve(srcPath, '..', 'dist')
};
});
await Promise.all(
events.map((event) => {
return compileSwc(event.srcPath, event.distPath);
})
);
}
export { compileTs };
================================================
FILE: packages/evershop/src/bin/dev/enableWatcher.js
================================================
import { subscribe } from '@parcel/watcher';
import { CONSTANTS } from '../../lib/helpers.js';
import { watchHandler } from '../lib/watch/watchHandler.js';
export default async function enableWatcher() {
const watcherInstance = await subscribe(
CONSTANTS.ROOTPATH,
(err, events) => {
if (err) {
return;
}
watchHandler(events);
},
{
ignore: [
'**/node_modules/**',
'**/dist/**',
'**/build/**',
'**/.git/**',
'**/.cache/**',
'**/.next/**',
'**/.nuxt/**',
'**/.vscode/**'
]
}
);
process.on('SIGINT', () => {
watcherInstance.unsubscribe();
process.exit(0);
});
process.on('SIGTERM', () => {
watcherInstance.unsubscribe();
});
process.on('exit', () => {
watcherInstance.unsubscribe();
});
}
================================================
FILE: packages/evershop/src/bin/dev/hooks.js
================================================
import { isBuiltin } from 'node:module';
import path, { dirname } from 'node:path';
import { fileURLToPath } from 'node:url';
let broadcastChannel;
export function initialize(data) {
broadcastChannel = data.broadcastChannel;
}
export function resolve(specifier, context, nextResolve) {
if (
isBuiltin(specifier) ||
specifier.includes('?t=') ||
context.parentURL === undefined
) {
return nextResolve(specifier, context);
} else {
const modulePath = !specifier.startsWith('file:')
? path.resolve(dirname(fileURLToPath(context.parentURL)), specifier)
: fileURLToPath(specifier);
if (modulePath.includes('node_modules')) {
return nextResolve(specifier, context);
} else {
broadcastChannel.postMessage({
path: modulePath,
});
return nextResolve(specifier, context);
}
}
}
================================================
FILE: packages/evershop/src/bin/dev/index.ts
================================================
import path from 'path';
import { fileURLToPath } from 'url';
import spawn from 'cross-spawn';
import { debug, error } from '../../lib/log/logger.js';
function startDev() {
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const args = [path.resolve(__dirname, 'init.js')];
const appProcess = spawn('node', args, {
stdio: ['inherit', 'inherit', 'inherit', 'ipc'],
env: {
...process.env,
ALLOW_CONFIG_MUTATIONS: true
}
});
appProcess.on('error', (err) => {
error(`Error spawning processor: ${err}`);
});
appProcess.on('message', (message) => {
debug('Restarting the development server');
if (message === 'RESTART_ME') {
if (appProcess && appProcess.pid) {
appProcess.removeAllListeners();
appProcess.kill('SIGTERM');
}
startDev();
}
});
return appProcess;
}
const childProcess = startDev();
process.on('exit', () => {
// Cleanup child processes on exit
if (childProcess && childProcess.pid) {
childProcess.kill();
}
});
================================================
FILE: packages/evershop/src/bin/dev/init.ts
================================================
import './register.js';
import './initEnvDev.js';
import { debug, error } from '../../lib/log/logger.js';
import { start } from '../lib/startUp.js';
import { compileTs } from './compileTs.js';
import enableWatcher from './enableWatcher.js';
await compileTs();
enableWatcher();
start({
command: 'dev',
env: 'development',
process: 'main'
});
process.on('SIGTERM', async () => {
debug('Received SIGTERM, shutting down the main process...');
try {
process.exit(0);
} catch (err) {
error('Error during shutdown the main process:');
error(err);
process.exit(1);
}
});
process.on('uncaughtException', function (exception) {
import('../../lib/log/logger.js').then((module) => {
module.error(exception);
});
});
process.on('unhandledRejection', (reason, p) => {
import('../../lib/log/logger.js').then((module) => {
module.error(`Unhandled Rejection: ${reason} at: ${p}`);
});
});
================================================
FILE: packages/evershop/src/bin/dev/initEnvDev.ts
================================================
import 'dotenv/config';
process.env.NODE_ENV = 'development';
process.env.ALLOW_CONFIG_MUTATIONS = 'true';
================================================
FILE: packages/evershop/src/bin/dev/register.js
================================================
import { register } from 'node:module';
import { MessageChannel } from 'node:worker_threads';
export const maps = new Map();
const { port1: listenChannel, port2: broadcastChannel } = new MessageChannel();
listenChannel.on('message', (message) => {
maps.set(message.path, true);
});
register('./hooks.js', {
parentURL: import.meta.url,
data: { broadcastChannel },
transferList: [broadcastChannel],
});
export function has(pathName) {
return maps.has(pathName);
}
================================================
FILE: packages/evershop/src/bin/evershop.js
================================================
#!/usr/bin/env node
import yargs from 'yargs';
import { hideBin } from 'yargs/helpers';
const { argv } = yargs(hideBin(process.argv));
const command = argv._[0];
try {
if (command === 'build') {
await import('./build/index.js');
} else if (command === 'dev') {
await import('./dev/index.js');
} else if (command === 'start') {
await import('./start/index.js');
} else if (command === 'install') {
await import('./install/index.js');
} else if (command === 'user:create') {
await import('./user/create.js');
} else if (command === 'user:changePassword') {
await import('./user/changePassword.js');
} else if (command === 'theme:active') {
await import('./theme/active.js');
} else if (command === 'theme:twizz') {
await import('./theme/twizz.js');
} else if (command === 'theme:create') {
await import('./theme/create.js');
} else if (command === 'seed') {
await import('./seed/index.js');
} else {
throw new Error('Invalid command');
}
} catch (e) {
import('../lib/log/logger.js').then((module) => {
module.error(e);
});
}
process.on('uncaughtException', function (exception) {
import('../lib/log/logger.js').then((module) => {
module.error(exception);
});
});
process.on('unhandledRejection', (reason, p) => {
import('../lib/log/logger.js').then((module) => {
module.error(`Unhandled Rejection: ${reason} at: ${p}`);
});
});
================================================
FILE: packages/evershop/src/bin/extension/index.ts
================================================
import { existsSync } from 'fs';
import { resolve } from 'path';
import { CONSTANTS } from '../../lib/helpers.js';
import { error, warning } from '../../lib/log/logger.js';
import { getConfig } from '../../lib/util/getConfig.js';
import { isDevelopmentMode } from '../../lib/util/isDevelopmentMode.js';
import { isProductionMode } from '../../lib/util/isProductionMode.js';
import { Extension } from '../../types/extension.js';
import { getCoreModules } from '../lib/loadModules.js';
let extensions: Extension[] | undefined = undefined;
function loadExtensions(): Extension[] {
const coreModules = getCoreModules();
const list = getConfig('system.extensions', []) as Extension[];
const extensions: Extension[] = [];
list.forEach((extension) => {
if (
coreModules.find((module) => module.name === extension.name) ||
extensions.find((e) => e.name === extension.name)
) {
throw new Error(
`Extension ${extension.name} is invalid. extension name must be unique.`
);
}
if (extension.enabled !== true) {
warning(`Extension ${extension.name} is not enabled. Skipping.`);
return;
}
if (!existsSync(extension.resolve)) {
warning(
`Extension ${extension.name} has resolve path ${extension.resolve} which does not exist. Skipping.`
);
return;
}
if (isProductionMode() || extension.resolve.includes('node_modules')) {
// Make sure the folder has 'dist' subdirectory
if (!existsSync(resolve(extension.resolve, 'dist'))) {
error(
`Extension '${
extension.name
}' must have a 'dist' directory at ${resolve(
extension.resolve,
'dist'
)}. This is required for production mode.`
);
process.exit(1);
} else {
extensions.push({
...extension,
path: resolve(CONSTANTS.ROOTPATH, extension.resolve, 'dist')
});
}
}
if (isDevelopmentMode() && !extension.resolve.includes('node_modules')) {
// Make sure the folder has 'src' subdirectory
if (!existsSync(resolve(extension.resolve, 'src'))) {
error(
`Extension '${
extension.name
}' must have a 'src' directory at ${resolve(
extension.resolve,
'src'
)}`
);
process.exit(1);
} else {
extensions.push({
...extension,
srcPath: resolve(extension.resolve, 'src'),
path: resolve(extension.resolve, 'dist')
});
}
}
});
// Sort the extensions by priority, smaller number means higher priority
extensions.sort((a, b) => a.priority - b.priority);
return extensions;
}
export function getEnabledExtensions() {
if (extensions === undefined) {
extensions = loadExtensions();
}
return extensions;
}
================================================
FILE: packages/evershop/src/bin/install/createMigrationTable.js
================================================
import { execute } from '@evershop/postgres-query-builder';
export async function createMigrationTable(connection) {
await execute(
connection,
`CREATE TABLE IF NOT EXISTS "migration" (
"migration_id" INT GENERATED ALWAYS AS IDENTITY (START WITH 1 INCREMENT BY 1) PRIMARY KEY,
"module" varchar NOT NULL,
"version" varchar NOT NULL,
"created_at" TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
"updated_at" TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
CONSTRAINT "MODULE_UNIQUE" UNIQUE ("module")
)`
);
}
================================================
FILE: packages/evershop/src/bin/install/index.js
================================================
import { mkdir, writeFile } from 'fs/promises';
import path from 'path';
import {
commit,
execute,
insertOnUpdate,
rollback,
startTransaction
} from '@evershop/postgres-query-builder';
import boxen from 'boxen';
import enquirer from 'enquirer';
import kleur from 'kleur';
import ora from 'ora';
import { Pool } from 'pg';
import { CONSTANTS } from '../../lib/helpers.js';
import { error, success } from '../../lib/log/logger.js';
import { hashPassword } from '../../lib/util/passwordHelper.js';
import { migrate } from '../lib/bootstrap/migrate.js';
import { getCoreModules } from '../lib/loadModules.js';
// The installation command will create a .env file in the root directory of the project.
// If you are using docker, do not run this command. Instead, you should set the environment variables in the docker-compose.yml file and run `npm run start`
// This command means for the developer who want to install the system on their local machine.
async function install() {
// Check if the env for database is set
if (process.env.DB_HOST) {
error(
'We found that you have already set the environment variables for the database. Look like you have already installed the system. Run `npm run build` and `npm run start` to launch your store.'
);
process.exit(0);
}
var db;
var adminUser;
// eslint-disable-next-line no-console
console.log(
kleur.green(
boxen('Welcome to EverShop - The open-source e-commerce platform', {
title: 'EverShop',
titleAlignment: 'center',
padding: 1,
margin: 1,
borderColor: 'green'
})
)
);
const dbQuestions = [
{
type: 'input',
name: 'databaseHost',
message: 'Postgres Database Host (localhost)',
initial: process.env.DB_HOST || 'localhost',
skip: !!process.env.DB_HOST
},
{
type: 'input',
name: 'databasePort',
message: 'Postgres Database Port (5432)',
initial: process.env.DB_PORT || 5432,
skip: !!process.env.DB_PORT
},
{
type: 'input',
name: 'databaseName',
message: 'Postgres Database Name (evershop)',
initial: process.env.DB_NAME || 'evershop',
skip: !!process.env.DB_NAME
},
{
type: 'input',
name: 'databaseUser',
message: 'Postgres Database User (postgres)',
initial: process.env.DB_USER || 'postgres',
skip: !!process.env.DB_USER
},
{
type: 'input',
name: 'databasePassword',
message: 'PostgreSQL Database Password (Welcome to the ♥ ${name} ♥ theme!
You can edit this file at:
${componentFile}
{skeletonItems.map((_, index) => (
);
};
const isAttributeGroupSelected = (
attributeGroup: AttributeGroupIdentifier,
selectedAttributeGroups: AtLeastOneThere was an error fetching attribute groups. {error.message}
); } return (
) => {
setInputValue(e.target.value);
setLoading(true);
}}
/>
{(fetching || loading) &&
{data.attributeGroups.items.length === 0 && (
))}
)}
{inputValue ? (
)}
{data.attributeGroups.items.map((a) => (
No attribute groups found for query "{inputValue} ”
) : (You have no attribute groups to display
)}{a.groupName}
{!isAttributeGroupSelected(
a,
internalSelectedAttributeGroups
) && (
)}
{isAttributeGroupSelected(
a,
internalSelectedAttributeGroups
) && (
)}
{skeletonItems.map((_, index) => (
);
};
const isCategorySelected = (
category: CategoryIdentifier,
selectedCategories: AtLeastOneThere was an error fetching categories. {error.message}
); } return (
) => {
setInputValue(e.target.value);
setLoading(true);
}}
/>
{(fetching || loading) &&
{data.categories.items.length === 0 && (
))}
)}
{inputValue ? (
)}
{data.categories.items.map((cat) => (
No categories found for query "{inputValue}”
) : (You have no categories to display
)}{cat.path.map((item, index) => ( {item.name} {index < cat.path.length - 1 && ' > '} ))}
{!isCategorySelected(cat, internalSelectedCategories) && (
)}
{isCategorySelected(cat, internalSelectedCategories) && (
)}
{category.hasChildren && (
{
e.preventDefault();
setExpanded(!expanded);
}}
>
{expanded ? (
{data && data.categories.items.length > 0 && expanded && (
-
{data.categories.items.map((child) => (
{error.message}
; } if (!data || !data.categories || data.categories.items.length === 0) { returnThere is no category
;
}
return (
-
{data.categories.items.map((category) => (
{skeletonItems.map((_, index) => (
);
};
const isCollectionSelected = (
collection: CollectionIdentifier,
selectedCollections: AtLeastOneThere was an error fetching collections. {error.message}
); } return (
) => {
setInputValue(e.target.value);
setLoading(true);
}}
/>
{(fetching || loading) &&
{data.collections.items.length === 0 && (
))}
)}
{inputValue ? (
)}
{data.collections.items.map((c) => (
No collections found for query "{inputValue}”
) : (You have no collections to display
)}{c.name}
{!isCollectionSelected(c, internalSelectedCollections) && (
)}
{isCollectionSelected(c, internalSelectedCollections) && (
)}
{
e.preventDefault();
select(file);
}}
>
{file.isSelected === true && (
)}
There was an error fetching file browser APIs. {err.message}
); } if (fetching) { return (
{loading === true && (
);
};
export { FileBrowser };
================================================
FILE: packages/evershop/src/components/admin/FormButtons.tsx
================================================
import { Button } from '@components/common/ui/Button.js';
import React from 'react';
import { useFormContext } from 'react-hook-form';
const FormButtons: React.FC<{
formId: string;
cancelUrl: string;
}> = ({ cancelUrl, formId }) => {
const {
formState: { isSubmitting }
} = useFormContext();
return (
You are here:
{currentPath
.filter((f) => f.name !== '')
.map((f, index) => (
))}
-
{folders.map((f, i) => (
- onSelectFolder(e, f)} > {f} ))} {folders.length === 0 && (
- There is no sub folder. )}
{error}
There is no file to display.
}
{files.map((f) => (
{hasImage ? (
);
} else if (allowSwap && currentImages && currentImages.length > 1) {
return (
There was an error:{error.message}
); } else if (fetching) { return-
({
component: {
default: () => (
{heading}
{skeletonItems.map((_, index) => (
);
};
================================================
FILE: packages/evershop/src/components/admin/ProductSelector.tsx
================================================
import { SimplePagination } from '@components/common/SimplePagination.js';
import { Button } from '@components/common/ui/Button.js';
import { Input } from '@components/common/ui/Input.js';
import { Check } from 'lucide-react';
import React from 'react';
import { toast } from 'react-toastify';
import { useQuery } from 'urql';
import { AtLeastOne } from '../../types/atLeastOne.js';
import { ProductListSkeleton } from './ProductListSkeleton.js';
const SearchQuery = `
query Query ($filters: [FilterInput!]) {
products(filters: $filters) {
items {
productId
uuid
sku
name
price {
regular {
text
}
}
image {
url
}
}
total
}
}
`;
type ProductIdentifier = {
sku?: string;
uuid?: string;
productId?: string;
};
const isProductSelected = (
product: ProductIdentifier,
selectedProducts: ArrayThere was an error fetching products. {error.message}
); } return (
{
setInputValue(e.target.value);
setLoading(true);
}}
/>
{(fetching || loading) &&
{data.products.items.length === 0 && (
))}
)}
{inputValue ? (
)}
{data.products.items.map((product) => (
No products found for query "{inputValue}”
) : (You have no products to display
)}
{product.image?.url && (
)}
{!product.image?.url && (
)}
{product.name}
{product.sku}
{!isProductSelected(product, internalSelectedProducts) && (
)}
{isProductSelected(product, internalSelectedProducts) && (
)}
{status === 0 && Inactive }
{status === 1 && Active }
{src && (
{title}
{title}
order: {w.sortOrder ?? 0}
{rendered}
);
});
if (process.env.NODE_ENV === 'development' && debug) {
return (
-
{data.items.map((item, index) => (
- {item} ))}
); }; const Image: React.FC<{ data: { file: { url: string; width?: number; height?: number }; caption?: string; withBorder?: boolean; withBackground?: boolean; stretched?: boolean; link?: string; }; columnSize: number; }> = ({ data, columnSize }) => { const { file, caption, withBorder, withBackground, stretched, link } = data; const imageStyles = { border: withBorder ? '1px solid #ccc' : 'none', backgroundColor: withBackground ? '#f9f9f9' : 'transparent', width: stretched ? '100%' : 'auto', display: 'block', maxWidth: '100%', margin: '0 auto' }; const imageWidth = file.width || 800; const imageHeight = file.height || (file.width ? Math.round(file.width * 0.75) : 600); // Calculate responsive sizes based on the columnSize prop // columnSize represents the fraction of the row that this column occupies (e.g., 1/2, 1/3, 2/3, etc.) let sizesValue: string; sizesValue = '100vw'; // On mobile, always full viewport width if (columnSize <= 0.25) { sizesValue = '(max-width: 640px) 100vw, (max-width: 768px) 80vw, 25vw'; } else if (columnSize <= 0.34) { sizesValue = '(max-width: 640px) 100vw, (max-width: 768px) 80vw, 33vw'; } else if (columnSize <= 0.5) { sizesValue = '(max-width: 640px) 100vw, (max-width: 768px) 80vw, 50vw'; } else if (columnSize <= 0.67) { sizesValue = '(max-width: 640px) 100vw, (max-width: 768px) 80vw, 67vw'; } else if (columnSize <= 0.75) { sizesValue = '(max-width: 640px) 100vw, (max-width: 768px) 80vw, 75vw'; } else { sizesValue = '(max-width: 640px) 100vw, 100vw'; } const responsiveSizes = sizesValue; const imageElement = ("{data.text}"
{data.caption && - {data.caption}}
{link ? (
{imageElement}
) : (
imageElement
)}
{caption && (
);
};
const RawHtml: React.FC<{ data: { html: string } }> = ({ data }) => {
return ;
};
const RenderEditorJS: React.FC<{
blocks: Array<{ type: string; data: any }>;
columnSize: number; // Renamed from 'size' to 'columnSize' for clarity
}> = ({ blocks, columnSize }) => {
return (
{caption}
)}
{blocks.map((block, index) => {
switch (block.type) {
case 'paragraph':
return
);
};
interface EditorProps {
rows: Row[];
}
export function Editor({ rows }: EditorProps) {
return (
; case 'raw': return
{rows.map((row, index) => {
const rowClasses = getRowClasses(row.size);
return (
);
}
================================================
FILE: packages/evershop/src/components/common/ExtendableTable.tsx
================================================
import Area from '@components/common/Area.js';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow
} from '@components/common/ui/Table.js';
import { _ } from '@evershop/evershop/lib/locale/translate/_';
import React from 'react';
export interface TableColumn
{row.columns.map((column, index) => {
const columnClasses = getColumnClasses(column.size);
return (
);
})}
{column.data?.blocks && (
);
})}
{count} of {total}
{page > 1 && (
{
e.preventDefault();
setPage(page - 1);
}}
>
{fullName}
)
},
props: {
fullName: address.fullName
},
sortOrder: 10,
id: 'fullName'
},
{
component: {
default: ({ address1 }) => (
{address1}
)
},
props: {
address1: address.address1
},
sortOrder: 20,
id: 'address1'
},
{
component: {
default: ({ city, province, postcode, country }) => (
{`${postcode}, ${city}`}
{province && {province.name}, }{' '}
{country.name}
{telephone}
)
},
props: {
telephone: address.telephone
},
sortOrder: 60,
id: 'telephone'
}
]}
/>
);
}
================================================
FILE: packages/evershop/src/components/common/form/CheckboxField.tsx
================================================
import { Tooltip } from '@components/common/form/Tooltip.js';
import { getNestedError } from '@components/common/form/utils/getNestedError.js';
import { Checkbox } from '@components/common/ui/Checkbox.js';
import {
Field,
FieldError,
FieldLabel,
FieldLegend
} from '@components/common/ui/Field.js';
import { Label } from '@components/common/ui/Label.js';
import { _ } from '@evershop/evershop/lib/locale/translate/_';
import React from 'react';
import {
useFormContext,
RegisterOptions,
FieldPath,
FieldValues,
Controller
} from 'react-hook-form';
interface CheckboxOption {
value: string | number;
label: string;
disabled?: boolean;
}
interface CheckboxFieldProps
{rows.map((row) => (
// Grid template columns based on the number of columns in the row
))}
{row.columns.map((column) => (
))}
Maximum file size: {formatFileSize(maxSize)}
)} {files && files.length > 0 && (Selected files:
-
{Array.from(files as FileList).map((file: File, index) => (
- {file.name} ({formatFileSize(file.size)}) ))}
{renderInput()}
{fieldError && {fieldError} }
);
}
return (
{label && (
)}
);
}
================================================
FILE: packages/evershop/src/components/common/form/ReactSelectCreatableField.tsx
================================================
import { getNestedError } from '@components/common/form/utils/getNestedError.js';
import { Field, FieldLabel } from '@components/common/ui/Field.js';
import { _ } from '@evershop/evershop/lib/locale/translate/_';
import React from 'react';
import {
Controller,
FieldPath,
FieldValues,
RegisterOptions,
useFormContext
} from 'react-hook-form';
import CreatableSelect, { CreatableProps } from 'react-select/creatable';
interface SelectOption {
value: any;
label: string;
[key: string]: unknown;
}
interface ReactSelectCreatableFieldProps
{min}
{max}
{fieldError && (
{fieldError}
)}{fieldError}
)} {helperText && !fieldError && ({helperText}
)}