Merge pull request #1 from AnaRangel/feature/add-button-icons-scss

Zyruks / Feature: add button icons scss

package.json

@@ -1,62 +1,66 @@
 {
-  "name": "ana-rangel-portafolio",
-  "type": "module",
-  "version": "0.0.1",
-  "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
-    "build": "astro check && astro build",
-    "preview": "astro preview",
-    "astro": "astro",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "format": "prettier --check \"**/*.{js,cjs,mjs,ts,tsx,md,json,astro}\"",
-    "format:fix": "prettier --write \"**/*.{js,cjs,mjs,ts,tsx,md,mdx,json,astro}\"",
-    "stylelint": "stylelint \"**/*.{scss,css,astro}\"",
-    "stylelint-find-rules": "stylelint-find-new-rules",
-    "stylelint:fix": "stylelint \"**/*.{scss,css,astro}\" --fix",
-    "prepare": "husky"
-  },
-  "dependencies": {
-    "@astrojs/check": "^0.5.10",
-    "@types/node": "^20.12.2",
-    "@typescript-eslint/eslint-plugin": "^7.5.0",
-    "@typescript-eslint/parser": "^7.5.0",
-    "astro": "^4.5.12",
-    "sass": "^1.74.1",
-    "typescript": "^5.4.3"
-  },
-  "devDependencies": {
-    "@commitlint/cli": "^19.2.1",
-    "@commitlint/config-conventional": "^19.1.0",
-    "@commitlint/types": "^19.0.3",
-    "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
-    "autoprefixer": "^10.4.19",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-astro": "^0.33.1",
-    "eslint-plugin-compat": "^4.2.0",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-sonarjs": "^0.25.0",
-    "husky": "^9.0.11",
-    "lightningcss": "^1.24.1",
-    "lint-staged": "^15.2.2",
-    "postcss-html": "^1.6.0",
-    "prettier-plugin-astro": "^0.13.0",
-    "stylelint": "^16.2.1",
-    "stylelint-color-format": "^1.1.0",
-    "stylelint-config-astro": "^1.0.4",
-    "stylelint-config-html": "^1.1.0",
-    "stylelint-config-rational-order-fix": "^0.1.9",
-    "stylelint-config-standard-scss": "^13.0.0",
-    "stylelint-find-new-rules": "^5.0.0",
-    "stylelint-group-selectors": "^1.0.10",
-    "stylelint-high-performance-animation": "^1.10.0",
-    "stylelint-order": "^6.0.4",
-    "stylelint-rem-over-px": "^1.0.1",
-    "stylelint-scss": "^6.2.1",
-    "stylelint-suitcss": "^5.0.0",
-    "stylelint-use-logical": "^2.1.2",
-    "stylelint-use-logical-spec": "^5.0.1"
-  }
-}
+	"name": "ana-rangel-portafolio",
+	"type": "module",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "astro dev",
+		"start": "astro dev",
+		"build": "astro check && astro build",
+		"clean": "git clean -xdf node_modules dist",
+		"preview": "astro preview",
+		"astro": "astro",
+		"lint": "eslint .",
+		"lint:fix": "eslint . --fix",
+		"format": "prettier --check \"**/*.{js,cjs,mjs,ts,tsx,md,json,astro}\"",
+		"format:fix": "prettier --write \"**/*.{js,cjs,mjs,ts,tsx,md,mdx,json,astro}\"",
+		"stylelint": "stylelint \"**/*.{scss,css,astro}\"",
+		"stylelint-find-rules": "stylelint-find-new-rules",
+		"stylelint:fix": "stylelint \"**/*.{scss,css,astro}\" --fix",
+		"prepare": "husky"
+	},
+	"dependencies": {
+		"@astrojs/check": "^0.5.10",
+		"@types/node": "^20.12.2",
+		"@typescript-eslint/eslint-plugin": "^7.5.0",
+		"@typescript-eslint/parser": "^7.5.0",
+		"astro": "^4.5.12",
+		"sass": "^1.74.1",
+		"typescript": "^5.4.3"
+	},
+	"devDependencies": {
+		"@commitlint/cli": "^19.2.1",
+		"@commitlint/config-conventional": "^19.1.0",
+		"@commitlint/types": "^19.0.3",
+		"@ianvs/prettier-plugin-sort-imports": "^4.2.1",
+		"autoprefixer": "^10.4.19",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-astro": "^0.33.1",
+		"eslint-plugin-compat": "^4.2.0",
+		"eslint-plugin-jsx-a11y": "^6.8.0",
+		"eslint-plugin-promise": "^6.1.1",
+		"eslint-plugin-sonarjs": "^0.25.0",
+		"husky": "^9.0.11",
+		"lightningcss": "^1.24.1",
+		"lint-staged": "^15.2.2",
+		"open-props": "^1.7.2",
+		"postcss-html": "^1.6.0",
+		"postcss-jit-props": "^1.0.14",
+		"postcss-scss": "^4.0.9",
+		"prettier-plugin-astro": "^0.13.0",
+		"stylelint": "^16.2.1",
+		"stylelint-color-format": "^1.1.0",
+		"stylelint-config-astro": "^1.0.4",
+		"stylelint-config-html": "^1.1.0",
+		"stylelint-config-rational-order-fix": "^0.1.9",
+		"stylelint-config-standard-scss": "^13.0.0",
+		"stylelint-find-new-rules": "^5.0.0",
+		"stylelint-group-selectors": "^1.0.10",
+		"stylelint-high-performance-animation": "^1.10.0",
+		"stylelint-order": "^6.0.4",
+		"stylelint-rem-over-px": "^1.0.1",
+		"stylelint-scss": "^6.2.1",
+		"stylelint-suitcss": "^5.0.0",
+		"stylelint-use-logical": "^2.1.2",
+		"stylelint-use-logical-spec": "^5.0.1"
+	}
+}

postcss.config.mjs

@@ -1,6 +1,11 @@
+import OpenProps from 'open-props';
+import postcssJitProps from 'postcss-jit-props';
+
 export default {
+  syntax: 'postcss-scss',
   plugins: {
     'postcss-html': {},
     autoprefixer: {},
+    'postcss-jit-props': postcssJitProps(OpenProps),
   },
 };

src/common/index.ts

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

src/common/types/button.ts

@@ -0,0 +1,18 @@
+export enum HtmlType {
+  button = 'button',
+  reset = 'reset',
+  submit = 'submit',
+}
+
+export enum ButtonSize {
+  xs = 'xs',
+  sm = 'sm',
+  base = 'base',
+  lg = 'lg',
+}
+
+export enum ButtonVariant {
+  primary = 'primary',
+  secondary = 'secondary',
+  ghost = 'ghost',
+}

src/common/types/general.ts

@@ -0,0 +1,26 @@
+export type ColorVariants =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'gray'
+  | 'stone'
+  | 'red'
+  | 'pink'
+  | 'purple'
+  | 'violet'
+  | 'indigo'
+  | 'blue'
+  | 'cyan'
+  | 'teal'
+  | 'green'
+  | 'lime'
+  | 'yellow'
+  | 'orange'
+  | 'choco'
+  | 'brown'
+  | 'sand'
+  | 'camo'
+  | 'jungle';

src/common/types/index.ts

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