removed type, min, max, step from fieldset. you should now put those …

…in data. updated metadata and textlist fields 1h
OSSPhilippines · Jul 10, 2023 · 2b99c16 · 2b99c16
1 parent 208b04a
commit 2b99c16
Show file tree

Hide file tree

Showing 13 changed files with 51 additions and 58 deletions.
diff --git a/packages/frui-core/package.json b/packages/frui-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "frui-core",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "license": "MIT",
   "description": "Core library of FRUI",
   "author": "Chris <[email protected]>",

diff --git a/packages/frui-core/src/types/components.ts b/packages/frui-core/src/types/components.ts
@@ -88,12 +88,8 @@ export type FieldsetConfig<ValueType = any> = {
 //ex. const Custom: React.FC<FieldsetProps<YOUR ROW TYPE>> = (props) => {}
 export type FieldsetProps<ValueType = any> = ExtendsType<ButtonProps, {
   add?: string,
-  type?: string,
   data?: Record<string, any>,
   value?: ValueType[],
-  min?: number|string,
-  max?: number|string,
-  step?: number|string,
   emptyValue?: ValueType,
   error?: boolean,
   errorColor?: string,

diff --git a/packages/frui-react/package.json b/packages/frui-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "frui-react",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "license": "MIT",
   "description": "A collection of vanilla react components written in typescript.",
   "author": "Chris <[email protected]>",
@@ -19,7 +19,7 @@
     "react-dom": "^18.0.0"
   },
   "dependencies": {
-    "frui-core": "0.0.23",
+    "frui-core": "0.0.24",
     "inputmask": "5.0.8",
     "markdown-to-jsx": "7.2.0",
     "moment": "2.29.4"

diff --git a/packages/frui-react/src/Fieldset.tsx b/packages/frui-react/src/Fieldset.tsx
@@ -19,10 +19,6 @@ export default function make<ValueType = any>(
     //extract props
     const { 
       add,
-      min,
-      max,
-      step,
-      type,
       data,
       value, 
       emptyValue, 
@@ -46,11 +42,7 @@ export default function make<ValueType = any>(
       <>
         {values.map((value, index) => (
           typeof value !== 'undefined' ? <Fields 
-            type={type}
             data={data}
-            min={min}
-            max={max}
-            step={step}
             key={index} 
             index={index}
             values={values}

diff --git a/packages/frui-react/src/fields/Metadata.tsx b/packages/frui-react/src/fields/Metadata.tsx
@@ -20,11 +20,8 @@ import { makeGroupStyles, makeGroupClasses } from 'frui-core/dist/utils';
  * Key/Value Component 
  */
 const Fields: React.FC<FieldsProps<MetadataType>> = (props) => {
-  const { 
-    type,
-    min, 
-    max,
-    step,
+  const {
+    data = {},
     values, 
     index, 
     error,
@@ -33,13 +30,15 @@ const Fields: React.FC<FieldsProps<MetadataType>> = (props) => {
     classNames,
     set
   } = props;
+  //props
+  const { type, min, max, step, placeholder } = data;
+  //hooks
   const { handlers, input } = useMetadata({ 
-    type, 
+    type,
     values, 
     index, 
     set 
   });
-
   //variables
   const value = values ? values[index]: undefined;
   const map = {
@@ -98,6 +97,7 @@ const Fields: React.FC<FieldsProps<MetadataType>> = (props) => {
       <Input 
         style={map.styles.name}
         className={map.classNames.name}
+        placeholder={Array.isArray(placeholder) ? placeholder[0]: undefined}
         defaultValue={Array.isArray(value) ? value[0]: undefined}
         onUpdate={name => handlers.update('name', name)}
         error={error}
@@ -108,6 +108,7 @@ const Fields: React.FC<FieldsProps<MetadataType>> = (props) => {
           type={type}
           style={map.styles.value}
           className={map.classNames.value}
+          placeholder={Array.isArray(placeholder) ? placeholder[1]: undefined}
           defaultValue={Array.isArray(value) ? value[1] as string|number: undefined}
           onUpdate={value => handlers.update('value', value)}
           error={error}
@@ -121,6 +122,7 @@ const Fields: React.FC<FieldsProps<MetadataType>> = (props) => {
           step={step}
           style={map.styles.value}
           className={map.classNames.value}
+          placeholder={Array.isArray(placeholder) ? placeholder[1]: undefined}
           defaultValue={Array.isArray(value) ? value[1] as string|number: undefined}
           onUpdate={(value: string) => handlers.update('value', value)}
           error={error}
@@ -132,6 +134,7 @@ const Fields: React.FC<FieldsProps<MetadataType>> = (props) => {
           type="date"
           style={map.styles.value}
           className={map.classNames.value}
+          placeholder={Array.isArray(placeholder) ? placeholder[1]: undefined}
           defaultValue={Array.isArray(value) ? value[1]: undefined}
           onUpdate={value => handlers.update('value', value)}
           error={error}
@@ -143,6 +146,7 @@ const Fields: React.FC<FieldsProps<MetadataType>> = (props) => {
           type="time"
           style={map.styles.value}
           className={map.classNames.value}
+          placeholder={Array.isArray(placeholder) ? placeholder[1]: undefined}
           defaultValue={Array.isArray(value) ? value[1]: undefined}
           onUpdate={(value: string) => handlers.update('value', value)}
           error={error}
@@ -154,6 +158,7 @@ const Fields: React.FC<FieldsProps<MetadataType>> = (props) => {
           type="datetime-local"
           style={map.styles.value}
           className={map.classNames.value}
+          placeholder={Array.isArray(placeholder) ? placeholder[1]: undefined}
           defaultValue={Array.isArray(value) ? value[1]: undefined}
           onUpdate={(value) => handlers.update('value', value)}
           error={error}

diff --git a/packages/frui-react/src/fields/Textlist.tsx b/packages/frui-react/src/fields/Textlist.tsx
@@ -17,6 +17,7 @@ import { makeGroupStyles, makeGroupClasses } from 'frui-core/dist/utils';
  */
 const Fields: React.FC<FieldsProps<TextlistType>> = (props) => {
   const { 
+    data,
     values, 
     index, 
     error,
@@ -26,6 +27,8 @@ const Fields: React.FC<FieldsProps<TextlistType>> = (props) => {
     set
   } = props;
   //variables
+  const placeholder = data?.placeholder as string | undefined;
+
   const map = {
     styles: makeGroupStyles(styles, {
       row: {
@@ -68,6 +71,7 @@ const Fields: React.FC<FieldsProps<TextlistType>> = (props) => {
       <Input 
         style={styles !== false ? map.styles.value : false}
         className={map.classNames.value}
+        placeholder={placeholder}
         defaultValue={values ? values[index]: undefined}
         onUpdate={handlers.update}
         error={error}

diff --git a/packages/frui-tailwind/package.json b/packages/frui-tailwind/package.json
@@ -1,6 +1,6 @@
 {
   "name": "frui-tailwind",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "license": "MIT",
   "description": "A collection of tailwind components written in typescript.",
   "author": "Chris <[email protected]>",
@@ -19,7 +19,7 @@
     "react-dom": "^18.0.0"
   },
   "dependencies": {
-    "frui-core": "0.0.23",
+    "frui-core": "0.0.24",
     "inputmask": "5.0.8",
     "markdown-to-jsx": "7.2.0",
     "moment": "2.29.4"

diff --git a/packages/frui-tailwind/src/Fieldset.tsx b/packages/frui-tailwind/src/Fieldset.tsx
@@ -19,10 +19,6 @@ export default function make<ValueType = any>(
     //extract props
     const { 
       add,
-      min,
-      max,
-      step,
-      type,
       data,
       value, 
       emptyValue, 
@@ -46,11 +42,7 @@ export default function make<ValueType = any>(
       <>
         {values.map((value, index) => (
           typeof value !== 'undefined' ? <Fields 
-            type={type}
             data={data}
-            min={min}
-            max={max}
-            step={step}
             key={index} 
             index={index}
             values={values}

diff --git a/packages/frui-tailwind/src/fields/Metadata.tsx b/packages/frui-tailwind/src/fields/Metadata.tsx
@@ -12,7 +12,7 @@ import Date from './Date';
 import Datetime from './Datetime';
 import Time from './Time';
 //hooks
-import useMetadatas from 'frui-core/dist/hooks/useMetadata';
+import useMetadata from 'frui-core/dist/hooks/useMetadata';
 //helpers
 import { 
   makeGroupStyles, 
@@ -24,24 +24,23 @@ import {
  */
 const Fields: React.FC<FieldsProps<MetadataType>> = (props) => {
   const { 
-    type,
-    min, 
-    max,
-    step,
+    data = {},
     values, 
     index, 
     error,
     styles,
     classNames,
     set
   } = props;
-  const { handlers, input } = useMetadatas({ 
-    type, 
+  //props
+  const { type, min, max, step, placeholder } = data;
+  //hooks
+  const { handlers, input } = useMetadata({ 
+    type,
     values, 
     index, 
     set 
   });
-
   //variables
   const value = values ? values[index]: undefined;
   const map = {
@@ -98,6 +97,7 @@ const Fields: React.FC<FieldsProps<MetadataType>> = (props) => {
       <Input 
         style={map.styles.name}
         className={map.classNames.name}
+        placeholder={Array.isArray(placeholder) ? placeholder[0]: undefined}
         defaultValue={Array.isArray(value) ? value[0]: undefined}
         onUpdate={name => handlers.update('name', name)}
         error={error}
@@ -108,6 +108,7 @@ const Fields: React.FC<FieldsProps<MetadataType>> = (props) => {
           type={type}
           style={map.styles.value}
           className={map.classNames.value}
+          placeholder={Array.isArray(placeholder) ? placeholder[1]: undefined}
           defaultValue={Array.isArray(value) ? value[1] as string|number: undefined}
           onUpdate={(value) => handlers.update('value', value)}
           error={error}
@@ -121,6 +122,7 @@ const Fields: React.FC<FieldsProps<MetadataType>> = (props) => {
           step={step}
           style={map.styles.value}
           className={map.classNames.value}
+          placeholder={Array.isArray(placeholder) ? placeholder[1]: undefined}
           defaultValue={Array.isArray(value) ? value[1] as string|number: undefined}
           onUpdate={(value: string) => handlers.update('value', value)}
           error={error}
@@ -132,6 +134,7 @@ const Fields: React.FC<FieldsProps<MetadataType>> = (props) => {
           type="date"
           style={map.styles.value}
           className={map.classNames.value}
+          placeholder={Array.isArray(placeholder) ? placeholder[1]: undefined}
           defaultValue={Array.isArray(value) ? value[1]: undefined}
           onUpdate={(value) => handlers.update('value', value)}
           error={error}
@@ -143,6 +146,7 @@ const Fields: React.FC<FieldsProps<MetadataType>> = (props) => {
           type="time"
           style={map.styles.value}
           className={map.classNames.value}
+          placeholder={Array.isArray(placeholder) ? placeholder[1]: undefined}
           defaultValue={Array.isArray(value) ? value[1]: undefined}
           onUpdate={(value: string) => handlers.update('value', value)}
           error={error}
@@ -154,6 +158,7 @@ const Fields: React.FC<FieldsProps<MetadataType>> = (props) => {
           type="datetime-local"
           style={map.styles.value}
           className={map.classNames.value}
+          placeholder={Array.isArray(placeholder) ? placeholder[1]: undefined}
           defaultValue={Array.isArray(value) ? value[1]: undefined}
           onUpdate={(value) => handlers.update('value', value)}
           error={error}

diff --git a/packages/frui-tailwind/src/fields/Textlist.tsx b/packages/frui-tailwind/src/fields/Textlist.tsx
@@ -23,13 +23,17 @@ import {
  */
 const Fields: React.FC<FieldsProps<TextlistType>> = (props) => {
   const { 
+    data,
     values, 
     index, 
     error,
     styles,
     classNames,
     set
   } = props;
+
+  const placeholder = data?.placeholder as string | undefined;
+
   //variables
   const map = {
     styles: makeGroupStyles(styles, {
@@ -59,6 +63,7 @@ const Fields: React.FC<FieldsProps<TextlistType>> = (props) => {
       <Input 
         style={styles !== false ? map.styles.value : false}
         className={map.classNames.value}
+        placeholder={placeholder}
         defaultValue={values ? values[index]: undefined}
         onUpdate={handlers.update}
         error={error}

diff --git a/packages/frui/build/entry.tsx b/packages/frui/build/entry.tsx
@@ -736,10 +736,7 @@ const App = () => {
           <div style={{ padding: '10px 0', marginTop: '40px' }}>
             <Control label="Meta Numbers With Errors" error="something">
               <Metadata 
-                type="number"
-                min="0"
-                max="10000000"
-                step="0.01"
+                data={{ type: 'number', min: 0, max: 10000000, step: 0.01 }}
                 value={[['a', 2.05], ['c', 10000]]} 
                 onUpdate={entries => console.log(Object.fromEntries(entries))}
                 error={true}
@@ -749,10 +746,7 @@ const App = () => {
           <PrettyCode code={`
             <Control label="Meta Numbers With Errors" error="something">
               <Metadata 
-                type="number"
-                min="0"
-                max="10000000"
-                step="0.01"
+                data={{ type: 'number', min: 0, max: 10000000, step: 0.01 }}
                 value={[['a', 2.05], ['c', 10000]]} 
                 onUpdate={entries => console.log(Object.fromEntries(entries))}
                 error={true}
@@ -762,7 +756,7 @@ const App = () => {
           <div style={{ padding: '10px 0', marginTop: '40px' }}>
             <Control label="Meta Dates">
               <Metadata 
-                type="date"
+                data={{ type: 'date' }}
                 value={[['a', Date.now()], ['c', new Date]]} 
                 onUpdate={entries => console.log(Object.fromEntries(entries))}
               />
@@ -771,7 +765,7 @@ const App = () => {
           <PrettyCode code={`
             <Control label="Meta Dates">
               <Metadata 
-                type="date"
+                data={{ type: 'date' }}
                 value={[['a', Date.now()], ['c', new Date]]}  
                 onUpdate={entries => console.log(Object.fromEntries(entries))}
               />
@@ -780,7 +774,7 @@ const App = () => {
           <div style={{ padding: '10px 0', marginTop: '40px' }}>
             <Control label="Meta Times" className="text-xs my-4">
               <Metadata 
-                type="time"
+                data={{ type: 'time' }}
                 value={[['a', Date.now()], ['c', new Date]]} 
                 onUpdate={entries => console.log(Object.fromEntries(entries))}
               />
@@ -789,7 +783,7 @@ const App = () => {
           <PrettyCode code={`
             <Control label="Meta Times" className="text-xs my-4">
               <Metadata 
-                type="time"
+                data={{ type: 'time' }}
                 value={[['a', Date.now()], ['c', new Date]]} 
                 onUpdate={entries => console.log(Object.fromEntries(entries))}
               />
@@ -798,7 +792,7 @@ const App = () => {
           <div style={{ padding: '10px 0', marginTop: '40px' }}>
             <Control label="Meta Datetimes With Errors" error="something">
               <Metadata 
-                type="datetime"
+                data={{ type: 'datetime' }}
                 value={[['a', Date.now()], ['c', new Date]]} 
                 onUpdate={entries => console.log(Object.fromEntries(entries))}
                 error={true}
@@ -808,7 +802,7 @@ const App = () => {
           <PrettyCode code={`
             <Control label="Meta Datetimes With Errors" error="something">
               <Metadata 
-                type="datetime"
+                data={{ type: 'datetime' }}
                 value={[['a', Date.now()], ['c', new Date]]} 
                 onUpdate={entries => console.log(Object.fromEntries(entries))}
                 error={true}

diff --git a/packages/frui/docs/bundle.js b/packages/frui/docs/bundle.js