├── .babelrc ├── .editorconfig ├── .github └── workflows │ └── publish.yml ├── .gitignore ├── .npmignore ├── .prettierrc ├── .storybook ├── config.js ├── global.css ├── main.js ├── manager-head.html ├── theme.js └── webpack.config.js ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── images │ └── logo.png ├── src ├── components │ ├── grid │ │ ├── Grid.story.js │ │ └── Grid.tsx │ ├── html │ │ ├── Html.story.js │ │ └── Html.tsx │ ├── lazyImage │ │ ├── LazyImage.story.js │ │ └── LazyImage.tsx │ ├── modal │ │ ├── Modal.story.js │ │ └── Modal.tsx │ ├── pagination │ │ ├── Pagination.story.js │ │ └── Pagination.tsx │ ├── snackbar │ │ ├── Snackbar.story.js │ │ └── Snackbar.tsx │ └── stickynav │ │ ├── Stickynav.story.js │ │ └── Stickynav.tsx ├── core │ ├── Core.tsx │ └── CorePreact.tsx ├── library.ts ├── storybook │ ├── Code.js │ ├── Description.js │ ├── Example.js │ ├── FullWidth.js │ ├── Hero.js │ ├── ImportPath.js │ ├── Page.js │ ├── config.js │ ├── lipsum.js │ └── styles │ │ └── prism.css └── welcome │ ├── Welcome.js │ └── welcome.story.js └── tsconfig.json /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-typescript", "@babel/preset-env", "@babel/preset-react"], 3 | "plugins": [ 4 | [ 5 | "prismjs", 6 | { 7 | "languages": ["javascript", "css", "typescript", "jsx"], 8 | "plugins": ["line-numbers"], 9 | "theme": "okaidia", 10 | "css": true 11 | } 12 | ] 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | quote_type = "single" -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean install of node dependencies and build the source code 2 | # When the workflow succeeds the package will be published 3 | 4 | name: Publish 5 | 6 | on: 7 | push: 8 | branches: 9 | - master 10 | 11 | jobs: 12 | release: 13 | runs-on: ubuntu-latest 14 | 15 | steps: 16 | - uses: actions/checkout@v2 17 | - uses: actions/setup-node@v1 18 | with: 19 | node-version: 12 20 | registry-url: https://registry.npmjs.org/ 21 | - run: npm ci 22 | - run: npm run build-storybook 23 | - name: Upload ftp 24 | uses: sebastianpopp/ftp-action@releases/v2 25 | with: 26 | host: ${{ secrets.FTP_SERVER }} 27 | user: ${{ secrets.FTP_USERNAME }} 28 | password: ${{ secrets.FTP_PASSWORD }} 29 | localDir: ".out" 30 | remoteDir: "storybook" 31 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /dist 3 | /lib 4 | /types 5 | /build 6 | /components 7 | /core 8 | .out 9 | 10 | .idea 11 | .DS_Store 12 | 13 | # Microbundle directories 14 | .rts2_cache_cjs 15 | .rts2_cache_es 16 | .rts2_cache_umd 17 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | public 3 | src 4 | .out 5 | .storybook 6 | .gitignore 7 | .rts2_cache_cjs 8 | .rts2_cache_es 9 | .rts2_cache_modern 10 | .rts2_cache_umd -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "singleQuote": true, 4 | "printWidth": 100, 5 | "tabWidth": 2 6 | } 7 | -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { configure, addParameters } from '@storybook/react'; 3 | import { setPragma } from 'goober'; 4 | import theme from './theme'; 5 | import './global.css'; 6 | 7 | setPragma(React.createElement); 8 | 9 | addParameters({ 10 | options: { 11 | theme, 12 | showPanel: false, 13 | isToolshown: false, 14 | panelPosition: 'right', 15 | }, 16 | }); 17 | 18 | function loadStories() { 19 | // put welcome screen at the top of the list so it's the first one displayed 20 | require('../src/welcome/welcome.story'); 21 | 22 | const req = require.context('../src', true, /\.story\.js$/); 23 | req.keys().forEach(filename => req(filename)); 24 | } 25 | 26 | configure(loadStories, module); 27 | -------------------------------------------------------------------------------- /.storybook/global.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-size: 16px; 3 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, 4 | Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 5 | margin: 0; 6 | } 7 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | addons: ['@storybook/preset-typescript'], 3 | }; 4 | -------------------------------------------------------------------------------- /.storybook/manager-head.html: -------------------------------------------------------------------------------- 1 | Domparty Component Library 2 | 3 | 4 | 5 | 9 | 10 | 11 | 15 | 16 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /.storybook/theme.js: -------------------------------------------------------------------------------- 1 | import { create } from '@storybook/theming'; 2 | 3 | const light = '#FFFFFF'; 4 | const primary = 'black'; 5 | const secondary = '#C295D8'; 6 | 7 | export default create({ 8 | base: 'light', 9 | 10 | colorPrimary: primary, 11 | colorSecondary: secondary, 12 | 13 | // UI 14 | appBg: '#000000', 15 | appContentBg: '#000000', 16 | appBorderColor: light, 17 | appBorderRadius: 0, 18 | 19 | // Text colors 20 | textColor: '#ffffff', 21 | textInverseColor: '#343434', 22 | 23 | // Typography 24 | fontBase: 25 | '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif', 26 | 27 | // Toolbar default and active colors 28 | barTextColor: primary, 29 | barSelectedColor: secondary, 30 | barBg: 'black', 31 | 32 | // Form colors 33 | inputBg: 'white', 34 | inputBorder: 'silver', 35 | inputTextColor: '#ffffff', 36 | inputBorderRadius: 4, 37 | 38 | brandTitle: '@domparty/fe', 39 | brandUrl: 'https://github.com/domparty/component-library', 40 | brandImage: '/images/logo.png', 41 | }); 42 | -------------------------------------------------------------------------------- /.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | // Export a function. Accept the base config as the only param. 4 | module.exports = async ({ config, mode }) => { 5 | // Remove the existing css rule 6 | config.module.rules = config.module.rules.filter( 7 | f => f.test.toString() !== '/\\.css$/' 8 | ); 9 | 10 | // Make whatever fine-grained changes you need 11 | config.module.rules.push({ 12 | test: /\.css$/, 13 | loaders: ['style-loader', 'css-loader'], 14 | include: path.resolve(__dirname, '../'), 15 | }); 16 | 17 | // Return the altered config 18 | return config; 19 | }; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Domparty - Component library 2 | 3 | A white label component library, ready for you to style. Unbiased on how styling should look on your 4 | website, while giving you the handles to kick-start you application with some helpful functional components. 5 | 6 | ## Instructions 7 | 8 | Install the component library using `npm i @domparty/fe`. This will make the library available for your project. 9 | Because @domparty/fe uses Goober internally to provide all neat CSS tricks, first implement our provider into your application. 10 | 11 | ### Using Preact? 12 | 13 | If you're more into speedy apps, we have also implemented a provider for you! Instead of importing the provider from `@domparty/fe/core`, 14 | import the provider from `@domparty/fe/core/preact`. This way your application is using the Pragma from Preact, instead of React. 15 | 16 | ### Default React apps 17 | 18 | For default React apps, the following snippet can be used. 19 | _use `import { Provider } from '@domparty/fe/core/preact';` for Preact_ 20 | 21 | ```javascript 22 | import React from 'react'; 23 | import { Provider } from '@domparty/fe/core'; 24 | 25 | export default () => ( 26 | 27 | 28 | 29 | ); 30 | ``` 31 | 32 | ### Next.js apps 33 | 34 | To implement @domparty/fe into Next.js make sure the \_app.js file implements the component. 35 | 36 | ```javascript 37 | import React from 'react'; 38 | import { Provider } from '@domparty/fe/core'; 39 | 40 | export default ({ Component, pageProps }) => ( 41 | 42 | 43 | 44 | ); 45 | ``` 46 | 47 | ## SSR (server-side rendering) 48 | 49 | To make sure all styles are rendered correctly on the server. The component library exports Goobers' `extractCss` function for you to implement. 50 | 51 | To use this feature in Next.js apps, make sure the `getInitialProps` in your \_document file uses this function. 52 | 53 | ```javascript 54 | import Document, { Head, Main, NextScript } from 'next/document'; 55 | import { extractCss } from '@domparty/fe/core'; 56 | 57 | export default class MyDocument extends Document { 58 | static getInitialProps({ renderPage }) { 59 | const page = renderPage(); 60 | 61 | // Extrach the css for each page render 62 | const css = extractCss(); 63 | return { ...page, css }; 64 | } 65 | 66 | render() { 67 | return ( 68 | 69 | 70 |