profile
viewpoint
If you are wondering where the data of this site comes from, please visit https://api.github.com/users/RWOverdijk/events. GitMemory does not store any data, but only uses NGINX to cache data for a period of time. The idea behind GitMemory is simply to give users a better reading experience.
Roberto Wesley Overdijk RWOverdijk SpoonX Studio Heerhugowaard https://medium.com/@r.w.overdijk

RWOverdijk/AssetManager 212

AssetManager written for zf2. Managing assets for zend framework 2

BlueHotDog/sails-migrations 156

The missing, migrations, arm of the octopus

rmevans9/react-native-router-flux 1

First Declarative React Native Router

RWOverdijk/AssetLoader 1

AssetLoader module for ZF2

RWOverdijk/2048-android 0

The android port of the 2048 game (for offline playing)

RWOverdijk/about 0

About SpoonX.

RWOverdijk/about-1 0

About SWAN stack

RWOverdijk/admin-on-rest 0

A frontend framework for building admin SPAs on top of REST services, using React and Material Design

RWOverdijk/AdminLTE 0

AdminLTE - Free Premium Admin control Panel Theme That Is Based On Bootstrap 3.x

pull request commentJohannesMP/unity-scene-reference

Improve scene reference usability with lists #8

Do you do bumps on this repo? Because I'd like to bump this :D

joaoborks

comment created time in 4 days

issue closedarchiverjs/node-archiver

Trimming library size

This lib works great for what I need, but it is a bit too large for my taste. I checked out the cause and found:

https://bundlephobia.com/package/archiver@5.3.0 (221.5kB)

Comparing this to what I used before this lib: https://bundlephobia.com/package/adm-zip@0.5.5 (28.3kB)

Is a pretty big jump.

I understand that the addition of streams is worth sacrificing some storage, but I don't think all of the dependencies are that important.

For example the async lib is primarily used for a queue but takes up a pretty large chuck of the size.

Would it be an option to replace some of the dependencies with either smaller ones or tailored (rewritten) to reduce file size? Normally I wouldn't care, but the deploys, storage and startup time of my firebase functions do hurt a bit so I wanted to at least ask.

closed time in 11 days

RWOverdijk

issue commentmarmelab/react-admin

cacheDataProviderProxy not called with ra-data-graphql-simple

Thanks.

If nobody picks this up I'll see if I can tackle this next time I work on this project. How hard can it be, right. Sounds like the function is replaced by an object literal where the previous action argument is now the key. Is that correct?

RWOverdijk

comment created time in 15 days

issue openedmarmelab/react-admin

cacheDataProviderProxy not called with ra-data-graphql-simple

I wasn't sure if I should put this here or on the ra-data-graphql-simple repo. I'm not even sure if this is an actual bug or just me doing something wrong.

What you were expecting:

I was expecting cacheDataProviderProxy's get() to be called when used with graphql. I notice that every Edit performs a get and I want to use the cacheDataProviderProxy to prevent that.

What happened instead:

I've added several logs and none of them are being called. I verified my logs are there in the browser, and they are.

<details> <summary>Screenshot collapsed, click to expand.</summary>

image </details>

Steps to reproduce:

Using the default code in the graphql readme with the addition of the cacheDataProviderProxy.

<details> <summary>Code collapsed, click to expand.</summary>

import * as React from 'react';
import { Component } from 'react';
import buildGraphQLProvider from 'ra-data-graphql-simple';
import { Admin, cacheDataProviderProxy } from 'react-admin';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = { dataProvider: null };
  }

  componentDidMount() {
    // 👇 This is where I added the `cacheDataProviderProxy()` 👇 
    buildGraphQLProvider({ clientOptions: { uri: 'http://localhost:4000/graphql' }})
        .then(dataProvider => this.setState({ dataProvider: cacheDataProviderProxy(dataProvider) }));
  }

  render() {
    const { dataProvider } = this.state;

    if (!dataProvider) {
      return <div>Loading</div>;
    }

    return (
        <Admin dataProvider={dataProvider}>
        </Admin>
    );
  }
}

export default App;

</details>

