├── .babelrc ├── .cz-config.js ├── .eslintignore ├── .eslintrc.js ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── component-request.md └── workflows │ ├── release.yml │ └── test.yml ├── .gitignore ├── .npmignore ├── .storybook ├── main.js └── preview.js ├── .vscode └── settings.json ├── LICENSE ├── README.md ├── commitlint.config.js ├── cypress.json ├── cypress ├── components │ ├── Text.spec.tsx │ └── system.spec.tsx ├── fixtures │ └── example.json ├── plugins │ └── index.ts └── support │ ├── commands.ts │ └── index.ts ├── docs ├── .eslintrc.js ├── .prettierignore ├── LICENSE ├── README.md ├── components │ ├── CodeSnippet.tsx │ ├── ColorTag.tsx │ ├── CopyButton.tsx │ ├── LinkSection.tsx │ ├── UtilityTable.tsx │ ├── callout.tsx │ ├── homepage-components │ │ ├── DocSearch.tsx │ │ ├── Footer.tsx │ │ ├── HomeBody.tsx │ │ ├── Layout.tsx │ │ ├── Nav.tsx │ │ └── TableExample.tsx │ └── theme-builder │ │ ├── AppContext.tsx │ │ ├── ColorTag.tsx │ │ ├── Editor.tsx │ │ ├── Inspector.tsx │ │ ├── LayoutEditor.tsx │ │ ├── ThemeBuilder.tsx │ │ ├── ThemeModal.tsx │ │ ├── UtilityTable.tsx │ │ ├── examples.tsx │ │ └── utils.ts ├── global.css ├── next-env.d.ts ├── next.config.js ├── package.json ├── pages │ ├── _app.tsx │ ├── _document.tsx │ ├── about.tsx │ ├── change-log.mdx │ ├── components │ │ ├── Accordion.mdx │ │ ├── Alert.mdx │ │ ├── Box.mdx │ │ ├── Button.mdx │ │ ├── Checkbox.mdx │ │ ├── Combobox.mdx │ │ ├── Drawer.mdx │ │ ├── Heading.mdx │ │ ├── Icon.mdx │ │ ├── Image.mdx │ │ ├── Input.mdx │ │ ├── InputField.mdx │ │ ├── Link.mdx │ │ ├── Menu.mdx │ │ ├── Modal.mdx │ │ ├── Radio.mdx │ │ ├── Select.mdx │ │ ├── Skeleton.mdx │ │ ├── Spinner.mdx │ │ ├── Stack.mdx │ │ ├── Switch.mdx │ │ ├── Table.mdx │ │ ├── Tabs.mdx │ │ ├── Tag.mdx │ │ ├── TagsInput.mdx │ │ ├── Text.mdx │ │ └── Tooltip.mdx │ ├── examples │ │ ├── Alerts.mdx │ │ ├── Buttons.mdx │ │ ├── Cards.mdx │ │ ├── Forms.mdx │ │ ├── Modals.mdx │ │ └── Navigation.mdx │ ├── homepage.tsx │ ├── index.mdx │ ├── meta.json │ ├── overview │ │ ├── concepts.mdx │ │ ├── meta.json │ │ ├── responsive-styling.mdx │ │ ├── theming.mdx │ │ └── utility-props.mdx │ ├── theme-builder.tsx │ └── utilities │ │ ├── Colors.mdx │ │ ├── FontSizes.mdx │ │ ├── Layout.mdx │ │ ├── Shadows.mdx │ │ ├── useClipboard.mdx │ │ ├── useDisclosure.mdx │ │ ├── useLocalStorage.mdx │ │ ├── useMedia.mdx │ │ └── useNetwork.mdx ├── public │ ├── about_minerva_logo.png │ ├── aboutpage_example.png │ ├── coffee.png │ ├── demo.png │ ├── ellipsis.png │ ├── explore_icon.svg │ ├── fonts │ │ ├── TiemposHeadline-Black.otf │ │ ├── TiemposHeadline-BlackItalic.otf │ │ ├── TiemposHeadline-Bold.otf │ │ ├── TiemposHeadline-BoldItalic.otf │ │ ├── TiemposHeadline-Light.otf │ │ ├── TiemposHeadline-LightItalic.otf │ │ ├── TiemposHeadline-Medium.otf │ │ ├── TiemposHeadline-MediumItalic.otf │ │ ├── TiemposHeadline-Regular.otf │ │ ├── TiemposHeadline-RegularItalic.otf │ │ ├── TiemposHeadline-Semibold.otf │ │ └── TiemposHeadline-SemiboldItalic.otf │ ├── github_logo.png │ ├── homepage_example.png │ ├── install_icon.svg │ ├── jonathan_profile.png │ ├── minerva_logo_purple.png │ ├── minerva_logo_white.png │ ├── mountain_sky.png │ ├── owl.png │ ├── starry_sky.jpeg │ ├── tim_profile.png │ ├── trust_icon.svg │ ├── unsplash.jpeg │ └── wood_sky.jpeg ├── theme.config.js ├── theme │ ├── arrow-right.tsx │ ├── callout.tsx │ ├── github-icon.tsx │ ├── index.js │ ├── misc │ │ ├── default.config.js │ │ └── theme.tsx │ ├── search.tsx │ ├── styles.css │ └── utils │ │ ├── flatten.ts │ │ └── reorder.ts ├── tsconfig.json ├── types.d.ts └── yarn.lock ├── example ├── .npmignore ├── index.html ├── index.tsx ├── package.json ├── tsconfig.json └── yarn.lock ├── lerna.json ├── package.json ├── register.js ├── src ├── Accordion │ ├── Accordion.stories.tsx │ └── index.tsx ├── Alert │ ├── Alert.stories.tsx │ └── index.tsx ├── Box.stories.tsx ├── Button │ ├── Button.stories.tsx │ └── index.tsx ├── Checkbox │ ├── Checkbox.stories.tsx │ └── index.tsx ├── CodeBlock.tsx ├── Combobox │ ├── Combobox.stories.tsx │ └── index.tsx ├── Drawer │ ├── Drawer.stories.tsx │ └── index.tsx ├── GlobalStyles.tsx ├── Heading │ ├── Heading.stories.tsx │ └── index.tsx ├── Icon │ ├── Icon.stories.mdx │ ├── baseIcons.tsx │ └── index.tsx ├── Image │ ├── Image.stories.tsx │ └── index.tsx ├── Input │ ├── Input.stories.tsx │ └── index.tsx ├── InputField │ ├── InputField.stories.mdx │ └── index.tsx ├── Link │ ├── Link.stories.tsx │ └── index.tsx ├── Menu │ ├── Menu.stories.tsx │ └── index.tsx ├── Modal │ ├── Modal.stories.tsx │ └── index.tsx ├── PseudoBox │ ├── PseudoBox.stories.mdx │ └── index.tsx ├── Radio │ ├── Radio.stories.tsx │ └── index.tsx ├── Select │ ├── Select.stories.tsx │ └── index.tsx ├── Skeleton │ ├── Skeleton.stories.mdx │ └── index.tsx ├── Spinner │ ├── Spinner.stories.mdx │ └── index.tsx ├── Stack │ ├── Stack.stories.tsx │ └── index.tsx ├── Switch │ ├── Switch.stories.mdx │ └── index.tsx ├── Table │ ├── Table.stories.tsx │ └── index.tsx ├── Tabs │ ├── Tabs.stories.mdx │ ├── Tabs.stories.tsx │ └── index.tsx ├── Tag │ ├── Tag.stories.mdx │ └── index.tsx ├── Text │ ├── Text.stories.tsx │ └── index.tsx ├── ThemeProvider.tsx ├── Tooltip │ ├── Tooltip.stories.mdx │ └── index.tsx ├── VisuallyHidden │ └── index.tsx ├── hooks │ └── useClipboard.ts ├── index.d.ts ├── index.tsx ├── layout.tsx ├── tailwind-theme-ui.json ├── theme.ts ├── type-utilities.tsx ├── types.tsx ├── useClipboard │ └── index.tsx ├── useDisclosure │ └── index.tsx ├── useLocalStorage │ └── index.tsx ├── useMedia │ └── index.tsx ├── useNetwork │ └── index.tsx ├── utilities │ ├── BorderRadius.stories.mdx │ ├── FontSizes.stories.tsx │ ├── Layout.stories.mdx │ ├── Shadows.stories.mdx │ └── polymorphic.tsx └── utils.ts ├── stories ├── 0-Welcome.stories.mdx ├── 1-Theming.stories.mdx └── 2-Utilities.stories.mdx ├── test ├── GlobalStyles.test.tsx ├── __mocks__ │ └── styleMock.js ├── __snapshots__ │ ├── GlobalStyles.test.tsx.snap │ ├── accordion.test.tsx.snap │ ├── alert.test.tsx.snap │ ├── button.test.tsx.snap │ ├── checkbox.test.tsx.snap │ ├── combobox.test.tsx.snap │ ├── heading.test.tsx.snap │ ├── hooks.test.tsx.snap │ ├── icon.test.tsx.snap │ ├── input.test.tsx.snap │ ├── inputField.test.tsx.snap │ ├── link.test.tsx.snap │ ├── menu.test.tsx.snap │ ├── select.test.tsx.snap │ ├── skeleton.test.tsx.snap │ ├── stack.test.tsx.snap │ ├── tab.test.tsx.snap │ ├── table.test.tsx.snap │ ├── tag.test.tsx.snap │ ├── tagsInput.test.tsx.snap │ ├── text.test.tsx.snap │ └── utilities.test.tsx.snap ├── accordion.test.tsx ├── alert.test.tsx ├── button.test.tsx ├── checkbox.test.tsx ├── combobox.test.tsx ├── drawer.test.tsx ├── heading.test.tsx ├── hooks.test.tsx ├── icon.test.tsx ├── input.test.tsx ├── inputField.test.tsx ├── layout.test.tsx ├── link.test.tsx ├── menu.test.tsx ├── modal.test.tsx ├── radio.test.tsx ├── select.test.tsx ├── setup.ts ├── skeleton.test.tsx ├── stack.test.tsx ├── switch.test.tsx ├── system.test.tsx ├── tab.test.tsx ├── table.test.tsx ├── tag.test.tsx ├── tagsInput.test.tsx ├── text.test.tsx ├── tooltip.test.tsx └── utilities.test.tsx ├── tsconfig.json ├── types ├── index.d.ts └── jest-styled-components.d.ts ├── utils ├── ColorTag.tsx └── UtilityTable.tsx ├── vite.config.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "babel-plugin-styled-components" 4 | ] 5 | } -------------------------------------------------------------------------------- /.cz-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | types: [ 3 | { value: 'feat', name: 'feat: A new feature' }, 4 | { value: 'fix', name: 'fix: A bug fix' }, 5 | { value: 'revert', name: 'revert: Revert to a commit' }, 6 | { value: 'WIP', name: 'WIP: Work in progress' }, 7 | ], 8 | 9 | allowTicketNumber: false, 10 | isTicketNumberRequired: false, 11 | 12 | allowCustomScopes: false, 13 | allowBreakingChanges: ['feat', 'fix'], 14 | // skip any questions you want 15 | skipQuestions: ['body', 'scope', 'footer'], 16 | 17 | // limit subject length 18 | subjectLimit: 100, 19 | }; -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | docs/node_modules 2 | docs/build 3 | docs/.docusaurus 4 | theme-builder/node_modules 5 | theme-builder/.next 6 | node_modules 7 | coverage 8 | dist 9 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ["cratebind", "react-app", "prettier/@typescript-eslint", "plugin:prettier/recommended", "plugin:mdx/recommended", "plugin:storybook/recommended"], 3 | rules: { 4 | 'import/no-unresolved': [2, { 5 | ignore: ['minerva-ui', '@docusaurus', '@theme'] 6 | }], 7 | "import/no-unused-modules": [1, { 8 | "unusedExports": true 9 | }], 10 | 'react/display-name': 0, 11 | 'react/react-in-jsx-scope': 0, 12 | }, 13 | settings: { 14 | "import/resolver": { 15 | "node": { 16 | "extensions": [".js", ".jsx", ".ts", ".tsx", ".mdx"], 17 | moduleDirectory: ['node_modules', 'src/'] 18 | }, 19 | "typescript": {} 20 | } 21 | } 22 | }; -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/component-request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Component Request 3 | about: Suggest a new component for this project 4 | title: '' 5 | labels: enhancement 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Component Name** 11 | 12 | 13 | **Component Description** 14 | 15 | **Component Features** 16 | - A list of component features 17 | 18 | **Additional context** 19 | Add any other context or screenshots about the feature request here. 20 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | on: 3 | push: 4 | branches: 5 | - master 6 | jobs: 7 | release: 8 | name: Release 9 | runs-on: ubuntu-22.04 10 | steps: 11 | - name: Checkout 12 | uses: actions/checkout@v1 13 | - name: Setup Node.js 14 | uses: actions/setup-node@v1 15 | with: 16 | node-version: 12 17 | - name: Install dependencies 18 | run: yarn install 19 | - name: Build Package 20 | run: yarn build 21 | - name: Release 22 | env: 23 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 24 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 25 | run: npx semantic-release 26 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: Test 2 | 3 | on: [push] 4 | 5 | jobs: 6 | build: 7 | 8 | runs-on: ubuntu-latest 9 | 10 | steps: 11 | - uses: actions/checkout@v1 12 | - name: Install and Run Tests 13 | run: | 14 | yarn install 15 | yarn build 16 | yarn test 17 | env: 18 | CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }} 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | .DS_Store 3 | node_modules 4 | docs/node_modules 5 | .cache 6 | .rts2_cache_cjs 7 | .rts2_cache_esm 8 | .rts2_cache_umd 9 | .rts2_cache_system 10 | dist 11 | storybook-static 12 | coverage/ 13 | 14 | # Production 15 | .next 16 | .vercel 17 | docs/.next 18 | docs/.vercel 19 | docs/node_modules 20 | .DS_Store 21 | 22 | # Generated files 23 | .docusaurus 24 | .cache-loader 25 | 26 | .tsbuildinfo 27 | 28 | # cypress 29 | cypress/videos 30 | cypress/screenshots -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | system-builder 2 | example 3 | docs -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | 3 | module.exports = { 4 | stories: ['../src/**/*.stories.@(ts|tsx|js|jsx)', '../stories/**/*.stories.@(ts|tsx|js|jsx)'], 5 | addons: ['@storybook/addon-links', '@storybook/addon-essentials'], 6 | typescript: { 7 | check: false, // type-check stories during Storybook build 8 | }, 9 | webpackFinal: async (config) => { 10 | // allow __DEV__ macro to be used 11 | config.plugins.push( 12 | new webpack.DefinePlugin({ 13 | '__DEV__': process.env.NODE_ENV === 'development' 14 | }) 15 | ); 16 | 17 | return config; 18 | }, 19 | reactOptions: { 20 | // fastRefresh: true, 21 | strictMode: true, 22 | }, 23 | } -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | addParameters, 4 | addDecorator 5 | } from '@storybook/react'; 6 | // import CodeBlock from '../src/CodeBlock'; 7 | import { GlobalStyles, ThemeProvider, Heading, defaultIcons, defaultTheme } from '../src'; 8 | 9 | // const h1 = (props) => 10 | 11 | addParameters({ 12 | docs: { 13 | components: { 14 | // code: CodeBlock, 15 | // h1 16 | }, 17 | }, 18 | }); 19 | 20 | export const ProviderWithIcons = props => ( 21 | 22 | ); 23 | 24 | addDecorator(storyFn => ( 25 | <> 26 | 27 | 28 | {storyFn()} 29 | 30 | 31 | )); 32 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.packageManager": "yarn", 3 | "eslint.lintTask.options": ". --ext .tsx,.ts", 4 | "eslint.alwaysShowStatus": true, 5 | "eslint.lintTask.enable": true 6 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Matt Wood 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { extends: ['@commitlint/config-conventional'] }; 2 | -------------------------------------------------------------------------------- /cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "componentFolder": "cypress/components", 3 | "ignoreTestFiles": [ 4 | "**/__snapshots__/*", 5 | "**/__image_snapshots__/*" 6 | ], 7 | "projectId": "rbewju" 8 | } 9 | -------------------------------------------------------------------------------- /cypress/components/Text.spec.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { mount } from '@cypress/react'; 3 | import { Text } from '../../src/Text'; 4 | 5 | function renderChildrenCheck(Component, children = 'Component Text') { 6 | it('renders children as text', () => { 7 | mount({children}); 8 | cy.get('#target').should('have.text', children); 9 | }); 10 | } 11 | 12 | describe(' component', () => { 13 | renderChildrenCheck(Text); 14 | 15 | it('passes styles to

