Browse Source

removed unused package

pull/3/head landing-blocks_1.0.28
remorses 1 year ago
parent
commit
676896e169
16 changed files with 3 additions and 2419 deletions
  1. +0
    -4
      chakra-ui-forms/.storybook/main.js
  2. +0
    -11
      chakra-ui-forms/README.md
  3. +0
    -1
      chakra-ui-forms/VERSION
  4. +0
    -65
      chakra-ui-forms/package.json
  5. +0
    -104
      chakra-ui-forms/src/CardOptions.tsx
  6. +0
    -311
      chakra-ui-forms/src/index.tsx
  7. +0
    -124
      chakra-ui-forms/src/react-select.tsx
  8. +0
    -21
      chakra-ui-forms/stories/Button.tsx
  9. +0
    -131
      chakra-ui-forms/stories/CardOptions.tsx
  10. +0
    -152
      chakra-ui-forms/stories/Forms.tsx
  11. +0
    -5
      chakra-ui-forms/tests/init.js
  12. +0
    -5
      chakra-ui-forms/tests/simple.ts
  13. +0
    -27
      chakra-ui-forms/tsconfig.json
  14. +0
    -1455
      chakra-ui-forms/yarn.lock
  15. +2
    -2
      landing-blocks/src/PatternBackground.tsx
  16. +1
    -1
      landing-blocks/src/layout.tsx

+ 0
- 4
chakra-ui-forms/.storybook/main.js View File

@ -1,4 +0,0 @@
module.exports = {
stories: ['../stories/**'],
addons: ['@storybook/preset-typescript', '@storybook/addon-actions', '@storybook/addon-links'],
};

+ 0
- 11
chakra-ui-forms/README.md View File

@ -1,11 +0,0 @@
components
- `TextInput`
- `NumberInput`
- `Select`
- `CardOptions`
- `Checkbox` // TODO
- `CheckboxGroup` // TODO
- `Options` // TODO
- `CodeEditor`
- `Slider` // TODO

+ 0
- 1
chakra-ui-forms/VERSION View File

@ -1 +0,0 @@
0.0.2

+ 0
- 65
chakra-ui-forms/package.json View File

@ -1,65 +0,0 @@
{
"name": "chakra-ui-forms",
"_": "[bump]",
"version": "0.0.1",
"description": "",
"main": "dist/index.js",
"module": "esm/index.js",
"types": "dist/index.d.ts",
"sideEffects": false,
"mocha": {
"require": "tests/init.js",
"spec": "tests/**.ts",
"timeout": 9999999999
},
"files": [
"/dist/*",
"/esm/*"
],
"scripts": {
"build": "tsc && tsc --module ESNext --outDir esm",
"test": "NODE_ENV=test mocha --colors --exit",
"example": "parcel serve --no-autoinstall example/index.html",
"compile": "sucrase -q ./src -d ./dist --transforms typescript,imports",
"dev": "yarn compile && node dist",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"keywords": [],
"author": "Tommaso De Rossi, morse <beats.by.morse@gmail.com>",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.9.0",
"@storybook/addon-actions": "^5.3.17",
"@storybook/addon-links": "^5.3.17",
"@storybook/addons": "^5.3.17",
"@storybook/preset-typescript": "^3.0.0",
"@storybook/react": "^5.3.17",
"@types/mocha": "^5.2.7",
"@types/node": "^12.0.7",
"@types/react": "^16.9.25",
"babel-loader": "^8.1.0",
"dotenv": "^8.2.0",
"final-form": "^4.18.7",
"fork-ts-checker-webpack-plugin": "^4.1.2",
"mocha": "^6.1.4",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-final-form": "^6.3.5",
"react-icons": "^3.9.0",
"react-select": "^3.1.0",
"sucrase": "^3.12.1",
"ts-loader": "^6.2.2",
"typescript": "^3.8.3"
},
"dependencies": {
"@chakra-ui/core": "^0.6.1",
"@emotion/core": "^10.0.28",
"@emotion/styled": "^10.0.27",
"@types/lodash.get": "^4.4.6",
"emotion-theming": "^10.0.27",
"lodash.get": "^4.4.2",
"prismjs": "^1.19.0",
"react-spring": "^8.0.27"
}
}

