v1.0.0

.distignore

@@ -33,7 +33,8 @@ Gruntfile.js
 .storybook
 babel.config.js
 jsconfig.json
-postcss.config.js
+postcss.config.cjs
+src
 package-lock.json
 phpunit.xml
 phpunit.xml.dist

.eslintrc.js

@@ -12,9 +12,10 @@ module.exports = {
 			},
 			alias: {
 				map: [
-					['@', './src'],
+					['@/icons', './src/ui/icons.js'],
 					['@/components', './src/components'],
 					['@/utilities', './src/utilities'],
+					['@', './src'],
 				],
 				extensions: ['.js', '.jsx'],
 			},
@@ -31,6 +32,7 @@ module.exports = {
 		'react-hooks/exhaustive-deps': 'off',
 		'jsx-a11y/label-has-associated-control': 'off',
 		'jsx-a11y/no-noninteractive-element-interactions': 'off',
+		'jsx-a11y/anchor-is-valid': 'off',
 	},
 	globals: {
 		localStorage: 'readonly',

.github/CODE_OF_CONDUCT.md

@@ -0,0 +1,35 @@
+# The Code of Conduct - Who You Are
+
+At Force UI, we believe in fostering a collaborative and respectful environment that empowers each team member to excel, contribute, and thrive. Our team code of conduct outlines the principles and values that guide your interactions, decisions, and contributions to the success of Force UI.
+
+## Respect and Courtesy:
+You prioritize maintaining a courteous and respectful atmosphere within our team. You treat each team member with kindness, actively listen to diverse opinions, and engage in constructive dialogue. Disagreements are viewed as opportunities for growth, and you approach conflicts with empathy and a commitment to finding common ground.
+
+## Problem Solving Excellence:
+You are a dedicated problem solver who approaches challenges with analytical rigour. You thoroughly analyze issues, recreate them, and trace them back to their source. Before committing any code, you ensure it is thoroughly tested and effectively addresses the problem. Writing comprehensive tests alongside your solutions is a fundamental part of your commitment to quality.
+
+## Curiosity and Learning:
+Curiosity fuels your desire to learn and grow. You embrace opportunities to expand your knowledge and skills, continuously seeking to level up. You approach new concepts with enthusiasm and invest time in researching and learning, contributing to your own growth and the success of Force UI.
+
+## Respect for Legacy Code:
+You respect the legacy code that forms the foundation of Force UI. You enjoy delving into the intricacies of older code, refactoring it, and overcoming the challenges that come with it. Your dedication to understanding and improving existing code contributes to the longevity and success of our platform.
+
+## Customer-Centric Mindset:
+Helping customers resolve issues is a source of deep satisfaction for you. You are compelled to provide the best possible assistance, going beyond surface-level replies to ensure customers receive effective solutions. Your commitment to helping people reflects your dedication to creating a positive experience for Force UI users.
+
+## Thoroughness and Accuracy:
+You prioritise accuracy over assumptions. When faced with uncertainty, you pause to research, ask questions, and verify information before taking action. The idea of providing incorrect information is contrary to your standards, and you are committed to ensuring accuracy in all your communications.
+
+## Value in Consistency:
+You value consistency over personal preferences. You readily adopt new coding styles, standards, and tools that contribute to uniformity in your work. You identify elegant solutions amidst potential over-engineering options, ensuring our codebase remains streamlined and efficient.
+Independent and Proactive:
+While collaboration is valued, you recognize that your best work often happens in focused isolation. You proactively tackle tasks without waiting for direction, taking ownership of projects and responsibilities. Your initiative contributes to the agility and progress of Force UI.
+
+## Clear Communication:
+You understand that clear, concise written communication is essential for remote teams. When submitting pull requests for review, you provide context and explanations to ensure a comprehensive understanding of your contributions. Effective communication is a cornerstone of our collaborative success.
+
+## Accountability and Growth:
+You take ownership of both successes and failures. Constructive criticism is embraced as an avenue for growth and improvement. You encourage open dialogue and provide constructive feedback to help each other excel professionally, fostering an environment of continuous learning and development.
+
+## Remote Availability:
+Recognizing the remote nature of our work, you understand the importance of time and remote availability. You adhere to agreed-upon schedules and ensure your availability for meetings, discussions, and collaborative efforts, promoting effective teamwork despite geographical distances. You emphasize the effective use of communication tools such as Slack.

.github/CONTRIBUTING.md

@@ -0,0 +1,104 @@
+# Force UI Contributing Guide
+
+Thank you for your interest in contributing to @bsf/force-ui! Please feel free to put up a PR for any issue, feature request or enhancement.
+
+## Development Setup
+
+Force UI is using npm workspaces and you need to execute the following commands after clonning the repository.
+
+1. Install dependencies
+
+```bash
+npm install
+```
+
+2. Run the project in a terminal
+
+```bash
+npm run dev
+```
+
+3. Run the project storybook in another terminal
+
+```bash
+npm run storybook
+```
+
+4. Viewing the Storybook
+
+Open http://localhost:6006 in the browser
+
+## Force UI Structure & Architechture
+
+Force UI library follows the Atomic Design Pattern to structure the library.
+
+**Atomic Development**
+The five distinct levels of atomic design — atoms > molecules > organisms > templates > pages — map incredibly well to React’s component-based architecture.
+
+**Atoms:**
+Basic building blocks of matter, such as a button, input or a form label. They’re not useful on their own.
+
+**Molecules:**
+Grouping atoms together, such as combining a button, input and form label to build functionality.
+
+**Organisms:**
+Combining molecules together to form organisms that make up a distinct section of an interface (i.e. navigation bar)
+
+**Templates:**
+Consisting mostly of groups of organisms to form a page — where clients can see a final design in place.
+
+**Pages:**
+An ecosystem that views different template renders. We can create multiple ecosystems into a single environment — the application.
+
+
+File Structure
+Since React follows a component-based architecture, it’s pretty common to organise your components based on the type, rather than feature. All the components are inside of the components folder.
+
+This folder includes the folowing files:
+1. index.jsx
+2. Component js files
+3. readme.md file having the documentation for that component
+4. stories.js file having the storybook story for that component
+
+![Folder Structure of a component](https://github.com/user-attachments/assets/82c92c75-853b-4cf0-9301-ce54e26f4021)
+
+
+## Reporting Issues & Features Requests
+
+If you notice any bugs in the code, see some code that can be improved, or have features you would like to be added, please create a [bug report](https://github.com/brainstormforce/force-ui/issues/new) or a [feature request](https://github.com/brainstormforce/force-ui/issues/new)!
+
+If you want to open a PR that fixes a bug or adds a feature, then we can't thank you enough!
+
+## Working on Issues
+
+Please feel free to take on any issue that's currently open. Just send a comment in order to let us know you're working on it so we can assign that specific issue to you.
+
+## Opening a Pull Request
+
+What we ask you, is that before working on a large change, it is best to open an issue first to discuss it with the maintainers or if an issue was already opened, comment your intention of opening up a PR. All this can be discussed on the slack channel [#force-ui](https://brainstormforce.slack.com/archives/C0783G47NGK)
+
+When in doubt, keep your pull requests small. To give a PR the best chance of getting accepted, don't bundle more than one feature or bug fix per pull request. It's always best to create two smaller PRs than one big one.
+
+### Branch Types
+
+1. **feature/version/branch** - New implementation code that is required for product development. Everything that is not considered a defect and brings value is considered a feature. Example: **feature/react/gbxb-483-enable-ssr**
+2. **bug/version/branch** - Defects, either flagged by the QA team or any of the parties involved in the project, missing functionality or wrongly implemented functionality, they all fall into the “bug” category. Branches that solve such defects should be prefixed with the **bug** prefix. Example: **bug/react/gbxb-483-enable-ssr**
+3. **docs/version/branch** — Any work that relates to project-level and code-level documentation. Whether it is work related to the project **README**, or code-level documentation, branches that host this type of work should use this prefix. Example: **docs/react/gbxb-483-enable-ssr**
+
+### Commit Formatting
+
+Every file changed should have its own commit message, please don't do one commit for multiple changes.
+
+### Submitting a Pull Request
+
+1. Each PR should be compared with the **dev** branch not with the **master**.
+2. For @bsf/force-ui add **@vrundakansara** as a reviewer.
+4. Once your PR approved we'll merge it to the **staging** branch and you'll become one of the contributors to the @bsf/force-ui library. 🥳
+
+## Branches Explained
+
+As you can see we have multiple branches:
+
+- **master**: This branch stores the latest stable version of @bsf/force-ui.
+- **staging**: This is the **pre-release** branch of @bsf/force-ui, and this is where everything is happening before releasing on master
+- **dev**: This is the **development** branch of @bsf/force-ui, and this is where development is happening before moving to UAT.

.github/PHILOSOPHY.md

@@ -0,0 +1,17 @@
+# Force UI Philosophy
+
+Welcome to the heart and soul of Force UI - the Philosophy.
+
+Here, we craft the very essence that drives us, the guiding principles that light our path. Our philosophy is more than just words – it's the compass that helps us make decisions, set our values, and code with a purpose. Every line of code, every design choice, and every innovation we create is rooted in these beliefs.
+
+## Walk-in Users Shoes
+Think like our users. Walk in their shoes. It's not just about code; it's about crafting a seamless experience. With every decision we make, every feature we add, and every button we place, we envision the world through their eyes. We are architects of ease, understanding that the best solutions emerge when we place our users at the heart of everything we do.
+
+## Clean, Lean and Speed
+Speed isn't just a feature; it's a promise we keep. We believe that in the digital realm, every second counts. Our commitment to lean code and efficient architecture ensures that our users' experience is swift and seamless. We optimize for performance because we know that time is our users' most valuable asset.
+
+## Good Design is Our Core
+Beauty lies in the details, and we leave no stone unturned. Our design isn't just aesthetics; it's a conduit for delivering an exceptional user experience. Every pixel, every colour, and every interaction is meticulously crafted to delight and engage. We believe in functional elegance that not only looks great but also works like a charm.
+
+## Simplicity Reigns
+In a world of complexity, we embrace simplicity. We take intricate challenges and distil them into straightforward solutions. Complexity is the enemy of progress, and we stand firm in our commitment to making the intricate seem effortless. Simple isn't just easier; it's better.

.github/workflows/chromatic.yml

@@ -20,6 +20,7 @@ jobs:
             - name: Install dependencies
               # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
               run: npm install && npm run build
+
             - name: Run Chromatic
               uses: chromaui/action@latest
               with:

.github/workflows/storybook-deployment.yml

@@ -0,0 +1,32 @@
+name: 'Chromatic GitHub Deployment'
+
+on:
+    push:
+        branches:
+            - master
+
+jobs:
+    chromatic:
+        name: Run Chromatic
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+              with:
+                  fetch-depth: 0
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+            - name: Install dependencies
+              # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
+              run: npm install && npm run build && npm run deploy-storybook -- --ci
+              env:
+                  GH_TOKEN: ${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}
+
+            - name: Run Chromatic
+              uses: chromaui/action@latest
+              with:
+                  # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
+                  projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+                  zip: true
+                  onlyChanged: true # 👈 Required option to enable TurboSnap

.storybook/main.js

@@ -29,6 +29,9 @@ const config = {
 	},
 	webpackFinal: async (config) => {
 		config.resolve.alias = {
+			'@/icons': path.resolve(__dirname, '..', 'src/ui/icons'),
+			'@/components': path.resolve(__dirname, '..', 'src/components'),
+			'@/utilities': path.resolve(__dirname, '..', 'src/utilities'),
 			'@': path.resolve(__dirname, '..', 'src'),
 		};
 

.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<style>
+	body * {
+		font-family: 'Figtree', sans-serif;
+	}
+</style>