Feature: Add form inputs components to lookbook #288

Bilelkihal · 2023-07-06T09:34:04Z

Changes I made:

Add upload ontology page components to lookbook which are:

Screenshots

syphax-bouazzouni

Hi good work;

Some changes to do:

Put all these input-type previews into an inputs folder to regroup them in the preview, see this https://lookbook.build/guide/previews#organizing
Don't remove the text_area_field it not the same as your text area component (yours is the input, mine is a component to display large text(output))
Don't add styles params in your components

app/assets/stylesheets/components/index.scss

app/components/input_field_component.rb

app/components/select_component/select_component.html.haml

syphax-bouazzouni · 2023-07-06T15:33:33Z

For the upload file input,see the existent component FileInputLoaderComponent and update it's design

app/components/file_input_loader_component/file_input_loader_component.html.haml

…previous commit

app/components/input_field_component/input_field_component.html.haml

syphax-bouazzouni · 2023-07-12T08:36:34Z

Also do forget to put them all in the namespace Form:Inputs . For example 'Class DateInput' => Class Form::Input::Date

…logy-components-to-lookbook Feature: Add form inputs components to lookbook

… previews in the lookbook (#336) * Merge pull request #234 from ontoportal-lirmm/feature/update-footer-design Feature: Update footer design * Merge pull request #249 from ontoportal-lirmm/feature/update-account-page-submited-onto Feature: Update account page submitted ontologies * Merge pull request #236 from ontoportal-lirmm/feature/lookbook Feature: Add Lookbook to preview components * Merge pull request #242 from ontoportal-lirmm/feature/lookbook Feature: Add Lookbook to preview view components - fix the new version release * Merge pull request #262 from ontoportal-lirmm/feature/add-rounded-button-component-to-lookbook Feature: Add rounded button to lookbook * Merge pull request #248 from ontoportal-lirmm/feature/add-notification-message-component Feature: Add notification message component * Merge pull request #268 from ontoportal-lirmm/feature/add-submission-fields-components Feature: Add submission fields components * Merge pull request #288 from ontoportal-lirmm/feature/add-upload-ontology-components-to-lookbook Feature: Add form inputs components to lookbook * Merge pull request #284 from ontoportal-lirmm/feature/update-nested-from-input-component-design Feature: Update nested form input component design * Merge pull request #282 from ontoportal-lirmm/feature/extract-search-input-component Feature: Extract search input component * Merge pull request #296 from ontoportal-lirmm/feature/re-organize-lookbook Feature: Re organize lookbook previews * Merge pull request #305 from ontoportal-lirmm/feature/add-table-component Feature: Add table component & Migrate the views to use it * Merge pull request #312 from ontoportal-lirmm/feature/extract-search-input-component Feature: Extract search input component - follow up * Merge pull request #313 from ontoportal-lirmm/fix/nested-from-component-empty-state Fix: Nested form component empty state * Merge pull request #301 from ontoportal-lirmm/feature/add-switch-input-preview Feature: Add switch input preview * Merge pull request #304 from ontoportal-lirmm/feature/add-link-text-components Feature: Add link text components * Merge pull request #310 from ontoportal-lirmm/feature/update-select-component Feature: update select component * Merge pull request #300 from ontoportal-lirmm/feature/add-modal-link-component Feature: Add modal component preview and helpers * Merge pull request #303 from ontoportal-lirmm/feature/add-pill-button Feature: Add pill button * Merge pull request #297 from ontoportal-lirmm/feature/add-tabs-component Feature: Add tabs component * Merge pull request #306 from ontoportal-lirmm/feature/add-circle-progress-bar-component Feature: Add circle progress bar component (style, JS, code and preview) * Merge pull request #247 from ontoportal-lirmm/feature/update-agroportal-primary-color Feature: Update AgroPortal primary color * Merge pull request #319 from ontoportal-lirmm/feature/extract-form-input-components Feature: Extract form input components * Merge pull request #324 from ontoportal-lirmm/feature/add-summary-page-components Feature: Extract summary page components * Merge pull request #314 from ontoportal-lirmm/add-buttons-components-to-lookbook Feature: Add buttons components to lookbook * Feature: Add progress pages component (#328) * add progress pages component * put again the type argument for button component * fix progress pages item not center if test is long * make progress pages container take full width by default * Fix progress item position (first & last one) to be aligned with the content * fix progress item checked state to show the icon and the good background * make the progress page component preview width bigger --------- Co-authored-by: Bilel Kihal <[email protected]> * Merge pull request #259 from ontoportal-lirmm/feature/add-other-states-to-card-message-component Feature: Add warning state to card message component * Merge pull request #238 from ontoportal-lirmm/feature/update-nav-bar-design Feature: Update nav bar design * Merge pull request #331 from ontoportal-lirmm/feature/update-404-error-design Feature: Update 404 error design * Merge pull request #263 from ontoportal-lirmm/feature/update-nav-bar-design Fix: replace nav_bar css nav-link to top-nav-nav-link to prevent conflicts --------- Co-authored-by: Bilel Kihal <[email protected]>

Fix issues in the Admin Console with ontology and submission deletion

Bilelkihal added 5 commits July 6, 2023 09:11

add input field to lookbook

fcb5f18

add select component to lookbook

8aa6195

add text area component to lookbook

b888400

remove old undesired text area input from lookbook

a1a6ce6

add margin to lookbook preview

217b804

Bilelkihal added the enhancement New feature or request label Jul 6, 2023

Bilelkihal requested a review from syphax-bouazzouni July 6, 2023 09:34

Bilelkihal self-assigned this Jul 6, 2023

syphax-bouazzouni requested changes Jul 6, 2023

View reviewed changes

app/assets/stylesheets/components/index.scss Show resolved Hide resolved

app/components/input_field_component.rb Outdated Show resolved Hide resolved

app/components/select_component/select_component.html.haml Outdated Show resolved Hide resolved

add Upload file input component to lookbook

eb6504a

Bilelkihal commented Jul 11, 2023

View reviewed changes

app/components/file_input_loader_component/file_input_loader_component.html.haml Outdated Show resolved Hide resolved

Bilelkihal added 10 commits July 11, 2023 19:30

combine all input components in one globale component

13d5e8d

remove style params from input field component

192f73e

recover text area field component (after deleting it by mistake in a …

8f56500

…previous commit

use inline svg in file input loader component

225d3dc

add hint to text input component

1595b69

add error state to input field component

51eb8ba

add helper text to input field component

b44eaae

add notes to input field component to explain how to use it

602caee

combine text area input component with input field component

4034e71

groupe inputs in one folder in the lookbook

a59d056

Bilelkihal requested a review from syphax-bouazzouni July 11, 2023 23:02

fix style issues in input field component

76c4f61

syphax-bouazzouni requested changes Jul 12, 2023

View reviewed changes

app/components/input_field_component/input_field_component.html.haml Outdated Show resolved Hide resolved

syphax-bouazzouni changed the title ~~Feature: Add upload ontology components to lookbook~~ Feature: Add form inputs components to lookbook Jul 12, 2023

refactor input field component code to remove repetition

a46e007

Bilelkihal requested a review from syphax-bouazzouni July 12, 2023 12:05

remove the duplicated alert component preview

cfd373a

syphax-bouazzouni added 7 commits July 12, 2023 19:25

make the input field component generic using a the content slot

7e01a59

implement form date component

351b1a4

implement form text area component

8d7f47f

implement form text input component

c1f1db8

duplicate the select component to be in the "form" namespace

d173a9b

fix select input component inversed open_to_add_values argument usage

6694a18

move and rename file input loader component to be in the form module

93f66f9

syphax-bouazzouni force-pushed the feature/add-upload-ontology-components-to-lookbook branch from 2993752 to 93f66f9 Compare July 12, 2023 17:31

syphax-bouazzouni approved these changes Jul 12, 2023

View reviewed changes

update select component to use InputFieldComponent to have a label

106b79c

syphax-bouazzouni merged commit bb1eaf6 into development Jul 12, 2023

syphax-bouazzouni mentioned this pull request Jul 13, 2023

Have a system of components ( a design system) #243

Closed

23 tasks

syphax-bouazzouni mentioned this pull request Sep 5, 2023

Merge to master - Release 2.7.0.3 - New UI, Multilingual integration, New metadata mode and docker images #240

Merged

syphax-bouazzouni added a commit that referenced this pull request Sep 5, 2023

Merge pull request #288 from ontoportal-lirmm/feature/add-upload-onto…

be643f3

…logy-components-to-lookbook Feature: Add form inputs components to lookbook

syphax-bouazzouni mentioned this pull request Sep 5, 2023

Merge to master: Release 2.7.0.2 - Adds all the view components, with previews in the lookbook #336

Merged

syphax-bouazzouni pushed a commit that referenced this pull request Apr 17, 2024

Merge pull request #288 from ncbo/bugfix/ontology-deletion/287

b45ed09

Fix issues in the Admin Console with ontology and submission deletion

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature: Add form inputs components to lookbook #288

Feature: Add form inputs components to lookbook #288

Bilelkihal commented Jul 6, 2023 •

edited

Loading

syphax-bouazzouni left a comment

syphax-bouazzouni commented Jul 6, 2023

syphax-bouazzouni commented Jul 12, 2023 •

edited

Loading

Feature: Add form inputs components to lookbook #288

Feature: Add form inputs components to lookbook #288

Conversation

Bilelkihal commented Jul 6, 2023 • edited Loading

Changes I made:

Screenshots

syphax-bouazzouni left a comment

Choose a reason for hiding this comment

syphax-bouazzouni commented Jul 6, 2023

syphax-bouazzouni commented Jul 12, 2023 • edited Loading

Bilelkihal commented Jul 6, 2023 •

edited

Loading

syphax-bouazzouni commented Jul 12, 2023 •

edited

Loading