+ 0
- 104
chakra-ui-forms/src/CardOptions.tsx View File

@ -1,104 +0,0 @@
import React, { FC, useContext, useEffect, Props } from 'react'
import styled from '@emotion/styled'
import {
Box,
FlexProps,
Stack,
Text,
Flex,
Button,
StackProps,
BoxProps,
ButtonProps,
} from '@chakra-ui/core'
import { useField, FieldProps, FieldInputProps } from 'react-final-form'
export interface CardOptionsOption {
isDisabled?: boolean
label?: string
sublabel?: any
disabled?: boolean
value: any
icon?: any
}
function addDefaults(x: CardOptionsOption) {
const newoption = { ...x }
if (!x.label) {
newoption.label = x.value
}
return newoption
}
function Option(
props: {
option: CardOptionsOption
input: FieldInputProps<string>
} & Omit<ButtonProps, 'children'>,
) {
let { option, input, ...rest } = props
option = addDefaults(option)
const onClick = () => {
input.onChange(option.value)
}
const selected = input.value === option.value
return (
<Button
border={selected ? '2px solid' : 'none'}
borderColor={selected ? 'gray.400' : 'gray.200'}
height='auto'
variant='outline'
onClick={onClick}
p='20px'
flex='1'
minW='100px'
d='flex'
flexDir='column'
justifyContent='flex-start'
alignItems='center'
// wordBreak='break-word'
whiteSpace='normal'
{...rest}
>
<Stack
minH='100%'
align='center'
justify='flex-start'
spacing='10px'
// fontWeight='normal'
>
<Flex fontSize='32px' w='100%' align='center' justify='center'>
{option.icon}
</Flex>
<Text>{option.label}</Text>
<Text opacity={0.6} fontSize='14px'>
{option.sublabel}
</Text>
<Box flex='1' />
</Stack>
</Button>
)
}
export function CardOptions({
name,
options,
defaultValue = null,
...rest
}: {
name: string
defaultValue?: string
options: CardOptionsOption[]
} & StackProps) {
const {
meta: { invalid },
input,
} = useField(name, { initialValue: defaultValue })
return (
<Stack spacing='20px' direction='row' {...rest}>
{options.map((option) => (
<Option key={option.value} option={option} input={input} />
))}
</Stack>
)
}

+ 0
- 311
chakra-ui-forms/src/index.tsx View File

