profile
viewpoint

raunofreiberg/kyrene 7

Dockerized GraphQL based API in Golang with React & Apollo on the client // wip

martlaus/EUDC-2017-Mobile-App 2

Tallinn EUDC 2017 App

raunofreiberg/alex-portfolio 1

Portfolio website for Alex.

raunofreiberg/blackford 1

Dockerized Node.js & PostgreSQL SPA with a React & Redux client

martlaus/EUDC-2017-Admin-Panel 0

Admin Panel for EUDC 2017

martlaus/EUDC-2017-API 0

API for EUDC 2017

raunofreiberg/angular 0

One framework. Mobile & desktop.

raunofreiberg/async-react-demo 0

Unofficial source code of the React Async rendering demo

raunofreiberg/baseweb 0

A React Component library implementing the Base design language

delete branch raunofreiberg/react-view

delete branch : fix/snippets-string-parsing

delete time in 16 hours

startedtajo/react-movable

started time in a day

push eventraunofreiberg/react-view

raunofreiberg

commit sha 4a54cf5ad0deeb6e3a809a2fa10b295487a576bb

style: reformat tests

view details

push time in a day

pull request commentuber/react-view

Fix VS Code snippet string props parsing

Technically, we should be appending the prop as a variable, when it is stateful, as such:

value: {
    value: 'Hello',
    type: PropTypes.String,
    description: 'Input value attribute.',
    stateful: true,
  }

Although, as seen in the first example, currently the Hello string gets appended.

<hr />

I see two options:

  1. We keep it as-is, and append the Hello string
  2. If the prop is stateful, we append the prop name, as <Input value={value} />
raunofreiberg

comment created time in a day

push eventraunofreiberg/react-view

raunofreiberg

commit sha 9b865f24107637ad1f7ee81d1329e1319c396aab

chore: run linter

view details

push time in a day

PR opened uber/react-view

Reviewers
Fix VS Code snippet string props parsing

re: #26

<hr />

I'm not sure if this is the correct implementation, but I tried to solve the problem of PropTypes.String properties being appended as variables in code snippets.

Example (using the BaseWeb VS Code extension)

image

Fixed example

For brevity, I took out some props that required imports (such as SIZE etc):

image

+59 -0

0 comment

2 changed files

pr created time in a day

create barnchraunofreiberg/react-view

branch : fix/snippets-string-parsing

created branch time in a day

issue commentuber/react-view

VSCode snippets string enum prop

I'm not sure if this issue is exclusive to PropTypes.Enum:

Consider this prop:

placeholder: {
	value: 'Placeholder',
	type: PropTypes.String,
	description: 'Placeholder to display',
}

vscodeSnippet would produce the following:

{
    "Autocomplete": {
     "scope": "javascript,javascriptreact,typescript,typescriptreact",
     "prefix": [
      "Autocomplete component"
     ],
     "description": "Base Autocomplete component.",
     "body": [
      "<Autocomplete",
      "  ${1:placeholder={${2:Placeholder}\\}}",
      "  ${3:label={${4:Field label}\\}}",
      "  ${5:helpText={${6:Help text}\\}}",
      "  ${7:error={${8:undefined}\\}}",
      "  ${9:defaultValue={${10:undefined}\\}}",
      "  ${11:value={${12:apple}\\}}",
      "  ${13:onChange={${14:value => setValue(value);}\\}}",
      "  ${15:filter={${16:}\\}}",
      "  ${17:options={${18:[\n    { value: \"apple\", label: \"Apple\" \\},\n    { value: \"pear\", label: \"Pear\" \\},\n    { value: \"orange\", label: \"Orange\" \\},\n    { value: \"carrot\", label: \"Carrot\" \\},\n    { value: \"blueberry\", label: \"Blueberry\" \\}\n  ]}\\}}",
      "  ${19:disabled}",
      "  ${20:isFullWidth}",
      "/>"
     ]
    }
   }

And using it would produce the placeholder (and other string properties as variables):

image

raunofreiberg

comment created time in a day

issue openeduber/react-view

VSCode snippets string enum prop

Hey!

Is it possible for the VSCode snippet to also take into account string enums, instead of objects?

Currently the output of variant prop as:

variant: {
	value: 'primary',
	defaultValue: 'primary',
	type: PropTypes.Enum,
	description: 'Changes the look of the button',
	options: ['primary', 'ghost', 'alert', 'negative', 'fog', 'dark'],
},

would produce the following:

<Button
  variant={primary}
...

Instead, I would want it to respect the options passed in as strings and produce:

<Button
  variant="primary"
...

Thanks!

created time in a day

delete branch raunofreiberg/react-view

delete branch : feat/vscode-snippets-description

delete time in 2 days

PR opened uber/react-view

Reviewers
Allow customizing description for vscode snippets

Hey, thanks for the great addition to this library!

We want to use this for our design system internally, and modify the description to something else than the default one 🙃

Hope this is okay!

+22 -2

0 comment

2 changed files

pr created time in 2 days

create barnchraunofreiberg/react-view

branch : feat/vscode-snippets-description

created branch time in 2 days

startedmint-lang/mint

started time in 2 days

issue commentreach/reach-ui

Cannot test @reach/tooltip

@evertbouw Thanks, that works for me too!

hjylewis

comment created time in 5 days

issue openedreach/reach-ui

[Accordion] Incorrect onChange signature

🐛 Bug report

Current Behavior

Accordion onChange is typed as:

onChange?: (value: number | number[]) => void

Expected behavior

onChange should (?) be called with only type number.

Reproducible example

https://codesandbox.io/s/lingering-river-9p547

Suggested solution(s)

<!-- How could we solve this bug? What changes would need to made? -->

Additional context

<!-- Add any other context about the problem here. -->

Your environment

<!-- PLEASE FILL THIS OUT -->

Software Name(s) Version
Reach Package
React
Browser
Assistive tech
Node
npm/yarn
Operating System

created time in 6 days

issue commentreach/reach-ui

[Accordion] Animation

@chancestrickland Would it be too much of a "hack" to pass isActive to AccordionItem by Reach here? I see that Tabs has the same logic, but it seems like this is up for deprecation?

My thinking here is that I don't want to handle the collapsed and multiple cases myself, and would rather just Reach tell me whether my AccordionItem is active.

raunofreiberg

comment created time in 6 days

pull request commentsiddharthkp/bundlesize

fix firebase get method not returning its promise

Ping @siddharthkp, can we get this in?

