Merge pull request #7 from ryu-man/0.2.0

0.2.0

Author: ryu-man

.storybook/main.js

@@ -0,0 +1,34 @@
+const path = require('path')
+
+module.exports = {
+  stories: [
+    '../stories/**/*.stories.mdx',
+    '../stories/**/*.stories.@(js|jsx|ts|tsx|svelte)'
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-svelte-csf'
+  ],
+  core: {
+    builder: 'webpack5'
+  },
+  webpackFinal: async (config, { configType }) => {
+    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+    // You can change the configuration based on that.
+    // 'PRODUCTION' is used when building the static version of storybook.
+
+    config.resolve = {
+      ...config.resolve,
+      // see below for an explanation
+      alias: {
+        svelte: path.resolve('node_modules', 'svelte')
+      },
+      extensions: ['.mjs', '.js', '.svelte'],
+      mainFields: ['svelte', 'browser', 'module', 'main']
+    }
+
+    // Return the altered config
+    return config
+  }
+}

.storybook/manager.js

@@ -0,0 +1,26 @@
+// .storybook/manager.js
+
+import { addons } from '@storybook/addons';
+
+addons.setConfig({
+    isFullscreen: false,
+    showNav: true,
+    showPanel: true,
+    panelPosition: 'right',
+    enableShortcuts: true,
+    isToolshown: true,
+    theme: undefined,
+    selectedPanel: undefined,
+    initialActive: 'sidebar',
+    sidebar: {
+        showRoots: false,
+        collapsedRoots: ['other'],
+    },
+    toolbar: {
+        title: { hidden: false, },
+        zoom: { hidden: false, },
+        eject: { hidden: false, },
+        copy: { hidden: false, },
+        fullscreen: { hidden: false, },
+    },
+});

.storybook/preview.js

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

README.md

@@ -79,47 +79,75 @@ Add svantic and modify `src/App.svelte` file in the following way
   import { Button } from 'svantic'
 </script>
 
-<button>Hello world</button>
+<Button>Hello world</button>
 ```
 
 ```html
 <script>
     // import modules
-    import { Dropdown, Icon } from 'svantic';
+    import { Dropdown, initDropdown, controllable, Icon } from 'svantic';
+
+    // call this function if you want to use Module.SubModule syntax, ex: Dropdown.Item
+    initDropdown()
+
+    const dropdownController = controllable(controller=>{
+      // called when the module is mounted and ready
+      // access the controller and manupilate dropdown
+    })
 
-</script>
 
-// Every module have two props: onMount{function} and setting{object}
+</script>
 
-// onMount function: allows control module behaviors
+// onMount: allows control module behaviors
 // settings: pass module settings
-<Dropdown selection onMount={(controller) => {}} settings={{}}>
+<Dropdown 
+  bind:this={$dropdownController} 
+  onMount={(domElem) => {}} 
+  settings={{}}
+  selection >
 	<Icon name="caret down" />
-	<Dropdown.text>Select language</Dropdown.text>
-	<Dropdown.menu>
-		<Dropdown.item>English</Dropdown.item>
-		<Dropdown.item>Arabic</Dropdown.item>
-		<Dropdown.item>Spanish</Dropdown.item>
-		<Dropdown.item>German</Dropdown.item>
-	</Dropdown.menu>
+	<Dropdown.Text>Select language</Dropdown.Text>
+	<Dropdown.Menu>
+		<Dropdown.Item>English</Dropdown.Item>
+		<Dropdown.Item>Arabic</Dropdown.Item>
+		<Dropdown.Item>Spanish</Dropdown.Item>
+		<Dropdown.Item>German</Dropdown.Item>
+	</Dropdown.Menu>
 </Dropdown>
 ```
 
-...then start [Rollup](https://rollupjs.org/)
+Another way to use Module.SubModule syntax
 
-```bash
-npm run dev
+```html
+<script>
+    import { Icon } from 'svantic'
+    import * as Dropdown from 'svantic/modules/dropdown';
+</script>
+
+<Dropdown.default selection >
+	<Icon name="caret down" />
+	<Dropdown.Text>Select language</Dropdown.Text>
+	<Dropdown.Menu>
+		<Dropdown.Item>English</Dropdown.Item>
+		<Dropdown.Item>Arabic</Dropdown.Item>
+		<Dropdown.Item>Spanish</Dropdown.Item>
+		<Dropdown.Item>German</Dropdown.Item>
+	</Dropdown.Menu>
+</Dropdown.default>
 ```
+**Breaking Change**
+
+- onMount prop: allows acces to the top level dom elem instead of module controller
+
+- module controller: to controll a module you use bind:this={varname} on the component to save an instance of its controller
 
-Navigate to [localhost:5000](http://localhost:5000)
+- controllable store is a reactive store that allows subscribtion to a module and execute a callback 
 
 ## Development
 
 1. Clone this repo: `git clone https://github.com/ryu-man/svantic.git`
 2. Install dependencies: `npm i`
 3. Start building fomantic: `npm run build:fomantic`
-4. Start the automated build: `npm run build`
-5. Open url that console prints in your browser
 
 ## License
 

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Svelte + Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

jsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "target": "esnext",
+    "module": "esnext",
+    /**
+     * svelte-preprocess cannot figure out whether you have
+     * a value or a type, so tell TypeScript to enforce using
+     * `import type` instead of `import` for Types.
+     */
+    "importsNotUsedAsValues": "error",
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    /**
+     * To have warnings / errors of the Svelte compiler at the
+     * correct position, enable source maps by default.
+     */
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable this if you'd like to use dynamic types.
+     */
+    "checkJs": true
+  },
+  /**
+   * Use global.d.ts instead of compilerOptions.types
+   * to avoid limiting type declarations.
+   */
+  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}