namirasoft-site-react 1.4.0 → 1.4.1

package/src/components/NSTag.module.css

@@ -1,53 +1,53 @@
-.ns_tag_container {
-    display: flex;
-    flex-direction: column;
-    background-color: white;
-    width: fit-content;
-    border-radius: 8px;
-    padding: 16px;
-    margin: 48px;
-}
-
-.ns_tag_title {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: left;
-}
-
-.ns_tag_title h2 {
-    color: #141B5C;
-    font-weight: 600;
-    font-size: 24px;
-    margin: 0;
-}
-
-.ns_tag_title h6 {
-    color: rgb(68, 182, 243);
-    font-weight: 600;
-    font-size: 16px;
-    margin: 0;
-}
-
-.ns_tag_input_container {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: left;
-    align-items: center;
-    gap: 16px;
-}
-
-.ns_tag_input_group {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    justify-content: center;
-    align-items: center;
-}
-
-@media only screen and (min-width:1100px) {
-    .ns_tag_input_group {
-        flex-direction: row;
-    }
+.ns_tag_container {
+    display: flex;
+    flex-direction: column;
+    background-color: white;
+    width: fit-content;
+    border-radius: 8px;
+    padding: 16px;
+    margin: 48px;
+}
+
+.ns_tag_title {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: left;
+}
+
+.ns_tag_title h2 {
+    color: #141B5C;
+    font-weight: 600;
+    font-size: 24px;
+    margin: 0;
+}
+
+.ns_tag_title h6 {
+    color: rgb(68, 182, 243);
+    font-weight: 600;
+    font-size: 16px;
+    margin: 0;
+}
+
+.ns_tag_input_container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: left;
+    align-items: center;
+    gap: 16px;
+}
+
+.ns_tag_input_group {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    justify-content: center;
+    align-items: center;
+}
+
+@media only screen and (min-width:1100px) {
+    .ns_tag_input_group {
+        flex-direction: row;
+    }
 }

package/src/components/NSTag.tsx

