grevlingui 0.1.44 → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022-2026 Sigve Grevling
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,81 +1,213 @@
-# Grevlingui
+# grevlingui
 
-Gui elements for basic mobile web app stuff
+Animated GUI elements for basic mobile web app stuff. Written in TypeScript, for React 18 and 19.
 
-## Components:
+```sh
+npm install grevlingui
+```
 
-- Menu
-- SettingsButton
-- MenuButton
-- RadioButton
-- RadioGroup
-- CheckBox
-- ToggleSwitch
+```tsx
+import {CheckBox} from 'grevlingui';
 
-## Props:
+const [checked, setChecked] = useState(false);
 
-Some are passed down to child components
+<CheckBox checked={checked} setChecked={setChecked} label="Dark mode"/>
+```
+
+Styles are included automatically when you import a component, so there is no stylesheet to import. Every props type is exported too (`CheckBoxProps`, `MenuProps`, ...).
+
+## Components
+
+- [Menu](#menu)
+- [MenuButton](#menubutton)
+- [SettingsButton](#settingsbutton)
+- [ResetButton](#resetbutton)
+- [CheckBox](#checkbox)
+- [RadioGroup](#radiogroup)
+- [RadioButton](#radiobutton)
+- [NumberSelect](#numberselect)
+- [PaneView](#paneview)
+- [Loader](#loader)
+
+Most components default to `white` and are meant for dark backgrounds.
 
 ### Menu
-- onCloseClickOverride
-  - callback function allowing reuse of close menu button
-- shouldCloseOnClick 
-  - callback function to "validate" whether the click should cause the menu to close 
-- transitionTime
-  - default 400
-- zIndex
-  - the lowest z-index, there are different levels
-  - default 2
-- color
-- bgColor
-- menuBgColor 
-  - overrides bgColor
-- backdropColor
-  - color for the backdrop on partial slider menu
-  - default #e3e6e850
-- settings 
-  - boolean, whether to use settings icon
-  - default falsy
-- renderButton
-  - render function for custom button 
-- className
-  - extra class names for the menu
-- fullSlider
-  - boolean, whether the slider menu should cover the entire available width
-  - default falsy
-- fader
-  - boolean, whether the menu should fade instead of sliding in from the side
-- left
-  - boolean, makes the menu slide in from the left instead of the right
-  - default falsy
-
-### SettingsButton / MenuButton
-- open
-  - boolean, whether to display as a close button
-- setOpen
-  - callback function to set the open state
-- transitionTime
-  - in ms
-  - default 300
-- stageDelay
-  - delay between the 2 "stages" in the animation
-  - default 100
-- color
-  - default 'white'
-- backgroundColor
-- styles
-  - style override for the button
-- className
-  - extra class names for the button
-- rounding
-  - SettingsButton only
-  - how rounded the icon should be
 
-### RadioButton
-  - todo
-### RadioGroup
-  - todo
+A drawer that slides in from the side, with its own toggle button. It manages its own open state.
+
+```tsx
+<Menu>
+    <a href="/">Home</a>
+    <a href="/settings">Settings</a>
+</Menu>
+```
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | | Menu content |
+| `transitionTime` | `number` | `300` | Open/close animation in ms |
+| `zIndex` | `number` | `2` | Lowest z-index used. The menu and button stack above it |
+| `color` | `string` | `'white'` | Text and button icon color |
+| `bgColor` | `string` | `'#333'` | Button background, and menu background unless `menuBgColor` is set |
+| `menuBgColor` | `string` | `bgColor` | Menu background |
+| `backdropColor` | `string` | `'#22222266'` | Backdrop behind a partial slider |
+| `left` | `boolean` | | Slide in from the left instead of the right |
+| `fullSlider` | `boolean` | | Cover the whole screen instead of part of it |
+| `fader` | `boolean` | | Fade in instead of sliding |
+| `settings` | `boolean` | | Use a gear (`SettingsButton`) instead of a burger (`MenuButton`) |
+| `shouldCloseOnClick` | `(e) => boolean` | | Called on clicks inside the menu. Return `true` to close it |
+| `onCloseClickOverride` | `() => void` | | If set, the button shows as "close" and calls this instead of toggling the menu. Useful for reusing the close button, for example in a sub-page |
+| `renderButton` | `(show, setShow, transitionTime, color, bgColor) => ReactNode` | | Render your own toggle button |
+| `className` | `string` | | Extra class on the menu container |
+
+### MenuButton
+
+An animated burger button that morphs into an X. Used by `Menu`, but works on its own.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `open` | `boolean` | | Required |
+| `setOpen` | `(open: boolean) => void` | | Required |
+| `transitionTime` | `number` | `300` | Animation per stage in ms |
+| `stageDelay` | `number` | `100` | Delay between animation stages in ms |
+| `color` | `string` | | Icon color |
+| `backgroundColor` | `string` | | |
+| `styles` | `CSSProperties` | | Inline styles for the button |
+| `className` | `string` | | |
+
+### SettingsButton
+
+An animated gear button that morphs into an X. Same props as `MenuButton`, plus:
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `color` | `string` | `'white'` | Icon color |
+| `rounding` | `number` | `7` | Corner radius of the gear teeth |
+
+### ResetButton
+
+A reset arrow that spins when clicked.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `onClick` | `() => void` | | |
+| `color` | `string` | `'white'` | Icon color |
+| `backgroundColor` | `string` | | |
+
 ### CheckBox
-  - todo
-### ToggleSwitch
-  - todo
+
+An animated checkbox with an optional label.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `checked` | `boolean` | | Required |
+| `setChecked` | `(checked: boolean) => void` | | Required |
+| `label` | `ReactNode` | | |
+| `color` | `string` | `'white'` | |
+| `v2` | `boolean` | | Alternative style where the box morphs into a check mark |
+| `time` | `number` | `200` | Animation time in ms |
+
+### RadioGroup
+
+A list of radio buttons. The key type is generic, so `onSelect` gets the same type as your option keys.
+
+```tsx
+const [size, setSize] = useState<'s' | 'm' | 'l'>('m');
+
+<RadioGroup
+    options={[
+        {key: 's', label: 'Small'},
+        {key: 'm', label: 'Medium'},
+        {key: 'l', label: 'Large'},
+    ]}
+    selected={size}
+    onSelect={setSize}
+/>
+```
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `options` | `RadioOption<K>[]` | | Required. `{key: K, label: ReactNode}` where `K` is `string \| number` |
+| `selected` | `K` | | Key of the selected option |
+| `onSelect` | `(key: K) => void` | | Required |
+| `color` | `string` | | |
+
+### RadioButton
+
+A single radio button, as used by `RadioGroup`. It has no click handler of its own, so wrap it in something clickable.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `active` | `boolean` | | Required |
+| `text` | `ReactNode` | | Label |
+| `color` | `string` | | |
+| `className` | `string` | | Class on the svg |
+
+### NumberSelect
+
+A round number picker for touch screens. By default you swipe up or down on it to change the value. With `noFlick`, tapping opens + and − buttons instead.
+
+```tsx
+const [players, setPlayers] = useState(2);
+
+<NumberSelect value={players} setValue={setPlayers} min={1} max={8}/>
+```
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `value` | `number` | | Required |
+| `setValue` | `(value: number) => void` | | Required |
+| `min` | `number` | `1` | |
+| `max` | `number` | `10` | |
+| `size` | `number` | `5` | Diameter in rem |
+| `color` | `string` | `'white'` | Number and icon color |
+| `numberBgColor` | `string` | `'#663399'` | Circle color. Use a 6-digit hex, because transparency is appended to it |
+| `selectorColor` | `string` | `'#1E90FF'` | Color of the +/− buttons |
+| `noFlick` | `boolean` | `false` | Turn off swiping and use tap-to-open +/− buttons instead |
+| `timeout` | `number` | `1000` | Close the +/− buttons after this many ms without input. `0` keeps them open |
+| `closed` | `boolean` | | Close the +/− buttons when this becomes `true` |
+| `onOpenInput` | `() => void` | | Called when the +/− buttons open |
+| `invert` | `boolean` | `false` | Reverse the direction of the buttons and swipes |
+
+### PaneView
+
+Full-size panes that you swipe between horizontally, with scroll snapping. It fills its nearest positioned ancestor, so give the parent `position: relative` and a size.
+
+```tsx
+<div style={{position: 'relative', height: '100vh'}}>
+    <PaneView startOnPane={1}>
+        <div>Left</div>
+        <div>Middle</div>
+        <div>Right</div>
+    </PaneView>
+</div>
+```
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | | Each child becomes a pane |
+| `startOnPane` | `number` | `0` | Index of the pane shown on mount |
+| `styleOverride` | `CSSProperties` | | Inline styles for the scroll container |
+
+### Loader
+
+A spinning loading indicator.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `color` | `string` | `'black'` | |
+| `size` | `string \| number` | `'10rem'` | Width and height |
+| `speed` | `number` | `5000` | Time for one rotation in ms |
+
+## Development
+
+```sh
+npm run dev     # demo app (src/App.tsx) with all the components
+npm run build   # build the library into dist/
+```
+
+The library source lives in `src/Library`, and `src/Library/index.ts` is the package entry point.
+
+## License
+
+MIT

package/dist/Buttons/MenuButton.d.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties } from "react";
+export type MenuButtonProps = {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    transitionTime?: number;
+    stageDelay?: number;
+    color?: string;
+    backgroundColor?: string;
+    styles?: CSSProperties;
+    className?: string;
+};
+export declare const MenuButton: ({ open, setOpen, transitionTime, stageDelay, color, backgroundColor, styles, className }: MenuButtonProps) => import("react").JSX.Element;

package/dist/Buttons/ResetButton.d.ts

@@ -0,0 +1,6 @@
+export type ResetButtonProps = {
+    onClick?: () => void;
+    color?: string;
+    backgroundColor?: string;
+};
+export declare const ResetButton: ({ onClick, color, backgroundColor, }: ResetButtonProps) => import("react").JSX.Element;

package/dist/Buttons/SettingsButton.d.ts

@@ -0,0 +1,13 @@
+import type { CSSProperties } from 'react';
+export type SettingsButtonProps = {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    transitionTime?: number;
+    stageDelay?: number;
+    color?: string;
+    backgroundColor?: string;
+    styles?: CSSProperties;
+    className?: string;
+    rounding?: number;
+};
+export declare const SettingsButton: ({ open, setOpen, transitionTime, stageDelay, color, backgroundColor, styles, className, rounding }: SettingsButtonProps) => import("react").JSX.Element;

package/dist/CheckBox.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export type CheckBoxProps = {
+    checked: boolean;
+    setChecked: (checked: boolean) => void;
+    label?: ReactNode;
+    color?: string;
+    v2?: boolean;
+    time?: number;
+};
+export declare const CheckBox: ({ checked, setChecked, label, color, v2, time }: CheckBoxProps) => import("react").JSX.Element;

package/dist/Loader/Loader.d.ts

@@ -0,0 +1,6 @@
+export type LoaderProps = {
+    color?: string;
+    size?: string | number;
+    speed?: number;
+};
+export declare const Loader: ({ color, size, speed, }: LoaderProps) => import("react").JSX.Element;

package/dist/Menu/Menu.d.ts

@@ -0,0 +1,19 @@
+import type { Dispatch, MouseEvent, ReactNode, SetStateAction } from 'react';
+export type MenuProps = {
+    children?: ReactNode;
+    onCloseClickOverride?: () => void;
+    shouldCloseOnClick?: (e: MouseEvent<HTMLDivElement>) => boolean;
+    transitionTime?: number;
+    zIndex?: number;
+    color?: string;
+    bgColor?: string;
+    menuBgColor?: string;
+    backdropColor?: string;
+    settings?: boolean;
+    renderButton?: (show: boolean, setShow: Dispatch<SetStateAction<boolean>>, transitionTime: number, color?: string, bgColor?: string) => ReactNode;
+    className?: string;
+    fullSlider?: boolean;
+    fader?: boolean;
+    left?: boolean;
+};
+export declare const Menu: ({ children, onCloseClickOverride, shouldCloseOnClick, transitionTime, zIndex, color, bgColor, menuBgColor, backdropColor, settings, renderButton, className, fullSlider, fader, left }: MenuProps) => import("react").JSX.Element;

package/dist/NumberSelect/NumberSelect.d.ts

@@ -0,0 +1,16 @@
+export type NumberSelectProps = {
+    value: number;
+    setValue: (value: number) => void;
+    min?: number;
+    max?: number;
+    size?: number;
+    color?: string;
+    numberBgColor?: string;
+    selectorColor?: string;
+    timeout?: number;
+    onOpenInput?: () => void;
+    closed?: boolean;
+    invert?: boolean;
+    noFlick?: boolean;
+};
+export declare const NumberSelect: ({ value, setValue, min, max, size, color, numberBgColor, selectorColor, timeout, onOpenInput, closed, invert, noFlick }: NumberSelectProps) => import("react").JSX.Element;

package/dist/PaneView/PaneView.d.ts

@@ -0,0 +1,7 @@
+import type { CSSProperties, ReactNode } from 'react';
+export type PaneViewProps = {
+    children?: ReactNode;
+    styleOverride?: CSSProperties;
+    startOnPane?: number;
+};
+export declare const PaneView: ({ children, styleOverride, startOnPane }: PaneViewProps) => import("react").JSX.Element;

package/dist/Radio/RadioButton.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export type RadioButtonProps = {
+    active: boolean;
+    text?: ReactNode;
+    className?: string;
+    color?: string;
+};
+export declare const RadioButton: ({ active, text, className, color }: RadioButtonProps) => import("react").JSX.Element;

package/dist/Radio/RadioGroup.d.ts

@@ -0,0 +1,12 @@
+import type { Key, ReactNode } from 'react';
+export type RadioOption<K extends Key = string> = {
+    key: K;
+    label: ReactNode;
+};
+export type RadioGroupProps<K extends Key = string> = {
+    options: RadioOption<K>[];
+    selected?: K;
+    onSelect: (key: K) => void;
+    color?: string;
+};
+export declare const RadioGroup: <K extends Key = string>({ options, selected, onSelect, color }: RadioGroupProps<K>) => import("react").JSX.Element;

package/dist/Radio/index.d.ts

@@ -0,0 +1,4 @@
+export { RadioButton } from './RadioButton';
+export type { RadioButtonProps } from './RadioButton';
+export { RadioGroup } from './RadioGroup';
+export type { RadioGroupProps, RadioOption } from './RadioGroup';

package/dist/index.css

@@ -0,0 +1 @@
+.xburgerMenuButton{cursor:pointer;-webkit-tap-highlight-color:#fff0;border:none;border-radius:.5rem;outline:none;justify-content:center;align-items:center;width:50px;height:50px;padding:0;font-size:1.3em;display:flex}.xburgerMenu{padding-top:80px;position:fixed;top:0;bottom:0}.xburgerMenu.fader{left:0;right:0}.slider.xburgerMenu{left:calc(100vw + 20px);right:calc(-80vw - 20px)}.left.slider.xburgerMenu{left:calc(-80vw - 20px);right:calc(100vw + 20px)}.button{position:absolute;top:1rem}.button:not(.left){right:1rem}.left.button{left:1rem}.xburgerTouchOutsideSensor{opacity:0;pointer-events:none;position:absolute;inset:0}.xburgerTouchOutsideSensor.show{opacity:1;pointer-events:unset}.slider.xburgerMenu.show{left:0;right:0}.partial.slider.xburgerMenu.show:not(.left){left:20vw}.partial.left.slider.xburgerMenu.show{right:20vw}.xburgerMenu a *{pointer-events:none}.fader.xburgerMenu{opacity:1}.fader.xburgerMenu:not(.show){opacity:0;pointer-events:none}.settingsButton,.resetButton{background:0 0;border:none;outline:none}.resetButton,.settingsButton{border-radius:10px;width:50px;height:50px;padding:10px}.settingsButton svg{width:100%;height:100%}.resetButton{padding:5px}.resetButton svg{width:40px;height:40px}@-moz-keyframes spinCC{0%{-moz-transform:rotate(0)}to{-moz-transform:rotate(-360deg)}}@-webkit-keyframes spinCC{0%{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(-360deg)}}@keyframes spinCC{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.numberSelect{z-index:2;position:relative}.swipeBlobContainer{position:absolute;inset:0}.swipeBlobContainer .swipeBlob{clip-path:polygon(15% 20%,50% 0,85% 20%,100% 50%,80% 85%,50% 100%,20% 85%,0 50%);position:absolute}.plusMinus{text-align:center;z-index:3;color:#fff;justify-content:center;align-items:center;display:flex;position:absolute;left:0;right:0}.plusMinus svg{margin:0}.numberSelect_doneClosing{z-index:1}.numberSelect_value{z-index:2;border-radius:100%;justify-content:center;align-items:center;display:flex;position:relative}.numberSelect_input{opacity:1;z-index:1;transition:opacity .2s linear}.numberSelect_input-hidden{opacity:0;pointer-events:none}.numberSelect_increment{z-index:2;border-radius:100%;transition:top .2s linear,bottom .2s linear;position:absolute}.numberSelect_blur{pointer-events:none;z-index:1;opacity:1;transition:opacity .2s linear;position:absolute}.numberSelect_input-hidden .numberSelect_blur{opacity:0}.numberSelect_add svg path{translate:0 -2rem}.numberSelect_subtract svg path{translate:0 2rem}.grevlingPaneView{scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none;position:absolute;inset:0;overflow:auto scroll}.grevlingPaneView::-webkit-scrollbar{display:none}.grevlingPaneViewScrollyContent{width:100%;height:100%;display:flex}.grevlingPaneViewPane{scroll-snap-align:start;scroll-snap-stop:always;min-width:100%;max-height:100%}@-moz-keyframes spin{to{-moz-transform:rotate(360deg)}}@-webkit-keyframes spin{to{-webkit-transform:rotate(360deg)}}@keyframes spin{to{transform:rotate(360deg)}}@-moz-keyframes spinCC{to{-moz-transform:rotate(-360deg)}}@-webkit-keyframes spinCC{to{-webkit-transform:rotate(-360deg)}}@keyframes spinCC{to{transform:rotate(-360deg)}}

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+export { Menu } from './Menu/Menu';
+export type { MenuProps } from './Menu/Menu';
+export { MenuButton } from './Buttons/MenuButton';
+export type { MenuButtonProps } from './Buttons/MenuButton';
+export { SettingsButton } from './Buttons/SettingsButton';
+export type { SettingsButtonProps } from './Buttons/SettingsButton';
+export { ResetButton } from './Buttons/ResetButton';
+export type { ResetButtonProps } from './Buttons/ResetButton';
+export { CheckBox } from './CheckBox';
+export type { CheckBoxProps } from './CheckBox';
+export { RadioButton, RadioGroup } from './Radio';
+export type { RadioButtonProps, RadioGroupProps, RadioOption } from './Radio';
+export { NumberSelect } from './NumberSelect/NumberSelect';
+export type { NumberSelectProps } from './NumberSelect/NumberSelect';
+export { PaneView } from './PaneView/PaneView';
+export type { PaneViewProps } from './PaneView/PaneView';
+export { Loader } from './Loader/Loader';
+export type { LoaderProps } from './Loader/Loader';