@ornikar/kitt-universal 1.0.0 → 1.0.1

package/src/forms/InputText/useInputText.ts

@@ -1,19 +0,0 @@
-import { useState } from 'react';
-
-export const useInputText = (): {
-  isFocused: boolean;
-  handleInputFocus: () => void;
-  handleInputBlur: () => void;
-  isPasswordVisible: boolean;
-  togglePasswordVisibility: () => void;
-} => {
-  const [isFocused, setIsFocused] = useState<boolean>(false);
-  const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false);
-
-  const handleInputFocus = (): void => setIsFocused(true);
-  const handleInputBlur = (): void => setIsFocused(false);
-
-  const togglePasswordVisibility = (): void => setIsPasswordVisible((isVisible) => !isVisible);
-
-  return { isFocused, handleInputFocus, handleInputBlur, togglePasswordVisibility, isPasswordVisible };
-};

package/src/forms/Label/Label.stories.tsx

@@ -1,14 +0,0 @@
-import { storiesOf } from '@storybook/react-native';
-import { Section, Story } from '@ornikar/kitt-universal';
-import React from 'react';
-import { InputText } from '../InputText/InputText';
-import { Label } from './Label';
-
-storiesOf('kitt-universal/Forms', module).add('Label', () => (
-  <Story title="Label">
-    <Section title="Demo">
-      <Label htmlFor="fake-id">Mon adresse</Label>
-      <InputText type="text" nativeID="fake-id" />
-    </Section>
-  </Story>
-));

package/src/forms/Label/Label.tsx

@@ -1,17 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-import React from 'react';
-import { Platform } from 'react-native';
-import { Typography } from '../../typography/Typography';
-
-export interface LabelProps {
-  htmlFor: string;
-  children: NonNullable<ReactNode>;
-}
-
-export function Label({ htmlFor, children }: LabelProps): ReactElement {
-  return (
-    <Typography.Text base="body">
-      {Platform.OS === 'web' ? <label htmlFor={htmlFor}>{children}</label> : children}
-    </Typography.Text>
-  );
-}

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

@@ -1,174 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`kitt-universal/Forms Label 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"
-        >
-          Label
-        </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="black"
-          isHeader={false}
-          style={
-            Array [
-              Object {
-                "color": "#000000",
-                "fontFamily": "NotoSans",
-                "fontSize": 16,
-                "fontStyle": "normal",
-                "fontWeight": "400",
-                "lineHeight": 26,
-                "textDecorationColor": "#000000",
-              },
-            ]
-          }
-          type="body"
-          variant="regular"
-        >
-          Mon adresse
-        </Text>
-        <View
-          style={
-            Array [
-              Object {
-                "marginBottom": 4,
-                "marginTop": 2,
-              },
-            ]
-          }
-        >
-          <TextInput
-            allowFontScaling={true}
-            autoCompleteType="off"
-            autoCorrect={true}
-            editable={true}
-            keyboardType="default"
-            minHeight={0}
-            nativeID="fake-id"
-            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>
-    </View>
-  </RCTScrollView>
-</RNCSafeAreaProvider>
-`;

package/src/forms/Radio/Radio.stories.tsx

@@ -1,48 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { storiesOf } from '@storybook/react-native';
-import { Section, Story } from '@ornikar/kitt-universal';
-import React from 'react';
-import { Radio } from './Radio';
-
-storiesOf('kitt-universal/Forms', module).add('Radio', () => (
-  <Story title="Radio">
-    <Section.DemoSection>
-      <Radio id="radio-demo" name="radio-demo" value="value" onChange={action('change')}>
-        Placeholder
-      </Radio>
-    </Section.DemoSection>
-
-    <Section title="Unchecked">
-      <Section.SubSection title="default">
-        <Radio id="unchecked-default" name="unchecked-default" value="value" onChange={action('change')} />
-      </Section.SubSection>
-      <Section.SubSection title="with text">
-        <Radio id="unchecked-with-text" name="unchecked-with-text" value="value" onChange={action('change')}>
-          Placeholder
-        </Radio>
-      </Section.SubSection>
-    </Section>
-
-    <Section title="Checked">
-      <Section.SubSection title="default">
-        <Radio checked id="checked-default" name="checked-default" value="value" onChange={action('change')} />
-      </Section.SubSection>
-      <Section.SubSection title="with text">
-        <Radio checked id="checked-with-text" name="checked-with-text" value="value" onChange={action('change')}>
-          Placeholder
-        </Radio>
-      </Section.SubSection>
-    </Section>
-
-    <Section title="Disabled">
-      <Section.SubSection title="default">
-        <Radio disabled id="disabled-default" name="disabled-default" value="value" onChange={action('change')} />
-      </Section.SubSection>
-      <Section.SubSection title="with text">
-        <Radio disabled id="disabled-with-text" name="disabled-with-text" value="value" onChange={action('change')}>
-          Placeholder
-        </Radio>
-      </Section.SubSection>
-    </Section>
-  </Story>
-));

