From 519ea64af7069c46112107fc8bf98aa104b735b4 Mon Sep 17 00:00:00 2001 From: Lukas Zelenak Date: Sun, 19 Oct 2025 17:37:15 +0200 Subject: [PATCH 1/6] Add basic files --- packages/cookieWall/CHANGELOG.md | 28 +++++++++++++ packages/cookieWall/README.md | 25 ++++++++++++ packages/cookieWall/package.json | 40 +++++++++++++++++++ packages/cookieWall/rollup.config.js | 3 ++ .../src/component/dummy/CookieWall.tsx | 7 ++++ .../dummy/__tests__/Dummy.stories.ts | 15 +++++++ .../src/component/dummy/cookieWall.scss | 3 ++ packages/cookieWall/src/main.ts | 1 + packages/cookieWall/tsconfig.json | 8 ++++ 9 files changed, 130 insertions(+) create mode 100644 packages/cookieWall/CHANGELOG.md create mode 100644 packages/cookieWall/README.md create mode 100644 packages/cookieWall/package.json create mode 100644 packages/cookieWall/rollup.config.js create mode 100644 packages/cookieWall/src/component/dummy/CookieWall.tsx create mode 100644 packages/cookieWall/src/component/dummy/__tests__/Dummy.stories.ts create mode 100644 packages/cookieWall/src/component/dummy/cookieWall.scss create mode 100644 packages/cookieWall/src/main.ts create mode 100644 packages/cookieWall/tsconfig.json diff --git a/packages/cookieWall/CHANGELOG.md b/packages/cookieWall/CHANGELOG.md new file mode 100644 index 0000000..4f82f37 --- /dev/null +++ b/packages/cookieWall/CHANGELOG.md @@ -0,0 +1,28 @@ +# @musica-sacra/dummy + +## 0.0.4 + +### Patch Changes + +- 0060d92: Fix the title in the storybook story + +## 0.0.3 + +### Patch Changes + +- b21c866: Fix story title + +## 0.0.2 + +### Patch Changes + +- 7cac3b8: Add example change to dummy text. + - **What** Add example change to dummy text + - **Why** Want to release new patch version + - **How** Nothing. + +## 0.0.1 + +### Patch Changes + +- 4c24fd0: First publish of dummy diff --git a/packages/cookieWall/README.md b/packages/cookieWall/README.md new file mode 100644 index 0000000..b6b79fd --- /dev/null +++ b/packages/cookieWall/README.md @@ -0,0 +1,25 @@ +# @musica-sacra/dummy + +Just a dummy react component + +## Installation + +`npm install @musica-sacra/dummy` + +## Basic Usage + +```jsx +// Any of your component file, e.g. AppComponent.tsx + +import { Dummy } from '@musica-sacra/dummy' + +function AppComponent() { + //... + + return ( +
+ +
+ ) +} +``` \ No newline at end of file diff --git a/packages/cookieWall/package.json b/packages/cookieWall/package.json new file mode 100644 index 0000000..11f2ce0 --- /dev/null +++ b/packages/cookieWall/package.json @@ -0,0 +1,40 @@ +{ + "name": "@musica-sacra/dummy", + "version": "0.0.4", + "description": "Dummy react plugin", + "main": "dist/index.js", + "module": "dist/index.mjs", + "types": "dist/index.d.ts", + "scripts": { + "build": "rollup -c --bundleConfigAsCjs", + "test": "echo \"Error: no test specified\" && exit 1", + "lint": "eslint src --ext .ts,.tsx", + "lint:fix": "eslint src --ext .ts,.tsx --fix", + "clean": "rm -rf dist" + }, + "author": "Samuel Slávik", + "license": "ISC", + "files": [ + "dist" + ], + "keywords": [ + "musica-sacra", + "musica", + "sacra", + "dummy" + ], + "publishConfig": { + "access": "public" + }, + "dependencies": {}, + "devDependencies": { + "react": "^19.0.0", + "react-dom": "^19.0.0", + "tslib": "^2.8.1", + "typescript": "^5.8.2" + }, + "peerDependencies": { + "react": "^19.0.0", + "react-dom": "^19.0.0" + } +} \ No newline at end of file diff --git a/packages/cookieWall/rollup.config.js b/packages/cookieWall/rollup.config.js new file mode 100644 index 0000000..c5f8479 --- /dev/null +++ b/packages/cookieWall/rollup.config.js @@ -0,0 +1,3 @@ +import { createBaseConfig, createTypeConfig } from '../../rollup.config.base'; + +export default [createBaseConfig(), createTypeConfig()]; diff --git a/packages/cookieWall/src/component/dummy/CookieWall.tsx b/packages/cookieWall/src/component/dummy/CookieWall.tsx new file mode 100644 index 0000000..cfaef9d --- /dev/null +++ b/packages/cookieWall/src/component/dummy/CookieWall.tsx @@ -0,0 +1,7 @@ +export type DummyProps = { + dummyText: string; +}; + +export function Dummy({ dummyText }: DummyProps) { + return
{`Your dummy text ${dummyText}`}
; +} diff --git a/packages/cookieWall/src/component/dummy/__tests__/Dummy.stories.ts b/packages/cookieWall/src/component/dummy/__tests__/Dummy.stories.ts new file mode 100644 index 0000000..51f3aec --- /dev/null +++ b/packages/cookieWall/src/component/dummy/__tests__/Dummy.stories.ts @@ -0,0 +1,15 @@ +import { Dummy } from '@musica-sacra/dummy'; +import { StoryObj } from '@storybook/react'; + +const meta = { + title: '@musica-sacra/Dummy/components/Dummy', + component: Dummy, + args: { + dummyText: 'Dummy text', + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/packages/cookieWall/src/component/dummy/cookieWall.scss b/packages/cookieWall/src/component/dummy/cookieWall.scss new file mode 100644 index 0000000..4d83c60 --- /dev/null +++ b/packages/cookieWall/src/component/dummy/cookieWall.scss @@ -0,0 +1,3 @@ +.ms-dummy { + color: palevioletred; +} \ No newline at end of file diff --git a/packages/cookieWall/src/main.ts b/packages/cookieWall/src/main.ts new file mode 100644 index 0000000..eaa9e8a --- /dev/null +++ b/packages/cookieWall/src/main.ts @@ -0,0 +1 @@ +export { CookieWall } from './component/dummy/CookieWall'; diff --git a/packages/cookieWall/tsconfig.json b/packages/cookieWall/tsconfig.json new file mode 100644 index 0000000..3d4d00f --- /dev/null +++ b/packages/cookieWall/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "outDir": "dist", + }, + "include": ["src"] +} \ No newline at end of file From 782f1366c032433dee9c550beec653891d9781e1 Mon Sep 17 00:00:00 2001 From: Lukas Zelenak Date: Sun, 19 Oct 2025 17:42:45 +0200 Subject: [PATCH 2/6] Update package.json --- packages/cookieWall/package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/cookieWall/package.json b/packages/cookieWall/package.json index 11f2ce0..08fc03b 100644 --- a/packages/cookieWall/package.json +++ b/packages/cookieWall/package.json @@ -1,7 +1,7 @@ { - "name": "@musica-sacra/dummy", - "version": "0.0.4", - "description": "Dummy react plugin", + "name": "@musica-sacra/cookie-wall", + "version": "0.0.1", + "description": "CookieWall react plugin", "main": "dist/index.js", "module": "dist/index.mjs", "types": "dist/index.d.ts", @@ -12,7 +12,7 @@ "lint:fix": "eslint src --ext .ts,.tsx --fix", "clean": "rm -rf dist" }, - "author": "Samuel Slávik", + "author": "Lukáš Zeleňák", "license": "ISC", "files": [ "dist" @@ -21,7 +21,7 @@ "musica-sacra", "musica", "sacra", - "dummy" + "cookieWall" ], "publishConfig": { "access": "public" From 826e0ea4af5ac3deea784e4e0795b0af19f866c5 Mon Sep 17 00:00:00 2001 From: Lukas Zelenak Date: Sun, 19 Oct 2025 17:42:58 +0200 Subject: [PATCH 3/6] Update README.md --- packages/cookieWall/README.md | 21 +++------------------ 1 file changed, 3 insertions(+), 18 deletions(-) diff --git a/packages/cookieWall/README.md b/packages/cookieWall/README.md index b6b79fd..d2b7061 100644 --- a/packages/cookieWall/README.md +++ b/packages/cookieWall/README.md @@ -1,25 +1,10 @@ -# @musica-sacra/dummy +# @musica-sacra/cookie-wall -Just a dummy react component +A lightweight and customizable React component for displaying a cookie consent wall that helps you manage user privacy preferences in compliance with GDPR and similar regulations. ## Installation -`npm install @musica-sacra/dummy` +`npm install @musica-sacra/cookie-wall` ## Basic Usage -```jsx -// Any of your component file, e.g. AppComponent.tsx - -import { Dummy } from '@musica-sacra/dummy' - -function AppComponent() { - //... - - return ( -
- -
- ) -} -``` \ No newline at end of file From 255cc67c0bb05cfcc30191223edbde15774012b1 Mon Sep 17 00:00:00 2001 From: Lukas Zelenak Date: Sun, 19 Oct 2025 19:28:15 +0200 Subject: [PATCH 4/6] Add cookies from frontend --- .../src/component/dummy/CookieWall.tsx | 56 +++++++++++++-- .../src/component/dummy/cookieWall.scss | 68 ++++++++++++++++++- 2 files changed, 117 insertions(+), 7 deletions(-) diff --git a/packages/cookieWall/src/component/dummy/CookieWall.tsx b/packages/cookieWall/src/component/dummy/CookieWall.tsx index cfaef9d..e21edb6 100644 --- a/packages/cookieWall/src/component/dummy/CookieWall.tsx +++ b/packages/cookieWall/src/component/dummy/CookieWall.tsx @@ -1,7 +1,55 @@ -export type DummyProps = { - dummyText: string; +import { Button } from '@musica-sacra/forms'; +import '@musica-sacra/forms/dist/components/button/button.scss'; +import { useBem } from '@musica-sacra/hooks'; +import { useCookiesConsent } from '../../context/cookieConsentContextProvider'; + +type CookieWallProps = { + className?: string; }; -export function Dummy({ dummyText }: DummyProps) { - return
{`Your dummy text ${dummyText}`}
; +export function CookieWall({ className = '' }: CookieWallProps) { + const { acceptCookiesConsent, rejectCookiesConsent, isCookiesConsentSet} = useCookiesConsent(); + if (isCookiesConsentSet()) { + return null; + } + + const { bem, base } = useBem('ms-cookie-wall'); + + return ( +
+
+
+
+ + Lorem ipsum dolor sit amet consectetur adipisicing + elit. Officiis eveniet nam sunt culpa! Reiciendis + neque ratione assumenda blanditiis similique autem + dolores ut earum at eveniet nemo laudantium, nihil + sint a. + +
    +
  • Deliver and maintain Google services
    • +
  • + Track outages and protect against spam, fraud, + and abuse +
    • +
  • + Measure audience engagement and site statistics + to understand how our services are used and + enhance the quality of those services +
    • +
+
+
+ + +
+
+
+
+ ); } diff --git a/packages/cookieWall/src/component/dummy/cookieWall.scss b/packages/cookieWall/src/component/dummy/cookieWall.scss index 4d83c60..9b273a1 100644 --- a/packages/cookieWall/src/component/dummy/cookieWall.scss +++ b/packages/cookieWall/src/component/dummy/cookieWall.scss @@ -1,3 +1,65 @@ -.ms-dummy { - color: palevioletred; -} \ No newline at end of file +@use "../../../src/styles/variables" as *; + +.ms-cookie-wall { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + background-color: $background-primary; + border-top: $border-light; + z-index: 1000; + + &__ { + &container { + max-width: $content-width; + margin: 0 auto; + padding: 20px 0px; + + @media (max-width: $break-point-small-desktop) { + text-align: left; + padding: 20px; + } + } + + &content { + display: flex; + flex-direction: column; + gap: 15px; + } + + &text { + flex: 1; + + span { + font-size: 14px; + line-height: 1.4; + color: $secondary; + } + } + + &list { + list-style: disc; + margin: 10px 0 0 0; + padding-left: 20px; + font-size: 14px; + line-height: 1.4; + color: $secondary; + + li { + margin-bottom: 5px; + } + } + + &buttons { + display: flex; + gap: 10px; + justify-content: flex-end; + align-self: flex-end; + + @media (max-width: $break-point-tablet) { + justify-content: right; + align-self: right; + } + } + } +} From d2ba0b191af39a070f2f32c831183dae32005440 Mon Sep 17 00:00:00 2001 From: Lukas Zelenak Date: Wed, 22 Oct 2025 16:20:49 +0200 Subject: [PATCH 5/6] Update cookie consent check in CookieWall component Replaces the use of isCookiesConsentSet() with a direct check on cookieConsent being undefined to determine if the cookie wall should be displayed. --- packages/cookieWall/src/component/dummy/CookieWall.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/cookieWall/src/component/dummy/CookieWall.tsx b/packages/cookieWall/src/component/dummy/CookieWall.tsx index e21edb6..696c285 100644 --- a/packages/cookieWall/src/component/dummy/CookieWall.tsx +++ b/packages/cookieWall/src/component/dummy/CookieWall.tsx @@ -8,8 +8,8 @@ type CookieWallProps = { }; export function CookieWall({ className = '' }: CookieWallProps) { - const { acceptCookiesConsent, rejectCookiesConsent, isCookiesConsentSet} = useCookiesConsent(); - if (isCookiesConsentSet()) { + const { cookieConsent, acceptCookiesConsent, rejectCookiesConsent } = useCookiesConsent(); + if (cookieConsent !== undefined) { return null; } From 17f747e21f52268054db890c4f5f87da1a239a57 Mon Sep 17 00:00:00 2001 From: Lukas Zelenak Date: Wed, 22 Oct 2025 16:20:56 +0200 Subject: [PATCH 6/6] Add CookieConsentContextProvider for cookie consent state Introduces a React context provider to manage and persist cookie consent state using localStorage. Provides context methods to accept, reject, and check if consent has been set, and exposes a custom hook for easy access. --- .../context/cookieConsentContextProvider.tsx | 67 +++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 packages/cookieWall/src/context/cookieConsentContextProvider.tsx diff --git a/packages/cookieWall/src/context/cookieConsentContextProvider.tsx b/packages/cookieWall/src/context/cookieConsentContextProvider.tsx new file mode 100644 index 0000000..9370370 --- /dev/null +++ b/packages/cookieWall/src/context/cookieConsentContextProvider.tsx @@ -0,0 +1,67 @@ +import React, { createContext, useCallback, useContext, useEffect, useState, ReactNode } from 'react'; + +const STORAGE_KEY = 'ms_cookie_consent'; + +type CookieConsent = boolean | undefined; + +type CookieConsentContextValue = { + cookieConsent: CookieConsent; + acceptCookiesConsent: () => void; + rejectCookiesConsent: () => void; + isCookiesConsentSet: () => boolean; +}; + +const defaultContextValue: CookieConsentContextValue = { + cookieConsent: undefined, + acceptCookiesConsent: () => {}, + rejectCookiesConsent: () => {}, + isCookiesConsentSet: () => false, +}; + +export const CookieConsentContext = createContext(defaultContextValue); + +export function CookieConsentContextProvider({ children }: { children: ReactNode }) { + const [cookieConsent, setCookieConsent] = useState(defaultContextValue.cookieConsent); + + useEffect(() => { + try { + const raw = localStorage.getItem(STORAGE_KEY); + if (raw === 'true') setCookieConsent(true); + else if (raw === 'false') setCookieConsent(false); + else setCookieConsent(undefined); + } catch { + setCookieConsent(undefined); + } + }, []); + + const acceptCookiesConsent = useCallback(() => { + try { + localStorage.setItem(STORAGE_KEY, 'true'); + } catch { + } + setCookieConsent(true); + }, []); + + const rejectCookiesConsent = useCallback(() => { + try { + localStorage.setItem(STORAGE_KEY, 'false'); + localStorage.removeItem(STORAGE_KEY); + } catch { + } + setCookieConsent(false); + }, []); + + const isCookiesConsentSet = useCallback(() => cookieConsent !== undefined, [cookieConsent]); + + return ( + + {children} + + ); +} + +export function useCookiesConsent() { + return useContext(CookieConsentContext); +} \ No newline at end of file