globalfy-design-system 0.3.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +13 -1
- package/.babelrc +0 -7
- package/.eslintrc.cjs +0 -20
- package/.husky/commit-msg +0 -4
- package/.husky/pre-commit +0 -4
- package/.lintstagedrc +0 -4
- package/.nvmrc +0 -1
- package/.prettierrc +0 -3
- package/.storybook/main.ts +0 -20
- package/.storybook/preview-head.html +0 -6
- package/.storybook/preview.ts +0 -17
- package/CODEOWNERS +0 -1
- package/bitbucket-pipelines.yml +0 -44
- package/commitlint.config.cjs +0 -1
- package/components.json +0 -16
- package/index.html +0 -13
- package/jest.config.js +0 -9
- package/postcss.config.js +0 -6
- package/public/vite.svg +0 -1
- package/src/assets/fonts/satoshi/Satoshi-Black.ttf +0 -0
- package/src/assets/fonts/satoshi/Satoshi-Black.woff +0 -0
- package/src/assets/fonts/satoshi/Satoshi-Black.woff2 +0 -0
- package/src/assets/fonts/satoshi/Satoshi-Bold.ttf +0 -0
- package/src/assets/fonts/satoshi/Satoshi-Bold.woff +0 -0
- package/src/assets/fonts/satoshi/Satoshi-Bold.woff2 +0 -0
- package/src/assets/fonts/satoshi/Satoshi-Medium.ttf +0 -0
- package/src/assets/fonts/satoshi/Satoshi-Medium.woff +0 -0
- package/src/assets/fonts/satoshi/Satoshi-Medium.woff2 +0 -0
- package/src/assets/fonts/satoshi/Satoshi-Regular.ttf +0 -0
- package/src/assets/fonts/satoshi/Satoshi-Regular.woff +0 -0
- package/src/assets/fonts/satoshi/Satoshi-Regular.woff2 +0 -0
- package/src/assets/fonts/satoshi/satoshi.css +0 -43
- package/src/components/atoms/Avatar/Avatar.stories.tsx +0 -26
- package/src/components/atoms/Avatar/Avatar.test.tsx +0 -19
- package/src/components/atoms/Avatar/Avatar.tsx +0 -46
- package/src/components/atoms/Avatar/Avatar.types.ts +0 -7
- package/src/components/atoms/Avatar/index.ts +0 -2
- package/src/components/atoms/Checkbox/Checkbox.stories.tsx +0 -19
- package/src/components/atoms/Checkbox/Checkbox.test.tsx +0 -12
- package/src/components/atoms/Checkbox/Checkbox.tsx +0 -20
- package/src/components/atoms/Checkbox/index.ts +0 -1
- package/src/components/atoms/FieldMessage/FieldMessage.stories.tsx +0 -20
- package/src/components/atoms/FieldMessage/FieldMessage.test.tsx +0 -14
- package/src/components/atoms/FieldMessage/FieldMessage.tsx +0 -6
- package/src/components/atoms/FieldMessage/FieldMessage.type.ts +0 -3
- package/src/components/atoms/FieldMessage/index.ts +0 -2
- package/src/components/atoms/Flag/Flag.stories.tsx +0 -34
- package/src/components/atoms/Flag/Flag.tsx +0 -35
- package/src/components/atoms/Flag/Flag.types.ts +0 -6
- package/src/components/atoms/Flag/images/bra.svg +0 -8
- package/src/components/atoms/Flag/images/esp.svg +0 -6
- package/src/components/atoms/Flag/images/usa.svg +0 -9
- package/src/components/atoms/Flag/index.ts +0 -2
- package/src/components/atoms/Icon/Icon.stories.tsx +0 -32
- package/src/components/atoms/Icon/Icon.tsx +0 -6
- package/src/components/atoms/Icon/assets/fonts/icomoon.eot +0 -0
- package/src/components/atoms/Icon/assets/fonts/icomoon.svg +0 -21
- package/src/components/atoms/Icon/assets/fonts/icomoon.ttf +0 -0
- package/src/components/atoms/Icon/assets/fonts/icomoon.woff +0 -0
- package/src/components/atoms/Icon/assets/selection.json +0 -285
- package/src/components/atoms/Icon/assets/style.css +0 -60
- package/src/components/atoms/Icon/icon.types.ts +0 -17
- package/src/components/atoms/Icon/index.ts +0 -2
- package/src/components/atoms/Logo/Logo.stories.tsx +0 -20
- package/src/components/atoms/Logo/Logo.test.tsx +0 -11
- package/src/components/atoms/Logo/Logo.tsx +0 -12
- package/src/components/atoms/Logo/Logo.types.ts +0 -3
- package/src/components/atoms/Logo/images/globalfy_desktop.svg +0 -9
- package/src/components/atoms/Logo/images/globalfy_mobile.svg +0 -3
- package/src/components/atoms/Logo/index.ts +0 -2
- package/src/components/atoms/RadioGroup/RadioGroup.stories.tsx +0 -21
- package/src/components/atoms/RadioGroup/RadioGroup.test.tsx +0 -47
- package/src/components/atoms/RadioGroup/RadioGroup.tsx +0 -26
- package/src/components/atoms/RadioGroup/RadioGroup.types.ts +0 -12
- package/src/components/atoms/RadioGroup/index.ts +0 -1
- package/src/components/atoms/Switch/Switch.stories.tsx +0 -18
- package/src/components/atoms/Switch/Switch.test.tsx +0 -12
- package/src/components/atoms/Switch/Switch.tsx +0 -32
- package/src/components/atoms/Switch/Switch.types.ts +0 -3
- package/src/components/atoms/Switch/index.ts +0 -2
- package/src/components/atoms/Typography/Typography.stories.tsx +0 -18
- package/src/components/atoms/Typography/Typography.test.tsx +0 -10
- package/src/components/atoms/Typography/Typography.tsx +0 -37
- package/src/components/atoms/Typography/Typography.types.ts +0 -7
- package/src/components/atoms/Typography/index.ts +0 -2
- package/src/components/atoms/index.ts +0 -9
- package/src/components/index.ts +0 -1
- package/src/global.css +0 -76
- package/src/main.ts +0 -1
- package/src/shadcn/components/ui/avatar.tsx +0 -48
- package/src/shadcn/components/ui/button.tsx +0 -55
- package/src/shadcn/components/ui/checkbox.tsx +0 -28
- package/src/shadcn/components/ui/form.tsx +0 -177
- package/src/shadcn/components/ui/label.tsx +0 -23
- package/src/shadcn/components/ui/radio-group.tsx +0 -44
- package/src/shadcn/components/ui/switch.tsx +0 -27
- package/src/shadcn/utils.ts +0 -6
- package/src/utils/reactHookForm/FormWrapper.tsx +0 -12
- package/src/utils/tailwind/classNames.ts +0 -4
- package/src/vite-env.d.ts +0 -1
- package/tailwind.config.js +0 -98
- package/testSetup.ts +0 -1
- package/tsconfig.json +0 -32
- package/tsconfig.node.json +0 -10
- package/vite.config.ts +0 -24
- package/yarn.lock +0 -11017
package/package.json
CHANGED
|
@@ -1,8 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "globalfy-design-system",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "Globalfy Design System",
|
|
5
5
|
"type": "module",
|
|
6
|
+
"files": [
|
|
7
|
+
"dist",
|
|
8
|
+
"index.d.ts"
|
|
9
|
+
],
|
|
10
|
+
"main": "./dist/globalfy-design-system.umd.cjs",
|
|
11
|
+
"module": "./dist/globalfy-design-system.js",
|
|
12
|
+
"types": "./dist/main.d.ts",
|
|
13
|
+
"exports": {
|
|
14
|
+
"types": "./dist/main.d.ts",
|
|
15
|
+
"import": "./dist/globalfy-design-system.js",
|
|
16
|
+
"require": "./dist/globalfy-design-system.umd.cjs"
|
|
17
|
+
},
|
|
6
18
|
"scripts": {
|
|
7
19
|
"test": "jest --coverage",
|
|
8
20
|
"test:watch": "jest --watch --coverage",
|
package/.babelrc
DELETED
package/.eslintrc.cjs
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
module.exports = {
|
|
2
|
-
root: true,
|
|
3
|
-
env: { browser: true, es2020: true, node: true },
|
|
4
|
-
extends: [
|
|
5
|
-
"eslint:recommended",
|
|
6
|
-
"plugin:@typescript-eslint/recommended",
|
|
7
|
-
"plugin:react-hooks/recommended",
|
|
8
|
-
"prettier",
|
|
9
|
-
"plugin:storybook/recommended"
|
|
10
|
-
],
|
|
11
|
-
ignorePatterns: ["dist", ".eslintrc.cjs"],
|
|
12
|
-
parser: "@typescript-eslint/parser",
|
|
13
|
-
plugins: ["react-refresh", "jest-react"],
|
|
14
|
-
rules: {
|
|
15
|
-
"react-refresh/only-export-components": [
|
|
16
|
-
"warn",
|
|
17
|
-
{ allowConstantExport: true }
|
|
18
|
-
]
|
|
19
|
-
}
|
|
20
|
-
};
|
package/.husky/commit-msg
DELETED
package/.husky/pre-commit
DELETED
package/.lintstagedrc
DELETED
package/.nvmrc
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
18.18.2
|
package/.prettierrc
DELETED
package/.storybook/main.ts
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import type { StorybookConfig } from "@storybook/react-vite";
|
|
2
|
-
|
|
3
|
-
const config: StorybookConfig = {
|
|
4
|
-
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
|
|
5
|
-
addons: [
|
|
6
|
-
"@storybook/addon-links",
|
|
7
|
-
"@storybook/addon-essentials",
|
|
8
|
-
"@storybook/addon-onboarding",
|
|
9
|
-
"@storybook/addon-interactions",
|
|
10
|
-
"@storybook/addon-styling"
|
|
11
|
-
],
|
|
12
|
-
framework: {
|
|
13
|
-
name: "@storybook/react-vite",
|
|
14
|
-
options: {}
|
|
15
|
-
},
|
|
16
|
-
docs: {
|
|
17
|
-
autodocs: "tag"
|
|
18
|
-
}
|
|
19
|
-
};
|
|
20
|
-
export default config;
|
package/.storybook/preview.ts
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import type { Preview } from "@storybook/react";
|
|
2
|
-
import "../src/global.css";
|
|
3
|
-
import "../src/assets/fonts/satoshi/satoshi.css";
|
|
4
|
-
|
|
5
|
-
const preview: Preview = {
|
|
6
|
-
parameters: {
|
|
7
|
-
actions: { argTypesRegex: "^on[A-Z].*" },
|
|
8
|
-
controls: {
|
|
9
|
-
matchers: {
|
|
10
|
-
color: /(background|color)$/i,
|
|
11
|
-
date: /Date$/i
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
export default preview;
|
package/CODEOWNERS
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
* jefferson.belchior@globalfy.com
|
package/bitbucket-pipelines.yml
DELETED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
image: node:18.18.2
|
|
2
|
-
|
|
3
|
-
definitions:
|
|
4
|
-
steps:
|
|
5
|
-
- step: &test
|
|
6
|
-
name: Test
|
|
7
|
-
cache:
|
|
8
|
-
- node
|
|
9
|
-
script:
|
|
10
|
-
- yarn install
|
|
11
|
-
- yarn test
|
|
12
|
-
- step: &build
|
|
13
|
-
name: Build
|
|
14
|
-
cache:
|
|
15
|
-
- node
|
|
16
|
-
script:
|
|
17
|
-
- yarn add -g typescript@5.0.2 vite@4.4.5
|
|
18
|
-
- yarn build
|
|
19
|
-
- step: &publish-npm
|
|
20
|
-
name: Publish on NPM
|
|
21
|
-
deployment: production
|
|
22
|
-
script:
|
|
23
|
-
- npm version minor -m "Upgrade to %s [skip ci]"
|
|
24
|
-
- git push && git push --tags
|
|
25
|
-
- pipe: atlassian/npm-publish:0.2.0
|
|
26
|
-
variables:
|
|
27
|
-
NPM_TOKEN: $NPM_TOKEN
|
|
28
|
-
- step: &publish-storybook-chromatic
|
|
29
|
-
name: Publish Storybook on Chromatic
|
|
30
|
-
script:
|
|
31
|
-
- yarn add storybook@7.5.1
|
|
32
|
-
- yarn chromatic --auto-accept-changes
|
|
33
|
-
|
|
34
|
-
pipelines:
|
|
35
|
-
pull-requests:
|
|
36
|
-
"**":
|
|
37
|
-
- step: *test
|
|
38
|
-
- step: *build
|
|
39
|
-
branches:
|
|
40
|
-
master:
|
|
41
|
-
- step: *test
|
|
42
|
-
- step: *build
|
|
43
|
-
- step: *publish-npm
|
|
44
|
-
- step: *publish-storybook-chromatic
|
package/commitlint.config.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
module.exports = { extends: ["@commitlint/config-conventional"] };
|
package/components.json
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"$schema": "https://ui.shadcn.com/schema.json",
|
|
3
|
-
"style": "default",
|
|
4
|
-
"rsc": false,
|
|
5
|
-
"tsx": true,
|
|
6
|
-
"tailwind": {
|
|
7
|
-
"config": "tailwind.config.js",
|
|
8
|
-
"css": "src/global.css",
|
|
9
|
-
"baseColor": "slate",
|
|
10
|
-
"cssVariables": true
|
|
11
|
-
},
|
|
12
|
-
"aliases": {
|
|
13
|
-
"components": "@/shadcn/components",
|
|
14
|
-
"utils": "@/shadcn/"
|
|
15
|
-
}
|
|
16
|
-
}
|
package/index.html
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
-
<title>Vite + React + TS</title>
|
|
8
|
-
</head>
|
|
9
|
-
<body>
|
|
10
|
-
<div id="root"></div>
|
|
11
|
-
<script type="module" src="/src/main.tsx"></script>
|
|
12
|
-
</body>
|
|
13
|
-
</html>
|
package/jest.config.js
DELETED
package/postcss.config.js
DELETED
package/public/vite.svg
DELETED
|
@@ -1 +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>
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
@font-face {
|
|
2
|
-
font-family: "Satoshi-Regular";
|
|
3
|
-
src:
|
|
4
|
-
url("./Satoshi-Regular.woff2") format("woff2"),
|
|
5
|
-
url("./Satoshi-Regular.woff") format("woff"),
|
|
6
|
-
url("./Satoshi-Regular.ttf") format("truetype");
|
|
7
|
-
font-weight: 400;
|
|
8
|
-
font-display: swap;
|
|
9
|
-
font-style: normal;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
@font-face {
|
|
13
|
-
font-family: "Satoshi-Medium";
|
|
14
|
-
src:
|
|
15
|
-
url("./Satoshi-Medium.woff2") format("woff2"),
|
|
16
|
-
url("./Satoshi-Medium.woff") format("woff"),
|
|
17
|
-
url("./Satoshi-Medium.ttf") format("truetype");
|
|
18
|
-
font-weight: 500;
|
|
19
|
-
font-display: swap;
|
|
20
|
-
font-style: normal;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
@font-face {
|
|
24
|
-
font-family: "Satoshi-Bold";
|
|
25
|
-
src:
|
|
26
|
-
url("./Satoshi-Bold.woff2") format("woff2"),
|
|
27
|
-
url("./Satoshi-Bold.woff") format("woff"),
|
|
28
|
-
url("./Satoshi-Bold.ttf") format("truetype");
|
|
29
|
-
font-weight: 700;
|
|
30
|
-
font-display: swap;
|
|
31
|
-
font-style: normal;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
@font-face {
|
|
35
|
-
font-family: "Satoshi-Black";
|
|
36
|
-
src:
|
|
37
|
-
url("./Satoshi-Black.woff2") format("woff2"),
|
|
38
|
-
url("./Satoshi-Black.woff") format("woff"),
|
|
39
|
-
url("./Satoshi-Black.ttf") format("truetype");
|
|
40
|
-
font-weight: 900;
|
|
41
|
-
font-display: swap;
|
|
42
|
-
font-style: normal;
|
|
43
|
-
}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from "@storybook/react";
|
|
2
|
-
|
|
3
|
-
import { Avatar } from ".";
|
|
4
|
-
|
|
5
|
-
const meta = {
|
|
6
|
-
title: "Components/Atoms/Avatar",
|
|
7
|
-
component: Avatar,
|
|
8
|
-
tags: ["autodocs"]
|
|
9
|
-
} satisfies Meta<typeof Avatar>;
|
|
10
|
-
|
|
11
|
-
export default meta;
|
|
12
|
-
|
|
13
|
-
type Story = StoryObj<typeof meta>;
|
|
14
|
-
|
|
15
|
-
export const Playground: Story = {
|
|
16
|
-
args: {
|
|
17
|
-
image: "https://picsum.photos/160"
|
|
18
|
-
}
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
export const Sizes = () => (
|
|
22
|
-
<div className="flex gap-4 items-center">
|
|
23
|
-
<Avatar size="small" image="https://picsum.photos/160" />
|
|
24
|
-
<Avatar size="large" image="https://picsum.photos/160" />
|
|
25
|
-
</div>
|
|
26
|
-
);
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { render } from "@testing-library/react";
|
|
2
|
-
|
|
3
|
-
import { Avatar } from "./Avatar";
|
|
4
|
-
|
|
5
|
-
describe("Avatar Component", () => {
|
|
6
|
-
test("should render small size", async () => {
|
|
7
|
-
const { container } = render(<Avatar image="https://picsum.photos/160" />);
|
|
8
|
-
|
|
9
|
-
expect(container.firstElementChild?.classList).toContain("w-[75px]");
|
|
10
|
-
});
|
|
11
|
-
|
|
12
|
-
test("should render large size", async () => {
|
|
13
|
-
const { container } = render(
|
|
14
|
-
<Avatar size="large" image="https://picsum.photos/160" />
|
|
15
|
-
);
|
|
16
|
-
|
|
17
|
-
expect(container.firstElementChild?.classList).toContain("w-[172px]");
|
|
18
|
-
});
|
|
19
|
-
});
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
Avatar as ShadcnAvatar,
|
|
3
|
-
AvatarFallback,
|
|
4
|
-
AvatarImage
|
|
5
|
-
} from "@/shadcn/components/ui/avatar";
|
|
6
|
-
import { AvatarProps } from "./Avatar.types";
|
|
7
|
-
import { Icon } from "..";
|
|
8
|
-
import { cva } from "class-variance-authority";
|
|
9
|
-
import { classNames } from "@/utils/tailwind/classNames";
|
|
10
|
-
|
|
11
|
-
export const Avatar = ({
|
|
12
|
-
image,
|
|
13
|
-
size = "small",
|
|
14
|
-
onLoadingStatusChange
|
|
15
|
-
}: AvatarProps) => {
|
|
16
|
-
const iconVariants = cva("text-globalfy-grey500", {
|
|
17
|
-
variants: {
|
|
18
|
-
size: {
|
|
19
|
-
small: "text-[32px]",
|
|
20
|
-
large: "text-[64px]"
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
|
|
25
|
-
const avatarVariants = cva("border-globalfy-grey500 bg-globalfy-grey500", {
|
|
26
|
-
variants: {
|
|
27
|
-
size: {
|
|
28
|
-
small: "w-[75px] h-[75px] border-[3px]",
|
|
29
|
-
large: "w-[172px] h-[172px] border-[5px]"
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
return (
|
|
35
|
-
<ShadcnAvatar className={classNames(avatarVariants({ size }))}>
|
|
36
|
-
<AvatarImage
|
|
37
|
-
onLoadingStatusChange={onLoadingStatusChange}
|
|
38
|
-
src={image}
|
|
39
|
-
alt="user avatar"
|
|
40
|
-
/>
|
|
41
|
-
<AvatarFallback className="bg-globalfy-white">
|
|
42
|
-
<Icon name="user" className={classNames(iconVariants({ size }))} />
|
|
43
|
-
</AvatarFallback>
|
|
44
|
-
</ShadcnAvatar>
|
|
45
|
-
);
|
|
46
|
-
};
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from "@storybook/react";
|
|
2
|
-
import { Checkbox } from "./Checkbox";
|
|
3
|
-
|
|
4
|
-
const meta = {
|
|
5
|
-
title: "Components/Atoms/Checkbox",
|
|
6
|
-
component: Checkbox,
|
|
7
|
-
tags: ["autodocs"]
|
|
8
|
-
} satisfies Meta<typeof Checkbox>;
|
|
9
|
-
|
|
10
|
-
export default meta;
|
|
11
|
-
|
|
12
|
-
type Story = StoryObj<typeof meta>;
|
|
13
|
-
|
|
14
|
-
export const Default: Story = {
|
|
15
|
-
args: {
|
|
16
|
-
disabled: false,
|
|
17
|
-
checked: true
|
|
18
|
-
}
|
|
19
|
-
};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { render } from "@testing-library/react";
|
|
2
|
-
|
|
3
|
-
import { Checkbox } from "./Checkbox";
|
|
4
|
-
|
|
5
|
-
describe("Checkbox Component", () => {
|
|
6
|
-
test("should render a checkbox component", async () => {
|
|
7
|
-
const { getByRole } = await render(<Checkbox />);
|
|
8
|
-
const checkbox = getByRole("checkbox");
|
|
9
|
-
|
|
10
|
-
expect(checkbox).toBeTruthy();
|
|
11
|
-
});
|
|
12
|
-
});
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
|
3
|
-
import { Checkbox as SCNCheckbox } from "@/shadcn/components/ui/checkbox";
|
|
4
|
-
import { classNames } from "@/utils/tailwind/classNames";
|
|
5
|
-
|
|
6
|
-
export const Checkbox = React.forwardRef<
|
|
7
|
-
React.ElementRef<typeof CheckboxPrimitive.Root>,
|
|
8
|
-
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
|
|
9
|
-
>(({ className, ...props }, ref) => {
|
|
10
|
-
return (
|
|
11
|
-
<SCNCheckbox
|
|
12
|
-
ref={ref}
|
|
13
|
-
className={classNames(
|
|
14
|
-
className,
|
|
15
|
-
"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"
|
|
16
|
-
)}
|
|
17
|
-
{...props}
|
|
18
|
-
/>
|
|
19
|
-
);
|
|
20
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./Checkbox";
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
-
import { FieldMessage } from ".";
|
|
3
|
-
import { FormWrapper } from "@/utils/reactHookForm/FormWrapper";
|
|
4
|
-
|
|
5
|
-
type FieldMessageProps = React.ComponentProps<typeof FieldMessage>;
|
|
6
|
-
|
|
7
|
-
const meta: Meta<FieldMessageProps> = {
|
|
8
|
-
component: FieldMessage,
|
|
9
|
-
render: ({ children, ...args }) => <FormWrapper {...{ children, ...args }} />
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
export default meta;
|
|
13
|
-
|
|
14
|
-
type Story = StoryObj<FieldMessageProps>;
|
|
15
|
-
|
|
16
|
-
export const Playground: Story = {
|
|
17
|
-
args: {
|
|
18
|
-
children: "Sample message"
|
|
19
|
-
}
|
|
20
|
-
};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { render, screen } from "@testing-library/react";
|
|
2
|
-
import { FormWrapper } from "@/utils/reactHookForm/FormWrapper";
|
|
3
|
-
import { FieldMessage } from ".";
|
|
4
|
-
|
|
5
|
-
describe("FieldMessage Component", () => {
|
|
6
|
-
test("should render the provided children", () => {
|
|
7
|
-
render(
|
|
8
|
-
<FormWrapper>
|
|
9
|
-
<FieldMessage>Test Message</FieldMessage>
|
|
10
|
-
</FormWrapper>
|
|
11
|
-
);
|
|
12
|
-
expect(screen.getByText("Test Message")).toBeTruthy();
|
|
13
|
-
});
|
|
14
|
-
});
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from "@storybook/react";
|
|
2
|
-
import { Flag } from ".";
|
|
3
|
-
|
|
4
|
-
const meta = {
|
|
5
|
-
title: "Components/Atoms/Flag",
|
|
6
|
-
component: Flag,
|
|
7
|
-
tags: ["autodocs"]
|
|
8
|
-
} satisfies Meta<typeof Flag>;
|
|
9
|
-
|
|
10
|
-
export default meta;
|
|
11
|
-
|
|
12
|
-
type Story = StoryObj<typeof meta>;
|
|
13
|
-
|
|
14
|
-
export const Playground: Story = {
|
|
15
|
-
args: {
|
|
16
|
-
country: "usa",
|
|
17
|
-
shadow: false
|
|
18
|
-
}
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
export const Flags = () => (
|
|
22
|
-
<div className="flex gap-4">
|
|
23
|
-
<Flag country="usa" />
|
|
24
|
-
<Flag country="bra" />
|
|
25
|
-
<Flag country="esp" />
|
|
26
|
-
</div>
|
|
27
|
-
);
|
|
28
|
-
|
|
29
|
-
export const WithShadow: Story = {
|
|
30
|
-
args: {
|
|
31
|
-
country: "usa",
|
|
32
|
-
shadow: true
|
|
33
|
-
}
|
|
34
|
-
};
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { cva } from "class-variance-authority";
|
|
2
|
-
import { FlagProps } from ".";
|
|
3
|
-
import { classNames } from "@/utils/tailwind/classNames";
|
|
4
|
-
|
|
5
|
-
import BraFlag from "./images/bra.svg";
|
|
6
|
-
import EspFlag from "./images/esp.svg";
|
|
7
|
-
import UsaFlag from "./images/usa.svg";
|
|
8
|
-
|
|
9
|
-
const FLAGS_COMPONENTS = {
|
|
10
|
-
bra: BraFlag,
|
|
11
|
-
esp: EspFlag,
|
|
12
|
-
usa: UsaFlag
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
export const Flag = ({ shadow, country, className, ...props }: FlagProps) => {
|
|
16
|
-
const flagVariants = cva("rounded-full", {
|
|
17
|
-
variants: {
|
|
18
|
-
shadow: {
|
|
19
|
-
true: "shadow-[4px_4px_6px_0px_rgba(0,0,0,0.17)]",
|
|
20
|
-
false: ""
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
|
|
25
|
-
const flag = FLAGS_COMPONENTS[country as keyof typeof FLAGS_COMPONENTS];
|
|
26
|
-
|
|
27
|
-
return (
|
|
28
|
-
<img
|
|
29
|
-
{...props}
|
|
30
|
-
src={flag}
|
|
31
|
-
alt={`${country} flag`}
|
|
32
|
-
className={classNames(className, flagVariants({ shadow }))}
|
|
33
|
-
/>
|
|
34
|
-
);
|
|
35
|
-
};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
<svg width="38" height="37" viewBox="0 0 38 37" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<circle cx="18.5099" cy="18.5033" r="18.5033" fill="white"/>
|
|
3
|
-
<path d="M18.51 35.1865C27.7239 35.1865 35.1933 27.7171 35.1933 18.5032C35.1933 9.28921 27.7239 1.81982 18.51 1.81982C9.29604 1.81982 1.82666 9.28921 1.82666 18.5032C1.82666 27.7171 9.29604 35.1865 18.51 35.1865Z" fill="#0B9F59"/>
|
|
4
|
-
<path d="M18.5101 8.34828L32.292 18.5033L18.5101 28.6584L4.72824 18.5033L18.5101 8.34828Z" fill="#FFDA44"/>
|
|
5
|
-
<path d="M18.5099 24.3062C21.7148 24.3062 24.3128 21.7081 24.3128 18.5033C24.3128 15.2985 21.7148 12.7004 18.5099 12.7004C15.3051 12.7004 12.707 15.2985 12.707 18.5033C12.707 21.7081 15.3051 24.3062 18.5099 24.3062Z" fill="#F0F0F0"/>
|
|
6
|
-
<path d="M15.6083 18.1397C14.5992 18.1397 13.6254 18.2931 12.7087 18.5779C12.7493 21.7478 15.3303 24.3053 18.5098 24.3053C20.4758 24.3053 22.2122 23.3266 23.2618 21.8309C21.466 19.5828 18.7027 18.1397 15.6083 18.1397Z" fill="#0052B4"/>
|
|
7
|
-
<path d="M24.2051 19.6142C24.275 19.2542 24.3127 18.8828 24.3127 18.5025C24.3127 15.2976 21.7147 12.6996 18.5099 12.6996C16.1185 12.6996 14.0657 14.1464 13.1773 16.2121C13.9626 16.0494 14.7757 15.9637 15.6085 15.9637C18.9788 15.9637 22.0278 17.3647 24.2051 19.6142Z" fill="#0052B4"/>
|
|
8
|
-
</svg>
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
<svg width="38" height="37" viewBox="0 0 38 37" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<circle cx="18.5168" cy="18.5033" r="18.5033" fill="white"/>
|
|
3
|
-
<path d="M1.8335 18.5027C1.8335 20.5434 2.20059 22.4982 2.87119 24.3056L18.5168 25.7563L34.1625 24.3056C34.8331 22.4982 35.2002 20.5434 35.2002 18.5027C35.2002 16.462 34.8331 14.5072 34.1625 12.6998L18.5168 11.2491L2.87119 12.6998C2.20059 14.5072 1.8335 16.462 1.8335 18.5027Z" fill="#FFDA44"/>
|
|
4
|
-
<path d="M34.1628 12.7003C31.8055 6.34735 25.6904 1.81982 18.5171 1.81982C11.3439 1.81982 5.2287 6.34735 2.87146 12.7003H34.1628Z" fill="#D80027"/>
|
|
5
|
-
<path d="M2.87119 24.3056C5.22842 30.6586 11.3439 35.1865 18.5171 35.1865C25.6904 35.1865 31.8052 30.6586 34.1625 24.3056H2.87119Z" fill="#D80027"/>
|
|
6
|
-
</svg>
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
<svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<circle cx="18.5033" cy="18.5033" r="18.5033" fill="white"/>
|
|
3
|
-
<path d="M18.5034 35.1865C27.7174 35.1865 35.1867 27.7171 35.1867 18.5032C35.1867 9.28921 27.7174 1.81982 18.5034 1.81982C9.28945 1.81982 1.82007 9.28921 1.82007 18.5032C1.82007 27.7171 9.28945 35.1865 18.5034 35.1865Z" fill="#F0F0F0"/>
|
|
4
|
-
<path d="M17.7779 18.5037H35.1866C35.1866 16.9978 34.9858 15.5391 34.6118 14.1515H17.7779V18.5037Z" fill="#D80027"/>
|
|
5
|
-
<path d="M17.7779 9.79934H32.7379C31.7166 8.13283 30.4108 6.65981 28.8883 5.44714H17.7779V9.79934Z" fill="#D80027"/>
|
|
6
|
-
<path d="M18.5034 35.1865C22.4298 35.1865 26.0384 33.8298 28.8882 31.5601H8.11799C10.9678 33.8298 14.577 35.1865 18.5034 35.1865Z" fill="#D80027"/>
|
|
7
|
-
<path d="M4.26857 27.208H32.7379C33.5578 25.8701 34.1936 24.4077 34.6118 22.8558H2.39463C2.81282 24.4077 3.44867 25.8701 4.26857 27.208Z" fill="#D80027"/>
|
|
8
|
-
<path d="M9.5481 4.42516H11.0684L9.65426 5.45255L10.1944 7.11496L8.78034 6.08756L7.36623 7.11496L7.83285 5.67882C6.58772 6.71599 5.4964 7.93114 4.59706 9.28509H5.0842L4.18402 9.93907C4.04377 10.173 3.90926 10.4107 3.78036 10.6519L4.21022 11.9749L3.40824 11.3922C3.20889 11.8146 3.02655 12.2465 2.86265 12.6873L3.33623 14.145H5.0842L3.67003 15.1724L4.21022 16.8348L2.79611 15.8074L1.94904 16.4229C1.86425 17.1044 1.82007 17.7986 1.82007 18.5032H18.5034C18.5034 9.28927 18.5034 8.20302 18.5034 1.81982C15.2077 1.81982 12.1354 2.77586 9.5481 4.42516ZM10.1944 16.8348L8.78034 15.8074L7.36623 16.8348L7.90642 15.1724L6.49225 14.145H8.24022L8.78034 12.4826L9.32046 14.145H11.0684L9.65426 15.1724L10.1944 16.8348ZM9.65426 10.3125L10.1944 11.9749L8.78034 10.9475L7.36623 11.9749L7.90642 10.3125L6.49225 9.28509H8.24022L8.78034 7.62269L9.32046 9.28509H11.0684L9.65426 10.3125ZM16.1787 16.8348L14.7646 15.8074L13.3505 16.8348L13.8907 15.1724L12.4765 14.145H14.2245L14.7646 12.4826L15.3047 14.145H17.0527L15.6385 15.1724L16.1787 16.8348ZM15.6385 10.3125L16.1787 11.9749L14.7646 10.9475L13.3505 11.9749L13.8907 10.3125L12.4765 9.28509H14.2245L14.7646 7.62269L15.3047 9.28509H17.0527L15.6385 10.3125ZM15.6385 5.45255L16.1787 7.11496L14.7646 6.08756L13.3505 7.11496L13.8907 5.45255L12.4765 4.42516H14.2245L14.7646 2.76276L15.3047 4.42516H17.0527L15.6385 5.45255Z" fill="#0052B4"/>
|
|
9
|
-
</svg>
|