Work on Tailwind: Input

Ported the `input` component into tailwind. Split into two components
for numeric and text input.

Also removed unnecessary scss files and moved `rucio.d.ts` to
`src/component-library/components.d.ts` to reflect that this file only
provides the interfaces for the components.

package.json

@@ -11,7 +11,8 @@
     "test:api": "jest --projects test/api/jest.api.config.js",
     "test:component": "jest --projects test/component/jest.component.config.js",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "build-tailwind": "tailwindcss -i src/component-library/tailwind.css -o src/component-library/outputtailwind.css"
   },
   "dependencies": {
     "@next/font": "13.1.6",

rucio.d.ts → src/component-library/components.d.ts

@@ -78,19 +78,23 @@ interface ImageProps {
 }
 
 interface InputProps {
-    type?: string
+    // kind?: 'primary' | 'info' | 'link' | 'normal'
+    disabled?: boolean
+    focusByDefault?: boolean
+    inline?: boolean
     label?: string
-    name?: string
+    onChange?: (args: any) => void
     placeholder?: string
-    kind?: 'primary' | 'info' | 'link' | 'normal'
-    show?: 'danger' | 'warning' | 'success' | 'rounded'
-    size?: 'small' | 'medium' | 'large'
-    value?: any
-    min?: number
+    show?: "error" | "success" | "standard"
+}
+
+interface TextInputProps extends InputProps {
+    password?: boolean
+}
+
+interface NumberInputProps extends InputProps {
     max?: number
-    width?: string | number
-    focusByDefault?: boolean
-    onChange?: (args: any) => void
+    min?: number
 }
 
 interface ModalProps {

src/component-library/components/Alert/Alert.stories.tsx

@@ -1,13 +1,13 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { StoryFn, Meta } from '@storybook/react'
 
 import { Alert } from './Alert'
 
 export default {
     title: 'Components/Alert',
     component: Alert,
-} as ComponentMeta<typeof Alert>
+} as Meta<typeof Alert>
 
-const Template: ComponentStory<typeof Alert> = args => <Alert {...args} />
+const Template: StoryFn<typeof Alert> = args => <Alert {...args} />
 
 export const Standard= Template.bind({})
 Standard.args = {

src/component-library/components/Box/Box.stories.tsx

@@ -1,13 +1,10 @@
 import { StoryFn, Meta} from '@storybook/react'
 
 import { Box } from './Box'
-import { BoxBody } from './components/BoxBody'
-import { BoxFooter } from './components/BoxFooter'
 
 export default {
     title: 'Components/Box',
     component: Box,
-    subcomponents: { BoxBody: BoxBody, BoxFooter: BoxFooter },
 } as Meta<typeof Box>
 
 const Template: StoryFn<typeof Box> = args => <Box {...args}/>

src/component-library/components/Box/Box.tsx

@@ -34,10 +34,10 @@ export const Box = ({
                 <h3 className="text-xl font-bold">{title}</h3>
             </div>
             <div className={divBodyClasses.join(" ")}>
-                Hello
+                {body}
             </div>
             <div className={divFooterClasses.join(" ")}>
-                Hello
+                {footer}
             </div>
         </div>
     )

src/component-library/components/Input/Input.stories.tsx

@@ -1,27 +1,35 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { StoryFn, Meta } from '@storybook/react'
 
 import { Input } from './Input'
+import { NumberInput } from './NumberInput'
 
 export default {
     title: 'Components/Input',
     component: Input,
-} as ComponentMeta<typeof Input>
+} as Meta<typeof Input>
 
-const Template: ComponentStory<typeof Input> = args => <Input {...args} />
+const TemplateText: StoryFn<typeof Input> = args => <Input {...args} />
 
-export const TextInput = Template.bind({})
+export const TextInput = TemplateText.bind({})
 TextInput.args = {
-    size: 'medium',
-    kind: 'primary',
+    disabled: false,
+    focusByDefault: false,
+    inline: false,
     label: 'TextInput',
+    password: false,
+    placeholder: 'Placeholder String',
+    show: 'standard'
 }
 
-export const NumberInput = Template.bind({})
-NumberInput.args = {
-    type: 'number',
-    show: 'rounded',
-    kind: 'primary',
-    label: 'NumberInput',
-    min: 0,
-    max: 5,
-}
+// export const NumericInput = TemplateNumber.bind({})
+// NumericInput.args = {
+//     disabled: false,
+//     focusByDefault: false,
+//     inline: false,
+//     label: 'TextInput',
+//     max: 100,
+//     min: 0,
+//     password: false,
+//     placeholder: 'Placeholder String',
+//     show: 'standard'
+// }

src/component-library/components/Input/Input.tsx

@@ -1,35 +1,62 @@
-import './input.scss'
-
 export const Input = ({
-    type = 'text',
-    label,
-    name = 'sample',
-    placeholder = 'Sample placeholder',
-    size = 'medium',
-    kind = 'normal',
-    show,
-    value,
+    disabled = false,
     focusByDefault = false,
-    min,
-    max,
+    inline = false,
+    label = "",
     onChange,
-    width,
-}: InputProps) => {
+    password = false,
+    placeholder = "",
+    show,
+}: TextInputProps) => {
+    var divClasses: string[] = ["w-full"]
+    var labelClasses: string[] = []
+    var inputClasses: string[] = ["border", "rounded"]
+
+    // Handle inline or block
+    if (!inline) {
+        divClasses.push("block")
+        labelClasses.push("block")
+        inputClasses.push("block", "w-full", "p-2", "-mt-4")
+    }
+    else {
+        divClasses.push("grid", "grid-cols-3", "gap-2", "p-1")
+        labelClasses.push("col-span-1", "text-right", "self-center")
+        inputClasses.push("col-span-2", "p-1")
+    }
+
+    // Handle show (only if not disabled)
+    if(!disabled) {
+        switch(show) {
+            case "error":
+                inputClasses.push("border-red-500", "bg-red-100")
+                break
+            case "success":
+                inputClasses.push("border-green-500", "bg-green-100")
+                break
+            default:
+                inputClasses.push("border-gray-300", "bg-gray-50")
+                break
+        }
+    }
+
     return (
-        <label>
-            {label}
+        <div
+            className={divClasses.join(" ")}
+        >
+            <label
+                className={labelClasses.join(" ")}
+            >
+                {label}
+            </label>
             <input
-                type={type}
-                name={name}
-                placeholder={placeholder}
-                className={`rucio-input ${kind} ${size} ${show}`}
+                className={inputClasses.join(" ")}
                 onChange={onChange}
-                value={value}
+                placeholder={placeholder}
                 autoFocus={focusByDefault}
-                min={min}
-                max={max}
-                style={{ width }}
-            ></input>
-        </label>
+                disabled={disabled}
+                type={password ? "password" : "text"}
+            >
+            </input>
+        </div>
     )
 }

src/component-library/components/Input/NumberInput.stories.tsx

@@ -0,0 +1,22 @@
+import { StoryFn, Meta } from '@storybook/react'
+
+import { NumberInput } from './NumberInput'
+
+export default {
+    title: 'Components/Input',
+    component: NumberInput,
+} as Meta<typeof NumberInput>
+
+const Template: StoryFn<typeof NumberInput> = args => <NumberInput {...args} />
+
+export const NumericInput = Template.bind({})
+NumericInput.args = {
+    disabled: false,
+    focusByDefault: false,
+    inline: false,
+    label: 'NumberInput',
+    max: 100,
+    min: 0,
+    placeholder: 'Placeholder String',
+    show: 'standard'
+}

src/component-library/components/Input/NumberInput.tsx

@@ -0,0 +1,65 @@
+export const NumberInput = ({
+    disabled = false,
+    focusByDefault = false,
+    inline = false,
+    label = "",
+    max,
+    min,
+    onChange,
+    placeholder = "",
+    show,
+}: NumberInputProps) => {
+    var divClasses: string[] = ["w-full"]
+    var labelClasses: string[] = []
+    var inputClasses: string[] = ["border", "rounded"]
+
+    // Handle inline or block
+    if (!inline) {
+        divClasses.push("block")
+        labelClasses.push("block")
+        inputClasses.push("block", "w-full", "p-2", "-mt-4")
+    }
+    else {
+        divClasses.push("grid", "grid-cols-3", "gap-2", "p-1")
+        labelClasses.push("col-span-1", "text-right", "self-center")
+        inputClasses.push("col-span-2", "p-1")
+    }
+
+    // Handle show (only if not disabled)
+    if(!disabled) {
+        switch(show) {
+            case "error":
+                inputClasses.push("border-red-500", "bg-red-100")
+                break
+            case "success":
+                inputClasses.push("border-green-500", "bg-green-100")
+                break
+            default:
+                inputClasses.push("border-gray-300", "bg-gray-50")
+                break
+        }
+    }
+
+    return (
+        <div
+            className={divClasses.join(" ")}
+        >
+            <label
+                className={labelClasses.join(" ")}
+            >
+                {label}
+            </label>
+            <input
+                className={inputClasses.join(" ")}
+                onChange={onChange}
+                placeholder={placeholder}
+                autoFocus={focusByDefault}
+                disabled={disabled}
+                max={max ? max.toString() : ""} 
+                min={min ? min.toString() : ""}
+                type="number"
+            >
+            </input>
+        </div>
+    )
+}