npm - @grantbii/design-system - Versions diffs - 1.0.0 - Mend

@grantbii/design-system 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (66) hide show

package/.github/workflows/continuous-delivery.yaml ADDED Viewed

@@ -0,0 +1,31 @@
+name: Continuous Delivery for Design System
+on:
+  push:
+    branches: ["prod"]
+permissions:
+  contents: read
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Git Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node 22
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          registry-url: "https://registry.npmjs.org"
+          cache: "npm"
+      - name: Install dependencies
+        run: npm clean-install
+      - name: Publish package to NPM
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/continuous-integration.yaml ADDED Viewed

@@ -0,0 +1,34 @@
+name: Continuous Integration for Design System
+on:
+  push:
+    branches-ignore: ["prod"]
+permissions:
+  contents: read
+jobs:
+  checks:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Git Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node 22
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: "npm"
+      - name: Install dependencies
+        run: npm clean-install
+      - name: Lint with eslint
+        run: npx eslint app/
+      - name: Format with prettier
+        run: npx prettier --check app/
+      - name: Ensure build passes
+        run: npm run build

package/.husky/pre-commit ADDED Viewed

	@@ -0,0 +1 @@
1	+ npx lint-staged

package/README.md ADDED Viewed

@@ -0,0 +1,49 @@
+# Grantbii's Design System
+Based on Grantbii's Global Design Library in Figma.
+## Prerequisites
+Node 22
+```bash
+node -v  # expected output: v22.14.xx
+```
+## Set-up
+Install dependencies
+```bash
+npm i
+```
+## Run
+First, run the development server:
+```bash
+npm run dev
+```
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+The pages auto-updates as you edit the files.
+## Develop
+Use the `webp` format for images as it is lossless but more efficient than `png`.
+Get started by installing [`cwebp`](https://developers.google.com/speed/webp/docs/cwebp).
+Convert an image from `png` to `webp` like so:
+```bash
+cwebp -exact -lossless -progress your_image.png -o your_image.webp
+```
+## Deploy
+Deployment is automatic with [AWS Amplify](https://aws.amazon.com/amplify).
+Once a commit has been made on the `prod` branch, a build would be triggered.

package/app/favicon.ico ADDED Viewed

Binary file

package/app/layout.tsx ADDED Viewed

@@ -0,0 +1,21 @@
+import { GlobalStyle, StyledComponentsRegistry } from "@/core";
+import type { Metadata } from "next";
+import { PropsWithChildren } from "react";
+export const metadata: Metadata = {
+  title: "Grantbii's Design System",
+  description: "Grantbii's Design System",
+};
+const RootLayout = ({ children }: PropsWithChildren) => (
+  <html lang="en">
+    <body>
+      <StyledComponentsRegistry>
+        <GlobalStyle />
+        {children}
+      </StyledComponentsRegistry>
+    </body>
+  </html>
+);
+export default RootLayout;

package/app/page.tsx ADDED Viewed

@@ -0,0 +1,3 @@
+const HomePage = () => <main>Hello world</main>;
+export default HomePage;

package/core/global/GlobalStyle.tsx ADDED Viewed

@@ -0,0 +1,68 @@
+"use client";
+import { BLACK_WHITE_COLOR, TYPOGRAPHY_COLOR } from "@/core/tokens/colors";
+import "@/public/fonts/satoshi/css/satoshi.css";
+import { createGlobalStyle } from "styled-components";
+const GlobalStyle = createGlobalStyle`
+  html,
+  body {
+    max-width: 100vw;
+  }
+  body {
+    color: ${TYPOGRAPHY_COLOR.blackHigh};
+    background: ${BLACK_WHITE_COLOR.white};
+    font-family: Satoshi;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  button,
+  fieldset,
+  textarea {
+    all: unset;
+  }
+  * {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+  }
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+  button:hover {
+    cursor: pointer;
+  }
+  button:disabled {
+    cursor: not-allowed;
+  }
+  li {
+    list-style-position: inside;
+  }
+  li * {
+    vertical-align: middle;
+  }
+  /* number textfield in Chrome, Safari, Edge, Opera */
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  /* number textfield in Firefox */
+  input[type="number"] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+`;
+export default GlobalStyle;

package/core/index.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export { default as StyledComponentsRegistry } from "@/core/integrations/StyledComponentsRegistry";
+export { default as GlobalStyle } from "@/core/global/GlobalStyle";
+export * from "@/core/tokens/colors";

package/core/integrations/StyledComponentsRegistry.tsx ADDED Viewed

@@ -0,0 +1,27 @@
+"use client";
+import { useServerInsertedHTML } from "next/navigation";
+import { PropsWithChildren, useState } from "react";
+import { ServerStyleSheet, StyleSheetManager } from "styled-components";
+const StyledComponentsRegistry = ({ children }: PropsWithChildren) => {
+  // Only create stylesheet once with lazy initial state
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement();
+    styledComponentsStyleSheet.instance.clearTag();
+    return <>{styles}</>;
+  });
+  return typeof window !== "undefined" ? (
+    <>{children}</>
+  ) : (
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+      {children}
+    </StyleSheetManager>
+  );
+};
+export default StyledComponentsRegistry;

