Merge pull request #3044 from raccoongang/Peter_Kulko/alpha-branch-up…

…dating

chore: sync alpha to master

.eslintignore

@@ -3,6 +3,6 @@ dist/
 node_modules/
 www/
 icons/
-dependent-usage-analyzer/
+build-scss.js
 component-generator/
 example/

.github/pull_request_template.md

@@ -14,10 +14,10 @@ Include a direct link to your changes in this PR's deploy preview here (e.g., a
 * [ ] Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
 * [ ] Were your changes tested in the `example` app?
 * [ ] Is there adequate test coverage for your changes?
-* [ ] Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please add `wittjeff` and `adamstankiewicz` as reviewers on this PR.
+* [ ] Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please request an a11y review for the PR in the [#wg-paragon](https://openedx.slack.com/archives/C02NR285KV4) Open edX Slack channel.
 
 ## Post-merge Checklist
 
-* [ ] Verify your changes were released to [NPM](https://www.npmjs.com/package/@edx/paragon) at the expected version.
+* [ ] Verify your changes were released to [NPM](https://www.npmjs.com/package/@openedx/paragon) at the expected version.
 * [ ] If you'd like, [share](https://github.com/openedx/paragon/discussions/new?category=show-and-tell) your contribution in [#show-and-tell](https://github.com/openedx/paragon/discussions/categories/show-and-tell).
 * [ ] 🎉 🙌 Celebrate! Thanks for your contribution.

.github/workflows/analyze-dependents.yml

@@ -2,8 +2,8 @@ name: Analyze Dependents
 
 on:
   workflow_dispatch:
-  schedule:
-  - cron: "0 14 * * *" # daily at 10am EST (Github Actions works with UTC)
+   schedule:
+   - cron: "0 14 * * *" # daily at 10am EST (Github Actions works with UTC)
 
 jobs:
   # clones known dependent Git repositories from Open edX

.github/workflows/ci.yml

@@ -27,9 +27,21 @@ jobs:
       run: npm run lint
     - name: Test
       run: npm run test
+    - name: Verify icon changes
+      run: |
+        cd icons
+        rm -rf jsx
+        rm -rf es5
+        npm run build
+        if [[ -n $(git status -s) ]]; then
+          echo "::error::Generated icons do not match committed icons. Please run \`npm run build\` in the icons directory."
+          exit 1
+        fi
     - name: Build
       run: npm run build
     - name: Build Docs
       run: npm run build-docs
     - name: Coverage
-      uses: codecov/codecov-action@v3
+      uses: codecov/codecov-action@v4
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}

.github/workflows/manual-publish.yml

@@ -26,7 +26,9 @@ jobs:
     - name: i18n_extract
       run: npm run i18n_extract
     - name: Coverage
-      uses: codecov/codecov-action@v2
+      uses: codecov/codecov-action@v4
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
     - name: Build
       run: npm run build
     # NPM expects to be authenticated for publishing. This step will fail CI if NPM is not authenticated

.github/workflows/release.yml

@@ -31,9 +31,11 @@ jobs:
     - name: Build Docs
       run: npm run build-docs
     - name: Coverage
-      uses: codecov/codecov-action@v3
+      uses: codecov/codecov-action@v4
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
     - name: Release
       env:
         GITHUB_TOKEN: ${{ secrets.OPENEDX_SEMANTIC_RELEASE_GITHUB_TOKEN }}
         NPM_TOKEN: ${{ secrets.OPENEDX_SEMANTIC_RELEASE_NPM_TOKEN }}
-      run: npx semantic-release
+      run: npx semantic-release@22

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

Makefile

@@ -1,7 +1,8 @@
 build:
 	rm -rf ./dist
-	tsc --emitDeclarationOnly
-	./node_modules/.bin/babel src --config-file ./babel.config.json --out-dir dist --source-maps --ignore **/*.test.jsx,**/*.test.tsx,**/__mocks__,**/__snapshots__,**/setupTest.js --copy-files --extensions ".tsx,.jsx"
+	tsc --project tsconfig.build.json
+	rm icons/es5/index.d.ts  # We don't need this; not sure how to tell tsc not to generate it
+	./node_modules/.bin/babel src --config-file ./babel.config.json --out-dir dist --source-maps --ignore **/*.d.ts,**/*.test.jsx,**/*.test.tsx,**/__mocks__,**/__snapshots__,**/setupTest.js --copy-files --extensions ".ts,.tsx,.jsx"
 	# --copy-files will bring in everything else that wasn't processed by babel. Remove what we don't want.
 	find ./dist -name "tests" -type d -prune -exec rm -rf "{}" \; # delete tests directories
 	find ./dist -name "*.test.*" -delete # delete other tests files that weren't in tests directories

README.md

@@ -1,11 +1,11 @@
 # Paragon
 
 [![Build Status](https://github.com/openedx/paragon/actions/workflows/release.yml/badge.svg)](https://github.com/openedx/paragon/actions/workflows/release.yml)
-[![npm_version](https://img.shields.io/npm/v/@edx/paragon.svg)](@edx/paragon)
+[![npm_version](https://img.shields.io/npm/v/@openedx/paragon.svg)](@openedx/paragon)
 ![status](https://img.shields.io/badge/status-Maintained-brightgreen)
 ![license](https://img.shields.io/github/license/openedx/paragon.svg)
 [![codecov](https://codecov.io/gh/edx/paragon/branch/master/graph/badge.svg?token=x1tZmNduy9)](https://codecov.io/gh/edx/paragon)
-[![NPM downloads](https://img.shields.io/npm/dw/@edx/paragon)](https://www.npmjs.com/package/@edx/paragon)
+[![NPM downloads](https://img.shields.io/npm/dw/@openedx/paragon)](https://www.npmjs.com/package/@openedx/paragon)
 
 ## Purpose
 
@@ -30,13 +30,13 @@ Paragon components require React 16 or higher. To install Paragon into your proj
 In terminal:
 
 ```
-npm i --save @edx/paragon
+npm i --save @openedx/paragon
 ```
 
 In your React project:
 
 ```
-import { ComponentName } from '@edx/paragon';
+import { ComponentName } from '@openedx/paragon';
 ```
 
 #### SCSS Foundation
@@ -47,7 +47,7 @@ Usage for Open edX and others:
 
 ```
 // ... Any custom SCSS variables should be defined here
-@import '~@edx/paragon/styles/scss/core/core.scss';
+@import '~@openedx/paragon/styles/scss/core/core.scss';
 ```
 
 Usage on with `@edx/brand`:
@@ -57,7 +57,7 @@ Usage on with `@edx/brand`:
 ```
 @import '~@edx/brand/paragon/fonts.scss';
 @import '~@edx/brand/paragon/variables.scss';
-@import '~@edx/paragon/styles/scss/core/core.scss';
+@import '~@openedx/paragon/styles/scss/core/core.scss';
 @import '~@edx/brand/paragon/overrides.scss';
 ```
 
@@ -84,7 +84,7 @@ Due to Paragon's dependence on ``react-intl``, that means that your whole app ne
 
 ```javascript
   import { IntlProvider } from 'react-intl';
-  import { messages as paragonMessages } from '@edx/paragon';
+  import { messages as paragonMessages } from '@openedx/paragon';
 
   ReactDOM.render(
     <IntlProvider locale={usersLocale} messages={paragonMessages[usersLocale]}>
@@ -99,7 +99,7 @@ Note that if you are using ``@edx/frontend-platform``'s ``AppProvider`` componen
 ```javascript
   import { APP_READY, subscribe, initialize } from '@edx/frontend-platform';
   import { AppProvider } from '@edx/frontend-platform/react';
-  import { messages as paragonMessages } from '@edx/paragon';
+  import { messages as paragonMessages } from '@openedx/paragon';
   import App from './App';
   // this is your app's i18n messages
   import appMessages from './i18n';
@@ -151,17 +151,17 @@ module.exports = {
   dist: The sub-directory of the source code where it puts its build artifact. Often "dist".
   */
   localModules: [
-    { moduleName: '@edx/paragon/styles/scss/core', dir: '../src/paragon', dist: 'styles/scss/core' },
-    { moduleName: '@edx/paragon/icons', dir: '../src/paragon', dist: 'icons' },
+    { moduleName: '@openedx/paragon/styles/scss/core', dir: '../src/paragon', dist: 'styles/scss/core' },
+    { moduleName: '@openedx/paragon/icons', dir: '../src/paragon', dist: 'icons' },
     // Note that using dist: 'dist' will require you to run 'npm build' in Paragon
     // to add local changes to the 'dist' directory, so that they can be picked up by the MFE.
     // To avoid doing that you can use dist: 'src' to get any local changes hot reloaded on save in the MFE.
-    { moduleName: '@edx/paragon', dir: '../src/paragon', dist: 'dist' },
+    { moduleName: '@openedx/paragon', dir: '../src/paragon', dist: 'dist' },
   ],
 };
 ```
 
-Then, when importing Paragon's core SCSS in your MFE the import needs to begin with a tilde `~` so that path to your local Paragon repository gets resolved correctly: `@import "~@edx/paragon/styles/scss/core";`
+Then, when importing Paragon's core SCSS in your MFE the import needs to begin with a tilde `~` so that path to your local Paragon repository gets resolved correctly: `@import "~@openedx/paragon/styles/scss/core";`
 
 #### Internationalization
 
@@ -230,7 +230,8 @@ When developing a new component you should generally follow three rules:
                 variant="primary"
               />
             )
-          
+          }
+
           export default MyFunctionComponent;
           ```
 
@@ -478,7 +479,7 @@ The assigned maintainers for this component and other project details may be fou
 ## Reporting Security Issues
 Please do not report security issues in public. Please email security@openedx.org.
 
-We tend to prioritize security issues which impact the published `@edx/paragon` NPM library more so than the [documentation website](https://paragon-openedx.netlify.app/) or example React application.
+We tend to prioritize security issues which impact the published `@openedx/paragon` NPM library more so than the [documentation website](https://paragon-openedx.netlify.app/) or example React application.
 
 ## Design Tokens
 

algolia-docsearch/README.md

@@ -0,0 +1,5 @@
+# Paragon | Algolia DocSearch
+
+This module contains the Algolia DocSearch crawler configuration (i.e., ``crawler-config.js``) that controls the behavior of the Algolia site crawler responsible for indexing content from the Paragon documentation website to the Algolia index.
+
+Any revisions to the configuration in this module must also be persisted upstream in the Algolia DocSearch crawler configuration.

algolia-docsearch/crawler-config.js

@@ -0,0 +1,136 @@
+/* eslint-disable */
+
+// README: When updating the Algolia DocSearch crawler configuration here, it will also need to be updated
+// in the Algolia DocSearch crawler editor (https://crawler.algolia.com/). Otherwise, changes to this persisted
+// configuration will not actually apply to the Paragon documentation website as intended.
+
+// Note: there are REDACTED Algolia `appId` and `apiKey` values below; these should not be committed to the repository
+// but should be included in the crawler configuration in the Algolia DocSearch crawler editor.
+
+new Crawler({
+  rateLimit: 8,
+  startUrls: ["https://paragon-openedx.netlify.app/"],
+  renderJavaScript: false,
+  sitemaps: [],
+  ignoreCanonicalTo: false,
+  discoveryPatterns: ["https://paragon-openedx.netlify.app/**"],
+  schedule: "every 1 day",
+  actions: [
+    {
+      indexName: "paragon-openedx",
+      pathsToMatch: [
+        "https://paragon-openedx.netlify.app/**",
+        "!https://paragon-openedx.netlify.app/insights/",
+        "!https://paragon-openedx.netlify.app/status/",
+        "!https://paragon-openedx.netlify.app/changelog/",
+      ],
+      recordExtractor: ({ helpers, url, $ }) => {
+        const category = url.pathname.split("/")[1] || "Documentation";
+        return helpers.docsearch({
+          recordProps: {
+            // lvl1: ["header h1", "article h1", "main h1", "h1", "head > title"],
+            lvl1: ["main h1"],
+            lvl0: {
+              selectors: "",
+              defaultValue:
+                category.charAt(0).toUpperCase() + category.slice(1),
+            },
+            lvl2: ["main h2"],
+            lvl3: ["article h3", "main h3", "h3"],
+            lvl4: ["article h4", "main h4", "h4"],
+            lvl5: ["article h5", "main h5", "h5"],
+            lvl6: ["article h6", "main h6", "h6"],
+            content: ["article p, article li", "main p, main li", "p, li"],
+          },
+          aggregateContent: true,
+        });
+      },
+    },
+  ],
+  initialIndexSettings: {
+    "paragon-openedx": {
+      attributesForFaceting: ["type", "lang"],
+      attributesToRetrieve: [
+        "hierarchy",
+        "content",
+        "anchor",
+        "url",
+        "url_without_anchor",
+        "type",
+      ],
+      attributesToHighlight: ["hierarchy", "hierarchy_camel", "content"],
+      attributesToSnippet: ["content:10"],
+      camelCaseAttributes: ["hierarchy", "hierarchy_radio", "content"],
+      searchableAttributes: [
+        "unordered(hierarchy_radio_camel.lvl0)",
+        "unordered(hierarchy_radio.lvl0)",
+        "unordered(hierarchy_radio_camel.lvl1)",
+        "unordered(hierarchy_radio.lvl1)",
+        "unordered(hierarchy_radio_camel.lvl2)",
+        "unordered(hierarchy_radio.lvl2)",
+        "unordered(hierarchy_radio_camel.lvl3)",
+        "unordered(hierarchy_radio.lvl3)",
+        "unordered(hierarchy_radio_camel.lvl4)",
+        "unordered(hierarchy_radio.lvl4)",
+        "unordered(hierarchy_radio_camel.lvl5)",
+        "unordered(hierarchy_radio.lvl5)",
+        "unordered(hierarchy_radio_camel.lvl6)",
+        "unordered(hierarchy_radio.lvl6)",
+        "unordered(hierarchy_camel.lvl0)",
+        "unordered(hierarchy.lvl0)",
+        "unordered(hierarchy_camel.lvl1)",
+        "unordered(hierarchy.lvl1)",
+        "unordered(hierarchy_camel.lvl2)",
+        "unordered(hierarchy.lvl2)",
+        "unordered(hierarchy_camel.lvl3)",
+        "unordered(hierarchy.lvl3)",
+        "unordered(hierarchy_camel.lvl4)",
+        "unordered(hierarchy.lvl4)",
+        "unordered(hierarchy_camel.lvl5)",
+        "unordered(hierarchy.lvl5)",
+        "unordered(hierarchy_camel.lvl6)",
+        "unordered(hierarchy.lvl6)",
+        "content",
+      ],
+      distinct: true,
+      attributeForDistinct: "url",
+      customRanking: [
+        "desc(weight.pageRank)",
+        "desc(weight.level)",
+        "asc(weight.position)",
+      ],
+      ranking: [
+        "words",
+        "filters",
+        "typo",
+        "attribute",
+        "proximity",
+        "exact",
+        "custom",
+      ],
+      highlightPreTag: '<span class="algolia-docsearch-suggestion--highlight">',
+      highlightPostTag: "</span>",
+      minWordSizefor1Typo: 3,
+      minWordSizefor2Typos: 7,
+      allowTyposOnNumericTokens: false,
+      minProximity: 1,
+      ignorePlurals: true,
+      advancedSyntax: true,
+      attributeCriteriaComputedByMinProximity: true,
+      removeWordsIfNoResults: "allOptional",
+    },
+  },
+  appId: "", // REDACTED
+  apiKey: "", // REDACTED
+  extraUrls: [
+    "https://paragon-openedx.netlify.app/foundations/colors",
+    "https://paragon-openedx.netlify.app/foundations/elevation",
+    "https://paragon-openedx.netlify.app/foundations/typography",
+    "https://paragon-openedx.netlify.app/foundations/css-utilities",
+    "https://paragon-openedx.netlify.app/foundations/responsive",
+    "https://paragon-openedx.netlify.app/foundations/brand-icons",
+    "https://paragon-openedx.netlify.app/guides/installation-and-usage",
+    "https://paragon-openedx.netlify.app/tools/component-generator",
+    "https://paragon-openedx.netlify.app/playground",
+  ],
+});

bin/paragon-scripts.js

@@ -7,6 +7,7 @@ const replaceVariablesCommand = require('../lib/replace-variables');
 const buildScssCommand = require('../lib/build-scss');
 const { sendTrackInfo } = require('../lib/utils');
 const versionCommand = require('../lib/version');
+const migrateToOpenEdxScopeCommand = require('../lib/migrate-to-openedx-scope');
 
 const commandAliases = {
   '-v': 'version',
@@ -54,6 +55,17 @@ const COMMANDS = {
       },
     ],
   },
+  'migrate-to-openedx-scope': {
+    executor: migrateToOpenEdxScopeCommand,
+    description: 'CLI for migrate from "@edx/paragon" to "@openedx/paragon".',
+    parameters: [
+      {
+        name: 'path',
+        description: 'Path to the directory where to replace Paragon package name, default to root of the repository',
+        required: false,
+      },
+    ],
+  },
   'build-tokens': {
     executor: buildTokensCommand,
     description: 'CLI to build Paragon design tokens.',

catalog-info.yml

@@ -22,7 +22,7 @@ metadata:
     - url: "https://github.com/openedx/paragon/releases"
       title: "GitHub Releases"
       icon: "Source"
-    - url: "https://www.npmjs.com/package/@edx/paragon"
+    - url: "https://www.npmjs.com/package/@openedx/paragon"
       title: "NPM"
       icon: "Terminal"
   annotations:

component-generator/package.json

@@ -10,7 +10,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "axios": "^0.27.2",
+    "axios": "^0.28.0",
     "commander": "^9.3.0",
     "dotenv": "^16.0.0"
   },