pmndrs/uikit

🎨 user interfaces for react-three-fiber

uikit's Issues

fontSize percentage

Would be nice if the Text component accepted a fontSize with a number and percentage instead of just a number

Something like:

Add scroll delta multiplier

As of now, the amount scrolled is only dependant of the pixelSize of the Root, but it would be nice to have a property to modify this amount.

Example usage

<Root pixelSize={0.002}>
  <Container overflow="scroll" scrollMultiplier={10}>
    {/* Content */}
  </Container>
</Root>

would equal

<Root pixelSize={0.02}>
  <Container overflow="scroll">
    {/* Content */}
  </Container>
</Root>

Relative paths on font family provider

Right now font family provider seems to only work with absolute paths. I think it's more convenient to have relative paths for many reasons (react relative paths builds, etc).

Suggestion to be loaded on react public folder:

<FontFamilyProvider roboto={{ medium: "./fonts/GilroySemiBold-msdf/GilroySemiBold-msdf.json", bold: "./fonts/PolySansBulkyWide-msdf/PolySansBulkyWide-msdf.json", }} > ... </FontFamilyProvider>

Vanilla threejs support?

Hi, this looks amazing.

Can the library also be used with vanilla threejs as well?

Onscreen keyboard doesn’t open on iOS Chrome/Safari

This sample page:
https://pmndrs.github.io/uikit/examples/auth/

is, I believe, supposed to open an on-screen keyboard when clicking the text field.

That currently does not work on iOS (both chrome and safari have the issue). I haven’t tested yet but assume it would also be broken on visionOS (XR and non-XR).

TypeError: Cannot read properties of undefined (reading 'morphAttributes')

In Next.js (14.1.3) , I have
<Root backgroundColor='red' sizeX={2} sizeY={1} flexDirection='row'> <Container flexGrow={1} margin={48} backgroundColor='green' /> <Container flexGrow={1} margin={48} backgroundColor='blue' /> </Root>

This is in a project cloned off of the r3f-next-starter which is part of pmndrs. when I put this in a tag the project just crashes. I have no idea why.

Native?

Hi there,

in his tweet @drcmda mentioned that uikit will run in native. Would you mind expanding on this? How would it work and on which platforms?

Cheers,

Jun

Xr controller as input

Is this possible yet? It looks like I would have to get the input from my xr controllers (quest3) and somehow feed them intro react fibre's event system to have buttons etc interact with my controller.

can't run pnpm dev

node version:16.20.2
pnpm version:8.15.4

`

@ dev /Users/zhangshaohong/test/uikit/examples/dashboard
vite --host

error when starting dev server:
Error: fetch is not set. Please pass a fetch implementation as new Octokit({ request: { fetch }}). Learn more at https://github.com/octokit/octokit.js/#fetch-missing
at fetchWrapper (/Users/zhangshaohong/test/uikit/node_modules/.pnpm/@octokit[email protected]/node_modules/@octokit/request/dist-node/index.js:69:11)
at request2 (/Users/zhangshaohong/test/uikit/node_modules/.pnpm/@octokit[email protected]/node_modules/@octokit/request/dist-node/index.js:198:14)
at /Users/zhangshaohong/test/uikit/node_modules/.pnpm/@octokit+plugin-request-log@4.0.0_@octokit[email protected]/node_modules/@octokit/plugin-request-log/dist-node/index.js:37:12
at /Users/zhangshaohong/test/uikit/node_modules/.pnpm/[email protected]/node_modules/before-after-hook/lib/register.js:25:15
at async _GithubSource.getSourceInfo (file:///Users/zhangshaohong/test/uikit/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-mkcert/dist/mkcert.mjs:263:22)
at async _Mkcert.getSourceInfo (file:///Users/zhangshaohong/test/uikit/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-mkcert/dist/mkcert.mjs:535:24)
at async _Mkcert.initMkcert (file:///Users/zhangshaohong/test/uikit/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-mkcert/dist/mkcert.mjs:543:24)
at async Mkcert.init (file:///Users/zhangshaohong/test/uikit/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-mkcert/dist/mkcert.mjs:529:7)
at async config (file:///Users/zhangshaohong/test/uikit/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-mkcert/dist/mkcert.mjs:638:7)
at async runConfigHook (file:///Users/zhangshaohong/test/uikit/node_modules/.pnpm/[email protected]@types[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:68420:25)
 ELIFECYCLE  Command failed with exit code 1.
`

