feat: initalization css frame-work (#4)

* feat: add css frame work and pushlish css frame work

* feat: edit github action when publish

* feat: add nx.json file

.github/workflows/publish-nt-css.yml

@@ -0,0 +1,36 @@
+on:
+    push:
+        branches:
+            - main
+
+jobs:
+    build-and-publish:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout repository
+              uses: actions/checkout@v4
+
+            - name: Set up Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+
+            - name: Install pnpm
+              run: npm install -g pnpm
+
+            - name: Install postcss-cli
+              run: pnpm add -g postcss-cli
+
+            - name: Install dependencies
+              run: pnpm install
+              working-directory: apps/nt-css
+
+            - name: Build CSS framework
+              run: pnpm run build:css
+              working-directory: apps/nt-css
+
+            - name: Publish to npm
+              run: pnpm publish
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
+              working-directory: apps/nt-css

.vscode/extensions.json

@@ -1,19 +1,20 @@
 {
-  "recommendations": [
-    "editorconfig.editorconfig",
-    "streetsidesoftware.code-spell-checker",
-    "formulahendry.auto-close-tag",
-    "dbaeumer.vscode-eslint",
-    "lwlz.autofix",
-    "pkief.material-icon-theme",
-    "davidanson.vscode-markdownlint",
-    "eamodio.gitlens",
-    "esbenp.prettier-vscode",
-    "bradlc.vscode-tailwindcss",
-    "dbaeumer.vscode-eslint",
-    "davidanson.vscode-markdownlint",
-    "ambar.bundle-size",
-    "yoavbls.pretty-ts-errors",
-    "csstools.postcss"
-  ]
+    "recommendations": [
+        "sainoba.px-to-rem",
+        "editorconfig.editorconfig",
+        "streetsidesoftware.code-spell-checker",
+        "formulahendry.auto-close-tag",
+        "dbaeumer.vscode-eslint",
+        "lwlz.autofix",
+        "pkief.material-icon-theme",
+        "davidanson.vscode-markdownlint",
+        "eamodio.gitlens",
+        "esbenp.prettier-vscode",
+        "bradlc.vscode-tailwindcss",
+        "dbaeumer.vscode-eslint",
+        "davidanson.vscode-markdownlint",
+        "ambar.bundle-size",
+        "yoavbls.pretty-ts-errors",
+        "csstools.postcss"
+    ]
 }

.vscode/settings.json

@@ -1,10 +1,13 @@
 {
-    "css.customData": [".vscode/tailwind.json"],
     "[typescript]": {
         "editor.formatOnSave": true,
         "editor.defaultFormatter": "esbenp.prettier-vscode",
         "editor.codeActionsOnSave": {
             "source.fixAll": "always"
         }
     },
+    "files.associations": {
+        "*.css": "tailwindcss",
+        "*.scss": "tailwindcss"
+    }
 }

apps/base-ui-toolkit-react/project.json

@@ -1,45 +1,45 @@
 {
-  "targets": {
-    "typecheck": {
-      "executor": "nx:run-commands",
-      "options": {
-        "commands": ["tsc -p tsconfig.app.json --noEmit"],
-        "cwd": "apps/base-ui-toolkit-react",
-        "forwardAllArgs": false
-      }
-    }
-  },
-  "test": {
-    "executor": "@nrwl/vite:test",
-    "outputs": ["coverage/apps/base-ui-toolkit-react"],
-    "options": {
-      "passWithNoTests": true,
-      "reportsDirectory": "../../coverage/apps/sample-react-app"
-    }
-  },
-  "build": {
-    "executor": "@nrwl/vite:build",
-    "outputs": ["{options.outputPath}"],
-    "defaultConfiguration": "production",
-    "options": {
-      "outputPath": "dist/apps/base-ui-toolkit-react"
+    "targets": {
+        "typecheck": {
+            "executor": "nx:run-commands",
+            "options": {
+                "commands": ["tsc -p tsconfig.app.json --noEmit"],
+                "cwd": "apps/base-ui-toolkit-react",
+                "forwardAllArgs": false
+            }
+        }
     },
-    "configurations": {
-      "development": {
-        "mode": "development"
-      },
-      "production": {
-        "mode": "production"
-      }
-    }
-  },
-  "lint": {
-    "executor": "@nrwl/linter:eslint",
-    "outputs": ["{options.outputFile}"],
-    "options": {
-      "lintFilePatterns": [
-        "apps/base-ui-toolkit-react/**/*.{ts,tsx,js,jsx}"
-      ]
+    "test": {
+        "executor": "@nrwl/vite:test",
+        "outputs": ["coverage/apps/base-ui-toolkit-react"],
+        "options": {
+            "passWithNoTests": true,
+            "reportsDirectory": "../../coverage/apps/sample-react-app"
+        }
+    },
+    "build": {
+        "executor": "@nrwl/vite:build",
+        "outputs": ["{options.outputPath}"],
+        "defaultConfiguration": "production",
+        "options": {
+            "outputPath": "dist/apps/base-ui-toolkit-react"
+        },
+        "configurations": {
+            "development": {
+                "mode": "development"
+            },
+            "production": {
+                "mode": "production"
+            }
+        }
+    },
+    "lint": {
+        "executor": "@nrwl/linter:eslint",
+        "outputs": ["{options.outputFile}"],
+        "options": {
+            "lintFilePatterns": [
+                "apps/base-ui-toolkit-react/**/*.{ts,tsx,js,jsx}"
+            ]
+        }
     }
-  }
 }

apps/base-ui-toolkit-react/src/utils/theme.ts

@@ -1,27 +1,18 @@
-export const isPrimaryTheme = (theme: string) => {
-    return theme === 'primary'
-}
+export const isPrimaryTheme = (theme: string) => theme === 'primary'
 
-export const getBorderTheme = (theme: string) => {
-    return isPrimaryTheme(theme) ? 'border-primary' : 'border-success'
-}
+export const getBorderTheme = (theme: string) =>
+    isPrimaryTheme(theme) ? 'border-primary' : 'border-success'
 
-export const getShadowTheme = (theme: string) => {
-    return isPrimaryTheme(theme) ? 'shadow-primary' : 'shadow-success'
-}
+export const getShadowTheme = (theme: string) =>
+    isPrimaryTheme(theme) ? 'shadow-primary' : 'shadow-success'
 
-export const getBgTheme = (theme: string) => {
-    return isPrimaryTheme(theme) ? 'bg-primary' : 'bg-success'
-}
+export const getBgTheme = (theme: string) =>
+    isPrimaryTheme(theme) ? 'bg-primary' : 'bg-success'
 
-export const getHoverBorder = (theme: string) => {
-    return isPrimaryTheme(theme)
+export const getHoverBorder = (theme: string) =>
+    isPrimaryTheme(theme)
         ? 'hover:border-primary'
         : 'hover:border-success'
-}
 
-export const getActiveBgWithTheme = (theme: string) => {
-    return isPrimaryTheme(theme)
-        ? 'active:bg-primary'
-        : 'active:bg-success'
-}
+export const getActiveBgWithTheme = (theme: string) =>
+    isPrimaryTheme(theme) ? 'active:bg-primary' : 'active:bg-success'

apps/nt-css/Readme.md

@@ -0,0 +1,79 @@
+# nt-css
+
+## Overview
+
+**nt-css** is a lightweight, customizable CSS framework designed to simplify the process of styling your web projects. It leverages the power of Tailwind CSS to provide a robust set of utility classes, enabling you to build responsive and modern UIs with ease.
+
+## Features
+
+-   Simple to use
+-   Customizable with utility classes
+-   Lightweight and fast
+-   Responsive design support
+-   Integration with Tailwind CSS
+
+## Installation
+
+You can install **nt-css** via npm or pnpm.
+
+### Using npm
+
+```sh
+npm install nt-css
+```
+
+### Usage
+
+To use nt-css in your project, include the generated `styles.css` file in the `<head>` section of your HTML file.
+
+```html
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0"
+        />
+        <link
+            href="node_modules/nt-css/dist/styles.css"
+            rel="stylesheet"
+        />
+        <title>Example</title>
+    </head>
+    <body>
+        <h1 class="text-3xl font-bold underline">Hello, nt-css!</h1>
+    </body>
+</html>
+```
+
+### Customization
+
+You can customize nt-css by editing the `tailwind.config.js` file. Add your own styles or override existing ones to fit your design needs.
+
+```css
+@import 'nt-css/dist/styles.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+```js
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ['./src/**/*.{html,js}'],
+    theme: {
+        extend: {
+            colors: {
+                primary: '#ff6347',
+                secondary: '#4b5563',
+            },
+        },
+    },
+    plugins: [],
+}
+```
+
+### Acknowledgements
+
+`nt-css` is built upon the powerful Tailwind CSS framework, making it easy to use and customize. We extend our gratitude to the Tailwind CSS community for their continuous support and contributions.

apps/nt-css/nx.json

@@ -0,0 +1,23 @@
+{
+    "$schema": "./node_modules/nx/schemas/nx-schema.json",
+    "namedInputs": {
+        "default": ["{projectRoot}/**/*", "sharedGlobals"],
+        "production": ["default"],
+        "sharedGlobals": []
+    },
+    "nxCloudId": "6752610020042e40ba2adc15",
+    "plugins": [
+        {
+            "plugin": "@nx/js/typescript",
+            "options": {
+                "typecheck": {
+                    "targetName": "typecheck"
+                },
+                "build": {
+                    "targetName": "build",
+                    "configName": "tsconfig.lib.json"
+                }
+            }
+        }
+    ]
+}

apps/nt-css/package.json

@@ -0,0 +1,24 @@
+{
+    "name": "@nt-css/source",
+    "version": "1.0.0",
+    "description": "",
+    "packageManager": "[email protected]",
+    "scripts": {
+        "build:css": "pnpm exec postcss src/styles.scss -o dist/styles.css",
+        "publish:css": "pnpm run build:css && npm publish dist/apps/nt-css"
+    },
+    "engines": {
+        "node": "20"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "devDependencies": {
+        "@types/node": "20.4.9",
+        "autoprefixer": "^10.4.20",
+        "nx": "^20.0.5",
+        "postcss": "^8.4.49",
+        "tailwindcss": "^3.4.0",
+        "typescript": "^5.6.3"
+    }
+}

apps/nt-css/postcss.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+    plugins: {
+        'postcss-import': {},
+        'tailwindcss/nesting': 'postcss-nesting',
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

apps/nt-css/project.json

@@ -0,0 +1,13 @@
+{
+    "name": "nt-css",
+    "targets": {
+        "build": {
+            "executor": "@nrwl/node:build",
+            "outputs": ["{options.outputPath}"],
+            "options": {
+                "outputPath": "dist/apps/nt-css",
+                "assets": ["src/**/*"]
+            }
+        }
+    }
+}