<h2>Overview</h2>
<p>The Blockchain Components package is a set of shared packages for integrating blockchain functionality on Shopify storefronts. It aims to provide a seamless Web3 experience for customers. The package includes components such as a crypto wallet connection library, a gate unlocking context client, and a tokengating component.</p>
<h2>Features</h2>
<ul>
<li><strong>Shared packages for blockchain components</strong>: Provides shared packages for integrating blockchain functionality on Shopify storefronts.</li>
<li><strong>Crypto wallet connection library</strong>: Connects a crypto wallet to a Shopify storefront.</li>
<li><strong>Gate unlocking context client</strong>: Allows for gate unlocking context on Shopify storefronts.</li>
<li><strong>Tokengating component</strong>: Adds a tokengating component to Shopify storefronts.</li>
</ul>


<h2>Overview:</h2>
<p>The <code>@shopify/discount-app-components</code> package is a set of stateless discount components designed to assist third-party app developers in creating discounts apps powered by AppBridge. It provides a range of locale-specific components that require the inclusion of a locale and ianaTimezone when using the <code>discounts AppProvider</code>. The package also requires wrapping the app in both a Polaris AppProvider and an AppBridge AppProvider. The package includes instructions for installation, usage, and troubleshooting.</p>
<h2>Features:</h2>
<ul>
<li>Provides stateless discount components</li>
<li>Helps developers create discounts apps powered by AppBridge</li>
<li>Includes locale-specific components</li>
<li>Requires locale and ianaTimezone parameters for the <code>discounts AppProvider</code></li>
<li>Requires wrapping the app in both a Polaris AppProvider and an AppBridge AppProvider</li>
<li>Supports importing CSS directly into the project</li>
<li>Offers the option to copy the styles file into the project or use it directly</li>
</ul>


<h2>Overview:</h2>
<p>FlashList is a fast and performant React Native list component designed to eliminate blank cells and improve overall performance in a mobile application. With the ability to seamlessly switch from FlatList, FlashList offers instant performance enhancements that can be easily integrated into your project.</p>
<h2>Features:</h2>
<ul>
<li><strong>Fast &#x26; Performant</strong>: Instantly improve list performance in React Native applications.</li>
<li><strong>Eliminates Blank Cells</strong>: Say goodbye to blank cells within your lists.</li>
<li><strong>Easy Migration</strong>: Quick and straightforward switch from FlatList with seamless integration.</li>
<li><strong>Optimized Rendering</strong>: Efficient rendering of lists for enhanced user experience.</li>
</ul>
<h2>Summary:</h2>
<p>FlashList is a valuable tool for React Native developers looking to optimize list performance in their applications. By eliminating blank cells, providing easy migration from FlatList, and optimizing rendering, FlashList offers a seamless solution to enhance the user experience in mobile apps.</p>


<h2>Overview</h2>
<p>Hydrogen is Shopify's solution for headless commerce. It provides developers with a set of tools, utilities, and examples for building performant commerce applications. While primarily designed to be used with Shopify's full stack web framework Remix, Hydrogen also offers a portable React library that can be used with other supporting frameworks.</p>
<h2>Features</h2>
<ul>
<li><strong>Opinionated tools</strong>: Hydrogen provides a set of opinionated tools for building a commerce application with Remix.</li>
<li><strong>Shopify-specific components</strong>: The Hydrogen React library offers a collection of Shopify-specific commerce components, hooks, and utilities.</li>
<li><strong>Integration with Shopify CLI</strong>: The Shopify CLI extension allows for seamless integration with Hydrogen.</li>
<li><strong>Project generation from the command line</strong>: Generate a new Hydrogen project using the command line.</li>
<li><strong>Automatic code generation</strong>: Hydrogen includes a codegen package that automatically generates types for Storefront API queries.</li>
<li><strong>Remix adapter</strong>: The Remix adapter enables Hydrogen to run on the Oxygen runtime.</li>
<li><strong>Local runtime for Hydrogen apps</strong>: The mini-oxygen package provides a local runtime environment that simulates the Oxygen production environment.</li>
</ul>


