React v3

.github/workflows/pull-request.yml

@@ -29,11 +29,14 @@ jobs:
       - name: Installing dependencies
         run: npm ci
 
-      - name: Running tests
-        run: npm run test
+      - name: Running typecheck
+        run: npm run typecheck
 
       - name: Running lint
         run: npm run lint
 
-      - name: Running typecheck
-        run: npm run typecheck
+      - name: Running tests
+        run: npm run test
+
+      - name: Running build
+        run: npm run build

lerna.json

@@ -2,5 +2,6 @@
   "packages": [
     "packages/**/!(dist|playground)*"
   ],
+  "npmClient": "npm",
   "version": "independent"
 }

package.json

@@ -2,16 +2,16 @@
   "name": "frontend-frameworks-monorepo",
   "version": "1.0.0",
   "engines": {
-    "node": ">=14.0.0 <19"
+    "node": ">=16.0.0"
   },
   "scripts": {
     "postinstall": "husky install",
     "install": "lerna bootstrap --ci --hoist @cloudinary/url-gen",
     "build": "lerna run build",
     "quickstart": "lerna bootstrap && lerna run build",
     "test": "lerna run test",
-    "lint": "lerna run lint",
     "typecheck": "lerna run typecheck",
+    "lint": "lerna run lint",
     "build:docs": "node ./scripts/buildDocs.js",
     "start:docs": "live-server --open=public/docs",
     "update:urlgen": "npm install @cloudinary/url-gen@latest --prefix packages/html && npm install @cloudinary/url-gen@latest --prefix packages/react && npm install @cloudinary/url-gen@latest --prefix packages/vue && npm install @cloudinary/url-gen@latest --prefix packages/angular && npm install @cloudinary/url-gen@latest --prefix packages/angular/projects/cloudinary-library"

packages/angular/package.json

@@ -5,6 +5,7 @@
   "repository": "https://github.com/cloudinary/frontend-frameworks",
   "sideEffects": false,
   "scripts": {
+    "postinstall": "npm run prepare-version",
     "ng": "ng",
     "start": "ng serve",
     "build": "npm run prepare-version && npm run build --prefix ../html && ng build cloudinary-library --prod",

packages/react/.eslintignore

@@ -2,4 +2,5 @@ build/
 dist/
 node_modules/
 .snapshots/
-*.min.js
+*.min.js
+.eslintrc.js

packages/react/.eslintrc.js

@@ -0,0 +1,34 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  extends: ['standard', 'standard-react', 'plugin:@typescript-eslint/eslint-recommended', 'plugin:storybook/recommended'],
+  env: {
+    node: true
+  },
+  plugins: ['react', '@typescript-eslint'],
+  parserOptions: {
+    ecmaVersion: 2020,
+    ecmaFeatures: {
+      legacyDecorators: true,
+      jsx: true
+    },
+    project: './tsconfig.json',
+  },
+  settings: {
+    react: {
+      version: '16'
+    }
+  },
+  rules: {
+    'space-before-function-paren': 0,
+    'react/prop-types': 0,
+    'react/jsx-handler-names': 0,
+    'react/jsx-fragments': 0,
+    'react/no-unused-prop-types': 0,
+    'import/export': 0,
+    'no-unused-vars': 'off',
+    semi: 'off',
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': ['error'],
+    '@typescript-eslint/switch-exhaustiveness-check': 'error'
+  }
+};

packages/react/.gitignore

@@ -1,8 +1,9 @@
 node_modules
 .idea
 dist
-#example/src
 playground/node_modules
 coverage
 src/react-app-env.d.ts
 *.tgz
+
+*storybook.log

packages/react/.mocharc.js

@@ -0,0 +1,17 @@
+process.env.TS_NODE_COMPILER_OPTIONS = JSON.stringify({
+  allowJs: true,
+  module: 'commonjs',
+});
+
+process.env.TS_NODE_PREFER_TS_EXTS = 'true';
+
+process.env.NODE_ENV = 'test';
+process.env.TZ = 'UTC';
+
+module.exports = {
+  recursive: true,
+  parallel: true,
+  jobs: 3,
+  timeout: 20000,
+  require: ['tsconfig-paths/register', 'ts-node/register/transpile-only', 'jsdom-global/register'],
+};

packages/react/.mocharc.json

@@ -0,0 +1,8 @@
+{
+  "extensions": ["ts", "tsx"],
+  "spec": ["**/*.test.*"],
+  "node-option": [
+    "experimental-specifier-resolution=node",
+    "loader=ts-node/esm"
+  ]
+}

packages/react/.prettierrc

@@ -1,10 +1,12 @@
 {
   "singleQuote": true,
-  "jsxSingleQuote": true,
-  "semi": false,
+  "jsxSingleQuote": false,
+  "semi": true,
   "tabWidth": 2,
   "bracketSpacing": true,
   "jsxBracketSameLine": false,
+  "printWidth": 120,
   "arrowParens": "always",
-  "trailingComma": "none"
+  "trailingComma": "none",
+  "proseWrap": "always"
 }

packages/react/.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+// const { build } = require("@storybook/core-server");
+// const options = {};
+// build(options).then(() => console.log("done"));
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-webpack5-compiler-swc',
+    // '@storybook/addon-onboarding',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions'
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  }
+};
+export default config;

packages/react/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    }
+  }
+};
+
+export default preview;