Open framer-motion limit in v7

.all-contributorsrc

@@ -101,6 +101,17 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "ImBIOS",
+      "name": "Imamuzzaki Abu Salam",
+      "avatar_url": "https://avatars.githubusercontent.com/u/41441643?v=4",
+      "profile": "https://github.com/ImBIOS",
+      "contributions": [
+        "code",
+        "ideas",
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.eslintrc.cjs

@@ -0,0 +1,48 @@
+/** @type {import("eslint").Linter.Config} */
+const config = {
+  root: true,
+  env: {
+    browser: true,
+    es2020: true,
+    jest: true,
+    node: true,
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  ignorePatterns: ['**/dist/**/*'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: true,
+  },
+  plugins: ['react', '@typescript-eslint', 'react-hooks'],
+  extends: [
+    'plugin:@typescript-eslint/recommended-type-checked',
+    'plugin:@typescript-eslint/stylistic-type-checked',
+    'plugin:react/recommended',
+    'plugin:storybook/recommended',
+  ],
+  rules: {
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+    'react/prop-types': 'off',
+    'react/react-in-jsx-scope': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+
+    '@typescript-eslint/array-type': 'off',
+    '@typescript-eslint/consistent-type-definitions': 'off',
+
+    '@typescript-eslint/consistent-type-imports': [
+      'warn',
+      {
+        prefer: 'type-imports',
+        fixStyle: 'inline-type-imports',
+      },
+    ],
+    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+  },
+}
+
+module.exports = config

.github/dependabot.yml

@@ -0,0 +1,15 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+updates:
+  - package-ecosystem: 'npm' # See documentation for possible values
+    directory: '/' # Location of package manifests
+    schedule:
+      interval: 'weekly'
+  - package-ecosystem: 'github-actions' # See documentation for possible values
+    directory: '/' # Location of package manifests
+    schedule:
+      interval: 'weekly'

.github/workflows/chromatic.yml

@@ -0,0 +1,27 @@
+name: 'Chromatic'
+
+on: push
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Install Bun
+        uses: oven-sh/setup-bun@v1
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.node-version'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/ci-cd.yml

@@ -0,0 +1,40 @@
+name: Continuous Integration and Delivery
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  ci-cd:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install Bun
+        uses: oven-sh/setup-bun@v1
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          registry-url: 'https://registry.npmjs.org'
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+      - name: Run lint tests
+        run: bun run lint
+      - name: Run tests
+        run: bun run test --collect-coverage
+      - name: Build & Publish Canary
+        if: github.ref == 'refs/heads/main' && github.event_name == 'push'
+        run: |
+          bun run build
+          VERSION=$(bun scripts/determine-next-version.ts)-canary.$(bun scripts/determine-next-canary.ts)
+
+          yarn version --new-version $VERSION --no-git-tag-version
+          npm publish --tag canary --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/stable-release.yml

@@ -0,0 +1,43 @@
+name: Stable Release
+
+on:
+  workflow_dispatch:
+  schedule:
+    # This cron job runs at 00:00 on the first day of every month
+    - cron: '0 0 1 * *'
+
+jobs:
+  stable-release:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      id-token: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install Bun
+        uses: oven-sh/setup-bun@v1
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.node-version'
+          registry-url: 'https://registry.npmjs.org'
+      - run: bun install --frozen-lockfile
+      - name: Check for canary releases
+        id: canary-check
+        run: |
+          CANARY_EXISTS=$(bun scripts/check-canary.ts) # This script should output "true" or "false"
+          echo "CANARY_EXISTS=$CANARY_EXISTS" >> $GITHUB_ENV
+      - name: Test
+        run: bun test
+      - name: Build and Publish Latest
+        if: env.CANARY_EXISTS == 'true'
+        run: ./scripts/build-and-publish.sh
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - name: Create GitHub Release
+        uses: ncipollo/release-action@v1
+        if: env.CANARY_EXISTS == 'true'
+        with:
+          tag: ${{ env.VERSION }}
+          body: ${{ env.RELEASE_NOTES }}

.gitignore

@@ -116,3 +116,14 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+
+# misc
+.DS_Store
+*.pem
+.idea
+
+# Storybook
+/storybook-static
+
+# Jest
+/.jest-cache

.jest/with-theme.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react'
-import { render, RenderOptions } from '@testing-library/react'
 import { ChakraProvider } from '@chakra-ui/react'
 import { theme } from '../src/theme'
+import { render, type RenderOptions } from '@testing-library/react'
 
-const Providers = ({ children }: React.PropsWithChildren<unknown>) => <ChakraProvider theme={theme}>{children}</ChakraProvider>
+const Providers = ({ children }: React.PropsWithChildren<unknown>) => (
+  <ChakraProvider theme={theme}>{children}</ChakraProvider>
+)
 
 const renderer = (ui: React.ReactElement, options?: RenderOptions) => {
   return render(ui, { wrapper: Providers, ...options })
 }
 
 export * from '@testing-library/react'
-export { renderer as render }
+export { renderer }

.node-version

@@ -0,0 +1 @@
+lts/iron

.prettierrc

@@ -7,6 +7,5 @@
   "trailingComma": "es5",
   "quoteProps": "consistent",
   "bracketSpacing": true,
-  "jsxBracketSameLine": false,
   "arrowParens": "avoid"
 }

.storybook/main.ts

@@ -0,0 +1,37 @@
+import type { StorybookConfig } from '@storybook/react-webpack5'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+    '@chakra-ui/storybook-addon',
+  ],
+  webpackFinal: async config => {
+    config?.module?.rules?.push({
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: 'javascript/auto',
+    })
+
+    if (config.resolve?.alias) {
+      config.resolve.alias = {
+        ...config.resolve?.alias,
+        '@emotion/core': '@emotion/react',
+        'emotion-theming': '@emotion/react',
+      }
+    }
+
+    return config
+  },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: { builder: { useSWC: true } },
+  },
+  docs: {
+    autodocs: true,
+  },
+}
+export default config