globalfy-design-system 0.1.0

package/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-typescript",
+    ["@babel/preset-react", { "runtime": "automatic" }]
+  ]
+}

package/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true, node: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+    "prettier",
+    "plugin:storybook/recommended"
+  ],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh", "jest-react"],
+  rules: {
+    "react-refresh/only-export-components": [
+      "warn",
+      { allowConstantExport: true }
+    ]
+  }
+};

package/.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit ${1}

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn lint-staged --concurrent false

package/.lintstagedrc

@@ -0,0 +1,4 @@
+{
+  "*.{js,jsx,ts,tsx}": ["prettier --write", "eslint --fix", "eslint"],
+  "*.json": ["prettier --write"]
+}

package/.nvmrc

@@ -0,0 +1 @@
+18.18.2

package/.prettierrc

@@ -0,0 +1,3 @@
+{
+    "trailingComma": "none"
+}

package/.storybook/main.ts

@@ -0,0 +1,20 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+    "@storybook/addon-styling"
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {}
+  },
+  docs: {
+    autodocs: "tag"
+  }
+};
+export default config;

package/.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Livvic:wght@300;400;500;600;700;900&display=swap"
+  rel="stylesheet"
+/>

package/.storybook/preview.ts

@@ -0,0 +1,17 @@
+import type { Preview } from "@storybook/react";
+import "../src/global.css";
+import "../src/assets/fonts/satoshi/satoshi.css";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    }
+  }
+};
+
+export default preview;

package/CODEOWNERS

@@ -0,0 +1 @@
+* jefferson.belchior@globalfy.com

package/README.md

