diff --git a/.nvmrc b/.nvmrc index 805efa9f..adb55585 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -20.14.0 \ No newline at end of file +22.14.0 \ No newline at end of file diff --git a/backend/package.json b/backend/package.json index 8670b9a1..044ecc35 100644 --- a/backend/package.json +++ b/backend/package.json @@ -17,44 +17,44 @@ "author": "Egor Gorochkin", "license": "ISC", "devDependencies": { - "@eslint/eslintrc": "^3.1.0", - "@eslint/js": "^9.12.0", - "@eslint/migrate-config": "^1.3.1", - "@types/body-parser": "^1.19.5", - "@types/cookie-parser": "^1.4.7", - "@types/cors": "^2.8.17", + "@eslint/eslintrc": "^3.3.1", + "@eslint/js": "^9.34.0", + "@eslint/migrate-config": "^1.5.3", + "@types/body-parser": "^1.19.6", + "@types/cookie-parser": "^1.4.9", + "@types/cors": "^2.8.19", "@types/eslint__eslintrc": "^2.1.2", "@types/eslint__js": "^8.42.3", - "@types/express": "^4.17.21", + "@types/express": "^4.17.23", "@types/express-useragent": "^1.0.5", "@types/lodash-es": "^4.17.12", - "@types/node": "^22.5.5", - "@types/nodemailer": "^6.4.16", + "@types/node": "^22.18.0", + "@types/nodemailer": "^6.4.19", "@types/pino-http": "^5.8.4", - "@types/qs": "^6.9.16", - "@typescript-eslint/eslint-plugin": "^8.6.0", - "@typescript-eslint/parser": "^8.6.0", - "pino-pretty": "^11.2.2", + "@types/qs": "^6.14.0", + "@typescript-eslint/eslint-plugin": "^8.41.0", + "@typescript-eslint/parser": "^8.41.0", + "pino-pretty": "^11.3.0", "ts-node": "^10.9.2", "tsconfig-paths": "^4.2.0", - "typescript": "^5.6.2" + "typescript": "^5.9.2" }, "dependencies": { - "axios": "^1.7.7", - "cookie-parser": "^1.4.6", + "axios": "^1.11.0", + "cookie-parser": "^1.4.7", "cors": "^2.8.5", - "dotenv": "^16.4.5", - "express": "^4.21.0", + "dotenv": "^16.6.1", + "express": "^4.21.2", "express-useragent": "^1.0.15", - "jose": "^5.9.2", + "jose": "^5.10.0", "lodash-es": "^4.17.21", - "nodemailer": "^6.9.15", - "nodemon": "^3.1.5", - "pino": "^9.4.0", + "nodemailer": "^6.10.1", + "nodemon": "^3.1.10", + "pino": "^9.9.0", "pkce-challenge": "^4.1.0", - "qs": "^6.13.0", + "qs": "^6.14.0", "surrealdb": "1.0.0-beta.21", "uuid": "^10.0.0", - "zod": "^3.23.8" + "zod": "^3.25.76" } } diff --git a/frontend/.storybook/customTheme.ts b/frontend/.storybook/customTheme.ts index 6495c170..4f85f534 100644 --- a/frontend/.storybook/customTheme.ts +++ b/frontend/.storybook/customTheme.ts @@ -1,9 +1,11 @@ import { create } from '@storybook/theming'; export default create({ - appBg: '#14151a', - appBorderRadius: 24, - barBg: '#14151a', - base: 'dark', - brandTitle: 'Flippo' + appBg: '#14151a', + appBorderRadius: 24, + barBg: '#14151a', + appContentBg: '#14151a', + appPreviewBg: '#14151a', + base: 'dark', + brandTitle: 'Flippo' }); diff --git a/package.json b/package.json index 45e9e83a..a3e83d10 100644 --- a/package.json +++ b/package.json @@ -16,8 +16,8 @@ "publish": "npm i && turbo run build && changeset publish" }, "devDependencies": { - "@changesets/cli": "^2.28.1", - "turbo": "^2.5.0" + "@changesets/cli": "^2.29.6", + "turbo": "^2.5.6" }, "packageManager": "pnpm@10.14.0", "engines": { diff --git a/packages/test/package.json b/packages/test/package.json index e750d6c9..19a2a83b 100644 --- a/packages/test/package.json +++ b/packages/test/package.json @@ -13,7 +13,7 @@ "default": "./dist/index.mjs" }, "require": { - "types": "./dist/index.d.ts", + "types": "./dist/index.d.ts", "default": "./dist/index.js" } } @@ -41,23 +41,23 @@ "private": true, "packageManager": "pnpm@10.14.0", "dependencies": { - "@testing-library/jest-dom": "^6.1.0", - "@testing-library/react": "^14.0.0", - "@testing-library/user-event": "^14.5.0", - "@vitest/ui": "^1.0.0", - "vitest": "^1.0.0", - "jsdom": "^22.0.0" + "@testing-library/jest-dom": "catalog:", + "@testing-library/react": "catalog:", + "@testing-library/user-event": "catalog:", + "@vitest/ui": "catalog:", + "jsdom": "catalog:", + "vitest": "catalog:" }, "devDependencies": { - "@types/react": "^18.0.0", - "@types/react-dom": "^18.0.0", - "@types/node": "^20.0.0", - "typescript": "^5.0.0", - "tsup": "^8.0.0" + "@types/node": "catalog:", + "@types/react": "catalog:", + "@types/react-dom": "catalog:", + "tsup": "catalog:", + "typescript": "catalog:" }, "peerDependencies": { - "react": ">=18.0.0", - "react-dom": ">=18.0.0", - "vitest": ">=1.0.0" + "react": "catalog:", + "react-dom": "catalog:", + "vitest": "catalog:" } } diff --git a/packages/ui/icons/lib/AddRowAbove.tsx b/packages/ui/icons/lib/AddRowAbove.tsx deleted file mode 100644 index 8a8f3f6b..00000000 --- a/packages/ui/icons/lib/AddRowAbove.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const AddRowAbove = (props: SVGProps) => ; -export default AddRowAbove; diff --git a/packages/ui/icons/lib/AddRowAboveIcon.tsx b/packages/ui/icons/lib/AddRowAboveIcon.tsx new file mode 100644 index 00000000..43301e34 --- /dev/null +++ b/packages/ui/icons/lib/AddRowAboveIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const AddRowAbove = (props: SVGProps) => ; +export default AddRowAbove; diff --git a/packages/ui/icons/lib/AddRowBelow.tsx b/packages/ui/icons/lib/AddRowBelow.tsx deleted file mode 100644 index 5387bf02..00000000 --- a/packages/ui/icons/lib/AddRowBelow.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const AddRowBelow = (props: SVGProps) => ; -export default AddRowBelow; diff --git a/packages/ui/icons/lib/AddRowBelowIcon.tsx b/packages/ui/icons/lib/AddRowBelowIcon.tsx new file mode 100644 index 00000000..61f89b6f --- /dev/null +++ b/packages/ui/icons/lib/AddRowBelowIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const AddRowBelow = (props: SVGProps) => ; +export default AddRowBelow; diff --git a/packages/ui/icons/lib/AddSquare.tsx b/packages/ui/icons/lib/AddSquare.tsx deleted file mode 100644 index b177471d..00000000 --- a/packages/ui/icons/lib/AddSquare.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const AddSquare = (props: SVGProps) => ; -export default AddSquare; diff --git a/packages/ui/icons/lib/AddSquareIcon.tsx b/packages/ui/icons/lib/AddSquareIcon.tsx new file mode 100644 index 00000000..5f8daa7a --- /dev/null +++ b/packages/ui/icons/lib/AddSquareIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const AddSquare = (props: SVGProps) => ; +export default AddSquare; diff --git a/packages/ui/icons/lib/Arrow360.tsx b/packages/ui/icons/lib/Arrow360.tsx deleted file mode 100644 index 37ec35a2..00000000 --- a/packages/ui/icons/lib/Arrow360.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Arrow360 = (props: SVGProps) => ; -export default Arrow360; diff --git a/packages/ui/icons/lib/Arrow360Icon.tsx b/packages/ui/icons/lib/Arrow360Icon.tsx new file mode 100644 index 00000000..5b3227f2 --- /dev/null +++ b/packages/ui/icons/lib/Arrow360Icon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Arrow360 = (props: SVGProps) => ; +export default Arrow360; diff --git a/packages/ui/icons/lib/ArrowBack.tsx b/packages/ui/icons/lib/ArrowBack.tsx deleted file mode 100644 index 8a9cedf4..00000000 --- a/packages/ui/icons/lib/ArrowBack.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const ArrowBack = (props: SVGProps) => ; -export default ArrowBack; diff --git a/packages/ui/icons/lib/ArrowBackIcon.tsx b/packages/ui/icons/lib/ArrowBackIcon.tsx new file mode 100644 index 00000000..2a6daa75 --- /dev/null +++ b/packages/ui/icons/lib/ArrowBackIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const ArrowBack = (props: SVGProps) => ; +export default ArrowBack; diff --git a/packages/ui/icons/lib/ArrowDownToSquare.tsx b/packages/ui/icons/lib/ArrowDownToSquare.tsx deleted file mode 100644 index f760c731..00000000 --- a/packages/ui/icons/lib/ArrowDownToSquare.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const ArrowDownToSquare = (props: SVGProps) => ; -export default ArrowDownToSquare; diff --git a/packages/ui/icons/lib/ArrowDownToSquareIcon.tsx b/packages/ui/icons/lib/ArrowDownToSquareIcon.tsx new file mode 100644 index 00000000..363271ff --- /dev/null +++ b/packages/ui/icons/lib/ArrowDownToSquareIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const ArrowDownToSquare = (props: SVGProps) => ; +export default ArrowDownToSquare; diff --git a/packages/ui/icons/lib/ArrowLeftArrowRight.tsx b/packages/ui/icons/lib/ArrowLeftArrowRight.tsx deleted file mode 100644 index 75b912f7..00000000 --- a/packages/ui/icons/lib/ArrowLeftArrowRight.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const ArrowLeftArrowRight = (props: SVGProps) => ; -export default ArrowLeftArrowRight; diff --git a/packages/ui/icons/lib/ArrowLeftArrowRightIcon.tsx b/packages/ui/icons/lib/ArrowLeftArrowRightIcon.tsx new file mode 100644 index 00000000..473bce78 --- /dev/null +++ b/packages/ui/icons/lib/ArrowLeftArrowRightIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const ArrowLeftArrowRight = (props: SVGProps) => ; +export default ArrowLeftArrowRight; diff --git a/packages/ui/icons/lib/ArrowOutward.tsx b/packages/ui/icons/lib/ArrowOutward.tsx deleted file mode 100644 index dc8a74a9..00000000 --- a/packages/ui/icons/lib/ArrowOutward.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const ArrowOutward = (props: SVGProps) => ; -export default ArrowOutward; diff --git a/packages/ui/icons/lib/ArrowOutwardIcon.tsx b/packages/ui/icons/lib/ArrowOutwardIcon.tsx new file mode 100644 index 00000000..6a9d788c --- /dev/null +++ b/packages/ui/icons/lib/ArrowOutwardIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const ArrowOutward = (props: SVGProps) => ; +export default ArrowOutward; diff --git a/packages/ui/icons/lib/ArrowRightFromSquare.tsx b/packages/ui/icons/lib/ArrowRightFromSquare.tsx deleted file mode 100644 index 28e8cb5d..00000000 --- a/packages/ui/icons/lib/ArrowRightFromSquare.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const ArrowRightFromSquare = (props: SVGProps) => ; -export default ArrowRightFromSquare; diff --git a/packages/ui/icons/lib/ArrowRightFromSquareIcon.tsx b/packages/ui/icons/lib/ArrowRightFromSquareIcon.tsx new file mode 100644 index 00000000..6be9dcd1 --- /dev/null +++ b/packages/ui/icons/lib/ArrowRightFromSquareIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const ArrowRightFromSquare = (props: SVGProps) => ; +export default ArrowRightFromSquare; diff --git a/packages/ui/icons/lib/ArrowRightToSquare.tsx b/packages/ui/icons/lib/ArrowRightToSquare.tsx deleted file mode 100644 index d46e6b85..00000000 --- a/packages/ui/icons/lib/ArrowRightToSquare.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const ArrowRightToSquare = (props: SVGProps) => ; -export default ArrowRightToSquare; diff --git a/packages/ui/icons/lib/ArrowRightToSquareIcon.tsx b/packages/ui/icons/lib/ArrowRightToSquareIcon.tsx new file mode 100644 index 00000000..ba534e12 --- /dev/null +++ b/packages/ui/icons/lib/ArrowRightToSquareIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const ArrowRightToSquare = (props: SVGProps) => ; +export default ArrowRightToSquare; diff --git a/packages/ui/icons/lib/ArrowShapeTurnUpRight.tsx b/packages/ui/icons/lib/ArrowShapeTurnUpRight.tsx deleted file mode 100644 index 027244f0..00000000 --- a/packages/ui/icons/lib/ArrowShapeTurnUpRight.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const ArrowShapeTurnUpRight = (props: SVGProps) => ; -export default ArrowShapeTurnUpRight; diff --git a/packages/ui/icons/lib/ArrowShapeTurnUpRightCheck.tsx b/packages/ui/icons/lib/ArrowShapeTurnUpRightCheck.tsx deleted file mode 100644 index 5530fa44..00000000 --- a/packages/ui/icons/lib/ArrowShapeTurnUpRightCheck.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const ArrowShapeTurnUpRightCheck = (props: SVGProps) => ; -export default ArrowShapeTurnUpRightCheck; diff --git a/packages/ui/icons/lib/ArrowShapeTurnUpRightCheckIcon.tsx b/packages/ui/icons/lib/ArrowShapeTurnUpRightCheckIcon.tsx new file mode 100644 index 00000000..80d4e90f --- /dev/null +++ b/packages/ui/icons/lib/ArrowShapeTurnUpRightCheckIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const ArrowShapeTurnUpRightCheck = (props: SVGProps) => ; +export default ArrowShapeTurnUpRightCheck; diff --git a/packages/ui/icons/lib/ArrowShapeTurnUpRightIcon.tsx b/packages/ui/icons/lib/ArrowShapeTurnUpRightIcon.tsx new file mode 100644 index 00000000..6a1390a5 --- /dev/null +++ b/packages/ui/icons/lib/ArrowShapeTurnUpRightIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const ArrowShapeTurnUpRight = (props: SVGProps) => ; +export default ArrowShapeTurnUpRight; diff --git a/packages/ui/icons/lib/ArrowUpArrowDown.tsx b/packages/ui/icons/lib/ArrowUpArrowDown.tsx deleted file mode 100644 index dad8a3d6..00000000 --- a/packages/ui/icons/lib/ArrowUpArrowDown.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const ArrowUpArrowDown = (props: SVGProps) => ; -export default ArrowUpArrowDown; diff --git a/packages/ui/icons/lib/ArrowUpArrowDownIcon.tsx b/packages/ui/icons/lib/ArrowUpArrowDownIcon.tsx new file mode 100644 index 00000000..f5202c1b --- /dev/null +++ b/packages/ui/icons/lib/ArrowUpArrowDownIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const ArrowUpArrowDown = (props: SVGProps) => ; +export default ArrowUpArrowDown; diff --git a/packages/ui/icons/lib/ArrowUturnCcwLeft.tsx b/packages/ui/icons/lib/ArrowUturnCcwLeft.tsx deleted file mode 100644 index 96e9726e..00000000 --- a/packages/ui/icons/lib/ArrowUturnCcwLeft.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const ArrowUturnCcwLeft = (props: SVGProps) => ; -export default ArrowUturnCcwLeft; diff --git a/packages/ui/icons/lib/ArrowUturnCcwLeftIcon.tsx b/packages/ui/icons/lib/ArrowUturnCcwLeftIcon.tsx new file mode 100644 index 00000000..0a44356c --- /dev/null +++ b/packages/ui/icons/lib/ArrowUturnCcwLeftIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const ArrowUturnCcwLeft = (props: SVGProps) => ; +export default ArrowUturnCcwLeft; diff --git a/packages/ui/icons/lib/ArrowUturnCwRight.tsx b/packages/ui/icons/lib/ArrowUturnCwRight.tsx deleted file mode 100644 index edce0c22..00000000 --- a/packages/ui/icons/lib/ArrowUturnCwRight.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const ArrowUturnCwRight = (props: SVGProps) => ; -export default ArrowUturnCwRight; diff --git a/packages/ui/icons/lib/ArrowUturnCwRightIcon.tsx b/packages/ui/icons/lib/ArrowUturnCwRightIcon.tsx new file mode 100644 index 00000000..cab72a8e --- /dev/null +++ b/packages/ui/icons/lib/ArrowUturnCwRightIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const ArrowUturnCwRight = (props: SVGProps) => ; +export default ArrowUturnCwRight; diff --git a/packages/ui/icons/lib/ArrowsRotateRightAdd.tsx b/packages/ui/icons/lib/ArrowsRotateRightAdd.tsx deleted file mode 100644 index 50b374b1..00000000 --- a/packages/ui/icons/lib/ArrowsRotateRightAdd.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -function ArrowsRotateRightAdd(props: SVGProps) { - return ( - - - - - - - ); -} -export default ArrowsRotateRightAdd; diff --git a/packages/ui/icons/lib/ArrowsRotateRightAddIcon.tsx b/packages/ui/icons/lib/ArrowsRotateRightAddIcon.tsx new file mode 100644 index 00000000..6391cd35 --- /dev/null +++ b/packages/ui/icons/lib/ArrowsRotateRightAddIcon.tsx @@ -0,0 +1,14 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +function ArrowsRotateRightAdd(props: SVGProps) { + return ( + + + + + + + ); +} +export default ArrowsRotateRightAdd; diff --git a/packages/ui/icons/lib/ArrowsRotateRightCheck.tsx b/packages/ui/icons/lib/ArrowsRotateRightCheck.tsx deleted file mode 100644 index f57d01da..00000000 --- a/packages/ui/icons/lib/ArrowsRotateRightCheck.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const ArrowsRotateRightCheck = (props: SVGProps) => ; -export default ArrowsRotateRightCheck; diff --git a/packages/ui/icons/lib/ArrowsRotateRightCheckIcon.tsx b/packages/ui/icons/lib/ArrowsRotateRightCheckIcon.tsx new file mode 100644 index 00000000..b2a097cc --- /dev/null +++ b/packages/ui/icons/lib/ArrowsRotateRightCheckIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const ArrowsRotateRightCheck = (props: SVGProps) => ; +export default ArrowsRotateRightCheck; diff --git a/packages/ui/icons/lib/AttachFile.tsx b/packages/ui/icons/lib/AttachFile.tsx deleted file mode 100644 index 7181444e..00000000 --- a/packages/ui/icons/lib/AttachFile.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const AttachFile = (props: SVGProps) => ; -export default AttachFile; diff --git a/packages/ui/icons/lib/AttachFileIcon.tsx b/packages/ui/icons/lib/AttachFileIcon.tsx new file mode 100644 index 00000000..8057a636 --- /dev/null +++ b/packages/ui/icons/lib/AttachFileIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const AttachFile = (props: SVGProps) => ; +export default AttachFile; diff --git a/packages/ui/icons/lib/Bookmark.tsx b/packages/ui/icons/lib/Bookmark.tsx deleted file mode 100644 index bde19398..00000000 --- a/packages/ui/icons/lib/Bookmark.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Bookmark = (props: SVGProps) => ; -export default Bookmark; diff --git a/packages/ui/icons/lib/BookmarkFill.tsx b/packages/ui/icons/lib/BookmarkFill.tsx deleted file mode 100644 index ed27ac7d..00000000 --- a/packages/ui/icons/lib/BookmarkFill.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const BookmarkFill = (props: SVGProps) => ; -export default BookmarkFill; diff --git a/packages/ui/icons/lib/BookmarkFillIcon.tsx b/packages/ui/icons/lib/BookmarkFillIcon.tsx new file mode 100644 index 00000000..2c99176b --- /dev/null +++ b/packages/ui/icons/lib/BookmarkFillIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const BookmarkFill = (props: SVGProps) => ; +export default BookmarkFill; diff --git a/packages/ui/icons/lib/BookmarkIcon.tsx b/packages/ui/icons/lib/BookmarkIcon.tsx new file mode 100644 index 00000000..d884673f --- /dev/null +++ b/packages/ui/icons/lib/BookmarkIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Bookmark = (props: SVGProps) => ; +export default Bookmark; diff --git a/packages/ui/icons/lib/Bookmarks.tsx b/packages/ui/icons/lib/Bookmarks.tsx deleted file mode 100644 index 220fd904..00000000 --- a/packages/ui/icons/lib/Bookmarks.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Bookmarks = (props: SVGProps) => ; -export default Bookmarks; diff --git a/packages/ui/icons/lib/BookmarksIcon.tsx b/packages/ui/icons/lib/BookmarksIcon.tsx new file mode 100644 index 00000000..79429978 --- /dev/null +++ b/packages/ui/icons/lib/BookmarksIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Bookmarks = (props: SVGProps) => ; +export default Bookmarks; diff --git a/packages/ui/icons/lib/Check.tsx b/packages/ui/icons/lib/Check.tsx deleted file mode 100644 index a289c7a4..00000000 --- a/packages/ui/icons/lib/Check.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Check = (props: SVGProps) => ; -export default Check; diff --git a/packages/ui/icons/lib/CheckIcon.tsx b/packages/ui/icons/lib/CheckIcon.tsx new file mode 100644 index 00000000..ad259067 --- /dev/null +++ b/packages/ui/icons/lib/CheckIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Check = (props: SVGProps) => ; +export default Check; diff --git a/packages/ui/icons/lib/ChevronDown.tsx b/packages/ui/icons/lib/ChevronDown.tsx deleted file mode 100644 index 4c3ae030..00000000 --- a/packages/ui/icons/lib/ChevronDown.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const ChevronDown = (props: SVGProps) => ; -export default ChevronDown; diff --git a/packages/ui/icons/lib/ChevronDownIcon.tsx b/packages/ui/icons/lib/ChevronDownIcon.tsx new file mode 100644 index 00000000..06d1710b --- /dev/null +++ b/packages/ui/icons/lib/ChevronDownIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const ChevronDown = (props: SVGProps) => ; +export default ChevronDown; diff --git a/packages/ui/icons/lib/ChevronDownToLine.tsx b/packages/ui/icons/lib/ChevronDownToLine.tsx deleted file mode 100644 index 39506292..00000000 --- a/packages/ui/icons/lib/ChevronDownToLine.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const ChevronDownToLine = (props: SVGProps) => ; -export default ChevronDownToLine; diff --git a/packages/ui/icons/lib/ChevronDownToLineIcon.tsx b/packages/ui/icons/lib/ChevronDownToLineIcon.tsx new file mode 100644 index 00000000..6329795f --- /dev/null +++ b/packages/ui/icons/lib/ChevronDownToLineIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const ChevronDownToLine = (props: SVGProps) => ; +export default ChevronDownToLine; diff --git a/packages/ui/icons/lib/ChevronLeft.tsx b/packages/ui/icons/lib/ChevronLeft.tsx deleted file mode 100644 index b773f582..00000000 --- a/packages/ui/icons/lib/ChevronLeft.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const ChevronLeft = (props: SVGProps) => ; -export default ChevronLeft; diff --git a/packages/ui/icons/lib/ChevronLeftIcon.tsx b/packages/ui/icons/lib/ChevronLeftIcon.tsx new file mode 100644 index 00000000..2b10660e --- /dev/null +++ b/packages/ui/icons/lib/ChevronLeftIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const ChevronLeft = (props: SVGProps) => ; +export default ChevronLeft; diff --git a/packages/ui/icons/lib/ChevronRight.tsx b/packages/ui/icons/lib/ChevronRight.tsx deleted file mode 100644 index 4a7e7e6b..00000000 --- a/packages/ui/icons/lib/ChevronRight.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const ChevronRight = (props: SVGProps) => ; -export default ChevronRight; diff --git a/packages/ui/icons/lib/ChevronRightIcon.tsx b/packages/ui/icons/lib/ChevronRightIcon.tsx new file mode 100644 index 00000000..5753036b --- /dev/null +++ b/packages/ui/icons/lib/ChevronRightIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const ChevronRight = (props: SVGProps) => ; +export default ChevronRight; diff --git a/packages/ui/icons/lib/ChevronUp.tsx b/packages/ui/icons/lib/ChevronUp.tsx deleted file mode 100644 index 3de881e2..00000000 --- a/packages/ui/icons/lib/ChevronUp.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const ChevronUp = (props: SVGProps) => ; -export default ChevronUp; diff --git a/packages/ui/icons/lib/ChevronUpIcon.tsx b/packages/ui/icons/lib/ChevronUpIcon.tsx new file mode 100644 index 00000000..44e1babf --- /dev/null +++ b/packages/ui/icons/lib/ChevronUpIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const ChevronUp = (props: SVGProps) => ; +export default ChevronUp; diff --git a/packages/ui/icons/lib/ChevronUpToLine.tsx b/packages/ui/icons/lib/ChevronUpToLine.tsx deleted file mode 100644 index 74a7f41b..00000000 --- a/packages/ui/icons/lib/ChevronUpToLine.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const ChevronUpToLine = (props: SVGProps) => ; -export default ChevronUpToLine; diff --git a/packages/ui/icons/lib/ChevronUpToLineIcon.tsx b/packages/ui/icons/lib/ChevronUpToLineIcon.tsx new file mode 100644 index 00000000..5a469dda --- /dev/null +++ b/packages/ui/icons/lib/ChevronUpToLineIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const ChevronUpToLine = (props: SVGProps) => ; +export default ChevronUpToLine; diff --git a/packages/ui/icons/lib/ChevronsCollapseUpRight.tsx b/packages/ui/icons/lib/ChevronsCollapseUpRight.tsx deleted file mode 100644 index b31f63e9..00000000 --- a/packages/ui/icons/lib/ChevronsCollapseUpRight.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const ChevronsCollapseUpRight = (props: SVGProps) => ; -export default ChevronsCollapseUpRight; diff --git a/packages/ui/icons/lib/ChevronsCollapseUpRightIcon.tsx b/packages/ui/icons/lib/ChevronsCollapseUpRightIcon.tsx new file mode 100644 index 00000000..5a1ffaa5 --- /dev/null +++ b/packages/ui/icons/lib/ChevronsCollapseUpRightIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const ChevronsCollapseUpRight = (props: SVGProps) => ; +export default ChevronsCollapseUpRight; diff --git a/packages/ui/icons/lib/ChevronsExpandUpRight.tsx b/packages/ui/icons/lib/ChevronsExpandUpRight.tsx deleted file mode 100644 index 1da37aec..00000000 --- a/packages/ui/icons/lib/ChevronsExpandUpRight.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const ChevronsExpandUpRight = (props: SVGProps) => ; -export default ChevronsExpandUpRight; diff --git a/packages/ui/icons/lib/ChevronsExpandUpRightIcon.tsx b/packages/ui/icons/lib/ChevronsExpandUpRightIcon.tsx new file mode 100644 index 00000000..60238908 --- /dev/null +++ b/packages/ui/icons/lib/ChevronsExpandUpRightIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const ChevronsExpandUpRight = (props: SVGProps) => ; +export default ChevronsExpandUpRight; diff --git a/packages/ui/icons/lib/CircleCheck.tsx b/packages/ui/icons/lib/CircleCheck.tsx deleted file mode 100644 index 01878914..00000000 --- a/packages/ui/icons/lib/CircleCheck.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const CircleCheck = (props: SVGProps) => ; -export default CircleCheck; diff --git a/packages/ui/icons/lib/CircleCheckFill.tsx b/packages/ui/icons/lib/CircleCheckFill.tsx deleted file mode 100644 index 7e5eabfa..00000000 --- a/packages/ui/icons/lib/CircleCheckFill.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const CircleCheckFill = (props: SVGProps) => ; -export default CircleCheckFill; diff --git a/packages/ui/icons/lib/CircleCheckFillIcon.tsx b/packages/ui/icons/lib/CircleCheckFillIcon.tsx new file mode 100644 index 00000000..9496a17f --- /dev/null +++ b/packages/ui/icons/lib/CircleCheckFillIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const CircleCheckFill = (props: SVGProps) => ; +export default CircleCheckFill; diff --git a/packages/ui/icons/lib/CircleCheckIcon.tsx b/packages/ui/icons/lib/CircleCheckIcon.tsx new file mode 100644 index 00000000..218bfc84 --- /dev/null +++ b/packages/ui/icons/lib/CircleCheckIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const CircleCheck = (props: SVGProps) => ; +export default CircleCheck; diff --git a/packages/ui/icons/lib/CircleInfo.tsx b/packages/ui/icons/lib/CircleInfo.tsx deleted file mode 100644 index d93df20c..00000000 --- a/packages/ui/icons/lib/CircleInfo.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const CircleInfo = (props: SVGProps) => ; -export default CircleInfo; diff --git a/packages/ui/icons/lib/CircleInfoFill.tsx b/packages/ui/icons/lib/CircleInfoFill.tsx deleted file mode 100644 index 57b2a07e..00000000 --- a/packages/ui/icons/lib/CircleInfoFill.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const CircleInfoFill = (props: SVGProps) => ; -export default CircleInfoFill; diff --git a/packages/ui/icons/lib/CircleInfoFillIcon.tsx b/packages/ui/icons/lib/CircleInfoFillIcon.tsx new file mode 100644 index 00000000..b338569d --- /dev/null +++ b/packages/ui/icons/lib/CircleInfoFillIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const CircleInfoFill = (props: SVGProps) => ; +export default CircleInfoFill; diff --git a/packages/ui/icons/lib/CircleInfoIcon.tsx b/packages/ui/icons/lib/CircleInfoIcon.tsx new file mode 100644 index 00000000..25ab22ce --- /dev/null +++ b/packages/ui/icons/lib/CircleInfoIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const CircleInfo = (props: SVGProps) => ; +export default CircleInfo; diff --git a/packages/ui/icons/lib/CircleXmark.tsx b/packages/ui/icons/lib/CircleXmark.tsx deleted file mode 100644 index e0cb42a9..00000000 --- a/packages/ui/icons/lib/CircleXmark.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const CircleXmark = (props: SVGProps) => ; -export default CircleXmark; diff --git a/packages/ui/icons/lib/CircleXmarkFill.tsx b/packages/ui/icons/lib/CircleXmarkFill.tsx deleted file mode 100644 index 6f6c13a6..00000000 --- a/packages/ui/icons/lib/CircleXmarkFill.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const CircleXmarkFill = (props: SVGProps) => ; -export default CircleXmarkFill; diff --git a/packages/ui/icons/lib/CircleXmarkFillIcon.tsx b/packages/ui/icons/lib/CircleXmarkFillIcon.tsx new file mode 100644 index 00000000..41a6e27e --- /dev/null +++ b/packages/ui/icons/lib/CircleXmarkFillIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const CircleXmarkFill = (props: SVGProps) => ; +export default CircleXmarkFill; diff --git a/packages/ui/icons/lib/CircleXmarkIcon.tsx b/packages/ui/icons/lib/CircleXmarkIcon.tsx new file mode 100644 index 00000000..1ccfa646 --- /dev/null +++ b/packages/ui/icons/lib/CircleXmarkIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const CircleXmark = (props: SVGProps) => ; +export default CircleXmark; diff --git a/packages/ui/icons/lib/Clipboard.tsx b/packages/ui/icons/lib/Clipboard.tsx deleted file mode 100644 index 31ac9e9d..00000000 --- a/packages/ui/icons/lib/Clipboard.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Clipboard = (props: SVGProps) => ; -export default Clipboard; diff --git a/packages/ui/icons/lib/ClipboardIcon.tsx b/packages/ui/icons/lib/ClipboardIcon.tsx new file mode 100644 index 00000000..87f2f039 --- /dev/null +++ b/packages/ui/icons/lib/ClipboardIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Clipboard = (props: SVGProps) => ; +export default Clipboard; diff --git a/packages/ui/icons/lib/Clock40.tsx b/packages/ui/icons/lib/Clock40.tsx deleted file mode 100644 index 0e633563..00000000 --- a/packages/ui/icons/lib/Clock40.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Clock40 = (props: SVGProps) => ; -export default Clock40; diff --git a/packages/ui/icons/lib/Clock40Icon.tsx b/packages/ui/icons/lib/Clock40Icon.tsx new file mode 100644 index 00000000..9653074f --- /dev/null +++ b/packages/ui/icons/lib/Clock40Icon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Clock40 = (props: SVGProps) => ; +export default Clock40; diff --git a/packages/ui/icons/lib/Clock60.tsx b/packages/ui/icons/lib/Clock60.tsx deleted file mode 100644 index 2a9383af..00000000 --- a/packages/ui/icons/lib/Clock60.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Clock60 = (props: SVGProps) => ; -export default Clock60; diff --git a/packages/ui/icons/lib/Clock60Icon.tsx b/packages/ui/icons/lib/Clock60Icon.tsx new file mode 100644 index 00000000..1e834495 --- /dev/null +++ b/packages/ui/icons/lib/Clock60Icon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Clock60 = (props: SVGProps) => ; +export default Clock60; diff --git a/packages/ui/icons/lib/ClockArrowRotateCcwLeft.tsx b/packages/ui/icons/lib/ClockArrowRotateCcwLeft.tsx deleted file mode 100644 index 0e819bf6..00000000 --- a/packages/ui/icons/lib/ClockArrowRotateCcwLeft.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const ClockArrowRotateCcwLeft = (props: SVGProps) => ; -export default ClockArrowRotateCcwLeft; diff --git a/packages/ui/icons/lib/ClockArrowRotateCcwLeftIcon.tsx b/packages/ui/icons/lib/ClockArrowRotateCcwLeftIcon.tsx new file mode 100644 index 00000000..20401126 --- /dev/null +++ b/packages/ui/icons/lib/ClockArrowRotateCcwLeftIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const ClockArrowRotateCcwLeft = (props: SVGProps) => ; +export default ClockArrowRotateCcwLeft; diff --git a/packages/ui/icons/lib/CodeBlock.tsx b/packages/ui/icons/lib/CodeBlock.tsx deleted file mode 100644 index fc57e8cb..00000000 --- a/packages/ui/icons/lib/CodeBlock.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const CodeBlock = (props: SVGProps) => ; -export default CodeBlock; diff --git a/packages/ui/icons/lib/CodeBlockIcon.tsx b/packages/ui/icons/lib/CodeBlockIcon.tsx new file mode 100644 index 00000000..822922e9 --- /dev/null +++ b/packages/ui/icons/lib/CodeBlockIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const CodeBlock = (props: SVGProps) => ; +export default CodeBlock; diff --git a/packages/ui/icons/lib/Copy.tsx b/packages/ui/icons/lib/Copy.tsx deleted file mode 100644 index 12c03c0f..00000000 --- a/packages/ui/icons/lib/Copy.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Copy = (props: SVGProps) => ; -export default Copy; diff --git a/packages/ui/icons/lib/CopyIcon.tsx b/packages/ui/icons/lib/CopyIcon.tsx new file mode 100644 index 00000000..0afd33f9 --- /dev/null +++ b/packages/ui/icons/lib/CopyIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Copy = (props: SVGProps) => ; +export default Copy; diff --git a/packages/ui/icons/lib/Delete.tsx b/packages/ui/icons/lib/Delete.tsx deleted file mode 100644 index 78a89932..00000000 --- a/packages/ui/icons/lib/Delete.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Delete = (props: SVGProps) => ; -export default Delete; diff --git a/packages/ui/icons/lib/DeleteIcon.tsx b/packages/ui/icons/lib/DeleteIcon.tsx new file mode 100644 index 00000000..2f988d23 --- /dev/null +++ b/packages/ui/icons/lib/DeleteIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Delete = (props: SVGProps) => ; +export default Delete; diff --git a/packages/ui/icons/lib/DeleteXmark.tsx b/packages/ui/icons/lib/DeleteXmark.tsx deleted file mode 100644 index bbcfe3ef..00000000 --- a/packages/ui/icons/lib/DeleteXmark.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const DeleteXmark = (props: SVGProps) => ; -export default DeleteXmark; diff --git a/packages/ui/icons/lib/DeleteXmarkIcon.tsx b/packages/ui/icons/lib/DeleteXmarkIcon.tsx new file mode 100644 index 00000000..f90d553f --- /dev/null +++ b/packages/ui/icons/lib/DeleteXmarkIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const DeleteXmark = (props: SVGProps) => ; +export default DeleteXmark; diff --git a/packages/ui/icons/lib/DotsHorizontal.tsx b/packages/ui/icons/lib/DotsHorizontal.tsx deleted file mode 100644 index cc68c79f..00000000 --- a/packages/ui/icons/lib/DotsHorizontal.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const DotsHorizontal = (props: SVGProps) => ; -export default DotsHorizontal; diff --git a/packages/ui/icons/lib/DotsHorizontalIcon.tsx b/packages/ui/icons/lib/DotsHorizontalIcon.tsx new file mode 100644 index 00000000..824542b1 --- /dev/null +++ b/packages/ui/icons/lib/DotsHorizontalIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const DotsHorizontal = (props: SVGProps) => ; +export default DotsHorizontal; diff --git a/packages/ui/icons/lib/DotsVertical.tsx b/packages/ui/icons/lib/DotsVertical.tsx deleted file mode 100644 index 62090f0f..00000000 --- a/packages/ui/icons/lib/DotsVertical.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const DotsVertical = (props: SVGProps) => ; -export default DotsVertical; diff --git a/packages/ui/icons/lib/DotsVerticalIcon.tsx b/packages/ui/icons/lib/DotsVerticalIcon.tsx new file mode 100644 index 00000000..920adeb6 --- /dev/null +++ b/packages/ui/icons/lib/DotsVerticalIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const DotsVertical = (props: SVGProps) => ; +export default DotsVertical; diff --git a/packages/ui/icons/lib/Equal.tsx b/packages/ui/icons/lib/Equal.tsx deleted file mode 100644 index 9197e687..00000000 --- a/packages/ui/icons/lib/Equal.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Equal = (props: SVGProps) => ; -export default Equal; diff --git a/packages/ui/icons/lib/EqualIcon.tsx b/packages/ui/icons/lib/EqualIcon.tsx new file mode 100644 index 00000000..a90fa1be --- /dev/null +++ b/packages/ui/icons/lib/EqualIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Equal = (props: SVGProps) => ; +export default Equal; diff --git a/packages/ui/icons/lib/Explore.tsx b/packages/ui/icons/lib/Explore.tsx deleted file mode 100644 index 4c2c35b1..00000000 --- a/packages/ui/icons/lib/Explore.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Explore = (props: SVGProps) => ; -export default Explore; diff --git a/packages/ui/icons/lib/ExploreFill.tsx b/packages/ui/icons/lib/ExploreFill.tsx deleted file mode 100644 index 132899e8..00000000 --- a/packages/ui/icons/lib/ExploreFill.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const ExploreFill = (props: SVGProps) => ; -export default ExploreFill; diff --git a/packages/ui/icons/lib/ExploreFillIcon.tsx b/packages/ui/icons/lib/ExploreFillIcon.tsx new file mode 100644 index 00000000..04baa506 --- /dev/null +++ b/packages/ui/icons/lib/ExploreFillIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const ExploreFill = (props: SVGProps) => ; +export default ExploreFill; diff --git a/packages/ui/icons/lib/ExploreIcon.tsx b/packages/ui/icons/lib/ExploreIcon.tsx new file mode 100644 index 00000000..94950bbb --- /dev/null +++ b/packages/ui/icons/lib/ExploreIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Explore = (props: SVGProps) => ; +export default Explore; diff --git a/packages/ui/icons/lib/Favorite.tsx b/packages/ui/icons/lib/Favorite.tsx deleted file mode 100644 index cf2beec5..00000000 --- a/packages/ui/icons/lib/Favorite.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Favorite = (props: SVGProps) => ; -export default Favorite; diff --git a/packages/ui/icons/lib/FavoriteFill.tsx b/packages/ui/icons/lib/FavoriteFill.tsx deleted file mode 100644 index 11c8d089..00000000 --- a/packages/ui/icons/lib/FavoriteFill.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const FavoriteFill = (props: SVGProps) => ; -export default FavoriteFill; diff --git a/packages/ui/icons/lib/FavoriteFillIcon.tsx b/packages/ui/icons/lib/FavoriteFillIcon.tsx new file mode 100644 index 00000000..44ee6615 --- /dev/null +++ b/packages/ui/icons/lib/FavoriteFillIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const FavoriteFill = (props: SVGProps) => ; +export default FavoriteFill; diff --git a/packages/ui/icons/lib/FavoriteIcon.tsx b/packages/ui/icons/lib/FavoriteIcon.tsx new file mode 100644 index 00000000..a5f2f06d --- /dev/null +++ b/packages/ui/icons/lib/FavoriteIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Favorite = (props: SVGProps) => ; +export default Favorite; diff --git a/packages/ui/icons/lib/File.tsx b/packages/ui/icons/lib/File.tsx deleted file mode 100644 index 5c0901a2..00000000 --- a/packages/ui/icons/lib/File.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const File = (props: SVGProps) => ; -export default File; diff --git a/packages/ui/icons/lib/FileAdd.tsx b/packages/ui/icons/lib/FileAdd.tsx deleted file mode 100644 index 9b1859a2..00000000 --- a/packages/ui/icons/lib/FileAdd.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const FileAdd = (props: SVGProps) => ; -export default FileAdd; diff --git a/packages/ui/icons/lib/FileAddIcon.tsx b/packages/ui/icons/lib/FileAddIcon.tsx new file mode 100644 index 00000000..b944a299 --- /dev/null +++ b/packages/ui/icons/lib/FileAddIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const FileAdd = (props: SVGProps) => ; +export default FileAdd; diff --git a/packages/ui/icons/lib/FileCheck.tsx b/packages/ui/icons/lib/FileCheck.tsx deleted file mode 100644 index 7349254a..00000000 --- a/packages/ui/icons/lib/FileCheck.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const FileCheck = (props: SVGProps) => ; -export default FileCheck; diff --git a/packages/ui/icons/lib/FileCheckFill.tsx b/packages/ui/icons/lib/FileCheckFill.tsx deleted file mode 100644 index b6427dfe..00000000 --- a/packages/ui/icons/lib/FileCheckFill.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const FileCheckFill = (props: SVGProps) => ; -export default FileCheckFill; diff --git a/packages/ui/icons/lib/FileCheckFillIcon.tsx b/packages/ui/icons/lib/FileCheckFillIcon.tsx new file mode 100644 index 00000000..33c8739c --- /dev/null +++ b/packages/ui/icons/lib/FileCheckFillIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const FileCheckFill = (props: SVGProps) => ; +export default FileCheckFill; diff --git a/packages/ui/icons/lib/FileCheckIcon.tsx b/packages/ui/icons/lib/FileCheckIcon.tsx new file mode 100644 index 00000000..51da3eb9 --- /dev/null +++ b/packages/ui/icons/lib/FileCheckIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const FileCheck = (props: SVGProps) => ; +export default FileCheck; diff --git a/packages/ui/icons/lib/FileIcon.tsx b/packages/ui/icons/lib/FileIcon.tsx new file mode 100644 index 00000000..49aae219 --- /dev/null +++ b/packages/ui/icons/lib/FileIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const File = (props: SVGProps) => ; +export default File; diff --git a/packages/ui/icons/lib/Filter.tsx b/packages/ui/icons/lib/Filter.tsx deleted file mode 100644 index 3a7f8acf..00000000 --- a/packages/ui/icons/lib/Filter.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Filter = (props: SVGProps) => ; -export default Filter; diff --git a/packages/ui/icons/lib/FilterFill.tsx b/packages/ui/icons/lib/FilterFill.tsx deleted file mode 100644 index 643211c5..00000000 --- a/packages/ui/icons/lib/FilterFill.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const FilterFill = (props: SVGProps) => ; -export default FilterFill; diff --git a/packages/ui/icons/lib/FilterFillIcon.tsx b/packages/ui/icons/lib/FilterFillIcon.tsx new file mode 100644 index 00000000..b8f220a2 --- /dev/null +++ b/packages/ui/icons/lib/FilterFillIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const FilterFill = (props: SVGProps) => ; +export default FilterFill; diff --git a/packages/ui/icons/lib/FilterIcon.tsx b/packages/ui/icons/lib/FilterIcon.tsx new file mode 100644 index 00000000..54f5ce84 --- /dev/null +++ b/packages/ui/icons/lib/FilterIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Filter = (props: SVGProps) => ; +export default Filter; diff --git a/packages/ui/icons/lib/FlagRu.tsx b/packages/ui/icons/lib/FlagRu.tsx deleted file mode 100644 index b0a89183..00000000 --- a/packages/ui/icons/lib/FlagRu.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -function FlagRu(props: SVGProps) { - return ( - - - - - - - - - - - ); -} -export default FlagRu; diff --git a/packages/ui/icons/lib/FlagRuIcon.tsx b/packages/ui/icons/lib/FlagRuIcon.tsx new file mode 100644 index 00000000..e5d03701 --- /dev/null +++ b/packages/ui/icons/lib/FlagRuIcon.tsx @@ -0,0 +1,22 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +function FlagRu(props: SVGProps) { + return ( + + + + + + + + + + + ); +} +export default FlagRu; diff --git a/packages/ui/icons/lib/FlagUk.tsx b/packages/ui/icons/lib/FlagUk.tsx deleted file mode 100644 index 40fbe53b..00000000 --- a/packages/ui/icons/lib/FlagUk.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -function FlagUk(props: SVGProps) { - return ( - - - - - - - - - - - ); -} -export default FlagUk; diff --git a/packages/ui/icons/lib/FlagUkIcon.tsx b/packages/ui/icons/lib/FlagUkIcon.tsx new file mode 100644 index 00000000..2d894806 --- /dev/null +++ b/packages/ui/icons/lib/FlagUkIcon.tsx @@ -0,0 +1,22 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +function FlagUk(props: SVGProps) { + return ( + + + + + + + + + + + ); +} +export default FlagUk; diff --git a/packages/ui/icons/lib/Folder.tsx b/packages/ui/icons/lib/Folder.tsx deleted file mode 100644 index 4c0aedb1..00000000 --- a/packages/ui/icons/lib/Folder.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Folder = (props: SVGProps) => ; -export default Folder; diff --git a/packages/ui/icons/lib/FolderAdd.tsx b/packages/ui/icons/lib/FolderAdd.tsx deleted file mode 100644 index 7ccb7782..00000000 --- a/packages/ui/icons/lib/FolderAdd.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const FolderAdd = (props: SVGProps) => ; -export default FolderAdd; diff --git a/packages/ui/icons/lib/FolderAddIcon.tsx b/packages/ui/icons/lib/FolderAddIcon.tsx new file mode 100644 index 00000000..8d74dbac --- /dev/null +++ b/packages/ui/icons/lib/FolderAddIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const FolderAdd = (props: SVGProps) => ; +export default FolderAdd; diff --git a/packages/ui/icons/lib/FolderFill.tsx b/packages/ui/icons/lib/FolderFill.tsx deleted file mode 100644 index 6dfe0380..00000000 --- a/packages/ui/icons/lib/FolderFill.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const FolderFill = (props: SVGProps) => ; -export default FolderFill; diff --git a/packages/ui/icons/lib/FolderFillIcon.tsx b/packages/ui/icons/lib/FolderFillIcon.tsx new file mode 100644 index 00000000..038ab7ff --- /dev/null +++ b/packages/ui/icons/lib/FolderFillIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const FolderFill = (props: SVGProps) => ; +export default FolderFill; diff --git a/packages/ui/icons/lib/FolderIcon.tsx b/packages/ui/icons/lib/FolderIcon.tsx new file mode 100644 index 00000000..c0f250d9 --- /dev/null +++ b/packages/ui/icons/lib/FolderIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Folder = (props: SVGProps) => ; +export default Folder; diff --git a/packages/ui/icons/lib/FolderOpen.tsx b/packages/ui/icons/lib/FolderOpen.tsx deleted file mode 100644 index 2ab15f70..00000000 --- a/packages/ui/icons/lib/FolderOpen.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const FolderOpen = (props: SVGProps) => ; -export default FolderOpen; diff --git a/packages/ui/icons/lib/FolderOpenFill.tsx b/packages/ui/icons/lib/FolderOpenFill.tsx deleted file mode 100644 index 66211f7e..00000000 --- a/packages/ui/icons/lib/FolderOpenFill.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const FolderOpenFill = (props: SVGProps) => ; -export default FolderOpenFill; diff --git a/packages/ui/icons/lib/FolderOpenFillIcon.tsx b/packages/ui/icons/lib/FolderOpenFillIcon.tsx new file mode 100644 index 00000000..5bf70670 --- /dev/null +++ b/packages/ui/icons/lib/FolderOpenFillIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const FolderOpenFill = (props: SVGProps) => ; +export default FolderOpenFill; diff --git a/packages/ui/icons/lib/FolderOpenIcon.tsx b/packages/ui/icons/lib/FolderOpenIcon.tsx new file mode 100644 index 00000000..130663e6 --- /dev/null +++ b/packages/ui/icons/lib/FolderOpenIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const FolderOpen = (props: SVGProps) => ; +export default FolderOpen; diff --git a/packages/ui/icons/lib/Folders.tsx b/packages/ui/icons/lib/Folders.tsx deleted file mode 100644 index 294d5437..00000000 --- a/packages/ui/icons/lib/Folders.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Folders = (props: SVGProps) => ; -export default Folders; diff --git a/packages/ui/icons/lib/FoldersIcon.tsx b/packages/ui/icons/lib/FoldersIcon.tsx new file mode 100644 index 00000000..e35abb52 --- /dev/null +++ b/packages/ui/icons/lib/FoldersIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Folders = (props: SVGProps) => ; +export default Folders; diff --git a/packages/ui/icons/lib/FormatBold.tsx b/packages/ui/icons/lib/FormatBold.tsx deleted file mode 100644 index 9e8fce06..00000000 --- a/packages/ui/icons/lib/FormatBold.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const FormatBold = (props: SVGProps) => ; -export default FormatBold; diff --git a/packages/ui/icons/lib/FormatBoldIcon.tsx b/packages/ui/icons/lib/FormatBoldIcon.tsx new file mode 100644 index 00000000..693cc97f --- /dev/null +++ b/packages/ui/icons/lib/FormatBoldIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const FormatBold = (props: SVGProps) => ; +export default FormatBold; diff --git a/packages/ui/icons/lib/FormatItalic.tsx b/packages/ui/icons/lib/FormatItalic.tsx deleted file mode 100644 index a572aa36..00000000 --- a/packages/ui/icons/lib/FormatItalic.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const FormatItalic = (props: SVGProps) => ; -export default FormatItalic; diff --git a/packages/ui/icons/lib/FormatItalicIcon.tsx b/packages/ui/icons/lib/FormatItalicIcon.tsx new file mode 100644 index 00000000..a1715d8f --- /dev/null +++ b/packages/ui/icons/lib/FormatItalicIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const FormatItalic = (props: SVGProps) => ; +export default FormatItalic; diff --git a/packages/ui/icons/lib/FormatListOl.tsx b/packages/ui/icons/lib/FormatListOl.tsx deleted file mode 100644 index a69bd7a1..00000000 --- a/packages/ui/icons/lib/FormatListOl.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const FormatListOl = (props: SVGProps) => ; -export default FormatListOl; diff --git a/packages/ui/icons/lib/FormatListOlIcon.tsx b/packages/ui/icons/lib/FormatListOlIcon.tsx new file mode 100644 index 00000000..9ca564db --- /dev/null +++ b/packages/ui/icons/lib/FormatListOlIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const FormatListOl = (props: SVGProps) => ; +export default FormatListOl; diff --git a/packages/ui/icons/lib/FormatListUl.tsx b/packages/ui/icons/lib/FormatListUl.tsx deleted file mode 100644 index 4e6a2f07..00000000 --- a/packages/ui/icons/lib/FormatListUl.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const FormatListUl = (props: SVGProps) => ; -export default FormatListUl; diff --git a/packages/ui/icons/lib/FormatListUlIcon.tsx b/packages/ui/icons/lib/FormatListUlIcon.tsx new file mode 100644 index 00000000..4c115920 --- /dev/null +++ b/packages/ui/icons/lib/FormatListUlIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const FormatListUl = (props: SVGProps) => ; +export default FormatListUl; diff --git a/packages/ui/icons/lib/FormatUndeline.tsx b/packages/ui/icons/lib/FormatUndeline.tsx deleted file mode 100644 index d4362fd7..00000000 --- a/packages/ui/icons/lib/FormatUndeline.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const FormatUndeline = (props: SVGProps) => ; -export default FormatUndeline; diff --git a/packages/ui/icons/lib/FormatUndelineIcon.tsx b/packages/ui/icons/lib/FormatUndelineIcon.tsx new file mode 100644 index 00000000..4dffe1ee --- /dev/null +++ b/packages/ui/icons/lib/FormatUndelineIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const FormatUndeline = (props: SVGProps) => ; +export default FormatUndeline; diff --git a/packages/ui/icons/lib/Fullscreen.tsx b/packages/ui/icons/lib/Fullscreen.tsx deleted file mode 100644 index 2d0c0d66..00000000 --- a/packages/ui/icons/lib/Fullscreen.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Fullscreen = (props: SVGProps) => ; -export default Fullscreen; diff --git a/packages/ui/icons/lib/FullscreenIcon.tsx b/packages/ui/icons/lib/FullscreenIcon.tsx new file mode 100644 index 00000000..6b5577c5 --- /dev/null +++ b/packages/ui/icons/lib/FullscreenIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Fullscreen = (props: SVGProps) => ; +export default Fullscreen; diff --git a/packages/ui/icons/lib/Funnel.tsx b/packages/ui/icons/lib/Funnel.tsx deleted file mode 100644 index b408b931..00000000 --- a/packages/ui/icons/lib/Funnel.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Funnel = (props: SVGProps) => ; -export default Funnel; diff --git a/packages/ui/icons/lib/FunnelIcon.tsx b/packages/ui/icons/lib/FunnelIcon.tsx new file mode 100644 index 00000000..caa62461 --- /dev/null +++ b/packages/ui/icons/lib/FunnelIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Funnel = (props: SVGProps) => ; +export default Funnel; diff --git a/packages/ui/icons/lib/Globe.tsx b/packages/ui/icons/lib/Globe.tsx deleted file mode 100644 index f549baea..00000000 --- a/packages/ui/icons/lib/Globe.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Globe = (props: SVGProps) => ; -export default Globe; diff --git a/packages/ui/icons/lib/GlobeAdd.tsx b/packages/ui/icons/lib/GlobeAdd.tsx deleted file mode 100644 index 902e41dd..00000000 --- a/packages/ui/icons/lib/GlobeAdd.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const GlobeAdd = (props: SVGProps) => ; -export default GlobeAdd; diff --git a/packages/ui/icons/lib/GlobeAddIcon.tsx b/packages/ui/icons/lib/GlobeAddIcon.tsx new file mode 100644 index 00000000..0f33edba --- /dev/null +++ b/packages/ui/icons/lib/GlobeAddIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const GlobeAdd = (props: SVGProps) => ; +export default GlobeAdd; diff --git a/packages/ui/icons/lib/GlobeIcon.tsx b/packages/ui/icons/lib/GlobeIcon.tsx new file mode 100644 index 00000000..15b69de2 --- /dev/null +++ b/packages/ui/icons/lib/GlobeIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Globe = (props: SVGProps) => ; +export default Globe; diff --git a/packages/ui/icons/lib/Google.tsx b/packages/ui/icons/lib/Google.tsx deleted file mode 100644 index b32547f9..00000000 --- a/packages/ui/icons/lib/Google.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -function Google(props: SVGProps) { - return ( - - - - - - - ); -} -export default Google; diff --git a/packages/ui/icons/lib/GoogleIcon.tsx b/packages/ui/icons/lib/GoogleIcon.tsx new file mode 100644 index 00000000..b9ac4106 --- /dev/null +++ b/packages/ui/icons/lib/GoogleIcon.tsx @@ -0,0 +1,14 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +function Google(props: SVGProps) { + return ( + + + + + + + ); +} +export default Google; diff --git a/packages/ui/icons/lib/Grip.tsx b/packages/ui/icons/lib/Grip.tsx deleted file mode 100644 index 3301fd98..00000000 --- a/packages/ui/icons/lib/Grip.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Grip = (props: SVGProps) => ; -export default Grip; diff --git a/packages/ui/icons/lib/GripIcon.tsx b/packages/ui/icons/lib/GripIcon.tsx new file mode 100644 index 00000000..434448c5 --- /dev/null +++ b/packages/ui/icons/lib/GripIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Grip = (props: SVGProps) => ; +export default Grip; diff --git a/packages/ui/icons/lib/Hint.tsx b/packages/ui/icons/lib/Hint.tsx deleted file mode 100644 index f885be5e..00000000 --- a/packages/ui/icons/lib/Hint.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Hint = (props: SVGProps) => ; -export default Hint; diff --git a/packages/ui/icons/lib/HintAdd.tsx b/packages/ui/icons/lib/HintAdd.tsx deleted file mode 100644 index 97e37393..00000000 --- a/packages/ui/icons/lib/HintAdd.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -function HintAdd(props: SVGProps) { - return ( - - - - - - - ); -} -export default HintAdd; diff --git a/packages/ui/icons/lib/HintAddIcon.tsx b/packages/ui/icons/lib/HintAddIcon.tsx new file mode 100644 index 00000000..eacaaf7d --- /dev/null +++ b/packages/ui/icons/lib/HintAddIcon.tsx @@ -0,0 +1,14 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +function HintAdd(props: SVGProps) { + return ( + + + + + + + ); +} +export default HintAdd; diff --git a/packages/ui/icons/lib/HintIcon.tsx b/packages/ui/icons/lib/HintIcon.tsx new file mode 100644 index 00000000..5e6d8d30 --- /dev/null +++ b/packages/ui/icons/lib/HintIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Hint = (props: SVGProps) => ; +export default Hint; diff --git a/packages/ui/icons/lib/HintSlash.tsx b/packages/ui/icons/lib/HintSlash.tsx deleted file mode 100644 index 8ed8e441..00000000 --- a/packages/ui/icons/lib/HintSlash.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const HintSlash = (props: SVGProps) => ; -export default HintSlash; diff --git a/packages/ui/icons/lib/HintSlashIcon.tsx b/packages/ui/icons/lib/HintSlashIcon.tsx new file mode 100644 index 00000000..646677a0 --- /dev/null +++ b/packages/ui/icons/lib/HintSlashIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const HintSlash = (props: SVGProps) => ; +export default HintSlash; diff --git a/packages/ui/icons/lib/Home.tsx b/packages/ui/icons/lib/Home.tsx deleted file mode 100644 index 7ffaa194..00000000 --- a/packages/ui/icons/lib/Home.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Home = (props: SVGProps) => ; -export default Home; diff --git a/packages/ui/icons/lib/HomeFill.tsx b/packages/ui/icons/lib/HomeFill.tsx deleted file mode 100644 index 78b16e6b..00000000 --- a/packages/ui/icons/lib/HomeFill.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const HomeFill = (props: SVGProps) => ; -export default HomeFill; diff --git a/packages/ui/icons/lib/HomeFillIcon.tsx b/packages/ui/icons/lib/HomeFillIcon.tsx new file mode 100644 index 00000000..5f338143 --- /dev/null +++ b/packages/ui/icons/lib/HomeFillIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const HomeFill = (props: SVGProps) => ; +export default HomeFill; diff --git a/packages/ui/icons/lib/HomeIcon.tsx b/packages/ui/icons/lib/HomeIcon.tsx new file mode 100644 index 00000000..48eddbb7 --- /dev/null +++ b/packages/ui/icons/lib/HomeIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Home = (props: SVGProps) => ; +export default Home; diff --git a/packages/ui/icons/lib/Interests.tsx b/packages/ui/icons/lib/Interests.tsx deleted file mode 100644 index 030e7785..00000000 --- a/packages/ui/icons/lib/Interests.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Interests = (props: SVGProps) => ; -export default Interests; diff --git a/packages/ui/icons/lib/InterestsFill.tsx b/packages/ui/icons/lib/InterestsFill.tsx deleted file mode 100644 index 84a41e29..00000000 --- a/packages/ui/icons/lib/InterestsFill.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const InterestsFill = (props: SVGProps) => ; -export default InterestsFill; diff --git a/packages/ui/icons/lib/InterestsFillIcon.tsx b/packages/ui/icons/lib/InterestsFillIcon.tsx new file mode 100644 index 00000000..e962a7aa --- /dev/null +++ b/packages/ui/icons/lib/InterestsFillIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const InterestsFill = (props: SVGProps) => ; +export default InterestsFill; diff --git a/packages/ui/icons/lib/InterestsIcon.tsx b/packages/ui/icons/lib/InterestsIcon.tsx new file mode 100644 index 00000000..0dc5ab0e --- /dev/null +++ b/packages/ui/icons/lib/InterestsIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Interests = (props: SVGProps) => ; +export default Interests; diff --git a/packages/ui/icons/lib/Language.tsx b/packages/ui/icons/lib/Language.tsx deleted file mode 100644 index 6532b79b..00000000 --- a/packages/ui/icons/lib/Language.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Language = (props: SVGProps) => ; -export default Language; diff --git a/packages/ui/icons/lib/LanguageIcon.tsx b/packages/ui/icons/lib/LanguageIcon.tsx new file mode 100644 index 00000000..c595993e --- /dev/null +++ b/packages/ui/icons/lib/LanguageIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Language = (props: SVGProps) => ; +export default Language; diff --git a/packages/ui/icons/lib/Learn.tsx b/packages/ui/icons/lib/Learn.tsx deleted file mode 100644 index 58a7710a..00000000 --- a/packages/ui/icons/lib/Learn.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Learn = (props: SVGProps) => ; -export default Learn; diff --git a/packages/ui/icons/lib/LearnIcon.tsx b/packages/ui/icons/lib/LearnIcon.tsx new file mode 100644 index 00000000..95ee8807 --- /dev/null +++ b/packages/ui/icons/lib/LearnIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Learn = (props: SVGProps) => ; +export default Learn; diff --git a/packages/ui/icons/lib/Link.tsx b/packages/ui/icons/lib/Link.tsx deleted file mode 100644 index 80b7d878..00000000 --- a/packages/ui/icons/lib/Link.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Link = (props: SVGProps) => ; -export default Link; diff --git a/packages/ui/icons/lib/LinkAdd.tsx b/packages/ui/icons/lib/LinkAdd.tsx deleted file mode 100644 index e3414b02..00000000 --- a/packages/ui/icons/lib/LinkAdd.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const LinkAdd = (props: SVGProps) => ; -export default LinkAdd; diff --git a/packages/ui/icons/lib/LinkAddIcon.tsx b/packages/ui/icons/lib/LinkAddIcon.tsx new file mode 100644 index 00000000..3fa51ff2 --- /dev/null +++ b/packages/ui/icons/lib/LinkAddIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const LinkAdd = (props: SVGProps) => ; +export default LinkAdd; diff --git a/packages/ui/icons/lib/LinkIcon.tsx b/packages/ui/icons/lib/LinkIcon.tsx new file mode 100644 index 00000000..081c3b20 --- /dev/null +++ b/packages/ui/icons/lib/LinkIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Link = (props: SVGProps) => ; +export default Link; diff --git a/packages/ui/icons/lib/LinkSlash.tsx b/packages/ui/icons/lib/LinkSlash.tsx deleted file mode 100644 index 20645ac1..00000000 --- a/packages/ui/icons/lib/LinkSlash.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const LinkSlash = (props: SVGProps) => ; -export default LinkSlash; diff --git a/packages/ui/icons/lib/LinkSlashIcon.tsx b/packages/ui/icons/lib/LinkSlashIcon.tsx new file mode 100644 index 00000000..9855c703 --- /dev/null +++ b/packages/ui/icons/lib/LinkSlashIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const LinkSlash = (props: SVGProps) => ; +export default LinkSlash; diff --git a/packages/ui/icons/lib/ListAdd.tsx b/packages/ui/icons/lib/ListAdd.tsx deleted file mode 100644 index 2cac847f..00000000 --- a/packages/ui/icons/lib/ListAdd.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const ListAdd = (props: SVGProps) => ; -export default ListAdd; diff --git a/packages/ui/icons/lib/ListAddIcon.tsx b/packages/ui/icons/lib/ListAddIcon.tsx new file mode 100644 index 00000000..42963298 --- /dev/null +++ b/packages/ui/icons/lib/ListAddIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const ListAdd = (props: SVGProps) => ; +export default ListAdd; diff --git a/packages/ui/icons/lib/Magnifier.tsx b/packages/ui/icons/lib/Magnifier.tsx deleted file mode 100644 index 944606e5..00000000 --- a/packages/ui/icons/lib/Magnifier.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Magnifier = (props: SVGProps) => ; -export default Magnifier; diff --git a/packages/ui/icons/lib/MagnifierIcon.tsx b/packages/ui/icons/lib/MagnifierIcon.tsx new file mode 100644 index 00000000..9a7c4190 --- /dev/null +++ b/packages/ui/icons/lib/MagnifierIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Magnifier = (props: SVGProps) => ; +export default Magnifier; diff --git a/packages/ui/icons/lib/MailAol.tsx b/packages/ui/icons/lib/MailAol.tsx deleted file mode 100644 index dc926e19..00000000 --- a/packages/ui/icons/lib/MailAol.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -function MailAol(props: SVGProps) { - return ( - - - - - - - - - - - ); -} -export default MailAol; diff --git a/packages/ui/icons/lib/MailAolIcon.tsx b/packages/ui/icons/lib/MailAolIcon.tsx new file mode 100644 index 00000000..f5347167 --- /dev/null +++ b/packages/ui/icons/lib/MailAolIcon.tsx @@ -0,0 +1,18 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +function MailAol(props: SVGProps) { + return ( + + + + + + + + + + + ); +} +export default MailAol; diff --git a/packages/ui/icons/lib/MailGmail.tsx b/packages/ui/icons/lib/MailGmail.tsx deleted file mode 100644 index 61c53922..00000000 --- a/packages/ui/icons/lib/MailGmail.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -function MailGmail(props: SVGProps) { - return ( - - - - - - - - ); -} -export default MailGmail; diff --git a/packages/ui/icons/lib/MailGmailIcon.tsx b/packages/ui/icons/lib/MailGmailIcon.tsx new file mode 100644 index 00000000..0277066b --- /dev/null +++ b/packages/ui/icons/lib/MailGmailIcon.tsx @@ -0,0 +1,15 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +function MailGmail(props: SVGProps) { + return ( + + + + + + + + ); +} +export default MailGmail; diff --git a/packages/ui/icons/lib/MailIcloud.tsx b/packages/ui/icons/lib/MailIcloud.tsx deleted file mode 100644 index ce2934d8..00000000 --- a/packages/ui/icons/lib/MailIcloud.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -function MailIcloud(props: SVGProps) { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} -export default MailIcloud; diff --git a/packages/ui/icons/lib/MailIcloudIcon.tsx b/packages/ui/icons/lib/MailIcloudIcon.tsx new file mode 100644 index 00000000..f8cad77e --- /dev/null +++ b/packages/ui/icons/lib/MailIcloudIcon.tsx @@ -0,0 +1,48 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +function MailIcloud(props: SVGProps) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} +export default MailIcloud; diff --git a/packages/ui/icons/lib/MailMail.tsx b/packages/ui/icons/lib/MailMail.tsx deleted file mode 100644 index 8dc4a44c..00000000 --- a/packages/ui/icons/lib/MailMail.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -function MailMail(props: SVGProps) { - return ( - - - - - - - - ); -} -export default MailMail; diff --git a/packages/ui/icons/lib/MailMailIcon.tsx b/packages/ui/icons/lib/MailMailIcon.tsx new file mode 100644 index 00000000..42b785e0 --- /dev/null +++ b/packages/ui/icons/lib/MailMailIcon.tsx @@ -0,0 +1,15 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +function MailMail(props: SVGProps) { + return ( + + + + + + + + ); +} +export default MailMail; diff --git a/packages/ui/icons/lib/MailOutlook.tsx b/packages/ui/icons/lib/MailOutlook.tsx deleted file mode 100644 index 139e3b27..00000000 --- a/packages/ui/icons/lib/MailOutlook.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -function MailOutlook(props: SVGProps) { - return ( - - - - - - - - - - - - - - - - - - ); -} -export default MailOutlook; diff --git a/packages/ui/icons/lib/MailOutlookIcon.tsx b/packages/ui/icons/lib/MailOutlookIcon.tsx new file mode 100644 index 00000000..28fb17ce --- /dev/null +++ b/packages/ui/icons/lib/MailOutlookIcon.tsx @@ -0,0 +1,25 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +function MailOutlook(props: SVGProps) { + return ( + + + + + + + + + + + + + + + + + + ); +} +export default MailOutlook; diff --git a/packages/ui/icons/lib/MailProton.tsx b/packages/ui/icons/lib/MailProton.tsx deleted file mode 100644 index 5158c118..00000000 --- a/packages/ui/icons/lib/MailProton.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -function MailProton(props: SVGProps) { - return ( - - - - - ); -} -export default MailProton; diff --git a/packages/ui/icons/lib/MailProtonIcon.tsx b/packages/ui/icons/lib/MailProtonIcon.tsx new file mode 100644 index 00000000..17c28f21 --- /dev/null +++ b/packages/ui/icons/lib/MailProtonIcon.tsx @@ -0,0 +1,12 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +function MailProton(props: SVGProps) { + return ( + + + + + ); +} +export default MailProton; diff --git a/packages/ui/icons/lib/MailYahoo.tsx b/packages/ui/icons/lib/MailYahoo.tsx deleted file mode 100644 index e01db515..00000000 --- a/packages/ui/icons/lib/MailYahoo.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -function MailYahoo(props: SVGProps) { - return ( - - - - - - - - ); -} -export default MailYahoo; diff --git a/packages/ui/icons/lib/MailYahooIcon.tsx b/packages/ui/icons/lib/MailYahooIcon.tsx new file mode 100644 index 00000000..35013e5a --- /dev/null +++ b/packages/ui/icons/lib/MailYahooIcon.tsx @@ -0,0 +1,15 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +function MailYahoo(props: SVGProps) { + return ( + + + + + + + + ); +} +export default MailYahoo; diff --git a/packages/ui/icons/lib/MailYandex.tsx b/packages/ui/icons/lib/MailYandex.tsx deleted file mode 100644 index b3ff0feb..00000000 --- a/packages/ui/icons/lib/MailYandex.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -function MailYandex(props: SVGProps) { - return ( - - - - - - - - - - - - - - - - ); -} -export default MailYandex; diff --git a/packages/ui/icons/lib/MailYandexIcon.tsx b/packages/ui/icons/lib/MailYandexIcon.tsx new file mode 100644 index 00000000..0012dbbd --- /dev/null +++ b/packages/ui/icons/lib/MailYandexIcon.tsx @@ -0,0 +1,23 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +function MailYandex(props: SVGProps) { + return ( + + + + + + + + + + + + + + + + ); +} +export default MailYandex; diff --git a/packages/ui/icons/lib/Minus.tsx b/packages/ui/icons/lib/Minus.tsx deleted file mode 100644 index 8c09577c..00000000 --- a/packages/ui/icons/lib/Minus.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Minus = (props: SVGProps) => ; -export default Minus; diff --git a/packages/ui/icons/lib/MinusIcon.tsx b/packages/ui/icons/lib/MinusIcon.tsx new file mode 100644 index 00000000..a5749f8c --- /dev/null +++ b/packages/ui/icons/lib/MinusIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Minus = (props: SVGProps) => ; +export default Minus; diff --git a/packages/ui/icons/lib/MoveToFolder.tsx b/packages/ui/icons/lib/MoveToFolder.tsx deleted file mode 100644 index c76e67d3..00000000 --- a/packages/ui/icons/lib/MoveToFolder.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const MoveToFolder = (props: SVGProps) => ; -export default MoveToFolder; diff --git a/packages/ui/icons/lib/MoveToFolderIcon.tsx b/packages/ui/icons/lib/MoveToFolderIcon.tsx new file mode 100644 index 00000000..5b7b8439 --- /dev/null +++ b/packages/ui/icons/lib/MoveToFolderIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const MoveToFolder = (props: SVGProps) => ; +export default MoveToFolder; diff --git a/packages/ui/icons/lib/Notifications.tsx b/packages/ui/icons/lib/Notifications.tsx deleted file mode 100644 index b46e6897..00000000 --- a/packages/ui/icons/lib/Notifications.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Notifications = (props: SVGProps) => ; -export default Notifications; diff --git a/packages/ui/icons/lib/NotificationsIcon.tsx b/packages/ui/icons/lib/NotificationsIcon.tsx new file mode 100644 index 00000000..644df8d8 --- /dev/null +++ b/packages/ui/icons/lib/NotificationsIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Notifications = (props: SVGProps) => ; +export default Notifications; diff --git a/packages/ui/icons/lib/Pencil.tsx b/packages/ui/icons/lib/Pencil.tsx deleted file mode 100644 index 4b6037ad..00000000 --- a/packages/ui/icons/lib/Pencil.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Pencil = (props: SVGProps) => ; -export default Pencil; diff --git a/packages/ui/icons/lib/PencilIcon.tsx b/packages/ui/icons/lib/PencilIcon.tsx new file mode 100644 index 00000000..e867e0b3 --- /dev/null +++ b/packages/ui/icons/lib/PencilIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Pencil = (props: SVGProps) => ; +export default Pencil; diff --git a/packages/ui/icons/lib/PersonAdd.tsx b/packages/ui/icons/lib/PersonAdd.tsx deleted file mode 100644 index c49678ac..00000000 --- a/packages/ui/icons/lib/PersonAdd.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const PersonAdd = (props: SVGProps) => ; -export default PersonAdd; diff --git a/packages/ui/icons/lib/PersonAddIcon.tsx b/packages/ui/icons/lib/PersonAddIcon.tsx new file mode 100644 index 00000000..973797cd --- /dev/null +++ b/packages/ui/icons/lib/PersonAddIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const PersonAdd = (props: SVGProps) => ; +export default PersonAdd; diff --git a/packages/ui/icons/lib/PersonCheck.tsx b/packages/ui/icons/lib/PersonCheck.tsx deleted file mode 100644 index 47e7279a..00000000 --- a/packages/ui/icons/lib/PersonCheck.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const PersonCheck = (props: SVGProps) => ; -export default PersonCheck; diff --git a/packages/ui/icons/lib/PersonCheckFill.tsx b/packages/ui/icons/lib/PersonCheckFill.tsx deleted file mode 100644 index 07aab18f..00000000 --- a/packages/ui/icons/lib/PersonCheckFill.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const PersonCheckFill = (props: SVGProps) => ; -export default PersonCheckFill; diff --git a/packages/ui/icons/lib/PersonCheckFillIcon.tsx b/packages/ui/icons/lib/PersonCheckFillIcon.tsx new file mode 100644 index 00000000..0c563d99 --- /dev/null +++ b/packages/ui/icons/lib/PersonCheckFillIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const PersonCheckFill = (props: SVGProps) => ; +export default PersonCheckFill; diff --git a/packages/ui/icons/lib/PersonCheckIcon.tsx b/packages/ui/icons/lib/PersonCheckIcon.tsx new file mode 100644 index 00000000..4bd7192c --- /dev/null +++ b/packages/ui/icons/lib/PersonCheckIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const PersonCheck = (props: SVGProps) => ; +export default PersonCheck; diff --git a/packages/ui/icons/lib/PersonEdit.tsx b/packages/ui/icons/lib/PersonEdit.tsx deleted file mode 100644 index 06bc419a..00000000 --- a/packages/ui/icons/lib/PersonEdit.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const PersonEdit = (props: SVGProps) => ; -export default PersonEdit; diff --git a/packages/ui/icons/lib/PersonEditFill.tsx b/packages/ui/icons/lib/PersonEditFill.tsx deleted file mode 100644 index f6f0e95c..00000000 --- a/packages/ui/icons/lib/PersonEditFill.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const PersonEditFill = (props: SVGProps) => ; -export default PersonEditFill; diff --git a/packages/ui/icons/lib/PersonEditFillIcon.tsx b/packages/ui/icons/lib/PersonEditFillIcon.tsx new file mode 100644 index 00000000..cfd29a91 --- /dev/null +++ b/packages/ui/icons/lib/PersonEditFillIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const PersonEditFill = (props: SVGProps) => ; +export default PersonEditFill; diff --git a/packages/ui/icons/lib/PersonEditIcon.tsx b/packages/ui/icons/lib/PersonEditIcon.tsx new file mode 100644 index 00000000..bbb49ab0 --- /dev/null +++ b/packages/ui/icons/lib/PersonEditIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const PersonEdit = (props: SVGProps) => ; +export default PersonEdit; diff --git a/packages/ui/icons/lib/PersonGroup.tsx b/packages/ui/icons/lib/PersonGroup.tsx deleted file mode 100644 index 29fc5dd1..00000000 --- a/packages/ui/icons/lib/PersonGroup.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const PersonGroup = (props: SVGProps) => ; -export default PersonGroup; diff --git a/packages/ui/icons/lib/PersonGroupIcon.tsx b/packages/ui/icons/lib/PersonGroupIcon.tsx new file mode 100644 index 00000000..b63a3fb9 --- /dev/null +++ b/packages/ui/icons/lib/PersonGroupIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const PersonGroup = (props: SVGProps) => ; +export default PersonGroup; diff --git a/packages/ui/icons/lib/PersonPin.tsx b/packages/ui/icons/lib/PersonPin.tsx deleted file mode 100644 index d627a936..00000000 --- a/packages/ui/icons/lib/PersonPin.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const PersonPin = (props: SVGProps) => ; -export default PersonPin; diff --git a/packages/ui/icons/lib/PersonPinIcon.tsx b/packages/ui/icons/lib/PersonPinIcon.tsx new file mode 100644 index 00000000..1fa57618 --- /dev/null +++ b/packages/ui/icons/lib/PersonPinIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const PersonPin = (props: SVGProps) => ; +export default PersonPin; diff --git a/packages/ui/icons/lib/Plus.tsx b/packages/ui/icons/lib/Plus.tsx deleted file mode 100644 index 89302b55..00000000 --- a/packages/ui/icons/lib/Plus.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Plus = (props: SVGProps) => ; -export default Plus; diff --git a/packages/ui/icons/lib/PlusIcon.tsx b/packages/ui/icons/lib/PlusIcon.tsx new file mode 100644 index 00000000..a6ef5891 --- /dev/null +++ b/packages/ui/icons/lib/PlusIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Plus = (props: SVGProps) => ; +export default Plus; diff --git a/packages/ui/icons/lib/Preview.tsx b/packages/ui/icons/lib/Preview.tsx deleted file mode 100644 index 70ec403b..00000000 --- a/packages/ui/icons/lib/Preview.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Preview = (props: SVGProps) => ; -export default Preview; diff --git a/packages/ui/icons/lib/PreviewIcon.tsx b/packages/ui/icons/lib/PreviewIcon.tsx new file mode 100644 index 00000000..e7d0be53 --- /dev/null +++ b/packages/ui/icons/lib/PreviewIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Preview = (props: SVGProps) => ; +export default Preview; diff --git a/packages/ui/icons/lib/Set.tsx b/packages/ui/icons/lib/Set.tsx deleted file mode 100644 index 2fbe25d5..00000000 --- a/packages/ui/icons/lib/Set.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Set = (props: SVGProps) => ; -export default Set; diff --git a/packages/ui/icons/lib/SetAdd.tsx b/packages/ui/icons/lib/SetAdd.tsx deleted file mode 100644 index 671ad26c..00000000 --- a/packages/ui/icons/lib/SetAdd.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const SetAdd = (props: SVGProps) => ; -export default SetAdd; diff --git a/packages/ui/icons/lib/SetAddIcon.tsx b/packages/ui/icons/lib/SetAddIcon.tsx new file mode 100644 index 00000000..2f2577af --- /dev/null +++ b/packages/ui/icons/lib/SetAddIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const SetAdd = (props: SVGProps) => ; +export default SetAdd; diff --git a/packages/ui/icons/lib/SetIcon.tsx b/packages/ui/icons/lib/SetIcon.tsx new file mode 100644 index 00000000..cfca467f --- /dev/null +++ b/packages/ui/icons/lib/SetIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Set = (props: SVGProps) => ; +export default Set; diff --git a/packages/ui/icons/lib/Settings.tsx b/packages/ui/icons/lib/Settings.tsx deleted file mode 100644 index 936581ac..00000000 --- a/packages/ui/icons/lib/Settings.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Settings = (props: SVGProps) => ; -export default Settings; diff --git a/packages/ui/icons/lib/SettingsIcon.tsx b/packages/ui/icons/lib/SettingsIcon.tsx new file mode 100644 index 00000000..09de8e5e --- /dev/null +++ b/packages/ui/icons/lib/SettingsIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Settings = (props: SVGProps) => ; +export default Settings; diff --git a/packages/ui/icons/lib/Shuffle.tsx b/packages/ui/icons/lib/Shuffle.tsx deleted file mode 100644 index 09853785..00000000 --- a/packages/ui/icons/lib/Shuffle.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Shuffle = (props: SVGProps) => ; -export default Shuffle; diff --git a/packages/ui/icons/lib/ShuffleIcon.tsx b/packages/ui/icons/lib/ShuffleIcon.tsx new file mode 100644 index 00000000..a569f65f --- /dev/null +++ b/packages/ui/icons/lib/ShuffleIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Shuffle = (props: SVGProps) => ; +export default Shuffle; diff --git a/packages/ui/icons/lib/Sort.tsx b/packages/ui/icons/lib/Sort.tsx deleted file mode 100644 index 9dcc5f24..00000000 --- a/packages/ui/icons/lib/Sort.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Sort = (props: SVGProps) => ; -export default Sort; diff --git a/packages/ui/icons/lib/SortByAlpha.tsx b/packages/ui/icons/lib/SortByAlpha.tsx deleted file mode 100644 index 2f3b194c..00000000 --- a/packages/ui/icons/lib/SortByAlpha.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const SortByAlpha = (props: SVGProps) => ; -export default SortByAlpha; diff --git a/packages/ui/icons/lib/SortByAlphaIcon.tsx b/packages/ui/icons/lib/SortByAlphaIcon.tsx new file mode 100644 index 00000000..ce1b82e8 --- /dev/null +++ b/packages/ui/icons/lib/SortByAlphaIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const SortByAlpha = (props: SVGProps) => ; +export default SortByAlpha; diff --git a/packages/ui/icons/lib/SortIcon.tsx b/packages/ui/icons/lib/SortIcon.tsx new file mode 100644 index 00000000..5f918b77 --- /dev/null +++ b/packages/ui/icons/lib/SortIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Sort = (props: SVGProps) => ; +export default Sort; diff --git a/packages/ui/icons/lib/Spinner.tsx b/packages/ui/icons/lib/Spinner.tsx deleted file mode 100644 index b7790693..00000000 --- a/packages/ui/icons/lib/Spinner.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -function Spinner(props: SVGProps) { - return ( - - - - - ); -} -export default Spinner; diff --git a/packages/ui/icons/lib/SpinnerIcon.tsx b/packages/ui/icons/lib/SpinnerIcon.tsx new file mode 100644 index 00000000..0d75ed58 --- /dev/null +++ b/packages/ui/icons/lib/SpinnerIcon.tsx @@ -0,0 +1,12 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +function Spinner(props: SVGProps) { + return ( + + + + + ); +} +export default Spinner; diff --git a/packages/ui/icons/lib/Star.tsx b/packages/ui/icons/lib/Star.tsx deleted file mode 100644 index 99f23a23..00000000 --- a/packages/ui/icons/lib/Star.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Star = (props: SVGProps) => ; -export default Star; diff --git a/packages/ui/icons/lib/StarIcon.tsx b/packages/ui/icons/lib/StarIcon.tsx new file mode 100644 index 00000000..e853787e --- /dev/null +++ b/packages/ui/icons/lib/StarIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Star = (props: SVGProps) => ; +export default Star; diff --git a/packages/ui/icons/lib/TableConvert.tsx b/packages/ui/icons/lib/TableConvert.tsx deleted file mode 100644 index 649ade65..00000000 --- a/packages/ui/icons/lib/TableConvert.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const TableConvert = (props: SVGProps) => ; -export default TableConvert; diff --git a/packages/ui/icons/lib/TableConvertIcon.tsx b/packages/ui/icons/lib/TableConvertIcon.tsx new file mode 100644 index 00000000..b3d3b479 --- /dev/null +++ b/packages/ui/icons/lib/TableConvertIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const TableConvert = (props: SVGProps) => ; +export default TableConvert; diff --git a/packages/ui/icons/lib/Tag.tsx b/packages/ui/icons/lib/Tag.tsx deleted file mode 100644 index c031bf34..00000000 --- a/packages/ui/icons/lib/Tag.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Tag = (props: SVGProps) => ; -export default Tag; diff --git a/packages/ui/icons/lib/TagIcon.tsx b/packages/ui/icons/lib/TagIcon.tsx new file mode 100644 index 00000000..66c2e231 --- /dev/null +++ b/packages/ui/icons/lib/TagIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Tag = (props: SVGProps) => ; +export default Tag; diff --git a/packages/ui/icons/lib/TextFormat.tsx b/packages/ui/icons/lib/TextFormat.tsx deleted file mode 100644 index f9428726..00000000 --- a/packages/ui/icons/lib/TextFormat.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const TextFormat = (props: SVGProps) => ; -export default TextFormat; diff --git a/packages/ui/icons/lib/TextFormatIcon.tsx b/packages/ui/icons/lib/TextFormatIcon.tsx new file mode 100644 index 00000000..93d74c4f --- /dev/null +++ b/packages/ui/icons/lib/TextFormatIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const TextFormat = (props: SVGProps) => ; +export default TextFormat; diff --git a/packages/ui/icons/lib/Vk.tsx b/packages/ui/icons/lib/Vk.tsx deleted file mode 100644 index c3faf2c6..00000000 --- a/packages/ui/icons/lib/Vk.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -function Vk(props: SVGProps) { - return ( - - - - - ); -} -export default Vk; diff --git a/packages/ui/icons/lib/VkIcon.tsx b/packages/ui/icons/lib/VkIcon.tsx new file mode 100644 index 00000000..9aa3c32a --- /dev/null +++ b/packages/ui/icons/lib/VkIcon.tsx @@ -0,0 +1,12 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +function Vk(props: SVGProps) { + return ( + + + + + ); +} +export default Vk; diff --git a/packages/ui/icons/lib/Xmark.tsx b/packages/ui/icons/lib/Xmark.tsx deleted file mode 100644 index 52e70033..00000000 --- a/packages/ui/icons/lib/Xmark.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -const Xmark = (props: SVGProps) => ; -export default Xmark; diff --git a/packages/ui/icons/lib/XmarkIcon.tsx b/packages/ui/icons/lib/XmarkIcon.tsx new file mode 100644 index 00000000..7c6e6aa8 --- /dev/null +++ b/packages/ui/icons/lib/XmarkIcon.tsx @@ -0,0 +1,5 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +const Xmark = (props: SVGProps) => ; +export default Xmark; diff --git a/packages/ui/icons/lib/Yandex.tsx b/packages/ui/icons/lib/Yandex.tsx deleted file mode 100644 index 9d4aa050..00000000 --- a/packages/ui/icons/lib/Yandex.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import type { SVGProps } from 'react'; -import * as React from 'react'; - -function Yandex(props: SVGProps) { - return ( - - - - - - - - ); -} -export default Yandex; diff --git a/packages/ui/icons/lib/YandexIcon.tsx b/packages/ui/icons/lib/YandexIcon.tsx new file mode 100644 index 00000000..463af314 --- /dev/null +++ b/packages/ui/icons/lib/YandexIcon.tsx @@ -0,0 +1,15 @@ +import type { SVGProps } from 'react'; +import * as React from 'react'; + +function Yandex(props: SVGProps) { + return ( + + + + + + + + ); +} +export default Yandex; diff --git a/packages/ui/icons/lib/index.tsx b/packages/ui/icons/lib/index.tsx index d8f63e3d..6cb9e2af 100644 --- a/packages/ui/icons/lib/index.tsx +++ b/packages/ui/icons/lib/index.tsx @@ -1,125 +1,125 @@ -export { default as AddRowAbove } from './AddRowAbove'; -export { default as AddRowBelow } from './AddRowBelow'; -export { default as AddSquare } from './AddSquare'; -export { default as Arrow360 } from './Arrow360'; -export { default as ArrowBack } from './ArrowBack'; -export { default as ArrowDownToSquare } from './ArrowDownToSquare'; -export { default as ArrowLeftArrowRight } from './ArrowLeftArrowRight'; -export { default as ArrowOutward } from './ArrowOutward'; -export { default as ArrowRightFromSquare } from './ArrowRightFromSquare'; -export { default as ArrowRightToSquare } from './ArrowRightToSquare'; -export { default as ArrowShapeTurnUpRight } from './ArrowShapeTurnUpRight'; -export { default as ArrowShapeTurnUpRightCheck } from './ArrowShapeTurnUpRightCheck'; -export { default as ArrowsRotateRightAdd } from './ArrowsRotateRightAdd'; -export { default as ArrowsRotateRightCheck } from './ArrowsRotateRightCheck'; -export { default as ArrowUpArrowDown } from './ArrowUpArrowDown'; -export { default as ArrowUturnCcwLeft } from './ArrowUturnCcwLeft'; -export { default as ArrowUturnCwRight } from './ArrowUturnCwRight'; -export { default as AttachFile } from './AttachFile'; -export { default as Bookmark } from './Bookmark'; -export { default as BookmarkFill } from './BookmarkFill'; -export { default as Bookmarks } from './Bookmarks'; -export { default as Check } from './Check'; -export { default as ChevronDown } from './ChevronDown'; -export { default as ChevronDownToLine } from './ChevronDownToLine'; -export { default as ChevronLeft } from './ChevronLeft'; -export { default as ChevronRight } from './ChevronRight'; -export { default as ChevronsCollapseUpRight } from './ChevronsCollapseUpRight'; -export { default as ChevronsExpandUpRight } from './ChevronsExpandUpRight'; -export { default as ChevronUp } from './ChevronUp'; -export { default as ChevronUpToLine } from './ChevronUpToLine'; -export { default as CircleCheck } from './CircleCheck'; -export { default as CircleCheckFill } from './CircleCheckFill'; -export { default as CircleInfo } from './CircleInfo'; -export { default as CircleInfoFill } from './CircleInfoFill'; -export { default as CircleXmark } from './CircleXmark'; -export { default as CircleXmarkFill } from './CircleXmarkFill'; -export { default as Clipboard } from './Clipboard'; -export { default as Clock40 } from './Clock40'; -export { default as Clock60 } from './Clock60'; -export { default as ClockArrowRotateCcwLeft } from './ClockArrowRotateCcwLeft'; -export { default as CodeBlock } from './CodeBlock'; -export { default as Copy } from './Copy'; -export { default as Delete } from './Delete'; -export { default as DeleteXmark } from './DeleteXmark'; -export { default as DotsHorizontal } from './DotsHorizontal'; -export { default as DotsVertical } from './DotsVertical'; -export { default as Equal } from './Equal'; -export { default as Explore } from './Explore'; -export { default as ExploreFill } from './ExploreFill'; -export { default as Favorite } from './Favorite'; -export { default as FavoriteFill } from './FavoriteFill'; -export { default as File } from './File'; -export { default as FileAdd } from './FileAdd'; -export { default as FileCheck } from './FileCheck'; -export { default as FileCheckFill } from './FileCheckFill'; -export { default as Filter } from './Filter'; -export { default as FilterFill } from './FilterFill'; -export { default as FlagRu } from './FlagRu'; -export { default as FlagUk } from './FlagUk'; -export { default as Folder } from './Folder'; -export { default as FolderAdd } from './FolderAdd'; -export { default as FolderFill } from './FolderFill'; -export { default as FolderOpen } from './FolderOpen'; -export { default as FolderOpenFill } from './FolderOpenFill'; -export { default as Folders } from './Folders'; -export { default as FormatBold } from './FormatBold'; -export { default as FormatItalic } from './FormatItalic'; -export { default as FormatListOl } from './FormatListOl'; -export { default as FormatListUl } from './FormatListUl'; -export { default as FormatUndeline } from './FormatUndeline'; -export { default as Fullscreen } from './Fullscreen'; -export { default as Funnel } from './Funnel'; -export { default as Globe } from './Globe'; -export { default as GlobeAdd } from './GlobeAdd'; -export { default as Google } from './Google'; -export { default as Grip } from './Grip'; -export { default as Hint } from './Hint'; -export { default as HintAdd } from './HintAdd'; -export { default as HintSlash } from './HintSlash'; -export { default as Home } from './Home'; -export { default as HomeFill } from './HomeFill'; -export { default as Interests } from './Interests'; -export { default as InterestsFill } from './InterestsFill'; -export { default as Language } from './Language'; -export { default as Learn } from './Learn'; -export { default as Link } from './Link'; -export { default as LinkAdd } from './LinkAdd'; -export { default as LinkSlash } from './LinkSlash'; -export { default as ListAdd } from './ListAdd'; -export { default as Magnifier } from './Magnifier'; -export { default as MailAol } from './MailAol'; -export { default as MailGmail } from './MailGmail'; -export { default as MailIcloud } from './MailIcloud'; -export { default as MailMail } from './MailMail'; -export { default as MailOutlook } from './MailOutlook'; -export { default as MailProton } from './MailProton'; -export { default as MailYahoo } from './MailYahoo'; -export { default as MailYandex } from './MailYandex'; -export { default as Minus } from './Minus'; -export { default as MoveToFolder } from './MoveToFolder'; -export { default as Notifications } from './Notifications'; -export { default as Pencil } from './Pencil'; -export { default as PersonAdd } from './PersonAdd'; -export { default as PersonCheck } from './PersonCheck'; -export { default as PersonCheckFill } from './PersonCheckFill'; -export { default as PersonEdit } from './PersonEdit'; -export { default as PersonEditFill } from './PersonEditFill'; -export { default as PersonGroup } from './PersonGroup'; -export { default as PersonPin } from './PersonPin'; -export { default as Plus } from './Plus'; -export { default as Preview } from './Preview'; -export { default as Set } from './Set'; -export { default as SetAdd } from './SetAdd'; -export { default as Settings } from './Settings'; -export { default as Shuffle } from './Shuffle'; -export { default as Sort } from './Sort'; -export { default as SortByAlpha } from './SortByAlpha'; -export { default as Spinner } from './Spinner'; -export { default as Star } from './Star'; -export { default as TableConvert } from './TableConvert'; -export { default as Tag } from './Tag'; -export { default as TextFormat } from './TextFormat'; -export { default as Vk } from './Vk'; -export { default as Xmark } from './Xmark'; -export { default as Yandex } from './Yandex'; +export { default as AddRowAboveIcon } from './AddRowAboveIcon'; +export { default as AddRowBelowIcon } from './AddRowBelowIcon'; +export { default as AddSquareIcon } from './AddSquareIcon'; +export { default as Arrow360Icon } from './Arrow360Icon'; +export { default as ArrowBackIcon } from './ArrowBackIcon'; +export { default as ArrowDownToSquareIcon } from './ArrowDownToSquareIcon'; +export { default as ArrowLeftArrowRightIcon } from './ArrowLeftArrowRightIcon'; +export { default as ArrowOutwardIcon } from './ArrowOutwardIcon'; +export { default as ArrowRightFromSquareIcon } from './ArrowRightFromSquareIcon'; +export { default as ArrowRightToSquareIcon } from './ArrowRightToSquareIcon'; +export { default as ArrowShapeTurnUpRightCheckIcon } from './ArrowShapeTurnUpRightCheckIcon'; +export { default as ArrowShapeTurnUpRightIcon } from './ArrowShapeTurnUpRightIcon'; +export { default as ArrowsRotateRightAddIcon } from './ArrowsRotateRightAddIcon'; +export { default as ArrowsRotateRightCheckIcon } from './ArrowsRotateRightCheckIcon'; +export { default as ArrowUpArrowDownIcon } from './ArrowUpArrowDownIcon'; +export { default as ArrowUturnCcwLeftIcon } from './ArrowUturnCcwLeftIcon'; +export { default as ArrowUturnCwRightIcon } from './ArrowUturnCwRightIcon'; +export { default as AttachFileIcon } from './AttachFileIcon'; +export { default as BookmarkFillIcon } from './BookmarkFillIcon'; +export { default as BookmarkIcon } from './BookmarkIcon'; +export { default as BookmarksIcon } from './BookmarksIcon'; +export { default as CheckIcon } from './CheckIcon'; +export { default as ChevronDownIcon } from './ChevronDownIcon'; +export { default as ChevronDownToLineIcon } from './ChevronDownToLineIcon'; +export { default as ChevronLeftIcon } from './ChevronLeftIcon'; +export { default as ChevronRightIcon } from './ChevronRightIcon'; +export { default as ChevronsCollapseUpRightIcon } from './ChevronsCollapseUpRightIcon'; +export { default as ChevronsExpandUpRightIcon } from './ChevronsExpandUpRightIcon'; +export { default as ChevronUpIcon } from './ChevronUpIcon'; +export { default as ChevronUpToLineIcon } from './ChevronUpToLineIcon'; +export { default as CircleCheckFillIcon } from './CircleCheckFillIcon'; +export { default as CircleCheckIcon } from './CircleCheckIcon'; +export { default as CircleInfoFillIcon } from './CircleInfoFillIcon'; +export { default as CircleInfoIcon } from './CircleInfoIcon'; +export { default as CircleXmarkFillIcon } from './CircleXmarkFillIcon'; +export { default as CircleXmarkIcon } from './CircleXmarkIcon'; +export { default as ClipboardIcon } from './ClipboardIcon'; +export { default as Clock40Icon } from './Clock40Icon'; +export { default as Clock60Icon } from './Clock60Icon'; +export { default as ClockArrowRotateCcwLeftIcon } from './ClockArrowRotateCcwLeftIcon'; +export { default as CodeBlockIcon } from './CodeBlockIcon'; +export { default as CopyIcon } from './CopyIcon'; +export { default as DeleteIcon } from './DeleteIcon'; +export { default as DeleteXmarkIcon } from './DeleteXmarkIcon'; +export { default as DotsHorizontalIcon } from './DotsHorizontalIcon'; +export { default as DotsVerticalIcon } from './DotsVerticalIcon'; +export { default as EqualIcon } from './EqualIcon'; +export { default as ExploreFillIcon } from './ExploreFillIcon'; +export { default as ExploreIcon } from './ExploreIcon'; +export { default as FavoriteFillIcon } from './FavoriteFillIcon'; +export { default as FavoriteIcon } from './FavoriteIcon'; +export { default as FileAddIcon } from './FileAddIcon'; +export { default as FileCheckFillIcon } from './FileCheckFillIcon'; +export { default as FileCheckIcon } from './FileCheckIcon'; +export { default as FileIcon } from './FileIcon'; +export { default as FilterFillIcon } from './FilterFillIcon'; +export { default as FilterIcon } from './FilterIcon'; +export { default as FlagRuIcon } from './FlagRuIcon'; +export { default as FlagUkIcon } from './FlagUkIcon'; +export { default as FolderAddIcon } from './FolderAddIcon'; +export { default as FolderFillIcon } from './FolderFillIcon'; +export { default as FolderIcon } from './FolderIcon'; +export { default as FolderOpenFillIcon } from './FolderOpenFillIcon'; +export { default as FolderOpenIcon } from './FolderOpenIcon'; +export { default as FoldersIcon } from './FoldersIcon'; +export { default as FormatBoldIcon } from './FormatBoldIcon'; +export { default as FormatItalicIcon } from './FormatItalicIcon'; +export { default as FormatListOlIcon } from './FormatListOlIcon'; +export { default as FormatListUlIcon } from './FormatListUlIcon'; +export { default as FormatUndelineIcon } from './FormatUndelineIcon'; +export { default as FullscreenIcon } from './FullscreenIcon'; +export { default as FunnelIcon } from './FunnelIcon'; +export { default as GlobeAddIcon } from './GlobeAddIcon'; +export { default as GlobeIcon } from './GlobeIcon'; +export { default as GoogleIcon } from './GoogleIcon'; +export { default as GripIcon } from './GripIcon'; +export { default as HintAddIcon } from './HintAddIcon'; +export { default as HintIcon } from './HintIcon'; +export { default as HintSlashIcon } from './HintSlashIcon'; +export { default as HomeFillIcon } from './HomeFillIcon'; +export { default as HomeIcon } from './HomeIcon'; +export { default as InterestsFillIcon } from './InterestsFillIcon'; +export { default as InterestsIcon } from './InterestsIcon'; +export { default as LanguageIcon } from './LanguageIcon'; +export { default as LearnIcon } from './LearnIcon'; +export { default as LinkAddIcon } from './LinkAddIcon'; +export { default as LinkIcon } from './LinkIcon'; +export { default as LinkSlashIcon } from './LinkSlashIcon'; +export { default as ListAddIcon } from './ListAddIcon'; +export { default as MagnifierIcon } from './MagnifierIcon'; +export { default as MailAolIcon } from './MailAolIcon'; +export { default as MailGmailIcon } from './MailGmailIcon'; +export { default as MailIcloudIcon } from './MailIcloudIcon'; +export { default as MailMailIcon } from './MailMailIcon'; +export { default as MailOutlookIcon } from './MailOutlookIcon'; +export { default as MailProtonIcon } from './MailProtonIcon'; +export { default as MailYahooIcon } from './MailYahooIcon'; +export { default as MailYandexIcon } from './MailYandexIcon'; +export { default as MinusIcon } from './MinusIcon'; +export { default as MoveToFolderIcon } from './MoveToFolderIcon'; +export { default as NotificationsIcon } from './NotificationsIcon'; +export { default as PencilIcon } from './PencilIcon'; +export { default as PersonAddIcon } from './PersonAddIcon'; +export { default as PersonCheckFillIcon } from './PersonCheckFillIcon'; +export { default as PersonCheckIcon } from './PersonCheckIcon'; +export { default as PersonEditFillIcon } from './PersonEditFillIcon'; +export { default as PersonEditIcon } from './PersonEditIcon'; +export { default as PersonGroupIcon } from './PersonGroupIcon'; +export { default as PersonPinIcon } from './PersonPinIcon'; +export { default as PlusIcon } from './PlusIcon'; +export { default as PreviewIcon } from './PreviewIcon'; +export { default as SetAddIcon } from './SetAddIcon'; +export { default as SetIcon } from './SetIcon'; +export { default as SettingsIcon } from './SettingsIcon'; +export { default as ShuffleIcon } from './ShuffleIcon'; +export { default as SortByAlphaIcon } from './SortByAlphaIcon'; +export { default as SortIcon } from './SortIcon'; +export { default as SpinnerIcon } from './SpinnerIcon'; +export { default as StarIcon } from './StarIcon'; +export { default as TableConvertIcon } from './TableConvertIcon'; +export { default as TagIcon } from './TagIcon'; +export { default as TextFormatIcon } from './TextFormatIcon'; +export { default as VkIcon } from './VkIcon'; +export { default as XmarkIcon } from './XmarkIcon'; +export { default as YandexIcon } from './YandexIcon'; diff --git a/packages/ui/icons/package.json b/packages/ui/icons/package.json index c28d670d..6259fb6d 100644 --- a/packages/ui/icons/package.json +++ b/packages/ui/icons/package.json @@ -1,5 +1,5 @@ { - "name": "@flippo_ui/icons", + "name": "@flippo-ui/icons", "type": "module", "version": "1.0.2", "description": "Pack of Flippo UI icons", @@ -8,15 +8,11 @@ "svg", "react" ], - "module": "dist/index.jsx", - "files": [ - "*.d.ts", - "*.jsx", - "README.md", - "metadata.json", - "package.json", - "svgs" - ], + "exports": { + ".": "./lib/index.tsx", + "./svgs": "./svgs/*.svg", + "./Spinner": "./lib/Spinner.tsx" + }, "scripts": { "build": "node 'scripts/clear.js' && tsc --project './tsconfig.build.json' && tsc --project tsconfig.build.json --declaration --emitDeclarationOnly && pnpm eslint './*.{jsx,d.ts}' --fix --no-ignore", "lint": "eslint --fix", @@ -40,6 +36,7 @@ "@flippo/tsconfig": "workspace:*", "@svgr/core": "catalog:", "@svgr/plugin-jsx": "catalog:", + "@svgr/plugin-svgo": "^8.1.0", "@types/node": "catalog:", "@types/react": "catalog:", "@types/react-dom": "catalog:", diff --git a/packages/ui/icons/scripts/download.js b/packages/ui/icons/scripts/download.js index ba05c8ef..a25ce78b 100644 --- a/packages/ui/icons/scripts/download.js +++ b/packages/ui/icons/scripts/download.js @@ -14,195 +14,195 @@ const FIGMA_IDS = process.env.FIGMA_IDS.split(','); const FIGMA_PAGES = process.env.FIGMA_PAGES.split(','); function parseComponentPropsFromString(props) { - const params = props.split(/\s*,\s?/); + const params = props.split(/\s*,\s?/); - return params.reduce((acc, param) => { - const [key, value] = param.split(/\s*=\s*/); - acc[key] = value; + return params.reduce((acc, param) => { + const [key, value] = param.split(/\s*=\s*/); + acc[key] = value; - return acc; - }, {}); + return acc; + }, {}); } function parseComponentSetName(name) { - const params = name.split('/'); - - if (params.length < 3) - throw new Error(`Icon must have palette, group and name (Monochrome/Logo/yandex): ${name}`); - - return { - name: params.at(-1), - meta: { - palette: params.at(0).toLowerCase(), - group: params.at(1).toLowerCase() - } - }; + const params = name.split('/'); + + if (params.length < 3) + throw new Error(`Icon must have palette, group and name (Monochrome/Logo/yandex): ${name}`); + + return { + name: params.at(-1), + meta: { + palette: params.at(0).toLowerCase(), + group: params.at(1).toLowerCase() + } + }; } function svgTransformer(svg, palette) { - const isMonochrome = palette === 'monochrome'; - - return optimize(svg, { - multipass: true, - plugins: [{ - name: 'preset-default', - params: { - overrides: { - convertColors: { - currentColor: isMonochrome ? IGNORED_COLORS_FOR_SVGO_REGEX : false - }, - removeViewBox: false - } - } - }] - }).data; + const isMonochrome = palette === 'monochrome'; + + return optimize(svg, { + multipass: true, + plugins: [{ + name: 'preset-default', + params: { + overrides: { + convertColors: { + currentColor: isMonochrome ? IGNORED_COLORS_FOR_SVGO_REGEX : false + }, + removeViewBox: false + } + } + }] + }).data; } function createSvgBuilder(metadata) { - return async function svgBuilder([{ children, components: icons }]) { - const targetNodes = targetNodesBFS(FIGMA_IDS, children); - const iconSets = componentSetsDfs(targetNodes); - const iconsById = icons.reduce((acc, icon) => { acc[icon.id] = icon; return acc; }, {}); - const uniqueIcons = new Set(); + return async function svgBuilder([{ children, components: icons }]) { + const targetNodes = targetNodesBFS(FIGMA_IDS, children); + const iconSets = componentSetsDfs(targetNodes); + const iconsById = icons.reduce((acc, icon) => { acc[icon.id] = icon; return acc; }, {}); + const uniqueIcons = new Set(); + + function targetNodesBFS(targetIds, startQueue) { + const queue = Array.from(startQueue); + const resultNodes = []; - function targetNodesBFS(targetIds, startQueue) { - const queue = Array.from(startQueue); - const resultNodes = []; + targetIds = new Set(targetIds.map((id) => id.replace('-', ':'))); - targetIds = new Set(targetIds.map((id) => id.replace('-', ':'))); + while (queue.length > 0 && targetIds.size > 0) { + const node = queue.shift(); - while (queue.length > 0 && targetIds.size > 0) { - const node = queue.shift(); + if (targetIds.has(node.id)) { + resultNodes.push(node); + targetIds.delete(node.id); - if (targetIds.has(node.id)) { - resultNodes.push(node); - targetIds.delete(node.id); + continue; + } - continue; + if (node.children) + queue.push(...node.children); + } + + return resultNodes; } - if (node.children) - queue.push(...node.children); - } + function componentSetsDfs(startStack) { + const stack = Array.from(startStack); + const resultSets = new Set(); - return resultNodes; - } + while (stack.length > 0) { + const node = stack.pop(); - function componentSetsDfs(startStack) { - const stack = Array.from(startStack); - const resultSets = new Set(); + if (node.type === 'COMPONENT_SET') { + resultSets.add(node); - while (stack.length > 0) { - const node = stack.pop(); + continue; + } - if (node.type === 'COMPONENT_SET') { - resultSets.add(node); + if (node.children) { + stack.push(...node.children); + } + } - continue; + return Array.from(resultSets); } - if (node.children) { - stack.push(...node.children); - } - } + console.log(iconSets); - return Array.from(resultSets); - } + for (const iconSet of iconSets) { + const { name, meta } = parseComponentSetName(iconSet.name); - console.log(iconSets); + if (!ICONS_NAME_REGEX.test(name)) + throw new Error(`Invalid icon name: ${name}. Pattern: ${ICONS_NAME_REGEX.source}`); - for (const iconSet of iconSets) { - const { name, meta } = parseComponentSetName(iconSet.name); + if (uniqueIcons.has(name)) { + throw new Error(`Icon has been already added: ${name}`); + } + else { + uniqueIcons.add(name); + } - if (!ICONS_NAME_REGEX.test(name)) - throw new Error(`Invalid icon name: ${name}. Pattern: ${ICONS_NAME_REGEX.source}`); + if (!meta.palette) + throw new Error(`Icon must have palette: ${name}`); - if (uniqueIcons.has(name)) { - throw new Error(`Icon has been already added: ${name}`); - } - else { - uniqueIcons.add(name); - } + if (!meta.group) + throw new Error(`Icon must have group: ${name}`); - if (!meta.palette) - throw new Error(`Icon must have palette: ${name}`); + metadata.info.palettes.add(meta.palette); + metadata.info.groups.add(meta.group); - if (!meta.group) - throw new Error(`Icon must have group: ${name}`); + for (const icon of iconSet.children) { + const props = parseComponentPropsFromString(icon.name); + if (!props.preview) + throw new Error(`Icon has no preview: ${name}`); - metadata.info.palettes.add(meta.palette); - metadata.info.groups.add(meta.group); + if (props.preview === 'true') + continue; - for (const icon of iconSet.children) { - const props = parseComponentPropsFromString(icon.name); - if (!props.preview) - throw new Error(`Icon has no preview: ${name}`); + let svg = iconsById[icon.id].svg; + let svgName = name; - if (props.preview === 'true') - continue; + if (!props.style) + throw new Error(`Icon has no style: ${name}`); - let svg = iconsById[icon.id].svg; - let svgName = name; + if (props.style !== 'regular') + svgName += `_${props.style}`; - if (!props.style) - throw new Error(`Icon has no style: ${name}`); + if (props.animated === 'true') { + if (!isSvg(iconsById[icon.id].description)) + throw new Error(`If icon animated must have in description correct svg: ${name}`); - if (props.style !== 'regular') - svgName += `_${props.style}`; + svg = iconsById[icon.id].description; + } - if (props.animated === 'true') { - if (!isSvg(iconsById[icon.id].description)) - throw new Error(`If icon animated must have in description correct svg: ${name}`); + metadata.icons.push({ + name, + style: props.style, + svgName, + componentName: kebabCaseToCamelCase(svgName), + meta + }); - svg = iconsById[icon.id].description; + const optimizedSvg = svgTransformer(svg, meta.palette); + console.log(path.join(SVGS_DIR, `${svgName}.svg`)); + await fs.writeFile(path.join(SVGS_DIR, `${svgName}.svg`), optimizedSvg); + } } - - metadata.icons.push({ - name, - style: props.style, - svgName, - componentName: kebabCaseToCamelCase(svgName), - meta - }); - - const optimizedSvg = svgTransformer(svg, meta.palette); - console.log(path.join(SVGS_DIR, `${svgName}.svg`)); - await fs.writeFile(path.join(SVGS_DIR, `${svgName}.svg`), optimizedSvg); - } - } - }; + }; } async function download() { - await clearDir(SVGS_DIR); - - const metadata = { - info: { - palettes: new Set(), - groups: new Set() - }, - icons: [] - }; - - await loadComponents({ - token: FIGMA_TOKEN, - fileId: FIGMA_FILE, - ids: FIGMA_IDS, - onlyFromPages: FIGMA_PAGES, - outputters: [createSvgBuilder(metadata)], - filterComponent: (node) => { - if (node.name === 'Divider Horizontal') - console.log(node); - return node.type !== 'INSTANCE'; - } - }); - - metadata.info.palettes = Array.from(metadata.info.palettes); - metadata.info.groups = Array.from(metadata.info.groups); - await fs.writeFile(path.join(process.cwd(), 'metadata.json'), JSON.stringify(metadata, null, 2)); + await clearDir(SVGS_DIR); + + const metadata = { + info: { + palettes: new Set(), + groups: new Set() + }, + icons: [] + }; + + await loadComponents({ + token: FIGMA_TOKEN, + fileId: FIGMA_FILE, + ids: FIGMA_IDS, + onlyFromPages: FIGMA_PAGES, + outputters: [createSvgBuilder(metadata)], + filterComponent: (node) => { + if (node.name === 'Divider Horizontal') + console.log(node); + return node.type !== 'INSTANCE'; + } + }); + + metadata.info.palettes = Array.from(metadata.info.palettes); + metadata.info.groups = Array.from(metadata.info.groups); + await fs.writeFile(path.join(process.cwd(), 'metadata.json'), JSON.stringify(metadata, null, 2)); } download().catch((error) => { - console.error(`Failed to download icons: ${error}`); - process.exit(1); + console.error(`Failed to download icons: ${error}`); + process.exit(1); }); diff --git a/packages/ui/icons/scripts/generateIcons.js b/packages/ui/icons/scripts/generateIcons.js index ca94f126..c074112b 100644 --- a/packages/ui/icons/scripts/generateIcons.js +++ b/packages/ui/icons/scripts/generateIcons.js @@ -6,36 +6,43 @@ import { ICONS_DIR, SVGS_DIR } from './constants.js'; import { clearDir, kebabCaseToCamelCase } from './utils.js'; async function createIndexFile(files) { - const indexFilePath = path.join(ICONS_DIR, 'index.tsx'); - const content = files.map((file) => `export { default as ${file.name} } from './${file.path}';`).join('\n'); + const indexFilePath = path.join(ICONS_DIR, 'index.tsx'); + const content = files.map((file) => `export { default as ${file.name}Icon } from './${file.path}Icon';`).join('\n'); - await fs.writeFile(indexFilePath, content); + await fs.writeFile(indexFilePath, content); } async function generateIcons() { - await clearDir(ICONS_DIR); + await clearDir(ICONS_DIR); - const svgFiles = (await fs.readdir(SVGS_DIR, { recursive: true })).filter((file) => path.extname(file) === '.svg'); + const svgFiles = (await fs.readdir(SVGS_DIR, { recursive: true })).filter((file) => path.extname(file) === '.svg'); - const iconFiles = await Promise.all(svgFiles.map(async (file) => { - const fileMeta = path.parse(file); - const componentName = kebabCaseToCamelCase(fileMeta.name); - const svg = await fs.readFile(path.join(SVGS_DIR, file), 'utf-8'); + const iconFiles = await Promise.all(svgFiles.map(async (file) => { + const fileMeta = path.parse(file); + const componentName = kebabCaseToCamelCase(fileMeta.name); + const svg = await fs.readFile(path.join(SVGS_DIR, file), 'utf-8'); - const iconFilePath = path.join(ICONS_DIR, `${componentName}.tsx`); + const iconFilePath = path.join(ICONS_DIR, `${componentName}Icon.tsx`); - const content = await transform(svg, { typescript: true, plugins: ['@svgr/plugin-jsx'] }, { componentName }); + const content = await transform(svg, { + typescript: true, + plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'], + svgoConfig: { + plugins: ['removeDimensions'], + floatPrecision: 2 + } + }, { componentName }); - await fs.mkdir(path.parse(iconFilePath).dir, { recursive: true }); - await fs.writeFile(iconFilePath, content); + await fs.mkdir(path.parse(iconFilePath).dir, { recursive: true }); + await fs.writeFile(iconFilePath, content); - return { name: componentName, path: componentName }; - })); + return { name: componentName, path: componentName }; + })); - await createIndexFile(iconFiles); + await createIndexFile(iconFiles); } generateIcons().catch((err) => { - console.error(`Failed to generate icons: ${err}`); - process.exit(1); + console.error(`Failed to generate icons: ${err}`); + process.exit(1); }); diff --git a/packages/ui/uikit/flippo/components/.storybook/customTheme.ts b/packages/ui/uikit/flippo/components/.storybook/customTheme.ts new file mode 100644 index 00000000..0b2db119 --- /dev/null +++ b/packages/ui/uikit/flippo/components/.storybook/customTheme.ts @@ -0,0 +1,12 @@ +import { create } from '@storybook/theming'; + +export default create({ + base: 'dark', + + appBg: '#14151a', + appContentBg: '#000000', + appPreviewBg: '#000000', + appBorderRadius: 24, + barBg: '#14151a', + brandTitle: 'Flippo' +}); diff --git a/packages/ui/uikit/flippo/components/.storybook/main.ts b/packages/ui/uikit/flippo/components/.storybook/main.ts new file mode 100644 index 00000000..67e34052 --- /dev/null +++ b/packages/ui/uikit/flippo/components/.storybook/main.ts @@ -0,0 +1,16 @@ +import type { StorybookConfig } from '@storybook/react-vite'; + +const config: StorybookConfig = { + addons: [ + '@storybook/addon-onboarding', + '@storybook/addon-essentials', + '@chromatic-com/storybook', + '@storybook/addon-interactions' + ], + framework: { + name: '@storybook/react-vite', + options: {} + }, + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'] +}; +export default config; diff --git a/packages/ui/uikit/flippo/components/.storybook/manager.ts b/packages/ui/uikit/flippo/components/.storybook/manager.ts new file mode 100644 index 00000000..11c3d5b7 --- /dev/null +++ b/packages/ui/uikit/flippo/components/.storybook/manager.ts @@ -0,0 +1,7 @@ +import { addons } from '@storybook/manager-api'; + +import customTheme from './customTheme'; + +addons.setConfig({ + theme: customTheme +}); diff --git a/packages/ui/uikit/flippo/components/.storybook/preview-head.html b/packages/ui/uikit/flippo/components/.storybook/preview-head.html new file mode 100644 index 00000000..0b793360 --- /dev/null +++ b/packages/ui/uikit/flippo/components/.storybook/preview-head.html @@ -0,0 +1,7 @@ + diff --git a/packages/ui/uikit/flippo/components/.storybook/preview.tsx b/packages/ui/uikit/flippo/components/.storybook/preview.tsx new file mode 100644 index 00000000..13a0d605 --- /dev/null +++ b/packages/ui/uikit/flippo/components/.storybook/preview.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +import type { Preview } from '@storybook/react'; + +import '../src/styles/global.scss'; + +import './storybook.scss'; + +const preview: Preview = { + decorators: (Story) => ( + + + + ), + parameters: { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i + } + }, + layout: 'centered' + }, + tags: ['autodocs'] +}; + +export default preview; diff --git a/packages/ui/uikit/flippo/components/.storybook/storybook.scss b/packages/ui/uikit/flippo/components/.storybook/storybook.scss new file mode 100644 index 00000000..5a8dd189 --- /dev/null +++ b/packages/ui/uikit/flippo/components/.storybook/storybook.scss @@ -0,0 +1,3 @@ +body { + overflow: scroll; +} diff --git a/packages/ui/uikit/flippo/components/eslint.config.js b/packages/ui/uikit/flippo/components/eslint.config.js new file mode 100644 index 00000000..b6f72f18 --- /dev/null +++ b/packages/ui/uikit/flippo/components/eslint.config.js @@ -0,0 +1,75 @@ +import { + createEslintConfig, + general, + overridesStylisticConfig, + overridesTsConfig +} from '@flippo/eslint'; + +export default createEslintConfig( + { + pnpm: true, + react: true, + typescript: { + parserOptions: { + projectService: true, + tsconfigRootDir: import.meta.dirname + }, + overrides: { + ...overridesTsConfig, + 'ts/no-namespace': 'off', + 'ts/prefer-literal-enum-member': 'off', + 'ts/no-unsafe-function-type': 'off' + } + }, + stylistic: { + jsx: true, + semi: true, + overrides: overridesStylisticConfig + }, + jsx: true, + formatters: true, + ...general, + ignores: ['**/*.md/*.ts'] + }, + { + rules: { + 'react-dom/no-flush-sync': 'off', + 'react/no-context-provider': 'off', + 'unused-imports/no-unused-vars': ['warn', { + varsIgnorePattern: '^_', + argsIgnorePattern: '^_', + caughtErrorsIgnorePattern: '^_' + }], + 'node/prefer-global/process': ['error', 'always'], + 'perfectionist/sort-imports': ['error', { + type: 'natural', + order: 'asc', + newlinesBetween: 'always', + internalPattern: ['^~/.+', '^@/.+'], + groups: [ + 'react', + 'builtin', + 'builtin-type', + 'external', + 'external-type', + 'internal', + 'internal-type', + 'parent', + 'parent-type', + 'sibling', + 'sibling-type', + 'unknown', + 'index', + 'index-type', + 'object', + 'type' + ], + tsconfigRootDir: './tsconfig.json', + customGroups: [{ + groupName: 'react', + elementNamePattern: ['^react$', '^react-.+'] + }] + }] + } + } +); diff --git a/packages/ui/uikit/flippo/components/package.json b/packages/ui/uikit/flippo/components/package.json new file mode 100644 index 00000000..6c4ed5ba --- /dev/null +++ b/packages/ui/uikit/flippo/components/package.json @@ -0,0 +1,126 @@ +{ + "name": "@flippo-ui/flippo-components", + "type": "module", + "version": "0.1.0", + "private": false, + "packageManager": "pnpm@10.7.0", + "description": "", + "author": "@BlackPoretsky", + "license": "ISC", + "keywords": [ + "react", + "react-component", + "flippo", + "unstyled", + "a11y" + ], + "exports": { + ".": "./src/index.ts", + "./accordion": "./src/Accordion/index.ts", + "./avatar": "./src/avatar/index.ts", + "./checkbox": "./src/Checkbox/index.ts", + "./checkbox-group": "./src/CheckboxGroup/index.ts", + "./collapsible": "./src/Collapsible/index.ts", + "./context-menu": "./src/ContextMenu/index.ts", + "./dialog": "./src/Dialog/index.ts", + "./direction-provider": "./src/lib/hooks/useDirection.ts", + "./field": "./src/Field/index.ts", + "./fieldset": "./src/Fieldset/index.ts", + "./form": "./src/Form/index.ts", + "./input": "./src/Input/index.ts", + "./menu": "./src/Menu/index.ts", + "./menubar": "./src/Menubar/index.ts", + "./merge-props": "./src/lib/merge.ts", + "./meter": "./src/Meter/index.ts", + "./number-field": "./src/NumberField/index.ts", + "./popover": "./src/Popover/index.ts", + "./progress": "./src/Progress/index.ts", + "./radio": "./src/Radio/index.ts", + "./radio-group": "./src/RadioGroup/index.ts", + "./select": "./src/Select/index.ts", + "./separator": "./src/Separator/index.ts", + "./slider": "./src/Slider/index.ts", + "./switch": "./src/Switch/index.ts", + "./tabs": "./src/Tabs/index.ts", + "./toast": "./src/Toast/index.ts", + "./toggle": "./src/Toggle/index.ts", + "./toggle-group": "./src/ToggleGroup/index.ts", + "./toolbar": "./src/Toolbar/index.ts", + "./tooltip": "./src/Tooltip/index.ts", + "./use-render": "./src/use-render/index.ts", + "./use-button": "./src/use-button/index.ts" + }, + "main": "./src/index.ts", + "module": "./src/index.ts", + "publishConfig": { + "main": "./dist/index.js", + "module": "./dist/index.mjs", + "types": "./dist/index.d.ts", + "exports": { + ".": { + "import": { + "types": "./dist/index.d.mts", + "default": "./dist/index.mjs" + }, + "require": { + "types": "./dist/index.d.ts", + "default": "./dist/index.js" + } + } + } + }, + "files": [ + "README.md", + "dist" + ], + "scripts": { + "dev": "vite build --watch", + "build": "vite build", + "test": "vitest", + "test:ui": "vitest --ui", + "storybook": "storybook dev -p 6006", + "build-storybook": "storybook build" + }, + "dependencies": { + "@flippo-ui/headless-components": "workspace:*", + "@flippo-ui/icons": "workspace:*", + "class-variance-authority": "catalog:" + }, + "devDependencies": { + "@eslint-react/eslint-plugin": "catalog:", + "@flippo/eslint": "workspace:*", + "@flippo/internal-test-utils": "workspace:*", + "@flippo/tsconfig": "workspace:*", + "@storybook/addon-essentials": "catalog:", + "@storybook/addon-interactions": "catalog:", + "@storybook/addon-links": "catalog:", + "@storybook/addon-onboarding": "catalog:", + "@storybook/blocks": "catalog:", + "@storybook/manager-api": "catalog:", + "@storybook/react": "catalog:", + "@storybook/react-vite": "catalog:", + "@storybook/test": "catalog:", + "@storybook/theming": "catalog:", + "@testing-library/jest-dom": "catalog:", + "@testing-library/react": "catalog:", + "@testing-library/user-event": "catalog:", + "@types/node": "catalog:", + "@types/react": "catalog:", + "@types/react-dom": "catalog:", + "@vitejs/plugin-react": "catalog:", + "@vitest/ui": "catalog:", + "eslint": "catalog:", + "eslint-plugin-format": "catalog:", + "eslint-plugin-react-hooks": "catalog:", + "eslint-plugin-react-refresh": "catalog:", + "jsdom": "catalog:", + "react": "catalog:", + "react-dom": "catalog:", + "sass": "catalog:", + "sass-embedded": "catalog:", + "storybook": "catalog:", + "typescript": "catalog:", + "vite": "catalog:", + "vitest": "catalog:" + } +} diff --git a/packages/ui/uikit/flippo/components/src/components/Accordion/index.parts.ts b/packages/ui/uikit/flippo/components/src/components/Accordion/index.parts.ts new file mode 100644 index 00000000..e5d519b9 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Accordion/index.parts.ts @@ -0,0 +1,5 @@ +export { AccordionHeader as Header } from './ui/header/AccordionHeader'; +export { AccordionItem as Item } from './ui/item/AccordionItem'; +export { AccordionPanel as Panel } from './ui/panel/AccordionPanel'; +export { AccordionRoot as Root } from './ui/root/AccordionRoot'; +export { AccordionTrigger as Trigger } from './ui/trigger/AccordionTrigger'; diff --git a/packages/ui/uikit/flippo/components/src/components/Accordion/index.ts b/packages/ui/uikit/flippo/components/src/components/Accordion/index.ts new file mode 100644 index 00000000..bc75beb6 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Accordion/index.ts @@ -0,0 +1 @@ +export * as Accordion from './index.parts'; diff --git a/packages/ui/uikit/flippo/components/src/components/Accordion/story/Accordion.stories.tsx b/packages/ui/uikit/flippo/components/src/components/Accordion/story/Accordion.stories.tsx new file mode 100644 index 00000000..6f0bd147 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Accordion/story/Accordion.stories.tsx @@ -0,0 +1,68 @@ +import React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import { Accordion } from '..'; + +const meta: Meta = { + title: 'Display/Accordion', + component: Accordion.Root +}; + +export default meta; + +type AccordionStory = StoryObj; + +export const Default: AccordionStory = { + render: (args) => ( + + + + + {'What is React?'} + + + + +
+ {'React is a JavaScript library for building user interfaces, '} + {'particularly web applications. It was developed by Facebook '} + {'and is now maintained by Meta and the community.'} +
+ + + + + + + {'What are React components?'} + + + + +
+ {'React components are independent, reusable pieces of UI. '} + {'They accept arbitrary inputs (called "props") and return '} + {'React elements describing what should appear on the screen.'} +
+ + + + + + + {'What is JSX?'} + + + + +
+ {'JSX is a syntax extension for JavaScript that looks similar to XML/HTML. '} + {'It allows you to write HTML-like code in your JavaScript files, '} + {'making it easier to create React components.'} +
+ + + + ) +}; diff --git a/packages/ui/uikit/flippo/components/src/components/Accordion/ui/header/AccordionHeader.module.scss b/packages/ui/uikit/flippo/components/src/components/Accordion/ui/header/AccordionHeader.module.scss new file mode 100644 index 00000000..1615b95a --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Accordion/ui/header/AccordionHeader.module.scss @@ -0,0 +1,5 @@ +@use 'mixins/_common.scss' as common; + +.AccordionHeader { + @include common.reset-appearance; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Accordion/ui/header/AccordionHeader.tsx b/packages/ui/uikit/flippo/components/src/components/Accordion/ui/header/AccordionHeader.tsx new file mode 100644 index 00000000..558ab3cc --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Accordion/ui/header/AccordionHeader.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Accordion as AccordionHeadless } from '@flippo-ui/headless-components/accordion'; +import { cx } from 'class-variance-authority'; + +import styles from './AccordionHeader.module.scss'; + +export function AccordionHeader(props: AccordionHeader.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace AccordionHeader { + export type Props = AccordionHeadless.Header.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Accordion/ui/item/AccordionItem.module.scss b/packages/ui/uikit/flippo/components/src/components/Accordion/ui/item/AccordionItem.module.scss new file mode 100644 index 00000000..a108553c --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Accordion/ui/item/AccordionItem.module.scss @@ -0,0 +1,7 @@ +@use 'mixins/_common.scss' as common; + +.AccordionItem { + @include common.reset-appearance; + + border-bottom: 1px solid var(--f-color-stroke); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Accordion/ui/item/AccordionItem.tsx b/packages/ui/uikit/flippo/components/src/components/Accordion/ui/item/AccordionItem.tsx new file mode 100644 index 00000000..4b2fba2d --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Accordion/ui/item/AccordionItem.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Accordion as AccordionHeadless } from '@flippo-ui/headless-components/accordion'; +import { cx } from 'class-variance-authority'; + +import styles from './AccordionItem.module.scss'; + +export function AccordionItem(props: AccordionItem.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace AccordionItem { + export type Props = AccordionHeadless.Item.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Accordion/ui/panel/AccordionPanel.module.scss b/packages/ui/uikit/flippo/components/src/components/Accordion/ui/panel/AccordionPanel.module.scss new file mode 100644 index 00000000..0e3cf702 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Accordion/ui/panel/AccordionPanel.module.scss @@ -0,0 +1,20 @@ +@use 'mixins/_common.scss' as common; +@use 'mixins/_font.scss' as font; + +.AccordionPanel { + @include common.reset-appearance(); + @include font.body(default); + + height: var(--accordion-panel-height); + overflow: hidden; + color: var(--f-color-text-5); + transition: height 150ms ease-out; + + padding-block: var(--f-spacing-2); + padding-inline: var(--f-spacing-3) var(--f-spacing-1); + + &[data-starting-style], + &[data-ending-style] { + height: 0; + } +} diff --git a/packages/ui/uikit/flippo/components/src/components/Accordion/ui/panel/AccordionPanel.tsx b/packages/ui/uikit/flippo/components/src/components/Accordion/ui/panel/AccordionPanel.tsx new file mode 100644 index 00000000..07adeb15 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Accordion/ui/panel/AccordionPanel.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Accordion as AccordionHeadless } from '@flippo-ui/headless-components/accordion'; +import { cx } from 'class-variance-authority'; + +import styles from './AccordionPanel.module.scss'; + +export function AccordionPanel(props: AccordionPanel.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace AccordionPanel { + export type Props = AccordionHeadless.Panel.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Accordion/ui/root/AccordionRoot.module.scss b/packages/ui/uikit/flippo/components/src/components/Accordion/ui/root/AccordionRoot.module.scss new file mode 100644 index 00000000..1e2b6883 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Accordion/ui/root/AccordionRoot.module.scss @@ -0,0 +1,10 @@ +@use 'mixins/_common.scss' as common; + +.AccordionRoot { + @include common.reset-appearance; + + display: flex; + flex-direction: column; + justify-content: center; + color: var(--f-color-bg-1); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Accordion/ui/root/AccordionRoot.tsx b/packages/ui/uikit/flippo/components/src/components/Accordion/ui/root/AccordionRoot.tsx new file mode 100644 index 00000000..fa98702a --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Accordion/ui/root/AccordionRoot.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Accordion as AccordionHeadless } from '@flippo-ui/headless-components/accordion'; +import { cx } from 'class-variance-authority'; + +import styles from './AccordionRoot.module.scss'; + +export function AccordionRoot(props: AccordionRoot.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace AccordionRoot { + export type Props = AccordionHeadless.Root.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Accordion/ui/trigger/AccordionTrigger.module.scss b/packages/ui/uikit/flippo/components/src/components/Accordion/ui/trigger/AccordionTrigger.module.scss new file mode 100644 index 00000000..87372b63 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Accordion/ui/trigger/AccordionTrigger.module.scss @@ -0,0 +1,47 @@ +@use 'mixins/_common.scss' as common; +@use 'mixins/_font.scss' as font; + +.AccordionTrigger { + @include common.reset-appearance(); + @include font.body(default); + + position: relative; + display: flex; + width: 100%; + gap: var(--f-spacing-4); + align-items: baseline; + justify-content: space-between; + padding-block: var(--f-spacing-2); + padding-inline: var(--f-spacing-3) var(--f-spacing-1); + color: var(--f-color-text-primary); + font-family: inherit; + background: var(--f-color-bg-0); + text-align: left; + + @media (hover: hover) { + &:hover { + background-color: var(--f-color-bg-3); + } + } + + &:focus-visible { + outline: var(--f-spacing-0) solid var(--f-color-brand-light); + z-index: 1; + } +} + +.AccordionTriggerSvg { + @include common.reset-appearance(); + + width: var(--f-spacing-3); + height: var(--f-spacing-3); + color: var(--f-color-text-primary); + + flex-shrink: 0; + margin-right: var(--f-spacing-2); + transition: transform 150ms ease-out; + + [data-panel-open] > & { + transform: rotate(45deg) scale(1.1); + } +} diff --git a/packages/ui/uikit/flippo/components/src/components/Accordion/ui/trigger/AccordionTrigger.tsx b/packages/ui/uikit/flippo/components/src/components/Accordion/ui/trigger/AccordionTrigger.tsx new file mode 100644 index 00000000..d57f5e86 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Accordion/ui/trigger/AccordionTrigger.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +import { Accordion as AccordionHeadless } from '@flippo-ui/headless-components/accordion'; +import { cx } from 'class-variance-authority'; + +import styles from './AccordionTrigger.module.scss'; + +export function AccordionTrigger(props: AccordionTrigger.Props) { + const { className, ...otherProps } = props; + + return ; +} + +AccordionTrigger.Svg = AccordionTriggerSvg; + +export namespace AccordionTrigger { + export type Props = AccordionHeadless.Trigger.Props; +} + +function AccordionTriggerSvg(props: React.SVGProps) { + const { className, ...otherProps } = props; + return ( + + + + ); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Avatar/index.parts.ts b/packages/ui/uikit/flippo/components/src/components/Avatar/index.parts.ts new file mode 100644 index 00000000..841b4489 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Avatar/index.parts.ts @@ -0,0 +1,3 @@ +export { AvatarFallback as Fallback } from './ui/fallback/AvatarFallback'; +export { AvatarImage as Image } from './ui/image/AvatarImage'; +export { AvatarRoot as Root } from './ui/root/AvatarRoot'; diff --git a/packages/ui/uikit/flippo/components/src/components/Avatar/index.ts b/packages/ui/uikit/flippo/components/src/components/Avatar/index.ts new file mode 100644 index 00000000..af3ac6cf --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Avatar/index.ts @@ -0,0 +1 @@ +export * as Avatar from './index.parts'; diff --git a/packages/ui/uikit/flippo/components/src/components/Avatar/story/Avatar.stories.tsx b/packages/ui/uikit/flippo/components/src/components/Avatar/story/Avatar.stories.tsx new file mode 100644 index 00000000..fe0dce3e --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Avatar/story/Avatar.stories.tsx @@ -0,0 +1,23 @@ +import React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import { Avatar } from '..'; + +const meta: Meta = { + title: 'Display/Avatar', + component: Avatar.Root +}; + +export default meta; + +type AvatarStory = StoryObj; + +export const Default: AvatarStory = { + render: (args) => ( + + + {'AB'} + + ) +}; diff --git a/packages/ui/uikit/flippo/components/src/components/Avatar/ui/fallback/AvatarFallback.module.scss b/packages/ui/uikit/flippo/components/src/components/Avatar/ui/fallback/AvatarFallback.module.scss new file mode 100644 index 00000000..de13828b --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Avatar/ui/fallback/AvatarFallback.module.scss @@ -0,0 +1,11 @@ +@use 'mixins/_font.scss' as font; + +.AvatarFallback { + @include font.heading-3('stronger'); + + display: flex; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Avatar/ui/fallback/AvatarFallback.tsx b/packages/ui/uikit/flippo/components/src/components/Avatar/ui/fallback/AvatarFallback.tsx new file mode 100644 index 00000000..4ef92797 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Avatar/ui/fallback/AvatarFallback.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Avatar as AvatarHeadless } from '@flippo-ui/headless-components/avatar'; +import { cx } from 'class-variance-authority'; + +import styles from './AvatarFallback.module.scss'; + +export function AvatarFallback(props: AvatarFallback.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace AvatarFallback { + export type Props = AvatarHeadless.Fallback.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Avatar/ui/image/AvatarImage.module.scss b/packages/ui/uikit/flippo/components/src/components/Avatar/ui/image/AvatarImage.module.scss new file mode 100644 index 00000000..6715ddfd --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Avatar/ui/image/AvatarImage.module.scss @@ -0,0 +1,5 @@ +.AvatarImage { + object-fit: cover; + height: 100%; + width: 100%; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Avatar/ui/image/AvatarImage.tsx b/packages/ui/uikit/flippo/components/src/components/Avatar/ui/image/AvatarImage.tsx new file mode 100644 index 00000000..985c9fcd --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Avatar/ui/image/AvatarImage.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Avatar as AvatarHeadless } from '@flippo-ui/headless-components/avatar'; +import { cx } from 'class-variance-authority'; + +import styles from './AvatarImage.module.scss'; + +export function AvatarImage(props: AvatarImage.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace AvatarImage { + export type Props = AvatarHeadless.Image.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Avatar/ui/root/AvatarRoot.module.scss b/packages/ui/uikit/flippo/components/src/components/Avatar/ui/root/AvatarRoot.module.scss new file mode 100644 index 00000000..f4ed444b --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Avatar/ui/root/AvatarRoot.module.scss @@ -0,0 +1,14 @@ +@use 'mixins/_flex.scss' as flex; + +.AvatarRoot { + @include flex.display(inline-flex, row, center, center); + + vertical-align: middle; + border-radius: 100%; + user-select: none; + color: var(--f-color-text-primary); + background-color: var(--f-color-bg-primary); + overflow: hidden; + width: var(--f-spacing-7); + aspect-ratio: 1; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Avatar/ui/root/AvatarRoot.tsx b/packages/ui/uikit/flippo/components/src/components/Avatar/ui/root/AvatarRoot.tsx new file mode 100644 index 00000000..9547f796 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Avatar/ui/root/AvatarRoot.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Avatar as AvatarHeadless } from '@flippo-ui/headless-components/avatar'; +import { cx } from 'class-variance-authority'; + +import styles from './AvatarRoot.module.scss'; + +export function AvatarRoot(props: AvatarRoot.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace AvatarRoot { + export type Props = AvatarHeadless.Root.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Button/index.ts b/packages/ui/uikit/flippo/components/src/components/Button/index.ts new file mode 100644 index 00000000..2173d951 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Button/index.ts @@ -0,0 +1 @@ +export * from './ui/Button'; diff --git a/packages/ui/uikit/flippo/components/src/components/Button/story/Button.stories.tsx b/packages/ui/uikit/flippo/components/src/components/Button/story/Button.stories.tsx new file mode 100644 index 00000000..ff3c575f --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Button/story/Button.stories.tsx @@ -0,0 +1,200 @@ +import React from 'react'; + +import { PlusIcon } from '@flippo-ui/icons'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import { StoryCombine } from '../..//StoryCombine'; +import { Button } from '../ui/Button'; + +const ARGS: Partial = { + children: 'Button' +}; + +const meta: Meta = { + args: { ...ARGS, size: 'large' }, + argTypes: { + children: { control: 'object', name: 'React.ReactNode' }, + disabled: { control: 'boolean' }, + size: { control: 'select', options: [ + 'x-small', + 'small', + 'medium', + 'large' + ] }, + variant: { control: 'select', options: [ + 'danger', + 'label', + 'outlined', + 'secondary', + 'primary' + ] } + }, + component: Button, + title: 'Input/Button' +}; + +export default meta; + +type ButtonStory = StoryObj; + +export const PrimaryButton: ButtonStory = { + args: { + variant: 'primary' + } +}; + +export const SecondaryButton: ButtonStory = { + args: { + variant: 'secondary' + } +}; + +export const OutlinedButton: ButtonStory = { + args: { + variant: 'outlined' + } +}; + +export const LabelButton: ButtonStory = { + args: { + variant: 'label' + } +}; + +export const DangerButton: ButtonStory = { + args: { + variant: 'danger' + } +}; + +export const ButtonAsLink: ButtonStory = { + args: { + variant: 'primary', + link: true + } +}; + +export const ButtonLoading: ButtonStory = { + args: { + variant: 'primary', + loading: true + } +}; + +type TVariant = Omit, 'components'>; + +const VARIANT_SECONDARY: TVariant = { + name: 'Secondary', + variantArgs: { + variant: 'secondary' + } +}; + +const VARIANT_OUTLINED: TVariant = { + name: 'Outlined', + variantArgs: { + variant: 'outlined' + } +}; + +const VARIANT_LABEL: TVariant = { + name: 'Label', + variantArgs: { + variant: 'label' + } +}; + +const VARIANT_PRIMARY: TVariant = { + name: 'Primary', + variantArgs: { + variant: 'primary' + } +}; + +const VARIANT_DANGER: TVariant = { + name: 'Danger', + variantArgs: { + variant: 'danger' + } +}; + +const CHILDREN = 'Button'; +const CHILDREN_WITH_ICON = ( + + {'Button'} + + +); + +const COMPONENTS: Partial[] = [ + { children: CHILDREN }, + { children: CHILDREN_WITH_ICON }, + { icon: true, children: }, + { disabled: true, children: CHILDREN }, + { disabled: true, children: CHILDREN_WITH_ICON }, + { disabled: true, icon: true, children: } +]; + +const VARIANTS = [ + { + components: COMPONENTS, + ...VARIANT_PRIMARY + }, + { + components: COMPONENTS, + ...VARIANT_SECONDARY + }, + { + components: COMPONENTS, + ...VARIANT_OUTLINED + }, + { + components: COMPONENTS, + ...VARIANT_LABEL + }, + { + components: COMPONENTS, + ...VARIANT_DANGER + } +]; + +const GROUPS: StoryCombine.Props = { + args: ARGS, + // @ts-expect-error reason : button have oveloaded props + component: Button, + groups: [ + { + groupArgs: { + size: 'large' + }, + name: 'Large', + variants: VARIANTS + }, + { + groupArgs: { + size: 'medium' + }, + name: 'Medium', + variants: VARIANTS + }, + { + groupArgs: { + size: 'small' + }, + name: 'Small', + variants: VARIANTS + }, + { + groupArgs: { + size: 'x-small' + }, + name: 'X-Small', + variants: VARIANTS + } + ] +}; + +export const ButtonStoryCombine: ButtonStory = { + render: () => +}; diff --git a/packages/ui/uikit/flippo/components/src/components/Button/ui/Button.module.scss b/packages/ui/uikit/flippo/components/src/components/Button/ui/Button.module.scss new file mode 100644 index 00000000..1c898c07 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Button/ui/Button.module.scss @@ -0,0 +1,229 @@ +@use 'mixins/_flex.scss' as flex; +@use 'mixins/_font.scss' as font; +@use 'mixins/_corners.scss' as corners; + +/* +* $size: large | small +* $bh - button height +* $padding - button padding +* $gap - button gap +* $iconSize - icon size +* $iconPadding - icon padding +* $iconSizeIconButton - icon size for icon button +*/ +@mixin sizeButton($size, $bh, $padding, $gap, $iconSize) { + padding: $padding; + height: $bh; + min-width: $bh; + + gap: $gap; + + @if $size == 'large' { + @include font.body('stronger'); + } @else if $size == 'medium' { + @include font.body('default'); + } @else if $size == 'small' { + @include font.bodyMinus('default'); + } @else if $size == 'x-small' { + @include font.label('default'); + } + + svg { + width: $iconSize; + aspect-ratio: 1; + } +} + +/* +* $iconPadding - icon padding +* $iconSizeIconButton - icon size for icon button +*/ +@mixin sizeIconButton($iconPadding, $iconSizeIconButton) { + padding: $iconPadding; + + svg { + width: $iconSizeIconButton; + aspect-ratio: 1; + } +} + +/* + * $state: hover | focus-within | active | disabled + * $bg - background color + * $color - text color + * $ow - outline width + * $oc - outline color +*/ +$ow: 1.5px; +@mixin stateButton($state, $bg: null, $color: null, $oc: null) { + &#{$state} { + @if $bg { + background-color: $bg; + } + + @if $color { + color: $color; + } + + @if $oc { + outline: $ow solid $oc; + } + } +} + +.Button { + border-radius: var(--f-border-radius-button); + cursor: pointer; + + transition: 0.3s ease; + + fill: currentColor; + + @include corners.corners((&, '::before', '::after'), var(--f-spacing-3)); + + @include flex.display(inline-flex, row, center, center, var(--f-spacing-2)); + width: 100%; + + svg { + flex-shrink: 0; + } + + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + + span { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + &:disabled, + &[data-disabled] { + cursor: not-allowed; + } +} + +.loading { + cursor: not-allowed; + pointer-events: none; +} + +.link { + cursor: pointer; +} + +.large { + @include sizeButton( + 'large', + var(--f-spacing-14), + var(--f-spacing-4) var(--f-spacing-6), + calc(var(--f-spacing-5) / 2), + var(--f-spacing-6) + ); +} + +.medium { + @include sizeButton( + 'large', + var(--f-spacing-12), + calc(var(--f-spacing-4) / 2) var(--f-spacing-5), + calc(var(--f-spacing-5) / 2), + var(--f-spacing-6) + ); +} + +.small { + @include sizeButton( + 'small', + var(--f-spacing-10), + calc(var(--f-spacing-4) / 2) calc(var(--f-spacing-9) / 2), + calc(var(--f-spacing-4) / 2), + var(--f-spacing-5) + ); +} + +.x-small { + @include sizeButton( + 'x-small', + var(--f-spacing-5), + var(--f-spacing-0) var(--f-spacing-2), + var(--f-spacing-1), + calc(var(--f-spacing-9) / 2) + ); +} + +.icon-large { + @include sizeIconButton(var(--f-spacing-3), var(--f-spacing-8)); +} + +.icon-medium { + @include sizeIconButton(var(--f-spacing-2), var(--f-spacing-6)); +} + +.icon-small { + @include sizeIconButton(var(--f-spacing-2), var(--f-spacing-6)); +} + +.icon-x-small { + @include sizeIconButton(0, var(--f-spacing-5)); +} + +.primary { + background-color: var(--f-color-brand); + color: var(--f-color-text-white); + + @include stateButton(':hover', var(--f-color-brand-hover)); + @include stateButton(':active', var(--f-color-brand), var(--f-color-brand-light-hover)); + @include stateButton(':focus-visible', $oc: var(--f-color-text-primary)); + @include stateButton(':disabled', var(--f-color-bg-2), var(--f-color-text-disabled)); + @include stateButton('[data-disabled]', var(--f-color-bg-2), var(--f-color-text-disabled)); +} + +.secondary { + background-color: var(--f-color-bg-3); + color: var(--f-color-text-2); + + @include stateButton(':hover', var(--f-color-bg-3-hover), var(--f-color-text-white)); + @include stateButton(':active', var(--f-color-bg-3), var(--f-color-text-2)); + @include stateButton(':focus-visible', $oc: var(--f-color-text-primary)); + @include stateButton(':disabled', var(--f-color-bg-2), var(--f-color-text-disabled)); + @include stateButton('[data-disabled]', var(--f-color-bg-2), var(--f-color-text-disabled)); +} + +.outlined, +.label, +.danger { + background-color: transparent; +} + +.outlined { + outline: $ow solid var(--f-color-stroke); + color: var(--f-color-text-3); + + @include stateButton(':hover', $color: var(--f-color-text-white), $oc: var(--f-color-stroke-hover)); + @include stateButton(':active', $color: var(--f-color-text-3), $oc: var(--f-color-stroke)); + @include stateButton(':focus-visible', $color: var(--f-color-text-3), $oc: var(--f-color-brand-light)); + @include stateButton(':disabled', $color: var(--f-color-text-disabled), $oc: var(--f-color-stroke-subtle)); + @include stateButton('[data-disabled]', $color: var(--f-color-text-disabled), $oc: var(--f-color-stroke-subtle)); +} + +.label { + color: var(--f-color-text-4); + + @include stateButton(':hover', var(--f-color-bg-2-hover), var(--f-color-text-white)); + @include stateButton(':active', var(--f-color-bg-2), var(--f-color-text-4)); + @include stateButton(':focus-visible', $color: var(--f-color-text-3), $oc: var(--f-color-brand-light)); + @include stateButton(':disabled', $color: var(--f-color-text-disabled)); + @include stateButton('[data-disabled]', $color: var(--f-color-text-disabled)); +} + +.danger { + color: var(--f-color-error); + + @include stateButton(':hover', var(--f-color-error-desaturated), var(--f-color-error-hover)); + @include stateButton(':active', var(--f-color-bg-2-hover), var(--f-color-error)); + @include stateButton(':focus-visible', $color: var(--f-color-text-3), $oc: var(--f-color-brand-light)); + @include stateButton(':disabled', $color: var(--f-color-text-disabled)); + @include stateButton('[data-disabled]', $color: var(--f-color-text-disabled)); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Button/ui/Button.tsx b/packages/ui/uikit/flippo/components/src/components/Button/ui/Button.tsx new file mode 100644 index 00000000..503e46ff --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Button/ui/Button.tsx @@ -0,0 +1,161 @@ +import React from 'react'; + +import { useButton } from '@flippo-ui/headless-components/use-button'; +import { useRender } from '@flippo-ui/headless-components/use-render'; +import { SpinnerIcon } from '@flippo-ui/icons'; +import { cva } from 'class-variance-authority'; + +import type { VariantProps } from 'class-variance-authority'; + +import styles from './Button.module.scss'; + +const ButtonVariants = cva(styles.Button, { + variants: { + variant: { + primary: styles.primary, + secondary: styles.secondary, + outlined: styles.outlined, + label: styles.label, + danger: styles.danger + }, + size: { + 'x-small': styles['x-small'], + 'small': styles.small, + 'medium': styles.medium, + 'large': styles.large + }, + corners: { + 'clear': styles['corners-clear-clear'], + 'circle': styles['corners-circle-circle'], + 'round-clear': styles['corners-round-clear'], + 'clear-round': styles['corners-clear-round'], + 'round-circle': styles['corners-round-circle'], + 'clear-circle': styles['corners-clear-circle'] + }, + loading: { + true: styles.loading, + false: false + }, + icon: { + true: styles.icon, + false: false + }, + link: { + true: styles.link, + false: false + } + }, + compoundVariants: [ + { + size: 'x-small', + icon: true, + class: styles['icon-x-small'] + }, + { + size: 'small', + icon: true, + class: styles['icon-small'] + }, + { + size: 'medium', + icon: true, + class: styles['icon-medium'] + }, + { + size: 'large', + icon: true, + class: styles['icon-large'] + } + ], + defaultVariants: { + variant: 'primary', + size: 'medium' + } +}); + +// Overloaded function signatures for strict typing +export function Button(props: Button.LinkElementProps): React.JSX.Element; +export function Button(props: Button.ButtonElementProps): React.JSX.Element; +export function Button(props: Button.Props): React.JSX.Element { + const { + ref, + loading = false, + loader = , + children, + className, + variant = 'primary', + size = 'medium', + corners = 'circle', + icon = false, + ...otherProps + } = props; + + // Автоматическое определение типа по наличию href + const isLink = 'href' in props && props.href != null; + + // Type guard для определения типа пропов + const disabled = !isLink && 'disabled' in props ? props.disabled : false; + + const { getButtonProps, buttonRef } = useButton({ + native: !isLink, + disabled: disabled || false + }); + + // Применяем стили через CVA + const buttonClassName = ButtonVariants({ + variant, + size, + corners, + loading, + icon, + link: isLink, + className + }); + + // Определяем правильный элемент для рендера + const Tag = isLink + ? 'a' + : 'button'; + + const element = useRender({ + defaultTagName: Tag, + ref: [buttonRef, ref], + props: [getButtonProps(otherProps), { className: buttonClassName, children: ( + + {children} + {loading && loader} + + ) }] + }); + + return element; +} + +export namespace Button { + /** + * Базовые пропы для Button/Link компонента + */ + type BaseButtonProps = { + loader?: React.ReactNode; + children?: React.ReactNode; + asChild?: boolean; + } & VariantProps; + + // Типы для кнопки (с disabled, без href/target/rel) + export type ButtonElementProps = BaseButtonProps + & Omit, 'type'> & { + href?: never; + target?: never; + rel?: never; + }; + + // Типы для ссылки (с href, target, rel, без disabled) + export type LinkElementProps = BaseButtonProps + & Omit, 'type'> & { + href: string; + disabled?: never; + }; + + // Discriminated Union - автоматическое определение по наличию href + export type Props = ButtonElementProps | LinkElementProps; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Checkbox/index.parts.ts b/packages/ui/uikit/flippo/components/src/components/Checkbox/index.parts.ts new file mode 100644 index 00000000..e5144b6f --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Checkbox/index.parts.ts @@ -0,0 +1,2 @@ +export { CheckboxIndicator as Indicator } from './ui/indicator/CheckboxIndicator'; +export { CheckboxRoot as Root } from './ui/root/CheckboxRoot'; diff --git a/packages/ui/uikit/flippo/components/src/components/Checkbox/index.ts b/packages/ui/uikit/flippo/components/src/components/Checkbox/index.ts new file mode 100644 index 00000000..4e96104e --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Checkbox/index.ts @@ -0,0 +1 @@ +export * as Checkbox from './index.parts'; diff --git a/packages/ui/uikit/flippo/components/src/components/Checkbox/story/Checkbox.stories.tsx b/packages/ui/uikit/flippo/components/src/components/Checkbox/story/Checkbox.stories.tsx new file mode 100644 index 00000000..e5c93acd --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Checkbox/story/Checkbox.stories.tsx @@ -0,0 +1,24 @@ +import React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import { Checkbox } from '..'; + +const meta: Meta = { + title: 'Input/Checkbox', + component: Checkbox.Root +}; + +export default meta; + +type CheckboxStory = StoryObj; + +export const Default: CheckboxStory = { + render: (args) => ( + + + + + + ) +}; diff --git a/packages/ui/uikit/flippo/components/src/components/Checkbox/ui/indicator/CheckboxIndicator.module.scss b/packages/ui/uikit/flippo/components/src/components/Checkbox/ui/indicator/CheckboxIndicator.module.scss new file mode 100644 index 00000000..2c97f266 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Checkbox/ui/indicator/CheckboxIndicator.module.scss @@ -0,0 +1,17 @@ +.CheckboxIndicator { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + color: var(--f-color-neutral-white); + + &[data-unchecked] { + display: none; + } +} + +.CheckIcon { + width: var(--f-spacing-3); + height: var(--f-spacing-3); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Checkbox/ui/indicator/CheckboxIndicator.tsx b/packages/ui/uikit/flippo/components/src/components/Checkbox/ui/indicator/CheckboxIndicator.tsx new file mode 100644 index 00000000..a64ea1c4 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Checkbox/ui/indicator/CheckboxIndicator.tsx @@ -0,0 +1,28 @@ +import React from 'react'; + +import { Checkbox as CheckboxHeadless } from '@flippo-ui/headless-components/checkbox'; +import { cx } from 'class-variance-authority'; + +import styles from './CheckboxIndicator.module.scss'; + +export function CheckboxIndicator(props: CheckboxIndicator.Props) { + const { className, ...otherProps } = props; + + return ( + + ); +} + +CheckboxIndicator.Svg = CheckSvg; + +export namespace CheckboxIndicator { + export type Props = CheckboxHeadless.Indicator.Props; +} + +function CheckSvg() { + return ( + + + + ); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Checkbox/ui/root/CheckboxRoot.module.scss b/packages/ui/uikit/flippo/components/src/components/Checkbox/ui/root/CheckboxRoot.module.scss new file mode 100644 index 00000000..0e5e37f5 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Checkbox/ui/root/CheckboxRoot.module.scss @@ -0,0 +1,55 @@ +.CheckboxRoot { + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + outline: 0; + padding: 0; + margin: 0; + border: none; + + width: var(--f-spacing-5); + aspect-ratio: 1; + + border-radius: var(--f-spacing-1); + background-color: transparent; + + cursor: pointer; + transition: all 0.2s ease; + + &:focus-visible { + outline: 2px solid var(--f-color-brand-light); + outline-offset: 2px; + } + + &[data-unchecked] { + border: var(--f-spacing-0) solid var(--f-color-stroke-hover); + background-color: transparent; + + &:hover { + border-color: var(--f-color-text-2); + } + } + + &[data-checked] { + background-color: var(--f-color-brand-hover); + border-color: var(--f-color-brand-hover); + + &:hover { + background-color: var(--f-color-brand-light); + border-color: var(--f-color-brand-light); + } + } + + &[data-disabled] { + cursor: default; + + &[data-unchecked] { + border: var(--f-spacing-0) solid var(--f-color-stroke-muted); + } + + &[data-checked] { + border-color: var(--f-color-brand-disabled); + } + } +} diff --git a/packages/ui/uikit/flippo/components/src/components/Checkbox/ui/root/CheckboxRoot.tsx b/packages/ui/uikit/flippo/components/src/components/Checkbox/ui/root/CheckboxRoot.tsx new file mode 100644 index 00000000..95d1d5b0 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Checkbox/ui/root/CheckboxRoot.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Checkbox as CheckboxHeadless } from '@flippo-ui/headless-components/checkbox'; +import { cx } from 'class-variance-authority'; + +import styles from './CheckboxRoot.module.scss'; + +export function CheckboxRoot(props: CheckboxRoot.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace CheckboxRoot { + export type Props = CheckboxHeadless.Root.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/CheckboxGroup/index.ts b/packages/ui/uikit/flippo/components/src/components/CheckboxGroup/index.ts new file mode 100644 index 00000000..80c23eca --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/CheckboxGroup/index.ts @@ -0,0 +1 @@ +export { CheckboxGroup } from './ui/CheckboxGroup'; diff --git a/packages/ui/uikit/flippo/components/src/components/CheckboxGroup/story/CheckboxGroup.stories.tsx b/packages/ui/uikit/flippo/components/src/components/CheckboxGroup/story/CheckboxGroup.stories.tsx new file mode 100644 index 00000000..159a66b7 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/CheckboxGroup/story/CheckboxGroup.stories.tsx @@ -0,0 +1,64 @@ +import React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import { CheckboxGroup } from '..'; +import { Checkbox } from '../../Checkbox'; + +const meta: Meta = { + title: 'Input/CheckboxGroup', + component: CheckboxGroup +}; + +export default meta; + +type CheckboxGroupStory = StoryObj; + +export const Default: CheckboxGroupStory = { + render: (args) => ( + + + + + + ) +}; diff --git a/packages/ui/uikit/flippo/components/src/components/CheckboxGroup/ui/CheckboxGroup.module.scss b/packages/ui/uikit/flippo/components/src/components/CheckboxGroup/ui/CheckboxGroup.module.scss new file mode 100644 index 00000000..effa37b2 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/CheckboxGroup/ui/CheckboxGroup.module.scss @@ -0,0 +1,5 @@ +@use 'mixins/_flex' as flex; + +.CheckboxGroup { + @include flex.display(flex, column, null, null, var(--f-spacing-2)); +} diff --git a/packages/ui/uikit/flippo/components/src/components/CheckboxGroup/ui/CheckboxGroup.tsx b/packages/ui/uikit/flippo/components/src/components/CheckboxGroup/ui/CheckboxGroup.tsx new file mode 100644 index 00000000..8d6bff96 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/CheckboxGroup/ui/CheckboxGroup.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +import { CheckboxGroup as CheckboxGroupHeadless } from '@flippo-ui/headless-components/checkbox-group'; +import { cx } from 'class-variance-authority'; + +import styles from './CheckboxGroup.module.scss'; + +export function CheckboxGroup(props: CheckboxGroup.Props) { + const { + className, + ...otherProps + } = props; + + return ; +} + +export namespace CheckboxGroup { + export type Props = CheckboxGroupHeadless.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Collapsible/index.parts.ts b/packages/ui/uikit/flippo/components/src/components/Collapsible/index.parts.ts new file mode 100644 index 00000000..7dbcc202 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Collapsible/index.parts.ts @@ -0,0 +1,3 @@ +export { CollapsiblePanel as Panel } from './ui/panel/CollapsiblePanel'; +export { CollapsibleRoot as Root } from './ui/root/CollapsibleRoot'; +export { CollapsibleTrigger as Trigger } from './ui/trigger/CollapsibleTrigger'; diff --git a/packages/ui/uikit/flippo/components/src/components/Collapsible/index.ts b/packages/ui/uikit/flippo/components/src/components/Collapsible/index.ts new file mode 100644 index 00000000..6d2cba0c --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Collapsible/index.ts @@ -0,0 +1 @@ +export * as Collapsible from './index.parts'; diff --git a/packages/ui/uikit/flippo/components/src/components/Collapsible/story/Collapsible.stories.tsx b/packages/ui/uikit/flippo/components/src/components/Collapsible/story/Collapsible.stories.tsx new file mode 100644 index 00000000..ec94e515 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Collapsible/story/Collapsible.stories.tsx @@ -0,0 +1,34 @@ +import React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import { Collapsible } from '..'; + +const meta: Meta = { + title: 'Display/Collapsible', + component: Collapsible.Root +}; + +export default meta; + +type CollapsibleStory = StoryObj; + +export const Default: CollapsibleStory = { + render: (args) => ( + + + {'Toggle Content'} + + + +
+

{'This content can be collapsed and expanded.'}

+

+ {'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '} + {'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'} +

+
+ + + ) +}; diff --git a/packages/ui/uikit/flippo/components/src/components/Collapsible/ui/panel/CollapsiblePanel.module.scss b/packages/ui/uikit/flippo/components/src/components/Collapsible/ui/panel/CollapsiblePanel.module.scss new file mode 100644 index 00000000..5cd72b7e --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Collapsible/ui/panel/CollapsiblePanel.module.scss @@ -0,0 +1,19 @@ +@use 'mixins/_common.scss' as common; +@use 'mixins/_font.scss' as font; + +.CollapsiblePanel { + @include common.reset-appearance(); + @include font.body(weaker); + + display: flex; + height: var(--collapsible-panel-height); + flex-direction: column; + justify-content: end; + overflow: hidden; + transition: all 150ms ease-out; + + &[data-starting-style], + &[data-ending-style] { + height: 0; + } +} diff --git a/packages/ui/uikit/flippo/components/src/components/Collapsible/ui/panel/CollapsiblePanel.tsx b/packages/ui/uikit/flippo/components/src/components/Collapsible/ui/panel/CollapsiblePanel.tsx new file mode 100644 index 00000000..07623043 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Collapsible/ui/panel/CollapsiblePanel.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Collapsible as CollapsibleHeadless } from '@flippo-ui/headless-components/collapsible'; +import { cx } from 'class-variance-authority'; + +import styles from './CollapsiblePanel.module.scss'; + +export function CollapsiblePanel(props: CollapsiblePanel.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace CollapsiblePanel { + export type Props = CollapsibleHeadless.Panel.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Collapsible/ui/root/CollapsibleRoot.module.scss b/packages/ui/uikit/flippo/components/src/components/Collapsible/ui/root/CollapsibleRoot.module.scss new file mode 100644 index 00000000..8b834b7d --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Collapsible/ui/root/CollapsibleRoot.module.scss @@ -0,0 +1,10 @@ +@use 'mixins/_common.scss' as common; + +.CollapsibleRoot { + @include common.reset-appearance(); + + display: flex; + flex-direction: column; + justify-content: center; + color: var(--f-color-text-primary); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Collapsible/ui/root/CollapsibleRoot.tsx b/packages/ui/uikit/flippo/components/src/components/Collapsible/ui/root/CollapsibleRoot.tsx new file mode 100644 index 00000000..748fbc0e --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Collapsible/ui/root/CollapsibleRoot.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Collapsible as CollapsibleHeadless } from '@flippo-ui/headless-components/collapsible'; +import { cx } from 'class-variance-authority'; + +import styles from './CollapsibleRoot.module.scss'; + +export function CollapsibleRoot(props: CollapsibleRoot.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace CollapsibleRoot { + export type Props = CollapsibleHeadless.Root.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Collapsible/ui/trigger/CollapsibleTrigger.module.scss b/packages/ui/uikit/flippo/components/src/components/Collapsible/ui/trigger/CollapsibleTrigger.module.scss new file mode 100644 index 00000000..78cdc47e --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Collapsible/ui/trigger/CollapsibleTrigger.module.scss @@ -0,0 +1,47 @@ +@use 'mixins/_common.scss' as common; +@use 'mixins/_font.scss' as font; + +.CollapsibleTrigger { + @include common.reset-appearance; + @include font.bodyMinus(weaker); + + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--f-spacing-2); + padding: var(--f-spacing-1) var(--f-spacing-2); + border-radius: var(--f-spacing-1); + background-color: var(--f-color-bg-0); + color: var(--f-color-text-primary); + font-family: inherit; + + @media (hover: hover) { + &:hover { + background-color: var(--f-color-bg-3); + } + } + + &:active { + background-color: var(--f-color-bg-3); + } + + &:focus-visible { + outline: var(--f-spacing-0) solid var(--f-color-brand-light); + } +} + +.CollapsibleTriggerSvg { + @include common.reset-appearance(); + + width: var(--f-spacing-3); + height: var(--f-spacing-3); + color: var(--f-color-text-primary); + + flex-shrink: 0; + margin-right: var(--f-spacing-2); + transition: transform 150ms ease-out; + + [data-panel-open] > & { + transform: rotate(90deg); + } +} diff --git a/packages/ui/uikit/flippo/components/src/components/Collapsible/ui/trigger/CollapsibleTrigger.tsx b/packages/ui/uikit/flippo/components/src/components/Collapsible/ui/trigger/CollapsibleTrigger.tsx new file mode 100644 index 00000000..1413b712 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Collapsible/ui/trigger/CollapsibleTrigger.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +import { Collapsible as CollapsibleHeadless } from '@flippo-ui/headless-components/collapsible'; +import { cx } from 'class-variance-authority'; + +import styles from './CollapsibleTrigger.module.scss'; + +export function CollapsibleTrigger(props: CollapsibleTrigger.Props) { + const { className, ...otherProps } = props; + + return ; +} + +CollapsibleTrigger.Svg = CollapsibleTriggerSvg; + +export namespace CollapsibleTrigger { + export type Props = CollapsibleHeadless.Trigger.Props; +} + +function CollapsibleTriggerSvg(props: React.SVGProps) { + const { className, ...otherProps } = props; + return ( + + + + ); +} diff --git a/packages/ui/uikit/flippo/components/src/components/ContextMenu/index.parts.ts b/packages/ui/uikit/flippo/components/src/components/ContextMenu/index.parts.ts new file mode 100644 index 00000000..828d38f1 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/ContextMenu/index.parts.ts @@ -0,0 +1,23 @@ +// Re-export Menu components for ContextMenu +export { MenuArrow as Arrow } from '../Menu/ui/arrow/MenuArrow'; +export { MenuBackdrop as Backdrop } from '../Menu/ui/backdrop/MenuBackdrop'; +export { MenuCheckboxItemIndicator as CheckboxItemIndicator } from '../Menu/ui/checkbox-item-indicator/MenuCheckboxItemIndicator'; +export { MenuCheckboxItem as CheckboxItem } from '../Menu/ui/checkbox-item/MenuCheckboxItem'; +export { MenuGroupLabel as GroupLabel } from '../Menu/ui/group-label/MenuGroupLabel'; +export { MenuGroup as Group } from '../Menu/ui/group/MenuGroup'; +export { MenuItem as Item } from '../Menu/ui/item/MenuItem'; +export { MenuPopup as Popup } from '../Menu/ui/popup/MenuPopup'; +export { MenuPortal as Portal } from '../Menu/ui/portal/MenuPortal'; +export { MenuPositioner as Positioner } from '../Menu/ui/positioner/MenuPositioner'; +export { MenuRadioGroup as RadioGroup } from '../Menu/ui/radio-group/MenuRadioGroup'; +export { MenuRadioItemIndicator as RadioItemIndicator } from '../Menu/ui/radio-item-indicator/MenuRadioItemIndicator'; +export { MenuRadioItem as RadioItem } from '../Menu/ui/radio-item/MenuRadioItem'; +export { MenuSubmenuRoot as SubmenuRoot } from '../Menu/ui/submenu-root/MenuSubmenuRoot'; +export { MenuSubmenuTrigger as SubmenuTrigger } from '../Menu/ui/submenu-trigger/MenuSubmenuTrigger'; + +// Import Separator from another component +export { Separator } from '../Separator'; + +// ContextMenu specific components +export { ContextMenuRoot as Root } from './ui/root/ContextMenuRoot'; +export { ContextMenuTrigger as Trigger } from './ui/trigger/ContextMenuTrigger'; diff --git a/packages/ui/uikit/flippo/components/src/components/ContextMenu/index.ts b/packages/ui/uikit/flippo/components/src/components/ContextMenu/index.ts new file mode 100644 index 00000000..2e7b002d --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/ContextMenu/index.ts @@ -0,0 +1 @@ +export * as ContextMenu from './index.parts'; diff --git a/packages/ui/uikit/flippo/components/src/components/ContextMenu/story/ContextMenu.stories.tsx b/packages/ui/uikit/flippo/components/src/components/ContextMenu/story/ContextMenu.stories.tsx new file mode 100644 index 00000000..bb7d9906 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/ContextMenu/story/ContextMenu.stories.tsx @@ -0,0 +1,51 @@ +import React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import { ContextMenu } from '../index'; + +const meta: Meta = { + title: 'Overlay/ContextMenu', + component: ContextMenu.Root +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + +
+ {'Right click me'} +
+ + + + + + + {'Cut'} + + + {'Copy'} + + + {'Paste'} + + + + {'Delete'} + + + + + + ) +}; diff --git a/packages/ui/uikit/flippo/components/src/components/ContextMenu/ui/root/ContextMenuRoot.tsx b/packages/ui/uikit/flippo/components/src/components/ContextMenu/ui/root/ContextMenuRoot.tsx new file mode 100644 index 00000000..3d4c76a7 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/ContextMenu/ui/root/ContextMenuRoot.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +import { ContextMenu as ContextMenuHeadless } from '@flippo-ui/headless-components/context-menu'; + +export function ContextMenuRoot(props: ContextMenuRoot.Props) { + return ; +} + +export namespace ContextMenuRoot { + export type Props = ContextMenuHeadless.Root.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/ContextMenu/ui/trigger/ContextMenuTrigger.tsx b/packages/ui/uikit/flippo/components/src/components/ContextMenu/ui/trigger/ContextMenuTrigger.tsx new file mode 100644 index 00000000..aaf9f439 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/ContextMenu/ui/trigger/ContextMenuTrigger.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +import { ContextMenu as ContextMenuHeadless } from '@flippo-ui/headless-components/context-menu'; + +export function ContextMenuTrigger(props: ContextMenuTrigger.Props) { + return ; +} + +export namespace ContextMenuTrigger { + export type Props = ContextMenuHeadless.Trigger.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Dialog/index.parts.ts b/packages/ui/uikit/flippo/components/src/components/Dialog/index.parts.ts new file mode 100644 index 00000000..bfedba89 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Dialog/index.parts.ts @@ -0,0 +1,8 @@ +export { DialogBackdrop as Backdrop } from './ui/backdrop/DialogBackdrop'; +export { DialogClose as Close } from './ui/close/DialogClose'; +export { DialogDescription as Description } from './ui/description/DialogDescription'; +export { DialogPopup as Popup } from './ui/popup/DialogPopup'; +export { DialogPortal as Portal } from './ui/portal/DialogPortal'; +export { DialogRoot as Root } from './ui/root/DialogRoot'; +export { DialogTitle as Title } from './ui/title/DialogTitle'; +export { DialogTrigger as Trigger } from './ui/trigger/DialogTrigger'; diff --git a/packages/ui/uikit/flippo/components/src/components/Dialog/index.ts b/packages/ui/uikit/flippo/components/src/components/Dialog/index.ts new file mode 100644 index 00000000..823c17d2 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Dialog/index.ts @@ -0,0 +1 @@ +export * as Dialog from './index.parts'; diff --git a/packages/ui/uikit/flippo/components/src/components/Dialog/story/Dialog.stories.tsx b/packages/ui/uikit/flippo/components/src/components/Dialog/story/Dialog.stories.tsx new file mode 100644 index 00000000..f2b10b5a --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Dialog/story/Dialog.stories.tsx @@ -0,0 +1,74 @@ +import React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import { Dialog } from '..'; +import { Button } from '../../Button'; +import { Input } from '../../Input'; + +const meta: Meta = { + title: 'Overlay/Dialog', + component: Dialog.Root +}; + +export default meta; + +type DialogStory = StoryObj; + +export const Default: DialogStory = { + render: (args) => ( + + + + + + + + + {'Edit Profile'} + + + {'Make changes to your profile here. Click save when you\'re done.'} + + +
+ + + + + + +
+ +
+ + + + + + +
+ +
+ + + + + + +
+ + + + ) +}; diff --git a/packages/ui/uikit/flippo/components/src/components/Dialog/ui/backdrop/DialogBackdrop.module.scss b/packages/ui/uikit/flippo/components/src/components/Dialog/ui/backdrop/DialogBackdrop.module.scss new file mode 100644 index 00000000..56f0400f --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Dialog/ui/backdrop/DialogBackdrop.module.scss @@ -0,0 +1,20 @@ +@use 'mixins/_common.scss' as common; + +.DialogBackdrop { + @include common.reset-appearance(); + + position: fixed; + inset: 0; + background-color: var(--f-color-bg-1); + opacity: 0.2; + transition: opacity 150ms cubic-bezier(0.45, 1.005, 0, 1.005); + + @media (prefers-color-scheme: dark) { + opacity: 0.7; + } + + &[data-starting-style], + &[data-ending-style] { + opacity: 0; + } +} diff --git a/packages/ui/uikit/flippo/components/src/components/Dialog/ui/backdrop/DialogBackdrop.tsx b/packages/ui/uikit/flippo/components/src/components/Dialog/ui/backdrop/DialogBackdrop.tsx new file mode 100644 index 00000000..32b2eb75 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Dialog/ui/backdrop/DialogBackdrop.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Dialog as DialogHeadless } from '@flippo-ui/headless-components/dialog'; +import { cx } from 'class-variance-authority'; + +import styles from './DialogBackdrop.module.scss'; + +export function DialogBackdrop(props: DialogBackdrop.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace DialogBackdrop { + export type Props = DialogHeadless.Backdrop.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Dialog/ui/close/DialogClose.tsx b/packages/ui/uikit/flippo/components/src/components/Dialog/ui/close/DialogClose.tsx new file mode 100644 index 00000000..9488af6e --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Dialog/ui/close/DialogClose.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +import { Dialog as DialogHeadless } from '@flippo-ui/headless-components/dialog'; + +export function DialogClose(props: DialogClose.Props) { + return ; +} + +export namespace DialogClose { + export type Props = DialogHeadless.Close.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Dialog/ui/description/DialogDescription.module.scss b/packages/ui/uikit/flippo/components/src/components/Dialog/ui/description/DialogDescription.module.scss new file mode 100644 index 00000000..94854295 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Dialog/ui/description/DialogDescription.module.scss @@ -0,0 +1,10 @@ +@use 'mixins/_common.scss' as common; +@use 'mixins/_font.scss' as font; + +.DialogDescription { + @include common.reset-appearance(); + @include font.body(default); + + color: var(--f-color-text-2); + margin-bottom: var(--f-spacing-5); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Dialog/ui/description/DialogDescription.tsx b/packages/ui/uikit/flippo/components/src/components/Dialog/ui/description/DialogDescription.tsx new file mode 100644 index 00000000..3f59a5de --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Dialog/ui/description/DialogDescription.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Dialog as DialogHeadless } from '@flippo-ui/headless-components/dialog'; +import { cx } from 'class-variance-authority'; + +import styles from './DialogDescription.module.scss'; + +export function DialogDescription(props: DialogDescription.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace DialogDescription { + export type Props = DialogHeadless.Description.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Dialog/ui/popup/DialogPopup.module.scss b/packages/ui/uikit/flippo/components/src/components/Dialog/ui/popup/DialogPopup.module.scss new file mode 100644 index 00000000..710f9848 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Dialog/ui/popup/DialogPopup.module.scss @@ -0,0 +1,35 @@ +@use 'mixins/_common.scss' as common; +@use 'mixins/_effect.scss' as effect; + +.DialogPopup { + @include common.reset-appearance(); + @include effect.elevation-modal(); + + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: var(--f-spacing-8); + border-radius: var(--f-spacing-6); + background-color: var(--f-color-bg-1); + color: var(--f-color-text-primary); + transition: all 150ms; + + &[data-starting-style], + &[data-ending-style] { + opacity: 0; + transform: translate(-50%, -50%) scale(0.9); + } + + &_small { + width: 420px; + } + + &_medium { + width: 732px; + } + + &_large { + width: 1064px; + } +} diff --git a/packages/ui/uikit/flippo/components/src/components/Dialog/ui/popup/DialogPopup.tsx b/packages/ui/uikit/flippo/components/src/components/Dialog/ui/popup/DialogPopup.tsx new file mode 100644 index 00000000..f7d62ff5 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Dialog/ui/popup/DialogPopup.tsx @@ -0,0 +1,34 @@ +import React from 'react'; + +import { Dialog as DialogHeadless } from '@flippo-ui/headless-components/dialog'; +import { cva } from 'class-variance-authority'; + +import type { VariantProps } from 'class-variance-authority'; + +import styles from './DialogPopup.module.scss'; + +const DialogPopupVariants = cva(styles.DialogPopup, { + variants: { + dimension: { + small: styles.DialogPopup_small, + medium: styles.DialogPopup_medium, + large: styles.DialogPopup_large + + } + }, + defaultVariants: { + dimension: 'medium' + } +}); + +export function DialogPopup(props: DialogPopup.Props) { + const { className, dimension, ...otherProps } = props; + + const dialogPopupClasses = DialogPopupVariants({ dimension, className }); + + return ; +} + +export namespace DialogPopup { + export type Props = DialogHeadless.Popup.Props & VariantProps; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Dialog/ui/portal/DialogPortal.tsx b/packages/ui/uikit/flippo/components/src/components/Dialog/ui/portal/DialogPortal.tsx new file mode 100644 index 00000000..375776de --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Dialog/ui/portal/DialogPortal.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +import { Dialog as DialogHeadless } from '@flippo-ui/headless-components/dialog'; + +export function DialogPortal(props: DialogPortal.Props) { + return ; +} + +export namespace DialogPortal { + export type Props = DialogHeadless.Portal.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Dialog/ui/root/DialogRoot.tsx b/packages/ui/uikit/flippo/components/src/components/Dialog/ui/root/DialogRoot.tsx new file mode 100644 index 00000000..0afc1463 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Dialog/ui/root/DialogRoot.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +import { Dialog as DialogHeadless } from '@flippo-ui/headless-components/dialog'; + +export function DialogRoot(props: DialogRoot.Props) { + return ; +} + +export namespace DialogRoot { + export type Props = DialogHeadless.Root.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Dialog/ui/title/DialogTitle.module.scss b/packages/ui/uikit/flippo/components/src/components/Dialog/ui/title/DialogTitle.module.scss new file mode 100644 index 00000000..b929e01f --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Dialog/ui/title/DialogTitle.module.scss @@ -0,0 +1,11 @@ +@use 'mixins/_common.scss' as common; +@use 'mixins/_font.scss' as font; + +.DialogTitle { + @include common.reset-appearance(); + @include font.title-3(default); + + color: var(--f-color-text-primary); + margin: 0; + margin-bottom: var(--f-spacing-6); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Dialog/ui/title/DialogTitle.tsx b/packages/ui/uikit/flippo/components/src/components/Dialog/ui/title/DialogTitle.tsx new file mode 100644 index 00000000..3bda2a3e --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Dialog/ui/title/DialogTitle.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Dialog as DialogHeadless } from '@flippo-ui/headless-components/dialog'; +import { cx } from 'class-variance-authority'; + +import styles from './DialogTitle.module.scss'; + +export function DialogTitle(props: DialogTitle.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace DialogTitle { + export type Props = DialogHeadless.Title.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Dialog/ui/trigger/DialogTrigger.tsx b/packages/ui/uikit/flippo/components/src/components/Dialog/ui/trigger/DialogTrigger.tsx new file mode 100644 index 00000000..fd14639c --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Dialog/ui/trigger/DialogTrigger.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +import { Dialog as DialogHeadless } from '@flippo-ui/headless-components/dialog'; + +export function DialogTrigger(props: DialogTrigger.Props) { + return ; +} + +export namespace DialogTrigger { + export type Props = DialogHeadless.Trigger.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Field/index.parts.ts b/packages/ui/uikit/flippo/components/src/components/Field/index.parts.ts new file mode 100644 index 00000000..b0a35507 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Field/index.parts.ts @@ -0,0 +1,6 @@ +export { FieldControl as Control } from './ui/control/FieldControl'; +export { FieldDescription as Description } from './ui/description/FieldDescription'; +export { FieldError as Error } from './ui/error/FieldError'; +export { FieldLabel as Label } from './ui/label/FieldLabel'; +export { FieldRoot as Root } from './ui/root/FieldRoot'; +export { FieldValidity as Validity } from './ui/validity/FieldValidity'; diff --git a/packages/ui/uikit/flippo/components/src/components/Field/index.ts b/packages/ui/uikit/flippo/components/src/components/Field/index.ts new file mode 100644 index 00000000..30549fd8 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Field/index.ts @@ -0,0 +1 @@ +export * as Field from './index.parts'; \ No newline at end of file diff --git a/packages/ui/uikit/flippo/components/src/components/Field/story/Field.stories.tsx b/packages/ui/uikit/flippo/components/src/components/Field/story/Field.stories.tsx new file mode 100644 index 00000000..795b17d4 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Field/story/Field.stories.tsx @@ -0,0 +1,28 @@ +import React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import { Field } from '..'; + +const meta: Meta = { + title: 'Form/Field', + component: Field.Root +}; + +export default meta; + +type FieldStory = StoryObj; + +export const Default: FieldStory = { + render: (args) => ( + + {'Email Address'} + + + + + {'We\'ll never share your email with anyone else.'} + + + ) +}; diff --git a/packages/ui/uikit/flippo/components/src/components/Field/ui/control-slot/FieldControlSlot.module.scss b/packages/ui/uikit/flippo/components/src/components/Field/ui/control-slot/FieldControlSlot.module.scss new file mode 100644 index 00000000..2e89acb8 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Field/ui/control-slot/FieldControlSlot.module.scss @@ -0,0 +1,179 @@ +@use 'mixins/_flex.scss' as flex; +@use 'mixins/_font.scss' as font; +@use 'mixins/_corners.scss' as corners; +@use 'mixins/_common.scss' as common; + +.FieldControlSlot { + @include common.reset-appearance; + + $ow: 1.5px; + $parent: &; + + outline-color: transparent; + + flex: 0 1 100%; + + fill: var(--f-color-text-6); + + overflow: hidden; + color: var(--f-color-text-white); + + transition: + outline 0.3s ease, + background-color 0.3s ease; + + @include flex.display(inline-flex, row, center, center, var(--f-spacing-3)); + + width: 100%; + + & > svg { + width: calc(var(--f-spacing-9) / 2); + aspect-ratio: 1; + } + + &:hover { + [data-slot]::placeholder { + color: var(--f-color-text-5); + } + + svg { + fill: var(--f-color-text-5); + } + } + + &:focus-within { + [data-slot]::placeholder { + color: var(--f-color-text-6); + } + + svg { + fill: var(--f-color-text-5); + } + } + + @include corners.corners((&, '::before', '::after'), var(--f-spacing-3)); + + &_light { + background: var(--f-color-bg-1); + border-radius: var(--f-border-radius-input-field); + border: $ow solid transparent; + + &:hover { + background: var(--f-color-bg-area-subtle); + border-color: var(--f-color-stroke-hover); + + &[data-invalid] { + border-color: var(--f-color-error-hover); + } + } + + &[data-invalid] { + border-color: var(--f-color-error); + } + + &:is(:focus-within, [data-focused]) { + background: var(--f-color-bg-area-muted); + border-color: var(--f-color-brand-light); + } + + &:is(:disabled, [data-disabled]) { + background: var(--f-color-bg-1); + color: var(--f-color-text-disabled); + } + } + + &_inverted { + background: var(--f-color-bg-area-muted); + border-radius: var(--f-border-radius-input-field); + border: $ow solid transparent; + + &:hover { + background: var(--f-color-bg-area-subtle); + border-color: var(--f-color-stroke); + + &[data-invalid] { + border-color: var(--f-color-error-hover); + } + } + + &[data-invalid] { + border-color: var(--f-color-error); + } + + &:is(:focus-within, [data-focused]) { + background: var(--f-color-bg-area-muted); + border-color: var(--f-color-brand-light); + } + + &:is(:disabled, [data-disabled]) { + background: var(--f-color-bg-area-muted); + color: var(--f-color-text-disabled); + } + } + + &_large { + height: var(--f-spacing-14); + + @include font.body('weaker'); + + padding: var(--f-spacing-4) var(--f-spacing-5); + + &:has([data-input-clear]) { + padding-right: var(--f-spacing-3); + } + + [data-input-clear] { + height: var(--f-spacing-9); + aspect-ratio: 1; + + svg { + height: var(--f-spacing-6); + aspect-ratio: 1; + } + } + } + + &_medium { + height: var(--f-spacing-12); + + @include font.bodyMinus('weaker'); + + padding: var(--f-spacing-2) var(--f-spacing-5); + + &:has([data-input-clear]) { + padding-right: var(--f-spacing-2); + } + + [data-input-clear] { + height: var(--f-spacing-7); + aspect-ratio: 1; + + svg { + height: var(--f-spacing-5); + aspect-ratio: 1; + } + } + } + + &_small { + height: var(--f-spacing-10); + + @include font.bodyMinus('weaker'); + + padding: calc(var(--f-spacing-4) / 2) calc(var(--f-spacing-9) / 2); + + &:has([data-input-clear]) { + padding-right: var(--f-spacing-2); + } + + [data-input-clear] { + height: var(--f-spacing-6); + aspect-ratio: 1; + + svg { + height: var(--f-spacing-4); + aspect-ratio: 1; + } + } + } +} diff --git a/packages/ui/uikit/flippo/components/src/components/Field/ui/control-slot/FieldControlSlot.tsx b/packages/ui/uikit/flippo/components/src/components/Field/ui/control-slot/FieldControlSlot.tsx new file mode 100644 index 00000000..cc305aa2 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Field/ui/control-slot/FieldControlSlot.tsx @@ -0,0 +1,59 @@ +import React from 'react'; + +import { Field as FieldHeadless } from '@flippo-ui/headless-components/field'; +import { cva } from 'class-variance-authority'; + +import type { VariantProps } from 'class-variance-authority'; + +import styles from './FieldControlSlot.module.scss'; + +const FieldControlSlotVariants = cva(styles.FieldControlSlot, { + variants: { + variant: { + inverted: styles.FieldControlSlot_inverted, + light: styles.FieldControlSlot_light + }, + dimensions: { + small: styles.FieldControlSlot_small, + medium: styles.FieldControlSlot_medium, + large: styles.FieldControlSlot_large + }, + corners: { + 'clear': styles['corners-clear-clear'], + 'circle': styles['corners-circle-circle'], + 'round': styles['corners-round-round'], + 'round-clear': styles['corners-round-clear'], + 'clear-round': styles['corners-clear-round'], + 'round-circle': styles['corners-round-circle'], + 'clear-circle': styles['corners-clear-circle'] + } + }, + defaultVariants: { + variant: 'inverted', + dimensions: 'medium', + corners: 'round' + } +}); + +export function FieldControlSlot(props: FieldControlSlot.Props) { + const { + className, + variant, + dimensions, + corners, + ...otherProps + } = props; + + const fieldControlSlotClasses = FieldControlSlotVariants({ + variant, + dimensions, + corners, + className + }); + + return ; +} + +export namespace FieldControlSlot { + export type Props = FieldHeadless.Control.InputSlotProps & VariantProps; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Field/ui/control/FieldControl.module.scss b/packages/ui/uikit/flippo/components/src/components/Field/ui/control/FieldControl.module.scss new file mode 100644 index 00000000..c1017d1c --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Field/ui/control/FieldControl.module.scss @@ -0,0 +1,178 @@ +@use 'mixins/_flex.scss' as flex; +@use 'mixins/_font.scss' as font; +@use 'mixins/_corners.scss' as corners; +@use 'mixins/_common.scss' as common; + +.FieldControl { + @include common.reset-appearance; + + $ow: 1.5px; + $parent: &; + + outline-color: transparent; + + flex: 0 1 100%; + + fill: var(--f-color-text-6); + + overflow: hidden; + + transition: + outline 0.3s ease, + background-color 0.3s ease; + + @include flex.display(inline-flex, row, center, center, var(--f-spacing-3)); + + width: 100%; + + & > svg { + width: calc(var(--f-spacing-9) / 2); + aspect-ratio: 1; + } + + &:hover { + [data-slot]::placeholder { + color: var(--f-color-text-5); + } + + svg { + fill: var(--f-color-text-5); + } + } + + &:focus-within { + [data-slot]::placeholder { + color: var(--f-color-text-6); + } + + svg { + fill: var(--f-color-text-5); + } + } + + @include corners.corners((&, '::before', '::after'), var(--f-spacing-3)); + + &_light { + background: var(--f-color-bg-1); + border-radius: var(--f-border-radius-input-field); + border: $ow solid transparent; + + &:hover { + background: var(--f-color-bg-area-subtle); + border-color: var(--f-color-stroke-hover); + + &[data-invalid] { + border-color: var(--f-color-error-hover); + } + } + + &[data-invalid] { + border-color: var(--f-color-error); + } + + &:is(:focus-within, [data-focused]) { + background: var(--f-color-bg-area-muted); + border-color: var(--f-color-brand-light); + } + + &:is(:disabled, [data-disabled]) { + background: var(--f-color-bg-1); + color: var(--f-color-text-disabled); + } + } + + &_inverted { + background: var(--f-color-bg-area-muted); + border-radius: var(--f-border-radius-input-field); + border: $ow solid transparent; + + &:hover { + background: var(--f-color-bg-area-subtle); + border-color: var(--f-color-stroke); + + &[data-invalid] { + border-color: var(--f-color-error-hover); + } + } + + &[data-invalid] { + border-color: var(--f-color-error); + } + + &:is(:focus-within, [data-focused]) { + background: var(--f-color-bg-area-muted); + border-color: var(--f-color-brand-light); + } + + &:is(:disabled, [data-disabled]) { + background: var(--f-color-bg-area-muted); + color: var(--f-color-text-disabled); + } + } + + &_large { + height: var(--f-spacing-14); + + @include font.body('weaker'); + + padding: var(--f-spacing-4) var(--f-spacing-5); + + &:has([data-input-clear]) { + padding-right: var(--f-spacing-3); + } + + [data-input-clear] { + height: var(--f-spacing-9); + aspect-ratio: 1; + + svg { + height: var(--f-spacing-6); + aspect-ratio: 1; + } + } + } + + &_medium { + height: var(--f-spacing-12); + + @include font.bodyMinus('weaker'); + + padding: var(--f-spacing-2) var(--f-spacing-5); + + &:has([data-input-clear]) { + padding-right: var(--f-spacing-2); + } + + [data-input-clear] { + height: var(--f-spacing-7); + aspect-ratio: 1; + + svg { + height: var(--f-spacing-5); + aspect-ratio: 1; + } + } + } + + &_small { + height: var(--f-spacing-10); + + @include font.bodyMinus('weaker'); + + padding: calc(var(--f-spacing-4) / 2) calc(var(--f-spacing-9) / 2); + + &:has([data-input-clear]) { + padding-right: var(--f-spacing-2); + } + + [data-input-clear] { + height: var(--f-spacing-6); + aspect-ratio: 1; + + svg { + height: var(--f-spacing-4); + aspect-ratio: 1; + } + } + } +} diff --git a/packages/ui/uikit/flippo/components/src/components/Field/ui/control/FieldControl.tsx b/packages/ui/uikit/flippo/components/src/components/Field/ui/control/FieldControl.tsx new file mode 100644 index 00000000..796baa27 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Field/ui/control/FieldControl.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +import { Field as FieldHeadless } from '@flippo-ui/headless-components/field'; + +import { FieldControlSlot } from '../control-slot/FieldControlSlot'; + +export function FieldControl(props: FieldControl.Props) { + return ( + + ); +} + +FieldControl.Slot = FieldControlSlot; +FieldControl.useFieldControl = FieldHeadless.Control.useFieldControl; + +export namespace FieldControl { + export type Props = Omit; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Field/ui/description/FieldDescription.module.scss b/packages/ui/uikit/flippo/components/src/components/Field/ui/description/FieldDescription.module.scss new file mode 100644 index 00000000..45d7cc0a --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Field/ui/description/FieldDescription.module.scss @@ -0,0 +1,10 @@ +@use 'mixins/_common.scss' as common; +@use 'mixins/_font.scss' as font; + +.FieldDescription { + @include common.reset-appearance; + @include font.label(weaker); + + color: var(--f-color-text-4); + margin: 0; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Field/ui/description/FieldDescription.tsx b/packages/ui/uikit/flippo/components/src/components/Field/ui/description/FieldDescription.tsx new file mode 100644 index 00000000..ce5c1ad5 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Field/ui/description/FieldDescription.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +import { Field as FieldHeadless } from '@flippo-ui/headless-components/field'; +import { cva } from 'class-variance-authority'; + +import styles from './FieldDescription.module.scss'; + +const FieldDescriptionVariants = cva(styles.FieldDescription); + +export function FieldDescription(props: FieldDescription.Props) { + const { className, ...rest } = props; + + const descriptionClasses = FieldDescriptionVariants({ className }); + + return ; +} + +export namespace FieldDescription { + export type Props = FieldHeadless.Description.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Field/ui/error/FieldError.module.scss b/packages/ui/uikit/flippo/components/src/components/Field/ui/error/FieldError.module.scss new file mode 100644 index 00000000..33505a08 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Field/ui/error/FieldError.module.scss @@ -0,0 +1,9 @@ +@use 'mixins/_common.scss' as common; +@use 'mixins/_font.scss' as font; + +.FieldError { + @include common.reset-appearance; + @include font.label(weaker); + + color: var(--f-color-error); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Field/ui/error/FieldError.tsx b/packages/ui/uikit/flippo/components/src/components/Field/ui/error/FieldError.tsx new file mode 100644 index 00000000..053b2d4d --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Field/ui/error/FieldError.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Field as FieldHeadless } from '@flippo-ui/headless-components/field'; +import { cx } from 'class-variance-authority'; + +import styles from './FieldError.module.scss'; + +export function FieldError(props: FieldError.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace FieldError { + export type Props = FieldHeadless.Error.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Field/ui/label/FieldLabel.module.scss b/packages/ui/uikit/flippo/components/src/components/Field/ui/label/FieldLabel.module.scss new file mode 100644 index 00000000..3b09ab1f --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Field/ui/label/FieldLabel.module.scss @@ -0,0 +1,9 @@ +@use 'mixins/_common.scss' as common; +@use 'mixins/_font.scss' as font; + +.FieldLabel { + @include common.reset-appearance; + @include font.label(default); + + color: var(--f-color-text-primary); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Field/ui/label/FieldLabel.tsx b/packages/ui/uikit/flippo/components/src/components/Field/ui/label/FieldLabel.tsx new file mode 100644 index 00000000..686fc6b9 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Field/ui/label/FieldLabel.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Field as FieldHeadless } from '@flippo-ui/headless-components/field'; +import { cx } from 'class-variance-authority'; + +import styles from './FieldLabel.module.scss'; + +export function FieldLabel(props: FieldLabel.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace FieldLabel { + export type Props = FieldHeadless.Label.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Field/ui/root/FieldRoot.module.scss b/packages/ui/uikit/flippo/components/src/components/Field/ui/root/FieldRoot.module.scss new file mode 100644 index 00000000..3cdb7b3f --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Field/ui/root/FieldRoot.module.scss @@ -0,0 +1,11 @@ +@use 'mixins/_common.scss' as common; + +.FieldRoot { + @include common.reset-appearance; + + display: flex; + flex-direction: column; + align-items: start; + gap: var(--f-spacing-1); + width: 100%; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Field/ui/root/FieldRoot.tsx b/packages/ui/uikit/flippo/components/src/components/Field/ui/root/FieldRoot.tsx new file mode 100644 index 00000000..fbb061de --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Field/ui/root/FieldRoot.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Field as FieldHeadless } from '@flippo-ui/headless-components/field'; +import { cx } from 'class-variance-authority'; + +import styles from './FieldRoot.module.scss'; + +export function FieldRoot(props: FieldRoot.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace FieldRoot { + export type Props = FieldHeadless.Root.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Field/ui/validity/FieldValidity.module.scss b/packages/ui/uikit/flippo/components/src/components/Field/ui/validity/FieldValidity.module.scss new file mode 100644 index 00000000..0cd9a5da --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Field/ui/validity/FieldValidity.module.scss @@ -0,0 +1,7 @@ +@use 'mixins/_common.scss' as common; + +.FieldValidity { + @include common.reset-appearance; + + // Validity indicator styling +} diff --git a/packages/ui/uikit/flippo/components/src/components/Field/ui/validity/FieldValidity.tsx b/packages/ui/uikit/flippo/components/src/components/Field/ui/validity/FieldValidity.tsx new file mode 100644 index 00000000..0ed7ecc9 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Field/ui/validity/FieldValidity.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +import { Field as FieldHeadless } from '@flippo-ui/headless-components/field'; +import { cva } from 'class-variance-authority'; + +import styles from './FieldValidity.module.scss'; + +const FieldValidityVariants = cva(styles.FieldValidity); + +export function FieldValidity(props: FieldValidity.Props) { + const { className, ...rest } = props; + + const validityClasses = FieldValidityVariants({ className }); + + return ; +} + +export namespace FieldValidity { + export type Props = FieldHeadless.Validity.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Fieldset/index.parts.ts b/packages/ui/uikit/flippo/components/src/components/Fieldset/index.parts.ts new file mode 100644 index 00000000..e06897c9 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Fieldset/index.parts.ts @@ -0,0 +1,2 @@ +export { FieldsetLegend as Legend } from './ui/legend/FieldsetLegend'; +export { FieldsetRoot as Root } from './ui/root/FieldsetRoot'; diff --git a/packages/ui/uikit/flippo/components/src/components/Fieldset/index.ts b/packages/ui/uikit/flippo/components/src/components/Fieldset/index.ts new file mode 100644 index 00000000..1320ce19 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Fieldset/index.ts @@ -0,0 +1 @@ +export * as Fieldset from './index.parts'; diff --git a/packages/ui/uikit/flippo/components/src/components/Fieldset/story/Fieldset.stories.tsx b/packages/ui/uikit/flippo/components/src/components/Fieldset/story/Fieldset.stories.tsx new file mode 100644 index 00000000..e243b4d4 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Fieldset/story/Fieldset.stories.tsx @@ -0,0 +1,33 @@ +import React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import { Fieldset } from '..'; +import { Field } from '../../Field'; +import { Input } from '../../Input'; + +const meta: Meta = { + title: 'Form/Fieldset', + component: Fieldset.Root +}; + +export default meta; + +type FieldsetStory = StoryObj; + +export const Default: FieldsetStory = { + render: (args) => ( + + {'Personal Information'} + + + {'First Name'} + + + + + + + + ) +}; diff --git a/packages/ui/uikit/flippo/components/src/components/Fieldset/ui/legend/FieldsetLegend.module.scss b/packages/ui/uikit/flippo/components/src/components/Fieldset/ui/legend/FieldsetLegend.module.scss new file mode 100644 index 00000000..cbdbed2e --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Fieldset/ui/legend/FieldsetLegend.module.scss @@ -0,0 +1,11 @@ +@use 'mixins/_common.scss' as common; +@use 'mixins/_font.scss' as font; + +.FieldsetLegend { + @include common.reset-appearance; + @include font.bodyPlus(default); + + border-bottom: 2px solid var(--f-color-stroke-transparent); + padding-bottom: var(--f-spacing-3); + color: var(--f-color-text-primary); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Fieldset/ui/legend/FieldsetLegend.tsx b/packages/ui/uikit/flippo/components/src/components/Fieldset/ui/legend/FieldsetLegend.tsx new file mode 100644 index 00000000..0a09be9a --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Fieldset/ui/legend/FieldsetLegend.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Fieldset as FieldsetHeadless } from '@flippo-ui/headless-components/fieldset'; +import { cx } from 'class-variance-authority'; + +import styles from './FieldsetLegend.module.scss'; + +export function FieldsetLegend(props: FieldsetLegend.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace FieldsetLegend { + export type Props = FieldsetHeadless.Legend.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Fieldset/ui/root/FieldsetRoot.module.scss b/packages/ui/uikit/flippo/components/src/components/Fieldset/ui/root/FieldsetRoot.module.scss new file mode 100644 index 00000000..14f74dee --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Fieldset/ui/root/FieldsetRoot.module.scss @@ -0,0 +1,10 @@ +@use 'mixins/_common.scss' as common; + +.FieldsetRoot { + @include common.reset-appearance(); + + display: flex; + flex-direction: column; + gap: var(--f-spacing-4); + width: 100%; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Fieldset/ui/root/FieldsetRoot.tsx b/packages/ui/uikit/flippo/components/src/components/Fieldset/ui/root/FieldsetRoot.tsx new file mode 100644 index 00000000..d2ac801e --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Fieldset/ui/root/FieldsetRoot.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Fieldset as FieldsetHeadless } from '@flippo-ui/headless-components/fieldset'; +import { cx } from 'class-variance-authority'; + +import styles from './FieldsetRoot.module.scss'; + +export function FieldsetRoot(props: FieldsetRoot.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace FieldsetRoot { + export type Props = FieldsetHeadless.Root.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Form/index.ts b/packages/ui/uikit/flippo/components/src/components/Form/index.ts new file mode 100644 index 00000000..dd81ad69 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Form/index.ts @@ -0,0 +1 @@ +export { Form } from './ui/Form'; diff --git a/packages/ui/uikit/flippo/components/src/components/Form/story/Form.stories.tsx b/packages/ui/uikit/flippo/components/src/components/Form/story/Form.stories.tsx new file mode 100644 index 00000000..808c678a --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Form/story/Form.stories.tsx @@ -0,0 +1,41 @@ +import React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import { Form } from '..'; +import { Button } from '../../Button'; +import { Field } from '../../Field'; +import { Input } from '../../Input'; + +const meta: Meta = { + title: 'Form/Form', + component: Form +}; + +export default meta; + +type FormStory = StoryObj; + +function handleSubmit(e: React.FormEvent) { + e.preventDefault(); +} + +export const Default: FormStory = { + render: (args) => ( +
+ + + {'Name'} + + + + + + + + +
+ ) +}; diff --git a/packages/ui/uikit/flippo/components/src/components/Form/ui/Form.module.scss b/packages/ui/uikit/flippo/components/src/components/Form/ui/Form.module.scss new file mode 100644 index 00000000..fd2830e7 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Form/ui/Form.module.scss @@ -0,0 +1,10 @@ +@use 'mixins/_common.scss' as common; + +.Form { + @include common.reset-appearance; + + display: flex; + flex-direction: column; + gap: var(--f-spacing-4); + width: 100%; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Form/ui/Form.tsx b/packages/ui/uikit/flippo/components/src/components/Form/ui/Form.tsx new file mode 100644 index 00000000..bd92e913 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Form/ui/Form.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Form as FormHeadless } from '@flippo-ui/headless-components/form'; +import { cx } from 'class-variance-authority'; + +import styles from './Form.module.scss'; + +export function Form(props: Form.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace Form { + export type Props = FormHeadless.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Input/index.parts.ts b/packages/ui/uikit/flippo/components/src/components/Input/index.parts.ts new file mode 100644 index 00000000..e0c8c5e6 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Input/index.parts.ts @@ -0,0 +1,8 @@ +import { Input as InputHeadless } from '@flippo-ui/headless-components/input'; + +export { InputBody as Body } from './ui/body/InputBody'; +export { InputClear as Clear } from './ui/clear/InputClear'; +export { InputRoot as Root } from './ui/root/InputRoot'; +export { InputSlot as Slot } from './ui/slot/InputSlot'; + +export const useInputControl: typeof InputHeadless.useInputControl = InputHeadless.useInputControl; diff --git a/packages/ui/uikit/flippo/components/src/components/Input/index.ts b/packages/ui/uikit/flippo/components/src/components/Input/index.ts new file mode 100644 index 00000000..1d580c2a --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Input/index.ts @@ -0,0 +1 @@ +export * as Input from './index.parts'; diff --git a/packages/ui/uikit/flippo/components/src/components/Input/story/Input.stories.tsx b/packages/ui/uikit/flippo/components/src/components/Input/story/Input.stories.tsx new file mode 100644 index 00000000..4955aae0 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Input/story/Input.stories.tsx @@ -0,0 +1,126 @@ +import React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import { Input } from '../'; +import { StoryCombine } from '../../StoryCombine'; + +const meta: Meta = { + component: Input.Root, + title: 'Input/Input' +}; + +export default meta; + +type InputStory = StoryObj; + +export const InputInverted: InputStory = { + args: {}, + render: () => ( + + + + + + ) +}; + +export const InputInvertedWithClear: InputStory = { + args: {}, + render: () => ( + + + + + + + ) +}; + +export const InputUnderline: InputStory = { + args: {}, + render: () => ( + + + + + + ) +}; + +const INVERTED_VARIANTS: StoryCombine.Group['variants'] = [{ + components: [{ + children: ( + + + + + ) + }], + name: 'Large' +}, { + variantArgs: { + }, + components: [{ + children: ( + + + + + ) + }], + name: 'Medium' +}, { + + components: [{ + children: ( + + + + + ) + }], + name: 'Small' +}]; + +const GROUPS: StoryCombine.Props = { + component: Input.Root, + groups: [{ + groupArgs: { + variant: 'inverted' + }, + name: 'Inverted', + variants: INVERTED_VARIANTS + }, { + groupArgs: { + variant: 'underline' + }, + name: 'Underline', + variants: [{ + name: 'Invisible', + components: [{ + children: ( + + + + ) + }] + }, { + variantArgs: { + view: 'affordance' + }, + name: 'Affordance', + components: [{ + children: ( + + + + ) + }] + }] + }] +}; + +export const InputStoryCombine: InputStory = { + render: () => +}; diff --git a/packages/ui/uikit/flippo/components/src/components/Input/ui/body/InputBody.module.scss b/packages/ui/uikit/flippo/components/src/components/Input/ui/body/InputBody.module.scss new file mode 100644 index 00000000..8c69a0d7 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Input/ui/body/InputBody.module.scss @@ -0,0 +1,218 @@ +@use 'mixins/_flex.scss' as flex; +@use 'mixins/_font.scss' as font; +@use 'mixins/_corners.scss' as corners; + +.InputBody { + $ow: 1.5px; + $parent: &; + + outline-color: transparent; + + flex: 0 1 100%; + + fill: var(--f-color-text-6); + + overflow: hidden; + + transition: + outline 0.3s ease, + background-color 0.3s ease; + + @include flex.display(inline-flex, row, center, center, var(--f-spacing-3)); + + width: 100%; + + & > svg { + width: calc(var(--f-spacing-9) / 2); + aspect-ratio: 1; + } + + &:hover { + [data-slot]::placeholder { + color: var(--f-color-text-5); + } + + svg { + fill: var(--f-color-text-5); + } + } + + &:focus-within { + [data-slot]::placeholder { + color: var(--f-color-text-6); + } + + svg { + fill: var(--f-color-text-5); + } + } + + @include corners.corners((&, '::before', '::after'), var(--f-spacing-3)); + + &_light { + background: var(--f-color-bg-1); + border-radius: var(--f-border-radius-input-field); + border: $ow solid transparent; + + &:hover { + background: var(--f-color-bg-area-subtle); + border-color: var(--f-color-stroke-hover); + + &[data-invalid] { + border-color: var(--f-color-error-hover); + } + } + + &[data-invalid] { + border-color: var(--f-color-error); + } + + &:is(:focus-within, [data-focused]) { + background: var(--f-color-bg-area-muted); + border-color: var(--f-color-brand-light); + } + + &:is(:disabled, [data-disabled]) { + background: var(--f-color-bg-1); + color: var(--f-color-text-disabled); + } + } + + &_inverted { + background: var(--f-color-bg-area-muted); + border-radius: var(--f-border-radius-input-field); + border: $ow solid transparent; + + &:hover { + background: var(--f-color-bg-area-subtle); + border-color: var(--f-color-stroke); + + &[data-invalid] { + border-color: var(--f-color-error-hover); + } + } + + &[data-invalid] { + border-color: var(--f-color-error); + } + + &:is(:focus-within, [data-focused]) { + background: var(--f-color-bg-area-muted); + border-color: var(--f-color-brand-light); + } + + &:is(:disabled, [data-disabled]) { + background: var(--f-color-bg-area-muted); + color: var(--f-color-text-disabled); + } + } + + &_underline { + background: transparent; + border-radius: 0; + height: var(--f-spacing-17); + padding: var(--f-spacing-2) 0; + border-bottom: $ow solid transparent; + + @include font.title-1('stronger'); + + &_invisible { + border-color: transparent; + } + + &_affordance { + border-color: var(--f-color-stroke); + } + + &:hover { + border-color: var(--f-color-stroke-hover); + + &[data-invalid] { + border-color: var(--f-color-error-hover); + } + } + + &[data-invalid] { + border-color: var(--f-color-error); + } + + &:is(:focus-within, [data-focused]) { + border-color: var(--f-color-brand-light); + } + + &:is(:disabled, [data-disabled]) { + background: var(--f-color-bg-area-muted); + color: var(--f-color-text-disabled); + + #{$parent}_affordance { + border-color: var(--f-color-stroke); + } + } + } + + &_large { + height: var(--f-spacing-14); + + @include font.body('weaker'); + + padding: var(--f-spacing-4) var(--f-spacing-5); + + &:has([data-input-clear]) { + padding-right: var(--f-spacing-3); + } + + [data-input-clear] { + height: var(--f-spacing-9); + aspect-ratio: 1; + + svg { + height: var(--f-spacing-6); + aspect-ratio: 1; + } + } + } + + &_medium { + height: var(--f-spacing-12); + + @include font.bodyMinus('weaker'); + + padding: var(--f-spacing-2) var(--f-spacing-5); + + &:has([data-input-clear]) { + padding-right: var(--f-spacing-2); + } + + [data-input-clear] { + height: var(--f-spacing-7); + aspect-ratio: 1; + + svg { + height: var(--f-spacing-5); + aspect-ratio: 1; + } + } + } + + &_small { + height: var(--f-spacing-10); + + @include font.bodyMinus('weaker'); + + padding: calc(var(--f-spacing-4) / 2) calc(var(--f-spacing-9) / 2); + + &:has([data-input-clear]) { + padding-right: var(--f-spacing-2); + } + + [data-input-clear] { + height: var(--f-spacing-6); + aspect-ratio: 1; + + svg { + height: var(--f-spacing-4); + aspect-ratio: 1; + } + } + } +} diff --git a/packages/ui/uikit/flippo/components/src/components/Input/ui/body/InputBody.tsx b/packages/ui/uikit/flippo/components/src/components/Input/ui/body/InputBody.tsx new file mode 100644 index 00000000..b1967556 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Input/ui/body/InputBody.tsx @@ -0,0 +1,104 @@ +import React from 'react'; + +import { Input as InputHeadless } from '@flippo-ui/headless-components/input'; +import { useRender } from '@flippo-ui/headless-components/use-render'; +import { cva } from 'class-variance-authority'; + +import type { VariantProps } from 'class-variance-authority'; + +import styles from './InputBody.module.scss'; + +const InputBodyInvertedVariants = cva(styles.InputBody, { + variants: { + variant: { + inverted: styles.InputBody_inverted, + light: styles.InputBody_light + }, + dimensions: { + small: styles.InputBody_small, + medium: styles.InputBody_medium, + large: styles.InputBody_large + }, + corners: { + 'clear': styles['corners-clear-clear'], + 'circle': styles['corners-circle-circle'], + 'round': styles['corners-round-round'], + 'round-clear': styles['corners-round-clear'], + 'clear-round': styles['corners-clear-round'], + 'round-circle': styles['corners-round-circle'], + 'clear-circle': styles['corners-clear-circle'] + } + }, + defaultVariants: { + variant: 'inverted', + dimensions: 'large', + corners: 'circle' + } +}); + +const InputBodyUnderlineVariants = cva(styles.InputBody, { + variants: { + variant: { + underline: styles.InputBody_underline + }, + view: { + invisible: styles.InputBody_underline_invisible, + affordance: styles.InputBody_underline_affordance + } + }, + defaultVariants: { + variant: 'underline', + view: 'invisible' + } +}); + +export function InputBody(props: InputBody.Props) { + const { + ref, + className, + variant = 'inverted', + ...otherProps + } = props; + + const { state } = InputHeadless.useInputControl(); + + const dimensions = 'dimensions' in props ? props.dimensions : undefined; + const corners = 'corners' in props ? props.corners : undefined; + const view = 'view' in props ? props.view : undefined; + + const inputRootClassName = React.useMemo(() => + variant === 'underline' + ? InputBodyUnderlineVariants({ + variant, + view, + className + }) + : InputBodyInvertedVariants({ + variant, + dimensions, + corners, + className + }), [ + variant, + dimensions, + corners, + className, + view + ]); + + const element = useRender({ + defaultTagName: 'span', + ref, + state, + props: [otherProps, { className: inputRootClassName }] + }); + + return element; +} + +export namespace InputBody { + export type InvertedProps = React.ComponentPropsWithRef<'span'> & VariantProps; + export type UnderlineProps = React.ComponentPropsWithRef<'span'> & VariantProps; + + export type Props = InvertedProps | UnderlineProps; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Input/ui/clear/InputClear.module.scss b/packages/ui/uikit/flippo/components/src/components/Input/ui/clear/InputClear.module.scss new file mode 100644 index 00000000..f02a4993 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Input/ui/clear/InputClear.module.scss @@ -0,0 +1,39 @@ +@use 'mixins/_flex.scss' as flex; + +$ow: 1.5px; +@mixin stateInputClear($state, $bg: null, $color: null, $oc: null) { + &#{$state} { + @if $bg { + background-color: $bg; + } + + @if $color { + color: $color; + } + + @if $oc { + outline: $ow solid $oc; + } + } +} + +.InputClear { + flex: 0 0; + padding: 0; + background-color: transparent; + border-radius: var(--f-border-radius-full); + + @include flex.display(inline-flex, row, center, center); + + svg { + flex-shrink: 0; + } + + color: var(--f-color-text-4); + + @include stateInputClear(':hover', var(--f-color-bg-2-hover), var(--f-color-text-white)); + @include stateInputClear(':active', var(--f-color-bg-2), var(--f-color-text-4)); + @include stateInputClear(':focus-visible', $color: var(--f-color-text-3), $oc: var(--f-color-brand-light)); + @include stateInputClear(':disabled', $color: var(--f-color-text-disabled)); + @include stateInputClear('[data-disabled]', $color: var(--f-color-text-disabled)); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Input/ui/clear/InputClear.tsx b/packages/ui/uikit/flippo/components/src/components/Input/ui/clear/InputClear.tsx new file mode 100644 index 00000000..befaa4c6 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Input/ui/clear/InputClear.tsx @@ -0,0 +1,50 @@ +import React from 'react'; + +import { Input as InputHeadless } from '@flippo-ui/headless-components/input'; +import { useButton } from '@flippo-ui/headless-components/use-button'; +import { useRender } from '@flippo-ui/headless-components/use-render'; +import { XmarkIcon } from '@flippo-ui/icons'; + +import styles from './InputClear.module.scss'; + +export function InputClear(props: InputClear.Props) { + const { + ref, + disabled, + onClick: onClickProp, + ...otherProps + } = props; + + const { value, state, setValue } = InputHeadless.useInputControl(); + + const onClick = React.useCallback>((event) => { + setValue('', event as unknown as Event); + + onClickProp?.(event); + }, [onClickProp, setValue]); + + const { getButtonProps, buttonRef } = useButton({ + native: true, + disabled: disabled ?? false + }); + + const element = useRender({ + defaultTagName: 'button', + ref: [buttonRef, ref], + state: { ...state, 'input-clear': true }, + props: [getButtonProps(otherProps), { + className: styles.InputClear, + children: , + onClick + }] + }); + + if (!value) + return null; + + return element; +} + +export namespace InputClear { + export type Props = React.ComponentPropsWithRef<'button'>; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Input/ui/root/InputRoot.tsx b/packages/ui/uikit/flippo/components/src/components/Input/ui/root/InputRoot.tsx new file mode 100644 index 00000000..4f665312 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Input/ui/root/InputRoot.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +import { Input as InputHeadless } from '@flippo-ui/headless-components/input'; + +export function InputRoot(props: InputRoot.Props) { + return ( + + ); +} + +export namespace InputRoot { + export type Props = InputHeadless.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Input/ui/slot/InputSlot.module.scss b/packages/ui/uikit/flippo/components/src/components/Input/ui/slot/InputSlot.module.scss new file mode 100644 index 00000000..edc442fe --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Input/ui/slot/InputSlot.module.scss @@ -0,0 +1,19 @@ +@use 'mixins/_text.scss' as text; + +.InputSlot { + @include text.overflow-ellipsis(); + + background: transparent; + outline: none; + border: none; + padding: 0; + width: 100%; + + color: var(--f-color-text-primary); + + &::placeholder { + color: var(--f-color-text-6); + } + + caret-color: var(--f-color-text-white); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Input/ui/slot/InputSlot.tsx b/packages/ui/uikit/flippo/components/src/components/Input/ui/slot/InputSlot.tsx new file mode 100644 index 00000000..d4191865 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Input/ui/slot/InputSlot.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Input as InputHeadless } from '@flippo-ui/headless-components'; +import { cx } from 'class-variance-authority'; + +import styles from './InputSlot.module.scss'; + +export function InputSlot(props: InputSlot.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace InputSlot { + export type Props = InputHeadless.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Link/index.ts b/packages/ui/uikit/flippo/components/src/components/Link/index.ts new file mode 100644 index 00000000..4022ac4e --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Link/index.ts @@ -0,0 +1 @@ +export * from './ui/Link'; diff --git a/packages/ui/uikit/flippo/components/src/components/Link/story/Link.stories.tsx b/packages/ui/uikit/flippo/components/src/components/Link/story/Link.stories.tsx new file mode 100644 index 00000000..ed4f66ba --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Link/story/Link.stories.tsx @@ -0,0 +1,110 @@ +import React from 'react'; + +import { MailGmailIcon, PlusIcon } from '@flippo-ui/icons'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import { StoryCombine } from '../../StoryCombine'; +import { Link } from '../ui/Link'; + +const meta: Meta = { + argTypes: { + children: { control: 'object', name: 'React.ReactNode' }, + variant: { control: 'select', options: ['neutral', 'brand'] } + }, + component: Link, + title: 'Navigation/Link' +}; + +export default meta; + +type LinkStory = StoryObj; + +const COMMON_ARGS = { + href: 'http://localhost:6006/?path=/story/uikit-link-link--link-story-combine' +}; + +const NEUTRAL_ARGS = { + children: 'Link', + variant: 'neutral', + ...COMMON_ARGS +}; + +export const NeutralLink: LinkStory = { + args: NEUTRAL_ARGS +}; + +export const NeutralLinkWithIcon: LinkStory = { + args: { ...NEUTRAL_ARGS, children: ( + + + { 'Link ' } + + ) } +}; + +const BRAND_ARGS = { + children: 'Link', + variant: 'brand', + ...COMMON_ARGS +}; + +export const BrandLink: LinkStory = { + args: BRAND_ARGS +}; + +export const BrandLinkWithIcon: LinkStory = { + args: { + ...BRAND_ARGS, + children: ( + + + {'Link '} + + ) + } +}; + +export const BrandLinkWithEmailLogo: LinkStory = { + args: { ...BRAND_ARGS, children: ( + + + {'Link '} + + ) } +}; + +const VARIANTS: StoryCombine.Group['variants'] = [{ components: + [{ children: 'Link' }], name: 'Default' }, { components: [{ children: ( + + + {'Link '} + +) }], name: 'With an icon' }, { components: [{ children: ( + + + {'Link '} + +) }], name: 'With an icon with a built-in fill' }]; + +const GROUPS: StoryCombine.Props = { + args: { href: 'http://localhost:6006/?path=/story/uikit-link-link--link-story-combine' }, + component: Link, + groups: [{ + groupArgs: { + variant: 'neutral' + }, + name: 'Neutral', + variants: VARIANTS + }, { + groupArgs: { + variant: 'brand' + }, + name: 'Brand', + variants: VARIANTS + }] +}; + +export const LinkStoryCombine: LinkStory = { + render: () => +}; diff --git a/packages/ui/uikit/flippo/components/src/components/Link/ui/Link.module.scss b/packages/ui/uikit/flippo/components/src/components/Link/ui/Link.module.scss new file mode 100644 index 00000000..d5b37da6 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Link/ui/Link.module.scss @@ -0,0 +1,55 @@ +@use 'mixins/_flex.scss' as flex; +@use 'mixins/_font.scss' as font; +@use 'mixins/_text.scss' as text; + +@mixin variantLink($defaultColor, $hoverColor, $activeColor) { + color: $defaultColor; + + &:hover { + color: $hoverColor; + } + + &:active { + color: $activeColor; + } +} + +.Link { + @include flex.display(inline-flex, row, center, center, calc(var(--f-spacing-3) / 2)); + @include font.bodyMinus('default'); + width: 100%; + + cursor: pointer; + + transition: color 0.3s ease; + + svg { + width: var(--f-spacing-5); + aspect-ratio: 1; + + fill: currentColor; + + flex: 0 0 auto; + } + + &_neutral { + @include variantLink(var(--f-color-text-2), var(--f-color-brand-light), var(--f-color-brand)); + } + + &_brand { + @include variantLink(var(--f-color-brand-light), var(--f-color-brand-light-hover), var(--f-color-brand-light)); + } + + .text { + @include flex.display(inline-flex, row, center, center, calc(var(--f-spacing-3) / 2)); + @include text.overflow-ellipsis(); + + width: 100%; + + flex: 1 1 auto; + + svg { + flex-shrink: 0; + } + } +} diff --git a/packages/ui/uikit/flippo/components/src/components/Link/ui/Link.tsx b/packages/ui/uikit/flippo/components/src/components/Link/ui/Link.tsx new file mode 100644 index 00000000..177e0c91 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Link/ui/Link.tsx @@ -0,0 +1,45 @@ +import React from 'react'; + +import { ArrowOutwardIcon } from '@flippo-ui/icons'; +import { cva } from 'class-variance-authority'; + +import type { VariantProps } from 'class-variance-authority'; + +import styles from './Link.module.scss'; + +const LinkVariants = cva(styles.Link, { + variants: { + variant: { + neutral: styles.Link_neutral, + brand: styles.Link_brand + } + }, + defaultVariants: { + variant: 'neutral' + } +}); + +export function Link(props: Link.Props) { + const { + children, + variant = 'neutral', + className, + ...otherProps + } = props; + + const linkClassName = LinkVariants({ + variant, + className + }); + + return ( + + {children} + + + ); +} + +export namespace Link { + export type Props = VariantProps & React.ComponentPropsWithRef<'a'>; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/index.parts.ts b/packages/ui/uikit/flippo/components/src/components/Menu/index.parts.ts new file mode 100644 index 00000000..0e1e7f77 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/index.parts.ts @@ -0,0 +1,18 @@ +export { Separator } from '../Separator'; +export { MenuArrow as Arrow } from './ui/arrow/MenuArrow'; +export { MenuBackdrop as Backdrop } from './ui/backdrop/MenuBackdrop'; +export { MenuCheckboxItemIndicator as CheckboxItemIndicator } from './ui/checkbox-item-indicator/MenuCheckboxItemIndicator'; +export { MenuCheckboxItem as CheckboxItem } from './ui/checkbox-item/MenuCheckboxItem'; +export { MenuGroupLabel as GroupLabel } from './ui/group-label/MenuGroupLabel'; +export { MenuGroup as Group } from './ui/group/MenuGroup'; +export { MenuItem as Item } from './ui/item/MenuItem'; +export { MenuPopup as Popup } from './ui/popup/MenuPopup'; +export { MenuPortal as Portal } from './ui/portal/MenuPortal'; +export { MenuPositioner as Positioner } from './ui/positioner/MenuPositioner'; +export { MenuRadioGroup as RadioGroup } from './ui/radio-group/MenuRadioGroup'; +export { MenuRadioItemIndicator as RadioItemIndicator } from './ui/radio-item-indicator/MenuRadioItemIndicator'; +export { MenuRadioItem as RadioItem } from './ui/radio-item/MenuRadioItem'; +export { MenuRoot as Root } from './ui/root/MenuRoot'; +export { MenuSubmenuRoot as SubmenuRoot } from './ui/submenu-root/MenuSubmenuRoot'; +export { MenuSubmenuTrigger as SubmenuTrigger } from './ui/submenu-trigger/MenuSubmenuTrigger'; +export { MenuTrigger as Trigger } from './ui/trigger/MenuTrigger'; diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/index.ts b/packages/ui/uikit/flippo/components/src/components/Menu/index.ts new file mode 100644 index 00000000..515d1290 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/index.ts @@ -0,0 +1 @@ +export * as Menu from './index.parts'; diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/story/Menu.stories.tsx b/packages/ui/uikit/flippo/components/src/components/Menu/story/Menu.stories.tsx new file mode 100644 index 00000000..27b2c4db --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/story/Menu.stories.tsx @@ -0,0 +1,287 @@ +import React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import { Menu } from '..'; +import { Button } from '../../Button'; + +const meta: Meta = { + title: 'Overlay/Menu', + component: Menu.Root +}; + +export default meta; + +type MenuStory = StoryObj; + +export const Default: MenuStory = { + render: (args) => ( + + + + + + + + + + + {'New File'} + + + {'Open File'} + + + + {'Save'} + + + {'Delete'} + + + + + + ), + args: {} +}; + +export const WithGroups: MenuStory = { + render: (args) => ( + + + + + + + + + + {'File Operations'} + {'New File'} + {'Open File'} + {'Recent Files'} + + + + + + {'Edit Operations'} + {'Copy'} + {'Paste'} + {'Cut'} + + + + + + {'Delete Project'} + + + + + + ), + args: {} +}; + +export const WithCheckboxItems: MenuStory = { + render: (args) => ( + + + + + + + + + + {'View Options'} + + + + + {'Show Sidebar'} + + + + + + {'Show Toolbar'} + + + + + + {'Show Status Bar'} + + + + + + + {'Customize View...'} + + + + + + ), + args: {} +}; + +export const WithRadioItems: MenuStory = { + render: (args) => { + return ( + + + + + + + + + + {'Theme'} + + + + {'Light Theme'} + + + + {'Dark Theme'} + + + + {'System Default'} + + + + + + + + {'Customize Colors...'} + + + + + + ); + }, + args: {} +}; + +export const WithSubmenu: MenuStory = { + render: (args) => ( + + + + + + + + + {'Settings'} + {'Preferences'} + + + + + + {'Import'} + + + + + {'From File'} + {'From URL'} + {'From Clipboard'} + + + + + + + + {'Export'} + + + + + {'As PDF'} + {'As Image'} + {'As JSON'} + + + + + + + + + {'Help'} + + + + + + ), + args: {} +}; + +export const ContextMenu: MenuStory = { + render: (args) => ( +
+

{'Right-click in this area to open context menu'}

+ + +
+ {'Right-click zone'} +
+ + + + + + {'Copy'} + {'Paste'} + {'Cut'} + + + + {'Inspect Element'} + {'View Source'} + + + + + {'Delete'} + + + + + +
+ ), + args: {} +}; diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/arrow/MenuArrow.module.scss b/packages/ui/uikit/flippo/components/src/components/Menu/ui/arrow/MenuArrow.module.scss new file mode 100644 index 00000000..af5d8a33 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/arrow/MenuArrow.module.scss @@ -0,0 +1,35 @@ +@use 'mixins/_common.scss' as common; + +.MenuArrow { + @include common.reset-appearance(); + + display: flex; + + &[data-side='top'] { + bottom: -8px; + rotate: 180deg; + } + + &[data-side='bottom'] { + top: -8px; + rotate: 0deg; + } + + &[data-side='left'] { + right: -13px; + rotate: 90deg; + } + + &[data-side='right'] { + left: -13px; + rotate: -90deg; + } +} + +.ArrowFill { + fill: var(--f-color-bg-2); +} + +.ArrowInnerStroke { + fill: var(--f-color-bg-2); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/arrow/MenuArrow.tsx b/packages/ui/uikit/flippo/components/src/components/Menu/ui/arrow/MenuArrow.tsx new file mode 100644 index 00000000..65c1aa14 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/arrow/MenuArrow.tsx @@ -0,0 +1,33 @@ +import React from 'react'; + +import { Menu as MenuHeadless } from '@flippo-ui/headless-components/menu'; +import { cx } from 'class-variance-authority'; + +import styles from './MenuArrow.module.scss'; + +export function MenuArrow(props: MenuArrow.Props) { + const { className, ...otherProps } = props; + + return ; +} + +MenuArrow.Svg = MenuArrowSvg; + +export namespace MenuArrow { + export type Props = MenuHeadless.Arrow.Props; +} + +function MenuArrowSvg(props: React.ComponentProps<'svg'>) { + return ( + + + + + ); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/backdrop/MenuBackdrop.module.scss b/packages/ui/uikit/flippo/components/src/components/Menu/ui/backdrop/MenuBackdrop.module.scss new file mode 100644 index 00000000..dcb239f5 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/backdrop/MenuBackdrop.module.scss @@ -0,0 +1,16 @@ +@use 'mixins/_common.scss' as common; + +.MenuBackdrop { + @include common.reset-appearance(); + + position: fixed; + inset: 0; + background-color: var(--f-color-bg-1); + opacity: 0.2; + transition: opacity 150ms cubic-bezier(0.45, 1.005, 0, 1.005); + + &[data-starting-style], + &[data-ending-style] { + opacity: 0; + } +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/backdrop/MenuBackdrop.tsx b/packages/ui/uikit/flippo/components/src/components/Menu/ui/backdrop/MenuBackdrop.tsx new file mode 100644 index 00000000..a747975b --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/backdrop/MenuBackdrop.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Menu as MenuHeadless } from '@flippo-ui/headless-components/menu'; +import { cx } from 'class-variance-authority'; + +import styles from './MenuBackdrop.module.scss'; + +export function MenuBackdrop(props: MenuBackdrop.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace MenuBackdrop { + export type Props = MenuHeadless.Backdrop.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/checkbox-item-indicator/MenuCheckboxItemIndicator.module.scss b/packages/ui/uikit/flippo/components/src/components/Menu/ui/checkbox-item-indicator/MenuCheckboxItemIndicator.module.scss new file mode 100644 index 00000000..cb98d9ef --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/checkbox-item-indicator/MenuCheckboxItemIndicator.module.scss @@ -0,0 +1,77 @@ +@use 'mixins/_common.scss' as common; + +.MenuCheckboxItemIndicator { + @include common.reset-appearance(); + + grid-column-start: 1; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + outline: 0; + padding: 0; + margin: 0; + border: none; + + width: var(--f-spacing-5); + aspect-ratio: 1; + + border-radius: var(--f-spacing-1); + background-color: transparent; + + cursor: pointer; + transition: all 0.2s ease; + + &:focus-visible { + outline: 2px solid var(--f-color-brand-light); + outline-offset: 2px; + } + + &[data-unchecked] { + border: var(--f-spacing-0) solid var(--f-color-stroke-hover); + background-color: transparent; + display: block; + + &:hover { + border-color: var(--f-color-text-2); + } + } + + &[data-checked] { + background-color: var(--f-color-brand-hover); + border-color: var(--f-color-brand-hover); + + &:hover { + background-color: var(--f-color-brand-light); + border-color: var(--f-color-brand-light); + } + } + + &[data-disabled] { + cursor: default; + + &[data-unchecked] { + border: var(--f-spacing-0) solid var(--f-color-stroke-muted); + } + + &[data-checked] { + border-color: var(--f-color-brand-disabled); + } + } +} + +.CheckIcon { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + color: var(--f-color-neutral-white); + + width: var(--f-spacing-3); + height: var(--f-spacing-3); + + [data-unchecked] & { + display: none; + } +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/checkbox-item-indicator/MenuCheckboxItemIndicator.tsx b/packages/ui/uikit/flippo/components/src/components/Menu/ui/checkbox-item-indicator/MenuCheckboxItemIndicator.tsx new file mode 100644 index 00000000..7e6e89b7 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/checkbox-item-indicator/MenuCheckboxItemIndicator.tsx @@ -0,0 +1,28 @@ +import React from 'react'; + +import { Menu as MenuHeadless } from '@flippo-ui/headless-components/menu'; +import { cx } from 'class-variance-authority'; + +import styles from './MenuCheckboxItemIndicator.module.scss'; + +export function MenuCheckboxItemIndicator(props: MenuCheckboxItemIndicator.Props) { + const { className, ...otherProps } = props; + + return ; +} + +MenuCheckboxItemIndicator.Svg = CheckSvg; + +export namespace MenuCheckboxItemIndicator { + export type Props = MenuHeadless.CheckboxItemIndicator.Props; +} + +function CheckSvg(props: React.ComponentProps<'svg'>) { + const { className, ...otherProps } = props; + + return ( + + + + ); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/checkbox-item/MenuCheckboxItem.module.scss b/packages/ui/uikit/flippo/components/src/components/Menu/ui/checkbox-item/MenuCheckboxItem.module.scss new file mode 100644 index 00000000..ac2ac075 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/checkbox-item/MenuCheckboxItem.module.scss @@ -0,0 +1,29 @@ +@use 'mixins/_common.scss' as common; +@use 'mixins/_font.scss' as font; + +.MenuCheckboxItem { + @include common.reset-appearance(); + @include font.bodyMinus(default); + + padding: var(--f-spacing-3) var(--f-spacing-5); + min-width: var(--anchor-width); + display: grid; + gap: var(--f-spacing-4); + align-items: center; + grid-template-columns: var(--f-spacing-5) 1fr; + cursor: default; + -webkit-user-select: none; + user-select: none; + scroll-margin-block: var(--f-spacing-1); + color: var(--f-color-text-3); + + @media (pointer: coarse) { + padding-block: var(--f-spacing-4); + } + + &[data-highlighted] { + z-index: 0; + position: relative; + color: var(--f-color-text-white); + } +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/checkbox-item/MenuCheckboxItem.tsx b/packages/ui/uikit/flippo/components/src/components/Menu/ui/checkbox-item/MenuCheckboxItem.tsx new file mode 100644 index 00000000..382402cc --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/checkbox-item/MenuCheckboxItem.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Menu as MenuHeadless } from '@flippo-ui/headless-components/menu'; +import { cx } from 'class-variance-authority'; + +import styles from './MenuCheckboxItem.module.scss'; + +export function MenuCheckboxItem(props: MenuCheckboxItem.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace MenuCheckboxItem { + export type Props = MenuHeadless.CheckboxItem.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/group-label/MenuGroupLabel.module.scss b/packages/ui/uikit/flippo/components/src/components/Menu/ui/group-label/MenuGroupLabel.module.scss new file mode 100644 index 00000000..6098d8a1 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/group-label/MenuGroupLabel.module.scss @@ -0,0 +1,13 @@ +@use 'mixins/_common.scss' as common; +@use 'mixins/_font.scss' as font; + +.MenuGroupLabel { + @include common.reset-appearance; + @include font.label(default); + + display: flex; + align-items: center; + padding: var(--f-spacing-0) 0 var(--f-spacing-0) var(--f-spacing-5); + color: var(--f-color-text-5); + height: var(--f-spacing-7); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/group-label/MenuGroupLabel.tsx b/packages/ui/uikit/flippo/components/src/components/Menu/ui/group-label/MenuGroupLabel.tsx new file mode 100644 index 00000000..9b179f49 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/group-label/MenuGroupLabel.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Menu as MenuHeadless } from '@flippo-ui/headless-components/menu'; +import { cx } from 'class-variance-authority'; + +import styles from './MenuGroupLabel.module.scss'; + +export function MenuGroupLabel(props: MenuGroupLabel.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace MenuGroupLabel { + export type Props = MenuHeadless.GroupLabel.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/group/MenuGroup.module.scss b/packages/ui/uikit/flippo/components/src/components/Menu/ui/group/MenuGroup.module.scss new file mode 100644 index 00000000..051cf6e5 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/group/MenuGroup.module.scss @@ -0,0 +1,9 @@ +@use 'mixins/_common.scss' as common; + +.MenuGroup { + @include common.reset-appearance(); + + display: flex; + flex-direction: column; + gap: var(--f-spacing-0); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/group/MenuGroup.tsx b/packages/ui/uikit/flippo/components/src/components/Menu/ui/group/MenuGroup.tsx new file mode 100644 index 00000000..662bdfee --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/group/MenuGroup.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Menu as MenuHeadless } from '@flippo-ui/headless-components/menu'; +import { cx } from 'class-variance-authority'; + +import styles from './MenuGroup.module.scss'; + +export function MenuGroup(props: MenuGroup.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace MenuGroup { + export type Props = MenuHeadless.Group.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/item/MenuItem.module.scss b/packages/ui/uikit/flippo/components/src/components/Menu/ui/item/MenuItem.module.scss new file mode 100644 index 00000000..4d98f269 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/item/MenuItem.module.scss @@ -0,0 +1,48 @@ +@use 'mixins/_common.scss' as common; +@use 'mixins/_font.scss' as font; + +.MenuItem { + @include common.reset-appearance(); + @include font.bodyMinus(default); + + padding: var(--f-spacing-3) var(--f-spacing-5); + min-width: var(--anchor-width); + display: grid; + gap: var(--f-spacing-4); + align-items: center; + grid-template-columns: repeat(auto-fit, minmax(var(--f-spacing-5), 1fr)); + cursor: default; + -webkit-user-select: none; + user-select: none; + scroll-margin-block: var(--f-spacing-1); + color: var(--f-color-text-3); + + @media (pointer: coarse) { + padding-block: var(--f-spacing-4); + } + + &[data-highlighted] { + z-index: 0; + position: relative; + color: var(--f-color-text-white); + } + + &[data-highlighted]::before { + content: ''; + z-index: -1; + position: absolute; + inset-block: 0; + inset-inline: 0; + border-radius: var(--f-spacing-3); + background-color: var(--f-color-bg-3); + } + + &_destructive { + color: var(--f-color-error); + + &[data-highlighted] { + background-color: var(--f-color-error-desaturated); + color: var(--f-color-error-hover); + } + } +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/item/MenuItem.tsx b/packages/ui/uikit/flippo/components/src/components/Menu/ui/item/MenuItem.tsx new file mode 100644 index 00000000..d5523ad3 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/item/MenuItem.tsx @@ -0,0 +1,28 @@ +import React from 'react'; + +import { Menu as MenuHeadless } from '@flippo-ui/headless-components/menu'; +import { cva } from 'class-variance-authority'; + +import type { VariantProps } from 'class-variance-authority'; + +import styles from './MenuItem.module.scss'; + +const MenuItemVariants = cva(styles.MenuItem, { + variants: { + variant: { + destructive: { true: styles.MenuItem_destructive, false: false } + } + } +}); + +export function MenuItem(props: MenuItem.Props) { + const { className, variant, ...otherProps } = props; + + const menuItemClasses = MenuItemVariants({ variant, className }); + + return ; +} + +export namespace MenuItem { + export type Props = MenuHeadless.Item.Props & VariantProps; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/popup/MenuPopup.module.scss b/packages/ui/uikit/flippo/components/src/components/Menu/ui/popup/MenuPopup.module.scss new file mode 100644 index 00000000..91cf8135 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/popup/MenuPopup.module.scss @@ -0,0 +1,42 @@ +@use 'mixins/_common.scss' as common; +@use 'mixins/_effect.scss' as effect; + +.MenuPopup { + @include common.reset-appearance(); + @include effect.elevation-1(); + + display: flex; + flex-direction: column; + gap: var(--f-spacing-0); + box-sizing: border-box; + padding-block: var(--f-spacing-1); + border-radius: var(--f-spacing-4); + background-color: var(--f-color-bg-2); + padding: calc(var(--f-spacing-3) / 2); + background-clip: padding-box; + color: var(--f-color-text-3); + transform-origin: var(--transform-origin); + transition: + transform 150ms, + opacity 150ms; + overflow-y: auto; + max-height: var(--available-height); + + // Prevent shrink separator + & > * { + flex-shrink: 0; + } + + &[data-starting-style], + &[data-ending-style] { + opacity: 0; + transform: scale(0.9); + } + + &[data-side='none'] { + transition: none; + transform: none; + opacity: 1; + scroll-padding-block: var(--f-spacing-5); + } +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/popup/MenuPopup.tsx b/packages/ui/uikit/flippo/components/src/components/Menu/ui/popup/MenuPopup.tsx new file mode 100644 index 00000000..b5f334bf --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/popup/MenuPopup.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Menu as MenuHeadless } from '@flippo-ui/headless-components/menu'; +import { cx } from 'class-variance-authority'; + +import styles from './MenuPopup.module.scss'; + +export function MenuPopup(props: MenuPopup.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace MenuPopup { + export type Props = MenuHeadless.Popup.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/portal/MenuPortal.tsx b/packages/ui/uikit/flippo/components/src/components/Menu/ui/portal/MenuPortal.tsx new file mode 100644 index 00000000..b921791c --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/portal/MenuPortal.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +import { Menu as MenuHeadless } from '@flippo-ui/headless-components/menu'; + +export function MenuPortal(props: MenuPortal.Props) { + return ; +} + +export namespace MenuPortal { + export type Props = MenuHeadless.Portal.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/positioner/MenuPositioner.module.scss b/packages/ui/uikit/flippo/components/src/components/Menu/ui/positioner/MenuPositioner.module.scss new file mode 100644 index 00000000..561acd0b --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/positioner/MenuPositioner.module.scss @@ -0,0 +1,12 @@ +@use 'mixins/_common.scss' as common; + +.MenuPositioner { + @include common.reset-appearance(); + + display: flex; + flex-direction: column; + gap: var(--f-spacing-1); + z-index: 1; + -webkit-user-select: none; + user-select: none; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/positioner/MenuPositioner.tsx b/packages/ui/uikit/flippo/components/src/components/Menu/ui/positioner/MenuPositioner.tsx new file mode 100644 index 00000000..9ed1f698 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/positioner/MenuPositioner.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Menu as MenuHeadless } from '@flippo-ui/headless-components/menu'; +import { cx } from 'class-variance-authority'; + +import styles from './MenuPositioner.module.scss'; + +export function MenuPositioner(props: MenuPositioner.Props) { + const { className, sideOffset = 8, ...otherProps } = props; + + return ; +} + +export namespace MenuPositioner { + export type Props = MenuHeadless.Positioner.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/radio-group/MenuRadioGroup.module.scss b/packages/ui/uikit/flippo/components/src/components/Menu/ui/radio-group/MenuRadioGroup.module.scss new file mode 100644 index 00000000..175340ee --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/radio-group/MenuRadioGroup.module.scss @@ -0,0 +1,5 @@ +@use 'mixins/_flex' as flex; + +.MenuRadioGroup { + @include flex.display(flex, column, null, null, var(--f-spacing-2)); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/radio-group/MenuRadioGroup.tsx b/packages/ui/uikit/flippo/components/src/components/Menu/ui/radio-group/MenuRadioGroup.tsx new file mode 100644 index 00000000..17692688 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/radio-group/MenuRadioGroup.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Menu as MenuHeadless } from '@flippo-ui/headless-components/menu'; +import { cx } from 'class-variance-authority'; + +import styles from './MenuRadioGroup.module.scss'; + +export function MenuRadioGroup(props: MenuRadioGroup.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace MenuRadioGroup { + export type Props = MenuHeadless.RadioGroup.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/radio-item-indicator/MenuRadioItemIndicator.module.scss b/packages/ui/uikit/flippo/components/src/components/Menu/ui/radio-item-indicator/MenuRadioItemIndicator.module.scss new file mode 100644 index 00000000..c881d414 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/radio-item-indicator/MenuRadioItemIndicator.module.scss @@ -0,0 +1,67 @@ +@use 'mixins/_common.scss' as common; + +.MenuRadioItemIndicator { + @include common.reset-appearance(); + + grid-column-start: 1; + + box-sizing: border-box; + display: flex; + width: 1.25rem; + height: 1.25rem; + align-items: center; + justify-content: center; + border-radius: 100%; + outline: 0; + padding: 0; + margin: 0; + border: none; + + cursor: pointer; + + &[data-unchecked] { + border: var(--f-spacing-0) solid var(--f-color-stroke-hover); + background-color: transparent; + } + + &[data-checked] { + background-color: var(--f-color-brand-hover); + border-color: var(--f-color-brand-hover); + } + + &:focus-visible { + outline: var(--f-spacing-0) solid var(--f-color-brand-light); + outline-offset: 2px; + } + + &:disabled { + cursor: default; + + &[data-unchecked] { + border-color: var(--f-color-stroke-muted); + } + + &[data-checked] { + border-color: var(--f-color-brand-disabled); + background-color: var(--f-color-brand-disabled); + } + } +} + +.RadioIcon { + display: flex; + align-items: center; + justify-content: center; + + [data-unchecked] & { + display: none; + } + + &::before { + content: ''; + border-radius: 100%; + width: var(--f-spacing-2); + height: var(--f-spacing-2); + background-color: var(--f-color-bg-2); + } +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/radio-item-indicator/MenuRadioItemIndicator.tsx b/packages/ui/uikit/flippo/components/src/components/Menu/ui/radio-item-indicator/MenuRadioItemIndicator.tsx new file mode 100644 index 00000000..e53c3463 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/radio-item-indicator/MenuRadioItemIndicator.tsx @@ -0,0 +1,24 @@ +import React from 'react'; + +import { Menu as MenuHeadless } from '@flippo-ui/headless-components/menu'; +import { cx } from 'class-variance-authority'; + +import styles from './MenuRadioItemIndicator.module.scss'; + +export function MenuRadioItemIndicator(props: MenuRadioItemIndicator.Props) { + const { className, ...otherProps } = props; + + return ; +} + +MenuRadioItemIndicator.Svg = RadioSvg; + +export namespace MenuRadioItemIndicator { + export type Props = MenuHeadless.RadioItemIndicator.Props; +} + +function RadioSvg(props: React.ComponentProps<'span'>) { + const { className, ...otherProps } = props; + + return ; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/radio-item/MenuRadioItem.module.scss b/packages/ui/uikit/flippo/components/src/components/Menu/ui/radio-item/MenuRadioItem.module.scss new file mode 100644 index 00000000..c7ebf0f8 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/radio-item/MenuRadioItem.module.scss @@ -0,0 +1,29 @@ +@use 'mixins/_common.scss' as common; +@use 'mixins/_font.scss' as font; + +.MenuRadioItem { + @include common.reset-appearance(); + @include font.bodyMinus(default); + + padding: var(--f-spacing-3) var(--f-spacing-5); + min-width: var(--anchor-width); + display: grid; + gap: var(--f-spacing-4); + align-items: center; + grid-template-columns: var(--f-spacing-5) 1fr; + cursor: default; + -webkit-user-select: none; + user-select: none; + scroll-margin-block: var(--f-spacing-1); + color: var(--f-color-text-3); + + @media (pointer: coarse) { + padding-block: var(--f-spacing-4); + } + + &[data-highlighted] { + z-index: 0; + position: relative; + color: var(--f-color-text-white); + } +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/radio-item/MenuRadioItem.tsx b/packages/ui/uikit/flippo/components/src/components/Menu/ui/radio-item/MenuRadioItem.tsx new file mode 100644 index 00000000..6eb4b67a --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/radio-item/MenuRadioItem.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Menu as MenuHeadless } from '@flippo-ui/headless-components/menu'; +import { cx } from 'class-variance-authority'; + +import styles from './MenuRadioItem.module.scss'; + +export function MenuRadioItem(props: MenuRadioItem.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace MenuRadioItem { + export type Props = MenuHeadless.RadioItem.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/root/MenuRoot.tsx b/packages/ui/uikit/flippo/components/src/components/Menu/ui/root/MenuRoot.tsx new file mode 100644 index 00000000..ee6632fd --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/root/MenuRoot.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +import { Menu as MenuHeadless } from '@flippo-ui/headless-components/menu'; + +export function MenuRoot(props: MenuRoot.Props) { + return ; +} + +export namespace MenuRoot { + export type Props = MenuHeadless.Root.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/submenu-root/MenuSubmenuRoot.tsx b/packages/ui/uikit/flippo/components/src/components/Menu/ui/submenu-root/MenuSubmenuRoot.tsx new file mode 100644 index 00000000..bfee3b2e --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/submenu-root/MenuSubmenuRoot.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +import { Menu as MenuHeadless } from '@flippo-ui/headless-components/menu'; + +export function MenuSubmenuRoot(props: MenuSubmenuRoot.Props) { + return ; +} + +export namespace MenuSubmenuRoot { + export type Props = MenuHeadless.SubmenuRoot.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/submenu-trigger/MenuSubmenuTrigger.tsx b/packages/ui/uikit/flippo/components/src/components/Menu/ui/submenu-trigger/MenuSubmenuTrigger.tsx new file mode 100644 index 00000000..c78c4da0 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/submenu-trigger/MenuSubmenuTrigger.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +import { Menu as MenuHeadless } from '@flippo-ui/headless-components/menu'; +import { ChevronRightIcon } from '@flippo-ui/icons'; + +export function MenuSubmenuTrigger(props: MenuSubmenuTrigger.Props) { + return ; +} + +MenuSubmenuTrigger.Svg = ChevronRightIcon; + +export namespace MenuSubmenuTrigger { + export type Props = MenuHeadless.SubmenuTrigger.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menu/ui/trigger/MenuTrigger.tsx b/packages/ui/uikit/flippo/components/src/components/Menu/ui/trigger/MenuTrigger.tsx new file mode 100644 index 00000000..aa38d59a --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menu/ui/trigger/MenuTrigger.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +import { Menu as MenuHeadless } from '@flippo-ui/headless-components/menu'; + +export function MenuTrigger(props: MenuTrigger.Props) { + return ; +} + +export namespace MenuTrigger { + export type Props = MenuHeadless.Trigger.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menubar/index.ts b/packages/ui/uikit/flippo/components/src/components/Menubar/index.ts new file mode 100644 index 00000000..54b08422 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menubar/index.ts @@ -0,0 +1 @@ +export { Menubar } from './ui/Menubar'; diff --git a/packages/ui/uikit/flippo/components/src/components/Menubar/story/Menubar.stories.tsx b/packages/ui/uikit/flippo/components/src/components/Menubar/story/Menubar.stories.tsx new file mode 100644 index 00000000..ceb055df --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menubar/story/Menubar.stories.tsx @@ -0,0 +1,62 @@ +import React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import { Menubar } from '..'; + +const meta: Meta = { + title: 'Navigation/Menubar', + component: Menubar +}; + +export default meta; + +type MenubarStory = StoryObj; + +// Note: This is a simplified example. In a real app, you would use Menu components inside Menubar +export const Default: MenubarStory = { + render: (args) => ( + + + + + + + ) +}; diff --git a/packages/ui/uikit/flippo/components/src/components/Menubar/ui/Menubar.module.scss b/packages/ui/uikit/flippo/components/src/components/Menubar/ui/Menubar.module.scss new file mode 100644 index 00000000..1676d8bf --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menubar/ui/Menubar.module.scss @@ -0,0 +1,11 @@ +@use 'mixins/_common.scss' as common; + +.Menubar { + @include common.reset-appearance(); + + display: flex; + background-color: var(--f-color-bg-1); + border: 1px solid var(--f-color-stroke-transparent); + border-radius: var(--f-spacing-2); + padding: var(--f-spacing-1); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Menubar/ui/Menubar.tsx b/packages/ui/uikit/flippo/components/src/components/Menubar/ui/Menubar.tsx new file mode 100644 index 00000000..20abb4a6 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Menubar/ui/Menubar.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Menubar as MenubarHeadless } from '@flippo-ui/headless-components/menubar'; +import { cx } from 'class-variance-authority'; + +import styles from './Menubar.module.scss'; + +export function Menubar(props: Menubar.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace Menubar { + export type Props = MenubarHeadless.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Meter/index.parts.ts b/packages/ui/uikit/flippo/components/src/components/Meter/index.parts.ts new file mode 100644 index 00000000..beddf598 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Meter/index.parts.ts @@ -0,0 +1,5 @@ +export { MeterIndicator as Indicator } from './ui/indicator/MeterIndicator'; +export { MeterLabel as Label } from './ui/label/MeterLabel'; +export { MeterRoot as Root } from './ui/root/MeterRoot'; +export { MeterTrack as Track } from './ui/track/MeterTrack'; +export { MeterValue as Value } from './ui/value/MeterValue'; diff --git a/packages/ui/uikit/flippo/components/src/components/Meter/index.ts b/packages/ui/uikit/flippo/components/src/components/Meter/index.ts new file mode 100644 index 00000000..170d463d --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Meter/index.ts @@ -0,0 +1 @@ +export * as Meter from './index.parts'; diff --git a/packages/ui/uikit/flippo/components/src/components/Meter/story/Meter.stories.tsx b/packages/ui/uikit/flippo/components/src/components/Meter/story/Meter.stories.tsx new file mode 100644 index 00000000..44ff6a0c --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Meter/story/Meter.stories.tsx @@ -0,0 +1,26 @@ +import React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import { Meter } from '..'; + +const meta: Meta = { + title: 'Display/Meter', + component: Meter.Root +}; + +export default meta; + +type MeterStory = StoryObj; + +export const Default: MeterStory = { + render: (args) => ( + + {'Storage Usage'} + + + + + + ) +}; diff --git a/packages/ui/uikit/flippo/components/src/components/Meter/ui/indicator/MeterIndicator.module.scss b/packages/ui/uikit/flippo/components/src/components/Meter/ui/indicator/MeterIndicator.module.scss new file mode 100644 index 00000000..f41048d7 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Meter/ui/indicator/MeterIndicator.module.scss @@ -0,0 +1,10 @@ +@use 'mixins/_common.scss' as common; + +.MeterIndicator { + @include common.reset-appearance; + + display: block; + background-color: var(--f-color-brand-light); + transition: width 500ms; + border-radius: var(--f-spacing-1); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Meter/ui/indicator/MeterIndicator.tsx b/packages/ui/uikit/flippo/components/src/components/Meter/ui/indicator/MeterIndicator.tsx new file mode 100644 index 00000000..e0b1dcf8 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Meter/ui/indicator/MeterIndicator.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Meter as MeterHeadless } from '@flippo-ui/headless-components/meter'; +import { cx } from 'class-variance-authority'; + +import styles from './MeterIndicator.module.scss'; + +export function MeterIndicator(props: MeterIndicator.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace MeterIndicator { + export type Props = MeterHeadless.Indicator.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Meter/ui/label/MeterLabel.module.scss b/packages/ui/uikit/flippo/components/src/components/Meter/ui/label/MeterLabel.module.scss new file mode 100644 index 00000000..b4a1422d --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Meter/ui/label/MeterLabel.module.scss @@ -0,0 +1,9 @@ +@use 'mixins/_common.scss' as common; +@use 'mixins/_font.scss' as font; + +.MeterLabel { + @include common.reset-appearance; + @include font.label(weaker); + + color: var(--f-color-text-5); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Meter/ui/label/MeterLabel.tsx b/packages/ui/uikit/flippo/components/src/components/Meter/ui/label/MeterLabel.tsx new file mode 100644 index 00000000..1e815971 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Meter/ui/label/MeterLabel.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Meter as MeterHeadless } from '@flippo-ui/headless-components/meter'; +import { cx } from 'class-variance-authority'; + +import styles from './MeterLabel.module.scss'; + +export function MeterLabel(props: MeterLabel.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace MeterLabel { + export type Props = MeterHeadless.Label.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Meter/ui/root/MeterRoot.module.scss b/packages/ui/uikit/flippo/components/src/components/Meter/ui/root/MeterRoot.module.scss new file mode 100644 index 00000000..f365a6eb --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Meter/ui/root/MeterRoot.module.scss @@ -0,0 +1,11 @@ +@use 'mixins/_common.scss' as common; + +.MeterRoot { + @include common.reset-appearance; + + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: var(--f-spacing-1); + grid-row-gap: var(--f-spacing-2); + width: 100%; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Meter/ui/root/MeterRoot.tsx b/packages/ui/uikit/flippo/components/src/components/Meter/ui/root/MeterRoot.tsx new file mode 100644 index 00000000..432b8b94 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Meter/ui/root/MeterRoot.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Meter as MeterHeadless } from '@flippo-ui/headless-components/meter'; +import { cx } from 'class-variance-authority'; + +import styles from './MeterRoot.module.scss'; + +export function MeterRoot(props: MeterRoot.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace MeterRoot { + export type Props = MeterHeadless.Root.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Meter/ui/track/MeterTrack.module.scss b/packages/ui/uikit/flippo/components/src/components/Meter/ui/track/MeterTrack.module.scss new file mode 100644 index 00000000..40aad124 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Meter/ui/track/MeterTrack.module.scss @@ -0,0 +1,11 @@ +@use 'mixins/_common.scss' as common; + +.MeterTrack { + @include common.reset-appearance; + + grid-column: 1 / 3; + overflow: hidden; + background-color: var(--f-color-bg-2-hover); + height: var(--f-spacing-1); + border-radius: var(--f-spacing-1); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Meter/ui/track/MeterTrack.tsx b/packages/ui/uikit/flippo/components/src/components/Meter/ui/track/MeterTrack.tsx new file mode 100644 index 00000000..2679c933 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Meter/ui/track/MeterTrack.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Meter as MeterHeadless } from '@flippo-ui/headless-components/meter'; +import { cx } from 'class-variance-authority'; + +import styles from './MeterTrack.module.scss'; + +export function MeterTrack(props: MeterTrack.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace MeterTrack { + export type Props = MeterHeadless.Track.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Meter/ui/value/MeterValue.module.scss b/packages/ui/uikit/flippo/components/src/components/Meter/ui/value/MeterValue.module.scss new file mode 100644 index 00000000..2c91f682 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Meter/ui/value/MeterValue.module.scss @@ -0,0 +1,12 @@ +@use 'mixins/_common.scss' as common; +@use 'mixins/_font.scss' as font; + +.MeterValue { + @include common.reset-appearance(); + @include font.label(weaker); + + grid-column-start: 2; + margin: 0; + color: var(--f-color-text-5); + text-align: right; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Meter/ui/value/MeterValue.tsx b/packages/ui/uikit/flippo/components/src/components/Meter/ui/value/MeterValue.tsx new file mode 100644 index 00000000..eebe76c7 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Meter/ui/value/MeterValue.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Meter as MeterHeadless } from '@flippo-ui/headless-components/meter'; +import { cx } from 'class-variance-authority'; + +import styles from './MeterValue.module.scss'; + +export function MeterValue(props: MeterValue.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace MeterValue { + export type Props = MeterHeadless.Value.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/NumberField/index.parts.ts b/packages/ui/uikit/flippo/components/src/components/NumberField/index.parts.ts new file mode 100644 index 00000000..dcdb83eb --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/NumberField/index.parts.ts @@ -0,0 +1,7 @@ +export { NumberFieldDecrement as Decrement } from './ui/decrement/NumberFieldDecrement'; +export { NumberFieldGroup as Group } from './ui/group/NumberFieldGroup'; +export { NumberFieldIncrement as Increment } from './ui/increment/NumberFieldIncrement'; +export { NumberFieldInput as Input } from './ui/input/NumberFieldInput'; +export { NumberFieldRoot as Root } from './ui/root/NumberFieldRoot'; +export { NumberFieldScrubAreaCursor as ScrubAreaCursor } from './ui/scrub-area-cursor/NumberFieldScrubAreaCursor'; +export { NumberFieldScrubArea as ScrubArea } from './ui/scrub-area/NumberFieldScrubArea'; diff --git a/packages/ui/uikit/flippo/components/src/components/NumberField/index.ts b/packages/ui/uikit/flippo/components/src/components/NumberField/index.ts new file mode 100644 index 00000000..e97deaf6 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/NumberField/index.ts @@ -0,0 +1 @@ +export * as NumberField from './index.parts'; diff --git a/packages/ui/uikit/flippo/components/src/components/NumberField/story/NumberField.stories.tsx b/packages/ui/uikit/flippo/components/src/components/NumberField/story/NumberField.stories.tsx new file mode 100644 index 00000000..1ed0cf43 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/NumberField/story/NumberField.stories.tsx @@ -0,0 +1,26 @@ +import React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import { NumberField } from '..'; + +const meta: Meta = { + title: 'Input/NumberField', + component: NumberField.Root +}; + +export default meta; + +type NumberFieldStory = StoryObj; + +export const Default: NumberFieldStory = { + render: (args) => ( + + + + + + + + ) +}; diff --git a/packages/ui/uikit/flippo/components/src/components/NumberField/ui/decrement/NumberFieldDecrement.module.scss b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/decrement/NumberFieldDecrement.module.scss new file mode 100644 index 00000000..d8f102dc --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/decrement/NumberFieldDecrement.module.scss @@ -0,0 +1,38 @@ +@use 'mixins/_common.scss' as common; + +.NumberFieldDecrement { + @include common.reset-appearance(); + + display: flex; + align-items: center; + justify-content: center; + width: var(--f-spacing-12); + height: var(--f-spacing-12); + border: 1.5px solid transparent; + border-radius: var(--f-spacing-max); + background-color: var(--f-color-bg-area-muted); + background-clip: padding-box; + color: var(--f-color-text-4); + user-select: none; + + border-top-right-radius: 0; + border-bottom-right-radius: 0; + + @media (hover: hover) { + &:hover { + background: var(--f-color-bg-area-subtle); + border-color: var(--f-color-stroke); + color: var(--f-color-text-white); + } + } + + &:active { + background-color: var(--f-color-bg-2); + color: var(--f-color-text-4); + } +} + +.DecrementIcon { + width: var(--f-spacing-3); + height: var(--f-spacing-3); +} diff --git a/packages/ui/uikit/flippo/components/src/components/NumberField/ui/decrement/NumberFieldDecrement.tsx b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/decrement/NumberFieldDecrement.tsx new file mode 100644 index 00000000..52c6beff --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/decrement/NumberFieldDecrement.tsx @@ -0,0 +1,35 @@ +import React from 'react'; + +import { NumberField as NumberFieldHeadless } from '@flippo-ui/headless-components/number-field'; +import { cx } from 'class-variance-authority'; + +import styles from './NumberFieldDecrement.module.scss'; + +export function NumberFieldDecrement(props: NumberFieldDecrement.Props) { + const { className, ...otherProps } = props; + + return ; +} + +NumberFieldDecrement.Svg = DecrementSvg; + +export namespace NumberFieldDecrement { + export type Props = NumberFieldHeadless.Decrement.Props; +} + +function DecrementSvg(props: React.ComponentProps<'svg'>) { + return ( + + + + ); +} diff --git a/packages/ui/uikit/flippo/components/src/components/NumberField/ui/group/NumberFieldGroup.module.scss b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/group/NumberFieldGroup.module.scss new file mode 100644 index 00000000..fe1aae3d --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/group/NumberFieldGroup.module.scss @@ -0,0 +1,7 @@ +@use 'mixins/_common.scss' as common; + +.NumberFieldGroup { + @include common.reset-appearance; + + display: flex; +} diff --git a/packages/ui/uikit/flippo/components/src/components/NumberField/ui/group/NumberFieldGroup.tsx b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/group/NumberFieldGroup.tsx new file mode 100644 index 00000000..9807d55f --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/group/NumberFieldGroup.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { NumberField as NumberFieldHeadless } from '@flippo-ui/headless-components/number-field'; +import { cx } from 'class-variance-authority'; + +import styles from './NumberFieldGroup.module.scss'; + +export function NumberFieldGroup(props: NumberFieldGroup.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace NumberFieldGroup { + export type Props = NumberFieldHeadless.Group.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/NumberField/ui/increment/NumberFieldIncrement.module.scss b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/increment/NumberFieldIncrement.module.scss new file mode 100644 index 00000000..f2e97b11 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/increment/NumberFieldIncrement.module.scss @@ -0,0 +1,38 @@ +@use 'mixins/_common.scss' as common; + +.NumberFieldIncrement { + @include common.reset-appearance(); + + display: flex; + align-items: center; + justify-content: center; + width: var(--f-spacing-12); + height: var(--f-spacing-12); + border: 1.5px solid transparent; + border-radius: var(--f-spacing-max); + background-color: var(--f-color-bg-area-muted); + background-clip: padding-box; + color: var(--f-color-text-4); + user-select: none; + + border-top-left-radius: 0; + border-bottom-left-radius: 0; + + @media (hover: hover) { + &:hover { + background: var(--f-color-bg-area-subtle); + border-color: var(--f-color-stroke); + color: var(--f-color-text-white); + } + } + + &:active { + background-color: var(--f-color-bg-2); + color: var(--f-color-text-4); + } +} + +.IncrementIcon { + width: var(--f-spacing-3); + height: var(--f-spacing-3); +} diff --git a/packages/ui/uikit/flippo/components/src/components/NumberField/ui/increment/NumberFieldIncrement.tsx b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/increment/NumberFieldIncrement.tsx new file mode 100644 index 00000000..13b84892 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/increment/NumberFieldIncrement.tsx @@ -0,0 +1,35 @@ +import React from 'react'; + +import { NumberField as NumberFieldHeadless } from '@flippo-ui/headless-components/number-field'; +import { cx } from 'class-variance-authority'; + +import styles from './NumberFieldIncrement.module.scss'; + +export function NumberFieldIncrement(props: NumberFieldIncrement.Props) { + const { className, ...otherProps } = props; + + return ; +} + +NumberFieldIncrement.Svg = IncrementSvg; + +export namespace NumberFieldIncrement { + export type Props = NumberFieldHeadless.Increment.Props; +} + +function IncrementSvg(props: React.ComponentProps<'svg'>) { + return ( + + + + ); +} diff --git a/packages/ui/uikit/flippo/components/src/components/NumberField/ui/input/NumberFieldInput.module.scss b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/input/NumberFieldInput.module.scss new file mode 100644 index 00000000..c0b600b1 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/input/NumberFieldInput.module.scss @@ -0,0 +1,45 @@ +@use 'mixins/_common.scss' as common; +@use 'mixins/_font.scss' as font; + +.NumberFieldInput { + @include common.reset-appearance(); + @include font.body(default); + + border-radius: 0; + border-top: 1.5px solid transparent; + border-bottom: 1.5px solid transparent; + + width: var(--f-spacing-18); + height: var(--f-spacing-12); + font-family: inherit; + color: var(--f-color-text-primary); + + text-align: center; + font-variant-numeric: tabular-nums; + + background: var(--f-color-bg-area-muted); + background-clip: padding-box; + + &:hover { + background: var(--f-color-bg-area-subtle); + border-color: var(--f-color-stroke); + + &[data-invalid] { + border-color: var(--f-color-error-hover); + } + } + + &[data-invalid] { + border-color: var(--f-color-error); + } + + &:is(:focus-within, [data-focused]) { + background: var(--f-color-bg-area-muted); + border: 1.5px solid var(--f-color-brand-light); + } + + &:is(:disabled, [data-disabled]) { + background: var(--f-color-bg-area-muted); + color: var(--f-color-text-disabled); + } +} diff --git a/packages/ui/uikit/flippo/components/src/components/NumberField/ui/input/NumberFieldInput.tsx b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/input/NumberFieldInput.tsx new file mode 100644 index 00000000..92fb6d49 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/input/NumberFieldInput.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { NumberField as NumberFieldHeadless } from '@flippo-ui/headless-components/number-field'; +import { cx } from 'class-variance-authority'; + +import styles from './NumberFieldInput.module.scss'; + +export function NumberFieldInput(props: NumberFieldInput.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace NumberFieldInput { + export type Props = NumberFieldHeadless.Input.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/NumberField/ui/root/NumberFieldRoot.module.scss b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/root/NumberFieldRoot.module.scss new file mode 100644 index 00000000..94fb685c --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/root/NumberFieldRoot.module.scss @@ -0,0 +1,10 @@ +@use 'mixins/_common.scss' as common; + +.NumberFieldRoot { + @include common.reset-appearance(); + + display: flex; + flex-direction: column; + align-items: start; + gap: var(--f-spacing-1); +} diff --git a/packages/ui/uikit/flippo/components/src/components/NumberField/ui/root/NumberFieldRoot.tsx b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/root/NumberFieldRoot.tsx new file mode 100644 index 00000000..203895ed --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/root/NumberFieldRoot.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { NumberField as NumberFieldHeadless } from '@flippo-ui/headless-components/number-field'; +import { cx } from 'class-variance-authority'; + +import styles from './NumberFieldRoot.module.scss'; + +export function NumberFieldRoot(props: NumberFieldRoot.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace NumberFieldRoot { + export type Props = NumberFieldHeadless.Root.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/NumberField/ui/scrub-area-cursor/NumberFieldScrubAreaCursor.module.scss b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/scrub-area-cursor/NumberFieldScrubAreaCursor.module.scss new file mode 100644 index 00000000..07cfb88f --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/scrub-area-cursor/NumberFieldScrubAreaCursor.module.scss @@ -0,0 +1,7 @@ +@use 'mixins/_common.scss' as common; + +.NumberFieldScrubAreaCursor { + @include common.reset-appearance; + + filter: drop-shadow(0 1px 1px var(--f-color-neutral-10)); +} diff --git a/packages/ui/uikit/flippo/components/src/components/NumberField/ui/scrub-area-cursor/NumberFieldScrubAreaCursor.tsx b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/scrub-area-cursor/NumberFieldScrubAreaCursor.tsx new file mode 100644 index 00000000..e8d9b5ea --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/scrub-area-cursor/NumberFieldScrubAreaCursor.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { NumberField as NumberFieldHeadless } from '@flippo-ui/headless-components/number-field'; +import { cx } from 'class-variance-authority'; + +import styles from './NumberFieldScrubAreaCursor.module.scss'; + +export function NumberFieldScrubAreaCursor(props: NumberFieldScrubAreaCursor.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace NumberFieldScrubAreaCursor { + export type Props = NumberFieldHeadless.ScrubAreaCursor.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/NumberField/ui/scrub-area/NumberFieldScrubArea.module.scss b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/scrub-area/NumberFieldScrubArea.module.scss new file mode 100644 index 00000000..6cc2ffba --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/scrub-area/NumberFieldScrubArea.module.scss @@ -0,0 +1,9 @@ +@use 'mixins/_common.scss' as common; + +.NumberFieldScrubArea { + @include common.reset-appearance(); + + cursor: ew-resize; + font-weight: bold; + user-select: none; +} diff --git a/packages/ui/uikit/flippo/components/src/components/NumberField/ui/scrub-area/NumberFieldScrubArea.tsx b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/scrub-area/NumberFieldScrubArea.tsx new file mode 100644 index 00000000..bf1eb8b6 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/NumberField/ui/scrub-area/NumberFieldScrubArea.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { NumberField as NumberFieldHeadless } from '@flippo-ui/headless-components/number-field'; +import { cx } from 'class-variance-authority'; + +import styles from './NumberFieldScrubArea.module.scss'; + +export function NumberFieldScrubArea(props: NumberFieldScrubArea.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace NumberFieldScrubArea { + export type Props = NumberFieldHeadless.ScrubArea.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/PinInput/index.parts.ts b/packages/ui/uikit/flippo/components/src/components/PinInput/index.parts.ts new file mode 100644 index 00000000..9e62d279 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/PinInput/index.parts.ts @@ -0,0 +1,4 @@ +export { PinInputFocusFunnel as FocusFunnel } from './ui/focus-funnel/PinInputFocusFunnel'; +export { PinInputGroup as Group } from './ui/group/PinInputGroup'; +export { PinInputPin as Pin } from './ui/pin/PinInputPin'; +export { PinInputRoot as Root } from './ui/root/PinInputRoot'; diff --git a/packages/ui/uikit/flippo/components/src/components/PinInput/index.ts b/packages/ui/uikit/flippo/components/src/components/PinInput/index.ts new file mode 100644 index 00000000..54c88e78 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/PinInput/index.ts @@ -0,0 +1 @@ +export * as PinInput from './index.parts'; diff --git a/packages/ui/uikit/flippo/components/src/components/PinInput/story/PinInput.stories.tsx b/packages/ui/uikit/flippo/components/src/components/PinInput/story/PinInput.stories.tsx new file mode 100644 index 00000000..c1b1bb03 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/PinInput/story/PinInput.stories.tsx @@ -0,0 +1,42 @@ +import React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import { PinInput } from '..'; + +const meta: Meta = { + title: 'Input/PinInput', + component: PinInput.Root +}; + +export default meta; + +type PinInputStory = StoryObj; + +export const PinInputInverted: PinInputStory = { + args: {}, + render: () => ( + {}}> + + + + + + + + ) +}; + +export const PinInputLight: PinInputStory = { + args: {}, + render: () => ( + {}}> + + + + + + + + ) +}; diff --git a/packages/ui/uikit/flippo/components/src/components/PinInput/ui/focus-funnel/PinInputFocusFunnel.module.scss b/packages/ui/uikit/flippo/components/src/components/PinInput/ui/focus-funnel/PinInputFocusFunnel.module.scss new file mode 100644 index 00000000..bc5f8dfc --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/PinInput/ui/focus-funnel/PinInputFocusFunnel.module.scss @@ -0,0 +1,6 @@ +@use 'mixins/_flex.scss' as flex; + +.PinInputFocusFunnel { + @include flex.display(flex, row, center, center, var(--f-spacing-3)); + color: var(--f-color-text-primary); +} diff --git a/packages/ui/uikit/flippo/components/src/components/PinInput/ui/focus-funnel/PinInputFocusFunnel.tsx b/packages/ui/uikit/flippo/components/src/components/PinInput/ui/focus-funnel/PinInputFocusFunnel.tsx new file mode 100644 index 00000000..7dab0d44 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/PinInput/ui/focus-funnel/PinInputFocusFunnel.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +import { PinInput as PinInputHeadless } from '@flippo-ui/headless-components/pin-input'; +import { cx } from 'class-variance-authority'; + +import styles from './PinInputFocusFunnel.module.scss'; + +export function PinInputFocusFunnel(props: PinInputFocusFunnel.Props) { + const { + className, + ...rest + } = props; + + return ; +} + +export namespace PinInputFocusFunnel { + export type Props = PinInputHeadless.FocusFunnel.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/PinInput/ui/group/PinInputGroup.tsx b/packages/ui/uikit/flippo/components/src/components/PinInput/ui/group/PinInputGroup.tsx new file mode 100644 index 00000000..2d8c89a1 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/PinInput/ui/group/PinInputGroup.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +import { PinInput as PinInputHeadless } from '@flippo-ui/headless-components/pin-input'; + +export function PinInputGroup(props: PinInputGroup.Props) { + return ; +} + +export namespace PinInputGroup { + export type Props = PinInputHeadless.Group.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/PinInput/ui/pin/PinInputPin.module.scss b/packages/ui/uikit/flippo/components/src/components/PinInput/ui/pin/PinInputPin.module.scss new file mode 100644 index 00000000..d8baefdb --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/PinInput/ui/pin/PinInputPin.module.scss @@ -0,0 +1,107 @@ +@use 'mixins/_flex.scss' as flex; +@use 'mixins/_font.scss' as font; +@use 'mixins/_corners.scss' as corners; + +.PinInputPin { + $ow: 1.5px; + $parent: &; + @include font.title-2('default'); + color: var(--f-color-text-primary); + + outline: none; + + flex: 0 1 100%; + + fill: var(--f-color-text-6); + + overflow: hidden; + //border-radius: var(--f-border-radius-card); + + text-align: center; + + &:read-only { + pointer-events: none; + } + + transition: + outline 0.3s ease, + background-color 0.3s ease; + + padding: var(--f-spacing-4) 0; + height: calc(var(--f-spacing-10) * 2); + max-width: var(--f-spacing-15); + + &:hover { + [data-slot]::placeholder { + color: var(--f-color-text-5); + } + } + + &:focus-within { + [data-slot]::placeholder { + color: var(--f-color-text-6); + } + } + + @include corners.corners((&, '::before', '::after'), var(--f-spacing-4)); + + &_light { + background: var(--f-color-bg-1); + border: $ow solid transparent; + + &:hover { + background: var(--f-color-bg-area-subtle); + border-color: var(--f-color-stroke-hover); + + &[data-invalid] { + border-color: var(--f-color-error-hover); + } + } + + &[data-invalid] { + border-color: var(--f-color-error); + } + + &:is(:focus-within, [data-focused]) { + background: var(--f-color-bg-area-muted); + border-color: var(--f-color-brand-light); + } + + &:is(:disabled, [data-disabled]) { + background: var(--f-color-bg-1); + color: var(--f-color-text-disabled); + } + } + + &_inverted { + background: var(--f-color-bg-area-muted); + border: $ow solid transparent; + + &:hover { + background: var(--f-color-bg-area-subtle); + border-color: var(--f-color-stroke); + + &[data-invalid] { + border-color: var(--f-color-error-hover); + } + } + + &[data-invalid] { + border-color: var(--f-color-error); + } + + &:is(:focus-within, [data-focused]) { + background: var(--f-color-bg-area-muted); + border-color: var(--f-color-brand-light); + } + + &:is(:disabled, [data-disabled]) { + background: var(--f-color-bg-area-muted); + color: var(--f-color-text-disabled); + } + } + + &[data-value] { + border-color: var(--f-color-brand-light); + } +} diff --git a/packages/ui/uikit/flippo/components/src/components/PinInput/ui/pin/PinInputPin.tsx b/packages/ui/uikit/flippo/components/src/components/PinInput/ui/pin/PinInputPin.tsx new file mode 100644 index 00000000..1edac7e2 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/PinInput/ui/pin/PinInputPin.tsx @@ -0,0 +1,47 @@ +import React from 'react'; + +import { PinInput as PinInputHeadless } from '@flippo-ui/headless-components/pin-input'; +import { cva } from 'class-variance-authority'; + +import type { VariantProps } from 'class-variance-authority'; + +import styles from './PinInputPin.module.scss'; + +const PinInputPinVariants = cva(styles.PinInputPin, { + variants: { + variant: { + inverted: styles.PinInputPin_inverted, + light: styles.PinInputPin_light + }, + corners: { + 'clear': styles['corners-clear-clear'], + 'circle': styles['corners-circle-circle'], + 'round': styles['corners-round-round'], + 'round-clear': styles['corners-round-clear'], + 'clear-round': styles['corners-clear-round'], + 'round-circle': styles['corners-round-circle'], + 'clear-circle': styles['corners-clear-circle'] + } + }, + defaultVariants: { + variant: 'inverted', + corners: 'round' + } +}); + +export function PinInputPin(props: PinInputPin.Props) { + const { + className, + variant = 'inverted', + corners = 'round', + ...rest + } = props; + + const pinInputPinClasses = PinInputPinVariants({ variant, corners, className }); + + return ; +} + +export namespace PinInputPin { + export type Props = PinInputHeadless.Pin.Props & VariantProps; +} diff --git a/packages/ui/uikit/flippo/components/src/components/PinInput/ui/root/PinInputRoot.module.scss b/packages/ui/uikit/flippo/components/src/components/PinInput/ui/root/PinInputRoot.module.scss new file mode 100644 index 00000000..3ca49543 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/PinInput/ui/root/PinInputRoot.module.scss @@ -0,0 +1,6 @@ +@use 'mixins/_flex.scss' as flex; + +.PinInputRoot { + @include flex.display(flex, row, center, center, var(--f-spacing-3)); + color: var(--f-color-text-primary); +} diff --git a/packages/ui/uikit/flippo/components/src/components/PinInput/ui/root/PinInputRoot.tsx b/packages/ui/uikit/flippo/components/src/components/PinInput/ui/root/PinInputRoot.tsx new file mode 100644 index 00000000..7730b6f4 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/PinInput/ui/root/PinInputRoot.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +import { PinInput as PinInputHeadless } from '@flippo-ui/headless-components/pin-input'; +import { cx } from 'class-variance-authority'; + +import styles from './PinInputRoot.module.scss'; + +export function PinInputRoot(props: PinInputRoot.Props) { + const { + className, + ...rest + } = props; + + return ; +} + +export namespace PinInputRoot { + export type Props = PinInputHeadless.Root.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Popover/index.parts.ts b/packages/ui/uikit/flippo/components/src/components/Popover/index.parts.ts new file mode 100644 index 00000000..29244c88 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Popover/index.parts.ts @@ -0,0 +1,10 @@ +export { PopoverArrow as Arrow } from './ui/arrow/PopoverArrow'; +export { PopoverBackdrop as Backdrop } from './ui/backdrop/PopoverBackdrop'; +export { PopoverClose as Close } from './ui/close/PopoverClose'; +export { PopoverDescription as Description } from './ui/description/PopoverDescription'; +export { PopoverPopup as Popup } from './ui/popup/PopoverPopup'; +export { PopoverPortal as Portal } from './ui/portal/PopoverPortal'; +export { PopoverPositioner as Positioner } from './ui/positioner/PopoverPositioner'; +export { PopoverRoot as Root } from './ui/root/PopoverRoot'; +export { PopoverTitle as Title } from './ui/title/PopoverTitle'; +export { PopoverTrigger as Trigger } from './ui/trigger/PopoverTrigger'; diff --git a/packages/ui/uikit/flippo/components/src/components/Popover/index.ts b/packages/ui/uikit/flippo/components/src/components/Popover/index.ts new file mode 100644 index 00000000..9d2d8d70 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Popover/index.ts @@ -0,0 +1 @@ +export * as Popover from './index.parts'; diff --git a/packages/ui/uikit/flippo/components/src/components/Popover/story/Popover.stories.tsx b/packages/ui/uikit/flippo/components/src/components/Popover/story/Popover.stories.tsx new file mode 100644 index 00000000..15b06451 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Popover/story/Popover.stories.tsx @@ -0,0 +1,48 @@ +import React from 'react'; + +import { NotificationsIcon } from '@flippo-ui/icons'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import { Popover } from '..'; +import { Button } from '../../Button'; + +const meta: Meta = { + title: 'Overlay/Popover', + component: Popover.Root +}; + +export default meta; + +type PopoverStory = StoryObj; + +export const Default: PopoverStory = { + render: (args) => ( +
+ + + + + + + + + + + + + {'Popover Title'} + + + {'This is a popover with some content. Popovers are great for '} + {'displaying additional information or actions.'} + + + + + +
+ ) +}; diff --git a/packages/ui/uikit/flippo/components/src/components/Popover/ui/arrow/PopoverArrow.module.scss b/packages/ui/uikit/flippo/components/src/components/Popover/ui/arrow/PopoverArrow.module.scss new file mode 100644 index 00000000..8cb20d97 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Popover/ui/arrow/PopoverArrow.module.scss @@ -0,0 +1,39 @@ +@use 'mixins/_common.scss' as common; + +.PopoverArrow { + @include common.reset-appearance(); + + display: flex; + + &[data-side='top'] { + bottom: -8px; + rotate: 180deg; + } + + &[data-side='bottom'] { + top: -8px; + rotate: 0deg; + } + + &[data-side='left'] { + right: -13px; + rotate: 90deg; + } + + &[data-side='right'] { + left: -13px; + rotate: -90deg; + } +} + +.ArrowFill { + fill: var(--f-color-bg-2-hover); +} + +.ArrowOuterStroke { + fill: var(--f-color-bg-2-hover); +} + +.ArrowInnerStroke { + fill: var(--f-color-bg-2-hover); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Popover/ui/arrow/PopoverArrow.tsx b/packages/ui/uikit/flippo/components/src/components/Popover/ui/arrow/PopoverArrow.tsx new file mode 100644 index 00000000..e0170784 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Popover/ui/arrow/PopoverArrow.tsx @@ -0,0 +1,33 @@ +import React from 'react'; + +import { Popover as PopoverHeadless } from '@flippo-ui/headless-components/popover'; +import { cx } from 'class-variance-authority'; + +import styles from './PopoverArrow.module.scss'; + +export function PopoverArrow(props: PopoverArrow.Props) { + const { className, ...otherProps } = props; + + return ; +} + +PopoverArrow.Svg = PopoverArrowSvg; + +export namespace PopoverArrow { + export type Props = PopoverHeadless.Arrow.Props; +} + +export function PopoverArrowSvg(props: React.ComponentProps<'svg'>) { + return ( + + + + + ); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Popover/ui/backdrop/PopoverBackdrop.module.scss b/packages/ui/uikit/flippo/components/src/components/Popover/ui/backdrop/PopoverBackdrop.module.scss new file mode 100644 index 00000000..703e298f --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Popover/ui/backdrop/PopoverBackdrop.module.scss @@ -0,0 +1,20 @@ +@use 'mixins/_common.scss' as common; + +.PopoverBackdrop { + @include common.reset-appearance(); + + position: fixed; + inset: 0; + background-color: var(--f-color-bg-1); + opacity: 0.2; + transition: opacity 150ms cubic-bezier(0.45, 1.005, 0, 1.005); + + @media (prefers-color-scheme: dark) { + opacity: 0.7; + } + + &[data-starting-style], + &[data-ending-style] { + opacity: 0; + } +} diff --git a/packages/ui/uikit/flippo/components/src/components/Popover/ui/backdrop/PopoverBackdrop.tsx b/packages/ui/uikit/flippo/components/src/components/Popover/ui/backdrop/PopoverBackdrop.tsx new file mode 100644 index 00000000..f57aa6ec --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Popover/ui/backdrop/PopoverBackdrop.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Popover as PopoverHeadless } from '@flippo-ui/headless-components/popover'; +import { cx } from 'class-variance-authority'; + +import styles from './PopoverBackdrop.module.scss'; + +export function PopoverBackdrop(props: PopoverBackdrop.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace PopoverBackdrop { + export type Props = PopoverHeadless.Backdrop.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Popover/ui/close/PopoverClose.tsx b/packages/ui/uikit/flippo/components/src/components/Popover/ui/close/PopoverClose.tsx new file mode 100644 index 00000000..66b0c43c --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Popover/ui/close/PopoverClose.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +import { Popover as PopoverHeadless } from '@flippo-ui/headless-components/popover'; + +export function PopoverClose(props: PopoverClose.Props) { + return ; +} + +export namespace PopoverClose { + export type Props = PopoverHeadless.Close.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Popover/ui/description/PopoverDescription.module.scss b/packages/ui/uikit/flippo/components/src/components/Popover/ui/description/PopoverDescription.module.scss new file mode 100644 index 00000000..e43b9b6d --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Popover/ui/description/PopoverDescription.module.scss @@ -0,0 +1,9 @@ +@use 'mixins/_common.scss' as common; +@use 'mixins/_font.scss' as font; + +.PopoverDescription { + @include common.reset-appearance; + @include font.body(default); + + color: var(--f-color-text-5); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Popover/ui/description/PopoverDescription.tsx b/packages/ui/uikit/flippo/components/src/components/Popover/ui/description/PopoverDescription.tsx new file mode 100644 index 00000000..7c5929f7 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Popover/ui/description/PopoverDescription.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Popover as PopoverHeadless } from '@flippo-ui/headless-components/popover'; +import { cx } from 'class-variance-authority'; + +import styles from './PopoverDescription.module.scss'; + +export function PopoverDescription(props: PopoverDescription.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace PopoverDescription { + export type Props = PopoverHeadless.Description.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Popover/ui/popup/PopoverPopup.module.scss b/packages/ui/uikit/flippo/components/src/components/Popover/ui/popup/PopoverPopup.module.scss new file mode 100644 index 00000000..40e26782 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Popover/ui/popup/PopoverPopup.module.scss @@ -0,0 +1,31 @@ +@use 'mixins/_font.scss' as font; +@use 'mixins/_effect.scss' as effect; +@use 'mixins/_common.scss' as common; + +.PopoverPopup { + @include common.reset-appearance(); + @include effect.elevation-1(); + @include font.label('default'); + + max-width: 300px; + box-sizing: border-box; + display: flex; + flex-direction: column; + padding: calc(var(--f-spacing-3) / 2) var(--f-spacing-3); + border-radius: var(--f-spacing-2); + background-color: var(--f-color-bg-2-hover); + transform-origin: var(--transform-origin); + transition: + transform 150ms, + opacity 150ms; + + &[data-starting-style], + &[data-ending-style] { + opacity: 0; + transform: scale(0.9); + } + + &[data-instant] { + transition-duration: 0ms; + } +} diff --git a/packages/ui/uikit/flippo/components/src/components/Popover/ui/popup/PopoverPopup.tsx b/packages/ui/uikit/flippo/components/src/components/Popover/ui/popup/PopoverPopup.tsx new file mode 100644 index 00000000..46673f98 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Popover/ui/popup/PopoverPopup.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Popover as PopoverHeadless } from '@flippo-ui/headless-components/popover'; +import { cx } from 'class-variance-authority'; + +import styles from './PopoverPopup.module.scss'; + +export function PopoverPopup(props: PopoverPopup.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace PopoverPopup { + export type Props = PopoverHeadless.Popup.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Popover/ui/portal/PopoverPortal.tsx b/packages/ui/uikit/flippo/components/src/components/Popover/ui/portal/PopoverPortal.tsx new file mode 100644 index 00000000..46069035 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Popover/ui/portal/PopoverPortal.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +import { Popover as PopoverHeadless } from '@flippo-ui/headless-components/popover'; + +export function PopoverPortal(props: PopoverPortal.Props) { + return ; +} + +export namespace PopoverPortal { + export type Props = PopoverHeadless.Portal.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Popover/ui/positioner/PopoverPositioner.tsx b/packages/ui/uikit/flippo/components/src/components/Popover/ui/positioner/PopoverPositioner.tsx new file mode 100644 index 00000000..0c8c4733 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Popover/ui/positioner/PopoverPositioner.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +import { Popover as PopoverHeadless } from '@flippo-ui/headless-components/popover'; + +export function PopoverPositioner(props: PopoverPositioner.Props) { + const { sideOffset = 8, ...otherProps } = props; + + return ; +} + +export namespace PopoverPositioner { + export type Props = PopoverHeadless.Positioner.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Popover/ui/root/PopoverRoot.tsx b/packages/ui/uikit/flippo/components/src/components/Popover/ui/root/PopoverRoot.tsx new file mode 100644 index 00000000..97636303 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Popover/ui/root/PopoverRoot.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +import { Popover as PopoverHeadless } from '@flippo-ui/headless-components/popover'; + +export function PopoverRoot(props: PopoverRoot.Props) { + return ; +} + +export namespace PopoverRoot { + export type Props = PopoverHeadless.Root.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Popover/ui/title/PopoverTitle.module.scss b/packages/ui/uikit/flippo/components/src/components/Popover/ui/title/PopoverTitle.module.scss new file mode 100644 index 00000000..1f64642e --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Popover/ui/title/PopoverTitle.module.scss @@ -0,0 +1,9 @@ +@use 'mixins/_common.scss' as common; +@use 'mixins/_font.scss' as font; + +.PopoverTitle { + @include common.reset-appearance; + @include font.heading-3(default); + + color: var(--f-color-text-primary); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Popover/ui/title/PopoverTitle.tsx b/packages/ui/uikit/flippo/components/src/components/Popover/ui/title/PopoverTitle.tsx new file mode 100644 index 00000000..36627674 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Popover/ui/title/PopoverTitle.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Popover as PopoverHeadless } from '@flippo-ui/headless-components/popover'; +import { cx } from 'class-variance-authority'; + +import styles from './PopoverTitle.module.scss'; + +export function PopoverTitle(props: PopoverTitle.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace PopoverTitle { + export type Props = PopoverHeadless.Title.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Popover/ui/trigger/PopoverTrigger.tsx b/packages/ui/uikit/flippo/components/src/components/Popover/ui/trigger/PopoverTrigger.tsx new file mode 100644 index 00000000..10093ccf --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Popover/ui/trigger/PopoverTrigger.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +import { Popover as PopoverHeadless } from '@flippo-ui/headless-components/popover'; + +export function PopoverTrigger(props: PopoverTrigger.Props) { + return ; +} + +export namespace PopoverTrigger { + export type Props = PopoverHeadless.Trigger.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Progress/index.parts.ts b/packages/ui/uikit/flippo/components/src/components/Progress/index.parts.ts new file mode 100644 index 00000000..1ca150f0 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Progress/index.parts.ts @@ -0,0 +1,5 @@ +export { ProgressIndicator as Indicator } from './ui/indicator/ProgressIndicator'; +export { ProgressLabel as Label } from './ui/label/ProgressLabel'; +export { ProgressRoot as Root } from './ui/root/ProgressRoot'; +export { ProgressTrack as Track } from './ui/track/ProgressTrack'; +export { ProgressValue as Value } from './ui/value/ProgressValue'; diff --git a/packages/ui/uikit/flippo/components/src/components/Progress/index.ts b/packages/ui/uikit/flippo/components/src/components/Progress/index.ts new file mode 100644 index 00000000..ee913fe8 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Progress/index.ts @@ -0,0 +1 @@ +export * as Progress from './index.parts'; diff --git a/packages/ui/uikit/flippo/components/src/components/Progress/story/Progress.stories.tsx b/packages/ui/uikit/flippo/components/src/components/Progress/story/Progress.stories.tsx new file mode 100644 index 00000000..0bd3a8c9 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Progress/story/Progress.stories.tsx @@ -0,0 +1,26 @@ +import React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import { Progress } from '..'; + +const meta: Meta = { + title: 'Display/Progress', + component: Progress.Root +}; + +export default meta; + +type ProgressStory = StoryObj; + +export const Default: ProgressStory = { + render: (args) => ( + + {'Loading...'} + + + + + + ) +}; diff --git a/packages/ui/uikit/flippo/components/src/components/Progress/ui/indicator/ProgressIndicator.module.scss b/packages/ui/uikit/flippo/components/src/components/Progress/ui/indicator/ProgressIndicator.module.scss new file mode 100644 index 00000000..d0792653 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Progress/ui/indicator/ProgressIndicator.module.scss @@ -0,0 +1,10 @@ +@use 'mixins/_common.scss' as common; + +.ProgressIndicator { + @include common.reset-appearance; + + display: block; + background-color: var(--f-color-brand-light); + transition: width 500ms; + border-radius: var(--f-spacing-1); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Progress/ui/indicator/ProgressIndicator.tsx b/packages/ui/uikit/flippo/components/src/components/Progress/ui/indicator/ProgressIndicator.tsx new file mode 100644 index 00000000..47c70af9 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Progress/ui/indicator/ProgressIndicator.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Progress as ProgressHeadless } from '@flippo-ui/headless-components/progress'; +import { cx } from 'class-variance-authority'; + +import styles from './ProgressIndicator.module.scss'; + +export function ProgressIndicator(props: ProgressIndicator.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace ProgressIndicator { + export type Props = ProgressHeadless.Indicator.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Progress/ui/label/ProgressLabel.module.scss b/packages/ui/uikit/flippo/components/src/components/Progress/ui/label/ProgressLabel.module.scss new file mode 100644 index 00000000..ad27d151 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Progress/ui/label/ProgressLabel.module.scss @@ -0,0 +1,9 @@ +@use 'mixins/_common.scss' as common; +@use 'mixins/_font.scss' as font; + +.ProgressLabel { + @include common.reset-appearance; + @include font.label(weaker); + + color: var(--f-color-text-5); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Progress/ui/label/ProgressLabel.tsx b/packages/ui/uikit/flippo/components/src/components/Progress/ui/label/ProgressLabel.tsx new file mode 100644 index 00000000..a28bc4bc --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Progress/ui/label/ProgressLabel.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Progress as ProgressHeadless } from '@flippo-ui/headless-components/progress'; +import { cx } from 'class-variance-authority'; + +import styles from './ProgressLabel.module.scss'; + +export function ProgressLabel(props: ProgressLabel.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace ProgressLabel { + export type Props = ProgressHeadless.Label.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Progress/ui/root/ProgressRoot.module.scss b/packages/ui/uikit/flippo/components/src/components/Progress/ui/root/ProgressRoot.module.scss new file mode 100644 index 00000000..a3d1557f --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Progress/ui/root/ProgressRoot.module.scss @@ -0,0 +1,11 @@ +@use 'mixins/_common.scss' as common; + +.ProgressRoot { + @include common.reset-appearance; + + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: var(--f-spacing-1); + grid-row-gap: var(--f-spacing-2); + width: 100%; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Progress/ui/root/ProgressRoot.tsx b/packages/ui/uikit/flippo/components/src/components/Progress/ui/root/ProgressRoot.tsx new file mode 100644 index 00000000..ca3d7fbc --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Progress/ui/root/ProgressRoot.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Progress as ProgressHeadless } from '@flippo-ui/headless-components/progress'; +import { cx } from 'class-variance-authority'; + +import styles from './ProgressRoot.module.scss'; + +export function ProgressRoot(props: ProgressRoot.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace ProgressRoot { + export type Props = ProgressHeadless.Root.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Progress/ui/track/ProgressTrack.module.scss b/packages/ui/uikit/flippo/components/src/components/Progress/ui/track/ProgressTrack.module.scss new file mode 100644 index 00000000..855450d1 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Progress/ui/track/ProgressTrack.module.scss @@ -0,0 +1,11 @@ +@use 'mixins/_common.scss' as common; + +.ProgressTrack { + @include common.reset-appearance; + + grid-column: 1 / 3; + overflow: hidden; + background-color: var(--f-color-bg-2-hover); + height: var(--f-spacing-1); + border-radius: var(--f-spacing-1); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Progress/ui/track/ProgressTrack.tsx b/packages/ui/uikit/flippo/components/src/components/Progress/ui/track/ProgressTrack.tsx new file mode 100644 index 00000000..06ff6ea7 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Progress/ui/track/ProgressTrack.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +import { Progress as ProgressHeadless } from '@flippo-ui/headless-components/progress'; +import { cva } from 'class-variance-authority'; + +import styles from './ProgressTrack.module.scss'; + +const ProgressTrackVariants = cva(styles.ProgressTrack); + +export function ProgressTrack(props: ProgressTrack.Props) { + const { className, ...rest } = props; + + const trackClasses = ProgressTrackVariants({ className }); + + return ; +} + +export namespace ProgressTrack { + export type Props = ProgressHeadless.Track.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Progress/ui/value/ProgressValue.module.scss b/packages/ui/uikit/flippo/components/src/components/Progress/ui/value/ProgressValue.module.scss new file mode 100644 index 00000000..73580016 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Progress/ui/value/ProgressValue.module.scss @@ -0,0 +1,12 @@ +@use 'mixins/_common.scss' as common; +@use 'mixins/_font.scss' as font; + +.ProgressValue { + @include common.reset-appearance(); + @include font.label(weaker); + + grid-column-start: 2; + margin: 0; + color: var(--f-color-text-5); + text-align: right; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Progress/ui/value/ProgressValue.tsx b/packages/ui/uikit/flippo/components/src/components/Progress/ui/value/ProgressValue.tsx new file mode 100644 index 00000000..292f2cf9 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Progress/ui/value/ProgressValue.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Progress as ProgressHeadless } from '@flippo-ui/headless-components/progress'; +import { cx } from 'class-variance-authority'; + +import styles from './ProgressValue.module.scss'; + +export function ProgressValue(props: ProgressValue.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace ProgressValue { + export type Props = ProgressHeadless.Value.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Radio/index.parts.ts b/packages/ui/uikit/flippo/components/src/components/Radio/index.parts.ts new file mode 100644 index 00000000..ccfbc66c --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Radio/index.parts.ts @@ -0,0 +1,2 @@ +export { RadioIndicator as Indicator } from './ui/indicator/RadioIndicator'; +export { RadioRoot as Root } from './ui/root/RadioRoot'; diff --git a/packages/ui/uikit/flippo/components/src/components/Radio/index.ts b/packages/ui/uikit/flippo/components/src/components/Radio/index.ts new file mode 100644 index 00000000..19f10139 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Radio/index.ts @@ -0,0 +1 @@ +export * as Radio from './index.parts'; diff --git a/packages/ui/uikit/flippo/components/src/components/Radio/ui/indicator/RadioIndicator.module.scss b/packages/ui/uikit/flippo/components/src/components/Radio/ui/indicator/RadioIndicator.module.scss new file mode 100644 index 00000000..17302bd5 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Radio/ui/indicator/RadioIndicator.module.scss @@ -0,0 +1,17 @@ +.RadioIndicator { + display: flex; + align-items: center; + justify-content: center; + + &[data-unchecked] { + display: none; + } + + &::before { + content: ''; + border-radius: 100%; + width: var(--f-spacing-2); + height: var(--f-spacing-2); + background-color: var(--f-color-bg-2); + } +} diff --git a/packages/ui/uikit/flippo/components/src/components/Radio/ui/indicator/RadioIndicator.tsx b/packages/ui/uikit/flippo/components/src/components/Radio/ui/indicator/RadioIndicator.tsx new file mode 100644 index 00000000..f28ab15f --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Radio/ui/indicator/RadioIndicator.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Radio as RadioHeadless } from '@flippo-ui/headless-components/radio'; +import { cx } from 'class-variance-authority'; + +import styles from './RadioIndicator.module.scss'; + +export function RadioIndicator(props: RadioIndicator.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace RadioIndicator { + export type Props = RadioHeadless.Indicator.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Radio/ui/root/RadioRoot.module.scss b/packages/ui/uikit/flippo/components/src/components/Radio/ui/root/RadioRoot.module.scss new file mode 100644 index 00000000..3cb74ab0 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Radio/ui/root/RadioRoot.module.scss @@ -0,0 +1,43 @@ +.RadioRoot { + box-sizing: border-box; + display: flex; + width: 1.25rem; + height: 1.25rem; + align-items: center; + justify-content: center; + border-radius: 100%; + outline: 0; + padding: 0; + margin: 0; + border: none; + + cursor: pointer; + + &[data-unchecked] { + border: var(--f-spacing-0) solid var(--f-color-stroke-hover); + background-color: transparent; + } + + &[data-checked] { + background-color: var(--f-color-brand-hover); + border-color: var(--f-color-brand-hover); + } + + &:focus-visible { + outline: var(--f-spacing-0) solid var(--f-color-brand-light); + outline-offset: 2px; + } + + &:disabled { + cursor: default; + + &[data-unchecked] { + border-color: var(--f-color-stroke-muted); + } + + &[data-checked] { + border-color: var(--f-color-brand-disabled); + background-color: var(--f-color-brand-disabled); + } + } +} diff --git a/packages/ui/uikit/flippo/components/src/components/Radio/ui/root/RadioRoot.tsx b/packages/ui/uikit/flippo/components/src/components/Radio/ui/root/RadioRoot.tsx new file mode 100644 index 00000000..6c9ec925 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Radio/ui/root/RadioRoot.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Radio as RadioHeadless } from '@flippo-ui/headless-components/radio'; +import { cx } from 'class-variance-authority'; + +import styles from './RadioRoot.module.scss'; + +export function RadioRoot(props: RadioRoot.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace RadioRoot { + export type Props = RadioHeadless.Root.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/RadioGroup/index.ts b/packages/ui/uikit/flippo/components/src/components/RadioGroup/index.ts new file mode 100644 index 00000000..efabad61 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/RadioGroup/index.ts @@ -0,0 +1 @@ +export { RadioGroup } from './ui/RadioGroup'; diff --git a/packages/ui/uikit/flippo/components/src/components/RadioGroup/story/RadioGroup.stories.tsx b/packages/ui/uikit/flippo/components/src/components/RadioGroup/story/RadioGroup.stories.tsx new file mode 100644 index 00000000..4e765d69 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/RadioGroup/story/RadioGroup.stories.tsx @@ -0,0 +1,58 @@ +import React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import { RadioGroup } from '..'; +import { Radio } from '../../Radio'; + +const meta: Meta = { + title: 'Input/RadioGroup', + component: RadioGroup +}; + +export default meta; + +type RadioGroupStory = StoryObj; + +export const Default: RadioGroupStory = { + render: (args) => ( + + + + + + ) +}; diff --git a/packages/ui/uikit/flippo/components/src/components/RadioGroup/ui/RadioGroup.module.scss b/packages/ui/uikit/flippo/components/src/components/RadioGroup/ui/RadioGroup.module.scss new file mode 100644 index 00000000..c6151c0a --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/RadioGroup/ui/RadioGroup.module.scss @@ -0,0 +1,5 @@ +@use 'mixins/_flex' as flex; + +.RadioGroup { + @include flex.display(flex, column, null, null, var(--f-spacing-2)); +} diff --git a/packages/ui/uikit/flippo/components/src/components/RadioGroup/ui/RadioGroup.tsx b/packages/ui/uikit/flippo/components/src/components/RadioGroup/ui/RadioGroup.tsx new file mode 100644 index 00000000..ad3d707d --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/RadioGroup/ui/RadioGroup.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { RadioGroup as RadioGroupHeadless } from '@flippo-ui/headless-components/radio-group'; +import { cx } from 'class-variance-authority'; + +import styles from './RadioGroup.module.scss'; + +export function RadioGroup(props: RadioGroup.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace RadioGroup { + export type Props = RadioGroupHeadless.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Select/index.parts.ts b/packages/ui/uikit/flippo/components/src/components/Select/index.parts.ts new file mode 100644 index 00000000..acc51e79 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Select/index.parts.ts @@ -0,0 +1,17 @@ +export { Separator } from '../Separator'; +export { SelectArrow as Arrow } from './ui/arrow/SelectArrow'; +export { SelectBackdrop as Backdrop } from './ui/backdrop/SelectBackdrop'; +export { SelectGroupLabel as GroupLabel } from './ui/group-label/SelectGroupLabel'; +export { SelectGroup as Group } from './ui/group/SelectGroup'; +export { SelectIcon as Icon } from './ui/icon/SelectIcon'; +export { SelectItemIndicator as ItemIndicator } from './ui/item-indicator/SelectItemIndicator'; +export { SelectItemText as ItemText } from './ui/item-text/SelectItemText'; +export { SelectItem as Item } from './ui/item/SelectItem'; +export { SelectPopup as Popup } from './ui/popup/SelectPopup'; +export { SelectPortal as Portal } from './ui/portal/SelectPortal'; +export { SelectPositioner as Positioner } from './ui/positioner/SelectPositioner'; +export { SelectRoot as Root } from './ui/root/SelectRoot'; +export { SelectScrollDownArrow as ScrollDownArrow } from './ui/scroll-down-arrow/SelectScrollDownArrow'; +export { SelectScrollUpArrow as ScrollUpArrow } from './ui/scroll-up-arrow/SelectScrollUpArrow'; +export { SelectTrigger as Trigger } from './ui/trigger/SelectTrigger'; +export { SelectValue as Value } from './ui/value/SelectValue'; diff --git a/packages/ui/uikit/flippo/components/src/components/Select/index.ts b/packages/ui/uikit/flippo/components/src/components/Select/index.ts new file mode 100644 index 00000000..189ac83b --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Select/index.ts @@ -0,0 +1 @@ +export * as Select from './index.parts'; diff --git a/packages/ui/uikit/flippo/components/src/components/Select/story/Select.stories.tsx b/packages/ui/uikit/flippo/components/src/components/Select/story/Select.stories.tsx new file mode 100644 index 00000000..10e5da1a --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Select/story/Select.stories.tsx @@ -0,0 +1,151 @@ +import React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import { Select } from '..'; + +const meta: Meta = { + title: 'Input/Select', + component: Select.Root +}; + +export default meta; + +type SelectStory = StoryObj; + +const fruits = [ + { value: 'apple', label: 'Apple' }, + { value: 'banana', label: 'Banana' }, + { value: 'orange', label: 'Orange' }, + { value: 'grape', label: 'Grape' }, + { value: 'pineapple', label: 'Pineapple' } +]; + +export const Default: SelectStory = { + render: (args) => ( +
+ + + + {(value) => { + if (value) { + return value; + } + + return 'Select a fruit...'; + }} + + + + + + + + + + + + + {'Fruits'} + {fruits.map((fruit) => ( + + + + + {fruit.label} + + ))} + + + + + +
+ ) +}; + +export const LongList: SelectStory = { + render: (args) => { + const countries = [ + 'Afghanistan', + 'Albania', + 'Algeria', + 'Argentina', + 'Australia', + 'Separator', + 'Austria', + 'Bangladesh', + 'Belgium', + 'Brazil', + 'Canada', + 'Separator', + 'China', + 'Denmark', + 'Egypt', + 'Finland', + 'France', + 'Germany', + 'Greece', + 'Separator', + 'India', + 'Indonesia', + 'Italy', + 'Japan', + 'Mexico', + 'Separator', + 'Netherlands', + 'Norway', + 'Poland', + 'Portugal', + 'Russia', + 'Spain', + 'Separator', + 'Sweden', + 'Switzerland', + 'Turkey', + 'Ukraine', + 'United Kingdom', + 'United States' + ]; + + return ( +
+ + + + + {(value) => { + if (value) { + return value; + } + + return 'Choose a country...'; + }} + + + + + + + + {countries.map((country) => (country === 'Separator' + ? + : ( + + + + + {country} + + )))} + + + + + +
+ ); + } +}; diff --git a/packages/ui/uikit/flippo/components/src/components/Select/ui/arrow/SelectArrow.module.scss b/packages/ui/uikit/flippo/components/src/components/Select/ui/arrow/SelectArrow.module.scss new file mode 100644 index 00000000..afedf44b --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Select/ui/arrow/SelectArrow.module.scss @@ -0,0 +1,35 @@ +@use 'mixins/_common.scss' as common; + +.SelectArrow { + @include common.reset-appearance(); + + display: flex; + + &[data-side='top'] { + bottom: -8px; + rotate: 180deg; + } + + &[data-side='bottom'] { + top: -8px; + rotate: 0deg; + } + + &[data-side='left'] { + right: -13px; + rotate: 90deg; + } + + &[data-side='right'] { + left: -13px; + rotate: -90deg; + } +} + +.ArrowFill { + fill: var(--f-color-bg-2); +} + +.ArrowInnerStroke { + fill: var(--f-color-bg-2); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Select/ui/arrow/SelectArrow.tsx b/packages/ui/uikit/flippo/components/src/components/Select/ui/arrow/SelectArrow.tsx new file mode 100644 index 00000000..359dd154 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Select/ui/arrow/SelectArrow.tsx @@ -0,0 +1,33 @@ +import React from 'react'; + +import { Select as SelectHeadless } from '@flippo-ui/headless-components/select'; +import { cx } from 'class-variance-authority'; + +import styles from './SelectArrow.module.scss'; + +export function SelectArrow(props: SelectArrow.Props) { + const { className, ...otherProps } = props; + + return ; +} + +SelectArrow.Svg = SelectArrowSvg; + +export namespace SelectArrow { + export type Props = SelectHeadless.Arrow.Props; +} + +function SelectArrowSvg(props: React.ComponentProps<'svg'>) { + return ( + + + + + ); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Select/ui/backdrop/SelectBackdrop.module.scss b/packages/ui/uikit/flippo/components/src/components/Select/ui/backdrop/SelectBackdrop.module.scss new file mode 100644 index 00000000..039538a9 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Select/ui/backdrop/SelectBackdrop.module.scss @@ -0,0 +1,16 @@ +@use 'mixins/_common.scss' as common; + +.SelectBackdrop { + @include common.reset-appearance(); + + position: fixed; + inset: 0; + background-color: var(--f-color-bg-1); + opacity: 0.2; + transition: opacity 150ms cubic-bezier(0.45, 1.005, 0, 1.005); + + &[data-starting-style], + &[data-ending-style] { + opacity: 0; + } +} diff --git a/packages/ui/uikit/flippo/components/src/components/Select/ui/backdrop/SelectBackdrop.tsx b/packages/ui/uikit/flippo/components/src/components/Select/ui/backdrop/SelectBackdrop.tsx new file mode 100644 index 00000000..558a585d --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Select/ui/backdrop/SelectBackdrop.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Select as SelectHeadless } from '@flippo-ui/headless-components/select'; +import { cx } from 'class-variance-authority'; + +import styles from './SelectBackdrop.module.scss'; + +export function SelectBackdrop(props: SelectBackdrop.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace SelectBackdrop { + export type Props = SelectHeadless.Backdrop.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Select/ui/group-label/SelectGroupLabel.module.scss b/packages/ui/uikit/flippo/components/src/components/Select/ui/group-label/SelectGroupLabel.module.scss new file mode 100644 index 00000000..afe75ecb --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Select/ui/group-label/SelectGroupLabel.module.scss @@ -0,0 +1,13 @@ +@use 'mixins/_common.scss' as common; +@use 'mixins/_font.scss' as font; + +.SelectGroupLabel { + @include common.reset-appearance; + @include font.label(default); + + display: flex; + align-items: center; + padding: var(--f-spacing-0) 0 var(--f-spacing-0) var(--f-spacing-5); + color: var(--f-color-text-5); + height: var(--f-spacing-7); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Select/ui/group-label/SelectGroupLabel.tsx b/packages/ui/uikit/flippo/components/src/components/Select/ui/group-label/SelectGroupLabel.tsx new file mode 100644 index 00000000..6c046db8 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Select/ui/group-label/SelectGroupLabel.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +import { Select as SelectHeadless } from '@flippo-ui/headless-components/select'; +import { cva } from 'class-variance-authority'; + +import styles from './SelectGroupLabel.module.scss'; + +const SelectGroupLabelVariants = cva(styles.SelectGroupLabel); + +export function SelectGroupLabel(props: SelectGroupLabel.Props) { + const { className, ...rest } = props; + + const labelClasses = SelectGroupLabelVariants({ className }); + + return ; +} + +export namespace SelectGroupLabel { + export type Props = SelectHeadless.GroupLabel.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Select/ui/group/SelectGroup.module.scss b/packages/ui/uikit/flippo/components/src/components/Select/ui/group/SelectGroup.module.scss new file mode 100644 index 00000000..44aebc4a --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Select/ui/group/SelectGroup.module.scss @@ -0,0 +1,9 @@ +@use 'mixins/_common.scss' as common; + +.SelectGroup { + @include common.reset-appearance(); + + display: flex; + flex-direction: column; + gap: var(--f-spacing-0); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Select/ui/group/SelectGroup.tsx b/packages/ui/uikit/flippo/components/src/components/Select/ui/group/SelectGroup.tsx new file mode 100644 index 00000000..63c6ba36 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Select/ui/group/SelectGroup.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +import { Select as SelectHeadless } from '@flippo-ui/headless-components/select'; +import { cx } from 'class-variance-authority'; + +import styles from './SelectGroup.module.scss'; + +export function SelectGroup(props: SelectGroup.Props) { + const { className, ...otherProps } = props; + + return ; +} + +export namespace SelectGroup { + export type Props = SelectHeadless.Group.Props; +} diff --git a/packages/ui/uikit/flippo/components/src/components/Select/ui/icon/SelectIcon.module.scss b/packages/ui/uikit/flippo/components/src/components/Select/ui/icon/SelectIcon.module.scss new file mode 100644 index 00000000..ab4544f0 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Select/ui/icon/SelectIcon.module.scss @@ -0,0 +1,18 @@ +@use 'mixins/_common.scss' as common; + +.SelectIcon { + @include common.reset-appearance(); + + display: flex; + + [data-popup-open] & { + transform: rotate(180deg); + color: var(--f-color-text-4); + } +} + +.ChevronIcon { + display: block; + width: var(--f-spacing-5); + height: var(--f-spacing-5); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Select/ui/icon/SelectIcon.tsx b/packages/ui/uikit/flippo/components/src/components/Select/ui/icon/SelectIcon.tsx new file mode 100644 index 00000000..0d7cc68c --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Select/ui/icon/SelectIcon.tsx @@ -0,0 +1,28 @@ +import React from 'react'; + +import { Select as SelectHeadless } from '@flippo-ui/headless-components/select'; +import { cx } from 'class-variance-authority'; + +import styles from './SelectIcon.module.scss'; + +export function SelectIcon(props: SelectIcon.Props) { + const { className, ...otherProps } = props; + + return ; +} + +SelectIcon.Svg = SelectIconSvg; + +export namespace SelectIcon { + export type Props = SelectHeadless.Icon.Props; +} + +function SelectIconSvg(props: React.ComponentProps<'svg'>) { + const { className, ...otherProps } = props; + + return ( + + + + ); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Select/ui/item-indicator/SelectItemIndicator.module.scss b/packages/ui/uikit/flippo/components/src/components/Select/ui/item-indicator/SelectItemIndicator.module.scss new file mode 100644 index 00000000..5e36a5f3 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Select/ui/item-indicator/SelectItemIndicator.module.scss @@ -0,0 +1,19 @@ +@use 'mixins/_common.scss' as common; + +.SelectItemIndicator { + @include common.reset-appearance(); + + grid-column-start: 1; + + [data-selected] & { + color: var(--f-color-brand-light); + } +} + +.CheckIcon { + display: flex; + align-items: center; + justify-content: center; + width: var(--f-spacing-5); + height: var(--f-spacing-5); +} diff --git a/packages/ui/uikit/flippo/components/src/components/Select/ui/item-indicator/SelectItemIndicator.tsx b/packages/ui/uikit/flippo/components/src/components/Select/ui/item-indicator/SelectItemIndicator.tsx new file mode 100644 index 00000000..2557a075 --- /dev/null +++ b/packages/ui/uikit/flippo/components/src/components/Select/ui/item-indicator/SelectItemIndicator.tsx @@ -0,0 +1,30 @@ +import React from 'react'; + +import { Select as SelectHeadless } from '@flippo-ui/headless-components/select'; +import { cx } from 'class-variance-authority'; + +import styles from './SelectItemIndicator.module.scss'; + +export function SelectItemIndicator(props: SelectItemIndicator.Props) { + const { className, hidden = false, ...rest } = props; + + return ( +