This directory contains packages and applications that power Code.org sites.

Note: Most of Code.org's Studio product (student experience, curriculum, teacher tools, etc.) is built in the top-level apps package and is not currently located in this directory.

This directory uses Turborepo to manage the monorepo and uses the following package structure:

• apps: Applications or services (Contentful CMS, Storybook, etc.)
• packages: Libraries, build tools, configurations (Shared linter configs, component library, etc.)

Open source Code.org applications:

• @code-dot-org/marketing: Code.org's marketing site (uses Contentful).
• @code-dot-org/design-system-storybook: A Storybook instance for the Code.org design system (@code-dot-org/component-library). Publicly available at https://code-dot-org.github.io/code-dot-org/component-library-storybook.

Publicly available packages:

• @code-dot-org/component-library: The Code.org Design System React component library.
• @code-dot-org/component-library-styles: Common Styles (variables, colors, mixins, typography styles, etc) of Code.org Design System (@code-dot-org/component-library). Based on Figma. Used by @code-dot-org/component-library, should also be used as a standalone package for styling components with Code.org's Design System styles.
• @code-dot-org/lint-config: Shared linters configuration for Code.org projects (includes eslint, lint-staged, prettier, stylelint, typescript configs).
• @code-dot-org/fonts: Code.org's Design System fonts package.
• @code-dot-org/changelogs: Release-it configuration for changelogs automatic generation, package versioning, and publishing.

(!!!) If you're unable to find some information in this README.md, please refer to the documentation of package/app that you're working on. (e.g. go to packages/component-library/README.md, apps/marketing/README.md, etc)

Ensure that corepack is enabled.

corepack enable

Initialize the frontend package:

yarn install

Turborepo will automatically detect changed sub-directories and appropriately cache to avoid duplicate work.

To build all apps and packages, run the following command:

yarn build

To develop all apps and packages, run the following command:

yarn dev

To develop a specific set of apps and packages, use yarn workspace [workspace name] [command]. More information on this command here.

For example, to only run the design system storybook:

yarn workspace @code-dot-org/design-system-storybook dev

To format all files in all packages and apps, run the following command:

yarn lint:fix

You can also run this command for some specific package or app using yarn workspace:

yarn lint:fix --filter @code-dot-org/component-library

OR

yarn workspace @code-dot-org/component-library lint:fix

To run all tests that the pull-request quality checks do:

yarn release:dryrun

This command executes all lint, test, and build commands.

The design system uses Applitools Eyes via their Storybook integration to take a visual snapshot of a storybook component and compare it with baselines. Visual snapshots on pull requests and during the CI build.

To run visual snapshots locally, first obtain an Applitools API Key.

Then, assign the API key to frontend/.env in the APPLITOOLS_API_KEY key. (If this file does not exist, copy it from frontend/.env.example)

To run the visual tests:

yarn workspace @code-dot-org/design-system-storybook eyes-storybook

If differences are detected, follow the baseline update guide to resolve.

To remove build artifacts, use the following commmand:

yarn clean