Giter VIP home page Giter VIP logo

reablocks's Introduction


Data visualization library for React

Open Collective backers and sponsors


REAVIZ is a modular chart component library that leverages React natively for rendering the components while using D3js under the hood for calculations. The library provides an easy way to get started creating charts without sacrificing customization ability.

πŸš€ Quick Links

πŸ—οΈ Other Projects

  • Reagraph - Open-source library for large webgl based network graphs.
  • Reablocks - Open-source component library for React based on Tailwind.
  • Reaflow - Open-source library for workflow and diagram graphs.
  • Reachat - Open-source library for building LLM/Chat UIs for React.

✨ Features

Chart types include:

  • Bar Chart
    • Single Series Vertical / Horizontal
    • Multi Series Vertical / Horizontal
    • Stacked Vertical / Horizontal
    • Stacked Normalized Vertical / Horizontal
    • Stacked Diverging Vertical / Horizontal
    • Marimekko
    • Radial
    • Sparkline
    • Waterfall
  • Line Chart
    • Single Series
    • Multi Series
    • Stacked
    • Stacked Normalized
    • Radial
    • Sparklines
  • Area Chart
    • Single Series
    • Multi Series
    • Stacked
    • Stacked Normalized
    • Radial
    • Sparklines
  • Scatter Chart
    • Linear
    • Radial
  • Pie Chart
    • Standard
    • Exploded
    • Donut Chart
  • Sankey chart
  • Gauge
    • Radial
    • Linear
    • Stacked Radial
  • Map Chart
  • Heatmap
    • Standard
    • Year Calendar
    • Month Calendar
  • Venn Diagram
    • Standard
    • Euler
    • Fixed Euler
  • Bubble Chart
  • Treemap
  • Bar List
  • Meter
  • Spider / Radar
  • Funnel Chart
  • Sunburst Chart

Additional features:

  • Legend
    • Discrete
    • Sequential
  • Axis
    • Linear
    • Radial
    • Advanced Label Positioning
  • Gestures
    • Pinch
    • Pan
    • Zoom
    • Move
  • Tooltip
    • Single Value
    • Grouped Values
  • Line/Area Series Symbols
  • Animations Enter/Update/Exit
  • Brush
  • Patterns
  • Gradients
  • Grid Lines
  • Mark Lines
  • BigInt Support
  • Auto Sizing
  • Bar Guidelines
  • Range Lines
  • Animated Counts
  • a11y Support for labels, roles and tabbing
  • SSR

πŸ“¦ Install

To use reaviz in your project, install it via npm/yarn:

npm i reaviz --save

then import a chart type into your JSX element:

import { BarChart } from 'reaviz';

const data = [
  { key: 'IDS', data: 14 },
  { key: 'Malware', data: 5 },
  { key: 'DLP', data: 18 }
];

const App = () => <BarChart width={350} height={250} data={data} />;

Visit the docs to learn more!

πŸ”­ Development

If you want to run REAVIZ locally, its super easy!

  • Clone the repository
  • npm i
  • npm start
  • Browser opens to Storybook page

❀️ Contributors & Credits

Thanks to all our contributors!

reablocks's People

Contributors

amcdnl avatar evgenoid avatar ghsteff avatar mnttnm avatar serhiitsybulskyi avatar shaswat-indian avatar shkils avatar steppy452 avatar zinchenkoivan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

reablocks's Issues

Some reablocks components don't work with vitest testing library (Checkbox)

I'm submitting a...


[x ] Bug report  

Current behavior

When testing reablocks with vitest, some of the components are working fine, some not.
For example: InlineInput

InlineInput.test.tsx`
describe('Test', () => {
it('Should render', () => {
render();
});
});

The error I'm getting`
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

Other components that are throwing error`
Checkbox, Select and probably more

This is how I use Checkbox component`
const TestComponent = () => {
const [checked, setChecked] = useState(false);
return (
<Checkbox
checked={checked}
label="Check me"
onChange={() => setChecked(!checked)}
/>
);
};

describe('Test', () => {
it('Should render', async () => {
render();
});
});

Expected behavior

I expect component to not throw error, when testing with vitest

Minimal reproduction of the problem with instructions

The described components above are giving error, when I try to render them, but some other components from reablocks work just fine, for example Β Button, Calendar, Card, DateFormat, Menu and more

What is the motivation / use case for changing the behavior?

