feat: add codespell linter workflow in CI

.github/workflows/ci.yml

@@ -0,0 +1,14 @@
+name: CI
+
+on:
+  pull_request:
+    branches:
+      - dev
+
+jobs:
+  typos:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: crate-ci/typos@master
+

_typos.toml

@@ -0,0 +1,14 @@
+[default]
+check-filename = false
+
+[default.extend-words]
+# Don't correct the abbreviation for Haskell.
+Hask = "Hask"
+AGS = "AGS"
+
+[type.po]
+extend-glob = ["*.po", "*.css"]
+check-file = false
+
+[files]
+extend-exclude = ["po/*.po", "_data/*", "./public/assets/*"]

workspaces/cms-utils/src/index.ts

@@ -23,7 +23,7 @@ export function youtubeVideoIdFromURL(url: string): string | undefined | void {
 
 export function slugify(value: string): string {
   return String(value)
-    .normalize("NFD") // split an accented letter in the base letter and the acent
+    .normalize("NFD") // split an accented letter in the base letter and the accent
     .replace(/[\u0300-\u036f]/g, "") // remove all previously split accents
     .toLowerCase()
     .trim()
@@ -89,8 +89,8 @@ export async function getJSON(
   return res.json();
 }
 
-export const convertStringTagsToArray = (commaSeperatedTags: string = "") => {
-  return commaSeperatedTags
+export const convertStringTagsToArray = (commaSeparatedTags: string = "") => {
+  return commaSeparatedTags
     .replace(/,\s*$/, "")
     .split(",")
     .map((t: string) => t.trim());

workspaces/netlify-cms-auth/Readme.md

@@ -6,7 +6,7 @@ the CMS auth has a [url callback whitelist](src/callback.ts?plain=63) and is dep
 | Name          | netlify-cms-auth  |
 | usage model   | Unbound           |
 
-### enviroment variables and secrets
+### environment variables and secrets
 #### in cloudflare
 | Name                       | Type    | Description                                     |
 |----------------------------|---------|-------------------------------------------------|

workspaces/website/src/components/Accordion/Accordion.tsx

@@ -24,8 +24,8 @@ const navigation = definePartsStyle({
     },
 
     _expanded: {
-      bg: "nav-accordian-expanded-bg",
-      color: "nav-accordian-expanded-fg",
+      bg: "nav-accordion-expanded-bg",
+      color: "nav-accordion-expanded-fg",
     },
   },
 });
@@ -75,7 +75,7 @@ const page = definePartsStyle({
 
     _expanded: {
       color: "heading-navy-fg",
-      // bg: "nav-accordian-expanded-bg",
+      // bg: "nav-accordion-expanded-bg",
     },
   },
 });

workspaces/website/src/components/Layout/Navbar/NavLayout.tsx

@@ -31,7 +31,7 @@ export const NavLayout = (props: NavLayoutProps) => {
   const MenuIcon = isMenuOpen ? HiOutlineXMark : HiBars3;
   const { locale } = usePageContext();
   const { colorMode, toggleColorMode } = useColorMode();
-  const toogleTheme = () => {
+  const toggleTheme = () => {
     toggleColorMode();
     if (typeof window !== "undefined" && window.gtag) {
       window.gtag("event", "theme_change", {
@@ -65,7 +65,7 @@ export const NavLayout = (props: NavLayoutProps) => {
                   )
                 }
                 aria-label="Toggle color mode"
-                onClick={toogleTheme}
+                onClick={toggleTheme}
                 marginInlineStart="0 !important"
               />
             </Box>

workspaces/website/src/components/Layout/Navbar/Navbar.tsx

@@ -63,7 +63,7 @@ export const NavBar = ({
     onClose();
   }, [onClose, pathname]);
 
-  const toogleTheme = () => {
+  const toggleTheme = () => {
     toggleColorMode();
     if (typeof window !== "undefined" && window.gtag) {
       window.gtag("event", "theme_change", {
@@ -129,7 +129,7 @@ export const NavBar = ({
                 }
                 flex="1"
                 height="100%"
-                onClick={toogleTheme}
+                onClick={toggleTheme}
                 size="lg"
               >
                 {colorMode === "light" ? "Dark" : "Light"} mode

workspaces/website/src/components/LinkList/LinkList.stories.tsx

@@ -41,7 +41,7 @@ export const Basic = () => (
   </ThemeProvider>
 );
 
-export const Seperated = () => {
+export const Separated = () => {
   const [size, setSize] = useState<ListSize>("md");
 
   return (
@@ -58,7 +58,7 @@ export const Seperated = () => {
         </Stack>
       </RadioGroup>
       <HStack>
-        <Root heading="List with seperated items" listGap={size}>
+        <Root heading="List with separated items" listGap={size}>
           <Item
             link={{
               custom_title: "Documentation 2",

workspaces/website/src/components/LinkList/LinkList.tsx

@@ -8,10 +8,10 @@ import { ArrowUpIcon } from "./ArrowUpIcon";
 
 export type ListSize = "sm" | "md" | "lg";
 
-const ListContext = createContext<{ listSize: ListSize; isSeperated: boolean }>(
+const ListContext = createContext<{ listSize: ListSize; isSeparated: boolean }>(
   {
     listSize: "md",
-    isSeperated: false,
+    isSeparated: false,
   }
 );
 type RootProps = {
@@ -51,7 +51,7 @@ const Root = (props: RootProps) => {
         gap={gap[listGap as ListSize] || "0px"}
       >
         <ListContext.Provider
-          value={{ listSize: listSize || "md", isSeperated: !!listGap }}
+          value={{ listSize: listSize || "md", isSeparated: !!listGap }}
         >
           {children}
         </ListContext.Provider>
@@ -88,7 +88,7 @@ const getLinkIcon = (iconName?: string) => {
   return HiOutlineArrowRightCircle;
 };
 const Item = ({ subLabel, link, avatar, ...rest }: ItemProps) => {
-  const { listSize, isSeperated } = useContext(ListContext);
+  const { listSize, isSeparated } = useContext(ListContext);
   const isLinkisExternal = !!link?.custom_external_link;
 
   const height = {
@@ -107,12 +107,12 @@ const Item = ({ subLabel, link, avatar, ...rest }: ItemProps) => {
       alignItems="center"
       px="24px"
       py={{ base: "24px", md: "0px" }}
-      borderTopWidth={isSeperated ? "1px" : "0px"}
+      borderTopWidth={isSeparated ? "1px" : "0px"}
       borderBottomWidth="1px!important"
       borderColor="card-br!important"
       backgroundColor="card-bg"
       _hover={{ textDecoration: "none" }}
-      _last={{ borderBottomWidth: isSeperated ? "1px" : "0px" }}
+      _last={{ borderBottomWidth: isSeparated ? "1px" : "0px" }}
     >
       <Flex
         direction={{ base: "column", md: "row" }}

workspaces/website/src/pages/(components)/Navbar.tsx

@@ -1,5 +1,5 @@
 
-import * as NavAccordian from "@ui/Layout/Navbar/NavAccordion";
+import * as NavAccordion from "@ui/Layout/Navbar/NavAccordion";
 import type { MainMenu } from "@starknet-io/cms-data/src/settings/main-menu";
 import { NavBar } from "@ui/Layout/Navbar/Navbar";
 import { MenuItemWithDropdown } from "@ui/Layout/Navbar/MenuItemWithDropdown";
@@ -134,12 +134,12 @@ export default function Navbar({
           )
         )}
         mobileNavItems={
-          <NavAccordian.Root>
+          <NavAccordion.Root>
             {mainMenu?.items?.map((mainMenuItem, mainMenuItemIndex) => {
               return (
-                <NavAccordian.Item key={mainMenuItemIndex}>
-                  <NavAccordian.Button title={mainMenuItem.title} />
-                  <NavAccordian.Panel>
+                <NavAccordion.Item key={mainMenuItemIndex}>
+                  <NavAccordion.Button title={mainMenuItem.title} />
+                  <NavAccordion.Panel>
                     {mainMenuItem.columns?.length &&
                       mainMenuItem.columns?.map((column, columnIndex) => (
                         <Box key={columnIndex}>
@@ -180,11 +180,11 @@ export default function Navbar({
                           ))}
                         </Box>
                       ))}
-                  </NavAccordian.Panel>
-                </NavAccordian.Item>
+                  </NavAccordion.Panel>
+                </NavAccordion.Item>
               );
             })}
-          </NavAccordian.Root>
+          </NavAccordion.Root>
         }
       />
     </NavbarContainer>

workspaces/website/src/pages/live-preview/(componnets)/LivePreivewPage.tsx

@@ -19,7 +19,7 @@ export interface Props {
   readonly roadmapVersions: readonly RoadmapVersion[] 
 }
 
-export default function LivePreivewPage({
+export default function LivePreviewPage({
   topics,
   categories,
   roadmapVersions

workspaces/website/src/style/tokens.ts

@@ -77,8 +77,8 @@ export const tokens = {
       "navbar-link-visited-fg": "#2166EF",
       "nav-dialog-bg": "#FBFBFB",
       "nav-header-bg": "#ffffff",
-      "nav-accordian-expanded-bg": "#0C0C4F",
-      "nav-accordian-expanded-fg": "#FFFFFF",
+      "nav-accordion-expanded-bg": "#0C0C4F",
+      "nav-accordion-expanded-fg": "#FFFFFF",
       "nav-footer-br": "#EFEFEF",
       "nav-searchinput-bg": "#F6F6F6",
       "nav-searchinput-fg": "#858585",
@@ -280,8 +280,8 @@ export const tokens = {
       "navbar-link-visited-fg": "#2166EF",
       "nav-dialog-bg": "#1B1B1B",
       "nav-header-bg": "#000000",
-      "nav-accordian-expanded-bg": "#AFCAFF",
-      "nav-accordian-expanded-fg": "#121212",
+      "nav-accordion-expanded-bg": "#AFCAFF",
+      "nav-accordion-expanded-fg": "#121212",
       "nav-footer-br": "#313131",
       "nav-searchinput-bg": "#1B1B1B",
       "nav-searchinput-fg": "#AFCAFF",
@@ -658,13 +658,13 @@ export const semanticTokens = {
       default: tokens.colors.light["nav-header-bg"],
       _dark: tokens.colors.dark["nav-header-bg"],
     },
-    "nav-accordian-expanded-bg": {
-      default: tokens.colors.light["nav-accordian-expanded-bg"],
-      _dark: tokens.colors.dark["nav-accordian-expanded-bg"],
+    "nav-accordion-expanded-bg": {
+      default: tokens.colors.light["nav-accordion-expanded-bg"],
+      _dark: tokens.colors.dark["nav-accordion-expanded-bg"],
     },
-    "nav-accordian-expanded-fg": {
-      default: tokens.colors.light["nav-accordian-expanded-fg"],
-      _dark: tokens.colors.dark["nav-accordian-expanded-fg"],
+    "nav-accordion-expanded-fg": {
+      default: tokens.colors.light["nav-accordion-expanded-fg"],
+      _dark: tokens.colors.dark["nav-accordion-expanded-fg"],
     },
     "nav-footer-br": {
       default: tokens.colors.light["nav-footer-br"],