diff --git a/.vscode/extensions.json b/.vscode/extensions.json deleted file mode 100644 index bdef820..0000000 --- a/.vscode/extensions.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "recommendations": ["svelte.svelte-vscode"] -} diff --git a/README.md b/README.md index 54bca49..a5124fc 100644 --- a/README.md +++ b/README.md @@ -1,104 +1,97 @@ -*Looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)* +# Typhon UI Svelte ---- - -# svelte app - -This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template. - -To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit): - -```bash -npx degit sveltejs/template svelte-app -cd svelte-app -``` - -*Note that you will need to have [Node.js](https://nodejs.org) installed.* +_User interfaces examples via code 🎨 for **Typhon UI**_ +_**All components are built using [svelte](https://svelte.dev/) !**_ -## Get started +### 🧱 Installation Install the dependencies... ```bash -cd svelte-app -npm install +cd typhon-ui-svelte +yarn ``` ...then start [Rollup](https://rollupjs.org): ```bash -npm run dev +yarn dev ``` Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes. By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`. +--- -## Building and running in production mode +### 🔍️ Usage Example -To create an optimised version of the app: +**Available App examples, switch in src/main.ts** ⚗️ -```bash -npm run build -``` +- **MovieDB** (Needs API Key) - _AppMovieDB.svelte_ +- **NewsAPI** (Needs API Key) - _AppNews.svelte_ +- **Typhon UI**'s Components - _AppRenderComponents.svelte_ -You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com). +_This example was handwritten in [svelte](https://svelte.dev/)_ +```javascript +import App from './AppNews.svelte'; /** here */ -## Single-page app mode +const app = new App({ + target: document.body, + props: { + name: 'world', + }, +}); -By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere. +export default app; +``` -If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json: +--- -```js -"start": "sirv public --single" -``` +### 📸 Screenshots -## Using TypeScript +**NewsAPI** -This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with: +![news](images/news.PNG) -```bash -node scripts/setupTypeScript.js -``` +![news_second](images/news_second.PNG) -Or remove the script via: +**MovieDB** -```bash -rm scripts/setupTypeScript.js -``` +![movie_db_first](images/movie_db.PNG) -## Deploying to the web +![movie_db_second](images/movie_db_second.PNG) -### With [Vercel](https://vercel.com) +**Typhon UIs Components** -Install `vercel` if you haven't already: +![components](images/components.PNG) -```bash -npm install -g vercel -``` +![components_second](images/components_second.PNG) -Then, from within your project folder: +--- -```bash -cd public -vercel deploy --name my-project -``` +### 📄 Open source license -### With [surge](https://surge.sh/) +If you are creating an open source application under a license compatible with the [GNU GPL license v3](https://www.gnu.org/licenses/gpl-3.0.html), you may use `typhon-ui-svelte` under the terms of the GPLv3. -Install `surge` if you haven't already: +### 👥 Contributing -```bash -npm install -g surge -``` +[Bugs](https://github.com/qtagon/typhon-ui-svelte/issues?q=is%3Aopen+is%3Aissue+label%3Abug), [PR](https://github.com/qtagon/typhon-ui-svelte/pulls) are always appreciated. -Then, from within your project folder: +**Typhon UI** is an GPLv3-licensed open source project with its ongoing development made possible thanks to the support by the community, **_substantial contributors may get a GPLv3 free license_**. -```bash -npm run build -surge public my-project.surge.sh -``` +Flow: + +1. Fork it +2. Create your feature branch (`git checkout -b my-new-feature`) +3. Test your changes to the best of your ability. +4. Update the documentation to reflect your changes if they add or changes current functionality. +5. Commit your changes (`git commit -am 'Added some feature'`). +6. Push to the branch (`git push origin my-new-feature`) +7. Create new Pull Request + +### 📝 MIT license + +If you are looking for a GPLv3 free license, contact [me](https://github.com/dorin-musteata). diff --git a/images/.gitkeep b/images/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/images/components.PNG b/images/components.PNG new file mode 100644 index 0000000..0fc44da Binary files /dev/null and b/images/components.PNG differ diff --git a/images/components_second.PNG b/images/components_second.PNG new file mode 100644 index 0000000..81d8fb5 Binary files /dev/null and b/images/components_second.PNG differ diff --git a/images/movie_db.PNG b/images/movie_db.PNG new file mode 100644 index 0000000..470d90d Binary files /dev/null and b/images/movie_db.PNG differ diff --git a/images/movie_db_second.PNG b/images/movie_db_second.PNG new file mode 100644 index 0000000..e5af7dd Binary files /dev/null and b/images/movie_db_second.PNG differ diff --git a/images/news.PNG b/images/news.PNG new file mode 100644 index 0000000..a334000 Binary files /dev/null and b/images/news.PNG differ diff --git a/images/news_second.PNG b/images/news_second.PNG new file mode 100644 index 0000000..077d9ff Binary files /dev/null and b/images/news_second.PNG differ diff --git a/src/AppMovieDB.svelte b/src/AppMovieDB.svelte index e01afb3..46c13eb 100644 --- a/src/AppMovieDB.svelte +++ b/src/AppMovieDB.svelte @@ -4,7 +4,7 @@ /** * Instance of MovieDatabaseAPI requester */ - const MovieAPI = new API(`https://api.themoviedb.org/3/`, `API-KEY`); + const MovieAPI = new API(`https://api.themoviedb.org/3/`, `KEY`); /** * Components diff --git a/src/AppNews.svelte b/src/AppNews.svelte new file mode 100644 index 0000000..ef2de74 --- /dev/null +++ b/src/AppNews.svelte @@ -0,0 +1,246 @@ + + + +{#each dynamic.getComponents('modal') as component (component.identifier)} + +{/each} + + +
+ + {#each dynamic.getColumns() as column (column.identifier)} +
+ + + + {#each column.getRows() as row (row.identifier)} +
+ + + + {#each row.getContainers() as container (container.identifier)} +
+ + + + {#each container.getComponents() as component (component.identifier)} + + + {/each} + +
+ {/each} + +
+ {/each} + +
+ {/each} +
+ + + diff --git a/src/core/components/Button.svelte b/src/core/components/Button.svelte index 5599521..ad44cca 100644 --- a/src/core/components/Button.svelte +++ b/src/core/components/Button.svelte @@ -21,6 +21,7 @@ export let type: string = 'button'; export let identifier: string = ''; export let classified: string = ''; + export let style: string = ''; export let icon: Icon; export let alignment: ALIGNMENT = ALIGNMENT.NONE; export let size: SIZE = SIZE.NONE; @@ -47,20 +48,22 @@ }; - - + + diff --git a/src/core/components/Card.svelte b/src/core/components/Card.svelte index f3eec95..0ce626b 100644 --- a/src/core/components/Card.svelte +++ b/src/core/components/Card.svelte @@ -25,6 +25,7 @@ export let title: string = ''; export let subtitle: string = ''; export let classified: string = ''; + export let style: string = ''; export let images: Array = []; export let media: Media; export let actions: Array = []; @@ -134,7 +135,7 @@ } -
+
{#if placeholder} {/if} diff --git a/src/core/components/Image.svelte b/src/core/components/Image.svelte index 37cfa53..b6a2cbb 100644 --- a/src/core/components/Image.svelte +++ b/src/core/components/Image.svelte @@ -9,6 +9,24 @@ export let position: POSITION = POSITION.NONE; +
+ + {title + +
+ - -
- - {title - -
diff --git a/src/core/components/Media.svelte b/src/core/components/Media.svelte index 8854bc7..7a0631f 100644 --- a/src/core/components/Media.svelte +++ b/src/core/components/Media.svelte @@ -1,15 +1,20 @@ +
+ {#if placeholder} + + {/if} + {#if image} + + {/if} + {#if title || subtitle || description} +
+
{title}
+
{subtitle}
+
{description}
+
+ {/if} + {#if actions.length} +
+ {#each actions as action} + + {/each} + {#if buttons.length} + {#each buttons as button} + + {/each} + {/if} +
+ {/if} +
+ - -
- {#if placeholder} - - {/if} - {#if image} - - {/if} - {#if title || subtitle || description} -
-
{title}
-
{subtitle}
-
{description}
-
- {/if} - {#if actions.length} -
- {#each actions as action} - - {/each} -
- {/if} -
diff --git a/src/core/components/scss/constraints.scss b/src/core/components/scss/constraints.scss index 1be1e32..6af96aa 100644 --- a/src/core/components/scss/constraints.scss +++ b/src/core/components/scss/constraints.scss @@ -6,6 +6,10 @@ background: #ffffff; } +.background-black { + background: #000000; +} + .round { border-radius: 0.75rem; } diff --git a/src/core/utils/api.request.ts b/src/core/utils/api.request.ts index 449fcd5..cd9ddf3 100644 --- a/src/core/utils/api.request.ts +++ b/src/core/utils/api.request.ts @@ -8,7 +8,7 @@ export default class API { } parameters(params: any = {}) { - const object = { ...params, api_key: this.key }; + const object = { ...params, api_key: this.key, apiKey: this.key }; return new URLSearchParams(object).toString(); } diff --git a/src/main.ts b/src/main.ts index 6d8ab19..5b3f7c1 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,4 +1,4 @@ -import App from './AppMovieDB.svelte'; +import App from './AppNews.svelte'; const app = new App({ target: document.body,