From 29fd7e9de4de64eb63b6c051f2400018961e4d07 Mon Sep 17 00:00:00 2001 From: Jastria Rahmat Date: Fri, 23 Sep 2022 01:52:58 +0700 Subject: [PATCH] feat(): add bootstrap --- .gitignore | 2 + package.json | 2 + src/App.tsx | 226 +++++++++++++++++++++++++++++++-------- src/components/table.tsx | 62 +++++++++++ src/css/_borders.scss | 5 + src/css/_breadcrumb.scss | 12 +++ src/css/_cards.scss | 1 + src/css/_colors.scss | 73 +++++++++++++ src/css/_custom.scss | 85 +++++++++++++++ src/css/_fonts.scss | 33 ++++++ src/css/index.scss | 9 ++ src/data/IData.ts | 22 ++++ src/data/dataAs568.ts | 5 +- src/index.css | 13 --- src/index.tsx | 12 +-- 15 files changed, 497 insertions(+), 65 deletions(-) create mode 100644 src/components/table.tsx create mode 100644 src/css/_borders.scss create mode 100644 src/css/_breadcrumb.scss create mode 100644 src/css/_cards.scss create mode 100644 src/css/_colors.scss create mode 100644 src/css/_custom.scss create mode 100644 src/css/_fonts.scss create mode 100644 src/css/index.scss delete mode 100644 src/index.css diff --git a/.gitignore b/.gitignore index 4d29575..c3939bc 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +.package-lock.json diff --git a/package.json b/package.json index 765dbbb..9a1f823 100644 --- a/package.json +++ b/package.json @@ -10,9 +10,11 @@ "@types/node": "^16.11.59", "@types/react": "^18.0.20", "@types/react-dom": "^18.0.6", + "bootstrap": "^5.2.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", + "sass": "^1.55.0", "typescript": "^4.8.3", "web-vitals": "^2.1.4" }, diff --git a/src/App.tsx b/src/App.tsx index 16c7a4a..bb1eaf7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,50 +1,188 @@ -import React from 'react'; -import './App.css'; -import {As568Data} from './data/values'; +import React, { useState, useEffect } from "react"; +import "./App.css"; +import { As568Data } from "./data/values"; +import { TableComponent } from "./components/table"; +import { MeasurementUnit, IDataFilter } from "./data/IData"; + function App() { - const as568 = As568Data + const as568 = As568Data; + const [filterTerm, setFilterTerm] = useState({}); + useEffect(() => { + console.log(filterTerm); + }, [filterTerm]); return ( -
-

O-Ring Size Finder

-

AS568 Standard

- - - {as568.headers.map(h=>{ - return - })} - +
+

O-Ring Size Finder

+ +
+
+
+ + +
+
+ + { + setFilterTerm({ ...filterTerm, code: event.target.value }); + }} + /> +
+
+ +
+
+ + { + setFilterTerm({ + ...filterTerm, + minId: parseFloat(event.target.value) || 0, + }); + }} + />{" "} +
+
+ + { + setFilterTerm({ + ...filterTerm, + maxId: parseFloat(event.target.value) || 0, + }); + }} + />{" "} +
+
+ +
+
+ + { + setFilterTerm({ + ...filterTerm, + minCs: parseFloat(event.target.value) || 0, + }); + }} + />{" "} +
+
+ + { + setFilterTerm({ + ...filterTerm, + maxCs: parseFloat(event.target.value) || 0, + }); + }} + />{" "} +
+
-
- {as568.getValues().map((row,i)=>{ - let rowColor = 'white' - if (i%2===0) rowColor= `lightgrey` - return - - - - - - - - - }) - } - -
{h}
- {row.code} - - {row.mmId} - - {row.mmOd} - - {row.mmCs} - - {row.inchId} - - {row.inchId} - - {row.inchOd} -
+
+
+ + { + setFilterTerm({ + ...filterTerm, + minOd: parseFloat(event.target.value) || 0, + }); + }} + />{" "} +
+
+ + { + setFilterTerm({ + ...filterTerm, + maxOd: parseFloat(event.target.value) || 0, + }); + }} + />{" "} +
+
+
+

AS568 Standard

