From 35f4ef94080f874ef93ca7ad8a0bca945b6ba77e Mon Sep 17 00:00:00 2001 From: Anton Schwarz Date: Thu, 16 Feb 2023 10:04:06 +0000 Subject: [PATCH] Port Simple Components Including Bulma Ported components (stories) into `src/component-library`. These components are called *simple* because they use Bulma CSS (and related dependencies) but do not rely on other components. In addition, if a component requires the handling of images, it is omitted in this commit. Added Components: * Checkbox (requires `bulma-checkradio`) * Dropdown * Form * Input * Modal * ProgressBar * Steps (requires `bulma-steps`) * Table * Tabs * ToggleSwitch (requires `bulma-switch`) --- package-lock.json | 50 ++++++++++++++ package.json | 4 ++ .../Checkbox/Checkbox.stories.tsx | 26 ++++++++ src/component-library/Checkbox/Checkbox.tsx | 33 ++++++++++ src/component-library/Checkbox/checkbox.scss | 40 +++++++++++ .../Dropdown/Dropdown.stories.tsx | 16 +++++ src/component-library/Dropdown/Dropdown.tsx | 53 +++++++++++++++ src/component-library/Dropdown/dropdown.scss | 19 ++++++ src/component-library/Form/Form.stories.tsx | 15 +++++ src/component-library/Form/Form.tsx | 61 +++++++++++++++++ src/component-library/Form/form.scss | 18 +++++ src/component-library/Input/Input.stories.tsx | 27 ++++++++ src/component-library/Input/Input.tsx | 35 ++++++++++ src/component-library/Input/input.scss | 49 ++++++++++++++ src/component-library/Modal/Modal.stories.tsx | 13 ++++ src/component-library/Modal/Modal.tsx | 26 ++++++++ src/component-library/Modal/modal.scss | 2 + .../ProgressBar/ProgressBar.stories.tsx | 18 +++++ .../ProgressBar/ProgressBar.tsx | 20 ++++++ .../ProgressBar/progressbar.scss | 2 + src/component-library/Steps/Steps.stories.tsx | 21 ++++++ src/component-library/Steps/Steps.tsx | 41 ++++++++++++ src/component-library/Steps/steps.scss | 20 ++++++ src/component-library/Table/Table.stories.tsx | 12 ++++ src/component-library/Table/Table.tsx | 66 +++++++++++++++++++ src/component-library/Table/table.scss | 31 +++++++++ src/component-library/Tabs/Tabs.stories.tsx | 15 +++++ src/component-library/Tabs/Tabs.tsx | 42 ++++++++++++ src/component-library/Tabs/tabs.scss | 31 +++++++++ .../ToggleSwitch/ToggleSwitch.stories.tsx | 17 +++++ .../ToggleSwitch/ToggleSwitch.tsx | 30 +++++++++ .../ToggleSwitch/toggleswitch.scss | 34 ++++++++++ 32 files changed, 887 insertions(+) create mode 100644 src/component-library/Checkbox/Checkbox.stories.tsx create mode 100644 src/component-library/Checkbox/Checkbox.tsx create mode 100644 src/component-library/Checkbox/checkbox.scss create mode 100644 src/component-library/Dropdown/Dropdown.stories.tsx create mode 100644 src/component-library/Dropdown/Dropdown.tsx create mode 100644 src/component-library/Dropdown/dropdown.scss create mode 100644 src/component-library/Form/Form.stories.tsx create mode 100644 src/component-library/Form/Form.tsx create mode 100644 src/component-library/Form/form.scss create mode 100644 src/component-library/Input/Input.stories.tsx create mode 100644 src/component-library/Input/Input.tsx create mode 100644 src/component-library/Input/input.scss create mode 100644 src/component-library/Modal/Modal.stories.tsx create mode 100644 src/component-library/Modal/Modal.tsx create mode 100644 src/component-library/Modal/modal.scss create mode 100644 src/component-library/ProgressBar/ProgressBar.stories.tsx create mode 100644 src/component-library/ProgressBar/ProgressBar.tsx create mode 100644 src/component-library/ProgressBar/progressbar.scss create mode 100644 src/component-library/Steps/Steps.stories.tsx create mode 100644 src/component-library/Steps/Steps.tsx create mode 100644 src/component-library/Steps/steps.scss create mode 100644 src/component-library/Table/Table.stories.tsx create mode 100644 src/component-library/Table/Table.tsx create mode 100644 src/component-library/Table/table.scss create mode 100644 src/component-library/Tabs/Tabs.stories.tsx create mode 100644 src/component-library/Tabs/Tabs.tsx create mode 100644 src/component-library/Tabs/tabs.scss create mode 100644 src/component-library/ToggleSwitch/ToggleSwitch.stories.tsx create mode 100644 src/component-library/ToggleSwitch/ToggleSwitch.tsx create mode 100644 src/component-library/ToggleSwitch/toggleswitch.scss diff --git a/package-lock.json b/package-lock.json index 87ccc20..a077a09 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,10 @@ "@primer/css": "^20.8.2", "@types/react": "18.0.27", "@types/react-dom": "18.0.10", + "bulma": "^0.9.4", + "bulma-checkradio": "^2.1.3", + "bulma-steps": "^2.2.1", + "bulma-switch": "^2.0.4", "eslint": "8.33.0", "eslint-config-next": "13.1.6", "inversify": "^6.0.1", @@ -11972,6 +11976,29 @@ "integrity": "sha512-HpGFw18DgFWlncDfjTa2rcQ4W88O1mC8e8yZ2AvQY5KDaktSTwo+KRf6nHK6FRI5FyRyb/5T6+TSxfP7QyGsmQ==", "dev": true }, + "node_modules/bulma": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz", + "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==" + }, + "node_modules/bulma-checkradio": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/bulma-checkradio/-/bulma-checkradio-2.1.3.tgz", + "integrity": "sha512-8OmZ7PURyftNLGXSTNAYNTJHIe0OkoH/8z9iWfSXGxiv3AlrKneMtiVpBKofXsvc9ZHBUI1YjefiW5WFhgFgAQ==", + "dependencies": { + "bulma": "^0.9.3" + } + }, + "node_modules/bulma-steps": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/bulma-steps/-/bulma-steps-2.2.1.tgz", + "integrity": "sha512-fD50xz49zPVAfsRNcwBR7rd1lgNdKrcsIXAfVMwMH9A6iDhauOTkiEJOxXj4xZuW/CI6JpV+fCgj5uIuN1lP3Q==" + }, + "node_modules/bulma-switch": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/bulma-switch/-/bulma-switch-2.0.4.tgz", + "integrity": "sha512-kMu4H0Pr0VjvfsnT6viRDCgptUq0Rvy7y7PX6q+IHg1xUynsjszPjhAdal5ysAlCG5HNO+5YXxeiu92qYGQolw==" + }, "node_modules/bytes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", @@ -35377,6 +35404,29 @@ "integrity": "sha512-HpGFw18DgFWlncDfjTa2rcQ4W88O1mC8e8yZ2AvQY5KDaktSTwo+KRf6nHK6FRI5FyRyb/5T6+TSxfP7QyGsmQ==", "dev": true }, + "bulma": { + "version": "0.9.4", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz", + "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==" + }, + "bulma-checkradio": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/bulma-checkradio/-/bulma-checkradio-2.1.3.tgz", + "integrity": "sha512-8OmZ7PURyftNLGXSTNAYNTJHIe0OkoH/8z9iWfSXGxiv3AlrKneMtiVpBKofXsvc9ZHBUI1YjefiW5WFhgFgAQ==", + "requires": { + "bulma": "^0.9.3" + } + }, + "bulma-steps": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/bulma-steps/-/bulma-steps-2.2.1.tgz", + "integrity": "sha512-fD50xz49zPVAfsRNcwBR7rd1lgNdKrcsIXAfVMwMH9A6iDhauOTkiEJOxXj4xZuW/CI6JpV+fCgj5uIuN1lP3Q==" + }, + "bulma-switch": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/bulma-switch/-/bulma-switch-2.0.4.tgz", + "integrity": "sha512-kMu4H0Pr0VjvfsnT6viRDCgptUq0Rvy7y7PX6q+IHg1xUynsjszPjhAdal5ysAlCG5HNO+5YXxeiu92qYGQolw==" + }, "bytes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", diff --git a/package.json b/package.json index 81a5d45..e196331 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,10 @@ "@primer/css": "^20.8.2", "@types/react": "18.0.27", "@types/react-dom": "18.0.10", + "bulma": "^0.9.4", + "bulma-checkradio": "^2.1.3", + "bulma-steps": "^2.2.1", + "bulma-switch": "^2.0.4", "eslint": "8.33.0", "eslint-config-next": "13.1.6", "inversify": "^6.0.1", diff --git a/src/component-library/Checkbox/Checkbox.stories.tsx b/src/component-library/Checkbox/Checkbox.stories.tsx new file mode 100644 index 0000000..83dff05 --- /dev/null +++ b/src/component-library/Checkbox/Checkbox.stories.tsx @@ -0,0 +1,26 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react' +import { Checkbox } from './Checkbox' + +export default { + title: 'Components/Button', + component: Checkbox, +} as ComponentMeta + +const Template: ComponentStory = args => + +export const CheckBox = Template.bind({}) +CheckBox.args = { + label: 'example', + kind: 'success', + isChecked: true, + style: 'rounded_checkbox', +} + +export const RadioButton = Template.bind({}) +RadioButton.args = { + label: 'example', + kind: 'info', + style: 'background-color', + isChecked: true, + type: 'radio', +} diff --git a/src/component-library/Checkbox/Checkbox.tsx b/src/component-library/Checkbox/Checkbox.tsx new file mode 100644 index 0000000..58045ed --- /dev/null +++ b/src/component-library/Checkbox/Checkbox.tsx @@ -0,0 +1,33 @@ +import './checkbox.scss' + +import { useState } from 'react' + +export const Checkbox = ({ + label = '', + type = 'checkbox', + size, + kind, + style, + isChecked = false, + name, + handleChange, +}: CheckboxProps) => { + const [checked, setChecked] = useState(isChecked) + return ( +
{ + setChecked(!checked) + handleChange?.(event) + }} + > + args} + name={name} + /> + +
+ ) +} diff --git a/src/component-library/Checkbox/checkbox.scss b/src/component-library/Checkbox/checkbox.scss new file mode 100644 index 0000000..bbfa460 --- /dev/null +++ b/src/component-library/Checkbox/checkbox.scss @@ -0,0 +1,40 @@ +@import 'bulma/sass/elements/_all.sass'; +@import 'bulma/sass/form/_all.sass'; +@import 'bulma-checkradio/src/sass/index.sass'; + +.rucio-checkradio { + @extend .is-checkradio; + &.success { + @extend .is-success; + } + &.warning { + @extend .is-warning; + } + &.danger { + @extend .is-danger; + } + &.info { + @extend .is-info; + } + &.small { + @extend .is-small; + } + &.medium { + @extend .is-medium; + } + &.large { + @extend .is-large; + } + &.rounded_checkbox { + @extend .is-circle; + } + &.block { + @extend .is-block; + } + &.no_border { + @extend .has-no-border; + } + &.background-color { + @extend .has-background-color; + } +} diff --git a/src/component-library/Dropdown/Dropdown.stories.tsx b/src/component-library/Dropdown/Dropdown.stories.tsx new file mode 100644 index 0000000..a41e18b --- /dev/null +++ b/src/component-library/Dropdown/Dropdown.stories.tsx @@ -0,0 +1,16 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react' + +import { Dropdown } from './Dropdown' + +export default { + title: 'Components/Dropdown', + component: Dropdown, +} as ComponentMeta + +const Template: ComponentStory = args => + +export const Primary = Template.bind({}) +Primary.args = { + label: 'Dropdown', + options: ['option 1', 'option 2', 'option 3'], +} diff --git a/src/component-library/Dropdown/Dropdown.tsx b/src/component-library/Dropdown/Dropdown.tsx new file mode 100644 index 0000000..c4091eb --- /dev/null +++ b/src/component-library/Dropdown/Dropdown.tsx @@ -0,0 +1,53 @@ +import './dropdown.scss' + +import { useState } from 'react' + +export const Dropdown = ({ + label = '', + options = [], + ...props +}: DropdownProps) => { + const [isActive, setActive] = useState(false) + const [selectedlabel, setSelectedLabel] = useState(label) + return ( +
+
+ +
+ +
+ ) +} diff --git a/src/component-library/Dropdown/dropdown.scss b/src/component-library/Dropdown/dropdown.scss new file mode 100644 index 0000000..80db9c4 --- /dev/null +++ b/src/component-library/Dropdown/dropdown.scss @@ -0,0 +1,19 @@ +@import 'bulma/sass/components/dropdown.sass'; + +.rucio-dropdown { + @extend .dropdown; + cursor: pointer; + margin: auto 2px; + border: 1px solid gray; + border-radius: 5px; + &.active { + @extend .is-active; + } +} +option { + text-align: left; +} + +option:hover { + background-color: #f5f5f5ff; +} diff --git a/src/component-library/Form/Form.stories.tsx b/src/component-library/Form/Form.stories.tsx new file mode 100644 index 0000000..e88e768 --- /dev/null +++ b/src/component-library/Form/Form.stories.tsx @@ -0,0 +1,15 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react' + +import { Form } from './Form' + +export default { + title: 'Components/Form', + component: Form, +} as ComponentMeta + +const Template: ComponentStory = args =>
+ +export const Primary = Template.bind({}) +Primary.args = { + title: 'Form', +} diff --git a/src/component-library/Form/Form.tsx b/src/component-library/Form/Form.tsx new file mode 100644 index 0000000..9089752 --- /dev/null +++ b/src/component-library/Form/Form.tsx @@ -0,0 +1,61 @@ +import './form.scss' + +import { useEffect } from 'react' + +import { Button } from '../Button/Button' + +export const Form = ({ + title = 'Title', + subtitle = 'Subtitle', + children = ( +
+
+
+ +
+
+ +
+

+ + + +

+
+ +
+
+
+ ), + onSubmit = () => { + alert('form submitted') + }, +}: FormProps) => { + useEffect(() => { + const formElements: any = document.getElementsByClassName('rucio-form') + Array.from(formElements).forEach((formElement: any) => { + formElement.onkeydown = () => { + const keyboardEvent = window?.event as KeyboardEvent + if (keyboardEvent?.key === 'Enter') { + onSubmit(keyboardEvent) + } + } + }) + }) + + return ( + +

{title}

+

{subtitle}

+ {children} +
+ ) +} diff --git a/src/component-library/Form/form.scss b/src/component-library/Form/form.scss new file mode 100644 index 0000000..7f8ef20 --- /dev/null +++ b/src/component-library/Form/form.scss @@ -0,0 +1,18 @@ +@import 'bulma/sass/utilities/_all.sass'; +@import 'bulma/sass/elements/_all.sass'; +@import 'bulma/sass/form/_all.sass'; + +.rucio-form { + .header { + @extend .title; + } + .subheader { + @extend .subtitle; + } + .entry { + @extend .field; + .controls { + @extend .control; + } + } +} diff --git a/src/component-library/Input/Input.stories.tsx b/src/component-library/Input/Input.stories.tsx new file mode 100644 index 0000000..42fff52 --- /dev/null +++ b/src/component-library/Input/Input.stories.tsx @@ -0,0 +1,27 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react' + +import { Input } from './Input' + +export default { + title: 'Components/Input', + component: Input, +} as ComponentMeta + +const Template: ComponentStory = args => + +export const TextInput = Template.bind({}) +TextInput.args = { + size: 'medium', + kind: 'primary', + label: 'TextInput', +} + +export const NumberInput = Template.bind({}) +NumberInput.args = { + type: 'number', + show: 'rounded', + kind: 'primary', + label: 'NumberInput', + min: 0, + max: 5, +} diff --git a/src/component-library/Input/Input.tsx b/src/component-library/Input/Input.tsx new file mode 100644 index 0000000..8316c7a --- /dev/null +++ b/src/component-library/Input/Input.tsx @@ -0,0 +1,35 @@ +import './input.scss' + +export const Input = ({ + type = 'text', + label, + name = 'sample', + placeholder = 'Sample placeholder', + size = 'medium', + kind = 'normal', + show, + value, + focusByDefault = false, + min, + max, + onChange, + width, +}: InputProps) => { + return ( + + ) +} diff --git a/src/component-library/Input/input.scss b/src/component-library/Input/input.scss new file mode 100644 index 0000000..9588d09 --- /dev/null +++ b/src/component-library/Input/input.scss @@ -0,0 +1,49 @@ +@import 'bulma/sass/utilities/_all.sass'; +@import 'bulma/sass/form/_all.sass'; + +.rucio-input { + @extend .input; + &.small { + @extend .is-small; + } + &.normal { + @extend .is-normal; + } + &.medium { + @extend .is-medium; + } + &.large { + @extend .is-large; + } + &.primary { + @extend .is-primary; + } + &.link { + @extend .is-link; + } + &.info { + @extend .is-info; + border-color: #0969da; + :focus { + border-color: #f8f9fd; + } + } + &.success { + @extend .is-success; + } + &.warning { + @extend .is-warning; + } + &.danger { + @extend .is-danger; + } + &.rounded { + @extend .is-rounded; + } + border-radius: 0.5em; +} + +label { + width: 100%; + padding-block: 5px; +} diff --git a/src/component-library/Modal/Modal.stories.tsx b/src/component-library/Modal/Modal.stories.tsx new file mode 100644 index 0000000..1d668d5 --- /dev/null +++ b/src/component-library/Modal/Modal.stories.tsx @@ -0,0 +1,13 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react' + +import { Modal } from './Modal' + +export default { + title: 'Components/Modal', + component: Modal, +} as ComponentMeta + +const Template: ComponentStory = args => + +export const Standard = Template.bind({}) +Standard.args = {} diff --git a/src/component-library/Modal/Modal.tsx b/src/component-library/Modal/Modal.tsx new file mode 100644 index 0000000..5035ef6 --- /dev/null +++ b/src/component-library/Modal/Modal.tsx @@ -0,0 +1,26 @@ +import './modal.scss' + +export const Modal = ({ + active = true, + body = <>Lorem Ipsum, + title = 'Modal title', + onClose, +}: ModalProps) => { + return ( +
+
+
+
+

{title}

+ +
+
{body}
+
+
+
+ ) +} diff --git a/src/component-library/Modal/modal.scss b/src/component-library/Modal/modal.scss new file mode 100644 index 0000000..b0d6735 --- /dev/null +++ b/src/component-library/Modal/modal.scss @@ -0,0 +1,2 @@ +@import 'bulma/sass/utilities/_all.sass'; +@import 'bulma/sass/components/modal.sass'; diff --git a/src/component-library/ProgressBar/ProgressBar.stories.tsx b/src/component-library/ProgressBar/ProgressBar.stories.tsx new file mode 100644 index 0000000..abb8233 --- /dev/null +++ b/src/component-library/ProgressBar/ProgressBar.stories.tsx @@ -0,0 +1,18 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react' + +import { ProgressBar } from './ProgressBar' + +export default { + title: 'Components/ProgressBar', + component: ProgressBar, + argTypes: { + background: { control: 'color' }, + }, +} as ComponentMeta + +const Template: ComponentStory = args => ( + +) + +export const Standard = Template.bind({}) +Standard.args = {} diff --git a/src/component-library/ProgressBar/ProgressBar.tsx b/src/component-library/ProgressBar/ProgressBar.tsx new file mode 100644 index 0000000..d768601 --- /dev/null +++ b/src/component-library/ProgressBar/ProgressBar.tsx @@ -0,0 +1,20 @@ +import './progressbar.scss' + +export const ProgressBar = ({ + title = '50%', + size = 'small', + type = 'info', + value = 50, + max = 100, + ...props +}: ProgressBarProps) => { + return ( + + {title} + + ) +} diff --git a/src/component-library/ProgressBar/progressbar.scss b/src/component-library/ProgressBar/progressbar.scss new file mode 100644 index 0000000..395f87e --- /dev/null +++ b/src/component-library/ProgressBar/progressbar.scss @@ -0,0 +1,2 @@ +@import 'bulma/sass/utilities/_all.sass'; +@import 'bulma/sass/elements/progress.sass'; diff --git a/src/component-library/Steps/Steps.stories.tsx b/src/component-library/Steps/Steps.stories.tsx new file mode 100644 index 0000000..78d3f15 --- /dev/null +++ b/src/component-library/Steps/Steps.stories.tsx @@ -0,0 +1,21 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react' + +import { Steps } from './Steps' + +export default { + title: 'Components/Steps', + component: Steps, +} as ComponentMeta + +const Template: ComponentStory = args => + +export const Primary = Template.bind({}) +Primary.args = { + steps: [ + ['Step', 'This is the first step of the process'], + ['Step', 'This is the second step of the process'], + ['Step', 'This is the third step of the process'], + ['Step', 'This is the fourth step of the process'], + ], + active: 2, +} diff --git a/src/component-library/Steps/Steps.tsx b/src/component-library/Steps/Steps.tsx new file mode 100644 index 0000000..4e95978 --- /dev/null +++ b/src/component-library/Steps/Steps.tsx @@ -0,0 +1,41 @@ +import './steps.scss' + +export const Steps = ({ steps = [], active = 1, size }: StepsProps) => { + return ( +
+ {steps.map((element: any, index: number) => { + return index < active ? ( +
{ + element[2]?.() + }} + > +
✔
+
+

{element?.[0]}

+

{element?.[1]}

+
+
+ ) : index === active ? ( +
+
+
+

{element?.[0]}

+

{element?.[1]}

+
+
+ ) : ( +
+
{index + 1}
+
+

{element?.[0]}

+

{element?.[1]}

+
+
+ ) + })} +
+ ) +} diff --git a/src/component-library/Steps/steps.scss b/src/component-library/Steps/steps.scss new file mode 100644 index 0000000..f9658f0 --- /dev/null +++ b/src/component-library/Steps/steps.scss @@ -0,0 +1,20 @@ +@import 'bulma/sass/utilities/_all.sass'; +@import 'bulma-steps/src/sass/index.sass'; + +.rucio-steps { + @extend .steps; + max-width: 100%; + &.small { + @extend .is-small; + } + &.medium { + @extend .is-medium; + } + &.large { + @extend .is-large; + } +} + +.rucio-steps:hover { + cursor: pointer; +} diff --git a/src/component-library/Table/Table.stories.tsx b/src/component-library/Table/Table.stories.tsx new file mode 100644 index 0000000..761bcbd --- /dev/null +++ b/src/component-library/Table/Table.stories.tsx @@ -0,0 +1,12 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react' +import { Table } from './Table' + +export default { + title: 'Components/Table', + component: Table, +} as ComponentMeta + +const Template: ComponentStory = args => + +export const Primary = Template.bind({}) +Primary.args = {} diff --git a/src/component-library/Table/Table.tsx b/src/component-library/Table/Table.tsx new file mode 100644 index 0000000..f3e9da3 --- /dev/null +++ b/src/component-library/Table/Table.tsx @@ -0,0 +1,66 @@ +import './table.scss' + +import { ReactElement } from 'react' + +export const Table = ({ columns, rows, id, footer }: TableProps) => { + return ( +
+
+ + + {columns?.map((columnTitle: string, index: number) => ( + + ))} + + + + {rows?.map((rowData: ReactElement[], index: number) => ( + { + const currentSelectedRow = + document.getElementById( + (id as string) + '_' + index, + ) + if (currentSelectedRow) { + currentSelectedRow.className = + currentSelectedRow.className === + 'selected' + ? '' + : 'selected' + } + }} + > + + {rowData?.map( + (rowElement: ReactElement, index: number) => ( + + ), + )} + + ))} + + + + {footer?.map((footerTitle: string, index: number) => ( + + ))} + + +
+ {columnTitle} +
{index + 1} + {typeof rowElement === 'boolean' + ? (rowElement as boolean).toString() + : rowElement} +
+ {footerTitle} +
+ + ) +} diff --git a/src/component-library/Table/table.scss b/src/component-library/Table/table.scss new file mode 100644 index 0000000..5ebb5af --- /dev/null +++ b/src/component-library/Table/table.scss @@ -0,0 +1,31 @@ +@import 'bulma/sass/utilities/_all.sass'; +@import 'bulma/sass/elements/_all.sass'; + +.rucio-table { + @extend .table; + &.bordered { + @extend .is-bordered; + } + &.striped { + @extend .is-striped; + } + &.narrow { + @extend .is-narrow; + } + &.hoverable { + @extend .is-hoverable; + } + &.fullwidth { + @extend .is-fullwidth; + } +} + +tr:hover { + cursor: pointer; +} + +tr { + &.selected { + background-color: #94d3a2; + } +} diff --git a/src/component-library/Tabs/Tabs.stories.tsx b/src/component-library/Tabs/Tabs.stories.tsx new file mode 100644 index 0000000..82fb283 --- /dev/null +++ b/src/component-library/Tabs/Tabs.stories.tsx @@ -0,0 +1,15 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react' +import { Tabs } from './Tabs' + +export default { + title: 'Components/Tabs', + component: Tabs, +} as ComponentMeta + +const Template: ComponentStory = args => + +export const Primary = Template.bind({}) +Primary.args = { + tabs: ['DID', 'RSE', 'Options', 'Summary'], + active: 1, +} diff --git a/src/component-library/Tabs/Tabs.tsx b/src/component-library/Tabs/Tabs.tsx new file mode 100644 index 0000000..4b496dd --- /dev/null +++ b/src/component-library/Tabs/Tabs.tsx @@ -0,0 +1,42 @@ +import './tabs.scss' + +export const Tabs = ({ + tabs = [], + active, + alignment, + size, + rounded, + boxed, + fullwidth, + ...props +}: TabsProps) => { + return ( +
+
    + {tabs.map((element, index) => { + return index === active ? ( +
  • + {element} +
    • + ) : ( +
  • + {element} +
    • + ) + })} +
+
+ ) +} diff --git a/src/component-library/Tabs/tabs.scss b/src/component-library/Tabs/tabs.scss new file mode 100644 index 0000000..67926e2 --- /dev/null +++ b/src/component-library/Tabs/tabs.scss @@ -0,0 +1,31 @@ +@import 'bulma/sass/utilities/_all.sass'; +@import 'bulma/sass/components/tabs.sass'; + +.rucio-tabs { + @extend .tabs; + &.right { + @extend .is-right; + } + &.centered { + @extend .is-centered; + } + &.small { + @extend .is-small; + } + &.medium { + @extend .is-medium; + } + &.large { + @extend .is-large; + } + &.boxed { + @extend .is-boxed; + } + &.toggle { + @extend .is-toggle; + } + &.toggle-rounded { + @extend .is-toggle; + @extend .is-toggle-rounded; + } +} diff --git a/src/component-library/ToggleSwitch/ToggleSwitch.stories.tsx b/src/component-library/ToggleSwitch/ToggleSwitch.stories.tsx new file mode 100644 index 0000000..b8377c3 --- /dev/null +++ b/src/component-library/ToggleSwitch/ToggleSwitch.stories.tsx @@ -0,0 +1,17 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react' +import { ToggleSwitch } from './ToggleSwitch' + +export default { + title: 'Components/Button', + component: ToggleSwitch, +} as ComponentMeta + +const Template: ComponentStory = args => ( + +) + +export const Switch = Template.bind({}) +Switch.args = { + label: 'example', + checked: true, +} diff --git a/src/component-library/ToggleSwitch/ToggleSwitch.tsx b/src/component-library/ToggleSwitch/ToggleSwitch.tsx new file mode 100644 index 0000000..34e224a --- /dev/null +++ b/src/component-library/ToggleSwitch/ToggleSwitch.tsx @@ -0,0 +1,30 @@ +import './toggleswitch.scss' + +import { useState } from 'react' + +export const ToggleSwitch = ({ + label = '', + kind = 'success', + size = 'normal', + style = 'rounded', + checked = false, + handleChange = args => args, +}: ToggleSwitchProps) => { + const [checkedState, setCheckedState] = useState(checked) + return ( +
{ + setCheckedState(!checkedState) + handleChange?.(event) + }} + > + + +
+ ) +} diff --git a/src/component-library/ToggleSwitch/toggleswitch.scss b/src/component-library/ToggleSwitch/toggleswitch.scss new file mode 100644 index 0000000..bc96f32 --- /dev/null +++ b/src/component-library/ToggleSwitch/toggleswitch.scss @@ -0,0 +1,34 @@ +@import 'bulma/sass/utilities/_all.sass'; +@import 'bulma/sass/form/_all.sass'; +@import 'bulma-switch/src/sass/index.sass'; + +.rucio-switch { + @extend .switch; + &.small { + @extend .is-small; + } + &.medium { + @extend .is-medium; + } + &.large { + @extend .is-large; + } + &.success { + @extend .is-success; + } + &.warning { + @extend .is-warning; + } + &.danger { + @extend .is-danger; + } + &.info { + @extend .is-info; + } + &.rounded { + @extend .is-rounded; + } + &.outlined { + @extend .is-outlined; + } +}