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. For the marketing sites application, go to the code-dot-org/marketing-sites repo.

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/studio: An experimental Vite-based shell application for the learning platform.
• @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/studio/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 on the studio application, run in the frontend directory

yarn dev

Changing any monorepo managed dependencies (such as labs) will automatically trigger a rebuild and be made available to the persistent dev server using Turborepo's watch feature.

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