Environment


Libs:
  "dependencies": {
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^15.0.1",
    "@testing-library/user-event": "^14.5.2",
    "reablocks": "^5.8.0",
    "react": "^18.2.0",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dom": "^18.2.0",
    "react-error-boundary": "^4.0.10",
    "react-fast-compare": "^3.2.2",
    "react-helmet-async": "^1.3.0",
    "react-hook-form": "^7.45.2",
    "react-query": "^3.39.3",
    "react-router-dom": "^6.21.2",
    "react-tabs": "^6.0.2",
    "react-test-renderer": "^18.2.0",
    "react-use": "^17.4.0",
    "react-window": "^1.8.10",
    "react-xarrows": "^2.0.2",
    "reakeys": "^1.3.1",
    "reaviz": "^14.15.2",
    "rison": "^0.1.1",
    "use-query-params": "^2.2.1",
    "yup": "^1.2.0"
  },


Browser:
- [x ] Chrome (desktop) version 123.0.6312.122
 
For Tooling issues:
- Node version: 20.11.1
- Platform: Windows

Confirmation Dialog

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment


Libs:
- react version: X.Y.Z
- reablocks version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Select within a Drawer does not close onBlur

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

A Select element inside of a layer element such as Drawer or Dialog will not close onBlur

Expected behavior

Select elements will close onBlur by default

Minimal reproduction of the problem with instructions

Made a little codesandbox to demo this. The select shown on the main page closes just fine onBlur, but the select in the Drawer does not:
https://codesandbox.io/s/cranky-monad-s0ptgj?file=/src/App.tsx

What is the motivation / use case for changing the behavior?

Environment


Libs:
- react version: X.Y.Z
- reablocks version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

List content has `break-word: break-all` set as default which causes weird breaks

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

something that wraps within the list could potentially get cut off in a weird way (ie, in the middle of a word)
image

Expected behavior

I'd expect the entire word to be on the next line

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment


Libs:
- react version: X.Y.Z
- reablocks version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

useDrawer: 'onClose' and 'open' props have no effect when passed to the returned Drawer component directly

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

The props passed to the Drawer component work only when passed through the useDrawer hook and not when passed directly to the component.

Expected behavior

The props passed to the component should override the initialised props.

Minimal reproduction of the problem with instructions

See the attached video:-

Screen.Recording.2023-07-14.at.2.37.45.PM.mov

What is the motivation / use case for changing the behavior?

Environment


Libs:
- react version: X.Y.Z
- reablocks version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Icon Customization

Some of the components have icons they need. We need to extend the theme provider to support passing custom icons. Here is an example of what MUI did for a tree.

image

Design tokens for new components not recognized if added to the end of the list of components in the theme file

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

When a new component is added to a project and design tokens are added to the theme file, they don't get applied and show up as undefined in dev tools though they are visible in the storybook theme/components section.

The workaround for now is to add them somewhere in between the list rather than at the end of it!

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment


Libs:
- react version: X.Y.Z
- reablocks version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

CSS variables prefix

Currently, all CSS variables do not have any prefixes and when we use this library in a project and start overriding it is nice to have the ability to distinguish project variables and library variables.

My proposal is to add --reablocks prefix like in MUI.
--notification-background -> --reablocks-notification-background

some classes seem to get dropped when importing reablocks

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Unsure why this is happening and it's a little hard to know when it's going to happen. But here, is an example where the start attribute does not seem to get the css class when another repo imports reablocks.

You'll have to inspect the svg icon and see that the containing div does not have a class.

But, if you look at reablocks storybook, you can see that there is a class Input-module__start__####
https://reablocks.dev/?path=/docs/components-form-input--start-adornment#start-adornment

Expected behavior

I expect the start css classes to get passed through as well.

Minimal reproduction of the problem with instructions

Here is a codesandbox which shows this happening:
https://codesandbox.io/s/cranky-monad-s0ptgj?file=/src/styles.css

What is the motivation / use case for changing the behavior?

Environment


Libs:
- react version: X.Y.Z
- reablocks version: X.Y.Z


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Hold Confirm Dialog

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment


Libs:
- react version: X.Y.Z
- reablocks version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Forms Example

Add an example story book story of using inputs/etc w/ react-hook-form

Select doesn't close menu onBlur if `closeOnSelect` is true

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

