Merge pull request #20 from pmndrs/feature/input

Feature/input

.github/workflows/static.yml

@@ -102,12 +102,14 @@ jobs:
           mkdir -p public/examples/default
           mkdir -p public/examples/lucide
           mkdir -p public/examples/market
+          mkdir -p public/examples/auth
           cp -r ./examples/apfel/dist/* ./public/examples/apfel
           cp -r ./examples/card/dist/* ./public/examples/card
           cp -r ./examples/dashboard/dist/* ./public/examples/dashboard
           cp -r ./examples/default/dist/* ./public/examples/default
           cp -r ./examples/lucide/dist/* ./public/examples/lucide
           cp -r ./examples/market/dist/* ./public/examples/market
+          cp -r ./examples/auth/dist/* ./public/examples/auth
 
 # Deploy to GH Pages
       - name: Add no jekyll

CONTRIBUTING.md

@@ -16,7 +16,8 @@ pnpm -F "./packages/**/*" build
 Locally run examples with:
 
 ```bash
-yarn examples
+cd examples/dashboard
+pnpm dev
 ```
 
 **Important**

docs/getting-started/components-and-properties.md

@@ -251,6 +251,30 @@ The `Text` component allows you to render of text and is highly intertwined with
 
 </details>
 
+## Input
+
+The `Input` component extends the `Text` component and allows the user to change the text through their preferred input device. The `Input` component has all the formatting capabilities as the `Text` element. Additionally, it allows specifying whether the `multiline` texts are allowed (similar to a textarea), whether the input is `disabled,` the current `value,` the `defaultValue,` an `onValueChange` listener, and the `tabIndex` to customize the tab order.
+
+```jsx
+<Root>
+  <Input fontWeight="bold" defaultValue="Hello World" />
+</Root>
+```
+
+<details>
+<summary>View all properties specific to the `Input` component</summary>
+
+| Property      | Type                    |
+| ------------- | ----------------------- |
+| multiline     | boolean                 |
+| value         | string                  |
+| defaultValue  | string                  |
+| onValueChange | (value: string) => void |
+| tabIndex      | number                  |
+| disabled      | boolean                 |
+
+</details>
+
 ## SVG
 
 The `SVG` component allows rendering an SVG file. The URL of the file is provided in the `src` property. Additionally, the `opacity`, `color`, and `materialClass` properties can be used to transform the appearance of the SVG, and all the `Container` properties are available for styling the background panel.
@@ -368,16 +392,17 @@ The `FontFamilyProvider` component allows you to use the specified font families
 
 uikit allows you to declare properties that depend on the element's interaction state, similar to CSS selectors, such as `:hover`. Conditional properties also enable elements in the layout to be responsive based on several breakpoints. uikit supports a range of conditional properties:
 
-| Name   | Explanation                                            |
-| ------ | ------------------------------------------------------ |
-| hover  | when the user hovers over the element                  |
-| active | when the users clicks (pointer down) on the element    |
-| sm     | when the width of the root element is bigger than 640  |
-| md     | when the width of the root element is bigger than 768  |
-| lg     | when the width of the root element is bigger than 1024 |
-| xl     | when the width of the root element is bigger than 1280 |
-| 2xl    | when the width of the root element is bigger than 1536 |
-| dark   | when the preferred color scheme is dark                |
+| Name   | Explanation                                                                |
+| ------ | -------------------------------------------------------------------------- |
+| focus  | when the user has focussed the element (currently only available on input) |
+| hover  | when the user hovers over the element                                      |
+| active | when the users clicks (pointer down) on the element                        |
+| sm     | when the width of the root element is bigger than 640                      |
+| md     | when the width of the root element is bigger than 768                      |
+| lg     | when the width of the root element is bigger than 1024                     |
+| xl     | when the width of the root element is bigger than 1280                     |
+| 2xl    | when the width of the root element is bigger than 1536                     |
+| dark   | when the preferred color scheme is dark                                    |
 
 ```jsx
 <Fullscreen flexDirection="column" md={{ flexDirection: 'row' }}>

docs/getting-started/examples.md

@@ -17,4 +17,7 @@ nav: 2
   <li>
     [![Screenshot from Lucide example](./example-lucide.png)](https://pmndrs.github.io/uikit/examples/lucide/)
   </li>
+  <li>
+    [![Screenshot from Auth example](./example-auth.png)](https://pmndrs.github.io/uikit/examples/auth/)
+  </li>
 </Grid>

docs/kits/apfel.md

@@ -635,3 +635,61 @@ export function TabsOnCard() {
 npx uikit component add apfel tabs
 ```
 
