Added React components for the banner and SaveUkraine elements

.github/dependabot.yml

@@ -0,0 +1,11 @@
+# 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/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/react" # Location of package manifests
+    schedule:
+      interval: "daily"

.github/workflows/static.yml

@@ -0,0 +1,62 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Build code codumentation
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+    paths:
+      - react/**
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Set Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - name: Run install
+        uses: borales/actions-yarn@v4
+        with:
+          cmd: install # will run `yarn install` command
+          dir: react
+
+      - name: Generate Documentation
+        uses: borales/actions-yarn@v4
+        with:
+          cmd: build-storybook
+          dir: react
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          # Upload entire repository
+          path: 'react/storybook-static'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

.gitignore

@@ -0,0 +1,9 @@
+
+react/node_modules/
+react/lib/
+*.log
+
+react/package-lock.json
+react/yarn.lock
+react/storybook-static/
+

README.md

@@ -1,6 +1,7 @@
 [![GitHub stars](https://img.shields.io/github/stars/vshymanskyy/StandWithUkraine.svg)](https://github.com/vshymanskyy/StandWithUkraine/stargazers)
 [![GitHub issues](https://img.shields.io/github/issues/vshymanskyy/StandWithUkraine.svg)](https://github.com/vshymanskyy/StandWithUkraine/issues)
 [![StandWithUkraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/badges/StandWithUkraine.svg)](https://github.com/vshymanskyy/StandWithUkraine/blob/main/docs/README.md)
+[![React Docs](https://github.com/JulianWww/StandWithUkraine/actions/workflows/static.yml/badge.svg)](https://github.com/JulianWww/StandWithUkraine/actions/workflows/static.yml)
 
 This repository contains **Readme Banners** (and some useful docs) that can be used by OSS projects to spread the word, support and help Ukraine in this disastrous situation. Like this **(click to open)**:
 

docs/CommunityUpdates.md

@@ -1,5 +1,12 @@
 # Ukrainian OSS community updates
 
+## Okt 4, 2023
+Update from [JulianWww](https://github.com/JulianWww):
+> I created a [React library](https://www.npmjs.com/package/stand-with-ukraine-reac)) that provides a built-in
+#StandWithUkraine banner and a banner you can place at the corner of your screen to show your support. Furthermore you can setup a ban screen for russian users. see the [documentation](https://julianwww.github.io/StandWithUkraine/?path=/docs/components-saveukrainebanscreen--docs)
+
+---
+
 ## Jul 17, 2022
 Update from [bocharsky-bw](https://github.com/bocharsky-bw):
 > I created a [Symfony bundle](https://github.com/bocharsky-bw/stand-with-ukraine-bundle) that provides a built-in

react/.babelrc.json

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

react/.htaccess

@@ -0,0 +1,5 @@
+Options -MultiViews
+RewriteEngine On
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteRule ^ index.html [QSA,L]
+

react/.npmignore

@@ -0,0 +1,2 @@
+.storybook/
+*

react/.storybook/main.js

@@ -0,0 +1,11 @@
+module.exports = {
+  "stories": ["../src/**/*.stories.tsx"],
+  "addons": ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-styling", "@storybook/addon-actions"],
+  docs: {
+    autodocs: true
+  },
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {}
+  }
+};

react/.storybook/preview.js

@@ -0,0 +1,4 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  layout: 'centered',
+}

react/README.md