@ -1,311 +0,0 @@
import React, { useEffect, cloneElement } from 'react'
import * as c from '@chakra-ui/core'
import { Form, Field, useField, useForm } from 'react-final-form'
import Editor from 'react-simple-code-editor'
import { highlight, languages } from 'prismjs/components/prism-core'
import 'prismjs/components/prism-clike'
import 'prismjs/components/prism-yaml'
import 'prismjs/themes/prism.css'
import { FieldValidator } from 'final-form'
import { FormControlProps } from '@chakra-ui/core'
export interface BaseProps {
name?: string
validate?: FieldValidator<any>
}
export function TextArea({
name,
validate = undefined,
defaultValue,
...rest
}: BaseProps & c.InputProps<HTMLTextAreaElement>) {
const { input, meta } = useField(name, {
initialValue: defaultValue,
validate,
parse: (x) => x,
})
return (
<c.Textarea
{...input}
{...rest}
isInvalid={meta.error && meta.touched}
/>
)
}
export function CodeEditor({
name,
language = 'yaml',
validate = undefined,
defaultValue,
...rest
}: {
language?: string
defaultValue
} & BaseProps &
c.BoxProps) {
const { input, meta } = useField(name, {
defaultValue: defaultValue,
type: 'string',
validate,
parse: (x) => x,
})
const { colorMode } = c.useColorMode()
return (
<c.Box
border='1px solid'
borderColor={{ light: 'gray.300', dark: 'gray.700' }[colorMode]}
// bg={{ light: 'white', dark: 'black.900' }[colorMode]}
borderRadius='4px'
{...rest}
>
<Editor
value={(input.value as string) || ''}
onValueChange={(x) => input.onChange(x || '')}
highlight={(code) => highlight(code, languages[language])}
padding={10}
style={{
fontFamily: '"Fira code", "Fira Mono", monospace',
fontSize: 14,
// background: 'black'
}}
/>
</c.Box>
)
}
export function TextInput({
name,
validate,
...rest
}: BaseProps & c.InputProps) {
const { input, meta } = useField(name, {
initialValue: rest.defaultValue,
validate,
parse: (x) => x,
})
return (
<c.Input {...input} {...rest} isInvalid={meta.error && meta.touched} />
)
}
export function Switch({ name, validate, ...rest }: BaseProps & c.SwitchProps) {
const { input, meta } = useField(name, {
initialValue: rest.defaultValue,
validate,
type: 'option',
parse: (x) => x,
})
return <c.Switch d='block' {...input} {...rest} />
}
export function Slider({ name, validate, ...rest }: BaseProps & c.SliderProps) {
const { input, meta } = useField(name, {
initialValue: rest.defaultValue,
validate,
parse: (x) => x,
})
return (
<c.Slider {...input} {...rest}>
<c.SliderTrack />
<c.SliderFilledTrack />
<c.SliderThumb size='18px'>
<c.Box
shadow='lg'
w='100%'
h='100%'
border='1px solid'
borderColor='gray.300'
borderRadius='100%'
/>
</c.SliderThumb>
</c.Slider>
)
}
export const NumberInput = ({
name,
validate,
...rest
}: BaseProps & c.NumberInputProps) => {
const { input, meta } = useField(name, {
initialValue: rest.defaultValue,
validate,
parse: (x) => x,
})
return (
<c.NumberInput
{...input}
{...rest}
isInvalid={meta.error && meta.touched}
/>
)
}
export const SingleCheckbox = ({
name,
label = '',
...rest
}: BaseProps & { label?: string } & Omit<c.CheckboxProps, 'children'>) => {
const {
input: { checked, ...input },
meta: { error, touched, invalid },
} = useField(name, {
type: 'checkbox', // important for RFF to manage the checked prop
})
return (
<c.Box>
<c.Checkbox {...input} {...rest}>
{label}
</c.Checkbox>
</c.Box>
)
}
const CheckboxArray = ({ name, value, label, ...rest }) => {
const {
input: { checked, ...input },
meta: { error, touched },
} = useField(name, {
type: 'checkbox', // important for RFF to manage the checked prop
value, // important for RFF to manage list of strings
})
return (
<c.Checkbox
{...input}
isChecked={checked}
isInvalid={error && touched}
{...rest}
>
{label}
</c.Checkbox>
)
}
export const CheckboxGroup = ({
items,
name,
...rest
}: Omit<c.StackProps, 'name'> & { items } & BaseProps) => {
return (
<c.Stack spacing='10px' {...rest}>
{items.map(({ value, label }) => (
<CheckboxArray
value={value}
name={name}
key={label || value}
label={label || value}
/>
))}
</c.Stack>
)
}
export const RadioGroup = ({ label, name, children }) => {
const { input, meta } = useField(name)
return (
<c.FormControl isInvalid={meta.touched && meta.invalid} my={4}>
<c.FormLabel htmlFor={input.name}>{label}</c.FormLabel>
<c.RadioGroup {...input}>{children}</c.RadioGroup>
<c.FormErrorMessage>{meta.error}</c.FormErrorMessage>
</c.FormControl>
)
}
const Control = ({ name, ...rest }: { name } & FormControlProps) => {
const {
meta: { error, touched },
} = useField(name, { subscription: { touched: true, error: true } })
return <c.FormControl {...rest} isInvalid={error && touched} />
}
export interface Item {
value: string
label?: string
disabled?: boolean
}
export const Select = ({
name,
items,
...rest
}: { items: Item[] } & c.SelectProps & BaseProps) => {
const {
input,
meta: { error, touched },
} = useField(name, {
initialValue: rest.defaultValue,
})
// useEffect(() => {
// items.length && input.onChange(items[1]?.value)
// }, [items.length])
return (
<c.Select {...input} isInvalid={touched && error} {...rest}>
{items.map(({ value, label, disabled }) => (
<option key={value} disabled={disabled || false} value={value}>
{label || value}
</option>
))}
</c.Select>
)
}
export const ValidationError = ({ name, ...rest }) => {
const {
meta: { error, touched },
} = useField(name, { subscription: { error: true, touched: true } })
return (
<>
{touched && error && (
<c.Text color='red.500' {...rest}>
{error}
</c.Text>
)}
</>
)
}
export function Labelled({
name,
label,
sublabel,
field,
...rest
}: {
name
label?: string
sublabel?: string
field: React.ReactElement
} & c.FormControlProps) {
return (
<Control p='0' m='0' name={name} {...rest}>
<c.Stack spacing='2px'>
<c.FormLabel m='0' htmlFor={name}>
{label}
</c.FormLabel>
<c.FormLabel m='0' opacity={0.6}>
{sublabel}
</c.FormLabel>
{cloneElement(field, { name })}
<ValidationError name={name} />
</c.Stack>
</Control>
)
}
export const PercentComplete = (props) => {
const form = useForm()
const numFields = form.getRegisteredFields().length
const numErrors = Object.keys(form.getState().errors).length
return (
<c.Progress
borderRadius='4px'
value={
numFields === 0
? 0
: ((numFields - numErrors) / numFields) * 100
}
{...props}
/>
)
}