<h2>Overview</h2>
<p>Polaris is a repository created by Shopify that aims to shape the merchant experience for Shopify's core product, the admin. This repository includes NPM packages, VSCode extensions, and websites. Polaris focuses on enhancing the user experience and providing a consistent design language for merchants using Shopify.</p>
<h2>Features</h2>
<ul>
<li>Monorepo: Polaris is an intergalactic monorepo that consists of NPM packages, VSCode extensions, and websites.</li>
<li>Command Line Interface: Polaris provides a CLI tool that allows you to install dependencies, build workspaces, and run commands.</li>
<li>React Component Storybook: Polaris offers a command <code>yarn turbo run dev --filter=@shopify/polaris</code> that opens the React component storybook, allowing you to easily develop and test components.</li>
<li>NextJS Site: Polaris also provides a command <code>yarn turbo run dev --filter=polaris.shopify.com</code> that opens the Polaris shopify.com NextJS site, allowing you to preview and work with the site.</li>
<li>Contribution: Polaris welcomes contributions through pull requests. You can refer to the contribution guidelines for more information.</li>
<li>Licensing: The source code of Polaris is under a custom license based on MIT. Usage of Polaris is restricted to applications that integrate or interoperate with Shopify software or services, with additional restrictions for external, stand-alone applications. All icons and images are licensed under the Polaris Design Guidelines License Agreement.</li>
</ul>


<h2>Overview:</h2>
<p>The @shopify/react-native-performance is a tool designed to measure the performance of React Native apps. It provides documentation on how to set up and use the tool effectively. The package offers various features to enhance the performance testing process for React Native applications.</p>
<h2>Features:</h2>
<ul>
<li><strong>Performance Measurement:</strong> Measure and analyze the performance of React Native apps.</li>
<li><strong>Package Compatibility:</strong> Designed to be compatible with autolinking for seamless integration.</li>
<li><strong>Multiple Versions:</strong> Includes various packages for specific functionalities like navigation and profiling.</li>
</ul>
<h2>Summary:</h2>
<p>The @shopify/react-native-performance tool is a valuable resource for developers looking to optimize the performance of their React Native apps. With features like performance measurement, package compatibility, and multiple versions for specific functionalities, it offers a comprehensive solution for performance testing. By following the installation guide provided, developers can easily incorporate this tool into their projects and enhance the overall performance of their React Native applications.</p>


<h2>Overview</h2>
<p>React Native Skia brings the Skia Graphics Library to React Native, serving as the graphics engine for various popular products like Google Chrome, Android, Flutter, and Mozilla Firefox. This integration allows for high-performance 2D graphics within React Native applications.</p>
<h2>Features</h2>
<ul>
<li><strong>High-Performance Graphics</strong>: Utilizes the Skia Graphics Library known for its performance in various applications.</li>
<li><strong>Integration with React Native</strong>: Seamlessly integrates Skia Graphics Library with React Native projects.</li>
<li><strong>Cross-Platform Compatibility</strong>: Supports multiple platforms including Android, iOS, and others.</li>
<li><strong>Easy Installation</strong>: Provides detailed instructions for setting up the Skia libraries on your development environment.</li>
<li><strong>Development Tools</strong>: Requires essential tools like XCode, Ninja, CMake, and Android NDK for library development.</li>
<li><strong>Testing Support</strong>: Includes scripts for linting, TypeScript checking, unit testing, and end-to-end testing to ensure code quality.</li>
<li><strong>Contributing Guidelines</strong>: Offers guidelines and testing procedures for contributors making changes to the project.</li>
</ul>


<h2>Overview:</h2>
<p>Ruby LSP Rails is a Ruby LSP addon that enhances Rails editor features. It offers functionalities like revealing schema by hovering over ActiveRecord models, running/debugging tests with code lenses, and more. With Ruby LSP Rails, users can navigate various elements of their Rails app efficiently within their editor.</p>
<h2>Features:</h2>
<ul>
<li><strong>Schema Revealing</strong>: Hover over an ActiveRecord model to display its schema.</li>
<li><strong>Test Execution</strong>: Run or debug tests by clicking on the code lens above the test class or individual test.</li>
<li><strong>Navigation Enhancements</strong>: Navigate to associations, validations, callbacks, and test cases using the "Go to Symbol" feature or outline view.</li>
<li><strong>Definition Jumping</strong>: Jump to the definition of callbacks and the declaration of a route.</li>
<li><strong>Migrations Control</strong>: Fast-forward or rewind migrations with the Code Lens feature.</li>
<li><strong>Route Correspondence</strong>: See the path that a route action corresponds to with Code Lens.</li>
</ul>
<h2>Summary:</h2>
<p>Ruby LSP Rails is a valuable addon for Rails developers, providing enhanced editor features to streamline development workflows. With functionalities like schema revealing, test execution, navigation enhancements, and more, Ruby LSP Rails is a useful tool for working efficiently within the Rails environment.</p>


Shopify

Blockchain Components

Discount App Components

Flash List

Hydrogen

Polaris

React Native Performance

React Native Skia

Ruby Lsp Rails