@newtonschool/grauity 1.3.0 → 2.0.0-beta.0

package/README.md

@@ -26,7 +26,7 @@ Inspired by the natural laws that guide the cosmos, **gra.UI.ty** (pronounced "g
 
 ### Philosophy
 
-Like gravity itself, the principles of great design are universal, omnipresent, yet often unobserved. With gra.UI.ty, we aim to tap into these fundamental elements to craft UI components that not only look stunning but feel inherently right.
+Like the gravitational force itself, the principles of great design are universal, omnipresent, yet often unobserved. With gra.UI.ty, we aim to tap into these fundamental elements to craft UI components that not only look stunning but feel inherently right.
 
 ### Component Naming Convention
 
@@ -37,77 +37,64 @@ For example, `NSButton`, `NSTable`, `NSInput`
 
 gra.UI.ty is also affectionately known as **grauity**, **graUIty** or simply as **gravity**
 
-## Key Features
-
--   **Comprehensive Component Set:** From buttons and dialogs to complex data grids and sliders, gra.UI.ty has everything you need. (Coming soon!)
--   **Semantic and Mindful Components:** Our components are more than just divs. Each one is thoughtfully designed with semantic HTML for better accessibility and SEO. We aim to ensure that each component has a clear and meaningful structure.
--   **Modular and Extensible:** Integrate seamlessly with your projects, adding only what you need without bloating your codebase.
--   **Theming and Customization:** Easily adapt the components to match your brand or project’s aesthetic. (Coming soon!)
--   **Accessibility First:** Built with accessibility in mind, ensuring that your applications are usable by everyone. (We'll get there...)
-
 ## Setup gra.UI.ty to make it your own!
 
 ### Developing Components
 
-To develop components gra.UI.ty locally, follow these steps:
+To start your development journey in grauity, follow these steps:
 
 ```bash
-# Install all packages via NPM in grauity
-grauity$: npm install
+# Install all packages in grauity
+npm install
 
-# Initialize submodules for iconland
-grauity$: git submodule init
-grauity$: git submodule update --recursive
+# Update submodules (mainly iconland, the submodule for icons)
+git submodule init
+git submodule update --recursive
 
-# Build icons when running for first time
-grauity$: npm run build-icons
+# Build icons (required when running for first time)
+npm run build-icons
 
-# To run storybook, run this command in grauity
-grauity$: npm run storybook
+# Run grauity Storybook
+npm run storybook
 # Then head to localhost:6006
 
-# To build storybook, run this command in grauity
-grauity$: npm run build-storybook
+# To build grauity Storybook docs, run this command in grauity
+npm run build-storybook
 ```
 
-### Integrating locally with newton-web
+### Integrating locally with your app for side-by-side development & testing
 
-To integrate grauity locally with newton-web, follow these steps:
+To integrate grauity locally with your app, follow these steps:
 
 ```bash
-# Firstly, install all packages via NPM in grauity
+# Install all packages in grauity
 grauity$: npm install
 
-# To build grauity, run this command
+# Build grauity
 grauity$: npm run build
 
-# Then, run these commands in newton-web:
-newton-web$: npm install ../grauity
-# This is assuming `grauity` and `newton-web` share same parent folder
+# Install local version of grauity
+your-app$: npm install ../grauity
 
-# Now, link react, react-dom from grauity to newton-web:
-newton-web$: npm link ../gruity/node_modules/react ../gruity/node_modules/react-dom --legacy-peer-deps
-
-# Finally, run newton-web
-newton-web$: npm run dev
+# Link react, react-dom from grauity to your-app:
+your-app$: npm link ../gruity/node_modules/react ../gruity/node_modules/react-dom --legacy-peer-deps
 ```
 
 After you have made changes in grauity, build it.
-
 ```bash
 grauity$: npm run build
 ```
 
 If changes are not showing up even after rebuilding, you may
-have to delete `newton-web/node_modules/@newtonschool/grauity`
-and install it again using
-
+have to delete `your-app/node_modules/@newtonschool/grauity` folder
+and install `grauity` again:
 ```bash
-newton-web$: npm i ../grauity --legacy-peer-deps
-newton-web$: npm run dev
+grauity$: npm run build
+
+your-app$: npm install ../grauity
 ```
 
-Then simply import components you want from `@newtonschool/grauity` in `newton-web` like so:
+Then simply import components you want from `@newtonschool/grauity` in `your-app` like so:
 
 ```js
 import { NSButton, BUTTON_VARIANTS_ENUM } from '@newtonschool/grauity';
@@ -130,37 +117,70 @@ export const MyComponent = () => (
 );
 ```
 
-## How to's
 
-### Add icons
+# How to's
 
-Adding new icons is easy. Design team to provide `.svg` files for new icons, and they are to be added to the [./iconland/seeds/](iconland/seeds) directory. Then follow these steps:
+## Add new icons from `.svg` files
 
-### 0. Update the iconland submodule in grauity
+### 1. Update the iconland submodule in grauity
 
 ```bash
 grauity$: git submodule update --remote --merge
 ```
 
-#### 1. Generate icons
+### 2. Add your `.svg` files
 
-```bash
-grauity$: npm run build-icons:generate
-```
+To add a new font icon, add your `.svg` files for the new icon in the [./iconland/seeds/](iconland/seeds) directory in the [iconland](./iconland) submodule.
 
-#### 2. Optimise icons (from [[iconland/seeds/]](iconland/seeds/) to [iconland/optimised/](iconland/optimised/) )
+
+#### 3. Optimize & Generate new font files
 
 ```bash
 grauity$: npm run build-icons:optimize
+grauity$: npm run build-icons:generate
 ```
-
-#### 3. Build font icons from optimised icons
-
+*Alternatively*, run the command
 ```bash
 grauity$: npm run build-icons
 ```
 
-### Use icons in newton-web
+Font files will be created in [ui/fonts](ui/fonts) folder.
+
+
+## Use theming in your React app
+
+Without theming, only foundational (theme agnostic) CSS variables (found here: [constantGlobalStyle](ui/themes/GlobalStyle.ts)) will be provided.
+
+To enable theming, wrap your components with `GrauityThemeProvider`:
+```js
+import { GrauityThemeProvider } from '@newtonschool/grauity';
+
+const App = ({ children, ...props }) => {
+  return (
+    <GrauityThemeProvider>
+      {children}
+    </GrauityThemeProvider>
+  )
+};
+
+export default App;
+```
+
+
+Theming can be controlled by providing different class names to your root/local DOM elements, like the body element.
+
+  - Add class `grauity-theme-light` to use the light theme
+  - Add class `grauity-theme-dark` to use the dark theme
+
+Now, you will be provided with the foundational as well as themed CSS variables, whose
+value will change depending on the theme applied.
+
+These themed CSS variables can be found here:
+  - [Dark theme color mapping](./ui/themes/darkThemeConstants.ts)
+  - [Light theme color mapping](./ui/themes/lightThemeConstants.ts)
+
+
+## Use icons in your React app
 
 To use grauity icons, add the following import in `global-styles.scss` or any root-level CSS/SCSS file. Make sure CSS/SCSS loaders are setup properly in your app.
 

package/dist/css/grauity-icons.scss

@@ -2,10 +2,10 @@ $grauity-icons-font: "grauity-icons";
 
 @font-face {
     font-family: $grauity-icons-font;
-    src: url("../fonts/grauity-icons.eot?c9931559a0ed28cc83c7f70925352e12#iefix") format("embedded-opentype"),
-url("../fonts/grauity-icons.woff?c9931559a0ed28cc83c7f70925352e12") format("woff"),
-url("../fonts/grauity-icons.woff2?c9931559a0ed28cc83c7f70925352e12") format("woff2"),
-url("../fonts/grauity-icons.ttf?c9931559a0ed28cc83c7f70925352e12") format("truetype");
+    src: url("../fonts/grauity-icons.eot?d9556eb192f4e93e92a0e65fb7311b2c#iefix") format("embedded-opentype"),
+url("../fonts/grauity-icons.woff?d9556eb192f4e93e92a0e65fb7311b2c") format("woff"),
+url("../fonts/grauity-icons.woff2?d9556eb192f4e93e92a0e65fb7311b2c") format("woff2"),
+url("../fonts/grauity-icons.ttf?d9556eb192f4e93e92a0e65fb7311b2c") format("truetype");
 }
 
 i[class^="grauity-icon-"]:before, i[class*=" grauity-icon-"]:before {
@@ -260,166 +260,180 @@ $grauity-icons-map: (
     "double-check": "\f1ee",
     "download-filled": "\f1ef",
     "download": "\f1f0",
-    "email-alt-filled": "\f1f1",
-    "email-alt": "\f1f2",
-    "email-filled": "\f1f3",
-    "email": "\f1f4",
-    "filter-filled": "\f1f5",
-    "filter": "\f1f6",
-    "floppy-filled": "\f1f7",
-    "floppy": "\f1f8",
-    "forward-filled": "\f1f9",
-    "forward": "\f1fa",
-    "gear-filled": "\f1fb",
-    "gear": "\f1fc",
-    "git-commit-filled": "\f1fd",
-    "git-commit": "\f1fe",
-    "globe-filled": "\f1ff",
-    "globe": "\f200",
-    "grip-hortizontal-filled": "\f201",
-    "grip-hortizontal": "\f202",
-    "grip-vertical-filled": "\f203",
-    "grip-vertical": "\f204",
-    "growth-down-filled": "\f205",
-    "growth-down": "\f206",
-    "growth-up-filled": "\f207",
-    "growth-up": "\f208",
-    "help-filled": "\f209",
-    "help": "\f20a",
-    "hold-filled": "\f20b",
-    "hold": "\f20c",
-    "home-filled": "\f20d",
-    "home": "\f20e",
-    "hourglass-filled": "\f20f",
-    "hourglass": "\f210",
-    "kebab-horizontal-filled": "\f211",
-    "kebab-horizontal": "\f212",
-    "kebab-vertical-filled": "\f213",
-    "kebab-vertical": "\f214",
-    "link-filled": "\f215",
-    "link": "\f216",
-    "list-checked-filled": "\f217",
-    "list-checked": "\f218",
-    "list-filled": "\f219",
-    "list": "\f21a",
-    "load-filled": "\f21b",
-    "load": "\f21c",
-    "loudspeaker-filled": "\f21d",
-    "loudspeaker": "\f21e",
-    "map-pin-alt1-filled": "\f21f",
-    "map-pin-alt1": "\f220",
-    "map-pin-alt2-filled": "\f221",
-    "map-pin-alt2": "\f222",
-    "map-pin-filled": "\f223",
-    "map-pin": "\f224",
-    "maximize-filled": "\f225",
-    "maximize": "\f226",
-    "menu-alt2-filled": "\f227",
-    "menu-alt2": "\f228",
-    "menu-filled": "\f229",
-    "menu-grid-filled": "\f22a",
-    "menu-grid": "\f22b",
-    "menu": "\f22c",
-    "microchip-filled": "\f22d",
-    "microchip": "\f22e",
-    "minimize-filled": "\f22f",
-    "minimize": "\f230",
-    "minus-circle-filled": "\f231",
-    "minus-circle": "\f232",
-    "minus-square-filled": "\f233",
-    "minus-square": "\f234",
-    "moon-filled": "\f235",
-    "moon": "\f236",
-    "new-tab-filled": "\f237",
-    "new-tab": "\f238",
-    "paper-clip-filled": "\f239",
-    "paper-clip": "\f23a",
-    "plus-circle-filled": "\f23b",
-    "plus-circle": "\f23c",
-    "plus-filled": "\f23d",
-    "plus-square-filled": "\f23e",
-    "plus-square": "\f23f",
-    "plus": "\f240",
-    "printer-filled": "\f241",
-    "printer": "\f242",
-    "quiz-filled": "\f243",
-    "quiz": "\f244",
-    "refresh-filled": "\f245",
-    "refresh": "\f246",
-    "remove-filled": "\f247",
-    "remove": "\f248",
-    "reply-filled": "\f249",
-    "reply": "\f24a",
-    "screenshare-start-filled": "\f24b",
-    "screenshare-start": "\f24c",
-    "screenshare-stop-filled": "\f24d",
-    "screenshare-stop": "\f24e",
-    "search-filled": "\f24f",
-    "search": "\f250",
-    "share-filled": "\f251",
-    "share": "\f252",
-    "shield-alert-filled": "\f253",
-    "shield-alert": "\f254",
-    "shield-check-filled": "\f255",
-    "shield-check": "\f256",
-    "shield-filled": "\f257",
-    "shield-lock-filled": "\f258",
-    "shield-lock": "\f259",
-    "shield-x-filled": "\f25a",
-    "shield-x": "\f25b",
-    "shield": "\f25c",
-    "sidebar-left-filled": "\f25d",
-    "sidebar-left": "\f25e",
-    "sidebar-right-filled": "\f25f",
-    "sidebar-right": "\f260",
-    "signin-filled": "\f261",
-    "signin": "\f262",
-    "signout-filled": "\f263",
-    "signout": "\f264",
-    "slider-filled": "\f265",
-    "slider": "\f266",
-    "square-filled": "\f267",
-    "square": "\f268",
-    "sticky-note-filled": "\f269",
-    "sticky-note": "\f26a",
-    "sun-filled": "\f26b",
-    "sun": "\f26c",
-    "thumbs-down-filled": "\f26d",
-    "thumbs-down": "\f26e",
-    "thumbs-up-filled": "\f26f",
-    "thumbs-up": "\f270",
-    "thunder-filled": "\f271",
-    "thunder": "\f272",
-    "upload-filled": "\f273",
-    "upload": "\f274",
-    "wrench-filled": "\f275",
-    "wrench": "\f276",
-    "bell-filled": "\f277",
-    "bell": "\f278",
-    "calender-check-filled": "\f279",
-    "calender-check": "\f27a",
-    "calender-filled": "\f27b",
-    "calender-plus-filled": "\f27c",
-    "calender-plus": "\f27d",
-    "calender": "\f27e",
-    "clock-filled": "\f27f",
-    "clock": "\f280",
-    "rewatch-filled": "\f281",
-    "rewatch": "\f282",
-    "stopwatch-filled": "\f283",
-    "stopwatch": "\f284",
-    "bot-filled": "\f285",
-    "bot": "\f286",
-    "person-check-filled": "\f287",
-    "person-check": "\f288",
-    "person-filled": "\f289",
-    "person-plus-filled": "\f28a",
-    "person-plus": "\f28b",
-    "person": "\f28c",
-    "user-speak-filled": "\f28d",
-    "user-speak": "\f28e",
-    "users-filled": "\f28f",
-    "users": "\f290",
+    "eda-filled": "\f1f1",
+    "eda": "\f1f2",
+    "email-alt-filled": "\f1f3",
+    "email-alt": "\f1f4",
+    "email-filled": "\f1f5",
+    "email": "\f1f6",
+    "filter-filled": "\f1f7",
+    "filter": "\f1f8",
+    "floppy-filled": "\f1f9",
+    "floppy": "\f1fa",
+    "forward-filled": "\f1fb",
+    "forward": "\f1fc",
+    "gear-filled": "\f1fd",
+    "gear": "\f1fe",
+    "git-commit-filled": "\f1ff",
+    "git-commit": "\f200",
+    "globe-filled": "\f201",
+    "globe": "\f202",
+    "grip-hortizontal-filled": "\f203",
+    "grip-hortizontal": "\f204",
+    "grip-vertical-filled": "\f205",
+    "grip-vertical": "\f206",
+    "growth-down-filled": "\f207",
+    "growth-down": "\f208",
+    "growth-up-filled": "\f209",
+    "growth-up": "\f20a",
+    "help-filled": "\f20b",
+    "help": "\f20c",
+    "hold-filled": "\f20d",
+    "hold": "\f20e",
+    "home-filled": "\f20f",
+    "home": "\f210",
+    "hourglass-filled": "\f211",
+    "hourglass": "\f212",
+    "kebab-horizontal-filled": "\f213",
+    "kebab-horizontal": "\f214",
+    "kebab-vertical-filled": "\f215",
+    "kebab-vertical": "\f216",
+    "link-filled": "\f217",
+    "link": "\f218",
+    "list-checked-filled": "\f219",
+    "list-checked": "\f21a",
+    "list-filled": "\f21b",
+    "list": "\f21c",
+    "load-filled": "\f21d",
+    "load": "\f21e",
+    "loudspeaker-filled": "\f21f",
+    "loudspeaker": "\f220",
+    "machine-learning-filled": "\f221",
+    "machine-learning": "\f222",
+    "map-pin-alt1-filled": "\f223",
+    "map-pin-alt1": "\f224",
+    "map-pin-alt2-filled": "\f225",
+    "map-pin-alt2": "\f226",
+    "map-pin-filled": "\f227",
+    "map-pin": "\f228",
+    "maximize-filled": "\f229",
+    "maximize": "\f22a",
+    "menu-alt2-filled": "\f22b",
+    "menu-alt2": "\f22c",
+    "menu-filled": "\f22d",
+    "menu-grid-filled": "\f22e",
+    "menu-grid": "\f22f",
+    "menu": "\f230",
+    "microchip-filled": "\f231",
+    "microchip": "\f232",
+    "minimize-filled": "\f233",
+    "minimize": "\f234",
+    "minus-circle-filled": "\f235",
+    "minus-circle": "\f236",
+    "minus-square-filled": "\f237",
+    "minus-square": "\f238",
+    "moon-filled": "\f239",
+    "moon": "\f23a",
+    "new-tab-filled": "\f23b",
+    "new-tab": "\f23c",
+    "paper-clip-filled": "\f23d",
+    "paper-clip": "\f23e",
+    "plus-circle-filled": "\f23f",
+    "plus-circle": "\f240",
+    "plus-filled": "\f241",
+    "plus-square-filled": "\f242",
+    "plus-square": "\f243",
+    "plus": "\f244",
+    "power-bi-filled": "\f245",
+    "power-bi": "\f246",
+    "printer-filled": "\f247",
+    "printer": "\f248",
+    "python-filled": "\f249",
+    "python": "\f24a",
+    "quiz-filled": "\f24b",
+    "quiz": "\f24c",
+    "refresh-filled": "\f24d",
+    "refresh": "\f24e",
+    "remove-filled": "\f24f",
+    "remove": "\f250",
+    "reply-filled": "\f251",
+    "reply": "\f252",
+    "retail-filled": "\f253",
+    "retail": "\f254",
+    "screenshare-start-filled": "\f255",
+    "screenshare-start": "\f256",
+    "screenshare-stop-filled": "\f257",
+    "screenshare-stop": "\f258",
+    "search-filled": "\f259",
+    "search": "\f25a",
+    "share-filled": "\f25b",
+    "share": "\f25c",
+    "shield-alert-filled": "\f25d",
+    "shield-alert": "\f25e",
+    "shield-check-filled": "\f25f",
+    "shield-check": "\f260",
+    "shield-filled": "\f261",
+    "shield-lock-filled": "\f262",
+    "shield-lock": "\f263",
+    "shield-x-filled": "\f264",
+    "shield-x": "\f265",
+    "shield": "\f266",
+    "shop-filled": "\f267",
+    "shop": "\f268",
+    "sidebar-left-filled": "\f269",
+    "sidebar-left": "\f26a",
+    "sidebar-right-filled": "\f26b",
+    "sidebar-right": "\f26c",
+    "signin-filled": "\f26d",
+    "signin": "\f26e",
+    "signout-filled": "\f26f",
+    "signout": "\f270",
+    "slider-filled": "\f271",
+    "slider": "\f272",
+    "square-filled": "\f273",
+    "square": "\f274",
+    "sticky-note-filled": "\f275",
+    "sticky-note": "\f276",
+    "sun-filled": "\f277",
+    "sun": "\f278",
+    "thumbs-down-filled": "\f279",
+    "thumbs-down": "\f27a",
+    "thumbs-up-filled": "\f27b",
+    "thumbs-up": "\f27c",
+    "thunder-filled": "\f27d",
+    "thunder": "\f27e",
+    "truck-filled": "\f27f",
+    "truck": "\f280",
+    "upload-filled": "\f281",
+    "upload": "\f282",
+    "wrench-filled": "\f283",
+    "wrench": "\f284",
+    "bell-filled": "\f285",
+    "bell": "\f286",
+    "calender-check-filled": "\f287",
+    "calender-check": "\f288",
+    "calender-filled": "\f289",
+    "calender-plus-filled": "\f28a",
+    "calender-plus": "\f28b",
+    "calender": "\f28c",
+    "clock-filled": "\f28d",
+    "clock": "\f28e",
+    "rewatch-filled": "\f28f",
+    "rewatch": "\f290",
+    "stopwatch-filled": "\f291",
+    "stopwatch": "\f292",
+    "bot-filled": "\f293",
+    "bot": "\f294",
+    "person-check-filled": "\f295",
+    "person-check": "\f296",
+    "person-filled": "\f297",
+    "person-plus-filled": "\f298",
+    "person-plus": "\f299",
+    "person": "\f29a",
+    "user-speak-filled": "\f29b",
+    "user-speak": "\f29c",
+    "users-filled": "\f29d",
+    "users": "\f29e",
 );
 
 .grauity-icon-exclamation-circle-filled:before {
@@ -1142,6 +1156,12 @@ $grauity-icons-map: (
 .grauity-icon-download:before {
     content: map-get($grauity-icons-map, "download");
 }
+.grauity-icon-eda-filled:before {
+    content: map-get($grauity-icons-map, "eda-filled");
+}
+.grauity-icon-eda:before {
+    content: map-get($grauity-icons-map, "eda");
+}
 .grauity-icon-email-alt-filled:before {
     content: map-get($grauity-icons-map, "email-alt-filled");
 }
@@ -1280,6 +1300,12 @@ $grauity-icons-map: (
 .grauity-icon-loudspeaker:before {
     content: map-get($grauity-icons-map, "loudspeaker");
 }
+.grauity-icon-machine-learning-filled:before {
+    content: map-get($grauity-icons-map, "machine-learning-filled");
+}
+.grauity-icon-machine-learning:before {
+    content: map-get($grauity-icons-map, "machine-learning");
+}
 .grauity-icon-map-pin-alt1-filled:before {
     content: map-get($grauity-icons-map, "map-pin-alt1-filled");
 }
@@ -1382,12 +1408,24 @@ $grauity-icons-map: (
 .grauity-icon-plus:before {
     content: map-get($grauity-icons-map, "plus");
 }
+.grauity-icon-power-bi-filled:before {
+    content: map-get($grauity-icons-map, "power-bi-filled");
+}
+.grauity-icon-power-bi:before {
+    content: map-get($grauity-icons-map, "power-bi");
+}
 .grauity-icon-printer-filled:before {
     content: map-get($grauity-icons-map, "printer-filled");
 }
 .grauity-icon-printer:before {
     content: map-get($grauity-icons-map, "printer");
 }
+.grauity-icon-python-filled:before {
+    content: map-get($grauity-icons-map, "python-filled");
+}
+.grauity-icon-python:before {
+    content: map-get($grauity-icons-map, "python");
+}
 .grauity-icon-quiz-filled:before {
     content: map-get($grauity-icons-map, "quiz-filled");
 }
@@ -1412,6 +1450,12 @@ $grauity-icons-map: (
 .grauity-icon-reply:before {
     content: map-get($grauity-icons-map, "reply");
 }
+.grauity-icon-retail-filled:before {
+    content: map-get($grauity-icons-map, "retail-filled");
+}
+.grauity-icon-retail:before {
+    content: map-get($grauity-icons-map, "retail");
+}
 .grauity-icon-screenshare-start-filled:before {
     content: map-get($grauity-icons-map, "screenshare-start-filled");
 }
@@ -1466,6 +1510,12 @@ $grauity-icons-map: (
 .grauity-icon-shield:before {
     content: map-get($grauity-icons-map, "shield");
 }
+.grauity-icon-shop-filled:before {
+    content: map-get($grauity-icons-map, "shop-filled");
+}
+.grauity-icon-shop:before {
+    content: map-get($grauity-icons-map, "shop");
+}
 .grauity-icon-sidebar-left-filled:before {
     content: map-get($grauity-icons-map, "sidebar-left-filled");
 }
@@ -1532,6 +1582,12 @@ $grauity-icons-map: (
 .grauity-icon-thunder:before {
     content: map-get($grauity-icons-map, "thunder");
 }
+.grauity-icon-truck-filled:before {
+    content: map-get($grauity-icons-map, "truck-filled");
+}
+.grauity-icon-truck:before {
+    content: map-get($grauity-icons-map, "truck");
+}
 .grauity-icon-upload-filled:before {
     content: map-get($grauity-icons-map, "upload-filled");
 }