@ornikar/kitt-universal 1.0.0 → 1.0.1

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

@@ -1,252 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`kitt-universal/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

@@ -1,19 +0,0 @@
-import { storiesOf } from '@storybook/react-native';
-import { Section, Story } from '@ornikar/kitt-universal';
-import React from 'react';
-import { InputFeedback } from '../InputFeedback/InputFeedback';
-import { InputText } from '../InputText/InputText';
-import { Label } from '../Label/Label';
-import { InputField } from './InputField';
-
-storiesOf('kitt-universal/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

@@ -1,45 +0,0 @@
-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

@@ -1,240 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`kitt-universal/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

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

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

@@ -1,85 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { storiesOf } from '@storybook/react-native';
-import { Section, Story, StoryGrid } from '@ornikar/kitt-universal';
-import type { ReactElement } from 'react';
-import React from 'react';
-import type { InputTextProps } from './InputText';
-import { InputText } from './InputText';
-
-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-universal/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>
-));