@ornikar/kitt-universal 1.0.0-pre

package/src/forms/InputFeedback/__snapshots__/InputFeedback.stories.tsx.snap

@@ -0,0 +1,252 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`kitt/Forms Input Feedback 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    Array [
+      Object {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <RCTScrollView
+    style={
+      Array [
+        Object {
+          "paddingBottom": 10,
+          "paddingLeft": 10,
+          "paddingRight": 10,
+          "paddingTop": 10,
+        },
+      ]
+    }
+  >
+    <View>
+      <View
+        style={
+          Array [
+            Object {
+              "marginBottom": 30,
+            },
+          ]
+        }
+      >
+        <Text
+          aria-level="1"
+          color="black"
+          isHeader={true}
+          style={
+            Array [
+              Object {
+                "color": "#000000",
+                "fontFamily": "Moderat-Extended-Bold",
+                "fontSize": 38,
+                "fontStyle": "normal",
+                "fontWeight": "400",
+                "lineHeight": 49,
+                "textDecorationColor": "#000000",
+              },
+            ]
+          }
+          type="header1"
+          variant="bold"
+        >
+          Input Feedback
+        </Text>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "marginBottom": 30,
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "marginBottom": 30,
+              },
+            ]
+          }
+        >
+          <Text
+            aria-level="2"
+            color="black"
+            isHeader={true}
+            style={
+              Array [
+                Object {
+                  "color": "#000000",
+                  "fontFamily": "Moderat-Extended-Bold",
+                  "fontSize": 32,
+                  "fontStyle": "normal",
+                  "fontWeight": "400",
+                  "lineHeight": 42,
+                  "textDecorationColor": "#000000",
+                },
+              ]
+            }
+            type="header2"
+            variant="bold"
+          >
+            Demo
+          </Text>
+        </View>
+        <Text
+          color="grey"
+          isHeader={false}
+          style={
+            Array [
+              Object {
+                "color": "#737373",
+                "fontFamily": "NotoSans",
+                "fontSize": 14,
+                "fontStyle": "normal",
+                "fontWeight": "400",
+                "lineHeight": 22,
+                "textDecorationColor": "#737373",
+              },
+            ]
+          }
+          type="body-small"
+          variant="regular"
+        >
+          Le numéro NEPH est composé de 12 chiffres
+        </Text>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "marginBottom": 30,
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "marginBottom": 30,
+              },
+            ]
+          }
+        >
+          <Text
+            aria-level="2"
+            color="black"
+            isHeader={true}
+            style={
+              Array [
+                Object {
+                  "color": "#000000",
+                  "fontFamily": "Moderat-Extended-Bold",
+                  "fontSize": 32,
+                  "fontStyle": "normal",
+                  "fontWeight": "400",
+                  "lineHeight": 42,
+                  "textDecorationColor": "#000000",
+                },
+              ]
+            }
+            type="header2"
+            variant="bold"
+          >
+            Valid
+          </Text>
+        </View>
+        <Text
+          color="grey"
+          isHeader={false}
+          style={
+            Array [
+              Object {
+                "color": "#737373",
+                "fontFamily": "NotoSans",
+                "fontSize": 14,
+                "fontStyle": "normal",
+                "fontWeight": "400",
+                "lineHeight": 22,
+                "textDecorationColor": "#737373",
+              },
+            ]
+          }
+          type="body-small"
+          variant="regular"
+        >
+          Le numéro NEPH renseigné est valide !
+        </Text>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "marginBottom": 30,
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "marginBottom": 30,
+              },
+            ]
+          }
+        >
+          <Text
+            aria-level="2"
+            color="black"
+            isHeader={true}
+            style={
+              Array [
+                Object {
+                  "color": "#000000",
+                  "fontFamily": "Moderat-Extended-Bold",
+                  "fontSize": 32,
+                  "fontStyle": "normal",
+                  "fontWeight": "400",
+                  "lineHeight": 42,
+                  "textDecorationColor": "#000000",
+                },
+              ]
+            }
+            type="header2"
+            variant="bold"
+          >
+            Invalid
+          </Text>
+        </View>
+        <Text
+          color="danger"
+          isHeader={false}
+          style={
+            Array [
+              Object {
+                "color": "#D44148",
+                "fontFamily": "NotoSans",
+                "fontSize": 14,
+                "fontStyle": "normal",
+                "fontWeight": "400",
+                "lineHeight": 22,
+                "textDecorationColor": "#D44148",
+              },
+            ]
+          }
+          type="body-small"
+          variant="regular"
+        >
+          Le numéro NEPH comporte 12 caractères !
+        </Text>
+      </View>
+    </View>
+  </RCTScrollView>
+</RNCSafeAreaProvider>
+`;

package/src/forms/InputField/InputField.stories.tsx

