atk / solid-blocks Goto Github PK

View Code? Open in Web Editor NEW

81.0 5.0 2.0 1.22 MB

UI building blocks for SolidJS.

Home Page: https://atk.github.io/solid-blocks/

HTML 0.47% CSS 28.11% TypeScript 71.42%

components solidjs

solid-blocks's Introduction

Solid-Blocks

UI building blocks for SolidJS

Core concepts

Valuable components instead of components without added value

Wrapping elements like headers, text, or images in custom Components is just wasteful. Components will only be provided if they have added value over their native elements. The added value may be

user experience
accessibility
developer experience
performance

If none of these advantages can be provided, it is preferable to use native HTML elements or SolidJS' abilities like Portal effectively.

Components with style instead of styled components

Directly using CSS is frowned upon nowadays, but not rightfully so. Well crafted CSS will easily outperform styled components. It should do so with

minimal bleeding (class prefix sb-[component], CSS reset, basic styles, theme variables)
semantic class names, i.e. .primary.sb-button
careful consideration of a11y
works as much as possible in non-JS environments (SSR)
theme-able, dark mode, inline mode switch possible
TODO: responsive layout

Usage

yarn
yarn dev

To use the components

import { Accordion, AccordionHeader } from "solid-blocks";

const MyApp = () => {
  return (
    <Accordion>
      <AccordionHeader>Accordion</AccordionHeader>
      <p>Hidden</p>
    </Accordion>
  );
};

solid-blocks's People

Contributors

Stargazers

Watchers

Forkers

skyblueballykid milahu

solid-blocks's Issues

UX on <AccordionGroup> 's "allowMultiple" property

I was just playing around on the demo of <AccordionGroup>

Enable 'allowMultiple'
Open >1 Accordions
Disable 'allowMultiple'
Now we get 3 behaviours:
-a : cannot close already opened Accordions
-b: can open new accordions but newly opened Accordions cannot be closed as the others
-c: if a newly opened one is the last unopened one on the list, every opened Accordion are then closed and only the last opened one stay open (I think only this intuitively should be the default behaviour after we get rid of 'allowMultiple' and back to default)

P.S. Not sure how one would get there in real-life application except tinkering with the demo like me so might not actually be a bug

How to Install

How do you install these?

radio button fill off

Maybe intentional?

cheers

Solid Blocks do not work with Solid Start (SSR enabled)

Vite gives multiple errors:

 Error when evaluating SSR module /src/routes/index.tsx: failed to import "solid-blocks"
 Error when evaluating SSR module /node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/solid-start/root/FileRoutes.tsx: failed to import "/src/routes/index.tsx"
 Error when evaluating SSR module /src/root.tsx: failed to import "/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/solid-start/root/FileRoutes.tsx"

SyntaxError: Cannot use import statement outside a module

etc.

Any fixes available? Changing / removing excludes, externals or noExternals do not help.

vite.config.ts:

import solid from "solid-start/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    solid({
      ssr: true,
      experimental: {
        islandsRouter: true,
        islands: true
      }
    })],
  optimizeDeps: {
    include: ['mapbox-gl'],
    exclude: ["solid-blocks"]
  },
  ssr: {
    external: ["solid-blocks"]
  }
});

Modal Component Children run twice.

I have following modal code:

               <Modal>
                    {({open, toggle}) => {
                      return <><Button
                       onClick={toggle}
                      >Open</Button>
                        <ModalContent>
                          <ModalHeader>
                            Header
                            <Button
                             variant="icon"
                             onclick={toggle}
                             style={{ float: "right" }}
                            >
                              ✕
                            </Button>
                          </ModalHeader>
                          <ModalBody>
                            <Show when={open()}>
                              <Body/>
                            </Show>
                          </ModalBody>
                        </ModalContent>
                      </>;
                    }}
                  </Modal>

but modal opens <Body> component run twice.

Plans to add this to npm?

I tried installing this with pnpm install solid-blocks and it doesn't seem to be on the NPM registry. Do you have plans to support it there, or do I have the incorrect package name?

cannot import from "solid-blocks" when installed from npm.

How and from where do I import the components?
Module "solid-blocks" has no exported member "..."

tabs with display flex

tabs are not working with flex layout
the hidden="hidden" attribute has no effect

fixed in milahu@1812796
maybe there is a better solution than display:none

// src/App.jsx

import styles from './App.module.css';

export default function App(props) {
  return (
    <div class={styles.App}>

      <Tabs classList={{ [styles.flexcolumn]: true }}>

        <Tab>a</Tab>
        <TabContainer classList={{ [styles.flexcolumn]: true }}>
          {"a ".repeat(1000)}
        </TabContainer>

        <Tab>b</Tab>
        <TabContainer classList={{ [styles.flexcolumn]: true }}>
          {"b ".repeat(1000)}
        </TabContainer>

      </Tabs>
    </div>
  );
}

/* src/App.module.css */

.App {
  height: 100vh;
  display: flex;
  flex-direction: column;
  /*align-content:stretch;*/
}

.flexcolumn {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

Add documentation

Thanks for this interesting library. I was wondering if you can add documentation for this code to make it easier to use the code

style is missing

styles are missing

actual result with https://github.com/atk/solid-blocks

expected result with https://github.com/milahu/solidjs-blocks-vanillajs

im using solid-blocks like

cd src
git clone --depth 1 https://github.com/atk/solid-blocks
cd solid-blocks
yarn install
yarn build

// src/App.jsx
import { Tab, TabContainer, Tabs } from "./solid-blocks";

export default function App(props) {
  return (
    <div>
      <Tabs>
        <Tab>label 1</Tab>
        <TabContainer>content 1</TabContainer>
        <Tab>label 2</Tab>
        <TabContainer>content 2</TabContainer>
      </Tabs>
    </div>
  );
}