new: dev utils package

package.json

@@ -71,6 +71,7 @@
     "./packages/react",
     "./packages/hooks",
     "./packages/utils",
+    "./packages/dev-utils",
     "./packages/ui/*",
     "./packages/common/*"
   ],

packages/assets/css/src/scss/_utils/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 16 Sep 2024 05:01:25 GMT
+// Generated on Wed, 23 Oct 2024 10:41:22 GMT
 
 $accordion-border-radius-sm: 10px;
 $advanced-banner-background: linear-gradient(90deg, #222 0%, #383323 48.96%, #514524 100%);

packages/common/advanced/README.md

@@ -1,7 +1,7 @@
 <!-- ⚠️ This README has been generated from the file(s) "../../../blueprint.md" ⚠️--><h1 align="center">@wpmudev/sui-advanced</h1>
 
 <div style="text-align: center;">
-<img src="https://img.shields.io/badge/Version-0.0.2-blue.svg" alt="Version"> <img src="https://img.shields.io/badge/License-GPL-orange.svg" alt="License">
+<img src="https://img.shields.io/badge/Version-0.0.1-blue.svg" alt="Version"> <img src="https://img.shields.io/badge/License-GPL-orange.svg" alt="License">
 </div>
 <h2> Description </h2> WPMU DEV Shared UI React sub-package for advanced elements
 

packages/dev-utils/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @wpmudev/sui-dev-utils
+
+## 0.0.1
+
+### Patch Changes
+
+- Initial release

packages/dev-utils/README.md

@@ -0,0 +1,13 @@
+<!-- ⚠️ This README has been generated from the file(s) "../../blueprint.md" ⚠️--><h1 align="center">@wpmudev/sui-dev-utils</h1>
+
+<div style="text-align: center;">
+<img src="https://img.shields.io/badge/Version-0.0.1-blue.svg" alt="Version"> <img src="https://img.shields.io/badge/License-GPL-orange.svg" alt="License">
+</div>
+<h2> Description </h2> WPMU DEV Shared UI React Functions for Development Environment
+
+
+[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#license)
+
+## ➤ License
+
+Licensed under [GPL-2.0](https://opensource.org/licenses/GPL-2.0).

packages/dev-utils/__tests__/dev-util.test.js

@@ -0,0 +1,3 @@
+"use strict"
+
+describe("@wpmudev/sui-dev-utils", () => {})

packages/dev-utils/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@wpmudev/sui-dev-utils",
+  "version": "0.0.1",
+  "description": "WPMU DEV Shared UI React Functions for Development Environment",
+  "keywords": [],
+  "author": "WPMU DEV (https://wpmudev.com)",
+  "license": "GPL-2.0",
+  "main": "src/index.ts",
+  "directories": {
+    "src": "src",
+    "test": "__tests__"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wpmudev/sui-docs.git"
+  },
+  "scripts": {
+    "clean": "rm -rf dist && rm -rf lib",
+    "build": "npx tsup",
+    "build:dev": "npx tsup --watch",
+    "build:fast": "tsup src",
+    "dev": "npm build:fast -- --watch",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore",
+    "build:readme": "readme generate --input ../../blueprint.md"
+  },
+  "bugs": {
+    "url": "https://github.com/wpmudev/sui-docs/issues"
+  },
+  "homepage": "https://github.com/wpmudev/sui-docs#readme",
+  "dependencies": {
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^14.0.0",
+    "jest-axe": "^8.0.0"
+  },
+  "clean-package": "../../postpack.config.json"
+}

packages/dev-utils/src/index.ts

@@ -0,0 +1,23 @@
+import React from "react"
+import { render } from "@testing-library/react"
+import { axe } from "jest-axe"
+
+/**
+ * It is a utility function for performing accessibility testing on a React component.
+ *
+ * Note: It only runs the test if an environment variable, `SUI_A11Y_TEST`, is turned on.
+ * If the test is on, it checks the component for accessibility issues using the Axe library.
+ *
+ * @param {React.ReactElement} component - The React component to be tested for accessibility.
+ * @param {Object}             config    - axe configuration
+ */
+const a11yTest = async (component: React.ReactElement, config?: object) => {
+	if (process.env.SUI_A11Y_TEST) {
+		const { container } = render(component)
+		const results = await axe(container, config)
+		expect(results).toHaveNoViolations()
+	}
+}
+
+// Publish required function(s).
+export { a11yTest }

packages/dev-utils/tsconfig.json

@@ -0,0 +1,3 @@
+{
+	"extends": "../../tsconfig.json",
+}

packages/react/README.md

@@ -1,13 +1,13 @@
 <!-- ⚠️ This README has been generated from the file(s) "../../blueprint.md" ⚠️--><h1 align="center">@wpmudev/sui-react</h1>
 
 <div style="text-align: center;">
-<img src="https://img.shields.io/badge/Version-0.0.10-blue.svg" alt="Version"> <img src="https://img.shields.io/badge/License-GPL-orange.svg" alt="License">
+<img src="https://img.shields.io/badge/Version-0.0.1-blue.svg" alt="Version"> <img src="https://img.shields.io/badge/License-GPL-orange.svg" alt="License">
 </div>
-<h2> Description </h2> It provides all the ui components available in sui react & all the necessary dependencies
-
-
-[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#license)
+<h2> Description </h2> It provides all the ui components for available for sui react
 
+
+[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#license)
+
 ## ➤ License
 
 Licensed under [GPL-2.0](https://opensource.org/licenses/GPL-2.0).

packages/ui/accordion/__tests__/accordion.test.tsx

@@ -5,7 +5,7 @@ import { fireEvent, render, screen } from "@testing-library/react"
 import { Accordion, AccordionItem, AccordionItemBody } from "../src"
 
 import { InfoAlt } from "@wpmudev/sui-icons"
-import { a11yTest } from "@wpmudev/sui-utils"
+import { a11yTest } from "@wpmudev/sui-dev-utils"
 
 describe("@wpmudev/sui-accordion", () => {
 	// Common props for the Accordion component

packages/ui/advanced-banner/__tests__/advanced-banner.test.tsx

@@ -4,7 +4,7 @@ import { render, screen } from "@testing-library/react"
 
 import { AdvancedBanner } from "../src"
 
-import { a11yTest } from "@wpmudev/sui-utils"
+import { a11yTest } from "@wpmudev/sui-dev-utils"
 
 describe("@wpmudev/sui-advanced-banner", () => {
 	it("render correctly", () => {

packages/ui/alert-banner/__tests__/alert-banner.test.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import "@testing-library/jest-dom"
 import { render, screen } from "@testing-library/react"
-import { a11yTest } from "@wpmudev/sui-utils"
+import { a11yTest } from "@wpmudev/sui-dev-utils"
 
 import { AlertBanner } from "../src"
 

packages/ui/avatar/__tests__/avatar.test.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { render, screen } from "@testing-library/react"
 import "@testing-library/jest-dom" // This is still needed to extend Jest's expect
-import { a11yTest } from "@wpmudev/sui-utils"
+import { a11yTest } from "@wpmudev/sui-dev-utils"
 import { Avatar } from "../src"
 
 describe("@wpmudev/sui-avatar", () => {

packages/ui/basic-box/__tests__/basic-box.test.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import "@testing-library/jest-dom"
-import { a11yTest } from "@wpmudev/sui-utils"
+import { a11yTest } from "@wpmudev/sui-dev-utils"
 import { screen, render, fireEvent } from "@testing-library/react"
 import { BasicBox } from "../src"
 

packages/ui/box/__tests__/box.test.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import "@testing-library/jest-dom"
 import { render, screen } from "@testing-library/react"
 import { Box, BoxGroup } from "../src"
-import { a11yTest } from "@wpmudev/sui-utils"
+import { a11yTest } from "@wpmudev/sui-dev-utils"
 import { IconsNamesType } from "@wpmudev/sui-icons"
 
 describe("@wpmudev/box", () => {

packages/ui/builder/__tests__/builder.test.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import "@testing-library/jest-dom"
 import { within } from "@testing-library/dom"
 import { screen, render, fireEvent } from "@testing-library/react"
-import { a11yTest } from "@wpmudev/sui-utils"
+import { a11yTest } from "@wpmudev/sui-dev-utils"
 import { Builder, BuilderField, BuilderProps, BuilderWrapper } from "../src"
 
 describe("@wpmudev/sui-builder", () => {

packages/ui/button/__tests__/button.test.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import "@testing-library/jest-dom" // This is still needed to extend Jest's expect
 import { within } from "@testing-library/dom"
-import { a11yTest } from "@wpmudev/sui-utils"
+import { a11yTest } from "@wpmudev/sui-dev-utils"
 import { render, screen } from "@testing-library/react"
 import { Button } from "@wpmudev/sui-button"
 

packages/ui/checkbox/__tests__/checkbox.test.tsx

@@ -4,7 +4,7 @@ import "@testing-library/jest-dom"
 import { screen, render, fireEvent, prettyDOM } from "@testing-library/react"
 
 import { Checkbox, CheckboxGroup, CheckBoxGroups } from "../src"
-import { a11yTest } from "@wpmudev/sui-utils"
+import { a11yTest } from "@wpmudev/sui-dev-utils"
 
 describe("@wpmudev/sui-checkbox", () => {
 	// Test case for rendering Checkbox component correctly

packages/ui/code-editor/__tests__/code-editor.test.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import "@testing-library/jest-dom"
 import { screen, render } from "@testing-library/react"
-import { a11yTest } from "@wpmudev/sui-utils"
+import { a11yTest } from "@wpmudev/sui-dev-utils"
 import { CodeEditor, CodeEditorProps } from "../src"
 
 describe("@wpmudev/code-editor", () => {

packages/ui/code-snippet/__tests__/code-snippet.test.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import "@testing-library/jest-dom"
 import { userEvent } from "@testing-library/user-event"
 import { screen, render, fireEvent } from "@testing-library/react"
-import { a11yTest } from "@wpmudev/sui-utils"
+import { a11yTest } from "@wpmudev/sui-dev-utils"
 import { CodeSnippet, CodeSnippetProps } from "../src"
 
 describe("@wpmudev/sui-code-snippet", () => {

packages/ui/color-picker/README.md

@@ -1,7 +1,7 @@
 <!-- ⚠️ This README has been generated from the file(s) "../../../blueprint.md" ⚠️--><h1 align="center">@wpmudev/sui-color-picker</h1>
 
 <div style="text-align: center;">
-<img src="https://img.shields.io/badge/Version-0.0.2-blue.svg" alt="Version"> <img src="https://img.shields.io/badge/License-GPL-orange.svg" alt="License">
+<img src="https://img.shields.io/badge/Version-0.0.1-blue.svg" alt="Version"> <img src="https://img.shields.io/badge/License-GPL-orange.svg" alt="License">
 </div>
 <h2> Description </h2> The Color Picker Component enables users to select and apply colors in a consistent and efficient manner.
 

packages/ui/color-picker/__tests__/color-picker.test.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react"
 import "@testing-library/jest-dom"
 import { screen, render, fireEvent, waitFor } from "@testing-library/react"
-import { a11yTest } from "@wpmudev/sui-utils"
+import { a11yTest } from "@wpmudev/sui-dev-utils"
 import { ColorPicker, ColorPickerProps } from "../src"
 
 describe("@wpmudev/sui-color-picker", () => {

packages/ui/config-table/__tests__/config-table.test.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import "@testing-library/jest-dom"
 import { screen, render } from "@testing-library/react"
-import { a11yTest } from "@wpmudev/sui-utils"
+import { a11yTest } from "@wpmudev/sui-dev-utils"
 
 import { ConfigTable } from "../src"
 import { configs } from "../stories/configs"

packages/ui/dashboard-widget/__tests__/dashboard-widget.test.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import "@testing-library/jest-dom"
 import { screen, render } from "@testing-library/react"
-import { a11yTest } from "@wpmudev/sui-utils"
+import { a11yTest } from "@wpmudev/sui-dev-utils"
 import { DashboardWidget } from "../src"
 
 describe("@wpmudev/sui-dashboard-widget", () => {

packages/ui/date-picker/__tests__/date-picker.test.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import "@testing-library/jest-dom"
 import { screen, render, fireEvent } from "@testing-library/react"
 import { DatePicker, DatePickerProps } from "../src"
-import { a11yTest } from "@wpmudev/sui-utils"
+import { a11yTest } from "@wpmudev/sui-dev-utils"
 
 describe("@wpmudev/sui-date-picker", () => {
 	const Component = (propsList: DatePickerProps) => {

packages/ui/drawer/__tests__/drawer.test.tsx

@@ -1,15 +1,15 @@
 import React from "react"
 import "@testing-library/jest-dom"
 import { screen, render } from "@testing-library/react"
-// import { a11yTest } from "@wpmudev/sui-utils"
+// import { a11yTest } from "@wpmudev/sui-dev-utils"
 import {
 	Drawer,
 	DrawerHeader,
 	DrawerBody,
 	DrawerFooter,
 	DrawerTypes,
 } from "../src"
-import { a11yTest } from "@wpmudev/sui-utils"
+import { a11yTest } from "@wpmudev/sui-dev-utils"
 
 describe("@wpmudev/sui-drawer", () => {
 	const Component = (propsList: DrawerTypes) => {

packages/ui/dropdown/__tests__/dropdown.test.tsx

@@ -1,7 +1,7 @@
 import React, { useRef } from "react"
 import "@testing-library/jest-dom"
 import { screen, render, fireEvent, waitFor } from "@testing-library/react"
-import { a11yTest } from "@wpmudev/sui-utils"
+import { a11yTest } from "@wpmudev/sui-dev-utils"
 import { Button } from "@wpmudev/sui-button"
 import { Dropdown, DropdownRefProps } from "../src"
 import { MenuGroupProps, MenuItemProps } from "../src/dropdown.types"

packages/ui/editor-toolbar/__tests__/editor-toolbar.test.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react"
 import "@testing-library/jest-dom"
 import { render, screen } from "@testing-library/react"
-import { a11yTest } from "@wpmudev/sui-utils"
+import { a11yTest } from "@wpmudev/sui-dev-utils"
 import { EditorToolbar } from "../src"
 
 describe("@wpmudev/sui-editor-toolbar", () => {

packages/ui/empty-state/__tests__/empty-state.test.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import "@testing-library/jest-dom"
 import { screen, render } from "@testing-library/react"
-import { a11yTest } from "@wpmudev/sui-utils"
+import { a11yTest } from "@wpmudev/sui-dev-utils"
 import { EmptyState, EmptyStateProps } from "../src"
 
 describe("@wpmudev/sui-empty-state", () => {

packages/ui/field-list/__tests__/field-list.test.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import "@testing-library/jest-dom"
 import { screen, render } from "@testing-library/react"
-import { a11yTest } from "@wpmudev/sui-utils"
+import { a11yTest } from "@wpmudev/sui-dev-utils"
 import { FieldList, FieldListItem } from "../src"
 
 describe("@wpmudev/sui-field-list", () => {

packages/ui/footer/__tests__/footer.test.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import "@testing-library/jest-dom"
 import { render, screen } from "@testing-library/react"
-import { a11yTest } from "@wpmudev/sui-utils"
+import { a11yTest } from "@wpmudev/sui-dev-utils"
 
 import { Footer } from "../src"
 

packages/ui/form-field/__tests__/form-field.test.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import "@testing-library/jest-dom"
-import { a11yTest } from "@wpmudev/sui-utils"
+import { a11yTest } from "@wpmudev/sui-dev-utils"
 import { render, screen } from "@testing-library/react"
 import { FormField } from "../src"
 

packages/ui/grid/__tests__/grid.test.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import "@testing-library/jest-dom"
 import { Row, Col } from "../src"
 import { render, screen } from "@testing-library/react"
-import { a11yTest } from "@wpmudev/sui-utils"
+import { a11yTest } from "@wpmudev/sui-dev-utils"
 
 describe("@wpmudev/sui-grid", () => {
 	const Component = () => (

packages/ui/input/__tests__/input.test.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import "@testing-library/jest-dom"
-import { a11yTest } from "@wpmudev/sui-utils"
+import { a11yTest } from "@wpmudev/sui-dev-utils"
 import { screen, render } from "@testing-library/react"
 
 import { Input } from "../src"

packages/ui/integration/__tests__/integration.test.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import "@testing-library/jest-dom"
 import { fireEvent, render, screen } from "@testing-library/react"
-import { a11yTest } from "@wpmudev/sui-utils"
+import { a11yTest } from "@wpmudev/sui-dev-utils"
 import { Integration } from "../src"
 
 describe("@wpmudev/sui-integration", () => {

packages/ui/link/__tests__/link.test.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import "@testing-library/jest-dom"
 import { render, screen } from "@testing-library/react"
-import { a11yTest } from "@wpmudev/sui-utils"
+import { a11yTest } from "@wpmudev/sui-dev-utils"
 import { Link } from "@wpmudev/sui-link"
 
 describe("@wpmudev/sui-link", () => {