@@ -0,0 +1,13 @@
+[![Stand With Ukraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner2-direct.svg)](https://vshymanskyy.github.io/StandWithUkraine/)
+
+### 📢 [Updates from Ukrainian Open Source Community](/docs/CommunityUpdates.md)
+### 🇷🇺 [Обращение к гражданам России](/docs/ToRussianPeople.md)
+
+# Instalation
+Install using yarn
+```
+yarn add stand-with-ukraine-react
+```
+
+# Docs
+https://wandhoven.ddns.net/docs/stand-with-ukraine

react/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "stand-with-ukraine-react",
+  "version": "0.1.0",
+  "description": "React components for stand with react and save ukraine",
+  "main": "lib/index.js",
+  "module": "lib/index.esm.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "rollup -c",
+    "prepublishOnly": "yarn build"
+  },
+  "np": {
+    "publish": false,
+    "tests": false
+  },
+  "files": [
+    "lib/**"
+  ],
+  "keywords": [
+    "ukraine",
+    "react",
+    "typescript"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/JulianWww/StandWithUkraine"
+  },
+  "author": "Julian Wandhoven",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "latest",
+    "@babel/preset-env": "latest",
+    "@babel/preset-react": "latest",
+    "@babel/preset-typescript": "latest",
+    "@rollup/plugin-commonjs": "latest",
+    "@rollup/plugin-node-resolve": "latest",
+    "@rollup/plugin-typescript": "latest",
+    "@storybook/addon-actions": "latest",
+    "@storybook/addon-essentials": "latest",
+    "@storybook/addon-links": "latest",
+    "@storybook/addon-styling": "latest",
+    "@storybook/react": "latest",
+    "@storybook/react-webpack5": "latest",
+    "@types/react": "latest",
+    "babel-loader": "latest",
+    "postcss": "latest",
+    "react": "latest",
+    "react-dom": "latest",
+    "rollup": "latest",
+    "rollup-plugin-dts": "latest",
+    "rollup-plugin-peer-deps-external": "latest",
+    "rollup-plugin-postcss": "latest",
+    "storybook": "latest",
+    "typescript": "latest"
+  },
+  "peerDependencies": {
+    "react": "latest",
+    "react-dom": "latest"
+  },
+  "dependencies": {
+    "@types/react-transition-group": "latest",
+    "react-transition-group": "latest"
+  }
+}

react/rollup.config.mjs

@@ -0,0 +1,44 @@
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "@rollup/plugin-typescript";
+import postcss from "rollup-plugin-postcss";
+import dts from "rollup-plugin-dts";
+
+// This is required to read package.json file when
+// using Native ES modules in Node.js
+// https://rollupjs.org/command-line-interface/#importing-package-json
+import { createRequire } from 'node:module';
+const requireFile = createRequire(import.meta.url);
+const packageJson = requireFile('./package.json');
+
+
+export default [{
+  input: "src/index.ts",
+  output: [
+    {
+      file: packageJson.main,
+      format: "cjs",
+      sourcemap: true
+    },
+    {
+      file: packageJson.module,
+      format: "esm",
+      sourcemap: true
+    }
+  ],
+  plugins: [
+    peerDepsExternal(),
+    resolve(),
+    commonjs(),
+    typescript(),
+    postcss({
+      extensions: ['.css']
+    })
+  ]
+}, {
+  input: 'lib/index.d.ts',
+  output: [{ file: 'lib/index.d.ts', format: 'es' }],
+  plugins: [dts()],
+  external: [/\.css$/]
+}];

react/src/components/SaveUkraineBanScreen/SaveUkraineBanScreen.css

@@ -0,0 +1,70 @@
+.SaveUkraineBanScreen > *{
+  left: 0;
+  top: 0;
+
+  width: 100vw;
+  height: 100vh;
+
+  position: absolute;
+  z-index: 2147483647;
+}
+
+.SaveUkraineBanScreen > .blood {
+  left: auto;
+  right: 60vw;
+  height: 100vh;
+  width: auto;
+}
+
+.SaveUkraineBanScreen > .graphics {
+  opacity: 0.3;
+}
+
+.SaveUkraineBanScreen > .cancel {
+  top: 0;
+  left: auto;
+  right: 0;
+  cursor: pointer;
+  font-size: 35px;
+  color: #FFD500;
+  background-color: transparent;
+  border: none;
+  width: fit-content;
+  height: fit-content;
+}
+
+.SaveUkraineBanScreen > .cancel:hover{
+  color: #ffffff;
+}
+
+.SaveUkraineBanScreen > .text {
+  top: auto;
+  bottom: calc(-50vh + 170px);
+  text-align: center;
+
+  font-size: 50px;
+  color: #FFD500;
+}
+
+.SaveUkraineBanScreen > .text b {
+  display: block;
+  font-size: 100px;
+  margin-top: 50px;
+}
+
+
+.slide-down-ban-screen-exit {
+  opacity: 1;
+}
+.slide-down-ban-screen-exit-active {
+  opacity: 0;
+  transition: opacity 200ms;
+}
+
+.slide-down-ban-screen-enter {
+  opacity: 0;
+}
+.slide-down-ban-screen-enter-active {
+  opacity: 1;
+  transition: opacity 200ms;
+}