Add the initial version

.eslintignore

@@ -0,0 +1,6 @@
+# don't ever lint node_modules
+node_modules
+# don't lint build output (make sure it's set to your correct build folder name)
+dist
+# don't lint nyc coverage output
+coverage

.eslintrc

@@ -0,0 +1,17 @@
+{
+	"root": true,
+	"parser": "@typescript-eslint/parser",
+	"plugins": ["@typescript-eslint", "react", "react-hooks"],
+	"extends": [
+		"prettier",
+		"eslint:recommended",
+		"plugin:@typescript-eslint/recommended",
+		"plugin:react/recommended",
+		"plugin:react-hooks/recommended"
+	],
+	"settings": {
+		"react": {
+			"version": "detect"
+		}
+	}
+}

.gitignore

@@ -18,4 +18,5 @@ ehthumbs.db
 Thumbs.db
 
 # Project specific
+.parcel-cache
 dist

.stylelintrc

@@ -0,0 +1,5 @@
+{
+	"extends": [
+		"stylelint-config-recommended"
+	]
+}

CHANGELOG.md

@@ -1,54 +0,0 @@
-### Changelog
-
-All notable changes to this project will be documented in this file. Dates are displayed in UTC.
-
-Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
-
-#### [1.0.4](https://github.com/scriptex/initial-commit/compare/1.0.2...1.0.4)
-
-> 12 February 2021
-
-- Release 1.0.3 [`49b9822`](https://github.com/scriptex/initial-commit/commit/49b9822bd1ec0f07680b75e28b4ec6b13a7eb791)
-- WIP [`438c563`](https://github.com/scriptex/initial-commit/commit/438c563bd05efa4fda98f4f2dafb00109b407037)
-- Release 1.0.4 [`6b880dc`](https://github.com/scriptex/initial-commit/commit/6b880dc7164e4b92867288315168985575f7b178)
-
-#### [1.0.2](https://github.com/scriptex/initial-commit/compare/1.0.1...1.0.2)
-
-> 12 February 2021
-
-- WIP [`4a3a14f`](https://github.com/scriptex/initial-commit/commit/4a3a14ff09594f3d4d16d2edbdaa295531321091)
-- Release 1.0.2 [`5e232d5`](https://github.com/scriptex/initial-commit/commit/5e232d5b6439c7667eabe0977a0df11a4c7b36ba)
-
-### [1.0.1](https://github.com/scriptex/initial-commit/compare/0.1.2...1.0.1)
-
-> 12 February 2021
-
-#### [0.1.2](https://github.com/scriptex/initial-commit/compare/0.1.1...0.1.2)
-
-> 19 February 2021
-
-- Update CHANGELOG.md with the latest changes [`db8d82a`](https://github.com/scriptex/initial-commit/commit/db8d82a287990a0b96f750cfc367ca9d201cecb1)
-- Release 0.1.2 [`42be56a`](https://github.com/scriptex/initial-commit/commit/42be56a986c2ce5f6bdd13f9dcde99f1208c8aff)
-
-#### [0.1.1](https://github.com/scriptex/initial-commit/compare/0.1.0...0.1.1)
-
-> 19 February 2021
-
-- Update CHANGELOG.md with the latest changes [`9fe37c1`](https://github.com/scriptex/initial-commit/commit/9fe37c11c21bb0804c42b184c563b4338c9e16ef)
-- Release 0.1.1 [`3d531bf`](https://github.com/scriptex/initial-commit/commit/3d531bf9c0536935114d273fb734b3577857ba70)
-- Update after hook [`5e3d398`](https://github.com/scriptex/initial-commit/commit/5e3d39861da4be06238f7bb3619dedec3b1e06b9)
-
-#### 0.1.0
-
-> 19 February 2021
-
-- Update dependency release-it to v14.4.1 [`#8`](https://github.com/scriptex/initial-commit/pull/8)
-- Update dependency release-it to v14.4.0 [`#7`](https://github.com/scriptex/initial-commit/pull/7)
-- Update actions/setup-node action to v2 [`#6`](https://github.com/scriptex/initial-commit/pull/6)
-- Update README.md [`#4`](https://github.com/scriptex/initial-commit/pull/4)
-- Create FUNDING.yml [`#3`](https://github.com/scriptex/initial-commit/pull/3)
-- Update renovate.json [`#2`](https://github.com/scriptex/initial-commit/pull/2)
-- Configure Renovate [`#1`](https://github.com/scriptex/initial-commit/pull/1)
-- Configure release-it [`ed6adda`](https://github.com/scriptex/initial-commit/commit/ed6addafeb57e96d95021cbc4674cfe6d801b85b)
-- Initial commit (Pun intended) [`bd0231e`](https://github.com/scriptex/initial-commit/commit/bd0231e7b62e9396cca14af9f65281c6fb533a6c)
-- Revert all changes [`006da14`](https://github.com/scriptex/initial-commit/commit/006da14d0206fe5dfde0e309e151eb82dab84c51)

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020-Present Atanas Atanasov
+Copyright (c) 2021-Present Atanas Atanasov
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,8 +1,6 @@
-<img src="https://raw.githubusercontent.com/scriptex/initial-commit/master/initial-commit.svg" alt="Initial commit Logo" width="200" />
+# React Round Carousel [![npm][npm-version-img]][npm-version-url] [![MIT license][license-img]][license-url] [![Twitter][twitter-img]][twitter-url] [![Analytics][analytics-img]][analytics-url]
 
-# Initial Commit [![npm][npm-version-img]][npm-version-url] [![MIT license][license-img]][license-url] [![Twitter][twitter-img]][twitter-url] [![Analytics][analytics-img]][analytics-url]
-
-> A starter template for a git repository.
+> An infinitely scrollable 3D carousel component for React
 
 [![All issues on Github][github-issues-img]][github-issues-url]
 [![Open issues on Github][github-open-issues-img]][github-open-issues-url]
@@ -23,14 +21,71 @@
 [![Renovate App Status][renovateapp-img]][renovateapp-url]
 [![Make A Pull Request][prs-welcome-img]][prs-welcome-url]
 
-Use this when creating a NPM package, static website, or any other repository in a git environment
+<img src="https://raw.githubusercontent.com/scriptex/react-round-carousel/master/screenshot.png" alt="Screen    shot of the React Round Carousel component" />
+
+This is an infinitely scrollable 3D carousel component which can be used in a React application.
+
+## Install
+
+First install the component using your preferred package manager:
+
+```sh
+npm i react-round-carousel
+
+# or
+
+yarn add react-round-carousel
+```
 
 ## Usage
 
-1. Clone this repository
-2. Modify relevant files
-3. Push to your new repository location
-4. Profit
+Then import the component in your application. Here is an example:
+
+The slides (or items) should have the following shape:
+
+| Prop      | Type        | Required | Description                                       | Example                                      |
+| --------- | ----------- | -------- | ------------------------------------------------- | -------------------------------------------- |
+| `alt`     | `string`    | false    | Alternative text for the slide image              | 'This is an example alt text'                |
+| `image`   | `string`    | true     | Path or URL to an image                           | 'https://source.unsplash.com/random/210x210' |
+| `content` | `ReactNode` | true     | A ReactNode representing the content of the slide | `<div><strong>Slide Title</strong></div>`    |
+
+```typescript
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { Carousel, CarouselItem } from '../dist/index';
+
+// Create an array of Carousel Items
+const items: CarouselItem[] = Array(20)
+	.fill('')
+	.map((_: string, index: number) => ({
+		alt: 'A random Unsplash photo',
+		image: 'https://source.unsplash.com/random/210x210',
+		content: (
+			<div>
+				<strong>Round Carousel</strong>
+				<span>Slide number {index + 1}</span>
+			</div>
+		)
+	}));
+
+const App = () => <Carousel items={items} />;
+
+ReactDOM.render(<App />, document.getElementById('root'));
+```
+
+## Options
+
+The component accepts the following configuration options as props:
+
+| Prop                | Type           | Required   | Description                                     | Default    |
+| ------------------- | -------------- | ---------- | ----------------------------------------------- | ---------- |
+| `classNamePrefix`   | `string`       | false      | CSS classname prefix for the Carousel component | 'carousel' |
+| `items`             | `CarouselItem` | true       | An array of `CarouselItem`s                     | []         |
+| `itemWidth`         | `number`       | false      | Width of each of the carousel items             | 210        |
+| `nextButtonContent` | `string        | ReactNode` | Content of the next button                      | 'Next'     |
+| `prevButtonContent` | `string        | ReactNode` | Content of the previous button                  | 'Previous' |
+| `showControls`      | `boolean`      | false      | Show/hide navigation controls                   | true       |
 
 ## Support this project
 
@@ -45,33 +100,33 @@ Use this when creating a NPM package, static website, or any other repository in
 
 [MIT][license-url]
 
-[npm-version-img]: https://badgen.net/npm/v/webpack-mpa?icon=npm
-[npm-version-url]: https://www.npmjs.com/package/webpack-mpa
-[license-img]: https://badgen.net/npm/license/webpack-mpa
-[license-url]: https://github.com/scriptex/webpack-mpa/blob/master/LICENSE
+[npm-version-img]: https://badgen.net/npm/v/react-round-carousel?icon=npm
+[npm-version-url]: https://www.npmjs.com/package/react-round-carousel
+[license-img]: https://badgen.net/npm/license/react-round-carousel
+[license-url]: https://github.com/scriptex/react-round-carousel/blob/master/LICENSE
 [twitter-url]: https://twitter.com/scriptexbg
 [twitter-img]: https://badgen.net/twitter/follow/scriptexbg?icon=twitter&color=1da1f2&cache=300
-[github-tag-img]: https://badgen.net/github/tag/scriptex/webpack-mpa?icon=github
-[github-tag-url]: https://github.com/scriptex/webpack-mpa/releases/latest
-[github-checks-img]: https://badgen.net/github/checks/scriptex/webpack-mpa?icon=github
-[github-checks-url]: https://github.com/scriptex/webpack-mpa
-[github-issues-img]: https://badgen.net/github/issues/scriptex/webpack-mpa?icon=github
-[github-issues-url]: https://github.com/scriptex/webpack-mpa/issues
-[github-open-issues-img]: https://badgen.net/github/open-issues/scriptex/webpack-mpa?icon=github
-[github-open-issues-url]: https://github.com/scriptex/webpack-mpa/issues?q=is%3Aopen+is%3Aissue
-[github-closed-issues-img]: https://badgen.net/github/closed-issues/scriptex/webpack-mpa?icon=github
-[github-closed-issues-url]: https://github.com/scriptex/webpack-mpa/issues?q=is%3Aissue+is%3Aclosed
-[last-commit-img]: https://badgen.net/github/last-commit/scriptex/webpack-mpa?icon=github
-[last-commit-url]: https://github.com/scriptex/webpack-mpa/commits/master
-[analytics-img]: https://ga-beacon.appspot.com/UA-83446952-1/github.com/scriptex/webpack-mpa/README.md
-[analytics-url]: https://github.com/scriptex/webpack-mpa/
-[npm-downloads-weekly-img]: https://badgen.net/npm/dw/webpack-mpa?icon=npm
-[npm-downloads-monthly-img]: https://badgen.net/npm/dm/webpack-mpa?icon=npm
-[npm-downloads-yearly-img]: https://badgen.net/npm/dy/webpack-mpa?icon=npm
-[npm-downloads-total-img]: https://badgen.net/npm/dt/webpack-mpa?icon=npm
-[npm-url]: https://www.npmjs.com/package/webpack-mpa
+[github-tag-img]: https://badgen.net/github/tag/scriptex/react-round-carousel?icon=github
+[github-tag-url]: https://github.com/scriptex/react-round-carousel/releases/latest
+[github-checks-img]: https://badgen.net/github/checks/scriptex/react-round-carousel?icon=github
+[github-checks-url]: https://github.com/scriptex/react-round-carousel
+[github-issues-img]: https://badgen.net/github/issues/scriptex/react-round-carousel?icon=github
+[github-issues-url]: https://github.com/scriptex/react-round-carousel/issues
+[github-open-issues-img]: https://badgen.net/github/open-issues/scriptex/react-round-carousel?icon=github
+[github-open-issues-url]: https://github.com/scriptex/react-round-carousel/issues?q=is%3Aopen+is%3Aissue
+[github-closed-issues-img]: https://badgen.net/github/closed-issues/scriptex/react-round-carousel?icon=github
+[github-closed-issues-url]: https://github.com/scriptex/react-round-carousel/issues?q=is%3Aissue+is%3Aclosed
+[last-commit-img]: https://badgen.net/github/last-commit/scriptex/react-round-carousel?icon=github
+[last-commit-url]: https://github.com/scriptex/react-round-carousel/commits/master
+[analytics-img]: https://ga-beacon.appspot.com/UA-83446952-1/github.com/scriptex/react-round-carousel/README.md
+[analytics-url]: https://github.com/scriptex/react-round-carousel/
+[npm-downloads-weekly-img]: https://badgen.net/npm/dw/react-round-carousel?icon=npm
+[npm-downloads-monthly-img]: https://badgen.net/npm/dm/react-round-carousel?icon=npm
+[npm-downloads-yearly-img]: https://badgen.net/npm/dy/react-round-carousel?icon=npm
+[npm-downloads-total-img]: https://badgen.net/npm/dt/react-round-carousel?icon=npm
+[npm-url]: https://www.npmjs.com/package/react-round-carousel
 [tweet-img]: https://img.shields.io/badge/Tweet-Share_this_repository-blue.svg?style=flat-square&logo=twitter&color=38A1F3
-[tweet-url]: https://twitter.com/intent/tweet?text=Checkout%20this%20awesome%20software%20project%3A&url=https%3A%2F%2Fgithub.com%2Fscriptex%2Fwebpack-mpa&via=scriptexbg&hashtags=software%2Cgithub%2Ccode%2Cawesome
+[tweet-url]: https://twitter.com/intent/tweet?text=Checkout%20this%20awesome%20software%20project%3A&url=https%3A%2F%2Fgithub.com%2Fscriptex%2Freact-round-carousel&via=scriptexbg&hashtags=software%2Cgithub%2Ccode%2Cawesome
 [paypal-img]: https://img.shields.io/badge/Donate-Support_me_on_PayPal-blue.svg?style=flat-square&logo=paypal&color=222d65
 [paypal-url]: https://www.paypal.me/scriptex
 [patreon-img]: https://img.shields.io/badge/Become_Patron-Support_me_on_Patreon-blue.svg?style=flat-square&logo=patreon&color=e64413
@@ -81,13 +136,13 @@ Use this when creating a NPM package, static website, or any other repository in
 [liberapay-img]: https://img.shields.io/liberapay/receives/scriptex.svg?logo=liberapay
 [liberapay-url]: https://liberapay.com/scriptex
 [issuehunt-img]: https://raw.githubusercontent.com/BoostIO/issuehunt-materials/master/v1/issuehunt-shield-v1.svg
-[issuehunt-url]: https://issuehunt.io/r/scriptex/webpack-mpa
-[publish-size-img]: https://badgen.net/packagephobia/publish/webpack-mpa
+[issuehunt-url]: https://issuehunt.io/r/scriptex/react-round-carousel
+[publish-size-img]: https://badgen.net/packagephobia/publish/react-round-carousel
 [renovateapp-img]: https://badgen.net/badge/renovate/enabled/green?cache=300
 [renovateapp-url]: https://renovatebot.com
 [prs-welcome-img]: https://badgen.net/badge/PRs/welcome/green?cache=300
-[prs-welcome-url]: https://github.com/scriptex/webpack-mpa/pulls
-[github-status-img]: https://badgen.net/github/status/scriptex/webpack-mpa?icon=github
-[github-status-url]: https://github.com/scriptex/webpack-mpa/actions/workflows/build.yml
-[github-languages-img]: https://img.shields.io/github/languages/count/scriptex/webpack-mpa
-[github-top-language-img]: https://img.shields.io/github/languages/top/scriptex/webpack-mpa
+[prs-welcome-url]: https://github.com/scriptex/react-round-carousel/pulls
+[github-status-img]: https://badgen.net/github/status/scriptex/react-round-carousel?icon=github
+[github-status-url]: https://github.com/scriptex/react-round-carousel/actions/workflows/build.yml
+[github-languages-img]: https://img.shields.io/github/languages/count/scriptex/react-round-carousel
+[github-top-language-img]: https://img.shields.io/github/languages/top/scriptex/react-round-carousel