If you have a multiselect dropdown, you'll probably enable closeOnSelect to allow for multiple selections without having to reopen the menu. However, click away, the menu persists. If you tab away, that seems to work as I expect.

Screen.Recording.2023-03-15.at.10.59.44.AM.mov

Expected behavior

If the select input loses focus, the menu options should also disappear.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Better UX

Environment


Libs:
- react version: X.Y.Z
- reablocks version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Textarea

Use the autosizer ( react-textarea-autosize ) and add variants/sizes.

DotsLoader only animates once

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

DotsLoader only animates one time which is nice, but should probably continuously animate

Expected behavior

loader continuously animates while on screen

Minimal reproduction of the problem with instructions

https://reablocks.dev/?path=/story/components-elements-loader-dots--simple

What is the motivation / use case for changing the behavior?

Environment


Libs:
- react version: X.Y.Z
- reablocks version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Ellipsize component `limit` is ellipsizing inconsistently

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

the limit is set to 80 on the link but it's clearly inconsistent in how it ellipsizes
image

Expected behavior

I would expect to see 80 characters before ... and no ellipsis if the value is not over 80 characters

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment


Libs:
- react version: X.Y.Z
- reablocks version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

(Inline-Input) component is throwing error when testing with vitest

I'm submitting a...


[x] Bug report

Current behavior

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

Expected behavior

To work

Minimal reproduction of the problem with instructions

// React
import React from 'react';
import { useState } from 'react';

// Vitest
import { describe, it } from 'vitest';

// Testing library
import '@testing-library/jest-dom/vitest';
import { render } from '@testing-library/react';

// Reablocks
import { ThemeProvider, theme, InlineInput } from 'reablocks';

const TestComponent = () => {
const [text, setText] = useState('');
return (

<div
style={{
border: 'var(--input-border)',
borderRadius: 'var(--border-radius-md)',
padding: 'var(--spacing-sm)'
}}
>
<InlineInput
value={text}
onChange={event => setText(event.target.value)}
placeholder="Type here..."
/>

;

);
};

describe('Test', () => {
it('Should render', () => {
// Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object
render();
});
});

Environment


Libs:
- react version: 18.2.0
- reablocks version: 7.3.4

Browser:
- [x] Chrome (desktop) version latest
 
For Tooling issues:
- Node version: 20.11.1
- Platform:  Windows 10

Date Input

Create a composite control of the input + menu + calendar which has:

  • Date Input
  • Date Time Input
  • Time Input

Let's discuss API before we start on this.

image image

JSON Tree `showAll` not showing all

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

showAll has no effect
showAllLimit doesn't get passed to child nodes and therefore doesn't work correctly if you pass Infinity - also the comment is confusing/wrong

Expected behavior

  • showAll shows all nodes regardless of depth
  • showAllLimit set will propagate through all levels

Minimal reproduction of the problem with instructions

