Skip to content

Instantly share code, notes, and snippets.

Avatar
💯
Going deep with design systems

Ryosuke whoisryosuke

💯
Going deep with design systems
View GitHub Profile
@whoisryosuke
whoisryosuke / store-catalog-types.ts
Last active Apr 15, 2021
Typescript - Types for Store Catalog data from MGMT Search API endpoint
View store-catalog-types.ts
export type StoreCatalogSKU = {
chargeImmediatelyFlag: boolean;
displayPrice: string;
eligibilities: any[];
entitlements: any[];
id: string;
name: string;
price: number;
rewards: any[];
storeFronts: string[];
@whoisryosuke
whoisryosuke / useMedia.jsx
Created Apr 15, 2021 — forked from cassidoo/useMedia.jsx
An example of checking on a media query with React Hooks
View useMedia.jsx
function useMedia(query) {
const [matches, setMatches] = useState(window.matchMedia(query).matches)
useEffect(() => {
const media = window.matchMedia(query)
if (media.matches !== matches) {
setMatches(media.matches)
}
const listener = () => {
setMatches(media.matches)
@whoisryosuke
whoisryosuke / shallow-equal.ts
Created Apr 9, 2021
JS - Shallow Equal -- If you're using React Redux, you can also `import { shallowEqual } from "react-redux";`.
View shallow-equal.ts
type CompareObject = { [key: string]: any };
export default function shallowEqual(objA: CompareObject, objB: CompareObject) {
if (objA === objB) {
return true;
}
if (!objA || !objB) {
return false;
}
@whoisryosuke
whoisryosuke / useAnimation.tsx
Created Apr 6, 2021
AFrame / React / AnimeJS - useAnimation hook for animating A-Frame's Entities. Uses the ThreeJS Object3D properties for performance.
View useAnimation.tsx
import React, { useLayoutEffect, useRef } from "react";
export type VectorCoordinate = {
x: number;
y: number;
z: number;
};
export type useAnimationProps = {
from: {
[key: string]: VectorCoordinate | number | string;
@whoisryosuke
whoisryosuke / docgen.js
Created Mar 24, 2021
React / NodeJS - Generate React documentation inside MDX files using react-docgen-typescript. Setup for Docusaurus. Run using `node docgen.js`.
View docgen.js
const docgen = require('react-docgen-typescript');
const fs = require('fs');
const path = require('path');
const DOCGEN_OPTIONS = {
savePropValueAsString: true,
};
const IGNORE_PATHS = [
'docs',
@whoisryosuke
whoisryosuke / find-by-query-param.js
Created Mar 11, 2021
MongoDB - How to filter a nested object by query params (e.g. metadata object that has different parameters like page)
View find-by-query-param.js
export default async function(req: NextApiRequest, res: NextApiResponse) {
const {
query
} = req
const { db } = await connect()
// Finds all posts where the `metadata` property is an object
// and contains properties like `category`.
const posts: Posts[] = await db
@whoisryosuke
whoisryosuke / package.json
Created Mar 11, 2021
Babel/Typescript/NPM - How to build CJS, ESM, and Types using Babel and Typescript
View package.json
"scripts": {
"build": "concurrently yarn:build:*",
"build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps",
"build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps",
"build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
"dev": "tsc --watch"
},
@whoisryosuke
whoisryosuke / clean-node-modules.js
Created Mar 11, 2021 — forked from bcinarli/clean-node-modules.js
Cleaning node modules, dist and build files in monorepo
View clean-node-modules.js
const fs = require('fs');
const { rm } = require('./utils/file-actions');
const cwd = process.cwd();
const rm = (path) => {
if (fs.existsSync(path)){
exec(`rm -r ${ path }`, (err) => {
if (err) {
console.log(err);
View build.sh
tsc -p tsconfig.json && tsc -p tsconfig-cjs.json
@whoisryosuke
whoisryosuke / Dockerfile
Created Mar 10, 2021
Docker - Deploy static projects - This deploys the contents of the public folder (in same directory as Dockerfile) into the root of the nginx container. This is served at localhost:80
View Dockerfile
FROM nginx:alpine
COPY ./public /usr/share/nginx/html