element', () => { 16 | const styles = { 17 | color: 'red', 18 | fontSize: '20px', 19 | }; 20 | 21 | mount(Text); 22 | 23 | cy.get('p').should('have.css', 'color', 'rgb(255, 0, 0)'); 24 | cy.get('p').should('have.css', 'font-size', '20px'); 25 | }); 26 | 27 | it('renders different elements with "as" prop', () => { 28 | mount(Text); 29 | 30 | cy.get('h1').contains('Text'); 31 | }); 32 | 33 | it('allows styling through pseudo class prop _focus', () => { 34 | mount( 35 | 36 | Text 37 | 38 | ); 39 | 40 | cy.get('p') 41 | .realHover() 42 | .should('have.css', 'color', 'rgb(255, 0, 0)'); 43 | }); 44 | }); 45 | -------------------------------------------------------------------------------- /cypress/components/system.spec.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, useEffect, useState } from 'react'; 2 | import { mount } from '@cypress/react'; 3 | import { 4 | Alert, 5 | Block, 6 | Box, 7 | Button, 8 | Flex, 9 | Heading, 10 | Link, 11 | Text, 12 | } from '../../src'; 13 | // import { Text } from '../../src/Text'; 14 | // import { Box } from '../../src/layout'; 15 | 16 | const basicComponents = { 17 | Alert, 18 | Block, 19 | Box, 20 | Button, 21 | Flex, 22 | Heading, 23 | Link, 24 | Text, 25 | } as const; 26 | 27 | /** 28 | * Tests to check shared functionality between all components 29 | */ 30 | 31 | Object.entries(basicComponents).forEach(([componentName, Component]) => { 32 | describe(`<${componentName} /> component`, () => { 33 | const children = 'Component Text'; 34 | 35 | it('should render children', () => { 36 | mount({children}); 37 | cy.get('#target').should('have.text', children); 38 | }); 39 | 40 | // should pass style props 41 | it('should pass style props', () => { 42 | const color = 'rgb(255, 0, 0)'; 43 | mount( 44 | 45 | {children} 46 | 47 | ); 48 | cy.get('#target').should('have.css', 'color', color); 49 | }); 50 | 51 | // should forward ref 52 | 53 | // should pass shorthand prop 54 | 55 | // should allow "as" prop to render different elements 56 | 57 | // should not forward style props to element 58 | }); 59 | }); 60 | -------------------------------------------------------------------------------- /cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } 6 | -------------------------------------------------------------------------------- /cypress/plugins/index.ts: -------------------------------------------------------------------------------- 1 | /// 2 | // *********************************************************** 3 | // This example plugins/index.js can be used to load plugins 4 | // 5 | // You can change the location of this file or turn off loading 6 | // the plugins file with the 'pluginsFile' configuration option. 7 | // 8 | // You can read more here: 9 | // https://on.cypress.io/plugins-guide 10 | // *********************************************************** 11 | 12 | // This function is called when a project is opened or re-opened (e.g. due to 13 | // the project's config changing) 14 | 15 | const path = require('path'); 16 | const { startDevServer } = require('@cypress/vite-dev-server'); 17 | 18 | /** 19 | * @type {Cypress.PluginConfig} 20 | */ 21 | // eslint-disable-next-line no-unused-vars 22 | module.exports = (on, config) => { 23 | on('dev-server:start', options => { 24 | return startDevServer({ 25 | options, 26 | viteConfig: { 27 | configFile: path.resolve(__dirname, '..', '..', 'vite.config.js'), 28 | }, 29 | }); 30 | }); 31 | }; 32 | -------------------------------------------------------------------------------- /cypress/support/commands.ts: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add('login', (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This will overwrite an existing command -- 25 | // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) 26 | -------------------------------------------------------------------------------- /cypress/support/index.ts: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | // @ts-ignore 18 | // eslint-disable-next-line import/no-unresolved 19 | import 'cypress-real-events/support'; 20 | // @ts-ignore 21 | import './commands'; 22 | 23 | // Alternatively you can use CommonJS syntax: 24 | // require('./commands') 25 | -------------------------------------------------------------------------------- /docs/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | 'cratebind', 4 | // 'react-app', 5 | // 'prettier/@typescript-eslint', 6 | // 'plugin:prettier/recommended', 7 | // 'plugin:mdx/recommended', 8 | // 'plugin:storybook/recommended', 9 | ], 10 | rules: { 11 | 'import/no-unresolved': [ 12 | 2, 13 | { 14 | ignore: ['minerva-ui', '@docusaurus', '@theme'], 15 | }, 16 | ], 17 | 'import/no-unused-modules': [ 18 | 1, 19 | { 20 | unusedExports: true, 21 | }, 22 | ], 23 | 'react/display-name': 0, 24 | 'react/react-in-jsx-scope': 0, 25 | }, 26 | settings: { 27 | 'import/resolver': { 28 | node: { 29 | extensions: ['.js', '.jsx', '.ts', '.tsx'], 30 | moduleDirectory: ['node_modules', 'src/'], 31 | }, 32 | typescript: {}, 33 | }, 34 | }, 35 | }; 36 | -------------------------------------------------------------------------------- /docs/.prettierignore: -------------------------------------------------------------------------------- 1 | .next 2 | node_modules 3 | -------------------------------------------------------------------------------- /docs/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Shu Ding 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # [Nextra](https://nextra.vercel.app) 2 | 3 | Warning: this project is not production ready, use it on your own risk. 4 | 5 | [![](https://vercel.com/button)](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fshuding%2Fnextra&c=1) 6 | 7 | **Nextra** is a [Next.js](https://nextjs.org) based documentation site generator. 0 line of code needed, just write Markdown. 8 | 9 | It supports MDX, anchor links, file-system based routing and built-in syntax highlighting. 10 | 11 | ![](/public/demo.png) 12 | 13 | ## Themes 14 | 15 | - [nextra-theme-docs](https://github.com/shuding/nextra-theme-docs) 16 | -------------------------------------------------------------------------------- /docs/components/CodeSnippet.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Box } from 'minerva-ui'; 3 | import { Code } from '../theme/misc/theme'; 4 | 5 | export default function CodeSnippet(props) { 6 | return ( 7 | 8 | 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /docs/components/ColorTag.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Block } from 'minerva-ui'; 3 | 4 | const ColorTag = ({ number, code, ...props }) => ( 5 | 500 ? '#fff' : '#000'} 11 | backgroundColor={code} 12 | {...props} 13 | /> 14 | ); 15 | 16 | export default ColorTag; 17 | -------------------------------------------------------------------------------- /docs/components/LinkSection.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Link from 'next/link'; 3 | import * as Minerva from 'minerva-ui'; 4 | 5 | const minervaComponents = Object.keys(Minerva); 6 | 7 | function validateComponentName(name: string) { 8 | if (!minervaComponents.includes(name)) { 9 | throw new Error( 10 | `"${name}" is not a valid Minerva component name. Valid component names include:\n${minervaComponents.join( 11 | '\n' 12 | )}` 13 | ); 14 | } 15 | } 16 | 17 | const getSourceUrl = (componentName: string) => { 18 | validateComponentName(componentName); 19 | 20 | return `https://github.com/cratebind/minerva-ui/blob/master/src/${componentName}/index.tsx`; 21 | }; 22 | 23 | const getDocsUrl = (componentName: string) => { 24 | validateComponentName(componentName); 25 | 26 | return `https://github.com/cratebind/minerva-ui/blob/master/docs/pages/components/${componentName}.mdx`; 27 | }; 28 | 29 | export const LinkSection = ({ component }) => { 30 | return ( 31 |