<JsonTree
    {...props}
    showAllLimit={Infinity}
    data={{
      in_bytes: 0,
      sensor_id: 'staging-alpha-network-sensor',
      uid: 'a3731aac-5687-408a-8ed6-7693f360d491',
      description: `Haxx0r ipsum mailbomb while void ssh leet deadlock over clock mega frack ack. Rsa I'm sorry Dave, I'm afraid I can't do that fopen ban eof. Recursively irc less ascii case d00dz shell emacs cd foad script kiddies gcc unix rm -rf rsa linux grep throw Leslie Lamport snarf. Lib function xss man pages packet sniffer root for continue exception ddos headers *.* protocol chown injection Dennis Ritchie thread January 1, 1970. If hack the mainframe echo race condition packet giga gurfle semaphore long python mainframe server. Tera salt cat flood false hash malloc ifdef cache port var Linus Torvalds. Daemon todo alloc new I'm compiling bar dereference memory leak crack stdio.h gnu fork highjack foo leapfrog daemon cookie. Socket ip gobble hello world system buffer ctl-c James T. Kirk segfault mountain dew client spoof loop true default wombat all your base are belong to us. Terminal overflow protected Donald Knuth float tcp big-endian. Public mutex firewall then gc null syn Trojan horse sudo machine code finally fail bin win kilo epoch regex stack trace wabbit fatal.`,
      in_packets: 0,
      month: 12,
      out_ip_bytes: 48,
      duration: 0,
      year: 2018,
      sensor_zone: 'default',
      src_port: 1105,
      uuid: 'd918540a-a152-40ab-a478-6b4cb836212d',
      conn_state: 'S0',
      in_ip_bytes: 0,
      extra: {},
      src_ips: [
        {
          city: null,
          isp: null,
          address: '192.168.242.179',
          latitude: null,
          org: null,
          asn: null
        },
        {
          city: 'Austin',
          isp: 'Unassigned',
          address: '192.168.242.179',
          latitude: 50,
          org: 'Unassigned',
          asn: 50
        },
        {
          city: 'New York',
          isp: 'Unassigned',
          address: '192.168.242.179',
          latitude: 0,
          org: 'Unassigned',
          nested: [1, 2, 3]
        }
      ],
      type: 'flow',
      src_mac: '00:0c:29:30:b9:68',
      dst_mac: '00:50:56:f0:a3:52',
      out_packets: 1,
      timestamp: 1544475648,
      source_type: 'bro',
      services: [],
      day: 10,
      out_bytes: 0,
      sensor_name: 'staging-alpha-network-sensor',
      hour: 21,
      detections: {},
      dst_port: 80,
      ip_proto: 'tcp',
      dst_ip: {
        city: null,
        isp: 'US Department of Defense Network',
        region: 'Unassigned',
        is_internal: false,
        longitude: -97.8219985961914,
        country_name: 'United States',
        version: 4,
        location: '',
        country_code: 'US',
        address: '6.6.6.167',
        latitude: 37.750999450683594,
        org: 'US Department of Defense Network',
        asn: 0
      },
      history: 'S',
      show_more: [
        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
        21, 22, 23
      ]
    }}
  />
  {...props}
  showAll
  data={{
    in_bytes: 0,
    sensor_id: 'staging-alpha-network-sensor',
    uid: 'a3731aac-5687-408a-8ed6-7693f360d491',
    description: `Haxx0r ipsum mailbomb while void ssh leet deadlock over clock mega frack ack. Rsa I'm sorry Dave, I'm afraid I can't do that fopen ban eof. Recursively irc less ascii case d00dz shell emacs cd foad script kiddies gcc unix rm -rf rsa linux grep throw Leslie Lamport snarf. Lib function xss man pages packet sniffer root for continue exception ddos headers *.* protocol chown injection Dennis Ritchie thread January 1, 1970. If hack the mainframe echo race condition packet giga gurfle semaphore long python mainframe server. Tera salt cat flood false hash malloc ifdef cache port var Linus Torvalds. Daemon todo alloc new I'm compiling bar dereference memory leak crack stdio.h gnu fork highjack foo leapfrog daemon cookie. Socket ip gobble hello world system buffer ctl-c James T. Kirk segfault mountain dew client spoof loop true default wombat all your base are belong to us. Terminal overflow protected Donald Knuth float tcp big-endian. Public mutex firewall then gc null syn Trojan horse sudo machine code finally fail bin win kilo epoch regex stack trace wabbit fatal.`,
    in_packets: 0,
    month: 12,
    out_ip_bytes: 48,
    duration: 0,
    year: 2018,
    sensor_zone: 'default',
    src_port: 1105,
    uuid: 'd918540a-a152-40ab-a478-6b4cb836212d',
    conn_state: 'S0',
    in_ip_bytes: 0,
    extra: {},
    src_ips: [
      {
        city: null,
        isp: null,
        address: '192.168.242.179',
        latitude: null,
        org: null,
        asn: null
      },
      {
        city: 'Austin',
        isp: 'Unassigned',
        address: '192.168.242.179',
        latitude: 50,
        org: 'Unassigned',
        asn: 50
      },
      {
        city: 'New York',
        isp: 'Unassigned',
        address: '192.168.242.179',
        latitude: 0,
        org: 'Unassigned',
        nested: [1, 2, 3]
      }
    ],
    type: 'flow',
    src_mac: '00:0c:29:30:b9:68',
    dst_mac: '00:50:56:f0:a3:52',
    out_packets: 1,
    timestamp: 1544475648,
    source_type: 'bro',
    services: [],
    day: 10,
    out_bytes: 0,
    sensor_name: 'staging-alpha-network-sensor',
    hour: 21,
    detections: {},
    dst_port: 80,
    ip_proto: 'tcp',
    dst_ip: {
      city: null,
      isp: 'US Department of Defense Network',
      region: 'Unassigned',
      is_internal: false,
      longitude: -97.8219985961914,
      country_name: 'United States',
      version: 4,
      location: '',
      country_code: 'US',
      address: '6.6.6.167',
      latitude: 37.750999450683594,
      org: 'US Department of Defense Network',
      asn: 0
    },
    history: 'S',
    show_more: [
      1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
      21, 22, 23
    ]
  }}
