-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #65 from MrVintage710/64-common-wizard-component
Added Storybook to Tauri App and Input Component
- Loading branch information
Showing
19 changed files
with
435 additions
and
62 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| { | ||
| "productName": "vitruvian_vtt_storybook", | ||
| "version": "0.1.0", | ||
| "identifier": "com.vitruvian_vtt.storybook.app", | ||
| "build": { | ||
| "beforeDevCommand": "storybook dev -p 1421 --ci", | ||
| "devUrl": "http://localhost:1421", | ||
| "beforeBuildCommand": "storybook build", | ||
| "frontendDist": "../dist" | ||
| }, | ||
| "app": { | ||
| "windows": [ | ||
| { | ||
| "title": "Vitruvian VTT Storybook", | ||
| "width": 800, | ||
| "height": 600 | ||
| } | ||
| ], | ||
| "security": { | ||
| "csp": null | ||
| } | ||
| }, | ||
| "bundle": { | ||
| "active": true, | ||
| "targets": "all", | ||
| "icon": [ | ||
| "icons/32x32.png", | ||
| "icons/128x128.png", | ||
| "icons/[email protected]", | ||
| "icons/icon.icns", | ||
| "icons/icon.ico" | ||
| ] | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import { forwardRef, useState } from "react"; | ||
| import "./input.css" | ||
| import Icon from "../Icon"; | ||
| import { UnitSize, parseUnitSize } from "../../common/types"; | ||
|
|
||
| export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "className"> & { | ||
| /* The width of the input. Defaults to full */ | ||
| width?: UnitSize; | ||
| /* This is a callback that is called when the value of the input changes. This mirrors the `onChange` callback. */ | ||
| onValueChange? : (value : string) => void; | ||
| }; | ||
|
|
||
| const Input = forwardRef<HTMLInputElement, InputProps>((props: InputProps, ref) => { | ||
| const { placeholder, width = "full", value, onValueChange = () => {} } = props; | ||
|
|
||
| const onBlur = (event : React.FocusEvent<HTMLInputElement>) => { | ||
| props.onBlur && props.onBlur(event); | ||
| const value = event.target ? (event.target as HTMLInputElement).value : ""; | ||
| if(value !== "") { | ||
| event.target.classList.add("filled"); | ||
| } else { | ||
| event.target.classList.remove("filled"); | ||
| } | ||
| } | ||
|
|
||
| const onChange = (event : React.ChangeEvent<HTMLInputElement>) => { | ||
| onValueChange(event.target.value); | ||
| props.onChange && props.onChange(event); | ||
| } | ||
|
|
||
| const widthStyle = width ? {width : parseUnitSize(width)} : {}; | ||
|
|
||
| return ( | ||
| <label className="field mt-2 h-full" style={widthStyle}> | ||
| <input | ||
| autoCapitalize="false" | ||
| autoComplete="false" | ||
| type="text" | ||
| ref={ref} | ||
| {...props} | ||
| value={value} | ||
| className={`${(value !== undefined && value !== "") ? "filled " : ""}text-theme-font-primary bg-theme-background-secondary border border-white rounded-md`} | ||
| style={widthStyle} | ||
| onBlur={onBlur} | ||
| onChange={onChange} | ||
| placeholder={undefined} | ||
| /> | ||
| <span className="placeholder hover:cursor-text">{placeholder}</span> | ||
| <span className="error"><Icon variant="warning"/></span> | ||
| </label> | ||
| ); | ||
| }) | ||
|
|
||
| export default Input; | ||
|
|
||
| /* This hook is used to manage the state of an input that you use so you don't have to do them yourselves.*/ | ||
| export function useInput(props : InputProps) : [string, React.Dispatch<React.SetStateAction<string>>, React.ReactNode] { | ||
|
|
||
| const value : string = props.value ? Array.isArray(props.value) ? props.value[0] : props.value : ""; | ||
| const [input, setInput] = useState<string>(value); | ||
| const component = <Input {...props} value={input} onValueChange={(value) => setInput(value)}/>; | ||
|
|
||
| return [input, setInput, component] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| .field { | ||
| --animation-duration : 0.2s; | ||
| position: relative; | ||
| border: none; | ||
| appearance: none; | ||
| outline: none; | ||
| margin: 0.5rem; | ||
| display: inline-block; | ||
| } | ||
|
|
||
| .field input { | ||
| padding: 0.5rem; | ||
| padding-right: calc(0.5rem + 28px); | ||
| padding-left: 1.0rem; | ||
| font-size: 16pt; | ||
| background-color: var(--background-color); | ||
| outline: none; | ||
| user-select: none; | ||
| } | ||
|
|
||
| .field .placeholder { | ||
| position: absolute; | ||
| left: 1.0rem; | ||
| top: 50%; | ||
| transform: translateY(-50%); | ||
| color: var(--font-color-secondary); | ||
| font-size: 16pt; | ||
| background-color: var(--background-color); | ||
| padding: 0 5px; | ||
| transition: top var(--animation-duration) ease-in-out, font-size var(--animation-duration) ease-in-out, transform var(--animation-duration) ease-in-out; | ||
| user-select: none; | ||
| border-radius: 5px; | ||
| } | ||
|
|
||
| .field input.filled + .placeholder, | ||
| .field input:focus + .placeholder { | ||
| top: 0; | ||
| /* transform: translateY(calc(-16pt - 0.5rem)); */ | ||
| font-size: 12pt; | ||
| } | ||
|
|
||
| .field input:invalid ~ .error { | ||
| visibility: visible;; | ||
|
|
||
| } | ||
|
|
||
| .field input:invalid { | ||
| border-color: var(--error-color); | ||
| } | ||
|
|
||
| .field input:invalid + .placeholder { | ||
| color: var(--error-color); | ||
| } | ||
|
|
||
| .field .error { | ||
| position: absolute; | ||
| top: calc(50% + 2px); | ||
| transform: translateY(-50%); | ||
| fill: var(--error-color); | ||
| right:1.0rem; | ||
| visibility: hidden; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import { useState } from "react" | ||
| import {WizardComponentContext} from "./WizardComponentContext" | ||
|
|
||
| export type WizardComponentProps<T extends object> = { | ||
| startingData: T; | ||
| onWizardAbort : () => void; | ||
| onWizardComplete? : (data: T) => void; | ||
| children: React.ReactNode | React.ReactNode[]; | ||
| } | ||
|
|
||
| export type WizardStepHandler<T> = { | ||
| data : T, | ||
| abort: () => void, | ||
| submitStep : (data : T) => void, | ||
| backStep : () => void | ||
| } | ||
|
|
||
| const WizardComponent = <T extends object>({ | ||
| children, | ||
| startingData, | ||
| onWizardComplete = () => {}, | ||
| onWizardAbort | ||
| } : WizardComponentProps<T>) => { | ||
| const [currentStep, setCurrentStep] = useState(0); | ||
| const [data, setData] = useState<T>(startingData); | ||
|
|
||
| let childrenArray = Array.isArray(children) ? children : [children]; | ||
|
|
||
| if(currentStep >= childrenArray.length) { | ||
| onWizardComplete(data); | ||
| } | ||
|
|
||
| const onSubmitStep = (d : T) => { | ||
| setData({...data, ...d}); | ||
| setCurrentStep(currentStep + 1); | ||
| } | ||
|
|
||
| const onBackStep = () => { | ||
| setCurrentStep(currentStep - 1); | ||
| } | ||
|
|
||
| const onAbortProcess = () => { | ||
| setCurrentStep(0) | ||
| onWizardAbort(); | ||
| } | ||
|
|
||
| return ( | ||
| <WizardComponentContext.Provider value={{ data: data, submitStep : onSubmitStep, backStep : onBackStep, abort: onAbortProcess}}> | ||
| <div className="relative w-full h-full"> | ||
| {childrenArray.map((child, index) => { | ||
| const currentPos = (index - currentStep) * 100; | ||
| const style = { | ||
| transform : `translateX(calc(${currentPos}vw - 50%)) translateY(-50%)`, | ||
| left : `50%`, | ||
| top : '50%' | ||
| } | ||
| return <div style={style} className={`absolute transition-all duration-300 ${currentStep === index ? "opacity-100" : "opacity-0"}`}> | ||
| {child} | ||
| </div> | ||
| })} | ||
| </div> | ||
| </WizardComponentContext.Provider> | ||
| ) | ||
| } | ||
|
|
||
| export default WizardComponent; |
Oops, something went wrong.