♻️ Fixed widget bug for staging rules (#58)

* update docs

* update code in docs

* refactored env template to use placeholders instead of actual values

* refactored so widget works on staging rules

* fixed doc table

* updated contributing docs

* update docs

* improved text

* 2.0.7

.env.template

@@ -1,2 +1,4 @@
-VITE_HISTORY_JSON_URL=https://www.ssw.com.au/rules/history.json
-VITE_COMMITS_JSON_URL=https://www.ssw.com.au/rules/commits.json
+VITE_PROD_HISTORY_JSON_URL=#{PRODUCTION_RULES_HISTORY_JSON_URL}
+VITE_PROD_COMMITS_JSON_URL=#{PRODUCTION_RULES_COMMITS_JSON_URL}
+VITE_STAGING_HISTORY_JSON_URL=#{STAGING_RULES_HISTORY_JSON_URL}
+VITE_STAGING_COMMITS_JSON_URL=#{STAGING_RULES_COMMITS_JSON_URL}

CONTRIBUTING.md

@@ -10,11 +10,7 @@ Currently built using node v20.9.0 and NPM v10.1.0
 
 - Clone the repo from <https://github.com/SSWConsulting/SSW.Rules.Widget>
 - Run `npm install` to install packages
-- Create a `.env` file with the following variable, you can add new variables if needed in your changes:
-
-    `VITE_HISTORY_JSON_URL: <URL to history.json>`
-
-    `VITE_COMMITS_JSON_URL: <URL to commits.json>`
+- Create a `.env` file using `.env.template` file and replace placeholders with the actual values. If you add new variable, then don't forget to update the `.env.template` file.
 
 ### Development
 

README.md

@@ -25,7 +25,7 @@ function ExamplePage() {
       <RulesWidget />
 
       /* Using all the options */
-      <RulesWidget skip={5} rulesUrl={"#"} userRulesUrl={"#?="} showLogo={true} numberOfRules={5} author={authorGitHubUsername} location={window.location}/>
+      <RulesWidget showLogo={true} numberOfRules={5} author={authorGitHubUsername} location={window.location}/>
     </>
   );
 }
@@ -35,10 +35,7 @@ function ExamplePage() {
 
 | Name          | Type    | Default                                                                                                   | Required | Use                                                                                                                   |
 |---------------|---------|-----------------------------------------------------------------------------------------------------------|----------|-----------------------------------------------------------------------------------------------------------------------|
-| rulesUrl      | string  | "<https://www.ssw.com.au/rules>"                                                                            | No       | URL for the SSW rules list.                                                                                            |
-| userRulesUrl  | string  | "<https://ssw.com.au/rules/user-rules/?author=>" | No       | URL for the user's specific SSW rules list. Only defined if author is provided.                                        |
 | showLogo      | boolean | false                                                                                                 | No       | Whether to show the SSW logo. Defaults to true if not explicitly set.                                                  |
 | location      | string  | ${window.location.href}                                                                                   | No       | Current URL of the page hosting the widget.                                                                            |
-| skip          | number  | 0                                                                                                         | No       | Index of the first rule to display in the widget.                                                                      |
 | numberOfRules | number  | 10                                                                                                        | No       | Number of rules to display in the widget.                                                                              |                                                                           |
 | author        | string  | null                                                                                                      | No       | GitHub username of the author to filter rules by.                                                                      |

package.json

@@ -8,7 +8,7 @@
     "widget",
     "standards"
   ],
-  "version": "2.0.6",
+  "version": "2.0.7",
   "license": "MIT",
   "main": "dist/ssw.rules.widget.cjs.js",
   "module": "dist/ssw.rules.widget.es.js",

src/lib/widget/widget-constants.enum.ts

@@ -1,6 +1,8 @@
 export enum WidgetConstants {
   SSWUrl = "https://www.ssw.com.au",
-  RulesUrl = "https://www.ssw.com.au/rules",
-  LatestRulesUrl = "https://www.ssw.com.au/rules/latest-rules/?size=50",
+  ProdRulesUrl = "https://www.ssw.com.au/rules",
+  StagingRulesUrl = "https://sarulesstagbbfslamgwndh2.z8.web.core.windows.net/rules",
+  ProdLatestRulesUrl = "https://www.ssw.com.au/rules/latest-rules/?size=50",
+  StagingLatestRulesUrl = "https://sarulesstagbbfslamgwndh2.z8.web.core.windows.net/rules/latest-rules/?size=50",
   UserRulesUrl = "https://www.ssw.com.au/rules/user/?author=",
 }

src/lib/widget/widget.tsx

@@ -5,9 +5,6 @@ import { WidgetConstants } from "./widget-constants.enum";
 import Logo from "../../assets/SSWLogo.png";
 import "./styles.css";
 
-const historyJsonUrl = import.meta.env.VITE_HISTORY_JSON_URL;
-const commitsJsonUrl = import.meta.env.VITE_COMMITS_JSON_URL;
-
 export interface WidgetProps {
   showLogo?: boolean;
   location?: string;
@@ -51,9 +48,21 @@ const Widget = ({
   numberOfRules = 10,
   author,
 }: WidgetProps) => {
+  let rulesUrl = WidgetConstants.ProdRulesUrl;
+  let latestRulesUrl = WidgetConstants.ProdLatestRulesUrl;
+  let historyJsonUrl = import.meta.env.VITE_PROD_HISTORY_JSON_URL;
+  let commitsJsonUrl = import.meta.env.VITE_PROD_COMMITS_JSON_URL;
+
+  if (location === WidgetConstants.StagingRulesUrl) {
+    rulesUrl = WidgetConstants.StagingRulesUrl;
+    latestRulesUrl = WidgetConstants.StagingLatestRulesUrl;
+    historyJsonUrl = import.meta.env.VITE_STAGING_HISTORY_JSON_URL;
+    commitsJsonUrl = import.meta.env.VITE_STAGING_COMMITS_JSON_URL;
+  }
+
   const seeMoreUrl = author
     ? `${WidgetConstants.UserRulesUrl}${author}`
-    : `${WidgetConstants.LatestRulesUrl}`;
+    : `${latestRulesUrl}`;
 
   function getLastUpdatedTime(lastUpdatedDate: string) {
     return formatDistanceStrict(new Date(lastUpdatedDate), new Date())
@@ -161,7 +170,7 @@ const Widget = ({
                 key={`${item.file}${idx}`}
                 rel="noreferrer"
                 target="_blank"
-                href={`${WidgetConstants.RulesUrl}/${item.uri}`}
+                href={`${rulesUrl}/${item.uri}`}
               >
                 <div className="rw-rule-card">
                   <p className="rw-rule-title">{item.title}</p>
@@ -201,13 +210,14 @@ const Widget = ({
           ""
         )}
         <h4>
-          {location === WidgetConstants.RulesUrl ? (
+          {location === WidgetConstants.ProdRulesUrl ||
+          location === WidgetConstants.StagingRulesUrl ? (
             "Latest Rules"
           ) : (
             <a
               rel="noreferrer"
               target="_blank"
-              href={`${WidgetConstants.LatestRulesUrl}`}
+              href={`${WidgetConstants.ProdLatestRulesUrl}`}
             >
               Latest Rules
             </a>