feat: initial build

.eslintrc

@@ -0,0 +1,36 @@
+{
+    "env": {
+        "es2021": true,
+        "node": true
+    },
+    "extends": [
+        "airbnb-base",
+        "eslint:recommended",
+        "plugin:import/errors",
+        "plugin:import/warnings",
+        "plugin:import/typescript",
+        "plugin:@typescript-eslint/recommended",
+        "prettier"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": ["@typescript-eslint/eslint-plugin", "prettier"],
+    "rules": {
+        "import/prefer-default-export": "off",
+        "@typescript-eslint/no-inferrable-types": "off",
+        "import/extensions": "off",
+        "camelcase": "off",
+        "prettier/prettier": 0,
+        "no-console": "off"
+    },
+    "settings": {
+        "import/resolver": {
+            "typescript": {
+                "alwaysTryTypes": true
+            }
+        }
+    }
+}

.github/workflows/npm-publish.yml

@@ -0,0 +1,43 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  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
+
+  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}}

.gitignore

@@ -0,0 +1,5 @@
+.env
+node_modules
+.build
+dist
+.vscode

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged
+yarn lint

.prettierignore

@@ -0,0 +1,2 @@
+node_modules
+coverage

.prettierrc

@@ -0,0 +1,7 @@
+{
+    "singleQuote": true,
+    "trailingComma": "all",
+    "tabWidth": 4,
+    "semi": true,
+    "printWidth": 100
+}

README.md

@@ -0,0 +1,3 @@
+# SIDAN UI
+
+This is the UI library developed by SIDAN Lab for quick development with modern design.

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] };

package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@sidan-lab/sidan-ui",
+  "description": "UI library from SIDAN Lab",
+  "version": "0.0.1",
+  "license": "Apache-2.0",
+  "main": "dist/cjs/index.js",
+  "module": "dist/mjs/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/mjs/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "homepage": "https://github.com/sidan-lab/sidan-ui",
+  "author": {
+    "name": "sidan-lab",
+    "email": "[email protected]"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sidan-lab/sidan-ui.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "react",
+    "stitches",
+    "ui"
+  ],
+  "scripts": {
+    "pub": "yarn ci && npm publish --access public",
+    "lint": "eslint 'src/*.ts' --fix",
+    "prepare": "husky install"
+  },
+  "dependencies": {
+    "@stitches/react": "^1.2.8",
+    "eslint": "8.35.0",
+    "eslint-config-next": "13.2.3",
+    "typescript": "4.9.5"
+  },
+  "lint-staged": {
+    "**/*.{js,ts,}": [
+      "yarn prettier --write",
+      "yarn eslint --fix"
+    ]
+  },
+  "devDependencies": {
+    "@types/node": "18.14.6",
+    "@commitlint/cli": "^17.4.3",
+    "@commitlint/config-conventional": "^17.4.3",
+    "@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-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

@@ -0,0 +1,55 @@
+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',
+            },
+        },
+        size: {
+            sm: {
+                p: ['6px 10px'],
+            },
+            md: {
+                p: ['8px 20px'],
+            },
+            lg: {
+                p: ['15px 25px'],
+            },
+        },
+    },
+});

src/atoms/index.ts

@@ -0,0 +1 @@
+export * from './button';

src/index.ts

@@ -0,0 +1 @@
+export * from './atoms';

src/styles/animations.ts

@@ -0,0 +1,7 @@
+import { keyframes } from '@stitches/react';
+
+const spinning = keyframes({
+    '0%': { transform: 'rotate(0deg)' },
+    '100%': { transform: 'rotate(360deg)' },
+});
+export { spinning };

src/styles/index.ts

@@ -0,0 +1,2 @@
+export * from './tokens';
+export * from './stitches.config';

src/styles/stitches.config.ts

@@ -0,0 +1,73 @@
+import type * as Stitches from '@stitches/react';
+import { createStitches, defaultThemeMap } from '@stitches/react';
+import {
+    ThemeTypes,
+    backgroundImages,
+    borderRadius,
+    colors,
+    filters,
+    fonts,
+    medias,
+    opacities,
+    shadows,
+    sizes,
+    spacings,
+    transitions,
+    utils,
+    zIndices,
+} from './tokens';
+
+export const NAVBAR_HEIGHT = '130px';
+export const NAVBAR_MOBILE_HEIGHT = '89px';
+export const {
+    config,
+    createTheme,
+    css,
+    getCssText,
+    globalCss,
+    styled,
+    theme: stitchesTheme,
+    keyframes,
+} = createStitches({
+    themeMap: {
+        ...defaultThemeMap,
+        opacity: 'opacities',
+        backgroundImage: 'backgroundImage',
+        borderStyle: 'borderStyle',
+    },
+    theme: {
+        borderStyles: {},
+        borderWidths: {},
+        colors: { ...colors.light },
+        fonts: { ...fonts.families },
+        fontSizes: { ...fonts.sizes },
+        fontWeights: { ...fonts.weights },
+        letterSpacings: { ...fonts.letterSpacings },
+        lineHeights: { ...fonts.lineHeights },
+        radii: { ...borderRadius },
+        shadows: { ...shadows },
+        sizes: { ...sizes },
+        space: { ...spacings },
+        transitions: { ...transitions },
+        opacities: { ...opacities },
+        zIndices: { ...zIndices },
+        filters: { ...filters },
+        backgroundImage: { ...backgroundImages },
+    },
+    utils: { ...utils },
+    media: { ...medias },
+});
+
+export type CreateThemeProps = ReturnType<typeof createTheme>;
+export type StitchesConfigProps = Stitches.CSS<typeof config>;
+
+export const theme: {
+    [key in ThemeTypes]: CreateThemeProps;
+} = {
+    dark: createTheme({
+        colors: colors.dark,
+    }),
+    light: createTheme({
+        colors: colors.light,
+    }),
+};