release/4.0.0 (#72)

petatemarvin26 · Nov 25, 2024 · 1594f64 · 1594f64
1 parent b55c878
commit 1594f64
Show file tree

Hide file tree

Showing 21 changed files with 574 additions and 120 deletions.
diff --git a/README.md b/README.md
@@ -18,14 +18,15 @@ npm install --save vin-react
 
 #### Components
 
-- [Touchable](#Touchable)
 - [Counter](#Counter)
+- [Dropdown](#Dropdown)
 - HeaderText
 - Image
 - [Indicator](#indicator)
 - Input
 - [Pagination](#Pagination)
 - Text
+- [Touchable](#Touchable)
 - [View](#View)
 
 #### Floating Components
@@ -39,32 +40,37 @@ npm install --save vin-react
 
 ## Examples
 
-##### `Touchable`
+##### `Counter`
 
 ```TSX
-import {Touchable} from 'vin-react'
+import {Counter} from 'vin-react'
 ...
 const App: React.FC = () => {
   return (
     <div>
-      <Touchable onClick={() => console.log('CLICK')}>Click Me</Touchable>
-      <Touchable title="Click Me" onClick={() => console.log('CLICK')}/>
+      <Counter
+        max={10}
+        onChange={nextNum => console.log(nextNum)}
+      />
     </div>
   )
 }
 ```
 
-##### `Counter`
+##### `Dropdown`
 
 ```TSX
-import {Counter} from 'vin-react'
+import {Dropdown} from 'vin-react'
 ...
 const App: React.FC = () => {
   return (
     <div>
-      <Counter
-        max={10}
-        onChange={nextNum => console.log(nextNum)}
+      <Dropdown
+        onChange={selected => console.log(selected)}
+        data={[
+          {label: 'One', value: 1},
+          {label: 'Two', value: 2}
+        ]}
       />
     </div>
   )
@@ -98,19 +104,34 @@ const App: React.FC = () => {
 }
 ```
 
-##### `View`
+##### `Modal`
 
-```TSX
-import {View} from 'vin-react'
-...
-const App: React.FC = () => {
-  const myview = useRef<HTMLDivElement>();
-  return (
-    <View ref={myview}>
-      <button>CLICK ME!</button>
-    </View>
+```JSX
+// index.tsx
+import {createRoot} from 'react-dom/client';
+import {Modal} from 'vin-react';
+
+const rootEl = document.getElementById('root');
+const container = createRoot(rootEl)
+
+container.render(
+  <Modal.Provider>
+    <App/>
+  </Modal.Provider>
+)
+
+// App.tsx
+const {showModal, hideModal} = useConext(Modal.Context);
+const handleShowModal = () => {
+  showModal(
+    <div>
+      <p>HI, THIS IS MODAL</p>
+    </div>
   )
 }
+const handleHideModal = () => {
+  hideModal()
+}
 ```
 
 ##### `Pagination`
@@ -134,33 +155,33 @@ const App: React.FC = () => {
 };
 ```
 
-##### `Modal`
-
-```JSX
-// index.tsx
-import {createRoot} from 'react-dom/client';
-import {Modal} from 'vin-react';
-
-const rootEl = document.getElementById('root');
-const container = createRoot(rootEl)
-
-container.render(
-  <Modal.Provider>
-    <App/>
-  </Modal.Provider>
-)
+##### `Touchable`
 
-// App.tsx
-const {showModal, hideModal} = useConext(Modal.Context);
-const handleShowModal = () => {
-  showModal(
+```TSX
+import {Touchable} from 'vin-react'
+...
+const App: React.FC = () => {
+  return (
     <div>
-      <p>HI, THIS IS MODAL</p>
+      <Touchable onClick={() => console.log('CLICK')}>Click Me</Touchable>
+      <Touchable title="Click Me" onClick={() => console.log('CLICK')}/>
     </div>
   )
 }
-const handleHideModal = () => {
-  hideModal()
+```
+
+##### `View`
+
+```TSX
+import {View} from 'vin-react'
+...
+const App: React.FC = () => {
+  const myview = useRef<HTMLDivElement>();
+  return (
+    <View ref={myview}>
+      <button>CLICK ME!</button>
+    </View>
+  )
 }
 ```
 

diff --git a/config/webpack.config.js b/config/webpack.config.js
@@ -53,7 +53,19 @@ module.exports = (env) => {
         },
         {
           test: CSS_FILE,
-          use: ['style-loader', 'css-loader']
+          use: [
+            'style-loader',
+            {
+              loader: 'css-loader',
+              options: {
+                modules: {
+                  namedExport: false,
+                  exportLocalsConvention: (n) => n,
+                  localIdentName: '[hash:10]_[local]'
+                }
+              }
+            }
+          ]
         },
         {
           test: SVG_FILE,