Merge pull request #1 from maykinmedia/feature/bootstrap

Feature/bootstrap

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintrc.json

@@ -0,0 +1,30 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "ignorePatterns": ["dist/**/*", "**/*.css"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": [
+    "@typescript-eslint",
+    "react"
+  ],
+  "rules": {
+    "react/react-in-jsx-scope": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.github/workflows/ci.yaml

@@ -0,0 +1,67 @@
+name: Run CI build and tests
+
+# Run this workflow every time a new commit pushed to your repository
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - '*'
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+  workflow_dispatch:
+
+concurrency:
+  group: '${{ github.workflow }}-${{ github.ref_name }}' # unique builds for branch/tag name
+  cancel-in-progress: false  # do not cancel in progress, but only in-between builds
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build source
+        run: npm run build
+
+      - name: build package
+        run: npm pack
+
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run linters
+        run: npm run lint
+
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: npm install
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+
+      - name: Build Storybook
+        run: npm run build-storybook --quiet
+
+      - name: Serve Storybook and run tests
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server storybook-static --port 6006" \
+            "npx wait-on tcp:127.0.0.1:6006 && npm run test-storybook"

.gitignore

@@ -0,0 +1,4 @@
+.idea
+dist
+node_modules
+storybook-static

.husky/_/.gitignore

@@ -0,0 +1 @@
+*

.husky/_/husky.sh

@@ -0,0 +1,36 @@
+#!/usr/bin/env sh
+if [ -z "$husky_skip_init" ]; then
+  debug () {
+    if [ "$HUSKY_DEBUG" = "1" ]; then
+      echo "husky (debug) - $1"
+    fi
+  }
+
+  readonly hook_name="$(basename -- "$0")"
+  debug "starting $hook_name..."
+
+  if [ "$HUSKY" = "0" ]; then
+    debug "HUSKY env variable is set to 0, skipping hook"
+    exit 0
+  fi
+
+  if [ -f ~/.huskyrc ]; then
+    debug "sourcing ~/.huskyrc"
+    . ~/.huskyrc
+  fi
+
+  readonly husky_skip_init=1
+  export husky_skip_init
+  sh -e "$0" "$@"
+  exitCode="$?"
+
+  if [ $exitCode != 0 ]; then
+    echo "husky - $hook_name hook exited with code $exitCode (error)"
+  fi
+
+  if [ $exitCode = 127 ]; then
+    echo "husky - command not found in PATH=$PATH"
+  fi
+
+  exit $exitCode
+fi

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "plugins": ["@trivago/prettier-plugin-sort-imports"],
+    "importOrder": ["^lib/(.*)$", "^components/(.*)$", "^[./]"],
+    "importOrderSeparation": true,
+    "importOrderSortSpecifiers": true
+}

.storybook/main.ts

@@ -0,0 +1,23 @@
+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",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
+  },
+  docs: {
+    autodocs: true,
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

bin/create_component.sh

@@ -0,0 +1,121 @@
+#!/bin/bash
+
+COMPONENTS_DIR="src/components"
+INDEX_FILE="$COMPONENTS_DIR/index.ts"
+
+component_name=$1
+component_name_lowercase=$(echo "$component_name" | tr '[:upper:]' '[:lower:]')
+capitalized_component_name=$(echo "$component_name" | awk '{print toupper(substr($0, 1, 1)) tolower(substr($0, 2))}')
+component_dir="$COMPONENTS_DIR/$component_name_lowercase"
+
+# Function to check if a directory exists
+function directory_exists() {
+  [ -d $1 ]
+}
+
+# Function to create a directory if it doesn't exist
+function create_directory() {
+  if ! directory_exists $1; then
+    mkdir -p $1
+  fi
+}
+
+# Function to create the index.ts file
+function create_index_file() {
+  echo "export * from \"./$component_name_lowercase\";" > "$2/index.ts"
+}
+
+# Function to create the CSS file
+function create_css_file() {
+  echo ".$component_name_lowercase {" > "$2/$component_name_lowercase.css"
+  echo "  /* Rules here. */" >> "$2/$component_name_lowercase.css"
+  echo "}" >> "$2/$component_name_lowercase.css"
+}
+
+# Function to create the stories.tsx file
+function create_stories_file() {
+  cat > "$2/$component_name_lowercase.stories.tsx" <<EOF
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ${capitalized_component_name} } from "./$component_name_lowercase";
+
+const meta = {
+  title: "Components/${capitalized_component_name}",
+  component: ${capitalized_component_name},
+} satisfies Meta<typeof ${capitalized_component_name}>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ${capitalized_component_name}Component: Story = {
+  args: {
+    children: "The quick brown fox jumps over the lazy dog.",
+  },
+};
+EOF
+}
+
+# Function to create the component file
+function create_component_file() {
+  cat > "$2/$component_name_lowercase.tsx" <<EOF
+import React from "react";
+
+import "./$component_name_lowercase.css";
+
+export type ${capitalized_component_name}Props = React.PropsWithChildren<{
+  // Props here.
+}>;
+
+/**
+ * ${capitalized_component_name} component
+ * @param children
+ * @param props
+ * @constructor
+ */
+export const ${capitalized_component_name}: React.FC<${capitalized_component_name}Props> = ({ children, ...props }) => (
+  <div className="$component_name_lowercase" {...props}>
+    {children}
+  </div>
+);
+EOF
+}
+
+# Function to update the index.ts file in components
+function update_index_file() {
+  echo "// Auto-generated file. Do not modify manually." > "$INDEX_FILE"
+  for component_dir in "$COMPONENTS_DIR"/*/; do
+    component_name=$(basename "$component_dir")
+    echo "export * from \"./$component_name\";" >> "$INDEX_FILE"
+  done
+}
+
+# Main script
+
+# Check if $COMPONENTS_DIR directory exists, if not create it
+create_directory $COMPONENTS_DIR
+
+# Check if a component name is provided
+if [ -z "$1" ]; then
+  echo "Error: Please provide a component name."
+  exit 1
+fi
+
+# Check if component already exists
+if directory_exists $component_dir; then
+  echo "Error: Component '$component_name_lowercase' already exists."
+  exit 1
+fi
+
+# Create component directory
+create_directory $component_dir
+
+# Create individual files
+create_index_file $component_name_lowercase $component_dir
+create_css_file $component_name_lowercase $component_dir
+create_stories_file $component_name_lowercase $component_dir
+create_component_file $component_name_lowercase $component_dir
+
+# Update components/index.ts file
+update_index_file
+
+echo "Component '$component_name' created successfully."