feat(react): ✨ Criado componentes e stories base

Criado os componentes base em react e seus stories, tambem realizado a retirada temporaria das referencias de angular

Author: kevinDsousa

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "conventionalCommits.scopes": ["tree"]
+  "conventionalCommits.scopes": ["tree", "react"]
 }

applications/react/package.json

@@ -24,6 +24,9 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@stitches/react": "^1.2.8"
+    "@stitches/react": "^1.2.8",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.0.0",
+    "phosphor-react": "^1.4.1"
   }
 }

applications/react/src/components/Avatar/index.tsx

@@ -0,0 +1,15 @@
+import { User } from "phosphor-react";
+import { AvatarContainer, AvatarImage, AvatarFallback } from "./styles";
+import { AvatarProps } from "../../types/AvatarProps";
+
+export function Avatar(props: AvatarProps) {
+  return (
+    <AvatarContainer>
+      <AvatarImage {...props} />
+
+      <AvatarFallback delayMs={600}>
+        <User />
+      </AvatarFallback>
+    </AvatarContainer>
+  );
+}

applications/react/src/components/Avatar/styles.ts

@@ -0,0 +1,32 @@
+import * as Avatar from "@radix-ui/react-avatar";
+import { styled } from "../../styles";
+
+export const AvatarContainer = styled(Avatar.Root, {
+  borderRadius: "$full",
+  display: "inline-block",
+  width: "$12",
+  height: "$12",
+  overflow: "hidden",
+});
+
+export const AvatarImage = styled(Avatar.Image, {
+  width: "100%",
+  height: "100%",
+  objectFit: "cover",
+  borderRadius: "inherit",
+});
+
+export const AvatarFallback = styled(Avatar.Fallback, {
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "$gray600",
+  color: "$gray800",
+
+  svg: {
+    width: "$6",
+    height: "$6",
+  },
+});

applications/react/src/components/Box.tsx

@@ -0,0 +1,8 @@
+import { styled } from "../styles";
+
+export const Box = styled("div", {
+  padding: "$4",
+  borderRadius: "$md",
+  backgroundColor: "$gray800",
+  border: "1px solid $gray600",
+});

applications/react/src/components/Button.tsx

@@ -1,27 +1,88 @@
 import { styled } from "../styles";
-import { ComponentProps } from "react";
 
 export const Button = styled("button", {
-  backgroundColor: "$gray900",
+  all: "unset",
   borderRadius: "$sm",
-  border: 0,
-  fontWeight: "$bold",
-  color: "$white",
+  fontSize: "$sm",
+  fontWeight: "$medium",
+  fontFamily: "$default",
+  textAlign: "center",
+  minWidth: 120,
+  boxSizing: "border-box",
+  padding: "0 $4",
+
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "$2",
+
+  cursor: "pointer",
+
+  svg: {
+    width: "$4",
+    height: "$4",
+  },
+
+  "&:disabled": {
+    cursor: "not-allowed",
+  },
 
   variants: {
+    variant: {
+      primary: {
+        color: "$white",
+        background: "$green500",
+
+        "&:not(:disabled):hover": {
+          background: "$green300",
+        },
+
+        "&:disabled": {
+          backgroundColor: "$gray200",
+        },
+      },
+
+      secondary: {
+        color: "$green300",
+        border: "2px solid $green500",
+
+        "&:not(:disabled):hover": {
+          background: "$green300",
+          color: "$white",
+        },
+
+        "&:disabled": {
+          color: "$gray200",
+          borderColor: "$gray200",
+        },
+      },
+
+      tertiary: {
+        color: "$gray100",
+
+        "&:not(:disabled):hover": {
+          color: "$white",
+        },
+
+        "&:disabled": {
+          color: "$gray600",
+        },
+      },
+    },
+
     size: {
-      small: {
-        fontSize: 14,
-        padding: "$2 $4",
+      sm: {
+        height: 38,
       },
-      big: {
-        fontSize: 16,
-        padding: "$3 $6",
+
+      md: {
+        height: 46,
       },
     },
   },
 
   defaultVariants: {
-    size: "small",
+    variant: "primary",
+    size: "md",
   },
 });

applications/react/src/components/Checkbox/index.tsx

@@ -0,0 +1,13 @@
+import { Check } from "phosphor-react";
+import { CheckboxContainer, CheckboxIndicator } from "./styles";
+import { CheckboxProps } from "../../types/CheckboxProps";
+
+export function Checkbox(props: CheckboxProps) {
+  return (
+    <CheckboxContainer {...props}>
+      <CheckboxIndicator asChild>
+        <Check weight="bold" />
+      </CheckboxIndicator>
+    </CheckboxContainer>
+  );
+}

applications/react/src/components/Checkbox/styles.ts

@@ -0,0 +1,58 @@
+import * as Checkbox from "@radix-ui/react-checkbox";
+import { styled, keyframes } from "../../styles";
+
+export const CheckboxContainer = styled(Checkbox.Root, {
+  all: "unset",
+  width: "$6",
+  height: "$6",
+  backgroundColor: "$gray900",
+  borderRadius: "$xs",
+  lineHeight: 0,
+  cursor: "pointer",
+  overflow: "hidden",
+  boxSizing: "border-box",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  border: "2px solid $gray900",
+
+  '&[data-state="checked"]': {
+    backgroundColor: "$ignite300",
+  },
+
+  "&:focus": {
+    border: "2px solid $ignite300",
+  },
+});
+
+const slideIn = keyframes({
+  from: {
+    transform: "translateY(-100%)",
+  },
+  to: {
+    transform: "translateY(0)",
+  },
+});
+
+const slideOut = keyframes({
+  from: {
+    transform: "translateY(0)",
+  },
+  to: {
+    transform: "translateY(-100%)",
+  },
+});
+
+export const CheckboxIndicator = styled(Checkbox.Indicator, {
+  color: "$white",
+  width: "$4",
+  height: "$4",
+
+  '&[data-state="checked"]': {
+    animation: `${slideIn} 200ms ease-out`,
+  },
+
+  '&[data-state="unchecked"]': {
+    animation: `${slideOut} 200ms ease-out`,
+  },
+});

applications/react/src/components/Heading.tsx

@@ -0,0 +1,25 @@
+import { fontSizes } from "@saturn/pack-tokens";
+import { styled } from "../styles";
+
+export const Heading = styled("h2", {
+  fontFamily: "$default",
+  lineHeight: "$short",
+  margin: 0,
+  color: "$gray100",
+
+  variants: {
+    size: {
+      sm: { fontSize: "$xl" },
+      md: { fontSize: "$2xl" },
+      lg: { fontSize: "$4xl" },
+      "2xl": { fontSize: "$5xl" },
+      "3xl": { fontSize: "$6xl" },
+      "4xl": { fontSize: "$7xl" },
+      "5xl": { fontSize: "$8xl" },
+      "6xl": { fontSize: "$9xl" },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});

applications/react/src/components/MultiStep/index.tsx

@@ -0,0 +1,18 @@
+import { MultiStepProps } from "../../types/MultiStepProps";
+import { Label, MultiStepContainer, Step, Steps } from "./styles";
+
+export function MultiStep({ size, currentStep = 1 }: MultiStepProps) {
+  return (
+    <MultiStepContainer>
+      <Label>
+        Passo {currentStep} de {size}
+      </Label>
+
+      <Steps css={{ "--steps-size": size }}>
+        {Array.from({ length: size }, (_, i) => i + 1).map((step) => {
+          return <Step key={step} active={currentStep >= step} />;
+        })}
+      </Steps>
+    </MultiStepContainer>
+  );
+}