{"id":20196859,"url":"https://github.com/itsjonq/g2","last_synced_at":"2025-10-29T21:36:43.996Z","repository":{"id":37172357,"uuid":"275430248","full_name":"ItsJonQ/g2","owner":"ItsJonQ","description":"✨ An experimental reimagining of WordPress components","archived":false,"fork":false,"pushed_at":"2022-12-13T05:03:15.000Z","size":15519,"stargazers_count":103,"open_issues_count":62,"forks_count":12,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-04-10T10:59:50.810Z","etag":null,"topics":["components","experimental","react","wordpress"],"latest_commit_sha":null,"homepage":"http://g2-components.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ItsJonQ.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-27T18:22:48.000Z","updated_at":"2025-03-04T20:39:30.000Z","dependencies_parsed_at":"2023-01-28T07:15:43.497Z","dependency_job_id":null,"html_url":"https://github.com/ItsJonQ/g2","commit_stats":null,"previous_names":[],"tags_count":174,"template":false,"template_full_name":null,"purl":"pkg:github/ItsJonQ/g2","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fg2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fg2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fg2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fg2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ItsJonQ","download_url":"https://codeload.github.com/ItsJonQ/g2/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fg2/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260336343,"owners_count":22993740,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","experimental","react","wordpress"],"created_at":"2024-11-14T04:26:26.461Z","updated_at":"2025-10-29T21:36:43.914Z","avatar_url":"https://github.com/ItsJonQ.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# G2 ✌️\n\n[![npm version](https://badge.fury.io/js/%40wp-g2%2Fcomponents.svg)](https://badge.fury.io/js/%40wp-g2%2Fcomponents)\n[![CI Workflow](https://github.com/itsjonq/g2/workflows/ci/badge.svg)](https://github.com/ItsJonQ/g2/actions?query=workflow%3Aci)\n\n\u003e An experimental component system.\n\n**📚 Check out the Storybook**\n\nhttps://g2-components.xyz/?path=/story/\n\nThe project is a from-scratch reimagining of `@wordpress/components` to accommodate the ever-growing and ever-expressive needs of the Editor and the platform. The ultimate goal is to provide a first class workflow to empower developers and designers (both core and 3rd party) to create cohesive, robust, and delightful user interfaces.\n\nThese components (and their sub-systems) have been uniquely developed to meet the need of integrating seamless into Gutenberg and WordPress. The UI's native-like aesthetic also allows them to be easily customized used outside of the Editor - potentially for 3rd party WordPress plugins and beyond!\n\n## Table of Contents\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n-   [Getting Started](#getting-started)\n    -   [Using `@wp-g2/components`](#using-wp-g2components)\n    -   [Development](#development)\n-   [Goals](#goals)\n    -   [Design + Developer Experience (DX)](#design--developer-experience-dx)\n    -   [Native support and considerations for a11y](#native-support-and-considerations-for-a11y)\n    -   [Seamless integration into existing systems](#seamless-integration-into-existing-systems)\n-   [Thinking in Systems](#thinking-in-systems)\n-   [Start Prototyping](#start-prototyping)\n    -   [CodeSandbox](#codesandbox)\n    -   [Create React App](#create-react-app)\n    -   [Gatsby](#gatsby)\n    -   [Next.js](#nextjs)\n    -   [Video Tutorial](#video-tutorial)\n-   [Open for Feedback](#open-for-feedback)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Getting Started\n\n### Using `@wp-g2/components`\n\nRun the following command to add `@wp-g2/components` to your project:\n\n```\nnpm install @wp-g2/components @wordpress/i18n @wordpress/data @wordpress/icons @wordpress/is-shallow-equal\n```\n\n### Development\n\nInstall all the dependencies by running:\n\n```\nyarn\n```\n\nThen, fire up the local dev environment (Storybook) by running:\n\n```\nyarn start\n```\n\n## Goals\n\nThere are several core values that drive everything in this project:\n\n-   Design + Developer Experience\n-   Native support and considerations for a11y\n-   Seamless integration into existing systems\n\n### Design + Developer Experience (DX)\n\nEverything by way of workflows should recognize and prioritize design and developer experience - considering the folks working directly on the project, as well as folks using and modifying parts of the project. Having superior DX enables newer contributors and users to work with the project and it's systems.\n\n### Native support and considerations for a11y\n\nConsiderations for a11y should be inherent to the core system. This ensures that a11y works consistently throughout the entire project. Adding a11y on top often leads to inconsistencies, fragmentation,and regressions. This should be avoided. Implementation should feel mostly \"invisible\" at the component (code) layer.\n\n### Seamless integration into existing systems\n\nDevelopers should be able to **reliably** use any/all parts of the system within existing projects (like Gutenberg, WordPress WP-Admin, or anything else) with minimal integration/build-system effort. The project's component should function and render perfectly out-of-the-box.\n\nUltimately, the goal of this project is to derive useful UI features and/or architecture patterns and workflows to improve the experience of WordPress [Gutenberg](https://github.com/WordPress/gutenberg).\n\n## Thinking in Systems\n\nThe primary strategy to achieving the goals outlined above is to craft the (many) moving parts using a series of systems.\n\nTo help visualize the various systems and mechanics at flow, I've illustrated a flow chart for an example `\u003cAlert /\u003e` component.\n\nLike this one:\n\n\u003cimg width=\"505\" alt=\"Screen Shot 2020-08-06 at 7 45 21 PM\" src=\"https://user-images.githubusercontent.com/2322354/89593516-60542580-d81d-11ea-9807-7d404d8de931.png\"\u003e\n\nHere it is!\n\n![IMG_0457](https://user-images.githubusercontent.com/2322354/89593533-6813ca00-d81d-11ea-8c3e-28bfbc377e9b.png)\n\nThere are 4 main systems which are represented by a colour:\n\n-   Systems (Yellow)\n-   Context (Blue)\n-   A11Y (Pink)\n-   Animations (Green)\n\nThe arrows that link the topics/keywords are colour coded to match their respective system.\n\n[Click here](https://github.com/ItsJonQ/g2/issues/3) for more details about the core systems in this project.\n\n## Start Prototyping\n\nStart experiencing the new (experimental) G2 Components project with this starter kit!\n\nWe can start prototyping with G2 Components in 2 ways:\n\n1. CodeSandbox (Recommended)\n2. Create React App\n3. Gatsby\n4. Next.js\n\n### CodeSandbox\n\nTo get started with the CodeSandbox template, click on the link below:\n\n[https://codesandbox.io/s/g2-prototype-sandbox-8ose4?file=/src/App.js](https://codesandbox.io/s/g2-prototype-sandbox-8ose4?file=/src/App.js)\n\n### Create React App\n\nTo get started with a Create React App experience, run the following code in your Terminal:\n\n```\nnpx create-react-app my-app --template @wp-g2/cra-template-protokit\n```\n\n### Gatsby\n\nTo get started with a Gatsby experience, run the following code in your Terminal:\n\n```\nnpx gatsby new my-site https://github.com/itsjonq/gatsby-starter-g2\n```\n\nFor more details, check out the [Gatsby G2 starter](https://github.com/ItsJonQ/gatsby-starter-g2).\n\n### Next.js\n\nTo get started with a Next.js experience, run the following code in your Terminal:\n\n```\nnpx create-next-app my-site --use-npm --example \"https://github.com/itsjonq/next-g2-starter\"\n```\n\nFor more details, check out the [Next.js G2 starter](https://github.com/ItsJonQ/next-g2-starter).\n\n### Video Tutorial\n\nBelow is a video walkthrough for prototyping with CodeSandbox and Create React App:\n\nhttps://www.loom.com/share/7b0527a36f284568a9f1e7c1ab10fa42\n\n## Open for Feedback\n\nThis project provides a space for in-depth research and experimentation. It is totally open for thoughts and feedback!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsjonq%2Fg2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsjonq%2Fg2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsjonq%2Fg2/lists"}