@@ -0,0 +1,40 @@
+# Globalfy Design System
+
+Shared Components Library ready to use on React Globalfy projects
+
+## Working on the project
+
+### Scripts
+
+- _test_ Run the unit tests
+- _build_ Build the library
+- _lint_ Run the project linter
+- _storybook_ Run the storybook
+- _build-storybook_ Build the storybook
+
+### Branchs
+
+- Every work branch must be created from the `Develop` branch
+- The Branch must follow the following pattern `<feature | fix>/<taskScope-taskNumber>-<taskDescription>`
+  - Working on a task `feature/aa-0000-drink-coffee`
+  - Working on a bug `fix/aa-0000-add-sugar`
+
+### Commits
+
+The project is configured with commit [rules](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional#rules) that are checked every time a new commit is added, to be able to commit you must follow this pattern:
+
+type(scope?): message
+
+feat: new AgGrid component
+fix: missing email validation
+fix(validations): missing email validation
+
+- _TYPE:_ Type of commit [build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test]
+- _SCOPE:_ Scope of the changes, it's not required
+- _MESSAGE:_ The commit message
+
+### Tests
+
+- Unit tests use [Jest](<[https://https://jestjs.io//](https://jestjs.io/)>) with [react-testing-library](https://testing-library.com/docs/react-testing-library/intro/)
+- All components developed must have tests
+- Test coverage must be 100%

package/bitbucket-pipelines.yml

@@ -0,0 +1,37 @@
+image: node:18.18.2
+
+definitions:
+  steps:
+    - step: &test
+        name: Test
+        cache:
+          - node
+        script:
+          - yarn install
+          - yarn test
+    - step: &build
+        name: Build
+        cache:
+          - node
+        script:
+          - yarn add -g typescript@5.0.2 vite@4.4.5
+          - yarn build
+    - step: &publish
+        name: Publish
+        deployment: production
+        script:
+          - npm version minor -m "[skip ci] Upgrade to %s"
+          - git push && git push --tags
+          - pipe: atlassian/npm-publish:0.2.0
+            variables:
+              NPM_TOKEN: $NPM_TOKEN
+
+pipelines:
+  default:
+    - step: *test
+    - step: *build
+  branches:
+    master:
+      - step: *test
+      - step: *build
+      - step: *publish

package/commitlint.config.cjs

@@ -0,0 +1 @@
+module.exports = { extends: ["@commitlint/config-conventional"] };

package/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/global.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/shadcn/components",
+    "utils": "@/shadcn/"
+  }
+}

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/jest.config.js

@@ -0,0 +1,9 @@
+export default {
+  testEnvironment: "jsdom",
+  moduleNameMapper: {
+    "^.+\\.svg$": "jest-svg-transformer",
+    "^.+\\.(css|less|scss)$": "identity-obj-proxy",
+    "^@/(.*)$": "<rootDir>/src/$1"
+  },
+  setupFilesAfterEnv: ["<rootDir>/testSetup.ts"]
+};

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "globalfy-design-system",
+  "version": "0.1.0",
+  "description": "Globalfy Design System",
+  "type": "module",
+  "scripts": {
+    "test": "jest --coverage",
+    "test:watch": "jest --watch --coverage",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "postinstall": "husky install"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.3.2",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "lucide-react": "^0.288.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.47.0",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@commitlint/cli": "^18.0.0",
+    "@commitlint/config-conventional": "^18.0.0",
+    "@storybook/addon-essentials": "^7.5.1",
+    "@storybook/addon-interactions": "^7.5.1",
+    "@storybook/addon-links": "^7.5.1",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/blocks": "^7.5.1",
+    "@storybook/react": "^7.5.1",
+    "@storybook/react-vite": "^7.5.1",
+    "@storybook/testing-library": "^0.2.2",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.1.0",
+    "@types/jest": "^29.5.8",
+    "@types/node": "^20.8.7",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react": "^4.0.3",
+    "autoprefixer": "^10.4.16",
+    "babel-jest": "^29.7.0",
+    "eslint": "^8.45.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-jest-react": "^0.1.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "eslint-plugin-storybook": "^0.6.15",
+    "husky": "^8.0.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-svg-transformer": "^1.0.0",
+    "jsdom": "^22.1.0",
+    "lint-staged": "^15.0.2",
+    "postcss": "^8.4.31",
+    "prettier": "^3.0.3",
+    "react-test-renderer": "^18.2.0",
+    "storybook": "^7.5.1",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5",
+    "vite-plugin-svgr": "^4.1.0"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/assets/fonts/satoshi/satoshi.css

@@ -0,0 +1,43 @@
+@font-face {
+  font-family: "Satoshi-Regular";
+  src:
+    url("./Satoshi-Regular.woff2") format("woff2"),
+    url("./Satoshi-Regular.woff") format("woff"),
+    url("./Satoshi-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Satoshi-Medium";
+  src:
+    url("./Satoshi-Medium.woff2") format("woff2"),
+    url("./Satoshi-Medium.woff") format("woff"),
+    url("./Satoshi-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Satoshi-Bold";
+  src:
+    url("./Satoshi-Bold.woff2") format("woff2"),
+    url("./Satoshi-Bold.woff") format("woff"),
+    url("./Satoshi-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-display: swap;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Satoshi-Black";
+  src:
+    url("./Satoshi-Black.woff2") format("woff2"),
+    url("./Satoshi-Black.woff") format("woff"),
+    url("./Satoshi-Black.ttf") format("truetype");
+  font-weight: 900;
+  font-display: swap;
+  font-style: normal;
+}

package/src/components/atoms/Avatar/Avatar.stories.tsx

@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Avatar } from ".";
+
+const meta = {
+  title: "Components/Atoms/Avatar",
+  component: Avatar,
+  tags: ["autodocs"]
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  args: {
+    image: "https://picsum.photos/160"
+  }
+};
+
+export const Sizes = () => (
+  <div className="flex gap-4 items-center">
+    <Avatar size="small" image="https://picsum.photos/160" />
+    <Avatar size="large" image="https://picsum.photos/160" />
+  </div>
+);

package/src/components/atoms/Avatar/Avatar.test.tsx

@@ -0,0 +1,19 @@
+import { render } from "@testing-library/react";
+
+import { Avatar } from "./Avatar";
+
+describe("Avatar Component", () => {
+  test("should render small size", async () => {
+    const { container } = render(<Avatar image="https://picsum.photos/160" />);
+
+    expect(container.firstElementChild?.classList).toContain("w-[75px]");
+  });
+
+  test("should render large size", async () => {
+    const { container } = render(
+      <Avatar size="large" image="https://picsum.photos/160" />
+    );
+
+    expect(container.firstElementChild?.classList).toContain("w-[172px]");
+  });
+});

package/src/components/atoms/Avatar/Avatar.tsx

@@ -0,0 +1,46 @@
+import {
+  Avatar as ShadcnAvatar,
+  AvatarFallback,
+  AvatarImage
+} from "@/shadcn/components/ui/avatar";
+import { AvatarProps } from "./Avatar.types";
+import { Icon } from "..";
+import { cva } from "class-variance-authority";
+import { classNames } from "@/utils/tailwind/classNames";
+
+export const Avatar = ({
+  image,
+  size = "small",
+  onLoadingStatusChange
+}: AvatarProps) => {
+  const iconVariants = cva("text-globalfy-grey500", {
+    variants: {
+      size: {
+        small: "text-[32px]",
+        large: "text-[64px]"
+      }
+    }
+  });
+
+  const avatarVariants = cva("border-globalfy-grey500 bg-globalfy-grey500", {
+    variants: {
+      size: {
+        small: "w-[75px] h-[75px] border-[3px]",
+        large: "w-[172px] h-[172px] border-[5px]"
+      }
+    }
+  });
+
+  return (
+    <ShadcnAvatar className={classNames(avatarVariants({ size }))}>
+      <AvatarImage
+        onLoadingStatusChange={onLoadingStatusChange}
+        src={image}
+        alt="user avatar"
+      />
+      <AvatarFallback className="bg-globalfy-white">
+        <Icon name="user" className={classNames(iconVariants({ size }))} />
+      </AvatarFallback>
+    </ShadcnAvatar>
+  );
+};

package/src/components/atoms/Avatar/Avatar.types.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from "react";
+
+export type AvatarProps = {
+  image: string;
+  size?: "small" | "large";
+  onLoadingStatusChange?: (status: string) => void;
+} & HTMLAttributes<HTMLImageElement>;

package/src/components/atoms/Avatar/index.ts

@@ -0,0 +1,2 @@
+export * from "./Avatar";
+export * from "./Avatar.types";

package/src/components/atoms/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Checkbox } from "./Checkbox";
+
+const meta = {
+  title: "Components/Atoms/Checkbox",
+  component: Checkbox,
+  tags: ["autodocs"]
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    disabled: false,
+    checked: true
+  }
+};

package/src/components/atoms/Checkbox/Checkbox.test.tsx

@@ -0,0 +1,12 @@
+import { render } from "@testing-library/react";
+
+import { Checkbox } from "./Checkbox";
+
+describe("Checkbox Component", () => {
+  test("should render a checkbox component", async () => {
+    const { getByRole } = await render(<Checkbox />);
+    const checkbox = getByRole("checkbox");
+
+    expect(checkbox).toBeTruthy();
+  });
+});

package/src/components/atoms/Checkbox/Checkbox.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Checkbox as SCNCheckbox } from "@/shadcn/components/ui/checkbox";
+import { classNames } from "@/utils/tailwind/classNames";
+
+export const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <SCNCheckbox
+      ref={ref}
+      className={classNames(
+        className,
+        "flex items-center justify-center border rounded-[2px] border-globalfy-grey600 data-[state=checked]:bg-globalfy-primaryGreen data-[state=checked]:border-globalfy-primaryGreen [&>*]:w-3 [&>*]:h-3"
+      )}
+      {...props}
+    />
+  );
+});

