Рефакторинг стилей

README.md

@@ -15,5 +15,5 @@ npm i @worksolutions/antd-react-components
 
 ```bash
 @import 'antd/dist/reset.css';
-@import "@worksolutions/antd-react-components/dist/aliases";
+@import "@worksolutions/antd-react-components/dist/styles.css";
 ```

package.json

@@ -8,9 +8,10 @@
     "publish:patch": "npm run build && npm version patch && npm publish",
     "publish:minor": "npm run build && npm version minor && npm publish",
     "publish:major": "npm run build && npm version major && npm publish",
-    "build": "rm -rf dist && cross-env NODE_ENV=production && npm run build:babel && npm run build:ts && cp **/**/**/**/*.scss dist",
+    "build": "rm -rf dist && cross-env NODE_ENV=production && npm run build:babel && npm run build:ts && npm run build:styles",
     "build:babel": "babel src -d dist --extensions '.ts,.tsx,.js,.jsx' --source-maps",
-    "build:ts": "node_modules/typescript/bin/tsc"
+    "build:ts": "node_modules/typescript/bin/tsc",
+    "build:styles": "node_modules/sass/sass.js src/shared/ui/styles/index.scss dist/styles.css"
   },
   "author": "Gevorg Danelyan",
   "license": "ISC",
@@ -44,6 +45,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "reflect-metadata": "^0.1.13",
+    "sass": "^1.64.2",
     "typedi": "^0.10.0"
   }
 }

src/shared/ui/styles/aliases/border.scss

@@ -0,0 +1,7 @@
+.borderR {
+  border-right: 1px solid;
+}
+
+.borderB {
+  border-bottom: 1px solid;
+}

src/shared/ui/styles/aliases/box.scss

@@ -0,0 +1,23 @@
+.block {
+  display: block;
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.halfWidth {
+  width: 50%;
+}
+
+.fullHeight {
+  height: 100%;
+}
+
+.heightAuto {
+  height: auto;
+}
+
+.fitContentWidth {
+  width: fit-content;
+}

src/shared/ui/styles/aliases/cursor.scss

@@ -0,0 +1,3 @@
+.defaultCursor {
+  cursor: default;
+}

src/shared/ui/styles/aliases/flex.scss

@@ -0,0 +1,33 @@
+.flex {
+  display: flex;
+}
+
+.fdColumn {
+  flex-direction: column;
+}
+
+.aiEnd {
+  align-items: flex-end;
+}
+
+.aiCenter {
+  align-items: center;
+}
+
+.jcCenter {
+  justify-content: center;
+}
+
+.jcBetween {
+  justify-content: space-between;
+}
+
+.heightHack {
+  height: 0;
+  flex: 1;
+}
+
+.widthHack {
+  width: 0;
+  flex: 1;
+}

src/shared/ui/styles/aliases/index.scss

@@ -0,0 +1,6 @@
+@import "typography";
+@import "border";
+@import "flex";
+@import "space";
+@import "cursor";
+@import "box";

src/shared/ui/styles/aliases/space.scss

@@ -0,0 +1,7 @@
+.resetPadding {
+  padding: 0;
+}
+
+.resetMargin {
+  margin: 0;
+}

src/shared/ui/styles/aliases/typography.scss

@@ -0,0 +1,3 @@
+.textAlignLeft {
+  text-align: left
+}

src/shared/ui/styles/index.scss

@@ -0,0 +1 @@
+@import "./aliases";