stargazer-ui 1.5.23 → 1.5.25

package/.babelrc.json

@@ -1,10 +1,10 @@
-{
-    "presets": [
-      ["@babel/preset-env", { "modules": "umd" }],
-      "@babel/preset-react"
-    ],
-    "plugins": [
-      "@babel/plugin-proposal-class-properties",
-      "@babel/plugin-proposal-nullish-coalescing-operator"
-    ]
+{
+    "presets": [
+      ["@babel/preset-env", { "modules": "umd" }],
+      "@babel/preset-react"
+    ],
+    "plugins": [
+      "@babel/plugin-proposal-class-properties",
+      "@babel/plugin-proposal-nullish-coalescing-operator"
+    ]
 }

package/.eslintrc.cjs

@@ -1,18 +1,18 @@
-module.exports = {
-    root: true,
-    env: { browser: true, es2020: true },
-    extends: [
-      'eslint:recommended',
-      'plugin:@typescript-eslint/recommended',
-      'plugin:react-hooks/recommended',
-    ],
-    ignorePatterns: ['dist', '.eslintrc.cjs'],
-    parser: '@typescript-eslint/parser',
-    plugins: ['react-refresh'],
-    rules: {
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
-    },
+module.exports = {
+    root: true,
+    env: { browser: true, es2020: true },
+    extends: [
+      'eslint:recommended',
+      'plugin:@typescript-eslint/recommended',
+      'plugin:react-hooks/recommended',
+    ],
+    ignorePatterns: ['dist', '.eslintrc.cjs'],
+    parser: '@typescript-eslint/parser',
+    plugins: ['react-refresh'],
+    rules: {
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
   }

package/.gitattributes

@@ -1,2 +1,2 @@
-# Auto detect text files and perform LF normalization
-* text=auto
+# Auto detect text files and perform LF normalization
+* text=auto

package/.github/workflows/npm-publish.yml

@@ -0,0 +1,24 @@
+name: Publish Package to npmjs
+on:
+  push:
+    branches: ['main']
+  workflow_dispatch:
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - uses: actions/checkout@v5
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm install
+      - run: npm run rollup
+      - run: cd dist
+      - run: npm publish --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2024 Xoror
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2024 Xoror
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dev/index.html

@@ -1,16 +1,16 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <script
-        crossOrigin="anonymous"
-        src="//unpkg.com/react-scan/dist/auto.global.js"
-    ></script>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Stargazer UI Test</title>
-</head>
-<body style="margin: 0">
-    <div id="root"></div>
-    <script type="module" src="/index.jsx"></script>
-</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <script
+        crossOrigin="anonymous"
+        src="//unpkg.com/react-scan/dist/auto.global.js"
+    ></script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Stargazer UI Test</title>
+</head>
+<body style="margin: 0">
+    <div id="root"></div>
+    <script type="module" src="/index.jsx"></script>
+</body>
 </html>

package/dev/index.jsx

@@ -1,46 +1,46 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-
-//import "../dist/styles/stargazerui.css"
-import "../src/styles/_components.scss"
-import "./index.scss"
-
-import Dropdown from '../src/Dropdown'
-import Nav from "../src/Nav"
-import Navbar from '../src/NavBar'
-
-import { Component } from './test'
-
-const App = () => {
-  return(
-    <>
-      <Navbar>
-        <Nav>
-            <Nav.Item>
-                <Nav.Link href="#">Home</Nav.Link>
-            </Nav.Item>
-            <Nav.Item>
-                <Nav.Link href="#">Test 2</Nav.Link>
-            </Nav.Item>
-        </Nav>
-        <Navbar.Brand className={"navigation-link"}>
-            Testing
-        </Navbar.Brand >
-        <Dropdown navDropdown={true} align='end' controlId='test-navdropdown' style={{marginLeft:"auto"}}>
-            <Dropdown.Item id="test-1">Test 1</Dropdown.Item>
-            <Dropdown.Item id="test-2">Test 2</Dropdown.Item>
-            <Dropdown.Item id="test-3">Test 3</Dropdown.Item>
-            <Dropdown.Item id="test-4">Test 4</Dropdown.Item>
-        </Dropdown>
-      </Navbar>
-      <Component />
-    </>
-  )
-  };
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
-
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+
+//import "../dist/styles/stargazerui.css"
+import "../src/styles/_components.scss"
+import "./index.scss"
+
+import Dropdown from '../src/Dropdown'
+import Nav from "../src/Nav"
+import Navbar from '../src/NavBar'
+
+import { Component } from './test'
+
+const App = () => {
+  return(
+    <>
+      <Navbar>
+        <Nav>
+            <Nav.Item>
+                <Nav.Link href="#">Home</Nav.Link>
+            </Nav.Item>
+            <Nav.Item>
+                <Nav.Link href="#">Test 2</Nav.Link>
+            </Nav.Item>
+        </Nav>
+        <Navbar.Brand className={"navigation-link"}>
+            Testing
+        </Navbar.Brand >
+        <Dropdown navDropdown={true} align='end' controlId='test-navdropdown' style={{marginLeft:"auto"}}>
+            <Dropdown.Item id="test-1">Test 1</Dropdown.Item>
+            <Dropdown.Item id="test-2">Test 2</Dropdown.Item>
+            <Dropdown.Item id="test-3">Test 3</Dropdown.Item>
+            <Dropdown.Item id="test-4">Test 4</Dropdown.Item>
+        </Dropdown>
+      </Navbar>
+      <Component />
+    </>
+  )
+  };
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
+

package/dev/index.scss

@@ -1,74 +1,74 @@
-.sg-tabs-content {
-    h4 {
-        margin: 0;
-        padding-inline: 1.5rem;
-        padding-block: 1rem;
-        &:first-child {
-            padding-top: 0;
-        }
-    }
-    pre {
-        margin: 0;
-        padding: 0.5rem;
-        font-size: 0.75rem;
-        border: 1px solid white;
-        //max-width: 360px;
-    }
-}
-.code-block {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: 1rem;
-}
-.description-container {
-    padding-inline: 2rem;
-    margin-bottom: 1rem;
-}
-.container {
-    width: 100%;
-    display: grid;
-    row-gap: 1rem;
-    //place-items: center;
-    //grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
-    //grid-template-rows: 1fr 1fr;
-    padding-inline: 2rem;
-}
-.flex-display {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    row-gap: 1rem;
-    justify-content: space-around;
-}
-
-.dropdown-container {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin-inline: auto;
-    gap: 5rem;
-}
-
-.overlay-container {
-    margin-inline: auto;
-}
-
-.list-container {
-    display: grid;
-    place-items: center;
-}
-
-.fixed-navbar {
-    --_width: calc(100dvh*(16/9));
-    position: relative;
-    border: unset;
-    border-inline: 1px solid white;
-    background: unset;
-    background-color: unset;
-    width: var(--_width);
-    top: max(-100px, -1px * var(--scroll));
-    left: unset;
-    right: max(0px, (100vw - var(--_width)) / 2);
-    padding-right: 1rem;
-    background-color: transparent;
-}
+.sg-tabs-content {
+    h4 {
+        margin: 0;
+        padding-inline: 1.5rem;
+        padding-block: 1rem;
+        &:first-child {
+            padding-top: 0;
+        }
+    }
+    pre {
+        margin: 0;
+        padding: 0.5rem;
+        font-size: 0.75rem;
+        border: 1px solid white;
+        //max-width: 360px;
+    }
+}
+.code-block {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 1rem;
+}
+.description-container {
+    padding-inline: 2rem;
+    margin-bottom: 1rem;
+}
+.container {
+    width: 100%;
+    display: grid;
+    row-gap: 1rem;
+    //place-items: center;
+    //grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
+    //grid-template-rows: 1fr 1fr;
+    padding-inline: 2rem;
+}
+.flex-display {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    row-gap: 1rem;
+    justify-content: space-around;
+}
+
+.dropdown-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin-inline: auto;
+    gap: 5rem;
+}
+
+.overlay-container {
+    margin-inline: auto;
+}
+
+.list-container {
+    display: grid;
+    place-items: center;
+}
+
+.fixed-navbar {
+    --_width: calc(100dvh*(16/9));
+    position: relative;
+    border: unset;
+    border-inline: 1px solid white;
+    background: unset;
+    background-color: unset;
+    width: var(--_width);
+    top: max(-100px, -1px * var(--scroll));
+    left: unset;
+    right: max(0px, (100vw - var(--_width)) / 2);
+    padding-right: 1rem;
+    background-color: transparent;
+}

package/dev/pages/ButtonPage.jsx

@@ -1,44 +1,44 @@
-import Button from "../../src/Button"
-import ButtonGroup from "../../src/ButtonGroup"
-
-import { CodeBlock } from "./components"
-
-const CardPage = () => {
-    const code = `<ButtonGroup vertical={"boolean"}>
-    <Button variant={"variant 1"}>
-        Variant 1
-    </Button>
-    <Button variant={"variant 2"}>
-        Variant 2
-    </Button>
-    <Button variant={"variant 3"}>
-        Variant 3
-    </Button>
-</ButtonGroup>`
-    return (
-        <>
-            <h4>Regular Buttons</h4>
-            <section className="container">
-                <CodeBlock code={code}>
-                    <li>
-                        Variants: string as "primary" (default), "secondary", "success", "info", "warning", "danger", "dark", "light"
-                    </li>
-                </CodeBlock>
-                <div className="flex-display">
-                    {["primary", "secondary", "success", "info", "warning", "danger", "dark", "light", "custom"].map((color, index) => 
-                        <Button key={color} variant={color}>{color}</Button>
-                    )}
-                </div>
-                <div className="flex-display">
-                    <ButtonGroup>
-                        {["primary", "secondary", "success", "info", "warning", "danger", "dark", "light"].map((color, index) => 
-                            <Button key={color} variant={color}>{color}</Button>
-                        )}
-                    </ButtonGroup>
-                </div>
-            </section>
-        </>
-    )
-}
-
+import Button from "../../src/Button"
+import ButtonGroup from "../../src/ButtonGroup"
+
+import { CodeBlock } from "./components"
+
+const CardPage = () => {
+    const code = `<ButtonGroup vertical={"boolean"}>
+    <Button variant={"variant 1"}>
+        Variant 1
+    </Button>
+    <Button variant={"variant 2"}>
+        Variant 2
+    </Button>
+    <Button variant={"variant 3"}>
+        Variant 3
+    </Button>
+</ButtonGroup>`
+    return (
+        <>
+            <h4>Regular Buttons</h4>
+            <section className="container">
+                <CodeBlock code={code}>
+                    <li>
+                        Variants: string as "primary" (default), "secondary", "success", "info", "warning", "danger", "dark", "light"
+                    </li>
+                </CodeBlock>
+                <div className="flex-display">
+                    {["primary", "secondary", "success", "info", "warning", "danger", "dark", "light", "custom"].map((color, index) => 
+                        <Button key={color} variant={color}>{color}</Button>
+                    )}
+                </div>
+                <div className="flex-display">
+                    <ButtonGroup>
+                        {["primary", "secondary", "success", "info", "warning", "danger", "dark", "light"].map((color, index) => 
+                            <Button key={color} variant={color}>{color}</Button>
+                        )}
+                    </ButtonGroup>
+                </div>
+            </section>
+        </>
+    )
+}
+
 export default CardPage

package/dev/pages/CardPage.jsx

@@ -1,81 +1,81 @@
-import Card from "../../src/Card"
-import { CodeBlock } from "./components"
-
-const CardPage = () => {
-    const code = `<Card variant={string} inverted={boolean}>
-    <Card.Header>
-        <Card.Title>
-            Card
-        </Card.Title>
-    </Card.Header>
-    <Card.Body>
-        <Card.Text>
-            Testing the card text
-        </Card.Text>
-    </Card.Body>
-    <Card.Footer>
-        <Card.Text>
-            Test Footer
-        </Card.Text>
-    </Card.Footer>
-</Card>`
-    return (
-        <>
-            <h4>Regular Cards</h4>
-            <section className="container">
-                <CodeBlock code={code}>
-                    <li>
-                        Variants: string as "primary" (default), "secondary", "success", "info", "warning", "danger", "dark", "light"
-                    </li>
-                    <li>
-                        Inverted: boolean, makes them solid color (with a little gradient)
-                    </li>
-                </CodeBlock>
-                <div className="flex-display">
-                    {["primary", "secondary", "success", "info", "warning", "danger", "dark", "light"].map((color, index) => 
-                        <Card key={color} variant={color}>
-                            <Card.Header>
-                                <Card.Title>
-                                    Card {color}
-                                </Card.Title>
-                            </Card.Header>
-                            <Card.Body>
-                                <Card.Text>
-                                    Testing the card text
-                                </Card.Text>
-                            </Card.Body>
-                            <Card.Footer>
-                                <Card.Text>
-                                    Test Footer
-                                </Card.Text>
-                            </Card.Footer>
-                        </Card>
-                    )}
-                </div>
-                <div className="flex-display">
-                    {["primary", "secondary", "success", "info", "warning", "danger", "dark", "light"].map((color, index) => 
-                        <Card key={color} variant={color} inverted={true}>
-                            <Card.Header>
-                                <Card.Title>
-                                    Inverted Card {color}
-                                </Card.Title>
-                            </Card.Header>
-                            <Card.Body>
-                                <Card.Text>
-                                    Testing the inverted card text
-                                </Card.Text>
-                            </Card.Body>
-                            <Card.Footer>
-                                <Card.Text>
-                                    Test Footer
-                                </Card.Text>
-                            </Card.Footer>
-                        </Card>
-                    )}
-                </div>
-            </section>
-        </>
-    )
-}
-
+import Card from "../../src/Card"
+import { CodeBlock } from "./components"
+
+const CardPage = () => {
+    const code = `<Card variant={string} inverted={boolean}>
+    <Card.Header>
+        <Card.Title>
+            Card
+        </Card.Title>
+    </Card.Header>
+    <Card.Body>
+        <Card.Text>
+            Testing the card text
+        </Card.Text>
+    </Card.Body>
+    <Card.Footer>
+        <Card.Text>
+            Test Footer
+        </Card.Text>
+    </Card.Footer>
+</Card>`
+    return (
+        <>
+            <h4>Regular Cards</h4>
+            <section className="container">
+                <CodeBlock code={code}>
+                    <li>
+                        Variants: string as "primary" (default), "secondary", "success", "info", "warning", "danger", "dark", "light"
+                    </li>
+                    <li>
+                        Inverted: boolean, makes them solid color (with a little gradient)
+                    </li>
+                </CodeBlock>
+                <div className="flex-display">
+                    {["primary", "secondary", "success", "info", "warning", "danger", "dark", "light"].map((color, index) => 
+                        <Card key={color} variant={color}>
+                            <Card.Header>
+                                <Card.Title>
+                                    Card {color}
+                                </Card.Title>
+                            </Card.Header>
+                            <Card.Body>
+                                <Card.Text>
+                                    Testing the card text
+                                </Card.Text>
+                            </Card.Body>
+                            <Card.Footer>
+                                <Card.Text>
+                                    Test Footer
+                                </Card.Text>
+                            </Card.Footer>
+                        </Card>
+                    )}
+                </div>
+                <div className="flex-display">
+                    {["primary", "secondary", "success", "info", "warning", "danger", "dark", "light"].map((color, index) => 
+                        <Card key={color} variant={color} inverted={true}>
+                            <Card.Header>
+                                <Card.Title>
+                                    Inverted Card {color}
+                                </Card.Title>
+                            </Card.Header>
+                            <Card.Body>
+                                <Card.Text>
+                                    Testing the inverted card text
+                                </Card.Text>
+                            </Card.Body>
+                            <Card.Footer>
+                                <Card.Text>
+                                    Test Footer
+                                </Card.Text>
+                            </Card.Footer>
+                        </Card>
+                    )}
+                </div>
+            </section>
+        </>
+    )
+}
+
 export default CardPage