@teiler/svelte 0.0.2 → 0.0.4

package/.storybook/main.ts

@@ -1,21 +0,0 @@
-import type { StorybookConfig } from '@storybook/svelte-vite';
-
-const config: StorybookConfig = {
-  stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx|svelte)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-svelte-csf', '@storybook/addon-interactions', '@storybook/addon-mdx-gfm'],
-  features: {
-    buildStoriesJson: true
-  },
-  typescript: {
-    check: false,
-  },
-  framework: '@storybook/svelte-vite',
-  docs: {
-    autodocs: true
-  },
-  async viteFinal(config, options) {
-    return config
-  },
-};
-
-export default config

package/.storybook/preview.js

@@ -1,9 +0,0 @@
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};

package/rollup.config.js

@@ -1,80 +0,0 @@
-import commonjs from '@rollup/plugin-commonjs'
-import { nodeResolve } from '@rollup/plugin-node-resolve'
-import json from '@rollup/plugin-json'
-import svelte from 'rollup-plugin-svelte'
-import sveltePreprocess from 'svelte-preprocess'
-import esbuild from 'rollup-plugin-esbuild'
-import dts from 'rollup-plugin-dts'
-import { transformSync } from 'esbuild'
-
-import { terser } from 'rollup-plugin-terser'
-
-const globals = {
-  'svelte/internal': 'svelte/internal',
-  svelte: 'svelte',
-}
-
-const defaultPlugins = [
-  commonjs(),
-  nodeResolve({ resolveOnly: [/^(?!svelte.*$)/] }),
-  json(),
-  esbuild.default({ sourceMap: true }),
-  svelte({
-    emitCss: false,
-    compilerOptions: {
-      // dev: production === false,
-      sourcemap: true,
-      // generate: 'ssr',
-    },
-    preprocess: sveltePreprocess({
-      typescript({ content }) {
-        const { code, map } = transformSync(content, {
-          loader: 'ts',
-          tsconfigRaw: {
-            compilerOptions: {
-              importsNotUsedAsValues: 'error',
-              preserveValueImports: true,
-            },
-          },
-        })
-        return { code, map }
-      },
-    }),
-  }),
-]
-
-export default [
-  {
-    input: 'src/index.ts',
-    output: [
-      {
-        file: 'dist/teiler-svelte.umd.js',
-        name: 'teiler-svelte',
-        format: 'umd',
-        sourcemap: true,
-        globals,
-      },
-      {
-        file: 'dist/teiler-svelte.cjs.js',
-        format: 'cjs',
-        sourcemap: true,
-        globals,
-      },
-      {
-        file: 'dist/teiler-svelte.esm.js',
-        format: 'esm',
-        sourcemap: true,
-        globals,
-      },
-    ],
-    plugins: [...defaultPlugins, terser()],
-  },
-  {
-    input: 'src/index.ts',
-    output: {
-      file: `dist/teiler-svelte.d.ts`,
-      format: 'es',
-    },
-    plugins: [...defaultPlugins, dts.default()],
-  },
-]

package/stories/Buttons.stories.svelte

@@ -1,53 +0,0 @@
-<script lang="ts">
-  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
-  import Buttons from "./Buttons.svelte";
-</script>
-
-<Meta
-  title="Svelte/Button"
-  component={Buttons}
-  argTypes={{
-    label: { control: "text" },
-    _primary: { control: "boolean" },
-    _primaryColor: { control: "color" },
-    _size: {
-      control: { type: "select", options: ["small", "medium", "large"] },
-    },
-    onClick: { action: "onClick" },
-  }}
-/>
-
-<Template let:args>
-  <Buttons {...args} on:click={args.onClick} />
-</Template>
-
-<Story
-  name="Primary"
-  args={{
-    _primary: true,
-    label: "Button",
-  }}
-/>
-
-<Story
-  name="Secondary"
-  args={{
-    label: "Button",
-  }}
-/>
-
-<Story
-  name="Small"
-  args={{
-    _size: "small",
-    label: "Button",
-  }}
-/>
-
-<Story
-  name="Disabled"
-  args={{
-    disabled: true,
-    label: "Button",
-  }}
-/>

package/stories/Buttons.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-  import { Button, ExtendedButton } from './buttons'
-
-  // import teiler from '@teiler/svelte'
-  import { createEventDispatcher } from 'svelte'
-
-  export let _primary = false
-  export let _primaryColor = "#f18805"
-
-  export let _size: 'normal' | 'small' = 'normal'
-
-  export let label = ''
-
-  export let disabled
-
-  const dispatch = createEventDispatcher()
-
-  /**
-   * Optional click handler
-   */
-  function onClick(event) {
-    dispatch('click', event)
-  }
-</script>
-
-<Button {_primary} {_size} {_primaryColor} {disabled} on:click={onClick}>
-  {label}
-</Button>
-<ExtendedButton {_primary} {_size} {_primaryColor}>Test</ExtendedButton>

package/stories/Introduction.stories.mdx

