@grantbii/design-system 1.0.54 → 1.0.56

package/core/assets/fonts/satoshi/README.md

@@ -0,0 +1,51 @@
+# Installing Webfonts
+
+Follow these simple Steps.
+
+## 1.
+
+Put `satoshi/` Folder into a Folder called `fonts/`.
+
+## 2.
+
+Put `satoshi.css` into your `css/` Folder.
+
+## 3. (Optional)
+
+You may adapt the `url('path')` in `satoshi.css` depends on your Website Filesystem.
+
+## 4.
+
+Import `satoshi.css` at the top of you main Stylesheet.
+
+```
+@import url('satoshi.css');
+```
+
+## 5.
+
+You are now ready to use the following Rules in your CSS to specify each Font Style:
+
+```
+font-family: Satoshi-Light;
+font-family: Satoshi-LightItalic;
+font-family: Satoshi-Regular;
+font-family: Satoshi-Italic;
+font-family: Satoshi-Medium;
+font-family: Satoshi-MediumItalic;
+font-family: Satoshi-Bold;
+font-family: Satoshi-BoldItalic;
+font-family: Satoshi-Black;
+font-family: Satoshi-BlackItalic;
+font-family: Satoshi-Variable;
+font-family: Satoshi-VariableItalic;
+
+```
+
+## 6. (Optional)
+
+Use `font-variation-settings` rule to controll axes of variable fonts:
+wght 900.0
+
+Available axes:
+'wght' (range from 300.0 to 900.0

package/core/assets/fonts/satoshi/css/satoshi.css

@@ -0,0 +1,179 @@
+/**
+* @license
+*
+* Font Family: Satoshi
+* Designed by: Deni Anggara
+* URL: https://www.fontshare.com/fonts/satoshi
+* © 2025 Indian Type Foundry
+*
+* Satoshi Light 
+* Satoshi LightItalic 
+* Satoshi Regular 
+* Satoshi Italic 
+* Satoshi Medium 
+* Satoshi MediumItalic 
+* Satoshi Bold 
+* Satoshi BoldItalic 
+* Satoshi Black 
+* Satoshi BlackItalic 
+* Satoshi Variable (Variable font)
+* Satoshi VariableItalic (Variable font)
+*
+* Satoshi -> Satoshi Variable (Variable font)
+*
+*/
+@font-face {
+  font-family: "Satoshi-Light";
+  src:
+    url("../fonts/Satoshi-Light.woff2") format("woff2"),
+    url("../fonts/Satoshi-Light.woff") format("woff"),
+    url("../fonts/Satoshi-Light.ttf") format("truetype");
+  font-weight: 300;
+  font-display: swap;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Satoshi-LightItalic";
+  src:
+    url("../fonts/Satoshi-LightItalic.woff2") format("woff2"),
+    url("../fonts/Satoshi-LightItalic.woff") format("woff"),
+    url("../fonts/Satoshi-LightItalic.ttf") format("truetype");
+  font-weight: 300;
+  font-display: swap;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Satoshi-Regular";
+  src:
+    url("../fonts/Satoshi-Regular.woff2") format("woff2"),
+    url("../fonts/Satoshi-Regular.woff") format("woff"),
+    url("../fonts/Satoshi-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-display: swap;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Satoshi-Italic";
+  src:
+    url("../fonts/Satoshi-Italic.woff2") format("woff2"),
+    url("../fonts/Satoshi-Italic.woff") format("woff"),
+    url("../fonts/Satoshi-Italic.ttf") format("truetype");
+  font-weight: 400;
+  font-display: swap;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Satoshi-Medium";
+  src:
+    url("../fonts/Satoshi-Medium.woff2") format("woff2"),
+    url("../fonts/Satoshi-Medium.woff") format("woff"),
+    url("../fonts/Satoshi-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-display: swap;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Satoshi-MediumItalic";
+  src:
+    url("../fonts/Satoshi-MediumItalic.woff2") format("woff2"),
+    url("../fonts/Satoshi-MediumItalic.woff") format("woff"),
+    url("../fonts/Satoshi-MediumItalic.ttf") format("truetype");
+  font-weight: 500;
+  font-display: swap;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Satoshi-Bold";
+  src:
+    url("../fonts/Satoshi-Bold.woff2") format("woff2"),
+    url("../fonts/Satoshi-Bold.woff") format("woff"),
+    url("../fonts/Satoshi-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-display: swap;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Satoshi-BoldItalic";
+  src:
+    url("../fonts/Satoshi-BoldItalic.woff2") format("woff2"),
+    url("../fonts/Satoshi-BoldItalic.woff") format("woff"),
+    url("../fonts/Satoshi-BoldItalic.ttf") format("truetype");
+  font-weight: 700;
+  font-display: swap;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Satoshi-Black";
+  src:
+    url("../fonts/Satoshi-Black.woff2") format("woff2"),
+    url("../fonts/Satoshi-Black.woff") format("woff"),
+    url("../fonts/Satoshi-Black.ttf") format("truetype");
+  font-weight: 900;
+  font-display: swap;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Satoshi-BlackItalic";
+  src:
+    url("../fonts/Satoshi-BlackItalic.woff2") format("woff2"),
+    url("../fonts/Satoshi-BlackItalic.woff") format("woff"),
+    url("../fonts/Satoshi-BlackItalic.ttf") format("truetype");
+  font-weight: 900;
+  font-display: swap;
+  font-style: italic;
+}
+/**
+* This is a variable font
+* You can control variable axes as shown below:
+* font-variation-settings: wght 900.0;
+*
+* available axes:
+'wght' (range from 300.0 to 900.0
+*/
+@font-face {
+  font-family: "Satoshi-Variable";
+  src:
+    url("../fonts/Satoshi-Variable.woff2") format("woff2"),
+    url("../fonts/Satoshi-Variable.woff") format("woff"),
+    url("../fonts/Satoshi-Variable.ttf") format("truetype");
+  font-weight: 300 900;
+  font-display: swap;
+  font-style: normal;
+}
+/**
+* This is a variable font
+* You can control variable axes as shown below:
+* font-variation-settings: wght 900.0;
+*
+* available axes:
+'wght' (range from 300.0 to 900.0
+*/
+@font-face {
+  font-family: "Satoshi-VariableItalic";
+  src:
+    url("../fonts/Satoshi-VariableItalic.woff2") format("woff2"),
+    url("../fonts/Satoshi-VariableItalic.woff") format("woff"),
+    url("../fonts/Satoshi-VariableItalic.ttf") format("truetype");
+  font-weight: 300 900;
+  font-display: swap;
+  font-style: italic;
+}
+
+/**
+* This is a variable font
+* You can control variable axes as shown below:
+* font-variation-settings: wght 900.0;
+*
+* available axes:
+'wght' (range from 300.0 to 900.0
+*/
+@font-face {
+  font-family: "Satoshi"; /* same as Satoshi-Variable */
+  src:
+    url("../fonts/Satoshi-Variable.woff2") format("woff2"),
+    url("../fonts/Satoshi-Variable.woff") format("woff"),
+    url("../fonts/Satoshi-Variable.ttf") format("truetype");
+  font-weight: 300 900;
+  font-display: swap;
+  font-style: normal;
+}

package/core/atoms/BrandLogo.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Image from "next/image";
-import darkLogo from "./logos/brand_logo-dark.webp";
-import lightLogo from "./logos/brand_logo-light.webp";
+import darkLogo from "../assets/logos/brand_logo-dark.webp";
+import lightLogo from "../assets/logos/brand_logo-light.webp";
 const BrandLogo = ({ width = 250, height = 80, isDarkTheme = true, alt = "Grantbii", }) => (_jsx(Image, { src: isDarkTheme ? darkLogo : lightLogo, alt: alt, width: width, height: height, priority: true }));
 export default BrandLogo;

package/core/foundations/icons.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export * from "@phosphor-icons/react";
 import Image from "next/image";
-import grantMatchIcon from "./icons/grant_match.webp";
+import grantMatchIcon from "../assets/icons/grant_match.webp";
 export const GrantMatchIcon = ({ size = 20 }) => (_jsx(Image, { src: grantMatchIcon, alt: "Grant Match", width: size, height: size }));

package/core/global/GlobalStyle.d.ts

@@ -1,3 +1,3 @@
-import "./fonts/satoshi/css/satoshi.css";
+import "../assets/fonts/satoshi/css/satoshi.css";
 declare const GlobalStyle: import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>;
 export default GlobalStyle;

package/core/global/GlobalStyle.js

@@ -1,8 +1,8 @@
 "use client";
 import { createGlobalStyle } from "styled-components";
+import "../assets/fonts/satoshi/css/satoshi.css";
 import { LAPTOP_WIDTH_PIXELS } from "../foundations/breakpoints";
 import * as Colors from "../foundations/colors";
-import "./fonts/satoshi/css/satoshi.css";
 const GlobalStyle = createGlobalStyle `
   html,
   body {

package/core/organisms/GrantMatch.d.ts

@@ -1,15 +1,18 @@
 import { GrantMatchQuery } from "@grantbii/ui-base/match/models";
-type GrantMatchQueryProps = {
+type GrantMatchProps = {
     query: GrantMatchQuery;
-    updateQueryFiles: (newFiles: File[]) => void;
+    onPerformGrantMatch: (newQuery: GrantMatchQuery) => void;
     removeQueryFile: (fileName: string) => void;
-    updateQueryText: (newText: string) => void;
     removeQueryText: () => void;
     resetQuery: () => void;
-};
-type GrantMatchProps = GrantMatchQueryProps & {
     isModalFullScreen?: boolean;
 };
-declare const GrantMatch: ({ query, updateQueryFiles, removeQueryFile, updateQueryText, removeQueryText, resetQuery, isModalFullScreen, }: GrantMatchProps) => import("react/jsx-runtime").JSX.Element;
+declare const GrantMatch: ({ query, onPerformGrantMatch, removeQueryFile, removeQueryText, resetQuery, isModalFullScreen, }: GrantMatchProps) => import("react/jsx-runtime").JSX.Element;
 export default GrantMatch;
-export declare const useGrantMatchQueryItems: () => GrantMatchQueryProps;
+export declare const useGrantMatchQueryItems: () => {
+    query: GrantMatchQuery;
+    updateQuery: (newQuery: GrantMatchQuery) => void;
+    removeQueryFile: (fileName: string) => void;
+    removeQueryText: () => void;
+    resetQuery: () => void;
+};

package/core/organisms/GrantMatch.js

@@ -5,12 +5,11 @@ import styled from "styled-components";
 import { Badge, Button, Textarea } from "../atoms";
 import { Colors, Icons } from "../foundations";
 import { FileDrop, Modal, useFileDrop, useModal } from "../molecules";
-const GrantMatch = ({ query, updateQueryFiles, removeQueryFile, updateQueryText, removeQueryText, resetQuery, isModalFullScreen, }) => {
+const GrantMatch = ({ query, onPerformGrantMatch, removeQueryFile, removeQueryText, resetQuery, isModalFullScreen, }) => {
     const { showModal, openModal, closeModal } = useModal();
     const isActive = isGrantMatchActive(query);
-    const performGrantMatch = (newFiles, newText) => {
-        updateQueryFiles(newFiles);
-        updateQueryText(newText);
+    const performGrantMatch = (newQuery) => {
+        onPerformGrantMatch(newQuery);
         closeModal();
     };
     return (_jsxs(Container, { children: [_jsx(GrantMatchButtons, { isActive: isActive, onClickMatch: () => openModal(), onClickReset: () => resetQuery() }), isActive ? (_jsx(QueryItems, { queryFiles: query.files, removeQueryFile: removeQueryFile, queryText: query.text, removeQueryText: removeQueryText })) : (_jsx(_Fragment, {})), showModal ? (_jsx(GrantMatchModal, { activeFiles: query.files, activeText: query.text, performGrantMatch: performGrantMatch, onClickCancel: () => closeModal(), isFullScreen: isModalFullScreen })) : (_jsx(_Fragment, {}))] }));
@@ -19,19 +18,17 @@ export default GrantMatch;
 const BLANK_GRANT_MATCH_QUERY = { files: [], text: "" };
 export const useGrantMatchQueryItems = () => {
     const [query, setQuery] = useState(() => (Object.assign({}, BLANK_GRANT_MATCH_QUERY)));
-    const updateQueryFiles = (files) => setQuery(({ text }) => ({ files, text }));
+    const updateQuery = (newQuery) => setQuery(Object.assign({}, newQuery));
     const removeQueryFile = (fileName) => setQuery(({ files, text }) => ({
         files: files.filter((file) => file.name !== fileName),
         text,
     }));
-    const updateQueryText = (text) => setQuery(({ files }) => ({ files, text }));
     const removeQueryText = () => setQuery(({ files }) => ({ files, text: "" }));
     const resetQuery = () => setQuery(Object.assign({}, BLANK_GRANT_MATCH_QUERY));
     return {
         query,
-        updateQueryFiles,
+        updateQuery,
         removeQueryFile,
-        updateQueryText,
         removeQueryText,
         resetQuery,
     };
@@ -93,9 +90,8 @@ const FILE_TYPE_ICON_MAP = {
 };
 const GrantMatchModal = ({ activeFiles, activeText, performGrantMatch, onClickCancel, isFullScreen, }) => {
     const { files, uploadFiles, removeFile } = useFileDrop(activeFiles);
-    const [queryText, setQueryText] = useState(activeText);
-    const updateQueryText = (newText) => setQueryText(newText);
-    return (_jsx(Modal, { header: _jsx(Header, {}), content: _jsx(Content, { files: files, uploadFiles: uploadFiles, removeFile: removeFile, queryText: queryText, updateQueryText: updateQueryText }), footer: _jsx(Button, { text: "Find My Grants", onClick: () => performGrantMatch(files, queryText), backgroundColor: Colors.accent.yellow1 }), onClickCancel: onClickCancel, isFullScreen: isFullScreen }));
+    const [text, setText] = useState(activeText);
+    return (_jsx(Modal, { header: _jsx(Header, {}), content: _jsx(Content, { files: files, uploadFiles: uploadFiles, removeFile: removeFile, queryText: text, updateQueryText: (newText) => setText(newText) }), footer: _jsx(Button, { text: "Find My Grants", onClick: () => performGrantMatch({ files, text }), backgroundColor: Colors.accent.yellow1 }), onClickCancel: onClickCancel, isFullScreen: isFullScreen }));
 };
 const Header = () => (_jsxs(BaseHeader, { children: [_jsx(Icons.GrantMatchIcon, { size: 24 }), _jsx("div", { children: "Grant Match" })] }));
 const BaseHeader = styled.div `
@@ -103,10 +99,8 @@ const BaseHeader = styled.div `
   align-items: center;
   gap: 12px;
 `;
-const Content = ({ files, uploadFiles, removeFile, queryText, updateQueryText, }) => {
-    const additionalInformationId = "grant-match-additional-information";
-    return (_jsxs(BaseContent, { children: [_jsx(FileDrop, { uploadedFiles: files, uploadFiles: uploadFiles, removeFile: removeFile }), _jsxs(QueryText, { children: [_jsx("label", { htmlFor: additionalInformationId, children: "Additional Information" }), _jsx(Textarea, { id: additionalInformationId, value: queryText, onChange: (event) => updateQueryText(event.target.value) })] })] }));
-};
+const Content = ({ files, uploadFiles, removeFile, queryText, updateQueryText, }) => (_jsxs(BaseContent, { children: [_jsx(FileDrop, { uploadedFiles: files, uploadFiles: uploadFiles, removeFile: removeFile }), _jsxs(QueryText, { children: [_jsx("label", { htmlFor: ADDITIONAL_INFORMATION_ID, children: "Additional Information" }), _jsx(Textarea, { id: ADDITIONAL_INFORMATION_ID, value: queryText, onChange: (event) => updateQueryText(event.target.value) })] })] }));
+const ADDITIONAL_INFORMATION_ID = "grant-match-additional-information";
 const BaseContent = styled.div `
   display: flex;
   flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantbii/design-system",
-  "version": "1.0.54",
+  "version": "1.0.56",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {
@@ -12,7 +12,7 @@
   "scripts": {
     "lint": "next lint",
     "prepare": "husky",
-    "build": "npx tsc && cp ./package.json ./dist && cp README.md ./dist",
+    "build": "npx tsc && cp -r ./core/assets ./dist/core && cp ./package.json ./dist && cp README.md ./dist",
     "postpublish": "rm -rf dist/",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"

package/stories/organisms/GrantMatch.stories.js

@@ -3,8 +3,12 @@ import { GrantMatch } from "@/.";
 import { useGrantMatchQueryItems } from "@/core/organisms/GrantMatch";
 import styled from "styled-components";
 const GrantMatchExample = ({ isModalFullScreen }) => {
-    const grantMatchProps = useGrantMatchQueryItems();
-    return (_jsx(Container, { children: _jsx(GrantMatch, Object.assign({}, grantMatchProps, { isModalFullScreen: isModalFullScreen })) }));
+    const { query, updateQuery, removeQueryFile, removeQueryText, resetQuery } = useGrantMatchQueryItems();
+    const onPerformGrantMatch = (newQuery) => {
+        updateQuery(newQuery);
+        console.log("finding grants...");
+    };
+    return (_jsx(Container, { children: _jsx(GrantMatch, { query: query, onPerformGrantMatch: onPerformGrantMatch, removeQueryFile: removeQueryFile, removeQueryText: removeQueryText, resetQuery: resetQuery, isModalFullScreen: isModalFullScreen }) }));
 };
 const Container = styled.div `
   width: 90vw;