@willphan1712000/frontend 1.0.0

package/.babelrc

@@ -0,0 +1,20 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ],
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "regenerator": true
+      }
+    ]
+  ]
+}

package/README.md

@@ -0,0 +1,52 @@
+<img style="width: 15%" src="./will.png">
+
+## Will-js is a Web development library made easy for Full-stack Development to develop, build, and push to production created by Will Phan
+
+## It has pre-built classes that can be used for Web Development
+
+## Key Benefits
+
+- Simple syntax that includes object-oriented programming techniques
+- Pre-built functionalities that handle difficult tasks in Full-stack Development
+- Provides flexibility, maintainability, and extensibility
+
+## Technology
+
+![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)
+
+## Installation
+
+### Option 1: Clone this project to your local computer
+
+There is a file called W.ts that exports $$ function, this is the root function to use every other functions and classes.
+Simply import $$ to every ts files that you want to use Will-js
+
+```ts
+import { $$ } from "path/of/your/project/Web-Development/W";
+```
+
+### Options 2: Install from npm
+
+Run this command in your terminal (note: this assumes you have installed Nodejs)
+
+```npm
+npm i @willphan1712000/w
+```
+
+Then import $$ function to every ts files that you want to use Will-js as an entry point where you can access every features of the library
+
+```ts
+import { $$ } from "@willphan1712000/w";
+```
+
+## How to use Will-js
+
+[Go to my portfolio](https://will-five.vercel.app/w)
+
+## Find a bug?
+
+If you found an issue or would like to submit an improvement to this project, please submit an issue using the issues tab above. If you would like to submit a Pull Request with a fix, reference the issue you created
+
+## Happy with this project
+
+You can connect to me at [Facebook](https://www.facebook.com/phanthanhnha123200/) [Instagram](https://www.instagram.com/phanthanhnha_0117/)

package/dist/index.css

@@ -0,0 +1,233 @@
+/* scss-module:/home/runner/work/project-will-frontend/project-will-frontend/src/components/DropdownSelect/dropdownSelect.module.css/#scss-module-data */
+* {
+  margin: 0;
+  padding: 0;
+}
+.dropdownSelect-module__select_box___Q8S31 {
+  border-radius: 10px;
+  border: solid 1px #dadada;
+  padding: 5px 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+}
+.dropdownSelect-module__value___izaXQ {
+  margin-right: auto;
+}
+.dropdownSelect-module__close___axGDo {
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.dropdownSelect-module__close___axGDo:hover {
+  background-color: #f0f0f0;
+}
+.dropdownSelect-module__element___Q56x3 {
+  display: flex;
+  padding: 5px;
+  border-radius: 10px;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+}
+.dropdownSelect-module__element___Q56x3:hover {
+  background-color: #f0f0f0;
+}
+.dropdownSelect-module__dropdown___cjfHn {
+  position: absolute;
+  box-sizing: border-box;
+  width: 100%;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  border: solid 1px #dadada;
+  border-radius: 10px;
+  padding: 5px;
+  max-height: 300px;
+  overflow-y: auto;
+  background-color: white;
+}
+.dropdownSelect-module__search_border___xQU5q {
+  position: sticky;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  width: 100%;
+  background-color: white;
+}
+.dropdownSelect-module__search___kGmqs {
+  width: 100%;
+  border-radius: 5px;
+  padding: 5px;
+  border: solid 1px #dadada;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+/* scss-module:/home/runner/work/project-will-frontend/project-will-frontend/src/components/RangeSlider/rangeSlider.module.css/#scss-module-data */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+.rangeSlider-module__slider_border___CoeFx {
+  position: relative;
+  display: flex;
+  gap: 5px;
+  flex-direction: column;
+  height: 10px;
+}
+.rangeSlider-module__thumb___OnFSM {
+  width: 17px;
+  height: 17px;
+  cursor: pointer;
+  position: absolute;
+  border-radius: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+}
+.rangeSlider-module__thumb_shadow___L16TY {
+  content: "";
+  position: absolute;
+  top: -9px;
+  left: -9px;
+  width: 35px;
+  height: 35px;
+  opacity: 0.2;
+  z-index: -1;
+  border-radius: 50%;
+  scale: 0;
+  transition: scale 0.1s linear;
+}
+.rangeSlider-module__fill___urGCN {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.rangeSlider-module__rest___pO2pi {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0.3;
+  width: 100%;
+  height: 70%;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.rangeSlider-module__value___Evg0D {
+  position: absolute;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  transform-origin: bottom left;
+  background-color: #f0f0f7;
+  border-radius: 5px;
+  padding: 5px;
+  scale: 0;
+  transition: scale 0.1s linear;
+}
+
+/* scss-module:/home/runner/work/project-will-frontend/project-will-frontend/src/components/OptionSlider/optionSlider.module.css/#scss-module-data */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+.optionSlider-module__border___DvXkD {
+  border-radius: 10px;
+  overflow: auto;
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+  aspect-ratio: 4;
+  display: flex;
+  flex-direction: row;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  position: relative;
+}
+.optionSlider-module__border___DvXkD::-webkit-scrollbar {
+  display: none;
+}
+.optionSlider-module__background___P6MQP {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  opacity: 0.3;
+}
+.optionSlider-module__options___OLBcd {
+  height: 100%;
+  padding: 5px;
+  gap: 5px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.optionSlider-module__element___obtjI {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  width: auto;
+  height: 100%;
+  aspect-ratio: 1/1;
+  border-radius: 50%;
+  overflow: hidden;
+  border: solid 1px #000;
+}
+
+/* scss-module:/home/runner/work/project-will-frontend/project-will-frontend/src/components/ColorPickerSlider/colorPickerSlider.module.css/#scss-module-data */
+.colorPickerSlider-module__border___-6cw8 {
+  border-radius: 10px;
+  aspect-ratio: 20;
+  background:
+    linear-gradient(
+      to right,
+      hsl(0, 100%, 50%),
+      hsl(60, 100%, 50%),
+      hsl(120, 100%, 50%),
+      hsl(180, 100%, 50%),
+      hsl(240, 100%, 50%),
+      hsl(300, 100%, 50%),
+      hsl(0, 100%, 50%));
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+       appearance: none;
+  outline: none;
+  position: relative;
+}
+.colorPickerSlider-module__thumb___p2fHW {
+  border-radius: 50%;
+  aspect-ratio: 1;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+  border: solid 2px white;
+}
+.colorPickerSlider-module__label___Aa0AV {
+  position: absolute;
+  bottom: 200%;
+  transform: translateX(-50%);
+  border-radius: 5px;
+  padding: 5px;
+  font-size: 15px;
+  background: #f0f0f7;
+  transition: scale 0.1s linear;
+  scale: 0;
+  transform-origin: bottom left;
+}

package/dist/index.d.mts

@@ -0,0 +1,78 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type Options$1 = {
+    label: string;
+    value: string;
+}[];
+interface Props$3 {
+    options: Options$1;
+    value: string;
+    onChange: (value: string) => void;
+    width?: string;
+}
+/**
+ * Dropdown Select component, allowing users to select options from dropdown menu
+ * @param options - list of options, which is an array of object [{ label: string, value: string }]
+ * @param value - a chosen value
+ * @param onChange - a function to set a value
+ * @param width - specify the width of the component
+ * @returns
+ */
+declare const DropdownSelect: ({ options, value, onChange, width }: Props$3) => react_jsx_runtime.JSX.Element;
+
+interface Props$2 {
+    value: string;
+    onChange: (value: string) => void;
+    min?: string;
+    max?: string;
+    color?: string;
+    width?: string;
+}
+/**
+ * Range Slider component, allowing users to drag the slider to choose value they want
+ * @param min - minimum value
+ * @param max - maximum value
+ * @param color - color scheme of the range slider
+ * @param width - specify the width of the component
+ * @param value - a chosen value
+ * @param onChange - to set a value
+ * @returns
+ */
+declare const RangeSlider: ({ min, max, color, width, value, onChange }: Props$2) => react_jsx_runtime.JSX.Element;
+
+type Options = {
+    label: ReactNode;
+    value: string;
+}[];
+interface Props$1 {
+    value: string;
+    onChange: (value: string) => void;
+    width?: string;
+    options: Options;
+    color?: string;
+}
+/**
+ * Option Slider component, allowing users to select a value they want with the help of element representaion. Label is a React Node jsx that represents the option. For example, if a value was a font, the label would be a React Node jsx that represents a character using the font
+ * @param value - a chosen value
+ * @param onChange - to set a value
+ * @options - list of options, format [{ label: React Node Syntax, value: string }]
+ * @returns
+ */
+declare const OptionSlider: ({ value, onChange, width, options, color }: Props$1) => react_jsx_runtime.JSX.Element;
+
+interface Props {
+    value: string;
+    onChange: (value: string) => void;
+    width?: string;
+}
+/**
+ * ColorPickerSlider component, allowing users to select a color by dragging the slider
+ * @param value
+ * @param onChange
+ * @param width
+ * @returns
+ */
+declare const ColorPickerSlider: ({ value, onChange, width }: Props) => react_jsx_runtime.JSX.Element;
+
+export { ColorPickerSlider, DropdownSelect, OptionSlider, type Options$1 as Options, RangeSlider, type Options as SliderOptions };

package/dist/index.d.ts

@@ -0,0 +1,78 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type Options$1 = {
+    label: string;
+    value: string;
+}[];
+interface Props$3 {
+    options: Options$1;
+    value: string;
+    onChange: (value: string) => void;
+    width?: string;
+}
+/**
+ * Dropdown Select component, allowing users to select options from dropdown menu
+ * @param options - list of options, which is an array of object [{ label: string, value: string }]
+ * @param value - a chosen value
+ * @param onChange - a function to set a value
+ * @param width - specify the width of the component
+ * @returns
+ */
+declare const DropdownSelect: ({ options, value, onChange, width }: Props$3) => react_jsx_runtime.JSX.Element;
+
+interface Props$2 {
+    value: string;
+    onChange: (value: string) => void;
+    min?: string;
+    max?: string;
+    color?: string;
+    width?: string;
+}
+/**
+ * Range Slider component, allowing users to drag the slider to choose value they want
+ * @param min - minimum value
+ * @param max - maximum value
+ * @param color - color scheme of the range slider
+ * @param width - specify the width of the component
+ * @param value - a chosen value
+ * @param onChange - to set a value
+ * @returns
+ */
+declare const RangeSlider: ({ min, max, color, width, value, onChange }: Props$2) => react_jsx_runtime.JSX.Element;
+
+type Options = {
+    label: ReactNode;
+    value: string;
+}[];
+interface Props$1 {
+    value: string;
+    onChange: (value: string) => void;
+    width?: string;
+    options: Options;
+    color?: string;
+}
+/**
+ * Option Slider component, allowing users to select a value they want with the help of element representaion. Label is a React Node jsx that represents the option. For example, if a value was a font, the label would be a React Node jsx that represents a character using the font
+ * @param value - a chosen value
+ * @param onChange - to set a value
+ * @options - list of options, format [{ label: React Node Syntax, value: string }]
+ * @returns
+ */
+declare const OptionSlider: ({ value, onChange, width, options, color }: Props$1) => react_jsx_runtime.JSX.Element;
+
+interface Props {
+    value: string;
+    onChange: (value: string) => void;
+    width?: string;
+}
+/**
+ * ColorPickerSlider component, allowing users to select a color by dragging the slider
+ * @param value
+ * @param onChange
+ * @param width
+ * @returns
+ */
+declare const ColorPickerSlider: ({ value, onChange, width }: Props) => react_jsx_runtime.JSX.Element;
+
+export { ColorPickerSlider, DropdownSelect, OptionSlider, type Options$1 as Options, RangeSlider, type Options as SliderOptions };