[Feature] Add basic stories #1

rosamaggi · 2023-12-12T10:23:13Z

Add input fields stories like: Radiobutton, Text, Numeric, Dropdown list,...
Add Responsive tabs, Badge and teaser
Active the onChange listener to most of them

domq

This is a preliminary review; I'll be more throrough once you have made the nested-element changes, which are a big chunk of work.

domq · 2023-12-12T11:49:30Z

src/stories/molecules/Badge.tsx

+}
+
+/**
+ * Primary UI component for user interaction


This text appears in the UI. Please make it relevant e.g.

/** * A user badge, where the icon on the right is clickable. */

domq · 2023-12-12T11:50:16Z

src/stories/molecules/Badge.tsx

+  icon?: string;
+  textColor?: ColorValue;
+  fontWeight: 'normal' | 'bold';
+  onClickIcon?: () => void;


Any particular reason why you want only the icon (on the right) to be sensitive to clicks? I had a hard time figuring it out from the storybook.

Done: the onClick event is now on the div of the Badge

src/stories/molecules/Badge.tsx

domq · 2023-12-12T11:56:23Z

src/stories/molecules/Badge.tsx

+  border?: 'none' | 'solid' | 'dashed' | 'dotted';
+  icon?: string;
+  textColor?: ColorValue;
+  fontWeight: 'normal' | 'bold';


domq · 2023-12-12T13:13:38Z

src/stories/molecules/inputFields/Dropdown.tsx