Environment

  • React-admin version: 3.16.6 (waiting for material-ui fix)
  • Last version that did not exhibit the issue (if applicable): N/A
  • React version: 17.0.2
  • Browser: Chrome
  • Stack trace (in case of a JS error): N/A

created time in 21 days

issue openedarchiverjs/node-archiver

Trimming library size

This lib works great for what I need, but it is a bit too large for my taste. I checked out the cause and found:

https://bundlephobia.com/package/archiver@5.3.0 (221.5kB)

Comparing this to what I used before this lib: https://bundlephobia.com/package/adm-zip@0.5.5 (28.3kB)

Is a pretty big jump.

I understand that the addition of streams is worth sacrificing some storage, but I don't think all of the dependencies are that important.

For example the async lib is primarily used for a queue but takes up a pretty large chuck of the size.

Would it be an option to replace some of the dependencies with either smaller ones or tailored (rewritten) to reduce file size? Normally I wouldn't care, but the deploys, storage and startup time of my firebase functions do hurt a bit so I wanted to at least ask.

created time in a month

issue commentianstormtaylor/superstruct

Comparing Fields

if (branch[0][field] === value) {
  return true;
} else {
  return false;
}

I don't know the answer but I can point out injustices when I see them. Don't do this ☝️ Instead just:

return branch[0][field] === value;

67726e

comment created time in a month

issue closedjquense/yup

Get required value?

I'm using yup with hook form and I would like a way to see if a field is required (so I can add an asterisk to the label in the form).

Is there a way to do this?

closed time in a month

RWOverdijk

issue commentjquense/yup

Get required value?

I'm using exclusive tests

return schema.fields[name].exclusiveTests?.required;

RWOverdijk

comment created time in a month

issue openedjquense/yup

Get required value?

I'm using yup with hook form and I would like a way to see if a field is required (so I can add an asterisk to the label in the form).

Is there a way to do this?

created time in a month

startednandorojo/moti

started time in 2 months

issue commentakveo/react-native-ui-kitten

useStyles hook

Pasting the comment I wrote for the related issue:

is this something that could be added to ui kitten? I think it would be nice to have. I changed it a bit to make the prop types remain:

import { StyledComponentProps } from '@ui-kitten/components/theme/style/styled';
import { useCallback, useContext, useMemo, useState } from 'react';
import { MappingContext } from '@ui-kitten/components/theme/mapping/mappingContext';
import { ThemeContext } from '@ui-kitten/components/theme/theme/themeContext';
import { StyleConsumerService } from '@ui-kitten/components/theme/style/styleConsumer.service';

export function useStyled<T>(name: string, sourceProps: T): T & StyledComponentProps {
  const [interaction, setInteraction] = useState([]);
  const mappingStyle = useContext(MappingContext);
  const theme = useContext(ThemeContext);
  const service = useMemo(() => new StyleConsumerService(name, mappingStyle), [name, mappingStyle]);
  const defaultProps = useMemo(() => service.createDefaultProps(), [service]);
  const computedProps = useMemo(() => ({ ...defaultProps, ...sourceProps }), [defaultProps, sourceProps]);
  const dispatch = useCallback((newInteraction: any) => setInteraction(newInteraction), [setInteraction]);
  const style = useMemo(() => service?.createStyleProp(computedProps, mappingStyle, theme, interaction), [
    service,
    computedProps,
    mappingStyle,
    theme,
    interaction
  ]);

  return useMemo(() => ({
    ...computedProps,
    eva: { theme, style, dispatch }
  }), [computedProps, theme, style]);
}

Usage:

import React from 'react';
import { View } from 'react-native';
import { FooterStyle } from './Footer.style';
import { ExternalLink } from '../ExternalLink';

import { useStyled } from '../../lib/hooks/useStyled';

interface FooterProps { }

export function Footer(props: FooterProps) {
  const { eva: { style = null } = {} } = useStyled('Footer', props);

  return (
    <View style={[FooterStyle.container, style]}>
      <ExternalLink href="https://google.com/">Go to link!</ExternalLink>
    </View>
  )
}
sschottler

comment created time in 2 months

issue commentakveo/react-native-ui-kitten

Could UI Kitten use StyleSheet.create to generate classes instead of inline styles on web?

I don't think that'll help here, especially since the real issue is with web.

