Skip to content

Instantly share code, notes, and snippets.

View ndelangen's full-sized avatar
🇳🇱
yes?

Norbert de Langen ndelangen

🇳🇱
yes?
  • Chroma Software
  • Netherlands
View GitHub Profile
@ndelangen
ndelangen / your-storybook-preset.js
Created July 29, 2019 12:31
Using other config properties
export const webpack = async (base, config) => {
const { default: webpackMerge } = await import('webpack-merge');
const { default: globToRegex } = await import('glob-to-regexp');
// here we request the resulting entries property
// and transform the array of globs to an array of regular expressions
const entries = (await config.entries).map(globToRegex);
return webpackMerge(base, {
module: {
export const entries = ['**/*.stories.[t|j]s'];
export const presets = ['babel/auto', 'sass'];
export const babel = async (base, config) => ({
rootMode: 'upward',
sourceType: 'unambiguous',
});
@ndelangen
ndelangen / storybook.config.js
Created July 29, 2019 11:50
Configuration with webpack & babel
export const entries = ['**/*.stories.[t|j]s'];
export const babel = async (base, config) => ({
rootMode: 'upward',
sourceType: 'unambiguous',
});
export const webpack = async (base, config) => {
const { default: webpackMerge } = await import('webpack-merge');
@ndelangen
ndelangen / storybook.config.js
Created July 29, 2019 09:57
Configuring storybook's entries & addons
export const entries = ['**/*.stories.[t|j]s'];
export const addons = ['docs', 'knobs'];
@ndelangen
ndelangen / doc.md
Last active December 22, 2017 06:55
Markdown extension for placing React components

Add storybook dependencies

First of all, you need to add a few storybook packages to your project's package.json. To do that, simply run:

:::CodeSwitcher

npm i --save-dev @storybook/react @storybook/addons react react-dom
@ndelangen
ndelangen / grid.js
Created January 26, 2017 22:31
A styled-components grid component
import React from 'react';
import styled from 'styled-components';
const breakpoints = {
xs: '(max-width: 400px)',
sm: '(min-width: 401px) and (max-width: 520px)',
md: '(min-width: 521px) and (max-width: 720px)',
lg: '(min-width: 721px) and (max-width: 980px)',
xl: '(min-width: 981px)',
};
@ndelangen
ndelangen / cluster-ipc.js
Created January 2, 2017 16:18
A NodeJS cluster communicating via ipc.
const cluster = require('cluster');
const http = require('http');
if (cluster.isMaster) {
// init cluster
require('os').cpus().forEach(() => {
cluster.fork();
});
// add eventlisteners
@ndelangen
ndelangen / cluster-example.js
Created January 2, 2017 15:55
The cluster module allows you to easily create child processes that all share server ports.
const cluster = require('cluster');
const http = require('http');
const numCPUs = require('os').cpus().length;
if (cluster.isMaster) {
// Fork workers.
for (var i = 0; i < numCPUs; i++) {
cluster.fork();
}
@ndelangen
ndelangen / process1.js
Created January 2, 2017 15:06
If you have 2 independent NodeJS processes running and want them to communicate, this can be done reliably using a npm package: node-ipc
const ipc = require('node-ipc');
ipc.config.id = 'a-unique-process-name1';
ipc.config.retry = 1500;
ipc.config.silent = true;
ipc.serve(() => ipc.server.on('a-unique-message-name', message => {
console.log(message);
}));
ipc.server.start();