+ {TableComponent(as568, filterTerm)} ); } diff --git a/src/components/table.tsx b/src/components/table.tsx new file mode 100644 index 0000000..901b25c --- /dev/null +++ b/src/components/table.tsx @@ -0,0 +1,62 @@ +import { IData, IDataFilter, MeasurementUnit, Standard } from "../data/IData"; + +export function TableComponent(data: IData, filter?: IDataFilter) { + return ( + + + {data.headers.map((h) => { + return ; + })} + + + + {data + .getValues() + .filter((row) => { + if (filter) { + const unitMm = filter.unit === MeasurementUnit.MM; + if (unitMm) { + if (filter.minCs && row.mmCs < filter.minCs) return false; + if (filter.maxCs && row.mmCs > filter.maxCs) return false; + if (filter.minId && row.mmId < filter.minId) return false; + if (filter.maxId && row.mmId > filter.maxId) return false; + if (filter.minOd && row.mmOd < filter.minOd) return false; + if (filter.maxOd && row.mmOd > filter.maxOd) return false; + } else { + if (filter.minCs && row.inchCs < filter.minCs) return false; + if (filter.maxCs && row.inchCs > filter.maxCs) return false; + if (filter.minId && row.inchId < filter.minId) return false; + if (filter.maxId && row.inchId > filter.maxId) return false; + if (filter.minOd && row.inchOd < filter.minOd) return false; + if (filter.maxOd && row.inchOd > filter.maxOd) return false; + } + if (filter.code && !row.code.includes(filter.code)) return false; + if ( + filter.standard && + !filter.standard.includes(row.standard as Standard) + ) + return false; + return true; + } else return true; + }) + .map((row, i) => { + let rowColor = "table-secondary"; + if (i % 2 === 0) rowColor = ``; + + const result = ( + + + + + + + + + + ); + return result; + })} + +
{h}
{row.code}{row.mmId}{row.mmOd}{row.mmCs}{row.inchId}{row.inchOd}{row.inchCs}
+ ); +} diff --git a/src/css/_borders.scss b/src/css/_borders.scss new file mode 100644 index 0000000..7dccde0 --- /dev/null +++ b/src/css/_borders.scss @@ -0,0 +1,5 @@ +// Customize border Radius +$border-radius-sm: 0.3rem; +$border-radius: 0.4rem; +$border-radius-lg: 0.8rem; +$border-radius-pill: 50rem; diff --git a/src/css/_breadcrumb.scss b/src/css/_breadcrumb.scss new file mode 100644 index 0000000..bf96667 --- /dev/null +++ b/src/css/_breadcrumb.scss @@ -0,0 +1,12 @@ +.breadcrumb-item { + + .breadcrumb-item { + &::before { + font-family: "FontAwesome"; + font-weight: 700; + content: "\f054" !important; + } + } +} + +$breadcrumb-active-color: $black; +$breadcrumb-divider-color: $gray-600; diff --git a/src/css/_cards.scss b/src/css/_cards.scss new file mode 100644 index 0000000..4877ea6 --- /dev/null +++ b/src/css/_cards.scss @@ -0,0 +1 @@ +$card-height: 100%; diff --git a/src/css/_colors.scss b/src/css/_colors.scss new file mode 100644 index 0000000..b8b4fc7 --- /dev/null +++ b/src/css/_colors.scss @@ -0,0 +1,73 @@ +$min-contrast-ratio: 3; + +$blue: #0d6efd; +$indigo: #6610f2; +$purple: #6f42c1; +$pink: #d63384; +$red: #d40a25; +$orange: #e94c22; +$yellow: #fdc42d; +$green: #53b51e; +$teal: #20c997; +$cyan: #4cc5db; + +$white: #fff; +$gray-100: #f4f3f3; +$gray-200: #e9ecef; +$gray-300: #dee2e6; +$gray-400: #ced4da; +$gray-500: #adb5bd; +$gray-600: #6c757d; +$gray-700: #495057; +$gray-800: #343a40; +$gray-900: #212529; +$black: #000; + +$primary: $orange; +$secondary: $gray-600; +$success: $green; +$info: $cyan; +$warning: $yellow; +$danger: $red; +$light: $gray-100; +$dark: $gray-900; + +$reading: $gray-600; +$accent: #30ebe2; + +$colors: ( + "blue": $blue, + "indigo": $indigo, + "purple": $purple, + "pink": $pink, + "red": $red, + "orange": $orange, + "yellow": $yellow, + "green": $green, + "teal": $teal, + "cyan": $cyan, + "white": $white, + "gray": $gray-600, + "gray-dark": $gray-800, +); + +$theme-colors: ( + primary: $primary, + secondary: $secondary, + success: $success, + info: $info, + warning: $warning, + danger: $danger, + light: $light, + dark: $dark, + // add any additional color below + reading: $reading, + accent: $accent, +); + +$custom-colors: ( + "custom-color": #900, +); + +// Merge the maps +$theme-colors: map-merge($theme-colors, $custom-colors); diff --git a/src/css/_custom.scss b/src/css/_custom.scss new file mode 100644 index 0000000..9404f27 --- /dev/null +++ b/src/css/_custom.scss @@ -0,0 +1,85 @@ +.text-shadow-sm { + text-shadow: $box-shadow-sm; +} + +.text-shadow { + text-shadow: $box-shadow; +} + +.text-shadow-lg { + text-shadow: $box-shadow-lg; +} + +//bikin div pake class ini. cocok untuk column class +.ck-center-cropped { + position: relative; + width: 100%; /* The size you want */ + &:before { + content: ""; + display: block; + padding-top: 100%; /* initial ratio of 1:1*/ + } + img { + position: absolute; /* Take your picture out of the flow */ + top: 0; + bottom: 0; + left: 0; + right: 0; /* Make the picture taking the size of it's parent */ + width: 100%; /* This if for the object-fit */ + height: 100%; /* This if for the object-fit */ + object-fit: cover; /* Equivalent of the background-size: cover; of a background-image */ + object-position: center; + } +} +.ck-half-crop { + &:before { + padding-top: 50%; /* initial ratio of 1:1*/ + } +} + +.text-truncate-2 { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; /* number of lines to show */ + -webkit-box-orient: vertical; +} +.ck-fill-img { + img { + object-fit: cover; + height: 100%; + max-height: 100%; + max-width: 100%; + } +} + +a.ck-deco-none { + color: inherit; + text-decoration: none; +} + +// .ck-fill-img { +// position: relative; +// height: 100%; +// overflow: hidden; +// img { +// position: absolute; +// left: 50%; +// top: 50%; +// height: 100%; +// width: auto; +// -webkit-transform: translate(-50%, -50%); +// -ms-transform: translate(-50%, -50%); +// transform: translate(-50%, -50%); +// } +// } + +.ck-hover-grow { + transition: all 0.2s ease; + cursor: pointer; + &:hover { + box-shadow: $box-shadow-sm; + transform: translateY(-0.2rem); + background-color: $light; + } +} diff --git a/src/css/_fonts.scss b/src/css/_fonts.scss new file mode 100644 index 0000000..5b45663 --- /dev/null +++ b/src/css/_fonts.scss @@ -0,0 +1,33 @@ +//imprort google fonts +@import url("https://fonts.googleapis.com/css2?family=Work+Sans&display=swap"); +// apply the google font +$font-custom-sans-serif: "Work Sans", sans-serif; +$font-family-sans-serif: $font-custom-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, + "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", + "Noto Color Emoji"; +$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +// stylelint-enable value-keyword-case +$font-family-base: $font-family-sans-serif; +$font-family-code: Menlo, Monaco, Consolas; + +$font-size-base: 0.9rem; +$font-size-sm: $font-size-base * 0.875; +$font-size-lg: $font-size-base * 1.25; + +$h1-font-size: $font-size-base * 2.5; +$h2-font-size: $font-size-base * 2; +$h3-font-size: $font-size-base * 1.75; +$h4-font-size: $font-size-base * 1.5; +$h5-font-size: $font-size-base * 1.25; +$h6-font-size: $font-size-base; +$h7-font-size: $font-size-base * 0.75; + +$font-sizes: ( + 1: $h1-font-size, + 2: $h2-font-size, + 3: $h3-font-size, + 4: $h4-font-size, + 5: $h5-font-size, + 6: $h6-font-size, + 7: $h7-font-size, +); diff --git a/src/css/index.scss b/src/css/index.scss new file mode 100644 index 0000000..f895231 --- /dev/null +++ b/src/css/index.scss @@ -0,0 +1,9 @@ +@import "colors.scss"; +@import "fonts.scss"; +@import "borders.scss"; +@import "cards.scss"; +@import "breadcrumb.scss"; + +@import "~bootstrap/scss/bootstrap.scss"; +// to override all, use custom.scss +@import "custom.scss"; diff --git a/src/data/IData.ts b/src/data/IData.ts index 1dbd89f..5d4b274 100644 --- a/src/data/IData.ts +++ b/src/data/IData.ts @@ -3,6 +3,7 @@ export interface IData { headers: string[]; } export interface IDataObject { + standard: string; code: string; mmCs: number; mmId: number; @@ -13,3 +14,24 @@ export interface IDataObject { } export interface IGetValues {} + +export enum Standard { + AS = "AS568", + JIS = "JIS", +} +export enum MeasurementUnit { + MM = "mm", + INCH = "inch", +} + +export interface IDataFilter { + unit?: MeasurementUnit; + minId?: number; + maxId?: number; + minOd?: number; + maxOd?: number; + minCs?: number; + maxCs?: number; + code?: string; + standard?: Standard[]; +} diff --git a/src/data/dataAs568.ts b/src/data/dataAs568.ts index fd39ca5..7d65cfb 100644 --- a/src/data/dataAs568.ts +++ b/src/data/dataAs568.ts @@ -2,12 +2,12 @@ import { IDataObject, IData } from "./IData"; const headers = [ "Code", - "CS(mm)", "ID(mm)", "OD(mm)", - "CS(inch)", + "CS(mm)", "ID(inch)", "OD(inch)", + "CS(inch)", ]; export class As568 implements IData { getValues: () => IDataObject[]; @@ -27,6 +27,7 @@ function stripHtml(html: any) { function dataMapper(d: string[]): IDataObject { return { + standard: "AS568", code: d[0], mmCs: parseFloat(d[4]), mmId: parseFloat(d[5]), diff --git a/src/index.css b/src/index.css deleted file mode 100644 index ec2585e..0000000 --- a/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/index.tsx b/src/index.tsx index 032464f..923aff6 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,11 +1,11 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./css/index.scss"; +import App from "./App"; +import reportWebVitals from "./reportWebVitals"; const root = ReactDOM.createRoot( - document.getElementById('root') as HTMLElement + document.getElementById("root") as HTMLElement ); root.render(