@@ -1,74 +1,74 @@
-import { Component, createRef } from 'react';
-import { NSBoxString } from './NSBoxString';
-import { NSButton } from './NSButton';
-import Styles from './NSTag.module.css';
-
-export interface NSTagProps
-{
-	onChanged?: () => void;
-	onDeleted?: () => void;
-}
-export interface NSTagValue
-{
-	name: string;
-	value: string;
-	description?: string;
-}
-
-export class NSTag extends Component<NSTagProps>
-{
-	static isEmpty(value: NSTagValue)
-	{
-		if (value.name || value.value || value.description)
-			return false
-		return true;
-	}
-
-	private NSBoxString_Key = createRef<NSBoxString>();
-	private NSBoxString_Value = createRef<NSBoxString>();
-	private NSBoxString_Description = createRef<NSBoxString>();
-
-	getValue(checkError: boolean = true): NSTagValue
-	{
-		let name = this.NSBoxString_Key.current?.getValue(checkError) ?? "";
-		let value = this.NSBoxString_Value.current?.getValue(checkError) ?? "";
-		let description = this.NSBoxString_Description.current?.getValue(checkError) ?? "";
-		return {
-			name,
-			value,
-			description
-		};
-	}
-	setValue(value: NSTagValue)
-	{
-		this.NSBoxString_Key.current?.setValue(value.name);
-		this.NSBoxString_Value.current?.setValue(value.value);
-		this.NSBoxString_Description.current?.setValue(value.description ?? "");
-	}
-	override render()
-	{
-		return (
-			<section className={Styles.ns_tag_input_container} >
-				<div className={Styles.ns_tag_input_group}>
-					<NSBoxString ref={this.NSBoxString_Key} title='Name' required onChanged={this.props.onChanged} />
-					<NSBoxString ref={this.NSBoxString_Value} title='Value' required onChanged={this.props.onChanged} />
-					<NSBoxString ref={this.NSBoxString_Description} title='Description' required={false} onChanged={this.props.onChanged} />
-					<NSButton
-						title='Remove'
-						onClick={() =>
-						{
-							if (this.props.onDeleted)
-								this.props.onDeleted();
-						}}
-						style={{
-							backgroundColor: "transparent",
-							border: "1px solid rgba(3, 119, 255, 1)",
-							width: "145px",
-							marginTop: "28px"
-						}}
-					/>
-				</div>
-			</section>
-		);
-	}
+import { Component, createRef } from 'react';
+import { NSBoxString } from './NSBoxString';
+import { NSButton } from './NSButton';
+import Styles from './NSTag.module.css';
+
+export interface NSTagProps
+{
+	onChanged?: () => void;
+	onDeleted?: () => void;
+}
+export interface NSTagValue
+{
+	name: string;
+	value: string;
+	description?: string;
+}
+
+export class NSTag extends Component<NSTagProps>
+{
+	static isEmpty(value: NSTagValue)
+	{
+		if (value.name || value.value || value.description)
+			return false
+		return true;
+	}
+
+	private NSBoxString_Key = createRef<NSBoxString>();
+	private NSBoxString_Value = createRef<NSBoxString>();
+	private NSBoxString_Description = createRef<NSBoxString>();
+
+	getValue(checkError: boolean = true): NSTagValue
+	{
+		let name = this.NSBoxString_Key.current?.getValue(checkError) ?? "";
+		let value = this.NSBoxString_Value.current?.getValue(checkError) ?? "";
+		let description = this.NSBoxString_Description.current?.getValue(checkError) ?? "";
+		return {
+			name,
+			value,
+			description
+		};
+	}
+	setValue(value: NSTagValue)
+	{
+		this.NSBoxString_Key.current?.setValue(value.name);
+		this.NSBoxString_Value.current?.setValue(value.value);
+		this.NSBoxString_Description.current?.setValue(value.description ?? "");
+	}
+	override render()
+	{
+		return (
+			<section className={Styles.ns_tag_input_container} >
+				<div className={Styles.ns_tag_input_group}>
+					<NSBoxString ref={this.NSBoxString_Key} title='Name' required onChanged={this.props.onChanged} />
+					<NSBoxString ref={this.NSBoxString_Value} title='Value' required onChanged={this.props.onChanged} />
+					<NSBoxString ref={this.NSBoxString_Description} title='Description' required={false} onChanged={this.props.onChanged} />
+					<NSButton
+						title='Remove'
+						onClick={() =>
+						{
+							if (this.props.onDeleted)
+								this.props.onDeleted();
+						}}
+						style={{
+							backgroundColor: "transparent",
+							border: "1px solid rgba(3, 119, 255, 1)",
+							width: "145px",
+							marginTop: "28px"
+						}}
+					/>
+				</div>
+			</section>
+		);
+	}
 }

package/src/components/NSTimeTable.module.css

@@ -1,7 +1,7 @@
-.custom_row th:nth-child(1) {
-	box-shadow: 4px 0px 4px 0px #00000040;
-}
-
-.ns_timetable_parent {
-	max-width: 1150px;
+.custom_row th:nth-child(1) {
+	box-shadow: 4px 0px 4px 0px #00000040;
+}
+
+.ns_timetable_parent {
+	max-width: 1150px;
 }

package/src/components/NSTimeTable.tsx

@@ -1,50 +1,50 @@
-import { ConfigProvider, Table } from 'antd';
-import type { TableProps } from 'antd';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import Styles from "./NSTimeTable.module.css"
-
-interface DataType
-{
-	key: string;
-	year: string;
-	month: string;
-	week: string;
-	today: string;
-}
-
-export interface NSTimeTableProps extends IBaseComponentProps
-{
-	rows: DataType[];
-	columns: TableProps<DataType>['columns'];
-}
-
-export function NSTimeTable(props: NSTimeTableProps)
-{
-
-	return (
-		<ConfigProvider theme={{
-			components: {
-				Table: {
-					headerBg: "#141B5C",
-					headerColor: "#fff",
-					headerSplitColor: "#141B5C",
-					cellFontSize: 16,
-					colorText: "#141B5C",
-				}
-			}
-		}}>
-			<div className={`${Styles.ns_timetable_parent} ${props.classList?.join(" ")}`} style={props.style}>
-				<Table
-					columns={props.columns}
-					dataSource={props.rows}
-					bordered={false}
-					rowClassName={Styles.custom_row}
-					rowHoverable={false}
-					scroll={{
-						x: true
-					}}
-				/>
-			</div>
-		</ConfigProvider>
-	)
+import { ConfigProvider, Table } from 'antd';
+import type { TableProps } from 'antd';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import Styles from "./NSTimeTable.module.css"
+
+interface DataType
+{
+	key: string;
+	year: string;
+	month: string;
+	week: string;
+	today: string;
+}
+
+export interface NSTimeTableProps extends IBaseComponentProps
+{
+	rows: DataType[];
+	columns: TableProps<DataType>['columns'];
+}
+
+export function NSTimeTable(props: NSTimeTableProps)
+{
+
+	return (
+		<ConfigProvider theme={{
+			components: {
+				Table: {
+					headerBg: "#141B5C",
+					headerColor: "#fff",
+					headerSplitColor: "#141B5C",
+					cellFontSize: 16,
+					colorText: "#141B5C",
+				}
+			}
+		}}>
+			<div className={`${Styles.ns_timetable_parent} ${props.classList?.join(" ")}`} style={props.style}>
+				<Table
+					columns={props.columns}
+					dataSource={props.rows}
+					bordered={false}
+					rowClassName={Styles.custom_row}
+					rowHoverable={false}
+					scroll={{
+						x: true
+					}}
+				/>
+			</div>
+		</ConfigProvider>
+	)
 };

package/src/components/NSTimelineMonthly.module.css

@@ -1,72 +1,72 @@
-.ns_time_line_monthly_card {
-	width: 72px;
-	border-radius: 4px;
-	background-color: #fff;
-	overflow: hidden;
-	text-align: center;
-	display: flex;
-	flex-direction: column;
-	gap: 5px;
-	box-shadow: 1px 0px 3px 1px #b2b2b2;
-}
-
-.ns_time_line_monthly_card_week_day {
-	background-color: #141B5C;
-	color: #fff;
-	margin: 0;
-	text-align: center;
-	padding: 8px;
-	/* margin-bottom: 4px; */
-}
-
-.ns_time_line_cards_hour {
-	color: #141B5C;
-}
-
-.ns_time_line_monthly_card_parent_chart {
-	width: 100%;
-	height: 30%;
-	background-color: #E0DFFF;
-	box-shadow: 1px 1px 2px 1px #6c6a6acc;
-}
-
-.ns_time_line_monthly_card_bar {
-	height: 100%;
-	/* background-color: #3B9D00; */
-	color: transparent;
-}
-
-.ns_time_line_monthly {
-	display: flex;
-	gap: 2px;
-	flex-direction: row;
-	width: max-content;
-}
-
-.ns_parent {
-	width: 100%;
-	max-width: 1150px;
-	overflow-x: scroll;
-	flex-direction: column;
-}
-
-.ns_parent::-webkit-scrollbar {
-	height: 6px;
-}
-
-.ns_parent::-webkit-scrollbar-track {
-	background-color: #c0c0c0;
-	border-radius: 6px;
-}
-
-.ns_parent::-webkit-scrollbar-thumb {
-	background: #141B5C;
-	border-radius: 6px;
-}
-
-.ns_time_line_title {
-	color: #141B5C;
-	margin-bottom: 16px;
-	position: sticky;
-	left: 0;
+.ns_time_line_monthly_card {
+	width: 72px;
+	border-radius: 4px;
+	background-color: #fff;
+	overflow: hidden;
+	text-align: center;
+	display: flex;
+	flex-direction: column;
+	gap: 5px;
+	box-shadow: 1px 0px 3px 1px #b2b2b2;
+}
+
+.ns_time_line_monthly_card_week_day {
+	background-color: #141B5C;
+	color: #fff;
+	margin: 0;
+	text-align: center;
+	padding: 8px;
+	/* margin-bottom: 4px; */
+}
+
+.ns_time_line_cards_hour {
+	color: #141B5C;
+}
+
+.ns_time_line_monthly_card_parent_chart {
+	width: 100%;
+	height: 30%;
+	background-color: #E0DFFF;
+	box-shadow: 1px 1px 2px 1px #6c6a6acc;
+}
+
+.ns_time_line_monthly_card_bar {
+	height: 100%;
+	/* background-color: #3B9D00; */
+	color: transparent;
+}
+
+.ns_time_line_monthly {
+	display: flex;
+	gap: 2px;
+	flex-direction: row;
+	width: max-content;
+}
+
+.ns_parent {
+	width: 100%;
+	max-width: 1150px;
+	overflow-x: scroll;
+	flex-direction: column;
+}
+
+.ns_parent::-webkit-scrollbar {
+	height: 6px;
+}
+
+.ns_parent::-webkit-scrollbar-track {
+	background-color: #c0c0c0;
+	border-radius: 6px;
+}
+
+.ns_parent::-webkit-scrollbar-thumb {
+	background: #141B5C;
+	border-radius: 6px;
+}
+
+.ns_time_line_title {
+	color: #141B5C;
+	margin-bottom: 16px;
+	position: sticky;
+	left: 0;
 }

package/src/components/NSTimelineMonthly.tsx

@@ -1,43 +1,43 @@
-import Styles from './NSTimelineMonthly.module.css';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-import { Color } from "../Color"
-export interface NSdata
-{
-	title: string;
-	value: number;
-	percentage: number;
-}
-export interface INSNSTimelineMonthlyProps extends IBaseComponentProps
-{
-	data: NSdata[];
-	title?: string;
-}
-
-export function NSTimelineMonthly(props: INSNSTimelineMonthlyProps)
-{
-	function getPercentage(value: number): string
-	{
-		let percentage = (value * 100) / 24;
-		return percentage.toString() + "%";
-	}
-	return (
-		<>
-			<div className={`${Styles.ns_parent}  ${props.classList?.join(" ")} `} style={props.style}>
-				<h5 className={Styles.ns_time_line_title}>{props.title}</h5>
-				<div className={Styles.ns_time_line_monthly}>
-					{
-						props.data.map((card, index) => (
-							<div className={Styles.ns_time_line_monthly_card} key={index}>
-								<h5 className={Styles.ns_time_line_monthly_card_week_day}>{card.title}</h5>
-								<span className={Styles.ns_time_line_cards_hour}>{card.value}</span>
-								<div className={Styles.ns_time_line_monthly_card_parent_chart}>
-									<div className={Styles.ns_time_line_monthly_card_bar} style={{ width: getPercentage(card.value), background: Color.getColor(card.percentage) }}>bar</div>
-								</div>
-							</div>
-						))
-					}
-				</div>
-			</div>
-		</>
-	);
+import Styles from './NSTimelineMonthly.module.css';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { Color } from "../Color"
+export interface NSdata
+{
+	title: string;
+	value: number;
+	percentage: number;
+}
+export interface INSNSTimelineMonthlyProps extends IBaseComponentProps
+{
+	data: NSdata[];
+	title?: string;
+}
+
+export function NSTimelineMonthly(props: INSNSTimelineMonthlyProps)
+{
+	function getPercentage(value: number): string
+	{
+		let percentage = (value * 100) / 24;
+		return percentage.toString() + "%";
+	}
+	return (
+		<>
+			<div className={`${Styles.ns_parent}  ${props.classList?.join(" ")} `} style={props.style}>
+				<h5 className={Styles.ns_time_line_title}>{props.title}</h5>
+				<div className={Styles.ns_time_line_monthly}>
+					{
+						props.data.map((card, index) => (
+							<div className={Styles.ns_time_line_monthly_card} key={index}>
+								<h5 className={Styles.ns_time_line_monthly_card_week_day}>{card.title}</h5>
+								<span className={Styles.ns_time_line_cards_hour}>{card.value}</span>
+								<div className={Styles.ns_time_line_monthly_card_parent_chart}>
+									<div className={Styles.ns_time_line_monthly_card_bar} style={{ width: getPercentage(card.value), background: Color.getColor(card.percentage) }}>bar</div>
+								</div>
+							</div>
+						))
+					}
+				</div>
+			</div>
+		</>
+	);
 }

package/src/components/NSTitle.module.css

@@ -1,16 +1,16 @@
-.ns_title {
-	font-size: 24px;
-	font-weight: 700;
-	line-height: normal;
-	color: inherit;
-	margin-bottom: 16px;
-	width: 100%;
-	text-align: center;
-	font-family: inherit;
-}
-
-@media only screen and (min-width: 1024px) {
-	.ns_title {
-		font-size: 32px;
-	}
+.ns_title {
+	font-size: 24px;
+	font-weight: 700;
+	line-height: normal;
+	color: inherit;
+	margin-bottom: 16px;
+	width: 100%;
+	text-align: center;
+	font-family: inherit;
+}
+
+@media only screen and (min-width: 1024px) {
+	.ns_title {
+		font-size: 32px;
+	}
 }

package/src/components/NSTitle.tsx

@@ -1,20 +1,20 @@
-import Styles from './NSTitle.module.css';
-import { IBaseComponentProps } from "../props/IBaseComponentProps";
-
-export interface INSTitleProps extends IBaseComponentProps
-{
-	title: string;
-}
-
-export function NSTitle(props: INSTitleProps)
-{
-	return (
-		<h2
-			id={props.id}
-			className={`${Styles.ns_title} ${props.classList?.join(" ")}`}
-			style={props.style}
-		>
-			{props.title}
-		</h2>
-	);
+import Styles from './NSTitle.module.css';
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+
+export interface INSTitleProps extends IBaseComponentProps
+{
+	title: string;
+}
+
+export function NSTitle(props: INSTitleProps)
+{
+	return (
+		<h2
+			id={props.id}
+			className={`${Styles.ns_title} ${props.classList?.join(" ")}`}
+			style={props.style}
+		>
+			{props.title}
+		</h2>
+	);
 }