jamespatrickgibson / union Goto Github PK

View Code? Open in Web Editor NEW

2.0 1.0 2.0 1.1 MB

A design system boilerplate for Svelte & CSS

Home Page: http://www.designwithunion.com

JavaScript 12.04% HTML 3.56% Svelte 61.39% SCSS 23.00%

design-system sveltejs svelte-components css-custom-properties

union's People

Contributors

Stargazers

Watchers

Forkers

peterbsmyth javascript-univers-labs

union's Issues

Setup NPM repo for project

Test build scripts
Test publishing to repo
Setup unpkg for easy includes
Setup a component example in Svelte REPL to test components work

npm distribution bug

Using the svelte quickstart, importing and using the union-design-system npm package the npm run dev command returns this error:

[!] Error: Could not load /Users/upstateinteractive/code/personal/website-/node_modules/union-design-system/src/index.js (imported by src/App.svelte): ENOENT: no such file or directory, open '/Users/upstateinteractive/code/personal/website-/node_modules/union-design-system/src/index.js'

<script>
  export let name;
  import {
    Button,
    FixedImage,
    Frame,
    Link,
    List,
    ListItem,
    Navigation,
    NavigationSection,
    MediaObject,
    Stack,
    SplitView,
    Text,
  } from "union-design-system";
</script>

<style>
  main {
    text-align: center;
    padding: 1em;
    max-width: 240px;
    margin: 0 auto;
  }

  h1 {
    color: #ff3e00;
    text-transform: uppercase;
    font-size: 4em;
    font-weight: 100;
  }

  @media (min-width: 640px) {
    main {
      max-width: none;
    }
  }
</style>

<Navigation>
  <NavigationSection title="Apple Music">
    <List>
      <ListItem>
        <Text size="3">
          <Link to="./" type="implied">For You</Link>
        </Text>
      </ListItem>
      <ListItem>
        <Text size="3">
          <Link to="./" type="implied">Browse</Link>
        </Text>
      </ListItem>
      <ListItem>
        <Text size="3">
          <Link to="./" type="implied">Radio</Link>
        </Text>
      </ListItem>
    </List>
  </NavigationSection>
</Navigation>

<main>
  <h1>Hello {name}!</h1>
  <p>
    Visit the
    <a href="https://svelte.dev/tutorial">Svelte tutorial</a>
    to learn how to build Svelte apps.
  </p>
</main>

Simplify modes to just white (for now), explore "levels" concept

Getting started

I compiled snippets of source from three places:

storybook's preview component
the svelte-docs source code
angular documentation's example-viewer

the lightly annotated code is here.

Notes

...the angular example-viewer is a tightly-coupled system. Angular docs use a pre-processor, i haven't located that source code, that uses a method similar to svelte-docs for processing markdown.
...the example-viewer can only show examples from a source that is in an angular namespace @angular/component-examples that makes it possible to define an example to display based on a predefined string key. the inline usage in a markdown file looks like:

<!-- example(cdk-drag-drop-overview) -->

...the svelte markdown preprocessor that is a part of the svelte-docs project is a small amount of code.

...the react project couples the style. it is the only project whose props allow for style to be passed in using a className prop. as well, it shares with the angular example-viewer an expandable/collapsible prop.

<link rel="stylesheet" href="https://unpkg.com/union-design-system/dist/theme.css"/>
<link rel="stylesheet" href="https://unpkg.com/union-design-system/dist/union.css"/>

I'm putting this into a sapper project, guessing that "template.html" is the way to do it.

I could use guidance on the place to put these files.

<Navigation> fails in sapper

error:

<Navigation> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules