fix: components

Author: ericnordelo

content/contracts-cairo/api/access.mdx

@@ -13,10 +13,12 @@ This crate provides ways to restrict who can access the functions of a contract
 Starting from version `3.x.x`, the interfaces are no longer part of the `openzeppelin_access` package. The references documented here are contained in the `openzeppelin_interfaces` package version `v2.1.0`.
 </Callout>
 
+import { UMBRELLA_VERSION } from "../utils/constants.ts";
+
 ### `IAccessControl` [toc]
 <APIGithubLinkHeader
     moduleName="IAccessControl"
-    link="https://github.com/OpenZeppelin/cairo-contracts/blob/release-v3.0.0-alpha.1/packages/interfaces/src/access/accesscontrol.cairo"
+    link={`https://github.com/OpenZeppelin/cairo-contracts/blob/release-${UMBRELLA_VERSION}/packages/interfaces/src/access/accesscontrol.cairo`}
 />
 
 ```rust
@@ -148,7 +150,7 @@ Emitted when `account` is revoked `role`.
 ### `IAccessControlWithDelay` [toc]
 <APIGithubLinkHeader
     moduleName="IAccessControlWithDelay"
-    link="https://github.com/OpenZeppelin/cairo-contracts/blob/release-v3.0.0-alpha.1/packages/interfaces/src/access/accesscontrol.cairo"
+    link="https://github.com/OpenZeppelin/cairo-contracts/blob/release-{{umbrella_version}}/packages/interfaces/src/access/accesscontrol.cairo"
 />
 
 ```rust
@@ -211,7 +213,7 @@ Emitted when `account` is granted `role` with a delay.
 ### `IAccessControlDefaultAdminRules` [toc]
 <APIGithubLinkHeader
     moduleName="IAccessControlDefaultAdminRules"
-    link="https://github.com/OpenZeppelin/cairo-contracts/blob/release-v3.0.0-alpha.1/packages/interfaces/src/access/accesscontrol_default_admin_rules.cairo"
+    link="https://github.com/OpenZeppelin/cairo-contracts/blob/release-{{umbrella_version}}/packages/interfaces/src/access/accesscontrol_default_admin_rules.cairo"
 />
 
 ```rust
@@ -439,10 +441,10 @@ Emitted when a [pending\_default\_admin\_delay](#IAccessControlDefaultAdminRules
 
 ## Core
 
-### `OwnableComponent` [toc]
+### `OwnableComponent` [toc] [#OwnableComponent]
 <APIGithubLinkHeader
     moduleName="OwnableComponent"
-    link="https://github.com/OpenZeppelin/cairo-contracts/blob/release-v3.0.0-alpha.1/packages/access/src/ownable/ownable.cairo"
+    link="https://github.com/OpenZeppelin/cairo-contracts/blob/release-{{umbrella_version}}/packages/access/src/ownable/ownable.cairo"
 />
 
 ```rust
@@ -706,7 +708,7 @@ Emitted when the ownership is transferred.
 ### `AccessControlComponent` [toc]
 <APIGithubLinkHeader
     moduleName="AccessControlComponent"
-    link="https://github.com/OpenZeppelin/cairo-contracts/blob/release-v3.0.0-alpha.1/packages/access/src/accesscontrol/accesscontrol.cairo"
+    link="https://github.com/OpenZeppelin/cairo-contracts/blob/release-{{umbrella_version}}/packages/access/src/accesscontrol/accesscontrol.cairo"
 />
 
 ```rust
@@ -1102,7 +1104,7 @@ See [IAccessControl::RoleRevoked](#IAccessControl-RoleRevoked).
 ### `AccessControlDefaultAdminRulesComponent` [toc]
 <APIGithubLinkHeader
     moduleName="AccessControlDefaultAdminRulesComponent"
-    link="https://github.com/OpenZeppelin/cairo-contracts/blob/release-v3.0.0-alpha.1/packages/access/src/accesscontrol/extensions/accesscontrol_default_admin_rules.cairo"
+    link="https://github.com/OpenZeppelin/cairo-contracts/blob/release-{{umbrella_version}}/packages/access/src/accesscontrol/extensions/accesscontrol_default_admin_rules.cairo"
 />
 
 ```rust

content/contracts-cairo/components.mdx

@@ -32,7 +32,7 @@ mod MyContract {
 }
 ```
 
-The `path` argument should be the imported component itself (in this case, [InitializableComponent](/contracts-cairo/security#initializable)).
+The `path` argument should be the imported component itself (in this case, [InitializableComponent](security#initializable)).
 The `storage` and `event` arguments are the variable names that will be set in the `Storage` struct and `Event` enum, respectively.
 Note that even if the component doesn’t define any events, the compiler will still create an empty event enum inside the component module.
 
@@ -128,8 +128,7 @@ mod MyContract {
 `InitializableImpl` defines the `is_initialized` method in the component.
 By adding the embed attribute, `is_initialized` becomes a contract entrypoint for `MyContract`.
 
-
-
+<Callout type='info'>
 Embeddable implementations, when available in this library’s components, are segregated from the internal component implementation which makes it easier to safely expose.
 Components also separate granular implementations from [mixin](/contracts-cairo/components#mixins) implementations.
 The API documentation design reflects these groupings.
@@ -139,6 +138,7 @@ See [ERC20Component](/contracts-cairo/api/erc20#erc20component) as an example wh
 * **Embeddable Implementations**
 * **Internal Implementations**
 * **Events**
+</Callout>
 
 
 ### Mixins
@@ -232,13 +232,15 @@ mod Account {
 
 <Callout type='warn'>
 Failing to use a component’s `initializer` can result in irreparable contract deployments.
+
+Always read the API Reference documentation for each integrated component.
 </Callout>
-Always read the API documentation for each integrated component.
+
 
 Some components require some sort of setup upon construction.
 Usually, this would be a job for a constructor; however, components themselves cannot implement constructors.
 Components instead offer ``initializer``s within their `InternalImpl` to call from the contract’s constructor.
-Let’s look at how a contract would integrate [OwnableComponent](/contracts-cairo/api/access#ownablecomponent):
+Let’s look at how a contract would integrate [OwnableComponent](/contracts-cairo/api/access#OwnableComponent):
 
 ```rust
 #[starknet::contract]
@@ -441,8 +443,10 @@ mod MyContract {
 
 <Callout type='warn'>
 Customizing implementations and accessing component storage can potentially corrupt the state, bypass security checks, and undermine the component logic.
-</Callout>
+
 **Exercise extreme caution**. See [Security](#security).
+</Callout>
+
 
 ### Hooks
 

content/contracts-cairo/index.mdx

@@ -67,16 +67,16 @@ Install the library by declaring it as a dependency in the project’s `Scarb.to
 
 ```javascript
 [dependencies]
-openzeppelin = "3.0.0-alpha.2"
+openzeppelin = "{{umbrella_version}}"
 ```
 
 The previous example would import the entire library. We can also add each package as a separate dependency to
 improve the building time by not including modules that won’t be used:
 
 ```toml
 [dependencies]
-openzeppelin_access = "3.0.0-alpha.1"
-openzeppelin_token = "3.0.0-alpha.1"
+openzeppelin_access = "{{umbrella_version}}"
+openzeppelin_token = "{{umbrella_version}}"
 openzeppelin_interfaces = "{{openzeppelin_interfaces_version}}"
 ```
 
@@ -86,19 +86,19 @@ Here you can find a reference of the versioning of the sub-packages for this umb
 
 ```javascript
 [dependencies]
-openzeppelin_access = "3.0.0-alpha.1"
-openzeppelin_token = "3.0.0-alpha.1"
-openzeppelin_access = "3.0.0-alpha.1"
-openzeppelin_account = "3.0.0-alpha.1"
-openzeppelin_finance = "3.0.0-alpha.1"
+openzeppelin_access = "{{umbrella_version}}"
+openzeppelin_token = "{{umbrella_version}}"
+openzeppelin_access = "{{umbrella_version}}"
+openzeppelin_account = "{{umbrella_version}}"
+openzeppelin_finance = "{{umbrella_version}}"
 openzeppelin_interfaces = "{{openzeppelin_interfaces_version}}"
-openzeppelin_governance = "3.0.0-alpha.1"
-openzeppelin_introspection = "3.0.0-alpha.1"
-openzeppelin_merkle_tree = "3.0.0-alpha.1"
-openzeppelin_presets = "3.0.0-alpha.1"
-openzeppelin_security = "3.0.0-alpha.1"
-openzeppelin_token = "3.0.0-alpha.1"
-openzeppelin_upgrades = "3.0.0-alpha.1"
+openzeppelin_governance = "{{umbrella_version}}"
+openzeppelin_introspection = "{{umbrella_version}}"
+openzeppelin_merkle_tree = "{{umbrella_version}}"
+openzeppelin_presets = "{{umbrella_version}}"
+openzeppelin_security = "{{umbrella_version}}"
+openzeppelin_token = "{{umbrella_version}}"
+openzeppelin_upgrades = "{{umbrella_version}}"
 openzeppelin_utils = "{{openzeppelin_utils_version}}"
 ```
 

content/contracts-cairo/utils/constants.ts

@@ -1,3 +1,3 @@
 export const OPENZEPPELIN_INTERFACES_VERSION = "2.1.0-alpha.0";
 export const OPENZEPPELIN_UTILS_VERSION = "3.1.0-alpha.0";
-export const UMBRELLA_VERSION = "3.0.0-alpha.2";
+export const UMBRELLA_VERSION = "3.0.0-alpha.1";

src/components/ui/api-reference/api-github-link-header.tsx

@@ -5,7 +5,7 @@ export function APIGithubLinkHeader({
 	moduleName: string;
 	link: string;
 }) {
-	const id = moduleName.toLowerCase().replace(/ /g, "-") + "-toc";
+	const id = moduleName;
 	return (
 		<div
 			style={{ marginTop: "2em" }}

src/navigation/starknet.json

@@ -178,11 +178,6 @@
 			}
 		]
 	},
-	{
-		"type": "page",
-		"name": "Backwards Compatibility",
-		"url": "/contracts-cairo/backwards-compatibility"
-	},
 	{
 		"type": "folder",
 		"name": "API Reference",
@@ -264,6 +259,11 @@
 			}
 		]
 	},
+	{
+		"type": "page",
+		"name": "Backwards Compatibility",
+		"url": "/contracts-cairo/backwards-compatibility"
+	},
 	{
 		"type": "folder",
 		"name": "Previous Versions",