@@ -0,0 +1,21 @@
+import { storiesOf } from '@storybook/react-native';
+import React from 'react';
+import { StoryComponents } from '../../story-components';
+import { InputFeedback } from '../InputFeedback/InputFeedback';
+import { InputText } from '../InputText/InputText';
+import { Label } from '../Label/Label';
+import { InputField } from './InputField';
+
+const { Section, Story } = StoryComponents;
+
+storiesOf('kitt/Forms', module).add('Input Field', () => (
+  <Story title="Field Container">
+    <Section title="Demo">
+      <InputField
+        label={<Label htmlFor="field_name">Label</Label>}
+        input={<InputText type="text" accessibilityLabelledBy="field_name" />}
+        feedback={<InputFeedback>Feedback</InputFeedback>}
+      />
+    </Section>
+  </Story>
+));

package/src/forms/InputField/InputField.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import type { ReactElement, ReactNode } from 'react';
+import styled from 'styled-components/native';
+import { KittBreakpoints } from '../../KittBreakpoints';
+
+const FieldContainer = styled.View`
+  padding: 5px 0 10px;
+`;
+
+const FeedbackContainer = styled.View`
+  ${({ theme }) =>
+    theme.responsive.ifWindowSizeMatches({ minWidth: KittBreakpoints.SMALL }, 'padding-top: 10px', 'padding-top: 5px')};
+`;
+
+const FieldLabelContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  padding-bottom: ${({ theme }) => theme.kitt.forms.inputField.labelContainerPaddingBottom}px;
+`;
+
+const LabelContainer = styled.View`
+  margin-right: ${({ theme }) => theme.kitt.forms.inputField.iconMarginLeft}px;
+`;
+
+export interface InputFieldProps {
+  label?: ReactNode;
+  labelFeedback?: ReactNode;
+  input: NonNullable<ReactNode>;
+  feedback?: ReactNode;
+}
+
+export function InputField({ label, labelFeedback, input, feedback }: InputFieldProps): ReactElement {
+  return (
+    <FieldContainer>
+      {label ? (
+        <FieldLabelContainer>
+          <LabelContainer>{label}</LabelContainer>
+          {labelFeedback}
+        </FieldLabelContainer>
+      ) : null}
+      {input}
+      {feedback ? <FeedbackContainer>{feedback}</FeedbackContainer> : null}
+    </FieldContainer>
+  );
+}

package/src/forms/InputField/__snapshots__/InputField.stories.tsx.snap

@@ -0,0 +1,240 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`kitt/Forms Input Field 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    Array [
+      Object {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <RCTScrollView
+    style={
+      Array [
+        Object {
+          "paddingBottom": 10,
+          "paddingLeft": 10,
+          "paddingRight": 10,
+          "paddingTop": 10,
+        },
+      ]
+    }
+  >
+    <View>
+      <View
+        style={
+          Array [
+            Object {
+              "marginBottom": 30,
+            },
+          ]
+        }
+      >
+        <Text
+          aria-level="1"
+          color="black"
+          isHeader={true}
+          style={
+            Array [
+              Object {
+                "color": "#000000",
+                "fontFamily": "Moderat-Extended-Bold",
+                "fontSize": 38,
+                "fontStyle": "normal",
+                "fontWeight": "400",
+                "lineHeight": 49,
+                "textDecorationColor": "#000000",
+              },
+            ]
+          }
+          type="header1"
+          variant="bold"
+        >
+          Field Container
+        </Text>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "marginBottom": 30,
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "marginBottom": 30,
+              },
+            ]
+          }
+        >
+          <Text
+            aria-level="2"
+            color="black"
+            isHeader={true}
+            style={
+              Array [
+                Object {
+                  "color": "#000000",
+                  "fontFamily": "Moderat-Extended-Bold",
+                  "fontSize": 32,
+                  "fontStyle": "normal",
+                  "fontWeight": "400",
+                  "lineHeight": 42,
+                  "textDecorationColor": "#000000",
+                },
+              ]
+            }
+            type="header2"
+            variant="bold"
+          >
+            Demo
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "paddingBottom": 10,
+                "paddingLeft": 0,
+                "paddingRight": 0,
+                "paddingTop": 5,
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "paddingBottom": 5,
+                },
+              ]
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "marginRight": 6,
+                  },
+                ]
+              }
+            >
+              <Text
+                color="black"
+                isHeader={false}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000000",
+                      "fontFamily": "NotoSans",
+                      "fontSize": 16,
+                      "fontStyle": "normal",
+                      "fontWeight": "400",
+                      "lineHeight": 26,
+                      "textDecorationColor": "#000000",
+                    },
+                  ]
+                }
+                type="body"
+                variant="regular"
+              >
+                Label
+              </Text>
+            </View>
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "marginBottom": 4,
+                  "marginTop": 2,
+                },
+              ]
+            }
+          >
+            <TextInput
+              accessibilityLabelledBy="field_name"
+              allowFontScaling={true}
+              autoCompleteType="off"
+              autoCorrect={true}
+              editable={true}
+              keyboardType="default"
+              minHeight={0}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              placeholderTextColor="#737373"
+              rejectResponderTermination={true}
+              secureTextEntry={false}
+              selectionColor="#4C34E0"
+              state="default"
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "#FFFFFF",
+                    "borderColor": "#E5E5E5",
+                    "borderRadius": 10,
+                    "borderWidth": 2,
+                    "color": "#000000",
+                    "fontFamily": "NotoSans",
+                    "fontSize": 16,
+                    "lineHeight": 0,
+                    "minHeight": 0,
+                    "paddingBottom": 12,
+                    "paddingLeft": 16,
+                    "paddingRight": 16,
+                    "paddingTop": 12,
+                  },
+                ]
+              }
+              textContentType="none"
+              underlineColorAndroid="transparent"
+            />
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "paddingTop": 5,
+                },
+              ]
+            }
+          >
+            <Text
+              color="grey"
+              isHeader={false}
+              style={
+                Array [
+                  Object {
+                    "color": "#737373",
+                    "fontFamily": "NotoSans",
+                    "fontSize": 14,
+                    "fontStyle": "normal",
+                    "fontWeight": "400",
+                    "lineHeight": 22,
+                    "textDecorationColor": "#737373",
+                  },
+                ]
+              }
+              type="body-small"
+              variant="regular"
+            >
+              Feedback
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </RCTScrollView>
+</RNCSafeAreaProvider>
+`;

package/src/forms/InputFormState.ts

@@ -0,0 +1 @@
+export type InputFormState = undefined | 'valid' | 'invalid' | 'pending';

package/src/forms/InputText/InputText.stories.tsx

@@ -0,0 +1,87 @@
+import { action } from '@storybook/addon-actions';
+import { storiesOf } from '@storybook/react-native';
+import type { ReactElement } from 'react';
+import React from 'react';
+import { StoryComponents } from '../../story-components';
+import type { InputTextProps } from './InputText';
+import { InputText } from './InputText';
+
+const { Section, Story, StoryGrid } = StoryComponents;
+
+const defaultPlaceholder = 'Placeholder';
+const filledValue =
+  'The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile.';
+
+interface InputTextVariationProps extends Partial<InputTextProps> {
+  variationTitle: string;
+}
+
+function InputTextVariation({ variationTitle, ...props }: InputTextVariationProps): ReactElement {
+  return (
+    <Section key={variationTitle} title={variationTitle}>
+      <StoryGrid.Row breakpoint="medium">
+        <StoryGrid.Col title="Empty">
+          <InputText placeholder={defaultPlaceholder} type="text" onChange={action('Changed')} {...props} />
+        </StoryGrid.Col>
+        <StoryGrid.Col title="Filled">
+          <InputText
+            placeholder={defaultPlaceholder}
+            value={filledValue}
+            type="text"
+            onChange={action('Changed')}
+            {...props}
+          />
+        </StoryGrid.Col>
+        <StoryGrid.Col title="Hover">
+          <InputText
+            placeholder={defaultPlaceholder}
+            value={filledValue}
+            type="text"
+            internalForceState="hover"
+            onChange={action('Changed')}
+            {...props}
+          />
+        </StoryGrid.Col>
+        <StoryGrid.Col title="Focus">
+          <InputText
+            placeholder={defaultPlaceholder}
+            value={filledValue}
+            type="text"
+            internalForceState="focus"
+            onChange={action('Changed')}
+            {...props}
+          />
+        </StoryGrid.Col>
+        <StoryGrid.Col title="Disabled">
+          <InputText disabled placeholder={defaultPlaceholder} type="text" onChange={action('Changed')} {...props} />
+        </StoryGrid.Col>
+        <StoryGrid.Col title={'Disabled\u00A0Filled'}>
+          <InputText
+            disabled
+            placeholder={defaultPlaceholder}
+            value={filledValue}
+            type="text"
+            onChange={action('Changed')}
+            {...props}
+          />
+        </StoryGrid.Col>
+      </StoryGrid.Row>
+    </Section>
+  );
+}
+
+storiesOf('kitt/Forms', module).add('InputText', () => (
+  <Story title="Input Text">
+    <Section.DemoSection>
+      <InputText placeholder="Placeholder" type="text" onChange={action('Changed')} />
+      <InputText placeholder="******" type="password" onChange={action('Changed')} />
+    </Section.DemoSection>
+
+    <InputTextVariation variationTitle="Default" />
+    <InputTextVariation variationTitle="Valid" state="valid" />
+    <InputTextVariation variationTitle="Invalid" state="invalid" />
+    <InputTextVariation variationTitle="Password" type="password" />
+    <InputTextVariation variationTitle="Email" type="email" />
+    <InputTextVariation variationTitle="Username" type="username" />
+  </Story>
+));