From d385e453e318aff59ca486e97ccd60415052c9ae Mon Sep 17 00:00:00 2001 From: Anton Schwarz Date: Wed, 22 Feb 2023 09:56:10 +0000 Subject: [PATCH] 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. --- .vscode/settings.json | 4 - package.json | 3 +- .../component-library/components.d.ts | 24 +- .../components/Alert/Alert.stories.tsx | 6 +- .../components/Box/Box.stories.tsx | 3 - src/component-library/components/Box/Box.tsx | 4 +- .../components/Box/components/BoxBody.tsx | 7 - .../components/Box/components/BoxFooter.tsx | 7 - .../components/Input/Input.stories.tsx | 38 +- .../components/Input/Input.tsx | 79 +- .../components/Input/NumberInput.stories.tsx | 22 + .../components/Input/NumberInput.tsx | 65 + .../components/Input/input.scss | 50 - src/component-library/outputtailwind.css | 54 + src/component-library/scss/util.scss | 7412 ----------------- 15 files changed, 238 insertions(+), 7540 deletions(-) delete mode 100644 .vscode/settings.json rename rucio.d.ts => src/component-library/components.d.ts (91%) delete mode 100644 src/component-library/components/Box/components/BoxBody.tsx delete mode 100644 src/component-library/components/Box/components/BoxFooter.tsx create mode 100644 src/component-library/components/Input/NumberInput.stories.tsx create mode 100644 src/component-library/components/Input/NumberInput.tsx delete mode 100644 src/component-library/components/Input/input.scss delete mode 100644 src/component-library/scss/util.scss diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index d067910..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "typescript.tsdk": "node_modules/typescript/lib", - "typescript.enablePromptUseWorkspaceTsdk": true -} \ No newline at end of file diff --git a/package.json b/package.json index 3c2a230..c82c46b 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,8 @@ "lint": "next lint", "test": "jest --watch", "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", diff --git a/rucio.d.ts b/src/component-library/components.d.ts similarity index 91% rename from rucio.d.ts rename to src/component-library/components.d.ts index 5a980c1..454752f 100644 --- a/rucio.d.ts +++ b/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 { diff --git a/src/component-library/components/Alert/Alert.stories.tsx b/src/component-library/components/Alert/Alert.stories.tsx index 72377d5..d19c3e5 100644 --- a/src/component-library/components/Alert/Alert.stories.tsx +++ b/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 +} as Meta -const Template: ComponentStory = args => +const Template: StoryFn = args => export const Standard= Template.bind({}) Standard.args = { diff --git a/src/component-library/components/Box/Box.stories.tsx b/src/component-library/components/Box/Box.stories.tsx index b02c000..d23f175 100644 --- a/src/component-library/components/Box/Box.stories.tsx +++ b/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 const Template: StoryFn = args => diff --git a/src/component-library/components/Box/Box.tsx b/src/component-library/components/Box/Box.tsx index a13f40b..71c4dd4 100644 --- a/src/component-library/components/Box/Box.tsx +++ b/src/component-library/components/Box/Box.tsx @@ -34,10 +34,10 @@ export const Box = ({

{title}

- Hello + {body}
- Hello + {footer}
) diff --git a/src/component-library/components/Box/components/BoxBody.tsx b/src/component-library/components/Box/components/BoxBody.tsx deleted file mode 100644 index 69928fe..0000000 --- a/src/component-library/components/Box/components/BoxBody.tsx +++ /dev/null @@ -1,7 +0,0 @@ -interface BoxBodyProps { - children?: any -} - -export const BoxBody = ({ children =
body
}: BoxBodyProps) => { - return
{children}
-} diff --git a/src/component-library/components/Box/components/BoxFooter.tsx b/src/component-library/components/Box/components/BoxFooter.tsx deleted file mode 100644 index e753c96..0000000 --- a/src/component-library/components/Box/components/BoxFooter.tsx +++ /dev/null @@ -1,7 +0,0 @@ -interface BoxFooterProps { - children?: any -} - -export const BoxFooter = ({ children =
footer
}: BoxFooterProps) => { - return
{children}
-} diff --git a/src/component-library/components/Input/Input.stories.tsx b/src/component-library/components/Input/Input.stories.tsx index 42fff52..847f7e7 100644 --- a/src/component-library/components/Input/Input.stories.tsx +++ b/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 +} as Meta -const Template: ComponentStory = args => +const TemplateText: StoryFn = 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' +// } diff --git a/src/component-library/components/Input/Input.tsx b/src/component-library/components/Input/Input.tsx index 8316c7a..138a196 100644 --- a/src/component-library/components/Input/Input.tsx +++ b/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 ( -