From 0343e9a7c3b1b13bd1cb70dbe532a7c0270a6ae0 Mon Sep 17 00:00:00 2001 From: Vanessa Tran Date: Thu, 29 Aug 2024 15:00:37 -0600 Subject: [PATCH] feat(#2035): update React setup guide for breaking change --- package-lock.json | 8 +- package.json | 2 +- src/App.tsx | 2 + .../developers/DevelopersSetup.tsx | 362 ++++++++++-------- 4 files changed, 201 insertions(+), 173 deletions(-) diff --git a/package-lock.json b/package-lock.json index 76445d80b..88624adfa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "code-sandbox", "version": "0.0.0", "dependencies": { - "@abgov/react-components": "4.24.0", + "@abgov/react-components": "5.0.0", "@abgov/web-components": "1.25.0", "@faker-js/faker": "^8.3.1", "highlight.js": "^11.8.0", @@ -41,9 +41,9 @@ } }, "node_modules/@abgov/react-components": { - "version": "4.24.0", - "resolved": "https://registry.npmjs.org/@abgov/react-components/-/react-components-4.24.0.tgz", - "integrity": "sha512-oFkS8hENdDbUCHnFzM6D6STg/3WNNAU1uuFTfF3YHJqiv/ZrD0FhMkIjBA+/7dxQKdmzQKbz81EKR5juAq0G3g==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@abgov/react-components/-/react-components-5.0.0.tgz", + "integrity": "sha512-XiEpyCXshMC2kxAaF6m31Z5R9koqyrUaqoX8bS5Vn6TeGBATmcw5XJu8lHDKJlC3UCoSijdHWKnALj/pTvDzjA==", "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0", diff --git a/package.json b/package.json index b6f8c0776..3b774e267 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "prettier": "npx prettier . --write" }, "dependencies": { - "@abgov/react-components": "4.24.0", + "@abgov/react-components": "5.0.0", "@abgov/web-components": "1.25.0", "@faker-js/faker": "^8.3.1", "highlight.js": "^11.8.0", diff --git a/src/App.tsx b/src/App.tsx index 671b384fc..8f9745b3d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,6 +7,8 @@ import { createRoutesFromElements, } from "react-router-dom"; +import "@abgov/web-components"; + import Root from "@routes/root"; import { useMediaQuery } from "@hooks/useMediaQuery"; import { DeviceWidthContext } from "@contexts/DeviceWidthContext"; diff --git a/src/routes/get-started/developers/DevelopersSetup.tsx b/src/routes/get-started/developers/DevelopersSetup.tsx index cd3b7ad00..b7e1cc5a5 100644 --- a/src/routes/get-started/developers/DevelopersSetup.tsx +++ b/src/routes/get-started/developers/DevelopersSetup.tsx @@ -4,48 +4,47 @@ import "./Developers.css"; import { ComponentContent } from "@components/component-content/ComponentContent"; export default function DevelopersSetupPage() { - return (
- -

Developers

-

Setup

- -

Once you are setup, you can use the project template to quickly get started.

- View project templates - - -

Angular UI components

-

This is the web component library and utilizes Angular's web component integration.

- -

1. Add Dependencies

- +

Developers

+

Setup

+ +

Once you are setup, you can use the project template to quickly get started.

+ View project templates + + +

Angular UI components

+

This is the web component library and utilizes Angular's web component integration.

+ +

1. Add Dependencies

+ - -

2. Link ionicons in app/index.html Add the following in the head element

- + +

2. Link ionicons in app/index.html Add the following in the head element

+ `} - /> - -

3. Update src/app/app.module.ts as per the four steps below

- + +

3. Update src/app/app.module.ts as per the four steps below

+ - -

4. Add the styles link in the src/styles.css file

- - - - -

React UI components

-

- This library contains React components which wrap the Government of Alberta Web Components. -

- -

1. Add Dependencies

- + +

4. Add the styles link in the src/styles.css file

+ + + + +

React UI components

+

+ This library contains React components which wrap the Government of Alberta Web + Components. +

+ +

1. Add Dependencies

+ - -

2. Link ionicons in app/index.html Add the following to the head element

- + +

2. Link ionicons in app/index.html Add the following to the head element

+ `} - /> - -

3. Import the web-component styles in the src/index.css file

- - - - -

Vue web components

-

This library contains react components from the Government of Alberta.

- -

1. Add Dependencies

- - -

2. Link ionicons in index.html Add the following in the head element

- + +

3. Import the web-component styles in the src/index.css file

+ + +

4. Import the web-component library at the top of your entry point file

+

Your entry point file might be called index.tsx or main.tsx:

+ { + return
Hello, world!
; + }; + + const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); + + root.render( + + + + ); + `} + /> + + + +

Vue web components

+

This library contains react components from the Government of Alberta.

+ +

1. Add Dependencies

+ + +

2. Link ionicons in index.html Add the following in the head element

+ `} - /> - -

3. Update vite.config.js with the following:

- + +

3. Update vite.config.js with the following:

+ - -

4. Import the web-components into src/main.js:

- - -

- 5. Add the styles link in the src/assets/main.css file or wherever your main css file is - located: -

- - - - -

Angular/React templates

- - - Angular template - - - React template - - - -

To use the templates, follow these steps:

-
    -
  1. - Click the green Use this template button -
    2. -
  2. - Select Create a new repository -
    3. -
  3. Select an owner and give the repo a suitable name for your project
    4. -
  4. Select either Public or Private
    5. -
  5. - Click the button Create repository from template -
    6. -
  6. Clone the repo onto your machine
    7. -
  7. - Using a terminal of some kind, go into the directory you created and run the following - commands (in order): -
      -
    1. - npm i -
      2. -
    2. - npm run build -
      3. -
    3. - npm run start-- if using Angular, npm run dev --if using - react -
      4. -
    -
    8. -
  8. Go to the listed port number of your localhost
    9. -
- + /> + +

4. Import the web-components into src/main.js:

+ + +

+ 5. Add the styles link in the src/assets/main.css file or wherever your main css file is + located: +

+ + + + +

Angular/React templates

+ + + Angular template + + + React template + + + +

To use the templates, follow these steps:

+
    +
  1. + Click the green Use this template button +
    2. +
  2. + Select Create a new repository +
    3. +
  3. Select an owner and give the repo a suitable name for your project
    4. +
  4. Select either Public or Private
    5. +
  5. + Click the button Create repository from template +
    6. +
  6. Clone the repo onto your machine
    7. +
  7. + Using a terminal of some kind, go into the directory you created and run the following + commands (in order): +
      +
    1. + npm i +
      2. +
    2. + npm run build +
      3. +
    3. + npm run start-- if using Angular, npm run dev --if using + react +
      4. +
    +
    8. +
  8. Go to the listed port number of your localhost
    9. +
+
); }