├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ └── new-task.md └── workflows │ ├── flutter-cd.yml │ ├── release-flutter.yml │ └── release.yml ├── .gitignore ├── .metadata ├── .prettierrc ├── .pubignore ├── .storybook ├── main.js ├── preview-head.html └── preview.js ├── .vscode └── settings.json ├── @types └── styled-jsx.d.ts ├── CHANGELOG.md ├── LICENSE ├── README.md ├── analysis_options.yaml ├── android ├── .gitignore ├── app │ ├── build.gradle │ └── src │ │ ├── debug │ │ └── AndroidManifest.xml │ │ ├── main │ │ ├── AndroidManifest.xml │ │ ├── kotlin │ │ │ └── dev │ │ │ │ └── skynexui │ │ │ │ └── components │ │ │ │ └── MainActivity.kt │ │ └── res │ │ │ ├── drawable-v21 │ │ │ └── launch_background.xml │ │ │ ├── drawable │ │ │ └── launch_background.xml │ │ │ ├── mipmap-hdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-mdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxxhdpi │ │ │ └── ic_launcher.png │ │ │ ├── values-night │ │ │ └── styles.xml │ │ │ └── values │ │ │ └── styles.xml │ │ └── profile │ │ └── AndroidManifest.xml ├── build.gradle ├── components_android.iml ├── gradle.properties ├── gradle │ └── wrapper │ │ └── gradle-wrapper.properties └── settings.gradle ├── components.iml ├── docs ├── docs.json ├── next-env.d.ts ├── next.config.js ├── package.json ├── pages │ ├── _app.tsx │ ├── components │ │ ├── box.mdx │ │ ├── button.mdx │ │ ├── griddisplay.mdx │ │ ├── icon.mdx │ │ ├── image.mdx │ │ ├── meta.json │ │ ├── provider.mdx │ │ ├── text.mdx │ │ └── textfield.mdx │ ├── index.mdx │ ├── meta.json │ └── theme │ │ ├── breakpoints.mdx │ │ ├── colors.mdx │ │ ├── generator.mdx │ │ ├── meta.json │ │ ├── space.mdx │ │ ├── theme.mdx │ │ └── typography.mdx ├── scripts │ └── docs │ │ ├── _app.tsx │ │ ├── defaults.tsx │ │ ├── generator.js │ │ └── metadata │ │ ├── breakpoints.json │ │ ├── colors.json │ │ ├── stylesheet.json │ │ └── typography.json ├── theme.config.js ├── tsconfig.json └── yarn.lock ├── examples └── demo_base │ ├── .gitignore │ ├── .metadata │ ├── README.md │ ├── analysis_options.yaml │ ├── android │ ├── .gitignore │ ├── app │ │ ├── build.gradle │ │ └── src │ │ │ ├── debug │ │ │ └── AndroidManifest.xml │ │ │ ├── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── kotlin │ │ │ │ └── com │ │ │ │ │ └── example │ │ │ │ │ └── demo_base │ │ │ │ │ └── MainActivity.kt │ │ │ └── res │ │ │ │ ├── drawable-v21 │ │ │ │ └── launch_background.xml │ │ │ │ ├── drawable │ │ │ │ └── launch_background.xml │ │ │ │ ├── mipmap-hdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xxxhdpi │ │ │ │ └── ic_launcher.png │ │ │ │ ├── values-night │ │ │ │ └── styles.xml │ │ │ │ └── values │ │ │ │ └── styles.xml │ │ │ └── profile │ │ │ └── AndroidManifest.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ └── gradle-wrapper.properties │ └── settings.gradle │ ├── ios │ ├── .gitignore │ ├── Flutter │ │ ├── AppFrameworkInfo.plist │ │ ├── Debug.xcconfig │ │ └── Release.xcconfig │ ├── Runner.xcodeproj │ │ ├── project.pbxproj │ │ ├── project.xcworkspace │ │ │ ├── contents.xcworkspacedata │ │ │ └── xcshareddata │ │ │ │ ├── IDEWorkspaceChecks.plist │ │ │ │ └── WorkspaceSettings.xcsettings │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ └── Runner.xcscheme │ ├── Runner.xcworkspace │ │ ├── contents.xcworkspacedata │ │ └── xcshareddata │ │ │ ├── IDEWorkspaceChecks.plist │ │ │ └── WorkspaceSettings.xcsettings │ └── Runner │ │ ├── AppDelegate.swift │ │ ├── Assets.xcassets │ │ ├── AppIcon.appiconset │ │ │ ├── Contents.json │ │ │ ├── Icon-App-1024x1024@1x.png │ │ │ ├── Icon-App-20x20@1x.png │ │ │ ├── Icon-App-20x20@2x.png │ │ │ ├── Icon-App-20x20@3x.png │ │ │ ├── Icon-App-29x29@1x.png │ │ │ ├── Icon-App-29x29@2x.png │ │ │ ├── Icon-App-29x29@3x.png │ │ │ ├── Icon-App-40x40@1x.png │ │ │ ├── Icon-App-40x40@2x.png │ │ │ ├── Icon-App-40x40@3x.png │ │ │ ├── Icon-App-60x60@2x.png │ │ │ ├── Icon-App-60x60@3x.png │ │ │ ├── Icon-App-76x76@1x.png │ │ │ ├── Icon-App-76x76@2x.png │ │ │ └── Icon-App-83.5x83.5@2x.png │ │ └── LaunchImage.imageset │ │ │ ├── Contents.json │ │ │ ├── LaunchImage.png │ │ │ ├── LaunchImage@2x.png │ │ │ ├── LaunchImage@3x.png │ │ │ └── README.md │ │ ├── Base.lproj │ │ ├── LaunchScreen.storyboard │ │ └── Main.storyboard │ │ ├── Info.plist │ │ └── Runner-Bridging-Header.h │ ├── lib │ ├── main.dart │ └── screens │ │ └── home │ │ ├── home_screen.dart │ │ └── home_screen.tsx │ ├── next-env.d.ts │ ├── next.config.js │ ├── package.json │ ├── pages │ ├── _app.tsx │ └── index.ts │ ├── pubspec.lock │ ├── pubspec.yaml │ ├── test │ └── widget_test.dart │ ├── tsconfig.json │ └── web │ ├── favicon.png │ ├── icons │ ├── Icon-192.png │ ├── Icon-512.png │ ├── Icon-maskable-192.png │ └── Icon-maskable-512.png │ ├── index.html │ └── manifest.json ├── ios ├── .gitignore ├── Flutter │ ├── AppFrameworkInfo.plist │ ├── Debug.xcconfig │ └── Release.xcconfig ├── Runner.xcodeproj │ ├── project.pbxproj │ ├── project.xcworkspace │ │ ├── contents.xcworkspacedata │ │ └── xcshareddata │ │ │ ├── IDEWorkspaceChecks.plist │ │ │ └── WorkspaceSettings.xcsettings │ └── xcshareddata │ │ └── xcschemes │ │ └── Runner.xcscheme ├── Runner.xcworkspace │ ├── contents.xcworkspacedata │ └── xcshareddata │ │ ├── IDEWorkspaceChecks.plist │ │ └── WorkspaceSettings.xcsettings └── Runner │ ├── AppDelegate.swift │ ├── Assets.xcassets │ ├── AppIcon.appiconset │ │ ├── Contents.json │ │ ├── Icon-App-1024x1024@1x.png │ │ ├── Icon-App-20x20@1x.png │ │ ├── Icon-App-20x20@2x.png │ │ ├── Icon-App-20x20@3x.png │ │ ├── Icon-App-29x29@1x.png │ │ ├── Icon-App-29x29@2x.png │ │ ├── Icon-App-29x29@3x.png │ │ ├── Icon-App-40x40@1x.png │ │ ├── Icon-App-40x40@2x.png │ │ ├── Icon-App-40x40@3x.png │ │ ├── Icon-App-60x60@2x.png │ │ ├── Icon-App-60x60@3x.png │ │ ├── Icon-App-76x76@1x.png │ │ ├── Icon-App-76x76@2x.png │ │ └── Icon-App-83.5x83.5@2x.png │ └── LaunchImage.imageset │ │ ├── Contents.json │ │ ├── LaunchImage.png │ │ ├── LaunchImage@2x.png │ │ ├── LaunchImage@3x.png │ │ └── README.md │ ├── Base.lproj │ ├── LaunchScreen.storyboard │ └── Main.storyboard │ ├── Info.plist │ └── Runner-Bridging-Header.h ├── jest.config.js ├── lib ├── Introduction.stories.mdx ├── components.dart ├── components.ts ├── components │ ├── box │ │ ├── __snapshots__ │ │ │ └── box.test.tsx.snap │ │ ├── box-base.tsx │ │ ├── box.dart │ │ ├── box.stories.mdx │ │ ├── box.test.tsx │ │ ├── box.tsx │ │ └── flutter │ │ │ ├── box_base_styles.dart │ │ │ ├── child_decorator.dart │ │ │ └── hexcolor.dart │ ├── button │ │ ├── button.dart │ │ ├── button.stories.mdx │ │ ├── button.tsx │ │ └── ripples │ │ │ └── ripples.tsx │ ├── griddisplay │ │ ├── griddisplay.dart │ │ ├── griddisplay.stories.mdx │ │ └── griddisplay.tsx │ ├── icon │ │ ├── icon.stories.mdx │ │ └── icon.tsx │ ├── image │ │ ├── image.dart │ │ ├── image.stories.mdx │ │ └── image.tsx │ ├── provider │ │ ├── flutter │ │ │ └── theme.dart │ │ ├── provider.dart │ │ ├── provider.stories.mdx │ │ ├── provider.tsx │ │ └── react │ │ │ └── CSSReset.tsx │ ├── text │ │ ├── text.dart │ │ ├── text.stories.mdx │ │ └── text.tsx │ └── textfield │ │ ├── textfield.dart │ │ ├── textfield.stories.mdx │ │ └── textfield.tsx ├── core │ ├── breakpoints │ │ ├── breakpoints.dart │ │ ├── breakpoints.json │ │ ├── breakpoints.stories.mdx │ │ └── breakpoints.ts │ ├── stylesheet │ │ ├── stylesheet.dart │ │ ├── stylesheet.json │ │ └── stylesheet.ts │ ├── theme │ │ ├── colors │ │ │ ├── colors.json │ │ │ ├── colors.stories.mdx │ │ │ ├── theme_color_set.dart │ │ │ └── theme_colors.dart │ │ ├── generator │ │ │ ├── generator.stories.mdx │ │ │ └── generator.tsx │ │ ├── space │ │ │ └── space.stories.mdx │ │ ├── theme.dart │ │ ├── theme.stories.mdx │ │ ├── theme.ts │ │ └── typography │ │ │ ├── typography.dart │ │ │ └── typography.json │ └── typography │ │ └── typography.ts ├── main.dart ├── screens │ └── home.dart └── utils │ ├── renderCSS.ts │ ├── string │ └── capitalize.ts │ └── test │ └── rtl-utils.tsx ├── package.json ├── pubspec.lock ├── pubspec.yaml ├── rollup.config.js ├── scripts ├── bumpFlutter.js ├── coder │ ├── coder.js │ ├── core │ │ └── core.js │ └── files │ │ ├── stylesheet.js │ │ └── theme.js ├── parseDocs.js ├── pub_login.sh └── publishToGHRegistry.js ├── test └── box_test.dart ├── tsconfig.json ├── web ├── favicon.png ├── icons │ ├── Icon-192.png │ ├── Icon-512.png │ ├── Icon-maskable-192.png │ └── Icon-maskable-512.png ├── index.html └── manifest.json └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "targets": ">0.2%, not dead, not op_mini all" 7 | } 8 | ], 9 | "@babel/preset-react", 10 | "@babel/preset-typescript" 11 | ], 12 | "plugins": [ 13 | ["@babel/plugin-proposal-private-property-in-object", { "loose": true }], 14 | ["@babel/plugin-proposal-class-properties", { "loose": true }], 15 | ["@babel/plugin-proposal-private-methods", { "loose": true }], 16 | [ 17 | "styled-jsx/babel" 18 | ] 19 | ] 20 | } -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: https://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | [*] 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | charset = utf-8 11 | trim_trailing_whitespace = false 12 | insert_final_newline = false -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/*.d.ts 2 | docs 3 | examples 4 | scripts 5 | dist -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es2021: true, 5 | }, 6 | extends: [ 7 | 'plugin:react/recommended', 8 | 'airbnb', 9 | 'plugin:@typescript-eslint/recommended', 10 | 'plugin:prettier/recommended', 11 | ], 12 | parser: '@typescript-eslint/parser', 13 | parserOptions: { 14 | ecmaFeatures: { 15 | jsx: true, 16 | }, 17 | ecmaVersion: 13, 18 | sourceType: 'module', 19 | }, 20 | plugins: ['react', 'react-hooks', '@typescript-eslint', 'prettier'], 21 | rules: { 22 | 'import/extensions': ['off'], 23 | 'import/no-unresolved': 'error', 24 | 'import/prefer-default-export': 'off', 25 | 'react/jsx-filename-extension': [1, { extensions: ['.tsx'] }], 26 | 'react/jsx-props-no-spreading': 'off', 27 | 'react/function-component-definition': [ 28 | 2, 29 | { 30 | namedComponents: 'function-declaration', 31 | }, 32 | ], 33 | 'no-shadow': 'off', 34 | '@typescript-eslint/no-shadow': ['error'], 35 | }, 36 | settings: { 37 | 'import/resolver': { 38 | typescript: {}, 39 | }, 40 | }, 41 | }; 42 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 13 | custom: ['https://www.youtube.com/channel/UCzR2u5RWXWjUh7CwLSvbitA/join'] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 14 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/new-task.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: New Task 3 | about: Default template for new tasks 4 | title: "[TASK] " 5 | labels: "\U0001F4E5 - Task" 6 | assignees: omariosouto 7 | 8 | --- 9 | 10 | ## Why 11 | - ... 12 | 13 | ## How 14 | - ... 15 | 16 | ## Definition of Done 17 | - ... 18 | -------------------------------------------------------------------------------- /.github/workflows/flutter-cd.yml: -------------------------------------------------------------------------------- 1 | name: Flutter - Continuous Delivery 2 | 3 | on: 4 | push: 5 | branches: [ main ] 6 | 7 | env: 8 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 9 | VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }} 10 | 11 | jobs: 12 | build: 13 | runs-on: ubuntu-latest 14 | steps: 15 | - uses: actions/checkout@v1 16 | - uses: actions/setup-node@v2 17 | with: 18 | node-version: '14' 19 | - uses: actions/setup-java@v2 20 | with: 21 | distribution: 'zulu' 22 | java-version: '11' 23 | - uses: subosito/flutter-action@v1 24 | with: 25 | flutter-version: '2.8.0' 26 | - run: | 27 | cd examples/demo_base 28 | yarn install 29 | yarn build:flutter-web 30 | VERCEL_ORG_ID=team_VsGiGOd4ssSG5mHS8pVtgfp6 VERCEL_PROJECT_ID=prj_F5B0UiqWobsNYKGqYoLTpO16IUGQ yarn deploy:prod 31 | -------------------------------------------------------------------------------- /.github/workflows/release-flutter.yml: -------------------------------------------------------------------------------- 1 | name: Flutter - Publish Package 2 | on: 3 | release: 4 | types: [published] 5 | 6 | jobs: 7 | build: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - uses: actions/checkout@v1 11 | - uses: actions/setup-node@v2 12 | with: 13 | node-version: '14' 14 | - uses: actions/setup-java@v2 15 | with: 16 | distribution: 'zulu' 17 | java-version: '11' 18 | - uses: subosito/flutter-action@v1 19 | with: 20 | flutter-version: '2.8.0' 21 | - name: Install dependencies 22 | run: flutter pub get 23 | - name: Setup Pub Credentials 24 | shell: bash 25 | env: 26 | PUB_DEV_PUBLISH_ACCESS_TOKEN: ${{ secrets.PUB_DEV_PUBLISH_ACCESS_TOKEN }} 27 | PUB_DEV_PUBLISH_REFRESH_TOKEN: ${{ secrets.PUB_DEV_PUBLISH_REFRESH_TOKEN }} 28 | PUB_DEV_PUBLISH_TOKEN_ENDPOINT: ${{ secrets.PUB_DEV_PUBLISH_TOKEN_ENDPOINT }} 29 | PUB_DEV_PUBLISH_EXPIRATION: ${{ secrets.PUB_DEV_PUBLISH_EXPIRATION }} 30 | run: | 31 | sh ./scripts/pub_login.sh 32 | rm -rf examples 33 | rm -rf docs 34 | git config --global user.email "13791385+omariosouto@users.noreply.github.com" 35 | git config --global user.name "CI Bot - DevSoutinho" 36 | git add . 37 | git commit -m "forcing delete" 38 | - name: Check Publish Warnings 39 | run: pub publish --dry-run 40 | - name: Publish Package 41 | run: pub publish -f 42 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | on: 3 | push: 4 | branches: 5 | - main 6 | jobs: 7 | release: 8 | name: Release 9 | runs-on: ubuntu-18.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: 17 17 | - name: Install dependencies 18 | run: yarn install 19 | - name: Release NPM Registry & Flutter Pub 20 | env: 21 | GIT_AUTHOR_NAME: "@bumper-bot" 22 | GITHUB_TOKEN: ${{ secrets.GH_MASTER_TOKEN }} 23 | NPM_TOKEN: ${{ secrets.NPM_TOKEN || secrets.GH_MASTER_TOKEN }} 24 | run: | 25 | echo 'Run Flutter CI Steps' 26 | yarn build 27 | yarn release 28 | - name: Release GitHub Registry 29 | env: 30 | GITHUB_TOKEN: ${{ secrets.GH_MASTER_TOKEN }} 31 | NPM_TOKEN: ${{ secrets.NPM_TOKEN || secrets.GH_MASTER_TOKEN }} 32 | run: | 33 | echo '//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}' > ~/.npmrc 34 | yarn release:github_registry 35 | -------------------------------------------------------------------------------- /.metadata: -------------------------------------------------------------------------------- 1 | # This file tracks properties of this Flutter project. 2 | # Used by Flutter tool to assess capabilities and perform upgrades etc. 3 | # 4 | # This file should be version controlled and should not be manually edited. 5 | 6 | version: 7 | revision: cf4400006550b70f28e4b4af815151d1e74846c6 8 | channel: stable 9 | 10 | project_type: package 11 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "editorconfig": true 4 | } -------------------------------------------------------------------------------- /.pubignore: -------------------------------------------------------------------------------- 1 | android/components_android.iml 2 | components.iml 3 | scripts 4 | docs 5 | .storybook 6 | .github 7 | node_modules 8 | examples -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | const { TsconfigPathsPlugin } = require('tsconfig-paths-webpack-plugin'); 2 | 3 | 4 | 5 | module.exports = { 6 | stories: [ 7 | "../lib/**/*.stories.mdx", 8 | ], 9 | addons: [ 10 | "@storybook/addon-links", 11 | "@storybook/addon-essentials" 12 | ], 13 | features: { 14 | postcss: false, 15 | }, 16 | framework: "@storybook/react", 17 | webpackFinal: async (config) => { 18 | [].push.apply(config.resolve.plugins, [ 19 | new TsconfigPathsPlugin({extensions: config.resolve.extensions}) 20 | ]); 21 | return config; 22 | } 23 | } -------------------------------------------------------------------------------- /.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | import { Provider } from '../lib/components/provider/provider'; 2 | 3 | 4 | export const parameters = { 5 | actions: { argTypesRegex: "^on[A-Z].*" }, 6 | controls: { 7 | matchers: { 8 | color: /(background|color)$/i, 9 | date: /Date$/, 10 | }, 11 | }, 12 | } 13 | 14 | export const decorators = [ 15 | (Story) => ( 16 | 17 | 18 | 19 | ), 20 | ]; -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /@types/styled-jsx.d.ts: -------------------------------------------------------------------------------- 1 | import 'react'; 2 | 3 | declare module 'react' { 4 | interface StyleHTMLAttributes extends React.HTMLAttributes { 5 | jsx?: boolean | string; 6 | global?: boolean; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 SkynexUI 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SkynexUI: 2 | 3 | ## Why "another component library"? 4 | The focus of this library is to provide a common "DSL" for write UI cross platform. Doesn't matter if the platform it's mobile or web. You will think in UI based in "Text" (``) and "Boxes" (``) and write the styles with breakpoints based in the web CSS key value conventions. 5 | 6 | [](https://vercel.com/?utm_source=skynexui&utm_campaign=oss) 7 | 8 | ![Downloads](https://img.shields.io/npm/dw/@skynexui/components?color=orange) ![Current Version](https://img.shields.io/npm/v/@skynexui/components?color=green&label=version&cache=1) [![Flutter Package](https://img.shields.io/badge/skynexui__components-fluttter-blue)](https://pub.dev/packages/skynexui_components) [![NPM Package](https://img.shields.io/badge/@skynexui/components-npm-red)](https://www.npmjs.com/package/@skynexui/components) 9 | 10 | > ⚠️ Until version 2.0 we will have breaking changes while structuring the API. 11 | 12 | ## Get Started 13 | - [Follow these steps to create a new project](https://github.com/vercel/next.js/tree/canary/examples/with-skynexui-components) 14 | 15 | ## Demo 16 | - This is the [main demo](https://github.com/skynexui/components/tree/main/examples/demo_base) that we are working on, an project with React for Web and Flutter for mobile development. 17 | 18 | ## Contributing 19 | - The project is not well structured for contributions right now, if you find a bug, please [open an issue](https://github.com/skynexui/components/issues) and let's discuss how to implement it 😋. 20 | 21 | ### Dev mode 22 | #### React (Web) 23 | - Use the folder `examples/demo_base` that simulates a real world project structure. 24 | - This setup has `build:watch` mode 25 | ```sh 26 | # First terminal window 27 | yarn install && yarn build:watch 28 | 29 | # Second terminal window 30 | yarn dev:demo_base 31 | ``` 32 | #### Flutter (Other platforms) 33 | - Open inside VSCode `examples/demo_base/lib/main.dart`, them run it through it. 34 | 35 | 36 | ## How to use? 37 | 38 | - Check the [docs here](https://skynexui.dev/) 39 | - We also have a [storybook](https://storybook.skynexui.dev/) 40 | 41 | ## How to install? 42 | 43 | - flutter: 44 | ```sh 45 | flutter pub add skynexui_components 46 | ``` 47 | 48 | - yarn 49 | ```sh 50 | yarn add @skynexui/components 51 | ``` 52 | 53 | - npm 54 | ```sh 55 | npm install @skynexui/components 56 | ``` 57 | 58 | ## Supporters 59 | 60 | | Companies that trust in this project | 61 | | --- | 62 | | [](https://alura.com.br/?utm_source=skynexui&utm_campaign=oss) | 63 | -------------------------------------------------------------------------------- /analysis_options.yaml: -------------------------------------------------------------------------------- 1 | # This file configures the analyzer, which statically analyzes Dart code to 2 | # check for errors, warnings, and lints. 3 | # 4 | # The issues identified by the analyzer are surfaced in the UI of Dart-enabled 5 | # IDEs (https://dart.dev/tools#ides-and-editors). The analyzer can also be 6 | # invoked from the command line by running `flutter analyze`. 7 | 8 | # The following line activates a set of recommended lints for Flutter apps, 9 | # packages, and plugins designed to encourage good coding practices. 10 | include: package:flutter_lints/flutter.yaml 11 | 12 | linter: 13 | # The lint rules applied to this project can be customized in the 14 | # section below to disable rules from the `package:flutter_lints/flutter.yaml` 15 | # included above or to enable additional rules. A list of all available lints 16 | # and their documentation is published at 17 | # https://dart-lang.github.io/linter/lints/index.html. 18 | # 19 | # Instead of disabling a lint rule for the entire project in the 20 | # section below, it can also be suppressed for a single line of code 21 | # or a specific dart file by using the `// ignore: name_of_lint` and 22 | # `// ignore_for_file: name_of_lint` syntax on the line or in the file 23 | # producing the lint. 24 | rules: 25 | # avoid_print: false # Uncomment to disable the `avoid_print` rule 26 | # prefer_single_quotes: true # Uncomment to enable the `prefer_single_quotes` rule 27 | 28 | # Additional information about this file can be found at 29 | # https://dart.dev/guides/language/analysis-options 30 | -------------------------------------------------------------------------------- /android/.gitignore: -------------------------------------------------------------------------------- 1 | gradle-wrapper.jar 2 | /.gradle 3 | /captures/ 4 | /gradlew 5 | /gradlew.bat 6 | /local.properties 7 | GeneratedPluginRegistrant.java 8 | 9 | # Remember to never publicly share your keystore. 10 | # See https://flutter.dev/docs/deployment/android#reference-the-keystore-from-the-app 11 | key.properties 12 | **/*.keystore 13 | **/*.jks 14 | -------------------------------------------------------------------------------- /android/app/build.gradle: -------------------------------------------------------------------------------- 1 | def localProperties = new Properties() 2 | def localPropertiesFile = rootProject.file('local.properties') 3 | if (localPropertiesFile.exists()) { 4 | localPropertiesFile.withReader('UTF-8') { reader -> 5 | localProperties.load(reader) 6 | } 7 | } 8 | 9 | def flutterRoot = localProperties.getProperty('flutter.sdk') 10 | if (flutterRoot == null) { 11 | throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.") 12 | } 13 | 14 | def flutterVersionCode = localProperties.getProperty('flutter.versionCode') 15 | if (flutterVersionCode == null) { 16 | flutterVersionCode = '1' 17 | } 18 | 19 | def flutterVersionName = localProperties.getProperty('flutter.versionName') 20 | if (flutterVersionName == null) { 21 | flutterVersionName = '1.0' 22 | } 23 | 24 | apply plugin: 'com.android.application' 25 | apply plugin: 'kotlin-android' 26 | apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle" 27 | 28 | android { 29 | compileSdkVersion flutter.compileSdkVersion 30 | 31 | compileOptions { 32 | sourceCompatibility JavaVersion.VERSION_1_8 33 | targetCompatibility JavaVersion.VERSION_1_8 34 | } 35 | 36 | kotlinOptions { 37 | jvmTarget = '1.8' 38 | } 39 | 40 | sourceSets { 41 | main.java.srcDirs += 'src/main/kotlin' 42 | } 43 | 44 | defaultConfig { 45 | // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html). 46 | applicationId "dev.skynexui.components" 47 | minSdkVersion flutter.minSdkVersion 48 | targetSdkVersion flutter.targetSdkVersion 49 | versionCode flutterVersionCode.toInteger() 50 | versionName flutterVersionName 51 | } 52 | 53 | buildTypes { 54 | release { 55 | // TODO: Add your own signing config for the release build. 56 | // Signing with the debug keys for now, so `flutter run --release` works. 57 | signingConfig signingConfigs.debug 58 | } 59 | } 60 | } 61 | 62 | flutter { 63 | source '../..' 64 | } 65 | 66 | dependencies { 67 | implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version" 68 | } 69 | -------------------------------------------------------------------------------- /android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 7 | 15 | 19 | 23 | 24 | 25 | 26 | 27 | 28 | 30 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /android/app/src/main/kotlin/dev/skynexui/components/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package dev.skynexui.components 2 | 3 | import io.flutter.embedding.android.FlutterActivity 4 | 5 | class MainActivity: FlutterActivity() { 6 | } 7 | -------------------------------------------------------------------------------- /android/app/src/main/res/drawable-v21/launch_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /android/app/src/main/res/drawable/launch_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skynexui/components/1c17387f2521af9dbab05278b983019770756233/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skynexui/components/1c17387f2521af9dbab05278b983019770756233/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skynexui/components/1c17387f2521af9dbab05278b983019770756233/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skynexui/components/1c17387f2521af9dbab05278b983019770756233/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skynexui/components/1c17387f2521af9dbab05278b983019770756233/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/values-night/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 15 | 18 | 19 | -------------------------------------------------------------------------------- /android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 15 | 18 | 19 | -------------------------------------------------------------------------------- /android/app/src/profile/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | ext.kotlin_version = '1.3.50' 3 | repositories { 4 | google() 5 | mavenCentral() 6 | } 7 | 8 | dependencies { 9 | classpath 'com.android.tools.build:gradle:4.1.0' 10 | classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" 11 | } 12 | } 13 | 14 | allprojects { 15 | repositories { 16 | google() 17 | mavenCentral() 18 | } 19 | } 20 | 21 | rootProject.buildDir = '../build' 22 | subprojects { 23 | project.buildDir = "${rootProject.buildDir}/${project.name}" 24 | } 25 | subprojects { 26 | project.evaluationDependsOn(':app') 27 | } 28 | 29 | task clean(type: Delete) { 30 | delete rootProject.buildDir 31 | } 32 | -------------------------------------------------------------------------------- /android/components_android.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /android/gradle.properties: -------------------------------------------------------------------------------- 1 | org.gradle.jvmargs=-Xmx1536M 2 | android.useAndroidX=true 3 | android.enableJetifier=true 4 | -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Fri Jun 23 08:50:38 CEST 2017 2 | distributionBase=GRADLE_USER_HOME 3 | distributionPath=wrapper/dists 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip 7 | -------------------------------------------------------------------------------- /android/settings.gradle: -------------------------------------------------------------------------------- 1 | include ':app' 2 | 3 | def localPropertiesFile = new File(rootProject.projectDir, "local.properties") 4 | def properties = new Properties() 5 | 6 | assert localPropertiesFile.exists() 7 | localPropertiesFile.withReader("UTF-8") { reader -> properties.load(reader) } 8 | 9 | def flutterSdkPath = properties.getProperty("flutter.sdk") 10 | assert flutterSdkPath != null, "flutter.sdk not set in local.properties" 11 | apply from: "$flutterSdkPath/packages/flutter_tools/gradle/app_plugin_loader.gradle" 12 | -------------------------------------------------------------------------------- /components.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /docs/docs.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": { 3 | "_app.js": "_app.tsx", 4 | "meta.json": { 5 | "index": "Introduction", 6 | "components": "Components", 7 | "theme": "Theme", 8 | "compiler": "Compiler" 9 | }, 10 | "index.mdx": "introduction.stories.mdx", 11 | "components": { 12 | "meta.json": { 13 | "index": "What is considered the theme?", 14 | "box": "Box", 15 | "text": "Text", 16 | "textfield": "TextField", 17 | "griddisplay": "GridDisplay", 18 | "image": "Image" 19 | }, 20 | "provider.mdx": "provider.stories.mdx", 21 | "box.mdx": "box.stories.mdx", 22 | "text.mdx": "text.stories.mdx", 23 | "button.mdx": "button.stories.mdx", 24 | "textfield.mdx": "textfield.stories.mdx", 25 | "icon.mdx": "icon.stories.mdx", 26 | "griddisplay.mdx": "griddisplay.stories.mdx", 27 | "image.mdx": "image.stories.mdx" 28 | }, 29 | "theme": { 30 | "meta.json": { 31 | "index": "What is considered the theme?", 32 | "breakpoints": "Breakpoints", 33 | "colors": "Colors", 34 | "space": "Space", 35 | "generator": "Generator" 36 | }, 37 | "theme.mdx": "theme.stories.mdx", 38 | "breakpoints.mdx": "breakpoints.stories.mdx", 39 | "colors.mdx": "colors.stories.mdx", 40 | "space.mdx": "space.stories.mdx", 41 | "generator.mdx": "generator.stories.mdx" 42 | } 43 | } 44 | } -------------------------------------------------------------------------------- /docs/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /docs/next.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-param-reassign */ 2 | /* eslint-disable import/no-extraneous-dependencies */ 3 | /* eslint-disable @typescript-eslint/no-var-requires */ 4 | /* eslint-disable import/no-unresolved */ 5 | const path = require('path'); 6 | const withPlugins = require('next-compose-plugins'); 7 | 8 | const withNextra = require('nextra')({ 9 | theme: 'nextra-theme-docs', 10 | themeConfig: './theme.config.js', 11 | // optional: add `unstable_staticImage: true` to enable Nextra's auto image import 12 | }); 13 | 14 | module.exports = withPlugins([withNextra()], { 15 | trailingSlash: true, 16 | }); 17 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docs", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "dev": "next dev", 8 | "start": "next start", 9 | "build": "next build", 10 | "export": "next build && next export -o dist" 11 | }, 12 | "dependencies": { 13 | "@skynexui/components": "1.23.2", 14 | "next": "^12.0.8", 15 | "nextra": "^1.1.0", 16 | "nextra-theme-docs": "^1.2.6", 17 | "react": "^17.0.2", 18 | "react-dom": "^17.0.2" 19 | }, 20 | "devDependencies": { 21 | "@types/react": "^17.0.38", 22 | "next-compose-plugins": "^2.2.1", 23 | "typescript": "^4.5.4" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /docs/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-explicit-any */ 2 | /* eslint-disable react/jsx-filename-extension */ 3 | /* eslint-disable react/prop-types */ 4 | /* eslint-disable import/no-unresolved */ 5 | import React from 'react'; 6 | import Script from 'next/script'; 7 | import 'nextra-theme-docs/style.css'; 8 | 9 | export default function Nextra({ Component, pageProps }: any) { 10 | return ( 11 | <> 12 | 16 | 17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /docs/pages/components/box.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Box 3 | --- 4 | import { Canvas, Story, ArgsTable } from '../../scripts/docs/defaults.tsx' 5 | 6 | import { Box } from '@skynexui/components'; 7 | 8 | 9 | # Box 10 | 11 | Box is the most basic component that we have. The idea is to be the representation of a "box" in the UI. It can be used to create a container for other components. 12 | You also are able to provide a `tag` prop where you change the displayed tag for semantics in the web. 13 | 14 | ```js 15 | // JavaScript 16 | import { Box } from '@skynexui/components'; 17 | ``` 18 | ```js 19 | // Flutter 20 | import 'package:skynexui_components/components.dart'; 21 | ``` 22 | > [Wanna test the props? To go Storybook](https://storybook.skynexui.dev/?path=/story/components-box--box-component) 23 | 24 | 25 | 26 | 27 | 45 | {(args) => } 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /docs/pages/components/button.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Button 3 | --- 4 | import { Canvas, Story, ArgsTable } from '../../scripts/docs/defaults.tsx' 5 | 6 | import { Button } from '@skynexui/components'; 7 | 8 | 9 | # Button 10 | 11 | Button is the component that you use, for get user taps and clicks. 12 | 13 | ```js 14 | // JavaScript 15 | import { Button } from '@skynexui/components'; 16 | ``` 17 | ```js 18 | // Flutter 19 | import 'package:skynexui_components/components.dart'; 20 | ``` 21 | > [Wanna test the props? To go Storybook](https://storybook.skynexui.dev/?path=/docs/components-button--button-component) 22 | 23 | 24 | 25 | 26 | 30 | {(args) =>