In my opinion the way styles are currently being created would have to be fundamentally changed in order to resolve this issue. Each controlling prop (variantGroup, state, appearance) would need to have its unique style properties (what happens when disabled, when large, when active) added to a StyleSheet.create() object property. Then instead of returning a composed style object UI-Kitten would have to return a composed styles array.

[styles.disabled, styles.primary, styles.checled]

This is a complex task, and one that might not be worth the effort depending on your project's goals. Since I last commented I've switched to a simple react context provider/consumer pair where each stylesheet gets access to the resolved values in the mapping (a factory that gets the theme and the mapping). The returned values are (lazilly) wrapped in a StyleSheet.create() call. That way I can use simple conditionals to add or remove a style while still being able to use variables in my mappings. Sure, I lose the magic of additional styles by just adding a variant or state to my mapping, but it's a lot more lightweight and simple to reason about.

Right now I'm trying to use the eva mapping to create the styles array inside of a react hook. I need to know which prop links to which stylename in my stylesheet factory. It'd be a helper (like useStyled) that should behave the same way ui-kitten does currently. It's challenging though, so if you feel up to the task you can try writing an implementation, too. Then we can compare notes 😄

sschottler

comment created time in 2 months

issue commentakveo/react-native-ui-kitten

Could UI Kitten use StyleSheet.create to generate classes instead of inline styles on web?

True. That's what happens when using the exported styles object as well.

I've decided to let go of this for now and instead focus on my own implementation of this. What I've learned thus far is that it's extremely difficult to come up with a nice way of doing this. So I'm leaving this out there for someone else to tackel while I just use a context provider and write my own components.

sschottler

comment created time in 2 months

issue commentexpo/snack

Petition to rename the project

image

RWOverdijk

comment created time in 2 months

issue commentJacopoPatroclo/nx-react-native-expo

Trouble importing with paths like: '@coolmono/cool-library/CoolComponent'

@JacopoPatroclo thanks for explaining where the issue might be. I'll take a stab at the path resolution issue!

How's the stabbing going? 😄

Enricopv

comment created time in 2 months

issue openedJacopoPatroclo/nx-react-native-expo

Installing fails on npm 7.10.0

Peer-dependencies changed. The workaround (adding --legacy-peer-deps) is easy, but still unwanted.

project [ npm install --save-dev nx-react-native-expo                   master ] 12:45 PM
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: @nrwl/workspace@12.3.5
npm ERR! node_modules/@nrwl/workspace
npm ERR!   dev @nrwl/workspace@"12.3.5" from the root project
npm ERR!   peer @nrwl/workspace@"*" from nx-react-native-expo@0.0.9
npm ERR!   node_modules/nx-react-native-expo
npm ERR!     dev nx-react-native-expo@"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @nrwl/workspace@"10.4.4" from @nrwl/jest@10.4.4
npm ERR! node_modules/nx-react-native-expo/node_modules/@nrwl/jest
npm ERR!   @nrwl/jest@"10.4.4" from nx-react-native-expo@0.0.9
npm ERR!   node_modules/nx-react-native-expo
npm ERR!     dev nx-react-native-expo@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/wesleyoverdijk/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/wesleyoverdijk/.npm/_logs/2021-06-01T11_07_55_474Z-debug.log

created time in 2 months

issue commentlifeiscontent/storybook-addon-apollo-client

Storyshots support?

I have the same issue with @storybook/testing-react. The decorator doesn't get added in tests.

What I did to make it work is supply my own decorator.

import React from 'react';
import * as eva from '@eva-design/eva';
import theme from '../theme';
import { ApplicationProvider } from '@ui-kitten/components';
import { MockedProvider } from '@apollo/client/testing';
import '../src/i18n';

