feat(config,-loading): updated configs for tokens and atoms, added lo…

…ading

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sidan-lab/sidan-ui",
   "description": "UI library from SIDAN Lab",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
   "module": "dist/mjs/index.js",
@@ -39,6 +39,8 @@
     "@stitches/react": "^1.2.8",
     "eslint": "8.35.0",
     "eslint-config-next": "13.2.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "4.9.5"
   },
   "lint-staged": {
@@ -48,17 +50,19 @@
     ]
   },
   "devDependencies": {
-    "@types/node": "18.14.6",
     "@commitlint/cli": "^17.4.3",
     "@commitlint/config-conventional": "^17.4.3",
+    "@types/node": "18.14.6",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
     "@typescript-eslint/eslint-plugin": "^5.52.0",
     "commitlint": "^17.4.3",
-    "eslint-config-prettier": "^8.6.0",
     "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^8.6.0",
     "eslint-import-resolver-typescript": "^3.6.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.2.1",
     "husky": "^8.0.3",
     "prettier": "^2.8.4"
   }
-}
+}

src/atoms/button.ts

@@ -3,10 +3,9 @@ export const Button = (styled: any) =>
         display: 'flex',
         pos: 'relative',
         p: ['8px 20px'],
-        // bg: '$bgPrimary',
+        bg: '$primary',
         rounded: '$button',
-        fontFamily: '$primary',
-        gradient: '$primary',
+        fontFamily: '$text',
         justifyContent: 'center',
         cursor: 'pointer',
         borderStyle: 'none',
@@ -17,26 +16,16 @@ export const Button = (styled: any) =>
         variants: {
             style: {
                 primary: {
-                    color: '$white',
-                    gradient: '$gradient-primary-button',
-                },
-                secondary: {
-                    color: '$textOnSecondary',
-                    gradient: '$gradient-secondary-button',
+                    color: '$text',
+                    bg: '$primary',
                 },
-                'action-primary': {
-                    p: ['4px 16px'],
+                'gradient-primary': {
                     color: '$white',
                     gradient: '$gradient-primary-button',
-                    rounded: '$button-action',
-                    border: '1px solid $primary',
                 },
-                'action-secondary': {
-                    p: ['4px 16px'],
-                    color: '$textSecondary',
-                    bg: '$white',
-                    rounded: '$button-action',
-                    border: '1px solid $primary',
+                secondary: {
+                    color: '$text',
+                    gradient: '$secondary',
                 },
             },
             size: {
@@ -52,3 +41,18 @@ export const Button = (styled: any) =>
             },
         },
     });
+
+export const ButtonWrapper = (styled: any) =>
+    styled('div', {
+        display: 'flex',
+        justify: 'center',
+        alignItems: 'center',
+        width: 'fit-content',
+        gapX: ['8px'],
+        gapY: ['8px'],
+        cursor: 'pointer',
+        color: '$text',
+        '&:hover': {
+            opacity: '$hover',
+        },
+    });

src/atoms/card.ts

@@ -4,8 +4,9 @@ export const Card = (styled: any) =>
     styled('div', {
         display: 'flex',
         w: '100%',
-        bg: 'white',
-        rounded: '20px',
+        bg: '$text',
+        color: '$background',
+        rounded: '$card',
         justify: 'center',
-        boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.25)',
+        boxShadow: '$card',
     });

src/atoms/input.ts

@@ -3,15 +3,15 @@ export const Input = (styled: any) =>
         boxShadow: 'none',
         borderStyle: 'none',
         border: '1px solid',
-        textColor: '#666666',
-        background: 'white',
+        textColor: '$backgroundLight',
+        bg: '$text',
         p: ['12px 16px'],
         h: '100%',
         w: '100%',
         text: ['16px'],
         rounded: '10px',
         '&::placeholder': {
-            textColor: '#666666',
+            textColor: '$backgroundLight',
         },
         '&:hover': {
             outline: 'none',

src/atoms/overlay.ts

@@ -8,7 +8,7 @@ export const Overlay = (styled: any) =>
         display: 'flex',
         justify: 'center',
         items: 'center',
-        backdropFilter: 'blur(3px)',
+        backdropFilter: '$blur-sm',
         zIndex: 999,
         color: 'white',
     });