package/src/forms/Radio/Radio.tsx

@@ -1,81 +0,0 @@
-import type { ReactElement, ReactNode } from 'react';
-import React from 'react';
-import type { PressableProps } from 'react-native';
-import styled from 'styled-components/native';
-import { Typography } from '../../typography/Typography';
-
-export interface RadioProps {
-  id: string;
-  name: string;
-  checked?: boolean;
-  disabled?: boolean;
-  right?: boolean;
-  children?: NonNullable<ReactNode>;
-  value: string;
-  onChange: (newValue: string) => void;
-}
-
-interface OuterRadioProps {
-  disabled: boolean;
-}
-
-const OuterRadio = styled.View<OuterRadioProps>`
-  background-color: ${({ theme, disabled }) =>
-    theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].backgroundColor};
-  width: ${({ theme }) => theme.kitt.forms.radio.size}px;
-  height: ${({ theme }) => theme.kitt.forms.radio.size}px;
-  border-radius: ${({ theme }) => theme.kitt.forms.radio.size / 2}px;
-  border-width: ${({ theme }) => theme.kitt.forms.radio.unchecked.borderWidth};
-  border-color: ${({ theme, disabled }) => theme.kitt.forms.radio[disabled ? 'disabled' : 'unchecked'].borderColor};
-`;
-const SelectedOuterRadio = styled.View`
-  background-color: ${({ theme }) => theme.kitt.forms.radio.checked.backgroundColor};
-  width: ${({ theme }) => theme.kitt.forms.radio.size}px;
-  height: ${({ theme }) => theme.kitt.forms.radio.size}px;
-  border-radius: ${({ theme }) => theme.kitt.forms.radio.size / 2}px;
-  justify-content: center;
-  align-items: center;
-`;
-const SelectedInnerRadio = styled.View`
-  background-color: ${({ theme }) => theme.kitt.forms.radio.checked.innerBackgroundColor};
-  width: ${({ theme }) => theme.kitt.forms.radio.checked.innerSize}px;
-  height: ${({ theme }) => theme.kitt.forms.radio.checked.innerSize}px;
-  border-radius: ${({ theme }) => theme.kitt.forms.radio.checked.innerSize / 2}px;
-`;
-const Container = styled.Pressable`
-  flex-direction: row;
-  align-items: center;
-`;
-
-const Text = styled(Typography.Text)`
-  margin-left: ${({ theme }) => theme.kitt.spacing * 2}px;
-`;
-
-export function Radio({ id, checked, onChange, value, disabled = false, children }: RadioProps): ReactElement {
-  const handlePress: PressableProps['onPress'] = () => {
-    onChange(value);
-  };
-
-  return (
-    <Container
-      nativeID={id}
-      disabled={disabled}
-      accessibilityRole="radio"
-      aria-checked={checked}
-      accessible={checked && !disabled}
-      onPress={handlePress}
-    >
-      {checked && !disabled ? (
-        <SelectedOuterRadio>
-          <SelectedInnerRadio />
-        </SelectedOuterRadio>
-      ) : (
-        <OuterRadio disabled={disabled} />
-      )}
-
-      <Text base="body" color={disabled ? 'black-light' : 'black'}>
-        {children}
-      </Text>
-    </Container>
-  );
-}