@thoughtbot/candy_wrapper - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

package.json

 {
   "name": "@thoughtbot/candy_wrapper",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Use rails forms with popular react UI libraries",
@@ -15,3 +15,3 @@ "scripts": {
     "fix:prettier": "prettier --write '**/*' --ignore-unknown",
-    "test": "vitest",
+    "test": "TZ=UTC vitest",
     "test:run": "vitest run",
@@ -45,2 +45,4 @@ "test:cov": "vitest --coverage",
   "devDependencies": {
+    "@mantine/core": "^7.15.3",
+    "@mantine/dates": "^7.15.3",
     "@nextui-org/react": "^2.4.8",
@@ -51,2 +53,3 @@ "@react-aria/test-utils": "^1.0.0-alpha.2",
     "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^18.3.12",
     "@typescript-eslint/eslint-plugin": "^7.15.0",
@@ -56,2 +59,3 @@ "@typescript-eslint/parser": "^7.15.0",
     "@vitest/coverage-v8": "^2.0.2",
+    "dayjs": "^1.11.13",
     "eslint": "^8.57.0",
@@ -71,4 +75,3 @@ "eslint-plugin-react": "^7.34.3",
     "typescript": "^5.5.3",
-    "vitest": "^2.0.2",
-    "@types/react": "^18.3.12"
+    "vitest": "^2.0.2"
   },
@@ -75,0 +78,0 @@ "peerDependencies": {

README.md

@@ -16,28 +16,27 @@ # candy_wrapper
 
-| `form_props` helper           | Component              | Vanilla React      | React Aria           | ?                    |
-| :---------------------------- | :--------------------- | :----------------- | :------------------- | :------------------- |
-| `f.text_field`                | Checkbox               | :heavy_check_mark: | :white_large_square: | :white_large_square: |
-| `f.collection_check_boxes`    | CollectionCheckboxes   | :heavy_check_mark: | :white_large_square: | :white_large_square: |
-| `f.collection_radio_buttons`  | CollectionRadioButtons | :heavy_check_mark: | :white_large_square: | :white_large_square: |
-| `f.color_field`               | ColorField             | :heavy_check_mark: | :white_large_square: | :white_large_square: |
-| `f.date_field`                | DateField              | :heavy_check_mark: | :white_large_square: | :white_large_square: |
-| `f.datetime_local_field`      | DateTimeLocalField     | :heavy_check_mark: | :white_large_square: | :white_large_square: |
-| `f.email_field`               | EmailField             | :heavy_check_mark: | :white_large_square: | :white_large_square: |
-|                               | FieldError             | :heavy_check_mark: | :white_large_square: | :white_large_square: |
-| `f.month_field`               | MonthField             | :heavy_check_mark: | :white_large_square: | :white_large_square: |
-| `f.number_field`              | NumberField            | :heavy_check_mark: | :white_large_square: | :white_large_square: |
-| `f.password_field`            | PasswordField          | :heavy_check_mark: | :white_large_square: | :white_large_square: |
-| `f.range_field`               | RangeField             | :heavy_check_mark: | :white_large_square: | :white_large_square: |
-| `f.search_field`              | SearchField            | :heavy_check_mark: | :white_large_square: | :white_large_square: |
-| `f.select`                    | Select                 | :heavy_check_mark: | :white_large_square: | :white_large_square: |
-| `f.tel_field`                 | TelField               | :heavy_check_mark: | :white_large_square: | :white_large_square: |
-| `f.file_field`                | FileField              | :heavy_check_mark: | :white_large_square: | :white_large_square: |
-| `f.text_field`                | TextField              | :heavy_check_mark: | :white_large_square: | :white_large_square: |
-| `f.time_field`                | TimeField              | :heavy_check_mark: | :white_large_square: | :white_large_square: |
-| `f.url_field`                 | UrlField               | :heavy_check_mark: | :white_large_square: | :white_large_square: |
-| `f.text_area`                 | TextArea               | :heavy_check_mark: | :white_large_square: | :white_large_square: |
-| `f.grouped_collection_select` | Select                 | :heavy_check_mark: | :white_large_square: | :white_large_square: |
-| `f.weekday_select`            | Select                 | :heavy_check_mark: | :white_large_square: | :white_large_square: |
-| `f.time_zone_select`          | Select                 | :heavy_check_mark: | :white_large_square: | :white_large_square: |
-| `f.submit`                    | SubmitButton           | :heavy_check_mark: | :white_large_square: | :white_large_square: |
+| `form_props` helper                     | Component              | [Vanilla]          | [Mantine]            | ?                    |
+| :-------------------------------------- | :--------------------- | :----------------- | :------------------- | :------------------- |
+| `f.text_field`                          | Checkbox               | :heavy_check_mark: | :heavy_check_mark:   | :white_large_square: |
+| `f.collection_check_boxes`              | CollectionCheckboxes   | :heavy_check_mark: | :heavy_check_mark:   | :white_large_square: |
+| `f.collection_radio_buttons`            | CollectionRadioButtons | :heavy_check_mark: | :heavy_check_mark:   | :white_large_square: |
+| `f.color_field`                         | ColorField             | :heavy_check_mark: | :heavy_check_mark:   | :white_large_square: |
+| `f.date_field`                          | DateField              | :heavy_check_mark: | :heavy_check_mark:   | :white_large_square: |
+| `f.datetime_local_field`                | DateTimeLocalField     | :heavy_check_mark: | :heavy_check_mark:   | :white_large_square: |
+| `f.email_field`                         | EmailField             | :heavy_check_mark: | :heavy_check_mark:   | :white_large_square: |
+| `f.month_field`                         | MonthField             | :heavy_check_mark: | :heavy_check_mark:   | :white_large_square: |
+| `f.number_field`                        | NumberField            | :heavy_check_mark: | :heavy_check_mark:   | :white_large_square: |
+| `f.password_field`                      | PasswordField          | :heavy_check_mark: | :heavy_check_mark:   | :white_large_square: |
+| `f.range_field`                         | RangeField             | :heavy_check_mark: | :white_large_square: | :white_large_square: |
+| `f.search_field`                        | SearchField            | :heavy_check_mark: | :heavy_check_mark:   | :white_large_square: |
+| `f.select` (`multiple: true` supported) | Select                 | :heavy_check_mark: | :heavy_check_mark:   | :white_large_square: |
+| `f.tel_field`                           | TelField               | :heavy_check_mark: | :heavy_check_mark:   | :white_large_square: |
+| `f.file_field`                          | FileField              | :heavy_check_mark: | :heavy_check_mark:   | :white_large_square: |
+| `f.text_field`                          | TextField              | :heavy_check_mark: | :heavy_check_mark:   | :white_large_square: |
+| `f.time_field`                          | TimeField              | :heavy_check_mark: | :heavy_check_mark:   | :white_large_square: |
+| `f.url_field`                           | UrlField               | :heavy_check_mark: | :heavy_check_mark:   | :white_large_square: |
+| `f.text_area`                           | TextArea               | :heavy_check_mark: | :heavy_check_mark:   | :white_large_square: |
+| `f.grouped_collection_select`           | Select                 | :heavy_check_mark: | :heavy_check_mark:   | :white_large_square: |
+| `f.weekday_select`                      | Select                 | :heavy_check_mark: | :heavy_check_mark:   | :white_large_square: |
+| `f.time_zone_select`                    | Select                 | :heavy_check_mark: | :heavy_check_mark:   | :white_large_square: |
+| `f.submit`                              | SubmitButton           | :heavy_check_mark: | :heavy_check_mark:   | :white_large_square: |
 
@@ -109,3 +108,3 @@ ## Installation
 ```js
-import {Form, TextField, SubmitButton} from './copied_components'
+import {Form, TextField, SubmitButton} from './copied_components_for_mantine'
 
@@ -122,4 +121,3 @@ const {form, extras, inputs} = newPostForm
 
-Each wrapper comes with inline support for server errors which renders a FieldError
-underneath the input.
+Each wrapper comes with inline support for server errors.
 
@@ -135,3 +133,3 @@ ```js
 
-<Form {...form} extras={extras}>
+<Form {...form} extras={extras} validationErrors={validationErrors}>
   <TextField {...inputs.title} label="Post title" errorKey="full_title" />
@@ -142,2 +140,17 @@ <SubmitButton {...inputs.submit} />
 
+## Vanilla
+
+Vanilla wrappers wrap around basic React HTML tags. If you want to build
+wrappers of your own, you can start here and use other UI wrappers as reference.
+
+## Mantine
+
+To use the Mantine wrappers, add the following libraries to your libraries before copying
+
+```
+yarn add dayjs
+yarn add @mantine/core
+yarn add @mantine/dates
+```
+
 ## Contributors
@@ -144,0 +157,0 @@

src/types.ts

@@ -18,3 +18,3 @@ export type BaseInputField = {
 
-export type FileField = Omit<BaseInputField, 'value'> & {
+export type FileField = {
   readonly type: 'file'
@@ -43,7 +43,9 @@ }
 
-export type MonthField = BaseInputField & {
+export type MonthField = Omit<BaseInputField, 'size'> & {
   readonly type: 'month'
+  min?: string
+  max?: string
 }
 
-export type NumberField = BaseInputField & {
+export type NumberField = Omit<BaseInputField, 'size'> & {
   readonly type: 'number'
@@ -92,3 +94,2 @@ max?: number
 
-  // todo: changed to be .to_s in
   uncheckedValue: string
@@ -120,3 +121,3 @@
 
-export type RadioButtonFieldWithLabel = CheckboxField & {
+export type RadioButtonFieldWithLabel = RadioButtonField & {
   label: string
@@ -157,9 +158,6 @@ }
 
-export type Select = {
+type BaseSelect = {
   readonly type: 'select'
   id?: string
   name: string
-  defaultValue?: string
-  value?: string
-  multiple?: boolean
   includeHidden: boolean
@@ -169,3 +167,17 @@ options: (SelectOption | SelectOptionGroup)[]
 
+export type SingleSelect = BaseSelect & {
+  multiple?: false
+  defaultvalue?: string
+  value?: string
+}
+
+export type MultiSelect = BaseSelect & {
+  multiple: true
+  defaultvalue?: string[]
+  value?: string[]
+}
+
+export type Select = SingleSelect | MultiSelect
+
 export type ValidationError = string | string[]
 export type ValidationErrors = Record<string, ValidationError>

tsconfig.json

@@ -12,5 +12,5 @@ {
     "esModuleInterop": true,
-    "outDir": "./dist",
+    "outDir": "./dist"
   },
   "include": ["./src/**/*"]
 }

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28900

increased by3.6%

Lines of code

230

increased by4.07%

Number of lines in readme file

157

increased by9.03%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

28

increased by12%

No dependency changes