fixed slugify logic considering dash and line only settings

Author: cblanquera

build/entry.tsx

@@ -144,10 +144,30 @@ const App = () => {
           </Control>
         </div>
         <PrettyCode code={`
-          <Control label="Input Field">
+          <Control label="Slug Field">
             <FieldSlug defaultValue="value 1" onUpdate={console.log} />
           </Control>
         `} />
+        <div style={{ padding: '10px 0', marginTop: '40px' }}>
+          <Control label="Slug Field (only dashes)">
+            <FieldSlug defaultValue="value 2" dash onUpdate={console.log} />
+          </Control>
+        </div>
+        <PrettyCode code={`
+          <Control label="Slug Field (only dashes)">
+            <FieldSlug defaultValue="value 2" dash onUpdate={console.log} />
+          </Control>
+        `} />
+        <div style={{ padding: '10px 0', marginTop: '40px' }}>
+          <Control label="Slug Field (only lines)">
+            <FieldSlug defaultValue="value 3" line onUpdate={console.log} />
+          </Control>
+        </div>
+        <PrettyCode code={`
+          <Control label="Slug Field (only lines)">
+            <FieldSlug defaultValue="value 3" line onUpdate={console.log} />
+          </Control>
+        `} />
         <div style={{ padding: '10px 0', marginTop: '40px' }}>
           <Control label="Single File Input">
             <FieldFile

docs/bundle.js

@@ -1,6 +1,6 @@
 {
   "name": "frui",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "license": "MIT",
   "description": "A collection of vanilla react and tailwind components written in typescript.",
   "author": "Chris <chris@incept.asia>",

package.json

@@ -1,29 +1,17 @@
 import type { ChangeEvent } from 'react';
 import type { FieldSlugConfig } from '../types';
 
-//function to convert a string to a slug
-const slugify = (str: string, allowDash = true) => {
-  return str.trim()
-    //replace spaces with dashes (or underscores)
-    .replace(/\s+/g, allowDash ? '-': '_')
-    //replace multiple dashes with a single dash
-    .replace(/-{2,}/g, '-')
-    //replace multiple underscores with a single underscore
-    .replace(/_{2,}/g, '_')
-    //replace anything that is not a letter, number, dash, or underscore
-    .replace(/[^a-zA-Z0-9-\s_]/g, '')
-    .toLowerCase();
-};
+import { slugify } from '../utils';
 
 export default function useFieldSlug(config: FieldSlugConfig) {
   const value = config.value
-    ? slugify(String(config.value))
+    ? slugify(String(config.value), !config.dash, !config.line)
     : undefined;
   const defaultValue = config.defaultValue
-    ? slugify(String(config.defaultValue))
+    ? slugify(String(config.defaultValue), !config.dash, !config.line)
     : undefined;
   const change = (e: ChangeEvent<HTMLInputElement>) => {
-    e.target.value = slugify(e.target.value, config.dash);
+    e.target.value = slugify(e.target.value, !config.dash, !config.line);
     config.onChange && config.onChange(e);
   };
   return { value, defaultValue, change };

src/hooks/useFieldSlug.ts

@@ -5,7 +5,8 @@ import useFieldSlug from '../hooks/useFieldSlug';
 
 const FieldSlug: React.FC<FieldSlugProps> = (props) => {
   const { 
-    dash = true,
+    dash,
+    line,
     value: rawValue, 
     defaultValue: rawDefaultValue, 
     onChange,
@@ -14,6 +15,7 @@ const FieldSlug: React.FC<FieldSlugProps> = (props) => {
 
   const { value, defaultValue, change } = useFieldSlug({
     dash,
+    line,
     value: rawValue, 
     defaultValue: rawDefaultValue,
     onChange

src/react/FieldSlug.tsx

@@ -5,7 +5,8 @@ import useFieldSlug from '../hooks/useFieldSlug';
 
 const FieldSlug: React.FC<FieldSlugProps> = (props) => {
   const { 
-    dash = true,
+    dash,
+    line,
     value: rawValue, 
     defaultValue: rawDefaultValue, 
     onChange,
@@ -14,6 +15,7 @@ const FieldSlug: React.FC<FieldSlugProps> = (props) => {
 
   const { value, defaultValue, change } = useFieldSlug({
     dash,
+    line,
     value: rawValue, 
     defaultValue: rawDefaultValue,
     onChange

src/tailwind/FieldSlug.tsx

@@ -415,11 +415,13 @@ export type FieldsProps<ValueType = any> = {
 //Field slug component
 export type FieldSlugConfig = FieldInputConfig & {
   dash?: boolean,
+  line?: boolean
   value: string|number|readonly string[]|undefined,
   defaultValue?: string|number|readonly string[]|undefined
 };
 export type FieldSlugProps = FieldInputProps & {
-  dash?: boolean
+  dash?: boolean,
+  line?: boolean
 };
 
 // Field switch component

src/types.ts

@@ -87,4 +87,24 @@ export function makeStyles(
     : defaultStyles as React.CSSProperties|undefined;
 
   return Object.keys(styles || {}).length > 0 ? styles : undefined;
+};
+
+//function to convert a string to a slug
+export function slugify(str: string, noDash = false, noLine = false) {
+  return str.trim()
+    //replace special characters with dashes (or underscores)
+    .replace(/[^a-zA-Z0-9\-_]/g, noLine ? '-': '_')
+    //replace dashes with underscores (or dashes if allowed)
+    .replace(/-/g, noLine ? '-': '_')
+    //replace dashes with underscores (or dashes if allowed)
+    .replace(/_/g, noDash ? '_': '-')
+    //replace multiple dashes with a single dash
+    .replace(/-{2,}/g, '-')
+    //replace multiple underscores with a single underscore
+    .replace(/_{2,}/g, '_')
+    //trim dashes and underscores from the beginning and end of the string
+    .replace(/^-+|-+$/g, '')
+    .replace(/^_+|_+$/g, '')
+    //convert to lowercase
+    .toLowerCase();
 };