From 2f5462795cc43027ced4b09c5266f6e8eed789b0 Mon Sep 17 00:00:00 2001
From: Ravi Verma <31059087+Ravi-Chef@users.noreply.github.com>
Date: Thu, 14 Dec 2023 18:35:47 +0530
Subject: [PATCH 1/4] Update README.md
---
README.md | 33 ---------------------------------
1 file changed, 33 deletions(-)
diff --git a/README.md b/README.md
index ad4d34f..283ec81 100644
--- a/README.md
+++ b/README.md
@@ -1,36 +1,3 @@
-
-
- 
-
-
-A React UI library using styled-component to build consistent, responsive, theme able UI 💪
-
-
-
- 
-
-
- 
-
-
- 
-
-
-
- 
-
-
- 
-
-
- 
-
-
- 
-
-
-
-
FE-Theme is a styled-component based comprehensive library of accessible, reusable, and composable React components that streamlines the development of modern web applications and websites. The library offers a theme based UI to quickly start a new small/medium/large size web based applications.
## Table of contents
From 1d019a0b1bbed8864fe805bea345ffc8f6265a6b Mon Sep 17 00:00:00 2001
From: Ravi Verma <31059087+Ravi-Chef@users.noreply.github.com>
Date: Thu, 14 Dec 2023 18:36:54 +0530
Subject: [PATCH 2/4] Update README.md
---
README.md | 33 +++++++++++++++++++++++++++++++++
1 file changed, 33 insertions(+)
diff --git a/README.md b/README.md
index 283ec81..ad4d34f 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,36 @@
+
+
+
+
+
+A React UI library using styled-component to build consistent, responsive, theme able UI 💪
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
FE-Theme is a styled-component based comprehensive library of accessible, reusable, and composable React components that streamlines the development of modern web applications and websites. The library offers a theme based UI to quickly start a new small/medium/large size web based applications.
## Table of contents
From 60c7329e1bd2e4aa0f5f769e7ae9cd6b7419d725 Mon Sep 17 00:00:00 2001
From: Ravi Verma
Date: Wed, 20 Dec 2023 19:18:28 +0530
Subject: [PATCH 3/4] basic chip component
---
__application/component/Chip/Chip.js | 28 +++++++++++++
__application/component/Chip/Chip.stories.js | 43 ++++++++++++++++++++
__application/component/theme/theme.js | 16 ++++++++
3 files changed, 87 insertions(+)
create mode 100644 __application/component/Chip/Chip.js
create mode 100644 __application/component/Chip/Chip.stories.js
diff --git a/__application/component/Chip/Chip.js b/__application/component/Chip/Chip.js
new file mode 100644
index 0000000..6b36d36
--- /dev/null
+++ b/__application/component/Chip/Chip.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+const StyledChip = styled.div`
+ padding: ${({ styleProps, theme: { component: { Chip: { padding } } } }) => styleProps?.padding ? styleProps?.padding : padding};
+ background-color: ${({ styleProps, theme: { component: { Chip: { primary: { backgroundColor } } } } }) => styleProps?.backgroundColor ? styleProps?.backgroundColor : backgroundColor};
+ color: ${({ styleProps, theme: { component: { Chip: { primary: { color } } } } }) => styleProps?.color ? styleProps?.color : color};
+ border-radius: ${({ styleProps, theme: { component: { Chip: { borderRadius } } } }) => styleProps?.borderRadius ? styleProps?.borderRadius : borderRadius};
+ border: ${({ styleProps, theme: { component: { Chip: { primary: { border } } } } }) => styleProps?.border ? styleProps?.border : border};
+`;
+
+function Chip({ children, styleProps }) {
+ return (
+ {children}
+ );
+}
+
+Chip.propTypes = {
+ children: PropTypes.node.isRequired,
+ styleProps: PropTypes.object,
+};
+
+Chip.defaultProps = {
+ styleProps: {},
+};
+
+export default Chip;
diff --git a/__application/component/Chip/Chip.stories.js b/__application/component/Chip/Chip.stories.js
new file mode 100644
index 0000000..308532b
--- /dev/null
+++ b/__application/component/Chip/Chip.stories.js
@@ -0,0 +1,43 @@
+import Chip from './Chip';
+
+export default {
+ title: 'Fe-Theme/Chip',
+ component: Chip,
+ parameters: {
+ layout: 'centered',
+ },
+ tags: ['autodocs'],
+ args: {
+ children: 'This is a chip component',
+ },
+};
+
+export const PrimaryChip = {
+ args: {
+ children: 'This is a primary chip component',
+ },
+};
+
+export const SecondaryChip = {
+ args: {
+ children: 'This is a secondary chip component',
+ styleProps: {
+ border: '1px solid #03567b',
+ borderRadius: '2rem',
+ color: '#03567b',
+ backgroundColor: 'rgba(3, 86, 123, 0.3)',
+ },
+ },
+};
+
+export const CustomChip = {
+ args: {
+ children: 'This is a custom chip component',
+ styleProps: {
+ border: '1px solid rgb(49, 129, 46)',
+ borderRadius: '2rem',
+ color: 'rgb(49, 129, 46)',
+ backgroundColor: 'rgb(239, 252, 245)',
+ },
+ },
+};
diff --git a/__application/component/theme/theme.js b/__application/component/theme/theme.js
index c8d9ca4..f8a2f2a 100644
--- a/__application/component/theme/theme.js
+++ b/__application/component/theme/theme.js
@@ -64,4 +64,20 @@ theme.component.TextBox = {
},
};
+theme.component.Chip = {
+ borderRadius: '1rem',
+ padding: '1rem',
+ fontSize: 'm',
+ primary: {
+ backgroundColor: 'rgba(0, 54, 78, 0.2)',
+ color: '#00364E',
+ border: '1px solid #00364E',
+ },
+ secondary: {
+ backgroundColor: 'rgba(3, 86, 123, 0.3)',
+ color: '#03567b',
+ border: '1px solid #03567b',
+ },
+};
+
export default theme;
From 8dc4b9aafa602f4398051ee67a24c7a9b23701df Mon Sep 17 00:00:00 2001
From: Ravi Verma
Date: Wed, 20 Dec 2023 19:19:30 +0530
Subject: [PATCH 4/4] removed unnecessary code
---
__application/component/theme/theme.js | 1 -
1 file changed, 1 deletion(-)
diff --git a/__application/component/theme/theme.js b/__application/component/theme/theme.js
index f8a2f2a..9bf71b8 100644
--- a/__application/component/theme/theme.js
+++ b/__application/component/theme/theme.js
@@ -67,7 +67,6 @@ theme.component.TextBox = {
theme.component.Chip = {
borderRadius: '1rem',
padding: '1rem',
- fontSize: 'm',
primary: {
backgroundColor: 'rgba(0, 54, 78, 0.2)',
color: '#00364E',