initial

.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,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.eslintrc.json

@@ -0,0 +1,17 @@
+{
+  "extends": "@frontside",
+  "rules": {
+    "eol-last": "off",
+    "@typescript-eslint/no-extra-semi": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/consistent-type-imports": "warn",
+    "no-multi-spaces": "off",
+    "no-trailing-spaces": "off",
+    "object-curly-spacing": "off",
+    "semi": "off",
+    "no-console": "warn",
+    "prefer-let/prefer-let": "off"
+  },
+  "ignorePatterns": ["playground"]
+}

.gitattributes

@@ -0,0 +1,3 @@
+*.js linguist-detectable=false
+*.ts linguist-detectable=true
+*.tsx linguist-detectable=true  

.github/workflows/main.yml

@@ -0,0 +1,20 @@
+name: CI
+on:
+  push:
+    branches:
+      - "**"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: "npm"
+
+      - run: npm install
+      - run: npm run lint
+      - run: npm run check
+      - run: npm run build

.github/workflows/publish.yml

@@ -0,0 +1,28 @@
+name: Publish
+on:
+  push:
+    branches:
+      - "main"
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: "npm"
+
+      - run: npm install
+      - run: npm run build
+      - name: Create Release Pull Request or Publish
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          publish: npm run release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+playground
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.storybook/main.ts

@@ -0,0 +1,15 @@
+export default {
+  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

.storybook/preview.tsx

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Moishi Netzer
+
+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.

global.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

lib/Button.module.css

@@ -0,0 +1,66 @@
+.button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+.button:hover {
+  border-color: #646cff;
+}
+.button:focus,
+.button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.primary {
+  background-color: #646cff;
+  color: #fff;
+  border-color: #646cff;
+}
+.primary:hover {
+  background-color: #4f4fff;
+  border-color: #4f4fff;
+}
+
+.secondary {
+  background-color: #f2f2f2;
+  color: #1a1a1a;
+  border-color: #f2f2f2;
+}
+.secondary:hover {
+  background-color: #e6e6e6;
+  border-color: #e6e6e6;
+}
+
+.small {
+  padding: 0.4em 0.8em;
+  font-size: 0.8em;
+}
+
+.medium {
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+}
+
+.large {
+  padding: 0.8em 1.6em;
+  font-size: 1.2em;
+}

lib/Button.tsx

@@ -0,0 +1,29 @@
+import { useState } from "react";
+import style from "./Button.module.css";
+
+type ButtonProps = {
+  type: "primary" | "secondary";
+  size: "small" | "medium" | "large";
+};
+export function Button({ type, size }: ButtonProps) {
+  let [count, setCount] = useState(0);
+
+  return (
+    <button
+      onClick={() => setCount((count) => count + 1)}
+      className={
+        style.button +
+        " " +
+        (type === "secondary" ? style.secondary : style.primary) +
+        " " +
+        (size === "small"
+          ? style.small
+          : size === "medium"
+          ? style.medium
+          : style.large)
+      }
+    >
+      Count is {count}
+    </button>
+  );
+}

lib/index.ts

@@ -0,0 +1 @@
+export * from "./Button";

lib/utils.test.ts

@@ -0,0 +1,8 @@
+import { test, expect, it } from "vitest";
+import { welcomeMessage } from "./utils";
+
+test("utils", () => {
+  it("should return a welcome message", () => {
+    expect(welcomeMessage("John")).toBe("Hello John, Welcome to PBandJ!");
+  });
+});

lib/utils.ts

@@ -0,0 +1,3 @@
+export function welcomeMessage(name: string): string {
+  return `Hello ${name}, Welcome to PBandJ!`;
+}