@tactics/toddle-styleguide 1.4.16 → 1.4.18

package/App.tsx

@@ -75,6 +75,7 @@ import {LinePreview} from './src/components/atoms/line/line.preview';
 import {JournalEntryPreview} from './src/components/organisms/journal-entry/journal-entry.preview';
 import { TimetableEditPreview } from './src/components/organisms/timetable-edit/timetable-edit.preview';
 import { ContextLabelPreview } from './src/components/molecules/context-label/context-label.preview';
+import { CountPreview } from './src/components/atoms/count/count.preview';
 
 import {
   SafeAreaProvider,
@@ -133,6 +134,10 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="Context Label"
         onPress={() => navigation.push('context-label')}
       />
+      <ReactBtn
+        title="Count"
+        onPress={() => navigation.push('count')}
+      />
       <ReactBtn
         title="Date Input"
         onPress={() => navigation.push('date-input')}
@@ -355,6 +360,9 @@ function App() {
           <Stack.Screen name="context-label">
             {() => <ContextLabelPreview />}
           </Stack.Screen>
+          <Stack.Screen name="count">
+            {() => <CountPreview />}
+          </Stack.Screen>
           <Stack.Screen name="date-input">
             {() => <DateInputPreview />}
           </Stack.Screen>

package/index.tsx

@@ -78,6 +78,7 @@ import {Line} from './src/components/atoms/line/line.component';
 import {JournalEntry} from './src/components/organisms/journal-entry/journal-entry.component';
 import {TimetableEdit} from './src/components/organisms/timetable-edit/timetable-edit.component';
 import { ContextLabel } from './src/components/molecules/context-label/context-label.component';
+import { Count } from './src/components/atoms/count/count.component';
 
 // Exports of enums
 import {BubbleAlignment} from './src/types/bubble-alignment.enum';
@@ -175,5 +176,6 @@ export {
   CreateResponsiveStyle,
   Scale,
   TimetableEdit,
-  ContextLabel
+  ContextLabel,
+  Count
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "1.4.16",
+  "version": "1.4.18",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",

package/src/components/atoms/count/count.component.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { View } from "react-native";
+import {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import { Stylesheet } from "./count.styles";
+import { Paragraph } from "../paragraph-components";
+
+interface CountProps {
+  count: number;
+}
+
+export const Count = ({
+  count,
+}: CountProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+  return <View style={styles.container}>
+    <Paragraph addStyle={styles.text}>{count}</Paragraph>
+  </View>;
+};

package/src/components/atoms/count/count.preview.tsx

@@ -0,0 +1,16 @@
+import {View} from 'react-native';
+import {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import React from 'react';
+import { Count } from './count.component';
+
+export const CountPreview = () => {
+  const context = useContext(ThemeCtx);
+  return (
+    <View style={{alignItems: 'center', gap: 8}}>
+        <Count count={2} />
+        <Count count={99} />
+        <Count count={999999} />
+    </View>
+  );
+}

package/src/components/atoms/count/count.styles.js

@@ -0,0 +1,24 @@
+import {StyleSheet} from 'react-native';
+import { Scale } from '../../../theme/scale';
+
+export const Stylesheet = (context) =>
+  StyleSheet.create({
+    container: {
+        borderWidth: 1,
+        borderColor: context.colors.main['1'],
+        borderRadius: 20,
+        paddingVertical: Scale.xs,
+        paddingHorizontal: Scale.m,
+        minWidth: Scale.xxxl,
+        color: context.colors.main['2'],
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flex: 0,
+        backgroundColor: context.colors.ui.white
+    },
+    text: {
+        width: 'auto',
+        fontSize: Scale.m
+    }
+  });

package/src/theme/provider/parent.theme.ts

@@ -18,6 +18,24 @@ export const ParentTheme = {
       1: Colors.primary[1],
       0: Colors.primary[0],
     },
+    state: {
+      unplanned: {
+        default: Colors.secondary['2'],
+        dark: Colors.secondary['0']
+      },
+      expected: {
+        default: Colors.ui.warning.default,
+        dark: Colors.ui.warning.dark
+      },
+      in: {
+        default: Colors.primary['4'],
+        dark: Colors.primary['2']
+      },
+      out: {
+        default: Colors.ui.success.default,
+        dark: Colors.ui.success.dark,
+      }
+    },
     ui: {
       black: Colors.ui.black,
       white: Colors.ui.white,