|
1 | 1 | # ValueFlows UI |
2 | 2 |
|
3 | | -VF-UI aims to create a suite of user interface components which can support the rapid iteration and deployment of distributed social and economic coordination apps. |
4 | | - |
5 | | -We achieve this by building to the [ValueFlows GraphQL protocol](https://github.com/valueflows/vf-graphql/) - a universal language for resource coordination problems, capable of describing any physical or intangible interaction. This makes VF-UI components both use-case and backend-agnostic, and applicable to a wide variety of scenarios. |
6 | | - |
7 | | -<!-- MarkdownTOC --> |
8 | | - |
9 | | -- [Development setup](#development-setup) |
10 | | - - [Project initialisation](#project-initialisation) |
11 | | - - [Editor setup](#editor-setup) |
12 | | - - [Sublime Text](#sublime-text) |
13 | | - - [VSCode](#vscode) |
14 | | -- [Related documentation](#related-documentation) |
15 | | -- [Project structure](#project-structure) |
16 | | -- [License](#license) |
17 | | - |
18 | | -<!-- /MarkdownTOC --> |
19 | | - |
20 | | - |
21 | | -## Development setup |
22 | | - |
23 | | -### Project initialisation |
24 | | - |
25 | | -- Install Nix: |
26 | | - ``` |
27 | | - curl https://nixos.org/nix/install | sh |
28 | | - ``` |
29 | | -- Clone the repository |
30 | | -- Run `nix-shell` from this directory to ensure the correct tooling is available |
31 | | -- Run `yarn` or `npm i` to install all dependencies |
32 | | - |
33 | | -Now you can use `npm run storybook` to load up the live development view. |
34 | | - |
35 | | -### Editor setup |
36 | | - |
37 | | -This project is configured with [eslint](https://eslint.org/) for linting the [Svelte]() views. Editor setup requires a few extra steps: |
38 | | - |
39 | | -#### Sublime Text |
40 | | - |
41 | | -1. Install the `Svelte` package from Package Control |
42 | | -2. Ensure the `SublimeLinter` and `SublimeLinter-contrib-eslint` packages are also installed |
43 | | -3. Set the following configuration for the `eslint` linter under **Preferences: SublimeLinter Settings**: |
44 | | - |
45 | | -```json |
46 | | -{ |
47 | | - "@disable": false, |
48 | | - "selector": "source.js,text.html.svelte", |
49 | | - "args": |
50 | | - [ |
51 | | - ], |
52 | | - "excludes": |
53 | | - [ |
54 | | - "*/node_modules/**" |
55 | | - ] |
56 | | -} |
57 | | -``` |
58 | | - |
59 | | -The key element is `selector`, which must have the svelte source type added to it in order to trigger linting. |
60 | | - |
61 | | -#### VSCode |
62 | | - |
63 | | -TBC |
64 | | - |
65 | | - |
66 | | - |
67 | | - |
68 | | - |
69 | | -## Related documentation |
70 | | - |
71 | | -These are important API references and resources that developers of this repository will likely need to refer back to often. |
72 | | - |
73 | | -- **Component framework:** |
74 | | - - Official [Svelte documentation](https://svelte.dev/docs) |
75 | | -- **Component styles:** |
76 | | - - [CSS-preset-env](https://preset-env.cssdb.org/features) feature reference. Note that we only target `stage 2+`. |
77 | | -- **Testing:** |
78 | | - - We use [Jest](https://jestjs.io/docs/en/) and its [expect API](https://jestjs.io/docs/en/expect.html) for test assertions. |
79 | | - - [@testing-library/svelte API](https://testing-library.com/docs/svelte-testing-library/api) is used to handle component test rendering. *(It serves the same function that Enzyme does in React projects.)* |
80 | | - - [storybook-addon-specifications](https://www.npmjs.com/package/storybook-addon-specifications) manages the integration between Jest and Storybook. |
81 | | - |
82 | | - |
83 | | - |
84 | | - |
85 | | - |
86 | | -## Project structure |
87 | | - |
88 | | -- `src/` contains the component source files and Storybook tests: |
89 | | - - Components are laid out using the [React Fractal](https://hackernoon.com/fractal-a-react-app-structure-for-infinite-scale-4dab943092af) pattern. |
90 | | - - All components include storybook scenario tests and markdown usage notes. |
91 | | - |
92 | | - |
93 | | - |
| 3 | +**vf-ui has moved to https://lab.allmende.io/valueflows/vf-ui** |
94 | 4 |
|
95 | 5 | ## License |
96 | 6 |
|
|
0 commit comments