Merge main

.github/dependabot.yml

@@ -19,31 +19,31 @@ updates:
   - package-ecosystem: npm
     directory: ./frontend/mobile/
     schedule:
-      interval: weekly
+      interval: monthly
     groups:
       mobile:
         patterns:
          - "*"
   - package-ecosystem: npm
     directory: ./frontend/web/
     schedule:
-      interval: weekly
+      interval: monthly
     groups:
       web:
         patterns:
          - "*"
   - package-ecosystem: npm
     directory: ./frontend/dashboard/
     schedule:
-      interval: weekly
+      interval: monthly
     groups:
       dashboard:
         patterns:
          - "*"
   - package-ecosystem: npm
     directory: ./frontend/lib/
     schedule:
-      interval: weekly
+      interval: monthly
     groups:
       lib:
         patterns:

.github/workflows/frontend_lib_release.yml

@@ -1,9 +1,6 @@
 name: Frontend Lib Release
 
 on:
-  pull_request:
-    branches-ignore:
-      - dependabot/**
   push:
     branches:
       - main

frontend/dashboard/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@generatesac/lib": "^0.0.1",
-    "@hookform/resolvers": "^3.4.0",
+    "@hookform/resolvers": "^3.4.2",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
@@ -22,11 +22,11 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
-    "lucide-react": "^0.378.0",
+    "lucide-react": "^0.379.0",
     "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18",
-    "react-hook-form": "^7.51.4",
+    "react-hook-form": "^7.51.5",
     "react-redux": "^9.1.1",
     "redux": "^5.0.1",
     "redux-persist": "^6.0.0",

frontend/dashboard/src/store/StoreProvider.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { useRef, useState } from "react";
 import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
 import { persistor, store } from "./store";

frontend/mobile/app/(app)/(tabs)/discover.tsx

@@ -1,11 +1,9 @@
-import { Box, Text } from '@/app/(design-system)';
+import { Box, Tag } from '@/app/(design-system)';
 
 const DiscoverPage = () => {
     return (
         <Box flex={1} alignItems="center" justifyContent="center" padding="m">
-            <Text color="aqua" variant="text-1">
-                DiscoverAA
-            </Text>
+            <Tag variant="darkRed">Discover</Tag>
         </Box>
     );
 };

frontend/mobile/app/(design-system)/Tag/Tag.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import {
+    BoxProps,
+    VariantProps,
+    createBox,
+    createRestyleComponent,
+    createVariant
+} from '@shopify/restyle';
+
+import { Text } from '../Text/Text';
+import { Theme } from '../theme';
+
+const Box = createBox<Theme>();
+
+const tagVariant = createVariant<Theme, 'tagVariants'>({
+    themeKey: 'tagVariants'
+});
+
+type TagProps = VariantProps<Theme, 'tagVariants'> &
+    BoxProps<Theme> & {
+        children?: React.ReactNode;
+    };
+
+const TagBase = createRestyleComponent<TagProps, Theme>([tagVariant], Box);
+
+export const Tag: React.FC<TagProps> = ({ variant, children, ...rest }) => {
+    return (
+        <TagBase variant={variant} {...rest}>
+            {typeof children === 'string' ? (
+                <Text variant="body-1">{children}</Text>
+            ) : (
+                children
+            )}
+        </TagBase>
+    );
+};

frontend/mobile/app/(design-system)/Tag/TagVariants.ts

@@ -0,0 +1,42 @@
+const TagColorVariants = {
+    darkBlue: {
+        backgroundColor: 'darkBlue'
+    },
+    darkRed: {
+        backgroundColor: 'darkRed'
+    },
+    green: {
+        backgroundColor: 'green'
+    },
+    blue: {
+        backgroundColor: 'blue'
+    },
+    aqua: {
+        backgroundColor: 'aqua'
+    },
+    purple: {
+        backgroundColor: 'purple'
+    },
+    red: {
+        backgroundColor: 'red'
+    },
+    orange: {
+        backgroundColor: 'orange'
+    },
+    yellow: {
+        backgroundColor: 'yellow'
+    }
+} as const;
+
+export const TagVariants = {
+    defaults: {
+        flex: '1',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 'l',
+        paddingVertical: 'xs',
+        backgroundColor: 'aqua',
+        borderRadius: 105
+    },
+    ...TagColorVariants
+};

frontend/mobile/app/(design-system)/Text.tsx → frontend/mobile/app/(design-system)/Text/Text.tsx

@@ -1,5 +1,5 @@
 import { createText } from '@shopify/restyle';
 
-import { Theme } from './theme';
+import { Theme } from '../theme';
 
 export const Text = createText<Theme>();

frontend/mobile/app/(design-system)/Text/TextVariants.ts

@@ -0,0 +1,43 @@
+const Texts = {
+    'header-1': {
+        fontFamily: 'DMSans-Bold',
+        fontSize: 32,
+        fontStyle: 'normal',
+        fontWeight: '700',
+        lineHeight: 'normal'
+    },
+    'subheader-1': {
+        fontFamily: 'DMSans-Medium',
+        fontSize: 24,
+        fontStyle: 'normal',
+        fontWeight: '500',
+        lineHeight: 'normal',
+        color: '#000'
+    },
+    'body-1': {
+        fontFamily: 'DMSans-Regular',
+        fontSize: 16,
+        fontStyle: 'normal',
+        fontWeight: '400',
+        lineHeight: 'normal'
+    },
+    'caption-1': {
+        fontFamily: 'DMSans-Regular',
+        fontSize: 12,
+        fontStyle: 'normal',
+        fontWeight: '400',
+        lineHeight: 'normal'
+    },
+    'caption-2': {
+        fontFamily: 'DMSans-Regular',
+        fontSize: 10,
+        fontStyle: 'normal',
+        fontWeight: '400',
+        lineHeight: 'normal'
+    }
+} as const;
+
+export const TextVariants = {
+    defaults: Texts['body-1'],
+    ...Texts
+};

frontend/mobile/app/(design-system)/index.ts

@@ -1,5 +1,6 @@
-export * from './Text';
+export * from './Text/Text';
 export * from './Box';
 export * from './theme';
 export * from './Colors';
 export * from './Spacing';
+export * from './Tag/Tag';

frontend/mobile/app/(design-system)/theme.ts

@@ -2,12 +2,14 @@ import { createTheme } from '@shopify/restyle';
 
 import { Colors } from './Colors';
 import { Spacing } from './Spacing';
-import { TextVariants } from './TextVariants';
+import { TagVariants } from './Tag/TagVariants';
+import { TextVariants } from './Text/TextVariants';
 
 export const theme = createTheme({
     colors: Colors,
     spacing: Spacing,
-    textVariants: TextVariants
+    textVariants: TextVariants,
+    tagVariants: TagVariants
 });
 
 export type Theme = typeof theme;