+ 0
- 124
chakra-ui-forms/src/react-select.tsx View File

@ -1,124 +0,0 @@
import React, { ComponentProps, useEffect } from 'react'
import { default as S } from 'react-select'
import { useField } from 'react-final-form'
import Color from 'color-js'
type Props = { name: string } & ComponentProps<typeof S>
export type SelectOptionType = { value: string; label: string }
export type SelectOptionTypeWithColor = SelectOptionType & { color }
const colourStyles = {
control: (styles) => ({ ...styles, backgroundColor: 'white' }),
option: (styles, { data, isDisabled, isFocused, isSelected }) => {
if (!data.color) {
return styles
}
const color = Color(data.color)
return {
...styles,
backgroundColor: isDisabled
? null
: isSelected
? data.color
: isFocused
? color.setAlpha(0.1).toCSS()
: null,
color: isDisabled
? '#ccc'
: isSelected
? color.getLightness() < 0.5
? 'white'
: 'black'
: data.color,
cursor: isDisabled ? 'not-allowed' : 'default',
':active': {
...styles[':active'],
backgroundColor:
!isDisabled &&
(isSelected ? data.color : color.setAlpha(0.3).toCSS()),
},
}
},
multiValue: (styles, { data }) => {
if (!data.color) {
return styles
}
const color = Color(data.color)
return {
...styles,
backgroundColor: color.setAlpha(0.7).toCSS(),
}
},
multiValueLabel: (styles, { data }) => {
if (!data.color) {
return styles
}
return {
...styles,
color: 'black',
}
},
multiValueRemove: (styles, { data }) => {
if (!data.color) {
return styles
}
return {
...styles,
color: 'black',
':hover': {
backgroundColor: 'rgba(0,0,0,.2)',
color: 'black',
},
}
},
}
export const Select = ({ name, defaultValue = undefined, ...rest }: Props) => {
const parse = (value) => {
// console.log({ parse: value })
if (!value) {
return value
}
if (Array.isArray(value)) {
return value.map((x) => x.value)
}
return value.value
}
const format = (value) => {
// console.log({ format: value })
const options = rest.options || []
if (Array.isArray(value)) {
return value.map(format)
}
if (value) {
return {
value,
...options.find((x) => x.value === value),
}
}
return value
}
if (!defaultValue) {
defaultValue = undefined
}
if (rest.isMulti && defaultValue && !defaultValue.length) {
defaultValue = undefined
}
const { input, meta } = useField(name, {
parse,
initialValue: defaultValue,
format,
})
return (
<S
styles={colourStyles}
isSearchable={false}
isClearable={false}
{...rest}
{...input}
/>
)
}

+ 0
- 21
chakra-ui-forms/stories/Button.tsx View File

