Merge pull request #304 from wpmudev/fix-missing-dependencies

Added missing dependencies to some packages

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

@@ -1,13 +1,9 @@
+
 // Do not edit directly
-// Generated on Wed, 26 Jun 2024 04:11:56 GMT
+// Generated on Tue, 09 Jul 2024 09:35:25 GMT
 
 $accordion-border-radius-sm: 10px;
-$advanced-banner-background: linear-gradient(
-	90deg,
-	#222 0%,
-	#383323 48.96%,
-	#514524 100%
-);
+$advanced-banner-background: linear-gradient(90deg, #222 0%, #383323 48.96%, #514524 100%);
 $advanced-banner-size-width: 260px;
 $avatar-container-size-sm: 24px;
 $avatar-container-size-md: 32px;
@@ -261,7 +257,7 @@ $color-extended-warning-70: #fff4ce;
 $color-extended-warning-90: #fffbef;
 $color-extended-error-10: #180909;
 $color-extended-error-30: #ab403e;
-$color-extended-error-50: #f45c59;
+$color-extended-error-50: #e52400;
 $color-extended-error-70: #fccecd;
 $color-extended-error-90: #feefee;
 $color-extended-alpha-white-10: rgba(255, 255, 255, 0.1);
@@ -302,10 +298,10 @@ $border-width-md: 2px;
 $border-width-xl: 4px;
 $border-radius-xs: 3px;
 $border-radius-sm: 4px;
-$border-radius-md: 4px * 2;
-$border-radius-lg: 4px * 3;
-$border-radius-xl: 4px * 4;
-$border-radius-2xl: 4px * 5;
+$border-radius-md: 4px*2;
+$border-radius-lg: 4px*3;
+$border-radius-xl: 4px*4;
+$border-radius-2xl: 4px*5;
 $border-radius-default: 6px;
 $font-weight-sm: 400;
 $font-weight-md: 500;
@@ -331,8 +327,7 @@ $font-spacing-md: 0.2px;
 $font-spacing-lg: 0.5px;
 $font-spacing-2xl: 1px;
 $font-spacing-default: 0px;
-$font-family-default: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
-	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+$font-family-default: "Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
 $font-family-code: "Roboto Mono", monospace;
 $dashboard-size-width-lg: 440px;
 $datepicker-font-size: 14px-1px;
@@ -383,15 +378,15 @@ $input-font-height-sm: 16px;
 $input-font-height-md: 24px;
 $input-spacing-padding-vertical-sm: 8px;
 $input-spacing-padding-vertical-md: 8px;
-$input-spacing-padding-horizontal-sm: 4px * 3;
+$input-spacing-padding-horizontal-sm: 4px*3;
 $input-spacing-padding-horizontal-md: 16px;
 $input-spacing-lg: 44px;
 $input-border-width-sm: 1px;
 $input-border-width-md: 2px;
 $input-border-style: solid;
 $input-border-color-default: #aaaaaa;
 $input-border-color-active: #0059ff;
-$input-border-color-error: #f45c59;
+$input-border-color-error: #e52400;
 $input-border-color-disabled: #f2f2f2;
 $input-border-color-readonly: #f8f8f8;
 $input-border-radius: 4px;
@@ -402,9 +397,9 @@ $integration-disabled-opacity: 0.5;
 $layout-content-width: 1600px;
 $layout-spacing-main-sm: -20px;
 $layout-spacing-main-md: -10px;
-$layout-spacing-content-sm: 8px * 2;
-$layout-spacing-content-md: 8px * 3;
-$layout-spacing-content-lg: 8px * 4;
+$layout-spacing-content-sm: 8px*2;
+$layout-spacing-content-md: 8px*3;
+$layout-spacing-content-lg: 8px*4;
 $menu-spacing-horizontal: 24px;
 $modal-spacing-lg: 40px;
 $modal-border-radius: 24px;
@@ -464,7 +459,7 @@ $score-color-black: #1a1a1a;
 $score-color-green: #18bb4b;
 $score-color-grey: #f2f2f2;
 $score-color-yellow: #ffcc20;
-$score-color-red: #f45c59;
+$score-color-red: #e52400;
 $score-color-blue: #0059ff;
 $score-spacing-vertical: 8px;
 $score-size-width: 90px;
@@ -538,7 +533,7 @@ $tabs-navitem-spacing-vertical: 26px;
 $tabs-navitem-spacing-horizontal: 16px;
 $tabs-navitem-gap: 4px;
 $tabs-navitem-border-width: 4px;
-$tabs-panel-spacing: 16px * 2;
+$tabs-panel-spacing: 16px*2;
 $tabs-color-active: #0059ff;
 $tabs-color-hover: #0059ff;
 $tabs-color-focus-border-color: #0059ff;
@@ -550,18 +545,8 @@ $tabs-arrow-size-height: 100%;
 $tabs-arrow-color: #aaaaaa;
 $tabs-arrow-hover-color: #1a1a1a;
 $tabs-arrow-hover-background: #ffffff;
-$tabs-arrow-left-background: linear-gradient(
-	90deg,
-	#fff 0%,
-	#fff 71.63%,
-	rgba(248, 248, 248, 0) 100%
-);
-$tabs-arrow-right-background: linear-gradient(
-	270deg,
-	#fff 0%,
-	#fff 71.63%,
-	rgba(248, 248, 248, 0) 100%
-);
+$tabs-arrow-left-background: linear-gradient(90deg, #FFF 0%, #FFF 71.63%, rgba(248, 248, 248, 0.00) 100%);
+$tabs-arrow-right-background: linear-gradient(270deg, #FFF 0%, #FFF 71.63%, rgba(248, 248, 248, 0.00) 100%);
 $tag-font-size-sm: 10px;
 $tag-font-size-md: 12px;
 $tag-font-spacing-sm: -0.1px;

packages/docs/src/shared/PackageInstallGuide.tsx

@@ -43,8 +43,11 @@ const PackageInstallGuide: React.FunctionComponent<
 		>
 			<p>
 				Install the package <Code small={true}>{packageName}</Code> as an
-				individual component or follow the Overview page instructions to get the
-				complete SUI Components package.
+				individual component or follow the{" "}
+				<a href="/?path=/docs/sui-getting-started--docs" target="_blank">
+					overview page
+				</a>{" "}
+				instructions to get the complete SUI Components package.
 			</p>
 
 			<p>

packages/docs/stories/GettingStarted.stories.mdx

@@ -26,6 +26,34 @@ import { Unstyled } from '@storybook/blocks';
 				You can contact the team by heading to the <a href="https://wpmudev.com/contact/" target="_blank" rel="nofollow">WPMU DEV contact page</a>.
 			</p>
 		</Section>
+		<Section
+			contained={ true }
+			border= { true }
+			title="Installing Shared UI"
+		>
+			<p>
+				To get all the components packages, run the following command:
+				```
+					npm install @wpmudev/sui-react
+				```
+				When you install this package, additional packages will also be installed.
+				<List>
+					<span label="@wpmudev/sui-hooks" />
+					<span label="@wpmudev/sui-utils" />
+				</List>
+
+				You will also need to install `sui-css` and `sui-icons` packages: 
+				```
+                    npm install @wpmudev/sui-css @wpmudev/sui-icons
+				``` 
+
+				Finally, make sure to import the styles in your app, you can add this line to your top-most component in your application: 
+				```
+					import '@wpmudev/sui-css/dist/css/sui-css.min.css'
+				```
+			</p>
+
+		</Section>
 		<Section title="How we work" contained={ true }>
 			<p>
 				The following set of essential rules allows us to get to the highest level of productivity while benefiting the company and our team members.

packages/docs/stories/Home.stories.mdx

@@ -71,7 +71,7 @@ export const svgCssFramework = (
 				<Card.Simple
 					title="Components"
 					description="Presentational UI components with encapsulated styles for React framework."
-					action="sui-css-framework-colors"
+					action="sui-components-core-grid--docs"
 					image={{
 						src: cardComponents,
 						src2x: cardComponents2x,

packages/hooks/package.json

@@ -37,7 +37,7 @@
   "clean-package": "../../postpack.config.json",
   "dependencies": {
     "@wpmudev/sui-utils": "^0.0.1",
-    "react-jss": "^10.10.0"
+    "@emotion/css": "^11.11.2"
   },
   "devDependencies": {
     "@emotion/hash": "^0.9.1"

packages/react/README.md

@@ -3,11 +3,11 @@
 <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">
 </div>
-<h2> Description </h2> It provides all the ui components for available for sui react
+<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)
 
-
-[![-----------------------------------------------------](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/utils/package.json

@@ -38,11 +38,10 @@
     "jest-axe": "^8.0.0",
     "react": "^18.2.0"
   },
-  "devDependencies": {
-    "@testing-library/react": "^14.0.0"
-  },
+  "devDependencies": {},
   "peerDependencies": {
-    "@wpmudev/sui-hooks": "^0.0.1"
+    "@wpmudev/sui-hooks": "^0.0.1",
+    "@testing-library/react": "^14.0.0"
   },
   "clean-package": "../../postpack.config.json"
 }