+## Input
+![input example image](./apfel/input.png)
+
+<details>
+<summary>Code</summary>
+
+```tsx
+import { Card } from '@/card'
+import { Input } from '@/input'
+import { Container } from '@react-three/uikit'
+import { BoxSelect } from '@react-three/uikit-lucide'
+import { useState } from 'react'
+
+export function InputsOnCard() {
+  const [text, setText] = useState('')
+  return (
+    <Card borderRadius={32} padding={16}>
+      <Container flexDirection="row" gapColumn={16}>
+        <Container flexDirection="column" alignItems="stretch" gapRow={16} width={300}>
+          <Input value={text} onValueChange={setText} variant="rect" placeholder="Placeholder" />
+          <Input value={text} onValueChange={setText} variant="rect" placeholder="Placeholder" prefix={<BoxSelect />} />
+          <Input value={text} onValueChange={setText} variant="rect" placeholder="Placeholder" disabled />
+          <Input
+            value={text}
+            onValueChange={setText}
+            variant="rect"
+            placeholder="Placeholder"
+            disabled
+            prefix={<BoxSelect />}
+          />
+        </Container>
+        <Container flexDirection="column" alignItems="stretch" gapRow={16} width={300}>
+          <Input value={text} onValueChange={setText} variant="pill" placeholder="Placeholder" />
+          <Input value={text} onValueChange={setText} variant="pill" placeholder="Placeholder" prefix={<BoxSelect />} />
+          <Input value={text} onValueChange={setText} variant="pill" placeholder="Placeholder" disabled />
+          <Input
+            value={text}
+            onValueChange={setText}
+            variant="pill"
+            placeholder="Placeholder"
+            disabled
+            prefix={<BoxSelect />}
+          />
+        </Container>
+      </Container>
+    </Card>
+  )
+}
+
+```
+
+</details>
+
+[Live View](https://pmndrs.github.io/uikit/examples/apfel/?component=input)   
+```bash
+npx uikit component add apfel input
+```
+

docs/kits/default.md

@@ -381,7 +381,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '@/dialog.js'
+} from '@/dialog'
 
 export function DialogDemo() {
   return (
@@ -921,3 +921,25 @@ export function TooltipDemo() {
 npx uikit component add default tooltip
 ```
 
+## Input
+![input example image](./default/input.png)
+
+<details>
+<summary>Code</summary>
+
+```tsx
+import { Input } from '@/input'
+
+export default function InputDemo() {
+  return <Input width={200} placeholder="Email" />
+}
+
+```
+
+</details>
+
+[Live View](https://pmndrs.github.io/uikit/examples/default/?component=input)   
+```bash
+npx uikit component add default input
+```
+

examples/apfel/src/App.tsx

@@ -16,6 +16,7 @@ import { TabsOnCard } from './components/tabs'
 import { TabBarWithText } from './components/tab-bar'
 import { ProgressBarsOnCard } from './components/progress'
 import { LoadingSpinnersOnCard } from './components/loading'
+import { InputsOnCard } from './components/input'
 
 const componentPages = {
   card: TextOnCard,
@@ -27,6 +28,7 @@ const componentPages = {
   'tab-bar': TabBarWithText,
   progress: ProgressBarsOnCard,
   loading: LoadingSpinnersOnCard,
+  input: InputsOnCard,
 }
 const defaultComponent = 'button'
 

examples/apfel/src/components/input.tsx

@@ -0,0 +1,41 @@
+import { Card } from '@/card'
+import { Input } from '@/input'
+import { Container } from '@react-three/uikit'
+import { BoxSelect } from '@react-three/uikit-lucide'
+import { useState } from 'react'
+
+export function InputsOnCard() {
+  const [text, setText] = useState('')
+  return (
+    <Card borderRadius={32} padding={16}>
+      <Container flexDirection="row" gapColumn={16}>
+        <Container flexDirection="column" alignItems="stretch" gapRow={16} width={300}>
+          <Input value={text} onValueChange={setText} variant="rect" placeholder="Placeholder" />
+          <Input value={text} onValueChange={setText} variant="rect" placeholder="Placeholder" prefix={<BoxSelect />} />
+          <Input value={text} onValueChange={setText} variant="rect" placeholder="Placeholder" disabled />
+          <Input
+            value={text}
+            onValueChange={setText}
+            variant="rect"
+            placeholder="Placeholder"
+            disabled
+            prefix={<BoxSelect />}
+          />
+        </Container>
+        <Container flexDirection="column" alignItems="stretch" gapRow={16} width={300}>
+          <Input value={text} onValueChange={setText} variant="pill" placeholder="Placeholder" />
+          <Input value={text} onValueChange={setText} variant="pill" placeholder="Placeholder" prefix={<BoxSelect />} />
+          <Input value={text} onValueChange={setText} variant="pill" placeholder="Placeholder" disabled />
+          <Input
+            value={text}
+            onValueChange={setText}
+            variant="pill"
+            placeholder="Placeholder"
+            disabled
+            prefix={<BoxSelect />}
+          />
+        </Container>
+      </Container>
+    </Card>
+  )
+}

examples/auth/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body style="margin: 0; overscroll-behavior: none">
+    <script type="module" src="./src/index.tsx"></script>
+    <div id="root"></div>
+  </body>
+</html>

examples/auth/package.json

@@ -0,0 +1,19 @@
+{
+  "type": "module",
+  "dependencies": {
+    "@react-three/drei": "^9.96.1",
+    "@react-three/fiber": "^8.15.13",
+    "@react-three/postprocessing": "^2.16.0",
+    "@react-three/uikit": "workspace:^",
+    "@react-three/uikit-lucide": "workspace:^",
+    "@types/three": "^0.161.0",
+    "r3f-perf": "^7.1.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "three": "^0.161.0"
+  },
+  "scripts": {
+    "dev": "vite --host",
+    "build": "vite build"
+  }
+}