Skip to content

Instantly share code, notes, and snippets.

View crisu83's full-sized avatar
🎩
Coding

Christoffer Niska crisu83

🎩
Coding
View GitHub Profile
@crisu83
crisu83 / graphql.ts
Created September 3, 2021 17:57
GraphQL API route
import {ApolloServer} from 'apollo-server-micro';
import {NextApiRequest, NextApiResponse} from 'next';
import {resolvers} from '@/graphql/resolvers';
import typeDefs from '@/graphql/schema.graphql';
const handler = async (req: NextApiRequest, res: NextApiResponse) => {
return new ApolloServer(
resolvers,
@crisu83
crisu83 / button.tsx
Last active May 19, 2021 09:02
Design system written in TypeScript and built on top of Style System (and Styled Components).
// Example button component
import shouldForwardProp from '@styled-system/should-forward-prop';
import {darken, lighten} from 'polished';
import React, {FunctionComponent, forwardRef} from 'react';
import {variant as variantFn} from 'styled-system';
import {
Box,
BoxPropsWithRef,
@crisu83
crisu83 / ci.yml
Last active April 8, 2021 08:15
CI workflow for GitHub Actions. Paste the contents in .github/workflows/ci.yml to enable it for your repository.
name: CI
on: [push]
jobs:
schema:
name: Schema
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@master
- name: Inspect Schema
@crisu83
crisu83 / pipe.ts
Last active April 3, 2021 16:44
Simple strongly typed pipe function
type OperatorFn<T> = (value: T) => T;
interface PipeFn {
<T>(...fns: OperatorFn<T>[]): (value: T) => T;
}
const pipe: PipeFn = (...fns) => value =>
fns.reduce((val, fn) => fn(val), value);
export default pipe;
@crisu83
crisu83 / draggable.ts
Last active January 7, 2021 10:14
Draggable plugin for Chart.js 3 written in TypeScript.
import {Chart as ChartJsChart, ChartOptions} from 'chart.js';
import {D3DragEvent, drag} from 'd3-drag';
import {select} from 'd3-selection';
type ChartElement = any;
type Chart = ChartJsChart & {options: ChartOptions & DraggableOptions};
type DragEvent = D3DragEvent<ChartElement, number, number>;
enum DragEventType {
Start = 'start',
@crisu83
crisu83 / use-date-formatting.ts
Last active December 21, 2020 15:03
A custom date formatting hook for date-fns in next.js apps written in TypeScript.
import {
format,
formatDistance,
formatDistanceStrict,
formatRelative,
} from 'date-fns';
import {useRouter} from 'next/router';
import {useEffect, useState} from 'react';
const noop = () => {};
@crisu83
crisu83 / modal-example.tsx
Last active December 10, 2020 11:54
React Portal implementation
import React from 'react';
import {Button} from '@/design-system';
import {useModal} from './modal';
export default function ModalExample() {
const {Modal, closePortal, openPortal} = useModal();
return (
<>
<Button onClick={openPortal}>Open modal</Button>
<Modal>
@crisu83
crisu83 / graphql.ts
Created December 8, 2020 18:58
GraphQL Next.js API route with `@graphql-tools` schema stitching
import {isProduction} from '@/utils';
import {Executor} from '@graphql-tools/delegate';
import {makeExecutableSchema} from '@graphql-tools/schema';
import {stitchSchemas} from '@graphql-tools/stitch';
import {introspectSchema, wrapSchema} from '@graphql-tools/wrap';
import {graphqlHTTP} from 'express-graphql';
import {GraphQLSchema, print} from 'graphql';
import fetch from 'isomorphic-unfetch';
import {NextApiRequest, NextApiResponse} from 'next';
import getConfig from 'next/config';
module.exports = {
extends: ['./node_modules/gts'],
overrides: [
{
extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended'],
files: ['*.ts', '*.tsx'],
rules: {
'@typescript-eslint/no-explicit-any': 'off',
'react-hooks/exhaustive-deps': 'warn',
'react-hooks/rules-of-hooks': 'error',
@crisu83
crisu83 / generate-favicons.ts
Created December 8, 2020 09:31
Script for generating favicons from an image file.
// eslint-disable-next-line node/no-unpublished-import
import favicons from 'favicons';
import fs from 'fs';
const [, , source] = process.argv;
if (!source) {
throw new Error('You need to specify a `source`.');
}