unable to run examples locally

Currently I am on the current main (1e2b12b) and ran pnpm iin the workspace root

This gives me several warnings:

 pnpm i
Scope: all 14 workspace projects
Lockfile is up to date, resolution step is skipped
Already up to date
 WARN  Failed to create bin at /Users/User/code/sandbox/uikit/examples/apfel/node_modules/.bin/uikit. ENOENT: no such file or directory, open '/Users/User/code/sandbox/uikit/packages/uikit/dist/cli/index.js'
 WARN  Failed to create bin at /Users/User/code/sandbox/uikit/examples/auth/node_modules/.bin/uikit. ENOENT: no such file or directory, open '/Users/User/code/sandbox/uikit/packages/uikit/dist/cli/index.js'
 WARN  Failed to create bin at /Users/User/code/sandbox/uikit/examples/dashboard/node_modules/.bin/uikit. ENOENT: no such file or directory, open '/Users/User/code/sandbox/uikit/packages/uikit/dist/cli/index.js'
 WARN  Failed to create bin at /Users/User/code/sandbox/uikit/examples/lucide/node_modules/.bin/uikit. ENOENT: no such file or directory, open '/Users/User/code/sandbox/uikit/packages/uikit/dist/cli/index.js'
 WARN  Failed to create bin at /Users/User/code/sandbox/uikit/examples/card/node_modules/.bin/uikit. ENOENT: no such file or directory, open '/Users/User/code/sandbox/uikit/packages/uikit/dist/cli/index.js'
 WARN  17 other warnings
Done in 609ms

When I then try to run any example I get the following error:

❯ cd examples/apfel
❯ pnpm i
Scope: all 14 workspace projects
 WARN  Failed to create bin at /Users/User/code/sandbox/uikit/examples/apfel/node_modules/.bin/uikit. ENOENT: no such file or directory, open '/Users/User/code/sandbox/uikit/packages/uikit/dist/cli/index.js'
 WARN  Failed to create bin at /Users/User/code/sandbox/uikit/examples/auth/node_modules/.bin/uikit. ENOENT: no such file or directory, open '/Users/User/code/sandbox/uikit/packages/uikit/dist/cli/index.js'
 WARN  Failed to create bin at /Users/User/code/sandbox/uikit/examples/card/node_modules/.bin/uikit. ENOENT: no such file or directory, open '/Users/User/code/sandbox/uikit/packages/uikit/dist/cli/index.js'
 WARN  Failed to create bin at /Users/User/code/sandbox/uikit/examples/default/node_modules/.bin/uikit. ENOENT: no such file or directory, open '/Users/User/code/sandbox/uikit/packages/uikit/dist/cli/index.js'
 WARN  Failed to create bin at /Users/User/code/sandbox/uikit/examples/dashboard/node_modules/.bin/uikit. ENOENT: no such file or directory, open '/Users/User/code/sandbox/uikit/packages/uikit/dist/cli/index.js'
 WARN  17 other warnings
Done in 608ms
❯ pnpm dev

> @ dev /Users/User/code/sandbox/uikit/examples/apfel
> vite --host