@ -1,21 +0,0 @@
process.env.TESTING = 'true'
import React from 'react'
import { action } from '@storybook/addon-actions'
import { Button } from '@storybook/react/demo'
export default {
title: 'Button',
component: Button,
}
export const Text = () => (
<Button onClick={action('clicked')}>Hello Button</Button>
)
export const Emoji = () => (
<Button onClick={action('clicked')}>
<span role='img' aria-label='so cool'>
😀 😎 👍 💯
</span>
</Button>
)

+ 0
- 131
chakra-ui-forms/stories/CardOptions.tsx View File

@ -1,131 +0,0 @@
import React from 'react'
import { FiAirplay, FiAlertOctagon, FiAnchor } from 'react-icons/fi'
import { CardOptions } from '../src/CardOptions'
import { Form } from 'react-final-form'
import {
ThemeProvider,
CSSReset,
Box,
ColorModeProvider,
} from '@chakra-ui/core'
export default {
title: 'CardOptions',
component: CardOptions,
decorators: [
(storyFn) => (
<ThemeProvider>
<Box maxW='600px' p='30px' border='1px solid red'>
<CSSReset />
<Form onSubmit={() => null}>
{({ values }) => (
<Box>
{storyFn()}
<Box mt='100px' as='pre'>
{JSON.stringify(values, null, 4)}
</Box>
</Box>
)}
</Form>
</Box>
</ThemeProvider>
),
],
}
export const Default = () => (
<CardOptions
options={[{ value: 'x' }, { value: 'y' }, { value: 'z' }]}
name='sdf'
/>
)
export const WithLabels = () => (
<CardOptions
options={[
{ value: 'x', label: 'The x option is the first' },
{ value: 'y', label: 'The y option' },
{ value: 'z', label: 'The Z makes sleep' },
]}
name='sdf'
/>
)
export const WithSubLabels = () => (
<CardOptions
options={[
{
value: 'x',
label: 'The x option is the first',
sublabel: 'Sublabels add text no one reads',
},
{
value: 'y',
label: 'The y option',
sublabel: 'maybe true',
},
{
value: 'z',
label: 'The Z makes sleep',
sublabel: 'Sublabels add text no one reads',
},
]}
name='sdf'
/>
)
export const WithIcons = () => (
<CardOptions
options={[
{
icon: <FiAirplay />,
value: 'x',
label: 'The x option is the first',
sublabel: 'Sublabels add text no one reads',
},
{
icon: <FiAlertOctagon />,
value: 'y',
label: 'The y option',
sublabel: 'maybe true',
},
{
icon: <FiAnchor />,
value: 'z',
label: 'The Z makes sleep',
sublabel: 'Sublabels add text no one reads',
},
]}
name='sdf'
/>
)
export const DarkMode = () => (
<ColorModeProvider value='dark'>
<Box bg='black' m='-30px' p='20px'>
<CardOptions
options={[
{
icon: <FiAirplay />,
value: 'x',
label: 'The x option is the first',
sublabel: 'Sublabels add text no one reads',
},
{
icon: <FiAlertOctagon />,
value: 'y',
label: 'The y option',
sublabel: 'maybe true',
},
{
icon: <FiAnchor />,
value: 'z',
label: 'The Z makes sleep',
sublabel: 'Sublabels add text no one reads',
},
]}
name='sdf'
/>
</Box>
</ColorModeProvider>
)

+ 0
- 152
chakra-ui-forms/stories/Forms.tsx View File

