From 172f2c742cb02133136ddad1799b221f03df616c Mon Sep 17 00:00:00 2001 From: biratdatta Date: Thu, 13 Jun 2024 00:00:28 +0530 Subject: [PATCH 01/12] adding Contribution --- CONTRIBUTION.md | 190 ++++++++++++++++++++++++++++++++++++++++++++++++ turbo.json | 2 +- 2 files changed, 191 insertions(+), 1 deletion(-) create mode 100644 CONTRIBUTION.md diff --git a/CONTRIBUTION.md b/CONTRIBUTION.md new file mode 100644 index 00000000..abb533a4 --- /dev/null +++ b/CONTRIBUTION.md @@ -0,0 +1,190 @@ +## Introduction + +`Stencil UI` is a robust, open-source development UI library designed to revolutionize the creation of scalable and secure Web applications. Stencil UI is the a set of molecules which turns makes easier to use the common UI components into production-ready code in a few minutes. We make our applications development easier with it, ensuring consistency, predictability, and adherence to the highest standards with code that’s built to scale. + +Our user-friendly interface fosters seamless integration with APIs, data models, databases, authentication, and authorization. Built on a flexible, plugin-based architecture, Amplication allows effortless customization of the code and offers a diverse range of integrations. + +With a strong focus on collaboration, Stencil UI streamlines team-oriented development, making it an ideal choice for groups of all sizes, from startups to large enterprises. Our UI Library enables you to concentrate on your business logic, while we handle the heavy lifting on the UI Side. + +Experience the fastest way to develop WEB Applications applications with Amplication. +## Table of Contents +- [Screenshot](#screenshot) +- [Demo](#demo) + - [Vanilla, no framework](#vanilla-no-framework) + - [With Bootstrap](#with-bootstrap) + - [With Material Design](#with-material-design) + - [As Single Select](#as-single-select) +- [Install](#install) + - [As NPM package](#as-npm-package) + - [Using a CDN](#using-a-cdn) + - [Peer Dependencies](#peer-dependencies) +- [Usage](#usage) +- [Props](#props) + - [className](#classname) + - [clearSearchOnChange](#clearsearchonchange) + - [onChange](#onchange) + - [onNodeToggle](#onnodetoggle) + - [onAction](#onaction) + - [onFocus](#onfocus) + - [onBlur](#onblur) + - [data](#data) + - [texts](#texts) + - [keepTreeOnSearch](#keeptreeonsearch) + - [keepChildrenOnSearch](#keepchildrenonsearch) + - [keepOpenOnSelect](#keepopenonselect) + - [mode](#mode) + - [multiSelect](#multiselect) + - [hierarchical](#hierarchical) + - [simpleSelect](#simpleselect) + - [radioSelect](#radioselect) + - [showPartiallySelected](#showpartiallyselected) + - [showDropdown](#showdropdown) + - [initial](#initial) + - [always](#always) + - [form states (disabled|readOnly)](#form-states-disabled-readonly) + - [id](#id) + - [searchPredicate](#searchpredicate) + - [inlineSearchInput](#inlinesearchinput) + - [tabIndex](#tabIndex) + - [disablePoppingOnBackspace](#disablePoppingOnBackspace) +- [Styling and Customization](#styling-and-customization) + - [Using default styles](#default-styles) + - [Customizing with Bootstrap, Material Design styles](#customizing-styles) +- [Keyboard navigation](#keyboard-navigation) +- [Performance](#performance) + - [Search optimizations](#search-optimizations) + - [Search debouncing](#search-debouncing) + - [Virtualized rendering](#virtualized-rendering) + - [Reducing costly DOM manipulations](#reducing-costly-dom-manipulations) +- [FAQ](#faq) +- [Doing more with HOCs](/docs/HOC.md) +- [Development](#development) +- [License](#license) +- [Contributors](#contributors) + + +## Some Important Terminologies +### Molecules +A molecule is a compound component made up of various atoms. It represents a more intricate UI element designed to fulfill a specific function within an application's interface. For example, a JSON to Table or an OTP (One-Time Password) Input Molecule, each composed of multiple atoms to provide a comprehensive and functional unit. + +All molecules currently supported can be viewed on this [website](https://stencil-ui-templates.vercel.app/) + + +## Usage + +To get started with Stencil-UI, the hosted version of the product can be used to check what all the avaiable molecules. You can get started immediately at [stencil-ui-templates](https://stencil-ui-templates.vercel.app/). The [website]( https://stencil-ui-templates.vercel.app) provides an overview of the application, additional information on the product and guides can be found in the [docs](https://stencil-docs.vercel.app/). + +## Development + + + + +Pre-requisites + +To be able to start development on StencilUI, make sure that you have the following prerequisites installed: + +### + +- Node.js +- Docker +- Git + + +
+ +Running Amplication +
+ +> **Note** +> It is also possible to start development with GitHub Codespaces, when navigating to `< > Code`, select `Codespaces` instead of `Local`. Click on either the `+`-sign or the `Create codespace on master`-button. + +Amplication is using a monorepo architecture - powered by Nx Workspaces - where multiple applications and libraries exist in a single repository. To setup a local development environment the following steps can be followed: + +**BEFORE** you run the following steps make sure: +1. You have typescript installed locally on you machine ```npm install -g typescript``` +2. You are using a supported node version (check `engines` `node` in the [package.json](./package.json)) +3. You are using a supported npm version (check `engines` `npm` in the [package.json](./package.json)) +4. You have `docker` installed and running on your machine + + +1. Clone the repository and install dependencies: +```shell +git clone https://github.com/amplication/amplication.git && cd amplication && npm install +``` + +2. Run the setup script, which takes care of installing dependencies, building packages, and setting up the workspace: +```shell +npm run setup:dev +``` + +3. Option 1: Running the required infrastructure - view infrastructure component logs + + +```shell +npm run docker:dev +``` +3. Option 2: Running the required infrastructure - run the infrastructure components in background +```shell +npm run docker:dev -- -d +``` + +4. Apply database migrations +```shell +npm run db:migrate:deploy +``` + +5. To start developing, run one or more of the applications available under `serve:[application]` scripts of the package.json. + +```shell +# running the server component +npm run serve:server + +# running the client component +npm run serve:client + +# running the data-service-generator component +npm run serve:dsg + +# running the git-sync-manager component +npm run serve:git + +# running the plugin-api component +npm run serve:plugins +``` + +> **Note** +> In order to run the Amplication client properly, both the client and server need to be started by the `npm run serve:[application]` command, as well as an additional component for development on a specific component. + +The development environment should now be set up. Additional information on the different application components can be found under packages/`[application]`/README.md file. Happy hacking! πŸ‘Ύ +
+ +## Resources + +- **[Website](https://amplication.com)** overview of the product. +- **[Docs](https://docs.amplication.com)** for comprehensive documentation. +- **[Blog](https://amplication.com/blog)** for guides and technical comparisons. +- **[Discord](https://amplication.com/discord)** for support and discussions with the community and the team. +- **[GitHub](https://github.com/amplication/amplication)** for source code, project board, issues, and pull requests. +- **[Twitter](https://twitter.com/amplication)** for the latest updates on the product and published blogs. +- **[YouTube](https://www.youtube.com/c/Amplicationcom)** for guides and technical talks. + + +## Contributing + +The majority of Amplication code is open-source. We are committed to a transparent development process and highly appreciate any contributions. Whether you are helping us fix bugs, proposing new features, improving our documentation or spreading the word - we would love to have you as a part of the Amplication community. Please refer to our [contribution guidelines](./CONTRIBUTING.md) and [code of conduct](./CODE_OF_CONDUCT.md). + +- Bug Report: If you see an error message or encounter an issue while using Amplication, please create a [bug report](https://github.com/amplication/amplication/issues/new?assignees=&labels=type%3A+bug&template=bug.yaml&title=%F0%9F%90%9B+Bug+Report%3A+). + +- Feature Request: If you have an idea or if there is a capability that is missing and would make development easier and more robust, please submit a [feature request](https://github.com/amplication/amplication/issues/new?assignees=&labels=type%3A+feature+request&template=feature.yml). + +- Documentation Request: If you're reading the Amplication docs and feel like you're missing something, please submit a [documentation request](https://github.com/amplication/amplication/issues/new?assignees=&labels=type%3A+docs&template=documentation-request.yaml&title=%F0%9F%93%96+Documentation%3A+). + +Not sure where to start? Join our discord and we will help you get started! + + + + + +## License + +A large part of this project is licensed under the [Apache 2.0](./LICENSE) license. The only exception are the components under the `ee` (enterprise edition) directory, these are licensed under the [Amplication Enterprise Edition](./ee/LICENSE) license. \ No newline at end of file diff --git a/turbo.json b/turbo.json index c2a849bf..493a0d6a 100644 --- a/turbo.json +++ b/turbo.json @@ -1,7 +1,7 @@ { "$schema": "https://turbo.build/schema.json", "globalDependencies": ["**/.env.*local"], - "pipeline": { + "tasks": { "build": { "dependsOn": ["^build"], "outputs": [".next/**", "!.next/cache/**"] From c4e9ea37f07763e31122bb273b312e4cf71d8dab Mon Sep 17 00:00:00 2001 From: Birat Datta <88641794+biratdatta@users.noreply.github.com> Date: Thu, 13 Jun 2024 00:56:32 +0530 Subject: [PATCH 02/12] Update CONTRIBUTION.md --- CONTRIBUTION.md | 97 ++++++++++--------------------------------------- 1 file changed, 19 insertions(+), 78 deletions(-) diff --git a/CONTRIBUTION.md b/CONTRIBUTION.md index abb533a4..b45b0b69 100644 --- a/CONTRIBUTION.md +++ b/CONTRIBUTION.md @@ -1,4 +1,4 @@ -## Introduction +![image](https://github.com/SamagraX-Stencil/stencil-web/assets/88641794/72f410f8-4243-4d95-8879-e1c1c6a48772)## Introduction `Stencil UI` is a robust, open-source development UI library designed to revolutionize the creation of scalable and secure Web applications. Stencil UI is the a set of molecules which turns makes easier to use the common UI components into production-ready code in a few minutes. We make our applications development easier with it, ensuring consistency, predictability, and adherence to the highest standards with code that’s built to scale. @@ -10,56 +10,14 @@ Experience the fastest way to develop WEB Applications applications with Amplic ## Table of Contents - [Screenshot](#screenshot) - [Demo](#demo) - - [Vanilla, no framework](#vanilla-no-framework) - - [With Bootstrap](#with-bootstrap) - - [With Material Design](#with-material-design) - - [As Single Select](#as-single-select) - [Install](#install) - [As NPM package](#as-npm-package) - [Using a CDN](#using-a-cdn) - [Peer Dependencies](#peer-dependencies) -- [Usage](#usage) -- [Props](#props) - - [className](#classname) - - [clearSearchOnChange](#clearsearchonchange) - - [onChange](#onchange) - - [onNodeToggle](#onnodetoggle) - - [onAction](#onaction) - - [onFocus](#onfocus) - - [onBlur](#onblur) - - [data](#data) - - [texts](#texts) - - [keepTreeOnSearch](#keeptreeonsearch) - - [keepChildrenOnSearch](#keepchildrenonsearch) - - [keepOpenOnSelect](#keepopenonselect) - - [mode](#mode) - - [multiSelect](#multiselect) - - [hierarchical](#hierarchical) - - [simpleSelect](#simpleselect) - - [radioSelect](#radioselect) - - [showPartiallySelected](#showpartiallyselected) - - [showDropdown](#showdropdown) - - [initial](#initial) - - [always](#always) - - [form states (disabled|readOnly)](#form-states-disabled-readonly) - - [id](#id) - - [searchPredicate](#searchpredicate) - - [inlineSearchInput](#inlinesearchinput) - - [tabIndex](#tabIndex) - - [disablePoppingOnBackspace](#disablePoppingOnBackspace) -- [Styling and Customization](#styling-and-customization) - - [Using default styles](#default-styles) - - [Customizing with Bootstrap, Material Design styles](#customizing-styles) -- [Keyboard navigation](#keyboard-navigation) -- [Performance](#performance) - - [Search optimizations](#search-optimizations) - - [Search debouncing](#search-debouncing) - - [Virtualized rendering](#virtualized-rendering) - - [Reducing costly DOM manipulations](#reducing-costly-dom-manipulations) -- [FAQ](#faq) -- [Doing more with HOCs](/docs/HOC.md) +- [Usage](#usage) - [Development](#development) - [License](#license) +- [Resources](#Resources) - [Contributors](#contributors) @@ -75,41 +33,32 @@ All molecules currently supported can be viewed on this [website](https://stenc To get started with Stencil-UI, the hosted version of the product can be used to check what all the avaiable molecules. You can get started immediately at [stencil-ui-templates](https://stencil-ui-templates.vercel.app/). The [website]( https://stencil-ui-templates.vercel.app) provides an overview of the application, additional information on the product and guides can be found in the [docs](https://stencil-docs.vercel.app/). ## Development - - - - Pre-requisites To be able to start development on StencilUI, make sure that you have the following prerequisites installed: ### - - Node.js -- Docker - Git - - -
- -Running Amplication -
+ +Running Stencil UI + > **Note** > It is also possible to start development with GitHub Codespaces, when navigating to `< > Code`, select `Codespaces` instead of `Local`. Click on either the `+`-sign or the `Create codespace on master`-button. -Amplication is using a monorepo architecture - powered by Nx Workspaces - where multiple applications and libraries exist in a single repository. To setup a local development environment the following steps can be followed: +Stencil UI uses a mono repo architecture - powered by Turbo Repo - where multiple applications and libraries exist in a single repository. To setup a local development environment the following steps can be followed: **BEFORE** you run the following steps make sure: 1. You have typescript installed locally on you machine ```npm install -g typescript``` 2. You are using a supported node version (check `engines` `node` in the [package.json](./package.json)) 3. You are using a supported npm version (check `engines` `npm` in the [package.json](./package.json)) -4. You have `docker` installed and running on your machine + 1. Clone the repository and install dependencies: ```shell -git clone https://github.com/amplication/amplication.git && cd amplication && npm install +git clone https://github.com/SamagraX-Stencil/stencil-web && cd stencil-web && npm install or yarn install ``` 2. Run the setup script, which takes care of installing dependencies, building packages, and setting up the workspace: @@ -160,31 +109,23 @@ The development environment should now be set up. Additional information on the ## Resources -- **[Website](https://amplication.com)** overview of the product. -- **[Docs](https://docs.amplication.com)** for comprehensive documentation. -- **[Blog](https://amplication.com/blog)** for guides and technical comparisons. -- **[Discord](https://amplication.com/discord)** for support and discussions with the community and the team. -- **[GitHub](https://github.com/amplication/amplication)** for source code, project board, issues, and pull requests. -- **[Twitter](https://twitter.com/amplication)** for the latest updates on the product and published blogs. -- **[YouTube](https://www.youtube.com/c/Amplicationcom)** for guides and technical talks. - - +- **[Website](https://stencil-ui-templates.vercel.app/)** overview of the product. +- **[Docs](https://stencil-docs.vercel.app/)** for comprehensive documentation. +- **[Discord](https: )** for support and discussions with the community and the team. + ## Contributing -The majority of Amplication code is open-source. We are committed to a transparent development process and highly appreciate any contributions. Whether you are helping us fix bugs, proposing new features, improving our documentation or spreading the word - we would love to have you as a part of the Amplication community. Please refer to our [contribution guidelines](./CONTRIBUTING.md) and [code of conduct](./CODE_OF_CONDUCT.md). +The Stencil-UI code is open-source. We are committed to a transparent development process and highly appreciate any contributions. Whether you are helping us fix bugs, proposing new features, improving our documentation or spreading the word - we would love to have you as a part of the Samagra community. -- Bug Report: If you see an error message or encounter an issue while using Amplication, please create a [bug report](https://github.com/amplication/amplication/issues/new?assignees=&labels=type%3A+bug&template=bug.yaml&title=%F0%9F%90%9B+Bug+Report%3A+). +- Bug Report: If you see an error message or encounter an issue while using Amplication, please create a [bug report]( https://github.com/SamagraX-Stencil/stencil-web/issues/new). -- Feature Request: If you have an idea or if there is a capability that is missing and would make development easier and more robust, please submit a [feature request](https://github.com/amplication/amplication/issues/new?assignees=&labels=type%3A+feature+request&template=feature.yml). +- Feature Request: If you have an idea or if there is a capability that is missing and would make development easier and more robust, please submit a [feature request]( https://github.com/SamagraX-Stencil/stencil-web/issues/new). -- Documentation Request: If you're reading the Amplication docs and feel like you're missing something, please submit a [documentation request](https://github.com/amplication/amplication/issues/new?assignees=&labels=type%3A+docs&template=documentation-request.yaml&title=%F0%9F%93%96+Documentation%3A+). +- Documentation Request: If you're reading the Stencil-UI docs and feel like you're missing something, please submit a [documentation request](https://github.com/SamagraX-Stencil/stencil-web/issues/new). Not sure where to start? Join our discord and we will help you get started! - - - - + ## License -A large part of this project is licensed under the [Apache 2.0](./LICENSE) license. The only exception are the components under the `ee` (enterprise edition) directory, these are licensed under the [Amplication Enterprise Edition](./ee/LICENSE) license. \ No newline at end of file +A large part of this project is licensed under the [Apache 2.0](./LICENSE) license. The only exception are the components under the `ee` (enterprise edition) directory, these are licensed under the [Amplication Enterprise Edition](./ee/LICENSE) license. From 66e5c7e1384cd7179adf1c42d08475eaf0eb7527 Mon Sep 17 00:00:00 2001 From: Birat Datta <88641794+biratdatta@users.noreply.github.com> Date: Thu, 13 Jun 2024 00:56:58 +0530 Subject: [PATCH 03/12] Update CONTRIBUTION.md --- CONTRIBUTION.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTION.md b/CONTRIBUTION.md index b45b0b69..5786c07e 100644 --- a/CONTRIBUTION.md +++ b/CONTRIBUTION.md @@ -1,4 +1,4 @@ -![image](https://github.com/SamagraX-Stencil/stencil-web/assets/88641794/72f410f8-4243-4d95-8879-e1c1c6a48772)## Introduction + ## Introduction `Stencil UI` is a robust, open-source development UI library designed to revolutionize the creation of scalable and secure Web applications. Stencil UI is the a set of molecules which turns makes easier to use the common UI components into production-ready code in a few minutes. We make our applications development easier with it, ensuring consistency, predictability, and adherence to the highest standards with code that’s built to scale. From c0487bb81202962198f52d0518ec0653a1985ded Mon Sep 17 00:00:00 2001 From: Birat Datta <88641794+biratdatta@users.noreply.github.com> Date: Thu, 13 Jun 2024 01:02:19 +0530 Subject: [PATCH 04/12] Update CONTRIBUTION.md --- CONTRIBUTION.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/CONTRIBUTION.md b/CONTRIBUTION.md index 5786c07e..e3338afc 100644 --- a/CONTRIBUTION.md +++ b/CONTRIBUTION.md @@ -1,6 +1,6 @@ ## Introduction -`Stencil UI` is a robust, open-source development UI library designed to revolutionize the creation of scalable and secure Web applications. Stencil UI is the a set of molecules which turns makes easier to use the common UI components into production-ready code in a few minutes. We make our applications development easier with it, ensuring consistency, predictability, and adherence to the highest standards with code that’s built to scale. +`Stencil UI` is a robust, open-source development UI library designed to revolutionize the creation of scalable and secure Web applications. Stencil UI is the set of molecules which turns makes it easier to use the common UI components in production-ready code in a few minutes. We make our application development easier with it, ensuring consistency, predictability, and adherence to the highest standards with code that’s built to scale. Our user-friendly interface fosters seamless integration with APIs, data models, databases, authentication, and authorization. Built on a flexible, plugin-based architecture, Amplication allows effortless customization of the code and offers a diverse range of integrations. @@ -102,7 +102,7 @@ npm run serve:plugins ``` > **Note** -> In order to run the Amplication client properly, both the client and server need to be started by the `npm run serve:[application]` command, as well as an additional component for development on a specific component. +> In order to run the Stencil-UI properly, both the client and server need to be started by the `npm run serve:[application]` command, as well as an additional component for development on a specific component. The development environment should now be set up. Additional information on the different application components can be found under packages/`[application]`/README.md file. Happy hacking! πŸ‘Ύ
@@ -117,7 +117,7 @@ The development environment should now be set up. Additional information on the The Stencil-UI code is open-source. We are committed to a transparent development process and highly appreciate any contributions. Whether you are helping us fix bugs, proposing new features, improving our documentation or spreading the word - we would love to have you as a part of the Samagra community. -- Bug Report: If you see an error message or encounter an issue while using Amplication, please create a [bug report]( https://github.com/SamagraX-Stencil/stencil-web/issues/new). +- Bug Report: If you see an error message or encounter an issue while using Stencil-UI, please create a [bug report]( https://github.com/SamagraX-Stencil/stencil-web/issues/new). - Feature Request: If you have an idea or if there is a capability that is missing and would make development easier and more robust, please submit a [feature request]( https://github.com/SamagraX-Stencil/stencil-web/issues/new). @@ -125,7 +125,6 @@ The Stencil-UI code is open-source. We are committed to a transparent developmen Not sure where to start? Join our discord and we will help you get started! + -## License - -A large part of this project is licensed under the [Apache 2.0](./LICENSE) license. The only exception are the components under the `ee` (enterprise edition) directory, these are licensed under the [Amplication Enterprise Edition](./ee/LICENSE) license. + From 2de5b9fd52ea471ec7275625e58ad6a255280295 Mon Sep 17 00:00:00 2001 From: Birat Datta <88641794+biratdatta@users.noreply.github.com> Date: Thu, 13 Jun 2024 01:22:31 +0530 Subject: [PATCH 05/12] Update CONTRIBUTION.md --- CONTRIBUTION.md | 40 +++++----------------------------------- 1 file changed, 5 insertions(+), 35 deletions(-) diff --git a/CONTRIBUTION.md b/CONTRIBUTION.md index e3338afc..300ae235 100644 --- a/CONTRIBUTION.md +++ b/CONTRIBUTION.md @@ -61,44 +61,14 @@ Stencil UI uses a mono repo architecture - powered by **Note** -> In order to run the Stencil-UI properly, both the client and server need to be started by the `npm run serve:[application]` command, as well as an additional component for development on a specific component. +> The above command will start all bot-app/ and all-molecule-example/ on the 7001 and 3001 ports respectively The development environment should now be set up. Additional information on the different application components can be found under packages/`[application]`/README.md file. Happy hacking! πŸ‘Ύ - + + + +## Structure + +The repository is organized as follows: + +``` +stencil-ui/ +stencil-ui/ +β”œβ”€β”€ packages/ +β”‚ β”œβ”€β”€ molecules/ +β”‚ β”œβ”€β”€ pages/ +β”‚ β”œβ”€β”€ config-manager/ +β”‚ β”œβ”€β”€ chatui/ +β”‚ β”œβ”€β”€ hooks/ +β”‚ └── provider/ +β”œβ”€β”€ apps/ +β”‚ β”œβ”€β”€ all-molecule-example/ +β”‚ └── bot-app/ +β”œβ”€β”€ node_modules/ +β”œβ”€β”€ package.json +β”œβ”€β”€ turbo.json +└── CONTRIBUTION.md + + +``` + +- `packages/`: Contains shared libraries and modules. +- `apps/`: Contains the different applications. +- `node_modules/`: Automatically generated directory containing installed dependencies. +- `package.json`: Contains metadata about the project and dependencies. +- `turbo.json`: Configuration file for Turborepo. +- `CONTRIBUTION.md`: This file. + ## Resources @@ -99,6 +138,12 @@ The Stencil-UI code is open-source. We are committed to a transparent developmen Not sure where to start? Join our discord and we will help you get started! - +## License + +This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details. + +--- + +Thank you for using My Monorepo! If you have any questions or feedback, feel free to open an issue. From 4753bccde25ddc86681c75b78d5129d71995a111 Mon Sep 17 00:00:00 2001 From: Birat Datta <88641794+biratdatta@users.noreply.github.com> Date: Thu, 13 Jun 2024 01:53:55 +0530 Subject: [PATCH 08/12] Update CONTRIBUTION.md --- CONTRIBUTION.md | 39 ++++++++++++++++++--------------------- 1 file changed, 18 insertions(+), 21 deletions(-) diff --git a/CONTRIBUTION.md b/CONTRIBUTION.md index c8c2b581..f34d5855 100644 --- a/CONTRIBUTION.md +++ b/CONTRIBUTION.md @@ -1,6 +1,6 @@ ## Introduction -`Stencil UI` is a robust, open-source development UI library designed to revolutionize the creation of scalable and secure Web applications. Stencil UI is the set of molecules which turns makes it easier to use the common UI components in production-ready code in a few minutes. We make our application development easier with it, ensuring consistency, predictability, and adherence to the highest standards with code that’s built to scale. +`Stencil UI` is a robust, open-source development UI library designed to revolutionize the creation of scalable and secure Web applications. Stencil UI is the set of molecules which turn makes it easier to use the common UI components in production-ready code in a few minutes. We make our application development easier with it, ensuring consistency, predictability, and adherence to the highest standards with code that’s built to scale. Our user-friendly interface fosters seamless integration with APIs, data models, databases, authentication, and authorization. Built on a flexible, plugin-based architecture, Amplication allows effortless customization of the code and offers a diverse range of integrations. @@ -29,7 +29,7 @@ All molecules currently supported can be viewed on this [website](https://stenc ## Usage -To get started with Stencil-UI, the hosted version of the product can be used to check what all the available molecules. You can get started immediately at [stencil-ui-templates](https://stencil-ui-templates.vercel.app/). The [website]( https://stencil-ui-templates.vercel.app) provides an overview of the application, and additional information on the product and guides can be found in the [docs](https://stencil-docs.vercel.app/). +To get started with Stencil-UI, the hosted version of the product can be used to check all the available molecules. You can get started immediately at [stencil-ui-templates](https://stencil-ui-templates.vercel.app/). The [website]( https://stencil-ui-templates.vercel.app) provides an overview of the application, and additional information on the product and guides can be found in the [docs](https://stencil-docs.vercel.app/). ## Development Pre-requisites @@ -37,9 +37,11 @@ Pre-requisites To be able to start development on StencilUI, make sure that you have the following prerequisites installed: ### -- Node.js -- Git - +- [Node.js](https://nodejs.org/) (version 14.x or later) +- [Yarn](https://yarnpkg.com/) +- [Turborepo](https://turborepo.org/) +- [Git](https://git-scm.com/) + ### Running Stencil UI > **Note** @@ -55,14 +57,14 @@ Stencil UI uses a mono repo architecture - powered by Turbo Repo - where multiple applications and libraries exist in a single repository. To setup a local development environment the following steps can be followed: +Stencil UI uses a monorepo architecture - powered by [Turbo Repo](https://turbo.build/repo) - where multiple applications and libraries exist in a single repository. To set up a local development environment, follow these steps: -**BEFORE** you run the following steps make sure: -1. You have typescript installed locally on you machine ```npm install -g typescript``` -2. You are using a supported node version (check `engines` `node` in the [package.json](./package.json)) +**BEFORE** you run the following steps, make sure: +1. You have TypeScript installed locally on your machine: `npm install -g typescript` +2. You are using a supported Node.js version (check `engines` `node` in the [package.json](./package.json)) 3. You are using a supported npm version (check `engines` `npm` in the [package.json](./package.json)) - 1. Clone the repository and install dependencies: ```shell -git clone https://github.com/SamagraX-Stencil/stencil-web && cd stencil-web && yarn install +git clone https://github.com/SamagraX-Stencil/stencil-web && cd stencil-web && yarn install ``` 2. To start developing, run one or more of the applications available under `dev` scripts of the package.json. @@ -108,26 +111,29 @@ stencil-ui/ ``` - + - `packages/`: Contains shared libraries and modules. - `apps/`: Contains the different applications. - `node_modules/`: Automatically generated directory containing installed dependencies. - `package.json`: Contains metadata about the project and dependencies. - `turbo.json`: Configuration file for Turborepo. -- `CONTRIBUTION.md`: This file. +- `CONTRIBUTION.md`: Contribution guidelines. + +## Resources ## Resources -- **[Website](https://stencil-ui-templates.vercel.app/)** overview of the product. -- **[Docs](https://stencil-docs.vercel.app/)** for comprehensive documentation. -- **[Discord](https: )** for support and discussions with the community and the team. +- **[Website](https://stencil-ui-templates.vercel.app/)**: Overview of the product. +- **[Docs](https://stencil-docs.vercel.app/)**: Comprehensive documentation. +- **[Discord](https://discord.gg/)**: Support and discussions with the community and the team. + ## Contributing The Stencil-UI code is open-source. We are committed to a transparent development process and highly appreciate any contributions. Whether you are helping us fix bugs, proposing new features, improving our documentation, or spreading the word - we would love to have you as a part of the Samagra community. --** Bug Report**: If you see an error message or encounter an issue while using Stencil-UI, please create a [bug report]( https://github.com/SamagraX-Stencil/stencil-web/issues/new). +- ** Bug Report**: If you see an error message or encounter an issue while using Stencil-UI, please create a [bug report]( https://github.com/SamagraX-Stencil/stencil-web/issues/new). - **Feature Request**: If you have an idea or if there is a capability that is missing and would make development easier and more robust, please submit a [feature request]( https://github.com/SamagraX-Stencil/stencil-web/issues/new). @@ -141,6 +147,6 @@ This project is licensed under the MIT License. --- -Thank you for using Stencil_UI. If you have any questions or feedback, feel free to open an issue. +Thank you for using Stencil-UI. If you have any questions or feedback, feel free to open an issue. From 2b28e4da2021cd9c8ea0e0890aa9538fe204aa9e Mon Sep 17 00:00:00 2001 From: biratdatta Date: Sun, 16 Jun 2024 13:03:22 +0530 Subject: [PATCH 10/12] :memo: Updated the Contribution Doc Added how to contribute guidelines --- CONTRIBUTION.md | 92 +++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 78 insertions(+), 14 deletions(-) diff --git a/CONTRIBUTION.md b/CONTRIBUTION.md index 13c4d506..dc712347 100644 --- a/CONTRIBUTION.md +++ b/CONTRIBUTION.md @@ -15,6 +15,7 @@ Experience the fastest way to develop web applications with Stencil UI. - [Resources](#resources) - [Structure](#structure) - [Contributing](#contributing) +- [Conclusion](#conclusion) - [License](#license) @@ -45,6 +46,7 @@ To start development on Stencil UI, make sure that you have the following prereq - [Yarn](https://yarnpkg.com/) - [Turborepo](https://turborepo.org/) - [Git](https://git-scm.com/) +- [StoryBook](https://storybook.js.org/) ### Running Stencil UI @@ -54,22 +56,17 @@ To start development on Stencil UI, make sure that you have the following prereq Stencil UI uses a monorepo architecture - powered by [Turbo Repo](https://turbo.build/repo) - where multiple applications and libraries exist in a single repository. To set up a local development environment, follow these steps: **BEFORE** you run the following steps, make sure: -1. You have TypeScript installed locally on your machine: `npm install -g typescript` -2. You are using a supported Node.js version (check `engines` `node` in the [package.json](./package.json)) -3. You are using a supported npm version (check `engines` `npm` in the [package.json](./package.json)) +- You have TypeScript installed locally on your machine: `npm install -g typescript` +- You are using a supported Node.js version (check `engines` `node` in the [package.json](./package.json)) +- You are using a supported npm version (check `engines` `npm` in the [package.json](./package.json)) + 1. Clone the repository and install dependencies: + ```shell git clone https://github.com/SamagraX-Stencil/stencil-web && cd stencil-web && yarn install ``` - -2. To start developing, run one or more of the applications available under `dev` scripts of the package.json. - -```bash -yarn install -``` - -3. To start the local development +2. To start the local development - first, create a build of all packages using @@ -121,11 +118,11 @@ stencil-ui/ -## Resources + ## Resources - **[Website](https://stencil-ui-templates.vercel.app/)**: Overview of the product. -- **[Docs](https://stencil-docs.vercel.app/)**: Comprehensive documentation. +- **[Docs](https://stencil-docs.vercel.app/)**: Our Comprehensive documentation on the product. - **[Discord](https://discord.gg/)**: Support and discussions with the community and the team. @@ -133,14 +130,81 @@ stencil-ui/ The Stencil-UI code is open-source. We are committed to a transparent development process and highly appreciate any contributions. Whether you are helping us fix bugs, proposing new features, improving our documentation, or spreading the word - we would love to have you as a part of the Samagra community. -- ** Bug Report**: If you see an error message or encounter an issue while using Stencil-UI, please create a [bug report]( https://github.com/SamagraX-Stencil/stencil-web/issues/new). +- **Bug Report**: If you see an error message or encounter an issue while using Stencil-UI, please create a [bug report]( https://github.com/SamagraX-Stencil/stencil-web/issues/new). - **Feature Request**: If you have an idea or if there is a capability that is missing and would make development easier and more robust, please submit a [feature request]( https://github.com/SamagraX-Stencil/stencil-web/issues/new). - **Documentation Request**: If you're reading the Stencil-UI docs and feel like you're missing something, please submit a [documentation request](https://github.com/SamagraX-Stencil/stencil-web/issues/new). Not sure where to start? Join our discord and we will help you get started! + + +## How to Create a New Molecule +--- + +All the new Molecules are created via the `packages` folder in the repo. + +stencil-ui/ +stencil-ui/ +β”œβ”€β”€ packages/ +β”‚ β”œβ”€β”€ molecules/ +β”‚ β”œβ”€β”€ pages/ +β”‚ β”œβ”€β”€ config-manager/ +β”‚ β”œβ”€β”€ chatui/ +β”‚ β”œβ”€β”€ hooks/ +β”‚ └── provider/ + +Any kind of new molecule is create inside the `packages/molecule/src` folder that will house multiple other packages that can be used anywhere. + + Each Molecule should come with it's StoryBook and Unit. + > Checkout the `packages/molecule/src/list` for a example Molecule Structure + +### Step 1: Creating a new Molecule + +1. **Navigate** to the `packages` directory + +```bash +cd packages +``` + +2. **Create** a new directory for your molecule. + +3. **Setup** the folder structure for your molecule. + +4. **Implement** your molecule. + +### Step 2: Writing the Test Cases + +1. **Install testing dependencies** (if not already installed): + ```bash + yarn add --dev jest @testing-library/react @testing-library/jest-dom +``` +2. **Create** a test file for your component: +3. **Run** the tests: +```bash +yarn test +``` + +### Step 3: Add to Storybook + +1. **Install** Storybook dependencies (if not already installed): + +```bash +yarn dlx sb init +``` + +2. **Create** a Storybook file for your component + +3. **Run** Storybook: +```bash +yarn storybook +``` + + +## Conclusion +You have now created a new molecule, written test cases for it, and added it to Storybook. Great job! If you have any questions or need further assistance, feel free to reach out to the team. Happy coding! πŸ‘Ύ + ## License This project is licensed under the MIT License. From 4a432eb41543bf213970cb56af24b1cfd803a827 Mon Sep 17 00:00:00 2001 From: biratdatta Date: Sun, 16 Jun 2024 13:20:51 +0530 Subject: [PATCH 11/12] added code snippet --- CONTRIBUTION.md | 68 ++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 67 insertions(+), 1 deletion(-) diff --git a/CONTRIBUTION.md b/CONTRIBUTION.md index dc712347..c4079f21 100644 --- a/CONTRIBUTION.md +++ b/CONTRIBUTION.md @@ -165,15 +165,39 @@ Any kind of new molecule is create inside the `packages/molecule/src` folder tha 1. **Navigate** to the `packages` directory ```bash -cd packages +cd packages/molecule/src ``` 2. **Create** a new directory for your molecule. + ```bash + mkdir new-molecule + cd molecules/new-molecule + ``` 3. **Setup** the folder structure for your molecule. 4. **Implement** your molecule. + - `new-molecule/index.tsx`: + + ```tsx + import React from 'react'; + + interface NewMoleculeProps { + items: string[]; + } + + const NewMolecule: React.FC = ({ items }) => ( +
    + {items.map((item, index) => ( +
  • {item}
    • + ))} +
+ ); + + export default NewMolecule; + ``` + ### Step 2: Writing the Test Cases 1. **Install testing dependencies** (if not already installed): @@ -181,6 +205,25 @@ cd packages yarn add --dev jest @testing-library/react @testing-library/jest-dom ``` 2. **Create** a test file for your component: + ```bash + touch packages/molecule/src/new-molecule/index.test.tsx + ``` + - `index.test.tsx`: + ```tsx + import React from 'react'; + import { render } from '@testing-library/react'; + import '@testing-library/jest-dom/extend-expect'; + import NewMolecule from './NewMolecule'; + + test('renders list items', () => { + const items = ['Item 1', 'Item 2', 'Item 3']; + const { getByText } = render(); + + items.forEach(item => { + expect(getByText(item)).toBeInTheDocument(); + }); + }); + ``` 3. **Run** the tests: ```bash yarn test @@ -196,6 +239,29 @@ yarn dlx sb init 2. **Create** a Storybook file for your component +```bash + touch index.stories.tsx + ``` + + - `index.stories.tsx`: + ```tsx + import React from 'react'; + import { Meta, Story } from '@storybook/react'; + + + export default { + title: 'Molecules/NewMolecule', + component: NewMolecule, + } as Meta; + + const Template: Story = (args) => ; + + export const Default = Template.bind({}); + Default.args = { + items: ['Item 1', 'Item 2', 'Item 3'], + }; + ``` + 3. **Run** Storybook: ```bash yarn storybook From 1e8e8cc42169a916bea1f2e2f76aa457023ed9b6 Mon Sep 17 00:00:00 2001 From: biratdatta Date: Sun, 16 Jun 2024 13:27:42 +0530 Subject: [PATCH 12/12] formatted code for better readability --- CONTRIBUTION.md | 77 ++++++++++++++++++++++++------------------------- 1 file changed, 38 insertions(+), 39 deletions(-) diff --git a/CONTRIBUTION.md b/CONTRIBUTION.md index c4079f21..5882320b 100644 --- a/CONTRIBUTION.md +++ b/CONTRIBUTION.md @@ -63,22 +63,22 @@ Stencil UI uses a monorepo architecture - powered by [Turbo Repo](https://turbo. 1. Clone the repository and install dependencies: -```shell -git clone https://github.com/SamagraX-Stencil/stencil-web && cd stencil-web && yarn install -``` + ```shell + git clone https://github.com/SamagraX-Stencil/stencil-web && cd stencil-web && yarn install + ``` 2. To start the local development - first, create a build of all packages using -```bash -turbo build -``` + ```bash + turbo build + ``` - now start the project -```bash -turbo dev -``` + ```bash + turbo dev + ``` > **Note** > The above command will start all bot-app/ and all-molecule-example/ on the 7001 and 3001 ports respectively @@ -164,22 +164,21 @@ Any kind of new molecule is create inside the `packages/molecule/src` folder tha 1. **Navigate** to the `packages` directory -```bash -cd packages/molecule/src -``` + ```bash + cd packages/molecule/src + ``` 2. **Create** a new directory for your molecule. - ```bash - mkdir new-molecule - cd molecules/new-molecule + ```bash + mkdir new-molecule + cd molecules/new-molecule ``` 3. **Setup** the folder structure for your molecule. -4. **Implement** your molecule. - - - `new-molecule/index.tsx`: +4. **Implement** your molecule. + - Create a `index.tsx` file for your molecule. ```tsx import React from 'react'; @@ -201,14 +200,14 @@ cd packages/molecule/src ### Step 2: Writing the Test Cases 1. **Install testing dependencies** (if not already installed): - ```bash - yarn add --dev jest @testing-library/react @testing-library/jest-dom -``` -2. **Create** a test file for your component: - ```bash - touch packages/molecule/src/new-molecule/index.test.tsx + ```bash + yarn add --dev jest @testing-library/react @testing-library/jest-dom ``` - - `index.test.tsx`: +2. **Create** a test file for your component: + +- Create a `index.test.tsx` for the test file + + ```tsx import React from 'react'; import { render } from '@testing-library/react'; @@ -225,26 +224,26 @@ cd packages/molecule/src }); ``` 3. **Run** the tests: -```bash -yarn test -``` + + ```bash + yarn test + ``` ### Step 3: Add to Storybook 1. **Install** Storybook dependencies (if not already installed): -```bash -yarn dlx sb init -``` + ```bash + yarn dlx sb init + ``` 2. **Create** a Storybook file for your component -```bash - touch index.stories.tsx - ``` +- Create a `index.stories.tsx` for your component + - - `index.stories.tsx`: - ```tsx + + ```tsx import React from 'react'; import { Meta, Story } from '@storybook/react'; @@ -263,9 +262,9 @@ yarn dlx sb init ``` 3. **Run** Storybook: -```bash -yarn storybook -``` + ```bash + yarn storybook + ``` ## Conclusion