meticulous-ui 1.0.0

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "meticulous-ui",
+  "version": "1.0.0",
+  "description": "A clean, modern React component library built with Vite (ESM)",
+  "type": "module",
+  "main": "src/index.js",
+  "files": [
+    "src"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "styled-components": "^6.0.0"
+  },
+  "scripts": {
+    "lint": "eslint .",
+    "build": "vite build"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "meticulous-ui"
+  ],
+  "author": "Your Name",
+  "license": "MIT"
+}

package/src/colors/index.js

@@ -0,0 +1,3 @@
+export const WHITE = '#FFFFFF';
+export const TEAL = '#12A2AB';
+export const GREY = '#828282';

package/src/components/Icons/ChevronLeft/ChevronLeft.jsx

@@ -0,0 +1,28 @@
+// Libraries
+import styled from 'styled-components';
+
+// constants
+import { GREY } from '../../../colors';
+
+const Image = styled.img`
+  display: inline-block;
+  vertical-align: middle;
+  fill: ${({ color }) => color};
+`;
+
+const ChevronLeft = (props) => {
+  const {color, size} = props;
+
+  return (
+    <Image
+      {...props}
+      color={color || GREY}
+      src="https://www.svgrepo.com/show/533659/chevron-left.svg"
+      alt="Chevron Left"
+      width={size}
+      height={size}
+    />
+  );
+}
+
+export default ChevronLeft;

package/src/components/Icons/ChevronLeft/index.js

@@ -0,0 +1,3 @@
+import ChevronLeft from './ChevronLeft.jsx';
+
+export default ChevronLeft;

package/src/components/Icons/ChevronRight/ChevronRight.jsx

@@ -0,0 +1,28 @@
+// Libraries
+import styled from 'styled-components';
+
+// constants
+import { GREY } from '../../../colors';
+
+const Image = styled.img`
+  display: inline-block;
+  vertical-align: middle;
+  fill: ${({ color }) => color};
+`;
+
+const ChevronRight = (props) => {
+  const {color, size} = props;
+
+  return (
+    <Image
+      {...props}
+      color={color || GREY}
+      src="https://www.svgrepo.com/show/533661/chevron-right.svg"
+      alt="Chevron Right"
+      width={size}
+      height={size}
+    />
+  );
+}
+
+export default ChevronRight;

package/src/components/Icons/ChevronRight/index.js

@@ -0,0 +1,3 @@
+import ChevronRight from './ChevronRight.jsx';
+
+export default ChevronRight;

package/src/components/Pagination/Pagination.jsx

@@ -0,0 +1,76 @@
+// Libraries
+import _range from 'lodash-es/range';
+
+// helpers
+import { renderThreeDots, renderPageNum } from './helpers.jsx';
+
+// styles
+import { AllPages, ClickableChevronLeft, ClickableChevronRight } from './styles';
+
+const Pagination = ({ pageNumber, setPageNumber, totalPages }) => {
+  const setPrevPage = () => {
+    if (pageNumber > 1) {
+      setPageNumber(pageNumber - 1);
+    }
+  };
+
+  const setNextPage = () => {
+    if (pageNumber < totalPages) {
+      setPageNumber(pageNumber + 1);
+    }
+  };
+
+  if (totalPages <= 7) {
+    return (
+      <AllPages>
+        <ClickableChevronLeft onClick={setPrevPage} />
+        {_range(1, totalPages + 1).map(renderPageNum(pageNumber, setPageNumber))}
+        <ClickableChevronRight onClick={setPrevPage} />
+      </AllPages>
+    );
+  }
+
+  if (
+    totalPages < 10 ||
+    pageNumber < 4 ||
+    (pageNumber > totalPages - 3 && pageNumber <= totalPages)
+  ) {
+    return (
+      <AllPages>
+        <ClickableChevronLeft
+          size={20}
+          onClick={setPrevPage}
+        />
+        {_range(1, 5).map(renderPageNum(pageNumber, setPageNumber))}
+        {renderThreeDots()}
+        {[totalPages - 3, totalPages - 2, totalPages - 1, totalPages].map(
+          renderPageNum(pageNumber, setPageNumber)
+        )}
+        <ClickableChevronRight
+          size={20}
+          onClick={setNextPage}
+        />
+      </AllPages>
+    );
+  }
+
+  return (
+    <AllPages>
+      <ClickableChevronLeft
+        size={20}
+        onClick={setPrevPage}
+      />
+      {_range(1, 3).map(renderPageNum(pageNumber, setPageNumber))}
+      {renderThreeDots()}
+      {[pageNumber - 1, pageNumber, pageNumber + 1].map(renderPageNum(pageNumber, setPageNumber))}
+      {renderThreeDots()}
+      {[totalPages - 1, totalPages].map(renderPageNum(pageNumber, setPageNumber))}
+      <ClickableChevronRight
+        size={20}
+        onClick={setNextPage}
+      />
+    </AllPages>
+  );
+};
+
+export default Pagination;

package/src/components/Pagination/helpers.jsx

@@ -0,0 +1,21 @@
+import { Page, P } from './styles';
+
+export const renderPageNum = (selected, setPageNumber) => (page) => {
+  const clickHandler = () => {
+    setPageNumber(page);
+  };
+
+  return (
+    <Page data-testid={selected === page ? "current-page" : `test-${page}`} isSelected={selected === page} onClick={clickHandler}>
+      {page}
+    </Page>
+  );
+};
+
+export const renderThreeDots = () => (
+  <>
+    <P>.</P>
+    <P>.</P>
+    <P>.</P>
+  </>
+);

package/src/components/Pagination/index.js

@@ -0,0 +1,3 @@
+import Pagination from './Pagination.jsx';
+
+export default Pagination;

package/src/components/Pagination/styles.js

@@ -0,0 +1,50 @@
+// Libraries
+import styled, { css } from 'styled-components';
+
+// Icons
+import ChevronLeft from '../Icons/ChevronLeft';
+import ChevronRight from '../Icons/ChevronRight';
+
+// constants
+import { GREY, TEAL, WHITE } from '../../colors';
+
+export const AllPages = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.6rem;
+  min-width: 175rem;
+  width: 175rem;
+`;
+
+export const Page = styled.div`
+  height: 3rem;
+  width: 3rem;
+  border-radius: 50%;
+  padding-top: 0.6rem;
+  text-align: center;
+  font-size: 1.4rem;
+  ${({ isSelected }) =>
+    isSelected
+      ? css`
+          cursor: auto;
+          color: ${WHITE};
+          background-color: ${TEAL};
+        `
+      : css`
+          cursor: pointer;
+          color: ${GREY};
+        `}
+`;
+
+export const P = styled.p`
+  color: ${GREY};
+`;
+
+export const ClickableChevronLeft = styled(ChevronLeft)`
+  cursor: pointer;
+`;
+
+export const ClickableChevronRight = styled(ChevronRight)`
+  cursor: pointer;
+`;

package/src/index.js

@@ -0,0 +1,3 @@
+export { Pagination } from './components/Pagination';
+export { ChevronLeft } from './components/Icons/ChevronLeft';
+export { ChevronRight } from './components/Icons/ChevronRight';