Advanced React For Enterprise: React for senior engineers

Build a scalable design system by structuring scss to css builds, importing component styles, and using CSS variables to enable theme overrides for a reusable button.

Create a variables file to define colors, typography, and breakpoints for a design system, using VS code CSS comments for clarity.

Define foundation colors by turning design system variables into meaningful css variables for body text, body background, and component colors; enables overrides and defaults.

Define foundation colors in the underscore colors CSS file for the app bar and the floating action button, including background, text, and elevation variants, and share your solution for collaboration.

Define foundation typography by configuring body and heading styles, including font sizes and weights, via css variables and mapping them from available sources for consistent component typography.

Define the project's typography foundation by specifying font family, line height, letter spacing, and styles for headings and body, using the provided values and variables, then share for feedback.

Explore reusable mixins that abstract min-width media queries using breakpoints from a design system. Define tablet, laptop, and desktop mixins with map-get to apply font sizes and prevent code duplication.

Create a fixed spacing scale powered mixin to generate margins and paddings, including top and left, across the design system, using tokens like extra small and 0.25 rem.

Explore setting up a consistent css style using stylelint and prettier, extending style guidelines for scalable sass, and enforcing formatting with starlings and preacher through npm scripts and lint fixes.

Install and configure husky with lint-staged to run yarn lint fix on staged css and scss files before commits. This automates pre-commit checks and blocks commits on lint errors.

Develops a build workflow that compiles scss to css using node-sass, reads global.scss, writes global.css, and configures include paths and output styles, with plans to compile atoms, molecules, and organisms.

Set up a mono repository with yarn workspaces and learner to manage interdependent packages in a single workspace, implement no-hoist for specific packages, and run builds across packages.

Add a new react package to a mono repository using yarn workspaces, establishing a TypeScript-based design system with atoms, molecules, and organisms, plus a shared index export.

bundle a React package for production with rollup, configure ES module output and sourcemaps, and export full package and individual components like the button atom as external dependencies.

Set up a dev script for each package and a root script to run all in one command, enabling watching, automatic rebuilds, and hot module replacement across packages.

Discover how to decompose a custom select box into atoms, molecules, and organisms, using color and text components and configurable select items for reusable enterprise ui.

Analyze the card image top with overline from the master components page, break it into atoms, molecules, and organisms, capture screenshots of each part, and submit for feedback.

Develop a responsive color component in React by accepting a hex code prop to set the background color, with width and height controlled via design-system spacing values from variables.scss.

Create a dynamic image atom in react that accepts width and height as design-system tokens (large, extra large, extra small, small), avoiding arbitrary pixel values.

Build a reusable margin component that applies left, right, top, and bottom spacing from a design-system scale. Learn to generate dynamic css utilities and defaults for seamless layout control.

Build the select molecule by defining an API with options and label, handling on option selected, and rendering a toggleable button that reveals the options list.

build a maintainable css for a reusable select component using scss, applying flex layouts, relative and absolute positioning for a functional overlay, with design system color variables and mixins.

Learn to position an overlay relative to a button by measuring the button height with a ref and offsetHeight, then set a dynamic overlay top using useEffect.

Style the select option in CSS, configuring the option item with flex and space-between, add hover states, and implement design system variables for consistent theming.

Animate the dropdown caret with a 180-degree rotation when open and 0 degrees when closed, using dynamic css classes and lightweight animations, avoiding heavy libraries.

Learn to make a custom select accessible for assistive technology by adding aria attributes (has popup, expanded, controls, role menu), testing with ChromeVox to announce the dropdown.

Make a dropdown accessible by keyboard navigation: open with enter, space, or down arrow; manage focus with option refs, highlight items, and focus the selected option for the screen reader.

Implement accessible keyboard navigation for the select component by wiring onkeydown handlers, enabling up/down navigation, escape to close, and enter to select, with aria roles and labels for screen readers.

Set up babel and jest for a react project using typescript, install and configure jest, babel presets, and testing library; write a select test that renders options.

Practice testing an enterprise-grade select component. Verify custom render, correct option and index in the callback, and label updates on selection, plus snapshot states for base and open.

Explore testing a reusable React select component for enterprise apps, covering custom render options, data test IDs, on option selected, label customization, and snapshot tests for base and open states.

Set up a design system foundation package with jest-based snapshot tests to guard against unintended changes, configure jest and snapshots, and reuse config across the monorepo for reliable continuous integration.

Set up storybook for the React package, configure main.js to locate stories, enable TypeScript with a preset, install loaders and addons, and add a sample select story with css.

Explore select component variants by adding render option, custom label, and label rendering. Learn to view source code in Storybook and group stories into molecules for reusable design.

Use the storybook Ali addon to run automated accessibility tests on a select component, verify area attributes, and keep the list in the document object model for assistive technologies.

Use chromatic to visually test storybook components for regressions in a large app, capturing snapshots and comparing them in the cloud; set up via yarn add dev chromatic and CI.

Publish enterprise npm packages with lerna by configuring scope and public access, creating an organization, and publishing with semantic versioning and git tags.

Explore how to control published files in npm packages by configuring the package.json files field, distinguishing lib and source, and validating builds and tests before publishing.

Learn how conventional commits enable automatic changelog generation by standardizing commit messages, using commit season to prompt structured inputs, and configuring package.json for a mono repository.

Generate changelogs automatically with lerna by enforcing conventional commits, integrating commitlint and husky, and configuring learner to extract change data from commits and publish to NPM.

Configure a cloud-based continuous integration pipeline with GitHub Actions to build and test code on Ubuntu, including checkout, install dependencies with yarn, and automated tests.

Fix build issues on CI by declaring inter-package dependencies, updating the build script to create the lib folder, and handling environment differences so CI builds and tests pass consistently.

secure chromatic visual regression tests in a github workflow by using a repository secret for the project token and referencing it as an environment variable.

Build storybook with a root script and yarn build, then yarn run build-storybook. Deploy to Netlify by linking git, choosing master, and publishing packages/react/storybook/static.