Prepare Release: v2.0.0

.github/workflows/deploy-docs.yml

@@ -0,0 +1,57 @@
+name: Deploy to GitHub Pages
+
+on:
+    workflow_dispatch:
+
+jobs:
+    build:
+        name: Build Docusaurus
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+              with:
+                  fetch-depth: 0
+
+            - name: Setup pnpm
+              uses: pnpm/action-setup@v4
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+
+            - name: Install dependencies
+              run: pnpm install --frozen-lockfile
+
+            - name: Set workspace
+              run: cd docs/
+
+            - name: Install docs dependencies
+              run: pnpm install --frozen-lockfile
+
+            - name: Build website
+              run: npm run build
+
+            - name: Upload Build Artifact
+              uses: actions/upload-pages-artifact@v3
+              with:
+                  path: build
+
+    deploy:
+        name: Deploy to GitHub Pages
+        needs: build
+
+        permissions:
+            pages: write # to deploy to Pages
+            id-token: write # to verify the deployment originates from an appropriate source
+
+        # Deploy to the github-pages environment
+        environment:
+            name: github-pages
+            url: ${{ steps.deployment.outputs.page_url }}
+
+        runs-on: ubuntu-latest
+        steps:
+            - name: Deploy to GitHub Pages
+              id: deployment
+              uses: actions/deploy-pages@v4

docs/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

docs/README.md

@@ -0,0 +1,45 @@
+# Website
+
+This website is built using [Docusaurus](https://docusaurus.io/), a modern
+static website generator.
+
+## Installation
+
+```bash
+yarn
+```
+
+## Local Development
+
+```bash
+yarn start
+```
+
+This command starts a local development server and opens up a browser window.
+Most changes are reflected live without having to restart the server.
+
+## Build
+
+```bash
+yarn build
+```
+
+This command generates static content into the `build` directory and can be
+served using any static contents hosting service.
+
+## Deployment
+
+Using SSH:
+
+```bash
+USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```bash
+GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to
+build the website and push to the `gh-pages` branch.

docs/docs/examples.mdx

@@ -0,0 +1,20 @@
+---
+sidebar_position: 7
+sidebar_label: 'Showcases'
+---
+
+# Showcases
+
+## Color Picker:
+
+- [Website](https://lizzelabs.github.io/css-colors/)
+- [Github](https://github.com/lizzelabs/css-colors)
+
+<iframe
+  src='https://lizzelabs.github.io/css-colors/'
+  width='100%'
+  height='500px'
+  title='Color Picker'
+  frameborder='0'
+  allowfullscreen
+></iframe>

docs/docs/getting-started/_category_.json

@@ -0,0 +1,7 @@
+{
+  "label": "Getting started",
+  "position": 1,
+  "link": {
+    "type": "generated-index"
+  }
+}

docs/docs/getting-started/animations.mdx

@@ -0,0 +1,74 @@
+---
+sidebar_position: 5
+sidebar_label: 'Working with CSS animations'
+---
+
+# 🎨 Working with animations
+
+We basically have two ways of working with css animations
+
+### <small style={{ fontSize: '0.9rem' }} ><b>Component:</b></small> `<Animations />`
+
+Example:
+
+```tsx showLineNumbers
+const Main = () => {
+  return (
+    <Animations
+      value={{
+        name: 'fadeIn',
+        animation: {
+            '@keyframes fadeIn': {
+                from: {
+                    opacity: 1,
+                }
+                to: {
+                    opacity: 0,
+                }
+            }
+        }
+      }}
+    >
+      <Piece as='div' withStyle={{ animation: 'fadeIn 2s ease-in-out' }} ></Piece>
+      <Piece as='div' withStyle={{ animation: 'fadeIn 2s ease-in-out' }} ></Piece>
+      <Piece as='div' withStyle={{ animation: 'fadeIn 2s ease-in-out' }} ></Piece>
+    </Animations>
+  );
+};
+```
+
+after that you are able to use `animation: fadeIn 0.5 ease-in-out` at any
+children of that animation.
+
+### <small style={{ fontSize: '0.9rem' }} ><b>Property:</b></small> `withStyle`
+
+As I said before, everything is a piece remember ? So you can do at your
+`withStyle` property:
+
+```tsx showLineNumbers
+
+const Main = () => {
+  return (
+    <Piece
+      as='div'
+      withStyle={{
+        background: 'blue',
+        height: '50px',
+        width: '50px',
+        borderRadius: '5px',
+        animation: 'rotate 2s linear infinite',
+        transition: 'all 0.3s linear',
+        '@keyframes rotate': {
+            from: {
+                transform: 'rotate(0deg)'
+            },
+            to: {'
+                transform: 'rotate(360deg)'
+            }
+        }
+      }}
+    >
+    </Piece>
+  );
+}
+```

docs/docs/getting-started/installation.mdx

@@ -0,0 +1,52 @@
+---
+sidebar_position: 2
+sidebar_label: 'Installation'
+---
+
+# ⚙️ Installation
+
+See these instructions to set up an environment:
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs>
+  <TabItem value="npm" label="npm">
+
+```bash
+npm install -S @lizzelabs/react-harmony
+```
+
+  </TabItem>
+  <TabItem value="yarn" label="Yarn">
+
+```bash
+yarn add @lizzelabs/react-harmony
+```
+
+  </TabItem>
+  <TabItem value="pnpm" label="pnpm">
+
+```bash
+pnpm add @lizzelabs/react-harmony
+```
+
+  </TabItem>
+  <TabItem value="bun" label="Bun">
+
+```bash
+bun add @lizzelabs/react-harmony
+```
+
+  </TabItem>
+</Tabs>
+
+After in your root file:
+
+```js
+import { PieceProvider, HARMONY_SYSTEM } from '@lizzelabs/react-harmony';
+
+export const Main = () => {
+  return <PieceProvider patterns={HARMONY_SYSTEM}></PieceProvider>;
+};
+```