https://github.com/goodrequest/frontend-antdformfields
https://github.com/goodrequest/frontend-antdformfields
antd frontend reactjs storybook web-utils
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/goodrequest/frontend-antdformfields
- Owner: GoodRequest
- Created: 2022-05-23T12:17:16.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-06-01T11:39:53.000Z (almost 3 years ago)
- Last Synced: 2025-05-17T21:07:55.047Z (10 months ago)
- Topics: antd, frontend, reactjs, storybook, web-utils
- Language: TypeScript
- Homepage:
- Size: 5.47 MB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# antd-form-fields
From this package you can import all basic form fields components and also wrappers for regression testing using cypress framework.
## Implementation
First you need to install the module as dev dependency into your project.
```sh
npm install --save-dev GoodRequest/antd-form-fields
```
### Form fileds
This is all types of form fields which module contains
- CheckboxField, CheckboxGroupField, RadioGroupField
- DateField, DateRangeField, DateRangePickerField, TimeField, TimeRangeField
- FileUploadField, ImdUploadField
- InputField, InputMaskedField, InputNumberField, InputPasswordField, TextareaField
- SwitchField, ToggleField
- SelectField
##### Usage
Import form field in component where you want to use it.
```
import { InputField } from 'antd-form-fields'
```
### Cypress commands
| Type | Selector |
| ------ | ------ |
| API Authentication with access and refresh token | cy.apiAuth() |
| InputField | cy.setInputValue() |
| SelectField | cy.selectOptionDropdown(), cy.clearDropdownSelection() |
| SelectField with search | cy.setSearchBoxValueAndSelectFirstOption() |
| FileUploadField, ImdUploadField | cy.uploadFile() |
| Button | cy.clickButton () |
| DeleteButton | cy.clickDeleteButtonWithConf() |
| Check success toast message | cy.checkSuccessToastMessage() |
| CheckboxField, CheckboxGroupField, RadioGroupField | cy.checkFirstCheckBox() |
##### Usage
If you want to use form fields selector for cypress tests you need import package and initialize method to `cypress/support/commands.ts` file
```
import 'antd-form-fields'
import initializeCustomCommands from 'antd-form-fields/dist/commands/cypressCommands'
initializeCustomCommands()
```
## Development
storybook needs as a dependency react and react dom.
npm run set-local-development
dont forgot to unset after you done
npm run unset-local-development
Run storybook to check form fields.
```sh
npm run storybook
```
#### Building for source
For production release:
```sh
npm run build
```
### Tailwind-styles
Tailwind styles are set though variables in consumer (+ only in form), which is why they will not be applied in storybook.