From 638e4041d7f13ea0e293c53e6f63baf02be803a3 Mon Sep 17 00:00:00 2001 From: Vrunda Kansara Date: Thu, 17 Oct 2024 10:41:39 +0530 Subject: [PATCH 1/7] WIP : Added readme --- README.md | 52 +++++++--------------------------------------------- 1 file changed, 7 insertions(+), 45 deletions(-) diff --git a/README.md b/README.md index 98660fbe..61a40189 100644 --- a/README.md +++ b/README.md @@ -33,9 +33,9 @@ -3. **Clone the repositories** for ForceUI and SureRank into the `plugins` folder: +3. **Clone & Setup the library** for Force UI into the `plugins` folder: -- For ForceUI: +- For Force UI: ```bash @@ -43,43 +43,11 @@ git clone cd forceui -git checkout staging - -``` - -- For SureRank: - -```bash - -git clone - -cd surerank - -git checkout fui-setup - -``` - - - ---- - - - -## Step 2: Setup ForceUI - - - -1. **Navigate to the ForceUI directory** (if not already there): - -```bash - -cd force-ui +npm run build ``` - - -2. **Install dependencies**: +4. **Install dependencies**: ```bash @@ -87,9 +55,7 @@ npm install ``` - - -3. **Build the project**: +5. **Build the project**: ```bash @@ -99,13 +65,9 @@ npm run build -4. **Link the package**: - -```bash - -npm link +--- -``` + From f1c6d350ced3829c5362053d3be720cbaac73ca5 Mon Sep 17 00:00:00 2001 From: Vrunda Kansara Date: Thu, 17 Oct 2024 11:40:16 +0530 Subject: [PATCH 2/7] Code of conduct & contributing --- .github/CODE_OF_CONDUCT.md | 0 .github/CONTRIBUTING.md | 101 +++++ README.md | 745 ++++++++++++++++++++++++++++++------- 3 files changed, 703 insertions(+), 143 deletions(-) create mode 100644 .github/CODE_OF_CONDUCT.md create mode 100644 .github/CONTRIBUTING.md diff --git a/.github/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md new file mode 100644 index 00000000..e69de29b diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md new file mode 100644 index 00000000..313bdb14 --- /dev/null +++ b/.github/CONTRIBUTING.md @@ -0,0 +1,101 @@ +# 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 inclues 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 + +## 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. \ No newline at end of file diff --git a/README.md b/README.md index 61a40189..01954144 100644 --- a/README.md +++ b/README.md @@ -1,168 +1,627 @@ -# Project Setup - - - -## Prerequisites - -- [Node.js](https://nodejs.org/) installed - -- [Local by Flywheel](https://localwp.com/) for WordPress site setup - - - ---- - - - -## Step 1: Setup WordPress Site - - - -1. **Create a WordPress site** using [Local by Flywheel](https://localwp.com/). - - - -2. **Navigate to the WordPress plugins folder**: - -``` - -/app/public/wp-content/plugins +## @bsf/force-ui + +### Documentation + +Visit https://github.com/brainstormforce/force-ui/wiki for full documentation. + +
+ +### Components - Atoms + + + +
+ +### Getting Started + +Learn how to use @bsf/force-ui components to quickly and easily create elegant and flexible pages using Tailwind CSS. + +@bsf/force-ui is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project - Tailwind CSS Installation. + +
+ +1. Install `@bsf/force-ui`. + +Force UI library can be installed using npm package manager. Since this library is still in it's alpha phase, we need to use the staging branch. + +Using Force UI as a dependency in package.json - + +```json +"dependencies": { + "@bsf/force-ui": "git+https://github.com/brainstormforce/force-ui#1.0.0" +} ``` - - -3. **Clone & Setup the library** for Force UI into the `plugins` folder: - -- For Force UI: - -```bash - -git clone +And run the following command to install the package - -cd forceui - -npm run build - -``` - -4. **Install dependencies**: ```bash - npm install - ``` -5. **Build the project**: - -```bash - -npm run build - +
+ +2. Once you install @bsf/force-ui you need to wrap your tailwind css configurations with the `withMT()` function coming from @bsf/force-ui/utils. + +```js +const withTW = require( '@bsf/force-ui/withTW' ); + +module.exports = withTW( { + content: [ './src/**/*.{js, jsx}' ], + theme: { + extend: { + colors: { + 'button-primary': '#6B21A8', + 'button-primary-hover': '#7E22CE', + 'brand-800': '#6B21A8', + 'brand-50': '#FAF5FF', + 'border-interactive': '#6B21A8', + focus: '#9333EA', + 'focus-border': '#D8B4FE', + 'toggle-on': '#6B21A8', + 'toggle-on-border': '#C084FC', + 'toggle-on-hover': '#A855F7', + }, + fontSize: { + xxs: '0.6875rem', // 11px + }, + lineHeight: { + 2.6: '0.6875rem', // 11px + }, + boxShadow: { + 'content-wrapper': + '0px 1px 1px 0px #0000000F, 0px 1px 2px 0px #0000001A', + }, + }, + }, + plugins: [], + corePlugins: { + preflight: false, + }, + important: '.surerank-styles', +} ); ``` - - ---- - - - - - -5. **Start the application**: - -```bash - -npm start +
+ +3. @bsf/force-ui comes with a default tailwind theme settings that set's the default theme/styles for components or to provide your own theme/styles to your components. You can override these give below variables in your tailwind.config.js file. + +```jsx +theme: { + extend: { + colors: { + // brand + 'brand-background-50': '#EFF6FF', + 'brand-background-hover-100': '#DBEAFE', + 'brand-200': '#BFDBFE', + 'brand-border-300': '#93C5FD', + 'brand-400': '#60A5FA', + 'brand-500': '#3B82F6', + 'brand-primary-600': '#2563EB', + 'brand-hover-700': '#1D4ED8', + 'brand-800': '#1E40AF', + 'brand-900': '#1E3A8A', + 'brand-text-950': '#172554', + // background + 'background-primary': '#FFFFFF', + 'background-secondary': '#F3F4F6', + 'background-inverse': '#111827', + 'background-brand': '#2563EB', + 'background-important': '#DC2626', + // field + 'field-primary-background': '#F9FAFB', + 'field-secondary-background': '#FFFFFF', + 'field-primary-hover': '#F3F4F6', + 'field-secondary-hover': '#F3F4F6', + 'field-dropzone-background': '#FFFFFF', + 'field-border': '#E5E7EB', + 'field-dropzone-background-hover': '#F9FAFB', + 'field-dropzone-color': '#2563EB', + 'field-label': '#111827', + 'field-input': '#111827', + 'field-helper': '#9CA3AF', + 'field-background-disabled': '#F9FAFB', + 'field-color-disabled': '#D1D5DB', + 'field-placeholder': '#6B7280', + 'field-border-disabled': '#F3F4F6', + 'field-color-error': '#DC2626', + 'field-border-error': '#FECACA', + 'field-background-error': '#FEF2F2', + 'field-required': '#DC2626', + // border + 'border-interactive': '#2563EB', + 'border-subtle': '#E5E7EB', + 'border-strong': '#6B7280', + 'border-inverse': '#374151', + 'border-disabled': '#E5E7EB', + 'border-muted': '#E5E7EB', + 'border-error': '#DC2626', + 'border-transparent-subtle': '#37415114', + 'border-white': '#FFFFFF', + // text + 'text-primary': '#111827', + 'text-secondary': '#4B5563', + 'text-tertiary': '#9CA3AF', + 'text-on-color': '#FFFFFF', + 'text-error': '#DC2626', + 'text-error-inverse': '#F87171', + 'text-inverse': '#FFFFFF', + 'text-disabled': '#D1D5DB', + 'text-on-button-disabled': '#9CA3AF', + // link + 'link-primary': '#2563EB', + 'link-primary-hover': '#1D4ED8', + 'link-inverse': '#38BDF8', + 'link-visited': '#7C3AED', + 'link-visited-inverse': '#A78BFA', + 'link-inverse-hover': '#7DD3FC', + // icon + 'icon-primary': '#111827', + 'icon-secondary': '#4B5563', + 'icon-on-color': '#FFFFFF', + 'icon-inverse': '#FFFFFF', + 'icon-interactive': '#2563EB', + 'icon-on-color-disabled': '#9CA3AF', + 'icon-disabled': '#D1D5DB', + // support + 'support-error': '#DC2626', + 'support-success': '#16A34A', + 'support-warning': '#EAB308', + 'support-info': '#0284C7', + 'support-error-inverse': '#F87171', + 'support-success-inverse': '#4ADE80', + 'support-warning-inverse': '#FDE047', + 'support-info-inverse': '#38BDF8', + // button + 'button-primary': '#2563EB', + 'button-primary-hover': '#1D4ED8', + 'button-secondary': '#1F2937', + 'button-secondary-hover': '#374151', + 'button-tertiary': '#FFFFFF', + 'button-tertiary-hover': '#F9FAFB', + 'button-danger': '#DC2626', + 'button-danger-secondary': '#DC2626', + 'button-danger-hover': '#B91C1C', + 'button-disabled': '#F3F4F6', + 'button-tertiary-border': '#E5E7EB', + 'button-tertiary-color': '#111827', + // focus + focus: '#2563EB', + 'focus-inset': '#FFFFFF', + 'focus-inverse': '#38BDF8', + 'focus-inverse-inset': '#111827', + 'focus-error': '#DC2626', + 'focus-border': '#BFDBFE', + 'focus-error-border': '#FECACA', + // misc + 'misc-highlight': '#BFDBFE', + 'misc-overlay': '#11182780', + 'misc-skeleton-background': '#F3F4F6', + 'misc-skeleton-element': '#D1D5DB', + 'misc-popup-button-hover': '#1118270D', + 'misc-tab-item-hover': '#E5E7EB', + 'misc-dropdown-hover': '#F3F4F6', + 'misc-loader-base': '#1118270D', + 'misc-loader-color': '#2563EB', + 'misc-progress-background': '#E5E7EB', + // badge + 'badge-background-gray': '#F9FAFB', + 'badge-color-gray': '#1F2937', + 'badge-hover-gray': '#F3F4F6', + 'badge-border-gray': '#E5E7EB', + 'badge-background-red': '#FEF2F2', + 'badge-color-red': '#B91C1C', + 'badge-hover-red': '#FEE2E2', + 'badge-border-red': '#FECACA', + 'badge-background-yellow': '#FEFCE8', + 'badge-color-yellow': '#A16207', + 'badge-hover-yellow': '#FEF9C3', + 'badge-border-yellow': '#FEF08A', + 'badge-hover-green': '#DCFCE7', + 'badge-border-green': '#BBF7D0', + 'badge-background-green': '#F0FDF4', + 'badge-color-green': '#15803D', + 'badge-background-sky': '#F0F9FF', + 'badge-color-sky': '#0369A1', + 'badge-hover-sky': '#E0F2FE', + 'badge-border-sky': '#BAE6FD', + 'badge-background-disabled': '#F3F4F6', + 'badge-color-disabled': '#D1D5DB', + 'badge-hover-disabled': '#F3F4F6', + 'badge-border-disabled': '#E5E7EB', + 'badge-background-important': '#DC2626', + // alert + 'alert-background-neutral': '#FFFFFF', + 'alert-border-neutral': '#E5E7EB', + 'alert-background-danger': '#FEF2F2', + 'alert-border-danger': '#FECACA', + 'alert-background-warning': '#FEFCE8', + 'alert-border-warning': '#FEF08A', + 'alert-background-green': '#F0FDF4', + 'alert-border-green': '#BBF7D0', + 'alert-background-info': '#F0F9FF', + 'alert-border-info': '#BAE6FD', + // tab + 'tab-background': '#F3F4F6', + 'tab-border': '#E5E7EB', + // tooltip + 'tooltip-background-light': '#FFFFFF', + 'tooltip-background-dark': '#111827', + // toggle + 'toggle-off': '#E5E7EB', + 'toggle-on': '#2563EB', + 'toggle-dial-background': '#FFFFFF', + 'toggle-off-hover': '#D1D5DB', + 'toggle-off-border': '#D1D5DB', + 'toggle-on-hover': '#3B82F6', + 'toggle-on-border': '#60A5FA', + 'toggle-off-disabled': '#F3F4F6', + }, + width: { + '1/7': '14.2857143%', + '1/8': '12.5%', + '1/9': '11.1111111%', + '1/10': '10%', + '1/11': '9.0909091%', + '1/12': '8.3333333%', + }, + boxShadow: { + 'soft-shadow-sm': + '0px 6px 32px -12px rgba(149, 160, 178, 0.12)', + 'soft-shadow': '0px 8px 32px -12px rgba(149, 160, 178, 0.16)', + 'soft-shadow-md': + '0px 10px 32px -12px rgba(149, 160, 178, 0.2)', + 'soft-shadow-lg': + '0px 12px 32px -12px rgba(149, 160, 178, 0.24)', + 'soft-shadow-xl': + '0px 16px 32px -12px rgba(149, 160, 178, 0.32)', + 'soft-shadow-2xl': + '0px 24px 64px -12px rgba(149, 160, 178, 0.32)', + 'soft-shadow-inner': '0px 1px 1px 0px rgba(0, 0, 0, 0.05)', + }, + fontSize: { + tiny: '0.625rem', + }, + spacing: { + 120: '30rem', // 480px + 95: '23.75rem', // 380px + 141.5: '35.375rem', // 566px + 188: '47rem', // 752px + }, + zIndex: { + 999999: '999999', + }, + }, +} ``` - - -6. **For Storybook**: +
-In a separate terminal, run: - -```bash +4. Congratulations 🥳, you did it, now you're ready to use @bsf/force-ui. -npm run storybook +```jsx +import { Button } from "@bsf/force-ui"; +export default function Example() { + return ; +} ``` - - ---- - - - -## Step 3: Setup SureRank - - - -1. **Navigate to the SureRank directory** (if not already there): - -```bash - -cd ../surerank - -``` - - - -2. **Install dependencies**: - -```bash - -npm install - -``` - - - -3. **Link ForceUI**: - -```bash - -npm link @bsf/force-ui - -``` - - - -4. **Start the application**: - -```bash - -npm start - -``` - - - ---- - - - -## Step 4: Making Changes - - - -- **UI Changes in SureRank**: - -Modify the UI in the `surerank/sr/apps/fui-dashboard/` directory. +## Community - +We're excited to see the community adopt @bsf/force-ui, raise issues, and provide feedback. +Whether it's a feature request, bug report, or a project to showcase, please get involved! -- **Component Changes in ForceUI**: +## Contributing -Make changes to components in the `forceui/src/components/` directory. +Contributions are always welcome! -## Step 5: Viewing the UI -1. **Go to WordPress** and open the admin dashboard. -2. On the **left panel**, locate and open **SureRank**. -3. Inside SureRank, select **FUI** to view the UI. +See `CONTRIBUTING.md` for ways to get started. -## Step 5: Viewing the Storybook -1. Open http://localhost:6006 in the browser \ No newline at end of file +Please adhere to this project's `CODE_OF_CONDUCT.md`. From 28b4347372ad926a561604c846f34bfe6a29bb89 Mon Sep 17 00:00:00 2001 From: Vrunda Kansara Date: Thu, 17 Oct 2024 11:41:35 +0530 Subject: [PATCH 3/7] Commented unwanted code --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 01954144..6262c229 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ Visit https://github.
-### Components - Atoms + - - - -
- ### Getting Started Learn how to use @bsf/force-ui components to quickly and easily create elegant and flexible pages using Tailwind CSS. @@ -613,10 +294,10 @@ export default function Example() { } ``` -## Community +## @bsf/force-ui Documentation + +Visit https://github.com/brainstormforce/force-ui/wiki for full documentation. -We're excited to see the community adopt @bsf/force-ui, raise issues, and provide feedback. -Whether it's a feature request, bug report, or a project to showcase, please get involved! ## Contributing From f8d951577c28f921c375a893078c5646418d1f98 Mon Sep 17 00:00:00 2001 From: Vrunda Kansara Date: Thu, 17 Oct 2024 12:36:02 +0530 Subject: [PATCH 5/7] Readme update --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index d882d7ff..781818ef 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ Learn how to use @bsf/force-ui components to quickly and easily create elegant and flexible pages using Tailwind CSS. -@bsf/force-ui is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project - Tailwind CSS Installation. +@bsf/force-ui is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project - Tailwind CSS Installation.
@@ -284,7 +284,7 @@ theme: {
-4. Congratulations 🥳, you did it, now you're ready to use @bsf/force-ui. +4. Great 🥳, now you're ready to use @bsf/force-ui. ```jsx import { Button } from "@bsf/force-ui"; From 4cf5b559675aaffcc3f0f890f785667b74557cfc Mon Sep 17 00:00:00 2001 From: Vrunda Kansara Date: Thu, 17 Oct 2024 12:42:53 +0530 Subject: [PATCH 6/7] MD files - Code of conduct - Philosophy - Contributing --- .github/CODE_OF_CONDUCT.md | 35 +++++++++++++++++++++++++++++++++++ .github/CONTRIBUTING.md | 2 +- .github/PHILOSOPHY.md | 17 +++++++++++++++++ 3 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 .github/PHILOSOPHY.md diff --git a/.github/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md index e69de29b..39ce74b9 100644 --- a/.github/CODE_OF_CONDUCT.md +++ b/.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. diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 313bdb14..241d8c33 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -54,7 +54,7 @@ An ecosystem that views different template renders. We can create multiple ecosy 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 inclues the folowing files: +This folder includes the folowing files: 1. index.jsx 2. Component js files 3. readme.md file having the documentation for that component diff --git a/.github/PHILOSOPHY.md b/.github/PHILOSOPHY.md new file mode 100644 index 00000000..2c64b757 --- /dev/null +++ b/.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. From cd3d2619d9b258198642760e445cef19e881e23a Mon Sep 17 00:00:00 2001 From: Vrunda Kansara Date: Thu, 17 Oct 2024 12:52:50 +0530 Subject: [PATCH 7/7] Update CONTRIBUTING.md Folder structure of component image added --- .github/CONTRIBUTING.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 241d8c33..665a1353 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -60,6 +60,9 @@ This folder includes the folowing 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)! @@ -98,4 +101,4 @@ 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. \ No newline at end of file +- **dev**: This is the **development** branch of @bsf/force-ui, and this is where development is happening before moving to UAT.