Initial alpha release

Author: hari

.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_STORYBOOK_URL=http://localhost:6006

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:storybook/recommended"
+  ]
+}

.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+.contentlayer
+
+*storybook.log
+content/docs/contributing.mdx
+public/preview
+

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "plugins": [
+    "prettier-plugin-tailwindcss"
+  ],
+  "tailwindConfig": "./tailwind.config.ts",
+  "tailwindFunctions": [
+    "clsx",
+    "cn"
+  ]
+}

.storybook/main.ts

@@ -0,0 +1,23 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+const config: StorybookConfig = {
+  stories: [
+    "../animata/**/*.mdx",
+    "../animata/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+    "@storybook/addon-styling-webpack",
+    "@storybook/addon-themes",
+  ],
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+  staticDirs: [],
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,117 @@
+import { themes } from "@storybook/theming";
+
+import { Canvas, Controls, Stories, Title } from "@storybook/blocks";
+import { Preview } from "@storybook/react";
+import React, { useEffect } from "react";
+
+import { MDXProvider } from "@mdx-js/react";
+import { DocsContainer } from "@storybook/blocks";
+import { baseComponents } from "../components/mdx-base-components";
+
+import { ReloadButton } from "../components/reload-button";
+import { useMutationObserver } from "../hooks/use-mutation-observer";
+import "../styles/globals.css";
+
+import { withThemeByClassName } from "@storybook/addon-themes";
+import { addons } from "@storybook/manager-api";
+
+addons.setConfig({
+  theme: themes.dark,
+});
+
+const MdxContainer = (props) => {
+  return (
+    <MDXProvider components={baseComponents}>
+      <DocsContainer {...props} />
+    </MDXProvider>
+  );
+};
+
+const isEmbedded = window.location.href.includes("site:docs");
+
+const Wrapper = ({ children }) => {
+  const nodeRef = React.useRef(isEmbedded ? document.body : null);
+  const callbackRef = React.useRef(() => {
+    const height = document.querySelector(".embedded")?.clientHeight ?? 0;
+    const padding = 32;
+    window.parent.postMessage(
+      {
+        type: "animata-set-height",
+        height: height + padding,
+      },
+      "*",
+    );
+  });
+
+  useMutationObserver(nodeRef, callbackRef.current);
+
+  useEffect(() => {
+    if (!isEmbedded) {
+      return;
+    }
+    callbackRef.current();
+  }, []);
+
+  return (
+    <div
+      className={isEmbedded ? "embedded" : ""}
+      style={{ padding: isEmbedded ? 0 : "4rem 20px" }}
+    >
+      {children}
+    </div>
+  );
+};
+
+const CustomCanvas = () => {
+  const [key, setKey] = React.useState(0);
+  return (
+    <div className="relative">
+      <Canvas key={`render-${key}`} />
+      <ReloadButton
+        key={`button-${key}`}
+        className="absolute right-4 top-4"
+        onClick={() => setKey((k) => k + 1)}
+      />
+    </div>
+  );
+};
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    darkMode: {
+      dark: { ...themes.dark, appBg: "black" },
+      light: { ...themes.normal, appBg: "red" },
+    },
+    docs: {
+      container: MdxContainer,
+      page: () => {
+        return (
+          <Wrapper>
+            {!isEmbedded && <Title />}
+            <CustomCanvas />
+            <Controls />
+            <Stories includePrimary={false} title="Other examples" />
+          </Wrapper>
+        );
+      },
+    },
+  },
+
+  decorators: [
+    withThemeByClassName({
+      themes: {
+        light: "",
+        dark: "dark",
+      },
+      defaultTheme: "light",
+    }),
+  ],
+};
+
+export default preview;

.yarn/releases/yarn-4.2.2.cjs

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.2.2.cjs

.yarnrc.yml

@@ -0,0 +1,89 @@
+Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+## Getting Started
+
+To get a local copy up and running, please follow these simple steps.
+
+### Prerequisites
+
+Here is what you need to be able to run animata.
+
+- Node.js (Version: >=18.x)
+- Yarn _(recommended)_
+
+## Development
+
+### Setup
+
+1. Clone the repo into a public GitHub repository (or fork https://github.com/codse/animata/fork).
+
+   ```sh
+   git clone https://github.com/codse/animata.git
+   ```
+
+2. Go to the project folder
+
+   ```sh
+   cd animata
+   ```
+
+3. Install packages with yarn
+
+   ```sh
+   yarn
+   ```
+
+4. Set up your `.env` file
+
+   - Duplicate `.env.example` to `.env`
+
+5. Setup Node
+
+   If your Node version does not meet the project's requirements as instructed by the docs, "nvm" (Node Version Manager) allows using Node at the version required by the project:
+
+   ```sh
+   nvm use
+   ```
+
+   You first might need to install the specific version and then use it:
+
+   ```sh
+   nvm install && nvm use
+   ```
+
+   You can install nvm from [here](https://github.com/nvm-sh/nvm).
+
+6. Start storybook
+
+   ```sh
+   yarn storybook
+   ```
+
+7. Start development server
+
+   ```sh
+   yarn dev
+   ```
+
+8. Open [http://localhost:3000](http://localhost:3000) in the browser to see the result.
+
+## Contributing animations
+
+1. Run `yarn animata:new` to create a new component. It will ask couple of questions and generate required files for you.
+2. Create a new branch.
+3. Commit your changes.
+4. Push to the branch.
+5. Open a pull request.
+
+If you have any questions, feel free to reach out to us.
+
+## Folder structure
+
+- `components/`: Contains all the components.
+- `animata/`: Contains all the animations.
+- `content/`: Contains the documentation pages.
+- `public/`: Contains the static files.
+- `app/`: Contains the main Next.js app.
+- `templates/`: Contains the templates for the new components.
+
+You will mostly be working in the `animata` and `content/docs` folders while creating new animations and documentation pages.

CONTRIBUTING.md

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) Animata
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.