@0xsquid/ui 1.0.0 → 2.0.0

package/README.md

@@ -2,7 +2,36 @@
 
 React components library for Squid V2
 
-## Getting Started
+## Package installation and usage
+
+Install the package:
+
+```bash
+yarn add @0xsquid/ui
+```
+
+Import styles in your entry point:
+
+```jsx
+// src/main.tsx | src/pages/_app.tsx | etc...
+import "@0xsquid/ui/dist/index.css";
+```
+
+Wrap your app with our theme provider `<ThemeProvider />` and specify your theme:
+
+```jsx
+import { ThemeProvider, Button } from "@0xsquid/ui";
+
+function App() {
+  return (
+    <ThemeProvider theme={yourTheme}>
+      <Button label="Hello world" variant="primary" size="md" />
+    </ThemeProvider>
+  );
+}
+```
+
+## Development
 
 ### Install dependencies
 
@@ -15,3 +44,71 @@ yarn install
 ```bash
 yarn storybook
 ```
+
+### Build package
+
+To build the package using Rollup, run:
+
+```bash
+yarn build
+```
+
+This command will:
+
+1. compile Tailwind CSS classes into `src/styles/compiled-tailwind.css`
+2. bundle source code, along with its type declarations, into the `dist/` folder
+3. copy `src/styles/compiled-tailwind.css` to `dist/index.css`
+
+### Lint and format
+
+To format and lint the code, run:
+
+```bash
+yarn format:fix
+```
+
+```bash
+yarn lint:fix
+```
+
+### Folder structure
+
+```
+- src
+  - index.ts <- barrel file
+  - components
+    - index.ts <- barrel file
+    - buttons
+      - index.ts <- barrel file
+      - Button.tsx
+    - lists
+      - index.ts <- barrel file
+      - HistoryItem.tsx
+  - stories
+    - buttons
+      - Button.stories.tsx
+    - lists
+      - HistoryItem.stories.tsx
+```
+
+When creating a new component, don't forget to update the barrel file, exporting your component in the `index.ts` file in the corresponding component folder. You can also install the [AutoBarrel VSCode extension](https://marketplace.visualstudio.com/items?itemName=imgildev.vscode-auto-barrel).
+
+### Images
+
+In case you need to add images somewhere that need to be included in the final bundle, convert them to base64 instead.
+
+Example:
+
+```diff
+.my-image {
+-  background-image: url('my-image.png');
++  background-image: url('data:image/png;base64,iVBORw0....');
+}
+```
+
+Or in a React component:
+
+```diff
+-  <img src="my-image.png" />
++  <img src="data:image/png;base64,iVBORw0..." />
+```