From c4b427a848ec9fc7002b61a01248c9b871ea3bc2 Mon Sep 17 00:00:00 2001 From: Nicolas Hovart Date: Wed, 2 Jun 2021 23:02:18 +0200 Subject: [PATCH 1/2] Create Component Button --- src/components/button.tsx | 25 ++++++++++++++++++++++++ src/components/index.tsx | 3 ++- src/index.tsx | 40 +++++++++++++++++++++++++++++++++++++-- 3 files changed, 65 insertions(+), 3 deletions(-) create mode 100644 src/components/button.tsx diff --git a/src/components/button.tsx b/src/components/button.tsx new file mode 100644 index 0000000..f4615d9 --- /dev/null +++ b/src/components/button.tsx @@ -0,0 +1,25 @@ +'use strict' + +import * as React from 'react' +import '../css/rstrtt.css' + +const Button = props => { + const { type } = props + switch (type) { + case "primary": return
Primary
+ case "success": return
Success
+ case "info": return
Info
+ case "warning": return
Warning
+ case "error": return
Error
+ case "block": return
Block Level Button
+ case "btn-ghost": return
Default Ghost
+ case "primary-ghost": return
Primary Ghost
+ case "success-ghost": return
Success Ghost
+ case "info-ghost": return
Info Ghost
+ case "warning-ghost": return
Warning Ghost
+ case "error-ghost": return
Error Ghost
+ default: return
Default
+ } +} + +export default Button diff --git a/src/components/index.tsx b/src/components/index.tsx index 7d436c6..f550771 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -1,5 +1,6 @@ import ProgressBar from './progress-bar' import List from './list' import BlockQuote from './block-quote' +import Button from './button' -export { ProgressBar, List, BlockQuote } +export { ProgressBar, List, BlockQuote, Button } diff --git a/src/index.tsx b/src/index.tsx index 31870a3..e791fac 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,7 +3,7 @@ import * as React from 'react' import { useState } from 'react' import * as ReactDOM from 'react-dom' -import { ProgressBar, List } from './components' +import { ProgressBar, List, Button } from './components' const ProgressBarSample = () => { let [percent, setPercent] = useState(0) @@ -53,10 +53,46 @@ const ProgressBarSampleError = () => { const mountNode = document.getElementById('app') ReactDOM.render( -
+




+
+

Buttons

+

+

, mountNode) From 2b8f7a4e564b22651d011ea66d46d159f62a324e Mon Sep 17 00:00:00 2001 From: Nicolas Hovart Date: Tue, 28 Dec 2021 14:32:59 +0100 Subject: [PATCH 2/2] Update button.tsx && Update packages parcel/postcss --- package.json | 9 +- src/components/button.tsx | 36 +- src/index.html | 2 +- src/index.tsx | 26 +- yarn.lock | 1917 ++++++++++++++++++++++++++----------- 5 files changed, 1378 insertions(+), 612 deletions(-) diff --git a/package.json b/package.json index 1b0f243..392e70d 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,6 @@ "name": "rstrtt", "version": "0.10.0", "description": "Dead simple CSS framework.", - "main": "dist/rstrtt.css", "scripts": { "start": "parcel src/index.html --open", "test": "react-scripts test" @@ -23,8 +22,8 @@ "dependencies": { "color-preset": "^1.0.1", "cssnano": "^5.0.2", - "parcel": "^2.0.0-beta.2", - "postcss": "^8.2.13", + "parcel": "^2.0.0-nightly.952", + "postcss": "^8.4.5", "postcss-cssnext": "^3.1.0", "postcss-import": "^14.0.1", "postcss-mixins": "^7.0.3", @@ -33,6 +32,7 @@ "react-dom": "^17.0.2" }, "devDependencies": { + "@babel/core": "^7.16.5", "@babel/preset-env": "^7.14.0", "@babel/preset-react": "^7.13.13", "@testing-library/jest-dom": "^5.11.4", @@ -49,6 +49,7 @@ "eslint-plugin-promise": "^5.1.0", "eslint-plugin-react": "^7.24.0", "react-scripts": "^4.0.3", - "standard": "^16.0.3" + "standard": "^16.0.3", + "typescript": "^4.5.4" } } diff --git a/src/components/button.tsx b/src/components/button.tsx index f4615d9..e40f3bd 100644 --- a/src/components/button.tsx +++ b/src/components/button.tsx @@ -3,23 +3,25 @@ import * as React from 'react' import '../css/rstrtt.css' -const Button = props => { - const { type } = props - switch (type) { - case "primary": return
Primary
- case "success": return
Success
- case "info": return
Info
- case "warning": return
Warning
- case "error": return
Error
- case "block": return
Block Level Button
- case "btn-ghost": return
Default Ghost
- case "primary-ghost": return
Primary Ghost
- case "success-ghost": return
Success Ghost
- case "info-ghost": return
Info Ghost
- case "warning-ghost": return
Warning Ghost
- case "error-ghost": return
Error Ghost
- default: return
Default
- } +const classNames = { + primary: 'btn btn-primary', + success: 'btn btn-success', + info: 'btn btn-info', + warning: 'btn btn-warning', + error: 'btn btn-error', + block: 'btn btn-primary btn-block', + 'btn-ghost': 'btn btn-default btn-ghost', + 'primary-ghost': 'btn btn-primary btn-ghost', + 'success-ghost': 'btn btn-success btn-ghost', + 'info-ghost': 'btn btn-info btn-ghost', + 'warning-ghost': 'btn btn-warning btn-ghost', + 'error-ghost': 'btn btn-error btn-ghost', + default: 'btn btn-defaul' +} + +const Button = (props: { type: string; value: string; onClick: any }) => { + const { type, value, onClick } = props + return
{value}
} export default Button diff --git a/src/index.html b/src/index.html index 2fd0163..dcf538c 100644 --- a/src/index.html +++ b/src/index.html @@ -8,6 +8,6 @@
- + diff --git a/src/index.tsx b/src/index.tsx index e791fac..7675d17 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -62,23 +62,23 @@ ReactDOM.render(

Buttons

-