32 | {/* external anchor tag link */} 33 | 39 | View Source Code 40 | 46 | 47 | 48 | 49 | 50 | 56 | Edit This Page 57 | 58 |
59 | ); 60 | }; 61 | -------------------------------------------------------------------------------- /docs/components/UtilityTable.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Box, 4 | StyledTable, 5 | TableContainer, 6 | TableHeader, 7 | TableRow, 8 | TableHeaderCell, 9 | TableBody, 10 | TableCell, 11 | } from 'minerva-ui'; 12 | 13 | const UtilityTable = ({ themeProperty, renderValue }) => { 14 | return ( 15 | 16 | 17 | 18 | 19 | Key 20 | CSS Value 21 | Example 22 | 23 | 24 | 25 | {Object.entries(themeProperty).map(([property, value]) => ( 26 | 27 | 28 | 29 | {property} 30 | 31 | 32 | {value} 33 | {renderValue && ( 34 | {renderValue({ property, value })} 35 | )} 36 | 37 | ))} 38 | 39 | 40 | 41 | ); 42 | }; 43 | 44 | export default UtilityTable; 45 | 46 | // return ( 47 | // <> 48 | // {color} 49 | // 50 | // 51 | // ) 52 | -------------------------------------------------------------------------------- /docs/components/callout.tsx: -------------------------------------------------------------------------------- 1 | // import React from 'react'; 2 | 3 | const Callout = ({ children, background = 'bg-orange-100', emoji = '💡' }) => { 4 | return ( 5 |

