webcoreui 0.0.3 → 0.0.5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Frontendland
+
+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/README.md

@@ -0,0 +1,136 @@
+<p>
+    <a href="https://webcoreui.dev">
+      <img
+            alt="Webcore - Frontend components for Astro, Svelte, and React"
+            src="https://raw.githubusercontent.com/Frontendland/webcoreui/main/public/img/banner.png"
+        />
+    </a>
+</p>
+
+<p align="center">
+    <a href="https://github.com/Frontendland/webcoreui/releases">
+        <img
+            src="https://img.shields.io/npm/v/webcoreui.svg?label=Latest%20Release"
+            alt="Latest Release"
+        />
+    </a>
+    <a href="https://github.com/Frontendland/webcoreui/blob/main/LICENSE">
+        <img
+            src="https://img.shields.io/badge/license-MIT-blue"
+            alt="License"
+        />
+    </a>
+</p>
+
+> [!IMPORTANT]
+> This library is still in early development. New changes can break existing functionality, and no functionality should be considered final. The library will be considered stable once it reaches v1.0.
+
+---
+## Table of Contents
+
+- [Table of Contents](#table-of-contents)
+- [Documentation](#documentation)
+- [Getting started](#getting-started)
+    - [Prerequisites](#prerequisites)
+    - [Installation](#installation)
+    - [Setup](#setup)
+    - [Using Components](#using-components)
+- [Components](#components)
+
+## Documentation
+
+Full documentation coming soon on [webcoreui.dev/docs](https://webcoreui.dev/docs).
+
+## Getting Started
+
+Webcore can be used as a standalone project, or it can be integrated into your existing Astro, Svelte, or React ecosystems.
+
+### Prerequisites
+
+> [!NOTE]
+> Before getting started, make sure you have a package manager installed, such as <a href="https://nodejs.org/en/" rel="noreferrer">Node</a>.
+
+Webcore components use Sass for styling. To use the component library, you must have the following packages installed:
+
+- [Sass](https://www.npmjs.com/package/sass) - `v1.77` and above
+- [TypeScript](https://www.npmjs.com/package/typescript) - `v5.4` and above
+
+Depending on your project setup, you'll also need the following packages:
+
+- **For Astro projects**
+    - [Astro](https://www.npmjs.com/package/astro) - `v4.10` and above
+- **For Svelte projects**
+    - [Svelte](https://www.npmjs.com/package/svelte) - `v4.2` and above
+- **For React projects**
+    - [React](https://www.npmjs.com/package/react) - `v18.3` and above
+    - [React DOM](https://www.npmjs.com/package/react-dom) -`v18.3` and above
+
+### Installation
+
+Install Webcore as a dependency by running one of the following command:
+
+```bash
+# Using NPM
+npm i webcoreui
+
+# Using Yarn
+yarn add webcoreui
+```
+
+### Setup
+
+1. Add the following to your `tsconfig.json` to include TypeScript types:
+
+```json
+{
+  "include": ["webcoreui"]
+}
+```
+
+2. Setup default styles and fonts by calling the following in your global SCSS file:
+
+```scss
+@import 'webcoreui/styles';
+@include Setup((
+    // Define paths for your fonts
+    fontRegular: '/fonts/Inter-Regular.woff2',
+    fontBold: '/fonts/Inter-Bold.woff2'
+));
+```
+
+> [!TIP]
+> You can download the fonts Webcore uses from the [`public/fonts`](https://github.com/Frontendland/webcoreui/tree/main/public/fonts) directory.
+
+The `Setup` mixin can also accept the following options:
+
+
+| Property  | Default value | Purpose |
+|-----------|---------------|---------|
+| `includeResets` | `true` | Include reset styles. Set to `false` if you want to use your own CSS resets. |
+| `includeHelperClasses` | `true` | Adds global helper classes for CSS. All global helper classes are defined [here](https://github.com/Frontendland/webcoreui/tree/main/src/scss/global). |
+
+### Using Components
+
+Start using Webcore components in your code by importing them:
+
+```astro
+---
+// Import the component relevant to your project
+// How to import Astro components
+import { Accordion } from 'webcoreui/astro'
+
+// How to import Svelte components
+import { Accordion } from 'webcoreui/svelte'
+
+// How to import React components
+import { Accordion } from 'webcoreui/react'
+---
+
+<Accordion items={[{ ... }]} />
+```
+
+## Components
+
+- [Accordion](https://github.com/Frontendland/webcoreui/tree/main/src/components/Accordion)
+- [Button](https://github.com/Frontendland/webcoreui/tree/main/src/components/Button)
+- [Card](https://github.com/Frontendland/webcoreui/tree/main/src/components/Card)

package/astro.js

@@ -1,3 +1,7 @@
-import Accordion from './components/Accordion/Accordion.astro'
+import AccordionComponent from './components/Accordion/Accordion.astro'
+import ButtonComponent from './components/Button/Button.astro'
+import CardComponent from './components/Card/Card.astro'
 
-export const Accordion = Accordion
+export const Accordion = AccordionComponent
+export const Button = ButtonComponent
+export const Card = CardComponent

package/components/Accordion/Accordion.astro

@@ -11,7 +11,15 @@ const {
 <ul data-id="accordion">
     {items.map(item => (
         <li>
-            <div class="accordion-title">{item.title}</div>
+            <div class="accordion-title">
+                {item.title}
+                <img
+                    src="/icons/arrow-down.svg"
+                    alt="GitHub"
+                    width={15}
+                    height={15}
+                />
+            </div>
             <div class="accordion-wrapper">
                 <div class="accordion-content">
                     <Fragment set:html={item.content} />

package/components/Accordion/Accordion.svelte

@@ -22,6 +22,12 @@
                 on:click={() => toggle(index)}
             >
                 {item.title}
+                <img
+                    src="/icons/arrow-down.svg"
+                    alt="GitHub"
+                    width={15}
+                    height={15}
+                />
             </div>
             <div class="accordion-wrapper">
                 <div class="accordion-content">

package/components/Accordion/Accordion.tsx

@@ -21,6 +21,12 @@ export const Accordion = ({ items }: AccordionProps) => {
                         onClick={() => toggle(index)}
                     >
                         {item.title}
+                        <img
+                            src="/icons/arrow-down.svg"
+                            alt="GitHub"
+                            width={15}
+                            height={15}
+                        />
                     </div>
                     <div className="accordion-wrapper">
                         <div className="accordion-content">

package/components/Accordion/accordion.scss

@@ -20,13 +20,27 @@ ul {
         }
 
         .accordion-title {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
             cursor: pointer;
 
-            &.open + .accordion-wrapper {
-                grid-template-rows: 1fr;
-    
-                .accordion-content {
-                    padding: 10px 0;
+            img {
+                @include Transition(transform);
+                filter: brightness(.7);
+            }
+
+            &.open {
+                img {
+                    transform: rotate(180deg);
+                }
+
+                + .accordion-wrapper {
+                    grid-template-rows: 1fr;
+        
+                    .accordion-content {
+                        padding: 10px 0;
+                    }
                 }
             }
         }
@@ -40,7 +54,7 @@ ul {
         .accordion-content {
             @include Transition();
             overflow: hidden;
-            color: #DDD;
+            color: #BBB;
         }
     }
 }

package/components/Button/Button.astro

@@ -1,22 +1,28 @@
 ---
-interface Props {
-    theme?: 'secondary' | 'tertiary'
-    [key: string]: any
-}
+import type { ButtonProps } from './button'
+
+interface Props extends ButtonProps {}
 
 const {
     theme,
+    bold,
     href,
     ...rest
 } = Astro.props
+
+const classes = [
+    'w-button',
+    bold && 'bold',
+    theme
+].filter(Boolean).join(' ')
 ---
 
 {href ? (
-    <a {...rest} href={href} class={theme || null}>
+    <a {...rest} href={href} class={classes || null}>
         <slot />
     </a>
 ) : (
-    <button {...rest}>
+    <button {...rest} class={classes || null}>
         <slot />
     </button>
 )}

package/components/Button/Button.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import type { ButtonProps } from './button'
+
+    export let theme: ButtonProps['theme'] = null
+    export let bold: ButtonProps['bold'] = false
+    export let href: ButtonProps['href'] = ''
+    export let onClick: ButtonProps['onClick'] = () => {}
+
+    const classes = [
+        'w-button',
+        bold && 'bold',
+        theme
+    ].filter(Boolean).join(' ')
+</script>
+
+
+{#if href}
+    <a {...$$restProps} href={href} class={classes || null}>
+        <slot />
+    </a>
+{:else}
+    <button {...$$restProps} class={classes || null} on:click={onClick}>
+        <slot />
+    </button>
+{/if}
+
+<style lang="scss">
+    @import './button.scss';
+</style>

package/components/Button/Button.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import type { ButtonProps } from './button'
+import './button.scss'
+
+export const Button = ({
+    theme,
+    bold,
+    href,
+    children,
+    onClick,
+    ...rest
+}: ButtonProps) => {
+    const classes = [
+        'w-button',
+        bold && 'bold',
+        theme
+    ].filter(Boolean).join(' ')
+
+    if (href) {
+        return (
+            <a {...rest} href={href} className={classes || undefined}>
+                {children}
+            </a>
+        )
+    }
+
+    return (
+        <button {...rest} className={classes || undefined} onClick={onClick}>
+            {children}
+        </button>
+    )
+}

package/components/Button/button.scss

@@ -1,21 +1,92 @@
 @import '../../scss/config.scss';
 
-a {
+.w-button {
+    @include Transition();
     padding: 10px 15px;
     border-radius: 5px;
-    color: #FFF;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 5px;
     font-size: 16px;
+    font-family: Regular;
+    cursor: pointer;
+    border: 0;
+    background: #FFF;
+    color: #252525;
 
+    &[disabled] {
+        cursor: no-drop;
+        background: #BBB;
+    }
+
+    &:hover {
+        background: #BBB;
+    }
+    
     &.secondary {
-        @include Transition(background);
         background: #252525;
+        color: #FFF;
+
+        &:hover {
+            background: #333;
+        }
+    }
+
+    &.outline {
+        background: #000;
+        color: #FFF;
+        box-shadow: inset 0px 0px 0px 1px #FFF;
+
+        &:hover {
+            color: #BBB;
+            box-shadow: inset 0px 0px 0px 1px #BBB;
+        }
+    }
+
+    &.flat {
+        background: #000;
+        color: #FFF;
 
         &:hover {
             background: #333;
         }
     }
+
+    &.info {
+        background: #0abde3;
+
+        &:hover {
+            background: #48dbfb;
+        }
+    }
+
+    &.success {
+        background: #10ac84;
+
+        &:hover {
+            background: #1dd1a1;
+        }
+    }
+
+    &.warning {
+        background: #ff9f43;
+
+        &:hover {
+            background: #f7aa61;
+        }
+    }
+
+    &.alert {
+        background: #e73f40;
+        color: #fff;
+
+        &:hover {
+            background: #ee5253;
+        }
+    }
+
+    &.bold {
+        font-family: Bold;
+    }
 }

package/components/Button/button.ts

@@ -0,0 +1,14 @@
+export type ButtonProps = {
+    theme?: 'secondary'
+        | 'outline'
+        | 'flat'
+        | 'info'
+        | 'success'
+        | 'warning'
+        | 'alert'
+        | null
+    bold?: boolean
+    href?: string
+    onClick?: () => any
+    [key: string]: any
+}

package/components/Card/Card.astro

@@ -3,6 +3,8 @@ interface Props {
     element?: string
     title?: string
     compact?: boolean
+    className?: string
+    secondary?: boolean
     [key: string]: any
 }
 
@@ -10,12 +12,20 @@ const {
     element = 'section',
     title,
     titleTag = 'span',
-    compact = true,
+    compact,
+    className,
+    secondary,
     ...rest
 } = Astro.props
 
+const classes = [
+    className,
+    secondary && 'secondary',
+    'card'
+].filter(Boolean).join(' ')
+
 const props = {
-    class: 'card'
+    class: classes
 }
 
 const Component = element
@@ -27,7 +37,7 @@ const Title = titleTag
         <Title class="card-title">{title}</Title>
     )}
     <div class="card-body" class:list={[compact && 'compact']}>
-        {compact ? (
+        {compact && !secondary ? (
             <div class="card-wrapper"><slot /></div>
         ) : (
             <slot />

package/components/Card/card.scss

@@ -1,6 +1,16 @@
 .card {
     border: 1px solid #252525;
     border-radius: 5px;
+    display: flex;
+    flex-direction: column;
+
+    &.secondary {
+        background: #111;
+
+        .card-title {
+            background: #000;
+        }
+    }
 
     .card-title {
         padding: 20px;
@@ -11,6 +21,7 @@
 
     .card-body {
         padding: 20px;
+        height: 100%;
 
         &.compact {
             background: #111;
@@ -20,5 +31,6 @@
     .card-wrapper {
         background: #000;
         padding: 40px;
+        height: 100%;
     }
 }

package/package.json

@@ -1,12 +1,11 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.0.3",
+    "version": "0.0.5",
     "scripts": {
         "dev": "astro dev",
         "build": "astro check && astro build",
         "build:package": "node scripts/build.js",
-        "publish": "cd dist && np",
         "test": "echo \"Error: no test specified\""
     },
     "dependencies": {
@@ -28,15 +27,17 @@
         "./config": "./scss/config.scss"
     },
     "files": [
-        "public",
         "components",
+        "public",
         "scss",
         "astro.d.ts",
         "astro.js",
         "svelte.d.ts",
         "svelte.js",
         "react.d.ts",
-        "react.js"
+        "react.js",
+        "README.md",
+        "LICENSE"
     ],
     "license": "MIT",
     "description": "UI component and template library for Astro, Svelte, and React apps styled with Sass.",
@@ -56,7 +57,7 @@
     "homepage": "https://webcoreui.dev",
     "repository": {
         "type": "git",
-        "url": "https://github.com/Frontendland/webcoreui"
+        "url": "git+https://github.com/Frontendland/webcoreui.git"
     },
     "bugs": {
         "url": "https://github.com/Frontendland/webcoreui/issues"

package/public/icons/arrow-down.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.360618 6.42142C0.864272 5.88419 1.70806 5.85699 2.24526 6.36062L12 15.5057L21.7547 6.36062C22.292 5.85699 23.1358 5.88419 23.6395 6.42142C24.143 6.95865 24.1158 7.80243 23.5787 8.30606L12.9119 18.3062C12.3991 18.787 11.601 18.787 11.0881 18.3062L0.421418 8.30606C-0.11581 7.80243 -0.143009 6.95865 0.360618 6.42142Z" fill="white" />
+</svg>

package/react.js

@@ -1,3 +1,7 @@
-import { Accordion } from './components/Accordion/Accordion.tsx'
+import { Accordion as AccordionComponent } from './components/Accordion/Accordion.tsx'
+import { Button as ButtonComponent } from './components/Button/Button.tsx'
+import { Card as CardComponent } from './components/Card/Card.tsx'
 
-export const Accordion = Accordion
+export const Accordion = AccordionComponent
+export const Button = ButtonComponent
+export const Card = CardComponent

package/scss/global/elements.scss

@@ -0,0 +1,11 @@
+@import '../config';
+
+@mixin Elements() {
+    code {
+        display: inline-block;
+        padding: 2px 10px;
+        border-radius: 5px;
+        border: 1px solid #252525;
+        font-size: 14px;
+    }
+}

package/scss/global.scss

@@ -1 +1,2 @@
+@import './global/elements.scss';
 @import './global/utility.scss';

package/scss/setup.scss

@@ -2,7 +2,8 @@
 
 $config: (
     includeResets: true,
-    includeHelperClasses: true
+    includeHelperClasses: true,
+    includeElementStyles: true
 );
 
 @function config($key) {
@@ -19,4 +20,8 @@ $config: (
     @if (config('includeHelperClasses')) {
         @include Utility();
     }
+
+    @if (config('includeElementStyles')) {
+        @include Elements();
+    }
 }

package/svelte.js

@@ -1,3 +1,7 @@
-import Accordion from './components/Accordion/Accordion.svelte'
+import AccordionComponent from './components/Accordion/Accordion.svelte'
+import ButtonComponent from './components/Button/Button.svelte'
+import CardComponent from './components/Card/Card.svelte'
 
-export const Accordion = Accordion
+export const Accordion = AccordionComponent
+export const Button = ButtonComponent
+export const Card = CardComponent