+}
+
+interface DropdownProps {
+  sizeDropDown?: 'small' | 'medium' | 'large';


Please convert to just size

domq · 2023-12-12T13:22:44Z

src/stories/molecules/ResponsiveTabs.stories.tsx

+export const Default: Story = {
+  args: {
+    items: [
+      { title: "1", content: <div>


I'm not a fan of passing React elements as props (assuming this is permitted at all). Please transform into <ResponsiveTabs.Tabs>, taking Base.TopMenu as an example.

domq · 2023-12-12T13:23:19Z

src/stories/molecules/Tabs.tsx

+
+type Item = {
+  title: string;
+  tabContent?: React.ReactNode;


Like above, please refactor using the “chosen child” pattern.

domq · 2023-12-12T13:25:46Z

yarn.lock

  linkType: hard

-"@vitejs/plugin-react@npm:4.2.1":
+"@vitejs/plugin-react@npm:^4.2.1":


Please rebase the changes to yarn.lock so that they come with the same commit that caused them (e.g. a change to package.json); and provide the relevant command (e.g. yarn add something) in the commit comment.

Done together in call

rosamaggi · 2023-12-15T16:14:44Z

All changes have been done. Could you verify again please?

domq

Another batch of work... Sorry need to run for lunch; will do thorough review yet later.

.storybook/storybook.css

domq · 2023-12-18T10:35:09Z

src/stories/molecules/Badge.stories.tsx

+export const Default: Story = {
+    args: {
+        title: 'Test default',
+        image: 'https://randomuser.me/api/portraits/men/3.jpg',


I hate to be that guy, but I think that https://randomuser.me/api/portraits/men/1.jpg is a better choice if we want visitors to focus on the widget rather than the dude 🤣

domq · 2023-12-18T10:35:50Z

src/stories/molecules/Badge.tsx

+        <img src={image} className="image"/>
+        <span style={textStyle}>{title}</span>
+        <div className="d-flex justify-content-center">
+          <span className="badge">9</span>


This 9 should probably be a prop.

src/stories/molecules/Button.stories.tsx

domq · 2023-12-18T10:44:56Z

src/stories/molecules/Button.tsx

+  onClick,
+  ...props
+  }: ButtonProps) => {
+  let mode = primary ? 'storybook-button btn btn-primary' : 'storybook-button btn btn-secondary';


You shouldn't have any references to storybook styles (or in fact, storybook anything: imports, SVG, etc.) in your *.tsx, *.css etc. files intended for production.

domq · 2023-12-18T11:03:03Z

src/stories/molecules/badge.css

+    margin-right: 10px;
+    background-color: #eaeaea;
+    border-radius: 50%;
+    box-shadow: 0px 4px 4px #00000040;


Same as above (--badge-box-shadow)

domq · 2023-12-18T11:04:02Z

src/stories/molecules/badge.css

+    justify-content: center;
+}
+
+.card-dashed {


This appears to be dead code?

domq · 2023-12-18T11:05:47Z

src/stories/molecules/badge.css

+    flex-direction: row;
+}
+
+.clickable-center {


Please split this into two classes, and keep badge in there somewhere. I.e.

.badge-clickable { cursor: pointer; } .badge-center { align-items: center; }

You can then add both CSS classes to the div.

domq · 2023-12-18T11:09:29Z

src/stories/molecules/badge.css

+    cursor: pointer;
+}
+
+@media (min-width: 768px) {


Again, this looks like dead code (from here to end of file).

domq · 2023-12-18T12:28:27Z

src/stories/molecules/responsiveTabs.css

+ }
+
+
+@media (min-width: 768px) {


Please use Bootstrap media queries — For better or worse, Bootstrap is a dependency of elements, and therefore of epfl-elements-react as well; we might as well use it.

Please cherry-pick the two commits of #3 or outright merge the PR (with fast-forward).

domq

Aaaaand here comes part deux.

domq · 2023-12-18T13:23:17Z

src/stories/molecules/Button.stories.tsx

-    </Button>
-  }
+      </svg>,
+      <span key="label" style={{ marginLeft: '5px' }}>Primary</span>,


I suppose the button text could be made a story parameter here?

domq · 2023-12-18T13:24:48Z

src/stories/molecules/Tabs.tsx

+
+  function c_title(children: React.ReactNode) {
+    const title = (Children.toArray(children || []).find(
+      (child : React.ReactElement) => child.type === Tabs.Tab.Title)) as React.ReactElement<TabTitleProps>;


The type after as should have [] at the end, just like on line 14.

Should we have [] even if I used .find that return only one element? In case there are more than one title, I get the first one.

domq · 2023-12-18T13:25:04Z

src/stories/molecules/Tabs.tsx

+
+  function c_content(children: React.ReactNode) {
+    const content = (Children.toArray(children || []).find(
+      (child : React.ReactElement) => child.type === Tabs.Tab.Content)) as React.ReactElement<TabContentProps>;


domq · 2023-12-18T13:27:25Z

src/stories/molecules/inputFields/Autocomplete.tsx

+
+/**
+ * An autocomplete list.
+ * If single selection: the selected element is shown directly in the input field. The "itemValue" could be the


Please skip a line to isolate §.

I don't understand the sentences on lines 23–24. Could you please rewrite it without a conditional (“could”)?

domq · 2023-12-18T13:28:21Z

src/stories/molecules/inputFields/Autocomplete.tsx

+   placeholder = '',
+   isReadonly = false,
+  onChange
+  }: AutocompleteProps & FormControlProps) => {


You should be able to remove the type either here, or on line 28, and let TypeScript figure it out.

domq · 2023-12-18T13:45:22Z

src/stories/molecules/inputFields/Dropdown.tsx

+  }
+
+  const handleSelectionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedValues: Item[] = Array.from(e.target.selectedOptions, (option) =>


The Item[] type is specified twice. You probably want to remove it from here (rather than line 55 below).

domq · 2023-12-18T13:46:44Z

src/stories/molecules/inputFields/Dropdown.tsx

+
+    setSelectedOptions(selectedValues);
+
+    if (onChange) {


Please consider having

if (! onchange) return;

as the first line of the function instead (so that the browser doesn't have to compute Array.from() if you are going to end up doing nothing with the result)

domq · 2023-12-18T13:47:13Z

src/stories/molecules/inputFields/Numeric.tsx

 }

+/**
+ * An numeric field.


“A” numeric field

domq · 2023-12-18T13:48:39Z

src/stories/molecules/inputFields/TextArea.tsx

+}
+
+/**
+ * An textarea field.


“A textarea field”

domq · 2023-12-18T13:49:10Z

src/stories/molecules/tabs.css

+    width: 100%;
+    vertical-align: top;
+    display: inline;
+}


Please (configure your IDE to) make sure all files end with a newline.

rosamaggi · 2024-01-31T10:15:31Z

Hello,
I added some correction to the branch. Could you verify please?
Thanks
Rosa

- Use [this named slot trick](https://medium.com/swlh/bring-vue-named-slots-to-react-87684188f18e) to give access to top-level menu, drawer, aside (left-hand) menu, avatar and breadcrumbs - Provide reasonable defaults for (some of) them

- Rename `Base.UserAvatar` to `Base.User`, so that one may decide to put up a login button up there instead - Develop a proper `<Avatar>` component, with a `<Avatar.Image>` named slot that (pretends to) accept either children or a `peopleSciper` prop

rosamaggi requested a review from domq December 12, 2023 10:23

domq force-pushed the feature/addNewStories branch from 59ddec2 to 5cc5e4a Compare December 12, 2023 13:40

domq requested changes Dec 12, 2023

View reviewed changes

rosamaggi force-pushed the feature/addNewStories branch from 0ac0cdb to 1d46de0 Compare December 15, 2023 15:55

domq requested changes Dec 18, 2023

View reviewed changes

domq force-pushed the feature/addNewStories branch 2 times, most recently from 9389cf9 to 8b8f1e2 Compare December 19, 2023 11:47

domq force-pushed the feature/addNewStories branch 3 times, most recently from 485b342 to 950299c Compare February 28, 2024 10:46

rosamaggi requested review from domq and williambelle May 2, 2024 12:48

ponsfrilus force-pushed the main branch 13 times, most recently from ad81b07 to 0762e04 Compare May 23, 2024 06:31

ponsfrilus force-pushed the main branch 2 times, most recently from c271ce5 to 9580d09 Compare May 27, 2024 12:31

rosamaggi and others added 29 commits July 8, 2025 10:18

[Fix]Typo

f2fc36e

[Feature] Add className prop

0477a11

[FIX] Resolve dependencies with node module

c7681b4

[Fix] Add label and icon as props

f5e4e44

[Refactor] Rename Card to FormCard

e4a6f48

[Fix] Specialize style name with the epfl-elements-react

7c72698

[Fix] Specify style name

1af806d

[Feature] Add debounce input

a784a26

[Install] p-debounce-throttle

6a4dbb9

[Fix] Make the debounce faster

fd7d475

[Fix] style

9ded9d4

[Feature] Add style props

eef9978

[Fix] tabs style

ce5ea0f

[Fix] Add mandatory key props

14b72e8

[Fix] Add id and key

f984dbd

[Style] Add style and className props

2b9bd67

[refactor] Extract src/utils/children.ts

ed5eb42

[Fix] replace Form.Control (react-bootstrap) with normal html input tag

23b70a3

[Fix] Delete header menu

f5efde3

[Feature] Make menu responsive

09d2db8

[Fix] Click outside the menu to close it

25b93b1

[Fix] bug with responsive menu

c1de37a

[Fix] Add key to TextArea

877b3c1

[Refactor] eliminate dead code

2195989

[Feature] Add tooltip on button

a159e88

[Fix] style

89d8350

[Fix] Add autofocus

fa69d0a

domq force-pushed the feature/addNewStories branch from 3da4d7b to fa69d0a Compare July 8, 2025 08:18

[Feature] Add basic stories #1

Are you sure you want to change the base?

[Feature] Add basic stories #1

Uh oh!

Conversation

rosamaggi commented Dec 12, 2023 • edited by domq Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

domq left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rosamaggi commented Dec 15, 2023

Uh oh!

domq left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

domq left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rosamaggi commented Dec 12, 2023 •

edited by domq

Loading