/>

What is the motivation / use case for changing the behavior?

Environment


Libs:
- react version: X.Y.Z
- reablocks version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Usage of `navigator` with Next.js

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

When using the components from reaviz in client components, the local development works, but compiling builds of any app will fail with an error like so:

node_modules/reablocks/dist/index.js (909:54) @ navigator
ReferenceError: navigator is not defined

Expected behavior

The builds and local development function without these blocking errors

You're able to bypass this issue by using next/dynamic and dynamically importing each and every component in order to not have to check to see if the component is using navigator -- this is a work around, yes, but not ideal πŸ˜„

Minimal reproduction of the problem with instructions

When using reaviz which makes use of reablocks there are several components that make use of various utility functions that all make use of navigator.

  1. Import any number of reaviz components that make use of reablocks
  2. Start your nextjs local dev with npm run dev and see the console for the error
  3. Run npm run build
  4. The build should fail with errors relating to pages not being able to be generated

What is the motivation / use case for changing the behavior?

Environment


Libs:
-next version: 14.1.0
- reablocks version: 7.3.4
- typescript version: 5.3.3


Browser:
- [x] Chrome (desktop) version 124.0.6367.93 (Official Build) (arm64)
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v20.12.2  
- Platform:  Mac 

Others:



Select menu position is not updated after height is changed

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Select menu stay at top after menu height is changes

Expected behavior

Select menu should be sticky to input

Minimal reproduction of the problem with instructions

Screen.Recording.2024-06-21.at.14.28.00.mov

What is the motivation / use case for changing the behavior?

Environment


Libs:
- react version: X.Y.Z
- reablocks version: X.Y.Z


Browser:
- [x] Chrome (desktop) version 125
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

Reablocks does not work on NextJs project @(14.2.5)

I'm submitting a Bug Report


[ ] Regression
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Initiated NextJS project with tailwind, installing Reablocks,
adds theme provider and app does not work. Gives error in terminal.

Expected behavior

Should just work.

Minimal reproduction of the problem with instructions

  • Step 1
    Init next js project. (14.2.5)

npx create-next-app@latest

