feat: initial commit

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "updateInternalDependencies": "patch",
+  "ignore": ["@acme/docs"]
+}

.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["@acme/eslint-config/library.js"],
+};

.github/workflows/release.yml

@@ -0,0 +1,44 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v2
+
+      - name: Setup pnpm 7
+        uses: pnpm/action-setup@v2
+        with:
+          version: 7
+
+      - name: Setup Node.js 18.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.x
+
+      - name: Install Dependencies
+        run: pnpm i
+
+      - name: Create Release Pull Request or Publish to npm
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          # This expects you to have a script called release which does a build for your packages and calls changeset publish
+          publish: pnpm release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Send a Slack notification if a publish happens
+        if: steps.changesets.outputs.published == 'true'
+        # You can do something when a publish happens.
+        run: my-slack-bot send-notification --message "A new version of ${GITHUB_REPOSITORY} was published!"

.gitignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+.turbo
+*.log
+.next
+dist
+dist-ssr
+*.local
+.env
+.cache
+server/dist
+public/dist
+.turbo

.npmrc

@@ -0,0 +1 @@
+auto-install-peers = true

README.md

@@ -0,0 +1,73 @@
+# Turborepo Design System starter with Changesets
+
+This is an official React design system starter powered by Turborepo. Versioning and package publishing is handled by [Changesets](https://github.com/changesets/changesets) and fully automated with GitHub Actions.
+
+## Using this example
+
+Run the following command:
+
+```sh
+npx create-turbo@latest -e with-changesets
+```
+
+## What's inside?
+
+This Turborepo includes the following:
+
+### Apps and Packages
+
+- `docs`: A placeholder documentation site powered by [Next.js](https://nextjs.org/)
+- `@ajel/core`: core React components
+- `@ajel/utils`: shared React utilities
+- `@ajel/tsconfig`: shared `tsconfig.json`s used throughout the monorepo
+- `@ajel/eslint-config`: ESLint preset
+
+Each package and app is 100% [TypeScript](https://www.typescriptlang.org/).
+
+### Utilities
+
+This Turborepo has some additional tools already setup for you:
+
+- [TypeScript](https://www.typescriptlang.org/) for static type checking
+- [ESLint](https://eslint.org/) for code linting
+- [Prettier](https://prettier.io) for code formatting
+
+### Useful commands
+
+- `yarn build` - Build all packages and the docs site
+- `yarn dev` - Develop all packages and the docs site
+- `yarn lint` - Lint all packages
+- `yarn changeset` - Generate a changeset
+- `yarn clean` - Clean up all `node_modules` and `dist` folders (runs each package's clean script)
+
+### Changing the npm organization scope
+
+The npm organization scope for this design system starter is `@ajel`. To change this, it's a bit manual at the moment, but you'll need to do the following:
+
+- Rename folders in `packages/*` to replace `ajel` with your desired scope
+- Search and replace `ajel` with your desired scope
+- Re-run `yarn install`
+
+## Versioning and Publishing packages
+
+Package publishing has been configured using [Changesets](https://github.com/changesets/changesets). Please review their [documentation](https://github.com/changesets/changesets#documentation) to familiarize yourself with the workflow.
+
+This example comes with automated npm releases setup in a [GitHub Action](https://github.com/changesets/action). To get this working, you will need to create an `NPM_TOKEN` and `GITHUB_TOKEN` in your repository settings. You should also install the [Changesets bot](https://github.com/apps/changeset-bot) on your GitHub repository as well.
+
+For more information about this automation, refer to the official [changesets documentation](https://github.com/changesets/changesets/blob/main/docs/automating-changesets.md)
+
+### npm
+
+If you want to publish package to the public npm registry and make them publicly available, this is already setup.
+
+To publish packages to a private npm organization scope, **remove** the following from each of the `package.json`'s
+
+```diff
+- "publishConfig": {
+-  "access": "public"
+- },
+```
+
+### GitHub Package Registry
+
+See [Working with the npm registry](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#publishing-a-package-using-publishconfig-in-the-packagejson-file)

apps/docs/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  root: true,
+  extends: ["@acme/eslint-config/next.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+};

apps/docs/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/docs/next.config.js

@@ -0,0 +1,12 @@
+import nextra from "nextra";
+
+// module.exports = {
+//   reactStrictMode: true,
+// }
+
+const withNextra = nextra({
+  theme: 'nextra-theme-docs',
+  themeConfig: './theme.config.jsx'
+})
+
+export default withNextra()

apps/docs/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@ajel/docs",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "next build",
+    "start": "next start ",
+    "dev": "next dev -p 3002",
+    "lint": "next lint",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next"
+  },
+  "dependencies": {
+    "@ajel/core": "workspace:*",
+    "next": "^14.0.4",
+    "nextra": "^2.13.2",
+    "nextra-theme-blog": "^2.13.2",
+    "nextra-theme-docs": "^2.13.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwind-merge": "^2.2.0"
+  },
+  "devDependencies": {
+    "@ajel/eslint-config": "workspace:*",
+    "@ajel/tsconfig": "workspace:*",
+    "@types/node": "^20.10.6",
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
+    "autoprefixer": "^10.0.1",
+    "postcss": "^8",
+    "tailwindcss": "^3.3.0",
+    "typescript": "^5.3.3"
+  }
+}

apps/docs/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

apps/docs/src/components/NavLogo.tsx

@@ -0,0 +1,20 @@
+export default function NavLogo() {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: "0.25em",
+        fontSize: "32px",
+      }}
+    >
+      {/* TODO: figure out how to size Logo and use that here instead */}
+      <img
+        src="/ajel2.svg"
+        style={{ height: "calc(var(--nextra-navbar-height) - 35px)" }}
+        alt="ajel logo"
+      />
+      ajel
+    </div>
+  );
+}

apps/docs/src/pages/_meta.js

@@ -0,0 +1,5 @@
+export default {
+  "index": "Introduction",
+  "rules": "Rules",
+  "benchmarks": "Benchmarks",
+}

apps/docs/src/pages/aliasing_ajel.mdx

@@ -0,0 +1,47 @@
+# Aliasing `ajel`
+
+When picking a name for `ajel` I made sure to pick a beautiful chord to type. However, I understand that some people may not like the name `ajel` and may want to alias it to something else.
+I may recommend the name [blimpy](https://www.youtube.com/watch?v=2VOnKMJqIL0) as it is also a beautiful chord to type. If you want to alias `ajel` to a different name, you can do so by passing the `ajelAlias` option to the rules you want to use.
+
+This example `.eslintrc.js` shows how to alias `ajel` to a different name. Providing an alias to these rules will produce the proper in-editor hints and expected functionality from the linter.
+
+```javascript
+module.exports = {
+  plugins: ['ajel'],
+  extends: [
+    'plugin:ajel/recommended',
+  ],
+  rules: {
+    'ajel/ajel-const-tuples': [
+      'error',
+      {
+        ajelAlias: "blimpy",
+      },
+    ],
+    'ajel/ajel-require-error-handling': [
+      'error',
+      {
+        ajelAlias: 'blimpy',
+      },
+    ],
+    'ajel/ajel-require-tuple-declaration': [
+      'error',
+      {
+        ajelAlias: 'blimpy',
+      },
+    ],
+    'ajel/ajel-disable-try-catch': [
+      'error',
+      {
+        ajelAlias: 'blimpy',
+      },
+    ],
+  },
+};
+```
+
+Then use the rename function in the import statement.
+
+```javascript
+import { ajel as blimpy } from 'ajel';
+```