From b406ea60882e5a09c130fd4e1b5168178c3d6d71 Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Wed, 20 Dec 2023 01:50:10 +0100 Subject: [PATCH] Create a select component for the web --- front/apps/web/package.json | 1 + front/packages/primitives/package.json | 5 + front/packages/primitives/src/index.ts | 1 + front/packages/primitives/src/menu.web.tsx | 4 +- front/packages/primitives/src/select.web.tsx | 159 +++++++++++++++++++ front/yarn.lock | 91 +++++++++++ 6 files changed, 259 insertions(+), 2 deletions(-) create mode 100644 front/packages/primitives/src/select.web.tsx diff --git a/front/apps/web/package.json b/front/apps/web/package.json index 25be0de1..380ccc91 100644 --- a/front/apps/web/package.json +++ b/front/apps/web/package.json @@ -19,6 +19,7 @@ "@kyoo/ui": "workspace:^", "@material-symbols/svg-400": "^0.14.1", "@radix-ui/react-dropdown-menu": "^2.0.6", + "@radix-ui/react-select": "^2.0.0", "@tanstack/react-query": "^5.12.1", "@tanstack/react-query-devtools": "^5.12.2", "array-shuffle": "^3.0.0", diff --git a/front/packages/primitives/package.json b/front/packages/primitives/package.json index fdd5fef2..caae4c18 100644 --- a/front/packages/primitives/package.json +++ b/front/packages/primitives/package.json @@ -13,6 +13,7 @@ "@gorhom/portal": "*", "@material-symbols/svg-400": "*", "@radix-ui/react-dropdown-menu": "*", + "@radix-ui/react-select": "*", "blurhash": "*", "expo-linear-gradient": "*", "moti": "*", @@ -32,6 +33,9 @@ "@radix-ui/react-dropdown-menu": { "optional": true }, + "@radix-ui/react-select": { + "optional": true + }, "blurhash": { "optional": true }, @@ -54,6 +58,7 @@ "solito": "^4.1.3" }, "optionalDependencies": { + "@radix-ui/react-select": "^2.0.0", "blurhash": "^2.0.5", "react-native-blurhash": "^1.1.11", "react-native-fast-image": "^8.6.3", diff --git a/front/packages/primitives/src/index.ts b/front/packages/primitives/src/index.ts index cd6f8d78..629decb5 100644 --- a/front/packages/primitives/src/index.ts +++ b/front/packages/primitives/src/index.ts @@ -33,6 +33,7 @@ export * from "./progress"; export * from "./slider"; export * from "./alert"; export * from "./menu"; +export * from "./select"; export * from "./input"; export * from "./button"; export * from "./chip"; diff --git a/front/packages/primitives/src/menu.web.tsx b/front/packages/primitives/src/menu.web.tsx index ac2a52cf..0dfad118 100644 --- a/front/packages/primitives/src/menu.web.tsx +++ b/front/packages/primitives/src/menu.web.tsx @@ -32,11 +32,11 @@ import { focusReset, ts } from "./utils"; import { SvgProps } from "react-native-svg"; type YoshikiFunc = (props: ReturnType) => T; -const YoshikiProvider = ({ children }: { children: YoshikiFunc }) => { +export const YoshikiProvider = ({ children }: { children: YoshikiFunc }) => { const yoshiki = useYoshiki(); return <>{children(yoshiki)}; }; -const InternalTriger = forwardRef(function _Triger( +export const InternalTriger = forwardRef(function _Triger( { Component, ComponentProps, ...props }, ref, ) { diff --git a/front/packages/primitives/src/select.web.tsx b/front/packages/primitives/src/select.web.tsx new file mode 100644 index 00000000..62f9592f --- /dev/null +++ b/front/packages/primitives/src/select.web.tsx @@ -0,0 +1,159 @@ +/* + * Kyoo - A portable and vast media library solution. + * Copyright (c) Kyoo. + * + * See AUTHORS.md and LICENSE file in the project root for full license information. + * + * Kyoo is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * any later version. + * + * Kyoo is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with Kyoo. If not, see . + */ + +import * as RSelect from "@radix-ui/react-select"; +import { ReactNode, forwardRef } from "react"; +import { Icon } from "./icons"; +import Check from "@material-symbols/svg-400/rounded/check-fill.svg"; +import ExpandMore from "@material-symbols/svg-400/rounded/expand_more-fill.svg"; +import ExpandLess from "@material-symbols/svg-400/rounded/expand_less-fill.svg"; +import { ContrastArea, SwitchVariant } from "./themes"; +import { InternalTriger, YoshikiProvider } from "./menu.web"; +import { Theme, px, useYoshiki as useNativeYoshiki } from "yoshiki/native"; +import { useYoshiki } from "yoshiki"; +import { PressableFeedback } from "./links"; +import { P } from "./text"; +import { focusReset, ts } from "./utils"; + +export const Select = ({ + children, + label, + value, + onValueChange, +}: { + children: ReactNode; + label: string; + value: string; + onValueChange: (v: string) => void; +}) => { + const { css } = useNativeYoshiki(); + + return ( + + + theme.accent, + borderWidth: ts(0.5), + fover: { + self: { bg: (theme: Theme) => theme.accent }, + text: { color: (theme: Theme) => theme.colors.white }, + }, + })} + > +

{}

+ + + + + + + + + {({ css }) => ( + + theme.background, + overflow: "auto", + minWidth: "220px", + borderRadius: "8px", + boxShadow: + "0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)", + zIndex: 2, + maxHeight: "calc(var(--radix-dropdown-menu-content-available-height) * 0.8)", + })} + > + + + + {children} + + + + + + )} + + + + + ); +}; + +const Item = forwardRef(function Item( + { label, value, ...props }, + ref, +) { + const { css, theme } = useYoshiki(); + const { css: nCss } = useNativeYoshiki(); + return ( + <> + + theme.paragraph, + borderRadius: "4px", + position: "relative", + userSelect: "none", + ...focusReset, + }, + props as any, + )} + > + theme.paragraph })}>{label} + + + + + + ); +}); +Select.Item = Item; diff --git a/front/yarn.lock b/front/yarn.lock index 5d6fa31c..e4cbd908 100644 --- a/front/yarn.lock +++ b/front/yarn.lock @@ -2890,6 +2890,7 @@ __metadata: dependencies: "@expo/html-elements": ^0.5.1 "@gorhom/portal": ^1.0.14 + "@radix-ui/react-select": ^2.0.0 "@tanstack/react-query": ^5.12.1 "@types/react": 18.2.39 blurhash: ^2.0.5 @@ -2902,6 +2903,7 @@ __metadata: "@gorhom/portal": "*" "@material-symbols/svg-400": "*" "@radix-ui/react-dropdown-menu": "*" + "@radix-ui/react-select": "*" blurhash: "*" expo-linear-gradient: "*" moti: "*" @@ -2914,6 +2916,8 @@ __metadata: react-native-svg: "*" yoshiki: "*" dependenciesMeta: + "@radix-ui/react-select": + optional: true blurhash: optional: true react-native-blurhash: @@ -2927,6 +2931,8 @@ __metadata: optional: true "@radix-ui/react-dropdown-menu": optional: true + "@radix-ui/react-select": + optional: true blurhash: optional: true react-native-blurhash: @@ -3212,6 +3218,15 @@ __metadata: languageName: node linkType: hard +"@radix-ui/number@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/number@npm:1.0.1" + dependencies: + "@babel/runtime": ^7.13.10 + checksum: 621ea8b7d4195d1a65a9c0aee918e8335e7f198088eec91577512c89c2ba3a3bab4a767cfb872a2b9c3092a78ff41cad9a924845a939f6bb87fe9356241ea0ea + languageName: node + linkType: hard + "@radix-ui/primitive@npm:1.0.1": version: 1.0.1 resolution: "@radix-ui/primitive@npm:1.0.1" @@ -3578,6 +3593,46 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-select@npm:^2.0.0": + version: 2.0.0 + resolution: "@radix-ui/react-select@npm:2.0.0" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/number": 1.0.1 + "@radix-ui/primitive": 1.0.1 + "@radix-ui/react-collection": 1.0.3 + "@radix-ui/react-compose-refs": 1.0.1 + "@radix-ui/react-context": 1.0.1 + "@radix-ui/react-direction": 1.0.1 + "@radix-ui/react-dismissable-layer": 1.0.5 + "@radix-ui/react-focus-guards": 1.0.1 + "@radix-ui/react-focus-scope": 1.0.4 + "@radix-ui/react-id": 1.0.1 + "@radix-ui/react-popper": 1.1.3 + "@radix-ui/react-portal": 1.0.4 + "@radix-ui/react-primitive": 1.0.3 + "@radix-ui/react-slot": 1.0.2 + "@radix-ui/react-use-callback-ref": 1.0.1 + "@radix-ui/react-use-controllable-state": 1.0.1 + "@radix-ui/react-use-layout-effect": 1.0.1 + "@radix-ui/react-use-previous": 1.0.1 + "@radix-ui/react-visually-hidden": 1.0.3 + aria-hidden: ^1.1.1 + react-remove-scroll: 2.5.5 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 9ebf4a3e70fd5f583cf468e432ff04768b3442c44788eaf415e044f19c900b886e92eb46e19e138c4994d8a361f5e31f93d13b5bcf413469f21899bbe1112d1d + languageName: node + linkType: hard + "@radix-ui/react-slot@npm:1.0.1": version: 1.0.1 resolution: "@radix-ui/react-slot@npm:1.0.1" @@ -3668,6 +3723,21 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-use-previous@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-use-previous@npm:1.0.1" + dependencies: + "@babel/runtime": ^7.13.10 + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 66b4312e857c58b75f3bf62a2048ef090b79a159e9da06c19a468c93e62336969c33dbef60ff16969f00b20386cc25d138f6a353f1658b35baac0a6eff4761b9 + languageName: node + linkType: hard + "@radix-ui/react-use-rect@npm:1.0.1": version: 1.0.1 resolution: "@radix-ui/react-use-rect@npm:1.0.1" @@ -3700,6 +3770,26 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-visually-hidden@npm:1.0.3": + version: 1.0.3 + resolution: "@radix-ui/react-visually-hidden@npm:1.0.3" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/react-primitive": 1.0.3 + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 2e9d0c8253f97e7d6ffb2e52a5cfd40ba719f813b39c3e2e42c496d54408abd09ef66b5aec4af9b8ab0553215e32452a5d0934597a49c51dd90dc39181ed0d57 + languageName: node + linkType: hard + "@radix-ui/rect@npm:1.0.1": version: 1.0.1 resolution: "@radix-ui/rect@npm:1.0.1" @@ -15245,6 +15335,7 @@ __metadata: "@kyoo/ui": "workspace:^" "@material-symbols/svg-400": ^0.14.1 "@radix-ui/react-dropdown-menu": ^2.0.6 + "@radix-ui/react-select": ^2.0.0 "@svgr/webpack": ^8.1.0 "@tanstack/react-query": ^5.12.1 "@tanstack/react-query-devtools": ^5.12.2