@@ -1,197 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Example/Introduction" />
-
-<style>
-  {`
-  .subheading {
-    --mediumdark: '#999999';
-    font-weight: 900;
-    font-size: 13px;
-    color: #999;
-    letter-spacing: 6px;
-    line-height: 24px;
-    text-transform: uppercase;
-    margin-bottom: 12px;
-    margin-top: 40px;
-  }
-
-  .link-list {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr;
-    row-gap: 10px;
-  }
-
-  @media (min-width: 620px) {
-    .link-list {
-      row-gap: 20px;
-      column-gap: 20px;
-      grid-template-columns: 1fr 1fr;
-    }
-  }
-
-  @media all and (-ms-high-contrast:none) {
-  .link-list {
-      display: -ms-grid;
-      -ms-grid-columns: 1fr 1fr;
-      -ms-grid-rows: 1fr 1fr;
-    }
-  }
-
-  .link-item {
-    display: block;
-    padding: 20px 30px 20px 15px;
-    border: 1px solid #00000010;
-    border-radius: 5px;
-    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
-    color: #333333;
-    display: flex;
-    align-items: flex-start;
-  }
-
-  .link-item:hover {
-    border-color: #1EA7FD50;
-    transform: translate3d(0, -3px, 0);
-    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
-  }
-
-  .link-item:active {
-    border-color: #1EA7FD;
-    transform: translate3d(0, 0, 0);
-  }
-
-  .link-item strong {
-    font-weight: 700;
-    display: block;
-    margin-bottom: 2px;
-  }
-  
-  .link-item img {
-    height: 40px;
-    width: 40px;
-    margin-right: 15px;
-    flex: none;
-  }
-
-  .link-item span {
-    font-size: 14px;
-    line-height: 20px;
-  }
-
-  .tip {
-    display: inline-block;
-    border-radius: 1em;
-    font-size: 11px;
-    line-height: 12px;
-    font-weight: 700;
-    background: #E7FDD8;
-    color: #66BF3C;
-    padding: 4px 12px;
-    margin-right: 10px;
-    vertical-align: top;
-  }
-
-  .tip-wrapper {
-    font-size: 13px;
-    line-height: 20px;
-    margin-top: 40px;
-    margin-bottom: 40px;
-  }
-
-  .tip-wrapper code {
-    font-size: 12px;
-    display: inline-block;
-  }
-
-  
-  `}
-</style>
-
-# Welcome to Storybook
-
-Storybook helps you build UI components in isolation from your app's business logic, data, and context.
-That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
-
-Browse example stories now by navigating to them in the sidebar.
-View their code in the `src/stories` directory to learn how they work.
-We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
-
-<div className="subheading">Configure</div>
-
-<div className="link-list">
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/addons/addon-types"
-    target="_blank"
-  >
-    <span>
-      <strong>Presets for popular tools</strong>
-      Easy setup for TypeScript, SCSS and more.
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/webpack"
-    target="_blank"
-  >
-    <span>
-      <strong>Build configuration</strong>
-      How to customize webpack and Babel
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/styling-and-css"
-    target="_blank"
-  >
-    <span>
-      <strong>Styling</strong>
-      How to load and configure CSS libraries
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
-    target="_blank"
-  >
-    <span>
-      <strong>Data</strong>
-      Providers and mocking for data libraries
-    </span>
-  </a>
-</div>
-
-<div className="subheading">Learn</div>
-
-<div className="link-list">
-  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
-    <span>
-      <strong>Storybook documentation</strong>
-      Configure, customize, and extend
-    </span>
-  </a>
-  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
-    <span>
-      <strong>In-depth guides</strong>
-      Best practices from leading teams
-    </span>
-  </a>
-  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
-    <span>
-      <strong>GitHub project</strong>
-      View the source and add issues
-    </span>
-  </a>
-  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
-    <span>
-      <strong>Discord chat</strong>
-      Chat with maintainers and the community
-    </span>
-  </a>
-</div>
-
-<div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
-  <code>src/stories/Introduction.stories.mdx</code>
-</div>

package/stories/buttons.ts

@@ -1,69 +0,0 @@
-import component from '@teiler/svelte'
-
-const Button = component.button<{
-  _primary: boolean
-  _size: 'normal' | 'small',
-  _primaryColor: string,
-}>`
-  border-radius: 4px;
-  box-shadow: none;
-  display: inline-block;
-  padding: 0.5rem 1.6rem;
-  text-align: center;
-  font-size: 0.8rem;
-  line-height: 1.5rem;
-  background: transparent;
-  box-shadow: 0 0 0 3px #CBCBCB inset;
-  border: 0;
-  color: #0f121a;
-  appearance: none;
-  cursor: pointer;
-  font-weight: 700;
-  font-family: Roboto;
-
-  &:hover {
-    text-decoration: none;
-    color: #fcfbff;
-    background: ${( { _primaryColor } ) => _primaryColor};
-    box-shadow: 0 0 0 3px ${( { _primaryColor } ) => _primaryColor} inset;
-  }
-
-  ${({ _primary, _primaryColor }) =>
-    _primary &&
-    `
-      color: #fff;
-      box-shadow: none;
-      background: ${_primaryColor};
-
-      &:hover {
-        opacity: 0.9;
-      }
-    `}
-
-  ${({ _size }) =>
-    _size === 'small' &&
-    `
-    font-size: 0.81rem;
-    padding: 0.3rem 1.2rem;
-    min-width: auto;
-  `}
-
-  &[disabled] {
-    background-image: none !important;
-    background-color: #C0C0C0 !important;
-    box-shadow: 0 0 0 3px #C0C0C0 inset !important;
-    color: #fff !important;
-    cursor: not-allowed;
-  }
-`
-
-const ExtendedButton = component(Button)<{test?: boolean}>`
-  font-weight: 300;
-  background: red;
-
-  ${(props) => `
-    color: ${props.test ? 'red' : 'blue'};
-  `}
-`
-
-export { Button, ExtendedButton }