✨ Implement divider

.github/workflows/build-example.yml

@@ -0,0 +1,93 @@
+name: Build Design System Example App
+
+on:
+    push:
+        branches:
+            - main
+    pull_request:
+
+jobs:
+    build:
+        runs-on: [ubuntu-latest]
+        permissions:
+            id-token: write
+        defaults:
+            run:
+                working-directory: ./example
+        env:
+            smartway_keystore_name: smartway.keystore
+            node-version: 18
+            java-version: 11
+        steps:
+            - name: Tailscale
+              uses: tailscale/github-action@v2
+              with:
+                  authkey: ${{ secrets.TAILSCALE_AUTH_KEY }}
+                  version: ${{ vars.TAILSCALE_VERSION }}
+
+            - name: Import Secrets
+              id: secrets
+              uses: hashicorp/vault-action@v2
+              with:
+                  url: ${{ vars.VAULT_URL }}
+                  role: ${{ vars.VAULT_GITHUB_ACTIONS_ROLE }}
+                  method: jwt
+                  path: 'github-actions'
+                  secrets: |
+                      secret/data/smartapp/keystore KEYSTORE_PASSWORD | SMARTWAY_KEYSTORE_PASSWORD ;
+                      secret/data/smartapp/keystore KEYSTORE_PASSWORD | SMARTWAY_KEY_PASSWORD ;
+                      secret/data/smartapp/keystore KEY_ALIAS | SMARTWAY_KEY_ALIAS ;
+                      secret/data/github-actions-common/aws accessKey | AWS_ACCESS_KEY_ID ;
+                      secret/data/github-actions-common/aws secretKey | AWS_SECRET_ACCESS_KEY ;
+
+            - name: Checkout
+              uses: actions/checkout@v3
+
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: ${{ env.node-version }}
+                  registry-url: 'https://npm.pkg.github.com'
+                  scope: '@ZeroGachis'
+
+            - name: Install lib dependencies
+              working-directory: .
+              run: npm ci --ignore-scripts
+
+            - uses: actions/setup-java@v3
+              with:
+                  distribution: 'temurin'
+                  java-version: ${{ env.java-version }}
+                  cache: 'gradle'
+
+            - name: Validate Gradle wrapper
+              uses: gradle/wrapper-validation-action@v1
+
+            - name: Setup Gradle
+              uses: gradle/gradle-build-action@v2
+
+            - name: Configure AWS Credentials
+              uses: aws-actions/configure-aws-credentials@v1-node16
+              with:
+                  aws-access-key-id: ${{ steps.secrets.outputs.AWS_ACCESS_KEY_ID }}
+                  aws-secret-access-key: ${{ steps.secrets.outputs.AWS_SECRET_ACCESS_KEY }}
+                  aws-region: eu-west-1
+
+            - name: Get Smartway APK keystore
+              run: aws s3 cp s3://backup-zerogachis/github-actions/${{ env.smartway_keystore_name }} android/app/${{ env.smartway_keystore_name }}
+
+            - name: Install dependencies
+              run: npm install
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+            - name: Build Apk
+              working-directory: example/android/
+              run: ./gradlew assemblerelease
+              env:
+                  SMARTWAY_KEYSTORE_NAME: ${{ env.smartway_keystore_name }}
+
+            - name: Upload Apk
+              uses: actions/upload-artifact@v3
+              with:
+                  name: Design-system-samples-apk
+                  path: example/android/app/build/outputs/apk/**/app*.apk

.github/workflows/publish.yml → .github/workflows/build-package.yml

@@ -1,16 +1,15 @@
-name: Publish package
+name: Build Design System package
 
 on:
-    release:
-        types: [created]
+    push:
+        branches:
+            - main
+    pull_request:
 
 jobs:
     build:
-        runs-on: [self-hosted, debian-stable]
+        runs-on: [ubuntu-latest]
         steps:
-            - name: Clean Workspace
-              uses: mickem/clean-after-action@v1
-
             - name: Checkout
               uses: actions/checkout@v3
             - uses: actions/setup-node@v3
@@ -39,8 +38,3 @@ jobs:
 
             - name: Compile
               run: npm run tsc
-
-            - name: Publish to Github Registry
-              run: npm publish
-              env:
-                  NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/publish-package.yml

@@ -0,0 +1,23 @@
+name: Publish Design System package
+
+on:
+    release:
+        types: [created]
+
+jobs:
+    build:
+        runs-on: [self-hosted, debian-stable]
+        steps:
+            - name: build-package
+              uses: ./.github/workflows/build-package.yml
+              with:
+                  node-version: 18
+                  java-version: 11
+                  configuration: release
+                  app-version: ${{ github.ref_name }}
+                  build-number: ${{ needs.format-version.outputs.app-version-formated }}${{ needs.format-version.outputs.build-number-formated }}
+
+            - name: publish-apk
+              run: npm publish
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

example/src/App.tsx

@@ -22,6 +22,7 @@ import { PlusMinusInputPage } from './PlusMinusInput/PlusMinusInputPage';
 import { TabPage } from './Tab/TabPage';
 import { LabelPage } from './Label/LabelPage';
 import { ProductPage } from './Product/ProductPage';
