Deploy version 1.0.0

.deepsource.toml

@@ -0,0 +1,10 @@
+version = 1
+
+[[analyzers]]
+name = "javascript"
+
+  [analyzers.meta]
+  environment = [
+    "nodejs",
+    "browser"
+  ]

.github/workflows/chromatic.yml

@@ -0,0 +1,36 @@
+name: Deploy to Chromatic
+
+on:
+  push:
+    paths:
+      - packages/flitter/**/*
+      - packages/story/**/*
+      - .github/workflows/chromatic.yml
+    branches:
+      - dev
+
+jobs:
+  chromatic-deployment:
+    runs-on: ubuntu-latest
+    environment: CHROMATIC_PROJECT_TOKEN
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0 # 👈 Required to retrieve git history
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.x
+
+      - name: Install dependencies
+        run: |
+          npm ci
+
+      - name: Build Storybook
+        run: npm run story:build
+
+      - name: Deploy to Chromatic
+        run: cd packages/story &&  npx chromatic --project-token=${{ secrets.CHROMATIC_PROJECT_TOKEN }} --auto-accept-changes

.github/workflows/playwright.yml

@@ -0,0 +1,33 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master, dev ]
+    paths:
+      - 'packages/test/**'
+      - 'packages/flitter/**'
+  pull_request:
+    branches: [ main, master, dev ]
+    paths:
+      - 'packages/test/**'
+      - 'packages/flitter/**'
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm i
+    - name: Install Playwright Browsers
+      run: cd packages/test && npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npm run test:playwright
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: packages/test/playwright-report/
+        retention-days: 30

.gitignore

@@ -1,3 +1,13 @@
-/node_modules
-/dist
 /.env
+*storybook.log
+
+node_modules/
+dist/
+.env
+storybook-static/
+package
+.svelte-kit
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.vscode/launch.json

@@ -1,6 +1,13 @@
 {
   "version": "0.2.0",
   "configurations": [
+    {
+      "name": "Attach to Chrome",
+      "port": 9222,
+      "request": "attach",
+      "type": "chrome",
+      "webRoot": "${workspaceFolder}"
+    },
     {
       "command": "./node_modules/.bin/astro dev",
       "name": "Development server",

.vscode/settings.json

@@ -2,9 +2,23 @@
   "cSpell.words": [
     "astro",
     "astrojs",
+    "autodocs",
+    "egjs",
+    "flutterjs",
+    "lerp",
+    "linkedom",
     "meursyphus",
-    "meusyphus",
-    "tailwindcss"
+    "popmotion",
+    "postbuild",
+    "predocs",
+    "prestory",
+    "publint",
+    "renderobject",
+    "rgba",
+    "Shiki",
+    "tailwindcss",
+    "tsup",
+    "uglychart"
   ],
   "editor.formatOnSave": true
 }

README.md

@@ -0,0 +1,70 @@
+# Flitter
+
+Flitter is a framework that deals with SVG. Like React, it uses VDOM to manage state and optimize rendering. Since the library directly calculates the layout, it is much easier to visualize data than using D3. This provides a high level of control and flexibility for data visualization.
+
+FlutterJs is a library inspired by Flutter, a cross-platform framework commonly used for mobile app development.
+
+For more details, visit [here](https://flitter.pages.dev).
+
+## Getting Started
+
+Getting started with Flitter is straightforward. Follow these steps to install and use Flitter in your React or Svelte projects. (Or you can implement widget component manually to support Flitter.)
+
+### React
+```bash
+npm i @meursyphus/flitter @meursyphus/flitter-react
+```
+Example of using Flitter widgets in a React component:
+
+```javascript
+import { Container, Alignment, Text, TextStyle } from '@meursyphus/flitter';
+import Widget from '@meursyphus/flitter-react';
+
+const App = () => {
+  return (
+    <Widget
+      width="600px"
+      height="300px"
+      widget={Container({
+        alignment: Alignment.center,
+        color: 'lightblue',
+        child: Text("Hello, Flitter!", style: TextStyle({ fontSize: 30, weight: 'bold' }))
+      })}
+    />
+  );
+};
+```
+### Svelte
+
+```bash
+npm i @meursyphus/flitter @meursyphus/flitter-svelte
+```
+
+```svelte
+<script>
+  import { Container, Alignment, Text, TextStyle } from '@meursyphus/flitter';
+  import Widget from '@meursyphus/flitter-svelte';
+</script>
+
+<Widget
+  width="600px"
+  height="300px"
+  widget={Container({
+    alignment: Alignment.center,
+    color: 'lightblue',
+    child: Text("Hello, Flitter!", style: TextStyle({ fontSize: 30, weight: 'bold' }))
+  })}
+/>
+```
+
+## Features
+
+- Provides high-resolution, resolution-independent visualizations based on SVG
+- Simplifies SVG manipulation with a component-based approach
+- Allows for quick learning and development with a syntax similar to Flutter
+
+## License
+
+Flitter is open-source software freely available under the MIT license.
+
+For more information and documentation, refer to the [Flitter official documentation](https://flitter.pages.dev).