Merge pull request #3 from codesweetly/feature/use-inline-css

feature: Use inline css

.github/workflows/commitlint.yml

@@ -0,0 +1,11 @@
+name: Lint Commit Messages
+on: [pull_request, push]
+
+jobs:
+  commitlint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - uses: wagoid/commitlint-github-action@v5

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 CodeSweetly
+Copyright (c) 2022-present Oluwatobi Sofela & CodeSweetly <[email protected]>
 
 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,7 +1,3 @@
-> **Important**
->
-> Yarn users also need `@emotion/[email protected]` installation.
-
 # React YouTube Playlist
 
 An easy-to-use and responsive React component for displaying YouTube playlists on a web app. Create a beautiful gallery of YouTube videos.
@@ -22,32 +18,12 @@ This section shows how to install the React YouTube Playlist package.
 npm install @codesweetly/react-youtube-playlist
 ```
 
-> **Note**
->
-> Did you get an `'npm ERR! ERESOLVE unable to resolve dependency tree'` error?
->
-> If yes, please add `--legacy-peer-deps` to your installation command like so:
->
-> ```
-> npm install @codesweetly/react-youtube-playlist --legacy-peer-deps
-> ```
-
 ### Using yarn
 
 ```
 yarn add @codesweetly/react-youtube-playlist
 ```
 
-> **Note**
->
-> Did you get a `Module not found: Error: Can't resolve '@emotion/react/jsx-runtime'` error?
->
-> If yes, please install `@emotion/[email protected]`:
->
-> ```
-> yarn add @emotion/[email protected]
-> ```
-
 ### Using pnpm
 
 ```
@@ -57,7 +33,7 @@ pnpm add @codesweetly/react-youtube-playlist
 ## Usage
 
 ```js
-import YouTubePlaylist from "@codesweetly/react-youtube-playlist";
+import { YouTubePlaylist } from "@codesweetly/react-youtube-playlist";
 
 function App() {
   return (
@@ -149,7 +125,7 @@ import ImageGallery from "react-image-grid-gallery";
 
 The `"use client"` directive tells NextJS to consider all modules imported into the page as part of the Client Component module graph.
 
-The `YouTubePlaylist` package works only as a Client Component because it uses React's State and Lifecycle effects, such as `useState()` and `useEffect()`.
+The `YouTubePlaylist` package works _only_ as a Client Component because it uses React's State and Lifecycle effects, such as `useState()` and `useEffect()`.
 
 ## Build
 
@@ -159,7 +135,6 @@ npm run build
 
 ## Dependencies
 
-- [emotion](https://github.com/emotion-js/emotion/)
 - [fslightbox-react](https://github.com/banthagroup/fslightbox-react)
 - [prop-types](https://github.com/facebook/prop-types)
 - [react](https://github.com/facebook/react)

commitlint.config.ts

@@ -0,0 +1,10 @@
+import type { UserConfig } from "@commitlint/types";
+
+const Configuration: UserConfig = {
+  extends: ["@commitlint/config-conventional"],
+  rules: {
+    "subject-case": [2, "always", ["sentence-case"]],
+  },
+};
+
+module.exports = Configuration;

jest.config.ts

@@ -0,0 +1,10 @@
+import type { Config } from "jest";
+
+const config: Config = {
+  testEnvironment: "jsdom",
+  transform: {
+    "^.+\\.tsx?$": "ts-jest",
+  },
+};
+
+export default config;