+import { ListPage } from './ListPage/ListPage';
 
 export type RootStackParamList = {
     Home: undefined;
@@ -44,6 +45,7 @@ export type RootStackParamList = {
     Tab: undefined;
     Label: undefined;
     ProductPage: undefined;
+    ListPage: undefined;
 };
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
@@ -90,6 +92,7 @@ const App = () => {
                     <Stack.Screen name="Tab" component={TabPage} />
                     <Stack.Screen name="Label" component={LabelPage} />
                     <Stack.Screen name="ProductPage" component={ProductPage} />
+                    <Stack.Screen name="ListPage" component={ListPage} />
                 </Stack.Navigator>
             </NavigationContainer>
         </ThemeProvider>

example/src/HomeScreen.tsx

@@ -184,6 +184,14 @@ export const HomeScreen = ({ navigation }: Props) => {
                     >
                         Product
                     </Button>
+                    <Button
+                        style={styles.button}
+                        onPress={() => {
+                            navigation.navigate('ListPage');
+                        }}
+                    >
+                        List
+                    </Button>
                 </Pressable>
             </ScrollView>
         </View>

example/src/ListPage/ListPage.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import { StyleSheet, Switch, Text, View } from 'react-native';
+import { Body, Divider, PlusMinusInput, QuantityField, Screen } from 'smartway-react-native-ui';
+
+export const ListPage = () => {
+    const [marginTopOrLeft, setMarginTopOrLeft] = useState<number>(10);
+    const [marginBottomOrRight, setMarginBottomOrRight] = useState<number>(10);
+    const [dashed, setDashed] = useState<boolean>(false);
+    const [orientation, setOrientation] = useState<'horizontal' | 'vertical'>('horizontal');
+
+    const styles = StyleSheet.create({
+        contentContainer: {
+            flex: 1,
+            marginTop: 10,
+            flexDirection: orientation == 'horizontal' ? 'column' : 'row',
+        },
+        itemLine: {
+            backgroundColor: 'steelblue',
+            height: orientation == 'horizontal' ? 50 : 'auto',
+            width: orientation == 'vertical' ? 50 : 'auto',
+        },
+        options: {
+            borderColor: 'black',
+            borderWidth: 1,
+            padding: 10,
+        },
+        option: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            height: 60,
+        },
+    });
+
+    return (
+        <Screen>
+            <View style={styles.options}>
+                <View style={styles.option}>
+                    <Body>Dashed</Body>
+                    <Switch value={dashed} onValueChange={() => setDashed(!dashed)} />
+                </View>
+                <View style={styles.option}>
+                    <Body>Orientation horizontale</Body>
+                    <Switch
+                        value={orientation == 'horizontal'}
+                        onValueChange={(value) => setOrientation(value ? 'horizontal' : 'vertical')}
+                    />
+                </View>
+                <View style={styles.option}>
+                    <Body>Margin Top or Left</Body>
+                    <PlusMinusInput
+                        value={marginTopOrLeft}
+                        onValueChange={(value) => setMarginTopOrLeft(value)}
+                        minValue={0}
+                        maxValue={100}
+                        size="s"
+                    />
+                </View>
+                <View style={styles.option}>
+                    <Body>Margin Bottom or Right</Body>
+                    <PlusMinusInput
+                        value={marginBottomOrRight}
+                        onValueChange={(value) => setMarginBottomOrRight(value)}
+                        minValue={0}
+                        maxValue={100}
+                        size="s"
+                    />
+                </View>
+            </View>
+            <View style={styles.contentContainer}>
+                {[...Array(10)].map(() => (
+                    <View
+                        key={Math.random()}
+                        style={{
+                            flexDirection: orientation == 'horizontal' ? 'column' : 'row',
+                        }}
+                    >
+                        <View style={styles.itemLine} />
+                        <Divider
+                            style={{
+                                paddingTop: orientation == 'horizontal' ? marginTopOrLeft : 0,
+                                paddingBottom:
+                                    orientation == 'horizontal' ? marginBottomOrRight : 0,
+                                paddingLeft: orientation == 'vertical' ? marginTopOrLeft : 0,
+                                paddingRight: orientation == 'vertical' ? marginBottomOrRight : 0,
+                            }}
+                            dashed={dashed}
+                            orientation={orientation}
+                        />
+                    </View>
+                ))}
+            </View>
+        </Screen>
+    );
+};

src/components/divider/Divider.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { StyleSheet, View, ViewStyle } from 'react-native';
+import { useTheme } from '../../styles/themes';
+
+interface Props {
+    style?: ViewStyle;
+    orientation?: 'vertical' | 'horizontal';
+    dashed?: boolean;
+}
+
+export const Divider = ({ style, orientation = 'horizontal', dashed = false }: Props) => {
+    const theme = useTheme();
+
+    const styles = StyleSheet.create({
+        container: {
+            ...style,
+        },
+        line: {
+            borderBottomColor: theme.sw.colors.neutral[500] + theme.sw.transparency[24],
+            borderRightColor: theme.sw.colors.neutral[500] + theme.sw.transparency[24],
+            borderBottomWidth: orientation == 'horizontal' ? 2 : 0,
+            width: orientation == 'horizontal' ? '100%' : 'auto',
+            borderRightWidth: orientation == 'vertical' ? 2 : 0,
+            height: orientation == 'vertical' ? '100%' : 'auto',
+            borderStyle: dashed ? 'dashed' : 'solid',
+        },
+    });
+    return (
+        <View style={styles.container}>
+            <View style={styles.line} />
+        </View>
+    );
+};

src/components/index.tsx

@@ -24,6 +24,7 @@ import { Card } from './card/Card';
 import { Tab } from './tab/Tab';
 import { Label } from './label/Label';
 import { Product } from './product/Product';
+import { Divider } from './divider/Divider';
 
 export {
     Body,
@@ -52,4 +53,5 @@ export {
     Tab,
     Label,
     Product,
+    Divider,
 };

src/index.tsx

@@ -25,6 +25,7 @@ import {
     Tab,
     Label,
     Product,
+    Divider,
 } from './components';
 
 import { ThemeProvider, useTheme } from './styles/themes';
@@ -57,4 +58,5 @@ export {
     Tab,
     Label,
     Product,
+    Divider,
 };