6 | {emoji} 7 | {children} 8 | {/* */} 13 |

14 | ); 15 | }; 16 | 17 | // https://www.notion.so/Callout-blocks-5b2638247b54447eb2e21145f97194b0 18 | export default Callout; 19 | -------------------------------------------------------------------------------- /docs/components/homepage-components/DocSearch.tsx: -------------------------------------------------------------------------------- 1 | import { Flex, Image, styled } from 'minerva-ui'; 2 | import { DocSearch } from '@docsearch/react'; 3 | 4 | import { DOC_SEARCH_API_KEY, DOC_SEARCH_INDEX_NAME } from '../../theme/search'; 5 | import Link from 'next/link'; 6 | 7 | interface Props { 8 | secondary: number; 9 | } 10 | 11 | const DocContainer = styled(Flex)` 12 | @media (max-width: 640px) { 13 | margin-top: ${({ secondary }) => secondary && '1rem'}; 14 | width: ${({ secondary }) => secondary && '100%'}; 15 | margin-left: ${({ secondary }) => !secondary && 'auto'}; 16 | margin-right: ${({ secondary }) => !secondary && '2.5rem'}; 17 | 18 | button { 19 | margin-left: ${({ secondary }) => secondary && '0'}; 20 | width: ${({ secondary }) => secondary && '100%'}; 21 | background: ${({ secondary }) => !secondary && 'transparent !important'}; 22 | } 23 | } 24 | `; 25 | 26 | export default function DocSearchComponent({ type }: { type?: string }) { 27 | const isFooter = type === 'footer'; 28 | return ( 29 | 34 | 35 | 36 | Minerva UI Logo - with a purple owl 42 | 43 | 44 | 45 | 49 | 50 | 51 | ); 52 | } 53 | -------------------------------------------------------------------------------- /docs/components/homepage-components/Footer.tsx: -------------------------------------------------------------------------------- 1 | import { Flex, Box, Text, Link, styled } from 'minerva-ui'; 2 | import DocSearch from './DocSearch'; 3 | 4 | const StyledFooter = styled(Flex)` 5 | flex-direction: column; 6 | background: linear-gradient(180deg, #1e0654 36.3%, rgba(30, 6, 84, 0) 200%), 7 | 50% / cover no-repeat url(wood_sky.jpeg); 8 | opacity: 0.85; 9 | @media (max-width: 640px) { 10 | padding: 80px 24px 25px 24px; 11 | } 12 | `; 13 | 14 | const SubLink = styled(Link)` 15 | color: #8e82a9; 16 | text-decoration: none; 17 | cursor: pointer; 18 | `; 19 | 20 | type SubLinksType = { 21 | name: string; 22 | href: string; 23 | }; 24 | 25 | type LinkType = { 26 | title: string; 27 | links: SubLinksType[]; 28 | }; 29 | 30 | const FOOTER_LINKS: LinkType[] = [ 31 | { 32 | title: 'Use Minuerva', 33 | links: [ 34 | { name: 'Installation', href: '/' }, 35 | { name: 'Documentation', href: '/' }, 36 | { name: 'Release Notes', href: '/' }, 37 | ], 38 | }, 39 | { 40 | title: 'Community', 41 | links: [], 42 | }, 43 | { 44 | title: 'About', 45 | links: [], 46 | }, 47 | { 48 | title: 'Contact Us', 49 | links: [], 50 | }, 51 | ]; 52 | 53 | export default function Footer() { 54 | return ( 55 | 56 | 60 | 61 | 62 | {FOOTER_LINKS.map(({ title, links }) => ( 63 | 69 | 70 | {title} 71 | 72 | {links.map(({ name, href }) => ( 73 | 74 | {name} 75 | 76 | ))} 77 | 78 | ))} 79 | 80 | 81 | 82 | 83 | © {new Date().getFullYear()} CrateBind. All rights reserved. 84 | 85 | 86 | 87 | ); 88 | } 89 | -------------------------------------------------------------------------------- /docs/components/homepage-components/Layout.tsx: -------------------------------------------------------------------------------- 1 | import { Box } from 'minerva-ui'; 2 | import Nav from './Nav'; 3 | import Footer from './Footer'; 4 | 5 | import '@docsearch/css'; 6 | 7 | export default function Layout({ children }) { 8 | return ( 9 | 10 |