src/atoms/text.ts

@@ -1,8 +1,9 @@
 export const Text = (styled: any) =>
     styled('div', {
-        my: 'auto',
+        width: '100%',
         textAlign: 'center',
         whiteSpace: 'nowrap',
+        fontFamily: '$primary',
 
         variants: {
             responsive: {
@@ -22,22 +23,22 @@ export const Text = (styled: any) =>
                 warning: {
                     text: ['14px'],
                     fontWeight: 400,
-                    color: '#FF9800',
+                    color: '$warning',
                 },
                 info: {
                     text: ['14px'],
                     fontWeight: 400,
-                    color: '#2196F3',
+                    color: '$info',
                 },
                 danger: {
                     text: ['14px'],
                     fontWeight: 400,
-                    color: '#F44336',
+                    color: '$danger',
                 },
                 success: {
                     text: ['14px'],
                     fontWeight: 400,
-                    color: '#04AA6D',
+                    color: '$success',
                 },
             },
         },

src/molecules/index.ts

@@ -0,0 +1,5 @@
+import { Loading } from './loading';
+
+export const sidanMolecules = (styled: any, keyframes: any) => ({
+    Loading: Loading(styled, keyframes),
+});

src/molecules/loading.tsx

@@ -0,0 +1,78 @@
+import { Overlay } from '../atoms/overlay';
+
+export const Loading = (styled: any, keyframes: any) => {
+    const ringAnimation = keyframes({
+        '0%': {
+            transform: 'rotate(0deg)',
+        },
+        '100%': {
+            transform: 'rotate(360deg)',
+        },
+    });
+
+    const spanAnimation = keyframes({
+        '0%': {
+            transform: 'rotate(45deg)',
+        },
+        '100%': {
+            transform: 'rotate(405deg)',
+        },
+    });
+
+    const Ring = styled('div', {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%,-50%)',
+        width: '176px',
+        height: '176px',
+        background: 'transparent',
+        border: '1px solid $backgroundLight',
+        borderRadius: 'calc(50% - 2px)',
+        '&:before': {
+            content: '',
+            position: 'absolute',
+            top: '-3px',
+            left: '-3px',
+            width: '100%',
+            height: '100%',
+            border: '3px solid transparent',
+            background: 'transparent',
+            borderTop: '3px solid $primary',
+            borderRight: '3px solid $primary',
+            borderRadius: '50%',
+            animation: `${ringAnimation} 2s linear infinite`,
+        },
+    });
+
+    const Span = styled('span', {
+        display: 'block',
+        position: 'absolute',
+        top: 'calc(50% - 2px)',
+        left: '50%',
+        width: 'calc(50% - 1px)',
+        height: '4px',
+        background: 'transparent',
+        transformOrigin: 'left',
+        animation: `${spanAnimation} 2s linear infinite`,
+        '&:before': {
+            content: '',
+            position: 'absolute',
+            top: '-6px',
+            right: '-8px',
+            width: '11px',
+            height: '11px',
+            background: '$primary',
+            borderRadius: '50%',
+            boxShadow: '0 0 20px 4px $primary',
+        },
+    });
+
+    return (
+        <Overlay>
+            <Ring>
+                <Span />
+            </Ring>
+        </Overlay>
+    );
+};

src/styles/stitches.config.ts

@@ -17,6 +17,7 @@ import {
     zIndices,
 } from './tokens';
 import { sidanAtoms } from '../atoms';
+import { sidanMolecules } from '../molecules';
 
 // TODO: Add types
 
@@ -81,7 +82,7 @@ export const instantiateSidanUI = (customThemeConfig: Partial<CustomThemeConfig>
 
     const darkTheme = createTheme({ colors: themeConfig.colors.dark });
 
-    const components = sidanAtoms(styled);
+    const components = { ...sidanAtoms(styled), ...sidanMolecules(styled, keyframes) };
 
     return {
         config,