feat: adding custom config

.github/workflows/npm-publish.yml

@@ -4,40 +4,40 @@
 name: Node.js Package
 
 on:
-  release:
-    types: [created]
-  push:
-    branches:
-      - main
-  pull_request:
-    branches:
-      - main
+    release:
+        types: [created]
+    push:
+        branches:
+            - main
+    pull_request:
+        branches:
+            - main
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-      - run: yarn ci
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: 18
+            - run: yarn ci
 
-  publish-npm:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-          registry-url: https://registry.npmjs.org/
-      - run: yarn ci
-      - run: |
-          if [[ "${{ github.event.head_commit.message }}" =~ ^(docs:|chore:) ]]; then
-            echo "Skipping npm publish due to commit message."
-          else
-            npm publish --access public
-          fi
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
+    publish-npm:
+        needs: build
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: 18
+                  registry-url: https://registry.npmjs.org/
+            - run: yarn ci
+            - run: |
+                  if [[ "${{ github.event.head_commit.message }}" =~ ^(docs:|chore:) ]]; then
+                    echo "Skipping npm publish due to commit message."
+                  else
+                    npm publish --access public
+                  fi
+              env:
+                  NODE_AUTH_TOKEN: ${{secrets.npm_token}}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sidan-lab/sidan-ui",
   "description": "UI library from SIDAN Lab",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
   "module": "dist/mjs/index.js",

src/atoms/button.ts

@@ -1,55 +1,54 @@
-import { styled } from '../styles';
-
-export const Button = styled('button', {
-    display: 'flex',
-    pos: 'relative',
-    p: ['8px 20px'],
-    // bg: '$bgPrimary',
-    rounded: '$button',
-    fontFamily: '$primary',
-    gradient: '$primary',
-    justifyContent: 'center',
-    cursor: 'pointer',
-    borderStyle: 'none',
-    '&:hover': {
-        boxShadow: '$lg',
-        opacity: '$hover',
-    },
-    variants: {
-        style: {
-            primary: {
-                color: '$white',
-                gradient: '$gradient-primary-button',
-            },
-            secondary: {
-                color: '$textOnSecondary',
-                gradient: '$gradient-secondary-button',
-            },
-            'action-primary': {
-                p: ['4px 16px'],
-                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',
-            },
+export const Button = (styled: any) =>
+    styled('button', {
+        display: 'flex',
+        pos: 'relative',
+        p: ['8px 20px'],
+        // bg: '$bgPrimary',
+        rounded: '$button',
+        fontFamily: '$primary',
+        gradient: '$primary',
+        justifyContent: 'center',
+        cursor: 'pointer',
+        borderStyle: 'none',
+        '&:hover': {
+            boxShadow: '$lg',
+            opacity: '$hover',
         },
-        size: {
-            sm: {
-                p: ['6px 10px'],
-            },
-            md: {
-                p: ['8px 20px'],
+        variants: {
+            style: {
+                primary: {
+                    color: '$white',
+                    gradient: '$gradient-primary-button',
+                },
+                secondary: {
+                    color: '$textOnSecondary',
+                    gradient: '$gradient-secondary-button',
+                },
+                'action-primary': {
+                    p: ['4px 16px'],
+                    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',
+                },
             },
-            lg: {
-                p: ['15px 25px'],
+            size: {
+                sm: {
+                    p: ['6px 10px'],
+                },
+                md: {
+                    p: ['8px 20px'],
+                },
+                lg: {
+                    p: ['15px 25px'],
+                },
             },
         },
-    },
-});
+    });

src/atoms/card.ts

@@ -1,10 +1,11 @@
-import { styled } from '../styles';
+// import { styled } from '../styles';
 
-export const Card = styled('div', {
-    display: 'flex',
-    w: '100%',
-    bg: 'white',
-    rounded: '20px',
-    justify: 'center',
-    boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.25)',
-});
+export const Card = (styled: any) =>
+    styled('div', {
+        display: 'flex',
+        w: '100%',
+        bg: 'white',
+        rounded: '20px',
+        justify: 'center',
+        boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.25)',
+    });

src/atoms/index.ts

@@ -1,6 +1,14 @@
-export * from './button';
-export * from './card';
-export * from './input';
-export * from './overlay';
-export * from './text';
-export * from './textConfig';
+import { Button } from './button';
+import { Card } from './card';
+import { Input } from './input';
+import { Overlay, OverlayInteract } from './overlay';
+import { Text } from './text';
+
+export const sidanAtoms = (styled: any) => ({
+    Card: Card(styled),
+    Button: Button(styled),
+    Input: Input(styled),
+    Overlay: Overlay(styled),
+    OverlayInteract: OverlayInteract(styled),
+    Text: Text(styled),
+});

src/atoms/input.ts

@@ -1,20 +1,19 @@
-import { styled } from '../styles';
-
-export const Input = styled('input', {
-    boxShadow: 'none',
-    borderStyle: 'none',
-    border: '1px solid',
-    textColor: '#666666',
-    background: 'white',
-    p: ['12px 16px'],
-    h: '100%',
-    w: '100%',
-    text: ['16px'],
-    rounded: '10px',
-    '&::placeholder': {
+export const Input = (styled: any) =>
+    styled('input', {
+        boxShadow: 'none',
+        borderStyle: 'none',
+        border: '1px solid',
         textColor: '#666666',
-    },
-    '&:hover': {
-        outline: 'none',
-    },
-});
+        background: 'white',
+        p: ['12px 16px'],
+        h: '100%',
+        w: '100%',
+        text: ['16px'],
+        rounded: '10px',
+        '&::placeholder': {
+            textColor: '#666666',
+        },
+        '&:hover': {
+            outline: 'none',
+        },
+    });

src/atoms/overlay.ts

@@ -1,24 +1,24 @@
-import { styled } from '../styles';
+export const Overlay = (styled: any) =>
+    styled('div', {
+        position: 'fixed',
+        top: '0',
+        left: '0',
+        width: '100dvw',
+        height: '100dvh',
+        display: 'flex',
+        justify: 'center',
+        items: 'center',
+        backdropFilter: 'blur(3px)',
+        zIndex: 999,
+        color: 'white',
+    });
 
-export const Overlay = styled('div', {
-    position: 'fixed',
-    top: '0',
-    left: '0',
-    width: '100dvw',
-    height: '100dvh',
-    display: 'flex',
-    justify: 'center',
-    items: 'center',
-    backdropFilter: 'blur(3px)',
-    zIndex: 999,
-    color: 'white',
-});
-
-export const OverlayInteract = styled('div', {
-    position: 'absolute',
-    top: '0',
-    left: '0',
-    width: '100%',
-    height: '100%',
-    zIndex: -1,
-});
+export const OverlayInteract = (styled: any) =>
+    styled('div', {
+        position: 'absolute',
+        top: '0',
+        left: '0',
+        width: '100%',
+        height: '100%',
+        zIndex: -1,
+    });