export const parameters = {
  apolloClient: {
    defaultOptions: { watchQuery: { fetchPolicy: 'no-cache' } },
    MockedProvider: ({ children }) => children, // No-op.
  },
  actions: { argTypesRegex: '^on[A-Z].*' },
  options: {
    storySort: {
      order: [
        'Brand book', ['Introduction', 'Logo'],
        // Others.
      ],
    },
  },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

export const decorators = [
  (Story, { parameters: { apolloClient: { MockedProvider: _, ...rest } } }) => (
    <ApplicationProvider {...eva} theme={{ ...eva.light, ...theme }}>
      <MockedProvider {...rest}>
        <Story/>
      </MockedProvider>
  </ApplicationProvider>
  )
];

It's definitely not ideal, but at least it works for both storybook (which will have 1 useless wrapper component) as well as storyshots and @storybook/testing-react

yale

comment created time in 2 months

issue commentakveo/react-native-ui-kitten

Could UI Kitten use StyleSheet.create to generate classes instead of inline styles on web?

Good points! And I thought about the same solution as well, but you'll end up with a lot of duplicate styles. Take a look at the mapping styles ui-kitten generates now. It's a key for every possible appearance/variantGroup combination of which 99% is identical. I understand it's an improvement on what is happening now and I definitely wouldn't stop it, but it's still not an elegant solution.

We could for example have a single styleFactory (a function provided by the component that generates the styles similar to this) which returns styles. We could call it for ever combination (mapping styles) and use the diff between objects to create smaller styles.

This to me sounds like a ton of work to just get rid of duplication in styles. Alternatively we could just accept the way things are now, and move on.

I don't like moving on 😄

There are some pros and cons to consider here. Perhaps the ability to create new variants by just editing the mapping is not worth the overhead and trouble it brings with it. But that's a discussion about a different topic.

sschottler

comment created time in 2 months

issue closedakveo/react-native-ui-kitten

Exclude components from build

<!-- Love UI Kitten? Please leave feedback: 👉 https://github.com/akveo/react-native-ui-kitten/issues/657 -->

💬 Question

My question is regarding the standard components.

I know this is perhaps a bit weird... But I don't want to use any of the ui-kitten components. I only like the design system and wish to build my own primitives. Our components will have to also work in web. For this I want to have specific styles for each platform (native driver animations on mobile, css animations on web).

Is there a way to do this? Right now the components are still ending up in the build. I want to exclude them entirely and solely use my own mappings and components. I can probably exclude the mappings by not spreading eva, but I'm not sure how to achieve a full exclude.

closed time in 2 months

RWOverdijk

issue commentakveo/react-native-ui-kitten

useStyles hook

There's already an open issue for this here.

sschottler

comment created time in 2 months

issue commentakveo/react-native-ui-kitten

Could UI Kitten use StyleSheet.create to generate classes instead of inline styles on web?

@sschottler Thanks for replying even though it has been a while since you created this issue!

Right now we are instructing it to perform those checks every time you call StyleSheet.create(). So for performance this wouldn't be great. In fact it'd probably be worse than inlining the styles the way we do now.

I'm currently thinking about ways of solving this but I quickly noticed that the way ui-kitten fundamentally works makes this very difficult. I've rewritten this comment around 9 times now (massive walls of text, too) but I keep deleting it because I keep getting stuck coming up with solutions.

The TL;DR; is that I think a fundamental change is needed to get StyleSheet.create() to work for us. Dynamically generating style objects needs to be replaced by dynamically composing style arrays. This approach would no longer be what UI-Kitten currently is.

So instead of forcing it to behave this way right now, I'll instead try to set up a new/different system and offer it up for comparison. Perhaps it explains the ideas I have and we can translate it to a path forward. (Or exposes that I'm overthinking it and I'm just wrong).

Unless you have another good idea that is 😄

sschottler

comment created time in 2 months

issue commentakveo/react-native-ui-kitten

Could UI Kitten use StyleSheet.create to generate classes instead of inline styles on web?

@sschottler a bit late perhaps, but I too have this question. I think the challenge with this is the dynamic nature of these classes. UI-Kitten works on web, but wasn't designed for web. Some of the architectural decisions reflect this.

To get this to work, each "style" that is generated (as in, each style passed through the styled() hoc) would have to be passed through StyleSheet.create(). This gets tricky since some of these styles are calculated beforehand (it returns one object that has been normalised instead of multiple that override each other). On top of that, every component that requires styles would need to be its own eva-design based component or its own StyleSheet.create() call to make sure it passes through StyleSheet.create().

Also afaik things like animations won't work as they require the component reference to do their thing. Each component would have its own animation that can't be created through StyleSheet.create().

That being said, I do think this would be a good change. I personally don't see a problem with this approach other than it being a breaking change and breaking composability on the styles returned by the hoc.

It would be a lot of work though. I think some big steps could be made by changing this into a mechanism that somehow caches styles. The issue I see here is that it needs to keep track of the theme as well.

TL;DR;

This can be done and I think it should. But I also think it should be done incrementally (create when not created yet) as it would otherwise be a pretty big hit on initial performance. In any case this means creating stylesheets for every individual variantGroup and appearance which is no small task.

sschottler

comment created time in 2 months

startednickcolley/jest-axe

started time in 2 months

issue closedstorybookjs/testing-react

Tests failing: Storybook preview hooks can only be called inside decorators and story functions

Describe the bug I'm not sure if this is a bug, but following this example https://github.com/storybookjs/testing-react#composestory

my test fails with "Storybook preview hooks can only be called inside decorators and story functions.".

It's probably something stupid but I can't figure it out.

I have configured the global decorators and my test looks like this:

import React from 'react';
import { render, screen } from '@testing-library/react';
import { composeStory } from '@storybook/testing-react';
import Meta, { Default as DefaultStory } from './Label.stories';

// Returns a component that already contain all decorators from story level, meta level and global level.
const Label = composeStory(DefaultStory, Meta);

test('RANDOM', async () => {
  render(<Label />);

  expect(screen).toMatchSnapshot();
});

And my label stories:

import React from 'react';
import { Meta } from '@storybook/react';
import { Label } from './Label';
import { LabelProps } from './Label.types';

// Meta + template
export default {
  title: 'Components/Typography/Label',
  component: Label,
} as Meta;

const Template: any = (args: LabelProps) => <Label {...args} />;

// Stories
export const Default = Template.bind({});
Default.args = {
  children: 'Hello world!',
};

closed time in 2 months

RWOverdijk

issue commentstorybookjs/testing-react

Tests failing: Storybook preview hooks can only be called inside decorators and story functions

This failed because I was using https://github.com/lifeiscontent/storybook-addon-apollo-client with the decorator. The readme says I shouldn't haven.

Readme files and IKEA closets have the same effect on me. So PEBKAC ensued.

RWOverdijk

comment created time in 2 months

issue closedlifeiscontent/storybook-addon-apollo-client

Update props on change

I'm using this addon for my react-based storybook setup. It works for the initial load but changing to a different mock doesn't seem to update the props of my story.

Am I just misunderstanding what this addon does?

Update: I figured it out. Mocks is an array in case you're using multiple queries.

Is there a way to change the results in storybook? I want a loading toggle, an error toggle... Different types of responses. Can I just swap out the mock in the array?

closed time in 2 months

RWOverdijk

issue commentstorybookjs/storybook

initStoryshots can't work with typescript and accessing non-needed files

Did you happen to figure this out? What was the issue?

kdong007

comment created time in 2 months

issue openedstorybookjs/testing-react

Tests failing: Storybook preview hooks can only be called inside decorators and story functions

Describe the bug I'm not sure if this is a bug, but following this example https://github.com/storybookjs/testing-react#composestory

my test fails with "Storybook preview hooks can only be called inside decorators and story functions.".

It's probably something stupid but I can't figure it out.

I have configured the global decorators and my test looks like this:

import React from 'react';
import { render, screen } from '@testing-library/react';
import { composeStory } from '@storybook/testing-react';
import Meta, { Default as DefaultStory } from './Label.stories';

// Returns a component that already contain all decorators from story level, meta level and global level.
const Label = composeStory(DefaultStory, Meta);

test('RANDOM', async () => {
  render(<Label />);

  expect(screen).toMatchSnapshot();
});

And my label stories:

import React from 'react';
import { Meta } from '@storybook/react';
import { Label } from './Label';
import { LabelProps } from './Label.types';

// Meta + template
export default {
  title: 'Components/Typography/Label',
  component: Label,
} as Meta;

const Template: any = (args: LabelProps) => <Label {...args} />;

// Stories
export const Default = Template.bind({});
Default.args = {
  children: 'Hello world!',
};

created time in 2 months

startedstorybookjs/testing-react

started time in 2 months