mohsinulhaq

comment created time in 7 days

issue commentsiddharthkp/bundlesize

v1.0.0 Roadmap

Is there work to be continued with regards to the roadmap? The repository does not seem to be that active :/

siddharthkp

comment created time in 7 days

issue commentuber/baseweb

[Documentation] Props not extracted in production

The issue seems to have re-appeared in production: https://baseweb.design/components/button/

raunofreiberg

comment created time in 9 days

issue commentreach/reach-ui

[Accordion] Animation

I could get it to work by using react-spring, controlling the index state of Accordion, and passing isActive to each AccordionItem by mapping over the children of Accordion.

Although:

  1. I had to set display: block !important to AccordionPanel to make react-spring exit animation work.
  2. Can I do this without controlling state? I would very much like to have the same result, but keep the multiple and collapsed props working.

gif

raunofreiberg

comment created time in 12 days

issue openedreach/reach-ui

[Accordion] Animation

❓Question

I'm having a hard time animating Accordion properly with height. Accordion panel being set to display: none is not helping to achieve an animation either. Would really appreciate an example or some help 🙂

created time in 12 days

issue openeduber/baseweb

[Documentation] Tooltip missing relevant scope config

<!--- Provide a general summary of the issue in the Title above --> <!--- Provide a codesandbox that reproduces your issue - you can fork one from https://baseweb.design/ -->

Current Behavior

Tooltip example is broken in https://baseweb.design/components/tooltip/

Hovering on the Tooltip would show:

image

Expected Behavior

Tooltip hover should work properly.

Your Environment

<!--- Include as many relevant details about the environment with which you experienced the bug. -->

Tech Version
Base UI v9.52.0
React n/a
browser n/a
  • [x] I have searched the issues of this repository and believe that this is not a duplicate.

<hr />

This happens because Tooltip extends Popover's config, but does not extend the scope of Popover to include relevant components.

created time in 15 days

issue commentdownshift-js/downshift

[useSelect][useCombobox] Create prototype to have only useDownshift that covers both scenarios.

That being said, I don't think you need a portal for that list, you can achieve the same result with CSS. Or maybe I am missing something.

Without portal, parent elements with overflow: hidden would clip the menu, which is why we want to render the menu in a portal.

raunofreiberg

comment created time in 16 days

pull request commentreach/reach-ui

[@reach/tooltip] Add tests

What happened to these tests? I don't see them in master.

beckerei

comment created time in 16 days

issue commentreach/reach-ui

Cannot test @reach/tooltip

Any chance this would get some attention? I'm trying to test our Tooltip component (which is using the useTooltip hook) and the tooltip does not seem to get triggered when onMouseEnter event is fired in Jest.

test('should render', () => {
	const { container, getByText, debug } = render(
		<Tooltip label="label">
			<button>label</button>
		</Tooltip>,
	);
	const tooltip = container.querySelector('[data-reach-tooltip-trigger]');
	fireEvent.mouseEnter(tooltip);
	debug(); // Tooltip does not appear in DOM
});

cc @chancestrickland ?

hjylewis

comment created time in 16 days

delete branch raunofreiberg/stylelint-config-recommended

delete branch : patch-1

delete time in 21 days

issue commentuber/react-view

Make propHook.what accept a function

Do you have any pointers for this one? Would love to give it a shot. I assume something needs to be done here:

https://github.com/uber/react-view/blob/master/src/ast.ts#L52

tajo

comment created time in 22 days

issue openedreach/reach-ui

Body styles when opening dialog

❓Question

I have two questions about the styles that get added to body element when opening dialog:

  1. Why are the paddings and margins reset?
  2. Where do these styles come from? I can't find a reference in the @reach/dialog package.

image

Thanks!

created time in 22 days

push eventraunofreiberg/stylelint-config-recommended

Rauno Freiberg

commit sha 930c5f7360765bfe8413f311100db2b5756052a2

Fix broken possible errors link

view details

push time in 22 days

issue openeduber/react-view

Make `props.value` accept JSX

I've recently been writing a lot of "stringified JSX", which can become quite hard to maintain.

Would it be possible to provide props.value or initialCode as JSX?

For example:

const config = {
	initialCode: () => {
		const [flag, setFlag] = useState(false);
		const handleClick = () => setFlag(true);

		return (
			<div>
				<Button onClick={handleClick}>Set flag</Button>
			</div>
		);
	},
	scope: { Button },
};

<hr />

Possibly related or duplicate of #10?

created time in 23 days

starteddenoland/deno

started time in a month

startedmiragejs/miragejs

started time in a month

Pull request review commentkaritakrmet/todolist-react

hooks

