From 34d154b4dd22e06e59fbb509a3163a284ef65ee2 Mon Sep 17 00:00:00 2001 From: Michael Schramm Date: Sat, 30 May 2020 11:56:48 +0200 Subject: [PATCH] add license and more frontend field types --- LICENSE.md | 21 + assets/global.scss | 9 + components/form/admin/design.tab.tsx | 1 + components/form/admin/end.page.tab.tsx | 12 +- components/form/admin/field.card.tsx | 28 +- components/form/admin/fields.tab.tsx | 5 +- components/form/{ => admin}/is.live.tsx | 0 components/form/admin/start.page.tab.tsx | 12 +- components/form/admin/types/date.type.tsx | 19 +- components/form/admin/types/dropdown.type.tsx | 7 +- components/form/admin/types/email.type.tsx | 7 +- components/form/admin/types/hidden.type.tsx | 7 +- components/form/admin/types/index.ts | 29 + components/form/admin/types/link.type.tsx | 7 +- components/form/admin/types/number.type.tsx | 7 +- components/form/admin/types/radio.type.tsx | 7 +- components/form/admin/types/rating.type.tsx | 8 +- components/form/admin/types/text.type.tsx | 7 +- components/form/admin/types/textarea.type.tsx | 7 +- components/form/admin/types/type.props.ts | 3 + components/form/admin/types/yes_no.type.tsx | 7 +- components/form/field.tsx | 88 + components/form/page.tsx | 70 + components/form/types/date.type.tsx | 22 + components/form/types/dropdown.type.tsx | 21 + components/form/types/email.type.tsx | 21 + components/form/types/hidden.type.tsx | 20 + components/form/types/index.ts | 29 + components/form/types/link.type.tsx | 21 + components/form/types/number.type.tsx | 21 + components/form/types/radio.type.tsx | 22 + components/form/types/rating.type.tsx | 22 + components/form/types/text.type.tsx | 28 + components/form/types/textarea.type.tsx | 20 + components/form/types/type.props.ts | 6 + components/form/types/yes_no.type.tsx | 21 + components/styled/button.tsx | 29 + components/styled/color.change.ts | 35 + components/styled/h1.tsx | 18 + components/styled/h2.tsx | 18 + components/styled/input.tsx | 57 + components/styled/p.tsx | 18 + graphql/fragment/admin.user.fragment.ts | 0 graphql/fragment/form.fragment.ts | 109 + graphql/query/form.query.ts | 20 + package.json | 6 +- pages/admin/forms/index.tsx | 2 +- pages/form/[id]/index.module.scss | 3 + pages/form/[id]/index.tsx | 97 +- yarn.lock | 7080 +++++++++++++++++ 50 files changed, 8038 insertions(+), 96 deletions(-) create mode 100644 LICENSE.md rename components/form/{ => admin}/is.live.tsx (100%) create mode 100644 components/form/admin/types/index.ts create mode 100644 components/form/admin/types/type.props.ts create mode 100644 components/form/field.tsx create mode 100644 components/form/page.tsx create mode 100644 components/form/types/date.type.tsx create mode 100644 components/form/types/dropdown.type.tsx create mode 100644 components/form/types/email.type.tsx create mode 100644 components/form/types/hidden.type.tsx create mode 100644 components/form/types/index.ts create mode 100644 components/form/types/link.type.tsx create mode 100644 components/form/types/number.type.tsx create mode 100644 components/form/types/radio.type.tsx create mode 100644 components/form/types/rating.type.tsx create mode 100644 components/form/types/text.type.tsx create mode 100644 components/form/types/textarea.type.tsx create mode 100644 components/form/types/type.props.ts create mode 100644 components/form/types/yes_no.type.tsx create mode 100644 components/styled/button.tsx create mode 100644 components/styled/color.change.ts create mode 100644 components/styled/h1.tsx create mode 100644 components/styled/h2.tsx create mode 100644 components/styled/input.tsx create mode 100644 components/styled/p.tsx create mode 100644 graphql/fragment/admin.user.fragment.ts create mode 100644 graphql/fragment/form.fragment.ts create mode 100644 graphql/query/form.query.ts create mode 100644 pages/form/[id]/index.module.scss create mode 100644 yarn.lock diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..b366c5d --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,21 @@ +## License +(The MIT License) + +Permission is hereby granted, free of charge, to any person obtaining +a copy of this software and associated documentation files (the +'Software'), to deal in the Software without restriction, including +without limitation the rights to use, copy, modify, merge, publish, +distribute, sublicense, and/or sell copies of the Software, and to +permit persons to whom the Software is furnished to do so, subject to +the following conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. +IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY +CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, +TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE +SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/assets/global.scss b/assets/global.scss index 5f2fadd..b97f6d6 100644 --- a/assets/global.scss +++ b/assets/global.scss @@ -1,4 +1,5 @@ @import "variables"; +@import "node_modules/swiper/swiper.scss"; :root { --backgroundColor: #{$background-color}; @@ -26,3 +27,11 @@ .ant-spin-nested-loading > div > .ant-spin { max-height: unset; } + +.swiper-container { + height: 100vh; + + .swiper-wrapper { + position: fixed + } +} diff --git a/components/form/admin/design.tab.tsx b/components/form/admin/design.tab.tsx index 93ac569..e6e2d27 100644 --- a/components/form/admin/design.tab.tsx +++ b/components/form/admin/design.tab.tsx @@ -18,6 +18,7 @@ export const DesignTab: React.FC = props => { {name: 'questionColor', label: 'Question Color'}, {name: 'answerColor', label: 'Answer Color'}, {name: 'buttonColor', label: 'Button Color'}, + {name: 'buttonActiveColor', label: 'Button Active Color'}, {name: 'buttonTextColor', label: 'Button Text Color'}, ].map(({label, name}) => ( diff --git a/components/form/admin/end.page.tab.tsx b/components/form/admin/end.page.tab.tsx index 3e61806..8ba7aee 100644 --- a/components/form/admin/end.page.tab.tsx +++ b/components/form/admin/end.page.tab.tsx @@ -55,7 +55,14 @@ export const EndPageTab: React.FC = props => { remove(index)} /> ]} > - + @@ -67,6 +74,9 @@ export const EndPageTab: React.FC = props => { + + + diff --git a/components/form/admin/field.card.tsx b/components/form/admin/field.card.tsx index fb81039..e7a10b2 100644 --- a/components/form/admin/field.card.tsx +++ b/components/form/admin/field.card.tsx @@ -4,31 +4,8 @@ import {FormInstance} from 'antd/lib/form' import {FieldData} from 'rc-field-form/lib/interface' import React, {useEffect, useState} from 'react' import {AdminFormFieldFragment} from '../../../graphql/fragment/admin.form.fragment' -import {DateType} from './types/date.type' -import {DropdownType} from './types/dropdown.type' -import {EmailType} from './types/email.type' -import {HiddenType} from './types/hidden.type' -import {LinkType} from './types/link.type' -import {NumberType} from './types/number.type' -import {RadioType} from './types/radio.type' -import {RatingType} from './types/rating.type' +import {adminTypes} from './types' import {TextType} from './types/text.type' -import {TextareaType} from './types/textarea.type' -import {YesNoType} from './types/yes_no.type' - -export const availableTypes = { - 'textfield': TextType, - 'date': DateType, - 'email': EmailType, - 'textarea': TextareaType, - 'link': LinkType, - 'dropdown': DropdownType, - 'rating': RatingType, - 'radio': RadioType, - 'hidden': HiddenType, - 'yes_no': YesNoType, - 'number': NumberType, -} interface Props { form: FormInstance @@ -50,7 +27,7 @@ export const FieldCard: React.FC = props => { } = props const type = form.getFieldValue(['form', 'fields', field.name as string, 'type']) - const TypeComponent: React.FC = availableTypes[type] || TextType + const TypeComponent = adminTypes[type] || TextType const [nextTitle, setNextTitle] = useState(form.getFieldValue(['form', 'fields', field.name as string, 'title'])) @@ -120,6 +97,7 @@ export const FieldCard: React.FC = props => { name={[field.name as string, 'required']} labelCol={{ span: 6 }} valuePropName={'checked'} + extra={type === 'hidden' && 'If required, default value must be set to enable users to submit form!'} > diff --git a/components/form/admin/fields.tab.tsx b/components/form/admin/fields.tab.tsx index c218d35..d04670f 100644 --- a/components/form/admin/fields.tab.tsx +++ b/components/form/admin/fields.tab.tsx @@ -4,7 +4,8 @@ import {FormInstance} from 'antd/lib/form' import {TabPaneProps} from 'antd/lib/tabs' import React, {useCallback, useState} from 'react' import {AdminFormFieldFragment} from '../../../graphql/fragment/admin.form.fragment' -import {availableTypes, FieldCard} from './field.card' +import {FieldCard} from './field.card' +import {adminTypes} from './types' interface Props extends TabPaneProps { form: FormInstance @@ -40,7 +41,7 @@ export const FieldsTab: React.FC = props => { }} >