✨(react) add tokens.ts files handling

These files will be used to define the custom design tokens per components.
They are automatically aggregated by the packages/react/cunningham.ts file,
this is why handling typescript config file was important.

packages/react/src/components/Button/index.scss

@@ -1,8 +1,10 @@
 .c__button {
-  background-color: var(--c--colors--primary);
+  background-image: var(--c--theme--colors--primary-gradient);
   padding: 8px 30px;
-  border-radius: 6px;
+  border-radius: var(--c--components--button--border-radius);
   border: none;
+  box-shadow: var(--c--components--button--shadow);
   color: white;
   font-weight: bold;
+  cursor: pointer;
 }

packages/react/src/components/Button/index.spec.tsx

@@ -1,12 +1,20 @@
 import { describe, expect, it } from "vitest";
 import { render, screen } from "@testing-library/react";
 import React from "react";
+import { buildTheme, loadTokens } from "tests/Theme";
 import { Button } from "./index";
 
 describe("<Button/>", () => {
   it("renders", () => {
-    render(<Button />);
-    const button = screen.getByRole("button", { name: "<Button/>" });
+    render(<Button>Test button</Button>);
+    const button = screen.getByRole("button", { name: "Test button" });
     expect(button.classList.contains("c__button")).toBe(true);
   });
+
+  it("uses custom token", async () => {
+    await buildTheme();
+    const tokens = await loadTokens();
+    expect(tokens.components.button["border-radius"]).toBeDefined();
+    expect(tokens.components.button.shadow).toBeDefined();
+  });
 });

packages/react/src/components/Button/index.stories.tsx

@@ -7,7 +7,9 @@ export default {
   component: Button,
 } as ComponentMeta<typeof Button>;
 
-const Template: ComponentStory<typeof Button> = () => <Button />;
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
 
 export const Default = Template.bind({});
-Default.args = {};
+Default.args = {
+  children: "Amazing button",
+};

packages/react/src/components/Button/index.tsx

@@ -1,5 +1,7 @@
-import React from "react";
+import React, { PropsWithChildren } from "react";
 
-export const Button = () => {
-  return <button className="c__button">{"<Button/>"}</button>;
+interface Props extends PropsWithChildren {}
+
+export const Button = ({ children }: Props) => {
+  return <button className="c__button">{children}</button>;
 };

packages/react/src/components/Button/tokens.ts

@@ -0,0 +1,8 @@
+import { DefaultTokens } from "@openfun/cunningham-tokens";
+
+export const tokens = (defaults: DefaultTokens) => {
+  return {
+    "border-radius": "5px",
+    shadow: "0px 0px 10px 1px " + defaults.theme.colors.primary + ";",
+  };
+};