error when starting dev server:
Error: Failed to resolve entry for package "@react-three/uikit-lucide". The package may have incorrect main/module/exports specified in its package.json.
    at packageEntryFailure (file:///Users/User/code/sandbox/uikit/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:29443:17)
    at resolvePackageEntry (file:///Users/User/code/sandbox/uikit/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:29440:5)
    at tryNodeResolve (file:///Users/User/code/sandbox/uikit/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:29210:20)
    at Context.resolveId (file:///Users/User/code/sandbox/uikit/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:28978:28)
    at Object.resolveId (file:///Users/User/code/sandbox/uikit/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:63987:64)
    at async file:///Users/User/code/sandbox/uikit/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:68003:21
    at async file:///Users/User/code/sandbox/uikit/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:64644:20
    at async addManuallyIncludedOptimizeDeps (file:///Users/User/code/sandbox/uikit/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:65837:31)
    at async createDepsOptimizer (file:///Users/User/code/sandbox/uikit/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:64885:9)
    at async initDepsOptimizer (file:///Users/User/code/sandbox/uikit/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-9A4-l-43.js:64785:9)
 ELIFECYCLE  Command failed with exit code 1.

My System:
I am on a M2 Max, Sonoma 14.3, pnpm 8.15.4, node v20.7.0

positioning should not be applied when static

I'm not certain about this. but positionLeft, positionRight, positionTop, and positionBottom probably shouldn't be applied if the positionType is static, otherwise they're kinda like padding right?

Yoga dep error when running in expo-web/react-native-web

Hi, I have a repository here: https://github.com/Seanmclem/r3f-uikit-ts-expo

Where I have set up a basic Expo/RN app with web. I tested a basic html hello world, then dropped in the demo from the docs intro. Which works fine in a Vite/web repo I also made.

When running the web app via npm run web I get this on the terminal.

Unable to resolve "yoga-layout/wasm-async" from "node_modules/@react-three/uikit/dist/text/react.js"

And after installing expo-gl, and running npm run ios, I also get the exact same error.

What can I do? Or is there something you can do on your end?

Thanks for reading.

--Sean

expose ref.current.getStyle and add default for ComponentInternals

TypeScript: Missing `children` on ContainerProperties, and other issues.

When installing components from the default kit, the installed components are importing the ContainerProperties type from @react-three/uikit as props, but that type is missing children.

This is leading to TypeScript errors.

I notice that Container itself manually adds the children prop via:

props: { children?: ReactNode } & ContainerProperties & ...etc

However in components like accordion.tsx, no such children prop is added to the prop types.

Also getting errors on other style properties, like bottomBorderWidth.

Versions:

"@react-three/fiber": "^8.16.2",
"@react-three/uikit": "^0.2.9",
"react": "^18",

Are the generated files depending on an unreleased version of uikit, or perhaps the generated files are out of date?

caret doesn't show until with focus()

inputRef.current.focus()

although it works (I can type right away) the caret doesn't show until I type or click the input again

'Root' cannot be used as a JSX component.

Trying to take this superb addition to pmndrs toolkit for a spin but getting a very curious error...

TS2786: 'Root' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.
    Type 'undefined' is not assignable to type 'Element | null'.
    58 |
    59 |     return(
  > 60 |         <Root>
       |          ^^^^
    61 |             <Container flexGrow={1} margin={48} backgroundColor="green" />
    62 |             <Container flexGrow={1} margin={48} backgroundColor="blue" />
    63 |         </Root>

is this a limitation / bug or would this be that the <Root> component is being used in the wrong way?

hitbox for close X in modal is tiny

Hi there,

I'm attaching a video showing that in the dashboard example after opening the "Edit Profile" link at the top right, when I move the cursor on the close X icon at the top right of the modal, it's quite difficult to hit the right spot

Screen.Recording.2024-03-16.at.19.27.23.mov

Yoga fails in StrictMode when manually rendering canvas

Hello!
Firstly, thank you for your work on this library. We've been watching for its development and we want to integrate it to our project in future.
But we encountered some bug that we don't know how to fix.
This issue appears when using react's StrictMode and rendering the root without canvas. Please see the attached repro:
https://stackblitz.com/edit/vitejs-vite-wfq5n8?file=src%2Fmain.tsx

Can't build

After

pnpm install
pnpm -r inline-wasm pnpm -r convert
pnpm -r generate
pnpm -r build

I get the following error:

Scope: 8 of 9 workspace projects
packages/uikit build$ tsc
│ src/components/input.tsx(102,5): error TS2304: Cannot find name 'el'.
│ src/components/input.tsx(103,18): error TS2304: Cannot find name 'el'.
│ src/components/input.tsx(114,27): error TS2532: Object is possibly 'undefined'.
│ src/components/input.tsx(125,23): error TS2304: Cannot find name 'getCursorPosition'.
│ src/components/input.tsx(128,25): error TS2532: Object is possibly 'undefined'.
│ src/components/input.tsx(141,11): error TS2532: Object is possibly 'undefined'.
│ src/components/input.tsx(142,11): error TS2304: Cannot find name 'el'.
│ src/components/input.tsx(148,23): error TS2304: Cannot find name 'getCursorPosition'.
│ src/components/input.tsx(149,11): error TS2532: Object is possibly 'undefined'.
│ src/components/input.tsx(150,11): error TS2532: Object is possibly 'undefined'.
│ src/components/input.tsx(151,11): error TS2532: Object is possibly 'undefined'.
│ src/components/input.tsx(152,11): error TS2304: Cannot find name 'el'.
│ src/components/input.tsx(158,24): error TS2532: Object is possibly 'undefined'.
│ src/components/input.tsx(163,25): error TS2532: Object is possibly 'undefined'.
│ src/components/input.tsx(181,11): error TS2532: Object is possibly 'undefined'.
│ src/components/input.tsx(182,11): error TS2304: Cannot find name 'el'.
│ src/components/input.tsx(224,9): error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.
└─ Failed in 1.4s at /Users/kacperserewis/Documents/dev/uikit/packages/uikit
/Users/kacperserewis/Documents/dev/uikit/packages/uikit:
 ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  @react-three/[email protected] build: `tsc`
Exit status 2

Cannot install components via CLI

Running npx uikit component add apfel button currently prints an error:

Unable to fetch registry for apfel kit: Unexpected token : in JSON at position 3

(This was working a few hours ago)

After some troubleshooting, I can see that the CLI is requesting:

https://raw.githubusercontent.com/pmndrs/uikit/main/packages/kits/apfel/registry.json, which is a 404.

The URL is missing the src directory. This works:

https://raw.githubusercontent.com/pmndrs/uikit/main/packages/kits/apfel/src/registry.json

can't start project

pnpm dev

@ dev /Users/ismoiljonabdukakhkhorov/Desktop/uikit/examples/dashboard
vite --host

VITE v5.0.12 ready in 135 ms

➜ Local: https://localhost:5173/
➜ Network: https://10.20.6.26:5173/
➜ press h + enter to show help
✘ [ERROR] Could not resolve "./wasm.js"

../../packages/uikit/src/flex/load-base64.ts:2:23:
  2 │ import { base64 } from './wasm.js'
    ╵                        ~~~~~~~~~~~

✘ [ERROR] Could not resolve "./setter.js"

../../packages/uikit/src/flex/node.ts:14:23:
  14 │ import { setter } from './setter.js'
     ╵                        ~~~~~~~~~~~~~

dark.ts file seems to have an incorrect type declaration (at line 54)

When deploying an app with a UiKit component, it fails with this error -

./node_modules/@react-three/uikit/dist/dark.d.ts:13:53
Type error: Type parameter declaration expected.

  11 | export declare function getPreferredColorScheme(): PreferredColorScheme;
  12 | export declare function useApplyPreferredColorSchemeProperties(collection: ManagerCollection, properties: WithClasses<WithPreferredColorScheme<Properties>> & EventHandlers): void;
> 13 | export declare function basedOnPreferredColorScheme<const T extends {
     |                                                     ^
  14 |     [Key in string]: ColorRepresentation;
  15 | }>({ dark, light, }: {
  16 |     dark: T;
Error: Process completed with exit code 1.

percentage support for transform properties

centering absolute divs via transform: translate(-50%, -50%); is common

expo web

Hi,

Running expo install react-native-web in my fork's expo-yarn branch and yarn start followed by the w key, correctly starts the browser and seems quite close to a functional uikit for web output, except for these details:

• some white space at the top
• buttons can't be clicked (unless moving the mouse while holding click)
• scrolling with the wheel or swiping on a touchpad doesn't work

UPDATE: comparing more closely to the original example I think that the cursor doesn't change to the hover icon on buttons either.

Default background of image should be transparent

Currently it looks like images have a white background before they load. I worked around this by using suspense, but ideally images would have a transparent background to avoid flashing.

Mixing and matching kits complains about color settings

I had to manually add these colors in, it would be good to validate on install that the colors exist in theme.

./app/components/tooltip.tsx:75:95
Type error: Property 'popoverForeground' does not exist on type '{ foreground: Color; background: Color; card: Color; cardForeground: Color; accent: Color; accentForeground: Color; popover: Color; }'.

73 | {...props}
74 | >

75 |
| ^
76 | {children}
77 |
78 |