package/core/tokens/colors.ts ADDED Viewed

@@ -0,0 +1,46 @@
+export const MAIN_COLOR = {
+  primary: "#16538a",
+  secondary: "#f3924d",
+};
+export const BLACK_WHITE_COLOR = {
+  black: "#232022",
+  white: "#ffffff",
+};
+export const NEUTRAL_COLOR = {
+  grey1: "#999999",
+  grey2: "#cccccc",
+  grey3: "#eeeeee",
+  grey4: "#fafafa",
+};
+export const ACCENT_COLOR = {
+  // usually includes dangerous, wrong or rejected information
+  red1: "#c02318",
+  red2: "#f88e86",
+  red3: "#fcc7c3",
+  // usually indicates warning, progressing, etc
+  yellow1: "#edab03",
+  yellow2: "#f4cc68",
+  yellow3: "#fae6b3",
+  // usually indicates success, correct, passed, etc
+  green1: "#08a45e",
+  green2: "#6bc89e",
+  green3: "#b5e4cf",
+  // usually indicates info, no emotion
+  blue1: "#1878e4",
+  blue2: "#74aeef",
+  blue3: "#bad6f7",
+};
+export const OVERLAY_COLOR = "#13131366";
+export const TYPOGRAPHY_COLOR = {
+  blackHigh: "#000000e5",
+  blackMedium: "#00000099",
+  blackLow: "#0000004d",
+  whiteHigh: "#ffffff",
+  whiteMedium: "#ffffff99",
+  whiteLow: "#0000001a",
+};

package/eslint.config.mjs ADDED Viewed

@@ -0,0 +1,24 @@
+import { FlatCompat } from "@eslint/eslintrc";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  {
+    rules: {
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        { argsIgnorePattern: "^_" },
+      ],
+    },
+  },
+];
+export default eslintConfig;

package/next.config.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import type { NextConfig } from "next";
+const nextConfig: NextConfig = {
+  compiler: {
+    styledComponents: true,
+  },
+  devIndicators: false,
+};
+export default nextConfig;

package/package.json ADDED Viewed

@@ -0,0 +1,38 @@
+{
+  "name": "@grantbii/design-system",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "next": "15.3.5",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "styled-components": "^6.1.19"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.3.5",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.1.2",
+    "prettier": "^3.6.2",
+    "typescript": "^5.8.3"
+  },
+  "lint-staged": {
+    "**/*.{html,css,json,md,yaml}": [
+      "prettier --write"
+    ],
+    "**/*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  }
+}

package/public/fonts/satoshi/README.md ADDED Viewed

@@ -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/public/fonts/satoshi/css/satoshi.css ADDED Viewed

@@ -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/public/fonts/satoshi/fonts/Satoshi-Black.eot ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Black.ttf ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Black.woff ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Black.woff2 ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-BlackItalic.eot ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-BlackItalic.ttf ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-BlackItalic.woff ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-BlackItalic.woff2 ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Bold.eot ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Bold.ttf ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Bold.woff ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Bold.woff2 ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-BoldItalic.eot ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-BoldItalic.ttf ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-BoldItalic.woff ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-BoldItalic.woff2 ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Italic.eot ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Italic.ttf ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Italic.woff ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Italic.woff2 ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Light.eot ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Light.ttf ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Light.woff ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Light.woff2 ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-LightItalic.eot ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-LightItalic.ttf ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-LightItalic.woff ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-LightItalic.woff2 ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Medium.eot ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Medium.ttf ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Medium.woff ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Medium.woff2 ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-MediumItalic.eot ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-MediumItalic.ttf ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-MediumItalic.woff ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-MediumItalic.woff2 ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Regular.eot ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Regular.ttf ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Regular.woff ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Regular.woff2 ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Variable.eot ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Variable.ttf ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Variable.woff ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-Variable.woff2 ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-VariableItalic.eot ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-VariableItalic.ttf ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-VariableItalic.woff ADDED Viewed

Binary file

package/public/fonts/satoshi/fonts/Satoshi-VariableItalic.woff2 ADDED Viewed

Binary file

package/public/icons/grant_match.webp ADDED Viewed

Binary file

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}