Skip to content

Arc Themes Blocks take in and display ANS data and custom pagebuilder settings. They consume Arc Themes Components

License

Notifications You must be signed in to change notification settings

WPMedia/arc-themes-blocks

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Arc Themes Blocks

This is the lerna-managed monorepo for the blocks that make up the Arc Themes. This monorepo is a collection of packages for blocks. Blocks are tagged together.

Documentation is located in the Themes Internal confluence for internal themes developers.

Available Commands

npm run build-storybook

Builds the storybook static site to the default storybook-static directory based on documentation. This command is exclusively used for building the storybook static site for Chromatic. Chromatic is used for visual regression testing within your pull request. The GitHub Workflow can be modified depending on potential Chromatic or Storybook updates.

npm run format

Run prettier to format all files not excluded by .prettierignore. The .prettierrc.js opts into using tabs for accessibility. See Prettier docs for more information on tabs in prettier. Prettier is run on pre-commit using lint-staged for changed files. npx lint-staged is called from the Husky pre-commit file. The pre-commit hook ensures that all of the files don't need to be formatted with each iteration. I'd also encourage downloading and using the recommended VS Code extensions configured, specifically the Prettier - Code formatter extension.

npm run generate:chain

The command will generate a new chain. This will create a new block folder with a chain folder containing the new chain. The prompt is available: _templates/chain/new.

npm run generate:content-source

The command will generate a new content source. This will create a new block folder with a content source folder containing the new sources folder. The prompt is available: _templates/content-source/new.

npm run generate:feature

The command will generate a new feature. This will create a new block folder with a feature folder containing the new feature. The prompt is available: _templates/feature/new.

npm run generate:feature:feature

The command will generate a new feature within an existing feature block. Within the existing feature folder, a new feature will be created within the preexisting block. The prompt is available: _templates/feature/feature.

npm run generate:feature:content-source

The command will generate a new content source within an existing feature block. Within the existing feature folder, a new content source will be created within the preexisting block. The prompt is available: _templates/feature/content-source.

npm run generate:content-source:content-source

The command will generate a new content source within an existing content source block. Within the existing content source folder, a new content source will be created within the preexisting block. The prompt is available: _templates/content-source/content-source.

npm run generate:content-source:feature

The command will generate a new feature within an existing content source block. Within the existing content source folder, a new feature will be created within the preexisting block. The prompt is available: _templates/content-source/feature.

npm i

Install all dependencies, including nested ones. See more on local paths. The local paths are used for fusion linking. On postinstall, the npx lerna clean -y will run, which removes nested dependencies docs. Any dependencies that an individual block needs, it needs to be installed at the top-level for testing to work. For example, the package algoliasearch will need to be installed at the top-level for testing to work for the algolia-assortment-content-source-block. It should also be installed in the nested block's package.json for installing on Fusion.

npm run generate:intl

Based off of the Lokalise structure, this generates locale files that Fusion can read for each block (e.g., Article Body Block's intl.json). The base translations are available within the locale folder. This script is also located within the locale folder. Note that there is a block that is exclusively translations across other blocks called Global Phrases Block.

npm run lint

The base lint command that runs eslint on all .js and .jsx files in blocks and .storybook directory, excluding any files in .eslintignore. ESlint is used to find potential issues in code. Using VS Code, you can install the ESLint extension to see lint issues in the editor.

npm run lint:fix

Fixes any lint issues that can be automatically fixed from the files mentioned in npm run lint.

npm run lint:styles

The base lint command that runs stylelint on .scss files, excluding any files in .stylelintignore. Stylelint is used to find potential issues in styles.

npm run lint:styles:fix

Fixes any stylelint issues that can be fixed automatically from the files mentioned in npm run lint:styles.

npm run lint:changed-feature-branch

Similar to npm run test:changed-feature-branch, this runs on pre-push and within the GitHub Workflow. It will run eslint on all code that have changed since the last commit on the target release branch. See the .eslintignore and the .eslintrc.js for the configuration.

npm run lint:changed-feature-branch:fix

Using npm run lint:changed-feature-branch logic, but will also fix any potential problems using ESlint's --fix flag. Note that there are some errors and warnings that cannot be fixed automatically, so this command will not fix all issues.

npm run storybook

See storybook setup below for more information. This is a helpful way of developing blocks without using Fusion. Please note the pattern used in blocks for consuming content in the .storybook/alias/content.js file. This is a helpful way of mocking content for blocks using mocks available in the storybook/mock-content folder. There is also a pattern of mocking the content call by using presentational components with a thin wrapper. See examples at Large Promo and its Storybook file, as well as using a parent class-based component with Alert Bar and its Storybook file.

npm run test:watch

Run all tests for code that has changed. Will also show coverage for changed code. This is the command to run when developing. To see coverage thresholds goals, see the jest.config.js file coverageThreshold property. For more information on the jest configuration coverage, see jest docs.

npm run test:changed-feature-branch

Similar to npm run test:watch, but will run tests for all blocks that have changed since the last commit on the target release branch. This should be updated with each new version "jest --changedSince=origin/arc-themes-release-version-2.0.3 --coverage --passWithNoTests", -> "jest --changedSince=origin/arc-themes-release-version-2.0.4 --coverage --passWithNoTests", for 2.0.3 -> 2.0.4. This runs in the GitHub Workflow for testing blocks on Pull Requests. It also runs on pre-push using Husky. Note that the Husky pre-push file is located in root and not in the package.json, per version 7 of Husky.

Storybook Setup

  1. Make sure you have an npmrc file with read-access to @wpmedia packages. This is available in your dev settings.
  2. Create an .npmrc file in the root of your project.
@wpmedia:registry=https://npm.pkg.github.com/
registry=https://registry.npmjs.org

//npm.pkg.github.com/:_authToken=ghp_secrettoken
  1. npm i to install packages
  2. npm run storybook to show the blocks in Storybook. For more info on Storybook, see their documentation. In confluence, we have Storybook best practices as well for themes.

dist-tags

Please see the release notes in Confluence if you are a Themes developer.

This package has been published with a number of dist-tags meant for different purposes:

  • arc-themes-release-version-X.XX - These are versioned versions of all blocks for a given release cycle in the Theme Manifest repo.

License

Shield: CC BY-NC-ND 4.0

This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License

CC BY-NC-ND 4.0

About

Arc Themes Blocks take in and display ANS data and custom pagebuilder settings. They consume Arc Themes Components

Topics

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Languages