feat(libs/validation-rule-list): remove components and class (#48)

apps/demo/src/app/examples/with-material-ui/atoms/rule-list.component.tsx

@@ -0,0 +1,52 @@
+import {
+  COMPLETE_STATUS,
+  DEFAULT_STATUS,
+  INCOMPLETE_STATUS
+} from '@bedrockstreaming/form-validation-rule-list';
+import _ from 'lodash';
+import { makeStyles } from '@mui/styles';
+
+const useStyles = makeStyles<{ [key: string]: unknown }>({
+  list: {
+    display: 'flex',
+    margin: 0,
+    padding: 0,
+    textAlign: 'left',
+    listStyle: 'none'
+  },
+  listItem: {
+    margin: '4px',
+    fontSize: 'smaller'
+  },
+  [DEFAULT_STATUS]: {
+    color: '#2e2e2d'
+  },
+  [COMPLETE_STATUS]: {
+    color: '#4ed569'
+  },
+  [INCOMPLETE_STATUS]: {
+    color: '#da3b2b'
+  }
+});
+
+export const RuleList = ({
+  items
+}: {
+  items: { key: string; status: string }[];
+}) => {
+  const classes = useStyles();
+
+  return (
+    <ul className={classes.list}>
+      {items.map((item) => (
+        <li
+          key={item.key}
+          className={`${classes.listItem} ${classes[item.status]}`}
+          data-testid={`hint-${_.kebabCase(item.key)}-${item.status}`}
+        >
+          <span>{item.key}</span>
+        </li>
+      ))}
+    </ul>
+  );
+};

apps/demo/src/app/examples/with-material-ui/dictionary/date.component.tsx

@@ -11,10 +11,7 @@ import _ from 'lodash';
 
 import { BirthdateInput } from '@forms/examples/birthdate';
 
-import {
-  colorByRulesClassnames,
-  weightByRulesClassnames
-} from '../../../constants/validationColors.constants';
+import { RuleList } from '../atoms/rule-list.component';
 
 const ValidatedTextField = withValidationRuleList(TextField);
 
@@ -70,8 +67,7 @@ export const DateInput = ({
         rules={rules}
         value={value}
         data-testid={dataTestId}
-        colorByRulesClassnames={colorByRulesClassnames}
-        weightByRulesClassnames={weightByRulesClassnames}
+        ruleComponent={RuleList}
       />
     </div>
   );

apps/demo/src/app/examples/with-material-ui/dictionary/password.component.tsx

@@ -10,10 +10,7 @@ import {
 import { TextField } from '@mui/material';
 import _ from 'lodash';
 
-import {
-  colorByRulesClassnames,
-  weightByRulesClassnames
-} from '../../../constants/validationColors.constants';
+import { RuleList } from '../atoms/rule-list.component';
 
 const ValidatedTextField = withValidationRuleList(TextField);
 
@@ -67,8 +64,7 @@ export const Password = ({
       rules={rules}
       value={value}
       data-testid={dataTestId}
-      colorByRulesClassnames={colorByRulesClassnames}
-      weightByRulesClassnames={weightByRulesClassnames}
+      ruleComponent={RuleList}
     />
   );
 };

apps/demo/src/app/examples/with-material-ui/login/form.component.tsx

@@ -41,30 +41,7 @@ const {
 
 const useStyles = makeStyles({
   root: {
-    margin: '16px auto',
-
-    '& .validation-rule-ul': {
-      display: 'flex',
-      padding: 0,
-      listStyle: 'none'
-    },
-
-    '& .validation-rule-ul li': {
-      margin: '4px',
-      fontSize: 'smaller'
-    },
-
-    '& .complete-li': {
-      color: '#4ed569'
-    },
-    '& .incomplete-li,.idle-li': {
-      color: '#da3b2b'
-    },
-    '& .step-fields-actions': {
-      width: '100%',
-      display: 'flex',
-      justifyContent: 'center'
-    }
+    margin: '16px auto'
   }
 });
 

apps/demo/src/app/examples/with-material-ui/register/form.component.tsx

@@ -46,30 +46,7 @@ const {
 
 const useStyles = makeStyles({
   root: {
-    margin: '16px auto',
-
-    '& .validation-rule-ul': {
-      display: 'flex',
-      padding: 0,
-      listStyle: 'none'
-    },
-
-    '& .validation-rule-ul li': {
-      margin: '4px',
-      fontSize: 'smaller'
-    },
-
-    '& .complete-li': {
-      color: '#4ed569'
-    },
-    '& .incomplete-li,.idle-li': {
-      color: '#da3b2b'
-    },
-    '& .step-fields-actions': {
-      width: '100%',
-      display: 'flex',
-      justifyContent: 'center'
-    }
+    margin: '16px auto'
   }
 });
 

apps/demo/src/app/examples/with-styled-components/atoms/rule-list.component.tsx

@@ -0,0 +1,45 @@
+import {
+  COMPLETE_STATUS,
+  INCOMPLETE_STATUS,
+  DEFAULT_STATUS
+} from '@bedrockstreaming/form-validation-rule-list';
+import styled from 'styled-components';
+
+export const List = styled.ul`
+  display: flex;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+  list-style: none;
+`;
+
+export const ListItem = styled.li`
+  margin: 4px;
+  font-size: smaller;
+
+  &.${COMPLETE_STATUS} {
+    color: #4ed569;
+  }
+  &.${INCOMPLETE_STATUS} {
+    color: #da3b2b;
+  }
+  &.${DEFAULT_STATUS} {
+    color: #2e2e2d;
+  }
+`;
+
+export const RuleList = ({
+  items
+}: {
+  items: { key: string; status: string }[];
+}) => {
+  return (
+    <List>
+      {items.map((item) => (
+        <ListItem key={item.key} className={item.status}>
+          <span>{item.key}</span>
+        </ListItem>
+      ))}
+    </List>
+  );
+};

apps/demo/src/app/examples/with-styled-components/dictionary/date.component.tsx

@@ -9,10 +9,8 @@ import { ValidatedTextField } from '@forms/examples/styled-inputs';
 import { BirthdateInput } from '@forms/examples/birthdate';
 
 import { TextFieldMarginWrapper } from './styled';
-import {
-  colorByRulesClassnames,
-  weightByRulesClassnames
-} from '../../../constants/validationColors.constants';
+
+import { RuleList } from '../atoms/rule-list.component';
 
 export const DateInput = ({
   errors,
@@ -45,8 +43,7 @@ export const DateInput = ({
         hasError={hasError}
         valid={isValid}
         rules={rules}
-        weightByRulesClassnames={weightByRulesClassnames}
-        colorByRulesClassnames={colorByRulesClassnames}
+        ruleComponent={RuleList}
         {...props}
       />
     </TextFieldMarginWrapper>

apps/demo/src/app/examples/with-styled-components/dictionary/password.component.tsx

@@ -8,10 +8,8 @@ import {
 import { ValidatedPasswordTextField } from '@forms/examples/styled-inputs';
 
 import { TextFieldTopMarginWrapper } from './styled';
-import {
-  colorByRulesClassnames,
-  weightByRulesClassnames
-} from '../../../constants/validationColors.constants';
+
+import { RuleList } from '../atoms/rule-list.component';
 
 export const Password = ({
   errors,
@@ -39,9 +37,7 @@ export const Password = ({
         valid={isValid}
         {...props}
         rules={rules}
-        weightByRulesClassnames={weightByRulesClassnames}
-        colorByRulesClassnames={colorByRulesClassnames}
-        label={props.label}
+        ruleComponent={RuleList}
       />
     </TextFieldTopMarginWrapper>
   );

apps/demo/src/app/examples/with-styled-components/dictionary/text.component.tsx

@@ -4,10 +4,6 @@ import { Validations } from '@bedrockstreaming/form-builder';
 import { ValidatedTextField } from '@forms/examples/styled-inputs';
 
 import { TextFieldMarginWrapper } from './styled';
-import {
-  colorByRulesClassnames,
-  weightByRulesClassnames
-} from '../../../constants/validationColors.constants';
 
 export const Text = ({
   errors,
@@ -30,10 +26,7 @@ export const Text = ({
         hasError={!!error}
         errorText={error}
         valid={!!props.value && !error}
-        weightByRulesClassnames={weightByRulesClassnames}
-        colorByRulesClassnames={colorByRulesClassnames}
         {...props}
-        label={props.label}
       />
     </TextFieldMarginWrapper>
   );

apps/docsite/src/form/dictionary/date.component.jsx

@@ -5,14 +5,11 @@ import {
   withValidationRuleList
 } from '@bedrockstreaming/form-validation-rule-list';
 import { TextField, Box } from '@mui/material';
-import _ from 'lodash';
 
 import { BirthdateInput } from '@forms/examples/birthdate';
 
-import {
-  colorByRulesClassnames,
-  weightByRulesClassnames
-} from '../constants/validationColors.constants';
+import { RuleList } from '../rule-list.component';
+
 
 const ValidatedTextField = withValidationRuleList(TextField);
 
@@ -54,8 +51,7 @@ export const DateInput = ({
         rules={rules}
         value={value}
         data-testid={dataTestId}
-        colorByRulesClassnames={colorByRulesClassnames}
-        weightByRulesClassnames={weightByRulesClassnames}
+        ruleComponent={RuleList}
       />
     </Box>
   );

apps/docsite/src/form/dictionary/password.component.jsx

@@ -6,12 +6,8 @@ import {
 } from '@bedrockstreaming/form-validation-rule-list';
 
 import { TextField, Box } from '@mui/material';
-import _ from 'lodash';
 
-import {
-  colorByRulesClassnames,
-  weightByRulesClassnames
-} from '../constants/validationColors.constants';
+import { RuleList } from '../rule-list.component';
 
 const ValidatedTextField = withValidationRuleList(TextField);
 
@@ -53,8 +49,7 @@ export const Password = ({
         rules={rules}
         value={value}
         data-testid={dataTestId}
-        colorByRulesClassnames={colorByRulesClassnames}
-        weightByRulesClassnames={weightByRulesClassnames}
+        ruleComponent={RuleList}
         />
     </Box>
   );

apps/docsite/src/form/dictionary/text.component.jsx

@@ -1,6 +1,5 @@
 import React, {  useMemo } from 'react';
 import { TextField, Box } from '@mui/material';
-import _ from 'lodash';
 
 export const Text = ({
   'data-testid': dataTestId,

apps/docsite/src/form/form.component.jsx

@@ -45,24 +45,6 @@ const {
 const useStyles = makeStyles({
   root: {
     margin: '0 auto',
-
-    '& .validation-rule-ul': {
-      display: 'flex',
-      padding: 0,
-      listStyle: 'none'
-    },
-
-    '& .validation-rule-ul li': {
-      margin: '4px',
-      fontSize: 'smaller'
-    },
-
-    '& .complete-li': {
-      color: '#4ed569'
-    },
-    '& .incomplete-li,.idle-li': {
-      color: '#da3b2b'
-    }
   }
 });