-import React from 'react';-import './App.css';-import ChangeButton from './components/ChangeButton';-import DeleteButton from './components/DeleteButton';-import CompleteButton from './components/CompleteButton';-import AddButton from './components/AddButton';---class App extends React.Component {--  state = {-    todoItem: '',-    todos: []-  }--  handleChange = event => {-    this.setState({ todoItem: event.target.value })-  }--  handleSubmit = () => {-    if(this.state.todoItem.length > 0) {-      this.setState(prevState => {-  -        const lastTodo = prevState.todos[prevState.todos.length - 1];-        const todos = [-          ...prevState.todos,-          {-            // TODO: implement proper id ordering for todos-            id: prevState.todos.length === 0 ? 0 : lastTodo.id + 1,-            text: this.state.todoItem,-            completed: false,-            editing: false,-          }-        ];-        return {-          todos,-          todoItem: '',-        }-      })      -    }-  }--  deleteTodo = (i) => {-    const newTodos = this.state.todos.filter((todo, idx) => idx !== i);-    this.setState({ todos: newTodos })-  }--  handleCompleted = (i) => {-    const newTodos = [...this.state.todos];-    newTodos[i].completed = !newTodos[i].completed;-    this.setState({ todos: newTodos })-  }--  changeTodo = (i) => {-    const newTodos = [...this.state.todos];-    newTodos[i].editing = !newTodos[i].editing;-    this.setState({ todos: newTodos })-  }--  handleSubmitChange = (event, i) => {--    const newTodos = [...this.state.todos];-    newTodos[i].text = event.target.value;-    this.setState({ todos: newTodos });-  }--  submitChange = (i) => {-    const newTodos = [...this.state.todos];-    newTodos[i].editing = !newTodos[i].editing;--    this.setState({ todos: newTodos })-  }--  toggleAll = () => {+import React, { useState, useEffect } from "react";+import "./App.css";+import ChangeButton from "./components/ChangeButton";+import DeleteButton from "./components/DeleteButton";+import CompleteButton from "./components/CompleteButton";+import AddButton from "./components/AddButton";++function TodoForm({ addTodo }) {+  const [value, setValue] = useState("");++  const handleSubmit = e => {+    e.preventDefault();+    if (!value) return;+    addTodo(value);+    setValue("");+  };++  return (+    <form onSubmit={handleSubmit} className="addTodo">+      <input+        type="text"+        className="addTodoInput"+        value={value}+        onChange={e => setValue(e.target.value)}+      />+      <AddButton onClick={() => handleSubmit} />+    </form>+  );+}++function App() {+  useEffect(() => {+    document.title = "Todos";

Why would this need to be done when the component mounts? You could just set the title in index.html

karitakrmet

comment created time in a month

Pull request review commentkaritakrmet/todolist-react

hooks

-import React from 'react';-import './App.css';-import ChangeButton from './components/ChangeButton';-import DeleteButton from './components/DeleteButton';-import CompleteButton from './components/CompleteButton';-import AddButton from './components/AddButton';---class App extends React.Component {--  state = {-    todoItem: '',-    todos: []-  }--  handleChange = event => {-    this.setState({ todoItem: event.target.value })-  }--  handleSubmit = () => {-    if(this.state.todoItem.length > 0) {-      this.setState(prevState => {-  -        const lastTodo = prevState.todos[prevState.todos.length - 1];-        const todos = [-          ...prevState.todos,-          {-            // TODO: implement proper id ordering for todos-            id: prevState.todos.length === 0 ? 0 : lastTodo.id + 1,-            text: this.state.todoItem,-            completed: false,-            editing: false,-          }-        ];-        return {-          todos,-          todoItem: '',-        }-      })      -    }-  }--  deleteTodo = (i) => {-    const newTodos = this.state.todos.filter((todo, idx) => idx !== i);-    this.setState({ todos: newTodos })-  }--  handleCompleted = (i) => {-    const newTodos = [...this.state.todos];-    newTodos[i].completed = !newTodos[i].completed;-    this.setState({ todos: newTodos })-  }--  changeTodo = (i) => {-    const newTodos = [...this.state.todos];-    newTodos[i].editing = !newTodos[i].editing;-    this.setState({ todos: newTodos })-  }--  handleSubmitChange = (event, i) => {--    const newTodos = [...this.state.todos];-    newTodos[i].text = event.target.value;-    this.setState({ todos: newTodos });-  }--  submitChange = (i) => {-    const newTodos = [...this.state.todos];-    newTodos[i].editing = !newTodos[i].editing;--    this.setState({ todos: newTodos })-  }--  toggleAll = () => {+import React, { useState, useEffect } from "react";+import "./App.css";+import ChangeButton from "./components/ChangeButton";+import DeleteButton from "./components/DeleteButton";+import CompleteButton from "./components/CompleteButton";+import AddButton from "./components/AddButton";++function TodoForm({ addTodo }) {+  const [value, setValue] = useState("");++  const handleSubmit = e => {+    e.preventDefault();+    if (!value) return;+    addTodo(value);+    setValue("");+  };++  return (+    <form onSubmit={handleSubmit} className="addTodo">+      <input+        type="text"+        className="addTodoInput"+        value={value}+        onChange={e => setValue(e.target.value)}+      />+      <AddButton onClick={() => handleSubmit} />+    </form>+  );+}++function App() {+  useEffect(() => {+    document.title = "Todos";+  }, []);++  const [todos, setTodos] = useState([]);++  const addTodo = text => {+    const newTodos = [+      ...todos,+      {+        text,+        isCompleted: false,+        editing: false+      }+    ];+    setTodos(newTodos);+  };++  const handleCompleted = index => {+    const newTodos = [...todos];+    newTodos[index].isCompleted = !newTodos[index].isCompleted;+    setTodos(newTodos);+  };++  const handleDelete = index => {+    const newTodos = todos.filter((todo, idx) => idx !== index);+    setTodos(newTodos);+  };++  const handleChange = index => {+    const newTodos = [...todos];+    newTodos[index].editing = !newTodos[index].editing;+    setTodos(newTodos);+  };++  const submitChange = index => {+    const newTodos = [...todos];+    newTodos[index].editing = !newTodos[index].editing;+    setTodos(newTodos);+  };++  const handleSubmitChange = (event, index) => {+    const newTodos = [...todos];+    newTodos[index].text = event.target.value;+    setTodos(newTodos);+  };++  const toggleAll = () => {     let completedTodos = 0; -    this.state.todos.forEach(todo => {-      if (todo.completed === true) { completedTodos++ }-      console.log(completedTodos)-    })+    todos.forEach(todo => {+      if (todo.isCompleted === true) {+        completedTodos++;+      }+    }); -    const newTodos = [...this.state.todos];+    const newTodos = [...todos];      newTodos.forEach(todo => {       if (completedTodos === newTodos.length) {-        todo.completed = false+        todo.isCompleted = false;       } else {-        todo.completed = true+        todo.isCompleted = true;       }-    })--    this.setState({ todos: newTodos })--  }--  render() {-    return (--      <div className='whiteBox'>-        -        <div className='line one'></div>-        <div className='line two'></div>-        <div className='line three'></div>--        <div className='leftContainer'>-          <h3>Todos</h3>-          <div className='addTodo'>-            <input autoFocus placeholder='Type your todo here' type='text' onChange={this.handleChange} value={this.state.todoItem} className='addTodoInput' />-            <AddButton onClick={this.handleSubmit} />-          </div>+    });+    setTodos(newTodos);+  };++  return (+    <main className="whiteBox">+      <div className="line one"></div>+      <div className="line two"></div>+      <div className="line three"></div>++      <div className="leftContainer">+        <h3>Todos</h3>+        <div className="addTodo">+          <TodoForm addTodo={addTodo} />         </div>+      </div> -        <div className='rightContainer'>-          <ul>-            {this.state.todos.map((todo, i) => (--              <div key={todo.id} className='todo'>--                {todo.editing-                  ? <input placeholder='Add Todo' type='text' value={todo.text} className='submitInput' onChange={e => this.handleSubmitChange(e, i)} />-                  : <li style={{ textDecorationLine: todo.completed ? 'line-through' : '' }}>{todo.text}</li>-                }-                <div className='todoButtons'>--                  {!todo.editing && <DeleteButton onClick={() => this.deleteTodo(i)} />}--                  {todo.editing-                    ? <button onClick={() => this.submitChange(i)} className="submitButton">Submit</button>-                    : <ChangeButton-                      onClick={() => this.changeTodo(i)}-                    />-                  }--                  {!todo.editing && <CompleteButton onClick={() => this.handleCompleted(i)} />}-                </div>+      <div className="rightContainer">+        <ul>+          {todos.map((todo, index) => (+            <li key={todo.id} className="todo">+              {todo.editing ? (+                <input+                  placeholder="Add Todo"+                  type="text"+                  value={todo.text}+                  className="submitInput"+                  onChange={e => handleSubmitChange(e, index)}+                />+              ) : (+                <li+                  style={{+                    textDecorationLine: todo.isCompleted ? "line-through" : ""+                  }}+                >+                  {todo.text}+                </li>+              )}+              <div className="todoButtons">+                {!todo.editing && (+                  <DeleteButton onClick={() => handleDelete(index)} />+                )}++                {todo.editing ? (+                  <button+                    onClick={() => submitChange(index)}+                    className="submitButton"+                  >+                    Submit+                  </button>+                ) : (+                  <ChangeButton onClick={() => handleChange(index)} />+                )}++                {!todo.editing && (+                  <CompleteButton onClick={() => handleCompleted(index)} />+                )}               </div>--            ))}--            <div className='toggleAll' style={this.state.todos.length !== 0 ? {} : { display: 'none' }}>-              <h4 onClick={() => this.toggleAll()}>Complete All</h4>-              <CompleteButton onClick={() => this.toggleAll()} />--            </div>--          </ul>-        </div>+            </li>+          ))}++          <div+            className="toggleAll"+            style={todos.length !== 0 ? {} : { display: "none" }}

Instead of hiding the element via CSS, you could just not render it in the first place.

{todos.length !== 0 && ...}
karitakrmet

comment created time in a month

Pull request review commentkaritakrmet/todolist-react

hooks

-import React from 'react';-import './App.css';-import ChangeButton from './components/ChangeButton';-import DeleteButton from './components/DeleteButton';-import CompleteButton from './components/CompleteButton';-import AddButton from './components/AddButton';---class App extends React.Component {--  state = {-    todoItem: '',-    todos: []-  }--  handleChange = event => {-    this.setState({ todoItem: event.target.value })-  }--  handleSubmit = () => {-    if(this.state.todoItem.length > 0) {-      this.setState(prevState => {-  -        const lastTodo = prevState.todos[prevState.todos.length - 1];-        const todos = [-          ...prevState.todos,-          {-            // TODO: implement proper id ordering for todos-            id: prevState.todos.length === 0 ? 0 : lastTodo.id + 1,-            text: this.state.todoItem,-            completed: false,-            editing: false,-          }-        ];-        return {-          todos,-          todoItem: '',-        }-      })      -    }-  }--  deleteTodo = (i) => {-    const newTodos = this.state.todos.filter((todo, idx) => idx !== i);-    this.setState({ todos: newTodos })-  }--  handleCompleted = (i) => {-    const newTodos = [...this.state.todos];-    newTodos[i].completed = !newTodos[i].completed;-    this.setState({ todos: newTodos })-  }--  changeTodo = (i) => {-    const newTodos = [...this.state.todos];-    newTodos[i].editing = !newTodos[i].editing;-    this.setState({ todos: newTodos })-  }--  handleSubmitChange = (event, i) => {--    const newTodos = [...this.state.todos];-    newTodos[i].text = event.target.value;-    this.setState({ todos: newTodos });-  }--  submitChange = (i) => {-    const newTodos = [...this.state.todos];-    newTodos[i].editing = !newTodos[i].editing;--    this.setState({ todos: newTodos })-  }--  toggleAll = () => {+import React, { useState, useEffect } from "react";+import "./App.css";+import ChangeButton from "./components/ChangeButton";+import DeleteButton from "./components/DeleteButton";+import CompleteButton from "./components/CompleteButton";+import AddButton from "./components/AddButton";++function TodoForm({ addTodo }) {+  const [value, setValue] = useState("");++  const handleSubmit = e => {+    e.preventDefault();+    if (!value) return;+    addTodo(value);+    setValue("");+  };++  return (+    <form onSubmit={handleSubmit} className="addTodo">+      <input+        type="text"+        className="addTodoInput"+        value={value}+        onChange={e => setValue(e.target.value)}+      />+      <AddButton onClick={() => handleSubmit} />+    </form>+  );+}++function App() {+  useEffect(() => {+    document.title = "Todos";+  }, []);++  const [todos, setTodos] = useState([]);++  const addTodo = text => {+    const newTodos = [+      ...todos,+      {+        text,+        isCompleted: false,+        editing: false+      }+    ];+    setTodos(newTodos);+  };++  const handleCompleted = index => {+    const newTodos = [...todos];+    newTodos[index].isCompleted = !newTodos[index].isCompleted;+    setTodos(newTodos);+  };++  const handleDelete = index => {+    const newTodos = todos.filter((todo, idx) => idx !== index);+    setTodos(newTodos);+  };++  const handleChange = index => {+    const newTodos = [...todos];+    newTodos[index].editing = !newTodos[index].editing;+    setTodos(newTodos);+  };++  const submitChange = index => {+    const newTodos = [...todos];+    newTodos[index].editing = !newTodos[index].editing;+    setTodos(newTodos);+  };++  const handleSubmitChange = (event, index) => {+    const newTodos = [...todos];+    newTodos[index].text = event.target.value;+    setTodos(newTodos);+  };++  const toggleAll = () => {     let completedTodos = 0; -    this.state.todos.forEach(todo => {-      if (todo.completed === true) { completedTodos++ }-      console.log(completedTodos)-    })+    todos.forEach(todo => {+      if (todo.isCompleted === true) {+        completedTodos++;+      }+    }); -    const newTodos = [...this.state.todos];+    const newTodos = [...todos];      newTodos.forEach(todo => {       if (completedTodos === newTodos.length) {-        todo.completed = false+        todo.isCompleted = false;       } else {-        todo.completed = true+        todo.isCompleted = true;       }-    })--    this.setState({ todos: newTodos })--  }--  render() {-    return (--      <div className='whiteBox'>-        -        <div className='line one'></div>-        <div className='line two'></div>-        <div className='line three'></div>--        <div className='leftContainer'>-          <h3>Todos</h3>-          <div className='addTodo'>-            <input autoFocus placeholder='Type your todo here' type='text' onChange={this.handleChange} value={this.state.todoItem} className='addTodoInput' />-            <AddButton onClick={this.handleSubmit} />-          </div>+    });+    setTodos(newTodos);+  };++  return (+    <main className="whiteBox">+      <div className="line one"></div>+      <div className="line two"></div>+      <div className="line three"></div>++      <div className="leftContainer">+        <h3>Todos</h3>+        <div className="addTodo">+          <TodoForm addTodo={addTodo} />         </div>+      </div> -        <div className='rightContainer'>-          <ul>-            {this.state.todos.map((todo, i) => (--              <div key={todo.id} className='todo'>--                {todo.editing-                  ? <input placeholder='Add Todo' type='text' value={todo.text} className='submitInput' onChange={e => this.handleSubmitChange(e, i)} />-                  : <li style={{ textDecorationLine: todo.completed ? 'line-through' : '' }}>{todo.text}</li>-                }-                <div className='todoButtons'>--                  {!todo.editing && <DeleteButton onClick={() => this.deleteTodo(i)} />}--                  {todo.editing-                    ? <button onClick={() => this.submitChange(i)} className="submitButton">Submit</button>-                    : <ChangeButton-                      onClick={() => this.changeTodo(i)}-                    />-                  }--                  {!todo.editing && <CompleteButton onClick={() => this.handleCompleted(i)} />}-                </div>+      <div className="rightContainer">+        <ul>+          {todos.map((todo, index) => (+            <li key={todo.id} className="todo">

I don't think your todo has an id, so this doesn't work.

karitakrmet

comment created time in a month

Pull request review commentkaritakrmet/todolist-react

hooks

-import React from 'react';-import './App.css';-import ChangeButton from './components/ChangeButton';-import DeleteButton from './components/DeleteButton';-import CompleteButton from './components/CompleteButton';-import AddButton from './components/AddButton';---class App extends React.Component {--  state = {-    todoItem: '',-    todos: []-  }--  handleChange = event => {-    this.setState({ todoItem: event.target.value })-  }--  handleSubmit = () => {-    if(this.state.todoItem.length > 0) {-      this.setState(prevState => {-  -        const lastTodo = prevState.todos[prevState.todos.length - 1];-        const todos = [-          ...prevState.todos,-          {-            // TODO: implement proper id ordering for todos-            id: prevState.todos.length === 0 ? 0 : lastTodo.id + 1,-            text: this.state.todoItem,-            completed: false,-            editing: false,-          }-        ];-        return {-          todos,-          todoItem: '',-        }-      })      -    }-  }--  deleteTodo = (i) => {-    const newTodos = this.state.todos.filter((todo, idx) => idx !== i);-    this.setState({ todos: newTodos })-  }--  handleCompleted = (i) => {-    const newTodos = [...this.state.todos];-    newTodos[i].completed = !newTodos[i].completed;-    this.setState({ todos: newTodos })-  }--  changeTodo = (i) => {-    const newTodos = [...this.state.todos];-    newTodos[i].editing = !newTodos[i].editing;-    this.setState({ todos: newTodos })-  }--  handleSubmitChange = (event, i) => {--    const newTodos = [...this.state.todos];-    newTodos[i].text = event.target.value;-    this.setState({ todos: newTodos });-  }--  submitChange = (i) => {-    const newTodos = [...this.state.todos];-    newTodos[i].editing = !newTodos[i].editing;--    this.setState({ todos: newTodos })-  }--  toggleAll = () => {+import React, { useState, useEffect } from "react";+import "./App.css";+import ChangeButton from "./components/ChangeButton";+import DeleteButton from "./components/DeleteButton";+import CompleteButton from "./components/CompleteButton";+import AddButton from "./components/AddButton";++function TodoForm({ addTodo }) {+  const [value, setValue] = useState("");++  const handleSubmit = e => {+    e.preventDefault();+    if (!value) return;+    addTodo(value);+    setValue("");+  };++  return (+    <form onSubmit={handleSubmit} className="addTodo">+      <input+        type="text"+        className="addTodoInput"+        value={value}+        onChange={e => setValue(e.target.value)}+      />+      <AddButton onClick={() => handleSubmit} />+    </form>+  );+}++function App() {+  useEffect(() => {+    document.title = "Todos";+  }, []);++  const [todos, setTodos] = useState([]);++  const addTodo = text => {+    const newTodos = [+      ...todos,+      {+        text,+        isCompleted: false,+        editing: false+      }+    ];+    setTodos(newTodos);+  };++  const handleCompleted = index => {+    const newTodos = [...todos];+    newTodos[index].isCompleted = !newTodos[index].isCompleted;

Technically, this is mutating the array. A better alternative would be:

const newTodos = todos.map(
    (todo, idx) => {
      if (index === idx) {
        return {
          ...todo,
          isCompleted: !todo.isCompleted,
        }
      }
      return todo;
    }
);
setTodos(newTodos);

The same goes for handleChange, submitChange, and handleSubmitChange.

Also, you can only do this when your todo-s are ordered by index. At some point you might add an ID, in which case you will have to do the mapping 🙂

karitakrmet

comment created time in a month

Pull request review commentkaritakrmet/todolist-react

hooks

-import React from 'react';-import './App.css';-import ChangeButton from './components/ChangeButton';-import DeleteButton from './components/DeleteButton';-import CompleteButton from './components/CompleteButton';-import AddButton from './components/AddButton';---class App extends React.Component {--  state = {-    todoItem: '',-    todos: []-  }--  handleChange = event => {-    this.setState({ todoItem: event.target.value })-  }--  handleSubmit = () => {-    if(this.state.todoItem.length > 0) {-      this.setState(prevState => {-  -        const lastTodo = prevState.todos[prevState.todos.length - 1];-        const todos = [-          ...prevState.todos,-          {-            // TODO: implement proper id ordering for todos-            id: prevState.todos.length === 0 ? 0 : lastTodo.id + 1,-            text: this.state.todoItem,-            completed: false,-            editing: false,-          }-        ];-        return {-          todos,-          todoItem: '',-        }-      })      -    }-  }--  deleteTodo = (i) => {-    const newTodos = this.state.todos.filter((todo, idx) => idx !== i);-    this.setState({ todos: newTodos })-  }--  handleCompleted = (i) => {-    const newTodos = [...this.state.todos];-    newTodos[i].completed = !newTodos[i].completed;-    this.setState({ todos: newTodos })-  }--  changeTodo = (i) => {-    const newTodos = [...this.state.todos];-    newTodos[i].editing = !newTodos[i].editing;-    this.setState({ todos: newTodos })-  }--  handleSubmitChange = (event, i) => {--    const newTodos = [...this.state.todos];-    newTodos[i].text = event.target.value;-    this.setState({ todos: newTodos });-  }--  submitChange = (i) => {-    const newTodos = [...this.state.todos];-    newTodos[i].editing = !newTodos[i].editing;--    this.setState({ todos: newTodos })-  }--  toggleAll = () => {+import React, { useState, useEffect } from "react";+import "./App.css";+import ChangeButton from "./components/ChangeButton";+import DeleteButton from "./components/DeleteButton";+import CompleteButton from "./components/CompleteButton";+import AddButton from "./components/AddButton";++function TodoForm({ addTodo }) {+  const [value, setValue] = useState("");++  const handleSubmit = e => {+    e.preventDefault();+    if (!value) return;+    addTodo(value);+    setValue("");+  };++  return (+    <form onSubmit={handleSubmit} className="addTodo">+      <input+        type="text"+        className="addTodoInput"+        value={value}+        onChange={e => setValue(e.target.value)}+      />+      <AddButton onClick={() => handleSubmit} />

You don't need to add handleSubmit to onClick here since the onSubmit on form element would trigger when clicking the button.

karitakrmet

comment created time in a month

PR opened uber/react-view

Make copy to URL feature work in Storybook

I'm not entirely satisfied nor confident with this implementation, but it works. The only caveat being that the URL wont "change" in the address bar, but clicking the copy button does retrieve the correct URL with code.

re: #17

+16 -2

0 comment

1 changed file

pr created time in a month

create barnchraunofreiberg/react-view

branch : feat/copy-url

created branch time in a month

issue commentuber/baseweb

[Documentation] Props not extracted in production

I built the documentation locally and served it, and it work. So the issue has something to do with the deployment.

raunofreiberg

comment created time in a month

issue commentuber/baseweb

[Documentation] Props not extracted in production

If it's of any help, then the props were extracted properly in the deploy preview of #2686.

The PR after (#2688) would then display the issue.

raunofreiberg

comment created time in a month

issue commentuber/baseweb

[Documentation] Props not extracted in production

cc @tajo

raunofreiberg

comment created time in a month

issue openeduber/baseweb

[Documentation] Props not extracted in production

Current Behavior

Hovering over the component name in the Editor component does not show the props extracted by extract-react-types

image

https://baseweb.design/components/button/

Expected Behavior

Props should be shown:

image

Your Environment

<!--- Include as many relevant details about the environment with which you experienced the bug. -->

Tech Version
Base UI n/a
React n/a
browser n/a
  • [x] I have searched the issues of this repository and believe that this is not a duplicate.

created time in a month

issue commentuber/react-view

Stateful boolean flag does not get toggled

It seems like this line is relevant.

I changed updatePropsAndCodeNoRecompile to updatePropsAndCode and tried the build in baseweb.design and the described issue was resolved.

Although, I'm not sure if there is a specific reason not to compile in this case?

raunofreiberg

comment created time in a month

startedryanmcdermott/clean-code-javascript

started time in a month

issue openeduber/react-view

Stateful boolean flag does not get toggled

I noticed this when trying to use react-view with Modal. The same issue can be found in baseweb example of Modal.

Steps to reproduce:

  1. Check the isOpen knob to true
  2. Modal opens
  3. Close the modal
  4. Re-check the isOpen knob to true
  5. Modal does not open

created time in a month

issue commentdownshift-js/downshift

[useSelect] Opening menu inside portal scrolls the page

If this is of any help, same example with the usage of Downshift does not scroll the page, though.

https://codesandbox.io/s/useselect-usage-pxxk4

raunofreiberg

comment created time in a month

issue commentdownshift-js/downshift

[useSelect] Opening menu inside portal scrolls the page

I guess a solution would be to always render the portal, regardless of the isOpen state. Although, is it really necessary to have X amount of portals rendered in the page?

raunofreiberg

comment created time in a month

issue openeddownshift-js/downshift

[useSelect] Opening menu inside portal scrolls the page

<!-- Thanks for your interest in the project. I appreciate bugs filed and PRs submitted! Please make sure that you are familiar with and follow the Code of Conduct for this project (found in the CODE_OF_CONDUCT.md file).

Please fill out this template with all the relevant information so we can understand what's going on and fix the issue.

I'll probably ask you to submit the fix (after giving some direction). If you've never done that before, that's great! Check this free short video tutorial to learn how: http://kcd.im/pull-request -->

  • downshift version: 4.0.5
  • node version: n/a
  • npm (or yarn) version: n/a

What happened:

When it's possible to scroll the document, opening the menu scrolls to the bottom of the page, when using useSelect with a portal.

Reproduction repository:

https://codesandbox.io/s/useselect-usage-0ifnq

created time in a month

delete branch raunofreiberg/react-view

delete branch : feat/classnames

delete time in a month

pull request commentuber/react-view

Add className prop to basic UI components

Anything left to do here? I don't know why the build is failing.

raunofreiberg

comment created time in a month

delete branch raunofreiberg/baseweb

delete branch : docs/tooltip

delete time in a month

PR opened uber/baseweb

Reviewers
docs(tooltip): change default triggerType to hover

Description

Currently the default triggerType for Tooltip click. Although, it is not possible to interact with the component in a clickable manner.

Example:

image

Scope

  • [x] Patch: Bug Fix
  • [ ] Minor: New Feature
  • [ ] Major: Breaking Change
+2 -0

0 comment

1 changed file

pr created time in 2 months

PR closed raunofreiberg/baseweb

docs(tooltip): change default triggerType to hover

Description

Currently the default triggerType for Tooltip click. Although, it is not possible to interact with the component in a clickable manner.

Example:

image

Scope

  • [x] Patch: Bug Fix
  • [ ] Minor: New Feature
  • [ ] Major: Breaking Change
+2 -0

0 comment

1 changed file

raunofreiberg

pr closed time in 2 months

PR opened raunofreiberg/baseweb

docs(tooltip): change default triggerType to hover

Description

Currently the default triggerType for Tooltip click. Although, it is not possible to interact with the component in a clickable manner.

Example:

image

Scope

  • [x] Patch: Bug Fix
  • [ ] Minor: New Feature
  • [ ] Major: Breaking Change
+2 -0

0 comment

1 changed file

pr created time in 2 months

create barnchraunofreiberg/baseweb

branch : docs/tooltip

created branch time in 2 months

fork raunofreiberg/baseweb

A React Component library implementing the Base design language

https://baseweb.design

fork in 2 months

push eventraunofreiberg/react-view

raunofreiberg

commit sha 7129199e96c7c9f04f22a434cfa3ea5084c4f85f

docs: typo, doh

view details

push time in 2 months

push eventraunofreiberg/react-view

raunofreiberg

commit sha 8d87aeff6bf95f1aa64ae8fcffbe7938126aab3b

refactor: Compiler to single wrapper div

view details

raunofreiberg

commit sha 497d3344fc48a4e3b9173d3ddf9331a5caba0b40

docs: add className

view details

push time in 2 months

pull request commentuber/react-view

Add className prop to basic UI components

I updated @babel/core to 7.7.7 and the error still persists for me. Odd. Do you not have this problem with running Storybook?

No, it works for me (even this PR). That's somewhat concerning. Do you see the same problem in your app that uses react-view (assuming you are using it somewhere already)?

Yeah. We had the same problem in our design system's Storybook, where we use react-view.

raunofreiberg

comment created time in 2 months

Pull request review commentuber/react-view

Add className prop to basic UI components

 export type TCompilerProps = {   transformations: ((ast: t.File) => t.File)[];   placeholder?: React.FC<{height: number}>;   presets?: PluginItem[];+  classNames?: {[key: string]: string};

I would agree with your sentiment of implementing your own UI components if there's a need for more granular control over the elements and layout. Class name would just be for minor tweaks (e.g. few paddings here and there on the wrapper element).

Just my opinion though 🙂

raunofreiberg

comment created time in 2 months

issue commentuber/react-view

Copy URL button does not seem to work

I could technically get it working by messing with the browser history, but just inside the iframe.

image

raunofreiberg

comment created time in 2 months

Pull request review commentuber/react-view

Add className prop to basic UI components

 export type TCompilerProps = {   transformations: ((ast: t.File) => t.File)[];   placeholder?: React.FC<{height: number}>;   presets?: PluginItem[];+  classNames?: {[key: string]: string};

To be honest, I really don't like how one has to be aware of the specific keys (root and inner) to be able to style Compiler. What do you think about removing the inner wrapper from it?

The current layout with two divs could be achieved by combining the styles of root and inner into a single div:

{
  display: 'flex',
   justifyContent: 'center',
   alignItems: 'baseline', // Added this line to not grow the children
   flexWrap: 'wrap',
   minHeight: `${minHeight || 0}px`,
   paddingTop: minHeight ? '16px' : 0,
   paddingBottom: minHeight ? '16px' : 0,
}
raunofreiberg

comment created time in 2 months

pull request commentuber/react-view

Add className prop to basic UI components

Strange. I've actually fixed this problem in @babel/core (one of their dependencies was requiring fs without actually needing it). Can you try:

I updated @babel/core to 7.7.7 and the error still persists for me. Odd. Do you not have this problem with running Storybook?

raunofreiberg

comment created time in 2 months

pull request commentfacebook/react

Fix React.lazy infinite loop on passing undefined

@gaearon Ping

raunofreiberg

comment created time in 2 months

pull request commentuber/react-view

Add className prop to basic UI components

Irrelevant to this PR, but with a fresh npm install and npm run storybook I got the following error:

ERROR in ./node_modules/@babel/core/lib/transformation/normalize-file.js
Module not found: Error: Can't resolve 'fs' in '/Users/raunofreiberg/Desktop/code/react-view/node_modules/@babel/core/lib/transformation'

To fix this, I added config.node = { fs: 'empty' }; to .storybook/webpack.config.js locally.

raunofreiberg

comment created time in 2 months

PR opened uber/react-view

Add className prop to basic UI components

I've decided to create a tiny helper function getStyles which would either use the currently defined inline styles, or the className passed.

IMO, it would probably make overriding simpler if we had stylesheets, instead of inline styles, but I think this is good enough for now. Might be worth considering in the future if styles become more complex.

Closes #14

+62 -35

0 comment

7 changed files

pr created time in 2 months

create barnchraunofreiberg/react-view

branch : feat/classnames

created branch time in 2 months

fork raunofreiberg/react-view

React View is an interactive playground, documentation and code generator for your components.

https://react-view.netlify.com

fork in 2 months

issue openeduber/react-view

Copy URL button does not seem to work

I assume that the Copy URL button should work the same as it does in baseweb.design.

Although, out of the box, the code does not seem to be added as a parameter to the URL in the first place, hence the copy URL button has no effect.

created time in 2 months

PR opened reach/reach-ui

[menu-button] Use React.ButtonHTMLAttributes for types

Right now, when using disabled (a valid HTML attribute) on MenuButton, would error in TypeScript as:

Property 'disabled' does not exist on type 'IntrinsicAttributes & HTMLAttributes<HTMLButtonElement> & { children: ReactNode; } & RefAttributes<HTMLButtonElement>'.

<MenuButton className={styles.select} disabled={disabled} onClick={onOpen} {...rest}>
+1 -1

0 comment

1 changed file

pr created time in 2 months

push eventraunofreiberg/reach-ui

Rauno Freiberg

commit sha 3e82a8d1a7de2e6cb37a4a6b5869bdde20b2714e

[menu-button] Use React.ButtonHTMLAttributes for types

view details

push time in 2 months

issue commentuber/react-view

Styling with CSS

Sounds good. Would you like me to kick this off with a PR?

raunofreiberg

comment created time in 2 months

issue commentuber/react-view

Things to improve

Thanks for the help!

If I may pick your brain — what do you think about using the extracted TypeScript (or Flow) types as props to react-view? It's probably harder to do with props where you need to define state hooks, but for primitive types (string, boolean) it would likely avoid duplication.

tajo

comment created time in 2 months

issue commentatlassian/extract-react-types

Support for functional components

Functional components should work if they are the default export of the passed in fil

Ah, did not know this. Thanks!

raunofreiberg

comment created time in 2 months

issue commentuber/react-view

Styling with CSS

Thanks for the response. For now, I went with implementing my own components (knobs, specifically), which works well.

Although, there are some components that I wouldn't want to implement on my own. For example, I'd like to change the flex positioning of Compiler, or change the focus border color of Editor.

Compiler and Editor don't seem like the kind of components that anyone would implement any different from the library's either, so right now it's just causing duplication for projects that wish to make minor adjustments 🙂

<hr />

Happy to help out with this, if necessary!

raunofreiberg

comment created time in 2 months

issue commentstorybookjs/storybook

No Prop Types detected when using forwardRef (React +TypeScript)

This solved the problem for me: https://github.com/strothj/react-docgen-typescript-loader/issues/76#issuecomment-570368448 🎉

LiamMartens

comment created time in 2 months

issue openedatlassian/extract-react-types

Support for functional components

Currently it seems like only classes will be parsed. Is it possible to add support for parsing functional components?

created time in 2 months

issue commentuber/react-view

Things to improve

How would one go about using extract-react-types-loader to show TypeScript types? Would appreciate some pointers 🙂

tajo

comment created time in 2 months

issue openeduber/react-view

Styling with CSS

Hey, thanks for the great library!

I have a question about how should one go about styling certain elements? A lot of the components in ui don't have a className to them (e.g. https://github.com/uber/react-view/blob/master/src/ui/editor.tsx#L75)

created time in 2 months

issue openeddownshift-js/downshift

[useSelect] Selecting an option does not close the menu

<!-- Thanks for your interest in the project. I appreciate bugs filed and PRs submitted! Please make sure that you are familiar with and follow the Code of Conduct for this project (found in the CODE_OF_CONDUCT.md file).

Please fill out this template with all the relevant information so we can understand what's going on and fix the issue.

I'll probably ask you to submit the fix (after giving some direction). If you've never done that before, that's great! Check this free short video tutorial to learn how: http://kcd.im/pull-request -->

  • downshift version: 4.0.0
  • node version: n/a
  • npm (or yarn) version: n/a

Relevant code or config

https://codesandbox.io/s/useselect-usage-mn1de (repo example)

Problem description: When top-level wrapper element is label, selecting an option from the menu does not close the menu. Possibly because of the label triggering another re-open?

Suggested solution: Not sure if this is incorrect usage of useSelect, but semantically it should be correct to wrap the elements with a label.

created time in 2 months

issue commentuber/react-view

Defining enum props without exporting an enum object

Is anyone working on this? 🙂

bighuggies

comment created time in 2 months

starteduber/react-view

started time in 3 months

pull request commentreach/reach-ui

[Tooltip] Make `ref` optional on `useTooltip` hook types

Ping @chancestrickland :-)

raunofreiberg

comment created time in 3 months

PR opened reach/reach-ui

[Tooltip] Make `ref` optional on `useTooltip` hook types

Currently ref is required when calling the useTooltip hook. This shouldn't be the case, since useTooltip has its own internal ref, if not provided.

Related error:

image

+1 -1

0 comment

1 changed file

pr created time in 3 months

push eventraunofreiberg/reach-ui

Rauno Freiberg

commit sha 7ef93221910b5f45d0d9f7057346f29bfc0dc99a

[Tooltip] Make `ref` optional on `useTooltip` hook types

view details

push time in 3 months

pull request commentreact-spring/react-spring

Backport skipAnimation global

Would love to see this merged. Having trouble testing components with animations due to them not unmounting in tests.

topaxi

comment created time in 3 months

startedreakit/reakit

started time in 4 months

startedkylpo/react-playbook

started time in 4 months

issue openedreach/reach-ui

ComboboxList does not scroll along when navigating with keyboard

🐛 Bug report

Current Behavior

<!-- If applicable, add screenshots/videos to help explain the problem. -->

https://codesandbox.io/s/upbeat-feynman-b4gge

Expected behavior

<!-- A clear and concise description of what you expected to happen. -->

The Combobox should scroll along with the focused item.

Reproducible example

https://codesandbox.io/s/upbeat-feynman-b4gge

Suggested solution(s)

<!-- How could we solve this bug? What changes would need to made? -->

Additional context

<!-- Add any other context about the problem here. -->

Your environment

<!-- PLEASE FILL THIS OUT -->

Software Name/Version(s)
[REACH_PACKAGE_NAME]
React
Browser
Assistive tech
Node
npm/yarn
Operating System

created time in 4 months

issue commentreach/reach-ui

[Tooltip] DEBUG_STYLE not defined on types

Thanks! Just wanted to say that I really appreciate the swift responses and recent work that you guys have been ramping up on Reach UI :-)

raunofreiberg

comment created time in 4 months

issue commentcodesandbox/codesandbox-client

Add dependency via tar.gz upload or URL

While being able to use packages from arbitrary URLs would still be nice the use case of this issue should be solved with https://twitter.com/codesandbox/status/1181184975460282368

Regarding this CI feature, is it now also possible to use tar.gz URLs directly in package.json on Codesandbox?

brownbl1

comment created time in 4 months

fork raunofreiberg/angular

One framework. Mobile & desktop.

https://angular.io

fork in 4 months

startedThinkmill/design-system

started time in 4 months

issue openedreach/reach-ui

[Tooltip] DEBUG_STYLE not defined on types

Gettings this error when using DEBUG_STYLE in useTooltip hook:

ERROR in [at-loader] ./src/components/Tooltip/Tooltip.tsx:47:53
    TS2345: Argument of type '{ DEBUG_STYLE: boolean | undefined; }' is not assignable to parameter of type 'HTMLProps<any>'.
  Object literal may only specify known properties, and 'DEBUG_STYLE' does not exist in type 'HTMLProps<any>'.

created time in 4 months

startedzeit/swr

started time in 4 months

issue commentstorybookjs/storybook

No Prop Types detected when using forwardRef (React +TypeScript)

I think ☝️ might have something to do with this line:

https://github.com/storybookjs/storybook/blob/12bd73864969bc119e21862466a57d56eee55e01/addons/docs/src/frameworks/react/extractProps.ts#L66

The function tries to render the component via render() but there are no props passed in, so destructuring or accessing any of the props in the component will throw.

LiamMartens

comment created time in 4 months

issue commentstorybookjs/storybook

No Prop Types detected when using forwardRef (React +TypeScript)

Unfortunately, this still doesn't work for me :/

When using a forwardRef component in addParameters({ component: Component }) I get the following in props table:

image

I tried implementing the #8445 fix in addon-info and the same error popped up.

Anyone else?

LiamMartens

comment created time in 4 months

more