# cs-components-core > ## Summary Latest version **0.1.0** (published 2022-11-14) · ISC license · 0 weekly downloads ## Install ```sh npm install cs-components-core pnpm add cs-components-core yarn add cs-components-core bun add cs-components-core ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.0 | | Published | 2022-11-14 | | First published | 2022-11-14 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 10 | | Unpacked size | 1.4 MB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | Author | Samuel Goncalves | | Maintainers | goonca | ## Links - npm: https://www.npmjs.com/package/cs-components-core - Repository: https://github.com/goonca/cs-core - Homepage: https://github.com/goonca/cs-core#readme - Issues: https://github.com/goonca/cs-core/issues - npm.io page: https://npm.io/package/cs-components-core ## Dependencies (10) - [qs](https://npm.io/package/qs.md) ^6.10.5 - [uuid](https://npm.io/package/uuid.md) ^8.3.2 - [react](https://npm.io/package/react.md) ^17.0.2 - [tslib](https://npm.io/package/tslib.md) ^2.4.0 - [react-dom](https://npm.io/package/react-dom.md) ^17.0.2 - [styled-jsx](https://npm.io/package/styled-jsx.md) ^5.0.2 - [algoliasearch](https://npm.io/package/algoliasearch.md) ^4.13.1 - [search-insights](https://npm.io/package/search-insights.md) ^2.2.1 - [styled-components](https://npm.io/package/styled-components.md) ^5.3.5 - [react-instantsearch-dom](https://npm.io/package/react-instantsearch-dom.md) ^6.27.0 ## Recent versions - 0.1.0 (latest) — 2022-11-14 ## README # Cyberport Algolia Components ## Summary - [About](#about) - [Quick start](#quick-start) - [Further info](#further-info) - [References](#references) ## About This repository contains the component library used for the integration of [Algolia Search](https://www.algolia.com/) with the Cyberport e-commerce. The components were developed using [React](https://reactjs.org/), [Typescript](https://www.typescriptlang.org/) for strong type, the concepts of the [Atomic Design](https://atomicdesign.bradfrost.com/table-of-contents/) for structuring the components, [jest](https://jestjs.io/docs/getting-started) and [testing library](https://testing-library.com/docs/) for tests, preferably using [TDD](https://en.wikipedia.org/wiki/Test-driven_development), [StoryBook](https://storybook.js.org/) as a component showcase that can also serve as a sandbox for manual testing. Last, the implementation uses the [Algolia React library](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react/), [react-instantsearch-dom](https://www.npmjs.com/package/react-instantsearch-dom), which offers generic components and higher-order components (HoC) for making easier the customization of the search experience, accordingly to the client UI specifications. ### Releases | Version | Release Notes | | :-----: | ------------------------------------------------------------------------------------------------------------------------------- | | 1.0.0 | Includes the SearchBar, SearchResultsPage and all dependent components. This version was integrated using Client-Side rendering | ## Quick start ### Requirements #### NodeJS This library uses NodeJS, therefore if you still don't have it installed, follow the steps from the official [NodeJS website](https://nodejs.org/en/download/). Alternatively, the [Node Version Manager (nvm)](https://github.com/nvm-sh/nvm) might be a better option, so it is possible to install or update the NodeJS versions in an easier way. #### Setup the Environment Variables File [dotenv](https://www.npmjs.com/package/dotenv) package is in place for handling the environment variables for local development. In the source code there is a `.env.example` file, which shows the skeleton of what is expected. Copy this file and name it as `.env` at the project root. Afterwards add the missing variables related to Algolia: ``` ALGOLIA_API_KEY= ALGOLIA_APPLICATION_ID= ``` These values can be found in the Algolia dashboard as follows: - [Algolia application ID](https://www.algolia.com/account/applications) - [Algolia API key](https://www.algolia.com/account/api-keys/all) > **Notes:** > > - ALGOLIA_API_KEY corresponds to the PUBLIC key. Make sure to grab the one > labeled as Search API Key, as this is the one that can be shared publicly. > - The **Algolia Admin key** should never be used, as this key gives full > access to the indexes and if leaked will generate a big security issue. > - Never commit the .env file or add the public API keys in the .env.example, > as this will be part of the git history. The Algolia API public key gives > READ ONLY permissions, however it is not recommended to keep it in the VCS.ß #### Install dependencies ```shell npm i ``` After having the dependencies installed and the environment variables setup, the development environment should be ready to go. The following scripts are helpful for the development process: - storybook - test:watch - lint and formats The next topics will show the available npm scripts and the respective explanations. ### StoryBook: Components Showcase ```shell npm run storybook ``` Then open the URL: http://localhost:6006 ### Tests To execute all the test suites, use the following command: ```shell npm run test ``` If it is desirable to test only the files that were changed, use instead: ```shell npm run test:watch ``` This command is very helpful during development time, as it will keep watching the changed files and only execute the tests related to these files. ### Lint, Type check and Format These commands are responsible to make sure that the code is following the source code defined rules (lint), do not have type inconsistencies based on the Typescript compiler (Typecheck), and has the right format based on the Prettier setup (prettier). To run all of them together once, use: ```shell npm run lint && npm run typecheck && npm run format:check ``` To **fix lint and format errors automatically** use instead: ```shell npm run lint:fix && npm run format ``` > **Hint:** Always run these commands before the commit and pushing your code to > remote. ### Build To build the project there are three options: - **Build Components** ```shell npm run build:components ``` Use the above script to build the component library. This will generate the bundle file that will be further used by the Cyberport webshop - existing AEM application. If the COMPONENTS_NODE_ENV environment variable is set to development, it will generate a bundle not optimised for production, however it is good for development purposes, and so for debugging. When the value is setup to production, it will create an optimised version of the bundle, doing minification and further optimisations. This value is used by the CI / CD process, when deploying the library to the CDN. - **Build StoryBook** ```shell npm run build:storybook ``` The storybook build option generates the storybook showcase application. The storybook application is available in the following internal URL: https://storybook.eu-central-1.ops.aws.csdevops.io/, so that the QA and Design teams can try and test the components. The deployment happens during the continuous integration process. - **Build All** The following command will build the library and the storybook all at once. ```shell npm run build ``` ### Continuous Integration Running the CI script will execute the Continuous integration steps, running multiple scripts already mentioned in this document as lint, format:check, typecheck, test, build, and so on. This is the script executed by the CI/CD flow from Cyberport. ```shell npm run ci ``` ## Further info Further information about this project is available at [Cyberport Confluence page](https://devconfluence.cyberport.de/display/EC/Algolia+Integration) ## References - [Algolia Docs](https://www.algolia.com/doc/) - [Algolia React InstantSearch](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react/) - [Typescript](https://www.typescriptlang.org/) - [React](https://reactjs.org/) - [Atomic Design](https://atomicdesign.bradfrost.com/table-of-contents/) - [Jest](https://jestjs.io/docs/getting-started) - [testing library](https://testing-library.com/docs/) - [Test Driven Development](https://en.wikipedia.org/wiki/Test-driven_development), - [StoryBook](https://storybook.js.org/) --- _Source: https://npm.io/package/cs-components-core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._