Skip to content

Instantly share code, notes, and snippets.

View julrich's full-sized avatar
🍋
squeezing!

Jonas Ulrich julrich

🍋
squeezing!
View GitHub Profile
@julrich
julrich / components_Component.js
Last active October 17, 2022 14:55
Usage of `kickstartDS` in `Next.js`
import { createElement, createContext, useContext } from "react";
const ComponentContext = createContext({});
export function createComponentProvider(componentMap) {
return function (props) {
const prevComponentMap = useContext(ComponentContext);
return createElement(ComponentContext.Provider, {
...props,
value: { ...prevComponentMap, ...componentMap },
@julrich
julrich / JourneyContext.tsx
Created September 16, 2022 16:05
Immer.js based state provider in React
import {
createContext,
FC,
PropsWithChildren,
useContext,
useEffect,
} from "react";
import noop from "lodash/noop";
import { Updater, useImmer, History } from "../utils/useImmer";
import { Journey } from "../types/journey";
@julrich
julrich / package.json
Last active May 20, 2022 09:12
Parallel Watch
{
"name": "parallel-watch",
"version": "0.0.1",
"scripts": {
"start": "concurrently -r \"start-storybook -p 6006\" \"yarn watch-tokens\"",
"build-tokens": "kickstartDS tokens compile --cleanup --rc-only",
"watch-tokens": "chokidar \"tokens/*.json\" -c \"yarn build-tokens\""
},
"dependencies": {
"@storybook/addon-actions": "^6.5.3",
@julrich
julrich / .example-demorc.json
Created May 15, 2022 15:39
kickstartDS CLI prompt schema for demo task
{
"definitions": {},
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "https://kickstartds.com/example-demo.json",
"type": "object",
"title": "kickstartDS Example Demo task",
"required": [
"demo"
],
"properties": {
@julrich
julrich / collectGraphQLFragments.js
Created April 14, 2022 10:06
Collecting Fragments
const GatsbyParser = require('gatsby/dist/query/file-parser').default;
/**
* Collect all graphql fragments from a directory
* @see https://github.com/gatsbyjs/gatsby/issues/12155#issuecomment-618424527
*/
exports.collectGraphQLFragments = async (fragmentNamesToExtract, gqlPath) => {
const parser = new GatsbyParser();
const result = await parser.parseFile(`${gqlPath}/page.fragments.js`);
@julrich
julrich / componentAnalytics.js
Created April 11, 2022 17:41
Rudimentary Component (props) Analytics in InfluxDB
const { InfluxDB, Point, HttpError } = require('@influxdata/influxdb-client');
const url = process.env['GATSBY_INFLUX_URL'] || 'http://localhost:8086';
const token = process.env['GATSBY_INFLUX_TOKEN'] || 'my-token';
const org = process.env['GATSBY_INFLUX_ORG'] || 'my-org';
const bucket = process.env['GATSBY_INFLUX_BUCKET'] || 'my-bucket';
const db = new InfluxDB({ url, token });
const isObject = (obj) =>
@julrich
julrich / fallback.ks-tokens.json
Created March 10, 2022 21:07
Design Token Theme -> Tokens
{
"color": {
"primary": "#333",
"background": "#fff",
"foreground": "#000",
"link": "#1c7ed6"
},
"font": {
"display": {
"family": "Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif",
@julrich
julrich / output.json
Created February 26, 2022 15:36
Netlify Graph Response
{
"data": {
"spotify": {
"me": {
"savedTracks": {
"nodes": [
{
"name": "Such a good day",
"artists": [
{
import "@kickstartds/core/lib/container-queries";
import { Component, define } from "@kickstartds/core/lib/core";
import { windowEvents } from "@kickstartds/core/lib/utils";
const desktopImageOffsetAngle = 60;
const mobileImageOffsetAngle = 75;
const mobileOffsetRotateAngle = 45;
const backgroundRotateFactor = -0.25;
const maxBlur = 4;
renderingOptions:
submitButtonLabel: Absenden
type: Form
identifier: myForm
label: 'My Form'
prototypeName: standard
finishers:
-
options:
subject: Testemail