@ -1,152 +0,0 @@
import { FiAirplay, FiAlertOctagon, FiAnchor } from 'react-icons/fi'
import React from 'react'
import {
TextInput,
CheckboxGroup,
TextArea,
Labelled,
Select,
Slider,
Switch,
SingleCheckbox,
} from '../src'
import { Form, useFormState, useField } from 'react-final-form'
import {
ThemeProvider,
CSSReset,
Box,
Stack,
useColorMode,
Button,
ColorModeProvider,
} from '@chakra-ui/core'
import { CardOptions } from '../src/CardOptions'
export default {
title: 'Forms',
component: TextInput,
}
const DarkModeSwitch = (props) => {
const { toggleColorMode, colorMode } = useColorMode()
// return <Button onClick={toggleColorMode} children='asdfasdf' />
const {
values: { dark },
} = useFormState()
if (dark && colorMode !== 'dark') {
toggleColorMode()
}
return (
<Labelled
name='dark'
label='dark mode'
field={<Switch onChange={toggleColorMode} />}
{...props}
/>
)
}
export const All = () => {
return (
<ThemeProvider>
<ColorModeProvider>
<CSSReset />
<Form
onSubmit={(x) => console.log(JSON.stringify(x, null, 4))}
validate={() => ({ input: 'error' })}
render={({ values }) => (
<Stack p='40px' maxWidth='700px' spacing='40px'>
<DarkModeSwitch />
<Labelled
name='input'
sublabel='description of input'
field={<TextInput />}
label='Label'
/>
<Labelled
name='checkbox'
field={<SingleCheckbox label='single one' />}
label='checkbox'
/>
<Labelled
name='checkboxgroup'
label='textArea'
field={
<CheckboxGroup
items={[
{ value: 'cosa' },
{ value: 'altro' },
]}
/>
}
/>
<Labelled
name='area'
field={<TextArea />}
label='labell'
/>
<Labelled
name='select'
label='select an option'
field={
<Select
items={[{ value: '1' }, { value: '2' }]}
isRequired
/>
}
/>
<Labelled
name='slider'
label='select an option'
field={<Slider max={10} name='slide' />}
/>
<Labelled
name='switch'
label='switch this'
field={<Switch />}
/>
<Labelled
name='cards'
label='Select your card'
sublabel='with high attention'
field={
<CardOptions
options={[
{
icon: <FiAirplay />,
value: 'x',
label:
'The x option is the first',
sublabel:
'Sublabels add text no one reads',
},
{
icon: <FiAlertOctagon />,
value: 'y',
label: 'The y option',
sublabel: 'maybe true',
},
{
icon: <FiAnchor />,
value: 'z',
label: 'The Z makes sleep',
sublabel:
'Sublabels add text no one reads',
},
]}
name='sdf'
/>
}
/>
<Box>
<pre>{JSON.stringify(values, null, 4)}</pre>
</Box>
</Stack>
)}
/>
</ColorModeProvider>
</ThemeProvider>
)
}

+ 0
- 5
chakra-ui-forms/tests/init.js View File

@ -1,5 +0,0 @@
const { config } = require('dotenv')
config({ path: 'test.env', })
// require('ts-node/register')
require('sucrase/register')

+ 0
- 5
chakra-ui-forms/tests/simple.ts View File

@ -1,5 +0,0 @@
import { strict as assert } from 'assert'
it('ready', () => {
assert.ok(true)
})

+ 0
- 27
chakra-ui-forms/tsconfig.json View File

@ -1,27 +0,0 @@
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "Node",
"lib": [
"es2017",
"es7",
"es6",
"DOM"
],
"declaration": true,
"outDir": "dist",
"strict": false,
"esModuleInterop": true,
"noImplicitAny": false,
"skipLibCheck": true,
"jsx": "react",
},
"exclude": [
"node_modules",
"dist",
"esm",
"_",
"tests",
]
}

+ 0
- 1455
chakra-ui-forms/yarn.lock
File diff suppressed because it is too large
View File


+ 2
- 2
landing-blocks/src/PatternBackground.tsx View File

@ -50,8 +50,8 @@ export function PatternBackground({
children,
...props
}: PatternBackgroundProps) {
const { colorMode } = useColorMode()
const dark = colorMode === 'dark'
// const { colorMode } = useColorMode()
// const dark = colorMode === 'dark'
return (
<Box

+ 1
- 1
landing-blocks/src/layout.tsx View File

@ -59,7 +59,7 @@ export type PageContainerProps = {
pageWidth?: string
} & StackProps
export const PageContainer: FC<PageContainerProps> = forwardRef(
export const PageContainer: FC<PageContainerProps> = forwardRef( // TODO rename to SectionContainer
(
{
children,

Loading…
Cancel
Save