package/src/components/atoms/Checkbox/index.ts

@@ -0,0 +1 @@
+export * from "./Checkbox";

package/src/components/atoms/FieldMessage/FieldMessage.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FieldMessage } from ".";
+import { FormWrapper } from "@/utils/reactHookForm/FormWrapper";
+
+type FieldMessageProps = React.ComponentProps<typeof FieldMessage>;
+
+const meta: Meta<FieldMessageProps> = {
+  component: FieldMessage,
+  render: ({ children, ...args }) => <FormWrapper {...{ children, ...args }} />
+};
+
+export default meta;
+
+type Story = StoryObj<FieldMessageProps>;
+
+export const Playground: Story = {
+  args: {
+    children: "Sample message"
+  }
+};

package/src/components/atoms/FieldMessage/FieldMessage.test.tsx

@@ -0,0 +1,14 @@
+import { render, screen } from "@testing-library/react";
+import { FormWrapper } from "@/utils/reactHookForm/FormWrapper";
+import { FieldMessage } from ".";
+
+describe("FieldMessage Component", () => {
+  test("should render the provided children", () => {
+    render(
+      <FormWrapper>
+        <FieldMessage>Test Message</FieldMessage>
+      </FormWrapper>
+    );
+    expect(screen.getByText("Test Message")).toBeTruthy();
+  });
+});

package/src/components/atoms/FieldMessage/FieldMessage.tsx

@@ -0,0 +1,6 @@
+import { FormMessage } from "@/shadcn/components/ui/form";
+import { FieldMessageProps } from "./FieldMessage.type";
+
+export const FieldMessage = ({ children }: FieldMessageProps) => {
+  return <FormMessage>{children}</FormMessage>;
+};

package/src/components/atoms/FieldMessage/FieldMessage.type.ts

@@ -0,0 +1,3 @@
+export type FieldMessageProps = {
+  children: React.ReactNode;
+};

package/src/components/atoms/FieldMessage/index.ts

@@ -0,0 +1,2 @@
+export * from "./FieldMessage";
+export * from "./FieldMessage.type";