Skip to content

Instantly share code, notes, and snippets.

View dohomi's full-sized avatar
🎯
Focusing

Dominic Garms dohomi

🎯
Focusing
View GitHub Profile
@dohomi
dohomi / PhoneNumberField.tsx
Last active January 6, 2023 04:30
phone number field with react-hook-form and Material-UI
import { RegisterOptions, useController } from 'react-hook-form'
import { TextField, TextFieldProps } from '@material-ui/core'
import { forwardRef, useEffect, useRef } from 'react'
import PhoneInput from 'react-phone-number-input/input-mobile'
import useLmTranslation from '../../../lib/hooks/useLmTranslation'
type LmTextFieldFormProps = TextFieldProps & {
name: `${string}.${string}` | `${string}.${number}` | `${string}`
rules?: Exclude<
RegisterOptions,
@dohomi
dohomi / tamagui-build-mdi-icons.js
Created October 2, 2022 02:00
build script for mdi-icons
const fs = require('fs')
const uppercamelcase = require('uppercamelcase')
const path = require('path')
const prettier = require('prettier')
const util = require('@mdi/util')
const meta = util.getMeta(true);
const rootDir = path.join(__dirname, '..')
fs.writeFileSync(path.join(rootDir, 'src', 'index.ts'), '', 'utf-8')
@dohomi
dohomi / generate-ts.js
Last active September 12, 2022 17:41
Storyblok typescript generator based on components.*.json file
/**
Adjust SPACE_ID to point to your components.*.json file.
Then run the script with `node generate-ts.js`
*/
// adjust path to a different location/name
const pathToTsFile = 'src/typings/generated/components-schema.d.ts'
// adjust space id of the components filename
@dohomi
dohomi / app.vue
Last active August 21, 2021 19:55
Small file input element based on vuetify
<template>
<file-input v-model="filename" @formData="formData">
<v-btn @click.native="uploadFiles">
</template>
<script>
import fileInput from './file-input.vue'
export default{
components:{fileInput}
@dohomi
dohomi / FileUpload.tsx
Last active August 5, 2021 08:31
File Upload with firebase and React as a hook and example use with useDropzone
// example usage with useDropzone
const FileUpload:FC = ({onUploaded}) => {
const [user] = useUser()
const [uploadFiles, { error, loading }] = useUploadFiles()
const onDrop = useCallback(
async (acceptedFiles: File[], rejections?: FileRejection[]) => {
if (rejections?.length) {
console.error(rejections)
} else {
@dohomi
dohomi / ExampleUse.tsx
Created March 30, 2021 00:58
Native Select with render prop Material-UI v5
const LmCountrySelector: FC<CountrySelectProps> = ({
options,
onChange,
onBlur,
onFocus,
...rest
}) => {
const mappedOptions = useMemo(() => {
return options
.map((item) => {
@dohomi
dohomi / component.vue
Last active February 23, 2021 10:16
combine Nuxt asyncData with vue-apollo and watchQuery for client search
<script>
import allTravelsGql from '../../GQL/travel/allTravels.gql'
import {pagination, getSkipFirst} from '../../../generated-cms/util/pagination'
import {getTravelQuery, setCategoryOnQuery} from '../../util/getTravelQuery'
const buildQuery = variables => {
return {
query: allTravelsGql,
variables,
manual: true,
@dohomi
dohomi / MuiRichTextEditor.tsx
Created June 28, 2020 23:53
Rich Text editor based on mui-rte which exposes innerHTML and innerTEXT
import MUIRichTextEditor from 'mui-rte'
import React from 'react'
import { stateToHTML } from 'draft-js-export-html'
import { TMUIRichTextEditorProps } from 'mui-rte/src/MUIRichTextEditor'
type CallbackProps = {
data: string
html: string
text: string
editorState: any
const {compile} = require('json-schema-to-typescript')
const fs = require('fs')
const ComponentsJson = require('./components.XXX') // point to your components.json file
const {customTypeParser} = require('./generate-ts-schema-custom-types') // custom components parser for own plugins
let tsString = []
async function genTsSchema () {
for (const values of ComponentsJson.components) {
const obj = {}
@dohomi
dohomi / apollo-config.js
Last active November 26, 2019 16:16
vue-apollo config for any VueJS project
import Vue from 'vue'
import VueApollo from 'vue-apollo'
import {createApolloClient, restartWebsockets} from 'vue-cli-plugin-apollo/graphql-client'
// Install the vue plugin
Vue.use(VueApollo)
// Name of the localStorage item
const AUTH_TOKEN = 'apollo-token'
const IMAP_TOKEN = 'apollo-imap-token'