What is your project named? test-nextjs-reablocks
Would you like to use TypeScript? -  Yes
Would you like to use ESLint? -  Yes
Would you like to use Tailwind CSS? -  Yes
Would you like to use `src/` directory?  - Yes
Would you like to use App Router? (recommended) -  Yes
Would you like to customize the default import alias (@/*)? No 
  • Step 2
    Install reablocks

cd test-nextjs-reablocks
npx reablocks-cli@latest init

  • Step 3
    Add ThemeProvider to root layout

`import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { ThemeProvider, theme } from 'reablocks';

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};

export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (


      {children}
    </ThemeProvider>
  </body>
</html>

);
}
`

What is the motivation / use case for changing the behavior?

Environment


Libs:
"next": "14.2.5",
"reablocks": "^7.6.16",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",


Browser:
- [X] Chrome (desktop) version Version 126.0.6478.183 (Officiell version) (64 bitar)
 
For Tooling issues:
- Node version: v20.10.0
- Platform:  WSL subsystem Ubuntu  20 on Windows

## Log
➜  nextjs-reablocks git:(main) βœ— npm run dev

> [email protected] dev
> next dev --turbo

  β–² Next.js 14.2.5 (turbo)
  - Local:        http://localhost:3000

 βœ“ Starting...
 βœ“ Ready in 899ms
 β—‹ Compiling / ...
 βœ“ Compiled / in 7.3s
 GET / 200 in 7527ms
 βœ“ Compiled /favicon.ico in 196ms
 GET /favicon.ico 200 in 255ms
 βœ“ Compiled in 1324ms
 βœ“ Compiled / in 135ms
TypeError: (0 , __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$server$2f$future$2f$route$2d$modules$2f$app$2d$page$2f$vendored$2f$rsc$2f$react$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__.createContext) is not a function
    at /home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_framer-motion_dist_es_62ea84._.js:14:262
    at [project]/node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs [app-rsc] (ecmascript) (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_framer-motion_dist_es_62ea84._.js:21:3)
    at instantiateModule (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:572:12)
    at esmImport (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:122:20)
    at /home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_framer-motion_dist_es_62ea84._.js:501:185
    at [project]/node_modules/framer-motion/dist/es/motion/index.mjs [app-rsc] (ecmascript) (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_framer-motion_dist_es_62ea84._.js:586:3)
    at instantiateModule (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:572:12)
    at esmImport (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:122:20)
    at /home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_framer-motion_dist_es_62ea84._.js:11210:170
    at [project]/node_modules/framer-motion/dist/es/render/dom/motion.mjs [app-rsc] (ecmascript) (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_framer-motion_dist_es_62ea84._.js:11260:3)
    at instantiateModule (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:572:12)
    at esmImport (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:122:20)
    at /home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_reablocks_dist_index_e4e72f.js:277:178
    at [project]/node_modules/reablocks/dist/index.js [app-rsc] (ecmascript) (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_reablocks_dist_index_e4e72f.js:10400:3)
    at instantiateModule (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:572:12)
    at esmImport (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:122:20)
    at /home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[root of the server]__dd06ad._.js:41:146
    at [project]/src/app/layout.tsx [app-rsc] (ecmascript) (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[root of the server]__dd06ad._.js:76:3)
    at instantiateModule (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:572:12)
    at esmImport (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:122:20)
    at Module.default (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[root of the server]__dd06ad._.js:80:20)
    at tree.layout (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_next_1ae572._.js:5929:169)
    at e7 (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:396757)
    at /home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:7437
    at /home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/server/lib/trace/tracer.js:140:36
    at NoopContextManager.with (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7062)
    at ContextAPI.with (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:518)
    at NoopTracer.startActiveSpan (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18093)
    at ProxyTracer.startActiveSpan (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18854)
    at /home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/server/lib/trace/tracer.js:122:103
    at NoopContextManager.with (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7062)
    at ContextAPI.with (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:518)
    at NextTracerImpl.trace (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/server/lib/trace/tracer.js:122:28)
    at rU (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:7314)
    at /home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:6151
    at /home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/server/lib/trace/tracer.js:140:36
    at NoopContextManager.with (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7062)
    at ContextAPI.with (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:518)
    at NoopTracer.startActiveSpan (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18093)
    at ProxyTracer.startActiveSpan (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18854)
    at /home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/server/lib/trace/tracer.js:122:103
    at NoopContextManager.with (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7062)
    at ContextAPI.with (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:518)
    at NextTracerImpl.trace (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/server/lib/trace/tracer.js:122:28)
    at rL (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:6082) {
  digest: '2137806203'
}
 β¨― TypeError: (0 , __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$server$2f$future$2f$route$2d$modules$2f$app$2d$page$2f$vendored$2f$rsc$2f$react$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__.createContext) is not a function
    at /home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_framer-motion_dist_es_62ea84._.js:14:262
    at instantiateModule (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:572:12)
    at esmImport (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:122:20)
    at /home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_framer-motion_dist_es_62ea84._.js:501:185
    at instantiateModule (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:572:12)
    at esmImport (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:122:20)
    at /home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_framer-motion_dist_es_62ea84._.js:11210:170
    at instantiateModule (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:572:12)
    at esmImport (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:122:20)
    at /home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_reablocks_dist_index_e4e72f.js:277:178
    at instantiateModule (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:572:12)
    at esmImport (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:122:20)
    at /home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[root of the server]__dd06ad._.js:41:146
    at [project]/src/app/layout.tsx [app-rsc] (ecmascript) (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[root of the server]__dd06ad._.js:76:3)
    at instantiateModule (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:572:12)
    at esmImport (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:122:20)
    at Module.default (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[root of the server]__dd06ad._.js:80:20)
    at tree.layout (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_next_1ae572._.js:5929:169)
digest: "2137806203"
 β¨― TypeError: (0 , __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$server$2f$future$2f$route$2d$modules$2f$app$2d$page$2f$vendored$2f$rsc$2f$react$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__.createContext) is not a function
    at /home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_framer-motion_dist_es_62ea84._.js:14:262
    at instantiateModule (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:572:12)
    at esmImport (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:122:20)
    at /home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_framer-motion_dist_es_62ea84._.js:501:185
    at instantiateModule (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:572:12)
    at esmImport (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:122:20)
    at /home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_framer-motion_dist_es_62ea84._.js:11210:170
    at instantiateModule (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:572:12)
    at esmImport (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:122:20)
    at /home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_reablocks_dist_index_e4e72f.js:277:178
    at instantiateModule (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:572:12)
    at esmImport (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:122:20)
    at /home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[root of the server]__dd06ad._.js:41:146
    at [project]/src/app/layout.tsx [app-rsc] (ecmascript) (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[root of the server]__dd06ad._.js:76:3)
    at instantiateModule (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:572:12)
    at esmImport (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:122:20)
    at Module.default (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[root of the server]__dd06ad._.js:80:20)
    at tree.layout (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_next_1ae572._.js:5929:169)
digest: "2137806203"
 β¨― TypeError: (0 , __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$server$2f$future$2f$route$2d$modules$2f$app$2d$page$2f$vendored$2f$rsc$2f$react$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__.createContext) is not a function
    at /home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_framer-motion_dist_es_62ea84._.js:14:262
    at instantiateModule (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:572:12)
    at esmImport (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:122:20)
    at /home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_framer-motion_dist_es_62ea84._.js:501:185
    at instantiateModule (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:572:12)
    at esmImport (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:122:20)
    at /home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_framer-motion_dist_es_62ea84._.js:11210:170
    at instantiateModule (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:572:12)
    at esmImport (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:122:20)
    at /home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_reablocks_dist_index_e4e72f.js:277:178
    at instantiateModule (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:572:12)
    at esmImport (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:122:20)
    at /home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[root of the server]__dd06ad._.js:41:146
    at [project]/src/app/layout.tsx [app-rsc] (ecmascript) (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[root of the server]__dd06ad._.js:76:3)
    at instantiateModule (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:572:12)
    at esmImport (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:122:20)
    at Module.default (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[root of the server]__dd06ad._.js:80:20)
    at tree.layout (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_next_1ae572._.js:5929:169)
digest: "2137806203"
 β¨― TypeError: (0 , __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$server$2f$future$2f$route$2d$modules$2f$app$2d$page$2f$vendored$2f$rsc$2f$react$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__.createContext) is not a function
    at /home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_framer-motion_dist_es_62ea84._.js:14:262
    at [project]/node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs [app-rsc] (ecmascript) (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_framer-motion_dist_es_62ea84._.js:21:3)
    at instantiateModule (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:572:12)
    at esmImport (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:122:20)
    at /home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_framer-motion_dist_es_62ea84._.js:501:185
    at [project]/node_modules/framer-motion/dist/es/motion/index.mjs [app-rsc] (ecmascript) (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_framer-motion_dist_es_62ea84._.js:586:3)
    at instantiateModule (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:572:12)
    at esmImport (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:122:20)
    at /home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_framer-motion_dist_es_62ea84._.js:11210:170
    at [project]/node_modules/framer-motion/dist/es/render/dom/motion.mjs [app-rsc] (ecmascript) (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_framer-motion_dist_es_62ea84._.js:11260:3)
    at instantiateModule (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:572:12)
    at esmImport (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:122:20)
    at /home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_reablocks_dist_index_e4e72f.js:277:178
    at [project]/node_modules/reablocks/dist/index.js [app-rsc] (ecmascript) (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_reablocks_dist_index_e4e72f.js:10400:3)
    at instantiateModule (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:572:12)
    at esmImport (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:122:20)
    at /home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[root of the server]__dd06ad._.js:41:146
    at [project]/src/app/layout.tsx [app-rsc] (ecmascript) (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[root of the server]__dd06ad._.js:76:3)
    at instantiateModule (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:520:23)
    at getOrInstantiateModuleFromParent (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:572:12)
    at esmImport (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[turbopack]_runtime.js:122:20)
    at Module.default (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/[root of the server]__dd06ad._.js:80:20)
    at tree.layout (/home/b3kay/code/testing/nextjs-reablocks/.next/server/chunks/ssr/node_modules_next_1ae572._.js:5929:169)
    at e7 (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:396757)
    at /home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:7437
    at /home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/server/lib/trace/tracer.js:140:36
    at NoopContextManager.with (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7062)
    at ContextAPI.with (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:518)
    at NoopTracer.startActiveSpan (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18093)
    at ProxyTracer.startActiveSpan (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18854)
    at /home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/server/lib/trace/tracer.js:122:103
    at NoopContextManager.with (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7062)
    at ContextAPI.with (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:518)
    at NextTracerImpl.trace (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/server/lib/trace/tracer.js:122:28)
    at rU (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:7314)
    at /home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:6151
    at /home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/server/lib/trace/tracer.js:140:36
    at NoopContextManager.with (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7062)
    at ContextAPI.with (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:518)
    at NoopTracer.startActiveSpan (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18093)
    at ProxyTracer.startActiveSpan (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:18854)
    at /home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/server/lib/trace/tracer.js:122:103
    at NoopContextManager.with (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:7062)
    at ContextAPI.with (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/@opentelemetry/api/index.js:1:518)
    at NextTracerImpl.trace (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/server/lib/trace/tracer.js:122:28)
    at rL (/home/b3kay/code/testing/nextjs-reablocks/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:39:6082) {
  digest: '2137806203',
  page: '/'
}
 βœ“ Compiled in 275ms
 β—‹ Compiling /_error ...
 βœ“ Compiled /_error in 1036ms
 GET / 500 in 1888ms
 GET /favicon.ico 200 in 81ms
 βœ“ Compiled in 45ms
 βœ“ Compiled / in 111ms

Select value disappears

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

This may be an edge case or uncommon thing, but if I submit a form from say, a different tab, and it errors, the width of the input gets set to 2px for some reason. Here's a quick video - pay attention to the width of the input.

Screen.Recording.2023-03-16.at.2.37.33.AM.mov

Expected behavior

value is still visible

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment


Libs:
- react version: X.Y.Z
- reablocks version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

`ReferenceError: ResizeObserver is not defined` when running Vitest test

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

When clicking on input component from <Select> component during vitest test, the test is returning ReferenceError: ResizeObserver is not defined after updating new reaviz version "15.18.4".

Expected behavior

To pass the test

Minimal reproduction of the problem with instructions

// React
import { useState } from 'react';

// Testing library
import { render, screen, userEvent } from 'shared/utils/Vitest/utils';

// Components
import { SelectOption, Select } from 'reablocks';

const selectDefaultPlaceholderText: string = 'SelectME';
const selectDefaultOptionTexts: string[] = ['optionText0', 'optionText1'];

const TestComponent = () => {
  const [value, setValue] = useState<string>('');
  return (
    <Select
      value={value}
      onChange={value => setValue(value)}
      placeholder={selectDefaultPlaceholderText}
    >
      {selectDefaultOptionTexts.map(name => (
        <SelectOption value={name} key={name}>
          {name}
        </SelectOption>
      ))}
    </Select>
  );
};

describe('Test', () => {
  const user = userEvent.setup();

  it('Should render', async () => {
    render(<TestComponent />);
    const selectInputElement = await screen.findByPlaceholderText(
      selectDefaultPlaceholderText
    );
    expect(selectInputElement).toBeValid();
    expect(selectInputElement).toBeInTheDocument();
  });
  it('test', async () => {
    render(<TestComponent />);

    const selectInputElement: HTMLInputElement =
      await screen.findByPlaceholderText(selectDefaultPlaceholderText);

    await user.click(selectInputElement);
  });
});

defaultProps Deprecated (And Causing Warnings)

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[X] Other... Please describe: Warning report

Current behavior

image
image
etc.

Expected behavior

The console should be free of warnings.

Minimal reproduction of the problem with instructions

  1. Use any of the Rea Blocks components listed here: https://github.com/search?q=repo%3Areaviz%2Freablocks%20defaultProps&type=code
  2. See the warnings shown above

What is the motivation / use case for changing the behavior?

Signal to noise ratio: when my console is filled with warnings, it's harder to find the information I'm looking for in it.

Environment


Libs:
- react version: 18.2.0
- reablocks version: 5.10.14


Browser:
Irrelevant (warnings appear in all browsers/versions, as far as I know)

For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Extend RadialGaugeSeries or create new one with ability to display sectors on the same line

Currently, we can display only one value per sector with RadialGaugeSeries or use StackedRadialGaugeSeries where every value on a separate line.
Need to extend this functionality to have the ability to build radial chart like on the next screenshot:
image

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.